@media(max-width:1050px) {
    .section {
        padding-block: var(--section-space-tablet)
    }

    .nav {
        display: none
    }

    .mobile-actions {
        display: flex;
        gap: 8px;
        margin-left: auto
    }

    .header-call {
        display: none
    }

    .hero-control {
        top: auto;
        bottom: 20px
    }

    .drawer {
        display: flex
    }

    .services-grid,
    .case-grid,
    .retail-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .stats {
        grid-template-columns: repeat(3, 1fr)
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr
    }

    .service-strip {
        grid-template-columns: 1fr 1fr
    }

    .capability-grid--three,
    .process-flow {
        grid-template-columns: repeat(2, 1fr)
    }

    .split-section {
        gap: 38px
    }

    .about-grid,
    .autoxperia-grid {
        gap: 38px
    }

    .testimonial-track {
        grid-auto-columns: calc((100% - 14px) / 2)
    }
}

@media(max-width:700px) {
    .section {
        padding-block: var(--section-space-mobile)
    }

    .reveal[data-reveal] {
        transform: translateY(15px)
    }

    .reveal[data-reveal="left"] {
        transform: translateX(-15px)
    }

    .reveal[data-reveal="right"] {
        transform: translateX(15px)
    }

    .container {
        width: min(calc(100% - 30px), var(--container))
    }

    .site-header {
        height: 68px
    }

    .brand img {
        width: 96px
    }

    .mobile-actions img {
        filter: invert(54%) sepia(100%) saturate(4245%) hue-rotate(2deg) brightness(103%) contrast(105%)
    }

    .hero {
        padding-top: 68px
    }

    .hero-viewport {
        height: clamp(690px, 185vw, 760px)
    }

    .hero-slide {
        align-items: flex-start;
        padding-top: 75px
    }

    .hero-media img {
        opacity: .58
    }

    .hero-slide--btl .hero-media img {
        object-position: 76% center
    }

    .hero-slide--digital .hero-media img {
        object-position: 72% center
    }

    .hero-slide--retail .hero-media img {
        object-position: 70% center
    }

    .hero-slide--pr .hero-media img {
        object-position: 74% center
    }

    .hero-slide--events .hero-media img {
        object-position: 68% center
    }

    .hero-slide::after {
        background: linear-gradient(90deg, #000 0%, #000f 70%, #0008)
    }

    .hero h1 {
        font-size: clamp(2.65rem, 12vw, 3.6rem)
    }

    .hero p {
        font-size: .9rem
    }

    .hero h1,
    .hero .section-title {
        max-width: 100%
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch
    }

    .hero-control {
        top: auto;
        bottom: 20px
    }

    .service-strip a {
        padding: 16px 12px;
        font-size: .68rem
    }

    .service-strip img {
        width: 27px
    }

    .about-grid,
    .autoxperia-grid {
        grid-template-columns: 1fr
    }

    .about-visual {
        aspect-ratio: 4/5
    }

    .about-features {
        grid-template-columns: 1fr
    }

    .services-grid,
    .case-grid,
    .retail-grid,
    .split-section {
        grid-template-columns: 1fr
    }

    .capability-grid,
    .capability-grid--three,
    .process-flow {
        grid-template-columns: 1fr
    }

    .process-flow li {
        min-height: auto
    }

    .lead-modal {
        align-items: end;
        padding: 0
    }

    .lead-modal__panel {
        width: 100%;
        max-height: 94vh;
        padding: 36px 20px 24px
    }

    .service-card {
        min-height: 370px
    }

    .stats {
        grid-template-columns: 1fr 1fr
    }

    .stat {
        padding: 24px 8px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .page-hero {
        padding: 128px 0 65px
    }

    .page-hero h1 {
        font-size: 3rem
    }

    .testimonial-track {
        grid-auto-columns: 100%
    }

    .testimonial-card {
        min-height: 0;
        padding: 24px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}