/* Service detail pages (services/<slug>.html, generated by tools/services/build.py) */
.svp-hero { padding: 48px 0 24px; }
.svp-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.svp-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--black); margin-bottom: 24px; }
.svp-crumb a { color: var(--label); transition: color .2s; }
.svp-crumb a:hover { color: var(--black); }
.svp-crumb span[aria-hidden] { color: var(--label); }
.svp-copy h1 { font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.svp-copy .lead { margin-top: 20px; max-width: 520px; }
.svp-copy .hero-actions { display: flex; margin-top: 32px; }
.svp-media { aspect-ratio: 4 / 3; border-radius: var(--r-panel); overflow: hidden; background: var(--grey); }
.svp-media img { width: 100%; height: 100%; object-fit: cover; }
.sv-page .sl-logos { padding-top: 72px; }

/* What we make: three columns of plain items on hairlines */
.svp-formats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.svp-formats li { padding: 22px 0; border-top: 1px solid var(--border); }
.svp-formats b { display: block; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.svp-formats span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--body); }

/* Recent work: three tiles, Our work style (photo, centred white logo, no caption) */
.svp-work .split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.svw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svw-tile { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; isolation: isolate; background: var(--black); }
.svw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.svw-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(27, 27, 27, .28); transition: background-color .4s ease; }
.svw-logo { position: relative; z-index: 2; height: 40px; width: auto; max-width: 55%; object-fit: contain; filter: brightness(0) invert(1); }
.svw-tile:hover .svw-img { transform: scale(1.04); }
.svw-tile:hover::after { background: rgba(27, 27, 27, .12); }

@media (max-width: 960px) {
  .svp-hero { padding-top: 24px; }
  .svp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .svp-copy h1 { font-size: 40px; line-height: 46px; }
  .svp-formats { grid-template-columns: 1fr 1fr; }
  .svw-grid { grid-template-columns: 1fr; }
  .svp-work .split-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) { .svp-formats { grid-template-columns: 1fr; } }
/* The pinned step reel already leaves room at its end, so the next section starts close */
.sreel + .svp-work { padding-top: 24px; }
.svp-make { padding-bottom: 48px; }
/* Phones: service page hero centred like every other hero */
@media (max-width: 960px) {
  .svp-hero { text-align: center; }
  .svp-hero .svp-crumb, .svp-hero .hero-actions { justify-content: center; }
  .svp-hero .lead { margin-left: auto; margin-right: auto; }
}