/* One continuous band, kept inside the shared content width. */
.page-access .service-ribbon {
  --ribbon-gap: 54px;
  position: relative;
  min-width: 0;
  margin-top: 32px;
  padding-block: 24px;
  padding-inline: 0;
  border-block: 1px solid rgba(224, 100, 130, .12);
  background: radial-gradient(ellipse 65% 140% at 50% 100%, rgba(133, 19, 43, .1), transparent 85%);
}
.page-access .service-ribbon__viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.page-access .service-ribbon__track {
  display: flex;
  width: max-content;
  min-width: 200%;
  animation: service-ribbon-travel var(--ribbon-duration, 60s) linear infinite;
}
.page-access .service-ribbon__group {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ribbon-gap);
  margin: 0;
  padding: 0 var(--ribbon-gap) 0 0;
  list-style: none;
}
.page-access .service-ribbon__item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: #d1c7ce;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.025em;
  white-space: nowrap;
  transition: color .3s ease;
}
.page-access .service-ribbon__item::after {
  content: "";
  position: absolute;
  right: calc(var(--ribbon-gap) / -2);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(239, 89, 119, .5);
}
.page-access .service-ribbon__item > img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
  filter: invert(1);
  opacity: .76;
  transition: opacity .3s ease;
}
.page-access .service-ribbon.is-paused .service-ribbon__track,
.page-access .service-ribbon:focus-within .service-ribbon__track { animation-play-state: paused; }
.page-access .service-ribbon:focus-visible { outline: 1px solid rgba(255, 108, 139, .5); outline-offset: 5px; }
@keyframes service-ribbon-travel {
  to { transform: translateX(-50%); }
}
@media (hover: hover) and (pointer: fine) {
  .page-access .service-ribbon:hover .service-ribbon__track { animation-play-state: paused; }
  .page-access .service-ribbon__item:hover { color: #f6eff4; }
  .page-access .service-ribbon__item:hover > img { opacity: 1; }
}
@media screen and (max-width: 768px) {
  .page-access .service-ribbon {
    --ribbon-gap: 34px;
    margin-top: 24px;
    padding: 19px 0;
  }
  .page-access .service-ribbon__track { animation-duration: var(--ribbon-duration, 70s); }
  .page-access .service-ribbon__item { gap: 10px; min-height: 38px; font-size: 17px; }
  .page-access .service-ribbon__item > img { width: 23px; height: 23px; }
}
@media screen and (max-width: 420px) {
  .page-access .service-ribbon { --ribbon-gap: 26px; margin-top: 20px; }
  .page-access .service-ribbon__item { font-size: 16px; gap: 9px; }
  .page-access .service-ribbon__item > img { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-access .service-ribbon__viewport { -webkit-mask-image: none; mask-image: none; }
  .page-access .service-ribbon__track { display: block; width: 100%; min-width: 0; animation: none; transform: none; }
  .page-access .service-ribbon__group:first-child {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
  }
  .page-access .service-ribbon__group[aria-hidden="true"] { display: none; }
  .page-access .service-ribbon__item { min-width: 0; font-size: 15px; gap: 9px; }
  .page-access .service-ribbon__item > img { width: 22px; height: 22px; }
  .page-access .service-ribbon__item::after { display: none; }
}
@media screen and (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .page-access .service-ribbon__group:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
}
@media screen and (max-width: 420px) and (prefers-reduced-motion: reduce) {
  .page-access .service-ribbon__item { font-size: 14px; gap: 8px; }
  .page-access .service-ribbon__item > img { width: 20px; height: 20px; }
}