/* ==========================================================================
   COMPONENT — What We Do (services)
   Markup:  components/services.html   (section.services)
   Anchor:  #services
   Note:    .section-head is the "title left / copy right" heading row used
            by this section only — it belongs to this component.
   ========================================================================== */

.services{
  padding:110px 0 125px;
  background:var(--mint);
}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end;
  margin-bottom:45px;
}
.section-head .section-title{margin-top:15px}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.service-card{
  min-height:390px;
  background:#fff;
  border:1px solid #e1ebe6;
  border-radius:20px;
  padding:26px;
  display:flex;
  flex-direction:column;
  transition:.35s ease;
  position:relative;
  overflow:hidden;
}
.service-card::after{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-60px;top:-60px;
  border:1px solid rgba(8,127,99,.13);
  border-radius:50%;
  transition:.35s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
  border-color:#cfe2d8;
}
.service-card:hover::after{transform:scale(1.6)}
.service-no{
  font-family:"Manrope",sans-serif;
  font-size:18px;
  font-weight:800;
  color:var(--green);
}
/* Service icon — the supplied artwork /icons/*.png is the icon itself, so there
   is no chip behind it. Each file is cropped tight to its artwork and fitted by
   HEIGHT (width follows the artwork), so all four icons read the same size even
   though "people" is wider than tall — it simply uses more width. */
.service-icon{
  width:48px;height:48px;
  margin:20px 0;
}
.service-icon img{
  height:100%;
  width:auto;
  max-width:none;
}
.service-card h3{
  font-family:"Manrope",sans-serif;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.service-card p{
  color:var(--muted);
  font-size:14px;
  margin-top:14px;
}
.service-link{
  margin-top:auto;
  padding-top:24px;
  color:var(--green);
  font-size:13px;
  font-weight:700;
}

/* ---------- Responsive ---------- */

@media(max-width:1050px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:800px){
  .section-head{display:block}
  .section-head .section-copy{margin-top:20px}
  .services{padding:90px 0}
}

@media(max-width:560px){
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:330px}
}