.arc-process-cols { background: #000; color: #fff; padding: var(--arc-section) 0; }
.arc-process-cols__inner { position: relative; }
.arc-process-cols__logo { position: absolute; top: 0; right: 0; color: #fff; line-height: 0; }
/* The mark draws itself when it scrolls into view rather than on page load. */
.js .arc-process-cols__logo .arc-logo--animate path { animation-play-state: paused; }
.arc-process-cols__logo.is-visible .arc-logo--animate path { animation-play-state: running; }
.arc-process-cols__head { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: clamp(64px, 5vw, 96px); }
.arc-process-cols__statement { margin: 0; max-width: 546px; font-family: var(--arc-font-serif); font-weight: 300; font-size: clamp(28px, 2.3vw, 44px); line-height: 1.3; letter-spacing: 0; color: #fff; }
.arc-process-cols__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 2.9vw, 56px); }
.arc-process-cols__step { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 29px; }
.arc-process-cols__num { margin-bottom: 18px; font-family: var(--arc-font-serif); font-weight: 300; font-size: clamp(44px, 3.1vw, 60px); line-height: 1; color: rgba(255, 255, 255, .4); }
.arc-process-cols__title { margin: 0 0 14px; font-family: var(--arc-font-serif); font-weight: 400; font-size: clamp(24px, 1.56vw, 30px); line-height: 1.2; color: #fff; }
.arc-process-cols__text { margin: 0; max-width: 280px; font-family: var(--arc-font-sans); font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .55); }
@media (max-width: 1199.98px) {
  .arc-process-cols__logo svg { width: auto; height: 120px; }
}
@media (max-width: 991.98px) {
  .arc-process-cols__logo { position: static; margin-bottom: 40px; }
  .arc-process-cols__head { grid-template-columns: 1fr; gap: 24px; }
  .arc-process-cols__steps { grid-template-columns: 1fr; gap: 40px; }
}