We have a footer that is removed from the flow and used as a footer. This works fine:

@page {
	@bottom {
		content: flow(footer);
	}
}

.footer {
	flow: static(footer, start);
}

However, we would also like to include the page number in the footer section. The docs state:

@page {
    @bottom {
	content: "Page " counter(page) " of " counter(pages)
    }
}

But we obviously can't have both @bottom content at the same time.

What's the best way to have our custom footer along with page numbers?

You can refer to counter(page) within your custom footer, using generated content. Or you could put the page number in @bottom-left or @bottom-right.