/* Палитра со здания: графит профнастила, красный трафарет номеров 3-1 / 3-2, белые таблички. */
:root {
  --font-display: "Onest", system-ui, sans-serif;
  --font-text: "Onest", system-ui, sans-serif;
  font-synthesis: none;
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --surface-2: #ECECE9;
  --ink: #1F2328;
  --ink-muted: #545A61;
  --line: #D9DAD7;
  --line-strong: #858A90;
  --tone: #2B3036;
  --on-tone: #F4F2EE;
  --on-tone-muted: #C3C7CC;
  --accent: #B8322A;
  --accent-hover: #9E2A23;
  --accent-2: #F07468;
  --on-accent: #FFFFFF;
  --header-bg: color-mix(in oklab, var(--bg) 88%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--font-text); }
img { display: block; max-inline-size: 100%; block-size: auto; }
a:focus-visible, .btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.skip { position: absolute; inset-inline-start: var(--s-4); inset-block-start: calc(-1 * var(--nav-h));
  padding: var(--s-3) var(--s-4); background: var(--surface); color: var(--ink); z-index: var(--z-toast); }
.skip:focus-visible { inset-block-start: var(--s-2); }
.container { inline-size: min(100% - 2 * var(--page-pad), var(--container)); margin-inline: auto; }

.header { position: sticky; top: 0; z-index: var(--z-nav); block-size: var(--nav-h); background: var(--header-bg);
  backdrop-filter: blur(12px); border-block-end: 1px solid var(--line); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); block-size: 100%; }
.header__in > * { min-inline-size: 0; }
.logo { display: inline-flex; align-items: center; gap: var(--s-3); min-block-size: var(--hit);
  font: 700 var(--fs-body)/1 var(--font-display); color: var(--ink); text-decoration: none; white-space: nowrap; }
.header__tel { min-block-size: var(--hit); display: inline-flex; align-items: center; color: var(--ink);
  font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Мотив: красная трафаретная табличка, как номера 3-1 и 3-2 на здании. */
.plate { display: inline-flex; align-items: center; justify-content: center; padding: var(--s-1) var(--s-3);
  background: var(--surface); color: var(--accent); border: 1px solid var(--line);
  font: 800 var(--fs-h2)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plate--sm { padding: var(--s-1) var(--s-2); font-size: var(--fs-sm); border-color: var(--line-strong); }
.plate--light { border-color: transparent; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--control-h);
  padding-inline: var(--s-6); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent);
  font: 600 var(--fs-body)/1 var(--font-text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) ease, transform var(--t-press) var(--ease-out); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--accent-hover); } }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--surface-2); } }
.link { min-block-size: var(--hit); display: inline-flex; align-items: center; color: var(--ink); font-weight: 600;
  text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.link--on-dark { color: var(--on-tone); }

/* Первый экран: фото здания во всю ширину, графитовая плашка поверх (схема «полноэкранный кадр + панель»). */
.hero { position: relative; min-block-size: calc(100svh - var(--nav-h)); display: flex; align-items: flex-end;
  overflow: hidden; background: var(--tone); }
.hero__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% 40%; }
.hero__in { position: relative; padding-block: var(--s-8); }
.hero__panel { max-inline-size: 760px; padding: var(--s-8) var(--s-12); background: var(--tone); color: var(--on-tone);
  border-inline-start: var(--s-2) solid var(--accent); }
.hero__addr { margin: 0 0 var(--s-4); color: var(--on-tone-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hero h1 { margin: 0; font: 800 min(var(--fs-h1), 64px)/var(--lh-h1) var(--font-display); letter-spacing: var(--ls-h1); }
.hero h1 em { font-style: normal; color: var(--accent-2); }
.hero__lead { margin: var(--s-6) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--on-tone-muted); max-inline-size: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-block-start: var(--s-8); }

.section { padding-block: var(--section); }
#contacts { padding-block-end: var(--s-24); }
h2 { margin: var(--s-6) 0 var(--head-gap); font: 800 min(var(--fs-h2), 40px)/var(--lh-h2) var(--font-display); letter-spacing: var(--ls-h2); max-inline-size: 20ch; }
.prose { max-inline-size: var(--prose); }
.prose > p { margin: 0; }
.prose > p + p { margin-block-start: var(--s-4); }

/* Офис: текст и две фотографии со сдвигом. */
.about { display: grid; grid-template-columns: 5fr 4fr 4fr; gap: var(--s-8); align-items: end; }
.about > * { min-inline-size: 0; }
.about__photo { margin: 0; }
.about__photo img { inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about__text { align-self: start; }

/* Склад: тёмная полоса. */
.band { background: var(--tone); color: var(--on-tone); padding-block: var(--section); }
.band__in { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-16); align-items: start; }
.band__photo { position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
.band__in > * { min-inline-size: 0; }
.band__photo { margin: 0; }
.band__photo img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--s-6); max-inline-size: var(--prose); }
.steps li { counter-increment: s; display: grid; grid-template-columns: var(--s-12) 1fr; gap: var(--s-1) var(--s-4); color: var(--on-tone-muted);
  padding-block-start: var(--s-6); border-block-start: 1px solid color-mix(in oklab, var(--on-tone) 22%, transparent); }
.steps li::before { content: "0" counter(s); color: var(--accent-2); font: 800 var(--fs-h3)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.steps b { color: var(--on-tone); grid-column: 2; }
.steps li > span { grid-column: 2; }
.steps li::before { grid-row: 1 / span 2; }

/* Контакты и реквизиты. */
.contacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; }
.contacts > * { min-inline-size: 0; }
.contacts h2 { margin-block-start: 0; }
.contact-list { list-style: none; margin: 0 0 var(--s-8); padding: 0; display: grid; gap: var(--s-6); }
.contact-list span { display: block; font-size: var(--fs-sm); color: var(--ink-muted); }
.contact-list a { color: var(--ink); font-weight: 600; font-size: var(--fs-lead); font-variant-numeric: tabular-nums;
  min-block-size: var(--hit); display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.req { margin: 0; background: var(--surface); border-block-start: var(--s-1) solid var(--accent); padding: var(--s-8); }
.req > div { padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
.req > div:last-child { border-block-end: 0; }
.req dt { font-size: var(--fs-sm); color: var(--ink-muted); }
.req dd { margin: var(--s-1) 0 0; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }

.footer { padding-block: var(--s-12); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-muted); }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.footer p { margin: 0; }
.footer a { color: var(--ink); min-block-size: var(--hit); display: inline-flex; align-items: center; }

/* Политика. */
.doc { padding-block: var(--s-16) var(--section); }
.doc h1 { font: 800 var(--fs-h2)/var(--lh-h2) var(--font-display); margin: 0 0 var(--s-8); max-inline-size: 20ch; }
.doc h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--s-12) 0 var(--s-4); }
.doc p, .doc li { max-inline-size: var(--prose); }

@media (max-width: 1023px) {
  .about { grid-template-columns: 1fr 1fr; }
  .about__text { grid-column: 1 / -1; }
  .contacts { grid-template-columns: 1fr; gap: var(--s-12); }
  .band__in { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .band__photo { position: static; }
}
@media (max-width: 767px) {
  .hero { flex-direction: column; align-items: stretch; min-block-size: 0; }
  .hero__img { position: relative; block-size: 52svh; }
  .hero__in { inline-size: 100%; padding: 0; }
  .hero__panel { max-inline-size: none; padding: var(--s-8) var(--page-pad) var(--s-12); border-inline-start: 0; border-block-start: var(--s-2) solid var(--accent); }
  .hero__cta .btn { inline-size: 100%; }
  .logo { font-size: var(--fs-sm); }
  .header__tel { font-size: var(--fs-sm); }
  .req { padding: var(--s-6); }
  .about { grid-template-columns: 1fr; }
  .about__photo img { aspect-ratio: 4 / 5; }
  .band__in { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .logo { gap: var(--s-2); font-size: var(--fs-xs); }
  .header__tel { font-size: var(--fs-xs); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .band h2 { max-inline-size: none; }
  .band__in { grid-template-columns: 2fr 3fr; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}