/* North Focus — Home vNext styles.
   Builds on site.css + DS tokens. Reuses .nf-hero, .nf-wrap, chrome.

   REFINEMENT pass. The organising system is a LUMINANCE + DENSITY arc that
   performs chaos -> calm:
     Hero        paper, calm, spatial
     Wall        NAVY  — the one dark trough; now QUIETER (overheard, not designed)
     Paradox     paper — light floods back; now REFLECTIVE, not a billboard
     Reframe     paper — convergence: many symptoms -> a few causes -> focus
     Trust Beat  paper — pink confined to the QUOTE panel; colour portrait
     Map         paper — ordered chapters, grid re-asserted, consistent buttons
     Final       paper — headline arrives INSIDE the calm arcs
   Only the Wall is dark. Every beat after it is lighter and more open. */

/* ── HERO additions (reuses .nf-hero) ── */
.hv-hero__support {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(18px, 2vw, 26px); line-height: 1.35;
  color: var(--nf-navy); margin: 0; max-width: 22ch; text-wrap: balance;
}
/* Single primary action; the conversation is a quiet, clearly-secondary link. */
.hv-hero__alt {
  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);
  align-self: center; transition: color var(--dur-fast) var(--ease-out);
}
.hv-hero__alt:hover { color: var(--nf-coral); text-decoration: none; }
.hv-hero .nf-hero__panel {
  min-height: 380px;
  width: 100%;
  max-width: 100%;
}

/* Offer band now lives in the hero's lower area (moved out of its own section). */
.hv-hero__offer { margin-top: clamp(24px, 3.4vw, 40px); }

/* A2 card hierarchy: positioning statement leads, North Focus signs off quietly. */
.hv-hero__card { justify-content: space-between; }
.hv-hero__statement {
  gap: 6px;
  position: relative;
  z-index: 1;
}
.hv-hero__statement .nf-hero__you,
.hv-hero__statement .nf-hero__we {
  font-size: clamp(26px, 2.5vw, 33px);
  line-height: 1.08;
}
.hv-hero__sig { position: relative; z-index: 1; padding-top: 14px; }
.hv-hero__sig::before {
  content: ""; display: block; width: 28px; height: 2px;
  background: var(--nf-coral); margin-bottom: 12px;
}
.hv-hero__signame {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.02;
  font-size: clamp(17px, 1.35vw, 20px); color: rgba(255,255,255,0.92);
}
/* Motif becomes a centred watermark behind the statement — texture, not a logo.
   Offset slightly downward so the crosshair sits below the type rather than
   cutting through the letterforms. */
.hv-hero .nf-hero__bgmark {
  position: absolute;
  top: 50%;
  left: 68%;
  width: 78%;
  opacity: 0.09;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
/* Quiet scroll cue replaces the primary CTA — invites a scroll, not a click-away. */
.hv-hero__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-ink-600);
  display: inline-flex; align-items: center; gap: 8px; width: max-content; margin-top: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
.hv-hero__cue::after { content: "\2193"; font-size: 1.1em; }
.hv-hero__cue:hover { color: var(--nf-coral); text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   02 · WALL — the chaos trough (navy). REFINED: the quiet thoughts on
   the drive home. A calm staggered column, fewer fragments, restrained
   type, almost no rotation. Recognition, not overwhelm. Still the only
   dark field and the only place the grid is allowed to drift.
   ════════════════════════════════════════════════════════════ */
.hv-wall {
  position: relative; overflow: hidden; color: var(--nf-white);
  padding: clamp(64px, 9vw, 110px) clamp(24px, 5vw, 64px) clamp(56px, 7vw, 88px);
  min-height: 88vh; display: flex; flex-direction: column; justify-content: center;
}
/* Scatter field: fragments are absolutely anchored by percent (set inline),
   so the eye can't settle on a tidy column. One thought dominates the centre. */
.hv-wall__field {
  position: relative; width: 100%; max-width: 1080px; margin-inline: auto;
  min-height: clamp(640px, 80vh, 880px);
}
.hv-frag {
  position: absolute; margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  line-height: 1.14; text-wrap: balance; text-align: center;
  color: var(--nf-white);
}

/* Weight tiers — wide spread of size, the dominant thought far above the rest */
.hv-frag--dominant {
  color: var(--nf-coral); font-size: clamp(28px, 3.8vw, 46px);
  max-width: 16ch; line-height: 1.1; z-index: 3;
  text-shadow: 0 2px 40px rgba(10,22,48,0.55);
}
.hv-frag--xl { font-size: clamp(28px, 3.8vw, 46px); max-width: 16ch; }
.hv-frag--m  { font-size: clamp(20px, 2.6vw, 32px); max-width: 18ch; }
.hv-frag--s  { font-size: clamp(17px, 2vw, 25px);   max-width: 20ch; }
.hv-frag--xs { font-size: clamp(15px, 1.7vw, 21px); max-width: 22ch; }

/* The fragments are a calm, static field — visible by default. No opacity
   entrance (an offscreen-frozen fade would read as blank; calm suits static). */
.hv-wall__close {
  position: relative; z-index: 2; text-align: center;
  margin: clamp(36px, 5vw, 64px) auto 0; max-width: 30ch;
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6;
  color: rgba(255,255,255,0.74);
}
.hv-wall__close span { color: rgba(255,255,255,0.50); }

/* ════════════════════════════════════════════════════════════
   03 · PARADOX — the first exhale. REFINED to a moment of reflection:
   sentence case, calmer weight, smaller — not a second hero.
   ════════════════════════════════════════════════════════════ */
.hv-paradox { padding-block: clamp(72px, 10vw, 120px); position: relative; background: var(--nf-white); }
.hv-paradox__inner {
  max-width: 760px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); align-items: center;
}
.hv-paradox__line {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: none; letter-spacing: normal;
  font-size: clamp(24px, 3.4vw, 44px); line-height: 1.28; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.hv-paradox__line em { color: var(--nf-coral); font-style: normal; }
.hv-paradox__note {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7;
  color: var(--nf-ink-600); margin: 0; max-width: 46ch; text-wrap: pretty;
}

/* ════════════════════════════════════════════════════════════
   04 · REFRAME — REDIRECTED. No longer diagnoses; answers "why haven't
   I fixed it?" with cognitive load + perspective. The lift figure enacts:
   crowded strands easing into calm, evenly spaced order.
   ════════════════════════════════════════════════════════════ */
.hv-reframe { position: relative; overflow: hidden; }
.hv-reframe__head { max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
/* Calmer than a headline that shouts: a notch smaller, more open line-height,
   so clarity reads as arriving \u2014 deliberate and inevitable, not loud. */
.hv-reframe__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(26px, 3.5vw, 47px); line-height: 1.12; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.hv-reframe__title em { color: var(--nf-coral); font-style: normal; }
.hv-reframe__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 88px); align-items: center;
  margin-top: clamp(40px, 6vw, 72px);
}
.hv-reframe__prose { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px); max-width: 56ch; margin-top: clamp(36px, 5vw, 60px); }
.hv-reframe__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(20px, 2.2vw, 29px); line-height: 1.32; color: var(--nf-navy);
  margin: 0; text-wrap: pretty;
}
.hv-reframe__triad { list-style: none; margin: 2px 0; padding: 0; }
.hv-reframe__couplet {
  font-family: var(--font-body); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.66;
  color: var(--nf-navy-800); margin: 0; max-width: 40ch; text-wrap: pretty;
}
.hv-reframe__couplet em { color: var(--nf-coral); font-style: normal; }
.hv-reframe__triad li {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.45;
  color: var(--nf-navy-800); padding: clamp(9px, 1vw, 12px) 0 clamp(9px, 1vw, 12px) clamp(16px, 1.6vw, 20px);
  border-left: var(--border-width-rule) solid var(--nf-coral);
}
.hv-reframe__triad li + li { border-top: 1px solid var(--nf-line); }
.hv-reframe__body {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.74;
  color: var(--nf-ink-600); margin: 0; text-wrap: pretty;
}
.hv-reframe__resolve {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 1.8vw, 22px); line-height: 1.4;
  color: var(--nf-navy); margin: 0; padding-top: clamp(18px, 2.2vw, 26px);
  border-top: var(--border-width-rule) solid var(--nf-coral); text-wrap: pretty;
}

/* Convergence figure — balances the left-weighted prose and enacts the section's
   own thesis: many scattered strands resolving to a single chosen point (the
   coral path + crosshair node, echoing The First Move). The brand's routing /
   crosshair vocabulary, set quiet — thin, low-contrast, static. Not decoration:
   it IS the argument that ‘where you choose to start decides where you end up’. */
.hv-reframe__layout {
  display: grid; grid-template-columns: 1fr clamp(220px, 30%, 320px);
  gap: clamp(40px, 6vw, 88px); align-items: center;
  margin-top: clamp(36px, 5vw, 60px);
}
.hv-reframe__layout .hv-reframe__prose { margin-top: 0; }
.hv-reframe__figure { display: flex; align-items: center; justify-content: center; }
.hv-reframe__svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.hv-reframe__strand {
  fill: none; stroke: var(--nf-navy); stroke-width: 1.5;
  stroke-linecap: round; opacity: 0.3;
}
.hv-reframe__strand--coral { stroke: var(--nf-coral); stroke-width: 2.4; opacity: 1; }
.hv-reframe__ring { fill: none; stroke: var(--nf-coral); stroke-width: 1.5; opacity: 0.4; }
.hv-reframe__node { fill: var(--nf-coral); }

/* Lift figure — the same strands, crowded where they begin, easing into calm. */
.hv-lift { margin: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); }
.hv-lift__svg { width: 100%; height: auto; display: block; overflow: visible; }
.hv-lift__strand { fill: none; stroke-width: 2; stroke-linecap: round; }
.hv-lift__strand--coral { stroke: var(--nf-coral); stroke-width: 2.6; }
.hv-lift__seed { fill: var(--nf-navy); opacity: 0.42; }
.hv-lift__cap {
  display: flex; justify-content: space-between; gap: 12px;
  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);
}
.hv-lift__cap-clear { color: var(--nf-coral); }

/* The figure is fully drawn and visible by default (static). */
@keyframes hv-fade { from { opacity: 0; } to { opacity: 1; } }

/* ════════════════════════════════════════════════════════════
   05 · TRUST BEAT — human connection. REFINED: section sits on PAPER;
   the coral wash belongs to the QUOTE panel alone (the emphasis point).
   The COLOUR portrait (locked) sits beside it.
   ════════════════════════════════════════════════════════════ */
.hv-trust {
  position: relative; overflow: hidden;
  background: transparent;
  padding-block: clamp(72px, 11vw, 128px);
}
.hv-trust .nf-wrap { position: relative; z-index: 1; }
.hv-trust__grid {
  display: grid; grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(36px, 6vw, 80px); align-items: center; max-width: 1060px; margin-inline: auto;
}
.hv-trust__portrait { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 18px); }
.hv-trust__media {
  position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--nf-white);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  box-shadow: var(--shadow-md);
}
/* COLOUR portrait — locked. Deliberately NOT greyscaled: humanity, warmth, trust. */
.hv-trust__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block;
}
.hv-trust__id { display: flex; flex-direction: column; gap: 3px; }
.hv-trust__name {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(18px, 1.9vw, 23px); line-height: 1.05; color: var(--nf-navy);
}
.hv-trust__role {
  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);
}
.hv-trust__body { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 24px); }
.hv-trust__lead {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.7;
  color: var(--nf-navy-800); margin: 0; max-width: 52ch;
}
/* The QUOTE panel — this is where the pink lives, so the quote reads as the emphasis. */
.hv-trust__quote {
  position: relative; overflow: hidden; margin: 0;
  background: var(--nf-coral-200);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  padding: clamp(28px, 3.6vw, 48px) clamp(28px, 3.6vw, 48px) clamp(24px, 3vw, 38px);
}
.hv-trust__arcs {
  position: absolute; right: -6%; bottom: -34%; width: clamp(220px, 42%, 360px);
  opacity: 0.45; mix-blend-mode: multiply; pointer-events: none; user-select: none; z-index: 0;
}
.hv-trust__quote > :not(.hv-trust__arcs) { position: relative; z-index: 1; }
.hv-trust__mark {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(54px, 6vw, 80px); line-height: 0.5; color: var(--nf-coral-700);
  display: block; margin: 0 0 clamp(2px, 0.6vw, 8px) -4px; user-select: none;
}
.hv-trust__qtext {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(23px, 3vw, 38px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--nf-navy); max-width: 24ch; text-wrap: balance;
}
.hv-trust__cite { display: flex; flex-direction: column; gap: 3px; margin-top: clamp(14px, 1.8vw, 20px); }
.hv-trust__citename {
  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);
}
.hv-trust__citerole {
  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);
}
/* Coda — set restrained: confident-calm, not a mic-drop. */
.hv-trust__coda {
  margin: clamp(16px, 2vw, 24px) 0 0; padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(7,37,118,0.20);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(14px, 1.5vw, 18px); line-height: 1.5; color: var(--nf-navy-800);
  display: flex; flex-wrap: wrap; gap: 0 0.6em;
}
.hv-trust__coda .hv-accent2 { color: var(--nf-coral-700); }
/* Founder beat — a quiet hero line bridging the quote into Andrew's story. */
.hv-trust__beat {
  margin: clamp(6px, 0.8vw, 12px) 0 0; max-width: none;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--nf-navy); text-wrap: balance;
}
.hv-trust__beat > span { display: block; }
.hv-trust__beat span { color: var(--nf-navy-800); font-weight: var(--fw-medium); }
.hv-trust__beat em, .hv-trust__beat em span { color: var(--nf-coral); font-style: normal; }
/* Quiet human continuation toward Andrew’s story — a path, not a CTA. */
.hv-trust__about {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  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);
}
.hv-trust__about span { transition: transform var(--dur-base) var(--ease-out); }
.hv-trust__about:hover { color: var(--nf-coral); text-decoration: none; }
.hv-trust__about:hover span { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════
   06 · NARRATIVE MAP — ordered chapters, the antithesis of the Wall.
   Every door uses the SAME button treatment (consistent sizing).
   ════════════════════════════════════════════════════════════ */
.hv-map { position: relative; }
.hv-map__head { max-width: 760px; display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(36px, 5vw, 56px); }
.hv-map__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(28px, 4vw, 52px); line-height: 1.04; color: var(--nf-navy); margin: 0;
}
.hv-map__sub { font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; color: var(--nf-ink-600); margin: 0; max-width: 48ch; }
.hv-map__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hv-chapter {
  display: grid; grid-template-columns: clamp(48px, 6vw, 84px) 1fr auto;
  grid-template-areas: "n main link";
  gap: 16px clamp(18px, 3vw, 44px); align-items: center;
  padding: clamp(26px, 3.4vw, 40px) 0;
}
.hv-chapter__n { grid-area: n; }
.hv-chapter__main { grid-area: main; }
.hv-chapter__link { grid-area: link; }
.hv-chapter__n {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(24px, 3vw, 40px); line-height: 0.9; color: var(--nf-navy-400);
}
.hv-chapter--primary .hv-chapter__n { color: var(--nf-coral); }
.hv-chapter__main { display: flex; flex-direction: column; gap: 8px; }
.hv-chapter__q {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2.3vw, 30px); line-height: 1.16; color: var(--nf-navy); margin: 0; text-wrap: balance;
}
.hv-chapter--primary .hv-chapter__q { font-weight: var(--fw-extrabold); }
.hv-chapter__d { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.58; color: var(--nf-ink-600); margin: 0; max-width: 52ch; }
/* Proof glimpses (chapter 03) — a single quiet line of supporting evidence, set
   as prose rather than a stat panel. Coral arrows are the only flourish, tying
   back to the site's language of progression. Understated by design: confident
   enough not to oversell. */
.hv-proof {
  display: grid; grid-template-columns: repeat(2, max-content);
  column-gap: clamp(28px, 4vw, 56px); row-gap: 6px;
  font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.6;
  color: var(--nf-ink-600); margin: 6px 0 0; max-width: none;
}
.hv-proof__k { color: var(--nf-ink-600); font-weight: var(--fw-regular); white-space: nowrap; }
.hv-proof__from { color: var(--nf-ink-400); }
.hv-proof__arrow {
  width: 0.78em; height: 0.78em; color: var(--nf-coral);
  vertical-align: -0.06em; margin: 0 0.18em;
}
.hv-proof__to { color: var(--nf-navy); font-weight: var(--fw-bold); }
.hv-proof__item { white-space: nowrap; }
/* Consistent door buttons: same size for all three; the primary is filled,
   the others outlined. (Replaces the earlier mixed text-link / button sizing.) */
.hv-chapter__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  min-width: clamp(180px, 16vw, 210px);
  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;
  padding: 13px 22px; border-radius: var(--radius-md);
  color: var(--nf-navy); background: transparent; box-shadow: inset 0 0 0 2px var(--nf-navy);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.hv-chapter__link svg { width: 17px; height: 17px; transition: transform var(--dur-base) var(--ease-out); }
.hv-chapter__link:hover { background: var(--nf-navy); color: var(--nf-white); text-decoration: none; }
.hv-chapter__link:hover svg { transform: translateX(4px); }
.hv-chapter--primary .hv-chapter__link {
  background: var(--nf-navy); color: var(--nf-white); box-shadow: none;
}
.hv-chapter--primary .hv-chapter__link:hover { background: var(--nf-navy-800); color: var(--nf-white); }
/* Closing guidance: one quiet line (the overlapping foot treatment is removed). */
.hv-map__foot { margin-top: clamp(28px, 4vw, 44px); }
.hv-map__about {
  display: inline-block;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  color: var(--nf-ink-600); max-width: 60ch;
}
.hv-map__about 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-coral); white-space: nowrap;
}
.hv-map__about:hover { text-decoration: none; color: var(--nf-navy); }
.hv-map__about:hover span { color: var(--nf-navy); }

/* ════════════════════════════════════════════════════════════
   07 · FINAL PROMISE — relief. The calm arc is now ANCHORED: its flat
   base sits on the section’s bottom edge (the footer boundary), so it
   rises *from* something rather than floating behind the headline.
   Reduced scale — the arc cradles the closing promise (sub + CTA) and
   tops out near it, leaving the headline in clear paper above.
   ════════════════════════════════════════════════════════════ */
.hv-promise { position: relative; overflow: hidden; padding-block: clamp(88px, 13vw, 168px) clamp(64px, 9vw, 120px); }
.hv-promise .nf-wrap { position: relative; z-index: 1; }
.hv-promise__inner {
  position: relative;
  max-width: 660px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 28px);
}
.hv-promise__inner > * { position: relative; z-index: 1; }
/* Anchored to the section’s bottom edge (footer boundary), rising upward. */
.hv-promise__arcs {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(500px, 76%); height: auto;
  opacity: 0.5; mix-blend-mode: multiply;
  pointer-events: none; user-select: none; z-index: 0;
}
/* WHITE-ARC VARIANT: keeps the warm grey grid surface; only the arc swaps to white. */
.hv-promise--white .hv-promise__arcs { mix-blend-mode: normal; opacity: 0.85; transform: translateX(-50%) scaleY(0.88); transform-origin: center bottom; }
.hv-promise__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-size: clamp(14px, 1.6vw, 18px); color: var(--nf-coral); margin: 0;
}
.hv-promise__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.04; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.hv-promise__title em { color: var(--nf-coral); font-style: normal; }
.hv-promise__nowrap { white-space: nowrap; }
.hv-promise__sub {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(17px, 2vw, 25px); line-height: 1.34; color: var(--nf-navy-800);
  margin: 0; max-width: 30ch; text-wrap: balance;
}
.hv-promise__cta {
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(16px, 2.4vw, 28px);
}
.hv-promise__alt {
  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);
}
.hv-promise__alt:hover { color: var(--nf-coral); text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
  .hv-reframe__grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 52px); }
  .hv-reframe__layout { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .hv-reframe__figure { order: -1; }
  .hv-reframe__svg { max-width: 240px; }
  .hv-lift { order: 2; }
  .hv-trust__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 44px); }
  .hv-trust__portrait { flex-direction: row; align-items: center; gap: 20px; }
  .hv-trust__media { width: clamp(140px, 38vw, 220px); flex: none; }
}
@media (max-width: 720px) {
  /* Wall: scatter doesn't survive narrow widths — fall back to a calm,
     slightly-drifting stacked column, the dominant thought still first. */
  .hv-wall { min-height: auto; }
  .hv-wall__field {
    min-height: 0; display: flex; flex-direction: column;
    align-items: stretch; gap: clamp(20px, 6vw, 32px); max-width: 30ch;
  }
  .hv-frag {
    position: static !important; transform: rotate(var(--rot, 0deg)) !important;
    left: auto !important; top: auto !important; max-width: 26ch;
    opacity: var(--mo, 1);
  }
  .hv-frag:nth-child(even) { align-self: flex-end; text-align: right; }
  .hv-frag:nth-child(odd)  { align-self: flex-start; text-align: left; }
  .hv-frag--dominant { align-self: center !important; text-align: center !important; order: -1; }
  .hv-frag--dominant, .hv-frag--xl { font-size: clamp(28px, 8vw, 38px); }
  .hv-frag--m { font-size: clamp(20px, 5.6vw, 26px); }
  .hv-frag--s { font-size: clamp(17px, 4.8vw, 22px); }
  .hv-frag--xs { font-size: clamp(15px, 4.4vw, 19px); }
  .hv-chapter { grid-template-columns: auto 1fr; grid-template-areas: "n main" "link link"; gap: 12px 18px; }
  .hv-chapter__n { grid-area: n; }
  .hv-chapter__main { grid-area: main; }
  .hv-chapter__link { grid-area: link; justify-self: start; margin-top: 4px; }
}

/* ════════════════════════════════════════════════════════════
   HOME v2 (Heroes) — additions for the re-aimed back half.
   Hero proposition · The First Move · The Pull to Examples.
   Reuses the existing luminance arc; introduces no new visual language.
   ════════════════════════════════════════════════════════════ */

/* ── 01 · HERO — plain proposition (orientation, the natural completion of the
   Hero). Grouped tightly with the support line as ONE settling thought rather
   than a detached block: the support states the gap, the proposition names who
   closes it. The earlier coral divider rule was removed — it rhymed with the
   opening eyebrow and read as a fresh start; grouping does the anchoring now. */
.hv-hero__lead {
  display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 14px);
}
.hv-hero__prop {
  font-family: var(--font-body); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.62;
  color: var(--nf-navy-800); margin: 0; max-width: 46ch; text-wrap: pretty;
}

/* Inline offer highlights inside the First Move body. */
.hv-move__nav { color: var(--nf-navy); font-weight: var(--fw-semibold); }
.hv-move__coral { font-weight: var(--fw-semibold); }

/* 01b · THE OFFER — factual anchor directly beneath the hero. */
.hv-offer { background: transparent; padding-block: clamp(20px, 4vw, 44px) clamp(40px, 6vw, 68px); }
.hv-hero__offer.hv-offer { padding-block: 0; }
.hv-offer__inner {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--nf-line);
}
.hv-offer__head { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 16px); }
.hv-offer__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(19px, 2vw, 25px); line-height: 1.28; color: var(--nf-navy);
  margin: 0; max-width: 22ch; text-wrap: balance;
}
.hv-offer__lead em { color: var(--nf-coral); font-style: normal; }
.hv-offer__chain {
  --hv-offer-gap: clamp(28px, 3.8vw, 42px);
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: var(--hv-offer-gap);
}
.hv-offer__fact {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(13px, 1.3vw, 18px) clamp(14px, 1.3vw, 18px) clamp(15px, 1.5vw, 20px);
  background: var(--nf-white); border: 1px solid var(--nf-line);
  border-radius: var(--radius-md);
  position: relative;
}
.hv-offer__fact:not(:last-child)::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: calc(var(--hv-offer-gap) / -2);
  transform: translate(50%, -50%);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(20px, 2vw, 26px); line-height: 1; color: var(--nf-coral);
  user-select: none;
}
.hv-offer__step {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: clamp(12px, 1.1vw, 13px); letter-spacing: var(--tracking-label);
  color: var(--nf-coral); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hv-offer__k {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(14px, 1.4vw, 17px); line-height: 1.26; color: var(--nf-navy);
  text-wrap: balance;
}
.hv-offer__more {
  align-self: start;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--nf-navy); text-decoration: none;
  border-bottom: 1px solid var(--nf-coral);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.hv-offer__more:hover { color: var(--nf-coral); }
@media (max-width: 920px) {
  .hv-offer__inner { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); align-items: start; }
  .hv-offer__chain { --hv-offer-gap: clamp(28px, 7vw, 40px); flex-direction: column; }
  .hv-offer__fact:not(:last-child)::after {
    top: auto;
    right: auto;
    left: 18px;
    bottom: calc(var(--hv-offer-gap) / -2);
    transform: translateY(50%) rotate(90deg);
  }
  .hv-offer__lead { max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   04 · THE FIRST MOVE — one continuous narrative on the grey grid. The
   promise opens the section (reframe -> where it lands); the portrait then
   rises to meet it and becomes the visual bridge into Andrew's credibility,
   which sits to its right.
   ════════════════════════════════════════════════════════════ */
.hv-move { background: transparent; padding-block: clamp(76px, 12vw, 140px); position: relative; }
.hv-move .nf-wrap { display: flex; flex-direction: column; }
.hv-move__promise-block {
  max-width: 940px; display: flex; flex-direction: column;
  gap: clamp(18px, 2.2vw, 28px); position: relative; z-index: 2;
}
.hv-move__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.1; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.hv-move__title em { color: var(--nf-coral); font-style: normal; }
.hv-move__person {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(248px, 0.62fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.hv-move__media {
  margin: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
  max-width: 404px; width: 100%; justify-self: start;
}
.hv-move__frame {
  position: relative; overflow: hidden; aspect-ratio: 4/5; display: block;
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-curve);
  background: var(--nf-navy); box-shadow: var(--shadow-md);
}
.hv-move__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 24%; display: block;
}
.hv-move__caption { display: flex; flex-direction: column; gap: 3px; }
.hv-move__caption-name {
  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);
}
.hv-move__caption-role {
  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);
}
.hv-move__caption-link {
  margin-top: 8px;
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-sm); line-height: 1;
  color: var(--nf-navy); text-decoration: none;
  border-bottom: 1px solid var(--nf-coral);
  padding-bottom: 2px; align-self: flex-start;
  transition: color var(--dur-fast) var(--ease-out);
}
.hv-move__caption-link:hover { color: var(--nf-coral); }
.hv-move__cred {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(18px, 2.2vw, 26px); max-width: 50ch;
}
.hv-move__credhead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(23px, 2.6vw, 33px); line-height: 1.22; color: var(--nf-navy);
  letter-spacing: -0.008em; margin: 0; text-wrap: balance;
}
.hv-move__credhead-turn { color: var(--nf-coral); }
.hv-move__body { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 17px); }
.hv-move__p {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.72;
  color: var(--nf-ink-600); margin: 0; text-wrap: pretty;
}
/* Endorsement quote — shared .nf-perspective component (site.css);
   only the in-column placement is adjusted here. */
.hv-move__quote { margin: clamp(4px, 0.8vw, 10px) 0 0; width: 100%; }
@media (max-width: 920px) {
  .hv-move__person { margin-top: clamp(28px, 7vw, 40px); grid-template-columns: 1fr; gap: clamp(30px, 8vw, 40px); }
  .hv-move__media { max-width: 320px; }
  .hv-move__cred { max-width: 56ch; }
}

/* ════════════════════════════════════════════════════════════
   06 · PULL TO EXAMPLES — the single forward pull. Proof glimpse, brand
   spine as the resolving promise, then one dominant CTA to Examples. The
   calm arc rises from the footer boundary, same as the old Final Promise.
   ════════════════════════════════════════════════════════════ */
.hv-pull {
  position: relative; overflow: hidden;
  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;
  background-position: -1px -1px;
  padding-block: clamp(84px, 12vw, 150px) clamp(72px, 10vw, 128px);
}
.hv-pull .nf-wrap { position: relative; z-index: 1; }
.hv-pull__arcs {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%) scaleY(0.88); transform-origin: center bottom;
  width: min(540px, 80%); height: auto; opacity: 0.8;
  pointer-events: none; user-select: none; z-index: 0;
}
.hv-pull__inner {
  position: relative; max-width: 720px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.6vw, 30px);
}
.hv-pull__inner > * { position: relative; z-index: 1; }
.hv-pull__lead {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(16px, 1.8vw, 20px); line-height: 1.4; color: var(--nf-ink-600); margin: 0;
}
.hv-pull__title {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--tracking-title);
  font-size: clamp(34px, 5.2vw, 66px); line-height: 1.03; color: var(--nf-navy);
  margin: 0; text-wrap: balance;
}
.hv-pull__title em { color: var(--nf-coral); font-style: normal; }

/* Proof glimpse — trailer-depth, understated. No business count. */
.hv-pull__proof {
  width: 100%; max-width: 560px; margin-top: clamp(6px, 1.2vw, 14px);
  display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px);
}
.hv-pull__proofintro {
  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: 0;
}
.hv-pull__metrics {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.6vw, 26px) clamp(28px, 4vw, 52px); text-align: left;
}
.hv-pull__metric {
  display: flex; flex-direction: column; gap: 5px;
  padding-top: 13px; border-top: 1px solid var(--nf-line);
}
.hv-pull__metric-k {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.4; color: var(--nf-ink-600);
}
.hv-pull__metric-v {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2em;
  font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: 1.2;
  font-size: clamp(16px, 1.9vw, 21px);
}
.hv-pull__from { color: var(--nf-ink-400); font-weight: var(--fw-medium); white-space: nowrap; }
.hv-pull__arrow { width: 0.85em; height: 0.85em; color: var(--nf-coral); margin: 0 0.08em; flex: none; }
.hv-pull__to { color: var(--nf-navy); font-weight: var(--fw-extrabold); white-space: nowrap; }

.hv-pull__resolve {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(18px, 2.1vw, 26px); line-height: 1.34; color: var(--nf-navy-800);
  margin: clamp(6px, 1.2vw, 14px) 0 0; max-width: 30ch; text-wrap: balance;
}
.hv-pull__cta {
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(12px, 2vw, 22px);
}
.hv-pull__alt {
  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);
}
.hv-pull__alt:hover { color: var(--nf-coral); text-decoration: none; }

@media (max-width: 560px) {
  .hv-pull__metrics { grid-template-columns: 1fr; }
}