/* ============================================================
   RetroModa — дизайн-шар (09.09.2026)
   Типографіка, палітра, CTA, картки каталогу, мобільні фікси.
   Підключається ПІСЛЯ bootstrap і s.css.
   ============================================================ */

/* ---------- 1. Дисплейний шрифт ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-cyrillic-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-cyrillic-italic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- 2. Палітра ---------- */
/* ₴ (U+20B4): ні Playfair Display, ні Open Sans не містять гривні —
   підставляємо її з IBM Plex Serif / IBM Plex Sans, решта символів не зачіпається */
@font-face {
  font-family: 'RM UAH';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/rm-uah-serif.woff2?v=2) format('woff2');
  unicode-range: U+20B4;
}
@font-face {
  font-family: 'RM UAH Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/rm-uah-sans.woff2?v=2) format('woff2');
  unicode-range: U+20B4;
}
:root {
  --rm-display: 'RM UAH', 'Playfair Display', 'Times New Roman', Georgia, serif;
  --rm-ink: #141414;
  --rm-ink-soft: #4a4a4a;
  --rm-paper: #f4f2ed;
  --rm-accent: #d81e05;
  --rm-hairline: rgba(20, 20, 20, .14);
  --body-bg: #f4f2ed;
}
html body, html .bg-body { background: var(--rm-paper); --bs-body-bg: var(--rm-paper); }
html .bg-secondary-subtle { --bs-secondary-bg: #eae6de; --bs-secondary-bg-rgb: 234, 230, 222; background-color: #eae6de !important; }
.masonry-item a { background-color: transparent !important; }

/* ---------- 3. Типографіка ---------- */
h1, .h1, h2, .h2, h3, .h3,
.rm-display {
  font-family: var(--rm-display);
  color: var(--rm-ink);
  letter-spacing: -0.01em;
}
h1, .h1 { font-weight: 500; line-height: 1.06; }
h2, .h2 { font-weight: 500; line-height: 1.12; }
h3, .h3 { font-weight: 500; line-height: 1.18; }

/* заголовок сторінки образу / категорії */
main h1 { font-size: clamp(2.2rem, 4.2vw, 3.9rem); }
main h2 { font-size: clamp(1.65rem, 2.6vw, 2.5rem); }
main h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }

/* КРИТИЧНО: у темних секціях заголовки успадковують світлий колір секції */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark .h1, .bg-dark .h2, .bg-dark .h3,
.bg-graphite h1, .bg-graphite h2, .bg-graphite h3,
.bg-concrete h1, .bg-concrete h2, .bg-concrete h3,
.text-white h1, .text-white h2, .text-white h3,
.text-white .h1, .text-white .h2, .text-white .h3,
[class*="bg-dark"] h1, [class*="bg-dark"] h2, [class*="bg-dark"] h3 { color: inherit; }

/* капсові заголовки лишаємо гротеском — вони частина навігації, не редполоси */
.text-uppercase.h2, .text-uppercase.h3, .btn, .nav-links, .menu-year, .menu-name,
.timeline .menu-year, .timeline .menu-name { font-family: var(--bs-body-font-family); }

/* «айброу» — надзаголовок дрібним капсом */
.rm-eyebrow {
  font-family: var(--bs-body-font-family);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rm-ink-soft);
  display: block;
  margin-bottom: .9rem;
}
.rm-eyebrow--accent { color: var(--rm-accent); }

/* редакційна цитата */
.rm-quote {
  font-family: var(--rm-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  line-height: 1.24;
  color: var(--rm-ink);
}

/* тонка лінійка-роздільник */
.rm-rule { border: 0; border-top: 1px solid var(--rm-hairline); opacity: 1; margin: 2.5rem 0; }

/* текстові сторінки: комфортна мірка рядка */
.content p, .content ul, .content ol { max-width: 68ch; }
.content h1, .content h2, .content h3 { font-family: var(--rm-display); }

/* ---------- 4. CTA ---------- */
.rm-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--rm-ink);
  color: #fff;
  border: 1px solid var(--rm-ink);
  border-radius: 2px;
  padding: .9rem 1.9rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  cursor: pointer;
}
.rm-cta:hover, .rm-cta:focus-visible {
  background: var(--rm-accent);
  border-color: var(--rm-accent);
  color: #fff;
}
.rm-cta svg { flex-shrink: 0; }
.rm-cta--ghost {
  background: transparent;
  color: var(--rm-ink);
}
.rm-cta--ghost:hover { background: var(--rm-ink); color: #fff; border-color: var(--rm-ink); }
.rm-cta--light { background: #fff; color: var(--rm-ink); border-color: #fff; }
.rm-cta--light:hover { background: var(--rm-accent); border-color: var(--rm-accent); color: #fff; }
.rm-cta-note {
  display: block;
  font-size: .78rem;
  color: var(--rm-ink-soft);
  margin-top: .7rem;
  letter-spacing: .02em;
}

/* ---------- 5. Картка каталогу: підпис ---------- */
.masonry-item { position: relative; }
.masonry-item .rm-card-body {
  padding: .7rem .15rem 1.4rem;
}
.rm-card-title {
  font-family: var(--rm-display);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--rm-ink);
  margin: 0 0 .25rem;
}
.rm-card-meta {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rm-ink-soft);
  margin: 0;
}
.rm-card-price { color: var(--rm-ink); font-weight: 600; }
.masonry-item a { text-decoration: none; }
.masonry-item a:hover .rm-card-title { color: var(--rm-accent); }

/* плейсхолдер поки фото не завантажилось */
.masonry-item .rm-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 400 / 550;
  background: #e8e4dc;
}
.masonry-item .rm-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 6. Сторінка образу ---------- */
.rm-price {
  font-family: var(--rm-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  color: var(--rm-ink);
}
.rm-price small { font-family: var(--bs-body-font-family); font-size: .85rem; color: var(--rm-ink-soft); }
.rm-includes { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.rm-includes li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .45rem;
  font-size: .95rem;
  color: var(--rm-ink-soft);
}
.rm-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: .7rem; height: 1px;
  background: var(--rm-accent);
}
.rm-trust {
  font-size: .84rem;
  color: var(--rm-ink-soft);
  border-top: 1px solid var(--rm-hairline);
  padding-top: .9rem;
  margin-top: 1.2rem;
}

/* мобільна панель дії на сторінці образу */
.rm-mobile-buy { display: none; }
@media (max-width: 991.98px) {
  .rm-mobile-buy {
    display: flex;
    transform: translateY(105%);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, .12);
  }
  .rm-mobile-buy.is-visible { transform: translateY(0); }
  .rm-mobile-buy .rm-price { font-size: 1.5rem; }
  .rm-mobile-buy .rm-anchor { display: none; }
  .rm-mobile-buy .rm-cta { padding: .75rem 1.15rem; font-size: .74rem; }
  body.page-obraz .mobile-nav { display: none !important; }
}

/* контент не ховається під фіксованою панеллю */
@media (max-width: 991.98px) {
  body { padding-bottom: 84px; }
}

/* ---------- 6b. Мобільний hero головної ---------- */
@media (max-width: 767px) {
  .col-thsnd {
    background: linear-gradient(0deg, rgba(18, 18, 18, .97) 55%, rgba(18, 18, 18, .82) 78%, rgba(18, 18, 18, 0) 100%) !important;
    padding-bottom: 5.5rem !important;
    padding-top: 3rem !important;
  }
  .col-thsnd h1 {
    color: #fff;
    font-size: clamp(1.75rem, 7.6vw, 2.3rem);
    line-height: 1.1;
    text-align: center;
  }
  .col-thsnd .rm-eyebrow { color: rgba(255, 255, 255, .72); text-align: center; }
  .col-thsnd .rm-card-meta { color: rgba(255, 255, 255, .78); text-align: center; }
  .col-thsnd .rm-cta-note { color: rgba(255, 255, 255, .7); text-align: center; }
  .col-thsnd .rm-cta { background: #fff; color: var(--rm-ink); border-color: #fff; }
  .col-thsnd .rm-cta:hover { background: var(--rm-accent); border-color: var(--rm-accent); color: #fff; }
  .col-thsnd > div:last-child { display: flex; flex-direction: column; align-items: center; }
  .hero-counter { transform: scale(.82); transform-origin: center; margin: .25rem 0 !important; }
}

/* ---------- 6c. QA-фікси ---------- */
/* один теплий папір замість трьох різних сірих */
main section[class*="bg-body"], main figure[class*="bg-body"],
.container-fluid.bg-body, .bg-body { background-color: var(--rm-paper) !important; }
.bg-secondary-subtle, .container-fluid.bg-secondary-subtle,
.bg-body-secondary, .bg-light { background-color: #eae6de !important; }

/* мобільна панель образу: не перекривати заголовок і ціну */
@media (max-width: 991.98px) {
  .rm-mobile-buy {
    background: rgba(244, 242, 237, .97);
    border-top: 1px solid var(--rm-hairline);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
  }
  body.page-obraz { padding-bottom: 92px; }
}

/* картки: рівна база для дво- і однорядкових назв */
.rm-card-title { min-height: 2.5em; display: flex; align-items: flex-start; }
@media (max-width: 767.98px) {
  .masonry-item .rm-card-body { padding-left: .55rem; padding-right: .55rem; }
  .rm-card-title { font-size: .92rem; min-height: 2.6em; }
  .rm-card-meta { font-size: .68rem; letter-spacing: .04em; white-space: nowrap; }
}

/* посилання «Умови прокату» — у фірмових кольорах, не синє */
.rm-trust .btn-link { color: var(--rm-ink); text-decoration: underline; text-underline-offset: .2em; }
.rm-trust .btn-link:hover { color: var(--rm-accent); }

/* буквиця псувала службовий рядок «Опис образу:» — прибираємо */
.content p:first-child::first-letter { font-size: inherit !important; float: none !important; margin-right: 0 !important; line-height: inherit !important; font-weight: inherit !important; }

/* фільтри статі у фірмовому стилі */
#gender-filter .btn {
  border-radius: 0;
  border-color: var(--rm-hairline);
  color: var(--rm-ink-soft);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .74rem;
  padding: .6rem 1.15rem;
  background: transparent;
}
#gender-filter .btn:hover { background: rgba(20, 20, 20, .06); color: var(--rm-ink); }
#gender-filter .btn.active { background: var(--rm-ink); border-color: var(--rm-ink); color: #fff; }

/* пагінація */
.pagination .page-link, .pagination a, .pagination span {
  border-radius: 0 !important;
  border-color: var(--rm-hairline);
  color: var(--rm-ink-soft);
  font-size: .82rem;
}
.pagination .active .page-link, .pagination .active a, .pagination .active span {
  background: var(--rm-ink) !important;
  border-color: var(--rm-ink) !important;
  color: #fff !important;
}

/* футер: підпис лого читабельний */
footer .text-body-tertiary, .bg-graphite .text-body-tertiary { color: rgba(255, 255, 255, .72) !important; }

/* ---------- 6d. Форма запису ---------- */
.rm-form-head .rm-eyebrow { margin-bottom: .35rem; font-size: .78rem; }
.rm-pill { cursor: pointer; margin: 0; }
.rm-pill input { position: absolute; opacity: 0; pointer-events: none; }
.rm-pill span {
  display: inline-block;
  border: 1px solid var(--rm-hairline);
  padding: .45rem 1.05rem;
  border-radius: 2rem;
  font-size: .85rem;
  color: var(--rm-ink-soft);
  transition: all .2s ease;
}
.rm-pill input:checked + span { background: var(--rm-ink); border-color: var(--rm-ink); color: #fff; }
.rm-pill input:focus-visible + span { outline: 2px solid var(--rm-accent); outline-offset: 2px; }
#consult-obraz { font-family: var(--rm-display); font-size: 1.05rem; }
.modal-form .form-control:focus { border-color: var(--rm-ink); box-shadow: none; }

/* ---------- 6e. Спринт A: довіра, кроки, FAQ ---------- */
.rm-daynote {
  font-size: .86rem;
  color: var(--rm-ink-soft);
  border-top: 1px solid var(--rm-hairline);
  padding-top: .85rem;
  margin-top: 1.1rem;
}
.rm-detail-below { padding-bottom: 4rem; }
/* якір ринкової вартості під ціною */
.rm-anchor {
  font-size: .82rem;
  color: var(--rm-ink-soft);
  margin-top: .45rem;
  max-width: 34ch;
  line-height: 1.4;
}
/* єдина мірка тексту в нижніх блоках (QA: три різні ширини) */
.rm-detail-below .rm-answer p,
.rm-detail-below .rm-steps-list li,
.rm-detail-below .rm-faq details p { max-width: none; }
.rm-steps-sub { font-size: 1.05rem; opacity: .8; }
.rm-answers { margin-top: 2.75rem; }
.rm-answer {
  border-top: 1px solid var(--rm-hairline);
  padding: 1.5rem 0;
}
.rm-answer:last-child { border-bottom: 1px solid var(--rm-hairline); }
.rm-answer-title {
  font-family: var(--rm-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
  font-weight: 500;
  margin-bottom: .6rem;
  color: var(--rm-ink);
}
.rm-answer p { font-size: .95rem; line-height: 1.6; color: var(--rm-ink-soft); max-width: 62ch; }
.rm-answer p strong { color: var(--rm-ink); }

.rm-steps { margin-top: 3rem; }
.rm-steps-list {
  counter-reset: rmstep;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 2rem;
}
.rm-steps-list li {
  counter-increment: rmstep;
  position: relative;
  padding-left: 3.1rem;
  padding-bottom: 1.15rem;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--rm-ink-soft);
  max-width: 62ch;
}
.rm-steps-list li::before {
  content: counter(rmstep);
  position: absolute;
  left: 0; top: -.15rem;
  font-family: var(--rm-display);
  font-size: 1.65rem;
  line-height: 1;
  color: var(--rm-accent);
}
.rm-steps-list li b { color: var(--rm-ink); font-weight: 600; }

/* варіант для темних секцій головної */
.rm-steps-list--dark { max-width: 640px; margin-inline: auto; }
.rm-steps-list--dark li { color: rgba(255, 255, 255, .82); font-size: 1rem; }
.rm-steps-list--dark li b { color: #fff; }
.rm-steps-list--dark li::before { color: #ff7a5c; opacity: 1; font-size: 1.9rem; }

.rm-faq { margin-top: 3rem; }
.rm-faq details {
  border-top: 1px solid var(--rm-hairline);
  padding: .95rem 0;
}
.rm-faq details:last-of-type { border-bottom: 1px solid var(--rm-hairline); }
.rm-faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .95rem;
  color: var(--rm-ink);
  padding-right: 2rem;
  position: relative;
}
.rm-faq summary::-webkit-details-marker { display: none; }
.rm-faq summary::after {
  content: '+';
  position: absolute;
  right: .25rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--rm-accent);
  font-weight: 400;
}
.rm-faq details[open] summary::after { content: '−'; }
.rm-faq details p {
  margin: .7rem 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--rm-ink-soft);
  max-width: 62ch;
}

/* ---------- 7. Дрібне ---------- */
.rm-figure-caption {
  font-size: .8rem;
  color: var(--rm-ink-soft);
  letter-spacing: .04em;
  margin-top: .5rem;
}
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* якір: компактний вигляд */
.rm-anchor { max-width: 40ch; }
.rm-anchor b { color: var(--rm-ink); font-weight: 600; }
.rm-anchor-note { display: block; font-size: .76rem; opacity: .75; margin-top: .15rem; }

/* ============================================================
   Спринт B — «костюмний лист»: архівна мова
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/plex-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/plex-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/plex-cyrillic-600.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/plex-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
:root { --rm-mono: 'RM UAH Sans', 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; }

.rm-mono {
  font-family: var(--rm-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rm-ink-soft);
}
.rm-num { color: var(--rm-accent); font-weight: 600; }

/* шапка костюмного листа */
.rm-sheet-id {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--rm-hairline);
  padding-bottom: .55rem;
  margin-top: 1.4rem;
}

/* таблиця складу образу */
.rm-sheet { margin: 2rem 0 1.5rem; }
.rm-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(20, 20, 20, .3);
  padding-bottom: .5rem;
  margin-bottom: .25rem;
}
.rm-sheet-count { color: var(--rm-ink); }
.rm-sheet-row {
  display: grid;
  grid-template-columns: 2.2rem 8.5rem 1fr;
  gap: .75rem;
  align-items: baseline;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rm-hairline);
}
.rm-sheet-num { color: var(--rm-ink-soft); opacity: .65; }
.rm-sheet-label { color: var(--rm-ink); font-weight: 600; }
.rm-sheet-text { font-size: .93rem; line-height: 1.55; color: var(--rm-ink-soft); }
@media (max-width: 575.98px) {
  .rm-sheet-row { grid-template-columns: 1.9rem 1fr; row-gap: .3rem; }
  .rm-sheet-text { grid-column: 2; }
}

/* таблиця тарифу */
.rm-dl { margin: 1.5rem 0 2.5rem; border-top: 1px solid rgba(20, 20, 20, .3); }
.rm-dl-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rm-hairline);
  align-items: baseline;
}
.rm-dl-label {
  font-family: var(--rm-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rm-ink-soft);
}
.rm-dl-value { font-size: .98rem; color: var(--rm-ink); }
.rm-dl-value b { font-family: var(--rm-display); font-size: 1.45rem; font-weight: 500; display: block; }
.rm-dl-value small { display: block; font-size: .84rem; color: var(--rm-ink-soft); margin-top: .25rem; line-height: 1.5; }
@media (max-width: 575.98px) {
  .rm-dl-row { grid-template-columns: 1fr; gap: .35rem; }
}
.rm-never { list-style: none; padding: 0; margin: 1.2rem 0 2rem; }
.rm-never li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  color: var(--rm-ink-soft);
  max-width: 62ch;
}
.rm-never li::before {
  content: '';
  position: absolute; left: 0; top: .68em;
  width: .85rem; height: 1px;
  background: var(--rm-accent);
}

/* номер образу на картці */
.rm-card-num { margin-bottom: .3rem; font-size: .64rem; opacity: .75; }

/* шкала століття */
.rm-ruler {
  display: flex;
  justify-content: space-between;
  gap: .25rem;
  border-top: 1px solid var(--rm-hairline);
  margin: 0 0 2.5rem;
  padding-top: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rm-ruler::-webkit-scrollbar { display: none; }
.rm-ruler-item {
  flex: 1 0 auto;
  min-width: 4.5rem;
  text-align: center;
  text-decoration: none;
  padding: .55rem .35rem .7rem;
  position: relative;
  transition: color .2s ease;
}
.rm-ruler-tick {
  display: block;
  width: 1px;
  height: 11px;
  background: var(--rm-hairline);
  margin: 0 auto .5rem;
}
.rm-ruler-item .rm-mono { font-size: .66rem; transition: color .2s ease; }
.rm-ruler-item:hover .rm-mono { color: var(--rm-accent); }
.rm-ruler-item:hover .rm-ruler-tick { background: var(--rm-accent); height: 15px; }
@media (max-width: 767.98px) {
  .rm-ruler { justify-content: flex-start; }
  .rm-ruler-item { min-width: 4rem; }
}

/* підписи до кліпів: під кадром, а не поверх нього */
.video-figure { position: relative; }
.rm-video-cap {
  display: block;
  text-align: left;
  padding: .7rem .9rem 1.2rem;
}
.rm-video-title {
  display: block;
  font-family: var(--rm-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--rm-ink);
  margin-bottom: .2rem;
}
.rm-video-cap .rm-mono { font-size: .62rem; }
.bg-dark .rm-video-title, .bg-graphite .rm-video-title, .text-white .rm-video-title { color: #fff; }
.bg-dark .rm-video-cap .rm-mono, .bg-graphite .rm-video-cap .rm-mono, .text-white .rm-video-cap .rm-mono { color: rgba(255,255,255,.65); }

/* паспарту навколо головного фото образу */
@media (min-width: 992px) {
  .page-obraz main > article > .row > .px-0:first-child { background: var(--rm-paper); }
}

/* картка: вартість зібрати самому — архівна довідка, не закреслена ціна */
.rm-card-retail {
  font-size: .63rem;
  letter-spacing: .08em;
  color: var(--rm-ink-soft);
  opacity: .8;
  margin-top: .2rem;
}
.masonry-item a:hover .rm-card-retail { color: var(--rm-ink); opacity: 1; }

@media (max-width: 767.98px) {
  .rm-card-retail { font-size: .56rem; letter-spacing: .04em; }
  .rm-card-num { font-size: .58rem; }
}

/* декади лишаємо як є («90-ті», а не «90-ТI»), тематичні — теж без капсу */
.rm-ruler .rm-mono { text-transform: none; letter-spacing: .06em; }
.rm-ruler--theme .rm-ruler-item { min-width: 5.4rem; }

/* ============================================================
   Меню-оверлей: архівна картотека замість «баблів»
   ============================================================ */
.nav-deck { background: rgba(16, 15, 13, .975) !important; }
.nav-deck .timeline { padding-right: .5rem; }

/* прибираємо старі круглі рамки і з'єднувачі */
.timeline picture { width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; }
.timeline li:after { display: none !important; }
.timeline li { margin-bottom: 0 !important; }

.rm-menu-item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rm-menu-item:first-child { border-top: 1px solid rgba(255, 255, 255, .12); }
.rm-menu-link {
  display: grid;
  grid-template-columns: 68px 1fr 1.2rem;
  align-items: center;
  gap: 1.4rem;
  padding: .75rem .25rem;
  text-decoration: none !important;
  transition: background .2s ease, padding-left .2s ease;
}
.rm-menu-link:hover, .rm-menu-link:focus-visible {
  background: rgba(255, 255, 255, .06);
  padding-left: .8rem;
}
.rm-menu-pic {
  display: block;
  width: 68px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.rm-menu-pic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.25); transition: filter .3s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.rm-menu-link:hover .rm-menu-pic img { filter: grayscale(0); transform: scale(1.05); }
.rm-menu-text { display: block; min-width: 0; }
.nav-deck .menu-year {
  font-family: var(--rm-display) !important;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important;
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
  display: block;
}
.nav-deck .menu-name {
  font-family: var(--rm-mono) !important;
  font-size: .64rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  display: block;
  margin-top: .3rem;
}
.rm-menu-arrow {
  width: 1.2rem; height: 1px;
  background: rgba(255, 255, 255, .35);
  justify-self: end;
  transition: width .25s ease, background .25s ease;
}
.rm-menu-link:hover .rm-menu-arrow { width: 1.8rem; background: var(--rm-accent); }

/* службові посилання і перемикачі в оверлеї */
.nav-deck .viewall, .nav-deck .viewnext {
  font-family: var(--rm-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important;
  font-weight: 500;
  border-bottom-color: rgba(255, 255, 255, .3);
  padding-bottom: .2rem;
}
.nav-deck .viewall:hover, .nav-deck .viewnext:hover { border-bottom-color: var(--rm-accent); }
.nav-deck .nav-links li { font-size: 1rem; margin-bottom: .85rem; }
.nav-deck .nav-links a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.nav-deck .nav-links a:hover { border-bottom-color: rgba(255, 255, 255, .5); }
@media (max-width: 767.98px) {
  .rm-menu-link { grid-template-columns: 56px 1fr .9rem; gap: 1rem; padding: .6rem .1rem; }
  .rm-menu-pic { width: 56px; }
  .nav-deck .menu-year { font-size: 1.35rem !important; }
}

/* оверлей повністю непрозорий — контент сторінки не має просвічувати */
.nav-deck { background: #100f0d !important; }
.nav-deck .container { max-width: 1320px; }
/* ліва колонка: компактний заголовок розділу */
.nav-deck .viewall {
  display: inline-block;
  max-width: 15ch;
  line-height: 1.25;
}

/* блок «Чому наша колекція інша» */
.rm-why { border-top: 1px solid var(--rm-hairline); }
.rm-why-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--rm-hairline);
}
.rm-why-num { font-size: .78rem; color: var(--rm-accent); padding-top: .35rem; }
.rm-why-title {
  font-family: var(--rm-display);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
  font-weight: 500;
  margin-bottom: .6rem;
  color: var(--rm-ink);
}
.rm-why-item p { font-size: .97rem; line-height: 1.65; color: var(--rm-ink-soft); max-width: 64ch; margin-bottom: .7rem; }
@media (max-width: 575.98px) {
  .rm-why-item { grid-template-columns: 2.2rem 1fr; gap: .9rem; padding: 1.4rem 0; }
}

/* =========================================================
   7. Головна — перебудова 09.09.2026
   ========================================================= */

/* --- 7.1 Герой: лід і дві дії --- */
.rm-hero-lead {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
  color: var(--rm-ink-soft);
  max-width: 34ch;
  margin: 1.1rem 0 1.75rem;
}
.rm-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .9rem; }
.rm-hero-actions .rm-cta { margin: 0; }

/* --- 7.2 Смуга-доказ + шкала декад --- */
.rm-proof {
  background: var(--rm-ink);
  color: #fff;
  padding: 2rem 1.25rem 1.2rem;
  position: relative;
  z-index: 11;
}
.rm-proof-inner {
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  flex-wrap: wrap;
}
.rm-proof-counter { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.rm-proof-counter::after {
  content: 'предметів одягу';
  font-family: var(--rm-mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.58);
}
.rm-proof-counter .hero-counter {
  display: flex; align-items: center; gap: .1rem; margin: 0 !important; transform: none;
}
.rm-proof-counter svg path { fill: #fff; }
.rm-proof-counter .hero-counter { align-items: flex-end; gap: 3px; }
.rm-proof-counter .hero-counter > svg:first-child { width: 31px; height: 76px; display: block; }
.rm-proof-counter .null-container { width: 49px; height: 76px; line-height: 0; display: block; }
.rm-proof-counter .null-container svg { width: 49px; height: 76px; display: block; }
.rm-proof-counter .hero-counter > svg:last-child { width: 16px; height: 16px; align-self: flex-start; margin: .35rem 0 0 .2rem; }
.rm-proof-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.75rem);
}
.rm-proof-facts li { display: flex; flex-direction: column; gap: .3rem; }
.rm-proof-facts b {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 500; line-height: 1; color: #fff;
}
.rm-proof-facts .rm-mono {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58); line-height: 1.35;
}
.rm-proof .rm-ruler {
  margin: 1.6rem auto 0; max-width: 1180px;
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 1rem;
}
.rm-proof .rm-ruler-tick { background: rgba(255, 255, 255, .38); }
.rm-proof .rm-ruler-item .rm-mono { color: rgba(255, 255, 255, .72); }
.rm-proof .rm-ruler-item:hover .rm-mono { color: #fff; }
.rm-proof .rm-ruler-item:hover .rm-ruler-tick { background: var(--rm-accent); }
@media (max-width: 767.98px) {
  .rm-proof { padding: 1.6rem .75rem .8rem; }
  .rm-proof-inner { gap: 1.25rem; }
  .rm-proof-counter { display: none; }
  .rm-proof-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; width: 100%; }
}

/* --- 7.3 Кліпи + цитата --- */
.rm-clips .starsheader { color: var(--rm-ink); }
.rm-clips .video-figure { padding: 0 !important; }
.rm-quote-block {
  max-width: 40rem; margin: 3.25rem auto 0; text-align: center;
  border-top: 1px solid var(--rm-hairline); padding-top: 2.25rem;
}
.rm-quote-block .rm-quote {
  margin: 0 0 .9rem;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1.3;
}
.rm-quote-block .rm-quote::before { content: '«'; }
.rm-quote-block .rm-quote::after { content: '»'; }
.rm-quote-cap {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rm-ink-soft);
}

/* --- 7.4 Каталог на головній --- */
.rm-section-lead {
  max-width: 60ch; margin: 0 auto; font-size: 1rem; line-height: 1.62; color: var(--rm-ink-soft);
}
.rm-home-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  max-width: 1500px; margin-inline: auto; padding-inline: 1rem;
}
.rm-home-grid .masonry-item { margin: 0; break-inside: auto; }
.rm-home-grid .masonry-item a { display: block; text-decoration: none; color: inherit; }
@media (max-width: 1399.98px) { .rm-home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .rm-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .rm-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; padding-inline: .6rem; } }

/* --- 7.5 Ціна і гарантії --- */
.rm-price-strip { background: #eae6de; }
.rm-price-media { position: relative; min-height: 320px; }
.rm-price-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.rm-price-body { display: flex; align-items: center; }
.rm-price-inner { padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 3vw, 3.25rem); max-width: 46rem; min-width: 0; }
.rm-price-body { min-width: 0; }
/* меню-оверлей мав width:100vw — зі смугою прокрутки це давало 10-15 px
   горизонтального скролу на КОЖНІЙ сторінці */
body .nav-deck { width: 100%; }
.rm-dl-row, .rm-dl-row > * { min-width: 0; }
@media (max-width: 991.98px) {
  .rm-price-inner .rm-dl-row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}
/* ВАЖЛИВО: одноколонковий варіант для <576 оголошений вище (розділ 5),
   тому тут колонки перевизначаємо ТІЛЬКИ від 576 — інакше на телефоні
   підпис знову стає 240px і «Безкоштовно» розпирає сторінку. */
@media (min-width: 576px) {
  .rm-dl-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.rm-dl-value b { overflow-wrap: anywhere; }
.rm-dl--light { border-top-color: rgba(20, 20, 20, .22); }
.rm-dl--light .rm-dl-row { border-bottom-color: rgba(20, 20, 20, .12); }
.rm-price-inner .rm-anchor { max-width: 52ch; margin-bottom: 1.5rem; }
@media (max-width: 767.98px) { .rm-price-media { min-height: 240px; max-height: 320px; } }

/* --- 7.6 FAQ на головній --- */
.rm-faq-section { background: var(--rm-paper); }
.rm-faq-section .rm-faq { margin-top: 1.5rem; }
.rm-faq-section .rm-faq p { max-width: 66ch; }

/* --- 7.7 Фінальний блок --- */
.rm-final { background: var(--rm-ink); color: #fff; }
.rm-final h2 { color: #fff; }
.rm-eyebrow--light { color: rgba(255, 255, 255, .6); }
.rm-final-lead { font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, .8); max-width: 52ch; margin-bottom: .8rem; }
.rm-final-note { font-size: .9rem; color: rgba(255, 255, 255, .55); margin: 0; }
.rm-final-actions { display: flex; flex-direction: column; gap: .85rem; align-items: stretch; }
.rm-final-link {
  font-family: var(--rm-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); text-decoration: none; text-align: center;
  border: 1px solid rgba(255, 255, 255, .26); padding: .85rem 1rem; transition: all .2s ease;
}
.rm-final-link:hover, .rm-final-link:focus-visible { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .06); }

/* --- 7.8 SEO-блок --- */
.rm-seo { background: var(--rm-paper); border-top: 1px solid var(--rm-hairline); }
.rm-seo-title { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin-bottom: 1rem; }
.rm-seo-intro { font-size: 1rem; line-height: 1.7; color: var(--rm-ink-soft); max-width: 74ch; }
.rm-seo-details { border-top: 1px solid var(--rm-hairline); margin-top: 1.75rem; }
.rm-seo-details > summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-family: var(--rm-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-ink);
}
.rm-seo-details > summary::-webkit-details-marker { display: none; }
.rm-seo-details > summary::after {
  content: '+'; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--rm-display); font-size: 1.5rem; line-height: 1; color: var(--rm-accent);
}
.rm-seo-details[open] > summary::after { content: '−'; }
.rm-seo-details > summary:hover { color: var(--rm-accent); }
.rm-seo-body { padding-bottom: 1.5rem; }
.rm-seo-open::after { content: ""; display: block; clear: both; }
.rm-seo-open { margin-top: 1.35rem; }
.rm-seo-article { max-width: 74ch; }
.rm-seo-article p, .rm-seo-article li { font-size: .95rem; line-height: 1.7; color: var(--rm-ink-soft); }
.rm-seo-article h2, .rm-seo-article h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin: 2rem 0 .75rem; }
.rm-seo-article:first-child h2 { margin-top: .5rem; }

/* --- 7.9 Доступність і рух --- */
.rm-skip {
  position: absolute; left: .5rem; top: -100px; z-index: 2000;
  background: var(--rm-ink); color: #fff; padding: .7rem 1.1rem;
  font-family: var(--rm-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: top .15s ease;
}
.rm-skip:focus { top: .5rem; color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--rm-accent);
  outline-offset: 2px;
  border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-content { animation: none !important; transform: none !important; padding-left: 0 !important; }
  video { display: none !important; }
}

/* --- 7.10 Футер у дизайн-шарі --- */
footer.bg-graphite { background: var(--rm-ink) !important; padding-top: 4rem !important; padding-bottom: 3rem !important; }
footer .link-light,
footer a.link-light { color: rgba(255, 255, 255, .78) !important; text-decoration: none !important; display: inline-block; padding: .22rem 0; transition: color .2s ease; }
footer .link-light:hover, footer .link-light:focus-visible { color: #fff !important; }
footer ul { list-style: none !important; padding-left: 0 !important; }
footer ul li { margin-bottom: .1rem !important; }
footer .col-lg-3 > a.link-light.text-uppercase,
footer .col-lg-3 a.text-uppercase {
  font-family: var(--rm-mono); font-size: .68rem; letter-spacing: .12em;
  color: rgba(255, 255, 255, .5) !important;
}
footer .col-lg-3 > a.link-light.text-uppercase:hover { color: #fff !important; }
footer .row.mb-5 p.text-uppercase {
  font-family: var(--rm-mono); font-size: .68rem; letter-spacing: .14em;
  color: rgba(255, 255, 255, .48) !important; max-width: 46ch; margin-inline: auto;
}
footer .fw-bold {
  font-family: var(--rm-mono); font-weight: 400 !important; font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: .2rem;
}
footer .text-white, footer .row.text-white > div { color: rgba(255, 255, 255, .8) !important; }
footer .container > .row { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 2.5rem; }

/* --- 7.11 Модалка: кнопка сабміту завжди на екрані --- */
.rm-form-actions {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 26%);
  margin-top: 1rem; padding-top: 1.75rem !important;
}
@media (max-width: 991.98px) {
  .rm-form-actions { flex-wrap: wrap; gap: .5rem; justify-content: center !important; }
  .rm-form-actions .rm-cta { width: 100%; justify-content: center; }
  .rm-form-actions .btn { margin-left: 0 !important; width: 100%; }
}

/* --- 7.12 Мобільний герой: читабельний лід --- */
@media (max-width: 991.98px) {
  .rm-hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .rm-hero-actions .rm-cta { width: 100%; justify-content: center; }
}
/* Світлий текст — тільки там, де під ним темний градієнт колонки (<768).
   На 768-991 герой двоколонковий на папері, і білий текст там був невидимий. */
@media (max-width: 767.98px) {
  .col-thsnd .rm-hero-lead { color: rgba(255, 255, 255, .86); text-align: center; max-width: none; margin: .9rem 0 1.4rem; }
  .col-thsnd .rm-cta--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
  .col-thsnd .rm-cta--ghost:hover { background: #fff; color: var(--rm-ink); border-color: #fff; }
}

/* =========================================================
   8. QA-фікси 10.09.2026
   ========================================================= */

/* --- 8.1 Один чорний замість трьох --- */
main .bg-dark,
main section.bg-dark,
.bg-graphite,
.bg-concrete { background-color: var(--rm-ink) !important; }
.rm-steps-list--dark li::before { color: #f2563c; }

/* --- 8.2 Мобільний герой: читабельний градієнт --- */
@media (max-width: 767.98px) {
  .col-thsnd {
    background: linear-gradient(0deg,
      rgba(18, 18, 18, .97) 62%,
      rgba(18, 18, 18, .93) 80%,
      rgba(18, 18, 18, .66) 92%,
      rgba(18, 18, 18, .26) 100%) !important;
  }
  .col-thsnd .rm-eyebrow { color: rgba(255, 255, 255, .88); }
}

/* --- 8.3 Секція ціни: full-bleed --- */
.rm-price-strip { --bs-gutter-x: 0; padding-left: 0 !important; padding-right: 0 !important; }

/* --- 8.4 Паралакс без дірки --- */
.parallax-wrapper { height: 165svh; }
.sticky-viewport { height: 100svh; }
@media (max-width: 767.98px) {
  .parallax-wrapper { height: auto; }
  .sticky-viewport { height: auto; }
}

/* --- 8.5 Лічильник видно на мобільному --- */
@media (max-width: 767.98px) {
  .rm-proof-counter { display: flex !important; align-items: center; margin: 0 auto 1.1rem; }
  .rm-proof-counter .hero-counter > svg:first-child { width: 24px; height: 58px; }
  .rm-proof-counter .null-container,
  .rm-proof-counter .null-container svg { width: 38px; height: 58px; }
  .rm-proof-counter .hero-counter > svg:last-child { width: 13px; height: 13px; }
  .rm-proof-inner { flex-direction: column; }
}

/* --- 8.6 Шкала декад: видно, що вона скролиться --- */
@media (max-width: 991.98px) {
  .rm-proof .rm-ruler {
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 46px), transparent 100%);
  }
  .rm-proof .rm-ruler-item { scroll-snap-align: center; }
}

/* --- 8.7 Sticky-панель у модалці: непрозора --- */
.rm-form-actions {
  background: #fff;
  border-top: 1px solid var(--rm-hairline);
  margin-inline: -3rem;
  padding-inline: 3rem !important;
}
@media (max-width: 575.98px) { .rm-form-actions { margin-inline: -1.5rem; padding-inline: 1.5rem !important; } }

/* --- 8.8 Модалка в дизайн-шарі --- */
.rm-modal-head { border-bottom: 1px solid var(--rm-hairline); padding-bottom: 1.1rem; }
.rm-modal-lead { font-size: .92rem; line-height: 1.55; color: var(--rm-ink-soft); margin-top: .5rem; max-width: 46ch; }
.rm-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--rm-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rm-ink); text-decoration: none;
  border: 1px solid var(--rm-hairline); border-radius: 2px;
  padding: .4rem .85rem .4rem .4rem; transition: all .2s ease; background: transparent;
}
.rm-chip:hover, .rm-chip:focus-visible { border-color: var(--rm-ink); color: var(--rm-ink); background: rgba(20,20,20,.04); }
.modal-form .btn-outline-dark {
  font-family: var(--rm-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; border-color: var(--rm-hairline); color: var(--rm-ink-soft);
}
.modal-form .btn-outline-dark:hover { background: transparent; border-color: var(--rm-ink); color: var(--rm-ink); }

/* --- 8.9 Фокус на кнопках шапки --- */
.page-header .btn:focus-visible,
.hamburger:focus-visible,
.viewnext:focus-visible {
  outline: 2px solid var(--rm-accent); outline-offset: 3px; box-shadow: none;
}
#main:focus { outline: none; }

/* --- 8.10 Кнопки однакової ширини на мобільному --- */
@media (max-width: 575.98px) {
  .rm-price-inner .rm-cta,
  .rm-price-inner .rm-cta--ghost { width: 100%; justify-content: center; margin-left: 0 !important; }
  .rm-price-inner .rm-cta--ghost { margin-top: .6rem; }
}

/* --- 8.11 Цитата: симетрична рамка --- */
.rm-quote-block { border-bottom: 1px solid var(--rm-hairline); padding-bottom: 2.25rem; }

/* --- 8.12 Тонований папір для секції каталогу (перебиває конфлікт специфічності) --- */
main section.rm-home-catalog { background-color: #eae6de !important; }

/* --- 8.13 Єдиний кегль H2 на головній --- */
.rm-clips .starsheader,
.important-header { font-size: clamp(1.75rem, 2.9vw, 2.34rem) !important; }
.important-header { text-transform: none; }

/* --- 8.14 SEO-блок: типографіка списків --- */
.rm-seo-article ul { list-style: none; padding-left: 0; }
.rm-seo-article ul li { position: relative; padding-left: 1.1rem; }
.rm-seo-article ul li::before {
  content: '—'; position: absolute; left: 0; color: var(--rm-accent); opacity: .7;
}
.rm-seo-article p strong:only-child { display: block; font-family: var(--rm-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-ink-soft); font-weight: 400; margin-top: 1.5rem; }

/* --- 8.15 Підписи кліпів однакової висоти --- */
.rm-clips .video-figure { display: flex; flex-direction: column; }
.rm-clips .rm-video-cap { min-height: 3.6em; }

/* --- 8.16 Мертвий код прибрано з рендера --- */
.fivestars, .starlist { display: none !important; }

/* --- 8.17 Хлібні крихти --- */
.rm-crumbs { background: var(--rm-paper); border-bottom: 1px solid var(--rm-hairline); }
.rm-crumbs-inner {
  max-width: 1200px; margin-inline: auto;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--rm-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
}
.rm-crumb { color: var(--rm-ink-soft); text-decoration: none; transition: color .2s ease; }
.rm-crumb:hover { color: var(--rm-accent); }
.rm-crumb--current { color: var(--rm-ink); }
.rm-crumb-sep { color: var(--rm-hairline); }
@media (max-width: 575.98px) {
  .rm-crumbs-inner { font-size: .6rem; padding-block: .7rem; }
  .rm-crumb--current { display: none; }
  .rm-crumb-sep:last-of-type { display: none; }
}

/* --- 8.18 Схожі образи --- */
.rm-similar { background: #eae6de; padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.rm-similar-head { text-align: center; margin-bottom: 2.25rem; }
.rm-similar-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin: .35rem 0 0; }
.rm-similar-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem 1rem;
}
.rm-similar-grid .masonry-item { margin: 0; }
.rm-similar-grid .masonry-item a { display: block; text-decoration: none; color: inherit; }
@media (max-width: 1199.98px) { .rm-similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px)  { .rm-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; } }

/* --- 8.19 Швидка навігація по декадах --- */
.rm-jump {
  font-family: var(--rm-mono); font-size: .7rem; letter-spacing: .08em;
  color: var(--rm-ink-soft); margin: .75rem 0 1.5rem;
}
.rm-jump a { color: var(--rm-ink); text-decoration: underline; text-underline-offset: .25em; }
.rm-jump a:hover { color: var(--rm-accent); }

/* --- 8.20 Сторінка 404 --- */
.rm-404-lead { font-size: 1.05rem; line-height: 1.65; color: var(--rm-ink-soft); max-width: 52ch; }
.rm-404-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 1.25rem; }
.rm-404-hint { font-size: .92rem; color: var(--rm-ink-soft); }
.rm-404-hint a { color: var(--rm-ink); text-decoration: underline; text-underline-offset: .25em; }
.rm-404-hint a:hover { color: var(--rm-accent); }

/* --- 8.21 Службові лінки в кінці категорії --- */
.rm-catlinks {
  font-size: .92rem; color: var(--rm-ink-soft);
  border-top: 1px solid var(--rm-hairline); padding-top: 1.1rem; margin-top: 2rem;
}
.rm-catlinks a { color: var(--rm-ink); text-decoration: underline; text-underline-offset: .25em; }
.rm-catlinks a:hover { color: var(--rm-accent); }

/* --- 8.22 Смуга-доказ: два рядки навігації (декади + теми) --- */
.rm-proof-nav {
  max-width: 1180px; margin: 1.5rem auto 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.rm-proof-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
}
.rm-proof-row + .rm-proof-row { border-top: 1px solid rgba(255, 255, 255, .09); }
.rm-proof-label {
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); text-decoration: none; line-height: 1.3;
  transition: color .2s ease;
}
.rm-proof-label:hover, .rm-proof-label:focus-visible { color: #fff; }
.rm-proof-nav .rm-ruler {
  margin: 0; border-top: 0; padding-top: 0; max-width: none;
}
.rm-proof-nav .rm-ruler--theme .rm-ruler-item { min-width: 5rem; }
@media (max-width: 991.98px) {
  .rm-proof-nav { margin-top: 1.1rem; }
  .rm-proof-row { grid-template-columns: 1fr; gap: .4rem; padding: .65rem 0; }
  .rm-proof-label { font-size: .58rem; }
}

/* --- 8.23 Контрасти AA у дрібному моно-тексті --- */
.rm-card-num { opacity: 1; color: #4a4a4a; }
.rm-card-retail { opacity: 1; color: #4a4a4a; }
.rm-anchor-note { opacity: 1; color: #4a4a4a; }
.text-body-tertiary, .small.text-body-tertiary { color: #6b6b6b !important; }
/* посилання в тілі текстів — у фірмових кольорах, не бутстрапівський синій */
main .content a:not([class]), main article a:not([class]),
.rm-seo-article a:not([class]), .rm-catlinks a:not([class]) {
  color: var(--rm-ink);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
main .content a:not([class]):hover, main article a:not([class]):hover,
.rm-seo-article a:not([class]):hover, .rm-catlinks a:not([class]):hover { color: var(--rm-accent); }
/* --- 8.24 Посилання в тілі текстів: жодного бутстрапівського синього --- */
main p a:not([class]), main li a:not([class]), main .rm-seo-intro a, main .rm-final-lead a {
  color: var(--rm-ink);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
main p a:not([class]):hover, main li a:not([class]):hover,
main .rm-seo-intro a:hover, main .rm-final-lead a:hover { color: var(--rm-accent); }

/* --- 8.25 Тач-таргети 24×24 у шкалах --- */
.rm-ruler-item { padding-block: .45rem; min-height: 26px; }
.rm-proof-label { padding-block: .45rem; min-height: 26px; display: inline-flex; align-items: center; }
.rm-proof-nav .rm-ruler { gap: .25rem; }

/* --- 8.27 Контраст нумерації костюмного листа + відступ кнопок --- */
.rm-sheet-num { opacity: 1; color: #4a4a4a; }
.rm-similar .rm-cta--ghost { margin-top: .5rem; }
.rm-detail-below .rm-cta + .rm-cta, .rm-similar .rm-cta + .rm-cta { margin-left: .75rem; }

/* --- 8.28 Схожі образи на сторінці образу: власний світлий фон --- */
section.rm-similar { background: #eae6de !important; color: var(--rm-ink); }
section.rm-similar h2,
section.rm-similar .rm-card-title { color: var(--rm-ink); }
section.rm-similar .rm-card-num { color: #4a4a4a; }
section.rm-similar .rm-card-meta { color: #4a4a4a; }
section.rm-similar .rm-card-price { color: var(--rm-ink); }
section.rm-similar .rm-card-retail { color: #4a4a4a; }
section.rm-similar .rm-eyebrow { color: var(--rm-ink-soft); }
/* кнопка категорії не має ховатись під липкою панеллю */
section.rm-similar > .container > .text-center { padding-bottom: 1rem; }
@media (max-width: 991.98px) { body.page-obraz section.rm-similar { padding-bottom: 6rem; } }

/* --- 8.29 Картки на темному тлі — світлий дрібний текст --- */
.bg-dark .rm-card-num, .bg-dark .rm-card-meta, .bg-dark .rm-card-retail, .bg-dark .rm-card-title,
.rm-dark .rm-card-num, .rm-dark .rm-card-meta, .rm-dark .rm-card-retail, .rm-dark .rm-card-title,
.bg-graphite .rm-card-num, .bg-graphite .rm-card-meta, .bg-graphite .rm-card-retail,
.bg-concrete .rm-card-num, .bg-concrete .rm-card-meta, .bg-concrete .rm-card-retail {
  color: rgba(255, 255, 255, .82) !important;
}
.bg-dark .rm-card-price, .rm-dark .rm-card-price { color: #fff !important; }

/* --- 8.30 Смуга навігації на хабах (без лічильника) --- */
.rm-proof--slim { padding: 1.1rem 1.25rem 1.3rem; }
.rm-proof--slim .rm-proof-nav { margin-top: 0; border-top: 0; }
.rm-proof--slim .rm-proof-row:first-child { padding-top: 0; }
@media (max-width: 991.98px) { .rm-proof--slim { padding: .9rem .75rem 1rem; } }

/* --- 8.31 Мобільний логотип у шапці абсолютний → контент не має під нього заходити --- */
@media (max-width: 991.98px) {
  /* поза головною мобільний логотип стає звичайним блоком і займає своє місце */
  body:not(.homepage) .page-header .d-lg-none.position-absolute {
    position: static !important;
    background: var(--rm-paper);
  }
  body:not(.homepage) .page-header { background: var(--rm-paper); }
}

/* --- 8.32 Сітка кліпів (5 штук) --- */
.rm-clips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.rm-clips-grid .video-figure { margin: 0; position: relative; display: flex; flex-direction: column; text-align: center; }
.rm-clips-grid .video-figure img.img-fluid { width: 100%; height: auto; display: block; }
.rm-clips-grid .rm-video-cap { padding: .7rem .9rem 0; min-height: 4.2em; }
@media (max-width: 991.98px) { .rm-clips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .rm-clips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-clips-grid .rm-video-cap { font-size: .8rem; min-height: 5em; } }
@media (max-width: 479.98px)  { .rm-clips-grid { grid-template-columns: 1fr; } .rm-clips-grid .rm-video-cap { min-height: 0; padding-bottom: 1rem; } }

/* --- 8.33 Відгуки --- */
.rm-reviews { background: var(--rm-paper); padding: 0 0 clamp(2.5rem, 5vw, 4.5rem); }
.rm-reviews-head { text-align: center; margin-bottom: 2.25rem; }
.rm-quote-block { margin-bottom: 2.75rem; }
.rm-reviews-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin: .35rem 0 0; }
.rm-reviews-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem 1.5rem; max-width: 1180px; margin-inline: auto;
}
.rm-review {
  margin: 0; padding: 1.6rem 1.5rem; background: #fff;
  border: 1px solid var(--rm-hairline); display: flex; flex-direction: column; gap: 1rem;
}
.rm-review-pic { display: block; width: 70px; height: 70px; overflow: hidden; border-radius: 50%; flex: 0 0 auto; }
.rm-review-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-review-text {
  margin: 0; font-size: .97rem; line-height: 1.6; color: var(--rm-ink-soft); flex: 1 1 auto;
}
.rm-review-text p { margin: 0 0 .6rem; }
.rm-review-text p:last-child { margin-bottom: 0; }
.rm-review-cap { display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid var(--rm-hairline); padding-top: .9rem; }
.rm-review-name { font-family: var(--rm-display); font-size: 1.05rem; color: var(--rm-ink); }
.rm-review-src { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #4a4a4a; }
@media (max-width: 991.98px) { .rm-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .rm-reviews-grid { grid-template-columns: 1fr; gap: 1rem; } .rm-review { padding: 1.25rem 1.1rem; } }
/* останній кліп у неповному ряду — по центру сітки */
.rm-clips-grid > :last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 991.98px) { .rm-clips-grid > :last-child:nth-child(3n+1) { grid-column: auto; } }

/* =========================================================
   9. Фото-фон відгуків + картинки в блоці «Чому» — 10.09.2026
   ========================================================= */

/* --- 9.1 Відгуки на фото-стрічці з наших образів --- */
.rm-reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #14100e;
  padding: clamp(2.75rem, 5.5vw, 5rem) 0 clamp(3rem, 5.5vw, 5rem);
}
.rm-reviews::before,
.rm-reviews::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.rm-reviews::before {
  z-index: -2;
  background: url(/assets/img/home/reviews-bg.webp) center center / cover no-repeat;
  opacity: .72;
}
.rm-reviews::after {
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 32%, rgba(20, 16, 14, .28) 0%, rgba(20, 16, 14, .78) 60%, rgba(20, 16, 14, .95) 100%),
    linear-gradient(180deg, rgba(20, 16, 14, .92) 0%, rgba(20, 16, 14, .2) 20%, rgba(20, 16, 14, .2) 80%, rgba(20, 16, 14, .92) 100%);
}
.rm-reviews-head .rm-eyebrow { color: rgba(255, 255, 255, .62); }
.rm-reviews-head h2 { color: #fff; }
.rm-reviews .rm-quote-block {
  margin: 0 auto 2.75rem;
  border-top-color: rgba(255, 255, 255, .22);
  border-bottom-color: rgba(255, 255, 255, .22);
}
.rm-reviews .rm-quote { color: #fff; }
.rm-reviews .rm-quote-cap { color: rgba(255, 255, 255, .62); }
.rm-reviews .rm-review {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
}
@media (max-width: 991.98px) {
  .rm-reviews::before { background-image: url(/assets/img/home/reviews-bg-960.webp); }
}
@media (max-width: 767.98px) {
  .rm-reviews::before {
    background: url(/assets/img/home/reviews-bg-mob.webp) top center / 100% auto repeat-y;
    opacity: .38;
  }
  /* на вузькому екрані текст іде на всю ширину поверх фото — тут потрібен щільніший затемнювач */
  .rm-reviews::after {
    background:
      linear-gradient(180deg, rgba(20, 16, 14, .93) 0%, rgba(20, 16, 14, .74) 8%, rgba(20, 16, 14, .78) 50%, rgba(20, 16, 14, .82) 92%, rgba(20, 16, 14, .95) 100%);
  }
}

/* --- 9.2 Картинки в блоці «Чому наша колекція інша» --- */
.rm-why-item--pic {
  grid-template-columns: 3.5rem minmax(0, 1fr) clamp(180px, 19vw, 240px);
  align-items: start;
}
.rm-why-item--pic > div { grid-column: 2; grid-row: 1; align-self: start; }
.rm-why-pic { grid-column: 3; grid-row: 1; margin: 0; align-self: start; padding-top: .3rem; }
.rm-why-item--flip { grid-template-columns: 3.5rem clamp(180px, 19vw, 240px) minmax(0, 1fr); }
.rm-why-item--flip > div { grid-column: 3; }
.rm-why-item--flip .rm-why-pic { grid-column: 2; }
.rm-why-pic img { width: 100%; height: auto; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.rm-why-cap {
  margin-top: .55rem;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #63615e;
  line-height: 1.65;
}
@media (max-width: 767.98px) {
  .rm-why-item--pic,
  .rm-why-item--flip { grid-template-columns: 2.2rem 1fr; }
  .rm-why-item--pic > div,
  .rm-why-item--flip > div { grid-column: 2; grid-row: 1; align-self: start; }
  .rm-why-pic,
  .rm-why-item--flip .rm-why-pic {
    grid-column: 2; grid-row: 2; margin-top: 1.1rem; max-width: 330px; align-self: start;
  }
}

/* =========================================================
   10. Сторінки категорій — продавальні блоки  10.09.2026
   ========================================================= */

/* --- 10.1 Смуга довіри під крихтами --- */
.rm-trustbar {
  background: var(--rm-paper);
  border-bottom: 1px solid var(--rm-hairline);
}
.rm-trustbar-list {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem 1.25rem;
}
.rm-trustbar-list li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
}
.rm-trustbar-list b {
  font-family: var(--rm-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--rm-ink);
  flex: 0 0 auto;
}
.rm-trustbar-list span {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--rm-ink-soft);
}
@media (max-width: 767.98px) {
  .rm-trustbar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .9rem 0; }
  .rm-trustbar-list b { font-size: 1.25rem; }
  .rm-trustbar-list span { font-size: .62rem; }
}

/* лінк на сторінку-аргумент: той самий екран, де оцінюють довіру */
.rm-trustbar-row { display: flex; align-items: stretch; gap: clamp(.9rem, 2.4vw, 2.5rem); }
.rm-trustbar-row .rm-trustbar-list { flex: 1 1 auto; min-width: 0; }
.rm-trustbar-more {
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  padding-left: clamp(.9rem, 2.4vw, 2.25rem);
  border-left: 1px solid var(--rm-hairline);
  font-family: var(--rm-mono);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rm-ink);
  text-decoration: none;
}
.rm-trustbar-more span { color: var(--rm-accent); display: inline-block; transition: transform .18s ease; }
/* колонки по контенту — щоб лінк не з'їдав ширину підписів */
@media (min-width: 768px) {
  .rm-trustbar-row .rm-trustbar-list { grid-template-columns: repeat(4, minmax(0, max-content)); justify-content: space-between; }
}

.rm-trustbar-more:hover { color: var(--rm-accent); }
.rm-trustbar-more:hover span { transform: translateX(3px); }
.rm-trustbar-more:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: 3px; }
@media (max-width: 767.98px) {
  .rm-trustbar-row { flex-wrap: wrap; gap: 0; }
  .rm-trustbar-more {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    gap: .55rem;
    padding: 0 0 .85rem;
    border-left: 0;
    border-top: 1px solid var(--rm-hairline);
    margin-top: .1rem;
  }
}
/* --- 10.2 «Як це працює» на категоріях --- */
.rm-steps-cat { background: var(--bs-body-bg); }
.rm-steps-cat-lead {
  font-size: .97rem;
  line-height: 1.6;
  color: var(--rm-ink-soft);
  max-width: 32ch;
  margin-bottom: 1.4rem;
}
.rm-steps-cat .rm-steps-list { margin-bottom: 0; }

/* --- 10.3 Відгуки на внутрішніх сторінках --- */
.rm-reviews--inner { padding-top: clamp(2.5rem, 4.5vw, 4rem); }
.rm-reviews-more { text-align: center; margin: 2rem 0 0; }
.rm-reviews-more a {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  text-decoration: none;
  padding-bottom: .2rem;
}
.rm-reviews-more a:hover { color: #fff; border-bottom-color: #fff; }

/* --- 10.4 ₴ у body-шрифті --- */
body, .rm-anchor, .rm-price small { font-family: 'RM UAH Sans', var(--bs-body-font-family); }

/* --- 10.5 Кроки на категоріях у дві колонки на широких --- */
@media (min-width: 992px) {
  .rm-steps-cat .rm-steps-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
  .rm-steps-cat .rm-steps-list li { max-width: none; padding-bottom: 1.4rem; }
}

/* --- 10.6 Невеликі фото всередині SEO-текстів --- */
.rm-textpic {
  width: clamp(150px, 26%, 240px);
  margin: .35rem 0 1.15rem 1.9rem;
  float: right;
  text-align: left;
}
.rm-textpic--left { float: left; margin: .35rem 1.9rem 1.15rem 0; }
.rm-textpic img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.rm-textpic a { text-decoration: none; display: block; }
.rm-textpic figcaption {
  font-family: var(--rm-mono);
  font-size: .6rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #63615e;
  margin-top: .5rem;
}
.rm-textpic figcaption a { color: inherit; border-bottom: 1px solid rgba(0, 0, 0, .18); display: inline; }
.rm-textpic figcaption a:hover { color: var(--rm-ink); border-bottom-color: var(--rm-ink); }
.content::after { content: ""; display: block; clear: both; }
@media (max-width: 575.98px) {
  .rm-textpic,
  .rm-textpic--left { float: none; width: 100%; max-width: 250px; margin: 1.35rem auto; }
  .rm-textpic figcaption { text-align: center; }
}

/* списки поруч із плаваючим фото не «розсипаються» маркерами */
.content ul, .content ol { overflow: hidden; }

/* --- 10.7 Правовий рядок футера --- */
.rm-footer-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.rm-footer-legal-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.rm-footer-legal a,
.rm-footer-copy {
  font-family: var(--rm-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
}
.rm-footer-legal a { border-bottom: 1px solid rgba(255, 255, 255, .28); padding-bottom: .15rem; }
.rm-footer-legal a:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 767.98px) {
  .rm-footer-legal { justify-content: center; text-align: center; }
  .rm-footer-legal-nav { justify-content: center; }
}

/* --- 10.8 Згода на обробку даних у формі --- */
.rm-form-consent {
  font-size: .78rem;
  line-height: 1.55;
  color: var(--rm-ink-soft);
  margin: 0 0 .9rem;
}
.rm-form-consent a { color: var(--rm-ink); text-decoration: underline; text-underline-offset: .15em; }
/* блок згоди їде разом із кнопкою: він частина липкої панелі, а не під нею */
.rm-form-actions { display: block; padding-top: 1.25rem !important; }
@media (max-width: 991.98px) {
  .rm-form-buttons { flex-wrap: wrap; gap: .5rem; justify-content: center !important; }
  .rm-form-buttons .rm-cta { width: 100%; justify-content: center; }
  .rm-form-buttons .btn { margin-left: 0 !important; width: 100%; }
  .rm-form-consent { font-size: .72rem; margin-bottom: .6rem; text-align: center; }
  .rm-form-actions { padding-top: .9rem !important; }
}

/* --- 10.9 Cookie-банер (лише для ЄС/ЄЕЗ/UK/CH) --- */
.rm-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  background: var(--rm-ink);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.rm-consent-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.5rem;
}
.rm-consent-text {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 62ch;
}
.rm-consent-text a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.rm-consent-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.rm-consent-btn {
  font-family: var(--rm-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .7rem 1.35rem;
  border: 1px solid #fff;
  background: #fff;
  color: var(--rm-ink);
  cursor: pointer;
  min-height: 44px;
}
.rm-consent-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.rm-consent-btn:hover { background: var(--rm-accent); border-color: var(--rm-accent); color: #fff; }
@media (max-width: 575.98px) {
  .rm-consent-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .rm-consent-actions { justify-content: center; }
  .rm-consent-btn { flex: 1 1 auto; }
}

/* =========================================================
   11. Відгуки — редакційна подача замість карток  10.09.2026
   ========================================================= */

/* картки-коробки прибрані: текст живе прямо на фото-стрічці */
.rm-reviews .rm-review {
  margin: 0;
  padding: 0 clamp(1rem, 2vw, 2rem);
  background: none;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.rm-reviews-grid {
  gap: clamp(2rem, 3.5vw, 3.25rem) 0;
  max-width: 1240px;
}
/* тонкі вертикальні лінійки між колонками */
.rm-reviews-grid > .rm-review + .rm-review { border-left: 1px solid rgba(255, 255, 255, .17); }
.rm-reviews-grid > .rm-review:nth-child(3n + 1) { border-left: 0; }

.rm-review-stars { display: flex; gap: .18rem; color: #d8a44e; }
.rm-review-stars svg { display: block; }

.rm-reviews .rm-review-text {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .003em;
}
.rm-reviews .rm-review-text p { margin: 0 0 .7rem; }
.rm-reviews .rm-review-text p:last-child { margin-bottom: 0; }

.rm-reviews .rm-review-cap {
  border-top: 0;
  padding-top: 0;
  margin-top: auto;
  gap: .3rem;
}
.rm-reviews .rm-review-name {
  font-family: var(--rm-display);
  font-size: 1.12rem;
  color: #fff;
  line-height: 1.2;
}
.rm-reviews .rm-review-src {
  font-size: .58rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .38);
}

/* нижня половина смуги трохи темніша — щоб текст читався поверх фото */
.rm-reviews::after {
  background:
    radial-gradient(125% 80% at 50% 26%, rgba(20, 16, 14, .16) 0%, rgba(20, 16, 14, .6) 62%, rgba(20, 16, 14, .88) 100%),
    linear-gradient(180deg, rgba(20, 16, 14, .9) 0%, rgba(20, 16, 14, .14) 15%, rgba(20, 16, 14, .38) 44%, rgba(20, 16, 14, .55) 74%, rgba(20, 16, 14, .9) 100%);
}

@media (max-width: 991.98px) {
  .rm-reviews-grid > .rm-review:nth-child(3n + 1) { border-left: 1px solid rgba(255, 255, 255, .17); }
  .rm-reviews-grid > .rm-review:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 575.98px) {
  .rm-reviews-grid { gap: 0; }
  .rm-reviews .rm-review { padding: 1.75rem 0; border-left: 0 !important; }
  .rm-reviews-grid > .rm-review + .rm-review { border-top: 1px solid rgba(255, 255, 255, .17); }
  .rm-reviews .rm-review-text { font-size: .95rem; }
}

/* =========================================================
   12. Сторінка «Чому ми» — власний характер  10.09.2026
   Верх сторінки інвертований: темний «архівний» блок,
   далі сайт повертається до паперу. Єдина така сторінка.
   ========================================================= */
.rm-whyhero {
  --why-ink: #efebe3;
  --why-soft: rgba(239, 235, 227, .74);
  --why-line: rgba(239, 235, 227, .2);
  --why-accent: #ff5c3d;
  position: relative;
  background: #161412;
  color: var(--why-ink);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}
/* ледь помітна вертикальна лінійка — фактура архівного бланка */
.rm-whyhero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 68px);
}
.rm-whyhero > * { position: relative; z-index: 1; }

/* смуга-доказ переїжджає на темне */
.rm-whyhero-bar .rm-trustbar { background: transparent; border-bottom: 1px solid var(--why-line); }
.rm-whyhero-bar .rm-trustbar-list b { color: var(--why-ink); }
.rm-whyhero-bar .rm-trustbar-list span { color: var(--why-soft); }

/* шапка сторінки */
.rm-whyhero article { padding-top: clamp(2.75rem, 5.5vw, 5rem) !important; padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem) !important; }
.rm-whyhero .rm-eyebrow { color: rgba(239, 235, 227, .55); }
.rm-whyhero h1 {
  color: var(--why-ink);
  padding-bottom: 0 !important;
  margin-bottom: 0;
  font-weight: 400;
}
.rm-whyhero h1::after {
  content: "";
  display: block;
  width: 68px;
  height: 2px;
  background: var(--why-accent);
  margin: 1.5rem 0 1.9rem;
}

/* лід — великим шрифтом заголовків, це головна теза сторінки */
.rm-whyhero .rm-seo-intro {
  font-family: var(--rm-display);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.42;
  color: var(--why-ink);
  max-width: 46ch;
}

/* фото на темному — більше, зі світлою рамкою */
.rm-whyhero .rm-textpic { width: clamp(180px, 32%, 300px); }
.rm-whyhero .rm-textpic img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.rm-whyhero .rm-textpic figcaption { color: var(--why-soft); }

/* чотири аргументи — сітка 2×2 з міткою над кожним */
.rm-whyhero .rm-answers {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--why-line);
}
.rm-whyhero .rm-answer {
  border: 0;
  border-bottom: 1px solid var(--why-line);
  padding: 1.7rem clamp(1rem, 2.2vw, 2.2rem) 1.7rem 0;
}
.rm-whyhero .rm-answer:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(1rem, 2.2vw, 2.2rem);
  border-left: 1px solid var(--why-line);
}
.rm-answer-tag {
  display: block;
  font-family: var(--rm-mono);
  font-size: .6rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.rm-whyhero .rm-answer-tag { color: var(--why-accent); }
.rm-whyhero .rm-answer-title { color: var(--why-ink); margin-bottom: .55rem; font-weight: 400; }
.rm-whyhero .rm-answer p { color: var(--why-soft); max-width: none; }
.rm-whyhero .rm-answer p strong { color: var(--why-ink); }

/* службовий рядок з посиланнями */
.rm-whyhero .rm-catlinks { color: var(--why-soft); border-top: 0; margin-top: 1.9rem; max-width: none; }
.rm-whyhero .rm-catlinks a,
.rm-whyhero main p a:not([class]),
.page-why .rm-whyhero .rm-catlinks a:not([class]) {
  color: var(--why-ink);
  text-decoration-color: rgba(239, 235, 227, .45);
}
.rm-whyhero .rm-catlinks a:hover { color: var(--why-accent); }

/* наступна секція після темного верху — трохи глибший папір, щоб ритм читався */
.page-why .rm-whyhero + section { background: #eeebe4 !important; }

@media (max-width: 767.98px) {
  .rm-whyhero::before { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 88px); }
  .rm-whyhero .rm-answers { grid-template-columns: minmax(0, 1fr); }
  .rm-whyhero .rm-answer,
  .rm-whyhero .rm-answer:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  .rm-whyhero h1::after { margin: 1.15rem 0 1.5rem; }
}
@media (max-width: 575.98px) {
  .rm-whyhero .rm-textpic { width: 100%; }
}

/* =========================================================
   13. Шапка головної — доказовий шар  10.09.2026
   Перший екран обіцяв, але нічого не доводив. Смуга внизу
   героя: хто в наших образах знімався + цитата Скрипки.
   Вигляд той самий, але блок стоїть у потоці одразу за героєм:
   всередині героя він був absolute, а .home-hero — sticky, тому
   чорна .rm-proof (z-index 11) з'їдала смугу за перші 80px скролу.
   ========================================================= */
/* z-index 10: вище героя (1) і його .row (z-2), щоб смуга не проїжджала
   під прилиплою .col-thsnd; нижче .rm-proof (11), щоб чорна секція накривала
   смугу при скролі так само, як накриває герой. */
.rm-hero-trust { margin: 0; position: relative; z-index: 10; }
.rm-hero-trust-credits { margin: 0; min-width: 0; }
.rm-hero-trust-quote { margin: 0; }
.rm-hero-trust-names,
.rm-hero-trust-quote { font-family: var(--rm-display); color: var(--rm-ink); }
.rm-hero-trust-quote { font-style: italic; }
.rm-hero-trust-label { color: var(--rm-ink-soft); }
.rm-hero-trust-more { color: var(--rm-ink-soft); font-style: italic; }

@media (min-width: 768px) {
  .rm-hero-trust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 3rem);
    padding: .8rem clamp(1rem, 2.4vw, 2.25rem);
    background: #f4f2ed;
    border-top: 1px solid var(--rm-hairline);
  }
  .rm-hero-trust-credits { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
  .rm-hero-trust-label { flex: 0 0 auto; font-size: .6rem; letter-spacing: .14em; }
  .rm-hero-trust-names { font-size: clamp(.92rem, 1.1vw, 1.08rem); }
  .rm-hero-trust-quote { font-size: clamp(.92rem, 1.1vw, 1.08rem); white-space: nowrap; }
  .rm-hero-trust-quote .rm-mono { font-style: normal; font-size: .6rem; letter-spacing: .14em; margin-left: .55rem; }
}
/* вузькі десктопи: цитата перестає бути в один рядок з іменами */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rm-hero-trust { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .rm-hero-trust-quote { white-space: normal; }
}
/* Шапка виступала за екран рівно на висоту службової смужки (page-header має
   margin-bottom:-90px), тому низ героя не потрапляв у перший екран. Зрізаємо
   hero на цей виступ (16px на lg, 32px на xl) плюс висоту смуги доказу. */
/* home.css підключається ПІСЛЯ rm.css — тому потрібен body.homepage */
@media (min-width: 992px) { body.homepage .home-hero { height: calc(100vh - 16px - 50px); } }
@media (min-width: 1200px) { body.homepage .home-hero { height: calc(100vh - 32px - 50px); } }
/* низькі вікна: віддаємо всю висоту героєві, смуга просто йде нижче */
@media (min-width: 768px) and (max-height: 665px) {
  body.homepage .home-hero { height: 100vh; }
}

@media (max-width: 767.98px) {
  /* на телефоні смуга — пряме продовження темного низу героя */
  .rm-hero-trust {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    text-align: center;
    padding: .75rem 1.25rem .9rem;
    background: #212529;
    border-top: 1px solid rgba(255, 255, 255, .22);
  }
  .rm-hero-trust-credits { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
  .rm-hero-trust-label { color: rgba(255, 255, 255, .62); font-size: .54rem; letter-spacing: .12em; line-height: 1.4; }
  .rm-hero-trust-names { color: #fff; font-size: .9rem; line-height: 1.35; }
  .rm-hero-trust-more { color: rgba(255, 255, 255, .62); }
  .rm-hero-trust-quote { color: #fff; font-size: .9rem; line-height: 1.35; }
  .rm-hero-trust-quote .rm-mono { font-style: normal; color: rgba(255, 255, 255, .62); font-size: .54rem; letter-spacing: .12em; margin-left: .4rem; }
  /* перший екран мобільного: текст не має з'їдати фото */
  .col-thsnd { padding-top: 2rem !important; padding-bottom: 2.25rem !important; }
  .col-thsnd .rm-eyebrow { font-size: .6rem; letter-spacing: .14em; margin-bottom: .5rem; }
  .rm-hero-lead { font-size: .97rem; line-height: 1.5; margin: .8rem 0 1.15rem; }
  .col-thsnd .rm-cta-note { line-height: 1.45; }
  .rm-hero-actions { gap: .55rem; margin-bottom: .7rem; }
}