/* story3d/hero/services.css — the "All services" hero loop (2026-10-20). Namespaced .svc3d; nothing here
   reaches the stories. The box keeps the old SVG art's 23:19 aspect (the .art container sets it).
   Labels are real HTML pills (white, navy Inter 600), placed at the rest pose by the HTML and moved
   by services.js while the 3D runs. Amber is only ever a shape (the accent bar), never text. */
.svc3d{position:absolute;inset:0;}
.svc3d-view{position:absolute;inset:0;}
.svc3d-still,.svc3d-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.svc3d-still{object-fit:contain;}
.svc3d-gl{opacity:0;}
.svc3d.is-3d .svc3d-gl{opacity:1;}
.svc3d.is-3d .svc3d-still{visibility:hidden;}
.svc3d-labels{position:absolute;inset:0;pointer-events:none;}
.svc3d-label{
  position:absolute;white-space:nowrap;
  background:#fff;color:var(--navy,#1E3A5F);font-family:var(--sans,'Inter',sans-serif);font-size:14px;font-weight:600;
  letter-spacing:-.005em;line-height:1;padding:9px 14px 10px;border-radius:999px;border:1px solid rgba(30,58,95,.10);
  box-shadow:0 1px 2px rgba(30,58,95,.08),0 10px 24px -10px rgba(30,58,95,.35),0 0 0 calc(var(--a,0) * 2px) rgba(228,183,35,.55);
}
/* the amber accent: a short bar under the word while the bee visits (a shape, never text color) */
.svc3d-label::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:2px;
  background:var(--amber,#E4B723);transform:scaleX(var(--a,0));transform-origin:50% 50%;}
/* pause / play: the stories' motion button (44x44, white, navy icon) */
.svc3d-pause{position:absolute;right:0;bottom:0;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--navy,#1E3A5F);border:1px solid rgba(30,58,95,.14);
  box-shadow:0 1px 2px rgba(30,58,95,.06),0 10px 22px -12px rgba(30,58,95,.4);}
.svc3d-pause[hidden]{display:none;}
.svc3d-pause .i-play{display:none;}
.svc3d-pause[data-paused] .i-pause{display:none;}
.svc3d-pause[data-paused] .i-play{display:block;}
.svc3d-pause:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){ .svc3d-pause:hover{background:var(--canvas,#F7F7F7);} }
@media (max-width:860px){
  .svc3d-label{font-size:12px;padding:7px 10px 8px;}
  .svc3d-label::after{left:10px;right:10px;bottom:2px;height:2.5px;}
}
@media (prefers-reduced-motion:reduce){ .svc3d-pause{display:none;} }
html.s3d-capture .svc3d-pause{display:none;}