.brands-page{--brand-ink:#102746;--brand-blue:#124d8c;--brand-accent:#fc753b;--brand-border:#dce5ef;--brand-muted:#5b6b7f;color:var(--brand-ink);padding-bottom:4rem}
.brands-page--warehouse{--brand-blue:#134b82;--brand-accent:#ff8037}
.brands-page [hidden]{display:none!important}
.brands-breadcrumb{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;font-size:.88rem;color:#607086;margin:1.25rem 0 1.1rem}.brands-breadcrumb a{color:var(--brand-blue);text-decoration:none}.brands-breadcrumb a:hover{text-decoration:underline}
.brands-hero{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:240px;overflow:hidden;padding:2.4rem 3rem;border-radius:24px;background:radial-gradient(circle at 80% 20%,#285f99 0,transparent 35%),linear-gradient(115deg,#0d284a,#123d6e 74%,#174f87);color:#fff;box-shadow:0 20px 42px rgba(17,49,85,.12)}
.brands-hero:after{content:"";position:absolute;width:260px;height:260px;right:10%;bottom:-185px;border-radius:50%;border:48px solid rgba(255,255,255,.06)}.brands-hero__copy{position:relative;z-index:1}.brands-eyebrow,.brands-kicker{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.17em}.brands-eyebrow{color:#ffae7d}.brands-hero h1{color:#fff;font-size:clamp(2rem,4vw,3.45rem);letter-spacing:-.045em;line-height:1.1;margin:.7rem 0}.brands-hero p{color:#d9e8f8;font-size:1.08rem;margin:0 0 1.25rem}.brands-hero__count{display:inline-flex;gap:.35rem;align-items:center;border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:.48rem .9rem;color:#e5effa;font-size:.86rem}.brands-hero__count strong{color:#fff;font-size:1.02rem}.brands-hero__symbol{font-size:clamp(5rem,12vw,10rem);font-weight:900;letter-spacing:-.13em;opacity:.16;line-height:1;white-space:nowrap;margin-right:2rem}.brands-hero__symbol span{color:var(--brand-accent)}
.brands-page #content{min-width:0}.brands-toolbar{margin:2rem 0 1rem}.brands-toolbar label{display:block;font-size:.91rem;font-weight:700;margin-bottom:.55rem}.brands-search-wrap{position:relative;max-width:680px}.brands-search-wrap svg{position:absolute;width:21px;height:21px;left:1.1rem;top:50%;transform:translateY(-50%);fill:none;stroke:#6883a0;stroke-width:1.8;pointer-events:none}.brands-search-wrap input{width:100%;height:54px;padding:.7rem 3.3rem .7rem 3.2rem;border:1px solid #cbd9e9;border-radius:13px;background:#fff;color:var(--brand-ink);font-size:1rem;outline:0;transition:border-color .2s,box-shadow .2s}.brands-search-wrap input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 4px rgba(24,93,167,.12)}.brands-search-wrap button{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px;background:#eef3f9;color:#455d77;font-size:1.4rem;line-height:1}.brands-search-wrap button:hover{background:#dbe8f5}
.brands-index{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 2.5rem;padding:.75rem;border:1px solid var(--brand-border);border-radius:14px;background:#f8fbfe}.brands-index__letter{min-width:38px;padding:.4rem .62rem;text-align:center;border-radius:8px;font-size:.87rem;font-weight:700;text-decoration:none;color:var(--brand-blue);transition:background .18s,color .18s}.brands-index__letter:hover,.brands-index__letter:focus{background:var(--brand-blue);color:#fff}
.brands-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:0 0 1.2rem}.brands-kicker{color:var(--brand-accent);margin-bottom:.4rem}.brands-section-head h2{font-size:clamp(1.45rem,2.5vw,2rem);font-weight:800;letter-spacing:-.03em;margin:0}.brands-featured{margin-bottom:3rem}.brands-featured__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.brands-featured__card{position:relative;display:flex;flex-direction:column;min-height:162px;overflow:hidden;padding:1.25rem;border:1px solid #d6e2ee;border-radius:16px;background:linear-gradient(135deg,#fff,#f4f8fc);text-decoration:none;color:var(--brand-ink);box-shadow:0 5px 16px rgba(17,49,85,.04);transition:transform .18s,box-shadow .18s,border-color .18s}.brands-featured__card:hover{transform:translateY(-3px);border-color:#8fb7df;box-shadow:0 12px 28px rgba(17,49,85,.12);color:var(--brand-ink)}.brands-featured__mark{display:flex;align-items:center;justify-content:center;width:84px;height:56px;margin-bottom:auto;border-radius:12px;background:#e8f0fa;color:var(--brand-blue);font-weight:900;font-size:1.5rem;letter-spacing:-.07em}.brands-featured__mark img{max-width:72px;max-height:48px;object-fit:contain}.brands-featured__name{font-size:1.12rem;font-weight:800;margin-top:.9rem}.brands-featured__count{font-size:.79rem;color:var(--brand-muted)}.brands-featured__arrow{position:absolute;right:1.2rem;top:1.2rem;color:var(--brand-blue);font-size:1.15rem}
.brands-section-head--directory{margin-bottom:1.6rem}.brands-result-count{color:var(--brand-muted);font-size:.88rem}.brands-result-count strong{color:var(--brand-ink)}.brands-letter-section{scroll-margin-top:5rem;margin-bottom:2.1rem}.brands-letter-heading{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--brand-border)}.brands-letter-heading h3{font-size:1.55rem;font-weight:800;margin:0;color:var(--brand-blue)}.brands-letter-heading span{font-size:.75rem;background:#eaf1f8;color:#496782;padding:.12rem .45rem;border-radius:20px}.brands-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}.brands-card{display:flex;align-items:center;min-height:78px;gap:.72rem;padding:.7rem;border:1px solid #e0e8f0;border-radius:12px;background:#fff;text-decoration:none;color:var(--brand-ink);transition:border-color .18s,transform .18s,box-shadow .18s}.brands-card:hover{color:var(--brand-ink);border-color:#91b8df;transform:translateY(-2px);box-shadow:0 8px 18px rgba(17,49,85,.08)}.brands-card__mark{flex:0 0 46px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;overflow:hidden;border-radius:9px;background:#eaf2fb;color:var(--brand-blue);font-size:.9rem;font-weight:800}.brands-card__mark img{max-width:42px;max-height:38px;object-fit:contain}.brands-card__body{min-width:0;display:flex;flex-direction:column;gap:.15rem}.brands-card__body strong{font-size:.87rem;line-height:1.2;overflow-wrap:anywhere}.brands-card__body small{font-size:.7rem;line-height:1.25;color:var(--brand-muted)}.brands-card--empty{background:#fbfcfe}.brands-card--empty .brands-card__mark{background:#f0f3f6;color:#8290a1}.brands-card__arrow{margin-left:auto;align-self:flex-start;color:#82a3c4;font-size:.9rem}.brands-no-results{border:1px dashed #c7d7e7;border-radius:13px;background:#f8fbfe;padding:2rem;text-align:center;color:var(--brand-muted)}
@media(max-width:1100px){.brands-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:767px){.brands-hero{min-height:190px;padding:1.7rem 1.45rem;border-radius:17px}.brands-hero__symbol{display:none}.brands-featured__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brands-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brands-index{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.brands-index__letter{flex:0 0 auto}.brands-section-head--directory{align-items:start;flex-direction:column}.brands-page{padding-bottom:2rem}}@media(max-width:450px){.brands-featured__grid{gap:.55rem}.brands-featured__card{min-height:142px;padding:.9rem}.brands-featured__name{font-size:.97rem}.brands-grid{gap:.45rem}.brands-card{gap:.42rem;padding:.45rem;min-height:72px}.brands-card__mark{flex-basis:38px;width:38px;height:38px}.brands-card__body strong{font-size:.8rem}.brands-card__body small{font-size:.65rem}.brands-card__arrow{display:none}}

.brands-featured__mark--text{width:auto;min-height:56px;height:auto;max-width:100%;justify-content:flex-start;padding:.15rem .35rem;background:transparent;color:var(--brand-ink);font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.1;overflow-wrap:anywhere}.brands-featured__mark--text+.brands-featured__count{margin-top:1rem}.brands-card--text .brands-card__body strong{font-size:1.07rem;line-height:1.18}.brands-card--text .brands-card__body small{margin-top:.18rem}

/* Keep opaque brand artwork on a neutral surface and give it room to read. */
.brands-card{min-height:94px;gap:.9rem}
.brands-card__mark,.brands-card--empty .brands-card__mark{flex:0 0 78px;width:78px;height:66px;background:#fff;border:1px solid #e8eef5;border-radius:9px}
.brands-card__mark img{display:block;max-width:72px;max-height:60px;width:auto;height:auto;object-fit:contain}
.brands-featured__card{min-height:195px}
.brands-featured__mark{width:154px;height:90px;background:#fff;border:1px solid #e8eef5}
.brands-featured__mark img{display:block;max-width:144px;max-height:82px;width:auto;height:auto;object-fit:contain}
.brands-featured__mark--text{border:0;background:transparent}
.vs-brand-heading{display:flex;align-items:center;gap:1.5rem;min-height:96px;margin-bottom:.55rem}
.vs-brand-heading h1{margin:0}
.vs-brand-heading__logo{display:flex;align-items:center;justify-content:center;flex:0 0 190px;width:190px;height:104px;padding:8px;background:#fff;border:1px solid #e1e8f0;border-radius:14px}
.vs-brand-heading__logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:450px){.brands-card{min-height:86px;gap:.6rem}.brands-card__mark,.brands-card--empty .brands-card__mark{flex-basis:62px;width:62px;height:56px}.brands-card__mark img{max-width:56px;max-height:50px}.brands-featured__mark{width:126px;height:76px}.brands-featured__mark img{max-width:118px;max-height:68px}.vs-brand-heading{gap:.8rem;min-height:76px}.vs-brand-heading__logo{flex-basis:116px;width:116px;height:70px;padding:5px}.vs-brand-heading h1{font-size:clamp(1.45rem,7vw,2rem)}}

/* The logo is the primary content of a brand card, not a tiny icon. */
.brands-card{min-height:100px;padding:.55rem .7rem;gap:.75rem}
.brands-card__mark,.brands-card--empty .brands-card__mark{flex:0 0 112px;width:112px;height:78px}
.brands-card__mark img{max-width:106px;max-height:72px}
@media(max-width:520px){.brands-grid{grid-template-columns:1fr}.brands-card{min-height:96px}.brands-card__mark,.brands-card--empty .brands-card__mark{flex-basis:110px;width:110px;height:74px}.brands-card__mark img{max-width:104px;max-height:68px}}

/* Compact featured brands: artwork gets nearly half the card, details sit beside it. */
.brands-featured__card{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center;column-gap:1rem;min-height:128px;padding:1rem}
.brands-featured__mark{grid-column:1;grid-row:1 / 3;width:100%;height:94px;margin:0}
.brands-featured__mark img{max-width:calc(100% - 10px);max-height:86px}
.brands-featured__name{grid-column:2;grid-row:1;align-self:end;margin:0 1.2rem .2rem 0;font-size:1.18rem;line-height:1.2}
.brands-featured__count{grid-column:2;grid-row:2;align-self:start;font-size:.82rem;line-height:1.35}
.brands-featured__mark--text{grid-column:1 / -1;grid-row:1;min-height:0;height:auto;max-width:none;justify-content:flex-start;padding:0 1.2rem 0 0;border:0;font-size:clamp(1.3rem,2vw,1.7rem)}
.brands-featured__mark--text+.brands-featured__count{grid-column:1 / -1;grid-row:2;margin-top:.45rem}
@media(max-width:1050px){.brands-featured__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.brands-featured__grid{grid-template-columns:1fr}.brands-featured__card{min-height:114px}.brands-featured__mark{height:78px}.brands-featured__mark img{max-height:70px}}
