/* Velar Bureau: the brands strip between the first screen and "About" (index.html #brands, js/brx.js).
   One ruled row: a caption cell, then the names printed in dot matter. Air above and below so it does not stick to its neighbours. */
.brx { position: relative; z-index: 2; padding: clamp(40px, min(5vw, 72px), 80px) var(--gx); background: var(--steel); }
.brx__row { display: flex; align-items: stretch; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brx__k { flex: none; display: flex; align-items: center; width: clamp(10rem, 15vw, 14rem); margin: 0; padding-right: 24px; font-family: var(--f); font-size: .95rem; line-height: 1.3; color: var(--mist); }
.brx__l { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.brx__l li { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: clamp(26px, min(2.6vw, 37.44px), 40px) clamp(14px, min(1.8vw, 25.92px), 28px); border-left: 1px solid var(--line);
  font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: 1.2rem; line-height: 1; white-space: nowrap; color: var(--graphite); transition: color .3s, background-color .3s; }
.brx__l li:hover { color: var(--signal); background: var(--paper); }
.brx__dg { display: block; height: clamp(18px, min(1.95vw, 28.08px), 28px); width: auto; overflow: visible; }
.brx__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brx__l.is-dots circle { opacity: 0; }
.brx__l.is-dots.is-in circle { opacity: 1; transition: opacity .01s linear calc(var(--n) * 140ms + var(--x) * 9ms); }
@media (max-width: 900px) {
  .brx { padding-block: 44px 40px; }
  .brx__row { display: block; border-top: 0; }
  .brx__k { width: auto; padding: 0 0 14px; }
  .brx__l { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  .brx__l li { justify-content: flex-start; padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .brx__l li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .brx__l li:nth-child(4) { order: 9; grid-column: 1 / -1; border-bottom: 0; padding-left: 0; border-left: 0; }
  .brx__l li:nth-child(5) { padding-left: 18px; border-left: 1px solid var(--line); }
  .brx__dg { height: 17.5px; }
}