/* NorthGate family beam scene (brand/ng-family/beam-scene.css).
   The scene's own rules from the selected northgatestrategic.com design (Codex dceaaed + 4b0c906,
   assets/site.css), declarations unchanged. Two kinds of NG rule are not here:
   - placement: NG bleeds .hero-art past its grid column (width: calc(100% + 65px); margin-left: -40px,
     with steps at 1600/1150/800/550 px). Placement belongs to each page: size .hero-art (or the box
     around it) from the site's own CSS, e.g. `.hero .hero-art { width: min(100%, 374px); margin: 24px auto 0 }`.
   - NG's page-wide resets the scene leans on (button { font: inherit }, figure { margin: 0 }, the
     tap-highlight and touch-action rules, the focus ring) are folded into the scene selectors below,
     so the scene looks the same on a page that has other resets.
   Uses --quiet and --text when the page defines them, with NG's values as fallbacks. */

.hero-art { position: relative; margin: 0; }
.beam-scene { display: block; width: 100%; height: auto; aspect-ratio: 760/650; overflow: visible; contain: layout style; }
.hero-art figcaption { text-align: center; font-size: 12px; line-height: 1.8; margin-top: 8px; color: #b8b8bb; }
.hero-art figcaption span { display: block; color: var(--quiet, #808080); font-size: 10px; margin-top: 4px; }

/* the Pause motion / Resume motion control; hidden until beam-scene.js runs */
.motion-control { font: inherit; display: block; margin: 15px auto 0; background: none; border: 0; border-bottom: 1px solid #ffffff16; color: #999; padding: 4px 8px; font-size: 10px; cursor: pointer; min-height: 28px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.motion-control:hover { color: white; }
.motion-control:focus-visible { outline: 2px solid var(--text, #ededed); outline-offset: 6px; border-radius: 3px; }
.motion-control[hidden] { display: none; }
/* keeps the control's 15 + 28 px while it is hidden (no JS yet, or none), so nothing moves when it appears */
.hero-art:has(.motion-control[hidden]) { padding-bottom: 43px; }

@media (max-width: 1150px) { .hero-art figcaption span { max-width: 245px; margin-inline: auto; } }
@media (max-width: 800px) { .hero-art figcaption span { max-width: none; } .hero-art figcaption { margin-top: -5px; } }
@media (max-width: 550px) { .hero-art figcaption { margin-top: 0; font-size: 11px; } .hero-art figcaption span { font-size: 9px; } }

/* reduced motion: beam-scene.js paints one still frame; the control keeps its space but is not shown */
@media (prefers-reduced-motion: reduce) { .motion-control { visibility: hidden; } }