/* About Us: giant outlined year, then a timeline that travels sideways as you scroll */
.au-hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 140px 0 clamp(60px, 10vh, 110px); overflow: hidden; background:
  radial-gradient(60% 50% at 85% 20%, rgba(42, 111, 208, .1), transparent 70%),
  radial-gradient(50% 50% at 10% 90%, rgba(21, 137, 63, .08), transparent 70%), #fff; }
.au-hero__year { position: absolute; inset: 90px 0 auto; display: flex; justify-content: center; gap: .02em; font-size: clamp(160px, 30vw, 460px); font-weight: 600; line-height: .8; letter-spacing: -.06em; pointer-events: none; }
.au-hero__year span { color: transparent; -webkit-text-stroke: 1.5px rgba(29, 43, 152, .18); transform: translateY(calc(var(--d, 0) * var(--ys, 0px))); }
.au-hero__year span:nth-child(1) { --d: .2; } .au-hero__year span:nth-child(2) { --d: .5; } .au-hero__year span:nth-child(3) { --d: .8; } .au-hero__year span:nth-child(4) { --d: 1.1; }
.au-hero__copy { position: relative; display: grid; gap: 22px; }

.au-intro { padding: clamp(60px, 9vw, 120px) 0; }
.au-intro__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 90px); align-items: end; }
.au-intro__big { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; letter-spacing: -.02em; font-weight: 400; }

/* timeline: sticky stage, the track slides left */
.tl { position: relative; height: var(--tl-h, 400svh); background: #0c1222; color: #fff; }
.tl__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); overflow: hidden; padding-top: 110px; }
.tl__head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px 40px; }
.tl__head .eyebrow { grid-column: 1 / -1; color: rgba(255, 255, 255, .6); }
.tl__head h2 { font-size: clamp(30px, 4vw, 54px); }
.tl__bar { height: 2px; background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; align-self: center; }
.tl__bar i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--tp, 0)); }
.tl__track { justify-self: start; list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 22px; align-items: center; height: 100%; width: max-content; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.chap { position: relative; flex: none; width: clamp(280px, 28vw, 400px); min-height: 360px; display: grid; align-content: end; gap: 12px; padding: 30px; border-radius: 26px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.chap::before { content: ""; position: absolute; left: 30px; top: 30px; width: 36px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .4); }
.chap--blue { background: linear-gradient(160deg, #2b3cb0, #18258f 55%, #0f186a); border: 0; }
.chap--green { background: linear-gradient(160deg, #15a36c, #098253 55%, #055c39); border: 0; }
.chap__year { font-size: clamp(46px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.chap h3 { font-size: 21px; font-weight: 500; }
.chap p { color: rgba(255, 255, 255, .75); font-size: 15px; }
.chap--photo { width: clamp(320px, 36vw, 520px); padding: 0; overflow: hidden; border: 0; }
.chap--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chap--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8, 12, 22, .9)); }
.chap--photo::before { z-index: 2; }
.chap--photo > :not(img) { position: relative; z-index: 2; margin: 0 30px; }
.chap--photo p { margin-bottom: 30px; }

.firsts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.first { display: grid; gap: 14px; align-content: start; padding: 30px; border-radius: 24px; border: 1px solid var(--line); background: #fff; transition: transform .4s var(--ease), box-shadow .4s; }
.first:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.first svg { width: 46px; height: 46px; color: var(--green); }
.first:nth-child(2) svg { color: var(--blue); }
.first h3 { font-size: 21px; line-height: 1.25; }
.first p { color: var(--muted); }

.au-motto { padding: clamp(90px, 13vw, 180px) 0; background: var(--bg-soft); text-align: center; }
.au-motto p { font-size: clamp(30px, 4.6vw, 66px); line-height: 1.15; letter-spacing: -.03em; font-weight: 500; }

@media (max-width: 900px) {
  .au-intro__grid, .firsts { grid-template-columns: 1fr; }
  .tl__head { grid-template-columns: 1fr; }
  .tl__bar { width: 100%; }
}
/* without the sideways scroll, the chapters simply stack */
.tl.is-static { height: auto; }
.tl.is-static .tl__pin { position: relative; height: auto; padding: 100px 0 80px; }
.tl.is-static .tl__track { width: auto; flex-direction: column; align-items: stretch; transform: none; gap: 14px; margin-top: 40px; }
.tl.is-static .chap { width: auto; min-height: 0; }
.tl.is-static .chap--photo { min-height: 380px; }