/* ==========================================================================
   proces.css — section #proces (cream) · Alfred landing port, part 5/6
   Layout/visuals from prototype Alfred.dc.html §Kako poteka (5 steps, brass
   01–05, border-top: first solid brass, rest 40 %).
   Depends on css/variables.css + css/base.css (.wrap, .eyebrow).
   ========================================================================== */

.proc .eyebrow { margin-bottom: 12px; }

.proc h2 {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(36px, 4.5vw, 52px);
}

.proc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 820px) {
  .proc-steps { grid-template-columns: 1fr; }
}

.proc-step {
  border-top: 2px solid rgba(184, 147, 90, 0.4);
  padding-top: 18px;
}
.proc-step:first-child { border-top-color: var(--brass); }

.proc-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 34px;
  color: var(--brass);
  line-height: 1;
  margin: 0;
}

.proc-step h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--navy);
  margin: 12px 0 8px;
}

.proc-step p:not(.proc-num) {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--graphite);
}