.projects-main { min-width: 0; }
.projects-hero { position: relative; min-height: min(740px, calc(100vh - 82px)); overflow: hidden; display: grid; align-items: end; background: #0b3628; color: #fff; }
.projects-hero > img, .projects-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.projects-hero > img { object-fit: cover; object-position: center; }
.projects-hero-overlay { background: linear-gradient(90deg, rgba(4, 41, 29, .88) 0%, rgba(4, 41, 29, .60) 42%, rgba(4, 41, 29, .11) 76%), linear-gradient(0deg, rgba(4, 31, 23, .43), transparent 50%); }
.projects-hero-content { position: relative; z-index: 1; padding: 112px 0 92px; }
.projects-hero .section-kicker { color: #b7f1cd; }
.projects-hero h1 { max-width: 720px; margin: 0 0 26px; font-size: clamp(50px, 5.35vw, 80px); line-height: 1.12; }
.projects-hero p:not(.section-kicker) { max-width: 600px; margin: 0; color: rgba(255,255,255,.83); font-size: 18px; line-height: 2; }
.projects-anchor-bar { z-index: 30; }
.projects-intro { padding: 132px 0 0; scroll-margin-top: 140px; }
.projects-intro-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); gap: clamp(70px, 10vw, 160px); align-items: end; }
.projects-intro h2, .project-feature h2, .projects-closing h2 { margin: 0; color: #102f26; font-size: clamp(40px, 4.2vw, 62px); line-height: 1.18; }
.projects-intro-grid > p { max-width: 520px; margin: 0 0 4px; color: var(--muted); font-size: 17px; line-height: 2; }
.projects-flow { display: flex; align-items: center; margin-top: 78px; padding: 32px 0; border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); }
.projects-flow div { display: grid; min-width: 0; gap: 8px; }
.projects-flow b { color: #87bda0; font-size: 13px; }
.projects-flow span { color: #173a2f; font-size: 20px; font-weight: 800; white-space: nowrap; }
.projects-flow i { flex: 1; min-width: 34px; height: .5px; margin: 0 22px; background: #8fbda2; }
.project-feature { padding: 132px 0; scroll-margin-top: 140px; }
.project-feature-tone { background: #f4f8f6; }
.project-feature-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.project-feature-reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.project-feature-copy > p:not(.section-kicker) { max-width: 440px; margin: 24px 0 42px; color: var(--muted); font-size: 17px; line-height: 2; }
.project-feature figure { margin: 0; overflow: hidden; }
.project-feature figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.project-feature figure:hover img { transform: scale(1.025); }
.project-feature-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 460px; margin: 0; border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); }
.project-feature-copy dl div { padding: 18px 18px 18px 0; }
.project-feature-copy dl div + div { padding-left: 18px; border-left: .5px solid var(--line); }
.project-feature-copy dt { margin: 0 0 6px; color: var(--green); font-size: 17px; font-weight: 800; }
.project-feature-copy dd { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.projects-closing { padding: 124px 0; background: #0d6342; color: #fff; }
.projects-closing p { margin: 0 0 14px; color: #b7f1cd; font-size: 14px; font-weight: 800; }
.projects-closing h2 { color: #fff; margin-bottom: 34px; }
.projects-closing a { display: inline-flex; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: .5px solid rgba(255,255,255,.7); font-weight: 800; }
.projects-closing a span { font-size: 20px; }
@media (max-width: 980px) {
  .projects-intro-grid, .project-feature-grid, .project-feature-reverse { grid-template-columns: 1fr; }
  .projects-intro-grid { gap: 32px; }
  .project-feature { padding: 88px 0; }
  .project-feature-reverse figure { order: 2; }
  .projects-flow { overflow-x: auto; }
  .projects-flow div { flex: 0 0 auto; }
}
@media (max-width: 620px) {
  .projects-hero { min-height: 620px; }
  .projects-hero-content { padding: 86px 0 62px; }
  .projects-hero h1 { font-size: 46px; }
  .projects-hero p:not(.section-kicker), .projects-intro-grid > p, .project-feature-copy > p:not(.section-kicker) { font-size: 16px; }
  .projects-intro { padding-top: 84px; }
  .projects-flow { margin-top: 54px; }
  .projects-flow span { font-size: 17px; }
  .projects-flow i { min-width: 22px; margin: 0 14px; }
  .project-feature h2, .projects-intro h2 { font-size: 38px; }
  .project-feature-copy dl { max-width: none; }
  .projects-closing { padding: 82px 0; }
}