/* Service surfaces: shared editorial components, scoped away from the calculator. */
.service-page {
  --service-space: clamp(48px, 6vw, 80px);
  --service-copy: #43524b;
}
.service-page .container { width: 100%; max-width: 1320px; padding-inline: clamp(20px, 4vw, 48px); }
.service-page .inner-content { padding: 0; }
.service-page main > section,
.service-page #footer,
.service-page #footer-bottom { content-visibility: visible; contain-intrinsic-size: auto; }
.service-page .service-page-hero { padding: 80px 0 var(--service-space); background: var(--color-primary); }
.service-page .service-page-hero::before,
.service-page .service-page-hero::after,
.service-page .service-page-cta::before { content: none; }
.service-page .service-breadcrumbs { margin-bottom: 48px; color: #d6e0d9; letter-spacing: normal; }
.service-page .service-breadcrumbs a { color: #d6e0d9; }
.service-page .service-breadcrumbs span { opacity: 1; }
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 64px); }
.service-page .service-hero-content { max-width: none; }
.service-page .service-hero-content .section-title { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.14; letter-spacing: -0.025em; text-wrap: balance; margin: 0 0 24px; }
.service-page .service-hero-content .section-lead { color: #d6e0d9; font-size: 1.1rem; line-height: 1.65; max-width: 58ch; }
.service-page .hero-cta-group { margin-top: 32px; gap: 12px; }
.service-page .btn-accent,
.service-page .btn-outline-accent { display: inline-flex; justify-content: center; align-items: center; padding: 15px 22px; min-height: 48px; font-size: 0.94rem; line-height: 1.4; text-transform: none; letter-spacing: normal; box-shadow: none; text-align: center; }
.service-page .service-page-hero .btn-outline-accent { color: #fff; border-color: #a8bab0; }
.service-page a:focus-visible,
.service-page button:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 5px; }
.service-page .service-page-hero a:focus-visible,
.service-page .service-page-cta a:focus-visible { outline-color: #e6c594; }
.service-hero-media { margin: 0; min-width: 0; }
.service-hero-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 12px; }
.service-hero-media figcaption { margin-top: 16px; font-size: 0.92rem; }
.service-hero-media figcaption a { color: #d6e0d9; text-underline-offset: 4px; }
.service-media-focus-left img { object-position: left top; }
.service-hero-media--workflow img { aspect-ratio: 16 / 9; object-position: center; }
.service-hero-media--dashboard img { aspect-ratio: 16 / 10; object-fit: contain; object-position: center; background: #fff; }
.service-hero-media--diagram img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.service-flow { margin: 0; padding: clamp(24px, 3vw, 40px); background: #e9e3d6; color: var(--color-primary); border-radius: 12px; }
.service-flow h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 24px; text-wrap: balance; }
.service-flow ol { list-style: none; margin: 0; padding: 0; }
.service-flow li { position: relative; padding: 16px 0 16px 24px; border-top: 1px solid rgba(15,45,36,.22); }
.service-flow li::before { content: ""; position: absolute; left: 0; top: 24px; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.service-flow strong,
.service-flow span { display: block; }
.service-flow strong { font-size: 1.05rem; font-weight: 600; }
.service-flow span { font-size: .95rem; line-height: 1.5; margin-top: 4px; color: var(--service-copy); }
.service-flow figcaption { border-top: 1px solid rgba(15,45,36,.22); padding-top: 16px; font-size: .84rem; line-height: 1.5; color: var(--service-copy); }
.service-page .service-evidence { padding: var(--service-space) 0; background: #e9e3d6; }
.evidence-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; margin-bottom: 40px; align-items: start; }
.evidence-heading h2 { margin: 0; font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height: 1.2; color: var(--color-primary); text-wrap: balance; }
.evidence-heading p { margin: 0; color: var(--service-copy); line-height: 1.7; max-width: 65ch; }
.evidence-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.evidence-layout figure { margin: 0; }
.evidence-layout img { display: block; width: 100%; max-height: 360px; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-radius: 12px; }
.evidence-layout figcaption { margin-top: 12px; font-size: .87rem; color: var(--service-copy); }
.evidence-context h3 { font-size: 1.5rem; margin: 0 0 16px; line-height: 1.3; }
.evidence-context p { line-height: 1.7; }
.service-link-group { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.service-before-after { margin: 0 0 28px; }
.service-before-after > div { padding: 18px 0; border-top: 1px solid rgba(15,45,36,.25); }
.service-before-after dt { color: var(--service-copy); font-size: .9rem; }
.service-before-after dd { margin: 8px 0 0; color: var(--color-primary); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.3; font-weight: 500; }
.service-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.service-story { min-width: 0; }
.service-story img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; border-radius: 12px; }
.service-story > div { padding: 24px 0 0; }
.service-story h3 { font-size: 1.45rem; line-height: 1.3; margin: 0 0 12px; }
.service-story h3 a { text-decoration: none; }
.service-story p { max-width: 60ch; line-height: 1.7; color: var(--service-copy); margin-bottom: 12px; }
.service-text-link { display: block; width: fit-content; padding-block: 12px; font-weight: 500; text-underline-offset: 5px; }
.service-page .service-text-link,
.service-page .hub-intro-note > a,
.service-page #footer-bottom a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 4px; }
.service-page .service-page-body { padding: var(--service-space) 0; }
.service-page .service-page-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 6vw, 80px); }
.service-page-main { min-width: 0; }
.service-module { padding: 32px 0; border-top: 1px solid var(--color-line); scroll-margin-top: 140px; }
.service-module:first-child { padding-top: 0; border-top: none; }
.service-module:last-child { padding-bottom: 0; }
.service-page .service-module h2 { font-size: clamp(1.5rem, 2vw, 1.8rem); line-height: 1.28; margin: 0 0 20px; padding: 0; text-wrap: balance; }
.service-page .service-module h2::after { content: none; }
.service-page .service-module p { line-height: 1.75; color: var(--service-copy); max-width: 72ch; margin: 0 0 18px; }
.service-page .service-module p:last-child { margin-bottom: 0; }
.service-page .service-tech-list { margin: 20px 0 0; }
.service-page .service-tech-list li { color: var(--service-copy); padding: 14px 0 14px 24px; }
.service-page .service-tech-list li::before { background: var(--color-primary); width: 5px; height: 5px; left: 4px; top: 25px; }
.service-page .service-process-list { margin: 24px 0 0; }
.service-page .service-process-item { padding: 24px 0; margin: 0; transition: none; }
.service-page .service-process-item::before { content: none; }
.service-page .service-process-item:hover { padding-left: 0; background: none; }
.service-page .service-process-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
.service-page .service-process-item p { margin-bottom: 0; }
.service-page .service-page-sidebar { position: static; }
.service-toc { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--color-line); }
.service-toc h2 { font-size: 1.15rem; margin: 0 0 16px; }
.service-toc ol { list-style: none; padding: 0; margin: 0; }
.service-toc li + li { margin-top: 4px; }
.service-toc a { display: block; color: var(--service-copy); font-size: .95rem; line-height: 1.45; padding: 8px 0; text-decoration: none; }
.service-toc a:hover { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 4px; }
.service-page .service-sidebar-card { padding: 24px; background: #e9e3d6; border: 0; border-radius: 12px; box-shadow: none; backdrop-filter: none; transition: none; }
.service-page .service-sidebar-card:hover { transform: none; box-shadow: none; }
.service-page .service-sidebar-card p { color: var(--service-copy); }
.service-page .service-sidebar-card .btn-accent { width: 100%; }
.service-page .article-diagnostic { background: var(--color-primary); color: var(--color-ivory); box-shadow: none; border: 0; }
.service-page .article-diagnostic::before { content: none; }
.service-page .article-diagnostic .diagnostic-title { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.service-page .article-diagnostic p,
.service-page .article-diagnostic .diagnostic-step { color: #d6e0d9; }
.service-page .article-diagnostic .diagnostic-progress-fill { background: var(--color-ivory); }
.service-page .article-diagnostic .diagnostic-question-wrapper { animation: none; }
.service-page .service-page-cta { padding: var(--service-space) 0; background: var(--color-primary); }
.service-cta-content { text-align: center; }
.service-page .service-page-cta .section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); text-transform: none; line-height: 1.2; margin-bottom: 20px; }
.service-page .service-page-cta .section-lead { color: #d6e0d9; max-width: 65ch; margin: 0 auto; }
.service-cta-actions { margin-top: 28px; }
.service-page #footer { padding: 64px 0; }
.service-page #footer .grid { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: 40px; align-items: start; }
.service-page #footer .footer-menu,
.service-page #footer .footer-item { width: auto; margin: 0; }
.service-page #footer .footer-item h2 { font-size: 2rem; text-transform: none; margin-top: 0; }
.service-page #footer h3 { margin-top: 0; }
.service-page #footer-bottom { padding: 24px 0; background: #e9e3d6; }
.service-page #footer-bottom p { margin: 0; }
.hub-intro-note { padding: 32px; color: var(--color-primary); background: #e9e3d6; border-radius: 12px; }
.hub-intro-note > p { font-size: 1.5rem; line-height: 1.3; margin: 0 0 24px; font-weight: 500; }
.hub-intro-note dl { margin: 0; }
.hub-intro-note dl > div { padding-block: 18px; border-top: 1px solid var(--color-line); }
.hub-intro-note dt { font-weight: 600; }
.hub-intro-note dd { margin: 6px 0 0; line-height: 1.6; color: var(--service-copy); }
.hub-intro-note > a { display: inline-block; padding-top: 16px; text-underline-offset: 4px; }
.service-hub .service-anchor-bar { margin: 0 0 40px; padding: 0 0 24px; gap: 8px 28px; }
.service-anchor-bar > a { padding-block: 12px; font-size: .95rem; font-weight: 500; text-underline-offset: 5px; }
.hub-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); padding: 48px 0 64px; border-bottom: 1px solid var(--color-line); scroll-margin-top: 120px; align-items: center; }
.hub-line h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.14; text-wrap: balance; margin: 0 0 20px; }
.hub-line p { color: var(--service-copy); line-height: 1.7; max-width: 60ch; margin: 0 0 20px; }
.hub-line .hub-line-lead { font-size: 1.2rem; color: var(--color-primary); line-height: 1.5; }
.hub-scope { list-style: none; padding: 0; display: flex; gap: 8px 16px; flex-wrap: wrap; margin: 24px 0; }
.hub-scope li { padding: 8px 0; border-block: 1px solid var(--color-line); font-size: .9rem; }
.hub-line-media { margin: 0; min-width: 0; }
.hub-line-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; display: block; border-radius: 12px; }
.hub-line-media--left img { object-position: left top; }
.hub-line-media--contain img { aspect-ratio: 16 / 10; object-fit: contain; background: #f4f6f8; }
.hub-line-media figcaption { margin-top: 20px; }
.hub-line-media figcaption a { font-weight: 500; text-underline-offset: 4px; }
.hub-line-media figcaption span { display: block; margin-top: 8px; font-size: .94rem; color: var(--service-copy); line-height: 1.6; }
.hub-capabilities { padding-top: 64px; scroll-margin-top: 120px; }
.hub-capabilities-heading { max-width: 760px; margin-bottom: 40px; }
.hub-capabilities-heading h2 { font-size: clamp(1.65rem, 2.4vw, 2.1rem); line-height: 1.3; margin: 0 0 16px; }
.hub-capabilities-heading p { color: var(--service-copy); line-height: 1.7; }
.hub-capability { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; padding: 32px 0; border-top: 1px solid var(--color-line); scroll-margin-top: 120px; }
.hub-capability h3 { font-size: 1.5rem; margin: 0 0 12px; }
.hub-capability p { color: var(--service-copy); line-height: 1.6; max-width: 38ch; margin: 0; }
.hub-capability ul { list-style: none; padding: 0; margin: 0; }
.hub-capability li + li { border-top: 1px solid var(--color-line); }
.hub-capability li a { display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 6px 20px; padding: 20px 0; text-decoration: none; }
.hub-capability strong { font-size: 1.15rem; font-weight: 500; }
.hub-capability span { grid-column: 1; line-height: 1.55; color: var(--service-copy); }
.hub-capability i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hub-capability a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) {
  .service-hero-grid { grid-template-columns: 1fr; }
  .service-hero-media img { max-height: 420px; }
  .service-page .service-page-hero { padding-top: 48px; }
  .service-page .service-hero-content { max-width: 760px; }
  .service-flow { max-width: 760px; }
  .service-page .service-page-grid { grid-template-columns: 1fr; }
  .service-page .service-page-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .service-toc { grid-column: 1 / -1; }
  .service-toc ol { columns: 2; column-gap: 32px; }
  .service-toc li { break-inside: avoid; }
  .service-page .service-sidebar-card { margin-bottom: 0; }
  .service-page #footer .grid { grid-template-columns: 1fr 1fr; }
  .service-page #footer .footer-item { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .evidence-heading, .evidence-layout, .service-stories, .hub-line, .hub-capability { grid-template-columns: 1fr; }
  .evidence-heading { gap: 20px; margin-bottom: 28px; }
  .service-page .service-breadcrumbs { margin-bottom: 32px; }
  .service-page .hero-cta-group { align-items: stretch; }
  .service-page .hero-cta-group a { flex: 0 1 auto; }
  .service-stories { gap: 40px; }
  .service-story > div { padding-top: 20px; }
  .service-page .service-page-sidebar { display: block; }
  .service-toc ol { columns: 1; }
  .service-page .service-sidebar-card { margin-bottom: 20px; }
  .hub-line { gap: 32px; padding: 32px 0 48px; }
  .hub-capability { gap: 20px; }
  .hub-intro-note { padding: 24px; }
  .service-page #footer .grid { grid-template-columns: 1fr; gap: 32px; }
  .service-page #footer .footer-item { grid-column: auto; }
  .service-page #footer ul.menu-list li { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-page *, .service-page *::before, .service-page *::after { scroll-behavior: auto !important; transition: none !important; }
}
