/* =========================================================
   Responsive toggles (non-media defaults)
   ========================================================= */

/* Default: hamburger hidden everywhere unless a media hits */
header .bt-menu.only-tablet{
    display: none !important;
}

/* Default line visibility */
.lines.only-desktop { display: block !important; }
.lines.only-tablet  { display: none  !important; }

/* Footer lines: show on ALL sizes */
footer.site-footer .lines.only-desktop,
footer.site-footer .lines.only-tablet {
    display: block !important;
}

/* Global horizontal gutters */
:root{
    --page-gutter: 48px;
}
@media (max-width: 1200px){
    :root{ --page-gutter: 32px; }
}
@media (max-width: 1024px){
    :root{ --page-gutter: 24px; }
}
@media (max-width: 768px){
    :root{ --page-gutter: 24px; }
}
@media (max-width: 640px){
    :root{ --page-gutter: 18px; }
}
@media (max-width: 480px){
    :root{ --page-gutter: 12px; }
}

@media (max-width: 1200px){
    header{
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }
    footer.site-footer{
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }
}

/* 1200px down to 640px: keep 48px gutters on content only */
@media (max-width: 1200px){
    /* Unified page rails: every home section uses the same gutter as nav */
    body.page-template-page-home #home > section,
    body.page-template-page-home-php #home > section{
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box !important;
    }

    /* Any section wrappers that were using --content-pad now inherit unified rails */
    body.page-template-page-home #home :is(.approach, .brands, .home-services, .case, .press, .tf-contact),
    body.page-template-page-home-php #home :is(.approach, .brands, .home-services, .case, .press, .tf-contact){
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-home #home .presents,
    body.page-template-page-home-php #home .presents{
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box !important;
    }
    body.page-template-page-home #home .presents figure.big-logo,
    body.page-template-page-home-php #home .presents figure.big-logo{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body main section > :not(svg):not(figure):not(.lines):not(.ir-divider):not(.ir-divider--full){
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hero intro copy + video alignment */
    body.page-template-page-home #home .presents > p,
    body.page-template-page-home-php #home .presents > p{
        width: 80% !important;
        max-width: 80% !important;
        margin-right: auto !important;
        text-align: left !important;
    }
    body.page-template-page-home #home .presents .video-container,
    body.page-template-page-home-php #home .presents .video-container{
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Home "Call us for": align to the same content rails as nav/video */
    body.page-template-page-home .home-services,
    body.page-template-page-home-php .home-services,
    body.page-template-page-services #services > .services,
    body.page-template-page-services-php #services > .services,
    body.page-template-page-services #services > .case,
    body.page-template-page-services-php #services > .case,
    body.page-template-page-services #services > .tf-contact,
    body.page-template-page-services-php #services > .tf-contact{
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
        box-sizing: border-box !important;
    }
    body.page-template-page-home .home-services .services-container,
    body.page-template-page-home-php .home-services .services-container,
    body.page-template-page-services #services > .services .services-container,
    body.page-template-page-services-php #services > .services .services-container{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 36px 0 !important;
        padding: 0 !important;
        gap: var(--page-gutter) !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    /* Keep approach text readable around the decorative triangle at 1200/1024 bands */
    body.page-template-page-home #home #approach :is(h2, p, a),
    body.page-template-page-home-php #home #approach :is(h2, p, a){
        position: relative;
        z-index: 2;
    }
    body.page-template-page-home #home #approach p,
    body.page-template-page-home-php #home #approach p{
        width: min(32.5rem, 100%) !important;
        max-width: 32.5rem !important;
    }
    body.page-template-page-home #home #approach figure.triangle,
    body.page-template-page-home-php #home #approach figure.triangle{
        left: auto !important;
        right: max(-64px, -4vw) !important;
        width: clamp(280px, 34vw, 420px) !important;
        z-index: 1 !important;
    }

    /* Kill switch for theme-injected card spacing in this range */
    body.page-template-page-home #home section#call_us_for.home-services .services-container,
    body.page-template-page-home-php #home section#call_us_for.home-services .services-container,
    body.page-template-page-services #services > .services .services-container,
    body.page-template-page-services-php #services > .services .services-container{
        margin: 0 0 36px 0 !important;
        padding: 0 !important;
    }
    body.page-template-page-home #home section#call_us_for.home-services .services-container > .service-box,
    body.page-template-page-home-php #home section#call_us_for.home-services .services-container > .service-box,
    body.page-template-page-services #services > .services .services-container > .service-box,
    body.page-template-page-services-php #services > .services .services-container > .service-box{
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        justify-self: stretch !important;
    }
}

/* Typeform embed (responsive, capped) */
body.page-template-page-home main [data-tf-live],
body.page-template-page-home-php main [data-tf-live],
body.page-template-page-services main [data-tf-live],
body.page-template-page-services-php main [data-tf-live]{
    margin: 0 auto 0 !important;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

body.page-template-page-home main [data-tf-live] iframe,
body.page-template-page-home-php main [data-tf-live] iframe,
body.page-template-page-services main [data-tf-live] iframe,
body.page-template-page-services-php main [data-tf-live] iframe{
    width: 100% !important;
    height: 100% !important;
}

/* HARD STOP: kill any theme/typeform inline sizing that can collapse it */
body.page-template-page-home main [data-tf-live] > *,
body.page-template-page-home-php main [data-tf-live] > *,
body.page-template-page-services main [data-tf-live] > *,
body.page-template-page-services-php main [data-tf-live] > *{
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

/* prevent responsive squish (EXCEPT hero big-logo, stays responsive) */
body.page-template-page-home #home figure.globe img,
body.page-template-page-home-php #home figure.globe img,
body.page-template-page-home #home figure.triangle img,
body.page-template-page-home-php #home figure.triangle img,
body.page-template-page-home #home figure.r img,
body.page-template-page-home-php #home figure.r img,
body.page-template-page-home #home figure.n img,
body.page-template-page-home-php #home figure.n img {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    display: block;
}

/* Big Logo */
body.page-template-page-home .presents figure.big-logo,
body.page-template-page-home-php .presents figure.big-logo {
    width: min(91vw, 470px) !important;
    max-width: 470px !important;
    margin-right: 0 !important;
}

body.page-template-page-home #home .presents figure.big-logo img,
body.page-template-page-home-php #home .presents figure.big-logo img{
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* =========================================================
   1200px+
   ========================================================= */
@media (min-width: 1201px) {
    /* Desktop-only: keep Approach aligned to nav content rails */
    body.page-template-page-home #home #approach,
    body.page-template-page-home-php #home #approach{
        width: 91vw !important;
        max-width: 66.666666rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
    }

    body.page-template-page-home #home #approach :is(h2, p, a),
    body.page-template-page-home-php #home #approach :is(h2, p, a){
        margin-left: 0 !important;
        z-index: 2;
    }

    body.page-template-page-home #home #approach figure.triangle,
    body.page-template-page-home-php #home #approach figure.triangle{
        left: auto !important;
        right: 0 !important;
        top: -3rem !important;
        width: clamp(320px, 30vw, 460px) !important;
        height: auto !important;
        z-index: 1 !important;
        transform: none !important;
    }

    .case-carousel{
        /* padding: 0 32px; */
    }

    .services-container.services-cards--home {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--content-max);
    }

    .services-cards .service-box {
        height: auto !important;
        min-height: 500px !important;
        padding: 18px;
    }

    .services-cards .service-title {
        margin:  0 0 0 8px;
        /* font-size: 20px; */
        /* line-height: 1.1; */
    }

    .services-cards .svg-figures {
        padding-top: 18px;
        gap: 8px;
        margin: 0;
    }

    .services-cards .svg-figures figure {
        width: 40px;
        height: 40px;
        padding: 6px;
        margin: 0;
    }

    .services-cards .service-description {
        margin-top: 16px;
        padding-top: 16px;
        font-size: 16px
    }
}

/* =========================================================
   1200px
   ========================================================= */
@media (max-width: 1200px) {
    body.page-template-page-home #home a[href="#approach"],
    body.page-template-page-home-php #home a[href="#approach"]{
        /* margin: -120px 0 160px; */
    }

    .case-carousel{
        /* padding: 0 24px; */
    }


    /* Your existing services grid stays here (unchanged behavior) */
    .services-cards.services-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--page-gutter) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }

    .services-cards .service-box {
        height: var(--equal-height, auto) !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        margin: 0 !important;
        inline-size: 100% !important;
        min-width: 0 !important;
        padding: 20px;
    }

    .services-cards .service-title {
        font-size: clamp(36px, 2.24vw, 22px) !important;
        margin: 14px 14px 0 !important;
    }

    .services-cards .svg-figures {
        padding-top: 20px !important;
        gap: 10px !important;
    }

    .services-cards .svg-figures figure {
        width: 48px;
        height: 48px;
        padding: 8px;
    }

    .services-cards .service-description {
        font-size: clamp(20px, 1.8vw, 17px) !important;
        margin-top: 18px !important;
        /* padding-top: 18px !important; */
    }

}

/* =========================================================
   1024px
   ========================================================= */
@media (max-width: 1024px) {
    #services .custom-service-box { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    .custom-service-box { flex-direction: column; text-align: center; padding: 20px; }
    .custom-service-box__left, .custom-service-box__right { width: 80%; margin: 0; }
    .custom-service-box__left { margin: 20px 0; }
    .custom-service-box__title { font-size: 80px; line-height: 1.1; }
    .custom-service-box__tagline { font-size: 20px; line-height: 1.4; }
    .custom-service-box img { margin-top: 0; max-width: 50%; margin-left: 0; }
    .services-cards .service-box{
        height: var(--equal-height, auto) !important;
        max-height: none !important;
    }
    body.page-template-page-home #home .presents > p,
    body.page-template-page-home-php #home .presents > p{
        width: 78% !important;
        max-width: 78% !important;
    }
}

@media (max-width: 900px) {
    body.page-template-page-home #home .presents > p,
    body.page-template-page-home-php #home .presents > p{
        width: 90% !important;
        max-width: 90% !important;
    }
}


/* =========================================================
   768px
   ========================================================= */
@media (max-width: 768px) {
    .lines.only-desktop { display: none !important; }
    .lines.only-tablet  { display: block !important; }

    body.page-template-page-home #home a[href="#approach"],
    body.page-template-page-home-php #home a[href="#approach"]{
        /* margin: -90px 0 120px; */
    }

    body.page-template-page-home #home :is(.approach h2, .brands h2, .home-services h2, .case h2, .press h2, .tf-contact h2),
    body.page-template-page-home-php #home :is(.approach h2, .brands h2, .home-services h2, .case h2, .press h2, .tf-contact h2),
    body.page-template-page-services #services .case h2,
    body.page-template-page-services-php #services .case h2{
        margin-bottom: 30px;
        line-height: 1.18 !important;

    }

    body.page-template-page-home .case .case-carousel__header h2,
    body.page-template-page-home-php .case .case-carousel__header h2,
    body.page-template-page-services .case .case-carousel__header h2,
    body.page-template-page-services-php .case .case-carousel__header h2{
        margin-bottom: 0;
    }

    .case-nav{ display: none !important; }
    .case-card{ flex: 0 0 78%; scroll-snap-align: center; }

    .social a {
        flex: 0 0 35%;
        max-width: 40%;
        text-align: center;
    }

    .contact-row {
        flex-direction: column;
        gap: 20px;
    }

    .service-box {
        height: auto !important;
        grid-template-rows: auto auto 1fr;
        padding: 16px;
    }
    body.page-template-page-home #home .presents > p,
    body.page-template-page-home-php #home .presents > p{
        width: 100% !important;
        max-width: 100% !important;
    }
    .services-cards.services-container{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--page-gutter) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-items: stretch !important;
        align-items: stretch !important;
    }
    .services-cards .service-box{
        height: var(--equal-height, auto) !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        margin: 0 !important;
        inline-size: 100% !important;
        min-width: 0 !important;
    }

    .service-title {
        font-size: 1.26em;
        margin: 12px 0;
    }

    .svg-figures {
        padding-top: 12px;
        gap: 8px;
    }

    .service-description { padding-top: 24px; }

    .services-container {
        grid-template-columns: 1fr !important;
        margin: 60px var(--page-gutter);
        gap: 16px;
    }

    .cta-button-services {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 48px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    .case-study-item {
        flex: 1 1 calc(50% - 40px);
        max-width: calc(50% - 40px);
    }

    .post .content { padding: 1.5rem 1rem; }
    .post .content h2 { font-size: 24px; }
    .post .content h3 { font-size: 20px; }
    .post .content p  { font-size: 16px; }
}

/* =========================================================
   640px (MOBILE)
   ========================================================= */
@media (max-width: 640px) {

    /* -----------------------------------------
       1) HARD STOP horizontal overflow
       ----------------------------------------- */
    html, body{
        max-width: 100%;
        overflow-x: clip;
    }
    @supports not (overflow-x: clip){
        html, body{ overflow-x: hidden; }
    }

    /* -----------------------------------------
       2) LINES: desktop OFF, tablet layer ON (also on mobile)
       IMPORTANT: reuse theme's native tablet line animation.
       ----------------------------------------- */
    .lines.only-desktop{
        display: none !important;
    }
    .lines.only-mobile{
        display: none !important;
    }
    .lines.only-tablet{
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    body.page-template-page-home #home .lines.only-tablet,
    body.page-template-page-home-php #home .lines.only-tablet{
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .case-card__kpiText{font-size: 20px;}
    .case-carousel__header{ align-items: flex-start; }
    .case-card{ flex: 0 0 88%; min-height: 560px; }
    .case-card__kpi{ font-size: clamp(36px, 9vw, 48px); }

    /* Case Studies: tighten card title + CTA on mobile */
    .case-card__title{
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
    .case-card__cta{
        min-height: 38px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    /* -----------------------------------------
       3) HEADER + HAMBURGER + FULLSCREEN MENU
       ----------------------------------------- */

    /* Kill any theme toggles that conflict with YOUR burger */
    header :is(.menu-toggle, .nav-toggle, .hamburger, .toggle, button.menu-toggle, a.menu-toggle){
        display: none !important;
    }

    /* Make header thin + stable */
    header{
        height: auto !important;
        min-height: 0 !important;
        padding: 10px var(--page-gutter) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        line-height: 1 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* When scrolled (homepage only) */
    body.home-header-logo-visible header{
        background: #ffffff !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    }
    /* Non-home pages: always solid on mobile */
    body:not(.page-template-page-home):not(.page-template-page-home-php):not(.home) header{
        background: #ffffff !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    }

    /* Logo pill */
    header .logo{
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
    }

    /* Home template hides logo at top — allow it when menu is open */
    body.page-template-page-home header.open-menu .logo,
    body.page-template-page-home-php header.open-menu .logo{
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }
    header.open-menu .logo{
        position: fixed !important;
        top: 10px !important;
        left: var(--page-gutter) !important;
        z-index: 10002 !important;
        opacity: 1 !important;
    }
    header.open-menu .logo svg{
        fill: #fff !important;
    }

    header .bt-circle.bt-menu.only-tablet{
        display: inline-flex !important;

        width: 44px !important;
        height: 44px !important;
        border-radius: 999px !important;

        position: relative !important;
        z-index: 10001 !important;
        cursor: pointer !important;

        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;
    }

    /* Kill theme rings/pseudos */
    header .bt-circle.bt-menu.only-tablet::before,
    header .bt-circle.bt-menu.only-tablet::after{
        content: none !important;
        display: none !important;
    }

    /* Force the 3 lines (spans) to render properly */
    header .bt-circle.bt-menu.only-tablet span{
        display: block !important;
        opacity: 1 !important;

        position: absolute !important;
        left: 50% !important;
        top: 50% !important;

        width: 26px !important;
        height: 3px !important;
        margin: 0 !important;

        background: #313451 !important;
        border-radius: 999px !important;

        transform: translate(-50%, -50%) !important;
        transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease !important;
    }
    header .bt-circle.bt-menu.only-tablet span:nth-child(1){
        transform: translate(-50%, calc(-50% - 7px)) !important;
    }
    header .bt-circle.bt-menu.only-tablet span:nth-child(2){
        transform: translate(-50%, -50%) !important;
    }
    header .bt-circle.bt-menu.only-tablet span:nth-child(3){
        transform: translate(-50%, calc(-50% + 7px)) !important;
    }

    /* Open state = X, pinned top-right */
    header.open-menu .bt-circle.bt-menu.only-tablet{
        background: #ffffff !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;

        position: fixed !important;
        top: 10px !important;
        right: var(--page-gutter) !important;
        z-index: 10003 !important;
    }
    header.open-menu .bt-circle.bt-menu.only-tablet span:nth-child(1){
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }
    header.open-menu .bt-circle.bt-menu.only-tablet span:nth-child(2){
        opacity: 0 !important;
    }
    header.open-menu .bt-circle.bt-menu.only-tablet span:nth-child(3){
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    /* Fullscreen overlay nav */
    header > nav{
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;

        /* CLOSED */
        height: 0 !important;
        overflow: hidden !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        gap: clamp(24px, 4.2vh, 44px) !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #313451 !important;
        background-image: url("../img/bg-menu.png") !important;
        background-size: 100vw 100vh !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        z-index: 10000 !important;
        pointer-events: none !important;
    }

    header.open-menu > nav{
        height: 100vh !important;
        pointer-events: auto !important;
    }

    header > nav a{
        pointer-events: auto !important;
        white-space: nowrap !important;

        font-size: clamp(22px, 6vw, 34px) !important;
        line-height: 1.1 !important;

        color: #fff !important;
        font-weight: 600 !important;
        text-decoration: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    header > nav a.cta-lets-talk{
        font-size: clamp(18px, 5vw, 30px) !important;
        padding: 16px !important;

    }

    header > nav a:hover,
    header > nav a:focus-visible{
        opacity: 0.85 !important;
        transform: translateY(-1px) !important;
    }

    /* -----------------------------------------
       4) TYPEFORM: fix “small/weird” on mobile
       ----------------------------------------- */
    body.page-template-page-home main [data-tf-live],
    body.page-template-page-home-php main [data-tf-live],
    body.page-template-page-services main [data-tf-live],
    body.page-template-page-services-php main [data-tf-live]{
        width: calc(100% - 32px) !important;
        max-width: 520px !important;
        /* margin: 64px auto 0 !important; */
        aspect-ratio: 4 / 6 !important; /* taller on mobile */
        border-radius: 16px;
        overflow: hidden;
    }

    body.page-template-page-home main [data-tf-live] iframe,
    body.page-template-page-home-php main [data-tf-live] iframe,
    body.page-template-page-services main [data-tf-live] iframe,
    body.page-template-page-services-php main [data-tf-live] iframe{
        width: 100% !important;
        height: 100% !important;
        border-radius: 16px;
    }

    /* -----------------------------------------
       5) HOME HERO containment + big-logo
       ----------------------------------------- */
    body.page-template-page-home #home,
    body.page-template-page-home-php #home{
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative !important;
        align-self: center !important;

    }

    body.page-template-page-home .presents figure.big-logo,
    body.page-template-page-home-php .presents figure.big-logo {

        /* align-self: center !important; */
        margin-left: 36px !important;

    }


    /* Reduce side margins on mobile for more content width */
    main section{
        /* width: calc(100% - 36px) !important; */
        max-width: 100% !important;
        margin-left: var(--page-gutter) !important;
        margin-right: var(--page-gutter) !important;
    }

    /* Blog: add right padding to match left gutter */
    #blog{
        padding-right: var(--page-gutter) !important;
        padding-left: var(--page-gutter) !important;
        box-sizing: border-box;
    }
    /* Blog: override 100vw posts width so right gutter matches left */
    #blog .posts,
    #blog .ajax-load-more-wrap,
    #blog .alm-listing{
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Approach: add extra left breathing room to match above */
    body.page-template-page-home #home #approach,
    body.page-template-page-home-php #home #approach{
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
        margin-top: 56px !important;
    }

    /* Approach: larger type + full-width feel */
    body.page-template-page-home #home #approach h2,
    body.page-template-page-home-php #home #approach h2{
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
    body.page-template-page-home #home #approach p,
    body.page-template-page-home-php #home #approach p{
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    body.page-template-page-home #home .presents,
    body.page-template-page-home-php #home .presents{
        padding: 0 !important;
        box-sizing: border-box;
        width: calc(100% - (var(--page-gutter) * 2)) !important;
        max-width: none !important;
        margin-left: var(--page-gutter) !important;
        margin-right: var(--page-gutter) !important;
    }

    body.page-template-page-home #home .presents figure.big-logo,
    body.page-template-page-home-php #home .presents figure.big-logo{
        width: 100% !important;
        max-width: 400px !important;
        margin: 130px auto 14px !important;
    }

    body.page-template-page-home #home .presents figure.big-logo img,
    body.page-template-page-home-php #home .presents figure.big-logo img{
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    body.page-template-page-home #home .presents p,
    body.page-template-page-home-php #home .presents p{
        line-height: 1.8 !important;
        margin: 48px 0 !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Services page: full-bleed "what we do" box */
    body.page-template-page-services #services .custom-service-box{
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        border-radius: 0 !important;
    }

    /* Services page: shrink the heading below the box */
    body.page-template-page-services #services .services > h2.custom-heading{
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    /* Services page: cards should grow with content */
    body.page-template-page-services .services .service-box{
        height: auto !important;
        max-height: none !important;
    }
    body.page-template-page-services .services .svg-figures{
        padding-top: 12px !important;
    }
    body.page-template-page-services .services .service-description{
        margin-top: 16px !important;
        padding-top: 16px !important;
    }

    body main section > :not(svg):not(figure):not(.lines):not(.ir-divider):not(.ir-divider--full){
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }


    /* Service titles: 50% size on mobile */
    .service-title,
    .home-services .service-title,
    .services-cards .service-title{
        font-size: 36px !important;
    }

    /* Call us for titles: restore prior mobile size */
    {
        font-size: 1.26em !important;
    }


    /* Home hero: tighten space above arrow + below "Learn How" (mobile only) */
    /* body.page-template-page-home #home .presents .ir-divider, */
    /* body.page-template-page-home-php #home .presents .ir-divider{ */
    /*     margin-top: 48px !important; */
    /*     margin-bottom: 22px !important; */
    /* } */

    /* body.page-template-page-home #home > .ir-divider, */
    /* body.page-template-page-home-php #home > .ir-divider{ */
    /*     margin-top: 48px !important; */
    /*     margin-bottom: 32px !important; */
    /* } */

    /* Video rounding on mobile */
    .video-container{
        width: 100% !important;
        max-width: none !important;
        margin: 18px 0 0 !important;
        border-radius: 16px;
    }

    body.page-template-page-home #home #approach,
    body.page-template-page-home-php #home #approach{
        width: calc(100% - (var(--page-gutter) * 2)) !important;
        max-width: none !important;
        margin-left: var(--page-gutter) !important;
        margin-right: var(--page-gutter) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    .video-container iframe,
    .video-container video{
        border-radius: 16px;
    }
    .video-mute-toggle{
        right: 10px;
        bottom: 10px;
        padding: 12px 14px;
        font-size: 26px;
    }

    /* Footer: stack + wrap on mobile */
    footer.site-footer{
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        padding: 24px 16px !important;
        text-align: center !important;
    }

    footer.site-footer .footer-social.social{
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    footer.site-footer .footer-links,
    footer.site-footer .footer-menu,
    footer.site-footer .footer-nav{
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    footer.site-footer p,
    footer.site-footer a{
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* -----------------------------------------
       6) FLOATERS: behind content, sized/anchored
       ----------------------------------------- */
    body.page-template-page-home #home :is(figure.globe, figure.triangle, figure.r, figure.n),
    body.page-template-page-home-php #home :is(figure.globe, figure.triangle, figure.r, figure.n){
        z-index: 0 !important;
        opacity: 0.5 !important;
        pointer-events: none !important;
    }

    body.page-template-page-home #home :is(.brands h2, .brands p, .brands .logos, .approach h2, .approach p, .case h2, .case .box, .press h2, .press .logos),
    body.page-template-page-home-php #home :is(.brands h2, .brands p, .brands .logos, .approach h2, .approach p, .case h2, .case .box, .press h2, .press .logos){
        position: relative;
        z-index: 2 !important;
    }

    /* Globe */
    body.page-template-page-home #home .brands figure.globe,
    body.page-template-page-home-php #home .brands figure.globe{
        width: clamp(220px, 62vw, 320px) !important;
        height: auto !important;
        right: -10vw !important;
        top: -10vw !important;
        left: auto !important;
        transform: none !important;
    }
    body.page-template-page-home #home .brands figure.globe img,
    body.page-template-page-home-php #home .brands figure.globe img{
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Triangle */
    body.page-template-page-home #home .approach figure.triangle,
    body.page-template-page-home-php #home .approach figure.triangle{
        width: clamp(180px, 52vw, 260px) !important;
        height: auto !important;
        top: -22vw !important;
        left: -6vw !important;
        transform: none !important;
        opacity: 0.55 !important;
    }
    body.page-template-page-home #home .approach figure.triangle img,
    body.page-template-page-home-php #home .approach figure.triangle img{
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Hide triangles on mobile */
    body.page-template-page-home #home figure.triangle,
    body.page-template-page-home-php #home figure.triangle{
        display: none !important;
    }

    /* Safety: hide any triangle figure on mobile */
    figure.triangle{
        display: none !important;
    }

    /* R */
    body.page-template-page-home #home .case figure.r,
    body.page-template-page-home-php #home .case figure.r,
    body.page-template-page-services #services .case figure.r,
    body.page-template-page-services-php #services .case figure.r{
        width: clamp(220px, 62vw, 360px) !important;
        height: auto !important;
        left: -18vw !important;
        top: -28vw !important;
        transform: rotate(-10deg) !important;
        opacity: 0.55 !important;
    }
    body.page-template-page-home #home .case figure.r img,
    body.page-template-page-home-php #home .case figure.r img,
    body.page-template-page-services #services .case figure.r img,
    body.page-template-page-services-php #services .case figure.r img{
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* N */
    body.page-template-page-home #home .press figure.n,
    body.page-template-page-home-php #home .press figure.n{
        display: block !important;
        width: clamp(180px, 52vw, 280px) !important;
        height: auto !important;
        right: -10vw !important;
        left: auto !important;
        bottom: -18vw !important;
        opacity: 0.45 !important;
    }
    body.page-template-page-home #home .press figure.n img,
    body.page-template-page-home-php #home .press figure.n img{
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* -----------------------------------------
       7) BRANDS / PRESS logos: 2-col grid
       ----------------------------------------- */
    .brands .logos,
    .press .logos{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .brands .logos figure img{
        max-width: 80%;
        margin-inline: auto;
    }

    /* Brands logos: 2 cols x 3 rows + breathing room */
    .brands .logos{
        margin: 20px 0 !important;
    }
    .press .logos{
        margin: 20px 0 !important;
    }
    .brands .logos figure{
        width: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
    }
    .press .logos figure{
        width: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
    }

    /* Press section: reduce vertical whitespace */
    .press{
        margin-top: 48px !important;
    }
    .press h2{
        margin-bottom: 8px !important;
    }
    .press p{
        margin-top: 12px !important;
    }

    .press .logos figure img{
        max-width: 72%;
        margin-inline: auto;
    }

    /* Press top awards: slightly smaller on mobile */
    body.page-template-page-home #home .press .top-agencies-row,
    body.page-template-page-home-php #home .press .top-agencies-row{
        gap: 176px !important;
    }
    body.page-template-page-home #home .press .top-agencies-row .top-agency-figure,
    body.page-template-page-home-php #home .press .top-agencies-row .top-agency-figure,
    body.page-template-page-home #home .press .top-agencies-row .top-agency-img,
    body.page-template-page-home-php #home .press .top-agencies-row .top-agency-img,
    body.page-template-page-home #home .press .top-agencies-row .other-logo figure,
    body.page-template-page-home-php #home .press .top-agencies-row .other-logo figure{
        width: 120px !important;
        max-width: 120px !important;
    }
    /* -----------------------------------------
       8) CALL US FOR: mobile stack + tighter buttons
       ----------------------------------------- */
    .services-cards.services-container{
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        gap: 16px !important;
    }

    .home-services-actions{
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(14px, 3vw, 22px) !important;
        padding: 0 var(--page-gutter) !important;
        margin-top: 18px !important;
    }

    .home-services-actions > a{
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .home-services-view-more{
        font-size: 20px !important;
        line-height: 1.1 !important;
        padding: 8px 10px !important;
        gap: 10px !important;
    }

    .home-services-proposal-btn{
        width: auto !important;
        max-width: none !important;
        min-width: 220px !important;
        padding: 16px 28px !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    /* -----------------------------------------
       9) MOBILE POLISH: rhythm + consistency
       ----------------------------------------- */
    body.page-template-page-home #home a[href="#approach"],
    body.page-template-page-home-php #home a[href="#approach"]{
        /* margin: 8px 0 44px !important; */
        padding-left: var(--page-gutter) !important;
        padding-right: var(--page-gutter) !important;
    }

    body.page-template-page-home #home :is(.approach, .brands, .home-services, .case, .press, .tf-contact),
    body.page-template-page-home-php #home :is(.approach, .brands, .home-services, .case, .press, .tf-contact){
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.page-template-page-home #home :is(.approach h2, .brands h2, .home-services h2, .case h2, .press h2, .tf-contact h2),
    body.page-template-page-home-php #home :is(.approach h2, .brands h2, .home-services h2, .case h2, .press h2, .tf-contact h2){
        margin-bottom: 24px !important;
        line-height: 1.18 !important;
    }

    /* 640 and below: center section titles from "Call us for" onward */
    body.page-template-page-home #home :is(.home-services h2, .case h2, .press h2, .tf-contact h2),
    body.page-template-page-home-php #home :is(.home-services h2, .case h2, .press h2, .tf-contact h2){
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Case header mobile layout: keep title on one line, move "View all" top-right */
    .case-carousel__header{
        position: relative !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 20px !important;
    }
    .case-carousel__header h2{
        width: 100% !important;
        margin: 0 auto !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    .case-viewall{
        position: absolute !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    body.page-template-page-home #home :is(.approach p, .brands p, .press p),
    body.page-template-page-home-php #home :is(.approach p, .brands p, .press p){
        font-size: 18px !important;
        line-height: 1.6 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .services-cards .service-box{
        padding: 20px !important;
        border-radius: 16px !important;
        margin: 24px !important;
    }

    .services-cards .service-header{
        margin-top: 24px !important;
        margin-bottom: 0 !important;
    }

    .services-cards .service-description{
        margin-top: 14px !important;
        padding-top: 20px !important;
        line-height: 1.45 !important;
    }

    .services-cards .service-description ul li{
        margin-bottom: 8px !important;
        line-height: 1.4 !important;
    }

    .home-services-actions > *{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.page-template-page-home #home :is(figure.globe, figure.triangle, figure.r, figure.n),
    body.page-template-page-home-php #home :is(figure.globe, figure.triangle, figure.r, figure.n){
        opacity: 0.28 !important;
    }

    body.page-template-page-home #home .case figure.r,
    body.page-template-page-home-php #home .case figure.r{
        width: clamp(180px, 52vw, 280px) !important;
        left: -22vw !important;
        top: -16vw !important;
        opacity: 0.22 !important;
    }

    .brands .logos,
    .press .logos{
        gap: 12px 10px !important;
    }

    /* Let’s Talk modal: center on mobile */
    #modal .contact{
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 32px) !important;
        max-width: 520px !important;
        margin: 0 !important;
    }

}

/* =========================================================
   480px
   ========================================================= */
@media (max-width: 480px) {
    header { padding: 10px var(--page-gutter) !important; }
    header .logo svg { width: 110px !important; }

    .case-study-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Brands logos: force 2 cols at 480px */
    .brands .logos{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin: 32px 0 !important;
    }
    .press .logos{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin: 18px 0 !important;
    }
    .brands .logos figure img{
        max-width: 70%;
    }
    .press .logos figure img{
        max-width: 62%;
    }

    .press{
        margin-top: 40px !important;
    }

    body.page-template-page-home #home .press .top-agencies-row,
    body.page-template-page-home-php #home .press .top-agencies-row{
        gap: 112px !important;
    }
    body.page-template-page-home #home .press .top-agencies-row .top-agency-figure,
    body.page-template-page-home-php #home .press .top-agencies-row .top-agency-figure,
    body.page-template-page-home #home .press .top-agencies-row .top-agency-img,
    body.page-template-page-home-php #home .press .top-agencies-row .top-agency-img,
    body.page-template-page-home #home .press .top-agencies-row .other-logo figure,
    body.page-template-page-home-php #home .press .top-agencies-row .other-logo figure{
        width: 104px !important;
        max-width: 104px !important;
    }

    /* Approach: smaller type on very small screens */
    body.page-template-page-home #home #approach h2,
    body.page-template-page-home-php #home #approach h2{
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    body.page-template-page-home #home #approach p,
    body.page-template-page-home-php #home #approach p{
        font-size: 18px !important;
        line-height: 1.6 !important;
    }

    /* Home services CTA row: keep same sizing as 640 to avoid 600/theme jumps */
    .home-services-view-more{
        font-size: 20px !important;
        line-height: 1.1 !important;
    }
    .home-services-proposal-btn{
        min-width: 220px !important;
        font-size: 20px !important;
        line-height: 1.1 !important;
    }

    /* Services page: tighter heading on very small screens */
    body.page-template-page-services #services .services > h2.custom-heading{
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
}

/* =========================================================
   599px theme breakpoint counter (keep 640->480 behavior consistent)
   ========================================================= */
@media (max-width: 599px){
    /* Theme forces main section links to width:100% at 599 and below */
    body.page-template-page-home #home .case .case-viewall,
    body.page-template-page-home-php #home .case .case-viewall,
    body.page-template-page-services #services .case .case-viewall,
    body.page-template-page-services-php #services .case .case-viewall{
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        left: auto !important;
        right: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    body.page-template-page-home #home .home-services .home-services-actions > a,
    body.page-template-page-home-php #home .home-services .home-services-actions > a{
        width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Home hero: remove theme's duplicate mobile logos (o/s split) */
    body.page-template-page-home #home .presents figure.big-logo.only-tablet,
    body.page-template-page-home-php #home .presents figure.big-logo.only-tablet{
        display: none !important;
    }
}

/* Hard override: keep 2 columns at 480px even if theme forces single column */
@media (max-width: 480px){
    body.page-template-page-home #home .brands .logos,
    body.page-template-page-home-php #home .brands .logos,
    body.page-template-page-home #home .press .logos,
    body.page-template-page-home-php #home .press .logos{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }

    body.page-template-page-home #home .brands .logos figure,
    body.page-template-page-home-php #home .brands .logos figure,
    body.page-template-page-home #home .press .logos figure,
    body.page-template-page-home-php #home .press .logos figure{
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        grid-column: auto !important;
    }
}

/* =========================================================
   HOME CANVAS CLIP (global)
   ========================================================= */
body.page-template-page-home #home,
body.page-template-page-home-php #home {
    width: 100% !important;
    max-width: var(--lines-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
}

/* Services cards: keep 2x2 above 640, stack at 640 and below */
@media (min-width: 641px){
    body.page-template-page-services #services > .services .services-cards.services-container,
    body.page-template-page-services-php #services > .services .services-cards.services-container{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.page-template-page-services #services > .services .services-cards .service-box,
    body.page-template-page-services-php #services > .services .services-cards .service-box{
        min-width: 0 !important;
    }
}

@media (max-width: 640px){
    body.page-template-page-services #services > .services .services-cards.services-container,
    body.page-template-page-services-php #services > .services .services-cards.services-container{
        grid-template-columns: 1fr !important;
    }

    body.page-template-page-services #services > .services .services-cards .service-box,
    body.page-template-page-services-php #services > .services .services-cards .service-box{
        min-width: 0 !important;
    }
}