/* NT2 Process Steps — 4-step horizontal process. Each step is a
   vertical flex stack: numeral → icon → label → description. */

.nt2-proc__section { padding-top: var(--nt2-section-pt); padding-bottom: var(--nt2-section-pb); }

.nt2-proc__sprite { position: absolute; width: 0; height: 0; }

.nt2-proc__intro { margin-top: var(--space-xl); }

/* Heading/intro are now richtext wrappers; strip inner element margins so
   the layout stays as tight as the original single-tag markup. */
.nt2-proc__headline > :first-child,
.nt2-proc__intro > :first-child { margin-top: 0; }
.nt2-proc__headline > :last-child,
.nt2-proc__intro > :last-child { margin-bottom: 0; }

.nt2-proc__steps {
  list-style: none;
  margin: var(--space-3xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  counter-reset: nt2-step;
}
@media (min-width: 640px) {
  .nt2-proc__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .nt2-proc__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xl);
    margin-top: var(--space-4xl);
  }
}

.nt2-proc__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-md);
  position: relative;
}

/* Vertical hairline that separates steps on desktop — it's a subtle
   rhythm cue that keeps the four items from floating as individual
   cards. Sits to the LEFT of every step except the first. */
@media (min-width: 1024px) {
  .nt2-proc__step + .nt2-proc__step::before {
    content: "";
    position: absolute;
    left: calc(var(--space-lg) * -1);
    top: var(--space-sm);
    bottom: var(--space-sm);
    width: 1px;
    background: var(--nt2-hairline-soft);
  }
}

.nt2-proc__num {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  letter-spacing: 0.28em;
  color: var(--clr-tertiary);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.nt2-proc__icon {
  width: 40px;
  height: 40px;
  color: var(--clr-text-primary);
  margin-bottom: var(--space-md);
}

.nt2-proc__label {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(var(--font-size-xl), 1.6vw, var(--font-size-2xl));
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--clr-text-primary);
  margin-bottom: var(--space-sm);
}

.nt2-proc__desc {
  display: block;
  max-width: 220px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--clr-text-muted);
}

.nt2-proc__cta {
  margin-top: var(--space-3xl);
  display: flex;
  justify-content: center;
}


/* Richtext typography normalization: block-converted text stores its
   content as <h2>/<p> without a class, so the inner tag (notably an
   <h2>) reverts to browser defaults and loses the wrapper typography.
   Force inner richtext tags to inherit the wrapper class type. */
.nt2-proc__headline > *, .nt2-proc__headline h1, .nt2-proc__headline h2, .nt2-proc__headline h3, .nt2-proc__headline h4, .nt2-proc__headline h5, .nt2-proc__headline h6, .nt2-proc__headline p {
  margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; line-height: inherit; color: inherit;
}
.nt2-proc__intro > *, .nt2-proc__intro h1, .nt2-proc__intro h2, .nt2-proc__intro h3, .nt2-proc__intro h4, .nt2-proc__intro h5, .nt2-proc__intro h6, .nt2-proc__intro p {
  margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; font-family: inherit !important; line-height: inherit; color: inherit;
}