.hero__bgg{
  position:absolute;
  inset:0;
  background:
    url("services.jpg")
    center/cover no-repeat;
  transform: scale(1.02);

  /* 🔧 balanced cinematic brightness */
  filter: brightness(1.15) contrast(1.05) saturate(.95);
}

/*** Section 1***/

/* =========================
   SERVICE NARRATIVE SECTION
========================= */
.serviceNarrative{
  background: #f6f6f6; /* same light tone as screenshot */
  padding: clamp(80px, 10vw, 140px) 0;
}

.serviceNarrative__wrap{
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.side-service{
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 600;
  color: #FFFFFFC7;
  margin-bottom: 30px;
}
/* Kicker */
.serviceNarrative__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 600;
  color: rgba(0,0,0,.6);
  margin-bottom: clamp(28px, 4vw, 48px);
}



/* Main paragraph (big, strong) */
.serviceNarrative__lead{
  margin: 0 0 clamp(32px, 4vw, 48px);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #101214;
}

/* Supporting paragraph */
.serviceNarrative__sub{
  margin: 0;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,.75);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .serviceNarrative__content{
    max-width: 100%;
  }
}

@media (max-width: 520px){
  .serviceNarrative{
    padding: 64px 0;
  }

  .serviceNarrative__lead{
    font-size: 24px;
    line-height: 1.35;
  }

  .serviceNarrative__sub{
    font-size: 18px;
  }
}


/* STICKY STACK */
.cases__wrap{
  position: relative;
  overflow: visible;
}

/* each card sticky */
.cases__card{
  position: sticky;
  top: 110px;                 /* adjust if needed */
  min-height: 680px;
  margin-bottom: 90px;        /* space so next card can overtake */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.12);
  background: #e9e9e9;
  will-change: transform;
}

/* IMPORTANT: works even if last card */
.cases__card{ z-index: 1; }
.cases__card + .cases__card{ z-index: 2; }
.cases__card + .cases__card + .cases__card{ z-index: 3; }
.cases__card + .cases__card + .cases__card + .cases__card{ z-index: 4; }

/* if you may add more later, just copy one more line per card */
/* show stacked edges behind (nice depth) */
.cases__card{
  border-radius: 0px;
}

/* each next card sits a little lower (peek effect) */
.cases__card:nth-of-type(1){ top: 110px; }
.cases__card:nth-of-type(2){ top: 125px; }
.cases__card:nth-of-type(3){ top: 140px; }
.cases__card:nth-of-type(4){ top: 155px; }