.clients { padding-top: clamp(56px, 6vw, 96px); }
.clients__head { margin-bottom: clamp(40px, 5vw, 80px); }
.clients__head .h1 { max-width: 11em; }
.cgroups { display: grid; row-gap: clamp(36px, 4.4vw, 64px); }
.cgroup { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); border-top: 1px solid var(--rule-2); padding-top: 16px; }
.cgroup h3 { grid-column: 1 / 4; display: flex; gap: 14px; font-weight: 300; padding-top: .7em; }

.cgroup h3.lbl { font-size: var(--t-lead); line-height: var(--lh-text); letter-spacing: var(--tr-text); text-transform: none; color: var(--fg); padding-top: .45em; }

.roll { grid-column: 4 / 13; font-size: var(--t-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 500; }

.roll { margin-left: -.62em; clip-path: inset(-.3em -.3em -.3em .62em); }
.roll li { display: inline; white-space: nowrap; }

.roll li.is-long { display: inline-block; white-space: normal; padding-left: .62em; text-indent: -.62em; }
.roll li::before { content: '·'; content: '·' / ''; display: inline-block; width: .87em; margin-left: -.25em; text-align: center; color: var(--fg2); }

html.js:not(.rm) .cgroup[data-in] .roll { clip-path: inset(-.3em -.3em 100% .62em); transition: clip-path 1.1s var(--ease-light); transition-delay: calc(var(--d, 0s) + .2s); }
html.js:not(.rm) .cgroup[data-in].is-in .roll { clip-path: inset(-.3em -.3em -.3em .62em); }
.roll { text-wrap: pretty; }
@media (max-width: 1023px) {
  .cgroup h3 { grid-column: 1 / -1; padding: 0 0 14px; }
  .roll { grid-column: 1 / -1; }
}