/* mm-hero-cta-row
   Horizontal row of CTAs (button + optional meta blocks) used directly under
   the hero h1/lede on any page. Flex layout, wraps on narrow viewports.

   Usage:
     <div class="mm-hero-cta-row local-scroll">
       <button class="btn-mm btn-mm-large">Portfolio</button>
       <button class="btn-mm-ghost btn-mm-large">Contact Sales</button>
     </div>

   Variant for case studies that pair the CTAs with right-aligned meta:
     <div class="mm-hero-cta-row">
       <div class="mm-hero-ctas">
         <button class="btn-mm btn-mm-large">Read the case</button>
       </div>
       <div class="mm-hero-meta">...</div>
     </div>
   The inner .mm-hero-ctas gets margin-right:auto to push meta blocks right. */

.mm-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px 24px;
	margin-top: 50px;
}

.mm-hero-cta-row .mm-hero-ctas {
	display: flex;
	gap: 12px;
	margin-right: auto;
}

@media (max-width: 991px) {
	.mm-hero-cta-row { gap: 22px 18px; }
}