.brand-wall-meta{display:flex;justify-content:space-between;gap:20px;margin-top:55px;padding-bottom:18px;border-bottom:1px solid var(--border);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.brands-grid.brand-wall{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:0}
.brand-card{min-width:0;min-height:170px;position:relative;display:flex;align-items:center;justify-content:center;padding:40px 22px;border:1px solid rgba(36,76,80,.18);background:#e7e9df;color:#244c50;overflow:hidden}
.brand-card:nth-child(4n+2){background:#d8e4de}.brand-card:nth-child(4n+3){background:#e2e5e7}.brand-card:nth-child(4n){background:#eee7da}
.brand-name{font-family:Arial,Helvetica,sans-serif;font-size:clamp(20px,2.3vw,36px);font-weight:700;letter-spacing:-.04em;line-height:1.1;text-align:center;text-transform:uppercase;overflow-wrap:normal;word-break:normal;max-width:100%}
.brand-index{position:absolute;left:15px;top:13px;font-size:9px;letter-spacing:.1em;font-weight:400;opacity:.7}.brand-corner{position:absolute;right:14px;bottom:11px;font-style:normal;font-size:14px;opacity:.5}
.brand-serif .brand-name{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.055em}.brand-classic .brand-name{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(19px,2.1vw,31px);letter-spacing:.035em}.brand-soft .brand-name{text-transform:none;font-weight:600;letter-spacing:-.06em}.brand-spaced .brand-name{font-size:clamp(18px,1.8vw,27px);letter-spacing:.11em}.brand-bold .brand-name{font-weight:900;letter-spacing:-.065em}.brand-sport .brand-name{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-style:italic;letter-spacing:-.07em;font-size:clamp(23px,2.6vw,40px)}
[data-theme=dark] .brand-card{background:#32494c;color:#f1ebdf;border-color:#bfd0cc33}[data-theme=dark] .brand-card:nth-child(4n+2){background:#334540}[data-theme=dark] .brand-card:nth-child(4n+3){background:#344458}[data-theme=dark] .brand-card:nth-child(4n){background:#23383c}
@media(max-width:980px){.brands-grid.brand-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.brand-name{font-size:25px}.brand-classic .brand-name{font-size:22px}}
@media(max-width:690px){.brand-wall-meta{margin-top:35px;padding-bottom:15px;font-size:9px;letter-spacing:.06em;gap:12px}.brand-wall-meta p:last-child{text-align:right}.brands-grid.brand-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.brand-card{min-height:125px;padding:36px 14px}.brand-card:first-child,.brand-card:last-child{grid-column:1/-1}.brand-card:first-child{min-height:150px}.brand-card:first-child .brand-name{font-size:clamp(40px,11vw,65px)}.brand-card:last-child{min-height:100px}.brand-name{font-size:clamp(20px,5.7vw,30px)}.brand-classic .brand-name{font-size:clamp(17px,4.7vw,24px)}.brand-spaced .brand-name{font-size:clamp(17px,4.5vw,23px);letter-spacing:.07em}.brand-sport .brand-name{font-size:clamp(19px,6vw,32px)}.brand-index{left:12px;top:10px}.brand-corner{bottom:8px;right:11px}}
/* Hover adds feedback without making the touch layout depend on it. */
@media(hover:hover) and (pointer:fine){
 .brand-card{transition:transform .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}@media (hover:hover) and (pointer:fine){
 .brand-card:hover{background:#244c50;color:#f5eee2;border-color:#244c50;transform:translateY(-5px);box-shadow:0 10px 22px rgba(23,51,56,.14)}}@media (hover:hover) and (pointer:fine){
 [data-theme=dark] .brand-card:hover{background:#536b82;color:#f5eee2;border-color:#91a7b8;box-shadow:0 10px 22px rgba(0,0,0,.2)}}@media (hover:hover) and (pointer:fine){
 .brand-card:hover .brand-index,.brand-card:hover .brand-corner{opacity:1}}
}
@media(prefers-reduced-motion:reduce){.brand-card{transition:none}@media (hover:hover) and (pointer:fine){.brand-card:hover{transform:none}}}
/* A compact, equal-size mobile wall keeps all twelve names together. */
@media(max-width:690px){
 .brands.section{padding-top:32px;padding-bottom:32px}
 .brands .eyebrow{margin-bottom:18px;font-size:10px}
 .brands .big-title{font-size:clamp(30px,8.2vw,44px);line-height:.98}
 .brand-wall-meta{margin-top:20px;padding-bottom:10px;font-size:8px}
 .brands-grid.brand-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
 .brands-grid.brand-wall .brand-card{grid-column:auto;min-height:80px;height:80px;padding:19px 7px 10px}
 .brands-grid.brand-wall .brand-card .brand-name{font-size:clamp(12px,3.35vw,18px);line-height:1.12;letter-spacing:-.025em}
 .brands-grid.brand-wall .brand-spaced .brand-name{letter-spacing:.045em}
 .brand-index{font-size:7px;left:7px;top:6px}
 .brand-corner{display:none}
}
/* Use the same heading scale as other sections, with denser cards on desktop. */
.brands.section{padding-block:clamp(48px,5vw,80px)}
.brands .big-title{font-size:var(--section-title-size);line-height:.98;letter-spacing:-.045em;max-width:none}
.brand-wall-meta{margin-top:26px;padding-bottom:12px}
.brands-grid.brand-wall{gap:8px;margin-top:12px}
.brand-card{min-height:112px;padding:26px 18px}
.brand-name{font-size:clamp(20px,2.1vw,30px)}
.brand-classic .brand-name{font-size:clamp(18px,1.8vw,27px)}
.brand-sport .brand-name{font-size:clamp(23px,2.3vw,34px)}
@media(max-width:690px){
 .brands.section{padding-block:32px}
 .brand-wall-meta{margin-top:20px;padding-bottom:10px}
 .brands-grid.brand-wall{gap:6px;margin-top:10px}
}