/* Research page layout fixes when Framer hydrate is stripped (CMS grid). */

/*
 * Page title ships as 3 Framer ssr-variants. Breakpoint hide classes fail when
 * `.ssr-variant { display: contents }` hoists children — collapse to one H1.
 */
main .framer-s3mtpv h1.framer-text {
  font-size: 40px !important;
  line-height: 1.2em !important;
  text-align: left !important;
  --framer-text-alignment: left !important;
}

@media (min-width: 822px) {
  main .framer-s3mtpv h1.framer-text {
    font-size: 56px !important;
    text-align: center !important;
    --framer-text-alignment: center !important;
  }
}

@media (min-width: 1440px) {
  main .framer-s3mtpv h1.framer-text {
    font-size: 82px !important;
  }
}

/* Hide every science-title variant after the first (fallback if HTML collapse misses) */
main .ssr-variant:has(> .framer-s3mtpv) ~ .ssr-variant:has(> .framer-s3mtpv) {
  display: none !important;
}

/* Ensure the remaining page title is never display:none from leftover hide classes */
main .ssr-variant:has(> .framer-s3mtpv) {
  display: contents !important;
}

/* Page title: left-align eyebrow on mobile */
@media (max-width: 821.98px) {
  main .framer-1tx6iyu,
  main .framer-35733k {
    align-items: flex-start !important;
  }

  main .framer-1m80xl7 {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  main .framer-s3mtpv {
    width: 100% !important;
    max-width: 100% !important;
  }

  main [data-framer-name="Text"] .framer-text,
  main .framer-1m80xl7 .framer-text {
    text-align: left !important;
    --framer-text-alignment: left !important;
  }

  main .framer-5xit98 {
    flex-direction: column !important;
  }

  main .framer-8unnhq,
  main .framer-1dzg2gp {
    width: 100% !important;
    max-width: 100% !important;
  }

  main .framer-8unnhq [data-framer-name="Title"] .framer-text,
  main .framer-1dzg2gp [data-framer-name="Title"] .framer-text,
  main .framer-8unnhq {
    align-items: flex-start !important;
  }

  main .framer-8unnhq [data-framer-name="Title"] .framer-text,
  main .framer-1dzg2gp [data-framer-name="Title"] .framer-text {
    text-align: left !important;
    --framer-text-alignment: left !important;
  }
}

/* Featured big-card titles: hide duplicate Title variants */
main .framer-8unnhq [data-framer-name="Title"] ~ [data-framer-name="Title"] {
  display: none !important;
}

main .framer-8unnhq [data-framer-name="Title"] h5.framer-text ~ h5.framer-text {
  display: none !important;
}

/* Featured row: big card + right stack of two */
@media (min-width: 822px) {
  main .framer-5xit98 {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  main .framer-8unnhq {
    width: 760px !important;
    max-width: 760px !important;
    flex: none !important;
  }

  main .framer-bezgzu {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    gap: 24px !important;
    min-width: 0 !important;
  }

  main .framer-1dzg2gp {
    flex: 1 0 auto !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/*
 * Grid cards below the featured 3 (.framer-h4htmn).
 * Image left + title right; titles wrap inside the card.
 * Must set display:flex !important — Framer’s .framer-a1naip { display:block }
 * otherwise leaves title at width:0 / overflow:hidden (invisible).
 */
main .framer-syqw5r {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px 32px !important;
  width: 100% !important;
  max-width: 1080px !important;
}

main .framer-syqw5r > a.framer-h4htmn {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

main a.framer-h4htmn {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ssr-variant is display:contents — image box is .framer-ynckb7 */
main a.framer-h4htmn .framer-ynckb7 {
  flex: 1 1 50% !important;
  width: auto !important;
  max-width: 50% !important;
  min-width: 0 !important;
  aspect-ratio: 1.67568 !important;
  height: auto !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
}

main a.framer-h4htmn .framer-1sv1me2 {
  flex: 1 1 50% !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 50% !important;
  overflow: hidden !important;
  height: auto !important;
  align-self: flex-start !important;
  display: block !important;
  box-sizing: border-box !important;
  flex-shrink: 1 !important;
  padding-top: 4px !important;
}

main a.framer-h4htmn .research-card-title,
main a.framer-h4htmn .framer-1sv1me2 h5 {
  display: block !important;
  box-sizing: border-box !important;
  text-align: left !important;
  --framer-text-alignment: left !important;
  --framer-text-wrap: wrap !important;
  --framer-text-wrap-override: wrap !important;
  white-space: normal !important;
  white-space-collapse: collapse !important;
  text-wrap: wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  word-wrap: break-word !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4em !important;
  color: rgb(51, 51, 51) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 822px) {
  main a.framer-h4htmn {
    gap: 16px !important;
  }
}

@media (max-width: 821.98px) {
  main .framer-syqw5r {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}