/* Homepage only — overrides the site-wide cream background from style.css. */
body.home { background-color: #fff; }

.mm-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 24px 90px;
  text-align: center;
}
.mm-hero-inner { width: 100%; }
.mm-hero-eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #A9A79D;
}
.mm-hero-heading {
  margin: 0 0 32px;
  font-family: 'Unbounded', sans-serif !important; /* must win over the sitewide Inter !important reset */
  font-size: 62px;
  font-weight: 900; /* only weight self-hosted */
  line-height: 1.1;
  letter-spacing: -1px;
  text-transform: uppercase;
  color: #14150F;
}
.mm-hero-rotate-word {
  display: inline-block;
  padding: 2px 16px;
  border-radius: 999px;
  background: #d3fb52;
  transition: opacity .22s ease, background-color .22s ease;
}

.mm-hero-sub {
  margin: 0 auto 40px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: #6B6960;
}
.mm-hero-highlight {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  background: #d3fb52;
  color: #14150F;
  font-weight: 700;
}

.mm-hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.mm-hero-cta {
  display: inline-block;
  background: #14150F;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter .15s ease;
}
.mm-hero-cta:hover { filter: brightness(1.3); color: #fff; }

.mm-hero-cta-secondary {
  display: inline-block;
  background: transparent;
  color: #14150F;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 31px;
  border: 1.5px solid #E3E1D9;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.mm-hero-cta-secondary:hover { background: #F5F4F0; border-color: #D8D6CC; color: #14150F; }

@media (max-width: 900px) {
  .mm-hero { padding: 90px 24px 70px; }
  .mm-hero-heading { font-size: 46px; }
}

@media (max-width: 640px) {
  .mm-hero { padding: 80px 20px 60px; }
  .mm-hero-heading { font-size: 34px; }
  .mm-hero-sub { font-size: 15px; }
  .mm-hero-cta, .mm-hero-cta-secondary { width: 100%; text-align: center; }
}