/* GENESIS mobile-first enhancement, Bootstrap 5 breakpoint compatible. */
@media(max-width:767.98px){
 html,body{max-width:100%;overflow-x:clip}
 .container{width:calc(100% - 28px);max-width:100%}
 .site-header .nav{min-height:64px;gap:10px}
 .site-header .brand{min-width:0;max-width:calc(100% - 108px)}
 .site-header .brand img{max-width:100%;height:auto}
 #menuToggle{min-width:48px;min-height:48px;touch-action:manipulation}
 #mainMenu{top:64px;max-height:calc(100dvh - 64px);overflow-y:auto;z-index:60;padding:14px 18px}
 #mainMenu.open{display:flex}
 #mainMenu a{display:flex;align-items:center;min-height:48px;padding:10px 12px;font-size:16px}
 .hero-inner,.split,.products,.grid3{grid-template-columns:minmax(0,1fr)!important}
 .hero-inner{padding-top:36px;padding-bottom:42px}
 .hero h1,h1{font-size:clamp(30px,8.5vw,44px);line-height:1.2;letter-spacing:-.025em}
 h2{font-size:clamp(24px,7vw,34px)}
 .intro p,.section p{font-size:16px;line-height:1.75}
 img,video,iframe{max-width:100%;height:auto}
 .cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 .cta a{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center}
 .products>*,.grid3>*,.split>*,.hero-inner>*{min-width:0}
 .footer-grid{grid-template-columns:minmax(0,1fr)}
 .section{padding:48px 0}
}
@media(min-width:768px) and (max-width:991.98px){
 .container{width:calc(100% - 40px)}
 .nav-links{gap:9px;flex-wrap:wrap}
 .nav-links a{font-size:14px}
}