/* Shared vector icons keep their shape on iOS, Android and desktop. */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;overflow:visible}
.button .icon,.text-link .icon,.hero-secondary .icon{width:24px;height:24px}
.scroll-cue .icon{width:20px;height:20px}
.contact-arrow .icon{width:50%;height:50%}
.close-menu .icon{width:26px;height:26px}
.neural-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;mix-blend-mode:multiply;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 14%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%)}
.neural-video-ready .neural-video{opacity:1}
.neural-video-ready .neural-poster{opacity:0}
.contact-arrow>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.header{padding-top:env(safe-area-inset-top,0px)}
.mobile-menu{padding-top:env(safe-area-inset-top,0px);padding-bottom:max(25px,env(safe-area-inset-bottom,0px))}
@media(max-width:1120px){
 .language{display:flex;justify-content:center;align-items:center;min-width:44px;min-height:44px}
 .header-actions{gap:8px}
 .mobile-toggle{flex-shrink:0}
}
@media(max-width:700px){
 .wrap{width:auto;margin-left:max(20px,env(safe-area-inset-left,0px));margin-right:max(20px,env(safe-area-inset-right,0px))}
 .header-inner{height:70px;gap:16px}
 .logo img{height:42px}
 .hero-inner{padding-top:28px}
 .hero-copy{min-width:0}
 .hero-label{font-size:.6875rem;line-height:1.65;letter-spacing:.075em;margin-bottom:22px;align-items:center}
 .brand-line{flex-shrink:0}
 h1{font-size:clamp(2.4rem,10.5vw,4.25rem);line-height:1.065;letter-spacing:-.05em}
 .hero-copy>p{font-size:1rem;line-height:1.75;max-width:540px;margin-top:25px}
 .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-top:25px}
 .hero-actions .button{font-size:.875rem;min-height:54px;padding:14px 19px;gap:20px;width:100%}
 .hero-secondary{font-size:.875rem;min-height:48px;justify-content:space-between;padding:10px 19px}
 /* Center the brain's optical bounds (x=460…1500), not its asymmetric source canvas. */
 .hero-art{flex-shrink:0;position:relative;width:142vw;max-width:none;aspect-ratio:3/2;height:auto;right:auto;top:auto;margin:16px 0 0 calc(50% - 90.6vw);z-index:-1}
 .hero-art picture{width:100%;height:100%}
 .hero-art img{width:100%;height:100%;object-fit:contain;mask-image:none;-webkit-mask-image:none}
 .neural-canvas{display:none}
 .neural-video{mask-image:none;-webkit-mask-image:none}
 .neural-video-ready .neural-video{opacity:1}
 .neural-video-ready .neural-poster{opacity:0}
 .hero-foot{min-height:0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0;padding:10px 0 24px;letter-spacing:0}
 .scroll-cue{min-height:44px;font-size:.75rem;gap:7px}
 .scroll-cue>span{width:28px;height:28px}
 .neural-toggle{min-width:0;min-height:44px;padding:8px 0;font-size:.75rem;line-height:1.5;text-align:right}
 .section-heading h2{font-size:clamp(2rem,8.3vw,2.6rem);line-height:1.15}
 .section-heading>p{max-width:100%}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .contact-bottom{align-items:center;flex-wrap:wrap;gap:24px}
 .contact-bottom h2{font-size:clamp(2rem,8.3vw,3rem);line-height:1.15;min-width:0}
 .contact-arrow{flex-shrink:0;width:56px;height:56px;margin:0}
 .contact-section>.text-link{font-size:.875rem;gap:16px;line-height:1.6}
 .footer-bottom{font-size:.8125rem;line-height:1.75;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
 .footer-bottom span:nth-child(2){margin-left:0}
 .mobile-menu{padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
 .mobile-menu-top{height:80px}
 .mobile-sub a{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px}
}
@media(max-width:520px){
 .solution-list>div{grid-template-columns:minmax(0,1fr);gap:7px;padding-block:20px}
 .solution-list>div>span{font-size:.9375rem;font-weight:700}
 .solution-list p{font-size:.9375rem}
 .footer-top>a:last-child{font-size:.8125rem;min-height:44px;display:flex;align-items:center;gap:8px}
}
@media(min-width:480px) and (max-width:700px){.hero-actions{grid-template-columns:minmax(0,1fr) auto;gap:15px}}
@media(prefers-reduced-motion:reduce),(forced-colors:active){.neural-video{display:none!important}.neural-video-ready .neural-poster{opacity:1!important}}
/* Mobile leads directly from the message and actions into company content. */
@media(max-width:700px),(pointer:coarse){
 .hero-art,.hero-foot,.neural-toggle{display:none!important}
 .hero-inner{min-height:0;padding-bottom:32px}
}

/* The anniversary mark is 4.56:1, so at 42px it needs 191px of the row. Below
   ~345px that no longer fits beside the menu button; measured overflow at
   320px was 23px. Lives here, not in styles.css, because the 700px rule above
   would otherwise win. */
@media(max-width:370px){
 .logo img{height:34px}
 .mobile-menu-top img{height:34px}
}