/* Hero composition rebuilt to match the supplied reference */
.top .nav{height:64px;min-height:64px;gap:18px}
.brand{min-width:270px;gap:10px}.brand img{width:50px;height:46px}.brand strong{font-size:17px}.brand small{font-size:7px;letter-spacing:1.15px}
.menu{gap:15px;font-size:10px}.menu a{padding:24px 0}.menu a:after{bottom:15px}
.phone b{font-size:12px}.phone small{display:none}.top>.wrap>.btn{min-height:35px;padding:0 13px;font-size:10px;white-space:nowrap}
.hero{height:620px;min-height:620px;position:relative;overflow:hidden;isolation:isolate}
.hero:before{background:linear-gradient(90deg,rgba(2,14,25,.91) 0%,rgba(3,18,30,.76) 34%,rgba(3,18,30,.30) 67%,rgba(3,18,30,.10) 100%),url('hero-clean.jpg') center 44%/cover no-repeat}
.hero>.wrap:not(.heroCards){width:min(1100px,calc(100% - 48px));max-width:1100px;margin:0 auto;padding:40px 0 190px}
.hero .eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin-bottom:10px}
.hero h1{font-size:clamp(44px,4.1vw,64px);line-height:.98;letter-spacing:-1.7px;font-weight:900;max-width:780px;margin:0 0 12px}
.heroLead{font-size:14px;line-height:1.4;max-width:500px;margin:0 0 16px;color:#d5e1e8}
.hero .facts{display:flex;gap:22px;flex-wrap:wrap;max-width:630px;margin:0 0 17px}
.hero .fact{display:flex;gap:7px;max-width:125px;border:0;padding:0}.hero .fact i{font-size:18px;color:#e0edf5}.hero .fact b{font-size:9px;line-height:1.3;font-weight:600}
.heroButtons{display:flex;gap:10px}.heroButtons .btn{min-height:38px;padding:0 18px;font-size:11px}
.hero .wrap.heroCards{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;width:auto;max-width:none;height:112px;min-height:112px;margin:0;padding:0;transform:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:stretch}
.hero .wrap.heroCards .heroCard{height:112px;min-height:112px;max-height:112px;min-width:0;grid-template-columns:36% 64%;background:rgba(4,24,39,.96);border:1px solid rgba(131,166,188,.38);box-shadow:none;overflow:hidden}
.hero .wrap.heroCards .heroCard img{display:block;width:100%;height:110px;min-height:110px;max-height:110px;object-fit:contain;object-position:center;background:#08253a;filter:none}
.hero .wrap.heroCards .heroCard>div{position:relative;min-width:0;padding:13px 12px;overflow:hidden}
.hero .wrap.heroCards .heroCard h3{font-size:15px;line-height:1.12;margin:0 22px 6px 0;padding:0;font-weight:800}
.hero .wrap.heroCards .heroCard p{font-size:10px;line-height:1.3;color:#b9cbd7;margin:0}
.hero .wrap.heroCards .arrow{position:absolute;float:none;top:9px;right:9px;width:22px;height:22px;line-height:19px;font-size:16px;border-radius:50%;margin:0}
.hero+.section{padding-top:38px}
@media(min-width:1500px){.hero h1{font-size:64px}}
@media(min-width:701px) and (max-width:1100px){
 .top .nav{gap:12px}.brand{min-width:205px}.menu{gap:9px;font-size:9px}
 .hero{height:590px;min-height:590px}.hero>.wrap:not(.heroCards){width:calc(100% - 48px);padding-top:42px;padding-bottom:180px}
 .hero h1{font-size:clamp(42px,5.3vw,56px);max-width:700px}
 .hero .wrap.heroCards{left:14px;right:14px;bottom:14px;gap:7px}
 .hero .wrap.heroCards .heroCard{grid-template-columns:35% 65%}.hero .wrap.heroCards .heroCard>div{padding:11px 9px}
 .hero .wrap.heroCards .heroCard h3{font-size:13px}.hero .wrap.heroCards .heroCard p{font-size:9px}
}
@media(max-width:700px){
 .top .nav{height:68px;min-height:68px}.brand{min-width:0;gap:8px}.brand img{width:46px;height:42px}.brand strong{font-size:15px}.brand small{font-size:6px;letter-spacing:.7px}
 .phone,.top .btn{display:none}.hero{height:auto;min-height:0;padding-bottom:0}
 .hero:before{background:linear-gradient(90deg,rgba(2,14,25,.90),rgba(3,18,30,.58)),url('hero-clean.jpg') 57% center/cover no-repeat}
 .hero>.wrap:not(.heroCards){width:auto;max-width:none;margin:0;padding:42px 18px 25px}
 .hero h1{font-size:clamp(34px,9vw,46px);line-height:.98;letter-spacing:-1px;max-width:560px}
 .heroLead{font-size:13px;max-width:420px}.hero .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
 .hero .fact{max-width:none}.hero .fact b{font-size:9px}.heroButtons{flex-wrap:wrap}.heroButtons .btn{flex:1;min-width:140px;padding:0 10px}
 .hero .wrap.heroCards{position:relative;left:auto;right:auto;bottom:auto;width:auto;height:auto;min-height:0;margin:0;padding:0 18px 18px;transform:none;grid-template-columns:1fr;gap:8px}
 .hero .wrap.heroCards .heroCard{height:105px;min-height:105px;max-height:105px;grid-template-columns:34% 66%}
 .hero .wrap.heroCards .heroCard img{height:103px;min-height:103px;max-height:103px}
 .hero .wrap.heroCards .heroCard>div{padding:12px}.hero .wrap.heroCards .heroCard h3{font-size:15px}.hero .wrap.heroCards .heroCard p{font-size:10px}
 .hero+.section{padding-top:44px}
}

/* Final alignment correction: keep hero copy on the same centered grid as catalog */
.hero>.wrap:first-child{
  box-sizing:border-box!important;
  width:min(1100px,calc(100% - 48px))!important;
  max-width:1100px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  position:relative;
  z-index:1;
}
.hero .wrap.heroCards{
  box-sizing:border-box!important;
  left:max(16px,calc((100% - 1500px)/2))!important;
  right:max(16px,calc((100% - 1500px)/2))!important;
}
@media(max-width:700px){
  .hero>.wrap:first-child{
    width:calc(100% - 36px)!important;
    max-width:none!important;
    margin-left:18px!important;
    margin-right:18px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .hero .wrap.heroCards{left:18px!important;right:18px!important}
}


/* Reference-grid correction v3: explicit centered hero composition */
@media(min-width:1101px){
  .hero{position:relative!important}
  .hero>.wrap:first-child{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:min(1000px,calc(100% - 48px))!important;
    max-width:1000px!important;
    margin:0!important;
    padding:40px 0 190px!important;
  }
  .hero .wrap.heroCards{
    left:50%!important;
    right:auto!important;
    width:min(1000px,calc(100% - 48px))!important;
    transform:translateX(-50%)!important;
    bottom:16px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
}
@media(min-width:701px) and (max-width:1100px){
  .hero>.wrap:first-child{
    position:relative!important;left:auto!important;transform:none!important;
    width:calc(100% - 48px)!important;max-width:none!important;
    margin:0 auto!important;padding:40px 0 190px!important;
  }
  .hero .wrap.heroCards{left:24px!important;right:24px!important;width:auto!important;transform:none!important}
}

/* Reference match v4 — use the intended centered text column, not viewport-edge alignment */
@media (min-width:1101px){
  .hero{height:620px!important;min-height:620px!important}
  .hero>.wrap:first-child{
    position:absolute!important;top:0!important;left:50%!important;right:auto!important;
    transform:translateX(-50%)!important;
    width:min(1000px,calc(100% - 48px))!important;max-width:1000px!important;
    margin:0!important;padding:40px 0 190px!important;box-sizing:border-box!important;
  }
  .hero>.wrap:first-child .eyebrow{margin-bottom:10px!important}
  .hero>.wrap:first-child h1{
    display:block!important;width:760px!important;max-width:100%!important;
    font-size:clamp(48px,3.8vw,58px)!important;line-height:.98!important;
    letter-spacing:-1.7px!important;white-space:normal!important;
    word-break:keep-all!important;overflow-wrap:normal!important;margin:0 0 12px!important;
  }
  .hero>.wrap:first-child .heroLead{max-width:500px!important}
  .hero .wrap.heroCards{
    left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:min(1000px,calc(100% - 48px))!important;max-width:1000px!important;
    bottom:16px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* Reference match v5: left-aligned hero copy + wide product cards */
@media (min-width:1101px){
  .hero{height:450px!important;min-height:450px!important;position:relative!important;overflow:hidden!important}
  .hero>.wrap:first-child{
    position:absolute!important;top:0!important;left:20px!important;right:auto!important;
    transform:none!important;width:540px!important;max-width:540px!important;
    margin:0!important;padding:36px 0 0!important;box-sizing:border-box!important;
  }
  .hero>.wrap:first-child .eyebrow{margin-bottom:12px!important}
  .hero>.wrap:first-child h1{
    width:540px!important;max-width:540px!important;font-size:clamp(48px,3.2vw,56px)!important;
    line-height:.91!important;letter-spacing:-1.4px!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;
    margin:0 0 14px!important;
  }
  .hero>.wrap:first-child .heroLead{max-width:390px!important}
  .hero .wrap.heroCards{
    position:absolute!important;left:15px!important;right:15px!important;
    width:auto!important;max-width:none!important;transform:none!important;
    bottom:10px!important;gap:8px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .hero .wrap.heroCards .heroCard{min-width:0!important;height:78px!important;min-height:78px!important}
}
@media (min-width:701px) and (max-width:1100px){
  .hero{height:480px!important;min-height:480px!important}
  .hero>.wrap:first-child{position:relative!important;left:auto!important;transform:none!important;width:calc(100% - 40px)!important;max-width:620px!important;margin:0 20px!important;padding:32px 0 145px!important}
  .hero>.wrap:first-child h1{font-size:clamp(42px,5vw,54px)!important;line-height:.94!important}
  .hero .wrap.heroCards{left:15px!important;right:15px!important;width:auto!important;transform:none!important;bottom:10px!important}
}