.case-page { color: #18120a; font-weight: 400; }
.case-study { width: min(650px, calc(100% - 40px)); margin: 0 auto; padding: 100px 0; overflow: visible; }
.case-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 80px; font-size: 28px; font-weight: 400; line-height: 1.2; }
.case-title img { flex: 0 0 24px; border-radius: 30%; }
.case-study p { margin: 0; font-size: 18px; line-height: 1.2; }
.case-introduction { display: grid; gap: 16px; margin-bottom: 60px; }
.case-section { display: grid; gap: 32px; margin-top: 60px; }
.case-section h2 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 400; }
.case-content { display: grid; gap: 20px; min-width: 0; }
.case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case-media, .case-pair img, .case-pair video { display: block; width: 100%; height: auto; border-radius: 60px; background: #f7f7f7; }
video.case-media { aspect-ratio: 650 / 336; object-fit: cover; }
video.case-media[height="650"] { aspect-ratio: 1; }
.case-pair video { aspect-ratio: 315 / 500; object-fit: cover; }
.back-link { position: fixed; z-index: 10; top: 28px; left: 28px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .9); backdrop-filter: blur(12px); transition: background 300ms ease, transform 450ms var(--ease); }
.back-link span { font: 400 30px/1 Arial, sans-serif; }
.directions-link { justify-self: start; color: rgb(24 18 10 / .5); font-size: 18px; transition: color 250ms ease; }
@media (hover: hover) {
  .back-link:hover { background: #f1f1f1; transform: translateX(-3px); }
  .directions-link:hover { color: #18120a; }
}
.back-link:active { transform: translateX(-5px); }
@media (max-width: 760px) {
  .case-study { padding-top: 84px; padding-bottom: 64px; }
  .case-title { margin-bottom: 56px; }
  .case-introduction { margin-bottom: 48px; }
  .case-section { margin-top: 48px; gap: 24px; }
  .case-section h2 { font-size: 26px; }
  .case-study p { line-height: 1.35; }
  .case-pair { gap: 12px; }
  .case-media { border-radius: 32px; }
  .case-pair img, .case-pair video { border-radius: 28px; }
  .back-link { top: 16px; left: 12px; }
}