/* Page-specific styles for the Services and About marketing pages. */
.msm-marketing-page {
  min-width: 320px;
  overflow: hidden;
  background: var(--msm-paper);
  color: var(--msm-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.msm-marketing-page h1,
.msm-marketing-page h2,
.msm-marketing-page h3,
.msm-marketing-page p { margin-top: 0; }

.msm-marketing-page h1,
.msm-marketing-page h2,
.msm-marketing-page h3 {
  color: var(--msm-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0;
}

.msm-marketing-page h1 { margin-bottom: 24px; font-size: clamp(44px, 5.8vw, 72px); line-height: 1; }
.msm-marketing-page h2 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; }
.msm-marketing-page h3 { margin-bottom: 10px; font-size: 25px; line-height: 1.12; }
.msm-marketing-page p { color: var(--msm-ink-soft); font-size: 17px; line-height: 1.62; }

.msm-marketing-container { width: min(calc(100% - 72px), 1180px); margin-inline: auto; }
.msm-marketing-nav { border-bottom: 1px solid var(--msm-line); background: rgba(251, 250, 247, 0.97); }
.msm-marketing-nav__inner { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 28px; }
.msm-marketing-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--msm-ink); font-size: 12px; font-weight: 850; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; }
.msm-marketing-brand img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; }
.msm-marketing-links { display: flex; align-items: center; gap: 28px; }
.msm-marketing-links a:not(.msm-marketing-button) { color: var(--msm-ink-soft); font-size: 14px; font-weight: 750; text-decoration: none; }
.msm-marketing-links a:hover { color: var(--msm-gold-deep); }
.msm-marketing-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 13px; padding: 13px 21px; border: 1px solid #dca72e; border-radius: 7px; background: var(--msm-gold); color: var(--msm-ink); font-size: 14px; font-weight: 850; text-decoration: none; box-shadow: 0 9px 24px rgba(180, 123, 18, .14); transition: transform 160ms ease, box-shadow 160ms ease; }
.msm-marketing-button:hover { transform: translateY(-2px); box-shadow: 0 13px 30px rgba(180, 123, 18, .2); }
.msm-marketing-button--small { min-height: 44px; padding: 10px 17px; }

.msm-marketing-hero { padding: clamp(70px, 9vw, 126px) 0 clamp(68px, 8vw, 108px); border-bottom: 1px solid var(--msm-line); background: var(--msm-paper-warm); }
.msm-marketing-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: clamp(40px, 9vw, 130px); align-items: end; }
.msm-marketing-hero__copy { max-width: 730px; }
.msm-marketing-hero__aside { padding-left: 28px; border-left: 1px solid var(--msm-gold-deep); }
.msm-marketing-hero__aside p { margin-bottom: 0; font-size: 19px; }
#msm-services .msm-marketing-hero--services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(248, 244, 237, .99) 0%, rgba(248, 244, 237, .96) 38%, rgba(248, 244, 237, .65) 61%, rgba(248, 244, 237, .15) 100%),
    url("https://assets.medspamomentum.ai/site/v2/msm-services-hero-v1.png") 64% center / cover no-repeat !important;
}
#msm-services .msm-marketing-hero--services::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(52,29,64,.05));
  content: "";
  pointer-events: none;
}
#msm-services .msm-marketing-hero--services .msm-marketing-hero__inner {
  grid-template-columns: minmax(0, 640px);
  min-height: clamp(470px, 54vw, 620px);
  align-items: center;
}
#msm-services .msm-marketing-hero--services .msm-marketing-hero__copy {
  max-width: 640px;
}
#msm-services .msm-marketing-hero--services .msm-marketing-hero__aside {
  align-self: end;
  max-width: 420px;
  margin: 0 0 8px auto;
  padding: 22px 24px;
  border: 1px solid rgba(63, 39, 73, .14);
  border-left: 3px solid var(--msm-gold-deep);
  border-radius: 7px;
  background: rgba(251, 249, 244, .9);
  box-shadow: 0 18px 50px rgba(43, 24, 54, .1);
  backdrop-filter: blur(8px);
}
#msm-services .msm-marketing-hero--services .msm-marketing-hero__aside p {
  color: #3f3048;
  font-size: 16px;
  line-height: 1.55;
}
#msm-about .msm-marketing-hero--about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(248, 244, 237, .99) 0%, rgba(248, 244, 237, .96) 39%, rgba(248, 244, 237, .72) 62%, rgba(248, 244, 237, .28) 100%),
    url("https://assets.medspamomentum.ai/site/v2/msm-about-behind-scenes-hero-v1.jpg") 68% center / cover no-repeat !important;
}
#msm-about .msm-marketing-hero--about::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(52,29,64,.05));
  content: "";
  pointer-events: none;
}
#msm-about .msm-marketing-hero--about .msm-marketing-hero__inner {
  grid-template-columns: minmax(0, 650px);
  min-height: clamp(470px, 54vw, 650px);
  align-items: center;
}
#msm-about .msm-marketing-hero--about .msm-marketing-hero__copy {
  max-width: 650px;
}
.msm-marketing-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--msm-gold-deep) !important; font-size: 10px !important; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.msm-marketing-kicker::before { width: 28px; height: 1px; background: currentColor; content: ""; }
.msm-marketing-lede { max-width: 660px; margin-bottom: 0; font-size: 19px !important; }

.msm-marketing-section { padding: clamp(72px, 8vw, 108px) 0; }
.msm-marketing-section--white { border-block: 1px solid var(--msm-line); background: #fff; }
.msm-marketing-section--warm { border-block: 1px solid var(--msm-line); background: var(--msm-paper-warm); }
.msm-marketing-heading { max-width: 760px; margin-bottom: 44px; }
.msm-marketing-heading p:last-child { max-width: 660px; margin-bottom: 0; }
.msm-marketing-heading--center { margin-inline: auto; text-align: center; }
.msm-marketing-heading--center .msm-marketing-kicker { justify-content: center; }

.msm-service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--msm-line); }
.msm-service { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 30px 30px 34px 0; border-bottom: 1px solid var(--msm-line); }
.msm-service:nth-child(odd) { padding-right: 42px; border-right: 1px solid var(--msm-line); }
.msm-service:nth-child(even) { padding-left: 42px; }
.msm-service__number { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #dfd4bd; border-radius: 50%; color: var(--msm-gold-deep); font-size: 12px; font-weight: 850; }
.msm-service p { margin-bottom: 0; font-size: 15px; }
.msm-service strong { display: block; margin-top: 17px; color: var(--msm-ink-soft); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

.msm-priority { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: clamp(40px, 8vw, 112px); align-items: center; }
.msm-priority__note { padding: 26px 0 26px 28px; border-left: 2px solid var(--msm-gold); }
.msm-priority__note strong { display: block; margin-bottom: 9px; color: var(--msm-ink); font-size: 15px; text-transform: uppercase; }
.msm-priority__note p { margin-bottom: 0; font-size: 15px; }

.msm-about-grid { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 8vw, 112px); align-items: start; }
.msm-about-photo { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: 8px; object-fit: cover; object-position: center top; }
.msm-about-copy p { max-width: 700px; }
.msm-about-copy p:last-child { margin-bottom: 0; }
.msm-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.msm-principle { padding-top: 22px; border-top: 1px solid var(--msm-ink); }
.msm-principle span { display: block; margin-bottom: 26px; color: var(--msm-gold-deep); font-size: 12px; font-weight: 850; }
.msm-principle p { margin-bottom: 0; font-size: 15px; }

.msm-marketing-cta { padding: 72px 0; background: var(--msm-ink); }
.msm-marketing-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.msm-marketing-cta h2 { margin-bottom: 12px; color: #fff; }
.msm-marketing-cta p:not(.msm-marketing-kicker) { max-width: 690px; margin-bottom: 0; color: #d8d0dc; }
.msm-marketing-cta .msm-marketing-kicker { margin-bottom: 16px; }

.msm-marketing-footer { padding: 56px 0 26px; background: #1d1129; color: #d8d0dc; }
.msm-marketing-footer__grid { display: grid; grid-template-columns: minmax(280px, 1.5fr) repeat(2, minmax(150px, .5fr)); gap: 44px; }
.msm-marketing-brand__mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 7px; background: var(--msm-gold); color: var(--msm-ink); font-family: Georgia, serif; font-size: 22px; }
.msm-marketing-footer .msm-marketing-brand { color: #fff; }
.msm-marketing-footer p { max-width: 280px; margin: 18px 0 0; color: #bcb1c2; font-size: 13px; }
.msm-marketing-footer__links { display: grid; align-content: start; gap: 10px; }
.msm-marketing-footer strong { margin-bottom: 7px; color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.msm-marketing-footer a:not(.msm-marketing-brand) { color: #cbbfd0; font-size: 13px; text-decoration: none; }
.msm-marketing-footer a:hover { color: var(--msm-gold); }
.msm-marketing-footer__bottom { margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #9f93a5; font-size: 11px; }

.msm-marketing-page a:focus-visible { outline: 3px solid rgba(180, 123, 18, .42); outline-offset: 3px; }

@media (max-width: 820px) {
  .msm-marketing-hero__inner, .msm-priority, .msm-about-grid { grid-template-columns: 1fr; }
  .msm-marketing-hero__aside { max-width: 620px; }
  #msm-services .msm-marketing-hero--services {
    background:
      linear-gradient(90deg, rgba(248, 244, 237, .99) 0%, rgba(248, 244, 237, .91) 58%, rgba(248, 244, 237, .58) 100%),
      url("https://assets.medspamomentum.ai/site/v2/msm-services-hero-v1.png") 60% center / cover no-repeat !important;
  }
  #msm-services .msm-marketing-hero--services .msm-marketing-hero__inner { min-height: 0; }
  #msm-services .msm-marketing-hero--services .msm-marketing-hero__aside { margin: 0; }
  #msm-about .msm-marketing-hero--about {
    background:
      linear-gradient(90deg, rgba(248, 244, 237, .98) 0%, rgba(248, 244, 237, .94) 58%, rgba(248, 244, 237, .72) 100%),
      url("https://assets.medspamomentum.ai/site/v2/msm-about-behind-scenes-hero-v1.jpg") 62% center / cover no-repeat !important;
  }
  #msm-about .msm-marketing-hero--about .msm-marketing-hero__inner { min-height: clamp(430px, 72vw, 560px); }
  .msm-principles { grid-template-columns: 1fr; gap: 30px; }
  .msm-about-photo { max-width: 360px; }
  .msm-marketing-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .msm-marketing-container { width: min(calc(100% - 40px), 1180px); }
  .msm-marketing-nav__inner { min-height: 70px; gap: 12px; }
  .msm-marketing-links { gap: 0; }
  .msm-marketing-links a:not(.msm-marketing-button) { display: none; }
  .msm-marketing-button--small { min-height: 44px; padding: 10px 13px; font-size: 12px; }
  .msm-marketing-page h1 { font-size: clamp(34px, 10vw, 42px) !important; line-height: 1.03 !important; }
  .msm-marketing-page h2 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.06 !important; }
  .c-section .msm-marketing-page h1 { font-size: clamp(34px, 10vw, 42px) !important; line-height: 1.03 !important; }
  .c-section .msm-marketing-page h2 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.06 !important; }
  .msm-marketing-hero__aside { padding-left: 20px; }
  #msm-services .msm-marketing-hero--services {
    padding-block: 68px;
    background:
      linear-gradient(180deg, rgba(248, 244, 237, .97) 0%, rgba(248, 244, 237, .92) 62%, rgba(248, 244, 237, .8) 100%),
      url("https://assets.medspamomentum.ai/site/v2/msm-services-hero-v1.png") 72% center / auto 100% no-repeat !important;
  }
  #msm-services .msm-marketing-hero--services .msm-marketing-hero__aside { padding: 18px 19px; }
  #msm-about .msm-marketing-hero--about {
    padding-block: 68px;
    background:
      linear-gradient(180deg, rgba(248, 244, 237, .98) 0%, rgba(248, 244, 237, .95) 64%, rgba(248, 244, 237, .84) 100%),
      url("https://assets.medspamomentum.ai/site/v2/msm-about-behind-scenes-hero-v1.jpg") 67% center / auto 100% no-repeat !important;
  }
  #msm-about .msm-marketing-hero--about .msm-marketing-hero__inner { min-height: 0; }
  .msm-service-list { grid-template-columns: 1fr; }
  .msm-service, .msm-service:nth-child(odd), .msm-service:nth-child(even) { padding: 26px 0; border-right: 0; }
  .msm-marketing-button { width: 100%; }
  .msm-marketing-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-marketing-page *, .msm-marketing-page *::before, .msm-marketing-page *::after { transition-duration: .01ms !important; }
}