/* 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;
  }
}

/*
 * Statistics row: a Statistics container holding Statistic / Statistic CTA
 * cards. In Webflow each card renders in its own Shadow DOM and is projected
 * through a native <slot>, so the container communicates with cards only via
 * layout participation (flex) and inherited custom properties:
 *   --nm-statistic-bg        card background (cards variant)
 *   --nm-statistic-radius    card corner radius (cards variant)
 *   --nm-statistic-divider   hairline between cards (panel variant)
 *   --nm-statistic-badge-bg  badge pill background (solid on panel, 30% on cards)
 *   --nm-statistic-backdrop  card backdrop blur (cards variant only)
 * All metrics extracted from the Figma SVG exports (1380-wide frames).
 */

.nm-statistics {
  width: 100%;
  color: var(--nm-statistic-color, #18141e);
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
}

.nm-statistics--tone-light {
  --nm-statistic-color: #fcfcfc;
  --nm-statistic-value-color: #3dbf7b;
}

.nm-statistics__row {
  display: flex;
  align-items: stretch;
  gap: var(--nm-statistics-gap, 0);
}

/* Webflow projects cards through a native <slot>; mirror the row layout on
   it and collapse the per-card wrappers so cards become the flex items. */
.nm-statistics__row slot {
  display: flex;
  flex: 1;
  align-items: stretch;
  gap: var(--nm-statistics-gap, 0);
}

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

/* ---------- Panel: one glass surface, hairline dividers ---------- */

.nm-statistics--panel {
  --nm-statistic-divider: rgba(24, 20, 30, 0.3);
}

.nm-statistics--panel .nm-statistics__row {
  min-height: var(--nm-statistics-panel-min-height, 0);
  overflow: hidden;
  border-radius: 20px;
  background: var(
    --nm-statistics-panel-bg,
    linear-gradient(
        155.46deg,
        rgba(252, 252, 252, 0.2) -50.09%,
        rgba(24, 20, 30, 0.2) 106.94%
      ),
      linear-gradient(
        155.46deg,
        rgba(252, 252, 252, 0.3) -50.09%,
        rgba(230, 236, 233, 0.3) 106.94%
      )
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.nm-statistics__row.row-color-variant-1 {
  background: linear-gradient(155.46deg, rgba(252, 252, 252, 0.2) -50.09%, rgba(230, 236, 233, 0.2) 106.94%);
}

.nm-statistics__row.row-color-variant-2 {
  background: linear-gradient(155.46deg, rgba(208, 218, 213, 0.2) -50.09%, rgba(24, 20, 30, 0.2) 106.94%);
}

.nm-statistics__row.row-color-variant-3 {
  background: linear-gradient(155.46deg, rgba(252, 252, 252, 0.2) -50.09%, rgba(24, 20, 30, 0.2) 106.94%),
linear-gradient(155.46deg, rgba(252, 252, 252, 0.3) -50.09%, rgba(230, 236, 233, 0.3) 106.94%);
}

.nm-statistics__row.row-color-variant-4 {
  background: linear-gradient(155.46deg, rgba(252, 252, 252, 0.2) -50.09%, rgba(24, 20, 30, 0.2) 106.94%);
}

.nm-statistics__row.row-color-variant-5 {
  background: linear-gradient(155.46deg, rgba(252, 252, 252, 0.2) -50.09%, rgba(230, 236, 233, 0.2) 106.94%),
linear-gradient(155.46deg, rgba(252, 252, 252, 0.2) -50.09%, rgba(24, 20, 30, 0.2) 106.94%),
linear-gradient(155.46deg, rgba(252, 252, 252, 0.2) -50.09%, rgba(230, 236, 233, 0.2) 106.94%);
}

.nm-statistics__row.row-color-variant-6 {
  background: linear-gradient(193.84deg, rgba(252, 252, 252, 0.2) -50.98%, rgba(252, 252, 252, 0.2) 88.18%);
}

.nm-statistics__row.row-color-variant-7 {
  background: linear-gradient(155.46deg, #FCFCFC -50.09%, #E6ECE9 106.94%);
}

/* Light divider option for darker imagery; transparent hides dividers */
.nm-statistics--divider-light {
  --nm-statistic-divider: rgba(230, 236, 233, 0.2);
}

.nm-statistics--divider-transparent {
  --nm-statistic-divider: transparent;
}

/* The first card in a row has no divider. Webflow wraps ALL slotted cards in
   one <div slot>, so the container's ::slotted() can't tell cards apart —
   instead each card checks its own host's position: :host(:first-child)
   matches when this card's island is the first sibling inside that wrapper.
   The second rule covers the plain React preview, where cards are direct
   children of the row (it can't accidentally match the <slot> in Webflow
   because it requires the .nm-statistic class). */
:host(:first-child) .nm-statistic,
.nm-statistics__row > .nm-statistic:first-child {
  --nm-statistic-divider: transparent;
}

/* ---------- Cards: separate glass cards with gaps ---------- */

.nm-statistics--cards {
  --nm-statistics-gap: 30px;
  --nm-statistic-radius: 20px;
  --nm-statistic-backdrop: blur(20px);
  --nm-statistic-bg:
    linear-gradient(
      155.46deg,
      rgba(252, 252, 252, 0.2) -50.09%,
      rgba(24, 20, 30, 0.2) 106.94%
    ),
    linear-gradient(
      155.46deg,
      rgba(252, 252, 252, 0.3) -50.09%,
      rgba(230, 236, 233, 0.3) 106.94%
    );
}

/* ---------- Light panel: opaque light-green gradient, dark text ---------- */

.nm-statistics--light-panel {
  --nm-statistic-divider: rgba(24, 20, 30, 0.3);
}

.nm-statistics--light-panel .nm-statistics__row {
  min-height: var(--nm-statistics-panel-min-height, 0);
  overflow: hidden;
  border-radius: 20px;
  background: var(
    --nm-statistics-panel-bg,
    linear-gradient(164.08deg, #FCFCFC -51.24%, #A9C9A5 156.22%)
  );
}

/* ---------- Chevron divider: hairline + circled arrow (steps) ---------- */

.nm-statistics--divider-chevron {
  --nm-statistic-divider: rgba(24, 20, 30, 0.3);
  --nm-statistic-connector: flex;
  /* Divider breaks around the 36px chevron circle instead of crossing it */
  --nm-statistic-divider-layer: linear-gradient(
    to bottom,
    var(--nm-statistic-divider, transparent) 0,
    var(--nm-statistic-divider, transparent) calc(50% - 22px),
    transparent calc(50% - 22px),
    transparent calc(50% + 22px),
    var(--nm-statistic-divider, transparent) calc(50% + 22px),
    var(--nm-statistic-divider, transparent) 100%
  );
}

.nm-statistic__connector {
  display: var(--nm-statistic-connector, none);
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--nm-statistic-divider, rgba(24, 20, 30, 0.3));
  border-radius: 50%;
  color: #3dbf7b;
}

/* No connector on the first card (same mechanism as the divider), and none
   once the row stacks vertically */
:host(:first-child) .nm-statistic__connector,
.nm-statistics__row > .nm-statistic:first-child .nm-statistic__connector {
  display: none;
}

/* ---------- Content presets: per-section type scales via variables ---------- */

/* statistics (default): 80px light value, 16px semibold title, 13px
   description — the stat-card scale every Figma frame shares */
.nm-statistics--preset-statistics {
  --nm-statistic-gap-value-title: 14px;
  --nm-statistic-title-size: 16px;
  --nm-statistic-title-lh: 20px;
  --nm-statistic-title-weight: 400;
  --nm-statistic-gap-text: 23px;
  --nm-statistic-desc-size: 13px;
  --nm-statistic-desc-lh: 17px;
}

/* steps: 01–04 process columns (From assessment / How to apply) */
.nm-statistics--preset-steps {
  --nm-statistic-value-size: 30px;
  --nm-statistic-value-size-mobile: 27px;
  --nm-statistic-value-lh: 1.2;
  --nm-statistic-value-weight: 400;
  --nm-statistic-value-ls: 0;
  --nm-statistic-value-color: #3dbf7b;
  --nm-statistic-title-size: 30px;
  --nm-statistic-title-lh: 1.2;
  --nm-statistic-gap-value-title: 6px;
  --nm-statistic-gap-text: 13px;
  --nm-statistic-desc-size: 13px;
  --nm-statistic-desc-lh: 17px;
}

/* milestones: badge + value + green lead line (carbon neutral) */
.nm-statistics--preset-milestones {
  --nm-statistic-value-size: 27px;
  --nm-statistic-value-size-mobile: 27px;
  --nm-statistic-value-lh: 1.2;
  --nm-statistic-value-weight: 400;
  --nm-statistic-value-ls: 0;
  --nm-statistic-value-color: currentColor;
  --nm-statistic-gap-badge-value: 16px;
  --nm-statistic-gap-value-title: 30px;
  --nm-statistic-title-color: #3dbf7b;
  --nm-statistic-title-size: 16px;
  --nm-statistic-title-lh: 20px;
  --nm-statistic-title-weight: 600;
  --nm-statistic-gap-text: 20px;
  --nm-statistic-desc-size: 16px;
  --nm-statistic-desc-lh: 20px;
}

/* text: title + description only (health data) */
.nm-statistics--preset-text {
  --nm-statistic-title-size: 30px;
  --nm-statistic-title-lh: 1.2;
  --nm-statistic-gap-text: 13px;
  --nm-statistic-desc-size: 13px;
  --nm-statistic-desc-lh: 17px;
}

/* categories: badge + semibold small title (How we measure it) */
.nm-statistics--preset-categories {
  --nm-statistic-gap-badge-title: 30px;
  --nm-statistic-title-size: 19px;
  --nm-statistic-title-lh: 20px;
  --nm-statistic-title-weight: 600;
  --nm-statistic-gap-text: 18px;
  --nm-statistic-desc-size: 16px;
  --nm-statistic-desc-lh: 20px;
}

/* icons: illustration above title (Where are we going / What we believe in) */
.nm-statistics--preset-icons {
  --nm-statistic-title-size: 27px;
  --nm-statistic-title-lh: 1.2;
  --nm-statistic-gap-text: 22px;
  --nm-statistic-desc-size: 16px;
  --nm-statistic-desc-lh: 20px;
}

@media (max-width: 767px) {
  .nm-statistics--preset-steps {
    --nm-statistic-title-size: 27px;
    --nm-statistic-gap-text: 19px;
    --nm-statistic-desc-size: 14px;
    --nm-statistic-desc-lh: 18px;
  }

  .nm-statistics--preset-milestones {
    --nm-statistic-gap-value-title: 24px;
    --nm-statistic-title-size: 14px;
    --nm-statistic-title-lh: 18px;
    --nm-statistic-gap-text: 18px;
    --nm-statistic-desc-size: 14px;
    --nm-statistic-desc-lh: 18px;
  }

  .nm-statistics--preset-text {
    --nm-statistic-title-size: 27px;
    --nm-statistic-gap-text: 18px;
    --nm-statistic-desc-size: 14px;
    --nm-statistic-desc-lh: 18px;
  }

  .nm-statistics--preset-statistics,
  .nm-statistics--preset-categories,
  .nm-statistics--preset-icons {
    --nm-statistic-desc-size: 14px;
    --nm-statistic-desc-lh: 18px;
  }

  /* Keep the auto icons-card rule's mobile description in step */
  .nm-statistic:has(.nm-statistic__icon):not(:has(.nm-statistic__value)):not(
      :has(.nm-statistic__badge)
    ) {
    --nm-statistic-desc-size: 14px;
    --nm-statistic-desc-lh: 18px;
  }
}

/* ---------- Statistic card ---------- */

/* The divider is the first background layer (1px column inset 13px from top
   and bottom) — no positioned pseudo-elements. */
.nm-statistic {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--nm-statistic-padding, 33px);
  box-sizing: border-box;
  border-radius: var(--nm-statistic-radius, 0);
  background-image:
    var(
      --nm-statistic-divider-layer,
      linear-gradient(
        var(--nm-statistic-divider, rgba(0, 0, 0, 0)),
        var(--nm-statistic-divider, rgba(0, 0, 0, 0))
      )
    ),
    var(--nm-statistic-bg, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)));
  background-repeat: no-repeat;
  /* Three entries: the divider layer + up to two glass-gradient layers from
     --nm-statistic-bg (lists repeat per layer, so two entries would squeeze
     the second glass layer into the 1px divider column) */
  background-position:
    left top 13px,
    center,
    center;
  background-size:
    1px calc(100% - 26px),
    100% 100%,
    100% 100%;
  -webkit-backdrop-filter: var(--nm-statistic-backdrop, none);
  backdrop-filter: var(--nm-statistic-backdrop, none);
  color: var(--nm-statistic-color, #18141e);
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  text-decoration: none;
}

.nm-statistic.light-panel {
  background: linear-gradient(155.46deg, #FCFCFC -50.09%, #E6ECE9 106.94%) !important;
}

a.nm-statistic:hover,
a.nm-statistic:focus-visible {
  background-color: rgba(252, 252, 252, 0.14);
  outline: none;
}

/* Value left, text right; text column starts at 43% (from Figma) */
.nm-statistic--value-beside {
  display: grid;
  grid-template-columns: 43% 1fr;
  align-items: start;
}

/* The 43%/1fr columns already bound the text; don't double-constrain it */
.nm-statistic--value-beside .nm-statistic__description {
  max-width: none;
}

/* Badge pill hugs its text and sits at the right edge of the text column;
   the description below stays left-aligned. */
.nm-statistic--value-beside .nm-statistic__badge {
  max-width: 280px;
  text-align: left;
  text-wrap: balance;
}

.nm-statistic__value {
  color: var(--nm-statistic-value-color, currentColor);
  font-size: var(--nm-statistic-value-size, 80px);
  font-style: normal;
  font-weight: var(--nm-statistic-value-weight, 300);
  line-height: var(--nm-statistic-value-lh, 1);
  letter-spacing: var(--nm-statistic-value-ls, -0.02em);
}

/* Icon above the text (icons preset); shown only when an image is set */
.nm-statistic__icon {
  display: block;
  max-height: 100px;
  margin-bottom: 35px;
  object-fit: contain;
}

/* A card with an illustration and no value/badge reads as an icons card no
   matter which container preset is selected — vars on the card itself beat
   the inherited preset vars, so leaving the default (statistics) preset on
   no longer shrinks these titles to 16px. */
.nm-statistic:has(.nm-statistic__icon):not(:has(.nm-statistic__value)):not(
    :has(.nm-statistic__badge)
  ) {
  --nm-statistic-title-size: 27px;
  --nm-statistic-title-lh: 1.2;
  --nm-statistic-title-weight: 400;
  --nm-statistic-gap-text: 22px;
  --nm-statistic-desc-size: 16px;
  --nm-statistic-desc-lh: 20px;
}

.nm-statistic__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.nm-statistic__title {
  display: block;
  max-width: 300px;
  color: var(--nm-statistic-title-color, inherit);
  font-size: var(--nm-statistic-title-size, 28px);
  font-style: normal;
  font-weight: var(--nm-statistic-title-weight, 400);
  line-height: var(--nm-statistic-title-lh, 32px);
  letter-spacing: 0;
}

.nm-statistic__description {
  display: block;
  max-width: 300px;
  font-size: var(--nm-statistic-desc-size, 16px);
  font-style: normal;
  font-weight: var(--nm-statistic-desc-weight, 400);
  line-height: var(--nm-statistic-desc-lh, 20px);
  letter-spacing: 0;
}

/* Career-style labels (text above the value) read as plain 16px text */
.nm-statistic--value-last .nm-statistic__title {
  font-size: 16px;
  line-height: 20px;
}

.nm-statistic__badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fcfcfc;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 16.3px;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.nm-statistic__badge--translucent {
  background: rgba(252, 252, 252, 0.3);
}

/* Vertical rhythm (from Figma): value→title 8, value/title→description 16,
   badge→text 16, text→value (value-last) 12. Presets retune via vars. */
.nm-statistic__value + .nm-statistic__title {
  margin-top: var(--nm-statistic-gap-value-title, 8px);
}

.nm-statistic__value + .nm-statistic__description,
.nm-statistic__title + .nm-statistic__description {
  margin-top: var(--nm-statistic-gap-text, 16px);
}

.nm-statistic__badge + .nm-statistic__title,
.nm-statistic__badge + .nm-statistic__description {
  margin-top: var(--nm-statistic-gap-badge-title, 16px);
}

.nm-statistic__title + .nm-statistic__value,
.nm-statistic__description + .nm-statistic__value,
.nm-statistic__badge + .nm-statistic__value {
  margin-top: var(--nm-statistic-gap-badge-value, 12px);
}

/* ---------- CTA card ---------- */

/* Square corners inside a panel (the panel's rounded clip shapes the outer
   edge, as in the design); rounded when used in the cards variant. */
.nm-statistic-cta {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  min-width: 0;
  padding: 33px;
  box-sizing: border-box;
  border-radius: var(--nm-statistic-radius, 0);
  background: #e6ece9;
  color: #18141e;
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.nm-statistic-cta:hover,
.nm-statistic-cta:focus-visible {
  background: #fcfcfc;
  outline: none;
}

/* ---------- Responsive ---------- */

/* Same breakpoint as the navbar's burger switch: cards stack vertically */
@media (max-width: 1280px) {
  .nm-statistics__row,
  .nm-statistics__row slot {
    flex-direction: column;
  }

  /* Chevrons belong to the horizontal timeline only; restore the solid
     divider (the windowed gradient can't map onto the 1px horizontal line) */
  .nm-statistic__connector {
    display: none;
  }

  .nm-statistics--divider-chevron {
    --nm-statistic-divider-layer: linear-gradient(
      var(--nm-statistic-divider, transparent),
      var(--nm-statistic-divider, transparent)
    );
  }

  /* Vertical stack: divider becomes a horizontal line above each card */
  .nm-statistic {
    padding: 14px;
    background-position:
      top left 18px,
      center,
      center;
    background-size:
      calc(100% - 36px) 1px,
      100% 100%,
      100% 100%;
  }

  /* Stacked cards span the panel; the 300px desktop-column caps come off */
  .nm-statistic__title,
  .nm-statistic__description {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .nm-statistics--cards {
    --nm-statistics-gap: 12px;
  }

  .nm-statistic--value-beside {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .nm-statistic__value {
    font-size: var(--nm-statistic-value-size-mobile, 54px);
    line-height: 1;
  }
}

/* ---------- Cross-card alignment (desktop rows) ----------
   The design aligns badges, values, titles, and descriptions across the
   cards of a row. Flex can't share track sizes between the card islands, so
   on desktop the row becomes a five-track grid (icon / badge / value /
   title / description) and each value-first card subgrids into it — the
   tallest title then sets the title row for every card. Browsers without
   subgrid keep the flex layout above. Must stay after the .nm-statistic
   base rule: it overrides the card's display at equal specificity. */
@media (min-width: 1281px) {
  @supports (grid-template-rows: subgrid) {
    .nm-statistics__row,
    .nm-statistics__row slot {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      grid-template-rows: repeat(5, auto);
      /* margins own the vertical rhythm; only columns get the gap */
      gap: 0 var(--nm-statistics-gap, 0);
    }

    /* Webflow: the slot is the row's only child and hosts the card grid */
    .nm-statistics__row slot {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
    }

    .nm-statistic--value-first {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      align-items: start;
    }

    .nm-statistic--value-first .nm-statistic__icon {
      grid-row: 1;
    }

    .nm-statistic--value-first .nm-statistic__badge {
      grid-row: 2;
      justify-self: start;
    }

    .nm-statistic--value-first .nm-statistic__value {
      grid-row: 3;
      justify-self: start;
    }

    .nm-statistic--value-first .nm-statistic__title {
      grid-row: 4;
    }

    .nm-statistic--value-first .nm-statistic__description {
      grid-row: 5;
    }

    /* Other card shapes span the shared rows but keep their own layout */
    .nm-statistic--value-last,
    .nm-statistic--value-beside,
    .nm-statistic-cta {
      grid-row: 1 / -1;
    }
  }
}

/* The whole statistics row fades + slides in as one unit. The panel variant
   ramps its backdrop blur 0→40px inside the same keyframes: fading opacity
   over a static backdrop-filter makes the blur re-composite and pop at the
   end, but growing it with the fade reads as one continuous entrance. The
   cards variant keeps the blur on its child cards, so its row only slides. */
@keyframes nm-statistics-reveal {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

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

@keyframes nm-statistics-glass-reveal {
  from {
    opacity: 0;
    transform: translateY(36px);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
  }

  to {
    opacity: 1;
    transform: none;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

@keyframes nm-statistics-slide-reveal {
  from {
    transform: translateY(36px);
  }

  to {
    transform: none;
  }
}

.nm-statistics--reveal:not(.nm-statistics--cards) .nm-statistics__row {
  opacity: 0;
}

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

.nm-statistics--panel.nm-statistics--reveal.is-revealed .nm-statistics__row {
  animation-name: nm-statistics-glass-reveal;
}

.nm-statistics--cards.nm-statistics--reveal.is-revealed .nm-statistics__row {
  animation-name: nm-statistics-slide-reveal;
}

@media (prefers-reduced-motion: reduce) {
  .nm-statistics--reveal:not(.nm-statistics--cards) .nm-statistics__row {
    opacity: 1;
  }

  .nm-statistics--reveal.is-revealed .nm-statistics__row {
    animation: none;
  }
}

/* Content fades in over the sliding glass; the fade sits on the cards'
   CHILDREN so backdrop-filter surfaces never composite mid-opacity */
@keyframes nm-statistic-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.nm-statistic--fade > *,
.nm-statistic-cta--fade {
  opacity: 0;
}

.nm-statistic--fade.is-revealed > * {
  animation: nm-statistic-fade 850ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both;
}

.nm-statistic-cta--fade.is-revealed {
  animation: nm-statistic-fade 850ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both;
}

@media (prefers-reduced-motion: reduce) {
  .nm-statistic--fade > *,
  .nm-statistic-cta--fade {
    opacity: 1;
    animation: none;
  }
}