/* ================================================================
 * Meta Mint — header (utility strip + menu bar) and hero slider.
 *
 * Written as real components rather than Tailwind utilities because
 * main.css is PRE-BUILT from the original static template: any class
 * that template never used emits no rule at all, so an arbitrary
 * value like `w-[692px]` or `z-[9999]` silently does nothing.
 *
 * Scope is deliberately narrow — `.mm-*` classes plus the hooks
 * main.js already toggles (`.header-six-scroll` on the bar,
 * `.dropdown-menu` / `.nav-item.active` on the menus, `.sidebar` for
 * the mobile drawer). Nothing here touches the rest of the site.
 *
 * Loaded after main.css and extra.css by layouts/website.blade.php.
 * ================================================================ */

/* Inter for the header menu (self-hosted, latin subset). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mm-brand:      #2462b7;
  --mm-brand-dark: #17417f;
  --mm-brand-lit:  #2d8cff;
  --mm-cyan:       #36d1dc;

  --mm-ink:        #131a26;
  --mm-ink-mute:   #5b6779;
  --mm-line:       #e6eaf1;

  --mm-panel:      #ffffff;
  --mm-panel-line: #e6eaf1;
  --mm-panel-hover:#f3f6fa;
  --mm-panel-ink:  #101828;
  --mm-panel-mute: #667085;
  --mm-panel-shadow: 0 28px 70px -24px rgba(11, 22, 44, .38),
                     0 6px 18px -10px rgba(11, 22, 44, .14);

  --mm-bar-h:      58px;

  /* Logo colours: the blue of the "M" bars and the cyan of the tick. */
  --mm-logo-blue:  #2462b7;
  --mm-logo-cyan:  #1cdbe6;

  /* Brand gradient for primary buttons and the menu hover pill: logo blue
     into cyan, like the mark itself. The cyan end is deepened (#1c9fd6) so
     white text keeps its contrast across the whole pill. */
  --mm-brand-gradient: linear-gradient(100deg, var(--mm-logo-blue) 0%, var(--mm-logo-blue) 38%, #1c9fd6 100%);
  --mm-nav-hover-bg:   var(--mm-brand-gradient);
}

@media (min-width: 1280px) {
  :root { --mm-bar-h: 64px; }
}

/* ----------------------------------------------------------------
 * Page scrollbar: the homepage's slim dark bar, brand gradient on hover,
 * now on every public page. It used to live in home-experience.css, which
 * only loads on the homepage, so every other page fell back to the
 * browser's wide grey bar.
 *
 * Chrome 121+ ignores every ::-webkit-scrollbar rule on an element that
 * also has the standard scrollbar-color, so that pair is kept to browsers
 * with no ::-webkit-scrollbar at all (Firefox, which has no gradients).
 * ---------------------------------------------------------------- */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: #1A2F52 #030B17; }
}
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #030B17; }
::-webkit-scrollbar-thumb { border-radius: 4px; background: linear-gradient(180deg, #15304F 0%, #1A2A55 55%, #221F4D 100%); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #36D1DC 0%, #2D8CFF 55%, #7B61FF 100%); }
::-webkit-scrollbar-corner { background: #030B17; }

/* ================================================================
 * 1. Glass header shell + utility strip
 * ================================================================ */

/* Fixed rather than sticky so the hero image runs full-bleed underneath it
   and the glass has something to refract. The tint is deliberately dark
   enough to stay legible on the three pages that open on a light section
   (FAQs, Privacy, Terms) as well as over the dark heroes everywhere else. */
/* The shell carries only the blur and the drop shadow. The two rows paint
   their own backgrounds over that blurred backdrop, which is what lets the
   strip read as deep navy while the bar below stays glassy. */
.mm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .8);
  transition: box-shadow .35s ease;
}

.mm-header.header-six-scroll {
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .9);
}

/* --- Utility strip ---------------------------------------------- */

.mm-topbar {
  position: relative;
  overflow: hidden;
  height: 34px;
  background: linear-gradient(180deg, rgba(52, 68, 90, .92) 0%, rgba(25, 38, 58, .96) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .72);
  font-size: .75rem;
  line-height: 1;
  transition: height .35s ease, opacity .3s ease;
}

/* One thin highlight along the top edge, and a short falloff beneath it —
   enough to read as polished glass without turning glossy. */
.mm-topbar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Past the scroll threshold the strip folds away and only the menu bar is
   left — the header takes back 36px of the viewport once you are reading. */
.mm-header.header-six-scroll .mm-topbar { height: 0; opacity: 0; }

/* Below the desktop breakpoint the strip has nowhere to go without
   wrapping into a second and third row, so it is dropped entirely —
   every value in it also lives in the footer and on the contact page. */
@media (max-width: 1023px) { .mm-topbar { display: none; } }

.mm-topbar__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 34px;
}

.mm-topbar__group { display: flex; align-items: center; min-width: 0; }

.mm-topbar__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  white-space: nowrap;
  color: inherit;
  transition: color .22s ease;
}

.mm-topbar__group > .mm-topbar__item:first-child { padding-left: 0; }
.mm-topbar__group > .mm-topbar__item:last-child  { padding-right: 0; }

.mm-topbar__item + .mm-topbar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, .22);
}

a.mm-topbar__item:hover { color: #fff; }

.mm-topbar svg { flex: 0 0 auto; width: 13px; height: 13px; opacity: .6; }

/* Two phones on the left, email then social on the right. The second phone is
   the first thing to go when the row runs out of room — the main number and
   the email both stay. */
@media (max-width: 1279px) {
  .mm-topbar__group > .mm-topbar__item:nth-child(2) { display: none; }
}

.mm-topbar__social { display: inline-flex; align-items: center; gap: 3px; padding-left: 14px; }

.mm-topbar__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .85);
  transition: background-color .22s ease, color .22s ease;
}

.mm-topbar__social a:hover { background: #fff; color: #19263a; }
.mm-topbar__social svg { width: 11px; height: 11px; opacity: 1; }

/* ================================================================
 * 2. Menu bar
 * ================================================================ */

.mm-bar {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 34, 56, .80) 0%, rgba(13, 24, 42, .74) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  transition: background-color .35s ease;
}

.mm-header.header-six-scroll .mm-bar {
  background: linear-gradient(180deg, rgba(10, 20, 36, .92) 0%, rgba(8, 16, 30, .88) 100%);
}

/* `justify-between` on three items parked the nav in the middle of the bar and
   left a wide hole after the logo. The nav now follows the logo directly and
   the actions are pushed out on their own. */
.mm-bar__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: var(--mm-bar-h);
  transition: height .35s ease;
}

.mm-header.header-six-scroll .mm-bar__inner { height: 56px; }

.mm-header__brand { display: flex; align-items: center; flex: 0 0 auto; }
.mm-header__brand img { width: 100%; height: auto; }
.mm-header__logo { display: flex; width: 138px; }

@media (min-width: 1280px) { .mm-header__logo { width: 154px; } }

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

/* ================================================================
 * 3. Desktop navigation
 * ================================================================ */

.mm-nav { display: none; }

/* Same menu on every page (it was the homepage's design first): flat links
   pushed to the right, no capsule, no dropdown arrows, logo-gradient pill on
   hover. Dropdowns still open on hover (main.js). */
@media (min-width: 1280px) {
  .mm-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
  }
  .mm-header__actions { margin-left: 0; }
}

.mm-nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-nav__item { position: relative; display: flex; align-items: center; }

.mm-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .7rem .85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 500 .9rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgba(234, 242, 255, .74);
  cursor: pointer;
  transition: color .3s, background-color .3s, box-shadow .3s;
}

/* Hover / open-dropdown pill: the logo gradient (--mm-nav-hover-bg). */
.mm-nav__link:hover,
.mm-nav__link:focus-visible,
.mm-nav__item.active > .mm-nav__link,
.mm-nav__item.menu-active > .mm-nav__link {
  color: #fff;
  background: var(--mm-nav-hover-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px -8px rgba(28, 219, 230, .55);
}

/* Current section: brighter label, no filled pill. */
.mm-nav__link.is-current { color: #fff; }

.mm-nav__link .nav-arrow { display: none; }

/* Primary v3 buttons (header CTA, hero, modal) in the logo gradient, with a
   soft cyan glow. main.css only sets a flat background-color. */
.btn-v3-primary {
  background-image: var(--mm-brand-gradient);
  box-shadow: 0 10px 26px -12px rgba(28, 219, 230, .6);
  transition: box-shadow .3s ease;
}
.btn-v3-primary:hover { box-shadow: 0 14px 32px -12px rgba(28, 219, 230, .8); }

/* Invisible strip bridging the gap between the pill and an open panel, so the
   pointer can travel down without the menu closing. main.js flips its opacity
   and pointer-events by class. */
.mm-bridge {
  position: absolute;
  left: -20px;
  right: -20px;
  top: 100%;
  height: 26px;
  background: transparent;
}

/* ================================================================
 * 4. Dropdown panels
 * ================================================================ */

/* Anchored to the left edge of its own nav item, not centred on it.
   Centring worked while the nav sat mid-bar, but once the menu moved left the
   660px Company panel resolved to a negative left offset and hung off the
   side of the viewport. Left-anchoring is stable at every width; the last
   item flips to `--end` because it is the one that would run off the right. */
.mm-menu {
  position: absolute;
  top: 100%;
  left: 0;
  translate: 0 0;
  /* Clears the nav capsule's own padding plus a breathing gap, so the panel
     hangs below the header rather than below the pill. */
  margin-top: 22px;
  max-width: calc(100vw - 32px);
  padding: 10px;
  border-radius: 22px;
  border: 1px solid var(--mm-panel-line);
  background: var(--mm-panel);
  box-shadow: var(--mm-panel-shadow);
  text-align: left;
}

/* Right-anchored variant for the last item in the bar. */
.mm-menu--end { left: auto; right: 0; }

.mm-menu--company  { width: 660px; }
.mm-menu--products { width: 620px; }
.mm-menu--services { width: 620px; }
.mm-menu--engage   { width: 320px; }

.mm-menu__label {
  padding: 6px 12px 8px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #98a2b3;
}

.mm-menu__list { margin: 0; padding: 0; list-style: none; }

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

.mm-menu__link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color .2s ease;
}

.mm-menu__link:hover { background: var(--mm-panel-hover); }

.mm-menu__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--mm-panel-line);
  background: #fff;
  color: var(--mm-brand);
  transition: color .25s ease, border-color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.mm-menu__icon svg { width: 17px; height: 17px; }

/* Hovered / focused link: the icon takes the logo gradient of the menu
   hover pill and Request a Demo button, with a white icon. */
.mm-menu__link:hover .mm-menu__icon,
.mm-menu__link:focus-visible .mm-menu__icon {
  background: var(--mm-nav-hover-bg);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 10px 20px -8px rgba(28, 159, 214, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.mm-menu__title {
  display: block;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mm-panel-ink);
}

.mm-menu__desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--mm-panel-mute);
}

.mm-menu__desc--wrap { -webkit-line-clamp: 2; }

.mm-menu__foot {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--mm-panel-line);
}

.mm-menu__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mm-brand);
}

.mm-menu__more svg { width: 14px; height: 14px; transition: transform .25s ease; }
.mm-menu__more:hover svg { transform: translateX(3px); }

.mm-menu__empty { padding: 18px 12px; font-size: .875rem; color: var(--mm-panel-mute); }

/* Company panel — links on the left, a promo tile on the right. */
.mm-menu__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
}

.mm-promo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  min-height: 236px;
  background: #0b1728;
}

.mm-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.mm-promo:hover img { transform: scale(1.06); }

.mm-promo__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(5, 13, 26, .92), rgba(5, 13, 26, 0));
  color: #fff;
}

.mm-promo__title { display: block; font-size: .875rem; font-weight: 600; }
.mm-promo__text  { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }

/* ================================================================
 * 5. Bar CTA, hamburger, mobile drawer
 * ================================================================ */

/* The bar CTA is an <x-v3-button>, so its look comes from the template's own
   btn-v3 classes and its hover from main.js. Only the responsive show/hide and
   a lift on the glass belong here. */
.mm-cta { display: none; }

@media (min-width: 640px) { .mm-cta { display: block; } }

/* btn-v3-md is built for a taller bar. Same button, dialled down to sit
   comfortably in a 64px header. */
.mm-cta [data-button-v3-icon] { width: 34px; height: 34px; padding: 8px; }
.mm-cta [data-button-v3-icon] svg { width: 18px; height: 18px; }
.mm-cta .mm-v3__row { gap: 10px; }
.mm-cta [data-button-v3-text] { padding-right: 14px; font-size: .875rem; }

.mm-cta,
.mm-hero__actions [data-button-v3] {
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .9);
  transition: transform .25s ease, box-shadow .25s ease;
}

.mm-cta:hover,
.mm-hero__actions [data-button-v3]:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .95);
}

.mm-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}

.mm-burger:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .34); }
.mm-burger span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: #fff; }
.mm-burger span:nth-child(3) { width: 12px; }

@media (min-width: 1280px) { .mm-burger { display: none; } }

/* Mobile drawer stacking. The markup asks for `z-[9999]`, but main.css is
   pre-built from a template that never used that value, so the utility emits
   no rule and the drawer shipped with no stacking order — every positioned
   section further down the document painted straight over it. */
.sidebar {
  z-index: 9999;
  box-shadow: -30px 0 70px -24px rgba(6, 14, 28, .45);
}

/* ================================================================
 * 6. Hero slider
 * ================================================================ */

.mm-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Column, not row: below 1024px the stat band is an in-flow sibling of the
     copy and a row would stand the two side by side. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* Top padding clears the fixed glass header (34px strip + 58–64px bar). */
  padding: 116px 0 0;
  background: #061426;
}

@media (min-width: 1024px) {
  .mm-hero {
    min-height: min(100vh, 820px);
    /* Bottom padding reserves the space the absolutely-positioned stat band
       occupies, so the copy never sits underneath it. */
    padding: 150px 0 140px;
  }
}

/* --- Full-bleed image ------------------------------------------- */

.mm-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mm-hero__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Weighted right so the subject stays clear of the copy column, which the
     scrim darkens on the left. */
  object-position: 72% center;
  animation: mm-ken 11s ease-out both;
}

@keyframes mm-ken {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Two stacked gradients: one across, to hold the copy column readable over
   whatever the slide image happens to be; one down, to seat the header at the
   top and the slider controls at the bottom. */
.mm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(4, 13, 28, .95) 0%,
      rgba(4, 13, 28, .90) 26%,
      rgba(4, 13, 28, .66) 48%,
      rgba(4, 13, 28, .36) 72%,
      rgba(4, 13, 28, .24) 100%),
    linear-gradient(180deg,
      rgba(4, 13, 28, .66) 0%,
      rgba(4, 13, 28, .14) 22%,
      rgba(4, 13, 28, .14) 62%,
      rgba(4, 13, 28, .66) 100%),
    /* A flat brand-tinted wash so a bright product screenshot still reads as
       part of the page rather than a pasted-in picture. */
    linear-gradient(0deg, rgba(9, 38, 82, .34), rgba(9, 38, 82, .34));
}

/* Stacked layout has no copy column to protect, so the scrim goes flat and
   heavier — the text sits over the middle of the picture. */
@media (max-width: 1023px) {
  .mm-hero__scrim {
    background: linear-gradient(180deg,
      rgba(4, 13, 28, .88) 0%,
      rgba(4, 13, 28, .74) 45%,
      rgba(4, 13, 28, .9) 100%);
  }

  .mm-hero__shot { object-position: 60% center; }
}

.mm-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 62%);
}

.mm-hero__inner { position: relative; z-index: 3; width: 100%; }

.mm-hero__copy { max-width: 620px; }
/* --- Copy -------------------------------------------------------- */

.mm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px 7px 14px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.mm-hero__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-cyan);
  box-shadow: 0 0 0 4px rgba(54, 209, 220, .18);
}

.mm-hero__title {
  margin-top: 16px;
  font-size: clamp(1.95rem, 1.05rem + 2.6vw, 3.05rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: #fff;
  text-wrap: balance;
}

.mm-hero__desc {
  margin-top: 18px;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.mm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* The hero CTAs are <x-v3-button>s — the same pill-and-badge button as the
   enquiry modal — so their colour and sizing come from the template's btn-v3
   classes. Only the stacking behaviour is set here.

   The pills keep their natural width when stacked rather than going full
   bleed: the badge animation slides across the button's own width, and a
   stretched pill makes that travel look arbitrary. */
@media (max-width: 479px) {
  .mm-hero__actions { flex-direction: column; align-items: flex-start; }
}

/* --- Stat band --------------------------------------------------- */

/* Pinned to the foot of the hero on desktop so it reads as the base of the
   banner. Absolute rather than in flow, so it does not pull the copy off
   centre; the section reserves room for it with its bottom padding. */
.mm-hero__stats {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(4, 12, 26, .1) 0%, rgba(4, 12, 26, .55) 100%);
}

@media (min-width: 1024px) {
  .mm-hero__stats {
    position: absolute;
    inset: auto 0 0 0;
    margin-top: 0;
  }
}

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

@media (min-width: 768px) {
  .mm-hero__stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mm-hero__stat { padding: 20px 0 22px; }

.mm-hero__stat + .mm-hero__stat {
  padding-left: 26px;
  border-left: 1px solid rgba(255, 255, 255, .13);
}

/* On the two-up layout the third cell starts a new row, so it must not carry
   a divider on its left edge. */
@media (max-width: 767px) {
  .mm-hero__stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .mm-hero__stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .13); }
}

.mm-hero__stat-value {
  font-size: clamp(1.55rem, 1.1rem + 1.3vw, 2.15rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
}

.mm-hero__stat-label {
  margin-top: 5px;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .62);
}

/* --- Controls ---------------------------------------------------- */

.mm-hero__controls {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

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

.mm-dot {
  position: relative;
  width: 24px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
  transition: width .35s ease, background-color .35s ease;
}

.mm-dot:hover { background: rgba(255, 255, 255, .5); }
.mm-dot.is-active { width: 54px; background: rgba(255, 255, 255, .28); }

.mm-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: #fff;
  animation: mm-dot-fill 5.5s linear forwards;
}

.mm-hero.is-paused .mm-dot.is-active::after { animation-play-state: paused; }

@keyframes mm-dot-fill {
  from { width: 0; }
  to   { width: 100%; }
}

.mm-count {
  font-size: .8125rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .55);
}

.mm-count b { font-weight: 600; color: #fff; }

.mm-arrows { display: flex; gap: 8px; margin-left: auto; }

.mm-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.mm-arrow:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }
.mm-arrow:active { transform: scale(.94); }
.mm-arrow svg { width: 18px; height: 18px; }

/* ================================================================
 * 7. Inner-page hero (breadcrumb band)
 *
 * Drives <x-page-hero>. The markup it replaced put the breadcrumb pill and
 * the intro paragraph in one `justify-between` row; the pill is a `.badge`,
 * which main.css gives `text-wrap: nowrap`, so a long crumb such as
 * "Digital Marketing & SEO Services" could not shrink and collided with the
 * paragraph next to it. Here the trail, the title and the copy are three
 * stacked rows — nothing can run into anything else at any width.
 * ================================================================ */

.mm-phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #061426;
  background-image: var(--mm-phero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Top padding clears the fixed glass header (34px strip + 58–64px bar). */
  padding: 128px 0 44px;
}

@media (min-width: 768px) {
  .mm-phero { padding: 152px 0 56px; }
}

@media (min-width: 1024px) {
  .mm-phero {
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    padding: 184px 0 68px;
  }
}

/* Weighted to the lower left, which is where every line of copy sits. */
.mm-phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(4, 13, 28, .93) 0%,
      rgba(4, 13, 28, .84) 40%,
      rgba(4, 13, 28, .56) 72%,
      rgba(4, 13, 28, .42) 100%),
    linear-gradient(180deg,
      rgba(4, 13, 28, .74) 0%,
      rgba(4, 13, 28, .30) 42%,
      rgba(4, 13, 28, .78) 100%),
    linear-gradient(0deg, rgba(9, 38, 82, .32), rgba(9, 38, 82, .32));
}

@media (max-width: 1023px) {
  .mm-phero__scrim {
    background: linear-gradient(180deg,
      rgba(4, 13, 28, .86) 0%,
      rgba(4, 13, 28, .70) 45%,
      rgba(4, 13, 28, .88) 100%);
  }
}

.mm-phero__mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 46%, transparent 68%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .3) 46%, transparent 68%);
}

/* Decorative echo of the page name. Parked bottom-right, clear of the copy
   column, and clipped by the section rather than allowed to widen the page. */
.mm-phero__ghost {
  position: absolute;
  right: 0;
  bottom: -.16em;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  font-size: clamp(88px, 13vw, 190px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, .085);
}

@media (max-width: 1023px) {
  .mm-phero__ghost { display: none; }
}

.mm-phero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* --- Copy --------------------------------------------------------- */

.mm-phero__title {
  margin: 16px 0 0;
  max-width: 900px;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.mm-phero__desc {
  margin: 14px 0 0;
  max-width: 640px;
  color: rgba(255, 255, 255, .74);
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .mm-phero__desc { font-size: .9375rem; }
}

/* ================================================================
 * 8. Breadcrumb trail
 *
 * Drives <x-breadcrumbs>, inside the hero above and standalone on the pages
 * that open on a white section. A wrapping <ol> rather than the old
 * `.badge` span: main.css gives every badge `text-wrap: nowrap`, so a crumb
 * as long as "Digital Marketing & SEO Services" could not shrink and ran
 * into whatever sat beside it.
 * ================================================================ */

.mm-crumbs {
  display: inline-flex;
  max-width: 100%;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.mm-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.5;
}

.mm-crumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.mm-crumbs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .66);
  text-decoration: none;
  transition: color .2s ease;
}

.mm-crumbs__link:hover { color: #fff; }

.mm-crumbs__home {
  position: relative;
  top: -1px;
  flex: none;
}

.mm-crumbs__sep {
  padding: 0 9px;
  color: rgba(255, 255, 255, .38);
}

/* The current page is the crumb that can run long, so it is the one allowed
   to wrap onto a second line inside the pill. */
.mm-crumbs__current {
  min-width: 0;
  color: #fff;
  font-weight: 600;
}

/* --- Light pages (FAQs, Privacy, Terms) --------------------------- */

.mm-crumbs--light {
  border-color: var(--mm-line);
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}

.mm-crumbs--light .mm-crumbs__link { color: var(--mm-ink-mute); }
.mm-crumbs--light .mm-crumbs__link:hover { color: var(--mm-brand); }
.mm-crumbs--light .mm-crumbs__sep { color: rgba(91, 103, 121, .5); }
.mm-crumbs--light .mm-crumbs__current { color: var(--mm-ink); }

/* ================================================================
 * 9. Portfolio grid
 *
 * The screenshots carried over from the old site are square, portrait and
 * landscape in roughly equal measure — a fixed-ratio grid cut the tall ones
 * in half, so the layout is CSS columns and every shot stays whole.
 * ================================================================ */

/* --- Filters ----------------------------------------------------- */

/* Carried over from the old site's portfolio filter: a white card with a
   solid accent bar down its left edge, holding squared tabs that are tinted
   when idle and solid brand blue when chosen. The structure and proportions
   are the originals (10px card padding, 4px rule, 5px radius, ~41px tabs);
   the colour comes from this site's palette rather than the legacy indigo. */
.mm-work__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 38px;
  padding: 8px;
  border: 1px solid var(--mm-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px 0 rgba(20, 3, 67, .08);
}

.mm-work__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 41px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(36, 98, 183, .1);
  color: #8895a7;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.mm-work__filter:hover,
.mm-work__filter.is-active {
  background: var(--mm-brand);
  color: #fff;
  box-shadow: 0 15px 30px 0 rgba(36, 98, 183, .18);
}

.mm-work__filter.is-active { cursor: default; }

/* The old site had no counts. These are kept because they are genuinely
   useful, but held back so the label stays the thing you read first. */
.mm-work__count {
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

/* Matches how the original stepped the tabs down on small screens. */
@media (max-width: 580px) {
  .mm-work__filters {
    width: 100%;
    gap: 6px;
    padding: 8px;
  }

  .mm-work__filter {
    height: 36px;
    padding: 0 16px;
    font-size: .8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-work__filter { transition: none; }
}

/* --- Grid -------------------------------------------------------- */

/* Row-major grid, so the first three projects read left-to-right across the
   top row. CSS columns used to do this job, but they fill column one top to
   bottom first, which buried items 2 and 3 a full screen below item 1. Every
   tile is the same square -- see .mm-work__shot for how the varying source
   sizes are reconciled. */
/* minmax(0, 1fr), not 1fr: the one-line titles and address bars are nowrap,
   and a bare 1fr would let their full width push a column past the others. */
.mm-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

@media (min-width: 640px)  { .mm-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mm-work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Each card is a framed browser window: a slim address bar, the shot, then a
   caption bar of its own. The caption used to be overlaid on the shot, where
   it collided with the client site's own hero headline. A 1px gradient ring
   (the ::before mask) lights up in the brand colours on hover. */
.mm-work__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  box-shadow:
    0 0 0 1px var(--mm-line),
    0 1px 2px 0 rgba(16, 24, 40, .05),
    0 12px 28px -18px rgba(11, 22, 44, .22);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

.mm-work__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--mm-logo-blue) 0%, #1c9fd6 50%, var(--mm-logo-cyan) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

.mm-work__item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px transparent,
    0 34px 60px -30px rgba(23, 65, 127, .45),
    0 18px 36px -24px rgba(28, 159, 214, .35);
}

.mm-work__item:hover::before { opacity: 1; }

.mm-work__item[hidden] { display: none; }

/* The whole window is the lightbox trigger. */
/* The radius is the card's 22px less its 8px padding, so the two curves stay
   concentric. The background matches the address bar: anything darker bleeds
   through the anti-aliased rounded corners as a dark fringe. */
.mm-work__open {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: #f1f4f9;
  box-shadow: 0 0 0 1px #e3e8f0;
  cursor: pointer;
}

/* --- Address bar --- */
.mm-work__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 12px;
  background: #f1f4f9;
  border-bottom: 1px solid #e3e8f0;
}

.mm-work__dots {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.mm-work__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5dbe5;
  transition: background-color .35s ease;
}

.mm-work__item:hover .mm-work__dots i:nth-child(1) { background: #ff5f57; }
.mm-work__item:hover .mm-work__dots i:nth-child(2) { background: #febc2e; }
.mm-work__item:hover .mm-work__dots i:nth-child(3) { background: #28c840; }

.mm-work__url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  max-width: 260px;
  height: 22px;
  margin: 0 auto;
  padding: 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e8f0;
  color: #6b778a;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mm-work__url svg { flex: none; color: #22a06b; }

/* --- Shot --- */

/* A fixed 4:3 frame, so the grid stays even whatever the source file is
   (800x800 up to 1000x1463). `cover` + a top anchor shows the header and
   hero -- the part that identifies the site. On hover the anchor glides to
   the bottom, so the visitor sees the page scroll as if it were live. The
   lightbox still opens the full, uncropped image. */
.mm-work__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mm-panel-hover);
}

.mm-work__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: object-position 2.6s cubic-bezier(.45, .05, .35, 1);
}

.mm-work__item:hover .mm-work__shot img { object-position: center bottom; }

/* A soft navy wash and a centred pill, so the hover reads as "open me"
   without hiding the work behind a slab of text. */
.mm-work__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 28, 0) 40%, rgba(7, 14, 28, .45) 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

.mm-work__item:hover .mm-work__shot::after,
.mm-work__open:focus-visible .mm-work__shot::after { opacity: 1; }

.mm-work__peek {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(11, 22, 44, .62);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.mm-work__item:hover .mm-work__peek,
.mm-work__open:focus-visible .mm-work__peek {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Touch has no hover to scroll or reveal with: the shot stays at the top
   and the visit button below does the talking. */
@media (hover: none) {
  .mm-work__item:hover { transform: none; }
  .mm-work__item:hover .mm-work__shot img { object-position: center top; }
  .mm-work__peek,
  .mm-work__shot::after { display: none; }
}

/* --- Lightbox ---------------------------------------------------- */

/* Set on <body> while the viewer is up: without it the grid keeps scrolling
   under the overlay on both desktop and touch. */
body.mm-lightbox-open { overflow: hidden; }

/* The floating "Request a demo" rail is fixed at z-index 99999 and centred on
   the same vertical axis as the lightbox's next arrow, so it sat on top of
   that arrow. This is a modal dialog, so the rail is hidden outright while it
   is open -- that also takes the button out of the tab order. */
body.mm-lightbox-open .mm-demo-rail { display: none; }

.mm-lightbox {
  position: fixed;
  inset: 0;
  /* Above the demo rail (99999), the mobile menu and the toaster (9999). */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 84px;
  background: rgba(8, 13, 24, .88);
  backdrop-filter: blur(4px);
  animation: mm-lightbox-in .2s ease both;
}

.mm-lightbox[hidden] { display: none; }

@keyframes mm-lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mm-lightbox__stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  max-width: min(1040px, 100%);
  max-height: 100%;
}

.mm-lightbox__stage img {
  display: block;
  /* Fits the viewport rather than the intrinsic size: the screenshots run to
     1000px+ tall and would otherwise overflow the overlay. */
  max-width: 100%;
  max-height: calc(100vh - 210px);
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}

.mm-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  text-align: center;
  color: #fff;
}

.mm-lightbox__title {
  font-size: 17px;
  font-weight: 600;
}

.mm-lightbox__cat {
  font-size: 14px;
  color: rgba(255, 255, 255, .62);
}

.mm-lightbox__visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  transition: background-color .25s ease, border-color .25s ease;
}

.mm-lightbox__visit:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}

.mm-lightbox__visit[hidden] { display: none; }

.mm-lightbox__close,
.mm-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}

.mm-lightbox__close:hover,
.mm-lightbox__nav:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .45);
}

.mm-lightbox__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
}

.mm-lightbox__nav {
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.mm-lightbox__nav[hidden] { display: none; }

.mm-lightbox__nav--prev { left: 16px; }
.mm-lightbox__nav--next { right: 16px; }

.mm-lightbox__counter {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .7);
}

/* Below the arrows' own width the stage has nowhere to go, so they move off
   the sides and sit beside the counter. */
@media (max-width: 640px) {
  .mm-lightbox { padding: 60px 12px 92px; }
  .mm-lightbox__stage img { max-height: calc(100vh - 230px); }
  .mm-lightbox__nav { top: auto; bottom: 18px; width: 42px; height: 42px; transform: none; }
  .mm-lightbox__nav--prev { left: 22%; }
  .mm-lightbox__nav--next { right: 22%; }
  .mm-lightbox__counter { bottom: 30px; }
}

/* --- Caption ----------------------------------------------------- */

/* Its own bar beneath the window -- always visible, always legible, never
   fighting the screenshot. The lightbox reads the title and category nodes. */
.mm-work__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 10px 10px 12px;
}

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

.mm-work__cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px;
  color: var(--mm-brand);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-work__cat::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mm-logo-blue), var(--mm-logo-cyan));
}

/* One line, ellipsised: client names run from "Medi Blaze" to "Socio
   Cultural Society of Bishnupriya Manipuri", and a single line keeps every
   card in a row the same height. The full name is in the title attribute
   and in the lightbox. */
.mm-work__title {
  margin: 0;
  overflow: hidden;
  color: var(--mm-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mm-work__title a {
  color: inherit;
  text-decoration: none;
}

.mm-work__title a:hover { color: var(--mm-brand); }

/* "Read case study" under the title, only on projects that have one. */
.mm-work__case {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--mm-brand);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}

.mm-work__case svg { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.mm-work__case:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-work__case:hover svg { transform: translateX(3px); }
.mm-work__case:focus-visible { outline: 2px solid var(--mm-brand); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .mm-work__case svg { transition: none; } }

.mm-work__visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef3fa;
  color: var(--mm-brand);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}

.mm-work__visit svg { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }

.mm-work__item:hover .mm-work__visit {
  background: var(--mm-brand-gradient);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(36, 98, 183, .7);
}

.mm-work__visit:hover svg { transform: rotate(45deg); }

/* Visually hidden but read aloud — the visit button is an icon, and main.css
   ships no sr-only utility. */
.sr-only-mm {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mm-work__empty {
  padding: 56px 0;
  text-align: center;
  color: var(--mm-ink-mute);
}

/* --- Homepage "All Services" tile -------------------------------- */
.mm-all-services {
  position: relative;
  display: block;
  height: 100%;
  min-height: 320px;
}

.mm-all-services::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 28, 0) 35%, rgba(7, 14, 28, .82) 100%);
  pointer-events: none;
}

.mm-all-services img { position: absolute; inset: 0; }

.mm-all-services__label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 12px;
  color: #fff;
}

.mm-all-services__kicker {
  grid-column: 1;
  color: var(--mm-logo-cyan);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mm-all-services__title {
  grid-column: 1;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.mm-all-services__label svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 50%;
  background: var(--mm-brand-gradient);
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s ease;
}

.mm-all-services:hover .mm-all-services__label svg { transform: rotate(45deg); }

.mm-all-services:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mm-all-services__label svg { transition: none; }
  .mm-all-services:hover .mm-all-services__label svg { transform: none; }
}

/* ================================================================
 * 9a. Office map (partials/office-map.blade.php)
 *
 * Edge to edge across the page, with the "visit us" card floating over
 * the map inside the normal content width. The overlay passes clicks
 * through so the map stays draggable; only the card catches them. On
 * phones the card drops below the map instead of covering it.
 * ================================================================ */
.mm-map {
  position: relative;
  width: 100%;
  height: 520px;
  margin-top: 70px;
  overflow: hidden;
  background: #e8edf4;
}

/* For a page whose previous section already ends in bottom padding. */
.mm-map.mm-map--flush { margin-top: 0; }

/* Soft fades top and bottom so the band sits into the page rather than
   being cut out of it. */
.mm-map::before,
.mm-map::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 48px;
  pointer-events: none;
}
.mm-map::before { top: 0;    background: linear-gradient(180deg, rgba(11, 22, 44, .16), transparent); }
.mm-map::after  { bottom: 0; background: linear-gradient(0deg,   rgba(11, 22, 44, .16), transparent); }

.mm-map__frame,
.mm-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mm-map__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* The card sits right: Google draws its own place box in the map's top-left
   corner, and the pin is centred, so the right side is the free space. */
.mm-map__overlay > .main-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.mm-map__card {
  width: 100%;
  max-width: 380px;
  padding: 30px 30px 28px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -28px rgba(11, 22, 44, .5), 0 8px 20px -12px rgba(11, 22, 44, .2);
  pointer-events: auto;
}

.mm-map__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--mm-brand);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mm-map__kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mm-logo-blue), var(--mm-logo-cyan));
}

.mm-map__title {
  margin: 0 0 18px;
  color: var(--mm-ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.mm-map__list {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.mm-map__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--mm-ink-mute);
  font-size: .875rem;
  line-height: 1.5;
}

.mm-map__list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--mm-brand);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-map__list a {
  color: var(--mm-ink);
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.mm-map__list a:hover { color: var(--mm-brand); }

.mm-map__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--mm-brand-gradient);
  box-shadow: 0 14px 28px -14px rgba(36, 98, 183, .8);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow .3s ease, transform .3s ease;
}

.mm-map__cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

.mm-map__cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(36, 98, 183, .9);
}

.mm-map__cta:hover svg { transform: translate(2px, -2px); }

.mm-map__cta:focus-visible,
.mm-map__list a:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}

/* Phones and small tablets: the map on top, the card below it, overlapping
   the map's foot so the two still read as one block. */
@media (max-width: 767px) {
  .mm-map {
    height: auto;
    margin-top: 50px;
    overflow: visible;
    background: transparent;
  }

  .mm-map::after { display: none; }

  .mm-map__frame {
    position: relative;
    height: 320px;
  }

  .mm-map__overlay {
    position: relative;
    display: block;
    margin-top: -48px;
  }

  .mm-map__card {
    max-width: none;
    padding: 24px 22px 22px;
  }

  .mm-map__title { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-map__cta,
  .mm-map__cta svg { transition: none; }
  .mm-map__cta:hover,
  .mm-map__cta:hover svg { transform: none; }
}

/* ================================================================
 * 9b. Client directory (/clients)
 *
 * Reuses the portfolio filter (markup, script and tabs) over a grid of
 * logo cards. The old site's cards carried a logo, the name, what the
 * business is, what was built for it and where it is; all five are kept,
 * with the service as the one coloured element so it is what the eye
 * finds after the name.
 * ================================================================ */

/* Nine tabs wrap onto two lines on most screens, and a 999px radius on a
   two-line box reads as a lozenge rather than a bar. */
.mm-clients__filters { border-radius: 26px; }

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

@media (min-width: 768px)  { .mm-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) { .mm-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.mm-client {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mm-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, .06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.mm-client:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 98, 183, .35);
  box-shadow: 0 26px 50px -26px rgba(11, 22, 44, .38);
}

.mm-client[hidden] { display: none; }

/* Most of the logos are JPEGs on a white ground, so the plate stays white
   and a hairline separates it from the text instead of a tinted panel that
   would show every JPEG's edge. */
.mm-client__logo {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--mm-line);
}

@media (min-width: 768px) {
  .mm-client__logo { height: 120px; padding: 20px 24px; }
  .mm-client__logo img { max-height: 80px; }
}

/* An explicit cap rather than max-height: 100%, which resolves against the
   grid cell rather than the plate and let tall logos spill onto the name. */
.mm-client__logo img {
  display: block;
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.mm-client:hover .mm-client__logo img { transform: scale(1.05); }

/* Half the directory has no logo of its own yet, so the stand-in is kept
   quiet: a tinted monogram rather than a solid badge that would outshout
   the real logos beside it. */
.mm-client__initials {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(36, 98, 183, .08);
  color: var(--mm-brand);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.mm-client__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 16px;
}

@media (min-width: 768px) { .mm-client__body { padding: 18px 20px 20px; } }

.mm-client__name {
  margin: 0;
  color: var(--mm-ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (min-width: 768px) { .mm-client__name { font-size: 1rem; } }

.mm-client__name a { color: inherit; }
.mm-client__name a:hover { color: var(--mm-brand); }

.mm-client__type {
  margin: 0;
  color: var(--mm-ink-mute);
  font-size: .8125rem;
  line-height: 1.4;
}

/* Pushed to the foot of the card so the chips line up across a row
   whatever length the name above them is. */
.mm-client__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 10px;
}

.mm-client__service {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(36, 98, 183, .08);
  color: var(--mm-brand);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
}

.mm-client__place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mm-ink-mute);
  font-size: .75rem;
  line-height: 1.3;
}

.mm-client__place svg { flex: none; }

/* ================================================================
 * 10. Delivery network (/our-network, its zone and state pages, the
 *     /network city directory and the /{city} pages)
 *
 * Written as components for the same reason as everything else in this
 * file: main.css is pre-built from the original static template, so an
 * arbitrary utility that template never used emits no rule at all and
 * the layout would silently collapse to a stack of unstyled blocks.
 *
 * `.mm-net-*` is shared by the index and the state pages; `.mm-hub-*`
 * is only used by a state page.
 * ================================================================ */

.mm-net {
  padding: 64px 0;
}

/* The inner-page hero already carries its own bottom spacing, so the first
   section after it needs less of its own. */
.mm-net--top { padding-top: 48px; }

.mm-net--muted { background: #f5f7fb; }

.mm-net--dark {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(45, 140, 255, .22) 0%, rgba(45, 140, 255, 0) 55%),
    linear-gradient(160deg, #101b2e 0%, #0b1322 100%);
  color: rgba(255, 255, 255, .78);
}

@media (min-width: 1024px) {
  .mm-net       { padding: 88px 0; }
  .mm-net--top  { padding-top: 64px; }
}

/* --- Shared typography ------------------------------------------ */

.mm-net__eyebrow {
  margin: 0 0 10px;
  color: var(--mm-brand);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mm-net__h2 {
  margin: 0 0 14px;
  color: var(--mm-ink);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.mm-net__h2--invert { color: #fff; }

.mm-net__h3 {
  margin: 0 0 14px;
  color: var(--mm-ink);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
}

.mm-net__h3--gap { margin-top: 30px; }

.mm-net__lede {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--mm-ink-mute);
  font-size: 1rem;
  line-height: 1.75;
}

.mm-net__lede--center { margin-left: auto; margin-right: auto; text-align: center; }

.mm-net__lede--gap { margin-top: 24px; margin-bottom: 0; }

.mm-net__head {
  margin-bottom: 36px;
  text-align: center;
}

/* --- Index: intro + the "one office" note ------------------------ */

.mm-net__intro {
  display: grid;
  gap: 28px;
  margin-bottom: 44px;
}

@media (min-width: 1024px) {
  .mm-net__intro {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

.mm-net__note {
  border: 1px solid var(--mm-line);
  border-left: 3px solid var(--mm-brand);
  border-radius: 16px;
  background: #fff;
  padding: 24px 26px;
  box-shadow: 0 18px 44px -32px rgba(11, 22, 44, .45);
}

.mm-net__note-title {
  margin: 0 0 10px;
  color: var(--mm-ink);
  font-size: 1rem;
  font-weight: 650;
}

.mm-net__note p {
  margin: 0;
  color: var(--mm-ink-mute);
  font-size: .9375rem;
  line-height: 1.7;
}

.mm-net__note-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--mm-brand);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.mm-net__note-link span { transition: transform .25s ease; }
.mm-net__note-link:hover span { transform: translateX(3px); }

/* --- Index: figures --------------------------------------------- */

.mm-net__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  border-radius: 18px;
  background: var(--mm-line);
  overflow: hidden;
}

@media (min-width: 768px) {
  .mm-net__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mm-net__stat {
  background: #fff;
  padding: 24px 20px;
  text-align: center;
}

.mm-net__stat-num {
  display: block;
  color: var(--mm-brand);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.mm-net__stat-lbl {
  display: block;
  margin-top: 6px;
  color: var(--mm-ink-mute);
  font-size: .8125rem;
  line-height: 1.5;
}

/* --- Index: the state cards -------------------------------------- */

/* min(100%, …) rather than a bare floor: an auto-fit track whose minimum is
   wider than the container forces the grid past the viewport, and 290px does
   not fit inside the gutters on a 320px phone. Every auto-fit grid in this
   section is written the same way. */
.mm-net__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 20px;
}

.mm-net-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--mm-line);
  border-radius: 18px;
  background: #fff;
  padding: 26px 26px 22px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.mm-net-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 98, 183, .35);
  box-shadow: 0 30px 60px -36px rgba(11, 22, 44, .5);
}

/* The home state is the one card that is materially different, so it says so
   without an explanation being needed. */
.mm-net-card--base {
  border-color: rgba(36, 98, 183, .3);
  background: linear-gradient(180deg, rgba(36, 98, 183, .05) 0%, #fff 42%);
}

.mm-net-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mm-net-card__state {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.mm-net-card__link {
  color: var(--mm-ink);
  text-decoration: none;
}

/* The whole card is the target; the heading link carries the accessible name
   and the overlay gives it the area. `position: relative` on the interactive
   children below keeps them clickable in their own right. */
.mm-net-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mm-net-card:hover .mm-net-card__link { color: var(--mm-brand); }

.mm-net-card__role {
  flex: none;
  border: 1px solid var(--mm-line);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--mm-ink-mute);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mm-net-card__role.is-base {
  border-color: transparent;
  background: var(--mm-brand);
  color: #fff;
}

.mm-net-card__anchor {
  margin: 0 0 14px;
  color: var(--mm-ink);
  font-size: .875rem;
  font-weight: 600;
}

.mm-net-card__anchor-lbl {
  display: block;
  margin-bottom: 2px;
  color: var(--mm-ink-mute);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-net-card__text {
  margin: 0 0 16px;
  color: var(--mm-ink-mute);
  font-size: .9375rem;
  line-height: 1.7;
}

.mm-net-card__towns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.mm-net-card__town {
  border-radius: 6px;
  background: #f1f4f9;
  padding: 4px 9px;
  color: var(--mm-ink-mute);
  font-size: .75rem;
  line-height: 1.4;
}

.mm-net-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mm-line);
  color: var(--mm-brand);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.mm-net-card__cta span { transition: transform .25s ease; }
.mm-net-card:hover .mm-net-card__cta span { transform: translateX(4px); }

/* --- Index: how delivery works ----------------------------------- */

.mm-net__model {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
  margin-top: 36px;
}

.mm-net__step {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  padding: 24px 24px 22px;
}

.mm-net__step-num {
  display: block;
  margin-bottom: 12px;
  color: var(--mm-brand-lit);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.mm-net__step-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}

.mm-net__step p {
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: .875rem;
  line-height: 1.7;
}

/* --- Shared: pill link rows -------------------------------------- */

.mm-net__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-net__pill {
  display: inline-block;
  border: 1px solid var(--mm-line);
  border-radius: 999px;
  background: #fff;
  padding: 9px 18px;
  color: var(--mm-ink);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

.mm-net__pill:hover {
  border-color: var(--mm-brand);
  color: var(--mm-brand);
}

/* Articles sit beside product pages in the same row on a state page. The
   softer fill keeps "further reading" from reading as another product. */
.mm-net__pill--soft {
  background: #f1f4f9;
  color: var(--mm-ink-mute);
}

/* --- State page: the fact strip ---------------------------------- */

.mm-hub__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 40px;
  padding: 1px;
  border-radius: 16px;
  background: var(--mm-line);
  overflow: hidden;
}

@media (min-width: 768px) {
  .mm-hub__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mm-hub__fact {
  background: #fff;
  padding: 18px 20px;
}

.mm-hub__fact dt {
  margin-bottom: 4px;
  color: var(--mm-ink-mute);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-hub__fact dd {
  margin: 0;
  color: var(--mm-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
}

/* --- State page: body + delivery panel --------------------------- */

.mm-hub__body {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .mm-hub__body {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
}

.mm-hub__prose p {
  margin: 0 0 18px;
  color: var(--mm-ink-mute);
  font-size: 1rem;
  line-height: 1.8;
}

.mm-hub__lead {
  color: var(--mm-ink) !important;
  font-size: 1.0625rem !important;
  font-weight: 500;
}

.mm-hub__aside {
  border: 1px solid var(--mm-line);
  border-radius: 18px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 18px 44px -32px rgba(11, 22, 44, .45);
}

.mm-hub__aside-title {
  margin: 0 0 18px;
  color: var(--mm-ink);
  font-size: 1rem;
  font-weight: 650;
}

.mm-hub__model { margin: 0; }

.mm-hub__model > div + div {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mm-line);
}

.mm-hub__model dt {
  margin-bottom: 3px;
  color: var(--mm-brand);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-hub__model dd {
  margin: 0;
  color: var(--mm-ink-mute);
  font-size: .875rem;
  line-height: 1.65;
}

.mm-hub__aside-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  color: var(--mm-brand);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.mm-hub__aside-cta span { transition: transform .25s ease; }
.mm-hub__aside-cta:hover span { transform: translateX(3px); }

/* --- Zone page: states and union territories covered -------------- */

/* A verifiable list rather than "and surrounding areas". Columns rather than
   a grid of tiles: these are names to scan for your own, not cards to click. */
.mm-zone__territories {
  display: grid;
  gap: 28px;
  margin-top: 26px;
}

@media (min-width: 768px) {
  .mm-zone__territories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
}

.mm-zone__group-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mm-line);
  color: var(--mm-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-zone__group-title span {
  color: var(--mm-ink-mute);
  font-weight: 500;
  letter-spacing: 0;
}

.mm-zone__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-zone__list li {
  position: relative;
  padding-left: 16px;
  color: var(--mm-ink-mute);
  font-size: .9375rem;
  line-height: 1.7;
}

.mm-zone__list li::before {
  content: "";
  position: absolute;
  top: .7em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mm-brand);
}

/* --- State page: the hub towns ----------------------------------- */

.mm-hub__towns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.mm-hub-town {
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  background: #fff;
  padding: 18px 20px;
  transition: border-color .25s ease, transform .25s ease;
}

.mm-hub-town:hover {
  border-color: rgba(36, 98, 183, .35);
  transform: translateY(-2px);
}

/* The primary hub is called out because the fact strip above names it and
   the two should agree at a glance. */
.mm-hub-town.is-anchor {
  border-color: rgba(36, 98, 183, .4);
  background: linear-gradient(180deg, rgba(36, 98, 183, .06) 0%, #fff 60%);
}

.mm-hub-town__name {
  margin: 0 0 4px;
  color: var(--mm-ink);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
}

.mm-hub-town__role {
  margin: 0;
  color: var(--mm-ink-mute);
  font-size: .8125rem;
  line-height: 1.6;
}

/* --- State page: sectors + linked solutions ---------------------- */

.mm-hub__split {
  display: grid;
  gap: 36px;
}

@media (min-width: 1024px) {
  .mm-hub__split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px;
    align-items: start;
  }
}

.mm-hub__sectors {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-hub__sectors li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--mm-line);
  color: var(--mm-ink);
  font-size: .9375rem;
  line-height: 1.6;
}

.mm-hub__sectors li:last-child { border-bottom: 0; }

.mm-hub__sectors li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--mm-brand);
}

/* --- State page: questions --------------------------------------- */

.mm-hub__faq {
  max-width: 76ch;
  margin-top: 28px;
}

.mm-hub__q {
  border: 1px solid var(--mm-line);
  border-radius: 14px;
  background: #fff;
  padding: 0 20px;
}

.mm-hub__q + .mm-hub__q { margin-top: 10px; }

.mm-hub__q[open] { border-color: rgba(36, 98, 183, .3); }

.mm-hub__q-title {
  position: relative;
  padding: 16px 34px 16px 0;
  color: var(--mm-ink);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}

/* The default disclosure triangle is replaced by a marker that can be
   positioned and coloured; both vendor forms are needed to remove it. */
.mm-hub__q-title::-webkit-details-marker { display: none; }

.mm-hub__q-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--mm-brand);
  border-bottom: 2px solid var(--mm-brand);
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.mm-hub__q[open] .mm-hub__q-title::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

.mm-hub__q-body {
  padding: 0 0 18px;
  border-top: 1px solid var(--mm-line);
}

.mm-hub__q-body p {
  margin: 14px 0 0;
  color: var(--mm-ink-mute);
  font-size: .9375rem;
  line-height: 1.75;
}

/* --- State page: the rest of the network ------------------------- */

.mm-hub__others {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.mm-hub__other {
  display: block;
  height: 100%;
  border: 1px solid var(--mm-line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}

.mm-hub__other:hover {
  border-color: var(--mm-brand);
  transform: translateY(-2px);
}

.mm-hub__other--all {
  border-style: dashed;
  background: transparent;
}

.mm-hub__other-state {
  display: block;
  color: var(--mm-ink);
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.35;
}

.mm-hub__other-anchor {
  display: block;
  margin-top: 2px;
  color: var(--mm-ink-mute);
  font-size: .75rem;
  line-height: 1.4;
}

/* A hub town or business centre that has a city page of its own. The link
   sits on the name (so it carries the accessible name) and is stretched over
   the whole card by an overlay, the same way the state cards work. */
.mm-hub-town:has(.mm-hub-town__link) { position: relative; cursor: pointer; }

.mm-hub-town__link {
  color: inherit;
  text-decoration: none;
}

.mm-hub-town__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mm-hub-town:has(.mm-hub-town__link):hover { border-color: var(--mm-brand); }

.mm-hub-town:has(.mm-hub-town__link):hover .mm-hub-town__link { color: var(--mm-brand); }

/* The ring goes on the card, which is the target people see. */
.mm-hub-town:has(.mm-hub-town__link:focus-visible) {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}

/* --- Inline place links ------------------------------------------- */

/* A state, territory or town name inside a list, card or fact strip. Reads as
   the text it replaces, with a faint underline so it is visibly a link. */
.mm-net__ilink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(36, 98, 183, .28);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.mm-net__ilink:hover {
  color: var(--mm-brand);
  text-decoration-color: currentColor;
}

/* Inside a card whose heading link is stretched over the whole card, these
   have to sit above that overlay or they could never be clicked. */
.mm-net-card .mm-net__ilink {
  position: relative;
  z-index: 1;
}

/* Directory blocks are deep-link targets; keep them clear of the fixed
   header when the browser scrolls to one. */
.mm-dir__state[id],
.mm-net[aria-labelledby^="dir-"] h2[id] { scroll-margin-top: 140px; }

/* --- /network: the city directory --------------------------------- */

/* Zone heading and its tier badge on one line, wrapping on a phone. */
.mm-dir__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.mm-dir__head .mm-net__h2 { margin: 0; }

.mm-dir__zone-link,
.mm-dir__state-link {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.mm-dir__zone-link:hover,
.mm-dir__state-link:hover { color: var(--mm-brand); }

.mm-dir__states {
  display: grid;
  gap: 32px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .mm-dir__states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 44px; }
}

@media (min-width: 1280px) {
  .mm-dir__states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The same dotted column list as the zone page's territories, so the two read
   as one family — names to scan for your own. */
.mm-dir__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-dir__list li {
  position: relative;
  padding-left: 14px;
  color: var(--mm-ink-mute);
  font-size: .9375rem;
  line-height: 1.75;
}

.mm-dir__list li::before {
  content: "";
  position: absolute;
  top: .75em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mm-line);
}

/* A city with its own page: brand dot, ink text, underline on hover. Touch
   targets get a little extra height without changing the column rhythm. */
.mm-dir__list li.is-page::before { background: var(--mm-brand); }

.mm-dir__city-link {
  display: inline-block;
  padding: 2px 0;
  color: var(--mm-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(36, 98, 183, .3);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.mm-dir__city-link:hover {
  color: var(--mm-brand);
  text-decoration-color: currentColor;
}

/* A city whose page is a summary rather than a write-up. Quieter than the
   bold links — muted ink, underline only on hover — so the cities written up
   in detail still stand out. */
.mm-dir__town-link {
  display: inline-block;
  padding: 2px 0;
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.mm-dir__town-link:hover {
  color: var(--mm-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ================================================================
 * 11. Focus + reduced motion
 * ================================================================ */

.mm-nav__link:focus-visible,
.mm-burger:focus-visible,
.mm-menu__link:focus-visible,
.mm-menu__more:focus-visible,
.mm-topbar__item:focus-visible,
.mm-topbar__social a:focus-visible,
.mm-crumbs__link:focus-visible,
.mm-work__filter:focus-visible,
.mm-work__open:focus-visible,
.mm-work__visit:focus-visible,
.mm-client__name a:focus-visible,
.mm-net__note-link:focus-visible,
.mm-net-card__cta:focus-visible,
.mm-net__pill:focus-visible,
.mm-hub__aside-cta:focus-visible,
.mm-hub__q-title:focus-visible,
.mm-hub__other:focus-visible,
.mm-dir__zone-link:focus-visible,
.mm-dir__state-link:focus-visible,
.mm-dir__city-link:focus-visible,
.mm-dir__town-link:focus-visible,
.mm-net__ilink:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}

/* The state card's heading link is stretched over the whole card by an
   ::after overlay, so a ring drawn on the link itself would trace the words
   and not the target. Drawn on the card instead, the same way the btn-v3
   pill below handles its nested focusable element. */
.mm-net-card:has(.mm-net-card__link:focus-visible) {
  outline: 2px solid var(--mm-brand);
  outline-offset: 3px;
}

/* On the dark overlay the brand blue all but disappears. */
.mm-lightbox__close:focus-visible,
.mm-lightbox__nav:focus-visible,
.mm-lightbox__visit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* The btn-v3 markup nests the focusable element inside the pill, so the ring
   is drawn on the pill to trace the shape people actually see. */
[data-button-v3]:has(:focus-visible),
.mm-arrow:focus-visible,
.mm-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mm-hero__shot,
  .mm-dot.is-active::after { animation: none; }

  .mm-dot.is-active::after { width: 100%; }

  .mm-header,
  .mm-topbar,
  .mm-bar__inner,
  .mm-cta,
  .mm-arrow,
  .mm-promo img,
  .mm-hero__actions [data-button-v3],
  .mm-crumbs__link,
  .mm-work__item,
  .mm-work__shot img,
  .mm-work__filter,
  .mm-work__visit,
  .mm-work__visit svg,
  .mm-work__peek,
  .mm-client,
  .mm-client__logo img,
  .mm-lightbox__close,
  .mm-lightbox__nav,
  .mm-lightbox__visit,
  .mm-menu__link,
  .mm-net-card,
  .mm-net-card__cta span,
  .mm-net__note-link span,
  .mm-net__pill,
  .mm-hub-town,
  .mm-hub__aside-cta span,
  .mm-hub__q-title::after,
  .mm-hub__other,
  .mm-dir__zone-link,
  .mm-dir__state-link,
  .mm-dir__city-link,
  .mm-dir__town-link,
  .mm-net__ilink { transition: none; }

  .mm-net-card:hover,
  .mm-hub-town:hover,
  .mm-hub__other:hover { transform: none; }

  .mm-net-card:hover .mm-net-card__cta span,
  .mm-net__note-link:hover span,
  .mm-hub__aside-cta:hover span { transform: none; }

  .mm-lightbox { animation: none; }
  .mm-work__peek,
  .mm-work__item:hover .mm-work__peek { transform: translate(-50%, 0); }

  /* No auto-scroll: the shot stays on the site's header. */
  .mm-work__item:hover { transform: none; }
  .mm-work__item:hover .mm-work__shot img { object-position: center top; }
  .mm-work__visit:hover svg { transform: none; }

  .mm-client:hover,
  .mm-client:hover .mm-client__logo img { transform: none; }

  /* main.js drives the badge swap with inline transforms; the elements' own
     transitions are what animate it, so clearing those stops the motion. */
  [data-button-v3-icon],
  [data-button-v3-text] { transition: none !important; }
}

/* ================================================================
 * Soft brand section backgrounds
 *
 * Logo blue and cyan glows over a light wash, in two variants that
 * alternate down the page so neighbouring sections stay separate:
 * A (grid) and B (lighter, mirrored glows, fine dots).
 *
 * Homepage: set per section with .hx-softbg / .hx-softbg--alt.
 * Inner pages: applied automatically to every section after the dark
 * page banner (.mm-phero), alternating A, B, A… On pages without a
 * banner (FAQs, Privacy, Terms) the first section keeps its own design
 * and header clearance, and the sections after it follow. Skipped: the Network
 * pages' own sections (.mm-net), navy bands (.mm-band), rounded panel sections that carry
 * their own fill, and sections with an inline background image.
 * ================================================================ */
.hx-softbg,
main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]),
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]) {
  /* no overflow: hidden — it would break sticky columns inside;
     the layers only fill the section (inset: 0) anyway */
  position: relative; isolation: isolate;
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: clamp(56px, 6vw, 88px);
}
.hx-softbg::before, .hx-softbg::after,
main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"])::before,
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"])::before, main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"])::after,
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"])::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* A */
.hx-softbg::before,
main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(even)::before,
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(even)::before {
  background:
    radial-gradient(38% 55% at 8% 18%, rgba(36, 98, 183, .11), transparent 70%),
    radial-gradient(34% 50% at 92% 82%, rgba(28, 219, 230, .13), transparent 70%),
    linear-gradient(180deg, #F6F9FC 0%, #EEF4FB 100%);
}
.hx-softbg::after,
main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(even)::after,
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(even)::after {
  background-image:
    linear-gradient(rgba(36, 98, 183, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 98, 183, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 15%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 15%, transparent 75%);
}
/* B */
.hx-softbg--alt::before,
main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(odd)::before,
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(odd)::before {
  background:
    radial-gradient(36% 50% at 92% 14%, rgba(28, 219, 230, .10), transparent 70%),
    radial-gradient(40% 55% at 6% 88%, rgba(36, 98, 183, .09), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);
}
.hx-softbg--alt::after,
main > .mm-phero ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(odd)::after,
main > section:first-child:not(.mm-phero) ~ section:not(.mm-net):not(.mm-band):not([class*="rounded"]):not([style*="background"]):nth-of-type(odd)::after {
  background-image: radial-gradient(rgba(36, 98, 183, .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 40%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 65% 60% at 50% 40%, #000 10%, transparent 72%);
}

/* ================================================================
 * Blog category filter (public/blogs/index.blade.php)
 *
 * The pills used hover:bg-background-9 / hover:text-white, which the
 * pre-built main.css never emitted, so hovering left near-white text
 * on the pale pill. Real rules instead: quiet at rest, brand blue on
 * hover and keyboard focus, and a filled brand pill for the category
 * being shown.
 * ================================================================ */
.mm-blog-filter {
  background: #eef2f8;
  color: #3d4757;
  border: 1px solid #dde4ee;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mm-blog-filter:hover,
.mm-blog-filter:focus-visible {
  background: #e3edfb;
  color: var(--mm-brand);
  border-color: rgba(36, 98, 183, .35);
}
.mm-blog-filter:focus-visible {
  outline: 2px solid var(--mm-brand);
  outline-offset: 2px;
}
.mm-blog-filter.is-active,
.mm-blog-filter.is-active:hover {
  background: var(--mm-brand);
  color: #fff;
  border-color: var(--mm-brand);
}

/* ================================================================
 * Team page: stand-in for a member without a photo
 *
 * The old stand-in was a grey silhouette on a near-black square,
 * which read as a failed image. The member's initials on the brand
 * gradient instead, at the same square size a photo takes.
 * ================================================================ */
.mm-team__monogram {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(54, 209, 220, .45), transparent 55%),
    linear-gradient(145deg, var(--mm-brand-dark) 0%, var(--mm-brand) 55%, var(--mm-brand-lit) 100%);
}
.mm-team__monogram::after {           /* faint grid, as on the page banners */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.mm-team__monogram span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(4px);
}
/* Default profile icon (same artwork as the CMS <x-default-avatar>): the
   silhouette fills the glass circle and is clipped by it, with a soft sheen. */
.mm-team__monogram .mm-team__avatar {
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(7, 26, 47, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), background-color .5s;
}
.mm-team__monogram .mm-team__avatar svg { width: 100%; height: 100%; display: block; }
.group:hover .mm-team__monogram .mm-team__avatar { transform: translateY(-4px) scale(1.03); background: rgba(255, 255, 255, .18); }
/* Card text: every card in a row is the same height, and the name and the
   role each sit on a single line, so all cards read the same. Sized so the
   longest current entry ("Head of Healthcare Solutions") fits on one line in
   the 4-column grid; anything longer ends in an ellipsis, with the full text
   in the title tooltip. */
.mm-team__card { display: flex; flex-direction: column; height: 100%; }
.mm-team__body { flex: 1; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mm-team__body > a { margin-top: auto; padding-top: .5rem; align-self: flex-start; }
.mm-team__name,
.mm-team__role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-team__name {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -.01em;
}
@media (min-width: 640px) and (max-width: 1279px) {
  .mm-team__name { font-size: 1.0625rem; }   /* 2–3 columns: cards are wider */
}
@media (prefers-reduced-motion: reduce) {
  .mm-team__monogram .mm-team__avatar { transition: none; }
  .group:hover .mm-team__monogram .mm-team__avatar { transform: none; }
}

/* ── Footer ────────────────────────────────────────────────────────────────
   Built from the logo: its royal blue (#2462B7) and cyan (#1CDBE6) rise as an
   aurora out of a deep midnight base, over a faint dot grid, with a glowing
   blue→cyan edge on top. Text colours are cool blue-greys tinted toward the
   logo blue, with the logo cyan as the one accent (hovers, heading rules).

   Every text colour below is at least WCAG AA (4.5:1) at the brightest point
   of the aurora it sits over — checked, not eyeballed. The corner glows sit
   partly off-canvas so their peaks land outside the text columns. */
.mm-footer {
  --mm-footer-heading: #f2f7ff;
  --mm-footer-link:    #b4c4dd;
  --mm-footer-text:    #b8c7df;
  --mm-footer-legal:   #d2def0;
  --mm-footer-copy:    #93a7c6;
  --mm-footer-accent:  var(--mm-logo-cyan);

  background:
    radial-gradient(ellipse 55% 70% at 104% -12%, rgba(36, 98, 183, .34), transparent 70%),
    radial-gradient(ellipse 32% 42% at 96% -6%, rgba(28, 219, 230, .14), transparent 70%),
    radial-gradient(ellipse 50% 65% at -6% 112%, rgba(36, 98, 183, .28), transparent 70%),
    linear-gradient(175deg, #050e1f 0%, #081a3b 48%, #0a2250 100%);
  color: var(--mm-footer-link);
  isolation: isolate;
}

/* Glowing top edge: a hairline in the logo colours with a soft bloom under
   its brightest (cyan) point. */
.mm-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mm-logo-blue) 22%, var(--mm-logo-cyan) 55%, var(--mm-logo-blue) 82%, transparent);
  box-shadow: 0 0 18px 1px rgba(28, 219, 230, .35);
  pointer-events: none;
  z-index: 1;
}

/* Dot grid — the "engineered" texture — fading out toward the bottom so it
   reads as depth, not pattern. Behind the content (isolation above). */
.mm-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(180, 196, 221, .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

/* Column headings: bright, tracked, with a short blue→cyan rule beneath. */
.mm-footer__heading {
  position: relative;
  color: var(--mm-footer-heading);
  letter-spacing: .12em;
  padding-bottom: .75rem;
}
.mm-footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mm-logo-blue), var(--mm-logo-cyan));
}

/* Links: soft blue-grey, cyan on hover with the existing underline sweep
   (main.css .footer-link:before) recoloured to match. */
.mm-footer .footer-link {
  color: var(--mm-footer-link);
  font-weight: 500;
  transition: color .25s ease;
}
.mm-footer .footer-link:hover,
.mm-footer .footer-link:focus-visible { color: var(--mm-footer-accent); }
.mm-footer .footer-link:before { background-color: var(--mm-footer-accent); }

.mm-footer__text { color: var(--mm-footer-text); line-height: 1.7; }

/* Bottom bar. */
.mm-footer__divider {
  background: linear-gradient(90deg, transparent, rgba(28, 219, 230, .35), rgba(36, 98, 183, .5), transparent) !important;
}
.mm-footer__legal {
  color: var(--mm-footer-legal);
  transition: color .25s ease;
}
.mm-footer__legal:hover,
.mm-footer__legal:focus-visible { color: var(--mm-footer-accent); }
.mm-footer__copy { color: var(--mm-footer-copy); }

/* CRM Login: a glass pill with a cyan hairline, filling with the brand
   gradient on hover like the header's nav pill. */
.mm-footer__cta {
  border-color: rgba(28, 219, 230, .35) !important;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mm-footer__cta:hover,
.mm-footer__cta:focus-visible {
  /* border-box origin: the gradient spans the whole pill, border included.
     With the default padding-box origin it tiled into the transparent 1px
     border and the far (cyan) end showed as a sliver down the left edge. */
  background: var(--mm-brand-gradient) border-box;
  border-color: transparent !important;
  box-shadow: 0 8px 24px -8px rgba(36, 98, 183, .7);
}

/* Social icons were solid #1f252f circles (main.css) — grey dots on the navy.
   Glass instead, filling with the brand gradient on hover. */
.mm-footer .footer-social-link {
  background-color: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(180, 196, 221, .18);
  transition: background .25s ease, box-shadow .25s ease, translate .3s ease;
}
.mm-footer .footer-social-link:hover,
.mm-footer .footer-social-link:focus-visible {
  background-image: var(--mm-brand-gradient);
  box-shadow: inset 0 0 0 1px rgba(28, 219, 230, .5), 0 8px 20px -8px rgba(28, 219, 230, .55);
}

@media (prefers-reduced-motion: reduce) {
  .mm-footer .footer-link,
  .mm-footer__legal,
  .mm-footer__cta,
  .mm-footer .footer-social-link { transition: none; }
}

/* ── Cookie consent bar (partials/consent-banner) ───────────────────────────
   position: fixed, so showing or removing it moves nothing else (no CLS).
   Below the demo popup and the lightbox (99999+) and the toaster (9999), so
   it never sits over a dialog's own controls. A slim bar on phones: the
   secondary sentence is dropped there, and the buttons stay on one row. */
.mm-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 18, 33, .96);
  color: #e6ebf3;
  border-top: 1px solid rgba(28, 219, 230, .25);
  box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .5);
}
.mm-consent[hidden] { display: none; }

.mm-consent__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
}

.mm-consent__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.mm-consent__title { color: #fff; font-weight: 600; margin-right: 4px; }

.mm-consent__link {
  color: var(--mm-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.mm-consent__actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }

.mm-consent__btn {
  min-height: 40px;
  min-width: 88px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.mm-consent__btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(230, 235, 243, .45);
}
.mm-consent__btn--ghost:hover { border-color: #fff; }
/* Same weight as Reject: accepting must not be the only easy option. */
.mm-consent__btn--primary {
  background: var(--mm-brand);
  color: #fff;
  border: 1px solid var(--mm-brand);
}
.mm-consent__btn--primary:hover { background: var(--mm-brand-dark); border-color: var(--mm-brand-dark); }

.mm-consent__link:focus-visible,
.mm-consent__btn:focus-visible,
.mm-consent-reopen:focus-visible {
  outline: 2px solid var(--mm-cyan);
  outline-offset: 2px;
}

/* The footer's "Cookie settings" is a <button> styled like its link siblings. */
.mm-consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 639px) {
  .mm-consent { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .mm-consent__more { display: none; }
  .mm-consent__text { font-size: 12px; flex-basis: 100%; }
  .mm-consent__actions { width: 100%; }
  .mm-consent__btn { flex: 1 1 0; min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-consent__btn { transition: none; }
}

/* --- Enquiry modal ("Request a demo") ------------------------------ */

/* main.css centres the card with top:50% + translate(-50%, -50%) inside a
   fixed overlay. Since the three qualifying questions were added the form
   is taller than a laptop screen, so its top and bottom were pushed off
   screen with no way to scroll to them. Now the overlay scrolls, and the
   card is centred with margin:auto: centred when it fits, pinned to the top
   (and scrollable) when it does not. */
#enquiryModal {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 16px;
}

/* The close button is anchored here, outside the card: main.css places it
   49px to the right of the card, which the card's overflow:hidden (kept for
   the illustration's flush corner) used to clip out of sight. */
#enquiryModal .modal-dialog {
  position: relative;
  width: 860px;
  max-width: 100%;
  margin: auto;
}

#enquiryModal .modal-content {
  position: static;
  transform: none;
  width: auto;
}

/* Below lg there is no room beside the 860px card: the button moves inside
   the top-right corner on a dark disc, since its X is drawn in white. */
@media (max-width: 63.99rem) {
  #enquiryModal .close-button {
    top: 8px;
    right: 8px;
    line-height: 0;
    border-radius: 50%;
    background: rgba(8, 13, 24, .72);
  }

  #enquiryModal .close-button svg {
    width: 32px;
    height: 32px;
  }
}

/* Compact layout: the eight fields sit two to a row with shorter inputs, so
   the whole dialog (about 440px tall) fits a laptop screen without
   scrolling. One column on phones, where the overlay scroll above takes
   over. The illustration column is only shown from lg up. */
#enquiryModal .mm-enquiry__main {
  flex: 1 1 auto;
  min-width: 0;
}

#enquiryModal .modal_form_card,
#enquiryModal .mm-enquiry__card {
  width: 100%;
  max-width: none;
}

#enquiryModal .mm-enquiry__card {
  padding: 16px 18px 12px;
}

#enquiryModal .mm-enquiry__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 14px;
  margin-bottom: 14px;
}

#enquiryModal .mm-enquiry__field label {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
}

#enquiryModal .mm-enquiry__field .auth-form-input {
  height: 38px;
  padding-block: 0;
  padding-inline: 14px;
  font-size: 14px;
}

#enquiryModal .mm-enquiry__field .auth-form-input::placeholder {
  font-size: 14px;
}

#enquiryModal select.mm-enquiry__field,
#enquiryModal .mm-enquiry__field select.auth-form-input {
  padding-right: 34px;
  background-position: calc(100% - 14px) 50%;
  background-size: 12px;
}

@media (min-width: 36rem) {
  #enquiryModal .mm-enquiry__fields { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  #enquiryModal .mm-enquiry__aside { flex: 0 0 280px; }
}

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

/* Topic jump links in the sticky intro column. */
.mm-faq-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 520px;
}

.mm-faq-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--color-stroke-1);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-secondary);
  transition: border-color .2s ease, color .2s ease;
}

.mm-faq-topics a:hover,
.mm-faq-topics a:focus-visible {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

.mm-faq-ask {
  font-size: 15px;
}

.mm-faq-ask a {
  color: var(--color-primary-500);
  font-weight: 500;
  white-space: nowrap;   /* never split the phone number */
}

.mm-faq-ask a:hover { text-decoration: underline; }

/* A topic link lands with its title clear of the fixed header. */
.mm-faq-cat { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: reduce) {
  .mm-faq-topics a { transition: none; }
}

/* ================================================================
 * Closing CTA (partials/website-cta.blade.php) — on every page.
 * Navy → royal-blue panel, faint grid, cyan glow. The two glass shapes
 * sit on the panel's outer corners, clipped by it, and never under the
 * copy; below 1024px they are dropped rather than squeezed in.
 * ================================================================ */
.mm-endcta-wrap { padding-top: clamp(48px, 6vw, 88px); }
.mm-endcta {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 64px);
  border-radius: 28px; text-align: center; color: #EAF2FF;
  background:
    linear-gradient(rgba(234, 242, 255, .05) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(234, 242, 255, .05) 1px, transparent 1px) 0 0 / 52px 52px,
    radial-gradient(120% 140% at 50% 120%, #0B63CE 0%, rgba(11, 99, 206, 0) 55%),
    linear-gradient(160deg, #0B2340 0%, #071A2F 60%, #030B17 100%);
  box-shadow: 0 50px 90px -50px rgba(7, 26, 47, .65), inset 0 0 0 1px rgba(234, 242, 255, .08);
}
.mm-endcta__glow {
  position: absolute; z-index: -1; left: 50%; top: -55%; width: min(720px, 90%); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(54, 209, 220, .2), rgba(123, 97, 255, .1) 45%, transparent 70%);
}
.mm-endcta__art { position: absolute; z-index: -1; pointer-events: none; user-select: none; height: auto; }
.mm-endcta__art--a { width: clamp(220px, 22vw, 320px); left: -70px; top: -90px; opacity: .9; }
.mm-endcta__art--b { width: clamp(180px, 18vw, 260px); right: -40px; bottom: -70px; opacity: .9; }
@media (max-width: 1023px) { .mm-endcta__art { display: none; } }

.mm-endcta__body { max-width: 640px; }
.mm-endcta__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #36D1DC;
}
.mm-endcta__eyebrow::before, .mm-endcta__eyebrow::after { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.mm-endcta__title {
  margin: 0 0 1rem; color: #fff; text-wrap: balance; font-family: var(--mm-display);
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; font-weight: 600; letter-spacing: -.035em;
}
.mm-endcta__title span {
  background: linear-gradient(100deg, #6FB4FF 0%, #36D1DC 60%, #A99BFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-endcta__lede { margin: 0 auto; max-width: 52ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; color: rgba(234, 242, 255, .74); }
.mm-endcta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2.2rem; }
.mm-endcta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 26px; border-radius: 99px; cursor: pointer;
  font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), background-color .3s, border-color .3s;
}
.mm-endcta__btn svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mm-endcta__btn--primary { border: 0; color: #071A2F; background: #fff; }
.mm-endcta__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(54, 209, 220, .6); }
.mm-endcta__btn--primary:hover svg { transform: translateX(4px); }
.mm-endcta__btn--ghost { color: #fff; border: 1px solid rgba(234, 242, 255, .28); background: rgba(234, 242, 255, .04); }
.mm-endcta__btn--ghost:hover { border-color: rgba(54, 209, 220, .7); background: rgba(54, 209, 220, .1); }
.mm-endcta__btn:focus-visible, .mm-endcta__call a:focus-visible { outline: 2px solid #36D1DC; outline-offset: 3px; }
.mm-endcta__call { margin: 1.4rem 0 0; font-size: .9rem; color: rgba(234, 242, 255, .6); }
.mm-endcta__call a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(234, 242, 255, .3); }
.mm-endcta__call a:hover { border-color: #36D1DC; }
@media (max-width: 560px) {
  .mm-endcta { border-radius: 22px; }
  .mm-endcta__btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-endcta__btn, .mm-endcta__btn svg { transition: none; }
}


/* ================================================================
 * Site-wide type + section system — one design language on every page
 * (the homepage's hero and sections set the standard; inner pages
 * inherit it from here).
 *
 *  - Sora for page and section headings, Inter for copy.
 *  - The cyan pill label (.badge-cyan) becomes a ruled uppercase
 *    eyebrow, as on the homepage section headers.
 *
 * The heading rule is :where()-wrapped, so it has zero specificity:
 * it beats main.css's @layer base/utilities (unlayered always wins over
 * layered) but any class rule — the hero, cards, the CTA — still wins
 * over it.
 * ================================================================ */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/sora-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --mm-display: 'Sora', system-ui, sans-serif;
  --mm-navy: #071A2F;
  --mm-eyebrow: #0B63CE;
}

:where(main) :where(h1, h2) { font-family: var(--mm-display); font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
:where(main) :where(h3) { font-family: var(--mm-display); font-weight: 600; letter-spacing: -.015em; }

/* Inner-page banner: title and the ghost word behind it in Sora too. */
.mm-phero__title { font-family: var(--mm-display); font-weight: 600; letter-spacing: -.035em; }
.mm-phero__ghost { font-family: var(--mm-display); }

/* Section label: ruled uppercase eyebrow instead of the cyan pill. */
main .badge.badge-cyan {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font: 600 .74rem/1.2 var(--mm-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mm-eyebrow);
}
main .badge.badge-cyan::before { content: ''; flex: none; width: 28px; height: 1px; background: currentColor; opacity: .6; }

/* Team cards: a photo sits over the initials tile (team.blade.php) and
   must cover the tile's own grid overlay. */
.mm-team__monogram img { z-index: 2; }

/* ================================================================
 * Section header (components/section-head.blade.php) — every page.
 * Numbered eyebrow, Sora title, optional lede + link; split / stack /
 * center layouts and a dark tone for navy bands.
 * ================================================================ */
.mm-section { padding-block: clamp(64px, 8vw, 112px); }
.mm-head { display: grid; gap: 18px 64px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.mm-head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
.mm-head--center { justify-items: center; max-width: 760px; margin-inline: auto; text-align: center; }
.mm-head--stack { gap: 18px; }

.mm-head__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 600 .74rem/1.2 var(--mm-display); letter-spacing: .16em; text-transform: uppercase; color: var(--mm-eyebrow);
}
.mm-head--center .mm-head__eyebrow { justify-content: center; }
.mm-head__index { display: inline-flex; align-items: center; gap: 12px; color: #8A9AB0; font-variant-numeric: tabular-nums; }
.mm-head__index::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.mm-head__title {
  margin: 0; max-width: 20ch; text-wrap: balance;
  font: 600 clamp(1.9rem, 3.5vw, 3rem)/1.1 var(--mm-display); letter-spacing: -.035em; color: var(--mm-navy);
}
.mm-head--center .mm-head__title { margin-inline: auto; }
.mm-head__lede { margin: 0; max-width: 46ch; font-size: clamp(.98rem, 1.1vw, 1.05rem); line-height: 1.7; color: #4A5D74; }
.mm-head--center .mm-head__lede { margin-inline: auto; }
.mm-head__link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 18px;
  font-size: .92rem; font-weight: 600; line-height: 1; color: var(--mm-eyebrow); text-decoration: none;
}
.mm-head__link svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mm-head__link:hover svg { transform: translateX(4px); }
.mm-head__link:focus-visible { outline: 2px solid var(--mm-eyebrow); outline-offset: 4px; border-radius: 4px; }

.mm-head--dark .mm-head__eyebrow { color: #36D1DC; }
.mm-head--dark .mm-head__index { color: rgba(234, 242, 255, .45); }
.mm-head--dark .mm-head__title { color: #fff; }
.mm-head--dark .mm-head__lede { color: rgba(234, 242, 255, .74); }
.mm-head--dark .mm-head__link { color: #fff; }

/* Key phrase of a heading: logo gradient on light, lighter blend on navy. */
.mm-grad { background: linear-gradient(100deg, #2462b7 0%, #2d8cff 45%, #1cb8d6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mm-grad-lt { background: linear-gradient(100deg, #6FB4FF 0%, #36D1DC 60%, #A99BFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 900px) { .mm-head--split { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mm-head__link svg { transition: none; } }

/* ================================================================
 * Shared content blocks — built for About, reused by inner pages.
 *  .mm-section--tint  soft wash behind a section
 *  .mm-story / .mm-facts   copy beside a navy facts panel
 *  .mm-band / .mm-tiles    full-width navy band with ruled tiles
 *  .mm-logos               ruled logo wall with names
 *  .mm-divisions           image cards with copy beneath
 *  .mm-links               ruled link grid with arrows
 * ================================================================ */
.mm-section--tint { background: linear-gradient(180deg, #F6F9FC 0%, #EEF4FB 100%); }

/* Story + facts */
.mm-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mm-story__copy p { margin: 0 0 1.1rem; max-width: 60ch; font-size: 1.02rem; line-height: 1.8; color: #4A5D74; }
.mm-story__copy .mm-story__lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.65; color: var(--mm-navy); }
.mm-facts {
  position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border-radius: 24px; color: #EAF2FF;
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(54, 209, 220, .18), transparent 60%),
    linear-gradient(150deg, #0B2340 0%, #071A2F 60%, #030B17 100%);
  box-shadow: 0 40px 80px -45px rgba(7, 26, 47, .7);
}
.mm-facts__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .5rem; padding: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid rgba(234, 242, 255, .12); }
.mm-facts__item:nth-child(odd):not(.mm-facts__item--wide) { border-right: 1px solid rgba(234, 242, 255, .12); }
.mm-facts__item--wide { grid-column: 1 / -1; border-bottom: 0; }
.mm-facts dt { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(234, 242, 255, .5); }
.mm-facts dd { margin: 0; font: 600 clamp(1.9rem, 3vw, 2.6rem)/1 var(--mm-display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.mm-facts dd sup { top: -.7em; font-size: .5em; color: #36D1DC; }
.mm-facts dd small { font-size: .45em; letter-spacing: 0; color: rgba(234, 242, 255, .7); }
.mm-facts .mm-facts__text { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.mm-facts__chips { display: flex; flex-wrap: wrap; gap: 8px; font: inherit !important; }
.mm-facts__chips a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px;
  font: 500 .86rem/1 Inter, system-ui, sans-serif; letter-spacing: 0; color: #fff; text-decoration: none;
  border: 1px solid rgba(234, 242, 255, .2); background: rgba(234, 242, 255, .05); transition: border-color .3s, background-color .3s;
}
.mm-facts__chips a:hover { border-color: rgba(54, 209, 220, .6); background: rgba(54, 209, 220, .12); }

/* Navy band + tiles */
.mm-band {
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 9vw, 120px); color: #EAF2FF;
  background:
    linear-gradient(rgba(234, 242, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(234, 242, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(160deg, #0B2340 0%, #071A2F 55%, #030B17 100%);
}
.mm-band__glow { position: absolute; z-index: -1; right: -12%; top: -35%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(54, 209, 220, .16), rgba(123, 97, 255, .1) 40%, transparent 68%); }
.mm-band__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mm-band__grid .mm-head { margin-bottom: 0; }
.mm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(234, 242, 255, .14); border-left: 1px solid rgba(234, 242, 255, .14); }
.mm-tiles__item { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-right: 1px solid rgba(234, 242, 255, .14); border-bottom: 1px solid rgba(234, 242, 255, .14); transition: background-color .4s; }
.mm-tiles__item::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, #2d8cff, #36D1DC); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.mm-tiles__item:hover { background: rgba(234, 242, 255, .035); }
.mm-tiles__item:hover::before { transform: scaleX(1); }
.mm-tiles__icon { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: #36D1DC; background: rgba(54, 209, 220, .08); border: 1px solid rgba(54, 209, 220, .24); transition: color .5s, background-color .5s, border-color .5s, box-shadow .6s cubic-bezier(.16, 1, .3, 1); }
.mm-tiles__icon svg { width: 25px; height: 25px; transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .5s; }
/* Hover: soft cyan glow on the icon plus one slow ring that breathes outward. */
.mm-tiles__icon::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(54, 209, 220, .5); opacity: 0; pointer-events: none; }
.mm-tiles__item:hover .mm-tiles__icon { color: #7fe9f0; background: rgba(54, 209, 220, .14); border-color: rgba(54, 209, 220, .55); box-shadow: 0 0 22px rgba(54, 209, 220, .28), inset 0 0 12px rgba(54, 209, 220, .12); }
.mm-tiles__item:hover .mm-tiles__icon svg { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 0 6px rgba(54, 209, 220, .55)); }
.mm-tiles__item:hover .mm-tiles__icon::after { animation: mm-tile-pulse 2.4s cubic-bezier(.22, .61, .36, 1) infinite; }
@keyframes mm-tile-pulse {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.45); }
  100% { opacity: 0;  transform: scale(1.45); }
}
.mm-tiles__title { margin: 6px 0 0; font: 600 1.1rem/1.35 var(--mm-display); letter-spacing: -.015em; color: #fff; }
.mm-tiles__text { margin: 0; font-size: .93rem; line-height: 1.65; color: rgba(234, 242, 255, .68); }

/* Logo wall */
.mm-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(7, 26, 47, .08); border-left: 1px solid rgba(7, 26, 47, .08); }
.mm-logos__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 140px; padding: 20px 12px; border-right: 1px solid rgba(7, 26, 47, .08); border-bottom: 1px solid rgba(7, 26, 47, .08); transition: background-color .35s; }
.mm-logos__item img { width: 40px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .35s, opacity .35s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.mm-logos__item span { font-size: .85rem; font-weight: 500; color: #4A5D74; }
.mm-logos__item:hover { background: #fff; }
.mm-logos__item:hover img { filter: none; opacity: 1; transform: translateY(-3px); }

/* Division cards */
.mm-divisions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.mm-divisions__card { overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 26, 47, .06), 0 24px 50px -36px rgba(7, 26, 47, .45); transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s; }
.mm-divisions__card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(11, 99, 206, .18), 0 34px 60px -34px rgba(11, 99, 206, .4); }
.mm-divisions__card > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mm-divisions__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 26px; }
.mm-divisions__num { font: 600 .72rem/1 var(--mm-display); letter-spacing: .14em; color: var(--mm-eyebrow); }
.mm-divisions__body h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--mm-navy); }
.mm-divisions__body p { margin: 0; font-size: .93rem; line-height: 1.65; color: #4A5D74; }

/* Link grid */
.mm-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(7, 26, 47, .1); }
.mm-links__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 28px 8px 28px 0; border-bottom: 1px solid rgba(7, 26, 47, .1); color: inherit; text-decoration: none; }
.mm-links__item:nth-child(odd) { padding-right: 32px; }
.mm-links__item:nth-child(even) { padding-left: 32px; border-left: 1px solid rgba(7, 26, 47, .1); }
.mm-links__title { grid-column: 1; font: 600 1.25rem/1.3 var(--mm-display); letter-spacing: -.02em; color: var(--mm-navy); transition: color .3s; }
.mm-links__text { grid-column: 1; margin-top: 6px; font-size: .93rem; line-height: 1.6; color: #4A5D74; }
.mm-links__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(7, 26, 47, .14); color: var(--mm-navy); transform: rotate(45deg); transition: transform .5s cubic-bezier(.16, 1, .3, 1), background-color .3s, color .3s, border-color .3s; }
.mm-links__arrow svg { width: 18px; height: 18px; }
.mm-links__item:hover .mm-links__title { color: var(--mm-eyebrow); }
.mm-links__item:hover .mm-links__arrow { transform: rotate(0); background: var(--mm-eyebrow); border-color: transparent; color: #fff; }
.mm-links__item:focus-visible { outline: 2px solid var(--mm-eyebrow); outline-offset: 2px; border-radius: 8px; }
.mm-links__more { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.mm-links__more a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 99px; font-size: .88rem; font-weight: 500; color: var(--mm-navy); text-decoration: none; border: 1px solid rgba(7, 26, 47, .12); transition: border-color .3s, color .3s; }
.mm-links__more a:hover { border-color: var(--mm-eyebrow); color: var(--mm-eyebrow); }

@media (max-width: 1100px) {
  .mm-divisions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .mm-story, .mm-band__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mm-tiles, .mm-links { grid-template-columns: minmax(0, 1fr); }
  .mm-tiles__item { padding: 22px 20px; }
  .mm-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-logos__item { min-height: 112px; }
  .mm-divisions { grid-template-columns: minmax(0, 1fr); }
  .mm-divisions__card > img { aspect-ratio: 16 / 9; }
  .mm-links__item:nth-child(n) { padding: 22px 0; border-left: 0; }
  .mm-facts__item { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-tiles__item, .mm-tiles__item::before, .mm-tiles__icon, .mm-tiles__icon svg, .mm-logos__item img, .mm-divisions__card, .mm-links__arrow, .mm-facts__chips a { transition: none; }
  .mm-tiles__item:hover .mm-tiles__icon::after { animation: none; }
  .mm-tiles__item:hover .mm-tiles__icon svg { transform: none; }
}

/* Three tiles: the last spans both columns on desktop. */
.mm-tiles--3 .mm-tiles__item:last-child { grid-column: 1 / -1; }
@media (max-width: 640px) { .mm-tiles--3 .mm-tiles__item:last-child { grid-column: auto; } }

/* ================================================================
 * Buttons — one system for page content (the header, hero and closing
 * panel keep their own). Works on <a> and <button>.
 *   .mm-btn--primary  brand blue, white text
 *   .mm-btn--ghost    outlined, for the secondary action
 *   .mm-btn--white    white on navy
 * ================================================================ */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: 0 22px; border-radius: 99px; border: 1px solid transparent; cursor: pointer;
  font: 600 .92rem/1 Inter, system-ui, sans-serif; text-decoration: none; white-space: nowrap;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), background-color .3s, border-color .3s, color .3s;
}
.mm-btn svg { width: 16px; height: 16px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mm-btn:hover svg { transform: translateX(4px); }
.mm-btn--primary { color: #fff; background: var(--mm-eyebrow); }
.mm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(11, 99, 206, .6); }
.mm-btn--ghost { color: var(--mm-navy); border-color: rgba(7, 26, 47, .16); background: transparent; }
.mm-btn--ghost:hover { border-color: var(--mm-eyebrow); color: var(--mm-eyebrow); }
.mm-btn--white { color: var(--mm-navy); background: #fff; }
.mm-btn--white:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(54, 209, 220, .55); }
.mm-btn:focus-visible { outline: 2px solid var(--mm-eyebrow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mm-btn, .mm-btn svg { transition: none; } }

/* ================================================================
 * Product showcase (website/products/index.blade.php): one row per
 * product, image and copy alternating sides.
 * ================================================================ */
.mm-showcase { display: grid; gap: clamp(56px, 7vw, 104px); }
.mm-showcase__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mm-showcase__row--flip .mm-showcase__media { order: 2; }
.mm-showcase__media {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 24px;
  background: #E6EDF6; box-shadow: 0 40px 80px -45px rgba(7, 26, 47, .55), 0 0 0 1px rgba(7, 26, 47, .06);
}
.mm-showcase__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.mm-showcase__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 11, 23, .45)); pointer-events: none; }
.mm-showcase__row:hover .mm-showcase__media img { transform: scale(1.04); }
.mm-showcase__badge {
  position: absolute; z-index: 1; left: 20px; bottom: 18px; padding: 8px 12px; border-radius: 10px;
  font: 600 .72rem/1 var(--mm-display); letter-spacing: .14em; color: #fff;
  background: rgba(7, 26, 47, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mm-showcase__title { margin: 0; font: 600 clamp(1.6rem, 2.6vw, 2.3rem)/1.12 var(--mm-display); letter-spacing: -.03em; }
.mm-showcase__title a { color: var(--mm-navy); text-decoration: none; }
.mm-showcase__title a:hover { color: var(--mm-eyebrow); }
.mm-showcase__kicker { margin: 10px 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mm-eyebrow); }
.mm-showcase__desc { margin: 16px 0 0; max-width: 54ch; font-size: 1rem; line-height: 1.75; color: #4A5D74; }
.mm-showcase__caps { display: grid; gap: 10px; margin: 22px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(7, 26, 47, .1); }
.mm-showcase__caps li { display: flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 500; color: var(--mm-navy); }
.mm-showcase__caps svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2462b7, #1cb8d6); }
.mm-showcase__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 900px) {
  .mm-showcase__row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mm-showcase__row--flip .mm-showcase__media { order: 0; }
}
@media (max-width: 560px) {
  .mm-showcase__actions .mm-btn { flex: 1 1 100%; }
  .mm-showcase__media { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .mm-showcase__media img { transition: none; } }

/* ================================================================
 * Forms + listings: white form card, job cards, busy submit button.
 * ================================================================ */
.mm-formcard { border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 26, 47, .06), 0 40px 80px -50px rgba(7, 26, 47, .45); }
.mm-job { position: relative; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 26, 47, .07), 0 20px 44px -34px rgba(7, 26, 47, .4); transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s; }
.mm-job:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(11, 99, 206, .2), 0 30px 56px -34px rgba(11, 99, 206, .4); }
.mm-btn.is-busy { pointer-events: none; opacity: .85; }
.mm-btn.is-busy svg { display: none; }
.mm-btn.is-busy::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: mm-spin .8s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-job { transition: none; } .mm-btn.is-busy::after { animation-duration: 2.4s; } }

/* Industry cards: navy until their lazy background (data-bg, site.js) arrives. */
.industry_single { background-color: #0B2340; }

/* ================================================================
 * Accessibility (axe WCAG 2.1 AA pass)
 * ================================================================ */
/* Links inside running text need a cue besides colour (link-in-text-block):
   underline them. Only links in paragraphs — plain ones and the
   .text-primary-500 inline links — so list rows, pills, chip rows and
   button-like links (the services index, network pills…) are left alone. */
main p:not(.hx-ind__links):not(.mm-links__more):not(.mm-endcta__call) > a:is(:not([class]), .text-primary-500) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
main p > a:is(:not([class]), .text-primary-500):hover { text-decoration-thickness: 2px; }
/* FAQ "still have a question" line: was 4.48:1, just under AA. */
.mm-faq-ask { color: #4A5D74; }
/* Skip link: off-screen until focused, then a pill above the header. */
.mm-skip { position: fixed; left: 16px; top: 12px; z-index: 10000; padding: 12px 18px; border-radius: 99px; font-weight: 600; font-size: .9rem; color: #fff; background: var(--mm-navy); text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.mm-skip:focus { transform: translateY(0); outline: 2px solid #36D1DC; outline-offset: 2px; }
main:focus { outline: none; }

/* ================================================================
 * Footer badges (partials/website-footer): the ISO + MSME image and a
 * second column of tiles drawn to match it — 96 x 38 px, hairline border
 * at 10% white, light-grey monochrome logo.
 * ================================================================ */
.mm-footer__badges { display: flex; align-items: flex-start; gap: 6px; }
.mm-footer__tiles { display: grid; grid-template-rows: 38px 38px; gap: 8px; width: 96px; margin: 0; padding: 3px 0 0; list-style: none; }
.mm-footer__tiles li { display: grid; place-items: center; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 3px; }
.mm-footer__tiles img { display: block; max-width: 100%; max-height: 24px; width: auto; height: auto; filter: brightness(0) invert(.74); opacity: .95; transition: filter .3s, opacity .3s; }
.mm-footer__tiles li:hover img { filter: brightness(0) invert(1); opacity: 1; }

/* ================================================================
 * Technologies page (website/technologies.blade.php)
 *  .mm-core    four large feature cards
 *  .mm-stack   sticky category index + grouped technology tiles
 *  .mm-tech    one technology: logo, name, role
 * ================================================================ */
.mm-core { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.mm-core__card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px 26px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(7, 26, 47, .06), 0 28px 56px -40px rgba(7, 26, 47, .5);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s;
}
.mm-core__card::before {
  content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 140, 255, .14), transparent 70%); transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.mm-core__card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(11, 99, 206, .18), 0 36px 64px -36px rgba(11, 99, 206, .45); }
.mm-core__card:hover::before { transform: scale(1.3); }
.mm-core__logo {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 20px;
  background: linear-gradient(145deg, #F4F8FD, #E9F0FA); box-shadow: inset 0 0 0 1px rgba(7, 26, 47, .05);
}
.mm-core__logo img { width: 40px; height: 40px; }
.mm-core__name { margin: 0; font: 600 1.3rem/1.2 var(--mm-display); letter-spacing: -.02em; color: var(--mm-navy); }
.mm-core__role { margin: 0; flex: 1; font-size: .93rem; line-height: 1.65; color: #4A5D74; }
.mm-core__uses { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.mm-core__uses li { padding: 5px 10px; border-radius: 99px; font-size: .74rem; font-weight: 600; color: var(--mm-eyebrow); background: rgba(11, 99, 206, .07); }

/* Full stack: sticky index on the left, groups on the right */
.mm-stack { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.mm-stack__index { position: sticky; top: 110px; }
.mm-stack__index ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(7, 26, 47, .1); }
.mm-stack__index a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0 11px 18px; margin-left: -1px;
  border-left: 2px solid transparent; font-size: .92rem; font-weight: 500; color: #4A5D74; text-decoration: none;
  transition: color .3s, border-color .3s;
}
.mm-stack__index a span { font: 600 .72rem/1 var(--mm-display); letter-spacing: .08em; color: #8A9AB0; transition: color .3s; }
.mm-stack__index a em { margin-left: auto; font-style: normal; font-size: .74rem; font-weight: 600; color: #8A9AB0; }
.mm-stack__index a:hover { color: var(--mm-navy); }
.mm-stack__index a.is-current { color: var(--mm-navy); border-left-color: var(--mm-eyebrow); }
.mm-stack__index a.is-current span { color: var(--mm-eyebrow); }
.mm-stack__index a:focus-visible { outline: 2px solid var(--mm-eyebrow); outline-offset: 2px; border-radius: 4px; }

.mm-stack__groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.mm-stack__group { scroll-margin-top: 110px; }
.mm-stack__head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(7, 26, 47, .1); }
.mm-stack__num { padding-top: .45em; font: 600 .8rem/1 var(--mm-display); letter-spacing: .08em; color: var(--mm-eyebrow); }
.mm-stack__title { margin: 0; font: 600 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--mm-display); letter-spacing: -.02em; color: var(--mm-navy); }
.mm-stack__lede { margin: 6px 0 0; font-size: .95rem; line-height: 1.6; color: #4A5D74; }
.mm-stack__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }

.mm-tech {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(7, 26, 47, .06), 0 14px 30px -26px rgba(7, 26, 47, .45);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s;
}
.mm-tech:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(11, 99, 206, .18), 0 20px 40px -26px rgba(11, 99, 206, .45); }
.mm-tech__logo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, #F4F8FD, #E9F0FA); }
.mm-tech__logo img { width: 26px; height: 26px; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.mm-tech:hover .mm-tech__logo img { transform: scale(1.1); }
.mm-tech__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-tech__name { font: 600 .98rem/1.3 var(--mm-display); letter-spacing: -.01em; color: var(--mm-navy); }
.mm-tech__role { font-size: .82rem; line-height: 1.45; color: #6B7A90; }

@media (max-width: 1180px) { .mm-stack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .mm-core { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-stack { grid-template-columns: minmax(0, 1fr); }
  .mm-stack__index { position: static; }
  /* The index becomes a horizontal row of category chips. */
  .mm-stack__index ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; border-left: 0; scrollbar-width: none; }
  .mm-stack__index ol::-webkit-scrollbar { display: none; }
  .mm-stack__index a { white-space: nowrap; margin: 0; padding: 9px 14px; border: 1px solid rgba(7, 26, 47, .12); border-radius: 99px; }
  .mm-stack__index a span, .mm-stack__index a em { display: none; }
  .mm-stack__index a.is-current { border-color: var(--mm-eyebrow); background: rgba(11, 99, 206, .07); }
}
@media (max-width: 640px) {
  .mm-core { grid-template-columns: minmax(0, 1fr); }
  .mm-stack__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mm-tech { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-core__card, .mm-core__card::before, .mm-tech, .mm-tech__logo img, .mm-stack__index a { transition: none; }
}
.mm-tech-more { display: flex; justify-content: center; margin: 32px 0 0; }