:root{
  --ink:#1A1814; --ink-soft:#4A453E; --muted:#8A8378;
  --cream:#F7F3EC; --cream-deep:#EFE9DE; --white:#FFFFFF;
  --gold:#B08D4F; --gold-soft:#C9B084; --line:#E2DACB;
  --dark:#14120F; --dark-soft:#211E19; --dark-line:#35312A; --cream-dim:rgba(247,243,236,.72);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --container:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--cream); color:var(--ink); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.15; letter-spacing:-0.01em}
a{color:inherit; text-decoration:none; transition:color .2s ease}
img{max-width:100%; display:block}
.wrap{max-width:var(--container); margin:0 auto; padding:0 28px}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px}
section{padding:88px 0}
h2{font-size:clamp(30px,4.4vw,44px); margin-bottom:20px; max-width:22ch}
.sec-lead{color:var(--ink-soft); max-width:64ch; margin-bottom:48px}
.btn{display:inline-block; font-size:15px; letter-spacing:.02em; padding:15px 30px; border-radius:4px; transition:all .25s ease; cursor:pointer; border:1px solid transparent; text-align:center}
.btn-gold{background:var(--gold); color:var(--white)}
.btn-gold:hover{background:var(--gold-soft); color:var(--ink)}
.btn-ghost{border-color:var(--cream-dim); color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-soft)}
.btn-ink{background:var(--ink); color:var(--cream)}
.btn-ink:hover{background:var(--gold); color:var(--white)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* nav */
header.nav{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(20,18,15,.78); backdrop-filter:blur(12px); border-bottom:1px solid rgba(53,49,42,.6)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px; max-width:var(--container); margin:0 auto; padding:0 28px}
.brand{font-family:var(--serif); font-size:20px; font-weight:600; color:var(--cream)}
.brand span{color:var(--gold-soft)}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a{font-size:14px; color:var(--cream-dim)}
.nav-links a:hover{color:var(--cream)}
.nav-links .btn{padding:10px 20px; font-size:14px}
.nav-toggle{display:none; background:none; border:none; font-size:24px; color:var(--cream); cursor:pointer}

/* hero */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end; color:var(--cream); background:var(--dark); overflow:hidden}
.hero video, .hero .hero-fallback{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,18,15,.35) 0%, rgba(20,18,15,.15) 40%, rgba(20,18,15,.88) 100%)}
.hero-content{position:relative; z-index:2; width:100%; padding:140px 0 72px}
.hero .eyebrow{color:var(--gold-soft)}
.hero h1{font-size:clamp(42px,7vw,80px); margin-bottom:18px}
.hero .lead{font-size:clamp(17px,2vw,20px); color:var(--cream-dim); max-width:56ch; margin-bottom:36px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px}
.hero-stats{display:flex; gap:44px; flex-wrap:wrap; padding-top:32px; border-top:1px solid rgba(226,218,203,.25)}
.hero-stats .t-num{font-family:var(--serif); font-size:30px; color:var(--gold-soft); line-height:1.1}
.hero-stats .t-lbl{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); margin-top:6px}

/* residence cards */
.res-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px}
.res-card{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column}
.res-card img{aspect-ratio:4/3; object-fit:cover; width:100%}
.res-body{padding:28px 28px 32px; flex:1; display:flex; flex-direction:column}
.res-type{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:8px}
.res-body h3{font-size:26px; margin-bottom:4px}
.res-addr{font-size:14px; color:var(--muted); margin-bottom:18px}
.res-specs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px}
.res-specs .s-num{font-family:var(--serif); font-size:21px; color:var(--ink)}
.res-specs .s-lbl{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.res-price{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.res-price .p{font-family:var(--serif); font-size:28px; color:var(--ink)}
.res-price .psf{font-size:13px; color:var(--muted)}
.res-card.sold{position:relative}
.res-card.sold img{filter:grayscale(.75) brightness(.82)}
.res-card.sold .res-price .p{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px}
.sold-badge{position:absolute; top:18px; left:18px; z-index:2; background:var(--ink); color:var(--cream); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; padding:9px 16px; border-radius:3px}
.sold-tag{display:inline-block; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); border:1px solid var(--gold); border-radius:3px; padding:2px 8px; margin-left:8px; vertical-align:middle}
.price-table tr.sold td{opacity:.5}
.res-note{font-size:14px; color:var(--ink-soft); margin-bottom:18px}

/* price table */
.dark-sec{background:var(--dark); color:var(--cream)}
.dark-sec h2{color:var(--cream)}
.dark-sec .sec-lead{color:var(--cream-dim)}
.price-table{width:100%; border-collapse:collapse; font-size:15px}
.price-table th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); text-align:left; padding:12px 14px; border-bottom:1px solid var(--dark-line); font-weight:600}
.price-table td{padding:14px; border-bottom:1px solid var(--dark-line); color:var(--cream-dim)}
.price-table td:first-child{color:var(--cream); font-weight:500}
.price-table .num{font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.fine{font-size:13px; color:var(--muted); margin-top:20px; max-width:78ch}
.dark-sec .fine{color:rgba(247,243,236,.5)}

/* read section */
.read-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px}
.read-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:30px}
.read-card h3{font-size:21px; margin-bottom:12px}
.read-card p{font-size:15px; color:var(--ink-soft)}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gallery img{aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:4px}
.gallery .tall{grid-row:span 2; aspect-ratio:auto; height:100%}
.cap{font-size:12px; color:var(--muted); margin-top:14px}

/* spec grid */
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.spec-item{border-top:2px solid var(--gold); padding-top:18px}
.spec-item h3{font-size:19px; margin-bottom:8px}
.spec-item p{font-size:15px; color:var(--ink-soft)}

/* location */
.loc-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start}
.loc-list h3{font-size:19px; margin:22px 0 10px}
.loc-list ul{list-style:none}
.loc-list li{display:flex; justify-content:space-between; gap:16px; font-size:15px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.loc-list li span:last-child{color:var(--muted); white-space:nowrap; font-size:14px}
.loc-grid img{border-radius:6px; border:1px solid var(--line)}

/* form / register */
.reg-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start}
.contact-block{display:flex; flex-direction:column; gap:14px; margin-top:28px}
.contact-block a{display:flex; align-items:center; gap:14px; background:var(--dark-soft); border:1px solid var(--dark-line); border-radius:6px; padding:18px 20px; color:var(--cream)}
.contact-block a:hover{border-color:var(--gold)}
.contact-block .c-lbl{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft)}
.contact-block .c-val{font-size:17px}
form{background:var(--dark-soft); border:1px solid var(--dark-line); border-radius:8px; padding:36px}
form h3{font-size:24px; margin-bottom:6px; color:var(--cream)}
form .form-sub{font-size:14px; color:var(--cream-dim); margin-bottom:24px}
label{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); margin:18px 0 6px}
input,select,textarea{width:100%; padding:13px 14px; background:var(--dark); border:1px solid var(--dark-line); border-radius:4px; color:var(--cream); font-size:15px; font-family:var(--sans)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold)}
form .btn{width:100%; margin-top:26px}
.hp{position:absolute; left:-9999px; opacity:0}

/* footer */
footer{background:var(--dark); color:rgba(247,243,236,.55); padding:56px 0; font-size:13px; border-top:1px solid var(--dark-line)}
footer .foot-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:32px; color:var(--cream-dim); font-size:15px}
footer .disclaimer{max-width:100ch; line-height:1.7}
footer a{color:var(--gold-soft)}

/* floating whatsapp */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:90; background:#25D366; color:#fff; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25)}
.wa-float svg{width:30px; height:30px; fill:#fff}

@media (max-width:900px){
  .res-grid,.read-grid,.spec-grid{grid-template-columns:1fr 1fr}
  .loc-grid,.reg-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section{padding:64px 0}
  .nav-links{display:none; position:absolute; top:68px; left:0; right:0; background:var(--dark); flex-direction:column; padding:24px 28px; gap:20px; border-bottom:1px solid var(--dark-line)}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .res-grid,.read-grid,.spec-grid,.gallery{grid-template-columns:1fr}
  .hero-stats{gap:28px}
}

/* ---- shared additions for project + hub pages ---- */
.hub-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px}
.hub-card{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s ease, transform .25s ease}
.hub-card:hover{border-color:var(--gold); transform:translateY(-3px)}
.hub-card .hc-img{position:relative}
.hub-card img{aspect-ratio:16/10; object-fit:cover; width:100%}
.status{position:absolute; top:16px; left:16px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; border-radius:3px; background:var(--ink); color:var(--cream)}
.status.last{background:#8C3B2E; color:#fff}
.status.few{background:var(--gold); color:#fff}
.hub-body{padding:26px 28px 30px; flex:1; display:flex; flex-direction:column}
.hub-body h3{font-size:26px; margin-bottom:4px}
.hub-meta{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.hub-body p{font-size:15px; color:var(--ink-soft); margin-bottom:20px}
.hub-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 0; border-top:1px solid var(--line); margin-bottom:18px}
.hub-facts .f-n{font-family:var(--serif); font-size:19px}
.hub-facts .f-l{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.hub-cta{margin-top:auto; font-size:14px; letter-spacing:.06em; color:var(--gold); font-weight:600}
.hub-card:hover .hub-cta{color:var(--ink)}
/* other-projects strip */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.strip a{display:block; border:1px solid var(--dark-line); border-radius:6px; overflow:hidden; background:var(--dark-soft)}
.strip a:hover{border-color:var(--gold)}
.strip img{aspect-ratio:16/9; object-fit:cover; width:100%}
.strip .s-b{padding:16px 18px 20px}
.strip .s-t{font-family:var(--serif); font-size:20px; color:var(--cream); margin-bottom:2px}
.strip .s-m{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-soft)}
.price-was{font-size:15px; color:var(--muted); text-decoration:line-through; margin-right:8px}
.price-note{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-top:6px}
@media (max-width:900px){ .hub-grid{grid-template-columns:1fr} .strip{grid-template-columns:1fr} }