/* =========================================================
   OUR SERVICES — HERO
   - Full-width background image
   - White overlay 80%
   - Left aligned content like screenshot
   ========================================================= */

.services-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f7f7f7;

  /* background image */
  background-image: url("https://dealerglassandcalibrations.com/wp-content/uploads/2026/01/BANNER-FOR-WEBSITE-DEALER-AND-CALIBRATIONS.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Height similar to screenshot */
  min-height: clamp(260px, 26vw, 440px);

  display: flex;
  align-items: center;
}

/* ✅ 80% white overlay */
.services-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.80);
  pointer-events:none;
  z-index: 0;
}

.services-hero .container{
  position: relative;
  z-index: 1;
}

/* Content column */
.services-hero__content{
  max-width: 720px;
  padding: var(--space-xl) 0;
}

/* Headline style similar to screenshot */
.services-hero__title{
  color: var(--gc-dark-blue);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-xs);
}

/* Paragraph */
.services-hero__desc{
  margin: 0;
  max-width: 620px;
  color: var(--gc-muted);
  line-height: 1.55;
}

/* =========================================================
   Responsive tweaks
   ========================================================= */

@media (max-width: 900px){
  .services-hero__content{
    max-width: 640px;
    padding: var(--space-lg) 0;
  }
}

@media (max-width: 640px){
  .services-hero{
    min-height: 260px;
    background-position: center right; /* keep subject visible */
  }

  .services-hero__content{
    max-width: 100%;
    padding: var(--space-lg) 0;
  }

  .services-hero__desc{
    max-width: 100%;
  }
}