.process-section {
  padding-block: clamp(78px, 8vw, 120px) clamp(72px, 7vw, 104px);
  color: var(--ink, #252940);
  background: var(--paper, #f8f7f2);
  scroll-margin-top: 100px;
}

.process-heading { display: block; }

.process-heading h2 {
  margin: 0;
  font-family: var(--brand-sans, Manrope, sans-serif);
  font-size: clamp(45px, 5.85vw, 84px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.055em;
}

.process-heading__lead {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(23px, 2.25vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.035em;
}

.process-heading__focus { display: block; white-space: nowrap; }

.process-heading h2 em {
  font-family: var(--brand-serif, Fraunces, Georgia, serif);
  color: var(--blue, #424ab3);
  font-size: 1.035em;
  font-weight: 450;
  letter-spacing: -.06em;
}

.process-route { position: relative; margin-top: clamp(48px, 5.2vw, 76px); }
.process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); margin: 0; padding: 0; list-style: none; }
.process-step { position: relative; min-width: 0; }
.process-step h3 { margin: 18px 0 14px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -.04em; }
.process-step p { max-width: 31ch; margin: 0; color: var(--muted, #626679); font-size: 15px; line-height: 1.7; letter-spacing: -.01em; text-wrap: pretty; }

.process-illustration {
  display: block;
  position: relative;
  z-index: 1;
  width: min(100%, 216px);
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: visible;
  color: var(--blue, #424ab3);
}

.process-illustration :is(g,path,circle,rect) { transform-box: fill-box; transform-origin: center; }
.process-illustration .process-bubble-front { transform-origin: 22% 88%; }
.process-illustration .process-bubble-back { transform-origin: 78% 86%; }
.process-illustration .process-layout-piece { transform-origin: 50% 100%; }
.process-illustration .process-design-cursor { transform-origin: 12% 8%; }
.process-illustration .process-launch-page { transform-origin: 46% 88%; }
.process-illustration .process-launch-spark { transform-origin: 50% 64%; }
.process-paper { fill: var(--paper, #f8f7f2); }
.process-tint { fill: var(--lilac, #e8e8f3); }
.process-outline { stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; }
.process-blue-fill { fill: currentColor; }
.process-conversation-dots { fill: var(--paper, #f8f7f2); }
.process-blue-line,.process-ink-line,.process-launch-trail { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.process-ink-line { opacity: .55; stroke-width: 1.6; }
.process-launch-check { stroke-width: 2.8; }
.process-launch-trail { stroke-width: 1.6; opacity: .3; }

@media (min-width: 1200px) {
  .process-step { padding-right: 10px; }
}

@media (max-width: 760px) {
  .process-heading { display: block; }
  .process-heading h2 { font-size: clamp(34px, 9.8vw, 66px); }
  .process-heading__lead { margin-bottom: 10px; font-size: clamp(22px, 4.8vw, 28px); }
  .process-route { margin-top: 48px; }
  .process-steps { grid-template-columns: 1fr; gap: 64px; }
  .process-step { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 24px; align-content: center; }
  .process-illustration { grid-row: 1 / 3; align-self: center; width: 130px; max-width: none; margin-left: -10px; }
  .process-step h3 { margin-top: 4px; margin-bottom: 12px; font-size: 21px; }
  .process-step p { font-size: 15px; line-height: 1.7; max-width: 31ch; }
}

@media (max-width: 390px) {
  .process-section { padding-block: 68px; }
  .process-heading h2 { font-size: clamp(34px, 9.8vw, 39px); }
  .process-heading__lead { font-size: 22px; }
  .process-steps { gap: 60px; }
  .process-step { grid-template-columns: 80px minmax(0, 1fr); column-gap: 17px; }
  .process-illustration { width: 105px; margin-left: -11px; }
  .process-step h3 { font-size: 19px; letter-spacing: -.04em; }
  .process-step p { font-size: 14px; line-height: 1.7; }
}


/* The final step flows into the contact invitation on the same paper. */
.process-section + .contact-section { padding-top: 64px; }
@media (max-width: 760px) {
  .process-section + .contact-section { padding-top: 44px; }
}