/* Asset Manager 2 page — page-scoped styles. Builds on bundle.css tokens (:root vars).
   The interactive "asset wheel" graphic is the <asset-wheel> custom element in js/asset-manager-2.js
   (shadow DOM; it reads the site's --brand-primary / --background-default tokens by inheritance). */

/* ---- hero: copy on top, wheel centred below ---- */
.am2-hero { padding-top: 8rem; padding-bottom: 3rem; }
.am2-center { justify-content: center; flex-wrap: wrap; }
.am2-hero-graphic { max-width: 65rem; margin: 4rem auto 0; }
asset-wheel { display: block; width: 100%; }
/* reserve the wheel's height before the script runs, so the page doesn't jump */
asset-wheel:not(.am2-ready) { aspect-ratio: 1040 / 1040; }

/* ---- responsive ---- */
@media screen and (max-width: 991px) {
  .am2-hero { padding-top: 6rem; }
  .am2-hero-graphic { margin-top: 3rem; }
}
@media screen and (max-width: 767px) {
  .am2-hero { padding-top: 5.5rem; padding-bottom: 2rem; }
  .am2-hero-graphic { margin-top: 2.5rem; }
  asset-wheel:not(.am2-ready) { aspect-ratio: 390 / 900; }
}