.mls-years__head{margin-top:18px}
.mls-years__head .mls-h2{margin:0}
.mls-years__side{max-width:460px;display:grid;gap:14px}
.mls-years__intro{font-size:clamp(16px,1.3vw,19px);color:var(--muted)}
.mls-years__tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mls-years__timeline{position:relative;margin-top:clamp(48px,6vw,80px);--col:clamp(40px,6vw,72px)}
.mls-years__rail,.mls-years__fill{position:absolute;top:20px;left:calc(var(--col)/2 - 1px);width:2px;border-radius:2px}
.mls-years__rail{bottom:0;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.mls-years__fill{height:0;background:linear-gradient(180deg,var(--glow),var(--glow-end));box-shadow:0 0 18px color-mix(in srgb,var(--glow) 80%,transparent)}
.mls-years__phase{position:relative;display:grid;grid-template-columns:var(--col) minmax(0,1fr);gap:clamp(14px,2.5vw,32px);padding-bottom:clamp(56px,8vw,112px)}
.mls-years__phase:last-child{padding-bottom:clamp(32px,4vw,48px)}
.mls-years__phase:has(+ .mls-years__launch){padding-bottom:clamp(40px,5vw,64px)}
.mls-years__nodewrap{display:flex;justify-content:center}
.mls-years__node{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--mls-mono);background:var(--bg);color:var(--faint);border:2px solid var(--line-2);transition:background .35s ease-out,color .35s ease-out,border-color .35s ease-out,box-shadow .35s ease-out}
.mls-years__body{min-width:0;container-type:inline-size;transition:opacity .6s ease-out}
.mls-years__phead{display:flex;align-items:flex-end;flex-wrap:wrap;column-gap:32px;row-gap:20px}
/* Big word: one line, never broken. Largest size = Styles "Phase word size" (--vs) x the design clamp; it also shrinks to fit
   its column for long words (--chars = letter count, ~0.52em per letter in Inter Bold at this tracking). When the word plus
   32px and the label don't fit side by side, the label wraps below (flex-wrap). */
.mls-years__verb{flex:none;white-space:nowrap;padding-bottom:.06em;font:700 calc(var(--vs,1) * clamp(72px,11vw,150px))/.86 var(--mls-display);font-size:max(24px,min(calc(var(--vs,1) * clamp(72px,11vw,150px)),calc(100cqi / (var(--chars,6) * .52))));letter-spacing:-.06em;position:relative;color:var(--head,var(--fg));-webkit-text-stroke:4px transparent;paint-order:stroke fill;transition:color .5s ease-out,-webkit-text-stroke-color .5s ease-out}
.mls-years__meta{flex:0 1 auto;min-width:0;padding-bottom:6px}
.mls-years__when{font:500 12px/1.3 var(--mls-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.mls-years__title{margin:6px 0 0;font:700 calc(var(--ts,1) * clamp(24px,3vw,40px))/1 var(--mls-display);letter-spacing:-.035em;color:var(--head,inherit)}
.mls-years__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(20px,3vw,32px);align-items:start}
.mls-years__copy{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--soft)}
.mls-years__copy p{margin:0 0 .8em}.mls-years__copy p:last-child{margin:0}
.mls-years__photo{position:relative;aspect-ratio:4/3;border-radius:var(--mls-r-lg);overflow:hidden;background:var(--mls-surface);transition:box-shadow .6s}
.mls-years__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .8s ease-out,transform 1.2s var(--mls-ease)}
/* Scroll effect: module.js adds .is-armed; until then (no JS, reduced motion) every phase shows lit. */
.mls-years.is-armed .mls-years__phase:not(.is-on) .mls-years__body{opacity:.4}
/* Outline state. Inter's overlapping contours would show stroke lines inside letters (the bar in "e"), so the stroke
   is painted behind a fill in the section background color (paint-order); the stroke is doubled so 2px shows outside. */
.mls-years.is-armed .mls-years__phase:not(.is-on) .mls-years__verb{color:var(--bg);-webkit-text-stroke-color:color-mix(in srgb,var(--fg) 35%,transparent)}
/* Fallback where paint-order isn't supported: a background-colored copy of the word sits exactly over the outline. */
@supports not (paint-order:stroke fill){
  .mls-years.is-armed .mls-years__phase:not(.is-on) .mls-years__verb::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:0;color:var(--bg);-webkit-text-stroke:0;pointer-events:none}
}
.mls-years.is-armed .mls-years__phase:not(.is-on) .mls-years__photo img{filter:grayscale(1) brightness(.6);transform:scale(1.06)}
.mls-years__phase.is-on .mls-years__node{background:var(--glow);color:#fff;border-color:var(--glow);box-shadow:0 0 24px color-mix(in srgb,var(--glow) 80%,transparent)}
.mls-years__phase.is-on .mls-years__photo{box-shadow:0 30px 80px color-mix(in srgb,var(--glow) 25%,transparent)}
/* Final marker after the phases: small node + one line of display text */
.mls-years__launch{padding-bottom:0!important}
.mls-years__launch .mls-years__nodewrap{position:relative;align-items:flex-start}
/* the line ends at this node: cover the rail below it with the section background */
.mls-years__launch .mls-years__nodewrap::after{content:"";position:absolute;left:50%;top:32px;bottom:-200px;width:8px;transform:translateX(-50%);background:var(--bg)}
.mls-years__node--end{width:24px;height:24px;margin:8px 0}
.mls-years__launchtext{padding-top:3px;font:700 clamp(20px,2.2vw,30px)/1.15 var(--mls-display);letter-spacing:-.03em;color:var(--head,var(--fg))}
.mls-years__timeline:has(.mls-years__launch){overflow-x:visible;overflow-y:clip;padding-bottom:clamp(32px,4vw,48px)}
.mls-years__when span{white-space:nowrap}
.mls-years__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:8px}
.mls-years__foot .mls-body-text{max-width:640px}