/* =========================================================================
   SOLAR ENERGY — page: projects
   Gallery-led. A hero case study with big numbers, then the filterable
   grid, then a service-area board of 3D tiles.
   ========================================================================= */

/* ---------------- featured case study ---------------- */
.case { background: var(--paper); }
.case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
  margin-top: 1rem;
}
.case__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transform-style: preserve-3d;
}
.case__media img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.case__media:hover img { transform: scale(1.05); }
.case__badge {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  padding: .5rem 1.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #2A1803;
  background: var(--grad-sun);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sun);
}

.case__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-block: 2rem;
  padding-block: 1.75rem;
  border-block: 1px solid var(--line);
}
.case-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.case-stat__value span:last-child { font-size: .5em; margin-left: .1em; color: var(--sun-ink); }
.case-stat__label {
  margin-top: .45rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------------- gallery ---------------- */
.projects { background: var(--paper-2); }

/* ---------------- service area board ---------------- */
.area__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.area__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
  perspective: 900px;
}
.area__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-md);
  transform-style: preserve-3d;
  transition: background .35s, border-color .35s;
}
.area__list li:hover { background: rgba(255,255,255,.09); border-color: rgba(255,176,32,.32); }
.area__list strong {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: #fff;
}
.area__list span {
  font-size: .84rem;
  color: var(--sun-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cta-band__lead {
  max-width: 54ch;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
  color: rgba(42,24,3,.78);
}

@media (max-width: 980px) {
  .case__grid,
  .area__grid { grid-template-columns: 1fr; }
  .case__media { max-width: 620px; }
  .case__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .area__list { grid-template-columns: 1fr; }
}