/* Services: an index of the seven on a Paper band, then one chapter per
   service, numbered 01 to 07 like the index, every second one a Paper band
   (layout.css, "Section rhythm"). */

.svc-nav { padding-block: var(--space-block); }
.svc-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-width) solid var(--line-rule);
}
.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: baseline;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-4) 0;
  text-align: left;
  color: var(--color-text);
  /* Heading-4 (r8): Barlow 600 in sentence case. */
  font-family: var(--type-heading-4-family);
  font-size: var(--type-heading-4-size);
  font-weight: var(--type-heading-4-weight);
  text-transform: var(--type-heading-4-case);
  letter-spacing: var(--type-heading-4-tracking);
  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);
}
/* The row's number, the same as its chapter's. */
.svc-index__num {
  flex: none;
  min-width: 2.4em;
  /* Numerals (r8): Barlow Semi Condensed 800, tabular, at the label size. */
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--type-label-size);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.svc-index__name { flex: 1; transition: transform 300ms var(--ease-out); }
.svc-index__btn svg { align-self: center; 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; }
/* Seven services. In two or four columns, AI + VFX (last, and the one with its
   own page) takes the last two cells, so no row ends on an empty one. On the
   widest columns all seven sit in one row, each cell as wide as its name plus
   an even share of the rest, so every name stays on one line. */
@container col (min-width: 680px) {
  .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .svc-index li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* From four columns up each cell is a small block, the number over the
   name, so every name keeps one line ("Monthly Offer Swaps" too). The cell
   is a grid, not a wrapping flex row: a wrapped flex row still counts the
   number's width beside the name's in its widest size, which squeezed the
   seven-across row below and broke "Monthly Offer Swaps" at 1880 to 2000 px
   (r7 fix round 2). The grid counts the wider of the two lines only. */
@container col (min-width: 1150px) {
  .svc-index li:last-child:nth-child(odd) { grid-column: auto; }
  .svc-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-index li:last-child:nth-child(4n+3) { grid-column: span 2; }
  .svc-index__btn { display: grid; grid-template-columns: 1fr auto; align-content: start; row-gap: var(--space-3); min-height: 4.5rem; padding-block: var(--space-4) var(--space-5); }
  .svc-index__num { grid-column: 1 / -1; }
  .svc-index__name { text-wrap: balance; }
}
/* The widest columns: one row of seven. */
@container col (min-width: 1700px) {
  .svc-index { grid-template-columns: repeat(7, auto); column-gap: var(--space-5); }
  .svc-index li:last-child:nth-child(4n+3) { grid-column: auto; }
}

/* The page head's two sentences need the room of a wide column at
   display-2: below a 900 px column they run at display-3, as in r6, so a
   tablet keeps "Pick what you need. / It all fits together." on two lines. */
.page-head__title--long {
  font-size: var(--type-display-3-size);
  letter-spacing: var(--type-display-3-tracking);
  line-height: var(--type-display-3-leading);
}
@container col (min-width: 900px) {
  .page-head__title--long {
    font-size: var(--type-display-2-size);
    letter-spacing: var(--type-display-2-tracking);
    line-height: var(--type-display-2-leading);
  }
}

/* One service. The chapter's opener (rule and number) is .sec-head. */
.service { scroll-margin-top: 0; }
/* Stacked on narrow columns. From 880: the name and sub stay pinned on the
   left while the words and the list scroll past on the right. From 1500: three
   columns, name | what it is | what you get, so a section reads across the
   screen instead of down half of it. */
.service__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) clamp(var(--space-7), 3vw, 6rem);
}
.service__get { margin-top: var(--space-2); }
@container col (min-width: 880px) {
  .service__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; align-items: start; row-gap: 0; }
  .service__head { grid-row: 1 / span 2; position: sticky; top: var(--space-6); }
  .service__body { grid-column: 2; }
  .service__get { grid-column: 2; margin-top: var(--space-7); }
}
@container col (min-width: 1500px) {
  .service__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .service__head { grid-row: auto; }
  .service__body, .service__get { grid-column: auto; margin-top: 0; }
  .service__get > .t-h3 { margin-top: 0; }
}
.service__name { max-width: calc(16 * var(--ch-display)); } /* 12ch before r8, the same box in px (x 1.36); --ch-display in base.css */
.service__sub { margin-top: var(--space-5); color: var(--color-text); }
.service__body > * + * { margin-top: var(--space-5); }
.service__body > .t-h3:not(:first-child) { margin-top: var(--space-7); }
.service__body .t-h3 + * { margin-top: var(--space-4); }
.service__get .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); }
/* Phones wrap the quote buttons' labels (base.css), so the two lines are
   balanced and never leave one word on the second. */
.service__actions .btn { text-wrap: balance; }