

.work-m-path{position:relative;}
.work-m-path .sicon{position:relative;z-index:2;background:var(--cream);border-radius:50%;}
@media (min-width:900px){

  .work-m-path::before{content:"";position:absolute;left:12.5%;right:12.5%;top:58px;height:4px;border-radius:4px;background:var(--blue);z-index:1;}
  .work-m-path::before{right:calc(12.5% + 75% * var(--work-m-left,0));}
}
.work-m-path li.counted .sicon{animation:steppop .45s var(--ease),var(--work-m-move) 1.1s ease-in-out .55s;}
.work-m-path li:nth-child(1){--work-m-move:workMSigh;}
.work-m-path li:nth-child(2){--work-m-move:workMLand;}
.work-m-path li:nth-child(3){--work-m-move:workMScan;}
.work-m-path li:nth-child(4){--work-m-move:workMBuzz;}
.work-m-path li:nth-child(1) .sicon{transform-origin:50% 85%;}
.work-m-path li:nth-child(2) .sicon{transform-origin:50% 100%;}
@keyframes workMSigh{0%,100%{transform:none;}20%{transform:rotate(-10deg);}40%{transform:rotate(8deg);}60%{transform:rotate(-6deg);}80%{transform:rotate(3deg);}}
@keyframes workMLand{0%,100%{transform:none;}30%{transform:translateY(-22px);}55%{transform:scale(1.12,.88);}75%{transform:scale(.96,1.05);}}
@keyframes workMScan{0%,100%{transform:none;}30%{transform:translateX(-14px) rotate(-12deg);}65%{transform:translateX(14px) rotate(10deg);}}
@keyframes workMBuzz{0%,100%{transform:none;}10%,30%,50%,70%{transform:translateX(-5px) rotate(-7deg);}20%,40%,60%,80%{transform:translateX(5px) rotate(7deg);}}

.work-m-arm:not(.work-m-on) .sc-browser{transform:perspective(1800px) rotateX(-78deg);transform-origin:50% 100%;opacity:.25;}
.work-m-arm:not(.work-m-on) .ba-frame{opacity:0;}
.work-m-on .sc-browser{transform-origin:50% 100%;animation:workMLid 1.3s var(--m-ease) both;}
.work-m-on .ba-frame{animation:workMPower .7s ease .85s both;}
@keyframes workMLid{from{transform:perspective(1800px) rotateX(-78deg);opacity:.25;}to{transform:none;opacity:1;}}
@keyframes workMPower{0%{opacity:0;}40%{opacity:.5;}55%{opacity:.25;}100%{opacity:1;}}

.work-hero-laptop{justify-self:end;width:100%;}
@media (min-width:1200px){.work-hero-laptop{width:125%;}}
.hero-mascot.work-hero-laptop img{--mascot-parallax:0;width:100%;max-width:100%;max-height:none;transform:none;height:auto;aspect-ratio:auto;}
.work-hero-laptop .laptop-screen{background:#1C2A44;box-shadow:0 0 0 1px rgba(248,245,230,.14),0 30px 60px -30px rgba(0,0,0,.7);}
@media (max-width:900px){.work-hero-laptop{justify-self:center;width:100%;max-width:620px;}}
#nicolas{background:var(--navy-2);}

#nicolas .sys-head .h2 span{color:inherit;}
#nicolas .sys-head .h2 > span:not(.ln),#nicolas .sys-head .h2 .ln > span > span{display:block;color:var(--lime);}
#nicolas .sc-laptop .sc-browser{border-color:#1C2A44;box-shadow:0 0 0 1px rgba(248,245,230,.14),0 30px 60px -28px rgba(0,0,0,.8);}
#nicolas .steps li{color:var(--cream-dim);}
#nicolas .steps li b{color:var(--cream);}
#nicolas .ba figcaption{color:var(--cream-mute);}
.work-m-path .sicon{box-shadow:0 0 0 6px var(--navy-2);}

@media (prefers-reduced-motion:reduce){
  .work-m-path::before,.work-m-path li .sicon,.work-m-on .sc-browser,.work-m-on .ba-frame{animation:none !important;transform:none !important;opacity:1 !important;}
}
