#stage {
    position: sticky; top: 0; height: 100svh; width: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--white);
    font-family: "WA Montserrat", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  #stage h1, #stage h2, #stage h3 { font-family: "WA Montserrat",Arial,sans-serif; margin: 0; text-shadow: var(--shadow); color: var(--white); text-wrap: balance; }
  #stage h1 { font-size: clamp(44px, 7.5vw, 112px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; }
  #stage h2 { font-size: clamp(30px, 4.6vw, 64px); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; font-style: italic; }
  #stage h3 { font-size: clamp(22px, 3.1vw, 42px); font-weight: 400; line-height: 1.28; letter-spacing: -0.015em; }
  #stage em { font-style: italic; color: var(--gold); font-weight: 500; }
  #stage h2 em { font-style: normal; }

  .sub-copy { font-size: clamp(18px, 2.2vw, 30px); font-weight: 400; color: var(--white); max-width: 40ch; line-height: 1.4; text-shadow: var(--shadow); }
  .sub-copy.small { font-size: clamp(15px, 1.4vw, 19px); color: var(--off-white); max-width: 44ch; margin-top: 1.25rem; line-height: 1.55; }

  .mono { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 600; font-size: 12px; }
  .eyebrow { color: var(--gold-light); margin-bottom: 1.1rem; display: block; text-shadow: var(--shadow); }
  .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 12px; opacity: .8; }
  .quote { font-style: italic; }
  .quote::before { content: "\201C"; color: var(--gold); }
  .quote::after  { content: "\201D"; color: var(--gold); }

  /* Media layers */
  .cinematic-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; 
    transform: scale(1.08); transform-origin: 50% 50%;
  }
  .img-contain { object-fit: contain; background: transparent; padding: 3vh 2vw; }
  #ov-white { background: #E7E0D6; }
  #map-layer { pointer-events: none; overflow: visible; }
  #map-img, #map-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
  #map-img { object-fit: cover; filter: saturate(.85) brightness(.92); }
  #map-svg .district { opacity: 0; transition: opacity .8s ease; }
  #map-svg .district.on { opacity: 1; }
  #map-svg .zone { fill: none; stroke: #E7E0D6; stroke-width: 1.6; }
  #map-svg .zone2 { fill: none; stroke: #E7E0D6; stroke-width: .8; stroke-dasharray: 3 6; opacity: .8; }
  #map-svg .district.on .zone2 { animation: spin 30s linear infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes spin { to { transform: rotate(360deg); } }
  #map-svg .pulse { fill: #E7E0D6; fill-opacity: .3; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

  .gradient-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
  #ov-dim   { background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.15) 100%); }
  #ov-dark  { background: rgba(17,39,73,1); }
  #ov-black { background: var(--ink); }
  #ov-vignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); opacity: 1; }

  #ov-left { background: linear-gradient(to right, rgba(17,39,73,.9) 0%, rgba(17,39,73,.6) 40%, rgba(17,39,73,.15) 70%, rgba(17,39,73,0) 100%); }
  #map-inset {
    position: absolute; top: 9vh; left: var(--pad); width: min(58vw, 1000px); aspect-ratio: 1920 / 1080;
    opacity: 0; pointer-events: none;  transform-origin: 0 0;
    border: 1px solid rgba(231,224,214,.55); border-radius: 6px; overflow: hidden; background: #112749;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
  }
  #map-inset .inner { position: absolute; inset: 0; transform: scale(1.6) translate(-13.75%, 13.2%); }
  #map-inset img, #map-inset svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  #map-inset img { object-fit: cover; filter: saturate(.85) brightness(.85); }
  #map-inset .ring2 { animation: spin 30s linear infinite; transform-box: fill-box; transform-origin: center; }
  #map-inset .pulse { fill: #E7E0D6; fill-opacity: .3; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out infinite; }
  #map-inset .tag { position: absolute; left: 18px; bottom: 14px; color: var(--gold-light); font-size: 12px; text-shadow: var(--shadow); }
  @media (max-width: 760px) { #map-inset { width: calc(100vw - 2 * var(--pad)); top: 9vh; } }

  #ov-left2 { background: linear-gradient(to right, rgba(17,39,73,.92) 0%, rgba(17,39,73,.7) 35%, rgba(17,39,73,.2) 62%, rgba(17,39,73,0) 100%); }
  #img-zayd { filter: grayscale(1) contrast(1.05); }
  #ov-fade { background: #000; }

  /* Payment plan — frosted glass cards */
  #plan {
    position: absolute; top: 13vh; left: var(--pad); right: var(--pad);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.2vw, 18px);
  }
  .glass {
    position: relative; opacity: 0; 
    padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 24px);
    border-radius: 16px; color: var(--white);
    background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    display: flex; flex-direction: column; gap: 4px;
  }
  .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.14), transparent 55%); }
  .glass .n { font-family: "WA Montserrat",Arial,sans-serif; font-style: italic; color: var(--gold); font-size: 15px; letter-spacing: .05em; }
  .glass .pct { font-family: "WA Montserrat",Arial,sans-serif; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; margin-top: 4px; letter-spacing: -0.02em; }
  .glass .ms { font-size: 11px; color: var(--gold-light); margin-top: 8px; }
  .glass .amt { font-family: "WA Montserrat", sans-serif; font-weight: 500; font-size: clamp(13px, 1.15vw, 17px); color: var(--off-white); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
  .glass .aed { font-size: 10.5px; color: var(--gold-light); letter-spacing: .06em; margin-top: 4px; opacity: .85; }
  #card-3 { border-color: rgba(231,224,214,.6); background: linear-gradient(160deg, rgba(231,224,214,.24), rgba(231,224,214,.06)); }
  h2.price { font-style: normal; letter-spacing: -0.01em; }
  .m-only { display: none; }
  .price-m { font-family: "WA Montserrat",Arial,sans-serif; font-size: clamp(28px, 8vw, 40px); line-height: 1.1; margin-top: .3rem; text-shadow: var(--shadow); }
  .price-m span { display: block; font-family: "WA Montserrat", sans-serif; font-size: 12px; color: var(--off-white); letter-spacing: .06em; margin-top: 4px; }
  @media (max-width: 900px) {
    /* Investment on phones: compact header at the top, cards below it */
    .m-only { display: block; margin-top: .5rem; }
    #txt-inv-1 { top: 12vh; bottom: auto; padding: 0; }
    .d-only { display: none; }
    #txt-inv-1 h2 { font-size: clamp(26px, 7.5vw, 34px); }
    #txt-inv-1 .price-m { font-size: clamp(24px, 7vw, 32px); margin-top: .15rem; }
    #txt-inv-1 .price-m span { display: inline; margin-left: 10px; }
    #txt-inv-1 .sub-copy, #txt-inv-2 { display: none; }
    #plan { grid-template-columns: repeat(2, 1fr); top: 38vh; gap: 10px; }
    #card-3 { grid-column: span 2; }
    .glass { padding: 12px 14px 12px; gap: 2px; border-radius: 12px; }
    .glass .n { font-size: 12px; }
    .glass .pct { font-size: 24px; margin-top: 2px; }
    .glass .ms { font-size: 9.5px; margin-top: 4px; letter-spacing: .16em; }
    .glass .amt { font-size: 12.5px; margin-top: 6px; padding-top: 6px; }
    .glass .aed { display: none; }
    #card-3 { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
    #card-3 .n { grid-column: 1; grid-row: 1; } #card-3 .pct { grid-column: 1; grid-row: 2; }
    #card-3 .ms { grid-column: 2; grid-row: 1; margin-top: 0; align-self: end; } #card-3 .amt { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 0; border-top: 0; }
  }
  @media (max-width: 900px) and (max-height: 620px) { #plan { top: 39vh; } .glass { padding: 9px 12px; } .glass .pct { font-size: 20px; } }

  /* Light mode while the floor plans are on the white ground */
  #chapter, #brand, .text-block h3, .text-block .eyebrow, .text-block em, #chapter .n, #chapter .line { transition: color .6s ease, background .6s ease, text-shadow .6s ease; }
  #cinematic.light #chapter, #cinematic.light #brand, #cinematic.light #chapter .n { color: #112749; }
  #cinematic.light #chapter .line { background: #112749; }
  #cinematic.light #scene-unit h3 { color: #112749; text-shadow: none; }
  #cinematic.light #scene-unit .eyebrow { color: #1F4A8C; text-shadow: none; }
  #cinematic.light #scene-unit .eyebrow::before { background: #1F4A8C; }
  #cinematic.light #scene-unit em { color: #8C7A4E; }
  #cinematic.light #progress-bar { background: #112749; }
  #cinematic.light #scene-unit .text-block { padding: 1.1rem 1.4rem 1.2rem; margin-left: -1.4rem; border-radius: 10px;
    background: rgba(253,253,253,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(18,41,79,.08); }
  #scene-unit .text-block { transition: background .5s ease, box-shadow .5s ease; }

  /* WhatsApp call to action */
  .cta { display: inline-flex; align-items: center; gap: 14px; margin-top: 1.8rem; padding: 14px 22px 14px 18px; border-radius: 999px;
    border: 1px solid rgba(231,224,214,.75); color: var(--white); text-decoration: none; font-family: "WA Montserrat", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .04em;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 18px 50px rgba(0,0,0,.45); pointer-events: auto; cursor: pointer;
    transition: background .35s ease, border-color .35s ease, transform .35s ease, color .35s ease; }
  .cta svg { width: 22px; height: 22px; color: #25D366; flex: none; }
  .cta .num { color: var(--gold-light); font-weight: 500; letter-spacing: .08em; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
  .cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
  .cta:hover svg, .cta:hover .num { color: var(--ink); }
  @media (max-width: 760px) { .cta { flex-wrap: wrap; padding: 12px 16px; font-size: 13px; } .cta .num { border: 0; padding: 0; width: 100%; } }

  /* Content layers */
  .cinematic-content {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none; 
  }
  .text-block {
    position: absolute; opacity: 0; 
    max-width: min(64vw, 820px);
  }
  .text-block.wide { max-width: min(68vw, 860px); }
  .pos-bl { bottom: 12vh; left: var(--pad); }
  .pos-tl { top: 12vh; left: var(--pad); }
  .pos-tr { top: 12vh; right: var(--pad); text-align: right; }
  .pos-br { bottom: 12vh; right: var(--pad); text-align: right; }
  .pos-c  { inset: 0; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--pad); }
  .pos-c > * { max-width: 22ch; }
  .pos-c > h3 { max-width: 34ch; }
  .pos-c > .sub-copy { max-width: 40ch; margin: 1.25rem auto 0; }
  .pos-tr .eyebrow::before, .pos-br .eyebrow::before { display: none; }
  .pos-tr .eyebrow::after,  .pos-br .eyebrow::after  { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--gold); vertical-align: middle; margin-left: 12px; opacity: .8; }
  .pos-c .eyebrow::before { display: none; }

  @media (max-width: 760px) {
    .text-block, .text-block.wide { max-width: calc(100vw - 2 * var(--pad)); }
    .pos-tr, .pos-br { text-align: left; right: auto; left: var(--pad); }
    .pos-tr .eyebrow::after, .pos-br .eyebrow::after { display: none; }
    .pos-tr .eyebrow::before, .pos-br .eyebrow::before { display: inline-block; }
    .pos-bl, .pos-br { bottom: 14vh; }
    br.d { display: none; }
    #chapter { top: 1.4rem; gap: 10px; } #chapter .n { font-size: 17px; } #chapter .line { width: 22px; } #chapter .mono, #brand { font-size: 10px; }
    #brand { top: 1.5rem; }
    }

/* Phone controls retain the slim visual rail inside a usable touch area. */
@media (max-width: 900px) {
  #cinematic #stage { --story-header-space: 94px; --story-bottom-space: 166px; }
  #cinematic #stage .text-block { overflow-wrap: anywhere; }
  #cinematic .story-hud { bottom: max(12px,env(safe-area-inset-bottom)); }
  #cinematic .story-controls { gap: 8px; }
  #cinematic #chapter-jumps { min-width: 0; gap: 3px; }
  #cinematic #chapter-jumps button { justify-content: center; min-width: 24px; min-height: 44px; padding: 4px 2px; }
  #cinematic :is(#chapter-prev,#chapter-next) { flex: 0 0 36px; min-height: 44px; padding: 0; }
  #cinematic #skip-story { display: inline-flex; align-items: center; min-height: 36px; font-size: 9px; }
  #cinematic #story-seek { height: 32px; margin-top: 0; background: transparent; touch-action: pan-y; }
  #cinematic #story-seek::-webkit-slider-runnable-track { height: 3px; background: rgba(231,224,214,.2); }
  #cinematic #story-seek::-webkit-slider-thumb { margin-top: -7.5px; }
  #cinematic #story-seek::-moz-range-track { height: 3px; background: rgba(231,224,214,.2); }
  #cinematic.light #story-seek::-webkit-slider-runnable-track,
  #cinematic.light #story-seek::-moz-range-track { background: rgba(17,39,73,.2); }
  #cinematic #stage .glass { min-width: 0; border-radius: 0; }
  #cinematic #stage .glass .amt { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 760px) {
  #cinematic #stage .pos-bl,
  #cinematic #stage .pos-br { bottom: max(24svh,var(--story-bottom-space)); }
  #cinematic #stage .pos-tl,
  #cinematic #stage .pos-tr { top: max(18svh,var(--story-header-space)); }
  #cinematic #stage .text-block:not(.pos-c) {
    max-height: calc(100% - var(--story-header-space) - max(24svh,var(--story-bottom-space)));
    overflow-y: auto;
    pointer-events: auto;
  }
  #cinematic #stage .pos-c {
    inset: var(--story-header-space) var(--pad) var(--story-bottom-space);
    max-width: none;
    padding: 0;
    justify-content: safe center;
    overflow-y: auto;
    pointer-events: auto;
  }
  #cinematic #stage .pos-c > * { flex-shrink: 0; }
  #cinematic #stage .cta { min-height: 44px; }
}
/* A rotated phone has much less height than a desktop with the same width.
   Keep every price and payment field available within the chapter, including
   unusually long CRM copy; overflow is local instead of clipping under HUD. */
@media (max-width: 1000px) and (max-height: 500px) {
  #cinematic #stage { --story-header-space: 90px; --story-bottom-space: 108px; }
  #cinematic .story-hud { bottom: max(6px,env(safe-area-inset-bottom)); }
  #cinematic .story-hud-top { padding-bottom: 0; }
  #cinematic #skip-story { min-height: 24px; font-size: 8px; }
  #cinematic .story-controls { gap: 8px; padding-top: 0; }
  #cinematic #chapter-jumps { min-width: 0; gap: 3px; }
  #cinematic #chapter-jumps button { min-width: 24px; min-height: 44px; justify-content: center; padding: 4px 2px; }
  #cinematic .chapter-label { display: none; }
  #cinematic :is(#chapter-prev,#chapter-next) { flex: 0 0 36px; min-height: 44px; padding: 0; }
  #cinematic #story-seek { height: 32px; margin-top: 0; background: transparent; touch-action: pan-y; }
  #cinematic #story-seek::-webkit-slider-runnable-track { height: 3px; background: rgba(231,224,214,.2); }
  #cinematic #story-seek::-webkit-slider-thumb { margin-top: -7.5px; }
  #cinematic #story-seek::-moz-range-track { height: 3px; background: rgba(231,224,214,.2); }
  #cinematic #stage .pos-bl,
  #cinematic #stage .pos-br { bottom: var(--story-bottom-space); }
  #cinematic #stage .pos-tl,
  #cinematic #stage .pos-tr { top: var(--story-header-space); }
  #cinematic #stage .text-block:not(.pos-c) {
    max-width: calc(100% - 2 * var(--pad));
    max-height: calc(100% - var(--story-header-space) - var(--story-bottom-space));
    overflow-y: auto;
    pointer-events: auto;
  }
  #cinematic #stage .pos-c { inset: var(--story-header-space) var(--pad) var(--story-bottom-space); max-width: none; padding: 0; justify-content: safe center; overflow-y: auto; pointer-events: auto; }
  #cinematic #stage .pos-c > * { flex-shrink: 0; }
  #cinematic #stage :is(h2,h3,.story-display) { font-size: clamp(21px,4vw,28px); line-height: 1.2; }
  #cinematic #stage h1 { font-size: clamp(30px,6vw,48px); }
  #cinematic #stage .hero-subtitle { font-size: 22px; line-height: 1.2; margin-top: 12px; }
  #cinematic #stage .hero-specs { margin-top: 10px; }
  #cinematic #stage .sub-copy { font-size: 15px; line-height: 1.45; }
  #cinematic #stage .sub-copy.small { font-size: 12px; margin-top: 10px; }
  #cinematic #stage .eyebrow { margin-bottom: 8px; }
  #cinematic #stage #scene-invest {
    inset: calc(var(--story-header-space) - 4px) var(--pad) var(--story-bottom-space);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    pointer-events: auto;
    padding-block: 4px;
  }
  #cinematic #stage #txt-inv-1 { position: relative; inset: auto; order: 1; flex: 0 0 auto; max-width: none; max-height: none; overflow: visible; }
  #cinematic #stage #txt-inv-1 .m-only { display: block; margin-top: 4px; }
  #cinematic #stage #txt-inv-1 .d-only,
  #cinematic #stage #txt-inv-1 .sub-copy,
  #cinematic #stage #txt-inv-2 { display: none; }
  #cinematic #stage #txt-inv-1 h2 { font-size: 20px; }
  #cinematic #stage #txt-inv-1 .price-m { font-size: 20px; }
  #cinematic #stage #txt-inv-1 .price-m span { display: block; margin: 3px 0 0; font-size: 10px; }
  #cinematic #stage #plan { position: relative; inset: auto; order: 2; flex: 0 0 auto; gap: 8px; }
  #cinematic #stage .glass { min-width: 0; padding: 8px 10px; border-radius: 0; }
  #cinematic #stage .glass .pct { font-size: 22px; }
  #cinematic #stage .glass .amt { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
  #cinematic #stage .cta { min-height: 44px; margin-top: 10px; }
  #cinematic #cue { display: none; }
}
@media (min-width: 480px) and (max-width: 1000px) and (max-height: 500px) {
  #cinematic #stage #txt-inv-1 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 20px; align-items: center; }
  #cinematic #stage #txt-inv-1 .eyebrow { display: none; }
  #cinematic #stage #txt-inv-1 .m-only { margin-top: 0; }
  #cinematic #stage #txt-inv-1 .m-only > .mono { font-size: 8px; }
  #cinematic #stage #plan { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #cinematic #stage #card-3 { display: flex; grid-column: auto; }
  #cinematic #stage #card-3 .amt { border-top: 1px solid rgba(255,255,255,.18); margin-top: 6px; padding-top: 6px; }
}