/* ── Work case studies ─────────────────────────────── */

/* Liquid-glass plate. Three-stop gloss curve over a blur, inset hairline and
   top lip instead of a real border, house shadow. Same recipe as the site's
   other glass surfaces — keep the layer counts matched between base and hover
   or the shadow hard-swaps. */
.wrk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.wrk-stat{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:30px 24px;text-align:center;border-radius:var(--radius-lg);background:linear-gradient(158deg,rgba(255,255,255,0.74) 0%,rgba(255,255,255,0.4) 46%,rgba(255,255,255,0.6) 100%);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6),inset 0 1px 0 rgba(255,255,255,0.9),var(--shadow-card);transition:transform var(--t-card-out) var(--ease-soft),box-shadow var(--t-card-out) var(--ease-soft)}
.wrk-stat:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.72),inset 0 1px 0 rgba(255,255,255,1),0 22px 52px rgba(20,32,26,0.13);transition-duration:var(--t-card-in)}
.wrk-stat b{font-family:var(--font-heading);font-weight:500;font-size:46px;line-height:1;letter-spacing:-0.045em;color:var(--coffee);font-variant-numeric:tabular-nums}
.wrk-stat span{font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--text-secondary);line-height:1.4}

/* The one-line verdict. Full container width — deliberately not --prose, so its
   edges line up with the stat row directly above it. */
.wrk-verdict{margin-top:22px;padding:26px 30px;border-radius:var(--radius-lg);background:linear-gradient(158deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.36) 48%,rgba(255,255,255,0.56) 100%);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6),inset 0 1px 0 rgba(255,255,255,0.9),var(--shadow-card)}
.wrk-verdict b{display:block;font-size:12px;font-weight:500;letter-spacing:0.09em;text-transform:uppercase;color:var(--coffee);margin-bottom:9px}
.wrk-verdict p{margin:0;font-family:var(--font-heading);font-weight:500;font-size:21px;line-height:1.4;letter-spacing:-0.025em;color:var(--ink);max-width:60ch}
.wrk-verdict em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;color:var(--coffee)}

/* The table follows either a .sec-head (which carries its own 48px) or the
   stats row, so its gap is a sibling rule rather than a blanket margin-top.
   .wrk-verdict always follows a card grid, so it takes a plain margin. */
.wrk-stats+.wrk-table-scroll{margin-top:22px}
.wrk-table-scroll{overflow-x:auto;margin-bottom:8px}
.wrk-table-scroll .mrs-table{min-width:560px}

.wrk-download{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.wrk-method{margin:0;font-size:13.5px;font-weight:400;line-height:1.65;color:var(--text-secondary);max-width:var(--prose)}
.wrk-method b{font-weight:500;color:var(--text-body)}

@media (max-width:900px){
.wrk-stats{grid-template-columns:repeat(2,1fr)}
.wrk-verdict{text-align:center}
.wrk-verdict p{max-width:none}
.wrk-download{align-items:center;text-align:center}
.wrk-method{text-align:left}
}

@media (max-width:679px){
.wrk-stat{padding:24px 18px}
.wrk-stat b{font-size:36px}
.wrk-verdict{padding:22px}
.wrk-verdict p{font-size:19px}
}