/* HERO med Unsplash-bakgrund */
.services-hero{
  position: relative;
  isolation: isolate;
  padding: clamp(50px, 9vw, 130px) 0 clamp(30px, 5vw, 60px);
  color:#fff;
  text-align:center;
}
.services-hero::before{
  content:"";
  position:absolute; inset:0;
  /* Unsplash: stilren barbershop-stämning */
  background:url('https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1474') center/cover no-repeat;
  filter:contrast(1.04) saturate(.96) brightness(.75);
  z-index:-2;
}
.services-hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 70% -10%, rgba(255,255,255,.16), transparent 65%),
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.84) 78%);
  z-index:-1;
}
.hero-title{ font-size: clamp(30px, 5vw, 54px); margin: 0 0 6px; }
.hero-sub{ color:#cfd6de; margin:0 0 14px; }
.hero-cta{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.hide-sm{ display:none; }
@media (min-width:700px){ .hide-sm{ display:inline; } }

/* Sektioner */
.section-head{ margin: 28px 0 10px; }
.section-head h2{ font-size: clamp(22px, 3.2vw, 30px); margin: 0 0 6px; }
.section-head p{ color: var(--muted, #a7adb6); margin:0; }

/* Tjänstekort (utan bild) */
.service-list{ display:grid; gap:14px; }
.service-card{
  background:#12161c;
  border:1px solid #1d2026;
  border-radius:16px;
  padding:16px;
  color:#e8edf3;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.36);
}
.service-card h3{ margin:0 0 6px; }
.service-card .meta{ color:#a5acb4; font-size:.95rem; margin:0 0 6px; }
.service-card p{ margin:0 0 8px; }
.service-card .btn{ margin-top:4px; }

/* Stor CTA */
.big-cta{
  margin: 30px 0 12px;
  text-align:center;
  background: linear-gradient(180deg, #12161c, #15191f);
  border:1px solid #1d2026;
  border-radius:16px;
  padding:28px 18px;
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.big-cta h3{ margin:0 0 6px; font-size: clamp(20px, 3vw, 28px); }
.big-cta p{ margin:0 0 10px; color:#cfd6de; }

/* Knapp-varianter */
.btn-lg{ padding:.9rem 1.25rem; border-radius:12px; font-weight:700; }
.btn-ghost{ background:transparent; color:#e7ecf2; border:1px solid rgba(255,255,255,.28); }
.btn-ghost:hover{ border-color: rgba(255,255,255,.5); }