/* System Integration: existing systems -> owned data -> dependable exchange. */
.jc-integration-page { color: #d1e1e8; }
.jc-integration-page h2 { font-size: clamp(28px, 2.8vw, 39px); line-height: 1.13; margin-bottom: 17px; }
.jc-integration-page h3 { font-size: 17px; line-height: 1.35; margin-bottom: 12px; }
.jc-integration-page p { font-size: var(--jc-text-body); line-height: 1.6; margin-bottom: 12px; }
.jc-integration-page .jc-eyebrow { font-size: var(--jc-text-label); line-height: 1.5; margin-bottom: 12px; }
.jc-integration-page .jc-eyebrow:before { flex-shrink: 0; }
.jc-integration-page .jc-button { min-height: 44px; text-decoration: none; }
.jc-si-section { padding: 43px 0; }
.jc-si-dark { background: #031824; border-bottom: 1px solid #17434f; }
.jc-si-light { background: #eef7f9; color: #17323f; }
.jc-si-light h2, .jc-si-light h3 { color: #102b38; }
.jc-si-light p { color: #294b59; }
.jc-si-light .jc-eyebrow { color: #078e91; }
.jc-si-divided { border-bottom: 1px solid #c0dce3; }
.jc-si-hero { background: linear-gradient(90deg, rgba(2,16,27,.97), rgba(2,16,27,.87) 46%, rgba(2,16,27,.6)), url('/Images/services/system-integration-connected-infrastructure-v1.webp') center right / cover no-repeat; border-bottom: 1px solid #23616c; padding: 48px 0; }
.jc-si-hero-grid { align-items: center; display: grid; gap: 38px; grid-template-columns: 1.08fr 1fr; }
.jc-si-hero h1 { font-size: clamp(43px, 4.2vw, 59px); line-height: 1.04; margin-bottom: 20px; }
.jc-si-hero h1 span { color: var(--jc-cyan); }
.jc-si-hero p:not(.jc-eyebrow), .jc-si-closing p:not(.jc-eyebrow) { color: #dceaf0; }
.jc-si-hero .jc-button, .jc-si-closing .jc-button { margin-top: 7px; }
.jc-integration-page .jc-si-micro { font-size: var(--jc-text-detail); margin: 12px 0 0; }
.jc-si-topology { background: rgba(3,25,36,.94); border: 1px solid #21727d; border-radius: 3px; padding: 28px 17px 17px; }
.jc-si-top-nodes, .jc-si-output-nodes { display: grid; gap: 7px; grid-template-columns: repeat(6,minmax(0,1fr)); }
.jc-si-top-nodes span, .jc-si-output-nodes span { align-items: center; display: flex; flex-direction: column; gap: 12px; line-height: 1.35; text-align: center; }
.jc-si-top-nodes i, .jc-si-output-nodes i { color: var(--jc-cyan); font-size: 24px; }
.jc-si-top-nodes strong, .jc-si-output-nodes strong { color: #d3ecef; font-size: var(--jc-text-detail); }
.jc-si-output-nodes { grid-template-columns: repeat(4,minmax(0,1fr)); }
.jc-si-lines { color: #00bca8; display: block; height: 48px; width: 100%; }
.jc-si-layer { background: #052a35; border: 1px solid #00bca8; border-radius: 2px; color: var(--jc-cyan); display: flex; flex-direction: column; gap: 6px; margin: 0 auto; max-width: 260px; padding: 15px; text-align: center; }
.jc-si-wordmark { color: #00ffc0; font-size: 24px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.jc-si-wordmark span { color: #00b5ff; }
.jc-si-layer b { font-size: var(--jc-text-detail); text-transform: uppercase; }
.jc-integration-page .jc-si-diagram-note { color: #70e9d3; font-size: var(--jc-text-detail); font-style: italic; margin: 21px 0 0; text-align: right; }
.jc-si-scenarios { display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 25px; }
.jc-si-scenarios article { background: #041e2b; border: 1px solid #245d6b; border-radius: 3px; padding: 22px 20px 17px; position: relative; }
.jc-si-scenarios article > i { color: var(--jc-cyan); font-size: 30px; margin-bottom: 16px; }
.jc-si-scenarios h3 { max-width: 330px; }
.jc-si-scenarios p { color: #b8d1dc; margin-bottom: 0; }
.jc-si-scenarios .jc-si-featured { background: #063139; border-color: #00b69f; }
.jc-si-badge { background: #64f6d7; border-radius: 2px; color: #003c3a; font-size: var(--jc-text-label); font-weight: 800; padding: 4px 7px; position: absolute; right: 0; top: 0; text-transform: uppercase; }
.jc-si-checks { list-style: none; margin: 0; padding: 0; }
.jc-si-checks li { font-size: var(--jc-text-detail); line-height: 1.5; margin-bottom: 8px; padding-left: 20px; position: relative; }
.jc-si-checks li:before { color: var(--jc-cyan); content: '✓'; font-size: 14px; font-weight: 800; left: 0; position: absolute; }
.jc-si-light .jc-si-checks li:before { color: #009e88; }
.jc-si-two-col { display: grid; gap: 2px 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.jc-integration-page .jc-si-callout { background: #d2f3ec; border-left: 3px solid #00aa92; color: #153945; font-size: var(--jc-text-detail); font-weight: 800; margin: 17px 0 0; padding: 12px 14px; }
.jc-si-engineering { align-items: center; display: grid; gap: 35px; grid-template-columns: 1.4fr 1fr; }
.jc-si-monitor { align-items: center; background: linear-gradient(90deg,rgba(1,17,29,.25),rgba(1,17,29,.35)),url('/Images/services/system-integration-connected-infrastructure-v1.webp') 68% center / cover; border: 1px solid #266270; border-radius: 3px; display: flex; justify-content: flex-end; min-height: 310px; padding: 20px; }
.jc-si-monitor > div { background: rgba(2,19,30,.96); border: 1px solid #256b77; padding: 20px 17px; }
.jc-si-monitor-label { color: #76ddd6; display: block; font-size: var(--jc-text-detail); font-weight: 800; letter-spacing: .05em; margin-bottom: 16px; text-transform: uppercase; }
.jc-si-monitor p { align-items: center; color: #dbedf0; display: flex; font-size: var(--jc-text-body); gap: 10px; margin-bottom: 15px; }
.jc-si-monitor p:last-child { margin-bottom: 0; }
.jc-si-monitor i { color: #00d3b5; }
.jc-si-categories { display: grid; gap: 22px 28px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 26px; }
.jc-si-categories article { border: 1px solid #225765; border-radius: 3px; padding: 20px; }
.jc-si-categories h3, .jc-si-security h3 { align-items: center; display: flex; gap: 10px; }
.jc-si-categories h3 i, .jc-si-security h3 i { color: var(--jc-cyan); font-size: 22px; }
.jc-si-split { display: grid; gap: 34px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.jc-si-split > div + div { border-left: 1px solid #c0dce3; padding-left: 34px; }
.jc-si-split h2 { font-size: 30px; }
.jc-si-ownership, .jc-si-reconcile, .jc-si-migration { margin: 22px 0; }
.jc-si-owner-nodes { display: grid; gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.jc-si-owner-nodes > div { background: #e0f3f6; border: 1px solid #a5d6df; border-radius: 3px; padding: 16px 9px; text-align: center; }
.jc-si-owner-nodes strong { color: #006b74; display: block; font-size: var(--jc-text-detail); line-height: 1.4; margin-bottom: 9px; }
.jc-si-owner-nodes small { color: #3c6573; display: block; font-size: var(--jc-text-detail); line-height: 1.4; }
.jc-si-patterns { display: grid; gap: 11px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.jc-si-patterns article { background: #e1f2f6; border: 1px solid #bfdce4; border-radius: 3px; padding: 18px 14px; }
.jc-si-patterns h3 { color: #006b74; font-size: 16px; }
.jc-si-patterns p { font-size: var(--jc-text-body); }
.jc-si-flow { align-items: stretch; display: grid; gap: 7px; grid-template-columns: 1fr 20px 1.15fr 20px 1fr; }
.jc-si-flow > div { align-items: center; background: #e0f3f6; border: 1px solid #a5d6df; border-radius: 3px; display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 90px; padding: 12px 8px; text-align: center; }
.jc-si-flow strong, .jc-si-flow small { font-size: var(--jc-text-detail); line-height: 1.4; }
.jc-si-flow b { color: #006b74; font-size: 20px; }
.jc-si-flow > span { align-self: center; color: #00a98f; font-size: 23px; text-align: center; }
.jc-si-flow .jc-si-flow-layer { background: #052a35; border-color: #00bca8; color: #6debd5; }
.jc-si-migration .jc-si-flow-layer { background: #d8f4ec; border: 1px dashed #00aa92; color: #006b74; }
.jc-integration-page .jc-si-attention { background: #fae8eb; border: 1px solid #ebc0c8; border-radius: 3px; color: #9c3648; font-size: var(--jc-text-detail); font-weight: 800; margin: 12px auto 7px; max-width: 270px; padding: 9px; text-align: center; }
.jc-integration-page .jc-si-caption { color: #4b707c; font-size: var(--jc-text-detail); margin: 8px 0 12px; text-align: center; }
.jc-si-security { display: grid; gap: 15px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 27px; }
.jc-si-security article { border: 1px solid #225765; border-radius: 3px; padding: 18px; }
.jc-si-security p { font-size: var(--jc-text-body); margin-bottom: 0; }
.jc-integration-page .jc-si-statement { border-top: 1px solid #c0dce3; color: #143b47; font-size: 14px; font-weight: 800; margin: 24px 0 0; padding-top: 16px; text-align: center; }
.jc-si-dark .jc-si-statement { border-color: #22616b; color: #75f1d8; }
.jc-si-continuity { display: grid; gap: 7px; grid-template-columns: repeat(5,minmax(0,1fr)); }
.jc-si-continuity span { align-items: center; display: flex; flex-direction: column; font-size: var(--jc-text-detail); gap: 9px; line-height: 1.4; text-align: center; }
.jc-si-continuity i { color: #009a93; font-size: 22px; }
.jc-si-comparison { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.jc-si-comparison article { border: 1px solid; border-radius: 3px; padding: 18px 14px; }
.jc-si-comparison h3 { font-size: var(--jc-text-body); text-transform: uppercase; }
.jc-si-comparison article > p { font-size: var(--jc-text-body); }
.jc-si-neutral { background: #e1f2f6; border-color: #b0d6e0 !important; }
.jc-si-neutral h3 { color: #006b74; }
.jc-si-light .jc-scope-good h3, .jc-si-light .jc-scope-good h3 a { color: #087b6e; }
.jc-si-light .jc-scope-bad h3 { color: #bd3d4e; }
.jc-si-comparison h3 a { text-decoration: none; }
.jc-si-comparison h3 a:hover { text-decoration: underline; }
.jc-si-comparison h3 i { font-size: 12px; }
.jc-integration-page .jc-scope-bad .jc-si-checks li:before { background: transparent; color: #d85769; content: '×'; height: auto; width: auto; }
.jc-integration-page .jc-scope-good .jc-si-checks li:before { background: transparent; color: #009e88; height: auto; width: auto; }
.jc-si-fit li { margin-bottom: 17px; }
.jc-si-process-section { background: #05202e; }
.jc-si-process { display: grid; gap: 25px; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; margin: 30px 0 0; padding: 0; }
.jc-si-process li { border-top: 1px solid #2a6977; padding-top: 18px; }
.jc-si-process li > span { align-items: center; background: #073641; border: 1px solid #00baa4; border-radius: 50%; color: #79efdb; display: inline-flex; font-size: 14px; font-weight: 800; height: 40px; justify-content: center; margin-bottom: 13px; width: 40px; }
.jc-si-process h3 { font-size: 16px; }
.jc-si-process p { color: #bfd7e0; font-size: var(--jc-text-body); }
.jc-si-before-after { gap: 9px; grid-template-columns: 1fr 18px 1fr; }
.jc-si-result-arrow { align-self: center; color: #009990; font-size: 23px; text-align: center; }
.jc-si-related { display: grid; gap: 10px; }
.jc-si-related a { align-items: center; background: #e6f3f7; border: 1px solid #b9dbe4; border-radius: 3px; color: #183747; display: grid; gap: 12px; grid-template-columns: 25px 1fr 15px; padding: 16px; text-decoration: none; }
.jc-si-related a:hover { background: #d4f1e9; border-color: #009c90; }
.jc-si-related a > i { color: #008f99; font-size: 21px; }
.jc-si-related a > i:last-child { font-size: 14px; }
.jc-si-related strong { display: block; font-size: 14px; margin-bottom: 4px; }
.jc-si-related small { display: block; font-size: var(--jc-text-detail); line-height: 1.5; }
.jc-si-closing { background: linear-gradient(90deg,rgba(2,16,27,.97),rgba(2,16,27,.83) 48%,rgba(2,16,27,.25)),url('/Images/services/services-closing-desk-v2.webp') center right / cover no-repeat; border-top: 1px solid #23616c; min-height: 340px; }
.jc-si-closing-grid { align-items: center; display: grid; gap: 40px; grid-template-columns: 1.35fr 1fr; }
.jc-si-closing-art { align-items: center; background: rgba(3,24,35,.87); border: 1px solid #2b7580; border-radius: 3px; display: grid; gap: 18px; grid-template-columns: 1fr 1fr; padding: 23px; }
.jc-si-closing-art > strong { color: #87e8e0; font-size: 21px; line-height: 1.35; }
.jc-si-closing-art > div { border-left: 1px solid #2b7580; padding-left: 18px; }
.jc-si-closing-art span { align-items: center; color: #d9eff1; display: flex; font-size: var(--jc-text-detail); gap: 9px; margin: 13px 0; }
.jc-si-closing-art i { color: #00e6bf; }
.jc-integration-page a:focus-visible { outline: 3px solid #00b5ff; outline-offset: 4px; }
@media (min-width:1200px) {
    .jc-si-scenarios, .jc-si-categories, .jc-si-security { gap: 12px; grid-template-columns: repeat(6,minmax(0,1fr)); }
    .jc-si-scenarios article { padding: 23px 14px 17px; }
    .jc-si-scenarios h3 { font-size: 16px; }
    .jc-si-scenarios p { font-size: var(--jc-text-body); }
    .jc-si-categories article, .jc-si-security article { padding: 17px 12px; }
    .jc-si-categories h3, .jc-si-security h3 { align-items: start; flex-direction: column; font-size: var(--jc-text-body); gap: 12px; }
    .jc-si-process { gap: 18px; grid-template-columns: repeat(8,minmax(0,1fr)); }
    .jc-si-process li { text-align: center; }
    .jc-si-process h3 { font-size: var(--jc-text-body); min-height: 38px; }
}
@media (max-width:991px) {
    .jc-si-hero-grid, .jc-si-engineering, .jc-si-split, .jc-si-closing-grid { gap: 28px; grid-template-columns: 1fr; }
    .jc-si-hero-grid > div:first-child { max-width: 700px; }
    .jc-si-topology { margin: 0 auto; max-width: 660px; width: 100%; }
    .jc-si-section { padding: 48px 0; }
    .jc-si-scenarios, .jc-si-categories, .jc-si-security, .jc-si-process { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .jc-si-split > div + div { border-left: 0; border-top: 1px solid #c0dce3; padding-left: 0; padding-top: 28px; }
    .jc-si-monitor { min-height: 290px; }
    .jc-si-closing-art { max-width: 520px; }
}
@media (max-width:575px) {
    .jc-si-section { padding: 42px 0; }
    .jc-si-hero { padding: 46px 0 38px; }
    .jc-si-hero h1 { font-size: 39px; }
    .jc-integration-page h2, .jc-si-split h2 { font-size: 29px; }
    .jc-si-scenarios, .jc-si-categories, .jc-si-security, .jc-si-process, .jc-si-two-col, .jc-si-comparison, .jc-si-patterns { grid-template-columns: 1fr; }
    .jc-si-topology { padding: 22px 12px 16px; }
    .jc-si-top-nodes { gap: 17px 7px; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .jc-si-output-nodes { gap: 19px 9px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .jc-si-topology .jc-si-lines { display: none; }
    .jc-si-topology .jc-si-layer { margin: 27px auto; position: relative; }
    .jc-si-topology .jc-si-layer:before, .jc-si-topology .jc-si-layer:after { background: #00bca8; content: ''; height: 27px; left: 50%; position: absolute; width: 1px; }
    .jc-si-topology .jc-si-layer:before { bottom: 100%; }
    .jc-si-topology .jc-si-layer:after { top: 100%; }
    .jc-si-owner-nodes { gap: 9px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .jc-si-ownership .jc-si-lines { display: none; }
    .jc-si-ownership .jc-si-layer { margin-top: 22px; }
    .jc-si-flow { gap: 7px; grid-template-columns: 1fr; }
    .jc-si-flow > div { min-height: 76px; }
    .jc-si-flow > span { line-height: 1; transform: rotate(90deg); }
    .jc-si-continuity { gap: 18px 9px; grid-template-columns: repeat(3,minmax(0,1fr)); }
    .jc-si-migration .jc-si-lines { display: none; }
    .jc-si-migration .jc-si-caption { border-top: 1px solid #a5d6df; margin-top: 18px; padding-top: 14px; }
    .jc-si-result-arrow { justify-self: center; transform: rotate(90deg); }
    .jc-si-closing-art { gap: 14px; padding: 17px; }
    .jc-si-closing-art > strong { font-size: 18px; }
    .jc-si-closing-art > div { padding-left: 14px; }
    .jc-si-closing-art span { gap: 6px; }
    .jc-integration-page .jc-button { font-size: var(--jc-text-detail); padding-left: 13px; padding-right: 13px; }
}