/* Haven View Optics — brands.css (generated from the authored stylesheet) */
.brand-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:1px solid var(--primary)}
.brand-list li{font:400 clamp(24px,2.4vw,36px)/1.2 var(--font-serif);color:var(--primary);padding:22px 0;border-bottom:1px solid var(--border);transition:padding .45s var(--ease),color .3s}
.brand-list li:hover{padding-left:10px;color:var(--secondary)}
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.brand-card{position:relative;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:clamp(28px,3vw,44px);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--background);transition:color .5s}
.brand-card::before{content:"";position:absolute;inset:0;background:var(--primary);transform:translateY(101%);transition:transform .6s var(--ease-in-out);z-index:0}
.brand-card>*{position:relative;z-index:1}
.brand-card:hover{color:#E9E4DC}
.brand-card:hover::before{transform:none}
.brand-card:hover h3,.brand-card:hover .tlink{color:#fff}
.brand-card h3{font-size:var(--fs-md);transition:color .5s}
.brand-card p{font-size:15px;margin:14px 0 22px}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.chip{border:1px solid var(--border);background:transparent;padding:12px 18px;font:700 11.5px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:var(--primary);min-height:44px;transition:background .3s,color .3s,border-color .3s}
.chip[aria-pressed="true"],.chip:hover{background:var(--primary);color:var(--background);border-color:var(--primary)}
@media (max-width:1100px){
  .brand-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .brand-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .brand-grid{grid-template-columns:1fr}
  .brand-card{min-height:220px}
}
.logo-scroller{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0;background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{display:flex;width:max-content;animation:logoScroll 46s linear infinite}
.logo-scroller:hover .logo-track,.logo-scroller:focus-within .logo-track{animation-play-state:paused}
.logo-card{flex:0 0 auto;width:clamp(150px,13vw,190px);height:86px;display:flex;align-items:center;justify-content:center;padding:0 22px;border-right:1px solid var(--border);text-decoration:none}
.logo-card img{max-height:42px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .4s var(--ease),opacity .4s var(--ease),transform .5s var(--ease)}
.logo-card:hover img,.logo-card:focus-visible img{filter:none;opacity:1;transform:scale(1.05)}
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.logo-wall .slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px 24px;min-height:170px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;text-align:center;transition:background .4s var(--ease)}
.logo-wall .slot:hover{background:var(--surface)}
.logo-wall .slot-logo{display:flex;align-items:center;justify-content:center;height:52px;width:100%}
.logo-wall .slot img{max-height:46px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .4s var(--ease),opacity .4s var(--ease),transform .5s var(--ease)}
.logo-wall .slot:hover img{filter:none;opacity:1;transform:scale(1.04)}
.logo-wall .slot-name{font:700 11px/1.3 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.section--dark .logo-wall .slot,.section--dark .logo-scroller{background:#fff}
@media (max-width:900px){
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .logo-wall .slot{min-height:140px;padding:22px}
}
@media (max-width:420px){
  .logo-card{width:140px}
}
.logo-wall>*{min-width:0}
@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .logo-scroller{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
.logo-card .brand-logo-img.is-tall img{max-height:56px}
.logo-wall .brand-logo-img.is-tall img{max-height:62px}
.logo-wall--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .logo-wall--3{grid-template-columns:repeat(2,1fr)}
}