/* Act 2, services. Owned by the services agent.
   Six entries in a full width ledger on Chaff: one row per service, the
   mono index in the first column, the title in the next four, the text and
   its tag row in the last seven. Hairline rules carry the structure; the
   ground seam closes the ledger. Not cards: rows. Entries are not links, so
   hover is an acknowledgement only: the index deepens from furrow to loam.
   No fill and no chamfer here; those read as affordances. */

#services .band__title { text-wrap: balance; }

/* The ledger closes on the ground seam, not on a second hairline, and the
   act's bottom padding is 128 so the seam arrives without a stall. The top
   padding is 128 too (wide stages): the field act scrolls out ahead of the
   band with Loam under its note, so the eyebrow arrives within a screen
   third of the note rather than a full 192 later. */
#services { padding-bottom: var(--space-128); }
@media (min-width: 768px) { #services { padding-top: var(--space-128); } }

.services {
  margin-top: var(--space-64);
}

.service {
  display: grid;
  grid-template-columns: var(--grid-column) minmax(0, 4fr) minmax(0, 7fr);
  column-gap: var(--space-32);
  align-items: start;
  border-top: var(--hairline) solid var(--color-rule-light);
  padding-block: var(--space-32);
}

.service__index {
  display: block;
  /* Optical: the 20 leading mono figure sits on the 36 leading title's first line. */
  padding-top: var(--space-8);
  font-family: var(--font-utility);
  font-size: var(--text-14);
  line-height: var(--leading-14);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  color: var(--color-furrow);
  transition: color 240ms ease;
}

.service:hover .service__index { color: var(--color-loam); }

.service__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-29);
  line-height: var(--leading-29);
  letter-spacing: -0.005em;
}

.service__text {
  grid-column: 3;
  color: var(--color-ink-secondary-light);
  max-width: 62ch;
}

.service__signals {
  grid-column: 3;
  padding-top: var(--space-16);
  font-family: var(--font-utility);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-secondary-light);
}

/* Tablet: the index keeps its column, the title sits over the text. */
@media (max-width: 1023px) {
  .service { grid-template-columns: var(--grid-column) minmax(0, 1fr); }
  .service__title, .service__text, .service__signals { grid-column: 2; }
  .service__text { margin-top: var(--space-16); }
}

/* On a phone the six entries are the longest run on the page, so each one
   is tightened to land inside a screen: 24 above and below, the title tucked
   under its number, and the tag row held to one line. */
@media (max-width: 767px) {
  #services { padding-bottom: var(--space-96); }
  .services { margin-top: var(--space-48); }
  .service {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-24);
  }
  .service__title, .service__text, .service__signals { grid-column: 1; }
  .service__index { padding-top: 0; }
  .service__title { margin-top: var(--space-8); }
  .service__text { margin-top: var(--space-8); }
  /* Tag rows wrap to a second line at 14 leading. Each tag is held whole
     by its own nbsp characters, so a break can only land at a separator. */
  .service__signals {
    padding-top: var(--space-16);
    line-height: var(--leading-14);
  }
}

.services__more { margin-top: var(--space-32); }