/* ============================================================
   Novoterskaya — Balance of Four Elements
   Light, airy, premium. High-altitude light palette.
   ============================================================ */

:root {
  /* Palette */
  --paper:    #FBFCFE;
  --paper-2:  #F1F6FB;
  --sky:      #DCEBF5;
  --glacier:  #6FA8C4;
  --glacier-d:#3E7A98;
  --moss:     #5E8B6A;
  --moss-d:   #3F6B4C;
  --ember:    #D08A45;
  --gold:     #D9B876;
  --silver:   #C9D4DA;
  --deep:     #14313F;
  --ink:      #24424F;
  --muted:    #5E7683;

  --shadow-soft: 0 18px 50px -24px rgba(20, 49, 63, 0.30);
  --shadow-card: 0 12px 34px -20px rgba(20, 49, 63, 0.28);

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Пара шрифтов: Prata — антиква для заголовков, Fira Sans — весь остальной
     текст. У Prata в наборе только вес 400, поэтому везде, где ею набран
     заголовок, вес задан явно: иначе браузер рисует поддельный жирный. */
  --ff-display: "Fira Sans", system-ui, sans-serif;
  --ff-serif: "Prata", "Georgia", serif;
  --ff-body: "Fira Sans", system-ui, sans-serif;
  /* Мелкие капсовые подписи (рубрики, даты, единицы). Моноширинного в паре
     нет — держим их на Fira Sans, разрядка и капс дают нужную «техничность». */
  --ff-label: "Fira Sans", system-ui, sans-serif;

  --r: 16px;
  --r-lg: 26px;

  /* Плашка шапки: отступ от краёв экрана и её собственный радиус. Панель меню
     на планшете встаёт по этим же значениям, поэтому они здесь, а не в
     .site-header. */
  --plate-x: clamp(12px, 2.2vw, 28px);
  --plate-y: 12px;
  --r-plate: 24px;

  /* Полная высота, которую занимает шапка (отступ сверху + плашка): мобильная
     панель меню отступает на неё, чтобы не выезжать из-под логотипа. */
  --header-h: 80px;

  /* Elemental gradient used as the metallic shimmer accent */
  --shimmer: linear-gradient(100deg, var(--silver), #fff 42%, var(--gold) 70%, var(--silver));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Видимый focus для клавиатурной навигации (WCAG) */
:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 3px; border-radius: 2px; }

body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, blockquote { margin: 0; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--glacier); color: #fff; }

:focus-visible {
  outline: 2px solid var(--glacier-d);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Shared type helpers ---------- */
.eyebrow {
  font-family: var(--ff-label);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--glacier-d);
  margin-bottom: 1.1rem;
}
.eyebrow.light { color: rgba(255,255,255,0.85); }

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(2.6rem, 5vw, 4.2rem);
  text-align: center;
  padding: 0 var(--gutter);
}
.section-title {
  /* Референс: антиква капсом с разрядкой, спокойный размер (ТЗ п.13) */
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1C4B50;
}
.section-lede {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  --_pad: 0.95em 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: var(--_pad);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s, background 0.35s, color 0.35s;
  will-change: transform;
}
.btn-sm { --_pad: 0.7em 1.2em; font-size: 0.68rem; }
.btn-lg { --_pad: 1.1em 2.2em; font-size: 0.84rem; }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--glacier-d), var(--glacier));
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -20px rgba(62,122,152,.6); }

.btn-ghost { color: var(--ink); border-color: rgba(20,49,63,0.18); background: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: #fff; transform: translateY(-2px); }

.btn-outline { color: var(--glacier-d); border-color: rgba(62,122,152,0.4); }
.btn-outline:hover { background: var(--glacier-d); color: #fff; transform: translateY(-2px); }

/* ---------- <picture> ----------
   AVIF-обёртка не должна участвовать в раскладке: <picture> — обычный
   inline-бокс, и он разрывает цепочку height:100% между контейнером фото
   и самим <img>. display:contents убирает обёртку из дерева раскладки,
   поэтому все прежние правила для .el-photo, .path-scene img и прочих
   продолжают работать так, будто <img> лежит в родителе напрямую. */
picture { display: contents; }

/* ---------- Water thread signature ---------- */
.thread {
  position: absolute;
  top: var(--thread-top, 0px);
  left: 0;
  width: 100%;
  height: var(--thread-height, 0px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.82;
}
.thread-path {
  stroke-dasharray: var(--thread-length, 0);
  stroke-dashoffset: var(--thread-offset, 0);
  transition: stroke-dashoffset 0.15s linear;
  filter: drop-shadow(0 0 5px rgba(25,157,209,0.5));
}
/* Content blocks always sit ABOVE the water thread (z-index 1):
   the line lives in the air between blocks, never over cards or text. */
.section-head,
.elements-grid,
.path-steps,
.mineral-grid,
.mineral-note,
.trust-stats,
.trust-grid,
.docs-head,
.docs-grid,
.collection-lines,
.where-grid,
.contacts-grid {
  position: relative;
  z-index: 2;
}
/* ---------- Header ---------- */
/* Шапка — не полоса во всю ширину, а плашка, висящая с отступом от краёв.
   Так она читается отдельным предметом поверх видео первого экрана, а её
   скруглённый низ не режет кадр пополам. Отступ и радиус вынесены в
   переменные: их же берёт выезжающая панель меню, иначе на планшете панель
   и плашка встали бы по разным линиям. */
.site-header {
  position: fixed;
  inset: var(--plate-y) var(--plate-x) auto;
  z-index: 50;
  /* Три колонки, а не space-between: логотип и правая группа разной ширины,
     и при выключке по краям меню съезжало от центра плашки на четыре десятка
     пикселей. Крайние колонки равны, поэтому «auto» посередине всегда стоит
     ровно по оси. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 2rem);
  padding: 0.5rem 0.55rem 0.5rem clamp(0.85rem, 1.5vw, 1.4rem);
  border-radius: var(--r-plate);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px -20px rgba(20,49,63,0.5), 0 0 0 1px rgba(20,49,63,0.05);
  transition: background 0.4s, box-shadow 0.4s;
}
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(20,49,63,0.55), 0 0 0 1px rgba(20,49,63,0.06);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--deep); min-width: 0; }
.brand-mark { height: 40px; width: auto; display: block; }
.brand-col { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand-name {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-nav { display: flex; flex-wrap: nowrap; align-items: stretch; gap: clamp(0.1rem, 0.9vw, 0.7rem); }
.nav-item { position: relative; display: flex; }
/* Верхний уровень: пиктограмма над подписью. Прописная подпись вместо капса —
   в два яруса капс с разрядкой становится шире иконки и связка распадается на
   две несвязанные строки. */
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  position: relative;
  padding: 0.32rem 0.62rem;
  transition: color 0.3s ease, background 0.3s ease;
}
.nav-ico { display: block; color: var(--glacier-d); transition: color 0.3s, transform 0.35s cubic-bezier(.2,.7,.3,1); }
.nav-ico svg { display: block; width: 22px; height: 22px; }
.nav-text { display: inline-flex; align-items: center; gap: 0.26rem; }
.nav-link:hover,
.nav-item:hover > .nav-toggle,
.nav-toggle[aria-expanded="true"] {
  color: var(--deep);
  background: var(--paper-2);
}
/* Иконка приподнимается на наведении — единственное движение в плашке,
   поэтому подпись остаётся на месте и строка пунктов не «дышит». */
.nav-link:hover .nav-ico,
.nav-item:hover > .nav-toggle .nav-ico,
.nav-toggle[aria-expanded="true"] .nav-ico { transform: translateY(-2px); }
.nav-link[aria-current="page"] { color: var(--deep); }
.nav-caret {
  width: 5px;
  height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1);
}
.nav-toggle[aria-expanded="true"] .nav-caret { transform: translateY(0) rotate(-135deg); }

/* Подменю. visibility, а не display: анимация появления и отсутствие в
   фокусной последовательности, пока список закрыт. */
.nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0.85rem;
  min-width: 220px;
  padding: 0.5rem;
  list-style: none;
  background: rgba(251,252,254,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(20,49,63,0.08);
  border-radius: 14px;
  box-shadow: 0 22px 48px -26px rgba(20,49,63,0.45);
  opacity: 0;
  visibility: hidden;
  /* pointer-events дублирует visibility осознанно: прозрачный список всё ещё
     перехватывает клики, а visibility переключается с задержкой и в фоновой
     вкладке (где переходы заморожены) может не переключиться вовсе. */
  pointer-events: none;
  transform: translate(-50%, -8px);
  /* visibility — шагом, не интерполяцией: на открытии сразу, на закрытии с
     задержкой на длину анимации, чтобы список не исчезал до конца затухания. */
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.2,.7,.3,1), visibility 0s 0.28s;
}
/* Зазор между кнопкой и списком мышь пересекает «вслепую» — перекрываем его
   прозрачной полосой, иначе меню закрывается на полпути. */
.nav-sub::before {
  content: "";
  position: absolute;
  inset: -0.9rem 0 100% 0;
}
/* :focus-within здесь нет намеренно: после клика по кнопке фокус остаётся на
   ней, и правило держало бы список открытым — повторный клик не закрывал его.
   Клавиатуру ведёт JS через aria-expanded. */
.nav-toggle[aria-expanded="true"] + .nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.2,.7,.3,1), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > .nav-sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.2,.7,.3,1), visibility 0s;
  }
}
.nav-sub a {
  display: block;
  padding: 0.52rem 0.7rem;
  border-radius: 9px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s, background 0.25s;
}
.nav-sub a:hover,
.nav-sub a:focus-visible { color: var(--deep); background: rgba(25,157,209,0.09); }
.nav-sub a[aria-current="page"] { color: var(--deep); font-weight: 500; }

/* Бургер: только на узких экранах, ниже переключается в media-запросе. */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 0.35rem; color: var(--deep); }
.nav-toggle,
.nav-burger {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.burger-box { display: block; width: 22px; }
.burger-line {
  display: block;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.32s cubic-bezier(.2,.7,.3,1), opacity 0.2s;
}
.burger-line + .burger-line { margin-top: 5px; }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-line:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(0.45rem, 1vw, 0.9rem); }
/* Кнопка в плашке набрана строчными, как и подписи пунктов: капс с разрядкой
   рядом с «Источник» и «Контакты» выглядел бы заимствованным с другого сайта. */
.header-cta {
  --_pad: 0.85em 1.55em;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
}
/* Второй экземпляр той же кнопки лежит в конце меню и до появления бургера
   не показывается. */
.nav-cta { display: none; }
.lang-toggle {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border-radius: 100px;
  background: none;
  border: none;
  font-family: var(--ff-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.3s;
}
.lang-toggle:hover { background: var(--paper-2); }
.lang-opt { transition: color 0.3s; }
.lang-opt.is-active { color: var(--deep); font-weight: 500; }
.lang-sep { color: var(--silver); }
/* Текст только для скринридеров: остаётся в доступном имени, но не занимает
   места на экране. display:none и visibility:hidden не годятся — они убирают
   текст и из озвучки. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 1 · HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 6.5rem var(--gutter) 3rem;
  overflow: hidden;
  /* Air first: blue sky up top, warming to a soft horizon where fire rises */
  background: linear-gradient(178deg,
    #C7E0EC 0%, #D5E8F0 22%, #E6F1F2 46%, #F2F4EC 72%, #FBF6EE 100%);
}
/* Ambient sky: slow-drifting clouds behind the content (Air) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 18% at 16% 20%, rgba(255,255,255,0.92), transparent 70%),
    radial-gradient(28% 15% at 70% 14%, rgba(255,255,255,0.72), transparent 72%),
    radial-gradient(24% 13% at 44% 28%, rgba(255,255,255,0.66), transparent 70%);
  animation: skyClouds 44s ease-in-out infinite;
}
@keyframes skyClouds {
  0%,100% { transform: translateX(-1.6%); }
  50%     { transform: translateX(1.6%); }
}
.hero-topo {
  position: absolute;
  top: 0; right: 0;
  width: min(30vw, 420px);
  height: auto;
  color: rgba(62,122,152,0.28);
  z-index: 0;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.hero-copy { max-width: 470px; }
/* Связка первого экрана набрана треугольником: сверху имя, под ним две строки
   слогана, и каждая следующая строка длиннее предыдущей. Форма повторяет знак
   КМВ, поэтому строки центрованы — при выключке влево из треугольника
   получилась бы лесенка. Кегли подобраны так, чтобы ширины шли по возрастанию
   (имя короче первой строки слогана, та короче второй), и ни одна строка не
   переносилась: перенос ломает силуэт. */
.hero-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 3.1vw, 2.9rem);
  line-height: 1.34;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #1C4B50;
  text-align: center;
  overflow-wrap: break-word;
}
.hero-brand {
  display: block;
  margin-bottom: 0.34em;
  font-size: 1.42em;
  line-height: 1.08;
  letter-spacing: 0.05em;
  color: var(--deep);
}
.hero-line { display: block; }
.hero-line + .hero-line { margin-top: 0.15em; }
.hero-sub {
  margin: 1.6rem 0 0;
  max-width: 340px;
  font-size: 0.92rem;
  line-height: 1.75;
  /* Затемнён под контраст AA: абзац мелкий, ему нужны 4.5:1, а лежит он на
     светлом склоне. С новым кадром прежний #506169 давал 4.36. */
  color: #47585F;
}
.hero-cta { margin-top: 2.4rem; display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; }

/* Play button (reference "Узнать историю") */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: #1C4B50;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn-play-pin {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: #fff;
  background: #2A6A70;
  box-shadow: 0 10px 24px -10px rgba(28,75,80,0.55);
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s;
}
.btn-play-pin svg { width: 17px; height: 17px; margin-left: 2px; }
.btn-play:hover .btn-play-pin { transform: scale(1.08); box-shadow: 0 16px 32px -12px rgba(28,75,80,0.65); }
.btn-play-label { transition: color 0.3s; }
.btn-play:hover .btn-play-label { color: #2A6A70; }

/* Задний план: заснеженный хребет на закате */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg img,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Абсолютом, а не потоком: в портрете кадр становится полосой у нижней кромки,
   и без этого top/bottom там просто нечего было бы двигать. */
.hero-video { position: absolute; inset: 0; }
/* Лёгкий туман: слева плотнее (текст читается, WCAG AA),
   справа гора проглядывает, снизу растворение в фон страницы.
   Плотность слева подобрана под кадр заката: у него под заголовком лежит
   тёмный хребет, и на прежних 0.5 подзаголовок давал контраст 3.4 при
   требуемых 4.5. Справа граница не тронута — там кадр с бутылкой. */
.hero-fog {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(244,249,252,0.86) 0%, rgba(244,249,252,0.6) 34%, transparent 62%),
    linear-gradient(180deg, rgba(244,249,252,0.1) 0%, transparent 54%, rgba(247,247,242,0.22) 100%);
}
/* 4.5–6s · Огонь: тёплое золото сквозь дымку у основания — деликатно, без multiply */
.hero-warmth {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(70% 46% at 58% 102%, rgba(233,178,98,0.4), rgba(238,196,128,0.16) 46%, transparent 72%);
  filter: blur(6px);
}

/* Cinematic hero layers (0–6s narrative) */
.hero-clouds,
.hero-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-clouds {
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(40% 24% at 30% 30%, rgba(255,255,255,0.92), transparent 70%),
    radial-gradient(46% 28% at 66% 22%, rgba(255,255,255,0.75), transparent 72%),
    radial-gradient(38% 22% at 50% 16%, rgba(255,255,255,0.82), transparent 70%);
}
.hero-glint {
  z-index: 2;
  opacity: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(214,236,244,0.9) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 130% 0;
}
@keyframes cloudDrift {
  0%,100% { transform: translateX(-3%); }
  50%     { transform: translateX(3%); }
}
/* ---------- 2 · FOUR ELEMENTS ---------- */
.elements { padding: clamp(5rem, 9vw, 8rem) 0; }
/* Референс: подпись над фото, четыре колонки во всю ширину экрана */
.elements-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(4px, 0.6vw, 8px);
}
.el {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: opacity 0.5s ease;
}
/* Зоны появляются слева направо (ТЗ п.5.4) */
.elements-grid .el:nth-child(2) { transition-delay: 0.12s; }
.elements-grid .el:nth-child(3) { transition-delay: 0.24s; }
.elements-grid .el:nth-child(4) { transition-delay: 0.36s; }

.el-cap {
  text-align: center;
  padding: 0.4rem 0.9rem 1.5rem;
  color: var(--deep);
}
.el-cap h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #1C4B50;
  margin: 0.4rem 0 0.34rem;
}
/* Слоган стихии — короткий призыв, ради которого зону и запоминают.
   Стоит вплотную к названию (заголовок и слоган читаются одной строфой),
   набран антиквой и цветом самой стихии, чтобы не спорить с пояснением. */
/* Селектор с двумя классами — иначе общее правило `.el-cap p` ниже
   перебивает слоган по специфичности и красит его в служебный серый. */
.el-cap .el-slogan {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: 0.012em;
  color: var(--glacier-d);
  max-width: 230px;
  margin: 0 auto 0.2rem;
}
.el-air   .el-slogan { color: #2E6E8C; }
.el-ice   .el-slogan { color: #24657F; }
.el-earth .el-slogan { color: #3F6B4C; }
.el-fire  .el-slogan { color: #A4592A; }
.el-cap p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 230px;
  margin: 0 auto;
}
.el-icon {
  /* flex, а не grid: внутри <picture> с display:contents, поэтому в поток
     контейнера попадает сам <img>. С grid-template: 100%/100% он не влезал
     в единственный трек и уезжал вторым рядом — ниже контейнера, прямо
     на абзац (перекрытие 36–52px). */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 58px;
  margin: 0.1rem auto 0.85rem;
  filter: drop-shadow(0 1px 5px rgba(255,255,255,0.92));
}
/* max-*, а не 100%: у знаков разные пропорции (72×58, 72×63), и height:100%
   растягивало картинку до 61–66px вместо 58. */
.el-icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.el-photo-wrap {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 36vw, 540px);
  margin-top: auto; /* фото всех зон выровнены по низу ряда, подписи — по верху */
}
.el-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(.2,.7,.3,1);
}
/* Лёгкий цветовой тинт стихии (ТЗ п.5.1) */
.el-photo-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.el-air   .el-photo-wrap::before { background: linear-gradient(180deg, rgba(178,214,231,0.24), transparent 55%); }
.el-ice   .el-photo-wrap::before { background: linear-gradient(180deg, rgba(92,156,190,0.22), transparent 55%); }
.el-earth .el-photo-wrap::before { background: linear-gradient(180deg, rgba(48,132,102,0.18), transparent 55%); }
.el-fire  .el-photo-wrap::before { background: linear-gradient(180deg, rgba(216,132,58,0.2), transparent 55%); }
/* Земля: медленное движение света по камням (ТЗ п.5.4) */
.el-earth .el-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,252,238,0.32) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 135% 0;
  animation: earthLight 11s ease-in-out infinite;
}
@keyframes earthLight {
  0%, 15% { background-position: 135% 0; }
  60%, 100% { background-position: -35% 0; }
}
/* Огонь: дыхание тёплого свечения и пара (ТЗ п.5.4) */
.el-fire .el-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(72% 58% at 50% 88%, rgba(238,180,110,0.42), transparent 76%);
  animation: firePulse 7s ease-in-out infinite;
}
@keyframes firePulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
/* Hover: активная зона честно расширяется (ТЗ п.5), остальные мягко приглушаются */
@media (hover: hover) and (min-width: 861px) {
  .elements-grid { display: flex; }
  .elements-grid .el {
    flex: 1 1 0;
    min-width: 0;
    transition:
      opacity 1s cubic-bezier(.22,.61,.36,1),
      transform 1s cubic-bezier(.22,.61,.36,1),
      flex-grow 0.7s cubic-bezier(.2,.7,.3,1);
  }
  /* стаггер каскада — только для появления, hover-расширение без задержки */
  .elements-grid .el:nth-child(2) { transition-delay: 0.12s, 0.12s, 0s; }
  .elements-grid .el:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s; }
  .elements-grid .el:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s; }
  .elements-grid:hover .el { opacity: 0.65; }
  .elements-grid .el:hover { opacity: 1; flex-grow: 1.5; }
  .el:hover .el-photo { transform: scale(1.07); }
}
.el:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 4px; }

/* ---------- 3 · WATER'S PATH ---------- */
.path {
  position: relative;
  height: 520vh;
  height: 520svh;
  padding: 0;
  background: #dfe9ec;
  isolation: isolate;
}
.path-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.path-scenes,
.path-scene,
.path-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.path-scenes {
  z-index: 0;
  overflow: hidden;
  background: #dce8ed;
}
.path-scenes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(251,247,242,0.78) 0%, transparent 13%, transparent 86%, rgba(248,250,247,0.78) 100%),
    linear-gradient(90deg, rgba(9,29,35,0.16), transparent 23%, transparent 77%, rgba(9,29,35,0.16));
}
.path-scene {
  margin: 0;
  opacity: var(--scene-opacity, 0);
  transform: translate3d(0, var(--scene-y, 0px), 0) scale(var(--scene-scale, 1.04));
  transform-origin: center;
  will-change: opacity, transform;
  transition: opacity 0.16s linear;
}
.path-scene:first-child { --scene-opacity: 1; }
.path-scene img {
  object-fit: cover;
  object-position: center;
}
.path-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 38% 82% at 50% 51%, rgba(248,252,251,0.92) 0%, rgba(245,250,249,0.78) 48%, rgba(242,248,247,0.28) 72%, transparent 100%);
}
.path-content {
  position: relative;
  z-index: 3;
  width: min(100%, 860px);
  max-height: 100%;
  padding: clamp(4.9rem, 9vh, 6.8rem) var(--gutter) clamp(1.5rem, 4vh, 3rem);
}
.path .section-head {
  margin-bottom: clamp(1rem, 2.5vh, 1.8rem);
}
.path .eyebrow {
  margin-bottom: 0.65rem;
  color: #315f6c;
  text-shadow: 0 1px 12px rgba(255,255,255,0.8);
}
.path .section-title {
  color: #173f49;
  text-shadow: 0 1px 18px rgba(255,255,255,0.92);
}
.path .section-lede {
  margin-top: 0.75rem;
  color: #3b5960;
  text-shadow: 0 1px 12px rgba(255,255,255,0.9);
}
.path-timeline {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
}
.path-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* --- animated water thread --- */
.path-line {
  position: absolute;
  z-index: 2;
  /* Ровно центр кружка: 36px / 2. Иначе на входе и выходе из кружка
     нитка даёт заметный излом в один пиксель. */
  left: 18px;
  top: 1.95rem;
  bottom: 2.2rem;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(38,92,107,0.2);
  overflow: visible;
}
.path-line-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--flow, 0%);
  border-radius: 3px;
  background: linear-gradient(to bottom, #9cc6da, var(--glacier), var(--moss), var(--ember), var(--moss-d));
  box-shadow: 0 0 11px rgba(94,177,208,0.6);
  transition: height 0.18s linear;
}
.path-drop {
  position: absolute;
  left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 35% 30%, #eaf6fb, var(--glacier));
  transform: rotate(45deg);
  top: var(--flow, 0%);
  margin-top: -5.5px;
  opacity: 0;
  box-shadow: 0 0 8px rgba(111,168,196,0.7);
  transition: top 0.35s ease-out, opacity 0.3s ease;
}
.path-steps.flowing .path-drop { opacity: 1; }

.path-step {
  position: relative;
  /* Выше нитки (у неё z-index 2): кружки стихий непрозрачные, и линия
     должна уходить под них, а не перечёркивать. */
  z-index: 3;
  display: flex;
  gap: 1.8rem;
  min-height: clamp(60px, 7.5vh, 76px);
  padding: clamp(0.55rem, 1.25vh, 0.85rem) 0 clamp(0.55rem, 1.25vh, 0.85rem) 3.4rem;
}
.path-dot {
  position: absolute;
  left: 0;
  top: clamp(0.65rem, 1.35vh, 0.95rem);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* Непрозрачная заливка, а не стекло: сквозь полупрозрачный кружок
     просвечивала и нитка, и фотография ущелья. Неактивные притушены не
     прозрачностью, а холодным оттенком — иначе сквозь них снова видно. */
  background: #f2f7fa;
  color: var(--glacier);
  border: 2px solid rgba(62,122,152,0.28);
  box-shadow: 0 2px 14px rgba(20,49,63,0.12);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}
.path-ic {
  width: 19px; height: 19px;
  opacity: 0.55;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.path-ic-snowflake {
  width: 22px;
  height: 22px;
}
.path-step.is-active .path-dot {
  transform: scale(1.12);
  border-color: currentColor;
  background: #fff;
  box-shadow: 0 6px 22px rgba(20,49,63,0.16), 0 0 0 5px rgba(111,168,196,0.18);
}
.path-step.is-active .path-ic { opacity: 1; }
/* Притухание пройденных и будущих шагов живёт на тексте, а не на всём
   шаге: opacity на <li> делала полупрозрачным и кружок, и нитка
   просвечивала сквозь него. */
.path-step .path-body { opacity: 0.42; transition: opacity 0.45s ease, transform 0.4s ease; }
.path-step.is-past .path-body { opacity: 0.62; }
.path-step.is-active .path-body { opacity: 1; }
/* Активный шаг подаётся вперёд текстом, а не всей строкой: сдвинь строку —
   и кружок съедет с нитки, а она теперь уходит под него и излом виден. */
.path-step[data-stage="air"]    { color: #7fb3cf; }
.path-step[data-stage="ice"]    { color: var(--glacier); }
.path-step[data-stage="earth"]  { color: var(--moss); }
.path-step[data-stage="fire"]   { color: var(--ember); }
.path-step[data-stage="spring"] { color: var(--moss-d); }
.path-step[data-stage="fire"].is-active  .path-dot { box-shadow: 0 6px 18px rgba(208,138,69,0.24), 0 0 0 5px rgba(208,138,69,0.2); }
.path-step[data-stage="spring"].is-active .path-dot { box-shadow: 0 6px 18px rgba(63,107,76,0.22), 0 0 0 5px rgba(94,139,106,0.2); }
.path-step.is-active .path-ic { animation: dotPop 0.6s ease; }
@keyframes dotPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.path-body {
  min-width: 0;
  padding-top: 0.15rem;
  transition: transform 0.4s ease;
}
.path-step.is-active .path-body { transform: translateX(6px); }
.path-body h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, 2vw, 1.62rem);
  line-height: 1.15;
  color: #153d47;
  margin-bottom: 0.2rem;
  text-shadow: 0 1px 12px rgba(255,255,255,0.95);
}
.path-body p {
  color: #3e565c;
  font-size: clamp(0.82rem, 1.12vw, 0.98rem);
  line-height: 1.45;
  text-shadow: 0 1px 10px rgba(255,255,255,0.94);
}

@media (max-width: 767px) {
  .path { height: 470vh; height: 470svh; }
  .path-content { padding-top: 4.7rem; padding-bottom: 1rem; }
  .path-veil {
    background: radial-gradient(ellipse 74% 86% at 50% 50%, rgba(248,252,251,0.94) 0%, rgba(245,250,249,0.8) 52%, rgba(242,248,247,0.24) 82%, transparent 100%);
  }
  .path-scenes::after {
    background:
      linear-gradient(180deg, rgba(251,247,242,0.7) 0%, transparent 12%, transparent 88%, rgba(248,250,247,0.72) 100%),
      linear-gradient(90deg, rgba(9,29,35,0.18), transparent 18%, transparent 82%, rgba(9,29,35,0.18));
  }
  .path-scene[data-scene="fire"] img { object-position: 64% center; }
  .path-scene[data-scene="spring"] img { object-position: 56% center; }
  .path .section-head {
    max-width: none;
    margin: 0 0 0.65rem;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }
  .path .eyebrow { margin-bottom: 0.45rem; }
  .path .section-title { font-size: 1.38rem; }
  .path .section-lede { margin-top: 0.55rem; font-size: 0.82rem; line-height: 1.45; }
  .path-step {
    min-height: 58px;
    padding: 0.45rem 0 0.45rem 3rem;
  }
  .path-dot { width: 32px; height: 32px; top: 0.5rem; }
  .path-line { left: 16px; top: 1.5rem; bottom: 1.8rem; width: 2px; }
  .path-body h3 { font-size: 1.03rem; overflow-wrap: anywhere; }
  .path-body p { font-size: 0.76rem; line-height: 1.35; overflow-wrap: anywhere; }
}

@media (max-height: 700px) {
  .path .section-head { margin-bottom: 0.45rem; }
  .path .section-lede { display: none; }
  .path-step { min-height: 54px; padding-top: 0.36rem; padding-bottom: 0.36rem; }
  .path-dot { top: 0.4rem; }
  .path-content { padding-top: 4.4rem; padding-bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .path-line-fill { transition: none; }
  .path-drop { display: none; }
  .path-scene, .path-step, .path-dot, .path-ic, .path-body { transition: none; }
  .path-step .path-body { transition: none; }
  .path-step.is-active .path-ic { animation: none; }
}

/* ---------- 4 · MINERALS ---------- */
.minerals { padding: clamp(5rem, 9vw, 8rem) 0; }
/* Кнопка «дочитать на отдельной странице» под секцией — секций с таким
   продолжением уже две (состав воды, где купить), поэтому класс общий. */
.section-cta {
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
/* Референс: камень слева кругом, символ + название + текст справа, без коробок */
.mineral-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2rem 2.4rem;
}
.mineral {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 0.9rem;
  align-items: center;
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.mineral:hover { transform: translateY(-5px); }
/* Камни как «вырезанные» PNG: белый студийный фон растворяется
   в фоне страницы (multiply) — без кругов и рамок */
.mineral-photo {
  grid-row: 1;
  width: 140px;
  height: 100px;
  /* Подложка цвета страницы: multiply смешивает белый фон фото ровно
     в этот цвет в ЛЮБОМ контексте наложения (z-index/hover/reveal) */
  background: var(--paper);
}
.mineral-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* белый фон фото сливается со страницей */
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.mineral:hover .mineral-photo img { transform: scale(1.07); }
.mineral-sym {
  display: inline-block;
  margin: 0;
  font-family: var(--ff-serif);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  background: var(--shimmer);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 6s linear infinite;
}
.mineral.cold .mineral-sym { --shimmer: linear-gradient(100deg, var(--silver), #fff 42%, var(--glacier) 72%, var(--silver)); }
.mineral.warm .mineral-sym { --shimmer: linear-gradient(100deg, var(--silver), #fff 42%, var(--gold) 70%, var(--ember) 90%); }
@keyframes sheen { to { background-position: 200% center; } }
.mineral h3 {
  grid-column: 1 / -1;
  font-family: var(--ff-label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0.9rem 0 0.35rem;
}
.mineral p { grid-column: 1 / -1; font-size: 0.82rem; line-height: 1.55; color: var(--muted); margin: 0; }
.mineral-note {
  max-width: 760px;
  margin: 2.4rem auto 0;
  padding: 0 var(--gutter);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}
/* ---------- 5 · ORIGIN ---------- */
/* Референс: светлая панель слева поверх фото ручья */
.origin {
  position: relative;
  /* Фото-блок целиком закрывает голубую нить: река уходит «под землю» под
     фотографией и снова показывается ниже, в «Доверии и качестве». Иначе
     линия чертит поверх ручья на фото — два русла спорят друг с другом. */
  z-index: 2;
  min-height: 72vh;
  display: grid;
  align-items: center;
  justify-items: start;
  text-align: left;
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(244,249,252,0.42) 0%, rgba(244,249,252,0.06) 55%),
    url("../assets/photos/origin-stream.webp") center/cover no-repeat;
  overflow: hidden;
}
.origin-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 40% at 70% 80%, rgba(217,184,118,0.22), transparent 70%),
    radial-gradient(40% 30% at 20% 20%, rgba(143,195,216,0.2), transparent 70%);
  animation: steam 12s ease-in-out infinite;
}
/* Карточка ужата под треугольник заголовка: её ширину задаёт самая длинная,
   нижняя строка, и лишнего поля справа больше нет. Текст внутри центрован —
   при выключке влево из треугольника получилась бы лесенка. */
.origin-inner {
  position: relative;
  z-index: 2;
  max-width: 460px;
  background: rgba(251,252,254,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 2.8vw, 2.4rem);
  box-shadow: 0 30px 60px -30px rgba(20,49,63,0.35);
  text-align: center;
}
.origin .eyebrow.light { color: var(--glacier-d); }
.origin-title { color: #1C4B50; }
.origin-fact { color: var(--muted) !important; }
/* Стрелка-ссылка (референс «читать подробнее →») */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1C4B50;
}
.link-arrow::after { content: "→"; font-size: 1rem; transition: transform 0.35s cubic-bezier(.2,.7,.3,1); }
.link-arrow:hover::after { transform: translateX(6px); }
/* Три строки, каждая следующая длиннее предыдущей — тот же треугольник, что и
   на первом экране. Кегль здесь заметно мельче прежнего: строка должна
   уместиться целиком, а перенос ломает фигуру. */
.origin-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: calc(clamp(1.02rem, 1.55vw, 1.3rem) * var(--tri-scale, 1));
  line-height: 1.34;
  margin: 0.5rem 0 1.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.origin-line { display: block; }
/* Латиница шире кириллицы: при общем кегле нижняя строка вылезала из карточки. */
html[lang="en"] .origin-title { --tri-scale: 0.88; }
/* Абзац уже основания треугольника — иначе фигура тонет в прямоугольнике текста. */
.origin-fact {
  max-width: 290px;
  margin: 0 auto 1.6rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
}
/* На телефоне кегль считается от ширины экрана: на 320px нижняя строка
   треугольника при общем кегле переносилась и фигура рассыпалась. Поля
   карточки здесь же ужимаются — каждый пиксель уходит в кегль. */
@media (max-width: 767px) {
  .origin-inner { padding: 1.3rem 1.1rem 1.5rem; }
  .origin-title { font-size: calc(clamp(0.8rem, 4.15vw, 1.1rem) * var(--tri-scale, 1)); }
  /* Здесь основание треугольника уже 290px, поэтому абзац меряется от карточки.
     Кегль абзаца тоже ниже: связка на телефоне мельче, и при общем размере
     заголовок и текст читались бы одинаково. */
  .origin-fact { max-width: 84%; font-size: 0.84rem; }
  /* На 320px подпись ссылки переносилась, и стрелка оставалась одна во второй
     строке — как будто оторвалась от текста. Ужимаем кегль и разрядку. */
  .origin .link-arrow { font-size: 0.68rem; letter-spacing: 0.1em; }
}

/* ---------- 1.5 · ABOUT COMPANY ---------- */
.about {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
}
.about-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-lede {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--deep);
  margin: 1rem 0 1.2rem;
}
.about-mission { color: var(--muted); font-size: 1rem; line-height: 1.6; }
.about-facts {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.about-fact {
  padding: 1.4rem 1.2rem;
  background: #fff;
  border: 1px solid rgba(20,49,63,0.06);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
}
.about-fact-num {
  display: block;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--deep);
}
.about-fact-cap {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

/* ---------- 7.5 · WHERE TO BUY ---------- */
.where { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.where-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.dist {
  padding: 2rem 1.8rem;
  background: linear-gradient(180deg, #ffffff, #f6f9fc);
  border: 1px solid rgba(20,49,63,0.06);
  border-left: 3px solid var(--glacier-d);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s;
}
.dist:hover { transform: translateY(-4px); }
.dist h3 {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--deep);
  margin: 0 0 0.9rem;
}
.dist-line { margin: 0.3rem 0; font-size: 0.98rem; color: var(--muted); }
.dist-line a { color: var(--glacier-d); }
.dist-line a:hover { text-decoration: underline; }

/* ---------- 7.6 · CONTACTS ---------- */
.contacts {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}
.contacts-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 1.4rem;
  align-items: stretch;
}
.contact-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: #fff;
  border: 1px solid rgba(20,49,63,0.07);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Полоска сверху — тот же приём, что у карточек наград: холодная вода слева,
   тёплое золото справа. */
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--glacier), var(--gold));
  opacity: 0.85;
}
/* Карточки тянутся по высоте самой длинной — у «прямой связи» строк меньше,
   поэтому кнопки соцсетей прижаты к низу, а не висят в середине пустоты. */
.contact-card--reach {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #fff 45%, var(--paper-2));
}
.contact-card-label {
  display: block;
  font-family: var(--ff-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.15rem;
}

/* --- левая карточка: телефон и почта крупно --- */
.contact-lead { margin: 0 0 1.5rem; }
.contact-lead-label {
  display: block;
  font-family: var(--ff-label);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.contact-lead-link {
  display: inline-block;
  font-family: var(--ff-serif);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  line-height: 1.25;
  color: var(--deep);
  word-break: break-word;
  border-bottom: 1px solid rgba(62,122,152,0.28);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.contact-lead-link:hover { color: var(--glacier-d); border-color: var(--glacier-d); }
.contact-social { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 1.6rem; }
.contact-chip {
  font-family: var(--ff-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glacier-d);
  padding: 0.5rem 1.05rem;
  border: 1px solid rgba(62,122,152,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.contact-chip:hover { color: #fff; background: var(--glacier-d); border-color: var(--glacier-d); }

/* --- правая карточка: реквизиты строками --- */
/* Колонки без зазора: разделитель рисуется border-top на самих ячейках, и с
   column-gap линия под парой «производитель — ИНН» была бы разорвана. Отступ
   между колонками даёт padding внутри второй ячейки. */
.contact-rows {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contact-row { padding: 0.85rem 0; border-top: 1px solid rgba(20,49,63,0.08); }
.contact-row--wide { grid-column: 1 / -1; }
.contact-row--pair:first-child { border-top: 0; padding-top: 0; }
.contact-row--pair:first-child + .contact-row--pair {
  border-top: 0;
  padding-top: 0;
  padding-left: 1.4rem;
}
.contact-row dt {
  display: block;
  font-family: var(--ff-label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.contact-row dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--deep);
}
.contact-num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* ---------- 6 · TRUST ---------- */
.trust { padding: clamp(5rem, 9vw, 8rem) 0; }

/* proof numbers */
.trust-stats {
  list-style: none;
  max-width: var(--wrap);
  margin: 0 auto clamp(2.6rem, 5vw, 4rem);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}
.stat {
  /* Плашка стоит поверх голубой нити, поэтому фон полностью непрозрачный —
     иначе река просвечивает сквозь цифры. */
  position: relative;
  text-align: center;
  padding: 1.6rem 0.8rem;
  border-radius: var(--r);
  background: linear-gradient(180deg, #ffffff, #f4f8fb);
  border: 1px solid rgba(20,49,63,0.08);
}
.stat-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2em;
  font-family: var(--ff-serif);
  font-weight: 400;
  line-height: 1;
  color: var(--deep);
}
.stat-val { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.stat-unit {
  font-family: var(--ff-label);
  /* Вес задаём явно: .stat-num выше просит 400 у антиквы, а подпись единицы
     должна читаться плотнее — 500 у Fira Sans настоящий, не поддельный. */
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.stat-cap {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.trust-grid {
  list-style: none;
  counter-reset: none;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
/* process line: connect the 01→05 chain in the water-thread spirit */
.trust-grid { position: relative; }
.trust-card {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f6f9fc);
  border: 1px solid rgba(20,49,63,0.06);
  border-radius: var(--r);
  padding: 2.2rem 1.8rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.4s;
}
/* connector dot + flowing link between consecutive cards */
.trust-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 2.5rem;
  right: -0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(217,184,118,0.18);
}
.trust-card:last-child::after,
.trust-card:nth-child(3)::after { display: none; }
@media (max-width: 1023px) { .trust-card::after { display: none; } }
.trust-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--shimmer);
  background-size: 200% auto;
  animation: sheen 7s linear infinite;
}
.trust-card:hover { transform: translateY(-5px); }
.trust-num {
  font-family: var(--ff-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  /* Деликатный перелив серебра и золота (ТЗ п.9) */
  background: linear-gradient(100deg, #b99b55, var(--gold) 35%, #efe3c4 50%, var(--gold) 65%, #b99b55);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}
.trust-card h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  color: var(--deep);
  margin: 0.5rem 0 0.7rem;
}
.trust-card p { color: var(--muted); font-size: 0.96rem; }
.trust-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--glacier-d);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  position: relative;
  transition: color 0.4s;
}
/* Серебристо-золотая линия проявляется под ссылкой при наведении (ТЗ п.9) */
.trust-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--shimmer);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.4s;
  animation: sheen 5s linear infinite;
}
.trust-link:hover::after { opacity: 1; }

/* Короткий живой взгляд на производство: видео не спорят с карточками пути
   качества, а продолжают их одной спокойной лентой с тем же ритмом и рамкой. */
.production-media {
  max-width: var(--wrap);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding: 0 var(--gutter);
}
.production-media-head { max-width: 42rem; }
.production-media-head h3 {
  margin: 0.35rem 0 0.85rem;
  color: var(--deep);
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.1;
}
.production-media-head > p:last-child { color: var(--muted); max-width: 38rem; }
.production-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(1.6rem, 3vw, 2.5rem);
}
.production-video {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(20,49,63,0.1);
  border-radius: 1rem;
  background: #e7f0f5;
  box-shadow: 0 1rem 2.5rem rgba(16,55,77,0.08);
}
.production-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 31rem;
  object-fit: cover;
  background: #17384c;
}
.production-video figcaption {
  padding: 0.85rem 1rem 0.95rem;
  color: var(--deep);
  font-family: var(--ff-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .production-videos { grid-template-columns: repeat(3, minmax(10rem, 1fr)); overflow-x: auto; padding-bottom: 0.5rem; }
  .production-video video { max-height: 22rem; }
}

/* documents & certificates */
.trust-docs {
  max-width: var(--wrap);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0 var(--gutter);
}
.docs-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--deep);
  text-align: center;
  margin: 0 0 2rem;
}
/* padding: 0 обязателен: у <ul> браузер сам держит 40px отступа слева под
   маркеры, list-style его не снимает. Из-за этих 40px сетка документов стояла
   правее всей остальной страницы, а на 320px карточка вылезала за экран — и
   вся страница уезжала вбок на 12px. */
.docs-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
}
.doc { list-style: none; }
.doc-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  align-items: center;
  height: 100%;
  padding: 1.3rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(20,49,63,0.07);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s, box-shadow 0.35s;
}
.doc-link:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(20,49,63,0.3); }
.doc-link:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 3px; }
.doc-mark {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(217,184,118,0.16);
  color: var(--gold);
  font-size: 1rem;
  font-weight: 700;
  position: relative;
}
/* Тонкое серебристо-золотое кольцо вокруг иконки документа (ТЗ п.9) */
.doc-mark::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 1px;
  background: var(--shimmer);
  background-size: 200% auto;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: sheen 8s linear infinite;
  opacity: 0.7;
}
.doc-mark--pdf { font-size: 0.58rem; letter-spacing: 0.04em; }
.doc-name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--deep);
}
.doc-desc { font-size: 0.82rem; line-height: 1.35; color: var(--muted); }

/* ---------- 7 · COLLECTION ---------- */
.collection {
  padding: clamp(5rem, 9vw, 8rem) 0;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}
/* Каталог собран не сеткой из девяти карточек, а разворотами по линейкам:
   «Целебная» и «Питьевая» идут друг под другом, у каждой своя витрина. Девять
   бутылок в один ряд читались размерной линейкой, а не двумя семействами. */
.collection-lines {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(3.5rem, 8vw, 7rem);
}
/* Референс: чистые бутылки без карточек-коробок */
.product {
  background: none;
  border: 0;
  padding: 0.6rem 0.4rem 1rem;
  text-align: center;
  transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.product:hover { transform: translateY(-6px); }
/* Ниша под товаром: мягкое пятно на тон глубже фона секции. Карточек-коробок
   референс не допускает, но и без опоры бутылка висит в пустоте — пятно без
   границ даёт ей и объём, и контраст по краям. Радиус подобран так, чтобы
   прозрачность добиралась до нуля внутри бокса: overflow:hidden обрезал бы
   пятно по прямоугольнику, а вместе с ним и всю мягкость. */
.product-photo {
  position: relative;
  height: 265px;
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(64% 52% at 50% 60%,
    rgba(62,122,152,0.30) 0%, rgba(62,122,152,0.12) 55%, rgba(62,122,152,0) 82%);
}
/* Блик, пробегающий по бутылке при наведении (ТЗ п.10) */
.product-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 44%, rgba(255,255,255,0.55) 50%, transparent 56%);
  background-size: 260% 100%;
  background-position: 135% 0;
}
.product:hover .product-photo::after { animation: productGloss 1.1s ease; }
@keyframes productGloss {
  from { background-position: 135% 0; }
  to   { background-position: -35% 0; }
}
/* Все снимки бутылок сведены к одной высоте в 815 px, и в боксе они тоже
   показаны в одну высоту: витрина — ровный ряд, а не размерная линейка. */
.product-photo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* Упаковка шире бутылки: при height:100% её обрезает max-width, и внутри
     бокса остаётся пустое поле. object-position ставит все кадры на одну
     линию низа, чтобы при переключении товар не «подпрыгивал». */
  object-position: center bottom;
  filter: drop-shadow(0 18px 22px rgba(20,49,63,0.16));
  transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.product[data-product="pityevaya-pet-15-gas"] .product-photo img[src*="1.5gaz"] {
  height: 108%;
  max-width: none;
}
.product:hover .product-photo img { transform: translateY(-7px) rotate(2.5deg) scale(1.03); }
/* Кадры одной карточки: показан один, остальные сняты с потока — иначе
   lazy-загрузка потянула бы все три десятка фото каталога сразу. */
.product-photo .pshot { display: none; }
/* Сам <picture> — коробка в полную высоту бокса: без неё height:100% у img
   упирается в родителя высотой auto, и широкая упаковка вылезает за 265 px. */
.product-photo .pshot.is-on {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .product-photo .pshot.is-on img { animation: pshotIn 0.3s ease; }
}
@keyframes pshotIn { from { opacity: 0; } to { opacity: 1; } }
/* Стрелки по краям фото. На мыши всплывают при наведении на карточку —
   чтобы в спокойном состоянии витрина оставалась чистой; на тач-устройствах
   наведения нет, поэтому там они видны всегда (медиазапрос ниже). */
.pnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--glacier-d);
  background: rgba(255,255,255,0.82);
  box-shadow: 0 2px 10px rgba(20,49,63,0.14);
  opacity: 0;
  transition: opacity 0.3s, background 0.3s, box-shadow 0.3s;
}
.pnav svg { width: 18px; height: 18px; }
.pnav-prev { left: 2px; }
.pnav-next { right: 2px; }
.pnav-next svg { transform: rotate(180deg); }
.product:hover .pnav,
.product:focus-within .pnav { opacity: 1; }
.pnav:hover { background: #fff; box-shadow: 0 4px 14px rgba(20,49,63,0.2); }
.pnav:focus-visible { opacity: 1; outline: 2px solid var(--glacier-d); outline-offset: 2px; }
@media (hover: none) {
  .pnav { opacity: 1; }
}
/* Точки переключения кадров. Сама точка — 8 px, но кнопка вокруг неё
   22 × 22, чтобы попадать пальцем. */
.product-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Восемь точек по 22 px — это 176 px, ровно в колонку каталога на десктопе
     (182 px). С зазором в 1 px ряд выходил на пиксель шире и последняя точка
     срывалась на вторую строку. Сами точки внутри кнопки по 8 px, так что
     зазор тут ничего не держит. */
  gap: 0;
  margin: -0.9rem 0 -0.2rem;
}
.pdot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pdot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(62,122,152,0.24);
  transition: background 0.3s, transform 0.3s;
}
.pdot:hover::before { background: rgba(62,122,152,0.5); }
.pdot.is-on::before { background: var(--glacier-d); transform: scale(1.35); }
.pdot:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 1px; border-radius: 50%; }
/* Уровень заголовка карточки зависит от вложенности: на catalog.html «Каталог» —
   это h1, название линейки h2, поэтому бутылка внутри линейки h3. Если секция
   когда-нибудь переедет внутрь h2, лестница сдвинется на ступень. Вид у всех
   уровней одинаковый, поэтому стилизуем оба. */
.product h2,
.product h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  /* Дефолтный отступ у h2 и h3 разный (0.83em против 1em), а карточки всю
     жизнь верстались под h3 — фиксируем его явно, чтобы смена уровня не
     сдвинула сетку. */
  margin: 1.02rem 0;
}
.product h2 em,
.product h3 em { font-style: normal; color: var(--glacier-d); }
.product-type {
  font-family: var(--ff-label);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0.4rem 0 1.4rem;
}

/* ---------- 7.1 · Линейка каталога (разворот) ----------
   Один разворот: витрина с бутылками слева, название и описание справа.
   Название вынесено в отдельную ячейку сетки, а не убрано внутрь правой
   колонки: на узком экране колонки складываются в одну, и оно должно встать
   над витриной, а описание с кнопкой — под ней. */
.line-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "stage title"
    "stage copy";
  align-items: center;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: 1.3rem;
}
.line-title {
  grid-area: title;
  align-self: end;
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1C4B50;
}
/* Слова названия — по строке на каждое, второе выключено вправо: так набрана
   шапка линейки в референсе, и связка из двух слов держится блоком, а не
   расплывается строкой. */
.line-title span { display: block; }
.line-title span + span { text-align: right; color: var(--glacier-d); }
.line-copy { grid-area: copy; align-self: start; }
.line-text {
  margin: 0 0 1.6rem;
  max-width: 42ch;
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink);
}

/* Витрина. Полоса прокручивается сама: scroll-snap даёт и свайп пальцем, и
   колесо, и клавиатуру; main.js только выясняет, кто оказался в центре, и
   переставляет на него плашку, точки и кнопку «Купить». */
.line-stage {
  grid-area: stage;
  min-width: 0;
  --stage-item: 58%;
}
.stage-view {
  position: relative;   /* от неё main.js считает offsetLeft бутылок */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stage-view::-webkit-scrollbar { display: none; }
.stage-track { display: flex; min-width: 0; }
/* Edge spacers are required: without them the first and last bottles cannot
   be brought to the center. Use real flex spacers instead of margins because
   some browsers exclude the last item's margin from scrollWidth; that made
   1.5 l and 5 l snap back to the previous volume. */
.stage-track::before,
.stage-track::after {
  content: "";
  flex: 0 0 var(--stage-edge, calc((100% - var(--stage-item)) / 2));
  min-width: var(--stage-edge, calc((100% - var(--stage-item)) / 2));
  pointer-events: none;
}
.stage-item:first-child { margin-left: 0; }
.stage-item:last-child { margin-right: 0; }
.stage-item {
  flex: 0 0 var(--stage-item);
  width: var(--stage-item);
  min-width: 0;
  max-width: var(--stage-item);
  box-sizing: border-box;
  scroll-snap-align: center;
  position: relative;
  opacity: 0.38;
  transform: scale(0.62);
  transform-origin: center bottom;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.2,.7,.3,1);
}
/* Подскок карточки от .product внутри витрины лишний: он сбивал бы масштаб
   уменьшенных соседей. Наведение здесь ничего не двигает. */
.stage-item:hover { transform: scale(0.62); }
.stage-item.is-on,
.stage-item.is-on:hover { opacity: 1; transform: none; }
.stage-item:not(.is-on) { cursor: pointer; }
/* У соседей стрелки и точки кадров прятать нужно, но не выкидывать из потока:
   иначе при переключении витрина меняла бы высоту. */
.stage-item:not(.is-on) .pnav,
.stage-item:not(.is-on) .product-dots { visibility: hidden; }
.stage-item .product-photo {
  min-width: 0;
  height: clamp(250px, 29vw, 420px);
  margin-bottom: 1.1rem;
}

/* Плашка с литражом — та же белая «пилюля», что у бутылки в референсе: висит
   у горлышка справа и всплывает только у той бутылки, что стоит в центре. */
.stage-vol {
  position: absolute;
  z-index: 3;
  top: 7%;
  right: 2%;
  display: inline-block;
  text-align: left;
  padding: 0.4rem 0.95rem 0.5rem;
  border-radius: 27px;
  background: #fff;
  box-shadow: 0 12px 28px -14px rgba(20,49,63,0.5);
  color: var(--glacier-d);
  font-family: var(--ff-label);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.stage-item.is-on .stage-vol { opacity: 1; transform: none; }
.vol-num { font-size: 1.35rem; font-weight: 700; }
.vol-unit { font-size: 1.35rem; font-weight: 400; margin-left: 0.16em; }
.vol-sub {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Ряд плашек под витриной: и указатель, и переключатель — так же, как полоса
   миниатюр в референсе, только литражом вместо картинок. Для линейки, где
   бутылки различаются одним числом, число и есть самая понятная миниатюра. */
.stage-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.pick {
  padding: 0.42rem 0.95rem 0.5rem;
  border: 1px solid rgba(20,49,63,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.66);
  color: var(--ink);
  font-family: var(--ff-label);
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.pick .vol-num,
.pick .vol-unit { font-size: 0.95rem; }
.pick .vol-num { font-weight: 600; }
.pick .vol-sub { margin-top: 0.22rem; font-size: 0.56rem; }
.pick:hover { background: #fff; border-color: rgba(20,49,63,0.3); }
.pick.is-on {
  background: var(--glacier-d);
  border-color: var(--glacier-d);
  color: #fff;
}
.pick.is-on .vol-sub { color: rgba(255,255,255,0.8); }
.pick:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 2px; }

/* ---------- 8 · FINAL ---------- */
.final {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  overflow: hidden;
  background: var(--paper);
}
/* Четыре стихии как мягкие перетекающие пятна — без жёстких границ (ТЗ п.5/11) */
.final-quadrants { position: absolute; inset: -12%; filter: blur(52px); }
.final-quadrants .q { position: absolute; width: 70%; height: 70%; border-radius: 50%; opacity: 0.8; }
.q-air   { top: -8%; left: -8%; background: radial-gradient(closest-side, #dcebf7, transparent 74%); }
.q-ice   { top: -8%; right: -8%; background: radial-gradient(closest-side, #b9dcec, transparent 74%); }
.q-earth { bottom: -8%; left: -8%; background: radial-gradient(closest-side, #b7d5c0, transparent 74%); }
.q-fire  { bottom: -8%; right: -8%; background: radial-gradient(closest-side, #eecb9f, transparent 74%); }
.final-composition {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.28fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3.5rem);
}
.final-bottle {
  position: relative;
  /* Заведомо выше самой картинки — иначе она выпирает за фигуру и налезает
     на соседний блок. */
  min-height: clamp(510px, 53vw, 700px);
  display: grid;
  place-items: center;
  margin: 0;
  isolation: isolate;
}
.final-bottle picture { display: contents; }
.final-bottle img,
.final-bottle-video {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: clamp(480px, 50vw, 660px);
  max-width: 100%;
  object-fit: contain;
  /* Тень падает строго вниз, хотя сам кадр наклонён: так читается свет сверху,
     а не второй, боковой источник. */
  filter: drop-shadow(0 30px 30px rgba(28,75,80,0.2));
  /* Наклон уже внутри кадра, поэтому покачивание ниже отсчитывается от нуля —
     это добавка к наклону снимка, а не замена ему. */
  animation: finalBottleFloat 7s ease-in-out infinite;
}
.final-bottle-halo {
  position: absolute;
  z-index: 0;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,0.9), rgba(197,229,236,0.45) 42%, transparent 70%),
    conic-gradient(from 30deg, rgba(223,239,249,0.62), rgba(185,220,236,0.36), rgba(183,213,192,0.48), rgba(238,203,159,0.52), rgba(223,239,249,0.62));
  filter: blur(10px);
  opacity: 0.9;
}
.final-bottle-mist {
  position: absolute;
  z-index: 3;
  left: 4%;
  right: 4%;
  bottom: 8%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.86), rgba(210,232,232,0.34) 50%, transparent 76%);
  filter: blur(11px);
  pointer-events: none;
}
@keyframes finalBottleFloat {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-10px); }
}
.final-inner {
  position: relative;
  z-index: 3;
  max-width: 720px;
  background: rgba(251,252,254,0.72);
  backdrop-filter: blur(10px);
  border-radius: var(--r-lg);
  padding: clamp(2.4rem, 5vw, 4rem);
  box-shadow: var(--shadow-soft);
}
.final-mark { width: 84px; height: auto; margin: 0 auto 1.6rem; opacity: 0.95; }
.final-quote {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  line-height: 1.45;
  color: #1C4B50;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final-accent {
  margin: 1.6rem 0 2rem;
  font-family: var(--ff-label);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--glacier-d);
}

/* ---------- Footer ---------- */
/* Подвал — продолжение той же воды, а не тёмная плита под ней. Кадр со знаком
   КМВ открывает его сверху, дальше бирюза уходит на глубину, и текст ложится
   под основанием треугольника. Синевы (--deep) здесь больше нет нигде: на
   стыке снимка и фона она читалась отдельным блоком. */
.site-footer {
  --footer-wave-height: clamp(58px, 7vw, 92px);
  /* Цвет нижней строки пикселей самого кадра, но на тон глубже: белый текст на
     чистой бирюзе даёт всего 3.8:1, а здесь — больше шести. */
  --footer-deep: #04656b;
  position: relative;
  background: var(--footer-deep);
  color: #fff;
  padding: 0 0 clamp(3rem, 4vw, 4rem);
}
.footer-waterline {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: var(--footer-wave-height);
  max-width: none;
  pointer-events: none;
}
/* Волна — верхняя кромка подвала, поэтому её цвет равен цвету верхней строки
   пикселей кадра: страница переливается в бирюзу без стыка. */
.footer-waterline path {
  fill: #01a19e;
}
.footer-grid {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.2rem, 3.4vw, 3.2rem) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
/* В подвале та же связка, что в шапке: знак, название, подпись со штрихами.
   Сетка нужна, чтобы слоган встал под самим словом «Новотерская», а не под
   всей связкой: знак занимает только первую строку, вторая начинается от
   левого края названия. */
.footer-lockup {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "mark name"
    ".    tagline";
  align-items: center;
  column-gap: 0.85rem;
}
/* <picture> здесь с display:contents, поэтому ячейку сетки занимает сам <img>,
   а рядом с ним в поток попадает <source>. Обоим место назначаем руками:
   на автораскладку тут полагаться нельзя — она сажает <source> в первую
   ячейку, а знак уезжает во вторую строку. */
.footer-lockup .brand-mark { grid-area: mark; }
.footer-lockup source { display: none; }
.footer-lockup .brand-col { grid-area: name; justify-self: start; }
.footer-brand .brand-name {
  color: #fff;
  font-family: var(--ff-serif);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Знак нарисован тёмно-зелёным контуром — на тёмном фоне подвала он бы
   пропал. Кладём его на светлую подложку, как на фирменной этикетке. */
.footer-brand .brand-mark {
  height: 56px;
  background: #fff;
  border-radius: 10px;
  padding: 6px 8px;
  box-sizing: content-box;
}
/* Слоган в подвале — тот же треугольник, что и на первом экране: две строки,
   нижняя длиннее верхней, строки центрованы одна относительно другой. Фигура
   стоит во второй строке связки, под названием, и центрована по нему: в
   русском обе строки примерно одной ширины со словом «Новотерская», в
   английском нижняя длиннее — тогда она задаёт колонку, а название остаётся
   прижатым к знаку. Абзацем в одну строку фраза ломалась переносом посередине
   («…сердцем / земли.») и треугольника из неё не выходило. */
.footer-brand p {
  grid-area: tagline;
  justify-self: center;
  /* Отбивка почти нулевая: воздух под названием и так есть — знак в первой
     строке выше названия, и разница уходит ему под низ. С отбивкой в 1rem
     слоган отрывался от «Новотерской» и читался отдельным блоком. */
  margin-top: 0.15rem;
  font-family: var(--ff-display);
  font-size: 1.15rem;
  line-height: 1.35;
  text-align: center;
  color: rgba(255,255,255,0.9);
}
.footer-line { display: block; }
.footer-nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a { font-size: 0.9rem; color: rgba(255,255,255,0.92); transition: color 0.3s; }
.footer-nav a:hover { color: #fff; }
.footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; font-size: 0.82rem; color: rgba(255,255,255,0.86); }
.footer-legal a:hover { color: #fff; }
/* Политика, СОУТ и охрана труда — списком: колонка подвала около 260px, в
   строку три длинных названия всё равно не встают. Отступ снизу отделяет их
   от копирайта, иначе он читается четвёртым пунктом списка. */
.footer-legal-docs { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.25rem; }

/* ---------- Знак КМВ в шапке подвала ---------- */
/* Знак КМВ, уходящий под воду, открывает подвал: текст ложится сразу под
   основанием треугольника.
   Кадр показываем целиком: знак занимает почти всю его высоту, и любая
   обрезка по вертикали срезала бы ему то вершину, то буквы. Поэтому
   пропорция кадра задана блоку, а не подогнана высота под полосу. */
/* width задан явно: при `aspect-ratio` и ширине auto любое ограничение по
   высоте пересчиталось бы обратно в ширину, и блок съехал бы от края окна. */
.footer-mark {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1672 / 941;
  /* Цвет верхнего угла снимка — полоса не мигает белым, пока грузится файл. */
  background: #01a19e;
}
/* Верхняя строка кадра совсем не однотонная: в центре она светлая (1,193,190),
   у правого края уходит в тень (0,78,79). Поэтому встык с ровной заливкой волны
   она читалась чёткой горизонтальной линией — снимок выглядел наклейкой поверх
   бирюзы. Растворяем кромку: сверху лежит та же заливка, что и у волны, и вода
   проявляется из неё постепенно. Вершина знака начинается примерно на 15%
   высоты кадра, поэтому 12% растушёвки её не задевают. */
.footer-mark::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 12%;
  pointer-events: none;
  background: linear-gradient(180deg, #01a19e 0%, rgba(1,161,158,0.92) 18%, rgba(1,161,158,0.66) 42%, rgba(1,161,158,0.3) 70%, rgba(1,161,158,0) 100%);
}
.footer-mark picture { display: contents; }
.footer-mark img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* Низ кадра — бирюза #009392, поле под текстом — та же бирюза на тон глубже:
   разница небольшая, но на стыке она всё равно читалась бы линией. Гасим её
   растушёвкой ко дну кадра. Высота подобрана по самому снимку: основание
   треугольника лежит примерно на 88% высоты, поэтому затемнение начинается
   ниже — знак остаётся нетронутым, темнеет только вода под ним. */
.footer-mark::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 16%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,101,107,0) 0%, rgba(4,101,107,0.34) 40%, rgba(4,101,107,0.76) 74%, var(--footer-deep) 100%);
}

/* ---------- Cookie ---------- */
.cookie {
  position: fixed;
  left: 50%; bottom: 1.4rem;
  transform: translateX(-50%) translateY(160%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: min(680px, calc(100vw - 2rem));
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(20,49,63,0.08);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1);
}
.cookie.show { transform: translateX(-50%) translateY(0); }
.cookie p { font-size: 0.86rem; color: var(--ink); }
.cookie .btn { flex-shrink: 0; }

/* ---------- Вход: пролёт сквозь облака (только главная) ----------
   Полотно в цвет страницы, поверх — три облачных массива. Ближние два
   разъезжаются в стороны быстро и сильно растут, дальний почти стоит на месте
   и тает последним: разная скорость по глубине и читается как пролёт камеры,
   а не как раздвигающийся занавес.

   Уход целиком на CSS, с forwards. Скрипт занавес не снимает намеренно — иначе
   упавший или заблокированный JS оставил бы человека на белом экране. Из JS
   приходит только решение «показывать ли вообще» (класс no-intro).

   Размытия нет сознательно: filter: blur по слою во весь экран — самая дорогая
   операция ровно в тот момент, когда браузер рисует первый кадр. Мягкость даёт
   сам градиент, у него край растворяется к 70% радиуса. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 90;                    /* выше шапки (50) и плашки о cookie (60) */
  /* Единица размера клуба. Все радиусы облаков считаются от неё, поэтому
     масштаб толщи под узкий экран правится одной строкой, а не в шестидесяти
     градиентах. */
  --cl: 1vw;
  overflow: hidden;               /* облака вылетают за края — не даём им растянуть страницу */
  pointer-events: none;           /* листать можно, не дожидаясь конца */
  /* Сам контейнер не гаснет — только убирается из виду, когда отлетело
     последнее облако. Прозрачность здесь была бы ошибкой: она умножается на
     прозрачность детей, и облака гасли бы вместе с пеленой, не успев
     разъехаться. Ровно так и было в первой сборке — к 0.65с экран уже чистый. */
  animation: introDone 1.8s forwards;
}
@keyframes introDone { to { visibility: hidden; } }

/* Пелена — отдельным слоем под облаками, со своей кривой. Уходит раньше них
   (к 1.2с против 1.75с): иначе гора появляется уже после того, как облака
   разъехались, и связи между двумя событиями не возникает. Так она проступает
   именно в расходящуюся прореху.

   Не чистая белизна: на ней белые облака не видны вовсе — первый кадр был
   ровной молочной заливкой. Холодная дымка сверху вниз светлеет до цвета
   страницы, так что стык на исходе не читается, а облака на её фоне остаются
   самым светлым, что есть в кадре. */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #C4D9EC 0%, #D7E7F3 48%, var(--paper) 100%);
  animation: introVeil 0.9s 0.3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes introVeil { to { opacity: 0; } }

.intro-cloud {
  position: absolute;
  top: 50%;
  height: 150%;
  transform: translateY(-50%);
  will-change: transform, opacity;
}
/* Ближние массивы: каждый занимает свою половину с заходом на середину, чтобы
   в первом кадре между ними не было щели.

   У каждого клуба два слоя: белая макушка и холодная подкладка чуть ниже. Без
   подкладки облако — просто белое пятно, и над снегом Эльбруса оно пропадает
   бесследно; тень снизу даёт объём и держит форму на любом фоне. В CSS раньше
   перечисленный слой лежит выше, поэтому белизна идёт первой.

   Радиусы клубов заданы в vw, а не в процентах от блока. Проценты считаются от
   собственных сторон элемента, и в портрете узкого телефона блок высокий —
   клубы вытягивались в вертикальные полосы. В vw пропорция одна и та же на
   любом экране: клуб всегда примерно вдвое шире, чем выше. */
/* Боковые кромки растушёваны. Голубая подкладка задана в vw и почти во всю
   ширину блока, поэтому у самого края она обрывается не в ноль — и граница
   блока читалась прямой вертикальной линией через весь экран, особенно на
   стыке двух половин. Маска гасит по 12% с каждой стороны; в середине слои
   перекрываются с запасом, так что сплошная белизна не страдает. */
.intro-cloud-l, .intro-cloud-r {
  width: 78%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.intro-cloud-l {
  left: -6%;
  /* Точка роста — там, где на экране середина, а не в центре самого блока.
     С родной точкой слой распухал и внутрь тоже, внутренний край стоял на
     месте, и прореха не раскрывалась — вместо пролёта получалось затухание. */
  transform-origin: 72% 50%;
  animation: introFlyL 1.6s cubic-bezier(.45,0,.25,1) forwards;
  background:
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 18% 6%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(13 * var(--cl)) calc(12 * var(--cl)) at 44% 2%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(15 * var(--cl)) calc(13.5 * var(--cl)) at 66% 8%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(19 * var(--cl)) calc(16 * var(--cl)) at 10% 30%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(14 * var(--cl)) calc(12.5 * var(--cl)) at 38% 26%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 62% 33%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(16 * var(--cl)) calc(14 * var(--cl)) at 22% 54%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(18 * var(--cl)) calc(15.5 * var(--cl)) at 50% 51%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(13 * var(--cl)) calc(12 * var(--cl)) at 72% 57%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 14% 78%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(14 * var(--cl)) calc(12.5 * var(--cl)) at 42% 75%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(16 * var(--cl)) calc(14 * var(--cl)) at 68% 80%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(36 * var(--cl)) calc(13 * var(--cl)) at 42% 12%, rgba(151,183,209,0.55) 0, rgba(151,183,209,0.42) 42%, transparent 80%),
    radial-gradient(calc(38 * var(--cl)) calc(14 * var(--cl)) at 34% 36%, rgba(151,183,209,0.58) 0, rgba(151,183,209,0.44) 42%, transparent 80%),
    radial-gradient(calc(36 * var(--cl)) calc(13 * var(--cl)) at 46% 60%, rgba(151,183,209,0.55) 0, rgba(151,183,209,0.42) 42%, transparent 80%),
    radial-gradient(calc(36 * var(--cl)) calc(13 * var(--cl)) at 40% 84%, rgba(151,183,209,0.5) 0, rgba(151,183,209,0.38) 42%, transparent 80%),
    /* Сплошная белизна в основании слоя — самый нижний из фонов. Без неё между
       клубами просвечивала пелена, и толща читалась решёткой одинаковых пузырей,
       а не облаком. Теперь клубы работают только на силуэт по краю, а середина
       ровно белая. */
    radial-gradient(50% 45% at 50% 50%, #fff 0, #fff 56%, rgba(255,255,255,0) 100%);
}
.intro-cloud-r {
  right: -6%;
  transform-origin: 28% 50%;
  animation: introFlyR 1.6s cubic-bezier(.45,0,.25,1) forwards;
  background:
    radial-gradient(calc(15 * var(--cl)) calc(13.5 * var(--cl)) at 32% 4%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 56% 9%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(13 * var(--cl)) calc(12 * var(--cl)) at 80% 3%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 24% 28%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(19 * var(--cl)) calc(16 * var(--cl)) at 50% 32%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(14 * var(--cl)) calc(12.5 * var(--cl)) at 76% 27%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(13 * var(--cl)) calc(12 * var(--cl)) at 30% 53%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 56% 56%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(18 * var(--cl)) calc(15.5 * var(--cl)) at 82% 52%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(16 * var(--cl)) calc(14 * var(--cl)) at 26% 77%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(17 * var(--cl)) calc(15 * var(--cl)) at 54% 81%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(14 * var(--cl)) calc(12.5 * var(--cl)) at 78% 76%, #fff 0, #fff 58%, transparent 88%),
    radial-gradient(calc(36 * var(--cl)) calc(13 * var(--cl)) at 52% 10%, rgba(151,183,209,0.55) 0, rgba(151,183,209,0.42) 42%, transparent 80%),
    radial-gradient(calc(38 * var(--cl)) calc(14 * var(--cl)) at 46% 38%, rgba(151,183,209,0.58) 0, rgba(151,183,209,0.44) 42%, transparent 80%),
    radial-gradient(calc(36 * var(--cl)) calc(13 * var(--cl)) at 54% 62%, rgba(151,183,209,0.55) 0, rgba(151,183,209,0.42) 42%, transparent 80%),
    radial-gradient(calc(36 * var(--cl)) calc(13 * var(--cl)) at 48% 86%, rgba(151,183,209,0.5) 0, rgba(151,183,209,0.38) 42%, transparent 80%),
    radial-gradient(50% 45% at 50% 50%, #fff 0, #fff 56%, rgba(255,255,255,0) 100%);
}
/* Дальний слой — во всю ширину, бледнее и медленнее. */
.intro-cloud-far {
  left: -10%;
  width: 120%;
  opacity: 0.7;
  background:
    radial-gradient(30% 22% at 24% 30%, #fff, transparent 76%),
    radial-gradient(26% 20% at 72% 26%, #fff, transparent 76%),
    radial-gradient(34% 24% at 50% 68%, #fff, transparent 78%);
  animation: introFlyFar 1.75s cubic-bezier(.4,0,.3,1) forwards;
}
/* Разлёт начинается почти сразу: в первой сборке первые полсекунды уходили на
   «едва заметное шевеление», и из шести снятых кадров четыре были одинаково
   белыми — экран просто держал пустоту, а прореха открывалась в самом конце.
   Плотность держится до 70% и падает лишь на последней трети: если гасить её
   равномерно, к середине от облаков остаётся ровная пелена и весь разлёт
   пропадает. */
@keyframes introFlyL {
  0%   { transform: translate3d(0, -50%, 0) scale(1); opacity: 1; }
  28%  { transform: translate3d(-7%, -51%, 0) scale(1.2); opacity: 1; }
  70%  { opacity: 0.9; }
  100% { transform: translate3d(-56%, -58%, 0) scale(2.1); opacity: 0; }
}
@keyframes introFlyR {
  0%   { transform: translate3d(0, -50%, 0) scale(1); opacity: 1; }
  28%  { transform: translate3d(7%, -51%, 0) scale(1.2); opacity: 1; }
  70%  { opacity: 0.9; }
  100% { transform: translate3d(56%, -58%, 0) scale(2.1); opacity: 0; }
}
@keyframes introFlyFar {
  0%   { transform: translate3d(0, -50%, 0) scale(1); opacity: 0.7; }
  30%  { transform: translate3d(0, -51%, 0) scale(1.08); opacity: 0.7; }
  70%  { opacity: 0.5; }
  100% { transform: translate3d(0, -55%, 0) scale(1.5); opacity: 0; }
}
/* Повторный заход за тот же визит и системная просьба убавить движение —
   занавеса нет вовсе. */
.no-intro .intro { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }
/* На телефоне тот же жест, но короче примерно на треть: первый экран там и без
   занавеса тяжёлый, и терпение у человека с мобильным интернетом другое. */
@media (max-width: 767px) {
  /* Клубы крупнее относительно экрана: на 390 px комок в 1vw — это меньше
     четырёх пикселей, и толща рассыпалась на редкие точки поверх голубого
     фона вместо сплошной белизны. */
  .intro { --cl: 1.95vw; animation-duration: 1.35s; }
  .intro::before { animation-duration: 0.6s; animation-delay: 0.2s; }
  .intro-cloud-l, .intro-cloud-r { animation-duration: 1.15s; }
  .intro-cloud-far { animation-duration: 1.25s; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
/* Каскад: соседние карточки в сетках появляются по очереди (ТЗ п.5.4 / п.7) */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal:nth-child(n+7) { transition-delay: 0.48s; }

/* Hero: staged load sequence (0–6s narrative from the brief) */
.hero .reveal { opacity: 0; transform: translateY(20px); }
.hero.loaded .hero-title { animation: heroIn 1s 0.3s forwards cubic-bezier(.2,.7,.3,1); }
.hero.loaded .hero-sub   { animation: heroIn 1s 0.8s forwards cubic-bezier(.2,.7,.3,1); }
.hero.loaded .hero-cta   { animation: heroIn 1s 1.2s forwards cubic-bezier(.2,.7,.3,1); }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* 0–1.5s · кадр проявляется из белизны */
.hero-bg img, .hero-video { opacity: 0; }
.hero.loaded .hero-bg img,
.hero.loaded .hero-video { animation: bgIn 1.8s 0.1s ease-out forwards; }
@keyframes bgIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.hero.loaded .hero-clouds { animation: cloudIn 1.6s 0.4s ease-out forwards, cloudDrift 16s ease-in-out 2s infinite; }
@keyframes cloudIn { from { opacity: 0; } to { opacity: 0.85; } }

/* 1.5–3s · ice & water appear — cold silvery-turquoise glint */
.hero.loaded .hero-glint { animation: glintSweep 2s 1.5s ease-in-out forwards; }
@keyframes glintSweep {
  0%   { opacity: 0; background-position: 130% 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}
/* 2.6s+ · тёплое золотистое свечение снизу (Огонь), затем едва заметное дыхание */
.hero.loaded .hero-warmth { animation: warmthIn 1.6s 2.6s ease-out forwards, warmthBreath 10s ease-in-out 4.6s infinite; }
@keyframes warmthIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes warmthBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* 6s+ · calm loop — slow clouds, weak water, faint steam: у каждого свой
   бесконечный цикл, отдельного правила на этот участок не нужно. */

/* ---------- Responsive ---------- */
/* laptop 1024–1439 */
@media (max-width: 1439px) {
  :root { --wrap: 1080px; }
  /* Витрина сузилась вместе с колонкой — соседним бутылкам оставляем меньше
     места, иначе центральная перестаёт быть главной. */
  .line-stage { --stage-item: 62%; }
}
/* узкие ноутбуки: шапке тесно — компактнее бренд и меню. */
@media (max-width: 1279px) {
  .site-nav { gap: 0.05rem; }
  .nav-link { font-size: 0.64rem; padding-inline: 0.42rem; }
  .nav-ico svg { width: 20px; height: 20px; }
  .header-cta { --_pad: 0.8em 1.2em; font-size: 0.68rem; }
}
/* tablet 768–1023 — только раскладка; меню остаётся горизонтальным */
@media (max-width: 1023px) {
  .hero { padding-top: 6.5rem; text-align: center; }
  /* Туман здесь плотнее, чем на десктопе: текст идёт прямо по горе. Но к низу
     и вправо он должен сойти на нет — там стоит бутылка, и прежняя равномерная
     плотность (0.9 сверху, 0.92 снизу) её просто выбеливала. */
  .hero-fog {
    background:
      linear-gradient(180deg, rgba(244,249,252,0.86) 0%, rgba(244,249,252,0.52) 38%, transparent 66%),
      linear-gradient(90deg, rgba(244,249,252,0.46) 0%, transparent 58%);
  }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy { max-width: 620px; margin: 0 auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-topo { width: 44vw; }
  .elements-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .el-photo-wrap { height: clamp(220px, 34vw, 320px); }
  .mineral-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-stats { grid-template-columns: repeat(3, 1fr); }
  .docs-grid { grid-template-columns: repeat(2, 1fr); }
  /* Две карточки контактов в ряд перестают помещаться раньше остальных сеток:
     адрес в половине планшетной ширины уходит в четыре строки. */
  .contacts-grid { grid-template-columns: 1fr; }
  /* В половине планшетной ширины витрине уже тесно: бутылка в полный рост и
     описание рядом обе становятся мелкими. Разворот раскладывается в столбик —
     название, витрина, описание, — как та же страница на телефоне. */
  .line-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "stage" "copy";
    row-gap: 1.6rem;
    justify-items: center;
  }
  .line-title span,
  .line-title span + span { text-align: center; }
  .line-stage { --stage-item: 52%; width: 100%; }
  .line-copy { text-align: center; }
  .line-text { margin-inline: auto; }
  .final-composition { grid-template-columns: minmax(230px, 0.65fr) minmax(390px, 1.35fr); }
  .final-bottle { min-height: 430px; }
  .final-bottle img, .final-bottle-video { height: 430px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
/* mobile 320–767 */
@media (max-width: 767px) {
  /* Пять пунктов в строку не влезают — меню уходит в панель под бургер. */
  .nav-burger { display: inline-flex; }
  .site-header { display: flex; justify-content: space-between; }
  .site-nav {
    position: fixed;
    inset: calc(100% - var(--r-plate)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--r-plate) + 0.5rem) 1.2rem 1.3rem;
    background: #fff;
    border-radius: 0 0 var(--r-plate) var(--r-plate);
    box-shadow: 0 26px 50px -30px rgba(20,49,63,0.5);
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 0.42s cubic-bezier(.2,.7,.3,1), visibility 0.42s;
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
    z-index: -1;
  }
  .site-header.nav-open .site-nav { transform: translateY(0); visibility: visible; }
  .site-header.nav-open { box-shadow: 0 0 0 1px rgba(20,49,63,0.06); }
  .nav-item { position: static; display: block; }
  /* «Где купить» переезжает из плашки в панель. */
  .header-actions .header-cta { display: none; }
  .nav-cta {
    display: block;
    margin-top: 1.1rem;
    padding: 0.95rem 1rem;
    border-radius: 100px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--glacier-d), var(--glacier));
    box-shadow: var(--shadow-soft);
  }
  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.8rem;
    width: 100%;
    padding: 0.85rem 0.3rem;
    border-radius: 12px;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    color: var(--deep);
    border-bottom: 1px solid rgba(20,49,63,0.07);
  }
  .nav-link:hover,
  .nav-item:hover > .nav-toggle,
  .nav-toggle[aria-expanded="true"] { background: none; }
  .nav-link:hover .nav-ico,
  .nav-item:hover > .nav-toggle .nav-ico,
  .nav-toggle[aria-expanded="true"] .nav-ico { transform: none; }
  .nav-text { flex: 1; justify-content: space-between; }
  .nav-ico svg { width: 20px; height: 20px; }
  .nav-caret { width: 6px; height: 6px; transform: translateY(-2px) rotate(45deg); }
  .nav-sub {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 2rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.36s cubic-bezier(.2,.7,.3,1), visibility 0s 0.36s;
  }
  .nav-sub::before { content: none; }
  .site-header.nav-open .nav-sub,
  .nav-item:not(.is-submenu-open) > .nav-sub,
  .nav-toggle[aria-expanded="false"] + .nav-sub {
    display: none;
    max-height: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .site-header.nav-open .nav-toggle[aria-expanded="true"] + .nav-sub,
  .site-header.nav-open .nav-item.is-submenu-open > .nav-sub {
    display: block;
    opacity: 1;
    max-height: none;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .nav-sub a { padding: 0.72rem 0; font-size: 0.82rem; border-bottom: 1px solid rgba(20,49,63,0.05); }
  .nav-sub li:last-child a { border-bottom: none; }
  :root { --gutter: 20px; }
  /* В плашке остаются логотип, язык и бургер — кнопка уже в панели меню. */
  .header-actions { gap: 0.4rem; }
  .lang-toggle { padding: 0.3rem 0.2rem; font-size: 0.68rem; }
  /* Антиква Prata шире прежней: на 320–414px «НОВОТЕРСКАЯ» дотягивалась до
     переключателя языка и налезала на него. Знак и название ужимаются вместе
     с шириной экрана, nowrap держит название одной строкой. */
  .brand { gap: 0.5rem; min-width: 0; }
  .brand-mark { height: 32px; }
  .brand-name {
    font-size: clamp(0.74rem, 3.2vw, 1.05rem);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .footer-brand .brand-mark { height: 44px; }
  /* Название в подвале набрано в nowrap, поэтому его ширину задаёт кегль, а не
     колонка: на 320px под связку оставалось 186px, а она просила больше —
     страница разъезжалась вбок, и это тянулось на все двенадцать страниц.
     Кегль считаем от ширины экрана, как в шапке. */
  .footer-brand .brand-name { font-size: clamp(1.15rem, 5.6vw, 1.35rem); }
  /* Нижняя строка треугольника — самая длинная, и в английском она вдвое
     длиннее русской («Tempered by the heart of the earth.»). На 320px при
     десктопном кегле она переносилась бы, а перенос ломает фигуру. */
  .footer-brand p { font-size: clamp(0.88rem, 3.5vw, 1.15rem); }
  .hero { padding-top: 5.5rem; padding-bottom: 1rem; }
  .hero-grid { gap: 0.75rem; }
  .hero-sub { margin-top: 1rem; line-height: 1.6; }
  .hero-cta { margin-top: 1.35rem; }
  .elements-grid { grid-template-columns: 1fr; gap: 2rem; }
  .el-photo-wrap { height: clamp(220px, 52vw, 300px); }
  .mineral-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .trust-grid { grid-template-columns: 1fr; }
  /* minmax(0, 1fr), а не 1fr: у «1fr» есть скрытый порог в min-content, и
     плашка «FSSC 22000» — самая широкая из четырёх — раздвигала свою колонку
     до 153px при 130 доступных. Заодно ужимаем цифру и разрешаем единице
     переноситься: на 320px строка «FSSC 22000» в плашку не встаёт. */
  .trust-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 1.4rem 0.6rem; }
  .stat-num { flex-wrap: wrap; }
  .stat-val { font-size: clamp(1.55rem, 7vw, 2.9rem); }
  .docs-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
  .where-grid { grid-template-columns: 1fr; }
  .contacts-grid { grid-template-columns: 1fr; }
  /* На узком экране пара «производитель — ИНН» рядом не встаёт: ИНН уезжает
     под подпись соседа. Все реквизиты идут одной колонкой. */
  .contact-rows { grid-template-columns: 1fr; }
  .contact-row--pair:first-child + .contact-row--pair {
    border-top: 1px solid rgba(20,49,63,0.08);
    padding-top: 0.85rem;
    padding-left: 0;
  }
  /* На телефоне витрина занимает всю ширину, соседи только выглядывают из-за
     краёв — иначе центральная бутылка получается размером с палец. */
  .line-stage { --stage-item: 72%; }
  .stage-vol { top: 4%; right: 0; padding: 0.32rem 0.75rem 0.4rem; }
  .vol-num, .vol-unit { font-size: 1.1rem; }
  .final { min-height: auto; padding-top: 4rem; }
  .final-composition { grid-template-columns: 1fr; gap: 0; }
  /* Карточка с цитатой заходит на бутылку, но меньше, чем прежде: у наклонённого
     снимка внизу справа донышко, и старые -3.5rem срезали его по диагонали. */
  /* Кадр с бутылкой в полный рост высокий и узкий: на телефоне он перерастал
     фигуру и уходил под карточку с цитатой. Высоту задаёт сама картинка. */
  .final-bottle { min-height: 0; margin-bottom: -0.4rem; }
  .final-bottle img, .final-bottle-video { height: clamp(320px, 92vw, 420px); }
  .final-bottle-halo { width: min(410px, 110%); }
  .final-inner { padding: 2.3rem 1.35rem; }
  .final-quote { font-size: clamp(1.2rem, 5.4vw, 1.55rem); }
  .footer-grid { grid-template-columns: 1fr; }
  .cookie { flex-direction: column; text-align: center; gap: 0.8rem; }
  .thread { display: none; }
}

/* ---------- Reference direction · light editorial opening ---------- */
/* The supplied reference uses a quiet paper ground and one central product
   vignette rather than a full-bleed landscape. */
/* Ровно один экран: раньше стояла крышка 760px, и на высоких окнах под
   героем оставалась полоса следующего блока, а на низких — наоборот, экран
   перерастал окно. Низ без отступа: кадр упирается льдом прямо в границу. */
.hero {
  min-height: 100svh;
  padding-top: 5.6rem;
  padding-bottom: 0;
  align-items: stretch;
  background: #fbf7f2;
  border-bottom: 1px solid rgba(28, 75, 80, 0.14);
}
/* Подсветка из-под сцены больше не нужна: небо и камень пришли кадром,
   а бирюзовые пятна поверх них читались как грязь на стекле. */
.hero::before { display: none; }
.hero-bg { display: block; }
.hero-ember { display: none; }
.hero-topo { top: 4.5rem; width: min(24vw, 330px); color: rgba(72, 124, 142, 0.17); }
/* Колонка одна: правую половину кадра занимает сама бутылка, и пустой
   грид-колонки под неё держать больше не надо — текст просто прижат влево,
   ровно в то небо, которое в ролике оставлено под него. */
/* Крышки по ширине здесь нет специально. Пока стояло max-width: 1180px, колонка
   центровалась в окне, и связка уезжала вправо тем сильнее, чем шире экран: на
   1396px до неё оставалось 108px пустого неба, на 1804px — уже 312px, а бутылка
   в кадре при этом не двигалась. Теперь колонка занимает всю ширину героя, и
   текст встаёт по тому же отступу (--gutter), что и знак в шапке: у страницы
   один левый край на любой ширине. Сама связка шире 520px не станет — её
   держит .hero-copy. */
.hero-grid {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
/* Колонка шире прежних 390px: в неё должна помещаться нижняя, самая длинная
   строка треугольника целиком. Текст в колонке центрован — вслед за связкой,
   иначе абзац и кнопки читались бы как отдельный левый блок под ней. */
.hero-copy { max-width: 520px; text-align: center; }
.hero-title {
  font-size: calc(clamp(1.2rem, 1.72vw, 1.66rem) * var(--tri-scale, 1));
  line-height: 1.28;
  letter-spacing: 0.05em;
  color: #315b61;
}
/* Английские строки длиннее русских: нижняя не влезала в колонку на 320–390px
   и переносилась — а перенос ломает треугольник. Ужимаем связку целиком, а
   имени даём меньший кегль отдельно: латиница шире кириллицы, и при 1.42em
   «NOVOTERSKAYA» почти догоняла по ширине первую строку слогана. */
html[lang="en"] .hero-title { --tri-scale: 0.9; }
html[lang="en"] .hero-brand { font-size: 1.28em; }
/* Абзац уже нижней строки треугольника: если он шире основания, силуэт связки
   теряется — читается прямоугольник текста, а не фигура. */
.hero-sub { margin: 1.25rem auto 0; max-width: 340px; font-size: 0.86rem; line-height: 1.65; }
.hero-cta { margin-top: 1.7rem; justify-content: center; }
.btn-play { font-size: 0.68rem; letter-spacing: 0.1em; }
.btn-play-pin { width: 42px; height: 42px; background: #17656a; }

.elements { padding: 0; background: #fbf7f2; border-bottom: 1px solid rgba(28, 75, 80, 0.14); }
.elements .section-head { margin: 0; max-width: none; padding: 1rem var(--gutter) 0.95rem; border-bottom: 1px solid rgba(28, 75, 80, 0.14); }
.elements .eyebrow, .elements .section-lede { display: none; }
.elements .section-title { font-size: clamp(0.9rem, 1.3vw, 1.1rem); letter-spacing: 0.12em; }
/* Со слоганом подпись стала на строку выше, поэтому и полоса чуть выше:
   на прежних 260px фотографии оставалось 55px — обрезок, а не кадр. */
.elements-grid { gap: 0; height: clamp(300px, 29vw, 400px); }
.el { min-height: 0; overflow: hidden; }
.el + .el { border-left: 1px solid rgba(255,255,255,0.38); }
.el-photo-wrap { position: absolute; inset: 0; height: auto; margin: 0; }
.el-cap { position: relative; z-index: 3; padding: clamp(1.8rem, 3.2vw, 2.7rem) 1rem 0; color: #123f46; text-shadow: 0 1px 8px rgba(255,255,255,0.9); }
.el-cap h3 { font-size: clamp(1rem, 1.45vw, 1.3rem); letter-spacing: 0.11em; margin: 0 0 0.34rem; color: #0d3f47; text-shadow: 0 1px 8px rgba(255,255,255,0.96); }
.el-cap p { max-width: 190px; font-size: 0.74rem; font-weight: 600; line-height: 1.5; color: #123f46; text-shadow: 0 1px 8px rgba(255,255,255,0.96); }
.el-cap .el-slogan {
  max-width: 200px;
  font-size: clamp(0.94rem, 1.3vw, 1.16rem);
  margin-bottom: 0.15rem;
  text-shadow: 0 1px 8px rgba(255,255,255,0.96);
}
.el .el-cap {
  min-height: 208px;
  background: linear-gradient(180deg, rgba(251,247,242,0.98) 0%, rgba(251,247,242,0.92) 68%, rgba(251,247,242,0) 100%);
}
.el-photo-wrap::before { background: linear-gradient(180deg, rgba(251,247,242,0.86) 0%, rgba(251,247,242,0.32) 46%, rgba(251,247,242,0.04) 72%); }
.el-fire .el-photo-wrap::before { background: linear-gradient(180deg, rgba(251,247,242,0.92) 0%, rgba(247,222,192,0.58) 46%, rgba(170,112,70,0.22) 100%); }
/* «Земля» единственная стоит на тёмном кадре: яркость верхней трети 59 против
   165–226 у остальных стихий. Общей вуали (правило выше) карточке не достаётся
   — зелёный тинт из основной раскладки специфичнее, — и подпись тонула в лесу.
   Поэтому здесь своя вуаль: молочная под текстом, к низу уходит в зелень. */
.el-earth .el-photo-wrap::before {
  background: linear-gradient(180deg, rgba(251,247,242,0.94) 0%, rgba(251,247,242,0.78) 38%, rgba(226,240,232,0.34) 62%, rgba(48,132,102,0.16) 100%);
}

@media (max-width: 1023px) {
  /* Тот же уговор, что и на десктопе: ровно один экран и лёд на границе.
     Раньше здесь стояло min-height: auto, и на планшете герой занимал
     чуть больше половины окна, а снизу выглядывал следующий блок. */
  /* Колонка по-прежнему прижата влево — там для неё оставлено небо, — но текст
     внутри неё центрован: связка набрана треугольником. */
  .hero { min-height: 100svh; padding-top: 5.6rem; padding-bottom: 0; }
  .hero-copy { margin: 0; }
  /* В узком окне кадр режется по бокам. Сдвигаем окно вправо: слева уходят
     дальние хребты, зато в кадре остаются и вершина, и бутылка на камне. */
  .hero-bg img, .hero-video { object-position: 58% center; }
  .elements-grid { grid-template-columns: repeat(4, 1fr); gap: 0; height: 325px; }
  .el-photo-wrap { height: auto; }
}
/* Портрет — и телефон, и планшет боком вверх. Кадр 16:9, растянутый на всё
   вытянутое окно, режется по ширине до четверти панорамы: не остаётся ни
   вершины, ни бутылки — только кусок склона. Поэтому в портрете кадр садится
   полосой у нижней кромки. Полоса почти 16:9, кадр ужимается по высоте целиком
   и по ширине теряет мало: в неё попадают и вершина, и бутылка на камне.
   Текст встаёт над полосой, а не на ней, — так он читается без плотной пелены.
   Верхняя кромка полосы растворяется, чтобы стык не читался обрезом. */
@media (max-width: 1023px) and (orientation: portrait) {
  /* Высота полосы больше не задаётся числом. Пока стояло clamp(340px, 58svh,
     620px), она ни разу не совпала с тем, что реально оставалось под текстом:
     на 375×667 под кнопками висела пустая белая полоса в 62px, а на 360×740 и
     390×844 кадр, наоборот, заезжал на текст на 73 и 36px. Причина простая —
     высота связки зависит от кегля и числа переносов, а clamp про них не знает.
     Поэтому герой в портрете становится колонкой: связка занимает столько,
     сколько ей нужно, кадр забирает ровно остаток. Стык сходится сам на любом
     экране и на любом языке. */
  .hero { display: flex; flex-direction: column; }
  .hero-grid { order: 1; flex: 0 0 auto; }
  /* Кадр выходит из потока в поток: раньше он лежал абсолютом на всю секцию,
     теперь это обычный блок под текстом. Отрицательные поля возвращают ему
     края экрана — у героя по бокам отступ в --gutter, а полоса должна идти
     навылет. Нижний порог держит кадр кадром: если английская связка встанет
     в лишнюю строку, от горы всё равно останется не обрезок. */
  .hero-bg {
    order: 2;
    position: relative;
    flex: 1 1 auto;
    min-height: min(38svh, 340px);
    margin: 0 calc(var(--gutter) * -1);
  }
  .hero-video {
    inset: 0;
    height: 100%;
    /* На телефоне полоса режет кадр почти вдвое, и при 60% бутылка упиралась
       в правую кромку. Сдвигаем окно ещё правее: бутылка отходит от края,
       вершина при этом остаётся в кадре. */
    object-position: 66% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.55) 9%, #000 19%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.55) 9%, #000 19%);
  }
  /* Прежний туман (0.86 сверху) выбеливал гору до ровного молока — с ним полоса
     теряет смысл. Разрежаем его и возвращаем контраст тексту цветом, а не
     плотностью пелены. */
  .hero-fog {
    background:
      linear-gradient(180deg, rgba(244,249,252,0.4) 0%, rgba(244,249,252,0.28) 38%, transparent 66%),
      linear-gradient(90deg, rgba(244,249,252,0.28) 0%, transparent 58%);
  }
  /* Абзац мелкий, ему нужны 4.5:1 — по замерам на самом тёмном участке горы
     прежний #506169 давал 3.4. Заголовок крупный, ему хватает 3:1, он не меняется. */
  .hero-sub { color: #38494F; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; align-content: start; }
}
@media (max-width: 767px) {
  /* Низ без отступа — иначе камень повисает над границей. Высоту кадра
     считаем от svh, а не в пикселях: на 320×640 фиксированные 348px
     вместе с текстом перерастали окно на две сотни пикселей. */
  .hero { padding: 5rem var(--gutter) 0; }
  /* Колонка забирает всю ширину между полями: у связки нижняя строка длиной в
     25 знаков, и каждый отданный пиксель — это кегль всего треугольника. */
  .hero-copy { max-width: 360px; margin: 0 auto; }
  /* Кегль связки здесь считается от ширины экрана: на 320px нижняя строка
     треугольника при десктопном кегле переносилась бы и силуэт ломался. */
  .hero-title { font-size: calc(clamp(0.92rem, 4.55vw, 1.14rem) * var(--tri-scale, 1)); }
  /* Абзац уже основания треугольника — иначе он читался бы его продолжением. */
  .hero-sub { margin-top: 0.9rem; max-width: min(300px, 88%); }
  .hero-cta { margin-top: 1.2rem; }
  .elements-grid { grid-template-columns: 1fr; height: auto; }
  .el { min-height: clamp(260px, 56svh, 420px); }
  .el-cap { padding: 1.5rem 0.8rem 0; }
  .el-cap p { font-size: 0.66rem; }
  .el-cap .el-slogan { font-size: 1rem; }
  .el + .el { border-left: 0; }
  .el + .el { border-top: 1px solid rgba(255,255,255,0.38); }
}
/* Низкие экраны (320×640 и подобные). Там текст занимал 411px из 640, и герой
   перерастал окно на 93px, даже когда высоты считались от svh. Ужимаем всю
   колонку разом — шапку, кегль, отбивки и кадр, — иначе «один экран» не
   получается ни при каком одном изменении. */
@media (max-width: 767px) and (max-height: 700px) {
  .hero { padding-top: 4rem; }
  .hero-title { font-size: calc(clamp(0.86rem, 4vw, 1rem) * var(--tri-scale, 1)); line-height: 1.22; }
  .hero-sub { margin-top: 0.55rem; font-size: 0.78rem; line-height: 1.5; }
  .hero-cta { margin-top: 0.75rem; gap: 0.55rem; }
}
/* В перевёрнутом телефоне полосы нет — кадр идёт во весь экран, — и колонку
   прижимаем к левому краю: по центру она легла бы прямо на бутылку, которая
   в ландшафте стоит в середине кадра. Сам текст внутри колонки остаётся
   центрованным. */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-copy { margin: 0; }
}
/* Перевёрнутый телефон — это и 390, и 844 по ширине, поэтому отдельным блоком
   на всю мобильную ширину. Экран тут шире кадра, кадр режется по высоте:
   прижимаем срез к низу, иначе с кадра уходит камень и бутылка повисает. */
@media (max-width: 1023px) and (orientation: landscape) {
  .hero-video { object-position: 58% 64%; }
}
/* Тот же перевёрнутый телефон, но правило цепляется за высоту: по ширине он
   бывает и 844, и 932, а низким остаётся всегда. Бутылка в ландшафте стоит
   почти в середине кадра, и нижняя, самая длинная строка треугольника до неё
   доставала. Ужимаем связку и колонку — заодно освобождается высота под
   абзац и кнопки, которых на 390px по вертикали и так впритык. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-copy { max-width: 430px; }
  .hero-title { font-size: calc(clamp(0.92rem, 1.55vw, 1.2rem) * var(--tri-scale, 1)); }
  .hero-sub { margin-top: 0.7rem; max-width: 300px; font-size: 0.8rem; line-height: 1.55; }
  .hero-cta { margin-top: 1rem; }
}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .hero .reveal { opacity: 1 !important; transform: none !important; }
  .hero-bg img, .hero-video { opacity: 1 !important; transform: none !important; }
  .hero-clouds { opacity: 0.85 !important; }
  .hero-glint { opacity: 0 !important; }
  .hero-warmth { opacity: 1 !important; }
  .hero::before { transform: none !important; }
  .thread { display: none; }
  /* Меню переключается мгновенно, но остаётся управляемым: обнуление
     transition-duration выше само по себе меню не ломает — visibility и
     transform по-прежнему меняются, просто без плавности. */
  .nav-sub, .site-nav { transition: none !important; }
}

/* ==================================================================
   Catalog page (catalog.html) — та же секция .collection, но отдельной
   страницей: под фиксированной шапкой и с призывом «Где купить» внизу.
   ================================================================== */
.catalog-page { background: var(--paper); }
.catalog-page .collection {
  /* Фон секции стал плотнее (ниже), и на нём прежние светлые токены текста
     не добирают 4.5:1: и --glacier-d, и --muted давали около 2.9. Внутри
     секции берём их на пару тонов темнее — в шапке и подвале, за пределами
     секции, токены остаются прежними. */
  --glacier-d: #27586F;
  --muted: #3A5764;
  padding: calc(var(--gutter) + 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  /* Бутылки — прозрачные вырезы, и на прежнем почти белом фоне у воды не
     оставалось краёв: она пропадала, сильнее всего пятилитровая. Теперь
     секция идёт по ледниковой шкале сверху вниз — от света под заголовком к
     плотному низу, — и вода читается силуэтом на всю страницу. */
  background:
    radial-gradient(100% 34% at 50% -10%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #E4F0F8 0%, #CFE3F1 45%, #AFCFE4 100%);
}
.catalog-foot {
  max-width: 620px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
.catalog-foot p {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
@media (max-width: 767px) {
  .catalog-page .collection { padding-top: calc(var(--gutter) + 4.5rem); }
}

/* ==================================================================
   Legal / document pages (privacy policy)
   ================================================================== */
.legal-page { background: var(--paper); }
/* На внутренних страницах под плашкой нет ни видео, ни фотографии — полупрозрачное
   стекло там просто мутит ровный фон, поэтому плашка сразу плотная. */
.site-header.is-solid {
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(20,49,63,0.55), 0 0 0 1px rgba(20,49,63,0.06);
}
.legal {
  padding: calc(var(--gutter) + 4.5rem) var(--gutter) 5rem;
  /* Вертикальный радиус эллипса — 60% высоты блока при центре на -10%, значит
     градиент выдыхается ровно на середине страницы, а дальше идёт цвет
     последнего стопа. Пока им был --paper, длинные страницы (состав воды на
     телефоне) резались надвое: голубой верх и белый низ со стыком где-то
     посреди таблиц. Последний стоп — --sky, поэтому ниже эллипса вода просто
     продолжается до подвала. */
  background:
    radial-gradient(120% 60% at 50% -10%, #fff 0%, var(--sky) 60%, var(--sky) 100%);
}
.legal-inner {
  max-width: 820px;
  margin: 0 auto;
}
.legal-title {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--deep);
  margin: 0.5rem 0 0.6rem;
  /* «конфиденциальности» одним словом шире 390px-экрана и растягивало всю
     страницу (горизонтальный скролл на privacy.html). hyphens переносит по
     слогам — у <html lang="ru"> словарь есть; overflow-wrap оставлен на случай,
     когда словаря нет: тогда перенос будет жёстким, но скролла всё равно не
     появится. Порядок важен: сначала пробуем красиво, потом принудительно. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.legal-sub {
  font-size: 1.05rem;
  color: var(--ink);
  opacity: 0.8;
  margin-bottom: 2.6rem;
}
.legal-body {
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--ink);
}
.legal-body h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  color: var(--deep);
  margin: 2.6rem 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(62,122,152,0.16);
}
.legal-body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body p { margin: 0 0 0.85rem; }
.legal-body ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.legal-body li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.45rem;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--glacier);
}
.legal-body a { color: var(--glacier-d); text-decoration: underline; text-underline-offset: 2px; }
.legal-body .docs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 1rem;
}
.legal-body .doc { padding-left: 0; margin: 0; }
.legal-body .doc::before { content: none; }
.legal-body .doc-link {
  color: inherit;
  line-height: 1.35;
  text-decoration: none;
}
.legal-contacts {
  margin: 3rem 0 2rem;
  padding: 1.6rem 1.8rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.legal-contacts p { margin: 0 0 0.3rem; }
.legal-contacts a { color: var(--glacier-d); }
@media (max-width: 767px) {
  .legal { padding-top: calc(var(--gutter) + 4rem); }
  .legal-body .docs-grid { grid-template-columns: 1fr; }
  .legal-contacts { padding: 1.3rem 1.3rem; }
}

/* ---- Таблицы состава воды (composition.html) ---- */
/* Внутри разделов состава есть свои подзаголовки («Условия хранения»,
   «Медицинские показания»), поэтому h3 нужен как ступень между h2 и текстом —
   без разделительной линии, она осталась за h2. */
.legal-body h3 {
  font-family: var(--ff-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--deep);
  margin: 1.8rem 0 0.6rem;
}
/* Состав каждой воды — не колонка цифр, а диаграмма: бутылка сбоку, у
   каждого компонента фотография минерала и полоса от минимума к максимуму
   диапазона по общей для этой воды шкале. Границы полосы заданы прямо в
   разметке через --from/--to, поэтому диаграмма живёт без единой строчки JS
   и переживает смену языка (internal.js меняет только текст). */
.compo-block {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: center;
  margin: 1.4rem 0 1.8rem;
}
.compo-bottle {
  margin: 0;
  /* Мягкое световое пятно позади бутылки: снимки вырезаны по контуру, и без
     подложки они висят в воздухе. Радиальный градиент вместо прямоугольной
     плашки — чтобы не спорить с закруглениями таблицы рядом. */
  background: radial-gradient(60% 46% at 50% 56%, rgba(220,235,245,0.85), rgba(220,235,245,0) 72%);
}
.compo-bottle img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 26px rgba(20,49,63,0.18));
}
/* У бутылок с минеральной водой (скважины 66 и 72) очень прозрачный пластик:
   на белом поле он растворялся и терял фирменный голубой оттенок. Раньше его
   вытягивала аква-подложка на самой <figure>, но снимок внутри контура
   непрозрачен — подложка была видна ровно там, где вылезала за бутылку,
   овальным пятном вокруг неё. Поэтому цвет теперь держит сам снимок:
   усиленная насыщенность плюс лёгкий разворот тона в бирюзу. Никакой краски
   за контуром — фон остаётся общим для всех бутылок страницы. */
.compo-bottle--aqua img {
  filter: saturate(1.7) contrast(1.1) hue-rotate(-4deg) brightness(0.98)
    drop-shadow(0 18px 24px rgba(20, 49, 63, 0.18));
}
/* Оболочка со своей прокруткой: на узком экране таблица уезжает вбок сама,
   а не растягивает страницу. tabindex ей не нужен — с клавиатуры внутрь
   попадают по ссылкам, а прокручиваемая область без фокуса остаётся
   доступной колесом и жестом. */
.compo-chart {
  overflow-x: auto;
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 14px;
  background: rgba(255,255,255,0.62);
}
.compo-chart table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.compo-chart caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1.1rem 0.2rem;
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--deep);
}
.compo-chart th,
.compo-chart td {
  padding: 0.5rem 1.1rem;
  text-align: left;
  vertical-align: middle;
}
.compo-chart thead th {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glacier-d);
  border-bottom: 1px solid rgba(62,122,152,0.18);
}
.compo-chart thead .compo-h-num { text-align: right; }
.compo-chart tbody th {
  font-weight: 400;
  color: var(--ink);
}
.compo-chart tbody tr + tr { border-top: 1px solid rgba(62,122,152,0.1); }
.compo-chart tbody tr.is-total { background: rgba(62,122,152,0.07); }
.compo-chart tbody tr.is-total th,
.compo-chart tbody tr.is-total td {
  font-weight: 600;
  color: var(--deep);
}
/* Флексом накрыта обёртка внутри ячейки, а не сама ячейка: display:flex на
   <th> выбил бы её из табличной раскладки и развалил колонки. Заодно длинное
   название переносится рядом с формулой, а не под ней. */
.compo-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* Обозначение компонента — формула тем же антиквенным набором, что и символы
   стихий на главной. Колонка фиксированной ширины по самому длинному
   обозначению (H₂SiO₃): иначе формула наезжает на название, а названия в
   строках начинаются не с одной вертикали. */
.compo-el {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 34px;
  font-family: var(--ff-serif);
  font-size: 0.9rem;
  color: var(--glacier-d);
  white-space: nowrap;
}
.compo-name { min-width: 0; }
/* 30% — ровно столько, чтобы самому длинному названию («Общая жёсткость, не
   более») хватило места в одну строку и строки состава не разъезжались по
   высоте. */
.compo-bar { width: 30%; }
.compo-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(62,122,152,0.13);
}
/* Полоса начинается не от нуля, а от минимума диапазона: видно и сколько
   компонента в воде, и насколько широко значение гуляет от партии к партии.
   min-width держит видимой даже кремниевую кислоту — её диапазон занимает
   чуть больше процента шкалы. */
.compo-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from, 0%);
  right: calc(100% - var(--to, 100%));
  min-width: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--glacier), var(--glacier-d));
}
/* Минерализация и жёсткость меряются в других единицах — по шкале мг/л их
   ставить нельзя, поэтому в этих строках вместо полосы прочерк. */
.compo-dash {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(62,122,152,0.3);
}
/* Диапазоны вида «1300 – 1600» читаются столбиком только моноширинными
   цифрами, и разрывать их переносом нельзя — иначе половина уедет на
   следующую строку. */
.compo-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--deep);
}
.compo-scale {
  margin: 0;
  padding: 0.7rem 1.1rem 0.9rem;
  border-top: 1px solid rgba(62,122,152,0.1);
  font-size: 0.82rem;
  color: var(--muted);
}
/* Оговорка «только вне фазы обострения» — не рядовая строка текста:
   выделяем её так же, как выделяют предупреждение на этикетке. */
.compo-warn {
  padding: 0.75rem 1.1rem;
  border-left: 3px solid var(--glacier);
  background: rgba(62,122,152,0.06);
  border-radius: 0 10px 10px 0;
}
@media (max-width: 900px) {
  /* Бутылка уходит наверх и ужимается: рядом с таблицей ей нужно не меньше
     150 px, иначе колонка с названиями схлопывается в лесенку из переносов. */
  .compo-block { grid-template-columns: minmax(0, 1fr); }
  .compo-bottle { width: 120px; margin: 0 auto; }
}
@media (max-width: 767px) {
  /* Ширину таблицы на телефоне держит не полоса, а неразрывные куски текста:
     «Гидрокарбонаты» в колонке названий и «1300 – 1600» в колонке значений.
     Ужать их можно только кеглем — отсюда 0.79rem вместо настольных 0.95. */
  .compo-chart table { font-size: 0.79rem; }
  .compo-chart th,
  .compo-chart td { padding: 0.45rem 0.42rem; }
  /* Разрядка и капс в шапке — самое широкое место таблицы: «СОДЕРЖАНИЕ» одним
     куском задавало ширину колонки и выталкивало таблицу за край экрана. */
  .compo-chart thead th { font-size: 0.64rem; letter-spacing: 0.02em; }
  .compo-cell { gap: 0.5rem; }
  .compo-el { width: 42px; height: 26px; font-size: 0.66rem; }
  /* Не проценты, а фиксированные пиксели: доля от ширины таблицы в auto-раскладке
     считается по кругу, и полоса раздувала таблицу за край экрана. 50 px —
     остаток ширины после колонки формул и значений: больше не влезает, меньше
     незачем — полоса перестаёт читаться как шкала. */
  .compo-bar { width: 50px; }
}

/* ---- Где купить (buy.html) ---- */
/* Три канала продаж плиткой: фирменные магазины, OZON, Wildberries. Плитки
   стоят до .legal-body — до первого h2 с его разделительной линией, — чтобы
   человек с ходу видел, куда идти, и не читал текст ради ссылки. */
.buy-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 0 0 2.4rem;
}
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 1.5rem 1rem 1.3rem;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.66);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.channel:hover,
.channel:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(62,122,152,0.42);
  box-shadow: 0 18px 34px -26px rgba(20,49,63,0.55);
}
/* На плитке стоит настоящий логотип площадки: по нему глаз находит нужную
   кнопку быстрее, чем по набранному названию. Марки взяты в том виде, в каком
   их публикует сам бренд, — цвета и пропорции не трогаем. Высота бокса
   фиксирована, чтобы подписи трёх плиток стояли на одной линии, а логотипы
   разной ширины (у Wildberries марка вдвое шире монограммы) центровались
   каждый в своей ячейке. */
.channel-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 0.5rem;
}
.channel-mark img { height: 40px; width: auto; }
.channel-name {
  font-family: var(--ff-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--deep);
}
.channel-note {
  font-family: var(--ff-label);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.channel-mark-stack {
  gap: 0.28rem;
}
/* Три настоящих логотипа рядом: у них своя ширина, и по одной высоте их
   выставлять нельзя — «Перекрёсток» в семь раз шире «Ленты» и втроём они
   вылезали за карточку на соседние. Ограничиваем и по ширине тоже. */
.channel-mark-stack img {
  width: auto;
  height: auto;
  max-width: 66px;
  max-height: 20px;
}

.retailer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 0.9rem;
  margin: 1.2rem 0 1.4rem;
}
.legal-body .retailer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 166px;
  padding: 1rem 0.9rem 0.95rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 18px 40px -34px rgba(20,49,63,0.52);
  transition: transform 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.legal-body .retailer-card:hover,
.legal-body .retailer-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(62,122,152,0.42);
  box-shadow: 0 20px 38px -28px rgba(20,49,63,0.58);
}
.retailer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  width: 100%;
}
/* Логотипы настоящие, поэтому пропорции у всех разные: от 3:1 у «Ленты» до
   10:1 у «АптекиПлюс». Общая ширина выравнивает их по строке, но одной ширины
   мало — жирный чёрный «Купер» при той же ширине перевешивает соседей, а
   «Лента» и «Ютека» в родном размере, наоборот, теряются. Ширину этих трёх
   подобрал на глаз по оптической плотности, а не по геометрии. */
.retailer-logo img {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  max-height: 58px;
}
.retailer-logo img[src*="lenta"] { width: 118px; }
.retailer-logo img[src*="uteka"] { width: 132px; }
.retailer-logo img[src*="kuper"] { width: 122px; }
.retailer-logo img[src*="globus"] { width: auto; height: 58px; }
.retailer-logo img[src*="auchan"] { width: auto; height: 58px; }
.retailer-name {
  margin-top: 0.45rem;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep);
}
.retailer-action {
  margin-top: 0.35rem;
  font-family: var(--ff-label);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--glacier-d);
}

/* Карточка магазина: слева адрес и часы, справа карта. Карта — живая, с ней
   можно работать прямо на странице, поэтому она не картинка, а iframe. */
.shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.4rem;
  align-items: center;
  padding: 1.3rem;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
}
.shop h3 { margin-top: 0; }
.shop-line { margin: 0 0 0.6rem; }
.shop-line:last-child { margin-bottom: 0; }
.shop-label {
  display: block;
  font-family: var(--ff-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Яндекс отдаёт виджет без своих размеров — высоту задаём сами, иначе iframe
   схлопнется в стандартные 150px и от карты останется полоска. */
.shop-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 12px;
}

.dist-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.dist-card {
  padding: 1.3rem;
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
}
.dist-card h3 { margin-top: 0; }
.dist-card .dist-line { margin: 0 0 0.5rem; }
.dist-card .dist-line:last-child { margin-bottom: 0; }

/* ---- Отзывы покупателей (buy.html) ---- */
/* Отзывы разной длины — от одной строки до четырёх, поэтому карточка тянется
   по содержимому, а подпись прижата к низу: иначе логотипы площадки в ряду
   встают на разной высоте и сетка выглядит рваной. */
.reviews-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
}
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.3rem 1.05rem;
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 18px 40px -34px rgba(20,49,63,0.52);
  overflow: hidden;
}
/* Кавычка — не текст, а фон карточки: крупная, полупрозрачная, обрезается
   краем. Поэтому aria-hidden не нужен, её нет в дереве доступности.
   Селектор с .legal-body — чтобы перебить общий маркер списка .legal-body li::before
   (синяя точка 5×5), иначе он выигрывает по специфичности и рисует точку. */
.legal-body .review-card::before {
  content: "«";
  position: absolute;
  top: -0.55em;
  right: 0.1em;
  left: auto;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--ff-serif);
  font-size: 6rem;
  line-height: 1;
  color: rgba(111,168,196,0.13);
  pointer-events: none;
}
.review-stars {
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.review-text {
  flex: 1;
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink);
}
.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.95rem;
}
.review-author {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep);
}
.review-date { font-size: 0.82rem; color: var(--muted); }
/* Пунктир вместо сплошной линии: сплошная в карточке уже есть — рамка, и две
   одинаковые линии рядом читались как ошибка вёрстки. */
.review-source {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(62,122,152,0.24);
  font-family: var(--ff-label);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--glacier-d);
}
.review-source img {
  display: block;
  width: auto;
  height: 15px;
}
.review-source:hover span,
.review-source:focus-visible span { text-decoration: underline; }

@media (max-width: 767px) {
  /* На телефоне три плитки в ряд ужимаются до нечитаемого — раскладываем их
     в столбец, а внутри каждой: марка слева на обе строки, название и
     пояснение справа друг под другом. */
  .buy-channels { grid-template-columns: 1fr; }
  .channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.9rem;
    row-gap: 0.1rem;
    padding: 1rem 1.1rem;
    text-align: left;
  }
  /* Не min-width, а фиксированная ширина: марки у площадок разной ширины, и от
     минимума колонка Wildberries раздувалась — подписи трёх плиток, стоящих
     теперь столбиком друг под другом, начинались не с одной вертикали. */
  .channel-mark {
    grid-row: 1 / span 2;
    height: auto;
    width: 80px;
    margin-bottom: 0;
  }
  .channel-mark img { height: 30px; }
  .channel-mark-stack {
    flex-direction: column;
    align-items: flex-start;
    width: 92px;
    gap: 0.18rem;
  }
  .channel-mark-stack img { width: auto; height: auto; max-width: 88px; max-height: 18px; }
  .retailer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .legal-body .retailer-card { min-height: 142px; padding: 0.85rem 0.65rem; }
  .retailer-logo { height: 62px; }
  .retailer-logo img { width: 122px; max-height: 48px; }
  .retailer-logo img[src*="lenta"] { width: 96px; }
  .retailer-logo img[src*="uteka"] { width: 108px; }
  .retailer-logo img[src*="kuper"] { width: 100px; }
  .retailer-logo img[src*="globus"] { width: auto; height: 48px; }
  .retailer-logo img[src*="auchan"] { width: auto; height: 48px; }
  .retailer-name { font-size: 0.92rem; }
  .retailer-action { font-size: 0.64rem; letter-spacing: 0.05em; }
  .shop { grid-template-columns: 1fr; padding: 1.1rem; }
  .shop-map iframe { height: 220px; }
  .reviews-grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .review-card { padding: 1.05rem 1.1rem 0.95rem; }
  .legal-body .review-card::before { font-size: 5rem; }
}

/* ---- Галерея наград (awards.html) ---- */
/* Сканы дипломов — вертикальные листы примерно 3:4, поэтому карточка задаёт
   пропорцию сама, а не тянется по содержимому: иначе ряд рвётся на разной
   высоте подписей. object-fit: contain — лист виден целиком, без обрезки
   печати и подписей на самом дипломе.

   Наград в периоде до пятидесяти, поэтому они листаются, как на прежнем сайте,
   а не выкладываются простыней на десять экранов. Механика — родная прокрутка
   с scroll-snap: свайп на телефоне, колесо и трекпад на десктопе работают сами,
   без скрипта; стрелки и счётчик страниц ему только помогают. Поэтому при
   выключенном JS галерея остаётся полностью проходимой. */
.awards-slider { position: relative; margin: 1.4rem 0 1.1rem; }
.awards-track {
  --per: 4;
  --awards-gap: 1.2rem;
  list-style: none;
  display: flex;
  gap: var(--awards-gap);
  margin: 0;
  /* Запас сверху и снизу — под подъём карточки на ховере и её тень:
     overflow-x: auto делает контейнер обрезающим и по вертикали тоже. */
  padding: 6px 0 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: rgba(62,122,152,0.34) rgba(62,122,152,0.1);
  scrollbar-width: thin;
}
.awards-track::-webkit-scrollbar { height: 8px; }
.awards-track::-webkit-scrollbar-track {
  background: rgba(62,122,152,0.1);
  border-radius: 99px;
}
.awards-track::-webkit-scrollbar-thumb {
  background: rgba(62,122,152,0.34);
  border-radius: 99px;
}
.awards-track > .award {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--awards-gap)) / var(--per));
  scroll-snap-align: start;
}
.award { padding-left: 0; margin: 0; }
.legal-body .award { padding-left: 0; margin: 0; }
.legal-body .award::before { content: none; }
/* Селектор с .legal-body намеренно: у ссылок в тексте страницы есть
   подчёркивание (.legal-body a), а карточка — не текстовая ссылка, и
   подчёркивать в ней подпись незачем. Подчёркивание наследуется от ссылки
   вниз, и снять его правилом для вложенного .award-name нельзя. */
.legal-body .award-link { text-decoration: none; }
.award-link {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  padding: 0.8rem 0.8rem 0.9rem;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(62,122,152,0.16);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1), box-shadow 0.28s cubic-bezier(.2,.7,.3,1),
    border-color 0.28s cubic-bezier(.2,.7,.3,1);
}
.award-link:hover {
  transform: translateY(-4px);
  border-color: rgba(62,122,152,0.34);
  box-shadow: 0 22px 40px -26px rgba(20,49,63,0.34);
}
.award-link:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 3px; }
.award-img {
  width: 100%;
  /* height: auto обязателен. В разметке у каждого скана свои width и height —
     они держат место до загрузки и спасают от сдвига вёрстки, но браузер
     считает их заданными обеими сторонами и игнорирует aspect-ratio. Тогда
     карточка вытягивалась на натуральную высоту скана (до 589px), а во флекс-
     дорожке по этой высоте растягивались и все остальные. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(20,49,63,0.07);
}
.award-cap {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: auto;
}
.award-year {
  font-family: var(--ff-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glacier-d);
}
.award-name {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ink);
}
/* Панель управления над лентой: стрелки и «страница N из M». Кнопки рисует
   скрипт — без него панель пустая и не занимает места.
   Место под неё не резервируем: замер показал, что сдвиг на этом участке даёт
   не появление кнопок (они успевают к первой отрисовке), а подмена системного
   шрифта на Fira Sans — от неё вводный абзац становится на строку выше. */
.awards-nav {
  display: none;
  align-items: center;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
}
.awards-nav.is-ready { display: flex; }
.awards-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(62,122,152,0.24);
  border-radius: 50%;
  color: var(--glacier-d);
  cursor: pointer;
  transition: background 0.24s cubic-bezier(.2,.7,.3,1), border-color 0.24s cubic-bezier(.2,.7,.3,1),
    color 0.24s cubic-bezier(.2,.7,.3,1), opacity 0.24s cubic-bezier(.2,.7,.3,1);
}
.awards-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.awards-arrow:hover:not(:disabled) {
  background: var(--glacier-d);
  border-color: var(--glacier-d);
  color: #fff;
}
.awards-arrow:focus-visible { outline: 2px solid var(--glacier-d); outline-offset: 3px; }
/* На крайних страницах кнопка гаснет, но остаётся на месте — иначе счётчик и
   вторая стрелка прыгали бы при каждом пролистывании до края. */
.awards-arrow:disabled { opacity: 0.32; cursor: default; }
.awards-count {
  margin: 0 0 0 0.3rem;
  font-family: var(--ff-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Отступ держала снятая подпись под сеткой документов; без неё ссылка на
   награды прилипала к карточкам. */
.docs-more { margin: 2.4rem 0 0; font-size: 0.95rem; }
.docs-more a { color: var(--glacier-d); text-decoration: none; }
.docs-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Сколько сканов в кадре. Меньше одного не бывает, а на узком экране два уже
   не дают прочитать подпись под листом. */
@media (max-width: 1023px) {
  .awards-track { --per: 3; }
}
@media (max-width: 767px) {
  .awards-track { --per: 2; --awards-gap: 0.8rem; }
}
@media (max-width: 430px) {
  .awards-track { --per: 1; }
}
/* «Без анимации смысл не теряется»: пролистывание никуда не девается, уходит
   только плавность — кадр сменяется сразу, без проезда. */
@media (prefers-reduced-motion: reduce) {
  .awards-track { scroll-behavior: auto; }
}

/* ---- Снимки лаборатории (lab.html) ---- */
/* Та же листалка, что у наград, но содержимое другое: не вертикальные сканы
   дипломов, которые надо показать целиком, а горизонтальные фотографии. Им
   нужна своя пропорция, обрезка по кадру вместо полей по бокам и по две
   карточки в ряду — на четырёх снимок становится с почтовую марку.
   Селектор из двух классов намеренно перекрывает и медиазапросы галереи наград
   (у тех вес меньше), поэтому своя раскладка на узких экранах — ниже. */
.lab-shots .awards-track { --per: 2; }
.lab-shots .award-img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 767px) {
  .lab-shots .awards-track { --per: 1; }
}

/* ---- Признаки подлинной бутылки (lab.html) ---- */
/* Список и снимок маркировки рядом. Снимок липкий: список длиннее него, и без
   position: sticky нижние пункты читались бы напротив пустого места. */
.guard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 2rem;
  align-items: start;
  margin: 1.6rem 0 0;
}
.legal-body .guard-list {
  /* Родная нумерация <ol> здесь лишняя: номер рисует счётчик в ::before,
     и без этого пункт начинался бы с двух цифр подряд — «1. ① Колпачок». */
  list-style: none;
  counter-reset: guard;
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}
.legal-body .guard-list > li {
  counter-increment: guard;
  position: relative;
  padding: 0 0 0 2.6rem;
  margin: 0;
}
/* Точка-маркер из .legal-body li здесь не нужна — её место занимает номер. */
.legal-body .guard-list > li::before {
  content: counter(guard);
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: rgba(62,122,152,0.1);
  border-radius: 50%;
  font-family: var(--ff-label);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--glacier-d);
}
.legal-body .guard-list > li > p { margin: 0; }
.guard-part {
  font-family: var(--ff-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glacier-d);
}
.legal-body .guard-list > li > .guard-part { margin-bottom: 0.25rem; }
.guard-figure {
  position: sticky;
  top: 92px;
  margin: 0;
}
.guard-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.guard-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
@media (max-width: 860px) {
  /* Снимок под списком: в одну колонку он сжимается до нечитаемого, а буквы
     КМВ и дату розлива на нём как раз и надо разглядеть. */
  .guard { grid-template-columns: 1fr; gap: 1.6rem; }
  .guard-figure { position: static; max-width: 420px; }
}

/* ---- Возврат на главную (внутренние страницы) ---- */
.legal-back {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(62,122,152,0.16);
  font-size: 0.95rem;
}
.legal-back a { color: var(--glacier-d); text-decoration: none; }
.legal-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Лента новостей ---- */
/* Лента приходит из JSON уже после первой отрисовки: пустое состояние сменяется
   карточками, и всё, что ниже, — ссылка возврата и подвал — прыгает. Замер дал
   CLS 0.201 при пороге 0.1.
   Резерв обязан существовать до запроса JSON, поэтому он живёт здесь, а не в
   скрипте: если ставить min-height в тот же кадр, когда вставляются карточки,
   он не резервирует ничего (проверено — CLS не менялся).
   Высота под две карточки. Лента из одной-двух записей укладывается в неё без
   сдвига вообще; более длинная сдвигает подвал, но втрое меньше, чем без
   резерва. Снимать его после заполнения нельзя: короткая лента тогда
   схлопывается и сдвиг возвращается. */
.news-feed { min-height: 330px; }

.news-empty {
  margin: 0;
  padding: 2.2rem 1.8rem;
  background: rgba(255,255,255,0.6);
  border: 1px dashed rgba(62,122,152,0.28);
  border-radius: 14px;
  color: var(--ink);
  font-size: 0.98rem;
  text-align: center;
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
}
.news-item {
  display: grid;
  /* Фото фиксированной колонкой, текст забирает остаток. Когда фото нет,
     .news-body просто занимает всю ширину — отдельного правила не нужно,
     первый трек схлопывается по auto. */
  grid-template-columns: auto 1fr;
  gap: 0 1.6rem;
  align-items: start;
  padding: 1.5rem 1.7rem;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(62,122,152,0.18);
  border-radius: 16px;
  /* На запись ссылаются снаружи (кнопка «Фоторепортаж» в хронике). Без отступа
     шапка накрыла бы дату и заголовок — человек попал бы точно в новость и не
     понял, в какую. */
  scroll-margin-top: calc(var(--header-h) + 1.2rem);
}
/* Пришли по прямой ссылке — подсвечиваем нужную запись, иначе в ленте из трёх
   десятков одинаковых карточек непонятно, ради какой всё затевалось. */
.news-item.is-targeted {
  border-color: rgba(62,122,152,0.55);
  box-shadow: 0 0 0 3px rgba(62,122,152,0.12);
}
.news-photo { display: block; width: 232px; }
.news-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
}
.news-date {
  display: block;
  font-family: var(--ff-label);
  /* Дата — подпись, а не заголовок: средний вес вместо жирного. */
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glacier-d);
  margin-bottom: 0.5rem;
}
.news-title {
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--deep);
  margin: 0 0 0.6rem;
}
.news-text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink);
}
.news-text + .news-text { margin-top: 0.75rem; }

/* Свёрнутая запись показывает первый абзац; остальное открывается по кнопке.
   Три десятка полных новостей подряд читать невозможно, а резать текст на
   «Подробнее» с уходом на старый сайт нельзя — его не будет. */
.news-full { margin: 0.85rem 0 0; }
.news-full > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-family: var(--ff-label);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--glacier-d);
  /* Свой треугольник вместо системного: у Safari он рисуется иначе. */
  list-style: none;
}
.news-full > summary::-webkit-details-marker { display: none; }
.news-full > summary::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 0.2s ease;
}
.news-full[open] > summary::after { transform: translateY(0.06rem) rotate(-135deg); }
.news-full > summary:hover { color: var(--deep); }
.news-rest { margin-top: 0.85rem; }
.news-rest > .news-text:first-child { margin-top: 0; }

/* Полоса кадров: одинаковые плитки, кроп ближе к верху — у грамот и
   сертификатов узнаваемая часть именно там. Не вплотную к краю: на
   вертикальных снимках из зала сверху остаётся один потолок. */
.news-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.news-gallery .news-shot { display: block; }
.news-gallery img {
  display: block;
  width: 100%;
  /* height:auto обязателен: атрибут height в разметке — это подсказка вида
     height:480px, и пока её не сняли, кадр тянется во всю свою высоту, а
     aspect-ratio молча не работает. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 10px;
}

/* Свои ролики сняты вертикально с телефона: ограничиваем ширину, иначе
   один такой кадр занимает экран целиком и текст записи уезжает вниз. */
.news-clips { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.news-clip { flex: 1 1 200px; max-width: 250px; margin: 0; }
.news-clip video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--deep);
}
.news-clip figcaption { margin-top: 0.5rem; font-size: 0.86rem; line-height: 1.45; opacity: 0.75; }

.news-more { margin: 0.9rem 0 0; font-size: 0.94rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.news-more a,
.news-link { color: var(--glacier-d); text-decoration: none; }
.news-more a:hover,
.news-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* У ссылки на ролик — маленький треугольник «play». */
.news-link.is-video::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.45rem;
  border-left: 0.55rem solid currentColor;
  border-top: 0.34rem solid transparent;
  border-bottom: 0.34rem solid transparent;
}

/* Перепечатки в СМИ. Одну новость про запуск лимонадов подхватили два
   десятка изданий и каналов — списком ссылок это простыня, плашками
   читается как перечень изданий и не спорит с текстом записи. */
.news-sources {
  margin: 1.15rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(62,122,152,0.18);
}
.news-sources-label {
  margin: 0 0 0.6rem;
  font-family: var(--ff-label);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.news-source-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.news-source {
  display: inline-block;
  padding: 0.32rem 0.72rem;
  border: 1px solid rgba(62,122,152,0.28);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--glacier-d);
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.news-source:hover,
.news-source:focus-visible {
  background: var(--glacier-d);
  border-color: var(--glacier-d);
  color: #fff;
}

@media (max-width: 767px) {
  /* Фото над текстом: 232px рядом с абзацем на 390px не оставляют строке места. */
  .news-item { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.2rem 1.3rem; }
  .news-photo { width: 100%; }
  .news-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* Ролики на телефоне всё равно встают по одному в ряд: потолок в 250px
     оставлял бы справа пустую треть колонки. */
  .news-clip { max-width: none; }
}

/* ── История: полоса времени ─────────────────────────────────────────── */

/* Хроника шире обычной текстовой страницы: рядом с абзацем стоит фотография,
   в 820px они оба становятся тесными. */
.legal-inner.is-wide { max-width: 1040px; }

.timeline {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0 0 0 2.6rem;
  position: relative;
}
/* Нить воды вдоль дат. Сплошная линия обрывалась бы у первого и последнего
   года ступенькой, поэтому концы уходят в прозрачность. */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(111, 168, 196, 0) 0%,
    rgba(111, 168, 196, 0.5) 5%,
    rgba(111, 168, 196, 0.5) 95%,
    rgba(111, 168, 196, 0) 100%
  );
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(210px, 26vw, 300px) minmax(0, 1fr);
  grid-template-areas:
    "year year"
    "photo text";
  gap: 0 2rem;
  align-items: start;
  margin-bottom: 3.4rem;
}
.tl-item:last-child { margin-bottom: 0; }

/* Узелок на нити — ровно напротив года. Смещение равно отступу .timeline,
   так что кружок садится центром на линию. */
.tl-item::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--glacier);
}

.tl-year {
  grid-area: year;
  margin: 0 0 1rem;
  font-family: var(--ff-display);
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  font-weight: 600;
  line-height: 1;
  color: var(--glacier-d);
}

/* Кадры разной ориентации: панорамы цехов и вертикальные сканы сертификатов.
   Рамка держит общую пропорцию, а снимок показывается целиком — обрезка съела
   бы у сертификата печать и подписи. */
.tl-figure {
  grid-area: photo;
  margin: 0;
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.tl-photo {
  display: block;
  width: 100%;
  /* height: auto обязателен: с width/height в разметке браузер иначе не смотрит
     на aspect-ratio. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 8px;
}

.tl-text { grid-area: text; }
.tl-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
}
/* Почти все записи хроники — один абзац, поэтому у p стоит margin: 0.
   Там, где абзацев несколько, без этого правила они слипаются в сплошной текст. */
.tl-text p + p { margin-top: 0.75rem; }

@media (max-width: 767px) {
  /* Фотография над текстом: 210px рядом с абзацем на 390px не оставляют
     строке места. */
  .timeline { padding-left: 1.9rem; }
  .tl-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "year"
      "photo"
      "text";
    gap: 0;
    margin-bottom: 2.8rem;
  }
  .tl-item::before { left: -1.9rem; top: 0.35rem; }
  .tl-year { margin-bottom: 0.8rem; }
  .tl-figure { margin-bottom: 1.1rem; }
}

/* ==================================================================
   Легенда бренда (story.html) — один экран
   ==================================================================
   Страница целиком — это кадр горного заката и легенда поверх него; следом
   сразу подвал. Кадр 16:9 (1365x768), и весь макет построен так, чтобы он был
   виден целиком: в ландшафте пропорции окна почти совпадают с пропорциями
   снимка, в портрете кадр вынесен отдельной лентой над текстом. */
.legend-page {
  padding: 0;
  background: var(--paper);
}
.legend {
  position: relative;
  display: flex;
  align-items: center;
  /* Ровно один экран: svh, а не vh, чтобы адресная строка мобильного браузера
     не срезала низ плашки. Волна подвала нарисована ВЫШЕ своей секции
     (.footer-waterline сидит на bottom: 100%), поэтому она наезжала на низ
     кадра. Отдаём ей её высоту сверх экрана: первые 100svh — только легенда,
     бирюза начинается ровно за сгибом. */
  --legend-wave: clamp(58px, 7vw, 92px);
  min-height: calc(100svh + var(--legend-wave));
  /* Сверху ровно столько, чтобы уйти из-под шапки (она fixed, 4.5rem), плюс
     небольшой воздух: полноценный gutter выталкивал плашку за высоту экрана,
     а весь смысл страницы — один экран. Нижний отступ включает волну, иначе
     центрирование увело бы текст под неё. */
  padding: calc(4.5rem + 1rem) var(--gutter)
           calc(clamp(1.5rem, 3vw, 2.5rem) + var(--legend-wave));
  overflow: hidden;
  background: var(--deep);
}
.legend-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.legend-photo img {
  display: block;
  width: 100%;
  height: 100%;
  /* Пропорции снимка (1.78) и типичного окна (1.6-1.8) почти совпадают, так
     что cover срезает считаные проценты по краям — кадр читается целиком.
     Окно смещено чуть выше центра: внизу голый камень, вверху вершина. */
  object-fit: cover;
  object-position: 50% 42%;
  animation: bgIn 1.6s 0.05s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .legend-photo img { animation: none; }
}
/* Ролик ложится ровно поверх фотографии, кадр в кадр: и рамка, и точка обзора
   у них одинаковые, поэтому подмена не читается. z-index намеренно не задан —
   позиционированный элемент без него рисуется по порядку в разметке: выше
   картинки, но ниже ::after, иначе притеняющий градиент ушёл бы под видео. */
.legend-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
.legend-video.is-on { opacity: 1; }
/* Плашки под текстом нет — набор лежит прямо на кадре, поэтому читаемость
   держит сам кадр: слева он уходит в глубокую тень, справа не тронут вовсе.
   Тень тянется до 72% ширины и гаснет плавно, без видимой кромки, — вершина
   и закат остаются в полную силу. Второй градиент подбирает низ: там светлый
   освещённый камень, на нём цитата и кнопка иначе теряются. */
.legend-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(6,24,33,0.93) 0%,
      rgba(6,24,33,0.90) 34%,
      rgba(6,24,33,0.82) 50%,
      rgba(6,24,33,0.46) 62%,
      rgba(6,24,33,0.14) 72%,
      transparent 82%),
    linear-gradient(0deg, rgba(6,24,33,0.42) 0%, transparent 34%);
}
.legend-inner {
  position: relative;
  z-index: 2;
  width: min(var(--wrap), 100%);
  margin: 0 auto;
}
/* Никакой коробки: ни фона, ни рамки, ни скругления, ни тени. Текст стоит
   прямо на кадре и держится только на левой шторке (.legend-photo::after) —
   так экран читается плакатом, а не выноской поверх фотографии.
   Единственный «каркас» — волосяная линия слева: она гаснет к обоим концам,
   поэтому читается типографской чертой, а не кромкой плашки. */
.legend-panel {
  position: relative;
  width: min(560px, 100%);
  padding-left: clamp(1.1rem, 2.2vw, 1.75rem);
  /* Фирменное золото (--gold) на затенённом кадре даёт около 2:1 — для набора
     мелким кеглем этого мало. Берём его же светлый замес: тон читается тем же,
     контраст выходит за 5:1. В портрете переменная меняется на тёмную. */
  --legend-accent: #EFDCAE;
}
.legend-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.50) 14%,
    rgba(255,255,255,0.50) 86%,
    transparent 100%);
}
.legend-panel .eyebrow {
  margin-bottom: 0.5rem;
  color: var(--legend-accent);
}
.legend-title {
  font-family: var(--ff-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.14;
  color: #FFFFFF;
  margin: 0 0 0.7rem;
  /* Кадр под набором живой — он ещё и оживает роликом. Мягкая тень страхует
     те кадры, где по левому краю проходит светлое облако. */
  text-shadow: 0 2px 24px rgba(6,22,30,0.55);
}
.legend-lead {
  margin: 0;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 16px rgba(6,22,30,0.5);
}
.legend-elements {
  margin: clamp(1rem, 2vw, 1.4rem) 0 clamp(1rem, 2vw, 1.35rem);
  display: grid;
  gap: 0.5rem;
}
.legend-el {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.legend-el:first-child {
  padding-top: 0;
  border-top: 0;
}
.legend-el dt {
  font-family: var(--ff-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Тёплое золото по холодному кадру: названия стихий отделяются от описаний
     цветом, а не размером. */
  color: var(--legend-accent);
}
.legend-el dd {
  margin: 0;
  font-size: clamp(0.88rem, 1.05vw, 0.96rem);
  line-height: 1.5;
  /* Не полупрозрачный серый: под текстом живой кадр, и всё, что ниже 0.9
     белого, на светлых участках облаков проваливается ниже нормы 4.5. */
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 14px rgba(6,22,30,0.5);
}
.legend-quote {
  margin: 0 0 clamp(1.1rem, 2vw, 1.4rem);
  padding-left: 0.9rem;
  border-left: 2px solid rgba(217,184,118,0.75);
  font-family: var(--ff-serif);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 16px rgba(6,22,30,0.5);
}
.legend-panel .btn { margin: 0; }

/* Портрет: 16:9 в вертикальном окне пришлось бы резать до полоски, а кадр
   нужен целиком — поэтому фотография идёт лентой во всю ширину со своими
   пропорциями, а текст встаёт под ней и слегка на неё заходит. */
@media (max-width: 900px), (orientation: portrait) {
  .legend {
    display: block;
    min-height: 0;
    /* Волна подвала и здесь наезжает сверху на секцию — оставляем ей место,
       иначе она срезает последние строки. */
    padding: 4.5rem 0 calc(clamp(2rem, 6vw, 3rem) + var(--legend-wave));
    background: var(--paper);
  }
  .legend-photo {
    position: relative;
    inset: auto;
  }
  .legend-photo img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
  /* Высоту ленты задаёт картинка, ролик просто накрывает её. Коробка и ролик
     оба 16:9, так что cover тут ничего не срезает. */
  .legend-photo::after { display: none; }
  .legend-inner {
    padding: 0 var(--gutter);
    margin-top: clamp(1.2rem, 4vw, 1.9rem);
  }
  /* Здесь под текстом уже не кадр, а бумага: шторки нет, наезжать на
     фотографию нечем — значит и набор возвращается к тёмному. Волосяная
     черта слева остаётся, только меняет цвет на бирюзовый. */
  .legend-panel {
    width: 100%;
    padding-left: 1.1rem;
    --legend-accent: var(--glacier-d);
  }
  .legend-panel::before {
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(62,122,152,0.45) 12%,
      rgba(62,122,152,0.45) 88%,
      transparent 100%);
  }
  .legend-title {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
    color: var(--deep);
    text-shadow: none;
  }
  .legend-lead { color: var(--ink); text-shadow: none; }
  .legend-elements { gap: 0.35rem; }
  .legend-el {
    padding-top: 0.42rem;
    border-top-color: rgba(62,122,152,0.2);
  }
  .legend-el dt { color: var(--deep); }
  .legend-el dd { color: var(--ink); opacity: 0.84; text-shadow: none; }
  .legend-quote {
    border-left-color: var(--glacier);
    color: var(--ink);
    text-shadow: none;
  }
}
@media (max-width: 420px) {
  .legend-el { grid-template-columns: 1fr; }
  .legend-el dd { line-height: 1.45; }
}