/* Background artwork: service icons (search, ads, social, web, AI, email, analytics…) as constellations among stars,
   orbits and planets, behind sections that have a plain colour. Navy art on light sections, pale art on navy ones.
   Artwork: assets/img/cosmos/*.svg, drawn by aiomp-hosting-wp-src/tools/cosmos.js; the moving versions (*-live.svg)
   are swapped in by cosmos-live.css.
   On/off: Appearance → Customize → Background icons (adds body.aio-cosmos; motion adds body.aio-cosmos-live).
   Left alone: the animated sections (home hero, transformation, capabilities, growth, process), the site header and
   footer, and any section that paints its own background image. Only each widget's top-level section is decorated. */

.aio-cosmos { --cos-size: clamp(240px, 34vw, 540px); --cos-ink: clamp(200px, 25vw, 420px); }

/* light sections: always on the right, where the design keeps short intros and white space (headings start at the left) */
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process) > .elementor-widget-container > :is(section, header):is([style*="background:#fff"], [style*="background:#F4F7F8"], [style*="background:#E4E9EC"]):not([style*="background-image"]) {
	background-image: url(../img/cosmos/ink-a.svg) !important;
	background-repeat: no-repeat !important;
	background-size: var(--cos-ink) auto !important;
	background-position: right max(-40px, calc(50% - 800px)) top 24px !important;
}
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process):nth-child(4n+2) > .elementor-widget-container > :is(section, header):is([style*="background:#fff"], [style*="background:#F4F7F8"], [style*="background:#E4E9EC"]):not([style*="background-image"]) {
	background-image: url(../img/cosmos/ink-b.svg) !important;
	background-position: right max(-40px, calc(50% - 800px)) bottom 16px !important;
}
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process):nth-child(4n+3) > .elementor-widget-container > :is(section, header):is([style*="background:#fff"], [style*="background:#F4F7F8"], [style*="background:#E4E9EC"]):not([style*="background-image"]) {
	background-image: url(../img/cosmos/ink-c.svg) !important;
	background-position: right max(-40px, calc(50% - 800px)) bottom 16px !important;
}
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process):nth-child(4n+4) > .elementor-widget-container > :is(section, header):is([style*="background:#fff"], [style*="background:#F4F7F8"], [style*="background:#E4E9EC"]):not([style*="background-image"]) {
	background-image: url(../img/cosmos/ink-d.svg) !important;
	background-position: right max(-40px, calc(50% - 800px)) top 24px !important;
}

/* navy sections and page headers */
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process) > .elementor-widget-container > :is(section, header)[style*="background:#093346"]:not([style*="background-image"]) {
	background-image: url(../img/cosmos/glow-a.svg) !important;
	background-repeat: no-repeat !important;
	background-size: var(--cos-size) auto !important;
	background-position: right max(-40px, calc(50% - 760px)) center !important;
}
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process):nth-child(4n+2) > .elementor-widget-container > :is(section, header)[style*="background:#093346"]:not([style*="background-image"]) {
	background-image: url(../img/cosmos/glow-b.svg) !important;
}
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process):nth-child(4n+3) > .elementor-widget-container > :is(section, header)[style*="background:#093346"]:not([style*="background-image"]) {
	background-image: url(../img/cosmos/glow-c.svg) !important;
}
.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process):nth-child(4n+4) > .elementor-widget-container > :is(section, header)[style*="background:#093346"]:not([style*="background-image"]) {
	background-image: url(../img/cosmos/glow-d.svg) !important;
}

/* phones: smaller clusters, still at each section's right edge */
@media (max-width: 640px) {
	.aio-cosmos { --cos-size: 220px; --cos-ink: 200px; }
}
@media print {
	.aio-cosmos .aio-page > .elementor-widget:not(.elementor-widget-aio-home-hero, .elementor-widget-aio-home-transformation, .elementor-widget-aio-home-capabilities, .elementor-widget-aio-home-growth, .elementor-widget-aio-home-process) > .elementor-widget-container > :is(section, header) { background-image: none !important; }
}