/* Responsive layers (mobile-first). style.css = <576px base. */
@media (max-width:359px){
  .brand img{height:30px}
  .lang button{padding:.4rem .5rem;font-size:.8rem}
  .btn{padding:.6rem .8rem}
  .catgrid{grid-template-columns:1fr}
}
@media (min-width:576px){
  .grid.c2,.prod-grid,.svc-grid,.related,.fgrid,.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form-grid.two-col{grid-template-columns:repeat(2,1fr)}
  .form-grid .full{grid-column:1/-1}
  .brand img{height:38px}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
  :root{--hdr:70px}
  body{padding-bottom:0}
  .m-bar{display:none}
  .totop{bottom:1.2rem}
  .tracks{grid-template-columns:1fr 1fr}
  .divisions,.two,.split{grid-template-columns:1fr 1fr}
  .leadbox{grid-template-columns:1fr 1.1fr;align-items:start}
  .foot-grid{grid-template-columns:1fr 1fr}
  .catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(4,1fr);gap:1.4rem}
  .timeline li{padding:3.4rem 0 0}
  .timeline li::after{left:2.5rem;right:-1.4rem;top:1.2rem;bottom:auto;width:auto;height:2px}
  .timeline.three{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(4,1fr)}
  .phero-grid{grid-template-columns:1.4fr 1fr}
  .prod-grid.p2{grid-template-columns:repeat(2,1fr)}
  .related{grid-template-columns:repeat(3,minmax(0,1fr))}
  .searchbox{max-width:640px}
}
@media (min-width:992px){
  .utilbar{display:block}
  .tracks{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1.2fr 1fr;align-items:center;gap:3rem}
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento-item{grid-column:span 2}
  .bento-item.feat{grid-column:span 3;grid-row:span 1}
  .bento-item.wide{grid-column:span 3}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:minmax(0,1fr) 340px;gap:2.4rem;align-items:start}
  .detail .aside-wrap{position:sticky;top:calc(var(--hdr) + 16px)}
  .cat-layout{grid-template-columns:290px minmax(0,1fr);gap:1.8rem;align-items:start}
  .cat-side{display:block}
  .cat-picker{display:none}
  .foot-grid{grid-template-columns:1.4fr 1.2fr 1fr 1fr 1.2fr}
  .hero-tile{display:grid}
  .pro-visual{display:grid;place-items:center;position:relative;min-height:240px}
  .pro-visual .tile{width:150px;height:150px;border-radius:34px;background:linear-gradient(145deg,var(--blue),var(--sky));display:grid;place-items:center;color:#fff;box-shadow:var(--sh-l);transform:rotate(-6deg)}
  .pro-visual .tile .i{width:72px;height:72px;stroke-width:1.5}
  .pro-visual .orb{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
  .pro-visual .o1{width:240px;height:240px}.pro-visual .o2{width:340px;height:340px;border-color:rgba(255,255,255,.12)}
}
@media (min-width:1200px){
  .hdr{gap:1rem}
  .burger{display:none}
  .brand img{height:42px}
  .nav{display:flex;position:static;align-items:center;gap:1rem;border:0;box-shadow:none;padding:0;max-height:none;overflow:visible;flex:1;justify-content:center;order:2;background:transparent}
  .hdr-tools{order:3}
  .nav-list{display:flex;gap:.1rem}
  .nav-list>li{border:0}
  .nav-list>li>a{padding:.5rem .7rem;font-size:.95rem;border-radius:8px;white-space:nowrap}
  .nav-list>li>a:hover{background:var(--blue-l)}
  .has-dd{display:flex;align-items:center}
  .has-dd>a{padding-right:.2rem!important}
  .dd-toggle{position:static;width:28px;height:36px;margin-left:-.2rem}
  .dd{position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px rgba(7,20,55,.18);padding:.5rem;margin:0;z-index:50}
  .has-dd:hover>.dd,.has-dd:focus-within>.dd,.dd.open{display:block}
  .dd-wide{width:580px}
  .has-dd:hover>.dd-wide,.has-dd:focus-within>.dd-wide,.dd-wide.open{display:grid;grid-template-columns:1fr 1fr;gap:0 .5rem}
  .nav-cta{width:auto;margin:0;white-space:nowrap}
  :root{--hdr:76px}
  .prod-grid{grid-template-columns:repeat(4,1fr)}
  .prod-grid.p2{grid-template-columns:repeat(2,1fr)}
  .catgrid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1600px){
  :root{--maxw:1360px}
  html{font-size:106%}
}
@media (min-width:576px){.js [data-enquiry]:empty{min-height:800px}}
@media (min-width:992px){.js [data-enquiry]:empty{min-height:780px}}