#friends > .stage {
  display: grid;
  grid-template-columns: 32% minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 5%;
  height: 100svh;
  min-height: 0;
  padding: max(100px, 14svh) var(--pad) 80px;
}
#friends .friends-intro { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
#friends .eyebrow { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .045em; margin: 0 0 24px; }
#friends h2 { font-family: Unbounded, sans-serif; font-size: clamp(52px, 5.6vw, 96px); font-weight: 600; letter-spacing: -.068em; line-height: 1.08; margin: 0; }
#friends h2 span { color: var(--blue); }
#friends .links-sculpture { grid-column: 1; grid-row: 2 / 4; width: 118%; height: 310px; justify-self: center; align-self: center; position: relative; pointer-events: none; }
#friends #links-canvas { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
#friends .links-fallback { position: absolute; inset: 0; display: grid; place-content: center; color: var(--blue); font-family: Unbounded, sans-serif; font-size: 180px; letter-spacing: -90px; transform: rotate(-25deg); padding-right: 80px; }
#friends .has-webgl .links-fallback { display: none; }
body.has-3d:not(.motion-off) #friends :is(#links-canvas,.links-fallback) { visibility:hidden; }
#friends .logo-field { grid-column: 2; grid-row: 1 / 3; min-width: 0; max-width: 920px; width: 100%; position: relative; align-self: center; padding: 28px 0 48px; }
#friends .brands { display: grid; gap: 34px; min-width: 0; }
#friends .logo-group { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 25px 36px; }
#friends .logo-track > .logo-group[aria-hidden] { display: none; }
#friends .brand { width: 190px; min-height: 100px; flex: none; display: flex; align-items: center; justify-content: center; position: relative; }
#friends .brand img { display: block; max-width: 100%; width: 190px; height: 59px; object-fit: contain; filter: brightness(0); opacity: .87; }
#friends .brand-barsuk img { width: 181px; }
#friends .brand-rbd img { width: 162px; }
#friends .brand-smartofood img { width: 200px; }
#friends .brand-fundamental img { width: 190px; }
#friends .brand-kinetika img { width: 180px; }
#friends .brand-shashlik img { filter: grayscale(1); height: 90px; width: 86px; }
#friends .brand svg { display: block; max-width: 100%; width: 185px; height: 100px; filter: grayscale(1) contrast(1.4); opacity: .87; }
#friends .brand-alpha svg { width: 104px; height: 104px; }
#friends .brand-autobio svg { width: 130px; height: 110px; }
#friends .brand-tsk svg { width: 100px; height: 100px; filter: grayscale(1); }
#friends .brand-sruby svg { width: 185px; height: 68px; }
#friends .brand-qtix svg { clip-path: polygon(6% 0, 100% 0, 100% 100%, 6% 100%, 0 75%, 0 25%); }
#friends.friends-motion-ready .brands { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
#friends.friends-motion-ready .logo-lane { overflow: hidden; }
#friends.friends-motion-ready .logo-track { display: flex; width: max-content; animation: friends-logo-ribbon var(--duration, 60s) linear infinite; will-change: transform; }
#friends.friends-motion-ready .logo-group { flex-wrap: nowrap; justify-content: flex-start; gap: 52px; padding-right: 52px; flex: none; }
#friends.friends-motion-ready .logo-track > .logo-group[aria-hidden] { display: flex; }
#friends.friends-motion-ready .logo-lane:nth-child(2) .logo-track { animation-direction: reverse; animation-delay: -12s; }
#friends.friends-motion-ready .logo-lane:nth-child(3) .logo-track { animation-delay: -20s; }
#friends.friends-motion-ready .logo-field:is(.is-paused, .is-away) .logo-track { animation-play-state: paused; }
@media (hover: hover) {
  #friends.friends-motion-ready .brands:hover .logo-track { animation-play-state: paused; }
}
@keyframes friends-logo-ribbon { to { transform: translateX(-50%); } }
#friends .motion-toggle { position: absolute; right: 0; bottom: 0; background: transparent; border: 0; padding: 10px; cursor: pointer; color: #6d7380; width: 40px; height: 40px; }
#friends .motion-toggle:hover { color: var(--blue); }
#friends .motion-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#friends .motion-toggle .play-icon { display: none; }
#friends .motion-toggle[aria-pressed=true] .play-icon { display: block; }
#friends .motion-toggle[aria-pressed=true] .pause-icon { display: none; }
#friends .specialists { grid-column: 2; grid-row: 3; align-self: end; font-size: 19px; line-height: 1.5; margin: 24px 0 0; display: flex; gap: 18px; align-items: center; }
#friends .specialists > span { font-size: 29px; color: var(--blue); font-weight: 400; }
@media (min-width: 1600px) {
  #friends .links-sculpture { height: clamp(245px, 32svh, 355px); }
  #friends .brands { gap: clamp(24px, 4svh, 46px); }
}
@media (max-width: 1100px) {
  #friends > .stage { grid-template-columns: 33% minmax(0, 1fr); column-gap: 4%; }
  #friends .links-sculpture { height: 260px; }
  #friends h2 { font-size: 56px; }
  #friends .brand { width: 175px; }
  #friends .brand img { max-width: 175px; }
  #friends.friends-motion-ready .logo-group { gap: 40px; padding-right: 40px; }
}
@media (min-width: 801px) and (max-height: 700px) {
  #friends > .stage { padding-top: 100px; }
  #friends .brands { gap: 18px; }
  #friends .logo-field { padding: 12px 0 32px; }
  #friends .brand { min-height: 90px; }
  #friends .brand svg { height: 82px; }
  #friends .brand img { height: 52px; }
  #friends .brand-shashlik img { height: 74px; }
  #friends .links-sculpture { height: 245px; }
  #friends .specialists { margin-top: 14px; font-size: 17px; }
}
@media (max-width: 800px), (max-width: 1100px) and (max-height: 500px) {
  #friends > .stage { grid-template-columns: minmax(0, 1fr) 145px; grid-template-rows: auto auto auto; column-gap: 0; height: auto; min-height: 0; padding: 96px var(--pad) 32px; overflow: visible; }
  #friends .eyebrow { font-size: 11px; margin-bottom: 20px; }
  #friends .friends-intro { grid-column: 1 / -1; grid-row: 1; }
  #friends h2 { font-size: clamp(48px, 12vw, 72px); }
  #friends .links-sculpture { grid-column: 2; grid-row: 1; align-self: end; width: 175px; height: 145px; justify-self: end; margin: 0 -18px -9px 0; z-index: 2; }
  #friends .logo-field { grid-column: 1 / -1; grid-row: 2; padding: 12px 0 36px; margin-top: 20px; }
  #friends .brands { gap: 14px; }
  #friends .brand { width: 160px; min-height: 86px; }
  #friends .brand img { width: 160px; height: 48px; max-width: 160px; }
  #friends .brand-barsuk img { width: 145px; }
  #friends .brand-rbd img { width: 140px; }
  #friends .brand-shashlik img { height: 76px; width: 73px; }
  #friends .brand svg { max-width: 160px; height: 84px; }
  #friends .brand-alpha svg { width: 87px; height: 88px; }
  #friends .brand-autobio svg { width: 110px; height: 88px; }
  #friends .brand-tsk svg { width: 84px; height: 84px; }
  #friends .brand-sruby svg { width: 160px; height: 58px; }
  #friends.friends-motion-ready .logo-group { gap: 35px; padding-right: 35px; }
  #friends .specialists { grid-column: 1 / -1; grid-row: 3; font-size: 16px; margin-top: 20px; gap: 12px; }
  #friends .specialists > span { font-size: 25px; }
}
@media (max-width: 360px) {
  #friends .links-sculpture { width: 140px; height: 125px; margin-right: -9px; margin-bottom: -10px; top: -14px; }
  #friends .brand { width: 144px; }
  #friends .brand img { max-width: 144px; }
}
body.motion-off #friends, body:not(.motion-ready) #friends { height: auto; }
body.motion-off #friends > .stage, body:not(.motion-ready) #friends > .stage { height: auto; min-height: 0; grid-template-rows: auto auto auto; overflow: visible; }
body.motion-off #friends .brands { overflow: visible; mask-image: none; }
body.motion-off #friends .logo-lane { overflow: visible; }
body.motion-off #friends .logo-track { display: block; width: auto; animation: none; transform: none; will-change: auto; }
body.motion-off #friends .logo-group { flex-wrap: wrap; justify-content: center; padding: 0; gap: 25px 20px; }
body.motion-off #friends .logo-track > .logo-group[aria-hidden] { display: none; }
body.motion-off #friends .motion-toggle { display: none; }
body.motion-off #friends .logo-field { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  #friends { height: auto; }
  #friends > .stage { height: auto; min-height: 0; grid-template-rows: auto auto auto; overflow: visible; }
  #friends.friends-motion-ready .brands { overflow: visible; mask-image: none; }
  #friends.friends-motion-ready .logo-lane { overflow: visible; }
  #friends.friends-motion-ready .logo-track { display: block; width: auto; animation: none; transform: none; will-change: auto; }
  #friends.friends-motion-ready .logo-group { flex-wrap: wrap; justify-content: center; padding: 0; gap: 25px 20px; }
  #friends.friends-motion-ready .logo-track > .logo-group[aria-hidden] { display: none; }
  #friends .motion-toggle { display: none; }
  #friends .logo-field { padding-bottom: 0; }
}
@media (max-width: 800px), (max-width: 1100px) and (max-height: 500px) {
  body.motion-off #friends .brands { display: block; }
  body.motion-off #friends .logo-lane + .logo-lane { margin-top: 22px; }
  body.motion-off #friends .logo-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  body.motion-off #friends .brand { width: 100%; min-width: 0; }
  body.motion-off #friends .brand img, body.motion-off #friends .brand svg { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 800px), (prefers-reduced-motion: reduce) and (max-width: 1100px) and (max-height: 500px) {
  #friends .brands { display: block; }
  #friends .logo-lane + .logo-lane { margin-top: 22px; }
  #friends.friends-motion-ready .logo-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  #friends .brand { width: 100%; min-width: 0; }
  #friends .brand img, #friends .brand svg { max-width: 100%; }
}
@media (max-width: 600px) {
  body.spatial-layout.composition-v9 .story-nav { padding-inline: 4vw; gap: 4px; }
  body.spatial-layout.composition-v9 .story-nav a { font-size: 10px; }
}