/* ============================================================
   [PROJECT NAME] — Bandra Landing Page
   Design system: warm "Bandra heritage" palette — forest / ivory /
   terracotta. Deliberately not black-and-gold.
   ============================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
button {
  font-family: inherit;
}

/* ---------- Design tokens ---------- */
:root {
  --color-forest: #1C3B32;
  --color-ivory: #F6F1E7;
  --color-terracotta: #C2703F;
  --color-terracotta-dark: #A85C31;
  --color-ink: #23281F;
  --color-sand: #D8CBB3;
  --color-card: #FFFCF7;

  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4rem, 9vw, 7.5rem);

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.16, .8, .24, 1);
  --dur-s: .45s;
  --dur-m: .75s;
  --dur-l: 1.1s;

  --shadow-card: 0 12px 32px -16px rgba(28, 59, 50, 0.22);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-ivory);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* Subtle global grain across the ivory field */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: #c3bf74;
  line-height: 1.1;
}

p {
  max-width: 62ch;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-forest);
  color: var(--color-ivory);
  padding: .75em 1.25em;
  z-index: 999;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

/* ---------- Utilities ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: .9rem;
}

.eyebrow--light {
  color: var(--color-sand);
}

.eyebrow--pad {
  padding-left: var(--gutter);
}

.section__heading {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-style: italic;
  margin-bottom: 1.75rem;
  max-width: 18ch;
}

.section__heading--light {
  color: var(--color-ivory);
}

.chip {
  display: inline-block;
  padding: .45em 1em;
  border: 1px solid rgba(246, 241, 231, 0.55);
  border-radius: var(--radius-pill);
  font-size: .8rem;
  color: var(--color-ivory);
  backdrop-filter: blur(6px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.9em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  transition: transform var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}

.btn--primary {
  background: var(--color-terracotta);
  color: var(--color-ivory);
}

.btn--primary:hover {
  background: var(--color-terracotta-dark);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-forest);
  color: var(--color-forest);
}

.btn--ghost:hover {
  background: var(--color-forest);
  color: var(--color-ivory);
}

.btn--block {
  width: 100%;
}

.btn--sm {
  padding: .65em 1.4em;
  font-size: .85rem;
}

.btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
}

.nav__inner {
  width: 100%;
  max-width: 1120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .6rem .6rem 1.4rem;
  border-radius: var(--radius-pill);
  background: rgba(246, 241, 231, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(246, 241, 231, 0.25);
  transition: background-color var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}

.nav.is-scrolled .nav__inner {
  background: rgba(255, 252, 247, 0.9);
  border-color: rgba(28, 59, 50, 0.08);
  box-shadow: var(--shadow-card);
}

.nav__logo-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-ivory);
  letter-spacing: .01em;
  transition: color var(--dur-m) var(--ease), font-size var(--dur-m) var(--ease);
  white-space: nowrap;
}

.nav.is-scrolled .nav__logo-text {
  color: var(--color-forest);
  font-size: 1rem;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 1.6rem;
}

.nav__link {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-ivory);
  transition: color var(--dur-m) var(--ease), opacity var(--dur-s) var(--ease);
  opacity: .9;
}

.nav__link:hover {
  opacity: 1;
  color: var(--color-terracotta);
}

.nav.is-scrolled .nav__link {
  color: var(--color-ink);
}

.nav.is-scrolled .nav__link:hover {
  color: var(--color-terracotta);
}

.nav__cta {
  display: none;
}

.nav__toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(246, 241, 231, 0.2);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.nav.is-scrolled .nav__toggle {
  background: rgba(28, 59, 50, 0.08);
}

.nav__toggle span {
  width: 18px;
  height: 2px;
  background: var(--color-ivory);
  transition: background-color var(--dur-m) var(--ease);
}

.nav.is-scrolled .nav__toggle span {
  background: var(--color-forest);
}

.nav__mobile-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: var(--gutter);
  right: var(--gutter);
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  display: grid;
  gap: .25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility var(--dur-s);
}

.nav__mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__mobile-panel ul {
  display: grid;
  gap: .15rem;
  margin-bottom: 1rem;
}

.nav__mobile-panel .nav__link {
  color: var(--color-ink);
  display: block;
  padding: .55rem 0;
  border-bottom: 1px solid var(--color-sand);
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: inline-flex;
  }

  .nav__toggle {
    display: none;
  }

  .nav__mobile-panel {
    display: none;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-forest);
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--color-forest), var(--color-terracotta-dark));
  transform: scale(1);
  animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide img {
    animation: none;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 59, 50, .25) 0%, rgba(28, 59, 50, .35) 45%, rgba(28, 59, 50, .88) 100%);
}

.hero__dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 3;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(246, 241, 231, .45);
  border: none;
  transition: all var(--dur-s) var(--ease);
}

.hero__dot.is-active {
  width: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-terracotta);
}

.hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 7rem var(--gutter) 3rem;
  display: grid;
  gap: 2.25rem;
}

.hero__content {
  color: var(--color-ivory);
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-style: italic;
  margin: .3rem 0 1rem;
}

.hero__subtitle {
  color: var(--color-sand);
  font-size: 1.05rem;
  max-width: 40ch;
  margin-bottom: 1.5rem;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
}

.hero__form-card {
  background: var(--color-card);
  border-top: 3px solid var(--color-terracotta);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-card);
  justify-self: stretch;
}

.hero__form-title {
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: .35rem;
}

.hero__form-sub {
  font-size: .85rem;
  color: var(--color-ink);
  opacity: .7;
  margin-bottom: 1.25rem;
  max-width: none;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
    gap: 3rem;
    padding-bottom: 5rem;
  }

  .hero__form-card {
    max-width: 420px;
    justify-self: end;
  }
}

/* ============================================================
   SECTION shell + background texture
   ============================================================ */
.section {
  position: relative;
  padding: var(--section-pad) 0;
}

.section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section__inner--narrow {
  max-width: 760px;
}

.section__inner--bleed {
  padding: 0;
  max-width: none;
}

.section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-repeat: no-repeat;
  background-position: 80px bottom;
  background-size: 640px auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 220'%3E%3Cg fill='none' stroke='%231C3B32' stroke-width='2'%3E%3Crect x='20' y='90' width='55' height='130'/%3E%3Crect x='95' y='50' width='40' height='170'/%3E%3Crect x='150' y='110' width='65' height='110'/%3E%3Crect x='235' y='30' width='45' height='190'/%3E%3Crect x='300' y='75' width='60' height='145'/%3E%3Crect x='380' y='95' width='50' height='125'/%3E%3Crect x='450' y='45' width='42' height='175'/%3E%3Crect x='515' y='100' width='58' height='120'/%3E%3Crect x='595' y='65' width='48' height='155'/%3E%3Cline x1='0' y1='220' x2='800' y2='220'/%3E%3C/g%3E%3C/svg%3E");
}

.section--dark .section__bg {
  opacity: .08;
}

/* ---- Generic scroll-reveal base ---- */
.section[data-reveal] {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}

.section[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .section[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .stagger>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   OVERVIEW
   ============================================================ */
/* .overview__grid { display: grid; gap: 2.5rem; }
.overview__text p { color: var(--color-ink); opacity: .85; margin-bottom: 1rem; }
.stat-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.75rem 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--color-sand); }
.stat__value { display: block; font-family: var(--font-display); font-size: 1.7rem; font-style: italic; color: var(--color-forest); }
.stat__label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin-top: .2rem; }

@media (min-width: 768px) {
  .stat-row { grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 1024px) {
  .overview__grid { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; }
  .stat-row { border-top: none; border-left: 1px solid var(--color-sand); padding-top: 0; padding-left: 3rem; margin-top: 2.5rem; }
} */



/* ============================================================
   OVERVIEW
   ============================================================ */

.overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.overview__text {
  width: 100%;
}

.overview__text p {
  color: var(--color-ink);
  opacity: .85;
  margin-bottom: 1rem;
}

/* ---------- Overview Image ---------- */

.overview__image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-sand);
}

.overview__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 60px;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

/* Subtle premium image movement */
.overview__image:hover img {
  transform: scale(1.04);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 768px) {

  .overview__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }

  .overview__image img {
    min-height: 60px;
  }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1024px) {

  .overview__grid {
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 5rem;
  }

  .overview__image {
    min-height: 60px;
  }

  .overview__image img {
    min-height: 60px;
  }

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

  .overview__grid {
    gap: 6rem;
  }

  .overview__image img {
    min-height: 60px;
  }

}




/* ============================================================
   HIGHLIGHTS — faded numerals + stagger cascade
   ============================================================ */
/* .highlights__grid { display: grid; gap: 2.75rem 2rem; margin-top: 1rem; }
.highlight { position: relative; padding-top: .5rem; }
.highlight--offset { }
.highlight__num {
  display: block;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(28,59,50,0.16);
  margin-bottom: -.3rem;
}
.highlight__title { font-size: 1.15rem; font-style: italic; margin-bottom: .5rem; }
.highlight__desc { font-size: .92rem; opacity: .75; }

.stagger > * { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease); }
.in-view .stagger > *, .section.in-view .stagger > * { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 90ms; }
.stagger > *:nth-child(3) { transition-delay: 180ms; }
.stagger > *:nth-child(4) { transition-delay: 270ms; }
.stagger > *:nth-child(5) { transition-delay: 360ms; }
.stagger > *:nth-child(6) { transition-delay: 450ms; }

@media (min-width: 768px) {
  .highlights__grid { grid-template-columns: repeat(2, 1fr); }
  .highlight--offset { margin-top: 3rem; }
}
@media (min-width: 1024px) {
  .highlights__grid { grid-template-columns: repeat(3, 1fr); }
} */







/* ============================================================
   HIGHLIGHTS — PREMIUM OUTLINE CARDS
   ============================================================ */

.highlights__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.highlight {
  position: relative;
  min-height: 210px;
  padding: 1.4rem 1.4rem 1.3rem;
  border: 1px solid rgba(28, 59, 50, 0.14);
  border-radius: 18px;
  background: rgba(255, 252, 247, 0.28);
  overflow: hidden;

  transition:
    transform .6s var(--ease),
    border-color .6s var(--ease),
    background-color .6s var(--ease),
    box-shadow .6s var(--ease);
}


/* ---------- Subtle inner outline ---------- */

.highlight::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(194, 112, 63, 0.08);
  border-radius: 13px;
  pointer-events: none;

  transition:
    border-color .6s var(--ease),
    inset .6s var(--ease);
}


/* ---------- Hover glow / sweep ---------- */

.highlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;

  background: linear-gradient(90deg,
      transparent,
      rgba(194, 112, 63, 0.06),
      transparent);

  transform: skewX(-18deg);
  transition: left .9s var(--ease);
  pointer-events: none;
}


/* ---------- Number ---------- */

.highlight__num {
  position: relative;
  z-index: 1;

  display: block;
  margin-bottom: .5rem;

  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1;

  color: transparent;
  -webkit-text-stroke: 1.5px rgba(28, 59, 50, 0.18);

  transition:
    transform .6s var(--ease),
    -webkit-text-stroke-color .6s var(--ease);
}


/* ---------- Title ---------- */

.highlight__title {
  position: relative;
  z-index: 1;

  font-size: 1.15rem;
  font-style: italic;
  margin-bottom: .55rem;

  transition: transform .6s var(--ease);
}


/* ---------- Description ---------- */

.highlight__desc {
  position: relative;
  z-index: 1;

  font-size: .92rem;
  line-height: 1.6;
  opacity: .72;

  transition: opacity .6s var(--ease);
}


/* ============================================================
   HOVER
   ============================================================ */

.highlight:hover {
  transform: translateY(-8px);

  border-color: rgba(194, 112, 63, 0.55);

  background: rgba(255, 252, 247, 0.62);

  box-shadow:
    0 18px 40px -24px rgba(28, 59, 50, 0.35);
}

.highlight:hover::before {
  inset: 5px;
  border-color: rgba(194, 112, 63, 0.18);
}

.highlight:hover::after {
  left: 140%;
}

.highlight:hover .highlight__num {
  transform: translateX(5px);

  -webkit-text-stroke-color:
    rgba(194, 112, 63, 0.42);
}

.highlight:hover .highlight__title {
  transform: translateX(4px);
}

.highlight:hover .highlight__desc {
  opacity: .9;
}


/* ============================================================
   STAGGER ANIMATION
   ============================================================ */

.stagger>* {
  opacity: 0;
  transform: translateY(26px);

  transition:
    opacity var(--dur-m) var(--ease),
    transform var(--dur-m) var(--ease);
}

.in-view .stagger>*,
.section.in-view .stagger>* {
  opacity: 1;
  transform: translateY(0);
}

.stagger>*:nth-child(1) {
  transition-delay: 0ms;
}

.stagger>*:nth-child(2) {
  transition-delay: 90ms;
}

.stagger>*:nth-child(3) {
  transition-delay: 180ms;
}

.stagger>*:nth-child(4) {
  transition-delay: 270ms;
}

.stagger>*:nth-child(5) {
  transition-delay: 360ms;
}

.stagger>*:nth-child(6) {
  transition-delay: 450ms;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 767px) {

  .highlights__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .highlight {
    min-height: 210px;
    padding: 1.4rem 1.3rem;
    border-radius: 16px;
  }

  .highlight__num {
    font-size: 3.5rem;
  }

  .highlight__title {
    font-size: 1.08rem;
  }

  .highlight__desc {
    font-size: .88rem;
  }

  .highlight--offset {
    margin-top: 0;
  }

}

/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1024px) {

  .highlights__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .highlight {
    min-height: 220px;
    padding: 1.5rem 1.5rem;
  }

}

/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

  .highlights__grid {
    gap: 1.5rem;
  }

  .highlight {
    min-height: 230px;
    padding: 1.6rem 1.6rem;
  }

}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  .highlights__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .highlight {
    min-height: 150px;
    padding: 15px 15px;
    border-radius: 16px;
  }

  .highlight__num {
    font-size: 25px;
  }

  .highlight__title {
    font-size: 1.08rem;
  }

  .highlight__desc {
    font-size: 12px;
  }

  .highlight--offset {
    margin-top: 0;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .highlight,
  .highlight::before,
  .highlight::after,
  .highlight__num,
  .highlight__title {
    transition: none !important;
  }

  .highlight:hover {
    transform: none;
  }

  .highlight:hover::after {
    left: -120%;
  }

}

/* ============================================================
   PRICE — rows slide from right, sequentially
   ============================================================ */
.price__rows {
  display: grid;
  gap: 1.1rem;
  margin-top: 1rem;
}

.price-row {
  position: relative;
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.6rem 1.75rem;
  background: var(--color-card);
  border-top: 3px solid var(--color-sand);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
  opacity: 0;
  transform: translateX(70px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), box-shadow var(--dur-s), border-color var(--dur-s);
}

.section.in-view .price-row {
  opacity: 1;
  transform: translateX(0);
}

.price-row:nth-child(1) {
  transition-delay: 0ms;
}

.price-row:nth-child(2) {
  transition-delay: 130ms;
}

.price-row:nth-child(3) {
  transition-delay: 260ms;
}

.price-row__config h3 {
  font-size: 1.2rem;
  font-style: italic;
}

.price-row__config p {
  font-size: .85rem;
  opacity: .7;
  margin-top: .15rem;
}

.price-row__value {
  font-weight: 600;
  color: var(--color-forest);
}

.price-row--featured {
  border-top-color: var(--color-terracotta);
  box-shadow: var(--shadow-card);
  transform: translateX(70px) scale(1.02);
}

.section.in-view .price-row--featured {
  transform: translateX(0) scale(1.02);
}

.price-row__badge {
  position: absolute;
  top: -11px;
  left: 1.75rem;
  background: var(--color-terracotta);
  color: var(--color-ivory);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .8em;
  border-radius: var(--radius-pill);
}

@media (min-width: 768px) {
  .price-row {
    grid-template-columns: 1fr auto auto;
    text-align: left;
  }
}

/* ============================================================
   FLOOR PLAN — zoom reveal
   ============================================================ */
#floor-plan .section__inner {
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}

#floor-plan.in-view .section__inner {
  opacity: 1;
  transform: scale(1);
}

.floorplan__tabs {
  display: flex;
  gap: .6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: .6em 1.4em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-sand);
  background: transparent;
  color: var(--color-ink);
  font-weight: 600;
  font-size: .88rem;
  transition: all var(--dur-s) var(--ease);
}

.tab-btn.is-active {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: var(--color-ivory);
}

.floorplan__panel {
  display: grid;
  gap: 2rem;
}

.floorplan__image img {
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--color-sand);
  width: 100%;
}

.floorplan__specs {
  display: grid;
  gap: .65rem;
  margin: 1.5rem 0 1.75rem;
}

.floorplan__specs li {
  display: flex;
  justify-content: space-between;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--color-sand);
  font-size: .92rem;
}

.floorplan__specs span {
  opacity: .65;
}

@media (min-width: 1024px) {
  .floorplan__panel {
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
  }
}

/* ============================================================
   AMENITIES — clip-path wipe + hover-reveal image-bleed grid
   ============================================================ */
#amenities .section__inner {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease);
}

#amenities.in-view .section__inner {
  clip-path: inset(0 0 0 0);
}

.amenities__grid {
  display: grid;
  gap: .9rem;
  margin: 1rem 0 2rem;
  grid-template-columns: repeat(2, 1fr);
}

.amenity {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 1/1;
}

.amenity--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

.amenity img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-sand);
  transition: transform var(--dur-m) var(--ease);
}

.amenity:hover img {
  transform: scale(1.08);
}

.amenity__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 1rem .9rem;
  background: linear-gradient(0deg, rgba(28, 59, 50, .85), transparent);
  color: var(--color-ivory);
  font-size: .85rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .amenities__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .amenity--wide {
    grid-column: span 2;
  }
}

/* ============================================================
   GALLERY — scroll-snap strip + stagger fade/scale + lightbox
   ============================================================ */
.gallery__strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 var(--gutter) 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gallery__item {
  position: relative;
  flex: 0 0 78%;
  scroll-snap-align: start;
  border: none;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  transform: scale(.92);
}

.gallery__item--tall {
  aspect-ratio: 3/4.4;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-sand);
}

.gallery__item span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1rem .9rem;
  background: linear-gradient(0deg, rgba(28, 59, 50, .8), transparent);
  color: var(--color-ivory);
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
}

@media (min-width: 768px) {
  .gallery__strip {
    padding: 0 var(--gutter) 1rem;
  }

  .gallery__item {
    flex-basis: 32%;
  }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(28, 59, 50, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-sm);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(246, 241, 231, .12);
  color: var(--color-ivory);
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close {
  top: 1.5rem;
  right: 1.5rem;
}

.lightbox__prev {
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__next {
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   LOCATION ADVANTAGE — split direction
   ============================================================ */
.location__grid {
  display: grid;
  gap: 2.5rem;
}

#location-advantage .location__text {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}

#location-advantage .location__map {
  opacity: 0;
  transition: opacity 1.3s var(--ease) .15s;
}

#location-advantage.in-view .location__text {
  opacity: 1;
  transform: translateX(0);
}

#location-advantage.in-view .location__map {
  opacity: 1;
}

.location__list {
  display: grid;
  gap: .75rem;
  margin-top: 1.5rem;
}

.location__list li {
  display: flex;
  justify-content: space-between;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-sand);
}

.location__list strong {
  color: var(--color-forest);
}

.location__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--color-sand);
}

.location__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 1024px) {
  .location__grid {
    grid-template-columns: .95fr 1.05fr;
    gap: 3.5rem;
    align-items: center;
  }
}

/* ============================================================
   SITE PLAN — blur to focus
   ============================================================ */
#site-plan .section__inner {
  filter: blur(8px);
  opacity: 0;
  transition: filter var(--dur-l) var(--ease), opacity var(--dur-l) var(--ease);
}

#site-plan.in-view .section__inner {
  filter: blur(0);
  opacity: 1;
}

.siteplan__wrap {
  display: grid;
  gap: 2rem;
}

.siteplan__image img {
  border-radius: var(--radius-md);
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--color-sand);
}

.siteplan__legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem 1.5rem;
  font-size: .88rem;
}

.siteplan__legend li {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-swatch--1 {
  background: var(--color-forest);
}

.legend-swatch--2 {
  background: var(--color-terracotta);
}

.legend-swatch--3 {
  background: var(--color-sand);
}

.legend-swatch--4 {
  background: #7C9A85;
}

.legend-swatch--5 {
  background: #B08968;
}

.legend-swatch--6 {
  background: #8FB3C7;
}

@media (min-width: 1024px) {
  .siteplan__wrap {
    grid-template-columns: .8fr 1.2fr;
    grid-template-areas: "text image" "legend image";
    align-items: start;
  }

  .siteplan__text {
    grid-area: text;
  }

  .siteplan__image {
    grid-area: image;
  }

  .siteplan__legend {
    grid-area: legend;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }
}

/* ============================================================
   ABOUT DEVELOPER — dark band, count-up
   ============================================================ */
.section--dark {
  background: var(--color-forest);
  color: var(--color-ivory);
}

.developer__bio {
  color: var(--color-sand);
  margin-bottom: 2.5rem;
}

.developer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.stat-counter {
  text-align: left;
}

.stat-counter__value,
.stat-counter__suffix {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-ivory);
}

.stat-counter__label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-sand);
  margin-top: .3rem;
}

.developer__note {
  font-size: .78rem;
  color: var(--color-sand);
  opacity: .6;
  margin-top: 1.75rem;
  max-width: none;
}

/* ============================================================
   SITE VISIT — form up, info from opposite side
   ============================================================ */
.visit__grid {
  display: grid;
  gap: 2.5rem;
}

#site-visit .visit__form-col {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease);
}

#site-visit .visit__info {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--dur-l) var(--ease) .1s, transform var(--dur-l) var(--ease) .1s;
}

#site-visit.in-view .visit__form-col {
  opacity: 1;
  transform: translateY(0);
}

#site-visit.in-view .visit__info {
  opacity: 1;
  transform: translateX(0);
}

.visit__reasons {
  display: grid;
  gap: .6rem;
  margin: 1.25rem 0 2rem;
}

.visit__reasons li {
  padding-left: 1.3rem;
  position: relative;
  font-size: .95rem;
  opacity: .85;
}

.visit__reasons li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-terracotta);
}

.visit__details {
  display: grid;
  gap: 1rem;
}

.visit__details dt {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .55;
  margin-bottom: .2rem;
}

.visit__details dd {
  font-weight: 600;
}

.visit__form-col {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-card);
}

@media (min-width: 1024px) {
  .visit__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
}

/* ============================================================
   FAQ — accordion, stagger fade-up
   ============================================================ */
.faq__list {
  margin-top: 1rem;
}

.faq__item {
  border-bottom: 1px solid var(--color-sand);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  padding: 1.35rem 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink);
}

.faq__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: var(--color-terracotta);
  transition: transform var(--dur-s) var(--ease);
}

.faq__icon::before {
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
}

.faq__icon::after {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}

.faq__item.is-open .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-m) var(--ease);
}

.faq__answer-inner {
  overflow: hidden;
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer p {
  padding-bottom: 1.35rem;
  opacity: .78;
  font-size: .95rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--color-forest);
  color: var(--color-ivory);
  padding: 30px 0 20px;
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(246, 241, 231, .15);
}

.footer__logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  display: block;
  margin-bottom: .5rem;
}

.footer__brand p {
  color: var(--color-sand);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.footer__links h3,
.footer__contact h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-sand);
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
}

.footer__links ul {
  display: grid;
  gap: .6rem;
}

.footer__links a,
.footer__contact address {
  font-size: .9rem;
  color: var(--color-ivory);
  opacity: .85;
}

.footer__links a:hover {
  opacity: 1;
  color: var(--color-terracotta);
}

.footer__contact address {
  font-style: normal;
  line-height: 1.9;
}

.footer__social {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
}

.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(246, 241, 231, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
}

.footer__disclaimer {
  padding-top: 1.75rem;
}

.footer__disclaimer p {
  font-size: .74rem;
  color: var(--color-sand);
  opacity: .55;
  max-width: none;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: .75rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 252, 247, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-sand);
}

.mobile-cta-bar .btn {
  flex: 1;
}

@media (min-width: 1024px) {
  .mobile-cta-bar {
    display: none;
  }
}

/* ============================================================
   FORMS (shared: hero / popup / site-visit)
   ============================================================ */
.form {
  display: grid;
}

.field {
  display: grid;
}

.field__label {
  font-size: .82rem;
  font-weight: 600;
}

.field__optional {
  font-weight: 400;
  opacity: .55;
}

.field__input {
  width: 100%;
  padding: .85em 1em;
  background: var(--color-ivory);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: border-color var(--dur-s) var(--ease);
}

.field__input:focus {
  border-color: var(--color-terracotta);
  outline: none;
}

.field__input.has-error {
  border-color: #B3413A;
}

textarea.field__input {
  resize: vertical;
  min-height: 4.5em;
}

.field__checkbox {
  display: flex;
  gap: .6em;
  align-items: flex-start;
  font-size: .8rem;
  opacity: .85;
  line-height: 1.5;
}

.field__checkbox input {
  margin-top: .25em;
  accent-color: var(--color-terracotta);
  flex-shrink: 0;
}

.field__error {
  font-size: .76rem;
  color: #B3413A;
  min-height: 1em;
  display: block;
}

.form__status {
  font-size: .85rem;
  padding: .8em 1em;
  border-radius: var(--radius-sm);
}

.form__status[data-state="success"] {
  background: rgba(28, 59, 50, .08);
  color: var(--color-forest);
}

.form__status[data-state="error"] {
  background: rgba(179, 65, 58, .08);
  color: #B3413A;
}

.form__status[data-state="loading"] {
  background: rgba(28, 59, 50, .05);
  color: var(--color-ink);
  opacity: .7;
}

.form-success {
  text-align: center;
  padding: 1rem 0;
}

.form-success h3 {
  font-style: italic;
  margin-bottom: .5rem;
}

.form-success p {
  opacity: .75;
  font-size: .92rem;
}

/* ============================================================
   ENQUIRY POPUP
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 59, 50, .55);
  backdrop-filter: blur(3px);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(28, 59, 50, .4);
  display: grid;
  opacity: 0;
  transform: scale(.94);
  transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}

.modal.is-open .modal__dialog {
  opacity: 1;
  transform: scale(1);
}

.modal__image {
  display: none;
}

.modal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--color-sand), var(--color-card));
}

.modal__body {
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.modal__title {
  font-size: 1.5rem;
  font-style: italic;
  margin-bottom: .35rem;
}

.modal__sub {
  font-size: .88rem;
  opacity: .7;
  margin-bottom: 1.5rem;
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(28, 59, 50, .06);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .modal__dialog {
    grid-template-columns: .85fr 1.15fr;
  }

  .modal__image {
    display: block;
  }
}

/* ============================================================
   RESPONSIVE — global container polish
   ============================================================ */
@media (min-width: 1024px) {
  .stagger>*:nth-child(1) {
    transition-delay: 0ms;
  }

  .stagger>*:nth-child(2) {
    transition-delay: 80ms;
  }

  .stagger>*:nth-child(3) {
    transition-delay: 160ms;
  }

  .stagger>*:nth-child(4) {
    transition-delay: 240ms;
  }

  .stagger>*:nth-child(5) {
    transition-delay: 320ms;
  }

  .stagger>*:nth-child(6) {
    transition-delay: 400ms;
  }
}




.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav__logo-img {
  width: 140px;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  display: block;
}

.nav.is-scrolled .nav__logo-img {
  width: 115px;
}

@media (max-width: 767px) {
  .nav__logo-img {
    width: 115px;
    max-height: 40px;
  }

  .nav.is-scrolled .nav__logo-img {
    width: 105px;
  }
}




/* ============================================================
   SECTION DIVIDER
   Overview → Highlights
   ============================================================ */

.section-divider {
  position: relative;
  width: min(100% - 2.5rem, 1100px);
  height: 70px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Main animated line */
.section-divider__line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(194, 112, 63, 0.18) 12%,
      rgba(194, 112, 63, 0.65) 50%,
      rgba(194, 112, 63, 0.18) 88%,
      transparent 100%);

  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
  animation: dividerLineReveal 1.6s cubic-bezier(.16, .8, .24, 1) forwards;
}

/* Small center diamond */
.section-divider__diamond {
  position: relative;
  z-index: 2;
  width: 10px;
  height: 10px;
  background: var(--color-terracotta);
  transform: rotate(45deg) scale(0);
  box-shadow:
    0 0 0 6px var(--color-ivory),
    0 0 18px rgba(194, 112, 63, 0.25);

  animation: dividerDiamondReveal .7s .8s cubic-bezier(.16, .8, .24, 1) forwards;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes dividerLineReveal {
  0% {
    transform: translate(-50%, -50%) scaleX(0);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 1;
  }
}

@keyframes dividerDiamondReveal {
  0% {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }

  70% {
    transform: rotate(45deg) scale(1.15);
    opacity: 1;
  }

  100% {
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 768px) {

  .section-divider {
    width: min(100% - 4rem, 1100px);
    height: 85px;
  }

  .section-divider__diamond {
    width: 11px;
    height: 11px;
  }

}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1024px) {

  .section-divider {
    width: min(100% - 5rem, 1100px);
    height: 95px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  .section-divider {
    width: calc(100% - 2rem);
    height: 55px;
  }

  .section-divider__line {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(194, 112, 63, 0.2) 8%,
        rgba(194, 112, 63, 0.6) 50%,
        rgba(194, 112, 63, 0.2) 92%,
        transparent 100%);
  }

  .section-divider__diamond {
    width: 8px;
    height: 8px;
    box-shadow:
      0 0 0 5px var(--color-ivory),
      0 0 14px rgba(194, 112, 63, 0.22);
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .section-divider__line {
    animation: none;
    transform: translate(-50%, -50%) scaleX(1);
    opacity: 1;
  }

  .section-divider__diamond {
    animation: none;
    transform: rotate(45deg) scale(1);
    opacity: 1;
  }

}




/* Overview → Highlights spacing */

.section-divider {
  height: 50px;
}

#highlights {
  padding-top: 10px;
  /* padding-bottom: 30px !important; */
}

@media (max-width: 767px) {

  .section-divider {
    height: 35px;
  }

  #highlights {
    padding-top: 25px;
  }

}



/* =========================================
   HIGHLIGHTS - REDUCE TOP & BOTTOM SPACE
========================================= */

#highlights {
  padding-top: 30px !important;
  padding-bottom: 55px !important;
}


/* ============================================================
   HIGHLIGHTS → PRICE SPACING
   ============================================================ */

#price {
  padding-top: 30px;
}


/* Price se pehle divider compact */
#highlights+.section-divider {
  height: 50px;
}


/* Price ke baad Floor Plan divider bhi compact */
#price+.section-divider {
  height: 50px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  #price {
    padding-top: 25px;
  }

  #highlights+.section-divider,
  #price+.section-divider {
    height: 35px;
  }

}




/* ============================================================
   PRICE → FLOOR PLAN — COMPACT SPACING
   ============================================================ */

#floor-plan {
  padding-top: 10px !important;
}

#floor-plan .section__inner {
  padding-top: 0;
}


/* Divider ke baad extra height kam */
#price+.section-divider {
  height: 35px;
}


/* Floor Plan heading spacing */
#floor-plan .eyebrow {
  margin-top: 0;
  margin-bottom: .5rem;
}

#floor-plan .section__heading {
  margin-top: 0;
  margin-bottom: 1.25rem;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  #price+.section-divider {
    height: 30px;
  }

  #floor-plan {
    padding-top: 10px !important;
  }

}


/* ============================================================
   FLOOR PLAN TABS — SHOW ONLY ACTIVE PANEL
   ============================================================ */

.floorplan__panel[hidden] {
  display: none !important;
}

.floorplan__panel.is-active {
  display: grid;
}





/* ============================================================
   AMENITIES — REDUCE TOP & BOTTOM SPACE
   ============================================================ */

#amenities {
  padding-top: 25px;
  padding-bottom: 25px;
}

@media (max-width: 767px) {
  #amenities {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}



/* ============================================================
   GALLERY — REDUCE TOP & BOTTOM SPACE
   ============================================================ */

#gallery {
  padding-top: 20px;
  padding-bottom: 25px;
}


@media (max-width: 767px) {
  #gallery {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}



/* ============================================================
   LOCATION ADVANTAGE — REDUCE TOP & BOTTOM SPACE
   ============================================================ */

#location-advantage {
  padding-top: 25px;
  padding-bottom: 75px;
}


@media (max-width: 767px) {
  #location-advantage {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}




/* ============================================================
   SITE PLAN — REDUCE TOP & BOTTOM SPACE
   ============================================================ */

#site-plan {
  padding-top: 25px;
  padding-bottom: 25px;
}

@media (max-width: 767px) {
  #site-plan {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}


/* =========================================
   ABOUT DEVELOPER - REDUCE TOP & BOTTOM SPACE
========================================= */

#about-developer {
  padding-top: 45px;
  padding-bottom: 45px;
}

@media (max-width: 767px) {
  #about-developer {
    padding-top: 35px;
    padding-bottom: 35px;
  }
}



/* =========================================
   SITE VISIT - REDUCE TOP & BOTTOM SPACE
========================================= */

#site-visit {
  padding-top: 45px;
  padding-bottom: 45px;
}

/* @media (max-width: 767px) {
    #site-visit {
        padding-top: 35px;
        padding-bottom: 35px;
    }
} */



/* =========================================
   SITE VISIT FORM - COMPACT HEIGHT
========================================= */

#site-visit .visit__form-col {
  padding: 20px 22px !important;
}

#site-visit .visit__form-col input,
#site-visit .visit__form-col textarea {
  padding: 9px 12px !important;
}

#site-visit .visit__form-col input {
  min-height: 36px !important;
  height: 36px !important;
}

#site-visit .visit__form-col textarea {
  min-height: 35px !important;
  height: 35px !important;
}

#site-visit .visit__form-col button {
  min-height: 38px !important;
  height: 38px !important;
}

#site-visit .visit__form-col label {
  margin-bottom: 4px !important;
}






/* =========================================
   SITE VISIT FORM - WIDTH CONTROL
========================================= */

#site-visit .visit__form-col {
  width: 100%;
  max-width: 430px;
  justify-self: end;
}

#site-visit .visit__grid {
  grid-template-columns: 1fr 430px;
  gap: 60px;
}




/* =========================================
   HERO FORM - COMPACT HEIGHT
========================================= */

.hero__form-card {
  padding: 18px 28px 16px !important;
}

.hero__form-card h2 {
  margin-bottom: 6px !important;
}

.hero__form-card p {
  margin-bottom: 14px !important;
}

/* .hero__form-card .field {
    margin-bottom: 10px !important;
} */

.hero__form-card .field__label {
  margin-bottom: 4px !important;
}

.hero__form-card .field__input,
.hero__form-card input,
.hero__form-card textarea {
  min-height: 36px !important;
  height: 36px !important;
  padding: 8px 12px !important;
}

.hero__form-card textarea {
  height: 48px !important;
  min-height: 48px !important;
}

.hero__form-card .consent {
  margin: 8px 0 12px !important;
}

.hero__form-card button {
  height: 44px !important;
  min-height: 44px !important;
}


/* =========================================
   overview
========================================= */


#overview {
  padding-top: 30px;
  padding-bottom: 40px !important;
}



#gallery .gallery__item {
  height: 330px !important;
}

#gallery .gallery__item img {
  height: 100% !important;
  object-fit: cover !important;
}



/* =========================================
   GALLERY SECTION WIDTH FIX
========================================= */

#gallery {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

#gallery .section__inner--bleed {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#gallery .gallery__strip {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}




.nav__logo-img {
  width: 145px;
  height: auto;
  display: block;
  object-fit: contain;
}


.floorplan__image img {
  filter: blur(5px);
  transform: scale(1.02);
}








/* ============================================================
   ABOUT THE DEVELOPER
   Premium Editorial Layout
   ============================================================ */

.developer-section {
  position: relative;
  overflow: hidden;
  background: var(--color-forest);
  color: var(--color-ivory);
  padding: 70px 0;
}


/* ------------------------------------------------------------
   MAIN GRID
   ------------------------------------------------------------ */

.developer-section__inner {
  width: min(100% - 40px, 1200px);
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;

  align-items: center;
}


/* ============================================================
   LEFT IMAGE
   ============================================================ */

.developer-section__visual {
  position: relative;
  width: 100%;
  max-width: 560px;
}


/* Image frame */

.developer-section__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.7;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.18);

  background: rgba(255, 255, 255, 0.03);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.18);
}


/* Image */

.developer-section__image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1.01);

  filter: saturate(.88);

  transition:
    transform 1.2s var(--ease),
    filter 1.2s var(--ease);
}


.developer-section__frame:hover .developer-section__image {
  transform: scale(1.045);
  filter: saturate(1);
}


/* ============================================================
   ARCHITECTURAL GRAPHICS
   ============================================================ */

.developer-section__graphic {
  position: absolute;
  inset: 0;

  pointer-events: none;

  z-index: 2;
}


/* Thin horizontal lines */

.graphic-line {
  position: absolute;

  height: 1px;

  background: rgba(255, 255, 255, 0.55);

  transform-origin: left center;

  transition:
    width 1s var(--ease),
    opacity .6s ease;
}


/* Top architectural line */

.graphic-line--one {
  top: 17%;
  left: 8%;

  width: 42%;
}


/* Bottom architectural line */

.graphic-line--two {
  bottom: 22%;
  right: 8%;

  width: 34%;

  transform-origin: right center;
}


/* ============================================================
   CORNER GRAPHICS
   ============================================================ */

.graphic-corner {
  position: absolute;

  width: 42px;
  height: 42px;
}


/* Top corner */

.graphic-corner--top {
  top: 22px;
  right: 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
}


/* Bottom corner */

.graphic-corner--bottom {
  bottom: 22px;
  left: 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}


/* ============================================================
   GODREJ MARK
   ============================================================ */

.developer-section__mark {
  position: absolute;

  left: 24px;
  bottom: 24px;

  z-index: 3;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 12px;

  background: rgba(20, 45, 38, 0.72);

  border: 1px solid rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}


.developer-section__mark span {
  font-family: var(--font-display);

  font-size: 1.5rem;

  font-style: italic;

  line-height: 1;
}


.developer-section__mark small {
  font-size: .58rem;

  letter-spacing: .18em;

  opacity: .75;
}


/* ============================================================
   RIGHT CONTENT
   ============================================================ */

.developer-section__content {
  position: relative;

  max-width: 520px;

  padding-right: 20px;
}


/* Eyebrow */

.developer-section__eyebrow {
  color: var(--color-ivory);

  opacity: .65;

  margin-bottom: .75rem;
}


/* Heading */

.developer-section__heading {
  color: var(--color-ivory);

  margin-bottom: 1.5rem;

  max-width: 460px;
}


/* Copy */

.developer-section__copy {
  max-width: 500px;
}


.developer-section__copy p {
  margin: 0 0 1.1rem;

  font-size: .96rem;

  line-height: 1.75;

  color: rgba(255, 255, 255, .76);
  text-align: justify;
}


/* ============================================================
   DECORATIVE DIVIDER
   ============================================================ */

.developer-section__divider {
  width: 100%;

  display: flex;
  align-items: center;

  margin: 2rem 0 1.5rem;
}


.developer-section__divider span {
  display: block;

  width: 90px;

  height: 1px;

  background: linear-gradient(90deg,
      var(--color-terracotta),
      rgba(194, 112, 63, 0));
}


/* Closing statement */

.developer-section__closing {
  margin: 0;

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-style: italic;

  color: rgba(255, 255, 255, .88);
}


/* ============================================================
   SUBTLE BACKGROUND GRAPHIC
   ============================================================ */

.developer-section::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -180px;
  bottom: -220px;

  border: 1px solid rgba(255, 255, 255, .045);

  border-radius: 50%;

  pointer-events: none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1023px) {

  .developer-section {
    padding: 60px 0;
  }

  .developer-section__inner {
    gap: 45px;
  }

  .developer-section__content {
    padding-right: 0;
  }

  .developer-section__frame {
    aspect-ratio: 4 / 4.5;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

  .developer-section {
    padding: 45px 0;
  }

  .developer-section__inner {
    width: min(100% - 30px, 600px);

    grid-template-columns: 1fr;

    gap: 35px;
  }

  .developer-section__visual {
    max-width: 100%;
  }

  .developer-section__frame {
    aspect-ratio: 4 / 4.5;
  }

  .developer-section__content {
    max-width: 100%;
  }

  .developer-section__heading {
    margin-bottom: 1.1rem;
  }

  .developer-section__copy p {
    font-size: 12px;
    line-height: 1.65;
  }

  .developer-section__divider {
    margin: 1.5rem 0 1.2rem;
  }

  .developer-section__closing {
    font-size: 1rem;
  }

  .graphic-corner--top {
    top: 16px;
    right: 16px;
  }

  .graphic-corner--bottom {
    bottom: 16px;
    left: 16px;
  }

  .developer-section__mark {
    left: 16px;
    bottom: 16px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .developer-section__image {
    transition: none;
  }

  .developer-section__frame:hover .developer-section__image {
    transform: none;
  }

}






@media (max-width: 767px) {

  /* SITE VISIT - MOBILE */
  #site-visit {
    padding-top: 45px;
    padding-bottom: 45px;
  }

  #site-visit .visit__grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  #site-visit .visit__info {
    width: 100%;
  }

  #site-visit .visit__form-col {
    width: 100%;
  }

  #site-visit .form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #site-visit .section__heading {
    font-size: 32px;
    line-height: 1.05;
  }

  #site-visit .visit__reasons {
    margin-top: 18px;
  }

  #site-visit .visit__details {
    margin-top: 24px;
  }
}





@media (max-width: 767px) {

  .hero__content {
    position: relative;
    left: 0;
    right: auto;
    transform: none;
  }

  .hero__content * {
    max-width: 100%;
    font-size: 10px;
  }

  .hero__subtitle {
    width: 100%;
  }

  .hero__content .btn {
    max-width: 100%;
  }
}











/*              test */


/* =========================================================
   FINAL MOBILE HERO RESET
   IMPORTANT: KEEP THIS AT THE VERY END OF style.css
   ========================================================= */

@media screen and (max-width: 767px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* HERO */
  #hero.hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* HERO GRID */
  #hero .hero__grid {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 16px 30px !important;

    box-sizing: border-box !important;

    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  /* HERO CONTENT */
  #hero .hero__content {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    box-sizing: border-box !important;

    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* HERO FORM */
  #hero .hero__form-card {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 20px 0 0 !important;
    padding: 20px 16px !important;

    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    grid-column: auto !important;
    grid-row: auto !important;

    box-sizing: border-box !important;
  }

  /* FORM */
  #hero .hero__form-card .form {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* ALL FORM FIELDS */
  #hero .hero__form-card .field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }

  #hero .hero__form-card .field__input,
  #hero .hero__form-card input,
  #hero .hero__form-card textarea {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }

  /* BUTTON */
  #hero .hero__form-card .btn,
  #hero .hero__form-card button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  /* CONSENT */
  #hero .hero__form-card .field__checkbox {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  /* HERO IMAGE */
  #hero .hero__slides,
  #hero .hero__slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #hero .hero__slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* TEXT SHOULD NEVER CREATE HORIZONTAL OVERFLOW */
  #hero .hero__title,
  #hero .hero__subtitle,
  #hero .eyebrow,
  #hero .hero__chips {
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* CHIPS */
  #hero .hero__chips {
    display: flex !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 7px !important;
  }
}


/* =========================================================
   320px SPECIFIC
   ========================================================= */

@media screen and (max-width: 360px) {

  #hero .hero__grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #hero .hero__form-card {
    padding: 18px 14px !important;
  }

  #hero .hero__form-title {
    font-size: 21px !important;
    line-height: 1.15 !important;
  }

  #hero .hero__form-sub {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}






/* =========================================================
   MOBILE HERO - CONTENT + FORM PROPER FLOW
   ========================================================= */

@media screen and (max-width: 767px) {

  #hero {
    height: auto !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  /* Background image stays behind everything */
  #hero .hero__slides {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  #hero .hero__slide {
    width: 100% !important;
    height: 100% !important;
  }

  /* Main mobile content */
  #hero .hero__grid {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 100svh !important;

    padding: 110px 16px 30px !important;
    margin: 0 !important;

    gap: 22px !important;

    box-sizing: border-box !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }


  /* =====================================================
       HERO CONTENT
       ===================================================== */

  #hero .hero__content {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    order: 1 !important;

    box-sizing: border-box !important;
  }


  /* =====================================================
       FORM - CONTENT KE BAAD
       ===================================================== */

  #hero .hero__form-card {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;

    padding: 20px 16px !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    order: 2 !important;

    box-sizing: border-box !important;
  }


  /* =====================================================
       FORM INTERNAL
       ===================================================== */

  #hero .hero__form-card .form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  #hero .hero__form-card .field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  #hero .hero__form-card .field__input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /* =====================================================
       HERO TEXT
       ===================================================== */

  #hero .hero__title {
    width: 100% !important;
    max-width: 100% !important;

    margin-bottom: 12px !important;

    overflow-wrap: break-word !important;
  }

  #hero .hero__subtitle {
    width: 100% !important;
    max-width: 100% !important;

    margin-bottom: 16px !important;

    overflow-wrap: break-word !important;
  }


  /* =====================================================
       CHIPS
       ===================================================== */

  #hero .hero__chips {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: wrap !important;

    gap: 7px !important;

    margin-bottom: 18px !important;
  }


  /* =====================================================
       CTA
       ===================================================== */

  #hero .hero__content>.btn {
    position: relative !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;

    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}


/* =========================================================
   320px SCREEN
   ========================================================= */

@media screen and (max-width: 360px) {

  #hero .hero__grid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 105px !important;
    gap: 18px !important;
  }

  #hero .hero__form-card {
    padding: 18px 14px !important;
  }

  #hero .hero__title {
    font-size: 33px !important;
    line-height: 0.98 !important;
  }

  #hero .hero__subtitle {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}





/* =========================================================
   MOBILE HERO FORM - CONSENT CHECKBOX FIX
   ========================================================= */

@media screen and (max-width: 767px) {

  #hero .hero__form-card .field__checkbox {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-top: 10px;
    width: 100% !important;
    max-width: 100% !important;

    gap: 8px !important;

    box-sizing: border-box !important;
  }

  /* IMPORTANT:
       Checkbox ko 100% width nahi deni hai */
  #hero .hero__form-card .field__checkbox input[type="checkbox"] {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;

    height: 16px !important;
    min-height: 16px !important;

    flex: 0 0 16px !important;

    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* Consent text */
  #hero .hero__form-card .field__checkbox span {
    display: block !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 10px !important;
    line-height: 1.4 !important;

    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}




.cb-shine-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 32px;
  min-height: 54px;

  background: linear-gradient(135deg, #c8783d, #df8a4c);
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;

  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);

  overflow: hidden;
  isolation: isolate;

  box-shadow:
    0 8px 25px rgba(200, 120, 61, 0.25);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* SHINE */
.cb-shine-btn::before {
  content: "";
  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(255, 255, 255, 0.05) 70%,
      transparent 100%);

  transform: skewX(-20deg);

  animation: cbButtonShine 2.8s infinite;

  pointer-events: none;
}


/* TEXT ABOVE SHINE */
.cb-shine-btn {
  z-index: 1;
}

.cb-shine-btn::after {
  content: "";
  position: absolute;
  inset: 0;

  border-radius: inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  pointer-events: none;
}


/* SHINE MOTION */
@keyframes cbButtonShine {

  0% {
    left: -120%;
  }

  45%,
  100% {
    left: 140%;
  }

}


/* HOVER */
.cb-shine-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 32px rgba(200, 120, 61, 0.38);
}


/* CLICK */
.cb-shine-btn:active {
  transform: translateY(0);
}


/* MOBILE */
@media (max-width: 767px) {

  .cb-shine-btn {
    width: 100%;
        max-width: 175px;
        min-height: 46px;
        padding: 3px 0px;
        font-size: 15px;
        margin: 5px;
  }

}






/* =========================================================
   MOBILE RESPONSIVE - OVERVIEW SECTION
   HTML CHANGE KI ZAROORAT NAHI HAI
========================================================= */

@media (max-width: 767px) {

  /* ---------- SECTION ---------- */

  #overview.section-in-view {
    width: 100%;
    min-height: auto;
    overflow: hidden;
    position: relative;
  }

  /* ---------- INNER CONTAINER ---------- */

  #overview .section_inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 18px 90px;
  }

  /* ---------- OVERVIEW GRID ---------- */

  #overview .overview_grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  /* ---------- TEXT ---------- */

  #overview .overview_text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
  }

  #overview .overview_text .eyebrow {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1.8px;
    margin-bottom: 8px;
  }

  #overview .overview_text .section_heading {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.08;
    margin: 0 0 18px;
    word-break: normal;
  }

  #overview .overview_text p {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 18px;
    overflow-wrap: break-word;
  }

  /* ---------- BUTTON INSIDE CONTENT ---------- */

  #overview .overview_text .btn {
    max-width: 100%;
    width: auto;
    min-height: 48px;
    padding: 13px 22px;
    font-size: 14px;
  }

  /* ---------- IMAGE ---------- */

  #overview .overview_image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 280px;
    margin: 5px 0 0;
    overflow: hidden;
    border-radius: 14px;
  }

  #overview .overview_image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
  }

  /* ---------- BOTTOM MOBILE CTA ---------- */

  #overview .mobile-bottom-cta,
  #overview .overview_bottom_cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    width: 100%;
    display: flex;
    gap: 10px;

    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(0, 0, 0, 0.10);

    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  #overview .mobile-bottom-cta .btn,
  #overview .overview_bottom_cta .btn {
    flex: 1;
    width: 50%;
    min-width: 0;

    min-height: 48px;
    padding: 12px 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    line-height: 1;
    white-space: nowrap;

    border-radius: 30px;
  }

  /* ---------- PREVENT HORIZONTAL SCROLL ---------- */

  #overview,
  #overview * {
    box-sizing: border-box;
    font-size: 12px;
    text-align: justify;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  #overview .section_inner {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 85px;
  }

  #overview .overview_text .section_heading {
    font-size: 30px;
  }

  #overview .overview_text p {
    font-size: 14px;
    line-height: 1.6;
  }

  #overview .overview_image {
    height: 240px;
  }

  #overview .mobile-bottom-cta,
  #overview .overview_bottom_cta {
    padding: 8px 10px;
    gap: 8px;
  }

  #overview .mobile-bottom-cta .btn,
  #overview .overview_bottom_cta .btn {
    min-height: 46px;
    font-size: 13px;
  }

}



/* =========================================================
   LOCATION ADVANTAGE - MOBILE RESPONSIVE
   HTML CHANGE NOT REQUIRED
========================================================= */

@media (max-width: 767px) {

  /* Main section */
  #location-advantage {
    width: 100%;
    max-width: 100%;
    min-height: auto !important;
    padding-top: 25px !important;
    padding-bottom: 90px !important;
    overflow: hidden !important;
  }

  /* Background */
  #location-advantage .section_bg {
    width: 100%;
    max-width: 100%;
  }

  /* Inner */
  #location-advantage .section_inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
  }

  /* Grid */
  #location-advantage .location_grid {
    width: 100%;
    max-width: 100%;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px;
    margin: 0;
    padding: 0;
  }

  /* Text column */
  #location-advantage .location_text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Eyebrow */
  #location-advantage .location_text .eyebrow {
    width: 100%;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 1.8px;
  }

  /* Heading */
  #location-advantage .location_text .section_heading {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.08;
    word-break: normal;
  }

  /* Location list */
  #location-advantage .location_list {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
  }

  /* Individual location */
  #location-advantage .location_list li {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
    padding: 12px 0;

    margin: 0;

    box-sizing: border-box;
  }

  /* Location name */
  #location-advantage .location_list li span {
    flex: 1 1 auto;
    min-width: 0;

    font-size: 14px;
    line-height: 1.45;

    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Time */
  #location-advantage .location_list li strong {
    flex: 0 0 auto;
    white-space: nowrap;

    font-size: 14px;
    line-height: 1.4;
  }

  /* Map */
  #location-advantage .location_map {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 280px;

    margin: 0;
    padding: 0;

    overflow: hidden;
    border-radius: 15px;

    box-sizing: border-box;
  }

  /* Map iframe */
  #location-advantage .location_map iframe {
    display: block;

    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    border: 0;
    margin: 0;
  }

  /* Map image if iframe is not used */
  #location-advantage .location_map img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 100%;

    object-fit: cover;
  }

  /* Map buttons / overlays */
  #location-advantage .location_map>* {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Prevent horizontal overflow */
  #location-advantage,
  #location-advantage * {
    box-sizing: border-box;
    font-size: 12px;
  }
}


/* =========================================================
   SMALL MOBILE - 360px / 320px
========================================================= */

@media (max-width: 380px) {

  #location-advantage {
    padding-top: 20px !important;
    padding-bottom: 85px !important;
  }

  #location-advantage .section_inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  #location-advantage .location_grid {
    gap: 20px;
  }

  #location-advantage .location_text .section_heading {
    font-size: 30px;
    line-height: 1.08;
    margin-bottom: 16px;
  }

  #location-advantage .location_list li {
    padding: 11px 0;
    gap: 10px;
  }

  #location-advantage .location_list li span,
  #location-advantage .location_list li strong {
    font-size: 13px;
  }

  #location-advantage .location_map {
    height: 245px;
    border-radius: 13px;
  }
}


/* =========================================================
   VERY SMALL SCREEN - 320px
========================================================= */

@media (max-width: 330px) {

  #location-advantage .section_inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  #location-advantage .location_text .section_heading {
    font-size: 28px;
  }

  #location-advantage .location_list li span,
  #location-advantage .location_list li strong {
    font-size: 12.5px;
  }

  #location-advantage .location_list li {
    gap: 7px;
  }

  #location-advantage .location_map {
    height: 225px;
  }
}



/* =====================================================
   SITE VISIT - REASONS LIST MOBILE FIX
   ===================================================== */

@media (max-width: 767px) {

  #site-visit .visit__reasons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 0 !important;
  }

  #site-visit .visit__reasons li {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 0 0 20px !important;

    font-size: 15px !important;
    line-height: 1.55 !important;

    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  /* Orange dash */
  #site-visit .visit__reasons li::before {
    content: "—" !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;

    color: #c9783b !important;
  }

  /* Space between points */
  #site-visit .visit__reasons li+li {
    margin-top: 14px !important;
  }
}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

  #site-visit .visit__reasons {
    margin-bottom: 24px !important;
  }

  #site-visit .visit__reasons li {
    padding-left: 19px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #site-visit .visit__reasons li+li {
    margin-top: 13px !important;
  }
}


/* =====================================================
   320px MOBILE
   ===================================================== */

@media (max-width: 360px) {

  #site-visit .visit__reasons li {
    padding-left: 18px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* =====================================================
   SITE VISIT DETAILS - MOBILE RESPONSIVE
   ===================================================== */

@media (max-width: 767px) {

  #site-visit .visit__details {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 25px 0 0 !important;
    padding: 0 !important;

    gap: 18px !important;
  }

  #site-visit .visit__details>div {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #site-visit .visit__details dt {
    margin: 0 0 6px !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
  }

  #site-visit .visit__details dd {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;

    font-weight: 500 !important;

    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 480px) {

  #site-visit .visit__details {
    margin-top: 22px !important;
    gap: 17px !important;
  }

  #site-visit .visit__details dt {
    font-size: 10px !important;
    letter-spacing: 1.4px !important;
  }

  #site-visit .visit__details dd {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}


/* =====================================================
   320px MOBILE
   ===================================================== */

@media (max-width: 360px) {

  #site-visit .visit__details {
    gap: 15px !important;
  }

  #site-visit .visit__details dd {
    font-size: 13.5px !important;
  }
}


@media (max-width: 767px) {
  .field__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    font-size: 12px;
    line-height: 1.45;
    box-sizing: border-box;
  }

  .field__checkbox input[type="checkbox"] {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 2px 0 0;
  }

  .field__checkbox span {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    line-height: 1.45;
    overflow-wrap: break-word;
    margin-top: 10px;
  }
}



/* Complete Costing Details - Mobile Responsive */
@media (max-width: 767px) {

  .price-row .btn.btn--ghost {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    padding: 12px 20px !important;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    white-space: normal;
    line-height: 1.3;

    box-sizing: border-box;
  }

}


/* 5 BHK - Complete Costing Details Button */
@media (max-width: 767px) {

    .price-row--featured .btn.btn--primary {
        width: 100%;
        max-width: 100%;
        min-height: 50px;

        padding: 12px 18px !important;

        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        text-align: center;
        white-space: normal;
        line-height: 1.3;

        box-sizing: border-box;
    }

}


/* =========================================
   HERO FORM - LABEL INSIDE INPUT
========================================= */

#heroFormCard .field__label {
    display: none !important;
}

#heroFormCard .field__input::placeholder {
    color: #777;
    opacity: 1;
}

#heroFormCard #hero-name::placeholder {
    content: "Name";
}

#heroFormCard #hero-mobile::placeholder {
    content: "Mobile Number";
}

#heroFormCard #hero-email::placeholder {
    content: "Email Address";
}

#heroFormCard #hero-message::placeholder {
    content: "Message (Optional)";
}





#mobileOnlyBanner {
    display: none;
}

@media only screen and (max-width: 767px) {

    #mobileOnlyBanner {
        display: block !important;

        width: calc(100% - 20px) !important;
        height: 180px !important;

        margin: 15px auto !important;

        position: relative !important;

        overflow: hidden !important;

        border-radius: 14px !important;

        z-index: 99999 !important;

        background: #004449 !important;
    }

    #mobileOnlyBanner .mob-banner-slide {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        opacity: 0 !important;

        transition: opacity .6s ease !important;
    }

    #mobileOnlyBanner .mob-banner-slide.active {
        opacity: 1 !important;
    }
}


/* =========================================================
   MOBILE ONLY - 3 IMAGE BANNER SLIDER
   DESKTOP IS COMPLETELY UNTOUCHED
========================================================= */

#mobileOnlyBanner {
    display: none !important;
}

@media only screen and (max-width: 767px) {

    /* Main mobile banner */
    header#hero #mobileOnlyBanner {
        display: block !important;

        position: absolute !important;

        top: 82px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 175px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        z-index: 20 !important;

        background: #004449 !important;

        border-radius: 0 !important;
    }


    /* Every slide */
    header#hero #mobileOnlyBanner .mob-banner-slide {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 208px !important;

        margin: 0 !important;
        padding: 0 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        opacity: 0 !important;
        visibility: hidden !important;

        display: block !important;

        transform: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        transition:
            opacity 0.6s ease,
            visibility 0.6s ease !important;
    }


    /* Active image */
    header#hero #mobileOnlyBanner .mob-banner-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
    }


    /*
       IMPORTANT:
       Existing hero content ko hide nahi karna.
       Sirf slider ke liye upar space banana hai.
    */

    header#hero .hero__grid {
        padding-top: 275px !important;
    }


    /* Existing hero background ko green gradient */
    header#hero {
        background:
            linear-gradient(
                180deg,
                #003f43 0%,
                #004449 45%,
                #003b3f 100%
            ) !important;
    }


    /*
       Existing background image ko mobile par hide.
       Sirf background image hide hogi,
       existing text/form hide NAHI honge.
    */

    header#hero::before,
    header#hero .hero__slides,
    header#hero .hero__overlay {
        background-image: none !important;
    }
}


/* =========================================================
   MOBILE HERO - REMOVE OLD BACKGROUND IMAGE
   KEEP ALL EXISTING CONTENT
========================================================= */

@media only screen and (max-width: 767px) {

    /* Hero ka old background completely remove */
    header#hero {
        background: #004449 !important;
        background-image: none !important;
    }

    /* Old hero image/slides hide */
    header#hero .hero__slides {
        display: none !important;
        background: none !important;
    }

    header#hero .hero__overlay {
        background: none !important;
        background-image: none !important;
    }

    /* Agar old image pseudo-element se aa rahi ho */
    header#hero::before,
    header#hero::after {
        background-image: none !important;
    }

    /* Green background */
    header#hero {
        background:
            linear-gradient(
                180deg,
                #004449 0%,
                #004449 50%,
                #003b3f 100%
            ) !important;
    }

    /* New 3-image slider upar rahe */
    #mobileOnlyBanner {
        z-index: 20 !important;
    }

    /* Existing hero content slider ke neeche */
    header#hero .hero__grid {
        position: relative !important;
        z-index: 10 !important;
    }
}



/* =========================================================
   FINAL MOBILE BANNER FIX
   ONLY MOBILE — DESKTOP COMPLETELY UNTOUCHED
   ========================================================= */

@media only screen and (max-width: 767px) {

    #mobileOnlyBanner {
        display: block !important;
        position: relative !important;

        width: 100% !important;
        height: 175px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        /* Green background */
        background: linear-gradient(
            180deg,
            #004b4d 0%,
            #00585a 50%,
            #003f41 100%
        ) !important;
    }


    #mobileOnlyBanner .mob-banner-slide {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        /* FORCE NO CROP */
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        /* Remove any old animation positioning */
        transform: none !important;

        /* Remove old styling */
        border: none !important;
        border-radius: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transition:
            opacity 0.6s ease,
            visibility 0.6s ease !important;
    }


    #mobileOnlyBanner .mob-banner-slide.active {
        opacity: 1 !important;
        visibility: visible !important;

        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        transform: none !important;
    }


    /* IMPORTANT:
       Prevent old hero/mobile image rules
       from affecting this banner */
    #mobileOnlyBanner .mob-banner-slide::before,
    #mobileOnlyBanner .mob-banner-slide::after {
        content: none !important;
        display: none !important;
    }
}