.work{background:#080808;padding-bottom:58px}
.work-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 42px}
.work-heading h2{font-size:clamp(72px,9vw,136px);line-height:.88}
.work-heading h2 span{color:var(--accent)}
.work-heading p{font-size:18px;color:#bdbbb6;margin-bottom:5px}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(4,clamp(170px,18vw,255px));gap:16px}
.work-tile{position:relative;display:block;isolation:isolate;overflow:hidden;background:#121212;border:1px solid #30302e;min-width:0}
.work-ceramic{grid-column:1/9;grid-row:1/3}
.work-interior{grid-column:9/13;grid-row:1/3}
.work-carpet{grid-column:1/5;grid-row:3/5}
.work-wheels{grid-column:5/9;grid-row:3/4}
.work-leather{grid-column:9/13;grid-row:3/5}
.work-delivery{grid-column:5/9;grid-row:4/5}
.work-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s cubic-bezier(.2,.65,.3,1)}
.work-ceramic img{object-position:50% 58%}.work-interior img{object-position:48% 50%}.work-carpet img{object-position:54% 48%}.work-wheels img{object-fit:contain;object-position:50% 50%;background:#080808}.work-leather img{object-position:52% 57%}.work-delivery img{object-position:56% 62%}
.work-tile:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.13) 60%,rgba(0,0,0,.87));pointer-events:none}
.work-caption{position:absolute;z-index:1;bottom:24px;left:24px;right:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.work-caption strong{display:block;font:600 clamp(23px,2.5vw,36px)/1 var(--display);letter-spacing:.02em}
.work-support{display:block;font-size:14px;line-height:1.35;color:#ddd9d2;margin-top:8px}
.work-arrow{font-size:25px;line-height:1;color:var(--accent);transition:transform .3s}
.work-destination{position:absolute;top:18px;right:18px;z-index:1;font-size:12px;letter-spacing:.08em;background:#080808d9;padding:8px 10px;opacity:0;transition:opacity .2s}
.work-note{color:#99968f;font-size:12px;letter-spacing:.04em;margin-top:18px}
.work-tile:focus-visible{outline-offset:4px;outline:2px solid var(--accent);z-index:2}
.work-tile:focus-visible .work-destination{opacity:1}
@media(hover:hover) and (pointer:fine){.work-support{opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}.work-tile:hover img,.work-tile:focus-visible img{transform:scale(1.025)}.work-tile:hover .work-support,.work-tile:focus-visible .work-support{opacity:1;transform:none}.work-tile:hover .work-destination{opacity:1}.work-tile:hover .work-arrow{transform:translate(2px,-2px)}}
@media(max-width:1100px){.work-caption{bottom:18px;left:18px;right:18px}.work-caption strong{font-size:25px}.work-grid{gap:12px}}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;gap:14px}.work-tile{grid-column:auto;grid-row:auto;aspect-ratio:4/5}.work-ceramic,.work-delivery{grid-column:1/-1;aspect-ratio:3/2}.work-support{opacity:1;transform:none}.work-caption strong{font-size:30px}.work-destination{display:none}}
@media(max-width:560px){.work-heading{display:block;margin-bottom:28px}.work-heading h2{font-size:80px}.work-heading p{font-size:16px;margin-top:18px}.work-grid{display:flex;flex-direction:column;gap:18px}.work-tile{aspect-ratio:4/5}.work-ceramic,.work-delivery{aspect-ratio:3/2}.work-wheels{aspect-ratio:1/1}.work-caption strong{font-size:28px}.work-caption{bottom:20px;left:20px;right:20px}.work{padding-bottom:34px}}
@media(prefers-reduced-motion:reduce){.work-tile img,.work-arrow,.work-support,.work-destination{transition:none!important;transform:none!important}}
