.case-study-page { background: #f4f5f5; color: #17242c; }
.case-hero { background: #062c47; color: #fff; padding: clamp(72px, 9vw, 132px) 0 clamp(66px, 8vw, 112px); overflow: hidden; }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: clamp(48px, 8vw, 120px); align-items: center; }
.case-back, .case-text-link { color: inherit; font-weight: 800; text-decoration: none; text-underline-offset: 5px; }
.case-back { display: inline-block; color: #c7e1ef; font-size: 13px; margin-bottom: 50px; }
.case-kicker { margin: 0 0 18px; color: #007fbf; font-size: 11px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.case-hero .case-kicker { color: #59b9e8; }
.case-hero h1 { max-width: 660px; color: #fff; font-size: clamp(42px, 5.5vw, 76px); letter-spacing: -.065em; line-height: .98; }
.case-lead { max-width: 620px; margin: 28px 0 0; color: #d4e2e8; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.65; }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.case-actions .case-text-link { color: #fff; font-size: 13px; }
.case-hero-image { margin: 0; transform: rotate(2deg); box-shadow: 0 32px 80px rgba(0, 0, 0, .28); }
.case-hero-image img, .case-screen img { display: block; width: 100%; height: auto; }
.case-overview { background: #111c23; color: #fff; }
.case-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-overview-grid div { min-height: 146px; display: flex; flex-direction: column; justify-content: center; padding: 26px 32px; border-left: 1px solid rgba(255,255,255,.12); }
.case-overview-grid div:first-child { border-left: 0; }
.case-overview-grid span { color: #8da6b2; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.case-overview-grid strong { margin-top: 11px; font-family: var(--font-display); font-size: 20px; line-height: 1.15; }
.case-section { padding: clamp(80px, 10vw, 150px) 0; }
.case-split { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(48px, 9vw, 150px); align-items: start; }
.case-section h2 { color: #17242c; font-size: clamp(38px, 5vw, 66px); letter-spacing: -.065em; line-height: .98; }
.case-copy { max-width: 630px; color: #52626b; font-size: 17px; line-height: 1.78; }
.case-copy p + p { margin-top: 22px; }
.case-platform { background: #e5ecef; }
.case-section-head { max-width: 720px; margin-bottom: 58px; }
.case-capability-list { border-top: 1px solid #b6c4cb; }
.case-capability-list article { display: grid; grid-template-columns: 84px minmax(190px, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: baseline; padding: 27px 0; border-bottom: 1px solid #b6c4cb; }
.case-capability-list span { color: #0088cc; font-size: 12px; font-weight: 900; }
.case-capability-list h3 { color: #17242c; font-size: clamp(22px, 2.5vw, 31px); letter-spacing: -.035em; line-height: 1.05; }
.case-capability-list p { margin: 0; color: #52626b; font-size: 15px; line-height: 1.7; }
.case-proof { background: #fff; }
.case-proof-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(300px, .72fr); gap: clamp(52px, 10vw, 168px); align-items: center; }
.case-screen { margin: 0; background: #e6ecee; overflow: hidden; box-shadow: 0 18px 50px rgba(8, 33, 48, .13); }
.case-screen-tall { max-width: 670px; }
.case-proof-copy { max-width: 460px; }
.case-proof-copy p:not(.case-kicker) { color: #52626b; font-size: 17px; line-height: 1.75; }
.case-proof-copy p + p { margin-top: 20px; }
.case-proof-copy .case-text-link { display: inline-block; margin-top: 26px; color: #006b9e; font-size: 14px; }
.case-build { background: #f4f5f5; }
.case-callout { background: #0088cc; color: #fff; }
.case-callout-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(290px, .7fr); gap: clamp(44px, 9vw, 140px); align-items: end; }
.case-callout h2 { color: #fff; }
.case-callout .case-kicker { color: #d5f1ff; }
.case-callout p:not(.case-kicker) { margin: 0; color: #e7f6fd; font-size: 17px; line-height: 1.75; }
.case-callout .btn { margin-top: 26px; background: #fff; border-color: #fff; color: #07577f; }
.case-study-page a:hover { text-decoration: underline; }
.case-study-page .btn:hover { text-decoration: none; }
@media (max-width: 900px) { .case-hero-grid, .case-split, .case-proof-grid, .case-callout-grid { grid-template-columns: 1fr; } .case-hero-image { max-width: 760px; transform: none; } .case-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-overview-grid div:nth-child(3) { border-left: 0; } .case-capability-list article { grid-template-columns: 52px 1fr; gap: 12px 22px; } .case-capability-list p { grid-column: 2; } }
@media (max-width: 600px) { .case-back { margin-bottom: 32px; } .case-overview-grid { grid-template-columns: 1fr; } .case-overview-grid div { min-height: 112px; padding: 22px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } .case-overview-grid div:first-child { border-top: 0; } .case-capability-list article { grid-template-columns: 36px 1fr; } .case-capability-list h3 { font-size: 23px; } .case-section { padding: 78px 0; } }