/* ============================================================
   GrowWaves — Responsive Styles (responsive.css)
   ============================================================ */

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 1100px) {
    .nav__links {
        display: none;
    }

    .nav__toggle {
        display: inline-flex;
    }

    .nav__cta {
        display: none;
    }

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

    .hero__cards {
        display: none;
    }

    .hero {
        padding-bottom: 90px;
    }

    .services__grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 250px;
    }

    .service-card,
    .service-card--featured {
        grid-column: span 3;
        grid-row: span 1;
    }

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

    .service-detail__grid,
    .about-preview__grid,
    .about-story__grid,
    .contact__grid {
        grid-template-columns: 1fr;
    }

    .contact-side {
        position: static;
        grid-template-rows: none;
        align-self: start;
    }

    .about-preview__visual {
        height: 380px;
    }

    .process__node {
        width: 52%;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    :root {
        --header-h: 66px;
    }

    body {
        font-size: 15px;
    }

    .btn {
        padding: 15px 26px;
    }

    .btn--lg {
        padding: 17px 32px;
    }

    .section {
        padding: 76px 0;
    }

    .intro__grid,
    .approach__grid {
        grid-template-columns: 1fr;
    }

    .intro-card {
        padding: 32px 26px 36px;
    }

    .services__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .service-card,
    .service-card--featured {
        grid-column: span 1;
        min-height: 260px;
        gap: 34px;
    }

    .service-card__art {
        min-height: 220px;
    }

    .service-card--featured .service-card__title {
        font-size: 1.5rem;
    }

    .about-preview__visual {
        height: 320px;
    }

    .about-preview__benefit {
        font-size: 0.9rem;
        padding: 13px 16px;
    }

    /* Process: spine on the left edge, full-width nodes */
    .process__spine {
        left: 6px;
        transform: none;
    }

    .process__list {
        gap: 34px;
    }

    .process__node,
    .process__node--right {
        width: 100%;
        align-self: auto;
        justify-content: flex-start;
        text-align: left;
        min-height: 0;
    }

    .process__node-card {
        width: 100%;
        padding: 24px;
        opacity: 1;
        transform: none;
    }

    .process__node.is-active .process__node-card {
        transform: none;
    }

    .process__node--right .process__node-num::after {
        order: 0;
    }

    .statement {
        min-height: 70vh;
        padding: 90px 0;
    }

    .statement__chip {
        display: none;
    }

    .cta__quick {
        gap: 14px;
    }

    .service-detail__grid {
        direction: ltr !important;
    }

    .service-detail--reverse .service-detail__grid > * {
        direction: ltr !important;
    }

    .service-visual {
        aspect-ratio: 1 / 1;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        padding-bottom: 34px;
    }

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

    .form-success {
        flex-direction: column;
        text-align: center;
    }

    .flow__spine {
        left: 12px;
        display: block;
    }

    .flow__step {
        margin-left: 56px;
    }

    .flow__step-num {
        display: none;
    }

    .page-hero {
        padding-top: calc(var(--header-h) + 60px);
    }

    .hero__scroll {
        display: none;
    }

    .marquee__group {
        gap: 36px;
        padding-right: 36px;
    }

    .marquee__item {
        gap: 36px;
        font-size: 0.88rem;
    }

    /* Reduce marquee speed slightly on mobile */
    .marquee__track {
        animation-duration: 30s;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
    .service-detail__title {
        font-size: 1.7rem;
    }

    .sec-head h2 {
        font-size: 1.9rem;
    }

    .contact-card {
        padding: 20px;
    }
}

/* ---------- Landscape short screens ---------- */
@media (max-height: 560px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--header-h) + 40px);
        padding-bottom: 70px;
    }

    .hero__scroll {
        display: none;
    }

    .mobile-menu {
        justify-content: flex-start;
        padding-top: calc(var(--header-h) + 20px);
        overflow-y: auto;
    }

    .mobile-menu__link {
        font-size: 1.6rem;
        padding: 8px 0;
    }
}