/* Equal slots, equal gaps and a protected edge gutter in the brand ribbon. */
.worked-with .logo-ribbon-shell {
  --logo-gutter: 40px;
  background: var(--orange);
  border-block: 1px solid rgba(0, 0, 0, .22);
  padding-inline: var(--logo-gutter);
}
.worked-with .logo-ribbon-shell .logo-ribbon {
  border: 0;
  background: transparent;
  scroll-behavior: auto !important;
  cursor: grab;
  mask-image: linear-gradient(to right, transparent, #000 8px, #000 calc(100% - 8px), transparent);
}
.worked-with .logo-ribbon.is-dragging { cursor: grabbing; }
.worked-with .logo-ribbon:focus-visible {
  outline: 2px solid white;
  outline-offset: -4px;
}
.worked-with .logo-ribbon__track {
  width: max-content;
  max-width: none;
  min-height: 148px;
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 0;
  padding: 30px 40px;
}
.worked-with .logo-ribbon__track.is-looping { padding: 0; gap: 0; }
.worked-with .logo-ribbon__group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 30px 48px 30px 0;
}
.worked-with .client-logo {
  flex: 0 0 176px;
  width: 176px;
}
.worked-with .client-logo img {
  max-width: 176px;
  height: 84px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.worked-with .logo-ribbon__toggle {
  display: block;
  margin-top: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: transparent;
  color: white;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .06em;
  cursor: pointer;
}
.worked-with .logo-ribbon__toggle:hover,
.worked-with .logo-ribbon__toggle:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: white;
}
.worked-with .logo-ribbon__toggle[hidden] { display: none; }
/* This supplied square PNG has large transparent top/bottom margins.
   Fill the logo slot while clipping only that whitespace; keep the full mark. */
.worked-with .client-logo[data-logo-id="mccann-team"] img {
  object-fit: cover;
  object-position: center;
}
@media (max-width: 760px) {
  .worked-with .logo-ribbon-shell { --logo-gutter: 24px; }
  .worked-with .logo-ribbon__track {
    min-height: 128px;
    gap: 32px;
    padding: 28px 24px;
  }
  .worked-with .logo-ribbon__track.is-looping { padding: 0; gap: 0; }
  .worked-with .logo-ribbon__group { gap: 32px; padding: 28px 32px 28px 0; }
  .worked-with .client-logo { flex-basis: 148px; width: 148px; }
  .worked-with .client-logo img { height: 72px; }
}