/* --- 01-tokens.css --- */
/* Токены Agatha Sunrise — из переменных коллекции «Агата» в Фигме
   (страница «Для вёрстки — согласовано», снято 10.10.2026).
   Только объявления, никакой логики компонентов (навык verstka-geometry).

   Модуль --u: 1 единица макета. Каждая ширина масштабирует свой кадр:
     база (до 767)   — кадр 390:  --u = 100vw / 390, не больше 1.25px
     768…1199        — кадр 768:  --u = 100vw / 768, не больше 1.2px
     от 1200         — кадр 1465 (ширина веба в Фигме): --u = 100vw / 1465, не больше 1.2px
   На контрольных ширинах 390 / 768 страница — кадр макета один к одному
   (на 1440 — кадр 1465 в масштабе 0,983). Второго механизма масштаба нет. */

@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/onest-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }
/* Bebas Neue — настоящий файл (SIL OFL 1.1, Bebas Neue Project Authors; @fontsource/bebas-neue 5.0.8, набор latin),
   лицензия рядом: fonts/bebas-neue-OFL.txt. Слово владельца 12.10: «шрифт поменяй». Прежняя замена системным DIN
   с подогнанными метриками (size-adjust, ascent/descent-override) снята — метрики теперь родные. */
@font-face { font-family: "Bebas Neue"; src: url("fonts/bebas-neue-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --u: min(calc(100vw / 390), 1.25px);

  /* палитра «Агата» — главная (оливковая) */
  --c-fon: #ffffff;
  --c-poverhnost: #f9f9f9;
  --c-tekst: #1f2410;
  --c-tekst-zelenyy: #2b3310;
  --c-tekst-priglushennyy: #5e6553;
  --c-liniya: #1f2410;
  --c-akcent: #6c780c;
  --c-akcent-navedenie: #55600a;
  --c-akcent-svetlyy: #e2e8c6;
  --c-akcent-v-tekste: #55600a;
  --c-blik: #b8bcb0;
  --c-poverhnost-kartochki: #f7f8f5;
  --c-plashka-cennostey: #fefefe;
  --c-galochka-ramka: #767676;
  --c-oshibka: #b42318;
  --c-logo-znak: #f1b20f;
  --c-shapka-tekst: var(--c-tekst-zelenyy);

  /* карта рынков */
  --c-karta-susha: #e3e6de;
  --c-karta-import: #c6d08a;
  --c-karta-eksport: #56653a;
  --c-karta-import-liniya: #66731a;
  --c-karta-import-tochka: #6c780c;
  --c-karta-eksport-tochka: #2b3310;

  /* палитра рыбы — используется и на главной (плашка «Мы также продаём рыбу») */
  --c-ryba-fon: #eaf1f6;
  --c-ryba-susha: #d4e1eb;
  --c-ryba-tekst: #12324d;
  --c-ryba-akcent: #1e5a8a;
  --c-ryba-akcent-svetlyy: #dce8f2;
  --c-ryba-kartochka: #e6ecf1;

  --f-osnova: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-uzkiy: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --f-studiya: "Onest", "Manrope", system-ui, sans-serif;

  --r-knopka: calc(6 * var(--u));
  --r-kartochka: calc(19.2 * var(--u));
  --r-kartochka-s-foto: calc(28 * var(--u));
  --r-foto-v-kartochke: calc(12 * var(--u));
  --r-melkiy: calc(3 * var(--u));

  --pole: calc(20 * var(--u));          /* поле страницы от края */
  --shapka-vysota: calc(72 * var(--u));

  --perehod: 0.5s;
  --perehod-shapki: 0.2s;               /* подложка шапки — «~200 мс» (лист «Поведение») */
  --krivaya-smeny: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (width >= 768px) {
  :root {
    --u: min(calc(100vw / 768), 1.2px);
    --pole: calc(32 * var(--u));
    --shapka-vysota: calc(100 * var(--u));
  }
}

@media (width >= 1200px) {
  :root {
    --u: min(calc(100vw / 1465), 1.2px);
    --pole: calc(60 * var(--u));
    --shapka-vysota: calc(77 * var(--u));
  }
}

/* страница рыбы — те же роли, морской ряд */
.tema-ryba {
  --c-akcent: #1e5a8a;
  --c-akcent-navedenie: #174a73;
  --c-akcent-svetlyy: #dce8f2;
  --c-akcent-v-tekste: #1e5a8a;
  --c-shapka-tekst: #12324d;
  --c-zagolovok: #12324d;
  --c-liniya: #12324d;
  --c-tekst: #12324d;
  --c-blik: #b4bec6;
  --c-poverhnost-kartochki: #e6ecf1;
}

/* --- 02-osnova.css --- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip, не hidden: hidden ломает position: sticky (animations/sticky.md) */
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--shapka-vysota); }
body {
  margin: 0;
  background: var(--c-fon);
  color: var(--c-tekst);
  font: 400 calc(16 * var(--u))/1.5 var(--f-osnova);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.propusk { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 8px 16px; background: var(--c-fon); }
.propusk:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--c-akcent); outline-offset: 2px; }
.skryto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.konteyner { width: 100%; padding-inline: var(--pole); }

/* Фото на всю коробку: картинка обрезается как «заливка» в Фигме */
.foto { position: relative; overflow: hidden; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Кнопка (компонент «Кнопка» Фигмы: прямоугольник r6, точка слева от подписи) */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  min-height: calc(74 * var(--u)); padding: 0 calc(40 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--c-akcent); border-radius: var(--r-knopka);
  background: var(--c-akcent); color: #fff;
  font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1.2; white-space: nowrap;
  transition: background-color var(--perehod) ease, border-color var(--perehod) ease, color var(--perehod) ease;
}
.knopka::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; flex: none; }
.knopka--bez-tochki::before { content: none; }
.knopka:hover { background: var(--c-akcent-navedenie); border-color: var(--c-akcent-navedenie); }
.knopka--kontur { background: transparent; color: var(--c-shapka-tekst); border-color: var(--c-shapka-tekst); }
.knopka--kontur::before { background: var(--c-akcent); }
.knopka--kontur:hover { background: var(--c-shapka-tekst); color: #fff; border-color: var(--c-shapka-tekst); }
.knopka--kontur:hover::before { background: #fff; }
.knopka:disabled { opacity: 0.6; cursor: progress; }

/* Рубрика блока: «01 · Products» над линией */
.rubrika {
  display: block; padding-bottom: calc(15 * var(--u));
  border-bottom: calc(1.2 * var(--u)) solid var(--c-liniya);
  font-weight: 500; font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); color: var(--c-tekst-priglushennyy);
}
.zagolovok-bloka {
  font-weight: 300; font-size: calc(52 * var(--u)); line-height: calc(57 * var(--u));
  letter-spacing: calc(-2.8 * var(--u)); color: var(--c-zagolovok, var(--c-tekst));
}
@media (width >= 1200px) {
  .zagolovok-bloka { font-size: calc(80 * var(--u)); line-height: calc(80 * var(--u)); }
}

/* --- 03-bloki.css --- */
/* Блоки Agatha Sunrise. Числа — из кадров страницы Фигмы «Для вёрстки —
   согласовано»: база = кадр 390, ≥768 = кадр 768, ≥1200 = кадр 1465.
   Запись calc(N * var(--u)) = N единиц макета. */

/* ================= ШАПКА ================= */
.shapka {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--shapka-vysota);
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: 0 calc(20 * var(--u));
  color: var(--c-shapka-tekst);
}
/* подложка шапки — белая на всех страницах и ширинах (слово владельца 11.10, сайт-ос/370; было — светлый акцент) */
.shapka__podlozhka { position: absolute; inset: 0; z-index: -1; background: #fff; }
.shapka__menyu, .shapka__svyaz, .shapka__kvadrat { display: none; }
.shapka__logo { flex: none; margin-right: auto; }
.shapka__logo img { width: calc(139 * var(--u)); height: calc(36 * var(--u)); }
.messendzhery { display: flex; gap: calc(8 * var(--u)); }
.messendzhery__knopka {
  display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border: calc(1.25 * var(--u)) solid var(--c-shapka-tekst); border-radius: calc(7.5 * var(--u));
  color: var(--c-shapka-tekst); transition: background-color var(--perehod) ease, color var(--perehod) ease, border-color var(--perehod) ease;
}
.messendzhery__knopka svg { width: calc(20 * var(--u)); height: auto; }
.messendzhery__knopka:hover { background: var(--c-akcent); border-color: var(--c-akcent); color: #fff; }
.shapka__burger, .menyu-okno__zakryt {
  flex: none; display: grid; place-content: center; gap: calc(4 * var(--u));
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: var(--r-knopka);
  background: var(--c-akcent); color: #fff; transition: background-color var(--perehod) ease;
}
.shapka__burger:hover, .menyu-okno__zakryt:hover { background: var(--c-akcent-navedenie); }
.shapka__burger span { display: block; width: calc(22 * var(--u)); height: calc(2 * var(--u)); background: currentColor; }
.shapka__telefon, .menyu-okno__telefon { font: 400 calc(30 * var(--u))/1.2 var(--f-uzkiy); white-space: nowrap; }
.shapka__pochta, .menyu-okno__pochta { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }

@media (width >= 768px) {
  .shapka { padding: 0 calc(32 * var(--u)); }
  .shapka__logo { margin-right: 0; }
  .shapka__logo img { width: calc(178 * var(--u)); height: calc(46 * var(--u)); }
  .shapka__svyaz { display: flex; flex-direction: column; margin: 0 auto 0 calc(95 * var(--u)); padding-top: calc(4 * var(--u)); }
  .shapka__pochta { margin-top: calc(-0 * var(--u)); }
  .messendzhery__knopka { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-width: calc(1.375 * var(--u)); border-radius: calc(8.3 * var(--u)); }
  .shapka__burger, .menyu-okno__zakryt { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
}

@media (width >= 1200px) {
  .shapka { padding: 0 calc(40 * var(--u)); gap: 0; }
  .shapka__podlozhka { opacity: 0; box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.06); transition: opacity var(--perehod-shapki) ease; }
  .shapka--zakreplena .shapka__podlozhka { opacity: 1; }
  .shapka__menyu { display: flex; gap: calc(32 * var(--u)); margin-right: auto; }
  .shapka__menyu a { font-weight: 800; font-size: calc(11 * var(--u)); line-height: calc(15 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; }
  .shapka__menyu a:hover { color: var(--c-akcent); }
  .shapka__logo { position: absolute; left: 50%; top: calc(16 * var(--u)); translate: -50% 0; }
  .shapka__svyaz { margin: 0 calc(24 * var(--u)) 0 0; padding: 0; align-items: flex-end; align-self: flex-start; padding-top: calc(14 * var(--u)); }
  .shapka__pochta { margin-top: calc(-2 * var(--u)); }
  .shapka__messendzhery, .shapka__burger { display: none; }
  .shapka__kvadrat {
    display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u));
    border-radius: var(--r-knopka); background: var(--c-akcent); color: #fff; transition: background-color var(--perehod) ease;
  }
  .shapka__kvadrat svg { width: 100%; height: 100%; }
  .shapka__kvadrat:hover { background: var(--c-akcent-navedenie); }
}

/* ================= ОКНО МЕНЮ (планшет, мобильная) ================= */
.menyu-okno {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0 calc(20 * var(--u)) calc(20 * var(--u)); border: 0;
  background: #fff; color: var(--c-tekst-zelenyy); /* окно меню — белое на обеих страницах (сайт-ос/370) */
  overflow-y: auto; overscroll-behavior: contain;
}
.tema-ryba .menyu-okno { color: var(--c-ryba-tekst); }
.menyu-okno[open] { display: flex; flex-direction: column; }
.menyu-okno::backdrop { background: transparent; }
.menyu-okno__shapka {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(72 * var(--u)); margin: 0 calc(-20 * var(--u)); padding: 0 calc(20 * var(--u));
  background: #fff; --c-shapka-tekst: var(--c-tekst);
}
.tema-ryba .menyu-okno__shapka { --c-shapka-tekst: var(--c-ryba-tekst); }
.menyu-okno__logo { margin-right: auto; }
.menyu-okno__logo img { width: calc(139 * var(--u)); height: calc(36 * var(--u)); }
.menyu-okno__zakryt svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); transition: transform var(--perehod) ease; }
.menyu-okno__zakryt:hover svg { transform: rotate(90deg); }
.menyu-okno__punkty { margin-top: calc(40 * var(--u)); }
.menyu-okno__punkty a {
  display: flex; align-items: center; justify-content: space-between; height: calc(72 * var(--u));
  border-bottom: 1px solid rgb(43 51 16 / 0.25);
  font: 400 calc(48 * var(--u))/1 var(--f-uzkiy); text-transform: uppercase; padding-top: calc(4 * var(--u));
}
.tema-ryba .menyu-okno__punkty a { border-bottom-color: rgb(18 50 77 / 0.25); }
.menyu-okno__strelka { width: calc(26 * var(--u)); height: calc(20 * var(--u)); transition: transform var(--perehod) var(--krivaya-smeny); }
.menyu-okno__punkty a:hover .menyu-okno__strelka { transform: translateX(calc(6 * var(--u))); }
.menyu-okno__dop { margin-top: calc(81 * var(--u)); }
.tema-frukty .menyu-okno__dop--ryba, .tema-ryba .menyu-okno__dop--frukty { display: none; }
.menyu-okno__metka { font-weight: 500; font-size: calc(12 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; }
.menyu-okno__chipy { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
.menyu-okno__chipy a {
  display: grid; place-items: center; height: calc(40 * var(--u)); border-radius: 999px;
  background: var(--c-akcent-svetlyy); font-weight: 600; font-size: calc(15 * var(--u));
}
.menyu-okno__niz { margin-top: auto; padding-top: calc(60 * var(--u)); display: flex; flex-direction: column; }
.menyu-okno__pochta { margin-top: calc(4 * var(--u)); }
.menyu-okno__knopka { margin-top: calc(28 * var(--u)); min-height: calc(56 * var(--u)); font-size: calc(20 * var(--u)); }
@media (width >= 768px) {
  .menyu-okno { padding: 0 calc(32 * var(--u)) calc(32 * var(--u)); }
  .menyu-okno__shapka { height: calc(100 * var(--u)); margin: 0 calc(-32 * var(--u)); padding: 0 calc(32 * var(--u)); }
  .menyu-okno__logo img { width: calc(178 * var(--u)); height: calc(46 * var(--u)); }
  .menyu-okno__punkty { margin-top: calc(64 * var(--u)); }
  .menyu-okno__punkty a { height: calc(104 * var(--u)); font-size: calc(72 * var(--u)); }
  .menyu-okno__strelka { width: calc(33 * var(--u)); height: calc(25 * var(--u)); }
  .menyu-okno__dop { margin-top: calc(53 * var(--u)); }
  .menyu-okno__metka { font-size: calc(14 * var(--u)); }
  .menyu-okno__chipy a { height: calc(52 * var(--u)); font-size: calc(18 * var(--u)); }
  .menyu-okno__knopka { min-height: calc(74 * var(--u)); font-size: calc(22 * var(--u)); }
}
@media (width >= 1200px) { .menyu-okno { display: none !important; } }

/* ================= ПЕРВЫЙ ЭКРАН ================= */
.hero { position: relative; overflow: hidden; height: calc(844 * var(--u)); background: #f7f7f7; color: var(--c-tekst-zelenyy); }
.hero--ryba { background: #eef1f6; color: var(--c-ryba-tekst); }
.hero__slaydy { position: absolute; inset: 0; }
.hero__slayd { position: absolute; inset: 0; opacity: 0; transition: opacity var(--perehod) ease; }
.hero__slayd.is-aktiv, .no-js .hero__slayd:first-child { opacity: 1; }
.hero__foto { position: absolute; overflow: hidden; display: none; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto--390, .hero__foto--vse { display: block; left: calc(-2 * var(--u)); top: calc(162 * var(--u)); width: calc(394 * var(--u)); height: calc(682 * var(--u)); } /* в кадре 3…387 — по краям светлые полосы 3 px; фото заходит под обрезку на 2 (свод, В4) */
.hero__foto--vse { top: calc(520 * var(--u)); height: calc(324 * var(--u)); left: 0; width: 100%; }
.hero--ryba .hero__foto--390 { left: 0; top: calc(158 * var(--u)); width: 100%; height: calc(693 * var(--u)); }

.hero__soderzhimoe { position: relative; z-index: 2; padding: calc(92 * var(--u)) calc(20 * var(--u)) 0; text-align: center; }
.hero__nadzagolovok { font-weight: 500; font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; }
.hero__zagolovok { margin-top: calc(4 * var(--u)); font: 400 calc(60 * var(--u))/calc(60 * var(--u)) var(--f-uzkiy); text-transform: uppercase; }
.hero__zagolovok span { display: block; white-space: nowrap; }
.hero--ryba .hero__zagolovok { font-size: calc(84 * var(--u)); line-height: calc(84 * var(--u)); margin-top: calc(10 * var(--u)); }
.hero__stroka-akcent { color: var(--c-ryba-akcent); }
.hero__stroka-chernaya { color: #000; }
.hero__podzagolovok { max-width: calc(300 * var(--u)); margin: calc(14 * var(--u)) auto 0; font-size: calc(18 * var(--u)); line-height: 1.5; }
.hero--ryba .hero__podzagolovok { max-width: calc(240 * var(--u)); margin-top: calc(10 * var(--u)); }
.hero__knopki { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
.hero__knopki .knopka { min-height: calc(56 * var(--u)); font-size: calc(18 * var(--u)); }
.hero__shema { display: none; }

/* управление слайдером первого экрана */
.hero__upravlenie {
  position: absolute; z-index: 2; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(776 * var(--u));
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "nazad kadr vpered" "nazad tochki vpered";
  align-items: center; padding: 0 calc(11 * var(--u));
}
.hero__upravlenie .krug-knopka--nazad { grid-area: nazad; }
.hero__upravlenie .krug-knopka--taymer { grid-area: vpered; }
.hero__kadr { grid-area: kadr; display: flex; align-items: baseline; justify-content: center; gap: calc(8 * var(--u)); }
.hero__metka { font-weight: 500; font-size: calc(9.6 * var(--u)); letter-spacing: 0.2em; text-transform: uppercase; }
.hero__produkt { font-weight: 500; font-size: calc(16 * var(--u)); line-height: calc(19.2 * var(--u)); }
.hero__tochki { grid-area: tochki; justify-self: center; margin-top: calc(8 * var(--u)); }
/* кадр 390: подпись кадра на 10 ниже верха кнопок, точки — 8 под подписью */
@media (width < 768px) { .hero__kadr { margin-top: calc(10 * var(--u)); min-height: calc(20 * var(--u)); align-items: center; } .hero__upravlenie { align-items: start; } .hero__upravlenie .krug-knopka { align-self: start; } }
.hero__schetchik { display: none; }

/* круглая кнопка со стрелкой и дугой-таймером */
.krug-knopka { position: relative; display: grid; place-items: center; width: calc(45 * var(--u)); height: calc(45 * var(--u)); color: var(--c-tekst-zelenyy); }
.krug-knopka__kolco { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.krug-knopka__fon, .krug-knopka__duga { fill: none; stroke-width: 2; }
.krug-knopka__fon { stroke: currentColor; opacity: 0.15; }
.krug-knopka__duga { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 75; }
.krug-knopka__strelka { width: calc(11 * var(--u)); height: auto; transition: transform var(--perehod) var(--krivaya-smeny); }
.krug-knopka--nazad .krug-knopka__strelka { rotate: 180deg; }
.krug-knopka:hover .krug-knopka__strelka { transform: translateX(calc(3 * var(--u))); }
.krug-knopka:disabled { opacity: 0.35; cursor: default; }

.upravlenie__tochki { display: flex; gap: calc(8 * var(--u)); }
.upravlenie__tochki button { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: currentColor; opacity: 0.2; transition: opacity var(--perehod) ease; }
.upravlenie__tochki button[aria-current="true"] { opacity: 1; }

@media (width >= 768px) {
  .hero { height: calc(1132 * var(--u)); }
  .hero__foto--390 { display: none; }
  .hero__foto--768, .hero__foto--vse { display: block; left: calc(-174 * var(--u)); top: calc(-59 * var(--u)); width: calc(890 * var(--u)); height: calc(1186 * var(--u)); }
  .hero__foto--vse { left: 0; top: calc(600 * var(--u)); width: 100%; height: calc(532 * var(--u)); }
  .hero--ryba .hero__foto--768 { left: 0; top: calc(108 * var(--u)); width: 100%; height: calc(1024 * var(--u)); }
  .hero__soderzhimoe { padding: calc(170 * var(--u)) calc(32 * var(--u)) 0; }
  .hero__nadzagolovok { font-size: calc(20 * var(--u)); line-height: calc(27 * var(--u)); }
  .hero__zagolovok { margin-top: calc(11 * var(--u)); font-size: calc(96 * var(--u)); line-height: calc(115 * var(--u)); }
  .hero__zagolovok span { display: inline; }
  .hero__zagolovok span:last-child { display: block; }
  .hero--ryba .hero__zagolovok { font-size: calc(96 * var(--u)); line-height: calc(110 * var(--u)); margin-top: calc(14 * var(--u)); }
  .hero--ryba .hero__zagolovok span { display: block; }
  .hero__podzagolovok { max-width: none; margin-top: calc(-8 * var(--u)); font-size: calc(20 * var(--u)); }
  .hero--ryba .hero__podzagolovok { max-width: none; margin-top: calc(6 * var(--u)); }
  .hero__knopki { display: grid; grid-template-columns: 367fr 317fr; gap: calc(22 * var(--u)); margin-top: calc(37 * var(--u)); }
  .hero--ryba .hero__knopki { grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); margin-top: calc(36 * var(--u)); }
  .hero__knopki .knopka { min-height: calc(74 * var(--u)); font-size: calc(16 * var(--u)); }
  .hero__upravlenie { left: calc(32 * var(--u)); right: calc(32 * var(--u)); top: calc(1029 * var(--u)); padding: 0; }
  .krug-knopka { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .krug-knopka__strelka { width: calc(14 * var(--u)); }
  .hero__metka { font-size: calc(12 * var(--u)); letter-spacing: 0.2em; }
}

@media (width >= 1200px) {
  .hero { height: calc(880 * var(--u)); background: var(--c-poverhnost); }
  .hero--ryba { height: calc(896 * var(--u)); background: #f4f5f7; }
  .hero__foto--768 { display: none; }
  .hero__foto--1440, .hero__foto--vse { display: block; left: 0; top: calc(-49 * var(--u)); width: 100%; height: calc(977 * var(--u)); }
  .hero--ryba .hero__foto--1440 { left: calc(146 * var(--u)); top: calc(15 * var(--u)); width: calc(1321 * var(--u)); height: calc(881 * var(--u)); }
  .hero--ryba .hero__slayd::after { /* растворение левого края льда — слой Фигмы 110×770 */
    content: ""; position: absolute; left: calc(548 * var(--u)); top: calc(126 * var(--u)); width: calc(110 * var(--u)); height: calc(770 * var(--u));
    background: linear-gradient(90deg, #f4f5f7 0%, rgb(244 245 247 / 0.85) 35%, rgb(244 245 247 / 0) 100%);
  }
  .hero__soderzhimoe { position: absolute; left: calc(40 * var(--u)); top: calc(246 * var(--u)); padding: 0; text-align: left; width: calc(560 * var(--u)); }
  .hero--ryba .hero__soderzhimoe { top: calc(211 * var(--u)); }
  .hero__nadzagolovok { margin-left: calc(4 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
  .hero__zagolovok { margin-top: 0; font-size: calc(84 * var(--u)); line-height: calc(80 * var(--u)); padding-top: calc(10 * var(--u)); }
  .hero__zagolovok span, .hero__zagolovok span:last-child { display: block; }
  .hero__stroka-2 { padding-left: calc(167 * var(--u)); }
  .hero--ryba .hero__zagolovok { font-size: calc(84 * var(--u)); line-height: calc(80 * var(--u)); margin-top: 0; }
  .hero__podzagolovok { width: calc(175 * var(--u)); margin: calc(48 * var(--u)) 0 0 calc(64 * var(--u)); font-size: calc(15 * var(--u)); }
  .hero--ryba .hero__podzagolovok { width: auto; margin: calc(28 * var(--u)) 0 0 calc(5 * var(--u)); }
  .hero__knopki { display: flex; flex-direction: row; gap: calc(14 * var(--u)); margin: calc(61 * var(--u)) 0 0 calc(5 * var(--u)); }
  .hero--ryba .hero__knopki { display: flex; margin-top: calc(37 * var(--u)); }
  .hero__knopki .knopka:first-child { width: calc(241 * var(--u)); }
  .hero__knopki .knopka:last-child { width: calc(210 * var(--u)); }
  .hero__shema { display: block; position: absolute; z-index: 2; left: calc(45 * var(--u)); top: calc(696 * var(--u)); width: calc(465 * var(--u)); }
  /* управление: столбик справа (кадр «Управление» 127×122 у правого края) */
  .hero__upravlenie {
    left: auto; right: calc(38 * var(--u)); top: calc(282 * var(--u));
    grid-template-columns: auto auto; grid-template-areas: "kadr kadr" "schet vpered"; column-gap: calc(21 * var(--u)); row-gap: calc(20 * var(--u));
    justify-items: end;
  }
  .hero__upravlenie .krug-knopka--nazad, .hero__tochki { display: none; }
  .hero__kadr { flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); }
  .hero__metka { font-size: calc(12 * var(--u)); line-height: calc(15.6 * var(--u)); letter-spacing: 0.2em; }
  .hero__produkt { font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
  .hero__schetchik { display: block; grid-area: schet; font-weight: 500; font-size: calc(14 * var(--u)); letter-spacing: 0.08em; }
}

/* ================= МИНИ-СХЕМА МАРШРУТА (рыба) ================= */
.shema { position: relative; height: calc(146 * var(--u)); color: var(--c-ryba-tekst); }
.shema__put { position: absolute; left: calc(13 * var(--u)); right: calc(13 * var(--u)); top: calc(50 * var(--u)); width: calc(100% - 26 * var(--u)); height: calc(42 * var(--u)); overflow: visible; }
.shema__punktir { fill: none; stroke: var(--c-ryba-akcent); stroke-opacity: 0.3; stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.shema__risovka { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.shema__orbita { fill: none; stroke: none; }
.shema__rybka { position: absolute; left: 0; top: 0; width: calc(28 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-14 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #f4f5f7; }
.menyu-okno .shema__rybka { background: #fff; }
.shema__rybka svg { width: calc(20.8 * var(--u)); height: calc(8.5 * var(--u)); }
.shema__marka { fill: none; position: absolute; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.menyu-okno .shema__marka rect:first-child { fill: #fff; }
.shema__marka--norway { left: calc(-1 * var(--u)); top: calc(36 * var(--u)); }
.shema__marka--antwerp { left: calc(50% - 14 * var(--u)); top: calc(78 * var(--u)); }
.shema__marka--tashkent { right: calc(-1 * var(--u)); top: calc(36 * var(--u)); }
.shema__tochka { position: absolute; display: flex; flex-direction: column; gap: calc(2 * var(--u)); white-space: nowrap; }
.shema__strana { font-weight: 600; font-size: calc(11 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.shema__gorod { font-size: calc(12 * var(--u)); opacity: 0.65; }
.shema__tochka--norvegiya { left: 0; top: 0; }
.shema__tochka--belgiya { left: 50%; top: calc(112 * var(--u)); translate: -50% 0; text-align: center; align-items: center; }
.shema__tochka--uzbekistan { right: 0; top: 0; text-align: right; align-items: flex-end; }

/* ================= ПРОДУКТЫ ================= */
.produkty { padding: calc(64 * var(--u)) 0 calc(64 * var(--u)); background: var(--c-fon); }
.produkty__shapka { padding: 0 var(--pole); }
.produkty__shapka .zagolovok-bloka { margin-top: calc(40 * var(--u)); }
.produkty__spisok {
  display: flex; margin-top: calc(30 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.produkty__spisok::-webkit-scrollbar { display: none; }
.kartochka { flex: 0 0 100%; scroll-snap-align: start; background: var(--c-fon); color: var(--c-tekst); }
.kartochka__foto { height: calc(260 * var(--u)); }
.kartochka__opisanie { padding: calc(28 * var(--u)) calc(20 * var(--u)) 0; }
/* кадр 390: под характеристиками самой длинной карточки 32. Тень карточки вверх (0 −40, размытие 80, 22 %),
   что ложилась серой растушёвкой на заголовок «Three fruits we know by heart», убрана — слово владельца 11.10
   «тень это вообще лишняя» (сайт-ос/370); лента на 30 под заголовком, как и была (120 − 90). */
@media (width < 768px) {
  .produkty:not(.produkty--ryba) .kartochka__opisanie { padding-bottom: calc(16 * var(--u)); } /* +16 — нижний отступ последнего блока */
}
.kartochka__nomer { font-weight: 600; font-size: calc(13 * var(--u)); line-height: calc(15.6 * var(--u)); color: var(--c-tekst-priglushennyy); }
.kartochka__nazvanie { margin-top: calc(8 * var(--u)); font-weight: 300; font-size: calc(62 * var(--u)); line-height: calc(68.2 * var(--u)); letter-spacing: calc(-4.32 * var(--u)); color: var(--c-zagolovok, var(--c-tekst)); }
.kartochka__fraza { margin-top: calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--c-tekst-priglushennyy); }
.kartochka__blok { margin-top: calc(20 * var(--u)); padding-top: calc(17 * var(--u)); border-top: calc(1.2 * var(--u)) solid var(--c-liniya); }
.kartochka__podpis { font-weight: 600; font-size: calc(13 * var(--u)); line-height: calc(15.6 * var(--u)); }
.mesyacy { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(3.5 * var(--u)); margin-top: calc(12 * var(--u)); }
.mesyacy button { display: grid; place-items: center; width: 100%; height: calc(36 * var(--u)); border-radius: var(--r-knopka); font-weight: 500; font-size: calc(12 * var(--u)); }
.mesyacy .p { background: var(--c-akcent); color: #fff; }
.mesyacy .d { background: var(--c-akcent-svetlyy); color: var(--c-tekst); }
.mesyacy .n { background: var(--c-poverhnost); color: var(--c-tekst-priglushennyy); }
.seasonality-tooltip {
  position: fixed; z-index: 110; width: max-content; max-width: min(21rem, calc(100vw - 24px));
  padding: 8px 12px; border: 1px solid var(--c-liniya); border-radius: var(--r-knopka);
  background: var(--c-fon); color: var(--c-tekst); box-shadow: 0 6px 24px rgb(0 0 0 / .14);
  font-size: 14px; line-height: 1.4;
}
.seasonality-link { margin-top: calc(12 * var(--u)); color: var(--c-tekst); text-decoration: underline; text-underline-offset: .2em; font-size: calc(13 * var(--u)); }
.seasonality-panel { position: fixed; inset: 0; margin: auto; width: min(44rem, calc(100vw - 32px)); max-height: 80dvh; overflow: auto; padding: clamp(16px, 3vw, 32px); background: var(--c-fon); color: var(--c-tekst); border: 1px solid var(--c-liniya); border-radius: 12px; box-shadow: 0 12px 44px rgb(0 0 0 / .18); font-size: 14px; }
.seasonality-panel::backdrop { background: rgb(0 0 0 / .24); }
.seasonality-panel__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.seasonality-panel__header button { padding: 8px; text-decoration: underline; }
.seasonality-panel table { width: 100%; border-collapse: collapse; text-align: left; }
.seasonality-panel :is(th, td) { padding: 8px 6px; vertical-align: top; border-bottom: 1px solid var(--c-liniya); }
.seasonality-panel tr > :nth-child(2) { white-space: nowrap; }
@media (width < 768px) {
  .seasonality-panel { width: calc(100% - 32px); }
  .seasonality-panel__header { position: sticky; top: 0; z-index: 1; background: var(--c-fon); }
  .seasonality-panel__header button { min-height: 44px; }
}
.legenda { display: flex; gap: calc(18 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(15.6 * var(--u)); color: var(--c-tekst-priglushennyy); }
.legenda li { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.legenda li::before { content: ""; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border: 1px solid var(--c-tekst); border-radius: var(--r-melkiy); }
.legenda .p::before { background: var(--c-akcent); }
.legenda .d::before { background: var(--c-akcent-svetlyy); }
.legenda .n::before { background: var(--c-poverhnost); }
.harakteristiki { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)) calc(24 * var(--u)); margin-top: calc(12 * var(--u)); }
.harakteristiki dt { font-size: calc(13 * var(--u)); line-height: calc(15.6 * var(--u)); color: var(--c-tekst-priglushennyy); }
.harakteristiki dd { margin: calc(2 * var(--u)) 0 0; font-weight: 500; font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); }
.upravlenie { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; margin: calc(24 * var(--u)) var(--pole) 0; color: var(--c-tekst); }
.upravlenie .krug-knopka { width: calc(56 * var(--u)); height: calc(56 * var(--u)); color: var(--c-tekst-zelenyy); }
.upravlenie .krug-knopka__strelka { width: calc(14 * var(--u)); }
.upravlenie__podpis { display: none; }

/* рыба: одна карточка */
.produkty--ryba { padding-bottom: calc(24 * var(--u)); }
.kartochka--ryba .kartochka__foto { height: calc(300 * var(--u)); }
.kartochka--ryba .kartochka__opisanie { padding-top: calc(36 * var(--u)); }
.kartochka--ryba .kartochka__nazvanie { font-size: calc(52 * var(--u)); line-height: calc(57 * var(--u)); letter-spacing: calc(-2.8 * var(--u)); }
.kartochka--ryba .kartochka__fraza { font-size: calc(18 * var(--u)); line-height: calc(28.5 * var(--u)); }
.kartochka--ryba .kartochka__blok { margin-top: calc(36 * var(--u)); }
/* кадр «Рыба — мобильная 390»: карточка на 38 ниже заголовка, под характеристиками 32, до конца блока 64;
   заголовки «Route» и «What we value» — интерлиньяж 52; кнопки «Ценностей» — 24 под карточками */
@media (width < 768px) {
  .produkty--ryba { padding-bottom: calc(64 * var(--u)); }
  .produkty--ryba .produkty__spisok { margin-top: calc(38 * var(--u)); }
  .kartochka--ryba .kartochka__opisanie { padding-bottom: calc(16 * var(--u)); }
  .rynki--ryba .zagolovok-bloka, .stranica-ryba .cennosti__zagolovok { line-height: calc(52 * var(--u)); }
  .stranica-ryba .cennosti__upravlenie { margin-top: calc(24 * var(--u)); }
  .stranica-ryba .kontakty__forma { padding-top: 0; } /* в кадре рыбы поля формы без верхнего отступа 8 */
}

@media (width >= 768px) {
  .produkty { padding: calc(88 * var(--u)) 0 calc(88 * var(--u)); }
  .produkty__spisok { gap: calc(16 * var(--u)); margin-top: calc(32 * var(--u)); padding: 0 var(--pole); scroll-padding: var(--pole); }
  .kartochka {
    flex-basis: calc(640 * var(--u)); display: grid; grid-template-columns: calc(260 * var(--u)) 1fr; gap: calc(28 * var(--u)); align-items: center;
    padding: calc(24 * var(--u)); border-radius: var(--r-kartochka); box-shadow: 0 0 calc(40 * var(--u)) rgb(34 22 27 / 0.08);
  }
  .produkty__spisok { padding-block: calc(24 * var(--u)); margin-block: calc(8 * var(--u)) calc(-24 * var(--u)); }
  .kartochka__foto { height: calc(360 * var(--u)); border-radius: var(--r-kartochka); }
  .kartochka__opisanie { padding: 0; }
  .kartochka__nazvanie { font-size: calc(64 * var(--u)); line-height: calc(70.4 * var(--u)); }
  .kartochka__fraza { font-size: calc(17 * var(--u)); line-height: calc(25.5 * var(--u)); }
  .kartochka__blok { margin-top: calc(32 * var(--u)); }
  .mesyacy { gap: calc(3.6 * var(--u)); }
  .upravlenie { margin-top: calc(32 * var(--u)); }
  .produkty--ryba .produkty__spisok { overflow: visible; padding-block: 0; margin-block: calc(48 * var(--u)) 0; }
  .kartochka--ryba { flex-basis: 100%; grid-template-columns: calc(330 * var(--u)) 1fr; gap: calc(32 * var(--u)); padding: 0; box-shadow: none; border-radius: 0; }
  .kartochka--ryba .kartochka__foto { height: calc(380 * var(--u)); }
  .kartochka--ryba .kartochka__nazvanie { font-size: calc(64 * var(--u)); line-height: calc(64 * var(--u)); }
}

@media (width >= 1200px) {
  .produkty { padding: calc(120 * var(--u)) 0 calc(146 * var(--u)); }
  .produkty__shapka .zagolovok-bloka { margin-top: calc(40 * var(--u)); }
  .produkty__spisok { display: block; overflow: visible; margin: calc(64 * var(--u)) 0 0; padding: 0 var(--pole); }
  .kartochka {
    position: sticky; top: calc(110 * var(--u)); /* наезд карточек при прокрутке (сайт Ашота) */
    display: grid; grid-template-columns: calc(634 * var(--u)) 1fr; gap: calc(64 * var(--u)); align-items: start;
    height: calc(628 * var(--u)); padding: calc(34 * var(--u)); margin-bottom: calc(26 * var(--u));
    box-shadow: 0 calc(-40 * var(--u)) calc(80 * var(--u)) rgb(34 22 27 / 0.22);
  }
  .kartochka:last-child { margin-bottom: 0; }
  .kartochka__foto { height: calc(560 * var(--u)); }
  .kartochka__opisanie { padding: calc(8 * var(--u)) 0 0; }
  .kartochka__nazvanie { font-size: calc(96 * var(--u)); line-height: calc(91.2 * var(--u)); }
  .kartochka__fraza { font-size: calc(19 * var(--u)); line-height: calc(28.5 * var(--u)); }
  .kartochka__blok { margin-top: calc(36 * var(--u)); }
  .mesyacy { gap: calc(3.6 * var(--u)); }
  .upravlenie { display: none; }
  .produkty--ryba { padding-bottom: calc(96 * var(--u)); }
  .produkty--ryba .produkty__spisok { margin-top: calc(64 * var(--u)); }
  .kartochka--ryba { position: static; height: auto; grid-template-columns: calc(672 * var(--u)) 1fr; align-items: center; gap: calc(64 * var(--u)); padding: 0; margin: 0; box-shadow: none; }
  .kartochka--ryba .kartochka__foto { height: calc(620 * var(--u)); }
  .kartochka--ryba .kartochka__nazvanie { font-size: calc(96 * var(--u)); line-height: calc(91.2 * var(--u)); letter-spacing: calc(-4.32 * var(--u)); }
  .kartochka--ryba .kartochka__fraza { font-size: calc(19 * var(--u)); }
}

/* ================= ПЛАШКА-ПРИЗЫВ (рыба на главной, фрукты на рыбе) ================= */
.prizyv { padding: calc(2 * var(--u)) calc(20 * var(--u)); background: var(--c-fon); }
.prizyv__plashka {
  position: relative; overflow: hidden; isolation: isolate; height: calc(615 * var(--u));
  border: 1px solid var(--c-liniya); border-radius: var(--r-kartochka); background: var(--c-ryba-fon); color: var(--c-ryba-tekst);
}
.prizyv--ryba .prizyv__plashka { --c-liniya: #1f2410; }
.prizyv--frukty .prizyv__plashka { height: calc(602 * var(--u)); border-color: transparent; background: #f4f6f8; color: var(--c-tekst-zelenyy); }
.prizyv__tekst { position: relative; z-index: 2; padding: calc(36 * var(--u)) calc(20 * var(--u) - 1px) 0; text-align: center; }
.prizyv__zagolovok { max-width: calc(260 * var(--u)); margin: 0 auto; font-weight: 500; font-size: calc(40 * var(--u)); line-height: 1.1; letter-spacing: calc(-0.8 * var(--u)); text-transform: uppercase; }
.prizyv__podzagolovok { max-width: calc(260 * var(--u)); margin: calc(19 * var(--u)) auto 0; font-size: calc(18 * var(--u)); line-height: calc(26.1 * var(--u)); }
.prizyv--frukty .prizyv__podzagolovok { max-width: calc(300 * var(--u)); }
.prizyv__knopka { width: 100%; min-height: calc(60 * var(--u)); margin-top: calc(36 * var(--u)); font-size: calc(22 * var(--u)); background: var(--c-ryba-akcent); border-color: var(--c-ryba-akcent); }
.prizyv__knopka:hover { background: #174a73; border-color: #174a73; }
.prizyv--frukty .prizyv__knopka { background: #6c780c; border-color: #6c780c; }
.prizyv--frukty .prizyv__knopka:hover { background: #55600a; border-color: #55600a; }
.prizyv__karta { position: absolute; left: calc(19 * var(--u)); top: calc(354 * var(--u)); width: calc(312 * var(--u)); height: auto; }
.prizyv__foto { position: absolute; z-index: 1; left: calc(-6 * var(--u)); top: calc(404 * var(--u)); width: calc(367 * var(--u)); mix-blend-mode: multiply; }
.prizyv__foto img { width: 100%; height: auto; }
.prizyv--frukty .prizyv__foto { left: calc(-40 * var(--u)); top: calc(214 * var(--u)); width: calc(660 * var(--u)); }
.prizyv__metka { position: absolute; z-index: 2; right: calc(127 * var(--u)); top: calc(371 * var(--u)); font-weight: 500; font-size: calc(16 * var(--u)); line-height: 1.4; text-align: right; color: rgb(18 51 77 / 0.75); }
.prizyv__tochka { position: absolute; z-index: 2; left: calc(230 * var(--u)); top: calc(377 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border: calc(1.5 * var(--u)) solid var(--c-ryba-akcent); border-radius: 50%; }
.prizyv__tochka::after { content: ""; position: absolute; inset: calc(6.5 * var(--u)); border-radius: 50%; background: var(--c-ryba-akcent); }

@media (width >= 768px) {
  .prizyv { padding: calc(2 * var(--u)) var(--pole); }
  .prizyv__plashka { height: calc(628 * var(--u)); }
  .prizyv--frukty .prizyv__plashka { height: calc(628 * var(--u)); }
  .prizyv__tekst { padding: calc(56 * var(--u)) calc(40 * var(--u)) 0; }
  .prizyv__zagolovok, .prizyv__podzagolovok, .prizyv--frukty .prizyv__podzagolovok { max-width: none; }
  .prizyv__zagolovok { font-size: calc(60 * var(--u)); line-height: calc(44 * var(--u)); }
  .prizyv__podzagolovok { font-size: calc(20 * var(--u)); }
  .prizyv__knopka { width: calc(384 * var(--u)); min-height: calc(78 * var(--u)); font-size: calc(26 * var(--u)); }
  .prizyv__karta { left: calc(138 * var(--u)); top: calc(332 * var(--u)); width: calc(544 * var(--u)); }
  .prizyv__foto { left: calc(65 * var(--u)); top: calc(321 * var(--u)); width: calc(574 * var(--u)); }
  .prizyv--frukty .prizyv__foto { left: calc(-38 * var(--u)); top: calc(200 * var(--u)); width: calc(780 * var(--u)); }
  .prizyv__metka { right: auto; left: calc(76 * var(--u)); top: calc(342 * var(--u)); width: calc(398 * var(--u)); font-size: calc(20 * var(--u)); }
  .prizyv__metka br { display: none; }
  .prizyv__tochka { left: calc(484 * var(--u)); top: calc(333 * var(--u)); width: calc(55 * var(--u)); height: calc(55 * var(--u)); border-width: calc(2.95 * var(--u)); }
  .prizyv__tochka::after { inset: calc(13 * var(--u)); }
}

@media (width >= 1200px) {
  .prizyv { padding: calc(2 * var(--u)) var(--pole); }
  .prizyv__plashka { height: calc(537 * var(--u)); display: flex; align-items: center; }
  .prizyv--frukty .prizyv__plashka { height: calc(537 * var(--u)); }
  .prizyv__tekst { padding: 0 0 0 calc(34 * var(--u)); text-align: left; margin-top: calc(-13 * var(--u)); }
  .prizyv__zagolovok { font-size: calc(40 * var(--u)); line-height: calc(44 * var(--u)); white-space: nowrap; }
  .prizyv__podzagolovok { margin-left: 0; margin-right: 0; font-size: calc(18 * var(--u)); white-space: nowrap; }
  .prizyv__knopka { width: calc(285 * var(--u)); min-height: calc(85 * var(--u)); font-size: calc(16 * var(--u)); }
  .prizyv__karta { left: calc(759 * var(--u)); top: calc(35 * var(--u)); width: calc(520 * var(--u)); }
  .prizyv__foto { left: calc(511 * var(--u)); top: calc(27 * var(--u)); width: calc(798 * var(--u)); }
  .prizyv--frukty .prizyv__foto { left: calc(515 * var(--u)); top: calc(-153 * var(--u)); width: calc(1253 * var(--u)); }
  .prizyv__metka { left: auto; right: calc(242 * var(--u)); top: calc(77 * var(--u)); width: auto; font-size: calc(14 * var(--u)); }
  .prizyv__metka br { display: inline; }
  .prizyv__tochka { left: calc(1120 * var(--u)); top: calc(83 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .prizyv__tochka::after { inset: calc(6.5 * var(--u)); }
}

/* ================= РЫНКИ / МАРШРУТ — КАРТА ================= */
.rynki { padding: calc(64 * var(--u)) var(--pole) calc(64 * var(--u)); background: var(--c-fon); }
.rynki__shapka { padding-top: calc(24 * var(--u)); }
.rynki__podpis { margin-top: calc(12 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); color: var(--c-tekst-priglushennyy); }
.rynki--ryba .rynki__podpis { line-height: calc(28.5 * var(--u)); }
.rynki__karta { position: relative; margin-top: calc(32 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--c-poverhnost); overflow: hidden; }
.rynki__karta > .karta { display: block; width: calc(396 * var(--u)); max-width: none; margin-left: calc(-29 * var(--u)); }
.rynki__spiski { margin-top: calc(28 * var(--u)); display: grid; gap: calc(28 * var(--u)); }
.rynki__legenda { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u)); }
.rynki__legenda::before { content: ""; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: var(--r-melkiy); flex: none; }
.rynki__legenda--import::before { background: var(--c-karta-import); }
.rynki__legenda--eksport::before { background: var(--c-karta-eksport); }
.rynki__legenda--istochnik::before { background: var(--c-ryba-akcent-svetlyy); }
.rynki__legenda--dostavka::before { background: var(--c-ryba-tekst); }
.chipy { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.chipy li {
  padding: calc(8 * var(--u) - 1px) calc(15 * var(--u) - 1px); border: 1px solid var(--c-liniya); border-radius: 999px; background: #fff;
  font-size: calc(14 * var(--u)); line-height: calc(16 * var(--u)); cursor: default; transition: background-color var(--perehod) ease, color var(--perehod) ease;
}
.chipy li.is-aktiv { background: var(--c-tekst); color: #fff; }

/* карта маршрута рыбы: окно над картой, масштаб и сдвиг — как у кадра «Карта» в Фигме */
.rynki__karta--ryba { overflow: visible; background: none; border-radius: 0; }
.rynki__okno { position: relative; height: calc(177 * var(--u)); overflow: hidden; border-radius: calc(16 * var(--u)); background: var(--c-poverhnost); }
.rynki__okno .karta--ryba { max-width: none; position: absolute; left: calc(-83 * var(--u)); top: 0; width: calc(475 * var(--u)); margin: 0; }
.rynki__legenda-ryba { display: flex; gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)); }
.rynki__legenda-ryba .rynki__legenda { font-size: calc(16 * var(--u)); }
.rynki__legenda-ryba .rynki__legenda { line-height: calc(21 * var(--u)); }
.rynki__legenda-ryba .chipy { margin-top: calc(15 * var(--u)); } /* кадры рыбы: подпись 21, чипы на 36 ниже её верха */
.rynki__legenda-ryba .chipy li { font-size: calc(15 * var(--u)); padding: calc(9.5 * var(--u) - 1px) calc(16 * var(--u) - 1px); }

@media (width >= 768px) {
  .rynki { padding: calc(88 * var(--u)) var(--pole) calc(88 * var(--u)); }
  .rynki__shapka { display: flex; justify-content: space-between; align-items: flex-end; padding: calc(32 * var(--u)) 0 calc(40 * var(--u)); }
  .rynki__shapka .zagolovok-bloka { line-height: calc(52 * var(--u)); }
  .rynki__podpis { width: calc(300 * var(--u)); margin: 0 0 calc(4 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(25.5 * var(--u)); }
  .rynki--ryba .rynki__podpis { width: auto; font-size: calc(16 * var(--u)); }
  .rynki__karta { margin-top: 0; border-radius: calc(20 * var(--u)); }
  .rynki__karta > .karta { width: calc(882 * var(--u)); margin: 0 0 calc(-17 * var(--u)) calc(-83 * var(--u)); }
  .rynki__spiski { margin-top: calc(36 * var(--u)); gap: calc(36 * var(--u)); }
  .rynki__okno { height: calc(276 * var(--u)); border-radius: calc(20 * var(--u)); }
  .rynki__okno .karta--ryba { left: calc(-37 * var(--u)); width: calc(739 * var(--u)); }
  .rynki__legenda-ryba { margin-top: calc(32 * var(--u)); gap: calc(40 * var(--u)); }
}

@media (width >= 1200px) {
  .rynki { padding: calc(120 * var(--u)) var(--pole) calc(120 * var(--u)); }
  .rynki--ryba { padding: calc(80 * var(--u)) var(--pole) calc(64 * var(--u)); }
  .rynki__shapka { padding: calc(40 * var(--u)) 0 calc(64 * var(--u)); }
  .rynki--ryba .rynki__shapka { padding: calc(24 * var(--u)) 0 calc(32 * var(--u)); }
  .rynki__shapka .zagolovok-bloka { line-height: calc(80 * var(--u)); }
  .rynki__podpis { width: calc(417 * var(--u)); font-size: calc(19 * var(--u)); line-height: calc(28.5 * var(--u)); }
  .rynki--ryba .rynki__podpis { width: auto; font-size: calc(19 * var(--u)); }
  .rynki__karta > .karta { width: calc(1320 * var(--u)); margin: 0; }
  .rynki__spiski { grid-template-columns: calc(724 * var(--u)) 1fr; gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); }
  .rynki__okno { height: calc(492 * var(--u)); }
  .rynki__okno .karta--ryba { left: 0; width: calc(1320 * var(--u)); }
  .rynki__legenda-ryba { position: absolute; left: calc(1090 * var(--u)); top: calc(60 * var(--u)); flex-direction: column; gap: calc(39 * var(--u)); margin: 0; }
  .rynki__legenda-ryba .rynki__legenda { font-size: calc(15 * var(--u)); }
  .rynki__legenda-ryba .chipy li { font-size: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(15 * var(--u)); }
}

/* слои SVG-карт */
.karta { overflow: visible; }
.karta__susha path, .karta .karta__susha { fill: var(--c-karta-susha); }
.karta > .karta__susha { stroke: var(--c-poverhnost); stroke-width: 0.6; }
.karta__belgiya { fill: #1f2410; }
.karta__strana { stroke: var(--c-poverhnost); stroke-width: 0.8; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: filter var(--perehod) ease, transform var(--perehod) ease, opacity var(--perehod) ease; }
.karta__strana--import { fill: var(--c-karta-import); }
.karta__strana--eksport { fill: var(--c-karta-eksport); }
.karta__duga { fill: none; stroke-width: 1.6; stroke-dasharray: 3.8 5.1; }
.karta__duga--import { stroke: var(--c-karta-import-liniya); }
.karta__duga--eksport { stroke: var(--c-tekst-zelenyy); }
.karta__tochka { stroke: var(--c-poverhnost); stroke-width: 1.9; cursor: pointer; }
.karta__tochka--import { fill: var(--c-karta-import-tochka); }
.karta__tochka--eksport { fill: var(--c-karta-eksport-tochka); }
.karta__uzel-svechenie { fill: var(--c-akcent); opacity: 0.75; }
.karta__uzel { fill: #1f2410; stroke: var(--c-poverhnost); stroke-width: 2.5; }
.karta--ryba .karta__duga { stroke-width: 2.2; stroke-dasharray: 6.8 8.8; }
.karta--ryba .karta__duga--import { stroke: var(--c-ryba-akcent); }
.karta--ryba .karta__duga--eksport { stroke: var(--c-ryba-tekst); }
.karta--ryba .kr__susha path { fill: var(--c-karta-susha); }
.kr__podpis { font: 400 11px var(--f-osnova); letter-spacing: 0.1em; fill: var(--c-ryba-tekst); opacity: 0.45; }
.kr__podpis--glavnaya { font-weight: 600; font-size: 13px; letter-spacing: 0.06em; fill: var(--c-ryba-akcent); opacity: 1; }
@media (width < 1200px) { .kr__podpis { font-size: 18px; } .kr__podpis--glavnaya { font-size: 22px; } }
@media (width < 768px) { .kr__podpis:not(.kr__podpis--glavnaya) { display: none; } .kr__podpis--glavnaya { font-size: 28px; } .kr__podpis--tashkent { transform: translate(-150px, -62px); } }

/* наведение на страну: временное, линия сплошная и неподвижная */
.karta [data-strana].is-aktiv.karta__strana { filter: brightness(1.12) saturate(1.15); transform: scale(1.06); }
.karta .karta__duga.is-aktiv { stroke-dasharray: none; animation: none !important; stroke-width: 2.2; }
.karta .karta__tochka.is-aktiv { stroke-width: 3; }
.karta-podskazka {
  position: absolute; z-index: 3; pointer-events: none; /* место ставит скрипт: целиком в кадре карты (сайт-ос/370) */
  padding: 6px 12px; border-radius: 8px; background: var(--c-tekst); color: #fff;
  font-size: 13px; line-height: 1.3; white-space: nowrap;
}
.karta-podskazka span { opacity: 0.7; }

/* ================= ЦЕННОСТИ ================= */
.cennosti { padding: calc(40 * var(--u)) calc(16 * var(--u)); background: var(--c-fon); }
.cennosti__panel { position: relative; overflow: hidden; padding: calc(32 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); border-radius: var(--r-kartochka); background: var(--c-plashka-cennostey); }
.cennosti__natyurmort { display: none; }
.cennosti__zagolovok { margin-top: calc(24 * var(--u)); font-weight: 300; font-size: calc(52 * var(--u)); line-height: calc(57 * var(--u)); letter-spacing: calc(-2.8 * var(--u)); color: var(--c-zagolovok, var(--c-tekst)); }
.cennosti__podzagolovok { display: none; }
.cennosti__kolonka { display: flex; gap: calc(16 * var(--u)); margin: calc(24 * var(--u)) calc(-20 * var(--u)) 0; padding: 0 calc(20 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: calc(20 * var(--u)); }
.cennosti__kolonka::-webkit-scrollbar { display: none; }
.cennost {
  position: relative; flex: 0 0 calc(290 * var(--u)); scroll-snap-align: start;
  display: flex; flex-direction: column; padding: calc(16 * var(--u) - 1px); min-height: calc(351 * var(--u));
  border-radius: var(--r-kartochka-s-foto); background: var(--c-poverhnost-kartochki);
  border: 1px solid transparent;
  background-image: linear-gradient(var(--c-poverhnost-kartochki), var(--c-poverhnost-kartochki)), linear-gradient(103deg, rgb(34 22 27 / 0.28) 0%, rgb(34 22 27 / 0) 35%, rgb(34 22 27 / 0) 65%, rgb(34 22 27 / 0.28) 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.cennost__foto { order: -1; height: calc(194 * var(--u)); border-radius: var(--r-foto-v-kartochke); }
.cennost__zagolovok { margin-top: calc(24 * var(--u)); font-weight: 500; font-size: calc(20 * var(--u)); line-height: calc(26.25 * var(--u)); letter-spacing: calc(-0.42 * var(--u)); text-transform: uppercase; color: var(--c-zagolovok, var(--c-tekst)); }
.cennost__tekst { margin-top: calc(22 * var(--u)); max-width: calc(200 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--c-tekst-priglushennyy); }
.cennost__nomer { position: absolute; left: calc(24 * var(--u) - 1px); top: calc(24 * var(--u) - 1px); display: grid; place-items: center; width: calc(45 * var(--u)); height: calc(45 * var(--u)); border-radius: var(--r-knopka); background: var(--c-akcent); color: #fff; font-weight: 700; font-size: calc(20 * var(--u)); }
.cennosti__upravlenie { margin: calc(44 * var(--u)) 0 0; }

@media (width >= 768px) {
  .cennosti { padding: calc(56 * var(--u)) var(--pole); }
  .cennosti__panel { padding: calc(48 * var(--u)) calc(36 * var(--u)); }
  .cennosti__kolonka { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); margin: calc(24 * var(--u)) 0 0; padding: 0; overflow: visible; }
  .cennost { min-height: calc(328 * var(--u)); }
  .cennost__foto { height: calc(171 * var(--u)); }
  .cennost__zagolovok { margin-top: calc(24 * var(--u)); font-size: calc(24 * var(--u)); }
  .cennost__tekst { margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); }
  .cennosti__upravlenie { display: none; }
  /* рыба, планшет: натюрморт справа от заголовка (кадр «Рыба — планшет 768», фото 380×253 в точке 344,106) */
  .tema-ryba .cennosti__natyurmort { display: block; position: absolute; left: calc(344 * var(--u)); top: calc(106 * var(--u)); width: calc(380 * var(--u)); pointer-events: none; }
  .tema-ryba .cennosti__natyurmort img { width: 100%; height: auto; }
  .tema-ryba .cennosti__kolonka { margin-top: calc(193 * var(--u)); }
}

@media (width >= 1200px) {
  .cennosti { padding: calc(60 * var(--u)) var(--pole); }
  .cennosti__panel { display: flex; gap: calc(70 * var(--u)); height: calc(720 * var(--u)); padding: calc(90 * var(--u)) calc(68 * var(--u)) calc(90 * var(--u)) calc(56 * var(--u)); }
  .cennosti__natyurmort { display: block; position: absolute; left: calc(-14 * var(--u)); top: calc(146.6 * var(--u)); width: calc(1030 * var(--u)); pointer-events: none; }
  .tema-ryba .cennosti__natyurmort { left: calc(-106 * var(--u)); top: calc(227.3 * var(--u)); width: calc(811 * var(--u)); }
  .cennosti__natyurmort img { width: 100%; height: auto; }
  .cennosti__tezis { position: relative; z-index: 1; flex: 0 0 calc(558 * var(--u)); }
  .cennosti__rubrika { display: none; }
  .cennosti__zagolovok, .cennosti__podzagolovok {
    display: block; margin: 0; font-weight: 500; text-transform: uppercase; color: transparent;
    background: linear-gradient(28.44deg, var(--c-blik) 0%, var(--c-zagolovok, var(--c-tekst)) 33%, var(--c-zagolovok, var(--c-tekst)) 100%);
    -webkit-background-clip: text; background-clip: text; width: max-content;
  }
  .cennosti__zagolovok { font-size: calc(40 * var(--u)); line-height: calc(44.8 * var(--u)); letter-spacing: calc(-0.8 * var(--u)); }
  .cennosti__podzagolovok { margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(21.6 * var(--u)); letter-spacing: calc(3.24 * var(--u)); }
  .cennosti__kolonka { position: relative; z-index: 1; display: block; flex: 0 0 calc(657.8 * var(--u)); margin: 0; padding-left: calc(20 * var(--u)); }
  .cennost {
    display: block; height: calc(200 * var(--u)); min-height: 0; margin-bottom: calc(-64 * var(--u));
    padding: calc(41 * var(--u)) calc(40 * var(--u)) calc(31 * var(--u)) calc(51 * var(--u));
    transform: translateY(calc(var(--naezd, 0) * (var(--i) + 1) * 60 * var(--u)));
  }
  .cennost:last-child { margin-bottom: 0; }
  .cennost__foto { position: absolute; left: calc(368.8 * var(--u)); top: calc(15 * var(--u)); width: calc(252 * var(--u)); height: calc(168 * var(--u)); }
  .cennost__zagolovok { margin: 0; font-size: calc(21 * var(--u)); }
  .cennost__tekst { margin-top: calc(7 * var(--u)); max-width: none; white-space: nowrap; }
  .cennost:first-child .cennost__tekst { max-width: calc(200 * var(--u)); white-space: normal; }
  .cennost__nomer { left: calc(-21 * var(--u)); top: calc(30 * var(--u)); }
}

/* ================= КОНТАКТЫ И ФОРМА ================= */
.kontakty { padding: calc(64 * var(--u)) calc(20 * var(--u)) calc(48 * var(--u)); background: var(--c-poverhnost); color: var(--c-tekst); text-align: center; }
.kontakty__zagolovok { font-weight: 600; font-size: calc(34 * var(--u)); line-height: calc(45.6 * var(--u)); letter-spacing: calc(-1.81 * var(--u)); color: var(--c-zagolovok, var(--c-tekst)); }
.kontakty__kolonki { display: flex; flex-direction: column; margin-top: calc(32 * var(--u)); }
.kontakty__telefon { display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); font-weight: 600; }
.kontakty__telefon span { font-size: calc(19.2 * var(--u)); line-height: calc(21.6 * var(--u)); letter-spacing: calc(-0.38 * var(--u)); color: var(--c-akcent-v-tekste); }
.kontakty__telefon a { font-size: calc(36 * var(--u)); line-height: calc(55.8 * var(--u)); letter-spacing: calc(-1.8 * var(--u)); white-space: nowrap; }
.kontakty__logo { width: calc(136 * var(--u)); height: auto; margin: calc(24 * var(--u)) auto 0; }
.kontakty__spisok { display: flex; flex-direction: column; gap: calc(24.6 * var(--u)); margin: calc(36 * var(--u)) 0 0; font-weight: 500; }
.kontakty__spisok dt { font-size: calc(13.2 * var(--u)); line-height: calc(16.8 * var(--u)); letter-spacing: calc(-0.36 * var(--u)); }
.kontakty__spisok dd { margin: calc(12 * var(--u)) 0 0; font-size: calc(19.2 * var(--u)); line-height: calc(21.6 * var(--u)); }
.kontakty__spisok a:hover, .kontakty__telefon a:hover { color: var(--c-akcent); }
.kontakty__forma { margin-top: calc(36 * var(--u)); text-align: left; }
@media (width < 768px) {
  .kontakty__forma { padding: calc(8 * var(--u)) 0 calc(29 * var(--u)); }
  /* высоты строк — как округлённые рамки текста в кадре 390 (17 / 22), иначе контакты короче на 2–4 */
  .kontakty__telefon span, .kontakty__spisok dd { line-height: calc(22 * var(--u)); }
  .kontakty__spisok dt { line-height: calc(17 * var(--u)); }
  .kontakty__spisok { gap: calc(24 * var(--u)); }
} /* кадр 390: рамка формы 438 — поля с 8, под кнопкой 29 */

.forma-blok { border-radius: calc(24 * var(--u)); background: var(--c-poverhnost); }
.forma__polya { display: flex; flex-direction: column; gap: calc(21.6 * var(--u)); }
.pole { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.pole__podpis { font-weight: 500; font-size: calc(12 * var(--u)); line-height: calc(14.4 * var(--u)); }
.pole__vvod {
  height: calc(48 * var(--u)); padding: 0; border: 0; border-bottom: 1px solid var(--c-liniya); border-radius: 0; background: transparent;
  font: 400 calc(16 * var(--u)) var(--f-osnova); color: var(--c-tekst); outline: none; transition: border-color var(--perehod) ease;
}
.pole__vvod:focus { border-bottom-color: var(--c-akcent); }
.pole__oshibka { font-weight: 500; font-size: calc(12 * var(--u)); color: var(--c-oshibka); }
.pole__oshibka:empty { display: none; }
.pole.is-oshibka .pole__vvod { border-bottom-color: var(--c-oshibka); }
.forma__lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.forma__niz { display: flex; flex-direction: column; gap: calc(48 * var(--u)); margin-top: calc(26 * var(--u)); } /* поля в кадрах 67, у нас 66 — добор здесь */
.soglasie { display: grid; grid-template-columns: calc(24 * var(--u)) 1fr; gap: calc(4 * var(--u)) calc(12 * var(--u)); align-items: center; }
.soglasie label { font-weight: 500; font-size: calc(13.2 * var(--u)); line-height: calc(18.48 * var(--u)); }
.soglasie label a { text-decoration: underline; }
.soglasie .pole__oshibka { grid-column: 1 / -1; margin-top: calc(40 * var(--u)); }
.soglasie__galochka {
  appearance: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: 0; border: 1px solid var(--c-galochka-ramka); border-radius: var(--r-melkiy); background: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.soglasie__galochka:checked { background: var(--c-akcent); border-color: var(--c-akcent); }
.soglasie__galochka:checked::after { content: ""; width: 40%; height: 22%; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -15%; }
.soglasie.is-oshibka .soglasie__galochka { border-color: var(--c-oshibka); }
.forma__knopka {
  width: 100%; height: calc(48 * var(--u)); border-radius: 999px; background: var(--c-akcent); color: #fff;
  font-weight: 500; font-size: calc(18 * var(--u)); transition: background-color var(--perehod) ease;
}
.forma__knopka:hover { background: var(--c-akcent-navedenie); }
.forma__knopka:disabled { opacity: 0.6; cursor: progress; }
.forma__status { margin-top: calc(-36 * var(--u)); font-size: calc(13 * var(--u)); color: var(--c-tekst-priglushennyy); }
.forma__status:empty { display: none; }
.forma[data-sostoyanie="oshibka"] .forma__status { color: var(--c-oshibka); }
.forma-spasibo { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(438 * var(--u)); text-align: center; color: var(--c-tekst); }
.forma-spasibo[hidden] { display: none; }
.forma-spasibo__znak { display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: var(--c-akcent); color: #fff; }
.forma-spasibo__znak svg { width: calc(20 * var(--u)); }
.forma-spasibo__zagolovok { margin-top: calc(12 * var(--u)); font-weight: 600; font-size: calc(28 * var(--u)); line-height: 1.35; }
.forma-spasibo__tekst { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.5; }
.forma-spasibo__eshche { margin-top: calc(12 * var(--u)); font-weight: 500; font-size: calc(14 * var(--u)); text-decoration: underline; }

@media (width >= 768px) {
  .kontakty { padding: calc(88 * var(--u)) var(--pole) calc(64 * var(--u)); text-align: left; }
  .kontakty__zagolovok { font-size: calc(44 * var(--u)); }
  .kontakty__kolonki { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(32 * var(--u)); margin-top: calc(48 * var(--u)); }
  .kontakty__logo { width: calc(226 * var(--u)); margin: calc(32 * var(--u)) 0 0; }
  .kontakty__spisok { margin: 0; gap: calc(29 * var(--u)); }
  .kontakty__forma { grid-column: 1 / -1; margin-top: calc(48 * var(--u)); }
  .forma__knopka { height: calc(48 * var(--u)); font-size: calc(20 * var(--u)); }
}

@media (width >= 1200px) {
  .kontakty { padding: calc(143.2 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)); }
  .kontakty__zagolovok { font-size: calc(50.4 * var(--u)); }
  .kontakty__kolonki { grid-template-columns: calc(408 * var(--u)) calc(408 * var(--u)) calc(480 * var(--u)); gap: calc(24 * var(--u)); margin-top: calc(81.8 * var(--u)); }
  .kontakty__telefony { padding-top: calc(35 * var(--u)); display: flex; flex-direction: column; gap: calc(126 * var(--u)); }
  .kontakty__logo { margin: 0; }
  .kontakty__spisok { padding-top: calc(35 * var(--u)); gap: calc(61.5 * var(--u)); }
  .kontakty__spisok div:last-child dd { width: calc(260 * var(--u)); }
  .kontakty__forma { grid-column: auto; margin: 0; }
  .forma-blok { padding: calc(28.8 * var(--u)); }
  .forma__knopka { width: calc(180 * var(--u)); font-size: calc(13.2 * var(--u)); }
  .forma-spasibo { min-height: calc(388 * var(--u)); }
}

/* ================= ПОДВАЛ ================= */
.podval { padding: calc(40 * var(--u)) calc(20 * var(--u)) calc(31 * var(--u)); background: var(--c-poverhnost); color: var(--c-tekst); }
.podval__ryad { display: flex; flex-direction: column; align-items: center; padding-top: calc(23 * var(--u)); border-top: calc(1.2 * var(--u)) solid var(--c-liniya); text-align: center; font-size: calc(13 * var(--u)); line-height: calc(21.6 * var(--u)); letter-spacing: calc(-0.43 * var(--u)); }
.podval__rekvizity { display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-style: normal; }
.podval__god { order: 2; margin-top: calc(20 * var(--u)); }
.podval__ssylki { order: 3; margin-top: calc(8 * var(--u)); text-decoration: underline; }
.podval__ssylki button { font-size: inherit; letter-spacing: inherit; text-decoration: underline; }
.podval__studiya { order: 4; display: inline-flex; align-items: baseline; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); letter-spacing: 0; }
.podval__studiya b { font: 600 calc(19 * var(--u))/1 var(--f-studiya); color: #000; letter-spacing: 0; }
.podval__studiya i { font-style: normal; color: #96e904; font-size: 1.9em; line-height: 0; }
.podval__studiya:hover b { color: var(--c-akcent); }

@media (width >= 768px) {
  .podval { padding: calc(40 * var(--u)) var(--pole) calc(22 * var(--u)); }
  .podval__ryad { display: grid; grid-template-columns: auto 1fr auto; align-items: end; text-align: left; padding-top: calc(24 * var(--u)); font-size: calc(14 * var(--u)); }
  .podval__rekvizity { grid-column: 1 / -1; gap: calc(3.6 * var(--u)); margin-bottom: calc(65 * var(--u)); }
  .podval__studiya { order: 0; margin: 0; }
  .podval__ssylki { order: 0; margin: 0; justify-self: center; }
  .podval__god { order: 0; margin: 0; }
  .podval__studiya b { font-size: calc(21 * var(--u)); }
}

@media (width >= 1200px) {
  .podval { padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)); }
  .podval__ryad { align-items: last baseline; grid-template-columns: 1fr auto auto auto; column-gap: 0; padding: calc(28.6 * var(--u)) calc(62 * var(--u)) 0 calc(36 * var(--u)); font-size: calc(14.4 * var(--u)); }
  .podval__rekvizity { grid-column: 1; margin: 0; }
  .podval__studiya { margin-right: calc(24 * var(--u)); }
  .podval__ssylki { margin-right: calc(32 * var(--u)); }
}

/* ================= COOKIE ================= */
.cookie {
  position: fixed; z-index: 60; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(20 * var(--u));
  padding: calc(21 * var(--u)); border: 1px solid #e4e4de; border-radius: calc(16 * var(--u)); background: #fff; color: #1f2410;
  box-shadow: 0 calc(12 * var(--u)) calc(40 * var(--u)) rgb(0 0 0 / 0.08);
}
.cookie__zagolovok { font-weight: 600; font-size: calc(20 * var(--u)); line-height: calc(27 * var(--u)); }
.cookie__tekst { margin-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; }
.cookie__knopki { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
.cookie .knopka { padding: 0 calc(12 * var(--u)); --c-shapka-tekst: #1f2410; --c-akcent: #6c780c; --c-akcent-navedenie: #55600a; }
.cookie .knopka--kontur { border-width: 1px; }
.cookie__nastroyki { display: inline-block; margin-top: calc(16 * var(--u)); font-weight: 500; font-size: calc(15 * var(--u)); }
.cookie__nastroyki:hover { text-decoration: underline; }
@media (width >= 768px) {
  .cookie { right: auto; left: 24px; bottom: 24px; width: calc(440 * var(--u)); padding: calc(29 * var(--u)); border-radius: calc(20 * var(--u)); }
}

/* ================= ПОЛИТИКА ================= */
.stranica-sluzhebnaya main { padding-top: var(--shapka-vysota); }
.politika { padding: calc(40 * var(--u)) var(--pole) calc(48 * var(--u)); color: #1f2410; }
.politika__zagolovok { font-weight: 300; font-size: calc(40 * var(--u)); line-height: 1.1; }
.politika__data { margin-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); color: var(--c-tekst-priglushennyy); }
.politika__telo section { margin-top: calc(32 * var(--u)); scroll-margin-top: calc(var(--shapka-vysota) + 20px); }
.politika__telo h2 { font-weight: 600; font-size: calc(18 * var(--u)); line-height: 1.5; }
.politika__telo p { margin-top: calc(8 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; }
.politika__telo a { text-decoration: underline; }
.politika__oglavlenie { display: none; }
@media (width >= 768px) {
  .politika__zagolovok { font-size: calc(52 * var(--u)); }
  .politika__telo h2 { font-size: calc(20 * var(--u)); }
  .politika__telo p { font-size: calc(16 * var(--u)); }
}
@media (width >= 1200px) {
  .politika { display: grid; grid-template-columns: calc(760 * var(--u)) 1fr; column-gap: calc(197 * var(--u)); padding: calc(80 * var(--u)) var(--pole) calc(120 * var(--u)); }
  .politika__zagolovok, .politika__data { grid-column: 1 / -1; }
  .politika__zagolovok { font-size: calc(80 * var(--u)); }
  .politika__data { margin-top: calc(32 * var(--u)); font-size: calc(16 * var(--u)); }
  .politika__telo h2 { font-size: calc(24 * var(--u)); }
  .politika__telo p { font-size: calc(18 * var(--u)); }
  .politika__oglavlenie {
    display: block; position: sticky; top: calc(var(--shapka-vysota) + 40 * var(--u)); align-self: start; margin-top: calc(98 * var(--u));
    padding: calc(32 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--c-poverhnost);
  }
  .politika__metka { font-weight: 600; font-size: calc(14 * var(--u)); }
  .politika__oglavlenie ol { margin-top: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); font-size: calc(17 * var(--u)); }
  .politika__oglavlenie a:hover { color: var(--c-akcent); }
  .politika__metka--niz { margin-top: calc(40 * var(--u)); }
  .politika__pochta { display: inline-block; margin-top: calc(12 * var(--u)); font-size: calc(17 * var(--u)); text-decoration: underline; }
}

/* ================= 404 ================= */
.oshibka-404 { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(56 * var(--u)); text-align: center; color: #1f2410; background: var(--c-poverhnost); }
.oshibka-404__kod { font: 400 calc(200 * var(--u))/0.9 var(--f-uzkiy); }
.oshibka-404__zagolovok { margin-top: calc(4 * var(--u)); max-width: calc(250 * var(--u)); font-weight: 300; font-size: calc(40 * var(--u)); line-height: 1.1; }
.oshibka-404__opisanie { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.4; }
.oshibka-404__shirokiy { display: none; }
.oshibka-404__knopka { width: 100%; min-height: calc(56 * var(--u)); margin-top: calc(28 * var(--u)); }
.oshibka-404__foto { display: none; }
@media (width >= 768px) {
  .oshibka-404 { padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(64 * var(--u)); }
  .oshibka-404__kod { font-size: calc(260 * var(--u)); }
  .oshibka-404__zagolovok { max-width: calc(360 * var(--u)); font-size: calc(52 * var(--u)); }
  .oshibka-404__knopka { min-height: calc(74 * var(--u)); }
}
@media (width >= 1200px) {
  .stranica-sluzhebnaya .oshibka-404 { margin-top: calc(-1 * var(--shapka-vysota)); }
  .oshibka-404 { display: block; height: calc(970 * var(--u)); padding: 0; text-align: left; }
  .oshibka-404__tekst { position: absolute; left: calc(40 * var(--u)); top: calc(170 * var(--u)); z-index: 1; }
  .oshibka-404__kod { font-size: calc(320 * var(--u)); line-height: calc(288 * var(--u)); }
  .oshibka-404__zagolovok { max-width: none; margin: calc(10 * var(--u)) 0 0 calc(4 * var(--u)); font-size: calc(52 * var(--u)); }
  .oshibka-404__opisanie { margin: calc(20 * var(--u)) 0 0 calc(6 * var(--u)); font-size: calc(19 * var(--u)); }
  .oshibka-404__shirokiy { display: inline; }
  .oshibka-404__uzkiy { display: none; }
  .oshibka-404__knopka { width: calc(241 * var(--u)); min-height: calc(74 * var(--u)); margin: calc(36 * var(--u)) 0 0 calc(6 * var(--u)); }
  .oshibka-404__foto { display: block; position: absolute; left: calc(581 * var(--u)); top: calc(95 * var(--u)); width: calc(890 * var(--u)); height: calc(795 * var(--u)); border-radius: var(--r-kartochka-s-foto); }
}

.br-uzkiy { display: inline; }
@media (width >= 1200px) { .br-uzkiy { display: none; } }
.cennost__tekst { max-width: none; }

.br-mob { display: inline; }
@media (width >= 768px) { .br-mob { display: none; } }

/* служебные страницы: подвал прижат к низу окна, без пустой полосы под ним */
.stranica-sluzhebnaya { min-height: 100dvh; display: flex; flex-direction: column; }
.stranica-sluzhebnaya main { flex: 1 0 auto; background: var(--c-poverhnost); }
.stranica-sluzhebnaya .politika { background: var(--c-fon); }
.stranica-sluzhebnaya main:has(.politika) { background: var(--c-fon); }

/* ===== Сверка с кадрами «Главная — планшет 768» / «Рыба — планшет 768» (10.10) ===== */
@media (768px <= width < 1200px) {
  .stranica-glavnaya .produkty__spisok { margin-top: calc(13 * var(--u)); }            /* карточки с 1387 */
  .produkty--ryba .produkty__spisok { margin-top: calc(53 * var(--u)); }               /* карточка рыбы с 1403 */
  .prizyv__knopka { font-size: calc(30 * var(--u)); }                                  /* «Fish»/«Fruit» 30 */
  .stranica-glavnaya .rynki__shapka { padding-bottom: calc(52 * var(--u)); }           /* рамка заголовка 116 при тексте 104 — карта на 40 ниже рамки */
  .rynki__spiski { gap: calc(32 * var(--u)); }
  .cennosti__panel { padding-bottom: calc(44 * var(--u)); }
  .cennosti__zagolovok { margin-top: calc(32 * var(--u)); line-height: calc(52 * var(--u)); }
  .tema-ryba .cennosti__kolonka { margin-top: calc(197 * var(--u)); }
  /* рыба: карточка 390 — описание с полями 8, заголовок 64/70,4, фраза 19 */
  .kartochka--ryba .kartochka__opisanie { padding-top: calc(8 * var(--u)); margin-bottom: calc(-8 * var(--u)); }
  .kartochka--ryba .kartochka__nazvanie { line-height: calc(70.4 * var(--u)); }
  .kartochka--ryba .kartochka__fraza { font-size: calc(19 * var(--u)); }
  .rynki--ryba .rynki__shapka .zagolovok-bloka { padding-bottom: calc(12 * var(--u)); }
  .rynki--ryba .rynki__podpis { margin-bottom: 0; }
  .stranica-glavnaya .kartochka__opisanie { padding-top: calc(8 * var(--u)); margin-bottom: calc(-6 * var(--u)); } /* текст карточки с +32 от верха, карточка 521 */
  .cennost__tekst { margin-top: calc(22 * var(--u)); }
  .kontakty__forma { padding-bottom: calc(29 * var(--u)); }
  .podval__rekvizity { margin-bottom: calc(74 * var(--u)); }
}

/* ===== Сверка с кадрами «Главная — веб 1440» / «Рыба — веб 1440» (10.10) ===== */
@media (width >= 1200px) {
  .stranica-glavnaya .produkty__spisok { margin-top: calc(69 * var(--u)); }      /* карточки с 1221 (кадр 1465) */
  .prizyv__tekst { translate: 0 calc(5 * var(--u)); }                             /* заголовок плашки на 159 от её верха */
  .rynki__shapka .zagolovok-bloka { padding-bottom: calc(12 * var(--u)); } /* рамка заголовка 172, подпись по её низу */
  .rynki--ryba .rynki__podpis { margin-bottom: 0; }
  .tema-ryba .cennosti__kolonka { margin-top: 0; } /* отступ 193 планшета протекал на веб: карточки рыбы стояли на 189 ниже кадра */
  .produkty--ryba .produkty__spisok { margin-top: calc(69 * var(--u)); }
  .kartochka--ryba .kartochka__opisanie { padding-top: calc(8 * var(--u)); margin-bottom: calc(-8 * var(--u)); }
  .stranica-ryba .hero__zagolovok { margin-bottom: calc(-6 * var(--u)); }            /* подзаголовок рыбы с 419 */
  .rynki__legenda-ryba .rynki__legenda { line-height: calc(19.3 * var(--u)); }
  .rynki__legenda-ryba .chipy { margin-top: calc(13 * var(--u)); }
  .rynki__legenda-ryba .chipy li { padding-block: calc(6.75 * var(--u)); }
  .cennost__tekst { font-size: calc(16 * var(--u)); }
  .forma__niz { margin-top: calc(24 * var(--u)); }
  .podval { padding-bottom: calc(12.5 * var(--u)); }
  .podval__ryad { padding-right: calc(38 * var(--u)); }                          /* © кончается на 1379 */
  .podval__studiya, .podval__ssylki, .podval__god { translate: 0 calc(-7 * var(--u)); } /* нижняя строка на 7 выше последней строки реквизитов */
}

/* ===== 404 по кадрам «404 — мобильная 390 / планшет 768 / веб 1440» (10.10) ===== */
@media (width < 768px) { .oshibka-404 { padding-bottom: calc(30 * var(--u)); } }
@media (width < 1200px) { .oshibka-404__tekst { width: 100%; display: flex; flex-direction: column; align-items: center; } } /* кнопка во всю колонку: 350 / 704 */
@media (768px <= width < 1200px) {
  .oshibka-404 { padding: calc(50 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u)); }
  .oshibka-404__kod { font-size: calc(280 * var(--u)); }
  .oshibka-404__zagolovok { max-width: none; margin-top: calc(8 * var(--u)); font-size: calc(56 * var(--u)); }
  .oshibka-404__opisanie { margin-top: calc(20 * var(--u)); font-size: calc(20 * var(--u)); }
  .oshibka-404__knopka { margin-top: calc(36 * var(--u)); font-size: calc(22 * var(--u)); }
}
@media (width >= 1200px) {
  .oshibka-404 { height: calc(896 * var(--u)); }                          /* подвал кадра на 881 (1465 → 896) */
  .oshibka-404__zagolovok { line-height: calc(71 * var(--u)); }           /* рамка заголовка 71, текст под ним через 19 */
  .oshibka-404__opisanie { line-height: calc(26 * var(--u)); }
}

/* ===== Политика по кадрам «Политика — 390 / 768 / веб 1440» (10.10): одни размеры на 390 и 768 ===== */
.politika__zagolovok { font-size: calc(44 * var(--u)); }
.politika__data { margin-top: calc(28 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.5; }
.politika__telo section { margin-top: calc(28 * var(--u)); }
.politika__telo h2 { font-size: calc(20 * var(--u)); }
.politika__telo p { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); }
@media (width >= 1200px) {
  .politika__zagolovok { font-size: calc(80 * var(--u)); }
  .politika__data { margin-top: calc(36 * var(--u)); font-size: calc(16 * var(--u)); }
  .politika__telo section { margin-top: calc(36 * var(--u)); }
  .politika__telo h2 { font-size: calc(24 * var(--u)); }
  .politika__telo p { font-size: calc(18 * var(--u)); }
  .politika { column-gap: calc(165 * var(--u)); }                                  /* оглавление с x 968, шириной 413 */
  .politika__oglavlenie { margin-top: calc(102 * var(--u)); }
  .politika__metka { line-height: calc(19 * var(--u)); }
  .politika__oglavlenie ol { margin-top: calc(11 * var(--u)); gap: calc(12 * var(--u)); line-height: calc(23 * var(--u)); }
  .politika__metka--niz { margin-top: calc(36 * var(--u)); }
  .politika__pochta { margin-top: calc(11 * var(--u)); line-height: calc(23 * var(--u)); }
}
@media (width < 1200px) { .politika { padding-bottom: calc(64 * var(--u)); } }   /* подвал 390/768 на 16 ниже */

/* ===== Окно меню по кадрам «меню открыто, 390 / 768» (10.10) ===== */
.menyu-okno__shapka { flex-shrink: 0; }                 /* шапка окна сжималась на 3–10 px, когда содержимое длиннее окна */
.menyu-okno__niz { padding-top: calc(40 * var(--u)); }  /* в кадре 768 от чипов до телефона 52 — 60 выталкивало низ за окно */
.menyu-okno__metka { line-height: calc(16 * var(--u)); }
.tema-ryba .menyu-okno__dop { margin-top: calc(69 * var(--u)); }  /* схема рыбы на 69 под пунктами */
@media (768px <= width < 1200px) {
  .menyu-okno__metka { line-height: calc(19 * var(--u)); }
  .tema-ryba .menyu-okno__dop { margin-top: calc(54 * var(--u)); }
}

/* Линия подвала: в кадрах всех ширин она видна как 1 px цвета #A7A9A2 на фоне #F9F9F9
   (обводка 1,2 px срезана рамкой «Подвал» — видна её доля ≈ 38 %). Сверено по пикселям снимков кадров. */
.podval__ryad { border-top: 1px solid rgb(31 36 16 / 0.38); }

/* ===== Круг 1 Проверяющего (10.10) ===== */
/* прозрачность слоёв текста в кадрах: подпись 404 — 70 %, текст политики — 80 %, дата — 60 %, текст cookie — 80 % */
.oshibka-404__opisanie { opacity: 0.7; }
.politika__telo p { opacity: 0.8; }
.politika__data { color: #1f2410; opacity: 0.6; }
.politika__telo a { text-decoration: none; }                 /* почта в тексте — обычным текстом, как в кадре */
.politika__pochta { text-decoration: underline; }
.cookie__tekst { opacity: 0.8; }
/* «Settings»: в кадрах тонкое светлое подчёркивание (крупный кадр ×4, круг 9; круг 8 по мелкой вырезке ошибочно его снял) */
.cookie__nastroyki { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(31 36 16 / 0.25); text-underline-offset: 0.12em; }
.cookie__nastroyki:hover { text-decoration-color: currentColor; }
@media (width < 768px) { .cookie { padding: calc(20 * var(--u)); } }
@media (width >= 768px) { .cookie { padding: calc(28 * var(--u)); } }  /* текст 382 в ширину, переносы как в кадре */
/* подвал 390: подпись студии на 15 под ссылками */
@media (width < 768px) { .podval__studiya { margin-top: calc(15 * var(--u)); } .podval { padding-bottom: calc(20 * var(--u)); } }
@media (768px <= width < 1200px) {
  /* карта Северной Европы на плашке «Fish»: кадр 695×323 с −14/303, а не 544 (это ширина одной суши внутри) */
  .prizyv__karta { left: calc(-15 * var(--u)); top: calc(302 * var(--u)); width: calc(695 * var(--u)); }
  /* подвал: ссылки ровно по центру строки */
  .podval__ryad { grid-template-columns: 1fr auto 1fr; }
  .podval__god { justify-self: end; }
}
@media (width < 1200px) {
  .kartochka--ryba .kartochka__nazvanie { letter-spacing: calc(-4.32 * var(--u)); }
  .stranica-ryba .hero .knopka--kontur { border-width: 1.5px; }
}

/* ===== Круг 2 Проверяющего (10.10) ===== */
/* кнопка «назад»: дуга в левой нижней четверти (от 9 до 6 часов) — дуга «вперёд», повёрнутая на 180°,
   как в кадрах 768/390 (круг 10; зеркало круга 2 ставило её в левую верхнюю) */
.krug-knopka--nazad .krug-knopka__kolco { rotate: 90deg; }
.tema-ryba .menyu-okno__strelka { opacity: 0.7; }                     /* стрелки меню рыбы — 70 % */
.forma-spasibo { min-height: calc(401 * var(--u)); }                   /* «спасибо» на 390 одной высоты с формой */
.br-veb { display: none; }
@media (width >= 1200px) {
  .br-veb { display: inline; }
  .stranica-glavnaya .hero__podzagolovok .br-mob { display: none; }
  .politika__metka { opacity: 0.6; }
  .cennost:first-child .cennost__tekst { max-width: calc(182 * var(--u)); }
  .oshibka-404 { overflow: hidden; }                                   /* фото, как в кадре, срезано правым краем */
}
@media (768px <= width < 1200px) {
  .hero__kadr { margin-top: calc(4 * var(--u)); }                      /* подпись кадра 1037/1041, точки 1069 */
  .hero__tochki { margin-top: calc(4 * var(--u)); }
}
/* «Что мы ценим»: прежнее закрепление панели со сдвигом карточек скриптом заменено «липкой» стопкой — 05-stopka-cennostey.css (сайт-ос/370) */

/* ===== Круг 3 Проверяющего (10.10) ===== */
@media (768px <= width < 1200px) { .menyu-okno__chipy a { font-size: calc(20 * var(--u)); font-weight: 600; } }
@media (width < 768px) {
  .cennosti__kolonka { gap: calc(12 * var(--u)); }                    /* вторая карточка «Ценностей» с x 338 */
  .kartochka--ryba .kartochka__fraza { font-size: calc(19 * var(--u)); }
}
/* рыба 390: базовая линия строк заголовка 182 и 266, как в кадре (строки по 84 стояли на 6 ниже) */
@media (width < 768px) { .hero--ryba .hero__zagolovok { translate: 0 calc(-6 * var(--u)); } }
/* круг 4: рыба 768 — подзаголовок первого экрана на 448; «спасибо» формы 768 одной высоты с формой (388) */
@media (768px <= width < 1200px) {
  .hero--ryba .hero__podzagolovok { margin-top: calc(10 * var(--u)); }
  .forma-spasibo { min-height: calc(388 * var(--u)); }
}
/* круг 5: контурная кнопка первого экрана — обводка 1,5 (все кадры); введённый текст поля у верха поля, как в кадрах «Форма — ошибки» */
.hero .knopka--kontur { border-width: 1.5px; }
.pole__vvod { padding: 0 0 calc(24 * var(--u)); line-height: calc(24 * var(--u)); }

/* ===== Круг 6 Проверяющего (10.10) ===== */
@media (768px <= width < 1200px) {
  .stranica-glavnaya .produkty__spisok { padding-top: calc(24 * var(--u)); margin-top: calc(13 * var(--u)); } /* без тени вверх (сайт-ос/370) — карточки на прежнем месте: 24 + 13 = 120 − 83 */
  .shapka__svyaz { margin-left: calc(87 * var(--u)); padding-top: calc(2 * var(--u)); }  /* телефон с 305 / 24 */
  .messendzhery__knopka svg { width: calc(22 * var(--u)); }
}
@media (width < 768px) {
  .kr__podpis--glavnaya { font-size: 30.5px; }                       /* подписи карты рыбы 11 px на экране, как в кадре */
  .kr__podpis--tashkent { transform: translate(-175px, -62px); }
  .kr__podpis--antwerp { transform: translate(-8px, 0); }
}

/* ===== Круг 7 Проверяющего (10.10) ===== */
/* круг 7 ставил на 768 тень вверх (0 −40 80, 22 %) — та же серая растушёвка над заголовком, что владелец убрал на 390
   (сайт-ос/370); остаётся мягкий контур карточки 0 0 40, 8 %, без него белая карточка не видна на белом */
@media (width < 768px) {
  .produkty:not(.produkty--ryba) .produkty__spisok { gap: calc(12 * var(--u)); }   /* карточки 0 / 402 / 804 */
  .forma-spasibo { min-height: calc(505 * var(--u)); padding-top: calc(24 * var(--u)); } /* кадр «отправлено» 542: блок с полями 8/29, содержимое по центру всего кадра (галочка на 177) */
}
@media (width >= 1200px) { .forma-spasibo { min-height: calc(492.4 * var(--u)); } }  /* кадр 550 за вычетом полей 28,8 */

/* ===== Проверяющий продукта, этап «Вёрстка» (10.10) ===== */
/* Слайды 2–3 первого экрана на 768/390: в кадрах Фигмы есть только авокадо, у манго и голубики
   нет вертикальных фото — стоят горизонтальные. Их верх светлее/темнее фона блока (скачок 247 → 241)
   и в верхней полосе исходника бледные остатки букв. Верх фото растворяется в фон, как у авокадо. */
/* (сайт-ос/370: маска и место кадров на 390/768 — в 06-pravki-370.css, пункт 7) */
/* Смена состояния — переходом 0,5 с (свод, В6): у ссылок меню шапки и контактов цвет при наведении менялся мгновенно.
   Подложка шапки — 0,2 с осознанно: в критерии задания «~200 мс». */
.shapka__menyu a, .kontakty__spisok a, .kontakty__telefon a, .podval a { transition: color var(--perehod) ease; }
/* круг 11: последние мгновенные смены состояний — тоже 0,5 с (галочка согласия при отметке и ошибке,
   имя студии в подвале при наведении, подчёркивание «Settings» в cookie) */
.soglasie__galochka { transition: background-color var(--perehod) ease, border-color var(--perehod) ease, color var(--perehod) ease, box-shadow var(--perehod) ease; }
.podval__studiya b { transition: color var(--perehod) ease; }
.cookie__nastroyki { transition: text-decoration-color var(--perehod) ease, color var(--perehod) ease; }
/* Шире 1758 модуль --u упирается в 1,2 px, и фото, правый край которых в кадре за краем экрана
   (рыба: 146 + 1321 = 1467; 404: 581 + 890 = 1471), обрывались на ~1760 — справа полоса фона
   (Проверяющий продукта, этап «Вёрстка», круг 3, ширина 1920). Правый край теперь не ближе края окна. */
@media (width >= 1200px) {
  .hero--ryba .hero__foto--1440 { width: calc(max(1467 * var(--u), 100% + 2px) - 146 * var(--u)); }
  .oshibka-404__foto { width: calc(max(1471 * var(--u), 100% + 2px) - 581 * var(--u)); }
}

/* --- 04-dvizhenie.css --- */
/* Движение Agatha Sunrise — лист «Поведение и анимации» страницы Фигмы
   «Для вёрстки — согласовано» и библиотека студии os-sites/animations/.
   У каждого приёма — ветка «уменьшить движение» внизу. */

/* Появление при прокрутке — animations/reveal.md (без JS блоки видны сразу) */
.js .reveal { opacity: 0; transform: translateY(calc(40 * var(--u))); transition: opacity var(--perehod) ease, transform var(--perehod) ease; }
.js .reveal.visible { opacity: 1; transform: none; }

/* Карта рынков: в покое пунктир бежит — импорт к Бельгии, экспорт от Бельгии.
   Дуги нарисованы в направлении движения (импорт: страна → Антверпен,
   экспорт: Антверпен → страна), поэтому обе бегут «вперёд по линии». */
.karta__duga { animation: punktir-bezhit 1.4s linear infinite; }
.karta--ryba .karta__duga { animation-duration: 1.8s; }
@keyframes punktir-bezhit { from { stroke-dashoffset: 17.8; } to { stroke-dashoffset: 0; } }
.karta--ryba .karta__duga { animation-name: punktir-bezhit-ryba; }
@keyframes punktir-bezhit-ryba { from { stroke-dashoffset: 31.2; } to { stroke-dashoffset: 0; } }

/* Первый экран главной: дуга вокруг кнопки «следующий кадр» заполняется, пока идёт кадр */
.krug-knopka--taymer .krug-knopka__duga { stroke-dashoffset: 100; }
.krug-knopka--taymer.is-idet .krug-knopka__duga { animation: duga-taymer var(--vremya-kadra, 5.5s) linear forwards; }
@keyframes duga-taymer { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Схема маршрута рыбы: пунктир прорисовывается слева направо при загрузке, рыбка плывёт по пути */
.js .shema__risovka { stroke-dashoffset: 1; }
.js .shema.is-gotova .shema__risovka { animation: shema-risovka 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.4s forwards; }
@keyframes shema-risovka { to { stroke-dashoffset: 0; } }
.js .shema__marka, .js .shema__tochka { opacity: 0; transition: opacity 0.5s ease; }
.js .shema.is-gotova .shema__marka--norway, .js .shema.is-gotova .shema__tochka--norvegiya { opacity: 1; transition-delay: 0.3s; }
.js .shema.is-gotova .shema__marka--antwerp, .js .shema.is-gotova .shema__tochka--belgiya { opacity: 1; transition-delay: 1.4s; }
.js .shema.is-gotova .shema__marka--tashkent, .js .shema.is-gotova .shema__tochka--uzbekistan { opacity: 1; transition-delay: 2.4s; }
.shema__marka--tashkent, .shema__tochka--uzbekistan { transition-delay: 0s; }

/* Окно меню: выезжает справа, крестик доворачивается (animations/popups.md, close-button.md) */
.menyu-okno[open] { animation: menyu-vyezd 0.5s cubic-bezier(0.2, 0, 0, 1); }
.menyu-okno[open].zakryvaetsya { animation: menyu-uezd 0.5s ease forwards; }
@keyframes menyu-vyezd { from { transform: translateX(100%); } to { transform: none; } }
@keyframes menyu-uezd { from { transform: none; } to { transform: translateX(100%); } }

/* Баннер cookie: выплывает снизу */
.cookie:not([hidden]) { animation: cookie-poyavlenie 0.5s ease; }
@keyframes cookie-poyavlenie { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Спасибо после формы — появляется на месте формы */
.forma-spasibo:not([hidden]) { animation: spasibo 0.5s ease; }
@keyframes spasibo { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .karta__duga, .krug-knopka--taymer.is-idet .krug-knopka__duga { animation: none; }
  .hero__slayd { transition: none; }
  .js .shema__risovka { stroke-dashoffset: 0; animation: none !important; }
  .js .shema__marka, .js .shema__tochka { opacity: 1; transition: none; }
  .menyu-okno[open], .menyu-okno[open].zakryvaetsya, .cookie:not([hidden]), .forma-spasibo:not([hidden]) { animation: none; }
  .kartochka { position: relative !important; top: auto !important; }
  .cennost { transform: none !important; }
}

/* Круг 12: последние смены состояний рывком → 0,5 с — уход баннера cookie, подсказка карты, тексты ошибок формы */
.cookie.is-uhodit { animation: cookie-uhod 0.5s ease forwards; }
@keyframes cookie-uhod { to { opacity: 0; transform: translateY(24px); } }
.karta-podskazka { opacity: 0; transition: opacity var(--perehod) ease; }
.karta-podskazka.is-vidna { opacity: 1; }
.is-oshibka .pole__oshibka { animation: oshibka-poyavlenie 0.5s ease; }
@keyframes oshibka-poyavlenie { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cookie.is-uhodit, .is-oshibka .pole__oshibka { animation: none; }
  .karta-podskazka { transition: none; }
}

/* --- 05-stopka-cennostey.css --- */
/* «What we value» — сайт-ос/393 (слово владельца 11.10 20:10: «есть же готовая анимация в моём сайте,
   возьмите готовое»). Прежняя стопка сайт-ос/370 (своя, со ступенькой и уменьшением на вебе) снята.

   Веб (от 1200) — готовое: tupanow «Преимущества», `blocks/benefits/BenefitsSection.module.css` и
   `BenefitsBody.tsx`. Левая колонка закреплена, карточки закрепляются на position: sticky в одной точке,
   следующая наезжает, предыдущая гаснет и уменьшается (скрипт — site.js, только прозрачность и масштаб),
   последняя не анимирована. Расстояние между карточками — его: шаг 263.3 − карточка 235 = 28.3 единицы
   макета 1200, на 1440 — 34 px (замер на его сайте 11.10: 33.97); у Агаты 34.6 × --u = 34 px на 1440.

   Телефон и планшет (до 1200) — слово владельца 20:36 и 20:42: стопка с краями, одинаково на обеих
   ширинах. Каждая карточка прилипает ниже предыдущей на ступеньку; когда пришла четвёртая, закреплены
   все четыре, сверху видны края трёх задних, и стопка уходит вверх только с концом блока.
   Как: у карточки i нижнее поле (3 − i) ступеньки (у следующей столько же отрицательного верхнего —
   расстояние в потоке не меняется), поэтому предел закрепления у всех четырёх наступает одновременно;
   пустой хвост колонки (::after) — путь, на котором стопка из четырёх держится (поле колонки не
   годится: закрепление ограничено содержимым колонки без полей).
   Обрезки нет: колонка гибкая (min-width: 0), карточка не шире колонки, фото прижато к правому краю —
   при видимой полосе прокрутки (единица --u считается от 100vw вместе с полосой) карточки сужаются,
   а не уходят под край панели (было: на 1440 с полосой — на 12 px за край). */
.cennosti__panel { overflow: clip; }          /* hidden делал панель контейнером прокрутки — sticky внутри не работал */
.cennosti__kolonka {
  --stopka-verh: calc(var(--shapka-vysota) + 16 * var(--u));
  --stopka-shag: calc(14 * var(--u));
  --stopka-zazor: calc(32 * var(--u));       /* как список «Преимуществ» tupanow на планшете (BenefitsTablet: gap 32) */
  --stopka-derzhat: calc(300 * var(--u));    /* путь, на котором стопка из четырёх держится целиком */
  display: flex; flex-direction: column; gap: var(--stopka-zazor);
  overflow: visible; margin: calc(24 * var(--u)) 0 0; padding: 0; min-width: 0;
}
.cennosti__kolonka::after { content: ""; flex: none; height: calc(var(--stopka-derzhat) - var(--stopka-zazor)); }
.cennost {
  position: sticky; top: calc(var(--stopka-verh) + var(--i) * var(--stopka-shag));
  flex: none; margin: 0 0 calc((3 - var(--i)) * var(--stopka-shag));
  transform: scale(calc(1 - (3 - var(--i)) * 0.03)); transform-origin: 50% 0;
}
.cennost + .cennost { margin-top: calc(-1 * (4 - var(--i)) * var(--stopka-shag)); }
.cennost:last-child { margin-bottom: 0; }
.cennosti__upravlenie { display: none; }

/* планшет: карточка — как на вебе (текст слева, фото справа), та же стопка с краями */
@media (width >= 768px) {
  .cennosti__kolonka {
    --stopka-verh: calc(var(--shapka-vysota) + 24 * var(--u));
    --stopka-shag: calc(76 * var(--u));   /* ступенька = низ номерка (30 + 45) + 1: номерок не торчит из-под следующей */
    padding-left: calc(20 * var(--u));
  }
  /* без уменьшения глубже лежащих: ступенька 76 открывает номерок и заголовок, с масштабом из-под
     следующей выглядывал верх строки текста (сайт-ос/370, круг 2) */
  .cennost { transform: none; display: block; height: calc(200 * var(--u)); min-height: 0; padding: calc(41 * var(--u)) calc(40 * var(--u)) calc(31 * var(--u)) calc(51 * var(--u)); }
  .cennost__foto { position: absolute; left: auto; right: calc(17 * var(--u)); top: calc(15 * var(--u)); width: calc(252 * var(--u)); height: calc(168 * var(--u)); }
  .cennost__zagolovok { margin: 0; font-size: calc(21 * var(--u)); }
  .cennost__tekst { margin-top: calc(7 * var(--u)); max-width: none; white-space: nowrap; font-size: calc(16 * var(--u)); }
  .cennost:first-child .cennost__tekst { max-width: calc(182 * var(--u)); white-space: normal; }
  .cennost__nomer { left: calc(-21 * var(--u)); top: calc(30 * var(--u)); }
}

/* веб: «Преимущества» tupanow — все карточки закрепляются в одной точке, гаснут по скрипту */
@media (width >= 1200px) {
  /* правое поле панели 3.2: так стоят карточки в кадре 1465 (колонка 657.8 справа от тезиса 558 и
     промежутка 70); прежнее 68 колонка с жёсткой шириной не соблюдала и уходила за поле */
  .cennosti__panel { height: auto; align-items: flex-start; padding-right: calc(3.2 * var(--u)); }
  /* 540 — чтобы натюрморт не срезался низом панели в миг, когда блок уезжает (при 224 срезался). */
  .cennosti__tezis { position: sticky; top: calc(var(--shapka-vysota) + 40 * var(--u)); min-height: calc(540 * var(--u)); }
  /* натюрморт теперь внутри левой части: прежние точки панели (−14; 146,6) минус поля панели (56; 90) */
  .cennosti__natyurmort { left: calc(-70 * var(--u)); top: calc(56.6 * var(--u)); z-index: -1; }
  .tema-ryba .cennosti__natyurmort { left: calc(-162 * var(--u)); top: calc(137.3 * var(--u)); }
  .cennosti__kolonka {
    --stopka-verh: calc(var(--shapka-vysota) + 64 * var(--u));
    --stopka-zazor: calc(34.6 * var(--u));
    display: block; flex: 0 1 calc(657.8 * var(--u));
  }
  /* Конец стопки (слово владельца 12.10: «у меня две карточки остаются, и потом уже идёт скролл всего
     блока, а у нас они до талого листаются»; повтор со снимком «почему не сделано?» и уточнение «блок
     должен держаться и карточки оставаться — видно 3 и 4»). Как у tupanow: в конце видны ДВЕ карточки —
     третья на месте закрепления, четвёртая под ней через промежуток, — блок держится, потом уезжает целиком.
     Как: третья и четвёртая закреплены (четвёртая — ниже третьей на карточку и промежуток) и не гаснут
     (site.js). Обе отпускаются в один миг: у третьей нижнее поле на карточку и промежуток (её край для
     закрепления — низ четвёртой), у четвёртой верхнее поле минус карточка (в потоке ничего не сдвигается).
     Хвост колонки (::after, 300) — путь, на котором блок держится. Тезис отпускается в тот же миг: нижнее
     поле колонки 81.4 = (40 + 540) − (64 + 200 + 34.6 + 200) — точки закрепления тезиса и карточек, высота
     тезиса, две карточки и промежуток. Попытки до этого: поле 316 — держалась одна четвёртая; без
     закрепления двух последних — обе видны, но блок не держался. */
  .cennosti__kolonka { --stopka-derzhat: calc(300 * var(--u)); margin-bottom: calc(81.4 * var(--u)); }
  .cennosti__kolonka::after { content: ""; display: block; height: var(--stopka-derzhat); }
  .cennost, .cennost:last-child { top: var(--stopka-verh); margin: 0; will-change: opacity, transform; }
  .cennost + .cennost { margin-top: var(--stopka-zazor); }
  .cennost:nth-last-child(-n + 2) { will-change: auto; }
  .cennost:nth-last-child(2) { margin-bottom: calc(200 * var(--u) + var(--stopka-zazor)); }
  .cennost:last-child { top: calc(var(--stopka-verh) + 200 * var(--u) + var(--stopka-zazor)); margin-top: calc(-200 * var(--u)); }
}

/* «уменьшить движение»: на телефоне и планшете — обычный список; на вебе закрепление остаётся,
   отработавшая карточка гаснет сразу (как у tupanow, MOTION-SPEC §16) */
@media (prefers-reduced-motion: reduce) and (width < 1200px) {
  .cennost { position: relative; top: auto; transform: none !important; margin: 0 !important; }
  .cennosti__kolonka { gap: calc(16 * var(--u)); }
  .cennosti__kolonka::after { content: none; }
}

/* --- 06-pravki-370.css --- */
/* Правки владельца после показа 11.10 (сайт-ос/370). Белая шапка и окно меню — в 03-bloki.css
   на месте прежних правил; «липкая» стопка ценностей — 05-stopka-cennostey.css. */

/* 4. Подпись студии в подвале — вектором и без перевода: переводчик браузера делал из текста
   «tupanow.» «тупанов». Слово — SVG (контуры шрифта Onest, _maket/tools/tupanow-vektor.py),
   на ссылке translate="no" и class="notranslate". Размер слова — как у прежнего текста (1em). */
.podval__studiya { align-items: center; }
.podval__podpis { align-self: baseline; }        /* по подписи ряд подвала ровняется по базовой линии */
.podval__studiya b { display: block; }
.podval__slovo { display: block; width: auto; height: 0.987em; max-width: none; }
/* сайт-ос/393: квадратный знак «t.» слева убран (слово владельца 11.10 20:10). Зелёная точка мигает —
   готовое: tupanow `layout/SiteHeader.module.css` @keyframes dotBlink (держится секунду, гаснет за секунду
   и обратно; «точка мигать должна везде», 01.10). ЗАМЕНИТЬ ШАБЛОНОМ 394 (подпись tupanow в библиотеке
   студии), когда он будет готов. */
.podval__tochka { animation: dotBlink 2s linear infinite alternate; }
@keyframes dotBlink { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .podval__tochka { animation: none; } }

/* 7. Первый экран: три кадра одного масштаба и по центру (слово владельца 11.10: «авокадо по центру,
   манго и голубика мелкие, где-то сбоку»). На 390/768 кадры стояли по-разному: авокадо — свой вертикальный
   исходник на весь экран, манго и голубика — горизонтальное фото в нижней трети, предмет мелкий и справа.
   Теперь все три — исходники одной серии 1536×1024 (как на вебе, где они уже ровные), масштаб один,
   центр предмета (рамка предмета по пикселям исходника, _maket/tools/zamery370.py, пункт 7) — в одной точке.
   --cx/--cy — центр рамки предмета в пикселях исходника. */
.hero__slayd--avocado { --cx: 995; --cy: 528; }
.hero__slayd--mango { --cx: 1014; --cy: 535; }
.hero__slayd--blueberry { --cx: 977; --cy: 614; }
@media (width < 1200px) {
  .hero__slayd { --s: calc(0.466 * var(--u)); --ty: calc(664 * var(--u)); }
  .stranica-glavnaya .hero__foto--vse {
    left: calc(50% - var(--cx) * var(--s)); top: calc(var(--ty) - var(--cy) * var(--s));
    width: calc(1536 * var(--s)); height: calc(1024 * var(--s));
  }
  /* верх фото растворяется в фон блока под кнопками; по бокам — на случай широкого телефона,
     где фото уже окна (модуль упирается в 1,25 px шире 487) */
  .stranica-glavnaya .hero__foto--vse img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%), linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%), linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-composite: intersect;
  }
}
@media (768px <= width < 1200px) {
  /* масштаб от ширины окна, а не от модуля: фото всегда шире окна, края за кадром — боковая маска не нужна */
  .hero__slayd { --s: calc(0.75 * 100vw / 768); --ty: calc(803 * var(--u)); }
  .stranica-glavnaya .hero__foto--vse img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
  }
}

/* 8. Рамка фокуса — только с клавиатуры. Окно меню, открытое касанием, держит фокус на себе (site.js),
   у самого окна рамки нет; у ссылок и кнопок рамка остаётся для :focus-visible (02-osnova.css). */
.menyu-okno:focus { outline: none; }
:focus:not(:focus-visible) { outline: none; }
/* круг 1 Проверяющего: фото серии серее фона блока (манго справа 222 против 247) — переход от фона блока
   к фону фото читался серой растушёвкой. На 390/768 стоят копии с фоном, выровненным до 247
   (hero-*-mob.png, _maket/tools/fon-vyrovnyat.py); веб 1440 — исходники как были. */
@media (width >= 1200px) { .stranica-glavnaya .hero__foto--vse { display: none; } }

/* --- 07-gotovoe-393.css --- */
/* Сайт-ос/393 (слово владельца 11.10 20:10: «сначала используем готовые приёмы»).
   Здесь — наведение стрелки в шапке и кнопок; карточки ценностей — 05-stopka-cennostey.css,
   мигающая точка подписи — 06-pravki-370.css. У каждого приёма в комментарии — откуда взят. */

/* ---------- Стрелка в квадрате шапки ----------
   Готовое: tupanow `blocks/hero/HeroSection.module.css`, .notice / .noticeArrow / .noticeArrowIcon —
   при наведении стрелка уезжает вверх-вправо, на её место снизу-слева приходит вторая
   (в разметке два одинаковых значка). Числа — его: translate 0.35s cubic-bezier(0.65, 0, 0.35, 1). */
.shapka__kvadrat { position: relative; overflow: hidden; }
.shapka__kvadrat .shapka__kvadrat-strelka {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: translate 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.shapka__kvadrat .shapka__kvadrat-strelka:last-child { translate: -100% 100%; }
.shapka__kvadrat:hover .shapka__kvadrat-strelka:first-child,
.shapka__kvadrat:focus-visible .shapka__kvadrat-strelka:first-child { translate: 100% -100%; }
.shapka__kvadrat:hover .shapka__kvadrat-strelka:last-child,
.shapka__kvadrat:focus-visible .shapka__kvadrat-strelka:last-child { translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .shapka__kvadrat .shapka__kvadrat-strelka { transition: none; }
}

/* ---------- Кнопки: «Увеличение точки» ----------
   Готовое: nolim.cc/hover-icon-button, модификация NLM183 (класс dot-scale), код без привязки к Тильде
   (выжимка помощника 11.10). Все числа анимации — их: точка растёт за 0.7s cubic-bezier(0.84, -0.01,
   0.25, 0.99) до размера, при котором закрывает всю кнопку (множитель — их формула ×1.05, считает
   site.js); подложка при входе меняется за 2.3s ease-in-out, при уходе — сразу; текст меняет цвет
   за 0.7s той же кривой; на месте точки проявляется новая точка того же размера цвета текста за 0.5s (слово владельца 12.10: «стрелки на кнопках убери, оставь точки» — бегущая стрелка nolim снята);
   наведение только от 640 px; переходы включаются через 100 мс после загрузки.
   Цвета — бренда: у Агаты точка — круг-солнце, она и заливает кнопку своим цветом
   (у залитой кнопки точка белая — кнопка становится белой с текстом цвета акцента;
   у контурной точка цвета акцента — кнопка заливается акцентом, текст белый).
   Точка стоит там, где её поставил согласованный макет, — слева от подписи (у nolim — справа).
   Кнопки без точки в макете (Send, Fish/Fruit, кнопки cookie) остаются с прежним наведением.
   ЗАМЕНИТЬ ШАБЛОНОМ 394 (библиотека анимаций студии), когда он будет готов. */
.knopka:not(.knopka--bez-tochki) {
  --tochka-cvet: currentColor;
  --tochka-zalivka: #fff;
  --tochka-tekst: var(--c-akcent);
  position: relative; overflow: hidden; isolation: isolate;
}
.knopka--kontur:not(.knopka--bez-tochki) {
  --tochka-cvet: var(--c-akcent);
  --tochka-zalivka: var(--c-akcent);
  --tochka-tekst: #fff;
}
.knopka:not(.knopka--bez-tochki)::before { position: relative; z-index: 0; background: var(--tochka-cvet); }
.knopka__tekst { position: relative; z-index: 1; }
.knopka:not(.knopka--bez-tochki)::after {
  content: ""; position: absolute; z-index: 2; left: var(--tochka-x, 50%); top: 50%;
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); translate: -50% -50%; border-radius: 50%;
  opacity: 0; pointer-events: none; background: var(--tochka-tekst);
}
/* переходы — только после загрузки (у nolim стили с transition вставляются через 100 мс) */
.knopki-gotovy .knopka:not(.knopka--bez-tochki) {
  transition: background-color 0s ease-in-out, border-color 1.2s ease-in-out, color 0.2s ease-in-out;
}
.knopki-gotovy .knopka:not(.knopka--bez-tochki)::before { transition: transform 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99); }
.knopki-gotovy .knopka__tekst { transition: color 0.7s cubic-bezier(0.84, -0.01, 0.25, 0.99); }
.knopki-gotovy .knopka:not(.knopka--bez-tochki)::after {
  transition: opacity 0.5s cubic-bezier(0.84, -0.01, 0.25, 0.99);
}
/* прежнее наведение (темнее подложка, контурная — тёмная) здесь заменено увеличением точки */
.knopka:not(.knopka--bez-tochki):hover { background: var(--c-akcent); border-color: var(--c-akcent); }
.knopka--kontur:not(.knopka--bez-tochki):hover { background: transparent; color: var(--c-shapka-tekst); border-color: var(--c-shapka-tekst); }
.knopka--kontur:not(.knopka--bez-tochki):hover::before { background: var(--tochka-cvet); }
@media (hover: hover) and (min-width: 640px) {
  .knopki-gotovy .knopka:not(.knopka--bez-tochki):hover { background: var(--tochka-zalivka); border-color: var(--c-akcent); transition: background-color 2.3s ease-in-out; }
  .knopka:not(.knopka--bez-tochki):hover::before { transform: scale(var(--tochka-mnozhitel, 50)); }
  .knopka:not(.knopka--bez-tochki):hover::after { opacity: 1; }
  .knopka:not(.knopka--bez-tochki):hover .knopka__tekst { color: var(--tochka-tekst); }
}
@media (prefers-reduced-motion: reduce) {
  .knopki-gotovy .knopka:not(.knopka--bez-tochki), .knopki-gotovy .knopka:not(.knopka--bez-tochki)::before,
  .knopki-gotovy .knopka__tekst, .knopki-gotovy .knopka:not(.knopka--bez-tochki)::after { transition: none; animation: none; }
}

/* --- 08-karta-ryba-12-10.css --- */
/* Рыба, «From Norway to Tashkent» на телефоне и планшете — подписи и чипы на карте (слово владельца 12.10:
   «для веб-версии переместил города из-под карты на карту и пропустил, что в планшете и в мобильном мы
   это не сделали; в фигме для вёрстки поправил»). Числа — узлы «Списки стран» кадров «Для вёрстки»:
   768 — 241:4362, 390 — 241:4723 (снято 12.10). Отсчёт — от плашки карты; единица на обеих ширинах —
   пиксель кадра. Блок кончается низом плашки (кадр 768 — 584 вместо 775, кадр 390 — 474 вместо 633):
   нижнее поле блока снято, отступ до «What we value» даёт сама следующая секция. */
@media (width < 1200px) {
  .rynki--ryba { padding-bottom: 0; }
  .rynki__legenda-ryba { position: absolute; left: calc(176 * var(--u)); top: calc(22.62 * var(--u)); margin: 0; gap: calc(17.62 * var(--u)); }
  .rynki__legenda-ryba .rynki__kolonka { display: flex; flex-direction: column; align-items: flex-start; }
  .rynki__legenda-ryba .rynki__legenda { gap: calc(6.27 * var(--u)); font-size: calc(11.75 * var(--u)); line-height: calc(14.88 * var(--u)); }
  .rynki__legenda-ryba .rynki__legenda::before { width: calc(9.4 * var(--u)); height: calc(9.4 * var(--u)); border-radius: calc(2.35 * var(--u)); }
  .rynki__legenda-ryba .chipy { margin-top: calc(10.97 * var(--u)); }
  .rynki__legenda-ryba .chipy li {
    padding: calc(5.72 * var(--u)) calc(11.75 * var(--u) - 0.78 * var(--u)); /* высота чипа 25.53 кадра */
    border-width: calc(0.78 * var(--u)); font-size: calc(10.97 * var(--u)); line-height: calc(12.53 * var(--u));
  }
}
@media (768px <= width < 1200px) {
  .rynki__legenda-ryba { left: calc(441 * var(--u)); top: calc(40 * var(--u)); gap: calc(40 * var(--u)); }
  .rynki__legenda-ryba .rynki__legenda { gap: calc(8.53 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(20.27 * var(--u)); }
  .rynki__legenda-ryba .rynki__legenda::before { width: calc(12.8 * var(--u)); height: calc(12.8 * var(--u)); border-radius: calc(3.2 * var(--u)); }
  .rynki__legenda-ryba .chipy { margin-top: calc(14.93 * var(--u)); }
  .rynki__legenda-ryba .chipy li {
    padding: calc(7.93 * var(--u)) calc(16 * var(--u) - 1.07 * var(--u)); /* высота чипа 35.07 кадра */
    border-width: calc(1.07 * var(--u)); font-size: calc(14.93 * var(--u)); line-height: calc(17.07 * var(--u));
  }
}

/* Рыба, призыв «We also trade fruit» на планшете (слово владельца 12.10: «строки слиплись — там вообще не
   должно быть строк, в одну строку; фрукты съехали — по центру должны быть»). Узел «Плашка» 241:4247 кадра
   768 «Для вёрстки», снято 12.10: заголовок — одна строка 624 в стопке с полями 40; фото 780×520 — 124/196
   от плашки (было −38/200, владелец сдвинул в кадре). Строки слипались, потому что при видимой полосе
   прокрутки плашка 689 вместо 704 и заголовку не хватало 17 px — перенос с межстрочным 44 при кегле 60. */
@media (768px <= width < 1200px) {
  /* в одну строку и по центру плашки: при полосе прокрутки строка (615) шире рамки (607) — рамку на ширину полей */
  .prizyv--frukty .prizyv__zagolovok { white-space: nowrap; margin-inline: calc(-40 * var(--u)); }
  .prizyv--frukty .prizyv__foto { left: calc(124 * var(--u)); top: calc(196 * var(--u)); }
}

/* Рыба, «What we value» на планшете (слово владельца 12.10: «картинку убери, чтобы было как в мобильной
   версии — заголовок, а потом сразу карточки»). Натюрморт на планшете снят, карточки — сразу под заголовком,
   с тем же отступом, что у фруктовой главной на планшете (поля колонки — 05-stopka-cennostey.css). */
@media (768px <= width < 1200px) {
  .tema-ryba .cennosti__natyurmort { display: none; }
  .tema-ryba .cennosti__kolonka { margin-top: calc(24 * var(--u)); }
}

/* Рыба, призыв «We also trade fruit» на телефоне (слово владельца 12.10: «голубика обрезается — ровно по центру,
   ничего не должно обрезаться»). Узел «Фото — фрукты» 241:4618 кадра 390 «Для вёрстки», снято 12.10:
   574×383, 0/272 от плашки (было 660 шириной на −40/214 — левый край с голубикой уходил за плашку). */
@media (width < 768px) {
  .prizyv--frukty .prizyv__foto { left: 0; top: calc(272 * var(--u)); width: calc(574 * var(--u)); }
}

/* Главная, слайдер «Three fruits» на планшете (слово владельца 12.10: «должна быть одна карточка шириной
   в экран, а у нас торчит часть другой; расширь карточку — фото тогда нормально влезет»). Отступление от
   кадра 768 (карточка 640 при ленте 704, соседняя выглядывала на 48) — по слову владельца.
   Карточка — во всю ленту (704; при полосе прокрутки 689); промежуток между карточками — два поля,
   чтобы соседняя начиналась за краем экрана. Колонка текста — 304, как в кадре; прибавка ширины
   уходит фото (260 → 324 на 768). Высота фото 360 — как в кадре. */
@media (768px <= width < 1200px) {
  .produkty:not(.produkty--ryba) .produkty__spisok { gap: calc(2 * var(--pole)); }
  .produkty:not(.produkty--ryba) .kartochka { flex-basis: 100%; grid-template-columns: 1fr calc(304 * var(--u)); }
}

/* Главная, слайдер «Three fruits»: копии крайних карточек для бесконечной ленты — на телефоне и планшете
   (слово владельца 12.10: «в моб версии слайдер сделать бесконечным», «в планшете тоже»; site.js).
   На вебе лента — столбец карточек, копии скрыты. На планшете карточка — сетка, у копии та же. */
.kartochka--klon { display: none; }
@media (width < 768px) { .kartochka--klon { display: block; } }
@media (768px <= width < 1200px) { .kartochka--klon { display: grid; } }

/* «What we value» на телефоне, фрукты и рыба (слово владельца 12.10: «карточки сделай шире — где солнце,
   это левый край, меню — правый»). Было: передняя карточка 36–354 (поля секции 16 + панели 20); край
   логотипа — поле страницы 20, край меню — 370. Колонка выходит за поля панели на 16 с каждой стороны:
   передняя карточка 20–370, задние в стопке — пропорционально (их масштаб прежний). */
@media (width < 768px) {
  .cennosti__kolonka { margin-inline: calc(-16 * var(--u)); }
}

/* --- 09-podval-varianty.css --- */
/* Варианты подвала (сайт-ос/438, слово владельца 19.10). Выбор — строкой «podval:» в шапке страницы,
   см. build.py. Основной подвал (podval.html) эти правила не трогают: всё под .podval--peremennyy. */

/* логотип переезжает из контактов в подвал */
body:has(.podval--peremennyy) .kontakty__logo { display: none; }
@media (width >= 1200px) { body:has(.podval--peremennyy) .kontakty__telefony { gap: 0; } }

/* 2 — «восход»: логотип под всеми строками подвала, солнце встаёт по прокрутке, затем проявляется название */
.voshod { display: flex; justify-content: center; padding: calc(56 * var(--u)) 0 calc(24 * var(--u)); }
.voshod__logo { display: block; width: calc(180 * var(--u)); height: auto; overflow: visible; }
@media (width >= 768px) { .voshod { padding-top: calc(72 * var(--u)); } .voshod__logo { width: calc(240 * var(--u)); } }
@media (width >= 1200px) { .voshod { padding: calc(96 * var(--u)) 0 calc(40 * var(--u)); } .voshod__logo { width: calc(300 * var(--u)); } }

/* 3 — «горизонт»: широкий логотип над линией подвала; солнце проходит дугой слева и садится на место,
   название открывается слева направо вслед за ним */
.gorizont { display: flex; justify-content: center; overflow: hidden; padding: calc(70 * var(--u)) 0 0; }
.gorizont__logo { display: block; width: 100%; max-width: calc(350 * var(--u)); height: auto; overflow: visible; }
@media (width >= 768px) { .gorizont { padding-top: calc(110 * var(--u)); } .gorizont__logo { max-width: calc(560 * var(--u)); } }
@media (width >= 1200px) { .gorizont { padding-top: calc(160 * var(--u)); } .gorizont__logo { max-width: calc(820 * var(--u)); } }
.podval--gorizont .podval__ryad { margin-top: 0; }

/* 4 — «короткие лучи» (слово владельца 19.10): знак с лучами вдвое короче, солнце почти во всю ширину стоит
   на нижнем крае страницы, название внутри круга. Пока только компьютер (слово владельца 19.10: «чисто
   веб-версию»), телефон и планшет не доводились. */
.luchi { display: flex; justify-content: center; overflow: hidden; padding-top: calc(120 * var(--u)); }
.luchi__logo { display: block; width: 100%; max-width: calc(1240 * var(--u)); height: auto; overflow: visible; }
.podval--luchi { padding-bottom: 0; }

/* 5 — «море кодом» и 6 — «видео» (слово владельца 19.10): под строками подвала море во всю ширину окна.
   Только компьютер (слово владельца «чисто веб-версию»). */
.podval--more, .podval--video { padding-bottom: 0; }
.video-more { display: flex; flex-direction: column; align-items: center; padding-top: calc(96 * var(--u)); }
.video-more__logo { display: block; width: calc(300 * var(--u)); height: auto; }
.video-more__rolik { display: block; width: 100%; height: calc(620 * var(--u)); margin-top: calc(40 * var(--u)); object-fit: cover; object-position: 50% 90%;
  mask-image: linear-gradient(to bottom, transparent, #000 30%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); }
@media (width >= 1200px) { .more, .video-more__rolik { margin-inline: calc(-24 * var(--u)); } .video-more__rolik { width: calc(100% + 48 * var(--u)); } }

/* 5 после правки владельца 19.10: знак из сцены убран, солнце — своё у сцены; название встаёт из воды,
   низ букв — по линии горизонта (--gorizont считает podval-more.js); верх неба растворяется в фоне подвала. */
.more { position: relative; overflow: hidden; height: calc(480 * var(--u)); } /* море + контакты + реквизиты — в один экран */
.more__holst { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 22%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); }
.more__nazvanie-ramka { position: absolute; inset: 0 0 auto; height: var(--gorizont, 60%); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.more__nazvanie { margin: 0 0 calc(-0.2 * 1em); font: 800 calc(190 * var(--u)) / 1 "Manrope", sans-serif; letter-spacing: -0.035em;
  white-space: nowrap; color: #1c2a33; will-change: transform; }

/* 5/7/8 — подвал в цвет неба (--nebo ставит podval-more.js по верхней строке холста); пока скрипт не
   отработал — светлый серо-голубой, близкий к небу сцены. Вид надписи — строка «nadpis:» у страницы:
   stroch (Manrope 800), kaps (Bebas Neue — шрифт заголовков сайта, хвост «g» не срезается), net (без надписи). */
body:has(.podval--more) .kontakty, .podval--more { background: var(--nebo, var(--c-poverhnost)); }
.podval--more .podval__ryad { border-top-color: rgb(31 36 16 / .25); }
.podval--more-kaps .more__nazvanie { margin-bottom: calc(-0.24 * 1em); font: 400 calc(262 * var(--u)) / 1 "Bebas Neue", sans-serif; letter-spacing: 0.01em; text-transform: uppercase; }
.podval--more-net .more__nazvanie-ramka { display: none; }
/* карточка формы на небе — без своего фона, иначе белый прямоугольник (найдено на снимке 19.10) */
body:has(.podval--more) .kontakty .forma-blok { background: transparent; }
/* шапка на страницах с морем прячется при прокрутке вниз (класс ставит podval-more.js) */
.shapka--skryta { translate: 0 -100%; }
body:has(.podval--more) .shapka { transition: translate .35s ease, background-color var(--perehod) ease, box-shadow var(--perehod) ease; }
@media (prefers-reduced-motion: reduce) { body:has(.podval--more) .shapka { transition: none; } }

/* «море», правки владельца 19.10 (вечер): реквизиты в левой колонке контактов, © убран; подвал — только море;
   последний экран закреплён (классы ставит podval-more.js, без скрипта ничего не липнет) */
.podval--more { padding: 0; }
.more-rekvizity .kontakty__telefony { display: flex; flex-direction: column; align-items: flex-start; }
.more-rekvizity .kontakty .podval__ryad { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0;
  margin: calc(64 * var(--u)) 0 0; padding: 0; border: 0; text-align: left; font-size: calc(14.4 * var(--u)); line-height: 1.7; }
.more-rekvizity .kontakty .podval__rekvizity { margin: 0; }
.more-rekvizity .kontakty .podval__ssylki { order: 1; margin: calc(80 * var(--u)) 0 0; }
.more-rekvizity .kontakty .podval__studiya { order: 2; margin: auto 0 0; padding-top: calc(48 * var(--u)); }
.more-rekvizity .kontakty .podval__god { display: none; }
.more-zakrep main { position: sticky; top: calc(100vh - var(--main-h) - var(--podval-h)); }
.more-zakrep .podval--more { position: sticky; top: calc(100vh - var(--podval-h)); }
.more-zapas { height: calc(600 * var(--u)); }
/* запас под хвосты букв (g, p, y) у строк контактов: на липком экране браузер подрезал их по краю строки
   (снимок владельца 19.10, «@agsr.be» обрезано снизу); поле внутри, отступ наружу — раскладка не меняется */
.more-zakrep .kontakty dd, .more-zakrep .kontakty dt, .more-zakrep .kontakty .podval__ryad > *, .more-zakrep .shapka__pochta {
  padding-bottom: 0.25em; margin-bottom: -0.25em; }
/* два слова, солнце в просвете между ними (слово владельца 19.10); пробел между словами — для чтения без стилей */
.more__nazvanie { display: flex; gap: calc(62 * var(--u)); font-size: calc(41 * var(--u)); } /* просвет — по солнцу */
@media (width >= 768px) { .more__nazvanie { gap: calc(96 * var(--u)); font-size: calc(93 * var(--u)); } }
@media (width >= 1200px) { .more__nazvanie { gap: calc(130 * var(--u)); font-size: calc(184 * var(--u)); } }
.podval--more-kaps .more__nazvanie { font-size: calc(56 * var(--u)); }
@media (width >= 768px) { .podval--more-kaps .more__nazvanie { font-size: calc(129 * var(--u)); } }
@media (width >= 1200px) { .podval--more-kaps .more__nazvanie { font-size: calc(254 * var(--u)); } }
/* светлая дымка у горизонта: прозрачность = ход надписи (ставит podval-more.js); верхний край холста не задевает */
.more__svet { position: absolute; inset: 0 0 auto; height: var(--gorizont, 60%); opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(255 244 222 / .72), rgb(255 244 222 / .38) 45%, rgb(255 244 222 / 0) 92%); }
.podval--more-net .more__svet { display: none; }
/* в дымке — окно вокруг солнца, чтобы оно не бледнело (--solnce-x ставит скрипт по просвету между словами) */
.more__svet { mask-image: radial-gradient(circle at var(--solnce-x, 50%) 100%, transparent calc(55 * var(--u)), #000 calc(150 * var(--u)));
  -webkit-mask-image: radial-gradient(circle at var(--solnce-x, 50%) 100%, transparent calc(55 * var(--u)), #000 calc(150 * var(--u))); }
/* планшет и телефон: строка реквизитов над морем (в подвале, как в основном подвале), море — во всю ширину */
@media (width < 1200px) { .podval--more { padding: calc(40 * var(--u)) 0 0; } .podval--more .podval__ryad { margin-inline: calc(20 * var(--u)); } .podval--more .more { margin-top: calc(32 * var(--u)); } .podval--more .podval__god { display: none; } }
@media (768px <= width < 1200px) { .podval--more .podval__ryad { margin-inline: var(--pole); } }
@media (width < 768px) { .more { height: calc(270 * var(--u)); } } /* слово владельца 19.10: меньше неба над солнцем (было 340) */
@media (768px <= width < 1200px) { .more { height: calc(400 * var(--u)); } } /* планшет: было 480 */ /* телефон: меньше пустого неба над надписью (В11 — слова в полях 20…370) */

/* --- 10-cennosti-belev.css --- */
/* «What we value» по образцу Белёва (chasti/cennosti-belev.html; слово владельца 19.10). Числа образца — 1440:
   заголовок top 128, карточка: колонка справа шириной 440, top 128, высота min(460, 100vh − 168 − 3·64), скругление 16,
   белая; шапка 64 — номер в круге 36 и заголовок 18/500; фото 3:2 со скруглением (как в прежних карточках); подпись 16 по центру, снизу 24;
   кольца 300/430/560/690 вокруг точки (.5; .6) снимка, штрих 1 px. Фон — наш (слово владельца). */
.cennosti-b { position: relative; background: var(--c-fon); padding: calc(40 * var(--u)) calc(20 * var(--u)); }
.cennosti-b__zagolovok { margin: 0; }
.cennosti-b__natyurmort { display: none; }
.cennosti-b__stopka { display: grid; gap: calc(16 * var(--u)); margin: calc(32 * var(--u)) 0 0; padding: 0; list-style: none; }
/* телефон и планшет — стопка с краями, как в прежнем блоке (05-stopka-cennostey.css, слово владельца 11.10 20:36/20:42;
   повторено 19.10: «карточки друг на друга накладываются — у меня не работает»). Ступенька — шапка карточки (64),
   как у образца на вебе: у задних видны номер и заголовок. Карточка k прилипает на верх + k·ступенька; нижнее поле
   (3 − k) ступеньки у неё и столько же отрицательного верхнего у следующей — расстояние в потоке прежнее, а предел
   закрепления у всех четырёх наступает разом; хвост колонки (::after) — путь, на котором держится стопка из четырёх. */
@media (width < 1200px) {
  /* заголовок держится вверху (слово владельца 19.10: «заголовок уезжает, а должен фиксироваться»): под шапкой,
     а когда шапка спрятана прокруткой вниз (html.shapka-skryta) — у верха экрана; стопка карточек — под заголовком */
  /* --uhod: на сколько низ последней карточки в стопке ниже низа заголовка. Поле заголовка снизу на эту величину
     (и столько же отрицательного у стопки — раскладка прежняя) отпускает заголовок ровно тогда, когда уходит стопка */
  .cennosti-b { --zag-verh: var(--shapka-vysota); --shag: calc(64 * var(--u));
    --uhod: calc(12 * var(--u) + 3 * var(--shag) + var(--cb-posl, 380px)); }
  html.shapka-skryta .cennosti-b { --zag-verh: 0px; }
  .cennosti-b__tezis { position: sticky; z-index: 5; top: var(--zag-verh); margin: 0 calc(-20 * var(--u));
    padding: calc(12 * var(--u)) calc(20 * var(--u)); background: var(--c-fon); transition: top .35s ease;
    margin-bottom: var(--uhod); }
  .cennosti-b__stopka { --verh: calc(var(--zag-verh) + var(--cb-zag, 80px) + 12 * var(--u)); margin-top: calc(8 * var(--u) - var(--uhod));
    display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
  .cennosti-b__stopka::after { content: ""; flex: none; height: calc(300 * var(--u) - 16 * var(--u)); }
  .cb { position: sticky; top: calc(var(--verh) + var(--k) * var(--shag)); flex: none; transition: top .35s ease; margin: 0 0 calc((3 - var(--k)) * var(--shag)); }
  .cb + .cb { margin-top: calc(-1 * (4 - var(--k)) * var(--shag)); }
  .cb:last-child { margin-bottom: 0; }
}
.cb { display: flex; flex-direction: column; align-items: center; overflow: hidden; border: 1px solid rgb(31 36 16 / .12);
  border-radius: calc(16 * var(--u)); background: #fff; color: var(--c-tekst); }
.cb__shapka { display: flex; align-items: center; align-self: stretch; gap: calc(16 * var(--u)); height: calc(64 * var(--u));
  margin: 0; padding: 0 calc(16 * var(--u)); border-bottom: 1px solid rgb(31 36 16 / .12); /* черта под шапкой, как у образца */
  font: 500 calc(18 * var(--u)) / 1.2 "Manrope", sans-serif; letter-spacing: 0; text-transform: none; }
.cb__nomer { display: grid; flex: none; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u));
  border: 1px solid rgb(31 36 16 / .2); border-radius: 50%; font-size: calc(15 * var(--u)); font-weight: 500; }
/* фото — прямоугольник со скруглением, как в прежних карточках (3 : 2, --r-foto-v-kartochke; слово владельца 19.10: «круги не нравятся») */
.cb__foto { overflow: hidden; align-self: stretch; aspect-ratio: 3 / 2; margin: calc(24 * var(--u)) calc(16 * var(--u)) 0; border-radius: var(--r-foto-v-kartochke); }
.cb__foto img { width: 100%; height: 100%; object-fit: cover; }
.cb__podpis { margin: calc(20 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.4; text-align: center; }

@media (width >= 768px) {
  .cennosti-b { padding: calc(56 * var(--u)) var(--pole); }
  .cennosti-b__stopka { width: min(100%, calc(560 * var(--u))); margin-inline: auto; } /* одна колонка, как телефон: стопка одинакова на обеих ширинах */
}

@media (width >= 1200px) {
  .cennosti-b { height: 480vh; padding: 0; }
  .cennosti-b__ekran { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .cennosti-b__tezis { position: absolute; z-index: 4; top: calc(128 * var(--u)); left: var(--pole); }
  /* размер и место — как у натюрморта прежнего блока (03-bloki / 05-stopka: 1030 по сетке, край −14 от поля;
     слово владельца 19.10 «как у нас был натюрморт») */
  .cennosti-b__natyurmort { display: block; position: absolute; z-index: 1; bottom: 0; left: calc(var(--pole) - 14 * var(--u));
    width: min(calc(1030 * var(--u)), 128vh); will-change: transform; }
  .cennosti-b__foto { position: relative; z-index: 2; }
  .cennosti-b__foto img { display: block; width: 100%; height: auto; }
  /* центр колец — центр композиции (рамка непрозрачных пикселей вырезки: 31,5 % / 50,9 % снимка), а не (.5; .6)
     образца: наш натюрморт стоит в снимке не по центру (слово владельца 19.10: «центр из центра натюрморта») */
  .cennosti-b__kolca { position: absolute; z-index: 1; left: 31.5%; top: 50.9%; width: calc(1820 * var(--u)); max-width: none; height: auto; /* общее svg { max-width: 100% } ужимало кольца до ширины снимка */ /* кольца ×1,3 вслед за снимком (у образца 300…690 на снимок 792) */
    overflow: visible; translate: -50% -50%; pointer-events: none; }
  .cennosti-b__kolca circle { fill: none; stroke: rgb(31 36 16 / .14); stroke-width: 0.77; } /* ≈1 px при кольцах ×1,3; без non-scaling-stroke —
     иначе штрих меряется в пикселях экрана, а длина окружности — в единицах рисунка, и кольцо обрывается */
  .cennosti-b__stopka { position: absolute; z-index: 3; top: calc(128 * var(--u)); right: var(--pole); display: block;
    width: calc(440 * var(--u)); height: min(calc(460 * var(--u)), calc(100vh - 360 * var(--u))); margin: 0; }
  .cb { position: absolute; inset: 0 0 auto; will-change: transform; } /* высота — по содержимому (слово владельца 19.10: «карточка будет короче — ничего страшного») */
  .cb__shapka { padding: 0 calc(24 * var(--u)); }
  .cb__foto { margin: calc(24 * var(--u)) calc(24 * var(--u)) 0; }
  .cb__podpis { margin: calc(20 * var(--u)) calc(32 * var(--u)) calc(24 * var(--u)); }
}
@media (768px <= width < 1200px) { .cennosti-b__tezis { margin-inline: calc(-1 * var(--pole)); padding-inline: var(--pole); } }
@media (prefers-reduced-motion: reduce) { .cennosti-b__tezis, .cb { transition: none; } }