/* ==========================================================================
   LUXE RESIDENCES — NEW CONSTRUCTION
   Design tokens: navy #003056 / gold #C7A968 / warm-white #FAF8F3
   Type: Playfair Display (display/serif) + Inter (body/labels)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --navy: #122442; /* sampled directly from the real luxeresidences.net/nc header */
  --navy-deep: #122442;
  /* Content screens use the same warm off-white as the dashboard. Cinematic
     hero media retains a navy scrim, but the experience never falls back to
     a black-looking page background. */
  --void: #FAF8F3;
  --gold: #C7A968;
  --gold-light: #DAC18A;
  --paper: #FAF8F3;
  --ink: #122442;
  --steel: #53657D;
  --hairline: rgba(18,36,66,0.18);
  --hairline-dark: rgba(18,36,66,0.14);

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --vh: 100dvh;
  --nav-h: 64px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  font-size: 16px;
  background: var(--paper);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- typography ---------- */
.eyebrow{
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gold-light);
  font-weight: 500;
}
h1,h2,h3{ font-family: var(--serif); font-weight:500; line-height:1.15; }
.section-title{
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 500;
}
.section-copy{
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--steel);
  max-width: 34ch;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 2px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-primary{
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-primary:hover{ background: var(--gold-light); }
.btn-ghost{
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-light); }
.btn-block{ width:100%; }

/* ---------- persistent section nav ---------- */
.journey-nav{
  position: fixed;
  z-index: 40;
  left: 0; right: 0; bottom: 0;
  height: var(--nav-h);
  display: flex;
  background: rgba(18,36,66,0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
}
.journey-nav button{
  flex: 1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 0.2rem;
  color: rgba(250,248,243,0.45);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  font-weight: 500;
  transition: color 0.2s ease;
}
.journey-nav button .dot{
  width:5px; height:5px; border-radius:50%;
  background: currentColor;
  opacity: 0.5;
}
.journey-nav button.active{ color: var(--gold-light); }
.journey-nav button.active .dot{ background: var(--gold); opacity:1; }
.journey-nav button.active .nav-num{ opacity: 1; color: var(--gold); }

@media (min-width: 900px){
  .journey-nav{
    left: 50%; right: auto; bottom: 24px; top: auto;
    transform: translateX(-50%);
    height: 52px; width: auto; max-width: 90vw;
    flex-direction: row;
    padding: 0 1.25rem;
    gap: 0.5rem;
    border-radius: 999px;
    background: rgba(18,36,66,0.92);
    border: 1px solid rgba(199,169,104,0.35);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .journey-nav button{
    flex-direction: row; justify-content: center;
    padding: 0.45rem 0.85rem;
    gap: 0.45rem;
    border-radius: 999px;
  }
  .journey-nav button:hover{
    color: var(--gold-light);
  }
  .journey-nav button.active{
    background: rgba(199,169,104,0.18);
  }
}

/* ---------- top bar ---------- */
.top-bar{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.85rem 1.25rem;
  background: rgba(18,36,66,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(250,248,243,0.08);
  pointer-events: auto;
}
.top-bar .wordmark{
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  display: flex;
  align-items: center;
}
.top-bar .wordmark-logo{
  height: 28px;
  width: auto;
  display: block;
}
.top-bar-right{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
}
.top-bar-mute-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  background: rgba(199,169,104,0.18);
  border: 1px solid var(--gold);
  color: var(--paper);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.top-bar-mute-btn:hover{
  background: rgba(199,169,104,0.32);
}
.top-bar-mute-btn.unmuted{
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold-light);
}
.top-bar .back{
  font-size: 0.74rem;
  color: var(--steel);
  border: 1px solid var(--hairline);
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.top-bar .back:hover{
  border-color: var(--gold);
  color: var(--gold-light);
}
@media (max-width: 650px){
  .top-bar{ padding: 0.65rem 0.85rem; }
  .top-bar .wordmark-logo{ height: 22px; }
  .top-bar-right{ gap: 0.35rem; }
  .top-bar-mute-btn{ font-size: 0.65rem; padding: 0.28rem 0.55rem; }
  .top-bar .switcher{ font-size: 0.64rem; padding: 0.28rem 0.5rem; }
  .top-bar .back{ font-size: 0.66rem; padding: 0.28rem 0.5rem; }
  #fullDossierLink{ display: none; }
}

/* ---------- full-screen section scaffold ---------- */
.snap-container{
  width: 100%;
  position: relative;
}
.screen{
  position: relative;
  min-height: 100vh;
  min-height: var(--vh);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 6.5rem 1.5rem calc(var(--nav-h) + 2rem);
  overflow: hidden;
  background: var(--paper);
  color: var(--navy);
}
@media (min-width: 900px){
  .screen{ padding: 6.5rem 4rem 4rem; justify-content:center; }
}
.screen-media{
  position:absolute; inset:0; z-index:0;
}
.screen-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:1rem;
  max-width: 560px;
}
.screen-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(250,248,243,0.06) 0%, rgba(250,248,243,0.86) 58%, var(--paper) 100%);
}
.screen-actions{
  display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:0.4rem;
}

/* generated / placeholder media block — replaces real photography until assets exist */
.placeholder-media{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(199,169,104,0.12), transparent 55%),
    linear-gradient(135deg, #e5e0d3 0%, #d9d3c3 55%, #cec7b4 100%);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top: 1rem;
}
.placeholder-media .ph-tag{
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: #6b6b64;
  border: 1px solid rgba(18,36,66,0.25);
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
}
.placeholder-media::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 60px);
}

/* status pill */
.status-pill{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size: 0.66rem; letter-spacing:0.08em; font-weight:500;
  padding: 0.3rem 0.65rem; border-radius: 2px;
  border: 1px solid var(--hairline);
  color: var(--steel);
  width: fit-content;
}
.status-pill .dot{ width:6px; height:6px; border-radius:50%; }
.status-approved .dot{ background:#7fb87f; }
.status-construction .dot{ background:var(--gold); }
.status-proposed .dot{ background:#c98b4a; }
.status-projected .dot{ background:#8a8578; }
.status-processing .dot{ background: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:0.35;} 50%{opacity:1;} }

/* ---------- site header (solid navy, matches real site) ---------- */
.site-header{
  background: var(--navy);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(250,248,243,0.06);
}
.site-header-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.site-brand-logo{ height: 36px; width: auto; display: block; }
.site-brand-pill{
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--gold-light);
  border: 1px solid rgba(199,169,104,0.4);
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 600px){
  .site-header{ padding: 0.75rem 1rem; }
  .site-brand-logo{ height: 28px; }
  .site-brand-pill{ display: none; }
  .btn-outline-gold{ font-size: 0.68rem; padding: 0.45rem 0.75rem; }
}

.btn-outline-gold{
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  color: var(--paper);
  font-size: 0.76rem; letter-spacing: 0.03em; font-weight: 500;
  padding: 0.75rem 1.1rem;
  border-radius: 2px;
  white-space: nowrap;
}
.btn-navy-solid{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy);
  color: var(--paper);
  font-size: 0.78rem; letter-spacing: 0.03em; font-weight: 500;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
}

/* ---------- home / discovery hero (real-site structure: photo + navy scrim) ---------- */
.hero{
  min-height: 92dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
  padding: 2.5rem 1.5rem 2.5rem;
  overflow:hidden;
}
.hero .placeholder-media{ position: absolute; inset: 0; }
.hero-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(18,36,66,0.55) 0%, rgba(18,36,66,0.08) 16%, rgba(18,36,66,0.18) 32%, rgba(18,36,66,0.88) 52%, rgba(18,36,66,0.96) 100%);
}
.hero-content{ position: relative; z-index: 2; }
.hero-badge{
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.hero-badge .hb-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.hero h1{
  font-size: clamp(2rem, 8vw, 3.2rem);
  max-width: 15ch;
  color: var(--paper);
  margin: 0 0 0.7rem;
  line-height: 1.12;
}
.hero h1 em{ color: var(--gold-light); font-style: italic; }
.hero p.section-copy{ max-width: 42ch; margin-bottom: 1.3rem; color: rgba(250,248,243,0.85); }

.hero-stats{ display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.stat-pill{
  border: 1px solid rgba(250,248,243,0.25);
  background: rgba(18,36,66,0.4);
  color: var(--paper);
  font-size: 0.76rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
}
.stat-pill b{ color: var(--gold-light); font-weight: 600; }

.hero-cta-row{ display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* ---------- NEW: simulated Current View / Future View hero widget ---------- */
/* This is the differentiator called out explicitly -- a visitor sees the
   actual product mechanic (current vs. simulated future skyline) inside
   the hero itself, before clicking anything, instead of only reading
   stat pills about it. */
.hero-view-demo{
  border: 1px solid rgba(250,248,243,0.2);
  border-radius: 6px;
  background: rgba(18,36,66,0.35);
  padding: 0.7rem;
  margin-bottom: 1.2rem;
  max-width: 380px;
}
.hvd-toggle{
  display: flex; border: 1px solid rgba(250,248,243,0.25); border-radius: 2px; overflow: hidden;
  margin-bottom: 0.6rem;
}
.hvd-toggle button{
  flex: 1; padding: 0.45rem 0; font-size: 0.68rem; letter-spacing: 0.04em;
  color: rgba(250,248,243,0.6);
}
.hvd-toggle button.active{ background: var(--gold); color: var(--navy); font-weight: 600; }
.view-3d-embed{
  aspect-ratio: 16/10;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.9rem;
  background: var(--void);
  border: 1px solid var(--hairline);
}

.hvd-visual{
  aspect-ratio: 16/10;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.hvd-visual .placeholder-media{ position: absolute; inset: 0; }
.hvd-caption{
  font-size: 0.64rem; color: rgba(250,248,243,0.5);
  margin-top: 0.5rem; text-align: center;
}

/* ---------- light utility bar: search (sits on cream, below hero) ---------- */
.search-bar-section{
  background: var(--paper);
  padding: 1.4rem 1.5rem;
  border-bottom: 1px solid var(--hairline-dark);
}
.search-panel{ max-width: 640px; margin: 0 auto; }
.search-input-row{
  display:flex; align-items:center; gap:0.6rem;
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
}
.search-input-row input{
  flex:1; background:transparent; border:none; color: var(--ink);
  font-family: var(--sans); font-size:0.9rem; font-weight:400;
}
.search-input-row input::placeholder{ color: #a39d8f; }
.search-input-row input:focus{ outline:none; }
.search-tabs{ display:flex; gap:1.3rem; margin-top: 0.7rem; }
.search-tabs button{
  font-size:0.7rem; letter-spacing:0.05em; color: #9a9488;
  padding-bottom:0.3rem; border-bottom:2px solid transparent;
}
.search-tabs button.active{ color: var(--navy); border-color: var(--gold); font-weight: 500; }
.search-results{ margin-top:0.7rem; display:flex; flex-direction:column; gap:0.3rem; max-height:220px; overflow-y:auto; }
.result-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:0.65rem 0.5rem; border-radius:2px;
  font-size:0.85rem; color: var(--ink);
}
.result-row:hover{ background: rgba(199,169,104,0.08); }
.result-row .rr-city{ color: #8a8578; font-size:0.74rem; }
.explainer-link{
  margin-top: 0.9rem;
  font-size: 0.76rem; color: var(--navy);
  display: flex; align-items: center; gap: 0.5rem;
}

/* project directory grid (light section, matches real site) */
.directory{
  padding: 3rem 1.5rem 4rem;
  background: var(--paper);
}
.directory .eyebrow-gold{
  color: #a9895a; font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 0.5rem;
}
.directory h2{
  font-family: var(--serif); font-size: 1.6rem; color: var(--ink); margin-bottom: 1.6rem; font-weight: 500;
}
.card-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 580px){
  .card-grid{
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.3rem;
  }
}
.project-card{
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hairline-dark);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-decoration: none;
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: 0 380px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.project-card:hover{
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(18,36,66,0.12);
}
.project-card .pc-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--navy);
  display: block;
  flex-shrink: 0;
}
/* In-flow pseudo-element guarantees physical height on all mobile viewports even if aspect-ratio collapses */
.project-card .pc-photo::before{
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 */
}
.project-card .pc-photo .placeholder-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.project-card .pc-status{
  position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 2;
  font-size: 0.68rem; letter-spacing: 0.08em; color: var(--gold-light); font-weight: 500;
  pointer-events: none;
}
.project-card .pc-status-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18,36,66,0.65) 100%);
  pointer-events: none;
  z-index: 1;
}
.project-card .pc-info{
  padding: 1.1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: var(--paper);
  position: relative;
  z-index: 2;
}
.project-card .pc-info .pc-name{
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.project-card .pc-info .pc-loc{
  font-size: 0.78rem;
  color: #6b6b64;
  margin-bottom: 1rem;
}
.project-card .pc-view-btn{
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold);
  color: var(--navy);
  font-size: 0.72rem; letter-spacing: 0.04em; font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.project-card:hover .pc-view-btn{
  background: var(--gold);
  color: var(--navy-deep);
}

.directory-load-bar{
  margin-top: 2.2rem;
  padding: 1.8rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dl-status{
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: #6b6b64;
  margin-bottom: 0.8rem;
}
.dl-status b{
  color: var(--ink);
}
.dl-actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.explainer-row{
  margin-top: 1.4rem;
  display:flex; align-items:center; gap:0.7rem;
}
.explainer-play{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size: 0.7rem;
}
.explainer-row .er-text{ font-size: 0.78rem; color: rgba(250,248,243,0.75); }

/* ---------- vision: floor plan / room picker ---------- */
.chip-row{ display:flex; gap:0.55rem; overflow-x:auto; padding-bottom:0.3rem; }
.chip{
  flex-shrink:0;
  padding:0.55rem 0.95rem; border-radius:2px;
  border:1px solid var(--hairline);
  font-size:0.78rem; color: var(--steel);
  white-space:nowrap;
}
.chip.active{ border-color:var(--gold); color:var(--gold-light); background:rgba(199,169,104,0.08); }

.plan-card{
  border:1px solid var(--hairline); border-radius:4px;
  padding:0.9rem 1rem; margin-bottom:0.6rem;
  display:flex; justify-content:space-between; align-items:center;
}
.plan-card .plan-name{ font-size:0.92rem; }
.plan-card .plan-specs{ font-size:0.72rem; color:var(--steel); margin-top:0.2rem; }
.plan-card .plan-price{ font-family:var(--serif); color:var(--gold-light); font-size:0.95rem; text-align:right; }

.lighting-row{ display:flex; gap:0.4rem; }
.light-btn{
  flex:1; padding:0.5rem 0; text-align:center;
  font-size:0.65rem; letter-spacing:0.06em;
  border:1px solid var(--hairline); border-radius:2px; color:var(--steel);
}
.light-btn.active{ border-color:var(--gold); color:var(--navy-deep); background:var(--gold); }

/* ---------- view: current / future toggle ---------- */
.view-toggle{
  display:flex; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; width:fit-content;
}
.view-toggle button{ padding:0.55rem 1.1rem; font-size:0.76rem; letter-spacing:0.04em; color:var(--steel); }
.view-toggle button.active{ background:var(--gold); color:var(--navy-deep); }

.stack-floor-row{ display:flex; gap:0.6rem; }
.stack-floor-row select{
  flex:1; background:rgba(250,248,243,0.05); border:1px solid var(--hairline);
  color:var(--navy); font-family:var(--sans); padding:0.6rem 0.7rem; border-radius:2px; font-size:0.85rem;
}

/* ---------- forms (Show / Worth) ---------- */
.selection-summary{
  border:1px solid var(--hairline); border-radius:4px;
  padding:0.8rem 1rem; font-size:0.78rem; color:var(--steel);
  display:flex; flex-wrap:wrap; gap:0.4rem 0.9rem;
}
.selection-summary b{ color:var(--paper); font-weight:500; }
.form-grid{ display:flex; flex-direction:column; gap:0.7rem; }
.form-grid input, .form-grid textarea{
  width:100%; background:rgba(250,248,243,0.05); border:1px solid var(--hairline);
  color:var(--navy); font-family:var(--sans); font-size:1rem;
  padding:0.75rem 0.85rem; border-radius:2px;
}
.form-grid input::placeholder, .form-grid textarea::placeholder{ color:var(--steel); }
.form-grid input:focus, .form-grid textarea:focus{ outline:1px solid var(--gold); }
.form-row-2{ display:flex; gap:0.6rem; }
.form-row-2 > *{ flex:1; }
.confirm-banner{
  border:1px solid var(--gold); border-radius:4px; padding:1.1rem;
  background: rgba(199,169,104,0.08);
}
.confirm-banner h3{ font-size:1.15rem; color:var(--gold-light); margin-bottom:0.3rem; }

/* gallery lightbox (simple) */
.gallery-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(18,36,66,0.97);
  display:none; flex-direction:column;
  padding: 1.25rem;
}
.gallery-overlay.open{ display:flex; }
.gallery-overlay .g-close{
  align-self:flex-end; font-size:0.8rem; color:var(--steel); border:1px solid var(--hairline);
  padding:0.4rem 0.8rem; border-radius:2px; margin-bottom:1rem;
}
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.6rem; overflow-y:auto; }
.gallery-grid .g-item{
  aspect-ratio: 4/3;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: block;
}
.gallery-grid .g-item::before{
  content: "";
  display: block;
  padding-top: 75%;
}

.admin-badge{
  position:fixed; bottom: calc(var(--nav-h) + 14px); right:14px; z-index:39;
  font-size:0.62rem; color:rgba(250,248,243,0.3); letter-spacing:0.06em;
}
@media (min-width:900px){ .admin-badge{ bottom:14px; } }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

/* ---------- next-step hook (inline CTA at the base of every section) ---------- */
.next-hook{
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
}
.next-hook .nh-text{ font-size:0.78rem; color:var(--steel); }
.next-hook .nh-text b, .selection-summary b{ color:var(--navy); font-weight:500; }
.next-hook button{
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.7rem; letter-spacing:0.06em; color:var(--gold-light);
  white-space:nowrap;
}
.next-hook button .arrow{ transition: transform 0.2s ease; }
.next-hook button:hover .arrow{ transform: translateX(3px); }

/* ---------- locked-section state (THE CAPTURE before stack+floor chosen) ---------- */
.locked-panel{
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  padding: 1.6rem 1.3rem;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0.9rem;
}
.locked-panel .lock-icon{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-light); font-size:1rem;
}
.locked-panel .lock-copy{ font-size:0.85rem; color:var(--steel); max-width:32ch; }

/* ---------- anticipation / staged loading sequence ---------- */
.sequence-overlay{
  position:absolute; inset:0; z-index:5;
  background: rgba(18,36,66,0.95);
  display:flex; align-items:center; justify-content:center;
  padding: 2rem;
  opacity:0; pointer-events:none;
  transition: opacity 0.35s ease;
}
.sequence-overlay.active{ opacity:1; pointer-events:auto; }
.sequence-inner{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  max-width:30ch; text-align:center;
}
.sequence-mark{
  width:34px; height:34px; border-radius:50%;
  border: 1px solid rgba(199,169,104,0.4);
  border-top-color: var(--gold);
  animation: spin 1.1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.sequence-text{
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--paper);
  min-height: 2.6em;
  transition: opacity 0.25s ease;
}

/* Data panels are rendered from JavaScript with a legacy inline white text
   colour. The content screens are now light, so retain readable navy text. */
#viewCurrentPanel b, #viewFuturePanel b{ color:var(--navy) !important; }
.sequence-text.swap{ opacity:0; }
.sequence-progress{
  display:flex; gap:0.35rem;
}
.sequence-progress .sp-dot{
  width:5px; height:5px; border-radius:50%;
  background: rgba(250,248,243,0.2);
}
.sequence-progress .sp-dot.done{ background: var(--gold); }

@media (prefers-reduced-motion: reduce){
  .sequence-mark{ animation: none; border-top-color: rgba(199,169,104,0.4); }
}

/* ---------- Vision: grouped visual floor-plan gallery ---------- */
.screen-tall .screen-content{
  max-height: calc(var(--vh) - 9rem);
  overflow-y: auto;
  padding-right: 0.3rem; /* room for scrollbar without clipping content */
}
.plan-group{ margin-top: 1.5rem; }
.plan-group:first-child{ margin-top: 0.4rem; }
.plan-group-heading{
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  font-weight: 500;
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline);
}
.plan-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
}
.plan-visual-card{
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  background: rgba(250,248,243,0.02);
}
.plan-visual-card:hover{ transform: translateY(-2px); border-color: rgba(199,169,104,0.4); }
.plan-visual-card.active{ border-color: var(--gold); background: rgba(199,169,104,0.07); box-shadow: 0 0 0 1px var(--gold); }
.pv-selected-badge{
  position: absolute; top: 0.45rem; right: 0.45rem; z-index: 3;
  font-size: 0.58rem; letter-spacing: 0.08em; font-weight: 700;
  background: var(--gold); color: var(--navy-deep);
  padding: 0.18rem 0.45rem; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.plan-visual-card .pv-thumb{
  aspect-ratio: 4/3;
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
}
.plan-visual-card .pv-thumb::before{
  content: "";
  display: block;
  padding-top: 75%;
}
.plan-visual-card .pv-thumb .placeholder-media{ position:absolute; inset:0; width:100%; height:100%; }
.plan-visual-card .pv-thumb .ph-tag{ font-size: 0.58rem; }
.plan-visual-card .pv-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit: contain; background: var(--paper); display:block; }
.pv-uncurated{
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(199,169,104,0.05) 0 10px, transparent 10px 20px), var(--void);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem;
}
.pv-uncurated .ph-tag{ color: rgba(199,169,104,0.6); border-color: rgba(199,169,104,0.35); }
.plan-visual-card .pv-info{ padding: 0.65rem 0.7rem 0.8rem; }
.plan-visual-card .pv-name{ font-size: 0.85rem; font-weight: 500; color: var(--navy); }
.plan-visual-card .pv-specs{ font-size: 0.68rem; color: var(--steel); margin-top: 0.2rem; }
.plan-visual-card .pv-price{ font-family: var(--serif); color: var(--gold-light); font-size: 0.82rem; margin-top: 0.35rem; }

/* stack indicator: a compact row of pills, one per stack in the building,
   the ones this floor plan occupies highlighted gold */
.stack-indicator{
  display: flex; gap: 3px; margin-top: 0.5rem; flex-wrap: wrap;
}
.stack-indicator .si-pill{
  font-size: 0.56rem;
  padding: 0.15rem 0.35rem;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  color: rgba(250,248,243,0.35);
  letter-spacing: 0.02em;
}
.stack-indicator .si-pill.si-match{
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(199,169,104,0.1);
}

/* ---------- Capture: empty/furnished toggle (real Som parameter) ---------- */
.stage-toggle{ display:flex; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; width:fit-content; }
.stage-btn{ padding:0.55rem 1.1rem; font-size:0.76rem; letter-spacing:0.04em; color:var(--steel); }
.stage-btn.active{ background:var(--gold); color:var(--navy-deep); }
.capture-disclaimer{
  font-size: 0.66rem;
  color: rgba(250,248,243,0.35);
  margin-top: 0.9rem;
  line-height: 1.5;
}
.room-preview{
  margin-top: 0.8rem;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--hairline);
  width: 100%;
  display: block;
}
.room-preview::before{
  content: "";
  display: block;
  padding-top: 75%;
}
.room-preview img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.room-preview .placeholder-media{ position:absolute; inset:0; width:100%; height:100%; }
.room-preview-badge{
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; letter-spacing: 0.08em; font-weight: 600;
  color: var(--gold); background: rgba(10, 15, 29, 0.88);
  border: 1px solid rgba(199, 169, 104, 0.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 0.25rem 0.6rem; border-radius: 999px;
  text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.room-preview-badge .rpb-dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 5px var(--gold); }
.pv-interior-badge{
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.58rem; letter-spacing: 0.08em; font-weight: 600;
  color: var(--gold); background: rgba(199, 169, 104, 0.12);
  border: 1px solid rgba(199, 169, 104, 0.35);
  padding: 0.18rem 0.45rem; border-radius: 999px;
  margin-top: 0.4rem; text-transform: uppercase;
}
.pv-interior-badge .pvi-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* ==========================================================================
   V5 additions — THE TRAILER / THE FEATURE fork, numbered nav, intro guide
   ========================================================================== */

/* ---------- numbered persistent nav (THE FEATURE) ---------- */
.journey-nav button .nav-num{
  font-size: 0.6rem;
  opacity: 0.6;
  margin-right: 0.15rem;
}
@media (min-width: 900px){
  .journey-nav button .nav-num{ margin-right: 0.3rem; }
}
.nav-help-btn{
  position: fixed;
  z-index: 41;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(18,36,66,0.96);
  color: var(--gold-light);
  font-size: 0.8rem;
  font-family: var(--serif);
  display: flex; align-items: center; justify-content: center;
  bottom: calc(var(--nav-h) + 14px); right: 14px;
}
@media (min-width: 900px){
  .nav-help-btn{ bottom: 14px; right: 210px; }
}

/* ---------- experience switcher (top bar link, both Trailer and Feature) ---------- */
.top-bar .switcher{
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  border: 1px solid var(--hairline);
  padding: 0.4rem 0.75rem;
  border-radius: 2px;
}



/* ---------- THE TRAILER / THE FEATURE choice screen ---------- */
.choice-screen{
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--navy);
}
.choice-hero{
  padding: 4.5rem 1.5rem 2rem;
  text-align: center;
}
.choice-hero .eyebrow{ display:block; }
.choice-hero h1{
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  margin: 0.7rem 0 0;
}
.choice-cards{
  flex: 1;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  max-width: 720px; margin: 0 auto; width: 100%;
}
@media (min-width: 720px){
  .choice-cards{ flex-direction: row; padding: 2rem; }
}
.choice-card{
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.15s ease;
  background: var(--paper);
}
.choice-card:hover{ border-color: var(--gold); transform: translateY(-2px); }
.choice-card .cc-tag{ font-size: 0.65rem; letter-spacing: 0.1em; color: var(--gold-light); }
.choice-card h3{ font-family: var(--serif); font-size: 1.35rem; }
.choice-card p{ font-size: 0.85rem; color: var(--steel); line-height: 1.5; flex: 1; }
.choice-card .cc-meta{ font-size: 0.68rem; color: rgba(250,248,243,0.4); letter-spacing: 0.04em; }
.choice-back{
  text-align: center; padding-bottom: 2rem;
  font-size: 0.75rem; color: var(--steel);
}

/* ---------- THE TRAILER: normal-scroll quick tour ---------- */
.trailer-body{ background: var(--paper); color: var(--navy); }
.trailer-section{
  padding: 3.2rem 1.5rem;
  max-width: 720px; margin: 0 auto;
}
.trailer-section + .trailer-section{ border-top: 1px solid var(--hairline); }
.trailer-hero{
  min-height: 60dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6rem 1.5rem 2.5rem;
  position: relative;
  max-width: none;
}
.trailer-hero .placeholder-media{ position: absolute; inset: 0; }
.trailer-hero .th-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,36,66,0.1) 0%, rgba(18,36,66,0.9) 100%);
}
.trailer-hero .th-content{ position: relative; z-index: 2; }
/* The name sits on the dark end of the scrim: light text, or it disappears into the photo. */
.trailer-hero .th-content .section-title{ color: #faf8f3; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.trailer-hero .th-content .section-copy{ color: rgba(250,248,243,0.88); }
.trailer-section h2{ font-family: var(--serif); font-size: 1.4rem; margin-bottom: 0.3rem; }
.trailer-section .ts-copy{ font-size: 0.85rem; color: var(--steel); margin-bottom: 1.2rem; }
.trailer-gallery{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 0.6rem;
}
.trailer-gallery .tg-item{
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
  display: block;
}
.trailer-gallery .tg-item::before{
  content: "";
  display: block;
  padding-top: 75%;
}
.trailer-gallery .tg-item .placeholder-media{ position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==========================================================================
   V6 — Discovery hero: autoplaying video, burned-in stats, Trailer/Feature CTA
   ========================================================================== */

.discovery-hero{
  position: relative;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--void);
}
.dh-video, .dh-fallback{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.dh-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(18,36,66,0.55) 0%, rgba(18,36,66,0.05) 22%, rgba(18,36,66,0.15) 55%, rgba(18,36,66,0.92) 100%);
}
.dh-mute-btn{
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(18,36,66,0.6); border: 1px solid rgba(250,248,243,0.25);
  color: var(--paper); font-size: 0.9rem;
}
.dh-top{
  position: relative; z-index: 2;
  padding: 3.5rem 1.5rem 0;
}
.dh-lower{
  position: relative; z-index: 2;
  padding: 0 1.5rem 2rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.dh-name{
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--paper);
}

.dh-stats{
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(250,248,243,0.15);
}
.dh-stat{ display: flex; flex-direction: column; gap: 0.15rem; }
.dh-stat .dh-num{ font-family: var(--serif); font-size: 1.15rem; color: var(--gold-light); }
.dh-stat .dh-label{ font-size: 0.6rem; letter-spacing: 0.08em; color: rgba(250,248,243,0.5); }

.dh-cta-row{
  display: flex;
  border: 1px solid rgba(250,248,243,0.25);
  border-radius: 3px;
  overflow: hidden;
}
.dh-cta{
  flex: 1;
  display: flex; flex-direction: column; gap: 0.15rem;
  align-items: center; text-align: center;
  padding: 0.85rem 0.6rem;
  color: var(--paper);
  border-right: 1px solid rgba(250,248,243,0.15);
  transition: background 0.2s ease;
}
.dh-cta:last-child{ border-right: none; }
.dh-cta .dh-cta-tag{ font-size: 0.78rem; letter-spacing: 0.05em; font-weight: 500; }
.dh-cta .dh-cta-sub{ font-size: 0.64rem; color: rgba(250,248,243,0.55); }
.dh-cta:hover{ background: rgba(250,248,243,0.06); }
.dh-cta-primary{ background: rgba(199,169,104,0.14); }
.dh-cta-primary .dh-cta-tag{ color: var(--gold-light); }
.dh-cta-primary:hover{ background: rgba(199,169,104,0.22); }

.dh-scroll-hint{
  text-align: center;
  font-size: 0.68rem;
  color: rgba(250,248,243,0.4);
  letter-spacing: 0.04em;
  animation: dh-bob 2.2s ease-in-out infinite;
}
@keyframes dh-bob{
  0%,100%{ transform: translateY(0); opacity: 0.4; }
  50%{ transform: translateY(4px); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce){
  .dh-scroll-hint{ animation: none; }
}

@media (min-width: 900px){
  .dh-lower{ padding: 0 4rem 3rem; max-width: 640px; }
  .dh-top{ padding: 3.5rem 4rem 0; }
  .dh-cta-row{ max-width: 480px; }
}

/* journey-nav only displays once the visitor moves into the guided screens,
   completely hidden while in discovery hero so touches cannot be intercepted */
.journey-nav{ transition: opacity 0.3s ease; }
.journey-nav.chrome-hidden{ display: none !important; opacity: 0; pointer-events: none !important; }

/* ── Live data (luxeresidences.net) ─────────────────────────────────────── */
.placeholder-media.has-media{ background:var(--navy); padding:0; }
.placeholder-media.has-media::after{ display:none; }
.media-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.g-item.has-media, .tg-item .has-media{ overflow:hidden; }
.g-item img, .tg-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.city-heading{
  grid-column: 1 / -1;
  width: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--steel);
  margin: 1.8rem 0 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(199,169,104,0.22);
  box-sizing: border-box;
}
.consent-row{ display:flex; gap:0.55rem; align-items:flex-start; font-size:0.72rem; line-height:1.45; color:var(--steel); }
.consent-row input{ margin-top:0.15rem; width:auto; }
.form-error{ color:#e08a7a; font-size:0.75rem; }

/* ── Enhanced Text Contrast Over Media ──────────────────────────────────── */
/* Dark halos only where text sits on a PHOTO (the discovery hero). The journey
   screens put navy text on a paper scrim, where a black shadow just smeared
   every heading into a blur. */
.dh-name, .hero h1, .dh-stat .dh-num, .dh-stat .dh-label,
.hero-badge, .stat-pill, .dh-cta-tag, .discovery-hero .eyebrow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.hero p.section-copy, .dh-scroll-hint {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.dh-scrim {
  background: linear-gradient(180deg,
    rgba(18,36,66,0.7) 0%, rgba(18,36,66,0.15) 20%, rgba(18,36,66,0.3) 45%,
    rgba(18,36,66,0.92) 80%, rgba(18,36,66,0.98) 100%);
}
.screen-scrim {
  background: linear-gradient(180deg,
    rgba(18,36,66,0.2) 0%, rgba(250,248,243,0.7) 45%, rgba(250,248,243,0.96) 80%, var(--paper) 100%);
}

/* ── 3D View Embed & Desktop Widescreen Layout ───────────────────────────── */
.view-3d-embed {
  position: relative;
  width: 100%;
  height: 480px;
  max-height: 56vh;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 1rem;
  background: #00243f;
  border: 1px solid rgba(199,169,104,0.35);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}
.view-3d-loader {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #00243f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--paper);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.view-3d-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.v3d-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(199, 169, 104, 0.25);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
.v3d-text {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  font-weight: 500;
}
.v3d-sub {
  font-size: 0.74rem;
  color: var(--steel);
}

/* Middle sized screens & below (< 1200px): Clean stacked layout without clipping */
.screen#section-view .screen-content.view-screen-layout,
.screen#section-capture .screen-content.capture-screen-layout {
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.screen#section-view .view-panel-col,
.screen#section-capture .capture-panel-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.screen#section-capture .capture-panel-col .locked-panel {
  margin-top: 0.5rem;
}
.screen#section-view .view-stage-col,
.screen#section-capture .capture-stage-col {
  width: 100%;
}
.screen#section-vision .engine3d-viewport,
.screen#section-vision .tour-viewer-container,
.screen#section-capture .capture-window {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 400px;
}

/* Large Desktop Only (>= 1200px): Put 3D to the side */
@media (min-width: 1200px) {
  .screen#section-view,
  .screen#section-capture {
    padding: 5.5rem 3.5rem 3.5rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .screen#section-view .screen-content.view-screen-layout,
  .screen#section-capture .screen-content.capture-screen-layout {
    max-width: 1440px;
    display: grid;
    grid-template-columns: 410px 1fr;
    gap: 3rem;
    align-items: center;
  }
  .screen#section-view .view-panel-col,
  .screen#section-capture .capture-panel-col {
    justify-content: center;
  }
  .screen#section-view .view-stage-col,
  .screen#section-capture .capture-stage-col {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .screen#section-view .view-3d-embed,
  .screen#section-capture .capture-window {
    width: 100%;
    height: calc(100vh - 160px);
    min-height: 580px;
    max-height: 840px;
    margin-top: 0;
    aspect-ratio: auto;
  }
}
@media (max-width: 600px) {
  .view-3d-embed,
  .screen#section-vision .engine3d-viewport,
  .screen#section-vision .tour-viewer-container,
  .screen#section-capture .capture-window {
    height: 360px;
    max-height: 52vh;
  }
}

/* ── Gallery Lightbox ───────────────────────────────────────────────────── */
.lightbox-overlay{
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10, 20, 38, 0.96);
  backdrop-filter: blur(20px);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.lightbox-overlay.open{ display: flex; }
.lightbox-header{
  position: absolute; top: 1.2rem; left: 1.5rem; right: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--paper); font-size: 0.85rem; letter-spacing: 0.08em;
}
.lightbox-close{
  background: transparent; border: 1px solid rgba(250,248,243,0.3);
  color: var(--paper); padding: 0.4rem 0.9rem; border-radius: 999px;
  font-size: 0.75rem; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s;
}
.lightbox-close:hover{ border-color: var(--gold); color: var(--gold-light); }
.lightbox-img-wrap{
  max-width: 92vw; max-height: 75vh;
  display: flex; align-items: center; justify-content: center;
  margin: auto;
}
.lightbox-img-wrap img{
  max-width: 100%; max-height: 75vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.lightbox-caption{
  margin-top: 1rem; color: var(--paper); font-size: 0.9rem; text-align: center;
  max-width: 600px;
}
.lightbox-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(18,36,66,0.85); border: 1px solid rgba(199,169,104,0.4);
  color: var(--gold-light); font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
}
.lightbox-arrow:hover{ background: var(--gold); color: var(--navy); }
.lightbox-arrow.prev{ left: 1.5rem; }
.lightbox-arrow.next{ right: 1.5rem; }
.g-item{ cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.g-item:hover{ transform: scale(1.02); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }

/* ── Floor Plan Viewer Modal ────────────────────────────────────────────── */
.fp-modal-overlay{
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10, 20, 38, 0.92);
  backdrop-filter: blur(18px);
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.fp-modal-overlay.open{ display: flex; }
.fp-modal-card{
  background: var(--paper); color: var(--navy);
  width: 100%; max-width: 960px; max-height: 92vh;
  border-radius: 8px; border: 1px solid var(--gold);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.fp-modal-header{
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--hairline);
  background: rgba(18,36,66,0.03);
}
.fp-modal-title{ font-family: var(--serif); font-size: 1.15rem; color: var(--navy); font-weight: 600; }
.fp-zoom-controls{
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.fp-zoom-btn{
  background: #ffffff; border: 1px solid var(--hairline);
  color: var(--navy); width: 28px; height: 28px; border-radius: 4px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.fp-zoom-btn:hover{ border-color: var(--gold); color: var(--gold-light); }
.fp-zoom-btn.fp-zoom-reset{ width: auto; padding: 0 0.5rem; font-size: 0.72rem; }
.fp-modal-close{
  background: transparent; border: 1px solid var(--hairline);
  color: var(--navy); padding: 0.35rem 0.8rem; border-radius: 999px;
  font-size: 0.72rem; cursor: pointer;
}
.fp-modal-close:hover{ border-color: var(--gold); color: var(--gold-light); }
.fp-modal-body{
  flex: 1; overflow: auto; padding: 1.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #ffffff; min-height: 380px; position: relative;
}
.fp-modal-img{
  max-width: 100%; max-height: 58vh; object-fit: contain;
  cursor: zoom-in; transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
  transform-origin: center center;
  user-select: none;
}
.fp-modal-img.zoomed{
  cursor: grab;
}
.fp-modal-img.zoomed:active{
  cursor: grabbing;
}
.fp-modal-footer{
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.4rem; border-top: 1px solid var(--hairline);
  background: rgba(18,36,66,0.03); flex-wrap: wrap; gap: 0.8rem;
}
.fp-modal-specs{ font-size: 0.85rem; color: var(--steel); font-weight: 500; }
.pv-view-btn{
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--gold-light); border: 1px solid var(--gold);
  padding: 0.35rem 0.75rem; border-radius: 999px; margin-top: 0.5rem;
  cursor: pointer; transition: all 0.2s; background: rgba(18,36,66,0.8);
}
.pv-view-btn:hover{ background: var(--gold); color: var(--navy); }

/* ── Luxury Footer ──────────────────────────────────────────────────────── */
.luxe-footer{
  background: var(--navy);
  color: var(--paper);
  padding: 4rem 1.5rem 2.5rem;
  border-top: 1px solid rgba(199,169,104,0.35);
  position: relative;
  z-index: 10;
  margin-top: auto;
}
.footer-container{
  max-width: 1120px;
  margin: 0 auto;
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-mark{
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  margin-bottom: 0.8rem;
  font-weight: 600;
}
.footer-desc{
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(250,248,243,0.75);
  max-width: 320px;
}
.footer-heading{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-col p{
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(250,248,243,0.75);
  margin-bottom: 0.5rem;
}
.footer-col a{
  color: rgba(250,248,243,0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col a:hover{
  color: var(--gold-light);
}
.footer-legal{
  border-top: 1px solid rgba(250,248,243,0.12);
  padding-top: 1.8rem;
  font-size: 0.72rem;
  line-height: 1.65;
  color: rgba(250,248,243,0.5);
}
.footer-legal p{
  margin-bottom: 0.6rem;
}


/* ── THE VISION: layouts, then the 3D walk-through ────────────────────────
   Stacked everywhere below 1200px: the plan list, then the 3D stage, which
   the page scrolls to when a layout is chosen. On a large desktop the stage
   sits beside the list. (Not sticky: .screen is overflow:hidden.) */
.screen#section-vision .screen-content.vision-screen-layout{
  max-width: 840px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.screen#section-vision .vision-panel-col{ display: flex; flex-direction: column; gap: 0.9rem; }
.screen#section-vision .vision-stage-col{ width: 100%; scroll-margin-top: 90px; }
@media (min-width: 1200px){
  .screen#section-vision .screen-content.vision-screen-layout{
    max-width: 1440px; display: grid; grid-template-columns: 480px 1fr; gap: 3rem; align-items: start;
  }
  .screen#section-vision .engine3d-viewport,
  .screen#section-vision .tour-viewer-container{
    height: calc(100vh - 180px); min-height: 520px; max-height: 820px; aspect-ratio: auto;
  }
}

/* ── THE CAPTURE: the live map, framed as the residence's window ──────────
   The frame is decoration over a LIVE map: pointer-events:none so the view
   still turns, and nothing is drawn over the bottom 34px, where Google's
   attribution sits and must stay visible. */
.capture-window{
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--void); border: 1px solid var(--hairline);
}
.capture-window-frame{
  position: absolute; inset: 0 0 34px 0; pointer-events: none;
  border: 14px solid rgba(250,248,243,0.92);
  border-bottom-width: 22px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), inset 0 0 40px rgba(0,0,0,0.25);
}
.capture-window-frame span{
  position: absolute; top: 0; bottom: 0; width: 8px;
  background: rgba(250,248,243,0.92);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}
.capture-window-frame span:first-child{ left: 33.33%; }
.capture-window-frame span:last-child{ left: 66.66%; }
.capture-window-label{
  position: absolute; top: 24px; left: 26px; pointer-events: none;
  font-size: 0.72rem; letter-spacing: 0.1em; color: var(--paper);
  background: rgba(22,40,74,0.72); padding: 0.35rem 0.7rem; border-radius: 2px;
}
#captureDirChips .chip.active{ border-color: var(--gold); background: rgba(199,169,104,0.16); color: var(--navy); font-weight: 600; }

/* THE VISION is a normal part of the page, not a scroll box inside it. The
   old .screen-tall inner scroller (max-height + overflow) held a 23-plan list
   and the 3D stage in a box one screen tall: most plans unreachable, and the
   page felt stuck when the wheel landed on the 3D view. */
.screen#section-vision .screen-content{ max-height: none; overflow: visible; padding-right: 0; }
.screen#section-vision{ overflow: visible; justify-content: flex-start; }
.plan-filter{ margin: 0.2rem 0 1rem; flex-wrap: wrap; }
.plan-filter .chip.active{ border-color: var(--gold); background: rgba(199,169,104,0.16); color: var(--navy); font-weight: 600; }
.plan-more{ margin-top: 1rem; width: 100%; }

/* Developer view photography (THE VIEW), embedded from the developer's kit */
.dev-view { margin-top: 1rem; }
.dev-view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.dev-view-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold, #c9a45c); }
.dev-view-head .chip-row { margin: 0; }
.dev-view-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.dev-view-stage iframe, .dev-view-stage img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }

/* Small enlarge icon on a plan drawing (replaces the full-width VIEW DRAWING button) */
.plan-visual-card .pv-enlarge{
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--hairline); background: rgba(250,248,243,0.92);
  color: var(--navy); font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0.75; transition: opacity 0.2s, background 0.2s;
}
.plan-visual-card .pv-enlarge:hover, .plan-visual-card .pv-enlarge:focus-visible{ opacity: 1; background: var(--gold); }

/* ── Contrast on the paper screens ─────────────────────────────────────────
   The brand gold (#C7A968) is ~2:1 on paper: fine as a rule or a fill, not as
   text. Text that sits on paper uses a deeper gold of the same hue. */
:root { --gold-ink: #7d6224; }
.screen .eyebrow, .screen .next-hook button, .screen .nh-text b,
.screen .dev-view-label { color: var(--gold-ink); }
.screen .next-hook button .arrow { color: var(--gold-ink); }
.screen .section-copy { color: var(--ink, #122442); }
.screen .btn-ghost { color: var(--navy); border-color: var(--navy); background: rgba(250,248,243,0.9); }
.screen .btn-ghost:hover { background: var(--navy); color: var(--paper); }
.site-nav a, .topnav a, header nav a { opacity: 1; }
/* THE IMAGE backdrop: the developer's film, silent, or the building's photo. */
#imageMedia video.bg-film, #imageMedia img.bg-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top-bar .back { color: var(--gold-light); opacity: 1; }
/* The tour container's inline height:100% resolves against a parent with no
   height, so the video fell back to 150px and drew its controls at the top of
   a black box. Pin the player to the container instead. Contain, not cover:
   a walkthrough cropped at the edges hides the room it is showing. */
#tourViewerContainer #tourVideo, #tourViewerContainer #tourIframe {
  position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: contain; background: #05070a;
}
#section-vision .screen-media .ph-tag { display: none; }
/* THE VIEW: the live 3D on top, the developer's photography of that level
   beneath it. As a flex ROW the two split the width and the 3D became a
   430px sliver. */
@media (min-width: 1200px) {
  .screen#section-view .view-stage-col { flex-direction: column; align-items: stretch; justify-content: center; gap: 1rem; }
  .screen#section-view .view-stage-col .dev-view { margin-top: 0; }
  .screen#section-view .view-stage-col:has(#devViewPanel[style*="block"]) .view-3d-embed { height: calc(100vh - 360px); min-height: 440px; }
}
.dev-view-stage { max-height: 42vh; }
/* THE SHOW / THE WORTH: a form read over a photograph is a form nobody can
   read. The photo stays as the backdrop; the form sits on a paper card. */
.screen#section-show .screen-content, .screen#section-worth .screen-content {
  background: rgba(250, 248, 243, 0.96); padding: 2rem 2rem 1.6rem; border-radius: 10px;
  border: 1px solid var(--hairline); box-shadow: 0 18px 50px rgba(18, 36, 66, 0.18);
}
.screen#section-show input, .screen#section-show textarea, .screen#section-show select,
.screen#section-worth input, .screen#section-worth textarea, .screen#section-worth select {
  background: #fff; color: var(--navy); border-color: rgba(18, 36, 66, 0.22);
}
.screen#section-show ::placeholder, .screen#section-worth ::placeholder { color: #6b778a; }
.screen#section-show .consent-row, .screen#section-worth .consent-row { color: #4a5568; }
.pv-doc-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  background: linear-gradient(180deg, #fbfaf6, #f1ede3); color: var(--gold-ink, #7d6224); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── THE ROOM TOUR ─────────────────────────────────────────────────────────
   The developer's renderings, room by room: crossfade + a slow pan/zoom. */
.room-tour { width: 100%; }
.rt-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 360px; overflow: hidden;
  border-radius: 12px; background: #05070a; box-shadow: 0 12px 36px rgba(0,0,0,0.35); }
@media (min-width: 1200px) { .rt-frame { height: calc(100vh - 220px); max-height: 780px; aspect-ratio: auto; } }
.rt-frame:fullscreen { border-radius: 0; max-height: none; height: 100%; }
.rt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.4s ease; transform-origin: center; will-change: transform, opacity; }
.rt-img.on { opacity: 1; }
.rt-img.kb0 { animation: rtKb0 9s ease-out forwards; }
.rt-img.kb1 { animation: rtKb1 9s ease-out forwards; }
.room-tour.paused .rt-img { animation-play-state: paused; }
@keyframes rtKb0 { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.14) translate(-2.5%, -1.5%); } }
@keyframes rtKb1 { from { transform: scale(1.14) translate(2%, 1.5%); } to { transform: scale(1.03) translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .rt-img.kb0, .rt-img.kb1 { animation: none; } .rt-img { transition: none; } }
.rt-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,10,0.35) 0%, rgba(5,7,10,0) 22%, rgba(5,7,10,0) 62%, rgba(5,7,10,0.72) 100%); }
.rt-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; background: rgba(18,36,66,0.72); border: 1px solid rgba(199,169,104,0.6);
  padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.rt-caption { position: absolute; left: 18px; bottom: 26px; z-index: 2; display: flex; align-items: baseline; gap: 0.8rem; color: #fff; }
.rt-room { font-family: var(--serif, 'Playfair Display', serif); font-size: clamp(1.3rem, 2.4vw, 2rem); text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.rt-count { font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.78); }
.rt-controls { position: absolute; right: 14px; bottom: 20px; z-index: 2; display: flex; gap: 6px; }
.rt-controls button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(5,7,10,0.55); color: #fff; font-size: 1rem; cursor: pointer; backdrop-filter: blur(6px); }
.rt-controls button:hover, .rt-controls button:focus-visible { background: var(--gold, #C7A968); color: var(--navy, #122442); border-color: transparent; }
.rt-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.18); z-index: 2; }
.rt-progress span { display: block; height: 100%; width: 0; background: var(--gold, #C7A968); }
.rt-progress span.run { animation: rtBar 6.5s linear forwards; }
.room-tour.paused .rt-progress span.run { animation-play-state: paused; }
@keyframes rtBar { from { width: 0; } to { width: 100%; } }
.rt-rooms { margin-top: 0.8rem; }
@media (max-width: 600px) { .rt-frame { min-height: 260px; aspect-ratio: 4 / 5; } .rt-controls button { width: 34px; height: 34px; } }
/* A grid column sizes to its widest child unless told otherwise: the room
   chips pushed the stage past the viewport and the page scrolled sideways. */
.screen#section-vision .vision-stage-col { min-width: 0; }
.room-tour { min-width: 0; max-width: 100%; }
.rt-rooms { flex-wrap: wrap; }
.field-lbl { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field-lbl > span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink, #7d6224); }
.field-lbl > input { width: 100%; }

/* Vision mode tab ("OFFICIAL DEVELOPER TOUR"): it had no style of its own and
   picked up white button text, which vanished on the paper background. */
.section-mode-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.mode-tab-btn {
  font: 600 0.72rem/1 var(--sans, 'Inter', sans-serif); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1rem; border-radius: 999px; cursor: pointer;
  color: var(--navy, #122442); background: #fff; border: 1px solid var(--navy, #122442);
}
.mode-tab-btn.active { background: var(--navy, #122442); color: var(--gold-light, #DAC18A); border-color: var(--navy, #122442); }
.mode-tab-btn:hover { border-color: var(--gold, #C7A968); }

/* ── THE PLAN IN 3D: beside the layout list on a large screen, below it everywhere else ── */
.pw-stage{ background: rgba(8,14,24,0.92); border: 1px solid rgba(200,170,110,0.35); border-radius: 12px; padding: 14px 14px 10px; margin-bottom: 1.2rem; }
.pw-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.pw-kicker{ font-size:0.68rem; letter-spacing:0.22em; color:#c8aa6e; }
.pw-title{ font-size:1.15rem; color:#fff; margin-top:2px; }
.pw-close{ background:none; border:1px solid rgba(255,255,255,0.3); color:#fff; width:34px; height:34px; border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; }
.pw-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.pw-tabs button{ background:transparent; border:1px solid rgba(255,255,255,0.3); color:#fff; padding:7px 14px; border-radius:999px; font-size:0.72rem; letter-spacing:0.12em; cursor:pointer; }
.pw-tabs button.on{ background:#c8aa6e; border-color:#c8aa6e; color:#0b1220; }
.pw-canvas{ width:100%; height:460px; border-radius:8px; overflow:hidden; background:#0b1f3a; position:relative; }
.pw-canvas canvas{ display:block; width:100% !important; height:100% !important; }
.pw-msg{ color:#cfd6e2; padding:24px; margin:0; }
.pw-note{ font-size:0.8rem; color:#b9c2d0; margin:8px 0 0; line-height:1.5; }
.pw-links{ margin:6px 0 0; font-size:0.85rem; } .pw-links a{ color:#c8aa6e; }
@media (max-width:700px){ .pw-canvas{ height: min(52vh, 360px); } }
@media (min-width:1200px){ .pw-canvas{ height: calc(100vh - 330px); min-height: 420px; max-height: 700px; } }
.pv-3d-badge{ display:inline-block; margin-top:4px; font-size:0.62rem; letter-spacing:0.14em; color:#0b1220; background:#c8aa6e; padding:3px 8px; border-radius:999px; }

/* The "Floor plans in live 3D" band sits on the light page: the hero's pale button text was invisible here. */
.live3d h2{ color: var(--ink, #14233a); }
.live3d .section-copy{ color: #3b4658; }
.live3d .btn-outline-gold{
  color: #14233a; border-color: #b08d4a; background: #fff; padding: 0.7rem 1.3rem; margin: 4px 3px;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.live3d .btn-outline-gold:hover, .live3d .btn-outline-gold:focus-visible{ background: #14233a; color: #fff; border-color: #14233a; }

/* The developer's own film: labelled as theirs, apart from ours. */
.dev-media{ margin: 1.1rem 0 0.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.dev-media-label{ font-size:0.68rem; letter-spacing:0.22em; color:#c8aa6e; width:100%; }
.dev-media-note{ font-size:0.78rem; opacity:0.75; }
.dev-media-tag{ position:absolute; top:12px; left:12px; z-index:3; font-size:0.66rem; letter-spacing:0.2em; color:#0b1220; background:#c8aa6e; padding:4px 10px; border-radius:999px; }

/* The film player: full screen, sound on, closes with the X, Esc or a click outside. */
.film-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(4,8,14,0.96); display:flex; align-items:center; justify-content:center; padding:3vh 3vw; }
.film-lightbox video{ width:min(94vw, 167vh); max-height:94vh; aspect-ratio:16/9; object-fit:contain; background:#000; border-radius:6px; }
.film-close{ position:absolute; top:14px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.45); background:rgba(0,0,0,0.5); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }
.film-tag{ position:absolute; top:20px; left:22px; z-index:2; font-size:0.68rem; letter-spacing:0.2em; color:#0b1220; background:#c8aa6e; padding:5px 12px; border-radius:999px; }

.form-fineprint{ font-size:0.78rem; opacity:0.75; margin:6px 0 0; text-align:center; }

/* Registering for THE VIEW: a short form on this page, not a second site inside the view frame. */
.vr-modal{ position:fixed; inset:0; z-index:9998; background:rgba(8,14,24,0.72); display:flex; align-items:center; justify-content:center; padding:16px; }
.vr-box{ position:relative; background:var(--paper, #faf8f3); color:#14233a; width:min(520px,100%); max-height:92vh; overflow:auto; border-radius:10px; padding:26px 22px 20px; box-shadow:0 20px 60px rgba(0,0,0,0.35); }
.vr-title{ font-family: var(--serif); font-size:1.5rem; margin:4px 0 6px; }
.vr-copy{ font-size:0.9rem; color:#3b4658; margin:0 0 14px; }
.vr-close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(20,35,58,0.25); background:transparent; font-size:1.4rem; line-height:1; cursor:pointer; color:#14233a; }

.pw-pad{ position:absolute; right:12px; bottom:12px; z-index:3; display:none; flex-direction:column; align-items:center; gap:6px; }
.pw-pad div{ display:flex; gap:6px; }
.pw-pad button{ width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); background:rgba(8,14,24,0.7); color:#fff; font-size:1.1rem; touch-action:none; user-select:none; -webkit-user-select:none; }

/* ---------- Home hero, Oct 23 (owner's mock-up): 619 Brickell in full colour ----------
   The photo is not tinted navy any more: a soft shade sits only behind the text, top-left, so the bay and the sky stay
   vivid. The headline has two lines of extra space below it. The search sits on the photo. */
.hero.hero-619{ min-height: 100dvh; justify-content: flex-start; padding: 1.6rem 1.5rem 1.6rem; overflow: visible; }
.hero-619 .hero-photo{ position: absolute; inset: 0; overflow: hidden; }
.hero-619 .hero-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; filter: brightness(0.85); }   /* owner, Oct 23: 15% darker so the text reads easily */
.hero-619 .hero-scrim{
  background:
    radial-gradient(120% 75% at 0% 15%, rgba(10,24,52,0.5) 0%, rgba(10,24,52,0.24) 45%, rgba(10,24,52,0) 72%),
    linear-gradient(180deg, rgba(10,24,52,0.28) 0%, rgba(10,24,52,0) 30%, rgba(10,24,52,0) 70%, rgba(10,24,52,0.35) 100%);
}
.hero-619 .hero-content{ max-width: 640px; display: flex; flex-direction: column; min-height: calc(100dvh - 3.2rem); }
.hero-619 .hero-logo img{ height: 74px; width: auto; display: block; margin-bottom: 1.6rem; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)); }
.hero-619 .hero-badge{ align-self: flex-start; letter-spacing: 0.12em; font-size: 0.74rem; padding: 0.55rem 1.2rem; margin-bottom: 1.3rem;
  background: rgba(10,24,52,0.25); color: #f0d79a; }
.hero-619 h1{ font-size: clamp(2.3rem, 9vw, 4.1rem); max-width: 16ch; margin: 0; line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.hero-619 h1 em{ color: #f0d79a; }
.hero-619 .hero-points{ list-style: none; padding: 0; margin: 3.2em 0 0; }   /* two more lines of space under the headline */
.hero-619 .hero-points li{ color: #fff; font-size: clamp(1.02rem, 3.6vw, 1.28rem); line-height: 1.45; margin: 0 0 0.35em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.hero-619 .hero-rule{ height: 1px; background: linear-gradient(90deg, #c8aa6e, rgba(200,170,110,0.35)); margin: 1.3rem 0 1.1rem; max-width: 560px; }
.hero-619 .hero-count{ color: #fff; font-size: clamp(1.05rem, 3.8vw, 1.32rem); line-height: 1.4; margin: 0 0 1.6rem; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.hero-619 .hero-count b{ color: #f0d79a; font-size: 1.75em; font-weight: 600; margin-right: 0.15em; vertical-align: -0.08em; }
.hero-619 .hero-cta-row{ flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: auto; }
.hero-619 .hero-btn{ display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-width: min(100%, 23rem);
  padding: 1rem 1.6rem; font-size: 0.86rem; letter-spacing: 0.1em; border-radius: 4px; }
.hero-619 .btn-navy-solid.hero-btn{ background: #0f2552; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.hero-619 .btn-outline-gold.hero-btn{ background: rgba(10,24,52,0.72); color: #fff; border: 1px solid #c8aa6e; }
.hero-619 .hero-search{ margin: 1.4rem 0 0; max-width: 640px; width: 100%; }
.hero-619 .hero-search .search-input-row{ background: #fff; border: 0; border-radius: 6px; padding: 0.95rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.hero-619 .hero-search .search-input-row input{ font-size: 1rem; }
.hero-619 .hero-search .search-tabs button{ color: rgba(255,255,255,0.85); font-size: 0.78rem; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero-619 .hero-search .search-tabs button.active{ color: #fff; border-color: #c8aa6e; }
.hero-619 .hero-search .search-results{ background: #fff; border-radius: 6px; }
.hero-619 .hero-search .search-results:empty{ display: none; }
@media (max-width: 760px){
  .hero-619 .hero-photo img{ object-position: 64% 50%; }    /* the tower at the right edge, the bay behind the text */
  .hero-619 .hero-scrim{ background: linear-gradient(90deg, rgba(10,24,52,0.42) 0%, rgba(10,24,52,0.18) 60%, rgba(10,24,52,0) 100%), linear-gradient(180deg, rgba(10,24,52,0.22) 0%, rgba(10,24,52,0) 30%, rgba(10,24,52,0) 78%, rgba(10,24,52,0.28) 100%); }
  .hero-619 .hero-badge{ font-size: 0.62rem; letter-spacing: 0.08em; padding: 0.5rem 0.9rem; white-space: nowrap; }
}
@media (min-width: 900px){
  .hero.hero-619{ padding: 2.4rem 4rem 2.4rem; }
  .hero-619 .hero-content{ min-height: calc(100dvh - 4.8rem); }
  .hero-619 .hero-logo img{ height: 92px; }
  .hero-619 .hero-cta-row{ margin-top: 2.2rem; }
  .hero-619 .hero-photo img{ object-position: 60% 50%; }
}

/* CAPTURE: the plan's rooms, under the 3D (planwalk.js) */
.pw-capture{ margin:0 0 10px; }
.pw-capture-btn{ width:100%; background:#c8aa6e; color:#0b1220; border:0; border-radius:999px; padding:13px 18px; font-size:0.8rem; font-weight:700; letter-spacing:0.16em; cursor:pointer; }
.pw-capture-btn span{ font-weight:500; letter-spacing:0.04em; text-transform:none; font-size:0.85rem; }
.pw-capture-btn:disabled{ opacity:0.6; cursor:progress; }
.pw-rooms{ margin-top:12px; }
.pw-loader{ display:flex; gap:14px; align-items:flex-start; color:#e6ebf2; font-size:0.9rem; line-height:1.5; padding:14px; border:1px solid rgba(200,170,110,0.35); border-radius:10px; }
.pw-loader small{ color:#b9c2d0; }
.pw-spin{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; border:3px solid rgba(200,170,110,0.25); border-top-color:#c8aa6e; animation:pwspin 0.9s linear infinite; }
@keyframes pwspin{ to{ transform:rotate(360deg); } }
.pw-room-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:10px; }
.pw-room{ position:relative; padding:0; border:0; border-radius:8px; overflow:hidden; cursor:zoom-in; background:#0b1f3a; aspect-ratio:16/9; }
.pw-room img{ width:100%; height:100%; object-fit:cover; display:block; }
.pw-room span{ position:absolute; left:0; right:0; bottom:0; padding:18px 10px 7px; font-size:0.78rem; color:#fff; text-align:left; background:linear-gradient(transparent, rgba(0,0,0,0.7)); }
.pw-retry{ margin-left:8px; background:none; border:1px solid #c8aa6e; color:#c8aa6e; border-radius:999px; padding:4px 12px; cursor:pointer; }
.pw-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(4,8,14,0.94); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
.pw-lightbox img{ max-width:100%; max-height:80vh; border-radius:8px; }
.pw-lb-cap{ color:#fff; margin-top:10px; font-size:0.95rem; display:flex; gap:14px; } .pw-lb-cap span{ color:#b9c2d0; }
.pw-lb-x{ position:absolute; top:14px; right:16px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,0.4); background:none; color:#fff; font-size:1.5rem; cursor:pointer; }
.pw-lb-p, .pw-lb-n{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.4); background:rgba(8,14,24,0.6); color:#fff; font-size:1.8rem; cursor:pointer; }
.pw-lb-p{ left:12px; } .pw-lb-n{ right:12px; }
.pw-toast{ position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); z-index:9998; background:#c8aa6e; color:#0b1220; font-weight:600; font-size:0.9rem; padding:11px 20px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.pw-toast.on{ opacity:1; transform:translate(-50%, 0); }
/* After THE VISION: CAPTURE and THE VIEW side by side (owner, Oct 24) */
.next-hook .nh-actions{ display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
#visionCaptureBtn{ color:#c8aa6e; font-weight:600; }

/* ── EXPLORE: Street View, the step after THE VIEW ───────────────────────── */
.explore-cta { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }
.explore-cta .eyebrow { margin-bottom: 0.5rem; }
.explore-btn { padding: 0.7rem 1.2rem; font-size: 0.78rem; letter-spacing: 0.12em; border-radius: 999px; }
.explore-stage {
  width: 100%;
  height: 480px;
  max-height: 56vh;
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
  background: #00243f;
  border: 1px solid rgba(199,169,104,0.35);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}
.explore-stage { scroll-margin-top: calc(var(--nav-h) + 12px); }
.explore-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.55rem 0.8rem; background: var(--navy); color: var(--paper);
  border-bottom: 1px solid rgba(199,169,104,0.45);
}
.explore-label { font-family: var(--serif); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--gold-light); }
.explore-back {
  background: transparent; color: var(--paper); border: 1px solid rgba(199,169,104,0.6);
  border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.72rem; letter-spacing: 0.1em; cursor: pointer; white-space: nowrap;
  font-family: var(--sans);
}
.explore-back:hover, .explore-back:focus-visible { border-color: var(--gold); color: var(--gold-light); }
.explore-view { flex: 1; width: 100%; min-height: 0; background: #00243f; }
.explore-msg { color: var(--paper); font-size: 0.85rem; padding: 1.2rem; }
@media (min-width: 1200px) {
  .screen#section-view .explore-stage {
    height: calc(100vh - 160px); min-height: 580px; max-height: 840px; margin-top: 0;
  }
}
@media (max-width: 600px) {
  .explore-stage { height: 440px; max-height: 70vh; }
  .explore-label { font-size: 0.72rem; }
}