/* Studio section (#company): the rotating globe (globe.js) replaces the template's radial diagram.
   The ellipse icons stay in the layout, hidden: globe.js reads their --scale-progress and opacity
   (set by the section's scroll timelines) to grow and fade the same way. The lines and names are
   drawn on the globe instead, so the template's spinning lines are taken out. */
#company .globe-icon { visibility: hidden; }
#company .location-line { display: none; }

.pw-globe {
  pointer-events: none;
}
.pw-globe canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* desktop: a twin of .company-viewport (pinned the same way), just before it */
#company > .pw-globe--desk {
  position: sticky;
  top: 0;
  height: 100lvh;
  margin-bottom: -100lvh;
  overflow: hidden;
}
/* phones and tablets: inside .content-wrap, which is pinned where the viewport is; behind its
   titles and the white circle */
#company .content-wrap > .pw-globe--mob {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* the canvas text must not pick up the heading type of .content-wrap (h2) on phones */
.pw-globe {
  letter-spacing: normal;
  font-size: 1rem;
  line-height: normal;
}

/* the glass globe (globe-glass.js): a fixed full-screen layer, so the globe never travels with
   the scrolling content; globe-glass.js clips it to the section and places the canvas in the gap
   between the titles. Desktop: just before .company-viewport. Phones: inside .content-wrap,
   behind its titles and the white circle. */
#company .pw-glass {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  letter-spacing: normal;
  font-size: 1rem;
  line-height: normal;
}
#company .content-wrap > .pw-glass--mob { z-index: -1; }
#company .pw-glass canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* the ring globe (globe-rings.js) uses the same fixed layer: class "pw-glass pw-rings". The canvas
   is drawn at its on-screen size (no scaling), so the 1px lines stay crisp. */
#company .pw-rings canvas { will-change: auto; }