/* =============================================================
   Desktop Mega Menu — component
   =============================================================

   DESKTOP ONLY. `.mm-root` is display:none by default; an inline
   media query emitted by PHP reveals it at the configured breakpoint
   (default 1024px). Markup is never restructured — only shown or
   hidden — so a mobile menu plugin owns small screens completely and
   shares no CSS or JS state with this component.

   Animates opacity and transform only. Never width/height: hover
   fires repeatedly as users scan a nav, and layout thrash is visible.
   ============================================================= */

/* ---------------------------------------------------------------
   Scoped reset
   Themes style ul/li/a aggressively. Neutralise only inside our own
   subtree so nothing leaks out into the theme.
   --------------------------------------------------------------- */

/* Every reset selector is wrapped in :where() so it carries ZERO specificity.
   A plain `.mm-root p { margin: 0 }` scores (0,1,1) and silently beats every
   single-class component rule below it — which zeroed the kicker, section
   label and microcopy margins. :where() keeps the reset winning against theme
   styles while always losing to our own classes. */

:where(.mm-root),
:where(.mm-root) *,
:where(.mm-root) *::before,
:where(.mm-root) *::after {
  box-sizing: border-box;
}

:where(.mm-root) ul,
:where(.mm-root) li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The reset above is intentionally zero-specificity (:where), but that means a
   theme's own `ul { margin-left: 24px }` beats it and indents the panel's lists
   — the category rail and the row grids — away from their headings. This
   one-class-deep rule clears the box model without disturbing anything the
   plugin styles (every list here lays out with flex/grid + gap). */
.mm-root ul {
  margin: 0;
  padding: 0;
}

:where(.mm-root) li::marker,
:where(.mm-root) li::before {
  content: none;
}

:where(.mm-root) p {
  margin: 0;
}

:where(.mm-root) a {
  text-decoration: none;
  box-shadow: none;
}

:where(.mm-root) svg {
  display: block;
  flex: none;
}

/* Hidden until the desktop breakpoint reveals it. PHP emits the
   matching min-width query inline so the breakpoint stays settable. */
.mm-root {
  display: none;
  position: relative;
  font-family: var(--mm-font);
  align-items: center;
  gap: 18px;
}

/* ---------------------------------------------------------------
   Nav bar
   --------------------------------------------------------------- */

.mm-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Explicit, not via the :where() reset: that reset is zero-specificity, so a
     theme's `ul { margin: 0 0 24px }` beats it and pushes the list up inside
     its centred wrapper — throwing the nav out of vertical alignment with the
     logo, badge and pill. A one-class rule (0,1,0) clears any bare-`ul` rule. */
  margin: 0;
  padding: 0;
}

.mm-nav__item {
  position: static; /* panel anchors to .mm-root, not to the item */
}

.mm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: var(--mm-fs-nav);
  font-weight: 400;
  line-height: var(--mm-lh-base);
  white-space: nowrap;
  color: var(--mm-nav-color);
  border-radius: var(--mm-radius-btn);
  transition: color var(--mm-close-dur) var(--mm-close-ease),
              opacity var(--mm-close-dur) var(--mm-close-ease);
}

.mm-nav__link:hover,
.mm-nav__link:focus-visible {
  color: var(--mm-nav-color-hover);
  opacity: 0.82;
}

.mm-nav__link--active {
  font-weight: 500;
}

.mm-nav__chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
  transition: transform var(--mm-open-dur) var(--mm-open-ease);
}

.mm-nav__item--has-panel.is-open .mm-nav__chevron {
  transform: translateY(1px) rotate(225deg);
}

/* Focus is never suppressed — only restyled. */
.mm-root a:focus-visible,
.mm-root [tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Panel
   Absolutely positioned so it never affects layout or LCP.
   Hidden with visibility+opacity (not display:none) so it stays
   animatable while still leaving the a11y tree and tab order.
   --------------------------------------------------------------- */

.mm-panel {
  position: absolute;
  top: calc(100% + var(--mm-panel-offset));
  left: 50%;
  z-index: 999;

  width: min(var(--mm-panel-max-w), calc(100vw - 32px));
  max-height: var(--mm-panel-max-h);
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--mm-panel-bg);
  border-radius: var(--mm-radius-panel);
  box-shadow: var(--mm-panel-shadow);
  color: var(--mm-text-primary);
  text-align: left;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(var(--mm-open-translate) * -1));

  transition: opacity var(--mm-close-dur) var(--mm-close-ease),
              transform var(--mm-close-dur) var(--mm-close-ease),
              visibility 0s linear var(--mm-close-dur);
}

.mm-nav__item--has-panel.is-open > .mm-panel,
.mm-root:not(.mm-js) .mm-nav__item--has-panel:focus-within > .mm-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--mm-open-dur) var(--mm-open-ease),
              transform var(--mm-open-dur) var(--mm-open-ease),
              visibility 0s;
}

.mm-panel__inner {
  padding: var(--mm-panel-pad-y) var(--mm-panel-pad-x);
}

/* Kicker and trust line share the top row. The right side was empty space
   in every panel; the owner-led line is the strongest differentiator in the
   component and was previously buried at 11px in the footer. */
.mm-panel__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.mm-panel__trust {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mm-text-secondary);
  text-align: right;
  flex: none;
}

.mm-panel__kicker {
  margin-bottom: 22px;
  font-size: var(--mm-fs-kicker);
  letter-spacing: var(--mm-ls-kicker);
  text-transform: uppercase;
  color: var(--mm-text-muted);
}

/* Inside the top row the kicker no longer owns the spacing. */
.mm-panel__top .mm-panel__kicker {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Columns
   --------------------------------------------------------------- */

/* Half the gap sits either side of a hairline rule, so the columns read as
   separate sections rather than one wide field of links. Grid items stretch
   by default, so every rule runs the full height of the tallest column and
   the set stays even however uneven the content. */
.mm-panel__columns {
  display: grid;
  grid-template-columns: repeat(var(--mm-cols, 4), minmax(0, 1fr));
  gap: calc(var(--mm-col-gap) / 2);
}

.mm-col + .mm-col {
  border-left: 1px solid var(--mm-border);
  padding-left: calc(var(--mm-col-gap) / 2);
}

.mm-panel__columns[data-mm-cols="1"] { --mm-cols: 1; }
.mm-panel__columns[data-mm-cols="2"] { --mm-cols: 2; }
.mm-panel__columns[data-mm-cols="3"] { --mm-cols: 3; }
.mm-panel__columns[data-mm-cols="4"] { --mm-cols: 4; }
.mm-panel__columns[data-mm-cols="5"] { --mm-cols: 5; }

/* LOAD-BEARING. Fixed min-height + margin keeps the first row of every
   column on the same baseline when a header wraps to two lines. Without
   it the flagship rows fall out of alignment.

   The icon sits inline with the header rather than stacked above it, which
   removes a whole row from the block and lets the min-height drop from 84px
   to 56px — ~28px reclaimed from every panel. */
.mm-col__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: var(--mm-col-header-minh);
  margin-bottom: var(--mm-col-header-mb);
}

.mm-col__headrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

/* Header and tag stack in one column beside the icon, so both share the same
   left edge instead of the tag hanging back underneath the icon. */
.mm-col__headtext {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.mm-col__icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;   /* optical: aligns the stroke to the cap height */
  color: var(--mm-accent);
}

.mm-col__header {
  font-size: var(--mm-fs-col-header);
  font-weight: var(--mm-fw-col-header);
  line-height: var(--mm-lh-tight);
  color: var(--mm-text-primary);
}

/* Typeset, not a pill — the only pill in the design is the badge. */
.mm-col__tag {
  font-size: var(--mm-fs-col-tag);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mm-accent);
}

/* The anchor spans the whole column, so the hit area is far larger than the
   text. A color change alone never communicated that. The surface is inset
   with a negative margin so it reads as a row, not a button, and the row
   dividers stay visually continuous. */
/* Two tracks: text takes what is left, the badge takes what it needs. The
   badge can no longer be bumped onto its own line, and a long label wraps
   inside its own track instead of shoving the badge out of the row. */
.mm-col__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  padding: calc(var(--mm-row-pad) - 3px) 8px;
  margin: 3px -8px;
  border-radius: 7px;
  color: var(--mm-text-primary);
  transition: color var(--mm-close-dur) var(--mm-close-ease),
              background-color var(--mm-close-dur) var(--mm-close-ease);
}

.mm-col__link:hover,
.mm-col__link:focus-visible {
  color: var(--mm-accent);
  background-color: var(--mm-row-hover-bg);
}

/* The divider sits on the ROW at exact column width; the hover surface sits
   inside it with a 3px inset. Previously the border lived on the link, which
   was 8px wider than the column and had the hover background running flush
   into the rule above and below — the surface read as a mis-set block rather
   than a highlight. */
.mm-col__row + .mm-col__row {
  border-top: 1px solid var(--mm-border);
}

/* Explicit placement: the badge shares row 1 with the label, the descriptor
   spans the full width beneath both. */
.mm-col__label  { grid-column: 1; grid-row: 1; }
.mm-col__badge  { grid-column: 2; grid-row: 1; }
.mm-col__descriptor {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 3px;
}

.mm-col__label {
  font-size: var(--mm-fs-item);
  font-weight: var(--mm-fw-item);
  line-height: var(--mm-lh-base);
}

.mm-col__row--flagship .mm-col__label {
  font-weight: var(--mm-fw-flagship);
}

.mm-col__descriptor {
  font-size: var(--mm-fs-descriptor);
  line-height: var(--mm-lh-copy);
  color: var(--mm-text-muted);
}

/* The single pill in the design. */
/* Sentence case, not uppercase. Caps cost roughly 20% width, which is the
   difference between the badge sitting beside a long label and forcing it to
   wrap — and a quieter badge suits a considered purchase better than a
   shouted one. */
.mm-col__badge {
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--mm-accent);
  background: var(--mm-accent-soft);
  border-radius: var(--mm-radius-badge);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Horizontal strip
   --------------------------------------------------------------- */

.mm-panel__industries {
  margin-top: var(--mm-section-gap);
  padding-top: var(--mm-section-gap);
  border-top: 1px solid var(--mm-border);
}

.mm-panel__label {
  margin-bottom: 10px;
  font-size: var(--mm-fs-kicker);
  letter-spacing: var(--mm-ls-kicker);
  text-transform: uppercase;
  color: var(--mm-text-muted);
}

/* Gap is small because each link carries its own padding; together they
   read as the same ~24px rhythm the strip had before the hover surface. */
.mm-industries__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.mm-industries__link {
  display: inline-block;
  padding: 5px 10px;
  margin-left: -10px;
  border-radius: 6px;
  font-size: var(--mm-fs-item);
  color: var(--mm-text-secondary);
  transition: color var(--mm-close-dur) var(--mm-close-ease),
              background-color var(--mm-close-dur) var(--mm-close-ease);
}

/* Only the first item pulls left, so the strip still aligns flush with the
   column above it. */
.mm-industries__item:not(:first-child) .mm-industries__link {
  margin-left: 0;
}

.mm-industries__link:hover,
.mm-industries__link:focus-visible {
  color: var(--mm-accent);
  background-color: var(--mm-row-hover-bg);
}

.mm-industries__note {
  display: block;
  font-size: var(--mm-fs-descriptor);
  line-height: var(--mm-lh-copy);
  color: var(--mm-text-muted);
}

/* An invitation to get in touch needs something to click.
   nowrap keeps the call to action whole: in a narrow column it was breaking
   as "sprich uns / an.", stranding the verb from its object and leaving a
   full stop alone on the second line. */
.mm-industries__note a,
.mm-panel__aboutsub a {
  white-space: nowrap;
  color: var(--mm-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mm-industries__note a:hover,
.mm-industries__note a:focus-visible,
.mm-panel__aboutsub a:hover,
.mm-panel__aboutsub a:focus-visible {
  color: var(--mm-accent-strong);
}

/* ---------------------------------------------------------------
   Panel footer
   --------------------------------------------------------------- */

.mm-panel__footer {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: var(--mm-section-gap);
  padding-top: var(--mm-section-gap);
  border-top: 1px solid var(--mm-border);
}

/* The strip moves into the footer and takes the left slot, so the footer is a
   single three-part row: who we work for · what we achieved · what to do next.
   Previously that left slot sat empty while the strip had its own full-width
   band above, which read as a gap rather than a layout.

   Inside a ~380px slot the seven industries are laid out as a GRID rather than
   left to wrap. Free-flowing wrap produced ragged lines of different lengths;
   fixed columns give the same information a deliberate shape. */
.mm-panel__footer {
  align-items: flex-start;
}

.mm-panel__footer .mm-panel__industries {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The strip reuses .mm-col__head wholesale, so its icon, heading and subline
   inherit the column type scale and spacing exactly. Only the subline differs:
   it is running microcopy, not an uppercase segment tag.

   display:contents can strip list semantics, so the <ul> carries an explicit
   role="list" — worth having regardless, since `list-style: none` already
   removes them in Safari. */
.mm-col__head--strip {
  min-height: 0;
}

.mm-col__tag--note {
  font-size: var(--mm-fs-descriptor);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--mm-lh-copy);
  color: var(--mm-text-muted);
}

.mm-panel__footer .mm-panel__industries {
  align-content: start;
}

.mm-panel__footer .mm-industries__list {
  display: grid;
  grid-template-columns: repeat(var(--mm-industries-cols, 3), minmax(0, 1fr));
  gap: 1px 8px;
  margin-left: -8px;
}

.mm-panel__footer .mm-industries__item {
  min-width: 0;
}

.mm-panel__footer .mm-industries__link {
  display: block;
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-panel__footer .mm-panel__label,
.mm-panel__footer .mm-industries__note {
  margin-left: 0;
}

.mm-panel__footer .mm-industries__note {
  margin-top: 10px;
}

/* The metric and the actions hold their intrinsic size; the strip absorbs
   whatever is left. */
.mm-panel__footer .mm-metric,
.mm-panel__footer .mm-panel__actions {
  flex: none;
  align-self: center;
}

.mm-panel__aboutwrap {
  flex: 1 1 auto;
  min-width: 0;
}

.mm-panel__about {
  font-size: var(--mm-fs-descriptor);
  font-weight: 500;
  line-height: var(--mm-lh-copy);
  color: var(--mm-text-secondary);
}

.mm-panel__aboutsub {
  font-size: var(--mm-fs-descriptor);
  line-height: var(--mm-lh-copy);
  color: var(--mm-text-muted);
}

.mm-panel__actions {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
  flex: none;
}

/* Side by side the two buttons claimed ~424px of a 1044px row, which is what
   squeezed the industries into ragged wrapping. Stacked they take ~250px and
   the primary/secondary hierarchy reads more clearly vertically anyway. */
.mm-panel__actions .mm-btn {
  width: 100%;
}

/* ---------------------------------------------------------------
   Rotating metric
   LOAD-BEARING fixed box: two description lines are always reserved
   so rotation never shifts the footer row.
   --------------------------------------------------------------- */

.mm-metric {
  position: relative;
  flex: none;
  width: var(--mm-metric-w);
  height: var(--mm-metric-h);
  padding-left: 18px;
  border-left: 1px solid var(--mm-border);
}

.mm-metric__slide {
  position: absolute;
  inset: 0 0 auto 18px;
  opacity: 0;
  transition: opacity var(--mm-metric-fade) var(--mm-open-ease);
  pointer-events: none;
}

.mm-metric__slide--active {
  opacity: 1;
}

.mm-metric__value {
  display: block;
  font-size: var(--mm-fs-metric);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.4px;
  color: var(--mm-accent);
  font-variant-numeric: tabular-nums;
}

.mm-metric__desc {
  display: block;
  height: var(--mm-metric-desc-h);
  margin-top: 4px;
  overflow: hidden;
  font-size: var(--mm-fs-metric-desc);
  line-height: 1.4;
  color: var(--mm-text-secondary);
}

/* Attribution on its own line. Run together with the description it read as a
   sentence fragment and the client name — the part that makes the claim
   checkable — was the easiest thing to miss. */
.mm-metric__client {
  display: block;
  margin-top: 2px;
  font-size: var(--mm-fs-metric-client);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--mm-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--mm-btn-pad);
  font-family: inherit;
  font-size: var(--mm-fs-btn);
  font-weight: var(--mm-fw-btn);
  line-height: 1.2;
  border-radius: var(--mm-radius-btn);
  white-space: nowrap;
  transition: background-color var(--mm-close-dur) var(--mm-close-ease),
              color var(--mm-close-dur) var(--mm-close-ease),
              border-color var(--mm-close-dur) var(--mm-close-ease);
}

.mm-btn--primary,
.mm-btn--cta {
  color: var(--mm-accent-contrast);
  background: var(--mm-accent);
  border: 1px solid var(--mm-accent);
}

.mm-btn--primary:hover,
.mm-btn--primary:focus-visible,
.mm-btn--cta:hover,
.mm-btn--cta:focus-visible {
  background: var(--mm-accent-strong);
  border-color: var(--mm-accent-strong);
  color: var(--mm-accent-contrast);
}

.mm-btn--secondary {
  color: var(--mm-text-primary);
  background: transparent;
  border: 1px solid var(--mm-border-strong);
}

.mm-btn--secondary:hover,
.mm-btn--secondary:focus-visible {
  border-color: var(--mm-accent);
  color: var(--mm-accent);
}

/* Pill CTA — the same shape as the header availability pill: an icon in a soft
   circle on the left, the label, and a trailing arrow pushed to the right edge.
   Reuses the .mm-cta__icon / .mm-cta__glyph / .mm-cta__arrow parts so the two
   buttons stay visually identical. */
.mm-btn--pill {
  gap: 10px;
  padding: 8px 20px 8px 10px;
  justify-content: flex-start;
}

.mm-btn--pill .mm-btn__label {
  position: relative;
  z-index: 1;
}

.mm-btn--pill .mm-cta__arrow {
  margin-left: auto;
}

/* ---------------------------------------------------------------
   Header actions
   --------------------------------------------------------------- */

.mm-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  margin-left: auto;
}

.mm-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mm-nav-color);
  text-decoration: none;
}

/* Review-provider mark (e.g. the Google "G") in a circle, echoing the CTA
   icon so the badge and the button read as one system. White tile so the
   four-color mark stays legible on a hero image or a light stuck header. */
.mm-trust__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(16, 24, 32, 0.1);
  flex: none;
}

.mm-trust__brandimg {
  display: block;
  width: 18px;
  height: 18px;
}

/* The rating leads — the strongest single trust signal carries the weight. */
.mm-trust__rating {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.3px;
  color: currentColor;
}

.mm-trust__stack {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}

/* CSS stars: no font dependency, no emoji, no image request. */
.mm-trust__stars {
  --mm-star-size: 13px;
  display: block;
  width: calc((var(--mm-star-size) + 2px) * 5);
  height: var(--mm-star-size);
  /* No background or opacity here — the mask clips this element and its
     child, so dimming it would wash out the gold fill inside. */
  -webkit-mask: repeat-x left center / calc(var(--mm-star-size) + 2px) 100%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.5l2.9 6.3 6.6.7-4.9 4.5 1.4 6.5L12 17.2l-6 3.3 1.4-6.5L2.5 9.5l6.6-.7z'/%3E%3C/svg%3E");
  mask: repeat-x left center / calc(var(--mm-star-size) + 2px) 100%
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.5l2.9 6.3 6.6.7-4.9 4.5 1.4 6.5L12 17.2l-6 3.3 1.4-6.5L2.5 9.5l6.6-.7z'/%3E%3C/svg%3E");
}

.mm-trust__starfill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mm-star);
}

.mm-trust__count {
  font-size: 11px;
  line-height: 1;
  color: currentColor;
  opacity: 0.82;
}

/* ---------------------------------------------------------------
   Reduced motion
   Transitions collapse to zero; the metric rotation is additionally
   stopped in JS, since a paused fade would otherwise still cycle.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mm-root *,
  .mm-root *::before,
  .mm-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------------------------------------------------------------
   Availability CTA

   Both states are in the DOM at all times; only one is displayed.
   That keeps the phone number and the booking URL in the server
   response, and lets JS swap states without touching structure.
   --------------------------------------------------------------- */

.mm-cta {
  position: relative;
  flex: none;
}

/* One filled primary at every hour — only the icon, the live dot and the
   supporting line swap by availability. The old ghost-when-closed treatment is
   gone: a filled pill carries its own contrast over any hero or a stuck header,
   and the button's prominence no longer depends on the clock. */
.mm-cta__state {
  display: none;
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 11px;
  padding: 8px 20px 8px 10px;
  border-radius: var(--mm-cta-instance-radius, var(--mm-cta-radius, var(--mm-radius-btn)));
  border-style: solid;
  border-width: var(--mm-cta-instance-border-width, 1px);
  border-color: var(--mm-cta-instance-border, var(--mm-accent));
  line-height: 1.2;
  color: var(--mm-cta-instance-text, var(--mm-accent-contrast));
  background: var(--mm-cta-instance-bg, var(--mm-accent));
  box-shadow: var(--mm-cta-glow, 0 5px 18px rgba(0, 0, 0, 0.16));
  text-decoration: none;
  transition: background-color var(--mm-close-dur) var(--mm-close-ease),
              border-color var(--mm-close-dur) var(--mm-close-ease),
              box-shadow var(--mm-close-dur) var(--mm-close-ease),
              transform var(--mm-close-dur) var(--mm-close-ease);
}

/* A slow light sweep across the pill — a premium sheen that reads as
   "live/active". Clipped by the pill's overflow; skewed so the highlight
   is a diagonal band. Purely decorative and disabled under reduced motion. */
.mm-cta__state::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 70%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-16deg);
  animation: mm-cta-sheen 5.5s var(--mm-open-ease) infinite;
}

@keyframes mm-cta-sheen {
  0%   { left: -150%; opacity: 0; }
  6%   { opacity: 1; }
  40%  { left: 150%; opacity: 0; }
  100% { left: 150%; opacity: 0; }
}

.mm-cta__state.is-active {
  display: inline-flex;
}

.mm-cta__state:hover,
.mm-cta__state:focus-visible {
  background: var(--mm-accent-strong);
  border-color: var(--mm-accent-strong);
  color: var(--mm-accent-contrast);
  transform: translateY(-1px);
  box-shadow: var(--mm-cta-glow-hover, 0 9px 26px rgba(0, 0, 0, 0.22));
}

/* The icon sits in a soft circle, echoing the trust badge's provider mark. */
.mm-cta__icon {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.mm-cta__glyph {
  width: 17px;
  height: 17px;
}

.mm-cta__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

/* The outcome promise leads; the status line supports it. */
.mm-cta__head {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
}

.mm-cta__sub {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0.9;
}

/* The live presence dot is notched into the top of the icon, punched out with
   a ring in the pill color. It rides with the open state, so it shows only
   during business hours, and pulses only then — stopping under reduced motion.
   The green fill is decorative (never text), so it never risks contrast. */
.mm-cta__dot {
  position: absolute;
  top: -1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mm-proofbar-dot);
  border: 2.5px solid var(--mm-accent);
}

.mm-cta__state--open:hover .mm-cta__dot,
.mm-cta__state--open:focus-visible .mm-cta__dot {
  border-color: var(--mm-accent-strong);
}

.mm-cta__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--mm-proofbar-dot);
  opacity: 0;
  animation: mm-cta-pulse 2.4s var(--mm-open-ease) infinite;
}

@keyframes mm-cta-pulse {
  0%   { opacity: 0.65; transform: scale(0.6); }
  70%  { opacity: 0;    transform: scale(1.25); }
  100% { opacity: 0;    transform: scale(1.25); }
}

/* --- closed: book instead — same filled pill, calendar icon, an arrow --- */

/* A full arrow (shaft + head), matching the site's own "→" CTA buttons rather
   than a bare chevron: a horizontal rule (::before) capped by a 45° arrowhead
   (::after). The container carries no border, so the nudge just translates. */
.mm-cta__arrow {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 10px;
  flex: none;
  opacity: 0.9;
  transition: transform var(--mm-open-dur) var(--mm-open-ease);
  animation: mm-cta-nudge 2.8s var(--mm-open-ease) infinite;
}

.mm-cta__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
}

.mm-cta__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(1px, -50%) rotate(45deg);
}

/* Periodic forward nudge — a "book now →" motion; the arrow only translates. */
@keyframes mm-cta-nudge {
  0%, 78%, 100% { transform: translateX(0); }
  84%           { transform: translateX(3px); }
  90%           { transform: translateX(0); }
  96%           { transform: translateX(1.5px); }
}

/* On hover the periodic nudge yields to a single smooth forward shift. */
.mm-cta__state--closed:hover .mm-cta__arrow {
  animation: none;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .mm-cta__dot::after {
    animation: none;
    opacity: 0.5;
  }

  .mm-cta__state::before,
  .mm-cta__arrow {
    animation: none;
  }

  .mm-cta__state::before {
    display: none;
  }
}

/* =============================================================
   Rail layout (layout = rail)

   A category list on the left; one pane of link rows on the right;
   a two-column proof bar pinned beneath. Panes are display:none when
   inactive (out of the a11y tree and tab order) and revealed by JS.
   ============================================================= */

.mm-panel__inner--rail {
  position: relative;
  padding: 0;
  display: grid;
  grid-template-columns: var(--mm-rail-w) minmax(0, 1fr);
}

/* Full-height rail backdrop, independent of .mm-rail's own (sticky, content-
   sized) box below -- stretching .mm-rail itself to match .mm-detail's
   height would give position:sticky nowhere to travel to, since a box
   already exactly as tall as its own scroll range can't visibly stick (see
   .mm-rail's own comment). This pseudo-element carries the full-height
   background/divider look instead, sized to the same column the grid
   template already reserves, so the rail column reads as one continuous
   panel no matter how short the rail's own content is (N8). */
.mm-panel__inner--rail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mm-rail-w);
  background: var(--mm-rail-bg);
  border-right: 1px solid var(--mm-border);
}

/* ---- Category rail ---- */
/* .mm-panel (the actual scrolling ancestor -- see its own comment above) can
   grow taller than its max-height once a pane's content is long, at which
   point .mm-rail and .mm-detail previously scrolled away together as one
   grid row. Sticking the rail to the TOP of that scroll container instead
   keeps the category switcher reachable the whole time a long pane is being
   read, without changing .mm-panel's own scroll box or .mm-detail/.mm-panes
   at all (N8). align-self: start is required here, not decorative -- a grid
   item stretched to match its row's height gives position:sticky no slack
   to move within, so it silently stops sticking; the full-height backdrop
   above is what keeps the visual look this used to get for free from
   stretching. */
.mm-rail {
  position: sticky;
  top: 0;
  align-self: start;
  background: var(--mm-rail-bg);
  border-right: 1px solid var(--mm-border);
  padding: 16px 12px;
}

.mm-rail__label {
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: var(--mm-fs-kicker);
  letter-spacing: var(--mm-ls-kicker);
  text-transform: uppercase;
  color: var(--mm-text-muted);
}

.mm-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mm-rail__btn {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 10px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--mm-text-primary);
  transition: background-color var(--mm-close-dur) var(--mm-close-ease);
}

.mm-rail__btn:hover {
  background: var(--mm-row-hover-bg);
}

.mm-rail__btn[aria-expanded="true"] {
  background: var(--mm-panel-bg);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.09);
}

/* Left accent bar marks the selected category. */
.mm-rail__btn[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mm-accent);
}

.mm-rail__btn:focus-visible {
  outline: 2px solid var(--mm-accent);
  outline-offset: 2px;
}

.mm-rail__icon {
  width: 18px;
  height: 18px;
  color: var(--mm-accent);
}

.mm-rail__title {
  display: block;
  font-size: var(--mm-fs-item);
  font-weight: 600;
  line-height: 1.2;
}

.mm-rail__sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--mm-text-muted);
}

.mm-rail__arrow {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--mm-border-strong);
  border-right: 1.5px solid var(--mm-border-strong);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--mm-close-dur) var(--mm-close-ease);
}

.mm-rail__btn[aria-expanded="true"] .mm-rail__arrow {
  opacity: 1;
}

/* ---- Detail: panes + proof bar ---- */
.mm-detail {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.mm-panes {
  min-height: var(--mm-panes-minh);
}

.mm-pane {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px 0;
}

.mm-pane--active {
  display: flex;
}

/* Without JS the rail cannot switch panes, so reveal them all — every depth-2
   link stays reachable (the panel itself still opens via :focus-within). JS
   removes this by adding .mm-js and then only the active pane shows. */
.mm-root:not(.mm-js) .mm-pane {
  display: flex;
}

/* The reveal animation only runs once JS is driving the panel, so a no-JS
   render never animates a pane that is simply shown. */
.mm-root.mm-js .mm-pane--active {
  animation: mm-pane-in var(--mm-open-dur) var(--mm-open-ease) both;
}

@keyframes mm-pane-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.mm-pane__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 22px;
}

.mm-pane__grid--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- Rows with a per-item avatar ---- */
.mm-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 9px;
  transition: background-color var(--mm-close-dur) var(--mm-close-ease);
}

.mm-row:hover {
  background: var(--mm-row-hover-bg);
}

.mm-row__av {
  position: relative;
  width: var(--mm-avatar-size);
  height: var(--mm-avatar-size);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mm-accent-soft);
  border: 1px solid var(--mm-border);
  color: var(--mm-accent);
  overflow: hidden;
}

.mm-row__icon {
  width: 17px;
  height: 17px;
}

.mm-row__av--img {
  background: var(--mm-panel-bg);
}

.mm-row__av--img .mm-fav {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mm-mono {
  font-size: 13px;
  font-weight: 700;
  color: var(--mm-accent);
}

.mm-fav.is-broken {
  display: none;
}

.mm-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mm-row__head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.mm-row__link {
  font-size: var(--mm-fs-item);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-text-primary);
  transition: color var(--mm-close-dur) var(--mm-close-ease);
}

/* The link stretches to fill the whole row so the hit area matches the hover
   surface. The badge and descriptor sit above it via z-index. */
.mm-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
}

.mm-row:hover .mm-row__link {
  color: var(--mm-accent);
}

.mm-row__link:focus-visible {
  outline: none;
}

.mm-row__link:focus-visible::after {
  outline: 2px solid var(--mm-accent);
  outline-offset: 1px;
}

/* A slim tag, matching the site's mobile-menu badge: tight line-height so it is
   not a chunky pill, a small rounded rectangle rather than a full stadium, and
   the deeper accent ink. */
.mm-row__badge {
  position: relative;
  z-index: 1;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mm-accent-strong);
  background: var(--mm-accent-soft);
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* Category badge — the same slim tag, sitting inline after the rail title. */
.mm-rail__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  color: var(--mm-accent-strong);
  background: var(--mm-accent-soft);
  border-radius: 6px;
  white-space: nowrap;
}

/* Custom badge beside a top-level nav label (e.g. "4 Jobs offen"). Filled so it
   reads both on the transparent header over a hero and on the solid stuck bar.
   It sets its own color, so a theme's global link tint never reaches it. */
.mm-nav__badge {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  color: var(--mm-accent-contrast);
  background: var(--mm-accent);
  border-radius: 6px;
  white-space: nowrap;
}

.mm-row__desc {
  margin-top: 1px;
  font-size: var(--mm-fs-descriptor);
  line-height: 1.4;
  color: var(--mm-text-muted);
}

/* ---- Pane closer: full-width rule, symmetric gutters ---- */
.mm-pane__closer {
  margin-top: auto;
  padding: 14px 0 20px;
  border-top: 1px solid var(--mm-border);
  font-size: var(--mm-fs-descriptor);
  line-height: var(--mm-lh-copy);
  color: var(--mm-text-muted);
}

.mm-pane__closer a {
  white-space: nowrap;
  color: var(--mm-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mm-pane__closer a:hover,
.mm-pane__closer a:focus-visible {
  color: var(--mm-accent-strong);
}

/* =============================================================
   Rail proof bar
   ============================================================= */

.mm-proofbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 44px;
  padding: 16px 24px;
  border-top: 1px solid var(--mm-border);
  background: var(--mm-rail-bg);
  min-height: 108px;
}

.mm-proofbar__testi {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Rotating testimonial: slides stack absolutely so rotation never resizes the
   bar. Each is server-rendered; JS toggles the active slide. */
.mm-testi {
  position: relative;
  height: 100%;
  min-height: 48px;
}

.mm-testi__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--mm-metric-fade) var(--mm-open-ease),
              transform var(--mm-metric-fade) var(--mm-open-ease);
  pointer-events: none;
}

.mm-testi__slide--active {
  opacity: 1;
  transform: none;
}

/* Sized to the testimonial's text block (and the icon-led CTA pill), so the
   avatar, the value/description text and the button share one height and line
   up top and bottom across the proof-bar row. */
.mm-testi__av {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mm-panel-bg);
  border: 1px solid var(--mm-border);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.08);
}

.mm-testi__av .mm-mono {
  font-size: 20px;
}

/* A self-hosted client logo sits inside the same avatar circle, contained so
   wordmarks and square logos both read without cropping. */
.mm-testi__av--img {
  overflow: hidden;
}

.mm-testi__av--img .mm-fav {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.mm-testi__av--img .mm-fav.is-broken {
  display: none;
}

.mm-testi__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mm-testi__value {
  font-size: var(--mm-fs-metric);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.4px;
  color: var(--mm-accent);
  font-variant-numeric: tabular-nums;
}

/* Client name inline, right after the result text. */
.mm-testi__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 2px;
}

.mm-testi__desc {
  font-size: var(--mm-fs-metric-desc);
  line-height: 1.35;
  color: var(--mm-text-secondary);
}

.mm-testi__client {
  font-size: var(--mm-fs-metric-desc);
  /* Match the description's line-height. Without this the client name inherits
     the body's 24px line-height on 11.5px text, inflating the line box with
     phantom space below the text — which pushed the whole block up and left it
     looking top-heavy against the avatar. */
  line-height: 1.35;
  font-weight: 600;
  color: var(--mm-text-primary);
}

.mm-testi__client::before {
  content: "·";
  margin: 0 6px;
  font-weight: 400;
  color: var(--mm-border-strong);
}

/* ---- CTA sandwich: rating / button(s) / availability ---- */
.mm-proofbar__cta {
  flex: none;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* When there is no testimonial, the lone fixed-width CTA column centres itself
   instead of being pushed to one edge by the bar's space-between. */
.mm-proofbar__cta:only-child {
  margin-inline: auto;
}

/* The rating and availability lines are optional. With both off the CTA button
   can be the column's only child, and the column's space-between would then pin
   it to the top — leaving it higher than the testimonial's avatar and text.
   Auto block margins re-centre a lone button so the row lines up. */
.mm-proofbar__cta > .mm-btn:only-child {
  margin-top: auto;
  margin-bottom: auto;
}

.mm-proofbar__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--mm-text-secondary);
}

.mm-btn--block {
  width: 100%;
}

/* The proof-bar's primary CTA is the same component as the header pill, so it
   carries the same premium treatment: a soft glow, the light sheen sweep and a
   hover lift. The sheen is clipped by the button's own overflow. */
.mm-proofbar__cta .mm-btn--primary {
  position: relative;
  overflow: hidden;
  box-shadow: var(--mm-cta-glow, 0 5px 18px rgba(0, 0, 0, 0.16));
  transition: background-color var(--mm-close-dur) var(--mm-close-ease),
              color var(--mm-close-dur) var(--mm-close-ease),
              border-color var(--mm-close-dur) var(--mm-close-ease),
              box-shadow var(--mm-close-dur) var(--mm-close-ease),
              transform var(--mm-close-dur) var(--mm-close-ease);
}

.mm-proofbar__cta .mm-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 70%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-16deg);
  animation: mm-cta-sheen 5.5s var(--mm-open-ease) infinite;
}

.mm-proofbar__cta .mm-btn--primary:hover,
.mm-proofbar__cta .mm-btn--primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--mm-cta-glow-hover, 0 9px 26px rgba(0, 0, 0, 0.22));
}

@media (prefers-reduced-motion: reduce) {
  .mm-proofbar__cta .mm-btn--primary::before {
    animation: none;
    display: none;
  }

  .mm-proofbar__cta .mm-btn--primary:hover,
  .mm-proofbar__cta .mm-btn--primary:focus-visible {
    transform: none;
  }
}

.mm-proofbar__avail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--mm-text-secondary);
}

.mm-proofbar__availtext {
  display: none;
  align-items: center;
  gap: 7px;
}

.mm-proofbar__availtext.is-active {
  display: inline-flex;
}

.mm-proofbar__availtext--open .mm-proofbar__availlabel {
  font-weight: 600;
  color: var(--mm-accent-strong);
}

.mm-proofbar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mm-border-strong);
  flex: none;
}

.mm-proofbar__dot--open {
  position: relative;
  /* Decorative "open" indicator — a brand can tint it (e.g. green) via
     --mm-proofbar-dot without risking text contrast, since it carries no text. */
  background: var(--mm-proofbar-dot, var(--mm-accent));
}

.mm-proofbar__dot--open::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--mm-proofbar-dot, var(--mm-accent));
  opacity: 0;
  animation: mm-cta-pulse 2.4s var(--mm-open-ease) infinite;
}

/* =============================================================
   Header mode (opt-in full header: logo + sticky + inverse)
   ============================================================= */

.mm-header {
  /* Pinning is opt-in — only a header rendered with data-mm-sticky sticks; the
     bar styling below applies either way. */
  position: static;
  /* When the header is sticky (below), this z-index establishes its stacking
     context. It sits high on purpose: the panel (.mm-panel, z-index:999) is
     absolutely positioned INSIDE the header, so it can never rise above this
     context's level. Page builders routinely stack sections in the tens of
     thousands (e.g. Elementor ~99999), which would otherwise cover an open
     panel. Kept below typical cookie-consent / modal overlays (~999998+) so
     those still gate correctly. On a non-sticky header this value is inert
     (z-index has no effect on a statically positioned box). */
  z-index: 999900;
  color: var(--mm-header-color);
  background: var(--mm-header-bg);
  transition: background-color 0.22s var(--mm-open-ease),
              box-shadow 0.22s var(--mm-open-ease),
              color 0.22s var(--mm-open-ease);
}

.mm-header[data-mm-sticky] {
  position: sticky;
  top: 0;
}

.mm-header.is-stuck {
  color: var(--mm-header-stuck-color);
  background: var(--mm-header-stuck-bg);
  box-shadow: 0 1px 0 var(--mm-border), 0 6px 20px -12px rgba(16, 24, 32, 0.3);
}

.mm-header__in {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: var(--mm-header-max-w);
  min-height: var(--mm-header-h);
  margin: 0 auto;
  padding: 0 24px;
}

/* The nav actions push to the right of the bar. */
.mm-header__in .mm-header__actions {
  margin-left: auto;
}

.mm-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.mm-logo__img {
  display: block;
  height: var(--mm-logo-h);
  width: auto;
}

/* The inverse image shows only once the header sticks. */
.mm-logo__img--inverse {
  display: none;
}

/* Swap to the inverse logo only when one is configured — otherwise the single
   logo must stay visible while stuck (scoped via the has-inverse marker). */
.mm-header--has-inverse.is-stuck .mm-logo__img--default {
  display: none;
}

.mm-header--has-inverse.is-stuck .mm-logo__img--inverse {
  display: block;
}

/* -------------------------------------------------------------------------
   Responsive header
   -------------------------------------------------------------------------
   The bar carries the logo, the nav, an optional review badge and the CTA on a
   single row. As the viewport narrows toward the configured breakpoint these
   would otherwise overflow — pushing the CTA off the right edge and forcing a
   horizontal scrollbar. Instead the row degrades gracefully: first the review
   COUNT drops (a compact "mark + rating + stars" badge), then the whole badge,
   then the CTA's availability sub-line, then spacing tightens. Only the ranges
   ABOVE the breakpoint are ever reached — the stylesheet is media-gated to
   min-width:breakpoint — so a site with a high breakpoint never triggers the
   tighter tiers, and a low breakpoint (e.g. 900) still fits without bleed.

   Thresholds are tuned so the *widest* configuration (logo + three nav items +
   full badge + availability CTA) stops before it can overflow. */
.mm-header__actions {
  min-width: 0;
}

/* Scoped to .mm-header__actions specifically, not the bare .mm-trust/
   .mm-trust__count/.mm-cta__sub classes: those same classes are also used
   by the standalone [aamenu_rating]/[aamenu_phone] embeds (embed.css),
   which — being body content, not a fixed-width header row — must never
   be narrowed by a constraint that exists purely to keep the header from
   overflowing. embed.css loads after this file, so an unscoped rule here
   would have been silently overridden for the header's own badge/CTA on
   any page that also has an embed; scoping is what actually keeps this
   file's own degradation ladder in effect regardless of load order. */
@media (max-width: 1200px) {
  .mm-header__in {
    gap: 20px;
  }
  .mm-header__actions .mm-trust {
    gap: 6px;
  }
  .mm-header__actions .mm-trust__count {
    display: none;
  }
}

@media (max-width: 1060px) {
  .mm-header__actions .mm-trust {
    display: none;
  }
}

@media (max-width: 1010px) {
  .mm-header__in {
    gap: 16px;
  }
  .mm-header__actions .mm-cta__sub {
    display: none;
  }
}

@media (max-width: 970px) {
  .mm-header__in {
    gap: 12px;
    padding: 0 14px;
  }
  .mm-nav__link {
    padding-left: 8px;
    padding-right: 8px;
  }
}