/* ═══════════════════════════════════════════════════════════════
   Витрина RESTYLE v2 «Последний слой»: свет прибывает.
   Палитра целиком из фотографий бренда - ни одного придуманного
   цвета. Фон перетекает по трём актам одной переменной --stage.
   Фото - предметы на поле, каждое в честном размере (без апскейла).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --carbon: 33 26 19;
  --carbon-lift: 51 41 30;
  --trowel: 180 177 170;
  --limestone: 239 237 232;
  --ochre: 156 107 60;
  --ink: 23 19 16;
  --bone: 244 242 237;

  --stage: 0; /* 0 = тьма, 0.5 = полутон, 1 = свет; двигает JS по прогрессу */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid: 420ms;
  --gut: clamp(1.2rem, 4vw, 4rem);
  --h1: clamp(3.4rem, 9.5vw, 8rem);
  --max: 1440px; /* та же ширина, что у остальных витрин клуба (main.css) */
}

* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  background: rgb(var(--carbon));
  color: rgb(var(--bone));
  transition: none;
}
body.is-light { color: rgb(var(--ink)); }
h1, h2, h3 { font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; }
a { color: inherit; }
img { display: block; }

/* фон-подложка на весь документ, читает --stage через JS-присвоение
   background-color напрямую (не CSS-переход по scroll - дороже и дёрганее) */
.stagebg {
  position: fixed; inset: 0; z-index: -1;
  background: rgb(var(--carbon));
  pointer-events: none;
}

/* материальная текстура поверх подложки в светлом акте - настоящее макро
   штукатурки, не голый цвет. Без этого хвост страницы (идеи/faq/контакт)
   читается как дефолт "кремовый фон + антиква + тонкие линии". Непрозрачность
   держит JS вместе с --stage: 0 в тьме, растёт к свету. */
.stagetex {
  position: fixed; inset: -10%;
  z-index: -1;
  background-image: url('/static/img/otdelka/shtukaturka-stena.webp');
  background-size: 900px 900px;
  background-repeat: repeat;
  filter: blur(1.5px) saturate(0.7);
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 400ms linear;
}

/* ── атмосферное свечение: даёт фону глубину вместо плоской заливки,
   приём с витрины Elspace - тёплое пятно "будто лампа за кадром",
   не декоративный градиент. Видно в тёмном акте, гаснет к свету. ── */
.stageglow {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms linear;
  background:
    radial-gradient(42vmax 42vmax at 12% 8%, rgba(156,107,60,0.12), transparent 60%),
    radial-gradient(48vmax 48vmax at 88% 92%, rgba(90,110,130,0.07), transparent 65%);
}
body.is-light .stageglow { opacity: 0; }
/* статика, без анимации - по жалобе на торможение: движущийся градиент на
   весь экран стоил перерисовки, тихого света без движения достаточно */

/* зерно поверх подложки, режим наложения переключается по акту классом на body */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 80;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
body.is-light::after { mix-blend-mode: multiply; }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 3%); }
  40% { transform: translate(3%, -2%); }
  60% { transform: translate(-3%, -3%); }
  80% { transform: translate(2%, 2%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

section { position: relative; padding: clamp(3rem, 7vw, 5.5rem) var(--gut); }
section[id] { scroll-margin-top: 5.5rem; }

/* ── номер акта: гигантский полупрозрачный знак в головке секции,
   заполняет пустой угол (приём "03" из слоёв, распространён на все головки) ── */
.act-mark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: clamp(0.5rem, 3vw, 2.5rem); top: 0.5rem;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(6rem, 14vw, 12rem); line-height: 1;
  color: rgb(var(--ochre)); opacity: 0.14;
}
@media (max-width: 640px) { .act-mark { display: none; } }
.raw, .colors, .origin, .ideas { overflow: clip; }
.raw > .rv, .colors__head, .origin__head, .ideas__head { position: relative; z-index: 1; }

/* ── фоновый знак клуба: "АРХИМОДНЫЙ" гигантской типографикой,
   связующий приём контура - у каждой витрины в своей теме ── */
.club-mark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 0; overflow: clip;
  pointer-events: none; user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.club-mark span {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(4rem, 16vw, 15rem); letter-spacing: 0.02em;
  color: rgb(var(--ochre)); opacity: 0.045; white-space: nowrap;
}

/* ── полоса роли клуба ── */
.clubbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding: 0.7rem var(--gut);
  background: rgb(var(--carbon-lift));
  color: rgb(var(--bone));
  font-size: 0.82rem;
  position: relative; z-index: 50;
}
.clubbar a { text-decoration: none; border-bottom: 1px solid rgba(244,242,237,0.4); transition: border-color var(--t-fast) var(--ease); }
.clubbar a:hover { border-color: rgb(var(--bone)); }

/* ── шапка ── */
.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem var(--gut);
  position: sticky; top: 0; z-index: 60;
  background: rgba(33,26,19,0.72);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(244,242,237,0.12);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
body.is-light .top { background: rgba(239,237,232,0.82); border-color: rgba(23,19,16,0.1); }
.top__logo { font-family: 'Oswald', sans-serif; font-size: 1.3rem; text-decoration: none; letter-spacing: 0.01em; }
.top__logo i { color: rgb(var(--ochre)); font-style: normal; }
.top__nav { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); font-size: 0.86rem; }
.top__nav a { text-decoration: none; opacity: 0.72; transition: opacity var(--t-fast) var(--ease); }
.top__nav a:hover { opacity: 1; }
@media (max-width: 640px) { .top__nav { display: none; } }

/* ── акт I: пролог ── */
.hero {
  min-height: 92svh;
  display: flex; align-items: center; justify-content: center;
  padding: 4.5rem var(--gut) 5.5rem;
  position: relative;
  overflow: hidden;
}
/* курсор как фонарь в тёмной мастерской: под ним проявляется настоящая
   фактура нанесённой штукатурки (тот же кадр, что в сцене "Слои") - фон
   героя связан с материалом буквально, не декоративным пятном света */
.hero__texture {
  position: absolute; inset: 0; z-index: 1;
  background-image: url('/static/img/otdelka/shtukaturka-stena.webp');
  background-size: 640px 640px; background-repeat: repeat;
  filter: grayscale(0.25) brightness(0.75) contrast(1.05);
  opacity: 0.4;
  transition: opacity 400ms var(--ease);
  -webkit-mask-image: radial-gradient(circle 340px at var(--sx,50%) var(--sy,40%), #000 0%, transparent 72%);
          mask-image: radial-gradient(circle 340px at var(--sx,50%) var(--sy,40%), #000 0%, transparent 72%);
  pointer-events: none;
}
.hero__texture.is-active { opacity: 0.65; }
.hero__spot {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle 280px at var(--sx,50%) var(--sy,40%), rgba(156,107,60,0.16), transparent 70%);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.hero__spot.is-active { opacity: 1; }
/* без наведения (тач/статика) - фактура едва видна широким пятном по центру,
   страница не остаётся голой на мобильном */
@media (hover: none) {
  .hero__texture { -webkit-mask-image: radial-gradient(circle 60vw at 50% 45%, #000 0%, transparent 85%); mask-image: radial-gradient(circle 60vw at 50% 45%, #000 0%, transparent 85%); opacity: 0.25; }
}
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; max-width: 60rem; }
.hero__prop { width: min(300px, 38vw); height: auto; border-radius: 1px; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); }
.hero__kicker { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ochre)); margin-bottom: 0.6rem; }
.hero__title { font-size: var(--h1); line-height: 0.96; }
.hero__title span { display: block; overflow: hidden; }
.hero__title span b { display: block; font-weight: 500; transform: translateY(110%); font-style: normal; }
.no-js .hero__title span b { transform: none; }
.hero__lead { max-width: 42ch; color: rgba(244,242,237,0.68); font-size: 1.08rem; margin: 0 auto; }
.hero__scroll { font-size: 0.78rem; color: rgba(244,242,237,0.45); }

/* ── лента брендов: бегущая строка внизу пролога, мгновенный сигнал уровня поставщика ── */
.hero__brands {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1rem 0;
  border-top: 1px solid rgba(244,242,237,0.12);
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero__brands-track {
  display: flex; gap: 2.5rem; width: max-content;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244,242,237,0.4);
  animation: brands-scroll 42s linear infinite;
}
.hero__brands-track span { flex-shrink: 0; }
.hero__brands-track span::after { content: '·'; margin-left: 2.5rem; color: rgb(var(--ochre)); opacity: 0.6; }
@keyframes brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero__brands-track { animation: none; } }

/* ── акт I: сырьё ── */
.raw { display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; text-align: center; padding-bottom: 2rem; }
.raw__strip { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; justify-content: center; }
.raw__item { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.raw__item img { width: min(255px, 42vw); height: auto; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55); }
.raw__label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244,242,237,0.55); }
.raw__arrow { color: rgb(var(--ochre)); font-size: 1.4rem; align-self: center; }
.raw__text { max-width: 52ch; color: rgba(244,242,237,0.72); }
@media (max-width: 640px) { .raw__strip { flex-direction: column; } .raw__arrow { transform: rotate(90deg); } }

/* ── акт II: слои (pin) ── */
.layers { padding-top: 0; padding-bottom: 0; overflow: clip; }
.layers__pin { position: relative; min-height: auto; display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem); padding: 14vh var(--gut); flex-wrap: wrap; max-width: var(--max); margin: 0 auto; }
.layers__mark-wrap {
  position: absolute; z-index: 0;
  right: clamp(0.5rem, 4vw, 4rem); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: none; user-select: none;
}
.layers__mark {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: clamp(14rem, 32vw, 30rem); line-height: 1;
  color: rgb(var(--ochre)); opacity: 0.16;
}
.layers__mark-cap {
  margin-top: -1.5rem;
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  font-size: clamp(0.9rem, 1.6vw, 1.3rem); letter-spacing: 0.14em;
  color: rgb(var(--ochre)); opacity: 0.32;
}
@media (max-width: 640px) { .layers__mark-wrap { display: none; } }

/* фото - как музейный образец: честный пиксель + оправа с этикеткой,
   "блок" крупнее без апскейла картинки за предел резкости */
.layers__frame {
  position: relative; z-index: 1; flex-shrink: 0;
  background: rgb(var(--carbon-lift));
  padding: 1.1rem 1.1rem 0.9rem;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55);
  border: 1px solid rgba(156,107,60,0.25);
}
.layers__stage { position: relative; width: min(293px, 42vw); aspect-ratio: 1/1; }
.layers__stage img { width: 100%; height: 100%; object-fit: cover; }
.layers__frame-cap {
  margin-top: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(244,242,237,0.45);
  display: flex; justify-content: space-between; gap: 1rem;
}
.layers__coat { position: absolute; inset: 0; opacity: 0; }
.layers__coat.is-active { opacity: 1; }
.layers__text { position: relative; z-index: 1; }
.coat--dim { background: rgb(var(--carbon)); opacity: 0.55; }
.coat--reveal { background: transparent; }
.coat--vosk { background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%); mix-blend-mode: soft-light; }
.layers__text { max-width: 30ch; }
.layers__num { font-size: 0.82rem; color: rgb(var(--ochre)); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; }
.layers__label { font-family: 'Oswald', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 0.9rem; }
.layers__meta { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: rgba(244,242,237,0.7); }
body.is-light .layers__meta { color: rgba(23,19,16,0.68); }
.layers__meta span b { font-weight: 500; }

/* ── акт II: цвет (поля, не карточки) ── */
.colors__head { margin-bottom: 1.5rem; }
.colors__head .lede { max-width: 46ch; }
.colors__field {
  min-height: 42vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
  margin-bottom: 1px;
  position: relative; overflow: clip;
}
.colors__field .name { position: relative; z-index: 1; font-family: 'Oswald', sans-serif; font-size: clamp(2.2rem, 5vw, 4rem); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.colors__field .code { position: relative; z-index: 1; font-size: 0.86rem; color: rgba(255,255,255,0.82); text-shadow: 0 1px 3px rgba(0,0,0,0.3); margin-top: 0.4rem; }
.colors__field .tag { position: relative; z-index: 1; font-size: 0.74rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.3rem; }
.colors__field .code-mark {
  position: absolute; z-index: 0; right: clamp(1rem, 3vw, 2.5rem); bottom: 0.5rem;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(3rem, 9vw, 7rem);
  color: #fff; opacity: 0.14; white-space: nowrap; pointer-events: none;
}
@media (max-width: 640px) { .colors__field .code-mark { display: none; } }
.colors__status { max-width: var(--max); margin-left: auto; margin-right: auto; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(156,107,60,0.28); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.colors__status li { font-size: 0.92rem; color: rgba(23,19,16,0.68); }
.colors__status li b { color: rgb(var(--ink)); font-weight: 500; display: block; margin-bottom: 0.2rem; font-family: 'Oswald', sans-serif; }
.colors__note { margin-top: 1.6rem; font-size: 0.86rem; color: rgba(23,19,16,0.55); max-width: 56ch; }

/* ── привёз в петербург: бренды как объекты дистрибьютора ── */
.origin__head { max-width: 54ch; margin-bottom: 2.6rem; }
.origin__list { max-width: var(--max); margin-left: auto; margin-right: auto; }
.origin__list { display: flex; flex-direction: column; gap: clamp(3.5rem, 8vw, 6rem); }
.origin__item { display: grid; grid-template-columns: minmax(0, 42ch) auto; justify-content: center; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.origin__item:nth-child(even) { grid-template-columns: auto minmax(0, 42ch); }
.origin__item:nth-child(even) .origin__media { order: -1; }
.origin__country { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 0.95; color: rgb(var(--ochre)); opacity: 0.9; }
.origin__brand { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 0.8rem; }
.origin__status { font-size: 0.86rem; color: rgb(var(--ochre)); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.3rem; }
.origin__text { margin-top: 0.9rem; color: rgba(23,19,16,0.68); font-size: 0.98rem; max-width: 42ch; }
.origin__media img { width: 100%; height: auto; box-shadow: 0 30px 70px -30px rgba(23,19,16,0.35); }
.origin__cat-link { display: block; margin-top: 1.4rem; font-size: 0.88rem; color: rgb(var(--ochre)); text-decoration: none; border-bottom: 1px solid rgba(156,107,60,0.4); width: max-content; }
.origin__cat-link:hover { border-bottom-color: rgb(var(--ochre)); }
@media (max-width: 700px) {
  .origin__item, .origin__item:nth-child(even) { grid-template-columns: 1fr; }
  .origin__item:nth-child(even) .origin__media { order: 0; }
}

/* ── акт III: идеи (образцы на поле, разреженно) ── */
.ideas__head { max-width: 52ch; margin-bottom: 2.6rem; }
.ideas__note { font-size: 0.86rem; color: rgba(23,19,16,0.55); margin-top: 0.6rem; }
.ideas__flow { display: flex; flex-direction: column; gap: clamp(3rem, 8vw, 6rem); max-width: var(--max); margin-left: auto; margin-right: auto; }
.ideas__row { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; align-items: center; }
.ideas__row.is-big img { max-width: 758px; width: 100%; height: auto; }
.ideas__row.is-mid { justify-content: center; }
.ideas__row.is-mid img { max-width: 517px; width: 100%; height: auto; }
.ideas__row.is-small { justify-content: center; }
.ideas__row.is-small img { max-width: 400px; width: 100%; height: auto; }
.ideas__cap { font-size: 0.82rem; color: rgba(23,19,16,0.55); margin-top: 0.6rem; max-width: 32ch; }
/* большие кадры одни в ряду - справа гигантская подпись комнаты заполняет поле */
.ideas__row.is-big { justify-content: flex-start; }
.ideas__row-label {
  flex: 1; min-width: 200px;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.95;
  color: rgba(23,19,16,0.1);
}
@media (max-width: 900px) { .ideas__row-label { display: none; } }
.ideas__item img { box-shadow: 0 30px 70px -30px rgba(23,19,16,0.35); filter: blur(6px); opacity: 0; transition: filter 900ms var(--ease), opacity 700ms var(--ease); }
.ideas__item.in img { filter: blur(0); opacity: 1; }

/* ── шоу-рум + андрей: одна секция, стык не плодит лишний воздух ── */
.showroom { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: var(--max); margin-left: auto; margin-right: auto; }
.showroom img { width: 100%; height: auto; box-shadow: 0 30px 70px -30px rgba(23,19,16,0.35); }
.showroom__facts { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.6rem; }
.showroom__facts li { font-size: 0.95rem; color: rgba(23,19,16,0.68); padding-left: 1.2rem; border-left: 2px solid rgba(156,107,60,0.4); }
@media (max-width: 760px) { .showroom { grid-template-columns: 1fr; } }

.person { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid rgba(156,107,60,0.28); max-width: var(--max); margin-left: auto; margin-right: auto; }
.person__portrait { width: 240px; height: auto; box-shadow: 0 20px 50px -20px rgba(23,19,16,0.4); flex-shrink: 0; }
.person__name { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.person__role { font-size: 0.86rem; color: rgb(var(--ochre)); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.3rem; }
.person__text { margin-top: 1rem; color: rgba(23,19,16,0.68); max-width: 46ch; }
.person__works { display: flex; flex-direction: column; gap: 0.7rem; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.04em; color: rgb(var(--ochre)); text-align: right; }
@media (max-width: 860px) {
  .person { grid-template-columns: 1fr; text-align: center; }
  .person__portrait { margin: 0 auto; }
  .person__works { flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ── глава: клуб ── */
.chain { overflow: clip; }
.chain > .rv, .chain__list { position: relative; z-index: 1; }
.chain__list { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.chain__list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.1rem; border: 1px solid rgba(23,19,16,0.18); border-radius: 100px; text-decoration: none; font-size: 0.9rem; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.chain__list a:hover { border-color: rgb(var(--ochre)); background: rgba(156,107,60,0.06); }
.chain__list a.is-here { background: rgb(var(--ink)); color: rgb(var(--limestone)); border-color: rgb(var(--ink)); }
.chain__step { font-family: 'Oswald', sans-serif; color: rgb(var(--ochre)); }
.chain__list a.is-here .chain__step { color: rgb(var(--limestone)); }
.chain__cta { max-width: var(--max); margin: 1.6rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(23,19,16,0.14); font-size: 0.92rem; color: rgba(23,19,16,0.62); }
.chain__cta a { color: rgb(var(--ochre)); text-decoration: none; border-bottom: 1px solid rgba(156,107,60,0.4); }
.chain__cta a:hover { border-bottom-color: rgb(var(--ochre)); }

/* ── faq: два столбца, справа sticky-приглашение закрывает пустоту и даёт целевое действие ── */
.faq__body { display: grid; grid-template-columns: minmax(0, 62ch) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.faq__cta {
  position: sticky; top: 6.5rem;
  background: rgb(var(--carbon)); color: rgb(var(--bone));
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border-left: 3px solid rgb(var(--ochre));
}
.faq__cta .kicker { color: rgb(var(--ochre)); margin-bottom: 0.7rem; }
.faq__cta h3 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.faq__cta p { font-size: 0.9rem; color: rgba(244,242,237,0.65); margin-bottom: 1.2rem; }
.faq__cta a.tel { display: block; font-family: 'Oswald', sans-serif; font-size: 1.15rem; text-decoration: none; margin-bottom: 0.6rem; }
.faq__cta a.tel:hover { color: rgb(var(--ochre)); }
.faq__cta a.messenger { display: block; font-size: 0.9rem; color: rgba(244,242,237,0.8); text-decoration: none; border-bottom: 1px solid rgba(244,242,237,0.3); width: max-content; margin-bottom: 1rem; }
.faq__cta a.messenger:hover { color: rgb(var(--ochre)); border-color: rgb(var(--ochre)); }
.faq__cta .addr { font-size: 0.85rem; color: rgba(244,242,237,0.55); }
@media (max-width: 760px) { .faq__body { grid-template-columns: 1fr; } .faq__cta { position: static; } }

.faq__list { max-width: 62ch; margin-top: 0; display: flex; flex-direction: column; }
.faq__item { position: relative; padding: 1.5rem 0 1.5rem 1.6rem; }
.faq__item::before {
  content: "";
  position: absolute; left: 0; top: 1.85rem;
  width: 0.9rem; height: 3px; border-radius: 2px;
  background: rgb(var(--ochre));
  transform-origin: left center;
}
.faq__item:not(:last-child)::after {
  content: "";
  position: absolute; left: 1.6rem; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(156,107,60,0.35), rgba(156,107,60,0.05) 70%);
}
.faq__q { font-family: 'Oswald', sans-serif; font-size: 1.1rem; margin-bottom: 0.5rem; }
.faq__a { color: rgba(23,19,16,0.68); font-size: 0.95rem; max-width: 56ch; }

/* ── контакты: возврат в тьму, кольцо ── */
.contact { background: rgb(var(--carbon-lift)); color: rgb(var(--bone)); }
.contact h2 { color: rgb(var(--bone)); }
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; margin-top: 2rem; max-width: var(--max); margin-left: auto; margin-right: auto; }
.contact__val a { text-decoration: none; border-bottom: 1px solid rgba(244,242,237,0.35); }
.contact__val a:hover { border-color: rgb(var(--bone)); }
.contact__label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,242,237,0.55); margin-bottom: 0.4rem; }

footer { padding: 2rem var(--gut); display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: space-between; font-size: 0.82rem; color: rgba(244,242,237,0.45); background: rgb(var(--carbon-lift)); }
footer a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }
footer a:hover { border-color: rgba(244,242,237,0.45); }

.kicker { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--ochre)); margin-bottom: 0.9rem; }
.h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.lede { max-width: 58ch; margin-top: 0.9rem; }

/* появления общего назначения */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.rv.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ideas__item img { filter: none !important; opacity: 1 !important; }
  .hero__spot { display: none !important; }
}

/* ── клубный слой ── */
.top__logo .top__club {
  margin-left: 0.5rem; font-size: 0.5625rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: lowercase;
  color: rgb(var(--ochre)); opacity: 0.8; vertical-align: 0.35em;
}
.club-home {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 1.6rem;
  font-size: 0.9375rem; color: rgb(var(--ochre));
  border-bottom: 1px solid rgb(var(--ochre) / 0.4); padding-bottom: 2px;
  transition: color 300ms ease, border-color 300ms ease;
}
.club-home:hover { color: rgb(var(--limestone)); border-color: rgb(var(--limestone)); }
.club-home span { display: inline-block; transition: transform 200ms ease; }
.club-home:hover span { transform: translateX(4px); }


/* ── метка клуба в правом краю шапки: один вид на всех витринах ── */
.top__nav, .top nav { margin-left: auto; }

/* club-mark: страховка от переполнения - фоновое слово шире экрана и на
   узких вьюпортах растягивало страницу вбок */
.club { position: relative; overflow: clip; }

/* ── общий знак клуба в шапке витрины ──
   один и тот же на всех шести: контур дома в языке хаба плюс подпись.
   Цвет берём у шапки через currentColor, поэтому знак одинаково живёт и
   на тёмных витринах, и на светлой «Скандик». Переход - в том же окне:
   клуб это один проект */
.club-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: clamp(0.8rem, 1.6vw, 1.4rem);
  align-self: center;
  text-decoration: none;
  color: inherit;
  opacity: 0.55;
  white-space: nowrap;
  transition: opacity 220ms ease;
}
.club-tag:hover { opacity: 1; }
.club-tag__mark {
  width: 1.35em; height: 1.12em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.club-tag span {
  display: inline-flex; gap: 0.34em; align-items: baseline;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: lowercase;
}
.club-tag span i { font-style: normal; opacity: 0.72; }
@media (max-width: 700px) { .club-tag span { display: none; } .club-tag__mark { width: 1.05em; height: 1.05em; } }

/* ── карточка участника целиком кликабельна ──
   ссылка стоит на display:contents, чтобы не ломать сетку карточки, но
   такой элемент не создаёт своего блока: не было ни курсора-руки, ни
   подсветки, карточка выглядела мёртвой. Растягиваем область клика
   псевдоэлементом на всю карточку и даём внятный отклик */
.chain__i { position: relative; }
.chain__link { display: contents; color: inherit; text-decoration: none; }
.chain__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.chain__i:hover .chain__link::after {
  border-color: currentColor;
  background: rgb(255 255 255 / 0.03);
}
.chain__link:focus-visible::after { border-color: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }

/* ── мобильная доводка: пальцевые цели ──
   замер показал ссылки высотой 17-27px, точки схем 11x11 - в такое трудно
   попасть пальцем. Норма 44px, добираем отступами, чтобы не менять вид */
@media (max-width: 760px) {
  .clubbar a, .foot a, .foot__nav a, .contact a, .kontakt a,
  .chelovek__links a, .club-home, .sem__link a, .lede a {
    display: inline-block;
    padding-block: 0.55rem;
    min-height: 44px;
  }
  .club-tag {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .club-tag__mark { width: 1.05em; height: 1.05em; }
  /* поля у края: текст не должен касаться границы экрана */
  h1, h2, h3, p, li { padding-inline: 0; }
  section > h2, section > p, .poryadok__title, .poryadok__cap { padding-inline: 0.2rem; }
}
@media (max-width: 760px) {
  /* поля формы и согласие: высота под палец */
  .zayavka__input, input[type=text], input[type=tel], input[type=email], textarea { min-height: 44px; padding-block: 0.7rem; }
  .zayavka__consent, label:has(input[type=checkbox]) { min-height: 44px; display: flex; align-items: center; gap: 0.6rem; }
  input[type=checkbox] { width: 22px; height: 22px; flex: none; }
}

/* ── мобильное меню: цвета витрины RESTYLE ── */
.mobmenu, .mobmenu__btn {
  --mm-bg: rgb(var(--carbon));
  --mm-fg: rgb(var(--bone));
  --mm-dim: rgb(var(--trowel));
  --mm-accent: rgb(var(--ochre));
  --mm-rule: rgb(244 242 237 / 0.14);
  --mm-scrim: rgb(23 19 16 / 0.55);
}

/* ── пальцевые цели: логотип, каталог, телефон, мессенджер, футер ── */
@media (max-width: 760px) {
  .top__logo { min-height: 44px; display: inline-flex; align-items: center; }
  .origin__cat-link, .chain__cta a, .tel, .messenger, footer a {
    display: inline-block; padding-block: 0.6rem; min-height: 44px;
  }
  /* флажок держим у первой строки: по центру многострочной метки он висел сам по себе */
  .zayavka__consent { align-items: flex-start; padding-block: 0.3rem; }
  .zayavka__consent input { width: 20px; height: 20px; margin-top: 0.15rem; }
}

/* ── заголовки на телефоне: последнее слово не остаётся одно в строке ── */
@media (max-width: 760px) {
  h2, h3 { text-wrap: balance; }
}

/* ── поля формы на телефоне: 16px ──
   Safari на iOS сам увеличивает страницу, когда фокус попадает в поле
   с кеглем меньше 16px, и вернуть масштаб пальцами уже сложно ── */
@media (max-width: 760px) {
  .zayavka__input, .zayavka input, .zayavka textarea, .zayavka select { font-size: 16px; }
}