/* "What better looks like" as sections. Picked by Beau 2026-10-21 (sandbox prototype: outcome-sections).
   nh-sections.js adds .nh-os to #real .nh-flows, a .nh-os-spine, and .nh-os-in as each section enters. */
.nh .nh-real .nh-flows.nh-os { position: relative; padding-left: 52px; }
@media (min-width: 900px) { .nh .nh-real .nh-flows.nh-os { padding-left: 84px; } }

/* each row becomes a section: full height on wider screens, content centred, alternate ones on a lighter full-width band */
.nh .nh-os > .nh-flow { position: relative; z-index: 0; border-top: 0; padding: 56px 0 64px; }
.nh .nh-os > .nh-flow:last-child { border-bottom: 0; }
.nh .nh-os > .nh-flow:nth-of-type(even)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nh-cool, #fafaf7);
  box-shadow: 0 0 0 100vmax var(--nh-cool, #fafaf7); clip-path: inset(0 -100vmax);
}
@media (min-width: 900px) {
  .nh .nh-os > .nh-flow { min-height: 72vh; align-content: center; padding: 96px 0; }
  .nh .nh-real .nh-os .nh-why .nh-why-line { font-size: clamp(34px, 3.1vw, 46px); }
  .nh .nh-real .nh-os .nh-flow-h { font-size: clamp(24px, 2vw, 30px); }
}

/* the section number gets the hero's label: "01  Discover" */
.nh .nh-row-label { margin-left: 8px; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nh-head, #22325c); }

/* the spine */
.nh .nh-os-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; }
.nh .nh-os-spine-track, .nh .nh-os-spine-fill { position: absolute; left: 19px; width: 2px; border-radius: 1px; }
.nh .nh-os-spine-track { background: rgba(141, 194, 197, 0.55); }
.nh .nh-os-spine-fill { background: var(--nh-gold-ink, #876421); transform-origin: top center; transform: scaleY(0); }
.nh .nh-os-spine-head { position: absolute; left: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--nh-gold, #d4a64e);
  box-shadow: 0 0 0 4px rgba(212, 166, 78, 0.22); opacity: 0; transition: opacity 0.2s ease; }
.nh .nh-os-spine-node {
  position: absolute; left: 0; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  display: grid; place-items: center; background: #ffffff; border: 1.5px solid rgba(141, 194, 197, 0.9); color: #4f8a8e;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.nh .nh-os-spine-node svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nh .nh-os-spine-node.is-on { background: var(--nh-navy, #1a1f2e); border-color: var(--nh-gold, #d4a64e); color: var(--nh-gold, #d4a64e); transform: scale(1.06); }
.nh .nh-os-spine-node.is-know.is-on { background: var(--nh-gold, #d4a64e); color: var(--nh-navy, #1a1f2e); }
@media (min-width: 900px) {
  .nh .nh-os-spine { width: 48px; }
  .nh .nh-os-spine-track, .nh .nh-os-spine-fill { left: 23px; }
  .nh .nh-os-spine-head { left: 24px; }
  .nh .nh-os-spine-node { width: 48px; height: 48px; margin-top: -24px; }
  .nh .nh-os-spine-node svg { width: 22px; height: 22px; }
}

/* sections rise in as they arrive (only once the script is running, so nothing is hidden without it) */
@media (prefers-reduced-motion: no-preference) {
  .nh .nh-os-reveal > .nh-flow > * { opacity: 0; transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
  .nh .nh-os-reveal > .nh-flow > *:nth-child(2) { transition-delay: 0.08s; }
  .nh .nh-os-reveal > .nh-flow > *:nth-child(3) { transition-delay: 0.16s; }
  .nh .nh-os-reveal > .nh-flow.nh-os-in > * { opacity: 1; transform: none; }
}