/* Authored \n breaks are desktop-only; below the site's mobile breakpoint
   (navbar switch, 1280px) the text reflows naturally. */
@media (max-width: 1280px) {
  br.multiline-br {
    display: none;
  }
}

/* DOM map:
   .nm-history > .nm-history__inner > badge / title / .nm-history__cards
   .nm-history__cards holds the slot (Webflow) or cards directly (preview).
   Each card = gradient panel + year pill straddling the green timeline
   line, which is drawn as a background layer 24.5px above the row bottom
   (half the 49px pill). */

.nm-history {
  width: 100%;
  padding: 64px 30px;
  box-sizing: border-box;
  background: #fcfcfc;
  color: #18141e;
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
}

.nm-history__inner {
  width: min(1380px, 100%);
  margin-inline: auto;
}

.nm-history__badge {
  display: inline-block;
  margin-bottom: 36px;
  padding: 3.5px 17.5px;
  border-radius: 81.25px;
  background: #e6ece9;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 16.25px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.nm-history__title {
  margin: 0 0 64px;
  font-size: 60px;
  font-style: normal;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: 0;
}

/* Carousel of fixed-width cards over the timeline line, on every
   breakpoint. The viewport is the content column (max 1380px); items
   beyond it are clipped and scroll. The line is drawn just below the
   panel edges with local attachment, so it scrolls with the cards and
   spans exactly from the first card to the last. */
.nm-history__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 322px;
  gap: 31px;
  overflow-x: auto;
  scrollbar-width: none;
  background-image: linear-gradient(#3dbf7b, #3dbf7b);
  background-repeat: no-repeat;
  background-position: left bottom 23.5px;
  background-size: 100% 1px;
  background-attachment: local;
  background-clip: content-box;
}

.nm-history__cards::-webkit-scrollbar {
  display: none;
}

.nm-history__cards slot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 322px;
  grid-column: 1 / -1;
  gap: 31px;
}

.nm-history__cards slot::slotted(*) {
  display: contents;
}

/* ---------- Card ---------- */

.nm-history-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ponytail: fixed 244px panel height from the design; text that outgrows
   it will spill — switch to min-height if content ever needs to */
.nm-history-card__panel {
  width: 100%;
  height: 244px;
  padding: 19px 23px;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(155.46deg, #fcfcfc 0%, #e6ece9 100%);
}

.nm-history-card__title {
  margin: 0;
  font-size: 27px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.nm-history-card__description {
  margin: 21px 0 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

/* Year pill: 49px tall, centered on the timeline line */
.nm-history-card__year {
  margin-top: -24.5px;
  padding: 6.85px 23px;
  border-radius: 128.13px;
  background: #3dbf7b;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 35.3125px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- Mobile: swipe carousel ---------- */

@media (max-width: 767px) {
  .nm-history {
    padding: 45px 15px;
  }

  .nm-history__badge {
    margin-bottom: 20px;
  }

  .nm-history__title {
    margin-bottom: 35px;
    font-size: 32px;
    line-height: 1.1;
  }

  /* Edge-to-edge carousel on mobile, ignoring any ancestor padding;
     the clipped background keeps the line off the lead-in padding */
  .nm-history__cards {
    grid-auto-columns: 256px;
    gap: 15px;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
  }

  .nm-history__cards slot {
    grid-auto-columns: 256px;
    gap: 15px;
  }

  .nm-history-card__title {
    font-size: 25px;
  }
}


@keyframes nm-history-reveal {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.nm-history-reveal .nm-history__inner {
  opacity: 0;
}

.nm-history-reveal.is-revealed .nm-history__inner {
  animation: nm-history-reveal 850ms cubic-bezier(0.4, 0, 0.2, 1) 100ms both;
}

@media (prefers-reduced-motion: reduce) {
  .nm-history-reveal .nm-history__inner {
    opacity: 1;
    animation: none;
  }
}