/* =========================================================
   Contractors Marketing Pros — Responsive Styles
   ========================================================= */

/* ============ 1200px and below ============ */
@media (max-width: 1200px) {
    .cmp-hero-inner { gap: 3rem; }
    .cmp-services-grid,
    .cmp-why-grid,
    .cmp-portfolio-grid,
    .cmp-case-grid,
    .cmp-testimonials-grid,
    .cmp-blog-grid,
    .cmp-values-grid,
    .cmp-benefits-grid { grid-template-columns: repeat(3, 1fr); }
    .cmp-industries-grid { grid-template-columns: repeat(3, 1fr); }
    .cmp-video-grid { grid-template-columns: repeat(2, 1fr); }
    .cmp-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
}

/* ============ 1024px and below (tablet) ============ */
@media (max-width: 1024px) {
    h1 { font-size: clamp(2rem, 5vw, 3rem); }
    h2 { font-size: clamp(1.65rem, 4vw, 2.35rem); }

    .cmp-container { padding: 0 20px; }

    /* Header */
    .cmp-nav { display: none; }
    .cmp-menu-toggle { display: inline-flex; }
    .cmp-header-phone { display: none; }
    .cmp-header-cta .cmp-btn { padding: 10px 18px; font-size: 0.85rem; }

    /* Mobile menu drawer */
    .cmp-nav.is-open {
        display: flex;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: var(--cmp-black);
        z-index: 90;
        padding: 100px 24px 40px;
        overflow-y: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .cmp-nav.is-open .cmp-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }
    .cmp-nav.is-open .cmp-menu > li { width: 100%; }
    .cmp-nav.is-open .cmp-menu > li > a {
        padding: 16px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        font-size: 1.1rem;
    }
    .cmp-nav.is-open .cmp-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: 0;
        padding: 0 0 0 1rem;
        box-shadow: none;
        margin: 0;
    }

    /* Hero */
    .cmp-hero { padding: 80px 0 70px; }
    .cmp-hero-inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .cmp-hero-sub { margin-left: auto; margin-right: auto; }
    .cmp-hero-buttons { justify-content: center; }
    .cmp-hero-features { justify-content: center; }
    .cmp-hero-visual { max-width: 400px; margin: 0 auto; }
    .cmp-page-hero { padding: 70px 0 60px; }

    /* Grids */
    .cmp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .cmp-services-grid,
    .cmp-portfolio-grid,
    .cmp-case-grid,
    .cmp-testimonials-grid,
    .cmp-blog-grid,
    .cmp-archive-grid,
    .cmp-values-grid,
    .cmp-benefits-grid,
    .cmp-why-grid { grid-template-columns: repeat(2, 1fr); }
    .cmp-industries-grid { grid-template-columns: repeat(2, 1fr); }
    .cmp-process-grid { grid-template-columns: repeat(2, 1fr); }
    .cmp-process-grid::before { display: none; }

    /* Pricing */
    .cmp-pricing-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: 480px; }
    .cmp-pricing-card.is-featured { transform: none; }
    .cmp-pricing-card.is-featured:hover { transform: translateY(-8px); }

    /* Service content */
    .cmp-service-content .cmp-container { grid-template-columns: 1fr; gap: 3rem; }
    .cmp-service-sidebar { position: static; }

    /* About */
    .cmp-about-grid { grid-template-columns: 1fr; gap: 3rem; }
    .cmp-about-visual { max-width: 400px; margin: 0 auto; }
    .cmp-about-visual::after { font-size: 6rem; }

    /* Footer */
    .cmp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .cmp-footer-brand { grid-column: 1 / -1; max-width: none; }
    .cmp-footer-cta-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
    .cmp-footer-cta-actions { align-items: center; }

    /* Topbar */
    .cmp-topbar { display: none; }

    /* Floating call */
    .cmp-floating-call { display: inline-flex; }
}

/* ============ 768px and below (mobile) ============ */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .cmp-container { padding: 0 16px; }

    /* Sections spacing */
    .cmp-hero,
    .cmp-why,
    .cmp-services-grid-section,
    .cmp-industries,
    .cmp-process,
    .cmp-portfolio-section,
    .cmp-case-studies,
    .cmp-video-testimonials,
    .cmp-testimonials,
    .cmp-faq,
    .cmp-latest-blog,
    .cmp-cta-banner,
    .cmp-pricing,
    .cmp-about-story,
    .cmp-values,
    .cmp-benefits,
    .cmp-service-content { padding: 60px 0; }
    .cmp-page-hero { padding: 60px 0 40px; }
    .cmp-hero { padding: 60px 0 50px; }

    /* Section heads */
    .cmp-section-head { margin-bottom: 2.5rem; }
    .cmp-section-sub { font-size: 1rem; }

    /* Buttons */
    .cmp-btn-lg { padding: 14px 24px; font-size: 0.95rem; }
    .cmp-hero-buttons { flex-direction: column; align-items: stretch; }
    .cmp-hero-buttons .cmp-btn { width: 100%; }
    .cmp-page-hero .cmp-hero-buttons { flex-direction: column; }
    .cmp-cta-buttons { flex-direction: column; align-items: stretch; max-width: 300px; margin: 0 auto; }
    .cmp-cta-buttons .cmp-btn { width: 100%; }

    /* Hero visual */
    .cmp-hero-visual { display: none; }

    /* Grids to single column */
    .cmp-services-grid,
    .cmp-portfolio-grid,
    .cmp-case-grid,
    .cmp-testimonials-grid,
    .cmp-blog-grid,
    .cmp-archive-grid,
    .cmp-values-grid,
    .cmp-benefits-grid,
    .cmp-why-grid,
    .cmp-video-grid { grid-template-columns: 1fr; gap: 1rem; }
    .cmp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .cmp-industries-grid { grid-template-columns: 1fr; }
    .cmp-process-grid { grid-template-columns: 1fr; gap: 1rem; }
    .cmp-contact-info-grid { grid-template-columns: 1fr; }

    /* Cards padding */
    .cmp-why-card,
    .cmp-service-card,
    .cmp-case-card,
    .cmp-testimonial-card,
    .cmp-value-card,
    .cmp-benefit-card,
    .cmp-pricing-card { padding: 1.5rem; }

    /* Stats */
    .cmp-stat { padding: 1rem 0.5rem; }
    .cmp-stat-num { font-size: 2rem; }

    /* Form */
    .cmp-form { padding: 1.5rem; }
    .cmp-form-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }

    /* Testimonials */
    .cmp-testimonial-card::before { font-size: 3.5rem; top: 0.25rem; right: 1rem; }

    /* Case metrics */
    .cmp-case-metrics { grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
    .cmp-metric-num { font-size: 1.15rem; }

    /* Google reviews */
    .cmp-google-header { flex-direction: column; text-align: center; }

    /* Footer */
    .cmp-footer { padding-top: 60px; }
    .cmp-footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 40px; }
    .cmp-footer-bottom .cmp-container { flex-direction: column; text-align: center; }
    .cmp-footer-legal { justify-content: center; flex-wrap: wrap; gap: 1rem; }

    /* Portfolio filter */
    .cmp-portfolio-filter { gap: 0.35rem; }
    .cmp-filter-btn { padding: 8px 14px; font-size: 0.8rem; }

    /* Video modal */
    .cmp-video-modal { padding: 1rem; }
    .cmp-video-close { top: 1rem; right: 1rem; width: 40px; height: 40px; }

    /* Header */
    .cmp-header-inner { padding: 12px 16px; }
    .cmp-header-cta .cmp-btn { padding: 8px 14px; font-size: 0.8rem; }
    .cmp-logo-text { font-size: 0.9rem; max-width: 130px; }
    .cmp-logo-mark { width: 36px; height: 36px; font-size: 0.95rem; }

    /* Floating call — bottom right */
    .cmp-floating-call { bottom: 16px; right: 16px; width: 52px; height: 52px; }

    /* 404 */
    .cmp-404 { padding: 80px 0; }

    /* Prose */
    .cmp-prose p, .cmp-prose ul li, .cmp-prose ol li { font-size: 1rem; }
    .cmp-prose h2 { font-size: 1.75rem; }
    .cmp-prose h3 { font-size: 1.25rem; }
    .cmp-prose blockquote { padding: 1.25rem; font-size: 1rem; margin: 1.5rem 0; }
}

/* ============ 480px and below (small mobile) ============ */
@media (max-width: 480px) {
    .cmp-stats-grid { grid-template-columns: 1fr; }
    .cmp-stat-num { font-size: 2.25rem; }
    .cmp-hero-features { flex-direction: column; align-items: center; gap: 0.75rem; }
}