.brands-hero { min-height: 420px; display: grid; grid-template-columns: 1fr .72fr; gap: 80px; align-items: end; padding-top: 92px; padding-bottom: 70px; border-bottom: 1px solid var(--line); }
.brands-hero h1 { margin-top: 16px; font-size: clamp(72px,9vw,132px); line-height: .88; }
.brands-hero h1 em { color: var(--blue-light); font-style: normal; }
.brands-hero p { max-width: 570px; margin: 0 0 8px; color: #919198; font: 12px/1.8 var(--mono); }
.brands-directory { padding-top: 72px; padding-bottom: 100px; }
.brands-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.brands-heading h2 { margin-top: 10px; font-size: clamp(45px,6vw,82px); }
.brand-search { width: min(330px,100%); display: grid; gap: 8px; color: #73737a; font: 8px var(--mono); text-transform: uppercase; }
.brand-search input { height: 48px; border: 1px solid #343439; border-radius: 7px; background: #151517; color: white; outline: 0; padding: 0 13px; }
.brand-search input:focus { border-color: var(--blue); }
.brand-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.brand-card { position: relative; min-height: 170px; display: grid; align-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #111113; }
.brand-card:hover { border-color: var(--blue-light); background: rgba(40,104,232,.07); transform: translateY(-2px); }
.brand-card > span { color: #5d5d64; font: 8px var(--mono); }
.brand-card strong { align-self: end; font: 400 clamp(28px,3vw,42px)/1 var(--display); text-transform: uppercase; }
.brand-card small { color: #85858c; font: 8px var(--mono); text-transform: uppercase; }
.brand-card b { position: absolute; right: 18px; top: 16px; color: var(--blue-light); font-weight: 400; }
.brands-empty { padding: 55px; border: 1px solid var(--line); border-radius: 14px; background: #111113; text-align: center; }
.brands-empty strong { font: 400 36px var(--display); text-transform: uppercase; }
.brands-empty p { color: #85858c; font-size: 12px; }
.brands-empty .btn { display: inline-flex; margin-top: 15px; }
.brands-note { max-width: 850px; margin: 32px 0 0; color: #66666d; font: 9px/1.7 var(--mono); text-transform: uppercase; }
@media(max-width:950px){.brands-hero{grid-template-columns:1fr;gap:30px}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:650px){.brands-hero{min-height:auto;padding-top:60px}.brands-hero h1{font-size:70px}.brands-heading{align-items:flex-start;flex-direction:column}.brand-search{width:100%}.brand-grid{grid-template-columns:1fr 1fr}.brand-card{min-height:135px;padding:15px}.brand-card strong{font-size:27px}}
@media(max-width:420px){.brand-grid{grid-template-columns:1fr}.brand-card{min-height:115px}}

/* v0.20.2 — keep long brand names readable */
.brand-card strong { min-width: 0; overflow-wrap: anywhere; word-break: normal; line-height: 1.08; }