/* ===== ClickSambo · About Milestones timeline (scoped: .msl) =====
   >=1200px: horizontal axis, cards alternate above/below it (every milestone visible, no horizontal scroll).
   <1200px:  vertical rail on the left, one column. */
.msl{
  --msl-navy:#1C2841; --msl-orange:#F94C10; --msl-orange-d:#D93D08; --msl-cream:#FFF1E9;
  --msl-line:#F0E2D8; --msl-rail:#E4CFC1; --msl-muted:#51607A; --msl-faint:#B9A89C;
  /* gut: half the gap between desktop cards (20px at >=1400px, easing to 10px at 1200px so titles keep to two lines); lh: description line-height */
  --msl-axis:96px; --msl-gut:clamp(10px,5vw - 50px,20px); --msl-lh:1.6;
  position:relative; margin:56px 0 12px; color:var(--msl-navy);
}
.msl *,.msl *::before,.msl *::after{box-sizing:border-box}

.msl-head{text-align:center; margin-bottom:36px}

.msl-track{list-style:none; margin:0; padding:0; position:relative}
.msl-item{position:relative}

/* card */
.msl-card{
  position:relative; height:100%; background:#fff; border:1px solid var(--msl-line); border-radius:16px; padding:20px;
  box-shadow:0 1px 2px rgba(28,40,65,.04),0 14px 32px -16px rgba(28,40,65,.16);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.msl-meta{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.msl-ico{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--msl-cream); color:var(--msl-orange-d); border:1px solid rgba(249,76,16,.14);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.msl-ico svg{width:20px; height:20px}
.msl time{font-size:13px; font-weight:700; line-height:1.3; letter-spacing:.02em; color:var(--msl-orange-d)}
.msl-num{margin-left:auto; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--msl-faint); font-variant-numeric:tabular-nums}
.msl-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px;
  background:rgba(249,76,16,.1); color:var(--msl-orange-d); font-size:11px; font-weight:700; line-height:1.3;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.msl-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--msl-orange)}
.msl h3{margin:0 0 6px; font-size:17px; line-height:1.35; font-weight:700; color:var(--msl-navy); text-wrap:balance}
.msl .msl-card p{margin:0; font-size:15px; line-height:var(--msl-lh); color:var(--msl-muted)}

/* latest milestone */
.msl-item.is-latest .msl-card{
  border-color:rgba(249,76,16,.38);
  box-shadow:0 0 0 4px rgba(249,76,16,.06),0 18px 40px -16px rgba(249,76,16,.32);
}
.msl-item.is-latest .msl-ico{background:var(--msl-orange); color:#fff; border-color:transparent}

/* axis node + year chip */
.msl-node{
  position:absolute; z-index:2; width:18px; height:18px; border-radius:50%; background:#fff;
  border:4px solid var(--msl-navy); box-shadow:0 0 0 5px var(--msl-cream);
  transform:translate(-50%,-50%); transition:border-color .25s ease,scale .25s ease;
}
.msl-item.is-latest .msl-node{border-color:var(--msl-orange)}
.msl-item.is-latest .msl-node::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--msl-orange);
  animation:msl-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes msl-pulse{from{transform:scale(.7); opacity:.7} to{transform:scale(1.9); opacity:0}}
.msl-yr{
  z-index:2; display:inline-block; padding:3px 11px; border-radius:999px; background:var(--msl-navy); color:#fff;
  font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.08em; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 5px var(--msl-cream);
}

@media (hover:hover){
  .msl-item:hover .msl-card{border-color:rgba(249,76,16,.42); box-shadow:0 1px 2px rgba(28,40,65,.04),0 22px 44px -18px rgba(28,40,65,.26)}
  .msl-item:hover .msl-ico{background:var(--msl-orange); color:#fff; border-color:transparent}
  .msl-item:hover .msl-node{border-color:var(--msl-orange); scale:1.2}
}

/* ---------- desktop: horizontal axis ---------- */
@media (min-width:1200px){
  .msl-track{display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); grid-template-rows:auto var(--msl-axis) auto}
  /* dashed track (future) + solid progress up to the last milestone, both sitting in the middle row */
  .msl-track::before,.msl-track::after{content:""; position:absolute; grid-row:2 / 3; grid-column:1 / -1; left:0; top:50%; pointer-events:none}
  .msl-track::before{
    right:0; height:2px; margin-top:-1px;
    background:repeating-linear-gradient(90deg,var(--msl-rail) 0 6px,transparent 6px 12px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  }
  .msl-track::after{
    right:calc(100% / var(--cols)); height:3px; margin-top:-1.5px; border-radius:3px; transform-origin:left center;
    background:linear-gradient(90deg,rgba(249,76,16,0),rgba(249,76,16,.45) 12%,var(--msl-orange));
  }

  /* each item spans two columns; nodes land on every column line, rows alternate */
  .msl-item{grid-column:var(--c) / span 2; grid-row:1; align-self:end; padding:0 var(--msl-gut)}
  .msl-item--low{grid-row:3; align-self:start}
  .msl-card{height:auto}
  /* node offsets are relative to the card's padding box, hence the 1px border correction */
  .msl-node{left:50%; top:calc(100% + var(--msl-axis) / 2 + 1px)}
  .msl-item--low .msl-node{top:calc(var(--msl-axis) / -2 - 1px)}
  /* stem between card and axis */
  .msl-card::after{
    content:""; position:absolute; left:50%; width:2px; margin-left:-1px; top:100%; height:calc(var(--msl-axis) / 2);
    background:var(--msl-rail); transition:background .25s ease;
  }
  .msl-item--low .msl-card::after{top:auto; bottom:100%}
  .msl-item.is-latest .msl-card::after{background:rgba(249,76,16,.45)}
  /* year chip sits on the axis halfway between the previous node and this one */
  .msl-yr{position:absolute; left:25%; top:calc(100% + var(--msl-axis) / 2); transform:translate(-50%,-50%)}
  .msl-item--low .msl-yr{top:calc(var(--msl-axis) / -2)}
  @media (hover:hover){ .msl-item:hover .msl-card::after{background:var(--msl-orange)} }

  /* titles: always two lines (JS wraps one-liners; the two-line height is reserved either way) */
  .msl h3{min-height:calc(2em * 1.35)}
  /* descriptions: 2 lines with the last one fading out; the full text opens on hover / keyboard focus / tap */
  .msl--clamp .msl-card p{position:relative; max-height:calc(2em * var(--msl-lh)); overflow:hidden; transition:max-height .35s cubic-bezier(.2,.7,.2,1)}
  .msl--clamp .is-clamped .msl-card p::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:calc(1em * var(--msl-lh)); pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.88)); transition:opacity .25s ease;
  }
  .msl--locked .msl-card{position:absolute; left:var(--msl-gut); right:var(--msl-gut); bottom:0}
  .msl--locked .msl-item--low .msl-card{bottom:auto; top:0}
  .msl-item.is-clamped:focus-within{z-index:5}
  .msl--clamp .msl-item.is-clamped:focus-within .msl-card p{max-height:var(--full,none)}
  .msl-item.is-clamped:focus-within .msl-card p::after{opacity:0}
  .msl-item.is-clamped:focus-within .msl-card{box-shadow:0 1px 2px rgba(28,40,65,.04),0 28px 56px -18px rgba(28,40,65,.32)}
  .msl-card:focus-visible{outline:2px solid var(--msl-orange); outline-offset:3px}
  @media (hover:hover){
    .msl-item.is-clamped:hover{z-index:5}
    .msl--clamp .msl-item.is-clamped:hover .msl-card p{max-height:var(--full,none)}
    .msl-item.is-clamped:hover .msl-card p::after{opacity:0}
    .msl-item.is-clamped:hover .msl-card{box-shadow:0 1px 2px rgba(28,40,65,.04),0 28px 56px -18px rgba(28,40,65,.32)}
  }
  /* the date row is too narrow for date + badge in longer languages: the badge becomes a tab on the card's top edge */
  .msl time{white-space:nowrap}
  .msl-badge{position:absolute; top:0; right:18px; transform:translateY(-50%); background:#FFE9DF; box-shadow:0 0 0 3px #fff}
}

/* ---------- tablet / mobile: vertical rail ---------- */
@media (max-width:1199.98px){
  .msl{--msl-rail-x:12px; --msl-pad:44px}
  .msl-head{margin-bottom:24px}
  .msl-track{max-width:760px; margin:0 auto; padding-left:var(--msl-pad)}
  .msl-track::before,.msl-track::after{
    content:""; position:absolute; left:var(--msl-rail-x); top:12px; pointer-events:none;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent); mask-image:linear-gradient(#000 calc(100% - 72px),transparent);
  }
  .msl-track::before{bottom:0; width:2px; margin-left:-1px; background:repeating-linear-gradient(180deg,var(--msl-rail) 0 6px,transparent 6px 12px)}
  .msl-track::after{
    width:3px; margin-left:-1.5px; border-radius:3px; height:calc((100% - 12px) * var(--p,1));
    background:linear-gradient(180deg,rgba(249,76,16,.45),var(--msl-orange));
  }
  .msl-item + .msl-item{margin-top:16px}
  .msl-yr{position:relative; margin:12px 0 16px calc(var(--msl-pad) * -1)}
  .msl-item:first-child .msl-yr{margin-top:0}
  /* node centred on the rail, level with the icon row (offsets are from the padding box: padding 20 + half icon 20) */
  .msl-node{left:calc(var(--msl-rail-x) - var(--msl-pad) - 1px); top:40px}
}
@media (max-width:560px){
  .msl{--msl-rail-x:10px; --msl-pad:34px; margin-top:44px}
  .msl-card{padding:18px 16px}
  .msl-node{top:38px; width:16px; height:16px; border-width:3.5px}
  .msl-meta{gap:10px; margin-bottom:12px}
  .msl h3{font-size:16px}
}

/* ---------- reveal (only when JS added .msl--anim; never with reduced motion) ---------- */
.msl--anim .msl-item{opacity:0; translate:0 16px; transition:opacity .6s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
.msl--anim .msl-item.is-in{opacity:1; translate:none}
@media (min-width:1200px){
  .msl--anim .msl-item{transition-delay:calc(var(--i) * 90ms + 250ms)}
  .msl--anim .msl-item--low{translate:0 -16px}
  .msl--anim .msl-item.is-in{translate:none}
  .msl--anim .msl-track::after{transform:scaleX(0); transition:transform 1.5s cubic-bezier(.55,.05,.25,1) .15s}
  .msl--anim .msl-track.is-in::after{transform:none}
}
@media (max-width:1199.98px){
  /* nodes light up once the scroll passes them */
  .msl--anim .msl-item:not(.is-passed):not(.is-latest) .msl-node{border-color:var(--msl-rail)}
}
@media (prefers-reduced-motion:reduce){
  .msl *,.msl *::before,.msl *::after{animation:none!important; transition:none!important}
}