.solution-story{--story-bg:#0d2238;--story-line:#3a5b73;--story-fiber:#3fd4d7;--story-cctv:#ffc979;--story-intercom:#c5a8ff;--story-it:#7ab6ff;background:radial-gradient(circle at 28% 16%,#193b56 0,#0d2238 40%,#0a1c30 100%);color:#edf6fb;border-block:1px solid #2e536c;overflow:clip}
.solution-story .story-head{display:flex;align-items:end;justify-content:space-between;gap:32px;padding-top:76px}.solution-story .story-head>div:first-child{max-width:760px}.solution-story .section-kicker,.solution-story .step-num{color:#84dcf8;font:800 .77rem Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}.solution-story .section-title{color:#fff;margin:13px 0 17px;max-width:820px}.solution-story .story-head p{color:#bbd2e1;font-size:1.06rem;line-height:1.65;max-width:680px;margin:0}.solution-story .toggle{display:flex;flex:none;gap:4px;padding:5px;border:1px solid #4a7089;border-radius:9px;background:#112f48}.solution-story .toggle button{border:0;background:transparent;color:#c0d7e4;font-weight:700;font-size:.85rem;padding:12px 15px;border-radius:6px}.solution-story .toggle button[aria-pressed=true]{background:#d9f3ff;color:#113550;box-shadow:0 4px 16px #0002}.solution-story button:focus-visible{outline:3px solid #8de8ff;outline-offset:2px}
.solution-story .scroll-layout{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(335px,.86fr);gap:clamp(26px,5vw,75px);align-items:stretch}.solution-story .visual{position:sticky;top:100px;height:calc(100vh - 115px);min-height:570px;display:flex;align-items:center;justify-content:center;z-index:1}.solution-story .diagram-shell{width:100%;max-width:680px;padding:17px 20px 0;background:radial-gradient(circle at 50% 40%,#29506c,#122f48 48%,#0b2036);border:1px solid #557c96;border-radius:16px;box-shadow:0 28px 70px #0005, inset 0 1px #a5d5ee2d}.solution-story .diagram-top{display:flex;justify-content:space-between;gap:12px;color:#a7c7d8;font:800 .68rem Manrope,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}.solution-story .diagram{display:block;width:100%;height:auto;margin:6px 0 0}.solution-story .diagram path.line{display:block;width:auto;height:auto;margin:0;background:none;fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1500;stroke-dashoffset:1500;opacity:.1;transition:stroke-dashoffset 1.15s cubic-bezier(.22,.7,.25,1),opacity .45s}.solution-story .diagram path.line.on{stroke-dashoffset:0;opacity:1}.solution-story .line.fiber{stroke:var(--story-fiber)}.solution-story .line.cctv{stroke:var(--story-cctv)}.solution-story .line.intercom{stroke:var(--story-intercom)}.solution-story .line.it{stroke:var(--story-it)}.solution-story .endpoint{opacity:.16;transition:opacity .55s,filter .55s}.solution-story .endpoint.on{opacity:1;filter:drop-shadow(0 0 7px currentColor)}.solution-story .floortext{font-size:13px;fill:#c3d8e3;font-weight:700}.solution-story .building-label{font-size:13px;fill:#a6c6d7;font-weight:650}.solution-story .story-progress{height:4px;background:#2a526c;border-radius:4px;overflow:hidden;margin:0 0 12px}.solution-story .story-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#3fd4d7,#65aef2);transition:width .6s ease}.solution-story .shell-label{text-align:center;color:#c0d8e5;font-size:.82rem;padding:0 0 16px;font-weight:700}
.solution-story .steps{padding:42px 0 15px}.solution-story .step{min-height:73vh;display:flex;flex-direction:column;justify-content:center;padding:55px 0;border-bottom:1px solid var(--story-line);opacity:.55;transition:opacity .4s}.solution-story .step:first-child{min-height:62vh}.solution-story .step:last-child{border:0}.solution-story .step.is-active{opacity:1}.solution-story .step h3{color:#fff;font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.08;letter-spacing:-.055em;margin:18px 0}.solution-story .step p{color:#b9d1df;font-size:1.05rem;line-height:1.66;max-width:440px;margin:0}.solution-story .service-tag{display:inline-flex;align-self:flex-start;margin-top:24px;padding:8px 13px;border:1px solid currentColor;border-radius:6px;font-weight:750;font-size:.82rem}.solution-story .c-fiber{color:var(--story-fiber)}.solution-story .c-cctv{color:var(--story-cctv)}.solution-story .c-intercom{color:var(--story-intercom)}.solution-story .c-it{color:var(--story-it)}.solution-story .story-disclaimer{padding:8px 0 54px;color:#96b4c5;font-size:.82rem}
@media(max-width:920px){.solution-story .story-head{align-items:start;flex-direction:column;padding-top:58px}.solution-story .scroll-layout{display:block}.solution-story .visual{top:76px;height:49vh;min-height:305px;background:#0d2238;padding:12px 0;z-index:2}.solution-story .diagram-shell{max-width:490px;padding:10px 12px 0}.solution-story .diagram{max-height:calc(49vh - 75px)}.solution-story .steps{padding-top:0}.solution-story .step,.solution-story .step:first-child{min-height:40vh;padding:34px 0}.solution-story .step h3{font-size:clamp(1.7rem,6vw,2.5rem)}.solution-story .step p{font-size:.96rem}.solution-story .story-disclaimer{padding-bottom:36px}}
@media(max-width:600px){.solution-story .story-head{padding-top:47px}.solution-story .toggle{width:100%}.solution-story .toggle button{flex:1;padding:10px 7px}.solution-story .visual{top:66px;height:43vh;min-height:255px}.solution-story .diagram{max-height:calc(43vh - 70px)}.solution-story .diagram-top{font-size:.59rem}.solution-story .step,.solution-story .step:first-child{min-height:42vh}.solution-story .step h3{margin:10px 0}.solution-story .service-tag{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.solution-story .diagram path.line,.solution-story .endpoint,.solution-story .step,.solution-story .story-progress span{transition:none}.solution-story .diagram path.line{stroke-dashoffset:0;opacity:.7}.solution-story .endpoint{opacity:.75}}