.case-banner { position:relative; height:50dvh; min-height:320px; display:grid; align-items:center; overflow:clip; isolation:isolate; background:#173d39; }
.case-banner::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(9,63,57,.78) 0%,rgba(9,63,57,.5) 34%,rgba(9,63,57,.14) 64%,rgba(9,63,57,.08) 100%); pointer-events:none; }
.case-banner-image { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
.case-banner-inner { position:relative; z-index:2; }
.case-banner h1 { max-width:none; margin:0; color:#fff; font-size:clamp(3.5rem,8vw,7.5rem); line-height:.9; letter-spacing:-.08em; text-shadow:0 3px 18px rgba(0,0,0,.16); }

.case-list { padding-block:var(--section); background:var(--surface); }
.case-intro { display:grid; gap:1rem; max-width:67ch; }
.case-note { display:none; }
.case-grid { display:grid; gap:1.25rem; margin-top:2.5rem; }
.case-card { display:grid; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.case-card[hidden] { display:none; }
.case-card-media { min-height:235px; overflow:hidden; background:var(--mint); }
.case-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.case-card:hover .case-card-media img { transform:scale(1.035); }
.case-card-body { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(1.35rem,3vw,2rem); }
.case-card-label { margin:0; color:var(--aqua-deep); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.case-card h2 { max-width:16ch; margin-top:.8rem; font-size:clamp(1.35rem,1.15rem + .5vw,1.8rem); }
.case-card p { margin:.75rem 0 0; color:var(--muted); font-size:.95rem; }
.case-focus { width:100%; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--line); }
.case-focus strong { display:block; color:var(--ink); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.case-focus p { margin-top:.3rem; }
.case-detail-status { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.4rem; color:var(--aqua-deep); font-size:.88rem; font-weight:850; }
.case-detail-status::after { content:"→"; font-size:1.05rem; }
.case-pagination { display:flex; align-items:center; justify-content:center; gap:1.15rem; margin-top:2.25rem; padding-top:1rem; }

.case-cta { padding:0 0 var(--section); background:var(--surface); }
.case-cta-panel { display:grid; gap:1.5rem; align-items:center; padding:clamp(1.6rem,5vw,3.5rem); border-radius:var(--radius); background:var(--gold); color:#173f39; }
.case-cta-panel h2 { max-width:16ch; }
.case-cta-panel p { max-width:49ch; margin:1rem 0 0; font-weight:650; }
.case-cta-panel .button { justify-self:start; background:var(--ink); }

@media (min-width:680px) { .case-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .case-card { grid-template-rows:245px 1fr; } .case-card-media { min-height:0; } }
@media (min-width:800px) { .case-cta-panel { grid-template-columns:1fr auto; } }
@media (max-width:799px) { .case-banner::after { background:linear-gradient(180deg,rgba(9,63,57,.38) 0%,rgba(9,63,57,.72) 46%,rgba(9,63,57,.95) 100%); } .case-banner-image { object-position:70% 50%; } }
@media (max-width:479px) { .case-pagination { gap:.65rem; } }