/* One outer canvas, matching the existing 1600px hero maximum.
   Inner text columns retain their readable widths. No transform, mask or
   containment on the canvas: fixed navigation, sticky TOC and glass stay live. */
:root {
  --site-max-width: 1600px;
  --site-width: min(100vw, var(--site-max-width));
  /* Reserve the scrollbar before GSAP measures the centered fixed stage. */
  scrollbar-gutter: stable;
}
.site-canvas {
  position: relative;
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
  overflow-x: clip;
}

/* The orbit, its copy and its shadows share this bounded stage. Zooming out
   must not expose a taller slice of the wheel or lengthen the scroll journey. */
@media (min-width: 761px) {
  .services-orbit:not(.services-native) .services-stage {
    height: min(100svh, 900px);
  }
  .services-orbit:not(.services-native) .services-copy {
    margin-left: max(32px, calc((100% - 1320px) / 2));
  }
  .services-orbit:not(.services-native) .services-scroll-hint {
    left: max(32px, calc((100% - 1320px) / 2));
  }
}

/* A foreground copy of the ambient background fades the two edges into the
   actual background, without flattening the glass or masking page content.
   Below the canvas maximum, keep the established desktop/mobile edge crops. */
.aurora.site-edge-fade { display: none; }
@media (min-width: 1601px) {
  .aurora.site-edge-fade {
    display: block;
    z-index: 45;
    pointer-events: none;
    --edge-mask: linear-gradient(to right,
      #000 calc(50% - 800px), transparent calc(50% - 788px),
      transparent calc(50% + 788px), #000 calc(50% + 800px));
    -webkit-mask-image: var(--edge-mask);
    mask-image: var(--edge-mask);
  }
}