:root{--color-performance-red:#83253B;--color-brand-accent:#83253B}
.myler-brand-symbol{display:block;background:currentColor;-webkit-mask:url(brand/myler-symbol.svg?v=brand17) center/contain no-repeat;mask:url(brand/myler-symbol.svg?v=brand17) center/contain no-repeat}
.footer-brand.footer-supplier-wordmark{display:block;width:100%;font-family:var(--font-display);font-size:11.6vw;font-weight:500;line-height:1;letter-spacing:-.06em;text-align:center;white-space:nowrap}
header a:has(>.brand-word){width:60px!important;height:48px!important}
header .brand-word{width:100%;height:100%;font-size:0;color:var(--header-fg)}
header[data-scroll-state="true"] a:has(>.brand-word){width:32px!important;height:26px!important}
.footer-brand.myler-brand-symbol{width:22rem;height:17.26rem;max-width:80%;max-height:90%;font-size:0;flex-shrink:0}
@media(max-width:767px){header a:has(>.brand-word){width:44px!important;height:35px!important}header[data-scroll-state="true"] a:has(>.brand-word){width:44px!important;height:35px!important}.footer-brand.myler-brand-symbol{width:7.8rem;height:6.12rem}}

@media(min-width:768px){footer nav[aria-label="Footer navigation"]{gap:1.5rem}}

/* Eight direct product links, with natural list height and viewport-safe scrolling. */
#desktop-products-menu{height:auto!important;max-height:calc(100dvh - 63px);overflow-y:auto;overscroll-behavior:contain}
#desktop-products-menu>.product-menu-grid{width:100%!important;height:auto!important;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);padding:32px clamp(24px,2vw,40px) 40px;align-items:start}
#desktop-products-menu .product-menu-list{position:static;display:flex;flex-direction:column;gap:16px;min-width:0;margin:0;padding:0;list-style:none}
#desktop-products-menu .product-menu-list a{max-width:none;font-size:clamp(30px,3.5vw,72px)!important;line-height:1.02!important;overflow-wrap:normal;word-break:normal}
.product-menu-preview{position:sticky;top:16px;aspect-ratio:1.26;min-width:0;margin:8px}
.product-menu-frame{position:absolute;inset:0;border:1px solid #e0e0e0}
.product-menu-corner{position:absolute;display:grid;place-items:center;width:24px;height:24px;background:#fff;z-index:1}
.product-menu-corner.corner-tl{top:-12px;left:-12px}.product-menu-corner.corner-tr{top:-12px;right:-12px}.product-menu-corner.corner-bl{bottom:-12px;left:-12px}.product-menu-corner.corner-br{bottom:-12px;right:-12px}
.product-menu-image{position:absolute;inset:20px;background:#f2f2f2}
#mobile-products-menu{overscroll-behavior:contain}
#mobile-products-menu>.mobile-product-menu-content{width:auto!important;padding:24px 0 0!important;gap:28px!important}
#mobile-products-menu .mobile-product-menu-list{display:flex;flex-direction:column;gap:18px;width:100%;align-items:center}
#mobile-products-menu .mobile-product-menu-list a[data-product]{font-size:clamp(28px,8.4vw,36px);line-height:1.05;text-align:center;max-width:100%;overflow-wrap:normal}
#mobile-products-menu .mobile-product-menu-directory{font-family:var(--font-mono);font-size:14px;line-height:1.4}
#mobile-products-menu>.mobile-product-menu-contact{position:static;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;margin:48px auto 32px;width:calc(100% - 32px);max-width:340px}

/* Scroll up reveals the wordmark; scroll down restores the supplied symbol. */
header a:has(>.brand-word){transition:width 220ms ease}
header .brand-word{position:absolute;left:0;top:0;width:60px;height:48px;transition:opacity 180ms ease}
header .header-brand-name{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;opacity:0;pointer-events:none;color:var(--header-fg);font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1;letter-spacing:-.04em;transition:opacity 180ms ease}
header[data-scroll-direction="up"] a:has(>.brand-word){width:160px!important}
header[data-scroll-direction="up"] .brand-word{opacity:0}
header[data-scroll-direction="up"] .header-brand-name{opacity:1}
header[data-scroll-state="true"] .brand-word{width:32px;height:26px}
header[data-scroll-state="true"] .header-brand-name{font-size:20px}
@media(max-width:767px){
 header a:has(>.brand-word){position:relative}
 header .brand-word,header[data-scroll-state="true"] .brand-word{width:44px;height:35px}
 header[data-scroll-direction="up"] a:has(>.brand-word){width:110px!important}
 header .header-brand-name,header[data-scroll-state="true"] .header-brand-name{font-size:18px}
}
@media(prefers-reduced-motion:reduce){header a:has(>.brand-word),header .brand-word,header .header-brand-name{transition:none}}