/* ==================================================
   CROSS PLATFORM — Mobile / Responsive Styles
   ================================================== */

/* ── Tablet (≤ 992px) ── */
@media (max-width: 992px) {
    /* v2.1 §A/§B: hero size + first-viewport spacing live in the clamp
       tokens (--text-hero, --space-block) — no per-breakpoint overrides */
    .services-heading { font-size: 60px; letter-spacing: -2px; }
    .services-grid { grid-template-columns: 1fr; gap: 20px; }
    .service-card { height: auto; min-height: 420px; padding-bottom: 0; }
    .works-heading { font-size: 60px; letter-spacing: -2px; }
    .works-grid { gap: 20px; }
    .faq-heading { font-size: 60px; letter-spacing: -2px; }
    .faq-question { padding: 20px 20px 20px 30px; }
    .faq-answer { padding: 0 20px 0 30px; }
    .faq-item.open .faq-answer { padding: 0 20px 28px 30px; }
    .cta-headline { font-size: 80px; letter-spacing: -3px; }
    .about-hero-overlay h1 { font-size: 40px; }
    .mv-heading { font-size: 60px; letter-spacing: -2px; }
    .mv-card { padding: 50px 40px; }
    .team-section-title { font-size: 44px; }
    .works-hero-section { padding: 80px 0 30px; }
    .works-page-headline { font-size: 52px; letter-spacing: -1.5px; }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {

    /* Navbar */
    /* Only the bar's CTA hides; the mobile menu keeps its own copy */
    .cp-nav-links,
    .cp-navbar .btn-book-call {
        display: none !important;
    }

    .cp-navbar-toggler {
        display: flex !important;
    }

    /* Hero: size + spacing stay on the clamp tokens (v2.1 §A/§B) */
    .btn-hero-call { font-size: 14px; padding: 14px 22px; }


    /* Sections */
    .cp-section { padding: 50px 0; }
    .services-section { padding: 50px 0; }

    /* Services */
    .services-heading { font-size: 44px; letter-spacing: -1.5px; }
    .services-grid { grid-template-columns: 1fr; }
    .service-card { height: auto; min-height: 380px; padding: 36px 36px 0; }
    .service-card-illustration img { width: 180px; }

    /* Works */
    .works-heading { font-size: 44px; letter-spacing: -1.5px; }
    .works-grid { grid-template-columns: 1fr; gap: 16px; }
    .work-card-img-wrap { height: 340px; }

    /* Testimonials */
    .testimonials-section { padding: 50px 0; }
    .testimonials-heading { font-size: 44px; letter-spacing: -1.5px; }
    .testimonials-header { flex-direction: column; align-items: flex-start; gap: 16px; }

    /* CTA: the act-break pause holds at every width (v2.1 §B.3) */
    .cta-inner { grid-template-columns: 1fr; gap: 32px; }

    .cta-spacer { display: none; }

    .cta-headline {
        font-size: 58px;
        letter-spacing: -2px;
        text-align: center;
    }

    .cta-btn-col { justify-content: center; }

    /* About hero */
    .about-hero-wrap { height: 70vh; }

    .about-hero-overlay { padding-bottom: 32px; gap: 24px; }

    .about-hero-overlay h1 { font-size: 44px; letter-spacing: -1.5px; }

    .approach-heading { font-size: 44px; letter-spacing: -1.5px; margin-bottom: 32px; }

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

    .approach-card { padding: 36px 30px 40px; }

    .about-hero-overlay h1 { font-size: 40px; letter-spacing: -1px; }

    .about-hero-wrap { margin-bottom: 50px; }

    /* Mission & Vision */
    .mv-section { padding: 60px 0 0; }

    .mv-heading { font-size: 44px; letter-spacing: -1.5px; }

    .mv-image-wrap { height: 260px; }

    .mv-image-overlay { padding: 24px; }

    .mv-cards { grid-template-columns: 1fr; gap: 0; }

    .mv-card { padding: 40px 28px; }

    /* Team */
    .team-section-title { font-size: 52px; letter-spacing: -2px; }
    .team-grid { flex-wrap: wrap; }
    .team-card { flex: 0 0 calc(50% - 10px); }
    .team-card-photo { height: 280px; }

    /* Works page */
    .works-hero-section { padding: 60px 0 24px; }
    .works-page-headline {
        font-size: 40px;
        letter-spacing: -1px;
        margin-bottom: 0;
    }

    /* Works detail */
    .work-detail-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .work-meta-box { min-width: auto; width: 100%; padding: 24px 28px; height: auto; flex-wrap: wrap; gap: 20px; }
    .work-detail-cover-wrap { height: 320px; margin-bottom: 40px; }
    .work-gallery-item--half { flex: 0 0 100%; width: 100%; }
    .work-gallery-img-wrap { height: 320px; }





    /* Footer */
    .cp-footer { padding: 24px 0; }

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

    .cp-footer-nav { gap: 4px 24px; flex-wrap: wrap; }
    .cp-footer-nav a { padding: 10px 0; }

    /* FAQ */
    .faq-heading { font-size: 44px; letter-spacing: -1.5px; margin-bottom: 32px; }
    .faq-question-text { font-size: 16px; }

    /* Team */
    .team-section-title { font-size: 38px; letter-spacing: -1.5px; }
    .team-card { flex: 0 0 100%; }
    .team-card-photo { height: 260px; }
    .team-card-info { padding: 24px; }
}

/* ── Small Mobile (≤ 576px) ── */
@media (max-width: 576px) {
    .cta-headline { font-size: 46px; letter-spacing: -1.5px; }

    .about-hero-overlay h1 { font-size: 26px; }

    .works-page-headline { font-size: 34px; }


    .work-card-img-wrap { height: 200px; }

    .work-detail-cover-wrap { height: 220px; }
    .work-gallery-img-wrap { height: 220px; }

    .solution-item img { height: 180px; }
}

/* ═══════════════════════════════════════════════════════
   Productized service pages — responsive
═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .tpl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .tier-grid { grid-template-columns: 1fr; }
    .tier-card--featured { order: -1; }
}

@media (max-width: 768px) {
    .page-hero { padding: 36px 0 20px; }

    .tpl-grid { grid-template-columns: 1fr; }
    .tpl-thumb-name { font-size: 34px; }

    .care-grid { grid-template-columns: 1fr; }
    .care-strip { padding: 30px 26px; }

    .step-row { grid-template-columns: 84px 1fr; gap: 20px; padding: 34px 0; }
    .step-num { font-size: 56px; -webkit-text-stroke-width: 1.5px; letter-spacing: -1.5px; }
    .step-title { font-size: 24px; }
    .steps-expect, .care-how { padding: 32px 28px; }

    .page-cta { padding: 80px 0 100px; }
}

@media (max-width: 576px) {
    .tier-card { padding: 34px 26px; }
    .tpl-body { padding: 24px 22px 28px; }
    .tpl-actions .btn-cp-solid, .tpl-actions .btn-cp-line { width: 100%; text-align: center; }
    .tier-cta { width: 100%; }
}

/* ── Design elevation pass + home reshape — responsive ── */
@media (max-width: 1200px) {
    .page-ghost { font-size: 150px; top: -44px; }
}

@media (max-width: 992px) {
    .how-strip { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
    .page-cta-panel { padding: 64px 44px; }
    .home-section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 34px; }
}

@media (max-width: 768px) {
    .page-ghost { font-size: 96px; top: -26px; letter-spacing: -3px; -webkit-text-stroke-width: 1px; }
    .page-cta-panel { padding: 52px 28px; }
    .how-strip { grid-template-columns: repeat(2, 1fr); }
    .step-row { padding: 34px 16px; margin: 0 -16px; }
    .offer-section { padding: 64px 0 36px; }
    .home-designs-section { padding: 36px 0; }
    .how-strip-section { padding: 36px 0 64px; }
}

@media (max-width: 576px) {
    .how-strip { grid-template-columns: 1fr 1fr; gap: 18px; }
    .tier-index { font-size: 44px; top: 22px; right: 24px; }
    .hero-cta-row .btn-cp-line { width: 100%; text-align: center; }
}