/* Hero страницы типа полотна — 658:21535: светлый фон, шапка светлая */
.hero-mesh {
  position: relative;
  background: var(--paper);
  padding: 30px var(--gutter) clamp(56px, 5.2083vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(28px, 3.125vw, 60px);
}
/* светлый вариант сквозной шапки (658:21536) */
.hero-mesh .nav {
  position: static;
  width: 100%;
  background: rgba(202, 202, 202, 0.4);
}
.hero-mesh .nav__menu a { color: var(--ink); }
.hero-mesh .nav__menu a:hover { color: #000; }
.hero-mesh .nav__burger { border-color: rgba(24, 29, 36, 0.2); }
.hero-mesh .nav__burger-box span { background: var(--ink); }

.crumbs--light { position: static; opacity: 0.6; }
.crumbs--light a { color: #aaa; }
.crumbs--light li[aria-current] { color: #24261f; }

.hero-mesh__title {
  width: min(770px, 100%);
  font-size: clamp(30px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.hero-mesh__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3.125vw, 60px);
  width: 100%;
}
.hero-mesh__col { flex: 1 1 0; min-width: 1px; display: flex; flex-direction: column; gap: 20px; }
.hero-mesh__specs { display: flex; flex-direction: column; gap: 20px; }
.hero-mesh__specs li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 600;
  line-height: normal;
  color: var(--ink);
}
.hero-mesh__specs img { flex: 0 0 6px; }
.hero-mesh__text { display: flex; flex-direction: column; gap: 20px; }
.hero-mesh__text p {
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(24, 29, 36, 0.64);
}
.hero-mesh__photo {
  flex: 0 1 832px;
  height: clamp(260px, 25.1563vw, 483px);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.hero-mesh__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Фотография в макете жёсткие 832px и не сжимается: уже 1280 текстовой колонке
   остаётся меньше 260px и она вытягивается в столбик. Поэтому ряд ложится
   в стопку не с 1023, а с 1279 — как сетки в остальных секциях. */
@media (max-width: 1279px) {
  .hero-mesh__row { flex-direction: column; }
  .hero-mesh__photo { flex: 0 0 auto; width: 100%; }
}