/* Decision 30: original map, fonts, paintings and waypoints; a new unboxed overview. */
.services-review .services-walk {
  padding: calc(var(--bar-h) + 58px) 0 76px;
  background-image: var(--run-2);
  background-color: var(--mapground);
  background-blend-mode: multiply;
  /* One proportionately scaled original sheet covers this whole walk, as on Home. */
  background-size: max(var(--sheet-w), 100%) auto;
  background-repeat: repeat-y;
  background-position: center top;
}
.services-review .services-opening,
.services-review .service-group,
.services-review .services-app {
  position: relative;
  z-index: 2;
  margin-inline: 9vw;
}
/* No z-index of its own: its words and buttons are raised in front of the hedge (shared-chrome.css) and cannot be if it shuts them in. */
.services-review .services-opening { padding: 0 0 54px; z-index: auto; }
.services-review .service-eyebrow {
  margin: 0 0 16px;
  font: 650 16px/1.35 var(--font-body);
  letter-spacing: .025em;
  color: var(--orange);
}
.services-review .services-opening h1 {
  max-inline-size: 20ch;
  margin: 0 0 24px;
  font-size: clamp(3rem, 2rem + 3.8vw, 5.5rem);
}
.services-review .services-lead {
  max-inline-size: 43ch;
  margin-bottom: 14px;
  font-size: clamp(1.35rem, 1.1rem + .65vw, 1.75rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.services-review .services-opening-note { max-inline-size: 69ch; font-size: 19px; margin: 0; }
.services-review .service-group {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 100px);
  padding-block: 56px 64px;
  border-top: 2px solid var(--ink-line);
}
.services-review .service-intro h2,
.services-review .services-app h2 {
  max-inline-size: 18ch;
  margin: 0 0 22px;
  font-size: clamp(2.5rem, 1.4rem + 2.9vw, 4.25rem);
  line-height: 1.12;
  scroll-margin-top: calc(var(--bar-h) + 30px);
}
.services-review .service-benefit { max-inline-size: 30ch; font-size: 22px; line-height: 1.4; }
.services-review .service-art { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.services-review .service-illustration { inline-size: 112px; block-size: auto; max-block-size: 134px; object-fit: contain; }
.services-review .service-art:has(> :only-child) .service-illustration { inline-size: 144px; max-block-size: 160px; }
.services-review .service-details { padding-top: 2px; }
.services-review .service-detail + .service-detail { margin-top: 28px; }
.services-review .service-detail h3 { font-size: clamp(1.45rem, 1.1rem + .7vw, 1.8rem); margin-bottom: 10px; line-height: 1.22; }
.services-review .service-detail p { font-size: 19px; line-height: 1.5; max-inline-size: 48ch; margin: 0; text-wrap: pretty; }
.services-review .service-note { margin: 24px 0 0; font-size: 16px; line-height: 1.45; color: var(--grey-note); max-inline-size: 62ch; }
.services-review .service-link { margin: 22px 0 0; font-size: 18px; }
.services-review .service-link + .service-link { margin-top: 10px; }
.services-review .service-link a { font-weight: 650; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.services-review .service-link a { padding-block: 5px; }
.services-review .service-link span { display: inline-block; margin-left: 4px; }
/* A detail's own button sits under its paragraph (the owner, 20 Oct 2026: "put the buttons under the text describing the relevant
   section rather than all at the bottom of the boxes"). */
.services-review .service-detail .service-link { margin: 16px 0 0; font-size: 18px; }
.services-review .service-group > .wp,
.services-review .services-app > .wp {
  --wp: 48px;
  left: calc(-5.5vw);
  top: 100px;
  animation: none;
}
.services-review .service-group > .wp:hover,
.services-review .service-group > .wp:focus-visible,
.services-review .services-app > .wp:hover,
.services-review .services-app > .wp:focus-visible { scale: 1.1; }
.services-review .service-group > .wp svg,
.services-review .services-app > .wp svg { rotate: -90deg; }
.services-review .service-group > .wp:hover svg,
.services-review .service-group > .wp:focus-visible svg,
.services-review .services-app > .wp:hover svg,
.services-review .services-app > .wp:focus-visible svg { rotate: 0deg; }
/* The route is a winding svg now (route.py); its footprints are laid by walk.ts. Its left and width are the wander's (shared-chrome.css);
   it starts 390px down and stops 70px short of the walk's foot, as the dashed line did (an svg does not stretch between top and bottom). */
.services-review .services-route {
  z-index: 1;
  top: 390px;
  height: calc(100% - 460px);
}
/* Waymark Compass (the owner, 20 Oct 2026): the heading and the Compass mark on the left, the three steps down the right as waypoints on a
   dashed path, on a sheet of paper as the other sections' details are. */
.services-review .services-app {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(40px, 6vw, 100px);
  border-top: 3px solid var(--orange);
  padding-block: 58px 50px;
}
.services-review .services-app > :not(.wp, .services-app-steps) { grid-column: 1; }
.services-review .services-app-intro > p:last-child { font-size: 23px; line-height: 1.45; max-inline-size: 36ch; margin: 0; }
.services-review .services-app h2 { font-size: clamp(2.5rem, 1.4rem + 2.9vw, 4.25rem); }
.services-review .services-app-intro .wcm-big { display: block; inline-size: clamp(120px, 10vw, 160px); block-size: auto; aspect-ratio: 1; margin: 4px 0 28px; }
.services-review .services-app-steps { grid-column: 2; grid-row: 1 / -1; align-self: start; display: grid; list-style: none; counter-reset: app; margin: 0; }
.services-review .services-app-steps li { counter-increment: app; position: relative; max-inline-size: none; min-block-size: 56px; padding: 6px 0 34px 80px; }
.services-review .services-app-steps li:last-child { padding-bottom: 4px; }
.services-review .services-app-steps li::before {
  content: counter(app); position: absolute; left: 0; top: 0; inline-size: 56px; block-size: 56px; display: grid; place-items: center;
  border: 4px solid var(--orange); border-radius: 50%; background: var(--ink); color: var(--white); font: 650 23px/1 var(--font-body); font-variant-numeric: lining-nums;
}
.services-review .services-app-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 26.5px; top: 64px; bottom: 8px; inline-size: 3px;
  background: repeating-linear-gradient(var(--orange) 0 8px, transparent 8px 14px);
}
.services-review .services-app-steps h3 { font-size: 25px; line-height: 1.22; margin-bottom: 10px; }
.services-review .services-app-steps p { font-size: 19px; margin: 0; }
.services-review #closing-invitation .wp { animation: none; }
@media (max-width: 63.99rem) {
  .services-review .services-walk { padding-top: calc(var(--bar-h) + 40px); padding-bottom: 48px; }
  .services-review .services-opening,
  .services-review .service-group,
  .services-review .services-app { margin-inline: 72px 24px; }
  .services-review .services-opening { padding-bottom: 34px; }
  .services-review .services-opening h1 { font-size: clamp(2.8rem, 5.5vw, 4.5rem); margin-bottom: 20px; }
  .services-review .services-lead { font-size: 23px; line-height: 1.35; }
  .services-review .services-opening-note { font-size: 18px; line-height: 1.45; }
  .services-review .service-group { grid-template-columns: 1fr; gap: 24px; padding-block: 38px 46px; }
  .services-review .service-intro h2,
  .services-review .services-app h2 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin-bottom: 16px; }
  .services-review .service-benefit { font-size: 21px; margin: 0; max-inline-size: 36ch; }
  .services-review .service-eyebrow { margin-bottom: 12px; font-size: 15px; }
  .services-review .service-art { margin-top: 18px; gap: 16px; }
  .services-review .service-illustration,
  .services-review .service-art:has(> :only-child) .service-illustration { inline-size: 86px; max-block-size: 90px; }
  .services-review .service-details { padding: 0; }
  .services-review .service-detail h3 { font-size: 25px; }
  .services-review .service-detail p { font-size: 18px; }
  .services-review .service-group > .wp,
  .services-review .services-app > .wp { --wp: 40px; left: -43px; top: 77px; border-width: 3px; }
  .services-review .services-route { top: 430px; height: calc(100% - 474px); }
  .services-review .services-app { padding-block: 40px; }
  .services-review .services-app { display: block; }
  .services-review .services-app-intro > p:last-child { font-size: 21px; }
  .services-review .services-app-intro .wcm-big { inline-size: 112px; margin: 0 0 22px; }
  .services-review .services-app .services-app-steps { margin-top: 28px; padding: 24px 20px 22px; }
  .services-review .services-app-steps li { min-block-size: 44px; padding: 3px 0 26px 58px; }
  .services-review .services-app-steps li::before { inline-size: 44px; block-size: 44px; border-width: 3px; font-size: 19px; }
  .services-review .services-app-steps li:not(:last-child)::after { left: 20.5px; top: 50px; }
  .services-review .services-app-steps h3 { font-size: 23px; margin-bottom: 8px; }
  .services-review .services-app-steps p { font-size: 18px; }
}
@media (max-width: 28rem) {
  .services-review .services-opening h1 { font-size: 44px; }
  .services-review .services-walk { padding-top: calc(var(--bar-h) + 30px); }
  .services-review .services-lead { font-size: 21px; }
  .services-review .services-opening-note { font-size: 17px; }
  .services-review .service-group { gap: 20px; }
  .services-review .service-intro h2,
  .services-review .services-app h2 { font-size: 36px; }
  .services-review .service-benefit { font-size: 20px; }
  .services-review .service-intro { position: relative; }
  .services-review .service-art { position: absolute; left: -61px; top: 118px; flex-direction: column; gap: 10px; margin: 0; }
  .services-review .service-illustration,
  .services-review .service-art:has(> :only-child) .service-illustration { inline-size: 46px; max-block-size: 56px; }
  .services-review .service-detail h3 { font-size: 24px; }
}