/* =====================================================================
   RESPONSIVE.CSS — every breakpoint of the site, mobile-first
   Tiers: ≤359 · ≤479 · ≥480 · ≤599 · ≥600 · ≤639 · ≥640 · ≤1199 (drawer)
          ≥1200 (desktop nav) · ≥1440 · ≥1800 · touch · print
   Grid columns use minmax(0, …) so cards shrink instead of forcing the
   page wider than the viewport.
   ===================================================================== */

/* ---------------------------------------------------------------- ≤359 */
@media (max-width: 359px) {
    body { font-size: 16px; }

    .brand { gap: .5rem; }
    .brand__mark { width: 36px; height: 36px; }
    .brand__name { font-size: .9rem; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .site-header__inner { gap: .4rem; }
    .site-header__actions { gap: .35rem; }
    .header-wa-btn { display: none; }          /* bottom action bar covers it */
    .lang-switch__btn { padding: .5rem .55rem; }
    .lang-switch__label { display: none; }
    .lang-switch__icon { width: 18px; height: 18px; }
    .nav-toggle { width: 40px; height: 40px; }

    .topbar { font-size: .8rem; }
    .topbar__inner { align-items: flex-start; }
    .topbar__list { gap: .35rem .8rem; }
    .topbar__item--whatsapp { display: none; }
    .topbar__item--hours span { display: inline; }

    .steps { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid.grid-3, .card-grid.grid-4 { grid-template-columns: 1fr; }
    .quick-contact { grid-template-columns: 1fr; }
    .check-list--two-col { grid-template-columns: 1fr; }
    .form__row { grid-template-columns: 1fr; }
    .form__actions .btn { flex: 1 1 100%; }

    .hero__actions .btn, .page-hero__actions .btn,
    .notfound__actions .btn, .cta-band__actions .btn { flex: 1 1 100%; }

    .map-embed { min-height: 250px; }
    .lightbox__caption { font-size: .8rem; padding-inline: 3.4rem; }

    .hero__float-badge-text { white-space: normal; max-width: 190px; line-height: 1.35; }
    .hero__card-title { font-size: .98rem; }
}

/* ---------------------------------------------------------------- ≤479 */
@media (max-width: 479px) {
    .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .area-card { padding: .8rem; gap: .5rem; }
    .area-card__icon { width: 32px; height: 32px; border-radius: 10px; }
    .area-card__name { font-size: .86rem; }
    .area-card__meta { font-size: .72rem; }
    .area-card__arrow { display: none; }

    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testimonial-row { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-contact { grid-template-columns: 1fr; }
    .card-grid.grid-3, .card-grid.grid-4 { grid-template-columns: 1fr; }
    .filter-tabs { gap: .45rem; }
    .filter-tabs__btn { padding: .5rem .85rem; font-size: .84rem; }

    .hero__float-badge { padding: .5rem .8rem; gap: .4rem; border-radius: 12px; }
    .hero__float-badge-icon { font-size: 1rem; }
    .hero__float-badge-text { font-size: .76rem; }
    .hero__float-badge--top { top: .6rem; inset-inline-start: .6rem; }
    .hero__float-badge--bottom { bottom: .6rem; inset-inline-end: .6rem; }

    .brand__name { max-width: 140px; }
    .brand__mark { width: 38px; height: 38px; }
    .site-header__inner { gap: .3rem; }

    .about-gallery-item--1, .about-gallery-item--4 { transform: none; }

    .hero__actions .btn, .page-hero__actions .btn,
    .notfound__actions .btn, .cta-band__actions .btn { flex: 1 1 100%; }

    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
    .site-footer__note { width: 100%; }
}

/* ---------------------------------------------------------------- ≥480 */
@media (min-width: 480px) {
    .card-grid.grid-3, .card-grid.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- ≤599 */
@media (max-width: 599px) {
    .topbar__inner { justify-content: center; }

    .header-phone-pill { display: none; }        /* topbar + action bar cover it */
    .header-wa-btn { display: none; }            /* bottom action bar covers it */
    .brand__tagline { display: none; }           /* tagline is wide; name is enough */

    .hero__media { aspect-ratio: 16 / 10; }
    .about-showcase__grid { gap: 1.5rem; }
}

/* ---------------------------------------------------------------- ≤639 */
@media (max-width: 639px) {
    .form__row { grid-template-columns: 1fr; }
    .form__actions .btn { flex: 1 1 100%; }
    .check-list--two-col { grid-template-columns: 1fr; }
    .contact-info { gap: .55rem; }
    .contact-tiles { grid-template-columns: 1fr; }
    .reason-grid { grid-template-columns: 1fr; }
    .map-embed { min-height: 280px; }
    .service-section-head { flex-direction: column; align-items: stretch; }
    .mega__promo-text { display: none; }
}

/* ---------------------------------------------------------------- ≤899 */
@media (max-width: 899px) {
    /* The coverage map is stacked above its district list on tablets
       and phones so the pins stay a comfortable size. */
    .area-map__body { grid-template-columns: 1fr; }
    .area-map__list { max-height: none; }
    .area-map__search { max-width: none; }
}

/* ---------------------------------------------------------------- ≥640 */
@media (min-width: 640px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .testimonial-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .check-list--two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lang-switch__label { display: inline; }
    .header-phone-pill__sub { display: none; }
}

/* ---------------------------------------- ≤1199 · drawer navigation tier */
@media (max-width: 1199px) {
    .main-nav { display: none; }
    .nav-toggle { display: grid; place-items: center; }

    /* Language switch lives in the header here; the topbar keeps phone/WhatsApp. */
    .lang-switch--topbar { display: none; }
    .topbar__item--hours { display: none; }

    /* Phone pill + WhatsApp bubble are redundant with the topbar while the
       drawer nav is active — keep the header slim. */
    .header-phone-pill { display: none; }
    .header-wa-btn { display: none; }

    .action-bar { display: flex; }
    .floating-cta { display: none; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

    .hero__inner, .page-hero__inner,
    .page-hero--media .page-hero__inner { grid-template-columns: 1fr; }
    .page-hero__media { aspect-ratio: 16 / 10; }
    .split, .split--wide { grid-template-columns: 1fr; }
    .about-showcase__grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }

    /* Two action buttons (WhatsApp + Call) are too wide for the narrow
       card body on tablet/mobile — stack them so no button overflows. */
    .service-card__actions { grid-template-columns: 1fr; }
    /* Constrain the contact-map card to its grid cell and shrink the
       button flex-basis so both buttons fit side-by-side or wrap cleanly. */
    .contact-map__card { max-width: 100%; }
    .contact-map__actions .btn { flex: 1 1 120px; }

    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
    .site-footer__col--brand { grid-column: 1 / -1; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }

    .cta-band__card { flex-direction: column; align-items: flex-start; }

    /* .cta-band__content carries `flex: 1 1 460px` so it wins the wide row on
       desktop. Once the card stacks, that 460px basis applies to the *height*
       and punches a ~460px hole between the copy and the buttons — reset it
       so the band hugs its content on every stacked tier. */
    .cta-band__content { flex: 0 1 auto; }

    .form__actions .btn { flex: 1 1 100%; }

    /* Menus behave like normal flow content inside the drawer. */
    .mega, .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        padding: 0;
    }
    .mega { width: auto; }
    .mega__inner { grid-template-columns: 1fr; gap: 1.1rem; }
    .mega__promo { align-items: stretch; }
}

/* ---------------------------------------------------------------- ≥900 */
@media (min-width: 900px) {
    .drawer { display: none; }

    .card-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .quick-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-map { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
    .contact-map__frame { min-height: 460px; }
    .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer__col--brand { grid-column: 1 / -1; }

    .topbar__item--hours { display: inline-flex; }
    .lang-switch--topbar { display: none; }     /* header switch is enough < 1200 */
    .header-wa-btn { display: inline-grid; }
}

/* --------------------------------------------------------------- ≥1024 */
@media (min-width: 1024px) {
    .area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .quick-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .site-footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
    .site-footer__col--brand { grid-column: auto; }
}

/* ----------------------------- ≥1200 · desktop navigation + full header */
@media (min-width: 1200px) {
    .main-nav { display: block; }
    .nav-toggle { display: none; }
    .drawer { display: none; }

    /* Phone stays in the guarantee strip + topbar on mid desktop widths;
       the pill only appears once there is genuine room for it (≥1440). */
    .header-phone-pill { display: none; }
    .header-wa-btn { display: none; }

    .site-header__inner { gap: 1rem; }
    .main-nav { flex: 1 1 auto; }
    .main-nav__link { font-size: .88rem; padding: .55rem .55rem; }

    .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .site-footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
    .site-footer__col--brand { grid-column: auto; }
    .site-footer__bottom { flex-direction: row; align-items: center; }
    .site-footer__note { width: auto; }

    .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .hero__media { aspect-ratio: 4 / 3; }
    .about-showcase__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
    .split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
    .contact-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
    .page-hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); }
    .cta-band__inner { flex-direction: row; align-items: center; }
}

/* --------------------------------------------------------------- ≥1440 */
@media (min-width: 1440px) {
    :root { --container: 1320px; --section-y: 7rem; }
    body { font-size: 17.5px; }

    .brand__tagline { display: block; }

    .main-nav__link { font-size: .92rem; padding: .6rem .62rem; }
    .main-nav__list { gap: .1rem; }
}

/* --------------------------------------------------------------- ≥1600 */
@media (min-width: 1600px) {
    .header-phone-pill { display: inline-flex; padding: .38rem .45rem .38rem .95rem; }
    .header-phone-pill__sub { display: inline-block; }
}

/* --------------------------------------------------------------- ≥1800 */
@media (min-width: 1800px) {
    :root { --container: 1400px; }
    .hero__media img, .page-hero__media img { max-height: 620px; }
}

/* ------------------------------------------------ touch targets (coarse) */
@media (pointer: coarse) {
    .btn, .chip, .filter-tabs__btn, .drawer__link, .drawer__toggle { min-height: 48px; }
    .main-nav__link { padding: .75rem .8rem; }
    .lang-switch__btn { min-height: 44px; }
}

/* --------------------------------------------- new card grids (2025) ---- */
/* Reason cards (why-choose-us page) + reason panels (service pages) +
   contact method cards (contact page). */
@media (max-width: 899px) {
    .reason-grid,
    .reason-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Stack the coverage map above its searchable district list. */
    .area-map__body { grid-template-columns: 1fr; }
    .area-map__list { max-height: 420px; }
}

@media (max-width: 599px) {
    .reason-grid,
    .reason-panels,
    .contact-cards { grid-template-columns: 1fr; }

    .contact-details { grid-template-columns: 1fr; }

    .steps__item { padding: 1.4rem 1.2rem 1.5rem; }
    .steps__num { font-size: 2.4rem; }
}

@media (min-width: 720px) {
    .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- print */
@media print {
    .topbar, .site-header, .drawer, .floating-cta, .action-bar, .site-loader,
    .cta-band, .site-footer, .breadcrumbs, .filter-tabs, .quick-contact { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}