/* ============================================================
   Portfolio Index  — /our-work
   ============================================================ */

/* Page header — aurora bg */
.ph{padding:56px 0 40px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.ph::before{content:'';position:absolute;inset:-30%;z-index:-2;background:
  radial-gradient(circle at 15% 30%,rgba(255,184,0,.40),transparent 50%),
  radial-gradient(circle at 85% 70%,rgba(61,91,255,.35),transparent 50%),
  radial-gradient(circle at 60% 20%,rgba(255,77,31,.30),transparent 45%);
  animation:auroraPortfolio 28s ease-in-out infinite alternate}
.ph::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(247,246,242,.55) 0%,rgba(247,246,242,.9) 100%)}
@keyframes auroraPortfolio{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}100%{transform:translate3d(-2%,3%,0) rotate(4deg) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.ph::before{animation:none}}

.ph-in{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;position:relative}
.ph h1{font-family:var(--fs);font-weight:400;font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-.025em;margin:0}
.ph h1 em{font-style:italic;font-weight:500;background:linear-gradient(120deg,var(--pop-1),var(--pop-5) 50%,var(--pop-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.ph-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ph-meta .v{font-family:var(--fs);font-size:28px;font-weight:500;letter-spacing:-.02em;color:var(--ink);text-transform:none;display:block;margin-bottom:2px}
.ph-meta div:nth-child(1) .v{color:var(--pop-1)}
.ph-meta div:nth-child(2) .v{color:var(--pop-3)}
.ph-meta div:nth-child(3) .v{color:var(--pop-4)}
@media(max-width:900px){.ph-in{grid-template-columns:1fr}.ph-meta{grid-template-columns:repeat(3,1fr)}}
@media(max-width:500px){.ph-meta{grid-template-columns:1fr 1fr}}

/* Filter bar */
.pf-filter{padding:20px 0;border-bottom:1px solid var(--line);position:sticky;top:61px;background:rgba(247,246,242,.95);backdrop-filter:blur(16px);z-index:40}
.pf-filter-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pf-chips{display:flex;gap:6px;flex-wrap:wrap}
.pf-chip{padding:8px 14px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;transition:all .2s;color:var(--ink-2)}
.pf-chip:hover{border-color:var(--ink);background:var(--bg)}
.pf-chip.act{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-chip .ct{opacity:.55;margin-left:6px;font-weight:400}
.pf-view{display:flex;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper)}
.pf-view button{padding:8px 12px;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer}
.pf-view button.act{background:var(--ink);color:#fff}

/* Grid — asymmetric editorial */
.pf-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;grid-auto-flow:dense;padding:64px 0 0}
.pf-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;cursor:pointer;position:relative;text-decoration:none;color:inherit}
.pf-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.pf-card .pf-img{aspect-ratio:16/11;position:relative;overflow:hidden}
.pf-card .pf-img .pf-img-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s}
.pf-card:hover .pf-img .pf-img-bg{transform:scale(1.06)}
.pf-card .pf-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35) 100%)}
.pf-card .pf-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.pf-card .pf-card-meta{display:flex;justify-content:space-between;font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pf-card h3{font-family:var(--fs);font-weight:500;font-size:24px;letter-spacing:-.012em;line-height:1.15;margin:0}
.pf-card .pf-client{font-family:var(--fm);font-size:12px;color:var(--muted);letter-spacing:.06em}
.pf-card .pf-impact{margin-top:8px;font-size:14px;color:var(--ink-2)}
.pf-card .pf-impact strong{font-weight:700;background:linear-gradient(120deg,var(--pop-1),var(--pop-5));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-card .pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.pf-card .pf-tags span{font-family:var(--fm);font-size:10px;padding:3px 9px;background:var(--bg);border:1px solid var(--line);border-radius:3px;letter-spacing:.06em}
.pf-card .pf-arrow{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:16px;opacity:0;transform:translate(4px,-4px);transition:all .3s;z-index:2}
.pf-card:hover .pf-arrow{opacity:1;transform:translate(0,0)}
.pf-card .pf-featured{position:absolute;top:16px;left:16px;padding:5px 10px;background:rgba(0,0,0,.7);color:#fff;font-family:var(--fm);font-size:10px;letter-spacing:.1em;border-radius:3px;z-index:1;text-transform:uppercase}

/* Card sizes */
.pf-card.s-xl{grid-column:span 8}.pf-card.s-xl .pf-img{aspect-ratio:16/9}.pf-card.s-xl h3{font-size:36px}
.pf-card.s-l{grid-column:span 6}.pf-card.s-l h3{font-size:28px}
.pf-card.s-m{grid-column:span 4}
.pf-card.s-s{grid-column:span 4}
@media(max-width:1100px){
  .pf-card.s-xl{grid-column:span 12}
  .pf-card.s-l{grid-column:span 6}
  .pf-card.s-m,.pf-card.s-s{grid-column:span 6}
}
@media(max-width:700px){.pf-card{grid-column:span 12!important}}

/* Gradient backgrounds for visual variety */
.pf-card:nth-child(8n+1) .pf-img-grad{background:linear-gradient(135deg,#FF8C42,#FF4D1F 60%,#E83E8C)}
.pf-card:nth-child(8n+2) .pf-img-grad{background:linear-gradient(135deg,#00C4B4,#00B86B 50%,#005F37)}
.pf-card:nth-child(8n+3) .pf-img-grad{background:linear-gradient(135deg,#FFD84D,#FFB800 55%,#D67A00)}
.pf-card:nth-child(8n+4) .pf-img-grad{background:linear-gradient(135deg,#6B80FF,#3D5BFF 60%,#1A2B99)}
.pf-card:nth-child(8n+5) .pf-img-grad{background:linear-gradient(135deg,#FF6BA8,#E83E8C 50%,#8C1846)}
.pf-card:nth-child(8n+6) .pf-img-grad{background:linear-gradient(135deg,#0F1115,#1E232D 100%)}
.pf-card:nth-child(8n+7) .pf-img-grad{background:linear-gradient(135deg,#FFB800,#FF4D1F 70%,#0F1115)}
.pf-card:nth-child(8n+8) .pf-img-grad{background:linear-gradient(135deg,#00B86B,#3D5BFF 60%,#E83E8C)}

/* Stats bar */
.pf-sb{padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);margin-top:100px}
.pf-sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.pf-sb-c{display:flex;flex-direction:column;gap:6px}
.pf-sb-c .pf-n{font-family:var(--fs);font-weight:400;font-style:italic;font-size:64px;line-height:.95;letter-spacing:-.03em}
.pf-sb-c:nth-child(1) .pf-n{background:linear-gradient(135deg,var(--pop-1),var(--pop-5));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-sb-c:nth-child(2) .pf-n{background:linear-gradient(135deg,var(--pop-3),var(--pop-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-sb-c:nth-child(3) .pf-n{background:linear-gradient(135deg,var(--pop-2),var(--pop-1));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-sb-c:nth-child(4) .pf-n{background:linear-gradient(135deg,var(--pop-4),var(--pop-5));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-sb-c h5{font-family:var(--fs);font-size:18px;font-weight:500;margin:0;letter-spacing:-.01em}
.pf-sb-c p{font-size:13px;color:var(--muted);margin:0;max-width:32ch}
@media(max-width:900px){.pf-sb-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* CTA */
.pf-cta-wrap{padding:100px 0 120px}
.pf-cta{background:var(--ink);color:#fff;border-radius:10px;padding:72px;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
.pf-cta::before{content:'';position:absolute;top:-150px;right:-100px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,184,0,.35),transparent 60%);z-index:-1}
.pf-cta::after{content:'';position:absolute;bottom:-180px;left:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(61,91,255,.3),transparent 60%);z-index:-1}
.pf-cta h2{font-family:var(--fs);font-weight:400;font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-.02em;margin:0;max-width:18ch}
.pf-cta h2 em{font-style:italic;background:linear-gradient(120deg,var(--pop-2),var(--pop-1),var(--pop-5));-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-cta p{color:rgba(255,255,255,.7);font-size:16px;margin:20px 0 28px;max-width:44ch}
.pf-cta-act{display:flex;gap:12px;flex-wrap:wrap}
.pf-cta .btn-p{background:linear-gradient(135deg,var(--pop-1),var(--pop-2))}
.pf-cta .btn-g{border-color:rgba(255,255,255,.25);color:#fff}
.pf-cta .btn-g:hover{background:#fff;color:var(--ink)}
.pf-cta-badges{font-family:var(--fm);font-size:12px;color:rgba(255,255,255,.55);line-height:1.8;text-transform:uppercase;letter-spacing:.14em}
@media(max-width:900px){.pf-cta{padding:44px;grid-template-columns:1fr}}

/* Pagination — matches site style */
.pf-pagination{padding:60px 0 0;display:flex;justify-content:center}

/* Reveal animation */
.pf-rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.pf-rv.in{opacity:1;transform:none}
.pf-hide{display:none!important}