/* ==========================================================================
   NORTHBRIDGE MINDS — SITE-WIDE DESIGN SYSTEM

   Navy / gold / white, Playfair Display headings over Figtree body copy.

   Every rule is namespaced under .nbm, so this file and the legacy
   assets/styles.css can coexist in the repo without fighting: styles.css
   targets bare element and unprefixed class selectors (header.nav, section,
   h1, body.home), which would leak badly into this design. Pages load one or
   the other, never both.

   The pre-redesign home page is preserved byte-for-byte at index-classic.html;
   every other page's previous version is in git history.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; }

.nbm {
  /* --- palette --- */
  --nbm-navy:       #30355C;
  --nbm-navy-soft:  #3A4069;
  --nbm-ink:        #110C2D;
  --nbm-gold:       #FFC107;
  --nbm-gold-deep:  #E6A037;
  --nbm-gold-btn:   #E59D0E;
  --nbm-red:        #C80000;
  --nbm-maroon:     #890C25;
  --nbm-body:       #212529;
  --nbm-muted:      #737477;
  --nbm-line:       #E3E5EA;
  --nbm-soft:       #F6F7F9;

  --nbm-font-sans:  'Figtree', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nbm-font-serif: 'Playfair Display', 'Times New Roman', serif;

  /* Relative to THIS stylesheet, not to the page — which is what makes them
     work unchanged from university/metro.html one directory down. */
  --nbm-hero-photo: url("heroBigImage.png");
  --nbm-hero-img:   url("heroBigImage.png");
  --nbm-hero-collab: url("northbrigde-x-metro.png");

  --nbm-wrap: 1200px;

  font-family: var(--nbm-font-sans);
  color: var(--nbm-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- resets, scoped. :where() so they carry zero specificity --- */
.nbm *, .nbm *::before, .nbm *::after { box-sizing: border-box; }
.nbm :where(p, h1, h2, h3, h4, h5, ul, ol, figure, figcaption, blockquote) { margin: 0; padding: 0; }
.nbm :where(ul, ol) { list-style: none; }
.nbm :where(img) { max-width: 100%; display: block; }
.nbm :where(a) { color: inherit; text-decoration: none; }
/* The :where(img) reset above is an AUTHOR rule, so it beats the user-agent's
   [hidden] { display: none } no matter how low its specificity — without this,
   an <img hidden> stays on screen. Must stay after the resets. */
.nbm [hidden] { display: none; }

/* --- layout --- */
.nbm-wrap { width: 100%; max-width: var(--nbm-wrap); margin-inline: auto; padding-inline: 24px; }
.nbm-sec { padding-block: 84px; }
.nbm-sec--soft { background: var(--nbm-soft); }
.nbm-sec--navy { background: var(--nbm-navy); color: #fff; }
/* The collaboration band. It follows the navy process section on the home page,
   and two identical navies in a row read as one endless slab — so this one
   steps down to ink and takes a gold rule on top to mark the seam. Pair it with
   .nbm-sec--navy, which carries the white-on-dark heading and stat rules. */
.nbm-sec--collab { background: var(--nbm-ink); border-top: 4px solid var(--nbm-gold); }
.nbm-sec--tight { padding-block: 60px; }

/* --- section headings --- */
.nbm-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 12px;
}
.nbm-h2 {
  font-family: var(--nbm-font-serif); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.16; color: var(--nbm-ink);
  letter-spacing: -.01em;
}
.nbm-sec--navy .nbm-h2 { color: #fff; }
.nbm-h2 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-sec--navy .nbm-h2 em { color: var(--nbm-gold-deep); }
.nbm-h3 {
  font-family: var(--nbm-font-serif); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; color: var(--nbm-ink);
}
.nbm-sec--navy .nbm-h3 { color: #fff; }
.nbm-lead { color: var(--nbm-muted); font-size: 17px; max-width: 78ch; }
.nbm-sec--navy .nbm-lead { color: rgba(255,255,255,.78); }
.nbm-lead a { color: var(--nbm-gold-deep); font-weight: 600; }
.nbm-lead a:hover { text-decoration: underline; }
.nbm-head { margin-bottom: 44px; }
.nbm-head--c { text-align: center; }
/* Title on the left, standfirst on the right — the interior-page head. The
   two columns collapse to one below 900px (see the responsive block). */
.nbm-head--split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: end; }
.nbm-head--split .nbm-lead { max-width: none; }
.nbm-head--c .nbm-lead { margin-inline: auto; }
.nbm-rule { width: 120px; height: 0; border-top: 3px dashed var(--nbm-gold); margin-top: 18px; }
.nbm-head--c .nbm-rule { margin-inline: auto; }

/* --- buttons --- */
.nbm-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 15px; cursor: pointer; transition: .22s ease;
  font-family: inherit;
}
.nbm-btn svg { width: 17px; height: 17px; flex: none; }
.nbm-btn--gold  { background: var(--nbm-gold); color: #110C2D; }
.nbm-btn--gold:hover  { background: var(--nbm-gold-btn); transform: translateY(-2px); }
.nbm-btn--ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.nbm-btn--ghost:hover  { background: #fff; color: var(--nbm-ink); border-color: #fff; }
.nbm-btn--outline { background: #fff; border-color: #C9CEDE; color: var(--nbm-ink); }
.nbm-btn--outline:hover { border-color: var(--nbm-navy); background: var(--nbm-soft); transform: translateY(-2px); }
.nbm-btn--navy  { background: var(--nbm-navy); color: #fff; }
.nbm-btn--navy:hover  { background: var(--nbm-ink); transform: translateY(-2px); }

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.nbm-nav {
  background: #fff; border-bottom: 1px solid var(--nbm-line);
  position: sticky; top: 0; z-index: 500; box-shadow: 0 1px 12px rgba(17,12,45,.06);
}
.nbm-nav__in {
  max-width: 1320px; margin-inline: auto; padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nbm-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.nbm-brand img { height: 52px; width: auto; }
.nbm-brand__t { display: flex; flex-direction: column; gap: 2px; }
.nbm-brand__t b {
  font-family: var(--nbm-font-serif); font-size: 20px; font-weight: 700;
  color: var(--nbm-navy); line-height: 1.1; letter-spacing: .01em;
}
.nbm-brand__t span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--nbm-gold-deep);
}
.nbm-menu { display: flex; align-items: center; gap: 28px; }
.nbm-menu > a, .nbm-drop__trigger {
  font-size: 15px; font-weight: 600; color: var(--nbm-navy);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  border-bottom: 2px solid transparent; transition: .18s ease;
}
.nbm-menu > a:hover, .nbm-drop:hover .nbm-drop__trigger { color: var(--nbm-gold-deep); border-bottom-color: var(--nbm-gold); }
.nbm-drop { position: relative; }
.nbm-drop__trigger svg { width: 12px; height: 12px; }
.nbm-drop__panel {
  position: absolute; top: 100%; left: -18px; min-width: 250px;
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(17,12,45,.14); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s ease;
}
.nbm-drop:hover .nbm-drop__panel, .nbm-drop:focus-within .nbm-drop__panel {
  opacity: 1; visibility: visible; transform: none;
}
.nbm-drop__panel a {
  display: block; padding: 10px 14px; border-radius: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--nbm-navy);
}
.nbm-drop__panel a:hover { background: var(--nbm-soft); color: var(--nbm-gold-deep); }
.nbm-drop__panel a span { display: block; font-size: 12px; font-weight: 500; color: var(--nbm-muted); margin-top: 1px; }
.nbm-nav .nbm-btn { padding: 11px 22px; font-size: 14.5px; flex: none; }
/* mobile-menu only — see the 560px block. Selector must outrank `.nbm-menu > a`
   above, which sets display:inline-flex. */
.nbm-menu > a.nbm-menu__enq { display: none; }
.nbm-burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--nbm-line);
  border-radius: 9px; background: #fff; color: var(--nbm-navy);
  cursor: pointer; place-items: center;
}
.nbm-burger svg { width: 22px; height: 22px; }

/* ==========================================================================
   HERO — copy left, photo bleeding off the right edge, feature card below
   ========================================================================== */
.nbm-hero {
  position: relative; isolation: isolate;
  background: #fff; color: var(--nbm-body);
  overflow: hidden;
  padding-block: 72px 40px;
}
.nbm-hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 47%;
  z-index: -1;
  background: var(--nbm-hero-photo) center center/cover no-repeat;
}
.nbm-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.55) 9%, rgba(255,255,255,0) 28%);
}
.nbm-hero__copy { max-width: 640px; }
.nbm-hero__eyebrow {
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--nbm-gold-deep); margin-bottom: 14px;
}
.nbm-hero__title {
  font-family: var(--nbm-font-serif); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08;
  letter-spacing: -.02em; color: var(--nbm-ink);
}
.nbm-hero__title em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-hero__title u {
  text-decoration: none; background-image: linear-gradient(var(--nbm-gold), var(--nbm-gold));
  background-size: 100% 6px; background-position: 0 92%; background-repeat: no-repeat;
}
.nbm-hero__rule { width: 76px; height: 3px; background: var(--nbm-gold-deep); margin: 24px 0 20px; }
.nbm-hero__sub { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.62; color: #3A4056; max-width: 54ch; }
.nbm-hero__sub strong { font-weight: 800; color: var(--nbm-ink); }
.nbm-hero__cta { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 28px; }
.nbm-hero .nbm-btn { border-radius: 8px; padding: 15px 28px; }

/* thesis card sitting on the photo */
.nbm-hero__seal {
  position: absolute; right: 40px; bottom: 46px; z-index: 1;
  max-width: 340px;
  background: rgba(255,255,255,.95);
  padding: 20px 22px; border-radius: 12px;
  box-shadow: 0 14px 36px rgba(17,12,45,.22);
}
.nbm-hero__seal b {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nbm-gold-deep); margin-bottom: 8px;
}
.nbm-hero__seal p { font-size: 13.5px; line-height: 1.6; color: var(--nbm-ink); }

/* feature card overlapping the foot of the hero */
.nbm-hero__feats {
  display: flex; align-items: stretch;
  max-width: 800px; margin-top: 50px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 16px 44px rgba(17,12,45,.14);
}
.nbm-hero__feats li {
  flex: 1 1 0; min-width: 0;
  padding: 22px 10px; text-align: center;
}
.nbm-hero__feats li + li { border-left: 1px solid var(--nbm-line); }
.nbm-hero__feats .n {
  font-family: var(--nbm-font-serif); font-weight: 700; font-size: 30px;
  line-height: 1; color: var(--nbm-gold-deep); margin-bottom: 8px;
}
.nbm-hero__feats .l { font-size: 13px; font-weight: 600; line-height: 1.34; color: var(--nbm-ink); }

/* --- Metro University collaboration hero -------------------------------
   This variant runs the co-brand artwork FULL-BLEED instead of inside the 47%
   media panel. The "NorthBridge Minds in collaboration with Metro University"
   plate sits near the middle of that image, and the panel crop cuts it clean
   off — which is the one thing the picture is there to say. The left-hand
   white ramp below keeps the headline legible over the photograph instead. */
.nbm-hero--collab .nbm-hero__media {
  left: 0; width: 100%;
  background-image: var(--nbm-hero-collab);
  background-position: right center;
}
/* Opaque well past the copy column: the artwork carries its own "NorthBridge
   Minds in collaboration with Metro University" plate on its left-hand side,
   which would otherwise sit directly under the headline. The pill below states
   the same thing in live type, so the plate is deliberately masked out and the
   photograph reads from the laptop rightwards. */
.nbm-hero--collab .nbm-hero__media::after {
  background: linear-gradient(93deg,
    #fff 0%,
    #fff 46%,
    rgba(255,255,255,.92) 55%,
    rgba(255,255,255,.55) 63%,
    rgba(255,255,255,.14) 72%,
    rgba(255,255,255,0)   80%);
}
.nbm-hero--collab .nbm-hero__copy { max-width: 560px; }
.nbm-hero--collab .nbm-hero__sub { max-width: 46ch; }

/* co-brand pill above the headline — the collaboration stated in words, so it
   survives every crop the background image goes through on narrow screens */
.nbm-hero__collab {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--nbm-line);
  border-left: 4px solid var(--nbm-gold);
  border-radius: 999px; padding: 7px 22px 7px 10px;
  box-shadow: 0 8px 26px rgba(17,12,45,.10);
  margin-bottom: 22px;
}
.nbm-hero__collab img { height: 40px; width: auto; flex: none; }
.nbm-hero__collab .x {
  font-size: 12px; font-weight: 800; color: var(--nbm-gold-deep); flex: none;
}
.nbm-hero__collab b {
  font-size: 12.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--nbm-navy); line-height: 1.3;
}
.nbm-hero__collab b em {
  display: block; font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; color: var(--nbm-muted); margin-top: 2px;
}
.nbm-hero__collab .go { font-size: 17px; font-weight: 800; color: var(--nbm-gold-deep); flex: none; transition: .2s ease; }
.nbm-hero__collab:hover { border-left-color: var(--nbm-gold-deep); box-shadow: 0 12px 30px rgba(17,12,45,.16); }
.nbm-hero__collab:hover .go { transform: translateX(4px); }

/* --- co-brand lockup + campus strip, used by the collaboration band --------
   Kept above the RESPONSIVE block below, not down with the interior-page
   components: rules that come after a media query of equal specificity win,
   and these two have breakpoint overrides. */
/* Both crests are navy-and-gold artwork on transparent, so on the dark band
   each one needs its own white chip or it sinks into the background. */
.nbm-cobrand { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.nbm-cobrand__chip {
  background: #fff; border-radius: 14px; padding: 12px 20px;
  display: grid; place-items: center; box-shadow: 0 10px 28px rgba(17,12,45,.16);
}
.nbm-cobrand__chip img { height: 58px; width: auto; object-fit: contain; }
.nbm-cobrand__x {
  font-family: var(--nbm-font-serif); font-size: 26px; font-weight: 700;
  color: var(--nbm-gold); line-height: 1;
}

.nbm-collab-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nbm-collab-shots figure { position: relative; border-radius: 13px; overflow: hidden; }
.nbm-collab-shots img { width: 100%; height: 178px; object-fit: cover; }
.nbm-collab-shots figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  font-size: 12.5px; font-weight: 700; line-height: 1.35; color: #fff;
  background: linear-gradient(rgba(17,12,45,0), rgba(17,12,45,.88));
}

/* ==========================================================================
   TICKER STRIP
   ========================================================================== */
.nbm-ticker { background: var(--nbm-ink); color: #fff; overflow: hidden; padding: 17px 0; }
.nbm-ticker__track { display: flex; gap: 54px; white-space: nowrap; width: max-content; animation: nbm-scroll 44s linear infinite; }
.nbm-ticker__item {
  font-family: var(--nbm-font-serif); font-size: 18px; font-weight: 600;
  color: rgba(255,255,255,.9); display: flex; align-items: center; gap: 54px;
}
.nbm-ticker__item::after { content: "\2726"; color: var(--nbm-gold); font-size: 13px; }
@keyframes nbm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nbm-ticker__track { animation: none; } }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.nbm-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.nbm-stats li { padding: 8px 30px; }
.nbm-stats li + li { border-left: 1px solid rgba(255,255,255,.16); }
.nbm-stats .n {
  font-family: var(--nbm-font-serif); font-weight: 700; font-size: 52px; line-height: 1;
  color: var(--nbm-gold-deep); margin-bottom: 8px;
}
.nbm-stats .n em { font-style: normal; color: var(--nbm-gold); }
.nbm-stats .s { font-size: 14.5px; color: rgba(255,255,255,.7); line-height: 1.55; }

/* Same band on a light section — used on the home page's university-partner
   block, which sits on --nbm-soft rather than navy. */
.nbm-stats--light li + li { border-left-color: var(--nbm-line); }
.nbm-stats--light .n { color: var(--nbm-navy); }
.nbm-stats--light .n em { color: var(--nbm-gold-deep); }
.nbm-stats--light .s { color: var(--nbm-muted); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.nbm-grid { display: grid; gap: 22px; }
.nbm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nbm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nbm-grid--4 { grid-template-columns: repeat(4, 1fr); }

.nbm-card {
  background: var(--nbm-navy); color: #fff; border-radius: 12px;
  padding: 28px 26px 30px; position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
}
.nbm-card::before {
  content: ""; display: block; width: 30px; height: 3px;
  background: var(--nbm-gold); margin-bottom: 16px; border-radius: 2px;
}
.nbm-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17,12,45,.22); }
.nbm-card h4 { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.nbm-card p  { font-size: 14.5px; color: rgba(255,255,255,.75); line-height: 1.6; }
.nbm-card .nbm-num {
  font-family: var(--nbm-font-serif); font-size: 15px; font-weight: 700;
  color: var(--nbm-gold); margin-bottom: 4px; display: block;
}
.nbm-card .nbm-kicker { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--nbm-gold-deep); font-weight: 700; margin-bottom: 9px; }
.nbm-card .nbm-meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; font-weight: 600; letter-spacing: .05em; color: var(--nbm-gold-deep);
}
.nbm-sec--navy .nbm-card { background: var(--nbm-navy-soft); }

.nbm-ocard {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 12px;
  padding: 26px 24px; transition: .22s ease; display: flex; flex-direction: column;
}
.nbm-ocard:hover { border-color: var(--nbm-gold); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,12,45,.08); }
.nbm-ocard h4 { font-size: 18px; font-weight: 700; color: var(--nbm-ink); margin-bottom: 9px; }
.nbm-ocard h3 { font-family: var(--nbm-font-serif); font-size: 22px; font-weight: 700; color: var(--nbm-ink); line-height: 1.28; margin-bottom: 12px; }
.nbm-ocard h3 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-ocard p  { font-size: 14.5px; color: var(--nbm-muted); }
.nbm-ocard .nbm-ico {
  width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(48,53,92,.07); color: var(--nbm-navy); margin-bottom: 16px;
}
.nbm-ocard .nbm-ico svg { width: 23px; height: 23px; }
.nbm-ocard .nbm-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 12px;
}

/* Check list inside light cards. margin-top:auto pins it to the card foot so
   the lists line up across a row even when the copy above runs to different
   lengths — without it each list floats at its own height. */
.nbm-clist { border-top: 1px solid var(--nbm-line); padding-top: 16px; margin-top: auto; }
.nbm-ocard p { margin-bottom: 18px; }
.nbm-clist li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; font-weight: 500; color: var(--nbm-body); padding: 5px 0;
}
.nbm-clist svg { width: 15px; height: 15px; color: var(--nbm-gold-deep); flex: none; margin-top: 4px; }

/* pill row */
.nbm-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 48px; }
.nbm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--nbm-gold); border-radius: 999px;
  padding: 9px 20px; font-size: 14px; font-weight: 600; color: var(--nbm-ink);
  background: #fff;
}
.nbm-sec--navy .nbm-pill { background: transparent; color: #fff; }
.nbm-pill svg { width: 15px; height: 15px; color: var(--nbm-gold-deep); flex: none; }

/* quote band */
.nbm-quote {
  background: var(--nbm-navy); color: rgba(255,255,255,.9); border-radius: 12px;
  padding: 32px 40px; text-align: center; font-size: 17px; line-height: 1.7;
  font-style: italic;
}
.nbm-sec--navy .nbm-quote { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.nbm-quote strong { color: var(--nbm-gold-deep); font-style: normal; }

/* ==========================================================================
   PROGRAMME CARDS
   ========================================================================== */
.nbm-spec {
  border: 1px solid var(--nbm-line); border-radius: 14px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column; transition: .24s ease;
}
.nbm-spec:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(17,12,45,.13); border-color: transparent; }
/* Navy plate in place of a photo — one hero image cannot serve three
   programmes, and three near-identical stock shots read as filler. */
.nbm-spec__plate {
  position: relative; background: linear-gradient(135deg, #30355C 0%, #191C3B 100%);
  padding: 30px 24px 26px; color: #fff; overflow: hidden;
  /* Fixed height with the title pinned to the foot: programme names run to one
     or two lines, and without this the three plates end at different heights
     and the card bodies below them stop lining up. */
  min-height: 172px; display: flex; flex-direction: column; justify-content: space-between;
}
.nbm-spec__plate .nbm-spec__tag { align-self: flex-start; }
.nbm-spec__plate::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px; border: 1.5px solid rgba(255,193,7,.22); border-radius: 50%;
}
.nbm-spec__tag {
  display: inline-block; background: var(--nbm-gold); color: #110C2D;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.nbm-spec__plate h3 {
  font-family: var(--nbm-font-serif); font-size: 23px; font-weight: 700;
  line-height: 1.24; position: relative;
}
.nbm-spec__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.nbm-spec__body > p { font-size: 14.5px; color: var(--nbm-muted); }
.nbm-spec__go {
  margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--nbm-navy);
}
.nbm-spec__go svg { width: 16px; height: 16px; transition: transform .2s ease; }
.nbm-spec:hover .nbm-spec__go { color: var(--nbm-gold-deep); }
.nbm-spec:hover .nbm-spec__go svg { transform: translateX(4px); }
.nbm-exit {
  margin-top: 44px; text-align: center; font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--nbm-muted);
}

/* ==========================================================================
   OJT DASHBOARD
   ========================================================================== */
.nbm-ojt { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.nbm-sim { position: relative; }
.nbm-sim__badge {
  position: absolute; top: -14px; left: 22px; z-index: 2;
  background: var(--nbm-gold); color: #110C2D; font-size: 11.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.nbm-sim__win {
  background: var(--nbm-navy); border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 50px rgba(17,12,45,.22);
}
.nbm-sim__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 18px; background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nbm-sim__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.24); }
.nbm-sim__dot:first-child { background: var(--nbm-gold); }
.nbm-sim__title { margin-left: 10px; font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.nbm-sim__body { padding: 24px 24px 26px; color: #fff; }
.nbm-sim__row { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.nbm-sim__row .lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.nbm-sim__row .val { font-family: var(--nbm-font-serif); font-size: 27px; font-weight: 700; line-height: 1; }
.nbm-sim__row .val.pos { color: var(--nbm-gold); }
.nbm-sim__chart { background: rgba(0,0,0,.16); border-radius: 9px; padding: 12px; }
.nbm-sim__chart svg { width: 100%; height: 118px; display: block; }
.nbm-sim__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.nbm-sim__cell { background: rgba(255,255,255,.06); border-radius: 9px; padding: 13px 14px; }
.nbm-sim__cell .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.nbm-sim__cell .v { font-family: var(--nbm-font-serif); font-size: 19px; font-weight: 700; color: var(--nbm-gold-deep); }

.nbm-steps { display: grid; gap: 16px; margin-top: 26px; }
.nbm-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--nbm-line); border-left: 4px solid var(--nbm-gold);
  border-radius: 9px; padding: 16px 20px;
}
.nbm-steps .k {
  font-family: var(--nbm-font-serif); font-size: 18px; font-weight: 700;
  color: var(--nbm-gold-deep); flex: none; line-height: 1.4;
}
.nbm-steps strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--nbm-ink); margin-bottom: 3px; }
.nbm-steps span { font-size: 14px; color: var(--nbm-muted); line-height: 1.55; }

/* ==========================================================================
   FOUNDERS
   ========================================================================== */
.nbm-leader {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 14px;
  overflow: hidden; transition: .24s ease; display: flex; flex-direction: column;
}
.nbm-leader:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(17,12,45,.14); }
.nbm-leader__img { position: relative; background: var(--nbm-navy); }
.nbm-leader__img img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top;
  /* Held in grayscale in every state, not just at rest: Rajat's portrait is
     natively black & white, so a hover-to-colour would leave his card grey
     while the other two turned. The card lift carries the hover feedback. */
  filter: grayscale(100%) contrast(1.04);
}
.nbm-leader__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.nbm-leader__body h4 { font-family: var(--nbm-font-serif); font-size: 22px; font-weight: 700; color: var(--nbm-ink); line-height: 1.2; }
.nbm-leader__role {
  color: var(--nbm-gold-deep); font-weight: 800; font-size: 12px;
  letter-spacing: .11em; text-transform: uppercase; margin: 6px 0 14px;
}
.nbm-leader__bio { font-size: 14.5px; color: var(--nbm-muted); line-height: 1.6; }
.nbm-leader__creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nbm-leader__creds span {
  background: rgba(48,53,92,.06); color: var(--nbm-navy); border-radius: 6px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600;
}
.nbm-leader__go {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--nbm-navy);
}
.nbm-leader__go svg { width: 15px; height: 15px; transition: transform .2s ease; }
.nbm-leader:hover .nbm-leader__go { color: var(--nbm-gold-deep); }
.nbm-leader:hover .nbm-leader__go svg { transform: translateX(4px); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.nbm-tcard {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 14px;
  padding: 30px 28px; display: flex; flex-direction: column; transition: .22s ease;
}
.nbm-tcard:hover { border-color: var(--nbm-gold); box-shadow: 0 16px 36px rgba(17,12,45,.08); }
.nbm-tcard__mark { font-family: var(--nbm-font-serif); font-size: 54px; line-height: .7; color: var(--nbm-gold); margin-bottom: 14px; }
.nbm-tcard blockquote { font-size: 16px; line-height: 1.7; color: var(--nbm-body); font-style: italic; }
.nbm-tcard__attrib { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; }
.nbm-tcard__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--nbm-navy); color: var(--nbm-gold-deep);
  font-family: var(--nbm-font-serif); font-size: 19px; font-weight: 700;
}
.nbm-tcard__meta strong { display: block; font-size: 15px; font-weight: 700; color: var(--nbm-ink); }
.nbm-tcard__meta span { font-size: 13.5px; color: var(--nbm-muted); }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.nbm-acc { display: grid; gap: 12px; }
.nbm-acc details { border: 1px solid var(--nbm-line); border-radius: 10px; overflow: hidden; background: #fff; }
.nbm-acc summary {
  list-style: none; cursor: pointer;
  background: var(--nbm-navy); color: #fff;
  padding: 18px 24px; display: flex; align-items: center; gap: 14px;
  transition: background .2s ease;
}
.nbm-acc summary::-webkit-details-marker { display: none; }
.nbm-acc summary:hover { background: var(--nbm-navy-soft); }
.nbm-acc summary .ico {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--nbm-gold); color: var(--nbm-gold);
  display: grid; place-items: center; font-size: 15px; font-weight: 700; line-height: 1;
}
.nbm-acc summary .ico::before { content: "+"; }
.nbm-acc details[open] summary .ico::before { content: "\2212"; }
.nbm-acc summary .t { font-weight: 700; font-size: 16.5px; line-height: 1.4; }
.nbm-acc__body { padding: 24px; font-size: 15px; color: var(--nbm-muted); line-height: 1.7; }
.nbm-acc__body a { color: var(--nbm-gold-deep); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   PULL QUOTE
   ========================================================================== */
.nbm-pull { text-align: center; }
.nbm-pull blockquote {
  font-family: var(--nbm-font-serif); font-weight: 500;
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1.35; color: #fff;
}
.nbm-pull blockquote em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-pull__cite {
  margin-top: 26px; font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.nbm-cta { display: grid; grid-template-columns: 1fr 1.15fr; border-radius: 14px; overflow: hidden; }
.nbm-cta__img { background: var(--nbm-navy) var(--nbm-hero-img) center/cover no-repeat; min-height: 340px; }
.nbm-cta__body { background: var(--nbm-navy); color: #fff; padding: 48px 46px; }
.nbm-cta__body h2 { font-family: var(--nbm-font-serif); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.18; margin-bottom: 14px; }
.nbm-cta__body h2 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-cta__body > p { color: rgba(255,255,255,.78); margin-bottom: 26px; }
.nbm-cta__body > p a { color: var(--nbm-gold-deep); font-weight: 600; }
.nbm-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.nbm-cta__contact { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; display: grid; gap: 13px; }
.nbm-cta__contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.55; }
.nbm-cta__contact svg { width: 17px; height: 17px; color: var(--nbm-gold); flex: none; margin-top: 3px; }
.nbm-cta__contact a:hover { color: var(--nbm-gold); }

/* ==========================================================================
   ENQUIRY FORM
   ========================================================================== */
.nbm-enq { display: grid; grid-template-columns: 1fr 1.15fr; gap: 54px; align-items: start; }
.nbm-enq__aside .nbm-lead { margin-bottom: 26px; }
.nbm-enq__direct { border-top: 1px solid var(--nbm-line); padding-top: 22px; display: grid; gap: 13px; }
.nbm-enq__direct li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--nbm-muted); line-height: 1.55; }
.nbm-enq__direct svg { width: 16px; height: 16px; flex: none; color: var(--nbm-navy); margin-top: 4px; }
.nbm-enq__direct a { color: var(--nbm-body); font-weight: 600; }
.nbm-enq__direct a:hover { color: var(--nbm-gold-deep); }

.nbm-enq__card {
  background: var(--nbm-soft); border: 1px solid var(--nbm-line); border-radius: 16px;
  padding: 34px 32px 32px; box-shadow: 0 18px 46px rgba(17,12,45,.09);
}
.nbm-enq__card h3 { font-family: var(--nbm-font-serif); font-weight: 700; font-size: 25px; color: var(--nbm-ink); margin-bottom: 5px; }
.nbm-enq__card > p { color: var(--nbm-muted); font-size: 14.5px; margin-bottom: 24px; }

.nbm-form { display: grid; gap: 17px; }
.nbm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.nbm-field { display: grid; gap: 7px; }
.nbm-field label { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--nbm-ink); }
.nbm-field label .req { color: var(--nbm-red); }
.nbm-field input, .nbm-field select, .nbm-field textarea {
  width: 100%; font-family: var(--nbm-font-sans); font-size: 15px; color: var(--nbm-body);
  background: #fff; border: 1.5px solid #D8DBE4; border-radius: 9px;
  padding: 12px 14px; transition: border-color .18s ease, box-shadow .18s ease;
}
.nbm-field textarea { resize: vertical; min-height: 108px; line-height: 1.55; }
.nbm-field input::placeholder, .nbm-field textarea::placeholder { color: #A6AAB6; }
.nbm-field input:focus, .nbm-field select:focus, .nbm-field textarea:focus {
  outline: none; border-color: var(--nbm-navy); box-shadow: 0 0 0 3px rgba(48,53,92,.13);
}
/* Only flag a field the visitor has actually filled in. The :placeholder-shown
   trick does not work for date inputs — they have no placeholder, so an empty
   required date would match :not(:placeholder-shown):invalid and turn red
   before it has been touched. Dates use :user-invalid, which only matches
   after interaction. */
.nbm-field input:not([type="date"]):not(:placeholder-shown):invalid,
.nbm-field textarea:not(:placeholder-shown):invalid { border-color: var(--nbm-red); }
.nbm-field input[type="date"]:user-invalid { border-color: var(--nbm-red); }
.nbm-field select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737477' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
}
.nbm-form .nbm-btn { width: 100%; justify-content: center; margin-top: 3px; }

.nbm-form__spin, .nbm-form__tick { display: none; }
.nbm-form.is-sending .nbm-form__send, .nbm-form.is-sending .nbm-form__tick,
.nbm-form.is-done .nbm-form__send,    .nbm-form.is-done .nbm-form__spin { display: none; }
.nbm-form.is-sending .nbm-form__spin, .nbm-form.is-done .nbm-form__tick { display: block; }
.nbm-form.is-sending .nbm-btn { opacity: .82; cursor: wait; }
.nbm-form.is-done .nbm-btn { background: #1E9E5A; color: #fff; }
.nbm-form.is-done .nbm-btn:hover { background: #1E9E5A; transform: none; }
.nbm-form__spin {
  width: 17px; height: 17px; flex: none;
  border: 2px solid rgba(17,12,45,.28); border-top-color: #110C2D;
  border-radius: 50%; animation: nbm-spin .62s linear infinite;
}
@keyframes nbm-spin { to { transform: rotate(360deg); } }
.nbm-form__status {
  display: none; gap: 12px; align-items: flex-start;
  padding: 15px 17px; border-radius: 10px; font-size: 14.5px; line-height: 1.55;
}
.nbm-form__status svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.nbm-form__status strong { display: block; margin-bottom: 2px; }
.nbm-form.is-done .nbm-form__status--ok, .nbm-form.is-error .nbm-form__status--err { display: flex; }
.nbm-form__status--ok  { background: #E7F6ED; color: #106B3B; border: 1px solid #B7E3C9; }
.nbm-form__status--err { background: #FDECEC; color: #971B1B; border: 1px solid #F3C3C3; }
.nbm-form.is-sending .nbm-field input,
.nbm-form.is-sending .nbm-field select,
.nbm-form.is-sending .nbm-field textarea { background: #F1F2F5; color: var(--nbm-muted); }
.nbm-form__note { font-size: 12.5px; color: var(--nbm-muted); line-height: 1.55; text-align: center; }
@media (prefers-reduced-motion: reduce) { .nbm-form__spin { animation-duration: 1.6s; } }

/* ==========================================================================
   ENQUIRY MODAL
   ========================================================================== */
.nbm-modal[hidden] { display: none; }
.nbm-modal {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .4s ease;
}
.nbm-modal.is-open { opacity: 1; }
/* NOT namespaced, and it cannot be: Razorpay appends its overlay to <body>,
   outside the .nbm root.

   Razorpay ships its own z-index of 1000000000 while the registration modal
   sits at 2147483000 — so without this the checkout opens UNDERNEATH the
   modal and clicking "Pay Now" looks like it does nothing at all. This is the
   one thing in the file deliberately allowed to outrank .nbm-modal.

   Matched on body's OWN children, never on descendants. Razorpay stacks its
   black backdrop and its payment iframe against each other inside that
   container; raising a descendant would lift the backdrop over the form and
   leave an unusable black screen. The attribute match also survives their
   class names changing (the Payment Button uses
   .razorpay-payment-form-container, the JS SDK uses .razorpay-container). */
body > [class*="razorpay"] {
  z-index: 2147483647 !important;
}
.nbm-modal__backdrop { position: absolute; inset: 0; background: rgba(17,12,45,.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.nbm-modal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 16px; padding: 30px 30px 28px;
  box-shadow: 0 30px 80px rgba(17,12,45,.4);
  transform: translateY(34px) scale(.96);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.nbm-modal.is-open .nbm-modal__box { transform: none; }
.nbm-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; border-radius: 9px; background: var(--nbm-ink); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; transition: .18s ease;
}
.nbm-modal__close:hover { background: #000; transform: scale(1.06); }
.nbm-modal__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nbm-gold-deep); margin-bottom: 8px; }
.nbm-modal__box h3 { font-family: var(--nbm-font-serif); font-weight: 700; font-size: 24px; color: var(--nbm-ink); margin-bottom: 5px; padding-right: 34px; }
.nbm-modal__box > p { color: var(--nbm-muted); font-size: 14.5px; margin-bottom: 22px; }
@media (prefers-reduced-motion: reduce) {
  .nbm-modal, .nbm-modal__box { transition: none; }
  .nbm-modal__box { transform: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.nbm-foot { background: var(--nbm-ink); color: rgba(255,255,255,.62); padding: 64px 0 0; }
.nbm-foot__grid { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr 1fr; gap: 40px; }
.nbm-foot__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* The crest is navy-on-white artwork, so it needs its own light chip to read
   against the ink footer — dropped straight on, it reads as a grey smudge. */
.nbm-foot__brand img { height: 46px; width: auto; background: #fff; border-radius: 9px; padding: 5px; }
.nbm-foot__brand b { display: block; font-family: var(--nbm-font-serif); font-size: 18px; font-weight: 700; color: #fff; line-height: 1.2; white-space: nowrap; }
.nbm-foot__brand span { font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--nbm-gold-deep); }
.nbm-foot__about { font-size: 14.5px; line-height: 1.72; max-width: 46ch; }
.nbm-foot h5 { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.nbm-foot ul { display: grid; gap: 10px; }
.nbm-foot a { font-size: 14.5px; color: rgba(255,255,255,.62); }
.nbm-foot a:hover { color: var(--nbm-gold-deep); }
.nbm-foot__bar {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 52px; padding: 22px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
}
/* Collaboration credit sitting directly above the copyright bar. */
.nbm-foot__collab {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding-top: 28px;
}
.nbm-foot__collab img { height: 44px; width: auto; background: #fff; border-radius: 9px; padding: 5px; }
.nbm-foot__collab .t { font-size: 14px; line-height: 1.6; }
.nbm-foot__collab .t b { display: block; color: #fff; font-size: 15.5px; font-weight: 800; }
.nbm-foot__collab a { color: var(--nbm-gold-deep); font-weight: 700; }
.nbm-foot__collab + .nbm-foot__bar { margin-top: 26px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .nbm-menu { display: none; }
  .nbm-burger { display: grid; }
  .nbm-nav.is-open .nbm-menu {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--nbm-line);
    box-shadow: 0 18px 34px rgba(17,12,45,.12); padding: 8px 20px 18px;
  }
  .nbm-nav.is-open .nbm-menu > a, .nbm-nav.is-open .nbm-drop__trigger {
    padding: 13px 0; border-bottom: 1px solid var(--nbm-line);
  }
  .nbm-nav.is-open .nbm-drop__panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 4px 0 8px 14px; min-width: 0;
  }
  .nbm-nav { position: relative; }
}

@media (max-width: 560px) {
  /* Brand + CTA + burger stop fitting on one row here; the CTA moves into the
     menu so the burger is never pushed off the right edge. */
  .nbm-nav__cta { display: none; }
  .nbm-nav.is-open .nbm-menu > a.nbm-menu__enq {
    display: block; color: var(--nbm-gold-deep); border-bottom: 0 !important;
  }
  .nbm-brand__t span { display: none; }
}

@media (max-width: 1024px) {
  .nbm-sec { padding-block: 64px; }
  .nbm-grid--4, .nbm-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .nbm-stats { grid-template-columns: repeat(2, 1fr); }
  .nbm-stats li { padding: 20px; }
  .nbm-stats li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.16); }
  .nbm-stats--light li:nth-child(-n+2) { border-bottom-color: var(--nbm-line); }
  .nbm-stats li:nth-child(odd) { border-left: 0; }
  .nbm-cta { grid-template-columns: 1fr; }
  .nbm-cta__img { min-height: 200px; }
  .nbm-ojt { grid-template-columns: 1fr; gap: 40px; }

  .nbm-hero { padding-block: 58px 40px; }
  .nbm-hero__copy { max-width: none; }
  .nbm-hero__sub { max-width: 62ch; }
  .nbm-hero__media {
    position: relative; z-index: auto;
    width: auto; height: 340px; margin-top: 34px; border-radius: 12px;
    background-position: center center;
  }
  .nbm-hero__media::after { display: none; }
  /* Undo the full-bleed collab variant: once the photo is a stacked block the
     `left/width` overrides above would stretch it past the wrapper. Shifted
     off-centre so the crop keeps the co-brand plate AND the laptop in frame. */
  .nbm-hero--collab .nbm-hero__media { left: auto; width: auto; background-position: 63% center; }
  .nbm-collab-shots { grid-template-columns: repeat(2, 1fr); }
  /* Photo is now a stacked block, so the card leaves it and follows in flow. */
  .nbm-hero__seal {
    position: static; max-width: none; margin-top: 18px;
    box-shadow: none; border: 1px solid var(--nbm-line); background: var(--nbm-soft);
  }
  .nbm-hero__feats { max-width: none; margin-top: 28px; flex-wrap: wrap; }
  .nbm-hero__feats li { flex: 1 1 50%; }
  .nbm-hero__feats li:nth-child(odd) { border-left: 0; }
  .nbm-hero__feats li:nth-child(n+3) { border-top: 1px solid var(--nbm-line); }
  .nbm-foot__grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 900px) {
  .nbm-head--split { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .nbm-grid--2 { grid-template-columns: 1fr; }
  .nbm-enq { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 720px) {
  .nbm-sec { padding-block: 52px; }
  .nbm-grid--3, .nbm-grid--4 { grid-template-columns: 1fr; }
  .nbm-stats { grid-template-columns: 1fr; }
  .nbm-stats li { border-left: 0 !important; }
  .nbm-stats li + li { border-top: 1px solid rgba(255,255,255,.16); }
  .nbm-stats--light li + li { border-top-color: var(--nbm-line); }
  .nbm-cta__body { padding: 34px 26px; }
  .nbm-quote { padding: 24px 22px; font-size: 15.5px; }
  .nbm-sim__foot { grid-template-columns: 1fr; }
  .nbm-foot__grid { grid-template-columns: 1fr 1fr; }
  .nbm-foot__bar { justify-content: center; text-align: center; }

  .nbm-hero { padding-block: 48px 34px; }
  .nbm-hero__media { height: 240px; }
  .nbm-hero .nbm-btn { width: 100%; justify-content: center; }
  .nbm-hero__collab { padding: 7px 16px 7px 8px; gap: 10px; }
  .nbm-hero__collab img { height: 34px; }
  .nbm-cobrand__chip img { height: 46px; }
  .nbm-ticker__item { font-size: 16px; gap: 40px; }
  .nbm-ticker__track { gap: 40px; }
}

@media (max-width: 480px) {
  .nbm-wrap { padding-inline: 18px; }
  .nbm-sec { padding-block: 44px; }
  .nbm-ocard { padding: 22px 20px; }
  .nbm-spec__body { padding: 20px 20px 22px; }
  .nbm-pill { padding: 8px 15px; font-size: 13px; }
  .nbm-quote { padding: 20px 18px; font-size: 15px; }
  .nbm-cta__body { padding: 28px 20px; }
  .nbm-enq__card { padding: 26px 20px 24px; }
  .nbm-form__row { grid-template-columns: 1fr; gap: 17px; }
  .nbm-hero__feats li { flex: 1 1 100%; border-left: 0 !important; }
  .nbm-hero__feats li + li { border-top: 1px solid var(--nbm-line); }
  .nbm-collab-shots { grid-template-columns: 1fr; }
  .nbm-collab-shots img { height: 200px; }
  /* Crest + "x" + crest + two lines of type will not sit on one 320px row. */
  .nbm-hero__collab { flex-wrap: wrap; border-radius: 16px; padding: 12px 16px; }
  /* Wrapped, the arrow drops onto a line of its own and reads as an orphan;
     the whole pill is the link anyway. */
  .nbm-hero__collab .go { display: none; }
  .nbm-foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .nbm-brand img { height: 44px; }
  .nbm-brand__t b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .nbm *, .nbm *::before, .nbm *::after { transition: none !important; }
}

/* ==========================================================================
   ==========================================================================
   INTERIOR PAGES
   Everything below is used by the pages other than the home page. Same
   palette, same type scale, same card language — these are the shapes the
   home page happens not to need.
   ==========================================================================
   ========================================================================== */

/* ==========================================================================
   PAGE HERO — the interior-page counterpart to .nbm-hero
   Shorter than the home hero and photo-free by default, so a page's own
   content starts high on the screen.
   ========================================================================== */
.nbm-phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #FBFBFC 0%, #F3F4F7 100%);
  border-bottom: 1px solid var(--nbm-line);
  padding-block: 40px 66px;
}
/* Faint gold arc in the top-right, the same motif as .nbm-spec__plate::after. */
.nbm-phero::after {
  content: ""; position: absolute; z-index: -1;
  right: -170px; top: -190px; width: 480px; height: 480px;
  border: 1.5px solid rgba(230,160,55,.18); border-radius: 50%;
}
.nbm-phero__eyebrow {
  font-size: clamp(11.5px, 1vw, 13px); font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--nbm-gold-deep); margin-bottom: 14px;
}
.nbm-phero h1 {
  font-family: var(--nbm-font-serif); font-weight: 700;
  font-size: clamp(31px, 4vw, 54px); line-height: 1.1;
  letter-spacing: -.02em; color: var(--nbm-ink); max-width: 20ch;
}
.nbm-phero h1 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-phero h1 u {
  text-decoration: none; background-image: linear-gradient(var(--nbm-gold), var(--nbm-gold));
  background-size: 100% 6px; background-position: 0 92%; background-repeat: no-repeat;
}
.nbm-phero__rule { width: 76px; height: 3px; background: var(--nbm-gold-deep); margin: 22px 0 20px; }
.nbm-phero__sub { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.62; color: #3A4056; max-width: 62ch; }
.nbm-phero__sub a { color: var(--nbm-gold-deep); font-weight: 600; }
.nbm-phero__sub a:hover { text-decoration: underline; }
.nbm-phero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.nbm-phero .nbm-btn { border-radius: 8px; padding: 14px 26px; }
/* Photo variant — for pages that do carry a hero image. */
.nbm-phero--img .nbm-phero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.nbm-phero__photo { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 48px rgba(17,12,45,.16); }
.nbm-phero__photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* --- breadcrumb --- */
.nbm-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--nbm-muted); margin-bottom: 26px;
}
.nbm-crumb a { color: var(--nbm-navy); }
.nbm-crumb a:hover { color: var(--nbm-gold-deep); text-decoration: underline; }
.nbm-crumb .sep { color: #C2C6D2; }
.nbm-crumb .here { color: var(--nbm-muted); }

/* --- key/value chips under a page hero (duration, credits, intake…) --- */
.nbm-metas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.nbm-metas > div {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 10px;
  padding: 13px 20px; min-width: 148px;
}
.nbm-metas .k {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 4px;
}
.nbm-metas .v { font-family: var(--nbm-font-serif); font-size: 19px; font-weight: 700; color: var(--nbm-ink); line-height: 1.25; }

/* ==========================================================================
   ANCHOR STRIP — the row of jump links that sits under a page hero
   ========================================================================== */
.nbm-anchors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nbm-anchors--4 { grid-template-columns: repeat(4, 1fr); }
.nbm-anchor {
  display: block; background: #fff; border: 1px solid var(--nbm-line);
  border-left: 4px solid var(--nbm-gold); border-radius: 10px;
  padding: 17px 20px; transition: .22s ease;
}
.nbm-anchor:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,12,45,.09); border-left-color: var(--nbm-gold-deep); }
.nbm-anchor .k {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 5px;
}
.nbm-anchor strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--nbm-ink); line-height: 1.35; }
.nbm-anchor span { display: block; font-size: 13.5px; color: var(--nbm-muted); margin-top: 3px; line-height: 1.5; }
.nbm-anchor span.nbm-anchor__go {
  margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--nbm-navy);
  word-break: break-word;
}
.nbm-anchor:hover .nbm-anchor__go { color: var(--nbm-gold-deep); }

/* ==========================================================================
   IMAGERY — banners, photo-topped cards, and photo-beside-prose pairs
   ========================================================================== */
/* Full-width photo band inside a section. */
.nbm-banner {
  border-radius: 14px; overflow: hidden; position: relative;
  box-shadow: 0 20px 46px rgba(17,12,45,.14);
}
.nbm-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nbm-banner--wide img { aspect-ratio: 32/9; }
.nbm-banner--tall img { aspect-ratio: 21/9; }
/* Caption sits on a navy scrim so it stays readable over any photo. */
.nbm-banner__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 32px 22px; color: #fff;
  background: linear-gradient(180deg, rgba(17,12,45,0) 0%, rgba(17,12,45,.82) 100%);
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
}

/* Anchor card with a photo above the copy. */
.nbm-anchor--img { padding: 0; border-left-width: 1px; overflow: hidden; }
.nbm-anchor--img:hover { border-left-color: var(--nbm-line); }
.nbm-anchor__shot { display: block; }
.nbm-anchor__shot img { width: 100%; aspect-ratio: 16/7; object-fit: cover; display: block; }
.nbm-anchor--img > .k,
.nbm-anchor--img > strong,
.nbm-anchor--img > span { padding-inline: 22px; }
.nbm-anchor--img > .k { padding-top: 20px; }
.nbm-anchor--img > span:last-child { padding-bottom: 20px; }

/* Photo beside a block of copy. */
.nbm-figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.nbm-figpair--rev .nbm-figpair__fig { order: 2; }
.nbm-figpair__fig { border-radius: 14px; overflow: hidden; box-shadow: 0 18px 42px rgba(17,12,45,.15); }
.nbm-figpair__fig img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   PARTNER CARD — a single university partner, logo beside the write-up
   ========================================================================== */
.nbm-partner {
  display: grid; grid-template-columns: 240px 1fr; gap: 42px; align-items: center;
  background: #fff; border: 1px solid var(--nbm-line); border-left: 5px solid var(--nbm-gold);
  border-radius: 14px; padding: 40px 42px; transition: .24s ease;
}
.nbm-partner:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(17,12,45,.11); border-left-color: var(--nbm-gold-deep); }
.nbm-partner__logo {
  background: var(--nbm-soft); border: 1px solid var(--nbm-line); border-radius: 12px;
  padding: 22px; display: grid; place-items: center; min-height: 130px;
}
.nbm-partner__logo img { max-height: 84px; width: auto; object-fit: contain; }
.nbm-partner__k {
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 10px;
}
.nbm-partner h3 {
  font-family: var(--nbm-font-serif); font-size: clamp(26px, 3vw, 34px); font-weight: 700;
  color: var(--nbm-ink); line-height: 1.2; margin-bottom: 12px;
}
.nbm-partner p { font-size: 15px; line-height: 1.68; color: var(--nbm-muted); max-width: 62ch; }
.nbm-partner__go {
  display: inline-block; margin-top: 18px;
  font-size: 15px; font-weight: 700; color: var(--nbm-navy);
}
.nbm-partner:hover .nbm-partner__go { color: var(--nbm-gold-deep); }


/* ==========================================================================
   FLOW — numbered stages reading left to right, arrows between
   ========================================================================== */
.nbm-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: stretch; }
.nbm-flow--4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 14px; }
.nbm-flow__arrow {
  align-self: center; color: var(--nbm-gold-deep); font-size: 26px; line-height: 1;
  font-weight: 700; user-select: none;
}
.nbm-flow__card {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 12px;
  padding: 26px 24px; transition: .22s ease; display: flex; flex-direction: column;
}
.nbm-flow__card:hover { border-color: var(--nbm-gold); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,12,45,.08); }
.nbm-flow__step {
  display: inline-block; align-self: flex-start;
  background: rgba(48,53,92,.07); color: var(--nbm-navy); border-radius: 999px;
  padding: 5px 13px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 14px;
}
.nbm-flow__card h4 { font-family: var(--nbm-font-serif); font-size: 21px; font-weight: 700; color: var(--nbm-ink); line-height: 1.25; margin-bottom: 9px; }
.nbm-flow__card p { font-size: 14.5px; color: var(--nbm-muted); line-height: 1.6; }

/* ==========================================================================
   BLUEPRINT — a titled navy frame wrapped around a set of phase cards
   ========================================================================== */
.nbm-bp { background: var(--nbm-soft); border: 1px solid var(--nbm-line); border-radius: 16px; overflow: hidden; }
.nbm-bp__head {
  background: var(--nbm-navy); color: #fff;
  padding: 26px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.nbm-bp__no { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--nbm-gold-deep); margin-bottom: 6px; }
.nbm-bp__head h3 { font-family: var(--nbm-font-serif); font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; line-height: 1.22; }
.nbm-bp__tag {
  font-size: 12.5px; line-height: 1.65; color: rgba(255,255,255,.72);
  text-align: right; border-left: 2px solid var(--nbm-gold); padding-left: 18px;
}
.nbm-bp__body { padding: 30px 32px 34px; }

/* phase / semester cards */
.nbm-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.nbm-phases--4 { grid-template-columns: repeat(4, 1fr); }
.nbm-phase {
  background: #fff; border: 1px solid var(--nbm-line); border-top: 3px solid var(--nbm-gold);
  border-radius: 10px; padding: 22px 22px 24px; display: flex; flex-direction: column;
}
.nbm-phase__no {
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 8px;
}
.nbm-phase h4 { font-family: var(--nbm-font-serif); font-size: 19px; font-weight: 700; color: var(--nbm-ink); line-height: 1.3; margin-bottom: 14px; }
.nbm-phase ul { border-top: 1px solid var(--nbm-line); padding-top: 13px; display: grid; gap: 8px; }
.nbm-phase li {
  position: relative; padding-left: 18px;
  font-size: 13.5px; color: var(--nbm-muted); line-height: 1.55;
}
.nbm-phase li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--nbm-gold);
}

/* ==========================================================================
   ROLE CARDS — job title + category + salary band
   ========================================================================== */
.nbm-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nbm-role {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 12px;
  padding: 24px 24px 22px; display: flex; flex-direction: column; transition: .22s ease;
}
.nbm-role:hover { border-color: var(--nbm-gold); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(17,12,45,.08); }
.nbm-role__cat {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 9px;
}
.nbm-role h4 { font-family: var(--nbm-font-serif); font-size: 21px; font-weight: 700; color: var(--nbm-ink); line-height: 1.25; margin-bottom: 9px; }
.nbm-role p { font-size: 14px; color: var(--nbm-muted); line-height: 1.6; margin-bottom: 18px; }
/* margin-top:auto pins the salary to the card foot so the bands line up across
   a row even where the descriptions run to different lengths. */
.nbm-role__pay {
  margin-top: auto; border-top: 1px solid var(--nbm-line); padding-top: 15px;
  font-family: var(--nbm-font-serif); font-size: 21px; font-weight: 700; color: var(--nbm-navy);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.nbm-role__pay small { font-family: var(--nbm-font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--nbm-muted); }

/* ==========================================================================
   LOGO WALL — recruiter names set as type, not images
   ========================================================================== */
.nbm-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.nbm-logo {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 10px;
  padding: 20px 18px; text-align: center; transition: .22s ease;
}
.nbm-logo:hover { border-color: var(--nbm-gold); box-shadow: 0 12px 26px rgba(17,12,45,.07); }
.nbm-logo strong { display: block; font-family: var(--nbm-font-serif); font-size: 17px; font-weight: 700; color: var(--nbm-ink); line-height: 1.3; }
.nbm-logo .cat { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--nbm-muted); margin-top: 6px; }

/* ==========================================================================
   CURRICULUM ROWS — phase label on the left, subject list on the right
   ========================================================================== */
.nbm-cur { display: grid; gap: 14px; }
.nbm-cur__row {
  display: grid; grid-template-columns: 260px 1fr; gap: 30px;
  background: #fff; border: 1px solid var(--nbm-line); border-left: 4px solid var(--nbm-gold);
  border-radius: 10px; padding: 22px 26px; transition: .22s ease;
}
.nbm-cur__row:hover { box-shadow: 0 14px 30px rgba(17,12,45,.08); border-left-color: var(--nbm-gold-deep); }
.nbm-cur__phase {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 6px;
}
.nbm-cur__credits { font-size: 13.5px; font-weight: 600; color: var(--nbm-navy); line-height: 1.5; }
.nbm-cur__title { font-family: var(--nbm-font-serif); font-size: 20px; font-weight: 700; color: var(--nbm-ink); line-height: 1.28; margin-bottom: 7px; }
.nbm-cur__desc { font-size: 14px; color: var(--nbm-muted); line-height: 1.65; }

/* ==========================================================================
   LANDING PAGE — slim chrome + a centred, photo-backed hero
   Used by metrouniversity/index.html, a single-goal campaign page with no
   site menu: the only exits are the enquiry form and the phone number.
   ========================================================================== */
.nbm-nav--slim .nbm-nav__in { justify-content: space-between; }
.nbm-nav--slim .nbm-nav__cta { display: inline-flex; }

.nbm-lphero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: 84px 92px; text-align: center;
  border-bottom: 1px solid var(--nbm-line);
}
.nbm-lphero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--nbm-lp-photo) center 32% / cover no-repeat;
  opacity: .26;
}
/* White at the top and bottom so the nav and the next section meet the photo
   cleanly; without it the headline sits on unpredictable image contrast. */
.nbm-lphero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.72) 38%, rgba(255,255,255,.9) 100%);
}
.nbm-lphero__logo { max-width: 210px; height: auto; margin: 0 auto 26px; }
.nbm-lphero h1 {
  font-family: var(--nbm-font-serif); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.08;
  letter-spacing: -.02em; color: var(--nbm-ink);
}
.nbm-lphero h1 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-lphero__lead {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.62; color: #3A4056;
  max-width: 60ch; margin: 22px auto 0;
}
.nbm-lphero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.nbm-lphero .nbm-btn { border-radius: 8px; padding: 15px 28px; }
.nbm-lphero .nbm-metas { justify-content: center; margin-top: 38px; }

.nbm-foot--slim { padding: 0; }
.nbm-foot--slim .nbm-foot__bar { margin-top: 0; border-top: 0; padding: 26px 0; }

@media (max-width: 720px) {
  .nbm-lphero { padding-block: 56px 64px; }
  .nbm-lphero__bg { opacity: .18; }
  .nbm-lphero__logo { max-width: 150px; margin-bottom: 22px; }
  .nbm-lphero .nbm-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   CHIP FLOW — a wrapping "A -> B -> C" track of short stage labels
   ========================================================================== */
.nbm-chipflow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nbm-chipflow .s {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 999px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 700; color: var(--nbm-ink);
}
.nbm-chipflow .a { color: var(--nbm-gold-deep); font-weight: 700; font-size: 15px; }
.nbm-sec--soft .nbm-chipflow .s { background: #fff; }

/* ==========================================================================
   FIGURE CARD — one headline number with a supporting list
   ========================================================================== */
.nbm-figure {
  background: #fff; border: 1px solid var(--nbm-line); border-top: 3px solid var(--nbm-gold);
  border-radius: 12px; padding: 30px 30px 32px;
}
.nbm-figure__k {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 16px;
}
.nbm-figure__n {
  font-family: var(--nbm-font-serif); font-size: clamp(38px, 4.4vw, 50px); font-weight: 700;
  line-height: 1; color: var(--nbm-ink);
}
.nbm-figure__n small { font-family: var(--nbm-font-sans); font-size: 21px; font-weight: 600; color: var(--nbm-muted); }
.nbm-figure__sub { font-size: 13.5px; color: var(--nbm-muted); margin-top: 8px; }
.nbm-figure ul { border-top: 1px solid var(--nbm-line); margin-top: 22px; padding-top: 20px; display: grid; gap: 11px; }
.nbm-figure li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: var(--nbm-body); line-height: 1.55;
}
.nbm-figure li::before { content: "\2192"; color: var(--nbm-gold-deep); font-weight: 700; flex: none; }

/* ==========================================================================
   CALLOUT — a bordered aside for an optional / secondary note
   ========================================================================== */
.nbm-callout {
  background: #fff; border: 1px solid var(--nbm-line); border-left: 4px solid var(--nbm-gold);
  border-radius: 12px; padding: 28px 30px;
}
.nbm-callout__k {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 12px;
}
.nbm-callout p { font-size: 15px; line-height: 1.68; color: var(--nbm-muted); margin-bottom: 18px; }
.nbm-callout .nbm-pills { margin-top: 0; justify-content: flex-start; }

/* ==========================================================================
   SPLIT — portrait / logo column beside a block of prose
   ========================================================================== */
.nbm-split { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.nbm-split__fig { text-align: center; }
.nbm-split__fig > .shot {
  border: 1px solid var(--nbm-line); border-radius: 12px; overflow: hidden;
  background: var(--nbm-soft);
}
.nbm-split__fig img { width: 100%; height: auto; display: block; }
.nbm-split__name { font-family: var(--nbm-font-serif); font-size: 23px; font-weight: 700; color: var(--nbm-ink); margin-top: 22px; }
.nbm-split__role { font-size: 14px; color: var(--nbm-gold-deep); font-weight: 600; margin-top: 5px; }
.nbm-split__note { font-size: 13px; color: var(--nbm-muted); margin-top: 5px; }
.nbm-split__mark { max-width: 290px; margin: 26px auto 0; }

/* ==========================================================================
   JOURNEY — a numbered horizontal track of short steps
   ========================================================================== */
.nbm-journey { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.nbm-journey--5 { grid-template-columns: repeat(5, 1fr); }
.nbm-journey--4 { grid-template-columns: repeat(4, 1fr); }
.nbm-journey li {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 10px;
  padding: 22px 16px; text-align: center; transition: .22s ease;
}
.nbm-journey li:hover { border-color: var(--nbm-gold); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(17,12,45,.08); }
.nbm-journey .n {
  width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: var(--nbm-navy); color: var(--nbm-gold);
  font-family: var(--nbm-font-serif); font-size: 17px; font-weight: 700;
}
.nbm-journey h5 { font-size: 14px; font-weight: 700; color: var(--nbm-ink); line-height: 1.4; }

/* ==========================================================================
   ENQUIRY STRIP — the slim gold call-out that closes most interior sections
   ========================================================================== */
.nbm-strip { background: var(--nbm-navy); color: #fff; padding-block: 40px; }
.nbm-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.nbm-strip__k { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--nbm-gold-deep); margin-bottom: 7px; }
.nbm-strip h3 { font-family: var(--nbm-font-serif); font-size: clamp(21px, 2.4vw, 29px); font-weight: 700; line-height: 1.24; }
.nbm-strip h3 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-strip p { font-size: 14.5px; color: rgba(255,255,255,.72); margin-top: 7px; }

/* ==========================================================================
   AUDIENCE SPLIT — "you keep this / we run that" pair
   ========================================================================== */
.nbm-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nbm-aud__card {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 14px;
  padding: 32px 30px 30px; display: flex; flex-direction: column;
}
/* The second card is the "we do this" half — reversing it to navy makes the
   division of labour readable at a glance instead of requiring the labels. */
.nbm-aud__card:nth-child(2) { background: var(--nbm-navy); border-color: var(--nbm-navy); color: #fff; }
.nbm-aud__label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 12px;
}
.nbm-aud__card h3 { font-family: var(--nbm-font-serif); font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; line-height: 1.26; color: var(--nbm-ink); margin-bottom: 12px; }
.nbm-aud__card:nth-child(2) h3 { color: #fff; }
.nbm-aud__card h3 em { font-style: normal; color: var(--nbm-gold-deep); }
.nbm-aud__card > p { font-size: 15px; color: var(--nbm-muted); line-height: 1.68; margin-bottom: 22px; }
.nbm-aud__card:nth-child(2) > p { color: rgba(255,255,255,.75); }
.nbm-aud__list { margin-top: auto; border-top: 1px solid var(--nbm-line); padding-top: 18px; display: grid; gap: 11px; }
.nbm-aud__card:nth-child(2) .nbm-aud__list { border-top-color: rgba(255,255,255,.16); }
.nbm-aud__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.55; color: var(--nbm-body); }
.nbm-aud__card:nth-child(2) .nbm-aud__list li { color: rgba(255,255,255,.82); }
.nbm-aud__list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--nbm-gold);
}
.nbm-aud__list a { color: var(--nbm-gold-deep); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   FACULTY PROFILE
   ========================================================================== */
/* Portrait beside the copy in the page hero. */
.nbm-fac { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.nbm-fac__photo {
  border-radius: 14px; overflow: hidden; background: var(--nbm-navy);
  box-shadow: 0 20px 46px rgba(17,12,45,.16);
}
.nbm-fac__photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top;
  /* Grayscale in every state, matching the founder cards elsewhere: one of the
     three portraits is natively black & white, so a colour treatment would
     leave that page looking unlike the other two. */
  filter: grayscale(100%) contrast(1.04);
}
.nbm-fac__creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.nbm-fac__creds span {
  background: rgba(48,53,92,.06); color: var(--nbm-navy); border-radius: 6px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600;
}

/* The two "Teaches & Designs" / "Track Record" panels below the profile prose. */
.nbm-fac__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.nbm-fac__block {
  background: #fff; border: 1px solid var(--nbm-line); border-top: 3px solid var(--nbm-gold);
  border-radius: 12px; padding: 24px 24px 26px;
}
.nbm-fac__block h5 {
  font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 15px;
}
.nbm-fac__block ul { display: grid; gap: 10px; }
.nbm-fac__block li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; color: var(--nbm-body); line-height: 1.55;
}
.nbm-fac__block li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--nbm-gold);
}

/* ==========================================================================
   PROSE — long-form body copy inside a section
   ========================================================================== */
.nbm-prose { font-size: 15.5px; line-height: 1.75; color: var(--nbm-body); max-width: 78ch; }
.nbm-prose p + p { margin-top: 16px; }
.nbm-prose a { color: var(--nbm-gold-deep); font-weight: 600; }
.nbm-prose a:hover { text-decoration: underline; }
.nbm-prose strong { color: var(--nbm-ink); font-weight: 700; }
.nbm-prose ul { display: grid; gap: 10px; margin-top: 16px; }
.nbm-prose ul li { position: relative; padding-left: 22px; color: var(--nbm-muted); }
.nbm-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--nbm-gold);
}

/* --- plain bulleted list, used on its own (eligibility, requirements…) --- */
.nbm-list { display: grid; gap: 12px; }
.nbm-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15px; color: var(--nbm-body); line-height: 1.6;
}
.nbm-list li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--nbm-gold);
}
.nbm-sec--navy .nbm-list li { color: rgba(255,255,255,.82); }

/* ==========================================================================
   SCROLL REVEAL
   Opt-in per element. .nbm-reveal starts hidden ONLY once the script has
   confirmed IntersectionObserver support by setting .nbm-js on <html> — with
   no JS the content simply renders, it never gets stranded invisible.
   ========================================================================== */
.nbm-js .nbm-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.nbm-js .nbm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nbm-js .nbm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   RESPONSIVE — interior components
   ========================================================================== */
@media (max-width: 1024px) {
  .nbm-phero { padding-block: 32px 52px; }
  .nbm-phero--img .nbm-phero__in { grid-template-columns: 1fr; gap: 34px; }
  .nbm-anchors, .nbm-anchors--4 { grid-template-columns: repeat(2, 1fr); }
  .nbm-partner { grid-template-columns: 190px 1fr; gap: 30px; padding: 32px 30px; }
  /* The arrows only mean anything on one line; stacked, the order says it. */
  .nbm-flow, .nbm-flow--4 { grid-template-columns: 1fr; }
  .nbm-flow__arrow { display: none; }
  .nbm-phases, .nbm-phases--4 { grid-template-columns: repeat(2, 1fr); }
  .nbm-roles { grid-template-columns: repeat(2, 1fr); }
  .nbm-logos { grid-template-columns: repeat(3, 1fr); }
  .nbm-journey, .nbm-journey--5, .nbm-journey--4 { grid-template-columns: repeat(3, 1fr); }
  .nbm-split { grid-template-columns: 260px 1fr; gap: 38px; }
  .nbm-figpair { grid-template-columns: 1fr; gap: 30px; }
  .nbm-figpair--rev .nbm-figpair__fig { order: 0; }
  .nbm-aud { grid-template-columns: 1fr; }
  .nbm-fac { grid-template-columns: 220px 1fr; gap: 32px; }
  .nbm-bp__head { padding: 22px 24px; }
  .nbm-bp__tag { text-align: left; }
  .nbm-bp__body { padding: 24px 24px 28px; }
}

@media (max-width: 720px) {
  .nbm-phero { padding-block: 26px 44px; }
  .nbm-phero h1 { max-width: none; }
  .nbm-phero .nbm-btn { width: 100%; justify-content: center; }
  .nbm-anchors, .nbm-anchors--4 { grid-template-columns: 1fr; }
  .nbm-partner { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .nbm-partner__logo { max-width: 220px; }
  .nbm-phases, .nbm-phases--4 { grid-template-columns: 1fr; }
  .nbm-roles { grid-template-columns: 1fr; }
  .nbm-logos { grid-template-columns: repeat(2, 1fr); }
  .nbm-journey, .nbm-journey--5, .nbm-journey--4 { grid-template-columns: repeat(2, 1fr); }
  .nbm-cur__row { grid-template-columns: 1fr; gap: 14px; }
  .nbm-split { grid-template-columns: 1fr; gap: 30px; }
  .nbm-banner--wide img { aspect-ratio: 16/9; }
  .nbm-banner__cap { padding: 30px 20px 16px; font-size: 13px; }
  .nbm-split__fig { max-width: 340px; margin-inline: auto; }
  .nbm-figure { padding: 24px 22px 26px; }
  .nbm-callout { padding: 22px 20px; }
  .nbm-metas > div { flex: 1 1 44%; min-width: 0; }
  /* Stacked, the side column would put the credential chips between the
     portrait and the person's name. display:contents lifts the photo and the
     chips out of it so they can be ordered around the copy. */
  .nbm-fac { display: flex; flex-direction: column; gap: 24px; }
  .nbm-fac__side { display: contents; }
  .nbm-fac__photo { order: 1; max-width: 240px; }
  .nbm-fac > div:last-child { order: 2; }
  .nbm-fac__creds { order: 3; margin-top: 0; }
  .nbm-fac__cols { grid-template-columns: 1fr; }
  .nbm-strip { padding-block: 32px; }
  .nbm-strip__in { gap: 22px; }
  .nbm-strip .nbm-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .nbm-fac__side { max-width: none; }
  .nbm-aud__card { padding: 24px 20px 22px; }
  .nbm-flow__card { padding: 22px 20px; }
  .nbm-bp__head { padding: 20px; }
  .nbm-bp__body { padding: 20px 18px 22px; }
  .nbm-cur__row { padding: 20px 18px; }
  .nbm-logos { grid-template-columns: 1fr; }
  .nbm-journey, .nbm-journey--5, .nbm-journey--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REGISTRATION — register.html
   A two-step flow: details, then the registration fee through Razorpay. It
   used to be a popup on every page; it is a page of its own so counsellors
   have a link to send. The step, pane, autosave and payment rules below are
   shared, and the .nbm-regpage-* block is the page frame the popup did not
   need.
   ========================================================================== */

/* --- page frame --- */
.nbm-regpage {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 34px; align-items: start;
}
.nbm-regpage__card {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 16px;
  padding: 34px 34px 36px; box-shadow: 0 16px 40px rgba(17, 12, 45, .07);
}
.nbm-regpage__card > h2 {
  font-family: var(--nbm-font-serif); font-size: 26px; font-weight: 700;
  color: var(--nbm-ink); line-height: 1.25; margin-bottom: 8px;
}
.nbm-regpage__card > p { font-size: 14.5px; color: var(--nbm-muted); margin-bottom: 24px; }

/* Shown only while the script is still loading, or forever if it is blocked —
   in which case it is the applicant's whole route in, so it carries the phone
   number rather than an apology. */
.nbm-regpage__nojs {
  border: 1px dashed var(--nbm-line); border-radius: 12px;
  padding: 22px; font-size: 14.5px; line-height: 1.7; color: var(--nbm-muted);
}
.nbm-regpage__nojs a { color: var(--nbm-navy); font-weight: 700; }

/* --- reassurance column --- */
.nbm-regpage__side { display: grid; gap: 18px; position: sticky; top: 96px; }
.nbm-regpage__panel {
  background: #fff; border: 1px solid var(--nbm-line); border-radius: 14px; padding: 22px 22px 24px;
}
.nbm-regpage__panel h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nbm-gold-deep); margin-bottom: 14px;
}
.nbm-regpage__panel p { font-size: 13.5px; line-height: 1.65; color: var(--nbm-muted); }
.nbm-regpage__panel ol { display: grid; gap: 13px; counter-reset: nbmreg; }
.nbm-regpage__panel ol li {
  display: flex; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--nbm-body);
}
.nbm-regpage__panel ol li::before {
  counter-increment: nbmreg; content: counter(nbmreg);
  width: 21px; height: 21px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--nbm-navy); color: #fff;
}
.nbm-regpage__fee {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--nbm-line);
}
.nbm-regpage__fee b { font-family: var(--nbm-font-serif); font-size: 30px; color: var(--nbm-ink); }
.nbm-regpage__fee span { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--nbm-muted); text-transform: uppercase; }
.nbm-regpage__help { display: grid; gap: 9px; margin-top: 14px; }
.nbm-regpage__help a {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--nbm-navy);
}
.nbm-regpage__help a:hover { color: var(--nbm-gold-deep); }
.nbm-regpage__help svg { width: 16px; height: 16px; flex: none; }

/* --- step indicator --- */
.nbm-steps2 { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.nbm-steps2 li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--nbm-muted); }
.nbm-steps2 .n {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px;
  background: var(--nbm-soft); color: var(--nbm-muted); border: 1.5px solid var(--nbm-line);
}
.nbm-steps2 li.is-on { color: var(--nbm-ink); }
.nbm-steps2 li.is-on .n { background: var(--nbm-gold); border-color: var(--nbm-gold); color: #110C2D; }
.nbm-steps2 li.is-done .n { background: var(--nbm-navy); border-color: var(--nbm-navy); color: #fff; }
.nbm-steps2 .bar { flex: 1; height: 2px; background: var(--nbm-line); border-radius: 2px; min-width: 16px; }

/* --- panes --- */
.nbm-reg__pane[hidden] { display: none; }
.nbm-form__row--3 { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

/* "Other programme" input only appears once Other is chosen. */
.nbm-reg__other[hidden] { display: none; }

/* --- autosave hint --- */
.nbm-reg__saved {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--nbm-muted); min-height: 18px;
}
.nbm-reg__saved svg { width: 14px; height: 14px; color: #1E9E5A; flex: none; }
.nbm-reg__saved[data-state="idle"] { visibility: hidden; }

/* --- payment step --- */
.nbm-pay { text-align: center; }
.nbm-pay__amt {
  font-family: var(--nbm-font-serif); font-size: 40px; font-weight: 700;
  color: var(--nbm-ink); line-height: 1;
}
.nbm-pay__amt small { font-family: var(--nbm-font-sans); font-size: 14px; font-weight: 600; color: var(--nbm-muted); display: block; margin-top: 8px; letter-spacing: .04em; }
/* Razorpay draws its own branded button in here and brings its own styles, so
   this is only a frame — leave the button itself alone. */
.nbm-pay__rzp {
  margin: 22px auto 0; min-height: 74px;
  display: grid; place-items: center;
  border: 1px solid var(--nbm-line); border-radius: 14px;
  background: var(--nbm-soft); padding: 16px;
}
.nbm-pay__rzp form { margin: 0; }
.nbm-pay__loading { font-size: 13px; font-weight: 600; color: var(--nbm-muted); }
.nbm-pay__loading[hidden] { display: none; }
.nbm-pay__note { font-size: 13.5px; line-height: 1.65; color: var(--nbm-muted); margin-top: 20px; }
.nbm-pay__note strong { color: var(--nbm-ink); }
/* Only revealed when the embed fails to render — an ad-blocker or a dropped
   third-party request must not leave the applicant with no way to pay. */
.nbm-pay__alt {
  margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--nbm-muted);
  background: #FFF8E6; border: 1px solid #F2DFAE; border-radius: 9px; padding: 12px 14px;
}
.nbm-pay__alt[hidden] { display: none; }
.nbm-pay__alt a { color: var(--nbm-navy); font-weight: 700; text-decoration: underline; word-break: break-all; }
.nbm-pay__ref {
  margin-top: 16px; background: var(--nbm-soft); border: 1px solid var(--nbm-line);
  border-radius: 9px; padding: 12px 16px; font-size: 13px; color: var(--nbm-body);
}
.nbm-pay__ref b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--nbm-ink); }
.nbm-reg__actions { display: flex; gap: 12px; margin-top: 4px; }
.nbm-reg__actions .nbm-btn { flex: 1; justify-content: center; }

/* Everything below sits AFTER the base rules above on purpose — same
   specificity, so whichever comes last wins. */
@media (max-width: 1024px) {
  /* The side panels stop being a margin note and become a footer to the form;
     un-stick them or they float over their own content once stacked. */
  .nbm-regpage { grid-template-columns: 1fr; gap: 26px; }
  .nbm-regpage__side { position: static; }
}
@media (max-width: 700px) {
  .nbm-regpage__card { padding: 24px 20px 26px; border-radius: 14px; }
  .nbm-regpage__card > h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .nbm-form__row--3 { grid-template-columns: 1fr; }
  .nbm-steps2 li span:not(.n) { display: none; }
  .nbm-pay__rzp { padding: 14px 10px; }
  .nbm-reg__actions { flex-direction: column; }
}