/* WOLO Mont Kiara: colour scheme "Dusk and Oak" (2026-10-06). Loaded last.
   The page was near-black with gold throughout. This keeps gold as the action colour and adds three
   tones taken from the renders: warm sand and oak (the interiors), deep pine (the Level 7 garden) and
   the plum-to-copper of the hero's dusk sky. Sections now alternate, so the page has a rhythm.

   Sand sections re-scope the template's colour variables, so every component inside follows. */

:root {
  --color-bg: #0b0f12;
  --color-bg-alt: #0f1518;
  --sand: #f3ece0;
  --sand-deep: #e9dfce;
  --oak: #8a5f2b;
  --pine: #0e211d;
  --pine-light: #173630;
  --copper: #d28f6f;
  --plum: #241826;
}

/* ---- Sand: key facts, floor plans, location, developer ---- */
#signature-address, #layouts, #location, .section--light {
  --color-bg: var(--sand);
  --color-bg-alt: var(--sand-deep);
  --color-surface: #fffaf1;
  --color-ink: #1d1a16;
  --color-ink-muted: #5f574b;
  --color-border: rgba(74, 54, 22, 0.18);
  --color-gold: var(--oak);
  --color-gold-light: #a9773a;
  background: var(--sand);
  color: var(--color-ink);
}
#layouts { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-deep) 100%); }
#signature-address h2, #layouts h2, #location h2, #signature-address h3, .section--light h2 { color: #1d1a16; }
#signature-address .lede, #layouts .lede, #location .lede { color: #4d463c; }
#signature-address .proximity-list li b, #location .proximity-list li b { color: #1d1a16; }
#signature-address .eyebrow, #layouts .eyebrow, #location .eyebrow, .section--light .eyebrow { color: var(--oak); }
#signature-address .cta-hint, #layouts .cta-hint, #location .section-note { color: #6a6155; }
/* on sand the primary button is deep oak with light text */
#signature-address .facts-cta .btn, #layouts .plan-tab.is-active { color: #fffaf1; }
#layouts .plan-tab { color: #4d463c; border-color: rgba(74, 54, 22, 0.3); }
#layouts .plan-panel { background: #fffaf1; box-shadow: 0 18px 40px rgba(74, 54, 22, 0.12); }
#layouts .plan-panel figcaption b { color: #1d1a16; }
#layouts .plan-ask { color: var(--oak); border-color: var(--oak); }
#layouts .plan-ask:hover { background: var(--oak); color: #fffaf1; }
.section--light .credential-stat__num { color: var(--oak); }
.section--light .partner-chip { background: #fffaf1; border-color: rgba(74, 54, 22, 0.18); color: #4d463c; }

/* ---- Pine: interiors and facilities ---- */
#vision, #lifestyle {
  --color-surface: #14302a;
  --color-border: rgba(170, 225, 205, 0.16);
  --color-ink-muted: #b4c4bd;
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--pine-light) 0%, var(--pine) 70%);
}
#vision .photo-tile .media-photo, #lifestyle .facility__photo { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35); }

/* ---- Dusk: the two places that ask for the chat ---- */
#pricing {
  background: linear-gradient(135deg, #10302a 0%, #17443a 55%, #245c4c 100%);
  border-top: 1px solid rgba(228, 196, 133, 0.25);
  border-bottom: 1px solid rgba(228, 196, 133, 0.25);
}
#pricing h2 { color: #fdf6e7; }
#pricing .lede { color: #d5e3dc; }
#pricing .section-note { color: #b9cdc4; }
#sales-gallery {
  background: linear-gradient(160deg, var(--plum) 0%, #40253a 42%, #8a5440 100%);
}
#sales-gallery h2 { color: #fdf3e3; }
#sales-gallery .lede, #sales-gallery .cta-hint { color: #ecd9cf; }
#sales-gallery .eyebrow { color: #f1c9a5; }

/* ---- Dark sections keep ink, with a little warmth ---- */
#why { background: linear-gradient(180deg, #0f1518 0%, #141a1e 100%); }
#why .card { border-top: 2px solid rgba(201, 162, 93, 0.55); }
#tower { background: radial-gradient(ellipse 70% 55% at 28% 55%, rgba(210, 143, 111, 0.1), transparent 70%), var(--color-bg); }
#faq { background: var(--color-bg-alt); }
#guides .guide-card { border-left: 2px solid var(--copper); }
#guides .guide-card__site { color: var(--copper); }

/* small touches of the dusk tones */
.scroll-progress span { background: linear-gradient(90deg, var(--color-gold) 0%, #e4c485 45%, var(--copper) 100%); }
.hero__accent-line { background: linear-gradient(90deg, #e4c485, var(--copper)); }
.presented-by { background: var(--plum); }
.site-footer { background: #090c0e; }

/* ---- Facilities: even rows, no gaps ---- */
@media (min-width: 961px) {
  .facility-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .facility-grid > :first-child { grid-column: span 2; }
  .facility-grid .facility__photo, .facility-grid > :first-child .facility__photo { aspect-ratio: auto; height: 230px; min-height: 0; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .facility-grid > :first-child { grid-column: span 2; }
  .facility-grid .facility__photo { aspect-ratio: auto; height: 200px; }
  .facility-grid > :first-child .facility__photo { height: 260px; }
}