/* =========================================================
   KARASAY PLAZA — Design System
   "Architectural Prestige": sharp geometry, editorial grid,
   navy / orange / sand / white, zero border-radius.
   ========================================================= */

:root{
  --deep-navy:      #0A0C10;
  --surface:         #141314;
  --surface-container-lowest: #0e0e0e;
  --on-surface:      #E5E2E2;
  --on-surface-variant: #C6C6CB;
  --outline:         #909095;
  --outline-variant: rgba(255,255,255,0.12);
  --brand-orange:    #FF5C00;
  --warm-sand:       #F5F2EE;
  --pure-white:      #FFFFFF;

  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --edge: clamp(20px, 5vw, 96px);
  --gutter: 2rem;
  --stack-section: clamp(4rem, 10vw, 9rem);

  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--brand-orange); color:var(--deep-navy); }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brand-orange);
}
.h-display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:0.95;
  text-transform:uppercase;
  font-size:clamp(2.6rem, 6.2vw, 6.5rem);
}
.h-section{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.02;
  text-transform:uppercase;
  font-size:clamp(2rem, 4vw, 3.4rem);
}
.h-title{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  font-size:1.35rem;
}
.body-lg{ font-size:1.125rem; line-height:1.6; color:var(--on-surface-variant); }
.body-md{ font-size:1rem; line-height:1.6; }
.label-caps{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.15em;
  text-transform:uppercase;
}
.on-light{ color:var(--deep-navy); }
.on-light .body-lg,.on-light .body-md{ color:rgba(10,12,16,0.72); }
.rule{ width:48px; height:3px; background:var(--brand-orange); }

/* ---------- Layout helpers ---------- */
.section{ padding:var(--stack-section) var(--edge); }
.section-tight{ padding:4rem var(--edge); }
.bg-navy{ background:var(--deep-navy); color:var(--pure-white); }
.bg-surface{ background:var(--surface); color:var(--on-surface); }
.bg-sand{ background:var(--warm-sand); color:var(--deep-navy); }
.bg-white{ background:var(--pure-white); color:var(--deep-navy); }
.container{ max-width:1440px; margin:0 auto; }
.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
@media (max-width:860px){ .grid-12{ grid-template-columns:1fr; } }

.hairline-border{ border:1px solid var(--outline-variant); }
.hairline-top{ border-top:1px solid var(--outline-variant); }
.hairline-bottom{ border-bottom:1px solid var(--outline-variant); }
.on-light.hairline-border{ border-color:rgba(10,12,16,0.14); }
.on-light.hairline-top{ border-top-color:rgba(10,12,16,0.14); }
.on-light.hairline-bottom{ border-bottom-color:rgba(10,12,16,0.14); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 2rem;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:0;
  transition:opacity .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--brand-orange); color:var(--deep-navy); }
.btn-primary:hover{ opacity:.88; }
.btn-outline-dark{ background:transparent; border-color:rgba(10,12,16,0.4); color:var(--deep-navy); }
.btn-outline-dark:hover{ border-color:var(--deep-navy); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,0.5); color:var(--pure-white); }
.btn-outline-light:hover{ border-color:var(--pure-white); background:rgba(255,255,255,0.06); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,12,16,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--outline-variant);
}
.site-header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--edge);
}
.logo{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:1.15rem;
  text-transform:uppercase;
  color:var(--pure-white);
}
.logo span{ color:var(--brand-orange); }
.nav-desktop{ display:flex; gap:2.2rem; align-items:center; }
.nav-desktop a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--on-surface-variant);
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-desktop a:hover{ color:var(--pure-white); }
.header-actions{ display:flex; align-items:center; gap:1.4rem; }
.burger{
  display:none;
  background:none; border:none; color:var(--pure-white);
  width:40px; height:40px; align-items:center; justify-content:center;
}
.burger .bar{ display:block; width:22px; height:2px; background:currentColor; position:relative; }
.burger .bar::before,.burger .bar::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; transition:transform .25s var(--ease); }
.burger .bar::before{ top:-7px; }
.burger .bar::after{ top:7px; }

@media (max-width:960px){
  .nav-desktop, .header-actions .btn{ display:none; }
  .burger{ display:flex; }
}

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:var(--deep-navy);
  padding:6.5rem var(--edge) 2rem;
  display:flex; flex-direction:column; gap:2rem;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a{ font-family:var(--font-display); font-size:1.8rem; text-transform:uppercase; color:var(--pure-white); }
.mobile-nav .btn{ margin-top:1rem; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:8rem var(--edge) 3rem;
  background:var(--deep-navy);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:0.92; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,12,16,0.55) 0%, rgba(10,12,16,0.15) 32%, rgba(10,12,16,0.55) 78%, rgba(10,12,16,0.94) 100%);
}
.hero__content{ position:relative; z-index:2; }
.hero__top{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; margin-bottom:1.6rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.2rem; }
.hero__meta-item{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--on-surface-variant); }
.hero__meta-item b{ color:var(--pure-white); font-weight:600; }
.hero__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:3rem; align-items:end; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero__disclaimer{
  margin-top:2.4rem;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  color:rgba(229,226,226,0.55);
  border-top:1px solid var(--outline-variant);
  padding-top:1rem;
  max-width:60ch;
}
@media (max-width:860px){
  .hero{ padding-top:7rem; }
  .hero__grid{ grid-template-columns:1fr; gap:1.6rem; }
}

/* ---------- KPI strip ---------- */
.kpi-strip{ padding:3.5rem var(--edge); }
.kpi-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2rem; }
.kpi-item{ border-top:2px solid var(--deep-navy); padding-top:1rem; }
.kpi-item .value{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-0.02em; line-height:1; }
.kpi-item .value.accent{ color:var(--brand-orange); }
.kpi-item .label{ margin-top:.6rem; display:block; }
@media (max-width:860px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- About / Why sections ---------- */
.about-grid{ display:grid; grid-template-columns:4fr 8fr; gap:var(--gutter); margin-bottom:var(--stack-section); }
.about-grid .col-head{ }
.about-grid .col-body{ grid-column:6/13; }
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .about-grid .col-body{ grid-column:auto; }
}

.why-grid{ display:grid; grid-template-columns:4fr 8fr; gap:var(--gutter); }
.why-card{ border:1px solid rgba(10,12,16,0.16); padding:2.2rem; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.why-card .icon{ font-size:1.8rem; color:var(--brand-orange); margin-bottom:1.4rem; display:block; }
.why-points{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid rgba(10,12,16,0.14); display:flex; flex-direction:column; gap:.9rem; }
.why-points li{ display:flex; align-items:center; gap:.75rem; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; }
.why-points li::before{ content:""; width:6px; height:6px; background:var(--brand-orange); flex-shrink:0; }
.location-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.4rem; }
.stat-box{ border-top:1px solid rgba(10,12,16,0.16); padding-top:.9rem; }
.stat-box .value{ font-family:var(--font-display); font-weight:800; font-size:1.9rem; }
@media (max-width:860px){
  .why-grid{ grid-template-columns:1fr; }
  .location-stats{ grid-template-columns:1fr; }
}

/* ---------- Full width image band ---------- */
.image-band{ position:relative; width:100%; height:min(716px, 78vw); overflow:hidden; }
.image-band img{ width:100%; height:100%; object-fit:cover; }
.image-band__caption{
  position:absolute; left:0; bottom:0;
  background:var(--warm-sand); color:var(--deep-navy);
  padding:1.4rem 2rem; max-width:420px;
  border-top:1px solid rgba(10,12,16,0.14); border-right:1px solid rgba(10,12,16,0.14);
}

/* ---------- Concept / floor tabs ---------- */
.floor-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.floor-tab{
  padding:.85rem 1.4rem;
  border:1px solid var(--outline-variant);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-surface-variant); background:transparent;
  transition:all .2s var(--ease);
}
.floor-tab.is-active{ background:var(--pure-white); color:var(--deep-navy); border-color:var(--pure-white); }
.floor-tab:hover:not(.is-active){ border-color:var(--pure-white); color:var(--pure-white); }
.floor-panels{ position:relative; }
.floor-panel{ display:none; }
.floor-panel.is-active{ display:block; animation:fadeIn .35s var(--ease); }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.floor-panel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.floor-panel-grid img{ width:100%; border:1px solid var(--outline-variant); }
.floor-desc-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:1rem; }
.floor-desc-list li{ display:flex; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--outline-variant); font-size:.95rem; color:var(--on-surface-variant); }
.floor-desc-list li b{ color:var(--pure-white); min-width:120px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:860px){ .floor-panel-grid{ grid-template-columns:1fr; gap:1.6rem; } }

/* ---------- Leasing map ---------- */
.leasing-map-shell{
  display:flex; border:1px solid rgba(10,12,16,0.18);
}
.leasing-map-canvas{
  width:74%; background:var(--pure-white); position:relative; padding:2rem;
  min-height:640px; display:flex; align-items:center; justify-content:center;
  border-right:1px solid rgba(10,12,16,0.18);
}
.leasing-map-panel{ width:26%; background:var(--warm-sand); padding:2.2rem; display:flex; flex-direction:column; }
.leasing-toolbar{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:1.5rem; margin-bottom:2rem;
}
.filter-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-btn{
  padding:.65rem 1.1rem; border:1px solid rgba(10,12,16,0.2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:rgba(10,12,16,0.75); transition:all .2s;
}
.filter-btn.is-active{ background:var(--deep-navy); color:var(--pure-white); border-color:var(--deep-navy); }
.filter-btn:hover:not(.is-active){ border-color:var(--deep-navy); color:var(--deep-navy); }

.floor-selector{ position:absolute; top:1.5rem; left:1.5rem; z-index:5; display:flex; flex-direction:column; gap:.5rem; }
.floor-selector button{
  width:56px; height:44px; border:1px solid rgba(10,12,16,0.2); background:var(--pure-white);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--deep-navy);
}
.floor-selector button.is-active{ background:var(--deep-navy); color:var(--pure-white); border-color:var(--deep-navy); }

.floor-plan-svg{ width:100%; height:100%; max-height:600px; }
.plan-shell{ fill:#faf9f7; stroke:rgba(10,12,16,0.12); stroke-width:1; }
.plan-atrium{ fill:rgba(10,12,16,0.05); stroke:rgba(10,12,16,0.15); stroke-width:1; }
.plan-unit{
  fill:rgba(255,92,0,0.08);
  stroke:rgba(10,12,16,0.55);
  stroke-width:1.2;
  cursor:pointer;
  transition:fill .2s, stroke .2s, stroke-width .2s;
}
.plan-unit:hover{ fill:rgba(255,92,0,0.22); stroke:var(--brand-orange); stroke-width:2; }
.plan-unit.is-selected{ fill:rgba(255,92,0,0.3); stroke:var(--brand-orange); stroke-width:2.5; }
.plan-unit.status-leased{ fill:rgba(10,12,16,0.08); stroke:rgba(10,12,16,0.3); cursor:not-allowed; }
.plan-unit.status-negotiation{ fill:rgba(252,211,77,0.35); stroke:#b98600; }
.plan-unit.is-hidden{ display:none; }
.plan-label{ pointer-events:none; font-family:'JetBrains Mono',monospace; fill:rgba(10,12,16,0.8); text-anchor:middle; }
.plan-label.num{ font-size:15px; font-weight:700; }
.plan-label.area{ font-size:11px; }

.unit-card__eyebrow{ margin-bottom:.4rem; }
.unit-card__number{ font-family:var(--font-display); font-weight:800; font-size:3rem; line-height:1; margin-bottom:1rem; }
.unit-card__status{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; }
.status-dot{ display:inline-block; width:8px; height:8px; margin-right:.5rem; vertical-align:middle; }
.status-available .status-dot,.status-available{ color:var(--brand-orange); }
.status-available .status-dot{ background:var(--brand-orange); }
.status-negotiation .status-dot,.status-negotiation{ color:#a67300; }
.status-negotiation .status-dot{ background:#fcd34d; }
.status-leased .status-dot,.status-leased{ color:rgba(10,12,16,0.5); }
.status-leased .status-dot{ background:rgba(10,12,16,0.3); }
.unit-card__rows{ margin:1.6rem 0; display:flex; flex-direction:column; }
.unit-card__row{ display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid rgba(10,12,16,0.12); font-size:.92rem; }
.unit-card__row span:first-child{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(10,12,16,0.55); }
.unit-card__row span:last-child{ font-weight:600; }
.unit-card__empty{ color:rgba(10,12,16,0.55); font-size:.95rem; margin-top:1rem; }
.legend{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid rgba(10,12,16,0.14); font-size:12px; }
.legend-item{ display:flex; align-items:center; gap:.6rem; color:rgba(10,12,16,0.7); }
.legend-swatch{ width:12px; height:12px; }

@media (max-width:960px){
  .leasing-map-shell{ display:none; }
}
.leasing-map-mobile{ display:none; }
@media (max-width:960px){
  .leasing-map-mobile{ display:block; }
}

/* Mobile map */
.mmap{ position:relative; background:var(--pure-white); border:1px solid rgba(10,12,16,0.18); overflow:hidden; }
.mmap__head{ padding:1.2rem 1.2rem 0; }
.mmap__floors{ display:flex; gap:.5rem; overflow-x:auto; padding:1rem 1.2rem; -webkit-overflow-scrolling:touch; }
.mmap__floors button{
  flex-shrink:0; padding:.6rem 1rem; border:1px solid rgba(10,12,16,0.2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--deep-navy); background:transparent;
}
.mmap__floors button.is-active{ background:var(--deep-navy); color:var(--pure-white); border-color:var(--deep-navy); }
.mmap__filters{ display:flex; gap:.5rem; overflow-x:auto; padding:0 1.2rem 1rem; -webkit-overflow-scrolling:touch; }
.mmap__filters button{
  flex-shrink:0; padding:.5rem .85rem; border:1px solid rgba(10,12,16,0.16);
  font-family:var(--font-mono); font-size:10.5px; color:rgba(10,12,16,0.7); background:transparent;
}
.mmap__filters button.is-active{ background:var(--deep-navy); color:var(--pure-white); border-color:var(--deep-navy); }
.mmap__viewport{
  position:relative; height:62vh; min-height:420px; overflow:hidden;
  border-top:1px solid rgba(10,12,16,0.14); touch-action:none;
  background:#faf9f7;
}
.mmap__stage{ position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:0 0; }
.mmap__hint{
  position:absolute; bottom:1rem; right:1rem; z-index:5;
  background:rgba(10,12,16,0.82); color:var(--pure-white);
  padding:.5rem .9rem; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  display:flex; align-items:center; gap:.4rem;
}
.mmap__zoom{ position:absolute; bottom:1rem; left:1rem; z-index:5; display:flex; flex-direction:column; }
.mmap__zoom button{ width:36px; height:36px; background:var(--pure-white); border:1px solid rgba(10,12,16,0.2); font-size:16px; color:var(--deep-navy); }

.bottom-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--pure-white); color:var(--deep-navy);
  border-top:1px solid rgba(10,12,16,0.18);
  transform:translateY(100%);
  transition:transform .3s var(--ease);
  padding:1.6rem 1.4rem 2rem;
  max-height:80vh; overflow-y:auto;
}
.bottom-sheet.is-open{ transform:translateY(0); }
.bottom-sheet__backdrop{
  position:fixed; inset:0; z-index:190; background:rgba(10,12,16,0.4);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.bottom-sheet__backdrop.is-open{ opacity:1; pointer-events:auto; }
.bottom-sheet__close{ position:absolute; top:1.2rem; right:1.2rem; background:none; border:none; font-size:1.4rem; color:rgba(10,12,16,0.5); }
.bottom-sheet__grip{ width:36px; height:4px; background:rgba(10,12,16,0.15); margin:0 auto 1.2rem; }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--outline-variant); }
.gallery-item{ position:relative; aspect-ratio:4/3; overflow:hidden; cursor:pointer; background:var(--surface); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery-item:hover img{ transform:scale(1.05); }
.gallery-item__tag{
  position:absolute; left:0; bottom:0; padding:.6rem .9rem;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(10,12,16,0.75); color:var(--pure-white);
}
@media (max-width:860px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

.lightbox{
  position:fixed; inset:0; z-index:300; background:rgba(10,12,16,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
  padding:4vh 4vw;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; }
.lightbox__close,.lightbox__prev,.lightbox__next{
  position:absolute; background:none; border:1px solid rgba(255,255,255,0.3); color:var(--pure-white);
  width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.lightbox__close{ top:2rem; right:2rem; }
.lightbox__prev{ left:2rem; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:2rem; top:50%; transform:translateY(-50%); }
.lightbox__caption{ position:absolute; bottom:2rem; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,0.6); }

/* ---------- Leasing CTA ---------- */
.cta-final h2{ max-width:900px; }
.cta-final .body-lg{ max-width:640px; margin:2rem 0 3rem; }
.cta-row{ display:flex; gap:1.2rem; flex-wrap:wrap; }

/* ---------- Form ---------- */
.lease-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form-field{ display:flex; flex-direction:column; gap:.5rem; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(10,12,16,0.6); }
.form-field input, .form-field select, .form-field textarea{
  border:none; border-bottom:1px solid rgba(10,12,16,0.3);
  background:transparent; padding:.8rem 0; font-family:var(--font-body); font-size:1rem; color:var(--deep-navy);
  border-radius:0;
}
.form-field input::placeholder,.form-field textarea::placeholder{ color:rgba(10,12,16,0.35); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--brand-orange); }
.form-note{ grid-column:1/-1; font-size:.8rem; color:rgba(10,12,16,0.55); margin-top:.4rem; }
@media (max-width:700px){ .lease-form{ grid-template-columns:1fr; } }

/* ---------- Contacts ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-block{ display:flex; flex-direction:column; gap:1.6rem; }
.contact-row{ display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.4rem; border-bottom:1px solid var(--outline-variant); }
.contact-row .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-surface-variant); min-width:130px; }
.contact-row .v{ font-size:1.05rem; }
.contact-row a:hover{ color:var(--brand-orange); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:2.5rem; } }

.whatsapp-fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:80;
  width:56px; height:56px; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,0.35);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--surface-container-lowest); padding:3rem var(--edge); border-top:1px solid var(--outline-variant); }
.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; }
.footer-links{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.footer-links a{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-surface-variant); }
.footer-links a:hover{ color:var(--brand-orange); }
.footer-copy{ font-size:12px; color:rgba(229,226,226,0.4); margin-top:1rem; }

/* ---------- Utility ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- V2.1 truth-first refinements ---------- */
.location-map{ margin:0; border:1px solid rgba(10,12,16,.14); background:#fff; overflow:hidden; }
.location-map img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center; }
.location-map figcaption{ padding:.8rem 1rem; border-top:1px solid rgba(10,12,16,.12); font-family:var(--font-mono); font-size:10px; line-height:1.5; letter-spacing:.04em; color:rgba(10,12,16,.55); }
.concept-plan{ position:relative; min-height:420px; background:#f6f2e8; border:1px solid var(--outline-variant); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.concept-plan img{ width:100%; height:100%; max-height:560px; object-fit:contain; border:0; padding:1.2rem; filter:contrast(1.02); }
.concept-plan__floor{ position:absolute; top:1rem; left:1rem; z-index:2; font-family:var(--font-display); font-size:clamp(3rem,7vw,6rem); font-weight:800; letter-spacing:-.06em; line-height:.85; color:rgba(255,92,0,.16); pointer-events:none; }
.plan-disclaimer{ margin:0 0 1.4rem; padding:1rem 1.2rem; border-left:3px solid var(--brand-orange); background:rgba(10,12,16,.04); font-size:.82rem; line-height:1.55; color:rgba(10,12,16,.66); }
.plan-disclaimer strong{ color:var(--deep-navy); }
.plan-unit.status-verify{ fill:rgba(255,92,0,.08); stroke:rgba(10,12,16,.35); stroke-dasharray:5 4; }
.status-verify .status-dot,.status-verify{ color:rgba(10,12,16,.62); }
.status-verify .status-dot{ background:transparent; border:1px solid rgba(10,12,16,.5); }
@media (max-width:860px){
  .concept-plan{ min-height:300px; }
  .concept-plan img{ padding:.6rem; }
  .location-map img{ aspect-ratio:4/3; object-fit:cover; }
}

/* ================================================================
   V3 — retail editorial redesign
   ================================================================ */
:root{
  --deep-navy:#111418;
  --surface:#111418;
  --surface-container-lowest:#0c0e11;
  --on-surface:#f5f3ef;
  --on-surface-variant:#bbb9b4;
  --brand-orange:#ef5a29;
  --warm-sand:#f4f1eb;
  --pure-white:#fff;
  --ink:#17191c;
  --muted:#6d6f72;
  --line:#d9d5ce;
  --font-display:'Manrope',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Inter',sans-serif;
  --edge:clamp(20px,5vw,88px);
  --stack-section:clamp(5rem,9vw,8.5rem);
}
body{font-family:var(--font-body);font-size:16px;line-height:1.62;background:#fff;color:var(--ink)}
.eyebrow,.label-caps,.btn,.nav-desktop a,.hero__meta-item,.why-points li,.floor-tab,.filter-btn,.floor-selector button,.unit-card__status,.unit-card__row span:first-child,.gallery-item__tag,.form-field label,.contact-row .k,.footer-links a,.location-map figcaption,.hero__disclaimer,.lightbox__caption{font-family:var(--font-body)}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700}
.h-display{text-transform:none;font-size:clamp(4.1rem,8vw,8.9rem);line-height:.82;letter-spacing:-.075em;font-weight:700}
.h-display span{font-weight:600}.h-display strong{font-weight:800;color:var(--brand-orange)}
.h-section{text-transform:none;font-size:clamp(2.35rem,4.8vw,5rem);line-height:.98;letter-spacing:-.055em;font-weight:700}
.h-title{text-transform:none;font-size:clamp(1.4rem,2vw,2rem);letter-spacing:-.025em;font-weight:650}
.body-lg{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.65}
.label-caps{font-size:11px;letter-spacing:.10em;font-weight:600}
.rule{width:40px;height:2px}
.btn{font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:none;padding:1rem 1.55rem}
.btn-primary{color:#fff;background:var(--brand-orange)}

.site-header{background:rgba(13,16,20,.74);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.09)}
.site-header__row{padding:.95rem var(--edge)}
.logo{font-family:var(--font-display);font-size:1.08rem;letter-spacing:-.03em;text-transform:none}
.logo span{font-weight:800}.nav-desktop{gap:1.6rem}.nav-desktop a{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}

.hero{min-height:94vh;padding:9rem var(--edge) 2.5rem;justify-content:flex-end}
.hero__media img{opacity:1;object-position:center 54%}
.hero__scrim{background:linear-gradient(90deg,rgba(10,12,15,.72) 0%,rgba(10,12,15,.34) 43%,rgba(10,12,15,.08) 74%),linear-gradient(0deg,rgba(10,12,15,.76) 0%,transparent 43%)}
.hero__grid{grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:5vw;align-items:end}
.hero__grid>div:last-child{max-width:470px;margin-left:auto;padding-bottom:.3rem}
.hero__meta{gap:2.1rem;margin-top:1.9rem}.hero__meta-item{display:grid;gap:.25rem;font-size:13px;letter-spacing:0;color:#fff}.hero__meta-item span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.58)}.hero__meta-item b{font-weight:600}
.hero__disclaimer{font-size:10px;letter-spacing:0;max-width:78ch;color:rgba(255,255,255,.52);border-top:0;padding-top:0;margin-top:2rem}

.kpi-strip{padding:3.8rem var(--edge);background:#fff!important}
.kpi-grid{gap:0}.kpi-item{padding:0 2.1rem 0 0;border-top:0;border-right:1px solid var(--line)}.kpi-item:not(:first-child){padding-left:2.1rem}.kpi-item:last-child{border-right:0}.kpi-item .value{font-size:clamp(2rem,3vw,3.25rem);font-weight:650;letter-spacing:-.055em}.kpi-item .value.accent{color:var(--ink)}.kpi-item .label{color:var(--muted);letter-spacing:0;text-transform:none;font-size:12px}

.section.bg-sand{background:var(--warm-sand)!important}.section.bg-surface{background:#fff!important;color:var(--ink)!important}.section.bg-surface .body-lg,.section.bg-surface .body-md{color:var(--muted)}
.about-grid{grid-template-columns:4fr 8fr;align-items:start;margin-bottom:7rem}.about-grid .col-body{grid-column:6/13;max-width:740px}.about-grid .col-body p+p{margin-top:1.2rem}.why-grid{grid-template-columns:4fr 8fr;align-items:start}.why-card{border:0;border-top:1px solid #bdb9b2;padding:1.7rem 0 0}.why-card .icon{font-family:var(--font-display);font-weight:700;font-size:3.7rem;letter-spacing:-.08em;color:rgba(239,90,41,.25)}.why-points li{font-size:13px;letter-spacing:0}.why-points li::before{width:5px;height:5px;border-radius:50%}.location-map{border:0;background:transparent}.location-map img{border:1px solid #ddd7ce}.location-map figcaption{padding:.75rem 0;border:0;font-size:11px;letter-spacing:0}.location-stats{gap:0;margin-top:2rem;border-top:1px solid #cfcac2}.stat-box{border-top:0;border-right:1px solid #cfcac2;padding:1.4rem 1.6rem 0 0}.stat-box:not(:first-child){padding-left:1.6rem}.stat-box:last-child{border-right:0}.stat-box .value{font-weight:650;letter-spacing:-.045em}

#concept{background:#121519!important;color:#fff!important}.floor-tabs{gap:0;border-bottom:1px solid rgba(255,255,255,.16)}.floor-tab{border:0;border-bottom:2px solid transparent;padding:.95rem 1.6rem;color:rgba(255,255,255,.52);text-transform:none;letter-spacing:0;font-size:13px}.floor-tab.is-active{background:transparent;color:#fff;border-color:var(--brand-orange)}.floor-panel-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:5vw}.concept-plan{background:#e9e6df;border:0;min-height:500px}.concept-plan__floor{color:rgba(239,90,41,.18)}.floor-desc-list li{font-size:1rem}.floor-desc-list li b{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:12px;color:rgba(255,255,255,.52)}

#leasing-map{background:#f7f5f1!important}.leasing-toolbar{margin-bottom:1.4rem}.filter-btn{font-size:12px;letter-spacing:0;text-transform:none;border-color:#d2cec7;padding:.65rem 1rem}.filter-btn.is-active{background:var(--ink);border-color:var(--ink)}.leasing-map-shell{border-color:#d2cec7;background:#fff}.leasing-map-canvas{background:#fff;min-height:690px;border-right-color:#d2cec7}.leasing-map-panel{background:#f1eee8;padding:2rem}.floor-selector button{font-family:var(--font-body);font-weight:600}.plan-unit{fill:rgba(239,90,41,.07);stroke:rgba(23,25,28,.4)}.plan-unit:hover,.plan-unit.is-selected{stroke:var(--brand-orange);fill:rgba(239,90,41,.18)}.plan-label{font-family:var(--font-body)}.unit-card__number{font-size:2.5rem;letter-spacing:-.06em}.unit-card__row span:first-child{font-family:var(--font-body);letter-spacing:0;text-transform:none}

#gallery{background:#fff!important}.gallery-grid{gap:12px;background:transparent;grid-template-columns:1.25fr .75fr .75fr}.gallery-item{background:#eee}.gallery-item:first-child{grid-row:span 2;aspect-ratio:auto}.gallery-item__tag{font-size:11px;letter-spacing:0;text-transform:none;background:rgba(10,12,15,.74)}

.cta-final{background:#15181c!important}.cta-final .h-section{max-width:780px}.cta-final .body-lg{color:rgba(255,255,255,.7)}
#contacts{background:#fff!important;color:var(--ink)!important}.contact-row{border-bottom-color:#ddd8d0}.contact-row .k{color:var(--muted);letter-spacing:0;text-transform:none}.site-footer{background:#101216}.footer-links a{text-transform:none;letter-spacing:0}

.mobile-sticky-cta{display:none}

@media(max-width:960px){
 .site-header{background:rgba(13,16,20,.9)}
 .mobile-nav a{font-size:2rem;text-transform:none;letter-spacing:-.04em}
 .hero{min-height:86svh;padding:6.8rem 20px 1.4rem;justify-content:flex-end}
 .hero__media img{object-position:61% center}
 .hero__scrim{background:linear-gradient(0deg,rgba(8,10,13,.9) 0%,rgba(8,10,13,.48) 42%,rgba(8,10,13,.12) 76%)}
 .hero__grid{display:block}.hero__grid>div:last-child{max-width:100%;margin:1.4rem 0 0;padding:0}
 .h-display{font-size:clamp(3.7rem,18vw,6.2rem);line-height:.83}
 .hero .body-lg{font-size:1rem;max-width:34ch;color:rgba(255,255,255,.83)!important}
 .hero__meta{gap:1.4rem}.hero__actions{margin-top:1.25rem}.hero__actions .btn{flex:1 1 auto}.hero__actions .btn-outline-light{display:none}
 .hero__disclaimer{font-size:9px;margin-top:1.25rem;max-width:44ch}
 .kpi-strip{padding:2rem 20px}.kpi-grid{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory}.kpi-item{flex:0 0 46%;padding:0 1rem 0 0;margin-right:1rem;border-right:1px solid var(--line);scroll-snap-align:start}.kpi-item:not(:first-child){padding-left:0}.kpi-item .value{font-size:2rem}.kpi-item .label{font-size:11px}
 .section{padding:4.7rem 20px}.about-grid,.why-grid{display:block;margin-bottom:4.7rem}.about-grid .col-body{margin-top:2rem}.why-card{margin-bottom:4.5rem}.location-stats{display:flex;overflow-x:auto}.stat-box{min-width:52%;padding-right:1rem}.stat-box:not(:first-child){padding-left:1rem}
 .floor-panel-grid{grid-template-columns:1fr;gap:2rem}.concept-plan{min-height:310px;order:2}.floor-panel-grid>div:last-child{order:1}.floor-tabs{overflow-x:auto;flex-wrap:nowrap}.floor-tab{flex:0 0 auto}
 .mmap{border:0;margin:0 -20px}.mmap__viewport{height:64svh;min-height:460px}.mmap__hint{display:none}.mmap__floors,.mmap__filters{padding-left:20px;padding-right:20px}.mmap__head{padding-left:20px;padding-right:20px}
 .gallery-grid{grid-template-columns:1fr 1fr;gap:6px}.gallery-item:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10}
 .contact-grid{gap:3rem}.whatsapp-fab{bottom:74px;width:50px;height:50px}
 .mobile-sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:85;height:52px;align-items:center;justify-content:center;background:var(--brand-orange);color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 26px rgba(0,0,0,.18)}
 .site-footer{padding-bottom:6rem}
}

@media(max-width:520px){
 .hero{min-height:88svh}.h-display{font-size:16.8vw}.hero__meta{display:grid;grid-template-columns:1fr 1fr}.hero__meta-item{font-size:12px}.hero__actions .btn{width:100%}
 .h-section{font-size:2.55rem}.body-lg{font-size:1rem}.gallery-grid{grid-template-columns:1fr}.gallery-item:first-child{grid-column:auto}.leasing-toolbar{display:block}.filter-row{margin-top:1rem;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.3rem}.filter-btn{flex:0 0 auto}
}

/* ================================================================
   V4 — QA polish after V3 self-review
   ================================================================ */
:focus-visible{outline:2px solid var(--brand-orange);outline-offset:3px}
.hero__content,.site-header__row{max-width:1600px;margin-left:auto;margin-right:auto}
.leasing-map-panel{min-width:300px}
.unit-card__empty{line-height:1.55}
.floor-panel-grid .eyebrow{color:#ff744a}
.mobile-sticky-cta{padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:960px){
 .site-header__row{padding-left:20px;padding-right:20px}
 .logo{font-size:1rem}
 .burger{margin-right:-8px}
 .hero__meta-item span{font-size:10px}
 .hero__meta-item b{line-height:1.35}
 .mmap__zoom{bottom:14px;left:14px}
 .bottom-sheet{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
 .mobile-sticky-cta{bottom:max(10px,env(safe-area-inset-bottom));left:10px;right:10px}
}
@media(max-width:420px){
 .hero__meta{grid-template-columns:1fr;gap:.8rem}
 .hero__meta-item{grid-template-columns:78px 1fr;align-items:baseline;gap:.5rem}
 .hero__meta-item span{text-transform:none;letter-spacing:0}
 .kpi-item{flex-basis:56%}
 .location-stats .stat-box{min-width:66%}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 [data-reveal]{opacity:1!important;transform:none!important}
}