/* Pladinum Marquee — scoped under .plm */
.plm{
  --plm-fade:#ffffff; --plm-fade-w:90px; --plm-icon-gap:12px;
  position:relative; display:flex; align-items:center; width:100%;
}
.plm-viewport{position:relative; overflow:hidden; width:100%}
.plm-track{
  display:flex; align-items:stretch; width:max-content; gap:64px;
  will-change:transform; animation:plm-scroll linear infinite;
}
@keyframes plm-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.plm[data-dir="right"] .plm-track{ animation-direction:reverse }
.plm.is-paused .plm-track{ animation-play-state:paused }
.plm[data-pause="1"]:hover .plm-track{ animation-play-state:paused }

/* item */
.plm-item{ display:flex; gap:var(--plm-icon-gap); white-space:nowrap; flex:0 0 auto }
.plm-item__icon{ display:inline-flex; line-height:1; flex:0 0 auto }
.plm-item__icon svg{ display:block }
.plm-item__txt{ display:flex; flex-direction:column; justify-content:center }
.plm-item__h{ font-weight:700; font-size:18px; line-height:1.25 }
.plm-item__s{ font-weight:400; font-size:15px; line-height:1.3; margin-top:2px }

/* fit mode — items sized so N fit per viewport; text may wrap */
.plm--fit .plm-item{ flex:0 0 auto; white-space:normal }
.plm--fit .plm-item__h{ white-space:normal }
.plm--fit .plm-item__s{ white-space:normal }

/* icon positions */
.plm-item--left-mid{ align-items:center }
.plm-item--left-top{ align-items:flex-start }
.plm-item--left-bottom{ align-items:flex-end }
.plm-item--top-left,
.plm-item--top-center,
.plm-item--top-right{ flex-direction:column }
.plm-item--top-left{ align-items:flex-start }
.plm-item--top-center{ align-items:center }
.plm-item--top-center .plm-item__txt{ align-items:center; text-align:center }
.plm-item--top-right{ align-items:flex-end }
.plm-item--top-right .plm-item__txt{ align-items:flex-end; text-align:right }

/* edge fades — mask to the section bg color */
.plm--fade-l .plm-viewport{ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--plm-fade-w)); mask-image:linear-gradient(to right, transparent 0, #000 var(--plm-fade-w)) }
.plm--fade-r .plm-viewport{ -webkit-mask-image:linear-gradient(to left, transparent 0, #000 var(--plm-fade-w)); mask-image:linear-gradient(to left, transparent 0, #000 var(--plm-fade-w)) }
.plm--fade-l.plm--fade-r .plm-viewport{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--plm-fade-w), #000 calc(100% - var(--plm-fade-w)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--plm-fade-w), #000 calc(100% - var(--plm-fade-w)), transparent 100%);
}

/* arrows */
.plm-arrow{
  flex:0 0 auto; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:0; padding:8px; margin:0; color:#232222; z-index:2;
}
.plm-arrow svg{ width:22px; height:22px; display:block }

@media (prefers-reduced-motion:reduce){
  .plm-track{ animation:none }
}
@media (max-width:560px){
  .plm-item__h{ font-size:16px }
  .plm-item__s{ font-size:13px }
}