/* ==========================================================================
   ABOUT PAGE — v3   (/{locale}/about)

   Loaded by resources/views/frontend/pages/about.blade.php alone, pushed into
   the head after front.css so its rules win on order as well as on specificity.

   Donor is the /en/about-test twin (frontend-test/css/base.css + about.css),
   flattened into one standalone file. Nothing is @imported: the twin's base.css
   scopes everything to .nlp-page, which never matches here, and importing it
   would drag the prototype's element reset, promo bar, header and footer onto a
   page that already has all four from lms/layouts/learn_school.

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

     1. SCOPE. Everything is under .nlp-about, the class on #page-content. Two
        classes deep beats every Bootstrap/Nifty rule below it, so there is not
        one !important in this file.

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

     3. EVERY CLASS IS PREFIXED ab-, including the layout primitives (.ab-wrap,
        .ab-sec, .ab-kicker, .ab-sec-head) and the buttons (.ab-btn, never
        .btn.small — front.css declares .small { font-size: 11px !important },
        a rule no amount of specificity can beat). .btn itself is left alone:
        the layout's cart and header controls use it.

   The one rule outside .nlp-about is body.ab-modal-open, the scroll lock the
   biography modal sets. Safe only because this stylesheet is pushed by the
   About view alone.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-about {
  --ab-sky: #3FA9E8;
  --ab-sky-deep: #2286C7;
  --ab-sky-tint: #EDF6FC;
  --ab-sky-line: #D3E9F8;
  --ab-ink: #12303B;
  --ab-teal: #0F6E78;
  --ab-teal-deep: #0A4F57;
  --ab-teal-tint: #EAF4F3;
  --ab-teal-line: #CFE5E2;
  --ab-paper: #FDFEFE;
  --ab-mist: #F6FAFA;
  --ab-line: #E6EDEC;
  --ab-white: #ffffff;
  --ab-text: #3D5058;
  --ab-text-soft: #66787E;
  --ab-gold: #F0C033;
  --ab-green-deep: #1F7A6F;
  --ab-radius: 18px;
  --ab-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --ab-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);
  /* Clearance for the sticky v3 chrome, used by the story column's sticky
     heading. The header measures 67px pinned; the rest is breathing room. Since
     2026-08-31 the promo strip pins with it inside .nlp-topbar, so its measured
     height counts too — lms/js/header_v3.js publishes --nlp-promo-h and
     header_v3.css defaults it to 0px, which is the old 88px on a page carrying
     no strip. */
  --ab-head-offset: calc(88px + var(--nlp-promo-h, 0px));
}

/* ============ reset ============ */
.nlp-about *,
.nlp-about *::before,
.nlp-about *::after { box-sizing: border-box; }

.nlp-about h1, .nlp-about h2, .nlp-about h3,
.nlp-about p, .nlp-about ul, .nlp-about ol,
.nlp-about figure, .nlp-about blockquote { margin: 0; padding: 0; }

.nlp-about {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ab-text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--ab-paper);
  -webkit-font-smoothing: antialiased;
}

.nlp-about h1,
.nlp-about h2,
.nlp-about h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ab-ink);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.nlp-about a { color: inherit; text-decoration: none; }
.nlp-about img { max-width: 100%; display: block; }
.nlp-about button { font-family: inherit; cursor: pointer; }
.nlp-about :focus-visible { outline: 2px solid var(--ab-sky-deep); outline-offset: 2px; border-radius: 6px; }

/* ============ theme neutralisers ============ */
/* Nifty sets blockquote { text-indent: 3ex } and Bootstrap gives it a 5px grey
   left border with 10px/20px padding — between them the first line of every
   testimonial was indented inside a rule the card design does not want. */
.nlp-about blockquote {
  text-indent: 0;
  border-left: 0;
  font-size: inherit;
}

/* Bootstrap makes every <label> bold and inline-block; nothing on this page
   wants that, and the modal's markup sits inside .usercontent_group with it. */
.nlp-about label { font-weight: 400; margin-bottom: 0; max-width: none; }

/* ============ buttons ============ */
.nlp-about .ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: var(--ab-sky); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; text-decoration: none; flex: 0 0 auto;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
}
.nlp-about .ab-btn:hover,
.nlp-about .ab-btn:focus { background: var(--ab-sky-deep); color: #fff; }
.nlp-about .ab-btn:active { transform: scale(.985); }
.nlp-about .ab-btn-gold { background: var(--ab-gold); color: #4A3A06; box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5); }
.nlp-about .ab-btn-gold:hover,
.nlp-about .ab-btn-gold:focus { background: #E5B62B; color: #4A3A06; }
.nlp-about .ab-btn-ghost { background: transparent; color: var(--ab-sky-deep); box-shadow: inset 0 0 0 1.5px var(--ab-sky-deep); }
.nlp-about .ab-btn-ghost:hover,
.nlp-about .ab-btn-ghost:focus { background: var(--ab-sky-tint); color: var(--ab-sky-deep); }

/* ============ layout primitives ============ */
.nlp-about .ab-wrap { max-width: 1320px; margin: 0 auto; padding: 0 30px; }
.nlp-about .ab-sec { padding: 74px 0 10px; }
.nlp-about .ab-kicker {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ab-sky-deep);
}
.nlp-about .ab-kicker-green { color: var(--ab-green-deep); }
.nlp-about .ab-sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 8px 0 26px; }
.nlp-about .ab-sec-head h2 { font-size: clamp(27px, 3.2vw, 38px); }
.nlp-about .ab-sec-head h2 em { font-style: italic; color: var(--ab-teal); }
.nlp-about .ab-sec-head .ab-side { margin-left: auto; font-size: 13.5px; color: var(--ab-text-soft); }

/* ============ hero ============ */
.nlp-about .ab-hero { padding: 58px 0 6px; }

.nlp-about .ab-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 50px;
  align-items: center;
}

.nlp-about .ab-hero h1 {
  font-size: clamp(32px, 4.1vw, 52px);
  margin-top: 12px;
}
.nlp-about .ab-hero h1 em { font-style: italic; color: var(--ab-teal); }

.nlp-about .ab-hero-lead {
  font-size: 16.5px;
  color: var(--ab-text-soft);
  margin-top: 18px;
  max-width: 52ch;
}

.nlp-about .ab-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.nlp-about .ab-hero-art { position: relative; }

.nlp-about .ab-hero-art img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--ab-shadow-lift);
  position: relative;
  z-index: 1;
}

/* Two soft organic shapes behind the photo, as on the prototype hero. */
.nlp-about .ab-hero-art::before,
.nlp-about .ab-hero-art::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.nlp-about .ab-hero-art::before {
  right: -34px;
  top: -30px;
  width: 190px;
  height: 190px;
  border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%;
  background: rgba(63, 169, 232, .14);
  animation: ab-drift 9s ease-in-out infinite;
}

.nlp-about .ab-hero-art::after {
  left: -40px;
  bottom: -36px;
  width: 160px;
  height: 160px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  background: rgba(143, 174, 155, .20);
}

/* ============ stat band ============ */
/* The figures are the homepage's own — same helpers, same lang keys — so the
   two pages cannot quote different numbers for the same fact. */
.nlp-about .ab-stats {
  border-top: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
  background: var(--ab-white);
  margin-top: 56px;
}

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

.nlp-about .ab-stat { text-align: center; }

.nlp-about .ab-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.nlp-about .ab-stat span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-text-soft);
}

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

/* ============ our story ============ */
.nlp-about .ab-story {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

.nlp-about .ab-story-head {
  position: sticky;
  top: var(--ab-head-offset);
}

.nlp-about .ab-story-head h2 {
  font-size: clamp(25px, 2.9vw, 34px);
  margin-top: 8px;
}
.nlp-about .ab-story-head h2 em { font-style: italic; color: var(--ab-teal); }

.nlp-about .ab-story-rule {
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: var(--ab-sky);
  margin-top: 20px;
}

.nlp-about .ab-prose p {
  font-size: 15.5px;
  color: var(--ab-text);
  line-height: 1.78;
}

.nlp-about .ab-prose p + p { margin-top: 18px; }

/* The opening paragraph carries the section, so it reads a size larger. */
.nlp-about .ab-prose p.ab-prose-lead {
  font-size: 17.5px;
  color: var(--ab-ink);
  line-height: 1.62;
}

/* ============ core values ============ */
.nlp-about .ab-values-lead {
  font-size: 15px;
  color: var(--ab-text-soft);
  max-width: 62ch;
  margin-top: -14px;
}

.nlp-about .ab-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.nlp-about .ab-value {
  background: var(--ab-white);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow);
  padding: 26px 24px 28px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.nlp-about .ab-value:hover {
  transform: translateY(-3px);
  box-shadow: var(--ab-shadow-lift);
}

/* The source PNGs already carry their own rounded tinted background, so this is
   a plain wrapper — a second tile behind them shrank the glyph and doubled the
   tint. */
.nlp-about .ab-value-icon { margin-bottom: 18px; }

.nlp-about .ab-value-icon img {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: contain;
}

.nlp-about .ab-value h3 { font-size: 19px; }

.nlp-about .ab-value p {
  font-size: 14.5px;
  color: var(--ab-text-soft);
  margin-top: 9px;
}

/* ============ meet the team ============ */
.nlp-about .ab-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.nlp-about .ab-tc {
  background: var(--ab-white);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

.nlp-about .ab-tc:hover {
  transform: translateY(-3px);
  box-shadow: var(--ab-shadow-lift);
}

.nlp-about .ab-tc-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--ab-mist);
}

.nlp-about .ab-tc-body {
  padding: 20px 21px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.nlp-about .ab-tc-body h3 { font-size: 18px; }

.nlp-about .ab-tc-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ab-sky-deep);
  margin-top: 7px;
}

/* Biographies run to very different lengths, so the card clamps and the modal
   carries the full text — that is what keeps the two rows even. */
.nlp-about .ab-tc-bio {
  font-size: 14px;
  color: var(--ab-text-soft);
  margin-top: 11px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-about .ab-tc-more {
  align-self: flex-start;
  margin-top: 15px;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ab-sky-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nlp-about .ab-tc-more .ab-arrow { transition: transform .15s ease; }

.nlp-about .ab-tc-more:hover .ab-arrow,
.nlp-about .ab-tc-more:focus .ab-arrow { transform: translateX(3px); }

/* ============ team biography modal ============ */
/* The root sits OUTSIDE #page-content and carries .nlp-about itself, the same
   arrangement the homepage peek overlay uses: a fixed-position box inside a
   clipped ancestor gets clipped in Chromium, and #container.nlp-shell is
   overflow: clip on every v3 page. */
.nlp-about .ab-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(9, 44, 52, .72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(3px);
}

.nlp-about .ab-modal.ab-open { display: flex; }

/* Set by about_v3.js while the modal is open. The one rule in this file that is
   not scoped to .nlp-about — see the file header. */
body.ab-modal-open { overflow: hidden; }

.nlp-about .ab-modal-box {
  position: relative;
  background: var(--ab-white);
  border-radius: 22px;
  box-shadow: 0 30px 70px -20px rgba(9, 44, 52, .55);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.nlp-about .ab-modal-photo {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  background: var(--ab-mist);
}

.nlp-about .ab-modal-body { padding: 34px 34px 36px; }

.nlp-about .ab-modal-body h3 { font-size: 24px; }

.nlp-about .ab-modal-body .ab-tc-role { margin-top: 8px; }

.nlp-about .ab-modal-bio {
  font-size: 15px;
  color: var(--ab-text);
  line-height: 1.72;
  margin-top: 16px;
}

.nlp-about .ab-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ab-ink);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--ab-shadow);
  opacity: 1;
}

.nlp-about .ab-modal-close:hover,
.nlp-about .ab-modal-close:focus {
  background: var(--ab-white);
  color: var(--ab-sky-deep);
  opacity: 1;
}

/* ============ accreditation ============ */
/* Editorial split rather than one full-width column: the heading and the marks
   hold the left column, the three paragraphs sit at a ~60ch measure on the
   right. Nothing is centred, nothing is stretched across the whole panel, and
   the marks fill what would otherwise be dead space under the heading. */
.nlp-about .ab-accred {
  background: var(--ab-teal-tint);
  border: 1px solid var(--ab-teal-line);
  border-radius: 24px;
  padding: 44px 48px 46px;
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  column-gap: 46px;
  align-items: start;
}

.nlp-about .ab-accred .ab-kicker {
  grid-column: 1 / -1;
  color: var(--ab-green-deep);
  margin-bottom: 10px;
}

.nlp-about .ab-accred h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  /* Optical alignment: the heading's first line sits level with the body's. */
  margin-top: -6px;
}
.nlp-about .ab-accred h2 em { font-style: italic; color: var(--ab-teal); }

.nlp-about .ab-accred-text p {
  font-size: 14.5px;
  color: var(--ab-text);
  line-height: 1.74;
}

.nlp-about .ab-accred-text p + p { margin-top: 14px; }

/* The marks, stacked under the heading in the left column. The artwork is
   transparent, so it needs no card behind it. */
.nlp-about .ab-accred-marks {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--ab-teal-line);
}

.nlp-about .ab-accred-marks span {
  display: block;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ab-green-deep);
  margin-bottom: 16px;
}

/* Sized by width, not height: the artwork is 1000x200, so a height of 58px
   would render it 290px wide and squeeze all five marks into 58px each. */
.nlp-about .ab-accred-marks img {
  width: 100%;
  max-width: 470px;
  height: auto;
}

/* ============ testimonials ============ */
.nlp-about .ab-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.nlp-about .ab-quote {
  background: var(--ab-white);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow);
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
}

.nlp-about .ab-quote-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 54px;
  line-height: .8;
  color: var(--ab-sky-line);
}

.nlp-about .ab-quote-text {
  font-size: 16px;
  color: var(--ab-ink);
  line-height: 1.7;
  margin-top: 8px;
  flex: 1 1 auto;
}

/* Bootstrap 3 dresses blockquote footer at (0,0,3) and prints its own em-dash
   before it — declared here at (0,2,x) so the face and the dash are this
   page's, not the theme's. */
.nlp-about .ab-quote-who {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ab-text-soft);
  margin-top: 18px;
  line-height: 1.5;
}

.nlp-about .ab-quote-who::before { content: "\2014\00A0"; }

/* ============ closing band ============ */
/* Same panel as the homepage's, in this page's tokens: kicker, headline, body
   and the four inclusions beside a gold call to action. */
.nlp-about .ab-close-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 78px 0 30px;
  background: linear-gradient(140deg, var(--ab-teal) 0%, var(--ab-teal-deep) 60%, #073A40 100%);
  color: #fff;
  padding: 52px 54px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.nlp-about .ab-close-band::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-about .ab-close-band::before {
  content: ""; position: absolute; left: 38%; top: -100px; width: 220px; height: 220px;
  border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%; background: rgba(240, 192, 51, .10); pointer-events: none;
}

.nlp-about .ab-close-band .ab-kicker { color: var(--ab-gold); position: relative; z-index: 1; }

.nlp-about .ab-close-band h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  margin: 12px 0 12px;
  position: relative;
  z-index: 1;
}
.nlp-about .ab-close-band h2 em { font-style: italic; color: var(--ab-gold); }

.nlp-about .ab-close-band p {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  max-width: 50ch;
  position: relative;
  z-index: 1;
}

.nlp-about .ab-close-panel {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  padding: 26px 28px;
  backdrop-filter: blur(4px);
}

.nlp-about .ab-close-panel .ab-inc {
  list-style: none;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}

.nlp-about .ab-close-panel .ab-inc li { display: flex; gap: 9px; }
.nlp-about .ab-close-panel .ab-inc li::before { content: "\2713"; color: var(--ab-gold); font-weight: 800; }
.nlp-about .ab-close-panel .ab-btn { width: 100%; }

/* ============ motion ============ */
/* Sections start visible; the reveal is only armed once about_v3.js sets
   .ab-js, so a JavaScript failure leaves a readable page rather than a blank
   one. */
.nlp-about.ab-js .ab-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}

.nlp-about.ab-js .ab-reveal.ab-in {
  opacity: 1;
  transform: none;
}

@keyframes ab-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ============ responsive ============ */
@media (max-width: 1080px) {
  .nlp-about .ab-hero-grid,
  .nlp-about .ab-story { grid-template-columns: minmax(0, 1fr); }
  .nlp-about .ab-hero-grid { gap: 34px; }
  .nlp-about .ab-story-head { position: static; }
  .nlp-about .ab-values,
  .nlp-about .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-about .ab-stats-in {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
  .nlp-about .ab-stat:nth-child(3) { border-left: 0; }
  .nlp-about .ab-accred {
    grid-template-columns: minmax(0, 1fr);
    padding: 36px 32px 34px;
  }
  /* Stacked, the marks should follow the copy rather than interrupt it between
     the heading and the first paragraph. display:contents promotes the heading
     and the marks to grid items so all four can be ordered. */
  .nlp-about .ab-accred-head { display: contents; }
  .nlp-about .ab-accred h2 { order: 1; margin-top: 0; }
  .nlp-about .ab-accred-text { order: 2; margin-top: 18px; }
  .nlp-about .ab-accred-marks { order: 3; }
  .nlp-about .ab-close-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
  .nlp-about .ab-modal-box { grid-template-columns: minmax(0, 1fr); }
  .nlp-about .ab-modal-photo { min-height: 0; height: 260px; }
}

@media (max-width: 640px) {
  .nlp-about .ab-wrap { padding-left: 16px; padding-right: 16px; }
  .nlp-about .ab-sec { padding: 48px 0 8px; }
  .nlp-about .ab-stats-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .nlp-about .ab-stat + .ab-stat {
    border-left: 0;
    border-top: 1px solid var(--ab-line);
    padding-top: 20px;
  }
  .nlp-about .ab-hero { padding-top: 30px; }
  .nlp-about .ab-hero-art img { height: 300px; }
  /* Decorative only, and they overflow the tighter gutter. */
  .nlp-about .ab-hero-art::before,
  .nlp-about .ab-hero-art::after { display: none; }
  .nlp-about .ab-values,
  .nlp-about .ab-team,
  .nlp-about .ab-quotes { grid-template-columns: minmax(0, 1fr); }
  .nlp-about .ab-accred { padding: 28px 22px 24px; border-radius: 20px; }
  .nlp-about .ab-accred-marks { margin-top: 26px; padding-top: 20px; }
  /* The strip is five marks wide; let it shrink rather than overflow. */
  .nlp-about .ab-accred-marks img { height: auto; width: 100%; max-width: 340px; }
  .nlp-about .ab-close-band { padding: 30px 22px; }
  .nlp-about .ab-modal { padding: 14px; }
  .nlp-about .ab-modal-body { padding: 24px 22px 26px; }
  .nlp-about .ab-cta-row .ab-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nlp-about.ab-js .ab-reveal { opacity: 1; transform: none; }
  .nlp-about *,
  .nlp-about *::before,
  .nlp-about *::after { animation: none; transition: none; }
}