.services{ padding:0 0 160px; }

.services__title{
  color:var(--dark-green);
  font-size:44px;
  font-weight:700;
  line-height:52px;
  margin-bottom:48px;
}
.services__title .accent{ color:var(--green); }

.services__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.service-card{
  display:block;
  aspect-ratio:312 / 280;
  perspective:1200px;
}
.service-card__inner{
  display:block;
  position:relative;
  width:100%; height:100%;
  transition:transform .55s ease;
  transform-style:preserve-3d;
}
.service-card:hover .service-card__inner,
.service-card:focus-within .service-card__inner{ transform:rotateY(180deg); }

.service-card__front,
.service-card__back{
  position:absolute; inset:0;
  border-radius:12px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.service-card__front{
  background:#c9d2ba center/cover no-repeat;
  background-image:var(--img,none);
}
.service-card__overlay{
  position:absolute; left:0; right:0; bottom:0;
  height:103px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.service-card__row{
  position:absolute; left:24px; right:24px; bottom:24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.service-card__name{ font-size:18px; font-weight:600; color:#343434; }

/* Задній (зелений) бік — контент унизу, як на фронті */
.service-card__back{
  background:var(--green);
  color:#fff;
  transform:rotateY(180deg);
  display:flex; flex-direction:column; justify-content:flex-end; gap:16px;
  padding:24px;
}
.service-card__back-text{ display:flex; flex-direction:column; gap:8px; }
.service-card__title{ font-size:18px; font-weight:600; }
.service-card__desc{ font-size:12px; font-weight:400; line-height:16px; }
.service-card__more{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:14px; font-weight:400;
}

/* Стрілка: темна на фронті, біла на звороті */
.service-card__arrow{ width:28px; height:28px; flex:none; display:block; color:#343434; }
.service-card__arrow svg{ width:100%; height:100%; display:block; }
.service-card__back .service-card__arrow{ color:#fff; }
/* Сторінка «Усі послуги» (архів) */
.services-archive{ padding:48px 0 100px; }
.services-archive__title{ margin:48px 0 60px; font-size:48px; font-weight:700; color:var(--dark-green); }
.services__grid--archive{ grid-template-columns:repeat(3,1fr); }
.services__grid--archive .service-card{ aspect-ratio:424 / 303; }