/* ---- Scroll-driven company timeline ----
   Built from Figma node 18594:10288 (Why choose us). Bespoke, single-page
   component — not a candidate for reuse elsewhere the way the rest of the
   site's sections are, since the scroll-pin behaviour is specific to this
   one interaction.

   Structure:
     .timeline-scroll                         (section, grey-101 background,
                                                 144px top/bottom padding)
       > .timeline-scroll__header              (eyebrow/heading/intro — plain
                                                  in-flow content, NOT pinned;
                                                  scrolls normally with the
                                                  page like every other
                                                  section's header)
       > .timeline-scroll__outer               (tall wrapper — its height is
                                                  what gives the pin something
                                                  to scroll through; height set
                                                  in JS from real content
                                                  measurements, see
                                                  js/why-us-timeline.js)
           > .timeline-scroll__stage           (position: sticky — ONLY the
                                                  timeline viewport pins, not
                                                  the header above it)
               > .timeline-scroll__stage-inner (1280px container, centres the
                                                  736px viewport)
                   > .timeline-scroll__viewport (clips the moving track to its
                                                  own fixed height)
                       > .timeline-scroll__track (translated upward via JS —
                                                    holds the rail + the list)
                           > .timeline-scroll__rail (centre line, spans the
                                                       track's full height)
                           > .timeline-scroll__list (the 5 alternating rows)
                       > .timeline-scroll__fade  (bottom mask, static)

   Why the header isn't part of the pin: an earlier version nested the
   header inside .timeline-scroll__stage so it would stay put while the
   track moved — but that pinned the heading at the top of the viewport for
   the whole interaction, which reads as the page getting stuck. The header
   now sits in normal flow before the pinned region entirely, so it enters
   and leaves the viewport like any other section heading; only the actual
   timeline viewport (rail + events) pins, for exactly as long as it takes
   the track to travel its own height. See js/why-us-timeline.js — none of
   its scroll-progress math changed, only which DOM node it measures/pins.

   JS (progressive enhancement): without JS, or with prefers-reduced-motion,
   or below the 860px collapse point, this renders as a normal static
   single-column list — see the media queries at the end of this file and
   js/why-us-timeline.js's own bail-out path. */

.timeline-scroll {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px top/bottom, matches the section's own Figma padding */
  background: var(--colour-grey-101);
  box-sizing: border-box;
}

.timeline-scroll__outer {
  position: relative;
  width: 100%;
  /* Real height is set inline by JS once content is measured; this is only
     a sane pre-JS fallback so the section isn't collapsed to 0 height while
     the script hasn't run yet. */
  min-height: 700px;
}

.timeline-scroll__stage {
  position: sticky;
  /* Clears the site's floating fixed header (top: 76px + its own ~88px
     row height, see css/header.css) with a little breathing room — read
     back out in JS (getComputedStyle) rather than duplicated as a second
     literal, so this is the one place that value lives. */
  top: 262px;
  width: 100%;
  box-sizing: border-box;
}

.timeline-scroll__stage-inner {
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Header (identical shape to .stat-showcase__header) ---- */
/* Its own 1280px container — a plain in-flow sibling of .timeline-scroll__
   outer, not nested inside the sticky stage (see structure note above). */

.timeline-scroll__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl); /* 24px */
  width: 100%;
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto var(--space-6xl); /* 64px gap down to the timeline viewport, matches Figma */
  box-sizing: border-box;
}

.timeline-scroll__intro-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.timeline-scroll__eyebrow {
  background: var(--colour-white);
}

.timeline-scroll__heading {
  text-align: center;
}

.timeline-scroll__heading-accent {
  color: var(--colour-brand-teal);
}

.timeline-scroll__heading-dark {
  color: var(--colour-header-grey);
}

.timeline-scroll__intro {
  margin: 0;
  max-width: 100%;
  color: var(--colour-body-grey);
  text-align: center;
}

/* ---- Viewport / track ---- */

.timeline-scroll__viewport {
  position: relative;
  width: 100%;
  max-width: 736px;
  margin: 0 auto; /* centres the 736px viewport within the 1280px stage-inner */
  height: var(--timeline-viewport-height, 560px);
  overflow: hidden;
}

.timeline-scroll__track {
  position: relative;
  width: 100%;
  will-change: transform;
}

/* Bottom fade — matches Figma's own gradient mask at the foot of the
   visible timeline area. */
.timeline-scroll__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(247, 248, 249, 0) 0%, var(--colour-grey-101) 100%);
  pointer-events: none;
}

/* ---- Rail (centre line) ---- */

.timeline-scroll__rail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: var(--colour-light-grey);
  border-radius: var(--space-full);
}

.timeline-scroll__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0; /* set by JS every scroll frame, in direct proportion to scroll progress */
  background: var(--colour-brand-teal);
  border-radius: var(--space-full);
  /* No CSS transition here deliberately: JS already updates this every
     rAF frame straight off scroll position, so a transition would just
     add a second, competing layer of easing on top and make the fill lag
     behind the (un-eased) row activation state it's meant to track. See
     js/why-us-timeline.js update(). */
}

/* ---- Rows / list ---- */

.timeline-scroll__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-section-xs); /* 80px between events */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Figma's 302px columns as a maximum rather than a fixed size, so the
   two-sided row can share whatever the viewport gives it between 1024px
   and the container width — at 1280px+ it resolves to exactly 302 + 4 +
   302 with 64px gaps (the 736px viewport above), unchanged. */
.timeline-scroll__row {
  display: grid;
  grid-template-columns: minmax(0, 302px) 4px minmax(0, 302px);
  column-gap: 64px;
  align-items: center;
}

.timeline-scroll__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.timeline-scroll__row--left .timeline-scroll__col:first-child {
  align-items: flex-end;
  text-align: right;
}

.timeline-scroll__row--right .timeline-scroll__col:last-child {
  align-items: flex-start;
  text-align: left;
}

.timeline-scroll__col--empty {
  visibility: hidden;
}

/* Marker — sits in the row's own centre grid column, so it's always
   exactly on the rail regardless of row height. Given its own stacking
   position (z-index above 0) because the rail/rail-fill are `position:
   absolute` — under normal CSS stacking rules positioned elements paint
   above non-positioned in-flow content regardless of DOM order, so without
   this the rail would render on top of the marker instead of the marker
   sitting on the rail as the layout implies. */
.timeline-scroll__marker {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: var(--space-full);
  background: var(--colour-light-grey);
  transition: background 0.2s linear;
}

/* Typography comes from .text-h2 (css/typography.css) — same scale as the
   other stat/value treatments on this page. */
.timeline-scroll__year {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Same fluid ramp as .text-h2 (css/typography.css) — exact Figma 48px at
     1280px and above. */
  font-size: clamp(30px, 22.11px + 2.022vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--colour-mid-grey);
  transition: color 0.2s linear;
}

/* Typography comes from .text-h5 (css/typography.css). */
.timeline-scroll__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 24px;
  line-height: 28.8px;
  color: var(--colour-header-grey);
}

/* Typography comes from .text-body-medium (css/typography.css). */
.timeline-scroll__copy {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--colour-body-grey);
}

/* ---- Active state ----
   Toggled by js/why-us-timeline.js as each row crosses the activation line
   in the viewport. Only the year and marker change colour, per Figma —
   title/body stay the same grey regardless of state. */

.timeline-scroll__row.is-active .timeline-scroll__year {
  color: var(--colour-brand-teal);
}

.timeline-scroll__row.is-active .timeline-scroll__marker {
  background: var(--colour-brand-teal);
}

/* ---- Responsive / no-JS / reduced-motion fallback ----
   All three conditions land on the same static, single-column, fully
   visible layout — see js/why-us-timeline.js, which checks the same
   1023px + reduced-motion conditions before pinning anything.

   Why the pin stops at 1023px rather than lower: the pinned interaction
   needs the 736px two-sided row AND enough viewport height below the
   fixed header for a 560px stage. Tablet landscape (1024px+) has both;
   tablet portrait doesn't — a scroll-jacked section in a short viewport
   is where this kind of pin turns frustrating on touch, so from there
   down every event is simply visible in one static, rail-left list. */

@media (max-width: 1279px) {
  .timeline-scroll {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }
}

@media (max-width: 767px) {
  .timeline-scroll {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .timeline-scroll__header {
    margin-bottom: var(--space-3xl); /* 32px, down from 64px */
  }

  .timeline-scroll__list {
    gap: var(--space-5xl); /* 42px between events, down from 80px */
  }
}

.timeline-scroll--static .timeline-scroll__outer {
  height: auto !important;
  min-height: 0;
}

.timeline-scroll--static .timeline-scroll__stage {
  position: static;
}

.timeline-scroll--static .timeline-scroll__viewport {
  height: auto;
  overflow: visible;
  max-width: 100%;
}

.timeline-scroll--static .timeline-scroll__track {
  transform: none !important;
}

.timeline-scroll--static .timeline-scroll__fade {
  display: none;
}

.timeline-scroll--static .timeline-scroll__row {
  grid-template-columns: 4px 1fr;
  column-gap: var(--space-2xl);
}

.timeline-scroll--static .timeline-scroll__rail {
  left: 2px;
  transform: none;
}

.timeline-scroll--static .timeline-scroll__marker {
  grid-row: 1;
  grid-column: 1;
}

.timeline-scroll--static .timeline-scroll__col:first-child:not(.timeline-scroll__col--empty) {
  grid-row: 1;
  grid-column: 2;
  align-items: flex-start;
  text-align: left;
}

.timeline-scroll--static .timeline-scroll__col--empty {
  display: none;
}

.timeline-scroll--static .timeline-scroll__row--right .timeline-scroll__col:last-child {
  grid-row: 1;
  grid-column: 2;
}