/* ====================================================
   LE PARC PLACE — design tokens & base
   Palette: burgundy + sage/celadon + brass + ivory
   Type:    Fraunces (display, editorial) + Be Vietnam Pro
==================================================== */
:root{
  /* Brand */
  --ink:        #1B1A17;       /* near-black warm */
  --ink-soft:   #3A3631;
  --paper:      #F6F1E8;       /* ivory */
  --paper-2:    #EDE6D7;       /* cream */
  --bone:       #E2D8C2;
  --burgundy:   #5E1E22;       /* primary */
  --burgundy-2: #7A2A2E;
  --sage:       #6E7A5E;       /* secondary */
  --sage-2:     #93A083;
  --brass:      #B89255;       /* accent */
  --brass-2:    #D9B074;
  --line:       rgba(27,26,23,.14);
  --line-2:     rgba(27,26,23,.08);
  --shadow-1:   0 1px 2px rgba(27,26,23,.06), 0 10px 30px -12px rgba(27,26,23,.16);
  --shadow-2:   0 20px 60px -20px rgba(27,26,23,.35);

  /* Type */
  --ff-display: "Fraunces", "Times New Roman", serif;
  --ff-sans:    "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw:       1320px;
  --gutter:     clamp(20px, 4vw, 56px);
  --section-y:  clamp(72px, 9vw, 140px);
  --radius:     2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:var(--burgundy); color:var(--paper); }

/* ============ Typography utilities ============ */
.eyebrow{
  font-family:var(--ff-sans);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--burgundy);
  font-weight:600;
  margin:0 0 18px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:""; width:32px; height:1px; background:var(--burgundy); display:inline-block;
}
.eyebrow--light{ color:var(--brass-2); }
.eyebrow--light::before{ background:var(--brass-2); }

.display{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(34px, 5.4vw, 76px);
  line-height:1.02;
  letter-spacing:-0.018em;
  margin:0 0 22px;
  color:var(--ink);
  font-variation-settings:"opsz" 144;
}
.display em{
  font-style:italic;
  font-weight:400;
  color:var(--burgundy);
  font-variation-settings:"opsz" 144;
}
.display--light{ color:var(--paper); }
.display--light em{ color:var(--brass-2); }

.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--section-y) var(--gutter);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-radius:var(--radius);
  transition:all .35s cubic-bezier(.2,.7,.2,1);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn--solid{
  background:var(--burgundy);
  color:var(--paper);
  border-color:var(--burgundy);
}
.btn--solid:hover{
  background:var(--ink);
  border-color:var(--ink);
  transform:translateY(-1px);
  box-shadow:var(--shadow-2);
}
.btn--ghost{
  background:transparent;
  color:var(--paper);
  border-color:rgba(246,241,232,.5);
}
.btn--ghost:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.btn--full{ width:100%; padding:16px 24px; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--burgundy);
  padding-bottom:6px;
  border-bottom:1px solid var(--burgundy);
  transition:all .3s;
}
.link-arrow:hover{ letter-spacing:.24em; }

/* ============ Preloader ============ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:40px;
  transition:opacity .8s ease, visibility .8s ease;
}
.preloader.is-out{ opacity:0; visibility:hidden; }
.preloader__mark{
  display:flex; flex-direction:column; align-items:center;
  color:var(--paper);
  text-align:center;
}
.preloader__le{
  font-family:var(--ff-display);
  font-style:italic; font-weight:300;
  font-size:18px; letter-spacing:.4em; color:var(--brass-2);
  margin-bottom:6px;
}
.preloader__name{
  font-family:var(--ff-display);
  font-size:46px; font-weight:300; letter-spacing:-.01em;
  font-variation-settings:"opsz" 144;
}
.preloader__sub{
  font-size:10px; letter-spacing:.4em; margin-top:10px;
  color:rgba(246,241,232,.55);
}
.preloader__bar{
  width:160px; height:1px;
  background:rgba(246,241,232,.15);
  position:relative; overflow:hidden;
}
.preloader__bar i{
  position:absolute; inset:0;
  background:var(--brass-2);
  transform-origin:left;
  animation:preload 1.6s cubic-bezier(.7,.0,.3,1) forwards;
}
@keyframes preload{
  0%{ transform:scaleX(0); }
  100%{ transform:scaleX(1); }
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:all .4s ease;
  background:transparent;
}
.nav.is-scrolled{
  background:rgba(246,241,232,.94);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  padding:14px var(--gutter);
  border-bottom:1px solid var(--line-2);
}
.nav__brand{
  display:flex; flex-direction:column; align-items:flex-start;
  line-height:1; color:var(--paper);
  transition:color .4s;
}
.nav.is-scrolled .nav__brand{ color:var(--ink); }
.nav__le{
  font-family:var(--ff-display);
  font-style:italic; font-weight:300;
  font-size:11px; letter-spacing:.36em;
  color:var(--brass-2);
  margin-bottom:2px;
}
.nav.is-scrolled .nav__le{ color:var(--burgundy); }
.nav__name{
  font-family:var(--ff-display);
  font-size:22px; font-weight:300; letter-spacing:-.01em;
}
.nav__links{
  display:flex; align-items:center; gap:32px;
}
.nav__links a{
  font-size:13px; font-weight:500; letter-spacing:.04em;
  color:var(--paper);
  transition:color .3s, opacity .3s;
  position:relative;
}
.nav.is-scrolled .nav__links a{ color:var(--ink-soft); }
.nav__links a:not(.nav__cta):hover{ color:var(--brass-2); }
.nav.is-scrolled .nav__links a:not(.nav__cta):hover{ color:var(--burgundy); }
.nav__cta{
  padding:11px 22px;
  border:1px solid rgba(246,241,232,.45);
  border-radius:var(--radius);
  transition:all .35s;
}
.nav__cta:hover{
  background:var(--burgundy);
  border-color:var(--burgundy);
  color:var(--paper) !important;
}
.nav.is-scrolled .nav__cta{
  border-color:var(--burgundy);
  color:var(--burgundy) !important;
}
.nav.is-scrolled .nav__cta:hover{ color:var(--paper) !important; }
.nav__toggle{
  display:none;
  width:36px; height:36px;
  flex-direction:column; justify-content:center; gap:5px;
  align-items:center;
}
.nav__toggle span{
  width:22px; height:1.5px; background:var(--paper);
  transition:all .3s;
}
.nav.is-scrolled .nav__toggle span{ background:var(--ink); }
.nav__toggle.is-active span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* Close button inside mobile menu panel — hidden on desktop */
.nav__close{
  display:none;
  position:absolute;
  top:20px; right:24px;
  width:40px; height:40px;
  background:transparent;
  border:1px solid rgba(0,0,0,.12);
  border-radius:50%;
  color:var(--ink);
  font-size:28px; line-height:1;
  cursor:pointer;
  align-items:center; justify-content:center;
  padding:0;
  transition:all .25s ease;
  font-family:inherit;
}
.nav__close:hover{
  background:var(--burgundy);
  border-color:var(--burgundy);
  color:var(--paper);
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  color:var(--paper);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  animation:slowZoom 18s ease-out forwards;
}
@keyframes slowZoom{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(27,26,23,.55) 0%, rgba(27,26,23,.15) 35%, rgba(27,26,23,.65) 100%),
    linear-gradient(90deg, rgba(27,26,23,.45) 0%, transparent 50%);
}
.hero__inner{
  position:relative; z-index:2;
  padding:0 var(--gutter);
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
}
.hero__title{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(48px, 9.5vw, 144px);
  line-height:.96;
  letter-spacing:-.025em;
  margin:14px 0 28px;
  color:var(--paper);
  font-variation-settings:"opsz" 144;
}
.hero__title em{
  font-style:italic;
  color:var(--brass-2);
  font-weight:300;
}
.hero__lead{
  max-width:520px;
  font-size:clamp(15px, 1.4vw, 17px);
  line-height:1.7;
  color:rgba(246,241,232,.88);
  margin:0 0 36px;
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__foot{
  position:absolute;
  bottom:36px; left:0; right:0; z-index:2;
  padding:0 var(--gutter);
  max-width:var(--maxw); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.hero__note{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(246,241,232,.55);
}
.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(246,241,232,.7);
}
.hero__scroll span{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
}
.hero__scroll i{
  width:1px; height:50px; background:var(--brass-2);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; top:-50px; left:0; right:0; height:50px;
  background:var(--paper);
  animation:scrollDot 2.4s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ top:-50px; } 100%{ top:50px; }
}

/* ============ Reveal animation ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__media img{ animation:none; }
  .hero__scroll i::after{ animation:none; }
  .gallery__track{ scroll-behavior:auto; }
  .gallery__item{ opacity:1; filter:none; transform:none; transition:none; }
  .gallery__item figcaption{ opacity:1; transform:none; transition:none; }
}

/* ============ VISION ============ */
.vision__head{ text-align:center; max-width:920px; margin:0 auto var(--section-y) auto; }
.vision__head .eyebrow{ justify-content:center; }
.vision__head .eyebrow::before,
.vision__head .eyebrow::after{
  content:""; width:32px; height:1px; background:var(--burgundy); display:inline-block;
}
.vision__head .eyebrow{ display:inline-flex; }
.vision__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:center;
}
.vision__fig{
  margin:0; overflow:hidden;
  position:relative;
  aspect-ratio: 5/6;
}
.vision__fig::after{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(246,241,232,.35);
  pointer-events:none;
}
.vision__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.vision__fig:hover img{ transform:scale(1.04); }
.vision__copy p{
  font-size:17px; line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 22px;
  max-width:48ch;
}

/* ============ STATS ============ */
.stats{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(60px, 8vw, 110px) var(--gutter);
}
.stats__row{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:40px;
}
.stat{ text-align:left; border-left:1px solid rgba(217,176,116,.25); padding-left:24px; }
.stat__num{
  display:block;
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(40px, 5vw, 64px);
  line-height:1;
  color:var(--brass-2);
  letter-spacing:-.02em;
  margin-bottom:14px;
  font-variation-settings:"opsz" 144;
}
.stat__label{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,241,232,.7);
}

/* ============ LOCATION ============ */
.location__head{ max-width:780px; margin-bottom:64px; }
.location__intro{
  font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0;
}
.location__body{
  display:grid; grid-template-columns: 1.4fr 1fr;
  gap:clamp(40px, 6vw, 80px);
  margin-bottom:80px;
  align-items:start;
}
.location__map{
  margin:0; position:relative;
  background:var(--paper-2);
  padding:24px;
  box-shadow:var(--shadow-1);
}
.location__map img{ width:100%; height:auto; }
.location__map figcaption{
  margin-top:14px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
}
.location__points{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
  counter-reset:loc;
}
.location__points li{
  display:flex; gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  counter-increment:loc;
  align-items:flex-start;
}
.location__points li:last-child{ border-bottom:0; }
.location__points li::before{
  content: counter(loc, decimal-leading-zero);
  font-family:var(--ff-display);
  font-style:italic; font-weight:300;
  font-size:32px;
  color:var(--brass);
  line-height:1;
  min-width:40px;
}
.location__points li span{ font-size:16px; line-height:1.55; color:var(--ink-soft); padding-top:4px; }
.location__points li strong{ color:var(--ink); font-weight:600; }
.location__metrics{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:24px;
  padding-top:48px;
  border-top:1px solid var(--line);
}
.metric{ display:flex; flex-direction:column; gap:8px; }
.metric b{
  font-family:var(--ff-display);
  font-weight:300; font-size:clamp(28px, 3.2vw, 40px);
  color:var(--burgundy); line-height:1;
  letter-spacing:-.01em;
}
.metric span{ font-size:13px; color:var(--ink-soft); line-height:1.4; }

/* ============ RESIDENCES table ============ */
.residences__head{ max-width:780px; margin-bottom:60px; }
.residences__intro{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0; }
.restable{ border-top:1px solid var(--ink); }
.restable__row{
  display:grid;
  grid-template-columns: 80px 2fr 1.2fr 0.6fr;
  gap:24px;
  align-items:center;
  padding:26px 8px;
  border-bottom:1px solid var(--line);
  transition:background .3s, padding .3s;
}
.restable__row:not(.restable__row--head):hover{
  background:var(--paper-2);
  padding-left:18px; padding-right:18px;
}
.restable__row--head{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
  padding:16px 8px;
}
.rt-type{
  font-family:var(--ff-display);
  font-style:italic; font-weight:400;
  font-size:34px; color:var(--burgundy);
  line-height:1;
}
.restable__row--hl{ background:linear-gradient(to right, rgba(94,30,34,.04), transparent 50%); }
.restable__row--hl .rt-type{ color:var(--burgundy-2); font-size:38px; }
.restable__row span:nth-child(2){ font-size:16px; }
.restable__row span:nth-child(3){ font-family:var(--ff-display); font-size:17px; color:var(--ink); }
.restable__row span:nth-child(4){ font-weight:600; color:var(--ink); text-align:right; }

/* ============ INTERIOR (full-bleed) ============ */
.interior{
  position:relative;
  display:grid; grid-template-columns: 1fr 1fr;
  background:var(--ink);
  color:var(--paper);
  min-height:78vh;
  overflow:hidden;
}
.interior__media{ position:relative; overflow:hidden; }
.interior__media img{
  width:100%; height:100%; min-height:78vh; object-fit:cover;
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.interior:hover .interior__media img{ transform:scale(1.04); }
.interior__copy{
  padding:clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px);
  display:flex; flex-direction:column; justify-content:center;
  max-width:560px;
}
.interior__copy p{
  font-size:17px; line-height:1.75;
  color:rgba(246,241,232,.85);
  margin:0;
}

/* ============ SKY VILLA browser ============ */
.skyvilla__head{ max-width:820px; margin-bottom:60px; }
.skyvilla__intro{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0; }
.sv-banner{
  margin:0 0 60px;
  position:relative;
  aspect-ratio: 16/7;
  overflow:hidden;
  background:var(--paper-2);
}
.sv-banner img{ width:100%; height:100%; object-fit:cover; object-position:center; }

.sv-tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--line);
  margin-bottom:40px;
}
.sv-tab{
  padding:18px 26px;
  font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all .35s;
  position:relative;
}
.sv-tab:hover{ color:var(--burgundy); }
.sv-tab.is-active{
  color:var(--burgundy);
  border-bottom-color:var(--burgundy);
}
.sv-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px 28px;
  margin-bottom:60px;
}
.sv-card{
  display:flex; flex-direction:column;
  cursor:pointer;
  transition:transform .4s;
}
.sv-card:hover{ transform:translateY(-6px); }
.sv-card__media{
  aspect-ratio:4/3;
  background:var(--paper-2);
  overflow:hidden;
  margin-bottom:18px;
  position:relative;
}
.sv-card__media img{
  width:100%; height:100%; object-fit:contain;
  padding:18px;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.sv-card:hover .sv-card__media img{ transform:scale(1.03); }
.sv-card__badge{
  position:absolute; top:14px; left:14px;
  background:var(--burgundy); color:var(--paper);
  padding:6px 12px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600;
}
.sv-card__type{
  font-family:var(--ff-display);
  font-style:italic; font-weight:300;
  font-size:14px; color:var(--brass);
  letter-spacing:.04em;
  margin-bottom:4px;
}
.sv-card__name{
  font-family:var(--ff-display); font-weight:400;
  font-size:24px; color:var(--ink);
  line-height:1.2; margin-bottom:12px;
  letter-spacing:-.01em;
}
.sv-card__meta{
  display:flex; gap:16px;
  font-size:13px; color:var(--ink-soft);
  padding-top:12px;
  border-top:1px solid var(--line-2);
}
.sv-card__meta b{ color:var(--ink); font-weight:600; }
.sv-card__meta span{ display:flex; flex-direction:column; gap:2px; }
.sv-card__meta span em{ font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); opacity:.7; }

.sv-keyplan figure{
  margin:0; background:var(--paper-2); padding:28px;
  box-shadow:var(--shadow-1);
}
.sv-keyplan img{ width:100%; }
.sv-keyplan figcaption{
  margin-top:18px; text-align:center;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* ============ REGENT ============ */
.regent{ background:var(--paper-2); }
.regent__head{ max-width:820px; margin-bottom:60px; }
.regent__intro{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0; }
.regent__mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, minmax(220px, 32vh));
  gap:16px;
}
.regent__mosaic figure{
  margin:0; overflow:hidden;
  cursor:zoom-in;
  position:relative;
  background:var(--bone);
}
.regent__mosaic img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.regent__mosaic figure:hover img{ transform:scale(1.06); }
.regent__big{ grid-column:span 2; grid-row:span 2; }

/* ============ AMENITIES ============ */
.amen__head{ max-width:820px; margin-bottom:60px; }
.amen__intro{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0; }
.amen__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(220px, 30vh);
  gap:16px;
}
.amen__cell{
  margin:0; position:relative; overflow:hidden;
  background:var(--bone);
  cursor:zoom-in;
}
.amen__cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.amen__cell:hover img{ transform:scale(1.07); }
.amen__cell::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(27,26,23,.85) 0%, rgba(27,26,23,.25) 35%, transparent 65%);
  z-index:1; opacity:.95; transition:opacity .4s;
}
.amen__cell:hover::before{ opacity:1; }
.amen__cell figcaption{
  position:absolute; left:22px; bottom:20px; z-index:2;
  color:var(--paper);
  font-family:var(--ff-display);
  font-style:italic; font-weight:300;
  font-size:22px;
  letter-spacing:.005em;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.amen__cell--tall{ grid-row:span 2; }
.amen__cell--wide{ grid-column:span 2; }

/* ============ COMMUNITY ============ */
.community{ padding-top:0; }
.community__feature{
  position:relative;
  margin-bottom:var(--section-y);
  min-height:60vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  cursor:zoom-in;
}
.community__feature img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.community__feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(27,26,23,.75) 0%, rgba(27,26,23,.1) 60%);
  z-index:1;
}
.community__feature-text{
  position:relative; z-index:2;
  padding:60px var(--gutter);
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
}
.community__copy{
  max-width:760px; margin:0 auto 80px;
  text-align:center;
}
.community__copy p{ font-size:17px; line-height:1.75; color:var(--ink-soft); }
.community__row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.community__row figure{
  margin:0; overflow:hidden;
  aspect-ratio:4/3;
  background:var(--bone);
  cursor:zoom-in;
  position:relative;
}
.community__row img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.community__row figure:hover img{ transform:scale(1.05); }
.community__row figcaption{
  position:absolute; left:18px; bottom:14px;
  color:var(--paper);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ============ MASTERPLAN ============ */
.masterplan{ background:var(--paper-2); }
.masterplan__head{ max-width:780px; margin-bottom:50px; text-align:center; margin-left:auto; margin-right:auto; }
.masterplan__head .eyebrow{ justify-content:center; }
.masterplan__intro{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0; }
.masterplan__img{
  margin:0 0 48px;
  background:var(--paper);
  padding:clamp(20px, 3vw, 40px);
  box-shadow:var(--shadow-1);
  cursor:zoom-in;
}
.masterplan__img img{
  width:100%;
  transition:opacity .4s ease;
}
.masterplan__img.is-swap img{ opacity:0; }

/* Tabs reused (same look as sv-tabs but in masterplan ctx) */
.mp-tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
  justify-content:center;
}
.mp-tab{
  padding:18px 28px;
  font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all .35s;
}
.mp-tab:hover{ color:var(--burgundy); }
.mp-tab.is-active{
  color:var(--burgundy);
  border-bottom-color:var(--burgundy);
}
.masterplan__towers{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:20px;
  padding-top:24px; border-top:1px solid var(--line);
}
.tw{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 22px;
  background:var(--paper);
  border-left:2px solid var(--burgundy);
}
.tw b{
  font-family:var(--ff-display);
  font-weight:500; font-size:18px; color:var(--ink);
}
.tw span{
  font-size:13px; color:var(--ink-soft);
  letter-spacing:.04em;
}
.masterplan__note{
  text-align:center;
  font-size:12px; color:var(--ink-soft);
  margin-top:24px; font-style:italic;
}

/* ============ GALLERY carousel ============ */
.gallery__head{ text-align:center; max-width:820px; margin:0 auto 50px; }
.gallery__head .eyebrow{ justify-content:center; }

.gallery__carousel{ position:relative; }

.gallery__track{
  display:flex; gap:16px;
  overflow-x:auto;
  padding:8px 4px 14px;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  /* scrollbar gỡ bỏ — điều hướng bằng mũi tên */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gallery__track::-webkit-scrollbar{ width:0; height:0; display:none; }
.gallery__track.is-grabbing{ cursor:grabbing; scroll-behavior:auto; }
.gallery__track.is-grabbing .gallery__item{ pointer-events:none; }

.gallery__item{
  flex:0 0 min(480px, 80vw);
  aspect-ratio:4/5;
  position:relative;
  scroll-snap-align:center;
  overflow:hidden;
  background:var(--bone);
  cursor:zoom-in;
  /* hiệu ứng tiêu điểm điện ảnh */
  opacity:.5;
  filter:saturate(.7);
  transform:scale(.94);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             filter .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1);
}
.gallery__item.is-active{
  opacity:1;
  filter:saturate(1);
  transform:scale(1);
  box-shadow:var(--shadow-2);
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.gallery__item.is-active:hover img{ transform:scale(1.05); }
.gallery__item figcaption{
  position:absolute; left:22px; bottom:20px; right:22px;
  color:var(--paper);
  font-family:var(--ff-display);
  font-style:italic;
  font-size:22px;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease .1s, transform .6s cubic-bezier(.2,.7,.2,1) .1s;
}
.gallery__item.is-active figcaption{ opacity:1; transform:none; }
/* lớp phủ tối nhẹ dưới chân ảnh tiêu điểm để caption rõ chữ */
.gallery__item::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg, transparent, rgba(27,26,23,.55));
  opacity:0; transition:opacity .6s ease;
  pointer-events:none;
}
.gallery__item.is-active::after{ opacity:1; }

/* ----- Mũi tên điều hướng ----- */
.gallery__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:4;
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(246,241,232,.85);
  backdrop-filter:blur(6px);
  border:1px solid var(--brass);
  color:var(--burgundy);
  box-shadow:var(--shadow-1);
  transition:background .35s ease, color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.gallery__arrow svg{
  width:22px; height:22px; fill:none;
  stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.gallery__arrow--prev{ left:-12px; }
.gallery__arrow--next{ right:-12px; }
.gallery__arrow:hover{
  background:var(--burgundy); color:var(--brass-2);
  transform:translateY(-50%) scale(1.08);
}
.gallery__arrow:active{ transform:translateY(-50%) scale(.96); }
.gallery__arrow:focus-visible{ outline:2px solid var(--burgundy); outline-offset:3px; }
.gallery__arrow.is-disabled{
  opacity:0; pointer-events:none;
  transform:translateY(-50%) scale(.8);
}

/* ----- Thanh tiến trình tinh tế (không kéo được, chỉ minh họa vị trí) ----- */
.gallery__progress{
  max-width:280px; height:2px; margin:34px auto 0;
  background:var(--bone); border-radius:2px; overflow:hidden;
}
.gallery__progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--brass), var(--brass-2));
  transition:width .25s ease;
}

/* ============ REGISTER ============ */
.register{ background:var(--ink); color:var(--paper); }
.register__panel{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr;
  gap:clamp(40px, 6vw, 80px);
  padding:0 var(--gutter);
  align-items:start;
}
.register__left .eyebrow{ color:var(--brass-2); }
.register__left .eyebrow::before{ background:var(--brass-2); }
.register__left h2{ color:var(--paper); }
.register__left h2 em{ color:var(--brass-2); }
.register__left > p{
  font-size:16px; line-height:1.75; color:rgba(246,241,232,.78);
  max-width:48ch; margin-bottom:36px;
}
.register__contact{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:18px;
}
.register__contact li{
  display:grid; grid-template-columns:110px 1fr;
  gap:20px; align-items:baseline;
  padding-bottom:18px;
  border-bottom:1px solid rgba(246,241,232,.12);
}
.register__contact span{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass-2);
}
.register__contact a, .register__contact em{
  font-family:var(--ff-display); font-style:normal; font-weight:400;
  font-size:18px; color:var(--paper);
  transition:color .3s;
}
.register__contact a:hover{ color:var(--brass-2); }
.register__contact em{ font-size:15px; line-height:1.5; color:rgba(246,241,232,.85); }

.register__form{
  display:grid; grid-template-columns:1fr 1fr;
  gap:18px 16px;
  background:rgba(246,241,232,.04);
  padding:clamp(28px, 4vw, 44px);
  border:1px solid rgba(217,176,116,.18);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:span 2; }
.field label{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-2);
}
.field input, .field select, .field textarea{
  background:transparent;
  border:0; border-bottom:1px solid rgba(246,241,232,.22);
  padding:10px 2px;
  color:var(--paper);
  font-family:var(--ff-sans);
  font-size:15px;
  transition:border-color .3s;
  resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0;
  border-bottom-color:var(--brass-2);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23D9B074' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat; background-position:right 4px center;
}
.field select option{ background:var(--ink); color:var(--paper); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(246,241,232,.35); }
.btn--full{ grid-column:span 2; }
.register__ok{
  grid-column:span 2;
  margin:0; padding:14px 18px;
  background:rgba(184,146,85,.18);
  color:var(--brass-2);
  border:1px solid rgba(217,176,116,.4);
  font-size:14px;
}
.register__fineprint{
  grid-column:span 2;
  font-size:12px; color:rgba(246,241,232,.45);
  margin:0; font-style:italic; line-height:1.6;
}

/* ============ FOOTER ============ */
.footer{
  background:#13120F;
  color:rgba(246,241,232,.7);
  padding:80px var(--gutter) 28px;
}
.footer__top{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(246,241,232,.1);
}
.footer__brand{ display:flex; flex-direction:column; line-height:1; }
.footer__le{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:12px; letter-spacing:.4em; color:var(--brass-2);
  margin-bottom:6px;
}
.footer__name{
  font-family:var(--ff-display); font-weight:300; font-size:32px;
  color:var(--paper); letter-spacing:-.01em;
}
.footer__sub{
  font-size:10px; letter-spacing:.4em; color:rgba(246,241,232,.5);
  margin-top:10px;
}
.footer__nav{
  display:flex; flex-wrap:wrap; gap:18px 28px;
  align-content:start;
}
.footer__nav a{
  font-size:13px; letter-spacing:.06em;
  transition:color .3s;
}
.footer__nav a:hover{ color:var(--brass-2); }
.footer__contact{ display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.6; }
.footer__contact a{ color:var(--paper); transition:color .3s; }
.footer__contact a:hover{ color:var(--brass-2); }
.footer__bottom{
  max-width:var(--maxw); margin:32px auto 0;
  display:flex; justify-content:space-between; gap:30px;
  font-size:11px; line-height:1.6;
  flex-wrap:wrap;
}
.footer__bottom p{ margin:0; }
.footer__disc{ max-width:780px; color:rgba(246,241,232,.45); }

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:9000;
  background:rgba(19,18,15,.96);
  display:flex; align-items:center; justify-content:center;
  padding:60px;
  animation:lbIn .35s ease;
}
.lightbox[hidden]{ display:none; }
@keyframes lbIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__fig{
  margin:0; max-width:90vw; max-height:88vh;
  display:flex; flex-direction:column; gap:12px;
  align-items:center;
}
.lightbox__fig img{ max-width:100%; max-height:80vh; object-fit:contain; box-shadow:var(--shadow-2); }
.lightbox__fig figcaption{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,241,232,.7);
  text-align:center;
}
.lightbox__close, .lightbox__nav{
  position:absolute;
  width:48px; height:48px;
  color:var(--paper);
  font-size:32px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(246,241,232,.25);
  transition:all .3s;
  background:rgba(0,0,0,.3);
}
.lightbox__close:hover, .lightbox__nav:hover{
  background:var(--burgundy); border-color:var(--burgundy);
}
.lightbox__close{ top:24px; right:24px; }
.lightbox__prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:24px; top:50%; transform:translateY(-50%); }

/* ============ TO TOP ============ */
.totop{
  position:fixed; bottom:24px; right:24px;
  width:46px; height:46px;
  background:var(--burgundy); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  z-index:80; opacity:0; visibility:hidden;
  transition:all .35s;
  font-size:20px;
  box-shadow:var(--shadow-2);
}
.totop.is-show{ opacity:1; visibility:visible; }
.totop:hover{ background:var(--ink); }

/* ============ THANH LIÊN HỆ NHANH (mobile) ============ */
.mobilebar{ display:none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  .vision__grid{ grid-template-columns:1fr; gap:48px; }
  .location__body{ grid-template-columns:1fr; gap:48px; }
  .location__metrics, .stats__row{ grid-template-columns:repeat(2, 1fr); }
  .sv-grid{ grid-template-columns:repeat(2, 1fr); }
  .regent__mosaic{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(200px, 28vh); }
  .regent__big{ grid-column:span 2; grid-row:auto; }
  .amen__grid{ grid-template-columns:repeat(2, 1fr); }
  .amen__cell--wide{ grid-column:span 2; }
  .amen__cell--tall{ grid-row:auto; }
  .community__row{ grid-template-columns:1fr; }
  .masterplan__towers{ grid-template-columns:repeat(2, 1fr); }
  .interior{ grid-template-columns:1fr; }
  .interior__media img{ min-height:50vh; }
  .register__panel{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width: 720px){
  .nav__links{
    position:fixed; top:0; right:-100%;
    background:var(--paper);
    height:100vh; width:78%; max-width:340px;
    flex-direction:column;
    justify-content:flex-start;
    padding:96px 36px 36px;
    transition:right .45s cubic-bezier(.2,.7,.2,1);
    gap:24px;
    box-shadow:-30px 0 60px rgba(0,0,0,.2);
  }
  .nav__links.is-open{ right:0; }
  .nav__links a{ color:var(--ink-soft) !important; font-size:18px; }
  .nav__cta{ border-color:var(--burgundy) !important; color:var(--burgundy) !important; margin-top:12px; align-self:flex-start; }
  .nav__toggle{ display:flex; }
  .nav__close{ display:flex; }
  .stats__row{ grid-template-columns:1fr 1fr; gap:30px; }
  .location__metrics{ grid-template-columns:1fr 1fr; }
  .restable__row{ grid-template-columns: 56px 1fr; gap:14px; padding:18px 8px; }
  .restable__row span:nth-child(3){ grid-column:2; font-size:14px; color:var(--ink-soft); }
  .restable__row span:nth-child(4){ grid-column:2; text-align:left; font-size:13px; }
  .restable__row--head{ display:none; }
  .rt-type{ font-size:28px; }
  .sv-grid{ grid-template-columns:1fr; }
  .sv-tab{ padding:14px 18px; font-size:12px; }
  .regent__mosaic{ grid-template-columns:1fr; }
  .regent__big{ grid-column:auto; }
  .amen__grid{ grid-template-columns:1fr; }
  .amen__cell--wide{ grid-column:auto; }
  .masterplan__towers{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; gap:14px; }

  /* ----- HERO trên điện thoại ----- */
  .hero{ min-height:92svh; }
  /* Ảnh hero là khung ngang 2:1, tòa nhà nằm lệch phải — đẩy điểm cắt sang
     phải để không bị mất tòa tháp khi xem dọc trên điện thoại */
  .hero__media img{ object-position:76% center; }
  /* Lớp phủ đậm hơn ở chân màn hình để chữ luôn rõ trên mọi ảnh */
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(27,26,23,.45) 0%, rgba(27,26,23,.25) 30%, rgba(27,26,23,.82) 100%);
  }
  /* Đưa nội dung xuống nửa dưới, nơi nền đã được làm tối */
  .hero{ align-items:flex-end; }
  .hero__inner{ padding-bottom:110px; }
  .hero__title{ font-size:clamp(46px, 13.5vw, 78px); margin:10px 0 20px; }
  .hero__lead{
    font-size:15.5px; line-height:1.65;
    color:rgba(246,241,232,.95);
    margin-bottom:28px;
  }
  .hero__actions{ flex-direction:column; align-items:stretch; width:100%; }
  .hero__actions .btn{ text-align:center; }
  .hero__foot{ bottom:20px; }
  .hero__scroll{ display:none; }

  .lightbox{ padding:20px; }
  .lightbox__prev, .lightbox__next{ width:40px; height:40px; font-size:24px; }
  .lightbox__close{ top:14px; right:14px; }

  /* ----- Carousel ảnh trên điện thoại ----- */
  .gallery__arrow{ width:48px; height:48px; }
  .gallery__arrow--prev{ left:6px; }
  .gallery__arrow--next{ right:6px; }
  .gallery__item figcaption{ font-size:19px; }

  /* ----- Thanh liên hệ nhanh cố định ----- */
  .mobilebar{
    display:flex; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(246,241,232,.94);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -10px 30px -14px rgba(27,26,23,.4);
    transform:translateY(130%);
    transition:transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .mobilebar.is-show{ transform:none; }
  .mobilebar__btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:50px; border-radius:var(--radius);
    font-size:15px; font-weight:600;
  }
  .mobilebar__btn--call{
    flex:0 0 42%;
    background:transparent; color:var(--burgundy);
    border:1.5px solid var(--brass);
  }
  .mobilebar__btn--call svg{ width:18px; height:18px; fill:currentColor; }
  .mobilebar__btn--reg{ flex:1; background:var(--burgundy); color:var(--paper); }
  .mobilebar__btn:active{ opacity:.85; }
  /* chừa khoảng để thanh không che chân trang */
  .footer{ padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  /* nâng nút "lên đầu trang" lên trên thanh liên hệ */
  .totop{ bottom:calc(84px + env(safe-area-inset-bottom)); right:16px; }
}

@media (max-width: 420px){
  /* Màn hình rất hẹp: dồn khung nhìn vào cụm tháp chính */
  .hero__media img{ object-position:80% center; }
}