/* Version 25-inspired logo wall: oversized badges fill the faded crop. */
.brand-hero {grid-template-columns:1fr 1.12fr;min-height:390px}
.hero-copy {display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.brand-showcase {padding:0 20px;min-width:0;justify-content:stretch;background:#e7eaeb}
.brand-showcase::before {background:radial-gradient(ellipse at 45% 35%,#fff,transparent 82%)}
.brand-window {position:relative;width:calc(100% + 40px);height:352px;min-height:352px;flex:1;margin:0 -20px;padding:0;display:flex;align-items:center;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 85%,transparent)}
.brand-wall {width:calc(100% + 16px);flex:0 0 calc(100% + 16px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:68px;gap:10px;align-items:stretch;transform:rotate(-6deg) scale(1.08);margin:0 -8px;padding:0;max-height:none;min-height:0;overflow:visible;mask-image:none;-webkit-mask-image:none}
.hero-brand {min-width:0;min-height:44px;aspect-ratio:auto;padding:10px 11px;border-radius:13px;background:linear-gradient(145deg,#fff,#f5f6f7);border:1px solid #cdd2d5;box-shadow:0 4px 0 #c4cbd0,0 8px 16px #152b3d10;position:relative}
.hero-brand img {display:block;width:100%;height:44px;max-height:44px;object-fit:contain;filter:grayscale(1);opacity:.88;transition:filter .2s,opacity .2s}
.hero-brand:hover {transform:translateY(-6px) rotate(6deg);box-shadow:0 7px 0 #c4cbd0,0 13px 22px #152b3d22}
.hero-brand:hover img,.hero-brand[aria-pressed=true] img {filter:none;opacity:1}
.hero-brand[aria-pressed=true] {border:2px solid #c72d35;background:#fff2f2;box-shadow:0 4px 0 #b2262c}
.hero-brand[aria-pressed=true]::after {content:'✓';position:absolute;top:4px;right:5px;color:#b2262c;font-size:12px;font-weight:750;line-height:1}
.hero-brand:focus-visible {outline:3px solid #c72d35;outline-offset:3px;z-index:1}
/* The complete badge and focus ring remain visible during keyboard navigation. */
.brand-window:has(.hero-brand:focus-visible) {height:auto;min-height:352px;padding:8px;overflow:visible;mask-image:none;-webkit-mask-image:none}
.brand-window:has(.hero-brand:focus-visible) .brand-wall {transform:none;width:100%;flex-basis:100%;margin:0}
.showcase-caption {position:relative;inset:auto;flex:none;justify-content:space-between;gap:12px;padding:10px 0 18px;margin-top:0;background:transparent}
.showcase-caption span {display:block;font-size:12px;letter-spacing:0;font-weight:550;line-height:1.5;color:#52616b}
.showcase-caption a {display:block;font-size:13px;font-weight:600}
@media(min-width:601px) and (max-width:1050px){
 .brand-hero {grid-template-columns:1fr 1.08fr}
 .hero-copy {padding:26px}
 .hero-copy h1 {font-size:46px}
 .brand-showcase {padding:0 15px}
 .brand-window {width:calc(100% + 30px);margin:0 -15px;padding:16px 12px;height:318px}
 .brand-wall {gap:9px;grid-auto-rows:66px;grid-template-columns:repeat(5,minmax(0,1fr))}
 .hero-brand {padding:12px 7px;border-radius:9px}
 .hero-brand img {height:38px;max-height:38px}
 .showcase-caption {gap:6px}
 .showcase-caption span {max-width:12ch}
}
@media(max-width:700px) and (min-width:601px){
 .brand-hero {grid-template-columns:1fr}
 .brand-showcase {border-left:0;border-top:1px solid var(--line)}
 .brand-window {height:300px;min-height:300px}
 .brand-wall {grid-auto-rows:62px;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr))}
 .showcase-caption span {max-width:none}
}
@media(max-width:600px){
 .brand-hero {grid-template-columns:1fr;min-height:0}
 .hero-copy {padding:24px 22px 20px}
 .hero-copy h1 {font-size:clamp(38px,10vw,48px)}
 .brand-showcase {height:auto;min-height:0;padding:0 16px;border-left:0;border-top:1px solid var(--line)}
 .brand-window {width:calc(100% + 32px);margin:0 -16px;height:244px;min-height:244px;flex:none;padding:0;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 87%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 87%,transparent)}
 .brand-wall {grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-rows:60px;gap:8px;transform:rotate(-5deg) scale(1.12)}
 #heroBrandWall .hero-brand:nth-child(n+21) {display:none}
 .hero-brand {padding:10px 6px;border-radius:9px;box-shadow:0 3px 0 #c8cdd1,0 6px 12px #152b3d10;touch-action:manipulation}
 .hero-brand img {height:36px;max-height:36px}
 .hero-brand:hover {transform:none}
 .brand-window:has(.hero-brand:focus-visible) {min-height:244px}
 .showcase-caption {padding:5px 0 16px;gap:8px;justify-content:space-between}
 .showcase-caption span {font-size:12px;max-width:13ch}
 .showcase-caption a {display:block;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.hero-brand,.hero-brand img{transition:none}.hero-brand:hover{transform:none}}

html:not(.motion-enabled) .hero-brand,html:not(.motion-enabled) .hero-brand img {transition:none}
html:not(.motion-enabled) .hero-brand:hover {transform:none}