/* =========================================================
   HELOAME — responsive.css
   Breakpoints: tablet ≤1024px (logic-based) · mobile ≤768px (Figma mobile spec) · small ≤480px
   ========================================================= */

/* =========================================================
   TABLET — max-width 1024px
   Logic: condense nav to hamburger, drop to 2-column grids
   where a 3/4-column desktop grid would get cramped, stack
   side-by-side sections that no longer have room to breathe.
   ========================================================= */
@media (max-width: 1024px) {

  .container { padding-inline: 40px; }

  .header-phone, .header-actions .btn-primary, .header-actions .social-links { display: none; }
  .hamburger { display: flex; }

  .primary-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 60%;
    max-width: 260px;
    height: 100vh;
    background: var(--ink);
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    padding: 90px 28px 28px;
    transition: right 0.3s ease;
    z-index: 999;
    overflow-y: auto;
  }
  .primary-nav.is-open { right: 0; }
  .primary-nav .nav-list { flex-direction: column; align-items: flex-start; gap: 20px; }

  .nav-close {
    display: block;
    position: absolute;
    top: 24px;
    right: 24px;
    width: auto;
    height: auto;
    background: none;
    border: none;
    color: var(--white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
  }

  .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
  .nav-overlay.is-open { display: block; }

  .hero__title { font-size: 2.75rem; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .why-us__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__page { grid-template-columns: repeat(2, 1fr); }
  .gallery-lightbox__slide { padding: 80px 40px; }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid .review-card:last-child { grid-column: span 2; max-width: calc(50% - 12px); margin-inline: auto; }
  .follow-us__grid { grid-template-columns: repeat(3, 1fr); }

  .about__inner { flex-direction: column; }
  .about__image { width: 100%; max-width: 100%; }

  .contact__body { flex-direction: column; }
  .areas__grid { grid-template-columns: repeat(2, 1fr); }

  .footer__cols { flex-wrap: wrap; gap: 40px; }

  .service-hero__inner { flex-direction: column; }
  .checklist-grid, .how-it-works__grid, .service-plans__grid, .other-services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-plans__grid--four { grid-template-columns: repeat(2, 1fr); }
  .contact-service__columns { flex-direction: column; }
  .form-row { flex-direction: column; gap: 18px; }

  .thank-you { padding-block: 48px; }
  .thank-you__title { font-size: 2rem; }
}

/* =========================================================
   MOBILE — max-width 768px
   Based on the Figma mobile frame (390px, node 38:4). Every
   section collapses to a single column. "Client Reviews" and
   "Follow Us" are broken in that Figma frame (content roughly
   2x taller than its own section, oversized placeholder blocks
   with no real grid) — rebuilt here as clean, working layouts
   instead of copying the broken export.
   ========================================================= */
@media (max-width: 768px) {

  .container { padding-inline: 20px; }

  /* Header */
  .site-logo img { height: 48px; }

  /* Hero — matches Figma mobile exactly (30px title, full-width stacked CTAs) */
  .hero { min-height: 560px; }
  .hero__content { padding-block: 56px; }
  .hero__title { font-size: 1.875rem; }
  .hero__subtitle { font-size: 1.1875rem; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn-primary, .hero__ctas .btn-outline { width: 100%; }

  .section-title { font-size: 1.875rem; }
  .section-subtitle { font-size: 1rem; }

  .services__grid, .why-us__grid { grid-template-columns: 1fr; }

  .stats { flex-wrap: wrap; gap: 24px; }

  .about__desc { font-size: 1rem; }

  /* Gallery — 2-column compact grid (Figma's mobile gallery renders as six
     390×74px full-width strips; that's not usable, so this keeps the
     3×2 photo grid but at a mobile-friendly 2 columns) */
  .gallery__page { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; gap: 12px; }
  .gallery__item { height: 160px; }
  .gallery-lightbox__slide { padding: 64px 24px; }
  .gallery-lb__prev, .gallery-lb__next { width: 40px; height: 40px; }
  .gallery-lb__prev { left: 8px; } .gallery-lb__next { right: 8px; }
  .gallery__arrow { width: 40px; height: 40px; }

  /* Client Reviews — single column, rebuilt (Figma's mobile export
     for this section overflows to ~2x the frame height) */
  .reviews { padding-block: 72px; }
  .reviews__grid { grid-template-columns: 1fr; gap: 16px; }
  .reviews__grid .review-card:last-child { grid-column: auto; max-width: none; margin-inline: 0; }

  /* Follow Us — Figma's mobile export is broken (seven stray gradient
     blocks stacked ~2282px tall inside a 1162px section, no real grid,
     CTA button hidden). Rebuilt as a clean 2-column photo grid instead. */
  .follow-us { padding-block: 48px; }
  .follow-us__title { font-size: 1.875rem; margin-bottom: 28px; }
  .follow-us__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 28px; }

  .contact__body { flex-direction: column; }
  .areas__grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  .footer__cols { flex-direction: column; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

  .checklist-grid, .how-it-works__grid, .service-plans__grid, .other-services__grid { grid-template-columns: 1fr; }
  .service-plans__grid--four { grid-template-columns: 1fr; }
  .service-hero__title { font-size: 1.875rem; }
  .form-row { flex-direction: column; gap: 18px; }

  .quote-form { width: 100%; max-width: 480px; margin-inline: auto; }

  .thank-you { min-height: calc(100vh - 65px); padding-block: 40px; }
  .thank-you__icon { width: 56px; height: 56px; font-size: 1.5rem; margin-bottom: 20px; }
  .thank-you__title { font-size: 1.75rem; }
  .thank-you__desc { font-size: 1rem; }
  .thank-you__inner .btn-primary { max-width: none; }
}

/* =========================================================
   SMALL — max-width 480px
   ========================================================= */
@media (max-width: 480px) {
  .site-logo img { height: 44px; }
  .quote-form { padding: 24px; }
  .gallery__page, .follow-us__grid { grid-template-columns: 1fr 1fr; }
}