:root{
  --brand:#386556;
  --bg:#dbe1ce;
  --ink:#0e140c;
  --muted:rgba(14,20,12,.70);
  --card:#ffffff;
  --sectionA:#ffffff;
  --sectionB:#f3f1e8;
  --radius:22px;
  --shadow: 0 14px 40px rgba(0,0,0,.18);
  --shadow2: 0 10px 22px rgba(0,0,0,.16);
  --line: rgba(255,255,255,.12);
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: #f5f6f1;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}
.section{
  padding:54px 0;
  background: var(--sectionA);
  border-top:1px solid rgba(14,20,12,.06);
}
.section.section--alt{ background: var(--sectionB); }
.section--brand{border-top:none}
.section--brand{background: var(--brand); color:#fff}
.center{ text-align:center }
.centerText{ text-align:center }
.muted{ color: rgba(255,255,255,.75) }

/* Header */
.header{
  position:sticky; top:0;
  z-index:9999;
  background: rgba(56,101,86,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Whiteland logo (force white on dark header) */
.brand__logo--invert{filter: brightness(0) invert(1);}
.header__inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  min-width:0;
  flex:0 1 auto;
  max-width:calc(100% - 170px);
}
.brand__logo{height:42px; width:auto; display:block; max-width:clamp(160px, 38vw, 260px); object-fit:contain}
.header__right{display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:nowrap}

.iconBtn{
  width:42px; height:42px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.iconBtn svg{width:20px; height:20px; fill:#fff; display:block; margin-top:1px}

/* Bounce effect for header / WhatsApp icons */
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.iconBtn--bounce{animation:iconBounce 2.2s ease-in-out infinite}
.header__right .iconBtn--bounce:nth-child(2){animation-delay:.25s}
.ctaStrip__actions .iconBtn--bounce:nth-child(2){animation-delay:.25s}

/* Tighter + perfectly centered icon buttons on mobile */
@media (max-width: 520px){
  .header__right{gap:10px}
  .brand__logo{height:38px; max-width:clamp(140px, 32vw, 220px)}
  .iconBtn{width:40px; height:40px; border-radius:15px}
  .iconBtn svg{width:21px; height:21px}
}

@media (max-width: 380px){
  .header__right{gap:8px}
  .brand__logo{height:36px; max-width:clamp(130px, 30vw, 200px)}
  .iconBtn{width:38px; height:38px; border-radius:14px}
}

/* Ensure icons look centered across different SVGs */
.iconBtn svg{display:block}
.iconBtn--solid{background: rgba(255,255,255,.14)}

.burger{
  width:44px; height:44px;
  border-radius:16px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center;
  gap:4px;
  padding:10px;
  cursor:pointer;
}
.burger span{
  display:block;
  height:2px;
  width:18px;
  background:#fff;
  border-radius:99px;
}

/* Mobile Nav */
.mobileNav{
  position:fixed;
  top:0; right:-320px;
  height:100vh;
  width:320px;
  background: rgba(14,20,12,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255,255,255,.10);
  padding:18px 14px;
  z-index:99999;
  transition: right .25s ease;
}
.mobileNav.open{ right:0 }
.mobileNav__close{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  position:absolute;
  top:18px;
  right:14px;
}
.mobileNav a{
  display:block;
  padding:9px 10px;
  margin-top:6px;
  border-radius:12px;
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-weight:700;
  font-size:13px;
}
.mobileNav__cta{ margin-top:14px }

/* keep links clear of close button */
.mobileNav{ padding-top:74px; }

/* Buttons */
.btn{
  border:0;
  cursor:pointer;
  border-radius:16px;
  padding:12px 16px;
  font-weight:800;
  letter-spacing:.2px;
  transition: transform .15s ease, filter .15s ease;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
}
.btn:hover{transform: translateY(-1px); filter:saturate(1.05)}
.btn--full{width:100%}
.btn--sm{padding:10px 12px; border-radius:14px; font-size:13px}
.btn--solid{
  background: var(--brand);
  color:#fff;
  border:1px solid rgba(219,225,206,.40);
}
.btn--ghost{
  background: rgba(0,0,0,.22);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.btn--soft{
  background: rgba(219,225,206,.92);
  color: #2b3324;
  border:1px solid rgba(0,0,0,.06);
}

/* Hero */
.hero{
  position:relative;
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:stretch;
  padding:28px 0 22px;
}
.hero__bg{
  position:absolute; inset:0;
  background-image:url('../img/hero.png');
  background-size:cover;
  /* keep towers visible behind the form */
  background-position:center 20%;
  filter: saturate(1.02) contrast(1.02);
}
.hero__bg:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(14,20,12,.78), rgba(14,20,12,.45) 58%, rgba(14,20,12,.68));
}
.hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
  align-items:center;
}

/* Center the reduced hero copy on both desktop & mobile */
.hero__left{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.hero__kicker{
  color: rgba(255,255,255,.85);
  font-weight:700;
  font-size:13px;
  margin: 8px 0 10px;
}
.hero h1{
  margin:0;
  color:#fff;
  font-family:"Playfair Display", serif;
  font-weight:800;
  line-height:1.05;
  font-size: clamp(30px, 4vw, 54px);
}
.hero__sub{
  color: rgba(255,255,255,.88);
  font-weight:600;
  margin:10px 0 18px;
}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap}
.hero__mini{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.miniCard{
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding:12px;
  color:#fff;
  font-weight:800;
}
.miniCard span{
  display:block;
  margin-top:6px;
  font-weight:600;
  color: rgba(255,255,255,.82);
  font-size:12px;
}

.formCard{
  background: rgba(56,101,86,.88);
  border: 1px solid rgba(219,225,206,.22);
  border-radius: 22px;
  padding:16px;
  box-shadow: var(--shadow);
}
.formCard__top{display:flex; justify-content:flex-end; margin-bottom:10px}
.startPrice{
  display:flex; gap:10px; align-items:center;
  background: rgba(219,225,206,.92);
  color:#2b3324;
  border-radius: 16px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.08);
  font-weight:700; /* simpler, sober */
}
.startPrice span{font-size:10px; text-transform:uppercase; letter-spacing:.9px; opacity:.85}
/* keep pricing line readable & clean */
.startPrice strong{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:700; font-size:18px; line-height:1.15; letter-spacing:0}
.formCard h3{
  margin:8px 0 10px;
  color:#fff;
  font-weight:900;
}
.form label{display:block; margin:10px 0}
.form span{display:block; font-size:12px; font-weight:800; color: rgba(255,255,255,.90); margin-bottom:6px}
.form input,.form textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.96);
  padding:12px 12px;
  font-weight:650;
  outline:none;
}
.form textarea{resize:none}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:10px}
.consent input{margin-top:3px}
.consent span{color: rgba(255,255,255,.80); font-weight:600; font-size:11px; line-height:1.4}

.underFormMedia{
  margin-top:12px;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow2);
  position:relative;
}
.underFormMedia img{
  width:100%;
  aspect-ratio: 16/9;
  object-fit:cover;
  display:block;
}
.underFormMedia__overlay{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(14,20,12,.55);
  color:#fff;
  font-weight:800;
  font-size:12.5px;
  text-align:center;
}

/* Section head */
.sectionHead h2{
  margin:0;
  font-family:"Playfair Display", serif;
  font-size: 38px;
  color: var(--brand);
}
.section--brand .sectionHead h2{color:#fff}
.sectionHead p{margin:8px 0 0; color: rgba(14,20,12,.70); font-weight:600}
.section--brand .sectionHead p{color: rgba(255,255,255,.82)}
.sectionHead.centerText{ text-align:center }

/* Payment cards */
.payGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.payCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  padding:14px;
  display:flex; gap:12px; align-items:center;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.payIcon{
  width:44px; height:44px;
  border-radius: 16px;
  background: rgba(219,225,206,.80);
  display:grid; place-items:center;
  font-size:18px;
}
.payCard b{display:block; font-weight:900}
.payCard span{display:block; color: rgba(14,20,12,.70); font-weight:650; font-size:12px; margin-top:4px}

/* CTA strip */
.ctaStrip{
  margin-top:16px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(56,101,86,.96), rgba(56,101,86,.82));
  border:1px solid rgba(219,225,206,.18);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.ctaStrip__text h3{margin:0; color:#fff; font-family:"Playfair Display", serif; font-size:26px}
.ctaStrip__text p{margin:6px 0 0; color: rgba(255,255,255,.85); font-weight:650}
.ctaStrip__actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Price list cards (matches your reference table style) */
.priceCardsWrap{margin-top:22px}
.priceCardsWrap h3{margin:0 0 12px; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:700; font-size:34px; color:var(--brand); text-align:center}
.priceCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.pCard{
  overflow:hidden;
  border-radius:24px;
  background:#f5f1e8;
  border:1px solid rgba(0,0,0,.07);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.pCard__head{
  background: var(--brand);
  color:#fff;
  text-align:center;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:20px;
  padding:18px 16px;
  letter-spacing:.2px;
}
.pCard__body{
  padding:18px 16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
.pCard__size{font-weight:600; font-size:19px; color: rgba(14,20,12,.85)}
.pCard__price{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight:700; font-size:22px; color:#1a2017}
.pCard .btn{min-width:220px; justify-content:center}

@media (max-width: 720px){
  .priceCards{grid-template-columns: 1fr}
  .priceCardsWrap h3{font-size:36px}
  .pCard__head{font-size:20px}
  .pCard__price{font-size:22px}
  .pCard .btn{width:100%}
}

/* Split cards */
.splitCard{
  margin-top:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 26px;
  overflow:hidden;
  display:grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.splitCard__text{padding:18px}
.splitCard__text h3{margin:0 0 8px; color: var(--brand); font-family:"Playfair Display", serif; font-size:28px}
.splitCard__text p{margin:0 0 10px; color: rgba(14,20,12,.75); font-weight:600; line-height:1.65}
.splitCard__media img{width:100%; height:100%; object-fit:cover; display:block}
.splitCard--dark{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.14)}
.splitCard--dark .splitCard__text{background: rgba(255,255,255,.95)}
.splitCard--dark .splitCard__media img{height:100%}

/* Gallery */
.galleryGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.gItem{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}
.gItem img{
  width:100%;
  aspect-ratio: 16/9;
  object-fit:cover;
  display:block;
}

/* Floor plan */
.planGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}
.planCard{border-radius: 24px; overflow:hidden; border:1px solid rgba(0,0,0,.06); background:#fff; box-shadow: 0 14px 28px rgba(0,0,0,.10)}
.planMedia{position:relative}
.planImg{width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; filter: blur(6px); transform: scale(1.02)}
.planOverlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(14,20,12,.18), rgba(14,20,12,.55));
}
.planLabel{
  padding:12px 14px;
  font-weight:900;
  text-align:center;
  background: rgba(219,225,206,.70);
  color: #25301f;
}

/* Amenities */
.amenGrid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.amenCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding:16px;
  display:flex; gap:12px; align-items:center;
  box-shadow: 0 12px 24px rgba(0,0,0,.09);
}
.amenIcon{
  width:52px; height:52px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: rgba(219,225,206,.85);
  font-size:22px;
}
.amenCard b{display:block; font-weight:900}
.amenCard span{display:block; margin-top:4px; color: rgba(14,20,12,.70); font-weight:650; font-size:12px}

/* Bullets */
.bullets{margin:0; padding-left:18px}
.bullets li{margin:10px 0; color: rgba(14,20,12,.78); font-weight:650; line-height:1.55}
.bullets--light li{color: rgba(255,255,255,.90)}

/* Location */
.locCard{
  margin-top:14px;
  border-radius: 26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.locText{padding:18px}
.locMedia img{width:100%; height:100%; object-fit:cover; display:block}

/* Contact (bottom) */
.contactCard{
  margin-top:16px;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(90deg, rgba(56,101,86,.96), rgba(56,101,86,.82));
  box-shadow: var(--shadow2);
  display:grid;
  grid-template-columns: 1fr 1fr;
}
/* Contact side title like reference */
.contactTitle{margin:0; font-family:"Playfair Display", serif; font-size:46px; line-height:1.05; letter-spacing:.2px; display:flex; flex-direction:column; gap:14px}
.contactTitle__line{height:3px; width:180px; background:rgba(255,255,255,.9); border-radius:999px}
@media (max-width: 820px){
  .contactTitle{font-size:34px}
  .contactTitle__line{width:140px}
}

/* RERA note under Enquire Now button */
.reraNote{margin-top:10px; font-size:12.5px; color:rgba(255,255,255,.78); line-height:1.35}
.formCard .reraNote, #brochureModal .reraNote{color:rgba(255,255,255,.7)}
#contact .reraNote{color:rgba(255,255,255,.78)}

.contactCard__left{padding:18px; color:#fff}
.contactCard__left h3{margin:0 0 8px; font-family:"Playfair Display", serif; font-size:30px}
.contactCard__left p{margin:0 0 12px; color: rgba(255,255,255,.86); font-weight:650; line-height:1.55}
.contactCard__chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); font-weight:800; font-size:12px}

.contactCard__right{background: rgba(255,255,255,.10); padding:18px}
.contactCard__right .form span{color: rgba(255,255,255,.92)}
.contactCard__right .form input,.contactCard__right .form textarea{background: rgba(255,255,255,.96)}

@media (max-width: 980px){
  .contactCard{grid-template-columns: 1fr}
  .contactCard__left h3{font-size:26px}
}

/* Footer */
.footer{
  padding:22px 0;
  background: var(--brand);
  color:#fff;
}
.footer__grid{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer__brand{font-family:"Playfair Display", serif; font-weight:800; font-size:18px}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}
.footer__links a{color: rgba(255,255,255,.92); font-weight:700}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:999999}
.modal.open{display:block}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.62)}
.modal__card{
  position:relative;
  max-width: 420px;
  margin: 7vh auto 0;
  background: rgba(56,101,86,.96);
  border:1px solid rgba(219,225,206,.22);
  border-radius: 26px;
  padding:18px;
  box-shadow: var(--shadow);
  color:#fff;
}
.modal__card h3{margin:4px 0 10px; text-align:center; letter-spacing:1px}
.modal__close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 980px){
  body{padding-bottom:94px}
  /* Header: keep logo left + icons perfectly aligned on right */
  .header__inner{height:60px}
  .header__right{gap:10px}
  .iconBtn{width:40px; height:40px; border-radius:14px}
  .iconBtn svg{width:20px; height:20px}

  /* Mobile: keep hero tall enough so the next section never overlaps */
  .hero{min-height:680px; padding:22px 0 22px}
  .hero__bg{background-position:center 12%}
  .hero__grid{grid-template-columns: 1fr; gap:14px}
  .hero__mini{grid-template-columns: 1fr; gap:10px}
  .payGrid{grid-template-columns: 1fr 1fr}
  /* Payment plan: keep all 4 cards visually equal on mobile */
  .payCard{height:96px; align-items:center}
  .payCard b{
    font-size:14px;
    line-height:1.15;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .payCard span{
    font-size:11.5px;
    line-height:1.2;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .splitCard{grid-template-columns: 1fr}
  .galleryGrid{grid-template-columns: 1fr}
  .planGrid{grid-template-columns: 1fr}
  .amenGrid{grid-template-columns: 1fr}
  .locCard{grid-template-columns: 1fr}
  .priceRow{grid-template-columns: 1fr; gap:6px}
  .priceRow.head{display:none}
  /* Pricing cards: more engaging + centered prices on mobile */
  .priceRow{padding:16px; border-radius:22px}
  .priceRow .type{font-size:18px}
  .priceRow .center{text-align:center}
  .priceRow .price{font-size:22px}
  .priceRow .btn{width:100%; justify-content:center}

  /* Quick discussion strip: make icons consistent and non-overlapping */
  /* Quick discussion: actions align neatly on mobile */
  .ctaStrip{flex-direction:column; align-items:flex-start; gap:12px}
  .ctaStrip__actions{width:100%; justify-content:flex-start; gap:10px}
  .ctaStrip__actions .iconBtn{width:40px; height:40px}
  .ctaStrip__actions .btn{width:100%; justify-content:center}
}

/* Sticky Bottom Bar (mobile-first). WhatsApp must be LEFT. */
.stickyBar{position:fixed; left:0; right:0; bottom:0; z-index:200; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); background:var(--brand); border-top:1px solid rgba(255,255,255,.14)}
.stickyBar__inner{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; max-width:1100px; margin:0 auto}
.stickyBar__btn{display:flex; align-items:center; justify-content:center; gap:12px; height:56px; border-radius:18px; font-weight:700; text-decoration:none; border:1px solid rgba(255,255,255,.16); min-width:0}
.stickyBar__text{font-size:16px; line-height:1; white-space:nowrap}
.stickyBar__btn--wa{background:rgba(57,181,74,.20); color:#eaffef; border-color:rgba(57,181,74,.35)}
.stickyBar__btn--call{background:rgba(255,255,255,.10); color:#fff}
.stickyBar__btn--primary{background:rgba(255,255,255,.18); color:#fff}
.stickyBar__btn--primary:hover{background:rgba(255,255,255,.24)}
.stickyBar__icon{display:inline-flex; align-items:center; justify-content:center}
.stickyBar__icon svg{width:20px; height:20px; fill:currentColor; display:block; margin-top:1px}
.stickyBar__icon{width:22px; height:22px; display:flex; align-items:center; justify-content:center}

@media (min-width: 981px){
  .stickyBar{display:none}
}

@media (max-width: 420px){
  .header__inner{height:58px}
  .logoMark{width:148px}
  .header__right{gap:8px}
  .iconBtn{width:38px; height:38px; border-radius:14px}
  .iconBtn svg{width:19px; height:19px}
  .hero__title{font-size:34px; line-height:1.02}
  .hero__sub{font-size:15px}
  .btn{height:46px}
  .stickyBar__inner{grid-template-columns: 1fr 1fr 1fr}
}


/* WhatsApp outline icon styling (force white on dark/green backgrounds) */
.waIcon{
  width:22px; height:22px;
  display:block;
  filter: brightness(0) invert(1);
}
.waIcon--hdr{width:22px;height:22px;}
.waIcon--sticky{width:22px;height:22px;}

/* Full width CTA strip */
.ctaStrip--full{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* Payment plan cards equal sizing */
.payCard{min-height:88px;}
.payCard > div:last-child{display:flex; flex-direction:column; justify-content:center;}
.payIcon{flex: 0 0 44px;}

/* Sticky bottom bar: equal buttons and smaller height (keep side gaps on all devices) */
.stickyBar{
  padding-top:8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.stickyBar__inner{gap:10px;}
.stickyBar__btn{
  flex:1 1 0;
  min-width:0;
  height:52px;
  border-radius:18px;
  padding:10px 10px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.stickyBar__btn--call,.stickyBar__btn--primary,.stickyBar__btn--wa{flex:1 1 0 !important;}
.stickyBar__text{font-size:13px; font-weight:700; line-height:1;}
.stickyBar__icon svg, .stickyBar__icon img{width:22px;height:22px; display:block;}

/* Modal popup side gap on mobile */
.modal__dialog{
  width: min(520px, calc(100vw - 28px));
  margin: 14px auto;
}
.modal{padding: 14px;}

/* Honeypot hidden */
.hpField{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important; height:1px !important;
  opacity:0 !important;
}

/* --- Final content polish (NO layout changes) --- */
/* RERA note under submit button (all forms) */
.reraNote{
  margin-top:10px;
  font-size:11px;
  line-height:1.3;
  opacity:.85;
}

/* Overview subtext slightly smaller for smoother look */
#overview .splitCard__text p{font-size:15px; line-height:1.65;}
@media (max-width: 768px){
  #overview .splitCard__text p{font-size:14px; line-height:1.7;}
}

/* Payment plan headings: reduce on mobile so nothing cuts (card size unchanged) */
@media (max-width: 520px){
  .payCard b{font-size:13px; line-height:1.2;}
  .payCard span{font-size:12px; line-height:1.35;}
}

/* Amenities: icon boxes + icons same size, text slightly smaller, aligned */
.amenCard{align-items:center;}
.amenIcon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px; /* emoji icon size */
  line-height:1;
}
.amenCard b{font-size:13px; line-height:1.3;}

/* Highlights list slightly smaller */
#highlights .bullets li{font-size:14px; line-height:1.55;}
@media (max-width: 768px){
  #highlights .bullets li{font-size:13px;}
}

/* Contact: center the Get In Touch block like reference */
.contactCard__left{
  display:flex;
  align-items:center;
  justify-content:center;
}
.contactTitle{align-items:center; text-align:center;}


/* Full-width Video Section */
.videoFull{width:100%}
.videoEmbed{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:22px;
  overflow:hidden;
  box-shadow: var(--shadow2);
  background:#000;
}
.videoEmbed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* iOS autoplay fallback hint (hidden unless autoplay is blocked) */
.videoTapHint{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  background:rgba(0,0,0,.55);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.videoEmbed.is-blocked .videoTapHint{ opacity:1; }

/* Westin Difference Full-width Banner */
.fullBannerSection{padding:0}
.fullBanner{position:relative;width:100%;min-height:260px;background-size:cover;background-position:center}
.fullBanner__overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center}
.fullBanner__content{color:#fff;padding:28px 0}
.fullBanner__kicker{font-size:12px;letter-spacing:1.4px;opacity:.9}
.fullBanner__title{margin:8px 0 10px;font-size:34px;line-height:1.1}
.fullBanner__sub{max-width:720px;font-size:14px;line-height:1.6;opacity:.95;margin:0 0 14px}
@media(max-width:768px){
  .fullBanner{min-height:220px}
  .fullBanner__title{font-size:26px}
}

/* MP4 video element inside the embed wrapper */
.videoEmbed .siteVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.videoSub{font-size:14px;line-height:1.65;opacity:.9}
@media(max-width:768px){
  .videoSub{font-size:13px;}
}


/* ===== FINAL CONTENT TUNING (no layout change) ===== */
.splitCard__text .overviewText{
  font-size:15px;
  line-height:1.7;
  letter-spacing:.1px;
}
.splitCard__text .overviewText + .overviewText{ margin-top:12px; }

@media (max-width: 768px){
  .splitCard__text .overviewText{ font-size:14px; line-height:1.75; }
}

/* Video section typography */
#video-tour .sectionHead h2{ font-size:26px; line-height:1.2; }
#video-tour .videoSub{ font-size:13px; line-height:1.6; max-width:820px; margin-left:auto; margin-right:auto; }

@media (max-width: 768px){
  #video-tour .sectionHead h2{ font-size:20px; }
  #video-tour .videoSub{ font-size:12px; }
}

/* Westin difference banner subtext smaller */
.fullBanner__sub{ font-size:13px; line-height:1.55; }


/* Consultants section */
.h2Sub{display:block;font-size:.62em;font-weight:700;opacity:.9;margin-top:6px}
.smallText{font-size:13px;line-height:1.6;max-width:920px;margin:10px auto 0;opacity:.9}

/* Consultants: role box (left) + company pill (right) + logo (below pill) */
.consultList{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
@media(min-width:768px){.consultList{grid-template-columns:1fr 1fr;gap:14px}}

.consultRow{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.06);
  border-radius:20px;
  padding:14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.section--alt .consultRow{background:rgba(255,255,255,.65)}

@media (hover:hover){
  .consultRow:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.14);
  }
}

.roleBox{
  flex:0 0 110px;
  max-width:110px;
  border-radius:14px;
  padding:12px 10px;
  background: linear-gradient(180deg, rgba(56,101,86,.18), rgba(56,101,86,.10));
  border:1px solid rgba(56,101,86,.24);
  font-weight:900;
  letter-spacing:.02em;
  font-size:13px;
  line-height:1.15;
  color:var(--ink);
  text-align:center;
}

.consultMeta{flex:1;min-width:0}
.companyPill{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(56,101,86,.95);
  color:#fff;
  font-weight:800;
  font-size:13px;
  line-height:1;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

.companyLogo{
  margin-top:10px;
  width:120px;
  height:44px;
  border-radius:12px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.06);
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.companyLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.95;
}

.consultDesc{margin-top:8px;font-size:12.5px;line-height:1.35;opacity:.85;font-weight:500}

@media(max-width:520px){
  .roleBox{flex-basis:96px;max-width:96px;font-size:12px;padding:11px 8px}
  .companyPill{font-size:12px;padding:8px 10px}
  .companyLogo{width:112px;height:42px}
}

/* Consultants section polish (no layout change) */
#consultants .sectionHead h2{ font-size:28px; line-height:1.15; }
#consultants .sectionSub{ max-width:900px; margin-left:auto; margin-right:auto; }
@media (max-width: 768px){
  #consultants .sectionHead h2{ font-size:22px; }
}

/* Video: add breathing space between copy and player */
#video-tour .sectionHead{ margin-bottom:18px; }

/* Progress (construction update) spacing + typography on mobile */
#progress .sectionHead{ margin-bottom:14px; }
#progress .videoEmbed{ margin-top:12px; }
#progress .sectionHead h2{ font-size:26px; line-height:1.18; }
#progress .sectionHead p{ max-width:860px; margin-left:auto; margin-right:auto; }
@media (max-width: 768px){
  #progress .sectionHead h2{ font-size:20px; }
  #progress .sectionHead p{ font-size:12.5px; line-height:1.55; }
  #progress .videoEmbed{ margin-top:10px; }
}