/* The service is a continuous journey, from a new toilet to renewal. */
.service-story { background: #f4f7f8; color: #172f3c; padding: 5rem 0 4.5rem; scroll-margin-top: 4rem; }
.service-story-inner { width: min(1160px, calc(100% - 5rem)); margin-inline: auto; }
.service-story-head { margin-bottom: 3rem; text-align: center; }
.service-story-kicker { margin: 0 0 1rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; color: #187ca8; }
#benefit-heading { margin: 0; font-family: var(--serif); font-size: clamp(1.75rem, 3.1vw, 2.75rem); font-weight: 600; line-height: 1.55; letter-spacing: -.02em; overflow-wrap: anywhere; }
#benefit-heading > span { display: block; }
.service-title-phrase { display: inline-block; white-space: nowrap; }
.service-new { background: #e2eff4; padding: 2.5rem 0; margin: 0 0 3.75rem; }
.service-new-copy { width: min(1160px, calc(100% - 5rem)); margin-inline: auto; text-align: center; }
.service-new-copy h3 { margin: 0 0 .75rem; font-family: var(--sans); font-size: clamp(1.375rem, 2.1vw, 1.75rem); font-weight: 700; line-height: 1.65; letter-spacing: .01em; }
.service-new-copy h3 > span, .service-new-copy h3 > strong { display: inline-block; }
.service-new-copy h3 > strong { font-size: inherit; font-weight: inherit; color: #187ca8; }
.service-new-copy > p { margin: 0; font-size: 1rem; line-height: 2; color: #425c68; }
.service-timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; list-style: none; padding: 0; margin: 0; }
.service-timeline::before { content: ""; position: absolute; top: 5px; left: 6px; right: calc((100% - 6rem) / 3 - 6px); height: 1px; background: #b9cdd7; }
.service-step { position: relative; min-width: 0; padding-top: 1.75rem; }
.service-step::before { content: ""; position: absolute; width: 12px; height: 12px; top: 0; left: 0; border: 2px solid #187ca8; border-radius: 50%; background: #f4f7f8; }
.service-step-stage { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; color: #187ca8; }
.service-step h3 { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 700; line-height: 1.65; }
.service-step-text { margin: 0; font-size: 1rem; line-height: 1.9; color: #425c68; }
.service-story-notes { margin-top: 2rem; font-size: .875rem; color: #536a75; line-height: 1.85; }
.service-story-notes p { margin: .3rem 0 0; }
.service-story-notes a { text-decoration: underline; text-underline-offset: .2em; }
.service-story a:focus-visible { outline: 2px solid #187ca8; outline-offset: 4px; }
@media (max-width: 1000px) {
  .service-new-break { display: none; }
  .service-timeline { gap: 2rem; }
  .service-timeline::before { right: calc((100% - 4rem) / 3 - 6px); }
}
@media (max-width: 900px) {
  .service-story { padding: 4rem 0; }
  .service-story-inner { width: calc(100% - 4rem); }
  .service-new { margin-bottom: 3rem; }
  .service-new-copy { width: calc(100% - 4rem); }
  .service-timeline { grid-template-columns: 1fr; gap: 2.25rem; }
  .service-timeline::before { display: none; }
  .service-step { padding: 0 0 0 2rem; }
  .service-step::before { top: .45rem; }
  .service-step:not(:last-child)::after { content: ""; position: absolute; top: 1.2rem; bottom: -2.7rem; left: 5px; width: 1px; background: #b9cdd7; }
}
@media (max-width: 640px) {
  .service-story { padding: 3rem 0; scroll-margin-top: 3.625rem; }
  .service-story-inner { width: calc(100% - 3rem); }
  .service-story-head { margin-bottom: 2.25rem; text-align: left; }
  #benefit-heading { font-size: 1.75rem; line-height: 1.6; }
  .service-new { padding: 2rem 0; margin-bottom: 2.75rem; }
  .service-new-copy { width: calc(100% - 3rem); text-align: left; }
  .service-new-copy h3 { font-size: 1.375rem; }
  .service-step h3 { font-size: 1.125rem; }
  .service-story-notes { margin-top: 1.75rem; }
}