/* Main section titles share the hero headline weight. */
main h2{font-weight:500!important}
/* Compact solution cards retain their stagger and the wave beneath them. */
.solutions-reference .solution-cards .solution-caption{min-height:0;padding:16px 14px}
.solutions-reference .solution-caption .solution-meta{margin-bottom:12px}
.solutions-reference .solution-cards p{margin-bottom:0;padding-right:0}
/* Faint network connections and independently timed, restrained pulses. */
.ns-map .ns-network-links{fill:none;stroke:#67caff;stroke-width:.5;stroke-opacity:.17;pointer-events:none}
.network-showcase .ns-marker{animation:nsIndependentPulse var(--pulse-duration,6s) ease-in-out var(--pulse-delay,0s) infinite;animation-play-state:paused}
.network-showcase.ns-map-running .ns-marker{animation-play-state:running}
@keyframes nsIndependentPulse{0%,100%{opacity:.64}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.network-showcase .ns-marker{animation:none;opacity:1}}

/* One responsive size for all section headings, taken from Flexible Solutions. */
main{--section-heading-size:clamp(38px,3.65vw,58px)}
main h2{font-size:var(--section-heading-size)!important}
@media(min-width:1200px){main{--section-heading-size:clamp(38px,3.4vw,54px)}}
@media(max-width:900px){main{--section-heading-size:42px}}
@media(max-width:550px){main{--section-heading-size:36px}}

.network-showcase .ns-stat strong{font-weight:500}

/* Reference-inspired, softly lit navy and indigo network backdrop. */
.network-showcase{
 background:
  linear-gradient(to bottom,#03111d 0%,transparent 20%,transparent 78%,#03111d 100%),
  radial-gradient(ellipse at 88% 45%,#1b124b99 0%,transparent 65%),
  radial-gradient(ellipse at 33% 60%,#0b35544d 0%,transparent 58%),
  linear-gradient(110deg,#03090f 0%,#070e20 55%,#100d2c 100%);
}
.network-showcase::after{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:linear-gradient(125deg,transparent 48%,#2987c51f 56%,#429ada30 60%,transparent 69%,#338ac021 78%,transparent 88%);
 filter:blur(28px);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 72%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 72%,transparent 100%);
}

/* Carry the network's softly lit palette into the hero's left editorial field. */
.hero::after{
 background:
  radial-gradient(ellipse at -10% 44%,#24577738 0%,transparent 29%),
  radial-gradient(ellipse at -8% 12%,#26204a2b 0%,transparent 25%),
  linear-gradient(90deg,#040a10 0%,#03090f 27%,#03090ff5 41%,#030a12c2 47%,#030a1266 53%,#030a121a 60%,transparent 68%);
}
@media(max-width:900px){.hero::after{background:radial-gradient(ellipse at -12% 40%,#245a832b,transparent 38%),linear-gradient(90deg,#03090ff5 0%,#03090fdd 32%,#030a1280 58%,#030a1233 100%)}}
@media(max-width:650px){.hero::after{background:radial-gradient(ellipse at -15% 30%,#284e7326,transparent 40%),linear-gradient(90deg,#03090fed,#030a12a6 70%,#030a1266),linear-gradient(0deg,#03111dc9,transparent 65%)}}
/* Equal spacing between heading, supporting paragraph and network CTA. */
.network-showcase .ns-copy>p:not(.eyebrow){margin-top:24px;margin-bottom:24px}

/* Network and activation form one uninterrupted navy sequence. */
.connected-activation,.connected-activation.ca-desktop{background:#03111d;color:#fff}
.connected-activation .ca-pin,.connected-activation.ca-desktop .ca-pin{background:transparent}
.connected-activation .ca-pin::before,.connected-activation.ca-desktop .ca-pin::before{display:none}
.connected-activation .ca-heading h2{color:#fff}
.connected-activation .ca-heading>p:not(.eyebrow){color:#c5d5e2}
.connected-activation .ca-heading .eyebrow{color:var(--blue)}
.connected-activation .ca-pin{padding-bottom:48px}
.connected-activation.ca-desktop{height:280svh;padding-bottom:0}
.connected-activation.ca-desktop .ca-pin{padding-bottom:28px}
.activation-audience-wave{height:100px;margin-top:-1px;background:#03111d;line-height:0;position:relative}
.activation-audience-wave svg{display:block;width:100%;height:100%}
.right-audience{margin-top:0;border-radius:0;box-shadow:none;background:#f7f8fb}
@media(max-width:900px){.activation-audience-wave{height:80px}}
@media(max-width:650px){.connected-activation .ca-pin{padding-bottom:38px}.activation-audience-wave{height:60px}}
@media(prefers-reduced-motion:reduce){.connected-activation.ca-desktop{height:auto}}

/* Reference treatment for the activation editorial, retaining the existing cards. */
.connected-activation .ca-heading .ca-activation-word{color:#26a9e8}
.connected-activation .ca-inner{align-items:start}
.connected-activation .ca-pin{padding-top:20px}
.connected-activation.ca-desktop .ca-pin{align-items:flex-start;padding-top:20px}
.connected-activation .ca-heading{padding-top:15px}
.connected-activation .ca-heading .eyebrow{margin-bottom:20px}
.connected-activation .ca-heading>p:not(.eyebrow){margin-top:25px;line-height:1.45;color:#c5d5e2}
.connected-activation .ca-explore{margin-top:22px;background:#fff;color:#081522;border-color:#fff;padding:15px 25px;gap:25px;font-size:14px}
.connected-activation .ca-explore:hover{background:#eaf3fc}
@media(max-width:650px){.connected-activation .ca-pin{padding-top:26px}.connected-activation .ca-heading{padding-top:0}.connected-activation .ca-heading>p:not(.eyebrow){margin-top:20px}}

/* Tighten the handover from the partner logos to How It Works. */
.network-showcase .ns-container{padding-bottom:12px}
.connected-activation .ca-pin,.connected-activation.ca-desktop .ca-pin{padding-top:12px}
.connected-activation .ca-heading{padding-top:0}

/* Raise the activation graphic relative to the editorial eyebrow. */
@media(min-width:1200px){.connected-activation .ca-graphic{margin-top:-76px}}
@media(min-width:651px) and (max-width:1199px){.connected-activation .ca-graphic{margin-top:-18px}}
@media(max-width:650px){.connected-activation .ca-graphic{margin-top:-12px}}

/* Editorial left, activation cards right, retaining the established widths. */
@media(min-width:1200px){
 .connected-activation .ca-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .connected-activation .ca-heading{grid-column:1;grid-row:1;justify-self:start}
 .connected-activation .ca-graphic{grid-column:2;grid-row:1}
}
/* Network-inspired atmosphere, dissolving into the photograph at platform's o. */
.hero{background-color:#03111d}
.hero::after{
 background:
  radial-gradient(ellipse at 20% 55%,#245d8538 0%,transparent 38%),
  radial-gradient(ellipse at 38% 28%,#28204f59 0%,transparent 47%),
  linear-gradient(110deg,#03090f 0%,#070e20 55%,#100d2c 100%);
 -webkit-mask-image:linear-gradient(90deg,#000 0px,#000 var(--hero-fade-start,55%),transparent calc(var(--hero-fade-start,55%) + 22vw));
 mask-image:linear-gradient(90deg,#000 0px,#000 var(--hero-fade-start,55%),transparent calc(var(--hero-fade-start,55%) + 22vw));
}

/* Carry the network's blue and indigo atmosphere throughout activation. */
.connected-activation,.connected-activation.ca-desktop{
 background:
  linear-gradient(to bottom,#03111d 0%,transparent 20%,transparent 78%,#03111d 100%),
  radial-gradient(ellipse at 88% 45%,#1b124b99 0%,transparent 65%),
  radial-gradient(ellipse at 33% 60%,#0b35544d 0%,transparent 58%),
  linear-gradient(110deg,#03090f 0%,#070e20 55%,#100d2c 100%);
}
.connected-activation .ca-pin,.connected-activation.ca-desktop .ca-pin{
 background:linear-gradient(to bottom,#03111d 0%,transparent 22%,transparent 76%,#03111d 100%),linear-gradient(125deg,transparent 48%,#2987c51f 56%,#429ada26 60%,transparent 69%,#338ac01a 78%,transparent 88%);
}

/* Trial treatment: white editorial card against the shared navy background. */
.connected-activation .ca-heading{
 background:#fff;border-radius:22px;padding:30px;
 box-shadow:0 16px 44px #00000029,0 3px 12px #00000012;
}
.connected-activation .ca-heading h2{color:#061624}
.connected-activation .ca-heading>p:not(.eyebrow){color:#586b7c}
.connected-activation .ca-explore{background:#edf5ff;border-color:#e0ebf7;color:#081522}
.connected-activation .ca-explore:hover{background:#dfeeff}
@media(max-width:650px){.connected-activation .ca-heading{padding:25px 22px;border-radius:18px}}

/* Equal network copy gaps, with the CTA slightly lower in the stack. */
.network-showcase .ns-copy{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.network-showcase .ns-copy>.eyebrow{margin-bottom:-8px}
.network-showcase .ns-copy>h2,.network-showcase .ns-copy>p:not(.eyebrow){margin:0}
/* Mirror the audience columns while preserving the collage's internal layout. */
@media(min-width:901px){
 .right-audience .ra-container{grid-template-columns:62% 38%}
 .right-audience .ra-collage{grid-column:1;grid-row:1}
 .right-audience .ra-copy{grid-column:2;grid-row:1;padding-right:0;padding-left:42px}
}
@media(min-width:901px) and (max-width:1199px){.right-audience .ra-copy{padding-left:28px}}
@media(min-width:1600px){.right-audience .ra-copy{padding-left:50px}}