/* STYLE1_4_brands2.jpg: alphabet, five-column logo gallery and purple finder banner.
   The surrounding chrome and Montserrat come from the existing ESV theme. */
.esv-brands-page, .esv-brand-page { background: #fff; }
.esv-brands-page #maincontent, .esv-brands-page .columns, .esv-brands-page .column.main { width: 100%; max-width: none; padding: 0; margin: 0; display: block; }
.esv-brand-finder, .esv-brand-intro { font-family: Montserrat, sans-serif; color: #071a3d; }
.esv-brand-finder * { box-sizing: border-box; }
.esv-brand-finder [hidden] { display: none !important; }
.esv-brand-finder ::selection, .esv-brand-intro ::selection { color: #fff; background: #7928ca; }
.esv-brand-finder__hero { position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden; min-height: 230px; background: linear-gradient(110deg, #cd74ec, #8b00f5); }
.esv-brand-finder__hero h1 { position: relative; margin: 0; padding: 36px 20px; color: #fff; text-transform: uppercase; font-size: clamp(34px, 4vw, 62px); font-weight: 600; line-height: 1.1; letter-spacing: -1.5px; text-align: center; }
.esv-brand-finder__collage { position: absolute; inset: -30px 0; z-index: -1; max-width: 1500px; margin: auto; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 14px 30px; align-items: center; opacity: .19; mix-blend-mode: multiply; transform: rotate(-3deg) scale(1.03); }
.esv-brand-finder__collage img { width: 100%; max-height: 78px; object-fit: contain; filter: grayscale(1) contrast(2); }
.esv-brand-finder__body { max-width: 1440px; padding: 26px 64px 68px; margin: 0 auto; }
.esv-brand-alphabet { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; padding: 0 0 25px; }
.esv-brand-alphabet a, .esv-brand-alphabet > span { display: grid; place-items: center; min-width: 36px; min-height: 44px; padding: 8px; color: #62626a; font-size: 13px; font-weight: 400; text-decoration: none; }
.esv-brand-alphabet a:first-child { min-width: 48px; margin-right: 8px; }
.esv-brand-alphabet a:hover, .esv-brand-alphabet a[aria-current="true"] { color: #8020c5; background: #f5eafa; }
.esv-brand-alphabet a[aria-current="true"] { box-shadow: inset 0 -2px #9120dc; font-weight: 600; }
.esv-brand-alphabet > span { color: #b2b2b8; }
.esv-brand-finder :is(a,button):focus-visible, .esv-brand-intro a:focus-visible { outline: 2px solid #8424c4; outline-offset: 4px; }
.esv-brand-group { scroll-margin-top: 30px; }
.esv-brand-group h2 { display: flex; align-items: center; gap: 32px; margin: 10px 0 6px; color: #9424e5; font-size: 29px; font-weight: 600; line-height: 1.5; text-align: center; }
.esv-brand-group h2::before, .esv-brand-group h2::after { content: ''; height: 1px; background: #d6d6db; flex: 1; }
.esv-brand-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: 35px; row-gap: 18px; margin: 0; padding: 0 0 18px; list-style: none; }
.esv-brand-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 186px; padding: 18px 0; color: #6c6c73; text-align: center; text-decoration: none; }
.esv-brand-tile__logo { display: grid; place-items: center; width: 100%; height: 96px; }
.esv-brand-tile__logo img { display: block; width: 100%; height: 100%; max-width: 200px; max-height: 96px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter 220ms ease-out, opacity 220ms ease-out; }
.esv-brand-tile:is(:hover,:focus-visible) img { filter: grayscale(0); opacity: 1; }
.esv-brand-tile__wordmark { color: #8a8a8d; font-size: clamp(18px,1.8vw,28px); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; transition: color 220ms ease-out; }
.esv-brand-tile:is(:hover,:focus-visible) .esv-brand-tile__wordmark { color: #071a3d; }
.esv-brand-tile__name { font-size: 11px; line-height: 1.5; }
.esv-brand-tile:hover .esv-brand-tile__name { color: #8020c5; }
.esv-brand-finder__empty { padding: 70px 20px; text-align: center; }
.esv-brand-finder__empty a, .esv-brand-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; color: #0663ed; }
.esv-brand-page #maincontent { max-width: 1440px; padding: 0 40px 50px; }
.esv-brand-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; padding: 28px 0; font-size: 13px; }
.esv-brand-intro__heading { display: flex; align-items: center; gap: 40px; padding: 24px 0 38px; }
.esv-brand-intro__heading img { width: 220px; max-height: 110px; object-fit: contain; }
.esv-brand-intro h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 600; line-height: 1.2; }
.esv-brand-intro__content { font-size: 16px; line-height: 1.75; padding-bottom: 36px; }
.esv-brand-intro__content img { max-width: 100%; }
.esv-brand-products-title { border-top: 1px solid #d6d6db; padding-top: 35px; margin: 0; font-size: 26px; font-weight: 400; }
@media (max-width: 1023px) {
    .esv-brand-finder__body { padding: 20px 32px 45px; }
    .esv-brand-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 25px; }
    .esv-brand-alphabet { gap: 0; }
    .esv-brand-alphabet a, .esv-brand-alphabet > span { min-width: 32px; }
}
@media (max-width: 639px) {
    .esv-brand-finder__hero { min-height: 155px; }
    .esv-brand-finder__hero h1 { font-size: 36px; letter-spacing: -1px; }
    .esv-brand-finder__collage { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 18px; inset: -38px -16px; }
    .esv-brand-finder__collage img { max-height: 50px; }
    .esv-brand-finder__body { padding: 20px 20px 38px; }
    .esv-brand-alphabet { padding-bottom: 16px; }
    .esv-brand-alphabet a, .esv-brand-alphabet > span { min-width: 34px; min-height: 44px; }
    .esv-brand-alphabet a:first-child { min-width: 42px; margin-right: 0; }
    .esv-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 26px; }
    .esv-brand-group h2 { gap: 20px; font-size: 25px; }
    .esv-brand-tile { min-height: 154px; gap: 10px; padding: 14px 0; }
    .esv-brand-tile__logo { height: 82px; }
    .esv-brand-tile__logo img { max-height: 82px; }
    .esv-brand-tile__wordmark { font-size: 22px; }
    .esv-brand-page #maincontent { padding: 0 20px 35px; }
    .esv-brand-intro__heading { flex-direction: column; align-items: flex-start; gap: 20px; padding: 12px 0 28px; }
    .esv-brand-intro__heading img { width: 170px; max-height: 85px; }
    .esv-brand-products-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .esv-brand-tile img, .esv-brand-tile__wordmark { transition: none; } }