:root{
  --charcoal:#071719; --dteal:#0D3336; --teal:#20B7B0; --teal-soft:#DDF4F1;
  --warm:#FAF8F3; --ivory:#F2EEE6; --text:#142629; --text-2:#657276;
  --line:rgba(13,51,54,.12); --line-2:rgba(13,51,54,.08);
  --card-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -18px rgba(7,23,25,.28),0 2px 6px rgba(7,23,25,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--text);background:var(--warm);-webkit-font-smoothing:antialiased}
img{display:block}

/* shared 1600x900 stage, scaled to fit the viewport (--s set in scene.js) */
.stage{width:1600px;height:900px;position:relative;flex:none;transform-origin:center;transform:scale(var(--s,1))}
/* centre it in its section: as a 1600px grid item it made the track 1600px wide, so on screens narrower than that the
   scaled stage started too far right and the cards and nav were clipped */
@media (min-width:861px){
  .hero>.stage,.scene2>.stage{position:absolute;left:50%;top:50%;margin:-450px 0 0 -800px}
}

/* illustrated avatars: an <img> carrying the same .av sizing as the initials badges it replaces */
img.av{display:block;object-fit:cover;background:none!important;padding:0;border-radius:50%}
img.av.team{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #34B5A4}