/* ═══════════════════════════════════════════════════════════════
   WORK PAGE (v1.6.0) — scoped under .kpw · loaded on the Work template only
   Mockup visuals live in assets/css/mockups.css
   ═══════════════════════════════════════════════════════════════ */
.kpw *,.kpw *::before,.kpw *::after{box-sizing:border-box;margin:0;padding:0}
.kpw{
  --bg:#05050f;--surface:#08081a;--card:#0d0d22;--card2:#121230;
  --blue:#00d4ff;--purple:#8b5cf6;--green:#10b981;--aerial:#34d399;--sky:#60a5fa;
  --text:#e2e8f0;--muted:#94a3b8;--dim:#64748b;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--ph:#f59e0b;
}
.kpw{scroll-behavior:smooth}
.kpw{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
.kpw h1,.kpw h2,.kpw h3,.kpw h4{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-1px;line-height:1.04}
.kpw a{color:inherit}
.kpw button{font:inherit;color:inherit}
.kpw .wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.kpw .eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.kpw .grad{background:linear-gradient(135deg,#00d4ff 0%,#8b5cf6 55%,#10b981 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.kpw .btn-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;padding:15px 30px;border-radius:9px;font-weight:700;font-size:.95rem;text-decoration:none;display:inline-block;transition:all .25s;border:0;cursor:pointer}
.kpw .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,212,255,.28)}
.kpw .btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text);padding:14px 26px;border-radius:9px;font-weight:600;text-decoration:none;display:inline-block;transition:all .2s;cursor:pointer}
.kpw .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
/* HERO */
.kpw .hero{position:relative;padding:170px 0 70px;overflow:hidden;background:radial-gradient(900px 500px at 80% 20%,rgba(139,92,246,.13),transparent 60%),radial-gradient(700px 400px at 10% 90%,rgba(0,212,255,.07),transparent 60%)}
.kpw .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}
.kpw .hero h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-2px;margin-bottom:22px}
.kpw .hero p.sub{color:var(--muted);font-size:1.08rem;max-width:560px}
.kpw .facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpw .fact{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.kpw .fact b{display:block;font-family:'Syne';font-size:1.5rem}
.kpw .fact span{font-size:.8rem;color:var(--muted)}
.kpw .clients{margin-top:54px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;display:flex;gap:44px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.kpw .clients small{font-family:var(--mono);font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.kpw .clients span{font-family:'Syne';font-weight:700;font-size:1rem;color:rgba(226,232,240,.55);letter-spacing:-.2px;transition:color .2s}
.kpw .clients span:hover{color:var(--text)}
/* FILTER */
.kpw .filter{position:sticky;top:64px;z-index:60;background:rgba(5,5,15,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.kpw .filter .wrap{display:flex;gap:8px;padding-top:14px;padding-bottom:14px;overflow-x:auto;scrollbar-width:none;align-items:center}
.kpw .fbtn{white-space:nowrap;border:1px solid var(--border2);background:transparent;padding:8px 16px;border-radius:100px;font-size:.86rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;display:flex;gap:8px;align-items:center}
.kpw .fbtn i{font-style:normal;font-family:var(--mono);font-size:.7rem;color:var(--dim)}
.kpw .fbtn:hover{color:var(--text);border-color:rgba(255,255,255,.25)}
.kpw .fbtn.on{background:var(--c,var(--blue));border-color:var(--c,var(--blue));color:#05050f}
.kpw .fbtn.on i{color:rgba(5,5,15,.6)}
.kpw .filter .count{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--dim);white-space:nowrap}
/* FEATURED */
.kpw .featured{padding:70px 0 30px}
.kpw .feat{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--card);border:1px solid var(--border2);border-radius:24px;overflow:hidden;transition:opacity .35s,transform .35s}
.kpw .feat.hide{display:none}
.kpw .feat-vis{position:relative;min-height:470px;background:linear-gradient(135deg,#1b1a17,#0c0c0f);padding:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kpw .feat-body{padding:40px}
.kpw .tagline{font-family:var(--mono);font-size:.64rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.kpw .feat h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:14px}
.kpw .feat p.lead{color:var(--muted);margin-bottom:22px}
.kpw .story{display:grid;gap:14px;margin-bottom:22px}
.kpw .story div{border-left:2px solid var(--border2);padding-left:14px}
.kpw .story .k{font-family:var(--mono);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin-bottom:3px}
.kpw .story p{font-size:.9rem;color:var(--muted)}
.kpw .chips{display:flex;flex-wrap:wrap;gap:6px}
.kpw .chip{font-size:.72rem;padding:4px 10px;border-radius:100px;border:1px solid var(--border2);color:var(--muted)}
.kpw .chip.web{color:#7ee8ff;border-color:rgba(0,212,255,.35)}
.kpw .chip.ai{color:#c4b5fd;border-color:rgba(139,92,246,.4)}
.kpw .chip.growth{color:#93c5fd;border-color:rgba(96,165,250,.4)}
.kpw .chip.aerial{color:#6ee7b7;border-color:rgba(52,211,153,.4)}
.kpw .result{margin:20px 0 22px;padding:14px 16px;border-radius:12px;background:rgba(245,158,11,.06);color:#fcd9a0;font-size:.88rem}
.kpw .feat-actions{display:flex;gap:10px;flex-wrap:wrap}
/* GRID */
.kpw .projects{padding:30px 0 100px}
.kpw .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kpw .card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;cursor:pointer;text-align:left;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .35s,opacity .35s;display:flex;flex-direction:column}
.kpw .card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.18);box-shadow:0 26px 56px rgba(0,0,0,.45)}
.kpw .card.wide{grid-column:span 2}
.kpw .card.kpw-rv.out,.kpw .card.out{opacity:0;transform:scale(.96)}
.kpw .card.gone{display:none}
.kpw .card .vis{height:230px;position:relative;overflow:hidden}
.kpw .card.wide .vis{height:260px}
.kpw .card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.kpw .card h3{font-size:1.25rem;letter-spacing:-.4px;margin-bottom:6px}
.kpw .card p{color:var(--muted);font-size:.87rem;margin-bottom:14px;flex:1}
.kpw .card .more{font-size:.82rem;font-weight:700;color:var(--blue);margin-top:14px}
.kpw .card .vis > *{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kpw .try{position:absolute;top:14px;right:14px;z-index:3;font-family:var(--mono);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;background:var(--purple);color:#fff;padding:4px 9px;border-radius:5px}
/* DRAWER */
.kpw .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.kpw .scrim.on{opacity:1;pointer-events:auto}
.kpw .drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100%);z-index:210;background:var(--surface);border-left:1px solid var(--border2);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow-y:auto;box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.kpw .drawer.on{transform:none}
.kpw .drawer .dvis{height:280px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.kpw .drawer .x{position:absolute;top:16px;right:16px;z-index:5;width:38px;height:38px;border-radius:50%;background:rgba(5,5,15,.75);border:1px solid var(--border2);cursor:pointer;font-size:1.1rem}
.kpw .drawer .dbody{padding:30px 34px 60px}
.kpw .drawer h3{font-size:2rem;margin-bottom:10px}
.kpw .drawer .lead{color:var(--muted);margin-bottom:22px}
.kpw .drawer .meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.kpw .drawer .meta div{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.kpw .drawer .meta small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.kpw .drawer .meta span{font-size:.88rem}
.kpw .drawer ul{list-style:none;margin:8px 0 0}
.kpw .drawer li{font-size:.9rem;color:var(--muted);padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--border)}
.kpw .drawer li::before{content:'';position:absolute;left:3px;top:15px;width:8px;height:8px;border-radius:2px;background:var(--blue)}
.kpw .drawer .sec-k{font-family:var(--mono);font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);margin:22px 0 4px}
.kpw .drawer .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
/* QUOTES */
.kpw .quotes{padding:90px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.kpw .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.kpw .quote{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px}
.kpw .quote p{font-size:1.1rem;line-height:1.55;margin-bottom:18px;color:#cbd5e1}
.kpw .quote small{color:var(--dim);font-size:.82rem}
/* CTA */
.kpw .cta{padding:110px 0 140px;text-align:center;background:radial-gradient(700px 360px at 50% 50%,rgba(139,92,246,.16),transparent 70%)}
.kpw .cta h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:14px}
.kpw .cta p{color:var(--muted);max-width:520px;margin:0 auto 30px}
.kpw .cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kpw .kpw-rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.kpw .kpw-rv.in{opacity:1;transform:none}
@media(max-width:1050px){
.kpw .hero-grid,.kpw .feat{grid-template-columns:1fr}
.kpw .grid{grid-template-columns:1fr 1fr}
.kpw .qgrid{grid-template-columns:1fr}
.kpw .feat-vis{min-height:360px}
}
@media(max-width:700px){
.kpw .wrap{padding:0 20px}
.kpw .hero{padding:130px 0 50px}
.kpw .grid{grid-template-columns:1fr}
.kpw .card.wide{grid-column:auto}
.kpw .feat-body{padding:26px}
.kpw .feat-vis{padding:20px;min-height:300px}
.kpw .filter{top:58px}
.kpw .filter .count{display:none}
.kpw .drawer .dbody{padding:24px 22px 60px}
.kpw .clients{gap:18px;justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){
.kpw *,.kpw *::before,.kpw *::after{transition:none!important;animation:none!important}
.kpw .kpw-rv{opacity:1;transform:none}
}
.kpw{overflow-x:clip}
.kpw .card .vis .pm,.kpw .feat-vis .pm{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kpw .card:hover .vis .pm,.kpw .card:hover .vis .pm-photo{transform:scale(1.035) translateY(-4px)}
.kpw .feat-vis{padding:0}
.kpw .drawer .dvis .pm{position:absolute;inset:0}
.kpw .quote p{font-style:normal}
.kpw .result{background:rgba(16,185,129,.08);color:#a7f3d0;border:1px solid rgba(16,185,129,.3)}
.kpw .btn-ghost{padding:14px 26px}