.srp-timeline-section { padding-top: clamp(4rem,6vw,6rem); padding-bottom: var(--srp-section-space); color: #fff; background: #11101a; scroll-margin-top: 5rem; }
.srp-section-head--timeline { max-width: 58rem; color: #fff; }
.srp-section-head--timeline .srp-section-lead { color: rgba(255,255,255,.62); }
.srp-dual-timeline { display: grid; gap: 1rem; margin-top: clamp(3rem,5vw,5rem); }
.srp-dual-timeline__label { margin: 0; color: rgba(255,255,255,.45); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.srp-dual-timeline__track { display: grid; min-width: 0; min-height: 17rem; grid-template-columns: repeat(10,minmax(0,1fr)); grid-template-rows: repeat(2,8rem); gap: 1rem .7rem; }
.srp-dual-timeline__axis { display: grid; height: 3.2rem; grid-template-columns: repeat(10,minmax(0,1fr)); align-items: start; border-top: 2px solid #9e89fa; box-shadow: 0 -1rem 2.5rem rgba(140,114,255,.12); }
.srp-dual-timeline__axis > span { position: relative; padding-top: .8rem; color: rgba(255,255,255,.48); font-size: .65rem; font-weight: 750; text-align: center; }
.srp-dual-timeline__axis i { position: absolute; top: -.38rem; left: 50%; width: .58rem; height: .58rem; border: 2px solid #11101a; border-radius: 50%; background: #c5baff; box-shadow: 0 0 0 1px rgba(197,186,255,.58); transform: translateX(-50%); }
.srp-timeline-event { position: relative; z-index: 1; grid-column: var(--column)/span var(--span); grid-row: var(--lane); min-width: 0; min-height: 8rem; padding: .85rem .9rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(255,255,255,.055); box-shadow: 0 1rem 3rem rgba(0,0,0,.18); backdrop-filter: blur(12px); }
.srp-timeline-event::after { position: absolute; left: 1.05rem; width: 1px; content: ""; background: rgba(197,186,255,.35); }
.srp-dual-timeline__track--experience .srp-timeline-event::after { top: 100%; }
.srp-dual-timeline__track--experience .srp-timeline-event--lane-1::after { height: 10rem; }
.srp-dual-timeline__track--experience .srp-timeline-event--lane-2::after { height: 1rem; }
.srp-dual-timeline__track--formation .srp-timeline-event::after { bottom: 100%; }
.srp-dual-timeline__track--formation .srp-timeline-event--lane-1::after { height: 6.2rem; }
.srp-dual-timeline__track--formation .srp-timeline-event--lane-2::after { height: 15.2rem; }
.srp-timeline-event__date { color: #c9bfff; font-size: .7rem; font-weight: 850; letter-spacing: .05em; }
.srp-timeline-event h3 { margin: .35rem 0 0; font-size: .9rem; line-height: 1.15; }
.srp-timeline-event p { margin: .28rem 0 0; color: rgba(255,255,255,.62); font-size: .7rem; line-height: 1.25; }
.srp-timeline-event small { display: block; margin-top: .4rem; color: rgba(255,255,255,.38); font-size: .59rem; line-height: 1.25; }
.srp-timeline-mobile { display: none; }
@media (max-width:52rem) {
    .srp-dual-timeline { display: none; }
    .srp-timeline-mobile { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
    .srp-timeline-mobile > section { display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: 1rem; }
    .srp-timeline-mobile time { color: #c9bfff; font-weight: 850; }
    .srp-timeline-mobile > section > div { display: grid; gap: .7rem; }
    .srp-timeline-mobile__event { padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(255,255,255,.055); }
    .srp-timeline-mobile__event--experience { border-left: 3px solid #f2ebff; }
    .srp-timeline-mobile__event--formation { border-left: 3px solid #8c72ff; }
    .srp-timeline-mobile__event > span { color: #c9bfff; font-size: .62rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
    .srp-timeline-mobile__event h3 { margin: .45rem 0 0; font-size: 1rem; }
    .srp-timeline-mobile__event p { margin: .35rem 0 0; color: rgba(255,255,255,.62); font-size: .75rem; }
    .srp-timeline-mobile__event small { display: block; margin-top: .5rem; color: rgba(255,255,255,.38); font-size: .65rem; }
}
@media (max-width:39.9375rem) { .srp-timeline-section { padding-top: 4rem; } }