/* c2-lattice section 2: editorial and asymmetric (PENTA 11-07: the mirrored cards, pill tags and repeated hero
   choice read as template). Numbered paths, hairline service definitions, a "what happens next" list. */
.paths-head { max-width: 62%; }
.paths h2 { margin-bottom: 64px; }
.cards { grid-template-columns: 7fr 5fr; gap: 56px; align-items: start; }
#clients { margin-top: 168px; }
.card-thread { left: 54%; width: 13%; inset-block-start: 250px; }
.card { padding: 52px 52px 46px; }
.card-num { position: absolute; top: 30px; right: 40px; font: 400 104px/.8 var(--serif); color: transparent;
  -webkit-text-stroke: 1px rgba(29, 33, 38, .28); letter-spacing: -.02em; pointer-events: none; }
.card-lede { max-width: 34em; }
.svc { margin: 6px 0 30px; border-top: 1px solid rgba(29, 33, 38, .14); }
.svc > div { display: grid; grid-template-columns: 12.5em 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(29, 33, 38, .14); }
#clients .svc > div { grid-template-columns: 1fr; gap: 4px; }
.svc dt { font: 500 15px/1.45 var(--sans); color: var(--ink); }
.svc dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.next-h { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.next { counter-reset: n; list-style: none; padding: 0; margin: 0 0 34px; }
.next li { counter-increment: n; display: grid; grid-template-columns: 2.6em 1fr; padding: 7px 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.next li::before { content: counter(n, decimal-leading-zero); font: 500 12px/1.9 var(--sans); letter-spacing: .12em; color: var(--ink-3); }
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .paths-head { max-width: none; }
  #clients { margin-top: 0; }
  .card { padding: 34px 24px 30px; }
  .card-num { font-size: 72px; top: 22px; right: 22px; }
  .svc > div { grid-template-columns: 1fr; gap: 4px; }
}