/* Listing and featured studies. Document pages keep their own styles. */
.cs-portfolio-mobile { display: none; }
.cs-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.cs-footer-links a,
.statement-footer .cs-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.cs-footer-links a:hover,
.statement-footer .cs-footer-links a:hover { color: var(--text-brand-strong); }
.statement-footer .cs-footer-links { margin-top: 24px; }
.cs-featured {
  padding: 112px var(--gutter);
  background: var(--surface-page);
  color: var(--text-body);
  font-family: 'Work Sans', sans-serif;
}
.cs-wrap { max-width: 1320px; margin-inline: auto; }
.cs-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 48px;
}
body .cs-heading h2 {
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1.02;
}
.cs-intro {
  max-width: 38ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.cs-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-card);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cs-card:hover {
  border-color: var(--sky-blue-500);
  box-shadow: 0 8px 24px rgba(45, 45, 45, .06);
}
.cs-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 38px;
}
.cs-industry {
  margin: 0;
  font-family: 'League Spartan', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
}
.cs-number {
  font-family: 'League Spartan', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: var(--text-brand);
}
.cs-number::after {
  content: '';
  display: block;
  width: 18px;
  height: 3px;
  margin-top: 8px;
  background: var(--yellow-500);
}
body .cs-card :is(h2, h3) {
  font-family: 'League Spartan', sans-serif;
  font-weight: 500;
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: pretty;
  margin: 0 0 18px;
}
.cs-summary {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 30px;
  color: var(--text-muted);
}
.cs-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.cs-card-link::after { content: ''; position: absolute; inset: 0; border-radius: 8px; }
.cs-card-link:focus-visible { outline: none; }
.cs-card:has(.cs-card-link:focus-visible) { outline: 3px solid var(--text-brand); outline-offset: 4px; }
.cs-card-link span[aria-hidden] { font-size: 24px; line-height: 1; }
.cs-actions { margin-top: 40px; }
.cs-library { font-family: 'Work Sans', sans-serif; }
.cs-library .nav-links a[aria-current="page"] { color: var(--text-brand); background: var(--surface-brand-soft); }
.cs-library main { padding: 160px var(--gutter) 112px; }
.cs-library-header { padding-bottom: 56px; border-bottom: 1px solid var(--border-soft); }
body .cs-library-header h1 {
  font-size: clamp(60px, 7.5vw, 104px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 0 0 24px;
}
.cs-library-header .cs-intro { max-width: 54ch; }
.cs-list-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0;
  font-size: 14px;
  color: var(--text-muted);
}
.cs-library-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 32px var(--gutter);
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--text-muted);
}
/* Keep the longer menu label comfortable on small phones. */
@media (max-width: 400px) {
  body .nav .nav-links a { font-size: 13px; padding-inline: 3px; }
  body .nav .brand { padding-inline: 5px; }
}
@media (max-width: 360px) {
  body .nav .nav-pill { gap: 2px; }
  body .nav .brand { min-width: 28px; padding-inline: 0; justify-content: center; }
  body .nav .nav-links { gap: 0; }
  body .nav .nav-links a { font-size: 12px; padding-inline: 2px; }
  body .nav .nav-pill .nav-cta { font-size: 12px !important; padding-inline: 8px; margin-left: 2px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .cs-grid { gap: 16px; }
  .cs-card { padding: 24px; }
  body .cs-card :is(h2, h3) { font-size: 26px; }
}
@media (max-width: 760px) {
  .cs-footer-links { column-gap: 20px; }
  .statement-footer .cs-footer-links { margin-top: 20px; }
  body .nav .nav-pill { flex-wrap: wrap; border-radius: 24px; gap: 0 4px; }
  body .nav .nav-pill .nav-cta { margin-left: auto; }
  body .nav .nav-links { order: 3; flex: 0 0 100%; justify-content: center; margin-left: 0; }
  body .nav .nav-links a { font-size: 13px; min-height: 36px; padding-inline: 6px; }
  .cs-portfolio-desktop { display: none; }
  .cs-portfolio-mobile { display: inline; }
  .cs-featured { padding: 72px 24px; }
  .cs-heading { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .cs-intro { font-size: 17px; }
  .cs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-card { padding: 28px 24px; }
  .cs-card-top { margin-bottom: 28px; }
  .cs-library main { padding: 132px 24px 72px; }
  .cs-library-header { padding-bottom: 36px; }
  body .cs-library-header h1 { font-size: 60px; }
  .cs-list-caption { font-size: 13px; }
  .cs-library-footer { align-items: flex-start; flex-direction: column; padding: 28px 24px; }
}
@media (max-width: 360px) {
  body .nav .nav-links a { font-size: 12px; padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card { transition: none; }
}
/* Case study motion: cards rise in one after another, the yellow bar draws in,
   and the card lifts on hover. Uses the site's own .reveal hook from main.js. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on .cs-grid .cs-card.reveal {
    transition:
      opacity .9s ease-out var(--cs-delay, 0s),
      transform 1.1s cubic-bezier(.2,.7,.2,1) var(--cs-delay, 0s),
      translate .35s cubic-bezier(.2,.7,.2,1),
      border-color .25s ease,
      box-shadow .25s ease;
  }
  .cs-grid .cs-card:nth-child(2) { --cs-delay: .14s; }
  .cs-grid .cs-card:nth-child(3) { --cs-delay: .28s; }
  html.reveal-on .cs-card.reveal .cs-number::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--cs-delay, 0s) + .55s);
  }
  html.reveal-on .cs-card.reveal.in .cs-number::after { transform: none; }
  .cs-card:hover {
    translate: 0 -6px;
    box-shadow: 0 16px 36px rgba(45, 45, 45, .09);
  }
  .cs-card-link span[aria-hidden] { transition: translate .3s cubic-bezier(.2,.7,.2,1); }
  .cs-card:hover .cs-card-link span[aria-hidden] { translate: 3px -3px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  /* Stacked cards each reveal as they scroll in, so no stagger needed. */
  .cs-grid .cs-card:nth-child(n) { --cs-delay: 0s; }
}