:root { --gold:#C5A069; --navy:#0B1C3C; --teal:#2A9D8F; --cream:#FDFBF7; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--cream); margin:0; color:var(--navy); overflow-x:hidden; font-family:'Inter',sans-serif; -webkit-tap-highlight-color:transparent; }

/* ── HEADER ── */
header { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:1.5rem 0; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); }
header.scrolled { background:rgba(253,251,247,0.97); backdrop-filter:blur(20px); padding:0.75rem 0; box-shadow:0 1px 0 rgba(11,28,60,0.06),0 8px 30px rgba(11,28,60,0.04); }
header.scrolled .logo-text { color:var(--navy); }
header.scrolled .btn-discover { color:var(--navy); border-color:rgba(11,28,60,0.2); }
.logo-text { color:white; }
.btn-discover { border:1px solid rgba(255,255,255,0.4); color:white; padding:10px 24px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; display:flex; align-items:center; gap:10px; transition:all 0.3s ease; background:transparent; cursor:pointer; }
.btn-book { background:var(--gold); color:white; padding:11px 26px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border:none; cursor:pointer; transition:all 0.3s ease; white-space:nowrap; text-decoration:none; display:inline-block; }
.btn-book:hover { background:#b8925a; transform:translateY(-1px); box-shadow:0 8px 24px rgba(197,160,105,0.4); }
.burger-icon { width:18px; height:10px; display:flex; flex-direction:column; justify-content:space-between; }
.burger-icon span { display:block; height:1.5px; width:100%; background:currentColor; }

/* ── NAV OVERLAY ── */
#nav-overlay { transition:opacity 0.5s ease,visibility 0.5s; opacity:0; visibility:hidden; }
#nav-overlay.active { opacity:1; visibility:visible; }
.nav-link { font-size:clamp(2rem,5vw,3.5rem); transition:all 0.4s ease; text-align:center; width:100%; font-family:'Playfair Display',serif; color:white; text-decoration:none; }
.nav-link:hover { color:var(--gold); letter-spacing:0.05em; }

/* ── PAGE HERO ── */
.page-hero {
    position:relative;
    height:55vh;
    min-height:380px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}
.page-hero-bg {
    position:absolute; inset:0;
    background:linear-gradient(rgba(11,28,60,0.3),rgba(11,28,60,0.7)),
        url('https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?auto=format&fit=crop&w=1920&q=80') center/cover;
    transform:scale(1.04);
    transition:transform 8s ease;
}
.page-hero:hover .page-hero-bg { transform:scale(1); }
.page-hero-content { position:relative; z-index:2; max-width:1300px; width:100%; margin:0 auto; padding:0 2rem 3.5rem; color:white; }
.page-eyebrow { font-size:10px; font-weight:800; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; opacity:0; animation:fadeUp 0.7s ease 0.2s forwards; }
.page-title { font-family:'Playfair Display',serif; font-size:clamp(2.5rem,6vw,5rem); font-weight:700; line-height:1.05; margin:0 0 1rem; opacity:0; animation:fadeUp 0.7s ease 0.35s forwards; }
.page-title em { font-style:italic; font-weight:400; color:var(--gold); }
.page-subtitle { font-size:15px; color:rgba(255,255,255,0.7); max-width:520px; line-height:1.7; opacity:0; animation:fadeUp 0.7s ease 0.5s forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.page-eyebrow, .page-title, .page-subtitle { transform:translateY(20px); }

/* ── FILTER BAR ── */
.filter-bar { background:white; border-bottom:1px solid rgba(11,28,60,0.06); position:sticky; top:72px; z-index:100; }
.filter-inner { max-width:1300px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; gap:0.75rem; overflow-x:auto; scrollbar-width:none; height:64px; }
.filter-inner::-webkit-scrollbar { display:none; }
.filter-pill { padding:8px 18px; border-radius:100px; font-size:12px; font-weight:700; letter-spacing:0.05em; cursor:pointer; white-space:nowrap; border:1.5px solid rgba(11,28,60,0.12); color:rgba(11,28,60,0.5); background:white; transition:all 0.2s ease; }
.filter-pill:hover { border-color:var(--gold); color:var(--gold); }
.filter-pill.active { background:var(--navy); color:white; border-color:var(--navy); }
.filter-count { margin-left:auto; font-size:12px; color:#94a3b8; font-weight:600; white-space:nowrap; padding-left:1rem; border-left:1px solid #f1f5f9; }

/* ── RESIDENCES GRID ── */
.residences-section { max-width:1300px; margin:0 auto; padding:4rem 2rem 6rem; }
.residences-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:2rem; }
@media (max-width:480px) { .residences-grid { grid-template-columns:1fr; } }

/* ── PROPERTY CARD ── */
.prop-card {
    background:white;
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(11,28,60,0.06);
    cursor:pointer;
    position:relative;
    transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.4s ease;
    text-decoration:none;
    color:inherit;
    display:block;
}
.prop-card:hover {
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(11,28,60,0.13);
}
.prop-img-wrap { position:relative; height:260px; overflow:hidden; }
.prop-img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.prop-card:hover .prop-img { transform:scale(1.08); }
.prop-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(11,28,60,0.75) 0%, transparent 60%);
    opacity:0; transition:opacity 0.4s ease;
    display:flex; align-items:flex-end; padding:1.5rem;
}
.prop-card:hover .prop-overlay { opacity:1; }
.prop-overlay-cta {
    display:flex; align-items:center; gap:8px;
    color:white; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    transform:translateY(10px); transition:transform 0.35s ease 0.05s;
}
.prop-card:hover .prop-overlay-cta { transform:translateY(0); }
.prop-overlay-cta svg { transition:transform 0.3s ease; }
.prop-card:hover .prop-overlay-cta svg { transform:translateX(4px); }
.prop-badge-wrap { position:absolute; top:1rem; left:1rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
.prop-badge { padding:5px 12px; border-radius:100px; font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; backdrop-filter:blur(8px); }
.badge-featured { background:var(--gold); color:white; }
.badge-new { background:var(--teal); color:white; }
.badge-popular { background:rgba(255,255,255,0.9); color:var(--navy); }
.prop-wishlist {
    position:absolute; top:1rem; right:1rem;
    width:36px; height:36px;
    background:rgba(255,255,255,0.9);
    border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.25s ease; backdrop-filter:blur(8px);
}
.prop-wishlist:hover { background:white; transform:scale(1.1); }
.prop-wishlist.liked svg { fill:#ef4444; stroke:#ef4444; }
.prop-body { padding:1.5rem; }
.prop-location { font-size:10px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.4rem; }
.prop-name { font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:700; color:var(--navy); margin-bottom:0.5rem; line-height:1.2; }
.prop-desc { font-size:13px; color:#64748b; line-height:1.6; margin-bottom:1.25rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prop-stats { display:flex; gap:1.25rem; padding:1rem 0; border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9; margin-bottom:1.25rem; }
.prop-stat-item { display:flex; flex-direction:column; gap:2px; }
.prop-stat-label { font-size:9px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:#94a3b8; }
.prop-stat-val { font-size:13px; font-weight:700; color:var(--navy); }
.prop-footer { display:flex; align-items:center; justify-content:space-between; }
.prop-price-label { font-size:9px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:#94a3b8; margin-bottom:2px; }
.prop-price-val { font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:700; color:var(--navy); }
.prop-price-per { font-size:11px; color:#94a3b8; font-weight:500; }
.prop-cta {
    width:38px; height:38px; border-radius:50%;
    background:var(--navy); color:white; border:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.3s ease; flex-shrink:0;
}
.prop-card:hover .prop-cta { background:var(--gold); transform:scale(1.1); }
.prop-rating { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--navy); }
.prop-rating-star { color:var(--gold); }
.prop-rating-count { color:#94a3b8; font-weight:500; font-size:11px; }
.prop-card.unavailable { opacity:0.6; }
.prop-card.unavailable:hover { transform:none; box-shadow:none; }
.badge-unavailable { background:rgba(0,0,0,0.6); color:rgba(255,255,255,0.7); }
.prop-card { opacity:0; transform:translateY(30px); }
.prop-card.visible { animation:cardIn 0.6s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
@keyframes cardIn { to { opacity:1; transform:translateY(0); } }
.empty-state { text-align:center; padding:6rem 2rem; display:none; }
.empty-state.active { display:block; }

/* ── FOOTER ── */
footer { background:var(--navy); color:white; }
.footer-top { max-width:1300px; margin:0 auto; padding:5rem 2rem 3rem; display:grid; gap:3rem; }
@media (min-width:768px) { .footer-top { grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-brand-desc { font-size:13px; color:rgba(255,255,255,0.45); line-height:1.8; margin-top:1rem; max-width:280px; }
.footer-col-title { font-size:10px; font-weight:800; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.footer-link { display:block; font-size:13px; color:rgba(255,255,255,0.5); text-decoration:none; margin-bottom:0.75rem; transition:color 0.2s; }
.footer-link:hover { color:white; }
.footer-divider { border-top:1px solid rgba(255,255,255,0.07); }
.footer-bottom { max-width:1300px; margin:0 auto; padding:1.5rem 2rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.footer-bottom-text { font-size:11px; color:rgba(255,255,255,0.25); }
.footer-social-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); text-decoration:none; font-size:13px; transition:all 0.2s; }
.footer-social-btn:hover { background:var(--gold); border-color:var(--gold); color:white; }

/* ── SORT CONTROL ── */
.sort-wrap { display:flex; align-items:center; gap:0.5rem; margin-left:auto; white-space:nowrap; }
.sort-label { font-size:10px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:#64748b; }
.sort-select { border:1.5px solid rgba(11,28,60,0.12); border-radius:100px; background:white; color:var(--navy); font-family:'Inter',sans-serif; font-size:12px; font-weight:600; padding:7px 12px; cursor:pointer; transition:border-color 0.2s; min-height:36px; }
.sort-select:hover, .sort-select:focus { border-color:var(--gold); outline:none; }
.sort-wrap + .filter-count { margin-left:0; }

/* ── ACCESSIBILITY & CONTRAST POLISH ── */
:root { --gold-text:#8A6B3B; }
.prop-location { color:var(--gold-text); }
.footer-link { color:rgba(255,255,255,0.72); }
.footer-bottom-text { color:rgba(255,255,255,0.55); }
.footer-brand-desc { color:rgba(255,255,255,0.65); }
a:focus-visible, button:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.prop-card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    html { scroll-behavior:auto !important; }
    .page-eyebrow, .page-title, .page-subtitle { opacity:1; transform:none; animation:none; }
    .prop-card { opacity:1; transform:none; }
}

/* == Motion & micro-interactions == */
button,a{touch-action:manipulation;}
.btn-book:active,.btn-discover:active,.filter-pill:active,.prop-cta:active,.prop-wishlist:active{transform:scale(.95);}
.prop-card:active{transform:translateY(-4px) scale(.995);}