/* Brand landscape (widgets/brands/brands.js) */
.br { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--tile-bg); }
.br__top { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 12px; color: var(--muted); }
.br__eyebrow { text-transform: uppercase; letter-spacing: .05em; }
.br__arrows { margin-left: auto; display: flex; gap: 4px; }
.br__arrows button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: inherit; cursor: pointer; }
.br__arrows button:hover, .br__arrows button:focus-visible { background: var(--ink); color: var(--bg); box-shadow: none; outline: none; }
.br__box { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; background: var(--bg); }
.br__card { position: absolute; inset: 0; display: grid; grid-template-columns: 38% 1fr; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.br__card.is-in { transform: translateY(40%); opacity: 0; transition: none; }
.br__card.is-out { transform: translateY(-40%); opacity: 0; }
.br__logo { display: grid; place-items: center; padding: 10% 12%; background: #fff; }
.br__logo img { max-width: 100%; max-height: 64%; }
.br__text { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 16px; min-width: 0; font-size: 12.5px; line-height: 1.38; }
.br__text b { font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.br__tag { align-self: flex-start; padding: 1px 8px; border-radius: 100px; background: var(--mark); color: #fff; font-style: normal; font-size: 10.5px; letter-spacing: .03em; }
.br__pos { color: var(--ink); }
.br__note { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .br__card { transition: none; } }