* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Open Sans', sans-serif; line-height:1.6; color:#333; background:#f9f9f9; }

.container { max-width:1100px; margin:0 auto; padding:0 20px; }

header {
  background:#2c5282;
  color:white;
  padding:1rem 0;
  position:sticky; top:0; z-index:10;
}
header .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.logo-img { 
  height: 2rem; 
  width: auto; 
  display: block; 
}
nav ul { list-style:none; display:flex; gap:1.5rem; }
nav a { color:white; text-decoration:none; font-weight:600; }
nav a:hover { text-decoration:underline; }

.hero {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/hero-community-home.jpg');
  background-size:cover; background-position:center;
  color:white; text-align:center; padding:120px 20px;
}
.hero h1 { font-family:'Playfair Display', serif; font-size:3.5rem; margin-bottom:1rem; }
.lead { font-size:1.4rem; max-width:700px; margin:0 auto 2rem; }
.btn {
  display:inline-block; padding:0.9rem 2rem; border-radius:6px; text-decoration:none; font-weight:600; margin:0.5rem;
}
.primary { background:#38a169; color:white; }
.primary:hover { background:#2f855a; }
.secondary { background:#ecc94b; color:#2d3748; }

.section { padding:80px 0; }
h2 { font-family:'Playfair Display', serif; font-size:2.8rem; text-align:center; margin-bottom:2rem; color:#2c5282; }

.mission-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:2rem; margin-top:3rem; }
.card { background:white; padding:2rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); text-align:center; }

.cta-section { background:#2c5282; color:white; text-align:center; }
.cta-section h2 { color:white; }
.involved-options { display:flex; flex-wrap:wrap; justify-content:center; gap:3rem; margin-top:3rem; }
.option { max-width:400px; }

footer { background:#2d3748; color:#cbd5e0; text-align:center; padding:2rem 0; font-size:0.9rem; }
footer a { color:#a0aec0; text-decoration:none; margin:0 0.8rem; }
footer a:hover { color:white; }

/* Mobile */
@media (max-width:768px) {
  header .container { flex-direction:column; gap:1rem; }
  nav ul { flex-direction:column; align-items:center; }
  .hero { padding:80px 20px; }
  .hero h1 { font-size:2.8rem; }
}