/* ============================================================================
   RESPONSIVE
   ----------------------------------------------------------------------------
   Layouts are REDESIGNED per breakpoint (not merely shrunk). Breakpoints align
   with the spec: 1400 (XL), 1200 (desktop), 1140 (laptop), 991 (tablet/nav
   switch), 768 (tablet→mobile), 576 / 480 / 390 (mobile). Touch targets ≥48px.
   ============================================================================ */

/* ============================ LAPTOP  ≤ 1399px ============================ */
@media (max-width: 1399.98px) {
    :root {
        --h1-size: 48px;
        --h2-size: 40px;
        --h3-size: 28px;
        --h4-size: 24px;
        --body-size: 17px;
        --section-space: 100px;
        --gutter: 28px;
        --header-pad-x: 48px;
    }
    .mainnav__menu { gap: 32px; }            /* spec: menu gaps reduced to 32px */
}

/* ===================== SMALL LAPTOP / LARGE TABLET ≤ 1199px =============== */
@media (max-width: 1199.98px) {
    :root { --header-pad-x: 32px; }
    .hero__inner { gap: 40px; }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
    .footer__col--services { display: none; } /* fold services into quick-links context on smaller desktop */
}

/* ============================ TABLET  ≤ 991px ============================ */
/* Desktop nav disappears; hamburger + drawer take over. Top bar hidden. */
@media (max-width: 991.98px) {
    :root {
        --h1-size: 40px;
        --h2-size: 34px;
        --h3-size: 26px;
        --h4-size: 22px;
        --body-size: 16px;
        --section-space: 80px;
        --card-padding: 28px;
        --gutter: 24px;
    }

    .topbar { display: none; }
    .mainnav__menu,
    .mainnav__cta-desktop { display: none; }
    .mainnav__mobile { display: flex; }

    /* Hero stacks; booking card drops below copy. */
    .hero { padding: 70px 0 80px; }
    .hero__inner { grid-template-columns: 1fr; gap: 36px; }
    .hero__lead { max-width: none; }

    .about__inner { gap: 36px; }

    .process-row::before { display: none; }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer__col--services { display: block; }

    .cta-band { padding: 48px 36px; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================ MOBILE  ≤ 768px ============================ */
@media (max-width: 767.98px) {
    :root {
        --h1-size: 32px;
        --h2-size: 28px;
        --h3-size: 24px;
        --h4-size: 20px;
        --section-space: 60px;
        --card-padding: 24px;
        --gutter: 20px;
        --header-pad-x: 18px;
    }

    .section-head { margin-bottom: 40px; }

    /* Hero booking card form back to single column. */
    .hero-card .form-grid { grid-template-columns: 1fr; }
    .hero__actions .btn-pci { width: 100%; }

    /* Booking popup → single column, full width. */
    .booking-modal {
        grid-template-columns: 1fr;
        width: 100%;
        max-height: 94vh;
    }
    .booking-modal__aside { display: none; }   /* hide decorative aside on small screens */
    .booking-modal__body { max-height: 94vh; }

    /* Footer → single column. */
    .footer__grid { grid-template-columns: 1fr; gap: 36px; }
    .site-footer { padding-top: 64px; }

    .copybar__inner { flex-direction: column; text-align: center; gap: 6px; }

    /* Process steps stack. */
    .process-step { padding: 22px 16px; }

    /* Floating buttons: slightly smaller, comfortable thumb reach. */
    .fab-stack { right: 14px; bottom: 14px; gap: 12px; }
    .cta-band__actions .btn-pci { width: 100%; }
}

/* Mega menu width safety on tablets that still show it (≥992 only, so noop). */

/* ============================ SMALL MOBILE ≤ 576px ======================= */
@media (max-width: 575.98px) {
    .booking-modal__body { padding: 24px 20px; }
    .hero-card { padding: 22px; }
    .trustbar__logos { gap: 14px 24px; }
    .about__badge { left: 14px; bottom: 14px; padding: 14px 16px; }
    .about__badge .num { font-size: 1.6rem; }
}

/* ============================ ≤ 480px / 390px ============================ */
@media (max-width: 480px) {
    :root { --header-pad-x: 14px; }
    .drawer { width: 100%; max-width: 100%; }   /* full-screen drawer on tiny phones */
    .mainnav__logo img { height: 40px; }
    .logo-text { font-size: 1.15rem; }
    .hero__trust { gap: 10px 18px; }
    .cta-band { padding: 38px 22px; }
}

@media (max-width: 360px) {
    .fab { width: 52px; height: 52px; font-size: 1.15rem; }
    .booking-modal__head h3 { font-size: 1.3rem; }
}

/* ============================ LANDSCAPE TABLET 992–1199 =================== */
/* Spec: landscape tablet keeps hamburger but Book Inspection stays visible.
   Handled by the 991px breakpoint (mobile header shows the CTA). */

/* ============================ REDUCED MOTION ============================= */
@media (prefers-reduced-motion: reduce) {
    .pci-loader__ring::before { animation: none; }
    .hero__bg img { transform: none !important; }
}