:root{
  --cocoa-dark:#5c3823;
  --cocoa-brown:#7a4a2c;
  --cocoa-gold:#c9963f;
  --cocoa-gold-light:#e8c98a;
  --cream:#faf6ee;
  --cream-deep:#f1e8d6;
  --forest:#3c5c46;
  --forest-light:#4d7358;
  --ink:#332619;
  --muted:#000;
  --line:#e3d5b8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  font-weight:300;
}
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--cocoa-dark);
}
img{max-width:100%; display:block;}
.wrap{max-width:1400px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.47s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.54s;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#fdf9f0;
  padding:120px 0 80px;
}
/* ---- Banner carousel: stacked full-bleed slides, cross-faded by
   script.js toggling the .active class. To add more images, add another
   .hero-slide div in the HTML — no JS/CSS changes needed. ---- */
.hero-slides{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.4s ease;
  animation:heroZoom 18s ease-in-out infinite alternate;
}
.hero-slide.active{ opacity:1; z-index:1; }
@keyframes heroZoom{
  from{transform:scale(1);}
  to{transform:scale(1.08);}
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg, rgba(74,48,30,.78) 0%, rgba(74,48,30,.5) 42%, rgba(74,48,30,.12) 68%);
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:60px;
  align-items:center;
  width:100%;
}
.hero-brandmark{
  font-family:'Poppins', sans-serif;
  letter-spacing:6px;
  font-size:13px;
  font-weight:500;
  color:var(--cocoa-gold-light);
  text-transform:uppercase;
  margin-bottom:28px;
  opacity:0;
  animation:fadeUp .8s ease .1s forwards;
}
.hero h1{
  font-size:clamp(38px,5vw,62px);
  line-height:1.15;
  color:#fdf9f0;
  font-weight:600;
  opacity:0;
  animation:fadeUp .8s ease .25s forwards;
}
.hero h1 em{
  font-style:normal;
  color:var(--cocoa-gold-light);
}
.hero .location{
  margin-top:26px;
  font-family:'Poppins',sans-serif;
  letter-spacing:2px;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  color:var(--cocoa-gold-light);
  opacity:0;
  animation:fadeUp .8s ease .4s forwards;
}
.hero .location span{color:#e9e2d2; letter-spacing:1px; text-transform:none; font-size:14px; font-weight:300;}
.hero-divider{width:64px; height:1px; background:var(--cocoa-gold); margin:22px 0;}
.hero p.tag{
  font-size:16px;
  color:#e9e2d2;
  max-width:440px;
  font-weight:300;
  opacity:0;
  animation:fadeUp .8s ease .5s forwards;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border:1px solid var(--cocoa-gold);
  color:var(--cocoa-gold-light);
  font-size:13px;
  font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-top:34px;
  transition:.3s ease;
  background:transparent;
  cursor:pointer;
  opacity:0;
  animation:fadeUp .8s ease .6s forwards;
}
.btn:hover{background:var(--cocoa-gold); color:var(--cocoa-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(201,150,63,.3);}
.btn-solid{
  background:var(--cocoa-gold);
  color:var(--cocoa-dark);
  border-color:var(--cocoa-gold);
}
.btn-solid:hover{background:var(--cocoa-gold-light); border-color:var(--cocoa-gold-light);}

/* enquiry card */
.enquiry-card{
  background:rgba(74,48,30,.55);
  border:1px solid rgba(232,201,138,.35);
  backdrop-filter:blur(8px);
  padding:26px 24px;
  max-width:340px;
  margin-left:auto;
  opacity:0;
  animation:fadeUp .9s ease .35s forwards;
  transition:transform .4s ease, box-shadow .4s ease;
  border-radius: 8px;
}
.enquiry-card:hover{transform:translateY(-4px); box-shadow:0 24px 48px rgba(74,48,30,.25);}
.enquiry-card h3{
  color:var(--cocoa-gold-light);
  font-weight:600;
  font-size:19px;
  margin-bottom:14px;
}
.enquiry-card input, .enquiry-card textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(232,201,138,.4);
  color:#fdf9f0;
  padding:7px 2px;
  margin-bottom:11px;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  outline:none;
  transition:border-color .25s;
}
.enquiry-card textarea{ min-height:20px; }
.enquiry-card input:focus, .enquiry-card textarea:focus{border-color:var(--cocoa-gold-light);}
.enquiry-card input::placeholder, .enquiry-card textarea::placeholder{color:#d9cdb8;}
.enquiry-card .btn{width:100%; justify-content:center; margin-top:2px; padding:11px 20px; opacity:1; animation:none; font-weight:600; letter-spacing:1.2px;}
.enquiry-note{font-size:10px; color:#d9cdb8; margin-top:8px; text-align:center; letter-spacing:.4px;}

/* ---------- STRIP ---------- */
.strip{
  background:var(--cream-deep);
  border-bottom:1px solid var(--line);
}
.strip .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  padding:26px 32px;
}
.strip-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.3px;
  color:var(--cocoa-brown);
  text-transform:uppercase;
}
.strip-item .num{font-family:'Poppins',sans-serif; font-size:18px; color:var(--cocoa-gold); font-weight:700;}

/* ---------- STRIP — MOBILE ---------- */
@media (max-width: 700px){
  .strip .wrap{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px 24px;
  }
  .strip-item{
    width:100%;
    padding:14px 0;
    border-bottom:1px solid rgba(169,116,59,.18);
  }
  .strip-item:last-child{
    border-bottom:none;
  }
}

/* ---------- SECTION GENERIC ---------- */
/* ================================
   SPACES THAT BRING SECTION
================================ */

.spaces-section {
  background: #f7f3e9;
  padding: 95px 0 105px;
  overflow: hidden;
}

.spaces-wrap {
     max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
  margin: auto;

  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
}


/* ---------- LEFT CONTENT ---------- */

.spaces-content {
  padding: 15px 0;
}

.spaces-content .eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #b78732;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.spaces-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(38px, 4vw, 50px);
  line-height: 1.05;
  font-weight: 500;
  color: #243c2e;
  margin: 0 0 25px;
}

.spaces-title em {
  color: #b38332;
  font-weight: 400;
}

.spaces-text {
  max-width: 520px;
  color: #000;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 30px;
}


/* ---------- POINTS ---------- */

.spaces-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  margin-bottom: 35px;
}

.space-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.point-icon {
  flex-shrink: 0;

  width: 27px;
  height: 27px;

  border-radius: 50%;

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

  background: #40644d;
  color: #fff;

  font-size: 12px;
  margin-top: 2px;
}

.space-point h4 {
  margin: 0 0 5px;

  font-size: 14px;
  font-weight: 600;
  color: #28382d;
}

.space-point p {
  margin: 0;

  font-size: 12px;
  line-height: 1.5;
  color: #000;
}


/* ---------- BUTTON ---------- */

.spaces-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;

  padding: 13px 21px;

  background: #c8953c;
  color: #fff;

  text-decoration: none;
  font-size: 12px;
  font-weight: 600;

  transition: 0.3s ease;
}

.spaces-btn span {
  font-size: 17px;
}

.spaces-btn:hover {
  background: #a8792b;
  transform: translateY(-2px);
}


/* ---------- RIGHT VISUAL ---------- */

.spaces-visual {
  position: relative;
  min-height: 550px;
}

.spaces-image {
  width: 100%;
  height: 540px;

  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

.spaces-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.12),
      transparent 45%,
      rgba(0,0,0,0.05)
    );
}

.spaces-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.7s ease;
}

.spaces-visual:hover .spaces-image img {
  transform: scale(1.04);
}


/* ---------- FLOATING CARD ---------- */

.spaces-card {
  position: absolute;

  left: -55px;
  bottom: 45px;

  width: 260px;

  padding: 28px 30px;

  background: rgba(247, 243, 233, 0.97);

  box-shadow: 0 20px 45px rgba(0,0,0,0.15);

  z-index: 3;
}

.card-small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #b78732;
  font-weight: 700;
}

.spaces-card h3 {
  font-family: 'Poppins', sans-serif;

  font-size: 27px;
  line-height: 1.1;

  color: #293d31;

  margin: 12px 0 12px;
}

.spaces-card p {
  color: #000;

  font-size: 12px;
  line-height: 1.6;

  margin: 0 0 20px;
}

.spaces-card a {
  color: #a97828;

  font-size: 11px;
  font-weight: 600;

  text-decoration: none;
}


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

.image-label {
  position: absolute;

  right: 20px;
  bottom: 20px;

  padding: 11px 16px;

  background: rgba(27, 45, 34, 0.85);

  color: #fff;

  font-size: 11px;

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

  z-index: 4;
}

.label-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #d3a348;
}


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

@media (max-width: 900px) {

  .spaces-wrap {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .spaces-content {
    max-width: 700px;
  }

  .spaces-visual {
    min-height: 500px;
  }

  .spaces-image {
    height: 500px;
  }

  .spaces-card {
    left: 25px;
  }
}


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

@media (max-width: 600px) {

  .spaces-section {
    padding: 30px 0 70px;
  }

  .spaces-wrap {
    width: 100%;
    gap: 35px;
    padding:0 20px;
  }

  .spaces-title {
    font-size: 38px;
  }

  .spaces-text {
    font-size: 14px;
    line-height: 1.7;
  }

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

  .spaces-visual {
    min-height: 440px;
  }

  .spaces-image {
    height: 440px;
  }

  .spaces-card {
    left: 15px;
    bottom: 20px;

    width: 220px;

    padding: 22px;
  }

  .spaces-card h3 {
    font-size: 23px;
  }

  .image-label {
    right: 12px;
    top: 15px;
    bottom: auto;
  }
  .residences-list  {
    padding: 30px 0 0px !important;
  }
  .plans {
        padding: 30px 0 0px;
  }
  
}

/* forest principles band */
/* =========================================
   THOUGHTFULLY DESIGNED SECTION
========================================= */

.principles {
  position: relative;
  width: 100%;
  min-height: 225px;
  padding: 32px 0 30px;

  overflow: hidden;

  background-image: url("images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  font-family: "Poppins", sans-serif;
}


/* Dark Green Overlay */

.principles-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(10, 48, 29, 0.90) 0%,
      rgba(18, 65, 40, 0.84) 50%,
      rgba(8, 43, 27, 0.91) 100%
    );

  z-index: 1;
}


/* Decorative effect */

.principles::before {
  content: "";
  position: absolute;

  width: 300px;
  height: 300px;

  left: -100px;
  top: -130px;

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

  border-radius: 50%;

  filter: blur(25px);

  z-index: 2;
}

.principles::after {
  content: "";
  position: absolute;

  width: 300px;
  height: 300px;

  right: -100px;
  bottom: -150px;

  background: rgba(0,0,0,0.12);

  border-radius: 50%;

  filter: blur(25px);

  z-index: 2;
}


/* =========================================
   WRAPPER
========================================= */

.principles-wrap {
  position: relative;

  max-width: 1180px;

  margin: 0 auto;

  padding: 0 20px;

  z-index: 3;
}


/* =========================================
   HEADING
========================================= */

.principles-title {
  text-align: center;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 27px;

  font-weight: 600;

  line-height: 1.3;

  margin: 0 0 30px;

  letter-spacing: -0.3px;

  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}


/* =========================================
   FLEX ITEMS
========================================= */

.principles-grid {
  width: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 0;
}


/* =========================================
   EACH ITEM
========================================= */

.principle {
  position: relative;

  flex: 1 1 20%;

  min-width: 0;

  text-align: center;

  color: #fff;

  padding: 0 15px;
}


/* =========================================
   VERTICAL SEPARATOR
========================================= */

.principle:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;

  top: 4px;

  width: 1px;

  height: 94px;

  background: rgba(218, 181, 105, 0.28);
}


/* =========================================
   ROUND ICON
========================================= */

.principle-icon {
  width: 58px;
  height: 58px;

  margin: 0 auto 12px;

  border: 1px solid rgba(220, 185, 105, 0.90);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

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

  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.015),
    0 3px 12px rgba(0,0,0,0.15);

  transition: all 0.35s ease;
}


/* Inner Circle */

.principle-icon span {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #d8b56b;

  font-family: "Poppins", sans-serif;

  font-size: 10px;

  font-weight: 600;

  border: 1px solid rgba(216,181,107,0.30);
}


/* Hover */

.principle:hover .principle-icon {
  background: rgba(210,169,81,0.12);

  transform: translateY(-4px);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.18);
}

.principle:hover .principle-icon span {
  background: #d6ad5d;

  color: #173d29;
}


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

.principle h4 {
  margin: 0;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 12px;

  font-weight: 500;

  line-height: 1.45;

  letter-spacing: 0.1px;
}


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

@media (max-width: 900px) {

  .principles {
    min-height: auto;

    padding: 38px 0;
  }

  .principles-title {
    font-size: 24px;

    margin-bottom: 28px;
  }

  .principle {
    padding: 0 8px;
  }

  .principle-icon {
    width: 52px;
    height: 52px;
  }

  .principle-icon span {
    width: 35px;
    height: 35px;
  }

  .principle h4 {
    font-size: 10px;
  }

  .principle:not(:last-child)::after {
    height: 82px;
  }
}


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

@media (max-width: 600px) {

  .principles {
    padding: 42px 0;
  }

  .principles-wrap {
    padding: 0 18px;
  }

  .principles-title {
    font-size: 21px;

    line-height: 1.4;

    margin-bottom: 30px;
  }

  .principles-grid {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    row-gap: 30px;
  }

  .principle {
    flex: 0 0 50%;

    padding: 0 8px;
  }

  .principle::after {
    display: none !important;
  }

  .principle-icon {
    width: 55px;
    height: 55px;

    margin-bottom: 10px;
  }

  .principle-icon span {
    width: 37px;
    height: 37px;

    font-size: 10px;
  }

  .principle h4 {
    font-size: 11px;

    line-height: 1.45;
  }
}


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

@media (max-width: 380px) {

  .principles-title {
    font-size: 19px;
  }

  .principle h4 {
    font-size: 10px;
  }
}

/* amenities */
/* =========================================
   AMENITIES SECTION
========================================= */

.amenities-section {
  background: #f8f5ed;
  padding: 65px 0 75px;

  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

.amenities-wrap {
  max-width: 1360px;
  margin: auto;
  padding: 0 28px;
}


/* =========================================
   TOP AREA
========================================= */

.amenities-top {
  display: flex;
  align-items: flex-end;

  gap: 45px;

  margin-bottom: 38px;
}

.amenities-heading {
  flex: 1.1;
}

.amenities-top .eyebrow {
  margin-bottom: 10px;

  color: #bd913f;

  font-family: "Poppins", sans-serif;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.amenities-top .section-title {
  margin: 0;

  color: #17231d;

  font-family: "Poppins", sans-serif;

  font-size: 39px;

  font-weight: 600;

  line-height: 1.15;

  letter-spacing: -1px;
}


.amenities-top .lede {
  flex: 1;

  max-width: 500px;

  margin: 0;

  color: #000;

  font-family: "Poppins", sans-serif;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================
   GOLD BUTTON
========================================= */

.amenities-btn {
  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 13px 19px;

  background: #d1a04c;

  color: #fff;

  text-decoration: none;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 600;

  border-radius: 3px;

  box-shadow: 0 5px 15px rgba(174,130,47,.15);

  transition: .3s ease;
}

.amenities-btn span {
  font-size: 16px;
}

.amenities-btn:hover {
  background: #b98732;

  transform: translateY(-2px);
}


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

.amen-grid {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  width: 100%;
}


/* =========================================
   CARD
========================================= */

.amen-item {
  position: relative;

  flex: 0 0 calc((100% - 50px) / 6);

  min-width: 0;

  height: 265px;

  overflow: hidden;

  border-radius: 4px;

  background: #234a36;

  box-shadow: 0 4px 15px rgba(0,0,0,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.amen-item:hover {
  transform: translateY(-5px);

  box-shadow: 0 14px 28px rgba(0,0,0,.16);
}


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

.amen-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}

.amen-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition: transform .55s ease;
}

.amen-item:hover .amen-image img {
  transform: scale(1.07);
}


/* Dark gradient on image */

.amen-image::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 105px;

  background: linear-gradient(
    to bottom,
    rgba(17,61,39,0),
    rgba(17,61,39,.96)
  );
}


/* =========================================
   GREEN LABEL
========================================= */

.amen-label {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 62px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(20,75,46,.94);

  color: #fff;

  z-index: 2;
}


/* =========================================
   CIRCLE ICON
========================================= */

.amen-icon {
  flex: 0 0 32px;

  width: 32px;
  height: 32px;

  display: flex;

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

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

  border-radius: 50%;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 8px;

  font-weight: 500;

  background: rgba(255,255,255,.08);
}


/* =========================================
   CARD TEXT
========================================= */

.amen-label span {
  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 500;

  line-height: 1.35;
}


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

@media (max-width: 1100px) {

  .amenities-top {
    flex-wrap: wrap;

    align-items: flex-start;
  }

  .amenities-heading {
    flex: 0 0 calc(50% - 20px);
  }

  .amenities-top .lede {
    flex: 0 0 calc(50% - 20px);
  }

  .amenities-btn {
    margin-left: auto;
  }

  .amen-item {
    flex-basis: calc((100% - 30px) / 4);

    height: 245px;
  }
}


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

@media (max-width: 700px) {

  .amenities-section {
    padding: 50px 0 60px;
  }

  .amenities-wrap {
    padding: 0 18px;
  }

  .amenities-top {
    display: block;

    margin-bottom: 28px;
  }

  .amenities-top .section-title {
    font-size: 29px;

    margin-bottom: 15px;
  }

  .amenities-top .lede {
    max-width: none;

    font-size: 12px;

    margin-bottom: 20px;
  }

  .amenities-btn {
    display: inline-flex;
  }


  /* 2-column grid, no horizontal scroll */

  .amen-grid {
    flex-wrap: wrap;

    overflow-x: hidden;

    gap: 12px;
  }

  .amen-item {
    flex: 0 0 calc(50% - 6px);

    height: 200px;
  }
}


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

@media (max-width: 420px) {

  .amenities-top .section-title {
    font-size: 26px;
  }

  .amen-item {
    flex: 0 0 calc(50% - 6px);

    height: 175px;
  }
}

/* master plan */
.masterplan{background:var(--cream);}
.masterplan .lede{max-width:620px;}
.mp-box{
  margin-top:56px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--cream-deep);
  padding:16px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:0;
  overflow:hidden;
}
.mp-visual{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  min-height:460px;
  cursor:pointer;
}
.mp-visual img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(1.05);}
.mp-visual-cta{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(51,38,25,.05), rgba(51,38,25,.35));
}
.mp-visual-cta button{
  background:var(--cocoa-gold);
  color:#fff;
  border:none;
  padding:15px 30px;
  border-radius:30px;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(51,38,25,.25);
  transition:transform .3s ease, background .3s ease;
}
.mp-visual-cta button:hover{transform:scale(1.06); background:var(--cocoa-dark);}
.mp-content{
  position:relative;
  padding:56px 54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mp-ghost-num{
  position:absolute;
  top:10px; right:24px;
  font-size:96px;
  font-weight:700;
  color:var(--line);
  opacity:.6;
  line-height:1;
  z-index:0;
}
.mp-tag{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--cocoa-gold); margin-bottom:18px; position:relative; z-index:1;
}
.mp-tag span{width:26px; height:1px; background:var(--cocoa-gold); display:inline-block;}
.mp-content h3{
  position:relative; z-index:1;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:600;
  line-height:1.25;
  margin-bottom:26px;
  max-width:420px;
}
.mp-checklist{
  position:relative; z-index:1;
  display:grid;
  gap:16px;
  margin-bottom:32px;
}
.mp-checklist li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:13.5px; color:var(--muted); font-weight:300; line-height:1.6;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.mp-checklist li::before{
  content:'✓';
  color:var(--cocoa-gold);
  font-weight:700;
  flex-shrink:0;
}

/* clubhouse */
.clubhouse{
  position:relative;
  background:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  min-height:560px;
  display:flex;
  align-items:center;
}
.clubhouse::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(74,48,30,.82) 0%, rgba(74,48,30,.5) 46%, rgba(74,48,30,.08) 80%);
}
.clubhouse .wrap{position:relative; z-index:1;}
.clubhouse-content{max-width:480px; color:#f6f1e8;}
.clubhouse-content .eyebrow{color:var(--cocoa-gold-light);}
.clubhouse-content h2{color:#f6f1e8;}
.clubhouse-content p{color:#e6ddc9; margin-top:20px; font-size:14.5px; font-weight:300;}

/* clubhouse features strip — fills the empty feeling under the clubhouse photo */
.clubhouse-features{
  background:var(--cream-deep);
  border-bottom:1px solid var(--line);
  padding:44px 0;
}
.cf-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:20px;
}
.cf-item{text-align:center;}
.cf-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
  font-size:20px;
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.cf-item:hover .cf-icon{transform:translateY(-5px) scale(1.05); background:var(--cocoa-gold-light); box-shadow:0 12px 22px rgba(201,150,63,.22);}
.cf-item span{font-size:11.5px; font-weight:400; letter-spacing:.2px; color:var(--ink);}

/* residences */
/* =========================================
   RESIDENCES SECTION
========================================= */

.residences-section {
  width: 100%;

  background: #e9ddc3;

  padding: 0;

  font-family: "Poppins", sans-serif;

  overflow: hidden;
}


/* =========================================
   MAIN FLEX WRAPPER
========================================= */

.residences-wrap {
  width: 100%;

  max-width: 1380px;

  margin: 0 auto;

  display: flex;

  align-items: stretch;
}


/* =========================================
   LEFT GREEN INTRO PANEL
========================================= */

.residences-intro {
  flex: 0 0 25%;

  min-height: 440px;

  padding: 55px 45px;

  background:
    linear-gradient(
      135deg,
      #123d29 0%,
      #194d35 100%
    );

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.res-eyebrow {
  color: #d4a653;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 18px;
}


.residences-intro h2 {
  margin: 0;

  color: #fff;

  font-family: "Poppins", sans-serif;

  font-size: 39px;

  font-weight: 600;

  line-height: 1.12;

  letter-spacing: -1px;
}


/* Small gold line */

.res-line {
  width: 42px;

  height: 2px;

  background: #d4a653;

  margin: 22px 0 20px;
}


.residences-intro p {
  max-width: 255px;

  margin: 0 0 28px;

  color: rgba(255,255,255,.78);

  font-family: "Poppins", sans-serif;

  font-size: 12px;

  font-weight: 400;

  line-height: 1.7;
}


/* =========================================
   BUTTON
========================================= */

.res-btn {
  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 16px;

  padding: 12px 19px;

  background: #d5a64f;

  color: #fff;

  text-decoration: none;

  border-radius: 3px;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 600;

  transition: .3s ease;
}


.res-btn span {
  font-size: 16px;

  line-height: 1;
}


.res-btn:hover {
  background: #bd8d36;

  transform: translateY(-2px);
}


/* =========================================
   RIGHT CARDS AREA
========================================= */

.residences-list {
  flex: 1;

  padding: 28px 0px;

  display: flex;

  align-items: stretch;

  gap: 18px;

  /* background: #e9ddc3; */
}


/* =========================================
   RESIDENCE CARD
========================================= */

.res-card {
  flex: 1 1 0;

  min-width: 0;

  background: #f8f4e9;

  border-radius: 5px;

  overflow: hidden;

  box-shadow: 0 5px 16px rgba(55,40,20,.08);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.res-card:hover {
  transform: translateY(-6px);

  box-shadow: 0 14px 28px rgba(55,40,20,.16);
}


/* =========================================
   CARD IMAGE
========================================= */

.res-card-image {
  width: 100%;

  height: 205px;

  overflow: hidden;
}


.res-card-image img {
  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition: transform .6s ease;
}


.res-card:hover .res-card-image img {
  transform: scale(1.06);
}


/* =========================================
   CARD CONTENT
========================================= */

.res-card-content {
  padding: 22px 18px 25px;
}


.res-type {
  color: #b4883b;

  font-family: "Poppins", sans-serif;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 1.5px;

  margin-bottom: 8px;
}


.res-card-content h3 {
  display: inline;

  margin: 0;

  color: #202c25;

  font-family: "Poppins", sans-serif;

  font-size: 17px;

  font-weight: 600;
}


.res-area {
  margin-top: 3px;

  color: #202c25;

  font-family: "Poppins", sans-serif;

  font-size: 16px;

  font-weight: 600;

  line-height: 1.4;
}


.res-card-content p {
  margin: 14px 0 0;

  color: #000;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 400;

  line-height: 1.6;
}


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

@media (max-width: 1100px) {

  .residences-intro {
    flex-basis: 27%;

    padding: 40px 30px;
  }

  .residences-intro h2 {
    font-size: 31px;
  }

  .residences-list {
    padding: 22px;

    gap: 12px;
  }

  .res-card-image {
    height: 170px;
  }

  .res-card-content {
    padding: 17px 14px 20px;
  }

  .res-card-content h3,
  .res-area {
    font-size: 14px;
  }

  .res-card-content p {
    font-size: 10px;
  }
}


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

@media (max-width: 700px) {

  .residences-wrap {
    display: flex;

    flex-direction: column;
  }


  /* Intro on top */

  .residences-intro {
    flex: none;

    min-height: auto;

    padding: 45px 25px;
  }

  .residences-intro h2 {
    font-size: 31px;
  }

  .residences-intro p {
    max-width: 400px;
  }


  /* Cards stacked, no horizontal scroll */

  .residences-list {
    flex: none;

    width: 100%;

    padding: 22px 0px 28px;

    flex-direction: column;

    overflow-x: hidden;

    gap: 16px;
  }


  .res-card {
    flex: none;

    width: 100%;
  }

  .res-card-image {
    height: 190px;
  }
}


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

@media (max-width: 420px) {

  .residences-intro {
    padding: 38px 20px;
  }

  .residences-intro h2 {
    font-size: 28px;
  }

  .residences-list {
    padding-left: 15px;
    padding-right: 15px;
  }

  .res-card-image {
    height: 180px;
  }
}

/* ---------- UNIT PLANS (new) ---------- */
/* =====================================================
   FLOOR PLANS (4 cards in one row)
   ===================================================== */
.plans{
  padding:70px 0;
  background:var(--cream);
}
.plans .eyebrow{
  font-size:11px;
  letter-spacing:2px;
  font-weight:600;
  color:var(--cocoa-gold);
  margin-bottom:14px;
  text-transform:uppercase;
}
.plans h2{ font-size:clamp(28px, 3.2vw, 38px); line-height:1.2; }
.plans .sub{
  max-width:560px;
  margin-top:14px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:15px;
  font-weight:300;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:36px;
  max-width: 1400px;
    margin: 35px auto;
    padding: 0 32px;
}

/* card */
.plan-box{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(169,116,59,.14);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(51,38,25,.06);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.plan-box:hover{
  transform:translateY(-6px);
  border-color:rgba(201,150,63,.6);
  box-shadow:0 16px 32px rgba(51,38,25,.13);
}

/* image */
.plan-box-img{ height:230px; overflow:hidden; background:#eee8dc; }
.plan-box-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.plan-box:hover .plan-box-img img{ transform:scale(1.06); }

/* body */
.plan-box-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:20px 20px 22px;
}
.plan-box-type{
  font-size:10px;
  font-weight:600;
  letter-spacing:1.5px;
  color:#b4883b;
  margin-bottom:4px;
}
.plan-box-body h3{
  font-size:19px;
  line-height:1.3;
  margin-bottom:10px;
  color:#202c25;
}

/* size + premium facing pill */
.plan-box-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-bottom:8px;
}
.plan-box-size{ font-size:14px; color:var(--ink); }
.plan-box-size b{ font-weight:600; }
.plan-badge{
  display:inline-block;
  padding:4px 12px;
  border:1px solid #e3c98f;
  border-radius:20px;
  background:#f8ecd0;
  color:#8a6425;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
}

/* description + price */
.plan-box-desc{
  font-size:12px;
  color:#000;
  line-height:1.6;
  margin-bottom:10px;
}
.plan-box-price{
  font-size:14px;
  color:#000;
  margin-bottom:16px;
}
.plan-box-price b{ font-weight:600; color:#5c3823; }

/* enquire button (hamesha card ke neeche) */
.plan-enq{
  margin-top:auto;
  width:100%;
  padding:13px;
  background:#fff;
  border:1px solid var(--cocoa-gold);
  border-radius:6px;
  color:var(--cocoa-dark);
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:.3s ease;
}
.plan-enq:hover{ background:var(--cocoa-gold); color:#fff; }
/* glance table */
.glance{
  background:var(--cream-deep);
  border-bottom:1px solid var(--line);
}
.glance-grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.glance-cell{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 24px;
  transition:background .3s ease;
}
.glance-cell:hover{background:rgba(201,150,63,.08);}
.glance-cell .label{font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--cocoa-gold); margin-bottom:8px;}
.glance-cell .value{font-size:14.5px; color:var(--ink); font-weight:400;}

/* location — dark brown card, gold eyebrow, pill-style icon items
   (matches the "Perfectly Connected" treatment used on ACE ARTE) */
.location-section{
  background:linear-gradient(135deg, var(--cocoa-brown), var(--cocoa-dark));
  padding:90px 0 100px;
}
.location-wrap{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center;
}
.location-section .eyebrow{
  display:inline-block;
  font-size:11px; letter-spacing:2px; font-weight:600;
  color:var(--cocoa-gold-light); margin-bottom:16px; text-transform:uppercase;
}
.location-section .section-title{
  font-size:clamp(28px,3vw,38px);
  line-height:1.2;
  margin-bottom:18px;
  color:#fff;
}
.location-section .lede{
  max-width:440px;
  color:rgba(255,255,255,.72);
  font-size:15px;
  font-weight:300;
  margin-bottom:8px;
}
.location-list{margin-top:30px; display:grid; gap:14px; padding-left:0;}
.location-list li{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.location-list li:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(232,201,138,.5);
  transform:translateX(4px);
}
.location-list .loc-ic{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:50%;
  background:rgba(232,201,138,.16);
  color:var(--cocoa-gold-light);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.location-list .loc-text{
  font-size:13.5px; font-weight:400; color:rgba(255,255,255,.85);
  line-height:1.5;
}
.location-list .loc-text strong{
  display:block;
  color:var(--cocoa-gold-light);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.map-box{
  height:420px;
  background:var(--cream-deep);
  border:1px solid rgba(255,255,255,.16);
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}
.map-box::after{
  content:'• Sector 88-A, Gurugram';
  position:absolute;
  left:20px; bottom:20px;
  padding:11px 16px;
  background:rgba(27,45,34,0.85);
  color:#fff;
  font-size:11px;
  letter-spacing:.4px;
  display:flex; align-items:center; gap:8px;
  z-index:2;
}

/* =========================================
   GALLERY SECTION
========================================= */

.gallery-section {
  width: 100%;
  background: #f8f5ed;
  padding: 30px 0 35px;

  font-family: "Poppins", sans-serif;

  overflow: hidden;
}


/* =========================================
   WRAPPER
========================================= */

.gallery-wrap {
  max-width: 1380px;

  margin: 0 auto;

  padding: 0 28px;

  display: flex;

  align-items: center;

  gap: 20px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.gallery-intro {
  flex: 0 0 300px;

  width: 300px;

  min-width: 300px;
}


.gallery-intro .eyebrow {
  margin-bottom: 8px;

  color: #b88a3d;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}


/* BIGGER TITLE */

.gallery-title {
  margin: 0;

  color: #18241d;

  font-family: "Poppins", sans-serif;

  font-size: 34px;

  font-weight: 600;

  line-height: 1.12;

  letter-spacing: -1px;
}


.gallery-intro p {
  max-width: 185px;

  margin: 13px 0 18px;

  color: #77746c;

  font-family: "Poppins", sans-serif;

  font-size: 11px;

  font-weight: 400;

  line-height: 1.55;
}


/* =========================================
   ARROWS
========================================= */

.gallery-arrows {
  display: flex;

  align-items: center;

  gap: 10px;
}


.gallery-arrow {
  width: 34px;

  height: 34px;

  padding: 0;

  border: 1px solid #c39a55;

  border-radius: 50%;

  background: #f8f5ed;

  color: #a9792d;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-family: "Poppins", sans-serif;

  font-size: 16px;

  line-height: 1;

  transition: all .3s ease;
}


.gallery-arrow:hover {
  background: #c69a4b;

  border-color: #c69a4b;

  color: #fff;

  transform: translateY(-2px);
}


.gallery-arrow:disabled {
  opacity: .35;

  cursor: default;

  transform: none;
}


/* =========================================
   SLIDER
========================================= */

.gallery-slider {
  flex: 1;

  min-width: 0;

  overflow: hidden;
}


/* =========================================
   TRACK
========================================= */

.gallery-track {
  display: flex;

  gap: 10px;

  width: max-content;

  transform: translateX(0);

  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}


/* =========================================
   IMAGE CARD
========================================= */

.gallery-card {
  flex: 0 0 175px;

  width: 200px;

  height: 200px;

  overflow: hidden;

  border-radius: 4px;

  background: #ddd;

  box-shadow:
    0 3px 10px rgba(0,0,0,.10);
}


.gallery-card img {
  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

  object-position: center;

  transition: transform .55s ease;
}


.gallery-card:hover img {
  transform: scale(1.07);
}


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

@media (max-width: 1100px) {

  .gallery-wrap {
    gap: 30px;
  }

  .gallery-intro {
    flex-basis: 190px;

    width: 190px;

    min-width: 190px;
  }

  .gallery-title {
    font-size: 30px;
  }

  .gallery-card {
    flex-basis: 155px;

    width: 155px;

    height: 150px;
  }
}


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

@media (max-width: 700px) {

  .gallery-section {
    padding: 45px 0 50px;
  }

  .gallery-wrap {
    display: block;

    padding: 0 18px;
  }


  .gallery-intro {
    width: 100%;

    min-width: 0;

    margin-bottom: 25px;
  }


  .gallery-title {
    font-size: 31px;

    line-height: 1.15;
  }


  .gallery-intro p {
    max-width: 300px;

    font-size: 11px;
  }


  .gallery-slider {
    overflow-x: hidden;

    width: 100%;
  }


  .gallery-card {
    flex-basis: 220px;

    width: 220px;

    height: 200px;
  }
}


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

@media (max-width: 420px) {

  .gallery-title {
    font-size: 28px;
  }

  .gallery-card {
    flex-basis: 205px;

    width: 205px;

    height: 185px;
  }
}

/* =========================================
   GALLERY — BENTO LAYOUT (new)
========================================= */

.gallery-section{
  padding: 60px 0 45px;
}

.gallery-header{
  text-align:center;
  max-width:620px;
  margin:0 auto 34px;
}

.gallery-header .eyebrow{
  color:#b88a3d;
  font-family:"Poppins", sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.gallery-header .gallery-title{
  font-size:34px;
  font-weight:600;
  letter-spacing:-1px;
  color:#18241d;
  margin:0;
}

.gallery-divider{
  color:#c69a4b;
  font-size:14px;
  margin:14px auto;
}

.gallery-sub{
  color:#77746c;
  font-family:"Poppins", sans-serif;
  font-size:13.5px;
  line-height:1.6;
  margin:0;
}

.gallery-bento{
  display:flex;
  gap:16px;
  height:440px;
}

.bento-main,
.bento-item{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:#ddd;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.bento-main{
  flex:1.15;
  height:100%;
}

.bento-main img,
.bento-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.bento-main:hover img,
.bento-item:hover img{
  transform:scale(1.06);
}

.bento-main::after,
.bento-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 48%);
  pointer-events:none;
}

.bento-tag{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:30px;
  background:rgba(24,36,29,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-family:"Poppins", sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
}

.bento-tag i{
  color:#e3b25c;
  font-size:11px;
}

.bento-caption{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:2;
  max-width:70%;
}

.bento-caption p{
  margin:0;
  color:#fff;
  font-family:"Poppins", sans-serif;
  font-size:15px;
  font-weight:500;
  line-height:1.45;
}

.bento-arrow{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:2;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#c69a4b;
  color:#fff;
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .3s ease;
}

.bento-arrow:hover{
  background:#18241d;
  transform:translateY(-2px);
}

.bento-grid{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.bento-grid-row{
  flex:1;
  display:flex;
  gap:16px;
  min-height:0;
}

.bento-item{
  flex:1;
  height:100%;
}

.bento-item .bento-tag{
  font-size:9.5px;
  padding:7px 12px;
}

.gallery-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(24,36,29,.1);
}

.gallery-footer-note{
  display:flex;
  align-items:center;
  gap:10px;
  color:#77746c;
  font-family:"Poppins", sans-serif;
  font-size:12.5px;
}

.gallery-footer-note i{
  color:#c69a4b;
}

.gallery-view-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border:1px solid #c69a4b;
  border-radius:30px;
  color:#18241d;
  font-family:"Poppins", sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  transition:all .3s ease;
}

.gallery-view-all:hover{
  background:#18241d;
  border-color:#18241d;
  color:#fff;
}

@media (max-width: 900px){
  .gallery-bento{
    flex-direction:column;
    height:auto;
  }
  .bento-main{
    height:280px;
    flex:none;
  }
  .bento-grid{
    height:280px;
  }
}

@media (max-width: 560px){
  .gallery-header .gallery-title{
    font-size:28px;
  }
  .gallery-bento{
    height:auto;
  }
  .bento-main{
    height:220px;
  }
  .bento-grid{
    height:auto;
  }
  .bento-grid-row{
    flex-direction:column;
    height:220px;
  }
  .gallery-footer{
    justify-content:center;
    text-align:center;
  }
}

/* =========================================
   FLOOR PLANS
========================================= */

.plans{
  padding:85px 0 0px;
  background:var(--cream);
}
.plans .eyebrow{
  font-size:11px; letter-spacing:2px; font-weight:600;
  color:var(--cocoa-gold); margin-bottom:14px; text-transform:uppercase;
}
.plans .sub{
  max-width:560px; margin-top:14px; margin-bottom:10px; color:var(--muted); font-size:15px; font-weight:300;
}

.floorplans-grid {
  display: flex;
  gap: 20px;
  /* margin-top: 42px; */
     padding: 20px 0px;
  align-items: stretch;
}


.floorplan-card {
  /* flex: 1 1 0; */
  width:35%;
  min-width: 0;

  background: linear-gradient(
    145deg,
    #fffdf9,
    #f4ebdc
  );

  border: 1px solid rgba(169,116,59,.35);

  border-radius: 16px;

  overflow: hidden;

  position: relative;

  box-shadow:
    0 15px 40px rgba(61,42,20,.09);

  transition:
    transform .4s ease,
    box-shadow .4s ease;
}


.floorplan-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 25px 55px rgba(61,42,20,.15);
}


/* IMAGE — blurred preview with a centered "Get Floor Plan" overlay
   (lead-gated, same pattern as the .plan-card teasers elsewhere on the
   page) instead of a clear image + long details table below it. */

.floorplan-image {
  width: 100%;
  height: 200px;

  background: #eee8dc;

  overflow: hidden;
  position: relative;

  border-bottom: 1px solid
    rgba(169,116,59,.18);
}


.floorplan-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter: blur(6px) saturate(1.05);
  transform: scale(1.12);

  transition: filter .45s ease, transform .45s ease;
}


.floorplan-card:hover
.floorplan-image img {
  filter: blur(3px) saturate(1.1);
  transform: scale(1.18);
}


.floorplan-cta {
  position: absolute;
  inset: 0;

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


.floorplan-cta button {
  background: #fff;
  color: var(--cocoa-dark);

  border: none;
  border-radius: 6px;

  padding: 12px 22px;

  font-family: "Poppins", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .3px;

  cursor: pointer;

  box-shadow: 0 12px 30px rgba(51,38,25,.18);

  transition: transform .3s ease, background .3s ease;
}


.floorplan-cta button:hover {
  transform: scale(1.05);
  background: var(--cocoa-gold);
  color: #fff;
}


/* CONTENT */

.floorplan-content {
  position: relative;

  padding: 18px 22px 20px;
}


/* TAG */

.floorplan-content .tag {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 9px;

  color: #9a6828;

  font-family: "Poppins", sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .16em;
}


.floorplan-content .tag::before {
  content: "";

  width: 23px;

  height: 1px;

  background: #b78335;
}


/* TITLE */

.floorplan-content h3 {
  margin: 0 0 7px 0;

  color: #30291f;

  font-family: "Poppins", sans-serif;

  font-size: 19px;

  font-weight: 600;

  line-height: 1.25;
}


/* AREA */

.plan-area {
  color: #a9762d;

  font-family: "Poppins", sans-serif;

  font-size: 20px;

  font-weight: 600;
}


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

@media (max-width: 1050px) {

  .floorplans-grid {
    flex-wrap: wrap;
  }

  .floorplan-card {
    flex: 0 0 calc(50% - 10px);
  }

}


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

@media (max-width: 650px) {

  .floorplans-grid {
    flex-direction: column;

    gap: 22px;

    margin-top: 30px;
  }

  .floorplan-card {
    width: 100% !important;
  }

  .floorplan-image {
    height: 230px;
  }

  .floorplan-content {
    padding: 18px 22px 20px;
  }

}
/* specifications — white document panel, framed by a gold rule, clearly separate from the cream-deep bands around it */
.specs-section{
  background:var(--cream);
  position:relative;
}
.specs-section::before{
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:3px;
  background:var(--cocoa-gold);
}
.specs-section .wrap{
  background:#fff;
  border:1px solid var(--line);
  padding:70px 60px;
  box-shadow:0 30px 70px rgba(51,38,25,.06);
  max-width:1400px;
}
.spec-grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 36px;
}
.spec-block h4{
  font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--cocoa-gold);
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.spec-block dl{display:grid; gap:10px;}
.spec-block dt{font-size:13px; color:var(--cocoa-brown); font-weight:500;}
.spec-block dd{font-size:13px; color:var(--muted); margin-top:2px; font-weight:300;}

/* faq — cream-deep band with a callback form on the left, echoes the hero form */
/* =====================================================
   FAQ (question cards + compact enquiry form)
   ===================================================== */
.faq-section{
  background:var(--cream);
  padding:0px 0 70px;
}
.faq-wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:start;
}

/* ---------- left ---------- */
.faq-eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:3px;
  color:#a9743b;
  margin-bottom:10px;
}
.faq-title{
  font-size:clamp(28px, 3.2vw, 38px);
  line-height:1.2;
  font-weight:700;
  color:#241b12;
  margin-bottom:10px;
}
.faq-sub{
  max-width:640px;
  font-size:15px;
  font-weight:300;
  line-height:1.8;
  color:#6b5d4d;
  margin-bottom:28px;
}
.faq-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.faq-card{
  background:#fff;
  border:1px solid #eadfc9;
  border-radius:12px;
  padding:26px 30px;
  box-shadow:0 2px 10px rgba(51,38,25,.04);
}
.faq-card h4{
  font-size:17px;
  font-weight:600;
  color:#241b12;
  margin-bottom:10px;
}
.faq-card p{
  font-size:14px;
  font-weight:300;
  line-height:1.75;
  color:#000;
}

/* ---------- right: form card ---------- */
.callback-card{
  background:#fff;
  border:1px solid #a9743b;
  border-radius:16px;
  padding:34px 32px 30px;
}
.callback-card h3{
  font-size:24px;
  font-weight:700;
  color:#241b12;
  margin-bottom:6px;
}
.callback-card > p{
  font-size:14px;
  font-weight:300;
  color:#6b5d4d;
  margin-bottom:24px;
}

/* field wrapper: icon andar left me */
.cb-field{
  position:relative;
  margin-bottom:14px;
}
.cb-field > i{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:#a9743b;
  font-size:14px;
  pointer-events:none;
}
.cb-field input,
.cb-field select{
  display:block;
  width:100%;
  margin:0;
  padding:16px 16px 16px 48px;
  border:1px solid #eadfc9;
  border-radius:10px;
  background:#fff;
  font-family:'Poppins',sans-serif;
  font-size:14px;
  font-weight:400;
  color:var(--ink);
  outline:none;
  transition:border-color .25s;
}
.cb-field input::placeholder{ color:#a89d8c; }
.cb-field input:focus,
.cb-field select:focus{ border-color:#a9743b; }

/* dropdown */
.cb-select select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:44px;
  cursor:pointer;
}
.cb-select .cb-chevron{
  left:auto;
  right:18px;
  font-size:11px;
  color:#3a2e22;
}

/* submit button */
.cb-submit{
  display:block;
  width:100%;
  margin-top:6px;
  padding:15px;
  border:none;
  border-radius:4px;
  background:#a9743b;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:.3s ease;
}
.cb-submit:hover{ background:var(--cocoa-dark); }

.enquiry-note-light{
  font-size:11px;
  color:#8a7f70;
  margin-top:12px;
  text-align:center;
  letter-spacing:.3px;
}

/* footer */
.site-footer{
  background:var(--cocoa-dark);
  color:#e6ddc9;
  padding:56px 0 36px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.site-footer h4{
  color:var(--cocoa-gold-light);
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:12px;
}
.site-footer p{font-size:13.5px; font-weight:300; margin-bottom:4px;}
.site-footer a{transition:color .2s ease;}
.site-footer a:hover{color:var(--cocoa-gold-light);}

/* legal strip — lightened, no black panel */
.legal{
  background:var(--cream-deep);
  color:var(--muted);
  font-size:11.5px;
  font-weight:300;
  line-height:1.8;
  padding:34px 0;
  text-align:center;
  border-top:1px solid var(--line);
}
.legal strong{color:var(--cocoa-brown); font-weight:600;}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;}
  .enquiry-card{max-width:100%; margin-left:0;}
  .intro, .location-wrap, .faq-wrap{grid-template-columns:1fr;}
  .principles-grid, .res-grid, .glance-grid, .plan-grid{grid-template-columns:repeat(2,1fr);}
  .amen-grid{grid-template-columns:repeat(3,1fr);}
  .cf-grid{grid-template-columns:repeat(4,1fr);}
  .spec-grid{grid-template-columns:1fr;}
  .specs-section .wrap{padding:44px 26px;}
  .gallery-grid{grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px;}
  .gallery-grid .g1{grid-row:auto;}
  .callback-card{position:static;}
  .footer-grid{grid-template-columns:1fr; gap:24px; text-align:left;}
  .intro-media{padding:20px 0 20px 20px;}
  .mp-box{grid-template-columns:1fr;}
  .mp-visual{min-height:280px;}
  .mp-content{padding:40px 26px;}
  .mp-ghost-num{font-size:64px;}
}


  /* ===== DOWNLOADS ===== */
  .downloads{background:var(--cream-deep); text-align:center; padding:85px 0 95px;}
  .downloads h2{font-size:clamp(26px,3vw,34px);margin-bottom:50px;}
  .dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .dl-card{
    background:#fff;border:1px solid var(--line);border-radius:8px;padding:38px 24px;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .dl-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(51,38,25,.12);
    border-color:var(--cocoa-gold);
  }
  .dl-card .ic{
    font-size:24px;color:var(--cocoa-gold);margin-bottom:18px;
    transition:transform .35s ease;
  }
  .dl-card:hover .ic{transform:scale(1.12) translateY(-2px);}
  .dl-card .t{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;margin-bottom:8px;}
  .dl-card .s{font-size:13px;color:var(--muted);margin-bottom:22px;}
  .btn.dark{
    background:var(--cocoa-dark);
    color:#fdf9f0;
    border:1px solid var(--cocoa-dark);
    opacity:1;
    animation:none;
    width:100%;
    justify-content:center;
    transition:.3s ease;
  }
  .btn.dark:hover{
    background:var(--cocoa-gold);
    border-color:var(--cocoa-gold);
    color:var(--cocoa-dark);
    transform:translateY(-2px);
  }
  @media(max-width:820px){.dl-grid{grid-template-columns:1fr;}}
/* ============ ENQUIRY MODAL (#brochureModal) ============ */
.cc-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.cc-modal.open{ display:flex; }
.cc-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(51,38,25,.65);
}
.cc-modal-dialog{
  position:relative;
  z-index:1;
  background:var(--cream);
  width:100%;
  max-width:420px;
  /* margin:0 auto is a safety net: keeps the dialog horizontally centered
     even if .cc-modal ever falls back to display:block (e.g. from a stray
     inline style), instead of collapsing to the left edge. */
  margin:0 auto;
  padding:36px 30px 28px;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:ccModalIn .25s ease;
}
@keyframes ccModalIn{
  from{ opacity:0; transform:translateY(16px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.cc-modal-close{
  position:absolute;
  top:14px; right:14px;
  width:32px; height:32px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.cc-modal-close:hover{ color:var(--cocoa-dark); }
.cc-modal-dialog h3{
  font-family:'Poppins', sans-serif;
  font-size:24px;
  color:var(--cocoa-dark);
  margin-bottom:8px;
}
.cc-modal-sub{
  color:var(--muted);
  font-size:14px;
  margin-bottom:22px;
}
#brochureForm{
  display:flex;
  flex-direction:column;
  gap:14px;
}
#brochureForm input{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:'Poppins', sans-serif;
  font-size:14px;
  color:var(--ink);
  background:#fff;
  outline:none;
}
#brochureForm input:focus{
  border-color:var(--cocoa-gold);
}
#brochureForm button{
  margin-top:4px;
  width:100%;
  cursor:pointer;
  font-weight:600;
  letter-spacing:1.2px;
  display:flex;
  justify-content:center;
}

.cc-modal-note{
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* ============ SIDE VERTICAL ENQUIRE TAB ============ */
.cc-side-tabs{
  position:fixed;
  right:0;
  top:55%;
  transform:translateY(-50%) rotate(0deg);
  z-index:900;
}
.cc-side-tab{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  background:var(--cocoa-dark);
  color:#fff;
  border:none;
  padding:16px 10px;
  font-family:'Poppins', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  cursor:pointer;
  border-radius:0px 8px 8px 0px;
}
.cc-side-tab:hover{ background:var(--cocoa-gold); color:var(--cocoa-dark); }

/* ============ WHATSAPP WIDGET ============ */
.cc-whatsapp-btn{
  position:fixed;
  bottom:24px;
  left:24px;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  border:none;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  cursor:pointer;
  z-index:950;
}
.cc-whatsapp-btn:hover{ transform:scale(1.06); }
.cc-whatsapp-form{
  position:fixed;
  bottom:24px;
  left:24px;
  width:260px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  padding:18px;
  display:none;
  z-index:951;
}
.cc-whatsapp-form.open{ display:block; }
.cc-whatsapp-close{
  position:absolute;
  top:8px; right:10px;
  border:none;
  background:transparent;
  font-size:18px;
  color:var(--muted);
  cursor:pointer;
}
.cc-whatsapp-form input{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  margin-top:10px;
  margin-bottom:10px;
  font-family:'Poppins', sans-serif;
  font-size:14px;
}
.cc-whatsapp-form button{
  width:100%;
  padding:11px;
  border:none;
  border-radius:8px;
  background:#25D366;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.cc-whatsapp-form button:disabled{
  background:#a9dfc1;
  cursor:not-allowed;
}

/* ============ FLOOR PLAN LIGHTBOX ============ */
.cc-lightbox{
  position:fixed;
  inset:0;
  z-index:9998;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
  padding:30px;
}
.cc-lightbox.open{ display:flex; }
.cc-lightbox img{
  max-width:100%;
  max-height:90vh;
  border-radius:6px;
}
.cc-lightbox-close{
  position:absolute;
  top:20px; right:24px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:32px;
  cursor:pointer;
}

/* =====================================================
   HERO — PRE-LAUNCH EOI PILL
   ===================================================== */
.hero-eoi{
  display:flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding:9px 18px;
  border:1px solid rgba(232,201,138,.55);
  background:rgba(201,150,63,.16);
  opacity:0;
  animation:fadeUp .8s ease .55s forwards;
}
.hero-eoi-label{
  font-size:11px;
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--cocoa-gold-light);
}
.hero-eoi-amount{
  font-size:16px;
  font-weight:600;
  color:#fdf9f0;
  padding-left:12px;
  border-left:1px solid rgba(232,201,138,.5);
}

/* plan cards — EOI line under the price */
.plan-box-eoi{
  font-size:14px;
  color:#000;
  margin:-8px 0 16px;
}
.plan-box-eoi b{ font-weight:600; color:#5c3823; }

/* downloads — EOI card highlight */
.dl-card .s strong{ font-weight:600; color:var(--cocoa-dark); }

/* =====================================================
   LOCATION SECTION — travel times list, paragraph, CTA
   (replaces the Site Office / Corporate Office cards)
   ===================================================== */
.location-wrap{ align-items:stretch; }          /* map grows to match the list height */
.map-box{ height:auto; min-height:420px; }
.map-box iframe{ position:absolute; inset:0; width:100%; height:100%; }

.loc-times{
  list-style:none;
  margin-top:28px;
  border-top:1px solid rgba(255,255,255,.18);
  padding-left: 0px;
}
.loc-times li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:18px;
  padding:15px 2px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.loc-place{
  font-size:15px;
  font-weight:400;
  color:rgba(255,255,255,.92);
  line-height:1.4;
}
.loc-time{
  font-size:14px;
  font-weight:500;
  color:var(--cocoa-gold-light);
  text-align:right;
  white-space:nowrap;
}

/* office cards row (under list + map): keeps the original .location-list card design */
.location-list.loc-offices{
  grid-column:1 / -1;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:10px;
}


/* =====================================================
   WELCOME SECTION — PRE-LAUNCH CARD
   ===================================================== */
.spaces-text{ margin-bottom:24px; }
.spaces-points{ margin-bottom:28px; gap:14px 28px; }
.space-point{ align-items:center; }
.space-point h4{ margin:0; font-size:14.5px; }

.prelaunch-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  max-width:560px;
  margin-bottom:30px;
  padding:26px 0;
  background:#fbf9f4;
  border:1px solid #e6dcc6;
  border-radius:20px;
  box-shadow:0 14px 40px rgba(92,56,35,.08);
}
.pl-col{
  display:flex;
  flex-direction:column;
  padding:0 30px;
}
.pl-col + .pl-col{ border-left:1px solid #e3d0a8; }
.pl-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#a8792b;
  margin-bottom:10px;
}
.pl-value{
  font-size:32px;
  font-weight:600;
  line-height:1.15;
  color:#1f2d24;
  margin-bottom:6px;
}
.pl-sub{
  font-size:13px;
  color:#4a4034;
}

footer.footer{

background: #000000;
    text-align: center;
    color: #ffffff;
    padding: 15px;
}

@media (max-width:500px){
  footer.footer{
    padding:20px;
  }
}