/* Section headings set inside a small cloud (user request). Loaded last.
   The cloud is a ::before built from soft radial gradients, roughened by the inline SVG noise filter
   (#rc-cloud-a / #rc-cloud-b in index.html) so its edges read as natural wisps. Every gradient fades to
   transparent inside the box, so there is never an image edge. Section agents must leave ::before alone here. */
:root {
  --rc-cloud-shape:
    radial-gradient(ellipse 50% 46% at 50% 54%, #fff 0 66%, #fff0 90%),
    radial-gradient(ellipse 17% 30% at 20% 30%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 21% 36% at 44% 20%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 17% 31% at 68% 26%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 12% 30% at 9% 60%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 13% 30% at 91% 54%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 14% 22% at 80% 34%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 48% 22% at 52% 80%, #dbe4ee 0 55%, #dbe4ee00 90%),
    radial-gradient(ellipse 13% 30% at 93% 62%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 44% 9% at 52% 97%, #7f95b155 0 30%, #7f95b100 100%);
  --rc-cloud-shape-2:
    radial-gradient(ellipse 50% 45% at 50% 56%, #fff 0 66%, #fff0 90%),
    radial-gradient(ellipse 22% 38% at 27% 25%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 15% 28% at 51% 30%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 19% 34% at 73% 23%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 10% 26% at 8% 60%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 11% 25% at 93% 58%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 48% 20% at 50% 82%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 12% 28% at 10% 68%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 44% 9% at 52% 97%, #7f95b155 0 30%, #7f95b100 100%);
  --rc-cloud-shape-3:
    radial-gradient(ellipse 50% 46% at 50% 55%, #fff 0 66%, #fff0 90%),
    radial-gradient(ellipse 14% 26% at 16% 37%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 16% 30% at 34% 27%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 26% 42% at 62% 19%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 12% 24% at 86% 40%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 11% 28% at 94% 63%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 9% 22% at 6% 62%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 46% 21% at 54% 81%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 11% 26% at 95% 70%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 44% 9% at 52% 97%, #7f95b155 0 30%, #7f95b100 100%);
  --rc-cloud-shape-4:
    radial-gradient(ellipse 50% 45% at 50% 56%, #fff 0 66%, #fff0 90%),
    radial-gradient(ellipse 24% 40% at 30% 21%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 22% 36% at 70% 23%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 12% 26% at 50% 33%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 11% 28% at 7% 58%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 12% 28% at 92% 60%, #fff 0 58%, #fff0 86%),
    radial-gradient(ellipse 47% 20% at 48% 82%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 12% 30% at 6% 66%, #dbe4ee 0 55%, #dbe4ee00 88%),
    radial-gradient(ellipse 44% 9% at 52% 97%, #7f95b155 0 30%, #7f95b100 100%);
}
:is(#outbound-title, #outbound .outbound-subhead h3, #outbound #security-title, #capacity-title) {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.7em;
  margin-bottom: 1.15em;
}
:is(#outbound-title, #outbound .outbound-subhead h3, #outbound #security-title, #capacity-title)::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Never reach past the page gutter: a cloud clipped by the viewport edge would show a straight border. */
  inset: -0.95em -1.15em -1.05em calc(-1 * min(1.1em, var(--rc-gutter) - 4px));
  pointer-events: none;
  filter: url(#rc-cloud-a);
  will-change: transform;
  background: var(--rc-cloud-shape);
  animation: rc-cloud-float 9s ease-in-out infinite alternate;
}
/* Each heading gets its own silhouette and its own noise seed, so no two clouds match. Drift is staggered. */
#outbound .outbound-subhead h3::before { background: var(--rc-cloud-shape-2); filter: url(#rc-cloud-b); }
#outbound #security-title::before { background: var(--rc-cloud-shape-3); filter: url(#rc-cloud-c); }
#capacity-title::before { background: var(--rc-cloud-shape-4); filter: url(#rc-cloud-d); }
#outbound .outbound-subhead h3::before { animation-delay: -3s; }
#outbound #security-title::before { animation-delay: -6s; }
#capacity-title::before { animation-delay: -1.5s; }

@keyframes rc-cloud-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(4px, -4px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) :is(#outbound-title, #outbound .outbound-subhead h3, #outbound #security-title, #capacity-title)::before { animation: none; }
}
/* Belt and braces against sideways scroll from the right-hand overhang.
   overflow: clip does not create a scroll container, so the sticky hero keeps working. */
main { overflow-x: clip; }

@media (max-width: 620px) {
  :is(#outbound-title, #outbound .outbound-subhead h3, #outbound #security-title, #capacity-title)::before {
    inset: -0.8em -0.62em -0.95em calc(-1 * min(0.55em, var(--rc-gutter) - 3px));
  }
}

/* Scattered sky behind the VanillaSoft proof (user request). Three depths: far clouds are small, faint and
   softened; near ones are larger and crisper and drift further on scroll, which gives the parallax. */
#proof { position: relative; isolation: isolate; }
#proof > .wrap { position: relative; z-index: 1; }
#proof .case-atmosphere {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}
#proof .sky-cloud {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 2.4;
  background: var(--rc-cloud-shape);
  will-change: transform;
}
#proof .sky-cloud:nth-child(4n + 2) { background: var(--rc-cloud-shape-2); }
#proof .sky-cloud:nth-child(4n + 3) { background: var(--rc-cloud-shape-3); }
#proof .sky-cloud:nth-child(4n) { background: var(--rc-cloud-shape-4); }
#proof .sky-cloud--far { opacity: 0.5; filter: url(#rc-cloud-b) blur(2px); }
#proof .sky-cloud--mid { opacity: 0.78; filter: url(#rc-cloud-a) blur(0.6px); }
#proof .sky-cloud--near { opacity: 0.95; filter: url(#rc-cloud-b); }
@supports (animation-timeline: view()) {
  #proof .sky-cloud {
    animation: rc-sky-parallax linear both;
    animation-timeline: view();
    animation-range: cover;
  }
}
@keyframes rc-sky-parallax {
  from { transform: translate3d(0, var(--lift), 0); }
  to { transform: translate3d(0, calc(-1 * var(--lift)), 0); }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) #proof .sky-cloud { animation: none; }
}
/* Phones: fewer, larger clouds kept to the edges so the centred copy stays clean. */
@media (max-width: 760px) {
  #proof .sky-cloud { width: calc(var(--w) * 2.2); }
  #proof .sky-cloud:nth-child(4), #proof .sky-cloud:nth-child(6) { display: none; }
  #proof .sky-cloud--near { opacity: 0.8; }
}

/* The same scattered depth clouds, carried through the rest of the page (user request). Each section is its own
   stacking context and the field sits at z-index -1 inside it: in front of the fixed skyline, behind every bit
   of the section's content. Clouds keep mostly to the side margins so copy stays clean. */
:is(#services, #capacity, #expertise, #outbound, #partnership) { position: relative; isolation: isolate; }
.sky-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sky-field .sky-cloud {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 2.4;
  background: var(--rc-cloud-shape);
  will-change: transform;
}
.sky-field .sky-cloud:nth-child(4n + 2) { background: var(--rc-cloud-shape-2); }
.sky-field .sky-cloud:nth-child(4n + 3) { background: var(--rc-cloud-shape-3); }
.sky-field .sky-cloud:nth-child(4n) { background: var(--rc-cloud-shape-4); }
.sky-field .sky-cloud--far { opacity: 0.5; filter: url(#rc-cloud-b) blur(2px); }
.sky-field .sky-cloud--mid { opacity: 0.78; filter: url(#rc-cloud-a) blur(0.6px); }
.sky-field .sky-cloud--near { opacity: 0.95; filter: url(#rc-cloud-b); }
@supports (animation-timeline: view()) {
  .sky-field .sky-cloud { animation: rc-sky-parallax linear both; animation-timeline: view(); animation-range: cover; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .sky-field .sky-cloud { animation: none; }
}
/* Phones: fewer, larger clouds; the far ones drop out. */
@media (max-width: 760px) {
  .sky-field .sky-cloud { width: calc(var(--w) * 2.2); }
  .sky-field .sky-cloud--far { display: none; }
  .sky-field .sky-cloud--near { opacity: 0.8; }
}