/* The agents' office on the home page, directly above the Proprietary SaaS Suite section. */
.office-home { background: #F5F3EE; padding: 64px 0 0; }
.office-home__inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.office-home__frame { overflow: hidden; border-radius: 18px; border: 1px solid #E6E1D6; box-shadow: 0 24px 60px -28px rgba(16, 17, 20, 0.45); background: #161311; }
.office-home__frame { position: relative; }
.office-home__sound { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(16, 17, 20, 0.6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.office-home__sound:hover { background: rgba(16, 17, 20, 0.8); }
.office-home__sound:focus-visible { outline: 2px solid #60A5FA; outline-offset: 2px; }
.office-home__sound[hidden] { display: none; }
.office-home__frame canvas { display: block; width: 100%; aspect-ratio: 192 / 110; }
.office-home__roles { list-style: none; margin: 24px auto 32px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 48rem; }
.office-home__roles li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #E6E1D6; color: #2B2F38; font-size: 13px; font-weight: 600; }
@media (min-width: 768px) {
  .office-home__roles { margin: 28px auto 40px; }
  .office-home { padding-top: 96px; }
  .office-home__inner { padding: 0 2rem; }
}