/* ==========================================================================
   Runwal theme — matches runwalenterprises.com/projects-detail/7-mahalaxmi
   Loaded AFTER style.css. Only colours, fonts, borders and button styling
   change here; layout, content, images and icons are untouched.

   Palette : gold #aa8a4b · cream #f1e8d5 · white · black · greys #4d4d4d / #595959
   Type    : headings "Cormorant Garamond" 400 · body & buttons "Jost"
   ========================================================================== */

:root {
  --fontPrimary: #aa8a4b;      /* gold accent */
  --fontSecondary: #121111;    /* body text */
  --bgColorPrimary: #ffffff;   /* page / section background */
  --bgColorSecondary: #f1e8d5; /* cream panels */
  --buttonTextColor: #aa8a4b;
  --buttonBodyColor: transparent;
  --bodyColor: #ffffff;

  --rw-gold: #aa8a4b;
  --rw-gold-dark: #8f7238;
  --rw-cream: #f1e8d5;
  --rw-ink: #000000;
  --rw-grey: #040404;
  --rw-line: #e4dccb;
  --rw-head: "Cormorant Garamond", Georgia, serif;
  --rw-body: "Jost", system-ui, -apple-system, sans-serif;
}

/* ---------- Typography ---------- */
* { font-family: var(--rw-body); }
body { color: var(--fontSecondary); font-weight: 400; line-height: 1.4; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-variant: lining-nums; }

/* Section headings: large Cormorant in the Runwal gold */
.overviewTitle,
.highlightsTitle,
.amenitiesTitle,
.price-title,
.floorPlanSectionTitle,
.galleryTitle,
.map-title,
.aboutSection .floorPlanSectionTitle,
.emiSectionTitle {
  font-family: var(--rw-head);
  font-weight: 500;
  color: var(--rw-gold);
  background: none;
  -webkit-text-fill-color: var(--rw-gold);
  letter-spacing: 0;
  line-height: 1.15;
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
}
.highlightsTitle { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }

/* Gold rule either side of headings (kept from the template, re-coloured) */
.amenitiesTitle::before, .amenitiesTitle::after,
.galleryTitle::before, .galleryTitle::after,
.highlightsTitle::before, .highlightsTitle::after,
.aboutSection .floorPlanSectionTitle::before, .aboutSection .floorPlanSectionTitle::after,
.quoteTitle::before, .quoteTitle::after { background-color: var(--rw-gold); }

/* Banner / hero panel */
.bannerContentSection { background: var(--rw-cream); color: var(--fontSecondary); }
.bannerMainTitle {
  font-family: var(--rw-head);
  font-weight: 600;
  background: none;
  color: var(--rw-gold);
  -webkit-text-fill-color: var(--rw-gold);
  letter-spacing: .5px;
}
.bannerIntroText, .bannerSubtitleText, .bannerPropertyDescription { color: var(--fontSecondary); }
.bannerIntroText:first-child {
  font-family: var(--rw-head);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rw-gold);
  letter-spacing: 1px;
}
.bannerPrice {
  font-family: var(--rw-head);
  font-weight: 600;
  background: none;
  color: var(--rw-gold);
  -webkit-text-fill-color: var(--rw-gold);
}
.bannerSubtitleText::before, .bannerSubtitleText::after { background-color: var(--rw-gold); }

/* Forms */
.quoteTitle {
  font-family: var(--rw-head);
  font-weight: 600;
  background: none;
  color: var(--rw-gold);
  -webkit-text-fill-color: var(--rw-gold);
}
.quoteSubTitle { color: var(--rw-grey); }
.quoteInput, .quotePhoneInput, .quoteSelect {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  color: var(--rw-ink);
}
.quoteInput:focus, .quotePhoneInput:focus, .quoteSelect:focus {
  border-color: var(--rw-gold);
  box-shadow: 0 0 0 3px rgba(170, 138, 75, .15);
}
.quoteCheckboxWrapper { color: var(--rw-grey); }
.quoteCheckboxWrapper input[type="checkbox"] { accent-color: var(--rw-gold); }
.quoteCheckboxWrapper a { color: var(--rw-gold); }
.quotePopupContent { background: #fff; border-radius: 0; border-top: 3px solid var(--rw-gold); }

/* ---------- Buttons: square, solid #aa8a4b with white text; slightly darker on hover ---------- */
.overviewBrochureButton,
.amenitiesDownloadBtn,
.galleryDownloadBtn,
.floorPlanCta,
.map-cta,
.requestButton,
.loanBtn,
.price-get-details,
.m-cta-primary {
  font-family: var(--rw-body);
  background: var(--rw-gold);
  color: #fff;
  border: 2px solid var(--rw-gold);
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color .3s linear, border-color .3s linear;
}
.overviewBrochureButton:hover,
.amenitiesDownloadBtn:hover,
.galleryDownloadBtn:hover,
.floorPlanCta:hover,
.map-cta:hover,
.requestButton:hover,
.loanBtn:hover,
.price-get-details:hover,
.m-cta-primary:hover {
  background: var(--rw-gold-dark);
  border-color: var(--rw-gold-dark);
  color: #fff;
  transform: none;
  box-shadow: none;
}
/* Runwal buttons are calm — drop the template's glossy "shine" sweep */
.map-cta::after, .amenitiesDownloadBtn::after, .floorPlanCta::after,
.overviewButton::after, .price-get-details::after, .galleryDownloadBtn::after,
.requestButton::after, .overviewBrochureButton::after, .quoteSubmit::after { animation: none; display: none; }

/* Primary form submit: solid gold */
.quoteSubmit {
  font-family: var(--rw-body);
  background: var(--rw-gold);
  color: #fff;
  border: 2px solid var(--rw-gold);
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.quoteSubmit:hover { background: var(--rw-gold-dark); border-color: var(--rw-gold-dark); transform: none; box-shadow: none; }

/* Button on top of floor-plan images */
.floorPlanButton,
.floorPlanButton:hover {
  background: var(--rw-gold);
  color: #fff;
  border: 1px solid var(--rw-gold);
  border-radius: 0;
  font-family: var(--rw-body);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.floorPlanButton:hover { background: var(--rw-gold-dark); border-color: var(--rw-gold-dark); color: #fff; box-shadow: none; }

/* Round carousel / banner arrows */
.bannerNav { background-color: #fff; border: 1px solid var(--rw-gold); }
.bannerNav:hover { box-shadow: none; background-color: var(--rw-cream); }

/* ---------- Header: white, frosted, soft shadow (Runwal header) ---------- */
.headerContainer {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rw-line);
  box-shadow: 0 0 12px rgba(0, 0, 0, .08);
}
.headerLink { color: var(--rw-ink); font-family: var(--rw-body); font-weight: 400; }
.headerLink:hover { color: var(--rw-gold); }
.burgerMenu span { background-color: var(--rw-ink); }
.headerContact {
  background: #aa8a4b;
  color: #fff;
  border: 2px solid var(--rw-gold);
  border-radius: 0;
  font-family: var(--rw-body);
  letter-spacing: 1px;
}
.headerContact:hover { background: var(--rw-gold-dark); border-color: var(--rw-gold-dark); color: #fff; transform: none; }
.headerWhatsapp { border-radius: 0; font-family: var(--rw-body); letter-spacing: 1px; }

/* ---------- Sections ---------- */
.bannerSectionMain, .bannerImageSection { background: #fff; }
.bannerCarouselContainer { border-bottom: 1px solid var(--rw-line); }
/* cream bands between white sections, like Runwal's secondary-bg blocks */
.floorPlanSection, .aboutSection { background: var(--rw-cream); }

.highlightsList li { color: var(--rw-grey); }
.highlightsList li::before { color: var(--rw-gold); }
.readMoreLink { color: var(--rw-gold); }

/* ---------- Price cards: "Signature Residence" card ----------
   Cream card with a thin gold inner frame (like a luxury invitation),
   Cormorant typology title with a ◆ divider and a gold price.
   On hover the cream deepens slightly and the card lifts.
   Pure CSS over the template rows, so every API data-field stays in place.
   Row 1 Typology · Row 2 Carpet Area · Row 3 Price · Row 4 Price Sheet button */
.price-container { gap: 26px; }
.price-card {
  position: relative;
  background: var(--rw-cream);
  border: 1px solid var(--rw-gold);
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  backdrop-filter: none;
  cursor: pointer;
  transition: background-color .45s ease, transform .45s ease, box-shadow .45s ease;
}
/* inner gold frame */
.price-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  height: auto;
  background: none;
  border: 1px solid rgba(170, 138, 75, .45);
  pointer-events: none;
  z-index: 1;
  transition: inset .45s ease, border-color .45s ease;
}
.price-card:hover {
  background: #e8dbbf;
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(170, 138, 75, .25);
  border-color: var(--rw-gold);
}
.price-card:hover::before { inset: 14px; border-color: rgba(170, 138, 75, .8); }

.price-details {
  position: relative;
  z-index: 2;
  padding: 34px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  color: var(--fontSecondary);
}
.price-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 10px 0;
  line-height: 1.3;
  border: 0;
}
.price-label {
  font-family: var(--rw-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rw-grey);
  opacity: 1;
  transition: color .45s ease;
}
.price-value {
  font-family: var(--rw-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--rw-ink);
  text-align: center;
  transition: color .45s ease;
}

/* Row 1 — typology title + ◆ ornament */
.price-row:nth-child(1) { padding: 0 0 6px; }
.price-row:nth-child(1) .price-label { font-family: var(--rw-head); font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--rw-gold); }
.price-row:nth-child(1) .price-value { 
  /* font-family: var(--rw-head);  */
  font-size: 32px; font-weight: 500; line-height: 1.1; min-height: auto; display: flex; align-items: center; justify-content: center; }
.price-row:nth-child(1)::after {
  content: "\25C6";
  display: block;
  width: 110px;
  margin: 14px auto 4px;
  font-size: 8px;
  line-height: 9px;
  color: var(--rw-gold);
  background:
    linear-gradient(var(--rw-gold), var(--rw-gold)) 0 50% / 44px 1px no-repeat,
    linear-gradient(var(--rw-gold), var(--rw-gold)) 100% 50% / 44px 1px no-repeat;
}

/* Row 2 — carpet area */
.price-row:nth-child(2) { padding-top: 0px; }

/* Row 3 — price in large gold Cormorant */
.price-row:nth-child(3) .price-value,
.price-value.highlight {
  /* font-family: var(--rw-head); */
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--rw-gold);
  white-space: nowrap;
  text-wrap: wrap;
}

/* Row 4 — solid gold button; "Price Sheet" label kept for screen readers */
.price-row:nth-child(4) { margin-top: auto; padding: 18px 0 0; }
.price-row:nth-child(4) .price-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.price-row:nth-child(4) .price-value { width: 100%; }
.price-card .price-get-details {
  width: 100%;
  padding: 13px 20px;
  font-size: 14px;
  letter-spacing: 2px;
  background: var(--rw-gold);
  color: #fff;
  border: 1px solid var(--rw-gold);
}
.price-card .price-get-details::after { content: "  \2192"; display: inline; animation: none; position: static; background: none; width: auto; height: auto; }
.price-card:hover .price-get-details { background: var(--rw-gold-dark); border-color: var(--rw-gold-dark); color: #fff; }

/* Desktop: all four residences on one row */
@media (min-width: 1025px) {
  .price-container { grid-template-columns: repeat(auto-fit, minmax(230px, 255px)); }
}
/* Phones: two compact cards per row */
@media (max-width: 767px) {
  .price-container { gap: 12px; }
  .price-card::before { inset: 6px; }
  .price-card:hover::before { inset: 8px; }
  .price-details { padding: 20px 12px 16px; }
  .price-row { padding: 7px 0; }
  .price-label { font-size: 9px; letter-spacing: 1.2px; }
  .price-value { font-size: 14px; }
  .price-row:nth-child(1) .price-label { font-size: 10px; letter-spacing: 1.2px; }
  .price-row:nth-child(1) .price-value { font-size: 18px; min-height: auto; }
  .price-row:nth-child(1)::after { width: 70px; margin-top: 5px; background-size: 26px 1px, 26px 1px; }
  .price-row:nth-child(3) .price-value, .price-value.highlight { font-size: 18px;text-wrap: wrap; }
  .price-row:nth-child(4) { padding-top: 5px;text-wrap: wrap; }
  .price-card .price-get-details { padding: 10px 4px; font-size: 10px; letter-spacing: 1px; }
}

/* Floor plan cards on the cream band */
.floorPlanCard { border-radius: 0; background: #fff; }
.floorPlanCard:hover { border-color: var(--rw-gold); box-shadow: 0 12px 30px rgba(170, 138, 75, .18); }
.floorPlanCard::before { background: none; }

/* Amenity / gallery captions keep white on image, set in Cormorant */
.amenitiesTextOverlay, .amenitiesLightboxTitle { font-family: var(--rw-head); font-weight: 600; letter-spacing: .5px; }

/* ---------- Footer ---------- */
.footerContainer { background: var(--rw-cream); color: var(--rw-grey); border-top: 1px solid var(--rw-line); }
.footerAdvertiser, .footerProjectNumber, .footerRegistration, .footerDisclaimer, .footerLinks p { color: var(--rw-grey); }
.footerDisclaimer strong { color: var(--rw-gold); }
.footerPrivacy, .footerTerms, .reraLink,
.footerPrivacy:hover, .footerTerms:hover, .reraLink:hover { color: var(--rw-gold); }

/* ---------- Mobile bottom bar & side brochure tab ---------- */
.mobileBottomBar { background-color: #fff; border-top: 1px solid var(--rw-line); }
.mobileBottomBar a { color: var(--rw-ink); font-family: var(--rw-body); letter-spacing: .5px; }
.callButton svg, .pdfButton svg { fill: var(--rw-gold); }
.callButton, .pdfButton { border-right: 1px solid var(--rw-line); }
.sidedownloadBtn { background-color: var(--rw-gold); border: 1px solid var(--rw-gold); color: #fff; }

/* "EOI Open Now" badge — the template colours it with the button variables
   inverted, so set it explicitly: white text on a square gold badge */
.bannerOffer { background: var(--rw-gold); border: 1px solid var(--rw-gold); border-radius: 0; }
.bannerOffer:hover { box-shadow: 0 6px 18px rgba(170, 138, 75, .35); }
.offerText { color: #fff; font-family: var(--rw-body); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; }

/* Location dropdowns: white inside, gold accents */
.map-dropdown { background: #fff; border-color: var(--rw-line); }
.map-dropdown-content { background-color: #fff; }
.map-dropdown-btn.active { background: #fff; }
.connectivity-item { border-bottom-color: var(--rw-line); }
.connectivity-item .time { background: rgba(170, 138, 75, .12); color: var(--rw-gold); }

/* remaining CTAs: brochure tab label + banner "Request Full Video" */
.sidedownloadBtn .btn-text { color: #fff; }
.bannerOverlayBtn {
  background: var(--rw-gold);
  color: #fff;
  border: 2px solid var(--rw-gold);
  border-radius: 0;
  font-family: var(--rw-body);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.bannerOverlayBtn:hover { background: var(--rw-gold-dark); border-color: var(--rw-gold-dark); color: #fff; }

/* Country code shows short ("IN +91"), so the select can be narrower */
.quoteSelect { flex: 0 0 96px; max-width: 96px; }
.quotePopup .quoteSelect { padding-left: 10px; padding-right: 6px; }

/* ==========================================================================
   Hero panel — premium redesign (CSS only; markup, data-fields and form
   hooks unchanged). Warm cream-gold ground, thin gold inner frame,
   gold-gradient title, ribbon badge and a lifted white form card.
   ========================================================================== */
.bannerContentSection {
  position: relative;
  padding: 30px 32px 26px;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(120% 55% at 50% 0%, #fbf7ee 0%, rgba(251, 247, 238, 0) 70%),
    linear-gradient(180deg, #f5eddc 0%, #f1e8d5 55%, #eadcbf 100%);
  isolation: isolate;
}
.bannerContentSection::before {          /* inner gold frame */
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(170, 138, 75, .45);
  pointer-events: none;
  z-index: -1;
}

/* Intro: eyebrow → title → ornament */
.bannerIntroSection { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; letter-spacing: 0; }
.bannerSubtitleText {
  order: -1;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-family: var(--rw-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rw-gold);
}
.bannerSubtitleText::before,
.bannerSubtitleText::after {
  content: "";
  position: static;
  transform: none;
  display: inline-block;
  width: 22px;
  height: 1px;
  background-color: var(--rw-gold);
}
.bannerMainTitle {
  font-family: var(--rw-head);
  font-weight: 600;
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.05;
  letter-spacing: .01em;
  background: linear-gradient(120deg, #8a6c33 0%, #c6a462 42%, #aa8a4b 62%, #8a6c33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bannerIntroSection::after {             /* ◆ ornament under the title */
  content: "\25C6";
  display: block;
  width: 120px;
  margin-top: 6px;
  font-size: 8px;
  line-height: 9px;
  text-align: center;
  color: var(--rw-gold);
  background:
    linear-gradient(var(--rw-gold), var(--rw-gold)) 0 50% / 48px 1px no-repeat,
    linear-gradient(var(--rw-gold), var(--rw-gold)) 100% 50% / 48px 1px no-repeat;
}

/* Highlight chip ("Panoramic Skyline and Sea Views") */
.bannerHighlightChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0 auto 14px;
  padding: 7px 16px;
  background: #fff;
  border: 1px solid rgba(170, 138, 75, .55);
  border-radius: 0;
  box-shadow: 0 6px 16px rgba(170, 138, 75, .12);
}
.bannerHighlightChip::before { content: "\2726"; color: var(--rw-gold); font-size: 11px; }
.bannerHighlightChip p {
  margin: 0;
  font-family: var(--rw-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rw-ink);
}

/* Configuration line + price */
.bannerDescriptionSection { margin-bottom: 12px; }
.bannerPropertyDescription {
  font-family: var(--rw-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .4px;
  line-height: 1.5;
  color: var(--rw-grey);
}
.bannerPropertyDescription b { color: var(--rw-ink); font-weight: 600; }
.bannerPrice {
  margin-top: 4px;
  font-family: var(--rw-head);
  font-size: clamp(28px, 2.3vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--rw-gold);
  -webkit-text-fill-color: var(--rw-gold);
  background: none;
}

/* EOI ribbon with a slow shimmer (replaces the bouncing pulse) */
.bannerOfferSection:not(.bannerHighlightChip) { margin: 0 0 16px; text-align: center; }
.bannerOffer {
  display: inline-flex;
  width: auto;
  align-items: center;
  padding: 9px 26px;
  background: linear-gradient(120deg, #9a7b3f 0%, #aa8a4b 50%, #9a7b3f 100%);
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 22px rgba(170, 138, 75, .32);
  animation: none;
  overflow: hidden;
  position: relative;
}
.bannerOffer::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  animation: rwShimmer 3.2s ease-in-out infinite;
}
@keyframes rwShimmer { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.bannerOffer:hover { transform: none; box-shadow: 0 12px 26px rgba(170, 138, 75, .4); }
.offerText {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #fff;
}
.offerText::before, .offerText::after { content: "\25C6"; font-size: 7px; vertical-align: 2px; margin: 0 10px; opacity: .85; }

/* Banner form — simple & clean: sits on the cream panel, underline fields */
.bannerContentSection .quoteForm {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 6px 0;
}
.bannerContentSection .quoteTitle {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 0;
  padding: 0;
}
.bannerContentSection .quoteTitle::before,
.bannerContentSection .quoteTitle::after { display: none; }
.bannerContentSection .quoteSubTitle {
  font-family: var(--rw-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: none;
  color: var(--rw-grey);
  margin: 2px 0 10px;
}
.bannerContentSection .quoteInput,
.bannerContentSection .quotePhoneInput,
.bannerContentSection .quoteSelect {
  height: 40px;
  margin-bottom: 12px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(89, 89, 89, .35);
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  color: var(--rw-ink);
}
.bannerContentSection .quoteInput::placeholder,
.bannerContentSection .quotePhoneInput::placeholder { color: #8a8a8a; }
.bannerContentSection .quoteInput:focus,
.bannerContentSection .quotePhoneInput:focus,
.bannerContentSection .quoteSelect:focus {
  border-bottom-color: var(--rw-gold);
  box-shadow: none;
  background: transparent;
}
.bannerContentSection .quoteCheckboxWrapper { margin: 2px 0 12px; font-size: 10px; }
.bannerContentSection .quoteSubmit { letter-spacing: 2px; padding: 12px; margin-top: 0; }

/* Stacked hero (tablet / phone): fixed sizes instead of vw */
@media (max-width: 1024px) {
  .bannerContentSection { padding: 34px 22px 26px; }
  .bannerContentSection::before { inset: 8px; }
  .bannerMainTitle { font-size: 32px; }
  .bannerPrice { font-size: 30px; }
  .bannerPropertyDescription { font-size: 14px; }
  .bannerContentSection .quoteTitle { font-size: 20px; }
}

/* ==========================================================================
   Shine sweep on every gold (#aa8a4b) CTA.
   Drawn as a background-image layer (not ::after) so it never clashes with
   the arrows/pseudo-elements some buttons already use. Hover darkens the
   gold but keeps the sweep. Off for users who prefer reduced motion.
   ========================================================================== */
.headerContact,
.quoteSubmit,
.overviewBrochureButton,
.amenitiesDownloadBtn,
.galleryDownloadBtn,
.floorPlanCta,
.map-cta,
.requestButton,
.loanBtn,
.price-get-details,
.m-cta-primary,
.floorPlanButton,
.sidedownloadBtn,
.bannerOverlayBtn,
.price-card .price-get-details {
  background-color: var(--rw-gold);
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: rwBtnShine 3.4s ease-in-out infinite;
}
.headerContact:hover,
.quoteSubmit:hover,
.overviewBrochureButton:hover,
.amenitiesDownloadBtn:hover,
.galleryDownloadBtn:hover,
.floorPlanCta:hover,
.map-cta:hover,
.requestButton:hover,
.loanBtn:hover,
.price-get-details:hover,
.m-cta-primary:hover,
.floorPlanButton:hover,
.sidedownloadBtn:hover,
.bannerOverlayBtn:hover,
.price-card:hover .price-get-details {
  background-color: var(--rw-gold-dark);
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
}
@keyframes rwBtnShine {
  0%        { background-position: 150% 0; }
  55%, 100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .headerContact, .quoteSubmit, .overviewBrochureButton, .amenitiesDownloadBtn,
  .galleryDownloadBtn, .floorPlanCta, .map-cta, .requestButton, .loanBtn,
  .price-get-details, .m-cta-primary, .floorPlanButton, .sidedownloadBtn,
  .bannerOverlayBtn, .bannerOffer::after { animation: none; }
}

/* Hero film sits in its frame; icons keep their proportions */
.bannerImageContainer { position: relative; }
.bounce, .pdf-icon, .popupLogo { object-fit: contain; }

/* ==========================================================================
   Accessibility: WCAG AA text contrast.
   #aa8a4b stays for buttons and large headings on white (3.26:1 ✓ large text).
   Small gold text → #765a28 (≥4.5:1 on white, cream and hover cream).
   Large gold text on cream → #8a6c33 (4.04:1 ✓ large text).
   ========================================================================== */
:root { --rw-gold-text: #765a28; --rw-gold-large: #8a6c33; }

.readMoreLink,
.quoteCheckboxWrapper a,
.footerPrivacy, .footerTerms, .reraLink,
.footerPrivacy:hover, .footerTerms:hover, .reraLink:hover,
.footerDisclaimer strong,
.emi-summary-label,
.map-dropdown-btn span,
.connectivity-item .time,
.price-row:nth-child(1) .price-label,
.bannerSubtitleText,
.bannerIntroText:first-child { color: var(--rw-gold-text); }
.bannerSubtitleText::before, .bannerSubtitleText::after { background-color: var(--rw-gold-text); }

/* large gold text sitting on cream */
.floorPlanSection .floorPlanSectionTitle,
.aboutSection .floorPlanSectionTitle { color: var(--rw-gold-large); -webkit-text-fill-color: var(--rw-gold-large); }
.bannerPrice { color: var(--rw-gold-large); -webkit-text-fill-color: var(--rw-gold-large); }
/* card prices drop to 16px on phones, so they use the small-text gold (5.28:1 on cream) */
.price-row:nth-child(3) .price-value,
.price-value.highlight { color: var(--rw-gold-text); -webkit-text-fill-color: var(--rw-gold-text); }
/* style.css forces .readMoreLink with !important, so match it */
.readMoreLink, .readMoreLink:hover { color: var(--rw-gold-text) !important; }

/* WhatsApp: slightly deeper green so white text passes 4.5:1 */
.whatsappButton, .headerWhatsapp { background: #11843f !important; }

/* ==========================================================================
   CONSISTENT THEME SYSTEM
   One background rhythm: sections strictly alternate white ↔ theme cream,
   and cards always contrast with their section (cream cards on white,
   white cards on cream). One vertical spacing scale for every section.
   Order: Overview W · Amenities C · Price W · Floor Plan C · Gallery W ·
          Location C · Virtual Tour W · EMI C · About W · Footer C
   ========================================================================== */
:root { --rw-band: #f1e8d5; --rw-section-y: 72px; --rw-title-gap: 40px; }
@media (max-width: 1024px) { :root { --rw-section-y: 56px; --rw-title-gap: 30px; } }
@media (max-width: 767px)  { :root { --rw-section-y: 44px; --rw-title-gap: 24px; } }

/* --- backgrounds --- */
.overviewSection,
.priceSection,
.gallerySection,
.virtualTourSection,
.aboutSection { background: #fff; }

.amenitiesSection,
.floorPlanSection,
.mapSection,
#m-emi-calculator { background: var(--rw-band); }

.footerContainer { background: var(--rw-band); border-top: 1px solid rgba(170, 138, 75, .35); }

/* --- one spacing scale --- */
.overviewSection,
.amenitiesSection,
.priceSection,
.floorPlanSection,
.gallerySection,
.mapSection,
.virtualTourSection,
.aboutSection,
#m-emi-calculator { padding-top: var(--rw-section-y); padding-bottom: var(--rw-section-y); }

.overviewTitle,
.amenitiesTitle,
.price-title,
.floorPlanSectionTitle,
.galleryTitle,
.map-title,
.aboutSection .floorPlanSectionTitle { margin-top: 0; margin-bottom: var(--rw-title-gap); }
.price-heading-container { margin-bottom: 0; }
.virtualTourSection .map-title { margin-top: 0; }

/* headings sitting on cream use the deeper large-text gold (contrast) */
.amenitiesSection .amenitiesTitle,
.floorPlanSection .floorPlanSectionTitle,
.mapSection .map-title,
#m-emi-calculator h2 { color: var(--rw-gold-large); -webkit-text-fill-color: var(--rw-gold-large); }
/* About is now on white, so it returns to the theme gold */
.aboutSection .floorPlanSectionTitle { color: var(--rw-gold); -webkit-text-fill-color: var(--rw-gold); }

/* --- cards contrast with their section --- */
.floorPlanCard,
.map-dropdown,
.map-image-container { background: #fff; }
.map-image-container { box-shadow: 0 12px 30px rgba(143, 114, 56, .12); }

/* EMI: flat cream band, white calculator card, square theme shapes */
#m-emi-calculator article {
  background: #fff;
  border: 1px solid var(--rw-line);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(143, 114, 56, .12);
}
#m-emi-calculator .emi-panel { background: #fff; }
#m-emi-calculator .emi-input-column { border-color: var(--rw-line); }
#m-emi-calculator .emi-summary-card,
#m-emi-calculator .emi-chart-panel { background: var(--rw-band); border: 1px solid var(--rw-line); border-radius: 0; }
#m-emi-calculator .emi-input-wrap input { background: var(--rw-band); border-radius: 0; }
#m-emi-calculator .m-emi-donut::after { background: var(--rw-band); }

/* --- Virtual tour: proportional 16:9 frame, same width as other content --- */
.tourColumn { max-width: 1100px; margin: 0 auto; }
.videoThumbnail { height: auto; aspect-ratio: 16 / 9; max-height: 620px; }
.tourVideoWrapper { box-shadow: 0 18px 40px rgba(28, 24, 19, .18); border-radius: 0; }
.videoThumbnail, .tourImage { border-radius: 0; }

/* --- square corners everywhere, like the rest of the theme --- */
.amenitiesImageContainer,
.galleryImageContainer,
.floorPlanCard,
.map-dropdown,
.map-image-container,
.overviewImage { border-radius: 0; }
/* small gold label on the white EMI card */
#m-emi-calculator .emi-results-tag { color: var(--rw-gold-text); }

/* ==========================================================================
   Header, mobile menu and mobile bottom bar in the theme cream
   (frosted, with a thin gold hairline) instead of plain white
   ========================================================================== */
.headerContainer {
  background: rgba(241, 232, 213, .94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(170, 138, 75, .45);
  box-shadow: 0 6px 20px rgba(143, 114, 56, .12);
}
.headerLink { color: #2b2418; }
.headerLink:hover { color: var(--rw-gold-text); }

/* burger menu panel on tablet / phone */
@media (max-width: 1024px) {
  .headerNav {
    background: var(--rw-band);
    border-bottom: 1px solid rgba(170, 138, 75, .45);
    box-shadow: 0 16px 30px rgba(143, 114, 56, .15);
  }
  .headerNav .headerLink { border-bottom: 1px solid rgba(170, 138, 75, .18); }
}

/* mobile bottom bar */
.mobileBottomBar {
  background: rgba(241, 232, 213, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(170, 138, 75, .55);
  box-shadow: 0 -6px 18px rgba(143, 114, 56, .14);
}
.mobileBottomBar a { color: #2b2418; }
.callButton, .pdfButton { border-right: 1px solid rgba(170, 138, 75, .35); }

/* ==========================================================================
   GOLD SECTIONS — every content section on #aa8a4b, styled not flat.
   · odd bands: fine diagonal pinstripes · even bands: soft top glow
   · ivory headings (3.13:1, large text ✓) · deep-espresso body (5.42:1 ✓)
   · light cards pop on gold · section CTAs turn ivory (gold would vanish)
   Header, mobile bar and the hero panel stay cream as a light frame.
   ========================================================================== */
:root {
  --rw-sec-gold: #aa8a4b;
  --rw-ivory: #fffaf0;
  --rw-espresso: #1c1813;
}

/* --- the gold bands --- */
.overviewSection,
.amenitiesSection,
.priceSection,
.floorPlanSection,
.gallerySection,
.mapSection,
.virtualTourSection,
#m-emi-calculator,
.aboutSection,
.footerContainer {
  background-color: var(--rw-sec-gold);
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, .35);
  /* text inside the bands: deep espresso instead of grey */
  --fontSecondary: var(--rw-espresso);
  --rw-grey: var(--rw-espresso);
  color: var(--rw-espresso);
}
/* odd: fine diagonal pinstripes */
.overviewSection,
.priceSection,
.gallerySection,
.virtualTourSection,
.aboutSection {
  background-image: repeating-linear-gradient(135deg, rgba(255, 250, 240, .07) 0 1px, transparent 1px 14px);
}
/* even: soft light glow from the top */
.amenitiesSection,
.floorPlanSection,
.mapSection,
#m-emi-calculator {
  background-image: radial-gradient(90% 70% at 50% 0%, rgba(255, 250, 240, .22) 0%, rgba(255, 250, 240, 0) 70%);
}
.footerContainer {
  background-image: linear-gradient(180deg, rgba(255, 250, 240, .10) 0%, rgba(255, 250, 240, 0) 60%);
  border-top: 1px solid rgba(255, 250, 240, .45);
}

/* --- ivory headings + ornaments on gold --- */
.overviewTitle,
.highlightsTitle,
.amenitiesTitle,
.price-title,
.floorPlanSection .floorPlanSectionTitle,
.galleryTitle,
.map-title,
.aboutSection .floorPlanSectionTitle,
.amenitiesSection .amenitiesTitle,
.mapSection .map-title,
.virtualTourSection .map-title {
  color: var(--rw-ivory);
  -webkit-text-fill-color: var(--rw-ivory);
  text-shadow: 0 1px 12px rgba(28, 24, 19, .12);
}
.amenitiesTitle::before, .amenitiesTitle::after,
.galleryTitle::before, .galleryTitle::after,
.highlightsTitle::before, .highlightsTitle::after,
.aboutSection .floorPlanSectionTitle::before, .aboutSection .floorPlanSectionTitle::after,
.overviewTitle::before, .overviewTitle::after,
.price-title::before, .price-title::after,
.floorPlanSectionTitle::before, .floorPlanSectionTitle::after,
.map-title::before, .map-title::after { background-color: var(--rw-ivory); }
/* the EMI heading lives inside the white calculator card — keep it gold */
#m-emi-calculator h2 { color: var(--rw-gold-large); -webkit-text-fill-color: var(--rw-gold-large); text-shadow: none;}
#m-emi-calculator h2::before, #m-emi-calculator h2::after { background-color: var(--rw-gold); }

/* --- body text sitting directly on gold --- */
.overviewSection p, .overviewSection li, .aboutSection p,
.highlightsList li, .footerContainer p { color: var(--rw-espresso); }
.highlightsList li::before { color: var(--rw-ivory); }
.readMoreLink, .readMoreLink:hover { color: var(--rw-espresso) !important; text-decoration: underline; text-underline-offset: 3px; }
.footerPrivacy, .footerTerms, .reraLink,
.footerPrivacy:hover, .footerTerms:hover, .reraLink:hover,
.footerDisclaimer strong { color: var(--rw-espresso); font-weight: 600; }
.aboutSectionQr img { background: #fff; padding: 6px; }

/* --- light cards pop on gold --- */
.price-card { box-shadow: 0 14px 34px rgba(28, 24, 19, .16); }
.floorPlanCard { box-shadow: 0 14px 34px rgba(28, 24, 19, .16); }
.map-dropdown, .map-image-container { box-shadow: 0 10px 26px rgba(28, 24, 19, .14); }
#m-emi-calculator article { box-shadow: 0 22px 48px rgba(28, 24, 19, .2); border-color: rgba(255, 250, 240, .6); }
.overviewImage, .amenitiesImageContainer, .galleryImageContainer, .tourVideoWrapper { box-shadow: 0 16px 40px rgba(28, 24, 19, .22); }

/* --- section CTAs: ivory with deep-gold text (6.8:1), espresso on hover --- */
.overviewBrochureButton,
.amenitiesDownloadBtn,
.floorPlanCta,
.galleryDownloadBtn,
.map-cta,
.requestButton {
  background-color: var(--rw-ivory);
  color: #6f5424;
  border: 1px solid var(--rw-ivory);
  background-image: linear-gradient(110deg, rgba(170, 138, 75, 0) 38%, rgba(170, 138, 75, .28) 50%, rgba(170, 138, 75, 0) 62%);
  box-shadow: 0 10px 24px rgba(28, 24, 19, .18);
}
.overviewBrochureButton:hover,
.amenitiesDownloadBtn:hover,
.floorPlanCta:hover,
.galleryDownloadBtn:hover,
.map-cta:hover,
.requestButton:hover {
  background-color: var(--rw-espresso);
  border-color: var(--rw-espresso);
  color: var(--rw-ivory);
  background-image: linear-gradient(110deg, rgba(255, 250, 240, 0) 38%, rgba(255, 250, 240, .18) 50%, rgba(255, 250, 240, 0) 62%);
}

/* side brochure tab floats over gold bands — give it a dark body so it stays visible */
.sidedownloadBtn { background-color: var(--rw-espresso); border-color: var(--rw-sec-gold); color: var(--rw-ivory); }
.sidedownloadBtn .btn-text { color: var(--rw-ivory); }

/* ==========================================================================
   Dark header, mobile menu and mobile bottom bar (deep espresso + gold)
   ========================================================================== */
.headerContainer {
  background: rgba(28, 24, 19, .97);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(170, 138, 75, .7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.headerLink { color: var(--rw-ivory); }
.headerLink:hover, .headerLink.active { color: #c9a867; }
.burgerMenu span { background-color: var(--rw-ivory); }

@media (max-width: 1024px) {
  .headerNav {
    background: #1c1813;
    border-bottom: 1px solid rgba(170, 138, 75, .7);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .35);
  }
  .headerNav .headerLink { color: var(--rw-ivory); border-bottom: 1px solid rgba(170, 138, 75, .25); }
}

.mobileBottomBar {
  background: rgba(28, 24, 19, .97);
  border-top: 1px solid rgba(170, 138, 75, .7);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .3);
}
.mobileBottomBar a { color: var(--rw-ivory); }
.callButton, .pdfButton { border-right: 1px solid rgba(170, 138, 75, .4); }
.callButton svg, .pdfButton svg { fill: #c9a867; }

/* ==========================================================================
   ONE SURFACE EVERYWHERE — the hero-panel cream gradient on the header,
   mobile menu & bar, every section and the footer. (Supersedes the gold
   sections and the dark header above.) Cards turn white to stand out.
   ========================================================================== */
:root {
  --rw-surface:
    radial-gradient(120% 55% at 50% 0%, #fbf7ee 0%, rgba(251, 247, 238, 0) 70%),
    linear-gradient(180deg, #f5eddc 0%, #f1e8d5 55%, #eadcbf 100%);
  --rw-heading: #8a6c33;      /* deeper theme gold: stays ≥3:1 even on #eadcbf */
  --rw-gold-text: #6f5424;    /* small gold text: ≥4.5:1 across the whole gradient */
}

/* --- the surface --- */
.headerContainer,
.mobileBottomBar,
.overviewSection,
.amenitiesSection,
.priceSection,
.floorPlanSection,
.gallerySection,
.mapSection,
.virtualTourSection,
#m-emi-calculator,
.aboutSection,
.footerContainer {
  background: var(--rw-surface);
  background-color: #f1e8d5;
  --fontSecondary: #4d4d4d;
  --rw-grey: #595959;
  color: #4d4d4d;
}
/* thin gold hairline between sections instead of colour blocks */
.overviewSection, .amenitiesSection, .priceSection, .floorPlanSection,
.gallerySection, .mapSection, .virtualTourSection, #m-emi-calculator,
.aboutSection, .footerContainer {
  box-shadow: none;
  border-top: 1px solid rgba(170, 138, 75, .28);
}

/* header, mobile menu, mobile bar on the light surface */
.headerContainer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(170, 138, 75, .45);
  box-shadow: 0 6px 20px rgba(143, 114, 56, .12);
}
.headerLink { color: #2b2418; }
.headerLink:hover, .headerLink.active { color: var(--rw-gold-text); }
.burgerMenu span { background-color: #2b2418; }
@media (max-width: 1024px) {
  .headerNav {
    background: var(--rw-surface);
    background-color: #f1e8d5;
    border-bottom: 1px solid rgba(170, 138, 75, .45);
    box-shadow: 0 16px 30px rgba(143, 114, 56, .15);
  }
  .headerNav .headerLink { color: #2b2418; border-bottom: 1px solid rgba(170, 138, 75, .2); }
}
.mobileBottomBar { border-top: 1px solid rgba(170, 138, 75, .55); box-shadow: 0 -6px 18px rgba(143, 114, 56, .14); }
.mobileBottomBar a { color: #2b2418; }
.callButton, .pdfButton { border-right: 1px solid rgba(170, 138, 75, .35); }
.callButton svg, .pdfButton svg { fill: var(--rw-gold); }

/* --- headings back to theme gold (deeper shade for contrast) --- */
.overviewTitle, .highlightsTitle, .amenitiesTitle, .price-title,
.floorPlanSection .floorPlanSectionTitle, .galleryTitle, .map-title,
.aboutSection .floorPlanSectionTitle, .amenitiesSection .amenitiesTitle,
.mapSection .map-title, .virtualTourSection .map-title {
  color: var(--rw-heading);
  -webkit-text-fill-color: var(--rw-heading);
  text-shadow: none;
}
.amenitiesTitle::before, .amenitiesTitle::after,
.galleryTitle::before, .galleryTitle::after,
.highlightsTitle::before, .highlightsTitle::after,
.aboutSection .floorPlanSectionTitle::before, .aboutSection .floorPlanSectionTitle::after,
.overviewTitle::before, .overviewTitle::after,
.price-title::before, .price-title::after,
.floorPlanSectionTitle::before, .floorPlanSectionTitle::after,
.map-title::before, .map-title::after { background-color: var(--rw-gold); }

/* --- body text on the light surface --- */
.overviewSection p, .overviewSection li, .aboutSection p,
.highlightsList li, .footerContainer p { color: #4d4d4d; }
.highlightsList li::before { color: var(--rw-gold); }
.readMoreLink, .readMoreLink:hover { color: var(--rw-gold-text) !important; }
.footerPrivacy, .footerTerms, .reraLink,
.footerPrivacy:hover, .footerTerms:hover, .reraLink:hover,
.footerDisclaimer strong { color: var(--rw-gold-text); }

/* --- cards: white so they stand out on cream --- */
.price-card { background: #fff; box-shadow: 0 12px 30px rgba(143, 114, 56, .14); }
.price-card:hover { background: #fbf7ee; }
.price-floor-plan::after { display: none; }
.floorPlanCard, .map-dropdown, .map-image-container { background: #fff; box-shadow: 0 10px 26px rgba(143, 114, 56, .12); }
#m-emi-calculator article { box-shadow: none; border-color: var(--rw-line); }
.overviewImage, .amenitiesImageContainer, .galleryImageContainer, .tourVideoWrapper { box-shadow: 0 14px 34px rgba(143, 114, 56, .2); }

/* --- all section CTAs back to solid #aa8a4b + white text + shine --- */
.overviewBrochureButton, .amenitiesDownloadBtn, .floorPlanCta,
.galleryDownloadBtn, .map-cta, .requestButton, .sidedownloadBtn {
  background-color: var(--rw-gold);
  color: #fff;
  border: 1px solid var(--rw-gold);
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(143, 114, 56, .2);
}
.overviewBrochureButton:hover, .amenitiesDownloadBtn:hover, .floorPlanCta:hover,
.galleryDownloadBtn:hover, .map-cta:hover, .requestButton:hover, .sidedownloadBtn:hover {
  background-color: var(--rw-gold-dark);
  border-color: var(--rw-gold-dark);
  color: #fff;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 62%);
}
.sidedownloadBtn .btn-text { color: #fff; }

/* ==========================================================================
   Location accordion (Seamless Connectivity · Education Hub · Hospitals ·
   Malls & Hotels · Sports Clubs) in the theme style
   ========================================================================== */
.map-dropdown {
  background: #fff;
  border: 1px solid rgba(170, 138, 75, .35);
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(143, 114, 56, .10);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.map-dropdown:hover { background: #fff; border-color: rgba(170, 138, 75, .7); }

.map-dropdown-btn {
  padding: 16px 18px 16px 20px;
  font-family: var(--rw-head);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #2b2418;
  background: #fff;
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.map-dropdown-btn > span:first-child,
.map-dropdown-btn span[data-field] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font-family: inherit;
}
.map-dropdown-btn span[data-field]::before {
  content: "\25C6";
  font-size: 8px;
  color: var(--rw-gold);
}
.map-dropdown-btn:hover { background: #fbf7ee; color: var(--rw-gold-text); }

/* open state: cream gradient, gold edge, deep-gold title */
.map-dropdown-btn.active {
  background: linear-gradient(180deg, #f5eddc 0%, #f1e8d5 100%);
  color: var(--rw-gold-text);
  box-shadow: inset 3px 0 0 var(--rw-gold);
  font-weight: 600;
}

/* arrow inside a thin gold circle; fills gold when open */
.map-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(170, 138, 75, .6);
  border-radius: 50%;
  background: #fff;
  transition: transform .35s ease, background-color .3s ease, border-color .3s ease;
}
.map-arrow i { display: inline-flex; line-height: 0; }
.map-arrow .ri-arrow-down-s-line::before { background-color: var(--rw-gold); width: 18px; height: 18px; }
.map-arrow.active { background: var(--rw-gold); border-color: var(--rw-gold); transform: rotate(180deg); }
.map-arrow.active .ri-arrow-down-s-line::before { background-color: #fff; }

/* list inside */
.map-dropdown-content { background: #fff; border-top: 1px solid rgba(170, 138, 75, .25); }
.map-dropdown-content:not(.active) { border-top-color: transparent; }
.connectivity-item {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(170, 138, 75, .15);
  transition: background-color .25s ease;
}
.connectivity-item:hover { background: #fcf9f2; }
.connectivity-item .location {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--rw-body);
  font-size: 15px;
  color: #2b2418;
}
.connectivity-item .location::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rw-gold);
}
.connectivity-item .time {
  font-family: var(--rw-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--rw-gold-text);
  background: #f5eddc;
  border: 1px solid rgba(170, 138, 75, .3);
  border-radius: 0;
  padding: 4px 10px;
}

@media (max-width: 767px) {
  .map-dropdown-btn { font-size: 17px; padding: 14px 14px 14px 16px; }
  .map-arrow { width: 26px; height: 26px; }
  .connectivity-item { padding: 10px 14px; }
  .connectivity-item .location { font-size: 14px; }
}

/* ==========================================================================
   Flat background #fffdf8 everywhere (replaces the cream gradient):
   header, mobile menu & bar, hero panel, every section and the footer
   ========================================================================== */
:root { --rw-surface: #fffdf8; --rw-band: #fffdf8; }

.headerContainer,
.mobileBottomBar,
.bannerContentSection,
.overviewSection,
.amenitiesSection,
.priceSection,
.floorPlanSection,
.gallerySection,
.mapSection,
.virtualTourSection,
#m-emi-calculator,
.aboutSection,
.footerContainer {
  background: #fffdf8;
}
@media (max-width: 1024px) {
  .headerNav { background: #fffdf8; }
}
/* form titles on #fffdf8: deeper theme gold so they stay ≥3:1 */
.quoteTitle,
.bannerContentSection .quoteTitle { color: var(--rw-heading); -webkit-text-fill-color: var(--rw-heading); }
/* the banner form title is only 20px (normal-size text) → small-text gold (6.38:1) */
.bannerContentSection .quoteTitle { color: var(--rw-gold-text); -webkit-text-fill-color: var(--rw-gold-text); }
/* links inside sentences need more than colour to stand out */
.quoteCheckboxWrapper a, .footerDisclaimer a { text-decoration: underline; text-underline-offset: 2px; }

/* EMI calculator on #fffdf8 too; inner tiles & inputs turn white to stay distinct */
#m-emi-calculator article,
#m-emi-calculator .emi-panel { background: #fffdf8; }
#m-emi-calculator article { border: none }
#m-emi-calculator .emi-summary-card,
#m-emi-calculator .emi-chart-panel { background: #fff; border: 1px solid rgba(170, 138, 75, .3); }
#m-emi-calculator .emi-input-wrap input { background: #fff; border: 1px solid rgba(170, 138, 75, .3); }
#m-emi-calculator .m-emi-donut::after { background: #fff; }
#m-emi-calculator .emi-input-column { border-color: rgba(170, 138, 75, .3); }
/* on #fffdf8 the true theme gold passes for large headings (3.2:1), so use it */
:root { --rw-heading: #aa8a4b; }

/* ==========================================================================
   Gallery & Amenities lightbox: dark backdrop + solid gold controls
   (the controls used the button variables, which the theme made transparent)
   ========================================================================== */
.amenitiesLightbox,
.galleryLightbox {
  background: rgba(28, 24, 19, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.amenitiesLightboxClose,
.galleryLightboxClose,
.amenitiesLightboxPrev,
.amenitiesLightboxNext,
.galleryLightboxNav {
  background: var(--rw-gold);
  color: #fff;
  border: 1px solid rgba(255, 250, 240, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  z-index: 3;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.amenitiesLightboxClose:hover,
.galleryLightboxClose:hover {
  background: var(--rw-gold-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  transform: scale(1.08);
}
.amenitiesLightboxPrev:hover,
.amenitiesLightboxNext:hover,
.galleryLightboxNav:hover {
  background: var(--rw-gold-dark);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
  transform: translateY(-50%) scale(1.08);
}
/* white icons (the icons are CSS masks coloured by background-color) */
.amenitiesLightbox .ri-arrow-left-s-line,
.galleryLightbox .ri-arrow-left-s-line,
.amenitiesLightbox .ri-arrow-right-s-line::before,
.galleryLightbox .ri-arrow-right-s-line::before,
.amenitiesLightbox .amenitiesLightboxClose .ri-close-line::before,
.galleryLightbox .galleryLightboxClose .ri-close-line::before { background-color: #fff; }
/* caption & counter readable on the dark backdrop */
.amenitiesLightboxCounter, .galleryLightboxCounter { color: var(--rw-ivory);background: var(--rw-gold);border: 0.5px solid #fff; }

/* Template bug fix: after the reveal animation the sections kept
   `transform: translateY(0)`. Any transform makes the section the containing
   block for position:fixed children, so the Gallery/Amenities lightbox was
   pinned to (and clipped by) its section instead of covering the screen —
   hiding its close and arrow buttons. `none` looks identical and releases it. */
.amenitiesSection.is-visible,
.floorPlanSection.is-visible,
.gallerySection.is-visible,
.priceSection.is-visible { transform: none; }

@media (max-width: 480px) {
  .overviewTitle, .highlightsTitle, .amenitiesTitle, .price-title, .floorPlanSectionTitle, .galleryTitle, .map-title, .aboutSection .floorPlanSectionTitle, .emiSectionTitle {
    font-size: 22px;
  }
  .emiSectionTitle {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .emiSectionTitle::after, .emiSectionTitle::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: var(--fontPrimary);
    margin: 0 15px;
    flex-shrink: 0;
  }
  .overviewBrochureButton, .amenitiesDownloadBtn, .galleryDownloadBtn, .floorPlanCta, .map-cta, .requestButton, .loanBtn, .price-get-details, .m-cta-primary, .quoteSubmit {
    font-size: 12px;
    letter-spacing: 0.5px;
  }

}