/* ── Case study pages ─────────────────────────────────────────────── */
.cs-breadcrumb { padding: 100px 5% 0; }
.cs-breadcrumb ol { list-style: none; display: flex; gap: .4rem; align-items: center; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.cs-breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .4rem; color: var(--border); }
.cs-breadcrumb a { color: var(--muted); }
.cs-breadcrumb a:hover { color: var(--green-d); }
.cs-breadcrumb li[aria-current="page"] { color: var(--ink); font-weight: 600; }

.cs-hero { padding: 2rem 5% 0; max-width: 1200px; margin: 0 auto; }
.cs-hero-top { max-width: 760px; }
.cs-h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; margin: .5rem 0; color: var(--ink); }
.cs-tagline { font-size: 1.1rem; color: var(--muted); line-height: 1.6; }
.cs-meta-row { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem; }
.cs-meta-item { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--body); }
.cs-meta-item i, .cs-meta-item svg { width: 16px; height: 16px; color: var(--green-d); }
.cs-live-link { color: var(--green-d); text-decoration: underline; text-underline-offset: 3px; }

.cs-hero-img { margin-top: 2.4rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.cs-hero-img img { width: 100%; height: auto; display: block; object-fit: cover; }

.cs-overview-grid { display: grid; grid-template-columns: 1fr 320px; gap: 3.5rem; align-items: start; }
.cs-overview-main .h2 { margin-bottom: .8rem; }
.cs-mt { margin-top: 2.4rem; }
.cs-body { font-size: 1rem; line-height: 1.75; color: var(--body); }
.cs-h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: .4rem; }
.cs-approach-item { margin-bottom: 1.6rem; }
.cs-approach-item:last-child { margin-bottom: 0; }

.cs-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1rem; }
.cs-feature-card { padding: 1.3rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); }

.cs-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.4rem; }
.cs-side-box { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; background: var(--white); }
.cs-side-h { font-family: 'Bricolage Grotesque', sans-serif; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green-d); margin-bottom: .8rem; }
.cs-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag-list li { font-size: .78rem; font-weight: 600; background: var(--off); border: 1px solid var(--border); color: var(--body); padding: .3rem .7rem; border-radius: 99px; }
.cs-side-cta { background: var(--off); }

@media (max-width: 900px) {
  .cs-overview-grid { grid-template-columns: 1fr; }
  .cs-sidebar { position: static; }
  .cs-features-grid { grid-template-columns: 1fr; }
}