/* Project pages (/work/<slug>): breadcrumb, image gallery and the More work cards.
   The page layout itself comes from case.css (meta4, stage, row), so they match the case study.
   The service pages and /about load this after projects.css for the About layout at the end. */
.crumbs a{color:inherit;text-decoration:none;transition:color .5s}.crumbs a:hover{color:var(--o)}
.crumbs [aria-current]{color:var(--t)}
.row h2.lbl{margin:0;font-weight:400}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.gal img,.gal video{display:block;width:100%;height:auto}

/* More work: the same grey-to-colour cards as the work page */
.rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.rel .card{display:block;border-top:1px solid var(--line);padding-top:20px;color:inherit;text-decoration:none;transition:border-color .6s}
.rel .card:hover{border-top-color:var(--o)}
.rel .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:20px}
.rel .thumb img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.rel .thumb .clr{position:absolute;inset:0;filter:none;opacity:0;transition:opacity .6s,transform 1.4s cubic-bezier(.2,.6,.2,1)}
.rel .card:hover .thumb img{transform:scale(1.05)}.rel .card:hover .thumb .clr{opacity:1}
.rel .nm{margin:0 0 8px;font-weight:300;letter-spacing:-.015em;line-height:1.1;font-size:clamp(22px,2vw,30px);transition:color .5s}
.rel .card:hover .nm{color:var(--o)}
.rel .bl{margin:0;font-size:16px;line-height:1.65;color:var(--m)}
.svc{display:inline-block;margin-top:40px}
@media (max-width:760px){.gal,.rel{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rel .thumb img,.rel .thumb .clr{transition:none}.rel .card:hover .thumb img{transform:none}}

/* About page: text beside the portrait, as on the home page */
.abt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(48px,6vw,96px);align-items:center}
.abtimg{display:block;width:100%;max-width:440px;margin-left:auto;aspect-ratio:2/3;object-fit:cover;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
@media (max-width:820px){.abt{grid-template-columns:1fr;gap:40px}.abtimg{margin-left:0}}