/* Whitesoul Aluminium — responsive: all @media breakpoints (tablet + mobile)
   Part of a modular stylesheet. Do not dump unrelated rules here. */

@media(max-width:920px){
    .hero .wrap{grid-template-columns:1fr;gap:34px;padding:48px 22px}
    .hero-card{aspect-ratio:16/11;order:-1;max-height:300px}
    .hero h1{font-size:30px} .hero p.lead{font-size:16px;margin:16px 0 24px}
    .hero .stats{flex-wrap:nowrap;gap:14px;margin-top:28px} .hero .stats div b{font-size:20px} .hero .stats div span{font-size:11px}
    .hero .cta .btn{flex:1}
    .cats,.tgrid,.mvv,.projgrid,.features,.prodgrid{grid-template-columns:repeat(2,1fr)}
    .fgrid{grid-template-columns:1fr 1fr;gap:28px}
    .statbar .wrap{grid-template-columns:repeat(2,1fr);gap:30px}
    .pdgrid,.cwrap,.about-intro,.feature-proj{grid-template-columns:1fr}
    .feature-proj img{min-height:240px}
    nav.main,.nav-cta{display:none}
    .topbar{display:none}
    .hamb{display:grid}
    .sec{padding:54px 0}
    .ggrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
    .ggrid figure:nth-child(1){grid-column:span 2;grid-row:span 1}
    .ggrid figure:nth-child(6){grid-column:span 2}
    .cwrap{margin-top:24px}
  }
@media(max-width:560px){
    .wrap{padding:0 16px}
    .cats,.prodgrid,.features,.ggrid,.projgrid,.tgrid,.mvv{grid-template-columns:1fr}
    .ggrid{grid-auto-rows:200px} .ggrid figure:nth-child(1),.ggrid figure:nth-child(6){grid-column:span 1}
    .fgrid{grid-template-columns:1fr}
    .cinfo,.cform{padding:30px 22px}
    .feature-proj .txt{padding:28px 22px}
    .hero .cta{flex-direction:column} .hero .cta .btn{width:100%}
    .sec h2{font-size:24px}
    .grid2{grid-template-columns:1fr}
    .center-cta .btn,.buybox .btn{width:100%}
    .buybox{flex-direction:column}
    .map{height:340px}
  }
@media(max-width:920px){
    .hero-card{display:none}
    .hero .wrap{gap:0}
    .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 16px}
    .trust .t{font-size:12.5px;gap:9px}
    .trust .t i{width:32px;height:32px;font-size:15px}
    .cats{gap:14px}
    .cat{aspect-ratio:16/10}
    .band .wrap{padding:46px 20px}
    .band{margin-bottom:28px}
  }
@media(max-width:920px){
    .navrow{padding:16px 0}
    .hero .cta{flex-direction:row;gap:10px}
    .hero .cta .btn{flex:1;width:auto;padding:13px 8px;font-size:14px}
    .band{margin-bottom:0}
    .fgrid{padding-top:72px}
  }
@media(max-width:1100px){ #prodgrid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:921px) and (max-width:1100px){
    nav.main{gap:18px;margin-left:16px}
    .nav-cta .btn{padding:11px 15px;font-size:14px}
    .hero h1{font-size:44px}
    .features{grid-template-columns:repeat(2,1fr)}
  }
@media(max-width:920px){
    .wrap{padding:0 20px}
    .navrow{padding:16px 4px}
    .fsub{display:none}
    #prodgrid{grid-template-columns:repeat(2,1fr)}
  }
@media(max-width:560px){ #prodgrid{grid-template-columns:1fr} }
@media(min-width:921px){ nav.main{flex:1;justify-content:center;margin-left:0} }
@media(min-width:921px){ .fcontact div:last-child{white-space:nowrap} }
@media(max-width:920px){
    .fgrid{padding-top:90px}
    .mclose{display:grid}
    .mdrawer{display:flex;position:fixed;top:0;right:0;height:100%;width:min(84%,320px);background:#fff;box-shadow:-14px 0 44px rgba(0,0,0,.28);transform:translateX(105%);transition:transform .32s ease;z-index:80;border-bottom:0;padding:74px 24px 28px;overflow-y:auto}
    .mdrawer.open{transform:translateX(0)}
    .mbackdrop{display:block;position:fixed;top:0;left:0;width:100vw;height:100dvh;background:rgba(10,44,64,.5);opacity:0;visibility:hidden;transition:.25s;z-index:70}
    .mbackdrop.open{opacity:1;visibility:visible}
  }
@media(max-width:920px){ .mdrawer{height:100vh;height:100dvh;justify-content:flex-start} }

@media(max-width:920px){ .scrolltop{right:16px;bottom:86px;width:44px;height:44px} .wafloat{right:16px;bottom:18px} }