/* Сборка из design/tokens.css и design/css/components.css (S1-22) — не править, правится design/ */
/* Геналдон — generated from tokens.json */
:root {
--bg: #121311;
--surface: #1b1c1a;
--line: #33342f;
--ink: #eeece6;
--ink-muted: #a8a69e;
--ink-on-photo: #d9d7d0;
--accent: #41c06b;
--accent-hover: #5fd385;
--on-accent: #0b0c0b;
--danger: #ff8f80;
--scrim-strong: rgba(18, 19, 17, 0.94);
--scrim-mid: rgba(18, 19, 17, 0.62);
--scrim-soft: rgba(18, 19, 17, 0.15);
--scrim-faint: rgba(18, 19, 17, 0.1);
--scrim-deep: rgba(18, 19, 17, 0.8);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 40px;
--space-8: 56px;
--space-9: 72px;
--radius-s: 4px;
--radius-0: 0;
--container-max: 1360px;
--header-h-s: 64px;
--header-h-m: 72px;
--header-h-l: 80px;
--tap-min: 44px;
--btn-h: 48px;
--bp-tablet: 760px;
--bp-desktop: 1240px;
--font-display: "Unbounded", "Unbounded Fallback", "Unbounded Fallback Android", "Arial Black", system-ui, sans-serif;
--font-body: "Onest", "Onest Fallback", "Onest Fallback Android", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@font-face { font-family: "Unbounded"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/unbounded-500.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/unbounded-700.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/onest-400.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/onest-500.woff2") format("woff2"); }
@font-face { font-family: "Onest Fallback"; font-weight: 400; font-style: normal; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 103.14%; ascent-override: 94.05%; descent-override: 29.57%; line-gap-override: 0.00%; }
@font-face { font-family: "Onest Fallback Android"; font-weight: 400; font-style: normal; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 102.15%; ascent-override: 94.96%; descent-override: 29.86%; line-gap-override: 0.00%; }
@font-face { font-family: "Onest Fallback"; font-weight: 500; font-style: normal; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 104.80%; ascent-override: 92.55%; descent-override: 29.10%; line-gap-override: 0.00%; }
@font-face { font-family: "Onest Fallback Android"; font-weight: 500; font-style: normal; src: local("Roboto Medium"), local("Roboto-Medium"); size-adjust: 102.63%; ascent-override: 94.51%; descent-override: 29.72%; line-gap-override: 0.00%; }
@font-face { font-family: "Unbounded Fallback"; font-weight: 500; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 127.02%; ascent-override: 78.33%; descent-override: 19.29%; line-gap-override: 0.00%; }
@font-face { font-family: "Unbounded Fallback Android"; font-weight: 500; font-style: normal; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 132.87%; ascent-override: 74.88%; descent-override: 18.44%; line-gap-override: 0.00%; }
@font-face { font-family: "Unbounded Fallback"; font-weight: 700; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 129.46%; ascent-override: 76.86%; descent-override: 18.92%; line-gap-override: 0.00%; }
@font-face { font-family: "Unbounded Fallback Android"; font-weight: 700; font-style: normal; src: local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 136.09%; ascent-override: 73.11%; descent-override: 18.00%; line-gap-override: 0.00%; }
/* Геналдон — компоненты. Значения — только из tokens.css (var(--…)); здесь нет ни одного цвета.
Классы — BEM: block, block__element, block--modifier. Mobile-first:
база — до 760 px, @media (min-width: 760px) — bp-tablet, (min-width: 1240px) — bp-desktop.
Исключение из BEM — .prose: он стилизует HTML из content/ по тегам. */
/* ---- База ---- */
:root { --gutter: var(--space-4); --header-h: var(--header-h-s); }
@media (min-width: 760px) { :root { --gutter: var(--space-6); --header-h: var(--header-h-m); } }
@media (min-width: 1240px) { :root { --gutter: var(--space-7); --header-h: var(--header-h-l); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font-body); }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* атрибут hidden сильнее display компонентов */
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link { position: absolute; left: -999px; top: var(--space-2); z-index: 10; padding: var(--space-2) var(--space-3); background: var(--accent); color: var(--on-accent); }
.skip-link:focus { left: var(--space-2); }
.eyebrow { margin: 0 0 14px; font: 500 12px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
/* ---- Кнопки ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-s); font: 500 16px/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { border-color: var(--ink-muted); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--dark { background: var(--on-accent); color: var(--ink); }
.btn--dark:hover { background: var(--surface); }
.btn--block { width: 100%; }
.btn__icon { width: 18px; height: 18px; flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--tap-min); height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--ink-muted); border-radius: var(--radius-s); background: transparent; color: var(--ink); font: 500 15px/1 var(--font-body); text-decoration: none; }
.icon-btn--square { padding: 0; }
.icon-btn__icon { width: 20px; height: 20px; flex: none; }
/* ---- Шапка и меню: ОДНА навигация. До 1240 — панель по кнопке «Меню», от 1240 — строкой ---- */
.header { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); background: var(--bg); }
.header__inner { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); }
.header__logo { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.header__logo-mark { width: 22px; height: 36px; }
.header__logo-text { font: 700 17px/1 var(--font-display); letter-spacing: .04em; }
.header__phone { display: none; font-weight: 500; white-space: nowrap; text-decoration: none; }
.header__call { display: none; }
@media (min-width: 760px) {
.header__phone { display: inline; }
.header__call { display: inline-flex; }
.header__tel { display: none; }
}
@media (min-width: 1240px) {
.header__logo { margin-right: 36px; }
.header__phone { margin-left: auto; }
.header__menu-toggle { display: none; }
}
.nav { display: none; }
.nav:target, .nav--open { display: block; position: fixed; inset: var(--header-h) 0 0 0; overflow-y: auto; padding: var(--space-2) var(--gutter) var(--space-6); background: var(--bg); }
.nav__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.nav__list { margin: 0; padding: 0; list-style: none; }
.nav__item { border-bottom: 1px solid var(--line); }
.nav__link { display: block; padding: var(--space-4) 0; font: 500 20px/1.2 var(--font-display); text-decoration: none; }
.nav__link--current { color: var(--accent); }
.nav__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 760px) { .nav__actions { display: none; } }
@media (min-width: 1240px) {
.nav, .nav:target, .nav--open { display: block; position: static; padding: 0; overflow: visible; background: none; }
.nav__head { display: none; }
.nav__list { display: flex; gap: var(--space-5); }
.nav__item { border: 0; }
.nav__link { padding: var(--space-2) 0; font: 500 15px/1 var(--font-body); white-space: nowrap; }
.nav__link:hover { color: var(--accent); }
}
/* ---- Первый экран: фото во всю ширину, текст внизу на затемнении ---- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: calc(100svh - var(--header-h)); max-height: 860px; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-soft) 0%, var(--scrim-mid) 40%, var(--scrim-strong) 100%); }
.hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 120px; padding-bottom: 28px; }
.hero__eyebrow { color: var(--ink); }
.hero__title { max-width: 14em; margin: 0 0 var(--space-4); font: 700 30px/1.1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.hero__lead { max-width: 36em; margin: 0 0 var(--space-5); color: var(--ink-on-photo); font-size: 18px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__credit { margin: 20px 0 0; color: var(--ink-muted); font-size: 13px; }
@media (min-width: 760px) { .hero__inner { padding-bottom: 48px; } .hero__title { font-size: 48px; } }
@media (min-width: 1240px) { .hero__inner { padding-bottom: 64px; } .hero__title { font-size: 64px; } }
/* ---- Факты: числа из текстов страниц ---- */
.facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border-bottom: 1px solid var(--line); list-style: none; }
.facts__item { padding: 20px var(--space-3) 20px 0; border-top: 1px solid var(--line); }
.facts__value { display: block; margin-bottom: 6px; color: var(--accent); font: 700 20px/1.1 var(--font-display); }
.facts__label { color: var(--ink-muted); font-size: 14px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, 1fr); } .facts__item { padding-right: var(--space-4); } .facts__value { font-size: 28px; } }
/* ---- Секция ---- */
.section { padding: var(--space-8) 0; }
.section.section--flush-top { padding-top: 0; }
/* цели якорей не уходят под липкую шапку (у .album — то же правило со своим отступом) */
.hero, .section, .cta { scroll-margin-top: calc(var(--header-h) + 1px); } /* + рамка шапки */
.section.section--flush-top { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: 28px; }
.section__title { margin: 0; font: 700 28px/1.1 var(--font-display); text-transform: uppercase; }
.section__more { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); color: var(--accent); font-weight: 500; text-decoration: none; }
.section__more:hover { text-decoration: underline; }
@media (min-width: 760px) { .section { padding: var(--space-9) 0; } .section__title { font-size: 36px; } }
/* ---- Плитки разделов (вход в раздел карты сайта) ---- */
.tiles { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tile__link { position: relative; display: flex; align-items: flex-end; min-height: 280px; overflow: hidden; border-radius: var(--radius-s); background: var(--surface); text-decoration: none; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-faint) 0%, var(--scrim-deep) 42%, var(--scrim-strong) 70%); }
.tile__body { position: relative; z-index: 1; padding: 20px; }
.tile__num { display: block; margin-bottom: 10px; color: var(--ink); font: 500 12px/1 var(--font-display); letter-spacing: .1em; }
.tile__title { margin: 0 0 6px; font: 700 20px/1.15 var(--font-display); text-transform: uppercase; }
.tile__text { margin: 0; color: var(--ink-on-photo); font-size: 15px; }
.tile__link:hover .tile__img { transform: scale(1.04); }
@media (min-width: 760px) { .tiles { grid-template-columns: 1fr 1fr; gap: var(--space-4); } .tile__link { min-height: 320px; } }
@media (min-width: 1240px) { .tiles { grid-template-columns: repeat(4, 1fr); } .tile__link { min-height: 420px; } }
/* ---- Карточка проекта ---- */
.cards { display: grid; gap: 28px 20px; margin: 0; padding: 0; list-style: none; }
.card__link { display: block; text-decoration: none; }
.card__media { overflow: hidden; border-radius: var(--radius-s); background: var(--surface); }
.card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.card__title { margin: var(--space-4) 0 6px; font: 500 18px/1.25 var(--font-display); }
.card__meta { margin: 0; color: var(--ink-muted); font-size: 15px; }
.card__link:hover .card__img { transform: scale(1.03); }
.card__link:hover .card__title { color: var(--accent); }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1240px) { .cards { grid-template-columns: repeat(3, 1fr); } }
/* ---- Видео-блок: постер и переход к видео; само не запускается ---- */
.video { display: grid; gap: var(--space-4); }
.video__link { position: relative; display: block; overflow: hidden; border-radius: var(--radius-s); background: var(--surface); }
.video__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.video__play-icon { width: 28px; height: 28px; margin-left: 4px; }
.video__link:hover .video__play { background: var(--accent-hover); }
.video__caption { margin: 0; color: var(--ink-muted); font-size: 14px; }
@media (min-width: 1240px) { .video { grid-template-columns: 2fr 1fr; align-items: end; gap: var(--space-6); } }
/* ---- Крошки и «назад» ---- */
.crumbs { padding-top: 20px; color: var(--ink-muted); font-size: 14px; }
.crumbs__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs__item + .crumbs__item::before { content: "/"; margin-right: 6px; }
.crumbs__link { text-decoration: none; }
.crumbs__link:hover { color: var(--ink); text-decoration: underline; }
.back-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); margin-top: var(--space-2); color: var(--accent); font-weight: 500; text-decoration: none; }
.back-link__icon { width: 18px; height: 18px; }
/* ---- Шапка страницы проекта ---- */
.project-head { display: grid; gap: var(--space-4); padding: var(--space-2) 0 var(--space-6); }
/* длинные слова («НОВОМУЧЕНИЧЕСКИЙ», 360 px — #136): перенос с дефисом только у слов от 12 букв (lang="ru"); где словаря переносов нет — overflow-wrap держит колонку */
.project-head__title { margin: 0; font: 700 30px/1.1 var(--font-display); text-transform: uppercase; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
.project-head__lead { max-width: 38em; margin: 0; color: var(--ink-muted); font-size: 18px; }
@media (min-width: 760px) { .project-head__title { font-size: 48px; } }
@media (min-width: 1240px) { .project-head { grid-template-columns: 7fr 5fr; align-items: end; gap: 48px; padding-bottom: var(--space-7); } }
/* ---- Галерея: все фото объекта, сеткой, без горизонтальной прокрутки ---- */
.gallery { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-8); list-style: none; }
.gallery__item--lead, .gallery__item--wide { grid-column: 1 / -1; }
.gallery__link { display: block; height: 100%; overflow: hidden; border-radius: var(--radius-s); background: var(--surface); }
.gallery__img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item:not(.gallery__item--lead, .gallery__item--wide) .gallery__img { aspect-ratio: 1; }
/* lead и wide от 760 px — без aspect-ratio в CSS: пропорция берётся из width/height самого ![]()
(фактический размер
файла) ещё до загрузки фото — колонки высокие, кадр не обрезан (D3), и сдвига (CLS) нет. Ниже 760 — кадр 3:2 */
@media (max-width: 759.98px) { .gallery__item--lead .gallery__img, .gallery__item--wide .gallery__img { aspect-ratio: 3 / 2; } }
@media (min-width: 760px) {
.gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.gallery__item--lead { grid-column: span 2; grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
}
@media (min-width: 1240px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
/* ---- Предыдущий / следующий ---- */
.pager { display: grid; gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-5); border-top: 1px solid var(--line); }
.pager__link { display: grid; gap: 6px; padding: var(--space-3) 0; text-decoration: none; }
.pager__label { color: var(--accent); font: 500 12px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.pager__title { font: 500 18px/1.25 var(--font-display); }
.pager__link:hover .pager__title { color: var(--accent); }
@media (min-width: 760px) { .pager { grid-template-columns: 1fr 1fr; } .pager__link--next { text-align: right; } }
/* ---- Текстовый блок: тело страницы из content/ ---- */
.prose { max-width: 46em; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose h2, .prose h3 { margin: 1.8em 0 0; font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.prose h2 { font-size: 24px; }
.prose h3 { font-size: 18px; }
.prose a { color: var(--accent); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--radius-s); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose__table-wrap { overflow-x: auto; }
/* ---- Призыв: звонок ---- */
.cta { padding: 40px 0; background: var(--accent); color: var(--on-accent); }
.cta__inner { display: grid; gap: 20px; }
.cta__title { margin: 0; font: 700 28px/1.1 var(--font-display); text-transform: uppercase; }
.cta__text { margin: 6px 0 0; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cta__phone { margin-right: var(--space-3); font: 700 20px/1 var(--font-display); text-decoration: none; }
@media (min-width: 1240px) { .cta__inner { grid-template-columns: 1fr auto; align-items: center; } }
/* ---- Подвал ---- */
.footer { padding: var(--space-6) 0 40px; color: var(--ink-muted); font-size: 14px; }
.footer__inner { display: grid; gap: 20px; }
.footer__text { margin: 0; }
.footer__list { display: grid; align-content: start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer__link { color: var(--ink); text-decoration: none; }
.footer__link:hover { text-decoration: underline; }
@media (min-width: 760px) { .footer__inner { grid-template-columns: 2fr 1fr 1fr; } }
/* ---- Заголовок страницы: крошки + H1 (+ вводная) ---- */
.page-head { padding-bottom: var(--space-6); }
.page-head__title { margin: var(--space-3) 0 0; font: 700 30px/1.1 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.page-head__lead { max-width: 46em; margin: var(--space-4) 0 0; color: var(--ink-muted); font-size: 18px; }
@media (min-width: 760px) { .page-head { padding-bottom: var(--space-7); } .page-head__title { font-size: 48px; } }
/* ---- Тело страницы: текст + фото + видео из content/ ---- */
.page-body { display: grid; gap: var(--space-7); padding-bottom: var(--space-8); }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.photos__link, .photos__anchor { display: block; overflow: hidden; border-radius: var(--radius-s); background: var(--surface); }
.photos__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photos__caption { margin: 6px 0 0; color: var(--ink-muted); font-size: 14px; }
@media (min-width: 760px) { .photos { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.player { margin: 0; }
.player__video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-s); background: var(--surface); }
.player__caption { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: 14px; }
.docs { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.docs__link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); color: var(--accent); font-weight: 500; text-decoration: none; }
.docs__link:hover { text-decoration: underline; }
.docs__icon { width: 22px; height: 22px; flex: none; }
.docs__meta { color: var(--ink-muted); font-weight: 400; font-size: 14px; }
/* ---- Фото предприятия: раздел страницы с якорем (#karer, #proizvodstvo, #sklad) ---- */
.album { padding-top: var(--space-6); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.album__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
.album__title { margin: 0; font: 700 24px/1.1 var(--font-display); text-transform: uppercase; }
.album__count { color: var(--ink-muted); font-size: 14px; }
.album__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .album__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
@media (min-width: 1240px) { .album__grid { grid-template-columns: repeat(6, 1fr); } }
/* ---- Контакты ---- */
.contacts { display: grid; gap: var(--space-6); padding-bottom: var(--space-8); }
.contacts__group { display: grid; gap: var(--space-2); align-content: start; }
.contacts__title { margin: 0 0 var(--space-2); color: var(--accent); font: 500 12px/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.contacts__phone { font: 700 24px/1.2 var(--font-display); text-decoration: none; }
.contacts__text { margin: 0; }
.contacts__link { color: var(--ink); }
.contacts__messengers { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.map { display: grid; gap: var(--space-2); margin: 0; }
.map__link { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); text-decoration: none; }
.map__img { width: 100%; height: auto; }
.map__open { position: absolute; left: var(--space-3); top: var(--space-3); display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-s); background: var(--accent); color: var(--on-accent); font-weight: 500; }
.map__link:hover .map__open { background: var(--accent-hover); }
.map__credit { color: var(--ink-muted); font-size: 13px; }
.map__credit a { color: var(--ink-muted); }
@media (min-width: 760px) { .contacts { grid-template-columns: 1fr 1fr; } .contacts__map { grid-column: 1 / -1; } }
@media (min-width: 1240px) { .contacts { grid-template-columns: 1fr 1fr 2fr; } .contacts__map { grid-column: auto; } }
/* ---- 404 ---- */
.not-found { display: grid; gap: var(--space-5); justify-items: start; padding: var(--space-8) 0 var(--space-9); }
.not-found__code { margin: 0; color: var(--accent); font: 700 96px/1 var(--font-display); }
.not-found__text { margin: 0; font-size: 20px; }
/* ---- Просмотр фото крупно (галерея):