:root {
  --cream: #ffffff;
  --deep-green: #2C3B2D;
  --mid-green: #3D5A40;
  --gold: #B8965A;
  --gold-light: #B8965A;
  --text-dark: #1A1A1A;
  --text-mid: #4A4A4A;
  --text-light: #7A7A7A;
  --border: #E0D9CC;
  --white: #FFFFFF;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}


body {
  /* background: var(--cream); */
  color: var(--text-dark);
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

/* ─── SHARED ─── */
.sl {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

.sl::before {
  content: '';
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--gold);
  flex-shrink: 0;
}

.sl.c {
  justify-content: center;
}

.sl.c::before {
  display: none;
}

.sl.c::after {
  content: '';
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--gold);
}

/* ─── NAVBAR ─── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48px;
  height: 72px;
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s;
}

nav.scrolled {
  background: #2d3b2df2;
  backdrop-filter: blur(14px);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}

.nav-logo img {
  /* height: 30px; */
  height: 70px;
  width: auto;
  display: block;
  filter: brightness(1);
  transition: opacity 0.3s;
}

.nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links li a {
  color: rgba(255, 255, 255, 0.90);
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.2px;
  transition: color 0.25s;
  white-space: nowrap;
}

.nav-links li a:hover {
  color: var(--gold-light);
}

.nav-cta-pill {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 28px;
  border-radius: 50px;
  transition: background 0.3s, transform 0.2s;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.nav-cta-pill:hover {
  background: #c9a35f;
  transform: translateY(-1px);
}

/* ─── HERO ─── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/banner.webp') center 40% / cover no-repeat;
  transform: scale(1.08);
  animation: heroZoom 14s ease-out forwards;
}

@keyframes heroZoom {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1.00);
  }
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* background:
      linear-gradient(to bottom, rgba(5,10,5,0.80) 0%, rgba(5,10,5,0.10) 38%, rgba(5,10,5,0.15) 55%, rgba(5,10,5,0.68) 100%),
      linear-gradient(to right, rgba(5,10,5,0.9) 0%, rgba(5,10,5,0.00) 55%); */
  background:
    linear-gradient(to bottom,
      rgba(5, 10, 5, 0.58) 0%,
      rgba(5, 10, 5, 0.16) 38%,
      rgba(5, 10, 5, 0.18) 55%,
      rgba(5, 10, 5, 0.48) 100%),
    linear-gradient(to right,
      rgba(5, 10, 5, 0.28) 0%,
      rgba(5, 10, 5, 0.04) 65%);
}


.hero-location {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.80);
  font-family: 'Lato', sans-serif;
  font-size: 11.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.hero-location svg {
  width: 13px;
  height: 13px;
  color: var(--gold-light);
  flex-shrink: 0;
}

.hero-title-line1 {
  display: block;
  font-family: 'Lato', serif;
  color: #fff;
  /* font-size: clamp(44px, 5.2vw, 58px); */
  font-size: clamp(44px, 5.2vw, 35px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  opacity: 0;
  transform: translateY(32px);
  animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.hero-title-line1 em {
  font-style: italic;
  font-weight: 700;
  color: #fff;
}

.hero-title-line2 {
  display: block;
  font-family: 'Lato', serif;
  color: var(--gold-light);
  font-size: clamp(44px, 3.2vw, 37px);
  /* font-size: clamp(44px, 3.2vw, 48px); */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(32px);
  animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}

.hero-desc {
  color: rgba(255, 255, 255, 0.80);
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 1.08s forwards;
}

.hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-stat-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  border-radius: 4px;
  padding: 14px 20px;
  min-width: 148px;
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-stat-chip:nth-child(1) {
  animation-delay: 1.25s;
}

.hero-stat-chip:nth-child(2) {
  animation-delay: 1.42s;
}

.hero-stat-chip:nth-child(3) {
  animation-delay: 1.58s;
}

.hero-explore {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Lato', sans-serif;
  font-size: 9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s;
  opacity: 0;
  animation: heroFadeUp 0.6s ease 1.85s forwards;
}

.hero-explore:hover {
  color: var(--gold-light);
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chevron-down {
  width: 18px;
  height: 18px;
  animation: bounceDown 2s ease-in-out 2.6s infinite;
}

@keyframes bounceDown {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: 0 60px 44px;
  max-width: 850px;
}

.hero-stat-chip-icon {
  color: var(--gold-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.hero-stat-chip-icon svg {
  width: 22px;
  height: 22px;
}

.hero-stat-num {
  font-family: 'Lato', serif;
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5px;
}

.hero-stat-num .stat-unit-label {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-left: 4px;
}

.hero-stat-sub {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.60);
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.hero-cta-row {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
  margin-bottom: 8px;
}

/* shared buttons */
.btn-primary {
  background: var(--gold);
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  border-radius: 2px;
  transition: background 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--gold-light);
}

.btn-outline {
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 14px 32px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  border-radius: 2px;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn-outline:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}

/* ─── SECTION UTILITY ─── */
section {
  padding: 90px 40px;
}

.section-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-family: 'Lato', sans-serif;
}

.section-title {
  font-family: 'Lato', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.2;
  margin-bottom: 20px;
}

.section-title em {
  font-style: italic;
  color: var(--gold);
}

.section-body {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-mid);
  max-width: 600px;
}

.divider {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 20px 0;
}


/* ══════════════════════════════════════
     WHERE NATURE MEETS — SECTION
  ══════════════════════════════════════ */
.nature-s {
  padding: 90px 130px;
  background: var(--cream);
}

.nature-i {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ── Left: 3-image mosaic ──
     Layout: tall image left (full height), two stacked right
     ┌──────────┬──────────┐
     │          │  top-rt  │  ← 57% of height
     │  tall    ├──────────┤
     │          │  bot-rt  │  ← 43% of height
     └──────────┴──────────┘
  */
.nimgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 57fr 43fr;
  gap: 8px;
  height: 480px;
  /* fixed total height */
}

.ni {
  overflow: hidden;
  position: relative;
  border-radius: 4px;
}

/* tall left image spans both rows */
.ni.tall {
  grid-column: 1;
  grid-row: 1 / 3;
  border-radius: 50px 0 50px 0;
  /* left outer corners only */
}

/* top-right */
.ni:not(.tall):nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  border-radius: 0 50px 0 0;
  /* top-right outer corner */
}

/* bottom-right */
.ni:not(.tall):nth-of-type(3) {
  grid-column: 2;
  grid-row: 2;
  border-radius: 0 0 50px 0;
  /* bottom-right outer corner */
}

/* ni-bg fills the cell and images fill ni-bg */
.ni-bg {
  position: absolute;
  inset: 0;
}

.ni-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ni:hover .ni-bg img {
  transform: scale(1.05);
}

/* Fallback background gradients (shown if image fails to load) */
.ni1 .ni-bg {
  background: linear-gradient(160deg, #2d4a2d, #1a3022, #0d2015);
}

.ni2 .ni-bg {
  background: linear-gradient(200deg, #3a4a3a, #2d3b2d);
}

.ni3 .ni-bg {
  background: linear-gradient(120deg, #1e3a2e, #2d4a3d);
}

/* image tag overlay */
.ni-t {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(250, 246, 237, 0.85);
  background: rgba(10, 20, 10, 0.50);
  padding: 4px 10px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* ── Right: content ── */
.nature-right {
  display: flex;
  flex-direction: column;
}

/* heading: line 1 dark, line 2 italic gold */
.nature-title {
  font-family: 'Lato', serif;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.18;
  margin-bottom: 22px;
  letter-spacing: -0.3px;
}

.nature-title .line2 {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
  /* gold italic second line */
}

.nature-body {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-mid);
}

/* ── Stats grid: 3 per row, 2 rows ──
     Each cell: gold serif number + small label below
     Separated by horizontal lines between rows
  */
.nstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ← 3 per row */
  gap: 0;
}

.ns {
  padding: 20px 0 18px;
  /* horizontal line above each row */
  padding-right: 12px;
}

.ls {
  padding: 20px 0 18px;
  border-top: 1px solid var(--border);
  padding-right: 12px;
}


/* last row — no bottom border needed as section ends */
.ns:nth-child(n+4) {
  border-bottom: none;
}

.ns .n {
  font-family: 'Lato', serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 7px;
}

.ns .l {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1.4;
  letter-spacing: 0.2px;
}

.ls .l {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1.4;
  letter-spacing: 0.2px;
}

.ls .n {
  font-family: 'Lato', serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 7px;
}

/* ══════════════════════════════════════
     A LEGACY DEFINED BY NATURE
     Reference layout:
       Row 1: [card: img+icon+title+body] [card: img+icon+title+body]
       Row 2: [card: img only           ] [card: icon+title+body+4-stats]
     Cards: white bg, subtle shadow, 20px border-radius
     Images: rounded top corners only (20px), overflow hidden
  ══════════════════════════════════════ */

/* ══════════════════════════════════════════
     A LEGACY DEFINED BY NATURE — exact match
  ══════════════════════════════════════════ */

.legacy-section {
  background: var(--cream);
  padding: 40px 130px 70px;
}

.legacy-header {
  margin-bottom: 44px;
}

.legacy-title {
  font-family: 'Lato', serif;
  font-size: clamp(36px, 3.8vw, 52px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  margin-top: 10px;
  letter-spacing: -0.5px;
}

/* Scroll-based slider */
.legacy-slider-wrap {
  position: relative;
}

.legacy-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.legacy-track::-webkit-scrollbar {
  display: none;
}

/* 2 cards visible on desktop */
.legacy-track .lc {
  flex: 0 0 calc(50% - 8px);
  scroll-snap-align: start;
  min-width: 0;
}

.legacy-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.legacy-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legacy-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #D4CAB8;
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
}

.legacy-dot.legacy-dot-active {
  width: 24px;
  border-radius: 4px;
  background: var(--gold);
}

.legacy-arrows {
  display: flex;
  gap: 10px;
}

.legacy-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #E0D9CC;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.legacy-arrow:hover {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.05);
}

.legacy-arrow:hover svg {
  stroke: #fff;
}

.legacy-arrow svg {
  width: 15px;
  height: 15px;
  stroke: #7A7A7A;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.25s;
}

/* 1 card visible on mobile */
@media (max-width: 900px) {
  .legacy-track .lc {
    flex: 0 0 100%;
  }
}

/* base card */
.lc {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.lc.lc-visible {
  opacity: 1;
  transform: translateY(0);
  padding: 30px;
}

.lc:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);

}

/* Image fills full width of card, height auto-proportional */
.lc-img {
  width: 100%;
  height: 330px;
  overflow: hidden;
  display: block;
  line-height: 0;
}

/* Row 2 left card image is shorter */
.lc-img.lc-img-sm {
  height: 196px;
}

.lc-img img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lc-img .img1 {
  border-radius: 50px 10px 50px 10px;
}

.lc-img .img2 {
  border-radius: 10px 50px 10px 50px;
}

.lc-img .img3 {
  border-radius: 10px 50px 10px 50px;
}

.lc-img .img4 {
  border-radius: 50px 10px 50px 10px;
}

.lc:hover .lc-img img {
  transform: scale(1.04);
}

/* card body */
.lc-body {
  padding: 18px 20px 22px;
}

/* icon + title on same row */
.lc-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.lc-icon-wrap {
  width: 30px;
  height: 30px;
  min-width: 30px;
  background: rgba(184, 150, 90, 0.10);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lc-icon-wrap svg {
  width: 14px;
  height: 14px;
  stroke: #B8965A;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lc-title {
  font-family: 'Lato', serif;
  font-size: 16.5px;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.2;
}

.lc-text {
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  color: #7A7A7A;
  line-height: 1.72;
  margin: 0;
}

/* stats card: NO image, content starts from top */

.lc-title {
  font-size: 17.5px;
}

.lc-text {
  margin-top: 8px;
}

/* 4-stat row */
.lc-minostats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #E0D9CC;
  padding-top: 20px;
}

.lc-ms {
  text-align: center;
  padding: 0 4px;
  border-right: 1px solid #E0D9CC;
}

.lc-ms:last-child {
  border-right: none;
}

.lc-ms-num {
  font-family: 'Lato', serif;
  font-size: 22px;
  font-weight: 400;
  color: #B8965A;
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}

.lc-ms-lbl {
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 300;
  color: #7A7A7A;
  line-height: 1.4;
}


/* ─── CLUB SUMADHURA ─── */
.club-section {
  background: var(--cream);
  padding: 40px 130px 70px;
}

.club-title {
  font-family: 'Lato', serif;
  font-size: clamp(40px, 4.5vw, 60px);
  font-weight: 400;
  font-style: italic;
  color: #B8965A;
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.club-desc {
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: #4A4A4A;
  line-height: 1.85;
  max-width: 560px;
  margin-bottom: 56px;
}

.club-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 0;
  row-gap: 48px;
}

/* Each athlete card */
.ca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ca.ca-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Figure wrapper */
.ca-fig {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 20px;
  overflow: visible;
  position: relative;
}

/* Artwork image */
.ca-fig img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.45s ease;
  position: relative;
  z-index: 1;
}

/* On hover: subtle lift + scale */
.ca:hover .ca-fig img {
  transform: translateY(-8px) scale(1.06);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.12));
}

/* ── HOVER TOOLTIP CARD ──
     Frosted glass card that appears over the bottom-right
     of the figure on hover. Matches video exactly:
     - white semi-transparent bg
     - gold uppercase academy label at top
     - small body text below
     - smooth fade-in + slide-up on hover
  */
.ca-tooltip {
  position: absolute;
  /* centered horizontally over the figure, in the lower-middle area */
  bottom: 50px;
  left: 66%;
  transform: translateX(-50%) translateY(10px);
  width: 170px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  text-align: center;
  z-index: 10;

  /* hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Show on card hover */
.ca:hover .ca-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.ca-tooltip-label {
  font-family: 'Lato', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #B8965A;
  margin-bottom: 6px;
  display: block;
}

.ca-tooltip-text {
  font-family: 'Lato', sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  color: #2A2A2A;
  line-height: 1.6;
}

/* Gold divider line — slides in on hover */
.ca-divider {
  width: 36px;
  height: 1px;
  background: #D4AF72;
  margin-bottom: 12px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.3s ease 0.08s,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

.ca:hover .ca-divider {
  opacity: 1;
  transform: scaleX(1);
}

/* Name */
.ca-name {
  font-family: 'Lato', serif;
  ;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1A1A1A;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

.ca:hover .ca-name {
  color: #2C3B2D;
}

/* Academy label */
.ca-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #B8965A;
}

/* ─── CTA BANNER ─── */
.cta-banner {
  position: relative;
  background: #2C3B2D;
  padding: 72px 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}

/* Subtle dark vignette patches for depth */
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(0, 0, 0, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 85% 50%, rgba(0, 0, 0, 0.22) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner-left {
  flex: 1;
  position: relative;
  z-index: 1;
  max-width: 560px;
}

/* "LIMITED AVAILABILITY" label with clock icon */
.cta-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.cta-eyebrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold-light);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  flex-shrink: 0;
}

/* Big heading: "What You're" white + "Missing Out" gold italic */
.cta-title {
  font-family: 'Lato', serif;
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.3px;
}

.cta-title em {
  font-style: italic;
  font-weight: 400;
  color: #D4AF72;
}

.cta-desc {
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: 28px;
}

.cta-desc1 {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  max-width: 480px;
  margin-bottom: 10px;
}

/* Two outline pill badges */
.cta-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(212, 175, 114, 0.45);
  border-radius: 50px;
  padding: 9px 20px;
  color: rgba(255, 255, 255, 0.80);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  transition: border-color 0.3s, color 0.3s;
  cursor: default;
}

.cta-pill:hover {
  border-color: rgba(212, 175, 114, 0.75);
  color: #fff;
}

.cta-pill svg {
  width: 13px;
  height: 13px;
  stroke: var(--gold-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  flex-shrink: 0;
}

/* Right: glassmorphism price card */
.cta-price-card {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 400px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 40px 36px 36px;
  text-align: right;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cta-card-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  margin-bottom: 14px;
}

.cta-card-price {
  font-family: 'Lato', serif;
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 400;
  color: #D4AF72;
  line-height: 1.1;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.cta-card-sub {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 32px;
  letter-spacing: 0.2px;
}

/* "Enquire Now →" gold pill CTA */
.cta-card-btn {
  align-items: center;
  gap: 8px;
  background: #B8965A;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
  padding: 13px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  letter-spacing: 0.2px;
  justify-content: center;
}

.cta-card-btn:hover {
  background: #c9a35f;
  transform: translateY(-1px);
}

.cta-card-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ─── INTENTIONAL DETAILS ─── */
.details-section {
  background: var(--cream);
  padding: 70px 130px 70px
}

/* Section header */
.details-header {
  text-align: center;
  margin-bottom: 56px;
}

.details-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto 16px;
}

.details-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.details-title {
  font-family: 'Lato', serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.12;
  letter-spacing: -0.5px;
  text-align: left;
}

.details-title em {
  font-style: italic;
  color: #1A1A1A;
}

/* 3-col grid */
.details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card — no image, all content centered */
.dc {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 16px;
  padding: 24px 25px 24px;
  text-align: center;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;

  /* entrance */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.dc.dc-visible {
  opacity: 1;
  transform: translateY(0);
}

.dc:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

/* Small icon — centered, soft gold bg */
.dc-icon {
  width: 52px;
  height: 52px;
  background: rgba(184, 150, 90, 0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background 0.3s ease;
}

.dc:hover .dc-icon {
  background: rgba(184, 150, 90, 0.18);
}

.dc-icon svg {
  width: 22px;
  height: 22px;
  stroke: #B8965A;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Category label — small gold caps */
.dc-cat {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #B8965A;
  margin-bottom: 10px;
  display: block;
}

/* Italic serif subtitle */
.dc-sub {
  font-family: 'Lato', serif;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: #1A1A1A;
  line-height: 1.25;
  margin-bottom: 24px;
  letter-spacing: -0.2px;
}

/* Thin divider */
.dc-divider {
  width: 32px;
  height: 1px;
  background: #E0D9CC;
  margin: 0 auto 22px;
}

.dc-desc {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.85;
  max-width: 480px;
}

/* Bullet list — centered */
.dc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
}

.dc-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #3A3A3A;
  line-height: 1.4;
}

.dc-list li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  background: #B8965A;
  flex-shrink: 0;
}


/* ─── AMENITIES ─── */
.amenities-section {
  background: var(--cream);
  padding: 70px 130px 70px;
}

/* Header */
.am-header {
  margin-bottom: 48px;
}

.am-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin-bottom: 16px;
}

.am-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.am-title {
  font-family: 'Lato', serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.am-title em {
  font-style: italic;
}

/* Main layout: left image card + right content */
.am-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
}

/* ── LEFT: tall image card ── */
.am-img-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 360px;
  flex-shrink: 0;
}

/* each tab's image — absolute, crossfades */
.am-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.am-img.am-img-active {
  opacity: 1;
}

/* Dark gradient overlay at bottom */
.am-img-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      transparent 35%,
      rgba(10, 16, 10, 0.55) 65%,
      rgba(10, 16, 10, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Small category label top-left */
.am-img-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: 0.5px;
}

.am-img-badge svg {
  width: 13px;
  height: 13px;
  stroke: var(--gold-light);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Bottom text overlay */
.am-img-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
  z-index: 2;
  color: white;
}

.am-img-name {
  font-family: 'Lato', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 8px;
}

.am-img-desc {
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

/* ── RIGHT: tabs + grid ── */
.am-right {
  display: flex;
  flex-direction: column;
}

/* Category tabs row */
.am-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.am-tab {
  padding: 9px 20px;
  border-radius: 50px;
  border: 1px solid #E0D9CC;
  background: transparent;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4A4A4A;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.am-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.am-tab.am-tab-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 500;
}

/* 3-column amenity grid */
.am-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  /* background: #E8E4DC; */
  border: 1px solid #E8E4DC;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
}

/* Individual amenity cell */
.am-item {
  background: #ffffff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.25s, color 0.25s;
  cursor: default;
}

.am-item:hover {
  background: var(--deep-green);
}

.am-item:hover .am-item-name {
  color: #fff;
}

.am-item:hover .am-item-icon svg {
  stroke: rgba(255, 255, 255, 0.8);
}

/* Icon */
.am-item-icon {
  /* width: 32px; */
  /* height: 32px; */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.am-item-icon svg {
  /* width: 18px; */
  /* height: 18px; */
  width: 40px;
  height: 40px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s;
}

/* Name */
.am-item-name {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #2A2A2A;
  transition: color 0.25s;
}

/* "And many more..." italic footnote */
.am-footnote {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  color: var(--text-light);
  line-height: 1.6;
}

/* Tab content panels — only active shown */
.am-panel {
  display: none;
}

.am-panel.am-panel-active {
  display: block;
}


/* ─── GLIMPSE ─── */
.glimpse-section {
  background: var(--cream);
  padding: 70px 130px 70px;
  overflow: hidden;
}

/* Header */
.gl-header {
  margin-bottom: 40px;
}

.gl-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin-bottom: 14px;
}

.gl-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.gl-title {
  font-family: 'Lato', serif;
  font-size: clamp(32px, 3.8vw, 50px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.12;
  letter-spacing: -0.4px;
}

.gl-title em {
  font-style: italic;
}

/* ── Grid: 1 large left + 2×2 right ── */
.gl-grid {
  display: grid;
  grid-template-columns: 47fr 53fr;
  gap: 10px;
  height: 420px;
}

/* Large left image */
.gl-main {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
}

.gl-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gl-main:hover img {
  transform: scale(1.04);
}

/* 2×2 right sub-grid */
.gl-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* Small thumb */
.gl-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  min-height: 0;
  /* fix grid overflow */
}

.gl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gl-thumb:hover img {
  transform: scale(1.05);
}

/* Hover overlay on all gallery items */
.gl-main::after,
.gl-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(44, 59, 45, 0);
  transition: background 0.3s ease;
  border-radius: 14px;
}

.gl-main:hover::after,
.gl-thumb:hover::after {
  background: rgba(44, 59, 45, 0.15);
}

/* "+N more" overlay on last thumb */
.gl-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 10, 0.58);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  border-radius: 14px;
  transition: background 0.3s;
}

.gl-thumb:hover .gl-more-overlay {
  background: rgba(10, 16, 10, 0.68);
}

.gl-more-count {
  font-family: 'Lato', serif;
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
}

.gl-more-label {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
}

/* ── LIGHTBOX ── */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 5, 0.96);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lb-overlay.lb-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Close button */
.lb-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 1;
  transition: background 0.2s;
  z-index: 10;
}

.lb-close:hover {
  background: rgba(255, 255, 255, 0.20);
}

/* Counter */
.lb-counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.60);
  z-index: 10;
}

/* Main image container */
.lb-img-wrap {
  position: relative;
  max-width: 88vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 10px;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.lb-img.lb-fade {
  opacity: 0;
}

/* Prev / Next arrows */
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background 0.25s;
  z-index: 10;
}

.lb-arrow:hover {
  background: rgba(184, 150, 90, 0.40);
}

.lb-arrow svg {
  width: 18px;
  height: 18px;
  stroke: white;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.lb-prev {
  left: -70px;
}

.lb-next {
  right: -70px;
}

/* Thumbnail strip at bottom */
.lb-thumbs {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.lb-tn {
  width: 52px;
  height: 38px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: opacity 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.lb-tn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lb-tn.lb-tn-active {
  opacity: 1;
  border-color: var(--gold);
}

.lb-tn:hover {
  opacity: 0.85;
}


/* ─── FLOOR PLANS ─── */
.floorplans-section {
  background: var(--cream);
  padding: 70px 130px 60px;
}

.fp-header {
  text-align: center;
  margin-bottom: 52px;
}

.fp-label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.fp-title {
  font-family: 'Lato', serif;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.12;
  letter-spacing: -0.4px;
  text-align: left;
}

.fp-title em {
  font-style: italic;
}

/* ── outer layout — exact same height both sides ── */
.fp-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  height: 400px;
  /* fixed total height — both panels identical */
}

/* ══ LEFT: single scroll-slider panel ══
     Contains one long column that scrolls to the active item.
     The panel itself clips overflow; items slide up/down smoothly.
  */
.fp-list-panel {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* List track — no sliding, all items always visible */
.fp-list-track {
  display: flex;
  flex-direction: column;
}

/* Each config row — fixed height so we can calc offsets */
.fp-list-item {
  flex: 1;
  /* each tab takes equal share of panel height */
  padding: 20px 28px;
  cursor: pointer;
  border-bottom: 1px solid #F0EDE8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* content centered vertically within equal-height slot */
  position: relative;
  transition: background 0.2s;
  background: #fff;
}

.fp-list-item:last-child {
  border-bottom: none;
}

.fp-list-item:hover {
  background: #FAFAF8;
}

/* Active state */
.fp-list-item.fp-active {
  background: #FAFAF8;
}

.fp-list-item.fp-active .fp-item-name {
  color: var(--gold);
}

.fp-list-item.fp-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.fp-item-name {
  font-family: 'Lato', serif;
  font-size: 20px;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.2;
  transition: color 0.22s;
  margin-bottom: 5px;
}

.fp-item-size {
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  color: #9A9A9A;
}

/* ══ RIGHT: viewer panel — same height as left ══ */
.fp-viewer-panel {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

/* Images area fills all remaining space */
.fp-images {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.fp-img-slot {
  position: relative;
  overflow: hidden;
  border-right: 1px solid #F0EDE8;
}

.fp-img-slot:last-child {
  border-right: none;
}

/* Gold label top-left of each slot */
.fp-img-label {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: 'Lato', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--white);
  z-index: 3;
  transition: opacity 0.25s;
}

/* Blurred floor plan image */
.fp-img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2C3B2D;
  overflow: hidden;
}

.fp-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  filter: blur(7px) brightness(0.55);
  transform: scale(1.08);
  display: block;
  transition: opacity 0.35s ease;
}

/* Lock overlay */
.fp-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.fp-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.28);
  transition: background 0.25s, transform 0.2s;
}

.fp-view-btn:hover {
  background: #c9a35f;
  transform: scale(1.04);
}

.fp-view-btn svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Controls bar — fixed height at bottom */
.fp-controls {
  flex-shrink: 0;
  height: 56px;
  border-top: 1px solid #F0EDE8;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

/* Dot pagination */
.fp-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fp-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #D4CAB8;
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
}

.fp-dot.fp-dot-active {
  width: 22px;
  border-radius: 4px;
  background: var(--gold);
}

/* Arrows */
.fp-arrows {
  display: flex;
  gap: 8px;
}

.fp-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #E0D9CC;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.fp-arrow:hover {
  border-color: var(--gold);
  background: var(--gold);
}

.fp-arrow:hover svg {
  stroke: #fff;
}

.fp-arrow svg {
  width: 13px;
  height: 13px;
  stroke: #7A7A7A;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.2s;
}

/* Footnote */
.fp-footnote {
  flex-shrink: 0;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: #9A9A9A;
  text-align: center;
  padding: 8px 24px 14px;
  background: #fff;
}


/* ─── MASTER PLAN ─── */
.masterplan-section {
  background: #FAFAF8;
  padding: 80px 80px 96px;
}

.mp-header {
  text-align: center;
  margin-bottom: 52px;
}

.mp-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto 14px;
}

.mp-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.mp-title {
  font-family: 'Lato', serif;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin-bottom: 18px;
}

.mp-title em {
  font-style: italic;
  font-weight: 400;
}

.mp-desc {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1.75;
  max-width: 500px;
  margin: 0 auto;
}

.mp-outer-card {
  border: 1px solid #E8E2D8;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.mp-outer-card img {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.mp-zones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.mp-zone {
  background: #F5F4F1;
  border-radius: 12px;
  padding: 26px 20px 24px;
  text-align: center;
  border: none;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease, box-shadow 0.25s ease;
}

.mp-zone.mp-zone-visible {
  opacity: 1;
  transform: translateY(0);
}

.mp-zone:hover {
  background: #F0EDE6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  transform: translateY(-3px);
}

.mp-zone-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-family: 'Lato', serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--gold);
  transition: background 0.3s, color 0.3s;
}

.mp-zone:hover .mp-zone-badge {
  background: var(--gold);
  color: #fff;
}


.mp-zone-name {
  font-family: 'Lato', serif;
  font-size: 17px;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.25;
  margin-bottom: 5px;
}

.mp-zone-sub {
  font-family: 'Lato', sans-serif;
  font-size: 11.5px;
  font-weight: 300;
  color: var(--text-light);
}

/* ─── VIRTUAL TOUR / WALKTHROUGH ─── */
.virtual-section {
  background: var(--cream);
  padding: 70px 80px 70px;
}

/* Centered header */
.vt-header {
  text-align: center;
  margin-bottom: 44px;
}

.vt-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto 14px;
}

.vt-label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.vt-title {
  font-family: 'Lato', serif;
  font-size: clamp(32px, 3.8vw, 54px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.vt-title em {
  font-style: italic;
  font-weight: 400;
}

/* Card — centered, not full-width — matches reference */
.vt-card {
  /* max-width: 980px; */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #DEDAD2;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  position: relative;
  background: #fff;
}

/* Image wrapper */
.vt-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: #1a1a1a;
}

.vt-img-wrap img {
  width: 100%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vt-card:hover .vt-img-wrap img {
  transform: scale(1.03);
}

/* Dark scrim over image — z-index 1, below play btn */
.vt-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 10, 0.20);
  transition: background 0.35s ease;
  z-index: 1;
  pointer-events: none;
}

.vt-card:hover .vt-scrim {
  background: rgba(10, 16, 10, 0.32);
}

/* Play button — z-index 2, above scrim */
.vt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  background: #B8965A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s ease;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.30);
  pointer-events: none;
}

.vt-card:hover .vt-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: #c9a35f;
}

.vt-play svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  margin-left: 4px;
}

/* Grey info panel — 2 equal columns */
.vt-info {
  background: var(--deep-green);
  padding: 32px 44px 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.vt-col-title {
  font-family: 'Lato', serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #B8965A;
  margin-bottom: 10px;
  line-height: 1.3;
}

.vt-col-text {
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--cream);
  line-height: 1.8;
}

/* ── YouTube Modal ── */
.yt-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 5, 0.94);
  z-index: 9998;
  display: none;
  /* hidden until openYT() sets display:flex */
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.yt-modal.yt-open {
  opacity: 1;
  pointer-events: all;
}

.yt-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
  font-family: sans-serif;
  line-height: 1;
}

.yt-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.yt-frame-wrap {
  position: relative;
  width: min(920px, 90vw);
  padding-top: min(518px, calc(90vw * 0.5625));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.yt-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ─── LOCATION ─── */
.location-section {
  background: var(--cream);
  padding: 80px 130px 80px;
}

/* 2-col layout: map left, content right */
.loc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  /* both columns same height */
}

/* ── LEFT: map card ── */
.loc-map-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
  background: #e8e4dc;
  line-height: 0;
  display: flex;
  flex-direction: column;
}

.loc-map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: none;
  display: block;
  filter: saturate(0.85) brightness(0.96);
}

/* Project name badge — top-left of map */
.loc-map-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 9px 14px 9px 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

.loc-badge-leaf {
  width: 22px;
  height: 22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  flex-shrink: 0;
}

.loc-badge-sub {
  font-family: 'Lato', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7A7A7A;
  line-height: 1;
  margin-bottom: 2px;
}

.loc-badge-name {
  font-family: 'Lato', serif;
  font-size: 17px;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1;
  letter-spacing: -0.3px;
}

/* Gradient + address overlay at bottom of map */
.loc-map-overlay {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 9px 14px 9px 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

.loc-map-city {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-light);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.loc-map-city svg {
  width: 12px;
  height: 12px;
  stroke: var(--gold-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.loc-map-addr {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--deep-green);
  line-height: 1.5;
}

/* ── RIGHT: content ── */
.loc-right {
  display: flex;
  flex-direction: column;
}

.loc-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold);
  margin-bottom: 14px;
}

.loc-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
}

.loc-title {
  font-family: 'Lato', serif;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin-bottom: 14px;
}

.loc-title em {
  font-style: italic;
}

.loc-desc {
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: #5A5A5A;
  line-height: 1.78;
  margin-bottom: 28px;
}

/* ── Distance chips grid: 2-col, 4 rows ── */
.loc-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.loc-chip {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s, transform 0.25s;
}

.loc-chip:hover {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Colored icon badge */
.loc-chip-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.loc-chip-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon color variants */
.loc-icon-green {
  background: rgba(72, 160, 120, 0.12);
}

.loc-icon-green svg {
  stroke: #3A9E6A;
}

.loc-icon-blue {
  background: rgba(80, 130, 200, 0.12);
}

.loc-icon-blue svg {
  stroke: #4A80C8;
}

.loc-icon-purple {
  background: rgba(130, 90, 200, 0.12);
}

.loc-icon-purple svg {
  stroke: #8A5AC8;
}

.loc-icon-orange {
  background: rgba(220, 140, 60, 0.12);
}

.loc-icon-orange svg {
  stroke: #D4824A;
}

.loc-icon-red {
  background: rgba(220, 80, 80, 0.12);
}

.loc-icon-red svg {
  stroke: #D45050;
}

.loc-chip-info {
  flex: 1;
  min-width: 0;
}

.loc-chip-name {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc-chip-dist {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Upcoming infrastructure card ── */
.loc-infra {
  border: 1px solid #ECEAE4;
  border-radius: 12px;
  padding: 18px 20px;
  background: #ffffff;
}

.loc-infra-title {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.loc-infra-title svg {
  width: 12px;
  height: 12px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.loc-infra-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.loc-infra-tag {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--gold);
  padding: 5px 14px;
  border-radius: 50px;
  border: 1px solid rgba(184, 150, 90, 0.35);
  background: rgba(184, 150, 90, 0.06);
  transition: background 0.2s, border-color 0.2s;
}

.loc-infra-tag:hover {
  background: rgba(184, 150, 90, 0.14);
  border-color: rgba(184, 150, 90, 0.55);
}

/* ─── TESTIMONIALS ─── */
.testimonials-section {
  background: var(--cream);
  padding: 50px 130px 60px;
}

/* Left-aligned header */
.tm-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}

.tm-title {
  font-family: 'Lato', serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 48px;
}

.tm-title em {
  font-style: italic;
  color: #1A1A1A;
}

/* Slider viewport */
.tm-slider-wrap {
  position: relative;
  max-width: 100%;
  margin: 0 auto 0 0;
  padding: 0 120px 0 160px;
  /* left-aligned from reference */
}

/* Single card */
.tm-card {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 14px;
  padding: 20px 48px 36px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

/* Large faint quote mark top-left */
.tm-quote-mark {
  font-family: 'Lato', serif;
  font-size: 80px;
  font-weight: 400;
  color: rgba(184, 150, 90, 0.18);
  line-height: 0.8;
  display: block;
  user-select: none;
}

/* Quote text — italic serif */
.tm-text {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: #3A3A3A;
  line-height: 1.75;
  margin-bottom: 28px;
  flex: 1;
}

/* Author block */
.tm-author-name {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 4px;
}

.tm-author-role {
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  color: #7A7A7A;
  margin-bottom: 12px;
}

/* Gold stars */
.tm-stars {
  display: flex;
  gap: 3px;
}

.tm-stars span {
  color: #B8965A;
  font-size: 14px;
  line-height: 1;
}

/* Gold progress bar at bottom of card */
.tm-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--gold);
  border-radius: 0 2px 0 0;
  transition: width 0s linear;
}

.tm-progress.tm-animating {
  transition: width 4s linear;
}

/* Slide transition wrapper */
.tm-slide-inner {
  overflow: hidden;
  border-radius: 14px;
}

/* Controls row: dots left, arrows right */
.tm-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  max-width: 100%;
  padding: 0 120px 0 160px;
}

/* Dot pagination */
.tm-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tm-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #D4CAB8;
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
  border: none;
  padding: 0;
}

.tm-dot.tm-dot-active {
  width: 24px;
  border-radius: 4px;
  background: var(--gold);
}

/* Circular arrow buttons */
.tm-arrows {
  display: flex;
  gap: 10px;
}

.tm-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #E0D9CC;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.tm-arrow:hover {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.05);
}

.tm-arrow:hover svg {
  stroke: #fff;
}

.tm-arrow svg {
  width: 15px;
  height: 15px;
  stroke: #7A7A7A;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.25s;
}

/* ─── FAQ ─── */
.faq-section {
  background: var(--cream);
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 40px;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Lato', serif;
  font-size: 18px;
  color: var(--deep-green);
  cursor: pointer;
  gap: 20px;
  transition: color 0.3s;
}

.faq-question:hover {
  color: var(--gold);
}

.faq-icon {
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

.faq-icon.open {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.9;
}

.faq-answer.open {
  max-height: 400px;
  padding-bottom: 20px;
}

/* ─── LEGACY AWAITS (FOOTER CTA) ─── */
.footer-cta {
  background: var(--cream);
  padding: 80px 80px 96px;
}

/* 2-col layout — left info + right form card */
.fc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: end;
}

/* ── LEFT ── */
.fc-label {
  font-family: 'Lato', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}

.fc-title {
  font-family: 'Lato', serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.fc-title em {
  font-style: italic;
  color: #1A1A1A;
}

.fc-desc {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #5A5A5A;
  line-height: 1.8;
  margin-bottom: 36px;
}

/* Contact info rows */
.fc-contacts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fc-contact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fc-contact-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(184, 150, 90, 0.10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.fc-contact-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fc-contact-label {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 4px;
  display: block;
}

.fc-contact-val {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #5A5A5A;
  line-height: 1.55;
}

/* ── RIGHT: white form card ── */
.fc-form-card {
  background: #ffffff;
  border: 1px solid #ECEAE4;
  border-radius: 14px;
  padding: 32px 32px 28px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

/* Input / select base */
.fc-input,
.fc-select {
  width: 100%;
  background: #ffffff;
  border: 1px solid #E8E2D8;
  border-radius: 8px;
  padding: 15px 18px;
  font-family: 'Lato', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: #1A1A1A;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  margin-bottom: 12px;
  display: block;
  -webkit-appearance: none;
  appearance: none;
}

.fc-input::placeholder {
  color: #AEAAA4;
}

.fc-input:focus,
.fc-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.10);
}

/* Select wrapper for custom chevron */
.fc-select-wrap {
  position: relative;
  margin-bottom: 12px;
}

.fc-select-wrap .fc-select {
  margin-bottom: 0;
  cursor: pointer;
}

.fc-select-wrap::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-right: 1.5px solid #AEAAA4;
  border-bottom: 1.5px solid #AEAAA4;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.fc-select {
  color: #AEAAA4;
}

.fc-select:valid {
  color: #1A1A1A;
}

.fc-select option {
  color: #1A1A1A;
}

/* CTA button */
.fc-submit {
  width: 100%;
  background: var(--gold);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.25s, transform 0.2s;
  margin-top: 4px;
  letter-spacing: 0.2px;
}

.fc-submit:hover {
  background: #c9a35f;
  transform: translateY(-1px);
}

.fc-submit svg {
  width: 16px;
  height: 16px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Disclaimer */
.fc-disclaimer {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #AEAAA4;
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}


/* ─── FOOTER ─── */
footer {
  background: #1A2B1B;
  padding: 16px 80px 0;
}

/* Centered logo block */
.ft-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 16px;
}

.ft-logo-img {
  height: 25px;
  width: auto;
  display: block;
  filter: none;
  opacity: 1;
  margin-bottom: 5px;
}

.ft-logo-img1 {
  height: 70px;
  width: auto;
  display: block;
  filter: none;
  opacity: 1;
  margin-bottom: 5px;
}

.ft-logo-text {
  font-family: 'Lato', serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #FAF6ED;
  line-height: 1;
  margin-bottom: 3px;
}

.ft-logo-by {
  font-family: 'Lato', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
}

/* 4 RERA columns */
.ft-rera-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ft-rera-col {
  padding: 0 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}

.ft-rera-col:first-child {
  padding-left: 0;
}

.ft-rera-col:last-child {
  padding-right: 0;
  border-right: none;
}

.ft-rera-phase {
  font-family: 'Lato', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
  display: block;
}

.ft-rera-label {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.65;
  word-break: break-all;
}

/* ── Bottom bar — dark strip matching reference ── */
.ft-bar {
  background: #0C1209;
  margin: 0 -80px;
  padding: 8px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}

/* Left: copyright */
.ft-bar-copy {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
}

.ft-bar-copy a {
  color: rgb(255, 255, 255);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color 0.25s;
}

.ft-bar-copy a:hover {
  color: var(--gold-light);
}

/* Center: SUMADHURA logo */
.ft-bar-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ft-bar-name {
  font-family: 'Lato', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.ft-bar-tagline {
  font-family: 'Lato', sans-serif;
  font-size: 7.5px;
  font-weight: 400;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(184, 150, 90, 0.65);
  border-top: 1px solid rgba(184, 150, 90, 0.30);
  padding-top: 4px;
  width: 100%;
  text-align: center;
}

/* Right: links */
.ft-bar-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #6d766e;
}

.ft-bar-links a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}

.ft-bar-links a:hover {
  color: var(--gold-light);
}

.ft-bar-links .ft-sep {
  color: rgba(255, 255, 255, 0.18);
  font-size: 12px;
}

/* ─── LOGO WATERMARK ─── */
.logo-watermark {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.06;
  pointer-events: none;
}

.logo-watermark svg {
  width: 200px;
  height: 200px;
}

/* ─── STAT CLASSES for other sections ─── */
.stat-num {
  font-family: 'Lato', serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--deep-green);
  line-height: 1;
}

.stat-unit {
  font-size: 14px;
  color: var(--gold);
}

.stat-label {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-light);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

/* ═══════════════════════════════════════════════════
     RESPONSIVE — covers 320px → 1920px
     Breakpoints:
       1280px  — laptop/small monitor (explicit target)
       1024px  — small laptop / large tablet
        900px  — tablet landscape
        768px  — tablet portrait
        480px  — large phone
        360px  — small phone
  ═══════════════════════════════════════════════════ */

/* ── 1280px: laptop / small monitor ── */
@media (max-width: 1280px) {

  /* Nav */
  nav {
    padding: 0 32px;
  }

  .nav-links {
    gap: 24px;
  }

  .nav-links li a {
    font-size: 12.5px;
  }

  /* Hero */
  .hero-content {
    padding: 0 40px 40px;
  }

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(30px, 2vw, 48px);
  }

  /* Nature */
  .nature-s {
    padding: 72px 80px;
  }

  .nimgs {
    height: 420px;
  }

  /* Legacy */
  .legacy-section {
    padding: 40px 80px 80px;
  }

  /* Club */
  .club-section {
    padding: 40px 80px 60px;
  }

  /* CTA */
  .cta-banner {
    padding: 60px 80px;
  }

  .cta-price-card {
    width: 340px;
  }

  /* Details */
  .details-section {
    padding: 60px 80px 80px;
  }

  /* Amenities */
  .amenities-section {
    padding: 60px 80px;
  }

  .am-layout {
    grid-template-columns: 340px 1fr;
    gap: 28px;
  }

  /* Gallery */
  .glimpse-section {
    padding: 60px 80px;
  }

  /* Floor Plans */
  .floorplans-section {
    padding: 60px 80px 60px;
  }

  /* Virtual */
  .virtual-section {
    padding: 60px 60px 60px;
  }

  /* Location */
  .location-section {
    padding: 60px 80px 60px;
  }

  /* Testimonials */
  .testimonials-section {
    padding: 60px 80px 60px;
  }

  .tm-slider-wrap {
    padding: 0 60px;
  }

  .tm-controls {
    padding: 0 60px;
  }

  /* FAQ */
  .faq-section {
    padding: 60px 40px;
  }

  /* Contact */
  .footer-cta {
    padding: 60px 80px 80px;
  }

  .fc-layout {
    gap: 48px;
  }

  /* Footer */
  footer {
    padding: 40px 60px 0;
  }

  .ft-bar {
    margin: 0 -60px;
    padding: 12px 60px;
  }
}

/* ── 1024px: small laptop / large tablet landscape ── */
@media (max-width: 1024px) {
  nav {
    padding: 0 24px;
    height: 78px;
  }

  .nav-links {
    gap: 18px;
  }

  .nav-links li a {
    font-size: 12px;
  }

  .nav-cta-pill {
    padding: 9px 20px;
    font-size: 12.5px;
  }

  .hero-content {
    padding: 0 32px 36px;
    max-width: 640px;
  }

  .nature-s {
    padding: 60px 48px;
  }

  .nature-i {
    gap: 48px;
  }

  .nimgs {
    height: 380px;
  }

  .legacy-section {
    padding: 40px 48px 72px;
  }

  .club-section {
    padding: 40px 48px 56px;
  }

  .cta-banner {
    padding: 56px 48px;
    gap: 40px;
  }

  .cta-price-card {
    width: 300px;
    padding: 28px 24px;
  }

  .details-section {
    padding: 56px 48px 72px;
  }

  .amenities-section {
    padding: 56px 48px;
  }

  .am-layout {
    grid-template-columns: 280px 1fr;
    gap: 24px;
  }

  .am-img-card {
    height: 320px;
  }

  .glimpse-section {
    padding: 56px 48px;
  }

  .gl-grid {
    height: 360px;
  }

  .floorplans-section {
    padding: 56px 48px;
  }

  .fp-layout {
    grid-template-columns: 240px 1fr;
  }

  .virtual-section {
    padding: 56px 48px;
  }

  .location-section {
    padding: 56px 48px;
  }

  .loc-layout {
    gap: 36px;
  }

  .testimonials-section {
    padding: 56px 48px;
  }

  .tm-slider-wrap {
    padding: 0;
  }

  .tm-controls {
    padding: 0;
  }

  .footer-cta {
    padding: 56px 48px 72px;
  }

  .fc-layout {
    gap: 36px;
  }

  footer {
    padding: 36px 48px 0;
  }

  .ft-bar {
    margin: 0 -48px;
    padding: 12px 48px;
  }

  .ft-rera-grid {
    gap: 0;
  }

  .ft-rera-col {
    padding: 0 16px;
  }
}

/* ── 900px: tablet landscape / large tablet portrait ── */
@media (max-width: 900px) {

  /* Nav — hide links, keep logo + CTA */
  .nav-links {
    display: none;
  }

  nav {
    padding: 0 20px;
    height: 60px;
  }

  .nav-logo img {
    height: 51px;
  }

  /* Hero */
  .hero-content {
    padding: 0 24px 32px;
    max-width: 100%;
  }

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(38px, 7vw, 60px);
  }

  .hero-desc {
    font-size: 13.5px;
  }

  .hero-stats {
    gap: 8px;
  }

  .hero-stat-chip {
    padding: 10px 14px;
    min-width: 120px;
  }

  /* Nature */
  .nature-s {
    padding: 56px 28px;
  }

  .nature-i {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .nimgs {
    height: 340px;
  }

  /* Legacy */
  .legacy-section {
    padding: 36px 28px 60px;
  }

  .legacy-row1,
  .legacy-row2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Club */
  .club-section {
    padding: 36px 28px 52px;
  }

  .club-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }

  /* CTA */
  .cta-banner {
    flex-direction: column;
    padding: 48px 28px;
    gap: 28px;
  }

  .cta-price-card {
    width: 100%;
    padding: 28px 24px;
  }

  /* Details */
  .details-section {
    padding: 52px 28px 64px;
  }

  .details-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Amenities */
  .amenities-section {
    padding: 52px 28px;
  }

  .am-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .am-img-card {
    height: 280px;
  }

  /* Gallery */
  .glimpse-section {
    padding: 52px 28px;
  }

  .gl-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 10px;
  }

  .gl-main {
    height: 260px;
  }

  .gl-sub {
    grid-template-rows: 1fr 1fr;
    height: 280px;
  }

  /* Floor plans */
  .floorplans-section {
    padding: 52px 28px;
  }

  .fp-layout {
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }

  .fp-list-panel {
    height: auto;
  }

  .fp-list-track {
    flex-direction: row;
    overflow-x: auto;
  }

  .fp-list-item {
    flex: 0 0 auto;
    width: 160px;
    height: 80px;
    border-bottom: none;
    border-right: 1px solid #F0EDE8;
    padding: 14px 18px;
  }

  .fp-list-item:last-child {
    border-right: none;
    width: 100%;
  }

  .fp-list-item.fp-active::before {
    left: 0;
    top: auto;
    bottom: 0;
    right: 0;
    width: auto;
    height: 3px;
    border-radius: 2px 2px 0 0;
  }

  .fp-viewer-panel {
    height: 360px;
  }

  .fp-item-name {
    font-size: 16px;
  }

  /* Virtual */
  .virtual-section {
    padding: 52px 28px;
  }

  .vt-card {
    max-width: 100%;
  }

  .vt-info {
    padding: 24px 28px;
    gap: 24px;
  }

  /* Location */
  .location-section {
    padding: 52px 28px;
  }

  .loc-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .loc-map-card {
    height: 320px;
  }

  .loc-map-card iframe {
    min-height: 320px;
  }

  /* Testimonials */
  .testimonials-section {
    padding: 52px 28px;
  }

  .tm-slider-wrap {
    padding: 0;
    max-width: 100%;
  }

  .tm-controls {
    padding: 0;
  }

  /* FAQ */
  .faq-section {
    padding: 52px 24px;
  }

  /* Contact */
  .footer-cta {
    padding: 52px 28px 72px;
  }

  .fc-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Footer */
  footer {
    padding: 36px 28px 0;
  }

  .ft-logo-wrap {
    padding-bottom: 11px;
    margin-bottom: 18px;
  }

  .ft-rera-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
    padding-bottom: 28px;
  }

  .ft-rera-col {
    padding: 0 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 20px;
  }

  .ft-rera-col:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
  }

  .ft-rera-col:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .ft-bar {
    margin: 0 -28px;
    padding: 12px 28px;
    grid-template-columns: 1fr 1fr;
  }

  .ft-bar-brand {
    display: none;
  }

  .ft-bar-links {
    justify-content: flex-end;
  }

}

/* ── 768px: tablet portrait ── */
@media (max-width: 768px) {

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(34px, 8vw, 54px);
  }

  .club-grid {
    grid-template-columns: 1fr 1fr;
  }

  .am-tabs {
    gap: 6px;
  }

  .am-tab {
    padding: 7px 14px;
    font-size: 12px;
  }

  .am-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .loc-chips {
    grid-template-columns: 1fr;
  }

  .tm-card {
    padding: 18px 28px 28px;
  }

  .tm-text {
    font-size: 15px;
  }

  .fc-form-card {
    padding: 24px 20px;
  }

  .vt-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }


  .mp-zones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .hero-location {
    font-size: 16.5px;
    margin-bottom: 50px;
  }

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(30px, 9vw, 46px);
    margin-bottom: 20px;
  }

  .hero-content {
    padding: unset;
    margin-bottom: 100px;
  }

  .hero-explore {
    left: 43%;
  }
}

/* ── 480px: large phone ── */
@media (max-width: 480px) {
  nav {
    padding: 0 16px;
    height: 56px;
  }

  .nav-logo img {
    height: 51px;
  }

  .nav-cta-pill {
    padding: 8px 16px;
    font-size: 12px;
  }

  .hero-content {
    padding: 0 16px 28px;
  }

  .hero-title-line1,
  .hero-title-line2 {
    font-size: clamp(30px, 9vw, 46px);
  }

  .hero-desc {
    font-size: 13px;
    max-width: 100%;
  }

  .hero-stats {
    flex-direction: column;
    gap: 8px;
  }

  .hero-stat-chip {
    min-width: 0;
    width: 100%;
  }

  .nature-s {
    padding: 44px 16px;
  }

  .nimgs {
    height: 280px;
  }

  .nature-title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .nstats {
    grid-template-columns: repeat(2, 1fr);
  }

  .legacy-section {
    padding: 32px 16px 48px;
  }

  .legacy-title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .club-section {
    padding: 32px 16px 44px;
  }

  .club-grid {
    grid-template-columns: 1fr;
  }

  .ca-fig {
    height: 220px;
  }

  .cta-banner {
    padding: 40px 16px;
  }

  .cta-title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .cta-pills {
    flex-direction: column;
    gap: 10px;
  }

  .details-section {
    padding: 40px 16px 52px;
  }

  .details-title {
    font-size: clamp(28px, 7vw, 40px);
  }

  .amenities-section {
    padding: 40px 16px;
  }

  .am-title {
    font-size: clamp(28px, 7vw, 40px);
  }

  /*.am-grid { grid-template-columns: 1fr; }*/

  .glimpse-section {
    padding: 40px 16px;
  }

  .gl-main {
    height: 220px;
  }

  .gl-sub {
    height: 220px;
  }

  .floorplans-section {
    padding: 40px 16px;
  }

  .fp-title {
    font-size: clamp(24px, 6vw, 36px);
  }

  .fp-viewer-panel {
    height: 300px;
  }

  .virtual-section {
    padding: 40px 16px;
  }

  .vt-title {
    font-size: clamp(26px, 7vw, 40px);
  }

  .location-section {
    padding: 40px 16px;
  }

  .loc-title {
    font-size: clamp(26px, 7vw, 38px);
  }

  .loc-map-card {
    height: 260px;
  }

  .loc-map-card iframe {
    min-height: 260px;
  }

  .loc-infra-tags {
    gap: 6px;
  }

  .loc-infra-tag {
    font-size: 11px;
    padding: 4px 10px;
  }

  .testimonials-section {
    padding: 40px 16px;
  }

  .tm-title {
    font-size: clamp(28px, 7vw, 42px);
    margin-bottom: 28px;
  }

  .tm-card {
    padding: 16px 20px 24px;
    min-height: 220px;
  }

  .tm-quote-mark {
    font-size: 60px;
  }

  .tm-text {
    font-size: 14px;
  }

  .tm-controls {
    margin-top: 14px;
  }

  .faq-section {
    padding: 40px 16px;
  }

  .footer-cta {
    padding: 40px 16px 60px;
  }

  .fc-title {
    font-size: clamp(28px, 7vw, 44px);
  }

  footer {
    padding: 28px 16px 0;
  }

  .ft-logo-img {
    height: 40px;
  }

  /*.ft-rera-grid { grid-template-columns: 1fr; }*/
  .ft-rera-col {
    border-right: none !important;
  }

  .ft-rera-col:nth-last-child(-n+1) {
    border-bottom: none;
  }

  .ft-bar {
    margin: 0 -16px;
    padding: 10px 16px;
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: center;
  }

  .ft-bar-links {
    justify-content: center;
  }

  .ft-bar-copy {
    text-align: center;
  }

  .lb-prev {
    left: -44px;
  }

  .lb-next {
    right: -44px;
  }

  .lb-thumbs {
    gap: 5px;
  }

  .lb-tn {
    width: 40px;
    height: 28px;
  }
}

/* ── 360px: small phone ── */
@media (max-width: 360px) {

  .hero-title-line1,
  .hero-title-line2 {
    font-size: 28px;
  }

  .nav-cta-pill {
    padding: 7px 12px;
    font-size: 11px;
  }

  .am-tabs {
    flex-wrap: wrap;
  }

  .am-tab {
    font-size: 11px;
    padding: 6px 12px;
  }

  .fp-list-item {
    width: 130px;
  }

  .tm-text {
    font-size: 13.5px;
  }

  .lb-prev {
    left: -36px;
  }

  .lb-next {
    right: -36px;
  }
}



/* Touch-friendly tap targets */
@media (max-width: 768px) {

  .am-tab,
  .fp-arrow,
  .tm-arrow,
  .lb-arrow,
  .fp-dot,
  .tm-dot,
  .loc-infra-tag {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .fp-dot,
  .tm-dot {
    min-width: 0;
    min-height: 0;
  }

  .nav-cta-pill {
    min-height: 44px;
  }

  .fc-submit,
  .fp-view-btn,
  .vt-play {
    min-height: 48px;
  }

  /* Prevent text zoom on input focus in iOS */
  .fc-input,
  .fc-select {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════
     STICKY ENQUIRE BUTTON + SLIDE-IN FORM
  ══════════════════════════════════════ */

/* ── Sticky "Enquire Now" tab — right side ── */
.sticky-enquire {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.sticky-enquire.visible {
  opacity: 1;
  pointer-events: all;
}

.sticky-enquire-btn {
  display: flex;
  align-items: center;
  background: var(--gold);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 0 8px 8px 0;
  box-shadow: -3px 0 20px rgba(0, 0, 0, 0.18);
  transition: background 0.25s, box-shadow 0.25s;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 22px 13px;
  line-height: 1;
  gap: 10px;
}

.sticky-enquire-btn:hover {
  background: #c9a35f;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.22);
}

.sticky-enquire-btn svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(180deg);
  flex-shrink: 0;
}

/* ── Mobile sticky buttons — stacked vertically on RIGHT side ── */
.sticky-call-mobile {
  display: none;
  position: fixed;
  right: 0;
  top: 54%;
  transform: translateY(calc(-50% + 36px));
  /* offset below the enquire btn */
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.sticky-call-mobile.visible {
  opacity: 1;
  pointer-events: all;
}

.sticky-call-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px 0 0 8px;
  background: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: -3px 0 16px rgba(0, 0, 0, 0.20);
  transition: background 0.25s;
  text-decoration: none;
}

.sticky-call-btn:hover {
  background: #3a5240;
}

.sticky-call-btn svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Mobile sticky enquire button — right side, above call ── */
.sticky-enquire-mobile {
  display: none;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% - 36px));
  /* offset above the call btn */
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.sticky-enquire-mobile.visible {
  opacity: 1;
  pointer-events: all;
}

.sticky-enquire-mobile-btn {
  background: var(--gold);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 18px 12px;
  border-radius: 0 8px 8px 0;
  border: none;
  cursor: pointer;
  box-shadow: -3px 0 16px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.25s;
  white-space: nowrap;
  line-height: 1;
}

.sticky-enquire-mobile-btn:hover {
  background: #c9a35f;
}

.sticky-enquire-mobile-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(180deg);
  flex-shrink: 0;
}

/* Dark overlay */
.enquire-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 10, 0.60);
  z-index: 9990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  /* Center the modal via flex so backdrop click works cleanly */
  display: flex;
  align-items: center;
  justify-content: center;
}

.enquire-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Modal card — centered popup */
.enquire-drawer {
  position: relative;
  /* sits inside the flex overlay */
  width: 500px;
  max-width: 94vw;
  max-height: 90vh;
  background: #fff;
  z-index: 9991;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.28), 0 6px 24px rgba(0, 0, 0, 0.12);
  /* Entrance animation */
  opacity: 0;
  transform: scale(0.95) translateY(16px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  /* Block click-through to overlay */
  pointer-events: none;
}

.enquire-overlay.open .enquire-drawer {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

/* Drawer header */
.ed-header {
  padding: 28px 28px 22px;
  border-bottom: 1px solid #F0EDE8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--cream);
}

.ed-header-text {}

.ed-label {
  font-family: 'Lato', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
  display: block;
}

.ed-title {
  font-family: 'Lato', serif;
  font-size: 26px;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.15;
}

.ed-title em {
  font-style: italic;
}

/* Close button */
.ed-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.2s;
}

.ed-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

.ed-close svg {
  width: 16px;
  height: 16px;
  stroke: #3A3A3A;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Drawer body — scrollable */
.ed-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 20px;
}

/* Form fields */
.ed-input,
.ed-select {
  width: 100%;
  background: #fff;
  border: 1px solid #E8E2D8;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #1A1A1A;
  outline: none;
  margin-bottom: 12px;
  display: block;
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.ed-input::placeholder {
  color: #AEAAA4;
}

.ed-input:focus,
.ed-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 150, 90, 0.10);
}

/* Mobile iOS fix */
.ed-input {
  font-size: 16px;
}

.ed-select-wrap {
  position: relative;
  margin-bottom: 12px;
}

.ed-select-wrap .ed-select {
  margin-bottom: 0;
  cursor: pointer;
  color: #AEAAA4;
}

.ed-select-wrap .ed-select.has-value {
  color: #1A1A1A;
}

.ed-select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 48%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #AEAAA4;
  border-bottom: 1.5px solid #AEAAA4;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.ed-select option {
  color: #1A1A1A;
}

/* Submit button */
.ed-submit {
  width: 100%;
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 15px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background 0.25s, transform 0.2s;
  margin-top: 4px;
  letter-spacing: 0.2px;
}

.ed-submit:hover {
  background: #c9a35f;
  transform: translateY(-1px);
}

.ed-submit svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.ed-disclaimer {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 300;
  color: #AEAAA4;
  text-align: center;
  margin-top: 3px;
  line-height: 1.5;
}

/* Contact strip at bottom of drawer */
.ed-footer {
  flex-shrink: 0;
  padding: 16px 28px 20px;
  border-top: 1px solid #F0EDE8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FAFAF8;
}

.ed-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  color: #5A5A5A;
  text-decoration: none;
  transition: color 0.2s;
}

.ed-contact-row:hover {
  color: var(--gold);
}

.ed-contact-row svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  flex-shrink: 0;
}

/* ── Show call button only on mobile ── */
@media (max-width: 768px) {

  /* Hide desktop vertical tab */
  .sticky-enquire {
    display: none;
  }

  /* Show mobile right-side buttons */
  .sticky-call-mobile {
    display: block;
  }

  .sticky-enquire-mobile {
    display: block;
  }

  /* Drawer slides up from bottom on mobile */
  .enquire-drawer {
    width: 96vw;
    border-radius: 16px;
    max-height: 88vh;
  }

  .ed-body {
    padding: 20px 20px 16px;
  }

  .ed-header {
    padding: 22px 20px 18px;
  }

  .ed-footer {
    padding: 14px 20px 20px;
  }
}

/* ─── HAMBURGER + MOBILE MENU ─── */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background: rgba(255, 255, 255, 0.10);
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.90);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}

/* Animate to X when open */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 5, 0.60);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  visibility: hidden;
}

.mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

/* Mobile menu drawer — slides in from right */
.mobile-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: #1A2B1B;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -6px 0 40px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  visibility: hidden;
  /* hide from accessibility until open */
}

.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
}

/* Header inside drawer */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.mobile-menu-logo {
  height: 30px;
  width: auto;
  display: block;
}

.mobile-menu-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.mobile-menu-close svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, 0.85);
}

/* Nav links inside drawer */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  padding: 40px 0;
  flex: 1;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.80);
  text-decoration: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}

.mobile-menu-links a:last-child {
  border-bottom: none;
}

.mobile-menu-links a:hover {
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.04);
  padding-left: 30px;
}

/* CTA button at bottom of drawer */
.mobile-menu-cta {
  display: block;
  margin: 20px 22px 28px;
  padding: 15px 24px;
  background: var(--gold);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  letter-spacing: 0.3px;
  transition: background 0.25s;
  flex-shrink: 0;
}

.mobile-menu-cta:hover {
  background: #c9a35f;
}

/* Show hamburger, hide CTA pill on mobile */
@media (max-width: 900px) {
  .nav-cta-pill {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .mobile-menu-overlay,
  .mobile-menu {
    display: flex;
  }
}

/* ─── Details card enquire button ─── */
.dc-enquire-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  background: var(--gold);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 11px 22px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s;
}

.dc-enquire-btn:hover {
  background: #c9a35f;
  transform: translateY(-1px);
}

.dc-enquire-btn svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ─── FORM VALIDATION ─── */
.ed-field-wrap,
.fc-field-wrap {
  position: relative;
  margin-bottom: 0;
}

/* Remove bottom margin from inputs when wrapped — wrap handles spacing */
.ed-field-wrap .ed-input,
.fc-field-wrap .fc-input {
  margin-bottom: 0px;
}

/* Error message */
.field-err {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #E03535 !important;
  line-height: 1.4;
  min-height: 16px;
  margin-bottom: 8px;
  padding-left: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.field-err.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Input error state */
.ed-input.input-error,
.fc-input.input-error {
  border-color: #E03535 !important;
  box-shadow: 0 0 0 3px rgba(224, 53, 53, 0.10) !important;
}

/* Input success state */
.ed-input.input-ok,
.fc-input.input-ok {
  border-color: #4CAF7A;
  box-shadow: 0 0 0 3px rgba(76, 175, 122, 0.08);
}

/* Success icon inside input (via background) */
.ed-input.input-ok,
.fc-input.input-ok {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CAF7A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

/* Submit button disabled state */
.ed-submit:disabled,
.fc-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

/* Shake animation on failed submit */
@keyframes formShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(6px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

.form-shake {
  animation: formShake 0.38s ease;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.server-err {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #E03535 !important;
  text-align: center;
  margin-top: 10px;
  min-height: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.server-err.visible {
  opacity: 1;
}

.dc-enquire-btn1 {
  display: flex;
  /* block-level flex — responds to margin: auto */
  width: fit-content;
  /* shrinks to button width, so margin: auto works */
  margin: 30px auto 0;
  /* centers it regardless of parent layout */
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--gold);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 11px 22px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s;
}

.dc-enquire-btn1:hover {
  background: #c9a35f;
  transform: translateY(-1px);
}

.ticker-dot1 {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C2AA8C;
  margin-right: 4px;
  flex-shrink: 0;
}

/* ─── VIRTUAL TOUR — local video ─── */
.vt-card {
  border-radius: 16px;
  overflow: hidden;
}

.vt-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* maintains widescreen ratio */
  background: #000;
}

.vt-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Style the native controls bar to match your theme */
.vt-video::-webkit-media-controls-panel {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

/* ─── VT video autoplay ─── */
.vt-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.vt-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Unmute button */
.vt-unmute-btn {
  position: absolute;
  bottom: 48px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  padding: 7px 14px;
  border-radius: 50px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s;
  z-index: 3;
}

.vt-unmute-btn:hover {
  background: rgba(0, 0, 0, 0.75);
}

.vt-unmute-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Progress bar */
.vt-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 3;
}

.vt-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold, #B8965A);
  transition: width 0.25s linear;
}

/* Whatsapp */

.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  left: 35px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

.my-float {
  margin-top: 16px;
}

@media only screen and (max-width: 600px) {
  .float {
    bottom: 20px;
    left: 20px;
  }
}

/*End Whatsapp*/

@media (max-width: 900px) {
  .cta-banner {
    flex-direction: column;
    padding: 48px 28px;
    gap: 28px;
  }

  .cta-price-card {
    width: 100%;
    padding: 28px 24px;
  }

  /* Swap order on mobile: price card first, text second */
  .cta-price-card {
    order: -1;
  }

  .cta-banner-left {
    order: 2;
  }
}

@media (max-width: 900px) {
  .am-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .am-img-card {
    display: none;
  }
}

@media (max-width: 900px) {
  .ms {
    padding: 20px 0 18px;
    border-top: 1px solid var(--border);
    padding-right: 12px;
  }

}

/* ==============================
   AMENITIES
================================ */



.am-container {
  width: min(1280px, 90%);
  margin: 0 auto;
}

.am-header {
  max-width: 700px;
  margin: 0 auto 55px;
  text-align: center;
}

.am-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #9a7a45;
}

.am-header h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  color: #171717;
}

.am-header h2 em {
  font-style: italic;
}

.am-header p {
  margin: 18px auto 0;
  max-width: 500px;
  color: #777;
  font-size: 15px;
  line-height: 1.7;
}


/* GRID */

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 28px 20px;
}


/* CARD */

.amenity-card {
  text-align: center;
  cursor: pointer;
}

.amenity-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #e9e5dd;
  position: relative;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.amenity-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.amenity-card:hover .amenity-image {
  border-color: #9a7a45;
}

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

/* NAME */

.amenity-card h3 {
  margin: 15px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #252525;
}


/* BOTTOM */

.amenities-more {
  margin-top: 55px;
  text-align: center;
}

.amenities-more span {
  display: inline-block;
  padding: 13px 25px;
  border: 1px solid #d5cec1;
  border-radius: 50px;
  color: #777;
  font-size: 12px;
  letter-spacing: 0.5px;
}


/* TABLET */

@media (max-width: 1100px) {
  .amenities-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* MOBILE */

@media (max-width: 650px) {
  .amenities-section {
    padding: 75px 0;
  }

  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
  }

  .amenity-card h3 {
    font-size: 13px;
  }

  .amenities-more {
    margin-top: 40px;
  }
}

.iti {
  width: 100%;
}