.order-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px,.72fr) 1.8fr;
  gap: clamp(34px,5vw,78px);
  max-width: 1380px;
  margin: 38px auto 0;
  padding: clamp(38px,4vw,58px);
  overflow: hidden;
  background: #29171d;
  color: #fffaf2;
}

.order-flow::after {
  content: "04";
  position: absolute;
  right: -15px;
  bottom: -70px;
  color: rgba(255,255,255,.025);
  font-family: Georgia,serif;
  font-size: 15rem;
  line-height: 1;
  pointer-events: none;
}

.order-flow-heading {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
}

.order-flow-heading .eyebrow { color: #ddb35d; }
.order-flow-heading h2 { max-width: 350px; margin: 0; color: #fffaf2; font-family: Georgia,serif; font-size: clamp(2.1rem,3vw,3.35rem); font-weight: 400; line-height: 1.05; }
.order-flow-heading .text-button { border-color: #d6a951; color: #f0d18e; cursor: pointer; }

.order-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(214,169,81,.42);
}

.order-steps article,
.order-steps article:first-child {
  min-width: 0;
  min-height: 138px;
  padding: 24px 26px 22px;
  border-right: 1px solid rgba(255,255,255,.11);
  border-bottom: 1px solid rgba(255,255,255,.11);
}

.order-steps article:nth-child(2n) { border-right: 0; }
.order-steps article:nth-last-child(-n+2) { border-bottom: 0; }
.order-steps span { color: #d6a951; font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
.order-steps h3 { margin: 9px 0 5px; color: #fffaf2; font-family: Georgia,serif; font-size: 1.35rem; font-weight: 400; }
.order-steps p { max-width: 360px; margin: 0; color: #cbbdc0; font-size: .84rem; line-height: 1.55; }

@media (max-width: 900px) {
  .order-flow { grid-template-columns: 1fr; margin: 28px 18px 0; }
  .order-flow-heading { flex-direction: row; align-items: end; }
  .order-flow-heading h2 { max-width: 520px; }
}

@media (max-width: 600px) {
  .order-flow { display: block; margin: 22px 14px 0; padding: 34px 24px; }
  .order-flow-heading { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
  .order-flow-heading h2 { font-size: 2.25rem; }
  .order-steps { grid-template-columns: 1fr; }
  .order-steps article,
  .order-steps article:first-child { min-height: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .order-steps article:nth-last-child(2) { border-bottom: 1px solid rgba(255,255,255,.11); }
  .order-steps article:last-child { border-bottom: 0; }
}