/* Headline face for the pages, bundled so it works offline */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton-latin-400-normal.woff2") format("woff2"), url("fonts/anton-latin-400-normal.woff") format("woff"); }

/* Theme tokens */
:root,
[data-theme="light"] {
  --bg: #dcdcdc;
  --bg-soft: rgba(220, 220, 220, 0.82);
  --ink: #141414;
  --ink-soft: rgba(20, 20, 20, 0.8);
  --ink-faint: rgba(20, 20, 20, 0.68);
  --line: rgba(20, 20, 20, 0.14);
  --invert-bg: #141414;
  --invert-ink: #e8e8e8;
}
[data-theme="dark"] {
  --bg: #151515;
  --bg-soft: rgba(21, 21, 21, 0.82);
  --ink: #ebe8e2;
  --ink-soft: rgba(235, 232, 226, 0.8);
  --ink-faint: rgba(235, 232, 226, 0.66);
  --line: rgba(235, 232, 226, 0.14);
  --invert-bg: #ebe8e2;
  --invert-ink: #151515;
}
:root {
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --gutter: clamp(18px, 3.4vw, 54px);
  --space: clamp(40px, 4.6vw, 64px);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
body.nj-shared-is-intro { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
main, .nj-shared-footer { position: relative; }

/* 3D background */
.nj-home-stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
.no-webgl .nj-home-stage { display: none; }
.no-webgl body, body.no-webgl {
  background-image: radial-gradient(1200px 700px at 75% 20%, rgba(255, 255, 255, 0.35), transparent 70%);
  background-attachment: fixed;
}

/* Shared type */
.nj-shared-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.nj-shared-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.label--center { justify-content: center; }
.nj-home-block-head { padding: 0 var(--gutter); margin-bottom: 40px; }
.nj-home-block-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.nj-home-block-title {
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.nj-home-block-title em { text-transform: none; }
.nj-home-block-sub { max-width: 440px; color: var(--ink-soft); font-size: 17px; }
.nj-home-text-link { font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color 0.4s; }
.nj-home-text-link:hover { border-color: var(--ink); }

/* Pill buttons */
.nj-shared-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s;
}
.nj-shared-pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--ink);
  border-radius: inherit;
  transform: scale(0.2, 0);
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--ease);
}
.nj-shared-pill:hover { color: var(--bg); border-color: var(--ink); }
.nj-shared-pill:hover::before { transform: none; }
.nj-shared-pill--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nj-shared-pill--solid::before { background: var(--bg); }
.nj-shared-pill--solid:hover { color: var(--ink); }
.nj-shared-pill--wide { width: 100%; grid-column: 1 / -1; height: 54px; }

/* Coin intro */
.nj-home-coin-intro { position: fixed; inset: 0; z-index: 300; pointer-events: auto; }
.nj-home-coin-intro__veil { position: absolute; inset: 0; background: var(--bg); transition: opacity 0.9s var(--ease); }
.nj-home-coin-intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.6s; }
.nj-home-coin-intro__count { position: absolute; left: var(--gutter); bottom: 24px; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-soft); transition: opacity 0.4s; }
.nj-home-coin-intro__skip {
  position: absolute;
  right: var(--gutter);
  bottom: 18px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: opacity 0.4s, background 0.3s;
}
.nj-home-coin-intro__skip:hover { background: var(--ink); color: var(--bg); }
.nj-home-coin-intro.nj-shared-is-open { pointer-events: none; }
.nj-home-coin-intro.nj-shared-is-open .nj-home-coin-intro__veil,
.nj-home-coin-intro.nj-shared-is-open .nj-home-coin-intro__count,
.nj-home-coin-intro.nj-shared-is-open .nj-home-coin-intro__skip { opacity: 0; }
.nj-home-coin-intro.nj-shared-is-done { display: none; }

/* Cursor */
.nj-shared-pointer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 250;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease);
}
.nj-shared-pointer.nj-shared-is-big { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
.nj-shared-pointer.nj-shared-is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.nj-shared-pointer span { font-size: 12px; font-weight: 600; color: #000; opacity: 0; letter-spacing: 0.04em; }
.nj-shared-pointer.nj-shared-is-label span { opacity: 1; }
@media (hover: none) { .nj-shared-pointer { display: none; } }

/* Header */
.nj-shared-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px var(--gutter);
  transition: transform 0.6s var(--ease);
}
.nj-shared-topbar.nj-shared-is-hidden { transform: translateY(-110%); }
.nj-shared-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nj-shared-brand__logo { display: block; height: 26px; width: auto; }
.nj-shared-brand__logo--light { display: none; }
[data-theme="dark"] .nj-shared-brand__logo--dark, body.nj-shared-menu-logo .nj-shared-brand__logo--dark { display: none; }
[data-theme="dark"] .nj-shared-brand__logo--light, body.nj-shared-menu-logo .nj-shared-brand__logo--light { display: block; }
.nj-shared-topbar { justify-content: space-between; }
.nj-shared-topbar__nav { display: contents; }
.nj-shared-topbar__link { position: relative; padding: 7px 11px 6px; border: 1px solid currentColor; font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; overflow: hidden; transition: color 0.4s var(--ease); }
.nj-shared-topbar__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform 0.45s var(--ease); }
.nj-shared-topbar__link:hover, .nj-shared-topbar__link.nj-shared-is-active { color: var(--bg); }
.nj-shared-topbar__link:hover::before, .nj-shared-topbar__link.nj-shared-is-active::before { transform: none; }
.nj-shared-topbar__tools { display: flex; align-items: center; gap: 12px; }
.topbar__cta { height: 40px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.nj-shared-menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 2px 0 10px; background: none; border: 0; color: inherit; font: 500 13px/1 var(--sans); letter-spacing: 0.04em; cursor: pointer; position: relative; z-index: 2; transition: color 0.5s var(--ease); }
.nj-shared-menu-btn__icon { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nj-shared-menu-btn__icon i { display: block; height: 1.5px; background: currentColor; transition: transform 0.5s var(--ease); }
body.nj-shared-ink-peek .nj-shared-menu-btn, body.nj-shared-menu-open .nj-shared-menu-btn { color: #f1f1f1; }
body.nj-shared-menu-open .nj-shared-menu-btn__icon i:first-child { transform: translateY(2.75px) rotate(45deg); }
body.nj-shared-menu-open .nj-shared-menu-btn__icon i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* Theme switch */
.nj-shared-theme-switch {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 100px;
  border: 1px solid var(--line);
  transition: border-color 0.4s;
}
.nj-shared-theme-switch:hover { border-color: var(--ink); }
.nj-shared-theme-switch__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.6s var(--ease), background 0.4s;
}
.nj-shared-theme-switch__knob::after {
  content: "";
  position: absolute;
  inset: 3px 3px 3px 7px;
  border-radius: 50%;
  background: var(--bg);
  transform: scale(0);
  transition: transform 0.5s var(--ease);
}
[data-theme="dark"] .nj-shared-theme-switch__knob { transform: translateX(24px); }
[data-theme="dark"] .nj-shared-theme-switch__knob::after { transform: scale(1); }

/* Corner menu: black ink spreads out of the corner, the carving plays underneath */
.nj-shared-ink-menu { position: fixed; inset: 0; z-index: 112; color: #ecebe8; display: none; pointer-events: none; }
.nj-shared-ink-menu.nj-shared-is-live, .nj-shared-ink-menu.nj-shared-is-open { display: block; }
.nj-shared-ink-menu.nj-shared-is-open { pointer-events: auto; }
.nj-shared-ink-menu__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.no-webgl .nj-shared-ink-menu { background: #0e0e0e; clip-path: circle(0% at calc(100% - 60px) 40px); transition: clip-path 1s var(--ease-io); }
.no-webgl .nj-shared-ink-menu.nj-shared-is-open.nj-shared-is-shown { clip-path: circle(150% at calc(100% - 60px) 40px); transition: clip-path 1.1s var(--ease-io); }
.nj-shared-ink-menu__inner { position: absolute; inset: 0; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65); display: flex; flex-direction: column; align-items: center; padding: 104px var(--gutter) 34px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.nj-shared-ink-menu__inner::-webkit-scrollbar { display: none; }
.nj-shared-ink-menu__list { display: flex; flex-direction: column; align-items: center; width: min(1080px, 100%); margin: auto 0; }
.nj-shared-ink-item { width: 100%; display: flex; flex-direction: column; align-items: center; }
.nj-shared-ink-item__head { display: inline-flex; align-items: baseline; padding: 0; border: 0; background: none; color: inherit; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 76px); line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 1s var(--ease), color 0.5s; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item__head { opacity: 1; transform: none; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item:nth-child(2) .nj-shared-ink-item__head { transition-delay: 0.07s, 0.07s, 0s; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item:nth-child(3) .nj-shared-ink-item__head { transition-delay: 0.14s, 0.14s, 0s; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item:nth-child(4) .nj-shared-ink-item__head { transition-delay: 0.21s, 0.21s, 0s; }
.nj-shared-ink-item__more { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; color: rgba(236, 235, 232, 0.75); transition: max-width 0.9s var(--ease), opacity 0.6s var(--ease); }
.nj-shared-ink-item:hover .nj-shared-ink-item__more, .nj-shared-ink-item.nj-shared-is-open .nj-shared-ink-item__more { max-width: 13em; opacity: 1; }
.nj-shared-ink-menu__list.nj-shared-has-open .nj-shared-ink-item:not(.nj-shared-is-open) .nj-shared-ink-item__head { color: rgba(236, 235, 232, 0.6); }
.nj-shared-ink-menu__list.nj-shared-has-open .nj-shared-ink-item:not(.nj-shared-is-open) .nj-shared-ink-item__head:hover { color: #ecebe8; }
.ink-item__drop { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 0.8s var(--ease); }
.nj-shared-ink-item.nj-shared-is-open .ink-item__drop { grid-template-rows: 1fr; }
.ink-item__clip { min-height: 0; overflow: hidden; text-align: center; }
.ink-item__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 46px; padding: 22px 0 6px; text-align: left; opacity: 0; transform: translateY(-12px); transition: opacity 0.4s, transform 0.6s var(--ease); }
.nj-shared-ink-item.nj-shared-is-open .ink-item__body { opacity: 1; transform: none; transition: opacity 0.7s 0.15s, transform 0.9s 0.15s var(--ease); }
.ink-group h4 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 235, 232, 0.16); font: 500 12px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(236, 235, 232, 0.75); }
.ink-group a { display: block; padding: 12px 0 13px; border-bottom: 1px solid rgba(236, 235, 232, 0.08); }
.ink-group a b { display: block; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.15; transition: transform 0.45s var(--ease); }
.ink-group a span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: rgba(236, 235, 232, 0.78); }
.ink-group a:hover b { font-style: italic; transform: translateX(6px); }
.ink-item__all { display: inline-flex; gap: 10px; margin: 20px 0 26px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.ink-item__all i { font-style: normal; transition: transform 0.4s var(--ease); }
.ink-item__all:hover i { transform: translateX(5px); }
.nj-shared-ink-menu__hint { position: absolute; left: 0; top: 0; font-size: 12px; letter-spacing: 0.02em; color: rgba(236, 235, 232, 0.8); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.nj-shared-ink-menu__hint.nj-shared-is-on { opacity: 1; }
.nj-shared-ink-menu__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin-top: 40px; font-size: 13px; color: rgba(236, 235, 232, 0.8); opacity: 0; transition: opacity 0.8s; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-menu__foot { opacity: 1; transition-delay: 0.4s; }
.nj-shared-ink-menu__foot a:hover { color: #ecebe8; }
body.nj-shared-menu-open .nj-shared-topbar { color: #f1f1f1; background: transparent !important; }
body.nj-shared-menu-open .nj-shared-topbar__link, body.nj-shared-menu-open .nj-shared-theme-switch, body.nj-shared-menu-open .nj-shared-page-back { opacity: 0; pointer-events: none; }
.nj-shared-topbar__link, .nj-shared-theme-switch, .nj-shared-page-back { transition: opacity 0.5s var(--ease), color 0.4s var(--ease); }
body.nj-shared-menu-open .nj-shared-sound-switch { color: #f1f1f1; }
@media (max-width: 700px) {
  .nj-shared-ink-item__more { display: none; }
  .nj-shared-ink-item__head { font-size: 44px; }
  .ink-item__body { grid-template-columns: 1fr; }
  .ink-group a span { display: none; }
  .nj-shared-ink-menu__hint { display: none; }
  body.nj-shared-menu-open .nj-shared-sound-switch { opacity: 0; pointer-events: none; }
}

/* Hero */
.nj-home-hero { position: relative; height: 100vh; min-height: 645px; overflow: hidden; }
.nj-home-hero__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: calc(min(54vw, 74vh) - 16px);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
  pointer-events: none;
}
.nj-home-hero__orb-canvas { position: absolute; inset: -22%; width: 144%; height: 144%; display: block; }
.no-webgl .nj-home-hero__orb-canvas { display: none; }
.nj-home-hero__rings {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(calc((min(54vw, 74vh) - 16px) * 1.15 + 5px), calc(max(100vh, 645px) * 0.81 - 8px));
  aspect-ratio: 1;
  translate: -50% -48%;
  pointer-events: none;
}
.nj-home-hero__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transform: scale(0); }
.nj-home-hero__orbit circle { fill: none; stroke: var(--ink-faint); stroke-width: 0.12; stroke-dasharray: 0.5 0.6; animation: orbitSpin 120s linear infinite; transform-origin: 50% 50%; }
.nj-home-hero__orbit--inner circle { animation-direction: reverse; animation-duration: 160s; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.nj-home-hero__orb-fallback { display: none; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fbfff4 0%, #7fe0b8 30%, #1fb38a 58%, #c4ef7a 74%, #7b74ff 100%); filter: blur(2px); }
.no-webgl .nj-home-hero__orb-fallback { display: block; }

.nj-home-hero__title { position: absolute; inset: 0; z-index: 2; color: #fff; mix-blend-mode: difference; font-weight: 500; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; pointer-events: none; }
.nj-home-hero__line { position: absolute; font-size: clamp(40px, 6.6vw, 118px); white-space: nowrap; }
.nj-home-hero__line--one { left: 10vw; top: 19vh; }
.nj-home-hero__line--two { right: 9vw; top: 42vh; }
.nj-home-hero__line--three { left: 17vw; top: 63vh; }
/* Masked letters */
.nj-home-drop-letters .nj-shared-letter { display: inline-block; clip-path: inset(0 -30% 0 -30%); }
.nj-home-drop-letters .nj-shared-letter > span { display: inline-block; transform: translate3d(0, -101%, 0); will-change: transform; }

.nj-home-hero__tag { position: absolute; z-index: 4; left: var(--gutter); top: 50vh; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); writing-mode: vertical-rl; transform: rotate(180deg) translateX(0); }
.nj-home-hero__foot { position: absolute; z-index: 4; left: var(--gutter); bottom: 34px; display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; }
.nj-home-hero__lead { max-width: 380px; font-size: 15px; color: var(--ink-soft); }
.nj-home-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.nj-home-hero__scroll { position: absolute; z-index: 4; right: calc(var(--gutter) + 120px); bottom: 40px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.nj-home-hero__scroll span { display: inline-block; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }
.nj-home-hero__tag, .nj-home-hero__foot, .nj-home-hero__scroll { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.nj-home-hero__tag { transform: rotate(180deg) translateY(-16px); }
body.nj-shared-is-ready .nj-home-hero__foot, body.nj-shared-is-ready .nj-home-hero__scroll { opacity: 1; transform: none; transition-delay: 0.7s; }
body.nj-shared-is-ready .nj-home-hero__tag { opacity: 1; transform: rotate(180deg); transition-delay: 0.9s; }

/* Statement */
.nj-home-statement { padding: calc(var(--space) * 1.4) var(--gutter) var(--space); }
.nj-home-statement__text { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 76px); line-height: 1.06; letter-spacing: -0.02em; max-width: 1280px; }
.nj-home-light-words .nj-shared-w { opacity: 0.5; transition: opacity 0.35s; }
.nj-home-light-words .nj-shared-w.nj-shared-is-lit { opacity: 1; }
.nj-home-statement__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; max-width: 1100px; }
.fact { border-top: 1px solid var(--line); padding-top: 22px; }
.fact b { display: block; font-size: clamp(40px, 4.4vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; }
.fact span { font-size: 14px; color: var(--ink-soft); }
/* Studio pillars: three bento cards in place of the old figures */
.nj-home-statement__pillars { max-width: none; gap: 16px; border-top: 1px solid var(--line); padding-top: 56px; }
.nj-home-statement__pillars .nj-home-bento-card.nj-home-pillar { grid-column: auto; padding: 34px 34px 38px; min-height: 340px; }
.nj-home-bento-card.nj-home-pillar .nj-home-pillar__label { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.nj-home-pillar .nj-home-pillar__label::after { content: ""; display: block; width: 34px; height: 1.5px; margin-top: 16px; background: var(--ink); }
.nj-home-bento-card.nj-home-pillar h3 { margin-top: 38px; font-size: clamp(30px, 3vw, 50px); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; }
.nj-home-bento-card.nj-home-pillar .nj-home-pillar__text { margin-top: 30px; max-width: 470px; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--ink-soft); }

/* Ticker */
.nj-home-ticker { overflow: hidden; padding: 18px 0; background: #111; color: #f1f1f1; }
.nj-home-ticker__track { display: flex; width: max-content; animation: crawl 42s linear infinite; }
.nj-home-ticker__track span { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; padding: 0 30px; display: inline-flex; align-items: center; gap: 60px; }
.nj-home-ticker__track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #f1f1f1; margin-right: -32px; }
@keyframes crawl { to { transform: translateX(-50%); } }

/* Services */
.nj-home-services { position: relative; padding: var(--space) 0; }
.nj-home-service-list { list-style: none; border-top: 1px solid var(--line); }
.nj-home-service {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1.3fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 30px var(--gutter);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
}
.nj-home-service::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease); z-index: -1; }
.nj-home-service > * { transition: color 0.4s, transform 0.7s var(--ease); }
@media (hover: hover) {
  .nj-home-service:hover::before { transform: scaleY(1); }
  .nj-home-service:hover > * { color: var(--bg); }
  .nj-home-service:hover .nj-home-service__name { transform: translateX(14px); }
}
.nj-home-service__num { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.nj-home-service__name { font-size: clamp(34px, 4.6vw, 74px); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; }
.nj-home-service__text { color: var(--ink-soft); font-size: 15px; max-width: 400px; }
.nj-home-service-peek { position: fixed; left: 0; top: 0; z-index: 60; width: 260px; height: 320px; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(0.5); transition: opacity 0.35s, transform 0.55s var(--ease); }
.nj-home-service-peek.nj-shared-is-on { opacity: 1; transform: scale(1); }
.nj-home-service-peek img { width: 100%; height: 100%; object-fit: cover; }

/* Work cards */
.nj-home-showcase { padding: var(--space) 0 0; }
.nj-home-stack { padding: 0 var(--gutter); }
.nj-home-stack-card {
  position: sticky;
  /* --stick-top (script.js) lowers the sticky point for a card taller than the screen (tablets, phones in
     landscape, short laptops) so the whole card is seen before the next one covers it */
  top: var(--stick-top, calc(84px + var(--i, 0) * 18px));
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4vw;
  align-items: center;
  min-height: min(76vh, 680px);
  margin-bottom: 8vh;
  padding: clamp(24px, 3.4vw, 56px);
  border-radius: 22px;
  background: var(--tint);
  color: var(--card-ink);
  transform-origin: 50% 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  will-change: transform;
}
.nj-home-stack-card__num { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; opacity: 0.85; }
.nj-home-stack-card__name { font-size: clamp(40px, 5vw, 86px); font-weight: 500; line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; margin: 18px 0 20px; }
.nj-home-stack-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nj-home-stack-card__tags span { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 100px; border: 1px solid currentColor; opacity: 0.7; }
.nj-home-stack-card__text { margin-top: 24px; font-size: 16px; line-height: 1.6; opacity: 0.75; max-width: 420px; }
.nj-home-stack-card__stat { display: flex; align-items: flex-end; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.nj-home-stack-card__stat b { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5vw, 76px); line-height: 0.85; }
.nj-home-stack-card__stat span { font-size: 13px; opacity: 0.85; max-width: 200px; }
.nj-home-stack-card__screen { position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.16); transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transition: transform 1s var(--ease); }
.nj-home-stack-card:hover .nj-home-stack-card__screen { transform: perspective(1400px) rotateY(0) rotateX(0) scale(1.02); }
.nj-home-browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #f1efeb; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.nj-home-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6d2cb; }
.nj-home-browser-bar span { margin-left: 14px; font-size: 12px; color: #5f5a53; background: #fff; padding: 3px 14px; border-radius: 6px; }
.nj-home-stack-card__screen video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #ddd; }
.nj-home-stack-card--dark .nj-home-browser-bar { background: #1e2628; border-color: rgba(255, 255, 255, 0.06); }
.nj-home-stack-card--dark .nj-home-browser-bar span { background: #2a3335; color: #9fb3ae; }
.nj-home-stack-card--dark .nj-home-browser-bar i { background: #3a4446; }
.nj-home-showcase__more { display: flex; justify-content: center; margin-top: 20px; }

/* N mark (after the Off+Brand cross): a gradient N grows and turns as you scroll until it fills the screen,
   the line slides in through it, then the words split up and down as the panel leaves.
   No WebGL, no blend modes, no filters. The gradient is clipped to a rounded N
   (a CSS clip path), updated only while the scroll eases, so the carved wall shows around it like the rest of the page. The gradient's colour drift is two opacity layers on the compositor,
   running only while the section is on screen, and switched off on weak or software GPUs. */
.nj-home-nmark { position: relative; height: 300vh; }
.nj-home-nmark__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; border-radius: 2em; transform-origin: 50% 50%; }
.nj-home-nmark__stage { position: absolute; inset: 0; overflow: hidden; contain: layout paint; }
.nj-home-nmark__win, .nj-home-nmark__grad, .nj-home-nmark__hue { position: absolute; inset: 0; }
/* Hidden until the script sizes the shape */
.nj-home-nmark__win { clip-path: circle(0px at 50% 50%); }
/* Colours from the hero bubble */
.nj-home-nmark__grad { background: linear-gradient(255deg, #ffc49e 0%, #c4ef7a 24%, #1fb38a 46%, #9ad8f0 68%, #fbfff4 100%); }
.nj-home-nmark__hue { opacity: 0; will-change: opacity; animation: nmarkHue 14s ease-in-out infinite; animation-play-state: paused; }
.nj-home-nmark__hue--b { background: linear-gradient(255deg, #c4ef7a 0%, #7b74ff 30%, #14a3a0 52%, #9ad8f0 70%, #fbfff4 100%); }
.nj-home-nmark__hue--c { background: linear-gradient(255deg, #7b74ff 0%, #ffc49e 28%, #7fe0b8 50%, #9ad8f0 70%, #fbfff4 100%); animation-delay: -7s; }
.nj-home-nmark.nj-shared-is-on .nj-home-nmark__hue { animation-play-state: running; }
@keyframes nmarkHue { 0%, 100% { opacity: 0; } 30%, 50% { opacity: 1; } 80% { opacity: 0; } }
.nj-home-nmark__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.nj-home-nmark__line { margin: 0; font-family: var(--sans); font-weight: 400; font-size: 2.7vw; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; color: #1d1d1d; white-space: nowrap; text-align: center; }
.nj-home-nmark__w { display: inline-block; overflow: hidden; vertical-align: top; }
.nj-home-nmark__wi { display: inline-block; }
.nmark__frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nj-home-nmark * { text-shadow: none; }
/* Weak and software GPUs keep one still gradient */
html.gpu-weak .nj-home-nmark__hue, html.gpu-safe .nj-home-nmark__hue { display: none; animation: none; }
/* Reduced motion: the finished state, no scroll scene */
.nj-home-nmark.nj-shared-is-still { height: auto; }
.nj-home-nmark.nj-shared-is-still .nj-home-nmark__pin { position: relative; height: 70vh; min-height: 420px; }
.nj-home-nmark.nj-shared-is-still .nj-home-nmark__hue { display: none; }
.nj-home-nmark.nj-shared-is-still .nj-home-nmark__win { clip-path: none; }
.nj-home-nmark.nj-shared-is-still .nj-home-nmark__line { white-space: normal; padding: 0 var(--gutter); }

/* Technology section spacing, same as before the bento grid */
.nj-home-tech { padding: var(--space) 0; }

/* Technology: Framer-style bento grid
   Asymmetric 4-column grid (wide, small, small / small, small, wide), solid card surfaces,
   a cursor spotlight + border glow, a gentle 3D tilt, framed previews that lift on hover */
@property --rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
:root, [data-theme="light"] { --card: #ebebe9; --card-line: rgba(20, 20, 20, 0.09); --glow: 31, 179, 138; --media-line: rgba(20, 20, 20, 0.1); }
[data-theme="dark"] { --card: #1c1c1c; --card-line: rgba(235, 232, 226, 0.09); --glow: 127, 224, 184; --media-line: rgba(235, 232, 226, 0.12); }
.nj-home-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(440px, auto); gap: 16px; padding: 0 var(--gutter); }
.nj-home-bento-card:nth-child(1), .nj-home-bento-card:nth-child(6) { grid-column: span 2; }
/* Performance notes: the tilt, the spotlight and the rim glow only ever change transform or opacity,
   so a pointer move never repaints the card. The tilt is eased in script.js (no CSS transition to
   restart on every mouse event). --rx/--ry/--lift do not inherit, so changing them restyles one node. */
.nj-home-bento-card {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: 24px; background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--card-line), 0 1px 2px rgba(0, 0, 0, 0.04);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0);
  transition: transform 0.9s cubic-bezier(0.34, 1.36, 0.64, 1), box-shadow 0.45s var(--ease), opacity 0.9s var(--ease);
  will-change: transform;
  contain: layout paint style;
}
/* Entrance: rise and settle (the blur only on full-quality GPUs) */
.nj-home-bento-card.nj-home-reveal { opacity: 0; transform: perspective(1100px) translate3d(0, 48px, 0) scale(0.96); transition: transform 0.9s cubic-bezier(0.34, 1.36, 0.64, 1), box-shadow 0.45s var(--ease), opacity 0.9s var(--ease); }
html:not(.gpu-weak) .nj-home-bento-card.nj-home-reveal:not(.nj-shared-is-in) { filter: blur(10px); }
html:not(.gpu-weak) .nj-home-bento-card.nj-home-reveal { transition: transform 0.9s cubic-bezier(0.34, 1.36, 0.64, 1), box-shadow 0.45s var(--ease), opacity 0.9s var(--ease), filter 0.9s var(--ease); }
.nj-home-bento-card.nj-home-reveal.nj-shared-is-in { opacity: 1; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, var(--lift), 0); }
/* While the pointer drives the tilt, script.js eases it; CSS must not add its own lag */
html .nj-home-bento-card.nj-shared-is-hot, html .nj-home-bento-card.nj-shared-is-easing { transition: box-shadow 0.45s var(--ease), opacity 0.9s var(--ease) !important; }
html.gpu-weak .nj-home-bento-card.nj-shared-is-hot, html.gpu-weak .nj-home-bento-card.nj-shared-is-easing { transition: opacity 0.9s var(--ease) !important; }
/* Spotlight and rim glow: fixed-size gradient discs moved with translate3d (compositor only) */
.nj-home-bento-card__glow, .nj-home-bento-card__rim { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.4s var(--ease); }
.nj-home-bento-card__glow { z-index: -1; overflow: hidden; }
.nj-home-bento-card__rim {
  z-index: 3; padding: 1.5px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nj-home-bento-card__glow i, .nj-home-bento-card__rim i { position: absolute; left: 0; top: 0; border-radius: 50%; }
/* Promoted to their own layer only while the card is in use, so idle cards cost nothing */
.nj-shared-is-hot .nj-home-bento-card__glow i, .nj-shared-is-hot .nj-home-bento-card__rim i, .nj-shared-is-easing .nj-home-bento-card__glow i, .nj-shared-is-easing .nj-home-bento-card__rim i { will-change: transform; }
.nj-home-bento-card__glow i { width: 1040px; height: 1040px; margin: -520px 0 0 -520px; background: radial-gradient(closest-side, rgba(var(--glow), 0.16), rgba(var(--glow), 0.05) 55%, transparent); }
.nj-home-bento-card__rim i { width: 560px; height: 560px; margin: -280px 0 0 -280px; background: radial-gradient(closest-side, rgba(var(--glow), 0.95), rgba(var(--glow), 0.18) 50%, transparent 75%); }
.nj-home-bento-card.nj-shared-is-hot .nj-home-bento-card__glow, .nj-home-bento-card.nj-shared-is-hot .nj-home-bento-card__rim { opacity: 1; }
.nj-home-bento-card__head { position: relative; z-index: 1; padding: 28px 30px 22px; }
.nj-home-bento-card__num { display: inline-block; margin-bottom: 18px; padding: 5px 11px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--card-line); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-soft); }
.nj-home-bento-card h3 { font-size: clamp(24px, 2vw, 32px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; }
.nj-home-bento-card p { margin-top: 10px; max-width: 420px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.nj-home-bento-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; list-style: none; }
.nj-home-bento-card__tags li { padding: 5px 10px; border-radius: 100px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); }
/* Framed preview that sits low in the card and lifts on hover */
.nj-home-bento-card__media {
  position: relative; flex: 1; min-height: 170px; margin: 0 22px -18px; overflow: hidden;
  border-radius: 16px 16px 0 0; box-shadow: inset 0 0 0 1px var(--media-line), 0 18px 40px rgba(0, 0, 0, 0.12);
  transform: translate3d(0, 10px, 0); transition: transform 0.6s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.4s var(--ease);
}
.nj-home-bento-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 0.8s var(--ease), filter 0.4s var(--ease); }
@media (hover: hover) {
  .nj-home-bento-card.nj-shared-is-hot { box-shadow: inset 0 0 0 1px transparent, 0 30px 70px rgba(0, 0, 0, 0.14); }
  .nj-home-bento-card.nj-shared-is-hot .nj-home-bento-card__media { transform: translate3d(0, -4px, 0) scale(1.02); }
  .nj-home-bento-card.nj-shared-is-hot .nj-home-bento-card__media img { transform: scale(1.12); }
  /* Neighbours step back (a class set on enter/leave, not :has(:hover) on every move).
     Grayscale only where the GPU has room; weaker machines just fade the preview. */
  .nj-shared-is-focus > .nj-home-bento-card:not(.nj-shared-is-hot) .nj-home-bento-card__media { opacity: 0.45; }
  html:not(.gpu-weak) .nj-shared-is-focus > .nj-home-bento-card:not(.nj-shared-is-hot) .nj-home-bento-card__media img { filter: grayscale(1); }
  .nj-shared-is-focus > .nj-home-bento-card:not(.nj-shared-is-hot) { box-shadow: inset 0 0 0 1px var(--card-line); }
}
/* Touch screens: vertical swipes still scroll the page; a press or sideways drag on a card drives the spotlight and tilt */
@media (hover: none) { .nj-home-bento-card { touch-action: pan-y; } }
/* GPU safe mode: no masked rim layer, a plain border highlight instead; no tilt (script.js) */
html.gpu-safe .nj-home-bento-card__rim { display: none; }
html.gpu-safe .nj-home-bento-card.nj-shared-is-hot { box-shadow: inset 0 0 0 1.5px rgba(var(--glow), 0.55); }
/* Weak GPUs: no animated shadow blur */
.gpu-weak .nj-home-bento-card { transition-property: transform, opacity; }
.gpu-weak .nj-home-bento-card__media { box-shadow: inset 0 0 0 1px var(--media-line); }

/* Process */
.nj-home-method { padding: var(--space) var(--gutter); }
.nj-home-method__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6vw; }
.nj-home-method__aside { position: sticky; top: 110px; align-self: start; }
.nj-home-method__counter { display: flex; align-items: flex-end; gap: 10px; margin-top: 44px; }
.nj-home-method__digits { height: 1em; overflow: hidden; font-size: clamp(110px, 14vw, 220px); font-weight: 500; letter-spacing: -0.06em; line-height: 1; }
.nj-home-method__digits span { display: block; height: 1em; transition: transform 0.9s var(--ease); transform: translateY(calc(var(--step, 0) * -100%)); }
.nj-home-method__total { font-size: 22px; color: var(--ink-faint); padding-bottom: 0.6em; }
.nj-home-method__bar { position: relative; height: 2px; max-width: 360px; margin-top: 26px; background: var(--line); overflow: hidden; }
.nj-home-method__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.nj-home-method__steps { list-style: none; padding-top: 10px; }
.nj-home-step { display: grid; grid-template-columns: 70px 1fr; gap: 20px; padding: 38px 0; border-top: 1px solid var(--line); transform: translateX(0); transition: transform 0.8s var(--ease); }
.nj-home-step h3 { opacity: 0.55; transition: opacity 0.6s var(--ease); }
.nj-home-step__num { opacity: 0.75; transition: opacity 0.6s var(--ease); }
.nj-home-step.nj-shared-is-active h3, .nj-home-step.nj-shared-is-active .nj-home-step__num { opacity: 1; }
.nj-home-step:last-child { border-bottom: 1px solid var(--line); }
.nj-home-step.nj-shared-is-active { transform: translateX(14px); }
.nj-home-step__num { font-size: 14px; font-weight: 600; padding-top: 10px; }
.nj-home-step h3 { font-size: clamp(34px, 3.6vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; }
.nj-home-step p { margin-top: 14px; max-width: 460px; color: var(--ink-soft); font-size: 16px; }

/* Clients */
.nj-home-clients { padding: var(--space) 0; overflow: hidden; }
.nj-home-clients__head { padding: 0 var(--gutter); margin-bottom: 40px; }
.nj-home-clients__belt { overflow: hidden; padding: 8px 0; }
.nj-home-clients__track { display: flex; gap: 14px; width: max-content; animation: crawl 46s linear infinite; }
.nj-home-clients__belt--reverse .nj-home-clients__track { animation-direction: reverse; animation-duration: 58s; }
.nj-home-clients__belt:hover .nj-home-clients__track { animation-play-state: paused; }
.nj-home-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 22px 38px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s;
}
.nj-home-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform 0.55s var(--ease); border-radius: inherit; }
.nj-home-chip:hover { color: var(--bg); border-color: var(--ink); }
.nj-home-chip:hover::before { transform: none; }
.nj-home-chip--ghost { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-soft); border-style: dashed; }

/* Contact */
.nj-home-contact { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 6vw; align-items: center; padding: var(--space) var(--gutter) calc(var(--space) * 1.4); }
.nj-home-contact__lead { margin-top: 26px; max-width: 460px; color: var(--ink-soft); font-size: 17px; }
.nj-home-contact__title { font-size: clamp(44px, 5.6vw, 92px); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; }
.nj-home-contact__title em { text-transform: none; }
.nj-home-contact__lines { list-style: none; margin-top: 44px; max-width: 520px; }
.nj-home-contact__lines li { display: grid; grid-template-columns: 110px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nj-home-contact__lines span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); padding-top: 4px; }
.nj-home-contact__lines a { font-size: 18px; }
.nj-home-contact__lines a:hover { font-style: italic; font-family: var(--serif); }
.nj-home-enquiry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 24px;
  align-content: start;
  padding: 40px;
  border-radius: 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.07);
  position: relative;
  overflow: hidden;
}
/* Card glow */
.nj-home-glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(31, 179, 138, 0.16), transparent 60%);
  opacity: var(--glow, 0);
  transition: opacity 0.5s;
  pointer-events: none;
}
.nj-home-field { position: relative; }
.nj-home-field--wide, .nj-home-field--select { grid-column: 1 / -1; }
.nj-home-field input, .nj-home-field textarea, .nj-home-field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 18px 0 10px;
  outline: none;
  resize: vertical;
  transition: border-color 0.4s;
}
.nj-home-field select { appearance: none; color: var(--ink-soft); cursor: pointer; }
.nj-home-field select:valid { color: var(--ink); }
.nj-home-field select option { background: var(--bg); color: var(--ink); }
.nj-home-field--select::after { content: "\2193"; position: absolute; right: 0; top: 18px; pointer-events: none; }
.nj-home-field label { position: absolute; left: 0; top: 18px; color: var(--ink-soft); pointer-events: none; transform-origin: left; transition: transform 0.45s var(--ease); }
.nj-home-field input:focus, .nj-home-field textarea:focus, .nj-home-field select:focus { border-color: var(--ink); }
.nj-home-field input:focus + label, .nj-home-field input:not(:placeholder-shown) + label,
.nj-home-field textarea:focus + label, .nj-home-field textarea:not(:placeholder-shown) + label { transform: translateY(-22px) scale(0.78); }
.nj-home-enquiry__note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }

/* Footer */
.nj-shared-footer {
  position: relative;
  margin: 0 var(--gutter);
  padding: 0 0 26px;
  border-top: 1px solid var(--ink);
  color: var(--ink);
}
.nj-shared-footer__marquee { margin: 0 calc(var(--gutter) * -1) 60px; padding: 30px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.nj-shared-footer__marquee-track { display: flex; align-items: center; gap: 0.4em; width: max-content; font-size: clamp(48px, 7vw, 120px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; text-transform: uppercase; white-space: nowrap; animation: crawl 30s linear infinite; }
.nj-shared-footer__marquee-track em { text-transform: none; }
/* Ring separator */
.nj-shared-footer__marquee-track .nj-home-sep { position: relative; flex: none; width: 0.42em; height: 0.42em; border: 0.05em solid var(--ink-faint); border-radius: 50%; }
.nj-shared-footer__marquee-track .nj-home-sep::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--ink); }
.nj-shared-footer__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 6vw; padding-bottom: 80px; }
.nj-shared-footer__mail { display: inline-flex; align-items: baseline; gap: 14px; font-size: clamp(32px, 3.8vw, 64px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; border-bottom: 2px solid var(--ink); padding-bottom: 8px; transition: gap 0.6s var(--ease); }
.nj-shared-footer__mail span { font-size: 0.6em; transition: transform 0.6s var(--ease); }
.nj-shared-footer__mail:hover { gap: 24px; }
.nj-shared-footer__mail:hover span { transform: rotate(45deg); }
.nj-shared-footer__note { margin-top: 26px; max-width: 420px; color: var(--ink-soft); font-size: 16px; }
.nj-shared-footer__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.nj-shared-footer__menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-content: start; }
.nj-shared-footer__menus h2, .nj-shared-footer__menus h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px; }
.nj-shared-footer__menus a { position: relative; display: block; width: fit-content; font-size: 18px; padding: 5px 0; transition: transform 0.5s var(--ease); }
.nj-shared-footer__menus a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.nj-shared-footer__menus a:hover { transform: translateX(6px); }
.nj-shared-footer__menus a:hover::after { transform: scaleX(1); transform-origin: left; }
.nj-shared-footer__row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 22px; }
.nj-shared-footer__tools { display: flex; gap: 22px; }
.nj-shared-footer .nj-home-text-link { border-color: var(--line); }

/* Sound switch */
.nj-shared-sound-switch { position: fixed; z-index: 140; right: var(--gutter); bottom: 28px; display: flex; align-items: center; gap: 12px; padding: 6px 0; background: none; border: 0; color: var(--ink); font: 500 13px/1 inherit; font-family: inherit; letter-spacing: 0.02em; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
body.nj-shared-is-ready .nj-shared-sound-switch { opacity: 1; transform: none; transition-delay: 0.9s; }
/* the On / Off word always shows beside the icon, so the state is clear without hovering */
.nj-shared-sound-switch__label { min-width: 22px; text-align: right; opacity: 1; transform: none; transition: opacity 0.4s var(--ease); }
.nj-shared-sound-switch__icon { width: 30px; height: 30px; overflow: visible; }
.nj-shared-sound-switch__icon path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); transform-origin: 16px 16px; }
.nj-shared-sound-switch__arc { animation: sound-spin 2.4s linear infinite; }
.nj-shared-sound-switch__line { opacity: 0; transform: scaleX(0.3); }
.nj-shared-sound-switch.nj-shared-is-off .nj-shared-sound-switch__arc { opacity: 0; animation-play-state: paused; }
.nj-shared-sound-switch.nj-shared-is-off .nj-shared-sound-switch__line { opacity: 1; transform: none; }
@keyframes sound-spin { to { transform: rotate(360deg); } }

/* Sound note that follows the cursor */
.nj-shared-sound-hint { position: fixed; left: 0; top: 0; z-index: 240; font-size: 12px; color: var(--ink-soft); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
.nj-shared-sound-hint.nj-shared-is-on { opacity: 1; }
@media (hover: none) { .nj-shared-sound-hint { display: none; } }

/* Pages that slide up from the bottom */
.nj-shared-page-dim { position: fixed; inset: 0; z-index: 104; background: rgba(28, 28, 30, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.8s cubic-bezier(0.33, 0, 0.2, 1); }
body.nj-shared-has-page .nj-shared-page-dim { opacity: 1; pointer-events: auto; }
body.nj-shared-standalone .nj-shared-page-dim { display: none; }
.nj-shared-page { position: fixed; inset: 0; z-index: 105; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); transform: translate3d(0, 100%, 0); visibility: hidden; transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 1.2s; }
/* The old screen greys first, the new page follows a beat later */
.nj-shared-page.nj-shared-is-open { transform: none; visibility: visible; transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1) 0.22s, visibility 0s; }
.nj-shared-page.nj-shared-is-open.nj-shared-is-under { transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1); }
/* The screen underneath drifts up a little as the new page covers it */
.nj-shared-page { will-change: transform; }
.nj-shared-page.nj-shared-is-open.nj-shared-is-under { transform: translate3d(0, -12vh, 0); }
.nj-shared-page::after { content: ""; position: fixed; inset: 0; z-index: 20; background: rgba(28, 28, 30, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.8s cubic-bezier(0.33, 0, 0.2, 1); }
.nj-shared-page.nj-shared-is-under::after { opacity: 1; }
.nj-shared-page.nj-shared-no-anim::after { transition: none; }
.nj-shared-page.nj-shared-is-top { z-index: 106; }
.nj-shared-page.nj-shared-no-anim { transition: none; }
/* One fixed header over every page: clear while a page slides in, backed once it scrolls */
body.nj-shared-has-page .nj-shared-topbar { background: transparent; transition: transform 0.6s var(--ease), background-color 0.4s var(--ease); }
body.nj-shared-has-page.nj-shared-page-scrolled .nj-shared-topbar { background: var(--bg); }
.nj-shared-page-back { display: none; height: 40px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
body.nj-shared-has-page .nj-shared-page-back { display: inline-flex; }
.nj-shared-page__inner { max-width: 1680px; margin: 0 auto; padding: 130px var(--gutter) 70px; }

/* Big condensed headline, each line rises out of its own mask */
.nj-shared-page__title { display: flex; flex-direction: column; margin-bottom: 9vh; font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(58px, 10.6vw, 196px); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.005em; }
.nj-shared-page__line { display: block; overflow: hidden; padding: 0.02em 0; }
.nj-shared-page__line--right { text-align: right; }
.page__word { display: inline-block; white-space: nowrap; }
.page__char { display: inline-block; transform: translate3d(0, 112%, 0) rotate(4deg); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.nj-shared-page.nj-shared-is-shown .page__char { transform: none; }
/* Heading lines rise whole, one after another, out of their own mask */
.nj-shared-page__rise { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1); }
.nj-shared-page.nj-shared-is-shown .nj-shared-page__rise { transform: none; }
.nj-shared-page.nj-shared-no-anim .nj-shared-page__rise { transition: none; }
.play-list b { overflow: hidden; padding: 0.04em 0 0.02em; }
.nj-shared-page.nj-shared-no-anim .page__char { transition: none; }
.nj-shared-page-reveal { opacity: 0; transform: translate3d(0, 50px, 0); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.nj-shared-page-reveal.nj-shared-is-in { opacity: 1; transform: none; }

.nj-shared-page__big { font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(46px, 6.6vw, 124px); line-height: 0.92; text-transform: uppercase; }
.nj-shared-page__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: start; margin-bottom: 15vh; }
.nj-shared-page__intro p, .nj-shared-page__block p { font-size: clamp(19px, 1.7vw, 27px); line-height: 1.38; max-width: 34ch; }
.nj-shared-page__intro img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.nj-shared-page__block { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4vw; align-items: end; margin-bottom: 15vh; }
.nj-shared-page__block--flip { grid-template-columns: 1fr 1.5fr; }
.nj-shared-page__block--flip .nj-shared-page__big { order: 2; text-align: right; }
.nj-shared-page__facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 15vh; border-top: 1px solid var(--ink); }
.nj-shared-page__facts div { padding: 26px 20px 0 0; }
.nj-shared-page__facts b { display: block; font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(48px, 5vw, 88px); line-height: 1; }
.nj-shared-page__facts span { font-size: 14px; color: var(--ink-soft); }
.nj-shared-page__services { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; margin-bottom: 15vh; }
.nj-shared-page__services ul { columns: 2; column-gap: 3vw; list-style: none; }
.nj-shared-page__services li { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.4vw, 22px); }

/* Project list: hover a name to see the work */
.project-list { list-style: none; margin-bottom: 15vh; }
.project-list li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0.4vh 0; border-top: 1px solid var(--line); cursor: pointer; transition: opacity 0.4s var(--ease); }
.project-list b { font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(46px, 8.6vw, 164px); line-height: 1.02; text-transform: uppercase; }
.project-list span { font-size: 14px; line-height: 1.4; text-align: right; color: var(--ink-soft); }
.project-list.nj-shared-is-hovering li { opacity: 0.18; }
.project-list.nj-shared-is-hovering li.nj-shared-is-hot { opacity: 1; }
.project-peek { position: fixed; left: 0; top: 0; z-index: 107; width: min(34vw, 460px); aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(0.85); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.project-peek.nj-shared-is-on { opacity: 1; transform: none; }
.project-peek img { width: 100%; height: 100%; object-fit: cover; }

.page__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; margin-bottom: 15vh; }
.page__grid span, .page__rows span { font-size: 13px; color: var(--ink-soft); }
.page__grid h2.page__item, .page__grid h3 { margin: 14px 0 10px; font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(26px, 2.3vw, 40px); text-transform: uppercase; }
.page__grid p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.page__rows { list-style: none; margin-bottom: 15vh; }
.page__rows li { display: grid; grid-template-columns: 70px 1.3fr 1.5fr 0.9fr; gap: 2vw; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--line); }
.page__rows h2.page__item, .page__rows h3 { font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(28px, 3vw, 52px); line-height: 1; text-transform: uppercase; }
.page__rows p { font-size: 17px; line-height: 1.5; }
.page__rows small { font-size: 14px; color: var(--ink-soft); text-align: right; }
.page__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.page__tags span { padding: 9px 16px; border: 1px solid var(--ink); border-radius: 100px; font-size: 15px; }
.page__steps { list-style: none; }
.page__steps li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.page__steps b { display: block; margin-bottom: 4px; font-family: "Anton", var(--sans); font-weight: 400; font-size: 28px; color: var(--ink); text-transform: uppercase; }
.page__contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4vw; align-items: end; margin-bottom: 15vh; }
.page__mail { grid-column: 1 / -1; font-family: "Anton", var(--sans); font-size: clamp(40px, 7.4vw, 140px); line-height: 1; word-break: break-all; }
.page__mail:hover { font-family: var(--serif); font-style: italic; }
.page__contact ul { list-style: none; }
.page__contact li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); font-size: clamp(17px, 1.4vw, 22px); }
.page__contact li span { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.page__contact .nj-shared-pill { justify-self: start; height: 54px; padding: 0 28px; }
.page__next { display: flex; align-items: baseline; gap: 24px; padding-top: 3vh; border-top: 1px solid var(--ink); font-family: "Anton", var(--sans); font-size: clamp(48px, 9vw, 170px); line-height: 1; text-transform: uppercase; }
.page__next span { font-family: var(--sans); font-size: 14px; letter-spacing: 0.06em; color: var(--ink-soft); }
.page__next i { font-style: normal; margin-left: auto; transition: transform 0.6s var(--ease); }
.page__next:hover i { transform: translateX(-24px); }
@media (max-width: 700px) {
  .nj-shared-brand__logo { height: 20px; }
  body.nj-shared-has-page .nj-shared-theme-switch { display: none; }
  .nj-shared-page-back { height: 36px; padding: 0 14px; font-size: 12px; }
}
@media (max-width: 900px) {
  .nj-shared-page__inner { padding-top: 110px; }
  .nj-shared-page__intro, .nj-shared-page__block, .nj-shared-page__block--flip, .nj-shared-page__services, .page__contact { grid-template-columns: 1fr; }
  .nj-shared-page__block--flip .nj-shared-page__big { order: 0; text-align: left; }
  .nj-shared-page__facts, .page__grid { grid-template-columns: 1fr 1fr; gap: 6vw; }
  .page__rows li { grid-template-columns: 40px 1fr; }
  .page__rows p, .page__rows small { grid-column: 2; text-align: left; }
  .nj-shared-page__services ul { columns: 1; }
  .project-list span { display: none; }
  .project-peek { display: none; }
}

/* Fieldwork: a list of names, each opens a pile of its images and films */
.play-note { margin-bottom: 4vh; font-size: 14px; color: var(--ink-soft); }
.play-list { list-style: none; margin-bottom: 15vh; transition: opacity 0.7s var(--ease); }
.play-list li { display: flex; justify-content: center; }
.play-list li.play-list__item--right { justify-content: flex-end; }
.play-list button { display: inline-flex; align-items: center; gap: 18px; padding: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; transition: opacity 0.45s var(--ease); }
.play-list b { font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(54px, 9.6vw, 184px); line-height: 0.98; text-transform: uppercase; }
.play-list button > span { opacity: 0; transform: translateY(12px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.nj-shared-page.nj-shared-is-shown .play-list button > span { opacity: 1; transform: none; }
.play-list button > span { font-family: var(--serif); font-size: clamp(13px, 1vw, 16px); line-height: 1.25; color: var(--ink-soft); }
.play-list.nj-shared-is-hovering button { opacity: 0.16; }
.play-list.nj-shared-is-hovering button.nj-shared-is-hot { opacity: 1; }
/* Chosen name stays black, everything else sinks behind a white veil */
.nj-shared-page--play.is-project .play-note, .nj-shared-page--play.is-project .page__next { opacity: 0.1; pointer-events: none; }
.nj-shared-page--play.is-project .play-list { pointer-events: none; }
.nj-shared-page--play.is-project .play-list button { opacity: 0.1; }
.nj-shared-page--play.is-project .play-list button.is-chosen { opacity: 1; }
.nj-shared-page--play.is-project .play-list button.is-chosen > span { opacity: 1; }

.play-stage { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.nj-shared-page--play.is-project .play-stage { pointer-events: auto; cursor: none; }
.play-back, .play-info-btn { position: absolute; z-index: 4; top: 92px; height: 40px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0; transform: translateY(-10px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); cursor: pointer; }
.play-back { left: var(--gutter); }
.play-info-btn { right: var(--gutter); }
.nj-shared-page--play.is-project .play-back, .nj-shared-page--play.is-project .play-info-btn { opacity: 1; transform: none; transition-delay: 0.3s; }
.play-title { display: none; position: absolute; right: var(--gutter); top: 140px; z-index: 0; max-width: 70vw; font-family: "Anton", var(--sans); font-weight: 400; font-size: clamp(54px, 8.4vw, 160px); line-height: 0.92; text-align: right; text-transform: uppercase; pointer-events: none; }
.play-title .page__word { overflow: hidden; padding: 0.04em 0.02em; margin: -0.04em -0.02em; vertical-align: top; }
.nj-shared-page .play-title .page__char { transform: translate3d(0, 112%, 0) rotate(4deg); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.nj-shared-page .play-title.nj-shared-is-in .page__char { transform: none; }
.play-cards { position: absolute; inset: 0; z-index: 1; }
.play-card { position: absolute; overflow: hidden; border-radius: 3px; background: #111; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22); transform: translate3d(0, 40px, 0) scale(0.6); opacity: 0; transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s var(--ease); }
.play-card.nj-shared-is-in { transform: none; opacity: 1; }
.play-card.is-out { opacity: 0; transform: translate3d(0, 30vh, 0) scale(0.96); transition-duration: 0.7s; }
.play-card img, .play-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-cursor { position: fixed; left: 0; top: 0; z-index: 8; padding: 6px 9px 5px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: scale(0.6); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.play-cursor.nj-shared-is-on { opacity: 1; transform: none; }
.play-tap { display: none; }

/* Black info panel that drops from the top */
.play-info { position: absolute; left: 0; right: 0; top: 0; z-index: 5; padding: 120px var(--gutter) 50px; background: #0e0e0e; color: #f1f1f1; transform: translate3d(0, -101%, 0); transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); cursor: auto; }
.play-info.nj-shared-is-open { transform: none; }
.play-info dl { display: grid; grid-template-columns: 140px 1fr; gap: 14px 28px; max-width: 900px; margin-left: auto; margin-right: 8vw; }
.play-info dt { font-family: "Anton", var(--sans); font-size: 18px; text-align: right; text-transform: uppercase; }
.play-info dd { font-family: var(--serif); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.35; color: rgba(241, 241, 241, 0.86); }
.play-info__close { position: absolute; right: var(--gutter); top: 92px; width: 40px; height: 40px; border: 1px solid rgba(241, 241, 241, 0.35); border-radius: 50%; background: none; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 900px) {
  .play-list li, .play-list li.play-list__item--right { justify-content: flex-start; }
  .play-list button > span { display: none; }
  .play-title { top: 150px; font-size: 56px; }
  .play-back, .play-info-btn { top: 86px; }
  .nj-shared-page--play.is-project .play-stage { cursor: auto; }
  .nj-shared-page--play.is-project .play-tap { display: block; position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  .play-info dl { grid-template-columns: 1fr; gap: 4px; margin: 0; }
  .play-info dt { text-align: left; margin-top: 12px; }
}

/* Scroll reveal */
.nj-home-reveal { opacity: 0; transform: translateY(46px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.nj-home-reveal.nj-shared-is-in { opacity: 1; transform: none; }

/* Tablet */
@media (max-width: 1024px) {
  .nj-shared-topbar__nav { display: none; }
  .nj-shared-topbar__tools { margin-left: auto; }
  .nj-home-hero__orb { width: calc(min(62vw, 54vh) - 16px); }
  .nj-home-hero__rings { width: min(calc((min(62vw, 54vh) - 16px) * 1.15 + 5px), calc(max(100vh, 645px) * 0.81 - 8px)); }
  .nj-shared-footer__top { grid-template-columns: 1fr; }
  .nj-home-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(420px, auto); }
  .nj-home-bento-card:nth-child(6) { grid-column: auto; }
  .nj-home-stack-card { grid-template-columns: 1fr; }
  .nj-home-stack-card__screen { transform: none; }
  .nj-home-method__grid { grid-template-columns: 1fr; }
  .nj-home-method__aside { position: relative; top: auto; }
  .nj-home-contact { grid-template-columns: 1fr; gap: 60px; }
}

/* Mobile */
@media (max-width: 700px) {
  .nj-shared-brand { font-size: 18px; }
  .nj-home-hero { min-height: 620px; }
  /* Phones: a smaller bubble with the words around it, the same layout as desktop */
  .nj-home-hero__orb { width: calc(66vw - 8px); top: 44%; }
  .nj-home-hero__rings { width: min(calc((66vw - 8px) * 1.15 + 5px), calc(max(100vh, 620px) * 0.9 - 8px)); top: 44%; }
  /* Short phones: lift the bubble and words so the intro text sits clear below them */
  @media (max-height: 760px) { .nj-home-hero__orb, .nj-home-hero__rings { top: 39%; } }
  @media (max-height: 680px) { .nj-home-hero__orb, .nj-home-hero__rings { top: 36%; } }
  .nj-home-hero__line { font-size: clamp(30px, 9vw, 60px); }
  .nj-home-hero__line--one { left: var(--gutter); top: 17vh; }
  .nj-home-hero__line--two { right: var(--gutter); top: 31vh; }
  .nj-home-hero__line--three { left: var(--gutter); top: 45vh; }
  .nj-home-hero__tag { display: none; }
  .nj-home-hero__foot { right: var(--gutter); bottom: 72px; gap: 18px; }
  .nj-shared-sound-switch { bottom: 16px; }
  .nj-home-hero__scroll { display: none; }
  .nj-home-statement { padding: calc(var(--space) * 1.4) var(--gutter) var(--space); }
  .nj-home-statement__facts { grid-template-columns: 1fr; gap: 26px; margin-top: 60px; }
  .nj-home-statement__pillars { gap: 12px; padding-top: 40px; }
  .nj-home-statement__pillars .nj-home-bento-card.nj-home-pillar { min-height: 0; padding: 26px 22px 30px; }
  .nj-home-bento-card.nj-home-pillar h3 { margin-top: 26px; }
  .nj-home-bento-card.nj-home-pillar .nj-home-pillar__text { margin-top: 18px; }
  .nj-home-service { grid-template-columns: 34px 1fr; gap: 10px 14px; padding: 24px var(--gutter); }
  .nj-home-service__text { grid-column: 2; }
  .nj-home-stack-card { position: relative; top: auto; min-height: 0; border-radius: 16px; margin-bottom: 20px; transform: none !important; filter: none !important; }
  .nj-home-bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .nj-home-bento-card:nth-child(n) { grid-column: auto; }
  .nj-home-bento-card__head { padding: 24px 22px 20px; }
  .nj-home-bento-card__media { flex: none; height: 210px; margin: 0 16px -14px; }
  .nj-shared-footer__marquee { margin-bottom: 44px; padding: 24px 0; }
  .nj-home-nmark { height: 260vh; }
  .nj-home-nmark__pin { border-radius: 1.25em; }
  .nj-home-nmark__line { white-space: normal; max-width: 14ch; font-size: clamp(26px, 8.4vw, 44px); line-height: 1.12; }
  .nj-home-chip { padding: 14px 24px; }
  .nj-home-step { grid-template-columns: 44px 1fr; padding: 32px 0; }
  .nj-home-method__digits { font-size: 96px; }
  .nj-shared-footer__menus { grid-template-columns: 1fr 1fr; }
  .nj-home-enquiry { grid-template-columns: 1fr; padding: 24px; }
  .nj-shared-footer__row { flex-direction: column; align-items: flex-start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Smaller text keeps a soft halo of the wall colour so it reads over the carving */
main p, main li, main span, main small, main dd, main dt, .nj-shared-footer p, .nj-shared-footer a, .nj-shared-footer li, .nj-shared-footer span, .fact b, .nj-shared-footer h4, .nj-shared-footer h2 {
  text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg);
}
.nj-home-hero__title, .nj-home-hero__title *, .nj-home-ticker, .nj-home-ticker *, main .nj-shared-pill, .nj-shared-footer .nj-shared-pill, .nj-shared-pill *, .nj-shared-page *, .nj-shared-ink-menu *, .nj-home-stack-card *, .reel *, .nj-home-bento-card *, .lightbox *, .nj-home-service:hover *, .nj-home-chip, .nj-home-chip * { text-shadow: none; }
.nj-shared-ink-menu__inner { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65); }
body.nj-shared-menu-open .nj-shared-sound-hint { display: none; }

/* Client names sit on a solid wall-coloured pill so the carving never runs through them */
.nj-home-clients__belt .nj-home-chip { background: var(--bg); color: var(--ink); border-color: var(--line); }
.nj-home-clients__belt .nj-home-chip--ghost { color: var(--ink-soft); }

/* Pages scroll on their own without a second bar or any sideways drift */
.nj-shared-page { overflow-x: hidden; scrollbar-width: none; }
.nj-shared-page::-webkit-scrollbar { display: none; }
body.nj-shared-has-page { overflow: hidden; }

/* Coming back from a dark inner page: the dark lifts off the home page */
html.from-dark body::after { content: ""; position: fixed; inset: 0; z-index: 400; background: #000; pointer-events: none; animation: from-dark 1.4s 0.25s cubic-bezier(0.33, 0, 0.2, 1) forwards; }
@keyframes from-dark { to { opacity: 0; visibility: hidden; } }
.nj-shared-sound-hint { font-size: 12px; letter-spacing: 0.04em; }

/* Header: clear over the hero, the site colour once the page has scrolled */
.nj-shared-topbar { transition: transform 0.6s var(--ease), background-color 0.4s var(--ease); }
.nj-shared-topbar.nj-shared-is-solid { background-color: var(--bg); }
.nj-shared-svc-bar.nj-shared-is-solid { background-color: #000; }


/* ---------- Accessibility (WCAG 2.2) ---------- */

/* Screen-reader-only text */
.nj-shared-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip to content: hidden until it gets keyboard focus, sits above the intro */
.nj-shared-skip-link { position: fixed; left: var(--gutter); top: 12px; z-index: 500; padding: 12px 20px; border-radius: 100px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; transform: translateY(-160%); transition: transform 0.3s var(--ease); }
.nj-shared-skip-link:focus, .nj-shared-skip-link:focus-visible { transform: none; outline: 2px solid var(--ink); outline-offset: 3px; }
main:focus, .nj-shared-page:focus, .play-info:focus { outline: none; }

/* Visible focus on form fields */
.nj-home-field input:focus-visible, .nj-home-field textarea:focus-visible, .nj-home-field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.project-list li:focus-visible { outline-offset: 6px; }
/* Light rings where the background is dark */
.nj-shared-ink-menu :focus-visible, .lightbox :focus-visible, .play-info :focus-visible, .reel__copy :focus-visible, .nj-home-stack-card--dark :focus-visible { outline-color: #f1f1f1; }
.nj-shared-ink-item__head:focus-visible .nj-shared-ink-item__more { max-width: 13em; opacity: 1; }

/* Form errors */
.nj-home-field [aria-invalid="true"] { border-bottom-color: #a3191b; }
.nj-home-enquiry__note.nj-shared-is-error { color: #a3191b; font-weight: 500; }
[data-theme="dark"] .nj-home-field [aria-invalid="true"] { border-bottom-color: #ff8a80; }
[data-theme="dark"] .nj-home-enquiry__note.nj-shared-is-error { color: #ff8a80; }

/* Closed info panel and viewer stay out of the tab order */
.play-info:not(.nj-shared-is-open) { visibility: hidden; transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.9s; }

/* Next image: keyboard alternative to clicking the pile, shown when focused */
.play-next { position: absolute; z-index: 4; left: 50%; bottom: 28px; height: 40px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; transform: translate(-50%, 160%); opacity: 0; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.play-next:focus-visible { opacity: 1; transform: translate(-50%, 0); }

/* Users who ask for more contrast get full-strength text everywhere */
@media (prefers-contrast: more) {
  .nj-home-light-words .nj-shared-w, .nj-home-step h3, .nj-home-step__num { opacity: 1; }
  :root, [data-theme="light"] { --ink-faint: rgba(20, 20, 20, 0.85); --ink-soft: #141414; }
  [data-theme="dark"] { --ink-faint: rgba(235, 232, 226, 0.85); --ink-soft: #ebe8e2; }
}

/* Project preview opened by keyboard or tap also works on small screens */
.project-peek.is-pinned { display: block; }
@media (max-width: 900px) { .project-peek.is-pinned { width: 62vw; } }

/* The reel lightbox becomes visible at once so focus can move into it */
.lightbox.nj-shared-is-open { transition: opacity 0.5s, visibility 0s; }

/* 3D layers fade in once their GPU work is done, instead of popping in mid-animation */
.nj-home-stage { opacity: 0; transition: opacity 1.6s var(--ease); }
.nj-home-stage.nj-shared-is-live { opacity: 1; }
.nj-home-hero__orb-canvas { opacity: 0; transition: opacity 0.8s var(--ease); }
.nj-home-hero__orb-canvas.nj-shared-is-live { opacity: 1; }

/* Trusted by: the hovered chip flips to the ink colour with readable text, in both themes */
.nj-home-clients__belt .nj-home-chip:hover, .nj-home-clients__belt .nj-home-chip--ghost:hover { color: var(--bg); border-color: var(--ink); }

/* Nothing loops unseen: off-screen sections, and the home page while a page panel or the full menu covers it */
.nj-shared-is-offscreen .nj-home-ticker__track, .nj-shared-is-offscreen .nj-home-clients__track, .nj-shared-is-offscreen .nj-shared-footer__marquee-track,
.nj-shared-is-offscreen .reel__col, .nj-shared-is-offscreen .nj-home-hero__orbit circle, .nj-shared-is-offscreen .nj-home-hero__scroll span,
.nj-home-ticker.nj-shared-is-offscreen .nj-home-ticker__track,
body.nj-shared-has-page main *, body.nj-shared-has-page .nj-shared-footer *, body.nj-shared-menu-full main *, body.nj-shared-menu-full .nj-shared-footer * { animation-play-state: paused !important; }

/* Menu: one list of services, the old sub menus are switched off in the markup */
.nj-shared-ink-menu__label { margin-bottom: 14px; font: 500 12px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(236, 235, 232, 0.75); opacity: 0; transition: opacity 0.7s var(--ease); }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-menu__label { opacity: 1; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item:nth-child(5) .nj-shared-ink-item__head { transition-delay: 0.28s, 0.28s, 0s; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item:nth-child(6) .nj-shared-ink-item__head { transition-delay: 0.35s, 0.35s, 0s; }
.nj-shared-ink-menu.nj-shared-is-shown .nj-shared-ink-item:nth-child(7) .nj-shared-ink-item__head { transition-delay: 0.42s, 0.42s, 0s; }
.nj-shared-page__services a { color: inherit; border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease); }
.nj-shared-page__services a:hover, .nj-shared-page__services a:focus-visible { border-bottom-color: currentColor; }

/* Fieldwork: clients A to Z with a type column, a preview beside the hovered name, smoke behind */
.nj-shared-page--play .nj-shared-page__inner { position: relative; }
.nj-shared-smoke { position: sticky; top: 0; display: block; width: 100vw; height: 100vh; margin: -130px 0 -100vh calc(50% - 50vw); pointer-events: none; opacity: 0.45; }
.nj-shared-clients-wrap { position: relative; z-index: 1; max-width: 820px; margin: calc(130px + 4vh) auto 10vh; }
.clients-note { margin-bottom: 5vh; font-size: 13px; color: var(--ink-soft); text-align: center; }
.nj-shared-clients-list { list-style: none; }
.nj-shared-clients-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; column-gap: clamp(28px, 5vw, 80px); }
.nj-shared-clients-row[hidden] { display: none; }
.nj-shared-clients-row__type { justify-self: end; padding: 10px 0; border: 0; background: none; color: var(--ink-soft); font: 500 13px/1.2 var(--sans); letter-spacing: 0.01em; cursor: pointer; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
.nj-shared-clients-row__type:hover { color: var(--ink); }
.nj-shared-clients-row__name { position: relative; justify-self: start; padding: 6px 0 8px; border: 0; background: none; color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 2.1vw, 32px); line-height: 1.15; text-align: left; cursor: pointer; }
.nj-shared-clients-row__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); }
.nj-shared-clients-row.nj-shared-is-hot .nj-shared-clients-row__name::after { transform: scaleX(1); }
.nj-shared-clients-list.nj-shared-is-hovering .nj-shared-clients-row__type { opacity: 0.3; }
.nj-shared-clients-list.nj-shared-is-hovering .nj-shared-clients-row.nj-shared-is-hot .nj-shared-clients-row__type { opacity: 1; color: var(--ink); }
.nj-shared-clients-list.nj-shared-is-filtered .nj-shared-clients-row__type { color: var(--ink); }
.nj-shared-client-peek { position: absolute; z-index: 2; left: var(--gutter); top: 0; translate: 0 calc(var(--y, 40vh) - 50%); width: min(26vw, 360px); opacity: 0; transform: scale(0.94); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.nj-shared-client-peek.nj-shared-is-on { opacity: 1; transform: none; }
.nj-shared-client-peek__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); }
.nj-shared-client-peek__media video, .nj-shared-client-peek__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nj-shared-client-peek__tags { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.page__next--play { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .nj-shared-smoke { margin-top: -110px; }
  .nj-shared-clients-wrap { margin-top: calc(110px + 2vh); }
  .nj-shared-clients-row { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .nj-shared-clients-row__type { font-size: 12px; text-align: right; }
  .nj-shared-client-peek { left: auto; right: var(--gutter); width: 52vw; }
}

/* Menu: one size smaller and starting higher, just under the header */
.nj-shared-ink-item__head { font-size: clamp(32px, 4vw, 58px); }
.nj-shared-ink-menu__list { margin: 1vh 0 auto; }
@media (max-width: 700px) { .nj-shared-ink-item__head { font-size: 34px; } }

/* Fieldwork: back to the full list after filtering by type */
.nj-shared-clients-all { display: flex; margin: 0 auto 3vh; height: 40px; font-size: 13px; }
.nj-shared-clients-all[hidden] { display: none; }
/* Page footer sits at the end of every slide-up page */
.nj-shared-footer--page { margin: 12vh 0 0; padding-top: 60px; }

/* Studio intro picture: a 400 x 500 portrait, not a full width crop */
#page-studio .nj-shared-page__intro img { width: 400px; max-width: 100%; height: auto; aspect-ratio: 4 / 5; justify-self: end; }

/* Vimeo films fill the preview like the local clips do */
.nj-shared-client-peek__media iframe { display: block; width: 100%; height: 100%; border: 0; transform: scale(1.12); pointer-events: none; }

/* Fieldwork heading, and the preview exists only while a name is hovered */
.nj-shared-clients-head { margin-bottom: 5vh; font: 400 clamp(36px, calc(5.2vw - 4px), 84px)/0.95 "Anton", var(--sans); letter-spacing: 0.01em; text-transform: uppercase; text-align: center; }
/* Desktop: one vw smaller, the cap scaled to match */
@media (min-width: 901px) { .nj-shared-clients-head { font-size: clamp(30px, calc(4.2vw - 4px), 68px); } }
.nj-shared-client-peek:not(.nj-shared-is-on) { visibility: hidden; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.4s; }

/* ============================================================
   GPU SAFE MODE
   html.gpu-safe (+ .no-webgl) is set before first paint by the head guard when the browser
   renders WebGL in software, has no WebGL, is automated or asks for reduced motion, and at
   runtime by the watchdog in script.js if real frame rates collapse. In this mode no WebGL
   context is ever created (canvases are removed from layout, not just hidden), so the page
   costs the GPU almost nothing. html.gpu-weak = reduced quality tier.
   ============================================================ */
html.gpu-safe .nj-home-stage,
html.gpu-safe .nj-home-hero__orb-canvas,
html.gpu-safe .nj-home-coin-intro__canvas,
html.gpu-safe .nj-shared-ink-menu__canvas,
html.gpu-safe .nj-shared-svc-water { display: none !important; }
html.gpu-safe .nj-home-hero__orb-fallback { display: block; }
/* The text halo only exists to lift copy off the carved wall; with no wall it is pure paint cost */
html.no-webgl main p, html.no-webgl main li, html.no-webgl main span, html.no-webgl main small, html.no-webgl main dd, html.no-webgl main dt,
html.no-webgl .nj-shared-footer p, html.no-webgl .nj-shared-footer a, html.no-webgl .nj-shared-footer li, html.no-webgl .nj-shared-footer span,
html.no-webgl .fact b, html.no-webgl .nj-shared-footer h4, html.no-webgl .nj-shared-footer h2 { text-shadow: none; }
/* Endless decorative loops rest. Entrance animations are left alone on purpose: pausing a
   fill-mode animation would freeze things half-shown (or leave the black return veil on screen). */
html.gpu-safe .nj-home-hero__orbit circle,
html.gpu-safe .nj-home-hero__scroll span,
html.gpu-safe .nj-home-ticker__track,
html.gpu-safe .reel__col,
html.gpu-safe .nj-home-clients__track,
html.gpu-safe .nj-shared-footer__marquee-track,
html.gpu-safe .nj-shared-sound-switch__arc { animation-play-state: paused; }
/* Blur filters are the most expensive thing a software compositor does */
html.gpu-safe .nj-home-hero__orb-fallback { filter: none; }
html.gpu-safe .nj-home-bento-card__media img { transition: transform 0.6s var(--ease); }

.nj-shared-ink-menu__inner { padding: 90px var(--gutter) 34px; }

/* Trusted by: client logos. The files are white; in the light theme they show in ink, and the hovered chip (which
   fills with ink) flips its logo to the page colour. Each logo has its own height (--h) so they look equally weighty. */
.nj-home-clients__dup { display: contents; }
.nj-home-chip--logo { padding: 0 40px; height: clamp(72px, 6.4vw, 96px); justify-content: center; }
.nj-home-chip--logo img { display: block; height: var(--h); width: auto; max-width: none; filter: brightness(0); opacity: 0.82; transition: filter 0.45s var(--ease), opacity 0.45s var(--ease); }
.nj-home-chip--logo:hover img { filter: brightness(0) invert(1); opacity: 1; }
[data-theme="dark"] .nj-home-chip--logo img { filter: none; opacity: 0.88; }
[data-theme="dark"] .nj-home-chip--logo:hover img { filter: brightness(0); opacity: 1; }
@media (max-width: 760px) { .nj-home-chip--logo { padding: 0 26px; height: 64px; } .nj-home-chip--logo img { height: calc(var(--h) * 0.72); } }