.brand-marquee-section { padding-block: 1.5rem; background: #101010; border-block: 1px solid #ffffff16; }
.brand-marquee-label { margin: 0 0 1.1rem; color: #aaa; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
.brand-marquee { overflow: hidden; width: 100%; }
.brand-marquee:focus-visible, .brand-marquee-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.brand-marquee-track { display: flex; width: max-content; animation: brand-proof-scroll 80s linear infinite; }
.brand-marquee-group { flex: none; display: flex; align-items: center; gap: clamp(2.5rem,5vw,5rem); margin: 0; padding: 0 clamp(2.5rem,5vw,5rem) 0 0; list-style: none; }
.brand-marquee-group li { width: 150px; height: 65px; display: flex; align-items: center; justify-content: center; }
.brand-marquee-group img { display: block; width: 100%; height: 52px; object-fit: contain; filter: brightness(0) invert(1); }
.brand-marquee-group img[data-mono="light-background"] { filter: grayscale(1) invert(1) contrast(2); mix-blend-mode: screen; }
.brand-marquee-group img[data-mono="nba"] { filter: grayscale(1) contrast(8); mix-blend-mode: screen; }
.brand-marquee-section.is-paused .brand-marquee-track { animation-play-state: paused; }
.brand-marquee-controls { display: flex; justify-content: flex-end; margin-top: .8rem; }
.brand-marquee-toggle { min-height: 44px; padding: .4rem .8rem; color: #bbb; border: 1px solid #ffffff36; border-radius: 999px; background: transparent; font: inherit; font-size: .65rem; cursor: pointer; }
@keyframes brand-proof-scroll { to { transform: translateX(-50%); } }
.brand-showcase { padding-block: clamp(4.5rem,9vw,9rem); background: #f6f5f1; color: #151515; }
.brand-showcase h2 { margin: 0; max-width: 1100px; font-size: clamp(2.8rem,6vw,7rem); line-height: .94; letter-spacing: -.065em; text-transform: uppercase; text-wrap: balance; }
.brand-showcase-intro { max-width: 780px; margin: 2rem 0 1rem; color: #555; font-size: clamp(1rem,1.4vw,1.3rem); line-height: 1.6; }
.brand-relationship-note { color: #777; font-size: .8rem; line-height: 1.6; }
.brand-showcase-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 3.5rem 2.4rem; padding: 0; margin: clamp(3.5rem,6vw,6rem) 0 0; list-style: none; }
.brand-showcase-grid li { min-width: 0; margin: 0; }
.brand-showcase-grid figure { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0; }
.brand-showcase-grid img { display: block; width: 100%; max-width: 170px; height: 82px; object-fit: contain; }
.brand-showcase-grid img.brand-negative-artwork { background: #171717; padding: .7rem; }
.brand-showcase-grid figcaption { color: #777; font-size: .65rem; text-align: center; }
.brand-review-note { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid #ddd; color: #666; font-size: .8rem; line-height: 1.7; }
.brand-review-note summary { cursor: pointer; min-height: 44px; font-weight: 600; }
.brand-pending-list { columns: 3; column-gap: 2rem; padding-left: 1.2rem; }
.brand-pending-list li { break-inside: avoid; margin-bottom: .4rem; }
@media (max-width: 1000px) {
  .brand-showcase-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3rem 1.8rem; }
}
@media (max-width: 600px) {
  .brand-marquee-group { gap: 2rem; padding-right: 2rem; }
  .brand-marquee-group li { width: 120px; height: 58px; }
  .brand-marquee-group img { height: 44px; }
  .brand-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 2rem; }
  .brand-showcase-grid img { height: 72px; }
  .brand-pending-list { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee { overflow: visible; }
  .brand-marquee-track { width: 100%; display: block; animation: none !important; transform: none !important; }
  .brand-marquee-group { width: 100%; flex-wrap: wrap; justify-content: center; padding: 0; gap: 1.5rem; }
  .brand-marquee-group[aria-hidden="true"] { display: none; }
}

/* Pass 2: compact hero strip and two continuous showcase rows. */
.brand-marquee-section { padding-block: .65rem; }
.brand-marquee-label { margin-bottom: .35rem; }
.brand-marquee-group li { height: 46px; }
.brand-marquee-group img { height: 36px; }
.brand-marquee-controls { margin-top: .3rem; }
.brand-marquee-controls .brand-marquee-toggle { padding-block: .15rem; }
.brand-showcase-slider { overflow: hidden; margin: 3rem calc(-1 * var(--brand-gutter, 0px)) 1.5rem; }
.brand-showcase-slider:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.brand-showcase-row { overflow: hidden; padding-block: 1.2rem; }
.brand-showcase-track { display: flex; width: max-content; animation: brand-proof-scroll 100s linear infinite; }
.brand-showcase-row[data-direction="reverse"] .brand-showcase-track { animation-direction: reverse; }
.brand-showcase-group { display:flex; align-items:center; flex:none; gap:clamp(2rem,4vw,4rem); padding:0 clamp(2rem,4vw,4rem) 0 0; margin:0; list-style:none; }
.brand-showcase-group li { flex:none; width:170px; }
.brand-showcase-group figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.brand-showcase-group img { width:170px; height:82px; object-fit:contain; }
.brand-showcase-group img.brand-negative-artwork { background:#171717; padding:.7rem; }
.brand-showcase-group figcaption { font-size:.65rem; color:#666; text-align:center; }
.brand-showcase:hover .brand-showcase-track, .brand-showcase:focus-within .brand-showcase-track, .brand-showcase.is-paused .brand-showcase-track { animation-play-state:paused; }
@media(max-width:600px) { .brand-showcase-group li,.brand-showcase-group img { width:135px; } .brand-showcase-group img { height:70px; } .brand-marquee-group li { height:42px; } .brand-marquee-group img { height:34px; } }
@media(prefers-reduced-motion:reduce) {
 .brand-showcase-track { width:100%; animation:none!important; transform:none!important; }
 .brand-showcase-group { flex-wrap:wrap; justify-content:center; padding:0; width:100%; gap:2rem; }
 .brand-showcase-group[aria-hidden="true"] { display:none; }
}

/* r4: hero is a single link; only its separate pause control stops motion. */
a.brand-marquee { display:block; color:inherit; text-decoration:none; }
.brand-showcase-work-link { display:inline-flex; align-items:center; gap:.75rem; margin-left:1.5rem; padding-block:.75rem; min-height:44px; color:inherit; font-size:.8rem; text-underline-offset:.3em; }
.brand-showcase-work-link:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
@media(max-width:600px) { .brand-showcase-work-link { margin-left:1rem; } }
