/* ==========================================
   ACAYIPCO Responsive
========================================== */

@media (max-width: 1024px) {
    .nav { gap: 22px; }

    .hero-title {
        max-width: 900px;
        font-size: clamp(54px, 10vw, 110px);
    }

    .capability {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .capability span,
    .capability p {
        width: auto;
    }

    .capability p {
        max-width: 620px;
    }
}

@media (max-width: 768px) {
    .container { width: min(90%, var(--container)); }

    section { padding: 96px 0; }

    .site-header { padding: 22px 0; }

    .nav { display: none; }

    .brand,
    .header-cta { font-size: 13px; }

    .header-cta { padding: 9px 14px; }

    .loader-logo { width: min(78vw, 520px); }

    .hero { min-height: 100svh; }

    .hero-inner { padding-top: 70px; }

    .hero-label {
        font-size: 11px;
        letter-spacing: .14em;
        margin-bottom: 22px;
    }

    .hero-title {
        font-size: clamp(48px, 14vw, 82px);
        letter-spacing: -0.075em;
    }

    .hero-text {
        margin-top: 30px;
        max-width: 94%;
        font-size: 17px;
    }

    .hero-link { margin-top: 36px; }

    .hero-parrot-wrap {
        right: -22vw;
        bottom: 14vh;
        width: min(68vw, 340px);
        opacity: .045;
    }

    .scroll-hint { bottom: 28px; }

    .manifesto h2,
    .selected-work h2,
    .about h2,
    .contact h2 {
        font-size: clamp(44px, 13vw, 78px);
        letter-spacing: -0.068em;
    }

    .manifesto-text,
    .selected-work-text,
    .about-text {
        font-size: 17px;
        margin-top: 32px;
    }

    .capabilities { padding: 110px 0; }

    .capability { padding: 32px 0; }

    .capability h3 {
        font-size: clamp(32px, 8vw, 48px);
    }

    .capability p { font-size: 15px; }

    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .cursor,
    .mouse-glow { display: none; }
}

@media (max-width: 480px) {
    .header-cta { display: none; }

    .hero-title { font-size: clamp(44px, 16vw, 68px); }

    .hero-text { font-size: 16px; }

    .section-label { font-size: 11px; }

    .contact-link { font-size: 20px; }
}