/* ==== Цвет бренда — такой же, как на FAQ ==== */
:root{
  --vtm-brand: #7be3d3; /* при необходимости замени на точный HEX */
  --font-heading: var(--font-heading, Georgia, serif);
  --font-body: var(--font-body, Arial, sans-serif);
}

/* ==== FULL-BLEED ПОЛОСА ХЕДЕРА (как на FAQ) ==== */
.vtm-services .page-head{
  background: var(--vtm-brand);
  color:#0a0a0a;
  text-align:center;
  margin-inline: calc(50% - 50vw);
  width:100vw;
  padding:3rem 1rem 2.5rem;
  margin-bottom:2.5rem;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.vtm-services .page-head h1{
  margin:0;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:clamp(2rem,4vw,2.6rem);
  letter-spacing:.2px;
}
.vtm-services .page-head p{
  margin:.6rem auto 0;
  max-width:760px;
  font-size:1.1rem;
  color:rgba(0,0,0,.75);
  line-height:1.6;
}

/* ==== Контейнер ==== */
.vtm-services .container{
  max-width:1100px;
  margin:0 auto;
  padding:0 1.5rem;
  font-family:var(--font-body);
  line-height:1.6;
}

/* ==== Сетка 2×2 с фото сверху ==== */
.services-grid--2x2{
  display:grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr)); /* две колонки */
  gap:1.25rem 1.25rem;
  align-items:start;
}

/* Мобильная адаптация */
@media (max-width: 820px){
  .services-grid--2x2{
    grid-template-columns:1fr; /* в одну колонку на узких экранах */
    gap:1rem;
  }
}

/* ==== Карточка услуги ==== */
.vtm-services .service{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;
  overflow:hidden; /* чтобы скругление работало и для фото сверху */
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.vtm-services .service:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 12px rgba(0,0,0,.08);
  border-color:color-mix(in srgb, var(--vtm-brand) 20%, #e7e7e7);
}

/* Фото сверху у каждой колонки */
.vtm-services .service-media{
  margin:0;
  position:relative;
  /* соотношение сторон */
  aspect-ratio: 16 / 9;
  background:#f3f3f5;
  border-bottom:1px solid #eee;
}
.vtm-services .service-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Тело карточки */
.vtm-services .service-body{
  padding:1rem 1.1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.vtm-services .service-body h3{
  margin:0;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:.2px;
}
.vtm-services .service-body p{
  margin:0;
  font-size:.95rem;
  color:#555;
}

/* Небольшие мобильные отступы */
@media (max-width:640px){
  .vtm-services .page-head{ padding:2.2rem 1rem 2rem; margin-bottom:2rem; }
  .vtm-services .container{ padding:0 1.25rem; }
}

/* ==== CTA Button ==== */
.services-cta {
  text-align: center;
  margin-top: 2.5rem;
}

.btn-request-audition {
  display: inline-block;
  background: var(--vtm-brand);
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-request-audition:hover {
  background: color-mix(in srgb, var(--vtm-brand) 85%, #000);
  transform: translateY(-2px);
}