/* /headshots/ gallery phone (2026-10-23): pinned scene — the phone turns face-on, the gallery scrolls while the view
   zooms to the bottom bar, Retouch then Format open their trays, and the phone lifts away. Driven by gphone.js. */
.gph{position:relative;height:605vh;height:605svh;overflow-x:clip;margin-top:clamp(24px,3vw,40px)}
.gph-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.gph-copy{display:grid;gap:28px;align-content:center;position:relative;z-index:2}
.gph-kick{font:400 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.gph-h{margin:0;font:800 clamp(34px,4.6vw,64px)/.95 var(--f-wide);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase}
.gph-h span{color:var(--grey-d)}
.gph-meter{display:flex;gap:5px}
.gph-meter i{width:26px;height:10px;border-radius:10px;background:#26262a;transition:background .35s,box-shadow .35s}
.gph-meter i.on{background:#A3DB4A;box-shadow:0 0 10px rgba(163,219,74,.55)}
.gph-steps{position:relative;min-height:120px}
.gph-step{position:absolute;inset:0 auto auto 0;max-width:34ch;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.gph-step.on{opacity:1;transform:none}
.gph-step h3{margin:0 0 8px;font:500 20px/1.2 var(--f-sans);letter-spacing:-.015em}
.gph-step p{margin:0;color:#a7a7ac;font-size:15px;line-height:1.6}
.gph-view{perspective:1600px;display:flex;justify-content:center;align-items:center;height:100%;position:relative;z-index:1}
.gph-phone{--w:min(300px,60vw);width:var(--w);aspect-ratio:390/844;position:relative;transform-style:preserve-3d;will-change:transform;transform-origin:50% 94%}
.gph-slab{position:absolute;inset:0;border-radius:calc(var(--w)*.15);background:#2b2b30}
.gph-face{position:absolute;inset:0;border-radius:calc(var(--w)*.15);background:#050505;padding:calc(var(--w)*.028);box-shadow:inset 0 0 0 1.5px #3a3a40;transform:translateZ(1px)}
.gph-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.125);overflow:hidden;background:#000}
.gph-hdr{position:absolute;left:0;right:0;top:0;height:11.37%;z-index:2}
.gph-hdr img,.gph-bar img{display:block;width:100%;height:100%}
.gph-grid{position:absolute;left:0;right:0;top:11.37%;bottom:12.56%;overflow:hidden}
.gph-grid img{display:block;width:100%;height:auto;will-change:transform}
.gph-bar{position:absolute;left:0;right:0;bottom:0;height:12.56%;display:grid;grid-template-columns:66.67% 33.33%;z-index:2;background:#101010}
.gph-bar .l{filter:brightness(var(--lb,1))}
.gph-bar .r{opacity:var(--ro,1)}
.gph-grid,.gph-hdr{filter:brightness(var(--gb,1))}
.gph-tray{position:absolute;left:0;right:0;bottom:0;width:100%;height:12.56%;z-index:3;opacity:0}
.gph-cam{position:absolute;top:2.2%;left:50%;width:4.2%;aspect-ratio:1;border-radius:50%;background:#000;transform:translateX(-50%);z-index:4;box-shadow:0 0 0 1px #111}
.gph-tap{position:absolute;top:94.5%;left:16.7%;width:11%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(255,255,255,.5);z-index:5;opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none}
.gph-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%);background-size:250% 100%;background-position:var(--g,0%) 0}
.gph-btn{position:absolute;width:3px;border-radius:2px;background:#3a3a40;transform:translateZ(-4px)}
@media (max-width:760px){
  .gph-stage{display:block;padding:0}
  .gph-copy{position:absolute;left:0;right:0;top:0;z-index:3;gap:12px;background:var(--ink);box-shadow:0 18px 22px 4px var(--ink);padding:80px var(--gut) 14px}
  .gph-h{font-size:28px}
  .gph-steps{min-height:88px}
  .gph-step h3{font-size:18px;margin-bottom:4px}
  .gph-step p{font-size:14px}
  .gph-view{position:absolute;left:0;right:0;bottom:14px;height:auto;z-index:1}
}
/* short screens (≤500px tall): no pin — the phone sits face-on with all four captions listed */
@media (max-height:500px){
  .gph{height:auto}
  .gph-stage{position:relative;height:auto;padding-block:40px}
  .gph-steps{min-height:0;display:grid;gap:16px}
  .gph-step{position:static;opacity:1;transform:none}
  .gph-phone{--w:min(200px,40vw)}
}
@media (prefers-reduced-motion:reduce){.gph-step,.gph-meter i{transition:none}}