.cases-page-body { background: #050505; }
.cases-page-main { min-height: 100vh; }
.cases-page-head { padding-top: 188px; padding-bottom: 46px; }
.breadcrumbs { margin-bottom: 28px; display: flex; align-items: center; gap: 10px; color: #555; font-size: 12px; line-height: 1.4; }
.breadcrumbs a { color: #8a8a8a; transition: color .2s ease; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs [aria-current="page"] { color: #5f5f5f; }
.cases-page-head h1 { margin: 0; color: #fff; font-size: clamp(64px, 4.35vw, 84px); line-height: .99; letter-spacing: -4px; font-weight: 400; }

.case-catalog { min-height: 420px; }
.case-filter { margin-bottom: 52px; display: flex; flex-wrap: wrap; gap: 10px; }
.case-filter button, .case-catalog-empty button { min-height: 42px; padding: 0 21px; border: 1px solid #3b3b3b; border-radius: 999px; background: transparent; color: #858585; cursor: pointer; font: inherit; font-size: 13px; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.case-filter button:hover, .case-catalog-empty button:hover { border-color: #999; color: #fff; transform: translateY(-1px); }
.case-filter button.is-active { border-color: #fff; background: #fff; color: #080808; }
.case-filter button:focus-visible, .case-catalog-card:focus-visible, .case-catalog-empty button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.case-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.case-catalog-column { display: grid; gap: 46px; align-content: start; }
.case-catalog-card { display: block; min-width: 0; animation: case-card-in .35s ease both; }
.case-catalog-card img { display: block; width: 100%; border-radius: 20px; object-fit: cover; background: #111; transition: transform .35s ease, filter .35s ease; }
.case-catalog-card:hover img { transform: translateY(-4px); filter: brightness(1.04); }
.case-catalog-card strong { display: block; margin-top: 15px; color: #fff; font-size: 15px; line-height: 1.25; font-weight: 500; }
.case-catalog-card > span { display: block; margin-top: 7px; color: #5f5f5f; font-size: 13px; line-height: 1.35; }
.case-catalog-card .ratio-portrait { aspect-ratio: 5 / 6; }
.case-catalog-card .ratio-tall { aspect-ratio: 2 / 3; }
.case-catalog-card .ratio-wide { aspect-ratio: 4 / 3; }
.case-catalog-card.case-naturalist img { object-position: 50% 50%; }
.case-catalog-empty { min-height: 280px; place-items: center; align-content: center; text-align: center; color: #666; }
.case-catalog-empty:not([hidden]) { display: grid; }
.case-catalog-empty p { margin: 0 0 20px; font-size: 15px; }
.cases-page-main .cta-section { padding-top: 120px; }

@keyframes case-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .case-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cases-page-head { padding-top: 148px; padding-bottom: 34px; }
  .breadcrumbs { margin-bottom: 20px; font-size: 11px; }
  .cases-page-head h1 { font-size: 48px; letter-spacing: -2.7px; }
  .case-filter { width: calc(100% + 14px); margin-bottom: 34px; padding-right: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .case-filter::-webkit-scrollbar { display: none; }
  .case-filter button { flex: 0 0 auto; min-height: 38px; padding-inline: 17px; font-size: 12px; }
  .case-catalog-grid { gap: 10px; }
  .case-catalog-column { gap: 30px; }
  .case-catalog-card img { border-radius: 14px; }
  .case-catalog-card strong { margin-top: 10px; font-size: 12px; }
  .case-catalog-card > span { margin-top: 5px; font-size: 10px; }
  .cases-page-main .cta-section { padding-top: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-catalog-card { animation: none; }
}