.particle-viewer { margin: 55px 0 80px; border: 1px solid #3d3f35; background: #151612; }
.particle-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: clamp(24px,4vw,48px); border-bottom: 1px solid #3d3f35; }
.particle-heading h2 { font-size: clamp(34px,4.3vw,60px); line-height: 1.02; }
.particle-heading .eyebrow { margin-bottom: 18px; }
.particle-heading > p { max-width: 30ch; font-size: 15px; }
.particle-stage { position: relative; height: clamp(360px,48vw,620px); overflow: hidden; background: radial-gradient(ellipse at center,#292c20 0%,#111211 70%); isolation: isolate; }
.particle-stage .particle-photo { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; z-index: 2; pointer-events: none; }
.particle-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.particle-corner { position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none; }
.corner-tl { top: 24px; left: 24px; border-top: 1px solid #e8ed32; border-left: 1px solid #e8ed32; }
.corner-br { bottom: 24px; right: 24px; border-bottom: 1px solid #e8ed32; border-right: 1px solid #e8ed32; }
.particle-viewer [hidden] { display: none !important; }
.home-particle-stage { position: relative; isolation: isolate; overflow: hidden; }
.home-particle-stage > img { position: relative; z-index: 1; transform: none !important; }
.home-particle-stage .particle-canvas { z-index: 0; }
.home-particle-stage figcaption { z-index: 3; }
.home-particle-stage::after { z-index: 2; pointer-events: none; }
@media(max-width:600px) {
  .particle-viewer { margin: 32px 0 45px; }
  .particle-heading { display: block; padding: 24px 20px; }
  .particle-heading > p { margin-top: 20px; }
  .particle-stage { height: min(115vw,480px); min-height: 300px; }
}
@media(prefers-reduced-motion:reduce) { .particle-canvas { display: none; } .particle-stage .particle-photo,.home-particle-stage > img { opacity: 1 !important; } }

.particle-pause { position: absolute; z-index: 4; right: 12px; bottom: 8px; min-width: 70px; min-height: 44px; padding: 8px 12px; font: 12px Arial,sans-serif; color: #e3e5dc; background: #151612ed; border: 1px solid #54574b; cursor: pointer; }
.particle-pause:hover { color: #e8ed32; border-color: #e8ed32; }
.particle-pause:focus-visible { outline: 2px solid #e8ed32; outline-offset: 3px; }