/** Shopify CDN: Minification failed

Line 397:3 Expected "}" to go with "{"

**/
/* Timeline Section - Exact Figma Specs at 1440px */

.section-timeline {
  background-color: var(--color-off-white, #F4F4F4);
  width: 100%;
  display: block;
}

.section-timeline .timeline {
  width: 100%;
}

.timeline__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* Desktop/Mobile visibility toggle */
.timeline__desktop {
  display: block;
  width: 100%;
}

.timeline__mobile {
  display: none;
}

/* ============================================
   Text Container - Centered Header
   ============================================ */
.timeline__text-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 16px);
  align-items: center;
  text-align: center;
  width: 690px;
  padding-top: 64px;
  padding-bottom: 24px;
}

.timeline__heading {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--color-blue-primary, #0C2045);
  margin: 0;
  width: 100%;
}

.timeline__description {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-blue-primary, #0C2045);
  margin: 0;
  width: 100%;
}

/* ============================================
   Carousel — flex/height approach (no scale transform)
   ============================================ */

/* Outer: fixed height clips the track */
.timeline__outer {
  width: 100%;
  height: 330px;
  overflow: hidden;
}

.timeline__carousel-track {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 40px;
  height: 100%;
}

/* Item — inactive */
.timeline__item {
  flex: 1;
  min-width: 0;
  height: 223px;
  border-radius: 14px;
  overflow: hidden;
  background: #c4c4c4;
  opacity: 0.6;
  cursor: pointer;
  transition:
    flex 450ms cubic-bezier(0.4, 0, 0.2, 1),
    height 450ms cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 450ms ease,
    opacity 450ms ease;
}

.timeline__item:hover {
  opacity: 0.8;
}

/* Item — active */
.timeline__item.is-active {
  flex: 1.415;
  height: 314px;
  border-radius: 10px;
  opacity: 1;
  cursor: default;
}

.timeline__item.is-active:hover {
  opacity: 1;
}

/* Media fills the slot */
.timeline__item-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  max-width: none;
}

.timeline__item-placeholder {
  width: 100%;
  height: 100%;
  background: #d0d4dc;
}

/* Info text — left edge set by JS to align with active card */
.timeline__item-info {
  padding: 16px 0 0;
  min-height: 80px;
  transition: margin-left 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline__item-info-inner {
  max-width: 293px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline__item-title {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-blue-primary, #0C2045);
  text-transform: uppercase;
  margin: 0;
}

.timeline__item-description {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.14px;
  color: var(--color-grey-dark, #7E7E7E);
  margin: 0;
}

/* ============================================
   Progress Bar + Labels
   ============================================ */
.timeline__progress-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 16px);
  align-items: center;
  padding: var(--spacing-5, 24px) var(--spacing-7, 40px);
  width: 100%;
  box-sizing: border-box;
}

/* Progress bar */
.timeline__progress {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(12, 32, 69, 0.12);
  border-radius: 2px;
  overflow: hidden;
}

/* Grey background line — no longer needed (parent handles it) */
.timeline__progress-bar {
  display: none;
}

/* Blue active line */
.timeline__progress-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--color-blue-primary, #0C2045);
  border-radius: 2px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Labels row */
.timeline__labels {
  display: flex;
  justify-content: space-between;
  gap: 0;
  width: 100%;
}

.timeline__label {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(12, 32, 69, 0.3);
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}

.timeline__label:hover {
  opacity: 0.8;
}

.timeline__label.is-active {
  color: var(--color-blue-primary, #0C2045);
}

.timeline__label.is-active:hover {
  opacity: 1;
}

/* ============================================
   Responsive: 750px–1440px
   ============================================ */
@media screen and (min-width: 750px) and (max-width: 1440px) {
  .timeline__text-container {
    width: 80%;
    max-width: 690px;
    gap: 1.111vw;
    padding-top: 4.444vw;
    padding-bottom: 24px;
  }

  .timeline__heading {
    font-size: clamp(28px, 2.778vw, 40px);
  }

  .timeline__description {
    font-size: clamp(14px, 1.111vw, 16px);
  }

  .timeline__outer {
    height: clamp(170px, 22.917vw, 330px);
  }

  .timeline__carousel-track {
    gap: 1.111vw;
    padding: 0 2.778vw;
  }

  .timeline__item {
    height: clamp(115px, 15.486vw, 223px);
    border-radius: clamp(8px, 0.972vw, 14px);
  }

  .timeline__item.is-active {
    height: clamp(160px, 21.806vw, 314px);
    border-radius: clamp(6px, 0.694vw, 10px);
  }

  .timeline__item-info {
    padding-left: 0;
  }

  .timeline__progress-container {
    gap: 1.111vw;
    padding: 1.667vw 2.778vw;
    box-sizing: border-box;
  }

  .timeline__label {
    font-size: clamp(10px, 0.972vw, 14px);
  }
}

@media screen and (max-width: 992px) {
  .timeline__progress-container {
    padding-top: 4.75vw;
  }


  /* ============================================
   Mobile: ≤749px — Figma vertical layout
   ============================================ */
  @media screen and (max-width: 749px) {

    .timeline__desktop {
      display: none;
    }

    .timeline__mobile {
      background-color: var(--color-off-white, #F4F4F4);
      padding: 0 20px 32px;
      display: block;
    }

    .timeline__text-container {
      width: 100%;
      padding: 40px 20px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .timeline__heading {
      font-size: 32px;
      line-height: 1.1;
      text-align: center;
    }

    .timeline__description {
      font-size: 14px;
      line-height: 1.2;
      text-align: center;
    }

    /* Single hero image */
    .timeline__mobile-hero {
      width: 100%;
      aspect-ratio: 540 / 454;
      border-radius: 17px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .timeline__mobile-hero-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      max-width: none;
    }

    /* Timeline items list — all always visible */
    .timeline__mobile-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .timeline__mobile-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .timeline__mobile-item-title {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: normal;
      text-transform: uppercase;
      color: var(--color-blue-primary, #0C2045);
      margin: 0;
    }

    .timeline__mobile-item-desc {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.2;
      letter-spacing: 0.14px;
      color: var(--color-grey-dark, #7E7E7E);
      margin: 0;
    }

  }