/* ============================================================
   TaskLogix360 - MARKETS MARQUEE  (home page)
   Added 2026-08-05, replacing the six-card .ms-grid.

   Sam's brief: duplicate row 1 into row 2, run them opposite ways, and get
   colour and contrast into it. The answer is one content set rendered in two
   values - light pills over inverted solid pills - rather than a third
   decorative element. Hues walk the brand's navy -> teal -> green arc, one
   step per industry, and each is dark enough for white text at 16px/700
   (worst case 4.60:1 on #128654).

   LOOP: .mq-track holds FOUR identical six-pill sets and animates to -50%, so
   the wrap lands on a set boundary. Half the track must be at least one
   viewport wide or the seam shows as a gap.
   ============================================================ */

.markets-mq{background:#fff;padding-bottom:clamp(52px,6vw,84px);overflow:hidden}
.mq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8);
  margin-bottom:clamp(30px,3.6vw,46px)}
.mq-copy{max-width:760px}
.mq-copy .h2{margin:12px 0 0}
.mq-lede{margin:16px 0 0;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--slate);max-width:64ch}
.mq-cta{flex-shrink:0}
@media(max-width:820px){.mq-head{flex-direction:column;align-items:flex-start;gap:var(--sp-5)}}

/* the rail. The mask is what makes pills enter and leave instead of popping
   at the section edge; without it the loop reads as a jump. */
.mq{position:relative;overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mq-b{margin-top:16px}
.mq-track{display:flex;align-items:center;width:max-content;
  animation:mqScroll 64s linear infinite;will-change:transform}
.mq-set{display:flex;align-items:center;gap:16px;padding-right:16px}
.mq-b .mq-track{animation-duration:78s}   /* slower, so the two rows never sync */
.mq-rev{animation-direction:reverse}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* hover/focus pause: the pills are readable content, not decoration */
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}

/* Row 1 carries the hue in its OUTLINE and icon tile, not just the icon. With a
   flat grey border it read as white-on-white next to row 2 and the two rows
   looked like different components rather than one idea in two values. */
.mq-pill{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;
  padding:16px 24px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--h) 26%,#fff),0 4px 14px -10px rgba(8,54,93,.3);
  font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--navy-deep);white-space:nowrap}
.mq-ic{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;flex:none;
  background:color-mix(in srgb,var(--h) 15%,#fff);color:var(--h)}
.mq-ic svg{width:16px;height:16px}
/* color-mix is 2023+; older engines just get the flat navy tile they had before */
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .mq-ic{background:var(--navy-50);color:var(--navy)}
  .mq-pill{box-shadow:inset 0 0 0 1px var(--navy-100),0 4px 14px -10px rgba(8,54,93,.3)}
}

/* row 2: same pill, inverted. Solid hue, white text, white-alpha icon tile. */
.mq-pill-solid{background:var(--h);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 20px -12px rgba(8,54,93,.55)}
.mq-pill-solid .mq-ic{background:rgba(255,255,255,.18);color:#fff}

@media (max-width:680px){
  .mq-pill{padding:12px 20px;font-size:15px}
  .mq-ic{width:28px;height:28px}
}

/* Reduced motion: the marquee stops being a marquee. The readable set wraps
   into a static cluster and the decorative second row is removed outright -
   a frozen duplicate row would just be noise. */
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .mq-set{flex-wrap:wrap;justify-content:center}
  .mq-set[aria-hidden="true"]{display:none}
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq-b{display:none}
}