/* ============================================================
   Noty case study — self-contained, sleek animated document.
   Scoped entirely under .ncs so it never touches the rest of the
   site or the Vinnie / Linko (.cs) case studies.
   ============================================================ */
.ncs {
  /* accent + theme palette — overridden per project via .ncs--vinnie / .ncs--linko */
  --nblue: #2f7bf6;               /* primary accent */
  --nblue-soft: #eaf2ff;          /* soft accent tint */
  --acc-light: #86abff;           /* light accent on dark hero */
  --hero-bg: linear-gradient(150deg, #202b3d 0%, #141a27 100%);
  --dark-bg: #1a2738;             /* dark cards / grow card */
  --on-dark: #e6edf9;             /* light text/number on dark */
  --muted-c: #a2b3d1;             /* muted quote card */
  --glow: 47, 123, 246;           /* rgb triplet for soft glows */
  --eyebrow-on-photo: #bcd2ff;
  --nink: #10151c;
  --nbody: #51606f;
  --nline: #e7ecf3;
  --npaper: #ffffff;
  --nstar: #ffcc33;
  --ease: cubic-bezier(.16, 1, .3, 1);

  max-width: none !important;
  margin: 0 !important;
  color: var(--nink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* the modal drops its padding so full-bleed bands reach the edges */
.study--flush { padding: 0 !important; background: #fafbfe !important; }
/* close button always on top of nav + full-bleed bands */
.study--flush .study__close { z-index: 300; }

/* ---------- per-project themes (same layout, brand colours) ---------- */
.ncs--vinnie {
  --nblue: #bb4c4c;               /* washed-red */
  --nblue-soft: #f6e6df;
  --acc-light: #e6a98f;
  --hero-bg: linear-gradient(150deg, #3a2622 0%, #241512 100%);
  --dark-bg: #3a2420;
  --on-dark: #f3e4d9;
  --muted-c: #d9b3a3;
  --glow: 187, 76, 76;
  --eyebrow-on-photo: #f0c9b8;
}
.ncs--linko {
  --nblue: #5c8a4e;               /* Linko green */
  --nblue-soft: #e6efdd;
  --acc-light: #a9cf9a;
  --hero-bg: linear-gradient(150deg, #2b3524 0%, #1a2116 100%);
  --dark-bg: #26301f;
  --on-dark: #e8f0df;
  --muted-c: #b3c4a2;
  --glow: 92, 138, 78;
  --eyebrow-on-photo: #c8e0b8;
}

.ncs__wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.ncs__hero, .ncs__divider { scroll-margin-top: 92px; }

/* ---------- sticky section nav ---------- */
.ncs__nav {
  position: sticky; top: 18px; z-index: 40;
  width: max-content; max-width: calc(100% - 32px);
  margin: 18px auto 0;
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  padding: 10px;
  background: rgba(16, 21, 28, .58);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(16, 21, 28, .18);
}
.ncs__nav a {
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: rgba(255, 255, 255, .72);
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  transition: color .25s, background .25s;
  white-space: nowrap;
}
.ncs__nav a:hover { color: #fff; }
.ncs__nav a.is-active { color: var(--nink); background: #fff; }

/* ---------- type scale (one consistent system) ----------
   H1  = the four section titles (Research/Development/Testing/Impact) → largest
   H2/H3 = every other sub-heading (Solution, Clarity, …) → one shared size
   Colours are locked: ink for headings, grey for body, blue only for accents.
   The explicit heading colour also cancels the inherited .study__doc h3 (red). */
.ncs h1, .ncs h2, .ncs h3, .ncs h4 {
  color: var(--nink); font-weight: 600;
  font-family: "Inter", system-ui, sans-serif;   /* not the site's condensed display face */
  text-transform: none;                            /* cancel inherited uppercase */
  letter-spacing: -.02em;
}
.ncs__title {                       /* project name — deliberately smaller now */
  font-size: clamp(32px, 4.2vw, 50px); font-weight: 600;
  letter-spacing: -.03em; line-height: .96; margin: 0 0 0.15em;;
}
.ncs__h2, .ncs__h3 {                /* identical size for all sub-headings */
  font-size: clamp(23px, 2.8vw, 32px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.14; margin: 0 0 18px; color: var(--nink);
}
.ncs__h3 { margin: 30px 0 12px; }
.ncs p { font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.7; color: var(--nbody); margin: 0 0 15px; max-width: 60ch; }
.ncs__lead { font-size: clamp(16px, 1.45vw, 18px) !important; line-height: 1.6 !important; color: var(--nbody) !important; max-width: 62ch; }
.ncs__center { text-align: center; margin-inline: auto; }
/* labels/numbers inherit .ncs p max-width:60ch; force them full-width so the
   short text (MAIN INSIGHT, 02, …) sits dead-centre on the page */
.ncs__kicker.ncs__center, .ncs__num.ncs__center, .ncs__eyebrow.ncs__center {
  max-width: none; width: 100%; text-align: center;
}
.ncs__center-block { text-align: center; padding-block: clamp(60px, 10vh, 118px); }
.ncs__center-block .ncs__lead { margin-inline: auto; }
.ncs__kicker, .ncs__eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nblue); margin: 0 0 12px;
}
/* kickers/eyebrows are <p>, so `.ncs p` (0,1,1) was overriding their accent colour
   to grey — this brings the theme green back across every section, consistently */
.ncs p.ncs__kicker, .ncs p.ncs__eyebrow, .ncs p.ncs__feat-eyebrow { color: var(--nblue); }
.ncs__bleed p.ncs__eyebrow { color: var(--eyebrow-on-photo); }
.ncs__num { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; color: var(--nblue); letter-spacing: -.02em; margin: 0 0 4px; }

/* ---------- hero ---------- */
.ncs__hero { padding: clamp(30px, 6vh, 70px) clamp(20px, 5vw, 48px) clamp(40px, 8vh, 90px); }
.ncs__herocard {
  position: relative;
  max-width: 1160px; margin-inline: auto;
  background: var(--hero-bg);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 30px;
  padding: clamp(28px, 3.4vw, 40px) clamp(34px, 5vw, 66px);
  overflow: hidden;
}
.ncs__herocard .ncs__title { color: #fff; }
.ncs__herocard .ncs__meta dt { color: rgba(255, 255, 255, .5); }
.ncs__herocard .ncs__meta dd { color: #fff; }
.ncs__herotop { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ncs__titlewrap { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
.ncs__awards { display: flex; gap: 12px; align-self: flex-start;
  margin-top: calc(-1 * clamp(28px, 3.4vw, 40px)); }   /* cancel herocard top padding → flush to top border */
.ncs__awards img { height: clamp(64px, 8vw, 104px); width: auto; display: block; }
.ncs__season {
  font-size: clamp(13px, 1.2vw, 15px);
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
  position: relative;
  z-index: 0;                 /* sits BEHIND the photos; a hovered photo hides it */
}
.ncs__subtitle { color: var(--acc-light) !important; font-weight: 500; font-size: clamp(14px, 1.3vw, 16px) !important; margin: 18px 0 0; }
.ncs__meta { display: flex; flex-wrap: wrap; gap: 18px 56px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; }
.ncs__meta div { display: flex; flex-direction: column; }
.ncs__meta dt { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: #93a1b2; font-weight: 700; margin-bottom: 5px; }
.ncs__meta dd { margin: 0; font-size: clamp(15px, 1.4vw, 17px); font-weight: 600; color: var(--nink); }

/* three tilted, overlapping photos — hover to enlarge & straighten */
.ncs__photos {
  position: absolute; bottom: -15%; right: clamp(24px, 4vw, 54px);
  width: clamp(150px, 20vw, 240px); height: clamp(120px, 15vw, 170px);
}
.ncs__photo {
  position: absolute; margin: 0; width: 62%;
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 12px 26px rgba(16, 21, 28, .2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), z-index 0s;
  cursor: pointer;
}

.ncs__photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.ncs__photo--a { left: 0;   top: 8%;  transform: rotate(-9deg);  z-index: 1; }
.ncs__photo--b { left: 22%; top: 0;   transform: rotate(4deg);   z-index: 2; }
.ncs__photo--c { left: 44%; top: 14%; transform: rotate(11deg);  z-index: 1; }
/* Linko's third photo is a wide group selfie — give ONLY it a wider, landscape
   frame (and a bit more container room) so the whole group fits */
.ncs--linko .ncs__photos { right: clamp(24px, 4vw, 58px); width: clamp(178px, 24vw, 290px); }
.ncs--linko .ncs__photo--c { left: 34%; top: 16%; width: 78%; }
.ncs--linko .ncs__photo--c img { aspect-ratio: 4/3; }
/* hover: rise up and straighten to fully show the photo */
.ncs__photo:hover { transform: translateY(-30px) rotate(0) scale(1.16); z-index: 5; box-shadow: 0 34px 62px rgba(16, 21, 28, .34); }

/* ---------- two-column rows (converge from the sides) ---------- */
.ncs__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 88px);
  align-items: center; padding-block: clamp(56px, 10vh, 120px);
}
.ncs__row--rev { direction: rtl; }
.ncs__row--rev > * { direction: ltr; }
.ncs__media { display: flex; justify-content: center; }
/* soft blurred glow to the LEFT of the photo (impact 01 + 03) */
.ncs__media--glow { position: relative; }
.ncs__media--glow::before {
  content: ""; position: absolute; z-index: -1;
  left: -22%; top: 8%; width: 62%; height: 84%;
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--glow), .28), rgba(var(--glow), .12) 45%, transparent 72%);
  filter: blur(46px); border-radius: 50%;
}
.ncs__float { width: 100%; max-width: 440px; height: auto; }
.ncs__float--lg { max-width: 560px; }
.ncs__float--xl { max-width: 620px; }
/* image already carries its own soft shadow / has no card — drop the CSS one */
.ncs__float--bare { filter: none; max-width: 680px; }
/* give the image side a little more of the row so it reads slightly larger */
.ncs__row--mediabig { grid-template-columns: 0.92fr 1.08fr; }
/* solution row: let the image column take a bit more space so it reads larger */
.ncs__row--medialeft { grid-template-columns: 1.12fr 0.88fr; }

/* ---- Solution: centred enlarged image, two text blocks side-by-side below ---- */
.ncs__solution { display: flex; flex-direction: column; align-items: center; gap: clamp(34px, 6vh, 68px); }
.ncs__solution-img { width: 100%; display: flex; justify-content: center; }
.ncs__solution-img img { width: 100%; max-width: 940px; height: auto; border-radius: 14px;
  filter: drop-shadow(0 28px 60px rgba(16, 21, 28, .18)); }
.ncs__solution-cols { width: 100%; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px); align-items: end; }
.ncs__solution-col > :first-child { margin-top: 0; }
@media (max-width: 760px) {
  .ncs__solution-cols { grid-template-columns: 1fr; gap: clamp(24px, 5vh, 40px); align-items: start; }
}

/* ---- Voices / research-insight composition (after problem statement) ---- */
.ncs__voices { padding-block: clamp(20px, 4vh, 60px) clamp(56px, 10vh, 120px); }
.ncs__voices .ncs__h2.ncs__center { margin-bottom: clamp(30px, 5vh, 60px); }

.ncs__vstats { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.ncs__vstat { border-radius: 16px; padding: clamp(18px, 2.2vw, 28px);
  background: var(--nblue-soft); border: none; box-shadow: 0 14px 36px rgba(16, 21, 28, .10);
  display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ncs__vstat-stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; max-width: none; }
.ncs__vstat-stat strong { font-weight: 700; color: var(--nink); font-size: clamp(16px, 1.5vw, 19px); letter-spacing: -.01em; }
.ncs__vstat-num { font-size: clamp(28px, 3vw, 38px); font-weight: 700; color: #5E2A28; letter-spacing: -.02em; line-height: 1; }
.ncs__vstat-who { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ncs__vstat-who em { font-style: normal; font-weight: 500; color: var(--nbody); font-size: clamp(14px, 1.1vw, 16px); }
.ncs__vstat-who strong { font-weight: 700; color: var(--nblue); font-size: clamp(14px, 1.1vw, 16px); letter-spacing: 0; }

/* voices collage: polished 2-column layout on tablet/mobile (key card spans full width) */
@media (max-width: 860px) {
  /* pairs of quotes with the stat card centred on top — compact, never lopsided */
  .ncs__quotes.ncs__quotes--voices { display: grid !important; grid-template-columns: 1fr 1fr !important;
    max-width: 560px !important; margin-inline: auto; gap: 14px !important; align-items: stretch !important; }
  .ncs__quotes--voices .ncs__vq { grid-column: auto !important; grid-row: auto !important;
    transform: none !important; margin: 0 !important; align-self: stretch; }
  .ncs__quotes--voices .ncs__vcenter { grid-column: 1 / -1 !important; grid-row: auto !important;
    order: -1; justify-self: center !important; width: 100% !important; margin: 0 !important;
    padding-block: clamp(30px, 5vw, 44px) clamp(22px, 3.5vw, 30px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .28); }
}
@media (max-width: 480px) {
  .ncs__quotes.ncs__quotes--voices { grid-template-columns: 1fr !important; max-width: 400px !important; }
}
@media (max-width: 760px) {
  .ncs__vstats { grid-template-columns: 1.15fr 1fr; }   /* keep side-by-side on mobile */
  .ncs__vstat { padding: 16px; gap: 10px; }
}

/* ---- Impact scrollytelling: pinned browser + crossfading text ---- */
.ncs__scrolly { position: relative; height: 380vh; }
.ncs__scrolly-stage { position: sticky; top: 0; height: 100vh; display: grid;
  grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(30px, 5vw, 80px);
  max-width: min(1360px, 92vw); margin-inline: auto; padding-inline: clamp(20px, 4vw, 60px); }

.ncs__st-items { position: relative; min-height: clamp(300px, 42vh, 380px); overflow: hidden; }
.ncs__st-item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(100%);
  transition: opacity .35s linear, transform .45s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none; will-change: opacity, transform; }
.ncs__st-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ncs__st-num { display: inline-block; font-size: clamp(13px, 1.3vw, 16px); font-weight: 700;
  letter-spacing: .1em; color: var(--nblue); }
.ncs__st-title { font-size: clamp(23px, 2.8vw, 32px); line-height: 1.14; letter-spacing: -.02em; font-weight: 600;
  color: var(--nink); margin: .4em 0 .6em; max-width: 18ch; }
.ncs__scrolly .ncs__st-body { font-size: clamp(16px, 1.45vw, 18px); line-height: 1.6; color: var(--nink); max-width: 40ch; }
.ncs__st-body b { color: var(--nblue); font-weight: 700; }
.ncs__scrolly .ncs__st-how { margin-top: 1em; font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.7; color: var(--nbody); max-width: 46ch; }
.ncs__st-how span { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 20px;
  background: var(--nblue-soft); color: var(--nblue); font-size: .78em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; }
.ncs__st-dots { display: flex; gap: 10px; margin-top: clamp(30px, 4vh, 46px); }
.ncs__st-dots i { width: 30px; height: 4px; border-radius: 2px; background: var(--nline); transition: background .4s var(--ease); }
.ncs__st-dots i.is-on { background: var(--nblue); }

.ncs__laptop { position: relative; width: 100%; }
.ncs__laptop-frame { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
/* screen cutout of mockup.png measured at x 10.06%–90.04%, y 3.38%–88.98% */
.ncs__browser-screen { position: absolute; overflow: hidden; background: #fff; z-index: 1; }
.ncs__laptop-screen { left: 10.06%; top: 3.38%; width: 79.98%; height: 85.60%; }
.ncs__browser-page { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; }

@media (max-width: 860px) {
  /* keep the pinned scroll-sync, but stack the mockup above the advancing text */
  .ncs__scrolly { height: 300vh; }
  .ncs__scrolly-stage { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 28px);
    align-content: center; padding-block: 0; }
  .ncs__scrolly-device { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
  .ncs__st-items { min-height: clamp(200px, 30vh, 270px); }
  .ncs__st-dots { margin-top: 18px; }
}

/* ---- Google search mock (SEO section) ---- */
.ncs__gsearch { max-width: 560px; margin: clamp(34px, 5vh, 56px) auto 0; text-align: center; }
.ncs__gsearch-logo { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: clamp(34px, 5vw, 48px);
  letter-spacing: -.02em; margin-bottom: clamp(18px, 3vh, 28px); }
.ncs__gsearch-box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #dfe1e5;
  border-radius: 26px; padding: 12px 18px; box-shadow: 0 2px 8px rgba(16, 21, 28, .10);
  transition: box-shadow .3s var(--ease); position: relative; z-index: 2; }
.ncs__gsearch:hover .ncs__gsearch-box { box-shadow: 0 6px 18px rgba(16, 21, 28, .16); }
.ncs__gsearch-ic { width: 22px; height: 22px; flex: none; }
.ncs__gsearch-text { flex: 1; text-align: left; font-size: clamp(15px, 1.4vw, 18px); color: var(--nink); white-space: nowrap; overflow: hidden; }
.ncs__gsearch-caret { width: 2px; height: 1.2em; background: #4285F4; display: inline-block; vertical-align: middle;
  animation: ncsCaret 1s steps(1) infinite; margin-left: -2px; }
@keyframes ncsCaret { 50% { opacity: 0; } }
.ncs__gsearch-suggest { list-style: none; margin: -20px auto 0; padding: 24px 0 8px; max-width: 560px;
  background: #fff; border: 1px solid #dfe1e5; border-top: none; border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 16px rgba(16, 21, 28, .10); text-align: left; position: relative; z-index: 1; }
.ncs__gsearch-suggest li { display: flex; align-items: center; gap: 14px; padding: 9px 20px; font-size: 15px;
  color: #3c4043; cursor: pointer; transition: background .2s; }
.ncs__gsearch-suggest li:hover { background: #f8f9fa; }
.ncs__gsearch-suggest svg { width: 18px; height: 18px; flex: none; }

/* ---- inline number highlight ---- */
.ncs__hl { color: var(--nblue); font-weight: 700; }

/* ---- iteration summary: compact cards (no numbers / no eyebrows) ---- */
.ncs__itr { padding-block: clamp(18px, 3vh, 36px) clamp(20px, 4vh, 44px); }
.ncs__itr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px);
  max-width: 940px; margin: 0 auto; align-items: stretch; }
.ncs__itr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--nline);
  border-radius: 14px; padding: clamp(16px, 1.8vw, 22px); box-shadow: 0 8px 22px rgba(16, 21, 28, .05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ncs__itr-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 21, 28, .1); }
.ncs__itr-t { font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; color: var(--nink); letter-spacing: -.01em; margin: 0 0 6px; }
.ncs__itr .ncs__itr-d { font-size: clamp(13px, 1vw, 14.5px); line-height: 1.5; color: var(--nbody); margin: 0; max-width: none; }
.ncs__itr-visual { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ncs__itr-visual--img img { height: 52px; width: auto; display: block; border-radius: 8px; box-shadow: 0 6px 16px rgba(16, 21, 28, .14); }
.ncs__itr-cta { font-size: 12.5px; font-weight: 700; padding: 8px 13px; border-radius: 9px; background: var(--nblue); color: #fff; }
.ncs__itr-cta--ghost { background: transparent; color: var(--nblue); border: 1.5px solid var(--nblue); }
.ncs__itr-old { font-size: 12.5px; color: var(--nbody); text-decoration: line-through; text-decoration-color: rgba(var(--glow), .6); }
.ncs__itr-arrow { width: 18px; height: 18px; color: var(--nblue); flex: none; }
.ncs__itr-new { font-size: 12.5px; font-weight: 700; color: var(--nblue); background: var(--nblue-soft); padding: 6px 11px; border-radius: 8px; }
@media (max-width: 760px) { .ncs__itr-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- final design featured over a blurred looping strip ---- */
.ncs__final { padding-block: clamp(10px, 2vh, 24px) clamp(40px, 7vh, 90px); }
.ncs__final-stage { position: relative; overflow: hidden; width: 100%;
  min-height: clamp(320px, 44vw, 480px); display: grid; place-items: center;}
.ncs__final-loop { position: absolute; inset: 0; display: flex; align-items: center; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.ncs__final-track { display: flex; gap: 0; width: max-content; animation: ncsMarqueeSeam 28s linear infinite; }
/* each background screen gets only a very slight blur, staying clearly visible */
.ncs__final-track img { height: clamp(200px, 26vw, 300px); width: auto; display: block; border-radius: 14px;
  margin-right: 34px; filter: blur(1.2px); }
.ncs__final:hover .ncs__final-track { animation-play-state: paused; }
.ncs__final-hero { position: relative; z-index: 2; margin: 0; }
.ncs__final-hero img { width: clamp(300px, 54vw, 600px); max-width: 88%; height: auto; display: block;
  border-radius: 16px; }

/* ---- minimal testing stat row (5 tourists / 3 tasks / 82%) ---- */
.ncs__ministats { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
  gap: clamp(20px, 5vw, 56px); margin: clamp(28px, 4vh, 44px) auto 0; }
.ncs__ministat { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; padding: 0 clamp(6px, 1vw, 14px); }
.ncs__ministat + .ncs__ministat::before { content: ""; position: absolute; left: calc(-1 * clamp(10px, 2.5vw, 28px));
  top: 8%; height: 84%; width: 1px; background: var(--nline); }
.ncs__ministat-main { height: clamp(58px, 11vw, 74px); display: flex; align-items: center; justify-content: center; }
.ncs__ministat b { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; color: var(--nink); line-height: 1; letter-spacing: -.02em; }
.ncs__ministat span { font-size: clamp(12px, 1vw, 13px); text-transform: uppercase; letter-spacing: .08em; color: var(--nbody); }
/* five tourist icons — pyramid (3 over 2, bottom nested in the gaps), ~1.5× larger */
.ncs__people { display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .5vw, 4px); color: var(--nblue); }
.ncs__people-row { display: flex; gap: clamp(4px, 1vw, 9px); }
.ncs__people-row:last-child { margin-top: calc(-1 * clamp(3px, .8vw, 6px)); }
.ncs__people svg { width: clamp(22px, 5vw, 33px); height: auto; display: block; }
.ncs__iter-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.ncs__iter-cta { font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 10px; background: var(--nblue); color: #fff; }
.ncs__iter-cta--ghost { background: transparent; color: var(--nblue); border: 1.5px solid var(--nblue); }
.ncs__iter-swap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ncs__iter-old { font-size: 13px; color: var(--nbody); text-decoration: line-through; text-decoration-color: rgba(var(--glow), .6); }
.ncs__iter-arrow { width: 20px; height: 20px; color: var(--nblue); flex: none; }
.ncs__iter-new { font-size: 13px; font-weight: 700; color: var(--nblue); background: var(--nblue-soft); padding: 6px 12px; border-radius: 8px; }
@media (max-width: 760px) { .ncs__iter-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ---- stat donut chart (User testing) ---- */
.ncs__statchart { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.4vh, 24px);
  margin: clamp(34px, 5vh, 56px) auto 0; max-width: 420px; }
.ncs__donut { position: relative; width: clamp(180px, 24vw, 240px); aspect-ratio: 1; }
.ncs__donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ncs__donut circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.ncs__donut-bg { stroke: var(--nblue-soft); }
.ncs__donut-fg { stroke: var(--nblue); stroke-dasharray: 326.726;
  stroke-dashoffset: calc((100 - var(--pct)) * 3.26726px);
  transition: stroke-dashoffset 1.4s var(--ease); }
.ncs.ncs-armed .ncs__statchart.ncs-reveal:not(.in) .ncs__donut-fg { stroke-dashoffset: 326.726px; }
.ncs__donut-num { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(38px, 5vw, 56px); font-weight: 700; color: var(--nink); letter-spacing: -.02em; }
.ncs__statchart-cap { font-size: clamp(16px, 1.45vw, 18px); line-height: 1.5; color: var(--nbody);
  text-align: center; margin: 0; max-width: 30ch; }

/* ---- colour palette (Visual Direction) ---- */
.ncs__palette { list-style: none; padding: 0; margin: clamp(30px, 5vh, 50px) auto 0; max-width: 720px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.ncs__swatch { display: flex; flex-direction: column; align-items: flex-start; background: #fff;
  border: 1px solid var(--nline); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(16, 21, 28, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ncs__swatch:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16, 21, 28, .12); }
.ncs__swatch-chip { width: 100%; height: clamp(70px, 9vw, 104px); background: var(--c); display: block; }
.ncs__swatch b { font-size: clamp(14px, 1.2vw, 16px); color: var(--nink); font-weight: 700; margin: 14px 16px 2px; }
.ncs__swatch small { font-size: 12px; letter-spacing: .06em; color: var(--nbody); margin: 0 16px 14px; text-transform: uppercase; }
@media (max-width: 560px) { .ncs__palette { grid-template-columns: 1fr; max-width: 320px; } }

/* ---- Annotated before/after: mockup flanked by labelled callouts ---- */
.ncs__annot { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: clamp(18px, 2.6vw, 46px);
  align-items: center; max-width: 1240px; margin-inline: auto; }
.ncs__annot-stage { position: relative; display: flex; justify-content: center; }
.ncs__annot-stage .ncs__ba { margin-inline: auto; }
.ncs__annot-col { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 32px); }
.ncs__annot-tag { font-size: clamp(15px, 1.5vw, 18px); font-weight: 700; color: var(--nblue); margin: 0 0 2px; max-width: none; }
.ncs__annot-col--before { text-align: right; }
.ncs__annot-item { position: relative; }
.ncs__annot-t { font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; color: var(--nink); letter-spacing: -.01em; margin: 0 0 5px; line-height: 1.2; }
.ncs__annot .ncs__annot-d { font-size: clamp(13px, 1vw, 14.5px); line-height: 1.5; color: var(--nbody); margin: 0; max-width: none; }
/* dotted leader lines + endpoint dot pointing toward the mockup */
.ncs__annot-item::after { content: ""; position: absolute; top: 9px; width: clamp(18px, 3vw, 44px);
  border-top: 2px dotted var(--nblue); opacity: .55; }
.ncs__annot-item::before { content: ""; position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--nblue); }
.ncs__annot-col--after .ncs__annot-item::after { left: 100%; margin-left: 8px; }
.ncs__annot-col--after .ncs__annot-item::before { left: 100%; margin-left: calc(8px + clamp(18px, 3vw, 44px) - 3px); }
.ncs__annot-col--before .ncs__annot-item::after { right: 100%; margin-right: 8px; }
.ncs__annot-col--before .ncs__annot-item::before { right: 100%; margin-right: calc(8px + clamp(18px, 3vw, 44px) - 3px); }

@media (max-width: 900px) {
  .ncs__annot { grid-template-columns: 1fr; gap: clamp(22px, 4vh, 40px); max-width: 620px; }
  .ncs__annot-stage { order: -1; }
  .ncs__annot-col--before { text-align: left; }
  .ncs__annot-item::after, .ncs__annot-item::before { display: none; }
  .ncs__annot-tag { font-size: 17px; padding-bottom: 6px; border-bottom: 1px solid var(--nline); }
}

/* ---- Before / After comparison inside laptop mockup ---- */
.ncs__ba { position: relative; width: 100%; max-width: 720px; margin-inline: auto; }
.ncs__ba-labels { display: flex; justify-content: space-between;
  padding: 0 12% 8px; font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; color: var(--nink); }
.ncs__ba-stage { position: relative; width: 100%; }
.ncs__ba-mockup { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
/* screen cutout of mockup.png measured at x 10.06%–90.04%, y 3.38%–88.98% */
.ncs__ba-frame { position: absolute; left: 10.06%; top: 3.38%; width: 79.98%; height: 85.60%;
  overflow: hidden; z-index: 1; cursor: ew-resize; touch-action: none; }
.ncs__ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ncs__ba-before { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.ncs__ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; margin-left: -1px; background: var(--nblue); z-index: 3; }
.ncs__ba-knob { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff;
  border: 2px solid var(--nblue); box-shadow: 0 4px 12px rgba(16, 21, 28, .3); }
.ncs__ba-knob::before, .ncs__ba-knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-block: 5px solid transparent; }
.ncs__ba-knob::before { left: 5px; border-right: 6px solid var(--nblue); transform: translateY(-50%); }
.ncs__ba-knob::after { right: 5px; border-left: 6px solid var(--nblue); transform: translateY(-50%); }
.ncs__shot { width: 100%; max-width: 520px; height: auto; border-radius: 18px; box-shadow: 0 24px 56px rgba(16, 21, 28, .14); background: transparent !important;
  border: none !important;
  box-shadow: none !important;}

/* ---------- video ---------- */
.ncs__video-wrap { padding-block: clamp(20px, 4vh, 50px) clamp(64px, 11vh, 130px); }
.ncs__video { position: relative; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; background: transparent; box-shadow: 0 30px 70px rgba(16, 21, 28, .28); max-width: 1000px; margin: 22px auto 0; background: transparent !important;}
/* scale the player a touch so any thin letterbox bars are cropped off the edges */
.ncs__video-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ncs__video iframe { position: absolute; inset: 0; width: 102% !important;
  height: 102% !important; top: -1% !important;
  left: -1% !important; border: 0; transform: scale(1.02); transform-origin: center; background: transparent !important;}

/* ---------- section divider = H1, the largest headings ---------- */
.ncs__divider { text-align: center; padding-block: clamp(56px, 9vh, 104px) clamp(18px, 3vh, 34px); }
/* more air where a dense section (the pinned findings) runs into the next one */
.ncs__divider--gap { padding-top: clamp(96px, 15vh, 178px); }
.ncs__divider span {
  display: inline-block; font-size: clamp(38px, 5.6vw, 64px); font-weight: 600;
  letter-spacing: -.025em; text-transform: none; color: var(--nink);
  padding-bottom: 18px; position: relative;
}
.ncs__divider span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 46px; height: 3px; border-radius: 3px; background: var(--nblue); transform: translateX(-50%); }

/* ---------- full-bleed photo band (taller, centred, calmer text) ---------- */
.ncs__bleed { position: relative; width: 100%; min-height: clamp(460px, 78vh, 700px); display: grid; place-items: center; overflow: hidden; margin-block: clamp(24px, 5vh, 52px); }
.ncs__bleed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
/* the "Following development" band runs taller on desktop */
.ncs__bleed--dark { min-height: clamp(500px, 90vh, 880px); }
.ncs__bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 12, 18, .74), rgba(8, 12, 18, .5)); z-index: 1; }
.ncs__bleed-body { position: relative; z-index: 2; max-width: 900px; width: 100%; margin-inline: auto; padding: clamp(30px, 7vw, 80px); text-align: center; }
.ncs__bleed .ncs__eyebrow { color: var(--eyebrow-on-photo); margin-bottom: 22px; text-align: center; margin-inline: auto;}
.ncs__bleed-lead { color: #fff !important; font-size: clamp(20px, 2.4vw, 30px) !important; font-weight: 500; line-height: 1.32 !important; letter-spacing: -.015em; max-width: 26ch; margin: 0 auto; }

/* ---------- research chart ---------- */
.ncs__chart { display: block; width: 100%; max-width: 760px; height: auto; margin: 34px auto 0; }

/* ---------- main insight ---------- */
.ncs__insights { list-style: none; padding: 0; margin: 26px auto 0; max-width: 720px; display: grid; gap: 14px; text-align: left; }
.ncs__insights li { position: relative; padding-left: 26px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: #3c4a59; }
.ncs__insights li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--nblue); }
/* insight evidence: self-built quote cards — overlapping collage with a soft
   blurred halo, the 70% stat anchored in the middle */
.ncs__quotes {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px 8px;
  align-items: start; max-width: 960px; margin: clamp(40px, 6vw, 72px) auto 0;
}
.ncs__quotes::before {
  content: ""; position: absolute; inset: -9% -6%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(var(--glow), .2), transparent 64%);
  filter: blur(38px);
}
.ncs__qcard {
  position: relative; z-index: 1; margin: 0; display: block;
  border-radius: 16px; padding: 20px 22px; font-size: 14.5px; line-height: 1.5; color: var(--nink);
  box-shadow: 0 16px 40px rgba(16, 21, 28, .14);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ncs__qcard cite { display: block; margin-top: 12px; font-style: normal; font-size: 12px; letter-spacing: .04em; color: var(--nbody); }
/* the four palette colours (themed per project) */
.ncs__qcard--white { background: #FFFFFF; }
.ncs__qcard--light { background: var(--nblue-soft); }
.ncs__qcard--muted { background: var(--muted-c); color: var(--nink); }
.ncs__qcard--muted cite { color: rgba(16, 21, 28, .55); }
.ncs__qcard--dark { background: var(--dark-bg); color: #fff; }
.ncs__qcard--dark cite { color: rgba(255, 255, 255, .5); }
/* 70% stat, centred + prominent */
.ncs__qcard--stat { background: var(--dark-bg); color: var(--on-dark); text-align: center; padding: 32px 26px; box-shadow: 0 28px 64px rgba(0, 0, 0, .3); }
.ncs__qcard--stat b { display: block; font-size: 2.6em; font-weight: 700; color: var(--on-dark); line-height: 1; margin-bottom: 8px; }
.ncs__qcard--stat cite { color: rgba(255, 255, 255, .5); }
/* grid placement + a little overlap & tilt */
.ncs__qcard--l { grid-column: 1; }
.ncs__qcard--r { grid-column: 3; }
.ncs__qcard--mid { grid-column: 2; grid-row: 1 / span 3; align-self: center; z-index: 4; transform: scale(1.05); }
.ncs__qcard--l:nth-of-type(1) { transform: rotate(-3deg); z-index: 3; }
.ncs__qcard--l:nth-of-type(2) { margin: -12px 0 0 14px; transform: rotate(2.6deg); z-index: 2; }
.ncs__qcard--l:nth-of-type(3) { margin: -12px 0 0 -6px; transform: rotate(-2deg); z-index: 3; }
.ncs__qcard--r:nth-of-type(5) { grid-row: 1; transform: rotate(3deg); z-index: 3; }
.ncs__qcard--r:nth-of-type(6) { grid-row: 2; margin: -12px 8px 0 0; transform: rotate(-2.6deg); z-index: 2; }
.ncs__quotes .ncs__qcard:hover { transform: translateY(-6px) rotate(0) scale(1.06); box-shadow: 0 30px 60px rgba(16, 21, 28, .22); z-index: 9; }

/* Noty's insight collage is four quotes around the stat — two a side, both
   rows the same height. Even gaps and gentler tilts instead of the negative
   margins the six-card version needed, so the block reads as a tidy frame. */
.ncs__quotes--insight { grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(14px, 1.6vw, 22px) clamp(12px, 1.4vw, 20px);
  align-items: stretch; max-width: 940px; }
.ncs__quotes--insight .ncs__qcard { display: flex; flex-direction: column; justify-content: space-between; }
.ncs__quotes--insight .ncs__qcard--mid { grid-row: 1 / span 2; }
.ncs__quotes--insight .ncs__qcard--l:nth-of-type(1) { grid-row: 1; margin: 0; transform: rotate(-2.4deg); z-index: 3; }
.ncs__quotes--insight .ncs__qcard--l:nth-of-type(2) { grid-row: 2; margin: 0; transform: rotate(2deg);    z-index: 2; }
.ncs__quotes--insight .ncs__qcard--r:nth-of-type(4) { grid-row: 1; margin: 0; transform: rotate(2.4deg);  z-index: 3; }
.ncs__quotes--insight .ncs__qcard--r:nth-of-type(5) { grid-row: 2; margin: 0; transform: rotate(-2deg);   z-index: 2; }

/* interview quotes as a tilted, overlapping card collage with the key quote centred on top */
.ncs__quotes.ncs__quotes--voices { grid-template-columns: 1fr 1.05fr 1fr; max-width: 940px; align-items: center; gap: 14px 0; }
.ncs__quotes--voices .ncs__qcard { font-size: clamp(14px, 1.45vw, 17px); line-height: 1.5;
  border: 1px solid var(--nline); box-shadow: 0 10px 30px rgba(16, 21, 28, .07); }
.ncs__quotes--voices .ncs__vq--hi { border-color: rgba(var(--glow), .45); color: var(--nblue); font-weight: 500; }
.ncs__quotes--voices .ncs__vq--hi cite { color: rgba(var(--glow), .7); }
.ncs__quotes--voices::before { background: radial-gradient(ellipse at 50% 50%, rgba(var(--glow), .12), transparent 64%); }
.ncs__quotes--voices .ncs__vq--1 { grid-column: 1; grid-row: 1; transform: rotate(-2.6deg); z-index: 2; }
.ncs__quotes--voices .ncs__vq--2 { grid-column: 1; grid-row: 2; margin: -6px 0 0 16px; transform: rotate(2deg); z-index: 2; }
.ncs__quotes--voices .ncs__vq--3 { grid-column: 3; grid-row: 1; margin-right: 6px; transform: rotate(2.4deg); z-index: 2; }
.ncs__quotes--voices .ncs__vq--4 { grid-column: 3; grid-row: 2; margin: -6px 10px 0 0; transform: rotate(-2deg); z-index: 2; }

/* centred key-insight card, layered above all four quotes */
.ncs__vcenter { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; z-index: 6;
  position: relative; overflow: hidden; text-align: center; width: calc(100% + 60px); margin-inline: -30px;
  background: var(--dark-bg); color: #fff; border-radius: 20px;
  padding: clamp(52px, 5.4vw, 72px) clamp(24px, 2.6vw, 40px) clamp(30px, 3.4vw, 46px);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .34); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.ncs__vcenter blockquote { margin: 0; font-size: clamp(16px, 1.75vw, 24px); line-height: 1.34;
  font-weight: 500; letter-spacing: -.01em; position: relative; z-index: 1; }
.ncs__vcenter blockquote em { font-style: italic; color: var(--acc-light); }
.ncs__vcenter figcaption { margin-top: clamp(12px, 2vh, 18px); position: relative; z-index: 1;
  font-size: clamp(10px, .9vw, 12px); text-transform: uppercase; letter-spacing: .14em; color: var(--muted-c); }
.ncs__vcenter-mark { position: absolute; top: clamp(12px, 1.8vw, 22px); left: 50%; transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(60px, 6.5vw, 96px); line-height: .7;
  color: rgba(var(--glow), .3); pointer-events: none; z-index: 0; }
.ncs__quotes--voices:hover .ncs__vcenter { transform: translateY(-4px) scale(1.02); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }

/* ---------- need chips ---------- */
.ncs__needs { padding-block: clamp(56px, 10vh, 120px); }
.ncs__chips { list-style: none; padding: 0; margin: 40px auto 0; max-width: 860px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ncs__chip {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--nink);
  border: 1px solid var(--nline); border-radius: 16px;
  padding: 15px 22px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.35;
  box-shadow: 0 6px 16px rgba(16, 21, 28, .05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.ncs__chip::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nblue-soft); color: var(--nblue); font-size: 12px; font-weight: 800; }
.ncs__chip b { color: var(--nblue); font-weight: 700; }
.ncs__chip:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(47, 123, 246, .18); border-color: var(--nblue); }

/* decision journey — 5 stepped cards */
.ncs__journey { list-style: none; padding: 0; margin: clamp(36px, 5vh, 56px) auto 0; max-width: 1120px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 18px); text-align: left; }
.ncs__jstep { background: #fff; border: 1px solid var(--nline); border-radius: 16px;
  padding: clamp(18px, 1.8vw, 24px); box-shadow: 0 8px 22px rgba(16, 21, 28, .06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ncs__jstep:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(16, 21, 28, .12); }
.ncs__journey .ncs__jstep-n { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--nblue); margin: 0 0 clamp(14px, 2vh, 22px); }
.ncs__journey .ncs__jstep-t { font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; color: var(--nink);
  letter-spacing: -.01em; line-height: 1.15; margin: 0 0 6px; }
.ncs__journey .ncs__jstep-d { font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.5; color: var(--nbody); margin: 0; max-width: none; }
@media (max-width: 900px) { .ncs__journey { grid-template-columns: repeat(2, 1fr); max-width: 620px; } }
@media (max-width: 520px) { .ncs__journey { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- ideation : full page width ---------- */
.ncs__ideation { position: relative; width: 100%; max-width: none; margin: 0; min-height: 680px; overflow: hidden; }
.ncs__ideation-bg { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; display: block; filter: saturate(1.02) brightness(.9); }
/* idea cards float on the photo with NO frame/border */
.ncs__idea { position: absolute; border-radius: 10px; background: transparent; padding: 0; box-shadow: none; transition: transform .5s var(--ease); }
.ncs__idea--1 { width: 15%; left: 6%;  top: 10%; transform: rotate(-6deg); }
.ncs__idea--2 { width: 20%; left: 15%; top: 46%; transform: rotate(5deg); }
.ncs__idea--3 { width: 16%; right: 10%; top: 8%; transform: rotate(7deg); }
.ncs__idea--4 { width: 13%; right: 6%; top: 44%; transform: rotate(-5deg); }
.ncs__ideation:hover .ncs__idea { transform: rotate(0) scale(1.05); }

/* ---------- wireframe / testing images ---------- */
.ncs__wireframe, .ncs__testing { display: block; width: 100%; max-width: 940px; height: auto; margin: 40px auto 0; }
.ncs__wireframe--sm { max-width: 658px; }   /* ~0.7× of the default 940px */
.ncs__wireframe--full { max-width: none; width: 100%; margin: clamp(24px, 5vh, 52px) 0 0; border-radius: 0; }
.ncs__testing { max-width: 780px; }

/* ==========================================================
   Linko research additions (chart, data-points bleed,
   insight map, liquid lo-fi → hi-fi reveal)
   ========================================================== */

/* --- research-methods horizontal bar chart --- */
.ncs__bars { list-style: none; max-width: 720px; margin: 44px auto 0; padding: 0; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); }
.ncs__bar { display: grid; grid-template-columns: minmax(104px, 200px) 1fr auto; align-items: center; gap: clamp(10px, 1.6vw, 20px); }
.ncs__bar-label { font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 600; color: var(--nink); text-align: right; line-height: 1.25; }
.ncs__bar-track { height: 15px; border-radius: 999px; background: var(--nblue-soft); overflow: hidden; }
.ncs__bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--acc-light), var(--nblue)); }
.ncs__bars.in .ncs__bar-fill { width: var(--w); transition: width 1.1s var(--ease); }
.ncs__bar-num { font-size: clamp(18px, 1.9vw, 23px); font-weight: 700; color: var(--nblue); min-width: 2.2ch; text-align: left; }

/* --- 228 data points over the affinity map, circular fade to the page --- */
.ncs__bleed--data { min-height: clamp(420px, 62vh, 660px); }
.ncs__bleed--data::after {
  background: radial-gradient(circle at 50% 50%,
    rgba(250, 251, 254, 0) 24%,
    rgba(250, 251, 254, .5) 58%,
    rgba(250, 251, 254, .97) 100%);
}
.ncs__data-center { display: flex; flex-direction: column; align-items: center; }
.ncs__data-circle {
  width: clamp(150px, 20vw, 218px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nblue); color: #fff;
  box-shadow: 0 24px 60px rgba(38, 48, 31, .28);
}
.ncs__data-circle span { font-size: clamp(46px, 7vw, 78px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.ncs__data-label { margin: 20px 0 0; font-size: clamp(34px, 6vw, 66px); font-weight: 800; color: var(--nink); letter-spacing: -.03em; line-height: 1; }

/* ============================================================
   Testing section — round-1 scoreboard, pros/to-improve,
   iteration gallery, and the round-2 uplift (score increases).
   ============================================================ */

/* round-1 scoreboard */
.ncs__score { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin: clamp(26px, 4vh, 44px) auto 0; }
.ncs__score-card { background: #fff; border: 1px solid var(--nline); border-radius: 22px; padding: clamp(24px, 3vw, 34px); text-align: center; box-shadow: 0 14px 40px rgba(16, 21, 28, .06); }
.ncs__score-card b { display: block; font-size: clamp(38px, 6vw, 62px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--nblue); }
.ncs__score-card .lbl { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nbody); }
.ncs__score-card small { display: block; margin-top: 5px; font-size: 13px; color: #9aa7b4; font-weight: 500; }
/* ---- impact: two before/after shifts beside the finished screens ---- */
.ncs__impact { display: grid; grid-template-columns: 1fr .82fr; align-items: center;
  gap: clamp(26px, 4.5vw, 64px); padding-bottom: clamp(40px, 8vh, 96px); }
.ncs__shift { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: clamp(16px, 2.6vh, 26px); }
.ncs__shift-card { position: relative; overflow: hidden; background: #fff;
  border: 1px solid var(--nline); border-radius: 22px;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 2.8vw, 32px);
  box-shadow: 0 2px 4px rgba(16, 21, 28, .05), 0 18px 40px -18px rgba(16, 21, 28, .16); }
.ncs__shift-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--nblue); }
.ncs__shift-card:nth-child(2)::before { background: #c9dcb6; }
.ncs .ncs__shift-pair { display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px; margin: 0 0 12px; max-width: none; }
.ncs__shift-pair .from { font-size: clamp(15px, 1.5vw, 19px); font-weight: 600;
  color: #a8b3a3; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ncs__shift-pair .to { font-size: clamp(18px, 2vw, 25px); font-weight: 600;
  letter-spacing: -.015em; color: var(--nblue); }
.ncs__shift-arrow { width: clamp(24px, 2.6vw, 34px); height: auto; color: #b9c4b3; flex: none; }
.ncs .ncs__shift-desc { margin: 0; font-size: clamp(14px, 1.08vw, 16.5px); line-height: 1.6;
  color: var(--nbody); max-width: 46ch; }
.ncs__impact-shot { margin: 0; display: grid; place-items: center; }
.ncs__impact-shot img { width: 100%; max-width: 420px; height: auto;
  filter: drop-shadow(0 26px 44px rgba(20, 30, 20, .16)); }
@media (max-width: 860px) {
  .ncs__impact { grid-template-columns: 1fr; }
  .ncs__impact-shot { order: -1; }
  .ncs__impact-shot img { max-width: 320px; }
}

/* ---- round-1 read-out: one hub with three measures branching off it ---- */
.ncs__hub { position: relative; display: grid;
  grid-template-columns: clamp(180px, 24vw, 268px) minmax(0, 1fr);
  align-items: center; gap: clamp(20px, 4vw, 56px);
  max-width: 1000px; margin: clamp(26px, 4vh, 46px) auto 0; }
.ncs__hub-core { aspect-ratio: 1; border-radius: 50%; background: #fff;
  border: 1px solid var(--nline); display: grid; place-content: center; text-align: center;
  box-shadow: 0 20px 46px -18px rgba(16, 21, 28, .26); }
.ncs__hub-core .n { display: block; font-size: clamp(46px, 6.4vw, 82px); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; color: var(--nblue); font-variant-numeric: tabular-nums; }
.ncs__hub-core .l { display: block; margin-top: 8px; font-size: clamp(11px, 1vw, 13px);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--nbody); }
/* the connectors sit in the gutter between the hub and the list */
/* height must be explicit — with only top/bottom the SVG keeps its intrinsic ratio */
.ncs__hub-links { position: absolute; top: 8%; height: 84%;
  left: clamp(180px, 24vw, 268px); width: clamp(20px, 4vw, 56px);
  fill: none; stroke: rgba(var(--glow), .5); stroke-width: 1.6;
  stroke-dasharray: 7 6; vector-effect: non-scaling-stroke; }
.ncs__hub-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: clamp(14px, 2.2vh, 24px); }
.ncs__hub-item { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); }
.ncs__hub-dot { flex: none; width: clamp(84px, 9.5vw, 116px); aspect-ratio: 1; border-radius: 50%;
  background: var(--nblue-soft); display: grid; place-items: center; }
.ncs__hub-dot b { font-size: clamp(15px, 1.55vw, 21px); font-weight: 700; letter-spacing: -.02em;
  color: #2f5226; font-variant-numeric: tabular-nums; }
.ncs__hub-txt h3 { margin: 0 0 5px; font-size: clamp(16px, 1.6vw, 20px); font-weight: 600;
  letter-spacing: -.01em; color: var(--nink); }
.ncs__hub-txt p { margin: 0; font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.5;
  color: var(--nbody); max-width: 44ch; }
@media (max-width: 760px) {
  .ncs__hub { grid-template-columns: 1fr; gap: clamp(18px, 4vh, 30px); max-width: 460px; }
  .ncs__hub-core { width: clamp(160px, 46vw, 210px); margin-inline: auto; }
  .ncs__hub-links { display: none; }
  .ncs__hub-dot { width: clamp(72px, 20vw, 92px); }
}

/* participants isn't a score — it's context, so it reads as a quieter, tinted card */
.ncs__score { grid-template-columns: .82fr 1fr 1fr; }
.ncs__score-card--meta { background: var(--nblue-soft); border-color: transparent; box-shadow: none;
  display: flex; flex-direction: column; justify-content: center; }
.ncs__score-card--meta b { font-size: clamp(32px, 4.6vw, 48px); color: var(--nblue); }
.ncs__score-card--meta .lbl { color: var(--nblue); }
.ncs__score-card--meta small { color: rgba(var(--glow), .7); }

/* pros / to-improve */
/* Round-1 read-out: two paper cards in the case study's own idiom — white stock,
   a coloured rule at the top, numbered eyebrow, green keywords. */
.ncs__pc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px);
  margin-top: clamp(56px, 9vh, 104px); text-align: left; }
.ncs__pc-col { position: relative; overflow: hidden; background: #fff; border-radius: 22px;
  border: 1px solid var(--nline); padding: clamp(26px, 3.2vw, 38px);
  box-shadow: 0 2px 4px rgba(16, 21, 28, .05), 0 18px 40px -16px rgba(16, 21, 28, .16); }
.ncs__pc-col::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; }
.ncs__pc-col--pro::before { background: var(--nblue); }
.ncs__pc-col--imp::before { background: #c9dcb6; }
.ncs p.ncs__pc-eyebrow { margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--nblue); }
.ncs__pc-title { margin: 0 0 clamp(16px, 2vw, 22px); font-size: clamp(18px, 1.85vw, 23px);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--nink); }
.ncs__pc-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: clamp(12px, 1.5vh, 16px); }
.ncs__pc-col li { position: relative; padding-left: 31px; font-size: clamp(14px, 1.08vw, 16.5px);
  line-height: 1.52; color: var(--nbody); max-width: none; }
.ncs__pc-col li::before { position: absolute; left: 0; top: 1px; width: 21px; height: 21px;
  border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.ncs__pc-col--pro li::before { content: "✓"; background: var(--nblue); color: #fff; }
.ncs__pc-col--imp li::before { content: "↻"; background: #e4eeda; color: #3d6633; }
.ncs__pc-col li b { font-weight: 700; color: var(--nink); }

/* iteration gallery — horizontal scroll-snap filmstrip */
/* auto-scrolling marquee of before/after screens — no frame, no shadow, just
   the transparent images; pauses on hover; edges fade out */
.ncs__itg { margin-top: clamp(22px, 3.5vh, 40px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ncs__itg-track { display: flex; width: max-content; padding: 4px 0; animation: ncs-itg 52s linear infinite; }
.ncs__itg:hover .ncs__itg-track, .ncs__itg:focus-within .ncs__itg-track { animation-play-state: paused; }
.ncs__itg-item { flex: 0 0 auto; width: clamp(340px, 39vw, 520px); margin-right: clamp(30px, 3.4vw, 60px); }
/* fixed-height stage keeps every image the same visual size */
.ncs__itg-fig { margin: 0; height: clamp(320px, 44vh, 450px); display: grid; place-items: center; }
.ncs__itg-fig img { max-width: 100%; max-height: clamp(320px, 44vh, 450px); width: auto; height: auto; object-fit: contain; }
.ncs__itg-cap { margin: 18px 2px 0; font-size: clamp(13.5px, 1.02vw, 15.5px); line-height: 1.5; color: var(--nbody); }
.ncs__itg-cap b { color: var(--nink); font-weight: 700; }
.ncs__itg-tag { display: inline-block; margin-right: 8px; padding: 2px 11px; border-radius: 999px; background: var(--nblue-soft); color: var(--nblue); font-size: 12px; font-weight: 700; letter-spacing: .02em; vertical-align: 1.5px; }
@keyframes ncs-itg { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ncs__itg { overflow-x: auto; }
  .ncs__itg-track { animation: none; }
}

/* ---------- feature showcase — real app mockups on a clean canvas with
   on-brand background shapes (the boards' style, rebuilt to match the site) ---------- */
.ncs__feats { position: relative; max-width: 1160px; margin: clamp(6px, 2vh, 20px) auto 0;
  padding-inline: clamp(20px, 5vw, 48px); padding-bottom: clamp(40px, 8vh, 90px); }

/* --- the deck. Every card starts OPEN. Each one rides up the page, settles on
   the pile of headers above it, and then collapses to a header of its own; the
   LAST card rides up and stays open. --- */
/* The whole thing hangs on one rule: a card's FOOTPRINT IN FLOW NEVER CHANGES.
   Each card lives inside a .ncs__feat-slot of fixed height, so collapsing a card
   moves nothing below it. That is what earlier versions got wrong — the card was
   the sticky element itself, so every collapse resized the flow, yanked the next
   card into its own trigger and the deck slammed shut in a chain. It also gave
   each sticky card a huge compensating margin, and since sticky is limited by its
   own MARGIN box, cards 4–6 could never reach their pin lines. */
/* overflow-anchor:none — without it Chrome nudges scrollTop on each collapse. */
/* flex column, so the slot margins below can never collapse into each other */
.ncs__feats { --stackTop: 150px; --headH: 46px; --n: 6;
  --mediaH: clamp(300px, 46vh, 470px);
  --openH: 470px; display: flex; flex-direction: column;
  overflow-anchor: none; padding-bottom: 0; }

/* the fixed-height scroll slot: sticky, so it parks on its own line and stays.
   The margin ladder (top grows with --i, bottom shrinks) does two jobs at once:
   the two always sum to --n * --headH, so the visual gap between cards and the
   scroll distance per card stay identical for all six; and because sticky is
   bounded by the MARGIN box, each slot's final resting place sits --headH lower
   than the one before it. Without that, every slot bottomed out on the same line
   when the deck ended and all six closed cards piled up on one spot. */
.ncs__feat-slot { position: sticky; flex: none;
  top: calc(var(--stackTop) + var(--i, 0) * var(--headH));
  height: var(--openH);
  margin-top: calc(var(--i, 0) * var(--headH));
  margin-bottom: calc((var(--n) - 1 - var(--i, 0)) * var(--headH));
  z-index: calc(10 + var(--i, 0));
  /* the slot is mostly empty space sitting over the cards below it */
  pointer-events: none; }

/* the visible card, pinned to the top of its slot */
.ncs__feat-row { pointer-events: auto; overflow-anchor: none;
  display: grid; grid-template-rows: auto 0fr;
  transition: grid-template-rows .5s var(--ease), box-shadow .4s var(--ease);
  background: #fff; border: 1px solid var(--nline); border-radius: clamp(16px, 1.8vw, 24px);
  box-shadow: 0 2px 4px rgba(16, 21, 28, .05), 0 18px 40px -20px rgba(16, 21, 28, .2); }
.ncs__feat-row.is-open { grid-template-rows: auto 1fr; }
/* a settled header reads as one leaf of the pile, not a floating card */
.ncs__feat-row:not(.is-open) { border-radius: clamp(13px, 1.4vw, 18px);
  box-shadow: 0 1px 0 rgba(16, 21, 28, .05), 0 10px 22px -14px rgba(16, 21, 28, .22); }

/* the dwell AFTER the last card has parked and BEFORE the deck locks: sticky
   ends exactly when this tail runs out, and that is where JS retires the deck */
.ncs__feat-tail { flex: none; height: clamp(110px, 16vh, 190px); }

/* Once the finished pile has scrolled clear of the viewport the deck retires:
   the slots drop out of sticky and the closed cards become one solid block in
   normal flow. Otherwise scrolling back up un-pins them in reverse and the pile
   visibly comes apart, one card at a time. JS flips this only while the deck is
   off-screen and corrects scrollTop for the lost height, so the swap is unseen. */
/* used for a single frame while the deck retires, so the height it loses can be
   measured even if a card is still mid-collapse */
.ncs__feats.ncs-nofx .ncs__feat-row,
.ncs__feats.ncs-nofx .ncs__feat-body { transition: none; }
.ncs__feats.is-stacked .ncs__feat-slot { position: static; z-index: auto;
  height: auto; margin: 0; pointer-events: auto; }
/* -1px laps the borders so the block reads as a pile, not six separate cards */
.ncs__feats.is-stacked .ncs__feat-slot + .ncs__feat-slot { margin-top: -1px; }
/* the last slot keeps its full open height so the retired pile is exactly as
   tall as the pinned one was — that is what makes the swap land pixel-for-pixel */
.ncs__feats.is-stacked .ncs__feat-slot.is-last { height: var(--openH); }
.ncs__feats.is-stacked .ncs__feat-tail { height: 0; }

/* the always-visible header */
.ncs__feat-head { -webkit-appearance: none; appearance: none; width: 100%;
  display: flex; align-items: center; gap: 14px; height: var(--headH);
  padding: 0 clamp(16px, 2.2vw, 28px); background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit; }
.ncs__feat-head .n { flex: none; display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; background: var(--nblue-soft); color: var(--nblue);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ncs__feat-head .t { flex: 1; font-size: clamp(13px, 1.15vw, 15px); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--nink); }
.ncs__feat-chev { flex: none; width: 19px; height: 19px; color: var(--nblue);
  transition: transform .4s var(--ease); }
.ncs__feat-row.is-open .ncs__feat-chev { transform: rotate(180deg); }
.ncs__feat-head:hover .t { color: var(--nblue); }
.ncs__feat-head:focus-visible { outline: 2px solid var(--nblue); outline-offset: -3px; border-radius: inherit; }

/* the body collapses to nothing; it is also the two-column layout */
.ncs__feat-body { min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.08fr; align-items: center;
  gap: clamp(20px, 4vw, 60px);
  --padB: clamp(22px, 3.4vh, 40px);
  padding: 0 clamp(20px, 3vw, 40px) var(--padB);
  transition: padding-bottom .5s var(--ease); }
/* a closed card must be EXACTLY one header tall — the body's padding would
   otherwise leave it taller than the stack step, so the deck overlaps itself */
.ncs__feat-row:not(.is-open) .ncs__feat-body { padding-bottom: 0; }
.ncs__feat-row--flip .ncs__feat-body .ncs__feat-copy  { order: 2; }
.ncs__feat-row--flip .ncs__feat-body .ncs__feat-media { order: 1; }

/* the study nav is sticky at the TOP on desktop and docks to the BOTTOM on
   small screens, so the stack clears a different amount of space each way */
@media (max-width: 860px) {
  .ncs__feats { --stackTop: 84px; }
  .ncs__feat-body { grid-template-columns: 1fr; text-align: center; }
  .ncs__feat-row--flip .ncs__feat-body .ncs__feat-copy  { order: 1; }
  .ncs__feat-row--flip .ncs__feat-body .ncs__feat-media { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ncs__feat-row { transition: none; }
}

.ncs__feat-copy { max-width: 44ch; }
.ncs__feat-eyebrow { display: inline-flex; align-items: center; gap: 11px; margin: 0 0 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nblue); }
.ncs__feat-eyebrow .n { display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--nblue-soft); color: var(--nblue); font-size: 12.5px; letter-spacing: 0; }
.ncs__feat-title { margin: 0 0 15px; font-size: clamp(25px, 3vw, 36px); font-weight: 600;
  line-height: 1.12; letter-spacing: -.02em; color: var(--nink); }
.ncs__feat-title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-weight: 400; letter-spacing: 0; color: var(--nblue); }
.ncs__feat-desc { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; color: var(--nbody); }

/* A DEFINITE height, not min-height: the deck's slot size is derived from the
   card's open height, so that height must not change when a lazy shot decodes.
   The shot repeats the same length rather than max-height:100% — the media's grid
   row is auto-sized, so a percentage max-height there resolves to none and the
   taller mockups (04, 05) burst straight out of the card. */
.ncs__feat-media { position: relative; display: grid; place-items: center; isolation: isolate;
  height: var(--mediaH); }
.ncs__feat-shot { position: relative; z-index: 2; width: 100%; height: auto;
  max-height: var(--mediaH); object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(20, 30, 20, .13)); }

@media (max-width: 760px) {
  /* NB: no gap/columns on .ncs__feat-row here — it is the accordion shell now,
     and a row-gap would make every collapsed card taller than the stack step */
  .ncs__feat-copy { max-width: none; text-align: center; }
  .ncs__feat-eyebrow { justify-content: center; }
  .ncs__feats { --mediaH: clamp(240px, 34vh, 340px); }
}

/* round-2 uplift — the emphasis: before → burst(increase) → after */
.ncs__uplift { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 34px); margin-top: clamp(28px, 5vh, 52px); }
/* same paper card as the round-1 read-out: white stock, green rule on top */
.ncs__up { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--nline);
  border-radius: 22px; padding: clamp(28px, 3.4vw, 42px) clamp(20px, 2.6vw, 34px);
  box-shadow: 0 2px 4px rgba(16, 21, 28, .05), 0 18px 40px -16px rgba(16, 21, 28, .16); }
.ncs__up::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--nblue); }
.ncs__up:nth-child(2)::before { background: #c9dcb6; }
/* `.ncs p` would win on specificity and grey this out, so scope it up */
.ncs p.ncs__up-metric { font-size: 11.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--nblue); margin: 0 0 clamp(20px, 2.6vw, 30px);
  text-align: center; }
.ncs__up-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(6px, 1.2vw, 16px); }
/* min-width:0 keeps the two number columns an equal, FIXED width so the centre
   badge never shifts while the numbers count up; tabular-nums holds digit width */
.ncs__up-side { text-align: center; min-width: 0; }
.ncs__up-side .n { display: block; font-weight: 800; letter-spacing: -.03em; line-height: .95; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ncs__up-side .l { display: block; margin-top: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ncs__up-side--from .n { font-size: clamp(24px, 3vw, 36px); color: #b3bdc6; }
.ncs__up-side--from .l { color: #b3bdc6; }
.ncs__up-side--to .n { font-size: clamp(34px, 4.6vw, 58px); color: var(--nblue); }
.ncs__up-side--to .l { color: var(--nblue); }
/* on-brand green circle badge (echoes the Insights / 228 circles) */
.ncs__up-burst { width: clamp(94px, 10.5vw, 122px); aspect-ratio: 1; border-radius: 50%; background: var(--nblue-soft); border: 1.5px solid rgba(var(--glow), .32); display: grid; place-items: center; text-align: center; }
.ncs__up-burst .col { display: grid; place-items: center; }
.ncs__up-burst-num { font-size: clamp(17px, 2vw, 24px); font-weight: 800; color: var(--nblue); letter-spacing: -.02em; line-height: 1; }
.ncs__up-burst-lbl { margin-top: 3px; font-size: clamp(10px, 1vw, 12px); font-weight: 600; color: var(--nbody); letter-spacing: .03em; }

/* summary line under the uplift — .ncs .. beats the `.ncs p` margin so it centres */
.ncs .ncs__up-note { max-width: 60ch; margin: clamp(24px, 4vh, 40px) auto 0; text-align: center; }
.ncs__up-note b { color: var(--nblue); font-weight: 700; }

@media (max-width: 720px) {
  .ncs__score { grid-template-columns: 1fr; }
  .ncs__pc { grid-template-columns: 1fr; }
  .ncs__uplift { grid-template-columns: 1fr; }
}

/* ============ research funnel: methods in → signal → data points out ============ */
.ncs__funnel-sec { padding: clamp(14px, 3vh, 34px) clamp(16px, 4vw, 44px) clamp(24px, 5vh, 56px); }
.ncs__funnel { position: relative; max-width: 1080px; margin-inline: auto; }
.ncs__funnel-body { position: relative; padding: clamp(30px, 5.5vh, 60px) 0 clamp(66px, 11vh, 124px); }
.ncs__funnel-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* var() isn't reliable in SVG presentation attributes — set the stops in CSS */
.ncs__funnel-shape .s0 { stop-color: var(--nblue); stop-opacity: .05; }
.ncs__funnel-shape .s1 { stop-color: var(--nblue); stop-opacity: .15; }
.ncs__funnel-shape .s2 { stop-color: var(--nblue); stop-opacity: .30; }
/* two funnel silhouettes: a steep one for wide screens, a gentler taper for
   narrow ones so the circles keep their size and stay inside the walls */
.ncs__fshape--m { display: none; }
@media (max-width: 1000px) {
  .ncs__fshape--d { display: none; }
  .ncs__fshape--m { display: block; }
}
/* dashed walls, echoing the pinned findings below */
.ncs__funnel-wall { fill: none; stroke: rgba(var(--glow), .75); stroke-width: 2;
  stroke-dasharray: 9 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* IN — each method is a ball sized by how much data it brought, so you can see
   at a glance that the survey dwarfs everything else. They drop in and pile up. */
/* The pile is laid out in a fixed proportional space (a 2:1 box), with every
   diameter and centre expressed as a % of its width. That way the circles are
   genuinely TANGENT — each one really rests on the survey circle below it — and
   the tangency survives every screen size instead of drifting. */
.ncs__fpile { position: relative; z-index: 1; aspect-ratio: 2 / 1; }
/* white discs with dark-green type — flat, no gloss; size carries the magnitude */
.ncs__fball { position: absolute; width: var(--d); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; gap: .28em; text-align: center;
  transform: translate(-50%, -50%);
  background: #fff; border: 2px solid rgba(var(--glow), .3);
  box-shadow: 0 12px 26px -10px rgba(16, 21, 28, .26);
  --ex: 0px; --spin: 0deg; }
.ncs__fball b { font-size: 1.55em; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: #2f5226; font-variant-numeric: tabular-nums; }
.ncs__fball i { max-width: 84%; margin-inline: auto; font-style: normal;
  font-size: .82em; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1.2; color: #4e7a41; }
/* diameters are % of the pile width; font-size scales with the disc */
.ncs__fball--81 { --d: 24%;   left: 50%;   top: 74%;   font-size: clamp(15px, 2vw, 23px); }
.ncs__fball--15 { --d: 17%;   left: 33.2%; top: 50.4%; font-size: clamp(13px, 1.48vw, 17.5px);
  --ex: 122px;  --spin: -360deg; }
.ncs__fball--10 { --d: 15.5%; left: 65.6%; top: 49.6%; font-size: clamp(12.5px, 1.36vw, 16px);
  --ex: -116px; --spin: 360deg; }
.ncs__fball--6  { --d: 14%;   left: 29.2%; top: 20.4%; font-size: clamp(12px, 1.26vw, 15px);
  --ex: 86px;   --spin: -360deg; }
.ncs__fball--4  { --d: 13%;   left: 70%;   top: 22.5%; font-size: clamp(11.5px, 1.18vw, 14px);
  --ex: -82px;  --spin: 360deg; }

/* One continuous move: it falls into the mouth of the funnel, then rolls down
   and across — rotation tracks the travel — and comes to rest touching the
   circle below it. No pauses or staged hops, which is what read as mechanical. */
@keyframes ncsBallDrop {
  0%   { opacity: 0;
         transform: translate(calc(-50% + var(--ex)), calc(-50% - 320px)) rotate(0deg);
         animation-timing-function: cubic-bezier(.3, 0, .78, .42); }      /* gravity */
  12%  { opacity: 1; }
  50%  { transform: translate(calc(-50% + var(--ex)), calc(-50% - 52px)) rotate(calc(var(--spin) * .34));
         animation-timing-function: cubic-bezier(.26, .06, .38, 1); }    /* meets the pile, keeps moving */
  88%  { transform: translate(calc(-50% - 2px), calc(-50% + 5px)) rotate(calc(var(--spin) * .95));
         animation-timing-function: cubic-bezier(.32, 0, .46, 1); }      /* rolls into the notch */
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--spin)); }   /* sticks */
}

/* NARROWING — headline stat in the neck, voices pulled out either side */
.ncs__funnel-mid { position: relative; z-index: 1;
  margin-top: clamp(42px, 7.5vh, 88px);
  display: grid; grid-template-columns: 1fr minmax(210px, 268px) 1fr;
  align-items: center; gap: clamp(16px, 2.4vh, 26px) clamp(22px, 3.2vw, 46px); }
/* two voices, set big, flanked by heavy quote marks so they read as quotes */
.ncs__fq { margin: 0; background: transparent; border: 0; padding: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "qo text qc" ".  cite  .";
  column-gap: clamp(8px, .9vw, 14px); align-items: start;
  transition: opacity .6s var(--ease), transform .7s var(--ease); }
.ncs__fq-mark { width: clamp(34px, 3.9vw, 56px); height: auto; fill: var(--nblue); flex: none; }
.ncs__fq-mark--o { grid-area: qo; align-self: start; }
.ncs__fq-mark--c { grid-area: qc; align-self: end; transform: rotate(180deg); }
.ncs__fq p { grid-area: text; margin: 0; max-width: none;
  font-size: clamp(17px, 1.75vw, 23px) !important; line-height: 1.4 !important;
  font-weight: 500; letter-spacing: -.01em; color: var(--nink) !important; }
.ncs__fq cite { grid-area: cite; display: block; margin-top: 10px; font-style: normal;
  font-size: clamp(10.5px, .85vw, 12px); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nbody); }
.ncs__fq:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.ncs__fq:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.ncs__fstat { grid-column: 2; grid-row: 1; margin: 0; text-align: center;
  background: var(--dark-bg); color: #fff; border-radius: 22px;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 28px);
  box-shadow: 0 30px 64px rgba(0, 0, 0, .30); }
.ncs__fstat strong { display: block; font-size: clamp(40px, 5.4vw, 68px); font-weight: 700;
  line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.ncs__fstat blockquote { margin: 11px 0 0; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.4;
  color: var(--on-dark); }
.ncs__fstat blockquote em { font-style: italic; color: var(--acc-light); }
.ncs__fstat figcaption { margin-top: 12px; font-size: clamp(10px, .85vw, 11.5px);
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted-c); }

/* OUT — what came through the spout */
.ncs__funnel-out { position: relative; z-index: 1; display: grid; place-items: center;
  margin-top: calc(-1 * clamp(34px, 5.5vh, 64px));
  transition: opacity .6s var(--ease), transform .7s cubic-bezier(.34, 1.3, .5, 1); }
.ncs__fdrop { width: clamp(152px, 17vw, 208px); aspect-ratio: 1; border-radius: 50%;
  background: var(--nblue); display: grid; place-content: center; text-align: center;
  box-shadow: 0 26px 58px rgba(var(--glow), .45); }
.ncs__fdrop .n { display: block; font-size: clamp(38px, 4.6vw, 60px); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.ncs__fdrop .l { display: block; margin-top: 7px; font-size: clamp(11px, .95vw, 13px);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }

/* --- scroll-driven sequence: everything starts out and lands as you scroll.
   Gated on .ncs-armed so the section is fully visible without JS/with reduced motion. --- */
.ncs.ncs-armed .ncs__fball         { opacity: 0; }
.ncs.ncs-armed .ncs__fball.is-in   { animation: ncsBallDrop 1.5s linear both; }
/* the pile builds itself: biggest lands first, the rest come down on top of it.
   These must follow the `animation` shorthand above — it resets the delay. */
.ncs.ncs-armed .ncs__fball--81.is-in { animation-delay: 0s; }
.ncs.ncs-armed .ncs__fball--15.is-in { animation-delay: .38s; }
.ncs.ncs-armed .ncs__fball--10.is-in { animation-delay: .76s; }
.ncs.ncs-armed .ncs__fball--6.is-in  { animation-delay: 1.14s; }
.ncs.ncs-armed .ncs__fball--4.is-in  { animation-delay: 1.52s; }
.ncs.ncs-armed .ncs__fstat         { opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity .6s var(--ease), transform .7s var(--ease); }
.ncs.ncs-armed .ncs__fstat.is-in   { opacity: 1; transform: none; }
.ncs.ncs-armed .ncs__fq            { opacity: 0; }
.ncs.ncs-armed .ncs__fq[data-fq="0"], .ncs.ncs-armed .ncs__fq[data-fq="2"] { transform: translateX(-48px); }
.ncs.ncs-armed .ncs__fq[data-fq="1"], .ncs.ncs-armed .ncs__fq[data-fq="3"] { transform: translateX(48px); }
.ncs.ncs-armed .ncs__fq.is-in      { opacity: 1; transform: none; }
.ncs.ncs-armed .ncs__funnel-out    { opacity: 0; transform: translateY(-30px) scale(.88); }
.ncs.ncs-armed .ncs__funnel-out.is-in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  /* the funnel reads top-to-bottom: stat first, then the voices in pairs */
  .ncs__funnel-mid { grid-template-columns: 1fr 1fr; max-width: 560px; margin-inline: auto;
    gap: clamp(12px, 2vh, 18px); }
  .ncs__fq:nth-of-type(n) { grid-column: auto; grid-row: auto; }
  .ncs__fstat { grid-column: 1 / -1; grid-row: auto; order: -1; }
  /* the voices now sit over the funnel, so they need their own card to read */
  .ncs__fq { background: #fff; border: 1px solid var(--nline); border-radius: 16px;
    padding: clamp(15px, 3.4vw, 20px) clamp(15px, 3.4vw, 20px) clamp(13px, 3vw, 17px);
    box-shadow: 0 10px 26px rgba(16, 21, 28, .09); column-gap: clamp(7px, 1.8vw, 11px); }
  .ncs__fq-mark { width: clamp(24px, 6vw, 32px); }
  /* a taller proportional box for the pile, with the tangency recomputed for it
     so the circles still genuinely rest on each other on a narrow screen */
  /* narrowing the whole box shrinks the composition uniformly, so it fits inside
     the funnel walls without disturbing the tangency */
  .ncs__fpile { aspect-ratio: 100 / 88; width: 87%; margin-inline: auto; }
  /* labels stay attached to their disc — the copy is short enough to fit, with
     absolute floors so neither the number nor the label goes sub-legible */
  .ncs__fball i { max-width: 92%; letter-spacing: 0; font-size: max(9px, .82em); }
  .ncs__fball b { font-size: max(16px, 1.55em); }
  .ncs__fball--81 { --d: 37.2%; left: 50%;    top: 77.7%; font-size: clamp(10px, 2.9vw, 13px); }
  .ncs__fball--15 { --d: 26.4%; left: 23.95%; top: 57%;   font-size: clamp(8.5px, 2.1vw, 10.5px); --ex: 64px; }
  .ncs__fball--10 { --d: 24%;   left: 74.1%;  top: 56.4%; font-size: clamp(8px, 1.95vw, 10px);  --ex: -60px; }
  .ncs__fball--6  { --d: 21.7%; left: 17.7%;  top: 30.7%; font-size: clamp(7.5px, 1.8vw, 9.5px); --ex: 44px; }
  .ncs__fball--4  { --d: 20.2%; left: 80.9%;  top: 32.5%; font-size: clamp(7.5px, 1.7vw, 9px);  --ex: -42px; }
}
@media (max-width: 480px) {
  .ncs__funnel-mid { grid-template-columns: 1fr; max-width: 400px; }
}

/* ============ findings as pinned cards threaded together ============ */
.ncs__pins { position: relative; list-style: none; margin: clamp(8px, 2vh, 18px) auto 0;
  padding: 0; max-width: 920px; display: flex; flex-direction: column;
  gap: clamp(6px, 1vh, 12px); counter-reset: pin; }
/* the dashed thread the cards hang from */
.ncs__pins::before { content: ""; position: absolute; left: 50%; top: 14px; bottom: 14px;
  border-left: 1.8px dashed #bcc7b4; transform: translateX(-50%); }
/* each finding is a sticky note: white paper card, coloured note inside,
   a glossy pin through the top, and its own hand-placed tilt */
.ncs__pin { position: relative; width: min(100%, 416px);
  background: #fff; border-radius: 22px; padding: clamp(9px, 1vw, 13px);
  box-shadow: 0 2px 4px rgba(16, 21, 28, .06), 0 16px 34px -12px rgba(16, 21, 28, .18);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.ncs__pin:nth-child(odd)  { align-self: flex-start; }
.ncs__pin:nth-child(even) { align-self: flex-end; }
/* Deliberate, uneven tilts — pinned by hand, not by a loop. The second selector
   out-ranks `.stagger.in > *  { transform: none }`, which would flatten them. */
.ncs__pin--1, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--1 { transform: rotate(-2.6deg); }
.ncs__pin--2, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--2 { transform: rotate(1.9deg); }
.ncs__pin--3, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--3 { transform: rotate(-1.4deg); }
.ncs__pin--4, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--4 { transform: rotate(2.8deg); }
.ncs__pin--5, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--5 { transform: rotate(-2.1deg); }
.ncs__pin:hover, .ncs.ncs-armed .ncs__pins.in > .ncs__pin:hover {
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 4px 8px rgba(16, 21, 28, .07), 0 28px 54px -14px rgba(16, 21, 28, .26); }

/* the coloured note the writing sits on */
.ncs__pin-note { border-radius: 15px; padding: clamp(15px, 1.7vw, 22px) clamp(16px, 1.8vw, 23px); }
/* all tints of the page's own green, but spread across a wider range so the
   notes read as distinct pieces of paper rather than one flat colour */
.ncs__pin--1 .ncs__pin-note { background: #e4eeda; }
.ncs__pin--2 .ncs__pin-note { background: #f6faf3; }   /* lightest */
.ncs__pin--3 .ncs__pin-note { background: #c9dcb6; }   /* darkest  */
.ncs__pin--4 .ncs__pin-note { background: #edf3e6; }
.ncs__pin--5 .ncs__pin-note { background: #d6e6c7; }

/* the pin itself — the brand green, alternating two depths from the palette */
.ncs__pin-tack { position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--nblue);
  box-shadow: 0 4px 9px rgba(16, 21, 28, .3), inset 0 -2px 4px rgba(0, 0, 0, .2); }
.ncs__pin:nth-child(odd)  .ncs__pin-tack { right: 30px; }
.ncs__pin:nth-child(even) .ncs__pin-tack { left: 30px; }
.ncs__pin--2 .ncs__pin-tack, .ncs__pin--4 .ncs__pin-tack { background: #3d6633; }

.ncs__pin-num { display: block; font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(20px, 2vw, 26px); font-style: italic; line-height: 1; color: var(--nink); opacity: .5; }
.ncs__pin-title { margin: 7px 0 8px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.2; color: var(--nink); }
.ncs__pin-body { margin: 0; font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.55; color: #4c5a48; }
.ncs__pin-body b { font-weight: 700; color: var(--nink); }

@media (max-width: 720px) {
  /* one rail down the left, notes hanging off it — tilts kept, just gentler */
  .ncs__pins { max-width: 460px; }
  .ncs__pins::before { left: 8px; transform: none; }
  .ncs__pin, .ncs__pin:nth-child(odd), .ncs__pin:nth-child(even) {
    width: auto; align-self: stretch; margin-left: 30px; }
  .ncs__pin--1, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--1 { transform: rotate(-1.5deg); }
  .ncs__pin--2, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--2 { transform: rotate(1.1deg); }
  .ncs__pin--3, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--3 { transform: rotate(-.8deg); }
  .ncs__pin--4, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--4 { transform: rotate(1.6deg); }
  .ncs__pin--5, .ncs.ncs-armed .ncs__pins.in > .ncs__pin--5 { transform: rotate(-1.2deg); }
  .ncs__pin:nth-child(odd) .ncs__pin-tack,
  .ncs__pin:nth-child(even) .ncs__pin-tack { left: -23px; right: auto; top: 22px; }
  .ncs__pin:hover, .ncs.ncs-armed .ncs__pins.in > .ncs__pin:hover { transform: translateY(-3px); }
}

/* --- 72% centred stat inside the voices layout --- */
.ncs__vcenter-stat { display: block; font-size: clamp(46px, 6vw, 80px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
.ncs__vcenter .ncs__vcenter-stat + blockquote { margin-top: 12px; font-size: clamp(14px, 1.4vw, 18px); color: var(--on-dark); }

/* headline over a full-bleed photo band: white type on the same matte scrim
   the problem statement uses, so the two bands read as one system */
.ncs__bleed .ncs__h2 { color: #fff; }
.ncs__bleed .ncs__lead { color: rgba(255, 255, 255, .86) !important; margin-inline: auto; }

/* --- magnifier zoom (sitemap): area under the cursor scales up, no lens --- */
.ncs__zoom { display: block; width: 100%; max-width: 940px; margin: 40px auto 0; overflow: hidden; border-radius: 16px; cursor: zoom-in; }
.ncs__zoom img { display: block; width: 100%; height: auto; transform-origin: center; transition: transform .18s ease-out; will-change: transform; }
@media (hover: none) { .ncs__zoom { cursor: default; } }

/* --- wireframe grid: three big screens per row, each with its own reveal --- */
/* all six screens on one line */
.ncs__wf { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px); align-items: start; }
.ncs__wf-tile { max-width: none; width: 100%; }
@media (max-width: 900px) {
  /* still one row — it just scrolls sideways rather than breaking into groups */
  .ncs__wf { display: flex; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 10px; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .ncs__wf-tile { flex: 0 0 auto; width: clamp(140px, 34vw, 190px); scroll-snap-align: center; }
}

/* --- liquid lo-fi → hi-fi reveal --- */
.ncs__liquid { position: relative; width: 100%; max-width: 1120px; margin: 6px auto 0; aspect-ratio: 2400 / 607; cursor: crosshair; }
/* compound selector + placed after `.ncs__liquid` so its width:100% doesn't win */
.ncs__wf-tile.ncs__liquid { aspect-ratio: 620 / 1348; margin: 0; width: 100%; max-width: none; }
@media (max-width: 900px) {
  .ncs__wf-tile.ncs__liquid { flex: 0 0 auto; width: clamp(140px, 34vw, 190px); }
}
.ncs__liquid-base, .ncs__liquid-reveal { position: absolute; inset: 0; width: 100%; height: 100%; }
.ncs__liquid-base { object-fit: contain; user-select: none; -webkit-user-drag: none; }
.ncs__liquid-reveal { pointer-events: none; overflow: visible; }
@media (hover: none) { .ncs__liquid { cursor: default; } }

/* --- responsive: widen chart labels --- */
@media (max-width: 720px) {
  .ncs__bar { grid-template-columns: minmax(88px, 40%) 1fr auto; }
}

/* ---------- looping marquee (iteration + progress) with edge fades ---------- */
.ncs__marquee { width: 100%; overflow: hidden; margin-block: clamp(14px, 3vh, 34px) clamp(34px, 6vh, 66px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); }
.ncs__marquee-track { display: flex; width: max-content; gap: 30px; animation: ncsMarquee 34s linear infinite; }
.ncs__marquee-track img { height: clamp(240px, 32vw, 440px); width: auto; display: block; background: transparent !important;
  border: none !important;
  box-shadow: none !important;}
.ncs__marquee:hover .ncs__marquee-track { animation-play-state: paused; }
@keyframes ncsMarquee { to { transform: translateX(calc(-50% - 15px)); } }
/* progress screens are portrait phone shots — bigger, gentler speed */
.ncs__marquee--prog .ncs__marquee-track { gap: 26px; animation-duration: 40s; }
.ncs__marquee--prog .ncs__marquee-track img { height: clamp(230px, 30vw, 380px); border-radius: 16px; box-shadow: 0 18px 40px rgba(16, 21, 28, .12); }
/* wireframe strip: seamless loop (margin-based so -50% lands exactly) + wider spacing + more room below */
.ncs__marquee--fast { margin-bottom: clamp(60px, 11vh, 140px); }
.ncs__marquee--fast .ncs__marquee-track { gap: 0; animation-name: ncsMarqueeSeam; animation-duration: 22s; }
.ncs__marquee--fast .ncs__marquee-track > * { margin-right: clamp(38px, 4.5vw, 64px); }
/* final design — flagged in the strip */
.ncs__mq-final { position: relative; display: inline-flex; flex: none; }
.ncs__mq-final img { height: clamp(230px, 30vw, 380px); width: auto; display: block; border-radius: 16px;
  outline: 3px solid var(--nblue); outline-offset: 3px; box-shadow: 0 18px 40px rgba(var(--glow), .28); }
.ncs__mq-final-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--nblue); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px;
  border-radius: 20px; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
@keyframes ncsMarqueeSeam { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- quote ---------- */
.ncs__quote { font-size: clamp(18px, 2.2vw, 26px) !important; font-weight: 400; font-style: italic; color: var(--nink) !important; line-height: 1.4 !important; max-width: 24ch; margin: 40px auto 0 !important; text-align: center; }

/* ---------- 50 -> 90 grow card ---------- */
.ncs__grow { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; margin: 44px auto 0; padding: 34px 48px; background: var(--dark-bg); border-radius: 22px; max-width: 760px; }
.ncs__grow-from { font-size: clamp(30px, 4vw, 46px); color: rgba(255, 255, 255, .5); font-weight: 300; }
.ncs__grow-arrow { width: clamp(46px, 6vw, 74px); height: auto; display: block; }
.ncs__grow-to { position: relative; font-size: clamp(44px, 6vw, 72px); font-weight: 600; color: var(--on-dark); line-height: 1; letter-spacing: -.02em; }
.ncs__grow-confetti { position: absolute; left: 50%; bottom: 100%; width: clamp(90px, 9vw, 130px); height: auto; transform: translate(-50%, 30%); pointer-events: none; margin-bottom: 5% !important;}
.ncs.ncs-armed .ncs__grow.in .ncs__grow-confetti { animation: ncsPop .6s var(--ease) both .35s; }
@keyframes ncsPop { 0% { opacity: 0; transform: translate(-50%, 60%) scale(.6); } 100% { opacity: 1; transform: translate(-50%, 30%) scale(1); } }
.ncs__grow-label { color: rgba(255, 255, 255, .82) !important; font-size: 15px !important; max-width: 200px; text-align: left; margin: 0 !important; line-height: 1.4 !important; }

/* ---------- progress grid ---------- */
.ncs__pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 46px 0 0; align-items: start; }
.ncs__pgrid img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 36px rgba(16, 21, 28, .12); }

/* ---------- closing ---------- */
.ncs__closing { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 70px); align-items: center; padding-block: clamp(70px, 13vh, 150px); }
.ncs__wordmark { display: block; width: auto; height: clamp(62px, 8.5vw, 118px); margin: 0 0 20px; mix-blend-mode: multiply; }
.ncs__closing { text-align: left; }
@media (max-width: 860px) { .ncs__wordmark { margin-inline: auto; } }
.ncs__closing-line { font-size: clamp(24px, 3.4vw, 44px) !important; font-weight: 500; color: var(--nink) !important; line-height: 1.12 !important; letter-spacing: -.02em; max-width: none; margin: 0 0 6px !important; }
.ncs__closing-img { width: 100%; max-width: 420px; height: auto; justify-self: center; filter: drop-shadow(0 24px 50px rgba(16, 21, 28, .18)); background: transparent !important;
  border: none !important;
  box-shadow: none !important;}
/* Vinnie reflection image — 1.5× larger */
.ncs--vinnie .ncs__closing { grid-template-columns: 1fr 1.15fr; }
.ncs--vinnie .ncs__closing-img { max-width: 630px; }
/* mobile reflection: full-width image first, text below */
@media (max-width: 760px) {
  .ncs__closing { grid-template-columns: 1fr !important; text-align: center; }
  .ncs__closing-img { order: -1; max-width: 100% !important; width: 100%; margin-inline: auto; }
}

/* ============================================================
   Reveal-on-scroll animation.
   IMPORTANT: hiding only applies once the JS engine adds
   `.ncs-armed` to the article — so if scripts are stale, blocked,
   or fail, the page is simply fully visible. Content can never
   be lost to a ncs-reveal that didn't fire.
   ============================================================ */
.ncs.ncs-armed .ncs-reveal { opacity: 0; transition: opacity .85s var(--ease), transform .85s var(--ease); will-change: opacity, transform; }
.ncs.ncs-armed .ncs-reveal[data-rev="up"] { transform: translateY(46px); }
.ncs.ncs-armed .ncs-reveal[data-rev="left"] { transform: translateX(-70px); }
.ncs.ncs-armed .ncs-reveal[data-rev="right"] { transform: translateX(70px); }
.ncs.ncs-armed .ncs-reveal.in { opacity: 1; transform: none; }

.ncs.ncs-armed .stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ncs.ncs-armed .stagger.in > * { opacity: 1; transform: none; }
.ncs.ncs-armed .stagger.in > *:nth-child(1) { transition-delay: .04s; }
.ncs.ncs-armed .stagger.in > *:nth-child(2) { transition-delay: .11s; }
.ncs.ncs-armed .stagger.in > *:nth-child(3) { transition-delay: .18s; }
.ncs.ncs-armed .stagger.in > *:nth-child(4) { transition-delay: .25s; }
.ncs.ncs-armed .stagger.in > *:nth-child(5) { transition-delay: .32s; }
.ncs.ncs-armed .stagger.in > *:nth-child(6) { transition-delay: .39s; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  /* nav docks to a sleek floating bottom bar — never overlaps side content */
  .ncs__nav {
    position: fixed; top: auto; bottom: 16px; left: 50%; right: auto;
    transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 24px);
    flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: safe center;
    overflow-x: auto; gap: 2px; padding: 6px; border-radius: 999px;
    scrollbar-width: none;
  }
  .ncs__nav::-webkit-scrollbar { display: none; }
  .ncs__nav a { text-align: center; padding: 9px 14px; font-size: 12.5px; flex: none; }
  /* keep the last content clear of the floating bar */
  .ncs__closing { padding-bottom: 96px; }
  /* ideation photo is SHORTER on small screens */
  .ncs__ideation { min-height: 340px; }
  /* quote cards stack cleanly (no collage overlap) on small screens.
     NB: exclude the 72% voices collage — it has its own 2-up layout above */
  .ncs__quotes:not(.ncs__quotes--voices) { grid-template-columns: 1fr; gap: 14px; max-width: 460px; }
  .ncs__quotes:not(.ncs__quotes--voices) .ncs__qcard { grid-column: 1 !important; grid-row: auto !important; transform: none !important; margin: 0 !important; }
  .ncs__row, .ncs__row--rev { grid-template-columns: 1fr; direction: ltr; gap: 30px; padding-block: clamp(44px, 8vh, 80px); }
  .ncs__row--rev .ncs__media { order: -1; }
  .ncs__pgrid { grid-template-columns: repeat(2, 1fr); }
  .ncs__collage { min-height: 300px; }
  .ncs__closing { grid-template-columns: 1fr; text-align: center; }
  .ncs__closing-img { max-width: 300px; }
  /* Hero photos step below the text, centred as a tidy trio. The container is
     deliberately SHORTER than the photos and its bottom margin cancels the
     card's bottom padding, so the trio runs off the card's bottom edge and gets
     cropped by the card's overflow — the same partial peek the wide layout
     gives. Without this the card simply grew taller and showed them whole. */
  .ncs__photos, .ncs--linko .ncs__photos {
    position: relative; inset: auto; right: auto; left: auto;
    width: 100%; max-width: 400px;
    margin: 24px auto calc(-1 * clamp(28px, 3.4vw, 40px));
    height: clamp(96px, 24vw, 130px);
  }
  .ncs__photo { width: 34%; }
  /* cropped lower here than on desktop, so the lift has to be taller to match */
  .ncs__photo:hover { transform: translateY(-48px) rotate(0) scale(1.12); }
  .ncs__photo--a { left: 7%;  top: 12%; }
  .ncs__photo--b { left: 33%; top: 2%; }
  .ncs__photo--c { left: 59%; top: 12%; }
  .ncs--linko .ncs__photo--c { left: 56%; top: 8%; width: 40%; }
}
@media (max-width: 500px) {
  /* shrink the bottom nav so all five sections fit on a phone */
  .ncs__nav { gap: 0; padding: 5px; }
  .ncs__nav a { padding: 8px 9px; font-size: 11px; }
}
@media (max-width: 520px) {
  .ncs__pgrid { grid-template-columns: 1fr; }
  .ncs__meta { gap: 16px 30px; }
  .ncs__grow { padding: 26px 24px; }
  .ncs__grow-label { text-align: center; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* even if armed, reduced motion means everything stays visible and static */
  .ncs.ncs-armed .ncs-reveal, .ncs.ncs-armed .stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
  .ncs__marquee-track { animation: none; }
  .ncs__photo, .ncs__idea { transition: none; }
}