/* ==========================================================================
   ARSH TOWNSHIPS — Responsive
   Breakpoints mirror the reference: 1280 / 1024 / 991 / 768 / 575 / 480.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1280px — tighten the wide grids
   -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .split { gap: 44px; }
  .footer-main { gap: 36px; }
  .site-header__inner { gap: 20px; }
  .primary-nav__link { padding-inline: 11px; }
  .testimonial { padding: 44px 38px; }
  .site-footer__shell { padding-inline: 44px; }
}

/* --------------------------------------------------------------------------
   ≤ 1120px — four-up grids become two-up
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .pillar-grid,
  .pillar-grid--3,
  .pillar-grid--2 { grid-template-columns: repeat(2, 1fr); }

  .spec-list--4 { grid-template-columns: repeat(2, 1fr); }

  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .process-step:nth-child(2n)::before { display: none; }

  .footer-main { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
}

/* --------------------------------------------------------------------------
   ≤ 1024px — mobile navigation takes over
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --header-h: 84px;
    --header-offset: 20px;
    --gutter: 24px;
  }

  .primary-nav { display: none; }
  .nav-toggle { display: grid; }

  .brand-lockup__mark { height: 44px; }
  .brand-lockup__name { font-size: 1.05rem; }

  .header-phone span { display: none; }

  .hero__slide { min-height: 560px; padding-block: 76px; }

  .split,
  .split--wide-left,
  .split--wide-right {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split--reverse-mobile .split__media { order: 2; }

  .split--vicinity { grid-template-columns: 1fr; }

  .section-head--split { flex-direction: column; align-items: flex-start; gap: 26px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .header-cta { display: none; }
  .spec-list--3 { grid-template-columns: repeat(2, 1fr); }

  .project-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .mosaic--big { grid-column: span 2; grid-row: span 2; }
  .contact-cards { grid-template-columns: 1fr; }
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-newsletter { grid-template-columns: 1fr; gap: 26px; }
  .site-footer__shell { padding: 52px 32px 32px; }
  .testimonial__mark { font-size: 7rem; }
}

/* --------------------------------------------------------------------------
   ≤ 860px
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .compare { aspect-ratio: 4 / 3; }
  .spec-list { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
}

/* --------------------------------------------------------------------------
   ≤ 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root { --gutter: 20px; }

  .pillar-grid,
  .pillar-grid--2,
  .pillar-grid--3 { grid-template-columns: 1fr; gap: 18px; }

  .spec-list,
  .spec-list--3,
  .spec-list--4 { grid-template-columns: 1fr; }

  .project-mosaic { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .mosaic--tall, .mosaic--wide, .mosaic--big { grid-column: span 1; grid-row: span 1; }
  .card { padding: 28px 26px; }

  .process-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .process-step::before { display: none; }

  .form-grid { grid-template-columns: 1fr; }

  .split--vicinity .locality-list { grid-template-columns: 1fr; }

  .footer-main { grid-template-columns: 1fr; row-gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Arrows would sit on top of the hero copy at this width; the slider is
     swipeable and the dots stay, so the arrows step out. */
  .hero__arrow { display: none; }
  .hero__dots { right: 20px; bottom: 20px; }

  .testimonial { padding: 36px 26px; }
  .testimonial__mark { display: none; }

  .newsletter-form { flex-wrap: wrap; border-radius: var(--radius-card); }
  .newsletter-form input { flex: 1 1 100%; }
  .newsletter-form button { flex: 1 1 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   ≤ 575px
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {
  :root {
    --radius-shell: 22px;
    --radius-card: 16px;
  }

  .pillar-grid,
  .gallery-grid,
  .amenity-grid { grid-template-columns: 1fr; }

  .stat-row,
  .stat-row--2 { grid-template-columns: repeat(2, 1fr); }

  .brand-lockup__tag { display: none; }

  .hero__slide { min-height: 500px; padding-block: 64px; }
  .hero__lede { font-size: var(--text-sm); }

  .page-banner__shell { min-height: 300px; padding-block: 60px; }

  .btn { font-size: var(--text-sm); }
  .btn__icon { width: 38px; height: 38px; }

  .site-footer__shell { padding: 40px 22px 26px; }
  .footer-brand .brand-lockup--lg .brand-lockup__mark { height: 48px; }

  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .service-card__body { padding-inline: 10px; }
}

/* --------------------------------------------------------------------------
   ≤ 400px
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .header-phone { display: none; }
  .site-header__actions { gap: 12px; }
  .filter-bar__btn { padding: 11px 18px; }
  .tabs__tab { padding: 10px 16px; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .scroll-top,
  .mobile-nav,
  .hero__arrow,
  .hero__dots { display: none !important; }

  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}