/* Mangalam Momento — mobile alignment refinement
   Visual-only responsive polish. Desktop/tablet layout and functionality remain unchanged. */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  body { min-width: 0; }
  .shell { width: calc(100% - 32px); max-width: none; }
  .section { padding: 64px 0; }
  .section-heading { width: 100%; margin-bottom: 28px; }
  .section-heading > div,
  .section-heading > p,
  .story-copy,
  .location-copy,
  .developer-copy,
  .faq-list,
  .contact-copy,
  .lead-form { min-width: 0; }

  /* Header: keep logo and CTA on one clean baseline. */
  .nav { padding: 7px 0; }
  .nav-box {
    width: calc(100% - 16px);
    min-height: 56px;
    padding: 7px 8px 7px 11px;
    gap: 8px;
  }
  .project-logo { width: 132px; flex: 0 0 auto; }
  .nav-cta {
    flex: 0 0 auto;
    padding: 12px 11px;
    font-size: .56rem;
    line-height: 1;
  }

  /* Hero and lead strip stay edge-to-edge and visually connected. */
  .hero, .lead-bar { width: 100%; }
  .hero picture, .hero img { width: 100%; height: auto; }
  .lead-grid { width: 100%; }
  .lead-price { padding: 16px; gap: 12px; }
  .lead-price span { font-size: .62rem; }
  .lead-price strong { font-size: 1.28rem; white-space: nowrap; }
  .gold-button { width: 100%; margin: 0; min-height: 52px; padding: 14px 16px; }

  /* Consistent section rhythm and typography. */
  .section-heading h2,
  .location-copy h2,
  .developer h2,
  .faq h2,
  .contact h2 {
    font-size: clamp(2.25rem, 11.5vw, 3.1rem);
    line-height: .98;
    letter-spacing: -.055em;
  }
  .section-heading > p { font-size: .92rem; line-height: 1.65; }
  .eyebrow { margin-bottom: 12px; font-size: .62rem; }

  /* Project story: avoid oversized type and uneven side spacing. */
  .story-grid { gap: 28px; }
  .story-heading h1 {
    font-size: clamp(2.65rem, 12.8vw, 3.55rem);
    line-height: .98;
    margin-bottom: 24px;
  }
  .story-heading blockquote {
    max-width: none;
    margin: 0;
    padding: 14px 0 14px 16px;
    font-size: .92rem;
    line-height: 1.55;
  }
  .story-copy > p { font-size: .94rem; line-height: 1.72; }
  .story-image { margin-top: 28px; }
  .story-image img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

  /* Stats remain symmetrical on small screens. */
  .proof-grid { width: 100%; }
  .proof-card { min-width: 0; min-height: 112px; padding: 18px 14px; }
  .proof-card strong { font-size: 1.35rem; }
  .proof-card span { font-size: .72rem; line-height: 1.4; }

  /* Homes/floor plans: one clean card column. */
  .plan-grid { width: 100%; }
  .plan-card { width: 100%; overflow: hidden; }
  .plan-title { min-height: auto; padding: 22px 18px 10px; }
  .plan-title h3 { font-size: 1.65rem; line-height: 1.05; }
  .plan-image {
    width: 100%;
    height: 300px;
    min-height: 0;
    padding: 18px;
  }
  .plan-image img { width: 100%; height: 100%; object-fit: contain; }
  .plan-footer { padding: 10px 18px 20px; }

  /* Amenities: retain two columns but make every item share the same grid. */
  .amenity-list { width: 100%; gap: 0; }
  .amenity-item { min-width: 0; padding: 14px 11px; }
  .amenity-item span, .amenity-item strong { min-width: 0; overflow-wrap: anywhere; }

  /* Gallery: keep the carousel inside the viewport. */
  .gallery-showcase { width: 100%; margin-left: 0; overflow: hidden; }
  .gallery-stage { width: 100%; height: 320px; overflow: hidden; }
  .gallery-slide { width: 78vw; max-width: 310px; height: 270px; }
  .gallery-caption { left: 12px; right: 12px; bottom: 12px; }

  /* Location/developer/FAQ/contact all share the same left/right alignment. */
  .location-grid,
  .developer-grid,
  .faq-grid,
  .contact-grid { gap: 30px; }
  .location-visual { width: 100%; min-height: 112vw; }
  .location-copy .intro { font-size: .94rem; line-height: 1.7; }
  .landmarks { width: 100%; }
  .landmark { min-width: 0; gap: 12px; }
  .landmark span { overflow-wrap: anywhere; }
  .developer-stats { width: 100%; }
  .faq-list { width: 100%; }
  .faq-list summary { gap: 12px; padding: 17px 0; font-size: .82rem; line-height: 1.4; }
  .faq-list details > p { font-size: .88rem; line-height: 1.65; }

  /* Lead form: labels/inputs line up consistently. */
  .lead-form { width: 100%; padding: 22px 16px 18px; }
  .choices { width: 100%; gap: 8px; }
  .choice { min-width: 0; padding: 12px 8px; font-size: .7rem; }
  .field-row { width: 100%; gap: 12px; }
  .field-row label { min-width: 0; }
  .lead-form input,
  .lead-form select { width: 100%; min-width: 0; }
  .submit-button { width: 100%; }

  /* Footer and compliance block stay within the same mobile grid. */
  .footer-grid { width: 100%; }
  .footer-logo { width: min(190px, 70vw); }
  .rera-compliance { width: 100%; max-width: none; min-width: 0; }
  .rera-copy { min-width: 0; }
  .rera-copy strong, .rera-copy a { overflow-wrap: anywhere; }
  .footer-contact { width: 100%; }

  /* Fixed controls must never collide with one another. */
  .mobile-bar { height: 56px; padding: 4px; }
  .mobile-bar a, .mobile-bar button { min-width: 0; font-size: .58rem; }
  .whatsapp-float { width: 50px; height: 50px; right: 13px; bottom: 68px; }

  /* Modals/lightbox stay fully inside the viewport. */
  .modal-backdrop { padding: 8px; }
  .lead-modal { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px); }
  .lead-modal-brand { padding: 20px 52px 16px 16px; }
  .lead-modal .lead-form { padding: 18px 16px 16px; }
  .lightbox { width: 100%; max-width: 100%; }
}

@media (min-width: 601px) and (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .shell { width: calc(100% - 40px); }
  .plan-card, .story-grid, .location-grid, .developer-grid, .faq-grid, .contact-grid { min-width: 0; }
  .plan-image img { max-width: 100%; }
}