/* UX review step 1: related work in the existing cinematic portfolio style. */
.detail>.detail-content{padding-bottom:36px}
.related-work{padding:32px 6% 76px;border-top:1px solid #ffffff23;scroll-margin-top:110px}
.related-work-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:26px}
.related-work-heading h2{font-size:clamp(27px,3vw,42px);letter-spacing:-.035em;margin:0;color:#fff}
.related-work-heading>a{font-size:12px;font-weight:700;letter-spacing:.12em;text-decoration:underline;text-underline-offset:6px;white-space:nowrap}
.related-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.related-case{display:block;background:#09151e;border:1px solid #ffffff28;transition:border-color .2s}
.related-case-image{aspect-ratio:16/9;overflow:hidden;background:#061118}
.related-case-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.related-case-copy{padding:23px 25px 27px}
.related-case-copy>span{display:block;font-size:12px;line-height:1.6;letter-spacing:.12em;color:#c9d5dd;margin-bottom:12px}
.related-case-copy h3{font-size:clamp(22px,2.4vw,34px);line-height:1.12;letter-spacing:-.03em;margin:0;color:#fff}
.related-case:hover{border-color:#b9cbd9}.related-case:hover img{transform:scale(1.025)}
.related-case:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-width:700px){.detail>.detail-content{padding-bottom:28px}.related-work{padding:28px 6% 56px}.related-case-grid{grid-template-columns:1fr;gap:22px}.related-case-copy{padding:20px 22px 24px}.related-work-heading{flex-wrap:wrap;gap:16px}}
@media(prefers-reduced-motion:reduce){.related-case,.related-case-image img{transition:none}.related-case:hover img{transform:none}}