/* Business OS scene, scoped for inline Services integration. */
.bos-embedded { --bos-navy:#172348;--bos-teal:#087480;--bos-ink:#192647;--bos-muted:#637187;--bos-line:#e0e7ea;--bos-gutter:clamp(20px,5vw,80px) }
.bos-embedded * { box-sizing:border-box }
.bos-embedded { margin:0;background:#fff;color:var(--bos-ink);font-family:Lato,Arial,sans-serif;-webkit-font-smoothing:antialiased }
.bos-embedded a { color:inherit }
.bos-embedded button { font:inherit }
.bos-embedded img { max-width:100%;display:block }
.bos-embedded figure { margin:0 }
.bos-embedded a,
.bos-embedded button { -webkit-tap-highlight-color:transparent }
.bos-embedded a:focus-visible,
.bos-embedded button:focus-visible { outline:3px solid #008597;outline-offset:5px }
.bos-embedded ::selection { background:#c1f0ed;color:#172348 }
.bos-embedded .bos-stage { padding:132px var(--bos-gutter) 0;max-width:1760px;margin:auto }
.bos-embedded .bos-intro { display:flex;align-items:flex-end;justify-content:space-between;gap:56px;margin:0 0 28px }
.bos-embedded .bos-eyebrow { margin:0 0 12px;color:var(--bos-teal);font-weight:900;font-size:11px;letter-spacing:.18em }
.bos-embedded .bos-intro :is(h2,h3) { font-size:clamp(36px,4.3vw,66px);line-height:1.035;letter-spacing:-.04em;font-weight:900;margin:0 }
.bos-embedded .bos-intro-action { max-width:300px;padding-bottom:2px }
.bos-embedded .bos-intro-action p { font-size:15px;line-height:1.55;color:var(--bos-muted);margin:0 0 16px }
.bos-embedded .bos-button { display:inline-flex;justify-content:space-between;align-items:center;gap:36px;background:var(--bos-navy);color:#fff;padding:16px 24px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;min-height:50px;transition:background .16s,transform .16s }
.bos-embedded .bos-button:hover { background:#24385d }
.bos-embedded .bos-button:active { transform:translateY(1px) }
.bos-embedded .bos-button span { font-size:20px;line-height:1 }
.bos-embedded .bos-before-figure { display:flex;flex-direction:column;min-height:0 }
.bos-embedded .bos-viewport { position:relative;aspect-ratio:1672/941;overflow:hidden;border-radius:18px;background:#ece9e1;isolation:isolate }
.bos-embedded .bos-camera { position:absolute;width:100%;aspect-ratio:1672/941;left:0;top:0;transform-origin:73% 39%;container-type:inline-size }
.bos-embedded .bos-plate { position:absolute;inset:0;width:100%;height:100%;object-fit:fill }
.bos-embedded .bos-after { clip-path:inset(0 100% 0 0) }
.bos-embedded .bos-before-figure .bos-monitor,
.bos-embedded .bos-paper-layer { display:none }
.bos-embedded .bos-scene-note { display:none;position:absolute;left:26px;bottom:25px;padding:10px 14px;background:#ffffffed;color:var(--bos-navy);font-size:13px;font-weight:700;border-radius:6px }
.bos-embedded .bos-before-figure figcaption { display:flex;justify-content:space-between;gap:20px;padding:13px 0;font-size:11px;letter-spacing:.02em;color:var(--bos-muted);line-height:1.5 }
.bos-embedded .bos-animation-label { display:none }
.bos-embedded .bos-monitor { position:absolute;left:55.1%;top:21.18%;width:36.29%;height:34.27%;overflow:hidden;border-radius:1px;background:#fafcfc;container-type:inline-size }
.bos-embedded .bos-app { height:100%;background:#fafcfc;color:#172348;container-type:inline-size;overflow:hidden;text-align:left;font-size:2.28cqw;line-height:1.25 }
.bos-embedded .bos-app-top { height:14%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e2e8ec;padding:0 3.5%;font-size:2cqw;color:#637187 }
.bos-embedded .bos-app-top strong { color:#172348;font-weight:900;font-size:2.8cqw;display:flex;gap:5px;align-items:center }
.bos-embedded .bos-app-dot { width:5px;height:5px;background:#0b8b99;border-radius:50% }
.bos-embedded .bos-app-body { display:flex;height:86% }
.bos-embedded .bos-app-nav { flex:0 0 19%;padding:5% 2.8%;display:flex;flex-direction:column;gap:13%;background:#f0f4f5;font-size:2.12cqw;color:#637187 }
.bos-embedded .bos-nav-active { color:#087480;font-weight:900 }
.bos-embedded .bos-app-main { padding:4% 4%;flex:1;min-width:0 }
.bos-embedded .bos-app-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-bottom:4% }
.bos-embedded .bos-app-heading small { font-size:1.32cqw;letter-spacing:.07em;color:#526674;font-weight:700 }
.bos-embedded .bos-app-heading :is(h3,h4) { font-size:3.05cqw;margin:1.5% 0 0;letter-spacing:-.03em }
.bos-embedded .bos-connected { font-size:1.5cqw;color:#087480 }
.bos-embedded .bos-flow { display:flex;justify-content:space-between;align-items:center;position:relative;margin:0 0 4%;height:12%;font-size:1.75cqw;font-weight:700 }
.bos-embedded .bos-flow span { position:relative;z-index:1;background:#fafcfc;padding-right:5px }
.bos-embedded .bos-flow i { width:9%;height:1px;background:#d6e1e3 }
.bos-embedded .bos-flow svg { position:absolute;left:0;top:50%;width:100%;height:2px;z-index:0 }
.bos-embedded .bos-flow path { fill:none;stroke:#0b8b99;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0 }
.bos-embedded .bos-work-row { display:flex;gap:3%;align-items:center;background:#fff;border-bottom:1px solid #e8edef;padding:3% 0;min-height:19% }
.bos-embedded .bos-work-symbol { display:grid;place-items:center;width:7%;aspect-ratio:1;background:#eef5f5;border-radius:3px;color:#0b8b99;font-size:2.7cqw }
.bos-embedded .bos-work-row strong { font-size:2.05cqw;font-weight:700;display:block }
.bos-embedded .bos-work-row small { font-size:1.55cqw;color:#637187;display:block;margin-top:2px }
.bos-embedded .bos-state { margin-left:auto;font-size:1.65cqw;color:#087480;background:#eaf5f1;border-radius:3px;padding:3px 5px;white-space:nowrap }
.bos-embedded .bos-team-spaces { display:flex;gap:3%;margin-top:4%;font-size:1.7cqw }
.bos-embedded .bos-team-spaces>span { display:block;flex:1;color:#172348;border-top:2px solid #0b8b99;padding-top:4%;font-weight:700 }
.bos-embedded .bos-team-spaces b { display:block;font-weight:400;font-size:1.4cqw;color:#637187;margin-top:3% }
.bos-embedded .bos-after-static,
.bos-embedded .bos-closeup { max-width:1320px;padding:72px var(--bos-gutter) 0;margin:auto }
.bos-embedded .bos-section-intro { margin-bottom:24px }
.bos-embedded .bos-section-intro :is(h2,h3) { font-size:clamp(26px,3vw,42px);letter-spacing:-.03em;margin:0 0 10px }
.bos-embedded .bos-section-intro p { color:var(--bos-muted);font-size:16px;line-height:1.5;margin:0 }
.bos-embedded .bos-static-scene { position:relative;container-type:inline-size;border-radius:18px;overflow:hidden;background:#ece9e1;aspect-ratio:1672/941 }
.bos-embedded .bos-static-scene>img { width:100%;height:auto }
.bos-embedded .bos-after-static figcaption,
.bos-embedded .bos-illustrative { font-size:12px;line-height:1.5;color:var(--bos-muted);margin:12px 0 }
.bos-embedded .bos-closeup>.bos-app { aspect-ratio:606/323;height:auto;border:1px solid var(--bos-line);border-radius:12px;width:100%;font-size:14px }
.bos-embedded .bos-closeup>.bos-app .bos-app-top { height:14cqw }
.bos-embedded .bos-closeup>.bos-app .bos-app-body { height:75cqw;max-height:520px }
.bos-embedded .bos-closeup>.bos-app { container-type:normal }
.bos-embedded .bos-closeup { container-type:inline-size }
.bos-embedded .bos-closeup .bos-app-top { height:50px!important }
.bos-embedded .bos-closeup .bos-app-body { height:380px!important }
.bos-embedded .bos-closeup .bos-app-main { padding:4% }
.bos-embedded .bos-closeup .bos-app-nav { gap:24px }
.bos-embedded .bos-closeup .bos-flow { height:20px }
.bos-embedded .bos-closeup .bos-work-row { min-height:0;padding:12px 0 }
.bos-embedded .bos-closeup .bos-app-top strong { font-size:20px }
.bos-embedded .bos-closeup .bos-app-top>span,
.bos-embedded .bos-closeup .bos-app-nav { font-size:13px }
.bos-embedded .bos-closeup .bos-app-heading small { font-size:10px }
.bos-embedded .bos-closeup .bos-app-heading :is(h3,h4) { font-size:22px }
.bos-embedded .bos-closeup .bos-connected { font-size:11px }
.bos-embedded .bos-closeup .bos-flow,
.bos-embedded .bos-closeup .bos-team-spaces { font-size:12px }
.bos-embedded .bos-closeup .bos-work-row strong { font-size:14px }
.bos-embedded .bos-closeup .bos-work-row small,
.bos-embedded .bos-closeup .bos-state,
.bos-embedded .bos-closeup .bos-team-spaces b { font-size:11px }
.bos-embedded .bos-closeup .bos-work-symbol { font-size:18px }
.bos-embedded .bos-closeup .bos-team-spaces { margin-top:16px }
.bos-embedded .bos-closeup .bos-team-spaces>span { padding-top:8px }
.bos-embedded.is-motion .bos-journey { height:320svh }
.bos-embedded.is-motion .bos-stage { position:sticky;top:0;height:100svh;display:flex;flex-direction:column;padding-top:126px }
.bos-embedded.is-motion .bos-before-figure { flex:1 }
.bos-embedded.is-motion .bos-viewport { flex:1;aspect-ratio:auto;min-height:0 }
.bos-embedded.is-motion .bos-camera { top:50%;transform:translateY(-50%) }
.bos-embedded.is-motion .bos-before-figure .bos-monitor { display:block }
.bos-embedded.is-motion .bos-paper-layer { display:block;position:absolute;inset:0;perspective:1200px }
.bos-embedded.is-motion .bos-after-static,
.bos-embedded.is-motion .bos-closeup { display:none }
.bos-embedded.is-motion .bos-before-label { display:none }
.bos-embedded.is-motion .bos-animation-label { display:inline }
.bos-embedded.is-motion .bos-scene-note { display:block }
.bos-embedded.is-motion .bos-before-figure figcaption { flex:0 0 auto }
.bos-embedded .bos-paper { position:absolute;width:16%;aspect-ratio:1221/1289;left:0;top:0;transform-origin:center;filter:drop-shadow(0 9px 9px #362a1a24) }
.bos-embedded .bos-paper>img { width:100%;height:100%;clip-path:inset(6.2% 11.7% 4.9% 12.5% round 4px) }
.bos-embedded .bos-paper-ink { position:absolute;inset:20% 22%;color:#394449;font-size:1.06cqw }
.bos-embedded .bos-paper-ink small { font-size:.46cqw;letter-spacing:.05em }
.bos-embedded .bos-paper-ink strong { display:block;font-size:1.16cqw;margin:8% 0 16% }
.bos-embedded .bos-paper-ink span { display:block;width:100%;height:2px;margin:12% 0;background:#c4cccd }
.bos-embedded .bos-paper-ink span:nth-last-child(2) { width:62% }
.bos-embedded .bos-paper-ink i { display:block;width:25%;height:2px;background:#0b8b99;margin-top:20% }
@media(min-width:960px) and (max-height:820px) {
.bos-embedded .bos-intro :is(h2,h3) { font-size:clamp(38px,4vw,54px) }
.bos-embedded.is-motion .bos-stage { padding-top:116px }
.bos-embedded .bos-intro { margin-bottom:20px }
.bos-embedded .bos-intro-action p { font-size:14px }
.bos-embedded .bos-eyebrow { margin-bottom:8px }
}
@media(max-width:959px) {
.bos-embedded .bos-stage { padding-top:136px }
.bos-embedded .bos-intro { gap:28px }
.bos-embedded .bos-intro :is(h2,h3) { font-size:clamp(35px,5.2vw,50px) }
.bos-embedded .bos-intro-action { max-width:250px }
.bos-embedded .bos-after-static,
.bos-embedded .bos-closeup { padding-top:56px }
.bos-embedded .bos-monitor .bos-app { font-size:2.2cqw }
}
@media(max-width:700px) {
.bos-embedded .bos-stage { padding-top:190px }
.bos-embedded .bos-intro { display:block;margin-bottom:28px }
.bos-embedded .bos-intro :is(h2,h3) { font-size:clamp(34px,9.5vw,54px) }
.bos-embedded .bos-intro-action { max-width:100%;margin-top:22px }
.bos-embedded .bos-intro-action p { font-size:15px;max-width:370px }
.bos-embedded .bos-button { font-size:13px;padding:14px 21px }
.bos-embedded .bos-viewport,
.bos-embedded .bos-static-scene { border-radius:10px }
.bos-embedded .bos-before-figure figcaption { display:block;font-size:10px }
.bos-embedded .bos-before-figure figcaption>span { display:block;margin-bottom:4px }
.bos-embedded .bos-section-intro :is(h2,h3) { font-size:29px;line-height:1.1 }
.bos-embedded .bos-section-intro p { font-size:14px }
.bos-embedded .bos-after-static,
.bos-embedded .bos-closeup { padding-top:42px }
.bos-embedded .bos-closeup .bos-app-nav { display:none }
.bos-embedded .bos-closeup .bos-app-main { padding:18px 14px }
.bos-embedded .bos-closeup .bos-app-heading small { font-size:8px }
.bos-embedded .bos-closeup .bos-app-heading :is(h3,h4) { font-size:18px }
.bos-embedded .bos-closeup .bos-connected { display:none }
.bos-embedded .bos-closeup .bos-app-body { height:358px!important }
.bos-embedded .bos-closeup .bos-app-top { padding:0 14px }
.bos-embedded .bos-closeup .bos-app-top strong { font-size:17px }
.bos-embedded .bos-closeup .bos-app-top>span { font-size:10px }
.bos-embedded .bos-closeup .bos-work-row strong { font-size:12px }
.bos-embedded .bos-closeup .bos-state { font-size:9px;padding:3px 4px }
.bos-embedded .bos-closeup .bos-work-row small { font-size:9px }
.bos-embedded .bos-closeup .bos-flow,
.bos-embedded .bos-closeup .bos-team-spaces { font-size:10px }
.bos-embedded .bos-closeup .bos-team-spaces b { font-size:9px }
.bos-embedded .bos-closeup .bos-work-symbol { font-size:16px;width:24px }
.bos-embedded .bos-illustrative { font-size:11px }
.bos-embedded .bos-closeup>.bos-app { aspect-ratio:auto }
}
@media(prefers-reduced-motion:reduce) {
.bos-embedded *,
.bos-embedded *::before,
.bos-embedded *::after { scroll-behavior:auto!important;transition:none!important }
}
.bos-embedded .bos-closeup>.bos-app { aspect-ratio:auto }
.bos-embedded:not(.has-js) .bos-stage { padding-top:48px }
.bos-embedded .bos-images-unavailable .bos-before-figure,
.bos-embedded .bos-images-unavailable .bos-after-static { display:none }
.bos-embedded .bos-monitor .bos-app-main { display:grid;grid-template-rows:.9fr .45fr repeat(3,minmax(0,1fr)) .8fr;padding:3cqw;gap:0;height:100%;min-height:0 }
.bos-embedded .bos-monitor .bos-app-heading { margin:0;align-items:center;min-height:0 }
.bos-embedded .bos-monitor .bos-flow { margin:0;height:auto;min-height:0 }
.bos-embedded .bos-monitor .bos-work-row { min-height:0;padding:0 }
.bos-embedded .bos-monitor .bos-team-spaces { margin:0;align-items:center;min-height:0 }
.bos-embedded .bos-monitor .bos-team-spaces>span { padding-top:5% }
@media(max-width:700px) {
.bos-embedded .bos-before-figure figcaption>.bos-animation-label { display:none }
}
.bos-embedded .bos-closeup .bos-app-main { display:grid;grid-template-rows:54px 24px repeat(3,minmax(0,1fr)) 60px;padding:18px;height:100%;min-height:0 }
.bos-embedded .bos-closeup .bos-app-heading,
.bos-embedded .bos-closeup .bos-flow,
.bos-embedded .bos-closeup .bos-team-spaces { margin:0;min-height:0;align-items:center }
.bos-embedded .bos-closeup .bos-flow { height:auto }
.bos-embedded .bos-closeup .bos-team-spaces>span { padding-top:8px }
@media(min-width:960px) and (min-height:760px) and (prefers-reduced-motion:no-preference) {
.bos-embedded.has-js .bos-stage { height:100svh;display:flex;flex-direction:column;padding-top:126px }
.bos-embedded.has-js .bos-before-figure { flex:1 }
.bos-embedded.has-js .bos-viewport { flex:1;aspect-ratio:auto;min-height:0 }
.bos-embedded.has-js .bos-camera { top:50%;transform:translateY(-50%) }
.bos-embedded.bos-images-unavailable .bos-stage { height:auto }
}
@media(min-width:960px) and (min-height:760px) and (max-height:820px) and (prefers-reduced-motion:no-preference) {
.bos-embedded.has-js .bos-stage { padding-top:116px }
}
.bos-embedded .bos-flow path { vector-effect:non-scaling-stroke;stroke-width:1.2px }
/* Fit the reusable scene below the existing Services header. */
.services-page { overflow-anchor: none; } /* The controller preserves position as the track and shared header resize. */
.services-page .services-hero-split { grid-template-columns: 1.2fr 1fr; }
.services-page .service-business-benefits .service-benefits { margin-top: 0; }
.bos-embedded { --bos-header-height: 132px; --bos-gutter: clamp(20px,5vw,80px); padding-bottom: 72px; }
.bos-embedded .bos-stage, .bos-embedded:not(.has-js) .bos-stage { padding-top: 24px; }
.bos-embedded .bos-intro { align-items: center; gap: 24px; margin-bottom: 20px; }
.bos-embedded .bos-intro :is(h2,h3) { font-size: clamp(24px,2.5vw,36px); line-height: 1.15; margin: 0; }
.bos-embedded .bos-intro-action { margin: 0; flex-shrink: 0; }
.bos-embedded .bos-section-intro :is(h2,h3) { line-height: 1.15; }
.bos-embedded.is-motion .bos-stage { top: var(--bos-header-height); height: calc(100svh - var(--bos-header-height)); padding-top: 24px; }
@media(min-width:960px) and (min-height:760px) and (prefers-reduced-motion:no-preference) {
 .bos-embedded.has-js .bos-stage { height: calc(100svh - var(--bos-header-height)); padding-top: 24px; }
 .bos-embedded.bos-images-unavailable .bos-stage { height: auto; }
}
@media(max-width:959px) {
 .services-page .services-hero-split { grid-template-columns: 1fr; gap: 28px; }
 .bos-embedded .bos-intro { display: block; }
 .bos-embedded .bos-intro-action { margin-top: 18px; }
 .bos-embedded .bos-stage { padding-top: 0; }
}

/* Service 01 owns the scene; other product layouts stay unchanged. */
.services-page #os { display: block; }
.services-page #os > .product-detail-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.services-page #os > .product-detail-copy > * { grid-area: auto; }
.services-page #os > .bos-embedded { --bos-gutter: 0px; padding-bottom: 40px; }
.services-page #os > .product-workflow { margin-top: 0; }
@media(max-width:959px) {
 .services-page #os > .product-detail-copy { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
 /* Status text changes must not resize the row or move its scroll anchor. */
 .bos-embedded .bos-closeup .bos-state { flex: 0 0 112px; text-align: center; }
}
@media(max-width:700px) {
 .bos-embedded .bos-closeup .bos-state { flex-basis: 96px; }
}