/* ==========================================================================
   MM Group — base, layout, components, motion.
   Depends on tokens.css. No framework, no build step.
   ========================================================================== */

/* ------------------------------------------------------------------ Reset */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--mm-header-h) + 20px);
  /* The canvas beyond the body — iOS overscroll, a short page — must not flash
     the other theme's paper. */
  background:var(--mm-bg);
}
body{
  margin:0;
  background:var(--mm-bg);
  color:var(--mm-fg);
  font-family:var(--mm-font-text);
  font-size:var(--mm-size-body);
  line-height:var(--mm-lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg,iframe{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit}
ul,ol{margin:0;padding:0}
figure{margin:0}

h1,h2,h3,h4{
  font-family:var(--mm-font-display);
  font-weight:400;
  letter-spacing:var(--mm-track-tight);
  line-height:var(--mm-lh-heading);
  color:var(--mm-fg-strong);
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--mm-size-h1);line-height:var(--mm-lh-display)}
h2{font-size:var(--mm-size-h2)}
h3{font-size:var(--mm-size-h3)}
h4{font-size:var(--mm-size-h4)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* Numbers must never reflow while a counter animates. */
.mm-num,.mm-stat__value,time{font-variant-numeric:tabular-nums}

:focus-visible{outline:var(--mm-focus);outline-offset:4px;border-radius:var(--mm-radius)}
:focus:not(:focus-visible){outline:none}

::selection{background:var(--mm-accent);color:var(--mm-on-accent)}

/* ------------------------------------------------------ On a photograph ---
   Everything listed here sits on top of a photograph, behind a scrim that does
   NOT flip with the theme — white type on a photograph needs a dark scrim
   whatever the page around it is doing (tokens.css, group 3). So inside these
   regions the text tokens are pinned to their dark-theme values. In the light
   theme they are the only islands that stay light-on-dark.

   Get this wrong and the homepage headline, the brand cards and the photo
   heroes all go graphite-on-photograph. It is the easiest mistake in the file.

   The header appears here only for the home page: everywhere else a breadcrumb
   bar clears the header's height first, so at scroll 0 the header is over the
   page background and not over the picture. And it is listed element by
   element rather than as a block, because the dropdown is an opaque surface of
   its own — pinning the whole header printed pale text on a pale panel. */
.mm-hero,
.mm-page-hero:not(.mm-page-hero--plain),
.mm-brand,
.mm-card__tag,
.mm-feed__badge,
.mm-veh__flag,
.mm-lightbox,
body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-logo,
body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-theme,
body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-burger{
  --mm-fg:           #EDEDED;
  --mm-fg-strong:    #FFFFFF;
  --mm-fg-soft:      #D2D2D2;
  --mm-fg-muted:     #A7A4A4;
  --mm-accent-text:  var(--mm-scrim-accent);
  --mm-focus-color:  var(--mm-scrim-accent);
  --mm-rule:         rgb(237 237 237 / 12%);
  --mm-rule-soft:    rgb(237 237 237 / 7%);
  --mm-ghost-border: rgb(237 237 237 / 30%);
  --mm-ghost-fill:   rgb(237 237 237 / 10%);
}
/* The navigation links are on the photograph only while the nav is the
   horizontal row in the header bar. Below the burger breakpoint the nav is an
   opaque panel of its own, filling the screen under the header — pinned there,
   its eight items printed pale-on-pale and were effectively invisible.
   Kept in step with the 1000px collapse further down this file. */
@media (min-width:1041px){
  body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-nav__list > li > a,
  body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-nav__toggle{
    --mm-fg:           #EDEDED;
    --mm-fg-strong:    #FFFFFF;
    --mm-fg-soft:      #D2D2D2;
    --mm-fg-muted:     #A7A4A4;
    --mm-accent-text:  var(--mm-scrim-accent);
    --mm-focus-color:  var(--mm-scrim-accent);
    --mm-rule:         rgb(237 237 237 / 12%);
  }
}

/* ---------------------------------------------------------------- Utility */
.mm-wrap{max-width:var(--mm-max);margin-inline:auto;padding-inline:var(--mm-gutter)}
.mm-prose{max-width:var(--mm-max-text)}
.mm-prose h2{font-size:clamp(22px,2.6vw,30px);margin:2em 0 .7em}
.mm-prose h2:first-child{margin-top:0}
.mm-prose h3{font-size:clamp(18px,2vw,22px);margin:1.8em 0 .6em}
.mm-prose p,.mm-prose li{color:var(--mm-fg-soft)}
.mm-prose ul,.mm-prose ol{margin:0 0 1.2em;padding-left:22px}
.mm-prose li{margin-bottom:.5em}
.mm-prose ul{list-style:none;padding-left:0}
.mm-prose ul li{position:relative;padding-left:22px}
.mm-prose ul li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--mm-accent)}
.mm-prose ol{list-style:decimal}
.mm-prose ol li::marker{color:var(--mm-accent-text)}
.mm-prose a{color:var(--mm-accent-text)}
.mm-prose strong{color:var(--mm-fg-strong);font-weight:600}
.mm-prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:16px}
.mm-prose th{text-align:left;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mm-fg-muted);font-weight:500;padding:12px;border-bottom:1px solid var(--mm-rule)}
.mm-prose td{padding:14px 12px;border-bottom:1px solid var(--mm-rule-soft);color:var(--mm-fg-soft);vertical-align:top}
.mm-prose .mm-legal-note{
  border-left:2px solid var(--mm-accent);background:var(--mm-accent-wash);
  padding:18px 22px;margin:0 0 2.4em;font-size:15px;color:var(--mm-fg);
}
.mm-prose .mm-legal-note strong{color:var(--mm-accent-text)}
.mm-prose .mm-legal-note p:last-child{margin-bottom:0}
/* Editors-only flag. The note itself is never rendered for visitors — see
   mm_sc_admin_note() — so this badge is the reminder that what follows is internal. */
.mm-prose .mm-legal-note__flag{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--mm-accent-text);margin:0 0 .8em;
}
/* Wide content must scroll inside itself, never the page. */
/* The retention table has eight columns and cannot fit a phone. It scrolls
   inside itself, which is right — but at 375 the third column was cut mid-word
   with nothing to say there was more, so "Правно основание" and "Срок на
   съхранение" were invisible on a page a visitor reads before giving data.
   The shadow appears only on the side that still has content (background-
   attachment:local does the work; no script). */
.mm-prose .mm-table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--mm-bg) 30%, rgb(var(--mm-bg-rgb) / 0%)) left center,
    linear-gradient(to left,  var(--mm-bg) 30%, rgb(var(--mm-bg-rgb) / 0%)) right center,
    radial-gradient(farthest-side at 0 50%,   rgb(var(--mm-accent-rgb) / 70%), rgb(var(--mm-accent-rgb) / 0%)) left center,
    radial-gradient(farthest-side at 100% 50%, rgb(var(--mm-accent-rgb) / 70%), rgb(var(--mm-accent-rgb) / 0%)) right center;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,18px 100%,18px 100%;
  background-attachment:local,local,scroll,scroll;
}
/* The section interval is carried by two custom properties rather than written
   straight into padding-block. Two reasons, both load-bearing:
   · the boundary rules below need to change one side of one section without
     restating the other, and
   · every exception already in this file (.mm-crumbs-bar, .mm-car) sets a
     LONGHAND — padding-block-start / padding-top / padding-bottom — which beats
     this shorthand on its own property whatever the selector weight. Those
     exceptions were written against real defects; they keep working untouched. */
.mm-section{
  --mm-sec-top:var(--mm-section-y);
  --mm-sec-bot:var(--mm-section-y);
  padding-block:var(--mm-sec-top) var(--mm-sec-bot);
}
.mm-section--alt{background:var(--mm-bg-alt)}

/* ---------------------------------------------------------- Section rhythm
   Where the background changes, the full interval is earned: there is a visible
   edge and the pause reads as a chapter break. Where two sections share a tone,
   296px of nothing (1480px viewport and up) reads as a hole — the client saw it
   between "кои сме" and "портфолио" on the front page. So the interval is a
   property of the BOUNDARY, not of any named section: same tone on both sides →
   both paddings close to --mm-section-y-tight, 176px instead of 296px at 1920,
   88px instead of 144px at 375.

   Three tones, not two. .mm-cta sits on a photograph behind its own scrim and
   already declares its own padding-block, so it is an edge like --alt is, and is
   excluded from "same tone" on both sides.

   The trailing half needs :has() — there is no previous-sibling combinator.
   Where :has() is unsupported the rule is simply dropped and that boundary keeps
   the old full padding on its upper side: looser than intended, never broken. */
.mm-section:not(.mm-section--alt):not(.mm-cta) + .mm-section:not(.mm-section--alt):not(.mm-cta),
.mm-section--alt + .mm-section--alt{--mm-sec-top:var(--mm-section-y-tight)}
.mm-section:not(.mm-section--alt):not(.mm-cta):has(+ .mm-section:not(.mm-section--alt):not(.mm-cta)),
.mm-section--alt:has(+ .mm-section--alt){--mm-sec-bot:var(--mm-section-y-tight)}
.mm-section__head{max-width:60ch;margin-bottom:var(--mm-block-y)}
.mm-section__head p{color:var(--mm-fg-soft);margin:20px 0 0;font-size:var(--mm-size-lead)}

.mm-screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.mm-skip-link{
  position:absolute;top:-100px;left:var(--mm-gutter);z-index:200;
  background:var(--mm-accent);color:var(--mm-on-accent);padding:14px 22px;
  text-decoration:none;font-size:14px;transition:top var(--mm-dur-fast) var(--mm-ease);
}
.mm-skip-link:focus{top:14px}

.mm-eyebrow{
  font-size:var(--mm-size-eyebrow);
  letter-spacing:var(--mm-track-eyebrow);
  text-transform:uppercase;
  color:var(--mm-accent-text);
  font-weight:500;
  margin:0 0 18px;
  display:flex;align-items:center;gap:14px;
}
.mm-eyebrow::after{
  content:"";height:1px;flex:1;max-width:90px;
  background:linear-gradient(90deg,var(--mm-accent),transparent);
}
.mm-eyebrow--center{justify-content:center}
.mm-eyebrow--center::after{display:none}

/* --------------------------------------------------------------- Buttons */
.mm-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 32px;
  border:1px solid var(--mm-accent);
  color:var(--mm-fg-strong);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;background:transparent;
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--mm-radius);
  transition:border-color var(--mm-dur) var(--mm-ease);
}
.mm-btn::before{
  content:"";position:absolute;inset:0;background:var(--mm-accent);
  transform:scaleX(0);transform-origin:left;z-index:-1;
  transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-btn:hover::before,.mm-btn:focus-visible::before{transform:scaleX(1)}
/* White on bronze = 4.61:1 ✓. Ink on bronze would be 3.58:1 ✗ — never use it. */
.mm-btn:hover,.mm-btn:focus-visible{color:var(--mm-on-accent)}
.mm-btn__arrow{transition:transform var(--mm-dur-fast) var(--mm-ease)}
.mm-btn:hover .mm-btn__arrow{transform:translateX(6px)}
.mm-btn--ghost{border-color:var(--mm-ghost-border)}
.mm-btn--ghost::before{background:var(--mm-ghost-fill)}
.mm-btn--solid{background:var(--mm-accent);border-color:var(--mm-accent)}
.mm-btn--solid::before{background:var(--mm-accent-deep)}

/* Underline that arrives from the opposite side to the cursor's travel. */
.mm-link{
  color:var(--mm-fg-strong);text-decoration:none;
  position:relative;display:inline-block;padding-bottom:3px;
}
.mm-link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--mm-accent);transform:scaleX(0);transform-origin:right;
  transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-link:hover::after,.mm-link:focus-visible::after{transform:scaleX(1);transform-origin:left}

.mm-more{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mm-fg-strong);text-decoration:none;
}
.mm-more::after{
  content:"";display:block;width:26px;height:1px;background:var(--mm-accent-text);
  transition:width var(--mm-dur) var(--mm-ease);
}
a:hover .mm-more::after,.mm-more:hover::after{width:46px}

/* ---------------------------------------------------------------- Header */
.mm-header{
  position:fixed;inset:0 0 auto;z-index:50;
  border-bottom:1px solid transparent;
  transition:background var(--mm-dur) var(--mm-ease),
             backdrop-filter var(--mm-dur) var(--mm-ease),
             border-color var(--mm-dur) var(--mm-ease);
}
.mm-header.is-stuck{
  background:var(--mm-chrome);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--mm-rule);
}
.mm-header__inner{display:flex;align-items:center;justify-content:flex-start;gap:24px;height:var(--mm-header-h)}
/* The theme switch and the burger travel together at the right-hand end. Below
   the nav breakpoint the nav is position:fixed and out of flow, so the group
   carries the auto margin rather than the nav. */
.mm-header__tools{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
@media (min-width:1041px){
  .mm-nav{margin-left:auto}
  .mm-header__tools{margin-left:0}
}
.mm-logo{display:block;flex-shrink:0}
/* The mark is a stacked lockup — monogram over the word GROUP — so it needs
   real height to read at all. At 26px in an 82px header the word was illegible
   and the brand barely registered next to the nav. */
.mm-logo img,.mm-logo svg{height:56px;width:auto}
/* The header itself drops to 68px below this width, so the mark comes down with
   it. The footer mark does not: it has room there and stays 56px. A rule for it
   used to sit here and did nothing — .mm-footer__logo is declared later in the
   file at the same specificity, so the later declaration always won. */
@media (max-width:760px){
  .mm-logo img,.mm-logo svg{height:44px}
}

/* ------------------------------------------------------ Logo, two marks ---
   The white mark vanishes on paper and the dark mark vanishes on ink, so both
   files ship and CSS chooses. Not PHP — the page cache would hand one
   visitor's theme to the next. Not JavaScript — the mark would blink on every
   load, and it is the first thing anyone sees. */
.mm-logo__img--light-bg{display:none}
[data-theme="light"] .mm-logo__img--dark-bg{display:none}
[data-theme="light"] .mm-logo__img--light-bg{display:block}
/* The home page is the exception: its header floats over the hero photograph
   until it sticks, so up there the surface under the mark is the scrim, not
   the page. The mark changes at the same scroll position as the header
   background, which is why it reads as one move rather than two. */
[data-theme="light"] body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-logo__img--light-bg{display:none}
[data-theme="light"] body:has(.mm-hero) .mm-header:not(.is-stuck) .mm-logo__img--dark-bg{display:block}

/* ------------------------------------------------------------ Theme switch */
.mm-theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;padding:0;
  background:none;border:1px solid var(--mm-rule);border-radius:var(--mm-radius);
  color:var(--mm-fg);cursor:pointer;
  transition:border-color var(--mm-dur-fast) var(--mm-ease),
             color var(--mm-dur-fast) var(--mm-ease);
}
.mm-theme:hover,.mm-theme:focus-visible{border-color:var(--mm-accent);color:var(--mm-fg-strong)}
/* The language control shares the theme toggle's box so the two read as one
   pair of controls rather than two unrelated widgets. It carries letters, not a
   glyph, so it gets the display face and a tighter size to sit on the same
   optical weight as an 18px icon. */
.mm-lang{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;padding:0;
  background:none;border:1px solid var(--mm-rule);border-radius:var(--mm-radius);
  color:var(--mm-fg);text-decoration:none;cursor:pointer;
  font-family:var(--mm-font-display);font-size:12px;letter-spacing:.06em;
  transition:border-color var(--mm-dur-fast) var(--mm-ease),
             color var(--mm-dur-fast) var(--mm-ease);
}
.mm-lang:hover,.mm-lang:focus-visible{border-color:var(--mm-accent);color:var(--mm-fg-strong)}
/* No translation of this screen exists yet. The control stays visible — hiding
   it would make the site look monolingual — but it does not pretend to lead
   anywhere, and the Bulgarian page it is sitting on stays put. */
.mm-lang--none{
  color:var(--mm-fg-muted);border-color:var(--mm-rule-soft);
  cursor:default;
}
.mm-lang--none:hover{border-color:var(--mm-rule-soft);color:var(--mm-fg-muted)}
.mm-theme svg{
  width:18px;height:18px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
/* The glyph names the destination, not the current state: on ink you see the
   sun you are about to switch to. aria-pressed carries the state itself.
   Qualified by .mm-theme so these outrank the `.mm-theme svg` block above —
   unqualified they lost to it and both glyphs printed side by side. */
.mm-theme .mm-theme__moon{display:none}
[data-theme="light"] .mm-theme .mm-theme__sun{display:none}
[data-theme="light"] .mm-theme .mm-theme__moon{display:block}
.mm-nav__list{display:flex;gap:clamp(16px,2.2vw,34px);list-style:none}
.mm-nav a{
  font-size:14px;letter-spacing:.04em;text-decoration:none;color:var(--mm-fg);
  position:relative;padding:6px 0;display:inline-block;white-space:nowrap;
  transition:color var(--mm-dur-fast) var(--mm-ease);
}
.mm-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--mm-accent-text);transform:scaleX(0);transform-origin:right;
  transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-nav a:hover,.mm-nav a:focus-visible,.mm-nav .current-menu-item > a{color:var(--mm-fg-strong)}
.mm-nav a:hover::after,.mm-nav a:focus-visible::after,.mm-nav .current-menu-item > a::after{transform:scaleX(1);transform-origin:left}
/* An ancestor of the current page reads as active too, so /avtomobili/ lights up
   "Портфолио" as well as its own item. */
.mm-nav .current-menu-ancestor > a,.mm-nav .current-menu-parent > a{color:var(--mm-fg-strong)}

/* ------------------------------------------------------------- Sub-menus --
   No JavaScript in this component. Hover opens it for a mouse, :focus-within
   opens it for a keyboard — tabbing onto the parent link reveals the children,
   and tabbing past the last child closes it again. Below the mobile breakpoint
   the whole thing becomes a plain indented list inside the burger panel, which
   is why nothing here depends on a script having run. */
.mm-nav__list li{position:relative}
.mm-nav__list .sub-menu{
  list-style:none;position:absolute;top:100%;left:-18px;z-index:5;
  min-width:236px;padding:10px 0;
  background:var(--mm-chrome-solid);backdrop-filter:blur(14px);
  border:1px solid var(--mm-rule);border-radius:var(--mm-radius);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--mm-dur-fast) var(--mm-ease),
             transform var(--mm-dur-fast) var(--mm-ease),
             visibility var(--mm-dur-fast) var(--mm-ease);
}
/* `.is-open` is set by the toggle button; hover and focus-within remain so the
   menu still works with the script disabled. */
.mm-nav__list li:hover > .sub-menu,
.mm-nav__list li:focus-within > .sub-menu,
.mm-nav__list li.is-open > .sub-menu{opacity:1;visibility:visible;transform:none}

.mm-nav__toggle{
  position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;padding:0;background:none;border:0;cursor:pointer;
  /* Not `inherit`: over the home-page hero the caret has to take the pinned
     light value the sibling link takes, and its parent <li> is not pinned. */
  color:var(--mm-fg);display:inline-flex;align-items:center;justify-content:center;
}
.mm-nav__toggle .mm-nav__caret{position:static;transform:rotate(45deg);transition:transform var(--mm-dur-fast) var(--mm-ease)}
.mm-nav__toggle[aria-expanded="true"] .mm-nav__caret{transform:rotate(225deg)}
.mm-nav__list .menu-item-has-children{position:relative}
/* The gap between the trigger and the panel would drop the hover — bridge it. */
.mm-nav__list .menu-item-has-children > a::before{
  content:"";position:absolute;left:-18px;right:-18px;top:100%;height:14px;
}
.mm-nav__list .sub-menu a{display:block;padding:10px 18px;font-size:14px;width:100%}
/* The sliding underline belongs to the top row; inside the panel a row shifts
   instead, which is the same gesture the job list already uses. */
.mm-nav__list .sub-menu a::after{display:none}
.mm-nav__list .sub-menu a{transition:color var(--mm-dur-fast) var(--mm-ease),padding-inline-start var(--mm-dur-fast) var(--mm-ease)}
.mm-nav__list .sub-menu a:hover,.mm-nav__list .sub-menu a:focus-visible{padding-inline-start:24px}
.mm-nav__list .menu-item-has-children > a{padding-inline-end:14px}
.mm-nav__list .menu-item-has-children > a::after{width:calc(100% - 14px)}
/* Chevron on the parent, drawn rather than typed so it inherits the text colour. */
.mm-nav__list .menu-item-has-children > a > .mm-nav__caret,
.mm-nav__caret{
  position:absolute;right:0;top:50%;width:6px;height:6px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.6;pointer-events:none;
}

.mm-burger{
  display:none;background:none;border:1px solid var(--mm-rule);
  color:var(--mm-fg-strong);width:44px;height:44px;cursor:pointer;
  align-items:center;justify-content:center;border-radius:var(--mm-radius);
}
.mm-burger__bar{display:block;width:18px;height:1px;background:currentColor;position:relative;transition:background var(--mm-dur-fast) var(--mm-ease)}
.mm-burger__bar::before,.mm-burger__bar::after{
  content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor;
  transition:transform var(--mm-dur-fast) var(--mm-ease);
}
.mm-burger__bar::before{top:-6px}
.mm-burger__bar::after{top:6px}
.mm-burger[aria-expanded="true"] .mm-burger__bar{background:transparent}
.mm-burger[aria-expanded="true"] .mm-burger__bar::before{transform:translateY(6px) rotate(45deg)}
.mm-burger[aria-expanded="true"] .mm-burger__bar::after{transform:translateY(-6px) rotate(-45deg)}

/* ----------------------------------------------------------- Breadcrumbs --
   Yoast has emitted the BreadcrumbList schema all along with nothing visible to
   match it. Sits under the fixed header, above the page title. */
/* The header is position:fixed, so a trail printed as the first thing inside
   <main> lands behind it — on /avtomobili/ it was drawn straight through the
   word GROUP in the logo. The bar clears the header itself, and the hero that
   follows drops the offset it would otherwise add a second time. */
.mm-crumbs-bar{padding-top:calc(var(--mm-header-h) + clamp(14px,2vw,24px))}
.mm-crumbs-bar + .mm-page-hero,
.mm-crumbs-bar + .mm-section,
.mm-crumbs-bar + article,
.mm-crumbs-bar + * > .mm-page-hero{padding-block-start:clamp(24px,3vw,40px)}
/* Whatever follows the bar, it must not add the header offset a second time:
   on /proekti/ the crumbs and the section padding stacked into 278px of empty
   screen before the first word. */
.mm-crumbs-bar + article > .mm-section:first-child,
.mm-crumbs-bar + article > .mm-page-hero:first-child{padding-block-start:0}
.mm-crumbs{padding-top:0}
.mm-crumbs__list{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  list-style:none;font-size:13px;color:var(--mm-fg-muted);
}
.mm-crumbs__item{display:flex;align-items:center;gap:10px}
.mm-crumbs__item + .mm-crumbs__item::before{
  content:"";width:12px;height:1px;background:var(--mm-rule);flex:none;
}
.mm-crumbs a{
  color:var(--mm-fg-muted);text-decoration:none;
  min-height:24px;display:inline-flex;align-items:center;
  transition:color var(--mm-dur-fast) var(--mm-ease);
}
.mm-crumbs a:hover,.mm-crumbs a:focus-visible{color:var(--mm-accent-text)}
.mm-crumbs [aria-current="page"]{color:var(--mm-fg-soft)}

/* ------------------------------------------------------------------ Hero */
.mm-hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;overflow:hidden;
  padding-bottom:clamp(48px,8vh,96px);
}
.mm-hero__media{position:absolute;inset:0;z-index:0}
.mm-hero__media picture{display:block;width:100%;height:100%}
.mm-hero__media img,.mm-hero__media video{width:100%;height:100%;object-fit:cover}

/* The video sits on top of the poster and fades in only once it is actually
   playing — so a slow start never shows a blank rectangle. */
.mm-hero__video{
  position:absolute;inset:0;
  opacity:0;transition:opacity 1.2s var(--mm-ease);
}
.mm-hero__video.is-playing{opacity:1}

/* Slow drift on the poster while it is alone on screen. It stops once the
   video takes over — two motions at once would fight each other. */
.mm-hero__poster{animation:mm-kenburns 24s var(--mm-ease) infinite alternate}
/* The video follows the <picture> in the DOM, so a sibling combinator cannot
   reach back to it — :has() on the shared parent is the only correct selector. */
.mm-hero__media:has(.mm-hero__video.is-playing) .mm-hero__poster{animation:none}
@keyframes mm-kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}
}

/* Credit line — required whenever the frame is a render rather than a photo. */
.mm-hero__credit{
  position:absolute;right:var(--mm-gutter);bottom:22px;z-index:2;margin:0;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mm-fg-muted);
}
/* Narrow screens have no room for the credit and the scroll hint on one line —
   reviewed at 375px, "ПРЕЛИСТЕТЕ" and the credit were printed over each other.
   Stack them instead of dropping either. */
@media (max-width:760px){
  /* The scroll hint is a 34px rule plus its label, so 52px of clearance left the
     two touching. Measured at 375: credit ends 2px inside the hint. */
  .mm-hero__credit{left:var(--mm-gutter);right:var(--mm-gutter);bottom:68px;text-align:left}
  .mm-hero__scroll{bottom:18px}
}
.mm-hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgb(var(--mm-scrim-rgb) / 62%) 0%,
    rgb(var(--mm-scrim-rgb) / 34%) 38%,
    rgb(var(--mm-scrim-rgb) / 92%) 100%);
}
.mm-hero__content{position:relative;z-index:2;width:100%}
.mm-hero__title{font-size:var(--mm-size-h1)}
.mm-hero__lead{font-size:var(--mm-size-lead);color:var(--mm-fg-soft);max-width:56ch;margin:26px 0 34px}
.mm-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}

@media (prefers-reduced-motion: reduce){
  .mm-hero__poster{animation:none}
}
@media (max-width:760px){
  /* The credit line and the scroll hint are stacked at the foot of the hero and
     together occupy ~80px. The fluid bottom padding resolved to ~53px on a phone,
     so the second button was printed underneath the credit. Reserve the space. */
  .mm-hero{min-height:92svh;padding-bottom:104px}
}
@media (max-width:520px){
  /* Two buttons of different widths, one of them wrapping to two lines, read as
     a mistake. Full width makes them equal and gives a thumb a real target. */
  .mm-hero__actions{display:grid;grid-template-columns:1fr;gap:12px}
  .mm-hero__actions .mm-btn{width:100%;justify-content:space-between}
}

/* ----------------------------------------------------------------- Cards */
.mm-grid{display:grid;gap:var(--mm-gap)}
.mm-grid--2{grid-template-columns:repeat(2,1fr)}
.mm-grid--3{grid-template-columns:repeat(3,1fr)}
.mm-grid--4{grid-template-columns:repeat(4,1fr)}

.mm-card{position:relative;display:block;text-decoration:none;overflow:hidden}
.mm-card__media{position:relative;overflow:hidden;background:var(--mm-surface-2);aspect-ratio:1/1}
.mm-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mm-ease)}
/* News only. Press imagery arrives as a wide banner and a square crop ate more
   than half of it — see the mm-news size in inc/setup.php. Never mixed into the
   same grid as the square cards. */
.mm-card__media--wide{aspect-ratio:16/9}
/* No featured image yet — keep the card's geometry so the grid stays even. */
.mm-card__media--empty{display:grid;place-items:center}
.mm-card__monogram{
  font-family:var(--mm-font-display);font-weight:300;
  font-size:clamp(34px,4vw,54px);letter-spacing:.06em;
  /* Bronze at .26 disappears on paper the way it reads on ink — the alpha is a
     token so the mark keeps the same presence in both themes. */
  color:var(--mm-accent);opacity:var(--mm-monogram-alpha);
  transition:opacity 1s var(--mm-ease);
}
.mm-card:hover .mm-card__monogram{opacity:calc(var(--mm-monogram-alpha) + .12)}
/* Press — a third-party cover shown whole and credited, never cropped or
   passed off as our own photography. */
.mm-press__figure{margin:0;max-width:1100px}
.mm-press__figure img{width:100%;height:auto;display:block;border:1px solid var(--mm-rule)}
.mm-press__caption{
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  margin-top:14px;font-size:13px;color:var(--mm-fg-muted);
}
.mm-press__source{letter-spacing:.1em;text-transform:uppercase;color:var(--mm-accent-text)}
.mm-press__cta{margin:clamp(28px,4vw,44px) 0 0}
.mm-card:hover .mm-card__media img{transform:scale(1.06)}
.mm-card__media::after{
  content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color var(--mm-dur) var(--mm-ease);pointer-events:none;
}
.mm-card:hover .mm-card__media::after{border-color:var(--mm-accent)}
.mm-card__body{padding:18px 2px 0}
.mm-card__title{font-size:19px;margin:0 0 6px}
.mm-card__meta{margin:0;font-size:14px;color:var(--mm-fg-muted)}
.mm-card__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgb(var(--mm-scrim-rgb) / 82%);backdrop-filter:blur(6px);
  border:1px solid rgb(var(--mm-scrim-accent-rgb) / 50%);color:var(--mm-accent-text);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;
}

/* --------------------------------------------------------------- Numbers */
.mm-stats{border-block:1px solid var(--mm-rule)}
.mm-stats__grid{display:grid;grid-template-columns:repeat(var(--mm-stat-cols,5),1fr)}
/* The horizontal inset was clamp(12px,2vw,28px) — 56px of a 243px cell spent on
   air. Capped at 22px it gives every cell 12px more measure at every width from
   1280 up, which is most of what puts "15,6 млн. €" back on one line and
   "реализирани и текущи" back on two. The vertical inset is untouched.
   container-type is the floor guard for the value below; it is inert otherwise. */
.mm-stat{
  padding:clamp(34px,4.5vw,56px) clamp(12px,1.6vw,22px);
  border-right:1px solid var(--mm-rule-soft);min-width:0;
  container-type:inline-size;
}
.mm-stat:last-child{border-right:0}
/*
 * The grid sits inside the ordinary .mm-wrap gutter, but the first and last
 * cells drop their own inset so the leftmost figure lines up with the headings
 * of every other section. Before this it sat ~40px further left and read as a
 * misaligned band.
 */
.mm-stat:first-child{padding-left:0}
.mm-stat:last-child{padding-right:0}
/* 21.08.2026 — the client drew one arrow at each end of the band and asked for
   equal air on both sides. The wrap already is centred (measured on his own
   screenshot: 353px left, 342px right of a 1776px band), so the gap he saw was
   inside the last cell: the first figure starts flush at the wrap's left edge
   while the last label stopped 122px short of its right edge at 1920. Nothing
   can stretch a short label, so the last cell is set from the other end — its
   value and label now finish where the first cell's begin, mirrored. Guarded to
   the five-across grid: at 1100px and below the band is two columns and a
   right-aligned cell would land in the middle of the row.
   Safe with the counter: the value is tabular-nums and the only right-aligned
   figure counts 0→4, so the digit count never changes mid-animation. */
@media (min-width:1101px){
  .mm-stat:last-child{text-align:right}
}
/* THE WHOLE value is one line now, unit included. Until 13.08.2026 only the
   number and a symbol prefix were nowrap and the word unit was deliberately let
   fall to a second line, so that "15,6 млн. €" could not spill into the next
   column. The client asked for the opposite: one line on all five cells, so the
   labels start at one height and the band reads as a row rather than a ladder.
   Letting it overflow instead is not an option — that is a horizontal scrollbar.
   So the width had to be found, not borrowed: 22px cell inset (above) plus a
   unit set below the number's size (next rule). Measured worst case, "15,6 млн.
   €" at 1440–1920: 238.5px needed against a 187.2px cell → 175.8px against
   199.2px. The 21cqi term is the floor guard for content we do not have yet: at
   every width measured it is above the 38px cap and never binds, so all five
   values keep ONE size — a value that shrinks alone is the ladder again. It
   only engages if a future figure is wider than the cell can hold. */
.mm-stat__value{
  display:block;font-family:var(--mm-font-display);
  font-size:clamp(24px,min(2.7vw,21cqi),38px);line-height:1.05;color:var(--mm-fg-strong);
  letter-spacing:-.03em;white-space:nowrap;
}
/* A qualifier is not the figure. "млн. €", "%", "№", "над" set below the number
   is ordinary typography and it is what buys the line: the worst value loses
   26% of its width. mm_stat() still decides whether a space belongs there.
   Both are <em>, and only the unit had ever been set back upright — so "над",
   "№" and "+" have been rendering italic since the band was built. At 38px that
   passed; at .58em beside a roman bronze "млн. €" the two qualifiers read as two
   different voices, so the reset now covers both. An italic "№" was never the
   intention. */
.mm-stat__unit,.mm-stat__prefix{font-size:.58em;font-style:normal}
/* Bronze until 21.08.2026, when the client moved the noun up onto the value
   line — „30 години", „29 проекта", „4 награди". One accented unit among five
   plain figures was a highlight; five accented nouns is a second colour running
   the width of the band. The qualifier keeps its smaller size, which is what
   subordinates it, and gives the colour back. */
.mm-stat__unit{color:inherit}
/* 12px/.13em put "в четирите направления" at 203.7px into a 187.2px cell — the
   third line the client saw. 11px/.09em is 177px, inside the 186.4px cell at
   1280 with 9.4px to spare. The squeeze belongs to the five-across grid only;
   below 1100px the band is two columns, the measure trebles and the label goes
   back to its designed size (see the 1100px breakpoint). */
/* One line since 21.08.2026 — the <br> is gone from every label and the noun it
   used to carry now sits beside the figure. Every label was measured against
   its own cell from 1101 to 1920: the widest, „ЗАВЪРШЕНИ И ТЕКУЩИ" at 150.8px,
   clears the tightest cell (162.9px at 1101) by 12px. No nowrap: if a future
   figure needs a longer line it should wrap, not overflow. */
.mm-stat__label{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mm-fg-muted);margin-top:12px;line-height:1.45}

/* ---------------------------------------------------- mobile.bg feed grid */
.mm-feed__grid{
  display:grid;gap:var(--mm-gap);list-style:none;
  grid-template-columns:repeat(var(--mm-feed-cols,3),1fr);
}
.mm-feed__card{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--mm-surface-2);border:1px solid var(--mm-rule);transition:transform var(--mm-dur) var(--mm-ease),border-color var(--mm-dur) var(--mm-ease)}
.mm-feed__card:hover{transform:translateY(-6px);border-color:var(--mm-accent)}
.mm-feed__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mm-surface)}
.mm-feed__img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--mm-ease)}
.mm-feed__card:hover .mm-feed__img{transform:scale(1.05)}
.mm-feed__badge{
  position:absolute;top:12px;left:12px;background:rgb(var(--mm-scrim-rgb) / 78%);
  color:var(--mm-fg);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;
}
.mm-feed__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.mm-feed__title{font-size:18px;margin:0}
.mm-feed__specs{font-size:13px;color:var(--mm-fg-muted);margin:0}
.mm-feed__foot{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--mm-rule);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.mm-feed__price{font-family:var(--mm-font-display);font-size:19px;color:var(--mm-accent-text);letter-spacing:-.02em}
.mm-feed__cta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mm-fg-muted);white-space:nowrap}
.mm-feed__card:hover .mm-feed__cta{color:var(--mm-fg-strong)}
.mm-feed__all{text-align:center;margin-top:var(--mm-block-y)}

/* --------------------------------------------------------- Scroll hint */
.mm-hero__scroll{
  position:absolute;left:var(--mm-gutter);bottom:22px;z-index:2;
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mm-fg-muted);
}
.mm-hero__scroll i{
  display:block;width:1px;height:34px;
  background:linear-gradient(180deg,var(--mm-accent),transparent);
  animation:mm-drop 2.4s var(--mm-ease) infinite;
}
@keyframes mm-drop{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ------------------------------------------------------------ Manifesto */
.mm-manifesto__inner{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,88px);align-items:start}
.mm-manifesto h2{font-size:var(--mm-size-h2)}
.mm-manifesto__lead{font-size:var(--mm-size-lead);color:var(--mm-fg)}
.mm-manifesto__body p{color:var(--mm-fg-soft);margin-bottom:1.2em}
/* The photograph under the heading. 16:9 against a 3:2 file, so ~120px comes off
   the top and bottom of the frame — trialled 11.08.2026 to close the gap between
   the two column bottoms. The ratio is declared so the row does not reflow when a
   lazy image lands. */
.mm-manifesto__figure{margin:clamp(26px,3vw,40px) 0 0}
.mm-manifesto__figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.mm-manifesto__caption{margin-top:12px;font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--mm-fg-muted)}
/* The link stays directly under its paragraph. Dropping it to the foot of the
   column to line up with the photo's credit was tried on 11.08.2026 and rejected
   — the gap it opened between the last paragraph and the link read worse than the
   uneven column bottoms it was fixing. */
/* Third attempt at the same imbalance, 13.08.2026, and the first that does not
   touch the text block's own shape: the column is centred against the taller one
   instead of being pinned to its top. The two columns cannot be made equal —
   413px of text against 509px of heading-plus-photograph — so the 96px overhang
   is split 48/48 rather than left hanging entirely below. Measured at 1920: the
   body moves 99.6→147.5, its foot 512.9→560.9, against a left column that runs
   99.6→608.8 throughout.
   Guarded, because at 1100px and below the grid is a single column and centring
   a full-width row against itself would be a no-op at best and, if the row ever
   gained a min-height, a stray offset at worst. */
@media (min-width:1101px){
  .mm-manifesto__body{align-self:center}
}

/* ------------------------------------------------------- The chain (01–04) */
.mm-chain{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--mm-rule)}
.mm-chain__link{
  display:flex;flex-direction:column;gap:10px;height:100%;
  padding:clamp(24px,2.6vw,36px);background:var(--mm-bg-alt);text-decoration:none;
  border-top:2px solid transparent;transition:border-color var(--mm-dur) var(--mm-ease),background var(--mm-dur) var(--mm-ease);
}
.mm-chain__link:hover,.mm-chain__link:focus-visible{border-top-color:var(--mm-accent);background:var(--mm-surface-2)}
.mm-chain__num{font-family:var(--mm-font-display);font-size:13px;color:var(--mm-accent-text);letter-spacing:.1em}
.mm-chain__brand{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-chain__title{font-family:var(--mm-font-display);font-size:20px;color:var(--mm-fg-strong);letter-spacing:var(--mm-track-tight);line-height:1.2}
.mm-chain__text{font-size:15px;color:var(--mm-fg-soft);line-height:1.55;flex:1}
.mm-chain .mm-more{margin-top:8px}

/* ---------------------------------------------------------- Brand cards */
.mm-brands{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--mm-rule)}
.mm-brand{
  position:relative;isolation:isolate;overflow:hidden;background:var(--mm-bg);
  min-height:clamp(300px,36vw,440px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  padding:clamp(24px,3vw,44px);text-decoration:none;
}
.mm-brand__bg{position:absolute;inset:0;z-index:-2;display:block}
.mm-brand__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4);transition:transform 1.1s var(--mm-ease),filter 1.1s var(--mm-ease)}
.mm-brand::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Three stops, not two: the copy sits in the middle of the card, and a plain
     30%→94% ramp left body text lying on bright bodywork and white shirts. */
  background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 26%) 0%,rgb(var(--mm-scrim-rgb) / 66%) 46%,rgb(var(--mm-scrim-rgb) / 95%) 100%);
  transition:background var(--mm-dur-slow) var(--mm-ease);
}
.mm-brand:hover .mm-brand__bg img,.mm-brand:focus-visible .mm-brand__bg img{transform:scale(1.06);filter:grayscale(0)}
.mm-brand:hover::after,.mm-brand:focus-visible::after{background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 14%) 0%,rgb(var(--mm-scrim-rgb) / 58%) 46%,rgb(var(--mm-scrim-rgb) / 92%) 100%)}
.mm-brand__kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mm-accent-text)}
.mm-brand__title{font-size:clamp(21px,2.3vw,30px);margin:0}
.mm-brand__text{color:var(--mm-fg-soft);font-size:16px;max-width:44ch;margin-bottom:8px}
/* Typographic panel — used where the group owns no honest photograph of the
   brand. Same card geometry as the photo variant; only the media layer differs,
   so the grid still reads as one set. The figure is that brand's own verified
   number, set large and quiet in bronze. */
.mm-brand--panel{background:var(--mm-media-well)}
.mm-brand__panel{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-end;
  padding:clamp(24px,3vw,44px);text-align:right;
}
.mm-brand__figure{
  font-family:var(--mm-font-display);font-weight:300;line-height:.86;
  font-size:clamp(84px,12vw,180px);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--mm-accent);opacity:.32;
  transition:opacity 1.1s var(--mm-ease),transform 1.1s var(--mm-ease);
}
.mm-brand__legend{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mm-accent);opacity:.6;margin-top:10px;
}
/* The panel needs less scrim than a photo — the figure has to stay readable. */
.mm-brand--panel::after{background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 0%),rgb(var(--mm-scrim-rgb) / 74%))}
.mm-brand--panel:hover::after,.mm-brand--panel:focus-visible::after{background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 0%),rgb(var(--mm-scrim-rgb) / 66%))}
.mm-brand--panel:hover .mm-brand__figure,.mm-brand--panel:focus-visible .mm-brand__figure{opacity:.44;transform:translateY(-4px)}
/* Below the two-column breakpoint the card is much shorter, so the copy lands on
   the bright middle of the photo instead of the dark bottom. Reviewed at 375px:
   body text was sitting on headlights and a white shirt. Deepen the scrim. */
@media (max-width:760px){
  .mm-brand::after{background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 55%),rgb(var(--mm-scrim-rgb) / 96%))}
  .mm-brand:hover::after,.mm-brand:focus-visible::after{background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 48%),rgb(var(--mm-scrim-rgb) / 94%))}
  .mm-brand__figure{font-size:clamp(76px,22vw,120px)}
}

/* ------------------------------------------------------- Insurance mix */
.mm-mix{display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(32px,4vw,72px);align-items:start}
.mm-mix__list{list-style:none;display:grid;gap:4px}
.mm-mix__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,1.35fr) auto;
  gap:clamp(12px,2vw,26px);align-items:center;
  padding:14px 0;border-bottom:1px solid var(--mm-rule-soft);
}
.mm-mix__label{font-size:16px;color:var(--mm-fg)}
.mm-mix__bar{display:block;height:12px;background:var(--mm-rule-soft);position:relative;overflow:hidden}
.mm-mix__fill{
  position:absolute;inset:0 auto 0 0;width:var(--mm-mix-w);
  background:var(--mm-accent);transform-origin:left;
}
/* The bar grows alongside the counter beside it, over the same 1600 ms and the
   same ease-out — it is one gesture read twice, not a new class of effect.
   scaleX only: the width stays authored, nothing reflows, and CLS stays at the
   measured 0.

   The zero state lives inside no-preference on purpose. Written unconditionally
   it would leave every bar at zero length for a visitor who has asked for less
   motion, which is not "no animation", it is a broken chart. */
@media (prefers-reduced-motion: no-preference){
  html.mm-js .mm-mix__chart .mm-mix__fill{transform:scaleX(0)}
  html.mm-js .mm-mix__chart.is-in .mm-mix__fill{
    animation:mm-bar-grow 1600ms var(--mm-ease) both;
    animation-delay:calc(var(--mm-i,0) * 60ms);
  }
  @keyframes mm-bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.mm-mix__value{text-align:right;white-space:nowrap}
.mm-mix__total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin:0;padding:12px 0;font-size:15px;color:var(--mm-fg-muted);
  border-bottom:1px solid var(--mm-rule-soft);
}
.mm-mix__total strong{font-family:var(--mm-font-display);font-size:16px;color:var(--mm-fg);font-weight:400;letter-spacing:-.02em}
.mm-mix__total--sub{border-bottom:1px solid var(--mm-rule)}
.mm-mix__total--grand{border-bottom:0;padding-top:16px;color:var(--mm-fg)}
.mm-mix__total--grand strong{font-size:24px;color:var(--mm-fg-strong)}
.mm-mix__value strong{display:block;font-family:var(--mm-font-display);font-size:18px;color:var(--mm-fg-strong);letter-spacing:-.02em}
.mm-mix__value em{font-style:normal;font-size:13px;color:var(--mm-fg-muted)}
.mm-mix__note{border-left:2px solid var(--mm-accent);padding-left:clamp(20px,2vw,30px)}
.mm-mix__note p{color:var(--mm-fg-soft);font-size:16px}
/* `.mm-mix__note p` is one point more specific than a bare class, so the 73%
   figure and the source line were both being reset to 16px body size — the
   headline number of the section had never actually rendered large. */
.mm-mix__note .mm-mix__big{font-family:var(--mm-font-display);font-size:clamp(52px,6vw,86px);line-height:1;color:var(--mm-fg-strong);letter-spacing:-.04em;margin:0 0 18px}
.mm-mix__note .mm-mix__source{font-size:13px;color:var(--mm-fg-muted);margin-top:18px;line-height:1.55}

/* --------------------------------------------------------------- Awards */
.mm-awards{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--mm-rule)}
.mm-award{
  position:relative;overflow:hidden;background:var(--mm-bg);
  padding:clamp(26px,3vw,44px);text-decoration:none;display:block;
}
.mm-award::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--mm-accent);
  transition:height var(--mm-dur-slow) var(--mm-ease);
}
.mm-award:hover::before,.mm-award:focus-visible::before{height:100%}
.mm-award__year{display:block;font-family:var(--mm-font-display);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--mm-accent-text);letter-spacing:-.03em}
.mm-award__building{font-family:var(--mm-font-text);font-size:17px;font-weight:600;color:var(--mm-fg-strong);letter-spacing:0;margin:18px 0 8px}
.mm-award__meta{font-size:14px;color:var(--mm-fg-muted);line-height:1.5}
/* On its own page the award is the subject, not a teaser: the year carries more
   weight and every cell ends on the same line whatever the building is called. */
.mm-awards--archive .mm-award{display:flex;flex-direction:column;padding-block:clamp(34px,4vw,56px)}
.mm-awards--archive .mm-award__year{font-size:clamp(38px,4.4vw,62px)}
.mm-awards--archive .mm-award__building{font-size:19px;margin-top:22px}
.mm-awards--archive .mm-award__meta{margin-bottom:26px}
.mm-awards--archive .mm-more{margin-top:auto}

/* --------------------------------------------------------- News archive */
.mm-news{list-style:none;display:grid;gap:2px;background:var(--mm-rule)}
.mm-news__link{
  /* Widened with the switch to 16:9: at the old 26% the thumbnail was 168px
     tall against a 267px text block and read as an afterthought. 32% puts it
     back to roughly the same share of the row height the 4:3 crop had. */
  display:grid;grid-template-columns:clamp(220px,32%,400px) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center;
  background:var(--mm-bg);padding:clamp(22px,2.6vw,34px);text-decoration:none;
  transition:background var(--mm-dur) var(--mm-ease);
}
.mm-news__link:hover,.mm-news__link:focus-visible{background:var(--mm-surface-2)}
/* 16:9, matching the mm-news crop the row asks for. A 4:3 box re-cropped an
   already-cropped image, which is how the Forbes cover lost its masthead. */
.mm-news__media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--mm-surface)}
.mm-news__media img{width:100%;height:100%;object-fit:cover}
.mm-news__media--empty{display:grid;place-items:center}
.mm-news__body{display:block;min-width:0}
.mm-news__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--mm-fg-muted);letter-spacing:.06em;text-transform:uppercase}
.mm-news__meta em{font-style:normal;color:var(--mm-accent-text)}
.mm-news__title{font-family:var(--mm-font-display);font-size:clamp(20px,2.1vw,28px);line-height:1.18;letter-spacing:-.025em;color:var(--mm-fg-strong);margin:12px 0 10px}
.mm-news__excerpt{display:block;color:var(--mm-fg-soft);font-size:16px;line-height:1.6;max-width:64ch}
.mm-news .mm-more{margin-top:16px}

/* ------------------------------------------------------------- MM World */
.mm-world__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.mm-world__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* Building plaque — stands in for the photograph the client has not supplied.
   Reads as a deliberate object, not as a missing image. */
.mm-plaque{
  aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:clamp(28px,4vw,56px);text-align:center;
  background:var(--mm-surface-2);border:1px solid var(--mm-accent);
}
.mm-plaque__eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mm-accent-text);margin:0;
}
.mm-plaque__year{
  font-family:var(--mm-font-display);font-weight:300;line-height:1;
  font-size:clamp(56px,8vw,104px);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--mm-accent-text);margin:.12em 0 0;
}
.mm-plaque__rule{border:0;border-top:1px solid var(--mm-accent);width:56px;margin:clamp(20px,3vw,32px) auto}
.mm-plaque__name{
  font-family:var(--mm-font-display);font-weight:300;
  font-size:clamp(24px,3vw,38px);letter-spacing:-.02em;margin:0;color:var(--mm-fg);
}
.mm-plaque__addr{font-size:15px;line-height:1.6;color:var(--mm-fg-muted);margin:.6em 0 0}
.mm-world__body h2{font-size:var(--mm-size-h2);margin-bottom:20px}
.mm-world__body p{color:var(--mm-fg-soft)}
.mm-world__facts{list-style:none;display:grid;gap:12px;margin:26px 0}
.mm-world__facts li{
  position:relative;padding-left:22px;font-size:16px;color:var(--mm-fg);
}
.mm-world__facts li::before{
  content:"";position:absolute;left:0;top:.65em;width:10px;height:1px;background:var(--mm-accent);
}

/* ------------------------------------------------------------- Timeline */
.mm-timeline{list-style:none;display:grid;gap:0;border-top:1px solid var(--mm-rule)}
.mm-timeline__item{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(20px,4vw,56px);align-items:baseline;
  padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--mm-rule-soft);
  transition:background var(--mm-dur) var(--mm-ease);
}
.mm-timeline__item:hover{background:var(--mm-hover-wash)}
.mm-timeline__year{
  font-family:var(--mm-font-display);font-size:clamp(24px,2.6vw,34px);
  color:var(--mm-accent-text);letter-spacing:-.03em;line-height:1;
}
.mm-timeline__title{font-family:var(--mm-font-text);font-size:19px;font-weight:600;letter-spacing:0;color:var(--mm-fg-strong);margin-bottom:8px}
/* text-wrap:balance answers the client's note of 21.08.2026 — „текстовете стоят
   къдрави, да се пренесат думи и да се оеднаквят като подредба". Every entry is
   two lines, and the break fell wherever the measure ran out, so one row ended
   with six words on line two and the next with two. Balance evens the two lines
   of each paragraph against each other; it is capped at four lines in Chrome,
   which no entry here reaches, and degrades to ordinary wrapping where it is
   unsupported. The 72ch measure is unchanged: narrowing it to 62ch was tried the
   same day and pushed the longest entry (2016) from two balanced lines to three,
   which is a worse result than the raggedness it was meant to help. Measured at
   1440 — natural wrapping gives 708/360, 656/276, 667/346; balance gives 524/544,
   447/486, 488/525. */
.mm-timeline__body p{color:var(--mm-fg-soft);font-size:16px;max-width:72ch;text-wrap:balance}

/* ------------------------------------------------------------- Founders */
.mm-founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.mm-founder{margin:0;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center}
.mm-founder__photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mm-surface-2)}
.mm-founder__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.mm-founder__photo::after{content:"";position:absolute;inset:12px;border:1px solid rgb(var(--mm-scrim-accent-rgb) / 45%);pointer-events:none}
.mm-founder__quote{
  font-family:var(--mm-font-display);font-weight:300;
  font-size:clamp(19px,2vw,26px);line-height:1.34;color:var(--mm-fg-strong);
  letter-spacing:var(--mm-track-tight);margin:0 0 20px;
}
.mm-founder__name{font-size:17px;font-weight:600;color:var(--mm-fg-strong);margin:0 0 4px}
.mm-founder__role{font-size:14px;color:var(--mm-fg-muted);margin:0;line-height:1.5}
.mm-founder__lead{font-size:var(--mm-size-lead);color:var(--mm-fg)}
.mm-founder__aside p{color:var(--mm-fg-soft);margin-bottom:1.1em}

/* ------------------------------------------------------------------ CTA */
.mm-cta{position:relative;isolation:isolate;text-align:center;padding-block:clamp(80px,11vw,170px)}
.mm-cta__bg{position:absolute;inset:0;z-index:-2;display:block}
.mm-cta__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.mm-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--mm-cta-scrim)}
.mm-cta h2{font-size:clamp(28px,4.4vw,58px);line-height:1.08;margin-bottom:20px}
.mm-cta__text{color:var(--mm-fg-soft);max-width:52ch;margin:0 auto 36px}

.mm-section__action{margin-top:var(--mm-block-y)}

/* ------------------------------------------------------------ Page hero */
.mm-page-hero{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(420px,58vh,660px);
  padding-block:calc(var(--mm-header-h) + 40px) clamp(48px,6vw,80px);
  overflow:hidden;
}
.mm-page-hero__bg{position:absolute;inset:0;z-index:-2;display:block}
.mm-page-hero__bg img{width:100%;height:100%;object-fit:cover}
.mm-page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(var(--mm-scrim-rgb) / 72%) 0%,rgb(var(--mm-scrim-rgb) / 52%) 42%,rgb(var(--mm-scrim-rgb) / 94%) 100%);
}
/* Type-only hero: no photograph behind it, so the scrim would only darken the
   page background against itself. A bronze hairline gives the block an edge. */
.mm-page-hero--plain{
  min-height:clamp(320px,42vh,480px);
  background:var(--mm-bg);border-bottom:1px solid var(--mm-rule);
}
.mm-page-hero--plain::after{content:none}
.mm-page-hero__content{position:relative;z-index:1;width:100%}
.mm-page-hero h1{font-size:clamp(30px,4.4vw,60px)}
.mm-page-hero__lead{font-size:var(--mm-size-lead);color:var(--mm-fg-soft);max-width:62ch;margin:24px 0 0}

/* -------------------------------------------------------------- Services */
.mm-services{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--mm-rule)}
.mm-service{background:var(--mm-bg);padding:clamp(26px,3vw,42px);display:grid;gap:10px;align-content:start}
.mm-service__num{font-family:var(--mm-font-display);font-size:13px;color:var(--mm-accent-text);letter-spacing:.1em}
.mm-service__title{font-family:var(--mm-font-text);font-size:19px;font-weight:600;letter-spacing:0;color:var(--mm-fg-strong)}
.mm-service p{color:var(--mm-fg-soft);font-size:16px;margin:0}
/* 26.08.2026 — the four value cards on /za-nas/ are set in caps, as the client
   wrote them in the PDF of 21.08. The earlier reading ("the whole document is in
   caps, so it is not a spec") does not survive the page it came from: note 10
   writes its own section heading „Четири принципа. Един стандарт." in sentence
   case, directly above four titles in caps. He distinguished the two levels.
   Scoped to this grid on purpose — the same component carries the company names
   in „Контакти" and the service tiles on the brand pages, which he did not
   comment on and which would read as shouting. The text stays sentence case in
   PHP so screen readers do not spell it out letter by letter.
   Measured before applying (fontTools, Golos Text wght 600, 19px, .06em):
   the longest word „ДЪЛГОСРОЧНОСТ" is 189.5px against a 289.5px cell at the
   narrowest two-column width (761px). No word overflows at any width. */
.mm-services--caps .mm-service__title{text-transform:uppercase;letter-spacing:.06em}
/* Neither tile had any hover at all, which is what makes the two brand pages read
   as inert. The treatment is the one .mm-chain__link already uses — the tile lifts
   to the card surface — and nothing else: no shadow, no scale, no translate.
   Translate in particular is wrong here and not a matter of taste: these tiles sit
   in a grid whose 2px gaps ARE the hairlines, so moving one opens a hole in the
   rule beside it. Colour only, so nothing reflows and CLS stays 0. */
.mm-service,.mm-step{transition:background .6s var(--mm-ease)}
.mm-service:hover,.mm-step:hover{background:var(--mm-surface-2)}

/* ----------------------------------------------------------------- Steps */
.mm-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--mm-rule)}
.mm-step{background:var(--mm-bg-alt);padding:clamp(24px,2.6vw,36px);display:grid;gap:8px;align-content:start;border-top:2px solid var(--mm-accent)}
.mm-step__title{font-family:var(--mm-font-text);font-size:17px;font-weight:600;letter-spacing:0;color:var(--mm-fg-strong)}
.mm-step p{color:var(--mm-fg-soft);font-size:15px;margin:0}

/* --------------------------------------------------------- Brand video ---
   The vertical project film. Held to 460px so a 9:11 frame cannot take over the
   page, and centred rather than stretched: it is one building's film, not a hero.
   The frame reserves its own ratio, so the poster arriving late moves nothing. */
.mm-brandvideo{margin:0;display:flex;justify-content:center}
.mm-brandvideo__frame{
  position:relative;width:100%;max-width:460px;aspect-ratio:1080/1320;
  overflow:hidden;background:var(--mm-media-well);border:1px solid var(--mm-rule);
}
.mm-brandvideo__frame img,.mm-brandvideo__frame video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Same contract as the home-page hero: the video fades in only once it actually
   has frames, so a slow start never shows a blank rectangle over the poster. */
.mm-brandvideo__video{opacity:0;transition:opacity 1.2s var(--mm-ease)}
.mm-brandvideo__video.is-playing{opacity:1}

/* ------------------------------------------------------------------- FAQ */
.mm-faq{border-top:1px solid var(--mm-rule);max-width:88ch}
.mm-faq__item{border-bottom:1px solid var(--mm-rule-soft)}
.mm-faq__q{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:18px;color:var(--mm-fg-strong);
  transition:color var(--mm-dur-fast) var(--mm-ease);
}
.mm-faq__q::-webkit-details-marker{display:none}
.mm-faq__q::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:1px;
  background:var(--mm-accent-text);transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-faq__q::before{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:1px;
  background:var(--mm-accent-text);transform:rotate(90deg);
  transition:transform var(--mm-dur) var(--mm-ease),opacity var(--mm-dur) var(--mm-ease);
}
.mm-faq__item[open] .mm-faq__q::before{transform:rotate(0);opacity:0}
.mm-faq__q:hover{color:var(--mm-accent-text)}
.mm-faq__a{padding:0 44px 24px 0;color:var(--mm-fg-soft);font-size:16px;max-width:76ch}
.mm-faq__a p{margin:0}

/* ---------------------------------------------------------------- People */
.mm-people{display:grid;gap:2px;background:var(--mm-rule)}
.mm-person{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  background:var(--mm-bg);padding:clamp(24px,3vw,40px);
}
.mm-person__photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--mm-surface-2)}
.mm-person__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.mm-person__photo::after{content:"";position:absolute;inset:10px;border:1px solid rgb(var(--mm-scrim-accent-rgb) / 40%);pointer-events:none}
.mm-person__photo.is-empty{display:grid;place-items:center;background:var(--mm-surface-2)}
.mm-person__initials{font-family:var(--mm-font-display);font-size:38px;color:var(--mm-accent-text);letter-spacing:-.02em}
.mm-person__name{font-size:22px;margin:0 0 6px}
.mm-person__role{font-size:16px;color:var(--mm-fg-strong);margin:0 0 2px}
.mm-person__unit{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-accent-text);margin:0 0 14px}
.mm-person__bio{color:var(--mm-fg-soft);font-size:16px;margin:0;max-width:72ch}

/* ------------------------------------------------------------------ Jobs */
.mm-jobs{list-style:none;border-top:1px solid var(--mm-rule)}
.mm-job{border-bottom:1px solid var(--mm-rule-soft)}
.mm-job__link{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) auto;
  gap:clamp(14px,3vw,36px);align-items:center;
  padding:clamp(20px,2.4vw,30px) 0;text-decoration:none;
  transition:padding-inline-start var(--mm-dur) var(--mm-ease);
}
.mm-job__link:hover,.mm-job__link:focus-visible{padding-inline-start:14px}
.mm-job__title{font-family:var(--mm-font-display);font-size:clamp(18px,2vw,24px);color:var(--mm-fg-strong);letter-spacing:var(--mm-track-tight)}
.mm-job__meta{font-size:14px;color:var(--mm-fg-muted)}
.mm-jobs-empty{border:1px solid var(--mm-rule);padding:clamp(26px,3vw,44px);color:var(--mm-fg-soft)}
.mm-jobs-empty p{margin-bottom:.8em}
/* The vacancy's own page (single-mm_job.php). Same label-over-value pattern as
   the car specification, so a job reads like the rest of the site's data rows. */
.mm-job__facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);
  margin:clamp(20px,2.4vw,30px) 0 var(--mm-block-y);
  padding-block:18px;border-block:1px solid var(--mm-rule);
}
.mm-job__facts li{display:grid;gap:4px}
.mm-job__facts span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-job__facts strong{font-weight:500;color:var(--mm-fg-strong)}

/* -------------------------------------------------------------- Contacts */
.mm-contact{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--mm-rule)}
.mm-contact__card{background:var(--mm-bg-alt);padding:clamp(26px,3vw,44px)}
.mm-contact__card--accent{border-top:2px solid var(--mm-accent)}
.mm-contact__address{font-style:normal;color:var(--mm-fg-strong);font-size:18px;line-height:1.6;margin:0 0 22px}
.mm-contact__lead{color:var(--mm-fg-soft);font-size:16px;margin:0 0 22px}
.mm-contact__list{list-style:none;display:grid;gap:2px}
.mm-contact__list li{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--mm-rule-soft)}
.mm-contact__list li:last-child{border-bottom:0}
.mm-contact__list span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-fg-muted);min-width:120px}
.mm-contact__list a{color:var(--mm-fg-strong);text-decoration:none;font-size:17px;min-height:36px;display:inline-flex;align-items:center}
.mm-contact__list a:hover{color:var(--mm-accent-text)}

.mm-map__link{
  display:grid;gap:10px;padding:clamp(28px,4vw,56px);text-decoration:none;
  border:1px solid var(--mm-rule);background:var(--mm-surface-2);
  transition:border-color var(--mm-dur) var(--mm-ease);
}
.mm-map__link:hover{border-color:var(--mm-accent)}
.mm-map__label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-accent-text)}
.mm-map__addr{font-family:var(--mm-font-display);font-size:clamp(18px,2vw,24px);color:var(--mm-fg-strong);letter-spacing:var(--mm-track-tight);line-height:1.35}

/* --------------------------------------------------------------- Filters */
.mm-filters{display:grid;gap:18px;margin-bottom:var(--mm-block-y);padding-bottom:26px;border-bottom:1px solid var(--mm-rule)}
.mm-filter{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.mm-filter__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-fg-muted);min-width:64px}
.mm-filter__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.mm-filter__pill{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;
  padding:8px 16px;border:1px solid var(--mm-rule);
  font-size:14px;text-decoration:none;color:var(--mm-fg-soft);
  transition:border-color var(--mm-dur-fast) var(--mm-ease),color var(--mm-dur-fast) var(--mm-ease);
}
.mm-filter__pill:hover,.mm-filter__pill:focus-visible{border-color:var(--mm-accent);color:var(--mm-fg-strong)}
.mm-filter__pill.is-active{border-color:var(--mm-accent);background:var(--mm-accent);color:var(--mm-on-accent)}
/* Was `opacity:.7` on the pill's own colour. On paper that resolved to
   rgb(130 126 118) — 3.84:1 for 12px type, short of AA. A muted token instead
   of a transparency: 5.38:1 on paper, 6.67:1 on ink. And on the filled pill the
   count goes to full white, because white at 70% over bronze is 3.59:1. */
.mm-filter__count{font-size:12px;color:var(--mm-fg-muted);font-variant-numeric:tabular-nums}
.mm-filter__pill.is-active .mm-filter__count{color:var(--mm-on-accent)}
.mm-result-count{font-size:14px;color:var(--mm-fg-muted);margin-bottom:22px}
.mm-empty{color:var(--mm-fg-soft)}

/* ----------------------------------------------------------- Fact tables */
.mm-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,4vw,72px);margin:0}
.mm-facts__row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--mm-rule-soft)}
.mm-facts dt{font-size:14px;letter-spacing:.06em;color:var(--mm-fg-muted);margin:0}
.mm-facts dd{margin:0;font-size:17px;color:var(--mm-fg-strong);text-align:right}

/* ------------------------------------------------------------ Amenities */
.mm-amenities{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--mm-rule)}
.mm-amenities li{background:var(--mm-bg-alt);padding:20px 24px;display:grid;gap:4px}
.mm-amenities strong{font-weight:500;color:var(--mm-fg-strong);font-size:16px}
.mm-amenities span{font-size:14px;color:var(--mm-fg-muted)}

/* -------------------------------------------------------------- Gallery */
.mm-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mm-gap)}
.mm-gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* --------------------------------------------------------- Award banner */
.mm-award-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,34px);
  padding:clamp(20px,2.4vw,30px) clamp(22px,3vw,38px);
  border:1px solid var(--mm-accent);background:var(--mm-accent-wash);
  text-decoration:none;transition:background var(--mm-dur) var(--mm-ease);
}
.mm-award-banner:hover{background:var(--mm-accent-wash-2)}
.mm-award-banner__year{font-family:var(--mm-font-display);font-size:clamp(28px,3vw,40px);line-height:1;color:var(--mm-accent-text);letter-spacing:-.03em}
.mm-award-banner__body{display:grid;gap:4px;flex:1;min-width:220px}
.mm-award-banner__body strong{color:var(--mm-fg-strong);font-weight:500;font-size:17px}
.mm-award-banner__body span{color:var(--mm-fg-soft);font-size:15px}

/* ---------------------------------------------------------------- Price */
.mm-price{margin:0}
.mm-price__value{font-family:var(--mm-font-display);font-size:clamp(34px,4vw,54px);color:var(--mm-fg-strong);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mm-price__cur{font-size:18px;color:var(--mm-accent-text);margin-left:10px}

/* ----------------------------------------------------------- Pagination */
.mm-pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--mm-block-y)}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 14px;
  border:1px solid var(--mm-rule);text-decoration:none;color:var(--mm-fg-soft);font-size:15px;
  transition:border-color var(--mm-dur-fast) var(--mm-ease),color var(--mm-dur-fast) var(--mm-ease);
}
.page-numbers:hover{border-color:var(--mm-accent);color:var(--mm-fg-strong)}
.page-numbers.current{border-color:var(--mm-accent);background:var(--mm-accent);color:var(--mm-on-accent)}

/* ---------------------------------------------------------------- Footer */
.mm-footer{border-top:1px solid var(--mm-rule);padding:clamp(48px,6vw,80px) 0 34px;font-size:var(--mm-size-small);color:var(--mm-fg-muted)}
.mm-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:44px}
.mm-footer__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-fg-muted);margin:0 0 16px;font-weight:500}
.mm-footer__list{list-style:none;display:grid;gap:2px}
/* WCAG 2.2 SC 2.5.8 — 24px minimum; 36px here. */
.mm-footer a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--mm-fg-soft);transition:color var(--mm-dur-fast) var(--mm-ease)}
.mm-footer a:hover{color:var(--mm-accent-text)}
/* `width:auto` is the whole point: with only a height set, the browser kept the
   width attribute and stretched the mark vertically. Same size as the header so
   the two read as one lockup rather than two decisions. */
.mm-footer__logo{height:56px;width:auto;margin-bottom:24px}
/* Same two marks as the header. The footer is never over a photograph, so it
   needs no exception. */
.mm-footer__logo--light-bg{display:none}
[data-theme="light"] .mm-footer__logo--dark-bg{display:none}
[data-theme="light"] .mm-footer__logo--light-bg{display:block}
.mm-footer__bottom{border-top:1px solid var(--mm-rule-soft);padding-top:26px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13px}
/* Agency credit. The link inherits .mm-footer a, which is inline-flex with a
   36px tap target — without a flex parent the label next to it does not centre. */
.mm-footer__credit{display:inline-flex;align-items:center;gap:.35em;color:var(--mm-fg-muted)}

/* ----------------------------------------------------------------- Forms */
.mm-field{display:grid;gap:8px;margin-bottom:20px}
.mm-field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-field input,.mm-field textarea,.mm-field select{
  width:100%;padding:15px 18px;min-height:48px;
  background:var(--mm-field-bg);border:1px solid var(--mm-rule);
  color:var(--mm-fg-strong);font:inherit;font-size:16px; /* 16px stops iOS zooming on focus */
  border-radius:var(--mm-radius);
  transition:border-color var(--mm-dur-fast) var(--mm-ease);
}
.mm-field input:focus,.mm-field textarea:focus,.mm-field select:focus{border-color:var(--mm-accent)}
.mm-field textarea{min-height:140px;resize:vertical}
.mm-field--error input,.mm-field--error textarea{border-color:var(--mm-err)}
.mm-field__error{color:var(--mm-err-text);font-size:14px}
/* The CV field. The browser's own file control cannot be restyled, so the box
   around it is dashed rather than pretending to be one of the text inputs — an
   input that looks identical to its neighbours but behaves differently is worse
   than one that plainly announces it opens a file picker. Padding is trimmed
   because the button carries its own height. */
.mm-field--file input[type="file"]{
  padding:12px 14px;background:transparent;border-style:dashed;cursor:pointer;
  font-size:15px;color:var(--mm-fg-soft);
}
.mm-field--file input[type="file"]::file-selector-button{
  margin-inline-end:14px;padding:8px 14px;cursor:pointer;font:inherit;font-size:14px;
  background:var(--mm-ghost-fill);border:1px solid var(--mm-ghost-border);
  color:var(--mm-fg-strong);border-radius:var(--mm-radius);
}
.mm-field--file input[type="file"]:hover::file-selector-button{border-color:var(--mm-accent)}
/* Said before the click: what is accepted, how big, and how long it is kept. */
.mm-field__hint{font-size:13px;line-height:1.5;color:var(--mm-fg-muted);text-transform:none;letter-spacing:0}
/* Honeypot — must be reachable by nothing, including screen readers. */
.mm-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.mm-form-wrap{max-width:var(--mm-max-text)}
.mm-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--mm-gap)}
.mm-form .mm-field{margin-bottom:20px}
.mm-consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0 0 26px}
.mm-consent input{width:20px;height:20px;margin-top:3px;accent-color:var(--mm-accent)}
.mm-consent label{font-size:15px;color:var(--mm-fg-soft);line-height:1.55}
.mm-notice{
  padding:16px 20px;margin:0 0 26px;font-size:16px;
  border-left:2px solid var(--mm-accent);background:var(--mm-accent-wash);color:var(--mm-fg);
}
.mm-notice--ok{border-left-color:var(--mm-ok);background:var(--mm-ok-wash)}
.mm-notice--err{border-left-color:var(--mm-err);background:var(--mm-err-wash)}
@media (max-width:640px){ .mm-form__row{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- Motion */
.mm-reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--mm-dur-reveal) var(--mm-ease),transform var(--mm-dur-reveal) var(--mm-ease);
}
.mm-reveal.is-in{opacity:1;transform:none}

/* Native scroll-driven reveal where supported; the JS observer is the fallback
   and removes itself when this branch is available. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mm-reveal.mm-reveal--native{
      opacity:1;transform:none;
      animation:mm-reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }
    @keyframes mm-reveal-in{
      from{opacity:0;transform:translateY(22px)}
      to{opacity:1;transform:none}
    }
  }
}

/* A step between rows of a list, not a new effect: the same 100 ms interval the
   hero title already uses line by line.

   It applies ONLY to the observer branch. Where `view()` is supported each row
   carries its own scroll timeline and therefore already enters one after another
   as the page moves — adding a delay there would fight the scroll position, which
   is the one thing a scroll-driven animation must not do. Capped at the 8th row
   so a long list does not end on a row that waits most of a second. */
@media (prefers-reduced-motion: no-preference){
  html.mm-js .mm-timeline__item.mm-reveal:not(.mm-reveal--native){
    transition-delay:calc(min(var(--mm-i,0),7) * 100ms);
  }
}

/* ==========================================================================
   MM Auto
   The rule everywhere below: no fills, no shadows, no scale. Depth comes from
   hairlines and from the photography, and the only saturated colour on the page
   is bronze, used once per component at most.
   ========================================================================== */

/* ------------------------------------------------------------ Auto hero --
   Type only. The showroom photography is bright — white marble, a white branded
   wall — and copy set over it stops being readable at 375px. */
/* .mm-page-hero is a flex row that bottom-aligns a single .mm-wrap. This hero
   has two — the copy and the programme strip — so it becomes a column, or the
   two would sit side by side. */
.mm-auto-hero{
  flex-direction:column;align-items:stretch;justify-content:flex-end;
  min-height:0;padding-bottom:0;
}
.mm-auto-hero__live{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  margin:clamp(24px,3vw,34px) 0 0;font-size:15px;color:var(--mm-fg-muted);
}
.mm-auto-hero__live b{
  font-family:var(--mm-font-display);font-weight:400;
  font-size:clamp(26px,3vw,38px);line-height:1;color:var(--mm-accent-text);
  letter-spacing:var(--mm-track-tight);font-variant-numeric:tabular-nums;
}
.mm-auto-hero__live span{color:var(--mm-fg-soft)}
.mm-auto-hero__live time{font-size:13px}
.mm-auto-hero__live time::before{content:"·";margin-right:14px;color:var(--mm-rule)}
.mm-auto-hero .mm-hero__actions{margin-top:clamp(26px,3vw,36px)}

/* The three certified-used programmes, set as type. The one claim that separates
   this from an ordinary dealer, so it sits in the hero and nowhere else. */
.mm-progs{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--mm-rule);margin-top:clamp(34px,5vw,60px);
  border-top:1px solid var(--mm-accent);
}
.mm-progs li{background:var(--mm-bg);padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,24px);display:grid;gap:4px}
.mm-progs span{font-family:var(--mm-font-display);font-size:clamp(15px,1.7vw,20px);color:var(--mm-fg-strong);letter-spacing:var(--mm-track-tight)}
.mm-progs em{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mm-accent-text)}
/* Three columns on a phone broke "Premium Selection" and "MERCEDES-BENZ" over
   two lines each and the strip stopped reading as a list of programmes. */
@media (max-width:620px){
  .mm-progs{grid-template-columns:1fr}
  .mm-progs li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:14px}
}

/* --------------------------------------------------------------- Filters */
.mm-vf{border-bottom:1px solid var(--mm-rule);padding-bottom:clamp(20px,2.6vw,30px);margin-bottom:clamp(28px,3.4vw,44px)}
.mm-vf__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 16px}
.mm-vf__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-fg-muted);min-width:58px}
.mm-vf__pills{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
/* The active pill used to be a solid bronze block — the loudest thing on a page
   briefed as "quietly expensive". It is a hairline and a weight change now. */
.mm-vf__pill{
  display:inline-flex;align-items:baseline;gap:8px;min-height:36px;
  padding:8px 14px;border:1px solid transparent;border-radius:var(--mm-radius);
  font-size:14px;text-decoration:none;color:var(--mm-fg-soft);white-space:nowrap;
  transition:color var(--mm-dur-fast) var(--mm-ease),border-color var(--mm-dur-fast) var(--mm-ease);
}
.mm-vf__pill:hover,.mm-vf__pill:focus-visible{color:var(--mm-fg-strong);border-color:var(--mm-rule)}
.mm-vf__pill.is-active{border-color:var(--mm-accent);color:var(--mm-fg-strong)}
.mm-vf__count{font-size:12px;color:var(--mm-fg-muted);font-variant-numeric:tabular-nums}
.mm-vf__pill.is-active .mm-vf__count{color:var(--mm-accent-text)}

.mm-vf__form{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px clamp(14px,1.6vw,22px);align-items:end;margin-top:clamp(18px,2.4vw,26px);
}
.mm-vf__field{display:grid;gap:7px;margin:0}
.mm-vf__field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-vf__field select{
  width:100%;min-height:42px;padding:9px 34px 9px 13px;
  background:transparent;border:1px solid var(--mm-rule);border-radius:var(--mm-radius);
  color:var(--mm-fg-strong);font:inherit;font-size:15px;
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mm-fg-muted) 50%),
                   linear-gradient(135deg,var(--mm-fg-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color var(--mm-dur-fast) var(--mm-ease);
}
.mm-vf__field select:hover,.mm-vf__field select:focus{border-color:var(--mm-accent)}
/* The options list is drawn by the OS, which does not inherit the dark surface. */
.mm-vf__field option{background:var(--mm-field-bg);color:var(--mm-fg-strong)}
.mm-vf__submit{margin:0}
.mm-vf__submit .mm-btn{width:100%;justify-content:center}
.mm-vf__form.is-live .mm-vf__submit{display:none}
.mm-vf__summary{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  margin:clamp(18px,2.2vw,24px) 0 0;font-size:14px;color:var(--mm-fg-muted);
}
.mm-vf__summary b{color:var(--mm-fg-strong);font-weight:500;font-variant-numeric:tabular-nums}
.mm-vf__clear{color:var(--mm-accent-text);font-size:13px;min-height:24px;display:inline-flex;align-items:center}

@media (max-width:1100px){ .mm-vf__form{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  .mm-vf__form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mm-vf__field--sort,.mm-vf__submit{grid-column:1 / -1}
}
@media (max-width:520px){
  /* Two selects to a row cut "Без долна граница" to "Без долна гра" — a price
     filter that cannot show its own option text is not a filter. One per row. */
  .mm-vf__form{grid-template-columns:1fr}
  /* min-width:0 on both: a flex item defaults to min-width:auto, so the marque
     list sized itself to its 22 pills — 2 413px — and took the whole page with
     it. Wrapping rather than side-scrolling because a scroller would bury
     eighteen of those marques behind a gesture nobody makes. */
  .mm-vf__row{flex-direction:column;align-items:stretch;gap:10px;min-width:0}
  .mm-vf__pills{flex-wrap:wrap;min-width:0;gap:6px}
  .mm-vf__pill{padding:7px 12px;font-size:13.5px}
}

/* ------------------------------------------------------------- Vehicles --
   One card shape for both sources. The photography carries the card, so the
   card itself is close to invisible: no panel, no border at rest, one hairline
   under the image that turns bronze on hover. */
.mm-vehicles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px) var(--mm-gap)}
.mm-vehicles--3{grid-template-columns:repeat(3,1fr)}
.mm-veh{display:flex;flex-direction:column;position:relative}
.mm-veh__link{
  display:flex;flex-direction:column;flex:1;text-decoration:none;
  transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-veh:hover .mm-veh__link{transform:translateY(-6px)}
.mm-veh__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/2;background:var(--mm-surface-2);
}
.mm-veh__img{width:100%;height:100%;object-fit:cover;display:block}
.mm-veh__monogram{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mm-font-display);font-size:34px;color:var(--mm-rule);
}
/* Outline, not a fill: this marks the twelve cars with real photography, a full
   specification and a page of their own — it is not a promotion. */
.mm-veh__flag{
  position:absolute;top:12px;left:12px;
  padding:5px 10px;border:1px solid var(--mm-accent-text);
  background:rgb(var(--mm-scrim-rgb) / 62%);backdrop-filter:blur(6px);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mm-accent-text);
}
.mm-veh__body{
  display:flex;flex-direction:column;gap:6px;flex:1;
  padding:16px 0 0;border-top:1px solid var(--mm-rule);
  transition:border-color var(--mm-dur) var(--mm-ease);
}
.mm-veh:hover .mm-veh__body{border-top-color:var(--mm-accent)}
.mm-veh__title{font-size:18px;margin:0;color:var(--mm-fg-strong);line-height:1.25}
.mm-veh__specs{font-size:13px;color:var(--mm-fg-muted);font-variant-numeric:tabular-nums}
.mm-veh__foot{margin-top:auto;padding-top:10px}
.mm-veh__price{
  font-family:var(--mm-font-display);font-size:19px;color:var(--mm-accent-text);
  letter-spacing:var(--mm-track-tight);font-variant-numeric:tabular-nums;
}
.mm-veh__price--ask{font-family:var(--mm-font-text);font-size:14px;color:var(--mm-fg-muted);letter-spacing:0}

/* Compare lives under the price rather than over the photograph — a control
   floating on a car is exactly the kind of noise this page is avoiding. */
.mm-veh__compare{display:inline-flex;align-items:center;gap:9px;margin-top:12px;cursor:pointer;align-self:flex-start;min-height:24px}
.mm-veh__compare input{position:absolute;opacity:0;width:1px;height:1px}
.mm-veh__compare-box{
  width:15px;height:15px;flex:none;border:1px solid var(--mm-rule);
  position:relative;transition:border-color var(--mm-dur-fast) var(--mm-ease),background var(--mm-dur-fast) var(--mm-ease);
}
.mm-veh__compare:hover .mm-veh__compare-box{border-color:var(--mm-accent)}
.mm-veh__compare input:focus-visible + .mm-veh__compare-box{outline:var(--mm-focus);outline-offset:3px}
.mm-veh__compare input:checked + .mm-veh__compare-box{background:var(--mm-accent);border-color:var(--mm-accent)}
.mm-veh__compare input:checked + .mm-veh__compare-box::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--mm-on-accent);border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
.mm-veh__compare-text{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mm-fg-muted);
  transition:color var(--mm-dur-fast) var(--mm-ease);
}
.mm-veh:hover .mm-veh__compare-text,.mm-veh__compare:hover .mm-veh__compare-text{color:var(--mm-fg-soft)}
/* Comparison is entirely client-side, so without a script the control would be a
   dead end. It is hidden until the script has claimed it. */
.mm-veh__compare{display:none}
.mm-js .mm-veh__compare{display:inline-flex}

@media (max-width:1100px){ .mm-vehicles,.mm-vehicles--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .mm-vehicles,.mm-vehicles--3{grid-template-columns:1fr} }

/* ------------------------------------------------------------- Compare --- */
.mm-cmpbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--mm-chrome-bar);backdrop-filter:blur(14px);
  border-top:1px solid var(--mm-accent);
  transform:translateY(100%);transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-cmpbar.is-in{transform:none}
.mm-cmpbar__inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-block:14px}
.mm-cmpbar__count{font-size:14px;color:var(--mm-fg-soft);margin-right:auto;font-variant-numeric:tabular-nums}
.mm-cmpbar__count b{color:var(--mm-fg-strong);font-weight:500}
.mm-cmpbar__clear{font-size:13px;color:var(--mm-fg-muted);background:none;border:0;cursor:pointer;min-height:36px;padding:0}
.mm-cmpbar__clear:hover{color:var(--mm-accent-text)}

.mm-cmp{border:0;padding:0;max-width:min(1180px,94vw);width:100%;background:var(--mm-surface);color:var(--mm-fg)}
.mm-cmp::backdrop{background:var(--mm-backdrop)}
.mm-cmp__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(22px,3vw,32px) clamp(20px,3vw,36px) 0}
.mm-cmp__head h2{font-size:var(--mm-size-h3);margin:0}
.mm-cmp__close{background:none;border:0;color:var(--mm-fg-muted);font-size:26px;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.mm-cmp__close:hover{color:var(--mm-fg-strong)}
/* Wide content scrolls inside itself; the page never scrolls sideways. */
.mm-cmp__scroll{overflow-x:auto;padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,36px) clamp(24px,3vw,36px)}
.mm-cmp__table{border-collapse:collapse;width:100%;min-width:560px;font-variant-numeric:tabular-nums}
.mm-cmp__table th,.mm-cmp__table td{
  text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--mm-rule-soft);
  font-size:15px;vertical-align:top;
}
.mm-cmp__table thead th{padding-bottom:18px;border-bottom-color:var(--mm-rule)}
.mm-cmp__table tbody th{font-weight:400;color:var(--mm-fg-muted);font-size:13px;letter-spacing:.06em;white-space:nowrap}
.mm-cmp__car{display:grid;gap:8px;min-width:170px}
.mm-cmp__car img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.mm-cmp__car a{color:var(--mm-fg-strong);text-decoration:none;font-size:16px;line-height:1.3}
.mm-cmp__car a:hover{color:var(--mm-accent-text)}
.mm-cmp__price{color:var(--mm-accent-text);font-family:var(--mm-font-display);font-size:17px}
.mm-cmp__empty{padding:clamp(20px,3vw,36px);color:var(--mm-fg-soft)}

/* ------------------------------------------------------- Synergy module --
   73,0% of the broker's book is motor insurance (КФН, 2025). The number leads
   because it is what makes the chain credible. */
.mm-syn{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:2px;background:var(--mm-rule)}
.mm-syn__figure{background:var(--mm-bg);padding:clamp(28px,3.2vw,44px);display:grid;align-content:start;gap:16px}
.mm-syn__figure b{
  font-family:var(--mm-font-display);font-weight:300;
  font-size:clamp(56px,7vw,104px);line-height:.92;color:var(--mm-fg-strong);
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.mm-syn__figure b em{font-style:normal;font-size:.42em;color:var(--mm-accent-text);margin-left:.06em}
.mm-syn__figure p{color:var(--mm-fg-soft);font-size:16px;margin:0}
.mm-syn__source{font-size:13px;color:var(--mm-fg-muted)}
.mm-syn__steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--mm-rule)}
.mm-syn__step{background:var(--mm-bg);padding:clamp(24px,2.8vw,36px);display:grid;gap:8px;align-content:start}
.mm-syn__num{font-family:var(--mm-font-display);font-size:13px;color:var(--mm-accent-text);letter-spacing:.1em}
.mm-syn__brand{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-syn__title{font-family:var(--mm-font-text);font-size:18px;font-weight:600;letter-spacing:0;color:var(--mm-fg-strong);margin:2px 0 0}
.mm-syn__step p{color:var(--mm-fg-soft);font-size:15px;margin:0}
/* The three panels carry different amounts of copy; the links line up along the
   bottom rather than floating wherever each paragraph happens to end. */
.mm-syn__step .mm-link{margin-top:auto;padding-top:14px;font-size:14px;justify-self:start}
@media (max-width:1100px){
  .mm-syn{grid-template-columns:1fr}
  .mm-syn__steps{grid-template-columns:1fr}
}

/* ------------------------------------------------------------ Car page ---
   The section rhythm that separates unrelated blocks put 334px of nothing
   between the photographs and the specification, which belong to each other.
   The top block and the table below it get a tighter interval than the page
   default; the sections after them keep it. */
.mm-car > .mm-section:first-of-type{padding-bottom:clamp(24px,3vw,40px)}
.mm-car > .mm-section:first-of-type + .mm-section{padding-top:clamp(34px,4vw,56px)}
.mm-car__top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:start}
.mm-car__stage{margin:0;position:relative;background:var(--mm-surface-2);overflow:hidden}
.mm-car__stage--empty{aspect-ratio:3/2;display:grid;place-items:center}
.mm-car__zoom{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.mm-car__zoom img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
/* Wrapping rows, not a side-scroller: eleven photographs in a 705px column left
   six of them behind a scrollbar, and a buyer will not go looking. */
.mm-car__thumbs{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:8px;margin-top:8px;
}
.mm-car__thumb{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;opacity:.55;transition:opacity var(--mm-dur-fast) var(--mm-ease);
}
.mm-car__thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.mm-car__thumb:hover,.mm-car__thumb:focus-visible{opacity:1}
.mm-car__thumb.is-active{opacity:1}
.mm-car__thumb.is-active::after{content:"";position:absolute;inset:0;border:1px solid var(--mm-accent-text)}

.mm-car__summary h1{font-size:clamp(28px,3.4vw,46px);margin:0 0 22px}
.mm-car__summary .mm-price{margin:0 0 26px}
.mm-price__vat{font-size:13px;color:var(--mm-fg-muted);margin-left:12px;letter-spacing:.06em}
.mm-price__ask{font-family:var(--mm-font-text);font-size:20px;color:var(--mm-fg-soft)}
.mm-car__status{
  display:inline-block;margin:0 0 22px;padding:6px 12px;
  border:1px solid var(--mm-accent);color:var(--mm-accent-text);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.mm-car__keys{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--mm-rule);margin:0 0 26px}
.mm-car__keys li{background:var(--mm-bg);padding:16px 18px;display:grid;gap:4px}
.mm-car__keys b{font-family:var(--mm-font-display);font-weight:400;font-size:20px;color:var(--mm-fg-strong);letter-spacing:var(--mm-track-tight);font-variant-numeric:tabular-nums}
.mm-car__keys span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-car__actions{margin:0 0 18px}
.mm-car__actions .mm-btn{width:100%;justify-content:center}
.mm-car__note{font-size:15px;color:var(--mm-fg-muted);margin:0;line-height:1.6}
@media (max-width:1000px){
  .mm-car__top{grid-template-columns:1fr}
  .mm-car__actions .mm-btn{width:auto}
}

/* Sticky enquiry bar — appears once the price has scrolled away. */
.mm-carbar{
  position:fixed;left:0;right:0;bottom:0;z-index:39;
  background:var(--mm-chrome-bar);backdrop-filter:blur(14px);
  border-top:1px solid var(--mm-rule);
  transform:translateY(100%);transition:transform var(--mm-dur) var(--mm-ease);
}
.mm-carbar.is-in{transform:none}
.mm-carbar__inner{display:flex;align-items:center;gap:12px 20px;padding-block:12px}
.mm-carbar__title{font-family:var(--mm-font-display);font-size:16px;color:var(--mm-fg-strong);letter-spacing:var(--mm-track-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-carbar__price{font-family:var(--mm-font-display);font-size:16px;color:var(--mm-accent-text);white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto}
.mm-carbar .mm-btn{padding:11px 20px;white-space:nowrap}
@media (max-width:600px){
  .mm-carbar__title{display:none}
  .mm-carbar__price{margin-left:0}
  .mm-carbar .mm-btn{margin-left:auto}
}
/* Two fixed bars stacking would cover a third of a phone screen — comparison
   wins, because the visitor opened it deliberately. */
body:has(.mm-cmpbar.is-in) .mm-carbar{display:none}

/* --------------------------------------------------------------- Equipment
   Column flow, not a grid: the groups are wildly uneven — 25 comfort features
   against one interior line — and a grid stretched every panel to the height of
   the tallest in its row, leaving two thirds of the block empty. Columns let
   each panel end where its content ends and pack the rest underneath. */
.mm-equip{columns:3;column-gap:2px}
.mm-equip__group{background:var(--mm-bg-alt);padding:clamp(22px,2.6vw,32px);break-inside:avoid;margin-bottom:2px}
.mm-equip__group h3{font-family:var(--mm-font-text);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mm-accent-text);margin:0 0 16px}
.mm-equip__group ul{list-style:none;display:grid;gap:9px}
.mm-equip__group li{font-size:15px;color:var(--mm-fg-soft);padding-left:16px;position:relative;line-height:1.5}
.mm-equip__group li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:1px;background:var(--mm-accent)}
@media (max-width:1000px){ .mm-equip{columns:2} }
@media (max-width:640px){ .mm-equip{columns:1} }

/* -------------------------------------------------------------- Lightbox */
/* The dialog itself must not scroll — with overflow on both it and the inner
   wrapper the browser drew two scrollbars side by side. Scrolling belongs to
   the inner list only. */
.mm-lightbox{border:0;padding:0;overflow:hidden;max-width:96vw;max-height:94dvh;width:1400px;background:var(--mm-stage);color:var(--mm-fg)}
.mm-lightbox::backdrop{background:var(--mm-backdrop)}
.mm-lightbox__inner{overflow-y:auto;max-height:94dvh;display:grid;gap:2px}
.mm-lightbox__slide{margin:0;display:grid;place-items:center;background:var(--mm-stage-alt)}
/* A 1370×882 photograph in a 719px window meant scrolling every single frame
   to see one car. Each slide fits the window instead, letterboxed. */
.mm-lightbox__slide img{
  width:auto;max-width:100%;height:auto;max-height:88dvh;
  object-fit:contain;display:block;
}
.mm-lightbox__close{
  position:sticky;float:right;top:10px;right:10px;z-index:2;
  width:44px;height:44px;background:rgb(var(--mm-scrim-rgb) / 80%);backdrop-filter:blur(8px);
  border:1px solid var(--mm-rule);color:var(--mm-fg-strong);font-size:24px;line-height:1;cursor:pointer;
}
.mm-lightbox__close:hover{border-color:var(--mm-accent)}

/* -------------------------------------------------- Feed listing page --- */
.mm-listing__top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:start}
.mm-listing__media{margin:0;background:var(--mm-surface-2);overflow:hidden}
.mm-listing__media img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.mm-listing__summary h1{font-size:clamp(26px,3.2vw,42px);margin:0 0 22px}
.mm-listing__summary .mm-price{margin:0 0 26px}
.mm-listing__actions{margin:26px 0 16px}
.mm-listing__note{font-size:15px;color:var(--mm-fg-muted);margin:0;line-height:1.6}
.mm-facts--stack{grid-template-columns:1fr}
/* Demoted on purpose: the enquiry comes first, the outbound link after it. */
.mm-listing__source{margin:clamp(28px,3.4vw,44px) 0 0;font-size:14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.mm-listing__source span{color:var(--mm-fg-muted);font-size:12px}
@media (max-width:1000px){ .mm-listing__top{grid-template-columns:1fr} }

/* The car an enquiry is about, named above the fields instead of pasted into
   the message where the visitor could delete it by accident. */
.mm-form__ref{
  display:grid;gap:4px;margin:0 0 24px;padding:14px 18px;
  border-left:2px solid var(--mm-accent);background:var(--mm-accent-wash);
}
.mm-form__ref span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg-muted)}
.mm-form__ref strong{color:var(--mm-fg-strong);font-weight:500;font-size:17px}

/* ----------------------------------------------------------- Breakpoints */
@media (max-width:1100px){
  .mm-chain{grid-template-columns:repeat(2,1fr)}
  .mm-awards{grid-template-columns:repeat(2,1fr)}
  .mm-mix{grid-template-columns:1fr}
  .mm-mix__note{border-left:0;border-top:2px solid var(--mm-accent);padding:26px 0 0}
  .mm-manifesto__inner{grid-template-columns:1fr}
  .mm-world__inner{grid-template-columns:1fr}
  .mm-founders{grid-template-columns:1fr}
  .mm-amenities{grid-template-columns:repeat(2,1fr)}
  .mm-gallery{grid-template-columns:repeat(2,1fr)}
  .mm-stats__grid{grid-template-columns:repeat(2,1fr)!important}
  /* Two columns here, so the cell is ~390px and the label has three times the
     measure it fights for on the five-across grid. Back to the designed size. */
  .mm-stat__label{font-size:12px;letter-spacing:.13em}
}
@media (max-width:1000px){
  .mm-grid--4{grid-template-columns:repeat(2,1fr)}
  .mm-grid--3{grid-template-columns:repeat(2,1fr)}
  .mm-stats__grid{grid-template-columns:repeat(3,1fr)}
  .mm-stat:nth-child(3){border-right:0}
  .mm-footer__grid{grid-template-columns:1fr 1fr}
  .mm-feed__grid{grid-template-columns:repeat(2,1fr)}
}
/* Only inside the burger panel — on a wide screen the footer carries both
   numbers and the header has no room for them. Declared before the media query
   so the panel's own `display:grid` is the later rule and wins. */
.mm-nav__calls{display:none}
/* Same as the calls block above: this row belongs to the burger panel only. It
   is revealed inside the max-width:1000px block. Without this base rule it
   defaults to display:block and prints under the desktop navigation. */
.mm-nav__langs{display:none}

/* The navigation collapses earlier than the rest of the layout. Seven items
   already ran 170→715px of a 768px viewport; "Автомобили" and a sub-menu do not
   fit there, so the burger takes over early.

   18.09.2026: moved 1000px → 1040px. Adding the 44px language control to the
   tools cluster took the nav from 689px to 667px, and between 1001 and ~1040px
   that was 22px too little: "За нас" silently wrapped onto a second line (58px
   tall instead of 35px) instead of overflowing. Measured — breaks at ≤1035px,
   clean from 1048px. The three-column grids still drop to two at 1000px; these
   two thresholds are no longer the same number on purpose. */
@media (max-width:1040px){
  .mm-nav{
    position:fixed;inset:var(--mm-header-h) 0 auto;
    max-height:calc(100dvh - var(--mm-header-h));overflow-y:auto;
    background:var(--mm-chrome-solid);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--mm-rule);
    padding:8px var(--mm-gutter) 28px;
    display:none;
  }
  .mm-nav.is-open{display:block}
  .mm-nav__list{flex-direction:column;gap:0}
  .mm-nav a{padding:15px 0;font-size:17px;display:block}
  .mm-nav a::after{display:none}
  .mm-burger{display:inline-flex}
  /* Inside the panel the sub-menu is simply an indented list, always visible.
     Nothing to open, nothing to miss, and it needs no script. */
  .mm-nav__list .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 8px;margin:0;
    background:none;backdrop-filter:none;border:0;
  }
  .mm-nav__list .sub-menu a{padding:11px 0 11px 22px;font-size:15px;color:var(--mm-fg-soft)}
  .mm-nav__list .sub-menu a:hover,.mm-nav__list .sub-menu a:focus-visible{padding-inline-start:28px}
  .mm-nav__list .sub-menu li{border-left:1px solid var(--mm-rule)}
  .mm-nav__list .menu-item-has-children > a::before{display:none}
  /* Nothing to toggle inside the burger panel — the list is already open. */
  .mm-nav__caret,.mm-nav__toggle{display:none}
  .mm-nav__calls{display:grid;gap:2px;margin-top:20px;background:var(--mm-rule)}
  /* `.mm-nav a` above is one point more specific than a bare class, so without
     the extra qualifier these rendered as display:block and the label ran into
     the number on one line. */
  .mm-nav .mm-nav__call{
    display:grid;gap:3px;padding:16px 18px;background:var(--mm-surface-2);text-decoration:none;
  }
  .mm-nav__call span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg-muted)}
  .mm-nav__call strong{font-family:var(--mm-font-display);font-size:19px;font-weight:400;letter-spacing:-.02em;color:var(--mm-fg-strong)}
  .mm-nav__call--claims strong{color:var(--mm-accent-text)}
  .mm-nav__langs{display:grid;margin-top:2px;background:var(--mm-rule)}
  .mm-nav .mm-nav__lang{
    display:grid;gap:3px;padding:16px 18px;background:var(--mm-surface-2);text-decoration:none;
  }
  .mm-nav__lang span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-fg-muted)}
  .mm-nav__lang strong{
    font-family:var(--mm-font-display);font-size:17px;font-weight:400;
    letter-spacing:-.02em;color:var(--mm-fg-strong);
  }
  .mm-nav__lang--none strong{font-size:14px;color:var(--mm-fg-muted)}
}
@media (max-width:760px){
  .mm-grid--2,.mm-grid--3,.mm-grid--4{grid-template-columns:1fr}
  .mm-stats__grid{grid-template-columns:repeat(2,1fr)}
  .mm-stat{border-right:0;border-bottom:1px solid var(--mm-rule-soft)}
  .mm-footer__grid{grid-template-columns:1fr}
  .mm-feed__grid{grid-template-columns:1fr}
  .mm-brands{grid-template-columns:1fr}
  .mm-chain{grid-template-columns:1fr}
  .mm-awards{grid-template-columns:1fr}
  .mm-news__link{grid-template-columns:1fr;gap:18px}
  .mm-founder{grid-template-columns:1fr}
  .mm-founder__photo{max-width:280px}
  .mm-timeline__item{grid-template-columns:1fr;gap:6px}
  .mm-mix__row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .mm-mix__bar{grid-column:1 / -1;order:3}
  .mm-facts{grid-template-columns:1fr}
  .mm-amenities{grid-template-columns:1fr}
  .mm-gallery{grid-template-columns:1fr}
  .mm-filter{flex-direction:column;gap:10px}
  .mm-services{grid-template-columns:1fr}
  .mm-stats__grid{grid-template-columns:1fr!important}
  .mm-contact{grid-template-columns:1fr}
  .mm-contact__list span{min-width:100%}
  .mm-person{grid-template-columns:1fr}
  .mm-person__photo{max-width:200px}
  .mm-job__link{grid-template-columns:1fr;gap:6px}
}
@media (max-width:520px){
  .mm-stats__grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------- Reduced motion --
   Not an afterthought: the hero video is swapped for its poster in JS too. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .mm-reveal{opacity:1;transform:none}
}

/* --------------------------------------------------------------- Print --- */
@media print{
  .mm-header,.mm-footer,.mm-burger,.mm-skip-link{display:none}
  body{background:#fff;color:#000}
}