/* Who We Are: Our journey. The heading sits above one row holding all five
   moments, so nothing ever slides away. The section pins while you scroll
   through it: a purple line runs along the years beneath the cards, and each
   card grows as the line reaches its dot and shrinks again as the line moves
   on, a slow wave across the row. about-journey.js drives --c (0 to 1, how
   close the line is) on each card, and positions the dots and the fill. */
.ab-journey { position: relative; z-index: 1; background: #fff; color: #17131c; }
.ab-journey__pin {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1.5rem, 3vh, 2.5rem);
  padding: clamp(5rem, 11vh, 7.5rem) var(--ab-gutter, 1.25rem) clamp(2rem, 6vh, 3.5rem);
  overflow: hidden;
}
/* The ridge drawing is hidden: the heading now runs full width where it used
   to sit, and the two read as clutter together. Kept in the markup so it can
   be brought back by raising the opacity. */
.ab-journey__ridge { position: absolute; z-index: -1; top: 1.5rem; right: -2rem; width: min(62vw, 56rem); height: auto; opacity: 0; pointer-events: none; }
.ab-journey__ridge path { fill: none; stroke: rgba(76, 48, 116, .12); stroke-width: 1.2; }

.ab-journey__head { display: grid; gap: 1rem; }
.ab-journey__eyebrow { margin: 0 0 .9rem; color: #5f3c91; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ab-journey h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 3.8rem); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.ab-journey__sub { max-width: 21rem; margin: 0; color: #7a7480; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.5; }

/* ——— The row of cards ——— */
.ab-journey__stage { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.ab-journey__cards { display: flex; align-items: center; gap: 12px; min-height: 0; height: clamp(22rem, 52vh, 34rem); margin: 0; padding: 0; list-style: none; }
.ab-journey__card {
  --c: 0;
  position: relative;
  flex: calc(1 + var(--c) * 1.1) 1 0;
  height: calc(76% + var(--c) * 24%);
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #2a2230;
  color: #fff;
  box-shadow: 0 calc(var(--c) * 1.6rem) calc(var(--c) * 3.2rem) rgba(23, 19, 28, calc(var(--c) * .2));
}
.ab-journey__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(calc(1.06 - var(--c) * .06)); }
.ab-journey__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 25, .4), rgba(20, 14, 25, 0) 34%, rgba(20, 14, 25, 0) 50%, rgba(20, 14, 25, .66)); }
.ab-journey__year { position: absolute; z-index: 1; top: 1.2rem; left: 1.2rem; font-size: clamp(1.4rem, 2.2vw, 2.2rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.ab-journey__year::after { content: ""; display: block; width: 1.4rem; height: 2px; margin-top: .7rem; background: currentColor; }
.ab-journey__num { position: absolute; z-index: 1; top: 1.2rem; right: 1rem; padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, calc(var(--c) * .92)); color: color-mix(in srgb, #4c3074 calc(var(--c) * 100%), #fff); }
/* Text shows on the highlighted moment only (Lauchie, 2026-10-06): the
   others are photograph alone until the line reaches them or they are
   hovered. The words sit in a caption panel across the foot of the photo at
   a readable size, never across the whole picture. about-journey.js sets
   .is-active on the card nearest the line. */
.ab-journey__year,
.ab-journey__num,
.ab-journey__line { opacity: 0; transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.ab-journey__line {
  position: absolute;
  z-index: 1;
  right: .9rem;
  bottom: .9rem;
  left: .9rem;
  max-height: 45%;
  margin: 0;
  overflow: hidden;
  padding: 1rem 1.15rem;
  border-radius: 8px;
  background: rgba(23, 16, 32, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  font-weight: 500;
  line-height: 1.45;
  transform: translateY(.6rem);
}
.ab-journey__card.is-active :is(.ab-journey__year, .ab-journey__num, .ab-journey__line),
.ab-journey__card:hover :is(.ab-journey__year, .ab-journey__num, .ab-journey__line) { opacity: 1; transform: none; }

/* ——— The year line ——— */
.ab-journey__track { position: relative; height: 3.2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.ab-journey__rail { position: absolute; top: .3rem; left: 0; right: 0; height: 1px; background: rgba(23, 19, 28, .12); }
.ab-journey__rail b { position: absolute; top: -.5px; left: var(--from, 0px); height: 2px; width: var(--fill, 0px); background: #5f3c91; border-radius: 2px; }
.ab-journey__dot { --c: 0; position: absolute; top: 0; left: var(--x, 0px); display: grid; justify-items: center; gap: .7rem; transform: translateX(-50%); color: color-mix(in srgb, #4c3074 calc(var(--c) * 100%), #736d79); font-size: .8rem; font-weight: calc(400 + var(--c) * 200); }
.ab-journey__dot i { width: .6rem; height: .6rem; border-radius: 50%; background: #d6d1dc; transform: scale(calc(1 + var(--c) * .35)); }
.ab-journey__dot.is-reached i { background: #5f3c91; }

@media (min-width: 900px) {
  .ab-journey { height: 320vh; }
  .ab-journey__pin { position: sticky; top: 0; height: 100svh; }
  .ab-journey__head { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .ab-journey__sub { padding-bottom: .4rem; }
}
@media (max-width: 899px) {
  .ab-journey__cards { height: 24rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ab-journey__card { flex: 0 0 68vw; height: 100%; scroll-snap-align: start; --c: 1; }
  /* Every card is full size on a phone, so every card is "enlarged". */
  .ab-journey__card :is(.ab-journey__year, .ab-journey__num, .ab-journey__line) { opacity: 1; transform: none; }
  .ab-journey__track { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-journey { height: auto; }
  .ab-journey__pin { position: relative; height: auto; }
}