/* ============================================================= *
 *  Portfolio hero — single seamless plate (no portal / patch)   *
 * ============================================================= */

.pz-hero{
  position:relative;
  height:300svh;
  background:#0f0e11;
  color:#f5f5f5;
  z-index:0;
}

.pz-pin{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.pz-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.pz-plate{
  position:absolute;
  left:50%;
  top:50%;
  width:max(100vw,177.7778svh);
  height:max(56.25vw,100svh);
  transform:translate(-50%,-50%);
  transform-origin:50% 72%;
  will-change:transform;
  backface-visibility:hidden;
}
.pz-plate picture,
.pz-plate img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.pz-veil{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,14,17,.5),rgba(15,14,17,.06) 42%,rgba(15,14,17,.7));
}

.pz-copy{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:clamp(3.5rem,10vh,6.5rem);
  transform:translateX(-50%);
  width:min(94%,860px);
  text-align:center;
  pointer-events:auto;
}

.pz-hero h1{
  margin:0;
  line-height:.95;
  letter-spacing:-.03em;
}
.pz-sans{
  display:block;
  white-space:nowrap;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:clamp(1.55rem,4.1vw,3.35rem);
  color:#f5f5f5;
  letter-spacing:-.04em;
}
.pz-serif{
  display:block;
  margin-top:.06em;
  font-family:var(--font-serif);
  font-weight:500;
  font-style:italic;
  font-size:clamp(2.2rem,6.3vw,4.9rem);
  color:var(--gold,#d4af37);
  letter-spacing:-.02em;
}
.pz-serif em{font-style:italic;color:var(--gold,#d4af37)}

.pz-sub{
  margin:clamp(.85rem,2vh,1.25rem) auto 0;
  max-width:52ch;
  font-size:clamp(.82rem,.95vw,.92rem);
  line-height:1.65;
  font-weight:300;
  color:rgba(238,240,242,.78);
}
.pz-actions{
  margin-top:clamp(1.1rem,2.6vh,1.7rem);
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
}

.pz-cue{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:clamp(1.1rem,2.6vh,1.7rem);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-sans);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(245,245,245,.62);
  pointer-events:none;
}
.pz-cue i{
  display:block;
  width:1px;height:2.2rem;
  background:linear-gradient(180deg,rgba(212,175,55,.9),transparent);
}

.pz-hero .btn-primary{
  background:rgba(212,175,55,.12)!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--gold,#d4af37)!important;
  border-color:var(--gold,#d4af37)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.pz-hero .btn-primary:hover{
  background:var(--gold,#d4af37)!important;
  color:var(--velvet,#17151a)!important;
  border-color:var(--gold,#d4af37)!important;
}
.pz-hero .btn-ghost{
  border-color:rgba(245,245,245,.38)!important;
  color:rgba(245,245,245,.9)!important;
  background:rgba(245,245,245,.08)!important;
}
.pz-hero .btn-ghost:hover{
  background:rgba(245,245,245,.16)!important;
  color:#fff!important;
  border-color:rgba(245,245,245,.55)!important;
}

@media(max-width:820px){
  .pz-hero{height:100svh}
  .pz-pin{position:relative}
  .pz-plate{
    left:0;top:0;
    width:100%;height:100%;
    transform:none;
  }
  .pz-plate img{object-position:center 70%}
  .pz-sans{font-size:clamp(1.2rem,5.7vw,1.9rem)}
  .pz-serif{font-size:clamp(1.75rem,8vw,2.55rem)}
}

@media(prefers-reduced-motion:reduce){
  .pz-hero{height:100svh}
  .pz-pin{position:relative}
}