/* ============================================================
   EightySix Digital — /portfolio/ page
   Browser-frame showcase. Shares tokens/header/footer/buttons.
   ============================================================ */
.pf-kicker{display:inline-block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--volt);margin-bottom:14px}
.pf-kicker.kicker-dark{color:var(--volt-deep)}
.pf-h2{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.02em;font-size:clamp(2rem,4.4vw,3.4rem)}
.pf-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:46px;flex-wrap:wrap}
.pf-sec-note{color:var(--muted-paper);max-width:38ch;font-size:1rem}

/* ---------- browser frame ---------- */
.pf-frame{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#17171c;box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.pf-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#17171c;border-bottom:1px solid var(--line)}
.pf-dots{display:flex;gap:6px;flex:none}
.pf-dots i{width:10px;height:10px;border-radius:50%;background:#3a3a44}
.pf-url{flex:1;text-align:center;font-size:.78rem;color:#9a9aa3;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-shot{background:#fff;line-height:0}
.pf-shot img{width:100%;height:auto;display:block}
.pf-card .pf-shot{aspect-ratio:1100/870;overflow:hidden}
.pf-card .pf-shot img{height:100%;object-fit:cover;object-position:top}

/* ============================================================
   HERO
   ============================================================ */
.pf-hero{position:relative;background:var(--ink);min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.pf-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(46% 56% at 88% 22%,rgba(228,106,44,.2),transparent 62%),radial-gradient(40% 44% at 0% 92%,rgba(228,106,44,.12),transparent 60%)}
.pf-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}
.pf-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--volt);margin-bottom:20px}
.pf-h1{font-family:var(--display);font-weight:700;line-height:.99;letter-spacing:-.03em;font-size:clamp(2.6rem,5.8vw,4.6rem);margin-bottom:22px;color:#fff}
.pf-lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:#cfcfd6;max-width:48ch;margin-bottom:30px}
.pf-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.pf-hero-cta .btn-lg{min-width:190px;justify-content:center}
.pf-proof{display:flex;align-items:center;gap:10px;color:#b6b6bf;font-size:.95rem}
.pf-proof .stars{color:var(--volt);letter-spacing:2px}
.pf-frame-hero{box-shadow:0 50px 90px -38px rgba(0,0,0,.8)}

/* ============================================================
   WORK GRID (cream)
   ============================================================ */
.pf-work{background:var(--paper);color:var(--ink);padding:clamp(80px,11vw,140px) 0}
.pf-work .pf-sec-note{color:#4a4942}
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px}
.pf-card{display:flex;flex-direction:column;align-self:start;text-decoration:none;transition:transform .22s var(--ease)}
.pf-card:hover{transform:translateY(-6px)}
.pf-card .pf-frame{transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.pf-card:hover .pf-frame{border-color:var(--volt);box-shadow:0 36px 64px -34px rgba(10,10,11,.5)}
.pf-meta{padding:20px 4px 0}
.pf-meta-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.pf-meta-head h3{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--ink)}
.pf-tags{font-family:var(--display);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--volt-deep);white-space:nowrap}
.pf-meta p{color:#4a4942;font-size:.97rem;line-height:1.5;margin-bottom:12px}
.pf-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px;padding-top:14px;border-top:1px solid var(--line-dark)}
.pf-result strong{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:-.02em;color:var(--volt-deep);margin-bottom:3px}
.pf-result span{font-size:.82rem;color:#4a4942;line-height:1.3}
.pf-visit{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);transition:color .2s}
.pf-card:hover .pf-visit{color:var(--volt-deep)}

/* ============================================================
   PROVEN RESULTS (orange band)
   ============================================================ */
.pf-stats{background:linear-gradient(135deg,var(--volt),#c2530f);color:#fff;padding:clamp(60px,9vw,100px) 0;text-align:center}
.pf-stats-head{margin-bottom:42px}
.pf-stats-kicker{display:inline-block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:rgba(255,255,255,.85);margin-bottom:12px}
.pf-stats-h2{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em;font-size:clamp(1.9rem,4.2vw,3rem);color:#fff}
.pf-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pf-stat strong{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5.2vw,3.6rem);line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:6px}
.pf-stat span{font-size:.96rem;color:rgba(255,255,255,.9);font-weight:500}
@media(max-width:680px){.pf-stats-grid{grid-template-columns:1fr 1fr;gap:32px 20px}}

/* ============================================================
   TESTIMONIAL (dark)
   ============================================================ */
.pf-quote{background:var(--ink);padding:clamp(80px,11vw,130px) 0}
.pf-quote-inner{max-width:900px;margin:0 auto;text-align:center}
.pf-quote-mark{font-family:var(--display);font-weight:700;font-size:5rem;line-height:.6;color:var(--volt);margin-bottom:10px}
.pf-quote blockquote{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.9vw,2rem);line-height:1.34;letter-spacing:-.01em;color:#fff;margin:0 0 24px}
.pf-quote-by{display:flex;flex-direction:column;align-items:center;gap:8px}
.pf-quote-by .stars{color:var(--volt);letter-spacing:2px}
.pf-quote-by p{color:#b6b6bf;font-size:.98rem}
.pf-quote-by strong{color:#fff}

/* ============================================================
   CTA (dark)
   ============================================================ */
.pf-cta{position:relative;background:var(--ink-2);padding:clamp(90px,13vw,160px) 0;text-align:center;overflow:hidden}
.pf-cta-glow{position:absolute;inset:0;background:radial-gradient(50% 70% at 50% 120%,rgba(228,106,44,.32),transparent 60%),radial-gradient(40% 50% at 50% -10%,rgba(228,106,44,.12),transparent 60%)}
.pf-cta-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.pf-cta h2{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.03em;font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:20px}
.pf-cta p{color:#cfcfd6;font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:560px;margin:0 auto 34px}
.pf-cta .pf-hero-cta{justify-content:center}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .pf-hero{min-height:auto;padding-top:108px}
  .pf-hero-grid{grid-template-columns:1fr;gap:40px}
  .pf-hero-stage{order:-1}
  .pf-grid{grid-template-columns:1fr;gap:30px}
}