:root{
  --lux-black:#10100f;
  --lux-ink:#1f1a16;
  --lux-cream:#fbf6ec;
  --lux-paper:rgba(255,255,255,.92);
  --lux-gold:#c6a15b;
  --lux-gold-dark:#8c6931;
  --lux-line:rgba(198,161,91,.28);
  --lux-shadow:0 30px 90px rgba(0,0,0,.24);
}

*{ box-sizing:border-box; }

.lux-siteplan-page{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:var(--lux-ink);
  background:
    linear-gradient(120deg, rgba(8,7,5,.82), rgba(8,7,5,.48) 42%, rgba(8,7,5,.75)),
    url('/site/LuxHome/home/docs/sedina/1/PXL_20250823_135906359.jpg') center/cover fixed no-repeat;
  padding:12px 18px 84px;
}

.lux-hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(198,161,91,.20), transparent 34%),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.52));
  pointer-events:none;
}

.lux-wrap{
  position:relative;
  z-index:1;
  width:min(1180px, 100%);
  margin:0 auto;
}

.lux-siteplan-header{
  max-width:820px;
  margin:0 auto 15px;
  text-align:center;
  color:#fff;
}

.lux-eyebrow,
.lux-card-kicker{
  display:block;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--lux-gold);
  font-weight:700;
}

.lux-siteplan-header h1{
  margin:10px 0 10px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size: clamp(23px, 3.5vw, 34px);
  line-height:.96;
  font-weight:600;
  letter-spacing:.02em;
  text-shadow:0 12px 35px rgba(0,0,0,.45);
}

.lux-siteplan-header p{
  margin:0 auto;
  max-width:660px;
  font-size:clamp(15px, 2vw, 18px);
  color:rgba(255,255,255,.82);
  line-height:1.65;
}

.lux-shell{
  display:grid;
  grid-template-columns:minmax(280px, 360px) minmax(0, 1fr);
  gap:22px;
  align-items:stretch;
}

.lux-summary-card,
.lux-map-card{
  border:1px solid var(--lux-line);
  background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(251,246,236,.90));
  box-shadow:var(--lux-shadow);
  backdrop-filter:blur(10px);
}

.lux-summary-card{
  border-radius:28px;
  padding:30px;
}

.lux-summary-card h2{
  margin:10px 0 12px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:32px;
  line-height:1.05;
  color:var(--lux-ink);
}

.lux-summary-card p{
  margin:0;
  color:rgba(31,26,22,.72);
  line-height:1.7;
}

.lux-legend{
  display:grid;
  grid-template-columns:1fr;
  gap:11px;
  margin:28px 0;
  padding:22px 0;
  border-top:1px solid rgba(140,105,49,.18);
  border-bottom:1px solid rgba(140,105,49,.18);
}

.lux-legend span{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  color:rgba(31,26,22,.82);
}

.legend-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 0 0 4px rgba(198,161,91,.12);
}
.legend-dot.available{ background:#2f8f6b; }
.legend-dot.model{ background:#4f4a7f; }
.legend-dot.reserved{ background:#8e8f90; }
.legend-dot.comingsoon{ background:#c6922d; }
.legend-dot.sold{ background:#a64d33; }

.lux-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.lux-btn{
  min-height:44px;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.lux-btn:hover{ transform:translateY(-1px); }
.lux-btn-primary{
  border:1px solid var(--lux-gold-dark);
  color:#fff;
  background:linear-gradient(135deg, #d2b06a, #8c6931);
  box-shadow:0 12px 24px rgba(140,105,49,.22);
}
.lux-btn-secondary{
  border:1px solid rgba(31,26,22,.14);
  color:var(--lux-ink);
  background:#fff;
}

.lux-map-card{
  border-radius:32px;
  overflow:hidden;
}

.lux-map-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid rgba(140,105,49,.16);
  background:rgba(255,255,255,.78);
}

.lux-map-topbar strong{
  display:block;
  margin-top:4px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:22px;
}

.lux-map-hint{
  color:rgba(31,26,22,.58);
  font-size:13px;
  font-weight:700;
}

.mapWrap{
  position:relative;
  width:100%;
  min-height:560px;
  padding:24px;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(251,246,236,.95), rgba(255,255,255,.85)),
    radial-gradient(circle at center, rgba(198,161,91,.12), transparent 56%);
}

#planSvg{
  width:100%;
  height:min(72vh, 720px);
  min-height:520px;
  display:block;
  margin:0 auto;
  border-radius:24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,236,216,.80));
  border:1px solid rgba(198,161,91,.25);
  touch-action:none;
}

.plot{
  cursor:pointer;
  stroke-width:2;
  transition:opacity .18s ease, stroke-width .18s ease, filter .18s ease, transform .18s ease;
  transform-box:fill-box;
  transform-origin:center;
}

.plot:hover{
  opacity:.82!important;
  stroke-width:3!important;
  filter:drop-shadow(0 0 10px rgba(198,161,91,.65));
}

.plot.active{
  opacity:.90!important;
  stroke-width:4!important;
  filter:drop-shadow(0 0 14px rgba(198,161,91,.90));
}

.plot-label,
.plot-status{ pointer-events:none; }

.plotTip{
  position:absolute;
  z-index:5;
  padding:10px 12px;
  font-size:12px;
  border-radius:14px;
  background:rgba(16,16,15,.94);
  color:#fff;
  pointer-events:none;
  max-width:240px;
  box-shadow:0 18px 45px rgba(0,0,0,.30);
}

.plot-modal-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.68);
  padding:24px;
  backdrop-filter:blur(6px);
}
.plot-modal-overlay.show{ display:flex; }

.plot-modal{
  width:min(560px, calc(100% - 30px));
  max-height:calc(100vh - 52px);
  overflow:auto;
  position:relative;
  border-radius:28px;
  padding:30px;
  color:#fff;
  background:
    linear-gradient(145deg, rgba(23,20,17,.98), rgba(42,35,27,.96));
  border:1px solid rgba(198,161,91,.36);
  box-shadow:0 36px 100px rgba(0,0,0,.60);
}

.plot-modal::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  background:radial-gradient(circle at 20% 0%, rgba(198,161,91,.22), transparent 38%);
}

.modal-body{ position:relative; z-index:1; }
.plot-modal-close{
  position:absolute;
  right:16px;
  top:16px;
  z-index:2;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.plot-modal-close:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); }

.info-title{
  margin:10px 44px 4px 0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:34px;
  line-height:1.05;
}
.muted{ color:rgba(255,255,255,.68); line-height:1.5; }

.kv{
  display:grid;
  gap:10px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(198,161,91,.25);
}
.kv div{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:12px;
  align-items:start;
  color:rgba(255,255,255,.90);
}
.kv b{ color:var(--lux-gold); }

.plot-image-wrap{
  margin-top:18px;
  width:100%;
}
.plot-image-wrap img{
  width:100%;
  height:auto;
  max-height:280px;
  object-fit:cover;
  border-radius:18px;
  display:block;
  box-shadow:0 18px 45px rgba(0,0,0,.48);
  border:1px solid rgba(198,161,91,.25);
}

@media(max-width:900px){
  .lux-siteplan-page{ padding:42px 14px 56px; background-attachment:scroll; }
  .lux-shell{ grid-template-columns:1fr; }
  .lux-summary-card{ order:2; }
  .lux-map-card{ order:1; }
  .mapWrap{ min-height:auto; padding:14px; }
  #planSvg{ height:70vh; min-height:460px; }
}

@media(max-width:560px){
  .lux-siteplan-header{ text-align:left; }
  .lux-map-topbar{ align-items:flex-start; flex-direction:column; }
  .lux-actions{ grid-template-columns:1fr; }
  .lux-summary-card{ padding:22px; border-radius:22px; }
  .lux-map-card{ border-radius:22px; }
  .plot-modal{ padding:24px 18px; border-radius:22px; }
  .kv div{ grid-template-columns:82px 1fr; }
}


/* =========================================================
   Premium v2 refinements
   - Transparent white title
   - Cormorant Garamond luxury type
   - Large right-side modal image
========================================================= */
.lux-siteplan-header{
  padding:0 0 12px;
  margin:0 auto 12px;
  background:transparent;
  color:#fff;
}

.lux-eyebrow{
  color:rgba(216,179,106,.96);
  text-shadow:0 6px 22px rgba(0,0,0,.55);
}

.lux-siteplan-header h1{
  margin:12px 0 12px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight:600;
  line-height:.88;
  letter-spacing:.065em;
  color:#fff;
  text-transform:uppercase;
  text-shadow:
    0 2px 10px rgba(0,0,0,.45),
    0 12px 34px rgba(0,0,0,.45),
    0 0 42px rgba(198,161,91,.20);
}

.lux-siteplan-header h1::after{
  content:"";
  display:block;
  width:132px;
  height:1px;
  margin:22px auto 0;
  background:linear-gradient(90deg, transparent, rgba(216,179,106,.98), transparent);
  box-shadow:0 0 18px rgba(216,179,106,.35);
}

.lux-siteplan-header p{
  color:rgba(255,255,255,.92);
  text-shadow:0 4px 18px rgba(0,0,0,.52);
  font-family:Inter, Arial, sans-serif;
  letter-spacing:.02em;
}

.plot-modal{
  width:min(1080px, 96vw);
  max-height:calc(100vh - 44px);
  padding:0;
  overflow:hidden;
  border-radius:26px;
  background:linear-gradient(145deg, rgba(18,16,14,.98), rgba(42,35,27,.97));
  border:1px solid rgba(216,179,106,.35);
  box-shadow:0 46px 120px rgba(0,0,0,.70);
}

.plot-modal::before{
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(216,179,106,.18), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 45%);
}

.modal-content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(300px, .82fr) minmax(420px, 1.18fr);
  min-height:560px;
}

.modal-info-panel{
  padding:42px 36px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.modal-image-panel{
  position:relative;
  min-height:560px;
  background:#090806;
  overflow:hidden;
  border-left:1px solid rgba(216,179,106,.22);
}

.modal-image-panel img{
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
}

.modal-image-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(18,16,14,.35), transparent 32%),
    linear-gradient(to top, rgba(0,0,0,.48), transparent 48%);
  pointer-events:none;
}

.modal-image-caption{
  position:absolute;
  left:24px;
  right:24px;
  bottom:22px;
  z-index:1;
  color:#fff;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:.035em;
  text-shadow:0 8px 28px rgba(0,0,0,.70);
}

.plot-modal-close{
  right:18px;
  top:18px;
  width:44px;
  height:44px;
  z-index:5;
  border:1px solid rgba(216,179,106,.38);
  background:rgba(0,0,0,.32);
  color:#fff;
  backdrop-filter:blur(8px);
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.plot-modal-close:hover{
  background:rgba(216,179,106,.96);
  border-color:rgba(216,179,106,1);
  color:#111;
  transform:rotate(90deg);
}

.info-title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(40px, 5vw, 58px);
  font-weight:600;
  letter-spacing:.03em;
  margin:12px 48px 8px 0;
  color:#fff;
}

.kv{
  margin-top:26px;
  padding-top:22px;
}
.kv div{
  grid-template-columns:88px 1fr;
  gap:16px;
  font-size:15px;
}
.kv b{
  color:rgba(216,179,106,.98);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

.modal-cta-row{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:30px;
}
.modal-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Hide old inline image block if a previous template still outputs it */
.plot-image-wrap{ display:none; }

@media(max-width:940px){
  .plot-modal{ overflow:auto; }
  .modal-content{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .modal-info-panel{
    order:2;
    padding:30px 24px 26px;
  }
  .modal-image-panel{
    order:1;
    min-height:330px;
    border-left:none;
    border-bottom:1px solid rgba(216,179,106,.22);
  }
  .modal-image-panel img{
    min-height:330px;
    height:330px;
  }
  .modal-image-caption{ font-size:24px; }
}

@media(max-width:560px){
  .lux-siteplan-header{
    text-align:center;
    padding-top:24px;
  }
  .lux-siteplan-header h1{
    font-size:clamp(38px, 12vw, 56px);
    letter-spacing:.045em;
  }
  .plot-modal{
    width:calc(100% - 20px);
    border-radius:20px;
  }
  .modal-info-panel{ padding:26px 18px 22px; }
  .modal-image-panel,
  .modal-image-panel img{ min-height:270px; height:270px; }
  .plot-modal-close{ right:12px; top:12px; }
}