/* ENVIRO IMPACT V3.5: unified, accessible premium service cards on homepages only. */
.service-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.service-grid > .service-card{
  grid-column:span 2;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-width:0;
  min-height:304px;
  padding:32px;
  border:1px solid #dbece7;
  border-radius:21px;
  color:#123235;
  background:linear-gradient(150deg,#ffffff 0%,#ffffff 65%,#f7fcfa 100%);
  box-shadow:0 2px 3px rgba(12,50,49,.015),0 11px 35px rgba(10,55,51,.045);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
/* An identical accent treatment on all five cards: no single dark featured tile. */
.service-grid > .service-card::before{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:26px;
  height:3px;
  border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,#13a78d,#80e9c6);
  opacity:.58;
  transform:scaleX(.34);
  transform-origin:100% 50%;
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;
}
.service-grid > .service-card::after{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  background:radial-gradient(circle at 15% 5%,rgba(115,225,192,.12),transparent 46%);
  opacity:.38;
  transition:opacity .3s ease;
  z-index:-1;
  pointer-events:none;
}
.service-grid > .service-card:nth-child(n+4){
  grid-column:span 3;
  min-height:270px;
}
.service-grid > .service-card .service-no{color:#6d9791;font-weight:750;}
.service-grid > .service-card .service-icon{
  color:#117e73;
  background:linear-gradient(140deg,#e8f9f3,#e9f6f2);
  border:1px solid #d5eee4;
  border-radius:15px;
  box-shadow:0 4px 12px rgba(8,107,87,.045);
  transition:background .3s ease,transform .3s ease,color .3s ease;
}
.service-grid > .service-card h3{color:#103236;letter-spacing:-.018em;}
.service-grid > .service-card p{color:#587274;line-height:1.95;}
.service-grid > .service-card .card-link{color:#087b6b;margin-top:auto;}
.service-grid > .service-card .card-link svg{transition:transform .3s ease;}
.service-grid > .service-card:is(:hover,:focus-visible){
  border-color:#7cccb8;
  background:linear-gradient(145deg,#fff 0%,#f3fcf8 100%);
  box-shadow:0 18px 45px rgba(13,78,68,.11),0 1px 0 rgba(255,255,255,.75) inset;
}
.service-grid > .service-card:is(:hover,:focus-visible)::before{opacity:1;transform:scaleX(1);}
.service-grid > .service-card:is(:hover,:focus-visible)::after{opacity:.78;}
.service-grid > .service-card:is(:hover,:focus-visible) .service-icon{background:#dff8ee;transform:translateY(-2px);}
.service-grid > .service-card:is(:hover,:focus-visible) .card-link svg{transform:translateX(-3px);}
html[dir="ltr"] .service-grid > .service-card:is(:hover,:focus-visible) .card-link svg{transform:translateX(3px);}
.service-grid > .service-card:focus-visible{outline:3px solid #0b947b;outline-offset:4px;}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .service-grid > .service-card:hover{transform:translateY(-5px);}
}
@media (max-width:1030px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;}
  .service-grid > .service-card,
  .service-grid > .service-card:nth-child(n+4){grid-column:auto;min-height:270px;padding:27px;}
  .service-grid > .service-card:last-child:nth-child(odd){grid-column:1/-1;width:calc((100% - 17px)/2);justify-self:center;}
}
@media (max-width:680px){
  .service-grid{grid-template-columns:minmax(0,1fr);gap:14px;}
  .service-grid > .service-card,
  .service-grid > .service-card:nth-child(n+4),
  .service-grid > .service-card:last-child:nth-child(odd){grid-column:1/-1;width:100%;justify-self:stretch;min-height:235px;padding:23px 22px;border-radius:17px;}
  .service-grid > .service-card::before{inset-inline:22px;}
  .service-grid > .service-card .service-icon{margin:15px 0 12px;width:49px;height:49px;}
  .service-grid > .service-card h3{font-size:17px;line-height:1.55;}
  .service-grid > .service-card p{font-size:12px;line-height:1.85;margin-bottom:17px;}
  .service-grid > .service-card:is(:hover,:focus-visible){transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .service-grid > .service-card,
  .service-grid > .service-card::before,
  .service-grid > .service-card::after,
  .service-grid > .service-card .service-icon,
  .service-grid > .service-card .card-link svg{transition:none!important;transform:none!important;}
}