/* Casa Estrellas Mirabal — design system derived from the brand logo (sand / petrol / coral) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --sand: #F4EFE3;
  --sand-deep: #E6DECB;
  --cream: #FBF8F1;
  --ink: #122026;
  --ink-soft: #3C4A4E;
  --petrol: #2C6669;
  --petrol-deep: #173F41;
  --coral: #E2806B;
  --coral-deep: #C8624D;
  --line: rgba(18,32,38,0.12);
  --line-soft: rgba(18,32,38,0.07);
  --shadow: 0 18px 40px rgba(18,32,38,0.10);
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--sand)}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--sand);
  -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.6;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em}
p{margin:0 0 1em}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral-deep); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--coral-deep)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:.25s ease;
}
.btn-primary{background:var(--petrol); color:var(--cream)}
.btn-primary:hover{background:var(--petrol-deep); transform:translateY(-1px)}
.btn-coral{background:var(--coral); color:var(--cream)}
.btn-coral:hover{background:var(--coral-deep); transform:translateY(-1px)}
.btn-ghost{background:transparent; border-color:var(--ink); color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--cream)}
.btn-ghost-light{background:transparent; border-color:rgba(251,248,241,.55); color:var(--cream)}
.btn-ghost-light:hover{background:rgba(251,248,241,.12); border-color:var(--cream)}

/* Header */
header.site{
  position:sticky; top:0; z-index:50; background:rgba(244,239,227,.88);
  backdrop-filter:blur(10px) saturate(1.1); border-bottom:1px solid var(--line-soft);
  transition:transform .35s ease, background .25s ease;
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--ink)}
.brand img{width:38px; height:38px; border-radius:50%}
nav.main-nav{display:flex; align-items:center; gap:28px}
nav.main-nav a{font-size:.95rem; font-weight:500; color:var(--ink-soft); position:relative}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--ink)}

/* Apartments dropdown (desktop) */
.nav-item{position:relative; display:flex; align-items:center}
.subnav{
  position:absolute; top:calc(100% + 14px); left:-14px; transform:translateY(8px);
  min-width:280px; padding:10px; border-radius:16px;
  background:rgba(251,248,241,.92); backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid var(--line); box-shadow:0 24px 60px rgba(18,32,38,.18);
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s;
  z-index:60;
}
.nav-item:hover .subnav, .nav-item:focus-within .subnav{opacity:1; visibility:visible; transform:translateY(0)}
.subnav a{display:flex !important; align-items:center; gap:10px; padding:9px 14px; border-radius:10px; font-size:.9rem; white-space:nowrap}
.subnav a:hover{background:var(--sand)}
.subnav a::after{display:none}
.subnav .dot{width:7px; height:7px; border-radius:50%; flex:none}
.subnav .dot.available{background:var(--petrol); animation:pulse 2.2s ease-in-out infinite}
.subnav .dot.rented{background:#E8923A}
.subnav .dot.soon{background:var(--coral)}
.subnav .sub-price{margin-left:auto; font-size:.78rem; color:var(--ink-soft); font-weight:600}
nav.main-nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--coral)}
.nav-right{display:flex; align-items:center; gap:18px}
.lang-switch{display:flex; gap:4px; font-size:.78rem; font-weight:600; color:var(--ink-soft)}
.lang-switch a{padding:4px 7px; border-radius:6px}
.lang-switch a.active{background:var(--ink); color:var(--cream)}
.burger{display:none; width:30px; height:22px; position:relative; cursor:pointer; border:none; background:none}
.burger span{position:absolute; left:0; right:0; height:2px; background:var(--ink); transition:.3s}
.burger span:nth-child(1){top:0} .burger span:nth-child(2){top:10px} .burger span:nth-child(3){top:20px}

/* Hero */
.hero{position:relative; min-height:92vh; display:flex; align-items:flex-end; overflow:hidden; color:var(--cream)}
.hero img.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-video-bg{position:absolute; inset:0; overflow:hidden; z-index:0; display:none}
.hero-video-bg iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.15); border:0; pointer-events:none;
  width:max(100vw, 177.78vh); height:max(56.25vw, 100vh);
  filter:saturate(1.25) contrast(1.06) brightness(1.03);
}
@media (min-width:880px){
  .hero-video-bg{display:block}
}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,32,38,0) 0%, rgba(18,32,38,.06) 45%, rgba(18,32,38,.32) 72%, rgba(18,32,38,.62) 100%); z-index:1}
.hero h1, .hero .sub, .hero .eyebrow{text-shadow:0 2px 18px rgba(18,32,38,.45)}

/* Responsive video embed (About page) */
.video-embed{position:relative; padding-top:56.25%; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.hero-inner{position:relative; z-index:2; padding-top:90px; padding-bottom:64px}
.hero h1{font-size:clamp(2.6rem, 5.5vw, 4.4rem); color:var(--cream); max-width:14ch}
.hero .sub{max-width:46ch; font-size:1.1rem; color:rgba(251,248,241,.88); margin-bottom:32px}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px}
.strip{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid rgba(251,248,241,.25)}
.strip-item{flex:1 1 200px; padding:18px 0 0; font-size:.85rem; font-weight:600; letter-spacing:.02em; color:rgba(251,248,241,.92); display:flex; align-items:center; gap:8px}
.strip-item::before{content:"✦"; color:var(--coral)}

/* Sections */
section{padding:96px 0}
section.tight{padding:64px 0}
.section-head{max-width:680px; margin-bottom:56px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{color:var(--ink-soft); font-size:1.08rem}
.bg-cream{background:var(--cream)}
.bg-sand{background:var(--sand)}
.bg-ink{background:var(--ink); color:var(--cream)}
.bg-ink .eyebrow{color:var(--coral)}
.bg-ink .section-head p{color:rgba(251,248,241,.75)}
.bg-petrol{background:var(--petrol-deep); color:var(--cream)}
.bg-petrol .eyebrow{color:var(--coral)}

/* Two-col */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split img{border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.split.reverse{direction:rtl} .split.reverse > *{direction:ltr}

/* Trust grid */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.trust-item{background:var(--cream); padding:34px 28px}
.trust-item .num{font-family:var(--serif); font-size:1.5rem; color:var(--coral-deep); margin-bottom:10px; display:block}
.trust-item h3{font-size:1.05rem; margin-bottom:8px}
.trust-item p{color:var(--ink-soft); font-size:.92rem; margin:0}

/* Apartment cards */
.apt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.apt-card{background:var(--cream); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line-soft); transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column}
.apt-card:hover{transform:translateY(-4px); box-shadow:0 26px 50px rgba(18,32,38,.16)}
.apt-card .img-wrap{position:relative; aspect-ratio:4/3; overflow:hidden}
.apt-card .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.apt-card:hover .img-wrap img{transform:scale(1.06)}
.badge{position:absolute; top:14px; left:14px; padding:6px 13px; border-radius:100px; font-size:.74rem; font-weight:700; letter-spacing:.03em}
.badge.available{background:rgba(44,102,105,.92); color:var(--cream)}
.badge.soon{background:rgba(226,128,107,.95); color:var(--cream)}
.badge.rented{background:#E8923A; color:var(--cream)}
.fact.status .value.rented{color:#D07E22}
.sidebar-card strong.rented{color:#D07E22}
.badge.num{position:absolute; top:14px; left:auto; right:14px; background:rgba(18,32,38,.55); color:var(--cream); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700}
.apt-card .body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.apt-card .floor{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600}
.apt-card .floor .st.available{color:var(--petrol)}
.apt-card .floor .st.rented{color:#D07E22}
.apt-card .floor .st.soon{color:var(--coral-deep)}
.apt-card h3{font-size:1.3rem; margin-bottom:0}
.apt-card .tagline{color:var(--ink-soft); font-size:.92rem; margin:0}
.apt-card .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.chip{font-size:.74rem; padding:4px 10px; border-radius:100px; background:var(--sand-deep); color:var(--ink-soft); font-weight:600}
.apt-card .footer-row{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft)}
.apt-card .price{font-family:var(--serif); font-size:1.25rem; color:var(--ink)}
.apt-card .price small{font-family:var(--sans); font-size:.7rem; font-weight:600; color:var(--ink-soft); text-transform:uppercase}
.apt-card .more-link{font-size:.85rem; font-weight:700; color:var(--petrol-deep)}
.apt-card.soon{opacity:.92}
.apt-card.soon .img-wrap img{filter:grayscale(.35) brightness(.85)}

/* Filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:42px}
.filter-btn{padding:9px 20px; border-radius:100px; border:1px solid var(--line); background:transparent; font-size:.86rem; font-weight:600; cursor:pointer; color:var(--ink-soft); transition:.2s}
.filter-btn.active, .filter-btn:hover{background:var(--ink); color:var(--cream); border-color:var(--ink)}

/* Apartment detail */
.apt-hero{padding-top:130px}
.breadcrumb{font-size:.85rem; color:var(--ink-soft); margin-bottom:18px}
.breadcrumb a{color:var(--petrol-deep); font-weight:600}
.apt-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px}
.apt-title-row .floor{color:var(--ink-soft); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px}
.apt-title-row h1{margin-bottom:6px; font-size:clamp(2rem,4vw,3rem)}
.apt-title-row .tagline{color:var(--ink-soft); font-size:1.1rem; margin:0}
.facts-bar{display:flex; gap:0; flex-wrap:wrap; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin:0 0 40px}
.fact{flex:1 1 150px; padding:20px 22px; border-right:1px solid var(--line-soft)}
.fact:last-child{border-right:none}
.fact .label{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600; margin-bottom:4px}
.fact .value{font-family:var(--serif); font-size:1.3rem}
.fact.status .value.available{color:var(--petrol-deep)}
.fact.status .value.soon{color:var(--coral-deep)}

.gallery-grid{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:170px; gap:10px; margin-bottom:56px; border-radius:var(--radius-lg); overflow:hidden}
.gallery-grid img{width:100%; height:100%; object-fit:cover; cursor:pointer}
.gallery-grid a:nth-child(1){grid-column:span 2; grid-row:span 2}
.gallery-grid a{display:block; height:100%; overflow:hidden}
.gallery-grid img{transition:transform .4s ease}
.gallery-grid a:hover img{transform:scale(1.05)}
.gallery-grid a{position:relative; cursor:pointer}
.gallery-grid .more-overlay{position:absolute; inset:0; background:rgba(18,32,38,.62); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.4rem}

/* Lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(10,16,19,.94); z-index:200;
  display:none; align-items:center; justify-content:center;
}
.lightbox-overlay.open{display:flex}
.lightbox-overlay .lb-img{max-width:90vw; max-height:86vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-overlay button{
  position:absolute; background:rgba(251,248,241,.12); border:1px solid rgba(251,248,241,.3); color:var(--cream);
  cursor:pointer; border-radius:50%; width:48px; height:48px; font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.lightbox-overlay button:hover{background:rgba(251,248,241,.25)}
.lightbox-overlay .lb-close{top:24px; right:24px}
.lightbox-overlay .lb-prev{left:24px; top:50%; transform:translateY(-50%)}
.lightbox-overlay .lb-next{right:24px; top:50%; transform:translateY(-50%)}
.lightbox-overlay .lb-counter{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(251,248,241,.85); font-size:.9rem; font-weight:600}
@media (max-width:720px){
  .lightbox-overlay .lb-prev{left:8px} .lightbox-overlay .lb-next{right:8px}
  .lightbox-overlay button{width:40px; height:40px}
}

.apt-body{display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start}
.apt-body .desc p{color:var(--ink-soft); font-size:1.04rem}
.amenity-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 18px}
.amenity-list li{display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink-soft); font-weight:500}
.amenity-list li::before{content:"✓"; width:22px; height:22px; flex:none; border-radius:50%; background:var(--petrol); color:var(--cream); font-size:.7rem; display:flex; align-items:center; justify-content:center; font-weight:700}
.sidebar-card{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); position:sticky; top:100px}
.sidebar-card .price-big{font-family:var(--serif); font-size:2.1rem; margin-bottom:2px}
.sidebar-card .price-big small{font-family:var(--sans); font-size:.8rem; color:var(--ink-soft); font-weight:600}
.sidebar-card .btn{width:100%; margin-top:18px}
.sidebar-card .meta-row{display:flex; justify-content:space-between; font-size:.88rem; padding:10px 0; border-top:1px solid var(--line-soft)}

.other-units{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

/* About */
.about-quote{font-family:var(--serif); font-size:1.5rem; line-height:1.5; color:var(--ink); max-width:60ch}
.people{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:50px}
.person h3{font-family:var(--serif); font-size:1.3rem}
.person p{color:var(--ink-soft)}
.person-photo{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow)}

/* Contact hosts */
.hosts-row{display:flex; justify-content:center; gap:40px; margin-top:40px; flex-wrap:wrap}
.host-card{text-align:center; width:160px}
.host-photo{width:140px; height:140px; object-fit:cover; border-radius:50%; box-shadow:var(--shadow); margin:0 auto 14px; border:3px solid var(--cream)}
.host-card strong{font-family:var(--serif); font-size:1.05rem}

/* Location */
.location-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:60px}
.loc-card{background:var(--cream); padding:30px; border-radius:var(--radius-lg); border:1px solid var(--line)}
.loc-card h3{font-size:1.1rem}
.loc-card p{color:var(--ink-soft); font-size:.92rem; margin:0}
.map-embed{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
.map-embed iframe{width:100%; height:440px; border:0; display:block}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px}
.form-card{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-bottom:18px}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft)}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--sand);
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
}
.field textarea{resize:vertical; min-height:90px}
.contact-cards{display:flex; flex-direction:column; gap:18px}
.contact-card{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px}
.contact-card h3{font-size:1.02rem; margin-bottom:4px}
.contact-card p{color:var(--ink-soft); font-size:.9rem; margin-bottom:10px}
.contact-card a.link{font-weight:700; color:var(--petrol-deep); font-size:.95rem}

/* Footer */
footer.site{background:var(--ink); color:rgba(251,248,241,.78); padding:70px 0 28px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:50px}
footer.site .brand{color:var(--cream)}
footer.site h4{color:var(--cream); font-family:var(--sans); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px}
footer.site a{display:block; padding:5px 0; font-size:.92rem; color:rgba(251,248,241,.78)}
footer.site a:hover{color:var(--coral)}
.footer-bottom{border-top:1px solid rgba(251,248,241,.14); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:rgba(251,248,241,.55)}

/* Investment page */
nav.main-nav a.inv-link{color:var(--coral-deep); font-weight:600}
nav.main-nav a.inv-link:hover{color:var(--coral)}
.inv-price-card{
  display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px 48px; box-shadow:var(--shadow); margin-top:-70px; position:relative; z-index:5;
}
.inv-price-card .label{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:600}
.inv-price{font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--petrol-deep); line-height:1.1; margin:6px 0}
.inv-price-card .note{font-size:.88rem; color:var(--ink-soft)}
.financing-badge{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  background:var(--petrol); color:var(--cream); padding:8px 16px; border-radius:100px;
  font-size:.85rem; font-weight:700; letter-spacing:.02em;
}
.financing-badge::before{content:"✓"; font-size:.8rem}
.inv-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-left:1px solid var(--line); padding-left:48px}
.inv-stat .value{font-family:var(--serif); font-size:1.6rem; color:var(--ink)}
.inv-stat .label{margin-top:4px}
.inv-stat .note{font-size:.76rem; color:var(--ink-soft)}
.inv-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:linear-gradient(120deg, var(--sand-deep), var(--cream));
  border:1px solid var(--coral); border-radius:var(--radius-lg); padding:32px 40px;
  box-shadow:var(--shadow); transition:.25s;
}
.inv-banner:hover{transform:translateY(-2px); box-shadow:0 24px 50px rgba(18,32,38,.15)}
.inv-banner h3{font-size:1.4rem; margin-bottom:4px}
.inv-banner p{margin:0; color:var(--ink-soft)}
@media (max-width:980px){
  .inv-price-card{grid-template-columns:1fr; gap:28px; padding:28px}
  .inv-stats{grid-template-columns:repeat(2,1fr); border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px}
  .inv-banner{flex-direction:column; align-items:flex-start}
}

/* coming soon page treatment */
.coming-soon-banner{background:var(--coral); color:var(--cream); padding:14px 0; text-align:center; font-size:.92rem; font-weight:600}

/* ============================================================
   V2 — Editorial Luxury + Glass accents
   ============================================================ */

/* Typography: lighter, larger, more air */
h1,h2{font-weight:500; letter-spacing:-.02em}
h2{font-size:clamp(1.9rem, 3.2vw, 2.9rem); line-height:1.15}
section{padding:110px 0}
section.tight{padding:72px 0}
.section-head{margin-bottom:64px}
.section-head p{font-size:1.05rem; line-height:1.75}
body{line-height:1.7}
.eyebrow{letter-spacing:.22em; font-size:.72rem}

/* Hero: staggered entrance + glass pills */
.hero-inner > *{opacity:0; transform:translateY(26px); animation:heroIn .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero-inner > *:nth-child(1){animation-delay:.1s}
.hero-inner > *:nth-child(2){animation-delay:.22s}
.hero-inner > *:nth-child(3){animation-delay:.34s}
.hero-inner > *:nth-child(4){animation-delay:.46s}
.hero-inner > *:nth-child(5){animation-delay:.58s}
@keyframes heroIn{to{opacity:1; transform:none}}
.hero .strip{border-top:none; gap:12px; padding-top:8px}
.hero .strip-item{
  flex:0 0 auto; padding:10px 18px; border-radius:100px;
  background:rgba(251,248,241,.1); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(251,248,241,.22); font-size:.82rem;
}

/* Header: more glass */
header.site{background:rgba(244,239,227,.65); backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25)}
nav.main-nav a{position:relative}
nav.main-nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:var(--coral); transition:right .3s ease}
nav.main-nav a:hover::after, nav.main-nav a.active::after{right:0}

/* Scroll reveal */
.rv{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none; transition:none}
  .hero-inner > *{opacity:1; transform:none; animation:none}
}

/* Cards: finer, glassier */
.apt-card{border-radius:18px; box-shadow:0 8px 30px rgba(18,32,38,.07); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.apt-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px rgba(18,32,38,.14)}
.badge{backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.badge.available{background:rgba(44,102,105,.75)}
.badge.rented{background:rgba(232,146,58,.82)}
.badge.soon{background:rgba(226,128,107,.82)}

/* Status pulse dot */
.apt-card .floor .st::before, .fact.status .value::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:currentColor; margin-right:7px; vertical-align:2px;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.85)}}

/* Buttons: glow + slide */
.btn{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s}
.btn-coral:hover{box-shadow:0 10px 30px rgba(226,128,107,.45); transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 10px 30px rgba(44,102,105,.4); transform:translateY(-2px)}

/* Glass sidebar + price card */
.sidebar-card{background:rgba(251,248,241,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px)}
.inv-price-card{background:rgba(251,248,241,.78); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(226,128,107,.35)}

/* Trust items: hairline editorial look */
.trust-grid{border-radius:18px}
.trust-item{transition:background .3s}
.trust-item:hover{background:var(--sand)}
.bg-ink .trust-item:hover{background:rgba(251,248,241,.1) !important}

/* Images: soft editorial radius */
.split img{border-radius:18px}

/* Count-up target smoothing */
.inv-price, .inv-stat .value{font-variant-numeric:tabular-nums}

/* Watermark words (injected via JS) */
.bg-word{
  position:absolute; left:0; right:0; top:8px; overflow:hidden; pointer-events:none;
  font-family:var(--serif); font-weight:600; font-size:clamp(4rem, 11vw, 10rem);
  line-height:1; white-space:nowrap; text-align:center;
  color:transparent; -webkit-text-stroke:1px rgba(18,32,38,.07);
  user-select:none; z-index:0;
}
.bg-ink .bg-word, .bg-petrol .bg-word{-webkit-text-stroke:1px rgba(251,248,241,.08)}
section{position:relative}
section > .container{position:relative; z-index:1}

/* Parallax drift on split images */
@supports (animation-timeline: view()) {
  .split img{
    animation:imgDrift linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes imgDrift{
    from{transform:translateY(26px)}
    to{transform:translateY(-26px)}
  }
}

/* Gallery hover: zoom + soft veil */
.gallery-grid a::after{
  content:"⤢"; position:absolute; right:12px; bottom:10px; color:var(--cream);
  font-size:1.1rem; opacity:0; transition:opacity .3s; text-shadow:0 1px 8px rgba(0,0,0,.5); z-index:2;
}
.gallery-grid a:hover::after{opacity:1}
.gallery-grid a::before{
  content:""; position:absolute; inset:0; background:rgba(18,32,38,0); transition:background .3s; z-index:1;
}
.gallery-grid a:hover::before{background:rgba(18,32,38,.18)}

/* Footer links: slide on hover */
footer.site a{transition:transform .25s, color .25s}
footer.site .footer-grid a:hover{transform:translateX(4px)}

/* Mobile */
@media (max-width: 980px){
  .split, .apt-body, .contact-grid{grid-template-columns:1fr}
  .apt-body .sidebar-card{position:static}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .apt-grid, .other-units{grid-template-columns:repeat(2,1fr)}
  .location-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 980px){
  /* backdrop-filter on the header breaks fixed positioning of the nav panel
     (filter creates a containing block) — so the mobile header goes solid instead */
  header.site{background:rgba(244,239,227,.96); backdrop-filter:none; -webkit-backdrop-filter:none}
  nav.main-nav{
    position:fixed; inset:0; padding:110px 28px 30px; overflow-y:auto;
    background:rgba(244,239,227,.9);
    backdrop-filter:blur(30px) saturate(1.3); -webkit-backdrop-filter:blur(30px) saturate(1.3);
    flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:6px;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1); z-index:40;
  }
  nav.main-nav.open{transform:translateX(0)}
  nav.main-nav > a, nav.main-nav .nav-item > a{font-size:1.25rem; padding:12px 0; width:100%; border-bottom:1px solid var(--line-soft); display:block}
  nav.main-nav a::after{display:none}
  .burger{display:block; z-index:45}
  .nav-right .lang-switch{display:flex}
  /* subnav inline on mobile */
  .nav-item{width:100%; display:block}
  .subnav{position:static; opacity:1; visibility:visible; transform:none; background:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0;
    box-shadow:none; border:none; padding:4px 0 8px 16px; min-width:0}
  .subnav a{font-size:.98rem !important; padding:8px 0 !important; border-bottom:none !important; color:var(--ink-soft); white-space:normal}
}
@media (max-width: 720px){
  .apt-grid, .other-units, .trust-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px}
  .gallery-grid a:nth-child(1){grid-column:span 2; grid-row:span 2}
  .footer-grid{grid-template-columns:1fr}
  section{padding:64px 0}
  .facts-bar{flex-direction:column}
  .fact{border-right:none; border-bottom:1px solid var(--line-soft)}
}