@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-variable.ttf") format("truetype");
}
:is(.jpmm-brand-design, .editor-styles-wrapper) {
  --wp--preset--font-family--system: "Manrope", Arial, sans-serif;
  --wp--preset--font-family--manrope: "Manrope", Arial, sans-serif;
  --wp--preset--font-size--base: var(--jpmm-body, 16px);
  --wp--preset--font-size--small: 15px;
  --wp--preset--font-size--lead: clamp(17px, 1.6vw, 18px);
  --wp--preset--font-size--item: clamp(18px, 1.7vw, 20px);
  --wp--preset--font-size--title: clamp(22px, 2vw, 26px);
  --wp--preset--font-size--section: clamp(24px, 2.5vw, 28px);
  --wp--preset--font-size--hero: clamp(36px, 4.5vw, 60px);
  font-family: "Manrope", Arial, sans-serif !important;
  font-size: var(--jpmm-body, 16px);
}
.jpmm-brand-design .wp-site-blocks,
.jpmm-brand-design :is(input, textarea, select, button),
.editor-styles-wrapper :is(.wp-block-heading, .wp-block-post-title, p, a, button) {
  font-family: "Manrope", Arial, sans-serif !important;
}
:is(.jpmm-brand-design, .editor-styles-wrapper) :is(h1.wp-block-heading, h1.wp-block-post-title):not(#jpi-hero-title) {
  font-size: var(--jpmm-page, 34px) !important;
}
:is(.jpmm-brand-design, .editor-styles-wrapper) #jpi-hero-title {
  font-size: var(--wp--preset--font-size--hero) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}
.jpmm-brand-design .jpmm-heading,
.editor-styles-wrapper :is(.wp-block-heading, .wp-block-post-title) {
  font-family: "Manrope", Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.24;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.jpmm-brand-design .jpmm-heading-panel {
  background-color: var(--wp--preset--color--cream, #e9f8f5) !important;
  color: var(--jpmm-ink, #172b26) !important;
  border-radius: 12px;
}
.jpmm-brand-design .jpmm-heading-panel:not([style*="padding"]) {
  padding: clamp(12px, 1.5vw, 18px);
}
.jpmm-brand-design #jpi-hero-title.jpmm-heading-panel {
  background-color: transparent !important;
  padding: 0;
  border-radius: 0;
}
.jpmm-brand-design .jpmm-heading-panel :is(a, .jpmm-heading-brand) {
  color: var(--jpmm-ink, #172b26) !important;
}
.jpmm-brand-design .jpmm-heading-accent {
  color: var(--jpmm-green, #087c65) !important;
  font: inherit;
}
.jpmm-brand-design h1.jpmm-heading-post-title :is(.jpmm-heading-brand, .jpmm-heading-accent) {
  display: block;
}
.jpmm-brand-design h1.jpmm-heading-post-title .jpmm-heading-separator {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jpmm-works-layout .jp-work-query > .wp-block-post-template {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
}
.jpmm-works-layout .jp-work-query > .wp-block-query-pagination {
  margin-top: var(--jpmm-pagination-gap, 40px) !important;
  gap: 16px;
  flex-wrap: wrap;
}
.jpmm-works-layout .jp-work-query .jpmm-heading-panel {
  padding: 12px 14px;
  border-radius: 10px;
}
@media (max-width: 1099px) {
  .jpmm-works-layout .jp-work-query > .wp-block-post-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 781px) {
  :is(.jpmm-brand-design, .editor-styles-wrapper) :is(h1.wp-block-heading, h1.wp-block-post-title):not(#jpi-hero-title) {
    font-size: var(--jpmm-page-mobile, 28px) !important;
    line-height: 1.22;
  }
  .jpmm-brand-design .jpmm-heading-panel:not([style*="padding"]) {
    padding: 14px 16px;
  }
  .jpmm-brand-design #jpi-hero-title.jpmm-heading-panel {
    padding: 0;
  }
  .jpmm-works-layout .jp-work-query > .wp-block-post-template {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
}

/* Avoid a second panel inside an existing colored block or a mint mobile band.
   Keep the specifically approved bespoke title panel. */
.jpmm-brand-design :is(.has-background, .jp-section[data-jpm-tone="mint"]) .jpmm-heading-panel:not(#jpi-bespoke-title):not(.jpmm-keep-heading-panel),
.editor-styles-wrapper .has-background :is(.wp-block-heading, .wp-block-post-title):not(#jpi-bespoke-title):not(.jpmm-keep-heading-panel) {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
}
.editor-styles-wrapper #jpi-hero-title {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
}

/* Card previews keep their text colors, with no extra title panel. */
.jpmm-brand-design .jp-work-query .wp-block-post-title.jpmm-heading-panel,
.editor-styles-wrapper .jp-work-query .wp-block-post-title {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
}