/* ==========================================================================
   OUR IMPACT — v3   (live: /{locale}/our-impact · twin: /en/our-impact-v3)

   Loaded by resources/views/frontend/our_impact.blade.php — the live page, in
   all 15 locales since the 2026-08-31 merge — and by its sandbox twin
   frontend/our_impact_v3.blade.php, which is kept as the design donor. Both
   push it into the head after front.css so these rules win on order as well as
   specificity. The file is shared: a change here lands on the live page.

   Donor is lms/css/home_v3.css: same tokens, same furniture (kicker, stat band,
   split card, manifesto blobs, closing band, Caveat hand-line), so the page
   reads as the same site as the homepage. Nothing is @imported — home_v3.css
   scopes everything to .nlp-page, which never matches here, and an import would
   break this file the next time the homepage retunes a shared name.

   Three rules carried over from the other v3 pages, for the same reasons:

     1. SCOPE. Every rule sits under .nlp-impact, the class on the page wrapper.
        Two classes deep beats the theme rules below it, so there is not one
        !important in this file.

     2. TOKENS ARE PREFIXED --im-. front.css declares its own :root --green and
        --primary; an unprefixed token on a container here would silently
        repaint any front.css rule that reaches an element inside the page.

     3. BUTTONS ARE .im-btn, NOT .btn.small. front.css declares
        .small { font-size: 11px !important } — a rule no specificity can beat —
        so the theme's utility classes are kept out of the markup rather than
        fought with a second !important.

   The four programmes are told apart by ONE variable each: .im-partner sets
   --im-accent / --im-accent-tint on itself and every child reads it. Add a
   fifth partner by adding a colour pair, not by adding rules.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-impact {
  --im-sky: #3FA9E8;
  --im-sky-deep: #2286C7;
  --im-sky-tint: #EDF6FC;
  --im-sky-line: #D3E9F8;
  --im-ink: #12303B;
  --im-teal: #0F6E78;
  --im-teal-deep: #0A4F57;
  --im-teal-tint: #EAF4F3;
  --im-teal-line: #CFE5E2;
  --im-paper: #FDFEFE;
  --im-mist: #F6FAFA;
  --im-line: #E6EDEC;
  --im-white: #ffffff;
  --im-text: #3D5058;
  --im-text-soft: #66787E;
  --im-gold: #F0C033;
  --im-gold-deep: #B08A3E;
  --im-gold-tint: #FDF5DF;
  --im-green: #2EA194;
  --im-green-deep: #1F7A6F;
  --im-green-soft: #E7F3F0;
  --im-sage: #8FAE9B;
  --im-radius: 18px;
  --im-radius-lg: 24px;
  --im-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --im-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);

  /* overwritten per programme; the neutral pair is the page default */
  --im-accent: var(--im-teal);
  --im-accent-tint: var(--im-teal-tint);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--im-text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--im-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.nlp-impact *,
.nlp-impact *::before,
.nlp-impact *::after {
  box-sizing: border-box;
}

.nlp-impact h1,
.nlp-impact h2,
.nlp-impact h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--im-ink);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0;
}

.nlp-impact p {
  margin: 0;
}

.nlp-impact a {
  color: inherit;
  text-decoration: none;
}

.nlp-impact img {
  max-width: 100%;
  display: block;
}

.nlp-impact :focus-visible {
  outline: 2px solid var(--im-sky-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============ primitives ============ */
.nlp-impact .im-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px;
}

.nlp-impact .im-sec {
  padding: 74px 0 0;
}

.nlp-impact .im-kicker {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--im-accent);
  display: block;
}

.nlp-impact .im-hand {
  font-family: 'Caveat', cursive;
  color: var(--im-teal);
  font-weight: 700;
}

.nlp-impact .im-card {
  background: var(--im-white);
  border: 1px solid var(--im-line);
  border-radius: var(--im-radius);
  box-shadow: var(--im-shadow);
}

.nlp-impact .im-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: var(--im-gold);
  color: #4A3A06;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 28px;
  text-decoration: none;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5);
  transition: background .15s ease, transform .1s ease;
}

.nlp-impact .im-btn:hover,
.nlp-impact .im-btn:focus {
  background: #E5B62B;
  color: #4A3A06;
}

.nlp-impact .im-btn:active {
  transform: scale(.985);
}

.nlp-impact .im-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Pale organic blobs, the homepage's manifesto texture. Purely decorative, so
   they are pseudo-elements and never enter the accessibility tree. */
.nlp-impact .im-blobs {
  position: relative;
  overflow: clip;
}

.nlp-impact .im-blobs::before,
.nlp-impact .im-blobs::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  pointer-events: none;
}

.nlp-impact .im-blobs::before {
  left: -140px;
  top: 30px;
  background: var(--im-teal-tint);
  opacity: .7;
}

.nlp-impact .im-blobs::after {
  right: -150px;
  bottom: -70px;
  background: var(--im-sky-tint);
  opacity: .8;
}

/* ============ motion ============ */
@keyframes im-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Gated in CSS, not on a JS-added body class: an element parked at opacity:0
   waiting for a deferred script is not an eligible LCP candidate. Same reason
   the homepage hero animation is written this way. */
@media (prefers-reduced-motion: no-preference) {
  .nlp-impact .im-hero .im-h-copy>* {
    animation: im-rise .55s ease backwards;
  }

  .nlp-impact .im-hero .im-h-copy>*:nth-child(2) {
    animation-delay: .07s;
  }

  .nlp-impact .im-hero .im-h-copy>*:nth-child(3) {
    animation-delay: .14s;
  }

  .nlp-impact .im-hero .im-h-copy>*:nth-child(4) {
    animation-delay: .21s;
  }

  .nlp-impact .im-hero .im-h-art {
    animation: im-rise .7s ease .12s backwards;
  }
}

/* ============ hero ============ */
.nlp-impact .im-hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--im-white) 0%, var(--im-paper) 100%);
}

.nlp-impact .im-hero::before {
  content: "";
  position: absolute;
  left: -170px;
  top: 40px;
  width: 340px;
  height: 340px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  background: var(--im-teal-tint);
  opacity: .55;
  pointer-events: none;
}

.nlp-impact .im-hero .im-h-in {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 60px 30px 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.nlp-impact .im-hero .im-kicker {
  color: var(--im-sky-deep);
}

.nlp-impact .im-hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  margin: 14px 0 18px;
}

/* The gold underline the homepage h1 carries. Drawn as a background gradient
   rather than the homepage's <svg> child, because the emphasis comes out of a
   translated string — every locale writes its own <em>, and none of them can be
   asked to carry markup this file owns. A gradient also wraps with the text,
   which the squiggle cannot, and these headings run to two lines in German. */
.nlp-impact .im-hero h1 em {
  font-style: italic;
  color: var(--im-teal);
  font-weight: 500;
  background-image: linear-gradient(var(--im-gold), var(--im-gold));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 3px;
}

.nlp-impact .im-hero .im-h-lede {
  font-size: 17px;
  color: var(--im-text-soft);
  max-width: 54ch;
}

.nlp-impact .im-hero .im-h-lede strong {
  color: var(--im-ink);
  font-weight: 600;
}

.nlp-impact .im-hero .im-h-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.nlp-impact .im-hero .im-h-note {
  font-size: 13.5px;
  color: var(--im-text-soft);
}

/* --- hero montage ---------------------------------------------------------
   The four programme photographs, staggered. It is the page's own evidence
   used as its artwork, so no new asset is introduced and each tile keeps the
   caption it already has below as its alt text. The second column is nudged
   down so the block never reads as a plain 2x2 grid.
   ------------------------------------------------------------------------- */
.nlp-impact .im-h-art {
  position: relative;
  min-width: 0;
}

.nlp-impact .im-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.nlp-impact .im-mosaic figure {
  margin: 0;
  position: relative;
  border-radius: var(--im-radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--im-mist);
  box-shadow: var(--im-shadow);
}

.nlp-impact .im-mosaic figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nlp-impact .im-mosaic figure:nth-child(2),
.nlp-impact .im-mosaic figure:nth-child(4) {
  transform: translateY(30px);
}

/* the stagger leaves a 30px tail below the grid — reclaim it */
.nlp-impact .im-mosaic {
  margin-bottom: 30px;
}

/* ============ stat band ============ */
.nlp-impact .im-stats {
  background: var(--im-white);
  border-top: 1px solid var(--im-line);
  border-bottom: 1px solid var(--im-line);
}

.nlp-impact .im-stats .im-s-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.nlp-impact .im-stat {
  text-align: center;
  padding: 0 10px;
}

.nlp-impact .im-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--im-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.nlp-impact .im-stat b sup {
  font-size: .48em;
  vertical-align: super;
  color: var(--im-gold-deep);
  margin-right: 2px;
}

.nlp-impact .im-stat span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--im-text-soft);
  line-height: 1.4;
}

.nlp-impact .im-stat+.im-stat {
  border-left: 1px solid var(--im-line);
}

/* ============ how it is funded ============ */
.nlp-impact .im-how {
  background: var(--im-mist);
  border-bottom: 1px solid var(--im-line);
}

.nlp-impact .im-how .im-how-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nlp-impact .im-how .im-how-tile {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: none;
  background: var(--im-green-soft);
  color: var(--im-green-deep);
  display: grid;
  place-items: center;
}

.nlp-impact .im-how .im-how-tile svg {
  width: 23px;
  height: 23px;
}

.nlp-impact .im-how h2 {
  font-size: 19px;
  margin-bottom: 2px;
}

.nlp-impact .im-how p {
  font-size: 14.5px;
  color: var(--im-text-soft);
}

.nlp-impact .im-how p strong {
  color: var(--im-ink);
  font-weight: 600;
}

/* ============ programme cards ============ */
.nlp-impact .im-partner {
  overflow: hidden;
  border-radius: var(--im-radius-lg);
  background: var(--im-white);
  border: 1px solid var(--im-line);
  box-shadow: var(--im-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  margin-top: 26px;
}

.nlp-impact .im-partner:first-child {
  margin-top: 0;
}

/* Mirrored, not just re-ordered: order alone leaves the copy in the 1.08fr
   track and the photograph in the 1fr one, so the alternating cards came out
   605px / 653px of artwork and the stack visibly wobbled. Swapping the track
   sizes with the order keeps every photo the same width down the page. */
.nlp-impact .im-partner.im-rev {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
}

.nlp-impact .im-partner.im-rev .im-p-art {
  order: 2;
}

.nlp-impact .im-partner.im-rev .im-p-copy {
  order: 1;
}

.nlp-impact .im-partner.im-water {
  --im-accent: var(--im-sky-deep);
  --im-accent-tint: var(--im-sky-tint);
}

.nlp-impact .im-partner.im-ocean {
  --im-accent: var(--im-teal);
  --im-accent-tint: var(--im-teal-tint);
}

.nlp-impact .im-partner.im-tree {
  --im-accent: var(--im-green-deep);
  --im-accent-tint: var(--im-green-soft);
}

.nlp-impact .im-partner.im-food {
  --im-accent: var(--im-gold-deep);
  --im-accent-tint: var(--im-gold-tint);
}

.nlp-impact .im-p-art {
  position: relative;
  margin: 0;
  min-height: 380px;
  background: var(--im-mist);
}

.nlp-impact .im-p-art>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption over the foot of the photograph rather than under the card: the copy
   column already sets the card's height, and a caption below the image would
   have to invent whitespace to sit in. */
.nlp-impact .im-p-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 44px 20px 15px;
  background: linear-gradient(transparent, rgba(6, 38, 44, .78));
  color: rgba(255, 255, 255, .94);
  font-size: 15px;
  line-height: 1.4;
  font-family: 'Caveat', cursive;
  font-weight: 700;
}

/* Hand-drawn programme mark. Sits on the inner corner of the photo — the side
   the copy is on — so it reads as a join between the two halves. */
.nlp-impact .im-p-mark {
  position: absolute;
  z-index: 3;
  right: -30px;
  bottom: 34px;
  width: 96px;
  height: 96px;
  padding: 12px;
  border-radius: 50%;
  background: var(--im-white);
  box-shadow: var(--im-shadow-lift);
}

.nlp-impact .im-partner.im-rev .im-p-mark {
  right: auto;
  left: -30px;
}

.nlp-impact .im-p-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nlp-impact .im-p-copy {
  padding: 40px 44px;
}

.nlp-impact .im-p-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nlp-impact .im-p-since {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--im-text-soft);
  background: var(--im-mist);
  border: 1px solid var(--im-line);
  border-radius: 999px;
  padding: 3px 11px;
}

.nlp-impact .im-p-title {
  font-size: clamp(26px, 2.9vw, 36px);
  font-weight: 500;
  margin: 12px 0 14px;
}

.nlp-impact .im-p-title em {
  font-style: italic;
  color: var(--im-accent);
  font-weight: 500;
}

.nlp-impact .im-p-lede {
  font-size: 15px;
  color: var(--im-text-soft);
  line-height: 1.68;
}

.nlp-impact .im-p-lede strong {
  color: var(--im-ink);
  font-weight: 600;
}

.nlp-impact .im-p-big {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 26px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--im-line);
}

.nlp-impact .im-p-big b {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(44px, 4.6vw, 60px);
  line-height: 1;
  color: var(--im-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.nlp-impact .im-p-big b sub {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--im-text-soft);
  margin-left: 5px;
  bottom: 0;
  vertical-align: baseline;
}

.nlp-impact .im-p-big span {
  font-size: 13.5px;
  color: var(--im-text-soft);
  line-height: 1.45;
  max-width: 24ch;
}

.nlp-impact .im-p-big span strong {
  color: var(--im-ink);
  font-weight: 600;
  display: block;
}

.nlp-impact .im-p-subs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 26px;
}

.nlp-impact .im-p-sub b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--im-ink);
  line-height: 1.2;
}

.nlp-impact .im-p-sub span {
  display: block;
  font-size: 12.5px;
  color: var(--im-text-soft);
  line-height: 1.45;
}

.nlp-impact .im-p-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--im-text-soft);
}

.nlp-impact .im-p-foot svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--im-accent);
}

/* ============ quote ============ */
.nlp-impact .im-quote {
  text-align: center;
  padding: 84px 0 74px;
}

.nlp-impact .im-quote .im-q-in {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 30px;
}

.nlp-impact .im-quote .im-q-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 74px;
  line-height: .6;
  color: var(--im-gold);
  display: block;
  margin-bottom: 22px;
}

.nlp-impact .im-quote blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1.3;
  color: var(--im-ink);
  margin: 0;
  padding: 0;
  border: 0;
}

.nlp-impact .im-quote cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--im-teal);
}

/* ============ partner roster ============ */
.nlp-impact .im-partners h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 500;
  text-align: center;
}

.nlp-impact .im-partners h2 em {
  font-style: italic;
  color: var(--im-teal);
}

.nlp-impact .im-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

/* Column with the role pushed down rather than four static blocks: "Kuaba
   Humanitarian Foundation" is the only name that takes two lines, and left to
   flow it dropped its role a line below the other three. */
.nlp-impact .im-org {
  padding: 24px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.nlp-impact .im-org .im-org-tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin: 0 auto 14px;
  background: var(--im-accent-tint);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.nlp-impact .im-org b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 16.5px;
  color: var(--im-ink);
  line-height: 1.32;
}

.nlp-impact .im-org-role {
  display: block;
  margin-top: auto;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--im-text-soft);
}

.nlp-impact .im-org.im-water {
  --im-accent-tint: var(--im-sky-tint);
}

.nlp-impact .im-org.im-ocean {
  --im-accent-tint: var(--im-teal-tint);
}

.nlp-impact .im-org.im-tree {
  --im-accent-tint: var(--im-green-soft);
}

.nlp-impact .im-org.im-food {
  --im-accent-tint: var(--im-gold-tint);
}

/* ============ closing band ============ */
.nlp-impact .im-cta-sec {
  padding-bottom: 30px;
}

.nlp-impact .im-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--im-radius-lg);
  background: linear-gradient(140deg, var(--im-teal) 0%, var(--im-teal-deep) 60%, #073A40 100%);
  color: #fff;
  padding: 62px 54px;
  text-align: center;
}

.nlp-impact .im-cta::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 340px;
  height: 340px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  background: rgba(143, 174, 155, .18);
  pointer-events: none;
}

.nlp-impact .im-cta::before {
  content: "";
  position: absolute;
  left: -120px;
  top: -140px;
  width: 300px;
  height: 300px;
  border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%;
  background: rgba(240, 192, 51, .10);
  pointer-events: none;
}

.nlp-impact .im-cta>* {
  position: relative;
  z-index: 1;
}

/* 24ch, not 18: at 18 the English heading broke after "next" and left "number?"
   alone on a second line. text-wrap:balance evens the lines where it is
   supported and is ignored where it is not, so the ch cap is the real control —
   check it again if this key is reworded. */
.nlp-impact .im-cta h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  margin: 0 auto 14px;
  max-width: 24ch;
  text-wrap: balance;
}

.nlp-impact .im-cta h2 em {
  font-style: italic;
  color: var(--im-gold);
}

.nlp-impact .im-cta p {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  max-width: 56ch;
  margin: 0 auto 30px;
}

/* ============ foot note ============ */
.nlp-impact .im-foot {
  padding: 30px;
  text-align: center;
  font-size: 12.5px;
  color: var(--im-text-soft);
  background: var(--im-mist);
  border-top: 1px solid var(--im-line);
}

.nlp-impact .im-foot a {
  color: var(--im-sky-deep);
  font-weight: 600;
}

.nlp-impact .im-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .nlp-impact .im-hero .im-h-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .nlp-impact .im-h-art {
    max-width: 560px;
  }

  .nlp-impact .im-stats .im-s-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .nlp-impact .im-stat+.im-stat {
    border-left: 0;
  }

  .nlp-impact .im-stat:nth-child(even) {
    border-left: 1px solid var(--im-line);
  }

  .nlp-impact .im-partner,
  .nlp-impact .im-partner.im-rev {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-impact .im-partner.im-rev .im-p-art {
    order: 1;
  }

  .nlp-impact .im-partner.im-rev .im-p-copy {
    order: 2;
  }

  .nlp-impact .im-p-art {
    min-height: 300px;
  }

  /* Stacked there is no seam for the mark to bridge, so it comes inside the
     photo — and to the TOP, because the caption now runs the full width of the
     card and the mark sat on top of the last words of it. */
  .nlp-impact .im-p-mark,
  .nlp-impact .im-partner.im-rev .im-p-mark {
    right: 16px;
    left: auto;
    bottom: auto;
    top: 16px;
    width: 74px;
    height: 74px;
  }

  .nlp-impact .im-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .nlp-impact .im-wrap,
  .nlp-impact .im-stats .im-s-in,
  .nlp-impact .im-how .im-how-in {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nlp-impact .im-hero .im-h-in {
    padding: 36px 16px 34px;
  }

  .nlp-impact .im-sec {
    padding-top: 48px;
  }

  .nlp-impact .im-quote {
    padding: 56px 0 48px;
  }

  .nlp-impact .im-how .im-how-in {
    align-items: flex-start;
    gap: 14px;
  }

  .nlp-impact .im-p-copy {
    padding: 28px 22px 30px;
  }

  .nlp-impact .im-p-subs {
    gap: 14px 18px;
  }

  .nlp-impact .im-cta {
    padding: 38px 24px;
  }

  .nlp-impact .im-roster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nlp-impact * {
    animation: none;
    transition: none;
  }
}