.pd-site .pd-design-portfolio .portfolio-hero{
      padding-top: calc(var(--nav-h) + clamp(5rem, 10vw, 8rem));
      padding-bottom: clamp(4rem, 8vw, 6rem);
      background: var(--charcoal);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
.pd-site .pd-design-portfolio .portfolio-hero::before{
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(233,101,163,0.09) 0%, transparent 70%);
      top: 50%; left: 20%;
      transform: translate(-50%, -50%);
    }
.pd-site .pd-design-portfolio .portfolio-hero::after{
      content: '';
      position: absolute;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(110,197,207,0.10) 0%, transparent 70%);
      top: 50%; right: -100px;
      transform: translateY(-50%);
    }
.pd-site .pd-design-portfolio .masonry-grid{
      columns: 3;
      column-gap: 14px;
    }
.pd-site .pd-design-portfolio .masonry-item{
      break-inside: avoid;
      margin-bottom: 14px;
      border-radius: var(--r-md);
      overflow: hidden;
      position: relative;
      cursor: pointer;
      background: var(--sand);
      display: block;
    }
.pd-site .pd-design-portfolio .masonry-item img{
      width: 100%;
      display: block;
      transition: transform var(--ease-img), opacity var(--ease);
    }
.pd-site .pd-design-portfolio .masonry-item:hover img{
      transform: scale(1.04);
      opacity: 0.82;
    }
.pd-site .pd-design-portfolio .masonry-overlay{
      position: absolute;
      inset: 0;
      background: var(--g-brand);
      opacity: 0;
      transition: opacity var(--ease);
      display: flex;
      align-items: center;
      justify-content: center;
    }
.pd-site .pd-design-portfolio .masonry-item:hover .masonry-overlay{ opacity: 0.18; }
.pd-site .pd-design-portfolio .masonry-info{
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: var(--s-4);
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      opacity: 0;
      transform: translateY(8px);
      transition: opacity var(--ease), transform var(--ease);
    }
.pd-site .pd-design-portfolio .masonry-item:hover .masonry-info{ opacity: 1; transform: translateY(0); }
.pd-site .pd-design-portfolio .masonry-info-title{ font-size: var(--t-sm); font-weight: 600; color: #fff; display: block; }
.pd-site .pd-design-portfolio .masonry-info-cat{ font-size: var(--t-xs); color: rgba(255,255,255,0.6); }
@media (max-width: 1024px){.pd-site .pd-design-portfolio .masonry-grid{ columns: 2; }
}
@media (max-width: 600px){.pd-site .pd-design-portfolio .masonry-grid{ columns: 1; }
}