/* ===== SERVICES PAGE ===== */
.services-page { background: var(--bg-white); }

/* In-page anchors (from nav dropdown) clear fixed header */
.services-main .service-card { scroll-margin-top: var(--header-height); }
@media (max-width: 900px) {
  .services-main .service-card { scroll-margin-top: var(--header-height-mobile); }
}

/* 1. Hero — same gradient as home; wider text, shorter height */
.services-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
}
.services-hero-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/hero.jpg') no-repeat center;
  background-size: cover;
}
.services-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 31, 46, 0.88) 0%,
    rgba(26, 31, 46, 0.60) 50%,
    rgba(26, 31, 46, 0.40) 100%
  );
}
.services-hero .container { position: relative; z-index: 1; }
.services-hero-content { max-width: 920px; }
.services-hero-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: var(--space-xs);
}
.services-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}
.services-hero-intro {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}
.services-hero-intro a {
  color: var(--cta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.services-hero-intro a:hover { color: #fff; }
.services-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-md);
}
.btn--services-cta {
  background: var(--cta);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}
.btn--services-cta:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
}
.btn--services-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--services-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* 3. Why Choose Seven Stones */
.services-why-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-lg);
}
.services-why-header .section-title--light { color: var(--text-dark); }
.services-why-header .section-intro--light { color: var(--text-muted); }
.services-why-header .section-intro--light a {
  color: var(--cta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.services-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: var(--space-sm);
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.services-why-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}
.services-why-list li::before {
  content: '✓';
  color: var(--cta);
  font-weight: 700;
  flex-shrink: 0;
}

/* 4. Service area teaser */
.services-areas-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.services-areas-header .section-intro { margin-top: var(--space-sm); }
.services-areas-header .section-intro a {
  color: var(--cta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nav current (Services link active) */
.services-page .nav-links a[href*="services"],
.services-page .nav-mobile a[href*="services"] {
  color: var(--cta);
  font-weight: 600;
}
.services-page .nav-links a[href*="services"].nav-dropdown-trigger {
  border-bottom: 2px solid var(--cta);
  padding-bottom: 2px;
}