/* Case studies — section index and individual case study pages.

   These pages load /assets/site.css FIRST and this file second. site.css
   carries the shared chrome: design tokens, nav, masthead, card list, footer.
   Duplicating it here would mean every future nav change had to be made twice.

   Everything below is either case-study-specific or an intentional override. */

/* ── Section index ── */
.cs-list .card-meta { color: var(--br); }

.cs-note {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px 90px;
  color: var(--lw);
  font-size: 15px;
  line-height: 1.7;
}
.cs-note strong { color: var(--mw); font-weight: 700; }

/* ── Case study page ── */
.cs { padding: 130px 40px 100px; }
.cs-wrap { max-width: 760px; margin: 0 auto; }

/* third-axis.css scopes its heading size to `.essay h1`, so a case study page
   would otherwise fall back to the browser default. Keep these two in step. */
.cs h1 {
  font-size: clamp(32px, 5.4vw, 48px);
  color: var(--ox);
  line-height: 1.14;
  letter-spacing: -.5px;
}

.cs-client {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--pa2);
}
.cs-client img {
  width: 132px;
  height: auto;
  flex: 0 0 auto;
}
.cs-client-text { flex: 1 1 260px; min-width: 0; }
.cs-client-text p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mw);
}
.cs-client-text a { color: var(--ox); text-decoration: underline; text-underline-offset: 3px; }
.cs-client-text a:hover { color: var(--br); }

/* Pull quote — the testimonial */
.cs-quote {
  background: var(--nb);
  border-left: 4px solid var(--br);
  padding: 44px 46px;
  margin: 52px 0;
}
.cs-quote blockquote {
  border: 0; padding: 0; margin: 0;
  color: var(--iv);
  font-size: 19.5px;
  line-height: 1.7;
  font-style: italic;
}
.cs-quote figcaption {
  margin-top: 24px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 13px; letter-spacing: 1px; line-height: 1.6;
  color: var(--bl);
}
.cs-quote figcaption span { display: block; color: var(--lw); letter-spacing: .5px; }

/* The one-pager figure */
.cs-figure { margin: 48px 0; }
.cs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pa2);
  box-shadow: 0 12px 34px rgba(92,26,34,.10);
}
.cs-figure figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--lw);
  text-align: center;
}

/* Closing call to action */
.cs-cta {
  margin-top: 64px;
  padding: 42px 44px;
  background: var(--bp);
  border-top: 3px solid var(--br);
  text-align: center;
}
.cs-cta h2 { font-size: 28px; line-height: 1.2; color: var(--ox); margin-bottom: 14px; }
.cs-cta p {
  font-size: 17px; line-height: 1.65; color: var(--mw);
  max-width: 32em; margin: 0 auto 28px;
}
.cs-cta .sub-btn { background: var(--ox); }

@media (max-width: 780px) {
  .cs { padding: 132px 24px 80px; }
  .cs-note { padding: 0 24px 70px; }
  .cs-quote { padding: 32px 26px; }
  .cs-quote blockquote { font-size: 17.5px; }
  .cs-cta { padding: 32px 22px; }
  .cs-client img { width: 108px; }
}