/* Platform artwork stays intact while its link card supplies motion and focus. */
.oz-socials,
.footer .oz-socials,
body#top.agency-site.os-studio .oz-socials {
  display: flex;
  flex-wrap: nowrap;
  container-name: oz-socials;
  container-type: inline-size;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 8px;
  scrollbar-width: thin;
  scrollbar-color: #17202a30 transparent;
}
.oz-socials .oz-social-link,
.footer .oz-socials > .oz-social-link,
body#top.agency-site.os-studio .oz-socials > .oz-social-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 44px;
  max-width: none;
  white-space: nowrap;
  margin: 0;
  padding: 5px 10px 5px 5px;
  border: 1px solid #e7e2d8;
  border-radius: 14px;
  background: #fffefa;
  color: #17202a;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 2px 3px #17202a03;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s, background-color .3s;
  animation: oz-social-enter .45s both;
  animation-delay: calc(var(--social-order, 0) * 55ms);
}
.oz-socials .oz-social-link:nth-child(2) { --social-order: 1; }
.oz-socials .oz-social-link:nth-child(3) { --social-order: 2; }
.oz-socials .oz-social-link:nth-child(4) { --social-order: 3; }
.oz-socials .oz-social-link:nth-child(5) { --social-order: 4; }
.oz-socials .oz-social-logo {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 4px;
  border: 1px solid #17202a09;
  border-radius: 9px;
  background: #fff;
}
.oz-socials .oz-social-logo img {
  display: block;
  width: 20px;
  height: 20px;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}
.oz-socials .oz-social-label { min-width: 0; white-space: nowrap; color: inherit; }
.oz-socials .oz-social-arrow {
  display: none;
  flex: 0 0 auto;
  margin-left: 3px;
  color: inherit;
  font-size: 14px;
  opacity: .4;
  transition: opacity .25s, transform .3s cubic-bezier(.22,1,.36,1);
}
.oz-socials .oz-social-link:focus-visible {
  outline: 3px solid #c94b23;
  outline-offset: 4px;
}
@media (hover: hover) {
  .oz-socials .oz-social-link:hover,
  body#top.agency-site.os-studio .oz-socials > .oz-social-link:hover {
    transform: translateY(-3px);
    border-color: #beb8ac;
    background: #fff;
    color: #17202a;
    box-shadow: 0 12px 24px -15px #17202a60;
  }
  .oz-socials .oz-social-link:hover .oz-social-arrow { opacity: 1; transform: translate(2px,-2px); }
}
.oz-socials .oz-social-link:active { transform: translateY(0) scale(.98); }
html:is([data-theme=dark],[data-oz-theme=dark]) .oz-socials .oz-social-link,
html:is([data-theme=dark],[data-oz-theme=dark]) body#top.agency-site.os-studio .oz-socials > .oz-social-link {
  background: #182639;
  color: #f5f0e4;
  border-color: #304056;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme=light]):not([data-oz-theme=light]) .oz-socials .oz-social-link {
    background: #182639;
    color: #f5f0e4;
    border-color: #304056;
  }
}
/* Fit the component's available width, including narrow desktop footer columns. */
@container oz-socials (max-width: 580px) {
  .oz-socials .oz-social-label { display: none; }
  .oz-socials .oz-social-link,
  .footer .oz-socials > .oz-social-link,
  body#top.agency-site.os-studio .oz-socials > .oz-social-link {
    flex: 0 0 44px;
    justify-content: center;
    width: 44px;
    padding: 6px;
  }
}
@container oz-socials (max-width: 280px) {
  .oz-socials .oz-social-link,
  .footer .oz-socials > .oz-social-link,
  body#top.agency-site.os-studio .oz-socials > .oz-social-link {
    flex: 0 1 36px;
    min-width: 32px;
    width: 36px;
    padding: 1px;
    border-radius: 12px;
  }
  .oz-socials .oz-social-logo { flex-basis: 28px; width: 28px; height: 28px; }
}
@keyframes oz-social-enter {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .oz-socials .oz-social-link, .oz-socials .oz-social-arrow,
  body#top.agency-site.os-studio .oz-socials > .oz-social-link {
    animation: none;
    transition: none;
    transform: none;
  }
}

.oz-socials::-webkit-scrollbar { height: 4px; }
.oz-socials::-webkit-scrollbar-track { background: transparent; }
.oz-socials::-webkit-scrollbar-thumb { background: #17202a30; border-radius: 99px; }
html:is([data-theme=dark],[data-oz-theme=dark]) .oz-socials { scrollbar-color: #f5f0e450 transparent; }
html:is([data-theme=dark],[data-oz-theme=dark]) .oz-socials::-webkit-scrollbar-thumb { background: #f5f0e450; }
