/* /neuro-evaluation-process: its own sheet, loaded after site.css.
   One idea runs the page: a case file. It starts as a call, fills with
   records, is read by three physicians, and comes back as a signed letter.
   The hero draws that trip, the list fills the folder, the route walks the
   five steps and the navy band holds the three letters it can end in.
   Script: scripts/neuro-evaluation-process.js. With that script absent every
   part is visible and every link still jumps. */

html:has(body.nep) {
  --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);
}
.nep {
  --nep-ease: cubic-bezier(.16, 1, .3, 1);
  --nep-gut: clamp(20px, 4vw, 56px);
  --nep-on-navy: #c9def2;
}

/* ============ GROUND RULES ============ */
.nep-wrap { max-width: calc(1240px + 2 * var(--nep-gut)); margin-inline: auto; padding-inline: var(--nep-gut); }
/* text fills its column; the column sets the measure */
:where(.nep main) p { max-width: none; margin: 0; }
.nep main a:not(.btn) { border-bottom: 0; }
.nep main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.nep 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;
  margin: 0; max-width: none; text-wrap: wrap;
}
/* a heading that has to wrap breaks where the styling changes */
.nep main :is(h1, h2) > :is(.h-lead, em) { display: inline-block; }
.nep main :is(h1, h2) > em { color: var(--accent-blue); font-style: italic; font-weight: 300; }
.nep main h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.2; letter-spacing: -.005em; color: var(--ink); margin: 0; max-width: none; }
.nep main :is(a, .btn, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.nep :is(.nep-out, .nep-end) :is(a, .btn):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.nep main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }
/* every drawing is line work in the page's ink; widths are in each drawing's own units
   (a non-scaling stroke would measure the dashes that draw them in screen pixels) */
.nep main svg :is(path, rect, circle) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the onward link: the arrow leans the way it points */
.nep-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; }
.nep-go span { display: inline-block; transition: transform 360ms var(--nep-ease); }
.nep-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.nep-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (nep-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.nep-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--nep-ease); }
.nep-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.nep-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.nep-js [data-r="file"]:not(.is-in), .nep-js [data-r="fan"]:not(.is-in), .nep-js [data-r="rows"]:not(.is-in), .nep-js [data-r="draw"]:not(.is-in) { opacity: 1; transform: none; }

@keyframes nep-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes nep-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nep-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } }
@keyframes nep-slip { from { opacity: 0; transform: translateY(-16px); } }
@keyframes nep-ring { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes nep-drop { from { opacity: 0; transform: translateY(-26px); } }
@keyframes nep-row { from { opacity: 0; transform: translateX(22px); } }
@keyframes nep-stamp { from { transform: scale(1.5); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } }
@keyframes nep-halo { from { box-shadow: 0 0 0 0 rgba(45, 110, 177, .32); } to { box-shadow: 0 0 0 14px rgba(45, 110, 177, 0); } }
@keyframes nep-unfold { from { opacity: 0; transform: translateY(-8px); } }
@keyframes nep-deal { from { opacity: 0; transform: translateX(var(--from, 0)) translateY(12px); } }

/* ============ HERO ============ */
.nep-hero { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.nep-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
.nep-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.nep-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.nep-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.nep-hero__fig { margin: 0; }
.nep-scene { display: block; width: 100%; height: auto; overflow: visible; }
.nep .nep-scene .nep-paper { fill: #fff; }
.nep .nep-scene .nep-thin { stroke: var(--border-strong); stroke-width: 1.4; }
.nep .nep-scene .nep-link { stroke: var(--accent-blue); stroke-width: 1.5; }
.nep .nep-scene .nep-dot { fill: var(--ink); stroke: none; }
.nep .nep-scene .nep-ring { stroke: var(--accent-blue); }
.nep .nep-scene .nep-head :is(circle, path) { fill: #fff; }
.nep-scene :is(.nep-head, .nep-seal, .nep-sheet) { transform-box: fill-box; transform-origin: center; }
.nep .nep-scene .nep-seal { fill: #fff; stroke: var(--accent-blue); stroke-width: 2; }
.nep .nep-scene .nep-tick { stroke: var(--accent-blue); stroke-width: 2.2; }

/* first paint: the heading, the answer, then the case's trip, left to right */
.nep-js .nep-hero__h1 > * { animation: nep-up 900ms var(--nep-ease) both; }
.nep-js .nep-hero__h1 > em { animation-delay: 110ms; }
.nep-js .nep-hero__text > * { animation: nep-up 900ms var(--nep-ease) 240ms both; }
.nep-js .nep-hero__actions { animation-delay: 340ms; }
.nep-js .nep-scene .nep-d { stroke-dasharray: 1; animation: nep-draw 700ms var(--nep-ease) both; }
.nep-js .nep-scene__call .nep-d { animation-delay: 400ms; }
.nep-js .nep-scene .nep-dot { animation: nep-up 300ms ease 900ms both; }
.nep-js .nep-scene .nep-ring { animation: nep-up 400ms ease 620ms both; }
.nep-js .nep-scene .nep-ring--b { animation-delay: 710ms; }
.nep-js .nep-scene .nep-link--1 { animation-delay: 810ms; animation-duration: 500ms; }
.nep-js .nep-scene__file .nep-d { animation-delay: 1050ms; }
.nep-js .nep-scene .nep-sheet { animation: nep-slip 560ms var(--nep-ease) 1330ms both; }
.nep-js .nep-scene .nep-sheet--b { animation-delay: 1440ms; }
.nep-js .nep-scene .nep-link--2 { animation-delay: 1670ms; animation-duration: 500ms; }
.nep-js .nep-scene__team .nep-d { animation-delay: 1890ms; }
.nep-js .nep-scene .nep-team__rules { animation: nep-up 400ms ease 2170ms both; }
.nep-js .nep-scene .nep-head { animation: nep-pop 440ms var(--nep-ease) calc(2080ms + var(--i) * 150ms) both; }
.nep-js .nep-scene .nep-link--3 { animation-delay: 2450ms; animation-duration: 500ms; }
.nep-js .nep-scene__letter .nep-d { animation-delay: 2670ms; }
.nep-js .nep-scene .nep-letter__rules { animation: nep-up 400ms ease 2940ms both; }
.nep-js .nep-scene .nep-letter__sign { animation-delay: 3070ms; animation-duration: 600ms; }
.nep-js .nep-scene .nep-seal { animation: nep-stamp 460ms var(--nep-ease) 3380ms both; }
.nep-js .nep-scene .nep-tick { animation-delay: 3560ms; animation-duration: 420ms; }
/* the phone goes on ringing only while the hero is on screen */
.nep-hero__fig.is-live .nep-ring { animation: nep-ring 2.6s ease-in-out infinite; }
.nep-hero__fig.is-live .nep-ring--b { animation-delay: 260ms; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.nep .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(--nep-ease), visibility 0s 360ms;
}
.nep .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--nep-ease); }
body.nep.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.nep .hc-bar__track {
  max-width: calc(1240px + 2 * var(--nep-gut)); margin: 0 auto; padding: 0 var(--nep-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;
}
.nep .hc-bar__track::-webkit-scrollbar { display: none; }
.nep .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;
}
.nep .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(--nep-ease);
}
.nep .hc-bar__track a:hover, .nep .hc-bar__track a[aria-current] { color: var(--ink); }
.nep .hc-bar__track a:hover::after { transform: scaleX(.35); }
.nep .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.nep .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.nep .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));
}

/* ============ WHY A CALL ============ */
.nep-call { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.nep .nep-call h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.nep-call__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nep-call__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.nep-call__text p + p { margin-top: 18px; }
.nep .nep-call__point { font-family: var(--font-display); font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.25; color: var(--ink); margin-top: 28px; padding-left: 20px; border-left: 2px solid var(--accent-blue); }

.nep-ask__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border-strong); }
.nep-folder { flex: none; width: 132px; height: auto; overflow: visible; }
.nep .nep-folder :is(.nep-folder__back, .nep-folder__front, .nep-folder__sheet) { fill: #fff; }
.nep .nep-folder :is(path, rect) { stroke-width: 2.4; }
.nep .nep-folder .nep-folder__sheet { stroke: var(--accent-blue); stroke-width: 1.9; }
.nep-ask__list li { position: relative; padding: 13px 0 13px 30px; font-size: 17px; line-height: 1.45; color: var(--ink-soft); border-bottom: 1px solid var(--border); }
/* each row is a sheet in the folder */
.nep-ask__list li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 13px; height: 17px; border: 1.5px solid var(--accent-blue); border-radius: 2px; background: linear-gradient(var(--accent-blue), var(--accent-blue)) 3px 5px / 5px 1.5px no-repeat; }
/* the eight things file into the folder, one for each row */
.nep-js .nep-ask.is-in .nep-folder__sheet { animation: nep-drop 520ms var(--nep-ease) calc(120ms + var(--i) * 110ms) both; }
.nep-js .nep-ask.is-in .nep-ask__list li { animation: nep-row 560ms var(--nep-ease) calc(160ms + var(--i) * 110ms) both; }
.nep-js .nep-ask:not(.is-in) :is(.nep-folder__sheet, .nep-ask__list li) { opacity: 0; }

/* ============ THE STEPS (the page's one tinted band) ============ */
.nep-steps { padding-block: clamp(48px, 6vw, 96px); background: var(--accent-wash); }
.nep-steps__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nep-steps__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.nep-steps__head p { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
/* five marks under the heading keep count of the stops reached while the list scrolls past */
.nep-pips { display: flex; gap: 8px; margin-top: 28px; }
.nep-pips i { width: 36px; height: 3px; border-radius: 2px; background: var(--accent-blue); transform-origin: left; transition: background-color 500ms, transform 500ms var(--nep-ease); }
.nep-js .nep-pips i:not(.is-on) { background: rgba(11, 29, 58, .18); transform: scaleX(.6); }
.nep-route li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 clamp(18px, 2vw, 28px); padding-bottom: clamp(28px, 3.4vw, 44px); }
.nep-route li:last-child { padding-bottom: 0; }
/* one connector per gap, badge to badge, and nothing after the last */
.nep-route li:not(:last-child)::before, .nep-route li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; }
.nep-route li:not(:last-child)::before { background: rgba(11, 29, 58, .16); }
.nep-route li:not(:last-child)::after { background: var(--accent-blue); transform-origin: top; transition: transform 700ms var(--nep-ease); }
.nep-route__badge { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent-blue); transition: border-color 400ms, background-color 400ms; }
.nep-route__badge svg { width: 30px; height: 30px; overflow: visible; }
.nep .nep-route__badge svg :is(path, rect, circle) { stroke-width: 1.6; transition: stroke 400ms; }
.nep-route__body { padding-top: 12px; }
.nep-route__body p { margin-top: 8px; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
/* with the script running, a stop lights as the reader reaches it */
.nep-js .nep-route li:not(.is-passed)::after { transform: scaleY(0); }
.nep-js .nep-route li:not(.is-passed) .nep-route__badge { border-color: rgba(11, 29, 58, .24); }
.nep-js .nep-route li:not(.is-passed) .nep-route__badge svg :is(path, rect, circle) { stroke: var(--ink-muted); }
.nep-js .nep-route li.is-passed .nep-route__badge { animation: nep-halo 900ms ease-out both; }
.nep-js .nep-route li.is-passed .nep-route__badge svg :is(path, rect, circle) { stroke-dasharray: 1; animation: nep-draw 800ms var(--nep-ease) both; }

/* ============ THE WRITTEN DECISION (navy) ============ */
.nep-out { padding-block: clamp(56px, 7vw, 104px); background: var(--navy-brand); color: #fff; }
.nep .nep-out h2 { color: #fff; }
.nep .nep-out h2 > em { color: var(--accent-ice); }
.nep .nep-out__lede { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--nep-on-navy); }
.nep-out__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid rgba(255, 255, 255, .22); }
.nep-out__way { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 40px) 0; border-left: 1px solid rgba(255, 255, 255, .22); }
.nep-out__way:first-child { padding-left: 0; border-left: 0; }
.nep-out__way:last-child { padding-right: 0; }
.nep-out__way svg { width: 64px; height: 64px; overflow: visible; margin-bottom: 20px; }
.nep .nep-out__way svg :is(path, rect, circle) { stroke: #fff; stroke-width: 1.25; }
.nep .nep-out__way svg .nep-out__mark { stroke: var(--accent-ice); stroke-width: 1.7; }
.nep .nep-out__way h3 { color: #fff; }
.nep-out__way p { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--nep-on-navy); }
@supports not (grid-template-rows: subgrid) {
  .nep-out__way { display: block; }
}
/* the three letters are dealt from the middle; each mark is drawn last */
.nep-out__way:nth-child(1) { --from: 60px; }
.nep-out__way:nth-child(3) { --from: -60px; }
.nep-js .nep-out__row:not(.is-in) .nep-out__way { opacity: 0; }
.nep-js .nep-out__row.is-in .nep-out__way { animation: nep-deal 760ms var(--nep-ease) both; }
.nep-js .nep-out__row.is-in .nep-out__way:nth-child(2) { animation-delay: 0ms; }
.nep-js .nep-out__row.is-in .nep-out__way:nth-child(1) { animation-delay: 140ms; }
.nep-js .nep-out__row.is-in .nep-out__way:nth-child(3) { animation-delay: 280ms; }
.nep-js .nep-out__row.is-in .nep-out__mark { stroke-dasharray: 1; animation: nep-draw 620ms var(--nep-ease) 900ms both; }

/* ============ QUESTIONS ============ */
.nep-faq { padding-block: clamp(48px, 6vw, 96px); }
.nep .nep-faq h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.nep-faq__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nep-talk { display: block; width: min(100%, 200px); height: auto; margin-top: 8px; overflow: visible; }
.nep .nep-talk path { stroke-width: 1.1; }
.nep .nep-talk .nep-talk__q { stroke: var(--accent-blue); stroke-width: 1.4; }
.nep .nep-talk .nep-talk__a { stroke: var(--ink-muted); }
.nep-js .nep-talk :is(path) { stroke-dasharray: 1; }
.nep-js .nep-talk:not(.is-in) path { stroke-dashoffset: 1; opacity: 0; }
.nep-js .nep-talk.is-in path { animation: nep-draw 800ms var(--nep-ease) both; }
.nep-js .nep-talk.is-in .nep-talk__q { animation-delay: 500ms; }
.nep-js .nep-talk.is-in .nep-talk__a { animation-delay: 950ms; }
.nep-faq__list { border-top: 1px solid var(--border-strong); }
.nep-faq__list details { border-bottom: 1px solid var(--border); }
.nep-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.25; color: var(--ink); transition: color 200ms; }
.nep-faq__list summary::-webkit-details-marker { display: none; }
.nep-faq__list summary::after { content: none; }
.nep-faq__list summary:hover { color: var(--accent-blue-hover); }
/* a plus that turns into a minus */
.nep-faq__list summary i { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%; transition: transform 420ms var(--nep-ease), border-color 200ms, background-color 200ms; }
.nep-faq__list summary i::before, .nep-faq__list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); transition: transform 420ms var(--nep-ease), background-color 200ms; }
.nep-faq__list summary i::after { transform: rotate(90deg); }
.nep-faq__list summary:hover i { border-color: var(--accent-blue); transform: rotate(90deg); }
.nep-faq__list details[open] summary i { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.nep-faq__list details[open] summary i::before, .nep-faq__list details[open] summary i::after { background: #fff; }
.nep-faq__list details[open] summary i::after { transform: rotate(0deg); }
/* the press is felt before the answer opens */
.nep-faq__list summary:active i { transform: scale(.88); }
.nep-faq__a { padding: 0 52px 24px 0; }
.nep-faq__a p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.nep-faq__list details[open] .nep-faq__a { animation: nep-unfold 420ms var(--nep-ease) both; }
.nep-js .nep-faq__list:not(.is-in) details { opacity: 0; }
.nep-js .nep-faq__list.is-in details { animation: nep-up 700ms var(--nep-ease) calc(var(--i) * 90ms) both; }

/* ============ KEEP READING ============ */
.nep-next { border-top: 1px solid var(--border); padding-block: clamp(28px, 3.4vw, 44px); }
.nep-next__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px clamp(24px, 4vw, 56px); }
.nep .nep-next h2 { font-size: clamp(1.3rem, 1.7vw, 1.55rem); font-weight: 400; }
.nep .nep-next ul { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 3vw, 44px); }
.nep-next a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; font-weight: 500; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.nep-next a span { display: inline-block; transition: transform 360ms var(--nep-ease); }
.nep-next a:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.nep-next a:hover span { transform: translateX(6px); }

/* ============ START (navy) ============ */
.nep-end { padding-block: clamp(56px, 7vw, 104px); background: var(--navy-brand); color: #fff; }
.nep-end__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.nep .nep-end h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.4rem); }
.nep-end__text p { margin: 18px 0 30px; font-size: 18px; line-height: 1.65; color: var(--nep-on-navy); }
.nep-end__text .nep-end__note { margin: 28px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.nep-end__letter { width: clamp(96px, 11vw, 150px); height: auto; overflow: visible; }
.nep .nep-end__letter :is(path, rect, circle) { stroke: rgba(255, 255, 255, .7); stroke-width: 1.3; }
.nep .nep-end__letter .nep-end__seal { stroke: var(--accent-ice); stroke-width: 1.8; }
.nep-js .nep-end__letter :is(path, rect, circle) { stroke-dasharray: 1; }
.nep-js .nep-end__letter:not(.is-in) :is(path, rect, circle) { stroke-dashoffset: 1; opacity: 0; }
.nep-js .nep-end__letter.is-in :is(path, rect, circle) { animation: nep-draw 900ms var(--nep-ease) both; }
.nep-js .nep-end__letter.is-in .nep-end__seal { animation-delay: 800ms; }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .nep .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: 900px) {
  .nep-hero__row, .nep-call__grid, .nep-steps__grid, .nep-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .nep-hero__fig { max-width: 560px; }
  .nep-steps__head { position: static; }
  .nep-pips { display: none; }
  .nep-ask__list { columns: 2; column-gap: 40px; }
  .nep-ask__list li { break-inside: avoid; }
  .nep-faq__grid { gap: 20px; }
  .nep-talk { width: 104px; margin-top: 0; }
  .nep-out__row { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; border-top: 0; }
  .nep-out__way { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding: 24px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
  .nep-out__way svg { width: 52px; height: 52px; grid-row: span 2; margin: 0; }
  .nep-out__way:nth-child(n) { --from: 0px; }
  .nep-out__way :is(h3, p) { grid-column: 2; }
}
@media (max-width: 640px) {
  html:has(body.nep) { --hc-bar-h: 48px; }
  .nep .hc-bar__track { gap: 22px; }
  .nep-hero__actions .btn { width: 100%; }
  .nep .nep-scene :is(path, rect, circle) { stroke-width: 2.5; }
  .nep .nep-scene :is(.nep-thin, .nep-link) { stroke-width: 2; }
  .nep .nep-scene :is(.nep-seal, .nep-tick) { stroke-width: 3; }
  .nep .nep-talk path { stroke-width: 1.9; }
  .nep-folder { width: 96px; }
  .nep-ask__list { columns: 1; }
  .nep-route li { grid-template-columns: 48px minmax(0, 1fr); }
  .nep-route__badge { width: 48px; height: 48px; }
  .nep-route__badge svg { width: 26px; height: 26px; }
  .nep-route li:not(:last-child)::before, .nep-route li:not(:last-child)::after { left: 23px; top: 48px; }
  .nep-route__body { padding-top: 8px; }
  .nep-faq__a { padding-right: 0; }
  .nep-end__grid { grid-template-columns: minmax(0, 1fr); }
  .nep-end__letter { display: none; }
  .nep-end .btn { width: 100%; }
  .nep-next__row, .nep .nep-next ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nep .nep-next h2 { margin-bottom: 10px; }
  .nep-next li { border-top: 1px solid var(--border); }
  .nep-next a { display: flex; justify-content: space-between; min-height: 52px; padding-block: 8px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .nep main *, .nep main *::before, .nep main *::after { animation: none !important; transition: none !important; }
  .nep-js [data-r], .nep-js [data-r] * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .nep-js .nep-route li::after, .nep-js .nep-pips i { transform: none !important; }
  .nep .hc-bar { transition: none !important; }
  .nep-go:hover span, .nep-next a:hover span, .nep-faq__list summary:hover i { transform: none; }
}

/* 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. */
.nep main { overflow-x: clip; }

/* Paper is taken the instant the print dialog opens: nothing may still be
   fading, sliding or half drawn, and the navy bands print dark on white. */
@media print {
  .nep main *, .nep main *::before, .nep main *::after { animation: none !important; transition: none !important; }
  .nep .hc-bar { display: none !important; }
  .nep-js [data-r], .nep-js [data-r] *, .nep-js .nep-scene * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .nep-js .nep-route li::after { transform: none !important; }
  .nep-js .nep-route li .nep-route__badge { border-color: var(--accent-blue) !important; }
  .nep-js .nep-route li .nep-route__badge svg :is(path, rect, circle) { stroke: var(--ink) !important; }
  .nep-steps__head { position: static; }
  .nep-pips { display: none; }
  .nep-steps, .nep-out, .nep-end { background: #fff; }
  .nep :is(.nep-out, .nep-end) :is(h2, h2 > em, h3, p) { color: var(--ink) !important; }
  .nep :is(.nep-out, .nep-end) svg :is(path, rect, circle) { stroke: var(--ink) !important; }
  .nep-out__row, .nep-out__way { border-color: var(--border-strong); }
  /* every answer is open on paper, so its handle has nothing to do */
  .nep-faq__list summary i { display: none; }
}