@media (max-width: 1024px) {

    /* Fewer boxes visible at once on smaller desktops/tablets — see
       the sizing-formula comment above .showcase-card in style.css
       before changing this. */
    :root {
        --showcase-visible: 3.6;
    }

    .showcase-card {
        height: 360px;
    }


    /* ---- OUR SERVICES: switch off the pin, stack normally ----
       js/services.js checks this same 1024px breakpoint via
       gsap.matchMedia and skips creating the ScrollTrigger pin
       entirely below it, so this CSS and that JS condition must be
       kept in sync if the breakpoint ever changes. */

    .services-pin {
        height: auto;
        min-height: 0;

        display: block;

        overflow: visible;
    }

    .services-stage {
        height: auto;
    }

    /* Swap from the desktop "image fades / text ticker" layout to
       the plain mobile stack — see the comment above
       .services-desktop-stage in style.css for why these are two
       separate markup blocks rather than one reused block. */

    .services-desktop-stage {
        display: none;
    }

    .services-mobile-stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .service-item {
        position: static;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);

        opacity: 1;
        pointer-events: auto;
    }

    .service-item-media {
        max-height: 340px;
    }

    .services-progress {
        display: none;
    }


    .navigation {
        display: none;
    }


    .header-actions {
        display: none;
    }


    .mobile-menu-btn {
        display: block;

        margin-left: auto;
    }


    .platform-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .showcase-layout {
        grid-template-columns:
            1fr;
    }


    .why-panel,
    .how-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .portfolio-viewport {
        padding: 8px 32px 0;
    }


    /* If Slick's CDN script ever fails to load, this keeps the
       plain-CSS fallback grid (see .portfolio-track:not(.slick-
       initialized) in style.css) sane on tablet too, instead of
       staying stuck at the desktop 3-up layout. */
    .portfolio-track:not(.slick-initialized) .portfolio-slide {
        flex: 0 0 calc(50% - 16px);
    }


    .contact-grid {
        grid-template-columns:
            1fr;

        gap: var(--space-xl);
    }


    .why-card {
        border-right: 1px solid var(--color-dark-line);
        border-bottom: 1px solid var(--color-dark-line);
    }


    .why-card:nth-child(2n) {
        border-right: none;
    }


    .how-step:nth-child(-n + 2) {
        margin-bottom: var(--space-md);
    }


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

}


@media (max-width: 768px) {

    :root {
        --container-padding: 20px;
    }


    .container {
        width:
            min(
                100% - 40px,
                var(--container-width)
            );
    }


    .hero {
        min-height: auto;

        padding-top: 110px;
        padding-bottom: var(--space-xl);
    }


    .hero h1 {
        font-size: 4rem;
    }


    .hero-showcase {
        margin-top: 60px;
    }


    /* Fewer boxes visible at once on tablet — see the sizing-formula
       comment above .showcase-card in style.css before changing this. */
    :root {
        --showcase-visible: 2.6;
    }

    .showcase-card {
        height: 300px;
    }


    .showcase-card-offset {
        margin-bottom: 24px;
    }


    .statistics-grid {
        grid-template-columns:
            1fr;
    }


    .services-section {
        padding-top: var(--space-xl);
    }

    .services-heading {
        margin-bottom: var(--space-xl);
    }

    .service-item {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .service-item-media {
        max-height: 260px;
    }

    .service-item-content {
        max-width: none;
    }


    .platform-grid {
        grid-template-columns:
            1fr;
    }


    .support-grid {
        grid-template-columns:
            1fr;
    }


    .contact-hero {
        padding: 130px 0 var(--space-lg);
    }


    .form-row {
        grid-template-columns:
            1fr;

        gap: 0;
    }


    .contact-form {
        padding: var(--space-md);
    }


    .portfolio-title {
        font-size: 1.25rem;
    }


    .portfolio-viewport {
        padding: 8px 18px 0;
    }


    .slick-slide {
        padding: 0 10px;
    }


    .slick-list {
        margin: 0 -10px;
    }


    /* Same graceful-degradation fallback as the tablet breakpoint —
       one full-width slide per row if Slick never loads. */
    .portfolio-track:not(.slick-initialized) .portfolio-slide {
        flex: 0 0 100%;
    }


    .why-panel,
    .how-grid {
        grid-template-columns:
            1fr;
    }


    .why-card {
        border-right: none;
    }


    .how-step:nth-child(-n + 2) {
        margin-bottom: 0;
    }


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


    .showcase-image img {
        min-height: 400px;
    }

}


@media (max-width: 480px) {

    :root {
        --showcase-visible: 1.4;
    }

    .showcase-card {
        height: 260px;
        min-width: 210px;
    }


    .hero h1 {
        font-size: 3.25rem;
    }


    .section-heading h2,
    .showcase-content h2 {
        font-size: 2.875rem;
    }


    .final-cta h2 {
        font-size: 3.375rem;
    }


    .portfolio-nav {
        width: 40px;
        height: 40px;
    }


    .portfolio-prev {
        left: 8px;
    }


    .portfolio-next {
        right: 8px;
    }


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


    .mobile-nav {
        width: min(90%, 340px);
    }

}