/* =========================================================================
   Media Maze — design system
   Ported from the "Media Maze Site v2" Claude Design prototype.
   ========================================================================= */

:root {
  --mm-accent: #7DFB4F; /* overridden inline from the Customizer, see inc/customizer.php */
  --mm-bg: #0B0C0A;
  --mm-bg-alt: #141712;
  --mm-cream: #F4F2ED;
  --mm-diamond-stroke: #3D7A2E;

  --mm-fg-on-dark: #F4F2ED;
  --mm-fg-on-dark-muted: rgba(244, 242, 237, .62);
  --mm-fg-on-dark-faint: rgba(244, 242, 237, .5);
  --mm-border-on-dark: rgba(244, 242, 237, .14);

  --mm-fg-on-light: #0B0C0A;
  --mm-text-muted: #5A5C56;
  --mm-text-muted-2: #3E403A;
  --mm-text-faint: #8A8C86;
  --mm-border-on-light: rgba(11, 12, 10, .16);

  --mm-ease: cubic-bezier(.16, 1, .3, 1);
  --mm-max: 1280px;
  --mm-gutter: 40px;
}

.wp-block-heading {
    margin: 0 67.5px;
    padding: 30px 0;
}

.wp-block-paragraph {
    margin: 0 67.5px;
    padding: 5px 0;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; background: var(--mm-bg); }
body.mm-body {
  margin: 0;
  background: var(--mm-bg);
  color: var(--mm-fg-on-dark);
  font-family: Archivo, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mm-body * { box-sizing: border-box; }
.mm-body a { text-decoration: none; }
.mm-body a:hover { color: var(--mm-fg-on-dark); }
.mm-body input, .mm-body textarea, .mm-body button, .mm-body select { font-family: inherit; }
.mm-body input:focus, .mm-body textarea:focus { outline: none; border-color: var(--mm-accent); }
.mm-body ::selection { background: var(--mm-accent); color: var(--mm-bg); }
.mm-body h1, .mm-body h2, .mm-body h3 { font-family: Archivo, Helvetica, Arial, sans-serif; }

.mm-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.mm-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mm-accent);
}
.mm-eyebrow__rule { width: 56px; height: 1px; background: var(--mm-accent); display: block; flex: 0 0 auto; }
.mm-section--light .mm-eyebrow,
.mm-section--light .mm-eyebrow--label { color: var(--mm-fg-on-light); }
.mm-eyebrow--label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-accent); }

/* Section max-width/centering is now Bootstrap's .container (assets/vendor/bootstrap-grid.min.css) */

.mm-grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 242, 237, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 237, .045) 1px, transparent 1px);
  background-size: 64px 64px;
}

.mm-diamond {
  position: absolute; pointer-events: none;
}
.mm-diamond svg { width: 100%; height: 100%; }

/* ---------- Buttons ---------- */
.mm-btn {
  font-size: 14px; font-weight: 600; padding: 15px 24px;
  display: inline-flex; align-items: center; gap: 12px; border-radius: 3px;
  cursor: pointer; border: none; white-space: nowrap;
  transition: transform .3s var(--mm-ease), border-color .3s, background .25s, color .25s;
}
.mm-btn:hover { transform: translateY(-3px); }
.mm-btn--solid { background: var(--mm-accent); color: var(--mm-bg); }
.mm-btn--solid:hover { color: var(--mm-bg); }
.mm-btn--dark { background: var(--mm-bg); color: var(--mm-fg-on-dark); }
.mm-btn--dark:hover { color: var(--mm-fg-on-dark); }
.mm-btn--outline { border: 1px solid rgba(244, 242, 237, .28); color: var(--mm-fg-on-dark); }
.mm-btn--outline:hover { border-color: var(--mm-fg-on-dark); color: var(--mm-fg-on-dark); }
.mm-btn--accent-outline { border: 1px solid var(--mm-accent); color: var(--mm-accent); padding: 12px 20px; font-size: 13px; }
.mm-btn--accent-outline:hover { background: var(--mm-accent); color: var(--mm-bg); }
.mm-btn--on-accent { border: 1px solid rgba(11, 12, 10, .4); color: var(--mm-fg-on-light); }
.mm-btn--on-accent:hover { border-color: var(--mm-fg-on-light); color: var(--mm-fg-on-light); }
.mm-arrow { font-size: 12px; }

/* ---------- Header ---------- */
.mm-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--mm-accent); z-index: 200; transition: width .1s linear;
}
.mm-header {
  position: sticky; top: 0; z-index: 150;
  background: rgba(11, 12, 10, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(244, 242, 237, .1);
}
.mm-header__inner {
  padding-top: 20px; padding-bottom: 20px;
  display: flex; align-items: center; gap: 48px;
}
.mm-logo { flex: 0 0 auto; display: flex; align-items: center; }
.mm-logo__desktop > a {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--mm-fg-on-dark) !important;
}
/* Site Identity logo (Customizer > Site Identity) — cap its height to the
   header's row height instead of trusting whatever size was uploaded. */
.mm-logo__desktop, .mm-logo__mobile { line-height: 0; }
.mm-logo__desktop .custom-logo-link, .mm-logo__mobile { display: block; }
.mm-logo__desktop img, .mm-logo__mobile img { display: block; max-height: 36px; width: auto; }
/* The mobile logo only exists in the DOM when one's set in the Customizer —
   this modifier is what actually does the swap, so sites without one keep
   showing the main logo/wordmark at every width. */
.mm-logo__mobile { display: none; }
.mm-nav-wrap { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.mm-nav { display: contents; }
.mm-nav__list { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.mm-nav__list li { margin: 0; }
.mm-nav__list a {
  font-size: 14px; font-weight: 600; color: var(--mm-fg-on-dark) !important;
  transition: color .25s;
}
.mm-nav__list a:hover { color: var(--mm-accent) !important; }
.mm-header__cta { flex: 0 0 auto; }
.mm-nav-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto; background: none; border: none; cursor: pointer;
}
.mm-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--mm-fg-on-dark); }

/* ---------- Footer ---------- */
.mm-footer { background: var(--mm-bg); border-top: 1px solid rgba(244, 242, 237, .12); padding: 80px 0 28px; }
.mm-footer__grid { padding-bottom: 56px; }
.mm-footer__brand .mm-logo { display: block; margin-bottom: 18px; }
.mm-footer__brand p { font-size: 14.5px; line-height: 1.6; color: var(--mm-fg-on-dark-faint); margin: 0; max-width: 285px; }
.mm-footer__col { display: flex; flex-direction: column; gap: 12px; }
.mm-footer__col .mm-eyebrow--label { margin-bottom: 6px; }
.mm-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mm-footer__col > a { list-style: none; }
.mm-footer__nav a, .mm-footer__col > a {
  font-size: 14.5px; font-weight: 600; color: var(--mm-fg-on-dark) !important; transition: color .25s;
  display: inline-block; padding: 6px 0;
}
.mm-footer__nav a:hover, .mm-footer__col > a:hover { color: var(--mm-accent) !important; }
.mm-footer__phone { font-size: 14.5px; font-weight: 600; }
.mm-footer__muted { font-size: 14.5px; color: var(--mm-fg-on-dark-faint); }
.mm-footer__disclaimer {
  padding-top: 32px; padding-bottom: 32px; margin-top: 48px; border-top: 1px solid rgba(244, 242, 237, .12);
  display: flex; flex-direction: column; gap: 8px;
}
.mm-footer__disclaimer p { font-size: 12px; line-height: 1.65; color: rgba(244, 242, 237, .38); margin: 0; text-align: center; }
.mm-footer__disclaimer-lead { color: rgba(244, 242, 237, .55); font-weight: 600; margin-bottom: 2px !important; }
.mm-footer__disclaimer strong { color: rgba(244, 242, 237, .52); font-weight: 600; }
.mm-footer__bottom {
  padding-top: 24px; border-top: 1px solid rgba(244, 242, 237, .12);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; color: rgba(244, 242, 237, .4);
}
.mm-footer__legal { display: flex; gap: 26px; }
.mm-footer__legal a { color: rgba(244, 242, 237, .4) !important; }
@media (max-width: 767.98px) {
  .mm-footer { padding: 56px 0 24px; }
  .mm-footer__grid { padding-bottom: 40px; }
  .mm-footer__disclaimer { margin-top: 36px; padding-top: 28px; }
  .mm-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Section backgrounds ---------- */
.mm-section { position: relative; }
.mm-section--dark { background: var(--mm-bg); color: var(--mm-fg-on-dark); }
.mm-section--darker { background: var(--mm-bg-alt); color: var(--mm-fg-on-dark); }
.mm-section--light { background: var(--mm-cream); color: var(--mm-fg-on-light); }
.mm-section--accent { background: var(--mm-accent); color: var(--mm-fg-on-light); }
.mm-section--pad-lg { padding: 104px 0; }
.mm-section--pad-md { padding: 96px 0; }
.mm-section--pad-sm { padding: 88px 0; }
.mm-section--overflow-hidden { overflow: hidden; }
.mm-section--border-b { border-bottom: 1px solid rgba(244, 242, 237, .1); }

/* ---------- Reveal / motion primitives ---------- */
[data-reveal] { opacity: 0; }
body[data-mm-reveal="none"] [data-reveal] { opacity: 1 !important; transform: none !important; }
[data-reveal].mm-reveal--up { transform: translateY(20px); transition: opacity .8s var(--mm-ease), transform .8s var(--mm-ease); }
[data-reveal].mm-reveal--up-sm { transform: translateY(16px); transition: opacity .7s var(--mm-ease), transform .7s var(--mm-ease); }
[data-reveal].mm-reveal--fade-only { transition: opacity 1s ease; }
[data-reveal].mm-is-visible { opacity: 1; transform: none; }
[data-mm-mask] { overflow: hidden; padding-bottom: .08em; opacity: 1 !important; }
[data-mm-mask-inner] { display: block; transform: translateY(108%); transition: transform 1.05s var(--mm-ease); isolation: isolate; }
[data-mm-mask].mm-is-visible [data-mm-mask-inner],
[data-reveal].mm-is-visible [data-mm-mask] [data-mm-mask-inner],
[data-reveal-stagger].mm-is-visible [data-mm-mask] [data-mm-mask-inner] { transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(16px); }
[data-reveal-stagger].mm-is-visible > * { opacity: 1; transform: none; transition: opacity .7s var(--mm-ease), transform .7s var(--mm-ease); }
[data-reveal-stagger].mm-is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].mm-is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-stagger].mm-is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].mm-is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-draw] { stroke-dasharray: 1px; stroke-dashoffset: 1px; transition: stroke-dashoffset 1.6s var(--mm-ease); }
[data-draw].mm-is-drawn { stroke-dashoffset: 0 !important; }
/* Same self-draw effect, but measured/triggered independently by the tab
   switcher below instead of the scroll-reveal sweep — its panel is
   display:none until clicked, so getTotalLength() can't be trusted until
   the moment it becomes visible. */
[data-draw-tab] { stroke-dasharray: 1px; stroke-dashoffset: 1px; transition: stroke-dashoffset 1.6s var(--mm-ease); }
[data-draw-tab].mm-is-drawn { stroke-dashoffset: 0 !important; }
[data-parallax] { will-change: transform; }

/* ---------- Numbered grid (how we work / working principles / what you get) ---------- */
.mm-numbered-grid {
  border-top: 1px solid rgba(244, 242, 237, .14); border-bottom: 1px solid rgba(244, 242, 237, .14);
}
.mm-numbered-grid__item { padding: 26px; border-left: 1px solid rgba(244, 242, 237, .14); }
.mm-numbered-grid__item:first-child { padding-left: 0; border-left: none; }
/* Below lg, the --4 variant wraps 2-per-row (col-6): only the row-starters
   (odd items) should lose their divider, not just the very first item. */
@media (max-width: 991.98px) {
  .mm-numbered-grid--4 .mm-numbered-grid__item:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .mm-numbered-grid--4 .mm-numbered-grid__item:nth-child(2n) { border-left: 1px solid rgba(244, 242, 237, .14); padding-left: 26px; }
}
.mm-numbered-grid__num { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--mm-accent); display: block; margin-bottom: 10px; }
.mm-section--light span.mm-numbered-grid__num { color: #000; }
.mm-numbered-grid__item h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.mm-numbered-grid__item p { font-size: 13.5px; line-height: 1.55; color: rgba(244, 242, 237, .55); margin: 0; }

/* Light background variant — swap the near-white dividers/copy for
   dark-on-cream equivalents so both the grid lines and the item
   descriptions stay legible (the number stays accent green either way). */
.mm-numbered-grid--on-light { border-top-color: var(--mm-border-on-light); border-bottom-color: var(--mm-border-on-light); }
.mm-numbered-grid--on-light .mm-numbered-grid__item { border-left-color: var(--mm-border-on-light); }
.mm-numbered-grid--on-light .mm-numbered-grid__item p { color: var(--mm-text-muted); }
@media (max-width: 991.98px) {
  .mm-numbered-grid--on-light.mm-numbered-grid--4 .mm-numbered-grid__item:nth-child(2n) { border-left-color: var(--mm-border-on-light); }
}

.mm-lead-grid { margin-bottom: 64px; }
.mm-lead-grid h2 { font-size: clamp(34px, 4.4vw, 62px); font-weight: 700; line-height: 1; letter-spacing: -.032em; margin: 0 0 24px; max-width: 710px; }
.mm-lead-grid p { font-size: 18.5px; line-height: 1.55; color: rgba(244, 242, 237, .6); margin: 0; max-width: 500px; }
.mm-section--light .mm-lead-grid p { color: var(--mm-text-muted); }
.mm-lead-grid--tight { margin-bottom: 56px; }
.mm-lead-grid--tight h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.02; max-width: 560px; margin: 0; }

/* ---------- Page hero (Work / What we do / About / Careers) ---------- */
.mm-page-hero { padding: 96px 0 104px; }
.mm-page-hero .container { position: relative; }
.mm-page-hero h1 {
  font-size: clamp(44px, 6.4vw, 92px); font-weight: 700; line-height: .96; letter-spacing: -.035em;
  margin: 0 0 40px; max-width: 955px;
}
.mm-page-hero p {
  font-size: 18.5px; line-height: 1.6; color: rgba(244, 242, 237, .6);
  max-width: 500px; }
.mm-page-hero .mm-diamond { right: -8%; top: -20%; width: 46%; aspect-ratio: 1; }

/* ---------- Home hero ---------- */
.mm-hero-home { padding: 96px 0 0; overflow: hidden; }
.mm-hero-home__grid { align-items: center; min-height: 520px; }
.mm-hero-home h1 { font-size: clamp(48px, 6.6vw, 96px); font-weight: 700; line-height: .94; letter-spacing: -.035em; margin: 0 0 26px; max-width: 700px; text-wrap: balance; }
.mm-hero-home__intro { font-size: 18px; line-height: 1.55; color: rgba(244, 242, 237, .62); max-width: 395px; margin: 0 0 36px; }
.mm-hero-home__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 0; }
.mm-hero-home__art { position: relative; }
.mm-hero-home__art-label {
  position: absolute; top: -34px; left: 8%; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-accent); line-height: 1.7;
}
.mm-hero-home__strip { border-top: 1px solid rgba(244, 242, 237, .14); margin-top: 56px; }
.mm-hero-home__strip-item { padding: 22px 24px; display: flex; gap: 14px; align-items: baseline; border-left: 1px solid rgba(244, 242, 237, .14); }
.mm-hero-home__strip-item:first-child { padding-left: 0; border-left: none; }
.mm-hero-home__strip-item .mm-numbered-grid__num { margin-bottom: 0; }
.mm-hero-home__strip-item span:last-child { font-size: 14.5px; font-weight: 500; }
@media (max-width: 767.98px) {
  .mm-hero-home__strip-item { border-left: none; padding-left: 24px; border-top: 1px solid rgba(244, 242, 237, .14); }
  .mm-hero-home__strip-item:first-child { border-top: none; }
}

/* ---------- Work teaser (home) ---------- */
.mm-work-teaser__head { margin-bottom: 64px; }
.mm-work-teaser__head h2 { font-size: clamp(34px, 4.2vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -.032em; margin: 0; max-width: 480px; }
.mm-work-teaser__head p { font-size: 15.5px; line-height: 1.6; color: var(--mm-text-muted); margin: 0; max-width: 355px; }
.mm-work-teaser__stack { display: flex; flex-direction: column; gap: 16px; }
.mm-work-teaser__stack > a { flex: 1; }
.mm-work-teaser__card {
  background: var(--mm-bg); color: var(--mm-fg-on-dark); padding: 26px 28px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; transition: transform .4s var(--mm-ease);
  text-decoration: none;
}
.mm-work-teaser__card:hover { transform: translateY(-4px); }
.mm-work-teaser__card--lead { padding: 26px 28px 30px; min-height: 400px; }
.mm-work-teaser__card--lead .mm-grid-lines { background-size: 44px 44px; }
/* Optional real photo behind the card, with a bottom-up scrim so the title/
   description (and the stat badge) stay legible over any image. Falls back
   to the existing grid-lines/diamond decoration when no image is set. */
.mm-work-teaser__card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .5s var(--mm-ease); }
.mm-work-teaser__card:hover .mm-work-teaser__card-image { transform: scale(1.04); }
.mm-work-teaser__card-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 12, 10, .1) 0%, rgba(11, 12, 10, .25) 45%, rgba(11, 12, 10, .92) 100%);
}
.mm-work-teaser__stat {
  position: absolute; top: 26px; right: 26px; z-index: 2;
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 20px; letter-spacing: -.01em;
  color: var(--mm-accent); background: rgba(11, 12, 10, .55); border: 1px solid rgba(125, 251, 79, .35);
  border-radius: 8px; padding: 7px 13px; backdrop-filter: blur(4px);
}
.mm-work-teaser__card--lead .mm-work-teaser__stat { font-size: 26px; padding: 9px 16px; }
.mm-work-teaser__card-meta {
  position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 242, 237, .5);
}
.mm-work-teaser__card--lead .mm-work-teaser__card-meta { margin-bottom: 0; }
.mm-work-teaser__card:not(.mm-work-teaser__card--lead) .mm-work-teaser__card-meta { margin-bottom: 22px; }
.mm-work-teaser__diamond { position: absolute; pointer-events: none; transition: transform .5s var(--mm-ease); }
.mm-work-teaser__diamond svg { width: 100%; height: 100%; overflow: visible; }
.mm-work-teaser__diamond path { fill: none; stroke: var(--mm-accent); stroke-width: 2.5; opacity: .5; }
.mm-work-teaser__diamond--lead { right: -10%; bottom: -22%; width: 60%; aspect-ratio: 1; }
.mm-work-teaser__diamond--lead path { stroke-width: 2; }
.mm-work-teaser__diamond--sm { right: -8%; bottom: -30%; width: 40%; aspect-ratio: 1; }
.mm-work-teaser__diamond--sm path { stroke-width: 1.5; opacity: .4; }
.mm-work-teaser__card:hover .mm-work-teaser__diamond { transform: scale(1.06) rotate(6deg); }
.mm-work-teaser__card-body { position: relative; z-index: 2; margin-top: auto; }
.mm-work-teaser__card--lead h3 { font-size: clamp(30px, 3.4vw, 42px); margin: 0 0 12px; }
.mm-work-teaser__card:not(.mm-work-teaser__card--lead) h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.05; margin: 0 0 10px; }
.mm-work-teaser__card h3 { font-weight: 700; letter-spacing: -.03em; line-height: 1; }
/* Stack cards don't wrap their text in .mm-work-teaser__card-body, so they
   need their own stacking context to paint above the image + scrim. */
.mm-work-teaser__card h3,
.mm-work-teaser__card p,
.mm-work-teaser__card-link { position: relative; z-index: 2; }
.mm-work-teaser__card p { line-height: 1.55; color: rgba(244, 242, 237, .6); margin: 0 0 26px; max-width: 300px; }
.mm-work-teaser__card--lead p { font-size: 14.5px; }
.mm-work-teaser__card:not(.mm-work-teaser__card--lead) p { font-size: 14px; margin-bottom: 20px; max-width: 275px; color: rgba(244, 242, 237, .58); }
.mm-work-teaser__card-link {
  font-weight: 600; color: var(--mm-accent); border-bottom: 1px solid var(--mm-accent); padding-bottom: 4px;
  display: inline-flex; gap: 10px; align-items: center; align-self: flex-start;
}
.mm-work-teaser__card--lead .mm-work-teaser__card-link { font-size: 13.5px; }
.mm-work-teaser__card:not(.mm-work-teaser__card--lead) .mm-work-teaser__card-link { font-size: 13px; margin-top: auto; }

/* ---------- Accent split (people / careers CTA panels) ---------- */
.mm-accent-split__art { position: relative; overflow: hidden; }
/* The no-image fallback's only children are position:absolute (the grid
   lines + decorative svg), so there's nothing left in normal flow to give
   the column a height — without this it collapses to 0px (the row's
   align-items:center means it can't fall back to stretching against its
   sibling either) at every breakpoint, including full-width mobile. Scoped
   to the fallback only so a real uploaded image still shows at its own
   natural aspect ratio, uncropped. */
.mm-accent-split__art--fallback { aspect-ratio: 5 / 4; }
.mm-accent-split__art .mm-grid-lines { background-size: 30px 30px; background-image: linear-gradient(rgba(244, 242, 237, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 242, 237, .06) 1px, transparent 1px); }
.mm-accent-split__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-accent-split__eyebrow { display: block; margin-bottom: 26px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.mm-accent-split h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.032em; margin: 0 0 24px; max-width: 600px; }
.mm-accent-split--reverse h2 { font-size: clamp(34px, 4.8vw, 64px); letter-spacing: -.034em; }
.mm-accent-split p { font-size: 16px; line-height: 1.6; margin: 0 0 34px; max-width: 550px; }
.mm-accent-split__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Background variants — accent (green), light (cream/white), dark (near-black) */
.mm-accent-split--bg-accent { background: var(--mm-accent); color: var(--mm-fg-on-light); }
.mm-accent-split--bg-light { background: var(--mm-cream); color: var(--mm-fg-on-light); }
.mm-accent-split--bg-accent p, .mm-accent-split--bg-light p { color: rgba(11, 12, 10, .72); }
.mm-accent-split--bg-dark { background: var(--mm-bg); color: var(--mm-fg-on-dark); }
.mm-accent-split--bg-dark p { color: var(--mm-fg-on-dark-muted); }
.mm-accent-split--bg-dark .mm-accent-split__eyebrow { color: var(--mm-accent); }
.mm-accent-split--bg-dark .mm-accent-split__art { border: 1px solid rgba(244, 242, 237, .14); }

/* ---------- CTA hero (big closer) ---------- */
.mm-cta-hero { padding: 112px 0 104px; overflow: hidden; }
.mm-cta-hero .container { position: relative; }
.mm-cta-hero h2 { font-size: clamp(42px, 6.2vw, 88px); font-weight: 700; line-height: .96; letter-spacing: -.035em; margin: 0 0 40px; max-width: 825px; }
.mm-cta-hero .mm-diamond { right: -6%; top: -10%; width: 52%; aspect-ratio: 1; }

/* ---------- CTA band (simple closer row) ---------- */
.mm-cta-band .container { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.mm-cta-band h2 { font-size: clamp(30px, 4vw, 54px); font-weight: 700; letter-spacing: -.032em; line-height: 1; margin: 0; max-width: 675px; }

/* ---------- List rows (work list) ---------- */
.mm-list { border-top: 1px solid var(--mm-border-on-light); }
.mm-list__row {
  padding: 38px 0; margin: 0;
  border-bottom: 1px solid var(--mm-border-on-light); cursor: pointer; text-decoration: none; color: inherit;
  transition: padding-left .35s var(--mm-ease), background .35s;
}
.mm-list__row:hover { padding-left: 16px; background: rgba(11, 12, 10, .03); }
.mm-list__num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--mm-text-muted); }
.mm-list__tag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-text-muted); display: block; margin-bottom: 14px; }
.mm-list__title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.032em; line-height: 1; margin: 0; }
.mm-list__desc { font-size: 14.5px; line-height: 1.55; color: var(--mm-text-muted); margin: 0; max-width: 315px; }
.mm-list__meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-text-muted); }
.mm-list__arrow { font-size: 22px; color: var(--mm-accent); text-align: right; }
.mm-list__note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--mm-text-faint); margin: 26px 0 0; }

/* ---------- Careers list (dark section, accent role cards) ---------- */
.mm-careers-list h2 { font-size: clamp(38px, 5vw, 64px); font-weight: 700; line-height: .96; letter-spacing: -.035em; margin: 0; max-width: 420px; }
.mm-careers-list .mm-list__note { color: rgba(244, 242, 237, .45); margin-top: 28px; }
.mm-careers-cards { display: flex; flex-direction: column; gap: 18px; }
.mm-careers-card {
  display: block; background: var(--mm-accent); border-radius: 10px; padding: 30px 36px;
  color: var(--mm-fg-on-light); text-decoration: none;
  transition: transform .35s var(--mm-ease), box-shadow .35s var(--mm-ease);
}
.mm-careers-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(125, 251, 79, .5); color: var(--mm-fg-on-light); }
.mm-careers-card__eyebrow {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(11, 12, 10, .55); margin-bottom: 14px;
}
.mm-careers-card__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mm-careers-card__info h3 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 6px; }
.mm-careers-card__info p { font-size: 14px; color: rgba(11, 12, 10, .62); margin: 0; }
.mm-careers-card__cta {
  font-size: 14px; font-weight: 700; color: var(--mm-fg-on-light); flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--mm-fg-on-light); padding-bottom: 3px;
}
@media (max-width: 767.98px) {
  .mm-careers-card { padding: 24px 22px; }
}

/* ---------- Stat counters (count up on scroll) ---------- */
.mm-stats-counter__row { row-gap: 40px; }
.mm-stats-counter__label {
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mm-accent); margin-bottom: 18px;
}
.mm-section--accent .mm-stats-counter__label { color: var(--mm-fg-on-light); opacity: .65; }
.mm-stats-counter__value { font-size: clamp(38px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-bottom: 12px; }
.mm-stats-counter__suffix { color: var(--mm-accent); }
.mm-section--accent .mm-stats-counter__suffix { color: var(--mm-fg-on-light); }
.mm-stats-counter__item p { font-size: 13.5px; line-height: 1.5; color: inherit; opacity: .6; margin: 0; max-width: 220px; }

/* ---------- Testimonials (star rating + click-through quotes) ---------- */
.mm-testimonials__head { margin-bottom: 56px; }
.mm-testimonials__head h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; letter-spacing: -.032em; line-height: 1.02; margin: 14px 0 0; }
.mm-testimonials__rating { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mm-testimonials__stars { display: flex; gap: 3px; color: var(--mm-accent); }
.mm-testimonials__rating-text { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .04em; color: inherit; opacity: .6; }
@media (min-width: 992px) {
  .mm-testimonials__rating { align-items: flex-end; text-align: right; }
}

.mm-testimonials__carousel { position: relative; }
.mm-testimonials__slide { display: none; }
.mm-testimonials__slide.mm-is-active { display: block; animation: mm-panel-fade .45s var(--mm-ease); }
.mm-testimonials__quote { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.4; font-weight: 500; letter-spacing: -.01em; margin: 0 0 28px; max-width: 780px; }
.mm-testimonials__author { display: flex; flex-direction: column; gap: 2px; }
.mm-testimonials__name { font-weight: 700; }
.mm-testimonials__role { font-size: 13.5px; opacity: .6; }
.mm-testimonials__controls { display: flex; gap: 10px; margin-top: 40px; }
.mm-testimonials__prev, .mm-testimonials__next {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--mm-border-on-dark);
  background: transparent; color: inherit; cursor: pointer; font-size: 16px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s, border-color .25s;
}
.mm-section--light .mm-testimonials__prev, .mm-section--light .mm-testimonials__next,
.mm-section--accent .mm-testimonials__prev, .mm-section--accent .mm-testimonials__next { border-color: var(--mm-border-on-light); }
.mm-testimonials__prev:hover, .mm-testimonials__next:hover { background: var(--mm-accent); color: var(--mm-bg); border-color: var(--mm-accent); }

/* ---------- Service rows (What we do) ---------- */
.mm-service-rows { display: flex; flex-direction: column; gap: 8px; }
.mm-service-row {
  padding: 44px 0; border-top: 1px solid var(--mm-border-on-light); border-radius: 16px;
  transition: background .3s var(--mm-ease); align-items: center;
}
.mm-service-row:hover { background: rgba(125, 251, 79, .045); }
.mm-service-row:last-child { border-bottom: 1px solid var(--mm-border-on-light); }
.mm-service-row__num {
  display: inline-flex; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--mm-diamond-stroke); background: rgba(125, 251, 79, .22); border-radius: 999px; padding: 7px 14px;
}
.mm-service-row h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 14px; }
.mm-service-row > div > p { font-size: 15px; line-height: 1.6; color: var(--mm-text-muted); margin: 0; max-width: 265px; }
/* Detail grid — small "spec cards" rather than plain bordered table cells,
   each with its own accent tick and a hover lift for a bit of life. */
.mm-service-row__details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-self: start; }
.mm-service-row__detail {
  background: #fff; padding: 22px 22px 20px; border-radius: 14px; border: 1px solid var(--mm-border-on-light);
  transition: transform .3s var(--mm-ease), box-shadow .3s var(--mm-ease), border-color .3s;
}
.mm-service-row__detail::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--mm-accent); margin-bottom: 12px; }
.mm-service-row__detail:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 16px 32px -20px rgba(11, 12, 10, .28); }
.mm-service-row__detail strong { font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; }
.mm-service-row__detail span { font-size: 13px; line-height: 1.5; color: var(--mm-text-muted); }

/* ---------- Text split (About "why us") ---------- */
.mm-text-split h2 { font-size: clamp(32px, 4.2vw, 58px); font-weight: 700; line-height: 1.02; letter-spacing: -.032em; margin: 0 0 30px; max-width: 785px; }
.mm-text-split p { margin: 0 0 24px; max-width: 495px; }
.mm-text-split p:first-of-type { font-size: 19px; line-height: 1.6; color: var(--mm-text-muted-2); }
.mm-text-split p:last-of-type { font-size: 15px; line-height: 1.65; color: var(--mm-text-muted); margin-bottom: 0; }

/* ---------- Contact page ---------- */
.mm-contact-hero { padding: 88px 0 104px; overflow: hidden; }
.mm-contact-hero .container { position: relative; }
.mm-contact-hero h1 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 700; line-height: .98; letter-spacing: -.035em; margin: 0 0 26px; max-width: 630px; }
.mm-contact-hero__intro { font-size: 17.5px; line-height: 1.6; color: rgba(244, 242, 237, .6); max-width: 400px; margin: 0 0 48px; }
.mm-contact-hero__tiles { display: grid; gap: 1px; background: rgba(244, 242, 237, .14); border-top: 1px solid rgba(244, 242, 237, .14); border-bottom: 1px solid rgba(244, 242, 237, .14); }
.mm-contact-hero__tile { background: var(--mm-bg); padding: 22px 0; }
.mm-contact-hero__tile-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-accent); margin-bottom: 10px; }
.mm-contact-hero__tile-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.mm-contact-hero__tile-value--address { font-size: 15.5px; font-weight: 400; line-height: 1.55; color: rgba(244, 242, 237, .72); }

.mm-contact-panel { border: 1px solid rgba(244, 242, 237, .16); padding: 36px 34px; background: #0F110D; }
.mm-contact-panel .wpcf7-form-control-wrap,
.mm-contact-panel p { display: block; margin: 0 0 20px; }
.mm-contact-panel label { display: block; margin-bottom: 20px; }
.mm-contact-panel .mm-field-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 242, 237, .5); display: block; margin-bottom: 10px;
}
.mm-contact-panel input[type="text"],
.mm-contact-panel input[type="email"],
.mm-contact-panel textarea {
  width: 100%; padding: 14px 15px; font-size: 15.5px; background: var(--mm-bg);
  border: 1px solid rgba(244, 242, 237, .2); color: var(--mm-fg-on-dark);
}
.mm-contact-panel textarea { resize: vertical; }
.mm-contact-panel input.wpcf7-not-valid, .mm-contact-panel textarea.wpcf7-not-valid { border-color: #ff8a8a; }
.mm-contact-panel .wpcf7-submit,
.mm-contact-panel button[type="submit"] {
  width: 100%; padding: 18px; font-size: 14.5px; font-weight: 600; background: var(--mm-accent); color: var(--mm-bg);
  border: none; cursor: pointer; display: inline-flex; justify-content: center; gap: 12px; align-items: center;
  transition: transform .3s var(--mm-ease);
}
.mm-contact-panel .wpcf7-submit:hover { transform: translateY(-2px); }
.mm-contact-panel .mm-form-note { font-size: 12.5px; line-height: 1.5; color: rgba(244, 242, 237, .45); margin: 0; }
.mm-contact-panel .wpcf7-response-output { font-size: 13px; margin: 16px 0 0; padding: 12px 14px; border-radius: 0; }
.mm-contact-panel .wpcf7-spinner { margin: 12px auto 0; display: block; }

.mm-contact-sent {
  display: none; border: 1px solid var(--mm-accent); padding: 52px 40px; min-height: 460px;
  flex-direction: column; justify-content: center;
}
.mm-contact-sent__mark { width: 40px; height: 40px; background: var(--mm-accent); display: block; margin-bottom: 26px; }
.mm-contact-sent h2 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 14px; }
.mm-contact-sent p { font-size: 16.5px; line-height: 1.6; color: rgba(244, 242, 237, .62); margin: 0; max-width: 325px; }

.mm-contact-form-wrap.mm-is-sent .mm-contact-panel { display: none; }
.mm-contact-form-wrap.mm-is-sent .mm-contact-sent { display: flex; }

/* ---------- Work showcase (tabbed case-study switcher) ----------
   Reference: a light page with a bold, rounded "card" sitting on top of it —
   the active tab is an extension of that same card (matching colour, rounded
   top corners, seamed together), everything else floats on the light page. */
.mm-work-showcase__intro {
  text-align: center; max-width: 640px; margin: 0 auto 48px;
}
.mm-work-showcase__intro h2 {
  font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  margin: 0 0 16px; color: var(--mm-fg-on-light);
}
.mm-work-showcase__intro p {
  font-size: 17px; line-height: 1.6; margin: 0; color: var(--mm-text-muted);
}

.mm-work-showcase__tabs {
  display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
}
.mm-work-showcase__tab {
  position: relative; background: transparent; border: none; box-shadow: none; border-radius: 16px 16px 0 0;
  -webkit-appearance: none; appearance: none; margin: 0;
  cursor: pointer; padding: 20px 32px; font-size: 16px; font-weight: 700; font-family: Archivo, sans-serif;
  color: var(--mm-fg-on-light); opacity: .55; white-space: nowrap; transition: opacity .25s, background-color .25s;
}
.mm-work-showcase__tab:focus { outline: none; }
.mm-work-showcase__tab:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: -4px; }
.mm-work-showcase__tab:hover { opacity: .85; }
.mm-work-showcase__tab.mm-is-active { opacity: 1; }
.mm-work-showcase--bg-dark .mm-work-showcase__tab.mm-is-active { background: linear-gradient(135deg, var(--mm-bg-alt) 0%, var(--mm-bg) 65%); color: var(--mm-fg-on-dark); }
.mm-work-showcase--bg-accent .mm-work-showcase__tab.mm-is-active { background: linear-gradient(135deg, var(--mm-accent) 0%, #4fd62c 100%); color: var(--mm-fg-on-light); }
.mm-work-showcase--bg-light .mm-work-showcase__tab.mm-is-active { background: linear-gradient(135deg, #ffffff 0%, var(--mm-cream) 100%); color: var(--mm-fg-on-light); box-shadow: 0 0 0 1px var(--mm-border-on-light) inset; }

.mm-work-showcase__panels { position: relative; }
.mm-work-showcase__panel {
  display: none !important; position: relative; overflow: hidden;
  padding: 56px; border-radius: 24px;
  box-shadow: 0 28px 60px -20px rgba(11, 12, 10, .35);
}
.mm-work-showcase__panel.mm-is-active { display: block !important; animation: mm-panel-fade .45s var(--mm-ease); }
/* The active tab's square bottom corner sits flush against the panel's top
   edge only when that tab is first or last in the row (it's flush against
   the panel's own left/right edge too) — so only then does the panel's
   matching top corner need to go square to complete the seam. A middle tab
   floats above the panel with rounded corners visible on both sides. */
.mm-work-showcase__panel--first { border-radius: 0 24px 24px 24px; }
.mm-work-showcase__panel--last { border-radius: 24px 0 24px 24px; }
@keyframes mm-panel-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mm-work-showcase--bg-dark .mm-work-showcase__panel { background: linear-gradient(135deg, var(--mm-bg-alt) 0%, var(--mm-bg) 65%); color: var(--mm-fg-on-dark); }
.mm-work-showcase--bg-accent .mm-work-showcase__panel { background: linear-gradient(135deg, var(--mm-accent) 0%, #4fd62c 100%); color: var(--mm-fg-on-light); box-shadow: 0 28px 60px -24px rgba(125, 251, 79, .45); }
.mm-work-showcase--bg-light .mm-work-showcase__panel { background: linear-gradient(135deg, #ffffff 0%, var(--mm-cream) 100%); color: var(--mm-fg-on-light); box-shadow: 0 0 0 1px var(--mm-border-on-light) inset, 0 28px 60px -24px rgba(11, 12, 10, .16); }

/* Faint brand texture behind every panel — a dark-tinted variant so it still
   reads on the light-background option instead of vanishing into it. */
.mm-work-showcase__panel > .mm-grid-lines { z-index: 0; }
.mm-grid-lines--on-light {
  background-image:
    linear-gradient(rgba(11, 12, 10, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 12, 10, .05) 1px, transparent 1px);
}
/* A permanent corner flourish (not just the no-image fallback) so every
   panel has some brand presence even once real photography is in place. */
.mm-work-showcase__corner {
  position: absolute; z-index: 0; pointer-events: none; right: -6%; top: -12%; width: 34%; aspect-ratio: 1;
}
.mm-work-showcase__corner svg { width: 100%; height: 100%; }
.mm-work-showcase__corner path { fill: none; stroke: var(--mm-accent); stroke-width: 3; opacity: .35; }
.mm-work-showcase--bg-accent .mm-work-showcase__corner path,
.mm-work-showcase--bg-light .mm-work-showcase__corner path { stroke: var(--mm-fg-on-light); opacity: .15; }
.mm-work-showcase__panel > .row { position: relative; z-index: 1; }

.mm-work-showcase__tag {
  display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(125, 251, 79, .14); color: var(--mm-accent);
}
.mm-work-showcase--bg-accent .mm-work-showcase__tag { background: rgba(11, 12, 10, .12); color: inherit; }
.mm-work-showcase--bg-light .mm-work-showcase__tag { background: rgba(125, 251, 79, .16); color: var(--mm-text-muted-2); }
.mm-work-showcase__body h3 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 18px; }
.mm-work-showcase__body p { font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 385px; opacity: .85; }

/* Media "mat" — a tinted frame the image/illustration sits inset within, so
   even artwork with its own built-in whitespace reads as intentional rather
   than floating on empty background. */
.mm-work-showcase__media {
  position: relative; padding: 16px; border-radius: 24px;
  background: rgba(125, 251, 79, .12);
}
.mm-work-showcase--bg-accent .mm-work-showcase__media { background: rgba(11, 12, 10, .1); }
.mm-work-showcase--bg-light .mm-work-showcase__media { background: rgba(125, 251, 79, .18); }
.mm-work-showcase__media-inner { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 5/4; }
.mm-work-showcase__media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-work-showcase--bg-dark .mm-work-showcase__media-inner { background: var(--mm-bg); border: 1px solid rgba(244, 242, 237, .14); }
.mm-work-showcase--bg-accent .mm-work-showcase__media-inner,
.mm-work-showcase--bg-light .mm-work-showcase__media-inner { background: rgba(255, 255, 255, .5); }
.mm-work-showcase__diamond { position: absolute; right: 8%; bottom: 8%; width: 42%; aspect-ratio: 1; pointer-events: none; }
.mm-work-showcase__diamond svg { width: 100%; height: 100%; }
.mm-work-showcase__diamond path { fill: none; stroke: var(--mm-accent); stroke-width: 2.5; opacity: .55; }
.mm-work-showcase__stat {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  color: var(--mm-accent); background: rgba(11, 12, 10, .6); border: 1px solid rgba(125, 251, 79, .35);
  border-radius: 8px; padding: 8px 15px; backdrop-filter: blur(4px);
}

/* ---------- Responsive ----------
   Column stacking is now handled by Bootstrap's own col-12/col-lg-* classes
   in each block's markup, so this only holds styling that isn't a grid
   concern (typography, dividers, the mobile nav) plus responsive tweaks for
   the couple of elements deliberately left on CSS Grid (see main rules
   above for .mm-service-row__details / .mm-contact-hero__tiles). */
@media (max-width: 991.98px) {
  .mm-page-hero p { margin: 0; }
  .mm-list__arrow { text-align: left; }
  .mm-work-showcase__tab { padding: 14px 18px; font-size: 14px; }
  .mm-work-showcase__panel { padding: 32px; border-radius: 16px; }
  .mm-work-showcase__panel--first { border-radius: 0 16px 16px 16px; }
  .mm-work-showcase__panel--last { border-radius: 16px 0 16px 16px; }
}
@media (max-width: 767.98px) {
  /* justify-content:space-between fights with overflow-x:auto once the tabs
     no longer fit the row — items get squeezed/overlap instead of just
     scrolling. Below the point they always overflow, so scroll from the
     start instead and add scroll-padding so a snapped tab isn't flush
     against the screen edge. */
  .mm-work-showcase__tabs { justify-content: flex-start; gap: 4px; -webkit-overflow-scrolling: touch; scroll-padding-left: 4px; }
  .mm-work-showcase__tab { padding: 13px 16px; font-size: 13.5px; }
  /* Keep form fields at/above 16px on mobile — anything smaller makes
     Safari auto-zoom the page when a field is focused. */
  .mm-contact-panel input[type="text"],
  .mm-contact-panel input[type="email"],
  .mm-contact-panel textarea { font-size: 16px; }

  /* Desktop's padding scale (88-104px) is tuned for a big screen — on a
     phone it's a lot of empty scrolling between sections. */
  .mm-section--pad-lg { padding: 64px 0; }
  .mm-section--pad-md { padding: 56px 0; }
  .mm-section--pad-sm { padding: 48px 0; }

  /* These decorative diamonds sit behind the heading rather than in their
     own column, so at full section width on a phone they can visually
     crowd the (also full-width) heading text. Shrink them and push them
     further into the corner so only a sliver shows. */
  .mm-page-hero .mm-diamond { width: 58%; right: -26%; top: -14%; }
  .mm-cta-hero .mm-diamond { width: 60%; right: -24%; top: -8%; }
}

/* ---------- Block editor canvas polish ---------- */
.mm-editor-block { padding: 32px var(--mm-gutter); }
.mm-editor-label {
  display: block; margin-bottom: 12px; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-accent);
}
.mm-editor-repeater-item { position: relative; padding: 14px; margin-bottom: 14px; border: 1px dashed rgba(127, 127, 127, .35); }
.mm-editor-add-row { margin-top: 8px; }

@media (max-width: 780px) {
  .mm-logo--has-mobile .mm-logo__mobile { display: block; }
  .mm-logo--has-mobile .mm-logo__desktop { display: none; }
  .mm-logo__mobile img { max-height: 48px; }
  .mm-nav-toggle { display: flex; }
  .mm-nav-wrap {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--mm-bg); border-bottom: 1px solid rgba(244, 242, 237, .1);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 12px 24px;
    max-height: calc(100vh - 100%); overflow-y: auto;
  }
  .mm-nav-wrap.mm-is-open { display: flex; }
  .mm-nav__list { flex-direction: column; gap: 0; width: 100%; }
  /* The whole row is the tap target on mobile, not just the text — the <a>
     carries the padding (and thus the full hit area) instead of the <li>. */
  .mm-nav__list li { width: 100%; padding: 0; border-bottom: 1px solid rgba(244, 242, 237, .08); }
  .mm-nav__list a { display: block; padding: 15px 4px; }
  .mm-header__cta { margin-top: 16px; width: 100%; justify-content: center; }
  .mm-header__inner { position: relative; }
  .mm-service-row__details { grid-template-columns: 1fr; }
}