/* Money Mango Marketing — mm-pro v1
   Additive polish layer. New filename on purpose: /assets/* is cached immutable for a
   year, so mm.css and mm-plus.css stay byte-identical and every browser gets this fresh.
   Loaded LAST. Every new class is prefixed mm- so nothing collides. */

/* ---------- menu button: icon instead of the word MENU ---------- */
.hamb{width:48px; min-width:48px; height:44px; padding:0; font-size:0; line-height:0;
  position:relative; border-radius:14px; justify-content:center}
.hamb::before{content:""; position:absolute; left:50%; top:50%; width:19px; height:2.2px;
  border-radius:2px; background:var(--ink); transform:translate(-50%,-50%);
  box-shadow:0 -6.5px 0 var(--ink), 0 6.5px 0 var(--ink)}
.mobile-menu .close{width:48px; height:44px; padding:0; font-size:0; line-height:0; position:relative; display:grid; place-items:center}
.mobile-menu .close::before,.mobile-menu .close::after{content:""; position:absolute; left:50%; top:50%;
  width:19px; height:2.2px; border-radius:2px; background:var(--ink)}
.mobile-menu .close::before{transform:translate(-50%,-50%) rotate(45deg)}
.mobile-menu .close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mobile-menu a{padding:4px 10px}
body.mm-locked{overflow:hidden}

/* ---------- images never show as empty white boxes while they load ---------- */
.frame,.mmp-browser img,.mmx-browser img,.mmp-browser,.mmx-hero-img{background:linear-gradient(135deg,#EFE2C6,#E2D2B0)}
.mmp-bar,.mmx-bar{background:var(--card)}

/* ---------- team cards ---------- */
.mmp-team .case{display:flex; flex-direction:column}
.mm-mono{display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
  border:2px solid var(--ink); font-family:var(--disp); font-weight:800; font-size:30px;
  line-height:1; letter-spacing:-.02em; margin:2px 0 14px; background:var(--card); color:var(--ink)}
.case.mango .mm-mono{background:var(--ink); color:var(--mango); border-color:var(--ink)}
.mm-person h3{margin:0}
.mm-role{font-weight:700; font-size:14.5px; letter-spacing:.01em; margin-top:4px}
.mm-person>p:not(.mm-role){margin-top:10px}
.mm-social{margin-top:auto; padding-top:20px}
.mm-ig{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:10px 17px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--card); color:var(--ink);
  font-family:var(--ui); font-weight:650; font-size:14.5px; letter-spacing:.01em;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease, color .18s ease}
.mm-ig svg{width:17px; height:17px; flex:none}
.mm-ig:hover{background:var(--ink); color:var(--card); transform:translateY(-2px)}
.mm-ig:focus-visible{outline:2.5px solid var(--leaf); outline-offset:3px}
.case.mango .mm-ig{background:rgba(255,253,247,.72)}
.case.mango .mm-ig:hover{background:var(--ink); color:var(--mango)}
.mm-founders{text-align:center; margin:34px auto 0; font-family:var(--ui); font-weight:650;
  letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; color:var(--leaf)}

/* ---------- shared: proof stage on the niche pages ---------- */
.mm-stage-tight{margin-top:26px}
.mm-stage-tight .mmp-info h3{margin-bottom:10px}
.mm-chips{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:20px 0 0; padding:0}
.mm-chips li{display:flex}
.mm-chips a{display:inline-flex; align-items:center; min-height:40px;
  border:1.5px solid var(--hair,rgba(23,19,12,.24)); border-radius:999px; padding:8px 15px;
  font-size:13.5px; font-weight:600; background:var(--card); color:var(--ink);
  transition:background .18s ease, color .18s ease, border-color .18s ease}
.mm-chips a:hover{background:var(--ink); color:var(--card); border-color:var(--ink)}
.mm-chips a:focus-visible{outline:2.5px solid var(--leaf); outline-offset:3px}

/* buttons in a narrow column: share the row, or stack at equal width */
.mm-stage-tight .btn-row{gap:12px; margin-top:24px}
.mm-stage-tight .btn-row .btn{flex:1 1 auto; justify-content:center; text-align:center}

/* ---------- small-screen sanity ---------- */
/* long handles were breaking mid-word on phones */
@media (max-width:560px){
  .mmp-ig-handle{font-size:clamp(21px,6.3vw,30px); letter-spacing:-.03em}
  .mm-mono{width:54px; height:54px; font-size:26px}
  .mm-ig{font-size:13.5px; padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.mm-ig:hover{transform:none}}