.portfolio-page{background-color:var(--bg-primary);min-height:100vh;padding-top:140px;padding-bottom:100px}.portfolio-header-container{max-width:var(--container-max);text-align:center;margin:0 auto 64px;padding:0 48px}.portfolio-hero-title{letter-spacing:-3px;color:var(--text-primary);margin-bottom:16px;font-size:clamp(48px,8vw,80px);font-weight:800;line-height:1}.portfolio-hero-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:18px;line-height:1.6}.portfolio-masonry-container{max-width:1400px;margin:0 auto;padding:0 48px}.portfolio-masonry-grid{columns:3;column-gap:24px}.portfolio-masonry-item{break-inside:avoid;cursor:pointer;border-radius:16px;margin-bottom:24px;display:block;position:relative;overflow:hidden;box-shadow:0 12px 32px #0000000d}.portfolio-masonry-item img{object-fit:cover;width:100%;transition:transform .6s;display:block}.portfolio-masonry-item:hover img{transform:scale(1.04)}.portfolio-masonry-overlay{opacity:0;background:linear-gradient(#0000 50%,#0009 100%);flex-direction:column;justify-content:flex-end;padding:24px;transition:opacity .4s;display:flex;position:absolute;inset:0}.portfolio-masonry-item:hover .portfolio-masonry-overlay{opacity:1}.portfolio-masonry-title{color:#fff;letter-spacing:-.3px;font-size:18px;font-weight:700}.portfolio-masonry-category{color:#fffc;letter-spacing:1px;text-transform:uppercase;margin-top:6px;font-size:13px;font-weight:500}@media (max-width:1024px){.portfolio-masonry-grid{columns:2}}@media (max-width:768px){.portfolio-header-container,.portfolio-masonry-container{padding:0 24px}.portfolio-hero-title{letter-spacing:-1px}}@media (max-width:500px){.portfolio-masonry-grid{columns:1}}