*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
--navy:#0B1524;
--navy2:#111E30;
--navy3:#162034;
--gold:#C9A84C;
--gold2:#E2C06A;
--text:#F0EDE8;
--text-muted:#8D9BAD;
--border:rgba(201,168,76,0.18);
--border2:rgba(255,255,255,0.07);
}
body{background:var(--navy);color:var(--text);font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden}
/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(48px);transition:opacity 0.75s cubic-bezier(.16,1,.3,1),transform 0.75s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-56px);transition:opacity 0.8s cubic-bezier(.16,1,.3,1),transform 0.8s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(56px);transition:opacity 0.8s cubic-bezier(.16,1,.3,1),transform 0.8s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.92);transition:opacity 0.7s cubic-bezier(.16,1,.3,1),transform 0.7s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
/* stagger delays */
.d1{transition-delay:.05s}.d2{transition-delay:.13s}.d3{transition-delay:.21s}
.d4{transition-delay:.29s}.d5{transition-delay:.37s}.d6{transition-delay:.45s}
/* ── NAV ── */
nav{
position:fixed;top:0;left:0;right:0;z-index:200;
display:flex;align-items:center;justify-content:space-between;
padding:0 52px;height:68px;
background:rgba(11,21,36,0.93);
border-bottom:1px solid var(--border2);
backdrop-filter:blur(14px);
transition:background .3s;
}
nav.scrolled{background:rgba(11,21,36,0.98)}
.nav-logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.nav-brand{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:600;color:var(--text);letter-spacing:0.03em;line-height:1.2}
.nav-brand span{display:block;font-family:'Inter',sans-serif;font-size:0.6rem;font-weight:400;color:var(--gold);letter-spacing:0.18em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{list-style:none;display:flex;gap:32px}
.nav-links a{text-decoration:none;color:var(--text-muted);font-size:0.78rem;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{background:var(--gold);color:var(--navy);padding:8px 20px;border-radius:2px;font-size:0.75rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .15s}
.nav-cta:hover{background:var(--gold2);transform:translateY(-1px)}
/* Hamburger (right side) */
.hamburger{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:40px;height:40px;cursor:pointer;padding:8px;
border:1px solid var(--border);border-radius:2px;background:transparent;
position:relative;z-index:300;
}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--gold);transition:all .35s cubic-bezier(.16,1,.3,1);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Mobile drawer */
.mobile-menu{
position:fixed;top:0;right:-100%;bottom:0;width:80%;max-width:320px;
background:var(--navy2);z-index:250;
border-left:1px solid var(--border);
display:flex;flex-direction:column;justify-content:center;padding:60px 40px;
transition:right .45s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open{right:0}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:0}
.mobile-menu ul li a{
display:block;padding:18px 0;
font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:600;
color:var(--text);text-decoration:none;border-bottom:1px solid var(--border2);
transition:color .2s,padding-left .25s;
}
.mobile-menu ul li a:hover{color:var(--gold);padding-left:8px}
.mobile-menu .mob-cta{display:inline-block;margin-top:32px;background:var(--gold);color:var(--navy);padding:13px 28px;border-radius:2px;font-size:0.82rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;text-decoration:none}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:240;opacity:0;pointer-events:none;transition:opacity .35s}
.overlay.show{opacity:1;pointer-events:all}
/* ── HERO ── */
.hero{
min-height:100vh;display:flex;align-items:center;
padding:120px 60px 90px;position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0B1524 0%,#0f1e38 45%,#162848 70%,#0B1524 100%)}
.hero-grid{
position:absolute;inset:0;opacity:0.04;
background-image:linear-gradient(rgba(201,168,76,1) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,1) 1px,transparent 1px);
background-size:60px 60px;
}
.hero-accent{position:absolute;top:10%;right:2%;width:520px;height:520px;background:radial-gradient(circle,rgba(201,168,76,0.07) 0%,transparent 68%);border-radius:50%;pointer-events:none}
/* Hero image panel right side */
.hero-image-panel{
position:absolute;right:0;top:0;bottom:0;width:42%;
overflow:hidden;
}
.hero-image-panel::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:200px;
background:linear-gradient(to right,#0B1524,transparent);z-index:2;
}
.hero-image-panel img{width:100%;height:100%;object-fit:cover;opacity:0.35}
.hero-content{position:relative;z-index:3;max-width:600px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:0.7rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.hero-eyebrow::before{content:'';display:block;width:26px;height:1px;background:var(--gold)}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.6rem,4.5vw,4.2rem);font-weight:700;line-height:1.1;margin-bottom:22px;color:#fff}
.hero h1 em{color:var(--gold);font-style:italic}
.hero-sub{font-size:0.98rem;color:var(--text-muted);line-height:1.8;max-width:460px;margin-bottom:42px;font-weight:300}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{background:var(--gold);color:var(--navy);padding:13px 30px;border-radius:2px;font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .15s;border:none;cursor:pointer;display:inline-block}
.btn-primary:hover{background:var(--gold2);transform:translateY(-1px)}
.btn-outline{border:1px solid var(--gold);color:var(--gold);padding:13px 30px;border-radius:2px;font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all .2s;display:inline-block}
.btn-outline:hover{background:rgba(201,168,76,0.1)}
.hero-stats{position:absolute;bottom:56px;left:60px;display:flex;gap:48px;z-index:3}
.stat-num{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:#fff;line-height:1}
.stat-num span{color:var(--gold)}
.stat-label{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-top:5px}
/* ── MARQUEE ── */
.marquee-band{background:var(--gold);padding:13px 0;overflow:hidden;white-space:nowrap}
.marquee-inner{display:inline-flex;animation:marquee 24s linear infinite}
.marquee-item{display:inline-flex;align-items:center;gap:16px;padding:0 38px;font-size:0.7rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--navy)}
.marquee-item::after{content:'✦';opacity:0.45}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ── SHARED SECTION ── */
section{padding:96px 60px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:0.68rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.section-label::before{content:'';display:block;width:22px;height:1px;background:var(--gold)}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:700;line-height:1.2;color:#fff;margin-bottom:14px}
.section-sub{font-size:0.92rem;color:var(--text-muted);max-width:500px;font-weight:300;line-height:1.85}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px;gap:36px;flex-wrap:wrap}
/* ── LAND SELECTION (with images & filter tabs) ── */
.lands-section{background:var(--navy2)}
.filter-tabs{display:flex;gap:0;margin-bottom:40px;border:1px solid var(--border2);border-radius:3px;overflow:hidden;width:fit-content}
.tab-btn{
padding:10px 24px;background:transparent;border:none;cursor:pointer;
font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
color:var(--text-muted);transition:all .25s;border-right:1px solid var(--border2);
}
.tab-btn:last-child{border-right:none}
.tab-btn.active,.tab-btn:hover{background:var(--gold);color:var(--navy)}
/* Featured large card + grid */
.lands-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:1px;background:var(--border)}
.land-featured{position:relative;overflow:hidden;cursor:pointer;min-height:540px;display:flex;flex-direction:column;justify-content:flex-end}
.land-featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.land-featured:hover img{transform:scale(1.04)}
.land-featured::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,21,36,0.9) 0%,rgba(11,21,36,0.3) 50%,transparent 100%)}
.featured-body{position:relative;z-index:2;padding:36px}
.featured-tag{display:inline-block;background:var(--gold);color:var(--navy);font-size:0.62rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:5px 12px;border-radius:1px;margin-bottom:14px}
.featured-body h3{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.25}
.featured-body .loc{font-size:0.75rem;color:var(--gold);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.featured-body .loc::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%;display:block}
.featured-meta{display:flex;gap:20px;margin-bottom:20px}
.featured-meta span{font-size:0.78rem;color:rgba(240,237,232,0.7)}
.featured-meta strong{color:#fff;display:block;font-size:0.9rem;margin-bottom:2px}
.featured-price{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--gold)}
/* Right mini-grid */
.lands-right{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--border)}
.land-mini{position:relative;overflow:hidden;cursor:pointer;min-height:268px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--navy2)}
.land-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease;opacity:0.75}
.land-mini:hover img{transform:scale(1.06);opacity:0.9}
.land-mini::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,21,36,0.85) 0%,transparent 65%)}
.mini-body{position:relative;z-index:2;padding:22px 24px}
.mini-tag{display:inline-block;background:rgba(201,168,76,0.9);color:var(--navy);font-size:0.58rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;border-radius:1px;margin-bottom:8px}
.mini-body h4{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:#fff;margin-bottom:6px;line-height:1.3}
.mini-loc{font-size:0.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:6px}
.mini-price{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--gold)}
/* Bottom 3-card row */
.lands-bottom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);margin-top:1px}
.land-card-h{
background:var(--navy2);display:flex;gap:0;overflow:hidden;cursor:pointer;
transition:background .25s;
}
.land-card-h:hover{background:#162034}
.land-card-h:hover .lch-img img{transform:scale(1.07)}
.lch-img{width:130px;flex-shrink:0;overflow:hidden;position:relative}
.lch-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
.lch-body{padding:22px 20px;flex:1;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border2)}
.lch-tag{font-size:0.6rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.lch-body h4{font-family:'Playfair Display',serif;font-size:0.95rem;font-weight:600;color:#fff;margin-bottom:6px;line-height:1.3}
.lch-loc{font-size:0.7rem;color:var(--text-muted);margin-bottom:8px}
.lch-price{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:var(--gold)}
/* ── WHY ── */
.why-section{background:var(--navy)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.why-visual{aspect-ratio:4/5;background:var(--navy3);border:1px solid var(--border);border-radius:3px;position:relative;overflow:hidden}
.why-visual img{width:100%;height:100%;object-fit:cover;opacity:0.82}
.why-visual-badge{position:absolute;bottom:28px;left:28px;right:28px;background:rgba(11,21,36,0.88);backdrop-filter:blur(8px);border:1px solid var(--border);padding:18px 22px;border-radius:2px}
.why-badge-num{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;color:var(--gold)}
.why-badge-text{font-size:0.78rem;color:var(--text-muted);margin-top:4px}
.why-features{display:flex;flex-direction:column;gap:0}
.why-feature{padding:26px 0;border-bottom:1px solid var(--border2);display:flex;gap:18px;align-items:flex-start}
.why-feature:first-child{padding-top:0}
.why-icon{width:42px;height:42px;flex-shrink:0;border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.why-feature h4{font-size:0.93rem;font-weight:600;color:#fff;margin-bottom:5px}
.why-feature p{font-size:0.83rem;color:var(--text-muted);line-height:1.72}
/* ── PROCESS ── */
.process-section{background:var(--navy3)}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border2);margin-top:56px}
.step{background:var(--navy3);padding:38px 30px;position:relative}
.step::before{content:attr(data-num);display:block;font-family:'Playfair Display',serif;font-size:3.2rem;font-weight:700;color:rgba(201,168,76,0.11);line-height:1;margin-bottom:18px}
.step h4{font-size:0.93rem;font-weight:600;color:#fff;margin-bottom:9px}
.step p{font-size:0.81rem;color:var(--text-muted);line-height:1.75}
.step-line{position:absolute;top:38px;right:0;width:1px;height:44px;background:var(--gold);opacity:0.25}
/* ── TESTIMONIALS ── */
.testimonials-section{background:var(--navy2)}
.testimonials-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border2);margin-top:52px}
.testimonial{background:var(--navy2);padding:34px 30px}
.testi-stars{color:var(--gold);font-size:11px;letter-spacing:3px;margin-bottom:14px}
.testi-quote{font-family:'Playfair Display',serif;font-size:1rem;font-style:italic;color:var(--text);line-height:1.72;margin-bottom:22px}
.testi-author{display:flex;align-items:center;gap:13px}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:var(--navy);flex-shrink:0}
.testi-name{font-size:0.83rem;font-weight:600;color:#fff}
.testi-detail{font-size:0.72rem;color:var(--text-muted);margin-top:2px}
/* ── CTA ── */
.cta-strip{background:var(--gold);padding:76px 60px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta-strip h2{font-family:'Playfair Display',serif;font-size:2.1rem;font-weight:700;color:var(--navy);max-width:480px;line-height:1.25}
.btn-dark{background:var(--navy);color:var(--gold);padding:14px 34px;border-radius:2px;font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .2s;display:inline-block}
.btn-dark:hover{background:#0f1e38}
/* ── FOOTER ── */
footer{background:var(--navy);border-top:1px solid var(--border2);padding:58px 60px 30px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.footer-brand-wrap{display:flex;align-items:center;gap:11px;margin-bottom:14px;text-decoration:none}
.footer-brand-text{font-family:'Playfair Display',serif;font-size:0.98rem;font-weight:600;color:#fff}
.footer-brand-text span{display:block;font-family:'Inter',sans-serif;font-size:0.6rem;font-weight:400;color:var(--gold);letter-spacing:0.18em;text-transform:uppercase}
.tagline{font-size:0.8rem;color:var(--text-muted);line-height:1.78;max-width:250px;margin-bottom:18px}
.footer-contact a{display:block;font-size:0.8rem;color:var(--gold);text-decoration:none;margin-bottom:5px}
.footer-col h5{font-size:0.67rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#fff;margin-bottom:18px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:9px}
.footer-col ul a{font-size:0.8rem;color:var(--text-muted);text-decoration:none;transition:color .2s,padding-left .2s}
.footer-col ul a:hover{color:var(--gold);padding-left:5px}
.footer-bottom{border-top:1px solid var(--border2);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-bottom p{font-size:0.73rem;color:var(--text-muted)}
/* ── SCROLL PROGRESS BAR ── */
#progress-bar{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:999;width:0%;transition:width .1s linear}
/* ── RESPONSIVE ── */
@media(max-width:900px){
nav{padding:0 24px}
.nav-links,.nav-cta{display:none}
.hamburger{display:flex}
section{padding:72px 28px}
.hero{padding:100px 28px 80px}
.hero-image-panel{display:none}
.hero-stats{left:28px;bottom:40px;gap:28px}
.lands-layout{grid-template-columns:1fr}
.lands-bottom{grid-template-columns:1fr}
.why-grid{grid-template-columns:1fr;gap:40px}
.process-steps{grid-template-columns:1fr 1fr}
.testimonials-grid{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr 1fr;gap:28px}
.cta-strip{padding:52px 28px}
footer{padding:44px 28px 24px}
}
/* Loading */
#loader{position:fixed;inset:0;background:#0B1524;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
#loader.hide{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-logo{font-family:'Playfair Display',serif;font-size:2rem;color:#C9A84C;margin-bottom:16px}
.loader-bar{width:120px;height:2px;background:rgba(201,168,76,.2);margin:0 auto;position:relative;overflow:hidden}
.loader-bar::after{content:'';position:absolute;left:-40%;width:40%;height:100%;background:#C9A84C;animation:loadbar 1s ease infinite}
@keyframes loadbar{to{left:100%}}
/* Custom cursor */
.cursor-dot{width:8px;height:8px;background:#C9A84C;border-radius:50%;position:fixed;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .2s,height .2s}
.cursor-ring{width:32px;height:32px;border:1px solid rgba(201,168,76,.5);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s}
body:hover .cursor-dot,body:hover .cursor-ring{opacity:1}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none}}
/* Go top */
.go-top{position:fixed;bottom:100px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);border:none;font-size:1.2rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;z-index:150}
.go-top.show{opacity:1;pointer-events:all}
.go-top:hover{transform:translateY(-3px)}
/* Floating WhatsApp + Call */
.floating-btns{position:fixed;bottom:24px;right:24px;z-index:150;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3);cursor:pointer;border:none;transition:transform .2s}
.fab:hover{transform:scale(1.08)}
.fab-wa{background:#25D366;color:#fff}
.fab-call{background:var(--gold);color:var(--navy)}
.call-dropdown{position:absolute;bottom:60px;right:0;background:var(--navy2);border:1px solid var(--border);border-radius:8px;padding:12px;min-width:220px;display:none;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.call-dropdown.open{display:block}
.call-dropdown a{display:block;padding:10px 12px;color:var(--text);text-decoration:none;border-radius:4px;font-size:.85rem}
.call-dropdown a:hover{background:rgba(201,168,76,.15);color:var(--gold)}
.call-dropdown .role{font-size:.7rem;color:var(--text-muted)}
/* Ticker top */
.news-ticker{background:var(--navy3);border-bottom:1px solid var(--border2);padding:8px 0;overflow:hidden;white-space:nowrap}
.news-ticker-inner{display:inline-flex;animation:marquee 30s linear infinite}
.news-ticker-item{padding:0 40px;font-size:.72rem;color:var(--gold);letter-spacing:.05em}
/* Search in nav */
.nav-search{position:relative}
.nav-search input{background:rgba(255,255,255,.06);border:1px solid var(--border2);color:var(--text);padding:7px 14px 7px 34px;border-radius:2px;font-size:.78rem;width:180px;outline:none}
.nav-search input:focus{border-color:var(--gold)}
.nav-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5}
/* Lang switcher */
.lang-switch{display:flex;gap:6px}
.lang-switch a{font-size:.7rem;color:var(--text-muted);text-decoration:none;padding:4px 8px;border:1px solid transparent;border-radius:2px;letter-spacing:.08em;text-transform:uppercase}
.lang-switch a.active,.lang-switch a:hover{color:var(--gold);border-color:var(--border)}
/* Property detail */
.prop-gallery{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-bottom:40px}
.prop-gallery-main{aspect-ratio:16/10;overflow:hidden;border-radius:3px}
.prop-gallery-main img,.prop-gallery-main video{width:100%;height:100%;object-fit:cover}
.prop-gallery-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prop-gallery-thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;cursor:pointer;opacity:.8;transition:opacity .2s}
.prop-gallery-thumbs img:hover{opacity:1}
.prop-map{height:360px;border-radius:3px;border:1px solid var(--border);margin-top:40px}
.prop-agents{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px}
.prop-agent{background:var(--navy2);border:1px solid var(--border2);padding:18px 22px;border-radius:3px;min-width:220px}
.prop-agent h5{color:#fff;margin-bottom:6px}
.prop-agent a{color:var(--gold);text-decoration:none;font-size:.85rem;display:block}
/* Filter / search form */
.search-panel{background:var(--navy2);border:1px solid var(--border2);padding:28px;border-radius:3px;margin-bottom:40px}
.search-panel .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.search-panel label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:6px}
.search-panel input,.search-panel select{width:100%;background:var(--navy);border:1px solid var(--border2);color:var(--text);padding:10px 12px;border-radius:2px;font-size:.85rem}
.search-panel input:focus,.search-panel select:focus{border-color:var(--gold);outline:none}
/* Admin minimal */
.admin-wrap{display:flex;min-height:100vh}
.admin-sidebar{width:240px;background:#0B1524;border-right:1px solid rgba(255,255,255,.07);padding:24px 0;flex-shrink:0}
.admin-sidebar a{display:block;padding:12px 24px;color:#8D9BAD;text-decoration:none;font-size:.85rem}
.admin-sidebar a:hover,.admin-sidebar a.active{color:#C9A84C;background:rgba(201,168,76,.08)}
.admin-main{flex:1;padding:32px;background:#111E30;color:#F0EDE8}
.admin-card{background:#162034;border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:24px;margin-bottom:20px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);font-size:.85rem}
.admin-table th{color:#8D9BAD;font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.btn-admin{background:#C9A84C;color:#0B1524;padding:8px 16px;border:none;border-radius:2px;font-size:.75rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:6px;font-size:.8rem;color:#8D9BAD}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;background:#0B1524;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:2px}
/* Property grid with gaps */
.property-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:20px;
margin-top:8px;
}
.property-card{
background:var(--navy2);
border:1px solid var(--border2);
border-radius:4px;
overflow:hidden;
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
transition:transform .25s,border-color .25s;
}
.property-card:hover{transform:translateY(-4px);border-color:var(--border)}
.property-card-img{height:180px;overflow:hidden}
.property-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.property-card:hover .property-card-img img{transform:scale(1.05)}
.property-card-body{padding:18px 20px}
.property-card-body h4{font-family:'Playfair Display',serif;font-size:1rem;color:#fff;margin:6px 0;line-height:1.3}
.property-meta{font-size:.75rem;color:var(--text-muted);margin-top:6px}
/* Hero slider - drag/swipe, no arrows/dots */
.hero-slider{
position:relative;
height:100vh;min-height:560px;
overflow:hidden;
touch-action:pan-y;
cursor:grab;
}
.hero-slider:active{cursor:grabbing}
.hero-track{
display:flex;
height:100%;
width:100%;
will-change:transform;
user-select:none;
}
.hero-slide{
min-width:100%;
height:100%;
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
flex-shrink:0;
}
.hero-slide-overlay{
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(11,21,36,.85) 0%,rgba(11,21,36,.45) 55%,rgba(11,21,36,.7) 100%);
}
.hero-slide-content{
position:relative;z-index:2;
padding:120px 60px 100px;
max-width:640px;
}
.hero-slide-content h1{
font-family:'Playfair Display',serif;
font-size:clamp(2.4rem,4.5vw,4rem);
font-weight:700;line-height:1.1;color:#fff;margin-bottom:20px;
}
.hero-slide-content h1 em{color:var(--gold);font-style:italic}
.hero-stats-bar{
position:absolute;bottom:40px;left:60px;
display:flex;gap:48px;z-index:3;
}
@media(max-width:900px){
.hero-slide-content{padding:100px 28px 90px}
.hero-stats-bar{left:28px;bottom:28px;gap:24px}
}
/* Force hamburger on mobile */
@media (max-width: 900px) {
.nav-links,
.nav-cta,
.nav-search {
display: none !important;
}
.hamburger {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
flex-shrink: 0;
}
.nav-right {
gap: 12px;
}
.lang-switch {
display: flex;
}
}
/* Hero: text left, image right ~45% */
.hero-slider {
position: relative;
height: 100vh;
min-height: 560px;
overflow: hidden;
touch-action: pan-y;
cursor: grab;
background: var(--navy);
}
.hero-slider:active { cursor: grabbing; }
.hero-track {
display: flex;
height: 100%;
width: 100%;
will-change: transform;
user-select: none;
}
.hero-slide {
min-width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: stretch;
flex-shrink: 0;
background: linear-gradient(135deg, #0B1524 0%, #0f1e38 45%, #162848 70%, #0B1524 100%);
}
.hero-slide-overlay {
display: none; /* not needed with split layout */
}
.hero-slide-content {
position: relative;
z-index: 3;
width: 55%;
max-width: 620px;
padding: 120px 48px 100px 60px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.hero-slide-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 45%;
overflow: hidden;
z-index: 1;
}
.hero-slide-image::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 120px;
background: linear-gradient(to right, #0B1524, transparent);
z-index: 2;
pointer-events: none;
}
.hero-slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
display: block;
}
.hero-slide-content h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 700;
line-height: 1.1;
color: #fff;
margin-bottom: 20px;
}
.hero-slide-content h1 em {
color: var(--gold);
font-style: italic;
}
.hero-stats-bar {
position: absolute;
bottom: 40px;
left: 60px;
display: flex;
gap: 48px;
z-index: 4;
}
@media (max-width: 900px) {
.hero-slide-image {
width: 100%;
opacity: 1;
}
.hero-slide-image img {
opacity: 0.25;
}
.hero-slide-image::before {
width: 100%;
background: linear-gradient(to top, #0B1524 10%, rgba(11,21,36,0.7) 50%, transparent 100%);
}
.hero-slide-content {
width: 100%;
max-width: 100%;
padding: 100px 28px 110px;
z-index: 3;
}
.hero-stats-bar {
left: 28px;
bottom: 28px;
gap: 24px;
}
}
/* Hero 100vh + net grid */
.hero-slider{
height:100vh !important;
min-height:100vh !important;
max-height:100vh;
position:relative;
overflow:hidden;
background:var(--navy);
}
.hero-slider .hero-bg{
position:absolute;inset:0;z-index:0;
background:linear-gradient(135deg,#0B1524 0%,#0f1e38 45%,#162848 70%,#0B1524 100%);
}
.hero-slider .hero-grid{
position:absolute;inset:0;z-index:1;opacity:0.04;pointer-events:none;
background-image:
linear-gradient(rgba(201,168,76,1) 1px,transparent 1px),
linear-gradient(90deg,rgba(201,168,76,1) 1px,transparent 1px);
background-size:60px 60px;
}
.hero-track{position:relative;z-index:2;height:100%;}
.hero-slide{
background:transparent !important;
min-height:100vh;
}
.hero-slide-image{
width:45% !important;
right:0;top:0;bottom:0;
position:absolute;
z-index:1;
}
.hero-slide-content{
width:55%;
max-width:620px;
position:relative;
z-index:3;
padding:120px 48px 100px 60px;
}
/* Floating: Call LEFT, WhatsApp RIGHT lower */
.floating-btns{display:none !important;}
.floating-left{
position:fixed;
left:24px;
bottom:28px;
z-index:150;
}
.floating-right-wa{
position:fixed;
right:24px;
bottom:28px;
z-index:150;
}
.call-dropdown-left{
left:0 !important;
right:auto !important;
bottom:60px;
}
.go-top{
right:24px !important;
bottom:90px !important;
}
/* Property Highlights – clean cards */
.prop-highlights{
margin-top:40px;
max-width:720px;
background:var(--navy2);
border:1px solid var(--border);
border-radius:4px;
padding:28px 32px;
}
.prop-highlights-title{
font-family:'Playfair Display',serif;
font-size:1.25rem;
color:#fff;
margin:0 0 18px;
padding-bottom:12px;
border-bottom:1px solid var(--border2);
}
.prop-highlights-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:0;
}
.prop-highlights-list li{
display:flex;
align-items:flex-start;
gap:14px;
padding:12px 0;
border-bottom:1px solid var(--border2);
color:var(--text);
font-size:0.92rem;
line-height:1.5;
}
.prop-highlights-list li:last-child{border-bottom:none;}
.prop-highlights-list .hl-icon{
color:var(--gold);
flex-shrink:0;
font-size:0.75rem;
margin-top:4px;
}
@media(max-width:900px){
.hero-slide-image{width:100% !important;}
.hero-slide-image img{opacity:0.22;}
.hero-slide-content{width:100%;max-width:100%;padding:100px 28px 110px;}
.floating-left{left:16px;bottom:24px;}
.floating-right-wa{right:16px;bottom:24px;}
.go-top{bottom:86px !important;right:16px !important;}
}
/* ===== HERO MATCH ORIGINAL TEMPLATE ===== */
.hero-slider{
height:100vh !important;
min-height:100vh !important;
max-height:none;
position:relative;
overflow:hidden;
background:#0B1524;
}
.hero-slider .hero-bg{
position:absolute;inset:0;z-index:0;
background:linear-gradient(135deg,#0B1524 0%,#0f1e38 45%,#162848 70%,#0B1524 100%);
}
.hero-slider .hero-grid{
position:absolute;inset:0;z-index:1;opacity:0.04;pointer-events:none;
background-image:
linear-gradient(rgba(201,168,76,1) 1px,transparent 1px),
linear-gradient(90deg,rgba(201,168,76,1) 1px,transparent 1px);
background-size:60px 60px;
}
.hero-track{
position:relative;z-index:2;
display:flex;height:100%;width:100%;
will-change:transform;user-select:none;
}
.hero-slide{
min-width:100%;
height:100%;
position:relative;
display:block !important;
background:transparent !important;
flex-shrink:0;
}
/* Right image ~42% like original */
.hero-slide-image{
position:absolute !important;
right:0 !important;top:0 !important;bottom:0 !important;
width:42% !important;
overflow:hidden;
z-index:1 !important;
}
.hero-slide-image::before{
content:'';
position:absolute;left:0;top:0;bottom:0;width:200px;
background:linear-gradient(to right,#0B1524,transparent);
z-index:2;pointer-events:none;
}
.hero-slide-image img{
width:100%;height:100%;object-fit:cover;
opacity:0.35 !important;
display:block;
}
/* Left content - match original padding */
.hero-slide-content{
position:relative !important;
z-index:3 !important;
width:auto !important;
max-width:600px !important;
padding:0 !important;
margin:0 !important;
top:50%;
transform:translateY(-50%);
left:60px;
display:block !important;
}
.hero-slide-content .hero-eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:0.7rem;font-weight:500;letter-spacing:0.22em;
text-transform:uppercase;color:var(--gold);margin-bottom:26px;
}
.hero-slide-content .hero-eyebrow::before{
content:'';display:block;width:26px;height:1px;background:var(--gold);
}
.hero-slide-content h1{
font-family:'Playfair Display',serif !important;
font-size:clamp(2.6rem,4.5vw,4.2rem) !important;
font-weight:700 !important;line-height:1.1 !important;
margin-bottom:22px !important;color:#fff !important;
}
.hero-slide-content h1 em{color:var(--gold)!important;font-style:italic!important}
.hero-slide-content .hero-sub{
font-size:0.98rem;color:var(--text-muted);line-height:1.8;
max-width:460px;margin-bottom:42px;font-weight:300;
}
.hero-slide-content .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
/* Stats - clear of left FAB (FAB is ~52px + 24px margin) */
.hero-stats-bar{
position:absolute !important;
bottom:56px !important;
left:90px !important; /* room for call FAB on left */
display:flex !important;
gap:48px !important;
z-index:4 !important;
}
.hero-stats-bar .stat-num{
font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:#fff;line-height:1;
}
.hero-stats-bar .stat-label{
font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
color:var(--text-muted);margin-top:5px;
}
/* Call LEFT, WhatsApp RIGHT - don't cover stats */
.floating-left{
position:fixed !important;
left:20px !important;
bottom:24px !important;
z-index:150 !important;
}
.floating-right-wa{
position:fixed !important;
right:20px !important;
bottom:24px !important;
z-index:150 !important;
}
.go-top{
right:20px !important;
bottom:88px !important;
}
@media(max-width:900px){
.hero-slide-image{display:none !important} /* original hid image on mobile */
.hero-slide-content{
left:28px !important;right:28px;max-width:100% !important;
top:45%;
}
.hero-stats-bar{
left:28px !important;bottom:100px !important; /* above FABs */
gap:28px !important;
}
.floating-left{bottom:20px;left:16px}
.floating-right-wa{bottom:20px;right:16px}
}
/* ========== FINAL HERO FIX ========== */
.hero-slider{
height:100vh !important;
min-height:100vh !important;
position:relative !important;
overflow:hidden !important;
background:#0B1524 !important;
}
.hero-slider .hero-bg{
position:absolute;inset:0;z-index:0;
background:linear-gradient(135deg,#0B1524 0%,#0f1e38 45%,#162848 70%,#0B1524 100%);
}
.hero-slider .hero-grid{
position:absolute;inset:0;z-index:1;opacity:0.04;pointer-events:none;
background-image:
linear-gradient(rgba(201,168,76,1) 1px,transparent 1px),
linear-gradient(90deg,rgba(201,168,76,1) 1px,transparent 1px);
background-size:60px 60px;
}
.hero-track{
position:absolute !important;
inset:0 !important;
z-index:2;
display:flex !important;
height:100% !important;
width:100% !important;
}
.hero-slide{
min-width:100% !important;
height:100% !important;
position:relative !important;
flex-shrink:0 !important;
background:transparent !important;
}
.hero-slide-image{
position:absolute !important;
right:0 !important; top:0 !important; bottom:0 !important;
width:42% !important;
overflow:hidden !important;
z-index:1 !important;
}
.hero-slide-image::before{
content:'' !important;
position:absolute !important;
left:0 !important; top:0 !important; bottom:0 !important;
width:180px !important;
background:linear-gradient(to right,#0B1524,transparent) !important;
z-index:2 !important; pointer-events:none !important;
}
.hero-slide-image img{
width:100% !important; height:100% !important;
object-fit:cover !important;
opacity:0.35 !important;
}
/* Content: centered in left area, ABOVE stats */
.hero-slide-content{
position:absolute !important;
left:60px !important;
right:auto !important;
top:0 !important;
bottom:130px !important; /* space for stats */
width:52% !important;
max-width:580px !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
transform:none !important;
padding:0 !important;
margin:0 !important;
z-index:3 !important;
box-sizing:border-box !important;
}
.hero-slide-content h1{
font-family:'Playfair Display',serif !important;
font-size:clamp(2.6rem,4.5vw,4.2rem) !important;
font-weight:700 !important;
line-height:1.1 !important;
color:#fff !important;
margin:0 0 22px !important;
}
.hero-slide-content h1 em{color:#C9A84C !important;font-style:italic !important}
.hero-slide-content .hero-sub{
font-size:0.98rem !important;
color:#8D9BAD !important;
line-height:1.8 !important;
max-width:460px !important;
margin:0 0 40px !important;
font-weight:300 !important;
}
.hero-slide-content .hero-actions{
display:flex !important;
gap:14px !important;
flex-wrap:wrap !important;
margin:0 !important;
}
/* Stats ONLY at bottom — never next to buttons */
.hero-stats-bar{
position:absolute !important;
left:60px !important;
bottom:48px !important;
top:auto !important;
display:flex !important;
gap:48px !important;
z-index:5 !important;
margin:0 !important;
padding:0 !important;
pointer-events:none;
}
.hero-stats-bar .stat-num{
font-family:'Playfair Display',serif !important;
font-size:2rem !important;
font-weight:700 !important;
color:#fff !important;
line-height:1 !important;
}
.hero-stats-bar .stat-label{
font-size:0.68rem !important;
letter-spacing:0.14em !important;
text-transform:uppercase !important;
color:#8D9BAD !important;
margin-top:5px !important;
}
/* FABs clear of marquee + stats */
.floating-left{
position:fixed !important;
left:20px !important;
bottom:70px !important; /* above marquee */
z-index:150 !important;
}
.floating-right-wa{
position:fixed !important;
right:20px !important;
bottom:70px !important;
z-index:150 !important;
}
.go-top{
right:20px !important;
bottom:130px !important;
}
/* ========== SQUARE LOADER (no letters) ========== */
#loader{
position:fixed;inset:0;background:#0B1524;z-index:9999;
display:flex;align-items:center;justify-content:center;
transition:opacity .5s,visibility .5s;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center}
.loader-logo{display:none !important}
.loader-bar{display:none !important}
.loader-box{
width:48px;height:48px;
position:relative;
}
.loader-box span{
position:absolute;
width:18px;height:18px;
background:#C9A84C;
animation:boxPulse 1.2s ease-in-out infinite;
}
.loader-box span:nth-child(1){top:0;left:0;animation-delay:0s}
.loader-box span:nth-child(2){top:0;right:0;animation-delay:0.2s}
.loader-box span:nth-child(3){bottom:0;right:0;animation-delay:0.4s}
.loader-box span:nth-child(4){bottom:0;left:0;animation-delay:0.6s}
@keyframes boxPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.25;transform:scale(0.75)}
}
@media(max-width:900px){
.hero-slide-image{display:none !important}
.hero-slide-content{
left:28px !important;
right:28px !important;
width:auto !important;
max-width:100% !important;
bottom:160px !important;
}
.hero-stats-bar{
left:28px !important;
bottom:56px !important;
gap:28px !important;
}
.floating-left,.floating-right-wa{bottom:80px !important}
}
/* Footer social icons */
.footer-social{
display:flex;
gap:12px;
margin-top:20px;
flex-wrap:wrap;
}
.footer-social .social-icon{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);
border-radius:2px;
color:var(--text-muted);
text-decoration:none;
transition:color .2s,border-color .2s,background .2s;
}
.footer-social .social-icon:hover{
color:var(--gold);
border-color:var(--gold);
background:rgba(201,168,76,.08);
}