/* Shared process timeline component. */
.alta-design-sync .service-process-timeline {
  padding: 104px 0;
  background: #16181d;
  color: #fff;
}
.alta-design-sync .service-process-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 88px;
  align-items: start;
}
.alta-design-sync .service-process-heading {position: sticky; top: 120px}
.alta-design-sync .service-process-heading h2 {
  margin: 0 0 28px;
  color: #fff;
  text-wrap: balance;
}
.alta-design-sync .service-process-heading > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .72);
}
.alta-design-sync .service-process-steps {list-style: none; margin: 0; padding: 0}
.alta-design-sync .service-process-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 26px;
  position: relative;
  padding: 0 0 40px;
  margin: 0;
}
.alta-design-sync .service-process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 64px;
  bottom: 12px;
  left: 27px;
  width: 1px;
  background: rgba(179, 149, 91, .35);
}
.alta-design-sync .service-process-step:last-child {padding-bottom: 0}
.alta-design-sync .service-process-step .process-number {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border: 1px solid rgba(179, 149, 91, .65);
  border-radius: 50%;
  color: #c5aa75;
  font-family: var(--alta-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 26px;
  line-height: 1;
}
.alta-design-sync .service-process-step-copy :is(h2, h3, h4) {
  margin: 8px 0 16px;
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
}
.alta-design-sync .service-process-step-copy p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.8;
}
.alta-design-sync .service-process-step-copy p:last-child {margin-bottom: 0}

@media (max-width: 1023px) {
  .alta-design-sync .service-process-layout {gap: 48px}
}
@media (max-width: 767px) {
  .alta-design-sync .service-process-timeline {padding: 64px 0}
  .alta-design-sync .service-process-layout {grid-template-columns: minmax(0, 1fr)}
  .alta-design-sync .service-process-heading {position: static}
  .alta-design-sync .service-process-step {gap: 18px; grid-template-columns: 48px minmax(0, 1fr)}
  .alta-design-sync .service-process-step .process-number {width: 48px; height: 48px; font-size: 23px}
  .alta-design-sync .service-process-step:not(:last-child)::before {left: 23px; top: 56px}
  .alta-design-sync .service-process-step-copy :is(h2, h3, h4) {font-size: 27px; margin-top: 6px}
}

/* Preserve headings that already contain their step numbers. */
.alta-design-sync .service-process-marker {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(179, 149, 91, .65);
  border-radius: 50%;
}
.alta-design-sync .service-process-marker::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c5aa75;
}
.alta-design-sync .service-process-heading > p + p {margin-top: 16px}
@media (max-width: 767px) {
  .alta-design-sync .service-process-marker {width: 48px; height: 48px}
}

/* Original numbered h2 sections can form one sequence without a new heading. */
.alta-design-sync .service-process-layout--without-heading {
  grid-template-columns: minmax(0, 1fr);
  max-width: 940px;
}
.alta-design-sync .service-process-step-copy h2 {
  font-size: 30px !important;
  line-height: 1.2 !important;
}
.alta-design-sync .service-process-step-media {margin-top: 24px}
.alta-design-sync .service-process-step-media img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .alta-design-sync .service-process-step-copy h2 {font-size: 27px !important}
  .alta-design-sync .service-process-step-media img {height: 240px}
}

/* Optional closing note, aligned with the timeline text column. */
.alta-design-sync .service-process-conclusion {grid-column: 2; padding-top: 24px; border-top: 1px solid rgba(179, 149, 91, .35)}
.alta-design-sync .service-process-conclusion p {margin: 0; color: rgba(255, 255, 255, .72); font-size: 16px; line-height: 1.8}
@media (max-width: 767px) {
  .alta-design-sync .service-process-conclusion {grid-column: 1}
}