Максим Тимофеев

Вот в чем Ваша ошибка:
на каждой странице свой набор нужных css. Можно сделать под каждую только нужные и кормить браузеру нужный css файл. Но так как браузеры кешируют ресурсы, такие как css, то оказывается, что это менее оптимально. 1 закешированный файл со всем css чаще более быстро работает и сокращает запросы к серверу, чем куча мелких, но "требующих себя закачать".
Много есть действительно разумных вариантов оптимизации и можно книгу написать (критический css + асинхронно остальное и т.д.). Но если коротко:
смотрите в сторону gulp, объединения и минификации css, а не сепарации.

Режем на части картинку, устанавливаем блоку несколько background. Но по моему адекватнее просто 1 картинку.

https://codepen.io/wokster/pen/VBjoXQ

элементы форм не удобны для стилизации, поэтому подобные вещи верстаются обычными div-ами, а js следит за изменением в них и загоняет в какой-нибудь input type=hidden
В html5 появился великолепный атрибут contenteditable="true".

У Вас .graph_panel имеет жестко заданный width: 20vw;

https://masonry.desandro.com
https://getbootstrap.com/docs/4.0/components/card/...

обычный border-image не устраивает?
https://jsfiddle.net/nhf34z12/

И с чего лучше начать: с верстки мобильной версии или полноэкранной?

Последнее время набирает обороты практика начинать с мобильной. Вопрос конечно спорный, так что слово "лучше" тут не совсем уместно.

Не могли бы подсказать на какие семантические элементы лучше всего разбить страницу?

На подходящие: https://webref.ru/html Или Вы ожидаете что кто-то переверстает все? Есть вопросы по конкретному - блоку, тогда welcome иначе это на фриланс.

Для шаБки с логотипом и телефоном я выбрал header

разумно, но не понятно к чему это

Карт сотни, решений сотни. Для начала надо выбрать. Вот наверное самый простой способ:
https://yandex.ru/map-constructor/

уменьшите значения outline и outline-offset и увидите что никакого колдунства нет, например

outline: inset 2px green;
  outline-offset: -2px;

не надо ничего никуда переносить. Кнопка "фильтр" всегда находится в меню, ее не надо переносить, просто она скрыта на определенных breakpoint-ах.

я бы взял svg (гибко, оптимально) или как уже предложила Ankhena border-image Но я border-image так и не понял, мне кажется нужен женский склад ума, что бы пользоваться border-image. БЕЗ ОБИД. Женский == другой != плохой

клик по ссылке

это js, а не про css. Возможно сейчас найдутся ниндзи, которые через :active начнут городить велосипед, но это будет из разряда "вот как я умею".

Так что отслеживаете в js событие клика, вешаете класс на блок, а аму анимацию можно уже в css сделать по этому классу.