.case-studies-page {
  --case-blue: #2563eb;
  --case-blue-light: #eff6ff;
  --case-blue-border: #dbeafe;
  --case-heading: #0f172a;
  --case-body: #334155;
  --case-muted: #657087;
  --case-light: #94a3b8;
  --case-border: #e2e8f0;
  --case-shadow: 0 8px 24px rgba(15, 23, 42, .04);
  --case-shadow-hover: 0 14px 36px rgba(37, 99, 235, .12);
  padding: 0 0 64px;
  background: #fff;
  color: var(--case-body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
}
.navbar.case-studies-navbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1100 !important;
  border-bottom-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}
.navbar.case-studies-navbar.is-scrolled {
  border-bottom-color: rgba(226, 232, 240, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  backdrop-filter: blur(12px) !important;
}
.case-studies-page *, .case-studies-page *::before, .case-studies-page *::after { box-sizing: border-box; }
.case-studies-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 12px; }
.case-studies-hero { position: relative; min-height: 380px; padding: 132px 0 88px; overflow: hidden; background: var(--case-hero-image, url('../images/article-support-banner-bg.png')) center center / cover no-repeat; }
.case-studies-hero-content { max-width: 600px; }
.case-studies-hero-eyebrow { margin-bottom: 10px; color: var(--case-light); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.case-studies-hero-title { margin: 0 0 14px; color: var(--case-heading); font-size: 38px; font-weight: 800; line-height: 1.25; }
.case-studies-hero-description { margin: 0; color: var(--case-muted); font-size: 16px; line-height: 1.65; }
.case-studies-page > .case-studies-container { padding-top: 48px; }
.case-studies-grid { display: grid; grid-template-columns: repeat(var(--case-columns, 4), minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
.case-study-card { display: flex; min-width: 0; min-height: 320px; flex-direction: column; overflow: hidden; border: 1px solid var(--case-border); border-radius: 16px; background: #fff; box-shadow: var(--case-shadow); color: inherit; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.case-study-card[hidden] { display: none !important; }
.case-study-card:hover { border-color: #cbd5e1; box-shadow: var(--case-shadow-hover); transform: translateY(-4px); }
.case-study-thumb { position: relative; display: grid; height: 180px; overflow: hidden; background: #f8fafc; }
.case-study-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.case-study-thumb-placeholder { display: grid; place-items: center; color: var(--case-blue); font-size: 32px; }
.case-study-card:hover .case-study-thumb img { transform: scale(1.05); }
.case-study-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 22px 24px 20px; }
.case-study-body strong { display: -webkit-box; overflow: hidden; margin: 0 0 8px; color: var(--case-heading); font-size: 17px; font-weight: 700; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 1; transition: color .2s ease; }
.case-study-card:hover .case-study-body strong { color: var(--case-blue); }
.case-study-description { display: -webkit-box; overflow: hidden; margin: 0 0 18px; color: var(--case-muted); font-size: 13px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.case-study-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; color: var(--case-muted); font-size: 12px; }
.case-study-meta span { display: flex; align-items: center; min-width: 0; gap: 6px; font-weight: 500; white-space: nowrap; }
.case-study-meta b { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border: 1px solid var(--case-blue-border); border-radius: 50%; background: var(--case-blue-light); color: var(--case-blue); font-size: 10px; font-weight: 700; }
.case-study-author-avatar { overflow: hidden; }
.case-study-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.case-study-meta time { flex: 0 0 auto; color: var(--case-light); font-weight: 400; }
.case-studies-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; }
.case-studies-pagination button, .case-studies-pagination a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--case-border); border-radius: 6px; background: #fff; color: #475569; font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.case-studies-pagination .case-page-nav { width: 36px; height: 36px; border-radius: 50%; color: #64748b; }
.case-studies-pagination button:hover:not(:disabled), .case-studies-pagination a:hover { border-color: var(--case-blue); background: #f0f5ff; color: var(--case-blue); cursor: pointer; }
.case-studies-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.case-studies-pagination .is-active { border-color: var(--case-blue); background: var(--case-blue); box-shadow: 0 4px 10px rgba(37, 99, 235, .25); color: #fff; font-weight: 700; }
.case-studies-pagination span { padding: 0 4px; color: var(--case-light); font-size: 13px; }
.case-studies-empty { padding: 92px 24px; border: 1px solid var(--case-border); border-radius: 16px; color: var(--case-muted); text-align: center; }
.case-studies-empty i { color: var(--case-blue); font-size: 34px; }
.case-studies-empty h2 { margin: 16px 0 6px; color: var(--case-heading); font-size: 20px; }
.case-studies-empty p { margin: 0; }
html.enterprise-list-motion-pending .case-studies-page .case-studies-hero-content,
html.enterprise-list-motion-pending .case-studies-page .case-study-card { opacity: 0; transform: translateY(32px) scale(.985); }
.case-studies-page .is-reveal-entering { animation: case-studies-enter .72s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--case-delay, 0ms); }
.case-studies-page .case-studies-hero.is-reveal-entering { animation: none; }
.case-studies-page .case-studies-hero.is-reveal-entering .case-studies-hero-content { animation: case-studies-hero-enter .78s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--case-delay, 0ms); }
@keyframes case-studies-enter { from { opacity: 0; transform: translateY(32px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes case-studies-hero-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.case-studies-page.is-motion-ready [data-case-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--case-delay, 0ms); }
.case-studies-page.is-motion-ready [data-case-reveal].is-revealed { opacity: 1; transform: none; }
.case-studies-page.is-motion-ready .case-study-card.is-revealed { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; transition-delay: 0s; }
.case-studies-page.is-motion-ready .case-study-card.is-revealed:hover { border-color: #cbd5e1; box-shadow: var(--case-shadow-hover); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .case-studies-page.is-motion-ready [data-case-reveal] { opacity: 1; transform: none; transition: none; } .case-studies-page .is-reveal-entering, .case-studies-page .case-studies-hero.is-reveal-entering .case-studies-hero-content { animation: none; } }
@media (max-width: 1200px) { .case-studies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .case-studies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .case-studies-page { padding: 0 0 40px; } .case-studies-container { padding: 0 16px; } .case-studies-page > .case-studies-container { padding-top: 32px; } .case-studies-hero { min-height: 300px; padding: 104px 0 72px; background-image: var(--case-hero-image-mobile, var(--case-hero-image)); } .case-studies-hero-title { font-size: 32px; } .case-studies-grid { grid-template-columns: 1fr; gap: 18px; } .case-study-card { min-height: 0; } }