/* ════════════════════════════════════════════
   ICONIC — CSS ADDITIONS (logo + light variants + images)
════════════════════════════════════════════ */

/* ── GLOBAL FONT OVERRIDE: Remove Cormorant Garamond entirely ── */
/* All headings and titles now use Montserrat (no serif on this site) */
:root {
  --font-serif: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ── STAT NUMBERS: always Montserrat, always bold, always readable ── */
.stat-num,
.hs-num,
.dh-stat-num,
.hero-stat .hs-num,
.hs-stat-item .hs-num {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

/* ── REAL LOGO IMAGE ── */
.nav-logo { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; text-decoration: none; }
.nav-logo-img {
  height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
  /* logo.png has transparent background — renders on dark navbar naturally */
}
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 12px;
}

/* ── HOME HERO BG ── */
.home-hero {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.88) 0%, rgba(15,26,48,0.82) 100%),
                    url('../img/banner-building.jpg');
  background-size: cover;
  background-position: center;
}

/* ── PAGE HERO BG (sub-pages) ── */
.page-hero { background-size: cover; background-position: center; }
.page-hero-bg-about {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.88) 0%, rgba(20,35,65,0.85) 100%),
                    url('../img/iconic-building-dusk.jpg');
}
.page-hero-bg-dholera {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.90) 0%, rgba(20,35,65,0.88) 100%),
                    url('../img/dholera-airport.jpg');
}
.page-hero-bg-project {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.88) 0%, rgba(20,35,65,0.85) 100%),
                    url('../img/building-exterior.jpg');
}
.page-hero-bg-amenities {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.88) 0%, rgba(20,35,65,0.85) 100%),
                    url('../img/amenities-terrace.jpg');
}
.page-hero-bg-location {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.88) 0%, rgba(20,35,65,0.85) 100%),
                    url('../img/expressway-night.jpg');
}
.page-hero-bg-contact {
  background-image: linear-gradient(135deg, rgba(10,18,35,0.88) 0%, rgba(20,35,65,0.85) 100%),
                    url('../img/iconic-conference.jpg');
}

/* ── REAL IMAGES ── */
.content-img { width: 100%; display: block; border-radius: var(--r); object-fit: cover; aspect-ratio: 4/3; }
.content-img-wide { aspect-ratio: 16/9; }
.content-img-sq { aspect-ratio: 1/1; }

/* img-frame with real img inside — padding-based offset so border never clips */
.img-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 14px 14px 0; /* reserves space for the offset border */
}
.img-frame::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 2px solid rgba(212,146,42,0.55);
  border-radius: calc(var(--r) + 4px);
  pointer-events: none;
  z-index: 0;
}
.img-frame img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r);
  position: relative;
  z-index: 1;
}
/* Inside space-cards: tighter offset so frame stays within card */
.space-card .img-frame {
  padding: 0 10px 10px 0;
}
.space-card .img-frame::before {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

/* ── STATS ON LIGHT (home hero stats strip) ── */
.stats-strip.on-cream { background: var(--cream); }
.stats-strip.on-cream .stat-num { color: var(--navy); }
.stats-strip.on-cream .stat-label { color: var(--gray); }
.stats-strip.on-cream .stat-item + .stat-item { border-left-color: rgba(26,39,68,0.15); }

/* ── DH-STAT ON LIGHT ── */
.dh-stat.on-light { border-color: rgba(26,39,68,0.15); background: #fff; -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); }
.dh-stat.on-light .stat-num { color: var(--navy); }
.dh-stat.on-light .stat-label { color: var(--gray); }

/* ── INFRA-CARD ON LIGHT ── */
.infra-card.on-light { background: #fff; border-color: rgba(26,39,68,0.10); -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); }
.infra-card.on-light h4 { color: var(--navy); }
.infra-card.on-light p { color: var(--gray); }

/* ── AMENITY-CARD ON LIGHT ── */
.amenity-card.on-light { background: #fff; border-color: rgba(26,39,68,0.10); -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); }
.amenity-card.on-light h3 { color: var(--navy); }
.amenity-card.on-light p { color: var(--gray); }
.amenity-card.on-light .icon-circle { background: rgba(212,146,42,0.12); }

/* ── VALUE-CARD ON LIGHT ── */
.value-card.on-light { background: #fff; border-left-color: var(--gold); }
.value-card.on-light h3 { color: var(--navy); }
.value-card.on-light p { color: var(--gray); }

/* ── TIMELINE — SCROLL ANIMATION ── */

/* Dim the static track line; the JS-injected fill covers it */
.timeline::before {
  background: rgba(212,146,42,0.18) !important;
}

/* JS-injected progress fill */
.tl-line-fill {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), rgba(212,146,42,0.45));
  height: 0;
  pointer-events: none;
  z-index: 1;
  transition: height 0.12s linear;
}

/* Dot: starts small & dim, pops in when active */
.tl-dot {
  background:    rgba(212,146,42,0.25) !important;
  border-color:  rgba(255,255,255,0.12) !important;
  transform:     scale(0.55);
  transition:    transform 0.45s cubic-bezier(0.34,1.56,0.64,1),
                 background 0.35s ease,
                 border-color 0.35s ease,
                 box-shadow 0.35s ease;
  z-index:       2;
}
.tl-item.tl-active .tl-dot {
  transform:    scale(1);
  background:   var(--gold) !important;
  border-color: rgba(255,255,255,0.35) !important;
  box-shadow:   0 0 0 5px rgba(212,146,42,0.18), 0 0 18px rgba(212,146,42,0.45);
}

/* Content: slides in from right when active */
.tl-item .tl-content {
  opacity:    0;
  transform:  translateX(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.tl-item.tl-active .tl-content {
  opacity:   1;
  transform: translateX(0);
}

/* Reduced spacing between year label and title */
.tl-year  { margin-bottom: 2px !important; font-size: 11px; letter-spacing: 3px; }
.tl-title { margin-bottom: 5px !important; }
.tl-item  { padding-bottom: 32px; }

/* Fix title/desc colours on the dark (navy) background */
.bg-navy .tl-title { color: rgba(255,255,255,0.92) !important; }
.bg-navy .tl-desc  { color: rgba(255,255,255,0.55) !important; }

/* Legacy on-light overrides (kept for other uses) */
.timeline.on-light .tl-dot { background: var(--gold); border-color: var(--cream); }
.timeline.on-light .tl-title { color: var(--navy); }
.timeline.on-light .tl-desc  { color: var(--gray); }

/* ── SPEC TABLE ON LIGHT ── */
.specs-table.on-light { border-color: rgba(26,39,68,0.1); }
.specs-table.on-light th { background: var(--navy); color: #fff; }
.specs-table.on-light td { color: var(--dark); border-color: rgba(26,39,68,0.08); }
.specs-table.on-light tr:nth-child(even) td { background: rgba(247,244,238,0.6); }

/* ── CONTACT BOX ON CREAM ── */
.contact-card.on-light { background: #fff; border: 1px solid rgba(26,39,68,0.1); -webkit-box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); border-radius: var(--r); padding: 40px; }
.contact-card.on-light .form-label { color: var(--dark); }
.contact-card.on-light .form-input,
.contact-card.on-light .form-select,
.contact-card.on-light .form-textarea { background: var(--cream); border-color: rgba(26,39,68,0.15); color: var(--dark); }
.contact-card.on-light .form-input::-webkit-input-placeholder,
.contact-card.on-light .form-textarea::-webkit-input-placeholder { color: var(--gray); }
.contact-card.on-light .form-input::placeholder,
.contact-card.on-light .form-textarea::placeholder { color: var(--gray); }

/* Contact details card */
.contact-info-card { background: #fff; border: 1px solid rgba(26,39,68,0.1); border-radius: var(--r); padding: 36px; box-shadow: var(--shadow-sm); }
.contact-info-card h3 { color: var(--navy); margin-bottom: 24px; }
.contact-info-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(26,39,68,0.07); }
.contact-info-row:last-child { border-bottom: none; }
.contact-info-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(212,146,42,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.contact-info-text h4 { color: var(--gold); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.contact-info-text p, .contact-info-text a { color: var(--dark); text-decoration: none; font-size: 15px; }
.contact-info-text a:hover { color: var(--gold); }

/* ── PROXIMITY CARDS (redesigned horizontal layout) ── */
.prox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.prox-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(26,39,68,0.1);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s, transform 0.25s;
}
.prox-card:hover {
  box-shadow: 0 6px 24px rgba(26,39,68,0.1);
  transform: translateY(-2px);
}
.prox-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 64px;
}
.prox-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.prox-time {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
  line-height: 1;
}
.prox-divider {
  width: 1px;
  height: 52px;
  background: rgba(26,39,68,0.1);
  flex-shrink: 0;
}
.prox-info h4 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
  line-height: 1.3;
}
.prox-info p {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 680px) {
  .prox-grid { grid-template-columns: 1fr; }
}

/* Legacy prox-item (kept for any other pages) */
.prox-item.on-light { border-color: rgba(26,39,68,0.12); background: #fff; }
.prox-item.on-light .prox-label { color: var(--dark); }
.prox-item.on-light .prox-time  { color: var(--gold); }

/* ── WHY CARD / FEATURE CARD ON LIGHT ── */
.why-card { background: #fff; border: 1px solid rgba(26,39,68,0.08); border-radius: var(--r); padding: 32px 28px; -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.06); -webkit-transition: -webkit-transform 0.25s, box-shadow 0.25s; transition: transform 0.25s, box-shadow 0.25s; text-align: center; }
.why-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(212,146,42,0.3); }
.why-card .icon { font-size: 36px; margin-bottom: 14px; }
.why-card h3 { color: var(--navy); font-size: 18px; margin-bottom: 10px; }
.why-card p { color: var(--gray); font-size: 14px; line-height: 1.7; }

/* ── SPACE TYPE CARD ON WHITE ── */
.space-card { background: var(--cream); border-radius: var(--r); overflow: hidden; -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); }
.space-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.space-card-body { padding: 28px; }
.space-card-body h3 { color: var(--navy); font-size: 20px; margin-bottom: 10px; }
.space-card-body p { color: var(--gray); font-size: 14px; margin-bottom: 16px; }
.space-card-body ul { list-style: none; padding: 0; }
.space-card-body ul li { color: var(--dark); font-size: 13px; padding: 5px 0; padding-left: 18px; position: relative; }
.space-card-body ul li::before { content: "✓"; color: var(--gold); position: absolute; left: 0; font-weight: 700; }

/* ── COMPANY LOGO BADGE ── */
.company-badge { background: #fff; border: 1px solid rgba(26,39,68,0.1); border-radius: 8px; padding: 16px 24px; display: flex; align-items: center; justify-content: center; min-height: 70px; font-weight: 700; color: var(--navy); font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* ── FAQ ON WHITE ── */
.faq-item.on-light { border-color: rgba(26,39,68,0.1); }
.faq-item.on-light summary { color: var(--dark); }
.faq-item.on-light p { color: var(--gray); }

/* ── RERA NOTICE ── */
.rera-notice { background: rgba(212,146,42,0.07); border: 1px solid rgba(212,146,42,0.25); border-radius: 8px; padding: 14px 20px; font-size: 12px; color: var(--gray); margin-top: 32px; }
.rera-notice strong { color: var(--navy); }

/* ── SECTION LABEL ── */
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; }

/* ── OVERLINE ON DARK ── */
.on-dark { color: #fff; }
.on-dark .section-label { color: var(--gold); }

/* ── GLOBAL DARK-SECTION TEXT SAFETY NET ──
   Any p / li / span / h* inside .bg-navy or .bg-navy2 that does NOT
   have an inline style color will inherit rgba(255,255,255,0.82).
   Elements with explicit inline styles are unaffected.
   This prevents "dark text on dark background" for any element
   that was missed or added later. */
.bg-navy p,
.bg-navy li,
.bg-navy span:not(.section-label):not(.sep),
.bg-navy2 p,
.bg-navy2 li {
  color: rgba(255,255,255,0.82);
}
/* Restore gold for section labels and gold-colored elements */
.bg-navy .section-label,
.bg-navy2 .section-label,
.bg-navy .dh-stat-label,
.bg-navy .hs-label { color: rgba(255,255,255,0.65); }

/* Cards on dark bg keep their own bg — white text on those white cards is wrong,
   so restore navy/dark text for on-light variants */
.bg-navy .amenity-card.on-light p,
.bg-navy .amenity-card.on-light li,
.bg-navy .why-card p,
.bg-navy .why-card li,
.bg-navy .highlight-card p,
.bg-navy .highlight-card li { color: var(--gray); }
.bg-navy .why-card h3 { color: var(--navy); }

/* Timeline in dark sections: increase opacity for readability */
.bg-navy .tl-title,
.bg-navy2 .tl-title { color: rgba(255,255,255,0.95) !important; font-weight: 600 !important; }
.bg-navy .tl-desc,
.bg-navy2 .tl-desc  { color: rgba(255,255,255,0.72) !important; }
.bg-navy .tl-year,
.bg-navy2 .tl-year  { color: var(--gold) !important; }

/* ── RESPONSIVE LOGO ── */
@media (max-width: 640px) {
  .logo-ic, .logo-nic { font-size: 22px; }
  .logo-o-svg { height: 23px; width: 23px; }
  .logo-dholera { font-size: 8px; letter-spacing: 4px; }
  .logo-tagline { display: none; }
}

/* ── GOLD SMALL BUTTON ── */
.btn-gold-sm { display: inline-block; padding: 8px 18px; background: var(--gold); color: #fff; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.btn-gold-sm:hover { background: var(--gold-light); }

/* ── SECTION SEPARATOR ── */
.sep { width: 60px; height: 3px; background: var(--gold); margin: 16px 0 28px; border-radius: 2px; }
.sep-center { margin-left: auto; margin-right: auto; }

/* ── GRID 3 / GRID 4 HELPERS ── */
.grid-3 { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 28px; }
.grid-3 > * { -webkit-flex: 1 1 280px; flex: 1 1 280px; }
.grid-4 { display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 20px; }
.grid-4 > * { -webkit-flex: 1 1 220px; flex: 1 1 220px; }

/* ── PULL QUOTE ── */
.pull-quote { border-left: 4px solid var(--gold); padding: 20px 28px; margin: 32px 0; background: rgba(212,146,42,0.05); border-radius: 0 8px 8px 0; }
.pull-quote p { font-family: var(--font-serif); font-size: clamp(18px, 2.5vw, 22px); color: var(--navy); font-style: italic; line-height: 1.6; }

/* ════════════════════════════════════════════
   STRUCTURAL CSS — new classes used in rebuilt pages
════════════════════════════════════════════ */

/* ── NAVBAR INNER ── */
/* Remove style.css's hardcoded `padding: 0 56px` on #navbar — .nav-inner
   already handles centering/padding so they must not stack. */
#navbar { padding: 0; }
.nav-inner {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 40px;
}
.nav-links {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 32px; list-style: none;
}
.nav-dropdown { position: relative; }
.dropdown-toggle {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 5px; cursor: pointer;
}
.dropdown-toggle svg { -webkit-transition: -webkit-transform .25s; transition: transform .25s; }
.nav-dropdown:hover .dropdown-toggle svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dropdown-menu {
  /* Use opacity instead of display:none so padding-top bridges the gap without breaking hover */
  position: absolute; top: 100%; left: 0;
  background: var(--navy2); min-width: 200px;
  border-top: 2px solid var(--gold);
  -webkit-box-shadow: 0 8px 32px rgba(0,0,0,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 14px 0 6px; /* 14px top padding = visual gap without a real hover gap */
  border-radius: 0 0 4px 4px; z-index: 10;
  opacity: 0; pointer-events: none;
  -webkit-transform: translateY(-4px); transform: translateY(-4px);
  -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s;
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1; pointer-events: auto;
  -webkit-transform: translateY(0); transform: translateY(0);
}
.dropdown-link {
  display: block; padding: 11px 22px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  -webkit-transition: color .2s, background .2s; transition: color .2s, background .2s;
}
.dropdown-link:hover { color: var(--gold); background: rgba(212,146,42,0.08); }
.dropdown-link.active { color: var(--gold); }

/* ── HERO (HOME) ── */
.hero {
  min-height: 100vh; display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center; position: relative; overflow: hidden;
  background: var(--navy2);
}
.hero-content { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.hero-badge {
  display: inline-block; padding: 6px 16px;
  border: 1px solid rgba(212,146,42,0.5); border-radius: 20px;
  font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
}
.hero-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(40px, 6.5vw, 82px); color: var(--white);
  line-height: 1.08; margin-bottom: 24px; letter-spacing: -1px;
}
.hero-title em { color: var(--gold); font-style: italic; }
.hero-sub {
  font-size: clamp(14px, 1.6vw, 17px); color: rgba(255,255,255,0.72);
  font-weight: 300; line-height: 1.8; margin-bottom: 36px; max-width: 600px;
}
.hero-ctas { display: -webkit-flex; display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-stats {
  display: -webkit-flex; display: flex; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 32px;
  max-width: 500px;
}
.hero-stat { -webkit-flex: 1; flex: 1; padding: 0 24px; }
.hero-stat + .hero-stat { border-left: 1px solid rgba(255,255,255,0.12); }
.hs-num { display: block; font-size: 28px; font-weight: 800; color: var(--gold); line-height: 1; }
.hs-unit { display: inline; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.5); }
.hs-label { display: block; font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.br-desk { display: none; }
@media (min-width: 960px) { .br-desk { display: block; } }

/* ── PAGE HERO TEXT ── */
.page-hero-title {
  font-family: var(--font-serif); font-size: clamp(32px, 5vw, 62px);
  font-weight: 600; color: var(--white); line-height: 1.1; margin-bottom: 16px;
}
.page-hero-title em { color: var(--gold); font-style: italic; }
.page-hero-sub {
  font-size: clamp(14px, 1.6vw, 18px); color: rgba(255,255,255,0.7);
  font-weight: 300; max-width: 560px; margin: 0 auto; line-height: 1.7;
}

/* ── CONTAINER ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { .container { padding: 0 20px; } }

/* ── TWO-COL LAYOUT ── */
.two-col {
  display: -webkit-flex; display: flex;
  gap: 60px; -webkit-align-items: center; align-items: center;
}
.two-col.reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
.col-text, .col-img { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) {
  .two-col { -webkit-flex-direction: column; flex-direction: column; }
  .two-col.reverse { -webkit-flex-direction: column; flex-direction: column; }
  .col-text, .col-img { width: 100%; }
}

/* ── SECTION HEADER ── */
.section-header { margin-bottom: 0; }
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 46px);
  font-weight: 600; color: var(--navy); line-height: 1.15; margin-bottom: 12px;
}
.section-title em { color: var(--gold); font-style: italic; }
.section-title.on-dark { color: var(--white); }
.section-sub {
  font-size: 15px; color: var(--gray); line-height: 1.75;
  max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ── STATS STRIP ── */
.stats-strip { padding: 40px 0; background: var(--cream); }
.stats-inner {
  display: -webkit-flex; display: flex;
  flex-wrap: wrap; gap: 0; max-width: var(--max-w); margin: 0 auto; padding: 0 40px;
}
.stat-item {
  -webkit-flex: 1 1 200px; flex: 1 1 200px; padding: 20px 28px; text-align: center;
}
.stat-item + .stat-item { border-left: 1px solid rgba(26,39,68,0.15); }
.stat-num { display: block; font-size: 28px; font-weight: 800; color: var(--navy); }
.stat-label { display: block; font-size: 11px; color: var(--gray); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 640px) {
  .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(26,39,68,0.1); }
}

/* ── FOOTER GRID ── */
.footer-grid {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 48px;
  padding: 64px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-align-items: flex-start; align-items: flex-start;
}
/* Brand column: wider */
.footer-brand {
  -webkit-flex: 2 1 260px; flex: 2 1 260px;
  min-width: 220px;
}
.footer-brand .nav-logo-img { height: 44px; width: auto; display: block; margin-bottom: 14px; }
/* Three link columns: equal */
.footer-grid .footer-col {
  -webkit-flex: 1 1 140px; flex: 1 1 140px;
  min-width: 120px;
}

.footer-tagline-text { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.7; margin: 0; }
.footer-heading {
  font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; display: block;
}
.footer-links { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.6); -webkit-transition: color .2s; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }
.footer-links li { font-size: 13px; color: rgba(255,255,255,0.5); }
.footer-rera { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 4px; }

/* Footer bottom bar */
.footer-bottom {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.32); margin: 0; }

@media (max-width: 768px) {
  .footer-grid { gap: 32px; padding: 40px 0 32px; }
  .footer-brand { -webkit-flex: 1 1 100%; flex: 1 1 100%; }
  .footer-grid .footer-col { -webkit-flex: 1 1 calc(50% - 16px); flex: 1 1 calc(50% - 16px); }
  .footer-bottom { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }
}

/* ── BUTTON VARIANTS (missing ones) ── */
.btn-gold {
  display: inline-block; padding: 13px 32px;
  background: var(--gold); color: var(--white);
  border-radius: var(--r); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  -webkit-transition: background .25s; transition: background .25s; border: none; cursor: pointer;
}
.btn-gold:hover { background: var(--gold-light); }
.btn-outline {
  display: inline-block; padding: 13px 32px;
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--r); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  -webkit-transition: border-color .25s, color .25s; transition: border-color .25s, color .25s;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline-navy {
  display: inline-block; padding: 13px 32px;
  background: transparent; color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: var(--r); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  -webkit-transition: background .25s, color .25s; transition: background .25s, color .25s;
  cursor: pointer;
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

/* ── CTA BAND ── */
.cta-band { padding: 80px 0; background: var(--gold); text-align: center; }
.cta-title {
  font-family: var(--font-serif); font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 600; color: var(--white); margin-bottom: 12px; line-height: 1.2;
}
.cta-sub { font-size: 15px; color: rgba(255,255,255,0.85); margin-bottom: 32px; }
.cta-actions { display: -webkit-flex; display: flex; gap: 16px; -webkit-justify-content: center; justify-content: center; flex-wrap: wrap; }
.btn-white {
  display: inline-block;
  padding: 14px 36px;
  background: #fff;
  color: var(--navy);
  border: 2px solid #fff;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 0.25s, color 0.25s;
          transition: background 0.25s, color 0.25s;
}
.btn-white:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn-outline-white {
  display: inline-block;
  padding: 14px 36px;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 0.25s, color 0.25s;
          transition: background 0.25s, color 0.25s;
}
.btn-outline-white:hover { background: #fff; color: var(--gold); }

/* ── FADE-UP DELAYS (.fd-XXX) ── */
.fd-100 { -webkit-transition-delay: .1s; transition-delay: .1s; }
.fd-150 { -webkit-transition-delay: .15s; transition-delay: .15s; }
.fd-200 { -webkit-transition-delay: .2s; transition-delay: .2s; }
.fd-300 { -webkit-transition-delay: .3s; transition-delay: .3s; }
.fd-400 { -webkit-transition-delay: .4s; transition-delay: .4s; }
.fd-450 { -webkit-transition-delay: .45s; transition-delay: .45s; }
.fd-500 { -webkit-transition-delay: .5s; transition-delay: .5s; }
.fd-600 { -webkit-transition-delay: .6s; transition-delay: .6s; }
.fd-700 { -webkit-transition-delay: .7s; transition-delay: .7s; }
.fd-750 { -webkit-transition-delay: .75s; transition-delay: .75s; }
.fd-800 { -webkit-transition-delay: .8s; transition-delay: .8s; }
.fd-900 { -webkit-transition-delay: .9s; transition-delay: .9s; }

/* ── RESET transition-delay on hover (fd-* bleed fix) ── */
/* Hoverable cards that carry .fd-* delays must snap immediately on mouse-over */
.infra-card:hover,
.amenity-card:hover,
.why-card:hover,
.value-card:hover,
.prox-card:hover,
.faq-item:hover,
.contact-card:hover {
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
}

/* ── TEXT UTILITIES ── */
.text-center { text-align: center; }

/* ── TAB BAR ── */
.tabs-wrap { background: #fff; border-radius: var(--r); -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); overflow: hidden; }
.tab-bar {
  display: -webkit-flex; display: flex; flex-wrap: wrap;
  border-bottom: 2px solid rgba(26,39,68,0.08); background: var(--cream);
}
.tab-btn {
  padding: 14px 22px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gray); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -2px;
  -webkit-transition: color .2s, border-color .2s; transition: color .2s, border-color .2s;
}
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); background: #fff; }
.tab-panel { display: none; padding: 36px; }
.tab-panel.active { display: block; }

/* ── SPECS TABLE ── */
.specs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.specs-table th { background: var(--navy); color: var(--white); text-align: left; padding: 12px 16px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.specs-table td { padding: 12px 16px; border-bottom: 1px solid rgba(26,39,68,0.08); color: var(--dark); }
.specs-table tr:last-child td { border-bottom: none; }
.specs-table tr:nth-child(even) td { background: rgba(247,244,238,0.5); }

/* ── INFRA ICON ── */
.infra-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.infra-card {
  padding: 28px 24px; border: 1px solid rgba(212,146,42,0.2); border-radius: var(--r);
  background: rgba(255,255,255,0.03);
  -webkit-transition: border-color .25s, background .25s; transition: border-color .25s, background .25s;
}

/* ── MODAL BOX ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(5,10,22,0.85);
  -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;
}
.modal-overlay.open { display: -webkit-flex; display: flex; }
.modal-box {
  background: var(--navy2); border-radius: calc(var(--r) + 4px);
  padding: 48px 40px; max-width: 560px; width: 92%; position: relative;
  max-height: 90vh; overflow-y: auto;
  -webkit-box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(212,146,42,0.2);
}
.modal-title { font-family: var(--font-serif); font-size: 28px; color: var(--white); margin-bottom: 6px; }
.modal-sub { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 28px; }
.modal-close {
  position: absolute; top: 16px; right: 20px; font-size: 24px; color: rgba(255,255,255,0.4);
  background: none; border: none; cursor: pointer; line-height: 1; padding: 4px;
  -webkit-transition: color .2s; transition: color .2s;
}
.modal-close:hover { color: var(--gold); }

/* ── FORM ELEMENTS (dark bg defaults) ── */
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r);
  color: var(--white); font-family: var(--font-sans); font-size: 13px;
  -webkit-transition: border-color .25s; transition: border-color .25s;
  -webkit-appearance: none; appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); }
.form-input::-webkit-input-placeholder, .form-textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.3); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-select { cursor: pointer; }
.form-select option { background: var(--navy2); color: var(--white); }
.form-textarea { resize: vertical; min-height: 110px; }
.form-row { display: -webkit-flex; display: flex; gap: 16px; }
.form-row .form-group { -webkit-flex: 1 1 180px; flex: 1 1 180px; }
.form-submit {
  width: 100%; padding: 14px; background: var(--gold); color: var(--white);
  border: none; border-radius: var(--r); font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  -webkit-transition: background .25s; transition: background .25s; margin-top: 8px;
}
.form-submit:hover { background: var(--gold-light); }
.form-submit:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 640px) { .form-row { -webkit-flex-direction: column; flex-direction: column; } }

/* ── SITE FOOTER ── */
.site-footer { background: var(--navy2); padding: 64px 0 32px; }
.footer-bottom {
  display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 28px; font-size: 11px; color: rgba(255,255,255,0.3);
}
@media (max-width: 640px) { .footer-bottom { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } }

/* ── BREADCRUMB ── */
.breadcrumb { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,0.5); -webkit-transition: color .2s; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span:last-child { color: rgba(255,255,255,0.35); }

/* ── HAMBURGER (show on mobile) ── */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .btn-enquire { display: none; }
  .hamburger { display: -webkit-flex; display: flex; }
  .hero-content { padding: 0 20px; }
  .two-col { gap: 32px; }
  .nav-inner { padding: 0 20px; }
}

/* ══════════════════════════════════════════
   MOBILE NAV — full-screen overlay redesign
══════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--navy2, #0F1A30);
  z-index: 9999;
  -webkit-flex-direction: column;
          flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open {
  display: -webkit-flex;
  display: flex;
}

/* Header bar: logo + close button */
.mob-nav-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}
.mob-nav-logo {
  height: 40px;
  width: auto;
  display: block;
}
.mob-nav-close {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.7);
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  cursor: pointer;
  -webkit-transition: background 0.2s, color 0.2s;
          transition: background 0.2s, color 0.2s;
}
.mob-nav-close:hover,
.mob-nav-close:focus { background: rgba(212,146,42,0.18); color: var(--gold); outline: none; }

/* Nav links — stacked column */
.mob-nav-links {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 100%;
  -webkit-flex: 1;
          flex: 1;
  padding: 8px 0;
}
.mob-nav-links a {
  display: block;
  width: 100%;
  padding: 17px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  -webkit-transition: color 0.2s, padding-left 0.22s;
          transition: color 0.2s, padding-left 0.22s;
  text-decoration: none;
}
.mob-nav-links a:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.mob-nav-links a:hover,
.mob-nav-links a.active { color: var(--gold); padding-left: 38px; }

/* CTA button at bottom */
.mob-nav-cta {
  padding: 20px 24px 36px;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}
.mob-nav-cta .btn-gold {
  width: 100%;
  text-align: center;
  padding: 16px 24px;
  font-size: 13px;
  letter-spacing: 2px;
  display: block;
}

/* ── PULL-QUOTE mobile ── */
@media (max-width: 640px) {
  .hero-stats { -webkit-flex-direction: column; flex-direction: column; gap: 12px; }
  .hero-stat + .hero-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px; }
}

/* ════════════════════════════════════════════
   HERO SLIDER
════════════════════════════════════════════ */
.hero-slider {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--navy2);
  /* Prevent text selection when dragging/swiping */
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Individual slides — slide-in from right, slide-out to left */
.hs-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  pointer-events: none; /* inactive slides don't intercept clicks */
  -webkit-transform: translateX(60px);
          transform: translateX(60px);
  -webkit-transition: opacity 0.75s ease, -webkit-transform 0.75s ease;
          transition: opacity 0.75s ease, transform 0.75s ease;
}
.hs-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.hs-slide.leaving {
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-transform: translateX(-60px);
          transform: translateX(-60px);
}
/* Instantly reset content of leaving slide so it animates in fresh next time */
.hs-slide.leaving .hs-badge,
.hs-slide.leaving .hs-title,
.hs-slide.leaving .hs-sub,
.hs-slide.leaving .hs-ctas {
  opacity: 0;
  -webkit-transform: translateY(22px);
          transform: translateY(22px);
  -webkit-transition: none;
          transition: none;
}

/* Auto-advance progress bar */
.hs-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--gold);
  z-index: 20;
  -webkit-transition: none;
          transition: none;
}
.hs-progress-bar.running {
  width: 100%;
  -webkit-transition: width 4s linear;
          transition: width 4s linear;
}

/* Slide content */
.hs-content {
  position: relative;
  z-index: 2;
  padding-top: 200px;
  padding-bottom: 200px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
.hs-badge {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid rgba(212,146,42,0.55);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.hs-title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.06;
  letter-spacing: -1px;
  margin-bottom: 22px;
}
.hs-sub {
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 36px;
}
.hs-ctas {
  display: -webkit-flex;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── SLIDE CONTENT STAGGER ANIMATION ──
   Content starts hidden; .active slide animates each element in sequence.
   .leaving reset (above) sets them back to hidden instantly so they
   re-animate fresh next time the slide becomes active. */
.hs-badge,
.hs-title,
.hs-sub,
.hs-ctas {
  opacity: 0;
  -webkit-transform: translateY(22px);
          transform: translateY(22px);
  -webkit-transition: opacity 0.55s ease, -webkit-transform 0.55s ease;
          transition: opacity 0.55s ease, transform 0.55s ease;
}
.hs-slide.active .hs-badge {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.hs-slide.active .hs-title {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.hs-slide.active .hs-sub {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.hs-slide.active .hs-ctas {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.55s;
          transition-delay: 0.55s;
}

/* ── HERO SLIDER CONTROLS (arrows, dots, stats bar) ── */
.hs-arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 20;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: background 0.2s;
          transition: background 0.2s;
}
.hs-arrow:hover { background: rgba(212,146,42,0.45); }
.hs-prev { left: 28px; }
.hs-next { right: 28px; }

.hs-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 20;
  display: -webkit-flex;
  display: flex;
  gap: 10px;
}
.hs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-transition: background 0.3s, -webkit-transform 0.3s;
          transition: background 0.3s, transform 0.3s;
}
.hs-dot.active {
  background: var(--gold);
  -webkit-transform: scale(1.35);
          transform: scale(1.35);
}

.hs-stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  gap: 0;
  background: rgba(10,18,40,0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-top: 1px solid rgba(212,146,42,0.2);
  padding: 16px 40px;
}
.hs-stat-item {
  text-align: center;
  padding: 0 32px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.hs-stat-item:last-child { border-right: none; }

@media (max-width: 640px) {
  .hs-content { padding-top: 120px; padding-bottom: 120px; }
  .hs-arrow { display: none; }
  .hs-stats-bar { padding: 12px 16px; gap: 0; }
  .hs-stat-item { padding: 0 12px; }
}
;
          transition: background 0.3s, width 0.3s;
  padding: 0;
}
.hs-dot.active {
  background: var(--gold);
  width: 52px;
}

/* Mobile */
@media (max-width: 960px) {
  .hs-content { padding-top: 140px; padding-bottom: 180px; padding-left: 24px; padding-right: 24px; }
  .hs-stats-bar { display: none; }
  .hs-arrow { width: 40px; height: 40px; font-size: 16px; }
  .hs-prev { left: 12px; }
  .hs-next { right: 12px; }
}
@media (max-width: 640px) {
  .hs-content { padding-top: 120px; padding-bottom: 100px; }
  .hs-title { font-size: clamp(30px, 8vw, 46px); }
  .hs-ctas { -webkit-flex-direction: column; flex-direction: column; }
}

/* ── SVG icons inside .icon divs ── */
.why-card .icon { display: flex; align-items: center; justify-content: center; height: 44px; margin-bottom: 14px; }
.why-card .icon svg { display: block; }

/* ── DHOLERA TEASER STAT CARDS ── */
.dh-stat-card {
  flex: 1 1 110px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(212,146,42,0.35);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  -webkit-transition: background 0.25s, border-color 0.25s;
          transition: background 0.25s, border-color 0.25s;
}
.dh-stat-card:hover {
  background: rgba(212,146,42,0.10);
  border-color: rgba(212,146,42,0.6);
}
.dh-stat-num {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 800;
  color: #D4922A;
  line-height: 1;
  margin-bottom: 8px;
}
.dh-stat-unit {
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
  color: rgba(212,146,42,0.75);
}
.dh-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ════════════════════════════════════════════
   CONTACT CARD (form wrapper on contact.html)
════════════════════════════════════════════ */
.contact-card {
  background: #fff;
  border: 1px solid rgba(26,39,68,0.1);
  border-radius: var(--r);
  padding: 40px;
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════
   INFRA-CARD — VERTICAL STACK
   style.css sets display:flex (row) but our HTML has
   icon + h4 + p as direct siblings → force column
════════════════════════════════════════════ */
.infra-card {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* ════════════════════════════════════════════
   HERO SLIDER — OVERLAP FIXES
   ROOT CAUSE: fixed padding-top/bottom (200px each) totals 400px.
   Add ~434px content → 834px box. On 764–840px-tall laptop screens
   the box overflows the slider, pushing CTAs into the stats-bar zone.

   FIX 1 — Viewport-height-relative padding so the content block always
            fits above the stats bar regardless of screen height.
   FIX 2 — Horizontal padding so text clears the side arrow buttons
            (arrows: 52px wide at left/right:32px → 84px footprint).
   FIX 3 — Arrow repositioned using vh so it sits between content
            and stats bar at any screen height.
════════════════════════════════════════════ */
.hs-content {
  /* clamp(min, preferred, max) — shrinks on short viewports */
  padding-top:    clamp(90px, 13vh, 200px);
  padding-bottom: clamp(90px, 13vh, 200px);
  padding-left:   96px;
  padding-right:  96px;
}

/* Arrows: clear the text content block above and the stats bar below.
   Stats bar top-edge is ≈ slider_height − 108px.
   Arrow (52px) bottom at clamp value leaves ≥20px gap to stats bar. */
.hs-arrow {
  top: auto;
  bottom: clamp(116px, 17vh, 175px);
  -webkit-transform: none;
  transform: none;
}

/* ════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE CSS
   Breakpoints: 960px → 768px → 640px → 480px
   All rules here are written AFTER the existing
   media queries so they win the cascade correctly.
════════════════════════════════════════════ */

/* ── TABLET (≤960px) ── */
@media (max-width: 960px) {

  /* Slider — stats-bar is hidden at this breakpoint so no overlap risk */
  .hs-content  { padding-left: 72px; padding-right: 72px;
                 padding-top: 140px; padding-bottom: 120px; }
  .hs-arrow    { bottom: 52px; }          /* no stats-bar here */

  /* Navbar: style.css sets `padding: 0 28px` at this breakpoint — remove it */
  #navbar      { padding: 0; }

  /* Nav inner */
  .nav-inner   { padding: 0 20px; }

  /* Layout */
  .section     { padding: 72px 0; }
  .two-col     { gap: 40px; }

  /* Footer: brand takes full row */
  .footer-brand { -webkit-flex: 1 1 100%; flex: 1 1 100%; }

  /* Section sub */
  .section-sub { font-size: 14px; max-width: 480px; }

  /* Stats strip: 2 per row */
  .stat-item { -webkit-flex: 1 1 45%; flex: 1 1 45%; }
  .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(26,39,68,0.1); }

  /* CTA band: tighter */
  .cta-band { padding: 64px 0; }

  /* Page hero: tighter */
  .page-hero { padding: 130px 0 80px; }

  /* Contact card */
  .contact-card { padding: 32px 28px; }
  .contact-info-card { padding: 28px; }

  /* Proximity grid: already 2-col; just ensure gaps are reasonable */
  .prox-grid { gap: 16px; }

  /* Tabs: allow horizontal scroll on small tablets */
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-btn  { white-space: nowrap; padding: 14px 16px; }
}

/* ── MOBILE (≤640px) ── */
@media (max-width: 640px) {

  /* Slider: hide arrows (swipe gestures cover it), reset padding */
  .hs-arrow    { display: none; }
  .hs-content  { padding-left: 20px; padding-right: 20px;
                 padding-top: 100px; padding-bottom: 80px; }
  .hs-title    { font-size: clamp(26px, 9vw, 40px); letter-spacing: -0.5px; }
  .hs-sub      { font-size: 14px; margin-bottom: 24px; }
  .hs-dots     { bottom: 14px; gap: 8px; }
  .hs-dot      { width: 20px; }
  .hs-dot.active { width: 36px; }
  .hs-badge    { font-size: 9px; letter-spacing: 2px; padding: 5px 14px; }

  /* Layout */
  .section     { padding: 52px 0; }
  .section-sm  { padding: 40px 0; }
  .two-col     { gap: 28px; }
  .container   { padding: 0 20px; }

  /* Grids: force 1-col on very narrow */
  .grid-3 > *,
  .grid-4 > * { -webkit-flex: 1 1 100%; flex: 1 1 100%; }

  /* Stats strip: 2-col grid */
  .stats-strip  { padding: 28px 0; }
  .stats-inner  { padding: 0 20px; }
  .stat-item    { -webkit-flex: 1 1 48%; flex: 1 1 48%; padding: 14px 16px; }
  .stat-num     { font-size: 22px; }

  /* Page hero */
  .page-hero         { padding: 110px 0 56px; }
  .page-hero-title   { font-size: clamp(26px, 8vw, 44px); }
  .page-hero-sub     { font-size: 13px; }

  /* Section titles */
  .section-title     { font-size: clamp(22px, 7vw, 36px); }
  .cta-title         { font-size: clamp(20px, 6.5vw, 30px); }

  /* CTA band */
  .cta-band          { padding: 52px 0; }
  .cta-actions       { gap: 12px; }
  .cta-actions .btn-white,
  .cta-actions .btn-outline-white { width: 100%; text-align: center; }

  /* Why cards: ensure they don't have odd narrow widths */
  .why-card          { padding: 24px 20px; }
  .why-card h3       { font-size: 16px; }

  /* Space cards */
  .space-card-body   { padding: 20px; }
  .space-card-body h3 { font-size: 18px; }

  /* Infra cards */
  .infra-card        { padding: 20px 18px; }

  /* Amenity cards */
  .amenity-card      { padding: 28px 20px; }

  /* Proximity cards: single column */
  .prox-grid         { grid-template-columns: 1fr; gap: 12px; }
  .prox-card         { padding: 16px 18px; gap: 14px; }

  /* Contact card + info */
  .contact-card      { padding: 24px 20px; }
  .contact-info-card { padding: 20px; }
  .contact-info-row  { gap: 12px; }
  .contact-info-icon { width: 36px; height: 36px; }

  /* Footer */
  .footer-grid       { gap: 28px; padding-bottom: 32px; }
  .footer-brand      { -webkit-flex: 1 1 100%; flex: 1 1 100%; }
  .footer-col        { -webkit-flex: 1 1 calc(50% - 14px); flex: 1 1 calc(50% - 14px); }
  .site-footer       { padding: 48px 0 24px; }
  .footer-heading    { margin-bottom: 12px; }
  .footer-bottom     { -webkit-flex-direction: column; flex-direction: column;
                       -webkit-align-items: flex-start; align-items: flex-start;
                       gap: 6px; padding-top: 20px; }

  /* Nav */
  .nav-inner         { padding: 0 16px; }

  /* Buttons in hero */
  .hs-ctas           { gap: 12px; }

  /* Modal */
  .modal-box         { padding: 32px 20px; width: 95%; }
  .modal-title       { font-size: 22px; }

  /* Form row already stacks (flex-direction:column defined earlier) */

  /* Timeline */
  .timeline          { padding-left: 24px; }
  .tl-dot            { left: -24px; }

  /* Dholera stat cards */
  .dh-stat-card      { -webkit-flex: 1 1 calc(50% - 8px); flex: 1 1 calc(50% - 8px); padding: 14px 12px; }
  .dh-stat-num       { font-size: 22px; }

  /* Two-col section on contact: remove extra inline gap */
  .two-col[style]    { gap: 28px !important; }

  /* Pull quote */
  .pull-quote        { padding: 16px 20px; }
  .pull-quote p      { font-size: 16px; }
}

/* ── EXTRA SMALL (≤480px) ── */
@media (max-width: 480px) {
  .hs-title          { font-size: clamp(22px, 8vw, 34px); }

  /* Force single column on all card grids */
  .why-card,
  .space-card,
  .amenity-card,
  .infra-card        { -webkit-flex: 1 1 100%; flex: 1 1 100%; }

  /* Footer cols: full width */
  .footer-col        { -webkit-flex: 1 1 100%; flex: 1 1 100%; }

  /* Container: tightest padding */
  .container         { padding: 0 16px; }
  .stats-inner       { padding: 0 16px; }
  .nav-inner         { padding: 0 12px; }

  /* Section */
  .section           { padding: 44px 0; }
  .two-col           { gap: 20px; }

  /* Proximity cards */
  .prox-left         { min-width: 52px; }
  .prox-time         { font-size: 16px; }

  /* Dholera stats: 1-col on very tiny screens */
  .dh-stat-card      { -webkit-flex: 1 1 100%; flex: 1 1 100%; }

  /* CTA buttons: always full width */
  .btn-gold, .btn-outline, .btn-outline-navy,
  .btn-white, .btn-outline-white {
    display: block; width: 100%; text-align: center;
  }
  /* But not in modal inline contexts */
  .modal-box .btn-gold { width: 100%; }

  /* Section header */
  .section-title     { font-size: clamp(20px, 7vw, 30px); }
  .page-hero-title   { font-size: clamp(22px, 8vw, 38px); }
}