/* ============================================================
   MAIN STREET COURT — Delaware Avenue apartment selection
   Extends the approved sitewide style.css tokens.
   ============================================================ */

/* ---------- reveal primitives ---------- */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}
@media (max-width:860px){section[id]{scroll-margin-top:74px}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

section{position:relative}
.sec{padding:clamp(62px,7.4vw,116px) 0}
.sec.cream{background:var(--cream)}
.sec.white{background:var(--white)}
.sec.navy{background:var(--navy)}

/* ============================================================
   HERO / PAGE OPENING
   ============================================================ */
.phero{
  background:var(--cream);
  padding:clamp(46px,6vw,86px) 0 clamp(38px,4.6vw,60px);
  overflow:hidden;
}
.phero .grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,3.4vw,50px);align-items:center}
.phero h1{
  font-size:clamp(2.55rem,6.4vw,5.1rem);line-height:.92;letter-spacing:-.032em;
  margin:16px 0 20px;
}
.phero h1 em{font-style:normal;position:relative;white-space:nowrap}
.phero h1 em::after{
  content:"";position:absolute;left:-.02em;right:-.02em;bottom:.07em;height:.26em;
  background:var(--yellow);border-radius:4px;z-index:-1;
  transform:scaleX(0);transform-origin:left;transition:transform .8s .35s var(--ease);
}
.phero.in h1 em::after{transform:scaleX(1)}
.phero .lede{max-width:44ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.79rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-txt);
}
.eyebrow i{width:30px;height:3px;border-radius:2px;background:var(--teal);display:block}

/* jump nav */
.jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3vw,38px)}
.jump a{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:.9rem;color:var(--navy);
  padding:11px 16px;white-space:nowrap;border-radius:999px;background:var(--white);
  border:1.5px solid rgba(11,17,76,.14);
  transition:transform .28s var(--ease),border-color .25s,box-shadow .28s var(--ease),background .25s;
}
.jump a i{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;transition:transform .25s var(--ease)}
.jump a:nth-child(2) i{background:var(--gold)}
.jump a:nth-child(3) i{background:var(--navy)}
.jump a:nth-child(4) i{background:rgba(11,17,76,.3)}
.jump a:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:var(--sh-2);background:var(--white)}
.jump a:hover i{transform:scale(1.55)}

/* ---------- hero: two-image editorial composition ---------- */
.hstack{position:relative;padding-bottom:clamp(40px,4.4vw,66px)}
.hstack.solo{padding-bottom:0}
.hstack figure{margin:0}
.hstack img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}

.hmain{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.hmain::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px rgba(11,17,76,.07);
}
.hmain img{aspect-ratio:16/10.4;object-fit:cover;border-radius:var(--r-lg)}
.hmain figcaption{
  position:absolute;left:18px;bottom:18px;z-index:2;
  background:rgba(251,247,239,.93);backdrop-filter:blur(6px);
  color:var(--navy);font-size:.73rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;
  box-shadow:0 3px 14px rgba(11,17,76,.14);
}

/* secondary rendering, ~32% — straight, overlapping, never rotated */
.hsub{
  position:absolute;right:-8%;bottom:0;width:46%;z-index:3;
  background:var(--white);padding:9px;border-radius:calc(var(--r-lg) + 4px);
  box-shadow:0 18px 44px -14px rgba(11,17,76,.34);
  border:1.5px solid rgba(0,181,192,.42);
}
.hsub img{aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.hbadge{
  position:absolute;top:-19px;right:-10px;z-index:4;max-width:176px;text-align:right;
  background:var(--teal);color:var(--navy);
  font-size:.63rem;font-weight:800;line-height:1.45;
  letter-spacing:.11em;text-transform:uppercase;
  padding:9px 14px;border-radius:14px;
  box-shadow:0 8px 20px -6px rgba(0,181,192,.65);
}
.hmain,.hsub{transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.hstack:hover .hsub{transform:translateY(-5px)}
.anchor-alias{display:block;height:0}

/* ============================================================
   VALUE BAR — near the top, deliberately restrained
   ============================================================ */
.valbar{background:var(--white);border-top:1px solid rgba(11,17,76,.08);border-bottom:1px solid rgba(11,17,76,.08)}
.valbar .in-wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(24px,3vw,38px) 0}
.valbar .tag{
  font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-txt);
  background:rgba(255,201,60,.2);border-radius:999px;padding:9px 16px;white-space:nowrap;
}
.valbar p{font-size:clamp(1rem,1.2vw,1.14rem);color:#4A5568;max-width:88ch}
.valbar .valline{
  font-family:inherit;font-size:clamp(1.18rem,1.85vw,1.6rem);font-weight:700;
  line-height:1.28;letter-spacing:-.015em;color:var(--navy);max-width:34ch;
}
.valbar b{color:var(--navy);font-weight:700}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.shead{max-width:78ch}
.shead h2{margin:16px 0 18px}
.shead .lede{max-width:62ch}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--navy);
  font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border-radius:999px;box-shadow:var(--sh-1);
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--navy);flex:none;
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.badge i{animation:none}}

.hilite{
  display:inline-block;margin-top:clamp(22px,2.6vw,32px);
  font-size:clamp(1.12rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-.02em;
  color:var(--navy);line-height:1.2;
  border-left:4px solid var(--teal);padding:4px 0 4px 18px;
}
.sec.navy .hilite{color:var(--cream);border-color:var(--teal-lt)}

.leadnote{
  margin-top:clamp(22px,2.6vw,30px);max-width:74ch;
  font-size:1.03rem;line-height:1.65;color:#4A5568;
}
.sec.navy .leadnote{color:rgba(251,247,239,.76)}
.sec.navy .lede{color:rgba(251,247,239,.78)}

/* ============================================================
   APARTMENT CARDS
   ============================================================ */
.cards{display:grid;gap:clamp(20px,2.4vw,30px);margin-top:clamp(34px,4.4vw,58px)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;
  border:1px solid rgba(11,17,76,.07);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.sec.navy .card{border-color:rgba(251,247,239,.1)}
/* cards stay light even inside a dark section */
.sec.navy .card h3,.sec.navy .card h4{color:var(--navy)}
.sec.navy .card .sub{color:#54607A}
.sec.navy .card .feats li{color:#4A5568}
.sec.navy .card .pfoot{color:#6B7690}
.sec.navy .card .prow span{color:#54607A}
.sec.navy .card .prow b{color:var(--navy)}
.sec.navy .card .unum{color:var(--teal-txt)}

/* tour thumbnail */
.thumb{position:relative;display:block;overflow:hidden;background:var(--slot)}
.thumb img{width:100%;aspect-ratio:16/10.6;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .thumb img{transform:scale(1.055)}
.thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,17,76,.05) 0%,rgba(11,17,76,0) 42%,rgba(11,17,76,.55) 100%);
}
.play{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:11px;
  background:rgba(251,247,239,.95);color:var(--navy);
  border:0;cursor:pointer;font-family:var(--font);
  font-weight:800;font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px 11px 13px;border-radius:999px;box-shadow:var(--sh-2);
  transition:transform .3s var(--ease),background .25s;
}
.play svg{width:22px;height:22px;flex:none;color:var(--teal-txt)}
.play:hover{transform:translateY(-2px) scale(1.03);background:var(--white)}
.chip{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--navy);color:var(--cream);
  font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
}
.chip.gold{background:var(--gold);color:var(--navy)}
.chip.teal{background:var(--teal);color:var(--navy)}

/* rendering thumbnails: show the full room, never crop it */
.thumb.contain{background:var(--cream)}
.thumb.contain img{object-fit:contain;background:var(--cream)}
.thumb.contain::after{background:linear-gradient(180deg,rgba(11,17,76,0) 60%,rgba(11,17,76,.14) 100%)}
.card:hover .thumb.contain img{transform:none}

/* tour-pending state */
.soon{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(11,17,76,.9);color:var(--cream);
  font-weight:800;font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;
  padding:11px 17px;border-radius:999px;box-shadow:var(--sh-2);
}
.soon svg{width:17px;height:17px;flex:none;color:var(--gold)}
.btn-disabled{
  background:rgba(11,17,76,.07);color:rgba(11,17,76,.45);
  border:1.5px dashed rgba(11,17,76,.28);cursor:not-allowed;box-shadow:none;
}
.btn-disabled:hover{transform:none}
.pend{
  font-size:.78rem !important;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-txt) !important;background:rgba(255,201,60,.24);
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}

/* card body */
.cbody{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;flex:1}
.unum{
  font-size:.75rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal-txt);margin-bottom:9px;
}
.card h3{font-size:clamp(1.22rem,1.5vw,1.5rem);letter-spacing:-.02em}
.card .sub{margin-top:8px;font-size:.99rem}
.feats{margin:16px 0 0;display:grid;gap:8px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;color:#4A5568;line-height:1.45}
.feats li::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);margin-top:.5em;
}
.feats li:nth-child(2)::before{background:var(--gold)}
.feats li:nth-child(3)::before{background:var(--navy);opacity:.32}

.cbtns{display:flex;gap:10px;margin-top:auto;padding-top:clamp(18px,2vw,24px);flex-wrap:wrap}
.cbtns .btn{font-size:.94rem;padding:14px 22px;flex:1 1 auto;justify-content:center}

/* expandable layout detail */
.det{overflow:hidden;max-height:0;transition:max-height .55s var(--ease)}
.det-in{
  border-top:1px dashed rgba(11,17,76,.16);margin-top:20px;padding-top:20px;
}
.det h4{font-size:.76rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--navy);margin:0 0 12px}
.ptable{display:grid;gap:8px;margin-bottom:8px}
.prow{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--cream);border-radius:12px;padding:12px 16px;font-size:.95rem;
}
.prow span{color:#54607A}
.prow b{color:var(--navy);font-size:1.02rem;letter-spacing:-.01em}
.pfoot{font-size:.83rem;color:#6B7690;line-height:1.5;margin-top:10px}
.slinks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.slinks a{
  font-weight:700;font-size:.93rem;color:var(--teal-txt);
  border-bottom:2px solid rgba(0,181,192,.3);padding-bottom:2px;transition:border-color .2s,color .2s;
}
.slinks a:hover{color:var(--navy);border-color:var(--navy)}

/* ---------- flagship card (Unit 305) ---------- */
.flag{
  display:grid;grid-template-columns:1.08fr .92fr;
  background:var(--white);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid rgba(11,17,76,.07);
  margin-top:clamp(34px,4.4vw,58px);
}
.flag .thumb img{aspect-ratio:auto;height:100%;min-height:420px}
.flag .cbody{padding:clamp(28px,3.2vw,48px)}
.flag h3{font-size:clamp(1.7rem,2.7vw,2.5rem);line-height:1.02}
.flag .feats li{font-size:1.03rem}
.flag .cbtns .btn{flex:0 1 auto}
.flagtag{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:var(--yellow);border-radius:999px;padding:8px 15px;
}

/* ============================================================
   SIGNATURE PRIVACY SECTION
   ============================================================ */
.sp-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,4vw,64px);align-items:center;margin-top:clamp(30px,3.6vw,48px)}
.sp-explain{
  background:rgba(0,181,192,.09);border-left:4px solid var(--teal);
  border-radius:0 16px 16px 0;padding:20px 24px;font-size:1.03rem;line-height:1.6;color:var(--ink);
  max-width:66ch;
}
.sec.navy .sp-explain{background:rgba(91,231,255,.1);border-color:var(--teal-lt);color:rgba(251,247,239,.86)}
.sp-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.sp-list li{
  display:flex;gap:11px;align-items:flex-start;font-size:.99rem;font-weight:600;
  color:var(--cream);background:rgba(251,247,239,.07);border-radius:14px;padding:14px 16px;line-height:1.35;
}
.sp-list li svg{width:18px;height:18px;flex:none;color:var(--teal-lt);margin-top:1px}
.sp-avail{
  display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  font-size:.9rem;font-weight:700;color:var(--cream);
  background:rgba(251,247,239,.1);border:1px solid rgba(251,247,239,.22);
  border-radius:999px;padding:10px 18px;
}
.sp-avail i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* ============================================================
   ADDITIONAL / LOWER SECTION
   ============================================================ */
.sec.lower h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.sec.lower .card{box-shadow:none;background:var(--white)}
.sec.lower .card:hover{box-shadow:var(--sh-2)}

/* ---------- disclaimer ---------- */
.disc{
  display:flex;gap:12px;align-items:flex-start;max-width:82ch;
  margin:clamp(34px,4vw,52px) auto 0;
  font-size:.86rem;line-height:1.55;color:#6B7690;
}
.disc svg{width:17px;height:17px;flex:none;color:var(--teal-txt);margin-top:2px}

/* ---------- final CTA ---------- */
.fcta{background:var(--yellow);padding:clamp(56px,6.4vw,92px) 0;text-align:center}
.fcta h2{font-size:clamp(2.1rem,4.6vw,3.5rem);max-width:20ch;margin:0 auto 16px}
.fcta .sub{max-width:52ch;margin:0 auto;color:#4A4327}
.fcta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ============================================================
   TOUR MODAL
   ============================================================ */
.tmodal{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(11,17,76,.82);backdrop-filter:blur(6px);
  padding:clamp(14px,3vw,44px);
}
.tmodal.on{display:flex;align-items:center;justify-content:center;animation:fadein .3s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.tbox{
  width:100%;max-width:1180px;background:var(--navy);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3);display:flex;flex-direction:column;max-height:100%;
}
.tbar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid rgba(251,247,239,.14)}
.tbar strong{color:var(--cream);font-size:1rem;letter-spacing:-.01em}
.tbar em{font-style:normal;color:var(--teal-lt);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tclose{
  margin-left:auto;background:rgba(251,247,239,.12);border:0;color:var(--cream);cursor:pointer;
  width:38px;height:38px;border-radius:50%;font-size:1.2rem;line-height:1;transition:background .2s;
}
.tclose:hover{background:rgba(251,247,239,.26)}
.tframe{aspect-ratio:16/9;width:100%;background:#0B114C}
.tframe iframe{width:100%;height:100%;border:0;display:block}
.tpend{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  height:100%;color:rgba(251,247,239,.8);text-align:center;padding:30px;
}
.tpend b{color:var(--yellow);font-size:1.1rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .cards.c3{grid-template-columns:1fr 1fr}
  .flag{grid-template-columns:1fr}
  .flag .thumb img{min-height:300px;aspect-ratio:16/9}
}
@media (max-width:860px){
  .phero .grid{grid-template-columns:1fr}
  .hstack{order:-1;padding-bottom:0;display:flex;flex-direction:column;gap:14px}
  .hsub{position:static;width:100%;right:auto;bottom:auto;padding:8px}
  .hsub img{aspect-ratio:16/11}
  .hbadge{position:static;display:inline-block;margin:2px 0 10px 4px;text-align:left}
  .hstack:hover .hsub{transform:none}
  /* Mobile: restore horizontal gutter so .valline isn't flush against the section edge */
  .valbar .in-wrap{grid-template-columns:1fr;gap:14px;padding-left:var(--gut);padding-right:var(--gut)}
  .valbar .tag{justify-self:start}
  .valbar .valline{max-width:none}
  .sp-grid{grid-template-columns:1fr}
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .sp-list{grid-template-columns:1fr}
  .cbtns .btn{flex:1 1 100%;padding:16px 22px;font-size:1rem}
  .card{border-radius:var(--r)}
  .thumb img{aspect-ratio:16/11}
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mnav{display:none}
@media (max-width:860px){
  .mnav[hidden]{display:none}
  .mnav{
    display:block;position:sticky;top:62px;z-index:88;
    background:var(--cream);border-bottom:1px solid rgba(11,17,76,.1);
    padding:10px var(--gut) 20px;box-shadow:var(--sh-2);
    animation:mnavin .28s var(--ease);
  }
  @keyframes mnavin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .mnav a{
    display:block;padding:14px 2px;font-weight:700;font-size:1.06rem;color:var(--navy);
    border-bottom:1px solid rgba(11,17,76,.08);
  }
  .mnav a.btn{border:0;margin-top:14px;text-align:center;color:var(--cream)}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .burger span{transition:transform .3s var(--ease),opacity .2s}
}

/* ============================================================
   TYPE-FIRST APARTMENT BLOCKS  (Premier XL / Signature Privacy / Flats)
   ============================================================ */
.kick{
  margin-top:-4px;font-size:clamp(1.02rem,1.35vw,1.2rem);font-weight:700;
  color:var(--teal-txt);letter-spacing:-.01em;
}
.sec.navy .kick{color:var(--teal-lt)}

.tblock{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(24px,3.4vw,58px);align-items:center;
  margin-top:clamp(30px,3.4vw,46px);
}
.tblock.flip{margin-top:clamp(44px,4.6vw,72px)}
.tblock.flip .aphoto{order:2}
.aphoto{
  margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  background:var(--white);
}
.aphoto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.aphoto.pano img{width:100%;height:auto;aspect-ratio:2.2/1}
.aphoto.pano{align-self:center}
@media (min-width:901px){#premier .tblock{grid-template-columns:1.52fr .82fr}}
.aphoto.contain{background:var(--navy)}
.aphoto.contain img{object-fit:contain;aspect-ratio:16/10;height:auto}

.tside{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.tname{
  font-size:clamp(1.5rem,2.3vw,2rem);font-weight:800;letter-spacing:-.025em;
  color:var(--navy);line-height:1.1;
}
.tname em{
  font-style:normal;font-size:.5em;font-weight:800;letter-spacing:.1em;
  vertical-align:.5em;margin-left:10px;color:var(--gold-txt);
  background:rgba(255,201,60,.22);border-radius:999px;padding:5px 10px;
}
.tdesc{margin:-6px 0 0;font-size:1.04rem;color:#4A5568}
.sec.navy .tdesc{color:rgba(251,247,239,.78)}

.tlist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tlist li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:1.04rem;font-weight:600;color:var(--ink);line-height:1.4;
}
.sec.navy .tlist li{color:var(--cream)}
.tlist svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--teal)}
.sec.navy .tlist svg{color:var(--teal-lt)}
.tbtns{display:flex;flex-wrap:wrap;gap:12px}
.btn-ghost{
  background:transparent;color:var(--cream);
  border:1.5px solid rgba(251,247,239,.42);
}
.btn-ghost:hover{border-color:var(--teal-lt);color:var(--teal-lt)}

/* ---------- floor-plan drawer ---------- */
.plans{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.plans-in{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:clamp(16px,1.8vw,24px);padding-top:clamp(24px,2.6vw,34px);
}
/* a collection holding a single layout shouldn't leave a lone narrow card in a wide field */
@media (min-width:721px){
  .plans-in:has(> .plan:only-child:not(.pslot)){grid-template-columns:minmax(0,505px);justify-content:start}
  .plans-in:has(> .plan:only-child:not(.pslot)) .plan{flex-direction:row;align-items:stretch}
  .plans-in:has(> .plan:only-child:not(.pslot)) .pthumb{flex:0 0 46%;aspect-ratio:auto}
  .plans-in:has(> .plan:only-child:not(.pslot)) .pthumb img{height:100%;object-fit:cover}
  .plans-in:has(> .plan:only-child:not(.pslot)) .pbody{flex:1 1 auto;justify-content:center}
}
.plan{
  background:var(--white);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;
  border:1px solid rgba(11,17,76,.07);
}
.sec.navy .plan{background:rgba(251,247,239,.06);border-color:rgba(251,247,239,.16)}
.pthumb{position:relative;background:#EEE9E0}
.sec.navy .pthumb{background:rgba(11,17,76,.55)}
.pthumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sec.navy .pthumb img{object-fit:contain}
.pbody{padding:16px 17px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pbody h4{
  margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.015em;
  color:var(--navy);line-height:1.25;
}
.sec.navy .pbody h4{color:var(--cream)}
.uref{
  align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);background:rgba(11,17,76,.10);
  border-radius:999px;padding:5px 10px;
}
.sec.navy .uref{color:var(--cream);background:rgba(251,247,239,.16)}
.pnote{margin:0;font-size:.92rem;line-height:1.5;color:#4A5568}
.sec.navy .pnote{color:rgba(251,247,239,.72)}
.pfine{display:block;margin-top:5px;font-size:.83rem;line-height:1.45;color:#5D6B7A}
.sec.navy .pfine{color:rgba(251,247,239,.66)}
/* Premier XL cards: darker card text for legibility + always-open drawer */
.plans{max-height:none;overflow:visible}
#premier .pnote{color:#2F3B4A}
#premier .pfine{color:#455163}
#premier .prate{color:#5F6E7F}
.prate{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  margin-top:auto;padding-top:12px;border-top:1px solid rgba(11,17,76,.09);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8391A2;
}
.sec.navy .prate{border-color:rgba(251,247,239,.16);color:rgba(251,247,239,.7)}
.tlink{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:none;border:0;cursor:pointer;padding:2px 0;
  font-family:inherit;font-size:.92rem;font-weight:800;color:var(--teal-txt);
  transition:color .2s var(--ease),gap .2s var(--ease);
}
.tlink svg{width:19px;height:19px;color:var(--teal)}
.tlink:hover{color:var(--navy);gap:11px}
.sec.navy .tlink{color:var(--teal-lt)}
.sec.navy .tlink:hover{color:var(--cream)}
.tlink.is-off{color:#98A2B0;cursor:not-allowed;font-weight:700}
.sec.navy .tlink.is-off{color:rgba(251,247,239,.5)}

@media (max-width:860px){
  .tblock{grid-template-columns:1fr;gap:18px}
  .tblock.flip .aphoto{order:0}
  .plans-in{grid-template-columns:1fr;gap:14px}
  .pthumb img{aspect-ratio:16/10}
  /* Mobile: let the panorama image use its native aspect ratio so it isn't top/bottom-cropped */
  .aphoto.pano img{aspect-ratio:auto}
}
.sec.navy .pend{color:var(--yellow);background:rgba(255,207,85,.18)}


/* ---------- floor-plan link on a plan card + lightbox ---------- */
.fplink{
  display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:var(--cream);
  border:0;border-radius:999px;padding:11px 18px;font-family:inherit;font-size:.92rem;font-weight:700;
  letter-spacing:-.01em;cursor:pointer;margin-bottom:9px;transition:transform .25s var(--ease),background .2s;
}
.fppair{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
.fppair .fplink{margin-bottom:0}
.fplink svg{width:17px;height:17px;flex:none;color:var(--teal-lt)}
.fplink:hover{transform:translateY(-2px);background:#151d63}
.sec.navy .fplink{background:var(--cream);color:var(--navy)}
.sec.navy .fplink svg{color:var(--teal-txt)}
.fpbox{background:var(--cream)}
.fpbox .tbar{background:var(--navy);border-bottom:0}
.fpstage{padding:clamp(12px,1.6vw,22px);overflow:auto;display:flex;align-items:center;justify-content:center}
.fpstage img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:10px}
.fpstage img.tall{width:auto;max-width:100%;max-height:82vh}
@media (max-width:640px){
  .fpmodal{padding:0}
  .fpbox{border-radius:0;max-height:100%}
  .fpbox .tbar{flex-wrap:wrap;gap:6px 12px;padding:13px 56px 13px 16px;position:relative}
  #fpTitle{flex:1 1 100%;font-size:1.02rem}
  #fpSub{flex:1 1 100%;font-size:.68rem}
  .fpbox .tclose{position:absolute;top:11px;right:12px;margin:0}
  .fpstage{padding:12px;display:block;-webkit-overflow-scrolling:touch}
  .fpstage img{width:210%;max-width:none;max-height:none}
  .fpstage img.tall{width:165%;max-width:none;max-height:none}
  .fphint{display:block}
}
.fphint{display:none;padding:0 16px 14px;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);opacity:.5}

/* ---------- placeholder card for a collection with no units assigned ---------- */
.plan.pslot{
  border:1.5px dashed rgba(11,17,76,.22);
  background:rgba(11,17,76,.025);
  box-shadow:none;
  display:flex;align-items:center;
  grid-column:span 2;
}
.plan.pslot:hover{box-shadow:none;transform:none}
.pslot-in{padding:26px 24px}
.pslot-tag{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-txt);background:rgba(255,201,60,.24);
  padding:5px 11px;border-radius:999px;margin-bottom:10px;
}
.pslot-in p{margin:0;color:var(--ink);opacity:.72;font-size:.94rem;line-height:1.55;max-width:52ch}
@media(max-width:700px){.plan.pslot{grid-column:span 1}}

/* ══════════════ APARTMENTS DROPDOWN (main nav) ══════════════ */
.ddwrap{position:relative;display:flex;align-items:center}
.ddtop{display:inline-flex;align-items:center;gap:5px}
.ddchev{width:15px;height:15px;transition:transform .3s var(--ease);margin-top:1px}
.ddwrap:hover .ddchev,.ddwrap:focus-within .ddchev,.ddwrap.open .ddchev{transform:rotate(180deg)}
.ddmenu{
  position:absolute;top:100%;left:-16px;margin-top:12px;min-width:288px;
  background:#fff;border:1px solid rgba(11,17,76,.09);border-radius:14px;padding:8px;
  box-shadow:0 22px 44px -18px rgba(11,17,76,.30);
  display:flex;flex-direction:column;gap:2px;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.ddwrap::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.ddwrap:hover .ddmenu,.ddwrap:focus-within .ddmenu,.ddwrap.open .ddmenu{opacity:1;visibility:visible;transform:translateY(0)}
nav.main .ddmenu a{
  display:block;padding:11px 13px;border-radius:9px;font-weight:700;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
nav.main .ddmenu a::after{display:none}
nav.main .ddmenu a:hover{background:var(--cream);transform:translateX(3px)}
.ddmenu a b{display:block;font-size:1rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.ddmenu a span{display:block;margin-top:2px;font-size:.79rem;font-weight:500;color:#6E7883;line-height:1.35}

/* mobile nav sub-items */
.mnav a.msub{padding-left:26px;font-size:.94rem;opacity:.82;position:relative}
.mnav a.msub::before{content:"";position:absolute;left:8px;top:50%;width:9px;height:2px;border-radius:1px;background:var(--teal);transform:translateY(-50%)}

/* ══════════════ TOWNHOME COLLECTION CHOOSER ══════════════ */
.thcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:34px}
.thcard{
  position:relative;display:flex;flex-direction:column;gap:9px;
  background:#fff;border:1px solid rgba(11,17,76,.09);border-radius:17px;
  padding:26px 24px 22px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.thcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.thcard:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 20px 40px -20px rgba(11,17,76,.30)}
.thcard:hover::before{transform:scaleX(1)}
.thcard.feat::before{background:var(--gold)}
.thnum{
  font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--teal);
  font-variant-numeric:tabular-nums;
}
.thcard.feat .thnum{color:#8A6A00}
.thcard h3{margin:0;font-size:clamp(1.06rem,1.25vw,1.2rem);font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.16}
.thcard p{margin:0;font-size:.9rem;line-height:1.55;color:#5A6570;flex:1 1 auto}
.thgo{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-size:.84rem;font-weight:800;color:var(--navy);
}
.thgo svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.thcard:hover .thgo svg{transform:translateX(5px)}
@media(max-width:1240px){.thcards{gap:14px}.thcard{padding:24px 20px 20px}}
@media(max-width:1040px){.thcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
/* exactly three cards: stay 3-across longer, then go straight to one per row -
   a 2-column grid would leave the third card orphaned on its own row */
@media(max-width:1040px){
  .thcards:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  .thcards:has(> :nth-child(3):last-child) .thcard{padding:22px 17px 18px}
}
@media(max-width:860px){
  .thcards:has(> :nth-child(3):last-child){grid-template-columns:1fr;gap:14px}
  .thcards:has(> :nth-child(3):last-child) .thcard{padding:22px 20px 19px}
}
@media(max-width:620px){.thcards{grid-template-columns:1fr;gap:14px}.thcard{padding:22px 20px 19px}}

/* ── Signature Privacy™ model-layout card: show the full frame ──
   The single-card row layout stretches the photo into a tall portrait
   slot and cover-crops the sides off, cutting the end of the privacy
   wall, the rug and the open floor. Restore the photo's own 4:3 frame
   so the whole room is visible. No zoom change. */
@media (min-width:901px){
  #privacy .plans-in:has(> .plan:only-child) .plan{align-items:center}
  #privacy .plans-in:has(> .plan:only-child) .pthumb{
    flex:0 0 57%;aspect-ratio:4/3;align-self:center;background:transparent;
  }
  #privacy .plans-in:has(> .plan:only-child) .pthumb img{
    width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%;
  }
}

/* ── Premier XL pricing: per-person primary, group total secondary ──
   Uses the existing card type scale and brand tokens. No layout change:
   this replaces the "Pricing pending" pill inside the existing .prate block. */
.pprice{
  display:flex;align-items:baseline;gap:8px;line-height:1;
  font-size:1.34rem;font-weight:800;letter-spacing:-.02em;
  text-transform:none;color:var(--navy);
}
.pprice i{
  font-style:normal;font-size:.79rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#5F6E7F;
}
.ptot{font-size:.78rem;font-weight:700;letter-spacing:.03em;line-height:1.55;text-transform:uppercase;color:#5F6E7F}
.sec.navy .pprice{color:var(--cream)}
.sec.navy .pprice i,.sec.navy .ptot{color:rgba(251,247,239,.72)}

/* ── Premier XL cards: pricing block sits directly under the description ──
   Previously .prate used margin-top:auto, which pinned the divider to the
   bottom of the tallest card in the row and opened a large blank gap on the
   shorter cards. Each Premier XL card now sizes to its own content and the
   divider follows the description with normal compact spacing. Wording,
   photos, pricing, buttons and all type/colour styling are unchanged. */
#premier .prate{margin-top:0;padding-top:12px;gap:6px}
/* "Especially spacious bedrooms" wraps to two lines while the other three
   titles fit on one. Reserving two lines for every Premier XL title keeps the
   divider, pricing and buttons on the same baseline across all four cards.
   Type size, weight and colour are unchanged. */
#premier .pbody h4{min-height:2.5em}


/* ══════════════ CLASSIC TOWNHOMES ══════════════
   Compact card: the divider and the rate block sit directly under the heading,
   with no descriptive filler creating dead space (matches the Premier XL fix). */
#select .prate{margin-top:0;padding-top:12px;padding-bottom:4px;gap:9px;color:#5F6E7F}
.prate.two{align-self:stretch}
.pline{display:flex;flex-direction:column;gap:3px}
.pline + .pline{padding-top:9px;border-top:1px solid rgba(11,17,76,.07)}
.sec.navy .pline + .pline{border-top-color:rgba(251,247,239,.14)}
#select .pthumb img{object-position:82% center}
@media(max-width:820px){#select .pthumb img{object-position:center}}

/* ─── Select Townhomes photo gallery ─── */
.sgal{overflow:hidden;outline:none}
.sgal-track{display:flex;transition:transform .52s cubic-bezier(.22,.9,.24,1);will-change:transform}
.sgal-track img{flex:0 0 100%;width:100%;display:block;aspect-ratio:4/3;object-fit:cover;object-position:82% center}
.sgal-track img:not(:first-child){object-position:center}
.sgal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:var(--navy);
  background:rgba(255,255,255,.88);box-shadow:0 2px 10px rgba(11,17,76,.16);
  opacity:0;transition:opacity .25s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.sgal-nav svg{width:18px;height:18px}
.sgal-nav.prev{left:10px}
.sgal-nav.next{right:10px}
.sgal:hover .sgal-nav,.sgal:focus-within .sgal-nav{opacity:1}
.sgal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.sgal-dots{position:absolute;left:0;right:0;bottom:11px;z-index:3;display:flex;justify-content:center;gap:7px}
.sgal-dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(11,17,76,.28);
  transition:background .2s var(--ease),width .2s var(--ease)}
.sgal-dots button.on{background:#fff;width:18px;border-radius:99px}
@media(max-width:820px){.sgal-nav{opacity:1;width:34px;height:34px}}

/* ─── Select Townhomes specialty layouts ─── */
.spec-wrap{margin-top:34px}
.spec-hd{
  font-size:.8rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#8391A2;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.spec-hd::after{content:"";flex:1;height:1px;background:rgba(11,17,76,.1)}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
.spec{
  background:var(--cream);border:1px solid rgba(11,17,76,.07);border-radius:var(--r);
  padding:18px 20px 19px;display:flex;flex-direction:column;gap:7px}
.spec h4{font-size:1.06rem;font-weight:800;color:var(--navy);line-height:1.2;margin:0}
.spec-tag{font-size:.83rem;line-height:1.45;color:#5F6E7F;margin:0}
.spec .prate{margin-top:8px;padding-top:11px;gap:5px}
.spec-acts{display:flex;flex-direction:column;gap:7px;margin-top:9px}
@media(max-width:700px){.spec-grid{grid-template-columns:1fr}}

/* gallery inside the single wide Select card: fill the photo column */
@media(min-width:821px){
  #select .plans-in:has(> .plan:only-child:not(.pslot)){grid-template-columns:505px}
  #select .plans-in:has(> .plan:only-child:not(.pslot)) .plan{min-height:330px}
  #select .plans-in:has(> .plan:only-child:not(.pslot)) .sgal{flex:0 0 46%;min-width:0}
  #select .sgal-track{height:100%;width:100%}
  #select .sgal-track img{height:100%;aspect-ratio:auto;min-width:0}
  #select .sgal-nav{width:32px;height:32px}
  #select .sgal-nav svg{width:15px;height:15px}
  #select .sgal-nav.prev{left:7px}
  #select .sgal-nav.next{right:7px}
}
/* specialty cards: match Lisa's exact 5-line structure, no label clutter */
.spec .prate > span:first-child{display:none}
.spec .prate{margin-top:9px;padding-top:12px}
.spec .ptot{margin-top:1px}

/* ─── Select Townhome: photos lead the card, no crop (all photos are 3:2) ─── */
@media(min-width:900px){
  #select .plans-in:has(> .plan:only-child:not(.pslot)){grid-template-columns:min(940px,100%)}
  #select .plans-in:has(> .plan:only-child:not(.pslot)) .plan{min-height:0;align-items:stretch}
  #select .plans-in:has(> .plan:only-child:not(.pslot)) .sgal{
    flex:0 0 64%;min-width:0;aspect-ratio:3/2;align-self:stretch}
  #select .sgal-track img{height:100%;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
  #select .plans-in:has(> .plan:only-child:not(.pslot)) .pbody{padding:22px 24px 24px;justify-content:center}
  #select .sgal-nav{width:40px;height:40px}
  #select .sgal-nav svg{width:19px;height:19px}
  #select .sgal-nav.prev{left:12px}
  #select .sgal-nav.next{right:12px}
  #select .sgal-dots{bottom:13px}
}
/* below 900px the card stacks: full-width 3:2 photo above the pricing */
@media(max-width:899px){
  #select .sgal{aspect-ratio:3/2}
  #select .sgal-track img{aspect-ratio:3/2;object-fit:cover;object-position:center}
}

/* ─── "Only one left" availability badge (301 / 304) ─── */
.spec-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.spec-top h4{margin:0}
.sbadge{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  background:var(--teal);color:#062A2D;
  font-size:.66rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  line-height:1;padding:7px 11px 7px 9px;border-radius:999px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,181,192,.28);
}
.sbadge i{width:5px;height:5px;border-radius:50%;background:#062A2D;opacity:.72;flex:0 0 auto}
@media(max-width:420px){
  .spec-top{flex-wrap:wrap;gap:8px}
  .sbadge{font-size:.63rem;padding:6px 10px 6px 8px}
}

/* ── Main Street building flats (B units) ───────────────────────── */
#msflats .shead{max-width:70ch}
.bchip{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  background:var(--cream);border:1px solid rgba(11,17,76,.1);border-radius:999px;
  padding:7px 14px 7px 11px;font-size:.8rem;font-weight:700;color:var(--navy);letter-spacing:.01em;
}
.bchip svg{width:15px;height:15px;flex:none;color:var(--teal-txt)}
.bgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:30px}
.bflat{
  background:var(--cream);border:1px solid rgba(11,17,76,.09);border-radius:var(--r);
  padding:18px 18px 20px;display:flex;flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.bflat:hover{transform:translateY(-3px);box-shadow:var(--sh-1)}
.bflat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:26px}
.bflat h4{margin:0;font-size:1.28rem;font-weight:800;color:var(--navy);letter-spacing:-.015em;line-height:1.1}
.btag{
  background:#FBE3A6;color:var(--gold-txt);font-size:.6rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap;flex:none;
}
.bflat .prate{margin-top:16px;padding-top:13px;gap:5px}
@media (max-width:1120px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:430px){.bgrid{grid-template-columns:1fr}.bflat-top{min-height:0}}
#msflats .pprice{flex-direction:column;align-items:flex-start;gap:5px;font-size:1.5rem}
#msflats .pprice i{white-space:nowrap}
#msflats .bflat .prate{gap:6px}
.btag.furn{background:rgba(11,17,76,.07);color:var(--navy)}
.bnote{
  margin:11px 0 0;font-size:.78rem;line-height:1.5;color:#5F6E7F;font-weight:600;
  padding-left:10px;border-left:2px solid var(--gold);
}

/* ── Main Street building feature ───────────────────────────────── */
.msfeat{
  position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);background:var(--navy);isolation:isolate;
}
.msfeat img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.msfeat-in{padding:26px 24px 28px}
.msfeat-in .eyebrow{color:var(--teal-lt)}
.msfeat-in h2{
  margin:14px 0 0;color:var(--cream);letter-spacing:-.028em;line-height:1;
  font-size:clamp(2rem,5.4vw,3.9rem);font-weight:800;
}
.msfeat-in p{
  margin:14px 0 0;color:rgba(251,247,239,.9);font-size:clamp(.98rem,1.5vw,1.14rem);
  line-height:1.55;max-width:46ch;font-weight:500;
}
@media (min-width:760px){
  .msfeat{aspect-ratio:16/8}
  .msfeat img{position:absolute;inset:0}
  .msfeat::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(78deg,rgba(11,17,76,.92) 0%,rgba(11,17,76,.74) 34%,rgba(11,17,76,.16) 62%,rgba(11,17,76,0) 82%);
  }
  .msfeat-in{
    position:absolute;z-index:2;left:0;bottom:0;
    padding:clamp(30px,4vw,54px) clamp(28px,4vw,56px);max-width:min(620px,64%);
  }
}
@media (min-width:760px) and (max-width:1000px){
  .msfeat{aspect-ratio:16/9}
  .msfeat::after{background:linear-gradient(70deg,rgba(11,17,76,.94) 0%,rgba(11,17,76,.78) 46%,rgba(11,17,76,.2) 74%,rgba(11,17,76,0) 92%)}
  .msfeat-in{max-width:74%}
}
@media (max-width:759px){
  .msfeat img{aspect-ratio:16/10}
}
#msflats .bgrid{margin-top:clamp(26px,3.2vw,40px)}
.bmeta{margin:7px 0 0;font-size:.85rem;line-height:1.45;color:#5F6E7F;font-weight:600}
.bacts{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(11,17,76,.09)}
#msflats .bacts .fplink,#msflats .bacts .tlink{width:100%;justify-content:center}
a.tlink{text-decoration:none}
#msflats .bacts a.tlink{width:100%;justify-content:center;padding:8px 0;border-radius:10px}
#msflats .bacts a.tlink:hover{background:rgba(0,181,192,.08)}
#msflats .bflat{display:flex;flex-direction:column}
#msflats .bacts{margin-top:auto}
#msflats .bsoon{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;
  font-size:.92rem;font-weight:800;color:var(--teal-txt);cursor:default;user-select:none}
#msflats .bsoon svg{width:19px;height:19px;color:var(--teal-txt)}
@media (max-width:430px){#msflats .bsoon{height:auto;padding:6px 0}}

/* ---------- Flats: one structure for every layout in the collection ----------
   Both blocks use the same photo-left / name-right arrangement and both card
   rows use the same 320px column, left aligned, so The Green XL reads as the
   next layout in the same collection rather than a different page. */
@media (min-width:721px){
  #flats .plans-in.two{grid-template-columns:repeat(2,320px);justify-content:start}
  #flats .plans-in.one{grid-template-columns:320px;justify-content:start}
  #flats .plans-in.one .plan{flex-direction:column;align-items:stretch}
  #flats .plans-in.one .pbody{flex:1 1 auto}
}
#flats{padding-top:clamp(28px,3.1vw,48px)}
/* Flats: title + description live in ONE shared left-aligned container.
   No negative margins, no transforms, no per-layout offsets — both layouts
   inherit the identical rule, so the two blocks cannot drift apart. */
#flats .tstack{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:4px;text-align:left;width:100%;
}
#flats .tstack .tname{display:block;margin:0;padding:0;text-align:left}
#flats .tstack .tdesc{display:block;margin:0;padding:0;text-align:left;text-indent:0}

/* Flats: both hero photos share one identical frame. */
#flats .aphoto{width:100%;border-radius:var(--r-lg);overflow:hidden;align-self:center}
#flats .aphoto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}

#flats .tblock.second{margin-top:clamp(44px,4.6vw,72px)}
#flats .plan .pbody{justify-content:center;gap:9px;padding:20px 19px 22px}
#flats .plan .prate{margin-top:15px}

/* msflats address badge + furnishing note */
.msfeat-in .msaddr{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  padding:7px 14px 7px 11px;border-radius:999px;background:rgba(251,247,239,.13);
  border:1px solid rgba(251,247,239,.3);color:var(--cream);
  font-size:.82rem;font-weight:600;letter-spacing:.005em;backdrop-filter:blur(6px)}
.msfeat-in .msaddr svg{width:15px;height:15px;color:var(--teal-lt);flex:0 0 auto}
.bflat .bnote{margin-top:6px;font-size:.78rem;line-height:1.45;color:var(--gold-txt);
  background:rgba(255,201,60,.15);border-radius:8px;padding:6px 9px}