.service-back { display: inline-flex; align-items: center; width: max-content; font-family: var(--font-ui); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cap); transition: color .2s ease; }
.service-back:hover, .service-back:focus-visible { color: var(--hl); }

.service-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(.7rem, 1.3vw, 1.15rem); max-width: 1380px; margin: 0 auto; padding: 0 var(--gap); }
.service-photo-card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; width: 100%; padding: 0; border: 0; background: rgba(18, 16, 14, .72); cursor: zoom-in; overflow: hidden; user-select: none; transition: filter .25s ease, background .25s ease; }
.service-photo-card::before { content: ''; position: absolute; inset: 0; background: rgba(18,16,14,.5); animation: shimmer 2.8s ease-in-out infinite; z-index: 1; }
.service-photo-card.loaded::before, .service-photo-card.errored::before { opacity: 0; animation: none; transition: opacity .5s ease; }
.service-photo-card img { width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transition: opacity .55s ease, transform .55s ease, filter .25s ease; }
.service-photo-card.loaded img { opacity: 1; }
.service-photo-card:hover img, .service-photo-card:focus-visible img { transform: scale(1.018); filter: brightness(1.04); }
.service-photo-card:focus-visible { outline: 1px solid rgba(196, 180, 154, .72); outline-offset: 2px; }
.service-photo-card.errored { border: 1px solid rgba(196, 180, 154, .18); }

@media (max-width: 760px) {
  .service-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding-inline: .85rem; }
  .service-section-head { padding-inline: .85rem; }
}