/* How it works (section#recognition). Only what the original markup can't express after the swap. */

/* The Forbes shield column (112x140, mobile 102.4x128) now holds one chrome sprite icon (the header dropdown's
   .metallic-icon), square and vertically centred, so the card keeps its 354x180 / 328x168 composition. */
.section-recognition .step-icon .metallic-icon { width: 112px; height: 112px; margin-block: auto; }
.section-recognition .mobile-view .step-icon .metallic-icon { width: 102.4px; height: 102.4px; }

/* Steps: a slow continuous marquee, right to left, no controls. steps.js duplicates the cards once so the
   loop is seamless (the track slides exactly half its width, then restarts). */
.section-recognition .recognition-track { overflow: hidden; scroll-snap-type: none; scrollbar-width: none; padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.section-recognition .recognition-track::-webkit-scrollbar { display: none; }
.section-recognition .mc-marquee { display: flex; gap: inherit; width: max-content; flex: 0 0 auto;
  animation: mc-marquee var(--mc-dur, 36s) linear infinite; }
.section-recognition .mc-marquee > * { flex: 0 0 auto; scroll-snap-align: none; }
.section-recognition .recognition-track:hover .mc-marquee { animation-play-state: paused; }
.section-recognition .carousel-controls { display: none !important; }
@keyframes mc-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--mc-gap, 0px) / 2)); } }
@media (prefers-reduced-motion: reduce) { .section-recognition .mc-marquee { animation-duration: 120s; } }