.about-section {
    --milestone-x: 62vw;
    position: relative;
    height: 620vh;
    min-height: 620vh;
    padding: 0;
    overflow: clip;
    color: #fff;
    background: radial-gradient(circle at 72% 35%, rgba(255,64,20,.13), transparent 28%), radial-gradient(circle at 18% 78%, rgba(68,86,176,.12), transparent 30%), #070709;
}

.about-section::before {
    position: sticky;
    top: 0;
    height: 100vh;
    right: auto;
    opacity: 1;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,.58) 100%);
    mask-image: none;
    -webkit-mask-image: none;
}
.about-section::after { display: none; }

#milestone-canvas {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    opacity: 1;
    mix-blend-mode: screen;
}

.galaxy-haze {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7,7,9,.94), transparent 30%, transparent 78%, rgba(7,7,9,.42)), radial-gradient(ellipse at 48% 56%, rgba(255,51,0,.075), transparent 42%);
}

.milestone-layout,
.milestone-layout.section-stage,
.milestone-layout.section-stage.is-visible,
.milestone-layout.section-stage.is-leaving-up,
.milestone-layout.section-stage.is-leaving-down {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 1;
    transform: none;
    filter: none;
}

.milestone-intro,
.milestone-layout.section-stage:not(.is-visible) .milestone-intro,
.milestone-layout.section-stage.is-visible .milestone-intro {
    position: absolute;
    left: clamp(24px,5vw,82px);
    top: 50%;
    z-index: 5;
    width: clamp(270px,31vw,520px);
    max-width: none;
    padding: 0;
    color: #fff;
    opacity: 1;
    transform: translateY(-50%);
    text-shadow: 0 4px 40px rgba(0,0,0,.65);
}
.milestone-intro::after { display: none; }
.about-title { max-width: none; font-size: clamp(4.2rem,8vw,9rem); line-height: .78; letter-spacing: -.075em; }
.about-title span { color: #ff3b0a; }
.title-break { display: none; }
.milestone-note { max-width: 350px; margin-top: clamp(22px,3vh,36px); color: rgba(255,255,255,.58); font-size: clamp(.82rem,1vw,1rem); }
.milestone-direction { margin-top: 28px; color: rgba(255,255,255,.42); font-size: .67rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.milestone-direction span { display: inline-block; margin-left: 10px; color: #ff3b0a; animation: galaxyArrow 1.7s ease-in-out infinite; }
@keyframes galaxyArrow { 50% { transform: translateX(9px); } }

.milestone-list {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: clamp(72px,9vw,170px);
    width: max-content;
    height: 100vh;
    padding: 0 18vw 0 0;
    transform: translate3d(var(--milestone-x),0,0);
    will-change: transform;
}
.milestone-list::before { display: none; }

.milestone-item,
.milestone-layout.section-stage:not(.is-visible) .milestone-item,
.milestone-layout.section-stage.is-visible .milestone-item {
    --float-y: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 clamp(340px,31vw,540px);
    width: clamp(340px,31vw,540px);
    min-height: clamp(330px,48vh,520px);
    padding: clamp(30px,4vw,58px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: clamp(28px,3vw,48px);
    overflow: hidden;
    opacity: 1;
    color: #fff;
    background: linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025) 58%), rgba(11,11,16,.72);
    box-shadow: 0 35px 90px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.1);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    transform: translate3d(var(--magnet-x,0px),calc(var(--float-y) + var(--magnet-y,0px)),0) rotate(var(--magnet-r,0deg));
    transition: border-color .35s ease, box-shadow .35s ease, opacity .35s ease, transform .18s ease-out;
    isolation: isolate;
}
.milestone-item:nth-child(2n) { --float-y: -10vh; }
.milestone-item:nth-child(3n) { --float-y: 9vh; }
.milestone-item:nth-child(5n) { --float-y: -6vh; }
.milestone-item::before { left: auto; right: 28px; top: 28px; width: 8px; height: 8px; background: #ff3b0a; box-shadow: 0 0 18px 5px rgba(255,51,0,.55); }
.milestone-item::after { content: ""; position: absolute; inset: -40%; z-index: -1; opacity: 0; background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(255,72,24,.24),transparent 24%); transition: opacity .3s ease; }
.milestone-item.is-active { opacity: 1; border-color: rgba(255,72,24,.48); box-shadow: 0 42px 120px rgba(0,0,0,.62),0 0 55px rgba(255,51,0,.1),inset 0 1px rgba(255,255,255,.16); }
.milestone-item.is-active::after { opacity: 1; }
.milestone-item.is-dimmed { opacity: .5; }
.milestone-item.is-active .milestone-role { color: #fff; }
.milestone-year { margin-bottom: auto; padding: 0; color: #ff4a18; font-size: clamp(.72rem,.85vw,.9rem); }
.milestone-role { margin-top: clamp(70px,12vh,150px); color: #fff; font-size: clamp(2rem,3.15vw,4rem); line-height: .98; letter-spacing: -.045em; }
.milestone-company { margin-top: 18px; color: rgba(255,255,255,.48); font-size: clamp(.62rem,.72vw,.78rem); line-height: 1.45; }
.milestone-copy { margin-top: 24px; color: rgba(255,255,255,.68); font-size: clamp(.88rem,1vw,1.04rem); line-height: 1.6; }

.milestone-progress {
    position: sticky;
    top: calc(100vh - 58px);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(240px,42vw);
    height: 20px;
    margin: 0 4vw -20px auto;
    color: rgba(255,255,255,.42);
    font: 700 .62rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    letter-spacing: .16em;
}
.milestone-progress i { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(255,255,255,.16); }
.milestone-progress i::after { content: ""; position: absolute; inset: 0; background: #ff3b0a; transform: scaleX(var(--galaxy-progress,0)); transform-origin: left; }

@media (max-width: 900px) {
    .milestone-intro { top: 25%; width: min(78vw,430px); }
    .about-title { font-size: clamp(3.7rem,13vw,6.7rem); }
    .milestone-note { display: none; }
    .milestone-direction { margin-top: 18px; }
    .milestone-list { align-items: flex-end; padding-bottom: 8vh; gap: 14vw; }
    .milestone-item, .milestone-layout.section-stage:not(.is-visible) .milestone-item, .milestone-layout.section-stage.is-visible .milestone-item { flex-basis: min(78vw,460px); width: min(78vw,460px); min-height: min(48vh,460px); padding: clamp(26px,7vw,42px); border-radius: 30px; }
    .milestone-item:nth-child(n) { --float-y: 0px; }
    .milestone-role { margin-top: 52px; font-size: clamp(1.8rem,7vw,3rem); }
    .milestone-copy { font-size: .86rem; }
}

@media (max-width: 760px) {
    body.mobile-experience-ready .about-section { min-height: 620vh !important; height: 620vh !important; padding: 0 !important; overflow: clip !important; background: #070709 !important; }
    body.mobile-experience-ready .milestone-layout { position: sticky !important; top: 0; display: block; width: 100%; height: 100svh; overflow: hidden; }
    body.mobile-experience-ready .milestone-intro { position: absolute; left: 22px; top: 22%; width: 82vw; transform: translateY(-50%) !important; }
    body.mobile-experience-ready .milestone-list { position: absolute; display: flex; width: max-content; height: 100svh; padding-bottom: 7svh; transform: translate3d(var(--milestone-x),0,0) !important; }
    body.mobile-experience-ready .milestone-item { display: flex; flex: 0 0 82vw; width: 82vw; min-height: 46svh; transform: translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0) !important; }
    body.mobile-experience-ready .milestone-progress { display: flex !important; }
}

/* Orbital narrative layer */
.galaxy-coordinate {
    position: sticky;
    top: 32px;
    z-index: 7;
    width: max-content;
    height: 16px;
    margin: 0 0 -16px 4vw;
    color: rgba(255,255,255,.58);
    font: 800 .6rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    letter-spacing: .26em;
    pointer-events: none;
}
.galaxy-coordinate span { color: #ff4a18; }

.gravity-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 0;
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    will-change: transform;
}
.gravity-cursor::before,
.gravity-cursor::after,
.gravity-cursor i {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(255,82,34,.5);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}
.gravity-cursor::before { width: 82px; height: 82px; animation: gravityPulse 1.8s ease-out infinite; }
.gravity-cursor::after { width: 18px; height: 18px; border-color: rgba(255,255,255,.72); }
.gravity-cursor i { width: 132px; height: 44px; border-color: rgba(255,255,255,.12); transform: translate(-50%,-50%) rotate(-18deg); }
.gravity-cursor span { position: absolute; left: 50px; top: 20px; color: rgba(255,82,34,.76); font: 800 .5rem/1 sans-serif; letter-spacing: .2em; }
@keyframes gravityPulse { 0% { transform: translate(-50%,-50%) scale(.5); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; } }

.milestone-list { perspective: 1300px; perspective-origin: 56vw 50%; }

.milestone-item,
.milestone-layout.section-stage:not(.is-visible) .milestone-item,
.milestone-layout.section-stage.is-visible .milestone-item {
    transform: translate3d(var(--magnet-x,0px),calc(var(--float-y) + var(--drift-y,0px) + var(--magnet-y,0px)),var(--flight-z,0px)) scale(var(--flight-scale,1)) rotateY(var(--flight-tilt,0deg)) rotate(var(--magnet-r,0deg));
    transform-style: preserve-3d;
    overflow: visible;
}

.milestone-item > div,
.milestone-item > .milestone-year {
    position: relative;
    z-index: 3;
}

.milestone-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -2;
    width: 126%;
    height: 72%;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(-16deg);
    pointer-events: none;
    transition: border-color .4s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.milestone-orbit::before {
    content: "";
    position: absolute;
    left: 11%;
    top: 7%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff4512;
    box-shadow: 0 0 22px 8px rgba(255,69,18,.42);
}
.milestone-orbit::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: 16%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(197,214,255,.9);
    box-shadow: 0 0 14px 4px rgba(150,178,255,.35);
}
.milestone-item.is-active .milestone-orbit {
    border-color: rgba(255,72,24,.42);
    transform: translate(-50%,-50%) rotate(8deg) scale(1.08);
    animation: orbitBreathe 4s ease-in-out infinite;
}
@keyframes orbitBreathe { 50% { transform: translate(-50%,-50%) rotate(15deg) scale(1.13); } }

.milestone-index-mark {
    position: absolute;
    right: 8%;
    bottom: -11%;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.09);
    font: 950 clamp(8rem,14vw,15rem)/.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    letter-spacing: -.1em;
    pointer-events: none;
    transition: -webkit-text-stroke-color .4s ease, transform .5s ease;
}
.milestone-item.is-active .milestone-index-mark {
    -webkit-text-stroke-color: rgba(255,70,20,.18);
    transform: translate3d(12px,-8px,40px);
}

.milestone-item::after {
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--glow-x,50%) var(--glow-y,50%),rgba(255,72,24,.32),transparent 32%);
}

@media (hover: hover) and (pointer: fine) {
    .about-section { cursor: none; }
}

@media (max-width: 760px) {
    .gravity-cursor { display: none; }
    .galaxy-coordinate { top: 22px; margin-left: 22px; font-size: .48rem; }
    .milestone-orbit { width: 118%; height: 66%; }
    .milestone-index-mark { font-size: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .gravity-cursor::before,
    .milestone-item.is-active .milestone-orbit { animation: none; }
}