@import url("styles.css");

.case-hero { padding: 7.5rem 0 4rem; border-bottom: 1px solid var(--line); }
.case-hero h1 { max-width: 960px; margin-bottom: 1.5rem; }
.case-lede { max-width: 650px; margin: 0; color: var(--muted); font-size: 1.25rem; line-height: 1.5; }
.case-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.case-facts div { min-height: 64px; border-left: 1px solid var(--line); padding-left: .8rem; }
.case-facts span { display: block; color: var(--muted); font: 400 .67rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.case-facts strong { display: block; margin-top: .45rem; font: 600 .98rem/1.25 var(--sans); }
.case-body { max-width: 920px; padding: 5.5rem 0; }
.case-body h2 { margin: 3.1rem 0 1rem; font: 600 2.45rem/1 var(--serif); letter-spacing: -.035em; }
.case-body p, .case-body li { max-width: 720px; font-size: 1.08rem; line-height: 1.63; }
.case-body ul { padding-left: 1.1rem; }.case-body li { margin: .45rem 0; }
.case-note { margin: 2rem 0; padding: 1.25rem; background: #e6ebe9; border-left: 4px solid var(--accent); font-size: .97rem; line-height: 1.55; }
.next-case { display: flex; justify-content: space-between; gap: 1rem; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font: 500 .78rem/1.3 var(--mono); text-transform: uppercase; }
@media (max-width: 720px) { .case-hero { padding: 4.5rem 0 2.8rem; }.case-facts { grid-template-columns: repeat(2, 1fr); }.case-body { padding: 3.8rem 0; }.case-body h2 { font-size: 2rem; } }