/* Services: an index of the seven, then one section per service. */

.svc-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hairline) solid var(--color-line);
  counter-reset: svc;
}
.svc-index li { border-bottom: var(--border-hairline) solid var(--color-line); }
/* Hover: an orange rule wipes along the row's hairline from the left, the name
   slides over a touch and the arrow points down the page. */
.svc-index__btn {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) 0;
  text-align: left;
  color: var(--color-text);
  font-size: var(--type-heading-4-size);
  font-stretch: 112.5%;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  transition: color var(--hover) var(--ease-out);
}
.svc-index__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--border-hairline));
  height: var(--border-strong);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms var(--ease-out);
}
.svc-index__name { transition: transform 300ms var(--ease-out); }
.svc-index__btn svg { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); transform: rotate(90deg); transition: transform 300ms var(--ease-out), color var(--hover) var(--ease-out); }
@media (hover: hover) {
  .svc-index__btn:hover::after { transform: scaleX(1); transform-origin: left center; }
  .svc-index__btn:hover .svc-index__name { transform: translateX(6px); }
  .svc-index__btn:hover svg { color: var(--color-accent); transform: rotate(90deg) translateX(4px); }
}
.svc-index__btn:focus-visible { --focus-offset: 2px; }
@media (min-width: 760px) {
  .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}
@media (min-width: 1200px) {
  .svc-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.service {
  padding-block: clamp(var(--space-8), 2.5rem + 4vw, 8rem);
  border-top: var(--border-hairline) solid var(--color-line);
  scroll-margin-top: var(--space-6);
}
.service:first-of-type { margin-top: var(--space-block); }
.service__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-8); }
@media (min-width: 960px) {
  .service__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .service__head { position: sticky; top: var(--space-6); }
}
.service__name { max-width: 12ch; }
.service__sub { margin-top: var(--space-5); color: var(--color-text); }
.service__body > * + * { margin-top: var(--space-5); }
.service__body .t-h3 { margin-top: var(--space-7); }
.service__body .t-h3 + * { margin-top: var(--space-4); }
.service__body .ticks { margin-top: var(--space-4); }
.service__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-7) !important; }

/* AI + VFX sits last and points to its own view, so it gets the navy field. */
.service--ai { border-top: 0; }
.service--ai .service__frame {
  padding: clamp(var(--space-6), 4vw, var(--space-9)) clamp(var(--space-5), 4vw, var(--space-9));
  border-radius: var(--radius-panel);
}