/* Libre Baskerville 700, self-hosted (display face for Shelar Supremus) */
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/libre-baskerville-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/libre-baskerville-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Shelar Supremus, Khadakpada, Kalyan West - Stylesheet
   Theme: "Ink and vermilion".
   True-neutral graphite ink ramp (no hue tint) on a bone-paper
   ground, with a single controlled vermilion accent held to
   roughly 8% of the surface. Display face: Libre Baskerville 700.
   ============================================================ */

:root {
  /* Ink ramp: true neutral graphite, deliberately un-tinted */
  --ink-900: #15171A;
  --ink-800: #1E2126;
  --ink-700: #292D34;
  --ink-600: #363B44;
  --ink-500: #474D58;

  /* Ground: bone / paper */
  --cream:   #F7F4EE;
  --cream-2: #EAE5DB;
  --ink:     #191B1F;
  --muted:   #5D636C;
  --line:    #DDD7CB;

  /* Accent: one controlled vermilion. Token names kept so the whole
     component layer keeps working; the values are the identity. */
  --gold-1: #B7402A;
  --gold-2: #D9603F;
  --gold-3: #8C2E1D;
  --gold-grad: linear-gradient(135deg, #8C2E1D 0%, #B7402A 46%, #C24C33 58%, #A03421 78%, #8C2E1D 100%);

  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 24px 60px -28px rgba(21, 23, 26, 0.45);
  --shadow-soft: 0 12px 32px -20px rgba(21, 23, 26, 0.30);
  --container: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-head: "Libre Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; font-size: 106.25%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html, body { max-width: 100%; overflow-x: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-3);
  margin-bottom: 14px;
}
.eyebrow--light { color: var(--gold-2); }

.section { padding: 92px 0; }

.section__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: 0.2px;
  color: var(--ink-800);
}
.section__title--light { color: #fff; }

.section__head { max-width: 720px; margin-bottom: 54px; }
.section__head.center { margin-inline: auto; text-align: center; }
.section__sub { color: var(--muted); font-size: 1.18rem; margin-top: 16px; line-height: 1.65; }

.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--pad-y) 26px;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s;
  white-space: nowrap;
}
.btn--lg { --pad-y: 16px; padding-inline: 34px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--gold {
  background: var(--gold-grad);
  color: #3a2b06;
  box-shadow: 0 12px 26px -12px rgba(176, 126, 42, 0.7);
  background-size: 200% 200%;
}
.btn--gold:hover { transform: translateY(-2px); background-position: right center; box-shadow: 0 16px 34px -12px rgba(176, 126, 42, 0.85); }

.btn--outline {
  background: transparent;
  color: var(--ink-700);
  border: 1.5px solid var(--gold-1);
}
.btn--outline:hover { background: var(--ink-700); color: #fff; border-color: var(--ink-700); }

.btn--outline-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
}
.btn--outline-light:hover { background: #fff; color: var(--ink-800); }

.btn--ghost { background: transparent; color: var(--cream); padding-inline: 14px; }

/* ---------- Honeypot (spam trap) + form-note error state ---------- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note--err { color: #b00020; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ink-900);
  color: #cdbf9a;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; height: 38px; }
.topbar__rera { color: var(--gold-2); font-weight: 500; }
.topbar__contact a:hover { color: #fff; }
.topbar__sep { margin: 0 10px; opacity: 0.4; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.header.scrolled {
  background: rgba(247, 243, 236, 0.97);
  box-shadow: var(--shadow-soft);
  border-bottom: 2px solid var(--gold-1);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 20px; }

.brand { display: flex; align-items: center; gap: 8px; }
.brand__logo { height: 46px; width: auto; max-width: 180px; object-fit: contain; border-radius: 0; }
.footer__brand img, .modal__head img { object-fit: contain; border-radius: 0; }
.brand__sub {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-600);
  letter-spacing: 0.06em;
}

.nav { display: flex; align-items: center; gap: 22px; }
.nav__link {
  position: relative;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-800);
  padding: 6px 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold-grad);
  transition: width 0.3s var(--ease);
}
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__link--mobile-cta { display: none; }
.nav__close { display: none; }
.nav-backdrop { display: none; }

.header__actions { display: flex; align-items: center; gap: 12px; }
.btn--phone { color: var(--ink-800); border: 1.5px solid var(--line); border-radius: 4px; }
.btn--phone:hover { border-color: var(--gold-1); color: var(--gold-3); }

/* ---------- Hamburger ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 26px; height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 114px);
  display: flex;
  align-items: center;
  background: var(--ink-900);
  color: #fff;
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background-size: cover; background-position: center;
  opacity: 0; will-change: opacity, transform;
  animation: heroKen 32s infinite;
}
.hero__slide--first { animation-name: heroKenFirst; }
@keyframes heroKenFirst {
  0% { opacity: 1; transform: scale(1.04); }
  22% { opacity: 1; }
  25% { opacity: 0; transform: scale(1.12); }
  97% { opacity: 0; }
  100% { opacity: 1; transform: scale(1.04); }
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 8s; }
.hero__slide:nth-child(3) { animation-delay: 16s; }
.hero__slide:nth-child(4) { animation-delay: 24s; }
@keyframes heroKen {
  0%   { opacity: 0; transform: scale(1.04); }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  25%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.04); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,12,22,0.93) 0%, rgba(7,12,22,0.8) 34%, rgba(7,12,22,0.42) 60%, rgba(7,12,22,0) 84%),
    linear-gradient(to top, rgba(7,12,22,0.55) 0%, rgba(7,12,22,0) 42%);
}
.hero__overlay { display: none; }
.hero__content { position: relative; z-index: 2; padding: 28px 0; max-width: 580px; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide:nth-child(1) { opacity: 1; }
}
.hero__eyebrow {
  display: inline-block;
  font-size: 0.82rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 600;
  padding: 8px 18px;
  border: 1px solid rgba(243, 226, 168, 0.4);
  border-radius: 999px;
  margin-bottom: 26px;
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 4.1vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.hero__lead { margin-top: 20px; font-size: 1.08rem; max-width: 440px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero__stats {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 48px;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--gold-2); line-height: 1; }
.hero__stats span { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 6px; }

.hero__scroll {
  display: none;
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.6); border-radius: 16px; z-index: 2;
}
.hero__scroll span { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--gold-2); border-radius: 2px; animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0% { opacity: 0; top: 8px; } 50% { opacity: 1; } 100% { opacity: 0; top: 24px; } }

/* ---------- About ---------- */
.about { background: var(--cream); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about__media { position: relative; }
.about__media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3.4; object-fit: cover; }
.about__media-badge {
  position: absolute; bottom: -22px; right: -10px;
  background: var(--gold-grad); color: #3a2b06;
  padding: 16px 26px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); text-align: center;
}
.about__media-badge strong { display: block; font-family: var(--font-head); font-size: 1.5rem; line-height: 1; }
.about__media-badge span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.about__text p { color: var(--muted); margin-bottom: 16px; font-size: 1.12rem; line-height: 1.7; }
.about__list { list-style: none; margin: 22px 0 28px; }
.about__list li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--ink-800); font-weight: 500; }
.about__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: 0 0 0 4px rgba(199,154,69,0.18);
}

/* ---------- Configurations ---------- */
.configs { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.configs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 940px; margin-inline: auto; }
.config-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  overflow: hidden;
}
.config-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.config-card--featured { background: var(--ink-800); color: #fff; }

.config-card__media {
  position: relative; cursor: zoom-in; background: #f4f1e8;
  border-bottom: 4px solid transparent; border-image: var(--gold-grad) 1;
  aspect-ratio: 16 / 11; overflow: hidden;
}
.config-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform 0.5s var(--ease); }
.config-card__media:hover img { transform: scale(1.04); }
.config-card__tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: #3a2b06; background: var(--gold-grad);
  padding: 6px 16px; border-radius: 999px; box-shadow: var(--shadow-soft);
}
.config-card__body { padding: 26px 30px 30px; }
.config-card h3 { font-family: var(--font-head); font-size: 2.1rem; color: var(--ink-800); margin-bottom: 18px; }
.config-card--featured h3 { color: #fff; }
.config-card__specs {
  list-style: none; display: flex; gap: 10px; margin-bottom: 24px;
}
.config-card__specs li {
  flex: 1; text-align: center; padding: 12px 6px;
  background: var(--cream); border-radius: var(--radius-sm);
}
.config-card--featured .config-card__specs li { background: rgba(255,255,255,0.07); }
.config-card__specs strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--gold-3); line-height: 1.1; }
.config-card--featured .config-card__specs strong { color: var(--gold-2); }
.config-card__specs span { font-size: 0.82rem; color: var(--muted); }
.config-card--featured .config-card__specs span { color: rgba(255,255,255,0.7); }
.configs__cta { margin-top: 46px; }
.amenities__cta { margin-top: 58px; }
.gallery__cta { margin-top: 48px; }
.faq__cta { margin-top: 42px; }

/* ---------- Amenities ---------- */
.amenities { background: var(--ink-800); color: #fff; }
.amenities .section__title { color: #fff; }
.amenities .eyebrow { color: var(--gold-2); }
.amenities .section__sub { color: rgba(255,255,255,0.72); }

.amenity-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 64px;
}
.amenity {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.amenity:hover { transform: translateY(-4px); background: rgba(243,226,168,0.07); border-color: rgba(243,226,168,0.35); }
.amenity img { width: 46px; height: 46px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.amenity span { font-weight: 500; font-size: 1.08rem; }

.amenity-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.amenity-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 34px 32px;
}
.amenity-block h3 { font-family: var(--font-head); font-size: 1.7rem; color: var(--gold-2); margin-bottom: 22px; }
.amenity-block ul { list-style: none; columns: 2; column-gap: 26px; }
.amenity-block li { position: relative; padding-left: 22px; margin-bottom: 12px; color: rgba(255,255,255,0.85); break-inside: avoid; font-size: 1.04rem; }
.amenity-block li::before { content: "✦"; position: absolute; left: 0; color: var(--gold-1); font-size: 0.75rem; top: 3px; }
.clubfloor { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.clubfloor:last-child { border-bottom: 0; }
.clubfloor h4 { color: var(--gold-2); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.clubfloor p { color: rgba(255,255,255,0.82); font-size: 1.04rem; }

/* ---------- Floor Plans ---------- */
.floorplans { background: var(--cream); }
.floorplan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 44px; }
.floorplan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-soft); cursor: zoom-in;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.floorplan:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.floorplan img { border-radius: var(--radius-sm); background: #fafafa; }
.floorplan figcaption { margin-top: 14px; text-align: center; font-weight: 600; color: var(--ink-700); font-size: 1.08rem; }

/* ---------- Gallery ---------- */
.gallery { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; gap: 16px;
}
.g-item {
  overflow: hidden; border-radius: var(--radius-sm); cursor: zoom-in; position: relative;
  box-shadow: var(--shadow-soft);
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.g-item::after {
  content: "⤢"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(12,26,18,0.45); color: var(--gold-2); font-size: 1.6rem;
  opacity: 0; transition: opacity 0.3s;
}
.g-item:hover img { transform: scale(1.08); }
.g-item:hover::after { opacity: 1; }
.g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.g-item:nth-child(6) { grid-column: span 2; }

/* ---------- Location ---------- */
.location { background: var(--cream); }
.conn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 54px; }
.conn-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(170deg, var(--ink-700) 0%, var(--ink-900) 100%);
  border: 1px solid rgba(243, 226, 168, 0.14);
  border-radius: var(--radius);
  padding: 30px 20px 26px;
  color: #fff;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  box-shadow: var(--shadow-soft);
}
.conn-card:hover { transform: translateY(-6px); border-color: rgba(243, 226, 168, 0.45); box-shadow: var(--shadow); }
.conn-card img {
  width: 40px; height: 40px; object-fit: contain;
  padding: 17px; box-sizing: content-box;
  background: radial-gradient(circle at 50% 35%, rgba(243,226,168,0.18), rgba(243,226,168,0.05));
  border: 1px solid rgba(243, 226, 168, 0.3);
  border-radius: 50%; margin-bottom: 18px;
}
.conn-card h4 { font-size: 1.14rem; color: var(--gold-2); margin-bottom: 10px; font-family: var(--font-head); font-weight: 600; line-height: 1.2; }
.conn-card p { font-size: 0.98rem; color: rgba(255,255,255,0.72); line-height: 1.55; }

.location__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: var(--gold-grad);
  border-radius: var(--radius);
  padding: 40px 44px;
}
.location__cta h3 { font-family: var(--font-head); font-size: 1.9rem; color: #3a2b06; }
.location__cta p { color: #5b451a; max-width: 560px; margin-top: 8px; }
.location__cta .btn--gold { background: var(--ink-800); color: #fff; box-shadow: none; }
.location__cta .btn--gold:hover { background: var(--ink-900); }

/* ---------- Dark solid button ---------- */
.btn--dark { background: var(--ink-800); color: #fff; box-shadow: 0 12px 26px -14px rgba(0,0,0,0.6); }
.btn--dark:hover { background: var(--ink-900); transform: translateY(-2px); }

/* ---------- Why Invest ---------- */
.invest {
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(183,64,42,0.16), transparent 58%),
    linear-gradient(178deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: #fff;
}
.invest .eyebrow { color: var(--gold-2); }
.invest__sub { color: rgba(255,255,255,0.78); }
.invest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.invest-card {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}
.invest-card:hover { transform: translateY(-6px); border-color: var(--gold-1); background: rgba(243,226,168,0.06); }
.invest-card__time {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  color: #3a2b06; background: var(--gold-grad);
  padding: 4px 16px; border-radius: 999px; margin-bottom: 16px;
}
.invest-card h4 { font-size: 1.35rem; color: #fff; margin-bottom: 8px; font-weight: 600; font-family: var(--font-head); }
.invest-card p { color: rgba(255,255,255,0.75); font-size: 1.02rem; line-height: 1.6; }
.invest__cta { margin-top: 46px; }

/* ---------- FAQ ---------- */
.faq { background: var(--cream); }
.faq__inner { max-width: 860px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: box-shadow 0.3s, border-color 0.3s;
}
.faq-item[open] { box-shadow: var(--shadow-soft); border-color: var(--gold-1); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  font-weight: 600; color: var(--ink-800); font-size: 1.18rem;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; color: var(--gold-3); font-weight: 400;
  transition: transform 0.3s var(--ease); line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 26px 24px; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }

/* ---------- Contact ---------- */
.contact {
  background:
    radial-gradient(110% 70% at 88% 0%, rgba(183,64,42,0.15), transparent 60%),
    linear-gradient(178deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: #fff;
}
.contact__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.contact__lead { color: rgba(255,255,255,0.8); margin-bottom: 30px; font-size: 1.08rem; }
.contact__details { list-style: none; display: flex; flex-direction: column; gap: 22px; }
.contact__details li { display: flex; gap: 16px; align-items: flex-start; }
.contact__icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  background: rgba(243,226,168,0.12); border: 1px solid rgba(243,226,168,0.3);
  display: grid; place-items: center; font-size: 1.1rem;
}
.contact__details strong { display: block; color: var(--gold-2); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px; }
.contact__details div { color: rgba(255,255,255,0.88); }
.contact__details a:hover { color: var(--gold-2); }

.contact__form {
  background: #fff; color: var(--ink);
  border-radius: var(--radius); padding: 40px 38px;
  box-shadow: var(--shadow);
}
.contact__form h3 { font-family: var(--font-head); font-size: 1.8rem; color: var(--ink-800); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.contact__form input, .contact__form select, .contact__form textarea,
.modal__form input, .modal__form select {
  width: 100%; padding: 14px 18px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--cream); transition: border-color 0.25s, box-shadow 0.25s;
}
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus,
.modal__form input:focus, .modal__form select:focus {
  outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(199,154,69,0.18); background: #fff;
}
.form-note { color: var(--ink-600); font-weight: 600; margin-top: 14px; text-align: center; }
.form-fineprint { font-size: 0.78rem; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-900); color: rgba(255,255,255,0.7); padding-top: 70px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.footer__brand img { height: 40px; margin-bottom: 18px; }
.footer__brand p { font-size: 0.95rem; line-height: 1.7; }
.footer__rera { display: inline-block; margin-top: 16px; color: var(--gold-2); font-size: 0.82rem; letter-spacing: 0.08em; }
.footer__socials { margin-top: 22px; }
.footer__socials-label { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 9px; }
.footer__social { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.82); font-size: 0.92rem; transition: color 0.25s, transform 0.25s; }
.footer__social svg { flex-shrink: 0; }
.footer__social:hover { color: var(--gold-2); transform: translateY(-1px); }
.footer__col h4 { color: #fff; font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 18px; }
.footer__col a { display: block; padding: 6px 0; font-size: 0.95rem; transition: color 0.25s, padding-left 0.25s; }
.footer__col a:hover { color: var(--gold-2); padding-left: 6px; }
.footer__addr { font-size: 0.92rem; margin-top: 10px; }
.footer__bar { border-top: 1px solid rgba(255,255,255,0.1); padding: 22px 0; font-size: 0.85rem; }
.footer__bar-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer__legal a:hover { color: var(--gold-2); }
.footer__disclaimer { font-size: 0.76rem; color: rgba(255,255,255,0.4); padding-bottom: 30px; line-height: 1.6; }

/* ---------- Floating ---------- */
.float {
  position: fixed; z-index: 90; right: 22px; bottom: 22px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.5);
  transition: transform 0.3s var(--ease);
}
.float:hover { transform: scale(1.08); }
.float--wa { background: #25d366; animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ---------- Mobile sticky CTA bar (Call · WhatsApp · Enquire) ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none;                         /* shown only on mobile (see media query) */
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 1px;
  background: rgba(255,255,255,0.14);
  box-shadow: 0 -10px 26px -12px rgba(0,0,0,0.55);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta.show { transform: translateY(0); }
.mcta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 11px 6px 12px; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em;
  color: #fff;
}
.mcta svg { display: block; }
.mcta--call { background: var(--ink-800); }
.mcta--wa { background: #25d366; }
.mcta--enquire { background: var(--gold-grad); color: #3a2b06; }
.mcta--enquire:active, .mcta--wa:active, .mcta--call:active { filter: brightness(0.94); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8,16,11,0.7); backdrop-filter: blur(4px); animation: fade 0.3s; }
.modal__dialog {
  position: relative; background: var(--cream); border-radius: var(--radius);
  width: min(440px, 100%); padding: 38px 36px; box-shadow: var(--shadow);
  animation: pop 0.35s var(--ease);
  border-top: 5px solid transparent; border-image: var(--gold-grad) 1;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
.modal__close {
  position: absolute; top: 14px; right: 16px; background: transparent; border: 0;
  font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.modal__close:hover { color: var(--ink-800); }
.modal__head { text-align: center; margin-bottom: 22px; }
.modal__head img { height: 38px; margin: 0 auto 14px; }
.modal__head h3 { font-family: var(--font-head); font-size: 1.7rem; color: var(--ink-800); }
.modal__head p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.modal__form { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(6,12,8,0.94); padding: 30px; }
.lightbox.open { display: flex; animation: fade 0.3s; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; cursor: pointer; border-radius: 50%;
  width: 52px; height: 52px; font-size: 1.8rem; display: grid; place-items: center;
  transition: background 0.25s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(243,226,168,0.3); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Subtle column-wise stagger so grid items cascade in (capped, no perf cost). */
.amenity-grid .amenity:nth-child(3n+2), .invest-grid .invest-card:nth-child(3n+2) { transition-delay: 0.07s; }
.amenity-grid .amenity:nth-child(3n),   .invest-grid .invest-card:nth-child(3n)   { transition-delay: 0.14s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }
  .conn-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .invest-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .section { padding: 68px 0; }
  .about__grid, .configs__grid, .amenity-detail, .contact__grid { grid-template-columns: 1fr; }
  .about__grid { gap: 50px; }
  .about__media-badge { right: 16px; }

  /* Video bands: stack full-screen on mobile (one per screen); player uses more width; pad bottom so the sticky CTA bar never covers the controls. */
  .vidbands { display: block; }
  .vidband { padding-bottom: 64px; }
  .vidband__player { height: min(82svh, 94vw * 16 / 9); }

  /* Mobile sticky CTA bar replaces the round WhatsApp bubble */
  .mobile-cta { display: grid; }
  .float--wa { display: none; }

  /* Disable backdrop-filter on mobile so the fixed nav drawer is positioned
     relative to the viewport (filters create a containing block otherwise). */
  .header, .header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Mobile nav */
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(82%, 340px); max-width: 100vw;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 4px; background: var(--cream); padding: 100px 30px 40px;
    transform: translateX(100%); transition: transform 0.4s var(--ease), visibility 0.4s;
    box-shadow: var(--shadow); z-index: 99;
    visibility: hidden; overflow-y: auto;
  }
  .nav.open { transform: translateX(0); visibility: visible; }

  .nav__close {
    display: grid; place-items: center;
    position: absolute; top: 16px; right: 18px;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--ink-800); color: #fff; border: 0;
    font-size: 1.8rem; line-height: 1; cursor: pointer;
    transition: background 0.25s, transform 0.25s;
  }
  .nav__close:hover { background: var(--ink-900); transform: rotate(90deg); }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 98;
    background: rgba(8, 16, 11, 0.55); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }

  .nav__link { font-size: 1.1rem; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav__link--mobile-cta { display: block; }
  .nav-toggle { display: flex; }
  .btn--phone span { display: none; }
  .header__inner { gap: 10px; }
  .header__actions { gap: 8px; }
  .brand__sub { display: none; }
}

@media (max-width: 480px) {
  .header__actions .btn--gold { display: none; }
  .brand__logo { height: 40px; }
}

@media (max-width: 600px) {
  .topbar__contact a:last-child { display: none; }
  .topbar__sep { display: none; }
  .hero__content { padding: 24px 0 48px; }
  .hero__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .hero__lead { font-size: 1.05rem; }
  .hero__stats { gap: 16px 26px; margin-top: 28px; padding-top: 22px; }
  .hero__stats strong { font-size: 1.4rem; }
  .amenity-grid { grid-template-columns: 1fr; }
  .amenity-block ul { columns: 1; }
  .conn-grid { grid-template-columns: 1fr 1fr; }
  .invest-grid { grid-template-columns: 1fr; }
  .invest, .contact { background-attachment: scroll; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(200px, 56vw, 280px); }
  .g-item:nth-child(1), .g-item:nth-child(6) { grid-column: auto; grid-row: auto; }
  .floorplan-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .location__cta { padding: 30px 24px; text-align: center; justify-content: center; }
  .location__cta .btn { width: 100%; }
  .conn-grid { gap: 14px; }
  .contact__form, .modal__dialog { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   Shared component additions (brand wordmark, RERA block, stat band)
   ============================================================ */

/* Text wordmark brand (no logo image) */
.brand__wordmark { display:flex; flex-direction:column; line-height:1; }
.brand__name {
  font-family: var(--font-head); font-size: 1.5rem; letter-spacing:0.16em;
  color: var(--ink-800); text-transform:uppercase;
}
.brand__name b { color: var(--gold-3); font-weight:inherit; }
.brand__loc {
  font-size: 0.62rem; letter-spacing:0.34em; text-transform:uppercase;
  color: var(--muted); margin-top:5px;
}
.header.scrolled .brand__name { color: var(--ink-900); }

/* Soft "on request" pill used wherever a price/area is pending client confirmation */
.pill-soft {
  display:inline-block; font-size:0.78rem; letter-spacing:0.06em;
  color: var(--gold-3); background: rgba(198,160,82,0.12);
  border:1px solid rgba(198,160,82,0.35); border-radius:999px; padding:3px 12px;
}

/* RERA / legal block */
.rera { background: var(--ink-900); color:#fff; }
.rera .section__title { color:#fff; }
.rera .eyebrow { color: var(--gold-2); }
.rera .section__sub { color: rgba(255,255,255,0.72); }
.rera-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:16px; margin-bottom:30px; }
.rera-card {
  background: rgba(255,255,255,0.04); border:1px solid rgba(243,221,166,0.18);
  border-radius: var(--radius-sm); padding:22px 16px; text-align:center;
  transition: transform .3s var(--ease), border-color .3s;
}
.rera-card:hover { transform: translateY(-4px); border-color: rgba(243,221,166,0.45); }
.rera-card__tower {
  font-family: var(--font-head); font-size:1.12rem; color: var(--gold-2); margin-bottom:4px;
}
.rera-card__type { font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.5); margin-bottom:14px; display:block; }
.rera-card__qr { width:96px; height:96px; margin:0 auto 14px; background:#fff; border-radius:8px; padding:7px; }
.rera-card__qr img { width:100%; height:100%; object-fit:contain; }
.rera-card__label { font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.rera-card__no { font-size:0.95rem; font-weight:600; color:#fff; letter-spacing:0.02em; word-break:break-all; }
.rera-foot {
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background: rgba(255,255,255,0.04); border:1px solid rgba(243,221,166,0.18);
  border-radius: var(--radius-sm); padding:18px 24px;
}
.rera-foot p { font-size:0.92rem; color: rgba(255,255,255,0.7); margin:0; }
.rera-foot a.btn { flex-shrink:0; }

/* Market / why-Kalyan figures band */
.statband { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:8px; }
.stat {
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius); padding:26px 22px; text-align:center;
}
.stat strong { display:block; font-family: var(--font-head); font-size:1.9rem; color: var(--gold-2); line-height:1.1; }
.stat span { display:block; font-size:0.92rem; color: rgba(255,255,255,0.72); margin-top:8px; }

/* Galleria (commercial) light mention strip */
.galleria { background: var(--cream); }
.galleria__inner {
  display:grid; grid-template-columns: 1.1fr 1fr; gap:44px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-soft);
}
.galleria__media img { width:100%; height:100%; object-fit:cover; min-height:260px; }
.galleria__body { padding:40px 40px 40px 4px; }
.galleria__body h3 { font-family: var(--font-head); font-size:1.8rem; color: var(--ink-800); margin-bottom:12px; }
.galleria__body p { color: var(--muted); margin-bottom:18px; font-size:1.06rem; }
@media (max-width:860px){
  .rera-grid { grid-template-columns: repeat(2,1fr); }
  .statband { grid-template-columns: repeat(2,1fr); }
  .galleria__inner { grid-template-columns:1fr; }
  .galleria__body { padding:30px 26px; }
}
@media (max-width:480px){ .rera-grid { grid-template-columns:1fr; } }


/* === SPOKE PAGES === */
.page-hero{position:relative;overflow:hidden;color:#fff;padding:74px 0 60px;background:var(--ink-900)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--ph,linear-gradient(160deg,var(--ink-700),var(--ink-900)));background-size:cover;background-position:center;transform-origin:50% 50%;animation:pageKen 22s ease-in-out infinite alternate;will-change:transform}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(7,12,22,.9) 0%,rgba(7,12,22,.66) 42%,rgba(7,12,22,.4) 72%,rgba(7,12,22,.28) 100%)}
.page-hero .container{position:relative;z-index:2;max-width:900px}
.page-hero .breadcrumb{font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:16px;letter-spacing:.02em}
.page-hero .breadcrumb a:hover{color:var(--gold-2)}
.page-hero h1{font-family:var(--font-head);font-weight:600;font-size:clamp(1.95rem,4.4vw,3rem);line-height:1.12;color:#fff}
.page-hero p.sub{margin-top:16px;font-size:1.14rem;color:rgba(255,255,255,.86);max-width:680px}
.rich{max-width:880px}
.rich>p,.rich>ul,.rich>ol{color:var(--ink);font-size:1.08rem;line-height:1.75;margin-bottom:18px}
.rich h2{font-family:var(--font-head);font-size:1.7rem;color:var(--ink-800);margin:36px 0 12px}
.rich h3{font-family:var(--font-head);font-size:1.25rem;color:var(--ink-700);margin:24px 0 8px}
.rich ul,.rich ol{padding-left:22px}.rich li{margin-bottom:9px;line-height:1.7}
.rich strong{color:var(--ink-800)}
.rich a{color:var(--gold-3);text-decoration:underline;text-underline-offset:3px}
.costsheet{width:100%;border-collapse:collapse;margin:6px 0 22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.costsheet th,.costsheet td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-size:1rem;vertical-align:top}
.costsheet th{background:var(--cream-2);color:var(--ink-800);font-weight:600;width:38%}
.costsheet tr:last-child td,.costsheet tr:last-child th{border-bottom:0}
.cta-band{background:var(--ink-900);color:#fff;border-radius:var(--radius);padding:34px 36px;text-align:center;margin-top:30px;max-width:880px}
.cta-band h3{font-family:var(--font-head);font-size:1.55rem;color:var(--gold-2);margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.82);margin-bottom:20px}
.mapwrap{margin:8px 0 20px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);line-height:0}
.mapwrap iframe{width:100%;height:340px;border:0}
.explore{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.explore-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;box-shadow:var(--shadow-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.explore-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-1)}
.explore-card h4{font-family:var(--font-head);color:var(--ink-800);font-size:1.12rem;margin-bottom:4px}
.explore-card span{color:var(--muted);font-size:.9rem}
@media(max-width:760px){.explore-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.explore-grid{grid-template-columns:1fr}}


/* === MEDIA PAGES === */
.vr-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vr-gal h2{grid-column:1/-1;font-family:var(--font-head);color:var(--ink-800);font-size:1.35rem;margin:18px 0 0}
.vr-gal figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-soft);cursor:zoom-in;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.vr-gal figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.vr-gal img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.vr-gal figcaption{padding:12px 14px;font-size:.92rem;color:var(--muted)}
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.vt{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-soft)}
.vt__media{position:relative;aspect-ratio:9/16;background:#000}
.vt__media img,.vt__media video{width:100%;height:100%;object-fit:cover;display:block}
.vt__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.42);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;padding-left:4px;transition:transform .2s,background .2s}
.vt__play:hover{transform:scale(1.08);background:rgba(0,0,0,.62)}
.vt figcaption{padding:16px 16px 18px}
.vt figcaption h3{font-family:var(--font-head);color:var(--ink-800);font-size:1.12rem;margin-bottom:6px}
.vt figcaption p{color:var(--muted);font-size:.93rem;line-height:1.55}
@media(max-width:760px){.vr-gal{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.vr-gal{grid-template-columns:1fr}}

/* spoke hero animation + mobile topbar fix */
@keyframes pageKen{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){.page-hero::before{animation:none}}
@media (max-width:600px){.topbar{overflow:hidden}.topbar__inner{gap:8px}.topbar__rera{white-space:nowrap;font-size:0.64rem;letter-spacing:0}.topbar__contact a{white-space:nowrap;font-size:0.72rem}}

/* Full-screen hero: cover slideshow + overlaid text on every viewport */
.hero__banner{display:none}
@media (min-width:861px){
  .hero__content{max-width:600px; padding:24px 0}
  .hero__lead{max-width:480px}
  .hero__stats{display:flex; gap:18px 48px}
  .hero__scroll{display:block}
}




/* ============================================================
   SHELAR SUPREMUS, IDENTITY LAYER
   "Ink and vermilion". Source-last, so everything here wins
   over the shared component layer above.

   Three rules hold the identity together:
     1. Geometry is squared. Hairline rules, not boxes.
     2. Vermilion is rationed to roughly 8% of any screen.
        It marks, it never fills.
     3. The "101" numeral is the signature. Low density is the
        only thing this project has that its neighbours do not,
        so the number is treated as the logo of the argument.
   ============================================================ */

/* ---------- Display type: Libre Baskerville runs large and dark,
     so it needs tighter leading and smaller steps than a lighter serif ---------- */
.section__title { font-size: clamp(1.72rem, 3.5vw, 2.95rem); line-height: 1.1; letter-spacing: -0.012em; }
.hero__title    { font-size: clamp(1.85rem, 3.9vw, 3.15rem); line-height: 1.09; letter-spacing: -0.014em; }
.page-hero h1   { font-size: clamp(1.72rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.012em; }
.config-card h3 { font-size: 1.7rem; line-height: 1.1; }
.amenity-block h3, .location__cta h3, .cta-band h3 { font-size: 1.45rem; line-height: 1.2; }
.contact__form h3, .modal__head h3 { font-size: 1.5rem; line-height: 1.2; }
.rich h2 { font-size: 1.6rem; } .rich h3 { font-size: 1.22rem; }
.footer__col h4 { font-size: 1.05rem; letter-spacing: 0.01em; }
.faq-item summary { font-size: 1.04rem; font-family: var(--font-head); font-weight: 700; line-height: 1.4; }
.section__sub { font-size: 1.08rem; }
.pillar h3 { font-size: 1.22rem; line-height: 1.25; }
.invest-card h4, .conn-card h4 { font-size: 1.1rem; line-height: 1.25; }

/* ---------- Squared geometry ---------- */
.btn, .btn--phone { border-radius: 3px; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }
.btn--lg { font-size: 0.82rem; }
.btn--gold { color: #fff; box-shadow: none; }
.btn--gold:hover { box-shadow: 0 12px 26px -14px rgba(140, 46, 29, 0.75); }
.btn--outline { color: var(--ink-800); border-width: 1px; border-color: var(--ink-800); }
.btn--outline:hover { background: var(--ink-900); border-color: var(--ink-900); }
.btn--outline-light { border-width: 1px; border-radius: 3px; background: transparent; }
.btn--dark { background: var(--ink-900); }
.btn--dark:hover { background: var(--ink-800); }

/* ---------- Section heads: editorial, left aligned, hairline tick ---------- */
.riverline { display: none !important; }
.section { padding: 76px 0; }
.section__head, .section__head.center { text-align: left; margin-inline: 0; max-width: 760px; margin-bottom: 40px; }
.section__sub { max-width: 620px; margin-top: 14px; margin-left: 0; margin-right: 0; }

.eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; font-weight: 700;
  color: var(--gold-3); margin-bottom: 16px; padding-top: 14px;
  position: relative; display: inline-block;
}
.eyebrow--light { color: var(--gold-2); }
/* the tick: a short vermilion rule sitting above the eyebrow, replaces
   the parent's wave glyph entirely */
.eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 26px; height: 2px; background: var(--gold-1);
  margin: 0; display: block; vertical-align: baseline;
}
.eyebrow--light::before,
.amenities .eyebrow::before, .rera .eyebrow::before,
.invest .eyebrow::before, .contact .eyebrow::before,
.density .eyebrow::before { background: var(--gold-2); }

/* ---------- Topbar / header ---------- */
.topbar { background: var(--ink-900); color: rgba(255,255,255,0.62); }
.topbar__rera { color: var(--gold-2); letter-spacing: 0.06em; }
.header { background: rgba(247, 244, 238, 0.88); border-bottom: 1px solid var(--line); }
.header.scrolled { background: rgba(247, 244, 238, 0.98); border-bottom: 1px solid var(--ink-900); box-shadow: none; }
.header__inner { justify-content: flex-start; height: 70px; }
.header__actions { margin-left: auto; }
.nav__link { color: var(--ink-700); font-size: 0.86rem; letter-spacing: 0.03em; }
.nav__link::after { background: var(--gold-1); height: 1.5px; }
.btn--phone { border-color: var(--line); color: var(--ink-800); }
.btn--phone:hover { border-color: var(--ink-900); color: var(--ink-900); }
.nav-toggle span { background: var(--ink-800); }

/* ---------- Brand lockup: two-tower silhouette mark + wordmark ---------- */
.brand { gap: 11px; margin-right: clamp(20px, 4vw, 56px); align-items: center; }
.brand__mark { width: 26px; height: 34px; flex-shrink: 0; display: block; color: var(--gold-1); }
.brand__wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  color: var(--ink-900); font-size: clamp(0.98rem, 1.7vw, 1.16rem);
  letter-spacing: 0.13em; line-height: 1;
}
.brand__city {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  color: var(--muted); font-size: 0.56rem;
  letter-spacing: 0.3em; line-height: 1; margin-top: 7px;
}
.brand__loc { display: none; }
.header.scrolled .brand__name { color: var(--ink-900); }

/* ---------- Hero ---------- */
.hero { background: var(--ink-900); min-height: calc(100svh - 108px); }
.hero__scrim {
  background:
    linear-gradient(96deg, rgba(21,23,26,0.95) 0%, rgba(21,23,26,0.86) 34%, rgba(21,23,26,0.52) 62%, rgba(21,23,26,0.16) 100%),
    linear-gradient(to top, rgba(21,23,26,0.9) 0%, rgba(21,23,26,0.3) 34%, rgba(21,23,26,0) 62%);
}
.hero__content { max-width: 620px; padding: 30px 0; }
.hero__eyebrow {
  border-radius: 0; border: 0; border-left: 2px solid var(--gold-2);
  padding: 2px 0 2px 12px; font-size: 0.68rem; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.86); margin-bottom: 22px;
}
.hero__brandline {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 14px;
}
.hero__title { text-shadow: 0 2px 22px rgba(0,0,0,0.5); }
.hero__lead { color: rgba(255,255,255,0.86); font-size: 1rem; max-width: 470px; margin-top: 18px; }
.hero__cta { margin-top: 30px; }
.hero__stats {
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 16px 40px; margin-top: 32px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero__stats strong { font-family: var(--font-head); font-size: 1.32rem; color: #fff; }
.hero__stats span { font-size: 0.68rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); }
.hero__scroll { border-color: rgba(255,255,255,0.45); }
.hero__scroll span { background: var(--gold-2); }

/* ---- The "101" hero device: the signature. Sits beside the hero
        stats on wide screens, stacks above them on a phone. ---- */
.hero__aside {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 26px 44px; margin-top: 30px;
}
.hero__aside .hero__stats { margin-top: 0; padding-top: 0; border-top: 0; }
.numeral {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  border-top: 2px solid var(--gold-1); border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 14px 0 12px;
}
.numeral__fig {
  font-family: var(--font-head); font-weight: 700; line-height: 0.86;
  font-size: clamp(3.6rem, 11vw, 6.4rem); letter-spacing: -0.03em;
  color: #fff; display: block;
}
.numeral__fig i { font-style: normal; color: var(--gold-2); }
.numeral__cap {
  display: block; margin-top: 12px;
  font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}

/* ---------- Density band: the 101 argument, full width ---------- */
.density { background: var(--ink-900); color: #fff; padding: 66px 0; }
.density__grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.density__fig {
  font-family: var(--font-head); font-weight: 700; line-height: 0.82;
  font-size: clamp(5rem, 22vw, 11rem); letter-spacing: -0.045em;
  color: #fff; margin: 0; position: relative;
}
.density__fig i { font-style: normal; color: var(--gold-2); }
.density__fig::after {
  content: ""; display: block; width: 74px; height: 3px;
  background: var(--gold-1); margin-top: 22px;
}
.density__body h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.18; color: #fff; margin-bottom: 14px; }
.density__body p { color: rgba(255,255,255,0.74); font-size: 1.02rem; line-height: 1.72; margin-bottom: 14px; }
.density__body p:last-child { margin-bottom: 0; }
.density__body strong { color: #fff; font-weight: 600; }

/* ---------- Numbers ledger (replaces the parent's 4 boxed tiles) ---------- */
.tband { background: var(--cream-2); color: var(--ink); padding: 0; }
.tband .section__head { display: none; }
.tband__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.tnum {
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent; text-align: left; padding: 26px 20px 24px;
}
.tnum:nth-child(2n) { border-right: 0; }
.tnum:nth-last-child(-n+2) { border-bottom: 0; }
.tnum:hover { transform: none; background: transparent; }
.tnum strong { font-family: var(--font-head); font-size: clamp(1.3rem, 3.4vw, 1.9rem); color: var(--ink-900); line-height: 1.05; }
.tnum span { display: block; margin-top: 10px; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- About / story ---------- */
.about, .faq, .location, .configs, .gallery { background-image: none; background-color: var(--cream); }
.about__grid { gap: 40px; }
.about__media img { border-radius: 2px; box-shadow: var(--shadow); aspect-ratio: 4/3.1; }
.about__media-badge {
  background: var(--ink-900); color: #fff; border-radius: 0;
  padding: 14px 20px; bottom: -16px; right: 14px;
  border-left: 3px solid var(--gold-1); box-shadow: var(--shadow);
}
.about__media-badge strong { font-family: var(--font-head); font-size: 1.1rem; }
.about__media-badge span { font-size: 0.6rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.66); }
.about__text p { font-size: 1.04rem; line-height: 1.78; }
.about__list li { color: var(--ink-800); padding-left: 24px; font-weight: 500; font-size: 1rem; }
.about__list li::before {
  width: 8px; height: 8px; border-radius: 0; top: 10px;
  background: var(--gold-1); box-shadow: none;
}

/* ---------- Pillars: de-boxed columns under a hairline ---------- */
.pillars { grid-template-columns: 1fr; gap: 30px; }
.pillar {
  background: transparent; border: 0; border-top: 1px solid var(--ink-900);
  border-radius: 0; box-shadow: none; padding: 22px 0 0;
}
.pillar:hover { transform: none; box-shadow: none; border-top-color: var(--gold-1); }
.pillar__ic { width: auto; height: auto; background: transparent; border: 0; margin-bottom: 14px; }
.pillar__ic svg { width: 26px; height: 26px; stroke: var(--gold-1); }
.pillar p { font-size: 0.98rem; line-height: 1.68; }

/* ---------- Configuration ledger (no invented rooms, no fake plan art) ---------- */
.ledger { border-top: 1px solid var(--ink-900); }
.ledger__row {
  display: grid; grid-template-columns: 1fr; gap: 4px 24px;
  padding: 22px 0 20px; border-bottom: 1px solid var(--line);
}
.ledger__cfg {
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  color: var(--ink-900); line-height: 1;
}
.ledger__cfg em { font-style: normal; color: var(--gold-1); }
.ledger__cell { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; }
.ledger__k { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.ledger__v { font-size: 1rem; color: var(--ink-800); font-weight: 600; }
.ledger__v--soft { color: var(--muted); font-weight: 500; }
.ledger__note { margin-top: 18px; font-size: 0.88rem; color: var(--muted); line-height: 1.7; max-width: 640px; }

/* soft "on request" pill, squared for this identity */
.pill-soft {
  border-radius: 2px; color: var(--gold-3);
  background: rgba(183, 64, 42, 0.08); border: 1px solid rgba(183, 64, 42, 0.32);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 4px 10px;
}

/* ---------- Amenities: typographic, no borrowed amenity photography ---------- */
.amenities { background: var(--ink-800); }
.amenities__feature { margin-bottom: 34px; border-radius: 2px; overflow: hidden; box-shadow: var(--shadow); }
.amenities__feature img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.amenities__feature figcaption {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); padding: 12px 2px 0;
}
.amenity-detail { grid-template-columns: 1fr; gap: 0; }
.amenity-block {
  background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.16);
  border-radius: 0; padding: 26px 0 30px;
}
.amenity-block h3 { font-family: var(--font-head); color: #fff; font-size: 1.15rem; margin-bottom: 18px; letter-spacing: 0.01em; }
.amenity-block ul { columns: 1; }
.amenity-block li { color: rgba(255,255,255,0.82); font-size: 0.98rem; padding-left: 20px; margin-bottom: 11px; }
.amenity-block li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 1.5px; background: var(--gold-2); font-size: 0; }
.amenities__note { margin-top: 8px; font-size: 0.86rem; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 660px; }

/* ---------- Gallery ---------- */
.gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
.g-item { border-radius: 2px; box-shadow: none; border: 1px solid var(--line); }
.g-item img { aspect-ratio: 4/3; }
.g-item::after { background: rgba(21,23,26,0.5); color: #fff; }
.g-item:nth-child(1), .g-item:nth-child(6) { grid-column: auto; grid-row: auto; }

/* ---------- Location + the Beturkar Pada map card ---------- */
.mapcard {
  border: 1px solid var(--line); border-radius: 2px; background: #fff;
  overflow: hidden; box-shadow: var(--shadow-soft); margin-bottom: 30px;
}
.mapcard img { width: 100%; display: block; }
.mapcard__bar {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--cream);
}
.mapcard__pin {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-3);
}
.mapcard__pin::before { content: ""; width: 9px; height: 9px; background: var(--gold-1); border-radius: 50%; flex-shrink: 0; }
.mapcard__meta { font-size: 0.8rem; color: var(--muted); }

.conn-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 34px; border-top: 1px solid var(--ink-900); }
.conn-card {
  flex-direction: row; align-items: flex-start; text-align: left; gap: 16px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 20px 0; color: var(--ink); box-shadow: none;
}
.conn-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.conn-card__ic {
  width: 22px; height: 22px; padding: 10px; margin-bottom: 0; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 0;
}
.conn-card__ic svg { width: 20px; height: 20px; stroke: var(--gold-1) !important; }
.conn-card h4 { color: var(--ink-900); margin-bottom: 5px; }
.conn-card p { color: var(--muted); font-size: 0.94rem; }

.location__cta {
  background: var(--ink-900); border-radius: 2px; padding: 30px 26px;
  border-left: 3px solid var(--gold-1);
}
.location__cta h3 { color: #fff; }
.location__cta p { color: rgba(255,255,255,0.72); }
.location__cta .btn--gold { background: var(--gold-grad); color: #fff; }
.location__cta .btn--gold:hover { background: var(--gold-grad); }

/* ---------- Why buy ---------- */
.invest-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.2); }
.invest-card {
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0; padding: 24px 0;
}
.invest-card:hover { transform: none; background: transparent; border-color: rgba(255,255,255,0.12); }
.invest-card__time {
  background: transparent; color: var(--gold-2); border-radius: 0; padding: 0;
  font-family: var(--font-body); font-weight: 700; font-size: 0.64rem;
  letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 10px;
}
.invest-card p { font-size: 0.98rem; }

/* ---------- MahaRERA block ---------- */
.rera { background: var(--ink-900); }
.rera-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 26px; }
.rera-card {
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2px; padding: 26px 22px; text-align: left;
}
.rera-card:hover { transform: none; border-color: var(--gold-1); }
.rera-card__tower { font-family: var(--font-head); font-size: 1rem; color: #fff; margin-bottom: 14px; }
.rera-card__label { display: block; font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gold-2); margin-bottom: 6px; }
.rera-card__no { font-family: var(--font-head); font-size: 1.18rem; color: #fff; letter-spacing: 0.02em; }
.rera-card__note { display: block; margin-top: 12px; font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.6); line-height: 1.6; }
.rera-foot { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.18); border-radius: 0; padding: 20px 0 0; }
.rera-foot p { font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq-item { border-radius: 2px; border-color: var(--line); background: #fff; }
.faq-item[open] { border-color: var(--ink-900); box-shadow: none; }
.faq-item summary { color: var(--ink-900); padding: 18px 20px; }
.faq-item summary::after { color: var(--gold-1); }
.faq-item p { padding: 0 20px 20px; font-size: 1rem; }

/* ---------- Contact ---------- */
.contact__form { border-radius: 2px; padding: 30px 26px; border-top: 3px solid var(--gold-1); }
.contact__form h3 { color: var(--ink-900); }
.contact__form input, .contact__form select, .contact__form textarea,
.modal__form input, .modal__form select { border-radius: 2px; border-width: 1px; }
.contact__form input:focus, .contact__form select:focus, .contact__form textarea:focus,
.modal__form input:focus, .modal__form select:focus {
  border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(183, 64, 42, 0.16);
}
.contact__icon { border-radius: 2px; background: rgba(217, 96, 63, 0.12); border-color: rgba(217, 96, 63, 0.32); }
.form-note { color: var(--gold-3); }

/* ---------- Footer ---------- */
.footer { background: var(--ink-900); padding-top: 56px; }
.footer__brand .brand__name { color: #fff; font-size: 1.16rem; }
.footer__rera { color: var(--gold-2); }
.footer__col h4 { font-family: var(--font-head); color: #fff; }
.footer__disclaimer { color: rgba(255,255,255,0.6); font-size: 0.74rem; }

/* ---------- Floating / mobile bar ---------- */
.mcta--call { background: var(--ink-900); }
.mcta--enquire { background: var(--gold-grad); color: #fff; }

/* ---------- Modal / lightbox ---------- */
.modal__dialog { border-radius: 2px; border-top: 3px solid var(--gold-1); border-image: none; padding: 30px 26px; }
.modal__backdrop { background: rgba(21,23,26,0.76); }
.lightbox { background: rgba(21,23,26,0.95); }
.lightbox img { border-radius: 2px; }

/* ---------- Spoke-page shell ---------- */
.page-hero { background: var(--ink-900); }
.page-hero::after { background: linear-gradient(98deg, rgba(21,23,26,0.92) 0%, rgba(21,23,26,0.7) 44%, rgba(21,23,26,0.42) 100%); }
.rich h2, .rich strong { color: var(--ink-900); }
.rich h3 { color: var(--ink-700); }
.rich a { color: var(--gold-3); }
.costsheet th { background: var(--cream-2); color: var(--ink-900); }
.cta-band { background: var(--ink-900); border-radius: 2px; }
.cta-band h3 { color: #fff; }
.explore-card { border-radius: 2px; }
.explore-card:hover { border-color: var(--gold-1); }
.explore-card h4 { color: var(--ink-900); }

/* ============================================================
   Breakpoints. Mobile-first: everything above is the 360px
   design, everything below adds columns as room appears.
   ============================================================ */
@media (min-width: 620px) {
  .tband__grid { grid-template-columns: repeat(4, 1fr); }
  .tnum { border-bottom: 0; }
  .tnum:nth-child(2n) { border-right: 1px solid var(--line); }
  .tnum:last-child { border-right: 0; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .ledger__row { grid-template-columns: 150px 1fr 1fr; align-items: baseline; }
  .ledger__cfg { padding-top: 10px; }
  .conn-grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .conn-card:nth-last-child(-n+1) { border-bottom: 1px solid var(--line); }
  .rera-grid { grid-template-columns: minmax(0, 460px); }
  .amenity-block ul { columns: 2; column-gap: 30px; }
}

@media (min-width: 861px) {
  .section { padding: 104px 0; }
  .hero__content { max-width: 640px; padding: 26px 0; }
  .hero__lead { max-width: 480px; }
  .hero__stats { display: flex; gap: 18px 44px; }
  .hero__scroll { display: block; }
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 40px 44px; }
  .about__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
  .amenity-detail { grid-template-columns: 1fr 1fr; column-gap: 52px; }
  .invest-grid { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
  .contact__grid { grid-template-columns: 1.05fr 0.95fr; gap: 52px; }
  .contact__form { padding: 38px 34px; }
  .location__cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 36px; }
  .density { padding: 104px 0; }
  .density__grid { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .g-item:nth-child(1) img { aspect-ratio: 4/3.02; }
}

@media (min-width: 980px) {
  .section__head, .section__head.center {
    display: grid; grid-template-columns: 1.45fr 1fr; column-gap: 52px;
    align-items: end; max-width: none;
  }
  .section__head .eyebrow { grid-column: 1; }
  .section__head .section__title { grid-column: 1; }
  .section__head .section__sub { grid-column: 2; align-self: end; margin: 0 0 6px; }
  .amenities__feature img { aspect-ratio: 21/9; }
}

/* ---- 360px guard rails ---- */
@media (max-width: 420px) {
  .container { width: min(100% - 28px, var(--container)); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__stats { gap: 14px 22px; }
  .tnum { padding: 20px 14px; }
  .ledger__cfg { font-size: 1.32rem; }
  .location__cta .btn { width: 100%; }
  .footer__bar-inner { flex-direction: column; align-items: flex-start; }
}

/* ---- Tap targets, focus, sticky-bar clearance (carried forward,
        re-authored for the vermilion ring) ---- */
.btn { min-height: 44px; }
.footer__col a { padding: 11px 0; }
.footer__legal a { display: inline-block; padding: 6px 8px; }
.modal__close { top: 8px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; }
.btn--phone { gap: 8px; }
.btn--phone .btn__ic { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 860px) {
  .btn--phone { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .btn--phone .btn__ic { width: 20px; height: 20px; }
  .footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .nav__close { background: var(--ink-900); border-radius: 0; }
  .nav__close:hover { background: var(--ink-800); }
  .nav-backdrop { background: rgba(21,23,26,0.6); }
}
.btn:focus-visible,
.nav__link:focus-visible,
.footer__col a:focus-visible,
.footer__legal a:focus-visible,
.footer__social:focus-visible,
.topbar__contact a:focus-visible,
.explore-card:focus-visible,
.rich a:focus-visible,
.g-item:focus-visible,
.faq-item summary:focus-visible {
  outline: 3px solid var(--gold-1);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- "Established facts" band: a half tone off the paper ---------- */
.facts { background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%); }
.configs__cta, .faq__cta { margin-top: 30px; }
.g-item { cursor: zoom-in; }

/* ---------- Topbar: the RERA number is long, so it collapses to a
     short label before it can ever collide with the phone number ---------- */
.topbar__rera .t-short { display: none; }
@media (max-width: 620px) {
  .topbar__rera .t-full { display: none; }
  .topbar__rera .t-short { display: inline; }
}
@media (max-width: 600px) {
  .topbar { overflow: hidden; }
  .topbar__inner { gap: 10px; }
  .topbar__rera { white-space: nowrap; font-size: 0.66rem; letter-spacing: 0.04em; }
  .topbar__contact a { white-space: nowrap; font-size: 0.74rem; }
}

/* ---------- Brand lockup never wraps ---------- */
.brand { flex-shrink: 0; }
.brand__name, .brand__city { white-space: nowrap; }

/* ---------- Fixes from the 360 / 1440 QC pass ---------- */
/* .pillars lived in the fork parent's identity layer, which was deleted
   wholesale; it needs its own display declaration here. */
.pillars { display: grid; }
/* The scroll cue collided with the hero stats at short viewport heights,
   and this identity does not need the flourish. */
.hero__scroll { display: none !important; }

/* ---------- 360px header fit: the wordmark is long, so it steps down
     before it can push the call button off the right edge ---------- */
@media (max-width: 480px) {
  .brand { margin-right: 14px; }
  .brand__mark { width: 22px; height: 29px; }
  .brand__name { font-size: 0.85rem; letter-spacing: 0.085em; }
  .brand__city { font-size: 0.5rem; letter-spacing: 0.2em; margin-top: 5px; }
  .header__actions { gap: 6px; }
}

/* ---------- Icon frames need their own box model: the fork parent's
     identity layer supplied display:grid for these and was deleted ---------- */
.conn-card__ic { display: grid; place-items: center; box-sizing: content-box; }
.pillar__ic { display: block; line-height: 0; }
.conn-card__ic svg, .pillar__ic svg { display: block; }

/* ---------- Laptop band (861px to 1339px): the horizontal nav is back
     but the container is not wide enough for a six-item nav plus a
     spelled-out phone number, so both step down. ---------- */
@media (min-width: 861px) and (max-width: 1339px) {
  .brand { margin-right: 16px; }
  .brand__name { font-size: 0.94rem; letter-spacing: 0.1em; }
  .brand__city { font-size: 0.52rem; letter-spacing: 0.22em; }
  .nav { gap: 13px; }
  .nav__link { font-size: 0.76rem; letter-spacing: 0.01em; }
  .header__actions { gap: 8px; }
  .btn--phone { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .btn--phone span { display: none; }
  .btn--phone .btn__ic { width: 20px; height: 20px; }
  .header__actions .btn--gold { padding-inline: 15px; font-size: 0.71rem; }
}
@media (min-width: 861px) and (max-width: 939px) {
  /* stage 2: the nav now points at real pages, so the sacrificial 6th link
     in this narrow band is Gallery rather than the old #rera anchor. */
  .nav__link[href="/gallery/"] { display: none; }
}

/* stage 2: WCAG 2.5.8 target size for the footer WhatsApp link. */
.footer__social { min-height: 44px; padding: 10px 0; }


/* ============================================================
   TRUTH-PASS ADDITIONS (client sale sheet, 2026-08-01)
   Mobile-first. Every multi-column grid below collapses to one
   column at 480px, and no grid-template-columns is ever inlined.
   ============================================================ */

/* ---------- Launch offer band: a stated offer, never a countdown ---------- */
.offerband { background: var(--ink-800); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); }
.offerband__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  padding: 20px 0;
}
.offerband__tag {
  flex-shrink: 0; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: #fff; background: var(--gold-grad);
  padding: 7px 12px; border-radius: 2px;
}
.offerband p { margin: 0; flex: 1 1 320px; font-size: 0.96rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
.offerband strong { color: #fff; font-weight: 600; }
.offerband .btn--outline { flex-shrink: 0; color: #fff; border-color: rgba(255,255,255,0.45); }
.offerband .btn--outline:hover { background: #fff; border-color: #fff; color: var(--ink-900); }

/* ---------- Reel (portrait video). Autoplays in view on phone AND
     desktop, per the client's instruction. Tap for sound. ---------- */
.reels { background: var(--ink-900); color: #fff; }
.reels .section__title, .reels .eyebrow { color: #fff; }
.reels .eyebrow { color: var(--gold-2); }
.reels__hint { color: rgba(255,255,255,0.62); font-size: 0.95rem; margin-top: 14px; }
.reels__track { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.reel {
  position: relative; aspect-ratio: 9 / 16; max-width: 340px; width: 100%;
  margin-inline: auto; border-radius: 3px; overflow: hidden; background: #000;
  cursor: pointer; border: 1px solid rgba(217,96,63,0.24);
  box-shadow: 0 26px 56px -26px rgba(0,0,0,0.8);
  transition: border-color 0.3s var(--ease);
}
.reel:hover, .reel:focus-visible { border-color: rgba(217,96,63,0.6); }
.reel video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.reel__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 30px 14px 14px; color: #fff; font-size: 0.9rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(10,11,13,0.85));
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.reel__sound {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(10,11,13,0.55); backdrop-filter: blur(6px);
  color: #fff; display: grid; place-items: center; cursor: pointer;
}
.reel__sound .ic-on { display: none; }
.reel--live .reel__sound { background: var(--gold-1); color: #fff; }
.reel--live .reel__sound .ic-on { display: block; }
.reel--live .reel__sound .ic-off { display: none; }
.reel__live {
  position: absolute; top: 14px; left: 12px; z-index: 3;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: #fff; background: rgba(10,11,13,0.55); backdrop-filter: blur(6px);
  padding: 6px 10px; border-radius: 2px;
}
.reel-aside h3 { font-family: var(--font-head); font-size: 1.35rem; color: #fff; margin-bottom: 16px; line-height: 1.25; }
.reel-aside p { color: rgba(255,255,255,0.72); font-size: 1rem; line-height: 1.72; margin-bottom: 14px; }
.reel-aside strong { color: #fff; font-weight: 600; }
.reel-aside .btn { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .reel { cursor: default; }
  .reel video { transition: none; }
}

/* ---------- Jodi: the combined-unit tables and plan figures ---------- */
.jodi-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 30px 0 6px; }
.jodi-card {
  border: 0; border-top: 2px solid var(--ink-900); background: transparent;
  padding: 20px 0 4px;
}
.jodi-card__cfg {
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  color: var(--ink-900); line-height: 1.05; margin-bottom: 4px;
}
.jodi-card__cfg em { font-style: normal; color: var(--gold-1); }
.jodi-card__sum { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.jodi-card__area {
  display: block; margin-top: 16px; font-family: var(--font-head);
  font-size: 1.9rem; color: var(--gold-3); line-height: 1;
}
.jodi-card__area span { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.jodi-card p { margin-top: 14px; font-size: 0.95rem; line-height: 1.7; color: var(--ink-800); }

/* plan figures: never crop a drawing, and let it be opened full size */
.planfig { margin: 30px 0; }
.planfig img {
  width: 100%; height: auto; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: 2px;
}
.planfig figcaption { margin-top: 12px; font-size: 0.86rem; color: var(--muted); line-height: 1.65; }
.plan-pair { display: grid; grid-template-columns: 1fr; gap: 26px; margin: 30px 0; }
.plan-pair .planfig { margin: 0; }

@media (min-width: 781px) {
  .reels__track { grid-template-columns: 340px minmax(0, 1fr); gap: 44px; align-items: center; }
  .reel { margin-inline: 0; }
  .jodi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
  .plan-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .reels__track, .jodi-grid, .plan-pair { grid-template-columns: 1fr; }
  .offerband__inner { padding: 18px 0; }
  .offerband .btn--outline { width: 100%; }
  /* the jodi room-dimension table is the longest on the site; keep it
     inside 360px rather than letting the label column squeeze the values */
  .costsheet th, .costsheet td { padding: 11px 12px; font-size: 0.94rem; }
  .costsheet th { width: 42%; }
  .jodi-card__area { font-size: 1.7rem; }
}