/* Three connected stages, on the continuous page background. */
.order-section { padding: 105px 0 120px; color: #f1f2f5; scroll-margin-top: 45px; }
.order-inner { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.order-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 65px; }
.order-heading h2 { font-size: 60px; line-height: 1.06; letter-spacing: -.065em; font-weight: 500; margin: 0; }
.order-contact { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 14px 21px; min-height: 52px; background: linear-gradient(#fafafa, #dddde0); border: 1px solid #ececef; border-radius: 7px; color: #17181b; font-size: 14px; font-weight: 550; flex: none; }
.order-contact svg { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.order-contact:hover { background: #fff; }
.order-contact:hover svg { transform: translate(2px, -2px); }
.order-contact:focus-visible { outline: 2px solid #ead7bf; outline-offset: 5px; }
.order-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.order-step { min-width: 0; }
.order-marker { position: relative; display: flex; align-items: center; height: 135px; margin-bottom: 30px; }
.order-marker span { flex: none; font-size: 110px; font-weight: 400; letter-spacing: -.085em; line-height: 1; padding-right: 26px; color: #d2ccc5; background: linear-gradient(165deg, #f1e8dd 22%, #888581 90%); background-clip: text; -webkit-text-fill-color: transparent; }
.order-marker::after { content: ""; height: 1px; flex: 1; margin-right: 38px; background: linear-gradient(90deg, #a18f7d80, #a18f7d35); }
.order-marker svg { position: absolute; right: 31px; width: 24px; color: #b7a28a; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.order-step:last-child .order-marker::after { display: none; }
.order-step-copy { padding-right: 45px; }
.order-step:last-child .order-step-copy { padding-right: 0; }
.order-step h3 { font-size: 29px; font-weight: 450; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 18px; }
.order-step p { color: #9da2ae; font-size: 15px; line-height: 1.8; margin: 0; max-width: 325px; }
@media (max-width: 1050px) {
  .order-inner { width: calc(100% - 64px); }
  .order-heading h2 { font-size: 54px; }
  .order-marker { height: 115px; margin-bottom: 24px; }
  .order-marker span { font-size: 92px; padding-right: 20px; }
  .order-marker::after { margin-right: 26px; }
  .order-marker svg { right: 19px; }
  .order-step-copy { padding-right: 28px; }
  .order-step h3 { font-size: 25px; min-height: 60px; margin-bottom: 14px; }
  .order-step p { font-size: 14px; line-height: 1.75; }
}
@media (max-width: 700px) {
  .order-section { padding: 65px 0 75px; }
  .order-inner { width: calc(100% - 40px); }
  .order-heading { display: block; margin-bottom: 42px; }
  .order-heading h2 { font-size: 47px; }
  .order-contact { margin-top: 28px; }
  .order-route { display: block; }
  .order-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; padding-bottom: 37px; }
  .order-step:last-child { padding-bottom: 0; }
  .order-marker { position: static; height: auto; align-items: flex-start; margin: 0; }
  .order-marker span { font-size: 48px; padding: 0; }
  .order-marker::after { position: absolute; top: 64px; bottom: 14px; left: 27px; width: 1px; height: auto; margin: 0; background: linear-gradient(#a18f7d70, #a18f7d25); }
  .order-marker svg { width: 18px; height: 18px; left: 18.5px; right: auto; bottom: 8px; transform: rotate(90deg); }
  .order-step-copy { padding: 5px 0 0; }
  .order-step h3 { font-size: 25px; min-height: 0; margin-bottom: 13px; }
  .order-step p { font-size: 14px; max-width: none; }
}
@media (max-width: 360px) {
  .order-heading h2 { font-size: 42px; }
  .order-step { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .order-marker span { font-size: 43px; }
  .order-marker::after { left: 23px; }
  .order-marker svg { left: 14.5px; }
  .order-step h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .order-contact svg { transition: none; } }