/* Jenelt Workbench logo: a "J" of six blocks, pure CSS (no SVG, so it stays sharp at any zoom). Scales with --s or with its container height.
   On hover, focus or touch of the parent .brand the lime block runs from the top bar of the J, down the stem and along the foot, to the tail. */
.jm{--s:6rem;--ink:#121110;--acc:#b5532c;--u:114.29%;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);aspect-ratio:1}
/* Each black block is a window: the orange block is drawn inside it and clipped to it, so it appears only through the windows as it travels. */
.jm .t{position:absolute;display:block;width:29.17%;height:29.17%;border-radius:17%;background:var(--ink);overflow:hidden;--ox:0%;--oy:0%}
.jm .t::after{content:"";position:absolute;left:var(--ox);top:var(--oy);width:100%;height:100%;background:var(--acc)}
.jm .t0{left:35.42%;top:2.08%;--ox:calc(var(--u)*-1);--oy:var(--u)}
.jm .t1{left:68.75%;top:2.08%;--ox:calc(var(--u)*-2);--oy:var(--u)}
.jm .t2{left:68.75%;top:35.42%;--ox:calc(var(--u)*-2);--oy:0%}
.jm .t3{left:68.75%;top:68.75%;--ox:calc(var(--u)*-2);--oy:calc(var(--u)*-1)}
.jm .t4{left:35.42%;top:68.75%;--ox:calc(var(--u)*-1);--oy:calc(var(--u)*-1)}
.jm .t5{left:2.08%;top:68.75%;--ox:0%;--oy:calc(var(--u)*-1)}
.jm .t6{left:2.08%;top:35.42%;--ox:0%;--oy:0%}
/* the run is started by script and always plays to the end, even if the pointer leaves; .jm:hover is the no-script fallback */
.jm.go .t::after{animation:jrun 1.5s linear 1 both}
html:not(.js) .jm:hover .t::after{animation:jrun 1.5s linear 1 both}
@keyframes jrun{
  0%{transform:translate(var(--u),calc(var(--u)*-1))}
  16.667%{transform:translate(calc(var(--u)*2),calc(var(--u)*-1))}
  33.333%{transform:translate(calc(var(--u)*2),0)}
  50%{transform:translate(calc(var(--u)*2),var(--u))}
  66.667%{transform:translate(var(--u),var(--u))}
  83.333%{transform:translate(0,var(--u))}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){.jm.go .t::after,html:not(.js) .jm:hover .t::after{animation:none}}
/* CSS arrow (replaces SVG arrows): font-size sets its size */
.arw{position:relative;display:inline-block;width:1.7em;height:1.7em;flex:none}
.arw::before{content:"";position:absolute;left:0;top:50%;width:100%;height:.12em;background:currentColor;transform:translateY(-50%);border-radius:.1em}
.arw::after{content:"";position:absolute;right:.04em;top:50%;width:.5em;height:.5em;border-top:.12em solid currentColor;border-right:.12em solid currentColor;transform:translateY(-50%) rotate(45deg)}