@import url('fonts.css');

/* ==========================================================================
   Pravo Print. Визуальная система.
   Палитра и типографика сняты с боевого CSS референса и описаны в
   docs/designs/visual-system.md. Цветных акцентов нет осознанно: типография
   продает печать, любой акцентный цвет конкурирует с изображениями продукции.
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --ink:#000000;
  --ink-soft:#111113;
  --muted:#818D92;
  --muted-2:#646F75;
  --wash-cool:#F4F6F8;
  --wash-warm:#EBE6E8;
  --line:#E0E3E6;
  --line-2:#E8ECEF;

  --display:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:'Manrope','Segoe UI',Arial,sans-serif;

  --container:1220px;
  --gutter:24px;
  --pill:1000px;
  --radius:14px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
}

*,*::before,*::after{box-sizing:border-box}

/* scroll-padding-top: шапка липкая и высотой 78 px. Без этого переход по
   якорю (#zayavka, #calc) ставит заголовок блока ровно под шапку. */
/* scroll-behavior: переходы по якорям (#zayavka, #calc) едут, а не прыгают.
   Системную настройку «уменьшить движение» это уважает: там оно возвращается
   в auto блоком в конце файла. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:94px;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-soft);
  font:400 15px/1.65 var(--body);
  font-feature-settings:'kern' 1;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* --------------------------------- сетка --------------------------------- */

.rp-container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.rp-section{padding:var(--sp-9) 0}
.rp-section--tight{padding:var(--sp-8) 0}
.rp-section--cool{background:var(--wash-cool)}
.rp-section--warm{background:var(--wash-warm)}
.rp-section--dark{background:var(--ink-soft);color:#fff}

/* ------------------------------ типографика ------------------------------ */

.rp-h1,.rp-h2{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  line-height:1.06;
  margin:0;
  color:var(--ink);
}
.rp-h1{font-size:clamp(32px,4.6vw,54px)}
.rp-h2{font-size:clamp(26px,3.2vw,40px)}

.rp-h3{
  font-family:var(--body);
  font-weight:700;
  font-size:20px;
  line-height:1.3;
  margin:0;
  color:var(--ink);
}

.rp-lead{
  font-size:17px;
  line-height:1.6;
  color:var(--muted-2);
  margin:var(--sp-5) 0 0;
  max-width:62ch;
}

.rp-text{max-width:74ch;color:var(--muted-2)}
.rp-text p{margin:0 0 var(--sp-4)}
/* Инфостраница это сплошной текст, поэтому у нее свои отступы и списки:
   в rp-text по умолчанию нет ни ul, ни ol, они приходят из редактора. */
.rp-text--doc{max-width:78ch}
.rp-text--doc ul,.rp-text--doc ol{margin:0 0 var(--sp-4);padding-left:var(--sp-5)}
.rp-text--doc li{margin:0 0 var(--sp-2)}
.rp-text--doc h2:first-child{margin-top:0}
.rp-text--doc a{border-bottom:1px solid var(--line);color:var(--ink)}
.rp-text--doc a:hover{border-bottom-color:var(--ink)}
/* Таблицы SEO-текста приходят из редактора голыми: без линий, шапка по
   центру, следующий абзац впритык (#2 полировки 01.10.2026, 45 страниц).
   Вид как у .rp-table. На телефоне таблица листается внутри себя, а не
   растягивает страницу. */
.rp-text table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0 var(--sp-5);font-size:15px}
.rp-text th,.rp-text td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.rp-text th{color:var(--ink);font-weight:600}
@media (max-width:640px){.rp-text table{display:block;overflow-x:auto}}
.rp-text h2{font-family:var(--display);text-transform:uppercase;font-weight:600;font-size:26px;color:var(--ink);margin:var(--sp-7) 0 var(--sp-4)}

/* Правило референса: капслок никогда без разрядки. */
.rp-eyebrow,.rp-btn,.rp-nav a,.rp-tag,.rp-th{
  text-transform:uppercase;
  letter-spacing:2px;
}
.rp-eyebrow{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  margin:0 0 var(--sp-4);
}
.rp-meta{font-size:13px;color:var(--muted)}

/* -------------------------------- кнопки --------------------------------- */

.rp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-height:52px;
  padding:0 32px;
  border:1px solid var(--ink);
  border-radius:var(--pill);
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.rp-btn:hover{background:#fff;color:var(--ink)}
.rp-btn--ghost{background:transparent;color:var(--ink)}
.rp-btn--ghost:hover{background:var(--ink);color:#fff}
.rp-btn--light{background:#fff;color:var(--ink);border-color:#fff}
.rp-btn--light:hover{background:transparent;color:#fff;border-color:#fff}
.rp-btn--sm{min-height:40px;padding:0 20px;font-size:12px}
.rp-btn--wide{width:100%}

/* -------------------------------- шапка ---------------------------------- */

.rp-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.rp-header__bar{
  display:flex;align-items:center;gap:var(--sp-6);
  min-height:78px;
}
.rp-logo{
  font-family:var(--display);
  font-weight:700;
  font-size:24px;
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.rp-logo span{display:block;font-size:9px;letter-spacing:3px;font-weight:500;color:var(--muted);margin-top:3px}

/* align-items:center обязателен: по умолчанию флекс растягивает пункты до
   высоты самого высокого (stretch), и один перенесенный пункт делал рваными
   все остальные. white-space:nowrap не дает ломать подпись посреди фразы. */
.rp-nav{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto;font-size:12px;font-weight:600}
.rp-nav a{color:var(--muted-2);padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;letter-spacing:1.5px}
.rp-nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* Разделы в шапке (10.09.2026): 20 разделов и 6 услуг. Панель во всю ширину
   шапки, а не у пункта: колонка из двадцати строк у правого края уходила бы за
   экран. Группа тянется на всю высоту полосы, иначе по пути курсора от пункта
   к панели наведение терялось бы на пустом поле шапки. */
.rp-nav{align-self:stretch}
.rp-nav__group{display:flex;align-items:center}
.rp-nav__panel{
  position:absolute;left:0;right:0;top:calc(100% - 1px);
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 var(--line),0 18px 32px -18px rgba(0,0,0,.28);
  padding:var(--sp-5) 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--d-2) var(--ease),transform var(--d-2) var(--ease),visibility 0s linear var(--d-2);
}
.rp-nav__group:hover .rp-nav__panel,.rp-nav__group:focus-within .rp-nav__panel{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.rp-nav__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-1) var(--sp-5)}
.rp-nav__list a{justify-self:start}

.rp-header__cta{display:flex;align-items:center;gap:var(--sp-4)}
.rp-phone{font-family:var(--display);font-size:19px;letter-spacing:.5px;white-space:nowrap}

.rp-burger{
  display:none;width:44px;height:44px;border:1px solid var(--line);
  border-radius:var(--pill);background:#fff;cursor:pointer;
  align-items:center;justify-content:center;
}
.rp-burger i{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.rp-burger i::before,.rp-burger i::after{content:'';position:absolute;left:0;width:16px;height:1.5px;background:var(--ink)}
.rp-burger i::before{top:-5px}
.rp-burger i::after{top:5px}

/* ------------------------------- карточка товара -------------------------- */

/* Цена крупная и узким гротеском, как заголовки: это главный факт страницы.
   Отдельный тон для «по расчету», чтобы отсутствие числа не выглядело
   ошибкой верстки, а читалось как осознанное состояние. */
.rp-price{font-family:var(--display);font-size:34px;font-weight:600;line-height:1.1;margin:var(--sp-5) 0 var(--sp-2)}
.rp-price--calc{color:var(--muted-2);font-size:28px}
.rp-note--tight{margin-top:0;max-width:52ch}
.rp-hero--tight{padding-top:var(--sp-6)}

/* Строка-ссылка в списке конфигураций. Наследует сетку .rp-row, но целиком
   кликабельна, поэтому нужна своя реакция на наведение. */
.rp-row--link{transition:border-color .18s ease,background .18s ease}
.rp-row--link:hover{border-color:var(--ink);background:var(--wash-cool)}
.rp-row--link:hover .rp-btn--ghost{border-color:var(--ink);color:var(--ink)}

/* ------------------------------ хлебные крошки ---------------------------- */

.rp-crumbs{font-size:13px;color:var(--muted);padding:var(--sp-5) 0 0}
.rp-crumbs a{color:var(--muted)}
.rp-crumbs a:hover{color:var(--ink)}
.rp-crumbs span{margin:0 var(--sp-2)}

/* --------------------------------- герой ---------------------------------- */

.rp-hero{padding:var(--sp-8) 0 var(--sp-9)}
.rp-hero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--sp-8);align-items:end}
.rp-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7)}

.rp-bullets{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.rp-bullets li{
  padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  position:relative;
}
.rp-bullets li:last-child{border-bottom:1px solid var(--line)}
.rp-bullets li::before{
  content:'';position:absolute;left:0;top:calc(var(--sp-4) + 9px);
  width:8px;height:8px;border-radius:50%;background:var(--ink);
}

/* --------------------------------- плитки --------------------------------- */

.rp-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.rp-tiles--3{grid-template-columns:repeat(3,1fr)}
.rp-tile{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:172px;
  padding:var(--sp-5);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .18s ease,transform .18s ease;
}
.rp-tile:hover{border-color:var(--ink);transform:translateY(-2px)}
/* overflow-wrap:anywhere: названия набраны капслоком узким гротеском, и
   одно длинное слово («ШИРОКОФОРМАТНАЯ») шире колонки на узком экране.
   Без этого плитка вылезала за край и появлялась горизонтальная прокрутка. */
.rp-tile__name{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1.12;font-weight:500;overflow-wrap:anywhere}
.rp-tile__go{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:var(--sp-5)}
.rp-tile:hover .rp-tile__go{color:var(--ink)}

/* ------------------------------- техкарта --------------------------------- */

.rp-table{width:100%;border-collapse:collapse;font-size:15px}
.rp-table th,.rp-table td{padding:var(--sp-4) 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rp-table th{
  width:34%;font-weight:600;color:var(--ink);font-size:13px;
  text-transform:uppercase;letter-spacing:2px;padding-right:var(--sp-5);
}
.rp-table td{color:var(--muted-2)}
.rp-note{font-size:13px;color:var(--muted);margin-top:var(--sp-5);max-width:70ch}

/* ------------------------------ калькулятор ------------------------------- */

.rp-calc{display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-7);align-items:start}
.rp-calc__fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.rp-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.rp-field__label{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted);font-weight:600}
.rp-select{
  appearance:none;
  width:100%;min-height:52px;
  padding:0 40px 0 18px;
  border:1px solid var(--line);
  border-radius:var(--pill);
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111113' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center;
  font:500 15px var(--body);
  color:var(--ink);
  cursor:pointer;
}
.rp-select:focus{outline:none;border-color:var(--ink)}

.rp-qty{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.rp-qty button{
  min-height:44px;padding:0 18px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:#fff;color:var(--muted-2);
  font:600 14px var(--body);cursor:pointer;
  transition:all .15s ease;
}
.rp-qty button:hover{border-color:var(--ink);color:var(--ink)}
.rp-qty button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.rp-result{
  position:sticky;top:100px;
  padding:var(--sp-6);
  background:var(--ink-soft);color:#fff;
  border-radius:var(--radius);
}
.rp-result__label{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#818D92}
.rp-result__value{font-family:var(--display);font-size:38px;line-height:1.05;margin:var(--sp-2) 0 0;font-weight:600}
.rp-result__unit{font-size:13px;color:#818D92;margin-top:var(--sp-1)}
.rp-result hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:var(--sp-5) 0}
.rp-result__spec{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);font-size:13px}
.rp-result__spec li{display:flex;justify-content:space-between;gap:var(--sp-3);color:#EBE6E8}
.rp-result__spec b{font-weight:600;color:#fff;text-align:right}
.rp-result .rp-btn{margin-top:var(--sp-5)}

/* ------------------------------ типовые позиции --------------------------- */

.rp-rows{display:grid;gap:0}
.rp-row{
  display:grid;grid-template-columns:1.1fr 1fr auto;gap:var(--sp-5);
  align-items:center;
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);
}
.rp-row:first-child{border-top:1px solid var(--line)}
.rp-row__name{font-weight:600;color:var(--ink)}
.rp-row__spec{font-size:14px;color:var(--muted-2)}

/* --------------------------------- этапы ---------------------------------- */

.rp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6) var(--sp-5)}
.rp-step__n{font-family:var(--display);font-size:34px;color:var(--line);font-weight:600;line-height:1}
.rp-step__t{font-weight:700;margin:var(--sp-3) 0 var(--sp-2);color:var(--ink)}
.rp-step__d{font-size:14px;color:var(--muted-2);margin:0}

/* ---------------------------------- FAQ ----------------------------------- */

.rp-faq{border-top:1px solid var(--line)}
.rp-faq__item{border-bottom:1px solid var(--line)}
.rp-faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);
  padding:var(--sp-5) 0;background:none;border:0;cursor:pointer;
  font:600 17px/1.4 var(--body);color:var(--ink);text-align:left;
}
.rp-faq__q::after{content:'+';font-family:var(--display);font-size:26px;font-weight:400;color:var(--muted);line-height:1}
.rp-faq__item[open] .rp-faq__q::after{content:'\2212'}
.rp-faq__a{padding:0 0 var(--sp-5);margin:0;color:var(--muted-2);max-width:80ch}

/* --------------------------------- форма ---------------------------------- */

.rp-form{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.rp-form .rp-field--wide{grid-column:1 / -1}
.rp-input,.rp-textarea{
  width:100%;min-height:52px;padding:14px 20px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:#fff;font:400 15px var(--body);color:var(--ink);
}
.rp-textarea{border-radius:var(--radius);min-height:110px;resize:vertical}
.rp-input:focus,.rp-textarea:focus{outline:none;border-color:var(--ink)}
.rp-input--error,.rp-textarea--error{border-color:#B00020}
.rp-error{font-size:12px;color:#B00020;min-height:16px}
.rp-consent{font-size:12px;color:var(--muted);grid-column:1 / -1;margin:0}
.rp-form__ok{
  grid-column:1 / -1;padding:var(--sp-5);border-radius:var(--radius);
  background:var(--wash-cool);border:1px solid var(--line);
}

/* --------------------------------- подвал --------------------------------- */

.rp-footer{background:var(--ink-soft);color:#fff;padding:var(--sp-8) 0 var(--sp-6)}
.rp-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
.rp-footer h4,.rp-footer__h{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#818D92;margin:0 0 var(--sp-4);font-weight:600}
.rp-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2);font-size:14px}
.rp-footer a{color:#EBE6E8}
.rp-footer a:hover{color:#fff}
.rp-footer__bottom{
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  font-size:12px;color:#818D92;
}

/* -------------------------------- клиенты --------------------------------- */

.rp-clients{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3) var(--sp-6)}
.rp-clients li{list-style:none;padding:var(--sp-3) 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted-2)}

/* ------------------------------- адаптивность ------------------------------ */

@media (max-width:1080px){
  .rp-tiles{grid-template-columns:repeat(3,1fr)}
  .rp-footer__grid{grid-template-columns:1fr 1fr}
}
/* Порог бургера 1200. Было 1040 под пять пунктов (около 1030 px). С группой
   «Услуги» шапке нужно 1162 px, и на 1100 и 1041 кнопки уходили за экран с
   горизонтальной прокруткой (замер в браузере 10.09.2026); запас на полосу
   прокрутки Windows 17 px. */
@media (max-width:1200px){
  .rp-nav{display:none}
  .rp-burger{display:flex}
  .rp-header__bar{gap:var(--sp-4)}
  .rp-nav--open{
    display:grid;position:absolute;left:0;right:0;top:78px;
    background:#fff;border-bottom:1px solid var(--line);
    padding:var(--sp-5) var(--gutter);gap:var(--sp-4);
    /* тень: без нее панель обрывается ровно по строке текста под ней и
       граница читается как поломка верстки, а не как открытое меню */
    box-shadow:0 18px 32px -18px rgba(0,0,0,.28);
  }
  /* Пункты открытого меню не ниже 44 px под палец (#16 полировки 01.10.2026);
     десктоп и подчеркивание при наведении не трогаем. */
  .rp-nav--open a{white-space:normal;min-height:44px;display:flex;align-items:center}
  /* В мобильном меню панели разделов стоят раскрытым списком, а само меню
     прокручивается внутри себя: 26 разделов выше экрана телефона. */
  .rp-nav--open{max-height:calc(100vh - 78px);overflow-y:auto;align-self:auto;overscroll-behavior:contain}
  /* Пока меню открыто, страница под ним не прокручивается (#18), класс ставит rp.js. */
  html.rp-lock,html.rp-lock body{overflow:hidden}
  .rp-nav--open .rp-nav__group{display:block}
  .rp-nav--open .rp-nav__top{color:var(--ink)}
  .rp-nav--open .rp-nav__panel{position:static;opacity:1;visibility:visible;transform:none;transition:none;box-shadow:none;border:0;background:none;padding:var(--sp-2) 0 0}
  .rp-nav--open .rp-nav__list{padding:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
}
@media (max-width:900px){
  :root{--sp-9:64px;--sp-8:48px}
  .rp-hero__grid{grid-template-columns:1fr;gap:var(--sp-6);align-items:start}
  .rp-calc{grid-template-columns:1fr}
  .rp-result{position:static}
  .rp-steps{grid-template-columns:repeat(2,1fr)}
  .rp-clients{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .rp-tiles,.rp-tiles--3{grid-template-columns:repeat(2,1fr)}
  .rp-calc__fields,.rp-form{grid-template-columns:1fr}
  .rp-steps{grid-template-columns:1fr}
  .rp-row{grid-template-columns:1fr;gap:var(--sp-2)}
  .rp-footer__grid,.rp-clients{grid-template-columns:1fr}
  .rp-phone{display:none}
  /* в две колонки уже на 461 px «Широкоформатная печать» капслоком ломалась на две строки */
  .rp-nav--open .rp-nav__list{grid-template-columns:1fr}
  .rp-table th{width:42%;padding-right:var(--sp-4)}
}
/* Узкий телефон: логотип, кнопка и бургер в одну строку не помещаются.
   Кнопка убирается, потому что тот же призыв есть в открытом меню и в
   форме заявки, а бургер это единственный вход в навигацию. */
@media (max-width:460px){
  :root{--gutter:16px}
  .rp-tiles,.rp-tiles--3{grid-template-columns:1fr}
  .rp-header__cta .rp-btn{display:none}
  .rp-logo{font-size:20px}
  .rp-tile{min-height:0}
  .rp-tile__name{font-size:20px}
}

/* ==========================================================================
   СЛОЙ 2. Материал и движение.
   Добавлен поверх базовой системы, ничего из нее не отменяет: палитра,
   гарнитуры и сетка те же. Премиальность здесь берется не цветом, а
   глубиной, фактурой бумаги и хореографией появления. Правило движения
   одно: анимируются только transform и opacity, чтобы не было пересчета
   раскладки и просадки кадров.
   ========================================================================== */

:root{
  /* Одна кривая на весь сайт. Резкий старт, длинный мягкий выход:
     так движение читается как инерция тяжелого предмета, а не как
     линейный проезд. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);

  --d-1:.18s;   /* отклик на курсор */
  --d-2:.32s;   /* смена состояния */
  --d-3:.6s;    /* появление элемента */
  --d-4:.9s;    /* появление крупного блока */

  /* Тени собраны в два слоя: близкий контактный и дальний рассеянный.
     Одиночная тень на любом радиусе выглядит наклейкой. */
  --sh-1:0 1px 2px rgba(16,20,24,.04),0 2px 8px rgba(16,20,24,.04);
  --sh-2:0 2px 6px rgba(16,20,24,.05),0 14px 30px -10px rgba(16,20,24,.14);
  --sh-3:0 4px 10px rgba(16,20,24,.06),0 34px 64px -22px rgba(16,20,24,.30);

  /* Серо-синий референса #818D92 на белом дает 3.41:1 и проваливает порог
     4.5:1 для мелкого текста. Для темных подложек он оставлен без правки
     (на #111113 это 5.5:1), для белых введен затемненный тон того же
     семейства: 4.65:1. Замер приведен в docs/designs/visual-system.md. */
  --muted:#6B767C;
  --muted-on-dark:#9AA5AB;
}

/* Переход между страницами средствами браузера. Никакой библиотеки:
   спецификация View Transitions делает кроссфейд сама, где не поддержана,
   переход просто мгновенный, как и был. */
@view-transition{navigation:auto}

/* ------------------------- фактура бумаги --------------------------------
   Зерно поверх всей страницы. Для типографии это не украшение, а материал:
   белый экранный фон без зерна читается как пустой div, с зерном как лист.
   Держится на 3.5% непрозрачности, то есть на грани заметности. */
body::after{
  content:'';
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------- полоса прогресса ----------------------------
   Индикатор прочитанного. animation-timeline привязывает кадры к прокрутке
   документа, без единой строки JS и без обработчика scroll. */
.rp-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--ink);
}
@supports (animation-timeline:scroll()){
  .rp-progress{
    animation:rp-progress linear;
    animation-timeline:scroll(root block);
  }
}
@keyframes rp-progress{to{transform:scaleX(1)}}

/* ------------------------------ появление --------------------------------
   Один примитив на весь сайт. Элемент ждет пересечения с окном, получает
   .is-in и приезжает снизу. Задержка приходит инлайном из JS, чтобы
   соседние карточки выходили каскадом, а не разом. */
[data-rv]{
  opacity:0;
  transform:translate3d(0,var(--rv-y,20px),0);
  transition:opacity var(--d-4) var(--ease),transform var(--d-4) var(--ease);
  transition-delay:var(--rv-d,0ms);
}
[data-rv].is-in{opacity:1;transform:none}
[data-rv="scale"]{transform:scale(.97) translate3d(0,16px,0)}

/* Слово заголовка выезжает из-под собственной строки. Обертка режет по
   базовой линии, поэтому нужен запас под выносные элементы: без padding
   у «р» и «у» срезался хвост. */
.rp-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.rp-word i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:var(--rv-d,0ms);
}
.is-in .rp-word i,.rp-word.is-in i{transform:none}

/* ------------------------------- шапка ------------------------------------ */

.rp-header{transition:box-shadow var(--d-2) var(--ease),background var(--d-2) var(--ease)}
.rp-header__bar{transition:min-height var(--d-2) var(--ease)}
/* Прокрученная страница: шапка становится плотнее и отрывается тенью.
   Это единственное место, где анимируется высота, и она анимируется у
   одного элемента без соседей по потоку. */
.rp-header--stuck{background:rgba(255,255,255,.86);box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(16,20,24,.35)}
.rp-header--stuck .rp-header__bar{min-height:64px}

/* Подчеркивание навигации растет из левого края, а не появляется целиком. */
.rp-nav a{position:relative;border-bottom-color:transparent!important}
.rp-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d-2) var(--ease);
}
.rp-nav a:hover::after{transform:scaleX(1)}

/* -------------------------------- кнопки ---------------------------------- */

/* Заливка кнопки едет снизу вверх вместо смены фона по всей площади.
   Цвет тот же, читается как нажим краски, а не как переключение состояния. */
.rp-btn{position:relative;overflow:hidden;isolation:isolate;transition:color var(--d-2) var(--ease),border-color var(--d-2) var(--ease),transform var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease)}
.rp-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:#fff;
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.rp-btn:hover{background:var(--ink);box-shadow:var(--sh-2)}
.rp-btn:hover::before{transform:translateY(0)}
.rp-btn:active{transform:scale(.98)}

.rp-btn--ghost::before{background:var(--ink)}
.rp-btn--ghost:hover{background:transparent;color:#fff;border-color:var(--ink)}
.rp-btn--light::before{background:transparent}
.rp-btn--light:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}

/* Магнитная кнопка: сдвиг задает JS переменными, CSS только сглаживает. */
.rp-btn[data-magnet]{transform:translate3d(var(--mx,0),var(--my,0),0);transition:transform var(--d-2) var(--ease),color var(--d-2) var(--ease),border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.rp-btn[data-magnet]:active{transform:translate3d(var(--mx,0),var(--my,0),0) scale(.98)}

/* --------------------------------- герой ---------------------------------- */

/* Мягкая холодная подсветка за заголовком. Радиальный градиент в тех же
   тонах, что и подложки секций: цвета на странице по-прежнему нет. */
.rp-hero{position:relative;overflow:hidden}
.rp-hero::before{
  content:'';position:absolute;z-index:0;
  top:-30%;left:-10%;width:70%;height:150%;
  background:radial-gradient(52% 46% at 40% 45%,rgba(129,141,146,.16),rgba(129,141,146,0) 70%);
  animation:rp-drift 18s var(--ease-io) infinite alternate;
  pointer-events:none;
}
.rp-hero > *{position:relative;z-index:1}
@keyframes rp-drift{to{transform:translate3d(9%,5%,0) scale(1.12)}}

/* Пункты преимуществ подсвечивают маркер при наведении. */
.rp-bullets li{transition:padding-left var(--d-2) var(--ease),color var(--d-2) var(--ease)}
.rp-bullets li::before{transition:transform var(--d-2) var(--ease),background var(--d-2) var(--ease)}
.rp-bullets li:hover{padding-left:calc(var(--sp-5) + 6px)}
.rp-bullets li:hover::before{transform:scale(1.6)}

/* Подсказка «листайте». Уходит, как только страница тронулась с места. */
.rp-scroll-hint{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-top:var(--sp-7);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  transition:opacity var(--d-3) var(--ease);
}
.rp-scroll-hint span{display:block;width:44px;height:1px;background:var(--line);position:relative;overflow:hidden}
.rp-scroll-hint span::after{content:'';position:absolute;inset:0;background:var(--ink);animation:rp-sweep 2.4s var(--ease-io) infinite}
@keyframes rp-sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
body.rp-scrolled .rp-scroll-hint{opacity:0}

/* -------------------------------- бегущая строка --------------------------
   Перечень цехов и отделок лентой. Содержимое продублировано в разметке
   ровно один раз, поэтому сдвиг на -50% дает бесшовный цикл. */
.rp-marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--sp-5) 0;overflow:hidden;
  /* края растворяются, лента не обрывается о границу экрана */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.rp-marquee__track{display:flex;width:max-content;animation:rp-marquee 46s linear infinite}
.rp-marquee:hover .rp-marquee__track{animation-play-state:paused}
.rp-marquee ul{display:flex;align-items:center;gap:var(--sp-7);list-style:none;margin:0;padding:0 24px}
.rp-marquee li{
  font-family:var(--display);font-size:clamp(20px,2.2vw,30px);font-weight:500;
  text-transform:uppercase;letter-spacing:1px;color:var(--ink);white-space:nowrap;
  display:flex;align-items:center;gap:var(--sp-7);
}
.rp-marquee li::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
@keyframes rp-marquee{to{transform:translate3d(-50%,0,0)}}

/* --------------------------------- плитки ---------------------------------
   Плитка была плоской коробкой. Теперь у нее номер, заливка краской снизу
   и подъем: те же 20 разделов читаются как сетка, а не как список рамок. */
.rp-tiles{counter-reset:rp-tile}
.rp-tile{
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:var(--sh-1);
  transition:transform var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease),border-color var(--d-2) var(--ease);
}
.rp-tile::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
/* Номер раздела. Считает CSS, разметку трогать не нужно. */
.rp-tile::after{
  counter-increment:rp-tile;
  content:counter(rp-tile,decimal-leading-zero);
  position:absolute;top:var(--sp-5);right:var(--sp-5);
  font-family:var(--display);font-size:13px;letter-spacing:2px;
  color:var(--line);transition:color var(--d-2) var(--ease);
}
.rp-tile:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--ink)}
.rp-tile:hover::before{transform:translateY(0)}
.rp-tile:hover::after{color:rgba(255,255,255,.5)}
/* Отступ справа под номер: без него длинное название в две строки
   («КАТАЛОГИ И БРОШЮРЫ», «МЕНЮ ДЛЯ РЕСТОРАНОВ») наезжало на цифру. */
.rp-tile__name{padding-right:28px}
.rp-tile__name,.rp-tile__go{position:relative;transition:color var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.rp-tile:hover .rp-tile__name{color:#fff}
.rp-tile:hover .rp-tile__go{color:rgba(255,255,255,.7);transform:translateX(4px)}
/* Стрелка приезжает только на наведении: в покое она шум, при наведении
   подсказывает, что плитка ведет дальше. */
.rp-tile__go::after{content:' \2192';opacity:0;transition:opacity var(--d-2) var(--ease)}
.rp-tile:hover .rp-tile__go::after{opacity:1}

/* -------------------------------- техкарта -------------------------------- */

.rp-table tr{transition:background var(--d-2) var(--ease)}
.rp-table tbody tr:hover{background:rgba(129,141,146,.07)}
.rp-table th{position:relative}
/* Метка строки подчеркивается краской при наведении на строку. */
.rp-table th::before{
  content:'';position:absolute;left:0;bottom:12px;width:0;height:1px;background:var(--ink);
  transition:width var(--d-3) var(--ease);
}
.rp-table tbody tr:hover th::before{width:22px}

/* --------------------------------- этапы ----------------------------------
   Номер этапа набран контуром и заливается при появлении: пока блок за
   экраном, это цифра-контур, после появления она набирает вес. */
.rp-step{position:relative;padding-top:var(--sp-5)}
.rp-step::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ease);
  transition-delay:var(--rv-d,0ms);
}
.rp-step.is-in::before{transform:scaleX(1)}
.rp-step__n{
  font-size:44px;color:transparent;
  -webkit-text-stroke:1px var(--line);
  transition:color .7s var(--ease),-webkit-text-stroke-color .7s var(--ease);
  transition-delay:calc(var(--rv-d,0ms) + 120ms);
}
.rp-step.is-in .rp-step__n{color:var(--ink);-webkit-text-stroke-color:transparent}

/* ---------------------------------- FAQ ------------------------------------
   details сам по себе не анимируется. Раскрытие вешается на содержимое:
   opacity и transform, а не height, поэтому раскладка не пересчитывается. */
.rp-faq__q{transition:color var(--d-2) var(--ease),padding-left var(--d-2) var(--ease)}
.rp-faq__q:hover{padding-left:6px}
.rp-faq__q::after{transition:transform var(--d-3) var(--ease)}
.rp-faq__item[open] .rp-faq__q::after{transform:rotate(180deg)}
.rp-faq__item[open] .rp-faq__a{animation:rp-faq .45s var(--ease) both}
@keyframes rp-faq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ------------------------------- калькулятор ------------------------------ */

.rp-select,.rp-input,.rp-textarea{transition:border-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.rp-select:hover,.rp-input:hover,.rp-textarea:hover{border-color:var(--muted)}
.rp-select:focus,.rp-input:focus,.rp-textarea:focus{box-shadow:0 0 0 4px rgba(129,141,146,.18)}

.rp-qty button{position:relative;overflow:hidden;isolation:isolate}
.rp-qty button::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform var(--d-2) var(--ease);
}
.rp-qty button:hover::before{transform:translateY(0)}
.rp-qty button:hover{color:#fff;border-color:var(--ink)}
.rp-qty button[aria-pressed="true"]::before{transform:translateY(0)}

.rp-result{box-shadow:var(--sh-3)}
.rp-result__label,.rp-result__unit{color:var(--muted-on-dark)}
/* Сумма меняется рывком, а не перерисовкой на месте: без этого цифра
   подменяется незаметно и пользователь не видит, что расчет обновился. */
.rp-result__value.is-bump{animation:rp-bump .42s var(--ease)}
@keyframes rp-bump{0%{transform:none}35%{transform:translateY(-5px) scale(1.035)}100%{transform:none}}
.rp-result__spec li{animation:rp-fade .35s var(--ease) both}
@keyframes rp-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ------------------------------ строки позиций ---------------------------- */

.rp-row--link{position:relative}
/* Полоса краски у левого края строки: показывает, какая строка активна,
   не перекрашивая ее целиком. */
.rp-row--link::before{
  content:'';position:absolute;left:calc(var(--sp-4) * -1);top:0;bottom:0;width:2px;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform var(--d-2) var(--ease);
}
.rp-row--link:hover::before{transform:scaleY(1)}
.rp-row--link:hover .rp-row__name{transform:translateX(4px)}
.rp-row__name{display:inline-block;transition:transform var(--d-2) var(--ease)}

/* --------------------------------- секции --------------------------------- */

/* Темная секция заявки. Тот же почти-черный, но с рассеянным пятном,
   иначе на большой площади он выглядит как заливка, а не как поверхность. */
.rp-section--dark{position:relative;overflow:hidden}
.rp-section--dark::before{
  content:'';position:absolute;z-index:0;
  top:-40%;right:-15%;width:65%;height:180%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%);
  animation:rp-drift 22s var(--ease-io) infinite alternate;
  pointer-events:none;
}
.rp-section--dark > *{position:relative;z-index:1}
.rp-section--dark .rp-eyebrow,.rp-section--dark .rp-consent{color:var(--muted-on-dark)}

/* --------------------------------- подвал --------------------------------- */

.rp-footer .rp-footer__h,.rp-footer__bottom{color:var(--muted-on-dark)}
.rp-footer a{transition:color var(--d-1) var(--ease),transform var(--d-1) var(--ease);display:inline-block}
.rp-footer a:hover{transform:translateX(3px)}

/* ------------------------------- доступность ------------------------------
   Базовая система гасила обводку у полей и не давала ничего взамен для
   клавиатуры. Кольцо возвращается, но только для :focus-visible, поэтому
   на мышином клике его по-прежнему нет. Радиус здесь не задаем: обводка
   повторяет форму самого элемента, а border-radius в этом правиле перебивал
   скругление полей и кнопок (квадратное поле в фокусе, владелец 06.10.2026). */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rp-btn:focus-visible{outline-offset:4px}
/* Поле в фокусе показывает рамка и кольцо (box-shadow выше), второй обводки
   не нужно: у текстового поля :focus-visible срабатывает и на клик мышью. */
.rp-select:focus-visible,.rp-input:focus-visible,.rp-textarea:focus-visible{outline:none}

/* Ссылка обхода навигации: видна только с клавиатуры. */
.rp-skip{position:absolute;left:-9999px;top:0;z-index:100}
.rp-skip:focus{left:var(--gutter);top:10px;padding:10px 18px;background:var(--ink);color:#fff;border-radius:var(--pill);font-size:13px}

/* -------------------------- отключенное движение --------------------------
   Системная настройка «уменьшить движение» выключает всю хореографию.
   Элементы при этом обязаны оказаться в конечном состоянии, а не остаться
   невидимыми: появление держится на классе, и без анимации он не придет
   вовремя, поэтому конечный вид задается напрямую. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  [data-rv]{opacity:1;transform:none}
  .rp-word i{transform:none}
  .rp-step__n{color:var(--ink);-webkit-text-stroke-color:transparent}
  .rp-step::before{transform:scaleX(1)}
  .rp-marquee__track{animation:none}
  .rp-progress,.rp-scroll-hint{display:none}
  body::after{display:none}
}

/* ------------------------------ адаптивность ------------------------------ */

@media (max-width:900px){
  /* На узком экране лента съедает высоту первого экрана, поэтому она
     становится компактнее, а подсказка прокрутки убирается совсем. */
  .rp-marquee li{font-size:18px}
  .rp-scroll-hint{display:none}
}
@media (hover:none){
  /* Тач: наведения нет, а :hover залипает после тапа. Эффекты, которые
     держатся на наведении, на таче выключаются целиком. */
  .rp-tile:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
  .rp-tile:hover::before{transform:translateY(101%)}
  .rp-tile:hover .rp-tile__name{color:var(--ink)}
  .rp-tile:hover .rp-tile__go{color:var(--muted);transform:none}
  .rp-tile:hover::after{color:var(--line)}
  .rp-btn:hover::before{transform:translateY(101%)}
  .rp-btn:hover{background:var(--ink);box-shadow:none}
  .rp-btn--ghost:hover{background:transparent;color:var(--ink)}
  .rp-btn--light:hover{background:#fff;color:var(--ink)}
}

/* ==========================================================================
   СЛОЙ 3. Раздел каталога в стиле витрины (30.09.2026).
   Образец: upload/showcase/vizitki.html. Оттуда взяты темное поле, кадр во
   весь экран, закрепленный цикл, лента бумаги и карточки отделки. Не взяты
   GSAP, Lenis и заставка загрузки: на боевой странице они стоили бы 130 КБ
   скриптов и секунды до первого экрана. Все движение здесь держится на CSS,
   position:sticky и наблюдателях из rp.js.
   Калькулятор стоит в первом экране (решение владельца 30.09.2026).
   ========================================================================== */

:root{
  --night:#07070A;
  --night-2:#101014;
  --night-line:rgba(255,255,255,.13);
  --night-dim:#8E8E98;
  --night-dim-2:#B9B9C2;
  /* Золото фольги из витрины. Единственный теплый тон на странице и только
     на темном: маркеры ленты и активный шаг цикла. */
  --gold:#C9A227;
}

/* Общая темная поверхность. Цвета заголовков и подписей переопределяются
   здесь один раз, чтобы блоки не несли инлайновых стилей. */
.rp-dark,.rp-lhero,.rp-cycle{background:var(--night);color:#fff}
.rp-dark .rp-h2,.rp-lhero .rp-h1,.rp-cycle .rp-h2{color:#fff}
.rp-dark .rp-eyebrow,.rp-lhero .rp-eyebrow,.rp-cycle .rp-eyebrow{color:var(--night-dim);display:flex;align-items:center;gap:14px}
.rp-dark .rp-eyebrow::before,.rp-lhero .rp-eyebrow::before,.rp-cycle .rp-eyebrow::before{content:'';width:38px;height:1px;background:currentColor;flex:none}
.rp-dark .rp-lead,.rp-lhero .rp-lead{color:var(--night-dim-2)}
.rp-dark .rp-note,.rp-lhero .rp-note{color:var(--night-dim)}
/* Стыки темных секций: без линии соседние блоки сливаются в одно поле. */
.rp-dark + .rp-dark{border-top:1px solid var(--night-line)}

/* --------------------------------- герой ---------------------------------- */

.rp-lhero{position:relative;overflow:hidden;padding:0 0 var(--sp-8)}
.rp-lhero__bleed{position:absolute;inset:0;z-index:0}
.rp-lhero__bleed img{width:100%;height:100%;object-fit:cover;animation:rp-lhero-in 2.4s var(--ease) both}
@keyframes rp-lhero-in{from{transform:scale(1.08);opacity:.2}to{transform:scale(1.02);opacity:1}}
.rp-lhero__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 70% at 18% 40%,rgba(129,141,146,.14),rgba(129,141,146,0) 70%);
}
.rp-lhero--img .rp-lhero__shade{
  background:
    linear-gradient(0deg,rgba(7,7,10,.97) 3%,rgba(7,7,10,.6) 38%,rgba(7,7,10,.25) 70%,rgba(7,7,10,.6) 100%),
    linear-gradient(90deg,rgba(7,7,10,.9) 0%,rgba(7,7,10,.45) 50%,rgba(7,7,10,.2) 100%);
}
.rp-lhero__in{position:relative;z-index:2}
.rp-lhero .rp-crumbs,.rp-lhero .rp-crumbs a{color:var(--night-dim)}
.rp-lhero .rp-crumbs a:hover{color:#fff}
/* На фото первого экрана серый текст местами ложится на светлые детали кадра
   (тисненый знак PRAVO PRINT, светлый верх /plakaty): контраст падал до 2:1
   (#7 и #17 полировки 01.10.2026). Светлее цвет и мягкая тень под буквами,
   сам кадр не затемняем: у всех страниц он остается как был. */
.rp-lhero--img .rp-eyebrow,.rp-lhero--img .rp-crumbs,.rp-lhero--img .rp-crumbs a,.rp-lhero--img .rp-lead{
  text-shadow:0 0 6px rgba(7,7,10,.9),0 0 14px rgba(7,7,10,.75);
}
.rp-lhero--img .rp-eyebrow,.rp-lhero--img .rp-crumbs,.rp-lhero--img .rp-crumbs a{color:var(--night-dim-2)}
/* лид длиннее и на телефоне ложится ниже, на самую светлую часть кадра: тень шире */
.rp-lhero--img .rp-lead{color:#D7D7DE;text-shadow:0 0 6px rgba(7,7,10,.95),0 0 14px rgba(7,7,10,.85),0 0 28px rgba(7,7,10,.7)}
.rp-lhero--img .rp-crumbs a:hover{color:#fff}
/* Крошки на одной высоте на всех страницах (#11): блок контента прижат к низу
   отступом сверху, а не центровкой всего столбца. */
.rp-lhero--img .rp-lhero__in{flex:1;display:flex;flex-direction:column}
.rp-lhero--img .rp-lhero__grid{margin-top:auto}

.rp-lhero__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-7);padding-top:var(--sp-8);align-items:end}
.rp-lhero--calc .rp-lhero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.rp-lhero--img{min-height:calc(100svh - 78px);display:flex;flex-direction:column;justify-content:flex-end}
/* line-height 1.02, а не .95 как в витрине: там заголовок из одного слова,
   здесь H1 в три строки, и хвост «Д» задевал следующую строку. */
.rp-lhero .rp-h1{font-size:clamp(40px,6vw,86px);line-height:1.02;letter-spacing:-.01em}
/* Самое длинное слово H1 обязано влезть в свою колонку (#1 полировки
   01.10.2026: «Самокопирующиеся» в 86 px уходило под калькулятор, на 390
   за край экрана). --h1w ставит шаблон: букв в самом длинном слове. Буква
   капслоком этого гротеска в среднем .55-.62 em, .66 взято с запасом под
   широкие Ш, Ф, М. Кегль ограничен шириной колонки (cqi), а не экрана: у
   раздела с калькулятором колонка текста вдвое уже окна. Колонка копии
   на узком экране display:contents и контейнером быть не может, тогда
   меряет rp-lhero__in, ширина у них в одну колонку одна. */
.rp-lhero__in,.rp-lhero__copy{container-type:inline-size}
.rp-lhero .rp-h1[style*="--h1w"]{font-size:min(clamp(40px,6vw,86px),calc(100cqi / (var(--h1w) * .66)))}
.rp-lhero .rp-lead{max-width:48ch}

.rp-lhero__points{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);font-size:14px;color:#EDEDF0}
.rp-lhero__points li{display:flex;align-items:center;gap:10px}
.rp-lhero__points li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

.rp-lhero__meta{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-7);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--night-line)}
.rp-lhero__meta div{font:600 11px var(--body);letter-spacing:2.5px;text-transform:uppercase;color:var(--night-dim)}
.rp-lhero__meta b{display:block;font:500 26px/1 var(--display);letter-spacing:0;color:#fff;margin-top:8px}

/* Кадр карточкой справа (разделы без калькулятора) и полосой под первым
   экраном (разделы с калькулятором). Кадр целиком виден, знак на изделии
   не прячется под заголовок. */
.rp-lhero--side .rp-lhero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.rp-lhero__pic{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--night-line);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.rp-lhero__pic img{width:100%;height:auto;aspect-ratio:1376/768;object-fit:cover;animation:rp-lhero-in 2.4s var(--ease) both}
.rp-lband{margin:0;background:var(--night);height:clamp(260px,56vw,720px);overflow:hidden}
.rp-lband img{width:100%;height:100%;object-fit:cover}

/* ------------------------- калькулятор в первом экране -------------------- */

/* color-scheme:dark нужен ради системного списка у select: без него
   выпадашка открывается белой поверх темной карточки. */
.rp-qcalc{
  color-scheme:dark;
  padding:var(--sp-6);
  background:rgba(16,16,20,.78);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--night-line);border-radius:18px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.rp-qcalc__t{font:600 13px var(--body);letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0 0 var(--sp-5)}
.rp-qcalc .rp-calc__fields{gap:var(--sp-4)}
.rp-qcalc .rp-field__label{color:var(--night-dim)}
.rp-qcalc .rp-select{
  min-height:48px;background-color:rgba(255,255,255,.04);color:#fff;border-color:var(--night-line);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
}
.rp-qcalc .rp-select:hover{border-color:rgba(255,255,255,.4)}
.rp-qcalc .rp-select:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.rp-qcalc__qty{margin-top:var(--sp-4)}
.rp-qcalc .rp-qty button{background:transparent;color:var(--night-dim-2);border-color:var(--night-line);min-height:44px;padding:0 14px}
.rp-qcalc .rp-qty button::before{background:#fff}
.rp-qcalc .rp-qty button:hover,.rp-qcalc .rp-qty button[aria-pressed="true"]{color:var(--night);border-color:#fff}
.rp-qcalc__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--night-line);
}
.rp-qcalc .rp-result__value{font-size:28px;margin:0}
.rp-qcalc .rp-result__unit{color:var(--night-dim);max-width:30ch;margin:4px 0 0}
/* Семь полей и больше (каталоги, брошюры, блокноты): на 1440x900 кнопка
   отправки и пункты под H1 уходили за первый экран, низ карточки 946 px
   при 837 у остальных (#3 полировки 01.10.2026). Только версткой: плотнее
   отступы карточки и рядов, поле 44 px вместо 48 (порог касания 44
   соблюден), подпись под ценой во всю ширину, раз кнопка все равно
   переносится под цену. Разделы с меньшим числом полей не меняются. */
@media (min-width:1081px){
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)){padding:var(--sp-5)}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-qcalc__t{margin-bottom:var(--sp-4)}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-calc__fields{gap:var(--sp-3) var(--sp-4)}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-field{gap:6px}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-select{min-height:44px}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-qcalc__qty{margin-top:var(--sp-3)}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-qcalc__foot{margin-top:var(--sp-4);padding-top:var(--sp-4);gap:var(--sp-3) var(--sp-4)}
  .rp-qcalc:has(.rp-calc__fields > .rp-field:nth-child(7)) .rp-result__unit{max-width:none}
}

/* ------------------------------ лента на темном --------------------------- */

/* Маска базовой ленты растворяет края в прозрачность, и на темном из-под
   них проступал белый фон страницы. Здесь края гасятся накладкой того же
   почти-черного поверх ленты. */
.rp-marquee--dark{background:var(--night);border-color:var(--night-line);-webkit-mask-image:none;mask-image:none;position:relative}
.rp-marquee--dark::before,.rp-marquee--dark::after{content:'';position:absolute;top:0;bottom:0;width:9%;z-index:1;pointer-events:none}
.rp-marquee--dark::before{left:0;background:linear-gradient(90deg,var(--night),transparent)}
.rp-marquee--dark::after{right:0;background:linear-gradient(-90deg,var(--night),transparent)}
.rp-marquee--dark li{color:#fff}
.rp-marquee--dark li::after{background:var(--gold)}

/* -------------------------- закрепленный цикл -----------------------------
   Высота секции это экран плюс по 70% экрана на каждый следующий шаг.
   Сцена липнет к верху, а метки в потоке секции отмеряют шаги: rp.js
   смотрит, какая метка пересекает середину экрана. */
.rp-cycle{position:relative}
.rp-cycle__stage{position:relative}
.rp-cycle__f{margin:0;background:var(--night-2)}
.rp-cycle__f img{width:100%;height:100%;object-fit:cover}
.rp-cycle__marks,.rp-cycle__dots{display:none}
.rp-cycle__steps{list-style:none;margin:0;padding:0}

/* Без скрипта: обычный список этапов. */
.rp-cycle:not(.is-live){padding:var(--sp-9) 0}
.rp-cycle:not(.is-live) .rp-cycle__frames,.rp-cycle:not(.is-live) .rp-cycle__shade{display:none}
.rp-cycle:not(.is-live) .rp-cycle__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}

.rp-cycle.is-live{height:calc(100svh + (var(--n) - 1) * 70svh)}
.rp-cycle.is-live .rp-cycle__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.rp-cycle.is-live .rp-cycle__frames{position:absolute;inset:0}
.rp-cycle.is-live .rp-cycle__f{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--ease-io)}
.rp-cycle.is-live .rp-cycle__f.is-on{clip-path:inset(0 0 0 0)}
.rp-cycle.is-live .rp-cycle__f img{transform:scale(1.06);transition:transform 1.6s var(--ease)}
.rp-cycle.is-live .rp-cycle__f.is-on img{transform:scale(1.01)}
.rp-cycle__shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(7,7,10,.95) 6%,rgba(7,7,10,.55) 38%,rgba(7,7,10,.1) 70%),
    linear-gradient(90deg,rgba(7,7,10,.88) 0%,rgba(7,7,10,.3) 48%,rgba(7,7,10,0) 76%);
}
.rp-cycle.is-live .rp-cycle__ui{position:absolute;left:0;right:0;bottom:11vh;z-index:2}
.rp-cycle.is-live .rp-cycle__steps{display:grid}
.rp-cycle.is-live .rp-cycle__steps li{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.rp-cycle.is-live .rp-cycle__steps li.is-on{opacity:1;transform:none;pointer-events:auto}
/* Метки режут секцию по линии середины экрана. За время закрепления эта
   линия проходит от 50svh до 50svh + (n-1)*70svh от верха секции. Первая
   метка 85svh: шаг 1 держится на входе и первые 35svh закрепления, средние
   шаги по 70svh, последний шаг стоит последние 35svh перед отлипанием. */
.rp-cycle.is-live .rp-cycle__marks{display:block;position:absolute;left:0;right:0;top:0;pointer-events:none}
.rp-cycle__marks i{display:block;height:70svh}
.rp-cycle__marks i:first-child{height:85svh}

.rp-cycle__no{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.rp-cycle__no b{font:600 clamp(56px,9vw,132px)/.85 var(--display);letter-spacing:-.02em;color:#fff}
.rp-cycle__no i{font:500 15px var(--display);letter-spacing:3px;color:var(--night-dim);font-style:normal}
.rp-cycle__t{font:600 clamp(24px,3.4vw,50px)/1.05 var(--display);text-transform:uppercase;margin:0 0 14px;color:#fff}
.rp-cycle__d{margin:0;max-width:52ch;color:var(--night-dim-2);font-size:clamp(15px,1.2vw,18px)}

.rp-cycle.is-live .rp-cycle__dots{
  display:grid;gap:18px;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);z-index:2;
  list-style:none;margin:0;padding:0;
}
.rp-cycle__dots li{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  font:600 10px var(--body);letter-spacing:2.5px;text-transform:uppercase;
  color:var(--night-dim);opacity:.45;transition:opacity .4s var(--ease),color .4s var(--ease);
}
.rp-cycle__dots s{width:26px;height:1px;background:currentColor;display:block;transition:width .45s var(--ease),background .4s var(--ease)}
.rp-cycle__dots li.is-on{opacity:1;color:#fff}
.rp-cycle__dots li.is-on s{width:52px;background:var(--gold)}

/* ------------------------------ лента бумаги ------------------------------
   В витрине дорожку тянула вертикальная прокрутка. Здесь это обычная
   горизонтальная лента с доводкой: палец и тачпад листают ее штатно, а
   мышь стрелками. Прокрутку страницы она не перехватывает. */
.rp-railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5)}
.rp-railnav{display:flex;gap:var(--sp-2)}
.rp-railnav button{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--night-line);
  background:transparent;color:#fff;font-size:18px;cursor:pointer;
  transition:background var(--d-2) var(--ease),color var(--d-2) var(--ease),border-color var(--d-2) var(--ease);
}
.rp-railnav button:hover{background:#fff;color:var(--night);border-color:#fff}
.rp-rail{
  display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--sp-7) max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter))) var(--sp-3);
  scroll-padding:0 max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));
  scrollbar-width:thin;scrollbar-color:var(--night-line) transparent;
}
.rp-stock{
  flex:none;width:clamp(260px,29vw,400px);scroll-snap-align:start;
  border-radius:16px;overflow:hidden;background:var(--night-2);border:1px solid var(--night-line);
}
.rp-stock__sw{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#1a1a20,#0c0c10)}
.rp-stock__sw img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.1s var(--ease)}
.rp-stock:hover .rp-stock__sw img{transform:scale(1.1)}
.rp-stock__gsm{
  position:absolute;right:14px;top:14px;
  font:600 10px var(--body);letter-spacing:2px;color:#fff;
  background:rgba(7,7,10,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:7px 11px;border-radius:100px;border:1px solid var(--night-line);
}
.rp-stock__txt{padding:22px}
.rp-stock h3{font:500 20px/1.15 var(--display);text-transform:uppercase;margin:0 0 10px;letter-spacing:.5px;color:#fff}
.rp-stock p{margin:0;font-size:14px;color:var(--night-dim);line-height:1.55}

/* ------------------------------ фото-плитки --------------------------------
   Плитка раздела с кадром первого экрана этого раздела: главная и подразделы.
   Без кадра плитка остается темной текстовой, сетка не ломается. */
.rp-ptiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:var(--sp-7)}
.rp-ptiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rp-ptile{
  /* 1:1 и сдвиг кадра влево: у кадров первой серии правая треть снималась
     пустой под заголовок, и в плитке 4:3 был виден ее край. */
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;isolation:isolate;
  border-radius:16px;border:1px solid var(--night-line);background:var(--night-2);color:#fff;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.rp-ptile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:18% 50%;transform:scale(1.03);transition:transform 1.1s var(--ease)}
.rp-ptile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,10,.92) 6%,rgba(7,7,10,.25) 55%,rgba(7,7,10,0) 80%)}
.rp-ptile__b{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;gap:6px}
.rp-ptile__name{font:500 clamp(17px,1.5vw,22px)/1.1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.rp-ptile__go{font:600 11px var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--night-dim)}
.rp-ptile:hover{border-color:rgba(255,255,255,.35);transform:translateY(-4px)}
.rp-ptile:hover img{transform:scale(1.09)}
.rp-ptile--plain::after{display:none}
@media (max-width:1080px){.rp-ptiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.rp-ptiles,.rp-ptiles--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.rp-ptiles,.rp-ptiles--3{grid-template-columns:1fr}}
@media (hover:none){.rp-ptile:hover{transform:none}.rp-ptile:hover img{transform:scale(1.03)}}

/* Контурная кнопка на темном: базовая ghost черная и на темном не видна. */
.rp-btn--onDark{color:#fff;border-color:rgba(255,255,255,.55)}
.rp-btn--onDark::before{background:#fff}
.rp-btn--onDark:hover{color:var(--night);border-color:#fff;background:transparent}

/* Строка позиции с миниатюрой кадра раздела. */
.rp-row--img{grid-template-columns:72px 1.1fr 1fr auto}
.rp-row__img{width:72px;height:72px;border-radius:12px;object-fit:cover;object-position:18% 50%}
@media (max-width:680px){.rp-row--img{grid-template-columns:56px 1fr}.rp-row__img{width:56px;height:56px;grid-row:span 3}}

/* Инфостраница: первый экран без кадра и ниже обычного. */
.rp-lhero--doc .rp-lhero__grid{padding-top:var(--sp-7)}

/* ------------------------------ прием заказов ----------------------------- */
.rp-addr{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-5) var(--sp-8)}
.rp-addr__hours{font:500 22px/1.3 var(--display);text-transform:uppercase;letter-spacing:.5px;color:var(--ink);margin:0}
.rp-addr__meta .rp-note{margin-top:var(--sp-2)}

/* ---------------------------------- цех -----------------------------------
   Кадр во всю ширину, подпись внизу слева поверх затемнения, как у цикла. */
.rp-prod{background:var(--night);color:#fff;padding-top:var(--sp-8)}
.rp-prod .rp-eyebrow{color:var(--night-dim);display:flex;align-items:center;gap:14px}
.rp-prod .rp-eyebrow::before{content:'';width:38px;height:1px;background:currentColor;flex:none}
.rp-prod__f{position:relative;margin:0;height:clamp(320px,62vw,820px);overflow:hidden}
.rp-prod__f + .rp-prod__f{margin-top:2px}
.rp-prod__f img{width:100%;height:100%;object-fit:cover}
.rp-prod__f::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(7,7,10,.92) 4%,rgba(7,7,10,.35) 38%,rgba(7,7,10,0) 62%);
}
.rp-prod__f figcaption{position:absolute;left:0;right:0;bottom:clamp(24px,6vh,64px);z-index:1}

/* -------------------------------- отделка --------------------------------- */

.rp-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,26px);margin-top:var(--sp-7)}
.rp-fc{
  position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--night-line);
  background:var(--night-2);transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.rp-fc:hover{border-color:rgba(255,255,255,.32);transform:translateY(-5px)}
.rp-fc__img{position:relative;aspect-ratio:4/3;overflow:hidden}
.rp-fc__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.1s var(--ease)}
.rp-fc:hover .rp-fc__img img{transform:scale(1.1)}
.rp-fc__img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,10,.94) 2%,rgba(7,7,10,.3) 46%,transparent 76%)}
.rp-fc__b{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,34px);z-index:2}
.rp-fc--plain .rp-fc__b{position:static}
.rp-fc__b h3{font:600 clamp(20px,2.2vw,30px)/1.1 var(--display);text-transform:uppercase;margin:0 0 10px;color:#fff}
.rp-fc__b p{margin:0;font-size:14px;line-height:1.6;color:var(--night-dim-2);max-width:44ch}

/* ------------------------------ техкарта на темном ------------------------ */

.rp-dark .rp-table th,.rp-dark .rp-table td{border-color:var(--night-line)}
.rp-dark .rp-table tr:first-child th,.rp-dark .rp-table tr:first-child td{border-top:1px solid var(--night-line)}
.rp-dark .rp-table th{color:var(--night-dim);font-size:11px;letter-spacing:2.5px;padding:var(--sp-5) var(--sp-5) var(--sp-5) 0}
.rp-dark .rp-table td{color:#DEDEE4;font-size:clamp(15px,1.4vw,19px);padding:var(--sp-5) 0}
.rp-dark .rp-table tbody tr:hover{background:rgba(255,255,255,.03)}
.rp-dark .rp-table th::before{background:var(--gold)}

.rp-dark :focus-visible,.rp-lhero :focus-visible,.rp-cycle :focus-visible{outline-color:#fff}

/* ------------------------------ адаптивность ------------------------------ */

@media (max-width:1080px){
  .rp-lhero--side .rp-lhero__grid{grid-template-columns:1fr}
  .rp-lhero--calc .rp-lhero__grid{grid-template-columns:1fr;align-items:start;gap:0}
  .rp-lhero--img{min-height:0}
  /* В одну колонку калькулятор встает сразу под вводный абзац, а пункты и
     показатели уходят под него: иначе на телефоне 390x844 карточка
     начиналась ниже первого экрана (замер 30.09.2026). display:contents
     делает детей колонки текста прямыми ячейками сетки, и order их
     переставляет без правки разметки. */
  .rp-lhero--calc .rp-lhero__copy{display:contents}
  .rp-lhero--calc .rp-lhero__points,.rp-lhero--calc .rp-lhero__meta{order:2}
  .rp-lhero--calc .rp-qcalc{order:1;margin-top:var(--sp-6)}
}
@media (max-width:900px){
  .rp-cycle:not(.is-live) .rp-cycle__steps{grid-template-columns:1fr 1fr}
  .rp-cycle.is-live .rp-cycle__dots{display:none}
  .rp-fgrid{grid-template-columns:1fr}
  .rp-railnav{display:none}
}
@media (max-width:680px){
  .rp-lhero .rp-h1{font-size:clamp(34px,11vw,56px)}
  .rp-lhero .rp-h1[style*="--h1w"]{font-size:min(clamp(34px,11vw,56px),calc(100cqi / (var(--h1w) * .66)))}
  /* Карточка и стрелка селекта уже на телефоне: длинный вариант
     («Открытки, приглашения, календари», 259 px) на 390 обрезался без
     многоточия (#14 полировки 01.10.2026). */
  .rp-qcalc{padding:var(--sp-5) var(--sp-4)}
  .rp-qcalc .rp-select{padding-right:32px;background-position:right 14px center}
  .rp-qcalc__foot .rp-btn{width:100%}
  .rp-cycle:not(.is-live) .rp-cycle__steps{grid-template-columns:1fr}
  .rp-lhero__meta{gap:var(--sp-4) var(--sp-6)}
  .rp-lhero__meta b{font-size:22px}
  .rp-dark .rp-table th,.rp-dark .rp-table td{display:block;width:100%}
  .rp-dark .rp-table th{padding:var(--sp-5) 0 var(--sp-2);border-bottom:0}
  .rp-dark .rp-table td{padding:0 0 var(--sp-5)}
}

/* Уменьшенное движение: цикл становится списком, лента без доводки. */
@media (prefers-reduced-motion:reduce){
  .rp-lhero__bleed img{animation:none}
  .rp-cycle.is-live{height:auto}
  .rp-cycle.is-live .rp-cycle__stage{position:relative;height:auto}
  .rp-cycle.is-live .rp-cycle__frames,.rp-cycle.is-live .rp-cycle__marks,.rp-cycle.is-live .rp-cycle__dots,.rp-cycle.is-live .rp-cycle__shade{display:none}
  .rp-cycle.is-live .rp-cycle__ui{position:static;padding:var(--sp-9) 0}
  .rp-cycle.is-live .rp-cycle__steps{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-6)}
  .rp-cycle.is-live .rp-cycle__steps li{grid-area:auto;opacity:1;transform:none}
  .rp-rail{scroll-snap-type:none}
}

/* ------------------------------ попап заявки ------------------------------
   Форма заявки больше не лежит на странице, она открывается окном
   (владелец 03.10.2026). Тот же язык, что у карточки калькулятора: темная
   поверхность, тонкая линия, поля-капсулы. Подписи над полями видимые,
   а не только плейсхолдер. Пустая строка ошибки места не занимает, поэтому
   промежутки между полями ровные. */
.rp-modal{
  color-scheme:dark;
  width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);
  margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;
  background:var(--night-2);color:#fff;
  border:1px solid var(--night-line);border-radius:20px;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9);
}
.rp-modal::backdrop{background:rgba(7,7,10,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rp-modal[open]{animation:rp-modal-in var(--d-2) var(--ease)}
.rp-modal[open]::backdrop{animation:rp-fade var(--d-2) var(--ease)}
@keyframes rp-modal-in{from{opacity:0;transform:translateY(20px) scale(.98)}}
@keyframes rp-fade{from{opacity:0}}
html:has(.rp-modal[open]){overflow:hidden}

.rp-modal__in{position:relative;padding:var(--sp-6)}
.rp-modal__x{
  position:absolute;top:var(--sp-4);right:var(--sp-4);
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--night-line);border-radius:50%;
  background:transparent;color:var(--night-dim-2);cursor:pointer;
  transition:border-color var(--d-1) var(--ease),color var(--d-1) var(--ease),transform var(--d-2) var(--ease);
}
.rp-modal__x:hover{border-color:#fff;color:#fff;transform:rotate(90deg)}
.rp-modal .rp-eyebrow{color:var(--night-dim);margin:0 0 var(--sp-2)}
.rp-modal__t{
  font:600 clamp(26px,4vw,34px)/1.05 var(--display);text-transform:uppercase;
  color:#fff;margin:0 0 var(--sp-3);padding-right:56px;
}
.rp-modal__lead{font-size:15px;line-height:1.5;color:var(--night-dim-2);margin:0 0 var(--sp-5);max-width:52ch}

/* Сводка из калькулятора: клиент видит, что именно уйдет менеджеру. */
.rp-modal__spec{
  list-style:none;margin:0 0 var(--sp-5);padding:var(--sp-4);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);
  border:1px solid var(--night-line);border-radius:var(--radius);background:rgba(255,255,255,.03);
}
.rp-modal__spec li{display:flex;flex-direction:column;gap:2px;min-width:0}
.rp-modal__spec span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--night-dim)}
.rp-modal__spec b{font-size:14px;font-weight:600;color:#fff;overflow-wrap:anywhere}

.rp-modal .rp-form{gap:var(--sp-4)}
.rp-modal .rp-field{gap:6px}
.rp-modal .rp-field__label{color:var(--night-dim)}
.rp-modal .rp-input,.rp-modal .rp-textarea{background:rgba(255,255,255,.04);color:#fff;border-color:var(--night-line)}
.rp-modal .rp-input::placeholder,.rp-modal .rp-textarea::placeholder{color:#6E6E78}
.rp-modal .rp-input:hover,.rp-modal .rp-textarea:hover{border-color:rgba(255,255,255,.4)}
.rp-modal .rp-input:focus,.rp-modal .rp-textarea:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.rp-modal :focus-visible{outline-color:#fff}
.rp-modal .rp-input--error,.rp-modal .rp-textarea--error{border-color:#FF6B7A}
.rp-modal .rp-error{color:#FF8A96;min-height:0}
.rp-modal .rp-error:empty{display:none}
.rp-modal .rp-btn{width:100%;justify-content:center;margin-top:var(--sp-2)}
.rp-modal .rp-consent{color:var(--night-dim);text-align:center}
.rp-modal .rp-form__ok{background:rgba(255,255,255,.04);border-color:var(--night-line);color:#fff}
.rp-modal .rp-form__ok .rp-meta{color:var(--night-dim)}

@media (max-width:560px){
  .rp-modal{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:16px}
  .rp-modal__in{padding:var(--sp-5)}
  .rp-modal__spec{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .rp-modal[open],.rp-modal[open]::backdrop{animation:none}
  .rp-modal__x:hover{transform:none}
}

/* Тираж без цены при выбранных опциях: кнопка рабочая, но приглушена. */
.rp-qcalc .rp-qty button.rp-qty--gap:not([aria-pressed="true"]){color:var(--night-dim);border-style:dashed}

/* ==========================================================================
   Акцент CMYK (владелец 06.10.2026: «сайт простенький, хочется ярче»).
   Отменяет прежнее «цветных акцентов нет осознанно» из шапки файла, но
   дозированно: фото продукции остаются нейтральными, цвет несут только
   заголовок первого экрана, главные кнопки, лента и отклик плиток.
   Цвета взяты у триады печати, а не со стороны: типография говорит своим
   языком. Текст на градиенте только черный: на голубом контраст около 8:1,
   минимум по всей длине градиента 6.2:1 (порог 4.5:1).
   Откат: удалить блок целиком, правила выше не тронуты.
   ========================================================================== */
:root{
  --c-cyan:#00AEEF;
  --c-mag:#EC008C;
  --c-yel:#FFF200;
  /* Промежуточные точки светлее чистой смеси: голубой и пурпурный в
     середине дают #7657BD, черный текст на нем 3.9:1. С этими точками
     минимум по всей длине 6.2:1 (проверено расчетом 06.10.2026). */
  --cmyk:linear-gradient(100deg,var(--c-cyan) 0%,#B884F5 36%,#FF3DA8 68%,var(--c-yel) 100%);
}
::selection{background:var(--c-mag);color:#fff}

/* Заголовок первого экрана: последняя строка закрашена градиентом. Слова
   размечает rp.js (accentTail), фон накладывается на внутренний <i>, который
   выезжает при появлении, поэтому цвет едет вместе со словом. */
.rp-acc,.rp-word--acc>i{
  background:var(--cmyk);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Главная кнопка: заливка градиентом, на наведении градиент уезжает к
   желтому краю и по кнопке проходит блик. */
.rp-lhero .rp-btn--light,.rp-modal .rp-btn--light,.rp-header__cta .rp-btn{
  background:var(--cmyk);background-size:200% 100%;background-position:0 0;
  color:#07070A;border-color:transparent;
  transition:background-position .7s var(--ease),transform var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease);
}
.rp-lhero .rp-btn--light::before,.rp-modal .rp-btn--light::before,.rp-header__cta .rp-btn::before{
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .9s var(--ease);z-index:0;
}
.rp-lhero .rp-btn--light:hover,.rp-modal .rp-btn--light:hover,.rp-header__cta .rp-btn:hover{
  background:var(--cmyk);background-size:200% 100%;background-position:100% 0;
  color:#07070A;border-color:transparent;box-shadow:0 18px 40px -16px rgba(236,0,140,.55);
}
.rp-lhero .rp-btn--light:hover::before,.rp-modal .rp-btn--light:hover::before,.rp-header__cta .rp-btn:hover::before{transform:translateX(120%)}

/* Тонкая черта у надзаголовка на темном фоне: градиент вместо серой. */
.rp-dark .rp-eyebrow::before,.rp-lhero .rp-eyebrow::before,.rp-cycle .rp-eyebrow::before{background:var(--cmyk);height:2px}

/* Лента: цветная полоса с наклоном. Разделитель это метка совмещения,
   как на полях печатного листа: кружок с перекрестьем. */
.rp-marquee--dark{
  background:var(--cmyk);border:0;padding:18px 0;
  transform:rotate(-1.6deg) scale(1.04);margin:0;
  box-shadow:0 20px 50px -20px rgba(236,0,140,.5);
}
/* Темная подложка держит наклонную полосу: без нее в клиньях над и под
   лентой проступал светлый фон страницы. */
.rp-band{background:var(--night);padding:28px 0;overflow:hidden}
.rp-marquee--dark::before,.rp-marquee--dark::after{display:none}
.rp-marquee--dark li{color:#07070A;font-weight:600}
.rp-marquee--dark li::after{
  width:18px;height:18px;border-radius:50%;background:
    linear-gradient(#07070A,#07070A) center/100% 1.5px no-repeat,
    linear-gradient(#07070A,#07070A) center/1.5px 100% no-repeat;
  box-shadow:inset 0 0 0 1.5px #07070A;
}

/* Фото первого экрана: метки реза по углам, голубые сверху, пурпурные снизу.
   Метки стоят за краем кадра, поэтому скругление переходит на саму картинку. */
.rp-lhero__pic{position:relative;overflow:visible}
.rp-lhero__pic img{border-radius:18px}
@media (max-width:760px){.rp-lhero__pic::before{inset:-9px}}
/* Сводка конфигурации в попапе скрыта атрибутом hidden, пока калькулятор
   ничего не выбрал; display:grid ниже по файлу его перебивал (пустая плашка). */
.rp-modal__spec[hidden]{display:none}
.rp-lhero__pic::before{
  content:'';position:absolute;inset:-16px;pointer-events:none;
  background:
    linear-gradient(var(--c-cyan),var(--c-cyan)) left top/26px 2px no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) left top/2px 26px no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) right top/26px 2px no-repeat,
    linear-gradient(var(--c-cyan),var(--c-cyan)) right top/2px 26px no-repeat,
    linear-gradient(var(--c-mag),var(--c-mag)) left bottom/26px 2px no-repeat,
    linear-gradient(var(--c-mag),var(--c-mag)) left bottom/2px 26px no-repeat,
    linear-gradient(var(--c-mag),var(--c-mag)) right bottom/26px 2px no-repeat,
    linear-gradient(var(--c-mag),var(--c-mag)) right bottom/2px 26px no-repeat;
}

/* Плитки каталога: подсветка идет за курсором (координаты пишет rp.js),
   под названием вырастает цветная черта. */
.rp-ptile::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(0,174,239,.32),rgba(236,0,140,.18) 45%,transparent 70%);
  mix-blend-mode:screen;transition:opacity var(--d-2) var(--ease);
}
.rp-ptile:hover::before{opacity:1}
.rp-ptile__b{z-index:2}
.rp-ptile__name{position:relative;padding-bottom:8px}
.rp-ptile__name::after{
  content:'';position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--cmyk);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.rp-ptile:hover .rp-ptile__name::after,.rp-ptile:focus-visible .rp-ptile__name::after{transform:scaleX(1)}
.rp-ptile:hover{border-color:rgba(0,174,239,.55)}

/* Номера шагов «Как проходит заказ» проявляются в цвете. */
.rp-step.is-in .rp-step__n{background:var(--cmyk);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rp-step::before{background:var(--cmyk)}

@media (prefers-reduced-motion:reduce){
  .rp-lhero .rp-btn--light,.rp-modal .rp-btn--light,.rp-header__cta .rp-btn{transition:none}
  .rp-lhero .rp-btn--light:hover::before,.rp-modal .rp-btn--light:hover::before,.rp-header__cta .rp-btn:hover::before{transform:translateX(-120%)}
  .rp-ptile__name::after{transition:none}
}

/* Стартовое положение появления до запуска rp.js. Метку .rp-anim ставит
   скрипт в <head>, то есть до первой отрисовки, поэтому блоки сразу стоят
   там, откуда поедут, и не мелькают готовыми. Список повторяет REVEAL из
   rp.js, при правке менять оба. Если rp.js не загрузился, через 3 секунды
   блоки проявляются сами (rp-unhide), страница не остается пустой. */
.rp-anim :is(.rp-eyebrow,.rp-h1,.rp-h2,.rp-lead,.rp-hero__actions,.rp-bullets li,.rp-tile,
  .rp-table tbody tr,.rp-step,.rp-row,.rp-faq__item,.rp-form,.rp-result,.rp-calc__fields,
  .rp-note,.rp-text,.rp-footer__grid > *,.rp-scroll-hint,.rp-price,.rp-clients li):not([data-rv]){
  opacity:0;transform:translate3d(0,20px,0);animation:rp-unhide 0s 3s forwards;
}
.rp-anim .rp-lhero .rp-h1:not([data-rv]),.rp-anim .rp-hero .rp-h1:not([data-rv]),.rp-anim .rp-h2:not([data-rv]){transform:none}
@keyframes rp-unhide{to{opacity:1;transform:none}}

/* Подпись под логотипом в подвале: #6b767c на #111113 давал 4.04:1 при
   кегле 9 px (Lighthouse, /kontakty 06.10.2026). Светлее до 7:1. */
.rp-footer .rp-logo span{color:#A3ACB1}