/* FIXD — the six service blocks.
   Large editorial rows, not cards: the image is a hard rectangle, the number is
   an outlined slab, and every other row flips direction so the eye zig-zags
   down the page. */

.services { background: var(--white); color: var(--black); padding-top: 0; }

.services__head {
  display: grid;
  gap: 1rem;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.services__head h2 {
  font-size: var(--t-huge);
  font-variation-settings: 'wdth' 78;
}

.svc {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
}

.svc__media { position: relative; aspect-ratio: 4 / 3; }
.svc__media .frame { width: 100%; height: 100%; }

/* The number lives on the image corner, reversed out in yellow on black. */
.svc__num {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: .35em .6em .25em;
  background: var(--black);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 84;
  line-height: 1;
  letter-spacing: -.02em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s var(--ease-snap) .12s;
}
.is-in .svc__num, .svc__num.is-in { clip-path: inset(0 0 0 0); }

.svc__body { display: grid; align-content: center; gap: 1rem; }

.svc__title {
  font-size: var(--t-big);
  font-variation-settings: 'wdth' 78;
  letter-spacing: var(--track-huge);
}
.svc__copy { color: var(--muted); max-width: 46ch; }
.svc__cta { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .svc__num { clip-path: none !important; transition: none; }
}

@media (min-width: 860px) {
  .svc {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .svc--flip .svc__media { order: 2; }
  .svc--flip .svc__body { order: 1; }
  .svc__media { aspect-ratio: 5 / 4; }
  .svc__body { padding-inline: clamp(0rem, 1.5vw, 1.5rem); }
}