/* Reference-inspired mobile storefront. Desktop retains its catalogue layout. */
.mobile-only,.mobile-benefits,.mobile-cta{display:none}
@media(max-width:800px){
 html{scroll-padding-top:80px}
 body{background:#fff}
 .utility{display:none}
 .wrap{width:calc(100% - 40px)}
 .nav{height:68px}
 .brand{font-size:27px;letter-spacing:.13em}
 .brand span{font-size:8px;letter-spacing:.21em;margin-top:6px}
 .nav-toggle{border:0;padding:8px;font-size:25px;line-height:1}
 .nav nav{top:68px}
 main{display:flex;flex-direction:column}
 main> *{width:100%}
 main>.wrap{width:calc(100% - 40px)}
 .hero{order:0;background:#032f45}
 .hero-inner{min-height:720px;padding-top:32px;padding-bottom:345px}
 .hero-art{inset:300px 0 0;background-size:auto 85%;background-position:right bottom}
 .hero:after{background:linear-gradient(180deg,#052d43 0%,#052d43 39%,#052d4300 61%)}
 .hero-copy{max-width:490px;width:100%}
 .hero .eyebrow{font-size:10px;letter-spacing:.16em;color:#d9f6ff;margin-bottom:14px}
 .hero h1{font-size:43px;line-height:1.02;font-weight:650}
 .hero h1 em{font-size:.73em;color:#00d2e8;letter-spacing:-.045em;margin-top:8px}
 .hero-description{font-size:14px;line-height:1.45;max-width:330px;color:#edf7fb;margin:17px 0 21px}
 .hero .actions{gap:10px;align-items:stretch;flex-wrap:nowrap}
 .hero .button,.hero-link{padding:12px 13px;font-size:12px;gap:10px;border-radius:5px;text-align:center;display:flex;align-items:center;justify-content:center}
 .hero-link{border:1px solid #4eb4ce;background:#063b5180}
 .hero-link span{margin-left:6px}
 .hero-bottom{display:none}
 .mobile-benefits{display:block;order:1;background:linear-gradient(#f6fbfd,#fff);position:relative;padding:22px 0}
 .mobile-benefits:before{content:'';position:absolute;top:-12px;left:0;width:100%;height:16px;background:#f6fbfd;clip-path:polygon(0 45%,12% 25%,31% 60%,57% 20%,80% 40%,100% 0,100% 100%,0 100%)}
 .benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
 .benefits-grid>div{display:flex;align-items:center;gap:9px}
 .benefit-icon{display:grid;place-items:center;flex:none;width:34px;height:40px;background:#edf8fb;border-radius:50%;font-size:28px;color:#00627d}
 .benefits-grid b{display:block;font-size:12px;color:#073449;line-height:1.2}
 .benefits-grid small{display:block;font-size:10px;line-height:1.3;margin-top:5px;color:#527084}
 .intro-bar{display:none}
 .mobile-only{display:block}
 #range{order:2;padding-top:28px;padding-bottom:28px;position:relative}
 #range .section-heading{margin-bottom:10px}
 #range .section-heading>p,.desktop-range-title{display:none}
 #range .eyebrow{font-size:10px;margin-bottom:8px;letter-spacing:.1em}
 #range h2{font-size:29px}
 .range-all{font-size:12px;color:#009fba;margin:10px 0 18px}
 .range-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;position:relative;scroll-padding:0}
 .range-grid::-webkit-scrollbar{display:none}
 .range-grid:after{content:'';flex:0 0 18%}
 .range-card,.range-card:last-child{display:block;flex:0 0 82%;border:1px solid #e7eff3;background:#fff;border-radius:9px;overflow:hidden;padding:0;scroll-snap-align:start}
 .range-index{display:none}
 .range-card img,.range-card:last-child img{height:180px;margin:0;padding:15px;width:100%;background:#fff;object-fit:contain}
 .range-card h3,.range-card:last-child h3{font-size:19px;margin:0;padding:15px 15px 0;border-top:1px solid #edf3f5;line-height:1.15}
 .range-card p,.range-card:last-child p{font-size:13px;padding:7px 15px 18px;margin:0;line-height:1.4;min-height:62px}
 .range-dots{display:flex;justify-content:center;gap:0;margin-top:12px}
 .range-dots button{width:30px;height:30px;border:0;background:transparent;position:relative}
 .range-dots button:after{content:'';position:absolute;width:8px;height:8px;top:11px;left:11px;border-radius:50%;background:#d7e3e8}
 .range-dots button[aria-pressed=true]:after{background:#00bdd9}
 #about{order:3;background:#052e42;color:#fff;padding:0 0 30px}
 .about-grid{gap:24px}
 .about-grid>img{height:190px;width:calc(100% + 40px);max-width:none;margin-left:-20px}
 #about .eyebrow{color:#39d6eb;font-size:10px;margin-bottom:10px}
 #about h2{font-size:29px}
 #about p:not(.eyebrow){color:#d0e4ed;font-size:13px;line-height:1.5;margin-top:15px}
 #about .text-link{color:#4ddbeb;margin-top:10px;font-size:13px}
 #cases{order:4;padding-top:32px;padding-bottom:32px}
 #cases .section-heading{margin-bottom:20px}
 #cases .section-heading>p{display:none}
 #cases .eyebrow{font-size:10px;margin-bottom:10px}
 #cases h2{font-size:29px}
 .case-grid{gap:12px}
 .case-grid button{border-radius:7px}
 .case-grid img{height:132px}
 #cases .load-row{margin-top:20px}
 #cases .button{font-size:12px;padding:10px 16px}
 .mobile-cta{display:block;order:5;padding:38px 0;text-align:center;background:linear-gradient(#02324bdd,#02324bcc),url('../images/hero.webp') center bottom/cover;color:white;border-radius:50% 50% 0 0 / 12px 12px 0 0}
 .mobile-cta h2{font-size:25px;line-height:1.2;font-weight:600}
 .mobile-cta .button{margin-top:22px;min-width:190px}
 .comparison{order:6;padding:38px 0}
 .compare-copy h2{font-size:29px}
 #products{order:7;padding-top:40px;padding-bottom:40px}
 #products h2{font-size:29px}
 .customization{order:8}
 .catalog-download{order:9}
 .contact-section{order:10}
 .product-grid{gap:16px}
 .product-card{border-radius:8px;overflow:hidden}
 .contact-grid form{border-radius:8px}
}
@media(min-width:600px) and (max-width:800px){
 .hero-inner{min-height:480px;padding:48px 0 50px}
 .hero-copy{width:48%}
 .hero h1{font-size:44px}
 .hero-description{font-size:14px}
 .hero-art{inset:0;background-size:auto 100%;background-position:65% center}
 .hero:after{background:linear-gradient(90deg,#052d43 0%,#052d43c0 32%,transparent 70%)}
 .hero .actions{flex-direction:column;width:210px}
 .benefits-grid{grid-template-columns:repeat(4,1fr);gap:12px}
 .benefit-icon{width:28px}
 .range-card,.range-card:last-child{flex-basis:42%}
 .range-grid:after{flex-basis:58%}
 .about-grid{grid-template-columns:.8fr 1.2fr;gap:25px}
 .about-grid>img{width:100%;height:100%;margin:0;object-fit:cover}
 #about{padding:30px 0}
 .case-grid{grid-template-columns:repeat(4,1fr)}
}