/* ============================================================
   NORTHSCALE DESIGN SYSTEM — unseen.co-inspired
   Tokens + components for motion-rich, craft-heavy studio site
   ============================================================ */

/* Pool-click zoom is handled entirely in JS (ns-fluid.js playEnter).
   We intentionally DO NOT use @view-transition navigation:auto —
   that would apply to every same-origin nav, and the pageswap/
   pagereveal skip hooks aren't reliable across browser versions.
   Plain nav/menu/footer links now trigger instant browser nav with
   zero transition; only liquid pool clicks get the dramatic zoom. */

html { background: #09090b; }

:root {
  --ns-ink: #09090b;
  --ns-ink-soft: #18181b;
  --ns-cream: #EFDED9;
  --ns-cream-dim: rgba(239, 222, 217, 0.6);
  --ns-cream-mute: rgba(239, 222, 217, 0.35);
  --ns-pink: #F6C8C3;
  --ns-olive: #4A5852;
  --ns-stone: #F5F3EE;

  --ns-edge: 1rem;
  --ns-edge-lg: 2rem;
  --ns-max: 1440px;

  --ns-ease: cubic-bezier(0.7, 0, 0.3, 1);
  --ns-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================ RESET / BASE ================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body.ns-body {
  margin: 0;
  background: var(--ns-ink);
  color: var(--ns-cream);
  font-family: 'Neue Montreal', 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 768px), (hover: none) {
  body.ns-body { cursor: auto; }
}

body.ns-body.ns-light {
  background: var(--ns-stone);
  color: var(--ns-ink);
}

::selection { background: var(--ns-pink); color: var(--ns-ink); }

a { color: inherit; text-decoration: none; }
a.ns-link { position: relative; transition: color 0.3s var(--ns-ease); }
a.ns-link:hover { color: var(--ns-pink); }
a.ns-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ns-ease);
}
a.ns-link:hover::after { transform: scaleX(1); transform-origin: left; }

img, svg { display: block; max-width: 100%; }

/* ================ KEYBOARD FOCUS ================
   focus-visible only (not :focus) — so mouse users never see a ring,
   keyboard users always do. Offset + pink + thin = luxury, not chrome. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 1.5px solid var(--ns-pink);
  outline-offset: 3px;
  border-radius: 1px;
  transition: outline-offset 0.2s var(--ns-ease);
}
body.ns-light a:focus-visible,
body.ns-light button:focus-visible,
body.ns-light input:focus-visible,
body.ns-light textarea:focus-visible {
  outline-color: var(--ns-ink);
}

/* ================ TYPOGRAPHY ================ */

.ns-display {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-size: clamp(2.4rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.ns-h1 { font-size: clamp(2.2rem, 5.5vw, 5.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.ns-h2 { font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.ns-h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.ns-body { font-size: 1.15rem; line-height: 1.55; font-weight: 400; }
.ns-lead { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.5; font-weight: 400; color: var(--ns-cream-dim); }
body.ns-light .ns-lead { color: rgba(9,9,11,0.65); }

.ns-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
}
.ns-meta {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--ns-cream-dim);
}
body.ns-light .ns-meta { color: rgba(9,9,11,0.6); }

.ns-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; }
.ns-italic { font-style: italic; }
.ns-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; letter-spacing: 0.02em; }

/* ================ LAYOUT ================ */

.ns-wrap { max-width: var(--ns-max); margin: 0 auto; padding: 0 var(--ns-edge); }
@media (min-width: 768px) { .ns-wrap { padding: 0 var(--ns-edge-lg); } }

.ns-section { padding: clamp(4rem, 10vh, 9rem) 0; position: relative; }
.ns-rule { border: 0; height: 1px; background: var(--ns-cream-mute); margin: 0; }
body.ns-light .ns-rule { background: rgba(9,9,11,0.12); }

/* ================ BUTTONS (brutalist, 0 radius) ================ */

.ns-btn {
  --btn-fg: var(--ns-ink);
  --btn-bg: var(--ns-cream);
  --btn-border: var(--ns-cream);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 0;
  cursor: none;
  position: relative; overflow: hidden;
  transition: color 0.5s var(--ns-ease), background-color 0.5s var(--ns-ease);
  -webkit-appearance: none; appearance: none;
}
.ns-btn__label { position: relative; z-index: 2; display: inline-block; }
.ns-btn__label--hover {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  transform: translateY(100%);
  transition: transform 0.5s var(--ns-ease);
  z-index: 2;
}
.ns-btn:hover .ns-btn__label { transform: translateY(-100%); transition: transform 0.5s var(--ns-ease); }
.ns-btn:hover .ns-btn__label--hover { transform: translateY(0); }
.ns-btn__inner { display: inline-flex; align-items: center; gap: 0.6rem; position: relative; }

.ns-btn--fill::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: var(--ns-ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.5s var(--ns-ease);
  z-index: 1;
  will-change: transform;
}
.ns-btn--fill:hover { color: var(--ns-cream); }
.ns-btn--fill:hover::before { transform: scaleY(1); }

.ns-btn--border {
  background: transparent; --btn-fg: var(--ns-cream); --btn-border: var(--ns-cream);
}
body.ns-light .ns-btn--border { --btn-fg: var(--ns-ink); --btn-border: var(--ns-ink); }
.ns-btn--border::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: var(--ns-cream);
  transition: height 0.5s var(--ns-ease);
  z-index: 1;
}
body.ns-light .ns-btn--border::before { background: var(--ns-ink); }
.ns-btn--border:hover { color: var(--ns-ink); }
body.ns-light .ns-btn--border:hover { color: var(--ns-stone); }
.ns-btn--border:hover::before { height: 100%; }

.ns-btn__arrow {
  width: 1em; height: 1em; flex-shrink: 0;
  transform: translateY(0.05em);
  transition: transform 0.4s var(--ns-ease);
}
.ns-btn:hover .ns-btn__arrow { transform: translate(0.15em, -0.05em); }

.ns-btn--circle {
  width: 44px; height: 44px; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ns-cream-mute);
  color: var(--ns-cream); transition: all 0.4s var(--ns-ease);
}
.ns-btn--circle:hover { background: var(--ns-cream); color: var(--ns-ink); border-color: var(--ns-cream); }

/* ================ NAV (dual-text hover) ================ */

.ns-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--ns-edge);
  transform: translateY(0);
  transition: transform 0.4s var(--ns-ease);
  pointer-events: none;
  will-change: transform;
}
.ns-header > * { pointer-events: auto; }
@media (min-width: 768px) { .ns-header { padding: 1.1rem var(--ns-edge-lg); } }
.ns-header.is-scrolled { transform: translateY(-4px); }

.ns-logo {
  font-family: 'Neue Montreal', sans-serif;
  font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ns-cream); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
body.ns-light .ns-logo { color: var(--ns-ink); }
.ns-logo__mark {
  width: 10px; height: 10px; background: var(--ns-cream);
  transform: rotate(45deg);
  transition: transform 0.5s var(--ns-ease);
}
body.ns-light .ns-logo__mark { background: var(--ns-ink); }
.ns-logo:hover .ns-logo__mark { transform: rotate(225deg); }
.ns-logo__reg { font-size: 0.6rem; vertical-align: super; letter-spacing: 0; opacity: 0.6; }

.ns-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 900px) { .ns-nav { display: inline-flex; } }

.ns-nav-item {
  position: relative; overflow: hidden;
  height: 1.5em; line-height: 1.5em;
  font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em;
  display: inline-block;
}
.ns-nav-item__text,
.ns-nav-item__hover {
  display: block; transition: transform 0.5s var(--ns-ease);
}
.ns-nav-item__hover {
  position: absolute; top: 0; left: 0;
  transform: translateY(100%);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.15rem; line-height: 1.3em;
  letter-spacing: -0.02em; padding-top: 0.05em;
  color: var(--ns-pink);
}
.ns-nav-item__text { transition: transform 0.5s var(--ns-ease), color 0.35s var(--ns-ease); }
.ns-nav-item:hover .ns-nav-item__text { transform: translateY(-100%); color: var(--ns-pink); }
.ns-nav-item:hover .ns-nav-item__hover { transform: translateY(0); }
.ns-nav-item.is-active .ns-nav-item__text { color: var(--ns-pink); }

.ns-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--ns-cream); border: 0; cursor: none;
  position: relative; overflow: hidden;
}
.ns-menu-btn__dots { display: flex; gap: 4px; }
.ns-menu-btn__dots span {
  width: 4px; height: 4px; border-radius: 999px; background: var(--ns-ink);
  transition: transform 0.4s var(--ns-ease);
}
.ns-menu-btn:hover .ns-menu-btn__dots span:nth-child(1) { transform: translateX(-1px); }
.ns-menu-btn:hover .ns-menu-btn__dots span:nth-child(2) { transform: translateX(1px); }
.ns-menu-btn[aria-expanded="true"] .ns-menu-btn__dots span:nth-child(1) { transform: translate(3px,0) rotate(45deg) scaleX(2.2); }
.ns-menu-btn[aria-expanded="true"] .ns-menu-btn__dots span:nth-child(2) { transform: translate(-3px,0) rotate(-45deg) scaleX(2.2); }

/* ================ MENU OVERLAY ================ */

.ns-menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--ns-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6rem var(--ns-edge) 2rem;
  transform: translateY(-100%);
  transition: transform 0.85s var(--ns-ease);
  visibility: hidden;
}
@media (min-width: 768px) { .ns-menu { padding: 8rem var(--ns-edge-lg) 2.5rem; } }
.ns-menu.is-open { transform: translateY(0); visibility: visible; }

.ns-menu__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.ns-menu__item {
  position: relative; display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 0.35rem 0;
  color: var(--ns-cream);
  font-size: clamp(2.4rem, 8vw, 6rem);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.035em;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ns-ease), transform 0.7s var(--ns-ease);
}
.ns-menu.is-open .ns-menu__item { opacity: 1; transform: translateY(0); }
.ns-menu.is-open .ns-menu__item:nth-child(1) { transition-delay: 0.12s; }
.ns-menu.is-open .ns-menu__item:nth-child(2) { transition-delay: 0.20s; }
.ns-menu.is-open .ns-menu__item:nth-child(3) { transition-delay: 0.28s; }
.ns-menu.is-open .ns-menu__item:nth-child(4) { transition-delay: 0.36s; }
.ns-menu.is-open .ns-menu__item:nth-child(5) { transition-delay: 0.44s; }
.ns-menu.is-open .ns-menu__item:nth-child(6) { transition-delay: 0.52s; }

.ns-menu__footer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ns-ease) 0.6s, transform 0.6s var(--ns-ease) 0.6s;
}
.ns-menu.is-open .ns-menu__footer { opacity: 1; transform: translateY(0); }
.ns-menu__num {
  font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ns-cream-dim);
  margin-top: 1.1em;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ns-menu__label { position: relative; display: inline-block; overflow: hidden; height: 1.05em; }
.ns-menu__label-text,
.ns-menu__label-hover {
  display: block; transition: transform 0.55s var(--ns-ease);
}
.ns-menu__label-hover {
  position: absolute; inset: 0;
  transform: translateY(100%);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400;
}
.ns-menu__item:hover .ns-menu__label-text { transform: translateY(-100%); }
.ns-menu__item:hover .ns-menu__label-hover { transform: translateY(0); }

.ns-menu__footer {
  display: flex; flex-direction: column; gap: 2rem;
  padding-top: 2rem; border-top: 1px solid var(--ns-cream-mute);
}
@media (min-width: 768px) {
  .ns-menu__footer { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 2rem; }
}
.ns-menu__contact p { margin: 0.15rem 0; }
.ns-menu__social { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ns-menu__social a { font-size: 0.92rem; opacity: 0.8; transition: opacity 0.3s; }
.ns-menu__social a:hover { opacity: 1; color: var(--ns-pink); }

/* ================ LOADER ================ */

.ns-loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ns-ink);
  color: var(--ns-cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem;
  text-align: center;
  transition: transform 1s var(--ns-ease);
}
.ns-loader.is-done { transform: translateY(-100%); }
.ns-loader__mark {
  display: flex; gap: 0.04em;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 2rem;
  font-family: 'Neue Montreal', sans-serif;
}
.ns-loader__mark span {
  display: inline-block;
  transform: translateY(110%);
}
.ns-loader__mark.is-in span { transform: translateY(0); }
.ns-loader__mark span { transition: transform 0.9s var(--ns-ease); }
.ns-loader__geo {
  display: block;
  width: 56px; height: 22px;
  margin: 0 auto 2rem;
  opacity: 0;
  transition: opacity 0.8s var(--ns-ease) 0.4s;
}
.ns-loader__geo svg { width: 100%; height: 100%; }
.ns-loader.is-ready .ns-loader__geo { opacity: 1; }
.ns-loader__tagline {
  max-width: 30ch;
  font-size: 1rem; line-height: 1.5; color: var(--ns-cream-dim);
  margin: 0 auto 2.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s var(--ns-ease) 0.6s, transform 0.8s var(--ns-ease) 0.6s;
}
.ns-loader.is-ready .ns-loader__tagline { opacity: 1; transform: translateY(0); }
.ns-loader__enter {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease 1s, transform 0.6s var(--ns-ease) 1s;
}
.ns-loader.is-ready .ns-loader__enter { opacity: 1; transform: translateY(0); }
.ns-loader__progress {
  position: absolute; bottom: 1.5rem; left: 0; right: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ns-cream-mute);
}

/* ================ CURSOR ================ */

.ns-cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  pointer-events: none;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  will-change: transform;
  --cursor-angle: 0deg;
  --cursor-stretch: 1;
  --cursor-squash: 1;
}
.ns-cursor__dot {
  position: absolute; inset: 0;
  background: var(--ns-cream);
  border-radius: 999px;
  transform: rotate(var(--cursor-angle)) scale(var(--cursor-stretch), var(--cursor-squash));
  transition: opacity 0.3s, background 0.3s;
  box-shadow:
    0 0 0 1px rgba(239,222,217,0.15),
    0 0 24px rgba(246,200,195,0.45),
    0 0 48px rgba(239,222,217,0.2);
  mix-blend-mode: screen;
  filter: blur(0.5px);
}
.ns-cursor__ring {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px;
  border: 1px solid rgba(239,222,217,0.7);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  transition: opacity 0.35s var(--ns-ease), transform 0.45s var(--ns-ease), border-color 0.3s;
}
.ns-cursor__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }
.ns-cursor.is-hover .ns-cursor__dot { opacity: 0.25; transform: rotate(var(--cursor-angle)) scale(calc(var(--cursor-stretch) * 0.4), calc(var(--cursor-squash) * 0.4)); }
.ns-cursor.is-hover .ns-cursor__ring { opacity: 1; width: 56px; height: 56px; border-color: var(--ns-cream); }
.ns-cursor.is-drag .ns-cursor__dot { opacity: 0.15; }
.ns-cursor.is-drag .ns-cursor__ring { opacity: 1; width: 82px; height: 82px; border-color: var(--ns-pink); border-width: 1.5px; }
.ns-cursor.is-drag .ns-cursor__ring svg { opacity: 1; }
.ns-cursor.is-hold .ns-cursor__dot { opacity: 0.15; }
.ns-cursor.is-hold .ns-cursor__ring { opacity: 1; width: 68px; height: 68px; border-style: dashed; animation: ns-spin 3s linear infinite; }
.ns-cursor.is-hide { opacity: 0; }
/* Liquid state — cursor disappears entirely. The interaction is felt
   through the shader (warp + proximity reveal), not through any visible
   pointer representation. */
.ns-cursor.is-liquid { opacity: 0; }
@keyframes ns-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 768px), (hover: none) { .ns-cursor { display: none; } }

/* ================ AUDIO TOGGLE ================ */

.ns-audio-btn {
  position: fixed; bottom: 1.2rem; left: 1.2rem; z-index: 60;
  width: 42px; height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ns-cream-mute);
  color: var(--ns-cream); cursor: none;
  transition: all 0.4s var(--ns-ease);
}
body.ns-light .ns-audio-btn { color: var(--ns-ink); border-color: rgba(9,9,11,0.2); }
.ns-audio-btn:hover { background: var(--ns-cream); color: var(--ns-ink); border-color: var(--ns-cream); }
.ns-audio-btn svg { width: 14px; height: 14px; }
.ns-audio-btn .line-off { display: none; }
.ns-audio-btn[data-muted="true"] .line-on { display: none; }
.ns-audio-btn[data-muted="true"] .line-off { display: block; }

/* ================ WORLD BTN (footer) ================ */

.ns-world-btn {
  position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 60;
  width: 82px; height: 82px; border-radius: 999px;
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--ns-cream-mute);
  color: var(--ns-cream); cursor: none;
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  transition: all 0.5s var(--ns-ease);
  text-decoration: none;
}
@media (min-width: 768px) { .ns-world-btn { display: inline-flex; } }
.ns-world-btn:hover { background: var(--ns-cream); color: var(--ns-ink); border-color: var(--ns-cream); }
.ns-world-btn__globe {
  position: absolute;
  width: 28px; height: 28px;
  transition: transform 0.5s var(--ns-ease), opacity 0.3s;
}
.ns-world-btn:hover .ns-world-btn__globe { transform: scale(0.4); opacity: 0; }
.ns-world-btn__text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.4s var(--ns-ease);
}
.ns-world-btn:hover .ns-world-btn__text { opacity: 1; }
body.ns-light .ns-world-btn { color: var(--ns-ink); border-color: rgba(9,9,11,0.2); }

/* ================ PAGE-LOAD FADE ================
   Smooth arrival on every page, whether via loader, wormhole, or plain
   link-click navigation. `main` starts at opacity 0 and eases in once
   the loader has dismissed (is-loading is removed) or the page is
   otherwise ready. Prevents the "hard flash" feel on inter-page
   navigation and complements the wormhole's clip-path reveal.
   =============================================================== */
main {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body:not(.is-loading) main,
body.ns-page-ready main {
  opacity: 1;
}
body.ns-transitioning main { opacity: 1; }  /* wormhole takes over */
@media (prefers-reduced-motion: reduce) {
  main { opacity: 1; transition: none; }
}

/* ================ REVEAL ANIMATIONS ================ */

.ns-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ns-ease-out), transform 1s var(--ns-ease-out);
}
.ns-reveal:not(.is-in) { will-change: opacity, transform; }
.ns-reveal.is-in { opacity: 1; transform: translateY(0); }

.ns-reveal-mask { overflow: hidden; }
.ns-reveal-mask .ns-reveal-mask__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ns-ease-out);
}
.ns-reveal-mask:not(.is-in) .ns-reveal-mask__inner { will-change: transform; }
.ns-reveal-mask.is-in .ns-reveal-mask__inner { transform: translateY(0); }

.ns-char { display: inline-block; transform: translateY(110%); opacity: 0; }
.ns-chars-parent { overflow: hidden; display: inline-block; line-height: 1.2; }

/* ================ TAG / CHIP / META ================ */

.ns-tag {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--ns-olive);
  color: var(--ns-cream);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  border-radius: 0;
}
.ns-tag--outline { background: transparent; color: inherit; border: 1px solid currentColor; }

/* ================ CARD ================ */

.ns-card {
  background: transparent;
  border-top: 1px solid var(--ns-cream-mute);
  padding: 2rem 0;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  transition: padding 0.5s var(--ns-ease);
}
body.ns-light .ns-card { border-top-color: rgba(9,9,11,0.15); }
@media (min-width: 900px) { .ns-card { grid-template-columns: 8ch 1fr 2fr 10rem; gap: 2rem; align-items: start; } }
.ns-card:hover { padding-left: 0.5rem; }

.ns-card__num { font-family: ui-monospace, monospace; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--ns-cream-dim); }
body.ns-light .ns-card__num { color: rgba(9,9,11,0.55); }
.ns-card__title { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.025em; margin: 0; line-height: 1.1; }
.ns-card__body { color: var(--ns-cream-dim); font-size: 0.98rem; line-height: 1.55; }
body.ns-light .ns-card__body { color: rgba(9,9,11,0.7); }
.ns-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* =============================================================
   CHAPTERS — cinematic stacked blocks (replaces 3-card grid)
   Each chapter is a full-width clickable panel with a huge
   monospace number drifting behind, italic-serif title masked
   reveal, body copy, and a draw-in underline CTA.
   ============================================================= */
.ns-chapters { padding: 0 !important; }
.ns-chapter {
  position: relative;
  display: block;
  min-height: clamp(60vh, 70vh, 780px);
  padding: clamp(4rem, 10vh, 7rem) 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid rgba(9,9,11,0.10);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.8s var(--ns-ease);
}
.ns-chapter:last-child { border-bottom: 1px solid rgba(9,9,11,0.10); }
.ns-chapter::before {
  /* the colored accent wash per chapter — opacity animates in */
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.1s var(--ns-ease);
  pointer-events: none;
}
.ns-chapter.is-in::before { opacity: 1; }
.ns-chapter[data-chapter="01"]::before {
  background:
    radial-gradient(ellipse 60% 50% at 88% 18%, rgba(74,88,82,0.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 82%, rgba(239,222,217,0.55), transparent 70%);
}
.ns-chapter[data-chapter="02"]::before {
  background:
    radial-gradient(ellipse 55% 55% at 12% 30%, rgba(74,88,82,0.16), transparent 65%),
    radial-gradient(ellipse 45% 40% at 92% 78%, rgba(246,200,195,0.35), transparent 72%);
}
/* The giant decorative number — drifts behind the content with parallax */
.ns-chapter__num {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 400;
  font-size: clamp(10rem, 26vw, 26rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: rgba(9,9,11,0.055);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: color 0.8s var(--ns-ease);
}
/* Both numerals anchor at the bottom corner of their own section so the
   decorative stamp sits fully inside the chapter's overflow: hidden box,
   with just enough bleed for the intentional "cut off at the edge" feel.
   Mirrored horizontally by variant for visual rhythm. */
.ns-chapter--left  .ns-chapter__num { right: -0.08em; bottom: -0.12em; }
.ns-chapter--right .ns-chapter__num { left:  -0.08em; bottom: -0.12em; }
.ns-chapter:hover .ns-chapter__num { color: rgba(9,9,11,0.09); }

/* Vertical "spine" label on the far edge — editorial touch */
.ns-chapter__spine {
  position: absolute;
  top: 50%; transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(9,9,11,0.42);
  font-family: 'Neue Montreal', system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
.ns-chapter--left  .ns-chapter__spine { left:  1.25rem; }
.ns-chapter--right .ns-chapter__spine { right: 1.25rem; }

.ns-chapter__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ns-chapter--right .ns-chapter__body { margin-left: auto; text-align: right; }
.ns-chapter--right .ns-chapter__eyebrow { flex-direction: row-reverse; }
.ns-chapter--right .ns-chapter__cta { flex-direction: row; }

.ns-chapter__body { max-width: 58ch; }
.ns-chapter__eyebrow {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin: 0 0 1.6rem;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ns-olive);
  font-weight: 500;
}
.ns-chapter__eyebrow::before {
  content: ''; width: 2.2rem; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.8s var(--ns-ease) 0.2s;
  display: inline-block;
}
.ns-chapter.is-in .ns-chapter__eyebrow::before { transform: scaleX(1); }
.ns-chapter--right .ns-chapter__eyebrow::before { transform-origin: right; }

.ns-chapter__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(2.4rem, 7.2vw, 6rem);
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--ns-ink);
  margin: 0 0 2rem;
  overflow: hidden;
}
.ns-chapter__title > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.05s cubic-bezier(0.16,1,0.3,1) 0.1s;
  will-change: transform;
}
.ns-chapter.is-in .ns-chapter__title > span { transform: translateY(0); }

.ns-chapter__text {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.55;
  color: rgba(9,9,11,0.70);
  margin: 0 0 2.5rem;
  max-width: 44ch;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease 0.35s, transform 0.9s var(--ns-ease) 0.35s;
}
.ns-chapter.is-in .ns-chapter__text { opacity: 1; transform: translateY(0); }
.ns-chapter--right .ns-chapter__text { margin-left: auto; }

.ns-chapter__cta {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ns-ink);
  padding: 0.9rem 0;
  position: relative;
  font-weight: 500;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease 0.5s, transform 0.8s var(--ns-ease) 0.5s;
}
.ns-chapter.is-in .ns-chapter__cta { opacity: 1; transform: translateY(0); }
.ns-chapter__cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left;
  transition: transform 0.55s var(--ns-ease);
}
.ns-chapter__cta:hover::after { transform: scaleX(1.05); }
.ns-chapter__cta svg {
  width: 1.15rem; height: 1.15rem;
  transition: transform 0.35s var(--ns-ease);
}
.ns-chapter__cta:hover svg { transform: translateX(7px); }

@media (max-width: 767px) {
  .ns-chapter { min-height: 55vh; padding: 4rem 0; }
  .ns-chapter__num { font-size: clamp(7rem, 38vw, 16rem); }
  .ns-chapter__spine { display: none; }
  .ns-chapter--right .ns-chapter__body { text-align: left; margin-left: 0; }
  .ns-chapter--right .ns-chapter__text { margin-left: 0; }
  .ns-chapter--right .ns-chapter__eyebrow { flex-direction: row; }
}

/* =============================================================
   MANIFESTO — full-viewport interstitial typographic moment
   ============================================================= */
.ns-manifesto {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 1.5rem;
  overflow: hidden;
  isolation: isolate;
}
.ns-manifesto__bg {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(246,200,195,0.18), transparent 70%),
    radial-gradient(ellipse 70% 60% at 20% 20%, rgba(74,88,82,0.22), transparent 75%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(239,222,217,0.12), transparent 70%);
}
/* Scroll-scrubbed video — sits above the gradient bg, below the text.
   Colour-graded via filter to lock it to the Northscale palette and blended
   with screen so darks drop out (ink bleeds into the ink-coloured section). */
.ns-manifesto__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;            /* revealed by .is-loaded once metadata is in */
  pointer-events: none;
  transition: opacity 1.2s ease;
  mix-blend-mode: screen;
  filter: sepia(0.28) saturate(0.68) hue-rotate(-12deg) contrast(1.12) brightness(0.78);
}
.ns-manifesto__video.is-loaded { opacity: 0.62; }
/* Veil above the video — edges feather to --ns-ink so the clip dissolves
   into the sections above/below, and a soft dim ensures text stays crisp. */
.ns-manifesto__veil {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--ns-ink) 0%,
      rgba(9,9,11,0.45) 22%,
      rgba(9,9,11,0.35) 50%,
      rgba(9,9,11,0.45) 78%,
      var(--ns-ink) 100%),
    radial-gradient(ellipse 55% 45% at 50% 50%, transparent 40%, rgba(9,9,11,0.55) 100%);
}
.ns-manifesto__text,
.ns-manifesto__kicker { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .ns-manifesto__video { display: none; }
}
.ns-manifesto__text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 9rem);
  line-height: 0.98; letter-spacing: -0.045em;
  color: var(--ns-cream);
  text-align: center;
  max-width: 14ch;
  margin: 0;
}
.ns-manifesto__text .ns-line {
  display: block;
  overflow: hidden;
}
.ns-manifesto__text .ns-line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.ns-manifesto.is-in .ns-manifesto__text .ns-line > span { transform: translateY(0); }
.ns-manifesto.is-in .ns-manifesto__text .ns-line:nth-child(2) > span { transition-delay: 0.14s; }
.ns-manifesto.is-in .ns-manifesto__text .ns-line:nth-child(3) > span { transition-delay: 0.28s; }
.ns-manifesto__kicker {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ns-cream-dim);
  opacity: 0; transition: opacity 1s ease 0.8s;
}
.ns-manifesto.is-in .ns-manifesto__kicker { opacity: 1; }

/* =============================================================
   MARQUEE 2.0 — twin counter-scrolling rows + edge fades
   ============================================================= */
.ns-marquee2 {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.ns-marquee2__row {
  display: flex; align-items: center;
  white-space: nowrap;
  will-change: transform;
}
.ns-marquee2__row--top {
  animation: ns-marquee2-l 38s linear infinite;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--ns-cream);
}
.ns-marquee2__row--bot {
  animation: ns-marquee2-r 52s linear infinite;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--ns-cream-dim);
  margin-top: 1rem;
}
.ns-marquee2__row > span {
  display: inline-flex; align-items: center;
  padding: 0 1.5rem;
}
.ns-marquee2__row > span::after {
  content: '◆';
  display: inline-block; margin-left: 3rem;
  color: var(--ns-pink);
  font-size: 0.55em;
  opacity: 0.75;
  transform: translateY(-0.1em);
}
.ns-marquee2__row--bot > span::after {
  content: '—';
  color: var(--ns-olive);
  opacity: 0.7;
  font-size: 0.7em;
}
@keyframes ns-marquee2-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ns-marquee2-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

body.ns-light .ns-marquee2__row--top { color: var(--ns-ink); }
body.ns-light .ns-marquee2__row--bot { color: rgba(9,9,11,0.55); }

/* =============================================================
   TESTIMONIAL STATEMENT — single-quote hero treatment
   ============================================================= */
.ns-quote {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: center;
  padding: clamp(5rem, 10vh, 8rem) 0;
  border-top: 1px solid var(--ns-cream-mute);
  overflow: hidden;
}
.ns-quote:last-child { border-bottom: 1px solid var(--ns-cream-mute); }
body.ns-light .ns-quote,
body.ns-light .ns-quote:last-child { border-color: rgba(9,9,11,0.12); }
.ns-quote__stars {
  font-size: 0.78rem; color: var(--ns-pink);
  letter-spacing: 0.45em;
  margin: 0 0 2rem;
}
.ns-quote__body {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.8rem, 4.4vw, 4rem);
  line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ns-cream);
  margin: 0 0 2.5rem;
  max-width: 22ch;
  overflow: hidden;
}
.ns-quote__body > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.15s cubic-bezier(0.16,1,0.3,1) 0.12s;
  will-change: transform;
}
.ns-quote.is-in .ns-quote__body > span { transform: translateY(0); }
.ns-quote__meta {
  display: flex; align-items: center; gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ns-cream-mute);
  max-width: 32rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.8s ease 0.6s, transform 0.8s var(--ns-ease) 0.6s;
}
.ns-quote.is-in .ns-quote__meta { opacity: 1; transform: translateY(0); }
.ns-quote__avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--ns-olive);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  color: var(--ns-cream);
}

/* =============================================================
   SERVICE ENVIRONMENTS (services.html) — each service has its
   own immersive visual identity.  Shared shell; per-env colors,
   backgrounds, and focal elements.
   ============================================================= */
.ns-env {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ns-env__bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ns-env__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.ns-env__hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center;
  padding: clamp(6rem, 14vh, 10rem) 0 clamp(3rem, 6vh, 4rem);
}
.ns-env__meta {
  display: flex; align-items: center; gap: 1.1rem;
  margin: 0 0 2rem;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ns-olive);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s var(--ns-ease) 0.15s;
}
.ns-env.is-in .ns-env__meta { opacity: 1; transform: translateY(0); }
.ns-env__meta-rule {
  width: 3rem; height: 1px; background: currentColor;
}
.ns-env__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(3.6rem, 13vw, 14rem);
  line-height: 0.9; letter-spacing: -0.05em;
  margin: 0 0 2.5rem;
  max-width: 14ch;
}
.ns-env__title-line {
  display: block; overflow: hidden;
}
.ns-env__title-line > .ns-env__title-word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.15s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.ns-env.is-in .ns-env__title-line > .ns-env__title-word { transform: translateY(0); }
.ns-env.is-in .ns-env__title-line:nth-child(2) > .ns-env__title-word { transition-delay: 0.12s; }
.ns-env__lead {
  max-width: 54ch;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  margin: 0 0 3rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.9s ease 0.4s, transform 0.9s var(--ns-ease) 0.4s;
}
.ns-env.is-in .ns-env__lead { opacity: 1; transform: translateY(0); }
.ns-env__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: currentColor;
  opacity: 0.5;
  pointer-events: none;
}
.ns-env__scroll::after {
  content: ''; width: 1px; height: 3rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: ns-env-scroll 2.4s ease-in-out infinite;
}
@keyframes ns-env-scroll {
  0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 0.8; }
}
.ns-env__detail {
  position: relative; z-index: 2;
  padding: clamp(4rem, 10vh, 7rem) 0 clamp(5rem, 12vh, 8rem);
}
/* Minimalist service footer, timeline block + CTA on one row. */
.ns-env__footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(9,9,11,0.16);
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s var(--ns-ease);
}
.ns-env.is-detail-in .ns-env__footer { opacity: 1; transform: translateY(0); }
@media (min-width: 720px) {
  .ns-env__footer { grid-template-columns: 1fr auto; gap: 2.5rem; }
}
.ns-env__footer .ns-env__timeline { margin-top: 0; }
.ns-env__timeline {
  margin-top: 2rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid currentColor;
  border-color: rgba(9,9,11,0.16);
  background: rgba(9,9,11,0.03);
}
.ns-env__timeline-label {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.ns-env__cta {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 0;
  font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500;
  color: inherit;
  position: relative;
  margin-top: 1rem;
}
.ns-env__cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left;
  transition: transform 0.5s var(--ns-ease);
}
.ns-env__cta:hover::after { transform: scaleX(1.08); }
.ns-env__cta svg {
  width: 1rem; height: 1rem;
  transition: transform 0.35s var(--ns-ease);
}
.ns-env__cta:hover svg { transform: translateX(6px); }

/* ---- Redesign: cream/stone, olive accents, typographic ---- */
.ns-env--redesign {
  background: var(--ns-stone);
  color: var(--ns-ink);
}
.ns-env--redesign .ns-env__bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 92% 18%, rgba(74,88,82,0.10), transparent 65%),
    radial-gradient(ellipse 55% 45% at 8% 82%, rgba(246,200,195,0.14), transparent 70%);
}
.ns-env--redesign .ns-env__title { color: var(--ns-ink); }
.ns-env--redesign .ns-env__title .ns-serif-accent { color: var(--ns-olive); }
.ns-env--redesign .ns-env__timeline { background: rgba(74,88,82,0.05); border-color: rgba(74,88,82,0.3); }

/* ---- SEO & GEO: dark ink, olive + cream, knowledge-graph mood ---- */
.ns-env--seo {
  background: var(--ns-ink);
  color: var(--ns-cream);
}
.ns-env--seo .ns-env__bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 15% 25%, rgba(74,88,82,0.30), transparent 65%),
    radial-gradient(ellipse 50% 45% at 88% 75%, rgba(74,88,82,0.22), transparent 70%);
}
.ns-env--seo .ns-env__title { color: var(--ns-cream); }
.ns-env--seo .ns-env__title .ns-serif-accent { color: var(--ns-pink); }
.ns-env--seo .ns-env__meta { color: rgba(239,222,217,0.6); }
.ns-env--seo .ns-env__timeline {
  background: rgba(239,222,217,0.04);
  border-color: rgba(239,222,217,0.22);
}

/* ---- Growth: warm gradient, pink/olive/cream blend ---- */
.ns-env--growth {
  background:
    linear-gradient(168deg, #14110f 0%, #211815 45%, #2b1e1a 100%);
  color: var(--ns-cream);
}
.ns-env--growth .ns-env__bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 82% 20%, rgba(246,200,195,0.22), transparent 65%),
    radial-gradient(ellipse 55% 45% at 12% 85%, rgba(74,88,82,0.25), transparent 70%);
}
.ns-env--growth .ns-env__title { color: var(--ns-cream); }
.ns-env--growth .ns-env__title .ns-serif-accent { color: var(--ns-pink); }
.ns-env--growth .ns-env__meta { color: rgba(246,200,195,0.85); }
.ns-env--growth .ns-env__timeline {
  background: rgba(239,222,217,0.04);
  border-color: rgba(246,200,195,0.3);
}

/* ---- Smooth bg transition as sections change ---- */
.ns-env + .ns-env {
  /* soft gradient seam so colour changes don't feel abrupt */
  position: relative;
}
.ns-env + .ns-env::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -60px; height: 120px;
  background: inherit;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 50%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 50%, transparent);
}

/* ---- Sticky service-progress rail ---- */
.ns-env-progress {
  position: fixed;
  left: 1.5rem; top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: 1rem 0.6rem;
  mix-blend-mode: difference;
  pointer-events: auto;
}
.ns-env-progress__item {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.18em;
  color: rgba(239,222,217,0.42);
  text-decoration: none;
  transition: color 0.4s var(--ns-ease), gap 0.4s var(--ns-ease);
}
.ns-env-progress__item::before {
  content: ''; width: 1.2rem; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ns-ease);
}
.ns-env-progress__item.is-active {
  color: var(--ns-cream);
  gap: 1.3rem;
}
.ns-env-progress__item.is-active::before { width: 2rem; }
.ns-env-progress__item-label {
  letter-spacing: 0.16em;
}
@media (max-width: 900px) {
  .ns-env-progress { display: none; }
}

/* ---- Kinetic typographic ghosts — Redesign env background ornaments ---- */
.ns-env--redesign .ns-env__ghost {
  position: absolute;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: rgba(74,88,82,0.08);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  line-height: 1;
  z-index: 0;
}

/* ---- Kinetic title (Redesign) — letters can offset with cursor ---- */
.ns-env__kinetic {
  display: inline-block;
}
.ns-env__kinetic > span {
  display: inline-block;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* =============================================================
   FINALE CTA — cinematic end-page statement
   ============================================================= */
.ns-finale {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 6rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.ns-finale__halo {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 45% at 50% 55%, rgba(246,200,195,0.22), transparent 70%),
    radial-gradient(ellipse 70% 40% at 20% 40%, rgba(74,88,82,0.18), transparent 75%);
}
.ns-finale__eyebrow {
  font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ns-cream-dim);
  margin: 0 0 2rem;
}
.ns-finale__display {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: 0.96; letter-spacing: -0.045em;
  color: var(--ns-cream);
  margin: 0 0 3rem;
  max-width: 14ch;
}
.ns-finale__display .ns-line {
  display: block; overflow: hidden;
}
.ns-finale__display .ns-line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.ns-finale.is-in .ns-finale__display .ns-line > span { transform: translateY(0); }
.ns-finale.is-in .ns-finale__display .ns-line:nth-child(2) > span { transition-delay: 0.14s; }
.ns-finale.is-in .ns-finale__display .ns-line:nth-child(3) > span { transition-delay: 0.28s; }
.ns-finale__sub {
  color: var(--ns-cream-dim);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  max-width: 46ch;
  margin: 0 auto 3rem;
  line-height: 1.55;
}
.ns-finale__action {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 1rem;
  font-size: 0.84rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ns-cream);
  font-weight: 500;
  padding: 1.3rem 2.5rem;
  border: 1px solid var(--ns-cream);
  position: relative; overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ns-ease);
}
.ns-finale__action::before {
  content: ''; position: absolute; inset: 0;
  background: var(--ns-cream);
  transform: translateY(101%);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  z-index: -1;
}
.ns-finale__action:hover { color: var(--ns-ink); }
.ns-finale__action:hover::before { transform: translateY(0); }
.ns-finale__action svg {
  width: 1.1rem; height: 1.1rem;
  transition: transform 0.4s var(--ns-ease);
}
.ns-finale__action:hover svg { transform: translateX(7px); }

/* ================ MARQUEE ================ */

.ns-marquee { overflow: hidden; }
.ns-marquee__track {
  display: inline-flex; gap: 3rem; padding-right: 3rem;
  animation: ns-marquee 40s linear infinite;
  white-space: nowrap;
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500;
  letter-spacing: -0.03em;
}
.ns-marquee__track > span { display: inline-flex; align-items: center; gap: 3rem; }
.ns-marquee__track > span::after {
  content: '◆'; font-size: 0.7em; color: var(--ns-pink); vertical-align: middle;
}
@keyframes ns-marquee { to { transform: translateX(-50%); } }

/* ================ STATS ================ */

.ns-stat { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 0; }
.ns-stat__val {
  font-size: clamp(3rem, 8vw, 6rem); font-weight: 500;
  line-height: 0.9; letter-spacing: -0.04em;
  color: var(--ns-cream);
  font-variant-numeric: tabular-nums;
}
body.ns-light .ns-stat__val { color: var(--ns-ink); }
.ns-stat__label {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ns-cream-dim); font-weight: 500;
}
body.ns-light .ns-stat__label { color: rgba(9,9,11,0.6); }

/* =============================================================
   BASIN — "Reflections" liquid typography index
   Replaces the orb constellation. The WebGL shader (ns-shader.js)
   renders a live liquid surface; DOM-positioned typography sits
   above it, letters distorted by an SVG turbulence filter so they
   feel formed OF the liquid itself. Hovering a name calms its
   letters and brightens its corresponding reflection pool in the
   shader below; other names ghost back into the flow.
   ============================================================= */
/* =============================================================
   PAGE ATMOS — reusable atmospheric background image for hero
   sections on secondary pages (process / portfolio / about / insights)
   Each page sets its own image URL on .page-atmos__img.
   ============================================================= */
.page-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.page-atmos__img {
  position: absolute;
  inset: -10%;
  width: 120%; height: 120%;
  object-fit: cover;
  opacity: 0.28;
  filter: saturate(0.45) contrast(1.12) brightness(0.85);
  animation: page-atmos-drift 32s ease-in-out infinite alternate;
  will-change: transform;
}
/* Dark-themed pages — screen blend lifts the image into cream/pink */
.page-atmos--dark .page-atmos__img {
  mix-blend-mode: screen;
  opacity: 0.22;
}
/* Light-themed pages — multiply blend deepens the image into the stone */
.page-atmos--light .page-atmos__img {
  mix-blend-mode: multiply;
  opacity: 0.12;
  filter: saturate(0.3) contrast(1.15) brightness(1.05);
}
/* Fade the edges into the page so there's no harsh bounding rectangle */
.page-atmos::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, var(--ns-ink) 100%);
  pointer-events: none;
}
.page-atmos--light::after {
  background:
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 40%, var(--ns-stone) 100%);
}
@keyframes page-atmos-drift {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.10) translate(-2.5%, -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-atmos__img { animation: none; }
}

.ns-basin {
  position: relative;
  width: 100%;
  height: min(88vh, 860px);
  overflow: hidden;
  isolation: isolate;
  /* Native OS cursor hidden over the whole basin — only the custom
     slow-lagged ring should be visible, selling the viscous drag. */
  cursor: none;
  background:
    radial-gradient(ellipse at center, rgba(74,88,82,0.14), transparent 70%),
    #0a0a0c;
}
.ns-basin * { cursor: none; }
.ns-basin__defs {
  width: 0; height: 0;
  position: absolute; left: -10px; top: -10px;
  overflow: hidden;
}
.ns-basin__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* When the WebGL shader is active, the opaque shader canvas covers these
   blobs entirely — keep them around for the fallback path, but disable their
   blur/animation so they don't compound paint cost behind the shader. */
.ns-basin.ns-world--shader .ns-basin__sky { display: none; }
.ns-basin__sky-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px) saturate(1.3);
  opacity: 0.45;
  mix-blend-mode: screen;
}
.ns-basin__sky-blob--a {
  width: 50%; aspect-ratio: 1;
  left: -8%; top: 8%;
  background: radial-gradient(circle, #F6C8C3 0%, transparent 65%);
  animation: ns-basin-drift-a 32s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
.ns-basin__sky-blob--b {
  width: 48%; aspect-ratio: 1;
  right: -6%; bottom: -6%;
  background: radial-gradient(circle, #4A5852 0%, transparent 65%);
  opacity: 0.7;
  animation: ns-basin-drift-b 38s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
.ns-basin__sky-blob--c {
  width: 36%; aspect-ratio: 1;
  left: 42%; top: 30%;
  background: radial-gradient(circle, #EFDED9 0%, transparent 65%);
  opacity: 0.35;
  animation: ns-basin-drift-c 28s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
@keyframes ns-basin-drift-a { from { transform: translate(0,0) scale(1); } to { transform: translate(12%, 8%) scale(1.1); } }
@keyframes ns-basin-drift-b { from { transform: translate(0,0) scale(1); } to { transform: translate(-14%, -10%) scale(0.94); } }
@keyframes ns-basin-drift-c { from { transform: translate(0,0) scale(1); } to { transform: translate(-18%, 12%) scale(1.2); } }

/* Surface layer — typography sits here, above the shader canvas (z:0) */
.ns-basin__surface {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;  /* names re-enable */
}
.ns-basin__name {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: block;
  /* Hitbox sized so there are clear empty zones between pools — moving the
     cursor between hitboxes leaves the liquid fully sealed. */
  width: clamp(120px, 11vw, 180px);
  height: clamp(120px, 11vw, 180px);
  border-radius: 50%;
  color: var(--ns-cream);
  text-decoration: none;
  cursor: none;
  pointer-events: auto;
  transition:
    opacity 0.7s var(--ns-ease),
    transform 0.8s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, opacity;
}
/* Text retained in DOM for accessibility + shader measurement (via a sized
   placeholder) but visually suppressed — the liquid lens itself is the label. */
.ns-basin__name-text {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  /* Hidden but still reserves the exact area we want the shader to sample */
  font-size: 1px;
  line-height: 1;
  color: transparent;
  text-shadow: none;
  filter: none;
}
.ns-basin__name-meta {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* When any name is hovered, others stay visible (the shader handles focus). */
.ns-basin.is-hovering .ns-basin__name:not(:hover):not(.is-focus) {
  opacity: 1;
}

/* Case hitboxes sized the same as services — tight enough to leave gaps */
.ns-basin__name--case { width: clamp(110px, 10vw, 160px); height: clamp(110px, 10vw, 160px); }

/* Bursting state — triggered by wormhole on click: hit area settles downward */
.ns-basin__name.is-bursting {
  transform: translate(-50%, calc(-50% + 14px));
  opacity: 0.4;
  transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Prominent invite pill. Glass, visible by default, pulses softly so users
   immediately understand the liquid is interactive. Fades on hover so it
   doesn't fight with the lens reveal. */
.ns-basin__hint {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid rgba(246, 200, 195, 0.4);
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.68);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ns-cream);
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.98;
  pointer-events: auto;
  box-shadow: 0 8px 30px rgba(246, 200, 195, 0.1);
  transition: opacity 0.6s ease, transform 0.5s var(--ns-ease), border-color 0.4s ease, background 0.4s ease;
  animation: ns-basin-hint-pulse 2.6s ease-in-out infinite;
}
.ns-basin__hint:hover {
  border-color: rgba(246, 200, 195, 0.85);
  background: rgba(10, 10, 12, 0.82);
  transform: translateX(-50%) translateY(-2px);
}
.ns-basin__hint-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ns-pink);
  box-shadow: 0 0 0 0 rgba(246, 200, 195, 0.6);
  animation: ns-basin-hint-dot 1.8s ease-in-out infinite;
}
.ns-basin__hint-arrow {
  width: 14px; height: 14px;
  transition: transform 0.4s var(--ns-ease);
}
.ns-basin__hint:hover .ns-basin__hint-arrow { transform: translateX(4px); }
@keyframes ns-basin-hint-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(246, 200, 195, 0.1); }
  50%      { box-shadow: 0 8px 40px rgba(246, 200, 195, 0.22); }
}
@keyframes ns-basin-hint-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 200, 195, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(246, 200, 195, 0); }
}
.ns-basin.is-hovering .ns-basin__hint { opacity: 0; }

/* Shader canvas that ns-shader.js injects — make sure it sits behind names */
.ns-basin .ns-world__shader,
.ns-basin__shader {
  position: absolute !important; inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}

/* Mobile — no hover; show visible labels so touch users have tappable items */
@media (max-width: 767px) {
  .ns-basin { height: auto; padding: 3rem 1rem 4rem; }
  .ns-basin__surface {
    position: relative;
    inset: auto;
    display: flex; flex-direction: column; gap: 2rem;
    align-items: center;
    padding: 1rem 0;
  }
  .ns-basin__name {
    position: relative; left: auto; top: auto; transform: none;
    width: auto; height: auto;
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  }
  .ns-basin__name-text {
    position: relative; inset: auto;
    width: auto; height: auto;
    opacity: 1;
    font-family: 'Fraunces', 'Instrument Serif', Georgia, serif;
    font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
    font-style: italic; font-weight: 380;
    font-size: clamp(2.2rem, 9vw, 3.6rem);
    line-height: 0.88;
    letter-spacing: -0.03em;
    color: var(--ns-cream);
    filter: none;
  }
  .ns-basin__name-meta {
    position: relative;
    width: auto; height: auto;
    clip: auto; clip-path: none;
    white-space: normal;
    overflow: visible;
    opacity: 0.65;
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ns-cream-dim);
    font-family: 'Neue Montreal', system-ui, sans-serif;
    font-weight: 500;
  }
  .ns-basin__hint {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    margin: 2rem auto 0;
    animation: none;
    opacity: 0.95;
  }
  .ns-basin__hint:hover { transform: none; }
  .ns-basin__sky-blob { filter: blur(60px); opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-basin__defs animate { display: none; }
  .ns-basin__sky-blob { animation: none; }
}

/* ================ CONSTELLATION ================ */

.ns-world {
  position: relative; width: 100%; height: min(85vh, 780px);
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(74,88,82,0.12), transparent 70%);
}
.ns-world__inner {
  position: absolute; inset: 0;
  touch-action: none;
  cursor: none;
}
.ns-world__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ns-world__link {
  stroke: var(--ns-olive);
  stroke-width: 1;
  opacity: 0.5;
  transition: opacity 0.5s var(--ns-ease), stroke 0.5s;
  pointer-events: none;
}
.ns-world__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  cursor: none;
  text-decoration: none; color: inherit;
  transition: opacity 0.4s var(--ns-ease), transform 0.6s var(--ns-ease);
  will-change: transform;
}
.ns-world__dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--ns-cream);
  box-shadow: 0 0 0 0 rgba(239,222,217,0.15);
  transform: scale(var(--breath, 1));
  transition: background 0.4s var(--ns-ease), box-shadow 0.5s var(--ns-ease);
}
.ns-world__node[data-type="case"] .ns-world__dot { background: var(--ns-pink); }
.ns-world__node[data-type="insight"] .ns-world__dot { background: var(--ns-olive); outline: 1px solid var(--ns-cream-mute); outline-offset: 4px; }
.ns-world__node[data-type="philosophy"] .ns-world__dot { background: transparent; border: 1px solid var(--ns-cream); }

/* =============================================================
   LIQUID-GLASS ORBS — iPhone-quality refraction
   Real glass needs something to refract → .ns-world__sky provides
   a rich animated colored field behind the orbs.
   ============================================================= */

/* Rich colored sky behind orbs — what the glass refracts */
.ns-world__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ns-world__sky-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px) saturate(1.4);
  opacity: 0.55;
  mix-blend-mode: screen;
}
.ns-world__sky-blob--a {
  width: 46%; aspect-ratio: 1;
  left: -6%; top: 8%;
  background: radial-gradient(circle, #F6C8C3 0%, #F6C8C3 30%, transparent 70%);
  animation: ns-sky-a 28s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
.ns-world__sky-blob--b {
  width: 52%; aspect-ratio: 1;
  right: -8%; top: -4%;
  background: radial-gradient(circle, #EFDED9 0%, #EFDED9 30%, transparent 70%);
  animation: ns-sky-b 34s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
.ns-world__sky-blob--c {
  width: 44%; aspect-ratio: 1;
  left: 18%; bottom: -14%;
  background: radial-gradient(circle, #4A5852 0%, #4A5852 30%, transparent 70%);
  opacity: 0.75;
  animation: ns-sky-c 42s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
.ns-world__sky-blob--d {
  width: 40%; aspect-ratio: 1;
  right: 12%; bottom: 4%;
  background: radial-gradient(circle, #c09b94 0%, #c09b94 30%, transparent 70%);
  animation: ns-sky-d 38s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
.ns-world__sky-blob--e {
  width: 30%; aspect-ratio: 1;
  left: 46%; top: 28%;
  background: radial-gradient(circle, #F6C8C3 0%, transparent 70%);
  opacity: 0.45;
  animation: ns-sky-e 24s cubic-bezier(0.5,0,0.5,1) infinite alternate;
}
@keyframes ns-sky-a { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(14%, 8%) scale(1.15); } }
@keyframes ns-sky-b { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-10%, 12%) scale(0.9); } }
@keyframes ns-sky-c { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(16%, -10%) scale(1.1); } }
@keyframes ns-sky-d { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-14%, -6%) scale(1.2); } }
@keyframes ns-sky-e { 0% { transform: translate(0, 0) scale(1); opacity: 0.35; } 100% { transform: translate(-18%, 14%) scale(1.3); opacity: 0.55; } }

/* Water wave layer — animated SVG paths at bottom of section */
.ns-world__waves {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ns-world__wave {
  position: absolute;
  left: -5%; right: -5%;
  width: 110%;
  bottom: 0;
  opacity: 0.35;
}
.ns-world__wave--1 { bottom: 0;    height: 55%; animation: ns-wave-1 18s ease-in-out infinite; }
.ns-world__wave--2 { bottom: 4%;   height: 60%; opacity: 0.25; animation: ns-wave-2 24s ease-in-out infinite reverse; }
.ns-world__wave--3 { bottom: 12%;  height: 45%; opacity: 0.18; animation: ns-wave-3 30s ease-in-out infinite; }
@keyframes ns-wave-1 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(-3%) translateY(-2%); }
}
@keyframes ns-wave-2 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(2%) translateY(-1%); }
}
@keyframes ns-wave-3 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(-4%) translateY(-3%); }
}

/* Halo — colored bloom behind orb (pure blurred radial gradient) */
.ns-world__halo {
  position: absolute;
  top: 120px;
  left: 50%;
  width: 300px; height: 300px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, var(--halo-color, #F6C8C3) 0%, rgba(246,200,195,0) 60%);
  transition: opacity 0.5s var(--ns-ease), filter 0.5s var(--ns-ease), transform 0.6s var(--ns-ease);
  will-change: opacity, transform;
  animation: ns-halo-pulse 8s ease-in-out infinite;
}
.ns-world__node[data-type="case"] .ns-world__halo { top: 95px; width: 240px; height: 240px; }
@keyframes ns-halo-pulse {
  0%, 100% { opacity: 0.55; filter: blur(40px); transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.95; filter: blur(52px); transform: translate(-50%, -50%) scale(1.12); }
}
.ns-world__node:hover .ns-world__halo,
.ns-world__node.is-focus .ns-world__halo {
  opacity: 1;
  filter: blur(58px);
  transform: translate(-50%, -50%) scale(1.4);
}

/* THE ORB — real glass: transparent base + backdrop-filter does the work */
.ns-world__orb {
  position: relative;
  width: 240px; height: 240px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  isolation: isolate;
  /* near-transparent glass — NOT a painted gradient */
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.26) 0%,
      rgba(255, 255, 255, 0.10) 30%,
      rgba(255, 255, 255, 0.04) 55%,
      rgba(255, 255, 255, 0.14) 100%);
  backdrop-filter: blur(22px) saturate(1.9) brightness(1.08) contrast(1.05);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(1.08) contrast(1.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    /* outer cast shadow — the orb floats */
    0 28px 48px -8px rgba(9, 9, 11, 0.55),
    /* ambient glow pickup */
    0 0 32px rgba(239, 222, 217, 0.08),
    /* top inner bright rim (light source) */
    inset 0 2px 1px rgba(255, 255, 255, 0.55),
    /* bottom inner dark rim (occlusion) */
    inset 0 -3px 2px rgba(9, 9, 11, 0.35),
    /* soft inner brightness */
    inset 0 0 18px rgba(255, 255, 255, 0.08);
  transform: scale(var(--breath, 1));
  transition:
    transform 0.6s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.6s cubic-bezier(0.16,1,0.3,1),
    border-color 0.5s ease,
    filter 0.5s ease,
    opacity 0.6s ease;
  flex-shrink: 0;
}

/* Specular highlight — the "wet" droplet spot, top-left */
.ns-world__orb::before {
  content: '';
  position: absolute;
  top: 8%; left: 12%;
  width: 44%; height: 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.4) 35%,
    rgba(255, 255, 255, 0) 70%);
  filter: blur(3px);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0.85;
}

/* Moving sheen band — the "glint" that sweeps across */
.ns-world__orb::after {
  content: '';
  position: absolute;
  inset: -4%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.18) 30deg,
    rgba(255, 255, 255, 0.45) 60deg,
    rgba(255, 255, 255, 0.18) 90deg,
    transparent 120deg,
    transparent 360deg);
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
  animation: ns-orb-sheen 12s linear infinite;
  border-radius: 50%;
}
@keyframes ns-orb-sheen { to { transform: rotate(360deg); } }

/* SVG art layer — barely visible ornament */
.ns-world__orb-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  animation: ns-orb-drift 100s linear infinite;
  transform-origin: 50% 50%;
  mix-blend-mode: overlay;
}
.ns-world__orb-art > g,
.ns-world__orb-art > g > * { vector-effect: non-scaling-stroke; }
@keyframes ns-orb-drift { to { transform: rotate(360deg); } }

/* Embedded content — crisp + legible against refracted background */
.ns-world__orb-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.3rem;
  color: #FFFFFF;
  text-align: center;
  padding: 0 0.6rem;
  pointer-events: none;
  z-index: 4;
  text-shadow:
    0 1px 2px rgba(9, 9, 11, 0.6),
    0 0 14px rgba(9, 9, 11, 0.5);
}
.ns-world__orb-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 500;
}
.ns-world__orb-word {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 92%;
  color: #FFFFFF;
}
.ns-world__orb-tag {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 500;
}

/* =============================================================
   SHADER-ACTIVE STATE — when ns-shader.js successfully boots
   the WebGL canvas renders the orb glass. Mute the CSS glass
   so we're not double-painting; keep the text + halo + label.
   ============================================================= */
.ns-world--shader .ns-world__node[data-type="service"] .ns-world__orb,
.ns-world--shader .ns-world__node[data-type="case"]    .ns-world__orb {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.ns-world--shader .ns-world__node[data-type="service"] .ns-world__orb::before,
.ns-world--shader .ns-world__node[data-type="service"] .ns-world__orb::after,
.ns-world--shader .ns-world__node[data-type="case"]    .ns-world__orb::before,
.ns-world--shader .ns-world__node[data-type="case"]    .ns-world__orb::after {
  display: none;
}
.ns-world--shader .ns-world__orb-art { opacity: 0; }
/* Hide the DOM text inside the orb — the shader-rendered lens
   shows the actual page section content instead. The kicker and
   label outside the orb still identify it. */
.ns-world--shader .ns-world__node[data-type="service"] .ns-world__orb-content,
.ns-world--shader .ns-world__node[data-type="case"]    .ns-world__orb-content {
  display: none;
}
/* Halo is the shader's anchor point for bloom — keep it but tone it back */
.ns-world--shader .ns-world__halo { opacity: 0.35; filter: blur(60px); }
.ns-world--shader .ns-world__node:hover .ns-world__halo,
.ns-world--shader .ns-world__node.is-focus .ns-world__halo {
  opacity: 0.7; filter: blur(70px);
}
/* CSS sky blobs are below the shader canvas → they never show. Drop their
   animation cost entirely when shader is active. */
.ns-world--shader .ns-world__sky { display: none; }
.ns-world--shader .ns-world__waves { display: none; }

/* Halo color cues only — don't touch orb background */
.ns-world__node[data-type="service"][data-orb="redesign"] { --halo-color: #EFDED9; }
.ns-world__node[data-type="service"][data-orb="seo"]      { --halo-color: #8aa498; }
.ns-world__node[data-type="service"][data-orb="growth"]   { --halo-color: #F6C8C3; }
.ns-world__node[data-type="case"]                         { --halo-color: #F6C8C3; }

.ns-world__node[data-type="case"] .ns-world__orb { width: 190px; height: 190px; }
.ns-world__node[data-type="case"] .ns-world__orb-word { font-size: 1.15rem; }

/* Hover — orb lifts, halo explodes, sheen speeds up, specular intensifies */
.ns-world__node:hover .ns-world__orb,
.ns-world__node.is-focus .ns-world__orb {
  transform: scale(calc(var(--breath, 1) * 1.1)) translateY(-6px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 36px 60px -8px rgba(9, 9, 11, 0.7),
    0 0 80px rgba(246, 200, 195, 0.3),
    inset 0 2px 1px rgba(255, 255, 255, 0.7),
    inset 0 -3px 2px rgba(9, 9, 11, 0.4),
    inset 0 0 24px rgba(255, 255, 255, 0.14);
  filter: saturate(1.2) brightness(1.05);
}
.ns-world__node:hover .ns-world__orb::after,
.ns-world__node.is-focus .ns-world__orb::after {
  animation-duration: 5s;
  opacity: 0.7;
}
.ns-world__node:hover .ns-world__orb::before,
.ns-world__node.is-focus .ns-world__orb::before {
  opacity: 1;
  transform: scale(1.1);
}

/* BURST state (click) — orb dramatically expands + fades as wormhole fires */
.ns-world__node.is-bursting .ns-world__orb {
  transform: scale(calc(var(--breath, 1) * 1.8));
  opacity: 0.15;
  filter: blur(14px) saturate(2.5) brightness(1.5);
  transition: transform 0.85s cubic-bezier(0.7,0,0.3,1), opacity 0.85s ease, filter 0.85s ease;
}
.ns-world__node.is-bursting .ns-world__halo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(2.5);
  filter: blur(80px);
  transition: transform 0.85s cubic-bezier(0.7,0,0.3,1), opacity 0.85s ease, filter 0.85s ease;
}
.ns-world__node.is-bursting .ns-world__kicker,
.ns-world__node.is-bursting .ns-world__label {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Mobile sizing */
@media (max-width: 767px) {
  .ns-world__orb { width: 170px; height: 170px; }
  .ns-world__halo { width: 220px; height: 220px; top: 85px; }
  .ns-world__node[data-type="case"] .ns-world__orb { width: 140px; height: 140px; }
  .ns-world__orb-word { font-size: 1.1rem; }
}

.ns-world__label {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 0.95rem; line-height: 1.1;
  color: var(--ns-cream);
  white-space: nowrap;
  transition: transform 0.4s var(--ns-ease), color 0.3s;
  pointer-events: none;
}
.ns-world__kicker {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ns-cream-dim);
  font-family: 'Neue Montreal', sans-serif; font-style: normal; font-weight: 500;
  pointer-events: none;
}
.ns-world__node:hover .ns-world__dot,
.ns-world__node.is-focus .ns-world__dot { transform: scale(calc(var(--breath, 1) * 1.6)); box-shadow: 0 0 0 12px rgba(239,222,217,0.08), 0 0 40px rgba(246,200,195,0.45); }
.ns-world__node:hover .ns-world__label,
.ns-world__node.is-focus .ns-world__label { color: var(--ns-pink); transform: scale(1.06); }
.ns-world__node:hover .ns-world__kicker,
.ns-world__node.is-focus .ns-world__kicker { color: var(--ns-cream); }
.ns-world.is-dragging .ns-world__node:not(:hover) { opacity: 0.55; }
.ns-world__node .ns-world__dot { transition: background 0.35s var(--ns-ease), box-shadow 0.5s var(--ns-ease); }

/* fluid canvas layered behind, inner + svg stay absolute (z-ordered) */
.ns-world { isolation: isolate; }
.ns-world__inner { z-index: 2; }
.ns-world__svg { z-index: 1; pointer-events: none; }
.ns-world__fluid { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* wormhole transition — no global style needed, inline handles most of it.
   this just protects against jank */
body.ns-transitioning { overflow: hidden !important; }
.ns-wormhole, .ns-wormhole * { pointer-events: none; }

.ns-world__intro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ns-cream-dim);
  pointer-events: none;
  transition: opacity 0.6s var(--ns-ease);
}
.ns-world__intro svg { display: block; width: 40px; height: 40px; margin: 0 auto 0.75rem; opacity: 0.7; }
.ns-world.is-touched .ns-world__intro { opacity: 0; }

/* mobile fallback — wrap into grid */
@media (max-width: 767px) {
  .ns-world { height: auto; padding: 2rem 0; }
  .ns-world__inner { position: relative; }
  .ns-world__svg { display: none; }
  .ns-world__inner {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem;
    padding: 1rem;
  }
  .ns-world__node { position: relative; left: auto !important; top: auto !important; transform: none; }
  .ns-world__intro { display: none; }
}

/* ================ FAQ ================ */

.ns-faq { border-top: 1px solid var(--ns-cream-mute); }
body.ns-light .ns-faq { border-top-color: rgba(9,9,11,0.12); }
.ns-faq__item {
  border-bottom: 1px solid var(--ns-cream-mute);
  padding: 1.75rem 0;
  cursor: none;
  position: relative;
}

/* Editorial numeral — giant italic serif mark bleeding left of each
   process phase. Rhythm marker, not decoration; cued by data-phase.
   Only appears when a phase article opts in via .ns-phase class. */
.ns-phase > .ns-phase__numeral {
  position: absolute;
  left: clamp(-3rem, -4vw, -1.5rem);
  top: -1.2rem;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(6.5rem, 12vw, 14rem);
  line-height: 0.85;
  color: rgba(9, 9, 11, 0.045);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  z-index: 0;
  transform: translateZ(0);
  transition: color 0.6s var(--ns-ease);
}
.ns-phase.is-open > .ns-phase__numeral { color: rgba(9, 9, 11, 0.10); }
.ns-phase > .ns-faq__q,
.ns-phase > .ns-faq__a { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .ns-phase > .ns-phase__numeral {
    left: -0.5rem;
    font-size: 9rem;
    top: -0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ns-phase > .ns-phase__numeral { transition: none; }
}
body.ns-light .ns-faq__item { border-bottom-color: rgba(9,9,11,0.12); }
.ns-faq__q {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start;
  font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.25;
}
.ns-faq__icon {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ns-cream-mute);
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform 0.5s var(--ns-ease), background 0.3s;
  margin-top: 0.3em;
}
body.ns-light .ns-faq__icon { border-color: rgba(9,9,11,0.3); }
.ns-faq__icon::before, .ns-faq__icon::after {
  content: ''; position: absolute; width: 10px; height: 1px; background: currentColor;
}
.ns-faq__icon::after { transform: rotate(90deg); transition: transform 0.35s var(--ns-ease); }
.ns-faq__item.is-open .ns-faq__icon::after { transform: rotate(0deg); }
.ns-faq__item.is-open .ns-faq__icon { background: var(--ns-cream); color: var(--ns-ink); }
.ns-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ns-ease);
}
.ns-faq__a-inner {
  overflow: hidden;
  color: var(--ns-cream-dim);
  font-size: 1rem; line-height: 1.65;
  max-width: 68ch;
}
body.ns-light .ns-faq__a-inner { color: rgba(9,9,11,0.72); }
.ns-faq__item.is-open .ns-faq__a { grid-template-rows: 1fr; }
.ns-faq__a-inner > *:first-child { margin-top: 1.1rem; }

/* ================ MISC ================ */

.ns-noise::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  /* Opacity breathes with scroll velocity — 0.55 at rest → 0.95 on fast flicks.
     Driven by the CSS var --ns-grain-alpha, updated in ns-motion.js. */
  opacity: var(--ns-grain-alpha, 0.55);
}

.ns-bg-glow {
  position: absolute; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(74,88,82,0.18), transparent 60%);
  filter: blur(40px);
}

/* ================ REDUCED MOTION — STILL LIFE ================
   When the user opts out of motion, we don't just kill animations —
   we compose a deliberate static version. The basin's CSS sky blobs
   (cream/pink/olive radial gradients) remain visible as a frozen
   painterly backdrop. The pool names show at full opacity with a
   subtle letter-space so the composition reads as deliberate typography
   rather than "broken motion." Grain holds at its base alpha.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ns-loader { display: none !important; }
  .ns-cursor { display: none !important; }
  body.ns-body { cursor: auto; }
  .ns-reveal, .ns-reveal-mask__inner, .ns-char {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Hold the sky blobs at peak bloom for a static composition */
  .ns-basin__sky-blob { opacity: 0.55 !important; }
  /* Ensure basin pool labels are fully visible with a quiet letterpress feel */
  .ns-basin__name { opacity: 1 !important; }
  .ns-basin__name-text {
    text-shadow: 0 0.5px 0 rgba(239, 222, 217, 0.08);
    letter-spacing: 0;
  }
  /* Grain stays at rest alpha — no velocity-driven breath */
  html { --ns-grain-alpha: 0.55; }
}