.work-page main { overflow-wrap: anywhere; }
.work-intro { padding-block: clamp(60px, 9vw, 140px) 64px; }
.work-intro h1 { font-size: clamp(64px, 11vw, 170px); font-weight: 550; line-height: 1.05; letter-spacing: -.065em; max-width: 100%; }
.work-intro p { max-width: 620px; margin-top: 28px; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; }
.case { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 90px); border-top: 1px solid var(--line); padding-block: 64px 80px; }
.case:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.case:nth-child(even) .case-devices { order: 2; }
.case-devices { position: relative; min-width: 0; aspect-ratio: 1.35; display: flex; align-items: center; padding: 9% 16% 12% 7%; border-radius: 12px; background: var(--surface); }
.case-laptop { width: 100%; position: relative; }
.case-laptop-screen { padding: 7px 7px 10px; border-radius: 10px 10px 0 0; background: var(--brand-device); border: 1px solid var(--brand-device-edge); }
.case-laptop-screen picture { display: block; aspect-ratio: 12 / 7; overflow: hidden; }
.case-devices img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.case-laptop-base { width: 110%; margin-left: -5%; height: 8px; border-radius: 0 0 50% 50%; background: linear-gradient(var(--brand-device-base), var(--brand-device-edge)); }
.case-phone { position: absolute; right: 5%; bottom: 10%; width: 24%; aspect-ratio: 1 / 2.04; padding: 4px; border-radius: 20px; background: var(--brand-device); box-shadow: 0 14px 35px var(--brand-shadow-heavy); }
.case-phone picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 16px; }
.case-phone::after { content: ''; position: absolute; top: 4px; left: 34%; width: 32%; height: 5px; background: var(--brand-device); border-radius: 0 0 5px 5px; }
.case-copy { min-width: 0; }
.case-copy h2 { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.08; letter-spacing: -.045em; }
.case-trade { margin-top: 14px; font-size: 15px; }
.case-copy h3 { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; margin-top: 36px; color: var(--muted); }
.case-copy ul { margin: 16px 0 22px; padding-left: 18px; line-height: 1.65; font-size: 15px; }
.case-copy li + li { margin-top: 8px; }
.case-copy li::marker { color: var(--brand-accent); }
.case-visit { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; text-decoration: underline; text-underline-offset: 6px; }
.work-cta { padding-block: clamp(64px, 8vw, 120px); }
.work-cta h2 { max-width: 900px; font-size: clamp(44px, 7vw, 100px); line-height: 1.08; }
.work-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.work-cta .button { white-space: normal; text-align: center; }
@media (max-width: 800px) {
  .work-intro { padding-block: 56px 46px; }
  .case, .case:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 32px 52px; }
  .case:nth-child(even) .case-devices { order: 0; }
  .case-devices { aspect-ratio: 1.4; }
  .case-copy h3 { margin-top: 26px; }
  .case-phone { border-radius: 14px; padding: 3px; }
  .case-phone picture { border-radius: 11px; }
  .case-laptop-screen { padding: 5px 5px 7px; }
  .work-cta-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .work-page *, .work-page *::before, .work-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}