/* MS Monitors V41.2 — Premium homepage polish
   Restricted to homepage hero, services and supporting sections. */

/* Cleaner rhythm between the hero and the service area */
.hero{
  padding-top:72px!important;
  padding-bottom:68px!important;
}
.hero-grid{gap:48px!important;}
.hero-copy h1{
  margin-bottom:18px!important;
  letter-spacing:-1px!important;
}
.hero-copy p{
  max-width:650px!important;
  margin-bottom:22px!important;
}
.hero-actions{margin:22px 0!important;}
.hero-media-card{
  border:1px solid rgba(203,226,240,.82)!important;
  box-shadow:0 24px 58px rgba(15,23,42,.10)!important;
}

/* Compact premium stats ribbon */
.stats-panel{margin-top:-28px!important;}
.stats-grid{
  border-radius:22px!important;
  box-shadow:0 20px 48px rgba(0,150,136,.17)!important;
}
.stat{padding:22px 14px!important;}
.stat i{font-size:27px!important;}
.stat strong{font-size:27px!important;line-height:1.3!important;}
.stat span{font-size:14px!important;}

/* Main service section */
#services.section{padding-top:82px!important;padding-bottom:84px!important;}
#services .section-head{margin-bottom:38px!important;}
#services .section-head h2{max-width:920px!important;margin-inline:auto!important;}
#services .section-desc{max-width:790px!important;}
#services .services-grid{
  gap:22px!important;
  align-items:stretch!important;
}
#services .service-card{
  min-height:410px!important;
  padding:0 20px 20px!important;
  border-radius:24px!important;
  overflow:hidden!important;
  border:1px solid #dfebf4!important;
  box-shadow:0 16px 42px rgba(15,23,42,.075)!important;
  background:#fff!important;
  transform:translateZ(0);
}
#services .service-card:hover{
  transform:translateY(-7px)!important;
  border-color:rgba(0,150,136,.42)!important;
  box-shadow:0 25px 58px rgba(15,23,42,.12)!important;
}
#services .service-img{
  width:calc(100% + 40px)!important;
  height:218px!important;
  min-height:218px!important;
  margin:0 -20px 16px!important;
  padding:10px 12px 0!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f7fbfe 100%)!important;
  border-bottom:1px solid #edf3f7!important;
  overflow:hidden!important;
}
#services .service-img img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  border-radius:0!important;
  transition:transform .32s ease!important;
}
#services .service-card:hover .service-img img{transform:scale(1.035)!important;}
#services .service-card h3{
  font-size:22px!important;
  line-height:1.4!important;
  margin:2px 0 8px!important;
}
#services .service-card p{
  font-size:15px!important;
  line-height:1.85!important;
  max-width:92%!important;
  margin-inline:auto!important;
}
#services .service-card span{
  margin-top:14px!important;
  padding-top:10px!important;
  font-size:15px!important;
}

/* The CCTV card is the visual reference card */
#services .service-card[href="/cctv"]{
  border-color:rgba(0,150,136,.42)!important;
  box-shadow:0 20px 48px rgba(0,150,136,.105)!important;
}
#services .service-card[href="/cctv"] .service-img{
  background:linear-gradient(180deg,#f9fdff 0%,#f1fbfc 100%)!important;
}

/* Supporting content should feel consistent, not heavy */
.section.alt{background:#f7fbfe!important;}
.panel,.feature,.article-card,.solution-card{
  border-color:#e2edf5!important;
  box-shadow:0 13px 36px rgba(15,23,42,.065)!important;
}
.panel:hover,.feature:hover,.article-card:hover,.solution-card:hover{
  border-color:#c8e7e5!important;
}
.feature,.solution-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important;}
.feature:hover,.solution-card:hover{transform:translateY(-5px)!important;box-shadow:0 20px 46px rgba(15,23,42,.095)!important;}

/* Stronger, cleaner CTA */
.cta{padding:76px 0!important;}
.cta-card{
  border-radius:30px!important;
  padding:40px!important;
  border-color:#dcecf4!important;
  box-shadow:0 24px 58px rgba(15,23,42,.09)!important;
}

@media (max-width:1100px){
  #services .service-card{min-height:390px!important;}
  #services .service-img{height:205px!important;min-height:205px!important;}
}

@media (max-width:700px){
  .hero{padding-top:44px!important;padding-bottom:44px!important;}
  #services.section{padding-top:58px!important;padding-bottom:60px!important;}
  #services .services-grid{gap:16px!important;}
  #services .service-card{min-height:auto!important;padding:0 18px 18px!important;border-radius:21px!important;}
  #services .service-img{
    width:calc(100% + 36px)!important;
    margin:0 -18px 14px!important;
    height:190px!important;
    min-height:190px!important;
    padding:8px 10px 0!important;
  }
  #services .service-card h3{font-size:20px!important;}
  #services .service-card p{max-width:100%!important;}
  .cta-card{padding:24px!important;border-radius:23px!important;}
}