/* ---------- History / timeline (Figma: black 1697->2787; photo strip straddles into the next section) ---------- */
.history { display: flow-root; background: var(--c-black); color: var(--c-white); padding-top: 152.5px; }
.history__head { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.history__title { color: var(--c-yellow); margin-bottom: 37px; max-width: 675px; }
.history__intro { max-width: 551px; font-size: var(--fs-body); line-height: var(--lh-auto); }
.history__intro p + p { margin-top: 19px; }

/* Timeline row: arrow column (66 -> 178) + horizontal scroller reaching the viewport edge */
.timeline { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin-top: 76px; padding-left: var(--edge); }
.timeline__controls { align-self: end; display: flex; gap: 11.5px; padding-bottom: 0; }
.timeline__btn { width: 35.5px; height: 35.5px; color: var(--c-white); border-radius: 50%; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.timeline__btn:hover { color: var(--c-yellow); }
.timeline__btn:disabled { opacity: 0.35; cursor: default; }
.timeline__btn svg { width: 100%; height: 100%; overflow: visible; }
.timeline__scroll { scroll-padding-left: 11.5px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x proximity; }
.timeline__scroll::-webkit-scrollbar { display: none; }
.timeline__track { display: flex; width: max-content; padding: 55.3px 0 0 11.5px; }

.milestone { position: relative; flex: none; width: var(--w, max-content); min-width: 270px; margin-right: var(--gap, 70px); scroll-snap-align: start; padding-bottom: 0.1px; }
.milestone::after { content: ""; position: absolute; top: -55.3px; left: var(--line, calc(100% + 35px)); height: 377.1px; width: 1px; background: rgba(255, 255, 255, 0.5); pointer-events: none; }
.milestone:last-child::after { display: none; }
.milestone__year { display: block; height: 160px; white-space: nowrap; font-size: var(--fs-year); transition: color var(--dur) var(--ease); }
.milestone__label { display: block; margin-top: 29.4px; font-size: var(--fs-eyebrow); white-space: nowrap; }
.milestone__text { margin-top: 23.4px; max-width: var(--tw, 270.4px); font-size: var(--fs-body); line-height: var(--lh-auto); }
/* Hover: year fills with a technical drawing when one is supplied (--hover-img), else turns yellow [ASSUMED fallback] */
.milestone:hover .milestone__year, .milestone:focus-within .milestone__year { color: var(--c-yellow); }
.milestone--img .milestone__year { background: var(--hover-img) center / cover no-repeat; -webkit-background-clip: text; background-clip: text; }
.milestone--img:hover .milestone__year, .milestone--img:focus-within .milestone__year { color: transparent; -webkit-text-fill-color: transparent; }

/* Photo strip: 5 tiles of 336.8 x 275, 24.9 gap, starts 171.7px off the left edge, drifts slowly [ASSUMED motion] */
.strip { position: relative; z-index: 2; margin-top: 113.7px; margin-bottom: -125.1px; overflow: hidden; }
.strip__track { display: flex; gap: 24.87px; width: max-content; transform: translateX(-171.66px); animation: strip-drift 60s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__tile { position: relative; flex: none; width: 336.77px; height: 275.07px; overflow: hidden; background: #111; }
.strip__tile img { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, 100%); min-height: 100%; object-fit: cover; max-width: none; height: auto; }
@keyframes strip-drift { to { transform: translateX(calc(-171.66px - var(--n, 5) * 361.64px)); } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

@media (max-width: 1024px) {
  .timeline { grid-template-columns: 1fr; padding-left: 0; row-gap: 1.5rem; }
  .timeline__controls { order: 2; padding-left: var(--gutter); }
  .timeline__track { padding-left: var(--gutter); }
  .timeline__scroll { scroll-padding-left: var(--gutter); }
}
@media (max-width: 767px) {
  .history { padding-top: 88px; }
  .history__title { margin-bottom: 24px; }
  .timeline { margin-top: 48px; }
  .strip { margin-top: 64px; margin-bottom: -60px; }
  .strip__tile { width: 260px; height: 212px; }
  .strip__track { gap: 16px; transform: translateX(-60px); animation-name: strip-drift-sm; }
  @keyframes strip-drift-sm { to { transform: translateX(calc(-60px - var(--n, 5) * 276px)); } }
}