/* MilestoneRail - ported from Framer code component MilestoneRail.tsx
   A scroll-tracked timeline. The milestone whose centre sits nearest the
   reading line (45% of the viewport height) is the "live" one: full opacity and
   colour, while the rest drop to 0.42 opacity and part grayscale. The running
   year and the progress bar in the sticky left column follow the live item.

   Tracking is off - every milestone renders live - at 820px and under and under
   prefers-reduced-motion; those two states are enforced by the media blocks at
   the foot of this sheet, and js/framer/milestonerail.js detaches its scroll
   listener to match. The year size and the two gaps follow the section's own
   measured width (year fs = clamp(28.8, 0.043*w, 62.4), aside gap =
   clamp(32, 0.06*w, 96), list gap = clamp(48, 0.07*w, 96), card column gap =
   clamp(24, 0.03*w, 40)); the vw clamp() defaults below stand in before JS runs
   and when JS is absent. */
.fr-milestonerail {
  --fr-milestonerail-ink: var(--jifu-ink, rgb(25, 25, 25));
  --fr-milestonerail-muted: var(--jifu-ink-muted, rgba(25, 25, 25, 0.66));
  --fr-milestonerail-faint: var(--jifu-ink-faint, rgba(25, 25, 25, 0.62));
  --fr-milestonerail-year: #75593F;
  --fr-milestonerail-accent: var(--jifu-accent, rgb(139, 109, 85));
  --fr-milestonerail-track: var(--jifu-ink-ghost, rgba(25, 25, 25, 0.18));
  --fr-milestonerail-gutter: 94px;
  --fr-milestonerail-year-fs: clamp(28.8px, 4.3vw, 62.4px);
  --fr-milestonerail-aside-gap: clamp(32px, 6vw, 96px);
  --fr-milestonerail-list-gap: clamp(48px, 7vw, 96px);
  --fr-milestonerail-card-col-gap: clamp(24px, 3vw, 40px);
  --fr-milestonerail-ease: cubic-bezier(.16, 1, .3, 1);
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: var(--fr-milestonerail-aside-gap);
  padding: 0 var(--fr-milestonerail-gutter);
}
/* Left column: sticks 64px plus a viewport-scaled inset clear of the top. */
.fr-milestonerail__aside {
  position: sticky;
  top: calc(64px + clamp(2rem, 8vh, 5rem));
  align-self: start;
}
.fr-milestonerail__year {
  margin: 0;
  font-family: var(--jifu-font-display, "Heuvel Grotesk", Montserrat, sans-serif);
  font-weight: 700;
  font-size: var(--fr-milestonerail-year-fs);
  display: block;
  line-height: 0.9;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--fr-milestonerail-ink);
}
.fr-milestonerail__meter {
  margin-top: 1.4rem;
  width: min(100%, 220px);
  height: 2px;
  background: var(--fr-milestonerail-track);
  overflow: hidden;
}
.fr-milestonerail__fill {
  width: 0;
  height: 2px;
  background: var(--fr-milestonerail-accent);
  transition: width 1100ms var(--fr-milestonerail-ease);
}
.fr-milestonerail__range {
  margin: 1.4rem 0 0;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--fr-milestonerail-faint);
}
.fr-milestonerail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fr-milestonerail-list-gap);
}
/* One column at every width, so only the 22.4px row gap shows; the column value
   applies only if the card is ever laid out two up. */
.fr-milestonerail__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22.4px var(--fr-milestonerail-card-col-gap);
  opacity: 0.42;
  transition: opacity 1100ms var(--fr-milestonerail-ease);
}
.fr-milestonerail__item.is-live { opacity: 1; }
.fr-milestonerail__figure { margin: 0; overflow: hidden; }
/* Card media: 16/10, cover cropped, part grey until this milestone is live. */
.fr-milestonerail__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  filter: grayscale(0.42) saturate(0.92) contrast(1.03);
  transform: scale(1.02);
  transition: filter 1100ms var(--fr-milestonerail-ease), transform 1450ms var(--fr-milestonerail-ease);
}
.fr-milestonerail__item.is-live .fr-milestonerail__img {
  filter: saturate(0.92) contrast(1.03);
  transform: none;
}
.fr-milestonerail__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.fr-milestonerail__cardyear {
  margin: 0 0 0.7rem;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fr-milestonerail-year);
}
.fr-milestonerail__title {
  margin: 0;
  font-family: var(--jifu-font-display, "Heuvel Grotesk", Montserrat, sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fr-milestonerail-ink);
}
.fr-milestonerail__note {
  margin: 0.6rem 0 0;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fr-milestonerail-muted);
}
/* 820px and under: one column, the left column stops sticking, the large year
   is hidden, the list gap is a flat 32px, type steps down, and every milestone
   renders live (tracking off). */
@media (max-width: 820px) {
  .fr-milestonerail {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .fr-milestonerail__aside { position: static; }
  .fr-milestonerail__year { display: none; }
  .fr-milestonerail__range { margin: 0.8rem 0 0; }
  .fr-milestonerail__list { gap: 32px; }
  .fr-milestonerail__item { opacity: 1; }
  .fr-milestonerail__img { filter: saturate(0.92) contrast(1.03); transform: none; }
  .fr-milestonerail__cardyear { font-size: 11px; }
  .fr-milestonerail__title { font-size: 22px; }
  .fr-milestonerail__note { font-size: 14px; }
}
/* Reduced motion: tracking off, every milestone live, no transitions. */
@media (prefers-reduced-motion: reduce) {
  .fr-milestonerail__item { opacity: 1; }
  .fr-milestonerail__img { filter: saturate(0.92) contrast(1.03); transform: none; }
  .fr-milestonerail__item,
  .fr-milestonerail__img,
  .fr-milestonerail__fill { transition: none; }
}