/* ui-1030: mmix.ca usability layer over the static snapshot. Same tokens as style.min.css:
   red #d92120, graphite #212121, grey text #646464, plates #f2f2f2, lines #dedede, Unbounded + Open Sans.
   Remove the <link> (rollback.sh) and the site is exactly as before. */

/* 1. Header polyhedron: on phones it hung below the bar over breadcrumbs and headings, and kept floating over text while scrolling */
@media (max-width: 767px) {
  .navbar .symbol { display: none; }
}

/* 2. Breadcrumbs: one line on phones and tablets (it broke into 4 lines with "|" left hanging), scrolls sideways, current page in view */
.breadcrumbs__item { align-items: center; }
@media (max-width: 991px) {
  .breadcrumbs__section { min-height: 0; padding-bottom: 8px; }
  .breadcrumbs__list {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    white-space: nowrap; font-size: 14px; line-height: 1.4; padding: 6px 0;
  }
  .breadcrumbs__list::-webkit-scrollbar { display: none; }
  .breadcrumbs__item { flex: 0 0 auto; }
  .breadcrumbs__item:not(:last-child)::after { margin: 0 8px; color: #9a9a9a; }
  .breadcrumbs__link { display: inline-block; padding: 6px 0; }
  .breadcrumbs.ux-fade-r .breadcrumbs__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .breadcrumbs.ux-fade-l .breadcrumbs__list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  .breadcrumbs.ux-fade-l.ux-fade-r .breadcrumbs__list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}

/* 3. Page header on phones: icon + rubric + H1 + lead read as one block (was 18px H1 under a 20px rubric pulled up by -20px) */
@media (max-width: 576px) {
  .headerblock__top { gap: 14px; padding-bottom: 28px; }
  .headerblock__subtitle { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; line-height: 1.35; margin: 0; }
  .headerblock__subtitle img { width: 34px; height: auto; margin: 0; transform: none; flex: 0 0 auto; }
  .headerblock__title { font-size: 22px; line-height: 1.3; }
  .headerblock__description { text-align: left; font-size: 16px; line-height: 1.6; padding-top: 14px; }
  .headerblock__description .discuss { margin-left: 0; }
  .headerblock__bottom { width: 62%; max-width: 260px; margin: 0 auto 6px; }
}

/* 4. Unbounded set at line-height 100–120% when it wraps: titles in cards, steps, tabs, FAQ, footer menu */
.accordion__title, .steps__title, .hoverblock__title, .tableblock__title,
.tabs__header-item, .locations .menu > .menu__item > .menu__link { line-height: 1.3; }
.steps__description { line-height: 1.45; }
.intro__description { line-height: 1.35; }
@media (max-width: 767px) {
  .locations .menu > .menu__item > .menu__link { line-height: 1.6; }
}

/* 5. "How we work" steps: inactive steps sat at 50% opacity (grey on white, below 3:1); keep the highlight, make the rest readable */
.structureblock__subtitle { opacity: .8; }
.structureblock__text { opacity: .85; }

/* 6. FAQ: was a vertical looped swiper with fixed height that grabbed the mouse wheel; the open answer floated over the next questions.
   ui-fix.js turns it into a plain accordion (.ux-faq); without JS nothing changes */
.faq.ux-faq .accordion { height: auto !important; }
.faq.ux-faq .swiper-faq { overflow: visible; height: auto; }
.faq.ux-faq .swiper-wrapper { display: flex; flex-direction: column; gap: 14px; transform: none !important; height: auto !important; }
.faq.ux-faq .swiper-slide { height: auto !important; width: 100% !important; margin: 0 !important; box-shadow: none !important; }
.faq.ux-faq .swiper-slide-duplicate { display: none !important; }
.faq.ux-faq .scrollblock__scroll { display: none; }
.faq.ux-faq .accordion__item { padding: 0; background: #fff; }
.faq.ux-faq .accordion__item-trigger { padding: 18px 20px; min-height: 56px; gap: 12px; }
.faq.ux-faq .accordion__item-trigger .trigger__text { margin-left: 0; }
.faq.ux-faq .accordion__item-trigger .trigger__img { flex: 0 0 auto; transition: transform .3s ease; }
.faq.ux-faq .accordion__item.is-open .trigger__img { transform: rotate(180deg); }
.faq.ux-faq .swiper-slide .accordion__item-content {
  display: none; position: static; transform: none; opacity: 1; background: none; box-shadow: none;
  border: 0; border-radius: 0; padding: 0 20px 20px; animation: none;
}
.faq.ux-faq .accordion__item.is-open .accordion__item-content { display: block; }
.faq.ux-faq .accordion__item-content .content__text { margin: 0; line-height: 1.6; }
.faq.ux-faq .accordion__item-trigger:focus-visible { outline: 2px solid #d92120; outline-offset: 2px; border-radius: 18px; }
@media (max-width: 991px) { .faq__top { margin-bottom: 4px; } }

/* 7. Tap targets: burger was 30x20, carousel arrows and small links under 44px on phones */
@media (max-width: 991.98px) {
  .burger { box-sizing: content-box; padding: 12px 8px; margin-right: -8px; }
  .burger::before, .burger::after { left: 8px; width: 30px; }
  .burger::before { top: 16px; }
  .burger::after { bottom: 15px; width: 21px; }
  .burger span { top: 21px; right: 8px; }
  .burger.active::after { bottom: 22px; }
}

/* 8. Footer map: the lazy iframe box was a fixed 600x450 inside a 220px frame */
.locations__map .lazy-load-map { width: 100%; height: 100%; }

/* 9. Keyboard focus: links and buttons had no visible focus ring */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #d92120; outline-offset: 2px;
}

/* 10. Full-bleed dark blocks on phones: margin -20px inside a 15px container stuck 5px out on both sides */
@media (max-width: 767.98px) {
  .services, .steps, .steps__block, .textblock, .about { margin-left: -15px; margin-right: -15px; }
}

/* 11. More line-height for wrapped Unbounded and list text (was 1.0 – headings and bullets glued together) */
.locations__title { line-height: 1.15; }
.locations__block a { line-height: 1.3; display: inline-block; }
.tableblock__subtitle, .salesblock__subtitle, .hoverblock__subtitle, .structureblock__description { line-height: 1.35; }
.services .tabs__header .tabs__header-item { line-height: 1.3; }
.article__content li, .article__content ul > li { line-height: 1.6; }
.article__content h2, .article__content h3 { line-height: 1.3; }
.article__content .mistakes { line-height: 1.5; }

/* 12. Small tap targets: pagination numbers (9–16px wide), blog/policy side menu, list links */
.pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 40px; }
.pagination__list { gap: 8px; }
#sidebar-menu > li > a { display: inline-block; padding: 6px 0; }

/* 13. Links inside running text were browser blue (#0000ee): site red, underlined, readable on dark plates too */
:is(p, li, td, .headerblock__description, .content__text, .article__content, .textblock__description) > a:not([class]),
:is(p, li, td) > strong > a:not([class]) {
  color: #d92120; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:is(p, li, td, .headerblock__description, .content__text, .article__content) > a:not([class]):hover { color: #212121; }
:is(.textblock, .services, .case__section) :is(p, li, td, div) > a:not([class]) { color: #ff6b6a; }
:is(.textblock, .services, .case__section) :is(p, li, td, div) > a:not([class]):hover { color: #fff; }

/* 14. Skip link (added by ui-fix.js), visible only on keyboard focus */
.ux-skip { position: fixed; left: 12px; top: -60px; z-index: 1000001; background: #d92120; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 15px; transition: top .2s ease; }
.ux-skip:focus { top: 12px; color: #fff; }
main:focus { outline: none; }

/* 15. Contrast (PSI/axe): red titles on grey #f2f2f2 plates were 4.47:1 - the site's darker red #ca0000 (already used for the current crumb) gives 5.3:1 */
.hoverblock__subtitle, .tableblock__subtitle { color: #ca0000; }

/* 16. Breadcrumb links were 18px tall (target-size) */
.breadcrumbs__link { display: inline-block; padding: 4px 0; }

/* 17. Cookie banner: it appeared before the web fonts and rewrapped when they arrived (CLS 0.07 on phones).
   Shown once fonts are ready (html.ux-fonts from ui-fix.js); the animation shows it after 2.5 s in any case */
html:not(.ux-fonts) #cookie-banner { visibility: hidden; animation: ux-show 0s 2.5s forwards; }
@keyframes ux-show { to { visibility: visible; } }

/* 18. Pale background words: partners/team were the only ones left on phones, cut to "PARTN" across the description */
@media (max-width: 576px) { .partners__name, .team__name { display: none; } }

/* 19. More cramped text found by the line-height check: blog side menu, case cards, expert/franchise headings, article lists */
#sidebar-menu > li > a { line-height: 1.35; }
.cases__description, .cases__description span { line-height: 1.4; }
.mxep-side h2, .header-stars h1 { line-height: 1.3; }
.mx-post li { line-height: 1.6; }

/* 20. Tap targets: the case "website" link (22px), the Portfolio card on the home hero (only the word was clickable),
   inline links in lists and FAQ answers get vertical padding (bigger hit area, same line box) */
.siteblock__link { display: inline-block; padding: 10px 0; }
.intro__portfolio .intro__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
:is(.article__content, .mx-post, .mxfr-prose, .mxep-main, .textblock, .headerblock__description, .content__text, .seo-page main) :is(ul, ol) > li > a:not([class]),
.mxep-link, .mxep-eyebrow a, .sp-faq__a a, .steps__description a { padding: 4px 0; }
.mxep-backlink { display: inline-block; padding: 12px 0; }

/* 21. Footer heading: the Russian "Местоположение" at 42px was wider than a phone and lost its last letters */
@media (max-width: 576px) { .locations__title { font-size: min(42px, 8vw); overflow-wrap: anywhere; } }

/* 22. Form field labels (floating, absolute): long RU/FR labels wrapped onto the field's underline */
@media (max-width: 576px) {
  .form__step-block--item > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; left: 16px; width: calc(100% - 32px); }
}

/* 23. "What we do" tabs on phones: tabs wrapped to 3 lines under the underline and the next tab hid under the arrow;
   now one swipeable row, the arrows are not needed there */
@media (max-width: 767px) {
  .services .tabs__header { overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; height: auto; min-height: 56px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .services .tabs__header::-webkit-scrollbar { display: none; }
  .services .tabs__header::before, .services .tabs__header::after, .services .tabs__header .tabs__header-icon { display: none !important; }
  .services .tabs__header .tabs__header-item { flex: 0 0 auto; white-space: nowrap; font-size: 15px; line-height: 1.3; padding: 14px 14px; }
}

/* 24. Portfolio plate with no case carousel in the page (several FR/RU pages): drop the empty bottom of the plate */
.portfolio:not(:has(.portfolio__bottom)) .portfolio__top { padding-bottom: 28px; }
.portfolio__section:not(:has(.portfolio__bottom)) .portfolio { padding-bottom: 8px; }

/* 25. Hero picture on industry/service pages: the two pale copies of the picture stuck out of the screen and hazed the rubric on phones */
@media (max-width: 767px) { .headerblock__bottom img:nth-child(2), .headerblock__bottom img:nth-child(3) { display: none; } }

/* 26. Blog article: date was pale #c6c2c2 (1.7:1) and a raw "2024-03-01 21:52:46" (ui-fix.js shows the date only);
   contents list sat at 55% opacity with line-height 110% */
.article__date { color: #646464; }
.article__sidebar li { opacity: .85; }
.article__sidebar li:hover, .article__sidebar li:focus-within { opacity: 1; }
.article__sidebar a { line-height: 1.35; padding: 3px 0; }
@media (max-width: 991px) { .article__sidebar a { font-size: 16px; } }

/* 27. Case header on phones: long description centered over 10–15 lines */
@media (max-width: 576px) { .case__description { text-align: left; line-height: 1.6; } }

/* 28. Steps scroller in the hero of service hubs (template 11): a vertical swiper with 150px slides - long step texts ran into the
   next title, the wheel was captured, and on phones the whole list was hidden. ui-fix.js turns it into a plain list (.ux-list):
   desktop keeps the 450px window but scrolls natively, phones show the steps under the title */
.scrollblock.ux-list .swiper { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #dedede transparent; }
.scrollblock.ux-list .swiper::after { display: none; }
.scrollblock.ux-list .swiper-wrapper { display: flex; flex-direction: column; transform: none !important; height: auto !important; }
.scrollblock.ux-list .swiper-slide { height: auto !important; margin: 0 !important; padding-bottom: 18px; }
.scrollblock.ux-list .swiper-slide-duplicate { display: none !important; }
.scrollblock.ux-list .steps__description { line-height: 1.5; }
@media (max-width: 767px) {
  .scrollblock.ux-list { flex-direction: column; align-items: stretch; gap: 20px; }
  .scrollblock.ux-list .scrollblock__top { width: 100%; min-height: 0 !important; padding: 0; }
  .scrollblock.ux-list .scrollblock__scroll { display: none; }
  .scrollblock.ux-list .scrollblock__bottom { display: block; width: 100%; }
  .scrollblock.ux-list .swiper { height: auto; overflow: visible; border: 0; }
  .scrollblock.ux-list .scrollblock__icosphere { width: 120px; height: 110px; opacity: .5; }
}

/* 29. Wide tables in articles scroll sideways inside their box: show it with an edge shadow (stays put while scrolling) */
.mxfr-tbl, .mx-tablewrap {
  background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) 0 0 / 32px 100% no-repeat local,
              linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) 100% 0 / 32px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), transparent) 0 0 / 12px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), transparent) 100% 0 / 12px 100% no-repeat scroll;
}
.mxfr-tbl table, .mx-tablewrap table { background: transparent; }

/* 30. Expert/franchise pages: two-line red labels at line-height 1.0; long French words split mid-word in narrow columns */
.mxep-eyebrow, .mxep-k { line-height: 1.35; }
:is(.mxep-side, .mxfr-side, .mxep-main, .mxfr-prose) :is(h2, h3) { overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* 31. Portfolio page title: the RU word at ~(1vw+1vh)*5.55 was wider than a phone */
@media (max-width: 576px) { .folioheader__title { font-size: min(calc((1vw + 1vh) * 3.8), 9.5vw); } }

/* 32. Case cards: empty category/date line showed a lone "/" */
.cases__text :empty { display: none; }
.cases__description:not(:has(span:not(:empty))) { display: none; }
.cases__description { color: #646464; }

/* 33. FR header: the longer menu squeezed the Telegram/WhatsApp pair into a vertical stack */
.navbar > div[style*="margin-right"] { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.navbar > div[style*="margin-right"] > a { margin-right: 0 !important; }

/* 34. SEO-by-month page: 11px "in the report" captions */
.sp-row__see span { font-size: 12px; }

/* 35. Header between 992 and 1279px: the FR/RU menu did not fit - the logo shrank to 20px, RU items broke in two lines,
   the FR "Discuter du projet" button was cut at the screen edge */
@media (min-width: 992px) and (max-width: 1279px) {
  .navbar .logo { flex: 0 0 auto; margin-right: 18px; }
  .navbar .logo img { width: 84px; }
  .navbar nav { min-width: 0; }
  .navbar .menu > .menu__item > .menu__link { font-size: 15px; white-space: nowrap; padding-right: 10px; }
  .navbar > div[style*="margin-right"] { margin-right: 10px !important; }
  .header .discuss .discuss__img { display: none; }
  .header .discuss__block { font-size: 15px; white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  html:is([lang="fr"], [lang="ru"]) .navbar > div[style*="margin-right"] { display: none; }
}

/* 36. Home hero lead: at 768–1199 seven lines of 20px overflowed the 433px picture and lost the first line;
   on phones the bold 5–6 line lead reads better left-aligned, like the other page leads */
@media (min-width: 577px) and (max-width: 1199px) { .intro__description { font-size: clamp(14px, 1.7vw, 18px); } }
@media (min-width: 577px) and (max-width: 991px) { .intro__discuss { padding-right: 18px; } }
@media (max-width: 576px) {
  .intro__discuss { text-align: left; }
  .intro__discuss .discuss { margin-left: 0; }
}
.intro__link { padding: 0 10px; font-size: clamp(16px, 1.6vw, 22px); }

/* 37. Footer menu: two columns sized to the words (FR "Qui sommes-nous" broke at the hyphen, RU "Портфолио" ran into "Блог" at 768) */
@media (min-width: 577px) {
  .locations .menu { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 36px; align-items: start; }
  .locations .menu > .menu__item { width: auto; }
  .locations .menu > .menu__item > .menu__link { white-space: nowrap; font-size: clamp(18px, 1.6vw, 26px); padding: 4px 0; }
}
@media (min-width: 577px) and (max-width: 991px) {
  .locations__bottom { flex-direction: column; align-items: stretch; }
  .locations__menu, .locations__map { width: 100%; }
}

/* 38. Current crumb on the dark case/portfolio header was #ca0000 on #212121 (2.7:1) */
.case-page .breadcrumbs__current, .portfolio-page .breadcrumbs__current { color: #ff6b6a; }

/* 39. Empty case carousels left a grey gap under "All cases" (the plate keeps an empty .owl-carousel) */
.portfolio:not(:has(.slider__img, .swiper-slide img, .owl-item)) .portfolio__bottom { display: none; }
.portfolio:not(:has(.slider__img, .swiper-slide img, .owl-item)) .portfolio__top { padding-bottom: 28px; }
@media (max-width: 767px) { .portfolio__bottom { margin-bottom: 36px; } }

/* 40. Contents plate with a single entry (the H1 itself) on hub pages: 250px of nothing */
.article__sidebar:has(#sidebar-menu > li:only-child) { display: none; }
.article__sidebar li { opacity: 1; }
.article__sidebar a, .article__sidebar li > a:not([class]) { color: #212121; text-decoration: none; }
.article__sidebar a:hover, .article__sidebar li > a:not([class]):hover { color: #d92120; }

/* 41. Steps hero list (template 11) at tablet widths: show the whole list instead of a cut 450px window */
@media (min-width: 768px) and (max-width: 1199px) {
  .scrollblock.ux-list .swiper { height: auto; max-height: none; overflow: visible; }
  .scrollblock.ux-list .scrollblock__scroll { display: none; }
}
@media (max-width: 767px) { .scrollblock.ux-list { gap: 0; } .scrollblock.ux-list .scrollblock__bottom { margin-top: 16px; } }

/* 42. Franchise tables on phones: the scroll box bled 16px past the screen edge, so the cut looked like a bug */
@media (max-width: 576px) { .mxfr-tbl { margin-right: 0; } }

/* 43. Card titles in 3-column grids at tablet width broke at the hyphen ("Account set- / up") */
@media (min-width: 768px) and (max-width: 1100px) { .tableblock__subtitle { font-size: clamp(17px, 2.1vw, 20px); } }

/* 44. SEO-by-month page: the decorative red ring of the dark link-budget panel ran through the text */
.sp-links__panel > * { position: relative; z-index: 1; }
.sp-links__panel::after { opacity: .45; }

/* 45. Inactive service tabs: #646464 on the #212121 plate was 2.7:1 (PSI color-contrast once the tabs became a visible row on phones) */
.services .tabs__header .tabs__header-item:not(.active) { color: #a9a9a9; opacity: 1; }