/* Services Page Styles */

.page-hero{
  position: relative;
  min-height: clamp(360px, 48vh, 520px);
  display: grid; place-items: end start;
  color: #fff;
  background: radial-gradient(1200px 600px at 70% 0%, rgba(0,0,0,0.25), transparent),
              linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.10)),
              var(--hero-bg, none) center/cover no-repeat;
}
.page-hero .hero-overlay{ position:absolute; inset:0; backdrop-filter: saturate(1.05) blur(0.5px); }
.page-hero .container{ position: relative; padding: clamp(48px, 8vh, 96px) clamp(32px, 6vw, 72px); }
.page-title{ font-size: clamp(28px, 6vw, 56px); line-height: 1.05; margin: 0 0 8px; }
.page-subtitle{ font-size: clamp(16px, 2.6vw, 20px); opacity: 0.92; margin: 0; }

.section{ padding: clamp(40px, 8vh, 72px) 0; }
.container{ max-width: 1600px; margin: 0 auto; padding: 0 clamp(32px, 6vw, 72px); }

.cards-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.service-card{
  grid-column: span 12;
  display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; color: inherit; text-decoration: none;
  background: #fff; border: 1px solid rgba(0,0,0,0.06);
}
.card-media{ width: 100%; height: clamp(200px, 30vh, 320px); object-fit: cover; display: block; }
.card-body{ padding: 16px 16px 18px; }
.card-title{ font-size: 20px; margin: 0 0 6px; color: #111; }
.card-text{ font-size: 14px; color: #394041; opacity: 0.9; margin: 0; }

@media (min-width: 680px){
  .service-card{ grid-column: span 6; }
}
@media (min-width: 1024px){
  .service-card{ grid-column: span 4; }
}

/* CTA */
.cta-row{ background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0)); }
.cta-block{ border:1px solid rgba(0,0,0,0.06); border-radius:16px; padding: clamp(24px, 5vw, 40px); background: rgba(255,255,255,0.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; }
.cta-title{ margin:0 0 8px; font-size: clamp(22px, 4.4vw, 36px); }
.cta-text{ margin:0 0 16px; color:#394041; }