dom1n1k

Извините, но напрашивается простой вывод - если вы, как дизайнер, не можете сформулировать требования и ограничения к полям, значит вы сами толком не понимаете, чего от них (от полей) хотите. Как только вы четко поймете это для себя, так сразу же получится сказать это для других.

Использовать массив в качестве списка объектов неудобно, и в вопросе озвучена одна из причин этому.
Лучше перейти на новые структуры Map и Set. Действительно удобнее и даже вроде чуть быстрее (если, конечно, нативно, а не полифилл).

Без предварительной обработки строк (оборачивания в спаны или расстановка неразрывных пробелов) - никак.
Подобные функции в CSS обсуждались несколько лет назад на уровне идей и черновиков, но на практике не реализованы.

Вкладывать чекбокс или радио-баттон внутрь тэга label не только можно, но и нужно по возможности - тогда они связываются автоматически и label обретает кликабельность без атрибута for. Конечно, на практике это не всегда получается, приходится разносить в разные контейнеры и использовать for. В целом оба варианта совершенно нормальные и корректные - разница только в некотором удобстве.
Что касается порядка (до или после) - это вопрос дизайна и гайдлайнов, а не верстки. Как нарисовано (условно будем считать, что дизайнер у нас нормальный), так и нужно верстать.

Причем Myraid Pro - платный коммерческий шрифт.

Если не была оговорена с заказчиком ширина макета, какую брать?

Необходимо оговорить, это один из самых ключевых моментов ТЗ.

"margin-left/right: auto" уже отменили?

Если для себя - можете писать на чем угодно.
Если для других - не надо было даже и начинать.

В очередной раз недоумеваю, зачем совать бутстраповскую сетку везде, где ни попадя?
Какой от неё толк в данном конкретном случае? Я не уловил.

Лично я поговорил бы с дезигнером и попытася бы его уговорить убрать эту арку.
Это просто бессмысленная хрень от дизайнера, который не знал чего бы сюда такого втулить, ну и родил вот это.
Смотри - сделать-то можно. Наложить сверху див с фоновой картинкой или там svg-картинку - не проблема.
Но она будет мешать работать с картой (потянуть, зазумить). Потому что сверху будет этот див, а карта не получит мышиные события.

local('FontName') - это не кэш. Это означает, что если у пользователя в операционной системе уже установлен нужный шрифт, то качать его не надо. Например, многие разработчики устанавливают себе как минимум Roboto и Open Sans.

Я в подобных случаях привязываюсь к vmin.
Тогда при разворотах экрана размер шрифта (например) не скачет.

По большому счету, выбор технологии тут определяется тем, в каком виде/формате эти картинки рисует дизайнер.
Если он рисует это в SVG или чем-то другом, что удобно экспортируется в оный - стало быть SVG.
Если он рисует в растре - ваш первый вариант.
То есть суть в том, чтобы потом можно было максимально быстро построиться под корректировки дизайна (а они будут с вероятностью 80-90%).