<section id="projects">
  <div class="container">
    <div class="projects-header fade-up">
      <div class="section-eyebrow">Portfolio</div>
      <h2>Featured Projects</h2>
      <p style="color: var(--stone); font-size:15px; margin-bottom:0; margin-top:8px;">A selection of our most impactful completed and ongoing work.</p>
    </div>
    <div class="projects-filters fade-up">
      <button class="filter-btn active" onclick="filterProjects('all', this)">All</button>
      <button class="filter-btn" onclick="filterProjects('residential', this)">Residential</button>
      <button class="filter-btn" onclick="filterProjects('commercial', this)">Commercial</button>
      <button class="filter-btn" onclick="filterProjects('infrastructure', this)">Infrastructure</button>
      <button class="filter-btn" onclick="filterProjects('renovation', this)">Renovation</button>
    </div>
    <div class="projects-grid" id="projectsGrid">
      <div class="project-card featured" data-cat="commercial" style="background: url('assets/image (1).jpg') center/cover;">
        <div class="project-status status-completed">Completed</div>
        <div class="project-bottom"><div class="project-cat">Commercial</div><div class="project-name">Kigali Business Tower</div><div class="project-meta">Kigali, Rwanda · Oct 2023</div></div>
        <div class="project-overlay"><p style="color:var(--stone-light); font-size:13px;">18-storey Class A office tower with LEED Silver certification.</p></div>
      </div>
      <div class="project-card" data-cat="residential" style="background: url('assets/image (2).jpg') center/cover;">
        <div class="project-status status-completed">Completed</div>
        <div class="project-bottom"><div class="project-cat">Residential</div><div class="project-name">Gacuriro Estate Phase II</div><div class="project-meta">Gasabo, Rwanda · 2023</div></div>
        <div class="project-overlay"><p style="color:var(--stone-light); font-size:13px;">120-unit residential estate with sustainable design.</p></div>
      </div>
      <div class="project-card" data-cat="infrastructure" style="background: url('assets/image (3).jpg') center/cover;">
        <div class="project-status status-ongoing">Ongoing</div>
        <div class="project-bottom"><div class="project-cat">Infrastructure</div><div class="project-name">Northern Bypass Road</div><div class="project-meta">Musanze, Rwanda · 2024</div></div>
      </div>
      <div class="project-card" data-cat="commercial" style="background: url('assets/image (4).jpg') center/cover;">
        <div class="project-status status-completed">Completed</div>
        <div class="project-bottom"><div class="project-cat">Commercial</div><div class="project-name">Remera Shopping Mall</div><div class="project-meta">Kigali, Rwanda · 2022</div></div>
      </div>
      <div class="project-card" data-cat="renovation" style="background: url('assets/image (5).jpg') center/cover;">
        <div class="project-status status-completed">Completed</div>
        <div class="project-bottom"><div class="project-cat">Renovation</div><div class="project-name">Hotel des Mille Collines Refurb</div><div class="project-meta">Kigali, Rwanda · 2022</div></div>
      </div>
      <div class="project-card featured" data-cat="residential" style="background: url('assets/image (6).jpg') center/cover;">
        <div class="project-status status-ongoing">Ongoing</div>
        <div class="project-bottom"><div class="project-cat">Residential</div><div class="project-name">Nyarutarama Luxury Villas</div><div class="project-meta">Kigali, Rwanda · Due 2025</div></div>
      </div>
    </div>
  </div>
</section>

<style>
#projects { 
  padding: 120px 0; 
  background: var(--white); /* Changed to white background */
}
.projects-header { 
  margin-bottom: 24px; 
}
.projects-header h2 { 
  font-size: clamp(48px, 5vw, 72px); 
  color: var(--charcoal); /* Dark text for white background */
  margin-bottom: 8px; 
}
.projects-header p {
  color: var(--stone) !important;
}
.projects-filters { 
  display: flex; 
  gap: 12px; 
  margin-bottom: 48px; 
  flex-wrap: wrap; 
}
.filter-btn {
  background: transparent; 
  border: 1px solid var(--gold); /* Gold border for better visibility on white */
  color: var(--gold);
  padding: 8px 24px; 
  font-family: 'DM Sans', sans-serif; 
  font-size: 12px;
  font-weight: 500; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  cursor: pointer;
  transition: all var(--transition);
  border-radius: 30px;
}
.filter-btn:hover, .filter-btn.active { 
  background: var(--gold); 
  border-color: var(--gold); 
  color: var(--charcoal); 
}
.projects-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; /* Increased gap for better spacing on white background */
}
.project-card {
  position: relative; 
  aspect-ratio: 4/3; 
  overflow: hidden; 
  cursor: pointer;
  background-size: cover; 
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.project-card.featured { 
  grid-column: span 2; 
}
.project-bottom {
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  border-radius: 0 0 8px 8px;
}
.project-cat { 
  font-size: 10px; 
  font-weight: 600; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--gold); 
  margin-bottom: 6px; 
}
.project-name { 
  font-family: 'Bebas Neue', sans-serif; 
  font-size: 22px; 
  color: var(--white); 
  letter-spacing: 0.05em; 
}
.project-meta { 
  font-size: 12px; 
  color: var(--stone-light); 
  margin-top: 4px; 
}
.project-status { 
  position: absolute; 
  top: 16px; 
  right: 16px; 
  padding: 4px 12px; 
  font-size: 10px; 
  font-weight: 600; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  border-radius: 20px;
  z-index: 2;
}
.status-completed { 
  background: rgba(200,169,110,0.9); 
  color: var(--charcoal); 
}
.status-ongoing { 
  background: rgba(255,255,255,0.2); 
  color: var(--white); 
  backdrop-filter: blur(4px);
}
.project-overlay {
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  opacity: 0; 
  transition: opacity var(--transition); 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  padding: 32px;
  border-radius: 8px;
}
.project-card:hover .project-overlay { 
  opacity: 1; 
}
/* Update eyebrow for white background */
#projects .section-eyebrow {
  color: var(--gold);
}
#projects .section-eyebrow::before {
  background: var(--gold);
}
@media (max-width: 1024px) { 
  .projects-grid { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
  } 
  .project-card.featured { 
    grid-column: span 1; 
  } 
}
@media (max-width: 768px) { 
  .projects-grid { 
    grid-template-columns: 1fr; 
  } 
  .project-card.featured { 
    grid-column: auto; 
  }
  .projects-filters {
    gap: 8px;
  }
  .filter-btn {
    padding: 6px 16px;
    font-size: 10px;
  }
}
</style>