/* Neatsparks components. Every colour, size and duration comes from tokens.css; the only literals are the 2016 Lab ports. */

/* ---------- base ---------- */
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/26px var(--font-body); -webkit-font-smoothing: antialiased; }
.ns-host { display: contents; }
.ns-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ns-wrap { max-width: var(--content-max); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ns-eyebrow { margin: 0; font: 500 13px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ns-link { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ns-link:hover { text-decoration-thickness: 2px; }

/* ---------- spark and logo ---------- */
.ns-spark { display: inline-block; flex: none; vertical-align: -.1em; }
.ns-spark--neat path { fill: var(--neat); }
.ns-spark--spark path { fill: var(--spark); }
.ns-spark--ember path { fill: var(--ember); }
.ns-spark--flare path { fill: var(--flare); }
.ns-spark--starlight path { fill: var(--starlight); }
.ns-spark--ink path { fill: currentColor; }

.ns-logo { --k: 1; display: inline-block; width: calc(143px * var(--k)); line-height: 0; user-select: none; }
.ns-logo__frames { display: flex; height: calc(100px * var(--k)); }
.ns-logo__frame { width: 50%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
.ns-logo__frame--right { transform: translate(calc(-3px * var(--k)), calc(-17px * var(--k))); }
.ns-logo__cell { display: grid; place-items: center; min-height: 0; }
.ns-logo__cell svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ns-logo__cell--med svg { width: 80%; }
.ns-logo__cell--small svg { width: 65%; }
.ns-logo__cell--m path { fill: var(--spark); }
.ns-logo__cell--o path { fill: var(--neat); }
.ns-logo__cell--mo path { fill: var(--ember); }
.ns-logo__cell--mo2 path { fill: var(--flare); }
.ns-logo__word { margin-top: calc(14px * var(--k)); }
.ns-logo__word svg { width: 100%; height: auto; display: block; overflow: visible; }
.ns-logo__neat { fill: var(--neat); }
.ns-logo__sparks { fill: var(--spark); }
.ns-logo--row { display: inline-flex; align-items: center; gap: calc(16px * var(--k)); width: auto; padding-top: calc(17px * var(--k)); }
.ns-logo--row .ns-logo__frames { width: calc(143px * var(--k)); flex: none; }
.ns-logo--row .ns-logo__word { margin: 0; width: calc(300px * var(--k)); }

/* ---------- the sky: hero, spark field, orbit, sky map ---------- */
.ns-field { position: relative; overflow: hidden; background: radial-gradient(90% 80% at 50% 110%, var(--dusk), var(--night) 70%); }
.ns-field__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ns-field--fallback .ns-field__canvas { display: none; }

.ns-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: var(--starlight); }
.ns-hero > .ns-field { position: absolute; inset: 0; z-index: -1; }
.ns-hero__inner { max-width: var(--content-max); margin-inline: auto; padding-block: var(--space-18) var(--space-24); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.ns-hero__brand { display: grid; gap: var(--space-4); justify-items: start; }
.ns-hero__tagline { margin: 0; font: 400 13px/20px var(--font-mono); color: var(--starlight-muted); }
.ns-hero__title { margin: 0; max-width: 15ch; font: 800 clamp(40px, 6vw, 62px)/1.03 var(--font-display); letter-spacing: -.02em; text-wrap: balance; color: var(--starlight); }
.ns-hero__title em { font-style: normal; background: linear-gradient(90deg, var(--neat), var(--spark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ns-hero__lead { margin: var(--space-4) 0 0; max-width: var(--measure); color: var(--starlight-muted); }
@media (max-width: 760px) {
  .ns-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-12) var(--space-18); }
  .ns-hero__brand .ns-logo { --k: .9 !important; }
}

.ns-orbit { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; --p: 0; }
.ns-orbit--fixed { position: fixed; z-index: -1; }
.ns-orbit__layer { position: absolute; left: 50%; top: 115%; width: 240%; aspect-ratio: 1; translate: -50% -50%; rotate: calc(var(--p) * var(--turn)); }
.ns-orbit__star { position: absolute; width: 13.663px; height: 13.513px; scale: var(--s); clip-path: path("M6.942,0.017c0,3.834-3.108,6.942-6.942,6.942c3.701,0,6.732,2.904,6.937,6.554c0.201-3.575,3.129-6.437,6.726-6.551C9.934,6.843,6.942,3.776,6.942,0.017"); animation: ns-flick ease-in-out infinite alternate; }
.ns-orbit__star--neat { background: var(--neat); }
.ns-orbit__star--spark { background: var(--spark); }
.ns-orbit__star--starlight { background: var(--starlight); }
@keyframes ns-flick { to { opacity: .25; } }
@supports (animation-timeline: scroll()) {
  .ns-orbit--timeline .ns-orbit__layer { animation: ns-orbit-turn linear both; animation-timeline: scroll(root block); }
}
@keyframes ns-orbit-turn { from { rotate: 0deg; } to { rotate: var(--turn); } }

.ns-skymap-wrap { overflow-x: auto; background: var(--night); border-radius: var(--radius-lg); }
.ns-skymap { display: block; width: 100%; min-width: 760px; height: auto; }
.ns-skymap text { font: 400 12.5px var(--font-mono); fill: var(--starlight-muted); }
.ns-skymap .ns-skymap__group { font-size: 11px; letter-spacing: .16em; fill: var(--starlight-faint); }
.ns-skymap__link { stroke: var(--night-edge); stroke-width: 1; }
.ns-skymap__spark--neat { fill: var(--neat); }
.ns-skymap__spark--spark { fill: var(--spark); }
.ns-skymap__spark--ember { fill: var(--ember); }
.ns-skymap__node { outline: none; }
.ns-skymap__node:hover text, .ns-skymap__node:focus-visible text { fill: var(--starlight); }
.ns-skymap__node:focus-visible path { stroke: var(--starlight); stroke-width: 1.2px; }

/* ---------- infographics: constellations and scenes (always on the sky) ---------- */
.ns-constellation, .ns-scene { position: relative; background: var(--night); }
.ns-constellation:not(:has(.ns-lc)) { padding: var(--space-6); }
.ns-constellation__hub { margin: 0 0 var(--space-3); font: 600 16px/1.3 var(--font-display); color: var(--starlight); }
.ns-constellation__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ns-constellation__list li { font: 400 13px/20px var(--font-mono); color: var(--starlight-muted); border: 1px solid var(--night-edge); border-radius: var(--radius-pill); padding: 2px 10px; }
.ns-constellation__list li.is-outcome { color: var(--neat); border-color: var(--neat); }
.ns-scene__alt { margin: 0; padding: var(--space-6); font: 400 13px/20px var(--font-mono); color: var(--starlight-muted); }

.ns-lc { position: relative; width: 100%; aspect-ratio: 480 / 250; container-type: inline-size; }
.ns-lc canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ns-lc__l, .ns-lc__hub { position: absolute; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-fade) var(--ease-spark), color var(--dur-hover); }
.ns-lc__l { font: 400 clamp(9px, 2.3cqw, 11px)/14px var(--font-mono); color: var(--starlight-muted); }
.ns-lc__l.is-on, .ns-lc__hub.is-on { opacity: 1; }
.ns-lc__l.is-outcome { color: var(--neat); font-weight: 500; }
.ns-lc__l.is-hot { color: var(--starlight); }
.ns-lc__l--r { transform: translate(0, -50%); }
.ns-lc__l--l { transform: translate(-100%, -50%); }
.ns-lc__l--t { transform: translate(-50%, -100%); }
.ns-lc__l--b { transform: translate(-50%, 0); }
.ns-lc__hub { transform: translate(-50%, 0); font: 600 clamp(11px, 2.9cqw, 14px)/1 var(--font-display); color: var(--starlight); padding: 5px 11px; border-radius: var(--radius-pill); background: var(--night-high); border: 1px solid var(--night-edge); }

/* ---------- content ---------- */
.ns-stat { display: grid; gap: var(--space-1); }
.ns-stat__value { margin: 0; font: 800 40px/40px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--neat-text); }
.ns-stat__was { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 2px; }
.ns-stat__arrow { margin-inline: .2em; font-weight: 400; color: var(--ink-faint); }
.ns-stat__label { margin: 0; font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }

.ns-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ns-tag { display: inline-block; font: 400 13px/20px var(--font-mono); color: var(--ink-muted); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px 11px; }
.ns-tag--neat { color: var(--neat-text); border-color: var(--neat-text); }

.ns-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-4); font: 500 16px/1 var(--font-body); color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color var(--dur-hover), border-color var(--dur-hover), box-shadow var(--dur-hover); }
.ns-btn:hover { border-color: var(--neat); box-shadow: var(--glow-neat); }
.ns-btn--primary { background: var(--neat); border-color: var(--neat); color: var(--on-neat); }
.ns-btn--primary:hover { background: var(--flare); border-color: var(--flare); }
.ns-btn:focus-visible, .ns-header__motion:focus-visible, .ns-labtile__toggle:focus-visible { outline-color: transparent; box-shadow: var(--focus-ring); }

.ns-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8) var(--space-12); align-items: center; padding-block: var(--space-12); scroll-margin-top: var(--header-h); }
.ns-chapter--flip .ns-chapter__text { order: 2; }
.ns-chapter__text { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.ns-chapter__title { margin: 0; font: 700 40px/44px var(--font-display); letter-spacing: -.015em; text-wrap: balance; color: var(--ink); }
.ns-chapter__promise { margin: 0; max-width: var(--measure); font: 500 16px/26px var(--font-body); color: var(--ink); }
.ns-chapter__body { margin: 0; max-width: var(--measure); color: var(--ink-muted); }
.ns-chapter__deliver { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ns-chapter__deliver li { display: flex; align-items: baseline; gap: var(--space-3); }
.ns-chapter__visual { min-width: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--night); }
@media (max-width: 860px) {
  .ns-chapter { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8); }
  .ns-chapter--flip .ns-chapter__text { order: 0; }
}
@media (max-width: 600px) { .ns-chapter__title { font-size: 30px; line-height: 34px; } }

.ns-work { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--ground-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ns-work__head { display: grid; gap: var(--space-2); }
.ns-work__title { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.ns-work__what { margin: 0; max-width: var(--measure); color: var(--ink-muted); }
.ns-work__stats { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-12); }

.ns-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); }
.ns-steps__item { display: grid; gap: var(--space-3); align-content: start; }
.ns-steps__mark { display: flex; align-items: center; gap: var(--space-2); }
.ns-steps__mark::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ns-steps__num { font: 500 13px/16px var(--font-mono); letter-spacing: .12em; color: var(--ink-faint); }
.ns-steps__title { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.ns-steps__body { margin: 0; color: var(--ink-muted); }

/* ---------- the Lab ---------- */
.ns-labtile { display: grid; gap: var(--space-3); align-content: start; }
.ns-labtile__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--night); transition: box-shadow var(--dur-hover); }
.ns-labtile:hover .ns-labtile__frame { box-shadow: var(--glow-neat); }
.ns-labtile__stage { position: absolute; inset: 0; overflow: hidden; --lab-scale: .25; }
.ns-labtile__stage > * { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(var(--lab-scale)); transform-origin: 0 0; }
.ns-labtile__stage > .ns-field { width: 100%; height: 100%; transform: none; }
.ns-labtile__poster--c1, .ns-labtile__poster--c3 { background: radial-gradient(ellipse at center, var(--neat) 0%, var(--spark) 100%); }
.ns-labtile__poster--spark-field { background: radial-gradient(90% 80% at 50% 110%, var(--dusk), var(--night) 70%); }
.ns-labtile__toggle { position: absolute; right: var(--space-2); bottom: var(--space-2); font: 500 13px/1 var(--font-mono); color: var(--starlight); background: var(--night-high); border: 1px solid var(--night-line-strong); border-radius: var(--radius-pill); padding: 7px 12px; cursor: pointer; }
.ns-labtile__title { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.ns-labtile__note { margin: 0; font: 400 13px/20px var(--font-mono); color: var(--ink-faint); }
.ns-labtile__stage.is-paused *, [data-motion="paused"] .ns-labtile__stage * { animation-play-state: paused !important; }

/* c1 and c3, as they were in 2016 (pages/_c3.scss). The white, #333 and in-out-circ curve are the originals. */
.ns-c1 { overflow: hidden; background: radial-gradient(ellipse at center, var(--neat) 0%, var(--spark) 100%); }
.ns-c1__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; perspective: 120rem; transform-style: preserve-3d; animation: ns-c1-rotate 250s linear infinite; }
.ns-c1__layer--1 { animation-duration: 150s; animation-timing-function: ease-in; }
.ns-c1__layer--3 { animation-duration: 300s; }
.ns-c1__layer--4 { animation-duration: 290s; }
.ns-c1__star { position: absolute; opacity: .6; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.663 13.513'%3E%3Cpath d='M6.942,0.017c0,3.834-3.108,6.942-6.942,6.942c3.701,0,6.732,2.904,6.937,6.554c0.201-3.575,3.129-6.437,6.726-6.551C9.934,6.843,6.942,3.776,6.942,0.017'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.663 13.513'%3E%3Cpath d='M6.942,0.017c0,3.834-3.108,6.942-6.942,6.942c3.701,0,6.732,2.904,6.937,6.554c0.201-3.575,3.129-6.437,6.726-6.551C9.934,6.843,6.942,3.776,6.942,0.017'/%3E%3C/svg%3E") center / contain no-repeat; animation: ns-c1-flicker cubic-bezier(.785, .135, .15, .86) infinite alternate; }
.ns-c1__logo { position: absolute; inset: 0; margin: auto; width: 143px; height: 100px; top: -52px; left: 7px; }
.ns-c1__logo .ns-logo path { fill: #fff; }
.ns-c3__box { position: absolute; top: -30em; font-size: 16px; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.ns-c3__box > div { height: 110em; background: #333; animation: ns-c3-rock 3s ease-in-out infinite; }
@keyframes ns-c1-rotate { to { transform: rotate(360deg); } }
@keyframes ns-c1-flicker { to { opacity: .25; } }
@keyframes ns-c3-move1 { 50% { transform: translate(30em, 0); } }
@keyframes ns-c3-move2 { 50% { transform: translate(-10em, 0); } }
@keyframes ns-c3-rock { 50% { transform: rotate(10deg); } }

/* ---------- chrome: header, footer, consent ---------- */
.ns-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground-raised) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ns-header__inner { max-width: var(--content-max); min-height: var(--header-h); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; gap: var(--space-2) var(--space-6); }
.ns-header__home { display: inline-flex; flex: none; border-radius: var(--radius-sm); }
.ns-header__nav { flex: 1; min-width: 0; }
.ns-header__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; }
.ns-header__nav a { display: block; padding-block: var(--space-2); font: 500 13px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink-muted); text-decoration: none; }
.ns-header__nav a:hover, .ns-header__nav a[aria-current] { color: var(--ink); }
.ns-header__nav a[aria-current] { box-shadow: inset 0 -2px var(--neat); }
.ns-header__motion { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding-inline: var(--space-3); font: 500 13px/1 var(--font-mono); color: var(--ink-muted); background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); cursor: pointer; }
.ns-header__motion:hover { color: var(--ink); }
@media (max-width: 720px) {
  .ns-header__inner { flex-wrap: wrap; padding-block: var(--space-2); }
  .ns-header__home { margin-right: auto; }
  .ns-header__nav { order: 3; flex-basis: 100%; }
}

.ns-footer { background: var(--ground-sunken); border-top: 1px solid var(--line); }
.ns-footer__inner { max-width: var(--content-max); margin-inline: auto; padding-block: var(--space-12); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.ns-footer__brand { display: grid; gap: var(--space-3); margin-right: auto; }
.ns-footer__tagline, .ns-footer__legal { margin: 0; font: 400 13px/20px var(--font-mono); color: var(--ink-faint); }
.ns-footer__consent { font: 400 13px/20px var(--font-mono); }

.ns-consent { position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 720px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-6); background: var(--ground-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); animation: ns-rise var(--dur-rise) var(--ease-spark) both; }
.ns-consent[hidden] { display: none; }
.ns-consent--inline { position: static; margin: 0; }
.ns-consent__text { flex: 1 1 320px; min-width: 0; display: grid; gap: var(--space-2); }
.ns-consent__title { margin: 0; font: 600 16px/26px var(--font-body); color: var(--ink); }
.ns-consent__text p { margin: 0; color: var(--ink-muted); }
.ns-consent .ns-consent__status { font: 400 13px/20px var(--font-mono); color: var(--neat-text); }
.ns-consent__status:empty { display: none; }
.ns-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@keyframes ns-rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- motion: the system setting and the visitor's switch ---------- */
[data-motion="paused"] .ns-orbit__star { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ns-orbit__star, .ns-consent { animation: none; }
  .ns-orbit--timeline .ns-orbit__layer { animation: none; }
  .ns-lc__l, .ns-lc__hub, .ns-btn, .ns-labtile__frame { transition: none; }
}