.client-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.client-case-card {
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--site-page-line, var(--stp-line));
  border-radius: 7px;
  background: var(--site-page-surface, var(--stp-surface));
  box-shadow: var(--site-shadow-card);
}

.client-case-media { display: block; min-height: 270px; overflow: hidden; }
.client-case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.client-case-card:hover .client-case-media img { transform: scale(1.025); }
.client-case-card > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 24px; }
.client-case-card small { color: var(--stp-brick); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.client-case-card h3 { margin: 12px 0 10px; color: var(--site-page-text, var(--stp-text)); font-size: 24px; line-height: 1.12; }
.client-case-card h3 a { color: inherit; text-decoration: none; }
.client-case-card p { margin: 0; color: var(--site-page-muted, var(--stp-muted)); font-size: 16px; line-height: 1.5; }
.client-case-link { margin-top: auto; padding-top: 20px; color: var(--stp-brick); font-weight: 900; text-decoration: none; }
.client-case-link:hover, .client-case-link:focus-visible { text-decoration: underline; }

.case-hero { padding: 12px 0 44px; }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 30px; align-items: stretch; }
.case-hero-copy,
.case-hero-media { min-width: 0; border: 1px solid var(--site-page-line, var(--stp-line)); border-radius: 7px; background: var(--site-page-surface, var(--stp-surface)); box-shadow: var(--site-shadow-card); }
.case-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 38px; }
.case-hero-copy h1 { margin: 14px 0 18px; color: var(--site-page-text, var(--stp-text)); font-size: 54px; font-weight: 900; line-height: 1.02; overflow-wrap: break-word; }
.case-hero-copy > p { margin: 0; color: var(--site-page-muted, var(--stp-muted)); font-size: 18px; line-height: 1.58; }
.case-hero-media { overflow: hidden; margin: 0; }
.case-hero-media img { width: 100%; height: 100%; min-height: 490px; object-fit: cover; }
.case-hero-media figcaption { padding: 10px 14px; color: var(--site-page-muted, var(--stp-muted)); font-size: 13px; }

.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; }
.case-facts div { min-width: 0; padding: 12px; border: 1px solid var(--site-page-line, var(--stp-line)); border-radius: 6px; background: var(--site-page-soft, var(--stp-soft)); }
.case-facts dt { color: var(--site-page-muted, var(--stp-muted)); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.case-facts dd { margin: 5px 0 0; color: var(--site-page-text, var(--stp-text)); font-size: 15px; font-weight: 850; line-height: 1.3; }

.case-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.case-summary-grid > div,
.case-note { padding: 28px; border: 1px solid var(--site-page-line, var(--stp-line)); border-radius: 7px; background: var(--site-page-surface, var(--stp-surface)); }
.case-summary-grid h2 { margin: 12px 0 14px; color: var(--site-page-text, var(--stp-text)); font-size: 36px; line-height: 1.1; }
.case-summary-grid p { margin: 0; color: var(--site-page-muted, var(--stp-muted)); font-size: 17px; line-height: 1.65; }
.case-note { border-left: 4px solid var(--stp-brick); }
.case-note strong { color: var(--site-page-text, var(--stp-text)); font-size: 19px; }
.case-note p { margin-top: 9px; }

.case-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case-gallery-grid figure { overflow: hidden; margin: 0; border: 1px solid var(--site-page-line, var(--stp-line)); border-radius: 7px; background: var(--site-page-surface, var(--stp-surface)); }
.case-gallery-grid img { width: 100%; height: 280px; object-fit: cover; }
.case-gallery-grid figcaption { padding: 12px 14px; color: var(--site-page-muted, var(--stp-muted)); font-size: 14px; }

.site-page.stp-theme-dark .client-case-card,
.site-page.stp-theme-dark .case-hero-copy,
.site-page.stp-theme-dark .case-hero-media,
.site-page.stp-theme-dark .case-summary-grid > div,
.site-page.stp-theme-dark .case-note,
.site-page.stp-theme-dark .case-gallery-grid figure { background: rgba(20, 27, 34, .94); }

@media (max-width: 1100px) {
  .client-case-grid { grid-template-columns: 1fr; }
  .case-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .case-hero-media img { min-height: 400px; }
}

@media (max-width: 780px) {
  .client-case-card { grid-template-columns: 1fr; }
  .client-case-media { min-height: 220px; }
  .case-hero { padding-top: 0; }
  .case-hero-copy { padding: 22px; }
  .case-hero-copy h1 { font-size: 34px; }
  .case-hero-media img { min-height: 250px; }
  .case-facts,
  .case-summary-grid,
  .case-gallery-grid { grid-template-columns: 1fr; }
  .case-gallery-grid img { height: 240px; }
}

@media (max-width: 430px) {
  .case-hero-copy h1 { font-size: 30px; }
  .client-case-card h3 { font-size: 22px; }
}