.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:18px;height:18px;margin-top:11px;border-radius:50%;background:var(--bg);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)}
/* No phase/date label above the title: no gap */
.mls-years__meta>.mls-years__title:first-child{margin-top:0}
.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);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}
/* Closing line under the launch marker (no rule; the next-step cards follow right after) */
.mls-sec.mls-years{padding-bottom:var(--mls-section-sm)}
.mls-years__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:8px;padding-left:calc(clamp(40px,6vw,72px) + clamp(14px,2.5vw,32px))}
.mls-years__foot .mls-body-text{max-width:640px;color:var(--muted)}
/* Cost block. Two-column layout: description in row 1, cost in row 2, photo spanning both rows, so the cost block's
   bottom meets the photo's bottom in every phase. The optional note hangs below the block (out of flow) so it never
   shifts the label and amount. One column: description, cost (note in flow), photo. */
.mls-years__cost{position:relative;border-top:1px solid var(--line);padding-top:16px}
.mls-years__amount{margin-top:8px;font:700 clamp(24px,2.4vw,32px)/1.05 var(--mls-display);letter-spacing:-.03em;color:var(--head,inherit)}
.mls-years__cdetail{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.mls-years__cnote{margin-top:8px;font-size:13px;line-height:1.5;color:var(--faint)}
@container (min-width:680px){
  .mls-years__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto}
  .mls-years__copy{grid-column:1;grid-row:1}
  .mls-years__cost{grid-column:1;grid-row:2}
  .mls-years__photo{grid-column:2;grid-row:1/span 2;align-self:start}
  .mls-years__cdetail{min-height:3em} /* room for 2 lines, so a wrapped detail doesn't lift the label */
  .mls-years__cnote{position:absolute;left:0;right:0;top:100%}
}
/* The hanging note needs room below its phase on two-column layouts */
@media (min-width:860px){.mls-years__phase:has(.mls-years__cnote){padding-bottom:calc(clamp(56px,8vw,112px) + 2.5em)}}