/* Service Page Styles - SnelleOplossingHotel */

.hero-service {
  background: linear-gradient(135deg, rgba(26,77,122,0.06), rgba(201,169,97,0.06));
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy .lead {
  color: var(--color-text-light);
  max-width: 60ch;
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-media img {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 992px) {
  .hero-inner { grid-template-columns: 1.1fr 1fr; }
}

.bg-alt { background-color: var(--color-background-alt); }

.summary { cursor: pointer; font-weight: var(--font-weight-medium); }

.guarantee-card {
  border-left: 4px solid var(--color-secondary);
}

.cta-banner {
  background: radial-gradient(1200px 300px at 50% 0, rgba(201,169,97,0.12), transparent),
              linear-gradient(180deg, rgba(26,77,122,0.06), transparent);
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.revealed { opacity: 1; transform: translateY(0); }