/* Services page: "the sectors we serve", a heading and under it a full-width dark strip, below the six steps. The names run in a slow endless loop
   (the list is written twice and the row slides by half its width), the edges fade out, and the loop pauses under the pointer. */
.sec{padding:40px 0 56px}
.sec h2{font-size:var(--fs-36);font-weight:var(--fw-bold);line-height:1.25;color:var(--title)}
.sec-band{margin:28px calc(-1 * var(--gutter)) 0;padding:36px 0;background:var(--hero-base);border-block:1px solid var(--line)}
.sec-mq{overflow:hidden;direction:ltr;-webkit-mask-image:var(--mask-fade-x);mask-image:var(--mask-fade-x)}
.sec-row{display:flex;width:max-content;animation:sec-mq 60s linear infinite reverse}   /* moves right, so names come in from the left in reading order */
.sec-row ul{list-style:none;margin:0;padding:0;display:flex;flex:none}
.sec-row li{direction:rtl;flex:none;display:flex;align-items:center;gap:28px;padding-inline-end:28px;font-size:var(--fs-19);font-weight:var(--fw-bold);color:var(--grey);white-space:nowrap;
  transition:color .3s var(--ease-out)}
.sec-row li::after{content:"";width:7px;height:7px;border-radius:var(--r-round);background:var(--red)}
@keyframes sec-mq{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){.sec-mq:hover .sec-row{animation-play-state:paused}.sec-row li:hover{color:var(--head)}}
@media (max-width:760px){
  .sec{padding:24px 0 40px}
  .sec h2{font-size:var(--fs-26)}
  .sec-band{margin:20px calc(-1 * var(--gutter-m)) 0;padding:28px 0}
  .sec-row{animation-duration:45s}
  .sec-row li{font-size:var(--fs-16);gap:20px;padding-inline-end:20px}
}
@media (prefers-reduced-motion:reduce){
  .sec-row{animation:none;width:auto}.sec-row ul[aria-hidden]{display:none}
  .sec-mq{direction:rtl;-webkit-mask-image:none;mask-image:none;padding:0 var(--gutter)}
  .sec-row ul{flex-wrap:wrap;row-gap:12px}
}