/* Case Studies — cards, archive filter, single. Uses --ds-* tokens. */
.cs-grid { display: grid; grid-template-columns: repeat(var(--cs-cols, 3), 1fr); gap: 24px; max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-edge); box-sizing: border-box; }
@media (max-width: 850px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-card { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: var(--shadow-card); text-decoration: none; color: var(--ds-ink); transition: transform .2s ease, box-shadow .2s ease; }
.cs-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(21,28,36,.14); }
.cs-card__media { position: relative; aspect-ratio: 4/3; background: var(--ds-green-tint); }
.cs-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card__badge { position: absolute; top: 10px; left: 10px; background: var(--ds-orange); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: var(--radius-pill); }
.cs-card__body { padding: 14px 16px 18px; }
.cs-card__title { font-size: var(--ds-fs-h3); line-height: 1.25; margin: 0 0 6px; }
.cs-card__excerpt { font-size: 14.5px; color: var(--ds-grey); margin: 0; }
.cs-grid__heading { max-width: var(--ds-container); margin: 0 auto 18px; padding-inline: var(--ds-edge); font-family: "Roboto", sans-serif; font-size: var(--ds-fs-h2); color: var(--ds-ink); }
.cs-grid__empty { text-align: center; color: var(--ds-grey); padding: 40px 0; }
/* Archive filter chips */
.cs-filters { max-width: var(--ds-container); margin: 0 auto 24px; padding-inline: var(--ds-edge); display: flex; flex-wrap: wrap; gap: 10px; }
.cs-chip { border: 1.5px solid rgba(21,28,36,.15); background: #fff; color: var(--ds-ink); font: 600 13px/1 "Roboto", sans-serif; padding: 9px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: all .15s ease; }
.cs-chip:hover { border-color: var(--ds-orange); }
.cs-chip.is-active { background: var(--ds-orange); border-color: var(--ds-orange); color: #fff; }
.cs-card.is-hidden { display: none; }
/* Single case study */
.cs-single { max-width: var(--ds-container); margin: 0 auto; padding: 32px var(--ds-edge); }
.cs-single__hero img { width: 100%; border-radius: var(--radius-lg); display: block; margin-bottom: 18px; }
.cs-single__title { font-size: var(--ds-fs-display); line-height: 1.1; margin: 0 0 6px; }
.cs-single__meta { color: var(--ds-grey); margin: 0 0 24px; }
.cs-single__body { display: grid; grid-template-columns: 260px 1fr; gap: 32px; }
@media (max-width: 760px) { .cs-single__body { grid-template-columns: 1fr; } }
.cs-specs { display: flex; flex-direction: column; gap: 12px; align-self: start; background: var(--ds-green-tint); border-radius: var(--radius-md); padding: 18px; }
.cs-specs div { display: flex; flex-direction: column; }
.cs-specs span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-grey); }
.cs-specs strong { font-size: 16px; color: var(--ds-ink); }
.cs-quote { font-size: 20px; font-style: italic; color: var(--ds-ink); border-left: 4px solid var(--ds-orange); padding-left: 18px; margin: 32px 0; }
.cs-quote cite { display: block; font-size: 14px; font-style: normal; color: var(--ds-grey); margin-top: 8px; }
.cs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.cs-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); }
.cs-nearby { margin-top: 40px; }