/* Service photographs follow the approved home hero: full background, soft fade. */
body[data-page-type="service"] .service-hero::before,
body[data-page-type="service"] .service-hero::after {
  content: none;
  background: none;
}

body[data-page-type="service"] .service-hero__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--page-soft);
}

.service-hero__background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--service-photo-focus, 62% 50%);
}

.service-hero__background::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(18 23 26 / 96%) 0%, rgb(18 23 26 / 87%) 25%, rgb(18 23 26 / 46%) 52%, rgb(18 23 26 / 8%) 100%),
    linear-gradient(0deg, var(--page) 0%, transparent 30%);
  content: "";
}

body[data-page-type="service"] .service-hero {
  border-bottom: 0;
  padding-bottom: 36px;
}

body[data-page-type="service"] .service-hero .hero__grid {
  align-items: end;
}

body[data-page-type="service"] .service-hero__summary {
  align-self: end;
  justify-self: start;
  width: 100%;
  max-width: none;
  margin-bottom: calc(46px + clamp(22px, 3vw, 28px));
  padding: clamp(20px, 2vw, 28px);
  text-align: left;
}

.service-hero__summary::before {
  background: linear-gradient(90deg, var(--accent), transparent 72%);
}

.service-hero__summary h2 {
  text-wrap: pretty;
}

.service-hero__summary p {
  margin-inline: 0;
}

.service-hero__summary .service-fact-list {
  justify-items: stretch;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
}

.service-hero__summary .service-fact-list li {
  padding-inline: 28px 0;
  text-align: left;
}

.service-hero__summary .service-fact-list li::before {
  top: 0.18em;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--accent);
  mask: var(--service-fact-icon) center / contain no-repeat;
  --service-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h4L20 8a2.12 2.12 0 0 0-3-3L3 18v3M14.5 5.5l4 4M12 8 7 3 3 7l5 5M7 8 5.5 9.5M16 12l5 5-4 4-5-5M16 17l-1.5 1.5'/%3E%3C/svg%3E");
  content: "";
}

.service-hero__summary .service-fact-list li:nth-child(2)::before {
  --service-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m15 15 6 6'/%3E%3C/svg%3E");
}

.service-hero__summary .service-fact-list li:nth-child(3)::before {
  --service-fact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 14l2 2 4-4'/%3E%3Crect x='9' y='3' width='6' height='4' rx='2'/%3E%3C/svg%3E");
}

.service-hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: 16px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 1120px) {
  body[data-page-type="service"] .service-hero .hero__grid {
    gap: 24px;
  }

  body[data-page-type="service"] .service-hero__summary {
    width: 100%;
    margin-bottom: 0;
  }
}

@media (max-width: 900px) {
  body[data-page-type="service"] .service-hero__background {
    max-height: 900px;
  }

  .service-hero__background img {
    object-position: var(--service-photo-mobile-focus, 66% 50%);
  }

  .service-hero__background::after {
    background:
      linear-gradient(90deg, rgb(18 23 26 / 95%) 0%, rgb(18 23 26 / 84%) 42%, rgb(18 23 26 / 64%) 100%),
      linear-gradient(0deg, var(--page) 0%, rgb(18 23 26 / 50%) 31%, transparent 68%);
  }
}