/* ---------- work hero ---------- */
.whero{padding:158px 0 0;}
.whero h1{font-size:clamp(2.6rem,6vw,4.8rem);max-width:15ch;margin:24px 0 0;}
.whero h1 em{font-style:italic;color:var(--accent-hi);}
.whero .sub{margin-top:22px;max-width:50ch;font-size:var(--t-1);color:var(--ink-soft);}
.proofstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:50px;}
.proofstrip .s{background:var(--panel);padding:34px 30px;}
.proofstrip .big{font-family:var(--serif);font-size:var(--t-4);line-height:1;}
.proofstrip .lab{color:var(--ink-soft);margin-top:12px;font-size:var(--t--1);line-height:1.45;}

/* ---------- filterable grid ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;}
.filters .fb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-2);background:transparent;padding:11px 16px;border-radius:2px;cursor:pointer;transition:.2s;}
.filters .fb:hover{color:var(--ink);border-color:var(--ink);}
.filters .fb.on{color:#fff;background:var(--accent);border-color:var(--accent);}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .25s ease, border-color .25s ease;}
.wcard:hover{border-color:var(--line-2);transform:translateY(-3px);}
/* --- premium filter transition --- */
@media (prefers-reduced-motion: no-preference){
  .wcard.w-anim{
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--w-i,0) * 55ms);
    will-change:opacity,transform;
  }
  .wcard.w-out{
    opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    transition-delay:calc(var(--w-i,0) * 32ms);
  }
  .wcard.w-enter{opacity:0;transform:translateY(28px) scale(.985);transition:none;}
}
.wcard .fr{width:100%;flex:none;border:0;border-radius:0;}
.wcard .body{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1;}
.wcard .ptype{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hi);}
.wcard h4{font-family:var(--serif);font-size:var(--t-2);margin:11px 0 8px;}
.wcard p{color:var(--ink-soft);font-size:var(--t--1);margin-bottom:20px;}
.wcard .wcta{margin-top:auto;}
.wcard .wcta .btn{width:100%;justify-content:center;}
.wcard.slot{border-style:dashed;background:transparent;}
.wcard.slot:hover{transform:none;border-color:var(--accent);}
.wcard.slot .ph{aspect-ratio:16/9;border-bottom:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center;}
.wcard.slot .ph span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.wcard[hidden]{display:none;}

/* ---------- case study ---------- */
.study{margin-bottom:108px;scroll-margin-top:100px;}
.study:last-of-type{margin-bottom:0;}
.study-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.study-head .num{font-family:var(--mono);font-size:var(--t--1);color:var(--accent-hi);letter-spacing:.1em;}
.study-head h2{font-family:var(--serif);font-size:var(--t-4);margin-top:12px;max-width:20ch;}
.study-head .tags{display:flex;gap:8px;flex-wrap:wrap;}
.vidframe{margin-bottom:38px;}
.pfr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;}
.pfr .col .lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:13px;}
.pfr .col h4{font-family:var(--serif);font-size:var(--t-1);margin-bottom:9px;font-weight:500;line-height:1.1;min-height:2.75rem;}
.pfr .col p{color:var(--ink-soft);font-size:var(--t-0);}
.pfr .col.res .big{font-family:var(--serif);font-size:var(--t-5);line-height:.95;color:var(--ink);margin-bottom:6px;}
.pfr .col.res .sub{color:var(--ink-soft);font-size:var(--t--1);}
.cta-row{display:flex;align-items:center;gap:20px;margin-top:34px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--line);}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .proofstrip,.pfr,.wgrid{grid-template-columns:1fr;}
  .whero{padding-top:128px;}
  .study{margin-bottom:76px;}
}
@media(min-width:681px) and (max-width:900px){
  .wgrid{grid-template-columns:1fr 1fr;}
}