/* Keep the original service typography, ink rules and orange arrow links. */
#services-overview {
  max-inline-size: 900px;
  margin-inline: auto;
  scroll-margin-top: 88px;
}
#services-overview .jb-h {
  margin-inline: auto;
  text-align: center;
}
#services-overview .jb-cols {
  grid-template-columns: minmax(0, 1fr);
}
#services-overview .jb-col { min-inline-size: 0; text-align: left; }
#services-overview .jb-name,
#services-overview a { overflow-wrap: anywhere; }
#services-overview .jb-more { justify-content: center; }
#services-overview .jb-more p { font-size: 16px; }
#services-overview .jb-more .jb-svcs { margin-top: 0; }
@media (min-width: 48rem) {
  #services-overview .jb-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The four as paper cards, each with the Services page's picture for it, standing on the map (the owner, 20 Oct 2026: "go further still
   on improving the layout and design"): four abreast on a laptop, two by two on a tablet, one above another on a phone. */
#services-overview { max-inline-size: 1180px; }
#services-overview .jb-cols { gap: 20px; }
#services-overview .jb-col {
  display: flex; flex-direction: column; padding: 24px 24px 26px; border: 0; border-radius: 18px; background: var(--paper);
  box-shadow: 0 1px 0 rgb(28 36 48 / .05), 0 22px 40px -26px rgb(28 36 48 / .45);
}
#services-overview .jb-art { block-size: 104px; inline-size: auto; max-inline-size: 100%; margin: 0 0 16px; object-fit: contain; object-position: left bottom; }
#services-overview .jb-col .jb-svcs { margin-top: auto; padding-top: 14px; }
@media (min-width: 64rem) {
  #services-overview .jb-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #services-overview .jb-col { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    #services-overview .jb-col:nth-child(even) { --tilt: 1.4deg; }
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #services-overview .jb-col { transition: translate .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease-out; }
  #services-overview .jb-col:hover { translate: 0 -5px; box-shadow: 0 18px 32px -16px rgb(28 36 48 / .45); }
  #services-overview .jb-col:hover .jb-art { animation: rustle .6s ease-in-out; transform-origin: 50% 100%; }
}
#services-overview .jb-name { font-size: 25px; }
#services-overview .jb-line { font-size: 18px; }

/* Each service's way on is an orange button, as on the inner pages (the owner, 20 Oct 2026: "there are still a lot of links in text
   that aren't buttons as they should be"). Its arrow moves from beside the link to the end of the label, read by nobody. */
#services-overview .jb-svcs li { padding-left: 0; }
#services-overview .jb-svcs li::before { content: none; }
#services-overview a.onward::after { content: " →" / ""; }