/* /neuro-who-is-a-fit: its own sheet, loaded after site.css.
   One idea runs the page: a case is a file that gets read before anything
   else happens. The hero opens the file, the rows say what the reader of it
   looks for, the navy band says what the cells can and cannot do, and the
   route walks the file to its answer.
   Script: scripts/neuro-who-is-a-fit.js. With that script absent every part
   is visible, every drawing is finished and every link still jumps. */

html:has(body.nfit) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.nfit {
  --nf-ease: cubic-bezier(.16, 1, .3, 1);
  --nf-gut: clamp(20px, 4vw, 56px);
  --nf-navy: var(--navy-brand);
  --nf-on-navy: rgba(255, 255, 255, .86);
}

/* ============ GROUND RULES ============ */
.nf-wrap { max-width: calc(1240px + 2 * var(--nf-gut)); margin-inline: auto; padding-inline: var(--nf-gut); }
/* text fills its column; the column sets the measure */
.nfit main p { max-width: none; margin: 0; }
.nfit main a:not(.btn) { border-bottom: 0; }
.nfit main :is(h2, h3) { margin: 0; max-width: none; text-wrap: wrap; }
.nfit main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
}
.nfit main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.nfit main figure { margin: 0; }
.nfit main :is(a, .btn, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.nfit :is(.nf-cells, .nf-end) :is(a, .btn):focus-visible { outline-color: #fff; }
/* a part that receives focus after a jump is not itself a control */
.nfit main :is(h1, h2, h3, section, article)[tabindex="-1"]:focus { outline: none; }
.nfit main .btn span { display: inline-block; transition: transform 360ms var(--nf-ease); }
.nfit main .btn:hover span { transform: translateX(5px); }

/* a term the glossary defines */
.nf-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-ice); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.nf-term:hover { color: #fff; text-decoration-style: solid; }

/* the onward link: the arrow leans the way it points */
.nf-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.nf-go span { display: inline-block; transition: transform 360ms var(--nf-ease); }
.nf-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.nf-go:hover span { transform: translateX(6px); }
:is(.nf-cells, .nf-end) .nf-go { color: #c9def2; }
:is(.nf-cells, .nf-end) .nf-go:hover { color: #fff; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (nf-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.nf-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--nf-ease); }
.nf-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.nf-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.nf-js [data-r="right"]:not(.is-in) { transform: translateX(32px); }
.nf-js [data-r="fade"]:not(.is-in) { transform: scale(.96); }
/* these keep their box and bring their own parts in */
.nf-js :is([data-r="marks"], [data-r="route"], [data-r="rows"], [data-r="row"]):not(.is-in) { opacity: 1; transform: none; }

@keyframes nf-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes nf-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nf-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } }
@keyframes nf-sheet { from { opacity: 0; transform: translateY(74px) rotate(0deg); } }
@keyframes nf-beat { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@keyframes nf-send { from { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@keyframes nf-answer { 0%, 62%, 100% { transform: scale(1); } 76% { transform: scale(1.045); } }
@keyframes nf-tick { from { transform: rotate(45deg) scale(0); opacity: 0; } 70% { transform: rotate(45deg) scale(1.25); opacity: 1; } }
@keyframes nf-grow { from { transform: scaleX(0); } }
@keyframes nf-fall { from { transform: scaleY(0); } }
@keyframes nf-here { from { opacity: 0; transform: scaleY(0); } 14% { opacity: 1; transform: scaleY(1); } 74% { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(1); } }

/* ============ HERO ============ */
.nf-hero { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 88px); }
.nf-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.nfit main :is(h1, h2) > :is(.h-lead, em) { display: inline-block; }
.nf-hero__h1 > em { color: var(--accent-blue); }
.nf-hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.nf-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); margin-bottom: 28px !important; }

/* jump to a group: four jumps into the rows below */
.nf-find { margin-top: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--border); }
.nf-find a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 52px; padding-block: 10px; border-top: 1px solid var(--border) !important; color: var(--ink-muted); font-size: 16px; line-height: 1.35; transition: color 200ms, padding 360ms var(--nf-ease); }
.nf-find a > b { grid-column: 1; }
.nf-find b { font-weight: 600; color: var(--ink); transition: color 200ms; }
.nf-find i { grid-column: 2; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: translateY(-3px) rotate(45deg); transition: transform 360ms var(--nf-ease); }
.nf-find a:hover { padding-left: 8px; }
.nf-find a:hover b { color: var(--accent-blue-hover); }
.nf-find a:hover i { transform: translateY(3px) rotate(45deg); }

/* the file */
.nf-file { display: block; width: 100%; height: auto; overflow: visible; }
.nf-file :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nf-file .nf-file__back { fill: #fff; }
.nf-file .nf-file__front { fill: #fff; stroke: none; }
.nf-file .nf-paper { fill: #fff; }
.nf-file .nf-film { fill: var(--ink); }
.nf-file .nf-film__ink { stroke: var(--accent-ice); stroke-width: 2; }
.nf-file .nf-film__ink--thin { stroke-width: 1.4; opacity: .8; }
.nf-file :is(.nf-rule, .nf-grid) { stroke: var(--border-strong); stroke-width: 1.4; }
.nf-file .nf-grid { stroke: var(--border); stroke-width: 1; }
.nf-file .nf-ecg { stroke: var(--accent-blue); stroke-width: 2.4; }
.nf-file .nf-ecg__dot { fill: var(--accent-blue); stroke: #fff; stroke-width: 2; opacity: 0; offset-path: path("M232 118h26l7-9 7 9h14l7-46 10 76 8-30h16l8-10 8 10h24"); offset-rotate: 0deg; }
.nf-file .nf-lab__marks circle { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.nf-file .nf-lab__marks .nf-lab__flag { stroke: var(--accent-blue); fill: var(--accent-blue); }
.nf-file__tag rect { fill: #fff; }
.nf-file__sheet { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(var(--rot, 0deg)); }
.nf-file__sheet--scan { --rot: -7deg; }
.nf-file__sheet--lab { --rot: 6deg; }

/* first paint: the folder is drawn, the three sheets rise out of it, then each is filled in */
.nf-js .nf-hero__h1 > * { animation: nf-up 900ms var(--nf-ease) both; }
.nf-js .nf-hero__h1 > em { animation-delay: 110ms; }
.nf-js .nf-hero__text > * { animation: nf-up 900ms var(--nf-ease) 240ms both; }
.nf-js .nf-hero__text > .btn { animation-delay: 340ms; }
.nf-js .nf-hero__text > .nf-find { animation-delay: 460ms; }
.nf-js .nf-file .nf-draw { stroke-dasharray: 1; animation: nf-draw 900ms var(--nf-ease) both; }
.nf-js .nf-file .nf-file__back { animation-delay: 200ms; }
.nf-js .nf-file .nf-file__front-line { animation-delay: 380ms; }
.nf-js .nf-file__tag { animation: nf-up 700ms var(--nf-ease) 900ms both; }
.nf-js .nf-file__sheet { animation: nf-sheet 1000ms var(--nf-ease) both; }
.nf-js .nf-file__sheet--scan { animation-delay: 700ms; }
.nf-js .nf-file__sheet--ecg { animation-delay: 860ms; }
.nf-js .nf-file__sheet--lab { animation-delay: 1020ms; }
.nf-js .nf-file .nf-film__ink { animation-delay: 1500ms; animation-duration: 1100ms; }
.nf-js .nf-file .nf-film__ink--thin { animation-delay: 1900ms; animation-duration: 700ms; }
.nf-js .nf-file .nf-ecg { animation-delay: 1700ms; animation-duration: 1300ms; }
.nf-js .nf-file .nf-lab__marks circle { animation: nf-pop 420ms var(--nf-ease) calc(2100ms + var(--i) * 140ms) both; }
/* while it is on screen a beat runs along the tracing */
.nf-file.is-live .nf-ecg__dot { animation: nf-beat 2600ms linear 3200ms infinite; }
@supports not (offset-path: path("M0 0h1")) { .nf-file .nf-ecg__dot, .nf-signal__dot { display: none; } }

/* ============ CONTENTS BAR (follows the reader) ============ */
.nfit .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--nf-ease), visibility 0s 360ms;
}
.nfit .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--nf-ease); }
body.nfit.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.nfit .hc-bar__track {
  max-width: calc(1240px + 2 * var(--nf-gut)); margin: 0 auto; padding: 0 var(--nf-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.nfit .hc-bar__track::-webkit-scrollbar { display: none; }
.nfit .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.nfit .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--nf-ease);
}
.nfit .hc-bar__track a:hover, .nfit .hc-bar__track a[aria-current] { color: var(--ink); }
.nfit .hc-bar__track a:hover::after { transform: scaleX(.35); }
.nfit .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.nfit .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.nfit .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ WHERE WE STAND ============ */
.nf-say { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--border); }
.nf-say__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.nf-say__big { text-wrap: balance; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 2.9vw, 2.7rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.nf-say__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
/* the three answers a case can get, in the order the sentence says them */
.nf-ans { display: flex; gap: 14px; margin-block: 22px 26px; }
.nf-ans svg { width: 56px; height: 56px; flex: none; overflow: visible; }
.nf-ans circle { fill: none; stroke: var(--border-strong); stroke-width: 1.4; }
.nf-ans .nf-ans__mark { fill: none; stroke: var(--accent-blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nf-js .nf-ans .nf-ans__mark { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 620ms var(--nf-ease); }
.nf-js .nf-ans.is-in .nf-ans__mark { stroke-dashoffset: 0; }
.nf-js .nf-ans svg:nth-child(1) .nf-ans__mark { transition-delay: 200ms; }
.nf-js .nf-ans svg:nth-child(2) .nf-ans__mark { transition-delay: 520ms; }
.nf-js .nf-ans svg:nth-child(3) .nf-ans__mark { transition-delay: 840ms; }

/* ============ THE CONDITIONS ============ */
.nf-cond { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.nf-cond__lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin-block: clamp(14px, 1.8vw, 22px) clamp(28px, 4vw, 48px) !important; }
.nf-row { display: grid; grid-template-columns: 88px minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(24px, 3.4vw, 56px); align-items: start; padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--border-strong); scroll-margin-top: 8px; }
.nf-row__icon { display: grid; place-items: center; width: 88px; height: 88px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--border); background: #fff; }
.nf-row__icon svg { width: 54px; height: 54px; overflow: visible; }
.nf-ic { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf-ic--accent { stroke: var(--accent-blue); stroke-width: 2.4; }
.nf-ic--dot { fill: var(--accent-blue); stroke: none; }
.nfit .nf-row h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.16; letter-spacing: -.005em; color: var(--ink); margin-bottom: 12px; }
.nf-row h3 > :is(.h-lead, em) { display: inline-block; }
.nf-row h3 em { font-style: italic; color: var(--accent-blue-hover); }
.nf-row__text p { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.nf-row__needs { padding-top: 6px !important; }
.nf-row__needs li { position: relative; padding: 0 0 12px 34px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.nf-row__needs li:last-child { padding-bottom: 0; }
.nf-row__needs li::before { content: ""; position: absolute; left: 6px; top: 3px; width: 7px; height: 13px; border-right: 2.4px solid var(--accent-blue); border-bottom: 2.4px solid var(--accent-blue); transform: rotate(45deg); }
/* the one row that is a different promise: support, said as such */
.nf-row--care { margin-inline: calc(-1 * clamp(16px, 2.4vw, 32px)); padding-inline: clamp(16px, 2.4vw, 32px); background: var(--accent-wash); border-top-color: transparent; border-radius: 14px; }
.nf-row:has(+ .nf-row--care) { border-bottom: 0; }
/* the row a reader jumped to is marked for a moment */
.nf-row { position: relative; }
.nf-row.is-here::after { content: ""; position: absolute; left: calc(-1 * clamp(10px, 1.6vw, 22px)); top: clamp(28px, 3.4vw, 44px); bottom: clamp(28px, 3.4vw, 44px); width: 3px; border-radius: 2px; background: var(--accent-blue); transform-origin: top; animation: nf-here 2600ms var(--nf-ease) both; }
.nf-row--care.is-here::after { left: 6px; }
/* a row arrives: its drawing is drawn, then the three things we need are ticked */
.nf-js .nf-row { transition: opacity 620ms ease, transform 820ms var(--nf-ease); }
.nf-js .nf-row:not(.is-in) > * { opacity: 0; }
.nf-js .nf-row > * { transition: opacity 620ms ease; }
.nf-js .nf-row > .nf-row__text { transition-delay: 120ms; }
.nf-js .nf-row .nf-ic:not(.nf-ic--dot) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--nf-ease) 160ms; }
.nf-js .nf-row.is-in .nf-ic:not(.nf-ic--dot) { stroke-dashoffset: 0; }
.nf-js .nf-row .nf-ic--accent { transition-delay: 620ms !important; }
.nf-js .nf-row .nf-ic--dot { opacity: 0; transition: opacity 300ms 1100ms; }
.nf-js .nf-row.is-in .nf-ic--dot { opacity: 1; }
.nf-js .nf-row.is-in .nf-row__needs li::before { animation: nf-tick 420ms var(--nf-ease) both; }
.nf-js .nf-row.is-in .nf-row__needs li:nth-child(1)::before { animation-delay: 520ms; }
.nf-js .nf-row.is-in .nf-row__needs li:nth-child(2)::before { animation-delay: 700ms; }
.nf-js .nf-row.is-in .nf-row__needs li:nth-child(3)::before { animation-delay: 880ms; }

/* ============ WHAT THE CELLS DO (navy) ============ */
.nf-cells { background: var(--nf-navy); color: #fff; padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px); }
.nfit .nf-cells h2 { color: #fff; margin-bottom: clamp(20px, 2.6vw, 32px); }
.nf-cells__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.nf-cells__text p { font-size: 17.5px; line-height: 1.72; color: var(--nf-on-navy); }
.nf-cells__text p + p { margin-top: 18px !important; }
.nf-signal svg { display: block; width: 100%; height: auto; overflow: visible; }
.nf-signal :is(path, circle) { fill: none; stroke: var(--accent-ice); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nf-signal__paths path { stroke: rgba(255, 255, 255, .3); stroke-width: 1.4; stroke-dasharray: 2 9; }
.nf-signal__donor path { stroke: #fff; stroke-width: 2.2; fill: rgba(124, 169, 209, .14); }
.nf-signal__donor circle { stroke: #fff; }
.nf-signal .nf-signal__grain { fill: var(--accent-ice); stroke: none; }
.nf-signal__own > g:not(.nf-signal__worn) { transform-box: fill-box; transform-origin: center; }
.nf-signal .nf-signal__nuc { fill: rgba(124, 169, 209, .22); }
.nf-signal__worn circle { stroke: rgba(255, 255, 255, .34); stroke-dasharray: 4 7; }
.nf-signal .nf-signal__dot { fill: #fff; stroke: none; offset-rotate: 0deg; offset-distance: 58%; }
.nf-signal__dot--0 { offset-path: path("M150 168C230 110 300 96 372 104"); }
.nf-signal__dot--1 { offset-path: path("M158 190C240 176 300 176 356 186"); }
.nf-signal__dot--2 { offset-path: path("M150 214C230 262 296 280 374 270"); }
/* while it is on screen: a signal leaves the donor cell, and the cell it reaches answers */
.nf-signal.is-live .nf-signal__dot { animation: nf-send 3200ms cubic-bezier(.4, 0, .5, 1) infinite; }
.nf-signal.is-live .nf-signal__dot--1 { animation-delay: -1060ms; }
.nf-signal.is-live .nf-signal__dot--2 { animation-delay: -2130ms; }
.nf-signal.is-live .nf-signal__own > g:not(.nf-signal__worn) { animation: nf-answer 3200ms ease-in-out infinite; }
.nf-signal.is-live .nf-signal__own > g:nth-child(2) { animation-delay: -1060ms; }
.nf-signal.is-live .nf-signal__own > g:nth-child(3) { animation-delay: -2130ms; }

.nf-cells__limit { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 20px clamp(28px, 5vw, 88px); align-items: start; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid rgba(255, 255, 255, .18); }
.nf-cells__limit > * { min-width: 0; }
.nf-cells__big { text-wrap: balance; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.005em; color: #fff; }
.nf-cells__limit div p { font-size: 17.5px; line-height: 1.72; color: var(--nf-on-navy); margin-bottom: 14px !important; }
.nf-js .nf-cells__limit > [data-r] + [data-r] { transition-delay: 140ms; }

/* ============ HOW A CASE IS EVALUATED ============ */
.nf-steps { padding-block: clamp(56px, 7vw, 104px); }
.nfit .nf-steps h2 { margin-bottom: clamp(32px, 4.4vw, 60px); }
.nf-route { --gap: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gap); margin-bottom: clamp(24px, 3vw, 40px) !important; }
.nf-route li { position: relative; display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 0; }
@supports not (grid-template-rows: subgrid) { .nf-route li { display: block; } }
.nf-route__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; }
.nf-route__icon svg { width: 38px; height: 38px; overflow: visible; }
.nf-route__icon :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nfit .nf-route h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.16; color: var(--ink); margin-bottom: 10px; }
.nf-route p { text-wrap: wrap; font-size: 16.5px; line-height: 1.66; color: var(--ink-soft); }
/* one connector per gap, stop to stop, and nothing after the last */
.nf-route li:not(:last-child)::before, .nf-route li:not(:last-child)::after { content: ""; position: absolute; top: 35px; left: 84px; width: calc(100% - 96px + var(--gap)); height: 2px; }
.nf-route li:not(:last-child)::before { background: var(--border); }
.nf-route li:not(:last-child)::after { background: var(--accent-blue); transform-origin: left; }
.nf-js .nf-route:not(.is-in) li > * { opacity: 0; }
.nf-js .nf-route:not(.is-in) li::after { transform: scaleX(0); }
.nf-js .nf-route li > * { transition: opacity 520ms ease calc(var(--s) * 380ms + 160ms); }
.nf-js .nf-route.is-in .nf-route__icon { animation: nf-pop 520ms var(--nf-ease) calc(var(--s) * 380ms) both; }
.nf-js .nf-route.is-in li::after { animation: nf-grow 420ms ease-out calc(var(--s) * 380ms + 240ms) both; }

/* ============ QUESTIONS ============ */
.nf-faq { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.nf-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.nf-faq h2 { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 24px); }
.nf-faq__list { border-bottom: 1px solid var(--border-strong); }
.nf-q { border-top: 1px solid var(--border-strong); }
.nf-q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding-block: 18px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.22; color: var(--ink); transition: color 200ms; }
.nf-q summary::-webkit-details-marker { display: none; }
.nf-q summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); transition: background 260ms, border-color 260ms, transform 420ms var(--nf-ease); }
.nf-q summary i::before, .nf-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; background: var(--ink); transition: transform 420ms var(--nf-ease), background 260ms; }
.nf-q summary i::after { transform: rotate(90deg); }
.nf-q summary:hover { color: var(--accent-blue-hover); }
.nf-q summary:hover i { border-color: var(--accent-blue); transform: scale(1.08); }
.nf-q[open] summary i { background: var(--ink); border-color: var(--ink); }
.nf-q[open] summary i::before, .nf-q[open] summary i::after { background: #fff; }
.nf-q[open] summary i::after { transform: rotate(0deg); }
.nf-q__a { overflow: hidden; }
.nf-q__a p { padding: 0 60px 26px 0; font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.nf-js .nf-faq__list:not(.is-in) .nf-q { opacity: 0; transform: translateX(24px); }
.nf-js .nf-q { transition: opacity 520ms ease, transform 720ms var(--nf-ease); }
.nf-js .nf-q:nth-child(2) { transition-delay: 90ms; }
.nf-js .nf-q:nth-child(3) { transition-delay: 180ms; }

/* ============ THE CLOSING CALL (navy; narrow and centred on purpose) ============ */
.nf-end { background: var(--nf-navy); color: #fff; padding-block: clamp(64px, 8vw, 120px); text-align: center; }
.nf-end__inner { display: flex; flex-direction: column; align-items: center; }
.nfit .nf-end h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.nf-end h2 em { color: var(--accent-ice); }
.nf-end__inner > p { margin-block: 18px 30px !important; font-size: 18px; line-height: 1.65; color: var(--nf-on-navy); }
.nf-end__inner > .nf-end__note { margin-block: 28px 0 !important; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.nf-end__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(20px, 3vw, 44px); margin-top: clamp(36px, 5vw, 60px); padding-top: clamp(20px, 2.6vw, 28px); border-top: 1px solid rgba(255, 255, 255, .18); width: 100%; }

/* ============ NARROWER ============ */
@media (max-width: 1023px) {
  .nf-hero__row { grid-template-columns: minmax(0, 1fr); }
  .nf-hero__fig { max-width: 560px; margin-inline: auto !important; width: 100%; }
  .nf-row { grid-template-columns: 72px minmax(0, 1fr); row-gap: 20px; }
  .nf-row__icon { width: 72px; height: 72px; }
  .nf-row__icon svg { width: 44px; height: 44px; }
  .nf-row__needs { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 0 !important; }
  .nf-row__needs li { padding-bottom: 0; }
  .nf-cells__grid { grid-template-columns: minmax(0, 1fr); }
  .nf-signal { max-width: 480px; margin-inline: auto !important; width: 100%; }
  .nf-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .nf-faq h2 { position: static; }
  .nfit .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 860px) {
  .nf-say__grid, .nf-cells__limit { grid-template-columns: minmax(0, 1fr); }
  /* the route turns to run down the page */
  .nf-route { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 34px; }
  .nf-route li { display: grid; grid-row: auto; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; }
  .nf-route__icon { grid-row: 1 / span 2; width: 60px; height: 60px; margin-bottom: 0; }
  .nf-route__icon svg { width: 32px; height: 32px; }
  .nfit .nf-route h3 { align-self: end; margin-top: 4px; }
  .nf-route li:not(:last-child)::before, .nf-route li:not(:last-child)::after { top: 68px; left: 29px; width: 2px; height: calc(100% - 76px + 34px); }
  .nf-route li:not(:last-child)::after { transform-origin: top; }
  .nf-js .nf-route:not(.is-in) li::after { transform: scaleY(0); }
  .nf-js .nf-route.is-in li::after { animation-name: nf-fall; }
}
@media (max-width: 600px) {
  html:has(body.nfit) { --hc-bar-h: 48px; }
  .nfit .hc-bar__track { gap: 22px; }
  .nf-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .nf-row__icon { width: 64px; height: 64px; }
  .nf-row__icon svg { width: 40px; height: 40px; }
  .nf-row__needs { grid-column: 1; display: block; }
  .nf-row__needs li { padding-bottom: 10px; }
  .nf-q__a p { padding-right: 0; }
  .nf-q summary { min-height: 68px; }
  .nf-hero .btn, .nf-end .btn { width: 100%; }
  .nf-end__more { flex-direction: column; align-items: center; gap: 0; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .nfit main *, .nfit main *::before, .nfit main *::after { animation: none !important; transition: none !important; }
  .nf-js [data-r]:not(.is-in), .nf-js .nf-row:not(.is-in) > *, .nf-js .nf-route:not(.is-in) li > *, .nf-js .nf-faq__list:not(.is-in) .nf-q { opacity: 1 !important; transform: none !important; }
  .nf-js .nf-route:not(.is-in) li::after { transform: none !important; }
  .nf-js .nf-file .nf-draw { stroke-dasharray: none; }
  .nf-js :is(.nf-ans .nf-ans__mark, .nf-row .nf-ic) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .nfit .hc-bar { transition: none !important; }
  .nf-go:hover span, .nfit main .btn:hover span, .nf-q summary:hover i { transform: none; }
  .nf-find a:hover { padding-left: 0; }
  .nf-row.is-here::after { opacity: 1; }
  .nf-find a:hover i { transform: translateY(-3px) rotate(45deg); }
}
@media print {
  .nfit .hc-bar { display: none !important; }
  .nfit main *, .nfit main *::before, .nfit main *::after { animation: none !important; transition: none !important; }
  .nf-js [data-r], .nf-js .nf-row > *, .nf-js .nf-route li > *, .nf-js .nf-q { opacity: 1 !important; transform: none !important; }
  .nf-js .nf-route li::after { transform: none !important; }
  .nf-js :is(.nf-file .nf-draw, .nf-ans .nf-ans__mark, .nf-row .nf-ic) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .nf-file .nf-ecg__dot, .nf-signal__dot { display: none; }
  .nf-cells, .nf-end { background: #fff; }
  :is(.nf-cells, .nf-end) *, .nfit :is(.nf-cells, .nf-end) h2 { color: var(--ink) !important; }
  .nf-signal :is(path, circle) { stroke: var(--ink) !important; }
  .nf-q summary i { display: none; }
  .nf-row.is-here::after { display: none; }
  .nf-faq h2 { position: static; }
}

/* Parts waiting to slide in sit a little to one side; without this the page
   could be scrolled sideways until they arrive. clip keeps sticky working. */
.nfit main { overflow-x: clip; }