/* ==========================================================================
   Services page (elementor-1259)
   Depends on main.css for tokens, header, footer, buttons and .final-cta.
   ========================================================================== */

/* ---------- Page hero (3021ff5f / 6ebf64e9) ---------- */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  background-image: url('../img/svc-hero.jpg');
  background-position: center;
  background-size: cover;
  border-radius: 15px;
}
/* Gradient sits at z-index 0 with the copy at 1 — a negative z-index here
   would paint behind .page-hero's own background-image and vanish. */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--e-global-color-secondary) 0%, rgba(255, 255, 255, 0) 78%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero__title {
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2em;
  color: #fff;
  text-wrap: balance;
}

.page-shell {
  background: #fff;
  border-radius: var(--radius-hero);
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  padding: 0 32px 8px;
}
@media (max-width: 767px) { .page-shell { padding: 0 16px 6px; } }

/* ---------- Card grid (6175ac1e) ---------- */
.svc-grid-section { padding: 1.5em 0 4em; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: #f6fafe;          /* --e-global-color-0f01f5c */
  border: 1px solid var(--e-global-color-border);
  border-radius: 10px;
  padding: 11px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.svc-card:hover { background: #f6fafe; border-color: var(--e-global-color-header-border); }

/* The media zooms in on hover (elementor-bg-transform-zoom-in, 1500ms).
   Height is fixed so cards stay level regardless of source aspect ratio —
   the source images range from square to 3:4 portrait. */
.svc-card__media {
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--e-global-color-tint);
}
.svc-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1500ms ease;
}
.svc-card:hover .svc-card__media img { transform: scale(1.08); }

.svc-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 18px 16px 14px;
}
.svc-card__title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: -0.5px;
  color: var(--e-global-color-primary);
}
.svc-card__text {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8em;
  color: var(--e-global-color-accent);
  text-wrap: pretty;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .page-hero { min-height: 35vh; }
  .page-hero__title { font-size: 32px; }
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-card__title { font-size: 19px; }
}