/* --- Variables & Reset --- */
:root {
    --primary: #1a3c5e; /* Deep Coastal Blue */
    --accent: #c9a57c;  /* Warm Sand/Gold */
    --text: #444;
    --light: #fafaf8;
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--body-font); color: var(--text); line-height: 1.7; background-color: white; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* --- Typography --- */
h1, h2, h3 { font-family: var(--heading-font); color: var(--primary); font-weight: 500; }
h1 { font-size: 3.5rem; margin-bottom: 1rem; }
h2 { font-size: 2.8rem; margin-bottom: 1.5rem; text-align: center; }
h3 { font-size: 2.2rem; margin-bottom: 1rem; }
p { margin-bottom: 1.5rem; font-size: 1.1rem; color: #555; }

/* --- Header & Nav --- */
.main-header { background: white; padding: 1.5rem 0; box-shadow: 0 2px 20px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.logo { font-family: var(--heading-font); font-size: 1.8rem; color: var(--primary); font-weight: 700; }
.nav-links { list-style: none; display: flex; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text); font-weight: 500; transition: color 0.3s; }
.nav-links a:hover { color: var(--primary); }

.btn-portal { background-color: var(--primary); color: white !important; padding: 10px 20px; border-radius: 4px; font-size: 0.95rem; }
.btn-portal:hover { background-color: #245179; }

/* --- Hero (Image 0) --- */
.hero { height: 85vh; background-size: cover; background-position: center; background-attachment: fixed; position: relative; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 110%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0) 70%); display: flex; align-items: center; }
.hero-content { max-width: 600px; padding-left: 10%; }

/* --- Intro --- */
.community-intro { padding: 100px 0; background-color: var(--light); text-align: center; }
.community-intro p { max-width: 800px; margin-left: auto; margin-right: auto; }

/* --- Lifestyle (Image 1 Split) --- */
.lifestyle-feature { background: white; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.feature-image { background-size: cover; background-position: center; }
.feature-text { display: flex; align-items: center; justify-content: center; padding: 10%; background-color: white; }
.text-content { max-width: 500px; }
.text-content h3 { color: var(--accent); }

/* --- Footer --- */
.main-footer { background-color: var(--primary); color: white; padding: 50px 0; margin-top: auto; font-size: 0.95rem; }
.footer-flex { display: flex; justify-content: space-between; align-items: center; }
.portal-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .hero-content { padding: 0 20px; text-align: center; }
    .hero-overlay { background: rgba(255,255,255,0.7); width: 100%; }
    .nav-links { display: none; } /* Simple hide for demo */
    .feature-grid { grid-template-columns: 1fr; }
    .feature-image { min-height: 300px; }
}