@font-face { font-family: Manrope; src: url('/static/fonts/Manrope.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { background: #111313; color: #f4f5ef; }
body { margin: 0; font-family: Manrope, sans-serif; }
h1, h2, h3, p, form, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; border: 0; margin: 0; }
button { padding: 0; text-align: inherit; cursor: pointer; }
a[href], button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #b9a7e8; outline-offset: 4px; }
.page { display: flex !important; width: 100% !important; margin-inline: auto; vertical-align: top; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 10; background: #d5f77a; color: #111313; padding: 12px; }
.skip-link:focus { top: 12px; }
.field { display: block; padding: 16px; font: 400 16px/24px Manrope, sans-serif; color: #f4f5ef; resize: none; }
.field::placeholder { color: #a4aba5; opacity: 1; }
.consent-check { appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: 1px solid #a4aba5; border-radius: 4px; background: transparent; cursor: pointer; }
.consent-check:checked { background: #d5f77a; border-color: #d5f77a; box-shadow: inset 0 0 0 4px #1b1e1d; }
.consent-label { cursor: pointer; }
[hidden] { display: none !important; }
.form-status { width: 100%; font-size: 14px; line-height: 22px; }
.form-status:empty { display: none; }
button:disabled { opacity: .65; cursor: wait; }
.project-filters button[aria-pressed="true"] { background: #d5f77a !important; }
.project-filters button[aria-pressed="true"] > * { color: #111313 !important; }
.project-filters button[aria-pressed="false"] { background: #232725 !important; }
.project-filters button[aria-pressed="false"] > * { color: #f4f5ef !important; }
.projects-filtered { display: flex !important; flex-wrap: wrap; gap: 36px 20px; width: 1312px; }
.projects-filtered > .project-row { display: contents !important; }
/* Shared fluid layout. Desktop and phone overrides live in separate stylesheets. */
.artwork { transform-origin: top left; }
@media all {
  .page { overflow: visible !important; }
  .page > * { width: 100% !important; padding: clamp(40px, 3.5vw, 72px) 4% !important; }
  .page > header { padding-block: 24px !important; }
  .flow { width: 100% !important; min-width: 0; max-width: 100%; }
  .flow:not(.artwork-shell):not([data-layer="Разделитель"]):not([data-layer^="Кнопка /"]):not(input):not(textarea):not(button) { height: auto !important; }
  .columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px !important; align-items: start !important; }
  .columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px !important; }
  .columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important; }
  .columns > * { min-width: 0; }
  .project-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; width: 100%; }
  .project-row { display: contents !important; }
  [data-layer^="Карточка /"] { padding: 24px !important; }
  h1 { font-size: clamp(36px, 4vw, 54px) !important; line-height: 1.18 !important; overflow-wrap: anywhere; }
  h2 { font-size: clamp(30px, 3.2vw, 42px) !important; line-height: 1.2 !important; }
  [data-layer="Описание"] { padding-top: 0 !important; }
  .artwork-shell { width: 100% !important; min-width: 0; overflow: hidden; }
  .banner-shell { height: auto !important; }
  .content-banner { width: 100% !important; height: auto !important; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .content-banner > :not(.banner-decoration) { position: static !important; width: 100% !important; max-width: 100%; }
  .content-banner > .banner-decoration { display: none; }
  .content-banner .banner-title { font-size: clamp(28px, 3.2vw, 40px) !important; line-height: 1.25 !important; }
  .content-banner > a { width: fit-content !important; min-width: 218px; padding-inline: 20px; flex-shrink: 0; }
  .content-banner > a > * { width: auto !important; }
  .project-filters, [data-layer="Метки проекта"] { flex-wrap: wrap; gap: 12px !important; }
  .project-filters > button, [data-layer="Метки проекта"] > * { width: auto !important; padding-inline: 16px; flex-shrink: 0; }
  .project-filters > button { min-height: 44px; }
  .project-filters > button > *, [data-layer="Метки проекта"] > * > * { width: auto !important; }
  [data-layer="Логотип и разделы"] { width: auto !important; flex-shrink: 0; gap: 28px !important; align-items: center !important; }
  [data-layer="Логотип и разделы"] > a { width: auto !important; flex-shrink: 0; }
  [data-layer="Логотип и разделы"] > a:not(:first-child) { display: flex; min-height: 44px; align-items: center; }
  [data-layer="Навигация / строка"] { gap: 24px !important; flex-wrap: wrap; }
  header [data-layer="Обращение"] { width: auto !important; margin-left: auto; }
  header [data-layer="Обращение"] > a { width: auto !important; padding-inline: 24px; }
  header [data-layer="Обращение"] > a > * { width: auto !important; }
  .consent-label { gap: 12px !important; min-height: 44px; align-items: center !important; }
  .field { min-width: 0; }
  textarea.field { resize: vertical; min-height: 118px; }
  [data-layer="Подвал / строка"] { gap: 24px !important; flex-wrap: wrap; }
  [data-layer="Подвал / строка"] > * { width: auto !important; max-width: 100%; }
  [data-layer="Подвал / строка"] > :last-child { margin-left: auto; }
}
@media (min-width: 1100px) {
  .columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  header [data-layer="Обращение"] > a:first-child { display: none !important; }
  .project-grid, .columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-layer="Обращение / 2 колонки"] { grid-template-columns: 1fr; }
  #inquiry-form { max-width: 720px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Components own their geometry; exported pixel sizes never size live controls. */
.services-grid { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.service-row { display: contents !important; }
.content-card {
  width: 100% !important; height: auto !important; min-width: 0;
  padding: 28px !important; gap: 18px !important; align-self: stretch;
}
.content-card > * {
  width: 100% !important; height: auto !important; min-width: 0;
  flex-shrink: 0; overflow-wrap: anywhere;
}
.service-card { min-height: 232px; }
.service-card > :last-child { margin-top: auto; max-width: 64ch; }
.service-card:hover { background: #232725 !important; }
.ui-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: fit-content !important; max-width: 100%; min-width: 0; min-height: 52px;
  height: auto !important; padding: 14px 24px !important; flex-shrink: 0;
  text-align: center; border-radius: 999px !important; white-space: normal;
}
.ui-button > * { width: auto !important; height: auto !important; max-width: 100%; overflow-wrap: anywhere; }
.ui-button:hover { filter: brightness(1.08); }
#inquiry-form > .ui-button { width: 100% !important; }