/* Asset Manager (G) page — page-scoped styles. Builds on bundle.css tokens (:root vars);
   type, buttons, fields, .section / .container / .padding-* and grounds come from bundle.css. */
:root {
  --amg-radius-sm: .75rem;
  --amg-radius-md: 1rem;
  --amg-radius-lg: 2rem;
  --amg-shadow-soft: 0 0 20px #00000033;
  --amg-shadow-deep: 0 22px 2.5em #00000066;
  --amg-scrim: #06060638;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.amg-anchor { scroll-margin-top: 5rem; }

/* ---- hero ---- */
.amg-hero { position: relative; min-height: clamp(40rem, 66.67vw, 56.25rem); background-color: var(--background-default); overflow: hidden; }
.amg-hero-media { position: absolute; inset: 0; }
.amg-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amg-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #060606d1 0%, #0606068c 36%, #06060600 60%),
    linear-gradient(180deg, #06060699 0%, #06060600 22%, #06060600 70%, #06060699 100%);
}
.amg-hero-body { position: relative; z-index: 2; padding-top: 11rem; padding-bottom: 8rem; }
.amg-hero-copy { max-width: 38.75rem; display: flex; flex-direction: column; gap: 1.5rem; }
.amg-hero-copy .paragraph-secondary { max-width: 30rem; }
.amg-btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- section heads ---- */
.amg-head { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.amg-head.is-solo { grid-template-columns: 1fr; }

/* ---- photo panels + overlay tags ---- */
.amg-photo { position: relative; aspect-ratio: 3 / 2; border-radius: var(--amg-radius-lg); overflow: hidden; background-color: var(--background-secondary-dark); }
.amg-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amg-tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--contrast-primary);
  color: var(--background-default);
  border-radius: var(--amg-radius-sm);
  padding: .625rem .875rem;
  box-shadow: var(--amg-shadow-soft);
  font-size: .8125rem;
  line-height: 1.125rem;
}
.amg-tag b { font-size: .9375rem; line-height: 1.25rem; font-weight: 500; }
.amg-tag .amg-model { font-size: .9375rem; line-height: 1.25rem; font-weight: 500; color: var(--brand-primary); }
.amg-tag small { color: var(--background-opacity-80); font-size: .75rem; line-height: 1rem; }
.amg-pin { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999em; background-color: var(--brand-primary); border: 3px solid var(--contrast-primary); }
/* Callout anchored at a point on the photo; position comes from --x / --y on the element */
.amg-callout { position: absolute; z-index: 2; left: var(--x); top: var(--y); }
.amg-callout .amg-tag { left: 1rem; top: -1.375rem; white-space: nowrap; }
.amg-callout.is-flip .amg-tag { left: auto; right: 1rem; }

/* ---- split photo: nameplate scan or list upload ---- */
.amg-split-half { position: absolute; inset: 0; overflow: hidden; }
.amg-split-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amg-split-half.is-left { clip-path: polygon(0 0, 55% 0, 43% 100%, 0 100%); }
.amg-split-half.is-left img { transform: translateX(-11.25%); }
.amg-split-half.is-right { clip-path: polygon(55% 0, 100% 0, 100% 100%, 43% 100%); }
.amg-split-half.is-right img { transform: translateX(20%); }
.amg-slash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.amg-slash line { stroke: var(--contrast-primary); stroke-width: 5; vector-effect: non-scaling-stroke; }
.amg-or {
  position: absolute;
  left: 49%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999em;
  background-color: var(--contrast-primary);
  color: var(--background-default);
  display: grid;
  place-items: center;
  font-size: 1rem;
  box-shadow: var(--amg-shadow-soft);
}
.amg-cap {
  position: absolute;
  top: 1.375rem;
  font-size: .9375rem;
  line-height: 1.25rem;
  color: var(--contrast-primary);
  background-color: var(--background-opacity-80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: .5rem .875rem;
  border-radius: 1.5rem;
}
.amg-cap.is-left { left: 1.375rem; }
.amg-cap.is-right { right: 1.375rem; }
.amg-cap .amg-sm { display: none; }
.amg-scan-box { position: absolute; left: 8.25%; top: 18.5%; width: 18.5%; height: 29%; border: 2.5px solid var(--contrast-primary); border-radius: 6px; box-shadow: 0 0 0 9999px var(--amg-scrim); }
.amg-tag.is-model { left: 8.25%; top: 50%; }
.amg-tag.is-list { right: 4%; bottom: 7%; }

/* ---- unit photo + spec sheet ---- */
.amg-unit-hero { position: relative; aspect-ratio: 3 / 2; border-radius: var(--amg-radius-lg) var(--amg-radius-lg) 0 0; overflow: hidden; background-color: var(--background-secondary-dark); }
.amg-unit-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.amg-unit-hero .amg-tag small { font-size: .71875rem; }
.amg-unit-hero .amg-tag b { font-size: .875rem; }
.amg-sheet-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; background-color: var(--brand-primary); color: var(--contrast-primary); padding: 1rem 1.5rem; }
.amg-sheet-head > span { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -.5px; }
/* White, not --contrast-secondary: 80% white on brand blue is only ~3.8:1 at this size */
.amg-sheet-head small { font-size: .875rem; line-height: 1.25rem; color: var(--contrast-primary); }
.amg-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background-color: var(--background-secondary-dark); border-radius: 0 0 var(--amg-radius-lg) var(--amg-radius-lg); overflow: hidden; }
.amg-sheet-col { padding: 1.5rem 1.5rem 1rem; border-left: 1px solid var(--contrast-divider); }
.amg-sheet-col:first-child { border-left: 0; }
.amg-sheet-col h3 { margin-bottom: .75rem; }
.amg-kv { display: flex; justify-content: space-between; gap: .75rem; margin: 0; padding: .5rem 0; border-top: 1px solid var(--contrast-divider); font-size: .875rem; line-height: 1.25rem; }
.amg-kv:first-of-type { border-top: 0; }
.amg-kv dt { color: var(--contrast-tertiary); }
.amg-kv dd { margin: 0; text-align: right; color: var(--contrast-primary); }
.amg-more { margin-top: 1.5rem; }

/* ---- roof ---- */
.amg-roof-wrap { position: relative; min-width: 0; }
.amg-filterbar {
  position: absolute;
  z-index: 3;
  left: 1.5rem;
  top: 1.5rem;
  right: 1.5rem;
  max-width: 45rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background-color: var(--contrast-primary);
  color: var(--background-default);
  border-radius: var(--amg-radius-md);
  padding: .625rem .75rem;
  box-shadow: var(--amg-shadow-soft);
}
.amg-filterbar b { font-size: 1rem; font-weight: 500; margin-right: .375rem; }
.amg-chip { font-size: .8125rem; line-height: 1.125rem; padding: .375rem .75rem; border-radius: 999em; background-color: var(--background-secondary); white-space: nowrap; }
.amg-chip.is-on { background-color: var(--brand-primary); color: var(--contrast-primary); }

/* ---- office ---- */
.amg-office-wrap { position: relative; min-width: 0; }
.amg-office-wrap .amg-photo { aspect-ratio: 16 / 9; }
.amg-office-wrap .amg-photo > img { object-position: 50% 40%; }
.amg-thread {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  width: 22.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  background-color: var(--contrast-primary);
  color: var(--background-default);
  border-radius: var(--amg-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--amg-shadow-deep);
}
.amg-thread-head { padding-bottom: .5rem; border-bottom: 1px solid var(--contrast-divider-dark); }
.amg-msg { max-width: 88%; margin: 0; padding: .625rem .875rem; border-radius: 1.125rem; font-size: .9375rem; line-height: 1.3125rem; font-weight: 300; }
.amg-msg.is-out { align-self: flex-end; background-color: var(--brand-primary); color: var(--contrast-primary); border-bottom-right-radius: 6px; }
.amg-msg.is-in { align-self: flex-start; background-color: var(--background-secondary); border-bottom-left-radius: 6px; }
.amg-booked { align-self: flex-end; margin: 0; font-size: .875rem; line-height: 1.25rem; color: var(--brand-primary); }

/* ---- lead value comparison ---- */
.amg-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.amg-vs-card { border-radius: var(--amg-radius-lg); padding: 3rem 2rem; background-color: var(--contrast-primary); color: var(--background-default); }
.amg-vs-card.is-win { background-color: var(--brand-primary); color: var(--contrast-primary); }
/* White, not --contrast-secondary: 80% white on brand blue is only ~3.8:1 */
.amg-vs-card.is-win .caption,
.amg-vs-card.is-win .paragraph { color: var(--contrast-primary); }
.amg-stat { display: block; margin: .75rem 0; font-size: 4.5rem; line-height: 4.75rem; letter-spacing: -3.6px; font-weight: 400; }
/* Align the two figures when only the win card carries an eyebrow */
.amg-vs-card:not(.is-win) .amg-stat { margin-top: calc(1.225rem + .75rem); }

/* ---- demo ---- */
.amg-demo { display: grid; grid-template-columns: 6fr 5fr; gap: 4rem; align-items: center; }
.amg-demo .paragraph-secondary { margin-top: 1.5rem; max-width: 32.5rem; }
.amg-form { margin: 0; border: 1px solid var(--contrast-divider); border-radius: var(--amg-radius-lg); padding: 2rem; }
.amg-form h3 { margin-bottom: 1.5rem; }
.amg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.amg-field { display: block; min-width: 0; }
.amg-field label { display: block; margin-bottom: .375rem; font-weight: 400; font-size: .875rem; line-height: 1.25rem; color: var(--contrast-secondary); }
.amg-form .text-field { display: block; width: 100%; min-width: 0; font-family: DM Sans, sans-serif; }
.amg-form .text-field:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.amg-form .button { width: 100%; margin-top: .5rem; border: 0; cursor: pointer; font-family: DM Sans, sans-serif; color: var(--contrast-primary); transition: background-color .25s, color .25s; }
.amg-form .button:hover { color: var(--background-default); }
.amg-main a:focus-visible,
.amg-main button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ---- 1100 band: keep the hero copy clear of the subject ---- */
@media screen and (max-width: 1100px) {
  .amg-hero-copy { max-width: 56%; }
}

/* ---- tablet ---- */
@media screen and (max-width: 991px) {
  .amg-padding-8 { padding-top: 5rem; padding-bottom: 5rem; }
  .amg-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .amg-hero-body { padding-top: 9rem; padding-bottom: 6rem; }
  .amg-sheet { grid-template-columns: 1fr 1fr; }
  .amg-sheet-col:nth-child(3) { border-left: 0; }
  .amg-sheet-col:nth-child(n+3) { border-top: 1px solid var(--contrast-divider); }
  .amg-demo { grid-template-columns: 1fr; gap: 3rem; }
  .amg-thread { width: 20rem; right: 1.5rem; bottom: 1.5rem; }
  /* Below ~840px the overlaid bar covers the top callout, so it moves above the photo here rather than at 767 */
  .amg-filterbar { position: static; max-width: none; margin-bottom: .75rem; box-shadow: none; }
}

/* ---- phone ---- */
@media screen and (max-width: 767px) {
  .amg-hero { min-height: 0; display: flex; flex-direction: column; }
  .amg-hero-media { position: relative; aspect-ratio: 3 / 2; }
  .amg-hero-media::after { background: linear-gradient(180deg, #060606a6 0%, #06060600 40%, #06060600 65%, var(--background-default) 100%); }
  .amg-hero-body { padding-top: 1rem; padding-bottom: 3rem; }
  .amg-hero-copy { max-width: none; gap: 1.25rem; }
  .amg-photo { border-radius: var(--amg-radius-md); }
  .amg-unit-hero { border-radius: var(--amg-radius-md) var(--amg-radius-md) 0 0; }
  .amg-tag { padding: .4375rem .625rem; font-size: .6875rem; line-height: .9375rem; }
  .amg-tag b, .amg-tag .amg-model { font-size: .75rem; line-height: 1rem; }
  .amg-unit-hero .amg-tag b { font-size: .75rem; }
  .amg-tag small { display: none; }
  .amg-tag.is-model { top: auto; bottom: 5%; left: 3%; }
  .amg-tag.is-list { bottom: 5%; right: 3%; }
  .amg-cap { top: .625rem; padding: .3125rem .5625rem; font-size: .6875rem; line-height: .875rem; }
  .amg-cap.is-left { left: .625rem; }
  .amg-cap.is-right { right: .625rem; }
  .amg-cap .amg-sm { display: inline; }
  .amg-cap .amg-lg { display: none; }
  .amg-or { width: 2.125rem; height: 2.125rem; font-size: .75rem; }
  .amg-callout .amg-tag { top: -.875rem; }
  .amg-callout.is-hide-s { display: none; }
  .amg-sheet { grid-template-columns: 1fr; border-radius: 0 0 var(--amg-radius-md) var(--amg-radius-md); }
  .amg-sheet-col { border-left: 0; border-top: 1px solid var(--contrast-divider); }
  .amg-sheet-col:first-child { border-top: 0; }
  .amg-sheet-head { padding: .75rem 1rem; }
  .amg-sheet-head > span { font-size: 1rem; line-height: 1.375rem; }
  .amg-sheet-head small { font-size: .75rem; }
  .amg-office-wrap .amg-photo { aspect-ratio: 4 / 3; }
  .amg-office-wrap .amg-photo > img { object-position: 28% 40%; }
  .amg-thread { position: relative; right: auto; bottom: auto; width: auto; margin-top: .75rem; box-shadow: none; }
  .amg-vs { grid-template-columns: 1fr; }
  .amg-stat { font-size: 3rem; line-height: 3.25rem; letter-spacing: -2px; }
  .amg-vs-card:not(.is-win) .amg-stat { margin-top: 0; }
  .amg-form { padding: 1.5rem 1.25rem; }
  .amg-pair { grid-template-columns: 1fr; gap: 0; }
}

/* ---- small ---- */
@media screen and (max-width: 479px) {
  .amg-btns .button, .amg-btns .transparent-button { width: 100%; }
}