/* Case study pages. Shared by every /case-studies/<slug>/ page. Uses the site tokens and the blog's body typography. */
:root { --ink:#0C3651; --teal:#0891B2; --body:#334155; --muted:#64748B; --line:#E2E8F0; --tint:#F2F6F8; --navy:#0C3651; }
body { margin:0; font-family:'Open Sans',system-ui,sans-serif; color:var(--body); background:#fff; -webkit-font-smoothing:antialiased; }
.cs-wrap { max-width:1412px; margin:0 auto; padding:0 66px; }
@media (max-width:1024px) { .cs-wrap { padding:0 32px; } }
@media (max-width:768px) { .cs-wrap { padding:0 20px; } }
.cs-skip { position:absolute; left:-9999px; }
.cs-skip:focus { left:16px; top:16px; z-index:300; background:#fff; padding:8px 12px; border-radius:6px; }
.cs-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cs-eyebrow { display:block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:0 0 14px; }
a:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.cs-link { color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* Hero background: same gradient as the HCOs & Researchers hero */
main { position:relative; overflow-x:clip; }
main::before { content:""; position:absolute; top:0; left:0; right:0; height:640px; pointer-events:none; z-index:0; background:linear-gradient(160deg, rgba(8,145,178,0.07) 0%, rgba(224,242,247,0.3) 40%, rgba(255,255,255,1) 100%); -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); mask-image:linear-gradient(to bottom,#000 55%,transparent 100%); }
.cs-crumbs, .cs-hero, .cs-compare { position:relative; z-index:1; }

/* Breadcrumb row */
.cs-crumbs { padding-top:92px; }
.cs-crumbs .cs-wrap { display:flex; align-items:center; max-width:1412px; padding:0 66px; }
@media (max-width:1024px) { .cs-crumbs .cs-wrap { padding:0 32px; } }
@media (max-width:768px) { .cs-crumbs .cs-wrap { padding:0 20px; } }
.cs-crumbs a { display:inline-block; font-size:14px; color:#64748B; text-decoration:none; transition:color .15s; }
.cs-crumbs a:hover { color:var(--ink); }
.cs-crumbs .cs-here { color:var(--ink); font-weight:600; }

/* Hero (centered) */
.cs-hero { padding:20px 0 48px; text-align:center; }
.cs-hero-logo { display:block; height:30px; width:auto; margin:0 auto 18px; }
.cs-result { margin:0 0 14px; font-size:48px; font-weight:800; line-height:1.1; letter-spacing:-0.025em; color:var(--ink); }
.cs-result span { color:var(--teal); }
.cs-sub { margin:14px auto 0; max-width:640px; font-size:clamp(1.1rem,1.8vw,1.25rem); font-weight:600; line-height:1.5; letter-spacing:-.005em; color:var(--ink); text-wrap:balance; }

/* Before / after */
.cs-hero-link { margin:18px 0 0; text-align:center; font-size:15px; }
.cs-intro { margin:28px auto 0; max-width:860px; text-align:center; font-size:17px; font-weight:400; line-height:1.8; color:#475569; }
.cs-chips { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.cs-chips li { font-size:13px; font-weight:600; color:var(--ink); background:var(--tint); border:1px solid var(--line); border-radius:999px; padding:6px 14px; }
.cs-compare { padding:0 0 48px; }
.cs-compare-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:720px; margin:0 auto; }
.cs-cmp-card { border-radius:18px; padding:28px 32px; border:1px solid var(--line); background:#fff; box-shadow:0 10px 28px rgba(12,54,81,.09), 0 2px 6px rgba(12,54,81,.05); }
.cs-cmp-card--after { background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:0 14px 32px rgba(12,54,81,.24), 0 3px 8px rgba(12,54,81,.12); }
.cs-cmp-label { margin:0 0 14px; font-size:14px; font-weight:600; color:var(--ink); }
.cs-cmp-card--after .cs-cmp-label { color:#B3C8D8; }
.cs-cmp-n { margin:0; font-size:clamp(1.9rem,3.4vw,2.5rem); font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink); }
.cs-cmp-card--after .cs-cmp-n { color:#fff; }
.cs-cmp-unit { margin:10px 0 0; font-size:14px; font-weight:400; color:var(--ink); }
.cs-cmp-card--after .cs-cmp-unit { color:#fff; }
.cs-cmp-caption { margin:16px 0 0; text-align:center; font-size:14.5px; color:var(--muted); }
.cs-cmp-arrow { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:16px; }


/* Sticky section tabs */
.cs-tabs { position:sticky; top:64px; z-index:20; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.cs-tabs .cs-wrap { display:flex; gap:28px; overflow-x:auto; }
.cs-tabs a { position:relative; padding:16px 0; font-size:14px; font-weight:600; color:#64748B; text-decoration:none; white-space:nowrap; }
.cs-tabs a b { margin-right:8px; font-size:11px; letter-spacing:.06em; }
.cs-tabs a:hover { color:var(--ink); }
.cs-tabs a.is-active { color:var(--teal); }
.cs-tabs a.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--teal); }

/* Story sections */
.cs-sec { padding:56px 0; border-bottom:1px solid var(--line); scroll-margin-top:110px; }
.cs-sec .cs-wrap { display:grid; grid-template-columns:200px minmax(0,1fr); gap:56px; align-items:start; }
.cs-sec-id { position:sticky; top:130px; }
.cs-sec-num { display:block; font-size:3rem; font-weight:400; line-height:1; letter-spacing:-.03em; color:#6B8DAD; }
.cs-sec-id .cs-eyebrow { margin:10px 0 0; color:var(--muted); letter-spacing:.14em; }
.cs-sec-body { max-width:760px; }
.cs-sec-body h2 { font-size:26px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:0 0 1.25rem; text-wrap:balance; }
.cs-sec-body h3 { font-size:19px; font-weight:700; line-height:1.3; color:var(--ink); margin:1.75rem 0 .5rem; }
.cs-sec-body p { font-size:18px; line-height:1.8; color:var(--body); margin:0 0 1.5rem; }
.cs-sec-body p:last-child { margin-bottom:0; }
.cs-sec-body p.cs-eyebrow { font-size:12px; line-height:1.4; margin:0 0 14px; }
.cs-sec-body p.cs-callout { margin:2rem 0 0; padding:4px 0 4px 20px; border-left:3px solid var(--teal); font-size:18px; font-weight:600; line-height:1.5; color:var(--ink); }
.cs-quote { margin:2rem 0; padding:28px 30px; background:var(--tint); border-radius:14px; }
.cs-quote blockquote { margin:0; font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--ink); }
.cs-quote figcaption { margin-top:12px; font-size:14px; color:var(--muted); }
.cs-studies { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.cs-study { background:var(--tint); border:1px solid var(--line); border-radius:14px; padding:24px; }
.cs-study-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.cs-study-head .cs-eyebrow { margin:0; color:var(--muted); }
.cs-study-n { font-size:14px; font-weight:700; color:#6B8DAD; }
.cs-study h4 { font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); margin:0 0 10px; }
.cs-sec-body .cs-study p { font-size:16px; line-height:1.7; margin:0; }
.cs-ledger { display:grid; grid-template-columns:1fr; margin-top:2.5rem; padding-top:28px; border-top:1px solid var(--line); }
.cs-ledger > div { padding-right:28px; }
.cs-ledger > div + div { padding:0 0 0 28px; border-left:1px solid var(--line); }
.cs-ledger .cs-eyebrow { color:var(--ink); }
.cs-ledger ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cs-ledger li { position:relative; padding-left:18px; font-size:16px; line-height:1.55; color:var(--body); }
.cs-ledger li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:#9AD1D6; }

/* Dark quote banner */
.cs-banner-quote { padding:56px 0 0; }
.cs-bq { background:var(--navy); color:#fff; border-radius:22px; padding:64px 40px; text-align:center; }
.cs-bq-logo { display:block; height:26px; width:auto; margin:0 auto 22px; }
.cs-bq .cs-eyebrow { color:#9AD1D6; }
.cs-bq blockquote { margin:0 auto; max-width:20ch; font-size:clamp(2rem,4.6vw,3.25rem); font-weight:700; line-height:1.1; letter-spacing:-.035em; text-wrap:balance; }
.cs-bq-name { margin:28px 0 0; font-size:14px; font-weight:700; }
.cs-bq-role { margin:2px 0 0; font-size:14px; color:#B3C8D8; }

/* About + more */
.cs-about { padding:56px 0; border-bottom:1px solid var(--line); }
.cs-about .cs-wrap { display:block; }
.cs-about-head { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:0 0 14px; }
.cs-about-head h2 { margin:0; }
.cs-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid var(--line); flex-shrink:0; background:var(--tint); }
.cs-avatar--initials { display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); background:#E3F3F9; border-color:transparent; }
.cs-about h2 { margin:0 0 14px; font-size:26px; font-weight:700; line-height:1.25; letter-spacing:-.01em; color:var(--ink); }
.cs-about p { margin:0 0 22px; max-width:68ch; font-size:18px; line-height:1.8; color:#334155; }
.cs-about .cs-btn-paper { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:9999px; border:1.5px solid rgba(12,54,81,.25); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; transition:background .18s ease, border-color .18s ease; }
.cs-about .cs-btn-paper:hover { background:rgba(12,54,81,.05); border-color:rgba(12,54,81,.4); }
.cs-more { padding:56px 0 88px; }
.cs-more .cs-wrap { display:flex; align-items:center; justify-content:space-between; gap:32px; }
.cs-more h2 { margin:0; max-width:18ch; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; line-height:1.15; letter-spacing:-.025em; color:var(--ink); }
.cs-btn { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:9999px; border:1.5px solid rgba(12,54,81,.25); background:transparent; color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background .18s ease, border-color .18s ease; flex-shrink:0; }
.cs-btn:hover { background:rgba(12,54,81,.05); border-color:rgba(12,54,81,.4); }

@media (max-width:960px) {
  .cs-crumbs { padding-top:88px; }
  .cs-compare-grid { grid-template-columns:1fr; }
  .cs-cmp-arrow { position:relative; top:auto; left:auto; transform:none; justify-self:center; margin:-30px 0; z-index:2; rotate:90deg; }
  .cs-sec .cs-wrap { grid-template-columns:1fr; gap:20px; }
  .cs-sec-id { position:static; display:flex; align-items:baseline; gap:14px; }
  .cs-sec-id .cs-eyebrow { margin:0; }
  .cs-sec-num { font-size:2rem; }
  .cs-studies, .cs-ledger { grid-template-columns:1fr; }
  .cs-ledger > div, .cs-ledger > div + div { padding:0; border-left:0; }
  .cs-ledger > div + div { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); }
  .cs-more .cs-wrap { flex-direction:column; align-items:stretch; }
  .cs-more .cs-btn { width:100%; }
}
@media (max-width:560px) {
  .cs-result { font-size:34px; }
  .cs-wrap { padding:0 20px; }
  .cs-crumbs .cs-wrap { flex-direction:column; align-items:flex-start; gap:6px; }
  .cs-sec { padding:48px 0; }
  .cs-sec-body p { font-size:17px; }
  .cs-sec-body h2 { font-size:22px; }
  .cs-sec-body h3 { font-size:17px; }
  .cs-cmp-card { padding:24px; }
  .cs-bq { padding:44px 22px; }
}
@media (prefers-reduced-motion:reduce) { .cs-btn { transition:none; } }