* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', sans-serif; line-height:1.6; color:#333; background:#f8f9fa; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
h1, h2 { font-family:'Playfair Display', serif; }
a { text-decoration:none; }

/* Nav */
.sticky-nav { position:sticky; top:0; background:white; box-shadow:0 2px 10px rgba(0,0,0,0.1); z-index:100; }
.nav-content { display:flex; justify-content:space-between; align-items:center; padding:15px 0; }
.logo { font-size:1.5rem; font-weight:600; color:#0d9488; }
.sticky-nav ul { display:flex; gap:30px; list-style:none; }
.sticky-nav a { color:#333; font-weight:500; transition:0.3s; }
.sticky-nav a:hover { color:#0d9488; }

/* Hero */
.hero { background:url('../images/hero.jpg') center/cover no-repeat; height:100vh; min-height:600px; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; color:white; }
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); }
.hero-text { position:relative; z-index:2; max-width:800px; }
.hero h1 { font-size:4.5rem; margin-bottom:10px; }
.tagline { font-size:2rem; margin:20px 0; }
.cta-button { display:inline-block; background:#0d9488; color:white; padding:15px 30px; border-radius:50px; font-size:1.2rem; margin-top:20px; transition:0.3s; }
.cta-button:hover { background:#11766d; transform:scale(1.05); }
.cta-button.small { padding:12px 25px; font-size:1rem; }
.cta-button.secondary { background:#fff; color:#0d9488; border:2px solid #0d9488; margin-left:15px; }

/* Sections */
.card { background:white; padding:60px; margin:40px 0; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.08); }
.unit-grid { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; justify-items:center; /* Centers images */ }
.gallery-grid img { width:100%; max-width:400px; height:auto; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.1); transition:0.4s; object-fit:cover; }
.gallery-grid img:hover { transform:scale(1.05); box-shadow:0 10px 25px rgba(0,0,0,0.2); }

.amenities-list { columns:2; gap:40px; list-style:none; }
.amenities-list li { padding:10px 0 10px 30px; position:relative; }
.amenities-list li::before { content:"✓"; position:absolute; left:0; color:#0d9488; font-weight:bold; }

.review-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:30px; }
.review { background:#f0f9f8; padding:30px; border-radius:12px; border-left:5px solid #0d9488; }
.review blockquote { font-style:italic; font-size:1.1rem; margin-bottom:15px; }
.review cite { display:block; text-align:right; color:#666; font-size:0.9rem; }

.phone { font-size:2.5rem; color:#0d9488; margin:20px 0; }

/* Footer */
footer { background:#0d9488; color:white; text-align:center; padding:40px; }

/* Mobile Fixes */
@media (max-width:900px) {
    .unit-grid { grid-template-columns:1fr; text-align:center; }
}

@media (max-width:768px) {
    .hero h1 { font-size:3rem; }
    .tagline { font-size:1.5rem; }
    .cta-button { padding:12px 24px; font-size:1rem; }

    /* Compact Nav – less height */
    .nav-content { padding:10px 0; flex-wrap:wrap; justify-content:center; }
    .logo { font-size:1.3rem; margin-bottom:10px; }
    .sticky-nav ul { gap:15px; flex-wrap:wrap; justify-content:center; font-size:0.95rem; }

    /* Gallery centering & tighter */
    .gallery-grid { gap:15px; }
    .gallery-grid img { max-width:100%; }

    /* Card padding reduction */
    .card { padding:40px 20px; margin:20px 0; }

    /* Reviews single column */
    .review-grid { grid-template-columns:1fr; }
}

@media (max-width:480px) {
    .sticky-nav ul { gap:10px; font-size:0.9rem; }
    .nav-content { padding:8px 0; }
}