/* SEO-page visual system. Shared site and service components remain authoritative. */
.svc-seo { --seo-cyan: #22d3ee; --seo-blue: #2563eb; --seo-green: #10b981; --seo-dark: #071022; overflow-x: clip; }
.svc-seo figure:not(.svc-seo-media) { margin: 0; }
.svc-seo-centered > .asfs-svc-container > .asfs-svc-heading { margin-inline: auto; text-align: center; }
.svc-seo-bordered { border-top: 1px solid #25364d; }

.svc-seo-hero { padding: 34px 0 82px; background: #071022; border-bottom: 1px solid #263650; }
.svc-seo-breadcrumbs { margin-bottom: 38px; }
.svc-seo-breadcrumbs .breadcrumbs { margin: 0; padding: 0; background: transparent; }
.svc-seo-breadcrumbs .breadcrumbs ol { width: auto; max-width: none; margin: 0; padding: 0; }
.svc-seo-breadcrumbs :where(a, li, span) { color: #b7c7dc; font-size: 0.8125rem; }
.svc-seo-breadcrumbs a:hover { color: #fff; }
.svc-seo-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr); gap: 58px; align-items: center; }
.svc-seo-hero-copy { min-width: 0; }
.svc-seo-hero h1 { max-width: 760px; }
.svc-seo-hero-copy > p:not(.asfs-svc-eyebrow, .svc-seo-hero-note) { max-width: 700px; margin: 24px 0 0; color: #c2d1e4; font-size: 1.08rem; line-height: 1.72; }
.svc-seo-hero-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: 26px 0 0; padding: 0; list-style: none; }
.svc-seo-hero-points li { position: relative; min-width: 0; padding: 12px 16px 12px 42px; color: #e5edf8; font-size: 0.875rem; font-weight: 700; border: 1px solid #263954; border-radius: 8px; background: #0d1a2d; }
.svc-seo-hero-points li::before { position: absolute; top: 50%; left: 16px; width: 15px; height: 15px; content: ""; border: 2px solid #22d3ee; border-radius: 50%; transform: translateY(-50%); }
.svc-seo-hero-points li::after { position: absolute; top: 50%; left: 21px; width: 5px; height: 3px; content: ""; border-bottom: 2px solid #22d3ee; border-left: 2px solid #22d3ee; transform: translateY(-65%) rotate(-45deg); }
.svc-seo-hero .asfs-svc-actions { margin-top: 28px; }
.svc-seo-hero-note { position: relative; margin: 22px 0 0; padding-left: 18px; color: #8eb2d2; font-size: 0.78rem; }
.svc-seo-hero-note::before { position: absolute; top: 0.45em; left: 0; width: 7px; height: 7px; content: ""; border-radius: 50%; background: #34d399; }

.svc-seo-media { width: min(100%, var(--seo-media-max, 1000px)); margin: 34px auto 0; overflow: hidden; border: 1px solid var(--seo-media-border, #cad6e4); border-radius: 8px; background: var(--seo-media-bg, #f7fafc); box-shadow: 0 15px 32px rgba(8, 24, 45, 0.12); }
.svc-seo-media img { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 768; object-fit: contain; }
.svc-seo-media--hero { --seo-media-max: 620px; --seo-media-border: #31435d; --seo-media-bg: #07152a; margin: 0; }
.svc-seo-media--pillars { --seo-media-max: 100%; margin-top: 18px; border: 0; box-shadow: none; }
.svc-seo-media--intent, .svc-seo-media--anatomy, .svc-seo-media--capabilities, .svc-seo-media--use-cases, .svc-seo-media--lifecycle, .svc-seo-media--diagnostic, .svc-seo-media--process, .svc-seo-media--measurement { --seo-media-border: #30425b; --seo-media-bg: #07152a; }
.svc-seo-media--intent { --seo-media-max: 1000px; }
.svc-seo-media--problems { --seo-media-max: 1000px; }
.svc-seo-media--anatomy { --seo-media-max: 920px; }
.svc-seo-media--architecture { --seo-media-max: 960px; }
.svc-seo-media--hierarchy { --seo-media-max: 900px; }
.svc-seo-media--capabilities { --seo-media-max: 940px; }
.svc-seo-media--use-cases { --seo-media-max: 960px; }
.svc-seo-media--lifecycle { --seo-media-max: 940px; }
.svc-seo-media--diagnostic { --seo-media-max: 940px; }
.svc-seo-media--process { --seo-media-max: 960px; }
.svc-seo-media--measurement { --seo-media-max: 940px; }
.svc-seo-media-support { margin-top: 40px; }
.svc-seo-media-note { max-width: 920px; margin: 24px auto 0; color: #a9bdd4; font-size: 0.8rem; text-align: center; }

.svc-seo-card-grid, .svc-seo-code-grid, .svc-seo-stage-grid, .svc-seo-process-grid, .svc-seo-indicator-grid, .svc-seo-transformation-grid, .svc-seo-capability-grid { display: grid; gap: 20px; margin-top: 38px; }
.svc-seo-card-grid article, .svc-seo-code-grid article, .svc-seo-stage-grid li, .svc-seo-process-grid li, .svc-seo-indicator-grid article, .svc-seo-transformation-grid article, .svc-seo-capability-grid article { min-width: 0; padding: 24px; border: 1px solid var(--svc-border); border-radius: 8px; background: #fff; }
.svc-seo-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-seo-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-seo-card-grid h3, .svc-seo-code-grid h3, .svc-seo-stage-grid h3, .svc-seo-process-grid h3, .svc-seo-indicator-grid h3, .svc-seo-capability-grid h3 { margin: 12px 0 0; font-size: 1rem; line-height: 1.4; }
.svc-seo-card-grid p, .svc-seo-code-grid p, .svc-seo-stage-grid p, .svc-seo-process-grid p, .svc-seo-indicator-grid p, .svc-seo-capability-grid p, .svc-seo-transformation-grid p { margin: 10px 0 0; font-size: 0.855rem; line-height: 1.62; }
.svc-seo-index { display: block; color: #9bb8f8; font-size: 1.35rem; font-weight: 800; }
.svc-seo-card-label { display: block; color: #2563eb; font-size: 0.68rem; font-weight: 800; line-height: 1.4; text-transform: uppercase; }

.svc-seo-feature-frame { width: min(100%, 1040px); margin: 50px auto 0; padding: 24px; border: 1px solid #d0dbe8; border-radius: 8px; background: #fff; box-shadow: 0 12px 26px rgba(8, 24, 45, 0.1); text-align: center; }
.svc-seo-feature-frame > h3 { margin: 8px 0 0; font-size: 1.25rem; }
.svc-seo-feature-frame > p:last-child { max-width: 820px; margin: 18px auto 0; color: #556b85; font-size: 0.83rem; }
.svc-seo-frame-label { margin: 0; color: #496482; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.svc-seo-expectation { max-width: 920px; margin: 32px auto 0; padding: 15px 20px; color: #1d4da1; font-size: 0.9rem; line-height: 1.55; text-align: center; border: 1px solid #a7c9fd; border-radius: 8px; background: #eef6ff; }

.asfs-svc-dark .svc-seo-stage-grid li, .asfs-svc-dark .svc-seo-process-grid li, .asfs-svc-dark .svc-seo-code-grid article, .asfs-svc-dark .svc-seo-indicator-grid article, .asfs-svc-dark .svc-seo-capability-grid article { color: #e7eef8; border-color: #2d3d55; background: #0d192c; }
.svc-seo-stage-grid, .svc-seo-process-grid { margin-inline: 0; padding: 0; list-style: none; }
.svc-seo-stage-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-seo-stage-grid--five, .svc-seo-indicator-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc-seo-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-seo-process-grid li:last-child { grid-column: span 2; }
.svc-seo-stage-grid li > span, .svc-seo-process-grid li > span, .svc-seo-indicator-grid article > div > span { color: #22d3ee; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.asfs-svc-dark .svc-seo-stage-grid h3, .asfs-svc-dark .svc-seo-process-grid h3, .asfs-svc-dark .svc-seo-indicator-grid h3, .asfs-svc-dark .svc-seo-code-grid h3, .asfs-svc-dark .svc-seo-capability-grid h3 { color: #fff; }
.asfs-svc-dark .svc-seo-stage-grid p, .asfs-svc-dark .svc-seo-process-grid p, .asfs-svc-dark .svc-seo-indicator-grid p, .asfs-svc-dark .svc-seo-code-grid p, .asfs-svc-dark .svc-seo-capability-grid p { color: #b8cae0; }

.svc-seo [data-svc-section="barriers"] .asfs-svc-comparison { margin-top: 40px; }
.svc-seo [data-svc-section="barriers"] .asfs-svc-comparison > div { border-color: #f2b9c2; background: #fff7f8; }
.svc-seo [data-svc-section="barriers"] .asfs-svc-comparison > div + div { border-color: #91dec4; background: #f0fbf7; }
.svc-seo [data-svc-section="barriers"] .asfs-svc-comparison > div:first-child .asfs-svc-eyebrow { color: #dc3651; }
.svc-seo [data-svc-section="barriers"] .asfs-svc-comparison > div + div .asfs-svc-eyebrow { color: #078a6c; }

.svc-seo-code-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-seo-code-grid .svc-seo-index { display: inline-grid; width: 28px; height: 28px; place-items: center; color: #6ee7f5; font-size: 0.7rem; border: 1px solid #087b91; border-radius: 50%; background: #073246; }
.svc-seo-code-grid code { display: block; max-width: 100%; margin-top: 14px; padding: 10px 12px; overflow-wrap: anywhere; color: #70e5f4; font-size: 0.72rem; line-height: 1.5; border: 1px solid #25364e; border-radius: 6px; background: #060d1b; }

.svc-seo-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
.svc-seo-capability-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 16px; }
.svc-seo-capability-grid article > p, .svc-seo-capability-grid article > ul { grid-column: 1 / -1; }
.svc-seo-capability-grid .asfs-svc-icon { width: 42px; height: 42px; color: #65e2f1; background: #073246; }
.svc-seo-capability-grid h3 { margin-top: 0; }
.svc-seo-capability-grid .svc-seo-card-label { margin-top: 3px; color: #22d3ee; }
.svc-seo-capability-grid ul { margin: 16px 0 0; padding: 0; list-style: none; }
.svc-seo-capability-grid li { position: relative; padding: 6px 0 6px 16px; color: #b8cae0; font-size: 0.8rem; }
.svc-seo-capability-grid li::before { position: absolute; top: 0.95em; left: 0; width: 5px; height: 5px; content: ""; border-radius: 50%; background: #22d3ee; }

.svc-seo-audience-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 18px; }
.svc-seo-audience-tabs button { min-height: 42px; padding: 9px 14px; color: #c5d4e6; font: inherit; font-size: 0.78rem; font-weight: 700; border: 1px solid transparent; border-radius: 7px; background: #152136; cursor: pointer; }
.svc-seo-audience-tabs button:hover { color: #fff; border-color: #3e5677; }
.svc-seo-audience-tabs button[aria-selected="true"] { color: #fff; border-color: #3972ee; background: #255dde; }
.svc-seo-audience-tabs button:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; }
.svc-seo-audience-panel { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; width: min(100%, 1000px); min-height: 118px; margin-inline: auto; padding: 22px 24px; color: #e7eef8; text-align: left; border: 1px solid #2d3d55; border-radius: 8px; background: #0d192c; }
.svc-seo-audience-panel h3 { margin: 0; color: #fff; font-size: 1rem; }
.svc-seo-audience-panel p { margin: 8px 0 0; color: #b8cae0; font-size: 0.875rem; }
.svc-seo-audience:not([data-enhanced="true"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-seo-audience:not([data-enhanced="true"]) .svc-seo-audience-panel { margin: 0; }

.svc-seo-indicator-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.svc-seo-indicator-grid small { padding: 3px 8px; color: #9db0c8; font-size: 0.62rem; border-radius: 4px; background: #1b2a40; }

.svc-seo-transformation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-seo-transformation-grid .svc-seo-from, .svc-seo-transformation-grid .svc-seo-to { padding: 12px; border-radius: 6px; }
.svc-seo-transformation-grid .svc-seo-from { color: #b72d44; border: 1px solid #f1b8c2; background: #fff3f5; }
.svc-seo-transformation-grid .svc-seo-to { color: #08765f; border: 1px solid #8ddbbe; background: #ecfbf5; }

.svc-seo-portfolio .asfs-svc-heading { margin-inline: auto; text-align: center; }
.svc-seo-portfolio--single .asfs-svc-projects { grid-template-columns: minmax(0, 640px); justify-content: center; }
.svc-seo-related .asfs-svc-related article { color: #f8fafc; border-color: #2b3b52; background: #0d192c; }
.svc-seo-related .asfs-svc-related h3 { color: #fff; }
.svc-seo-related .nw-master-text-link { color: #67e8f9; }

@media (max-width: 1100px) {
  .svc-seo-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr); gap: 40px; }
  .svc-seo-card-grid--four, .svc-seo-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-seo-stage-grid--five, .svc-seo-indicator-grid, .svc-seo-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-seo-process-grid li:last-child { grid-column: auto; }
  .svc-seo-media-support { margin-top: 34px; }
}

@media (max-width: 900px) {
  .svc-seo-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-seo-media--hero { width: min(100%, 680px); margin-inline: auto; }
  .svc-seo-card-grid--three, .svc-seo-stage-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-seo-transformation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .svc-seo-hero { padding: 26px 0 58px; }
  .svc-seo-breadcrumbs { margin-bottom: 28px; }
  .svc-seo-hero-grid { gap: 38px; }
  .svc-seo-hero-copy > p:not(.asfs-svc-eyebrow, .svc-seo-hero-note) { font-size: 1rem; }
  .svc-seo-media { margin-top: 26px; }
  .svc-seo-media--hero { margin-top: 0; }
  .svc-seo-media--pillars { margin-top: 14px; }
  .svc-seo-feature-frame { margin-top: 38px; padding: 16px; }
  .svc-seo-card-grid, .svc-seo-code-grid, .svc-seo-stage-grid, .svc-seo-process-grid, .svc-seo-indicator-grid, .svc-seo-transformation-grid, .svc-seo-capability-grid { margin-top: 30px; }
  .svc-seo-media-support { margin-top: 28px; }
  .svc-seo-stage-grid--five, .svc-seo-indicator-grid, .svc-seo-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-seo-capability-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 540px) {
  .svc-seo-hero-points, .svc-seo-card-grid--four, .svc-seo-card-grid--three, .svc-seo-code-grid, .svc-seo-stage-grid--four, .svc-seo-stage-grid--five, .svc-seo-indicator-grid, .svc-seo-process-grid, .svc-seo-transformation-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-seo-card-grid article, .svc-seo-code-grid article, .svc-seo-stage-grid li, .svc-seo-process-grid li, .svc-seo-indicator-grid article, .svc-seo-transformation-grid article, .svc-seo-capability-grid article { padding: 20px; }
  .svc-seo-audience-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-seo-audience-tabs button { min-width: 0; padding-inline: 10px; }
  .svc-seo-audience-panel { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .svc-seo-audience:not([data-enhanced="true"]) { grid-template-columns: minmax(0, 1fr); }
  .svc-seo-feature-frame > h3 { font-size: 1.08rem; }
}

@media (max-width: 1100px) {
  .asfit-header-overlay .svc-seo-hero { padding-top: calc(var(--asfit-header-height, 78px) + 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-seo-audience-tabs { scroll-behavior: auto; }
}