.cs-infra-hero {padding: 2rem 0 5rem; background: var(--cs-surface);}
.cs-infra-hero .cs-breadcrumb {margin-bottom: 3rem;}
.cs-infra-hero h1 {font-size: clamp(2.7rem, 4.4vw, 4.8rem); line-height: 1.15; margin: 1.5rem 0;}
.cs-infra-intro {max-width: 38rem; color: var(--cs-muted); margin-bottom: 2rem; font-size: 1.05rem;}
.cs-infra-visual {position: relative; margin: 0; background: #15263b;}
.cs-infra-visual img {width: 100%; height: clamp(350px, 42vw, 540px); object-fit: cover; display: block;}
.cs-infra-visual figcaption {padding: 1.1rem 1.5rem; color: #fff; font-size: .9rem;}
.cs-infra-technologies {padding-top: 2.3rem;}
.cs-infra-tech-heading {display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem;}
.cs-infra-tech-heading h2 {font-size: 1.15rem; letter-spacing: 0;}
.cs-infra-tech-heading p {font-size: .9rem; color: var(--cs-muted);}
.cs-infra-marquee {position: relative; margin-top: 1rem; background: #fff; border-color: #dce2ea;}
.cs-infra-marquee .cs-marquee-group {list-style: none; margin: 0; padding-block: 0; padding-inline-start: 0; gap: 4rem; padding-inline-end: 4rem;}
.cs-infra-brand {width: 190px; height: 84px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.cs-infra-brand img {width: 150px; height: 60px; object-fit: contain;}
.cs-infra-brand img[alt="Cisco"] {width: 114px;}
.cs-infra-marquee .cs-ticker-pause {color: #15263b; background: #fff; border-color: #dce2ea;}
.cs-infrastructure #service-scope {scroll-margin-top: 100px;}
.cs-infra-area {height: 100%; padding: 2rem; border: 1px solid var(--cs-line);}
.cs-infra-area .cs-icon, .cs-infra-related .cs-icon {width: 2rem; height: 2rem; color: var(--cs-accent);}
.cs-infra-area h3 {font-size: 1.4rem; line-height: 1.5; margin: 1.5rem 0 .8rem;}
.cs-infra-area p {color: var(--cs-muted); font-size: .95rem;}
.cs-infra-area ul {padding-inline-start: 1.1rem; margin: 1.5rem 0 0;}
.cs-infra-area li {font-size: .9rem; line-height: 1.8; padding-inline-start: .3rem; margin-bottom: .7rem;}
.cs-infra-area li::marker {color: var(--cs-accent);}
.cs-infra-cases {background: #15263b; color: #fff;}
.cs-infra-cases article {border-top: 1px solid #647086; padding-top: 1.8rem;}
.cs-infra-cases h3 {font-size: 1.5rem; line-height: 1.5; margin-bottom: 1rem;}
.cs-infra-cases article p {color: #c8d3e1;}
.cs-infra-process {list-style: none; margin: 0; padding: 0; counter-reset: stage;}
.cs-infra-process li {counter-increment: stage; position: relative; padding: 0 0 1.7rem; padding-inline-start: 4.3rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--cs-line);}
.cs-infra-process li::before {content: counter(stage, decimal-leading-zero); position: absolute; inset-inline-start: 0; color: var(--cs-accent); border: 1px solid var(--cs-line); padding: .5rem; font-size: .85rem;}
.cs-infra-process h3 {font-size: 1.4rem;}
.cs-infra-process p {color: var(--cs-muted); margin-bottom: 0;}
.cs-infra-related {display: block; border: 1px solid var(--cs-line); padding: 2rem; height: 100%; color: var(--cs-ink); text-decoration: none;}
.cs-infra-related:hover {background: var(--cs-surface);}
.cs-infra-related h3 {font-size: 1.5rem; margin-top: 1.5rem;}
.cs-infra-related p {color: var(--cs-muted);}
.cs-infra-related > span {color: var(--cs-accent); font-size: 1.4rem;}
@media (max-width: 767px) {.cs-infra-hero {padding-bottom: 3rem;} .cs-infra-visual img {height: 320px;} .cs-infra-area {padding: 1.5rem;}}

.cs-infra-brand--dark {background: #15263b;}
.cs-infra-brand--dark img {width: 142px; height: 56px;}

.cs-infra-brand--caption {flex-direction: column; gap: 4px;}
.cs-infra-brand--caption img {width: 100px; height: 38px;}
.cs-infra-brand--caption span {font: 600 14px/1.2 Arial, sans-serif; color: #15263b;}

.cs-infra-brand--dark > span {color: #fff;}
.cs-connected-heading {display:flex;align-items:end;justify-content:space-between;gap:1.5rem;}
.cs-connected-controls {display:flex;gap:.6rem;flex-shrink:0;}
.cs-connected-controls[hidden] {display:none;}
.cs-connected-controls button {width:48px;height:48px;border:1px solid var(--cs-line);background:var(--cs-bg);color:var(--cs-ink);border-radius:50%;font-size:1.5rem;transition:background .2s,color .2s;}
.cs-connected-controls button:hover:not(:disabled) {background:var(--cs-accent);color:#fff;}
.cs-connected-controls button:disabled {opacity:.3;cursor:default;}
.cs-connected-track {display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;list-style:none;padding:0 0 12px;margin:2rem 0 0;scrollbar-width:thin;}
.cs-connected-slide {flex:0 0 calc((100% - 48px)/3);min-width:0;scroll-snap-align:start;}
.cs-connected-slide .cs-infra-related {display:flex;flex-direction:column;}
.cs-connected-slide .cs-infra-related>span {margin-top:auto;padding-top:1rem;font-size:1.75rem;}
.cs-connected-slide .cs-capability-icon {width:36px;height:36px;fill:var(--cs-accent);flex-shrink:0;}
.cs-connected-footer {display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;color:var(--cs-muted);}
.cs-connected-footer [data-cs-slider-status] {direction:ltr;font-variant-numeric:tabular-nums;}
.cs-connected-track:focus-visible,.cs-connected-controls button:focus-visible {outline:2px solid var(--cs-accent);outline-offset:4px;}
@media(max-width:991px){.cs-connected-slide {flex-basis:calc((100% - 24px)/2);}}
@media(max-width:575px){.cs-connected-slide {flex-basis:100%;}.cs-connected-heading {align-items:start;flex-direction:column;}}
.cs-slider-ready .cs-connected-track {scrollbar-width:none;}
.cs-slider-ready .cs-connected-track::-webkit-scrollbar {display:none;}
