@layer components {
  /* ─── The firm a company shares with ────── */
  .accountants__firm {
    display: grid;
    gap: 0.25rem;
    margin-block-start: 1rem;
  }

  .accountants__firm-name {
    font-size: 1.125rem;
    font-weight: 600;
  }

  .accountants__ids {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 0.25rem 1.5rem;

    div {
      display: flex;
      gap: 0.375rem;
    }

    dd {
      font-weight: 600;
      margin-inline-start: 0;
    }

    dt {
      color: var(--color-ink-muted);
    }
  }

  /* ─── The level a client grants its firm ── */
  .accountants__level {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block: 1rem;
  }
}