/* Number-free case studies. Interactive decoration never replaces the link. */
.v11-case-target { position:absolute; width:88%; }
.v11-case-wine { z-index:2; top:18px; left:0; --rest-rotation:-2deg; }
.v11-case-cleaning { z-index:1; right:0; bottom:92px; --rest-rotation:3deg; }
.v11-case-target:is(.is-magnetic,:hover,:focus-within) { z-index:4; }
.v11-case-target:focus-within { z-index:5; }
.v11-case-card { display:block; overflow:hidden; border:1px solid #d9dde5; border-radius:20px; background:#fff; color:#0b1220; text-decoration:none; box-shadow:0 24px 65px #0b12202b; transform:rotate(var(--rest-rotation)); transition:transform .18s cubic-bezier(.2,.85,.2,1),box-shadow .18s,border-color .18s; }
.v11-case-card img { display:block; width:100%; height:auto; aspect-ratio:103/56; object-fit:cover; object-position:top; }
.v11-case-label,.v11-case-action { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; font-size:18px; line-height:1.5; font-weight:750; }
.v11-case-label { color:#525c6d; }
.v11-case-action { border-top:1px solid #e3e7ed; color:#2349cf; background:#f6f8ff; }
.v11-case-target:is(.is-magnetic,:hover,:focus-within) .v11-case-card { border-color:#355cff; box-shadow:0 30px 70px #16295a38; }
.v11-case-card:focus-visible { outline:3px solid #254cff; outline-offset:5px; }
.v9-work-list > a { grid-template-columns:minmax(0,1fr) auto; }
@media (min-width:981px) and (hover:hover) and (pointer:fine) {
  .v9-hero-visual { min-height:680px; }
}
@media (hover:hover) and (pointer:fine) and (min-width:981px) and (prefers-reduced-motion:no-preference) {
  .v11-case-target.is-magnetic .v11-case-card { transform:translate(var(--pull-x,0px),var(--pull-y,0px)) rotate(0) scale(1.025); }
}
/* Separate cards on touch/narrow layouts: neither is hidden behind the other. */
@media (max-width:980px),(hover:none),(pointer:coarse) {
  .v9-hero-visual { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-height:0; }
  .v11-case-target { position:relative; width:100%; inset:auto; }
  .v11-case-card { transform:none; border-radius:16px; }
  .v9-hero-visual figcaption { position:relative; inset:auto; max-width:none; box-shadow:none; }
}
@media (prefers-reduced-motion:reduce) {
  .v11-case-card { transition:none; transform:none; }
}
.case-page { --case-accent:#285573; --case-tint:#edf4f8; }
.case-page.case-wine { --case-accent:#756025; --case-tint:#f5f0e5; }
.case-hero { padding:38px 0 60px; background:var(--case-tint); }
.case-hero h1 { max-width:920px; font-size:clamp(30px,4.4vw,54px); line-height:1.5; letter-spacing:-.025em; margin:14px 0 22px; }
.case-kicker { color:var(--case-accent); font-size:18px; font-weight:750; margin:24px 0 0; }
.case-lead { max-width:780px; font-size:20px; line-height:1.95; }
.case-meta { display:flex; gap:10px 24px; flex-wrap:wrap; margin:24px 0 0; padding:18px 0 0; border-top:1px solid #bac4cc; font-size:18px; }
.case-meta div { display:flex; gap:12px; flex-wrap:wrap; }
.case-meta dt { font-weight:750; }
.case-meta dd { margin:0; }
.case-overview { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:44px; align-items:start; }
.case-overview > *, .case-step > * { min-width:0; }
.case-shot { margin:0; overflow:hidden; border:1px solid #dbe0e6; border-radius:18px; background:white; box-shadow:0 16px 45px #0b12200f; }
.case-shot img { width:100%; height:auto; display:block; }
.case-shot figcaption { padding:14px 18px; color:#586373; font-size:18px; line-height:1.7; }
.case-brief h2,.case-section-title { font-size:clamp(26px,3vw,36px); line-height:1.55; margin:0 0 20px; }
.case-brief p,.case-step p,.case-tradeoff p { font-size:18px; line-height:1.95; }
.case-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:26px; border-top:1px solid #d0d8df; border-bottom:1px solid #d0d8df; }
.case-flow div { padding:18px 10px; display:grid; gap:6px; font-size:18px; }
.case-flow div+div { border-left:1px solid #d0d8df; }
.case-flow b { color:var(--case-accent); }
.case-flow span { color:#4e5968; }
.case-steps { display:grid; gap:0; }
.case-step { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:40px; padding:30px 0; border-top:1px solid #d5dce3; }
.case-step h3 { margin:0; font-size:24px; line-height:1.65; }
.case-step p { margin:0; }
.case-step-label { display:block; color:var(--case-accent); font-size:18px; font-weight:750; margin-bottom:8px; }
.case-tradeoff { padding:32px; border-left:4px solid var(--case-accent); background:var(--case-tint); margin-top:30px; }
.case-tradeoff h3 { font-size:24px; line-height:1.6; margin:0 0 12px; }
.case-next-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.case-next-links a { min-height:48px; max-width:100%; white-space:normal; text-align:center; }
.case-related { padding-top:28px; border-top:1px solid #d5dce3; margin-top:34px; }
.case-related a { display:inline-flex; align-items:center; min-height:48px; font-size:18px; font-weight:700; }
.case-note { font-size:18px; color:#586373; line-height:1.8; margin-top:20px; }
.works-detail-link { display:inline-flex; align-items:center; min-height:48px; padding:12px 20px; background:#183fd0; color:white; border-radius:10px; font-weight:750; font-size:18px; margin-bottom:12px; text-decoration:none; }
.works-detail-link:hover { background:#102e9d; color:white; }
.works-detail-link:focus-visible,.case-next-links a:focus-visible { outline:3px solid #2854ef; outline-offset:4px; }
@media(max-width:800px) {
  .case-overview,.case-step { grid-template-columns:minmax(0,1fr); gap:24px; }
  .case-tradeoff { padding:24px 20px; }
  .case-hero { padding-bottom:42px; }
}
@media(max-width:480px) {
  .case-flow { grid-template-columns:minmax(0,1fr); }
  .case-flow div { padding:14px 0; }
  .case-flow div+div { border-left:0; border-top:1px solid #d0d8df; }
  .case-next-links { display:grid; }
  .v11-case-label,.v11-case-action { padding:12px; }
}