/* Service titles sit outside the photography, matching the light title-highlight typography. */
.service-showcase .service-experience,
.service-showcase .service-experience:not(.service-experience-main) {
  position:relative;
  display:block;
  height:auto;
  min-height:0;
  overflow:hidden;
  border-radius:26px;
  background:#11110f;
  color:#FFFFFF;
  text-decoration:none;
  box-shadow:0 18px 55px rgba(18,17,14,.09);
}

.service-showcase .service-experience::after { display:none; }

.service-image {
  position:relative;
  isolation:isolate;
  width:100%;
  height:clamp(440px,52svh,520px);
  overflow:hidden;
  border-radius:inherit;
  background:#11110f;
  box-shadow:0 18px 55px rgba(18,17,14,.09);
}

.service-image::after {
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(0deg,rgba(7,7,6,.88) 0%,rgba(7,7,6,.16) 62%,rgba(7,7,6,.08));
  content:"";
  pointer-events:none;
}

.service-image > img {
  position:absolute;
  z-index:-2;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  transition:transform 260ms cubic-bezier(.23,1,.32,1),filter 220ms ease;
}

.service-showcase .service-content,
.service-showcase .service-experience-main .service-content {
  position:absolute;
  z-index:2;
  right:auto;
  bottom:26px;
  left:28px;
  max-width:calc(100% - 56px);
  padding:0;
}

.service-showcase .service-experience:not(.service-experience-main) .service-content h3,
.service-showcase .service-experience.service-experience-main .service-content h3 {
  margin:0;
  color:#FFFFFF;
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
  font-size:clamp(22px,2.25vw,32px);
  font-weight:300;
  letter-spacing:-.035em;
  line-height:.95;
}

.service-showcase .service-experience:focus-visible {
  outline:0;
}

.service-showcase .service-experience:focus-visible .service-image {
  outline:3px solid #FFC107;
  outline-offset:5px;
}

@media (hover:hover) and (pointer:fine) {
  .service-showcase .service-experience:hover .service-image > img {
    transform:scale(1.025);
    filter:saturate(1.04);
  }
}

@media (max-width:540px) {
  .service-image {
    height:430px;
    border-radius:22px;
  }

  .service-showcase .service-content,
  .service-showcase .service-experience-main .service-content {
    right:auto;
    bottom:20px;
    left:20px;
    padding:0;
  }

  .service-showcase .service-experience:not(.service-experience-main) .service-content h3,
  .service-showcase .service-experience.service-experience-main .service-content h3 {
    font-size:23px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .service-image > img { transition-duration:0ms; }
}