.portfolio-page{background:#f3f6f3}
.portfolio-hero{padding:82px max(24px,calc((100vw - var(--max))/2)) 72px;background:var(--charcoal);color:#fff;border-bottom:8px solid var(--green)}
.portfolio-hero h1{max-width:900px;margin:0 0 24px;font-size:clamp(48px,7vw,82px);line-height:.9;letter-spacing:-3px;font-weight:1000;font-style:italic}
.portfolio-hero h1 span{color:var(--green)}
.portfolio-hero p{max-width:680px;margin:0;color:#d8e0da;font-size:19px}
.portfolio-gallery{padding:76px max(24px,calc((100vw - var(--max))/2)) 96px}
.portfolio-note{display:flex;align-items:center;gap:12px;margin:0 0 42px;padding:16px 18px;background:#fff;border-left:6px solid var(--green);color:#354039;font-size:15px}
.project-list{display:grid;gap:42px}
.project-card{overflow:hidden;background:#fff;border:1px solid #d7ded8;box-shadow:0 16px 38px rgba(10,22,12,.08)}
.project-heading{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#0b100c;color:#fff}
.project-heading span{display:grid;place-items:center;width:38px;height:38px;flex:none;background:var(--green);color:#081007;font-size:13px;font-weight:1000}
.project-heading h2{margin:0;font-size:clamp(23px,3vw,31px);line-height:1;font-style:italic;letter-spacing:-.5px}
.comparison{display:grid;grid-template-columns:1fr 1fr}
.comparison figure{margin:0;min-width:0}
.comparison figure+figure{border-left:4px solid #fff}
.comparison figcaption{padding:10px 16px;background:#253027;color:#fff;font-size:13px;font-weight:1000;letter-spacing:2px}
.comparison figure:last-child figcaption{background:var(--green);color:#071007}
.comparison img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.portfolio-cta{display:flex;align-items:center;justify-content:space-between;gap:36px;margin-top:50px;padding:34px;background:var(--green);color:#071007}
.portfolio-cta h2{margin:0;font-size:clamp(28px,4vw,44px);line-height:.95;font-style:italic}
.portfolio-cta a{flex:none;padding:18px 24px;background:#070b08;color:#fff;text-decoration:none;font-weight:1000}
@media(max-width:700px){
  .portfolio-hero{padding-top:58px}
  .comparison{grid-template-columns:1fr}
  .comparison figure+figure{border-left:0;border-top:4px solid #fff}
  .portfolio-cta{align-items:stretch;flex-direction:column}
  .portfolio-cta a{text-align:center}
}