@media(max-width:1920px) and (min-width:1600px){
    /* .seo-hero-img {
        height: 487px;
    } */
}




@media (max-width: 1385px) and (min-width: 1240px) {

    .contact-us-heading {
    font-size: 215px;}

    #prouduction .core-bx {
    height: 230px;
}
    #web-development .core-bx {
        height: 278px;
    }
    #product-packaging .core-bx {
        height: 300px;
    }
 #email-marketing .core-bx {
        height: 255px;
    }
    #logo-design .core-bx {
        height: 205px;
    }
    #email-marketing .about-section1 .image-column .image-2 {
        top: 54%;
   
        height: auto;
  
     
    }

    .email-core-task .core-bx {
        height: 250px;
    }
    .core-bx {
        height: 308px;
    }

    .seo-hero-content h1 {
        font-size: 60px;
    }

    .form-container .form-control {
        margin-bottom: 10px;
        font-size: 14px;
        min-height: 45px;
    }
    .about--bx {
        padding: 17px;
        height: 208px;
    }

    .btn-submit {
        margin: 20px auto;
        height: 45px;
        font-size: 14px;
    }

    .main-class .form-content{
        padding: 0px 0px 0px 30px
    }

    .solid_reason-bx .process-btn {
        margin-top: 4px;
        font-size: 12px;
        padding: 4px 20px;
        width:fit-content;
    }
    .form-content h1 {
        font-size: 40px;
  
    }

    .about--bx .text-second {
        font-size: 25px;
    }

    .solid-reasons-section .why-c-heading {
        font-size: 40px;
    }
    .significance-row > div h2 {
        font-size: 18px;
    }
    .seo-core-task .core-bx {
        height: 284px;
    }

    .core-bx > p {
        font-size: 13px;
    }
    .core-bx h2 {
        font-size: 16px;
        color: black;
    }

    .about-section1 .image-column .image-2 {
        position: absolute;
        right: -75px;
        top: 50%;
        margin-bottom: 0;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        overflow: hidden;
        height: 195px;
        /* border: 5px solid #ffffff; */
        width: 180px;
        /* -webkit-box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1); */
        /* box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1); */
    }

    .about-section1 .image-column .image-1 img{
        height: auto;
    }
    .seo-hero-content h1 {
        font-size: 70px;
    }
    .banner-one-item h2 {
        font-size: 60px;
    }

    /* .seo-hero-img {
        height: 330px;
    } */
}




@media (max-width: 1240px) and (min-width: 1024px) {

    .contact-us-heading {
    font-size: 166px;
}

.contact-sub {
    font-size: 25px;

}
    .about-section1 .image-column .image-1 img{
        height: auto;
    }

    .form-container .form-control {
        margin-bottom: 10px;
        min-height: 42px;
    }

    .form-content p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    /* Your CSS styles here */
    .brands-link {
        padding: 3px 20px;
        width: 77%;
        font-size: 14px;
        bottom: 18%;
    }
    .navbar-brand, .nav-link {
        font-size: 15px;
    }
    .choose-us-style-one-thumb .video-play-button {
        right: 112px;
        bottom: -104px;
    }
    .right-para {
        max-width: 70%;
    }

    .first-content .why-numbers {
        font-size: 70px;

    }

    .first-content h3 {
        font-size: 16px;
        padding-left: 7px;
    }

    p.fris-para {
        font-size: 13px;
    }

    .banner-one-item h2 {
        font-size: 50px;

    }
    .lets-cta-section .up-arrow{
        bottom: unset;
    }

    .accrdion-portfolio-area .out .accordion-overlay p{
        font-size: 14px;
    }

    .accrdion-portfolio-area .out .accordion-overlay a {
        font-size: 30px;

    }

    .form-content h1 {
        font-size: 40px;
     
    }

    .btn-submit{
        width:100%;

    }

    .btn-submit {
        margin: 20px auto;
        height: 42px;
        font-size: 15px;
    }

    .footer-para {
        font-size: 35px;
    }
    .banner-one-item h4{
        font-size: 14px;;
    }

    .blog-area .item .info {
        padding: 15px;
    }
    .blog-area .item .info h4 a {
        line-height: 1;
        font-weight: 600;
    }
    .blog-area .item .info h4 {
        font-size: 17px;
        margin-bottom: 5px;
    }
    .blog-area .item .info .meta {
        margin-bottom: 5px;
    }

    footer .before-bg::before {
        width: 331px;
    }

    .blog-area .item .date span {
        font-size: 12px;
        padding: 0 10px;
        min-width: 50px;
    }
    .blog-area .item .date {
        font-size: 15px;
        font-weight: 600;
        /* margin-bottom: 15px; */
    }

    .blog-area .thumb .date {
        right: 13px;
        bottom: -23px;
        margin: 0;
        padding: 0;
    }
    .blog-area .item .info {
        padding: 20px!important;
    }
}


@media(max-width:1023px){

    .contact-us-heading {
    font-size: 140px;

}
.have-questions h1 {
    font-size: 30px;
    font-weight: 400;
}

.our-contact-overlay p {

    font-size: 16px;
}

.contact-sub {
    font-size: 22px;

}

    .faq-section .accordion-item{
        background:unset;
        font-weight: 500;
    }

    .accordion-portfolio-lists li > span {
     
        -webkit-text-stroke: .3px var(--white)!important;

    }

    .accordion-portfolio-lists li::after {
      
        /* background: var(--bg-gradient); */
        background: linear-gradient(to right, #FE4601 0%, #0E0920 60%, #0E0920 100%)!important;
       
    }
     
.accordion-portfolio-lists li:nth-child(4)::after {
    /* background: #6a850b; */
    background: linear-gradient(to right, #FE4601 0%, #0E0920 60%, #0E0920 100%)!important;
}

    .accordion-portfolio-lists li:nth-child(3)::after {
        /* background: #bccd7e; */
        background: linear-gradient(to right, #FE4601 0%, #0E0920 60%, #0E0920 100%)!important;
    }

    .accordion-portfolio-lists li:nth-child(2)::after {
        background: linear-gradient(to right, #FE4601 0%, #0E0920 60%, #0E0920 100%)!important;
    }


    .our-work-section .banner-one-item img {
        width: 45px!important;
    }

    .mob-dropdown button::after {
        right: 0!important;
        /* the chevron is a dark SVG data-URI; inverted so it reads on the
           dark sheet like the rest of the type */
        filter: brightness(0) invert(1)!important;
        left: unset!important;
        background-color: unset!important;
    }

    .mob-dropdown .accordion-button {
        padding: 10px 0;
        font-weight: 600;
        font-size: 14px;
        color: #ffffff!important;
    }

    .mob-dropdown .accordion-button:focus {
        border-color: unset;
        box-shadow: unset;
    }

    /* .mob-dropdown button:hover::after {
        -webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
        transform: translateY(-45%) skew(0deg) scale(1)!important;
    } */

    .mob-dropdown .list-unstyled li{
        margin:5px 0px!important;
    }

    .mob-dropdown .accordion-body {
        padding-top: 0;
    }

    /* .seo-hero-img {
        height: 250px;
    } */

    .about-section1 .image-column .image-2 {
        position: absolute;
        right: -36px;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 0;
        border-radius: 10px;
        overflow: hidden;
        height: 195px;
        /* border: 5px solid #ffffff; */
        width: 180px;
        /* -webkit-box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1); */
        /* box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1); */
    }
    .mobile-none{
        display: none;
    }
    .desktop-none{
        display: block;
    }
    a.navbar-brand {
        position: unset!important;
        transform: unset!important;
    }

    .choose-us-style-one-thumb .video-play-button {
        right: 60px !important;
        bottom: -45px!important;
    }

    .banner-one-item img {
        position: absolute;
        right: 34%;
        top: 74%;
        width: 96px;
    }

    .default-padding {
        padding-top: 50px;
    }
    .form-content {
        padding-left: 40px;
    }

    .form-content h1 {
        font-size: 40px;
    }

    .btn-submit {
        margin: 20px auto;
        height: 40px;
        font-size: 14px;
        width: 100%;
        text-align: center;
        width: 100%;
        padding: 0;
    }
  
    .form-content p {
        font-size: 18px;
    }

    .lets-cta-section .up-arrow {
   
        right: 12%;
        bottom: 87px;
    }

    .brands-link {

        font-size: 16px;
       
    }

    .footer-para {
        font-size: 22px;
        line-height: 1.4;
        margin-top: 20px;
    }
    .logo a img{
        width:110px
    }

    .footer .pl-100 {
        padding-left: 20px;
    }

    .footer h5 {
        font-size: 18px;
    }

    .footer .pl-50 {
        padding-left: 10px;
    }

    .ptb-80 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Site theme: #19132F bar over a #0E0920 body, white type, orange accent.
       The old blue/green gradient header and white sheet were left over from
       the previous design. */
    .mob-canvas {
        width: 78%;
        background: #0E0920;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mob-canvas .offcanvas-header {
        background: #19132F;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 18px 20px;
    }
    /* Bootstrap paints the accordion and its panels white; the sheet is dark
       now, so every one of those surfaces has to be cleared. */
    .mob-canvas .accordion,
    .mob-canvas .accordion-item,
    .mob-canvas .accordion-button,
    .mob-canvas .accordion-body,
    .mob-canvas .accordion-collapse {
        background: transparent;
        background-color: transparent;
    }

    .desk-logo {
        margin-bottom: 0 !important;
    }
    .desk-logo img {
        width: 170px;
    }

    .mob-menus ul {
        display: flex
;
        padding: 0;
        flex-flow: column;
    }

    .mob-menus ul.nav.nav-pills > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mob-menus ul li a {
        padding-left: 0;
        color: #ffffff!important;
        font-weight: 600;
        font-size: 14px;
    }
    /* The nested service links read as a second level, so they sit dimmer than
       the top-level items and pick up the site orange on tap. */
    .mob-canvas .accordion-body .nav-link {
        color: rgba(255, 255, 255, 0.66)!important;
        font-weight: 500!important;
        font-size: 13px!important;
    }
    .mob-canvas .accordion-body .nav-link:hover,
    .mob-canvas .accordion-body .nav-link:focus {
        color: #FE4601!important;
    }
    .mob-menus ul li a:hover {
        color: #FE4601!important;
    }
    /* .nav-pills gives the active/focused link a filled pill -- a white slab
       on the dark sheet. Cleared in every state; the orange text is the only
       active cue needed here. */
    .mob-canvas .nav-link,
    .mob-canvas .nav-link:hover,
    .mob-canvas .nav-link:focus,
    .mob-canvas .nav-link:active,
    .mob-canvas .nav-pills .nav-link.active,
    .mob-canvas .nav-pills .show > .nav-link {
        background: transparent!important;
        background-color: transparent!important;
        border-radius: 0;
        box-shadow: none!important;
        outline: none;
    }

    .mob-dropdown .accordion-button:not(.collapsed) {
        color: unset;
        background-color: unset;
        box-shadow: unset;
    }

    .accordion-item {
        border: none;
    }

    .list-unstyled li {
        margin: 10px 0px;
    }

    .mob-canvas .btn-close {
        filter: brightness(0) invert(1);
        padding: 9px;
        transform: scale(.9);
    }
    /* logo.svg is a two-line lockup, so a width alone made it ~90px tall.
       Sized by height instead, to match the navbar mark. */
    .mob-canvas .desk-logo img {
        width: auto;
        height: 34px;
    }

    .faq-section .text-orange {
   
        font-size: 22px;
    }

    .parallax-section .ptb-80 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .nubmer-lists::before {
        content:'';
        position:absolute;
        /* border:1px solid #ddd; */
        height: 300px;
        width: 1px;
        background: white;
        top: -100px;
        left: 50%;
        z-index: 0!important;
    }
    
    ul.nubmer-lists {
        width: 50px;
        position: relative;
    }
}


@media (max-width: 1024px) and (min-width: 768px) {

    .form-container {
        padding: 0px 10px;
    }

    .banner-one-item img {
        top: 118%;
    }

    .accrdion-portfolio-area .accordion-overlay {
        padding: 10px;
        width: 100%;
    }

    .parallax-section {
        height: auto;
        margin-bottom: 50px;
    }

    .parallax-container {
        height: auto;
    }

    .video-play-button .effect::before {
   
        width: 100px;
        height: 100px;
   
    }
    

    .video-play-button .effect::after {
    
        width: 100px;
        height: 100px;
  
    }


    .video-play-button i {
        height: 80px;
        width: 80px;
        line-height: 81px;
    }

    .accrdion-portfolio-area .accordion-overlay span {
     
        font-size: 25px;
       
    }

    .redirect-arrow {
        padding: 8px 20px;
    }
    ul.navbar-nav li {
        margin: 0px 0px 0px 50px;
        padding: 25px 0px;
    }

    .navbar-brand, .nav-link {
        font-size: 13px;
    }
    .navbar {
        padding: 14px!important;
    }

    .form-image {
        border-radius: 18px;
    }
    .solid-reasons-section .why-c-heading {
        font-size: 40px;
    }

    .solid-reasons-section .process-heading {
        font-size: 30px;
    }

    .solid-reasons-section .pl-70 {
        padding-left: 0px;
    }
    

    .col-lg-6.mt-5.mt-lg-0::before {
        left: 6%;
    }

    .core-bx {
        height: 245px;
    }

    .core-bx h2 {
        font-size: 18px;
    }

    .core-bx > p {
        font-size: 13px;
    }

    .seo-hero-content {
        padding-bottom: 0px;
    }

    .seo-hero-content h1 {
        font-size: 40px;
    }

    .about-section1 .image-column .image-1 img {
        height: auto;
    }

    .lets-cta-section .banner-one-item {
        position: relative;
        max-width: 500px;
    }

    .solid_reason-bx .process-btn {
        background-color: #5138EE;
        color: white;
        border-radius: 50px;
        width: 150px;
        letter-spacing: 1px;
        margin-top: 15px;
        font-weight: 400;
        font-size: 14px;
        padding: 4px 13px;
        font-family: 'Manrope';
    }
    .about--bx .text-second {
        font-size: 20px;
    }
    .significance-row{
        flex-wrap: wrap;
    }

    .significance-row > div {
        width: calc(33.33% - 7.5px);
        margin-bottom: 15px;
    }

    .significance-content h1 {
        font-size: 30px;
        margin-bottom: 10px;
    }
    .significance-content p {
        max-width: 600px;
    }

    /* .seo-hero-img {
        height: 191px;
    } */
    /* Your CSS styles here */
    .banner-one-item h2 {
        font-size: 50px;
    }

    .banner-one-item h2 strong {
        float: unset;
    }

    .clients-logo {
        width: 350px;
    }


.our-work-primary .banner-one-item img {
    right: 0;
    top: 70%;
    width: 74px;
}
.blog-area .single-item {
    margin-bottom: 30px !important;
}

.banner-one-item .float-right {
    float: left;
    padding-left: 100px;
}

.social-icons a i {

    margin: 2px 2px;
    font-size: 15px;

}

.footer .pl-100 {
    padding-left: 10px;
    padding-top: 0px;
}

.social-icons {
    display: flex
;
    flex-wrap: wrap;
}
.footer h5 {
    font-size: 14px;
}
.import-list li a {
    color: #CCCCCC;
    font-size: 12px;
    font-weight: normal;
}

.footer .news-para {
    font-size: 12px;
    color: #CCCCCC;
}
footer .before-bg::before {
    display: none;;
}
}


@media(max-width:560px){
    .brand-page .workshow-section, .broken-section {
        padding: 50px 0 50px;
    }
        .vlp-close {
   
        right: 27px!important;
    }
    .sixparts-head {
        margin-bottom: 15px;
    }
        .sixparts-section .sixparts-intro {
        display: block;
        font-family: 'SF Pro Display';
        color: #86868B;
        line-height: 23px;
        font-size: 18.4px;
        font-weight: 500;
        margin: 7px 0 30px;
        max-width: 460px;
    }

        .sixparts-section .sixparts-heading {
        font-weight: 700;
        font-size: 38px;
        line-height: 105%;
    }

    .sixparts-section {
    background: #F5F5F7;
}

    .sixparts-section {
        padding: 50px 0 50px;
    }


    .weknowm-section .weknowm-heading {
           color: #0B0B0F;
           font-weight: 700;
           letter-spacing: 0.14px;
           font-size: 38px;
           line-height: 105%;
           margin: 0 0 15px;
}

        .weknowm-section .weknowm-body {
        color: #86868B;
        /* text-align: justify; */
        line-height: 23px;
        font-size: 18.4px;
        font-weight: 500;
        letter-spacing: 0.23px;
        margin: 0 0 20px;
}

.weknowm-section .weknowm-body--accent {
    color: #FE4601;
    margin-bottom: 0;
    /* font-size: 15px; */
}
    .weknowm-section .weknowm-eyebrow {
    color: #FE4601;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.23px;
    margin: 0 0 10px;
}

    .weknowm-photo {
    height: 311px;
}

.weknowm-section {
    padding: 50px 0 50px;
}
        .hero-stat-badge {
        padding: 8px 25px;
        font-size: 18.4px;
        background: linear-gradient(180deg, #181818 0%, #4A3096 100%);
        backdrop-filter: blur(2.36px);
        border: none;
        border-radius: 14px;
        line-height: 23px;
        margin-top: 30px;
    }

        .hero-strike::after {
        height: 15px;
              left: -2.5%;
        top: 63%;
    }

    .hero-sub {
        font-size: 16.4px;
        text-align: center;
        letter-spacing: 0.23px;
        line-height: 23px;
        margin-bottom: 30px;
    }

    .hero-wheel-desc {
    font-size: 18px;
}

.hero-wheel-bg {
    fill: #0e0920!important;
}

    .hero-wheel-part{
        font-size:20px!important;
    }

    .navbar {
    background-color: #0e0920;
}
.btn-lets-talk::before{
display: none;
}


    .hero-heading {
        font-size: 40px;
        line-height: 40px;
        text-align: center;
    }

.btn-lets-talk.btn-lets-talk--mobile{
            display: inline-flex;
        padding: 7px 13px;
        font-size: 10px;
        /* The inherited 1.8 line-height rounded the caps 1px below the centre
           of the pill. 17px lands the glyphs dead centre; the flex box already
           centres them horizontally. */
        line-height: 17px;
        background: #0e0920;
        border: 1px solid #754CDA;
}

    .web-development-coverflow .swiper-slide {

  width: 350px;
  height: 300px;

}

    .web-development-coverflow .swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

    .seo-hero-img img {
    aspect-ratio: 1 / 1;
    top: -184% /* Hides top 80% of the image */;
}
.seo-hero-img {
    aspect-ratio: 3 / 1.1;
}

    .jobs-hero-section {
    height: 350px;
}


    .employee_card p {
    font-size: 14px !important;
    margin-bottom: 0px;
    padding-bottom: 0;
    height: 131px;
    margin-top: 0px;
}

   .lets-cta-section .choose-us-style-one-thumb a {
    width: 100%;
    display: block;
}

    .card_section .tabs-row > div .card_title {
    font-size: 14px;
    margin:0;
}

.card_section .tabs-row > div {
    border: 1px solid #ddd;
    padding: 0px;
    padding-bottom: 0;
    width: calc(50% - 5px);
}

    .have-questions .social-icons a {

    width: 30px;
    height: 30px;

}

    .iframe-box iframe{
        border-radius: 7px;
        height: 200px;;
    }

    .have-questions form input, .have-questions form textarea,
    .have-questions form .cnt-select {
    min-height: 40px;
    height: 40px;
}

    /* The longest option label runs past the field at phone width, so the
       closed select drops a step and keeps the chevron clear of the text. */
    .have-questions form .cnt-select {
        font-size: 12.5px;
        padding-right: 2.2rem;
    }

    .have-questions .cnt-thanks p {
        font-size: 14px;
    }

    .have-questions .subtitle {
    font-size: 16px;

}

    .contact-hero-content {
    position: relative;
    margin-top: 0px;
}

    .contact-us-heading {
        font-size: 74px;
    }

    .contact-sub {
        font-size: 12px;
            letter-spacing: 3px;
    }

        .our-contact-overlay p {
        font-size: 11px;
    }

     .have-questions button {
    font-size: 14px;
    padding: 5px 30px;
}
.pb-80 {
    padding-bottom: 40px!important;
}
.have-questions h2 {
    font-size: 25px;
    margin-bottom: 15px;
}
.have-questions .right p{
    margin-bottom: 10px;;
}
         .have-questions h1 {
        font-size: 25px;
    }
      .have-questions .form-row {
        flex-direction: column;
        gap: unset;
      }
      .have-questions .form-row > * {
        min-width: 100%;
    }

   #brand-identity .our-work-section .banner-one-item h2 {
        max-width: 280px;
    }

    #brand-identity .our-work-primary .banner-one-item img {
        right: 15px;
        top: 61%;
    }
    .accordion-portfolio-lists li::after {
        opacity: 80%!important;
    }
    .accordion-portfolio-lists li.out::after {
        opacity: 0!important;
    }
    #web-development .core-bx {
        height: 195px;
    }
   #brand-identity .seo-hero-content {
    padding-bottom: 0;
   }
   #product-packaging .seo-hero-content {
    padding-bottom: 0;
   }
    .seo-hero.about-section2.pb-50 {
        padding-bottom: 50px !important;
    }
    .brand-identity-design .mySwiper .swiper-slide img {
        width: 100%;
        height: 200px;
    }

    #prouduction .about-section1 .image-column .inner-column {
    padding-left: 0;
}

    .logo-sliders .mySwiper .swiper-slide img{
        height: auto;
    }
    .logo-sliders .mySwiper .swiper-slide{
        height: 145px;
    }

    #logo-design .about-section2 .seo-hero-content {
        padding-bottom: 25px;
    }
    .footer .logo img{
        width:85px;
    }
    #home .banner-one-item h2 strong{
        text-align: left;
    }

    .accrdion-portfolio-area .accordion-overlay span::after {
       
        width: 30px;
   
    }

    .accordion-portfolio-lists{
        padding:20px 0px!important;
    }

    .form-container {
        padding: 0px 0px;
    }

    .accordion-portfolio-lists li > span {
        left: 10px;
    }

    .redirect-arrow a i {
        font-size: 16px;
    }

    .redirect-arrow a {
        height: 30px;
        width: 30px;
        line-height: 18px;
        border: 1px solid rgba(255, 255, 255, 1);
    }
    .redirect-arrow {
        padding: 4px 10px;
        margin-top: 10px;
        border-radius: 7px;;
    }
    .accordion-portfolio-lists li > span {
        font-size: 30px;
    }
    .accordion-portfolio-lists li {
        height: 50px;
        padding: 35px;
    }

    .accordion-portfolio-lists li h3 {
        padding: 4px;
        right: 5px;
        font-size: 16px;
    }
    .container {
        max-width: 100%;
    }

    .weknowm-photo-frame {
    margin-bottom: 30px;
}
    
    footer .before-bg::before {
        display: none;;
    }
    header {
        padding: 15px 0px;
    }

    .significance-content p {
        margin-top: 10px;
    }

    .faq-section .mt-5{
        margin-top: 0!important
        ;
    }

    .lets-cta-section .banner-one-item {
        max-width: 300px;
        margin: auto;
    }

    .lets-cta-section .banner-one-item h2 strong {
        padding-left: 0px;
    }

    .lets-cta-section .banner-one-item h4 {
        margin-bottom: 0;
        font-size: 14px;
    }

    .blog-area .item .info {
        padding: 20px!important;
    }

    .check-img-bx img {
        width: 15px;
    }

    .reasons-bxx p {
        font-size: 13px;
        margin-bottom: 0;
        line-height: 1.3;
        padding-top: 5px;
    }
    .reasons-bxx h3 {
        font-size: 18px;
        margin-bottom: 0px;
    }

    .solid-reasons-section .why-c-heading {
        font-size: 25px;
    }
    .solid-reasons-section .process-heading {
        padding-top: 50px;
        font-size: 18px;
    }

    .solid_reason-bx .row > div{
        margin-bottom: 0!important;
    }
    .solid-reasons-section .pl-70{
        padding-left: 20px;
    }

    .about--bx .text-first {
        font-size: 13px;
    }

    
.solid_reason-bx .process-btn {
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    padding: 3px 20px;
}

    .about--bx {
        padding: 16px;
        border-radius: 8px;
        height: auto;
        display: flex
    ;
        align-items: center;
        justify-content: center;
    }

    .super-img{
        /* margin-top: 0; */
    }
    .super-img img{
        width: 100%;
        height: 250px;
        object-fit: cover;
    }
    .about--bx .text-second {
        font-size: 25px;
    }

 
    .core-bx h2 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .core-content p {
        font-size: 13px;
        padding-top: 15px;
    }

    .core-content h1 {
        font-size: 25px;
    }

    .seo-hero.about-section1 {
        padding-bottom: 50px;
    }
    .about-section1 .image-column .image-2 {
        right: unset;
        top: 50%;
        left: auto;
        transform: translate(-50%, -50%);
        height: auto;
        width: 100px;
    }

    .about-section1 .image-column .image-1 img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .about-section1 .image-column .inner-column {
        padding-right: 0px;
        padding-left: 51px;
    }

    .seo-hero-content p {
        max-width: 100%;
        font-size: 13px;
        font-weight: 300;
        margin: 15px auto;
    }
    .seo-hero-content h1 {
        font-size: 25px;
    }

    /* .seo-hero-img {
        height: 150px;
    } */
    /* .seo-hero-img img {
        top: -50%;
    } */

    #smm .accrdion-portfolio-area .banner-one-item h4 {
        border: 1px solid #FE4601!important;
        color: #FE4601!important;
    }

    .text-end.mt-5 {
        margin-top: 15px !important;
    }
    .ptb-100 {
        padding-top: 50px!important;
        padding-bottom: 50px!important;
    }
    .blog-area .site-heading {
        margin-bottom: 25px;
    }
    .blog-area h2 {
        font-size: 38px!important;
    }

    .ptb-80 {
        padding-top: 25px!important;
        padding-bottom: 25px!important;
    }
    .main-class .form-content {
        padding: 0;

        padding-left: 15px;
    }
    .main-class .bg-linear {
        border-radius: 18px;
    }


    .scroller__inner{
        padding:0;
    }
      .company-design-area h2 {
        margin-bottom: 60px;
        font-size: 12px;
        line-height: 11px;
        text-align: center;
        letter-spacing: 8px;
    }

    section.partnering-section {
    padding-bottom: 50px;
    padding-top: 50px;
}

    .strap-section {
        height: 40px !important;
     
     
    }

    .strap-section .text-container {
        font-size: 18px;
    }

    .strap-section .dot {
        font-size: 40px;
        }
    .mt-100 {
        margin-top: 50px!important;
    }

   .our-work-mobile .scroller__inner img {
        margin-right: 8px;
        height: 160px;
        width: 100%;
        object-fit: cover;
    }
    .our-work-mobile .scroller__inner{
        padding:0;
    }

    .accordion-portfolio-area .choose-us-style-one-thumb {
        margin-bottom: 0px!important;
    }

    .navbar-brand>img {
        max-height: 40px!important;
    }
    .banner-one-item h4 {
    
        font-size: 16px;
    }

    .banner-one-item h2 {
        font-size:35px;
        text-align: left;
    }
    .banner-one-item h2 strong{
        padding-left:0px;
    }

    .pt-50 {
        padding-top: 25px!important;
    }
    .video-play-button i {
        height: 50px;
        width: 50px;
        font-size: 22px !important;
        display: flex
;
        align-items: center;
        justify-content: center;
    }
    .video-play-button .effect {
        width: 50px;
        height: 50px;
     
      
    }

    .video-play-button .effect::before {
   
        width: 50px;
        height: 50px;
        left: 55%;
    top: 55%;
     
    }

    .video-play-button .effect::after {
        width: 50px;
        height: 50px;
        left: 55%;
    top: 55%;

    }

    .choose-us-style-one-thumb .video-play-button {
        right: 37px !important;
        bottom: 0 !important;
    }
    .bg-dark .banner-one-item h2 strong {
        -webkit-text-stroke: .4px var(--white);
    }

    .accrdion-portfolio-area .accordion-overlay > a {
        height: 50px;
        width: 50px;
        line-height: 2;
     
        font-size: 25px;
    }
    .accrdion-portfolio-area .accordion-overlay span{



        font-size: 25px;
        font-weight: normal;
        background: none;
        padding: 4px 0px 0px 35px;
    }
    .accordion-portfolio-lists li {
        padding:20px;
    }
    .accrdion-portfolio-area .out .accordion-overlay h2 {
        font-size: 13px;
    }

    .our-work-section .banner-one-item h2{
        text-align: left;
    }
    .banner-one-item img {
        right: 64%;
        top: 101%;
        width: 22px;
    }

    .why-us-items-section ol {
        flex-wrap: wrap;
    }

    .why-us-items-section ol li {
        width:100%;
        margin-bottom: 15px!important;
        margin:0;

    }

    .first-content .why-numbers {
        font-size: 65px;
        line-height: 0;
    }

    .first-content h3 {
        font-size: 14px;
        padding-left: 8px;
 
 
    }

    .right-para {
        max-width: 100%;
        width: 100%;
    }

    .why-us-items.active, .why-us-items:hover {
        width: 100%;
    }

    p.fris-para {
        padding-top: 5px;
        font-size: 11px;
        color: white;
        text-align: justify;
        line-height: 1.5;
        font-weight: normal;
    }
   .why-us-item-bx {
        height: 75px;
        width:60%;
    }

    .why-us-content-bx {
        width: 40%;
    }

    .cteative-service-item {
        padding: 10px;
    }

    .brands-link {
        font-size: 13px;
        top: 72%;
    }
    .our-work-section .default-padding{
        padding-top:0;
    }

    .pt-80 {
        padding-top: 50px;
    }

    .testimonials .text-4xl{
        font-size: 25px;;
    }

    .why-us-section  .text-4xl{
        font-size: 25px;
    }


    .bg-linear1 .text-4xl{
        font-size: 25px;
    }

    .btn-submit {
        margin: 20px auto;
        margin-bottom: 0;;
        height: 40px;
        font-size: 14px;
        width: 100%;
        text-align: center;
        width: 100%;
        padding: 0;
    }

    .form-content {
        padding-left: 0px;
        padding: 0;
    }

    .form-content h1 {
        font-size: 25px;
    }

    .pt-80 {
        padding-top: 50px;
    }

    .scroller__inner {
    
        gap: 1rem;
    }
    .scroller__inner img {
        margin-right: 8px;
        height: 22px;
    }

    .testimonials  .ptb-80 {
        padding-top: 0;;
    }
    .pt-80 {
        padding-top: 50px!important;
    }

    .lets-cta-section .up-arrow {
   
        height: 50px;
        padding: 8px;
        width: 50px;
        right: -4%;
        bottom: 49px;
    }
    .pb-100 {
        padding-bottom: 50px!important;
    }

     

    #smm .our-work-section .banner-one-item h2 {
        max-width: 275px;
    }
    #smm .our-work-primary .banner-one-item img {
        right: 15px;
        top: 63%;
        width: 50px;
    }
    .lets-cta-section{
        padding-bottom: 50px!important;
    }

    .footer .pl-100 {
        padding-left: 10px;
        padding-top: 50px;
    }

    .testimonial-card .review-main-img {
        width: 125px;
        height: 185px;
    }
    .testimonial-card p {
        color: white !important;
        font-size: 10px;
        margin: 0;
        line-height: 1.4;
    }
    .testimonial-card img {
        width: 65px;
    }

    .testimonial-card .review-right-bx {
        width: 70%;
        /* padding-left: 28px; */
    }

    .testimonial-card .company {
        font-weight: bold;
        font-size: 12px;
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    .form-container .form-control {
        font-size: 13px;
        height: 40px;
        min-height: 40px;
    }

    .blog-hero-section {
        background-image: url(../img/blog/hero.webp);
        height: 308px;
        background-size: cover;
        background-position: center;
    }
    .bg-dark .blog-area .post-title a {
        font-size: 20px;
    }
    .blog-area blockquote {
        font-size: 17px;
        padding: 41px 20px;
    }

    .accordion-portfolio-lists blockquote::after {
        bottom: -25px;
        font-size: 50px;
    }

    .comments-area .comments-title h3 {
        font-size: 18px;
    }

    .career-hero-section {
        background-image: url(../img/careers/hero.webp);
        height: 350px;
    }

    .blog-area .meta li a {
        font-size: 14px;
        color: #E7E7E7;
    }
    .blog-area .meta li {
        font-size: 14px;
        color: #E7E7E7;
    }

    .blog-area blockquote {
        font-size: 16px!important;
        padding: 20px 20px!important;

}

.blog-area blockquote::after {

    font-size: 45px;

}

.journey-seciton .banner-one-item h2 {
    font-size: 30px;
}

.container.card_section .card img {
    height: auto;
}


.v-heading {
    font-size: 25px;
}

.working-bx-3 > div h2 {
    font-size: 14px;
    color: white;
    margin-bottom: 0;
}
.working-bx-3 > div {
    height: 100px;
    padding: 10px;
}
.career-form-wrap h4{
    font-size: 15px;
}
.applying-form input {
    min-height: 40px;
    font-size: 13px;
}
.applying-form h2 {
    font-size: 25px !important;
}

.applying-form.wpcf7 {
    padding: 20px 20px;
}
#cv {
    line-height: 2.1;
}
.employee_section h2 {
    font-size: 25px !important;
}
.job_description ul li {
    font-size: 14px;
}
.card_title {
    font-size: 22px;
}
.job-tab-section ul#pills-tab li {
    width: 50%;
}

.job-tab-section .nav .active {
    font-size: 24px;
    margin-right: 0px;
}

.job-tab-section .nav button {
    font-size: 24px;
    line-height: 1.3;
    margin-right: 0;
}

.job-tab-section .nav {

    padding: 15px;
}

.position-main-bx .content {
    padding: 10px;
}

.position-main-bx .position-img {
    width: 100%;
}

.job-tab-section .content h2 {
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 7px !important;
}
.job-tab-section .job-description-list li {
    font-size: 14px;
}
.job-tab-section .learn-more span {
    font-size: 14px;
    color: white;
}

.job-tab-section .job-description-list {
    margin-bottom: 0 !important;
}

.learn-more img {
    width: 11px;
}

.view-more {
    padding: 6px 10px;
    font-size: 13px;
}

.position-main-bx .content {
    width: 100%;
    padding: 30px;
}

.flex-column1{
    flex-flow: column-reverse !important;
}


.our-work-heading {
    font-size: 105px;
    padding: 50px 0px;

}

.our-work-sub {
    font-size: 12px;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;



}

.image-text {

    font-size: 18px;
}


section.work-area .py-5 {
    padding-top: 0 !important;
}
.quote-bx {
    height: 35px;
    width: 35px;
    padding: 10px;
    top:57%;
}

#smm .bg-dark .banner-one-item h4 {
    border: 1px solid #FE4601;
    color: #FE4601;
}

.smm-hero-section img {
    height: auto;
}
.pt-100 {
    padding-top: 50px!important;
}

.form-content p {
    font-size: 16px;
}

.testimonials .pt-80 {
    padding-top: 50px !important;
}
.main-class .testimonial-card p {
    font-size: 10px;
}
.pb-50 {
    padding-bottom: 25px!important;
}

.faq-section .display-4 {
    font-size: 25px !important;
}
.faq-section .accordion-button {
    font-size: 16px;
    padding-left: 0;
    font-weight: 500;
}
.faq-section .accordion-body {
    font-size: 13px;
}
.faq-section .fs-24 {
    font-size: 16px;
}

.blog-area h2 {
    font-size: 25px;
}
.site-heading p {
   padding: 0;
        font-size: 18.5px;
        margin-top: 0;
        font-weight: 500;
}
.blog-area h2 {
    font-size: 25px;
    margin-bottom: 0;
}

.site-heading .devider {

    top: -20px;
}
.blog-area .item .info .meta {
    margin-bottom: 5px;
}
.blog-area .item .info h4 {
    font-size: 18px;
    margin-bottom: 5px;
}
.blog-area .item .info p:last-child {
    font-size: 14px;
    margin-bottom: 0;
}
.blog-area .item .info {
    padding: 30px 15px;
}
.blog-area .item .date span {
    display: block;
    font-size: 13px;
    background: #FE4601;
    color: white;
    padding: 0 14px;
    border-radius: 0 0 8px 8px;
    min-width: 50px;
}



.blog-area .item .date {
    display: inline-block;
    background: white;
    /* padding: 5px 25px; */
    color: #202942;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 900;
    /* margin-bottom: 15px; */
    right:11px; 
    text-align: center;
    box-shadow: 0 0 10px #cccccc;
}

.blog-area .item{
    margin-bottom: 15px!important;
}
.container.footer .row > div {
    width: 50%;
    padding-top: 0;
}

.social-icons a i {
    margin: 0px 2px;
    font-size: 13px;
    height: 25px;
    width: 25px;
}

ul.import-list li {
    margin: 5px 0px;
}

.footer h5 {
    font-size: 20px;
    margin-bottom: 12px;
    margin-top: 10px;
}

.news-emailbx input {
    font-size: 13px;
    min-height: 40px;
}

.news-emailbx button {
    height: 30px;
    width: 30px;
  
}

.import-list li a {
    font-size: 13px;
}
.footer .news-para {
    font-size: 13px;
}

.process-section .process-heading {
    font-size: 25px;
}

.max-500 {
    max-width: 500px;
    margin-top: 0 !important;
}

.max-500 p {
    font-size: 13px;
    text-align: justify;
}

.process-btn {
    width: auto;
    font-size: 14px;
    padding: 8px 30px;
    margin-top: 0 !important;
}

.nubmer-lists li {
    font-size: 25px;
    height: 50px;
    width: 50px;
}

.col-lg-6.mt-5.mt-lg-0::before {
    left: 9%;
    width: unset;
}

.step-box h2 {
    font-size: 16px;
}
.process-section .step-box p {
    font-size: 12px;
    font-weight: 300;
    line-height: 17px;
}

.step-box{
    padding:7px;
}

.step-box .width-20 {
    width: 17%;
    margin-right: 10px;
}

.significance-content h1 {
    font-size: 25px;
    margin-bottom: 0;
}

.significance-content p {
    font-size: 13px;
}

.significance-row > div {
    width: calc(50% - 7.5px);
    padding: 10px;
    margin-bottom: 15px;
}

.significance-row {
    flex-wrap: wrap;
}

.significance-row > div h2 {
    font-size: 16px;
    margin-bottom: 5px;
}

.significance-row > div p {
    font-size: 13px;
    line-height: 1.5;
}

      .job_description {
        padding: 0;
      }

      .job_description .date {
    font-size: 18px;
}
     .job_description h1 {
        font-size: 25px;
    }
          .job_description h2 {
        font-size: 18px;
    }
     .job_description .info-text {
        font-size: 14px;
    }
      .job_description p,
      .job_description ul {
        font-size: 14px;
      }
}



@media(max-width:540px){
        .builditfor-section {
        padding: 50px 0 50px;
    }

        .howruns-card {
        min-height: 585px;
    }

    .sixparts-section .sixparts-title {
    font-size: 20.2px;
    line-height: 25px;
}

.sixparts-section .sixparts-desc {
    font-size: 15px;
    line-height: 13.9px;
}

        .broken-media {
        height: 315px;
    }

    .workshow-head, .broken-head {
        margin-bottom: 25px;
    }

    .broken-intro {
        text-align: left;
        line-height: 23px;
        flex-basis: auto;
        font-weight: 500;
        font-size: 18.4px;
        color: #B8B8B8 !important;
    }
.broken-section {
        padding-top:0px;
    }
        .workshow-media {
        border-radius: 20px;
    }

        .workshow-section .workshow-heading, .broken-section .broken-heading {
             font-size: 38px;
             line-height: 105%;
    }

    #prouduction .core-bx {
    height: 172px;
}

    .col-lg-6.mt-5.mt-lg-0::before {
        left: 10.3%;
    }
    .main-class .form-content {
        padding-left: 0px;
    }

    .core-bx > p {
        font-size: 13px;
        line-height: 1.6;
    }
    .testimonial-card .review-main-img {
        width: 112px;
    }

    .core-bx {
        height: 237px;
    }

    .our-work-primary .banner-one-item img {
        right: 33px;
        top: 41%;
        width: 50px;
    }

    .seo-core-task .core-bx {
        height: 244px;
    }

        .howruns-section .howruns-heading {
        font-size: 38px;
        line-height: 105%;
    }

        .howruns-section .howruns-intro {
        text-align: left;
        font-weight: 500;
        line-height: 23px;
        flex-basis: auto;
        font-size: 18.4px;
        color: #86868B !important;
    }
.builditfor-section .builditfor-desc {
        text-align: left;
        line-height: 23px;
        flex-basis: auto;
        font-size: 18.4px;
        font-weight: 500;
        color: #86868B !important;
    }
    .soosocial-section {
        padding: 50px 0px;
        /* padding-top: 20px !important; */
    }

    .brand-page   .soosocial-section {
        padding: 50px 0px!important;
    }

    .brand-page .soosocial-head {
        margin-bottom: 25px;
    }
    .builditfor-grid {
        gap: 40px;
    }
    .howruns-head {
       
        margin-bottom: 40px;
    }

    .blog-lists-section {
    padding-bottom: 50px;
}

        .builditfor-section .builditfor-heading {
        margin-bottom: 15px;
        font-size: 38px;
        line-height: 105%;
    }

        .soosocial-section .soosocial-heading {
        font-size: 38px;
        line-height: 105%;
    }

    .soosocial-section .soosocial-intro {
        margin: 0;
        text-align: left;
        font-weight: 500;
        line-height: 23px;
        flex-basis: auto;
        font-size: 18.4px;
        color: #86868B !important;
    }

        .soosocial-head {
        margin-bottom: 40px;
    }

    .faq-section.faq-section--light {
        padding: 50px 0 50px;
    }

    .faq-section.faq-section--light .text-orange {
        color: #FE4601;
        font-size: 20px;
        font-weight: 700;
        line-height: 25px;
        letter-spacing: 0.23px;
    }

          .faq-section.faq-section--light .display-4 {
        font-size: 38px !important;
        line-height: 105%;
        margin-bottom: 30px !important;
    }

        .faq-section.faq-section--light .accordion-button {
        font-size: 18px;
        padding: 15px 36px 15px 0;
    }

        .faq-section.faq-section--light .accordion-body {
        font-size: 15px;
        padding-right: 0;
    }

        .footer-para {
        font-size: 30px;
        font-weight: 700;
        line-height: 38.25px;
        margin-top: 0px;
        margin-bottom: 12px;
    }
        .footer .logo img {
        width: 65px;
    }

    footer {
    border-radius: 0;
    padding-bottom: 50px;
    background-color: #0E0920;
}
.footer-2nd {
    background-color: #0e0920;
}

.bg-linear {
    width: 95%;
    border-radius: 15px;
}
.form-image{
    display: none!important;
}

    .parallax-section .ptb-80 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

@media(max-width:420px){
.choose-us-style-one-thumb .video-play-button {
    right: 26px !important;
    bottom: -16px !important;
}
#web-development .core-bx {
    height:210px;
}
}
@media(max-width:375px){
        .seo-hero-content h1 {
        font-size: 23px;
    }

    .contact-us-heading {
        font-size: 66px;
    }

    
    .testimonial-card .review-main-img {
        width: 112px;
    }
    .seo-core-task .core-bx {
        height: 250px;
    }
    .banner-one-item h2 {
        font-size: 30px;
    }


}

/* ==========================================================================
   Brand page hero (/brand) -- base rules are at the end of custome.css.
   Plain max-width blocks rather than the banded 1240/1024 query above, so the
   steps stack downwards the way the rest of the hero expects.
   ========================================================================== */
@media (max-width: 1240px) {
    .brand-hero .bh-title {
        font-size: 96px;
    }
    .brand-hero .bh-quote blockquote {
        font-size: 32px;
    }
    .brand-hero .bh-stat {
        padding: 0 26px;
    }
    .brand-hero .bh-figure {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (max-width: 1023px) {
    .brand-hero {
        padding: 64px 0 72px;
    }
    .brand-hero .bh-title {
        font-size: 68px;
    }
    .brand-hero .bh-quote {
        margin-top: 24px;
    }
    .brand-hero .bh-rule {
        margin-top: 22px;
    }
    .brand-hero .bh-note + .bh-rule {
        margin-top: 36px;
    }
    .brand-hero .bh-quote blockquote {
        font-size: 26px;
    }
    .brand-hero .bh-figure {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (max-width: 560px) {

    figcaption.bh-attrib-mobile {
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    text-transform: uppercase;
    color: white;
}

        .brand-hero .bh-note {
    font-size: 18px;
    line-height: 23px;
    color: #D0BDFF;
    }

    .brand-hero .bh-rule{
        display: none;
    }
    
    .brand-hero {
        padding: 48px 0 56px;
    }
    .brand-hero .bh-title {
   font-size: 56px;
        line-height: 95%;
    }
    .brand-hero .bh-quote blockquote {
      font-size: 26px;
        line-height: 32px;
        font-weight: 500;
    }
    /* The three stats stay side by side on mobile, exactly as in the design,
       so the dividers stay vertical here too -- they are only shorter. Stretch
       rather than centre, so all three columns share one height and the two
       hairlines match instead of each ending wherever its own label runs out. */
    .brand-hero .bh-stats {
        display: flex;
        align-items: stretch;
    }
    .brand-hero .bh-stat {
       padding: 10px 5px;
    }
    /* Same gradient stroke as the desktop divider, sized to the column: it
       runs the full height of the row and fades out at both ends. */
    .brand-hero .bh-stat + .bh-stat::before {
        top: 0;
        left: 0;
        transform: none;
        width: 1px;
        max-width: none;
        height: 100%;
        background: linear-gradient(
            180deg,
            #0E0920 0%,
            #FE4601 35%,
            #FE4601 70%,
            #0E0920 100%
        );
    }
    .brand-hero .bh-figure {
   font-size: 32px;
        line-height: 130%;
    }

    .brand-hero .bh-label {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 300;
    line-height: 130%;
}
}


/* ==========================================================================
   Brand page -- "Why it matters". Base rules are at the end of custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .brand-why .bw-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .brand-why .bw-cards {
        gap: 20px;
    }
    .brand-why .bw-card {
        padding: 24px 20px 0;
        min-height: 400px;
    }
    .brand-why .bw-card-art {
        margin-left: -20px;
        margin-right: -20px;
    }
}

@media (max-width: 1023px) {
    .brand-why {
        padding: 64px 0 72px;
    }
    .brand-why .bw-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 38px;
    }
    /* Three across leaves the paragraphs two or three words wide here, so the
       row drops to two columns and the last card spans both. */
    .brand-why .bw-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .brand-why .bw-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .brand-why {
        padding: 50px 0 50px;
    }
    .brand-why .bw-eyebrow {
        font-size: 20px;
    }
    .brand-why .bw-heading {
    font-size: 25px;
        line-height: 108%;
    }
    /* On a phone the three cards stop being a grid and become the same
       swipeable rail the homepage runs (6 Parts / Which Part Is Broken):
       scroll-snap, arrows underneath, and the next card peeking in at the
       right edge so it is obvious there is more. The rail breaks out of
       .container to the full viewport width the same way .sixparts-track-wrap
       does, so a scrolled card runs out to the screen edge instead of being
       clipped at the gutter. */
    .brand-why .bw-cards {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .brand-why .bw-cards::-webkit-scrollbar {
        display: none;
    }
    .brand-why .bw-card:last-child {
        grid-column: auto;
    }
    .brand-why .bw-card {
        flex: 0 0 268px;
        max-width: 268px;
        min-height: 360px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    /* Right-aligned under the rail, exactly where the homepage puts them. */
    .brand-why .bw-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
}


/* ==========================================================================
   Brand page -- "Brands We Have Built". Base rules are at the end of
   custome.css. Only the type and the row heights step down; the animation is
   width-independent because it travels in percentages of its own track.
   ========================================================================== */
@media (max-width: 1240px) {
    .brand-marquee .bm-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .brand-marquee .bm-row-media .bm-item {
        height: 250px;
    }
}

@media (max-width: 1023px) {
    .brand-marquee {
        padding: 64px 0 72px;
    }
    .brand-marquee .bm-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 32px;
    }
    .brand-marquee .bm-row-media .bm-item {
        height: 200px;
    }
    .brand-marquee .bm-row-logos .bm-item {
        height: 100px;
    }
    .brand-marquee .bm-logo {
        width: 160px;
        padding: 0 20px;
    }
}

@media (max-width: 560px) {

        .brand-marquee .bm-heading {
        margin-bottom: 25px;
    }
    .brand-marquee {
        padding: 50px 0 50px;
    }
    .brand-marquee .bm-eyebrow {
        font-size: 20px;
    }
    .brand-marquee .bm-heading {
               font-size: 38px;
        line-height: 105%;
    }
    .brand-marquee .bm-rows {
        gap: 12px;
    }
    .brand-marquee .bm-item {
        margin-right: 12px;
    }
    .brand-marquee .bm-row-media .bm-item {
        height: 150px;
    }
    .brand-marquee .bm-row-logos .bm-item {
        height: 78px;
    }
    .brand-marquee .bm-logo {
        width: 128px;
        padding: 0 16px;
        border-radius: 10px;
    }
    .brand-marquee .bm-logo img {
        max-height: 32px;
    }
    .brand-marquee .bm-row-media .bm-item img {
        border-radius: 10px;
    }
}


/* ==========================================================================
   "What We Build It For" -- cube variant. Base rules at the end of
   custome.css. The cube keeps its 3/4 face at every width; only the box it
   is measured from shrinks.
   ========================================================================== */
@media (max-width: 1240px) {
    .bifc-section .bifc-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .bifc-section .bifc-desc {
        font-size: 20px;
        line-height: 26px;
    }
    /* The radius follows the card width, so shrinking the card tightens the
       whole circle with it. */
    .bifc-scene {
        --bifc-cw: 215px;
        --bifc-ch: 297px;
    }
}

@media (max-width: 1023px) {
    .bifc-section {
        padding: 64px 0 72px;
    }
    /* Side by side leaves the cube too small to read at this width, so the
       copy sits above it and the cube gets the full column. */
    .bifc-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .bifc-copy,
    .bifc-stage {
        flex: 0 0 auto;
        max-width: 100%;
        padding-right: 0;
    }
    .bifc-copy {
        margin-bottom: 40px;
    }
    .bifc-scene {
        --bifc-cw: 250px;
        --bifc-ch: 345px;
    }
    .bifc-section .bifc-heading {
        font-size: 34px;
        line-height: 40px;
    }
    .bifc-section .bifc-desc {
        max-width: none;
    }
    /* Centred under the stacked copy, same as the cube. */
    .bifc-section .bifc-hint {
        margin-top: 22px;
    }
}

@media (max-width: 560px) {
    .bifc-section {
        padding: 48px 0 56px;
    }
    .bifc-section .bifc-heading {
        font-size: 27px;
        line-height: 33px;
    }
    .bifc-section .bifc-desc {
        font-size: 17px;
        line-height: 24px;
    }
    .bifc-stage {
        padding-top: 8px;
    }
    /* Narrow enough that the two neighbouring cards still read at the edges
       of a phone instead of being cut in half by the viewport. */
    .bifc-scene {
        --bifc-cw: 190px;
        --bifc-ch: 262px;
        /* Tighter circle than the desktop 1.55: at phone width the neighbours
           would otherwise sit half off the screen. Pulled in they tuck behind
           the front card instead, which reads more like a circle, not less. */
        --bifc-r: calc(var(--bifc-cw) * 1.4);
    }
    .bifc-dots {
        margin-top: 34px;
    }
    .bifc-layer-title {
        font-size: 19px;
        line-height: 24px;
    }
    .bifc-section .bifc-layer-desc {
        font-size: 13px;
        line-height: 18px;
    }
    .bifc-layer {
        padding: 14px 15px 15px;
    }
}

/* ==========================================================================
   Brand page -- first marquee row. Base rules at the end of custome.css.
   Only the two variables move: the row height, and the stacked column's
   width, which is recomputed from that height against the halves' 324x353
   ratio so the column stays the same shape as it shrinks.
   ========================================================================== */
@media (max-width: 1240px) {
    .brand-marquee .bm-row-work {
        --bm-work-h: 380px;
        --bm-work-w: 170px;
    }
}

@media (max-width: 1023px) {
    .brand-marquee .bm-row-work {
        --bm-work-h: 300px;
        --bm-work-w: 134px;
        --bm-work-gap: 8px;
    }
}

@media (max-width: 560px) {
    .brand-marquee .bm-row-work {
        --bm-work-h: 220px;
        --bm-work-w: 97px;
        --bm-work-gap: 8px;
    }
    .brand-marquee .bm-row-work .bm-tall,
    .brand-marquee .bm-row-work .bm-stack img {
        border-radius: 10px;
    }
}

/* ==========================================================================
   Brand page -- third marquee row. Base rules at the end of custome.css.
   Width and height step down together so the tiles keep their 210:189 shape.
   ========================================================================== */
@media (max-width: 1023px) {
    .brand-marquee .bm-row-brands {
        --bm-brand-w: 170px;
        --bm-brand-h: 153px;
    }
}

@media (max-width: 560px) {
    .brand-marquee .bm-row-brands {
        --bm-brand-w: 130px;
        --bm-brand-h: 117px;
    }
    .brand-marquee .bm-row-brands .bm-brand {
        border-radius: 14px;
    }
}

/* ==========================================================================
   Brand page -- "Two Halves. Fourteen Decisions." Base rules at the end of
   custome.css.

   Below 767px the accordion turns vertical. Seven spines plus an open panel
   cannot share a phone's width -- the open one would be left about 90px, far
   too narrow for its copy -- so the row becomes a column. The mechanism is
   unchanged: flex-direction is the only thing that flips, and flex-grow then
   distributes height instead of width. The label simply stops being rotated.
   ========================================================================== */
/* Two columns below a ~1600px container leave the open panel about 170px --
   narrower than its own copy. The spines and the type come down together so
   the panel that is open always has room to be read, rather than the row
   staying full size and the text being clipped by the panel's overflow. */
@media (max-width: 1599px) {
    .bsee-section {
        --bsee-spine: 46px;
        --bsee-gap: 6px;
    }
    .bsee-section .bsee-panel {
        min-width: var(--bsee-spine);
    }
    .bsee-section .bsee-label {
        font-size: 16px;
    }
    .bsee-section .bsee-text {
        padding: 0 16px 16px;
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 1240px) {
    .bsee-section .bsee-heading {
        font-size: 44px;
        line-height: 50px;
    }
}

@media (max-width: 1023px) {
    .bsee-section {
        padding: 64px 0 72px;
    }
    .bsee-section .bsee-eyebrow {
        font-size: 20px;
        line-height: 24px;
    }
    .bsee-section .bsee-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 32px;
    }
}

/* Two columns stop working before the container does: at 1280 the open panel
   is down to about 158px, and by 1024 it would be 67px -- narrower than the
   closed spines beside it. One column from here down, so the open panel always
   has the full container to grow into. */
@media (max-width: 1385px) {
    .bsee-section {
        --bsee-spine: 54px;
        --bsee-gap: 8px;
    }
    .bsee-section .bsee-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .bsee-section .bsee-label {
        font-size: 18px;
    }
    .bsee-section .bsee-text {
        padding: 0 20px 20px;
        font-size: 18px;
        line-height: 25px;
    }
}

@media (max-width: 767px) {
    .bsee-section {
        --bsee-h: 470px;
        --bsee-spine: 48px;
        --bsee-gap: 6px;
        --bsee-pad: 0px;
    }
    .bsee-section .bsee-panels {
        flex-direction: column;
    }
    /* Level, full width, and no longer cropped to a spine. */
    .bsee-section .bsee-face {
        width: 100%;
        transform: none;
    }
    .bsee-section .bsee-panel.is-open .bsee-face {
        transform: none;
    }
    .bsee-section .bsee-icon {
        transform: none;
    }
    .bsee-section .bsee-text {
        min-width: 0;
    }
}

@media (max-width: 560px) {

    .bsee-section .bsee-col-title {
    margin: 15px 0 24px;
    font-size: 27px;
    color: #FE4601;
    text-align: left;
}

    .bsee-section .bsee-eyebrow {
        font-size: 20px;
        text-align: left;
    }
    .bsee-section {
        padding: 50px 0 50px;
    }
    .bsee-section .bsee-eyebrow {
        font-size: 20px;
    }
    .bsee-section .bsee-heading {
               font-size: 37px;
               
        margin-bottom: 25px;

        line-height: 105%;
        text-align: left;
    }
    .bsee-section .bsee-col {
        padding: 16px;
        border-radius: 20px;
    }
    .bsee-section .bsee-text {
        padding: 0 16px 16px;
        font-size: 15px;
        line-height: 21px;
    }
}

/* ==========================================================================
   Brand page -- dark quote band. Base rules at the end of custome.css.
   Size, leading and tracking step together: the leading keeps the design's
   1.382 ratio and the tracking stays at -3% of whatever the size now is.
   ========================================================================== */
@media (max-width: 1240px) {
    .bquote-band .bquote-text {
        font-size: 40px;
        line-height: 55px;
        letter-spacing: -1.2px;
    }
}

@media (max-width: 1023px) {
    .bquote-band {
        padding: 72px 0;
    }
    .bquote-band .bquote-text {
        font-size: 32px;
        line-height: 44px;
        letter-spacing: -0.96px;
    }
}

@media (max-width: 560px) {
    .bquote-band {
        padding: 50px 0;
    }
        .bquote-band .bquote-text {
        font-size: 34px;
        line-height: 116%;
        letter-spacing: -0.66px;
    }
    /* Below here the authored breaks would leave very short lines, so the
       text is allowed to find its own. */
    .bquote-band .bquote-text br {
        display: none;
    }
}

/* ==========================================================================
   Search page hero (/search) -- base rules are at the end of custome.css.
   Steps mirror the brand hero's, so the pair shrinks together.
   ========================================================================== */
@media (max-width: 1240px) {
    .search-hero .sh-title {
        font-size: 96px;
    }
    .search-hero .sh-line {
        font-size: 32px;
    }
    .search-hero .sh-dead {
        font-size: 40px;
        line-height: 24px;
        letter-spacing: -1.05px;
    }
    .search-hero .sh-dead span::after {
        height: 13px;
    }
    .search-hero .sh-stat {
        padding: 0 26px;
    }
    .search-hero .sh-figure {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (max-width: 1023px) {
    .search-hero {
        padding: 64px 0 72px;
    }
    .search-hero .sh-title {
        font-size: 68px;
    }
    .search-hero .sh-query {
        margin-top: 26px;
        min-height: 58px;
        padding: 10px 20px 10px 24px;
    }
    .search-hero .sh-dead {
        margin-top: 44px;
        font-size: 34px;
        line-height: 22px;
        letter-spacing: -0.89px;
    }
    .search-hero .sh-dead span::after {
        height: 11px;
    }
    .search-hero .sh-line {
        font-size: 26px;
    }
    .search-hero .sh-stats {
        margin-top: 56px;
    }
    .search-hero .sh-figure {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (max-width: 560px) {
    .search-hero {
        padding: 48px 0 56px;
    }
    .search-hero .sh-title {
        font-size: 56px;
        line-height: 95%;
    }
    /* The query is a long single sentence; at this width it has to wrap, so the
       pill stops being a capsule and becomes a rounded box that grows with it. */
       .search-hero .sh-query {
        align-items: center;
        gap: 12px;
        min-height: 0;
        padding: 15px 22px;
        border-radius: 50px;
    }
    .search-hero .sh-query-text {
        font-size: 14px;
        line-height: 20px;
    }
    .search-hero .sh-query-icon {
        font-size: 26px;
        line-height: 20px;
    }
      .search-hero .sh-dead {
                margin-top: 40px;
        font-size: 34px;
        line-height: 38px;
        letter-spacing: -0.68px;
    }
.search-hero .sh-label {
    font-size: 15px;
    font-weight: 400;
    line-height: 19px;
}

.sch-quote br{
    display: none;
}

.wmk-heading br{
    display: none;
}

.anh-heading br{
    display: none;
}

.pas-heading br{
    display: none;
}

.soosocial-intro br{
    display: none;
}
        .search-hero .sh-stats {
        margin-top: 40px;
    }
    .search-hero .sh-dead span::after {
        height: 9px;
    }
       .search-hero .sh-line {
        font-size: 34px;
        line-height: 38px;
    }
    /* The three stats stay side by side here, so the strokes stay vertical --
       they are only shorter. Stretch rather than centre, so all three columns
       share one height and the two hairlines match instead of each ending
       wherever its own label runs out. Same as .brand-hero's. */
    .search-hero .sh-stats {
        display: flex;
        align-items: stretch;
    }
    .search-hero .sh-stat {
                padding: 16px 5px;
    }
    .search-hero .sh-stat + .sh-stat::before {
        top: 0;
        left: 0;
        transform: none;
        width: 1px;
        max-width: none;
        height: 100%;
        background: linear-gradient(
            180deg,
            #0E0920 0%,
            #FE4601 35%,
            #FE4601 70%,
            #0E0920 100%
        );
    }
    .search-hero .sh-figure {
        font-size: 38px;
        line-height: 44px;
    }
}

/* ==========================================================================
   Search page -- "Not Just Numbers". Base rules are at the end of custome.css.
   Steps mirror .brand-why's, with the figure coming down alongside the cards.
   ========================================================================== */
@media (max-width: 1240px) {
    .search-results .sr-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .search-results .sr-cards {
        gap: 20px;
    }
    .search-results .sr-card {
        padding: 24px 20px 0;
        min-height: 400px;
    }
    .search-results .sr-figure {
        font-size: 76px;
    }
    .search-results .sr-card-art {
        margin-left: -20px;
        margin-right: -20px;
    }
}

@media (max-width: 1023px) {
    .search-results {
        padding: 64px 0 72px;
    }
    .search-results .sr-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 38px;
    }
    /* Three across leaves the paragraphs two or three words wide here, so the
       row drops to two columns and the last card spans both. */
    .search-results .sr-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .search-results .sr-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .search-results {
        padding: 50px 0 50px;
    }
    .search-results .sr-eyebrow {
        font-size: 20px;
    }
    .search-results .sr-heading {
        font-size: 38px;
        line-height: 105%;
                margin-bottom: 25px;
    }
    /* On a phone the cards stop being a grid and become the same swipeable
       rail .brand-why uses: scroll-snap, arrows underneath, and the next card
       peeking in at the right edge. The rail breaks out of .container to the
       full viewport width the way .sixparts-track-wrap does, so a scrolled
       card runs out to the screen edge instead of being clipped at the
       gutter. */
    .search-results .sr-cards {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .search-results .sr-cards::-webkit-scrollbar {
        display: none;
    }
    .search-results .sr-card:last-child {
        grid-column: auto;
    }
    .search-results .sr-card {
        flex: 0 0 268px;
        max-width: 268px;
        min-height: 360px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    /* Right-aligned under the rail, exactly where the homepage puts them. */
    .search-results .sr-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
    .search-results .sr-figure {
        font-size: 64px;
    }
}

/* ==========================================================================
   Search page -- "Why search". Base rules are at the end of custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .search-why .swy-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .search-why .swy-grid {
        grid-template-columns: 1fr 42%;
        gap: 22px;
    }
    .search-why .swy-art {
        width: 100%;
        height: auto;
        aspect-ratio: 537 / 454;
    }
    .search-why .swy-cards {
        grid-template-columns: 0.62fr 1fr;
        gap: 10px;
    }
    .search-why .swy-card {
        padding: 22px 18px;
        font-size: 16px;
        line-height: 150%;
    }
}

@media (max-width: 1023px) {
    .search-why {
        padding: 64px 0 72px;
    }
    .search-why .swy-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 34px;
    }
    /* Side by side the photograph has to shrink to a letterbox before the copy
       fits, so below this the image drops under the text at full width. */
    .search-why .swy-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .search-why .swy-col {
        gap: 28px;
    }
    .search-why .swy-cards {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .search-why {
        padding: 48px 0 56px;
    }
    .search-why .swy-eyebrow {
        font-size: 20px;
    }
    .search-why .swy-heading {
        font-size: 38px;
        line-height: 105%;
        margin-bottom: 25px;
    }
    /* Two blocks across leave four or five words a line here. */
    .search-why .swy-cards {
        grid-template-columns: 1fr;
    }
    .search-why .swy-card {
        padding: 20px;
    }
}

/* ── /search — "The shift that matters" ─────────────────────────────────── */
@media (max-width: 1240px) {
    .search-shift .ssh-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .search-shift .ssh-pairs {
        gap: 20px;
    }
    .search-shift .ssh-question {
        padding: 22px 20px;
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    .search-shift {
        padding: 64px 0 72px;
    }
    .search-shift .ssh-heading {
        font-size: 34px;
        line-height: 40px;
    }
    .search-shift .ssh-intro {
        margin-bottom: 34px;
    }
    /* Three columns leave three words a line at this width, so the last pair
       takes the full row underneath rather than shrinking them all. */
    .search-shift .ssh-pairs {
        grid-template-columns: repeat(2, 1fr);
    }
    .search-shift .ssh-pair:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .social-hero .sch-strip {
        margin-top: 30px;
    }
        .social-hero .sch-rule {
        display: none;
    }
    .search-shift .ssh-intro {
        margin-bottom: 25px;
    }
    .search-shift {
        padding: 50px 0 50px;
    }
    .search-shift .ssh-eyebrow {
        font-size: 20px;
    }
    .search-shift .ssh-heading {
        font-size: 38px;
        line-height: 105%;
        margin-bottom: 15px;
    }
    .search-shift .ssh-pairs {
        grid-template-columns: 1fr;
    }
    .search-shift .ssh-pair:last-child {
        grid-column: auto;
    }
    /* On a phone the struck-out keyword moves INSIDE the card, above the
       question, the way the frame draws it. So the card itself becomes the
       painted box -- radial fill, 25 radius -- and the question goes back to
       being plain text inside it. On desktop the keyword stays above a flat
       violet card, untouched. */
    .search-shift .ssh-pair {
        padding: 20px;
        border-radius: 25px;
        background: radial-gradient(circle at 50% 50%, #9471FF 0%, #6341B8 100%);
    }
    .search-shift .ssh-keyword {
        margin-bottom: 10px;
        font-size: 22px;
        line-height: 150%;
    }
    .search-shift .ssh-question {
        padding: 0;
        border-radius: 0;
        background: none;
        font-size: 18px;
        line-height: 150%;
    }
}

/* ── /search — "What you get" (SEO / AEO / GEO) ──────────────────────────── */
@media (max-width: 1240px) {
    .search-layers .sly-heading {
        max-width: 460px;
        font-size: 44px;
        line-height: 50px;
    }
    .search-layers .sly-intro {
        font-size: 16px;
    }
    .search-layers .sly-head {
        margin-bottom: 70px;
    }
    .search-layers .sly-name {
        font-size: 36px;
    }
    .search-layers .sly-row {
        padding: 36px 0;
    }
    .search-layers .sly-row-head {
        padding: 0 0 22px;
    }
}

@media (max-width: 1023px) {
    .search-layers {
        padding: 64px 0 72px;
    }
    /* The intro drops under the heading -- side by side it would be three
       words a line. */
    .search-layers .sly-head {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-bottom: 48px;
    }
    .search-layers .sly-heading {
        max-width: none;
        font-size: 34px;
        line-height: 40px;
    }
    .search-layers .sly-intro {
        max-width: 640px;
    }
    .search-layers .sly-row {
        grid-template-columns: 28% minmax(0, 1fr);
        padding: 28px 0;
    }
    .search-layers .sly-row-head {
        padding: 0 0 18px;
    }
    .search-layers .sly-name {
        font-size: 32px;
    }
}

@media (max-width: 560px) {
    .search-layers {
        padding: 50px 0 50px;
    }
    .search-layers .sly-eyebrow {
        font-size: 20px;
    }
    .search-layers .sly-heading {
               font-size: 38px;
        line-height: 105%;
    }
    /* On a phone this stops being a two-column lookup and becomes three
       centred blocks, the way the frame draws it: at this width a 30% label
       column leaves the goal three words wide and the two collide. The column
       headings go with it -- with the name directly above its own goal there
       is nothing left for them to label. */
    .search-layers .sly-row {
        display: block;
        padding: 22px 0;
        text-align: center;
        border-bottom: 0;
    }
    .search-layers .sly-row-head {
        display: none;
    }
    /* The same gradient stroke the rest of the page uses, drawn between the
       rows only -- never under the last one. */
    .search-layers .sly-row + .sly-row {
        border-top: 0;
        background-image: linear-gradient(
            90deg,
            #0E0920 0%,
            #FE4601 35%,
            #FE4601 70%,
            #0E0920 100%
        );
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 214px 1px;
    }
    /* One orange for all three here, as a linear gradient across the letters,
       instead of the per-layer tone the desktop table carries. */
    .search-layers .sly-name {
        display: block;
        margin-bottom:15px;
        font-size: 38px;
        line-height: 28px;
        background-image: linear-gradient(90deg, #FE4601 0%, #FF6D36 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .search-layers .sly-goal {
        display: block;
        font-size: 16px;
        line-height: 130%;
        color: #C3C3C3;
    }
}

/* ── /search — "How we work" (four steps) ────────────────────────────────── */
@media (max-width: 1240px) {
    .search-steps .sst-heading {
        font-size: 42px;
        line-height: 47px;
    }
    /* Four across at 27px leaves two words a line; two rows of two instead. */
    .search-steps .sst-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .search-steps {
        padding: 64px 0 72px;
    }
    .search-steps .sst-heading {
        font-size: 34px;
        line-height: 39px;
        margin-bottom: 30px;
    }
    .search-steps .sst-title {
        font-size: 22px;
        line-height: 27px;
    }
}

@media (max-width: 560px) {
    .search-steps {
        padding: 50px 0 50px;
    }
    .search-steps .sst-eyebrow {
        font-size: 20px;
    }
    .search-steps .sst-heading {
        font-size: 38px;
        line-height: 105%;
    }
    /* On a phone the four steps stop stacking and become the same swipeable
       rail as "Why it matters" on /brand and the homepage machine: a full-bleed
       track so a scrolled card runs to the screen edge instead of being clipped
       at the container gutter, snapping one card at a time. */
    .search-steps .sst-cards {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .search-steps .sst-cards::-webkit-scrollbar {
        display: none;
    }
    .search-steps .sst-card {
        flex: 0 0 268px;
        max-width: 268px;
        padding: 22px 20px 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .search-steps .sst-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
    .search-steps .sst-media {
        margin: auto -20px 0;
    }
    .search-steps .sst-title {
        font-size: 20.2px;
        line-height: 25px;
    }
    .search-steps .sst-desc {
        font-size: 15px;
        line-height: 20px;
    }
}

/* ── /search — "What we measure" (hover-open cards) ────────────────────────── */
@media (max-width: 1240px) {
    .search-measure {
        --smm-h: 400px;
        --smm-h-open: 510px;
    }
    .search-measure .smm-heading {
        font-size: 42px;
        line-height: 47px;
    }
    .search-measure .smm-num {
        font-size: 44px;
    }
    .search-measure .smm-label {
        font-size: 17px;
        line-height: 23px;
    }
    .search-measure .smm-closed {
        padding: 22px 20px 24px;
    }
    .search-measure .smm-body {
        padding: 20px 22px 22px;
    }
    .search-measure .smm-title {
        font-size: 24px;
        line-height: 29px;
    }
    .search-measure .smm-desc {
        font-size: 15px;
    }
}

/* No hover to open a card with, or no room to open one inside the row: all
   four render open, as a plain grid. One block so the two cases cannot drift
   apart. */
@media (max-width: 1023px), (hover: none) {
    .search-measure .smm-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        height: auto;
    }
    .search-measure .smm-card,
    .search-measure .smm-card:first-child,
    .search-measure .smm-card:hover,
    .search-measure .smm-card:focus-within {
        height: auto;
        box-shadow: 0 1px 2px rgba(11, 11, 15, 0.04);
    }
    .search-measure .smm-closed {
        display: none;
    }
    .search-measure .smm-open {
        position: static;
        height: 100%;
        opacity: 1;
    }
    .search-measure .smm-media {
        flex: 0 0 auto;
        aspect-ratio: 570 / 606;
        max-height: 360px;
    }
    .search-measure .smm-media img {
        transform: none;
    }
}

@media (max-width: 1023px) {
    .search-measure {
        padding: 64px 0 72px;
    }
    .search-measure .smm-heading {
        font-size: 34px;
        line-height: 39px;
        margin-bottom: 34px;
    }
}

@media (max-width: 560px) {
    .search-measure {
        padding: 48px 0 56px;
    }
    .search-measure .smm-eyebrow {
        font-size: 20px;
    }
    .search-measure .smm-heading {
        font-size: 38px;
        line-height: 105%;
    }
    /* On a phone the four cards stop stacking and become the same swipeable
       rail as the rest of the page: a full-bleed track so a scrolled card runs
       to the screen edge instead of being clipped at the container gutter,
       snapping one card at a time. */
    .search-measure .smm-row {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .search-measure .smm-row::-webkit-scrollbar {
        display: none;
    }
    .search-measure .smm-card {
        flex: 0 0 268px;
        max-width: 268px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .search-measure .smm-media {
        max-height: 300px;
    }
    .search-measure .smm-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
    .search-measure .smm-title {
        font-size: 20.2px;
        line-height: 25px;
    }
}

/* ── /search — "Three ways we work" ────────────────────────────────────────── */
@media (max-width: 1240px) {
    .search-ways .swa-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .search-ways .swa-cards {
        gap: 18px;
    }
    .search-ways .swa-card {
        padding: 28px 22px 32px;
    }
    .search-ways .swa-name {
        font-size: 26px;
        line-height: 32px;
    }
    .search-ways .swa-outcome {
        font-size: 20px;
        line-height: 26px;
    }
}

@media (max-width: 1023px) {
    .search-ways {
        padding: 64px 0 72px;
    }
    .search-ways .swa-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 36px;
    }
    /* Three columns leave four words a line here; one column reads better
       than two plus an orphan. */
    .search-ways .swa-cards {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: 0 auto;
    }
    .search-ways .swa-foot {
        margin-top: 40px;
    }
}

@media (max-width: 560px) {
    .search-ways {
        padding: 50px 0 50px;
    }
    .search-ways .swa-eyebrow {
        font-size: 20px;
        text-align: left;
    }
    .search-ways .swa-heading {
        font-size: 38px;
        line-height: 105%;
        text-align: left;
    }
    .search-ways .swa-card {
        padding: 24px 20px 28px;
    }
    .search-ways .swa-name {
        font-size: 30px;
        line-height: 30px;
    }
    .search-ways .swa-outcome {
        font-size: 19px;
        line-height: 25px;
    }
}

/* ==========================================================================
   Social content page hero (/social-content) -- base rules are at the end of
   custome.css. Steps mirror the search hero's, so the pair shrinks together.
   ========================================================================== */
@media (max-width: 1240px) {
    .social-hero .sch-title {
        font-size: 96px;
    }
    .social-hero .sch-quote blockquote {
        font-size: 32px;
    }
    .social-hero .sch-stat {
        padding: 0 20px;
    }
    .social-hero .sch-figure {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (max-width: 1023px) {
    .social-hero {
        padding: 64px 0 0;
    }
    .social-hero .sch-title {
        font-size: 68px;
    }
    .social-hero .sch-quote {
        margin-top: 24px;
    }
    .social-hero .sch-rule {
        margin-top: 22px;
    }
    .social-hero .sch-note + .sch-rule {
        margin-top: 36px;
    }
    .social-hero .sch-quote blockquote {
        font-size: 26px;
    }
    /* Four columns leave the labels two words wide here, so the row folds to
       two and the stroke only runs between the pairs. */
    .social-hero .sch-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 34px;
        margin-top: 56px;
    }
    .social-hero .sch-stat + .sch-stat::before {
        height: 120px;
    }
    .social-hero .sch-stat:nth-child(odd)::before {
        display: none;
    }
    .social-hero .sch-figure {
        font-size: 40px;
        line-height: 46px;
    }
    .social-hero .sch-strip {
        margin-top: 64px;
    }
    .social-hero .sch-chip {
        padding: 16px 30px;
        font-size: 16px;
    }
}

@media (max-width: 560px) {
    .social-hero {
        padding: 48px 0 0;
    }
    .social-hero .sch-title {
        font-size: 56px;
    }
      .social-hero .sch-quote blockquote {
        font-size: 26px;
        line-height: 32px;
        font-weight: 500;
    }
    /* The note and the source sit in the brand hero's badge box here, so the
       copy inside it is centred and the orange attribution turns into the
       small white caps the frame draws under the sentence. */
    .social-hero .hero-stat-badge {
        display: block;
        margin-top: 24px;
        text-align: center;
    }
    .social-hero .hero-stat-badge .sch-note {
        margin: 0;
        font-size: 18px;
        line-height: 23px;
        color: #D0BDFF;
    }
    .social-hero .sch-attrib-mobile {
        margin: 10px 0 0;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        color: #ffffff;
    }
    /* Two columns, as in the frame: four stats in a 2x2 with the gradient
       stroke standing between the columns. Stretch rather than centre, so both
       cells of a row share one height and the stroke matches instead of ending
       wherever its own label runs out. */
    .social-hero .sch-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        row-gap: 26px;
        margin-top: 34px;
    }
    .social-hero .sch-stat {
        padding: 10px 5px;
    }
    /* Only the right-hand cell of each row carries it -- a stroke on the first
       column would sit on the band's left edge. */
    .social-hero .sch-stat + .sch-stat::before {
        display: none;
    }
    .social-hero .sch-stat:nth-child(even)::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 1px;
        max-width: none;
        height: 100%;
        background: linear-gradient(
            180deg,
            #0E0920 0%,
            #FE4601 35%,
            #FE4601 70%,
            #0E0920 100%
        );
    }
    .social-hero .sch-figure {
        font-size: 32px;
        line-height: 130%;
    }
    .social-hero .sch-label {
        margin-top: 5px;
        font-weight: 300;
        font-size: 14px;
        line-height: 130%;
    }
    .social-hero .sch-chip {
        padding: 14px 22px;
        font-size: 15px;
    }
}

/* ==========================================================================
   Social content page -- "Where most get it wrong". Base rules are at the end
   of custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .social-wrong .swr-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .social-wrong {
        padding: 80px 0 88px;
    }
}

@media (max-width: 1023px) {
    .social-wrong {
        padding: 60px 0 66px;
    }
    .social-wrong .swr-heading {
        font-size: 34px;
        line-height: 40px;
    }
    .social-wrong .swr-body {
        margin-bottom: 34px;
    }
}

@media (max-width: 560px) {
    .social-wrong {
        padding: 44px 0 48px;
    }
    .social-wrong .swr-eyebrow {
        font-size: 20px;
    }
    .social-wrong .swr-heading {
        font-size: 38px;
        line-height: 105%;
    }
    .social-wrong .swr-body {
        font-size: 16px;
    }
}

/* ==========================================================================
   Social content page -- "Platforms we run". Base rules are at the end of
   custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .social-platforms .spl-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .social-platforms .spl-cards {
        gap: 12px;
    }
    .social-platforms .spl-card {
        height: 470px;
        padding: 22px 16px;
    }
    .social-platforms .spl-icon {
        width: 88px;
    }
}

/* Six columns are too narrow to read below this, so the row folds to three and
   then two -- the tone cycle keeps working because it is set per card, not per
   column position. */
@media (max-width: 1199px) {
    .social-platforms .spl-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .social-platforms .spl-card {
        height: auto;
        min-height: 430px;
        padding: 26px 22px;
    }
    .social-platforms .spl-icon {
        width: 96px;
        margin-top: 28px;
    }
}

@media (max-width: 1023px) {
    .social-platforms {
        padding: 72px 0;
    }
    .social-platforms .spl-heading {
        font-size: 34px;
        line-height: 40px;
    }
    .social-platforms .spl-cards {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .social-platforms .spl-card {
        height: auto;
        min-height: 430px;
        padding: 26px 22px;
    }
    .social-platforms .spl-icon {
        width: 96px;
        margin-top: 28px;
    }
}

@media (max-width: 767px) {
    .social-platforms .spl-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
        .social-platforms .spl-icon {
        width: 132px;
    }
    .social-platforms {
        padding: 50px 0;
    }
    .social-platforms .spl-heading {
        font-size: 38px;
        line-height: 105%;
        margin: 0 0 25px;
    }
    .social-platforms .spl-eyebrow {
        font-size:20px;
    }
    /* On a phone the six cards stop stacking and become the same swipeable
       rail as the rest of the site: a full-bleed track so a scrolled card runs
       to the screen edge instead of being clipped at the container gutter,
       snapping one card at a time. */
    .social-platforms .spl-cards {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .social-platforms .spl-cards::-webkit-scrollbar {
        display: none;
    }
    .social-platforms .spl-card {
        flex: 0 0 268px;
        max-width: 268px;
        min-height: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .social-platforms .spl-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
}

/* ==========================================================================
   Social content page -- "How we work". Base rules are at the end of
   custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .social-steps .sst-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .social-steps .sst-panel {
        padding: 0 56px 0 90px;
    }
    .social-steps .sst-step + .sst-step {
        left: 90px;
        right: 56px;
    }
    .social-steps .sst-num {
        font-size: 76px;
        line-height: 78px;
    }
    .social-steps .sst-step .sst-title {
        font-size: 32px;
        line-height: 40px;
    }
    .social-steps .sst-body {
        font-size: 18px;
        line-height: 28px;
    }
}

/* Below this the pin is dropped: the wrapper stops being five viewports tall,
   the stage stops sticking, and the five steps stack and scroll like ordinary
   content. A pinned section on a phone costs five screens of scrolling to read
   five short paragraphs, and it fights the address bar resizing the viewport. */
@media (max-width: 1023px) {
    .social-steps .sst-scroll {
        height: auto;
    }
    .social-steps .sst-stage {
        position: static;
        display: block;
        height: auto;
    }
    .social-steps .sst-visual {
        height: 320px;
    }
    .social-steps .sst-panel {
        display: block;
        padding: 56px 24px 64px;
    }
    .social-steps .sst-step,
    .social-steps .sst-step + .sst-step {
        position: static;
        max-width: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .social-steps .sst-step + .sst-step {
        margin-top: 56px;
    }
    .social-steps .sst-heading {
        font-size: 34px;
        line-height: 40px;
    }
    .social-steps .sst-num {
        margin-bottom: 16px;
        font-size: 60px;
        line-height: 62px;
    }
    .social-steps .sst-step .sst-title {
        font-size: 27px;
        line-height: 34px;
    }
}

@media (max-width: 560px) {
    .social-steps .sst-eyebrow {
        font-size: 20px;
        text-align: left;

    }
    .social-steps .sst-heading {
        font-size: 38px;
        line-height: 105%;
        text-align: left;
        margin: 0 0 25px;
    }
    /* The pin comes back on a phone, stacked instead of side by side: the
       image on top, the copy under it, the whole thing one screen tall and
       held there while the five steps turn -- the same behaviour as desktop,
       laid out as the frame draws it. (The 1023 block above drops the pin for
       tablets, where a half-height image beside nothing reads worse than a
       plain stack; these rules put it back for the phone only.) */
    .social-steps .sst-scroll {
        height: 500vh;
    }
    .social-steps .sst-stage {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    .social-steps .sst-visual {
        flex: 0 0 50%;
        height: auto;
    }
    .social-steps .sst-panel {
        flex: 1 1 auto;
        display: block;
        padding: 34px 20px;
    }
    /* Every step in the same box again, stacked and faded, so only the active
       one is on screen and the panel never reflows mid-scroll. Pinned to the
       top of the panel, directly under the image, the way the frame draws it
       -- not centred in the space left over. */
    .social-steps .sst-step,
    .social-steps .sst-step + .sst-step {
        position: absolute;
        top: 34px;
        left: 20px;
        right: 20px;
        margin-top: 0;
        opacity: 0;
        transform: translateY(18px);
        pointer-events: none;
    }
    .social-steps .sst-step.is-active,
    .social-steps .sst-step + .sst-step.is-active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .social-steps .sst-num {
        margin-bottom: 12px;
        font-size: 48px;
        line-height: 52px;
    }
    .social-steps .sst-step .sst-title {
        font-size: 24px;
        line-height: 30px;
    }
    .social-steps .sst-body {
        font-size: 16px;
        line-height: 25px;
    }
}

/* ==========================================================================
   Social content page -- "What we make". Base rules are at the end of
   custome.css. Each step sets --wmk-w and the phones rescale whole; the
   stagger is flattened as soon as the row stops being a single line.
   ========================================================================== */
@media (max-width: 1240px) {
    .social-make {
        --wmk-w: 196px;
        --wmk-gap: 24px;
    }
    .social-make .wmk-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .social-make .wmk-phone-2 { margin-top: 120px; }
    .social-make .wmk-phone-3 { margin-top: 55px; }
    .social-make .wmk-phone-4 { margin-top: 180px; }
    .social-make .wmk-title {
        font-size: 25px;
        line-height: 29px;
    }
    .social-make .wmk-label {
        font-size: 11px;
    }
}

@media (max-width: 1199px) {
    .social-make {
        --wmk-w: 200px;
        --wmk-gap: 28px;
    }
    /* The row wraps, so the stagger is dropped: offsets that read as a wave on
       one line only look like misalignment once the phones sit on two. */
    .social-make .wmk-row {
        flex-wrap: wrap;
        row-gap: 40px;
    }
    .social-make .wmk-phone-1,
    .social-make .wmk-phone-2,
    .social-make .wmk-phone-3,
    .social-make .wmk-phone-4,
    .social-make .wmk-phone-5 {
        margin-top: 0;
    }
}

@media (max-width: 1023px) {
    .social-make {
        padding: 72px 0;
    }
    .social-make .wmk-heading {
        font-size: 34px;
        line-height: 40px;
    }
}

@media (max-width: 560px) {
    .social-make {
        --wmk-w: 132px;
        padding: 50px 0;
    }
    .social-make .wmk-eyebrow {
        font-size: 20px;
    }
    .social-make .wmk-heading {
           font-size: 38px;
        line-height: 105%;
        margin-bottom: 25px;
    }

    /* On a phone the five devices lie on their side and come down the page as
       a staircase, the way the frame draws them: five portrait phones side by
       side need a width this screen does not have, and stacked upright they
       would run to several screens of scrolling. */
    .social-make .wmk-row {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    /* The box turns landscape: the same body, width and height swapped. */
    .social-make .wmk-phone {
        width: calc(var(--wmk-w) * 2.0231);
        height: var(--wmk-w);
    }

    /* Only the device turns -- the copy on the screen stays upright and reads
       normally. Rotated a quarter turn clockwise about its top-left corner the
       body lands to the LEFT of the box, so it is pushed back by its own
       (now horizontal) length. The phone's top edge, and with it the notch,
       ends up on the right, which is the side the frame shows it on. */
    .social-make .wmk-device {
        transform-origin: 0 0;
        transform: translateX(calc(var(--wmk-w) * 2.0231)) rotate(90deg);
    }

    /* The staircase: every other device steps out to the right. */
    .social-make .wmk-phone-1,
    .social-make .wmk-phone-3,
    .social-make .wmk-phone-5 {
        margin-right: 44px;
    }
    .social-make .wmk-phone-2,
    .social-make .wmk-phone-4 {
        margin-left: 44px;
    }

    .social-make .wmk-title {
        font-size: 27px;
        line-height: 32px;
    }
    .social-make .wmk-label {
        font-size: 10px;
    }
}

/* ==========================================================================
   Social content page -- "Followers are not a business outcome". Base rules
   are at the end of custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .social-metrics {
        --smt-overlap: 26px;
    }
    .social-metrics .smt-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .social-metrics .smt-card {
        padding: 28px calc(20px + var(--smt-overlap) / 2);
    }
    .social-metrics .smt-card .smt-title {
        font-size: 21px;
        line-height: 25px;
    }
       .social-metrics .smt-body {
        font-size: 15px;
        line-height: 19px;
        font-weight: 400;
    }
}

/* Six overlapping cards stop being readable here, so the row becomes a plain
   grid: no overlap, no stacking order to keep, and the hover lift is all that
   carries over. */
@media (max-width: 1199px) {
    .social-metrics .smt-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
    .social-metrics .smt-card {
        height: 300px;
        padding: 30px 24px;
    }
    .social-metrics .smt-card + .smt-card {
        margin-left: 0;
    }
    .social-metrics .smt-card .smt-title {
        font-size: 24.2px;
        line-height: 27.5px;
    }
    .social-metrics .smt-body {
        font-size: 18px;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    .social-metrics {
        padding: 72px 0;
    }
    .social-metrics .smt-break {
        display: none;
    }
    .social-metrics .smt-heading {
        font-size: 34px;
        line-height: 40px;
    }
}

@media (max-width: 767px) {
    .social-metrics .smt-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .social-hero .sch-quote blockquote br{
        disply: none;
    }

    .social-metrics .smt-card:hover, .social-metrics .smt-card:focus-within {
    transform: unset;
}

    .social-metrics .smt-note {
    margin: 0 auto 25px;
    font-size: 16px;
    line-height: 20px;
    color: #1D1D1F;
    text-align: left;
}


    .social-metrics {
        padding: 56px 0;
    }
    .social-metrics .smt-heading {
             font-size: 38px;
        line-height: 105%;
    }
    /* On a phone the six cards stop stacking and become a swipeable rail, as
       in the frame: narrow cards, two and a bit on screen, the track running
       full-bleed so a scrolled card reaches the screen edge instead of being
       clipped at the container gutter. No arrows here -- the frame does not
       draw them, and the row is a list to flick through, not a sequence. */
    .social-metrics .smt-row {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        justify-content: flex-start;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .social-metrics .smt-row::-webkit-scrollbar {
        display: none;
    }
    .social-metrics .smt-card {
        flex: 0 0 148px;
        max-width: 148px;
        height: 250px;
        padding: 24px 12px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .social-metrics .smt-card .smt-title {
        font-size: 20px;
        line-height: 24px;
    }
    .social-metrics .smt-body {
        font-size: 14px;
        line-height: 19px;
    }
}

/* ==========================================================================
   Paid ads page hero (/paid-ads) -- base rules are at the end of custome.css.
   The social hero's steps run first (the section carries both classes); these
   only handle the extra two stat columns.
   ========================================================================== */
@media (max-width: 1240px) {
    /* Back inside the container, and wrapping allowed again -- below this width
       there is no room to keep six figures on one line. */
    .paid-hero .sch-stats {
        width: auto;
        margin-left: auto;
        transform: none;
    }
    .paid-hero .sch-stat {
        flex: 1 1 0;
        white-space: normal;
        padding: 0 10px;
    }
    .paid-hero .sch-figure {
        font-size: 40px;
        line-height: 48px;
    }
    .paid-hero .sch-label {
        font-size: 14px;
    }
}

@media (max-width: 1023px) {
    .social-hero.paid-hero {
        padding-bottom: 64px;
    }
    /* Six across is unreadable here; the row folds to three, and the stroke
       runs between the columns of each row only. */
    .paid-hero .sch-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .paid-hero .sch-stat:nth-child(odd)::before {
        display: block;
    }
    .paid-hero .sch-stat:nth-child(3n + 1)::before {
        display: none;
    }
    .paid-hero .sch-stat + .sch-stat::before {
        height: 110px;
    }
    .paid-hero .sch-figure {
        font-size: 34px;
        line-height: 40px;
    }
}

@media (max-width: 560px) {
    .social-hero.paid-hero {
        padding-bottom: 44px;
    }
    /* Three columns, as in the frame: six figures in a 3x2 with the gradient
       stroke standing between the columns. The social hero's rules above put
       the row in a two-column grid -- this page has six stats, not four. */
    .paid-hero .sch-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        row-gap: 22px;
    }
    .paid-hero .sch-stat {
        padding: 10px 4px;
    }
    /* Every cell but the first of each row carries the stroke -- one on the
       left column would sit on the band's edge. Declared here in full rather
       than leant on the social hero's rule, because that one only dresses the
       even cells and this row is three wide. */
    .paid-hero .sch-stat::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 1px;
        max-width: none;
        height: 100%;
        background: linear-gradient(
            180deg,
            #0E0920 0%,
            #FE4601 35%,
            #FE4601 70%,
            #0E0920 100%
        );
    }
    .paid-hero .sch-stat:nth-child(3n + 1)::before {
        display: none;
    }
    .paid-hero .sch-figure {
        font-size: 26px;
        line-height: 130%;
    }
    .paid-hero .sch-label {
        font-size: 14px;
    }
}

/* ==========================================================================
   Paid ads page -- "What the accounts actually did." Base rules are at the end
   of custome.css. Steps mirror .search-results', with the cards folding a
   column at a time.
   ========================================================================== */
@media (max-width: 1240px) {
    .pa-results .par-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .pa-results .par-cards {
        gap: 18px;
    }
    .pa-results .par-card {
        padding: 20px 18px 78px;
        min-height: 420px;
    }
    .pa-results .par-figure {
        font-size: 34px;
        line-height: 38px;
    }
    .pa-results .par-card-art {
        margin-left: -18px;
        margin-right: -18px;
    }
    .pa-results .par-card-cta {
        left: 18px;
    }
}

@media (max-width: 1023px) {
    .pa-results {
        padding: 64px 0 72px;
    }
    .pa-results .par-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 38px;
    }
    /* Four across leaves each line two or three words wide here, so the row
       drops to two. */
    .pa-results .par-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pa-results {
        padding: 50px 0 50px;
    }
    .pa-results .par-eyebrow {
        font-size: 20px;
    }
    .pa-results .par-heading {
        font-size: 38px;
        line-height: 105%;
        margin-bottom: 25px;
    }
    /* On a phone the cards stop stacking and become the same swipeable rail as
       the rest of the site: a full-bleed track so a scrolled card runs to the
       screen edge instead of being clipped at the container gutter, snapping
       one card at a time. */
    .pa-results .par-cards {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .pa-results .par-cards::-webkit-scrollbar {
        display: none;
    }
    .pa-results .par-card {
        flex: 0 0 268px;
        max-width: 268px;
        min-height: 380px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .pa-results .par-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
}

/* ==========================================================================
   Paid ads page -- "You want return on ad spend." Base rules are at the end of
   custome.css. Steps mirror .search-shift's.
   ========================================================================== */
@media (max-width: 1240px) {
    .pa-spend .pas-heading {
        font-size: 44px;
        line-height: 50px;
    }
}

@media (max-width: 1023px) {
    .pa-spend {
        padding: 64px 0;
    }
    .pa-spend .pas-heading {
        font-size: 34px;
        line-height: 40px;
        margin-bottom: 22px;
    }
}

@media (max-width: 560px) {

    .pa-decides .pdw-eyebrow {
    margin: 0px 0 15px;
    font-size: 20px;
    color: #FE4601;
}
    .pa-spend {
        padding: 50px 0;
    }
       .pa-spend .pas-heading {
        text-align: center;
        font-size: 38px;
        line-height: 105%;
    }
       .pa-spend .pas-body {
        font-size: 16px;
        line-height: 130%;
        text-align: center;
        font-weight: 400;
    }
}

/* ==========================================================================
   Paid ads page -- "Eight Things Decide Performance." Base rules are at the
   end of custome.css. The rail only works while there is width to recede
   into; below 1023 it becomes a plain grid of equal cards, so the ramp is
   switched off rather than squeezed.
   ========================================================================== */
@media (max-width: 1240px) {
    .pa-decides .pdw-heading {
        font-size: 36px;
        line-height: 42px;
    }
    .pa-decides .pdw-card {
        height: calc(310px - var(--pdw-eff) * 26px);
    }
    .pa-decides .pdw-title {
        font-size: calc(25.3px - var(--pdw-eff) * 2.09px);
    }
    .pa-decides .pdw-body {
        font-size: calc(18.9px - var(--pdw-eff) * 1.55px);
    }
}

@media (max-width: 1023px) {
    .pa-decides {
        padding: 64px 0;
    }
    .pa-decides .pdw-head {
        display: block;
    }
    .pa-decides .pdw-heading {
        font-size: 30px;
        line-height: 36px;
    }
    .pa-decides .pdw-note {
        max-width: 100%;
        margin-top: 16px;
        font-weight: 400;
        text-align: left;
    }
    /* Eight receding cards have nowhere to recede to at this width, so the
       ramp is dropped and every card goes back to one size. */
    .pa-decides .pdw-rail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 30px 0 0;
    }
    .pa-decides .pdw-card {
        height: auto;
        min-height: 200px;
        margin-top: 0;
        padding: 26px 22px;
        border-radius: 20px;
    }
    .pa-decides .pdw-card + .pdw-card {
        margin-left: 0;
    }
    .pa-decides .pdw-card:hover,
    .pa-decides .pdw-card:focus-within {
        transform: none;
        box-shadow: none;
    }
    .pa-decides .pdw-title {
        font-size: 20px;
    }
    .pa-decides .pdw-body {
        font-size: 15px;
    }
}

@media (max-width: 560px) {
    .pa-decides {
        padding: 48px 0;
    }
       .pa-decides .pdw-heading {
        font-size: 38px;
        line-height: 105%;
    }
    /* On a phone the cards stop stacking and become the same swipeable rail as
       the rest of the site: a full-bleed track so a scrolled card runs to the
       screen edge instead of being clipped at the container gutter, snapping
       one card at a time. */
    .pa-decides .pdw-rail {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        /* No gap on a phone: the cards lap over each other the way the desktop
           ramp does, the overlap carried by a negative margin below. */
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 30px 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .pa-decides .pdw-rail::-webkit-scrollbar {
        display: none;
    }
    /* Narrower than the track, so the next card is always half in frame. The
       card at the head of the rail is the one drawn full size -- the component
       puts `is-lead` on it as you scroll -- so a card grows on its way in and
       settles back as it leaves, the desktop ramp one card at a time. Height
       and width are real layout, so they are eased rather than snapped. */
    .pa-decides .pdw-card {
        flex: 0 0 210px;
        max-width: 210px;
        height: 300px;
        min-height: 0;
        margin-top: 22px;
        padding: 22px 18px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        transition: flex-basis 0.35s ease, max-width 0.35s ease,
                    height 0.35s ease, margin-top 0.35s ease;
    }
    /* The active card is lifted clear of both neighbours -- above the one it
       laps over and above the one lapping over it -- and carries the only
       deep shadow in the rail, so the card being read is unmistakably the top
       one. */
    .pa-decides .pdw-card.is-lead {
        z-index: 9;
        flex-basis: 232px;
        max-width: 232px;
        height: 344px;
        margin-top: 0;
        /* box-shadow: 0 18px 34px rgba(17, 17, 17, 0.24); */
    }
    /* Each card slides under its neighbour. The strip hidden underneath is
       added back as left padding, otherwise centred copy would read as
       running out from behind the card on top of it. */
    .pa-decides .pdw-card + .pdw-card {
        margin-left: -20px;
        padding-left: 36px;
    }
    /* ...except on the lead, which sits on top and is therefore whole: its
       copy is centred across the full card again. */
    .pa-decides .pdw-card.is-lead {
        padding-left: 18px;
    }
    .pa-decides .pdw-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
}

/* ==========================================================================
   Paid ads page -- the orange statistic band. Base rules are at the end of
   custome.css. The claim is the section, so it is stepped down in three
   moves rather than allowed to run off the side.
   ========================================================================== */
@media (max-width: 1240px) {
    .pa-dash {
        padding: 84px 0 90px;
    }
    .pa-dash .pad-heading {
        font-size: 64px;
        line-height: 72px;
    }
    .pa-dash .pad-note {
        margin-top: 36px;
        font-size: 26px;
        line-height: 30px;
    }
}

@media (max-width: 1023px) {
    .pa-dash {
        padding: 64px 0 68px;
    }
    .pa-dash .pad-heading {
        font-size: 44px;
        line-height: 50px;
        letter-spacing: -1px;
    }
    .pa-dash .pad-note {
        margin-top: 28px;
        font-size: 20px;
        line-height: 26px;
    }
}

@media (max-width: 560px) {
    .pa-dash {
        padding: 50px 0 50px;
    }
      .pa-dash .pad-heading {
        font-size: 38px;
        text-align: center;
        line-height: 105%;
        letter-spacing: -0.5px;
    }
      .pa-dash .pad-note {
        margin-top: 20px;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
    }
}

/* ==========================================================================
   Paid ads page -- "How we work", the six phones. Base rules are at the end of
   custome.css. The row rescales on one value down to 1023; below that six
   staggered phones have nowhere to stagger, so they go to a grid and the
   offsets are dropped.
   ========================================================================== */
@media (max-width: 1240px) {
    .pa-steps {
        --pst-w: 150px;
        --pst-gap: 18px;
        padding: 80px 0 86px;
    }
    .pa-steps .pst-heading {
        font-size: 40px;
        line-height: 46px;
    }
    .pa-steps .pst-title {
        font-size: 19px;
        line-height: 23px;
    }
    .pa-steps .pst-phone-2 { margin-top: 86px; }
    .pa-steps .pst-phone-3 { margin-top: 40px; }
    .pa-steps .pst-phone-4 { margin-top: 74px; }
    .pa-steps .pst-phone-6 { margin-top: 76px; }
}

@media (max-width: 1023px) {
    .pa-steps {
        --pst-w: 180px;
        padding: 64px 0 70px;
    }
    .pa-steps .pst-heading {
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 30px;
    }
    .pa-steps .pst-row {
        display: grid;
        grid-template-columns: repeat(3, var(--pst-w));
        justify-content: center;
        gap: 30px var(--pst-gap);
    }
    .pa-steps .pst-phone-1,
    .pa-steps .pst-phone-2,
    .pa-steps .pst-phone-3,
    .pa-steps .pst-phone-4,
    .pa-steps .pst-phone-5,
    .pa-steps .pst-phone-6 {
        margin-top: 0;
    }
}

@media (max-width: 560px) {

        .pa-measure {
        padding: 0px 0!important;
        padding-bottom: 50px!important;
    }

   
    /* On a phone the row becomes the mock's ladder: the frames lie on their
       side, one per line, alternating left and right edge and lapping over
       each other slightly. --pst-w is the phone's long side here rather than
       its width, so every size below still comes off the one number. */
    .pa-steps {
        --pst-w: 240px;
        padding: 50px 0 50px;
    }
    .pa-steps .pst-eyebrow {
        font-size: 20px;
        line-height: 20px;
    }
       .pa-steps .pst-heading {
        font-size: 38px;
        line-height: 105%;
    }
    .pa-steps .pst-row {
        display: block;
        grid-template-columns: none;
        gap: 0;
    }
    .pa-steps .pst-phone {
        /* The body, turned: the portrait ratio read the other way round. */
        width: var(--pst-w);
        height: calc(var(--pst-w) / 2.0231);
        margin: 0 auto 0 0;
        margin-bottom:25px;
    }
    /* The lap. The stagger is the alternating margin below, so the per-phone
       offsets the desktop row carries are cleared. */
    .pa-steps .pst-phone + .pst-phone {
        margin-top: -10px;
    }
    .pa-steps .pst-phone-2,
    .pa-steps .pst-phone-4,
    .pa-steps .pst-phone-6 {
        margin-right: 0;
        margin-left: auto;
    }
    /* Only the frame turns -- the step stays upright and centred on it. The
       image keeps its own aspect, so its height is the turned body's short
       side times the overhang ratio the desktop rule uses. */
    .pa-steps .pst-device {
        top: 0;
        left: 0;
        height: calc(var(--pst-w) / 2.0231 * 2.4859);
        /* The body sits at the top left of the PNG, not in its middle, which
           is why the desktop rule pins the image to 0,0. Turning it about
           that same corner and then pushing it one box width to the right
           lands the body back on the box exactly. */
        transform-origin: 0 0;
        transform: translateX(var(--pst-w)) rotate(90deg);
    }
    /* The turned frame is short, so the screen takes back the margin the
       portrait bezel needs: at 27px a three line step has to sit inside the
       glass rather than run over the frame. */
    .pa-steps .pst-screen {
        inset: 4% 6%;
    }
    .pa-steps .pst-title {
        font-size: 27px;
        line-height: 32px;
    }
}

/* ==========================================================================
   Paid ads page -- "What we measure". Base rules are at the end of
   custome.css.
   ========================================================================== */
@media (max-width: 1240px) {
    .pa-measure .pms-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .pa-measure .pms-cards {
        gap: 18px;
    }
    .pa-measure .pms-media {
        height: 262px;
    }
    .pa-measure .pms-card .pms-name {
        font-size: 22px;
        line-height: 26px;
    }
}

/* Four columns stop reading below this, so the row folds to two. */
@media (max-width: 1023px) {
    .pa-measure {
        padding: 72px 0;
    }
    .pa-measure .pms-heading {
        font-size: 36px;
        line-height: 42px;
    }
    .pa-measure .pms-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .pa-measure .pms-media {
        height: 300px;
    }
    .pa-measure .pms-card .pms-name {
        font-size: 24px;
        line-height: 28px;
    }
}

@media (max-width: 560px) {

    .pa-decides .pdw-card{
        box-shadow:unset;
    }
    .pa-measure .pms-eyebrow {
        font-size: 20px;
        line-height: 24px;
    }
     .pa-measure .pms-heading {
        font-size: 38px;
        line-height: 105%;
        margin-bottom: 25px;
    }
    /* On a phone the four cards stop sharing the width and become the same
       swipeable rail as the rest of the site: a full-bleed track, so a
       scrolled card runs to the screen edge instead of being clipped at the
       container gutter, snapping one card at a time. */
    .pa-measure .pms-cards {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        scroll-padding-left: calc(2.5vw + 12px);
    }
    .pa-measure .pms-cards::-webkit-scrollbar {
        display: none;
    }
    .pa-measure .pms-card {
        flex: 0 0 196px;
        max-width: 196px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .pa-measure .pms-media {
        height: 228px;
        border-radius: 16px;
    }
    .pa-measure .pms-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
    .pa-measure .pms-card .pms-name {
        margin-top: 14px;
        font-size: 17px;
        line-height: 21px;
    }

    .pa-decides .pdw-note {
    color: #000000 !important;
    font-size: 16px;
        line-height: 20px;
    text-align: left;
}
}

/* ── "Sometimes You Need A New Site." — /website-and-cro ─────────────────
   (components/website-and-cro/TwoJobs.js) */
@media (max-width: 1199px) {
    .wcro-jobs .wcj-heading {
        font-size: 44px;
        line-height: 50px;
    }
}

/* The note stops being a second column and sits under the heading, reading
   left like everything else on the row. */
@media (max-width: 991px) {
    .wcro-jobs .wcj-head {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 36px;
    }

    .wcro-jobs .wcj-note {
        margin-top: 0;
        text-align: left;
    }

    .wcro-jobs .wcj-eyebrow {
        font-size: 20px;
        line-height: 22px;
    }

    .wcro-jobs .wcj-heading {
        font-size: 36px;
        line-height: 42px;
        
    }
}

@media (max-width: 767px) {
       .wcro-jobs .wcj-heading {
        font-size: 38px;
        line-height: 105%;
    }

    .wcro-jobs .wcj-sub
{
    text-align: left;
}

    .wcro-jobs .wcj-note {
        color: #000000;
    }

    .wcro-jobs .wcj-item {
        padding: 16px;
        gap: 12px;
    }

    .wcro-jobs .wcj-num {
                flex-basis: 22px;
        font-size: 38px;
        line-height: 40px;
    }
}

/* ==========================================================================
   Website and CRO page -- "How we work", the five phones. Base rules are at
   the end of custome.css. The row rescales on --pst-w exactly as the paid-ads
   one does; the step, its rule and its line step down with it.
   ========================================================================== */
@media (max-width: 1320px) {
    .wcro-steps {
        --pst-w: 196px;
    }
    .wcro-steps .pst-title {
        font-size: 30px;
        line-height: 34px;
    }
    .wcro-steps .pst-rule {
        margin: 13px auto;
    }
    .wcro-steps .pst-body {
        font-size: 13px;
        line-height: 19px;
    }
}

@media (max-width: 1023px) {
    .wcro-steps {
        --pst-w: 210px;
    }
    .wcro-steps .pst-title {
        font-size: 28px;
        line-height: 32px;
    }
    .wcro-steps .pst-body {
        font-size: 13px;
        line-height: 19px;
    }
}

/* The phone ladder the .pa-steps block above builds is this row too: the
   frames lie on their side, one per line, alternating edges. --pst-w is the
   long side there, and the step's three lines have to sit inside the short
   one, which is what sizes the type here. */
@media (max-width: 560px) {
    .wcro-steps {
        --pst-w: 248px;
    }
    .wcro-steps .pst-title {
        font-size: 15px;
        line-height: 19px;
    }
    .wcro-steps .pst-rule {
        width: 22px;
        margin: 6px auto;
    }
    .wcro-steps .pst-body {
        font-size: 10px;
        line-height: 13px;
    }
}

/* ==========================================================================
   Website and CRO page -- "What we build on". Base rules are at the end of
   custome.css. The row rescales on --wct-w and wraps on its own once the
   cards no longer fit a line.
   ========================================================================== */
@media (max-width: 1199px) {
    .wcro-tech .wct-heading {
        font-size: 44px;
        line-height: 50px;
    }
}

@media (max-width: 991px) {
    .wcro-tech {
        --wct-w: 140px;
        padding: 70px 0;
    }
    .wcro-tech .wct-heading {
        font-size: 36px;
        line-height: 42px;
    }
    .wcro-tech .wct-note {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .wcro-tech {
        --wct-w: calc((100% - var(--wct-gap) * 2) / 3);
        padding: 50px 0;
    }
    .wcro-tech .wct-heading {
        font-size: 38px;
        line-height: 105%;
    }
      .wcro-tech .wct-note {
        font-size: 16px;
        line-height: 20px;
        color: #000000;
    }
}

/* ==========================================================================
   Analytics and tracking page -- the hero. Base rules are at the end of
   custome.css. The bar keeps its 18px height and 27px radius at every width;
   only the name column and the type step down, and below 767 the name sits
   above its own bar rather than squeezing it.
   ========================================================================== */
@media (max-width: 1199px) {
    .ant-hero .anh-heading {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (max-width: 991px) {
    .ant-hero {
        padding-top: 50px;
    }
    .ant-hero .anh-heading {
        font-size: 36px;
        line-height: 44px;
    }
    .ant-hero .anh-note {
        margin-bottom: 40px;
    }
    .ant-hero .anh-bar {
        grid-template-columns: 120px minmax(0, 1fr) 52px;
        gap: 14px;
    }
    .ant-hero .anh-value {
        font-size: 19px;
        line-height: 24px;
    }

    .ant-hero .anh-label {
            margin: 0 0 35px;
    }

    .ant-hero .anh-total-note {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

}

@media (max-width: 767px) {

    .ant-hero .anh-name {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
}

    .ant-hero .anh-panel {
    border-top: 1px solid #ffffff6e;
}

    .ant-hero .anh-label {
    margin: 0 0 30px;
    font-size: 15px;
    line-height: 16px;
}
     .ant-hero .anh-heading {
        font-size: 48px;
        line-height: 102%;
    }
    .ant-hero .anh-note {
               text-align: left;
        font-size: 16px;
        line-height: 145%;
    }
    .ant-hero .anh-bar {
        grid-template-columns: minmax(0, 1fr) 52px;
        row-gap: 15px;
    }
       .ant-hero .anh-value {
        font-size: 19px;
        line-height: 22px;
        color: #FE4601;
    }
    .ant-hero .anh-name {
        grid-column: 1 / -1;
    }
    .ant-hero .anh-total {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
    }
    .ant-hero .anh-total-value {
     font-size: 42px;
        line-height: 38px;
        color:#FE4601;
    }
}

/* ==========================================================================
   Analytics and tracking page -- "Three questions". Base rules are at the end
   of custome.css. The card keeps its 20px radius and its type at every width;
   the row folds to two and then one, and the layer block stacks.
   ========================================================================== */
@media (max-width: 1199px) {
    .anq-heading {
        font-size: 44px;
        line-height: 50px;
    }
    .ant-questions .anq-layer-title {
        font-size: 34px;
    }
    .ant-questions .anq-layer {
        gap: 30px;
        padding: 34px;
    }
}

@media (max-width: 991px) {
    .ant-questions {
        padding: 64px 0 70px;
    }
    .ant-questions .anq-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ant-questions .anq-layer {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
    .ant-questions .anq-title {
        font-size: 23px;
    }
    .ant-questions .anq-layer-title {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .anq-eyebrow {
        font-size: 20px;
        line-height: 20px;
    }
    .anq-heading {
        font-size: 38px;
        line-height: 36px;
            margin: 0 0 25px
    }
    .ant-questions {
        padding: 48px 0 54px;
    }
    .ant-questions .anq-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .ant-questions .anq-card {
        padding: 24px 22px 20px;
    }
    .ant-questions .anq-layer {
        padding: 26px 22px;
    }
    .ant-questions .anq-layer-title {
        font-size: 26px;
    }
    .ant-questions .anq-layer-lead {
        font-size: 16px;
    }
}

/* ==========================================================================
   Analytics and tracking page -- "100 real conversions". Base rules are at the
   end of custome.css. The dot field is laid out in percentages, so it simply
   gets shorter rather than scrolling; the heading steps down with its
   neighbours and below 600 the panel header stacks, the label above its own
   toggles, which is the only width where the two cannot share a line.
   ========================================================================== */
@media (max-width: 1199px) {
    .ant-loss .anl-body {
        min-height: 300px;
        padding: 18px;
    }
    .ant-loss .anl-field {
        top: 18px;
        right: 68px;
        bottom: 18px;
        left: 158px;
    }
    .ant-loss .anl-rows {
        min-height: 264px;
    }
}

@media (max-width: 991px) {
    .ant-loss {
        padding: 64px 0 70px;
    }
    .ant-loss .anl-panel-head,
    .ant-loss .anl-foot {
        padding: 14px 18px;
    }
    .ant-loss .anl-body {
        min-height: 260px;
    }
    .ant-loss .anl-rows {
        min-height: 224px;
    }
}

@media (max-width: 767px) {
    .ant-loss {
        padding: 48px 0 54px;
    }
    .ant-loss .anl-panel-title {
                font-size: 16px;
        line-height: 25px;
    }
    .ant-loss .anl-body {
        min-height: 220px;
        padding: 14px;
    }
    .ant-loss .anl-field {
        top: 14px;
        right: 56px;
        bottom: 14px;
        left: 112px;
    }
    .ant-loss .anl-rows {
        min-height: 192px;
    }
    .ant-loss .anl-row-name,
    .ant-loss .anl-row-loss {
        font-size: 14px;
        line-height: 14px;
    }
    .ant-loss .anl-foot-count {
        font-size: 24px;
        line-height: 28px;
    }
}

@media (max-width: 599px) {
    .ant-loss .anl-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
      .ant-loss .anl-toggle {
        padding: 9px 15px;
        font-size: 16px;
    }
}

/* ===== analytics and tracking: "the mistake everyone makes" ===== */
@media (max-width: 1199px) {
    .ant-mistake .anm-row {
        gap: 48px;
    }
    .ant-mistake .anm-heading {
        font-size: 50px;
        line-height: 58px;
    }
    .ant-mistake .anm-body {
        font-size: 20px;
        line-height: 30px;
    }
}

@media (max-width: 991px) {
    .ant-mistake {
        padding: 70px 0;
    }
    .ant-mistake .anm-row {
        display: block;
    }
    .ant-mistake .anm-reason {
        padding-top: 32px;
    }
    .ant-mistake .anm-heading {
        font-size: 42px;
        line-height: 50px;
    }
}

@media (max-width: 767px) {
    .ant-mistake {
        padding: 55px 0;
    }
    .ant-mistake .anm-claim {
        padding-left: 18px;
        border-left-width: 2px;
    }
    .ant-mistake .anm-label {
        margin-bottom: 12px;
        font-size: 22px;
        line-height: 22px;
    }
    .ant-mistake .anm-heading {
        font-size: 32px;
        line-height: 40px;
    }
    .ant-mistake .anm-body {
        margin-bottom: 20px;
        font-size: 17px;
        line-height: 27px;
    }
}

/* ===== analytics and tracking: "three people, three reports." ===== */
@media (max-width: 1199px) {
    .ant-reports .anr-row {
        gap: 20px;
    }
    .ant-reports .anr-card {
        padding: 24px 22px 0;
    }
    .ant-reports .anr-needs {
        font-size: 22px;
    }
    .ant-reports .anr-image {
        height: 200px;
    }
    .ant-reports .anr-cta {
        bottom: 14px;
    }
    .ant-reports .swy-cta {
        padding: 4px 4px 4px 14px;
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .ant-reports {
        padding: 70px 0;
    }
    .ant-reports .anr-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ant-reports {
        padding: 55px 0;
    }
    .ant-reports .anr-heading {
        margin-bottom: 32px;
    }
    .ant-reports .anr-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .ant-reports .anr-image {
        height: 230px;
    }
}

/* ===== analytics and tracking: "start with one question" ===== */
@media (max-width: 1399px) {
    .ant-audit .ana-heading {
        font-size: 66px;
        line-height: 68px;
        letter-spacing: -2.6px;
    }
}

@media (max-width: 1199px) {
    .ant-audit {
        padding: 90px 0;
    }
    .ant-audit .ana-heading {
        font-size: 54px;
        line-height: 56px;
        letter-spacing: -2px;
    }
    .ant-audit .ana-note {
        font-size: 17px;
        line-height: 27px;
    }
}

/* Below this the artwork has no room beside the copy, so it goes under it and
   keeps only the top of the crop. */
@media (max-width: 991px) {

    .social-hero .sch-note {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
}
    .ant-audit {
        padding: 70px 0 0;
    }
    .ant-audit .ana-art {
        position: static;
        display: block;
        width: 100%;
        margin: 48px auto 0;
    }
    .ant-audit .ana-text {
        max-width: none;
    }
}

@media (max-width: 767px) {

    .social-make .wmk-rule {
    margin: 6px auto;
}
    .ant-audit {
        padding: 55px 0 0;
                display: flex;
        flex-wrap: wrap-reverse;
    }
    .ant-audit .ana-heading {
    margin-bottom: 18px;
        font-size: 38px;
        line-height: 105%;
        letter-spacing: -1.2px;
    }
    .ant-audit .ana-note {
      margin-bottom: 28px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }
    .ant-audit .ana-cta {
            width: 210px;
        height: 44px;
        font-weight: 400;
        font-size: 14px;
        background: #754CDA;
        color: #fff;
    }
}


@media (max-width:360px){
        .social-hero .sch-title {
        /* font-size: 56px; */
    }

        .pa-decides .pdw-heading {
        font-size: 38px;
        line-height: 105%;
    }

     .pa-steps .pst-title {
        font-size: 20px;
        line-height: 28px;
    }

    .wcro-steps .pst-body{
        line-height: 100%;
    }
}
/* ==========================================================================
   Website and CRO page -- "We build" / "We improve" on a phone. Base rules
   are at the end of custome.css. The mock turns the four separate white
   cards into one white block with the rows inside it, counts 1..4 instead
   of 01..04, and centres the column's title and its line of copy. Nothing
   here runs above 560, so the two desktop columns are untouched.
   ========================================================================== */
@media (max-width: 560px) {
    .wcro-jobs .bsee-col {
        padding: 20px 14px;
    }
    .wcro-jobs .bsee-col-title {
        margin: 6px 0 12px;
        font-size: 32px;
        line-height: 28px;
        text-align: center;
    }
    .wcro-jobs .wcj-sub {
              margin-bottom: 14px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
    }
    /* One card for the whole list: the rows keep their own padding, so they
       still read as four, but the white ground is continuous. */
    .wcro-jobs .wcj-list {
        gap: 0;
        padding: 4px 2px;
        background: #ffffff;
        border-radius: 14px;
    }
    .wcro-jobs .wcj-item {
        align-items: flex-start;
        gap: 12px;
        padding: 12px 12px;
        background: transparent;
        border-radius: 0;
    }
    .wcro-jobs .wcj-zero {
        display: none;
    }
    .wcro-jobs .wcj-num {
               flex-basis: 22px;
        font-size: 38px;
        line-height: 40px;
    }
    .wcro-jobs .wcj-text {
             font-size: 16px;
        line-height: 20px;
    }
}

/* ==========================================================================
   Website and CRO page -- "What we build on" on a phone. Base rules are at
   the end of custome.css; the 767 step above wraps the six cards into two
   rows of three, which is not what the phone mock shows. Here the row stops
   wrapping and becomes the same full-bleed swipe rail the other sections on
   this page use: one line of artwork running off the right edge, the card a
   little larger than the wrapped grid allowed.
   ========================================================================== */
@media (max-width: 560px) {
    .wcro-tech .wct-row {
        position: relative;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        flex-wrap: nowrap;
        gap: 10px;
        padding: 0 0 6px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc(2.5vw + 12px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wcro-tech .wct-row::-webkit-scrollbar {
        display: none;
    }
    .wcro-tech .wct-card {
        flex: 0 0 132px;
        width: 132px;
        max-width: 132px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* ==========================================================================
   Analytics and tracking page -- "Three questions" on a phone. Base rules are
   at the end of custome.css. The three cards give way to three tabs and the
   layer below answers whichever one is on: the mock's grey panel, the head
   centred in it, the two paragraphs as white cards and the artwork closing
   it. The tab row runs off the right edge rather than wrapping, so two sit on
   the line as they do in the mock.
   ========================================================================== */
@media (max-width: 560px) {
    .ant-questions .anq-row {
        display: none;
    }
    .ant-questions .anq-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0 0 18px;
        padding: 0 0 4px;
        list-style: none;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ant-questions .anq-tabs::-webkit-scrollbar {
        display: none;
    }
    .ant-questions .anq-tab {
        border: 0;
        border-radius: 999px;
        padding: 11px 20px;
        background: #E7E7EA;
        font-weight: 600;
        font-size: 13px;
        line-height: 16px;
        white-space: nowrap;
        color: #1D1D1F;
    }
    .ant-questions .anq-tab.is-on {
        background: #7B3FE4;
        color: #ffffff;
    }
    .ant-questions .anq-layer {
        gap: 12px;
        background: #EDEDEF;
        border-radius: 16px;
        padding: 16px 12px;
        box-shadow: none;
    }
    .ant-questions .anq-layer-left {
        text-align: center;
    }
    .ant-questions .anq-layer-left .anq-label {
        margin-bottom: 8px;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.04em;
        text-transform: none;
        color: #6B7280;
    }
    .ant-questions .anq-layer-title {
        font-size: 22px;
        line-height: 24px;
    }
    /* The two paragraphs are cards of their own here, so the rule between
       them in the desktop layout is the gap instead. */
    .ant-questions .anq-layer-lead,
    .ant-questions .anq-layer-body {
              margin: 0;
        background: #ffffff;
        border-radius: 12px;
        padding: 14px 14px;
        font-size: 16px;
        line-height: 150%;
        color: #111;
    }
    .ant-questions .anq-layer-lead {
        margin-bottom: 12px;
        padding-bottom: 14px;
        border-bottom: 0;
    }
    .ant-questions .anq-build-label {
        display: inline;
        margin: 0 4px 0 0;
        font-weight: 600;
        font-size: 16px;
        line-height: 17px;
        letter-spacing: 0;
        text-transform: none;
    }
    .ant-questions .anq-build-label::after {
        content: ":";
    }
    .ant-questions .anq-shot {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
}

/* ==========================================================================
   Analytics and tracking page -- "Three people, three reports." on a phone.
   Base rules are at the end of custome.css. The stacked column becomes the
   same full-bleed swipe rail the other sections use: one card on the line,
   the next one showing at the edge, arrows under it.
   ========================================================================== */
@media (max-width: 560px) {
    .ant-reports .anr-row {
        position: relative;
        left: 50%;
        display: flex;
        grid-template-columns: none;
        width: 100vw;
        transform: translateX(-50%);
        gap: 14px;
        padding: 6px 0 10px;
        padding-left: calc(2.5vw + 12px);
        padding-right: calc(2.5vw + 12px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: calc(2.5vw + 12px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ant-reports .anr-row::-webkit-scrollbar {
        display: none;
    }
    .ant-reports .anr-card {
        flex: 0 0 276px;
        max-width: 276px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .ant-reports .anr-image {
        height: 200px;
    }
    .ant-reports .anr-nav-below {
        display: flex;
        justify-content: flex-end;
        margin-top: 26px;
    }
}

/* ==========================================================================
   Home page -- the hero's numbers panel. Base rules are at the end of
   custome.css. The three numbers keep their one line at every width; only
   the gap and the type step down, so the panel never wraps into a column.
   ========================================================================== */
@media (max-width: 991px) {
    .hero-stats {
        gap: 20px;
        padding: 20px 22px;
    }
    .hero-stats .hero-stat-num {
        font-size: 26px;
        line-height: 32px;
    }
}

@media (max-width: 560px) {
    .hero-stats {
        gap: 12px;
        padding: 16px 14px;
    }
    .hero-stats .hero-stat-num {
        font-size: 22px;
        line-height: 28px;
    }
    .hero-stats .hero-stat-label {
        font-size: 12px;
        line-height: 16px;
    }
    .hero-countries {
        margin-top: 12px;
        font-size: 12px;
        line-height: 16px;
    }
}

/* ==========================================================================
   Home page -- "Case Studies". Base rules are at the end of custome.css.
   The two columns hold until 991, where the artwork moves above the copy the
   way the phone mock draws it, and the logo row keeps scrolling at every
   width rather than wrapping.
   ========================================================================== */
@media (max-width: 1199px) {
    .wsc-cases .wsc-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 34px;
    }
    .wsc-cases .wsc-title {
        font-size: 28px;
        line-height: 38px;
    }
    .wsc-cases .wsc-logo {
        width: 148px;
        height: 104px;
    }
}

@media (max-width: 991px) {
    .wsc-cases .wsc-panel {
        padding: 30px 26px 26px;
    }
    .wsc-cases .wsc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    /* Artwork first, as the mock has it. */
    .wsc-cases .wsc-media {
        order: -1;
        aspect-ratio: 4 / 3;
    }
    .wsc-cases .wsc-eyebrow {
        font-size: 26px;
        line-height: 32px;
        text-align: center;
    }
}

@media (max-width: 560px) {

      .bh-quote br {
    display: none;
  }

    .sst-heading br {
    display: none;
  }
    .wsc-cases .wsc-media {
    width: 100%;
    height: 293px;
}
    .wsc-cases .wsc-panel {
        border-radius: 18px;
        padding: 22px 16px 18px;
    }
   .wsc-cases .wsc-eyebrow {
        margin-bottom: 40px;
        font-size: 46px;
        line-height: 28px;
    }
    .wsc-cases .wsc-grid {
        gap: 18px;
        margin-bottom: 22px;
    }
    .wsc-cases .wsc-media {
        border-radius: 20px;
    }
        .wsc-cases .wsc-title {
             margin-bottom: 15px;
        font-size: 33px;
        line-height: 105%;
        margin-top: 10px;
        max-width: 100%;
    }
        .wsc-cases .wsc-body {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 130%;
        font-weight: 400;
    }
       .wsc-cases .wsc-cta {
        padding: 10px 10px 10px 10px;
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 10px;
        gap: 10px;
    }
    .wsc-cases .wsc-cta .swy-cta-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
    .wsc-cases .wsc-logos {
        gap: 10px;
    }
    .wsc-cases .wsc-logo {
             width: 121px;
        height: 115px;
        border-radius: 10px;
    }
}

/* ======================================================================
   CASE STUDY — /case-study/<slug>
   The rail beside the page needs a column of its own; below 1199 there is
   not one, so it is dropped and the page runs full width. Everything else
   is the usual step down in type.
   ====================================================================== */

@media (max-width: 1199px) {
    .cs-body {
        display: block;
    }

    .cs-toc {
        display: none;
    }

    .cs-hero .csh-title {
        font-size: 44px;
        line-height: 52px;
    }

    .cs-hero .csh-stat-value {
        font-size: 34px;
        line-height: 42px;
    }
}

@media (max-width: 991px) {
    .cs-hero {
        padding-top: 32px;
    }

    .cs-hero .csh-title {
        font-size: 36px;
        line-height: 44px;
    }

    /* Two up, ruled off by a gap instead of the hairlines -- a border
       between wrapped cells lands in the wrong places. */
    .cs-hero .csh-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
        margin-top: 36px;
    }

    .cs-hero .csh-stat {
        padding: 0;
    }

    .cs-hero .csh-stat + .csh-stat {
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .cs-hero .csh-ident {
        gap: 14px;
        padding-bottom: 20px;
    }

    .cs-hero .csh-title {
        font-size: 27px;
        line-height: 34px;
    }

    .cs-hero .csh-intro {
        margin-top: 14px;
        font-size: 13px;
        line-height: 21px;
    }

    .cs-hero .csh-media {
        margin-top: 22px;
        border-radius: 14px;
    }

    .cs-hero .csh-play {
        width: 54px;
        height: 54px;
    }

    .cs-hero .csh-stats {
        gap: 20px 14px;
        margin-top: 26px;
    }

    .cs-hero .csh-stat-value {
        font-size: 26px;
        line-height: 32px;
    }

    .cs-hero .csh-stat-label {
        font-size: 12px;
        line-height: 17px;
    }
}

/* ==========================================================================
   CASE STUDY SECTIONS — narrower steps. The side rail is already dropped at
   1199 in the block above, so from here the sections have the full width and
   only their own grids need to give way.
   ========================================================================== */

@media (max-width: 1199px) {
    .cs-main .cs-section {
        padding-top: 64px;
    }

    .cs-main .csd-title {
        font-size: 34px;
        line-height: 42px;
    }

    /* The split head stacks: at this width the paragraph set against the
       heading is narrower than its own lines. */
    .cs-main .cs-head-split {
        display: block;
    }

    .cs-main .cs-head-split .csd-intro {
        margin-top: 16px;
        text-align: left;
    }

    .cs-problem .csp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Three columns rather than four: the fourth is only there to keep a
       short row from stretching, and there is no room for it here. */
    .cs-approach .csa-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cs-teams {
        margin-top: 64px;
    }

    .cs-landed {
        margin-top: 64px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .cs-ran .csr-card {
        border-radius: 22px;
    }

    .cs-ran .csr-eyebrow {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .cs-ran .csr-card-title {
        font-size: 21px;
        margin-bottom: 10px;
    }

    .cs-ran .csr-card-desc {
        font-size: 14px;
        line-height: 22px;
    }

    .cs-ran .csr-num {
        font-size: 52px;
    }
}

@media (max-width: 991px) {
    .cs-motion .csm-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-motion .csm-tile:first-child {
        grid-row: auto;
    }

    .cs-motion .csm-frame,
    .cs-motion .csm-tile:first-child .csm-frame {
        width: auto;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .cs-approach .csa-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-main .csd-title {
        font-size: 29px;
        line-height: 37px;
    }

    .cs-landed .csl-value {
        font-size: 34px;
    }

    .cs-ran .csr-eyebrow {
        font-size: 14px;
    }

    .cs-ran .csr-card-title {
        font-size: 18px;
    }

    .cs-ran .csr-card-desc {
        font-size: 13px;
        line-height: 20px;
    }

    .cs-ran .csr-num {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .cs-work .csw-row {
        --csw-h: 340px;
        --csw-w: 153px;
    }

    .cs-approach .csa-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .cs-main .cs-section {
        padding-top: 48px;
    }

    .cs-main .csd-title {
        font-size: 25px;
        line-height: 33px;
    }

    .cs-main .csd-eyebrow {
        font-size: 11.5px;
        letter-spacing: 1.4px;
    }

    .cs-main .csd-intro {
        font-size: 15px;
        line-height: 26px;
        font-weight: 400;
    }

    .cs-motion .csm-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cs-motion .csm-play {
        width: 44px;
        height: 44px;
    }

    .cs-motion .csm-play-ico {
        margin-left: 3px;
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 12px;
    }

    .cs-problem .csp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cs-work .csw-row {
        --csw-h: 230px;
        --csw-w: 104px;
        --csw-gap: 8px;
    }

    .cs-work .csw-tall,
    .cs-work .csw-half {
        border-radius: 10px;
    }

    .cs-teams {
        margin-top: 48px;
    }

    .cs-landed {
        margin-top: 48px;
        padding: 52px 16px 56px;
        border-radius: 20px;
    }

    /* Half a phone is too narrow to hold readable copy, so the card grows
       taller and the words take the full width over a scrim instead of
       sharing the row with the picture. */
    .cs-ran .csr-card,
    .cs-ran .csr-card.is-flipped {
        aspect-ratio: auto;
        align-items: flex-start;
        justify-content: flex-start;
        min-height: 360px;
        padding: 30px 0;
        border-radius: 18px;
    }

    .cs-ran .csr-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(10, 6, 26, .5) 0%, rgba(10, 6, 26, .28) 48%, rgba(10, 6, 26, 0) 75%);
        pointer-events: none;
    }

    .cs-ran .csr-card-body,
    .cs-ran .csr-card.is-flipped .csr-card-body {
        width: 100%;
        padding-left: 22px;
        padding-right: 22px;
    }

    .cs-ran .csr-num,
    .cs-ran .csr-card.is-flipped .csr-num {
        top: auto;
        bottom: 18px;
        left: auto;
        right: 22px;
        font-size: 34px;
    }

    .cs-landed .csl-flow {
        flex-direction: column;
        align-items: center;
    }

    /* The chain reads downwards here, so its arrows turn with it. */
    .cs-landed .csl-arrow svg {
        transform: rotate(90deg);
    }

    .cs-landed .csl-stat {
        min-width: 0;
        flex: 1 1 140px;
    }

    .cs-landed .csl-value {
        font-size: 28px;
    }
}

/* --- HOME / WHAT WE BUILD IT FOR: the rewritten copy block --------------- */

@media (max-width: 1239px) {
    .builditfor-section .builditfor-heading {
        font-size: 36px;
        line-height: 43px;
        margin-bottom: 26px;
    }

    .builditfor-section .builditfor-copy .builditfor-desc {
        font-size: 16px;
        line-height: 25px;
    }
}

@media (max-width: 767px) {
    .builditfor-section .builditfor-heading {
        font-size: 30px;
        line-height: 37px;
        margin-bottom: 20px;
    }

    .builditfor-section .builditfor-copy .builditfor-desc {
        font-size: 15px;
        line-height: 24px;
    }

    .builditfor-section .builditfor-cta {
        margin-top: 20px;
        padding: 11px 22px;
        font-size: 14px;
    }
}