#works{scroll-margin-top:30px}


.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}


.work-card{min-width:0}


.work-photo{position:relative;display:block;overflow:hidden;border-radius:16px;background:#eeefed;aspect-ratio:4/3;text-decoration:none;color:#fff}


.work-photo img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .25s ease}


.work-photo:hover img{transform:scale(1.025)}


.work-photo span{position:absolute;bottom:12px;right:12px;padding:7px 11px;border-radius:20px;background:#17212dd9;color:#fff;font-size:11px;font-weight:600}


.work-photo:focus-visible{outline:3px solid #075fa8;outline-offset:4px}


#works .work-card h3{font-size:19px;line-height:1.4;margin:17px 0 8px}


#works .work-card p{font-size:14px;line-height:1.6;margin:0;color:#52616d}


.works-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;margin-top:32px;border-top:1px solid #ccd2d6}


.works-contact p{margin:0;line-height:1.6}


.work-viewer{border:0;background:#fff;color:#17212d;border-radius:16px;padding:16px;width:min(900px,94vw);max-height:94dvh;box-sizing:border-box}


.work-viewer::backdrop{background:#101923de}


.work-viewer img{display:block;width:100%;height:auto;max-height:76dvh;object-fit:contain;background:#f0f1ef}


.work-viewer-top{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}


.work-viewer h2{font:600 16px/1.4 Montserrat,Arial,sans-serif;margin:0}


.work-viewer button{font:600 14px Montserrat,Arial,sans-serif;cursor:pointer;border:1px solid #ccd2d6;border-radius:8px;background:white;padding:10px 14px;color:#17212d}


@media(max-width:850px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


@media(max-width:520px){.works-grid{grid-template-columns:1fr;gap:28px}.works-contact{align-items:flex-start;flex-direction:column}.work-viewer{padding:10px}}


@media(prefers-reduced-motion:reduce){.work-photo img{transition:none}}





.work-video{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#17212d}.work-video video{display:block;width:100%;height:100%;object-fit:contain;background:#17212d}




.work-video{aspect-ratio:16/9}


.work-viewer-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}.work-viewer-nav[hidden]{display:none}.work-viewer-nav output{font:500 14px Montserrat,Arial,sans-serif}