/* Case studies page — extends site.css (loaded after it). Same tokens, no overrides of existing rules. */

/* page hero (shorter than the home hero) */
.page-hero{background:radial-gradient(120% 130% at 25% 15%,#2C313A 0%,#15171B 70%);color:#fff;padding:72px 0 76px}
.page-hero .eyebrow{color:var(--blue-bright)}
.page-hero :focus-visible{outline-color:var(--blue-bright)}
.page-hero h1{font-size:44px;line-height:1.1;margin:14px 0 0;font-weight:700;letter-spacing:-.8px;max-width:20ch}
.page-hero h1 .b{color:var(--blue-bright)}
.page-hero p.sub{color:#c2c8d0;font-size:18px;margin:20px 0 0;max-width:56ch}

/* jump list */
.cs-jump{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.cs-jump li{min-width:0}
.cs-jump a{display:inline-block;color:#fff;font-size:14px;font-weight:500;padding:8px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px}
.cs-jump a:hover{border-color:#fff;text-decoration:none}

/* case list */
.cs-wrap{padding:72px 0 24px}
.cs-list{display:grid;gap:28px;margin:0;padding:0}
.cs{background:#fff;border:1px solid var(--g100);border-radius:18px;padding:36px;min-width:0}
.cs:target{border-color:var(--blue);box-shadow:0 18px 48px rgba(27,95,208,.10)}
.cs-head{max-width:760px}
.cs-head h2{margin:8px 0 6px;font-size:26px;line-height:1.2;color:var(--g900);letter-spacing:-.3px}
.cs-ctx{margin:0;color:var(--g500);font-size:15.5px}

.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.cs-col{min-width:0;border-top:3px solid var(--g100);padding-top:16px}
.cs-col.after{border-top-color:var(--blue)}
.cs-col h3{margin:0 0 8px;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--g500)}
.cs-col.after h3{color:var(--blue-deep)}
.cs-col p{margin:0;color:var(--g700);font-size:16px}

.cs-decision{margin-top:26px;background:var(--surface);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;padding:16px 20px}
.cs-decision h3{margin:0 0 6px;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--blue-deep)}
.cs-decision p{margin:0;color:var(--g900);font-size:16.5px;font-weight:500}

.cs-note{max-width:760px;margin:36px 0 0;color:var(--g500);font-size:14.5px}
.cs-cta{padding:56px 0 84px}

@media (max-width:880px){
  .page-hero{padding:56px 0 60px}
  .page-hero h1{font-size:32px}
  .page-hero p.sub{font-size:17px}
  .cs-wrap{padding:52px 0 16px}
  .cs{padding:24px 20px;border-radius:14px}
  .cs-head h2{font-size:22px}
  .cs-cols{grid-template-columns:1fr;gap:20px}
  .cs-cta{padding:40px 0 64px}
}