/* Our Approach (Beau 2026-10-26: "something like that to showcase what we can do for other companies", "just build it
   off the case study structure"). Lextant's case-study rhythm in this site's own parts: her dark and light sections,
   her eyebrow, her gold button. The pictures are example screens of the work we did for Company X, each tagged
   Example and described in words for screen readers; they size to their frame, not to the window. */
body.nh.pal-b .apx { --apx-r: 18px; --apx-gap: 72px; }
body.nh.pal-b .apx .apx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the title block: the case's name and its client line */
body.nh.pal-b .apx-hero { padding: 48px 0 64px; }
body.nh.pal-b .apx .apx-h1 { max-width: 19ch; margin-top: 18px; font-family: var(--cond); font-weight: 400; font-size: clamp(42px, 9vw, 88px); line-height: 1.02; letter-spacing: -0.01em; color: var(--paper, #fff); text-wrap: balance; }
body.nh.pal-b .apx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid rgba(211, 216, 226, 0.22); }
body.nh.pal-b .apx-fact dt { font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nh-gold); }
body.nh.pal-b .apx-fact dd { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--nh-on-navy); }
@media (min-width: 901px) {
  body.nh.pal-b .apx-hero { padding: 72px 0 96px; }
  body.nh.pal-b .apx-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
  body.nh.pal-b .apx-fact dd { font-size: 17px; }
}

/* a beat: a small numbered label and short text beside a giant picture, alternating */
body.nh.pal-b .apx-beat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; scroll-margin-top: 96px; }
body.nh.pal-b .apx-beat + .apx-beat { margin-top: 88px; }
body.nh.pal-b .apx .apx-n { display: flex; align-items: baseline; gap: 12px; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nh-gold-ink); }
body.nh.pal-b .apx .apx-n span { font-weight: 700; color: var(--nh-head); }
body.nh.pal-b .lg .apx-beat-h, body.nh.pal-b .apx .apx-beat-h { margin-top: 16px; font-family: var(--cond); font-weight: 400; font-size: clamp(32px, 7vw, 52px); line-height: 1.04; letter-spacing: -0.005em; text-transform: none; color: var(--nh-head) !important; text-wrap: balance; }
body.nh.pal-b .apx .apx-fig { font-size: clamp(76px, 16vw, 144px); line-height: 0.92; }
body.nh.pal-b .apx .apx-beat-p { max-width: 34em; margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--nh-ink-2); text-wrap: pretty; }
body.nh.pal-b .apx-pains, body.nh.pal-b .apx-fixes { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
body.nh.pal-b .apx-pains li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.45; color: var(--nh-ink); }
body.nh.pal-b .apx-pains li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 14px; height: 2px; background: var(--nh-gold); }
body.nh.pal-b .apx-fixes li { padding-top: 12px; border-top: 1px solid var(--nh-rule); font-size: 16px; line-height: 1.5; color: var(--nh-ink-2); }
body.nh.pal-b .apx-fixes b { color: var(--nh-head); font-weight: 600; }
@media (min-width: 901px) {
  body.nh.pal-b .apx-beat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--apx-gap); }
  body.nh.pal-b .apx-beat.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  body.nh.pal-b .apx-beat.is-flip > .apx-beat-text { order: 2; }
  body.nh.pal-b .apx-beat + .apx-beat { margin-top: 136px; }
}

/* the giant picture: a soft panel holding one example screen */
body.nh.pal-b .apx-pic { margin: 0; }
body.nh.pal-b .apx-pic-in { container-type: inline-size; position: relative; padding: 18px; border-radius: var(--apx-r); background: var(--nh-cool-2); border: 1px solid var(--nh-rule); }
@media (min-width: 901px) { body.nh.pal-b .apx-pic-in { padding: 32px; } }

/* ---- the example screens --------------------------------------------------------------------------------------- */
body.nh.pal-b .apx-scr { position: relative; display: grid; gap: 14px; font-family: var(--body); font-size: 13px; line-height: 1.35; color: var(--nh-ink); }
body.nh.pal-b .apx-tag { position: absolute; z-index: 2; top: -8px; right: -6px; padding: 4px 9px; border-radius: 999px; background: var(--nh-navy); color: var(--nh-on-navy); font-family: var(--mono); font-size: 10.5px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
body.nh.pal-b .apx-app, body.nh.pal-b .apx-site { overflow: hidden; border-radius: 12px; background: #ffffff; border: 1px solid var(--nh-rule); box-shadow: 0 18px 40px -24px rgba(26, 31, 46, 0.35); }
body.nh.pal-b .apx-app-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--nh-navy); color: #ffffff; }
body.nh.pal-b .apx-app-bar b { font-size: 13px; font-weight: 600; }
body.nh.pal-b .apx-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--nh-gold); }
body.nh.pal-b .apx-app-tabs { display: flex; gap: 4px; margin-left: auto; }
body.nh.pal-b .apx-app-tabs em { padding: 4px 8px; border-radius: 6px; font-style: normal; font-size: 12px; color: var(--nh-on-navy-2); }
body.nh.pal-b .apx-app-tabs em.is-on { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
body.nh.pal-b .apx-url { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--nh-rule); font-family: var(--mono); font-size: 11.5px; color: var(--nh-ink-2); background: var(--nh-cool); }
body.nh.pal-b .apx-dot { width: 7px; height: 7px; border-radius: 50%; background: #3f9a6b; }
body.nh.pal-b .apx-table { display: grid; }
body.nh.pal-b .apx-tr { display: grid; grid-template-columns: 1.1fr 0.8fr 1.1fr 0.8fr; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-top: 1px solid var(--nh-rule); }
body.nh.pal-b .apx-th { min-height: 32px; border-top: 0; font-size: 11.5px; font-weight: 600; color: var(--nh-ink-2); background: var(--nh-cool); }
body.nh.pal-b .apx-tr-new { background: rgba(212, 166, 78, 0.12); }
body.nh.pal-b .apx-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
body.nh.pal-b .apx-chip-ok { background: #e3f1e9; color: #1f6b45; }
body.nh.pal-b .apx-chip-hold { background: #f6ecd8; color: #7a5a1c; }
body.nh.pal-b .apx-chip-sold { background: #ecedf1; color: #4a5163; }
body.nh.pal-b .apx-chip-item { background: #e6eef6; color: #27466b; }
body.nh.pal-b .apx-tick { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid rgba(26, 31, 46, 0.3); vertical-align: -3px; }
body.nh.pal-b .apx-tick.is-on { border-color: var(--nh-navy); background: var(--nh-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d4a64e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 13px no-repeat; }
body.nh.pal-b .apx-thumb { display: block; aspect-ratio: 1; border-radius: 6px; }
body.nh.pal-b .apx-col-photo .apx-thumb { width: 26px; }
body.nh.pal-b .apx-t1 { background: linear-gradient(140deg, #e7d6b1, #c9a464); }
body.nh.pal-b .apx-t2 { background: linear-gradient(140deg, #cfe3e4, #8dc2c5); }
body.nh.pal-b .apx-t3 { background: linear-gradient(140deg, #d9dce4, #9aa1b3); }
body.nh.pal-b .apx-t4 { background: linear-gradient(140deg, #efdcc6, #c88f5a); }
body.nh.pal-b .apx-t5 { background: linear-gradient(140deg, #e3e0ec, #8c86a8); }
body.nh.pal-b .apx-arrow { display: grid; place-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nh-gold-ink); }
body.nh.pal-b .apx-arrow::before { content: ""; width: 2px; height: 26px; background: linear-gradient(var(--nh-gold), var(--nh-gold)) center / 2px 100% no-repeat; -webkit-mask: linear-gradient(#000 0 0); }
body.nh.pal-b .apx-arrow::after { content: ""; width: 9px; height: 9px; margin-top: -10px; border-right: 2px solid var(--nh-gold); border-bottom: 2px solid var(--nh-gold); transform: rotate(45deg); }
body.nh.pal-b .apx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; }
body.nh.pal-b .apx-card { display: grid; gap: 4px; }
body.nh.pal-b .apx-card b { margin-top: 4px; font-size: 12.5px; font-weight: 600; }
body.nh.pal-b .apx-card small { font-size: 11px; color: #1f6b45; }
body.nh.pal-b .apx-card-new .apx-thumb { box-shadow: 0 0 0 2px var(--nh-gold); }
body.nh.pal-b .apx-field { display: grid; gap: 4px; margin: 0; }
body.nh.pal-b .apx-field small { font-size: 11px; font-weight: 600; color: var(--nh-ink-2); }
body.nh.pal-b .apx-input { display: block; min-height: 32px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--nh-rule); background: #ffffff; font-size: 12.5px; }
body.nh.pal-b .apx-input.is-focus { border-color: var(--nh-gold-ink); box-shadow: 0 0 0 3px rgba(212, 166, 78, 0.22); }
body.nh.pal-b .apx-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--nh-ink); }
body.nh.pal-b .apx-btns { display: flex; gap: 8px; margin: 2px 0 0; }
body.nh.pal-b .apx-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--nh-rule); font-size: 12px; font-weight: 600; background: #ffffff; }
body.nh.pal-b .apx-btn-dark { border-color: var(--nh-navy); background: var(--nh-navy); color: #ffffff; }
body.nh.pal-b .apx-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 11.5px; color: var(--nh-ink-2); }
body.nh.pal-b .apx-editor { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
body.nh.pal-b .apx-layers { margin: 0; padding: 10px 8px; list-style: none; border-right: 1px solid var(--nh-rule); background: var(--nh-cool); }
body.nh.pal-b .apx-layers li { padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--nh-ink-2); }
body.nh.pal-b .apx-layers li.is-on { background: #ffffff; color: var(--nh-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--nh-rule); }
body.nh.pal-b .apx-fields, body.nh.pal-b .apx-form { display: grid; gap: 10px; padding: 12px; }
body.nh.pal-b .apx-preview { display: grid; gap: 6px; justify-items: start; padding: 12px; }
body.nh.pal-b .apx-hero-img { width: 100%; aspect-ratio: 16 / 7; }
body.nh.pal-b .apx-preview b { margin-top: 4px; font-family: var(--cond); font-weight: 400; font-size: 20px; line-height: 1.05; }
body.nh.pal-b .apx-preview small { font-size: 12px; color: var(--nh-ink-2); }
body.nh.pal-b .apx-table-inq .apx-tr { grid-template-columns: 1.2fr 1fr 0.8fr; }
body.nh.pal-b .apx-table-checks .apx-tr { grid-template-columns: 1.8fr 0.7fr 0.5fr; }
body.nh.pal-b .apx-base { padding: 12px 14px 6px; }
body.nh.pal-b .apx-base-h { display: grid; gap: 2px; margin: 0 0 8px; }
body.nh.pal-b .apx-base-h b { font-size: 13px; }
body.nh.pal-b .apx-base-h small { font-size: 11px; color: var(--nh-ink-2); }
body.nh.pal-b .apx-spark { display: block; width: 100%; height: 84px; overflow: visible; }
body.nh.pal-b .apx-spark-grid { stroke: var(--nh-rule); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
body.nh.pal-b .apx-spark-line { stroke: var(--nh-gold-ink); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
body.nh.pal-b .apx-spark-dot { fill: var(--nh-gold); stroke: #ffffff; stroke-width: 2; vector-effect: non-scaling-stroke; }
body.nh.pal-b .apx-weeks { display: flex; justify-content: space-between; margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--nh-ink-2); }

/* the before picture: four tools, each on its own, nothing joining them */
body.nh.pal-b .apx-scr-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 14px 6px; }
body.nh.pal-b .apx-pc { display: grid; gap: 8px; justify-items: start; min-height: 132px; padding: 20px; border-radius: 12px; background: #ffffff; border: 1px dashed rgba(26, 31, 46, 0.28); }
body.nh.pal-b .apx-pc b { font-size: 17px; }
body.nh.pal-b .apx-pc i { font-style: normal; font-size: 13.5px; line-height: 1.4; color: var(--nh-ink-2); }
body.nh.pal-b .apx-pc-a { transform: rotate(-2deg); } body.nh.pal-b .apx-pc-b { transform: rotate(1.5deg) translateY(10px); }
body.nh.pal-b .apx-pc-c { transform: rotate(1deg); } body.nh.pal-b .apx-pc-d { transform: rotate(-1.5deg) translateY(8px); }
body.nh.pal-b .apx-pc-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--nh-cool-2) center / 22px no-repeat; }
body.nh.pal-b .apx-ic-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
body.nh.pal-b .apx-ic-sheet { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2e' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M4 15h16M10 4v16'/%3E%3C/svg%3E"); }
body.nh.pal-b .apx-ic-site { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2e' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
body.nh.pal-b .apx-ic-search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1f2e' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }

/* two-part screens sit side by side once their frame is wide enough */
@container (min-width: 600px) {
  body.nh.pal-b .apx-scr-publish { grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
  body.nh.pal-b .apx-scr-inbox { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: 16px; }
  body.nh.pal-b .apx-scr-edit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  body.nh.pal-b .apx-scr-publish .apx-arrow, body.nh.pal-b .apx-scr-inbox .apx-arrow { grid-auto-flow: column; }
  body.nh.pal-b .apx-scr-publish .apx-arrow::before, body.nh.pal-b .apx-scr-inbox .apx-arrow::before { width: 26px; height: 2px; }
  body.nh.pal-b .apx-scr-publish .apx-arrow::after, body.nh.pal-b .apx-scr-inbox .apx-arrow::after { margin: 0 0 0 -10px; transform: rotate(-45deg); }
  body.nh.pal-b .apx-scr-publish .apx-arrow span, body.nh.pal-b .apx-scr-inbox .apx-arrow span { position: absolute; transform: translateY(-16px); }
  body.nh.pal-b .apx-scr-publish .apx-arrow, body.nh.pal-b .apx-scr-inbox .apx-arrow { position: relative; }
}
@container (max-width: 420px) {
  body.nh.pal-b .apx-tr { grid-template-columns: 1fr 1.1fr 0.6fr; }
  body.nh.pal-b .apx-col-photo { display: none; }
  body.nh.pal-b .apx-table-inq .apx-tr { grid-template-columns: 1.1fr 1fr; }
  body.nh.pal-b .apx-col-when { display: none; }
  body.nh.pal-b .apx-editor { grid-template-columns: minmax(0, 1fr); }
  body.nh.pal-b .apx-layers { display: none; }
  body.nh.pal-b .apx-app-tabs em:not(.is-on) { display: none; }
}

/* the impact: the one figure, before and after */
body.nh.pal-b .apx-impact .wrap { display: grid; gap: 20px; }
body.nh.pal-b .apx-impact-n { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; font-family: var(--cond); font-weight: 400; line-height: 1; }
body.nh.pal-b .apx-from { font-size: clamp(30px, 6vw, 56px); color: var(--nh-on-navy-2); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(212, 166, 78, 0.7); }
body.nh.pal-b .apx-to { font-size: clamp(56px, 12vw, 128px); color: var(--nh-gold); }
body.nh.pal-b .apx-to-arrow { width: 48px; height: 2px; background: var(--nh-gold); position: relative; }
body.nh.pal-b .apx-to-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border-right: 2px solid var(--nh-gold); border-top: 2px solid var(--nh-gold); transform: rotate(45deg); }
body.nh.pal-b .apx-impact-p { max-width: 36em; margin: 0; font-size: 18px; line-height: 1.55; color: var(--nh-on-navy); }

/* the call */
body.nh.pal-b .apx-cta .wrap { display: grid; justify-items: start; gap: 16px; }
body.nh.pal-b .lg .apx-cta-h, body.nh.pal-b .apx .apx-cta-h { max-width: 18ch; margin: 0; font-family: var(--cond); font-weight: 400; font-size: clamp(36px, 7vw, 64px); line-height: 1.02; text-transform: none; color: var(--nh-head) !important; text-wrap: balance; }
body.nh.pal-b .apx-cta-p { max-width: 34em; margin: 0; font-size: 18px; line-height: 1.55; color: var(--nh-ink-2); }
body.nh.pal-b .apx-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 12px 0 0; }
body.nh.pal-b .apx-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--nh-head); text-decoration: none; }
body.nh.pal-b .apx-more:hover { text-decoration: underline; text-underline-offset: 4px; }
body.nh.pal-b .apx-more:focus-visible { outline: 2px solid var(--nh-gold-ink); outline-offset: 3px; border-radius: 4px; }

/* motion: a picture rises into place once as it arrives; only where the script runs and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  body.nh.pal-b .apx-js .apx-pic { 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); }
  body.nh.pal-b .apx-js .apx-pic.is-in { opacity: 1; transform: none; }
  body.nh.pal-b .apx-js .apx-pic.is-in .apx-tr-new, body.nh.pal-b .apx-js .apx-pic.is-in .apx-card-new { animation: apx-new 1.4s 0.5s cubic-bezier(0.23, 1, 0.32, 1) backwards; }
}
@keyframes apx-new { from { background-color: rgba(212, 166, 78, 0.42); } }

/* C playthrough: on a computer the stage holds still while the four fixes scroll past it, and its screen follows them;
   a phone (and a narrow window) gets each screen under its own step */
body.nh.pal-b .lg .apx-intro-h, body.nh.pal-b .apx .apx-intro-h { margin: 0; font-family: var(--cond); font-weight: 400; font-size: clamp(36px, 7vw, 64px); line-height: 1.02; text-transform: none; color: var(--nh-head) !important; }
body.nh.pal-b .apx-intro-p { max-width: 40em; margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--nh-ink-2); text-wrap: pretty; }
body.nh.pal-b .apx-play-grid { display: grid; gap: 0; margin-top: 48px; }
body.nh.pal-b .apx-step { padding: 28px 0 40px; border-top: 1px solid var(--nh-rule); scroll-margin-top: 96px; }
body.nh.pal-b .lg .apx-step-h, body.nh.pal-b .apx .apx-step-h { margin-top: 14px; font-family: var(--cond); font-weight: 400; font-size: clamp(30px, 6vw, 44px); line-height: 1.04; text-transform: none; color: var(--nh-head) !important; }
body.nh.pal-b .apx-play .apx-n { display: block; letter-spacing: 0.04em; text-transform: none; font-size: 14px; line-height: 1.5; }
body.nh.pal-b .apx-play .apx-n span { margin-right: 10px; letter-spacing: 0.08em; }
body.nh.pal-b .apx-step-pic { margin-top: 24px; }
body.nh.pal-b .apx-stage { display: none; }
@media (min-width: 1024px) {
  body.nh.pal-b .apx-play-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  body.nh.pal-b .apx-step { min-height: 62vh; padding: 36px 0 36px 22px; border-left: 3px solid transparent; transition: border-color 0.3s ease; }
  body.nh.pal-b .apx-js .apx-step.is-on { border-left-color: var(--nh-gold); }
  body.nh.pal-b .apx-step-pic .apx-pic-in { display: none; }
  body.nh.pal-b .apx-step-pic { margin: 0; }
  body.nh.pal-b .apx-stage { display: block; position: sticky; top: 112px; }
  body.nh.pal-b .apx-stage-in { container-type: inline-size; display: grid; padding: 40px; border-radius: 18px; background: var(--nh-cool-2); border: 1px solid var(--nh-rule); }
  body.nh.pal-b .apx-stage-scr { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 0.4s; }
  body.nh.pal-b .apx-stage-scr.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  body.nh.pal-b .apx-stage-scr, body.nh.pal-b .apx-step { transition: none; transform: none; }
}

/* C1 walk and C2 assemble: one back office and one website that stay put while the four fixes scroll past; only what
   is inside them changes. Every layer keeps its room (they stack in one grid cell), so a swap never moves the page.
   Without the script each screen is drawn in its done state; the script holds back what an act has not done yet. */
body.nh.pal-b .apx-sys { --apx-ease: cubic-bezier(0.23, 1, 0.32, 1); --apx-move: cubic-bezier(0.77, 0, 0.175, 1); position: relative; display: grid; font-family: var(--body); font-size: 13px; line-height: 1.35; color: var(--nh-ink); }
body.nh.pal-b .apx-sys-body, body.nh.pal-b .apx-flow, body.nh.pal-b .apx-url-t { display: grid; }
body.nh.pal-b .apx-sys-body > .apx-layer, body.nh.pal-b .apx-flow > .apx-layer, body.nh.pal-b .apx-url-t > .apx-layer { grid-area: 1 / 1; min-width: 0; }
body.nh.pal-b .apx-layer { opacity: 0; visibility: hidden; }
body.nh.pal-b .apx-layer.is-on { opacity: 1; visibility: visible; }
body.nh.pal-b .apx-url-t > .apx-layer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the arrow between them: down when the back office feeds the website, up when the website files into the back office */
body.nh.pal-b .apx-flow { min-height: 50px; place-items: center; }
body.nh.pal-b .apx-flowline { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nh-gold-ink); }
body.nh.pal-b .apx-flowline b { font-weight: 500; }
body.nh.pal-b .apx-fl { position: relative; width: 2px; height: 30px; border-radius: 2px; background: var(--nh-gold); overflow: visible; }
body.nh.pal-b .apx-fl::after { content: ""; position: absolute; left: -4px; width: 8px; height: 8px; border-right: 2px solid var(--nh-gold); border-bottom: 2px solid var(--nh-gold); }
body.nh.pal-b .is-down .apx-fl::after { bottom: 0; transform: rotate(45deg); }
body.nh.pal-b .is-up .apx-fl::after { top: 0; transform: rotate(-135deg); }
body.nh.pal-b .apx-fl::before { content: ""; position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--nh-gold); opacity: 0; }

/* the tabs: one pill slides to the open one (the script sizes it; without it the open tab is shaded as before) */
body.nh.pal-b .apx-sys .apx-app-tabs { position: relative; }
body.nh.pal-b .apx-sys .apx-app-tabs em { position: relative; z-index: 1; transition: color 0.3s ease; }
body.nh.pal-b .apx-tab-pill { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.14); transition: transform 0.4s var(--apx-move), width 0.4s var(--apx-move); }
body.nh.pal-b .apx-js .apx-sys .apx-app-tabs em.is-on { background: none; }
@media (hover: hover) and (pointer: fine) { body.nh.pal-b .apx-js .apx-stage .apx-app-tabs em { cursor: pointer; } }

/* the back office's other parts, kept compact so the whole stage fits a laptop window (a shorter window scales the
   stage down to fit, see system.js) */
@media (min-width: 1024px) { body.nh.pal-b .apx-stage-in { padding: 28px; transform-origin: 50% 0; } }
body.nh.pal-b .apx-sys .apx-tr { min-height: 34px; }
body.nh.pal-b .apx-sys .apx-th { min-height: 30px; }
body.nh.pal-b .apx-sys .apx-spark { height: 52px; }
body.nh.pal-b .apx-sys .apx-hero-img { aspect-ratio: 16 / 4.5; }
body.nh.pal-b .apx-sys .apx-form, body.nh.pal-b .apx-sys .apx-fields { gap: 8px; padding: 10px 12px; }
body.nh.pal-b .apx-sys .apx-input { min-height: 28px; padding: 5px 10px; }
body.nh.pal-b .apx-sys .apx-cards { padding: 10px 12px; }
body.nh.pal-b .apx-sys .apx-caret { visibility: hidden; }
body.nh.pal-b .apx-sys .apx-input.is-focus { border-color: var(--nh-gold-ink); box-shadow: 0 0 0 3px rgba(212, 166, 78, 0.22); }
body.nh.pal-b .apx-sys .apx-input.is-focus .apx-caret { visibility: visible; animation: apx-blink 1s steps(1) infinite; }
body.nh.pal-b .apx-sys .apx-input.is-sel .apx-type { background: rgba(212, 166, 78, 0.35); }
body.nh.pal-b .apx-sys .apx-type { white-space: nowrap; }
body.nh.pal-b .apx-sys .apx-in-h, body.nh.pal-b .apx-sys .apx-in-m { overflow: hidden; white-space: nowrap; }
body.nh.pal-b .apx-type-pv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.nh.pal-b .apx-map { display: grid; margin: 0; padding: 6px 12px 10px; list-style: none; }
body.nh.pal-b .apx-map li { display: flex; align-items: center; justify-content: space-between; min-height: 30px; border-top: 1px solid var(--nh-rule); }
body.nh.pal-b .apx-map li:first-child { border-top: 0; }
body.nh.pal-b .apx-map code { font-family: var(--mono); font-size: 11.5px; color: var(--nh-ink); }
@keyframes apx-blink { 50% { visibility: hidden; } }

/* the hand: a pointer that works the screen the way the owner (or a customer) would; the script adds and moves it */
body.nh.pal-b .apx-hand { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; will-change: transform; transition: opacity 0.24s var(--apx-ease); }
body.nh.pal-b .apx-hand.is-on { opacity: 1; }
body.nh.pal-b .apx-hand svg { display: block; width: 20px; height: 20px; fill: var(--nh-navy); stroke: #ffffff; stroke-width: 1.5; stroke-linejoin: round; transform-origin: 5px 3px; transition: transform 0.14s var(--apx-ease); }
body.nh.pal-b .apx-hand.is-press svg { transform: scale(0.86); }
body.nh.pal-b .apx-hand b { position: absolute; left: 15px; top: 17px; padding: 2px 8px; border-radius: 999px; background: var(--nh-navy); color: #ffffff; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
body.nh.pal-b .apx-sys .apx-tick, body.nh.pal-b .apx-sys .apx-btn-go { transition: transform 0.12s var(--apx-ease); }
body.nh.pal-b .apx-sys .is-press { transform: scale(0.94); }

/* what an act has not done yet: the script marks it on the frame (data-pre) and takes the mark off as the hand does it */
body.nh.pal-b .apx-sys[data-pre~="p-tick"] .apx-layer[data-scr="publish"] .apx-tr-new .apx-tick.is-on { background: none; border-color: rgba(26, 31, 46, 0.3); }
body.nh.pal-b .apx-sys[data-pre~="p-tick"] .apx-layer[data-scr="publish"] .apx-tr-new { background: none; }
body.nh.pal-b .apx-sys[data-pre~="p-card"] .apx-card-new { opacity: 0; transform: translateY(8px) scale(0.97); }
body.nh.pal-b .apx-sys[data-pre~="i-row"] .apx-layer[data-scr="inbox"] .apx-tr-new { opacity: 0; transform: translateY(-6px); }
body.nh.pal-b .apx-sys[data-pre~="f-run"] .apx-spark { clip-path: inset(-6px 100% -6px -6px); }
body.nh.pal-b .apx-sys[data-pre~="f-run"] .apx-table-checks .apx-tick.is-on { background: none; border-color: rgba(26, 31, 46, 0.3); }
body.nh.pal-b .apx-sys[data-pre~="f-run"] .apx-map li { opacity: 0; transform: translateX(-6px); }

/* C2: the four loose pieces, and the back office's tabs they dock into (a tab not docked yet is an empty slot) */
body.nh.pal-b .apx-tray { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
body.nh.pal-b .apx-tray .apx-pc { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 8px; min-height: 0; padding: 8px 10px; border-radius: 10px; transform: none; transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; }
body.nh.pal-b .apx-tray .apx-pc:nth-child(odd) { transform: rotate(-1.2deg); }
body.nh.pal-b .apx-tray .apx-pc:nth-child(even) { transform: rotate(1deg) translateY(3px); }
body.nh.pal-b .apx-tray .apx-pc-ic { grid-row: span 2; width: 26px; height: 26px; border-radius: 7px; background-size: 16px; }
body.nh.pal-b .apx-tray .apx-pc b { font-size: 13px; line-height: 1.2; }
body.nh.pal-b .apx-tray .apx-pc i { font-size: 11.5px; line-height: 1.25; }
body.nh.pal-b .apx-tray .apx-pc.is-docked { transform: none; border-style: solid; border-color: var(--nh-rule); background: var(--nh-cool); }
body.nh.pal-b .apx-tray .apx-pc.is-docked i { text-decoration: line-through; text-decoration-color: var(--nh-gold-ink); text-decoration-thickness: 1.5px; }
body.nh.pal-b .apx-sys-dock .apx-app-tabs em:not(.is-docked) { color: transparent; outline: 1px dashed rgba(255, 255, 255, 0.38); outline-offset: -1px; }
body.nh.pal-b .apx-sys-dock.is-zero .apx-sys-app, body.nh.pal-b .apx-sys-dock.is-zero .apx-sys-site { opacity: 0.5; }
body.nh.pal-b .apx-sys-dock .apx-sys-app, body.nh.pal-b .apx-sys-dock .apx-sys-site { transition: opacity 0.4s ease; }
body.nh.pal-b .apx-fly { position: absolute; z-index: 6; left: 0; top: 0; display: grid; place-items: center; border-radius: 6px; background: #ffffff; color: var(--nh-navy); font-size: 12px; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(26, 31, 46, 0.5); pointer-events: none; transform-origin: 0 0; }

/* C4: the words play along. A phrase of the fix lights as the hand does it (a marker under it), and once the fix is done
   its before line is struck; without the script, or before its act, the words are plain */
body.nh.pal-b .apx .apx-n .apx-was { margin-right: 0; font-weight: inherit; letter-spacing: inherit; color: inherit; background: linear-gradient(var(--nh-gold-ink), var(--nh-gold-ink)) 0 56% / 0% 1.5px no-repeat; }
body.nh.pal-b .apx .apx-step.is-done .apx-was { background-size: 100% 1.5px; }
body.nh.pal-b .apx-bt { background: linear-gradient(transparent 36%, rgba(212, 166, 78, 0.3) 36%, rgba(212, 166, 78, 0.3) 92%, transparent 92%) 0 0 / 0% 100% no-repeat; }
body.nh.pal-b .apx-step-h .apx-bt { background-image: linear-gradient(transparent 50%, rgba(212, 166, 78, 0.45) 50%, rgba(212, 166, 78, 0.45) 86%, transparent 86%); }
body.nh.pal-b .apx-bt.is-lit { background-size: 100% 100%; }

/* C4: the back office says what was just done, in its bar, and Inquiries carries a badge once the inquiry is in (the
   script holds each note back, p-note to f-note, and the badge with i-row, until its act has done it) */
body.nh.pal-b .apx-notes { display: grid; min-width: 0; margin-left: auto; }
body.nh.pal-b .apx-notes > .apx-layer { grid-area: 1 / 1; min-width: 0; }
body.nh.pal-b .apx-notes + .apx-app-tabs { margin-left: 12px; }
@container (max-width: 520px) { body.nh.pal-b .apx-app-bar > b:has(+ .apx-notes) { display: none; } }   /* a narrow stage (a 1024 window) */
body.nh.pal-b .apx-note { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; color: #ffffff; }
body.nh.pal-b .apx-note i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--nh-gold); }
body.nh.pal-b .apx-note i::after { content: ""; position: absolute; left: 4.6px; top: 2.4px; width: 3.4px; height: 6.6px; border-right: 1.6px solid var(--nh-navy); border-bottom: 1.6px solid var(--nh-navy); transform: rotate(45deg); }
body.nh.pal-b .apx-sys[data-pre~="p-note"] .apx-notes [data-scr="publish"] .apx-note, body.nh.pal-b .apx-sys[data-pre~="e-note"] .apx-notes [data-scr="edit"] .apx-note,
body.nh.pal-b .apx-sys[data-pre~="i-note"] .apx-notes [data-scr="inbox"] .apx-note, body.nh.pal-b .apx-sys[data-pre~="f-note"] .apx-notes [data-scr="found"] .apx-note { opacity: 0; transform: translateX(8px); }
body.nh.pal-b .apx-badge { position: absolute; z-index: 2; top: -7px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--nh-gold); color: var(--nh-navy); font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
body.nh.pal-b .apx-sys[data-pre~="i-row"] .apx-badge, body.nh.pal-b .apx-sys-dock .apx-app-tabs em:not(.is-docked) .apx-badge { opacity: 0; transform: scale(0.5); }

/* C4: the opening. Before the first fix the four pieces lie loose and big over the empty back office (the script works
   out where: --apx-sc); they gather into the tray as the reader starts */
body.nh.pal-b .apx-sys-scatter .apx-tray { position: relative; z-index: 4; }
body.nh.pal-b .apx-sys-scatter > .apx-tag { z-index: 5; }
body.nh.pal-b .apx-sys-scatter.is-zero .apx-tray .apx-pc { transform: var(--apx-sc, none); }

/* on a phone the tabs stay, smaller, so the docking shows; the back office's name gives way to them */
@container (max-width: 420px) {
  body.nh.pal-b .apx-sys .apx-app-bar b { display: none; }
  body.nh.pal-b .apx-sys .apx-app-tabs em, body.nh.pal-b .apx-sys .apx-app-tabs em:not(.is-on) { display: inline-block; padding: 3px 6px; font-size: 11px; }
  body.nh.pal-b .apx-tray { grid-template-columns: minmax(0, 1fr); }
  body.nh.pal-b .apx-notes { display: none; }
}

/* motion, only where it is welcome: the swap blurs and comes from the side the reader is scrolling toward, and what an
   act does eases in */
@media (prefers-reduced-motion: no-preference) {
  body.nh.pal-b .apx-js .apx-sys .apx-layer { filter: blur(4px); transform: translateY(calc(var(--apx-d, 1) * 10px)); transition: opacity 0.45s var(--apx-ease), transform 0.45s var(--apx-ease), filter 0.45s var(--apx-ease), visibility 0s 0.45s; }
  body.nh.pal-b .apx-js .apx-sys .apx-layer.is-on { filter: none; transform: none; transition-delay: 0s; }
  body.nh.pal-b .apx-js .apx-sys .apx-layer.is-was { transform: translateY(calc(var(--apx-d, 1) * -10px)); }
  body.nh.pal-b .apx-js .apx-sys .apx-card-new, body.nh.pal-b .apx-js .apx-sys .apx-tr-new { transition: opacity 0.5s var(--apx-ease), transform 0.5s var(--apx-ease), background-color 0.6s ease; }
  body.nh.pal-b .apx-js .apx-sys .apx-spark { transition: clip-path 0.9s var(--apx-move); }
  body.nh.pal-b .apx-js .apx-sys .apx-map li { transition: opacity 0.35s var(--apx-ease), transform 0.35s var(--apx-ease); }
  body.nh.pal-b .apx-js .apx-sys .apx-map li:nth-child(2) { transition-delay: 0.12s; }
  body.nh.pal-b .apx-js .apx-sys .apx-map li:nth-child(3) { transition-delay: 0.24s; }
  body.nh.pal-b .apx-js .apx-sys .apx-map li:nth-child(4) { transition-delay: 0.36s; }
  body.nh.pal-b .apx-js .apx-sys .apx-table-checks .apx-tr:nth-child(2) .apx-tick { transition-delay: 0.5s; }
  body.nh.pal-b .apx-js .apx-sys .apx-table-checks .apx-tr:nth-child(3) .apx-tick { transition-delay: 0.7s; }
  body.nh.pal-b .apx-js .apx-sys .apx-table-checks .apx-tr:nth-child(4) .apx-tick { transition-delay: 0.9s; }
  body.nh.pal-b .apx-js .apx-sys .apx-table-checks .apx-tick { transition: background-color 0.2s ease, border-color 0.2s ease; }
  body.nh.pal-b .apx-js .apx-sys .apx-flowline.is-go .apx-fl::before { animation: apx-go 0.7s var(--apx-move); }
  body.nh.pal-b .apx-js .apx-sys .is-up.is-go .apx-fl::before { animation-name: apx-go-up; }
  body.nh.pal-b .apx-js .apx-sys .apx-type-pv.is-new { animation: apx-new 1.2s var(--apx-ease); }
  body.nh.pal-b .apx-js .apx-bt { transition: background-size 0.6s cubic-bezier(0.23, 1, 0.32, 1); }
  body.nh.pal-b .apx-js .apx-was { transition: background-size 0.7s cubic-bezier(0.77, 0, 0.175, 1); }
  body.nh.pal-b .apx-js .apx-note { transition: opacity 0.35s ease, transform 0.45s var(--apx-ease); }
  body.nh.pal-b .apx-js .apx-badge { transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  body.nh.pal-b .apx-js .apx-sys-scatter .apx-tray .apx-pc { transition: transform 0.75s var(--apx-move), background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease; }
  body.nh.pal-b .apx-js .apx-sys-scatter .apx-tray .apx-pc:nth-child(2) { transition-delay: 0.05s, 0s, 0s, 0s; }
  body.nh.pal-b .apx-js .apx-sys-scatter .apx-tray .apx-pc:nth-child(3) { transition-delay: 0.1s, 0s, 0s, 0s; }
  body.nh.pal-b .apx-js .apx-sys-scatter .apx-tray .apx-pc:nth-child(4) { transition-delay: 0.15s, 0s, 0s, 0s; }
}
@keyframes apx-go { from { top: -4px; opacity: 1; } 85% { opacity: 1; } to { top: 26px; opacity: 0; } }
@keyframes apx-go-up { from { top: 26px; opacity: 1; } 85% { opacity: 1; } to { top: -4px; opacity: 0; } }