/* A single atmosphere, ending before the approved service planes. */
.oc-site .oc-intro{isolation:isolate}
.oc-site .oc-intro::before{display:none}
.oc-hero-atmosphere{position:absolute;inset:0 0 auto;height:var(--oc-atmosphere-height,480px);overflow:hidden;pointer-events:none;z-index:-1;isolation:isolate;contain:paint}
.oc-hero-atmosphere::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0d0cf5 0%,#0b0d0ce6 34%,#0b0d0ca6 63%,#0b0d0c55 100%),linear-gradient(180deg,#0b0d0caa 0%,transparent 42%,#0b0d0c 100%);z-index:2}
.oc-hero-atmosphere canvas{position:absolute;right:-7%;top:8%;width:65%;height:100%;opacity:.78}
.oc-hero-no-webgl::before{content:'';position:absolute;right:-7%;top:8%;width:65%;height:100%;opacity:.65;background:url('../images/connected-sculpture.svg') center/contain no-repeat}
.oc-hero-growth{position:absolute;right:0;bottom:0;width:57%;height:80%;opacity:.65;overflow:visible}
.oc-hero-growth .oc-growth-grid{stroke:#a7adaa;stroke-width:1;opacity:.11;fill:none}
.oc-hero-growth .oc-growth-bar{fill:#16c784;fill-opacity:.09;stroke:#a7adaa;stroke-opacity:.35;stroke-width:1}
.oc-hero-growth .oc-growth-path{stroke:#16c784;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.oc-hero-growth .oc-growth-point{fill:#39ff88}
.oc-site .oc-intro>.oc-container{z-index:1}
@media(max-width:800px){
 .oc-hero-atmosphere canvas{left:0;right:0;top:24%;width:100%;height:60%;opacity:.65}
 .oc-hero-no-webgl::before{left:0;right:0;top:24%;width:100%;height:60%;opacity:.5}
 .oc-hero-atmosphere::after{background:linear-gradient(180deg,#0b0d0cee 0%,#0b0d0ccc 32%,#0b0d0ca6 65%,#0b0d0c 100%)}
 .oc-hero-growth{width:100%;right:0;height:60%;opacity:.45}
 /* Only the mobile advertising diagram: center both marks and business action. */
 .oc-site .oc-hero-ads-diagram{padding:12px 8px;gap:8px;align-items:center}
 .oc-site .oc-hero-ads-diagram::before{inset:5px;transform:none}
 .oc-site .oc-hero-ads-diagram .oc-hero-mark-row{gap:8px;min-height:30px}
 .oc-site .oc-hero-ads-diagram .oc-hero-mark,.oc-site .oc-hero-ads-diagram .oc-hero-mark img{width:30px!important;height:30px!important}
 .oc-site .oc-hero-ads-diagram p.oc-hero-diagram-label{width:100%;max-width:100%;flex:0 0 auto;align-self:center;text-align:center;line-height:1.35;padding:0 3px;margin:0;white-space:normal}
}
@media(prefers-reduced-motion:reduce){.oc-hero-atmosphere{opacity:.65}}