/* ==========================================================
   TRAINING LAB ECOSYSTEM — ALIGNMENT + PREMIUM MOTION QA
   09 SEP 2026
   Symmetrical desktop geometry, no card/hub collisions,
   actual Business Lab logo, animated route choreography.
   ========================================================== */
.tl-ecosystem-redesign{overflow:hidden!important;position:relative!important}
.tl-ecosystem-redesign .story-body>p{max-width:760px!important;margin-bottom:28px!important;color:rgba(255,255,255,.62)!important}

.tl-ecosystem-redesign .tl-route-stage{
  --eco-red:#d51f32;
  --eco-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  width:min(1180px,100%);
  min-height:620px;
  margin:42px auto 4px;
  display:grid;
  grid-template-columns:minmax(300px,1fr) 300px minmax(300px,1fr);
  grid-template-rows:360px 220px;
  column-gap:58px;
  row-gap:22px;
  align-items:center;
  isolation:isolate;
}

/* Hub/orbits are centered only around the top row, so they never collide with Service Architect. */
.tl-ecosystem-redesign .tl-route-orbits{
  position:absolute;
  z-index:0;
  left:50%;
  top:180px;
  width:500px;
  height:500px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.tl-ecosystem-redesign .tl-route-orbit{
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.09);
  will-change:transform,opacity;
}
.tl-ecosystem-redesign .tl-route-orbit--one{width:310px;height:310px;border-color:rgba(213,31,50,.46)}
.tl-ecosystem-redesign .tl-route-orbit--two{width:400px;height:400px;border-color:rgba(255,255,255,.15);border-style:dashed}
.tl-ecosystem-redesign .tl-route-orbit--three{width:490px;height:490px;border-color:rgba(255,255,255,.075)}
.tl-ecosystem-redesign .tl-route-scan{
  position:absolute;left:50%;top:50%;width:244px;height:1px;
  transform-origin:left center;
  transform:rotate(-52deg);
  background:linear-gradient(90deg,rgba(213,31,50,.78),rgba(213,31,50,.10) 64%,transparent);
  opacity:.58;
}
.tl-ecosystem-redesign .tl-route-scan::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(50%,-50%);background:var(--eco-red);box-shadow:0 0 0 5px rgba(213,31,50,.08);
}

.tl-ecosystem-redesign .tl-route-hub{
  grid-column:2;grid-row:1;
  position:relative;z-index:4;
  width:270px;height:270px;
  justify-self:center;align-self:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(213,31,50,.13),rgba(11,11,11,.985) 60%);
  border:1px solid rgba(213,31,50,.68);
  box-shadow:0 0 0 22px rgba(213,31,50,.028),0 30px 74px rgba(0,0,0,.30);
  text-align:center;
}
.tl-ecosystem-redesign .tl-route-hub::before{
  content:"";position:absolute;inset:17px;border-radius:50%;border:1px solid rgba(213,31,50,.18);pointer-events:none;
}
.tl-ecosystem-redesign .tl-route-hub__halo{
  position:absolute;inset:-17px;border-radius:50%;border:1px solid rgba(213,31,50,.13);pointer-events:none;
}
.tl-ecosystem-redesign .tl-route-hub img{width:184px!important;max-width:72%!important;height:auto!important;margin:0 0 18px!important;filter:none!important;transform:none!important}
.tl-ecosystem-redesign .tl-route-hub>span{font-size:9px;font-weight:900;letter-spacing:.18em;color:rgba(255,255,255,.66)}
.tl-ecosystem-redesign .tl-route-hub>small{margin-top:10px;font-size:8px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.32)}

.tl-ecosystem-redesign .tl-route-card{
  position:relative;z-index:3;
  width:100%;
  min-width:0;
  min-height:214px;
  padding:26px 58px 26px 28px;
  display:flex;flex-direction:column;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.018));
  color:#fff;text-decoration:none;
  box-shadow:0 20px 56px rgba(0,0,0,.20);
  overflow:hidden;
  transition:transform .5s var(--eco-ease),border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.tl-ecosystem-redesign .tl-route-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,transparent 7%,var(--eco-red) 48%,transparent 94%);opacity:.58;
}
.tl-ecosystem-redesign .tl-route-card::after{
  content:"";position:absolute;z-index:-1;top:-55%;left:-38%;width:34%;height:210%;
  transform:rotate(18deg) translateX(-180%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  opacity:0;pointer-events:none;
}
.tl-ecosystem-redesign .tl-route-card--programmes{grid-column:1;grid-row:1;align-self:center}
.tl-ecosystem-redesign .tl-route-card--business{
  grid-column:3;grid-row:1;align-self:center;
  display:grid;grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:center;
  padding:22px 54px 22px 20px;
}
.tl-ecosystem-redesign .tl-route-card--service{
  grid-column:2;grid-row:2;
  align-self:start;justify-self:center;
  width:min(440px,calc(100vw - 40px));
  min-height:174px;
  padding-top:24px;padding-bottom:24px;
}
.tl-ecosystem-redesign .tl-route-card__top{display:flex;align-items:center;gap:12px;margin-bottom:15px;min-width:0}
.tl-ecosystem-redesign .tl-route-num{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--eco-red);color:#fff;font-size:10px;font-weight:900;letter-spacing:.06em;
}
.tl-ecosystem-redesign .tl-route-kicker{min-width:0;font-size:8px;font-weight:800;letter-spacing:.15em;color:rgba(255,255,255,.44)}
.tl-ecosystem-redesign .tl-route-card strong{display:block;margin:0 0 9px;font-size:clamp(23px,2vw,30px);line-height:1.04;letter-spacing:-.035em}
.tl-ecosystem-redesign .tl-route-card small{display:block;max-width:31ch;font-size:12px;line-height:1.62;color:rgba(255,255,255,.62)}
.tl-ecosystem-redesign .tl-route-card>b{position:absolute;right:25px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--eco-red);transition:transform .35s var(--eco-ease),opacity .3s ease}
.tl-ecosystem-redesign .tl-route-business-logo{
  width:100px;height:128px;display:grid;place-items:center;border-radius:18px;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.085);overflow:hidden;
  transition:border-color .35s ease,background .35s ease;
}
.tl-ecosystem-redesign .tl-route-business-logo img{display:block;width:88px!important;height:118px!important;object-fit:contain!important;filter:none!important;transform:none!important}
.tl-ecosystem-redesign .tl-route-business-copy{min-width:0}
.tl-ecosystem-redesign .tl-route-business-copy .tl-route-card__top{margin-bottom:11px}

.tl-ecosystem-redesign .tl-route-connector{
  position:absolute;display:block;height:1px;
  background:linear-gradient(90deg,var(--eco-red),rgba(213,31,50,.12));
  opacity:.72;transform-origin:left center;
}
.tl-ecosystem-redesign .tl-route-card--programmes .tl-route-connector{right:-58px;top:50%;width:58px}
.tl-ecosystem-redesign .tl-route-card--business .tl-route-connector{left:-58px;top:50%;width:58px;transform:rotate(180deg);transform-origin:right center}
.tl-ecosystem-redesign .tl-route-card--service .tl-route-connector{left:50%;top:-44px;width:44px;transform:rotate(-90deg);transform-origin:left center}

@media(hover:hover) and (pointer:fine){
  .tl-ecosystem-redesign .tl-route-card:hover,
  .tl-ecosystem-redesign .tl-route-card.eco-active{
    transform:translateY(-7px);
    border-color:rgba(213,31,50,.52);
    background:linear-gradient(145deg,rgba(213,31,50,.105),rgba(255,255,255,.028));
    box-shadow:0 28px 76px rgba(0,0,0,.28),0 0 0 1px rgba(213,31,50,.08) inset;
  }
  .tl-ecosystem-redesign .tl-route-card:hover::after,
  .tl-ecosystem-redesign .tl-route-card.eco-active::after{opacity:1;animation:ecoCardSheen 1.15s var(--eco-ease) both}
  .tl-ecosystem-redesign .tl-route-card:hover>b,
  .tl-ecosystem-redesign .tl-route-card.eco-active>b{transform:translate(6px,-50%)}
  .tl-ecosystem-redesign .tl-route-card--business:hover .tl-route-business-logo,
  .tl-ecosystem-redesign .tl-route-card--business.eco-active .tl-route-business-logo{border-color:rgba(213,31,50,.38);background:rgba(213,31,50,.045)}
}

/* Entrance choreography */
.tl-ecosystem-redesign:not(.eco-live) .tl-route-hub{opacity:0;transform:scale(.84)}
.tl-ecosystem-redesign:not(.eco-live) .tl-route-card--programmes{opacity:0;transform:translate3d(-48px,12px,0)}
.tl-ecosystem-redesign:not(.eco-live) .tl-route-card--business{opacity:0;transform:translate3d(48px,12px,0)}
.tl-ecosystem-redesign:not(.eco-live) .tl-route-card--service{opacity:0;transform:translate3d(0,42px,0)}
.tl-ecosystem-redesign:not(.eco-live) .tl-route-orbit{opacity:0;transform:translate(-50%,-50%) scale(.70)}
.tl-ecosystem-redesign:not(.eco-live) .tl-route-scan{opacity:0}
.tl-ecosystem-redesign:not(.eco-live) .tl-route-connector{opacity:0!important;scale:0 1}
.tl-ecosystem-redesign .tl-route-hub,.tl-ecosystem-redesign .tl-route-card,.tl-ecosystem-redesign .tl-route-orbit{transition:opacity .68s ease,transform .92s var(--eco-ease)}
.tl-ecosystem-redesign .tl-route-connector{transition:opacity .36s ease,scale .68s var(--eco-ease)}
.tl-ecosystem-redesign.eco-live .tl-route-hub{opacity:1;transform:scale(1);transition-delay:.06s}
.tl-ecosystem-redesign.eco-live .tl-route-orbit--one{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.11s}
.tl-ecosystem-redesign.eco-live .tl-route-orbit--two{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.18s}
.tl-ecosystem-redesign.eco-live .tl-route-orbit--three{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.25s}
.tl-ecosystem-redesign.eco-live .tl-route-card--programmes{opacity:1;transform:none;transition-delay:.23s}
.tl-ecosystem-redesign.eco-live .tl-route-card--business{opacity:1;transform:none;transition-delay:.34s}
.tl-ecosystem-redesign.eco-live .tl-route-card--service{opacity:1;transform:none;transition-delay:.48s}
.tl-ecosystem-redesign.eco-live .tl-route-scan{opacity:.58;transition:opacity .5s ease .6s}
.tl-ecosystem-redesign.eco-live .tl-route-connector{opacity:.72!important;scale:1 1;transition-delay:.72s}

@media(prefers-reduced-motion:no-preference){
  .tl-ecosystem-redesign.eco-live .tl-route-orbit--two{animation:ecoOrbitSpin 24s linear infinite}
  .tl-ecosystem-redesign.eco-live .tl-route-orbit--one{animation:ecoOrbitBreathe 5.8s ease-in-out infinite}
  .tl-ecosystem-redesign.eco-live .tl-route-scan{animation:ecoScan 10.5s linear infinite}
  .tl-ecosystem-redesign.eco-live .tl-route-hub__halo{animation:ecoHalo 3.8s ease-in-out infinite}
  .tl-ecosystem-redesign.eco-live .tl-route-hub::before{animation:ecoInnerPulse 4.8s ease-in-out infinite}
  .tl-ecosystem-redesign.eco-live .tl-route-num{animation:ecoNumPulse 5.4s ease-in-out infinite}
}
@keyframes ecoOrbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ecoOrbitBreathe{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes ecoScan{from{transform:rotate(-52deg)}to{transform:rotate(308deg)}}
@keyframes ecoHalo{0%,100%{transform:scale(1);opacity:.48}50%{transform:scale(1.045);opacity:.92}}
@keyframes ecoInnerPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ecoNumPulse{0%,88%,100%{box-shadow:0 0 0 0 rgba(213,31,50,0)}92%{box-shadow:0 0 0 7px rgba(213,31,50,.08)}}
@keyframes ecoCardSheen{0%{transform:rotate(18deg) translateX(-180%)}100%{transform:rotate(18deg) translateX(520%)}}

@media(max-width:1140px){
  .tl-ecosystem-redesign .tl-route-stage{grid-template-columns:minmax(240px,1fr) 250px minmax(240px,1fr);grid-template-rows:330px 205px;column-gap:34px;min-height:565px}
  .tl-ecosystem-redesign .tl-route-orbits{top:165px;width:440px;height:440px}
  .tl-ecosystem-redesign .tl-route-orbit--one{width:270px;height:270px}.tl-ecosystem-redesign .tl-route-orbit--two{width:350px;height:350px}.tl-ecosystem-redesign .tl-route-orbit--three{width:430px;height:430px}
  .tl-ecosystem-redesign .tl-route-hub{width:230px;height:230px}.tl-ecosystem-redesign .tl-route-hub img{width:160px!important}
  .tl-ecosystem-redesign .tl-route-card{min-height:198px;padding:22px 50px 22px 22px}
  .tl-ecosystem-redesign .tl-route-card--business{grid-template-columns:86px minmax(0,1fr);gap:14px;padding-left:16px}
  .tl-ecosystem-redesign .tl-route-business-logo{width:82px;height:108px}.tl-ecosystem-redesign .tl-route-business-logo img{width:72px!important;height:100px!important}
  .tl-ecosystem-redesign .tl-route-card--service{width:min(410px,100%);min-height:166px}
}

@media(max-width:820px){
  .tl-ecosystem-redesign .tl-route-stage{
    display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:16px;
    min-height:0;margin-top:28px;padding-left:46px;width:100%;
  }
  .tl-ecosystem-redesign .tl-route-stage::before{
    content:"";position:absolute;left:20px;top:126px;bottom:38px;width:1px;
    background:linear-gradient(180deg,rgba(213,31,50,.75),rgba(213,31,50,.12));
  }
  .tl-ecosystem-redesign .tl-route-orbits{display:none!important}
  .tl-ecosystem-redesign .tl-route-hub{
    grid-column:1;grid-row:auto;position:relative;width:210px;height:210px;margin:0 auto 10px;
  }
  .tl-ecosystem-redesign .tl-route-hub img{width:145px!important}
  .tl-ecosystem-redesign .tl-route-card,
  .tl-ecosystem-redesign .tl-route-card--programmes,
  .tl-ecosystem-redesign .tl-route-card--business,
  .tl-ecosystem-redesign .tl-route-card--service{
    grid-column:1;grid-row:auto;width:100%;min-height:0;margin:0;align-self:auto;justify-self:auto;
    padding:20px 46px 20px 20px!important;border-radius:20px;
  }
  .tl-ecosystem-redesign .tl-route-card--business{display:grid;grid-template-columns:76px minmax(0,1fr);gap:13px;align-items:center}
  .tl-ecosystem-redesign .tl-route-business-logo{width:72px;height:94px;border-radius:14px}.tl-ecosystem-redesign .tl-route-business-logo img{width:63px!important;height:87px!important}
  .tl-ecosystem-redesign .tl-route-connector{display:none!important}
  .tl-ecosystem-redesign .tl-route-card::before{left:-31px;top:50%;bottom:auto;width:31px;height:1px;background:rgba(213,31,50,.55)}
  .tl-ecosystem-redesign .tl-route-card::after{display:none}
  .tl-ecosystem-redesign .tl-route-card strong{font-size:22px}
  .tl-ecosystem-redesign .tl-route-card small{font-size:11.5px;line-height:1.6}
  .tl-ecosystem-redesign .tl-route-num{width:38px;height:38px;font-size:9px}
  .tl-ecosystem-redesign .tl-route-card>b{right:18px;font-size:20px}
  .tl-ecosystem-redesign:not(.eco-live) .tl-route-card--programmes,
  .tl-ecosystem-redesign:not(.eco-live) .tl-route-card--business,
  .tl-ecosystem-redesign:not(.eco-live) .tl-route-card--service{transform:translate3d(24px,0,0)}
}

@media(max-width:520px){
  .tl-ecosystem-redesign .tl-route-stage{padding-left:38px}
  .tl-ecosystem-redesign .tl-route-stage::before{left:16px}
  .tl-ecosystem-redesign .tl-route-hub{width:188px;height:188px}
  .tl-ecosystem-redesign .tl-route-hub img{width:132px!important;margin-bottom:14px!important}
  .tl-ecosystem-redesign .tl-route-card--business{grid-template-columns:64px minmax(0,1fr);gap:11px}
  .tl-ecosystem-redesign .tl-route-business-logo{width:60px;height:82px}.tl-ecosystem-redesign .tl-route-business-logo img{width:53px!important;height:76px!important}
  .tl-ecosystem-redesign .tl-route-kicker{font-size:7px;letter-spacing:.12em}
}

@media(prefers-reduced-motion:reduce){
  .tl-ecosystem-redesign .tl-route-hub,.tl-ecosystem-redesign .tl-route-card,.tl-ecosystem-redesign .tl-route-orbit,.tl-ecosystem-redesign .tl-route-scan,.tl-ecosystem-redesign .tl-route-connector{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;scale:1 1!important}
  .tl-ecosystem-redesign .tl-route-orbit{transform:translate(-50%,-50%)!important}
}