/*
 * BrandTimeline — vertical milestone list with a single connector line.
 * Stitch reference: marka.html, "Timeline / Heritage" section (MOBILE only).
 *
 * The connector line is a single ::before on the list wrapper spanning its
 * full height (matches Stitch's own `before:inset-0 h-full` — it therefore
 * starts flush at the top of the first item and ends flush at the bottom of
 * the last item, never spilling past the list). Each BrandTimelineItem's
 * dot has an opaque background + z-index so it visually breaks the line at
 * every milestone, exactly as in the source design.
 */

.cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline {
  width: 100%;
}

.cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__container {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}

.cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__title {
  margin: 0 0 3rem;
  text-align: center;
  font-family: var(--mh-font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  color: var(--mh-primary);
}

.cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__list {
  position: relative;
}

.cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.25rem;
  width: 2px;
  background-color: color-mix(in srgb, var(--mh-outline-variant) 30%, transparent);
}

/* Direct children are the IkasComponentRenderer's per-item wrapper elements. */
.cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__list > * + * {
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__container {
    max-width: 48rem;
    padding: 4rem 2.5rem 6rem;
  }

  .cc_t2dowgyg_frawGHGyy7 .mh-brand-timeline__title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 3.5rem;
  }
}