.portfolio{--project-width:600px;--portfolio-inset:max(var(--page-gutter),calc((100vw - var(--content-width))/2));position:relative;z-index:2;background:#C2CCD6;padding:100px 0;color:#272D40;overflow:hidden}
.portfolio-heading{max-width:var(--content-width);margin:0 auto 68px;padding:0 var(--page-gutter);box-sizing:content-box;display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.portfolio-heading h2{font-size:clamp(32px,3.1vw,48px);line-height:1.04;letter-spacing:-.055em;font-weight:600;margin:0 40px}
.portfolio-controls{display:flex;align-items:center;gap:24px;margin-right:40px;flex-shrink:0;font-size:24px}
.portfolio-controls button{display:grid;place-items:center;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;font:300 32px/1 Manrope, sans-serif;cursor:pointer;padding:0}
.portfolio-controls button img{display:block;width:24px;height:24px}
.portfolio-controls button:disabled{opacity:.3;cursor:default}
.portfolio-controls button:focus-visible,.portfolio-track:focus-visible{outline:2px solid #D58924;outline-offset:4px}
.portfolio-count{min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.portfolio-track{--project-gap:22px;display:flex;gap:var(--project-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--portfolio-inset);padding:0 var(--portfolio-inset);scrollbar-width:none}
.portfolio-track::-webkit-scrollbar{display:none}
.portfolio-track::after{content:"";flex:0 0 max(0px,calc(100vw - 2 * var(--portfolio-inset) - var(--project-width) - var(--project-gap)))}
.portfolio-track.is-looped::after{display:none}
.project-card{flex:0 0 var(--project-width);box-sizing:border-box;min-width:0;background:#FAFAFA;border-radius:24px;padding:11px;scroll-snap-align:start;display:flex;flex-direction:column}
.project-summary{display:flex;gap:32px;min-height:0;padding:30px 32px 0}
.project-copy{flex:1;min-width:0}
.project-city{display:flex;align-items:center;gap:7px;color:#D58924;font-size:18px;margin:12px 0 20px}
.project-city svg{width:20px;height:22px;flex:none}
.project-copy h3{font-size:27px;line-height:1.15;letter-spacing:-.05em;color:#222;margin:0 0 16px;font-weight:650}
.project-description{font-size:18px;line-height:1.3;letter-spacing:-.025em;margin:0}
.project-logo{width:100px;height:140px;object-fit:contain;object-position:center top;flex:none;margin-top:4px}
.project-specs{display:flex;justify-content:center;gap:6px;list-style:none;padding:0;margin:14px 0 24px;letter-spacing:-.045em}
.project-specs li{display:flex;align-items:center;gap:4px;border:1px solid #E3E6E9;border-radius:30px;padding:9px 12px;font-size:15px;white-space:nowrap}
.project-specs img{display:block;width:16px;height:16px;flex:none}
.project-specs span{color:#969BA7}.project-specs strong{font-weight:650}
.project-result{display:flex;align-items:center;justify-content:center;gap:30px;min-height:190px;background:#C2CCD6;border-radius:12px;padding:20px;box-sizing:border-box;margin-top:auto}
.project-percent{font-size:108px;font-weight:600;line-height:1;letter-spacing:-.085em}
.project-result p{font-size:25px;line-height:1.05;letter-spacing:-.045em;margin:0 0 16px;font-weight:550}
.project-result span{font-size:18px;letter-spacing:-.04em;opacity:.65}
.project-featured .project-result{background:#D58924;color:#FAFAFA}
@media(max-width:760px){.portfolio{--project-width:min(600px,calc(100vw - 40px));padding:64px 0}.portfolio-heading{margin-bottom:36px;gap:16px}.portfolio-heading h2{margin:0;font-size:32px}.portfolio-controls{margin:0;gap:10px;font-size:18px}.portfolio-controls button{width:32px;height:32px;font-size:27px}.project-summary{padding:16px 16px 0;min-height:220px;gap:10px}.project-logo{width:72px;height:120px}.project-city{font-size:15px;margin-bottom:16px}.project-copy h3{font-size:23px}.project-description{font-size:15px}.project-specs{flex-wrap:wrap;margin:18px 0;gap:5px}.project-specs li{font-size:12px;padding:7px 8px}.project-result{gap:18px;min-height:150px;padding:16px}.project-percent{font-size:74px}.project-result p{font-size:19px;margin-bottom:10px}.project-result span{font-size:13px}}
@media(max-width:420px){.portfolio-heading{align-items:flex-start;flex-direction:column}.portfolio-controls{align-self:flex-end}.project-percent{font-size:64px}.project-result{gap:16px}.project-result p{font-size:18px}}
/* Leave a visible slice of the following card as the mobile swipe cue. */
@media(max-width:760px){
  .portfolio{--project-width:min(600px,calc(100vw - 64px))}
  .portfolio-controls{display:none}
  .portfolio-track{--project-gap:10px}
}