/* Mobile-first breakpoints */
@media (max-width: 1440px){
}

@media (max-width: 1200px){
    :root{--content-pad: 40px;}
}

@media (max-width: 1024px){
    :root{--content-pad: 32px;}
    .site-logo__mark{width: 120px;}
    .ir-chips{display: none;}
    .ir-lines{width: 150vw;opacity: 0.5;}
    .ir-lines--secondary{display: none;}
    .ir-lines--tertiary{display: none;}
    .ir-lines--footer{display: none;}
    .footer-grid{grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 64px;}
    .footer-brand{grid-column: 1 / -1;}
    .approach__grid{grid-template-columns: 1fr;}
    .approach__art{max-width: 420px;}

    /* services */
    .services-intro__grid{grid-template-columns: 1fr;}
    .services-intro__content{padding: 20px 0;}

    /* service pillars — stack art over body */
    .svc-pillars{gap: 64px;}
    .svc-pillar__inner,
    .svc-pillar.is-flip .svc-pillar__inner{
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .svc-pillar.is-flip .svc-pillar__art,
    .svc-pillar.is-flip .svc-pillar__body{ order: initial; }
    .svc-pillar__glyph{ aspect-ratio: 16 / 9; }
    .svc-pillar__n{ font-size: clamp(96px, 20vw, 180px); }
    .svc-pillar.is-flip .svc-pillar__body{ margin-left: 0; }

    /* process — track wraps to 3 cols on tablet, line hides */
    .svc-process{padding: 80px 0;}
    .svc-process__head{margin-bottom: 56px;}
    .svc-process__track{grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px;}
    .svc-process__line{display: none;}

    /* services teaser — bento collapses to 2 columns at tablet */
    .ir-services-teaser{padding: 88px 0 96px;}
    .ir-services-teaser__bento{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px;}
    .ir-services-teaser__cell--wide{grid-column: span 2;}
    .ir-services-teaser__cell--tall{grid-row: span 2; grid-column: span 1;}
    .ir-services-teaser__cell--sq{grid-column: span 1;}

    /* signals — 4-up grid collapses to 2 cols, dividers swap from vertical to horizontal */
    .ir-signals{padding: 88px 0 96px;}
    .ir-signals__grid{grid-template-columns: repeat(2, 1fr);}
    .ir-signal{border-right: 1px solid var(--sg-rule); border-bottom: 1px solid var(--sg-rule);}
    .ir-signal:nth-child(odd){border-right: 1px solid var(--sg-rule);}
    .ir-signal:nth-child(2n){border-right: 0;}
    .ir-signal:nth-last-child(-n+2){border-bottom: 0;}
}

@media (max-width: 768px){

    /* lines — hide individual density-clone paths, soften opacity */
    .ir-lines .path-lines [data-ir-clone="1"]{display: none;}
    .ir-lines-layer{--line-opacity: 0.28; --line-soft-opacity: 0.14;}
    .ir-signals {padding: 72px 0 80px;}
    .ir-signals__grid {grid-template-columns: 1fr;}
    .ir-signal {border-right: 0; border-bottom: 1px solid var(--sg-rule); min-height: 200px;}
    .ir-signal:last-child {border-bottom: 0;}
    .ir-services-teaser {padding: 72px 0 80px;}
    .ir-services-teaser__head {margin-bottom: 36px;}
    .ir-services-teaser__head-row {grid-template-columns: 1fr; align-items: flex-start; gap: 18px;}
    .ir-services-teaser__intro {max-width: 100%;}
    .ir-services-teaser__bento {grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px;}
    .ir-services-teaser__cell {min-height: 200px; padding: 22px;}
    .ir-services-teaser__cell--wide,
    .ir-services-teaser__cell--tall,
    .ir-services-teaser__cell--sq {grid-column: auto; grid-row: auto;}
    .ir-services-teaser__cell-title {font-size: 28px;}
    .ir-services-teaser__cell-watermark {width: 140px; height: 140px;}
    .ir-services-teaser__cell--tall .ir-services-teaser__cell-watermark {width: 140px; height: 140px; bottom: -18px;}
    .ir-services-teaser__cta {margin-top: 36px;}
    .case .case-nav{display: none;}
    .hero{padding-top: 48px; min-height: auto;}
    .hero__inner{padding-bottom: 48px;}
    .hero h1{font-size: 64px;}
    .hero__meta{flex-direction: column; gap: 4px; border-bottom: none; padding-bottom: 0;}
    .hero__bottom{grid-template-columns: 1fr; gap: 28px;}
    .hero__cta-group{justify-content: flex-start;}
    .site-header__avail{display: none;}
    .hero-video__frame{border-radius: 12px;}
    .brands .brand{padding: 0 24px;}
    .blog-grid,
    #blog .alm-listing,
    #blog .ajax-load-more-wrap ul.alm-listing{grid-template-columns: 1fr;}
    /* 3-zone header — mobile collapse.
       The wrapper becomes the dropdown panel; it holds both the nav list AND
       the actions (theme toggle + Let's Talk) so the hamburger surfaces every
       header control on small screens, not just navigation. */
    .nav-toggle{display: inline-flex; margin-left: auto;}
    .site-header__inner{position: relative;}

    .site-header__menu{
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        min-width: 220px;
        z-index: 100;
    }
    .site-header.nav-open .site-header__menu{display: flex;}

    /* Lines toggle inside the dropdown — left-align with the nav items
       rather than stretching to full panel width. */
    .site-header__menu .anim-toggle{
        margin-left: 0;
        align-self: flex-start;
    }

    .site-nav{flex: 0; min-width: 0; display: block;}
    .site-nav__list{
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        min-width: 0;
    }
    .site-nav__list a{letter-spacing: 0.08em;}

    /* Actions stack vertically inside the panel, separated from nav by a rule. */
    .site-header__actions{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-left: 0;
        padding: 14px 0 0;
        border-top: 1px solid var(--color-border);
    }
    .site-header__cta{padding: 9px 16px; font-size: 12px; flex: 1; justify-content: center;}

    .site-logo__mark{width: 110px;}

    .modal{padding: 16px;}

    .modal .box-form{width: min(100%, 620px);}

    .cta-headline{padding: 52px 0 28px;}
    .cta-headline__title{letter-spacing: -0.03em;}

    /* process — 2 columns at phone */
    .svc-process__track{grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px;}

    .closing-cta{
        padding: 32px 0;
    }

    .case .case-card__body{
        padding: 16px;
    }

    .case-single__hero{padding: 40px 0 72px;}
    .case-single__crumbs{margin-bottom: 32px;}
    .case-single__body{padding: 56px 0;}
    .case-single__footer-nav{padding: 32px 0 56px;}
    .case-single__footer-inner{grid-template-columns: 1fr; gap: 28px;}
    .case-single__nav-link--next{justify-self: start; text-align: left; align-items: flex-start;}
    .case-single__nav-all{justify-self: start;}
    .case-single__kpi-row{gap: 16px;}

    /* services */
    .home-services{padding: 32px 0 48px;}
    .hero--services,
    .hero--blog,
    .hero--contact{min-height: auto;}
    .hero--contact .hero__split{grid-template-columns: 1fr; gap: 24px; align-items: start;}
    .hero--contact .hero__subtitle--side{justify-self: start; max-width: none; margin: 0;}
    .hero--contact .hero__line--italic .hero__line-inner{padding-left: 0;}
    /* contact form v2 — tablet */
    .ir-cf{--ir-cf-pad-y: 32px; --ir-cf-pad-x: 24px;}
    .ir-cf__intro,
    .ir-cf__thanks{padding: 48px 24px;}
    .ir-cf__page-header{margin-bottom: 28px;}
    .ir-cf__field-grid{grid-template-columns: 1fr;}
    .ir-cf__option-grid--2,
    .ir-cf__option-grid--3,
    .ir-cf__option-grid--4{grid-template-columns: 1fr 1fr;}
    .ir-cf__captcha{flex-wrap: wrap;}
    .ir-cf__input--captcha{width: 100%; text-align: left;}
    .svc-pnav__label,
    .blog-topics__label{padding-right: 0; border-right: none; margin-right: 0;}
    .svc-pnav__a,
    .blog-topics__a{padding: 7px 12px; font-size: 11px;}
    .blog-grid-wrap{padding-top: 32px;}
    .services-intro{padding: 8px 0 16px;}
    .services-intro__visual{order: -1; min-height: 180px;}

    /* service pillars — single-column deliverables, smaller block */
    .svc-pillars{gap: 48px;}
    .svc-pillar__delivs ul{grid-template-columns: 1fr;}
    .svc-pillar__title{font-size: clamp(40px, 9vw, 64px);}
    .svc-pillar__glyph{aspect-ratio: 5 / 3;}
    .svc-pillar__n{font-size: clamp(80px, 22vw, 140px);}
    .svc-pillar__icon{width: 64px;}
}

@media (max-width: 640px){
    :root{
        --content-pad: 24px;
    }
    .site-logo__mark{
        width: 100px;
    }

    .ir-lines{
        width: 140vw;
        opacity: 0.38;
    }

    .site-footer{
        padding: 56px 0 28px;
    }

    .footer-grid{
        grid-template-columns: 1fr;
        gap: 36px;
        margin-bottom: 48px;
    }

    .footer-brand{
        grid-column: auto;
    }

    .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-top{
        margin-left: 0;
    }

    .approach__content{
        padding: 28px 26px;
    }

    /* contact form v2 — small phone */
    .ir-cf__page-tag{font-size: 10px;}
    .ir-cf__option-grid--3{grid-template-columns: 1fr;}
    .ir-cf__scale-item{grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 14px;}
    .ir-cf__scale-num{font-size: 24px;}
    .ir-cf__review-row{grid-template-columns: 1fr; gap: 2px;}
    .ir-cf__review-banner{padding: 18px 18px; gap: 12px;}
    .ir-cf__review-card{padding: 16px 18px;}
    .ir-cf__actions{flex-wrap: wrap; gap: 12px;}
    .ir-cf__rank-row{grid-template-columns: 36px 1fr; gap: 10px;}
    .ir-cf__rank-num{width: 36px; height: 36px; font-size: 20px;}
}

@media (max-width: 480px){
    :root{
        --content-pad: 16px;
    }
    .hero__subtitle{
        font-size: 13px;
    }
    .hero__inner{padding-bottom: 28px;}
    .cta-headline{padding: 36px 0 20px;}
    .cta-headline__title{letter-spacing: -0.025em;}
    .site-logo__mark{
        width: 92px;
    }

    .brands .brand{padding: 0 18px;}

    .modal{
        padding: 12px;
    }

    .modal .bt-close{
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
    }

    /* services */
    .hero.hero--services h1{font-size: 56px;}
}

@media (hover:hover){
    .case .case-card:hover{
        box-shadow: 0 32px 60px -24px rgba(15, 23, 41, 0.45);
    }
    .case .case-nav:hover{
        background: var(--color-primary);
        color: #fff;
        box-shadow: 0 14px 30px rgba(15, 23, 41, 0.2);
    }
}

@media (prefers-reduced-motion: reduce){
    .ir-signal__kpi span{ animation: none; }
    .case .case-carousel__header h2 em{ animation: none; }
    .approach__title em{ animation: none; }
}