/* North Focus — production stylesheet. Consolidates all design tokens,
   design-system component styles, and site layout CSS. Fully static — no
   client-side framework or build dependency required. */

/* ─── Funnel Display (self-hosted) ──────────────────────────────────── */
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-300.woff2') format('woff2'),
       url('../assets/fonts/funnel-display-300.woff') format('woff');
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-400.woff2') format('woff2'),
       url('../assets/fonts/funnel-display-400.woff') format('woff');
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-500.woff2') format('woff2'),
       url('../assets/fonts/funnel-display-500.woff') format('woff');
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-600.woff2') format('woff2'),
       url('../assets/fonts/funnel-display-600.woff') format('woff');
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-700.woff2') format('woff2'),
       url('../assets/fonts/funnel-display-700.woff') format('woff');
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/funnel-display-800.woff2') format('woff2'),
       url('../assets/fonts/funnel-display-800.woff') format('woff');
}

/* ─── Open Sauce Sans ───────────────────────────────────────────────── */
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/open-sauce-300.woff2') format('woff2'),
       url('../assets/fonts/open-sauce-300.woff') format('woff');
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/open-sauce-400.woff2') format('woff2'),
       url('../assets/fonts/open-sauce-400.woff') format('woff');
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/open-sauce-400-italic.woff2') format('woff2'),
       url('../assets/fonts/open-sauce-400-italic.woff') format('woff');
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/open-sauce-500.woff2') format('woff2'),
       url('../assets/fonts/open-sauce-500.woff') format('woff');
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/open-sauce-600.woff2') format('woff2'),
       url('../assets/fonts/open-sauce-600.woff') format('woff');
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/open-sauce-700.woff2') format('woff2'),
       url('../assets/fonts/open-sauce-700.woff') format('woff');
}

/* ─── Colour tokens ─────────────────────────────────────────────────── */
:root {
  --nf-navy-900: #04153f;
  --nf-navy-800: #051c5c;
  --nf-navy:     #072576;
  --nf-navy-600: #1238a0;
  --nf-navy-400: #6d80c2;
  --nf-navy-100: #e4e8f5;

  --nf-coral-700: #cf6857;
  --nf-coral-600: #e07567;
  --nf-coral:     #eb9082;
  --nf-coral-300: #f4bdb3;
  --nf-coral-200: #f8dad3;
  --nf-coral-100: #fcece8;

  --nf-ink:      #232323;
  --nf-ink-600:  #5a5a5a;
  --nf-ink-400:  #8a8a8a;
  --nf-line:     #e0e0e0;
  --nf-line-200: #ededeb;
  --nf-paper:    #e0e0e0;
  --nf-paper-2:  #efeee9;
  --nf-white:    #ffffff;

  --nf-success: #2f7d63;
  --nf-warning: #c98a3c;
  --nf-danger:  #c0503f;
  --nf-info:    var(--nf-navy-600);

  --surface-page:         var(--nf-paper);
  --surface-card:         var(--nf-white);
  --surface-inset:        var(--nf-paper-2);
  --surface-brand:        var(--nf-navy);
  --surface-accent:       var(--nf-coral);
  --surface-accent-soft:  var(--nf-coral-200);

  --text-primary:   var(--nf-ink);
  --text-secondary: var(--nf-ink-600);
  --text-muted:     var(--nf-ink-400);
  --text-on-brand:  var(--nf-white);
  --text-on-accent: var(--nf-navy);
  --text-brand:     var(--nf-navy);
  --text-accent:    var(--nf-coral);
  --text-link:      var(--nf-navy-600);

  --border-default: var(--nf-line);
  --border-strong:  var(--nf-ink);
  --border-brand:   var(--nf-navy);
  --border-accent:  var(--nf-coral);

  --focus-ring: var(--nf-coral);
}

/* ─── Typography tokens ─────────────────────────────────────────────── */
:root {
  --font-display: "Funnel Display", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.28;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-title:  0.12em;
  --tracking-label:  0.16em;
  --tracking-wide:   0.04em;
  --tracking-normal: 0;
  --tracking-tight: -0.01em;
}

/* ─── Spacing / radii / shadow / motion tokens ──────────────────────── */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 7.5rem;

  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-curve: 64px;
  --radius-pill:  999px;

  --border-width:       1px;
  --border-width-thick: 2px;
  --border-width-rule:  3px;

  --shadow-xs:    0 1px 2px rgba(7,37,118,0.05);
  --shadow-sm:    0 2px 6px rgba(7,37,118,0.06);
  --shadow-md:    0 6px 20px rgba(7,37,118,0.08);
  --shadow-lg:    0 16px 44px rgba(7,37,118,0.12);
  --shadow-focus: 0 0 0 3px rgba(235,144,130,0.45);

  --ease-out:    cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out: cubic-bezier(0.45,0,0.2,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter:       var(--space-5);
}

/* ─── Base ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }
p  { margin: 0; text-wrap: pretty; }
a  { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--nf-coral-200); color: var(--nf-navy); }

/* ── Signature backgrounds ─────────────────────────────────────────── */
.nf-grid-bg {
  background-color: var(--nf-paper);
  background-image:
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 112px 112px; /* 28px × 4 — stays in phase with the navy grid */
  background-position: -1px -1px;
}
.nf-grid-bg--navy {
  background-color: var(--nf-navy);
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

/* ── Sweep corners ─────────────────────────────────────────────────── */
.nf-sweep-bl { border-bottom-left-radius:  var(--radius-curve); }
.nf-sweep-br { border-bottom-right-radius: var(--radius-curve); }
.nf-sweep-tr { border-top-right-radius:    var(--radius-curve); }
.nf-sweep-tl { border-top-left-radius:     var(--radius-curve); }

/* ── Crosshair ─────────────────────────────────────────────────────── */
.nf-crosshair { position: relative; }
.nf-crosshair::before,
.nf-crosshair::after { content: ""; position: absolute; background: var(--nf-coral); }
.nf-crosshair::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.nf-crosshair::after  { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }

/* ─── DS component: Eyebrow ─────────────────────────────────────────── */
.nf-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm); color: var(--nf-coral); line-height: 1;
}
.nf-eyebrow--navy  { color: var(--nf-navy); }
.nf-eyebrow--muted { color: var(--nf-ink-400); }
.nf-eyebrow__tick  { width: 22px; height: 2px; background: currentColor; flex: none; }

/* ─── DS component: Button ──────────────────────────────────────────── */
.nf-btn {
  --_bg: var(--nf-navy);
  --_fg: var(--nf-white);
  --_bd: var(--nf-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); line-height: 1;
  border: var(--border-width-thick) solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-md); cursor: pointer;
  padding: 0 var(--space-5); height: 44px; font-size: var(--text-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  white-space: nowrap; text-decoration: none;
}
.nf-btn:hover { text-decoration: none; }
.nf-btn:active { transform: translateY(1px); }
.nf-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nf-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.nf-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.nf-btn--lg { height: 52px; padding: 0 var(--space-6); font-size: var(--text-base); }

.nf-btn--primary { --_bg: var(--nf-navy); --_fg: var(--nf-white); --_bd: var(--nf-navy); }
.nf-btn--primary:hover { --_bg: var(--nf-navy-800); --_bd: var(--nf-navy-800); }

.nf-btn--accent { --_bg: var(--nf-coral); --_fg: var(--nf-navy); --_bd: var(--nf-coral); }
.nf-btn--accent:hover { --_bg: var(--nf-coral-600); --_bd: var(--nf-coral-600); }

.nf-btn--secondary { --_bg: transparent; --_fg: var(--nf-navy); --_bd: var(--nf-navy); }
.nf-btn--secondary:hover { --_bg: var(--nf-navy); --_fg: var(--nf-white); }

.nf-btn--ghost { --_bg: transparent; --_fg: var(--nf-navy); --_bd: transparent; }
.nf-btn--ghost:hover { --_bg: var(--nf-navy-100); }

/* ─── DS component: Input / Textarea ───────────────────────────────── */
.nf-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); }
.nf-field__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy);
}
.nf-field__req   { color: var(--nf-coral-600); }
.nf-field__hint  { font-size: var(--text-xs); color: var(--nf-ink-400); }
.nf-field__error { font-size: var(--text-xs); color: var(--nf-danger); }
.nf-input {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--nf-ink);
  background: var(--nf-white); border: var(--border-width) solid var(--nf-line);
  border-radius: var(--radius-md); padding: 0 var(--space-4); height: 46px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nf-input::placeholder { color: var(--nf-ink-400); }
.nf-input:hover { border-color: var(--nf-ink-400); }
.nf-input:focus { outline: none; border-color: var(--nf-navy); box-shadow: var(--shadow-focus); }
.nf-input[aria-invalid="true"] { border-color: var(--nf-danger); }
.nf-input[disabled] { background: var(--nf-paper-2); color: var(--nf-ink-400); cursor: not-allowed; }
textarea.nf-input { height: auto; padding: var(--space-3) var(--space-4); line-height: var(--leading-normal); resize: vertical; min-height: 108px; }

/* ─── DS component: Select ──────────────────────────────────────────── */
.nf-selectwrap { position: relative; display: inline-block; width: 100%; font-family: var(--font-body); }
.nf-select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--nf-ink);
  background: var(--nf-white); border: var(--border-width) solid var(--nf-line);
  border-radius: var(--radius-md); padding: 0 var(--space-7) 0 var(--space-4);
  height: 46px; width: 100%; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nf-select:hover { border-color: var(--nf-ink-400); }
.nf-select:focus { outline: none; border-color: var(--nf-navy); box-shadow: var(--shadow-focus); }
.nf-select[disabled] { background: var(--nf-paper-2); color: var(--nf-ink-400); cursor: not-allowed; }
.nf-selectwrap__chev {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--nf-navy); width: 18px; height: 18px;
}

/* ─────────────────────────────────────────────────────────────────────
   Site layout — "space with structure"
   ───────────────────────────────────────────────────────────────────── */

/* Quiet blueprint grid on the page canvas */
.nf-site {
  font-family: var(--font-body);
  color: var(--nf-ink);
  background-color: var(--nf-paper);
  background-image:
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 112px 112px;
}

.nf-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(24px,5vw,64px); }

/* Scroll offset for sticky header (~72px tall) */
section[id] { scroll-margin-top: 80px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.nf-site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(24px,5vw,64px);
  background: rgba(224,224,224,0.82);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-site-header__brand { display: inline-flex; }
.nf-site-nav { display: flex; gap: 40px; }
.nf-site-nav__link {
  position: relative;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-600);
  transition: color var(--dur-fast) var(--ease-out);
}
.nf-site-nav__link:hover { color: var(--nf-navy); text-decoration: none; }
.nf-site-nav__link[aria-current="page"] { color: var(--nf-navy); }
.nf-site-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--nf-coral); border-radius: 1px;
}

/* ── Section scaffolding ─────────────────────────────────────────────── */
.nf-sec { padding-block: clamp(72px,11vw,132px); }
.nf-sec__marker {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: clamp(40px,6vw,72px);
}
.nf-sec__ix {
  flex: none;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-wide);
  color: var(--nf-coral);
}
.nf-sec__rule { flex: 1; height: 1px; background: rgba(7,37,118,0.14); }

.nf-section-head { max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.nf-section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.nf-section-title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px,4vw,52px); line-height: 1.06; color: var(--nf-navy);
}
.nf-section-sub { font-size: var(--text-md); line-height: 1.65; color: var(--nf-ink-600); max-width: 34em; }
.nf-accent { color: var(--nf-coral); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.nf-hero { padding-block: clamp(64px,9vw,104px) clamp(56px,8vw,96px); }
.nf-hero__grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(40px,6vw,72px);
  align-items: center;
}
.nf-hero__text { display: flex; flex-direction: column; gap: 26px; }
.nf-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(48px,7vw,92px); line-height: 0.98; color: var(--nf-navy); margin: 0;
}
.nf-hero__lead { font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600); max-width: 30em; margin: 0; }
.nf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

.nf-hero__panel {
  background-color: var(--nf-navy); color: var(--nf-white); border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  min-height: 400px; padding: 44px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.nf-hero__curve {
  position: absolute; top: -8px; right: -8px;
  width: 62%; opacity: 0.16; pointer-events: none; user-select: none;
}
.nf-hero__panelmark { opacity: 0.96; }
.nf-hero__statement { display: flex; flex-direction: column; gap: 6px; }
.nf-hero__you, .nf-hero__we {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(22px,2.4vw,32px); line-height: 1.1;
}
.nf-hero__you { color: var(--nf-coral); }
.nf-hero__we  { color: var(--nf-white); }

/* ── Belief (navy problem band) ──────────────────────────────────────── */
.nf-belief {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(76px,11vw,132px);
}
.nf-belief__curve {
  position: absolute; top: -10%; right: -5%;
  width: 44%; opacity: 0.12; pointer-events: none; user-select: none;
}
.nf-belief .nf-wrap { position: relative; }
.nf-belief__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(32px,4.6vw,62px); line-height: 1.03; color: var(--nf-white);
  margin: 22px 0 0; max-width: 15ch;
}
.nf-belief__sub { font-size: var(--text-md); line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 46ch; margin: 24px 0 0; }
.nf-belief__list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 38px 0 0; padding: 0; }
.nf-belief__item {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: rgba(255,255,255,0.9);
  padding: 10px 16px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  display: flex; align-items: center; gap: 10px;
}
.nf-belief__item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--nf-coral); flex: none; }
.nf-belief__close {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-lg); line-height: 1.4; color: var(--nf-white); margin: 38px 0 0; max-width: 28ch;
}
.nf-belief__note {
  font-size: var(--text-sm); line-height: 1.6; color: rgba(255,255,255,0.62);
  margin: 24px 0 0; max-width: 46ch;
}

/* ── Positioning ─────────────────────────────────────────────────────── */
.nf-pos__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,2.4vw,28px); margin-top: clamp(34px,5vw,56px); }
.nf-pos__card { border-radius: var(--radius-lg); padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 14px; }
.nf-pos__card--them { background: var(--nf-white); border: 1px solid var(--nf-line); }
.nf-pos__card--us   { background: var(--nf-navy); color: var(--nf-white); }
.nf-pos__label { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); }
.nf-pos__card--them .nf-pos__label { color: var(--nf-ink-400); }
.nf-pos__card--us   .nf-pos__label { color: var(--nf-coral); }
.nf-pos__line { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: var(--text-lg); line-height: 1.12; margin: 0; }
.nf-pos__card--them .nf-pos__line { color: var(--nf-ink); }
.nf-pos__card--us   .nf-pos__line { color: var(--nf-white); }
.nf-pos__note { font-size: var(--text-base); line-height: 1.6; margin: 0; }
.nf-pos__card--them .nf-pos__note { color: var(--nf-ink-600); }
.nf-pos__card--us   .nf-pos__note { color: rgba(255,255,255,0.82); }
.nf-pos__foot {
  margin: clamp(30px,4vw,48px) 0 0; font-size: var(--text-md);
  line-height: 1.7; color: var(--nf-ink-600); max-width: 62ch;
}
.nf-pos__foot strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── Services / Engagement flow ──────────────────────────────────────── */
.nf-flow { position: relative; margin-top: 4px; }
.nf-flow::before {
  content: ""; position: absolute; left: 27px; top: 36px; bottom: 36px;
  width: 2px; background: var(--nf-navy); opacity: 0.16;
}
.nf-step {
  display: grid; grid-template-columns: 56px 1fr; gap: clamp(24px,4vw,48px);
  align-items: start; padding: clamp(28px,4vw,44px) 0;
  border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-step:first-child { border-top: 0; }
.nf-step__node {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--nf-navy); color: var(--nf-white);
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--text-lg); letter-spacing: 0;
}
.nf-step__body { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(16px,3vw,40px); align-items: baseline; }
.nf-step__t {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-xl); line-height: 1.1; color: var(--nf-navy); margin: 0;
}
.nf-step__b { font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600); margin: 0; }

.nf-flow__cta {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(20px,4vw,48px);
  flex-wrap: wrap; margin-top: clamp(32px,4vw,48px); padding-top: clamp(28px,3.4vw,40px);
  border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-flow__ctatext { font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600); margin: 0; max-width: 34em; }

/* ── Outcomes / What changes ─────────────────────────────────────────── */
.nf-shift {
  margin-top: clamp(36px,5vw,60px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px,5vw,72px);
}
.nf-shift__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(14px,2vw,26px);
  grid-column: 1 / -1;
  padding: clamp(15px,1.8vw,20px) 0;
  border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-shift__row:first-child { border-top: 0; }
.nf-shift__before, .nf-shift__after {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px,1.5vw,19px); line-height: 1.2;
}
.nf-shift__before { color: var(--nf-ink-400); text-align: right; }
.nf-shift__after  { color: var(--nf-navy); }
.nf-shift__arrow {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nf-coral-200); color: var(--nf-navy);
}
.nf-shift__arrow svg { width: 16px; height: 16px; }
.nf-shift__foot {
  grid-column: 1 / -1;
  margin: clamp(30px,3.8vw,46px) 0 0; padding-top: clamp(22px,2.6vw,30px);
  border-top: 1px solid rgba(7,37,118,0.10);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px,1.9vw,23px); line-height: 1.4; color: var(--nf-navy);
  max-width: 42ch; margin-bottom: 0;
}

.nf-outcomes__head { margin-top: clamp(48px,6vw,76px); }
.nf-outcomes__kicker {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-400);
  display: inline-flex; align-items: center; gap: 14px;
}
.nf-outcomes__kicker::before { content: ""; width: 26px; height: var(--border-width-rule); background: var(--nf-coral); }
.nf-outcomes__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,4vw,56px); margin-top: clamp(22px,3vw,32px); }
.nf-outcomes__card { display: flex; flex-direction: column; gap: 12px; }
.nf-outcomes__num { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(40px,5vw,64px); line-height: 0.9; color: var(--nf-coral); }
.nf-outcomes__t { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: var(--text-xl); line-height: 1.1; color: var(--nf-navy); margin: 0; }
.nf-outcomes__b { font-size: var(--text-base); line-height: 1.65; color: var(--nf-ink-600); margin: 0; }
.nf-outcomes__foot {
  margin: clamp(38px,5vw,60px) 0 0;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-lg); line-height: 1.4; color: var(--nf-navy); max-width: 30ch;
}

/* ── About ───────────────────────────────────────────────────────────── */
.nf-about__grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px,6vw,80px); align-items: start;
}
.nf-about__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-paper); aspect-ratio: 4/5;
}
.nf-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-about__col { display: flex; flex-direction: column; gap: 20px; }
.nf-about__body { font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); margin: 0; max-width: 36em; }
.nf-about__pullquote {
  margin: 8px 0 4px; padding-left: 26px; border-left: var(--border-width-rule) solid var(--nf-coral);
}
.nf-about__pq-text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-lg); line-height: 1.25; color: var(--nf-navy); margin: 0;
}
.nf-about__actions { margin-top: 8px; }

/* ── Founder bio (about page) — long-form readability ────────────────── */
.nf-about__grid--founder { align-items: stretch; }
.nf-about__left {
  display: flex; flex-direction: column;
  justify-content: flex-start; gap: clamp(28px,3vw,40px);
}
.nf-about__rotlabel {
  position: absolute; left: 14px; bottom: 18px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(7,37,118,0.45); pointer-events: none;
}
.nf-founder .nf-about__col { gap: clamp(22px,2.6vw,30px); }
.nf-about__lead {
  font-size: clamp(20px,1.5vw,23px); line-height: 1.6; color: var(--nf-ink);
  max-width: 34em; margin: 0; text-wrap: pretty;
}
.nf-founder .nf-about__body { text-wrap: pretty; }
.nf-about__beyond {
  margin-top: clamp(16px,2vw,28px);
  display: flex; flex-direction: column; gap: 12px; max-width: 60ch;
}
.nf-about__beyond p { font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600); margin: 0; }

/* Founder quote — oversized mark layered on accent card */
.fq { margin: 0; }
.fq__text {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  color: var(--nf-navy); margin: 0;
}
.fq--card {
  background: var(--nf-coral-200); border: 0;
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(32px,4vw,52px);
  position: relative; overflow: hidden;
}
.fq--card .fq__mark {
  position: absolute; top: clamp(14px,2vw,34px); left: clamp(28px,4vw,52px); z-index: 0;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(170px,20vw,280px); line-height: 0.8; color: var(--nf-coral);
  opacity: 0.24; pointer-events: none; user-select: none;
}
.fq--card .fq__text {
  position: relative; z-index: 1;
  font-size: clamp(24px,2.7vw,40px); line-height: 1.14; max-width: 15ch;
  margin-top: clamp(58px,7vw,104px);
}
/* Calm-arcs texture variant */
.fq__arcs {
  position: absolute; z-index: 0; pointer-events: none;
  right: -12%; bottom: -16%; width: 58%;
  aspect-ratio: 1 / 1;
  background: url("../assets/brand/arcs-pink.png") no-repeat center bottom / contain;
  opacity: 0.42; mix-blend-mode: multiply;
}
.fq--arcs .fq__mark { opacity: 0.22; }

/* ── Contact ─────────────────────────────────────────────────────────── */
.nf-contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px,6vw,80px); align-items: start; }
.nf-contact__intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; position: sticky; top: 120px; }
.nf-contact__formwrap {
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(28px,4vw,44px); box-shadow: var(--shadow-sm);
}
.nf-contact__form { display: flex; flex-direction: column; gap: 22px; }
.nf-contact__row  { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nf-field-shell { display: flex; flex-direction: column; gap: 8px; }
.nf-field-shell__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy);
}
.nf-contact__success { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 16px 4px; }
.nf-contact__checkmark {
  width: 56px; height: 56px; border-radius: 50%; background: var(--nf-coral-200); color: var(--nf-navy);
  display: grid; place-items: center;
}
.nf-contact__checkmark svg { width: 28px; height: 28px; }
.nf-contact__successtitle {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-xl); color: var(--nf-navy);
}
.nf-contact__successbody { font-size: var(--text-base); color: var(--nf-ink-600); line-height: 1.6; }
.nf-contact__note {
  font-size: var(--text-xs); color: var(--nf-ink-400); line-height: 1.5;
  border-top: 1px solid var(--nf-line); padding-top: 12px; margin-top: 4px;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.nf-site-footer { background: var(--nf-navy); color: var(--nf-white); padding: 72px clamp(24px,5vw,64px) 30px; }
.nf-site-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; max-width: 1180px; margin-inline: auto; }
.nf-site-footer__tag {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-md); margin-top: 22px; color: var(--nf-white); max-width: 16em;
}
.nf-site-footer__support { color: var(--nf-coral); margin-top: 10px; font-size: var(--text-sm); }
.nf-site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.nf-site-footer__col  { display: flex; flex-direction: column; gap: 12px; }
.nf-site-footer__h {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy-400); margin-bottom: 4px;
}
.nf-site-footer__link { color: rgba(255,255,255,0.82); font-size: var(--text-sm); }
.nf-site-footer__link:hover { color: var(--nf-coral); text-decoration: none; }
.nf-site-footer__base {
  display: flex; justify-content: space-between; max-width: 1180px;
  margin: 48px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--text-xs); color: var(--nf-navy-400);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .nf-hero__grid,
  .nf-contact__grid,
  .nf-about__grid     { grid-template-columns: 1fr; }
  .nf-contact__intro  { position: static; }
  .nf-step__body      { grid-template-columns: 1fr; gap: 10px; }
  .nf-pos__grid       { grid-template-columns: 1fr; }
  .nf-outcomes__grid  { grid-template-columns: 1fr; }
  .nf-shift           { grid-template-columns: 1fr; }
  .nf-shift__row      { grid-template-columns: 1fr auto 1fr; }
  .nf-flow__cta       { flex-direction: column; align-items: flex-start; }
  .nf-site-nav        { display: none; }
  .nf-site-footer__inner { grid-template-columns: 1fr; }
}

/* ─── Inner page hero ───────────────────────────────────────────────── */
.nf-page-hero { padding-block: clamp(72px,11vw,140px); border-bottom: 1px solid rgba(7,37,118,0.10); }
.nf-page-hero__inner { max-width: 860px; display: flex; flex-direction: column; gap: clamp(20px,2.5vw,32px); }
.nf-page-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(36px,5.5vw,72px); line-height: 1.0; color: var(--nf-navy); margin: 0;
}
.nf-page-hero__desc { font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600); max-width: 46ch; margin: 0; }

/* ─── Recognition (homepage "You feel it when…" navy band) ──────────── */
.nf-recognition {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(72px,11vw,120px);
}
.nf-recognition__curve {
  position: absolute; top: -8%; right: -4%;
  width: 38%; opacity: 0.10; pointer-events: none; user-select: none;
}
.nf-recognition__inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px,7vw,96px); align-items: center;
}
.nf-recognition__left { display: flex; flex-direction: column; gap: 24px; }
.nf-recognition__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(40px,5.5vw,72px); line-height: 1.0; color: var(--nf-white); margin: 0;
}
.nf-recognition__close {
  font-size: var(--text-md); line-height: 1.65;
  color: rgba(255,255,255,0.72); max-width: 30ch; margin: 0;
}
.nf-recognition__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); display: inline-block;
}
.nf-recognition__link:hover { color: var(--nf-white); text-decoration: none; }
.nf-recognition__right { display: flex; flex-direction: column; }
.nf-recognition__list { list-style: none; padding: 0; margin: 0; }
.nf-recognition__item {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(14px,2vw,20px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(14px,1.5vw,19px); line-height: 1.3; color: rgba(255,255,255,0.90);
}
.nf-recognition__item:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
.nf-recognition__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }

/* ─── What we do (homepage "Between advice and execution") ──────────── */
.nf-whatwedo__grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px,7vw,100px); align-items: start;
}
.nf-whatwedo__head { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 120px; }
.nf-whatwedo__body { display: flex; flex-direction: column; }
.nf-whatwedo__line {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px,1.8vw,22px); line-height: 1.45; color: var(--nf-ink);
  margin: 0; padding: clamp(16px,2vw,22px) 0; border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-whatwedo__line:first-child { border-top: 1px solid rgba(7,37,118,0.10); }
.nf-whatwedo__line--accent { color: var(--nf-navy); font-weight: var(--fw-extrabold); }
.nf-whatwedo__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(20px,3vw,32px);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral);
}
.nf-whatwedo__more:hover { color: var(--nf-navy); text-decoration: none; }
.nf-whatwedo__support {
  font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600);
  margin: clamp(20px,2.6vw,28px) 0 0; max-width: 46ch;
}
.nf-whatwedo__support + .nf-whatwedo__support { margin-top: 16px; }

/* ─── Founder teaser (homepage) ─────────────────────────────────────── */
.nf-founder-teaser__grid {
  display: grid; grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(40px,6vw,80px); align-items: center;
}
.nf-founder-teaser__media {
  overflow: hidden; border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-paper-2); aspect-ratio: 3/4;
}
.nf-founder-teaser__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nf-founder-teaser__col { display: flex; flex-direction: column; gap: 20px; }
.nf-founder-teaser__body {
  font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); max-width: 38em; margin: 0;
}
.nf-founder-teaser__actions { margin-top: 8px; }

/* ─── Symptom categories (problems page) ────────────────────────────── */
.nf-symptoms-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,2.5vw,28px);
  margin-top: clamp(36px,5vw,56px);
}
.nf-symptom-card {
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-top: var(--border-width-rule) solid var(--nf-coral);
  border-radius: var(--radius-lg); padding: clamp(24px,3vw,36px);
}
.nf-symptom-card__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy); margin: 0 0 clamp(14px,2vw,20px);
}
.nf-symptom-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nf-symptom-card__item {
  font-size: var(--text-base); line-height: 1.5; color: var(--nf-ink-600);
  display: flex; align-items: flex-start; gap: 10px;
}
.nf-symptom-card__item::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--nf-coral); flex: none; margin-top: 8px;
}

/* ─── Scale signals (problems "when this usually appears") ──────────── */
.nf-scale-section__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,7vw,100px); align-items: start;
}
.nf-scale-signals { display: flex; flex-direction: column; }
.nf-scale-signal {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(14px,1.8vw,18px) 0; border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-scale-signal:first-child { border-top: 1px solid rgba(7,37,118,0.10); }
.nf-scale-signal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }
.nf-scale-signal__text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-sm); color: var(--nf-navy);
}

/* ─── Examples grid (examples page) ─────────────────────────────────── */
.nf-examples-grid { display: flex; flex-direction: column; }
.nf-example-card {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px,5vw,72px); align-items: start;
  padding: clamp(40px,6vw,72px) 0; border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-example-card:first-child { border-top: 0; }
.nf-example-card__col { display: flex; flex-direction: column; gap: 14px; }
.nf-example-card__label, .nf-example-card__action-label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); display: flex; align-items: center; gap: 12px;
}
.nf-example-card__label { color: var(--nf-coral); }
.nf-example-card__label::before { content: ''; width: 22px; height: 2px; background: var(--nf-coral); flex: none; }
.nf-example-card__action-label { color: var(--nf-ink-400); }
.nf-example-card__action-label::before { content: ''; width: 22px; height: 1px; background: rgba(7,37,118,0.25); flex: none; }
.nf-example-card__num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(36px,4.5vw,56px); line-height: 0.9; color: var(--nf-coral); margin: 0 0 4px;
}
.nf-example-card__problem {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(18px,2.2vw,28px); line-height: 1.1; color: var(--nf-navy); margin: 0;
}
.nf-example-card__text, .nf-example-card__action {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600); margin: 0;
}

/* ─── Sprint list (how-we-work page) ────────────────────────────────── */
.nf-sprint-list {
  display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(12px,1.5vw,18px);
  margin-top: clamp(28px,4vw,44px);
}
.nf-sprint-item {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(14px,1.8vw,18px) clamp(16px,2vw,22px);
  background: var(--nf-white); border: 1px solid rgba(7,37,118,0.10);
  border-radius: var(--radius-md); font-size: var(--text-base); color: var(--nf-ink); line-height: 1.4;
}
.nf-sprint-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }

/* ─── Avoids list (how-we-work page) ────────────────────────────────── */
.nf-avoids-list { display: flex; flex-direction: column; max-width: 680px; margin-top: clamp(24px,4vw,40px); }
.nf-avoids-item {
  display: flex; align-items: baseline; gap: clamp(16px,2.5vw,32px);
  padding: clamp(18px,2.2vw,26px) 0; border-top: 1px solid rgba(7,37,118,0.10);
  font-size: var(--text-md); line-height: 1.65; color: var(--nf-ink-600);
}
.nf-avoids-item:last-child { border-bottom: 1px solid rgba(7,37,118,0.10); }
.nf-avoids-item__dash {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  color: var(--nf-coral); font-size: var(--text-lg); flex: none; line-height: 1;
}

/* ─── Principles list ────────────────────────────────────────────────── */
.nf-principles-list { display: flex; flex-direction: column; }
.nf-principle {
  display: grid; grid-template-columns: clamp(48px,6vw,80px) 1fr;
  gap: clamp(24px,4vw,60px); align-items: start;
  padding: clamp(44px,6.5vw,80px) 0; border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-principle:first-child { border-top: 0; }
.nf-principle__num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(32px,4vw,52px); line-height: 1; color: var(--nf-coral);
}
.nf-principle__content { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.nf-principle__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(20px,2.5vw,32px); line-height: 1.1; color: var(--nf-navy); margin: 0;
}
.nf-principle__body { font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); margin: 0; }

/* ─── Engagement principles (Principles page — "What we stand for") ───── */
.nf-engage-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px,2.4vw,28px); margin-top: clamp(34px,5vw,56px);
}
.nf-engage-card {
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-top: var(--border-width-rule) solid var(--nf-coral);
  border-radius: var(--radius-lg); padding: clamp(28px,3vw,40px);
  display: flex; flex-direction: column; gap: 14px;
}
.nf-engage-card__name {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-xl); line-height: 1.1; color: var(--nf-navy);
}
.nf-engage-card__body { font-size: var(--text-base); line-height: 1.65; color: var(--nf-ink-600); margin: 0; }

/* ─── About — reason + skills (about page) ──────────────────────────── */
.nf-about-reason { max-width: 760px; }
.nf-about-reason__body {
  font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600);
  max-width: 48ch; margin: clamp(20px,3vw,28px) 0 0;
}
.nf-skills-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(10px,1.2vw,14px); margin-top: clamp(20px,3vw,32px); }
.nf-skill-item {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(12px,1.5vw,16px) clamp(14px,1.8vw,20px);
  background: var(--nf-white); border: 1px solid rgba(7,37,118,0.10);
  border-radius: var(--radius-md); font-size: var(--text-base); color: var(--nf-ink); line-height: 1.4;
}
.nf-skill-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }

/* ─── Page CTA (navy ending block on supporting pages) ──────────────── */
.nf-page-cta { padding-block: clamp(72px,11vw,120px); color: var(--nf-white); }
.nf-page-cta .nf-wrap {
  display: flex; flex-direction: column; gap: clamp(16px,2vw,24px);
  align-items: flex-start; max-width: 620px;
}
.nf-page-cta__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(26px,3.5vw,44px); line-height: 1.06; color: var(--nf-white); margin: 0; max-width: 20ch;
}
.nf-page-cta__sub {
  font-size: var(--text-md); line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0 0 8px; max-width: 40ch;
}

/* ─── Additional responsive ──────────────────────────────────────────── */
@media (max-width: 920px) {
  .nf-recognition__inner    { grid-template-columns: 1fr; gap: clamp(28px,5vw,48px); }
  .nf-whatwedo__grid        { grid-template-columns: 1fr; }
  .nf-whatwedo__head        { position: static; }
  .nf-founder-teaser__grid  { grid-template-columns: 1fr; }
  .nf-founder-teaser__media { aspect-ratio: 3/2; }
  .nf-symptoms-grid         { grid-template-columns: 1fr; }
  .nf-scale-section__grid   { grid-template-columns: 1fr; }
  .nf-sprint-list           { grid-template-columns: 1fr; }
  .nf-example-card          { grid-template-columns: 1fr; }
  .nf-skills-grid           { grid-template-columns: 1fr; }
  .nf-engage-grid           { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Handoff v3 targeted additions
   --------------------------------------------------------------------------
   New selector blocks required by the v3 prototypes for the Problems,
   Examples and How-we-work pages. Additive only — every production rule
   above is preserved. A few shared selectors are intentionally re-declared
   here (.nf-scale-signal, .nf-scale-signal__text, .nf-sprint-item,
   .nf-sprint-list) to carry the new v3 layouts; these classes appear only
   on the three changed pages, so the overrides are page-local in effect.
   -------------------------------------------------------------------------- */

/* ── DS Card surface — Problems numbered constraint cards ────────────────
   Ported from the design-system <Card> the prototype injects at runtime.
   Combined with the existing .nf-symptom-card rule, the .nf-card border
   shorthand (declared later) supersedes the old coral top border, matching
   the v3 prototype. */
.nf-card {
  font-family: var(--font-body); background: var(--nf-white);
  border: 1px solid var(--nf-line); border-radius: var(--radius-lg);
  padding: var(--space-6); color: var(--nf-ink); position: relative; overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nf-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nf-card__index {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-title);
  color: var(--nf-coral); margin-bottom: var(--space-3);
}
.nf-card__title {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-lg); line-height: var(--leading-snug); margin-bottom: var(--space-3);
  color: inherit;
}
.nf-card__body { font-size: var(--text-base); line-height: var(--leading-normal); color: inherit; }
.nf-symptom-card.nf-card { padding: clamp(26px,3vw,38px); }
.nf-symptom-card .nf-card__title { color: var(--nf-navy); }

/* ── Numbered scale signals + "= Less clarity" result row (Problems §02) ── */
.nf-scale-signal {
  display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 18px;
  padding: clamp(13px,1.6vw,16px) 0; border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-scale-signal__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); color: var(--nf-ink-400); letter-spacing: var(--tracking-wide);
}
.nf-scale-signal__text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px,1.5vw,19px); line-height: 1.2; color: var(--nf-navy);
}
.nf-scale-signal__pre  { color: var(--nf-ink-400); }
.nf-scale-signal__noun { color: var(--nf-navy); }
.nf-scale-signal--result { border-bottom: none; padding-top: clamp(16px,2vw,20px); }
.nf-scale-signal--result .nf-scale-signal__n,
.nf-scale-signal--result .nf-scale-signal__pre { color: var(--nf-coral); }
.nf-scale-signal--result .nf-scale-signal__noun { color: var(--nf-coral); font-weight: var(--fw-extrabold); }

/* ── Examples card sub-blocks — "Why it matters" / "What it may look like" ─ */
.nf-example-card__block { display: flex; flex-direction: column; gap: 8px; }
.nf-example-card__sublabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy);
}
.nf-example-card__sublabel--muted { color: var(--nf-ink-400); }
.nf-example-card__text--muted { color: var(--nf-ink-400); }

/* ── Sprint numbered icon cards (How We Work §03) ───────────────────────── */
.nf-sprint-list { grid-template-columns: repeat(4, 1fr); gap: clamp(12px,1.3vw,16px); }
.nf-sprint-item {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(26px,3.5vw,40px);
  min-height: clamp(148px,15vw,178px);
  padding: clamp(18px,1.9vw,24px);
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-radius: var(--radius-md); overflow: hidden;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.nf-sprint-item::before { content: none; }
.nf-sprint-item__top { display: flex; align-items: center; justify-content: space-between; }
.nf-sprint-item__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  color: var(--nf-ink-400); transition: color var(--dur-base) var(--ease-out);
}
.nf-sprint-item__mark {
  width: 22px; height: 22px; color: var(--nf-coral); flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.nf-sprint-item__mark svg { width: 100%; height: 100%; display: block; }
.nf-sprint-item__label {
  margin-top: auto; font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px,1.35vw,18px); line-height: 1.18;
  color: var(--nf-navy); text-wrap: balance;
  transition: color var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .nf-sprint-item:hover {
    background: var(--nf-navy); border-color: var(--nf-navy);
    transform: translateY(-2px); box-shadow: var(--shadow-md);
  }
  .nf-sprint-item:hover .nf-sprint-item__label { color: var(--nf-white); }
  .nf-sprint-item:hover .nf-sprint-item__n { color: var(--nf-navy-400); }
  .nf-sprint-item:hover .nf-sprint-item__mark { transform: rotate(90deg); }
}

/* ── Avoid → instead rows (How We Work §04) ─────────────────────────────── */
.nf-avoids { border-top: var(--border-width-rule) solid var(--nf-navy); margin-top: clamp(24px,4vw,40px); }
.nf-avoid-row {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(22px,4vw,56px); align-items: baseline;
  padding: clamp(26px,3.2vw,40px) 0;
  border-bottom: 1px solid rgba(7,37,118,0.12);
}
.nf-avoid-row__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(15px,1.4vw,18px); letter-spacing: var(--tracking-wide);
  color: var(--nf-coral); line-height: 1; font-variant-numeric: tabular-nums;
  padding-top: 0.32em;
}
.nf-avoid-row__main { display: flex; flex-direction: column; gap: clamp(12px,1.5vw,18px); }
.nf-avoid-row__avoid {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(20px,2.4vw,31px); line-height: 1.08;
  color: var(--nf-navy); text-wrap: balance; margin: 0;
}
.nf-avoid-row__instead {
  display: flex; align-items: baseline; gap: clamp(12px,1.4vw,16px);
  font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600);
  margin: 0; max-width: 48ch;
}
.nf-avoid-row__lbl {
  flex: none; font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); line-height: 1.7;
}

/* ── v3 responsive — sprint grid steps down 4 → 2 → 1 ───────────────────── */
@media (max-width: 920px) {
  .nf-sprint-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .nf-sprint-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 Homepage Redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section marker light variant (on navy backgrounds) ─────────────────── */
.nf-sec__marker--light .nf-sec__rule { background: rgba(255,255,255,0.20); }

/* ── HR_Scaling section ──────────────────────────────────────────────────── */
.hr-scaling { position: relative; overflow: hidden; color: var(--nf-white); padding-block: clamp(76px, 11vw, 128px); }
.hr-scaling__curve { position: absolute; top: -8%; right: -4%; width: 38%; opacity: 0.10; pointer-events: none; user-select: none; }
.hr-scaling__inner { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.hr-scaling__left { display: flex; flex-direction: column; gap: 22px; }
.hr-scaling__statement { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(34px, 4.8vw, 64px); line-height: 1.0; color: var(--nf-white); margin: 0; max-width: 13ch; text-wrap: balance; }
.hr-scaling__statement em { color: var(--nf-coral); font-style: normal; }
.hr-scaling__body { display: flex; flex-direction: column; gap: 18px; max-width: 44ch; }
.hr-scaling__body p { font-size: var(--text-md); line-height: 1.72; color: rgba(255,255,255,0.74); margin: 0; }
.hr-scaling__body strong { color: var(--nf-white); font-weight: var(--fw-semibold); }
.hr-scaling__right { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.hr-scaling__cue { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-coral); }
.hr-feel-list { list-style: none; padding: 0; margin: 0; }
.hr-feel-list__item { display: flex; align-items: center; gap: 14px; padding: clamp(13px, 1.8vw, 18px) 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: clamp(13px, 1.4vw, 17px); line-height: 1.3; color: rgba(255,255,255,0.90); }
.hr-feel-list__item:first-child { border-top: 1px solid rgba(255,255,255,0.12); }
.hr-feel-list__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }
.hr-scaling__close { font-size: var(--text-base); line-height: 1.62; color: rgba(255,255,255,0.66); margin: 0; max-width: 42ch; }
.hr-scaling__close em { color: rgba(255,255,255,0.92); font-style: italic; }
.hr-scaling__link { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-coral); align-self: flex-start; }
.hr-scaling__link:hover { color: var(--nf-white); text-decoration: none; }

/* ── HR_Effort section ───────────────────────────────────────────────────── */
.hr-effort__head { max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.hr-effort__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(34px, 5vw, 68px); line-height: 1.0; color: var(--nf-navy); margin: 0; max-width: 14ch; }
.hr-effort__title em { color: var(--nf-coral); font-style: normal; }
.hr-effort__lead { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(18px, 2vw, 25px); line-height: 1.42; color: var(--nf-navy); margin: 0; max-width: 44ch; text-wrap: pretty; }
.hr-effort__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 96px); align-items: start; margin-top: clamp(40px, 6vw, 72px); }
.hr-effort__chain { display: flex; flex-direction: column; position: sticky; top: 120px; }
.hr-effort__chainline { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.35; color: var(--nf-ink-600); margin: 0; padding: clamp(12px, 1.5vw, 16px) 0; border-bottom: 1px solid rgba(7,37,118,0.10); }
.hr-effort__chainline:first-child { border-top: 1px solid rgba(7,37,118,0.10); }
.hr-effort__chainline strong { color: var(--nf-navy); font-weight: var(--fw-extrabold); }
.hr-effort__chainline--result { color: var(--nf-coral); font-weight: var(--fw-extrabold); border-bottom: 0; }
.hr-pairs { display: flex; flex-direction: column; }
.hr-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 1.8vw, 24px); padding: clamp(16px, 2.1vw, 24px) 0; border-top: 1px solid rgba(7,37,118,0.12); }
.hr-pair:first-child { border-top: 0; }
.hr-pair__symptom, .hr-pair__cause { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(14px, 1.5vw, 18px); line-height: 1.3; }
.hr-pair__symptom { color: var(--nf-ink-400); }
.hr-pair__cause { color: var(--nf-navy); }
.hr-pair__cause strong { color: var(--nf-coral); font-weight: var(--fw-extrabold); }
.hr-pair__arrow { flex: none; color: var(--nf-coral); width: 20px; height: 20px; }
.hr-pair__arrow svg { width: 100%; height: 100%; display: block; }
.hr-effort__close { margin: clamp(28px, 3.6vw, 44px) 0 0; padding-top: clamp(20px, 2.4vw, 28px); border-top: var(--border-width-rule) solid var(--nf-coral); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(17px, 1.9vw, 24px); line-height: 1.38; color: var(--nf-navy); max-width: 46ch; }

/* ── nf-why (HR_NorthFocus) section ─────────────────────────────────────── */
.nf-why { position: relative; overflow: hidden; }
.nf-why__arcs { position: absolute; right: -8%; top: -18%; width: clamp(300px, 40%, 620px); opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0; }
.nf-why .nf-wrap { position: relative; z-index: 1; }
.nf-why__head { max-width: 760px; display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); }
.nf-why__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.04; color: var(--nf-navy); margin: 0; max-width: 18ch; text-wrap: balance; }
.nf-why__title em { color: var(--nf-coral); font-style: normal; }
.nf-why__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.nf-why__prose { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); max-width: 50ch; }
.nf-why__lead { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(19px, 2vw, 26px); line-height: 1.4; color: var(--nf-navy); margin: 0; text-wrap: pretty; }
.nf-why__prose p { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; }
.nf-why__prose p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.nf-why__beats { background: var(--nf-coral-200); border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve); padding: clamp(30px, 3.4vw, 46px); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.nf-why__beatslabel { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-coral-700); margin-bottom: clamp(18px, 2vw, 26px); }
.nf-why__beat { padding: clamp(16px, 1.9vw, 22px) 0; border-top: 1px solid rgba(7,37,118,0.16); }
.nf-why__beat:first-of-type { border-top: 0; }
.nf-why__beatname { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.1; color: var(--nf-navy); margin: 0 0 8px; }
.nf-why__beattext { font-size: var(--text-base); line-height: 1.62; color: var(--nf-navy-800); margin: 0; opacity: 0.86; }
.nf-why__beats-arc { position: absolute; left: 50%; transform: translateX(-50%); bottom: -8%; width: 92%; opacity: 0.45; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0; }
.nf-why__beatslabel, .nf-why__beat { position: relative; z-index: 1; }

/* ── 03 · NORTH FOCUS — outcome + credibility extras (sits on .nf-why) ──── */
.hr-why__outcome { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(17px, 1.8vw, 23px); line-height: 1.42; color: var(--nf-navy); margin: 0; }
.hr-why__cred { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: clamp(22px, 2.6vw, 30px); padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid rgba(7,37,118,0.14); }
.hr-why__credtext { font-size: var(--text-base); line-height: 1.6; color: var(--nf-ink-600); margin: 0; max-width: 44ch; }
.hr-why__credlink { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-coral); white-space: nowrap; }
.hr-why__credlink:hover { color: var(--nf-navy); text-decoration: none; }

/* ── nf-perspective card ─────────────────────────────────────────────────── */
.nf-perspective { position: relative; overflow: hidden; margin: clamp(20px, 2.4vw, 28px) 0 0; background: var(--nf-coral-200); border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve); padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 34px) clamp(26px, 3vw, 32px); display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 15px); }
.nf-perspective__arcs { position: absolute; z-index: 0; pointer-events: none; user-select: none; right: -14%; bottom: -22%; width: 60%; opacity: 0.5; mix-blend-mode: multiply; }
.nf-perspective > *:not(.nf-perspective__arcs) { position: relative; z-index: 1; }
.nf-perspective__mark { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(76px, 8vw, 100px); line-height: 0.66; color: var(--nf-coral); margin: 0 0 -10px -2px; user-select: none; pointer-events: none; }
.nf-perspective__text { margin: 0; font-family: var(--font-body); font-size: var(--text-md); line-height: 1.42; font-weight: 500; color: var(--nf-navy); text-wrap: pretty; max-width: 26ch; }
.nf-perspective__cite { display: flex; flex-direction: column; gap: 2px; }
.nf-perspective__name, .nf-perspective__role { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); line-height: 1.4; }
.nf-perspective__name { color: var(--nf-navy); }
.nf-perspective__role { color: var(--nf-coral-700); }

/* ── nf-ftease (founder teaser points) ──────────────────────────────────── */
.nf-ftease { position: relative; overflow: hidden; }
.nf-ftease__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nf-ftease__point { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: clamp(15px, 1.9vw, 20px) 0; border-top: 1px solid rgba(7,37,118,0.12); font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600); }
.nf-ftease__point:first-child { border-top: 0; }
.nf-ftease__tick { width: 20px; height: 20px; flex: none; margin-top: 4px; position: relative; }
.nf-ftease__tick::before, .nf-ftease__tick::after { content: ""; position: absolute; background: var(--nf-coral); }
.nf-ftease__tick::before { left: 9px; top: 0; width: 2px; height: 20px; }
.nf-ftease__tick::after { top: 9px; left: 0; width: 20px; height: 2px; }
.nf-ftease__caption { display: flex; flex-direction: column; gap: 4px; }
.nf-ftease__cname { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.05; color: var(--nf-navy); }
.nf-ftease__crole { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-ink-400); }

/* ── nf-cred paragraph ───────────────────────────────────────────────────── */
.nf-cred__p { font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink-600); margin: 0; max-width: 48ch; }
.nf-cred__p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── HR_Founder section ──────────────────────────────────────────────────── */
.hr-founder { position: relative; overflow: hidden; }
.hr-founder__grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(40px, 6vw, 80px); align-items: start; margin-top: clamp(24px, 3.4vw, 44px); }
.hr-founder__col { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 20px); }
.hr-founder__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve); background: var(--nf-paper); aspect-ratio: 4/5; }
.hr-founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-founder__body { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
.hr-founder__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; margin-top: clamp(8px, 1.4vw, 16px); padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid rgba(7,37,118,0.14); }
.hr-founder__link { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-coral); white-space: nowrap; }
.hr-founder__link:hover { color: var(--nf-navy); text-decoration: none; }

/* ── nf-close (HR_ClosingCTA) section ───────────────────────────────────── */
.nf-close { position: relative; overflow: hidden; color: var(--nf-white); padding-block: clamp(80px, 12vw, 150px); }
.nf-close__arcs { position: absolute; right: -6%; bottom: -40%; width: clamp(320px, 42%, 680px); opacity: 0.14; pointer-events: none; user-select: none; filter: brightness(0) invert(1); }
.nf-close__curve { position: absolute; left: -4%; top: -16%; width: 30%; opacity: 0.09; pointer-events: none; user-select: none; }
.nf-close .nf-wrap { position: relative; z-index: 1; max-width: 880px; }
.nf-close__inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.6vw, 30px); }
.nf-close__lead { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(32px, 5vw, 66px); line-height: 1.02; color: var(--nf-white); margin: 0; max-width: 16ch; text-wrap: balance; }
.nf-close__lead em { color: var(--nf-coral); font-style: normal; }
.nf-close__sub { font-size: var(--text-md); line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0; max-width: 46ch; }
.nf-close__actions { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; margin-top: 8px; }
.nf-close__meta { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-navy-400); }

/* ── v4 responsive additions ─────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hr-scaling__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
  .hr-effort__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .hr-effort__chain { position: static; }
  .nf-why__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hr-founder__grid { grid-template-columns: 1fr; }
  .hr-founder__media { aspect-ratio: 3/2; max-height: 360px; }
}
@media (max-width: 600px) {
  .hr-pair { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4 What to Expect — the engagement, step by step
   Reuses the How-We-Work hero (.nf-hww-hero), the relief bridge (.nf-hww-bridge)
   and the "leave you stronger" pink band (.nf-hww-stronger), plus new nf-wte-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero (navy + routing curve, large) ── */
.nf-hww-hero { position: relative; overflow: hidden; color: var(--nf-white); padding-block: clamp(84px, 12vw, 156px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nf-hww-hero__curve { position: absolute; top: -10%; right: -6%; width: clamp(360px, 50%, 760px); opacity: 0.2; pointer-events: none; user-select: none; }
.nf-hww-hero__inner { position: relative; z-index: 1; max-width: 940px; display: flex; flex-direction: column; }
.nf-hww-hero__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(40px, 6.4vw, 94px); line-height: 0.98; color: var(--nf-white); margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 16ch; text-wrap: balance; }
.nf-hww-hero__title .nf-accent { color: var(--nf-coral); }
.nf-hww-hero__lead { font-size: var(--text-md); line-height: 1.72; color: rgba(255,255,255,0.80); max-width: 52ch; margin: clamp(24px, 3vw, 34px) 0 0; }
.nf-hww-hero__thesis { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(20px, 2.6vw, 34px); line-height: 1.1; color: var(--nf-white); margin: clamp(34px, 4.4vw, 56px) 0 0; }
.nf-hww-hero__thesis .nf-accent { color: var(--nf-coral); }

/* ── Relief-first bridge (slim transition) ── */
.nf-hww-bridge { padding-block: clamp(40px, 6vw, 78px); }
.nf-hww-bridge .nf-wrap { border-left: var(--border-width-rule) solid var(--nf-coral); padding-left: clamp(22px, 3vw, 44px); }
.nf-hww-bridge__quote { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(21px, 2.7vw, 34px); line-height: 1.24; color: var(--nf-navy); margin: 0; max-width: 30ch; text-wrap: balance; }
.nf-hww-bridge__quote em { color: var(--nf-coral); font-style: normal; }

/* ── "Leave you stronger" pink band ── */
.nf-hww-stronger { position: relative; overflow: hidden; }
.nf-hww-stronger__arcs { position: absolute; left: -10%; bottom: -36%; width: clamp(280px, 38%, 560px); opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0; }
.nf-hww-stronger__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.nf-hww-stronger__head { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 124px; }
.nf-hww-stronger__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(30px, 4vw, 54px); line-height: 1.04; color: var(--nf-navy); margin: 0; max-width: 14ch; text-wrap: balance; }
.nf-hww-stronger__title em { color: var(--nf-coral); font-style: normal; }
.nf-hww-stronger__body { display: flex; flex-direction: column; gap: 22px; max-width: 48ch; padding-top: 6px; }
.nf-hww-stronger__body p { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; }
.nf-hww-stronger__body p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── Intro link under the short-version bridge ── */
.nf-wte-introlink { font-size: var(--text-sm); line-height: 1.6; color: var(--nf-ink-400); margin: clamp(16px, 1.8vw, 22px) 0 0; }
.nf-wte-introlink strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.nf-wte-introlink a { color: var(--nf-coral); font-weight: var(--fw-semibold); }
.nf-wte-introlink a:hover { color: var(--nf-navy); }

/* ── Step rhythm — sticky head + body column (paper stages) ── */
.nf-wte-step__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.nf-wte-step__head { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 124px; }
.nf-wte-step__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; color: var(--nf-navy); margin: 0; max-width: 15ch; text-wrap: balance; }
.nf-wte-step__title em { color: var(--nf-coral); font-style: normal; }
.nf-wte-step__body { display: flex; flex-direction: column; gap: 22px; max-width: 50ch; padding-top: 6px; }
.nf-wte-step__body p { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; }
.nf-wte-step__body p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── "You're left with" — tangible result closing each step ── */
.nf-wte-outcome { display: flex; align-items: baseline; gap: clamp(12px, 1.5vw, 18px); margin-top: clamp(8px, 1vw, 12px); padding-top: clamp(18px, 2vw, 24px); border-top: var(--border-width-rule) solid var(--nf-coral); }
.nf-wte-outcome__lbl { flex: none; font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-coral); line-height: 1.7; }
.nf-wte-outcome__text { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.34; color: var(--nf-navy); margin: 0; text-wrap: pretty; }

/* ── The two questions — coral wash card ── */
.nf-wte-questions { background: var(--nf-coral-200); border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve); padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; }
.nf-wte-q { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: baseline; padding: clamp(16px, 2vw, 22px) 0; border-top: 1px solid rgba(7, 37, 118, 0.16); }
.nf-wte-q:first-child { border-top: 0; padding-top: 4px; }
.nf-wte-q__n { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--nf-coral-700); line-height: 1.2; }
.nf-wte-q__text { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(18px, 2vw, 27px); line-height: 1.12; color: var(--nf-navy); margin: 0; text-wrap: balance; }
.nf-wte-questions__note { font-size: var(--text-base); line-height: 1.6; color: var(--nf-navy-800); margin: clamp(16px, 2vw, 22px) 0 0; opacity: 0.88; padding-top: clamp(14px, 1.6vw, 18px); border-top: 1px solid rgba(7, 37, 118, 0.16); }

/* ── What tends to improve — quiet chips ── */
.nf-wte-improves { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 14px); margin: 2px 0; }
.nf-wte-improves span { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs); color: var(--nf-navy); background: var(--nf-white); border: 1px solid var(--nf-line); border-radius: var(--radius-md); padding: 11px 17px; line-height: 1; }

/* ── Decision point — standalone navy beat ── */
.nf-wte-decide { position: relative; overflow: hidden; color: var(--nf-white); padding-block: clamp(76px, 11vw, 130px); }
.nf-wte-decide__curve { position: absolute; right: -6%; top: -14%; width: clamp(320px, 42%, 660px); opacity: 0.12; pointer-events: none; user-select: none; }
.nf-wte-decide .nf-wrap { position: relative; z-index: 1; max-width: 1000px; }
.nf-wte-decide__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(30px, 4.4vw, 60px); line-height: 1.03; color: var(--nf-white); margin: clamp(18px, 2vw, 26px) 0 0; max-width: 18ch; text-wrap: balance; }
.nf-wte-decide__title em { color: var(--nf-coral); font-style: normal; }
.nf-wte-decide__body { font-size: var(--text-md); line-height: 1.72; color: rgba(255, 255, 255, 0.80); margin: clamp(22px, 2.6vw, 30px) 0 0; max-width: 52ch; }
.nf-wte-decide__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin: clamp(36px, 5vw, 58px) 0 0; }
.nf-wte-opt { border-top: var(--border-width-rule) solid var(--nf-coral); padding-top: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 9px; }
.nf-wte-opt__name { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.1; color: var(--nf-white); }
.nf-wte-opt__text { font-size: var(--text-base); line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0; }
.nf-wte-decide__close { margin: clamp(34px, 4.4vw, 54px) 0 0; padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid rgba(255, 255, 255, 0.16); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(18px, 2.1vw, 28px); line-height: 1.3; color: var(--nf-white); max-width: 32ch; text-wrap: balance; }
.nf-wte-decide__close em { color: var(--nf-coral); font-style: normal; }

/* ── Journey ledger — the whole thing at a glance ── */
.nf-wte-journey { display: flex; flex-direction: column; border-left: 2px solid rgba(7, 37, 118, 0.14); margin-top: clamp(34px, 5vw, 54px); }
.nf-wte-jrow { position: relative; display: grid; grid-template-columns: minmax(0, 19ch) 1fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px) clamp(26px, 3vw, 42px); }
.nf-wte-jrow::before { content: ""; position: absolute; left: -6px; top: 1.05em; width: 10px; height: 10px; border-radius: 50%; background: var(--nf-paper); border: 2px solid rgba(7, 37, 118, 0.34); }
.nf-wte-jrow--mark::before { background: var(--nf-coral); border-color: var(--nf-coral); box-shadow: 0 0 0 4px var(--nf-coral-200); }
.nf-wte-jrow--opt::before { border-style: dashed; }
.nf-wte-jrow--end::before { background: var(--nf-navy); border-color: var(--nf-navy); }
.nf-wte-jrow__stage { font-family: var(--font-display); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: clamp(14px, 1.5vw, 18px); line-height: 1.2; color: var(--nf-navy); }
.nf-wte-jrow--opt .nf-wte-jrow__stage { color: var(--nf-ink-400); }
.nf-wte-jrow--mark .nf-wte-jrow__stage { color: var(--nf-coral); }
.nf-wte-jrow__desc { font-size: var(--text-base); line-height: 1.55; color: var(--nf-ink-600); margin: 0; }

/* ── Compact contact (calm, advisory) ── */
.nf-contact--calm .nf-contact__grid { grid-template-columns: 0.8fr 1.2fr; }
.nf-contact--calm .nf-contact__formwrap { box-shadow: none; }

/* ── What to Expect — responsive ── */
@media (max-width: 920px) {
  .nf-hww-stronger__grid { grid-template-columns: 1fr; }
  .nf-hww-stronger__head { position: static; }
  .nf-wte-step__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .nf-wte-step__head { position: static; }
  .nf-wte-decide__options { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 26px); }
  .nf-wte-jrow { grid-template-columns: 1fr; gap: 6px; }
}

/* Homepage handoff parity overrides. Generated from v4 handoff CSS so dist/index.html uses the same cascade as the prototype. */

/* North Focus website — "space with structure".
   Warm paper + blueprint grid, coral eyebrows, thin structural hairlines,
   numbered markers, colour as accent. Built on DS tokens. */

/* ── Base ── */
.nf-site {
  font-family: var(--font-body);
  color: var(--nf-ink);
  background-color: var(--nf-paper);
  background-image:
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 112px 112px;
}
.nf-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(24px, 5vw, 64px); }

/* ── Header ── */
.nf-site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(24px, 5vw, 64px);
  background: rgba(224,224,224,0.88);
  backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-site-header__brand { display: inline-flex; }
.nf-site-nav { display: flex; gap: clamp(20px, 2.2vw, 36px); }
.nf-site-nav__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-600);
  position: relative; transition: color 0.15s;
}
.nf-site-nav__link:hover { color: var(--nf-navy); text-decoration: none; }
.nf-site-nav__link--active { color: var(--nf-navy); }
.nf-site-nav__link--active::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--nf-coral); border-radius: 1px;
}

/* ── Section scaffolding ── */
.nf-sec { padding-block: clamp(72px, 11vw, 132px); }
.nf-sec__marker {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.nf-sec__ix {
  flex: none; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--nf-coral);
}
.nf-sec__rule { flex: 1; height: 1px; background: rgba(7,37,118,0.14); }
.nf-section-head { max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.nf-section-title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4vw, 52px); line-height: 1.06; color: var(--nf-navy); margin: 0;
}
.nf-section-sub { font-size: var(--text-md); line-height: 1.65; color: var(--nf-ink-600); max-width: 34em; margin: 0; }
.nf-accent { color: var(--nf-coral); }

/* ── Hero ── */
.nf-hero { padding-block: clamp(64px, 9vw, 104px) clamp(56px, 8vw, 96px); }
.nf-hero__grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(40px, 6vw, 72px); align-items: center;
}
.nf-hero__text { display: flex; flex-direction: column; gap: 26px; }
.nf-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(48px, 7vw, 92px); line-height: 0.98; color: var(--nf-navy); margin: 0;
}
.nf-hero__lead { font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600); max-width: 30em; margin: 0; }
.nf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.nf-hero__panel {
  background-color: var(--nf-navy); color: var(--nf-white);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  min-height: 400px; padding: 44px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.nf-hero__curve {
  position: absolute; top: -8px; right: -8px;
  width: 62%; opacity: 0.16; pointer-events: none; user-select: none;
}
.nf-hero__panelmark { opacity: 0.96; }
.nf-hero__statement { display: flex; flex-direction: column; gap: 6px; }
.nf-hero__you, .nf-hero__we {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1;
}
.nf-hero__you { color: var(--nf-coral); }
.nf-hero__we  { color: var(--nf-white); }

/* ── Recognition ("You feel it when…") — the one navy homepage moment ── */
.nf-recognition {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(72px, 11vw, 120px);
}
.nf-recognition__curve {
  position: absolute; top: -8%; right: -4%;
  width: 38%; opacity: 0.10; pointer-events: none; user-select: none;
}
.nf-recognition__inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px); align-items: center;
}
.nf-recognition__left { display: flex; flex-direction: column; gap: 24px; }
.nf-recognition__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(40px, 5.5vw, 72px); line-height: 1.0; color: var(--nf-white); margin: 0;
}
.nf-recognition__close {
  font-size: var(--text-md); line-height: 1.65;
  color: rgba(255,255,255,0.72); max-width: 30ch; margin: 0;
}
.nf-recognition__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); display: inline-block;
}
.nf-recognition__link:hover { color: var(--nf-white); text-decoration: none; }
.nf-recognition__right { display: flex; flex-direction: column; }
.nf-recognition__list { list-style: none; padding: 0; margin: 0; }
.nf-recognition__item {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(14px, 2vw, 20px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(14px, 1.5vw, 19px); line-height: 1.3; color: rgba(255,255,255,0.90);
}
.nf-recognition__item:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
.nf-recognition__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }

/* ── What We Do (short positioning) ── */
.nf-whatwedo__grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 7vw, 100px); align-items: start;
}
.nf-whatwedo__head { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 120px; }
.nf-whatwedo__body { display: flex; flex-direction: column; }
.nf-whatwedo__line {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.8vw, 22px); line-height: 1.45; color: var(--nf-ink);
  margin: 0; padding: clamp(16px, 2vw, 22px) 0; border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-whatwedo__line:first-child { border-top: 1px solid rgba(7,37,118,0.10); }
.nf-whatwedo__line--accent { color: var(--nf-navy); font-weight: var(--fw-extrabold); }
.nf-whatwedo__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral);
}
.nf-whatwedo__more:hover { color: var(--nf-navy); text-decoration: none; }

/* ── Flow / Steps ── */
.nf-flow { position: relative; margin-top: 4px; }
.nf-flow::before {
  content: ""; position: absolute; left: 27px; top: 36px; bottom: 36px;
  width: 2px; background: var(--nf-navy); opacity: 0.16;
}
.nf-step {
  display: grid; grid-template-columns: 56px 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: start; padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-step:first-child { border-top: 0; }
.nf-step__node {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--nf-navy); color: var(--nf-white);
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: var(--text-lg); letter-spacing: 0;
}
.nf-step__body { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(16px, 3vw, 40px); align-items: baseline; }
.nf-step__t {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-xl); line-height: 1.1; color: var(--nf-navy); margin: 0;
}
.nf-step__b { font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600); margin: 0; }
.nf-flow__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px); flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-flow__ctatext { font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600); margin: 0; max-width: 34em; }

/* ── What Changes (before → after shift) ── */
.nf-shift { margin-top: clamp(36px, 5vw, 60px); }
.nf-shift__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(14px, 2vw, 26px); padding: clamp(15px, 1.8vw, 20px) 0;
  border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-shift__row:first-child { border-top: 0; }
.nf-shift__before, .nf-shift__after {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.2;
}
.nf-shift__before { color: var(--nf-ink-400); text-align: right; }
.nf-shift__after  { color: var(--nf-navy); }
.nf-shift__arrow {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nf-coral-200); color: var(--nf-navy);
}
.nf-shift__arrow svg { width: 16px; height: 16px; }

/* ── Founder teaser (homepage) ── */
.nf-founder-teaser__grid {
  display: grid; grid-template-columns: 0.65fr 1.35fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.nf-founder-teaser__media {
  overflow: hidden; border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-paper); aspect-ratio: 3/4;
}
.nf-founder-teaser__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nf-founder-teaser__col { display: flex; flex-direction: column; gap: 20px; }
.nf-founder-teaser__body {
  font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); max-width: 38em; margin: 0;
}
.nf-founder-teaser__actions { margin-top: 8px; }

/* ── 3-card positioning (shared) ── */
.nf-pos__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px); margin-top: clamp(34px, 5vw, 56px);
}
.nf-pos__card {
  border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
}
.nf-pos__card--them { background: var(--nf-white); border: 1px solid var(--nf-line); }
.nf-pos__card--us   { background: var(--nf-navy); color: var(--nf-white); }
.nf-pos__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs);
}
.nf-pos__card--them .nf-pos__label { color: var(--nf-ink-400); }
.nf-pos__card--us   .nf-pos__label { color: var(--nf-coral); }
.nf-pos__line {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-lg); line-height: 1.12; margin: 0; overflow-wrap: anywhere;
}
.nf-pos__card--them .nf-pos__line { color: var(--nf-ink); }
.nf-pos__card--us   .nf-pos__line { color: var(--nf-white); }
.nf-pos__note { font-size: var(--text-base); line-height: 1.6; margin: 0; }
.nf-pos__card--them .nf-pos__note { color: var(--nf-ink-600); }
.nf-pos__card--us   .nf-pos__note { color: rgba(255,255,255,0.82); }

/* ── About photo + bio (shared) ── */
.nf-about__grid {
  display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 6vw, 80px); align-items: start;
}
.nf-about__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-paper); aspect-ratio: 4/5;
}
.nf-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-about__col { display: flex; flex-direction: column; gap: 20px; }
.nf-about__body { font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); margin: 0; max-width: 36em; }
.nf-about__pullquote { margin: 8px 0 4px; padding-left: 26px; border-left: var(--border-width-rule) solid var(--nf-coral); }
.nf-about__pq-text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-lg); line-height: 1.25; color: var(--nf-navy); margin: 0;
}
.nf-about__actions { margin-top: 8px; }

/* ── Founder bio (about page) — long-form readability ── */
.nf-about__grid--founder { align-items: stretch; }
.nf-about__left {
  display: flex; flex-direction: column;
  justify-content: flex-start; gap: clamp(28px, 3vw, 40px);
}
.nf-about__rotlabel {
  position: absolute; left: 14px; bottom: 18px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(7,37,118,0.45); pointer-events: none;
}
.nf-founder .nf-about__col { gap: clamp(22px, 2.6vw, 30px); }
.nf-about__lead {
  font-size: clamp(20px, 1.5vw, 23px); line-height: 1.6; color: var(--nf-ink);
  max-width: 34em; margin: 0; text-wrap: pretty;
}
.nf-founder .nf-about__body { text-wrap: pretty; }
.nf-about__beyond {
  margin-top: clamp(16px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 12px; max-width: 60ch;
}
.nf-about__beyond p { font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600); margin: 0; }

/* Founder quote — oversized mark (treatment 02), under the portrait */
.fq { margin: 0; }
.fq__text {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  color: var(--nf-navy); margin: 0;
}
.fq--mark { position: relative; padding-top: clamp(56px, 7vw, 104px); }
.fq--mark .fq__mark {
  position: absolute; top: clamp(-8px, -0.4vw, 0px); left: -6px; z-index: 0;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(140px, 16vw, 230px); line-height: 0.8; color: var(--nf-coral-200);
  pointer-events: none; user-select: none;
}
.fq--mark .fq__text {
  position: relative; z-index: 1;
  font-size: clamp(22px, 2.5vw, 36px); line-height: 1.16; max-width: 16ch;
  padding-left: clamp(40px, 5.5vw, 96px);
}

/* Founder quote — layered on accent card */
.fq--card {
  background: var(--nf-coral-200); border: 0;
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(32px, 4vw, 52px);
  position: relative; overflow: hidden;
}
.fq--card .fq__mark {
  position: absolute; top: clamp(14px, 2vw, 34px); left: clamp(28px, 4vw, 52px); z-index: 0;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(170px, 20vw, 280px); line-height: 0.8; color: var(--nf-coral);
  opacity: 0.24; pointer-events: none; user-select: none;
}
.fq--card .fq__text {
  position: relative; z-index: 1;
  font-size: clamp(24px, 2.7vw, 40px); line-height: 1.14; max-width: 15ch;
  margin-top: clamp(58px, 7vw, 104px);
}
/* Calm-arcs texture variant */
.fq__arcs {
  position: absolute; z-index: 0; pointer-events: none;
  right: -12%; bottom: -16%; width: 58%;
  aspect-ratio: 1 / 1;
  background: url("../assets/brand/arcs-pink.png") no-repeat center bottom / contain;
  opacity: 0.42; mix-blend-mode: multiply;
}
.fq--arcs .fq__mark { opacity: 0.22; }

/* ── Quotation — reusable, restrained pull-quote for third-party validation ──
   A design-system citizen: oversized coral mark, hairline rulework for clear
   separation from surrounding details, navy editorial text (not body copy),
   coral-ticked attribution. Calm by default; drop it anywhere a quote needs to
   read as independent endorsement. */
.nf-quote {
  position: relative;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(7,37,118,0.14);
  display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 18px);
}
.nf-quote__mark {
  position: absolute; top: clamp(-8px, -0.4vw, 0px); left: -6px; z-index: 0;
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(100px, 11vw, 150px); line-height: 0.8;
  color: var(--nf-coral); opacity: 0.18;
  pointer-events: none; user-select: none;
}
.nf-quote__text {
  position: relative; z-index: 1; margin: clamp(34px, 4.2vw, 54px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5;
  color: var(--nf-navy); text-wrap: pretty; max-width: 30ch;
}
.nf-quote__cite {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  position: relative; padding-left: 34px;
}
.nf-quote__cite::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 22px; height: 2px; background: var(--nf-coral);
}
.nf-quote__citename,
.nf-quote__citerole {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); line-height: 1.4;
}
.nf-quote__citename { color: var(--nf-navy); }
.nf-quote__citerole { color: var(--nf-ink-400); }

/* ── External perspective — coral wash card beneath the founder ──
   The brand's coral-200 "calm arcs" wash with a single signature sweep corner.
   An oversized coral mark opens it, the line reads in calm navy, the attribution
   is crisp, and the calm-arcs motif is layered in behind — chaos settling into
   order. A warm, intentional endorsement that earns trust without shouting. */
.nf-perspective {
  position: relative; overflow: hidden;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  background: var(--nf-coral-200);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(22px, 2.6vw, 30px) clamp(26px, 3vw, 34px) clamp(26px, 3vw, 32px);
  display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 15px);
}
.nf-perspective__arcs {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: -14%; bottom: -22%; width: 60%; opacity: 0.5; mix-blend-mode: multiply;
}
.nf-perspective > *:not(.nf-perspective__arcs) { position: relative; z-index: 1; }
.nf-perspective__mark {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(76px, 8vw, 100px); line-height: 0.66; color: var(--nf-coral);
  margin: 0 0 -10px -2px; user-select: none; pointer-events: none;
}
.nf-perspective__text {
  margin: 0; font-family: var(--font-body);
  font-size: var(--text-md); line-height: 1.42; font-weight: 500;
  color: var(--nf-navy); text-wrap: pretty; max-width: 26ch;
}
.nf-perspective__cite {
  display: flex; flex-direction: column; gap: 2px;
}
.nf-perspective__name,
.nf-perspective__role {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); line-height: 1.4;
}
.nf-perspective__name { color: var(--nf-navy); }
.nf-perspective__role { color: var(--nf-coral-700); }

/* ── Contact form ── */
.nf-contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.nf-contact__intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; position: sticky; top: 120px; }
.nf-contact__formwrap {
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-sm);
}
.nf-contact__form { display: flex; flex-direction: column; gap: 22px; }
.nf-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.nf-field-shell { display: flex; flex-direction: column; gap: 8px; }
.nf-field-shell__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy);
}
.nf-contact__success { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 16px 4px; }
.nf-contact__checkmark {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--nf-coral-200); color: var(--nf-navy); display: grid; place-items: center;
}
.nf-contact__checkmark svg { width: 28px; height: 28px; }
.nf-contact__successtitle {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-xl); color: var(--nf-navy);
}
.nf-contact__successbody { font-size: var(--text-base); color: var(--nf-ink-600); line-height: 1.6; }

/* ── Footer ── */
.nf-site-footer { background: var(--nf-navy); color: var(--nf-white); padding: 72px clamp(24px, 5vw, 64px) 30px; }
.nf-site-footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
  max-width: 1180px; margin-inline: auto;
}
.nf-site-footer__tag {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-md); margin-top: 22px; color: var(--nf-white); max-width: 16em;
}
.nf-site-footer__support { color: var(--nf-coral); margin-top: 10px; font-size: var(--text-sm); }
.nf-site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.nf-site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.nf-site-footer__h {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy-400); margin-bottom: 4px;
}
.nf-site-footer__link { color: rgba(255,255,255,0.82); font-size: var(--text-sm); }
.nf-site-footer__link:hover { color: var(--nf-coral); text-decoration: none; }
.nf-site-footer__base {
  display: flex; justify-content: space-between; max-width: 1180px;
  margin: 48px auto 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14);
  font-size: var(--text-xs); color: var(--nf-navy-400);
}

/* ── Belief (navy statement band — used on supporting pages) ── */
.nf-belief {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(76px, 11vw, 132px);
}
.nf-belief__curve {
  position: absolute; top: -10%; right: -5%;
  width: 44%; opacity: 0.12; pointer-events: none; user-select: none;
}
.nf-belief .nf-wrap { position: relative; }
.nf-belief__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(32px, 4.6vw, 62px); line-height: 1.03; color: var(--nf-white);
  margin: 22px 0 0; max-width: 15ch;
}
.nf-belief__sub { font-size: var(--text-md); line-height: 1.7; color: rgba(255,255,255,0.78); max-width: 46ch; margin: 24px 0 0; }
.nf-belief__close {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-lg); line-height: 1.4; color: var(--nf-white); margin: 38px 0 0; max-width: 28ch;
}

/* ── Page hero (supporting pages) ── */
.nf-page-hero {
  padding-block: clamp(72px, 11vw, 140px);
  border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-page-hero__inner {
  display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); max-width: 860px;
}
.nf-page-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(36px, 5.5vw, 72px); line-height: 1.0; color: var(--nf-navy); margin: 0;
}
.nf-page-hero__desc {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600); max-width: 46ch; margin: 0;
}

/* ── Symptom categories (Problems page) ── */
.nf-symptoms-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.5vw, 28px);
}
/* Surface, index number and title come from the DS <Card> component (.nf-card).
   These cards only need their inner list styled. */
.nf-symptom-card { padding: clamp(26px, 3vw, 38px); }
.nf-symptom-card .nf-card__title { color: var(--nf-navy); }
.nf-symptom-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nf-symptom-card__item {
  font-size: var(--text-base); line-height: 1.5; color: var(--nf-ink-600);
  display: flex; align-items: flex-start; gap: 10px;
}
.nf-symptom-card__item::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--nf-coral); flex: none; margin-top: 8px;
}

/* ── Scale signals ("When this appears" on Problems page) — editorial ledger ── */
.nf-scale-section__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 7vw, 100px); align-items: start;
}
.nf-scale-signals { display: flex; flex-direction: column; }
.nf-scale-signal {
  display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 18px;
  padding: clamp(13px, 1.6vw, 16px) 0; border-bottom: 1px solid rgba(7,37,118,0.10);
}
.nf-scale-signal:first-child { border-top: 1px solid rgba(7,37,118,0.10); }
.nf-scale-signal__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); color: var(--nf-ink-400); letter-spacing: var(--tracking-wide);
}
.nf-scale-signal__text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.2;
}
.nf-scale-signal__pre  { color: var(--nf-ink-400); }
.nf-scale-signal__noun { color: var(--nf-navy); }
.nf-scale-signal--result { border-bottom: none; padding-top: clamp(16px, 2vw, 20px); }
.nf-scale-signal--result .nf-scale-signal__n,
.nf-scale-signal--result .nf-scale-signal__pre { color: var(--nf-coral); }
.nf-scale-signal--result .nf-scale-signal__noun { color: var(--nf-coral); font-weight: var(--fw-extrabold); }

/* ════ PROBLEMS PAGE — recognition rebuild ════════════════════════ */

/* ── Cascade (Growth creates complexity → friction → symptoms) ── */
.nf-cascade { display: flex; flex-direction: column; gap: clamp(6px, 1vw, 14px); }
.nf-cascade__line {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(27px, 4.4vw, 58px); line-height: 1.0; color: var(--nf-navy);
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em;
  white-space: nowrap;
}
.nf-cascade__line--2 { padding-left: clamp(14px, 3vw, 52px); }
.nf-cascade__line--3 { padding-left: clamp(28px, 6vw, 104px); }
.nf-cascade__verb {
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label);
  font-size: 0.42em; color: var(--nf-ink-400); transform: translateY(-0.18em);
}
.nf-cascade__key { color: var(--nf-coral); }
.nf-cascade__close {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600);
  max-width: 40ch; margin: clamp(34px, 5vw, 52px) 0 0;
}

/* ── Signals (the mirror — felt statements as overheard quotes) ── */
.nf-signals { margin-top: clamp(36px, 5vw, 60px); }
.nf-signal {
  position: relative; display: grid; grid-template-columns: 2.4em 1fr;
  gap: clamp(14px, 2.2vw, 30px); align-items: start;
  padding: clamp(20px, 2.7vw, 32px) clamp(14px, 2vw, 26px) clamp(20px, 2.7vw, 32px) 0;
  border-bottom: 1px solid rgba(7,37,118,0.12);
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.nf-signals .nf-signal:first-child { border-top: 1px solid rgba(7,37,118,0.12); }
.nf-signal::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px;
  background: var(--nf-coral); transform: scaleY(0); transform-origin: top;
  transition: transform 0.24s ease;
}
.nf-signal:hover { background: var(--nf-coral-100, rgba(235,144,130,0.08)); padding-left: clamp(14px, 2vw, 26px); }
.nf-signal:hover::before { transform: scaleY(1); }
.nf-signal:hover .nf-signal__n { color: var(--nf-coral); }
.nf-signal__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--nf-ink-400);
  padding-top: 0.55em; transition: color 0.2s ease;
}
.nf-signal__quote {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(20px, 2.5vw, 33px); line-height: 1.16; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.nf-signal__quote q { quotes: '\2018' '\2019'; }
.nf-signal__quote q::before { color: var(--nf-coral); }
.nf-signal__quote q::after  { color: var(--nf-coral); }
.nf-signals__note {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600);
  max-width: 52ch; margin: clamp(30px, 4vw, 44px) 0 0;
}
.nf-signals__note strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── Start with what you can see (relief close on navy) ── */
.nf-start { position: relative; overflow: hidden; }
.nf-start__arcs {
  position: absolute; right: -6%; bottom: -22%; width: clamp(280px, 38%, 560px);
  opacity: 0.16; pointer-events: none; user-select: none;
}
.nf-start .nf-wrap { position: relative; }
.nf-start__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 6vw, 88px); align-items: end;
}
.nf-start__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(32px, 4.6vw, 60px); line-height: 1.02; color: var(--nf-white);
  margin: 0; max-width: 16ch;
}
.nf-start__col { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px); }
.nf-start__body { font-size: var(--text-md); line-height: 1.75; color: rgba(255,255,255,0.80); margin: 0; max-width: 44ch; }
.nf-start__body strong { color: var(--nf-white); font-weight: var(--fw-semibold); }
.nf-start__actions { margin-top: 4px; }

@media (max-width: 860px) {
  .nf-start__grid { grid-template-columns: 1fr; align-items: start; }
  .nf-cascade__line { font-size: clamp(24px, 7vw, 40px); white-space: normal; }
  .nf-cascade__line--2 { padding-left: 16px; }
  .nf-cascade__line--3 { padding-left: 32px; }
}

/* ── Sprint list (How We Work) — engineered capability cards ── */
.nf-sprint-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.3vw, 16px);
}
.nf-sprint-item {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(26px, 3.5vw, 40px);
  min-height: clamp(148px, 15vw, 178px);
  padding: clamp(18px, 1.9vw, 24px);
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-radius: var(--radius-md); overflow: hidden;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.nf-sprint-item__top { display: flex; align-items: center; justify-content: space-between; }
.nf-sprint-item__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  color: var(--nf-ink-400); transition: color var(--dur-base) var(--ease-out);
}
.nf-sprint-item__mark {
  width: 22px; height: 22px; color: var(--nf-coral); flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.nf-sprint-item__mark svg { width: 100%; height: 100%; display: block; }
.nf-sprint-item__label {
  margin-top: auto; font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px, 1.35vw, 18px); line-height: 1.18;
  color: var(--nf-navy); text-wrap: balance;
  transition: color var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .nf-sprint-item:hover {
    background: var(--nf-navy); border-color: var(--nf-navy);
    transform: translateY(-2px); box-shadow: var(--shadow-md);
  }
  .nf-sprint-item:hover .nf-sprint-item__label { color: var(--nf-white); }
  .nf-sprint-item:hover .nf-sprint-item__n { color: var(--nf-navy-400); }
  .nf-sprint-item:hover .nf-sprint-item__mark { transform: rotate(90deg); }
}

/* ── Avoids — editorial index with "Instead" alternative (How We Work) ── */
.nf-avoids {
  border-top: var(--border-width-rule) solid var(--nf-navy);
}
.nf-avoid-row {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(22px, 4vw, 56px); align-items: baseline;
  padding: clamp(26px, 3.2vw, 40px) 0;
  border-bottom: 1px solid rgba(7,37,118,0.12);
}
.nf-avoid-row__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(15px, 1.4vw, 18px); letter-spacing: var(--tracking-wide);
  color: var(--nf-coral); line-height: 1; font-variant-numeric: tabular-nums;
  padding-top: 0.32em;
}
.nf-avoid-row__main { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 18px); }
.nf-avoid-row__avoid {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(20px, 2.4vw, 31px); line-height: 1.08;
  color: var(--nf-navy); text-wrap: balance; margin: 0;
}
.nf-avoid-row__instead {
  display: flex; align-items: baseline; gap: clamp(12px, 1.4vw, 16px);
  font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600);
  margin: 0; max-width: 48ch;
}
.nf-avoid-row__lbl {
  flex: none; font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); line-height: 1.7;
}

/* ── Examples grid ── */
.nf-examples-grid { display: flex; flex-direction: column; }
.nf-example-card {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 72px); align-items: start;
  padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-example-card:first-child { border-top: 0; }
.nf-example-card__col { display: flex; flex-direction: column; gap: 14px; }
.nf-example-card__label, .nf-example-card__action-label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); display: flex; align-items: center; gap: 12px;
}
.nf-example-card__label { color: var(--nf-coral); }
.nf-example-card__label::before       { content: ''; width: 22px; height: 2px; background: var(--nf-coral); flex: none; }
.nf-example-card__action-label { color: var(--nf-ink-400); }
.nf-example-card__action-label::before { content: ''; width: 22px; height: 1px; background: rgba(7,37,118,0.25); flex: none; }
.nf-example-card__num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(36px, 4.5vw, 56px); line-height: 0.9; color: var(--nf-coral); margin: 0 0 4px;
}
.nf-example-card__problem {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(17px, 1.9vw, 24px); line-height: 1.18; color: var(--nf-navy); margin: 0 0 6px;
  text-wrap: balance;
}
.nf-example-card__text, .nf-example-card__action {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600); margin: 0;
}
.nf-example-card__block { display: flex; flex-direction: column; gap: 8px; }
.nf-example-card__sublabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy);
}
.nf-example-card__sublabel--muted { color: var(--nf-ink-400); }
.nf-example-card__text--muted { color: var(--nf-ink-400); }

/* ── About — extra sections ── */
.nf-about-reason { max-width: 760px; }
.nf-about-reason__body { font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); max-width: 48ch; margin: 0 0 20px; }
.nf-about-reason__body:last-child { margin-bottom: 0; }
.nf-skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.2vw, 14px); }
.nf-skill-item {
  display: flex; align-items: center; gap: 12px;
  padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.8vw, 20px);
  background: var(--nf-white); border: 1px solid rgba(7,37,118,0.10);
  border-radius: var(--radius-md); font-size: var(--text-base); color: var(--nf-ink); line-height: 1.4;
}
.nf-skill-item__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }

/* ── Principles ── */
.nf-principles-list { display: flex; flex-direction: column; }
.nf-principle {
  display: grid; grid-template-columns: clamp(48px, 6vw, 80px) 1fr;
  gap: clamp(24px, 4vw, 60px); align-items: start;
  padding: clamp(44px, 6.5vw, 80px) 0; border-top: 1px solid rgba(7,37,118,0.10);
}
.nf-principle:first-child { border-top: 0; }
.nf-principle__num {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(32px, 4vw, 52px); line-height: 1; color: var(--nf-coral);
}
.nf-principle__content { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.nf-principle__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(20px, 2.5vw, 32px); line-height: 1.1; color: var(--nf-navy); margin: 0;
}
.nf-principle__body { font-size: var(--text-md); line-height: 1.75; color: var(--nf-ink-600); margin: 0; }

/* ── Page CTA (navy ending block on supporting pages) ── */
.nf-page-cta { padding-block: clamp(72px, 11vw, 120px); color: var(--nf-white); }
.nf-page-cta .nf-wrap {
  display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px);
  align-items: flex-start; max-width: 620px;
}
.nf-page-cta__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(26px, 3.5vw, 44px); line-height: 1.06; color: var(--nf-white); margin: 0; max-width: 20ch;
}
.nf-page-cta__sub {
  font-size: var(--text-md); line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0 0 8px; max-width: 40ch;
}

/* ── What We Do — supporting paragraphs (partnership / not-this) ── */
.nf-whatwedo__support {
  font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600);
  margin: clamp(20px, 2.6vw, 28px) 0 0; max-width: 46ch;
}
.nf-whatwedo__support + .nf-whatwedo__support { margin-top: 16px; }

/* ── What Changes — leadership-relief closing line ── */
.nf-shift__foot {
  margin: clamp(30px, 3.8vw, 46px) 0 0; padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(7,37,118,0.10);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.9vw, 23px); line-height: 1.4; color: var(--nf-navy);
  max-width: 42ch; margin-bottom: 0;
}

/* ── Engagement principles (Principles page) ── */
.nf-engage-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px); margin-top: clamp(34px, 5vw, 56px);
}
.nf-engage-card {
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-top: var(--border-width-rule) solid var(--nf-coral);
  border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
}
.nf-engage-card__name {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: var(--text-xl); line-height: 1.1; color: var(--nf-navy);
}
.nf-engage-card__body { font-size: var(--text-base); line-height: 1.65; color: var(--nf-ink-600); margin: 0; }

/* ── How-we-work positioning foot (partnership) ── */
.nf-pos__foot {
  margin: clamp(30px, 4vw, 48px) 0 0; font-size: var(--text-md);
  line-height: 1.7; color: var(--nf-ink-600); max-width: 62ch;
}
.nf-pos__foot strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── Belief note (ideal-fit line on navy band) ── */
.nf-belief__note {
  font-size: var(--text-sm); line-height: 1.6; color: rgba(255,255,255,0.62);
  margin: 24px 0 0; max-width: 46ch;
}

/* ── Responsive ── */
@media (max-width: 920px) {
  .nf-engage-grid { grid-template-columns: 1fr; }
  .nf-site-nav { display: none; }
  .nf-hero__grid, .nf-contact__grid, .nf-about__grid { grid-template-columns: 1fr; }
  .nf-about__left { justify-content: flex-start; }
  .nf-contact__intro { position: static; }
  .nf-step__body { grid-template-columns: 1fr; gap: 10px; }
  .nf-pos__grid { grid-template-columns: 1fr; }
  .nf-recognition__inner { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 48px); }
  .nf-whatwedo__grid { grid-template-columns: 1fr; }
  .nf-whatwedo__head { position: static; }
  .nf-founder-teaser__grid { grid-template-columns: 1fr; }
  .nf-founder-teaser__media { aspect-ratio: 3/2; }
  .nf-symptoms-grid { grid-template-columns: 1fr; }
  .nf-scale-section__grid { grid-template-columns: 1fr; }
  .nf-sprint-list { grid-template-columns: repeat(2, 1fr); }
  .nf-example-card { grid-template-columns: 1fr; }
  .nf-skills-grid { grid-template-columns: 1fr; }
  .nf-shift__row { grid-template-columns: 1fr auto 1fr; }
  .nf-flow__cta { flex-direction: column; align-items: flex-start; }
  .nf-site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .nf-sprint-list { grid-template-columns: 1fr; }
}

/* ============================================================
   v4 — CLIENT-JOURNEY SECTIONS
   Recognition (navy/routing) → Reassurance (calm) → Insight
   (navy/routing) → Why (pink/arcs) → Proof → Founder → CTA
   ============================================================ */

/* ── Reassurance — the calm breath after the symptoms ── */
.nf-reassure { position: relative; overflow: hidden; }
.nf-reassure__inner {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 7vw, 104px); align-items: start; position: relative; z-index: 1;
}
.nf-reassure__head { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 124px; }
.nf-reassure__statement {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(28px, 3.8vw, 50px); line-height: 1.04; color: var(--nf-navy);
  margin: 0; max-width: 15ch; text-wrap: balance;
}
.nf-reassure__statement em { color: var(--nf-coral); font-style: normal; }
.nf-reassure__body { display: flex; flex-direction: column; gap: 22px; max-width: 46ch; padding-top: 6px; }
.nf-reassure__body p { font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink-600); margin: 0; }
.nf-reassure__body p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.nf-reassure__arcs {
  position: absolute; right: -10%; bottom: -34%; width: clamp(280px, 38%, 560px);
  opacity: 0.55; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0;
}

/* ── Core Insight — symptom vs. constraint (navy + routing) ── */
.nf-insight { position: relative; overflow: hidden; color: var(--nf-white); }
.nf-insight__curve {
  position: absolute; left: -6%; bottom: -14%; width: 40%;
  opacity: 0.11; pointer-events: none; user-select: none;
}
.nf-insight .nf-wrap { position: relative; z-index: 1; }
.nf-insight__grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(40px, 7vw, 100px); align-items: start;
}
.nf-insight__head { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 124px; }
.nf-insight__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; color: var(--nf-white);
  margin: 0; max-width: 16ch;
}
.nf-insight__title em { color: var(--nf-coral); font-style: normal; }
.nf-insight__note {
  font-size: var(--text-md); line-height: 1.7; color: rgba(255,255,255,0.72);
  margin: 0; max-width: 38ch;
}
.nf-insight__pairs { display: flex; flex-direction: column; }
.nf-insight__pair {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(14px, 2vw, 28px); padding: clamp(18px, 2.3vw, 26px) 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.nf-insight__pair:first-child { border-top: 0; }
.nf-insight__symptom, .nf-insight__cause {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(15px, 1.55vw, 19px); line-height: 1.3;
}
.nf-insight__symptom { color: rgba(255,255,255,0.62); }
.nf-insight__cause   { color: var(--nf-white); }
.nf-insight__cause strong { color: var(--nf-coral); font-weight: var(--fw-semibold); }
.nf-insight__arrow { flex: none; color: var(--nf-coral); width: 22px; height: 22px; }
.nf-insight__arrow svg { width: 100%; height: 100%; display: block; }
.nf-insight__close {
  grid-column: 1 / -1; margin: clamp(20px, 2.6vw, 32px) 0 0;
  padding-top: clamp(20px, 2.4vw, 28px); border-top: var(--border-width-rule) solid var(--nf-coral);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.9vw, 23px); line-height: 1.4; color: var(--nf-white); max-width: 40ch;
}

/* ── Why North Focus — the differentiator (pink + arcs) ── */
.nf-why { position: relative; overflow: hidden; }
.nf-why__arcs {
  position: absolute; right: -8%; top: -18%; width: clamp(300px, 40%, 620px);
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0;
}
.nf-why .nf-wrap { position: relative; z-index: 1; }
.nf-why__head { max-width: 760px; display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); }
.nf-why__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.04; color: var(--nf-navy);
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.nf-why__title em { color: var(--nf-coral); font-style: normal; }
.nf-why__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.nf-why__prose { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); max-width: 50ch; }
.nf-why__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2vw, 26px); line-height: 1.4; color: var(--nf-navy); margin: 0; text-wrap: pretty;
}
.nf-why__prose p { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; }
.nf-why__prose p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.nf-why__beats {
  background: var(--nf-coral-200); border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  padding: clamp(30px, 3.4vw, 46px); display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.nf-why__beatslabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral-700); margin-bottom: clamp(18px, 2vw, 26px);
}
.nf-why__beat { padding: clamp(16px, 1.9vw, 22px) 0; border-top: 1px solid rgba(7,37,118,0.16); }
.nf-why__beat:first-of-type { border-top: 0; }
.nf-why__beatname {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(17px, 1.8vw, 22px); line-height: 1.1; color: var(--nf-navy); margin: 0 0 8px;
}
.nf-why__beattext { font-size: var(--text-base); line-height: 1.62; color: var(--nf-navy-800); margin: 0; opacity: 0.86; }

/* ── Proof — Pain → Discovery → Improvement (pattern recognition) ── */
.nf-proof__list { display: flex; flex-direction: column; margin-top: clamp(20px, 3vw, 36px); }
.nf-proof__row {
  display: grid; grid-template-columns: clamp(40px, 5vw, 64px) 1fr;
  gap: clamp(20px, 3vw, 44px); align-items: start;
  padding: clamp(32px, 4.2vw, 52px) 0; border-top: 1px solid rgba(7,37,118,0.12);
}
.nf-proof__row:first-child { border-top: 0; }
.nf-proof__n {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(26px, 3vw, 40px); line-height: 0.9; color: var(--nf-coral);
}
.nf-proof__main { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }
.nf-proof__context {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-400);
}
.nf-proof__beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 40px); }
.nf-proof__beat { display: flex; flex-direction: column; gap: 9px; position: relative; }
.nf-proof__beatlabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); display: flex; align-items: center; gap: 10px;
}
.nf-proof__beat--pain .nf-proof__beatlabel { color: var(--nf-ink-400); }
.nf-proof__beat--disc .nf-proof__beatlabel { color: var(--nf-navy); }
.nf-proof__beat--impr .nf-proof__beatlabel { color: var(--nf-coral); }
.nf-proof__beatlabel::before { content: ''; width: 18px; height: 2px; background: currentColor; flex: none; opacity: 0.8; }
.nf-proof__beattext { font-size: var(--text-base); line-height: 1.6; color: var(--nf-ink-600); margin: 0; }
.nf-proof__beat--disc .nf-proof__beattext { color: var(--nf-ink); }
.nf-proof__beat--impr .nf-proof__beattext { color: var(--nf-navy); font-weight: 500; }
.nf-proof__foot {
  margin: clamp(30px, 4vw, 48px) 0 0; padding-top: clamp(24px, 3vw, 34px);
  border-top: var(--border-width-rule) solid var(--nf-navy);
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.nf-proof__foottext {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.8vw, 22px); line-height: 1.4; color: var(--nf-navy); margin: 0; max-width: 40ch;
}
.nf-proof__footlink {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); white-space: nowrap;
}
.nf-proof__footlink:hover { color: var(--nf-navy); text-decoration: none; }

/* ── Examples page — calm-arcs reassurance behind the pattern list ── */
.nf-proof--examples { position: relative; overflow: hidden; padding-top: clamp(56px, 8vw, 96px); }
.nf-proof--examples > .nf-wrap { position: relative; z-index: 1; }
.nf-proof__arcs {
  position: absolute; right: -7%; bottom: -14%;
  width: clamp(340px, 44%, 640px); aspect-ratio: 1 / 1;
  background: url("../assets/brand/arcs-pink.png") no-repeat center bottom / contain;
  opacity: 0.5; mix-blend-mode: multiply;
  pointer-events: none; user-select: none; z-index: 0;
}

/* ── Outcome snapshot — compact quantified result under each example ── */
.nf-snapshot {
  margin-top: clamp(20px, 2.6vw, 32px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(7,37,118,0.12);
}
.nf-snapshot__label {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.nf-snapshot__label::before { content: ''; width: 18px; height: 2px; background: currentColor; flex: none; opacity: 0.8; }
.nf-snapshot__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 40px); }
.nf-snapshot__item {
  display: flex; flex-direction: column; gap: 7px;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 1px solid rgba(7,37,118,0.14);
}
.nf-snapshot__item:first-child { padding-left: 0; border-left: 0; }
.nf-snapshot__metric {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: 1; color: var(--nf-navy);
  font-size: clamp(22px, 2.4vw, 30px);
}
.nf-snapshot__metric em { font-style: normal; color: var(--nf-coral); }
.nf-snapshot__cap {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-600); line-height: 1.4;
}

/* ── Patterns in practice — constraint-led proof on the home page ── */
/* The hidden constraint is the protagonist: large and navy. The surface symptom is
   muted (the chaos), the proof points sit quiet underneath (the calm). */
.nf-pattern__note {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600);
  max-width: 54ch; margin: 4px 0 0;
}
.nf-pattern__list { display: flex; flex-direction: column; margin-top: clamp(28px, 3.6vw, 48px); }
.nf-pattern-row {
  display: grid; grid-template-columns: clamp(190px, 26%, 280px) 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding: clamp(30px, 3.8vw, 50px) 0;
  border-top: 1px solid rgba(7,37,118,0.12);
}
.nf-pattern-row:first-child { border-top: 0; }

/* Left rail — the visible symptom, deliberately quiet */
.nf-pattern__surface { display: flex; flex-direction: column; gap: 12px; }
.nf-pattern__surfacelabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-400);
  display: flex; align-items: center; gap: 10px;
}
.nf-pattern__surfacelabel::before { content: ''; width: 18px; height: 2px; background: currentColor; flex: none; opacity: 0.7; }
.nf-pattern__surfacetext {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.7vw, 20px); line-height: 1.34; color: var(--nf-ink-400);
  margin: 0; max-width: 22ch;
}

/* Right — the constraint leads, then the move, then the supporting proof */
.nf-pattern__body { display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 20px); }
.nf-pattern__constraint {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: 1.08; color: var(--nf-navy);
  font-size: clamp(26px, 3.2vw, 40px); margin: 0; max-width: 24ch; text-wrap: balance;
}
.nf-pattern__constraint em { font-style: normal; color: var(--nf-coral); }
.nf-pattern__move {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600);
  max-width: 60ch; margin: 0;
}
.nf-pattern__proof {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 22px);
}
.nf-pattern__proof li {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(13px, 1.4vw, 15px); color: var(--nf-navy); line-height: 1.4;
  padding-left: clamp(12px, 1.4vw, 18px); border-left: 1px solid rgba(7,37,118,0.18);
}
.nf-pattern__proof li:first-child { padding-left: 0; border-left: 0; }
.nf-pattern__close {
  margin: clamp(30px, 4vw, 48px) 0 0; padding-top: clamp(24px, 3vw, 34px);
  border-top: var(--border-width-rule) solid var(--nf-coral);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(18px, 2.2vw, 28px); line-height: 1.34; color: var(--nf-navy);
  max-width: 30ch; text-wrap: balance;
}
.nf-pattern__close em { font-style: normal; color: var(--nf-coral); }

/* ── Founder teaser v4 — credibility leads, portrait supports (pink + calm arcs) ── */
.nf-ftease { position: relative; overflow: hidden; }
.nf-ftease__arcs {
  position: absolute; right: -8%; top: -22%; width: clamp(300px, 40%, 600px);
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0;
}
.nf-ftease .nf-wrap { position: relative; z-index: 1; }
.nf-ftease__inner {
  display: grid; grid-template-columns: 1.5fr 0.8fr; gap: clamp(36px, 6vw, 88px);
  align-items: center; max-width: 1040px;
}
.nf-ftease__lead { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px); }
.nf-ftease__credtitle {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(26px, 3.2vw, 44px); line-height: 1.04; color: var(--nf-navy);
  margin: 0; max-width: 17ch; text-wrap: balance;
}
.nf-ftease__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nf-ftease__point {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: clamp(15px, 1.9vw, 20px) 0; border-top: 1px solid rgba(7,37,118,0.12);
  font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600);
}
.nf-ftease__point:first-child { border-top: 0; }
.nf-ftease__tick {
  width: 20px; height: 20px; flex: none; margin-top: 4px; position: relative;
}
.nf-ftease__tick::before,
.nf-ftease__tick::after {
  content: ""; position: absolute; background: var(--nf-coral);
}
.nf-ftease__tick::before { left: 9px; top: 0; width: 2px; height: 20px; }
.nf-ftease__tick::after  { top: 9px; left: 0; width: 20px; height: 2px; }
.nf-ftease__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); margin-top: 4px; align-self: flex-start;
}
.nf-ftease__link:hover { color: var(--nf-navy); text-decoration: none; }
.nf-ftease__aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.nf-ftease__media {
  width: 100%; max-width: 300px; aspect-ratio: 4/5; flex: none;
  overflow: hidden; border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve); background: var(--nf-paper);
}
.nf-ftease__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; display: block; filter: grayscale(1) contrast(1.02); }
.nf-ftease__caption { display: flex; flex-direction: column; gap: 4px; }
.nf-ftease__cname {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.05; color: var(--nf-navy);
}
.nf-ftease__crole {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-400);
}

/* ── Problems we solve — operational credibility (navy + routing curve) ── */
.nf-problems {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(72px, 11vw, 128px);
}
.nf-problems__curve {
  position: absolute; left: -5%; bottom: -14%; width: 36%;
  opacity: 0.10; pointer-events: none; user-select: none; transform: rotate(180deg);
}
.nf-problems__inner { position: relative; z-index: 1; }
.nf-problems__head {
  max-width: 720px; display: flex; flex-direction: column; gap: 18px;
  margin-bottom: clamp(40px, 6vw, 68px);
}
.nf-problems__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.02; color: var(--nf-white);
  margin: 0; text-wrap: balance;
}
.nf-problems__title em { color: var(--nf-coral); font-style: normal; }
.nf-problems__sub {
  font-size: var(--text-md); line-height: 1.65; color: rgba(255,255,255,0.74);
  max-width: 56ch; margin: 0;
}
.nf-problems__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.16);
  border-left: 1px solid rgba(255,255,255,0.16);
}
.nf-problems__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.2vw, 32px);
  border-right: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
.nf-problems__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--nf-coral);
}
.nf-problems__name {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.05; color: var(--nf-white); margin: 0;
}
.nf-problems__line {
  font-size: var(--text-base); line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0;
}

/* ── Closing CTA — premium, calm, single action (navy + arcs) ── */
.nf-close { position: relative; overflow: hidden; color: var(--nf-white); padding-block: clamp(80px, 12vw, 150px); }
.nf-close__arcs {
  position: absolute; right: -6%; bottom: -40%; width: clamp(320px, 42%, 680px);
  opacity: 0.14; pointer-events: none; user-select: none;
  filter: brightness(0) invert(1);
}
.nf-close__curve {
  position: absolute; left: -4%; top: -16%; width: 30%; opacity: 0.09;
  pointer-events: none; user-select: none;
}
.nf-close .nf-wrap { position: relative; z-index: 1; max-width: 880px; }
.nf-close__inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(20px, 2.6vw, 30px); }
.nf-close__lead {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(32px, 5vw, 66px); line-height: 1.02; color: var(--nf-white);
  margin: 0; max-width: 16ch; text-wrap: balance;
}
.nf-close__lead em { color: var(--nf-coral); font-style: normal; }
.nf-close__sub { font-size: var(--text-md); line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0; max-width: 46ch; }
.nf-close__actions { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); flex-wrap: wrap; margin-top: 8px; }
.nf-close__meta {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy-400);
}

/* ── Compact contact (calm, advisory — not heavy lead-gen) ── */
.nf-contact--calm .nf-contact__grid { grid-template-columns: 0.8fr 1.2fr; }
.nf-contact--calm .nf-contact__formwrap { box-shadow: none; }

/* ── v4 responsive ── */
@media (max-width: 920px) {
  .nf-reassure__inner,
  .nf-insight__grid,
  .nf-why__grid,
  .nf-ftease__inner { grid-template-columns: 1fr; }
  .nf-reassure__head, .nf-insight__head { position: static; }
  .nf-proof__beats { grid-template-columns: 1fr; gap: 14px; }
  .nf-proof__row { grid-template-columns: 1fr; gap: 16px; }
  .nf-snapshot__items { grid-template-columns: 1fr; gap: 16px; }
  .nf-snapshot__item { padding-left: 0; border-left: 0; }
  .nf-pattern-row { grid-template-columns: 1fr; gap: 14px; }
  .nf-ftease__inner { gap: clamp(28px, 5vw, 44px); }
  .nf-ftease__aside { flex-direction: row; align-items: center; gap: 22px; }
  .nf-ftease__media { width: clamp(120px, 32vw, 168px); max-width: none; }
  .nf-problems__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nf-insight__pair { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .nf-insight__arrow { transform: rotate(90deg); }
  .nf-problems__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v4 — ABOUT (credibility-first; the bio supports, not dominates)
   ============================================================ */

/* Hero — text + portrait anchor */
.nf-abouthero { padding-block: clamp(56px, 8vw, 96px) clamp(44px, 6vw, 76px); }
.nf-abouthero__grid {
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(40px, 6vw, 84px); align-items: center;
}
.nf-abouthero__text { display: flex; flex-direction: column; gap: 22px; }
.nf-abouthero__lead { font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink-600); max-width: 40ch; margin: 0; }
.nf-abouthero__media {
  position: relative; overflow: hidden; aspect-ratio: 4/5;
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-navy);
}
.nf-abouthero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.nf-abouthero__media .nf-about__rotlabel { top: 20px; bottom: auto; left: 16px; }

/* Credibility — why North Focus is qualified (pink-leaning, founder credibility) */
.nf-cred { position: relative; overflow: hidden; }
.nf-cred__arcs {
  position: absolute; left: -8%; bottom: -32%; width: clamp(280px, 36%, 540px);
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; user-select: none;
}
.nf-cred .nf-wrap { position: relative; z-index: 1; }
.nf-cred__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 6vw, 90px); align-items: start;
}
.nf-cred__head { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 124px; }
.nf-cred__body { display: flex; flex-direction: column; gap: 22px; }
.nf-cred__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.45; color: var(--nf-navy); margin: 0; max-width: 44ch; text-wrap: pretty;
}
.nf-cred__p { font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink-600); margin: 0; max-width: 48ch; }
.nf-cred__p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.nf-cred__sublabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); margin-top: clamp(8px, 1.4vw, 16px);
}
.nf-cred .nf-skills-grid { margin-top: 4px; }
.nf-cred .nf-skill-item { border-top: 2px solid var(--nf-coral); }

/* The longer story — locked bio, set quietly as a reading column */
.nf-story { position: relative; }
.nf-story__inner { max-width: 760px; }
.nf-story__col { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.nf-story__lead {
  font-size: clamp(19px, 1.5vw, 22px); line-height: 1.62; color: var(--nf-ink);
  margin: 0; text-wrap: pretty;
}
.nf-story__body { font-size: var(--text-md); line-height: 1.78; color: var(--nf-ink-600); margin: 0; text-wrap: pretty; }
.nf-story__beyond {
  margin-top: clamp(12px, 1.6vw, 20px); padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(7,37,118,0.12);
  display: flex; flex-direction: column; gap: 12px;
}
.nf-story__beyond p { font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600); margin: 0; }
/* coral pull-quote card break inside the story */
.nf-story .fq--card { margin: clamp(8px, 1.4vw, 16px) 0; max-width: 620px; }

@media (max-width: 920px) {
  .nf-abouthero__grid,
  .nf-cred__grid { grid-template-columns: 1fr; }
  .nf-cred__head { position: static; }
  .nf-abouthero__media { aspect-ratio: 3/2; max-height: 380px; }
}

/* Small credibility proof row (replaces skills grid inside cred body) */
.nf-cred__proof {
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(10px, 1.4vw, 18px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(7,37,118,0.14);
}
.nf-cred__proofitem { display: flex; flex-direction: column; gap: 6px; }
.nf-cred__proofval {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--nf-navy);
}
.nf-cred__prooflabel {
  font-size: var(--text-sm); line-height: 1.45; color: var(--nf-ink-600); max-width: 22ch;
}

/* ── Fluent across the whole problem — connected domains (the seams) ── */
.nf-fluent { position: relative; overflow: hidden; }
.nf-fluent__route {
  position: absolute; top: clamp(-40px, -3vw, -10px); right: clamp(-60px, -4vw, -20px);
  width: clamp(260px, 30vw, 460px); height: auto; color: var(--nf-navy);
  opacity: 0.12; pointer-events: none; user-select: none;
}
.nf-fluent .nf-wrap { position: relative; z-index: 1; }
.nf-fluent__head { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.nf-fluent__lead {
  font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink-600);
  margin: 6px 0 0; max-width: 56ch; text-wrap: pretty;
}

/* Product thinking — elevated as the starting lens */
.nf-fluent__lens {
  margin-top: clamp(30px, 4vw, 50px);
  display: grid; grid-template-columns: minmax(220px, 0.78fr) 1.22fr;
  align-items: center; gap: clamp(22px, 4vw, 56px);
  background: var(--nf-coral-200);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(28px, 3.4vw, 46px) clamp(30px, 3.6vw, 52px);
}
.nf-fluent__lenshead { display: flex; flex-direction: column; gap: 12px; }
.nf-fluent__lenstag {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral-700);
  display: inline-flex; align-items: center; gap: 10px;
}
.nf-fluent__lenstag::before { content: ""; width: 22px; height: 2px; background: var(--nf-coral); }
.nf-fluent__lenstitle {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(26px, 3.1vw, 40px); line-height: 1.02; color: var(--nf-navy); margin: 0;
}
.nf-fluent__lenstext {
  font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink); margin: 0;
  max-width: 50ch; text-wrap: pretty;
}

/* the connected-domain seams */
.nf-fluent__seamlabel {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-ink-400);
  margin: clamp(34px, 4.4vw, 56px) 0 clamp(4px, 1vw, 12px);
}
.nf-fluent__seams { display: flex; flex-direction: column; }
.nf-seam {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  column-gap: clamp(18px, 3vw, 48px);
  padding-block: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid var(--nf-line);
}
.nf-seam:last-child { border-bottom: 1px solid var(--nf-line); }
.nf-seam__domain {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(15px, 1.55vw, 20px); line-height: 1.15; color: var(--nf-navy);
}
.nf-seam__domain--l { text-align: right; }
.nf-seam__domain--r { text-align: left; }
.nf-seam__link {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: clamp(150px, 19vw, 250px);
}
.nf-seam__wire { position: relative; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--nf-line) 14%, var(--nf-line) 86%, transparent);
}
.nf-seam__wire::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; background: var(--nf-coral);
  transform: translate(-50%, -50%) rotate(45deg);
}
.nf-seam__desc {
  font-size: var(--text-base); line-height: 1.45; color: var(--nf-navy);
  font-style: italic; text-align: center; max-width: 26ch; margin: 0; text-wrap: pretty;
}
.nf-fluent__close {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2vw, 26px); line-height: 1.4; color: var(--nf-navy);
  margin: clamp(34px, 4.4vw, 56px) 0 0; max-width: 40ch; text-wrap: pretty;
}
.nf-fluent__close strong { color: var(--nf-coral-700); font-weight: var(--fw-semibold); }

/* Framing line above the locked founder bio (keeps it secondary) */
.nf-story__framer {
  font-size: var(--text-md); line-height: 1.7; color: var(--nf-ink-600);
  margin: 0 0 clamp(8px, 1.4vw, 16px); max-width: 52ch; text-wrap: pretty;
}
/* Bridge caption connecting the quote to the NF philosophy */
.nf-story .fq--card { margin-bottom: 8px; }
.nf-story__bridge {
  font-size: var(--text-base); line-height: 1.68; color: var(--nf-ink-600);
  margin: 0 0 4px; max-width: 56ch; text-wrap: pretty;
}
.nf-story__bridge strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

@media (max-width: 820px) {
  .nf-fluent__lens { grid-template-columns: 1fr; gap: 18px; }
  .nf-seam { grid-template-columns: 1fr; row-gap: 12px; justify-items: center; text-align: center; }
  .nf-seam__domain--l, .nf-seam__domain--r { text-align: center; }
  .nf-seam__link { order: 0; width: 100%; }
  .nf-seam__wire { height: 0; }
  .nf-seam__wire::before { position: static; transform: rotate(45deg); display: block; margin: 2px auto; }
}

/* ============================================================
   HOW WE WORK — v4 PHILOSOPHY
   A way of thinking, not a methodology. Navy = clarity,
   Pink = partnership. The Routing Curve is the hero motif.
   ============================================================ */

/* ── Hero (navy + routing curve, large) ── */
.nf-hww-hero {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(84px, 12vw, 156px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nf-hww-hero__curve {
  position: absolute; top: -10%; right: -6%;
  width: clamp(360px, 50%, 760px); opacity: 0.2;
  pointer-events: none; user-select: none;
}
.nf-hww-hero__inner { position: relative; z-index: 1; max-width: 940px; display: flex; flex-direction: column; }
.nf-hww-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(40px, 6.4vw, 94px); line-height: 0.98; color: var(--nf-white);
  margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 16ch; text-wrap: balance;
}
.nf-hww-hero__title .nf-accent { color: var(--nf-coral); }
.nf-hww-hero__lead {
  font-size: var(--text-md); line-height: 1.72; color: rgba(255,255,255,0.80);
  max-width: 52ch; margin: clamp(24px, 3vw, 34px) 0 0;
}
.nf-hww-hero__thesis {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(20px, 2.6vw, 34px); line-height: 1.1; color: var(--nf-white);
  margin: clamp(34px, 4.4vw, 56px) 0 0;
}
.nf-hww-hero__thesis .nf-accent { color: var(--nf-coral); }

/* ── The problem with solutions ── */
.nf-hww-solutions__grid {
  display: grid; grid-template-columns: 1fr 0.92fr;
  gap: clamp(40px, 7vw, 104px); align-items: start;
}
.nf-hww-solutions__head { display: flex; flex-direction: column; gap: 18px; }
.nf-hww-solutions__head .nf-section-title { max-width: 14ch; }
.nf-hww-solutions__body { font-size: var(--text-md); line-height: 1.72; color: var(--nf-ink-600); margin: 0; max-width: 44ch; }
.nf-hww-solutions__body:first-of-type { margin-top: 4px; }
.nf-hww-solutions__list { display: flex; flex-direction: column; padding-top: 6px; }
.nf-hww-solutions__req {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2.2vw, 28px); line-height: 1.2; color: var(--nf-ink);
  margin: 0; padding: clamp(15px, 1.9vw, 21px) 0;
  border-top: 1px solid rgba(7,37,118,0.12);
  display: flex; align-items: baseline; gap: 16px;
}
.nf-hww-solutions__req:first-child { border-top: 0; }
.nf-hww-solutions__req::before {
  content: '“'; font-family: var(--font-display); font-weight: var(--fw-extrabold);
  color: var(--nf-coral-300); font-size: 1.4em; line-height: 0; position: relative; top: 0.18em;
}
.nf-hww-solutions__turn {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(18px, 1.9vw, 24px); line-height: 1.18; color: var(--nf-navy);
  margin: clamp(22px, 2.6vw, 32px) 0 0; padding-top: clamp(22px, 2.6vw, 30px);
  border-top: var(--border-width-rule) solid var(--nf-coral); max-width: 24ch; text-wrap: balance;
}

/* ── Relief-first bridge (slim transition, replaces the full Begin page) ── */
.nf-hww-bridge { padding-block: clamp(40px, 6vw, 78px); }
.nf-hww-bridge .nf-wrap {
  border-left: var(--border-width-rule) solid var(--nf-coral);
  padding-left: clamp(22px, 3vw, 44px);
}
.nf-hww-bridge__quote {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(21px, 2.7vw, 34px); line-height: 1.24; color: var(--nf-navy);
  margin: 0; max-width: 30ch; text-wrap: balance;
}
.nf-hww-bridge__quote em { color: var(--nf-coral); font-style: normal; }

/* ── Relief reveals the system (navy centrepiece) ── */
.nf-hww-reveal { position: relative; overflow: hidden; color: var(--nf-white); }
.nf-hww-reveal__grid {
  display: grid; grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(40px, 6vw, 92px); align-items: center;
}
.nf-hww-reveal__head { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }
.nf-hww-reveal__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4vw, 54px); line-height: 1.04; color: var(--nf-white);
  margin: 0; max-width: 14ch; text-wrap: balance;
}
.nf-hww-reveal__title em { color: var(--nf-coral); font-style: normal; }
.nf-hww-reveal__body { font-size: var(--text-md); line-height: 1.72; color: rgba(255,255,255,0.78); margin: 0; max-width: 42ch; }
.nf-hww-reveal__close {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.9vw, 23px); line-height: 1.4; color: var(--nf-white);
  margin: clamp(8px, 1.4vw, 14px) 0 0; padding-top: clamp(20px, 2.4vw, 28px);
  border-top: var(--border-width-rule) solid var(--nf-coral); max-width: 34ch; text-wrap: pretty;
}

/* Routing-reveal figure */
.nf-routing { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.nf-routing__svg { width: 100%; height: auto; display: block; overflow: visible; }
.nf-routing__trunk {
  fill: none; stroke: var(--nf-coral); stroke-width: 3.5;
  stroke-linecap: round; stroke-dasharray: 460;
}
.nf-routing__branch {
  fill: none; stroke: rgba(255,255,255,0.42); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 560;
}
.nf-routing__junction { fill: var(--nf-coral); }
.nf-routing__entry { fill: var(--nf-coral); }
.nf-routing__node circle { fill: var(--nf-white); }
.nf-routing__node text {
  fill: rgba(255,255,255,0.82); font-family: var(--font-display); font-weight: 600;
  font-size: 16px; letter-spacing: 1.4px;
}
.nf-routing__target circle { stroke: var(--nf-coral); stroke-width: 2; }
.nf-routing__target path { fill: none; stroke: var(--nf-coral); stroke-width: 2.4; stroke-linecap: round; }
.nf-routing__target text {
  fill: var(--nf-coral); font-family: var(--font-display); font-weight: 800;
  font-size: 16px; letter-spacing: 1.6px;
}
.nf-routing__cap {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
}
.nf-routing__capl { color: var(--nf-coral); }
.nf-routing__capr { color: rgba(255,255,255,0.6); }

/* Draw-in animation — base state is fully visible; this only enhances when
   the figure scrolls into view (and motion is allowed). If JS/observer never
   fires, the diagram simply stays drawn. */
@media (prefers-reduced-motion: no-preference) {
  .nf-routing.is-in .nf-routing__trunk {
    animation: nf-draw 0.9s var(--ease-out, ease-out) backwards;
  }
  .nf-routing.is-in .nf-routing__branch {
    animation: nf-draw 0.7s var(--ease-out, ease-out) backwards;
    animation-delay: calc(0.5s + var(--d) * 0.16s);
  }
  .nf-routing.is-in .nf-routing__junction { animation: nf-fade 0.4s ease-out 0.5s backwards; }
  .nf-routing.is-in .nf-routing__node { animation: nf-fade 0.5s ease-out backwards; animation-delay: calc(1s + var(--d, 0) * 0.16s); }
  .nf-routing.is-in .nf-routing__target { animation: nf-fade 0.6s ease-out 1.3s backwards; }
}
@keyframes nf-draw { from { stroke-dashoffset: 600; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nf-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Find the constraint ── */
.nf-hww-constraint__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(40px, 6vw, 88px);
  align-items: center; margin-top: clamp(32px, 4.5vw, 52px);
}
.nf-hww-constraint__lead { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; max-width: 42ch; }
.nf-hww-constraint__statement {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.06; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.nf-hww-constraint__statement em { color: var(--nf-coral); font-style: normal; }
.nf-hww-constraint__foot { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; max-width: 42ch; }

/* ── Choose the response (incl. AI) ── */
.nf-hww-response__options {
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 14px);
  margin-top: clamp(34px, 5vw, 56px);
}
.nf-hww-response__opt {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(14px, 1.45vw, 18px); color: var(--nf-navy);
  padding: clamp(12px, 1.4vw, 16px) clamp(18px, 2vw, 26px);
  background: var(--nf-white); border: 1px solid var(--nf-line); border-radius: var(--radius-md);
}
.nf-hww-response__ai {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 40px); align-items: baseline;
  margin-top: clamp(34px, 5vw, 56px); padding-top: clamp(26px, 3.2vw, 38px);
  border-top: var(--border-width-rule) solid var(--nf-coral);
}
.nf-hww-response__ailbl {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); white-space: nowrap;
}
.nf-hww-response__aitext {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2.1vw, 28px); line-height: 1.32; color: var(--nf-navy);
  margin: 0; max-width: 30ch; text-wrap: pretty;
}
.nf-hww-response__hold {
  font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600);
  margin: clamp(34px, 4.5vw, 52px) 0 0; max-width: 64ch;
}

/* ── Leave you stronger (pink + arcs) ── */
.nf-hww-stronger { position: relative; overflow: hidden; }
.nf-hww-stronger__arcs {
  position: absolute; left: -10%; bottom: -36%; width: clamp(280px, 38%, 560px);
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0;
}
.nf-hww-stronger__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 7vw, 100px); align-items: start;
}
.nf-hww-stronger__head { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 124px; }
.nf-hww-stronger__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4vw, 54px); line-height: 1.04; color: var(--nf-navy);
  margin: 0; max-width: 14ch; text-wrap: balance;
}
.nf-hww-stronger__title em { color: var(--nf-coral); font-style: normal; }
.nf-hww-stronger__body { display: flex; flex-direction: column; gap: 22px; max-width: 48ch; padding-top: 6px; }
.nf-hww-stronger__body p { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; }
.nf-hww-stronger__body p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* ── Where we sit — comparison ledger (navy) ── */
.nf-hww-compare { position: relative; overflow: hidden; color: var(--nf-white); }
.nf-hww-compare__curve {
  position: absolute; left: -6%; top: -16%; width: 38%; opacity: 0.1;
  pointer-events: none; user-select: none; transform: rotate(180deg);
}
.nf-hww-compare__inner { position: relative; z-index: 1; }
.nf-hww-compare__head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); max-width: 760px; }
.nf-hww-compare__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.02; color: var(--nf-white);
  margin: 0; text-wrap: balance;
}
.nf-hww-compare__title em { color: var(--nf-coral); font-style: normal; }
.nf-hww-compare__table { border-top: 1px solid rgba(255,255,255,0.16); }
.nf-hww-compare__cols {
  display: grid; grid-template-columns: 0.9fr 1.1fr 1.2fr; gap: clamp(18px, 3vw, 48px);
  padding: 14px 0 18px;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-navy-400);
}
.nf-hww-compare__row {
  display: grid; grid-template-columns: 0.9fr 1.1fr 1.2fr; gap: clamp(18px, 3vw, 48px);
  align-items: baseline; padding: clamp(22px, 2.8vw, 34px) 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.nf-hww-compare__who {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(17px, 1.8vw, 23px); line-height: 1.1; color: rgba(255,255,255,0.78);
}
.nf-hww-compare__does {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.7vw, 21px); line-height: 1.28; color: var(--nf-white);
}
.nf-hww-compare__left { font-size: var(--text-base); line-height: 1.55; color: rgba(255,255,255,0.66); }
.nf-hww-compare__row--us {
  border-top-color: var(--nf-coral);
  border-bottom: var(--border-width-rule) solid var(--nf-coral);
  background: linear-gradient(90deg, rgba(235,144,130,0.10), rgba(235,144,130,0));
  margin-inline: calc(-1 * clamp(14px, 2vw, 26px));
  padding-inline: clamp(14px, 2vw, 26px);
}
.nf-hww-compare__row--us .nf-hww-compare__who { color: var(--nf-coral); }
.nf-hww-compare__row--us .nf-hww-compare__does { color: var(--nf-white); }
.nf-hww-compare__row--us .nf-hww-compare__left { color: rgba(255,255,255,0.86); }
.nf-hww-compare__note {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.8vw, 22px); line-height: 1.5; color: var(--nf-white);
  margin: clamp(34px, 4.4vw, 54px) 0 0; max-width: 46ch; text-wrap: pretty;
}

/* ── How We Work — responsive ── */
@media (max-width: 920px) {
  .nf-hww-solutions__grid,
  .nf-hww-reveal__grid,
  .nf-hww-constraint__grid,
  .nf-hww-stronger__grid { grid-template-columns: 1fr; }
  .nf-hww-constraint__statement { grid-row: auto; }
  .nf-hww-stronger__head { position: static; }
  .nf-hww-reveal__viz { order: -1; }
  .nf-hww-compare__cols { display: none; }
  .nf-hww-compare__row { grid-template-columns: 1fr; gap: 6px; padding-block: clamp(20px, 5vw, 28px); }
  .nf-hww-compare__who { color: var(--nf-coral); }
}
@media (max-width: 560px) {
  .nf-hww-response__ai { grid-template-columns: 1fr; gap: 12px; }
  .nf-routing__node text, .nf-routing__target text { font-size: 19px; }
}

/* ── FOCUS stage markers — quiet, discovered, never announced.
   A coral letter + a muted stage word, set above a section's eyebrow. Read down
   the page they spell F · O · C · U · S; read alone each just names the moment. ── */
.nf-focus-mark {
  display: inline-flex; align-items: baseline; gap: 9px;
  margin-bottom: clamp(12px, 1.5vw, 18px);
}
.nf-focus-mark__letter {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: 13px; letter-spacing: 0.14em; color: var(--nf-coral); line-height: 1;
}
.nf-focus-mark__sep { color: var(--nf-ink-400); font-size: 12px; line-height: 1; }
.nf-focus-mark__stage {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11px; color: var(--nf-ink-400); line-height: 1;
}
.nf-focus-mark--navy .nf-focus-mark__sep,
.nf-focus-mark--navy .nf-focus-mark__stage { color: rgba(255, 255, 255, 0.58); }

/* ── 'Improve before replacing' maxim under Find the constraint (impl. D) ── */
.nf-hww-constraint__keep {
  font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600);
  margin: clamp(28px, 3.6vw, 44px) 0 0; max-width: 52ch; text-wrap: pretty;
}
.nf-hww-constraint__keep em { color: var(--nf-coral); font-style: normal; font-weight: var(--fw-semibold); }

/* ── Solution-agnostic line under the response options (impl. C) ── */
.nf-hww-response__agnostic {
  font-size: var(--text-sm); line-height: 1.7; color: var(--nf-ink-600);
  margin: clamp(18px, 2.2vw, 26px) 0 0; max-width: 60ch; text-wrap: pretty;
}

/* ── 'How we pace it' bridge note — bounded progress aside (How We Work) ── */
.nf-hww-bridge__kicker {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); display: block;
  margin-bottom: clamp(12px, 1.4vw, 16px);
}
.nf-hww-bridge__sub {
  font-size: var(--text-base); line-height: 1.7; color: var(--nf-ink-600);
  margin: clamp(16px, 1.8vw, 22px) 0 0; max-width: 54ch; text-wrap: pretty;
}
.nf-hww-bridge__sub a { color: var(--nf-coral); font-weight: var(--fw-semibold); }
.nf-hww-bridge__sub a:hover { color: var(--nf-navy); }

/* ════════════════════════════════════════════════════════════════
   WHAT TO EXPECT — the engagement, step by step
   Reuses the How-We-Work hero (.nf-hww-hero), the relief bridge
   (.nf-hww-bridge) and the "leave you stronger" pink band
   (.nf-hww-stronger). New parts below: the scroll-step rhythm, the
   two-questions card, the navy decision beat, and the journey ledger.
   ════════════════════════════════════════════════════════════════ */

/* Intro link under the short-version bridge */
.nf-wte-introlink {
  font-size: var(--text-sm); line-height: 1.6; color: var(--nf-ink-400);
  margin: clamp(16px, 1.8vw, 22px) 0 0;
}
.nf-wte-introlink strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.nf-wte-introlink a { color: var(--nf-coral); font-weight: var(--fw-semibold); }
.nf-wte-introlink a:hover { color: var(--nf-navy); }

/* Step rhythm — sticky head + body column (paper stages) */
.nf-wte-step__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 100px); align-items: start;
}
.nf-wte-step__head { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 124px; }
.nf-wte-step__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; color: var(--nf-navy);
  margin: 0; max-width: 15ch; text-wrap: balance;
}
.nf-wte-step__title em { color: var(--nf-coral); font-style: normal; }
.nf-wte-step__body { display: flex; flex-direction: column; gap: 22px; max-width: 50ch; padding-top: 6px; }
.nf-wte-step__body p { font-size: var(--text-md); line-height: 1.74; color: var(--nf-ink-600); margin: 0; }
.nf-wte-step__body p strong { color: var(--nf-navy); font-weight: var(--fw-semibold); }

/* "You're left with" — the tangible result closing each step */
.nf-wte-outcome {
  display: flex; align-items: baseline; gap: clamp(12px, 1.5vw, 18px);
  margin-top: clamp(8px, 1vw, 12px); padding-top: clamp(18px, 2vw, 24px);
  border-top: var(--border-width-rule) solid var(--nf-coral);
}
.nf-wte-outcome__lbl {
  flex: none; font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); line-height: 1.7;
}
.nf-wte-outcome__text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.7vw, 21px); line-height: 1.34; color: var(--nf-navy);
  margin: 0; text-wrap: pretty;
}

/* The two questions — concrete first conversation, on a coral wash */
.nf-wte-questions {
  background: var(--nf-coral-200); border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column;
}
.nf-wte-q {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px);
  align-items: baseline; padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid rgba(7, 37, 118, 0.16);
}
.nf-wte-q:first-child { border-top: 0; padding-top: 4px; }
.nf-wte-q__n {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-sm); letter-spacing: var(--tracking-wide);
  color: var(--nf-coral-700); line-height: 1.2;
}
.nf-wte-q__text {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(18px, 2vw, 27px); line-height: 1.12; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.nf-wte-questions__note {
  font-size: var(--text-base); line-height: 1.6; color: var(--nf-navy-800);
  margin: clamp(16px, 2vw, 22px) 0 0; opacity: 0.88; padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid rgba(7, 37, 118, 0.16);
}

/* What tends to improve — quiet chips */
.nf-wte-improves { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.2vw, 14px); margin: 2px 0; }
.nf-wte-improves span {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs);
  color: var(--nf-navy); background: var(--nf-white); border: 1px solid var(--nf-line);
  border-radius: var(--radius-md); padding: 11px 17px; line-height: 1;
}

/* Decision point — standalone navy beat */
.nf-wte-decide {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(76px, 11vw, 130px);
}
.nf-wte-decide__curve {
  position: absolute; right: -6%; top: -14%; width: clamp(320px, 42%, 660px);
  opacity: 0.12; pointer-events: none; user-select: none;
}
.nf-wte-decide .nf-wrap { position: relative; z-index: 1; max-width: 1000px; }
.nf-wte-decide__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(30px, 4.4vw, 60px); line-height: 1.03; color: var(--nf-white);
  margin: clamp(18px, 2vw, 26px) 0 0; max-width: 18ch; text-wrap: balance;
}
.nf-wte-decide__title em { color: var(--nf-coral); font-style: normal; }
.nf-wte-decide__body {
  font-size: var(--text-md); line-height: 1.72; color: rgba(255, 255, 255, 0.80);
  margin: clamp(22px, 2.6vw, 30px) 0 0; max-width: 52ch;
}
.nf-wte-decide__options {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px); margin: clamp(36px, 5vw, 58px) 0 0;
}
.nf-wte-opt {
  border-top: var(--border-width-rule) solid var(--nf-coral);
  padding-top: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 9px;
}
.nf-wte-opt__name {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(16px, 1.7vw, 21px); line-height: 1.1; color: var(--nf-white);
}
.nf-wte-opt__text { font-size: var(--text-base); line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0; }
.nf-wte-decide__close {
  margin: clamp(34px, 4.4vw, 54px) 0 0; padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(18px, 2.1vw, 28px); line-height: 1.3; color: var(--nf-white);
  max-width: 32ch; text-wrap: balance;
}
.nf-wte-decide__close em { color: var(--nf-coral); font-style: normal; }

/* Journey ledger — the whole thing at a glance (calm, not a flowchart) */
.nf-wte-journey {
  display: flex; flex-direction: column;
  border-left: 2px solid rgba(7, 37, 118, 0.14);
  margin-top: clamp(34px, 5vw, 54px);
}
.nf-wte-jrow {
  position: relative; display: grid; grid-template-columns: minmax(0, 19ch) 1fr;
  gap: clamp(16px, 3vw, 48px); align-items: baseline;
  padding: clamp(16px, 2vw, 24px) 0 clamp(16px, 2vw, 24px) clamp(26px, 3vw, 42px);
}
.nf-wte-jrow::before {
  content: ""; position: absolute; left: -6px; top: 1.05em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--nf-paper); border: 2px solid rgba(7, 37, 118, 0.34);
}
.nf-wte-jrow--mark::before { background: var(--nf-coral); border-color: var(--nf-coral); box-shadow: 0 0 0 4px var(--nf-coral-200); }
.nf-wte-jrow--opt::before { border-style: dashed; }
.nf-wte-jrow--end::before { background: var(--nf-navy); border-color: var(--nf-navy); }
.nf-wte-jrow__stage {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(14px, 1.5vw, 18px); line-height: 1.2; color: var(--nf-navy);
}
.nf-wte-jrow--opt .nf-wte-jrow__stage { color: var(--nf-ink-400); }
.nf-wte-jrow--mark .nf-wte-jrow__stage { color: var(--nf-coral); }
.nf-wte-jrow__desc { font-size: var(--text-base); line-height: 1.55; color: var(--nf-ink-600); margin: 0; }

@media (max-width: 920px) {
  .nf-wte-step__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .nf-wte-step__head { position: static; }
  .nf-wte-decide__options { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 26px); }
  .nf-wte-jrow { grid-template-columns: 1fr; gap: 6px; }
}


/* North Focus — Homepage redesign (v2): merged-section styles.
   Builds on site.css + DS tokens. A five-beat journey designed to move the
   reader from recognition to confidence with far less effort:
     Hero → 01 Scaling (recognition + reassurance, navy)
          → 02 Effort (reframe + diagnosis, paper)
          → 03 North Focus (approach + outcome, coral/arcs)
          → 04 Proof (consolidated, paper)
          → Closing CTA (navy). */

/* Section marker — light variant for navy panels */
.nf-sec__marker--light .nf-sec__rule { background: rgba(255,255,255,0.20); }

/* ── 01 · SCALING — recognition + reassurance on navy ── */
.hr-scaling {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding-block: clamp(76px, 11vw, 128px);
}
.hr-scaling__curve {
  position: absolute; top: -8%; right: -4%; width: 38%;
  opacity: 0.10; pointer-events: none; user-select: none;
}
.hr-scaling__inner {
  position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(40px, 7vw, 96px); align-items: start;
}
.hr-scaling__left { display: flex; flex-direction: column; gap: 22px; }
.hr-scaling__statement {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(34px, 4.8vw, 64px); line-height: 1.0; color: var(--nf-white);
  margin: 0; max-width: 13ch; text-wrap: balance;
}
.hr-scaling__statement em { color: var(--nf-coral); font-style: normal; }
.hr-scaling__body { display: flex; flex-direction: column; gap: 18px; max-width: 44ch; }
.hr-scaling__body p { font-size: var(--text-md); line-height: 1.72; color: rgba(255,255,255,0.74); margin: 0; }
.hr-scaling__body strong { color: var(--nf-white); font-weight: var(--fw-semibold); }
.hr-scaling__right { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.hr-scaling__cue {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral);
}
.hr-feel-list { list-style: none; padding: 0; margin: 0; }
.hr-feel-list__item {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(13px, 1.8vw, 18px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(13px, 1.4vw, 17px); line-height: 1.3; color: rgba(255,255,255,0.90);
}
.hr-feel-list__item:first-child { border-top: 1px solid rgba(255,255,255,0.12); }
.hr-feel-list__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nf-coral); flex: none; }
.hr-scaling__close { font-size: var(--text-base); line-height: 1.62; color: rgba(255,255,255,0.66); margin: 0; max-width: 42ch; }
.hr-scaling__close em { color: rgba(255,255,255,0.92); font-style: italic; }
.hr-scaling__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); align-self: flex-start;
}
.hr-scaling__link:hover { color: var(--nf-white); text-decoration: none; }

/* ── 02 · EFFORT — reframe + diagnosis on paper ── */
.hr-effort__head { max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.hr-effort__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(34px, 5vw, 68px); line-height: 1.0; color: var(--nf-navy);
  margin: 0; max-width: 14ch;
}
.hr-effort__title em { color: var(--nf-coral); font-style: normal; }
.hr-effort__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(18px, 2vw, 25px); line-height: 1.42; color: var(--nf-navy);
  margin: 0; max-width: 44ch; text-wrap: pretty;
}
.hr-effort__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 96px); align-items: start;
  margin-top: clamp(40px, 6vw, 72px);
}
.hr-effort__chain { display: flex; flex-direction: column; position: sticky; top: 120px; }
.hr-effort__chainline {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.7vw, 21px); line-height: 1.35; color: var(--nf-ink-600);
  margin: 0; padding: clamp(12px, 1.5vw, 16px) 0; border-bottom: 1px solid rgba(7,37,118,0.10);
}
.hr-effort__chainline:first-child { border-top: 1px solid rgba(7,37,118,0.10); }
.hr-effort__chainline strong { color: var(--nf-navy); font-weight: var(--fw-extrabold); }
.hr-effort__chainline--result { color: var(--nf-coral); font-weight: var(--fw-extrabold); border-bottom: 0; }
.hr-pairs { display: flex; flex-direction: column; }
.hr-pair {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(12px, 1.8vw, 24px); padding: clamp(16px, 2.1vw, 24px) 0;
  border-top: 1px solid rgba(7,37,118,0.12);
}
.hr-pair:first-child { border-top: 0; }
.hr-pair__symptom, .hr-pair__cause {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(14px, 1.5vw, 18px); line-height: 1.3;
}
.hr-pair__symptom { color: var(--nf-ink-400); }
.hr-pair__cause { color: var(--nf-navy); }
.hr-pair__cause strong { color: var(--nf-coral); font-weight: var(--fw-extrabold); }
.hr-pair__arrow { flex: none; color: var(--nf-coral); width: 20px; height: 20px; }
.hr-pair__arrow svg { width: 100%; height: 100%; display: block; }
.hr-effort__close {
  margin: clamp(28px, 3.6vw, 44px) 0 0; padding-top: clamp(20px, 2.4vw, 28px);
  border-top: var(--border-width-rule) solid var(--nf-coral);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.9vw, 24px); line-height: 1.38; color: var(--nf-navy); max-width: 46ch;
}

/* ── 03 · NORTH FOCUS — calm arc centred at bottom of beats panel ── */
.nf-why__beats-arc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8%;
  width: 92%;
  opacity: 0.45;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.nf-why__beatslabel,
.nf-why__beat { position: relative; z-index: 1; }

/* ── 03 · NORTH FOCUS — outcome + credibility extras (sits on .nf-why) ── */
.hr-why__outcome {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.8vw, 23px); line-height: 1.42; color: var(--nf-navy); margin: 0;
}
.hr-why__cred {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin-top: clamp(22px, 2.6vw, 30px); padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(7,37,118,0.14);
}
.hr-why__credtext { font-size: var(--text-base); line-height: 1.6; color: var(--nf-ink-600); margin: 0; max-width: 44ch; }
.hr-why__credlink {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); white-space: nowrap;
}
.hr-why__credlink:hover { color: var(--nf-navy); text-decoration: none; }

/* ── 04 · FOUNDER — credibility beat (replaces the old proof list) ── */
.hr-founder { position: relative; overflow: hidden; }
.hr-founder__grid {
  display: grid; grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(40px, 6vw, 80px); align-items: start;
  margin-top: clamp(24px, 3.4vw, 44px);
}
.hr-founder__col { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 20px); }
.hr-founder__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-paper); aspect-ratio: 4/5;
}
.hr-founder__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-founder__body { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 24px); }
.hr-founder__foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px;
  margin-top: clamp(8px, 1.4vw, 16px); padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(7,37,118,0.14);
}
.hr-founder__link {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: var(--text-xs); color: var(--nf-coral); white-space: nowrap;
}
.hr-founder__link:hover { color: var(--nf-navy); text-decoration: none; }

@media (max-width: 760px) {
  .hr-founder__grid { grid-template-columns: 1fr; }
  .hr-founder__media { aspect-ratio: 3/2; max-height: 360px; }
}
.nf-contact-page .nf-contact { padding-top: clamp(48px, 7vw, 80px); }

/* ── Responsive ── */
@media (max-width: 920px) {
  .hr-scaling__inner { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 48px); }
  .hr-effort__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .hr-effort__chain { position: static; }
}
@media (max-width: 600px) {
  .hr-pair { gap: 14px; }
}


/* North Focus — Webfonts
   Funnel Display  → display / headlines (the brand's title face)
   Open Sauce Sans → body / UI text
   Files live in assets/fonts (woff2 + woff fallback). */

/* ───────────────────────── Funnel Display ───────────────────────── */
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-300.woff2") format("woff2"),
       url("../assets/fonts/funnel-display-300.woff") format("woff");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-400.woff2") format("woff2"),
       url("../assets/fonts/funnel-display-400.woff") format("woff");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-500.woff2") format("woff2"),
       url("../assets/fonts/funnel-display-500.woff") format("woff");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-600.woff2") format("woff2"),
       url("../assets/fonts/funnel-display-600.woff") format("woff");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-700.woff2") format("woff2"),
       url("../assets/fonts/funnel-display-700.woff") format("woff");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/funnel-display-800.woff2") format("woff2"),
       url("../assets/fonts/funnel-display-800.woff") format("woff");
}

/* ───────────────────────── Open Sauce Sans ───────────────────────── */
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/open-sauce-300.woff2") format("woff2"),
       url("../assets/fonts/open-sauce-300.woff") format("woff");
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/open-sauce-400.woff2") format("woff2"),
       url("../assets/fonts/open-sauce-400.woff") format("woff");
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/open-sauce-400-italic.woff2") format("woff2"),
       url("../assets/fonts/open-sauce-400-italic.woff") format("woff");
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/open-sauce-500.woff2") format("woff2"),
       url("../assets/fonts/open-sauce-500.woff") format("woff");
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/open-sauce-600.woff2") format("woff2"),
       url("../assets/fonts/open-sauce-600.woff") format("woff");
}
@font-face {
  font-family: "Open Sauce Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/open-sauce-700.woff2") format("woff2"),
       url("../assets/fonts/open-sauce-700.woff") format("woff");
}


/* North Focus — Colour System
   Two brand colours do the heavy lifting: Navy (precision, trust, structure)
   and Coral (warmth, the human in the system). Everything sits on warm paper.
   Palette is intentionally tight — clarity over decoration. */

:root {
  /* ── Brand: Navy (primary) ───────────────────────────────────────
     #072576 is the master colour from the brand board. */
  --nf-navy-900: #04153f;   /* deepest — heavy text on light, ink wells   */
  --nf-navy-800: #051c5c;   /* hover/pressed on navy surfaces             */
  --nf-navy:     #072576;   /* ★ primary brand navy                       */
  --nf-navy-600: #1238a0;   /* lifted navy — links, focus on light        */
  --nf-navy-400: #6d80c2;   /* muted navy — meta, dividers on navy        */
  --nf-navy-100: #e4e8f5;   /* navy wash — selected rows, tints           */

  /* ── Brand: Coral (secondary) ────────────────────────────────────
     #EB9082 from the brand board. The signal / accent colour. */
  --nf-coral-700: #cf6857;  /* pressed coral                              */
  --nf-coral-600: #e07567;  /* hover coral                                */
  --nf-coral:     #eb9082;  /* ★ secondary brand coral                    */
  --nf-coral-300: #f4bdb3;  /* soft coral — arcs, decoration              */
  --nf-coral-200: #f8dad3;  /* coral wash — the "calm arcs" tint          */
  --nf-coral-100: #fcecE8;  /* faintest coral — surface tint              */

  /* ── Neutrals ────────────────────────────────────────────────────
     #232323 body text + #E0E0E0 line from the brand board, plus a
     warm paper base seen across the brand graphics. */
  --nf-ink:      #232323;   /* ★ body text colour                         */
  --nf-ink-600:  #5a5a5a;   /* secondary text                             */
  --nf-ink-400:  #8a8a8a;   /* tertiary / placeholder                     */
  --nf-line:     #e0e0e0;   /* ★ hairlines, borders, dividers             */
  --nf-line-200: #ededeb;   /* faint grid lines, subtle separators        */
  --nf-paper:    #e0e0e0;   /* ★ neutral grey page base                   */
  --nf-paper-2:  #efeee9;   /* recessed paper — wells, code, insets       */
  --nf-white:    #ffffff;   /* cards, surfaces on paper                   */

  /* ── Semantic status (derived, kept on-brand) ────────────────────── */
  --nf-success: #2f7d63;
  --nf-warning: #c98a3c;
  --nf-danger:  #c0503f;
  --nf-info:    var(--nf-navy-600);

  /* ── Semantic aliases — reference these in components ─────────────── */
  --surface-page:     var(--nf-paper);
  --surface-card:     var(--nf-white);
  --surface-inset:    var(--nf-paper-2);
  --surface-brand:    var(--nf-navy);
  --surface-accent:   var(--nf-coral);
  --surface-accent-soft: var(--nf-coral-200);

  --text-primary:     var(--nf-ink);
  --text-secondary:   var(--nf-ink-600);
  --text-muted:       var(--nf-ink-400);
  --text-on-brand:    var(--nf-white);
  --text-on-accent:   var(--nf-navy);
  --text-brand:       var(--nf-navy);
  --text-accent:      var(--nf-coral);
  --text-link:        var(--nf-navy-600);

  --border-default:   var(--nf-line);
  --border-strong:    var(--nf-ink);
  --border-brand:     var(--nf-navy);
  --border-accent:    var(--nf-coral);

  --focus-ring:       var(--nf-coral);
}


/* North Focus — Typography
   Display: Funnel Display — used UPPERCASE with open tracking for titles,
            per the brand board ("Title || Line Space +120 || Caps").
   Body:    Open Sauce Sans — sentence case, comfortable line height.
   The contrast (tight tracked caps vs. relaxed body) is the type voice:
   structured headline, human paragraph. */

:root {
  /* ── Families ─────────────────────────────────────────────────── */
  --font-display: "Funnel Display", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Open Sauce Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Weights ──────────────────────────────────────────────────── */
  --fw-light:     300; /* @kind other */
  --fw-regular:   400; /* @kind other */
  --fw-medium:    500; /* @kind other */
  --fw-semibold:  600; /* @kind other */ /* Funnel Display sub-titles */
  --fw-bold:      700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */ /* Funnel Display titles */

  /* ── Type scale (1.0rem = 16px) ───────────────────────────────── */
  --text-2xs:   0.6875rem;  /* 11px — micro labels                     */
  --text-xs:    0.75rem;    /* 12px — captions, meta                   */
  --text-sm:    0.875rem;   /* 14px — secondary UI                     */
  --text-base:  1rem;       /* 16px — body                             */
  --text-md:    1.125rem;   /* 18px — lead body                        */
  --text-lg:    1.375rem;   /* 22px — sub-headings                     */
  --text-xl:    1.75rem;    /* 28px — card titles                      */
  --text-2xl:   2.25rem;    /* 36px — section titles                   */
  --text-3xl:   3rem;       /* 48px — page titles                      */
  --text-4xl:   4rem;       /* 64px — hero                             */
  --text-5xl:   5.5rem;     /* 88px — display hero                     */

  /* ── Line heights ─────────────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.1;    /* display caps                           */
  --leading-snug:    1.28;   /* headings                               */
  --leading-normal:  1.6;    /* body                                   */
  --leading-relaxed: 1.75;   /* long-form body                         */

  /* ── Letter spacing ───────────────────────────────────────────────
     Brand board calls for "+120" tracking on caps titles ≈ 0.12em. */
  --tracking-title:   0.12em;   /* Funnel Display caps titles            */
  --tracking-label:   0.16em;   /* eyebrow / overline labels             */
  --tracking-wide:    0.04em;   /* buttons, tabs                         */
  --tracking-normal:  0;        /* body                                  */
  --tracking-tight:  -0.01em;   /* large display sizes                   */
}

/* ── Convenience text classes ───────────────────────────────────── */
.nf-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-tight);
  color: var(--text-brand);
}
.nf-subtitle {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-snug);
  color: var(--text-brand);
}
.nf-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-sm);
  color: var(--text-accent);
}
.nf-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
}
.nf-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}


/* North Focus — Spacing, Radii, Shadows, Motion
   The system leans on a calm 4px grid, restrained radii, and soft shadows.
   Structure should feel engineered, not bubbly — radii stay modest and the
   signature "curve" comes from the brand's arc assets, not rounded UI. */

:root {
  /* ── Spacing scale (4px base) ─────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   2.5rem;    /* 40px */
  --space-8:   3rem;      /* 48px */
  --space-9:   4rem;      /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-12:  7.5rem;    /* 120px */

  /* ── Radii ────────────────────────────────────────────────────────
     Brand UI corners are crisp. One signature: a large single-corner
     radius echoing the brand's "curve" (the speech-bubble shape). */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-curve: 64px;   /* the signature single-corner sweep         */
  --radius-pill:  999px;

  /* ── Borders ──────────────────────────────────────────────────── */
  --border-width:       1px;
  --border-width-thick: 2px;
  --border-width-rule:  3px;   /* the crosshair rule weight             */

  /* ── Shadows — soft, low, never heavy ─────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(7, 37, 118, 0.05);
  --shadow-sm:   0 2px 6px rgba(7, 37, 118, 0.06);
  --shadow-md:   0 6px 20px rgba(7, 37, 118, 0.08);
  --shadow-lg:   0 16px 44px rgba(7, 37, 118, 0.12);
  --shadow-focus: 0 0 0 3px rgba(235, 144, 130, 0.45);  /* coral ring   */

  /* ── Motion — calm, decisive, never bouncy ────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ── Layout ───────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --gutter:        var(--space-5);
}


/* North Focus — Base elements & signature surfaces
   Minimal global base + the brand's recurring background treatments:
   the faint graph-paper grid (precision / engineering) and the calm
   coral arcs. These encode the "structured but warm" feeling. */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--nf-coral-200); color: var(--nf-navy); }

/* ── Signature: graph-paper grid background ───────────────────────
   The quiet engineering grid behind brand graphics. Apply to any
   light surface. Lines are barely-there to keep things calm. */
.nf-grid-bg {
  background-color: var(--nf-paper);
  background-image:
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 112px 112px; /* 28px × 4 — stays in phase with --navy grid */
  background-position: -1px -1px;
}
.nf-grid-bg--navy {
  background-color: var(--nf-navy);
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Signature: the crosshair rule ───────────────────────────────
   A thin coral cross used as a structural accent / target mark. */
.nf-crosshair {
  position: relative;
}
.nf-crosshair::before,
.nf-crosshair::after {
  content: "";
  position: absolute;
  background: var(--nf-coral);
}
.nf-crosshair::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.nf-crosshair::after  { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }

/* ── Signature: single-corner curve (the speech-bubble sweep) ──────
   One large radius on a colour block — the brand's calm gesture. */
.nf-sweep-bl { border-bottom-left-radius: var(--radius-curve); }
.nf-sweep-br { border-bottom-right-radius: var(--radius-curve); }
.nf-sweep-tr { border-top-right-radius: var(--radius-curve); }
.nf-sweep-tl { border-top-left-radius: var(--radius-curve); }

/* ── Container helper ─────────────────────────────────────────────── */
.nf-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}