/* Team · growth — one illustrative path on a time axis in months: steps placed at their month, cards alternating
   above and below the line (the last third anchored to their right edge), the line filling in on scroll
   (partials/team/growth.php, assets/js/team/growth.js); then what makes growth happen. On phones the path runs down. */
.tm-gr__link{margin-top:14px;min-height:40px}
.tm-gr__path{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--sh-1);overflow:hidden}
.band--alt .tm-gr__path{background:var(--paper)}
.tm-gr__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:16px 24px;border-bottom:1px solid var(--line-2)}
.tm-gr__bt{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tm-gr__ill{display:inline-flex;align-items:center;min-height:26px;padding:3px 11px;border:1px dashed var(--line-3);border-radius:var(--r-pill);
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;line-height:1.35;color:var(--muted)}

.tm-gr__stage{position:relative;height:500px;margin:0 36px}
.tm-gr__axis{position:absolute;left:0;right:0;top:50%}
.tm-gr__line{position:absolute;left:0;right:0;top:-1px;height:2px;border-radius:2px;background:var(--line)}
.tm-gr__fill{position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform-origin:left center;transform:scaleX(var(--p,1))}
.tm-gr__tick{position:absolute;top:0;width:0}
.tm-gr__tick::before{content:"";position:absolute;left:-1px;top:-5px;width:2px;height:10px;background:var(--line-3)}
.tm-gr__tick span{position:absolute;top:12px;left:0;transform:translateX(-50%);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.tm-gr__tick.is-first span{transform:none}
.tm-gr__tick.is-last span{transform:translateX(-100%)}

.tm-gr__step{position:absolute;left:var(--at);top:50%;width:0;height:0}
.tm-gr__node{position:absolute;left:-8px;top:-8px;z-index:2;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--blue);transition:background var(--d2) var(--e)}
.tm-gr__step.is-past .tm-gr__node,.tm-gr__path:not(.is-anim) .tm-gr__node{background:var(--blue)}
.tm-gr__step::before{content:"";position:absolute;left:-.5px;width:1px;background:var(--line-3)}
.tm-gr__step--a::before{bottom:8px;height:34px}
.tm-gr__step--b::before{top:8px;height:52px}
.tm-gr__card{position:absolute;left:-14px;width:min(232px,24vw);display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.tm-gr__step--a .tm-gr__card{bottom:42px}
.tm-gr__step--b .tm-gr__card{top:60px}
.tm-gr__step--end .tm-gr__card{left:auto;right:-14px}
.tm-gr__when{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-d)}
.tm-gr__kind{padding:2px 8px;border-radius:var(--r-pill);background:var(--paper-3);color:var(--txt);letter-spacing:.1em}
.tm-gr__step--review .tm-gr__kind{background:var(--ink);color:var(--on-ink)}
.tm-gr__t{font-family:var(--f-h);font-size:1rem;font-weight:500;line-height:1.3;color:var(--ink)}
.tm-gr__x{font-size:var(--t-xs);line-height:1.55;color:var(--muted)}

.tm-gr__ways{margin-top:var(--bdh-block)}
.tm-gr__k{margin-bottom:22px}
.tm-gr__wl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bdh-gap)}
.tm-gr__w{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--ink)}
.tm-gr__wi{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--blue-wash);color:var(--blue-d)}
.tm-gr__wi .xt-ico{--xt-accent:currentColor}
.tm-gr__wt{font-family:var(--f-h);font-size:1.125rem;font-weight:500;line-height:1.3;color:var(--ink)}
.tm-gr__wx{font-size:var(--t-sm);line-height:1.6;color:var(--muted)}

/* below 1181 px the steps are too close for cards side by side on the line: the path runs down instead */
@media (max-width:1180px){
  .tm-gr__stage{height:auto;margin:0;padding:24px 22px 8px}
  .tm-gr__axis{top:0;bottom:0;left:30px;right:auto;width:0}
  .tm-gr__line{left:-1px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .tm-gr__fill{transform-origin:center top;transform:scaleY(var(--p,1))}
  .tm-gr__tick{display:none}
  .tm-gr__steps{display:flex;flex-direction:column;gap:14px}
  .tm-gr__step,.tm-gr__step--end{position:relative;left:auto;top:auto;width:auto;height:auto;padding-left:34px}
  .tm-gr__node{left:0;top:14px}
  .tm-gr__step::before{display:none}
  .tm-gr__card,.tm-gr__step--a .tm-gr__card,.tm-gr__step--b .tm-gr__card,.tm-gr__step--end .tm-gr__card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto}
}
@media (max-width:960px){.tm-gr__wl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .tm-gr__bar{padding:14px 18px}
  .tm-gr__stage{padding:20px 16px 4px}
  .tm-gr__axis{left:24px}
  .tm-gr__step,.tm-gr__step--end{padding-left:28px}
  .tm-gr__wl{grid-template-columns:minmax(0,1fr);gap:0}
  .tm-gr__w{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:18px 0;border-top:1px solid var(--line)}
  .tm-gr__w:first-child{border-top-color:var(--ink)}
  .tm-gr__wi{grid-row:1 / span 2}
}
@media (prefers-reduced-motion:reduce){
  .tm-gr__fill{transform:none}
  .tm-gr__node{transition:none}
}
