/* ══════════════════════════════════════════════════════
   SERVICES PAGE — page-specific styles
   Shared tokens live in main.css
══════════════════════════════════════════════════════ */

/* ── Page hero shell (all page-templates/* shared `page-hero` block) ─ */
#services-hero,
#news-events-hero,
#about-hero,
#contact-hero,
#branches-hero {
  min-height: clamp(320px, 45vw, 435px);
  padding-top: 100px; /* clear fixed navbar */
}

.services-hero-bg img {
  object-position: center 40%;
}

/* Blue gradient from right, dark tint over full image — matches Figma */
.services-hero-overlay {
  background:
    linear-gradient(270deg, rgba(4, 113, 168, 0.9) 35%, rgba(4, 113, 168, 0) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.services-hero-text {
  max-width: clamp(300px, 50vw, 620px);
  padding-bottom: 3rem;
}

.services-hero-title   { font-size: clamp(1.4rem, 3.5vw, 2.2rem); line-height: 1.4; }
.services-hero-subtitle { font-size: clamp(.9rem, 2vw, 1.1rem); line-height: 1.7; }

/* ── Service cards ──────────────────────────────────── */
.service-card {
  background: #fff;
  border-radius: clamp(20px, 4vw, 40px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative teal ellipse glow — matches Figma background blobs */
.service-card::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 144, 178, .07) 0%, transparent 70%);
  pointer-events: none;
}

/* Alternate glow position for even cards */
.service-card:nth-child(odd)::before  { top: -120px; left: -120px; }
.service-card:nth-child(even)::before { bottom: -120px; right: -120px; }

.service-card-img {
  border-radius: 40px 20px 40px 20px; /* tl tr br bl — matches Figma asymmetric radius */
  height: clamp(200px, 28vw, 300px);
  object-fit: cover;
}

.service-card-title {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  color: #313131;
}

/* ── Service bullet list ────────────────────────────── */
.service-list li i {
  font-size: .9rem;
  line-height: 1.6;
}

/* ── CTA Banner ─────────────────────────────────────── */
.services-cta-banner {
  position: relative;
  overflow: hidden;
  border: .8px solid rgba(0, 176, 255, .3);
  border-radius: 100px 24px 24px 24px;
  padding: clamp(2.5rem, 6vw, 4rem) 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.services-cta-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-cta-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 165, 202, .85) 0%, rgba(1, 106, 163, .85) 100%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.services-cta-content {
  max-width: 700px;
  z-index: 1;
}

.services-cta-title   { font-size: clamp(1.2rem, 3vw, 1.8rem); }
.services-cta-subtitle { font-size: clamp(.9rem, 2vw, 1.1rem); }