.brand-references{padding-top:84px}
.brand-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px}
.brand-heading h3{font-size:clamp(28px,2.5vw,38px);font-weight:500;letter-spacing:-.045em;line-height:1.4;margin-top:15px}
.brand-heading-copy>p{font-size:16px;line-height:1.8;color:#666}
.brand-heading-copy .brand-channels{font-size:14px;margin-top:15px;color:#444}
/* Original logo files are displayed on white. No recoloring, distortion or decoration. */
.brand-logo-stage{background:#fff;margin:38px 0 30px;padding:40px 0;overflow:hidden}
.brand-logo-track{width:100%}
.brand-logo-group{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0;margin:0}
.brand-logo{display:flex;align-items:center;justify-content:center;min-width:0;height:148px;overflow:hidden}
.brand-logo img{width:190px;max-width:78%;height:auto;object-fit:contain;flex-shrink:0;user-select:none}
.brand-logo--seine img{width:285px;max-width:145%}
.brand-logo--face-factory img{width:235px;max-width:84%}
.brand-logo--roobliss img{width:205px}
.brand-logo--nunies img{width:220px;max-width:88%}
.brand-logo--arwe img{width:200px}
.brand-logo-duplicate{display:none}
.brand-logo-stage.is-animated .brand-logo-track{display:flex;width:max-content;animation:brand-travel 46s linear infinite}
.brand-logo-stage.is-animated .brand-logo-group{display:flex;flex-shrink:0}
.brand-logo-stage.is-animated .brand-logo{flex:0 0 clamp(250px,23vw,330px);width:clamp(250px,23vw,330px)}
.brand-logo-stage.is-paused .brand-logo-track{animation-play-state:paused}
.brand-reference-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;min-height:28px}
.brand-reference-heading>.edition{color:#666;font-size:12px;letter-spacing:.055em}
.brand-motion-pause{display:inline-flex;align-items:center;gap:9px;border:0;background:none;color:#555;font:inherit;font-size:14px;padding:8px 0;cursor:pointer}
.brand-motion-pause[hidden]{display:none}
.brand-motion-pause i{display:block;width:8px;height:10px;border-inline:2px solid currentColor}
.brand-motion-pause[aria-pressed=true] i{width:0;height:0;border:5px solid transparent;border-right:0;border-left:7px solid currentColor}
.brand-motion-pause:focus-visible{outline:2px solid #284cef;outline-offset:5px}
.brand-reference-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 24px}
.brand-reference{min-width:0}
.brand-reference figure,.reference-photo{display:block;position:relative;width:100%;max-width:200px;aspect-ratio:var(--image-ratio,1);overflow:hidden;border-radius:20px}
.brand-reference>div{margin-top:12px}
.brand-reference img{position:absolute;left:var(--image-left,0%);top:var(--image-top,0%);width:var(--image-width,100%);max-width:none;height:auto;object-fit:contain}
.brand-reference h4{font-size:14px;font-weight:500;line-height:1.5;margin:0 0 5px;word-break:keep-all}
.brand-reference p{font-size:14px;color:#666;line-height:1.55}
@keyframes brand-travel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover){.brand-logo-stage.is-animated:hover .brand-logo-track{animation-play-state:paused}}
@media(max-width:1100px){.brand-reference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}.brand-logo-group{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:950px){.brand-references{padding-top:60px}.brand-heading{display:block}.brand-heading-copy{margin-top:22px}}
@media(max-width:620px){
 .brand-references{padding-top:50px}.brand-heading h3{font-size:28px}.brand-heading-copy>p{font-size:16px}.brand-heading-copy .brand-channels{font-size:14px}
 .brand-logo-stage{margin:28px 0 22px;padding:25px 0}.brand-logo-group{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-logo{height:104px}.brand-logo--seine img{width:225px}
 .brand-logo-stage.is-animated .brand-logo{flex-basis:230px;width:230px}.brand-logo-stage.is-animated .brand-logo-track{animation-duration:44s}
 .brand-reference-heading{gap:12px;align-items:flex-start}.brand-reference-heading>.edition{max-width:110px;line-height:1.6;padding-top:7px}.brand-motion-pause{font-size:14px}
 .brand-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.brand-reference figure{max-width:100%}.brand-reference>div{margin-top:10px}.brand-reference h4{font-size:14px}.brand-reference p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .brand-logo-stage.is-animated .brand-logo-track{display:block;width:100%;animation:none;transform:none}
 .brand-logo-stage.is-animated .brand-logo-group{display:grid}
 .brand-logo-stage.is-animated .brand-logo{width:auto}
 .brand-logo-stage .brand-logo-duplicate{display:none!important}
 .brand-motion-pause{display:none}
}

/* One source article per photo; the fan adapts as photos are added. */
.reference-deck-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:24px}
.reference-selection{font-size:15px;line-height:1.65;color:#333;min-height:25px}
.reference-hint{font-size:14px;line-height:1.6;color:#666;margin-top:4px}
.reference-deck-toggle{font:inherit;font-size:14px;line-height:1.5;white-space:nowrap;cursor:pointer;border:0;border-bottom:1px solid #999;padding:6px 0;background:none;color:#333}
.reference-deck-toggle[hidden],.reference-hint[hidden]{display:none}
.reference-deck-toggle:focus-visible{outline:2px solid #284cef;outline-offset:6px}
.reference-deck.is-ready .reference-viewport{overflow:hidden;scrollbar-width:thin;scrollbar-color:#aaa transparent;overscroll-behavior-x:contain;padding-bottom:12px}
.reference-deck.is-ready.is-open .reference-viewport{overflow-x:auto}
.reference-deck.is-ready .brand-reference-grid{position:relative;display:block;width:100%;height:calc(var(--card-size) + 108px);gap:0;isolation:isolate}
.reference-deck.is-ready.is-open .brand-reference-grid{width:var(--canvas-open-width)}
.reference-deck.is-ready .brand-reference{position:absolute;left:0;top:42px;width:var(--card-size);z-index:var(--layer);transform:translate3d(var(--closed-x),var(--closed-y),0) rotate(var(--closed-angle));transform-origin:50% 70%;transition:transform .68s cubic-bezier(.22,.72,.16,1);transition-delay:0ms}
.reference-deck.is-ready .brand-reference>div{display:none}
.reference-card{display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:20px;box-shadow:0 10px 24px -14px #0006;text-align:left;-webkit-tap-highlight-color:transparent}
.reference-card:focus-visible{outline:2px solid #284cef;outline-offset:5px}
.reference-card .reference-photo{width:100%;max-width:none;border-radius:inherit}
.reference-card img{pointer-events:none;user-select:none}
.reference-deck.is-open .brand-reference{transform:translate3d(var(--open-x),var(--open-y),0) rotate(var(--open-angle));transition-delay:var(--fan-delay)}
.reference-deck.is-open .brand-reference.is-selected{z-index:100;transform:translate3d(var(--open-x),calc(var(--open-y) - 20px),0) rotate(0deg) scale(1.055);transition-delay:0ms}
.reference-deck.is-ready .reference-deck-footer{margin-top:0}
.motion-disabled .reference-deck .brand-reference{transition:none!important}
@media(max-width:620px){.reference-deck-footer{gap:16px}.reference-selection{font-size:14px}.reference-hint{font-size:13px}.reference-card,.brand-reference figure{border-radius:18px}.reference-deck.is-open .brand-reference.is-selected{transform:translate3d(var(--open-x),calc(var(--open-y) - 12px),0) rotate(0deg) scale(1.025)}}
@media(prefers-reduced-motion:reduce){.reference-deck .brand-reference{transition:none!important}}
