/* =========================
   PROCESS
========================== */

.process {
  border-bottom: 1px solid var(--color-border);
}

/* =========================
   TOP
========================== */

.process-top {
  max-width: 720px;
}

.process .eyebrow {
  margin-bottom: 28px;
}

/* =========================
   TITLE
========================== */

.process-title {
  max-width: 680px;

  font-size: clamp(40px, 3.5vw, 56px);
  font-weight: 800;

  line-height: 1.05;
  letter-spacing: -0.045em;

  color: var(--color-text);
}

.process-title .text-accent {
  display: block;
  color: var(--color-accent);
}

/* =========================
   INTRO
========================== */

.process-intro {
  max-width: 640px;

  margin-top: 22px;

  font-size: 14px;
  line-height: 1.75;

  color: var(--color-text-muted);
}

/* =========================
   GRID
========================== */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  margin-top: 48px;

  border-top: 1px solid var(--color-border);
}

/* =========================
   STEP
========================== */

.process-step {
  min-height: 205px;

  padding: 28px 28px 28px 0;

  border-right: 1px solid var(--color-border);
}

.process-step:not(:first-child) {
  padding-left: 28px;
}

.process-step:last-child {
  border-right: 0;
}

/* =========================
   NUMBER
========================== */

.process-number {
  display: block;

  margin-bottom: 18px;

  font-size: 42px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.04em;

  color: rgba(255, 255, 255, 0.09);
  transition: color 350ms ease;
}

/* =========================
   STEP TITLE
========================== */

.process-step h3 {
  margin-bottom: 12px;

  font-size: 15px;
  font-weight: 700;

  color: var(--color-text);
}

/* =========================
   DESCRIPTION
========================== */

.process-step p {
  max-width: 235px;

  font-size: 13px;
  line-height: 1.65;

  color: var(--color-text-muted);
}

/* =========================
   HOVER
========================== */

.process-step {
  transition: background-color var(--transition-normal);
}

.process-step:hover .process-number {
  color: rgba(242, 165, 22, 0.58);
}