/* ============================================================
   M3M Jacob & Co. — responsive overrides
   ============================================================ */

@media (max-width: 1199.98px) {
  .h1 { font-size: 2.25rem; }
  .header .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; gap: 1.25rem; }
  .header .logo img { height: 82px; }
  .header.fixed .logo img { height: 66px; }
  .menu li a { padding: .5rem .6rem; letter-spacing: .16em; }
  .enquiry-form .inner { padding: 2.2rem 1.9rem; }
}

@media (max-width: 991.98px) {
  /* the desktop nav is hidden here, so .menu-section must stop growing —
     otherwise the lone burger button gets centred in the header */
  .header .menu-section { flex: 0 0 auto; justify-content: flex-end; }
  .header .container-fluid { gap: 1rem; }

  .padding { padding-top: 3.4rem; padding-bottom: 3.4rem; }
  .factsRow { grid-template-columns: repeat(3, 1fr); }
  .factBox:nth-child(3) { border-right: 0; }
  .factBox:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
  .enquiry-form .inner { padding: 2rem 1.5rem; }
  .form-img { display: none; }
  .headingContainer { flex-direction: column; align-items: flex-start; }
  .sectionHead { margin-bottom: 2.2rem; }

  .legacyText { margin-bottom: 2rem; }
  .frameImg { padding: 8px; }
  .frameImg img { min-height: 260px; }

  .filmWrapper { min-height: 62vh; }
  .filmWrapper::after {
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.9) 100%);
  }
  .filmOverlay .inner { max-width: none; text-align: center; }
  .filmOverlay .eyebrow { justify-content: center; }
  .filmOverlay .eyebrow::after {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--gold);
    opacity: .8;
  }

  .showGrid { grid-template-columns: 1fr 1fr; }
  .showItem:nth-child(3) { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 21 / 9; }
}

@media (max-width: 767.98px) {
  .h1 { font-size: 1.9rem; }
  .banner { min-height: 520px; }
  /* Narrow screens put the type over far more of the image, so the scrim
     has to work harder for the gold lines to stay readable. */
  .banner .carousel-item::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 20%, rgba(0,0,0,.7) 48%, rgba(0,0,0,.96) 100%),
      radial-gradient(96% 46% at 50% 78%, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 60%, transparent 82%);
  }
  .bannerText { bottom: 14%; }
  .bannerKicker { letter-spacing: .26em; }
  .bannerMeta { gap: .45rem .9rem; font-size: .62rem; letter-spacing: .16em; }
  .bannerCtas .button, .bannerCtas .buttonGhost { padding-left: 1.4rem; padding-right: 1.4rem; }
  .scrollCue { display: none; }
  /* the bottom bar already carries Call / WhatsApp / Enquire — the side tab
     and its pop-out form only crowd the screen here */
  .enquiryBtn, .stickyForm { display: none !important; }

  .legacyStats strong { font-size: 1.2rem; }
  .legacyStats div { padding: .9rem .5rem; }

  .galleryWrapper .heading .h1 { font-size: 1.7rem; }
  .stickyForm { width: calc(100vw - 32px); right: 16px; }
  .footerLight .footText p { font-size: .82rem; }
  .reraRail .inner {
    gap: 0 .9rem;
    padding: .34rem .75rem;
    font-size: .6rem;
    letter-spacing: .02em;
  }
  .reraRail b { font-size: .54rem; letter-spacing: .12em; margin-right: .3rem; }
  .button-top { left: 16px; }
  .filmToggle { right: 1rem; bottom: 1rem; }
}

@media (max-width: 575.98px) {
  /* no-JS fallback: the rail stacks on top of the Call/WhatsApp/Enquire bar,
     which Bootstrap only shows below this breakpoint (d-sm-none) */
  :root { --bottomInset: 50px; }
  .reraRail { bottom: 50px; }
  /* both registration numbers stay; the URL would force a second line and
     it is still in the footer alongside the QR code */
  .reraRail a { display: none; }

  .padding { padding-top: 2.8rem; padding-bottom: 2.8rem; }
  .factsRow { grid-template-columns: repeat(2, 1fr); }
  .factBox { border-right: 1px solid var(--line-soft); }
  .factBox:nth-child(even) { border-right: 0; }
  .factBox:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .factBox span { font-size: 1rem; }
  .factBox small { letter-spacing: .22em; }

  .bannerKicker { font-size: .58rem; letter-spacing: .26em; }
  .bannerSub { letter-spacing: .06em; }
  .bannerTitle .thin { letter-spacing: .22em; }

  .amenitiesitem .inner { padding: 1.2rem .5rem; }
  .amenitiesitem span { font-size: .74rem; }
  .amenitiesitem .icon .ico { font-size: 1.5rem; }
  .amFeature img { aspect-ratio: 3 / 4; }
  .amFeature .cap { padding: 2rem .8rem .9rem; }
  .amFeature .cap b { font-size: 1rem; }

  .showGrid { grid-template-columns: 1fr; gap: .75rem; }
  .showItem:nth-child(1),
  .showItem:nth-child(2),
  .showItem:nth-child(3) { grid-column: auto; aspect-ratio: 4 / 3; }

  .legacyStats { grid-template-columns: 1fr; }
  .enquiry-form .inner { padding: 1.6rem 1.1rem; }
  .locBox .inner { padding: 1.5rem 1.2rem; }
  .header .logo img { height: 70px; }
  .header.fixed .logo img { height: 58px; }
  .modal-details img { width: 160px; }
  .qrImg { width: 96px; margin-top: 1rem; }
  .stripCaption { padding: 2rem 1rem 1rem; }
  .mlLightbox { padding: 1rem; }
  .mlLightbox .mlPrev { left: 6px; }
  .mlLightbox .mlNext { right: 6px; }
  .mlLightbox .mlClose { top: 8px; right: 8px; }
}

/* keep both RERA numbers on a single line down to the narrowest phones */
@media (max-width: 400px) {
  .reraRail .inner {
    gap: 0 .55rem;
    padding: .34rem .5rem;
    font-size: .55rem;
  }
  .reraRail b { font-size: .5rem; letter-spacing: .08em; margin-right: .25rem; }
}