/* Revision 88: approved service-support imagery, managed galleries and final visual polish. */

.service-page-hero {
  position: relative;
  overflow: hidden;
  background: #f3f3f1;
}
.service-page-hero::after {
  position: absolute;
  right: -11vw;
  bottom: -25vw;
  width: 42vw;
  height: 42vw;
  min-width: 420px;
  min-height: 420px;
  content: "";
  border: 1px solid rgba(232, 53, 37, .12);
  border-radius: 50%;
  pointer-events: none;
}
.service-page-hero-grid { position: relative; z-index: 1; }
.service-page-hero-copy .eyebrow { display: inline-block; margin-bottom: 20px; }
.service-page-hero-media {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 28px 62px rgba(26, 27, 29, .15);
}
.service-page-hero-media::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 1px solid rgba(255, 255, 255, .3);
  pointer-events: none;
}
.service-page-hero-media img { transition: transform .7s cubic-bezier(.2, .65, .3, 1); }
.service-page-hero-media:hover img { transform: scale(1.025); }

.service-page-content { padding-bottom: 118px; }
.service-page-card { position: relative; overflow: hidden; background: #fff; }
.service-page-card::after {
  position: absolute;
  right: -24px;
  bottom: -44px;
  width: 100px;
  height: 100px;
  content: "";
  border: 1px solid rgba(232, 53, 37, .1);
  border-radius: 50%;
}

.service-page-gallery { padding: 112px 0 128px; background: #f2f2f0; }
.service-page-gallery-heading { max-width: 760px; }
.service-page-gallery-heading .eyebrow { display: inline-block; margin-bottom: 15px; }
.service-page-gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(260px, .78fr);
  grid-template-rows: repeat(2, minmax(230px, 1fr));
  gap: 18px;
}
.service-page-gallery-item {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #d9d9d7;
  border-radius: 4px;
}
.service-page-gallery-item.is-primary { grid-row: 1 / span 2; min-height: 560px; }
.service-page-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2, .65, .3, 1);
}
.service-page-gallery-item:hover img { transform: scale(1.035); }
.service-page-gallery-item::after {
  position: absolute;
  inset: 40% 0 0;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(9, 12, 14, .72));
  pointer-events: none;
}
.service-page-gallery-item figcaption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 21px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
.service-page-gallery-item figcaption span {
  color: #ff6a60;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.service-page-cta { padding: 78px 0; color: #fff; background: #222629; }
.service-page-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
}
.service-page-cta .eyebrow { color: rgba(255, 255, 255, .54); }
.service-page-cta h2 { margin: 12px 0 10px; color: #fff; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.24; }
.service-page-cta p { max-width: 760px; margin: 0; color: rgba(255, 255, 255, .68); }
.service-page-cta .button { min-width: 184px; justify-content: center; white-space: nowrap; }

@media (max-width: 1000px) {
  .service-page-gallery-grid { grid-template-rows: repeat(2, minmax(200px, 1fr)); }
  .service-page-gallery-item.is-primary { min-height: 470px; }
  .service-page-cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .service-page-cta .button { width: fit-content; }
}

@media (max-width: 760px) {
  .service-page-hero::after { display: none; }
  .service-page-hero-media { box-shadow: 0 18px 38px rgba(26, 27, 29, .12); }
  .service-page-hero-media:hover img,
  .service-page-gallery-item:hover img { transform: none; }
  .service-page-content { padding-bottom: 78px; }
  .service-page-gallery { padding: 74px 0 82px; }
  .service-page-gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
  .service-page-gallery-item,
  .service-page-gallery-item.is-primary { min-height: 0; aspect-ratio: 4 / 3; grid-row: auto; }
  .service-page-gallery-item.is-primary { aspect-ratio: 16 / 10; }
  .service-page-gallery-item figcaption { right: 18px; bottom: 16px; left: 18px; font-size: 13px; }
  .service-page-cta { padding: 62px 0 68px; }
  .service-page-cta-inner { gap: 26px; }
  .service-page-cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .service-page-hero-media img,
  .service-page-gallery-item img { transition: none; }
}