/* Generated from main/templates/main/base.html. Served as a static file so
   browsers cache it across pages instead of re-downloading it inline. */
/* ============================================================
   AVANTIKA CRISANTO — 60 · 30 · 10 DESIGN SYSTEM
   60%  Ivory  #F8F4E9 · neutral base: page grounds, cards, navbar
   30%  Peach  #F6DBC0 · secondary: alternating bands, tiles, dividers
   10%  Wine   #6A1C44 · accent: CTAs, links, numbers, icons, footer
   Only these three colours are used. Text is wine at reduced opacity,
   so it reads as ink rather than as a fourth colour.
   Display: 'Playfair Display'   Body/UI: 'Inter'
   ============================================================ */
/* Numbers in Inter, everywhere. This face holds only Inter's digits and "%"
   (unicode-range), and every serif stack lists it first: the browser draws
   each number with Inter and every letter with Playfair Display, so mixed
   lines like "1.25 Lakh Sft." need no extra markup. It is the same latin file
   Google Fonts already serves for body text, so it adds no download. */
@font-face {
  font-family: 'Crisanto Digits';
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039;
}
/* Italic serif text (e.g. "you desire") still gets upright Inter digits. */
@font-face {
  font-family: 'Crisanto Digits';
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0025, U+0030-0039;
}

:root {
  /* ── The palette ── */
  --c-ivory: #F8F4E9;
  --c-peach: #F6DBC0;
  --c-wine:  #6A1C44;
  --text:       rgba(106, 28, 68, .88);
  --text-muted: rgba(106, 28, 68, .74);
  --line:       rgba(106, 28, 68, .14);

  /* ── Legacy names, all resolved onto the palette ── */
  --navy:   var(--c-wine);
  --navy-700: var(--c-wine);
  --navy-900: var(--c-wine);
  --midnight: var(--c-wine);
  --orange: var(--c-wine);
  --gold:   var(--c-wine);
  --beige:  var(--c-peach);
  --beige-100: var(--c-peach);
  --offwhite: var(--c-ivory);
  --ink:    var(--text);
  --ink-muted: var(--text-muted);
  --linen:  var(--c-peach);

  --plum:         var(--c-wine);
  --plum-700:     var(--c-wine);
  --plum-900:     var(--c-wine);
  --mauve:        var(--c-wine);
  --champagne:    var(--c-peach);
  --champagne-100: var(--c-peach);
  --ivory:        var(--c-ivory);
  --antique-gold: var(--c-wine);

  /* ── Semantic tokens ── */
  --forest:    var(--c-wine);
  --moss:      var(--c-wine);
  --gold-soft: var(--c-peach);
  --gold-ink:  var(--c-wine);
  --gold-deep: var(--c-wine);
  --charcoal:  var(--text);
  --serif: 'Crisanto Digits', 'Playfair Display', Georgia, serif;
  --display: 'Crisanto Digits', 'Playfair Display', Georgia, serif;
  --serif-classic: 'Crisanto Digits', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --radius-xs: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 24px 60px -30px rgba(106, 28, 68, .28);

  /* ── Internal Dashboard: the same 60-30-10 split as the public site ── */
  --color-dash-bg:         var(--c-ivory);
  --color-dash-card:       var(--c-ivory);
  --color-dash-tile:       var(--c-peach);
  --color-dash-border:     var(--line);
  --color-dash-text:       var(--text);
  --color-dash-text-muted: var(--text-muted);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--charcoal);
  overflow-x: hidden;
  font-weight: 300;
  letter-spacing: .01em;
}

::selection {
  background: var(--gold);
  color: var(--forest);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ivory);
}
::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 10px;
}

/* Typography elements */
h1, h2, h3, h4, .font-serif {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--forest);
}

.eyebrow {
  font-family: var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold-ink);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-ink);
}

.section-title {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin: 14px 0 22px;
}

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

.lede {
  max-width: 620px;
  color: rgba(106, 28, 68, .74);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.85;
}

.section {
  padding: 120px 0;
  position: relative;
}

.section-alt {
  background: var(--forest);
  color: var(--beige);
}

.section-alt .eyebrow {
  color: var(--gold-soft);
}

/* On forest the light gold is the legible choice, so the dark contexts opt
   back out of the darkened text tones. */
.section-alt .eyebrow::before,
.footer .eyebrow::before,
.hero-fullbleed .eyebrow::before {
  background: var(--gold-soft);
}

.footer .eyebrow,
.hero-fullbleed .eyebrow {
  color: var(--gold-soft);
}

.section-alt .section-title em,
.footer .section-title em,
.hero-fullbleed .section-title em {
  color: var(--gold-soft);
}

.section-alt .section-title {
  color: var(--ivory);
}

.section-alt .lede {
  color: rgba(248, 244, 233, .86);
}

a {
  text-decoration: none !important;
  color: inherit;
}

/* Navigation controls */
.view-section {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.view-section.hidden {
  display: none !important;
  opacity: 0;
  transform: translateY(30px);
}

/* Buttons */
.btn-gold {
  background: var(--gold);
  color: var(--forest);
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 15px 34px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: color .45s var(--ease);
  display: inline-block;
  cursor: pointer;
}

.btn-gold span {
  position: relative;
  z-index: 2;
}

.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--forest);
  transform: translateX(-101%);
  transition: transform .45s var(--ease);
  z-index: 1;
}

.btn-gold:hover {
  color: var(--gold) !important;
}

.btn-gold:hover::before {
  transform: translateX(0);
}

.btn-outline-ivory {
  border: 1px solid rgba(248, 244, 233, .55);
  color: var(--ivory);
  background: transparent;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 14px 30px;
  border-radius: 2px;
  transition: all .35s var(--ease);
  display: inline-block;
  cursor: pointer;
}

.btn-outline-ivory:hover {
  background: var(--ivory);
  color: var(--forest);
  border-color: var(--ivory);
}

.btn-ghost-forest {
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 14px 30px;
  border-radius: 2px;
  transition: all .35s var(--ease);
  display: inline-block;
  cursor: pointer;
}

.btn-ghost-forest:hover {
  background: var(--forest);
  color: var(--ivory);
}

.btn-ghost-ivory {
  border: 1px solid rgba(248, 244, 233, .5);
  color: var(--ivory);
  background: transparent;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 14px 30px;
  border-radius: 2px;
  transition: all .35s var(--ease);
  display: inline-block;
  cursor: pointer;
}

.btn-ghost-ivory:hover {
  background: var(--gold);
  color: var(--forest);
  border-color: var(--gold);
}

/* ============ NAVBAR (TRANSPARENT IMMERSIVE) ============ */
.navbar-aranya {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 24px 0;
  transition: all .4s var(--ease);
  background: transparent;
}

.navbar-aranya .brand {
  display: flex;
  align-items: center;
  width: 225px;
  height: 50px;
  padding: 0;
  overflow: hidden;
}

.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
}

@media (max-width: 575px) {
  .navbar-aranya .brand {
    width: 170px;
    height: 40px;
    padding: 3px 6px;
  }
}

.navbar-aranya .nav-link {
  color: #F8F4E9 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  margin: 0 12px;
  position: relative;
  padding: 8px 0 !important;
  opacity: .92;
  cursor: pointer;
  transition: opacity .3s var(--ease), color .3s var(--ease);
}

.navbar-aranya .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .35s var(--ease);
}

.navbar-aranya .nav-link:hover, .navbar-aranya .nav-link.active {
  opacity: 1;
  color: var(--gold) !important;
}

.navbar-aranya .nav-link:hover::after, .navbar-aranya .nav-link.active::after {
  width: 100%;
}

.navbar-aranya .navbar-toggler {
  color: var(--ivory);
}

/* Scrolled style */
.navbar-aranya.scrolled {
  padding: 14px 0;
  background: rgba(106, 28, 68, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(106, 28, 68, .15);
}

/* Responsive alignment rules */
@media (min-width: 992px) {
  .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--forest);
    padding: 20px;
    border-bottom: 1.5px solid var(--gold);
    width: 100%;
  }
  .navbar-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

.navbar-toggler {
  border: none;
  font-size: 1.5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

/* ============ FULL-BLEED EDITORIAL HERO ============ */
.hero-fullbleed {
  height: 100vh;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  /* Scroll-linked: --p is fed by script, so the backdrop drifts as you leave
     the hero. Falls back to plain centring when nothing sets --p. */
  background-position: center calc(50% + (var(--p, 0) * 9%));
  /* Reading scrim: darkens the left column where the headline sits, so the
     ivory type stays legible over the bright tower facade behind it. */
  background-image: linear-gradient(96deg, rgba(106, 28, 68, 0.9) 0%, rgba(106, 28, 68, 0.72) 34%, rgba(106, 28, 68, 0.28) 58%, rgba(106, 28, 68, 0) 78%),
                    linear-gradient(180deg, rgba(106, 28, 68, 0.5) 0%, rgba(106, 28, 68, 0.35) 60%, rgba(106, 28, 68, 0.95) 100%),
                    url('../assets/crisantho-hero-clean.webp');
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
}

.hero-fullbleed .container {
  z-index: 5;
  position: relative;
}

.hero-fullbleed-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: flex-end;
}

.hero-fullbleed h1 {
  color: var(--ivory);
  font-size: clamp(3rem, 6.2vw, 5.2rem);
  line-height: 1.05;
  margin-bottom: 24px;
  text-shadow: 0 2px 24px rgba(106, 28, 68, 0.75), 0 1px 3px rgba(106, 28, 68, 0.6);
}

.hero-fullbleed h1 em {
  color: var(--gold);
}

.hero-fullbleed .hero-sub {
  color: rgba(248, 244, 233, .86);
  font-size: 1.12rem;
  max-width: 620px;
  line-height: 1.8;
  margin-bottom: 40px;
  text-shadow: 0 1px 12px rgba(106, 28, 68, 0.85);
}

.hero-fullbleed .eyebrow {
  text-shadow: 0 1px 10px rgba(106, 28, 68, 0.85);
}

.hero-fullbleed .hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-badge-card {
  background: rgba(106, 28, 68, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 30px;
  border-radius: 2px;
  box-shadow: 0 20px 50px rgba(106, 28, 68, 0.3);
  color: var(--ivory);
}

.hero-badge-card h4 {
  color: var(--gold);
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-badge-card p {
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 0;
  color: rgba(248, 244, 233, .86);
}

@media (max-width: 991px) {
  .hero-fullbleed {
    padding-bottom: 60px;
    /* Text runs full width here, so scrim the whole frame instead of one column. */
    background-image: linear-gradient(180deg, rgba(106, 28, 68, 0.6) 0%, rgba(106, 28, 68, 0.55) 45%, rgba(106, 28, 68, 0.92) 100%),
                      url('../assets/crisantho-hero-clean.webp');
  }
  .hero-fullbleed-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-badge-card {
    display: none;
  }
}

/* ============ ABOUT ============ */
.about-img-wrap {
  position: relative;
}

.about-img-wrap img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 30px 60px -20px rgba(106, 28, 68, .35);
}

.about-badge {
  position: absolute;
  bottom: -30px;
  right: -20px;
  background: var(--forest);
  color: var(--ivory);
  padding: 26px 30px;
  border-radius: 2px;
  font-family: var(--serif);
  text-align: center;
  box-shadow: 0 20px 40px -12px rgba(106, 28, 68, .3);
}

.about-badge .num {
  font-size: 2.1rem;
  color: var(--gold);
  display: block;
  line-height: 1;
}

.about-badge .cap {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beige);
}

.about-points {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.about-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.about-points li:first-child {
  border-top: none;
}

.about-points i {
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 3px;
}

.about-points b {
  font-family: var(--sans);
  font-weight: 600;
  display: block;
  color: var(--forest);
}

/* ============ ASYMMETRIC PILLAR LIST (WHY CHOOSE) ============ */
.pillar-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}

@media (max-width: 991px) {
  .pillar-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.pillar-row {
  display: flex;
  align-items: flex-start;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  transition: all 0.4s var(--ease);
}

.pillar-row:last-child {
  border-bottom: 1px solid var(--line);
}

.pillar-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  flex: 0.15;
  font-weight: 400;
}

.pillar-body {
  flex: 0.85;
}

.pillar-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--forest);
  margin: 0 0 10px;
  transition: color 0.3s;
}

.pillar-desc {
  color: rgba(106, 28, 68, .74);
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
  opacity: 0.82;
}

.pillar-row:hover {
  background: rgba(106, 28, 68, 0.06);
  padding-left: 20px;
}

.pillar-row:hover .pillar-title {
  color: var(--gold);
}

/* Stats */
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--gold);
  line-height: 1;
  display: inline-block;
  min-width: 4ch;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.035em;
  text-shadow: 0 10px 24px rgba(106, 28, 68, .16);
  will-change: transform, filter;
}

.stat-num.is-rolling {
  animation: statRoulettePulse .16s ease-in-out infinite alternate;
}

@keyframes statRoulettePulse {
  from { transform: translateY(-2px); filter: blur(.45px); }
  to { transform: translateY(2px); filter: blur(0); }
}

.stat-cap {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--beige);
  margin-top: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .stat-num.is-rolling {
    animation: none;
  }
}

/* ============ EDITORIAL ASYMMETRIC RESIDENCES ============ */
.editorial-row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 120px;
}

.editorial-row:last-child {
  margin-bottom: 0;
}

.editorial-row.reverse {
  flex-direction: row-reverse;
}

.editorial-media {
  flex: 1.2;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.editorial-media img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  transition: transform .8s var(--ease);
  display: block;
}

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

.editorial-card {
  flex: 0.8;
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 50px;
  position: relative;
  z-index: 2;
  border-radius: 2px;
  box-shadow: 0 20px 50px -15px rgba(106, 28, 68, 0.08);
}

/* Overlapping card offset */
@media (min-width: 992px) {
  .editorial-row:not(.reverse) .editorial-card {
    margin-left: -100px;
  }
  .editorial-row.reverse .editorial-card {
    margin-right: -100px;
  }
}

@media (max-width: 991px) {
  .editorial-row, .editorial-row.reverse {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 80px;
  }
  .editorial-media img {
    height: 320px;
  }
}

.editorial-card h3 {
  font-size: 2rem;
  margin-bottom: 14px;
}

.editorial-card .price {
  font-family: var(--serif);
  color: var(--gold-ink);
  font-size: 1.4rem;
  display: block;
  margin: 18px 0;
}

/* Lifestyle masonry-ish grid */
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  gap: 14px;
}

.lg-item {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  grid-column: span 1;
  grid-row: span 1;
}

.lg-big {
  grid-column: span 2;
  grid-row: span 2;
}

.lg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.lg-item:hover img {
  transform: scale(1.12);
}

.lg-item span {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 16px;
  color: #F8F4E9;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  background: linear-gradient(0deg, rgba(106, 28, 68, .65), transparent 70%);
}

@media (max-width: 768px) {
  .lifestyle-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  .lg-big {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* Amenities */
.amenity-tile {
  background: var(--beige);
  padding: 30px 10px;
  border-radius: 2px;
  transition: all .35s var(--ease);
  height: 100%;
}

.amenity-tile:hover {
  background: var(--forest);
  transform: translateY(-6px);
}

.amenity-tile:hover i, .amenity-tile:hover span {
  color: var(--gold-soft);
}

.amenity-tile i {
  font-size: 1.6rem;
  color: var(--forest);
  display: block;
  margin-bottom: 10px;
  transition: color .35s;
}

.amenity-tile span {
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--charcoal);
  transition: color .35s;
  font-weight: 500;
}

/* Sustainability eco cards */
.eco-card {
  background: rgba(248, 244, 233, .06);
  border: 1px solid rgba(106, 28, 68, .25);
  border-radius: 2px;
  padding: 26px;
  height: 100%;
  transition: all .35s var(--ease);
}

.eco-card:hover {
  background: rgba(106, 28, 68, .12);
  transform: translateY(-4px);
}

.eco-card i {
  font-size: 1.5rem;
  color: var(--gold);
}

.eco-card h4 {
  font-family: var(--sans);
  color: var(--ivory);
  font-size: .98rem;
  font-weight: 600;
  margin: 12px 0 6px;
}

.eco-card p {
  font-size: .85rem;
  color: rgba(248, 244, 233, .86);
  margin: 0;
}

/* Gallery */
.gallery-masonry {
  column-count: 4;
  column-gap: 14px;
}

.gal-item {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 2px;
  overflow: hidden;
  cursor: zoom-in;
}

.gal-item img {
  width: 100%;
  display: block;
  transition: transform .6s var(--ease);
}

.gal-item:hover img {
  transform: scale(1.1);
}

@media (max-width: 992px) {
  .gallery-masonry {
    column-count: 3;
  }
}

@media (max-width: 576px) {
  .gallery-masonry {
    column-count: 2;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(106, 28, 68, .94);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 88vh;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(106, 28, 68, .5);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: transparent;
  border: 1px solid rgba(248, 244, 233, .4);
  color: var(--ivory);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
}

/* Location */
.map-placeholder {
  background: var(--beige);
  border: 1px dashed var(--gold);
  border-radius: 2px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--forest);
}

.map-placeholder i {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 8px;
}

.map-placeholder span {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.travel-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 22px;
  height: 100%;
  transition: .3s;
}

.travel-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

.travel-card i {
  font-size: 1.3rem;
  color: var(--gold);
}

.travel-card h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  margin: 10px 0 2px;
  color: var(--forest);
}

.travel-card p {
  font-size: .78rem;
  color: rgba(106, 28, 68, .74);
  margin: 0 0 8px;
}

.travel-card span {
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--gold-ink);
}

/* Careers Light Theme */
.job-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 32px;
  height: 100%;
  transition: all 0.35s var(--ease);
  box-shadow: 0 12px 40px rgba(106, 28, 68, 0.05);
}

.job-card:hover {
  background: rgba(106, 28, 68, 0.06);
  border-color: var(--gold);
  transform: translateY(-6px);
}

.job-card .tag {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}

.job-card h3 {
  color: var(--forest);
  font-size: 1.25rem;
  margin: 12px 0 8px;
}

.job-card p {
  color: rgba(106, 28, 68, .74);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ============ DRAG & DROP UPLOAD BOX ============ */
.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(106, 28, 68, 0.55);
  /* This box lives inside the ivory modal, so it takes forest ink on a light
     tint. It previously used ivory text, which vanished into the panel. */
  background: rgba(106, 28, 68, 0.06);
  border-radius: 2px;
  padding: 35px 20px;
  color: var(--forest);
  text-align: center;
  cursor: pointer;
  transition: all .3s var(--ease);
}

.upload-box.dragover {
  border-color: var(--gold);
  background: rgba(106, 28, 68, 0.15);
}

.upload-box i {
  color: var(--gold);
  font-size: 2.1rem;
  margin-bottom: 12px;
}

/* ============ INTERNAL UNIFIED PORTAL GATEWAY ============ */
.auth-section {
  padding: 140px 0;
  background: radial-gradient(circle at center, var(--moss) 0%, var(--forest) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--ivory);
}

.auth-card {
  background: rgba(106, 28, 68, 0.45);
  border: 1px solid var(--line);
  padding: 50px;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(106, 28, 68, .45);
  max-width: 480px;
  margin: 0 auto;
}

.auth-tabs {
  display: flex;
  background: rgba(106, 28, 68, .8);
  padding: 4px;
  border: 1px solid rgba(106, 28, 68, .2);
  margin-bottom: 30px;
  border-radius: 2px;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  color: var(--gold-soft);
  transition: .3s var(--ease);
}

.auth-tab.active {
  background: var(--gold);
  color: var(--forest);
}

/* Forms */
.form-label-lux {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold-ink);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.form-control-lux {
  width: 100%;
  background: rgba(106, 28, 68, 0.5);
  border: 1px solid rgba(106, 28, 68, 0.3);
  color: var(--ivory);
  padding: 14px 18px;
  font-size: .9rem;
  border-radius: 2px;
  outline: none;
  transition: border-color .35s;
}

.form-control-lux:focus {
  border-color: var(--gold);
}

.password-field {
  position: relative;
}

.password-field .form-control-lux {
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--gold);
  outline: none;
}

.portal-user-modal .modal-content {
  background: var(--ivory);
}

.portal-user-modal .form-control-lux {
  background: #F8F4E9;
  color: var(--forest);
  border-color: rgba(106, 28, 68, .25);
}

.portal-user-modal .form-control-lux:focus {
  background: #F8F4E9;
  color: var(--forest);
  border-color: var(--gold);
}

.portal-user-modal select.form-control-lux option {
  background: #F8F4E9;
  color: var(--forest);
}

.portal-user-modal .access-password-hint {
  margin: 9px 0 0;
  color: rgba(106, 28, 68, .74);
  font-size: .76rem;
  line-height: 1.45;
}

/* ============ INTERNAL ANALYTICS DASHBOARD ============ */
.dashboard-view-wrapper {
  background: var(--color-dash-bg);
  color: var(--color-dash-text);
  min-height: 100vh;
  padding-top: 130px;
  padding-bottom: 80px;
}

.dash-header {
  border-bottom: 1px solid var(--color-dash-border);
  padding-bottom: 32px;
  margin-bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-header h2 {
  font-family: var(--serif);
  color: var(--gold);
  font-weight: 400;
  font-size: 2.2rem;
  margin: 0;
}

/* On phones the title stacks above the actions, and the actions wrap
   instead of pushing the page wider than the screen. */
@media (max-width: 767.98px) {
  .dash-header { flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 24px; margin-bottom: 32px; }
  .dash-header h2 { font-size: 1.8rem; }
  .dash-header .d-flex { flex-wrap: wrap; gap: 10px !important; }
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}

.kpi-card {
  background: var(--color-dash-tile);
  border: 1px solid var(--color-dash-border);
  padding: 28px;
  border-radius: 2px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.kpi-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.kpi-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--color-dash-text-muted);
  margin-bottom: 14px;
}

.kpi-value {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--c-wine);
  line-height: 1.1;
  margin-bottom: 6px;
}

.kpi-desc {
  font-size: .78rem;
  color: var(--color-dash-text-muted);
}

.dash-charts-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 32px;
  margin-bottom: 48px;
}

@media (max-width: 992px) {
  .dash-charts-grid {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  background: var(--color-dash-tile);
  border: 1px solid var(--color-dash-border);
  padding: 38px;
  border-radius: 2px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.chart-header h3 {
  font-family: var(--sans);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-dash-text);
  font-weight: 600;
  margin: 0;
}

.svg-chart-container {
  width: 100%;
  height: 240px;
}

.chart-gridline {
  stroke: rgba(106, 28, 68, 0.08);
  stroke-width: 1;
}

.chart-line {
  stroke: var(--gold);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
}

.chart-area {
  fill: url(#dashGrad);
}

.chart-point {
  fill: var(--gold);
  stroke: var(--color-dash-tile);
  stroke-width: 2;
  cursor: pointer;
  transition: r .25s;
}

.chart-point:hover {
  r: 8.5;
}

.ratio-bar {
  height: 6px;
  background: rgba(106, 28, 68, 0.08);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  margin-bottom: 12px;
}

.ratio-fill {
  background: var(--gold);
  height: 100%;
}

.dash-table-card {
  background: var(--color-dash-card);
  border: 1px solid var(--color-dash-border);
  padding: 32px 0 0;
  border-radius: 2px;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
}

.dash-table th, .dash-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--color-dash-border);
}

.dash-table th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-dash-text-muted);
  font-weight: 600;
}

.dash-table td {
  font-size: .85rem;
  color: var(--color-dash-text);
}

/* ============ MONOGRAM GOLD SEAL WIDGET ============ */
.social-drawer {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1001;
}

@media (max-width: 768px) {
  .social-drawer {
    display: none;
  }
}

.social-drawer-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--gold);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(106, 28, 68, 0.2);
  transition: all .35s var(--ease);
}

.social-drawer-btn:hover {
  transform: translateX(4px);
  background: var(--gold);
  color: var(--forest);
}

.fab-cluster {
  position: fixed;
  right: 28px;
  /* Kenyt owns the lower-right corner; keep the WhatsApp action above it. */
  bottom: 124px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: none;
  box-shadow: 0 12px 30px -8px rgba(106, 28, 68, .4);
  transition: .3s var(--ease);
  cursor: pointer;
}

.fab-whatsapp {
  background: #25D366;
  color: #F8F4E9;
}

.fab:hover {
  transform: translateY(-4px) scale(1.06);
}

/* Toast */
.app-toast {
  position: fixed;
  top: 26px;
  left: 50%;
  /* Parked well clear of the viewport: at -140% its lower edge still poked a
     few pixels into the top strip and, at z-index 3000, painted over the
     scroll progress rail. Hidden outright when not showing. */
  transform: translateX(-50%) translateY(-320%);
  visibility: hidden;
  pointer-events: none;
  z-index: 3000;
  background: var(--forest);
  color: var(--ivory);
  padding: 16px 26px;
  border-radius: 2px;
  font-size: .88rem;
  box-shadow: 0 20px 40px -10px rgba(106, 28, 68, .35);
  transition: transform .5s var(--ease), visibility 0s linear .5s;
  border-left: 3px solid var(--gold);
}

.app-toast.show {
  transform: translateX(-50%) translateY(0);
  visibility: visible;
  transition: transform .5s var(--ease), visibility 0s;
}

/* Modal specific cleanups */
.modal-content {
  border-radius: 2px;
  border: none;
  background: var(--ivory);
}

.luxury-modal .modal-content {
  position: relative;
}

.btn-close-luxury {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  background: transparent;
  border: none;
  color: var(--forest);
  font-size: 1.1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.btn-close-luxury:hover {
  background: var(--beige);
}

.small-label {
  font-size: .8rem;
  color: rgba(106, 28, 68, .74);
}

.pm-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 2px;
}

.pm-fact {
  background: var(--beige);
  border-radius: 2px;
  padding: 14px;
  text-align: center;
}

.pm-fact b {
  display: block;
  font-family: var(--serif);
  color: var(--forest);
  font-size: 1rem;
}

.pm-fact span {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(106, 28, 68, .74);
}

.pm-block {
  background: var(--beige);
  border-radius: 2px;
  padding: 14px 18px;
  font-size: .88rem;
  color: rgba(106, 28, 68, .74);
}

.pm-block i {
  color: var(--gold);
  margin-right: 8px;
}

/* ============================================================
   PURE CSS ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reveals are scroll-triggered: they wait until the element is reached rather
   than all firing at load. The opt-in class is set on <body> by script, so
   without JS every element simply stays visible. */
/* Kept short and small on purpose: content should already be settling as the
   reader arrives, never arriving a beat behind them. */
.js-reveal .animate-fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.js-reveal .animate-fade-up.in-view {
  opacity: 1;
  transform: none;
}

.delay-100 { transition-delay: .05s; }
.delay-200 { transition-delay: .1s; }
.delay-300 { transition-delay: .15s; }
.delay-400 { transition-delay: .2s; }

/* Images wipe open from the bottom edge as they are reached. */
.js-reveal .reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s cubic-bezier(.16, 1, .3, 1);
}

.js-reveal .reveal-img.in-view {
  clip-path: inset(0 0 0% 0);
}

/* Children of a stagger group arrive one after another. */
.js-reveal [data-stagger] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.js-reveal [data-stagger].in-view > * {
  opacity: 1;
  transform: none;
}

/* Layers that drift at their own rate as the page moves. */
[data-parallax] {
  will-change: transform;
}

/* Scroll progress rail, pinned under the header. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  /* Above the navbar (1000), which otherwise paints straight over this. */
  z-index: 1002;
  background: rgba(106, 28, 68, .18);
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 0;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  box-shadow: 0 0 12px rgba(106, 28, 68, .5);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .animate-fade-up,
  .js-reveal [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-reveal .reveal-img { clip-path: none; transition: none; }
  [data-parallax] { transform: none !important; }
}

/* ============ FOOTER ============ */
/* The footer had no spacing of its own, so its first row sat flush against
   whatever section ended above it. Bootstrap's g-5 gutter also puts a -48px
   top margin on the row, which pulled that first line up into the band above;
   the row margin is reset here and the breathing room comes from the footer. */
.footer {
  background: var(--ivory);
  border-top: 1px solid var(--line);
  /* Bootstrap's g-5 gutter puts -48px on the row and +48px on each column, so
     they cancel on the first line: content starts exactly at this padding.
     (Overriding the row margin instead leaves the column's +48px stranded,
     which is what produced the dead band at the top of the footer.) */
  padding: 72px 0 36px;
  position: relative;
}

.footer-bottom {
  margin-top: 48px;
  padding-top: 26px;
  /* Keep the right-hand line clear of the floating WhatsApp/chat buttons. */
  padding-right: 96px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
}

.footer-bottom p {
  margin: 0;
  font-size: .82rem;
  color: rgba(106, 28, 68, .74);
}

@media (max-width: 767.98px) {
  .footer { padding: 52px 0 28px; }
  .footer-bottom { margin-top: 36px; padding-right: 0; }
}

/* ============ HOME: TRUST STRIP ============ */
.trust-strip {
  background: var(--forest);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 44px 0;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  position: relative;
  padding: 0 12px;
}

.trust-item + .trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: var(--line);
}

.trust-item__label {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.trust-item__value {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 500;
  color: var(--ivory);
  line-height: 1.15;
}

.trust-item__note {
  font-size: .76rem;
  color: rgba(246, 219, 192, .72);
}

/* ============ HOME: FEATURED RESIDENCES ============ */
.home-res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.home-res-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

.home-res-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 28px 54px -26px rgba(106, 28, 68, .45);
}

.home-res-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.home-res-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

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

.home-res-card__status {
  position: absolute;
  left: 14px;
  top: 14px;
  background: rgba(106, 28, 68, .92);
  color: var(--gold-soft);
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
}

.home-res-card__body {
  padding: 24px 24px 26px;
}

.home-res-card__body h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--forest);
  margin: 0 0 8px;
}

.home-res-card__spec {
  font-size: .82rem;
  color: rgba(106, 28, 68, .74);
  margin: 0 0 14px;
}

.home-res-card__price {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold-ink);
  font-weight: 600;
}

/* ============ HOME: ENQUIRY BAND ============ */
.enquiry-band {
  background: var(--beige);
  padding: 110px 0;
  border-top: 1px solid var(--line);
}

.enquiry-band__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}

.enquiry-band__direct {
  margin-top: 24px;
  font-size: .92rem;
  color: rgba(106, 28, 68, .74);
}

.enquiry-band__direct a {
  color: var(--gold-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.enquiry-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 38px 34px 30px;
  box-shadow: 0 30px 60px -30px rgba(106, 28, 68, .3);
}

.enquiry-card__note {
  text-align: center;
  font-size: .74rem;
  color: rgba(106, 28, 68, .74);
  margin: 14px 0 0;
}

@media (max-width: 991.98px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .trust-item:nth-child(3)::before { display: none; }
  .enquiry-band__grid { grid-template-columns: 1fr; gap: 40px; }
  .enquiry-band { padding: 72px 0; }
}

@media (max-width: 575.98px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item { padding: 0; }
  .enquiry-card { padding: 28px 22px 24px; }
}

/* ============ CONTROL ROOM ADMIN PANELS ============ */
.dash-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.dash-panel-card {
  background: var(--color-dash-card);
  border: 1px solid var(--color-dash-border);
  border-radius: 4px;
  padding: 28px;
}

.dash-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.dash-panel-head h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--c-wine);
  margin: 0 0 6px;
}

.dash-panel-head p {
  font-size: .8rem;
  color: var(--color-dash-text-muted);
  margin: 0;
}

.dash-pill {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-wine);
  background: var(--color-dash-tile);
  border: 1px solid var(--color-dash-border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.dash-form .form-label-lux {
  color: var(--color-dash-text-muted);
}

.dash-field {
  margin-bottom: 16px;
  flex: 1 1 160px;
}

.dash-field-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.dash-field input,
.dash-field select,
.dash-field textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-dash-border);
  border-radius: 2px;
  color: var(--color-dash-text);
  padding: 11px 13px;
  font-family: var(--sans);
  font-size: .88rem;
}

.dash-field input:focus,
.dash-field select:focus,
.dash-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: transparent;
}

.dash-field select option {
  background: var(--color-dash-card);
  color: var(--color-dash-text);
}

.dash-field small {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  color: var(--color-dash-text-muted);
}

.dash-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 20px;
}

.dash-toggles label {
  font-size: .82rem;
  color: var(--color-dash-text);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.dash-toggles input {
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
}

.dash-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-hint {
  font-size: .75rem;
  color: var(--color-dash-text-muted);
  margin: 14px 0 0;
}


@media (max-width: 575.98px) {
  .dash-admin-grid { grid-template-columns: 1fr; }
  .dash-panel-card { padding: 20px; }
}

/* ============ AUTH PAGES (reset / change password) ============ */
.auth-panel {
  max-width: 540px;
  margin: 0 auto;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 48px 44px 40px;
  box-shadow: 0 30px 60px -30px rgba(106, 28, 68, .3);
}

.auth-panel .section-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.auth-panel .lede {
  font-size: .96rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  background: #F8F4E9;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(106, 28, 68, .18);
}

.auth-error {
  color: #9a2b2b;
  font-size: .85rem;
  margin-top: 10px;
}

.auth-alt {
  margin: 24px 0 0;
  font-size: .85rem;
}

.auth-alt a {
  color: var(--gold-ink);
  border-bottom: 1px solid var(--line);
}

/* ============ HEADER GLASS ============ */
/* The section links ride in a frosted pill so the navigation reads as its own
   object over the hero rather than as a painted band. Applied only where the
   bar is expanded; the collapsed burger menu keeps a plain panel. */
@media (min-width: 1400px) {
  .navbar-aranya .navbar-nav {
    background: rgba(248, 244, 233, .08);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(106, 28, 68, .26);
    border-radius: 999px;
    padding: 7px 20px;
    box-shadow: 0 10px 34px -16px rgba(106, 28, 68, .65),
                inset 0 1px 0 rgba(248, 244, 233, .12);
    transition: background .45s var(--ease), border-color .45s var(--ease);
  }

  .navbar-aranya .navbar-nav:hover {
    background: rgba(248, 244, 233, .12);
    border-color: rgba(106, 28, 68, .42);
  }

  .navbar-aranya .nav-cta {
    margin-left: 18px;
  }

  /* With the links in their own glass pill the bar itself can stay sheer,
     even on inner pages where it used to be painted solid. */
  body.is-inner-page .navbar-aranya {
    background: linear-gradient(180deg, rgba(106, 28, 68, .82), rgba(106, 28, 68, .58));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 30px -18px rgba(106, 28, 68, .5);
  }

  .navbar-aranya.scrolled {
    background: rgba(106, 28, 68, .72);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* Browsers without backdrop-filter get a solid, legible fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar-aranya .navbar-nav { background: rgba(106, 28, 68, .92); }
  body.is-inner-page .navbar-aranya { background: rgba(106, 28, 68, .98); }
}

/* ============ PAGE SHELL (inner pages) ============ */
/* The homepage opens on a full-bleed hero, so the fixed navbar can float over
   it. Every other page starts with content, so it needs clearance and a navbar
   that is solid from the first pixel. */
.page-shell {
  /* --nav-h is measured by script; the fallback covers a first paint before
     that runs. A fixed value here let content slide under a taller navbar. */
  padding-top: calc(var(--nav-h, 88px) + 34px);
}

.page-shell > .section:first-child {
  padding-top: 80px;
}

body.is-inner-page .navbar-aranya {
  background: rgba(106, 28, 68, .98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(106, 28, 68, .15);
  padding: 14px 0;
}

/* ============ SECTION HUB (homepage) ============ */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.hub-card {
  display: block;
  position: relative;
  padding: 34px 30px 30px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

.hub-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width .6s var(--ease);
}

.hub-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 26px 50px -24px rgba(106, 28, 68, .45);
}

.hub-card:hover::after {
  width: 100%;
}

.hub-card__num {
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--gold-ink);
}

.hub-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 12px 0 10px;
  color: var(--forest);
}

.hub-card p {
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(106, 28, 68, .74);
  margin: 0 0 18px;
}

.hub-card__go {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hub-card:hover .hub-card__go i {
  transform: translateX(5px);
}

.hub-card__go i {
  transition: transform .4s var(--ease);
}

/* ============ TOWER CATEGORIES ============ */
.tower-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 767px) { .tower-cats { grid-template-columns: 1fr; } }

.tower-cat {
  border-radius: 2px;
  padding: 38px 32px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.tower-cat:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -18px rgba(106, 28, 68, .28); }
.tower-cat::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; }

.tower-cat--premium { background: var(--navy); border: 1px solid rgba(106, 28, 68, .35); color: var(--offwhite); }
.tower-cat--premium::before { background: var(--gold); }
.tower-cat--premium .tower-cat__name { color: var(--offwhite) !important; }
.tower-cat--premium .tower-cat__desc { color: rgba(248, 244, 233, .72); }
.tower-cat--premium .tower-cat__label { color: var(--gold); }

.tower-cat--ultra { background: var(--navy); color: var(--offwhite); }
.tower-cat--ultra::before { background: var(--gold); }
.tower-cat--ultra .tower-cat__name { color: var(--offwhite); }
.tower-cat--ultra .tower-cat__desc { color: rgba(248, 244, 233, .72); }
.tower-cat--ultra .tower-cat__label { color: var(--gold); }

.tower-cat--luxury { background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy) 100%); color: var(--offwhite); border: 1px solid rgba(106, 28, 68, .35); }
.tower-cat--luxury::before { background: linear-gradient(90deg, var(--gold), var(--orange)); }
.tower-cat--luxury .tower-cat__name { color: var(--gold); }
.tower-cat--luxury .tower-cat__desc { color: rgba(248, 244, 233, .72); }
.tower-cat--luxury .tower-cat__label { color: var(--gold); opacity: .85; }

.tower-cat__label { font-family: var(--sans); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); display: block; margin-bottom: 16px; }
.tower-cat__name { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; color: var(--navy); margin: 0 0 10px; line-height: 1.2; }
.tower-cat__desc { font-size: .88rem; line-height: 1.65; color: var(--ink-muted); margin: 0; }
.tower-cat__detail { border-top: 1px solid var(--line); color: var(--gold-ink); display: block; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .04em; line-height: 1.5; margin-top: auto; padding-top: 16px; }
.tower-cat--premium .tower-cat__detail, .tower-cat--ultra .tower-cat__detail, .tower-cat--luxury .tower-cat__detail { border-color: rgba(106, 28, 68, .28); color: var(--gold); }

/* ============ SPECIFICATIONS GRID ============ */
.specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (max-width: 575px) { .specs-grid { grid-template-columns: 1fr; } }

.spec-item { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-bottom: 1px solid var(--line); transition: background .3s var(--ease); }
.spec-item:nth-child(odd) { border-right: 1px solid var(--line); }
.spec-item:hover { background: rgba(106, 28, 68, .06); }
.spec-item i { font-size: 1.4rem; color: var(--orange); flex-shrink: 0; margin-top: 4px; }
.spec-item h4 { font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--navy); margin: 0 0 6px; }
.spec-item p { font-size: .82rem; color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* ============ LOCATION ============ */
.location-highlights { display: flex; flex-direction: column; gap: 14px; }
.loc-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--beige-100); border-left: 3px solid var(--orange); border-radius: 0 2px 2px 0; transition: background .3s var(--ease); }
.loc-item:hover { background: var(--beige); }
.loc-item i { color: var(--orange); font-size: 1.1rem; flex-shrink: 0; }
.loc-item span { font-size: .9rem; color: var(--navy); font-weight: 500; }

.map-embed-wrap { border-radius: 2px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(106, 28, 68, .25); border: 1px solid var(--line); }
.map-embed-wrap iframe { display: block; }

/* ============ PAGE PAGER (chapter to chapter) ============ */
.page-pager {
  background: var(--forest);
  border-top: 1px solid var(--line);
}

.page-pager__inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 46px 12px;
}

.page-pager__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--beige);
  transition: color .4s var(--ease), transform .5s var(--ease);
  max-width: 46%;
}

.page-pager__link--next {
  text-align: right;
  align-items: flex-end;
}

.page-pager__dir {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.page-pager__name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.page-pager__link:hover {
  color: var(--ivory);
}

.page-pager__link--prev:hover { transform: translateX(-5px); }
.page-pager__link--next:hover { transform: translateX(5px); }

@media (max-width: 575.98px) {
  .page-pager__inner { padding: 32px 12px; }
  .page-pager__link { max-width: 48%; }
}

/* Parallax images are oversized and cropped by their frame, so the drift
   never exposes an edge. */
.about-img-wrap,
.lg-item,
.gal-item,
.master-visual {
  overflow: hidden;
}

img[data-parallax] {
  display: block;
  width: 100%;
}

/* ============ SCROLL-LINKED (SCRUB) ============ */
/* Script feeds each element its own 0..1 travel through the viewport as --p;
   the animation is then tied directly to scroll position rather than to time. */
[data-scrub] {
  --p: 0;
}

/* Drawn with scaleX, not width, so scrolling never re-lays out the page. */
.js-reveal .section-title[data-scrub]::after {
  content: "";
  display: block;
  height: 2px;
  width: 108px;
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  opacity: calc(.25 + var(--p) * .75);
}

/* Centred headings draw their underline from the centre, under the text. */
.text-center .section-title[data-scrub]::after,
.content-head:not(.content-head--left) .section-title[data-scrub]::after {
  margin-left: auto;
  margin-right: auto;
  transform-origin: 50% 50%;
}

.section-alt .section-title[data-scrub]::after,
.footer .section-title[data-scrub]::after {
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}

/* Stat figures lift slightly as their band is scrolled through. */
.js-reveal [data-scrub].stat-num {
  transform: translateY(calc((1 - var(--p)) * 10px));
}

/* ============ HORIZONTAL SCROLL SHOWCASE ============ */
/* Vertical input, horizontal output: the stage supplies the scroll length, the
   viewport pins, and the track translates across. */
.hscroll-stage {
  position: relative;
}

.hscroll-viewport {
  overflow: hidden;
}

.hscroll-track {
  display: flex;
  gap: 26px;
  padding: 0 6vw;
}

.hscroll-item {
  flex: 0 0 clamp(260px, 32vw, 440px);
  margin: 0;
}

.hscroll-item img {
  width: 100%;
  height: clamp(300px, 46vh, 520px);
  object-fit: cover;
  border-radius: var(--radius-xs);
  cursor: zoom-in;
  filter: saturate(.96);
  transition: transform .7s var(--ease), filter .7s var(--ease);
}

.hscroll-item:hover img {
  transform: scale(1.03);
  filter: saturate(1.06);
}

.hscroll-item figcaption {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 14px;
}

/* Pinned mode is switched on by script only when it can drive it. */
.hscroll-stage.is-pinned .hscroll-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.hscroll-stage.is-pinned .hscroll-track {
  will-change: transform;
}

/* Fallback and small screens: an ordinary swipeable strip. */
.hscroll-stage:not(.is-pinned) .hscroll-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 24px;
}

.hscroll-stage:not(.is-pinned) .hscroll-item {
  scroll-snap-align: center;
}

/* ============ EMI CALCULATOR ============ */
.emi-card {
  background: var(--ivory);
  border: 1px solid var(--line);
  padding: 45px;
  border-radius: 2px;
  box-shadow: 0 20px 50px -15px rgba(106, 28, 68, 0.08);
}

.emi-slider-group {
  margin-bottom: 32px;
}

.emi-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.emi-slider-header label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 600;
}

.emi-slider-header span {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--gold-ink);
  font-weight: 600;
}

.form-range-lux {
  width: 100%;
  accent-color: var(--gold);
  height: 6px;
  background: var(--beige);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.emi-result-card {
  background: var(--forest);
  color: var(--ivory);
  padding: 45px;
  border-radius: 2px;
  border: 1px solid var(--gold);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 25px 60px rgba(106, 28, 68, 0.18);
}

.emi-result-title {
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
}

.emi-result-value {
  font-family: var(--serif);
  font-size: 2.8rem;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 24px;
}

.emi-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid rgba(106, 28, 68, 0.2);
  font-size: .88rem;
}

.emi-breakdown-row span {
  color: rgba(248, 244, 233, .86);
}

.emi-breakdown-row b {
  color: var(--ivory);
  font-family: var(--serif);
  font-weight: 500;
}

.emi-progress-bar {
  height: 8px;
  background: rgba(106, 28, 68, 0.2);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin: 20px 0;
}

.emi-progress-fill {
  background: var(--gold);
  height: 100%;
  transition: width 0.3s var(--ease);
}

/* ============ MOBILE-FIRST TOUCH AND INPUT SIZING ============
   The phone values are the base here and the desktop sizes are restored at
   the tablet breakpoint. iOS Safari zooms the whole page whenever a focused
   field is smaller than 16px, so no text field may go under it on a phone,
   and every control clears a comfortable finger target. */
.form-control-lux {
  font-size: 1rem;
  min-height: 48px;
}

.form-control,
.form-select {
  min-height: 48px;
}

.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
}

/* Padding on an inline link grows the tap target without moving the layout. */
.footer ul li a {
  display: inline-block;
  padding: 5px 0;
}

@media (min-width: 768px) {
  .form-control-lux { font-size: .9rem; min-height: 0; }
  .form-control, .form-select { min-height: 0; }
  .footer ul li a { padding: 0; }
}

/* ============ BROCHURE MODAL ============ */
.brochure-dialog { max-width: 560px; }
.brochure-dialog.brochure-dialog--preview { max-width: 960px; }
#brochureModal .modal-header { padding: 24px 28px; }
#brochureModal .modal-body { padding: 28px; }
.brochure-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.brochure-options button {
  width: 100%;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 575px) {
  .brochure-options { grid-template-columns: 1fr; }
  #brochureModal .modal-header, #brochureModal .modal-body { padding: 20px; }
}


/* ============================================================
   PREMIUM LAYER — Ivory / Champagne / Plum
   Loaded last so it refines the component rules above. Orchid Mauve is
   deliberately rare: italic heading emphasis and a few hover states only.
   ============================================================ */
body {
  background: var(--offwhite);
  color: var(--ink);
  font-weight: 400;
}

::selection { background: var(--gold); color: var(--navy); }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--navy); border: 2px solid var(--offwhite); }

h1, h2, h3, h4, .font-serif {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -.005em;
}

.text-gold { color: var(--gold) !important; }

.eyebrow {
  font-size: .7rem;
  letter-spacing: .32em;
  color: var(--gold-ink);
}
.eyebrow::before { width: 28px; background: var(--gold); }

.section-title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.04;
  font-weight: 500;
}
.section-title em { color: var(--orange); font-weight: 500; }

.lede { color: var(--ink-muted); font-size: 1.04rem; line-height: 1.85; }

.section { padding: 128px 0; }
.section-blush { background: var(--champagne-100); }

@media (max-width: 767.98px) {
  .section { padding: 84px 0; }
}

/* ---------- Dark grounds: Midnight Plum ---------- */
.section-alt {
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(106, 28, 68, .12), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(106, 28, 68, .55), transparent 60%),
    var(--midnight);
  color: var(--champagne-100);
}
.section-alt .section-title,
.section-alt h3,
.section-alt h4 { color: var(--ivory); }
.section-alt .section-title em { color: var(--gold); }
.section-alt .lede { color: rgba(248, 244, 233, .82); }
.section-alt .eyebrow { color: var(--gold); }
.section-alt .eyebrow::before { background: var(--gold); }

/* ---------- Buttons: pills, like the palette swatches ---------- */
.btn-gold,
.btn-outline-ivory,
.btn-ghost-forest,
.btn-ghost-ivory {
  border-radius: 999px;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 600;
  padding: 15px 30px;
  line-height: 1.2;
}

.btn-gold {
  background: var(--orange);
  border-color: var(--orange);
  color: #F8F4E9;
  box-shadow: 0 14px 30px -16px rgba(106, 28, 68, .5);
}
.btn-gold::before { background: var(--navy); border-radius: inherit; }
.btn-gold:hover { color: var(--gold) !important; }

/* On plum and midnight the primary action turns champagne. */
.navbar-aranya .btn-gold,
.hero-fullbleed .btn-gold,
.section-alt .btn-gold,
.brochure-band .btn-gold,
.location-card .btn-gold,
.auth-section .btn-gold,
.footer .btn-gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: 0 14px 30px -14px rgba(106, 28, 68, .45);
}
.navbar-aranya .btn-gold::before,
.hero-fullbleed .btn-gold::before,
.section-alt .btn-gold::before,
.brochure-band .btn-gold::before,
.auth-section .btn-gold,
.footer .btn-gold::before { background: var(--ivory); }
.navbar-aranya .btn-gold:hover,
.hero-fullbleed .btn-gold:hover,
.section-alt .btn-gold:hover,
.brochure-band .btn-gold:hover,
.auth-section .btn-gold,
.footer .btn-gold:hover { color: var(--plum) !important; }

.btn-ghost-forest {
  border: 1px solid rgba(106, 28, 68, .45);
  color: var(--plum);
}
.btn-ghost-forest:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--ivory);
}
.section-alt .btn-ghost-forest {
  border-color: rgba(246, 219, 192, .45);
  color: var(--champagne);
}
.section-alt .btn-ghost-forest:hover {
  background: var(--champagne);
  color: var(--plum);
}

.btn-ghost-ivory,
.btn-outline-ivory {
  border: 1px solid rgba(248, 244, 233, .55);
  color: var(--ivory);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-ghost-ivory:hover,
.btn-outline-ivory:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--plum);
}

/* ---------- Navigation: Royal Plum ---------- */
.navbar-aranya .brand {
  width: auto;
  height: 44px;
  padding: 0;
  overflow: visible;
}
.brand-logo {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 575px) {
  .navbar-aranya .brand { width: auto; height: 34px; padding: 0; }
}

.navbar-aranya .nav-link {
  color: rgba(248, 244, 233, .86) !important;
  font-size: .72rem;
  letter-spacing: .14em;
  font-weight: 500;
  opacity: 1;
}
.navbar-aranya .nav-link::after { background: var(--champagne); }
.navbar-aranya .nav-link:hover,
.navbar-aranya .nav-link.active { color: var(--champagne) !important; }

.navbar-aranya .nav-cta {
  box-sizing: border-box;
  flex: 0 0 132px;
  font-size: .66rem;
  letter-spacing: .04em;
  min-width: 0;
  padding: 13px 8px;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .navbar-aranya .brand {
    transform: translateX(-24px);
  }
}

.navbar-aranya.scrolled,
body.is-inner-page .navbar-aranya {
  background: rgba(106, 28, 68, .96);
  box-shadow: 0 12px 34px -18px rgba(106, 28, 68, .7);
}

@media (max-width: 1399.98px) {
  .navbar-collapse {
    background: var(--plum);
    border-bottom: 1px solid rgba(246, 219, 192, .35);
    border-radius: 0 0 18px 18px;
    padding: 18px 22px 22px;
    margin-top: 12px;
  }
  .navbar-aranya .nav-cta { margin-top: 14px; display: inline-block; }
}

@media (min-width: 1400px) {
  .navbar-aranya .navbar-nav {
    background: rgba(248, 244, 233, .07);
    border: 1px solid rgba(246, 219, 192, .22);
  }
  .navbar-aranya .navbar-nav:hover {
    background: rgba(248, 244, 233, .11);
    border-color: rgba(246, 219, 192, .38);
  }
  body.is-inner-page .navbar-aranya {
    background: linear-gradient(180deg, rgba(106, 28, 68, .97), rgba(106, 28, 68, .9));
  }
  .navbar-aranya.scrolled { background: rgba(106, 28, 68, .9); }
  .navbar-aranya .nav-cta { margin-left: 14px; }
}

/* ---------- Hero ---------- */
.hero-fullbleed {
  background-image:
    linear-gradient(96deg, rgba(106, 28, 68, .88) 0%, rgba(106, 28, 68, .66) 36%, rgba(106, 28, 68, .2) 62%, rgba(106, 28, 68, 0) 80%),
    linear-gradient(180deg, rgba(106, 28, 68, .45) 0%, rgba(106, 28, 68, .2) 55%, rgba(106, 28, 68, .92) 100%),
    url('../assets/crisantho-hero-clean.webp');
}
@media (max-width: 991px) {
  .hero-fullbleed {
    background-image:
      linear-gradient(180deg, rgba(106, 28, 68, .62) 0%, rgba(106, 28, 68, .5) 45%, rgba(106, 28, 68, .94) 100%),
      url('../assets/crisantho-hero-clean.webp');
  }
}
.hero-fullbleed h1 {
  font-size: clamp(3.3rem, 7.4vw, 6.4rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.015em;
}
.hero-fullbleed h1 em { color: var(--champagne); font-weight: 400; }
.hero-fullbleed .hero-sub { color: rgba(248, 244, 233, .86); }
.hero-fullbleed .eyebrow { color: var(--champagne); }
.hero-fullbleed .eyebrow::before { background: var(--champagne); }

.hero-badge-card {
  background: rgba(106, 28, 68, .5);
  border: 1px solid rgba(246, 219, 192, .22);
  border-radius: 20px;
  padding: 30px 30px 26px;
}
.hero-badge-card h4 {
  color: var(--champagne);
  font-size: .68rem;
  letter-spacing: .3em;
}
.hero-badge-card p { color: rgba(248, 244, 233, .78); font-size: .88rem; }
.hero-badge-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 6px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(246, 219, 192, .18);
}
.hero-badge-split div + div { padding-left: 18px; border-left: 1px solid rgba(246, 219, 192, .18); }
.hero-badge-split strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--ivory);
}
.hero-badge-split span {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* ---------- Stats ---------- */
.stats-band { padding: 96px 0; }
.stat-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 5vw, 4.4rem);
  color: var(--champagne);
  text-shadow: none;
}
.stat-cap { color: rgba(248, 244, 233, .72); font-size: .68rem; letter-spacing: .22em; }
.section-alt .row > [class*="col-"] + [class*="col-"] .stat-num { position: relative; }

/* ---------- Imagery ---------- */
.about-img-wrap img,
.lg-item,
.gal-item,
.hscroll-item img,
.plan-frame { border-radius: 18px; }
.about-img-wrap img { box-shadow: 0 40px 70px -34px rgba(106, 28, 68, .45); }

.about-badge {
  background: var(--plum);
  border-radius: 18px;
  padding: 24px 30px;
  box-shadow: 0 26px 50px -20px rgba(106, 28, 68, .55);
}
.about-badge .num { color: var(--champagne); font-size: 2.6rem; font-weight: 500; }
.about-badge .cap { color: rgba(248, 244, 233, .8); }

.about-points li { border-top-color: var(--linen); }
.about-points i { color: var(--gold); }
.about-points b { color: var(--plum); }
.about-points div { color: var(--ink-muted); }

.plan-frame {
  background: #F8F4E9;
  border: 1px solid var(--linen);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.plan-frame img { width: 100%; display: block; border-radius: 10px; }

.lg-item { display: block; }
.lg-item span {
  background: linear-gradient(0deg, rgba(106, 28, 68, .78), transparent 72%);
  font-size: .7rem;
  letter-spacing: .18em;
  padding: 18px 20px;
}

/* ---------- Project highlights ---------- */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
}
.fact {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 16px;
  padding: 24px 24px 22px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.fact:hover {
  transform: translateY(-4px);
  border-color: rgba(106, 28, 68, .25);
  box-shadow: var(--shadow-soft);
}
.fact dt {
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
  margin-bottom: 8px;
}
.fact dd {
  font-family: var(--serif);
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--plum);
  margin: 0;
  font-weight: 500;
}

/* ---------- Pillars ---------- */
.pillar-row { border-top-color: var(--linen); align-items: center; gap: 22px; }
.pillar-row:last-child { border-bottom-color: var(--linen); }
.pillar-row:hover { background: transparent; padding-left: 12px; }
.pillar-row:hover .pillar-title { color: var(--mauve); }
.pillar-num {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--champagne-100);
  border: 1px solid var(--champagne);
  display: grid;
  place-items: center;
  color: var(--plum);
  font-size: 1.15rem;
  font-weight: 500;
}
.section-blush .pillar-num { background: var(--ivory); }
.pillar-body { flex: 1; }
.pillar-title { font-size: 1.7rem; color: var(--plum); margin-bottom: 4px; }
.pillar-desc { color: var(--ink-muted); opacity: 1; }
.pillars-list__label {
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
  margin-bottom: 18px;
}
@media (min-width: 992px) {
  .sticky-column { position: sticky; top: 130px; }
}

/* ---------- Configurations ---------- */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.config-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 20px;
  color: inherit;
  transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.config-card__type {
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}
.config-card__area {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.05;
  color: var(--plum);
  font-weight: 500;
}
.config-card__area small { font-size: 1rem; }
.config-card__go {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--linen);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum);
  display: flex;
  justify-content: space-between;
}
.config-card:hover {
  background: var(--plum);
  border-color: var(--plum);
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -28px rgba(106, 28, 68, .7);
}
.config-card:hover .config-card__type,
.config-card:hover .config-card__go { color: var(--champagne); }
.config-card:hover .config-card__area { color: var(--ivory); }
.config-card:hover .config-card__go { border-top-color: rgba(246, 219, 192, .25); }

.tier-strip {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tier-strip > div {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tier-strip > div + div { border-left: 1px solid var(--line); }
.tier-strip span {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--plum);
}
.tier-strip b { font-weight: 500; font-size: .86rem; color: var(--ink-muted); }
@media (max-width: 767.98px) {
  .tier-strip { grid-template-columns: 1fr; }
  .tier-strip > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Lists ---------- */
.tick-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 30px;
  display: grid;
  gap: 12px;
}
.tick-list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 16px;
  height: 1px;
  background: var(--gold);
}

.list-label {
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
  margin-bottom: 16px;
}
.chip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-list li {
  padding: 11px 20px;
  border: 1px solid var(--linen);
  background: #F8F4E9;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--ink);
  transition: border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.chip-list li:hover { border-color: var(--plum); color: var(--plum); transform: translateY(-2px); }

.check-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
}
.check-grid li {
  padding: 15px 0 15px 32px;
  border-bottom: 1px solid var(--linen);
  position: relative;
  color: var(--ink);
}
.check-grid li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--gold);
}
@media (max-width: 575.98px) { .check-grid { grid-template-columns: 1fr; } }

.arena-figures { display: flex; gap: 28px; margin-top: 30px; }
.arena-figures div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.arena-figures strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1;
  color: var(--plum);
}
.arena-figures span {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- Hub cards (amenity teasers on midnight) ---------- */
.hub-card { border-radius: 20px; background: var(--ivory); border-color: var(--linen); }
.hub-card h3 { font-size: 1.8rem; }
.hub-card p { color: var(--ink-muted); }
.hub-card::after { background: linear-gradient(90deg, var(--plum), var(--gold)); }
.hub-grid--dark .hub-card {
  background: rgba(248, 244, 233, .04);
  border: 1px solid rgba(246, 219, 192, .16);
}
.hub-grid--dark .hub-card h3 { color: var(--ivory); }
.hub-grid--dark .hub-card p { color: rgba(248, 244, 233, .7); }
.hub-grid--dark .hub-card__num,
.hub-grid--dark .hub-card__go { color: var(--champagne); }
.hub-grid--dark .hub-card::after { background: linear-gradient(90deg, var(--gold), var(--champagne)); }
.hub-grid--dark .hub-card:hover {
  background: rgba(248, 244, 233, .08);
  border-color: rgba(246, 219, 192, .42);
  box-shadow: 0 30px 60px -30px rgba(106, 28, 68, .7);
}

.text-center .section-title[data-scrub]::after,
.mx-auto > .section-title[data-scrub]::after { margin-left: auto; margin-right: auto; }
@media (min-width: 1200px) {
  .hub-grid--dark { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hub-grid--dark { grid-template-columns: repeat(2, 1fr); }
}

/* Pages that open on their own dark band (portal, careers) sit flush under
   the header; those bands carry their own top padding. */
.page-shell--flush { padding-top: 0; }

/* Bootstrap's g-5 gutter (-24px each side) is wider than the 12px phone
   container padding, which pushed rows past the screen edge. */
@media (max-width: 575.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
  .about-badge { right: 12px; bottom: -22px; padding: 18px 22px; }
  .config-grid, .facts-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .config-card { padding: 20px 18px 18px; border-radius: 16px; }
  .config-card__area { font-size: 1.55rem; }
  .fact { padding: 18px 16px; border-radius: 14px; }
  .fact dd { font-size: 1.3rem; }
}

/* ---------- Feature cards, clubhouse, zones ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.feature {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 20px;
  padding: 28px 28px 24px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.feature__meta {
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}
.feature h4 { font-size: 1.75rem; margin: 10px 0 8px; }
.feature p { color: var(--ink-muted); margin: 0; font-size: .95rem; }
@media (max-width: 575.98px) { .feature-grid { grid-template-columns: 1fr; } }

.club-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.club-group {
  background: rgba(248, 244, 233, .04);
  border: 1px solid rgba(246, 219, 192, .16);
  border-radius: 20px;
  padding: 30px 28px;
}
.club-group--wide { grid-column: span 2; }
.club-group i { font-size: 1.4rem; color: var(--champagne); }
.club-group h4 { font-size: 1.6rem; margin: 12px 0 14px; color: var(--ivory); }
.club-group ul { list-style: none; padding: 0; margin: 0; }
.club-group li {
  padding: 9px 0;
  border-top: 1px solid rgba(246, 219, 192, .12);
  color: rgba(248, 244, 233, .82);
  font-size: .94rem;
}
.club-group ul.two-col { columns: 2; column-gap: 28px; }
.club-group ul.two-col li { break-inside: avoid; }
@media (max-width: 991.98px) {
  .club-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .club-grid { grid-template-columns: 1fr; }
  .club-group--wide { grid-column: auto; }
  .club-group ul.two-col { columns: 1; }
}

.zone-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.zone-group {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 20px;
  padding: 30px 30px 18px;
}
.zone-group h4 { font-size: 1.7rem; margin-bottom: 12px; }
.zone-group ul { list-style: none; padding: 0; margin: 0; counter-reset: zone; }
.zone-group li {
  counter-increment: zone;
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--linen);
  color: var(--ink);
  font-size: .94rem;
}
.zone-group li::before {
  content: counter(zone, decimal-leading-zero);
  font-family: var(--serif);
  color: var(--gold-ink);
  min-width: 22px;
}
@media (max-width: 767.98px) { .zone-columns { grid-template-columns: 1fr; } }

.location-card {
  position: relative;
  border-radius: 24px;
  padding: 48px 44px;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(106, 28, 68, .45), transparent 60%),
    linear-gradient(145deg, var(--plum), var(--midnight));
  color: var(--ivory);
  box-shadow: 0 40px 70px -36px rgba(106, 28, 68, .7);
  overflow: hidden;
}
.location-card > i { font-size: 2rem; color: var(--champagne); }
.location-card__label {
  display: block;
  margin-top: 18px;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
}
.location-card strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  margin: 10px 0 6px;
}
.location-card p { color: rgba(248, 244, 233, .82); margin: 0 0 24px; }
.location-card__routes { display: flex; gap: 10px; }
.location-card__routes span {
  padding: 8px 18px;
  border: 1px solid rgba(246, 219, 192, .35);
  border-radius: 999px;
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--champagne);
}

/* ---------- Residences page ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 991.98px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card { margin: 0; }
.plan-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 14px;
  background: #F8F4E9;
  border: 1px solid var(--linen);
  border-radius: 18px;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.plan-card__media img { width: 100%; height: 100%; object-fit: contain; }
.plan-card__media:hover {
  border-color: rgba(106, 28, 68, .3);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}
.plan-card figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 4px 0;
}
.plan-card__type { font-family: var(--serif); font-size: 1.5rem; color: var(--plum); }
.plan-card__area { font-size: .8rem; letter-spacing: .08em; color: var(--ink-muted); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tier-card {
  border-radius: 22px;
  padding: 40px 34px;
  background: rgba(248, 244, 233, .04);
  border: 1px solid rgba(246, 219, 192, .18);
  text-align: center;
}
.tier-card__name {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--champagne);
  margin-bottom: 10px;
}
.tier-card b {
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 244, 233, .82);
}
.tier-card--featured {
  background: var(--champagne);
  border-color: var(--champagne);
}
.tier-card--featured .tier-card__name { color: var(--plum); }
.tier-card--featured b { color: var(--plum-700); }
@media (max-width: 767.98px) { .tier-grid { grid-template-columns: 1fr; } }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.spec {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 18px;
  padding: 26px 24px 22px;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.spec:hover { border-color: rgba(106, 28, 68, .25); box-shadow: var(--shadow-soft); }
.spec i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--champagne-100);
  color: var(--plum);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}
.spec h4 {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 16px 0 8px;
}
.spec p { color: var(--ink-muted); font-size: .9rem; line-height: 1.65; margin: 0; }

/* ---------- Amenity tiles ---------- */
.amenity-tile {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 18px;
  padding: 28px 12px 24px;
}
.amenity-tile i { color: var(--plum); }
.amenity-tile span { color: var(--ink); }
.amenity-tile:hover { background: var(--plum); border-color: var(--plum); }
.amenity-tile:hover i,
.amenity-tile:hover span { color: var(--champagne); }

/* ---------- Eco / wellness cards on midnight ---------- */
.eco-card {
  border-radius: 20px;
  background: rgba(248, 244, 233, .04);
  border: 1px solid rgba(246, 219, 192, .16);
  padding: 28px;
}
.eco-card:hover { background: rgba(248, 244, 233, .08); }
.eco-card i { color: var(--champagne); }
.eco-card h4 { font-family: var(--serif); font-size: 1.45rem; font-weight: 500; color: var(--ivory); }
.eco-card p { color: rgba(248, 244, 233, .72); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 24px 48px 24px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--plum);
  line-height: 1.25;
}
.faq-q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--plum), var(--plum)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--plum), var(--plum)) center / 1.5px 14px no-repeat;
  transition: transform .4s var(--ease);
}
.faq-q:not(.collapsed)::after { transform: rotate(45deg); }
.faq-q:hover { color: var(--mauve); }
.faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq-a { color: var(--ink-muted); padding: 0 48px 26px 0; margin: 0; line-height: 1.8; }

/* ---------- Brochure band ---------- */
.brochure-band { padding: 0 0 128px; background: var(--ivory); }
.section-blush + .brochure-band { padding-top: 128px; }
.brochure-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border-radius: 28px;
  padding: 60px 64px;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(106, 28, 68, .4), transparent 60%),
    linear-gradient(135deg, var(--plum), var(--midnight));
  box-shadow: 0 44px 80px -40px rgba(106, 28, 68, .75);
}
.brochure-band__inner > div { max-width: 640px; }
.brochure-band .eyebrow { color: var(--champagne); }
.brochure-band .section-title { color: var(--ivory); font-size: clamp(2.1rem, 4vw, 3.2rem); }
.brochure-band .section-title em { color: var(--champagne); }
.brochure-band .lede { color: rgba(248, 244, 233, .78); }
@media (max-width: 767.98px) {
  .brochure-band { padding-bottom: 84px; }
  .section-blush + .brochure-band { padding-top: 84px; }
  .brochure-band__inner { padding: 40px 28px; border-radius: 22px; }
}

/* ---------- Enquiry ---------- */
.enquiry-band { background: var(--champagne-100); border-top: 0; padding: 128px 0; }
.enquiry-band__actions { margin-top: 26px; }
.enquiry-band__direct { color: var(--ink-muted); }
.enquiry-band__direct a { color: var(--plum); border-bottom-color: var(--champagne); }
.enquiry-card {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 24px;
  padding: 40px 36px 32px;
  box-shadow: 0 40px 70px -40px rgba(106, 28, 68, .4);
}
.enquiry-card__title {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--plum);
  margin-bottom: 20px;
}
.enquiry-card__note { color: var(--ink-muted); }

/* ---------- Forms: light fields on ivory ---------- */
.form-label-lux,
.contact-form .form-label {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}
.form-control-lux,
.contact-form .form-control,
.contact-form .form-select {
  background: #F8F4E9;
  border: 1px solid var(--linen);
  color: var(--ink);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--sans);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-control-lux::placeholder,
.contact-form .form-control::placeholder { color: rgba(110, 90, 99, .6); }
.form-control-lux:focus,
.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--plum);
  box-shadow: 0 0 0 4px rgba(106, 28, 68, .1);
  outline: none;
  background: #F8F4E9;
  color: var(--ink);
}
select.form-control-lux option { background: #F8F4E9; color: var(--ink); }

/* The portal sign-in stays on midnight, so its fields stay dark. */
.auth-section .form-control-lux {
  background: rgba(106, 28, 68, .55);
  border-color: rgba(246, 219, 192, .25);
  color: var(--ivory);
}
.auth-section .form-control-lux:focus {
  background: rgba(106, 28, 68, .7);
  border-color: var(--champagne);
  color: var(--ivory);
  box-shadow: 0 0 0 4px rgba(246, 219, 192, .1);
}
.auth-section .form-label-lux { color: var(--champagne); }
.auth-section {
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(106, 28, 68, .3), transparent 60%),
    var(--midnight);
}
.auth-card {
  background: rgba(106, 28, 68, .28);
  border: 1px solid rgba(246, 219, 192, .18);
  border-radius: 24px;
}
.auth-tabs { background: rgba(106, 28, 68, .7); border-color: rgba(246, 219, 192, .18); border-radius: 999px; }
.auth-tab { border-radius: 999px; color: var(--champagne); }
.auth-tab.active { background: var(--gold); color: var(--navy); }

.contact-info-card {
  background: var(--ivory);
  border: 1px solid var(--linen);
  border-radius: 22px;
  padding: 8px 26px;
}
.ci-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}
.ci-row + .ci-row { border-top: 1px solid var(--linen); }
.ci-row > i {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--champagne-100);
  color: var(--plum);
  display: grid;
  place-items: center;
}
.ci-row b {
  display: block;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
}
/* min-width lets the text column shrink, so a long email address breaks
   instead of pushing the page wider than a phone screen. */
.ci-row > div { min-width: 0; }
.ci-row span, .ci-row a { color: var(--ink); overflow-wrap: anywhere; }
.ci-row a:hover { color: var(--plum); }

/* ---------- Modals ---------- */
.modal-content { background: var(--ivory); border-radius: 24px; overflow: hidden; }
.luxury-modal h3 em { color: var(--mauve); }
.btn-close-luxury { color: var(--plum); }
.btn-close-luxury:hover { background: var(--champagne-100); }
#brochureModal .modal-header { border-bottom: 1px solid var(--linen); }
#brochureModal .modal-content { border-radius: 24px !important; }
.pm-fact, .pm-block { background: var(--champagne-100); border-radius: 12px; }

/* ---------- Lightbox, toast, floating actions ---------- */
.lightbox { background: rgba(106, 28, 68, .94); }
.lightbox img { border-radius: 12px; background: #F8F4E9; }
.lightbox-close { border-color: rgba(246, 219, 192, .45); color: var(--champagne); }

.app-toast {
  background: var(--plum);
  border-left: 0;
  border-radius: 999px;
  padding: 14px 26px;
}
.app-toast .text-gold { color: var(--champagne) !important; }

.social-drawer-btn {
  background: var(--plum);
  color: var(--champagne);
  border: 1px solid rgba(246, 219, 192, .45);
}
.social-drawer-btn:hover { background: var(--gold); color: var(--navy); }
/* Only where the page margin can hold it without covering the content. */
@media (max-width: 1299.98px) { .social-drawer { display: none; } }

/* ---------- Pager, veil, progress ---------- */
.page-pager { background: var(--plum); border-top: 0; }
.page-pager__link { color: rgba(248, 244, 233, .82); }
.page-pager__dir { color: var(--champagne); }
.page-pager__link:hover { color: var(--ivory); }


.scroll-progress { background: rgba(106, 28, 68, .12); }
.scroll-progress__bar {
  background: linear-gradient(90deg, var(--plum), var(--gold), var(--champagne));
  box-shadow: none;
}

/* ---------- Footer: Midnight Plum ---------- */
.footer {
  background: var(--midnight);
  border-top: 0;
  color: rgba(248, 244, 233, .72);
  padding-top: 88px;
}
.footer-brand { display: inline-block; }
.footer-brand img { height: 40px; width: auto; display: block; }
.footer .footer-tagline {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--ivory);
  margin: 22px 0 8px;
}
.footer-tagline em { color: var(--champagne); }
.footer .footer-blurb { font-size: .92rem; line-height: 1.75; max-width: 340px; }
.footer h5 {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: 600;
  margin-bottom: 20px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { color: rgba(248, 244, 233, .82); transition: color .3s var(--ease); }
.footer a:hover { color: var(--champagne); }
.footer p { font-size: .92rem; line-height: 1.8; }
.footer-label {
  display: block;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(246, 219, 192, .7);
}
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(246, 219, 192, .3);
  display: grid;
  place-items: center;
  color: var(--champagne);
}
.footer-social a:hover { background: var(--gold); color: var(--navy); }
.footer-bottom { border-top-color: rgba(246, 219, 192, .14); }
.footer-bottom p { color: rgba(248, 244, 233, .55); font-size: .78rem; letter-spacing: .04em; }

/* ---------- Gallery ---------- */
.hscroll-item figcaption { color: var(--gold-ink); }
.hscroll-item img { box-shadow: 0 30px 60px -36px rgba(106, 28, 68, .55); }

/* ---------- Master plan: explorer frame ---------- */
.mpx-explorer { border-radius: 22px; border-color: var(--linen); }

/* ---------- Canopy line: a quiet gold thread ---------- */