/* ═══════════════════════════════════════════════════════════
   ICONIC DHOLERA — MASTER RESPONSIVE STYLESHEET
   Loaded LAST → wins every cascade conflict.
   Uses !important on critical layout-breaking rules only.

   Breakpoints: 960 → 768 → 640 → 480 → 360
═══════════════════════════════════════════════════════════ */

/* ── GLOBAL overflow guard ── */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img  { max-width: 100%; height: auto; }

/* ════════════════════════════════════════════
   ≤ 960px  TABLET LANDSCAPE / SMALL LAPTOP
════════════════════════════════════════════ */
@media (max-width: 960px) {

  /* ── NAVBAR: hide desktop nav, show hamburger ── */
  .nav-links   { display: none !important; }
  .btn-enquire { display: none !important; }
  .hamburger   { display: flex !important; }
  .nav-inner   { padding: 0 24px !important; }

  /* ── CONTAINER ── */
  .container   { padding: 0 28px; }

  /* ── SECTIONS ── */
  .section     { padding: 72px 0; }
  .section-sm  { padding: 56px 0; }
  .page-hero   { padding: 130px 0 80px; }

  /* ── TWO-COL: stack ── */
  .two-col              { flex-direction: column !important; gap: 36px !important; }
  .two-col.reverse      { flex-direction: column !important; }
  .col-text, .col-img   { width: 100% !important; flex: none !important; min-width: 0 !important; }

  /* ── GRIDS: 2-col ── */
  .grid-3 > * { flex: 1 1 calc(50% - 14px) !important; max-width: calc(50% - 14px); }
  .grid-4 > * { flex: 1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px); }

  /* ── HERO SLIDER ── */
  .hs-content  { padding: clamp(100px,14vh,160px) 48px clamp(80px,12vh,140px) !important; }
  .hs-title    { font-size: clamp(30px, 5vw, 58px) !important; }
  .hs-stats-bar { display: none !important; }
  .hs-arrow    { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }

  /* ── STATS STRIP ── */
  .stats-inner { padding: 0 28px; }
  .stat-item   { flex: 1 1 calc(50% - 20px) !important; }
  .stat-item + .stat-item { border-left: none !important; border-top: 1px solid rgba(26,39,68,0.1); }

  /* ── CARDS: 2-col at tablet ── */
  .infra-card  { flex: 1 1 calc(50% - 14px) !important; }
  .amenity-card { flex: 1 1 calc(50% - 14px) !important; }
  .why-card    { flex: 1 1 calc(50% - 14px) !important; }

  /* ── FOOTER ── */
  .footer-brand { flex: 1 1 100% !important; }

  /* ── TABS: horizontal scroll ── */
  .tabs, .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .tab-btn { white-space: nowrap; }
}

/* ════════════════════════════════════════════
   ≤ 768px  TABLET PORTRAIT
════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAVBAR ── */
  .nav-links   { display: none !important; }
  .btn-enquire { display: none !important; }
  .hamburger   { display: flex !important; }
  .nav-inner   { padding: 0 20px !important; }

  /* ── CONTAINER ── */
  .container   { padding: 0 24px; }

  /* ── SECTIONS ── */
  .section     { padding: 64px 0; }
  .page-hero   { padding: 120px 0 72px; }

  /* ── HERO ── */
  .hs-content  { padding: clamp(90px,14vh,140px) 28px clamp(70px,11vh,120px) !important; }
  .hs-title    { font-size: clamp(26px, 5.5vw, 48px) !important; }
  .hs-sub      { font-size: 15px; max-width: 100%; }
  .hs-arrow    { width: 42px; height: 42px; font-size: 18px; }
  .hs-prev     { left: 14px; }
  .hs-next     { right: 14px; }

  /* ── GRIDS ── */
  .grid-3 > * { flex: 1 1 calc(50% - 14px) !important; max-width: calc(50% - 14px); }
  .grid-4 > * { flex: 1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px); }

  /* ── PROXIMITY ── */
  .prox-grid   { grid-template-columns: 1fr !important; gap: 14px; }

  /* ── FOOTER ── */
  .footer-grid { gap: 28px; padding: 44px 0 32px; }
  .footer-brand { flex: 1 1 100% !important; }
  .footer-col  { flex: 1 1 calc(50% - 14px) !important; }

  /* ── TYPOGRAPHY ── */
  .section-title   { font-size: clamp(24px, 4.5vw, 40px) !important; }
  .page-hero-title { font-size: clamp(26px, 6vw, 48px) !important; }
  .page-hero-sub   { font-size: 14px; }

  /* ── IMAGE HEIGHT CAP ── */
  .col-img .img-frame img,
  .col-img .content-img { max-height: 420px; object-fit: cover; }
}

/* ════════════════════════════════════════════
   ≤ 640px  LARGE PHONE / LANDSCAPE
════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── NAVBAR ── */
  .nav-links   { display: none !important; }
  .btn-enquire { display: none !important; }
  .hamburger   { display: flex !important; }
  .nav-inner   { padding: 0 18px !important; height: 58px !important; }
  .nav-logo-img { height: 34px !important; }

  /* ── CONTAINER ── */
  .container   { padding: 0 18px !important; }
  .stats-inner { padding: 0 18px !important; }

  /* ── SECTIONS ── */
  .section     { padding: 52px 0 !important; }
  .section-sm  { padding: 40px 0 !important; }
  .page-hero   { padding: 100px 0 60px !important; }

  /* ── HERO SLIDER ── */
  .hero-slider { min-height: 100vh; }
  .hs-content  {
    padding: 88px 18px 68px !important;
  }
  .hs-badge    { font-size: 8px !important; letter-spacing: 2px !important; padding: 5px 12px !important; }
  .hs-title    { font-size: clamp(24px, 8vw, 38px) !important; letter-spacing: -0.5px !important; margin-bottom: 14px !important; }
  .hs-sub      { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 20px !important; max-width: 100% !important; }
  .hs-ctas     { flex-direction: column !important; gap: 10px !important; }
  .hs-ctas .btn-gold,
  .hs-ctas .btn-outline { width: 100% !important; text-align: center !important; display: block !important; }
  .hs-arrow    { display: none !important; }
  .hs-dots     { bottom: 14px !important; gap: 8px !important; }
  .hs-stats-bar { display: none !important; }

  /* ── TYPOGRAPHY ── */
  .section-title   { font-size: clamp(22px, 7vw, 34px) !important; }
  .section-sub     { font-size: 14px !important; }
  .page-hero-title { font-size: clamp(24px, 8vw, 40px) !important; }
  .page-hero-sub   { font-size: 13px !important; }
  .cta-title       { font-size: clamp(20px, 6.5vw, 30px) !important; }

  /* ── TWO-COL ── */
  .two-col              { flex-direction: column !important; gap: 24px !important; }
  .two-col.reverse      { flex-direction: column !important; }
  .col-text, .col-img   { width: 100% !important; flex: none !important; }
  .col-img .img-frame img,
  .col-img .content-img { max-height: 280px !important; object-fit: cover; }

  /* ── GRIDS: all 1-col ── */
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * { flex: 1 1 100% !important; max-width: 100% !important; }
  .grid-2, .grid-3, .grid-4 { gap: 16px !important; }

  /* ── CARDS: 1-col ── */
  .infra-card,
  .amenity-card,
  .why-card    { flex: 1 1 100% !important; max-width: 100% !important; }
  .infra-card  { padding: 20px 18px !important; }
  .amenity-card { padding: 24px 20px !important; }
  .why-card    { padding: 24px 20px !important; }
  .why-card h3 { font-size: 16px !important; }

  /* ── SPACE CARDS ── */
  .space-card  { flex: 1 1 100% !important; max-width: 100% !important; }
  .space-card-body { padding: 18px !important; }

  /* ── PROXIMITY ── */
  .prox-grid   { grid-template-columns: 1fr !important; gap: 12px !important; }
  .prox-card   { padding: 14px 16px !important; gap: 12px !important; }
  .prox-icon-circle { width: 38px !important; height: 38px !important; }
  .prox-time   { font-size: 15px !important; }
  .prox-info h4 { font-size: 13px !important; }
  .prox-info p  { font-size: 11px !important; }

  /* ── STATS STRIP ── */
  .stats-strip  { padding: 24px 0 !important; }
  .stat-item    { flex: 1 1 calc(50% - 9px) !important; padding: 12px 14px !important; }
  .stat-num     { font-size: 22px !important; }
  .stat-item + .stat-item { border-left: none !important; }

  /* ── CTA BAND ── */
  .cta-band     { padding: 52px 0 !important; }
  .cta-actions  { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  .cta-actions .btn-white,
  .cta-actions .btn-outline-white { width: 100% !important; text-align: center !important; display: block !important; }

  /* ── CONTACT ── */
  .contact-card  { flex: 1 1 100% !important; padding: 24px 18px !important; }
  .contact-info-card { flex: 1 1 100% !important; padding: 20px !important; }
  .two-col .contact-card,
  .two-col [style*="flex:1 1 300px"],
  .two-col [style*="flex:1 1 400px"] { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }
  .form-row    { flex-direction: column !important; }

  /* ── TABS ── */
  .tabs, .tab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .tab-btn     { white-space: nowrap !important; padding: 10px 14px !important; font-size: 9.5px !important; }

  /* ── MODAL ── */
  .modal-box   { padding: 28px 18px !important; width: 96% !important; }
  .modal-title { font-size: 20px !important; }

  /* ── FOOTER ── */
  .site-footer  { padding: 44px 0 20px !important; }
  .footer-grid  { gap: 24px !important; padding: 36px 0 28px !important; }
  .footer-brand { flex: 1 1 100% !important; }
  .footer-col   { flex: 1 1 calc(50% - 12px) !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }

  /* ── DEV CELLS ── */
  .dev-cell    { flex: 1 1 calc(50% - 8px) !important; }

  /* ── TIMELINE ── */
  .timeline    { padding-left: 24px !important; }

  /* ── PULL QUOTE ── */
  .pull-quote  { padding: 16px 18px !important; }

  /* ── SPEC TABLE WRAPPER ── */
  .specs-table-wrap,
  div[style*="overflow-x:auto"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── DH STATS ROW ── */
  div[style*="flex:1 1 100px"] { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; }
}

/* ════════════════════════════════════════════
   ≤ 480px  STANDARD PHONE PORTRAIT
════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── NAVBAR ── */
  .nav-links   { display: none !important; }
  .btn-enquire { display: none !important; }
  .hamburger   { display: flex !important; }
  .nav-inner   { padding: 0 14px !important; height: 56px !important; }
  .nav-logo-img { height: 30px !important; }

  /* ── CONTAINER ── */
  .container   { padding: 0 14px !important; }
  .stats-inner { padding: 0 14px !important; }

  /* ── SECTIONS ── */
  .section     { padding: 44px 0 !important; }
  .section-sm  { padding: 36px 0 !important; }
  .page-hero   { padding: 90px 0 52px !important; }

  /* ── HERO ── */
  .hs-content  { padding: 80px 14px 60px !important; }
  .hs-title    { font-size: clamp(20px, 8vw, 32px) !important; }
  .hs-sub      { font-size: 12px !important; }
  .hs-badge    { font-size: 7.5px !important; }

  /* ── TYPOGRAPHY ── */
  .section-title   { font-size: clamp(20px, 7.5vw, 30px) !important; }
  .page-hero-title { font-size: clamp(20px, 8vw, 34px) !important; }
  .cta-title       { font-size: clamp(18px, 7vw, 26px) !important; }

  /* ── GRIDS: 1-col ── */
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * { flex: 1 1 100% !important; max-width: 100% !important; }

  /* ── ALL CARDS: 1-col ── */
  .infra-card,
  .amenity-card,
  .why-card,
  .space-card,
  .dev-cell    { flex: 1 1 100% !important; max-width: 100% !important; }

  /* ── STATS: 2-col ── */
  .stat-item   { flex: 1 1 calc(50% - 7px) !important; padding: 10px !important; }
  .stat-num    { font-size: 20px !important; }
  .stat-label  { font-size: 9px !important; }

  /* ── DH STATS: 1-col ── */
  div[style*="flex:1 1 100px"] { flex: 1 1 100% !important; min-width: 0 !important; }

  /* ── CTA BUTTONS full width ── */
  .cta-band .btn-gold,
  .cta-band .btn-white,
  .cta-band .btn-outline,
  .cta-band .btn-outline-white { display: block !important; width: 100% !important; text-align: center !important; }

  /* ── FOOTER COLS: 1-col ── */
  .footer-col  { flex: 1 1 100% !important; }

  /* ── MODAL ── */
  .modal-box   { padding: 24px 14px !important; width: 98% !important; }
  .modal-title { font-size: 18px !important; }

  /* ── CONTACT: both cols full width ── */
  .two-col .contact-card,
  .two-col [class*="fu"] { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; }

  /* ── IMAGE HEIGHT CAP ── */
  .col-img .img-frame img,
  .col-img .content-img { max-height: 220px !important; }

  /* ── PROX CARDS: restructure on tiny screens ── */
  .prox-card   { flex-direction: row !important; flex-wrap: wrap !important; }

  /* ── TABS ── */
  .tab-btn     { padding: 10px 12px !important; font-size: 9px !important; }
}

/* ════════════════════════════════════════════
   ≤ 360px  SMALL PHONE
════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* ── NAVBAR ── */
  .nav-links   { display: none !important; }
  .btn-enquire { display: none !important; }
  .nav-inner   { padding: 0 12px !important; height: 54px !important; }
  .nav-logo-img { height: 28px !important; }

  /* ── CONTAINER ── */
  .container   { padding: 0 12px !important; }
  .stats-inner { padding: 0 12px !important; }

  /* ── SECTIONS ── */
  .section     { padding: 36px 0 !important; }
  .page-hero   { padding: 84px 0 44px !important; }

  /* ── HERO ── */
  .hs-content  { padding: 72px 12px 52px !important; }
  .hs-title    { font-size: clamp(18px, 8.5vw, 28px) !important; }
  .hs-sub      { font-size: 11.5px !important; }
  .hs-badge    { display: none !important; }

  /* ── TYPOGRAPHY ── */
  .section-title   { font-size: clamp(18px, 7.5vw, 26px) !important; }
  .page-hero-title { font-size: clamp(18px, 8.5vw, 28px) !important; }

  /* ── STATS: 1-col ── */
  .stat-item   { flex: 1 1 100% !important; border-left: none !important; border-top: 1px solid rgba(26,39,68,0.1) !important; }

  /* ── FOOTER ── */
  .footer-col  { flex: 1 1 100% !important; }

  /* ── GRIDS / CARDS: 1-col ── */
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > *,
  .infra-card,
  .amenity-card,
  .why-card,
  .space-card,
  .dev-cell    { flex: 1 1 100% !important; max-width: 100% !important; }

  /* ── MODAL: bottom sheet ── */
  .modal-overlay { align-items: flex-end !important; }
  .modal-box   { width: 100% !important; border-radius: 12px 12px 0 0 !important; padding: 20px 12px !important; }
}