/* Marsan Properties — Design System */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Roboto:wght@400;500;700&display=swap');

/* ─── Roboto-for-numerals override ────────────────────────────────────────
   Two-pronged approach so digits render in Roboto everywhere:

   1. A standalone "MarsanNum" family (added to the front of every CSS-var
      font stack) — wins for elements that use --font-serif/sans/mono.
   2. A unicode-ranged @font-face under each existing family name
      ("Cormorant Garamond", "Inter", "JetBrains Mono") — so even inline
      `fontFamily: 'Cormorant Garamond, serif'` styles get Roboto digits.
*/
@font-face {
  font-family: 'MarsanNum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'MarsanNum';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'MarsanNum';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}

/* The same Roboto faces, registered under the existing family names so that
   inline `fontFamily: 'Inter'` and `fontFamily: 'Cormorant Garamond, serif'`
   pick up Roboto for digits via the unicode-range mechanism. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-500-italic.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto@5.0.13/files/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/roboto-mono@5.0.12/files/roboto-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+0025, U+20B9, U+0024, U+002B, U+002D, U+002F, U+0028, U+0029, U+2013, U+2014;
}

:root {
  /* Brand palette — emerald & gold luxury */
  --emerald-deepest: #0a1f17;
  --emerald-deep: #0f2a1f;
  --emerald: #143a2a;
  --emerald-mid: #1a4c38;
  --emerald-soft: #2a5a44;

  --gold: #c9a55c;
  --gold-bright: #e2bd6b;
  --gold-soft: #d4b06a;
  --gold-deep: #a88841;
  --champagne: #e8dcc1;

  --ivory: #f6f1e6;
  --ivory-warm: #efe8d8;
  --beige: #d9cfb8;
  --beige-warm: #c9bd9f;

  --charcoal: #2a2622;
  --charcoal-soft: #4a4540;
  --stone: #8c857b;
  --stone-soft: #b4ad9f;

  /* Type — 'MarsanNum' is a Roboto subset that only contains digits and
     numeric punctuation (see @font-face above). Listed first so digits
     render in Roboto while letters fall through to the next family. */
  --font-serif: 'MarsanNum', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:  'MarsanNum', 'Inter', system-ui, sans-serif;
  --font-mono:  'MarsanNum', 'JetBrains Mono', monospace;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(10, 31, 23, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 31, 23, 0.12);
  --shadow-lg: 0 20px 60px rgba(10, 31, 23, 0.18);
  --shadow-gold: 0 8px 32px rgba(201, 165, 92, 0.25);

  /* Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
}

* { box-sizing: border-box; }

.ms-root {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ms-root.dark {
  background: var(--emerald-deepest);
  color: var(--ivory);
}

/* Typographic primitives */
.ms-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.ms-eyebrow.on-dark { color: var(--gold-bright); }

.ms-display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.ms-h1 { font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 1.05; letter-spacing: -0.01em; }
.ms-h2 { font-family: var(--font-serif); font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -0.005em; }
.ms-h3 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; }
.ms-h4 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; }

.ms-body { font-size: 15px; line-height: 1.65; color: var(--charcoal-soft); }
.ms-small { font-size: 13px; line-height: 1.5; color: var(--stone); }
.ms-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--stone); }

/* Gold divider */
.ms-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  width: 64px;
}
.ms-divider-tall {
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

/* Buttons */
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,
              background-position 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.3s ease;
}

/* Primary — gold gradient. Hover: diagonal shine sweep + lift. */
.ms-btn-primary {
  color: var(--emerald-deepest);
  box-shadow: var(--shadow-gold);
  background-image:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%),
    linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold-deep) 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
}
.ms-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 36px rgba(201, 165, 92, 0.45);
  background-position: -50% 0, 0 0;
}
.ms-btn-primary:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(201, 165, 92, 0.35); }

/* Ghost (light on dark) — soft gold tint slides in from the left on hover. */
.ms-btn-ghost {
  color: var(--ivory);
  border: 1px solid rgba(232, 220, 193, 0.35);
  background-image: linear-gradient(90deg, rgba(201,165,92,0.22) 50%, transparent 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
}
.ms-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background-position: 0 0;
}

/* Ghost-dark (dark on light) — emerald fill slides in from the left on hover. */
.ms-btn-ghost-dark {
  color: var(--emerald-deep);
  border: 1px solid var(--emerald-deep);
  background-image: linear-gradient(90deg, var(--emerald-deep) 50%, transparent 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
}
.ms-btn-ghost-dark:hover {
  color: var(--gold-bright);
  background-position: 0 0;
}
.ms-btn-sm { padding: 10px 18px; font-size: 11px; }
.ms-btn-lg { padding: 18px 36px; font-size: 13px; }

/* Card surfaces */
.ms-card {
  background: #fff;
  border: 1px solid var(--beige);
  transition: all 0.3s ease;
}
.ms-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ms-card-glass {
  background: rgba(246, 241, 230, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(232, 220, 193, 0.18);
}

/* Image placeholder — striped, sophisticated */
.ms-img-ph {
  background:
    linear-gradient(135deg, rgba(20, 58, 42, 0.82), rgba(20, 58, 42, 0.92)),
    repeating-linear-gradient(45deg,
      rgba(201, 165, 92, 0.18) 0px,
      rgba(201, 165, 92, 0.18) 1px,
      transparent 1px,
      transparent 14px);
  background-color: var(--emerald);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 220, 193, 0.55);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ms-img-ph::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201, 165, 92, 0.22);
}
.ms-img-ph.beige {
  background:
    linear-gradient(135deg, rgba(217, 207, 184, 0.95), rgba(201, 189, 159, 0.95)),
    repeating-linear-gradient(45deg,
      rgba(168, 136, 65, 0.22) 0px,
      rgba(168, 136, 65, 0.22) 1px,
      transparent 1px,
      transparent 14px);
  color: var(--charcoal-soft);
}

/* Badges / chips */
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--beige);
  background: rgba(255,255,255,0.9);
  color: var(--charcoal);
}
.ms-chip.gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  border-color: var(--gold-deep);
  color: var(--emerald-deepest);
}
.ms-chip.emerald {
  background: var(--emerald-deep);
  border-color: var(--emerald-soft);
  color: var(--gold-bright);
}
.ms-chip.dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Status pill */
.ms-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ms-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ms-status.available::before { background: #4ea676; box-shadow: 0 0 0 3px rgba(78, 166, 118, 0.18); }
.ms-status.upcoming::before { background: var(--gold-bright); box-shadow: 0 0 0 3px rgba(226, 189, 107, 0.18); }
.ms-status.sold::before { background: #b04a3a; box-shadow: 0 0 0 3px rgba(176, 74, 58, 0.18); }
.ms-status.few::before { background: #d68d3a; box-shadow: 0 0 0 3px rgba(214, 141, 58, 0.18); }

/* Logo lockup */
.ms-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.ms-logo img { height: 44px; width: 44px; object-fit: contain; }
.ms-logo-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
}
.ms-logo-text-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.7;
}

/* Form inputs */
.ms-input, .ms-select {
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--beige);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.2s;
}
.ms-input:focus, .ms-select:focus { border-color: var(--gold); }
.ms-input.dark, .ms-select.dark {
  background: rgba(255,255,255,0.04);
  border-color: rgba(232, 220, 193, 0.2);
  color: var(--ivory);
}
.ms-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 8px;
}
.ms-label.on-dark { color: var(--gold-bright); }

/* Page chrome backgrounds */
.ms-bg-emerald {
  background:
    radial-gradient(ellipse at top, rgba(20, 58, 42, 0.7), var(--emerald-deepest) 60%),
    var(--emerald-deepest);
  color: var(--ivory);
}
.ms-bg-ivory { background: var(--ivory); color: var(--charcoal); }
.ms-bg-cream { background: var(--ivory-warm); color: var(--charcoal); }

/* Grain texture for emerald sections */
.ms-grain {
  position: relative;
}
.ms-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.65 0 0 0 0 0.36 0 0 0 0.5 0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.18'/></svg>");
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Scrollbar (light surfaces) */
.ms-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ms-scroll::-webkit-scrollbar-track { background: transparent; }
.ms-scroll::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 4px; }
.ms-scroll::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Utility */
.ms-stack { display: flex; flex-direction: column; }
.ms-row { display: flex; }
.ms-grid { display: grid; }
.ms-uppercase { text-transform: uppercase; letter-spacing: 0.18em; }


/* === Motion enhancements === */
@keyframes msKenBurns {
  0% { transform: scale(1.05) translate(0, 0); }
  50% { transform: scale(1.15) translate(-1.5%, -1%); }
  100% { transform: scale(1.05) translate(0, 0); }
}
.ms-kenburns { animation: msKenBurns 22s ease-in-out infinite; transform-origin: center center; }

@keyframes msTypeWordIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.ms-type-reveal > span,
.ms-type-reveal > em {
  display: inline-block;
  opacity: 0;
  animation: msTypeWordIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes msFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -30px); }
}
@keyframes msPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,165,92,0.5); }
  50% { box-shadow: 0 0 0 16px rgba(201,165,92,0); }
}
@keyframes msShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes msSpin { to { transform: rotate(360deg); } }
@keyframes msFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes msFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes msProgress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* === Animations promoted from the Extras / Utility canvas =============== */
@keyframes msTypeReveal {
  from { opacity: 0; transform: translateY(20px); letter-spacing: 0.1em; }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: -0.04em; }
}
@keyframes msLift {
  0%, 100% { transform: translateY(0);   box-shadow: 0 0 0 transparent; }
  50%      { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(201,165,92,0.3); }
}
@keyframes msRevealBars {
  0%, 100% { opacity: 0.3; transform: translateY(8px); }
  50%      { opacity: 1;   transform: translateY(0); }
}
@keyframes msPulseRing {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes msSlide {
  0%, 100% { flex: 1; }
  50%      { flex: 0.2; }
}
@keyframes msCount {
  0%   { opacity: 0; transform: translateY(8px); }
  60%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; }
}
@keyframes msPageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page-level fade-in: every page applies this on first paint. */
.ms-root { animation: msPageEnter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Map-pin halo — wrap a price pin in a .ms-pin-pulse parent and use
   .ms-pin-pulse__ring as a pseudo-halo. */
.ms-pin-pulse__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(201, 165, 92, 0.7);
  animation: msPulseRing 1.8s ease-out infinite;
  pointer-events: none;
}

/* Numeric counter — used by the <CountUp/> helper. */
.ms-count { display: inline-block; }
.ms-count.ms-count--in { animation: msCount 0.9s ease both; }

/* Hover-lift — opt-in via class="ms-lift". Subtle 4px lift + gold shadow. */
.ms-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ms-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(201, 165, 92, 0.25); }

/* Stagger helper for ms-reveal — children get cascaded 80ms delays. */
.ms-reveal-stagger > .ms-reveal:nth-child(1) { transition-delay: 0.04s; }
.ms-reveal-stagger > .ms-reveal:nth-child(2) { transition-delay: 0.12s; }
.ms-reveal-stagger > .ms-reveal:nth-child(3) { transition-delay: 0.20s; }
.ms-reveal-stagger > .ms-reveal:nth-child(4) { transition-delay: 0.28s; }
.ms-reveal-stagger > .ms-reveal:nth-child(5) { transition-delay: 0.36s; }
.ms-reveal-stagger > .ms-reveal:nth-child(6) { transition-delay: 0.44s; }

.ms-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.ms-reveal.is-in { opacity: 1; transform: translateY(0); }

.ms-skel {
  background: linear-gradient(90deg, rgba(201,165,92,0.10) 25%, rgba(226,189,107,0.30) 50%, rgba(201,165,92,0.10) 75%);
  background-size: 200% 100%;
  animation: msShimmer 1.6s linear infinite;
}

.ms-toast {
  position: fixed; right: 24px; bottom: 24px;
  background: #0a1f17; color: #e8dcc1;
  border: 1px solid rgba(201,165,92,0.4);
  padding: 14px 20px; box-shadow: 0 12px 32px rgba(10,31,23,0.35);
  font-size: 13px; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  animation: msFadeUp 0.4s ease;
}

.ms-mobile-only { display: none; }

@media (max-width: 960px) {
  body, .ms-root { font-size: 15px; }
  .ms-h1 { font-size: 44px !important; }
  .ms-h2 { font-size: 32px !important; }
  header.ms-header-shell { padding: 14px 18px !important; }
  header.ms-header-shell nav.ms-header-nav { display: none !important; }
  header.ms-header-shell .ms-header-cta { display: none !important; }
  .ms-mobile-only { display: inline-flex !important; }
  .ms-only-desktop { display: none !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .ms-collapse-mobile { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ms-mobile-stack { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
}

.ms-input::placeholder { color: rgba(74,69,64,0.5); }
.ms-input.dark::placeholder { color: rgba(232,220,193,0.5); }

input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: rgba(232,220,193,0.18); border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a55c, #e2bd6b);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(10,31,23,0.35);
  cursor: pointer;
}

.ms-loader {
  width: 28px; height: 28px;
  border: 2px solid rgba(201,165,92,0.25);
  border-top-color: #c9a55c;
  border-radius: 50%;
  animation: msSpin 0.7s linear infinite;
}

a { color: inherit; }
button { font-family: inherit; }

/* ──────────────────────────────────────────────────────────────────────
   MOBILE OVERRIDES — only fire at ≤ 768 px. Desktop is untouched.
   These have to be aggressive (lots of !important) because the JSX uses
   inline styles, which would otherwise win over class-based rules.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Kill any horizontal scroll, stop oversized children from blowing the box */
  html, body { overflow-x: hidden !important; }
  body, #root { width: 100% !important; max-width: 100vw !important; }
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  /* Sections: dial down the desktop 80–100 px padding */
  section,
  .ms-root > section,
  div[id="overview"], div[id="gallery"], div[id="amenities"],
  div[id="master-plan"], div[id="location"], div[id="investment"],
  div[id="enquire"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Typography */
  .ms-h1 { font-size: 38px !important; line-height: 1.06 !important; letter-spacing: -0.02em !important; }
  .ms-h2 { font-size: 26px !important; line-height: 1.15 !important; }
  h1 { font-size: 38px !important; line-height: 1.06 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h3 { font-size: 18px !important; }
  .ms-eyebrow { font-size: 10px !important; letter-spacing: 0.22em !important; }

  /* Big inline-styled headings — hero, enquire, master plan, etc. */
  [style*="font-family: 'Cormorant Garamond"][style*="font-size: 5"],
  [style*="font-family: 'Cormorant Garamond"][style*="font-size: 6"],
  [style*="font-family: 'Cormorant Garamond"][style*="font-size: 7"],
  [style*="font-family: 'Cormorant Garamond"][style*="font-size: 8"] {
    font-size: 36px !important;
    line-height: 1.06 !important;
  }
  [style*="font-family: Cormorant Garamond"][style*="fontSize: 5"],
  [style*="font-family: Cormorant Garamond"][style*="fontSize: 6"] {
    font-size: 36px !important;
  }

  /* Every multi-column grid → single column. Targets every inline style
     that sets grid-template-columns OR uses our .ms-collapse-mobile escape. */
  [style*="grid-template-columns"],
  .ms-collapse-mobile,
  .ms-mobile-stack {
    grid-template-columns: 1fr !important;
  }
  /* …and reset big gaps so things don't smash together with nothing between */
  [style*="gap: 64"], [style*="gap:64"],
  [style*="gap: 56"], [style*="gap:56"],
  [style*="gap: 48"], [style*="gap:48"],
  [style*="gap: 40"], [style*="gap:40"] {
    gap: 24px !important;
  }

  /* Flexbox rows that overflow horizontally — wrap, don't scroll */
  .ms-mobile-stack,
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }

  /* Buttons full-width when they share a row */
  .ms-btn-lg, .ms-btn-primary, .ms-btn-ghost, .ms-btn-ghost-dark {
    white-space: normal !important;
  }
  .ms-btn-lg { width: 100% !important; padding: 14px 20px !important; font-size: 12px !important; }

  /* HEADER — make the nav drawer opaque; it was bleeding through */
  header, [class*="ms-header"] { background: #0a1f17 !important; }
  /* Drawer/menu: solid background + above page content */
  nav[role="dialog"], .ms-nav-drawer,
  [data-ms-mobile-nav], [data-ms-mobile-menu] {
    background: #0a1f17 !important;
    z-index: 9000 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  }

  /* HERO — keep the visual but stop the right-edge clipping */
  section[style*="height: 720"], section[style*="height:720"],
  section[style*="min-height: 720"] {
    height: auto !important;
    min-height: 560px !important;
  }
  /* Stats panel: stack tiles + scale numerals */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* PROPERTY DETAIL — sidebar booking card stops overlapping */
  [style*="position: sticky"][style*="top:"] {
    position: static !important;
  }
  /* The "Book Site Visit" + "Enquire" sub-bar */
  [style*="display: flex"][style*="gap: 12"][style*="flex-wrap"] > * {
    flex: 1 1 calc(50% - 6px) !important;
  }

  /* MASTER PLAN MODAL — was 1fr|320px grid; collapse to a stacked sheet */
  div[style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    max-height: 100vh !important;
    overflow: auto !important;
  }
  /* Modal aside — full width, sit below the SVG */
  div[style*="grid-template-columns: 1fr 320px"] > aside {
    border-left: none !important;
    border-top: 1px solid rgba(201,165,92,0.2) !important;
    padding: 20px !important;
  }
  /* Modal padding shrinks so SVG can use the screen */
  div[style*="position: fixed"][style*="z-index: 9999"] {
    padding: 12px !important;
  }

  /* LIGHTBOX — give it room on small screens */
  div[style*="position: fixed"][style*="background: rgba(10,15,12,0.96)"] {
    padding: 12px !important;
  }

  /* GALLERY grid — was 2fr 1fr 1fr two-row; stack vertically */
  div[style*="grid-template-columns: 2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  div[style*="grid-template-columns: 2fr 1fr 1fr"] > * {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 240px !important;
  }

  /* AMENITIES grid: single column with separator borders kept */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* INVESTMENT compare table — already narrow on mobile, just allow scroll */
  [style*="overflow-x"], [style*="overflow:"] { -webkit-overflow-scrolling: touch !important; }

  /* ENQUIRE form */
  form, [class*="ms-form"] { width: 100% !important; }
  input.ms-input, textarea.ms-input, select.ms-input {
    width: 100% !important; box-sizing: border-box !important;
    font-size: 15px !important; /* >=16px stops iOS auto-zoom on focus */
    padding: 12px 14px !important;
  }
  /* Two-column form rows → stack */
  form [style*="display: grid"] { grid-template-columns: 1fr !important; }

  /* FOOTER */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* INSIGHTS card grid: 1 column, plenty of breathing room */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Long form labels / numerals don't overflow */
  .ms-meta, .ms-eyebrow { word-break: break-word !important; }

  /* Reduce sticky right rail in property detail */
  div[style*="grid-template-columns: 1fr 380px"],
  div[style*="grid-template-columns: 1fr 420px"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── HERO: kill the video on mobile (battery + readability) ─── */
  /* Disable the autoplaying <video> element entirely. Browsers stop
     downloading the source and the poster image stops being a video frame. */
  video {
    display: none !important;
  }

  /* The right-clipped 52% video container becomes a full-bleed image bg.
     We target its inline clip-path AND its sibling 52%-width inline style. */
  div[style*="clip-path: polygon"],
  div[style*="clipPath: polygon"] {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  /* Inside that container, the <img> needs to fill */
  div[style*="clip-path: polygon"] img,
  div[style*="clipPath: polygon"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Strong dark overlay on the hero so text is always readable on top of
     whatever the image is. Targets the gradient siblings already in the markup. */
  section [style*="linear-gradient(90deg, #0a1f17"],
  section [style*="linear-gradient(180deg, rgba(10,31,23"],
  section [style*="linear-gradient(135deg, #0a1f17"] {
    background: linear-gradient(180deg, rgba(10,31,23,0.35) 0%, rgba(10,31,23,0.85) 80%, #0a1f17 100%) !important;
  }

  /* Hero outer section — auto height, smaller top padding */
  section[style*="height: 720px"],
  section[style*="height:720px"],
  section[style*="min-height: 720"] {
    min-height: 100svh !important;
    height: auto !important;
  }
  section [style*="padding: 100px 56px 0"] {
    padding: 24px 20px 0 !important;
  }

  /* Hero h1 — was font-size: 92 inline. Mobile scale + smart wrapping. */
  h1.ms-type-reveal, h1.ms-h1, .ms-type-reveal {
    font-size: 36px !important;
    line-height: 1.04 !important;
    letter-spacing: -0.02em !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  /* Each animated word can wrap to its own line if needed */
  h1.ms-type-reveal > span, h1.ms-type-reveal > em {
    white-space: normal !important;
  }

  /* ─── BUY/INVEST/BUILD/COMMERCIAL tab strip ─── */
  /* Was width: fit-content + 4 inline-flex tabs, overflowed at ~360 px.
     Force the strip full-width and let the tabs share equally. */
  div[style*="background: rgba(255,255,255,0.04)"][style*="width: fit-content"] {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  div[style*="background: rgba(255,255,255,0.04)"][style*="width: fit-content"] > button {
    flex: 1 1 auto !important;
    padding: 10px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    min-width: 0 !important;
  }

  /* ─── Search form (Location / Property type / Budget / Search) ─── */
  /* Already collapses via .ms-collapse-mobile to 1fr. Add internal padding
     so each row breathes and the borders look intentional. */
  form[style*="grid-template-columns: 1.3fr 1fr 1fr auto"] > div,
  form[style*="grid-template-columns: 1.3fr 1fr 1fr auto"] > button {
    border-right: none !important;
    border-bottom: 1px solid rgba(232,220,193,0.18) !important;
    padding: 12px 16px !important;
  }
  form[style*="grid-template-columns: 1.3fr 1fr 1fr auto"] > button {
    border-bottom: none !important;
    padding: 16px !important;
    min-width: 0 !important;
  }

  /* "Explore Properties / Book Site Visit / Talk to an Advisor" trio:
     each gets full width on its own line for thumb-tappability */
  section [style*="display: flex"][style*="gap: 16"][style*="flex-wrap"] > a {
    flex: 1 1 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Hero stats row (₹1,400 Cr+ / 38 / 2,100+) — stack with neat dividers */
  section [style*="gap: 64"][style*="border-top"] {
    flex-direction: column !important;
    gap: 20px !important;
    padding-top: 24px !important;
    margin-top: 40px !important;
  }

  /* ─── BUY / INVEST / BUILD / COMMERCIAL tab strip (round 2) ─── */
  /* The container has `display: flex, gap: 4`. Force the row to wrap
     on phones AND give each tab equal space. */
  div[style*="display: flex"][style*="background: rgba(255,255,255,0.04)"] {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 0 !important;
  }
  div[style*="display: flex"][style*="background: rgba(255,255,255,0.04)"] > button {
    flex: 1 1 50% !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    border-bottom: 1px solid rgba(232,220,193,0.12) !important;
  }

  /* ─── PROPERTY DETAIL HERO ─── */
  /* Hide Save / Share / 3D Tour buttons (top-right, position:absolute) —
     they overlap the breadcrumb and the launch chips on tiny screens.
     The same actions are reachable lower in the page. */
  section[id="overview"] ~ * div[style*="position: absolute"][style*="top: 32"][style*="right: 56"],
  section[style*="height: 720"] > div[style*="position: absolute"][style*="top: 32px"][style*="right: 56"],
  div[style*="position: absolute"][style*="top: 32px"][style*="right: 56px"][style*="display: flex"][style*="gap: 12"] {
    display: none !important;
  }
  /* Breadcrumb: same — already hidden by the visual mess. Keep it visible
     but narrow it so it doesn't push into the buttons. */
  div[style*="position: absolute"][style*="top: 32px"][style*="left: 56px"] {
    left: 16px !important;
    top: 16px !important;
    right: 16px !important;
    font-size: 9.5px !important;
    flex-wrap: wrap !important;
  }
  /* Bottom-left content block — let it use the whole bottom of the hero */
  div[style*="position: absolute"][style*="bottom: 56px"][style*="left: 56px"] {
    left: 20px !important;
    right: 20px !important;
    bottom: 32px !important;
  }
  /* Hero h1 (88px inline) for property page */
  section h1[style*="font-size: 88"], section h1[style*="font-size: 92"] {
    font-size: 38px !important;
    line-height: 1.06 !important;
  }
  /* Address subline — long string with parens, must break anywhere */
  section h1 + p, section h2 + p,
  section [style*="font-family: 'Cormorant Garamond"] + p {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* ─── GALLERY: hide the absolutely-positioned "+N more" overlay ─── */
  /* It was intended to overlay the last desktop tile; on mobile it
     stacks as a giant chunky tile that breaks the rhythm. */
  button[style*="position: absolute"][style*="right: 56px"][style*="margin-top: -56px"],
  button[style*="position: absolute"][style*="right: 56"][style*="marginTop: -56"] {
    display: none !important;
  }

  /* ─── MASTER PLAN modal: filter chips wrap, plot grid stays scrollable ─── */
  /* Filter row (All / Available / Premium / Booked / On Hold) — wrap. */
  div[style*="z-index: 9999"] div[style*="display: flex"][style*="gap: 6"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Plot grid SVG: width 100%, height auto already set; ensure it can scroll */
  div[style*="z-index: 9999"] svg { max-width: 100% !important; height: auto !important; }
  /* The plot-details aside should not stretch tall on mobile — let it size to content */
  div[style*="grid-template-columns: 1fr 320px"] > aside {
    min-height: 0 !important;
  }
  div[style*="grid-template-columns: 1fr 320px"] > aside > div[style*="margin-top: auto"] {
    margin-top: 16px !important;
  }
}

/* ─── Master Plan: REQUIRE landscape on small screens ─── */
/* When the InteractiveMasterPlan modal is open (we detect it via :has() on the
   body for any direct fixed-position div with z-index 9999) AND the device is
   in portrait at <=900px, render a full-screen rotate prompt over everything
   inside the modal. The instant the user rotates, this rule no longer applies
   and the modal is fully usable. */
@media (max-width: 900px) and (orientation: portrait) {
  body:has(div[style*="z-index: 9999"][style*="background: rgba(10,15,12,0.92)"])::after {
    content: "↻\AFor the best view of the\Ainteractive master plan,\Aplease rotate your device.";
    white-space: pre-line;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: linear-gradient(180deg, #0a1f17 0%, #0f2a1f 100%);
    color: #e2bd6b;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 40px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  /* The first character (↻) — make it a hero icon */
  body:has(div[style*="z-index: 9999"][style*="background: rgba(10,15,12,0.92)"])::after {
    background-image:
      radial-gradient(circle at 50% 30%, rgba(201,165,92,0.12), transparent 60%);
  }
}

/* Even tighter rules for narrow phones */
@media (max-width: 480px) {
  .ms-h1 { font-size: 32px !important; }
  h1 { font-size: 32px !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .ms-btn-lg, .ms-btn { padding: 12px 16px !important; }
  /* Address / location strings that contain commas can break anywhere */
  [style*="font-family: 'Cormorant Garamond"] { word-break: break-word !important; }
}