/* Additive styles for service pages and the home service links.
   The existing palette, fonts, components and styles.css remain the source of truth. */
.breadcrumbs { padding-top: 25px; font-size: 13px; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: '/'; padding-right: 12px; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
.service-hero { grid-template-columns: 1.4fr 1fr; padding-top: 36px; }
.service-hero h1 { font-size: clamp(36px, 4.1vw, 56px); letter-spacing: -1.4px; }
.service-hero .lead, .service-hero .hero-description { max-width: 620px; }
.service-hero .portrait-panel { height: 490px; }
.service-content { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 80px; padding-block: 45px 20px; align-items: start; border-top: 1px solid var(--line); }
.service-copy section + section { margin-top: 45px; }
.service-copy h2 { font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.6px; }
.service-copy p { color: var(--muted); margin: 20px 0 0; }
.service-copy a { text-decoration: underline; text-underline-offset: 3px; }
.service-aside { background: var(--sage); padding: 30px; border-radius: 6px; }
.service-aside h2 { font-size: 29px; letter-spacing: -.5px; }
.service-aside p, .service-aside li { font-size: 15px; }
.service-aside ul { padding-left: 20px; }
.service-aside li + li { margin-top: 12px; }
.service-credentials { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 12px; }
.service-copy .service-source { font-size: 13px; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px; }
.service-related { padding-block: 65px; }
.home-services { border-top: 1px solid var(--line); }
.service-cards { list-style: none; padding: 0; margin: 35px 0 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service-cards > li { min-width: 0; }
.service-cards > li > a { display: flex; height: 100%; flex-direction: column; align-items: start; padding: 27px; border: 1px solid var(--line); border-radius: 5px; transition: background .2s; }
.service-cards > li > a:hover { background: var(--sage); }
.service-cards h3 { font: 400 25px/1.3 var(--serif); }
.service-cards p { color: var(--muted); margin: 4px 0 20px; }
.service-cards .text-link { margin-top: auto; }
@media (max-width: 1100px) {
  .service-content { gap: 35px; }
  .service-hero .portrait-panel { height: 440px; }
}
@media (max-width: 760px) {
  .service-hero, .service-content { grid-template-columns: 1fr; }
  .service-hero h1 { font-size: clamp(34px, 8.3vw, 48px); letter-spacing: -1px; overflow-wrap: break-word; }
  .service-hero .portrait-panel { height: 420px; }
  .service-content { padding-top: 35px; gap: 35px; }
  .service-cards { grid-template-columns: 1fr; }
  .service-aside, .service-cards > li > a { padding: 24px; }
  .service-related { padding-block: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-cards > li > a { transition: none; }
}