.case-page { background: #f3f7fd; color: #07142e; }
.case-page .site-header { background: #0157dd; }
.case-main { padding-top: 76px; }
.case-hero { padding-block: clamp(42px, 7vw, 92px); background: #0157dd; color: #fff; }
.case-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.case-kicker { font: 600 0.68rem "IBM Plex Mono", monospace; letter-spacing: 0.07em; text-transform: uppercase; }
.case-hero h1 { max-width: 11ch; margin-block: 28px; font: 400 clamp(3.5rem, 8vw, 7.5rem)/0.84 "Archivo Black", sans-serif; letter-spacing: -0.075em; text-transform: uppercase; }
.case-lead { max-width: 62ch; font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.55; }
.case-visual { width: min(1180px, calc(100% - 40px)); margin: clamp(-30px, -3vw, -52px) auto 0; overflow: hidden; border: 10px solid #fff; border-radius: 26px; background: #fff; box-shadow: 0 25px 70px rgba(6, 38, 87, 0.16); }
.case-visual img { display: block; width: 100%; height: auto; }
.case-story { padding-block: clamp(58px, 8vw, 110px); }
.case-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 58px); }
.case-story article { padding-top: 18px; border-top: 1px solid #cdd9e9; }
.case-story h2 { margin-bottom: 18px; color: #0157dd; font: 600 0.66rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.case-story p { color: #46536a; line-height: 1.65; }
.case-tags { display: flex; margin-top: 44px; flex-wrap: wrap; gap: 9px; }
.case-tags span { padding: 9px 12px; border: 1px solid #b8cae4; border-radius: 999px; font: 600 0.62rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.case-actions { display: flex; margin-top: 38px; gap: 12px; flex-wrap: wrap; }
.case-actions a { display: inline-flex; min-height: 48px; padding-inline: 19px; align-items: center; border: 1px solid #0157dd; border-radius: 999px; color: #0157dd; font: 600 0.66rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.case-actions a:first-child { background: #0157dd; color: #fff; }
@media (max-width: 767px) {
  .case-main { padding-top: 66px; }
  .case-container,.case-visual { width: min(100% - 24px, 1180px); }
  .case-hero h1 { font-size: clamp(2.75rem, 12vw, 4.7rem); overflow-wrap: anywhere; }
  .case-story-grid { grid-template-columns: 1fr; }
  .case-visual { border-width: 5px; border-radius: 18px; }
}