/* =========================================================
   DESIGN CLEANING — responsive.css
   Breakpoints: tablet ≤1024px  ·  mobile ≤768px  ·  small ≤480px
   ========================================================= */

/* =========================================================
   TABLET — max-width 1024px
   ========================================================= */
@media (max-width: 1024px) {

  .container { padding-inline: 40px; }

  /* ----- Header ----- */
  .header-phone   { display: none; }
  .header-actions .btn-primary { display: none; }
  .hamburger      { display: flex; }

  .primary-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 340px;
    height: 100vh;
    background: var(--white);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    padding: 80px 32px 32px;
    transition: right 0.3s ease;
    z-index: 999;
    overflow-y: auto;
  }
  .primary-nav.is-open { right: 0; }
  .primary-nav .nav-list { flex-direction: column; gap: 20px; align-items: flex-start; }
  .primary-nav .nav-list a { font-size: 1rem; font-weight: 600; }

  /* ----- Brand ribbon ----- */
  .brand-ribbon { height: 4px; }

  /* ----- Hero ----- */
  .hero__columns { grid-template-columns: 1fr; gap: 40px; }
  .hero__title   { font-size: 2.75rem; }
  .hero__image   { height: 380px; }
  .trust-bar     { gap: 32px; }

  /* ----- Services ----- */
  .services__grid { grid-template-columns: 1fr 1fr; }
  .gallery__row { grid-template-columns: 1fr; }

  /* ----- About ----- */
  .about__card { grid-template-columns: 1fr; gap: 48px; padding: 40px 32px; }

  /* ----- Why Us ----- */
  .why-us__grid { grid-template-columns: 1fr 1fr; }

  /* ----- Gallery ----- */
  .gallery__grid { grid-template-columns: 1fr; }

  /* ----- Reviews ----- */
  .reviews__grid { grid-template-columns: 1fr 1fr; }

  /* ----- Contact ----- */
  .contact__columns { grid-template-columns: 1fr; }
  .contact__info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* ----- Areas (homepage) ----- */
  .areas__grid { grid-template-columns: repeat(3, 1fr); }

  /* ----- Footer dark: 2 columns, brand spans full width ----- */
  .footer-dark__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
    padding-top: 64px;
    padding-bottom: 40px;
  }
  .footer-dark__inner > *:first-child { grid-column: 1 / -1; }  /* brand: full width */
  .footer-dark__inner > *:nth-child(4) { grid-column: 1 / -1; } /* payment: full width */

  /* ----- Service pages ----- */
  .service-hero__inner    { grid-template-columns: 1fr; gap: 32px; }
  .service-hero__image    { height: 400px; }
  .service-hero__title    { font-size: 2.5rem; }
  .service-includes__grid { grid-template-columns: 1fr 1fr; }
  .how-it-works__grid     { grid-template-columns: 1fr 1fr; }
  .service-plans__grid    { grid-template-columns: 1fr; }
  .other-services__grid   { grid-template-columns: 1fr 1fr; }
  .contact-service__columns { grid-template-columns: 1fr; }
  .areas-gradient__grid   { grid-template-columns: repeat(2, 1fr); }

}


/* =========================================================
   MOBILE — max-width 768px
   ========================================================= */
@media (max-width: 768px) {

  .container { padding-inline: 24px; }

  /* ----- Header ----- */
  .header-inner { padding: 14px 20px; gap: 12px; }

  .site-logo .logo-img { height: 40px; }

  /* Show phone next to hamburger (Figma: 12px semibold blue) */
  .header-phone {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--blue-primary);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Brand ribbon */
  .brand-ribbon { height: 4px; }

  /* ----- Hero ----- */
  .hero { padding-top: 32px; padding-bottom: 48px; }
  .hero__location { font-size: 0.8125rem; }
  .hero__title    { font-size: 2rem; }
  .hero__subtitle { font-size: 0.9375rem; }
  .hero__meta     { font-size: 0.8125rem; }

  .hero__ctas { flex-direction: column; gap: 10px; }
  .hero__ctas .btn-primary,
  .hero__ctas .btn-outline { width: 100%; text-align: center; }

  .hero__image { height: 280px; border-radius: 8px; }

  /* Trust bar: 2×2 grid */
  .trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 24px 20px;
    border-radius: 0;
  }
  .trust-bar__item { justify-content: flex-start; }

  /* ----- Section defaults ----- */
  .section-title { font-size: 1.75rem; }

  /* ----- Services ----- */
  .services       { padding: 56px 0; }
  .services__grid { grid-template-columns: 1fr; }
  .gallery__pair img { height: 180px; }

  /* ----- About ----- */
  .about       { padding: 56px 0; }
  .about__wrapper { padding: 0 24px; }
  .about__card { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .about__stats { flex-wrap: wrap; gap: 20px; }

  /* ----- Why Us ----- */
  .why-us       { padding: 56px 0; }
  .why-us__grid { grid-template-columns: 1fr; }

  /* ----- Gallery ----- */
  .gallery     { padding: 56px 0; }
  .gallery__row { flex-direction: column; }
  .gallery__item--tall,
  .gallery__item--short,
  .gallery__item--full { height: 220px; flex: unset; }

  /* ----- Reviews ----- */
  .reviews       { padding: 56px 0; }
  .reviews__grid { grid-template-columns: 1fr; }

  /* ----- Contact (homepage) ----- */
  .contact       { padding: 56px 0; }
  .contact__info { grid-template-columns: 1fr; }

  /* ----- Areas (homepage) ----- */
  .areas       { padding: 56px 0; }
  .areas__grid { grid-template-columns: 1fr 1fr; }
  .areas__map  { height: 240px; }

  /* =====================================================
     SERVICE PAGES — mobile
     ===================================================== */

  /* Breadcrumb */
  .service-breadcrumb { font-size: 0.6875rem; padding: 12px 0; }

  /* Service Hero */
  .service-hero { padding: 32px 0 48px; }
  .service-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .service-hero__title { font-size: 2rem; line-height: 1.15; }
  .service-hero__desc  { font-size: 0.9375rem; }
  .service-hero__pills { gap: 6px; }
  .service-hero__pill  { font-size: 0.6875rem; padding: 5px 10px; }

  /* Full-width stacked CTAs */
  .service-hero__ctas { flex-direction: column; gap: 10px; }
  .service-hero__ctas .btn-primary,
  .service-hero__ctas .btn-outline { width: 100%; text-align: center; }

  /* Image comes BELOW the text block */
  .service-hero__image { height: 280px; border-radius: 8px; order: 1; }
  .service-hero__text  { order: 0; }

  /* What's Included */
  .service-includes       { padding: 56px 0; }
  .service-includes__grid { grid-template-columns: 1fr; gap: 12px; }
  .checklist-card { padding: 24px; border: 1px solid var(--border); }
  .checklist-item { font-size: 0.8125rem; }
  .checklist-card__title { font-size: 1.25rem; }

  /* How It Works: number circle LEFT, title+desc RIGHT */
  .how-it-works       { padding: 64px 0; }
  .how-it-works__grid { grid-template-columns: 1fr; gap: 20px; }

  .how-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
    gap: 6px 16px; /* row gap 6px, col gap 16px */
  }
  .how-step__number {
    grid-column: 1;
    grid-row: 1 / 3;  /* span title and desc rows */
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 0.9375rem;
    align-self: start;
  }
  .how-step__title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.0625rem;
    margin: 0;
    align-self: end;
  }
  .how-step__desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8125rem;
    margin: 0;
  }

  /* Frequency Plans: 1 column, cards stacked */
  .service-plans       { padding: 56px 0; }
  .service-plans__grid { grid-template-columns: 1fr; gap: 12px; }
  .plan-card { border-radius: 12px; }

  /* Featured badge: switch from absolute-above to inline */
  .plan-card__badge {
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.625rem;
  }

  /* Other Services: 1 column */
  .other-services       { padding: 56px 0; }
  .other-services__grid { grid-template-columns: 1fr; gap: 12px; }
  .other-service-card__image { height: 140px; }

  /* Service Contact: sidebar first, form second */
  .contact-service          { padding: 56px 0; }
  .contact-service__columns { grid-template-columns: 1fr; gap: 16px; }
  .contact-service__form-card { padding: 24px; order: 2; }
  .contact-service__sidebar   { order: 1; }

  /* Areas gradient: cities in a white card, 2-col inside */
  .areas-gradient       { padding: 64px 0; }
  .areas-gradient__grid {
    grid-template-columns: 1fr 1fr;
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
  }
  /* Dark dots + text over white background */
  .areas-gradient__item { color: var(--text-dark); font-size: 0.8125rem; }
  .areas-gradient__item::before { background: var(--blue-primary); opacity: 0.7; }
  .areas-gradient__map  { height: 240px; border-radius: 12px; margin-bottom: 24px; }
  .areas-gradient__note { font-size: 0.8125rem; }

  /* =====================================================
     FOOTER DARK — mobile
     ===================================================== */
  .footer-dark__inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  /* Brand column: full width */
  .footer-dark__inner > *:first-child { grid-column: 1 / -1; }
  /* Payment/Social column: full width */
  .footer-dark__inner > *:nth-child(4) { grid-column: 1 / -1; }

  /* Logo larger on mobile */
  .footer-dark__logo { width: 140px; height: auto; }

  /* CTA button full width */
  .footer-dark__cta { width: 100%; text-align: center; display: block; }

  /* Bottom bar: stacked */
  .footer-dark__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 24px;
  }
  .footer-dark__legal { gap: 14px; flex-wrap: wrap; }
  .footer-dark__payments { gap: 10px; flex-wrap: wrap; }

}


/* =========================================================
   SMALL MOBILE — max-width 480px
   ========================================================= */
@media (max-width: 480px) {

  .container { padding-inline: 20px; }

  /* Hero */
  .hero__title { font-size: 1.875rem; }
  .section-title { font-size: 1.625rem; }

  /* Trust bar stays 2-col */
  .trust-bar { grid-template-columns: 1fr 1fr; }

  /* Service hero */
  .service-hero__title { font-size: 1.75rem; }

  /* Areas (homepage) */
  .areas__grid { grid-template-columns: 1fr 1fr; }

  /* Areas gradient */
  .areas-gradient__grid { grid-template-columns: 1fr 1fr; padding: 16px; }

  /* Gallery: full-height items a touch taller on small screens */
  .gallery__item--tall,
  .gallery__item--full { height: 200px; }

  /* Plan cards: a bit less padding */
  .plan-card { padding: 20px; }

  /* Footer dark: fully single column below 480px */
  .footer-dark__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-dark__inner > *:first-child  { grid-column: 1; }
  .footer-dark__inner > *:nth-child(4) { grid-column: 1; }

}