/* ── Portfolio: device showcase, industry filters, browser-frame cards that scroll through each live site ── */
.pf-hero .pg-lede{max-width:560px}
.pf-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pf-stats a{display:flex;align-items:baseline;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.14);color:var(--fg-2);font:400 13px var(--f-sans);transition:border-color .2s,color .2s}
.pf-stats a b{font:600 18px var(--f-flex);color:#fff}
.pf-stats a:hover{border-color:var(--orange);color:#fff}

/* showcase: a laptop and a phone swapping through featured sites */
.pf-stage{position:relative;padding:8px 0 0;min-height:420px}
.pf-laptop{width:88%;margin-left:2%}
.pf-lid{position:relative;background:#1a1d26;border:1px solid #2c3140;border-radius:14px 14px 4px 4px;padding:14px 14px 16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,91,26,.08)}
.pf-cam{position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:#3a4052}
.pf-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:#0b0c10}
.pf-base{height:14px;margin:0 -6%;background:linear-gradient(180deg,#2a2f3c,#14161d);border-radius:0 0 14px 14px;box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.pf-base::before{content:"";display:block;width:18%;height:5px;margin:0 auto;background:#0d0f14;border-radius:0 0 6px 6px}
.pf-phone{position:absolute;right:0;bottom:64px;width:25%;min-width:120px;background:#111319;border:1px solid #2c3140;border-radius:26px;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 0 6px rgba(5,6,10,.6)}
.pf-notch{position:absolute;top:13px;left:50%;width:34%;height:12px;margin-left:-17%;background:#111319;border-radius:10px;z-index:3}
.pf-pscreen{position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:19px;background:#0b0c10}
.pf-screen img,.pf-pscreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.pf-screen .pf-b,.pf-pscreen .pf-b{opacity:0;transform:scale(1.03)}
.pf-stage.swap .pf-a{opacity:0;transform:scale(.985)}
.pf-stage.swap .pf-b{opacity:1;transform:none}
.pf-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:22px;min-height:28px}
.pf-cap-k{font:500 11px/1 var(--f-code);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.pf-cap-n{font:600 20px var(--f-flex);color:#fff}
.pf-cap-u{font:400 13px var(--f-sans);color:var(--fg-2)}
.pf-cap-u:hover{color:#fff}
.pf-dots{display:flex;gap:6px;margin-top:14px}
.pf-dots button{width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}
.pf-dots i{display:block;height:3px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.pf-dots [aria-selected="true"] i::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;animation:pfFill var(--pf-t,4.2s) linear forwards}
.pf-dots button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@keyframes pfFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the work */
.pf-work{background:var(--night);color:var(--fg);padding:clamp(56px,8vw,110px) 0 clamp(40px,6vw,80px);border-top:1px solid var(--night-line)}
.pf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.pf-head .label{color:var(--orange)!important}
.pf-h2{font:400 clamp(30px,4vw,52px)/1.04 var(--f-flex);letter-spacing:-.02em;margin:14px 0 0;color:#fff;text-wrap:balance}
.pf-h2 em{font-style:normal;color:var(--fg-2)}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--fg-2);font:500 14px var(--f-sans);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pf-chip b{font-weight:500;font-size:12px;color:rgba(255,255,255,.45)}
.pf-chip:hover{border-color:rgba(255,255,255,.4);color:#fff}
.pf-chip.on{background:#fff;border-color:#fff;color:#0B0C10}
.pf-chip.on b{color:var(--orange)}
.pf-chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px)}
.pf-card{display:flex;flex-direction:column;background:var(--night-2);border:1px solid var(--night-line);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,opacity .35s;animation:pfIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 40ms)}
.pf-card:hover{border-color:rgba(255,91,26,.45);transform:translateY(-4px)}
.pf-card[hidden]{display:none}
@keyframes pfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pf-frame{display:block;margin:12px 12px 0;background:#161922;border:1px solid #262a36;border-radius:8px 8px 0 0;overflow:hidden}
.pf-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:#1c1f29;border-bottom:1px solid #262a36}
.pf-bar i{width:8px;height:8px;border-radius:50%;background:#3a3f4e}
.pf-bar i:first-child{background:#FF5B1A}
.pf-bar span{margin-left:8px;flex:1;min-width:0;padding:3px 10px;background:#11131a;border-radius:4px;font:400 11px var(--f-sans);color:#8a90a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-view{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0c10}
.pf-view img{position:absolute;left:0;top:0;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;transform:translateY(0);transition:transform var(--pf-dur,4s) cubic-bezier(.45,0,.35,1)}
.pf-card.scroll .pf-view img{transform:translateY(calc(var(--pf-shift,0px) * -1))}
.pf-view::after{content:"Scroll preview";position:absolute;right:10px;bottom:10px;padding:5px 9px;background:rgba(5,6,10,.78);color:#fff;font:500 11px var(--f-sans);opacity:0;transition:opacity .3s}
.pf-card.tall .pf-view::after{opacity:1}
.pf-card.scroll .pf-view::after{opacity:0}
.pf-meta{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.pf-kind{font:500 11px/1.3 var(--f-code);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-hi)}
.pf-meta h3{margin:0;font:600 21px/1.2 var(--f-flex);color:#fff}
.pf-meta p{margin:0;font:400 14.5px/1.55 var(--f-sans);color:var(--fg-2)}
.pf-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--night-line)}
.pf-place{font:400 12.5px var(--f-sans);color:#8a90a2}
.pf-foot a{font:500 13.5px var(--f-sans);color:#fff}
.pf-foot a span{color:var(--orange);transition:transform .2s;display:inline-block}
.pf-foot a:hover span{transform:translate(2px,-2px)}
.pf-note{margin:28px 0 0;font:400 12.5px/1.5 var(--f-sans);color:#7d8396}

.pf-cta{background:var(--paper);color:var(--ink);padding:clamp(56px,8vw,100px) 0}
.pf-cta-in{display:grid;grid-template-columns:1fr 1fr;gap:28px 60px;align-items:end}
.pf-cta .label{color:var(--orange-ink)!important}
.pf-cta .pf-h2{color:var(--ink)}
.pf-cta .pf-h2 em{color:var(--ink-2)}
.pf-cta p{margin:0;font:400 17px/1.6 var(--f-sans);color:var(--ink-2);max-width:520px}
.pf-cta .hero-ctas{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.hbtn.ghost.dark{border-color:rgba(11,12,16,.25);color:var(--ink)}
.hbtn.ghost.dark:hover{background:rgba(11,12,16,.06)}

@media (max-width:1100px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pf-stage{max-width:620px;margin-top:10px}.pf-cta-in{grid-template-columns:1fr}}
@media (max-width:640px){
  .pf-grid{grid-template-columns:minmax(0,1fr)}
  .pf-stage{min-height:0}
  .pf-phone{width:30%;bottom:72px;border-radius:18px;padding:5px}
  .pf-pscreen{border-radius:14px}.pf-notch{top:9px;height:8px}
  .pf-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none;width:calc(100% + 32px)}
  .pf-chips::-webkit-scrollbar{display:none}
  .pf-chip{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-card{animation:none}
  .pf-view img,.pf-screen img,.pf-pscreen img{transition:none}
  .pf-dots [aria-selected="true"] i::after{animation:none;transform:none}
}