/* Service pages: a lit letter in the dark, the story scrolls up past it */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: block; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"), url("fonts/cormorant-garamond-latin-500-normal.woff") format("woff"); }

body.nj-shared-svc-page {
  --svc-ink: #ecebe8;
  --svc-soft: rgba(236, 235, 232, 0.62);
  --svc-line: rgba(236, 235, 232, 0.14);
  --glyph: min(58vh, 44vw);
  background: #000;
  color: var(--svc-ink);
  font-family: var(--serif);
}
body.nj-shared-svc-page ::selection { background: var(--svc-ink); color: #000; }
.nj-shared-svc-page .nj-shared-pointer { background: #ecebe8; }

/* Header: logo, Back in the middle, menu on the right */
.nj-shared-svc-bar { position: fixed; inset: 0 0 auto 0; z-index: 120; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px var(--gutter); color: #f1f1f1; }
.nj-shared-svc-bar.nj-shared-is-hidden { transform: none; }
.nj-shared-svc-bar .nj-shared-brand { justify-self: start; }
.nj-shared-svc-bar .nj-shared-menu-btn { justify-self: end; color: #f1f1f1; }
.nj-shared-svc-bar__back { font: 400 15px/1 var(--sans); letter-spacing: 0.01em; opacity: 0.85; transition: opacity 0.4s; }
.nj-shared-svc-bar__back:hover { opacity: 1; }
body.nj-shared-menu-open .nj-shared-svc-bar__back { opacity: 0; pointer-events: none; }

/* Loading line, then the letter fades up from grey to white */
.nj-shared-svc-loading { position: fixed; left: 50%; top: 50%; z-index: 3; translate: -50% -50%; font: 400 12px/1 var(--sans); letter-spacing: 0.04em; color: var(--svc-soft); transition: opacity 0.6s; }
body:not(.nj-shared-is-loading) .nj-shared-svc-loading { opacity: 0; }

/* The stage stays fixed while the page scrolls over it */
.nj-shared-svc-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }


/* Specks of light floating up through the dark */
.nj-shared-svc-motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 8px 2px rgba(255, 214, 80, 0.75); opacity: 0; animation: svc-mote 14s linear infinite; }
.nj-shared-svc-motes i:nth-child(1) { left: 8%; animation-delay: -2s; }
.nj-shared-svc-motes i:nth-child(2) { left: 17%; animation-delay: -9s; animation-duration: 18s; }
.nj-shared-svc-motes i:nth-child(3) { left: 26%; animation-delay: -5s; }
.nj-shared-svc-motes i:nth-child(4) { left: 34%; animation-delay: -12s; animation-duration: 20s; }
.nj-shared-svc-motes i:nth-child(5) { left: 43%; animation-delay: -1s; animation-duration: 16s; }
.nj-shared-svc-motes i:nth-child(6) { left: 52%; animation-delay: -7s; }
.nj-shared-svc-motes i:nth-child(7) { left: 61%; animation-delay: -14s; animation-duration: 19s; }
.nj-shared-svc-motes i:nth-child(8) { left: 69%; animation-delay: -3s; animation-duration: 17s; }
.nj-shared-svc-motes i:nth-child(9) { left: 77%; animation-delay: -10s; }
.nj-shared-svc-motes i:nth-child(10) { left: 85%; animation-delay: -6s; animation-duration: 21s; }
.nj-shared-svc-motes i:nth-child(11) { left: 92%; animation-delay: -11s; animation-duration: 15s; }
.nj-shared-svc-motes i:nth-child(12) { left: 4%; animation-delay: -15s; animation-duration: 22s; }
@keyframes svc-mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.8; }
  50% { transform: translate3d(24px, -50vh, 0); opacity: 0.5; }
  88% { opacity: 0.7; }
  100% { transform: translate3d(-12px, -104vh, 0); opacity: 0; }
}




/* Content */
.nj-shared-svc { position: relative; z-index: 2; }
.svc-open { position: relative; height: 100vh; }
.svc-open__title { position: absolute; left: var(--gutter); bottom: calc(7vh + 128px); font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.01em; }
.svc-open__lead { position: absolute; left: var(--gutter); bottom: 7vh; width: min(380px, 100% - var(--gutter) * 2); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.32; }
.nj-shared-svc-rise { opacity: 0; transform: translateY(24px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
body.nj-shared-is-shown .nj-shared-svc-rise { opacity: 1; transform: none; }
body.nj-shared-is-shown .svc-open__lead { transition-delay: 0.25s; }

/* Blocks take turns on the left, the right and the middle */
.svc-block { width: min(560px, 100% - var(--gutter) * 2); margin-bottom: 26vh; }
.svc-block--right { margin-left: calc(50% + 6vw); }
.svc-block--left { margin-left: var(--gutter); }
.svc-block--center { margin-left: auto; margin-right: auto; text-align: center; width: min(720px, 100% - var(--gutter) * 2); }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: min(760px, 100% - var(--gutter) * 2); }

.svc-intro { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.28; }
.svc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.svc-stats dt { font-size: clamp(30px, 2.8vw, 46px); line-height: 1; }
.svc-stats dd { margin-top: 8px; font: 400 13px/1.4 var(--sans); color: var(--svc-soft); }
.nj-shared-svc ul, .nj-shared-svc ol { list-style: none; }
.svc-label { margin: 0 0 18px; font: 500 12px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--svc-soft); }
.svc-list + .svc-label { margin-top: 54px; }
.svc-list li { font-size: clamp(22px, 1.75vw, 28px); line-height: 1.32; }

/* The letter's own moments: tall, quiet sections with one line underneath */
.nj-shared-svc-pause { position: relative; min-height: 150vh; padding: 0 var(--gutter) 4vh; text-align: center; }
.nj-shared-svc-pause + .svc-block { margin-top: 22vh; }
.nj-shared-svc-pause__inner { position: sticky; top: 82vh; margin-top: 55vh; }
.nj-shared-svc-end .nj-shared-svc-pause__inner { top: 76vh; }
.svc-pause__line { font-size: clamp(30px, 3.2vw, 54px); line-height: 1.1; }

.nj-shared-svc-work li { border-bottom: 1px solid var(--svc-line); }
.nj-shared-svc-work button { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 16px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nj-shared-svc-work b { font-weight: 400; font-size: clamp(24px, 2vw, 32px); transition: transform 0.5s var(--ease); }
.nj-shared-svc-work span { font: 400 13px/1 var(--sans); color: var(--svc-soft); }
.nj-shared-svc-work button:hover b, .nj-shared-svc-work button.is-chosen b { font-style: italic; transform: translateX(8px); }
.nj-shared-svc-work.has-chosen button:not(.is-chosen) { opacity: 0.35; }
.svc-hint { margin-top: 18px; font: 400 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--svc-soft); }

.svc-say { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.32; }
.svc-say + .svc-say { margin-top: 28px; }
.svc-steps li { display: grid; grid-template-columns: 46px 1fr; padding: 16px 0; border-bottom: 1px solid var(--svc-line); font-size: clamp(22px, 1.75vw, 28px); line-height: 1.2; }
.svc-steps span { padding-top: 7px; font: 500 12px/1 var(--sans); color: var(--svc-soft); }
.svc-steps em { grid-column: 2; display: block; margin-top: 6px; font: 400 14px/1.5 var(--sans); font-style: normal; color: var(--svc-soft); }
.svc-stack { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5; color: var(--svc-soft); }
.nj-shared-svc-end { padding-bottom: 18vh; }
.svc-end__title { font-size: clamp(40px, 4vw, 66px); line-height: 1.02; }
.nj-shared-svc-end__actions { display: flex; justify-content: center; gap: 28px; margin-top: 34px; }
.nj-shared-svc-link { padding-bottom: 5px; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.nj-shared-svc-link:hover { opacity: 0.7; }

/* Each line arrives as it scrolls in */
.nj-shared-svc-in { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.nj-shared-svc-in.nj-shared-is-in { opacity: 1; transform: none; }


/* Sound and Next on the dark page */
.nj-shared-svc-page .nj-shared-sound-switch { color: #f1f1f1; }
.nj-shared-svc-page .nj-shared-sound-hint { color: rgba(236, 235, 232, 0.75); }
.svc-next { position: fixed; left: 50%; bottom: 26px; z-index: 5; translate: -50% 0; font: 400 15px/1 var(--sans); opacity: 0.85; transition: opacity 0.4s; }
.svc-next:hover { opacity: 1; }
body.nj-shared-menu-open .svc-next { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  body.nj-shared-svc-page { --glyph: 64vw; }
  .svc-block--right, .svc-block--left { margin-left: var(--gutter); }
  .svc-cols { grid-template-columns: 1fr; gap: 0; }
  .svc-cols > div + div .svc-label:first-child { margin-top: 54px; }
  .svc-block { margin-bottom: 16vh; }
  .svc-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nj-shared-svc-in, .nj-shared-svc-rise { opacity: 1; transform: none; transition: none; }
  .nj-shared-svc-motes { display: none; }
}

/* The scene: letter, swaying plants and the water, all drawn on one canvas */
.nj-shared-svc-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Project reel opens as a circle from the click and closes back into it */
.nj-shared-svc-reel { position: fixed; inset: 0; z-index: 150; background: #000; clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%)); visibility: hidden; transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.9s; cursor: pointer; }
.nj-shared-svc-reel.nj-shared-is-open { clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%)); visibility: visible; transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1); }
.nj-shared-svc-reel__video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.nj-shared-svc-reel.nj-shared-is-open .nj-shared-svc-reel__video { transform: none; }
.nj-shared-svc-reel__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; display: flex; align-items: center; gap: 28px; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.6s var(--ease); }
.nj-shared-svc-reel.nj-shared-is-open .nj-shared-svc-reel__bar { opacity: 1; transform: none; transition-delay: 0.6s; }
.nj-shared-svc-reel__name { font-size: clamp(26px, 2.4vw, 40px); line-height: 1; white-space: nowrap; }
.nj-shared-svc-reel__progress { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); }
.nj-shared-svc-reel__progress i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.nj-shared-svc-reel__close { background: none; border: 0; color: #fff; font: 400 15px/1 var(--sans); cursor: pointer; }
body.nj-shared-reel-open .nj-shared-svc-bar, body.nj-shared-reel-open .svc-next { opacity: 0; pointer-events: none; }
.nj-shared-svc-bar, .svc-next { transition: opacity 0.5s; }

/* Sound: the state reads at a glance on this page */
.nj-shared-svc-page .nj-shared-sound-switch__label { opacity: 1; transform: none; min-width: 0; }
.nj-shared-svc-page .nj-shared-sound-hint { font: 500 12px/1 var(--sans); letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8); mix-blend-mode: normal; z-index: 260; transition: opacity 0.35s; }
@media (hover: none) { .nj-shared-svc-page .nj-shared-sound-hint { display: none; } }

/* Leaving: everything sinks into black before the home page takes over */
.nj-shared-svc-page::after { content: ""; position: fixed; inset: 0; z-index: 300; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.75s cubic-bezier(0.33, 0, 0.2, 1); }
.nj-shared-svc-page.nj-shared-is-leaving::after { opacity: 1; pointer-events: auto; }

/* Text scrolling up fades out before it reaches the header, and in again above Next */
.nj-shared-svc-veil { position: fixed; left: 0; right: 0; z-index: 100; pointer-events: none; }
.nj-shared-svc-veil--top { top: 0; height: 90px; background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.85) 45%, transparent); }
.nj-shared-svc-veil--bottom { bottom: 0; height: 90px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); }
.svc-next { z-index: 110; }

/* ===== Text blocks, laid out like a quiet book page around the letter ===== */
@font-face { font-family: "Tinos"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tinos-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Tinos"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/tinos-latin-400-italic.woff2") format("woff2"); }
body.nj-shared-svc-page { --times: "Tinos", "Times New Roman", Times, serif; font-family: var(--times); color: #e8e8e8; }

.nj-shared-tb { min-height: 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; align-content: center; padding: 9vh var(--gutter); }
.nj-shared-tb__col { grid-row: 1; }
.nj-shared-tb__col--left { grid-column: 2 / span 4; }
.nj-shared-tb__col--right { grid-column: 8 / span 4; }
.nj-shared-tb__col--wide { grid-column: 2 / span 5; }
.nj-shared-tb--open { align-content: end; padding-bottom: 12vh; }
.nj-shared-tb--open { padding-left: 0; padding-right: 0; }
.nj-shared-tb--open { min-height: 100vh; }
.nj-shared-tb--open .nj-shared-tb__col--left { grid-column: 1 / span 4; padding-left: calc(var(--gutter) + 6vw); padding-right: 2vw; }

.nj-shared-tb__title { font: 400 clamp(34px, 3.06vw, 58px)/1.1 var(--times); padding-bottom: 6vh; letter-spacing: -0.005em; }
.nj-shared-tb__scroll { font: 400 14px/1.1 var(--sans); padding-bottom: 7vh; opacity: 0.85; }
.nj-shared-tb__text { font: 400 clamp(22px, 1.94vw, 37px)/1.22 var(--times); }
.nj-shared-tb__text + .nj-shared-tb__text { margin-top: 1.1em; }
.nj-shared-tb__text--quiet { color: rgba(232, 232, 232, 0.55); }
.nj-shared-tb__text--large { font-size: clamp(32px, 3.06vw, 58px); line-height: 1.1; }
.nj-shared-tb__text em, .nj-shared-tb__text--large em { font-style: italic; font-family: var(--times); }
.nj-shared-tb__small { font: 400 clamp(17px, 1.3vw, 24px)/1.6 var(--times); color: rgba(232, 232, 232, 0.6); }
.nj-shared-tb__hint { margin-top: 2em; font: 400 13px/1 var(--sans); color: rgba(232, 232, 232, 0.62); }

.nj-shared-tb__lists { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5em; }
.nj-shared-tb__lists ul { list-style: none; }
.nj-shared-tb__lists li { font: 400 clamp(19px, 1.53vw, 29px)/1.7 var(--times); }
.nj-shared-tb__lists ul:nth-child(2) li { color: rgba(232, 232, 232, 0.62); }

/* Selected work: a plain list, the hovered name leans into italics */
.nj-shared-svc-work { list-style: none; margin-top: 0.9em; border: 0; }
.nj-shared-svc-work li { border: 0; }
.nj-shared-svc-work button { display: flex; align-items: baseline; gap: 0.8em; width: 100%; padding: 0.12em 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.nj-shared-svc-work b { font: 400 clamp(19px, 1.53vw, 29px)/1.6 var(--times); transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.nj-shared-svc-work span { font: 400 12px/1 var(--sans); color: rgba(232, 232, 232, 0.62); opacity: 0; transform: translateX(-6px); transition: opacity 0.5s, transform 0.6s var(--ease); }
.nj-shared-svc-work button:hover b { font-style: italic; }
.nj-shared-svc-work button:hover span { opacity: 1; transform: none; }
.nj-shared-svc-work:hover button:not(:hover) b { opacity: 0.4; }

/* Process: roman numerals, title, a quiet line */
.nj-shared-tb__steps { list-style: none; }
.nj-shared-tb__steps li { display: grid; grid-template-columns: 2.4em 1fr; font: 400 clamp(22px, 1.94vw, 37px)/1.25 var(--times); }
.nj-shared-tb__steps li + li { margin-top: 0.85em; }
.nj-shared-tb__steps span { padding-top: 0.42em; font: 400 12px/1 var(--sans); color: rgba(232, 232, 232, 0.62); letter-spacing: 0.08em; }
.nj-shared-tb__steps em { grid-column: 2; display: block; margin-top: 0.25em; font: 400 clamp(15px, 1.05vw, 19px)/1.5 var(--times); font-style: normal; color: rgba(232, 232, 232, 0.55); }

.svc-pause__line, .svc-end__title { font-family: var(--times); }
.nj-shared-svc-link { font-family: var(--sans); }

/* Slower, softer arrivals */
.nj-shared-svc-in { transform: translateY(18px); transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1.8s cubic-bezier(0.165, 0.84, 0.44, 1); }

@media (max-width: 900px) {
  .nj-shared-tb { display: block; padding: 11vh var(--gutter); min-height: 0; }
  .nj-shared-tb--open { min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 12vh; }
  .nj-shared-tb__lists { grid-template-columns: 1fr; }
}

/* Fireflies float above the shader scene */
.nj-shared-svc-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nj-shared-svc-water { z-index: 1; }

/* Section headings on service pages (WordPress, WooCommerce, Shopify) */
.nj-shared-tb__head { margin-bottom: 0.6em; font: 400 clamp(30px, 2.6vw, 50px)/1.1 var(--times); letter-spacing: -0.005em; }

/* Footer at the end of the service page, above the scene */
.nj-shared-footer--svc { position: relative; z-index: 3; margin: 0 var(--gutter); padding-top: 60px; color: #ecebe8; border-top-color: rgba(236, 235, 232, 0.4); }
.nj-shared-footer--svc .nj-shared-footer__row, .nj-shared-footer--svc .nj-shared-footer__note, .nj-shared-footer--svc h2 { color: rgba(236, 235, 232, 0.75); }
.nj-shared-footer--svc .nj-shared-pill { color: #ecebe8; border-color: rgba(236, 235, 232, 0.4); }
.nj-shared-footer--svc .nj-shared-pill--solid { background: #ecebe8; color: #111; }

/* Short service lists: a name with one line under it */
.nj-shared-tb__items { list-style: none; margin-top: 1.6em; }
.nj-shared-tb__items li { padding: 0.95em 0; border-top: 1px solid rgba(232, 232, 232, 0.14); }
.nj-shared-tb__items li:last-child { border-bottom: 1px solid rgba(232, 232, 232, 0.14); }
.nj-shared-tb__items b { display: block; font: 400 clamp(20px, 1.6vw, 30px)/1.2 var(--times); }
.nj-shared-tb__items span { display: block; margin-top: 0.35em; font: 400 clamp(15px, 1.05vw, 19px)/1.5 var(--times); color: rgba(232, 232, 232, 0.58); }

/* Quick contact: appears in an empty patch of the black when scrolling stops, never over the text */
.nj-shared-qcta { position: fixed; left: 0; top: 0; z-index: 60; width: 300px; padding: 0;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.nj-shared-qcta.nj-shared-is-on { opacity: 1; transform: none; pointer-events: auto; }
.nj-shared-qcta__text { display: block; }
.nj-shared-qcta__kicker { display: block; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 232, 232, 0.62); }
.nj-shared-qcta__line { display: block; margin-top: 12px; font: 400 clamp(24px, 1.9vw, 32px)/1.15 var(--times); color: #e8e8e8; }
.nj-shared-qcta__line em { font-style: italic; }
.nj-shared-qcta__btns { display: flex; gap: 10px; margin-top: 20px; }
.nj-shared-qcta__btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border: 1px solid rgba(232, 232, 232, 0.32); border-radius: 999px;
  color: #e8e8e8; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
.nj-shared-qcta__btn svg { width: 15px; height: 15px; flex: none; }
.nj-shared-qcta__btn:hover, .nj-shared-qcta__btn:focus-visible { background: #e8e8e8; color: #0a0a0a; border-color: #e8e8e8; }
.nj-shared-qcta__close { position: absolute; top: -6px; right: 0; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: rgba(232, 232, 232, 0.45); font: 400 18px/1 var(--sans); cursor: pointer; }
.nj-shared-qcta__close:hover { color: #e8e8e8; }
@media (max-width: 700px) {
  .nj-shared-qcta { width: auto; }
  .nj-shared-qcta__btn { flex: 1; justify-content: center; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .nj-shared-qcta { transition: opacity 0.3s ease; transform: none; } }

/* Contact page */
.tb__items--links a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s ease; }
.tb__items--links a:hover { background-size: 100% 1px; }
.nj-shared-tb__col--form { grid-column: 8 / span 4; }
.nj-contact-enq { margin-top: 1.6em; display: grid; gap: 4px; }
.nj-contact-enq__field { display: block; padding: 14px 0 10px; border-bottom: 1px solid rgba(232, 232, 232, 0.2); transition: border-color 0.4s ease; }
.nj-contact-enq__field:focus-within { border-color: rgba(232, 232, 232, 0.7); }
.nj-contact-enq__field span { display: block; font: 500 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 232, 232, 0.55); }
.nj-contact-enq__field input, .nj-contact-enq__field select, .nj-contact-enq__field textarea { display: block; width: 100%; margin-top: 10px; padding: 0; border: 0; background: none; color: #e8e8e8; font: 400 clamp(18px, 1.35vw, 23px)/1.35 var(--times); outline: none; border-radius: 0; resize: vertical; }
.nj-contact-enq__field select { appearance: none; -webkit-appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8e8e8' stroke-opacity='.6' stroke-width='1.2'/%3E%3C/svg%3E") right 2px center no-repeat; padding-right: 22px; }
.nj-contact-enq__field select option { background: #0b0b0b; color: #e8e8e8; }
.nj-contact-enq__field input::placeholder { color: rgba(232, 232, 232, 0.3); }
.nj-contact-enq__field.nj-shared-is-bad { border-color: rgba(230, 120, 100, 0.8); }
.nj-contact-enq__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.nj-contact-enq__actions .nj-shared-qcta__btn { cursor: pointer; background: none; }
.nj-contact-enq__send { background: #e8e8e8 !important; color: #0a0a0a !important; border-color: #e8e8e8 !important; }
.nj-contact-enq__send:hover { background: transparent !important; color: #e8e8e8 !important; }
.nj-contact-enq__error { margin-top: 14px; font: 400 14px/1.5 var(--sans); color: rgba(240, 150, 130, 0.95); }
.nj-contact-enq__done { margin-top: 16px; font: 400 clamp(17px, 1.2vw, 21px)/1.45 var(--times); color: rgba(232, 232, 232, 0.8); }
.insta { display: inline-flex; align-items: center; gap: 0.35em; margin: 0.4em 0 0.5em; color: #e8e8e8; text-decoration: none; font: 400 clamp(40px, 4.2vw, 76px)/1 var(--times); letter-spacing: -0.01em; transition: opacity 0.4s ease; }
.insta svg { width: 0.62em; height: 0.62em; flex: none; }
.insta:hover { opacity: 0.7; }
@media (max-width: 900px) { .nj-shared-tb__col--form { grid-column: 1 / -1; } }
.nj-shared-tb--open .nj-shared-tb__col--side { grid-column: 9 / span 3; align-self: end; padding-right: var(--gutter); }
.nj-shared-tb__col--side .nj-shared-tb__text { font-size: clamp(19px, 1.45vw, 26px); }
.nj-shared-tb__col--side a { color: inherit; text-decoration: none; }
.nj-shared-tb__col--side a:hover { opacity: 0.7; }
@media (max-width: 900px) { .nj-shared-tb--open .nj-shared-tb__col--side { display: none; } }

/* Not found page */
.nj-404-svc-404 .lost { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 130px var(--gutter) 90px; }
.lost__code { font: 400 clamp(110px, 17vw, 260px)/0.85 var(--times); color: #e8e8e8; letter-spacing: -0.02em; text-shadow: 0 0 60px rgba(255, 255, 255, 0.18); }
.lost__title { margin-top: 0.5em; font: 400 clamp(30px, 3vw, 54px)/1.12 var(--times); color: #e8e8e8; }
.lost__title em { font-style: italic; }
.lost__text { max-width: 30em; margin-top: 1em; font: 400 clamp(18px, 1.35vw, 23px)/1.45 var(--times); color: rgba(232, 232, 232, 0.6); }
.lost__actions { margin-top: 2.2em; justify-content: center; }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 3.2em; padding-top: 1.6em; border-top: 1px solid rgba(232, 232, 232, 0.14); }
.lost__links a { font: 400 clamp(17px, 1.2vw, 21px)/1.3 var(--times); color: rgba(232, 232, 232, 0.75); text-decoration: none; transition: color 0.3s ease; }
.lost__links a:hover { color: #fff; }

/* 404: the lion on the rocks by the water. The stage keeps the picture's shape and covers the section, so the head, mouth and
   shards stay in place at every screen size. One roar every 8 s; .is-roaring is added by lion-roar.js. */
.nj-404-svc-404 .nj-404-l4 { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: 1fr auto; padding: 120px var(--gutter) 40px; }
.nj-404-l4__stage { position: absolute; top: 50%; right: 0; width: max(100%, calc(100vh * 2.108)); aspect-ratio: 1600 / 759; transform: translateY(-50%); }
.nj-404-l4__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The head: the same picture, masked to the head, nudged up as it roars */
.nj-404-l4__head { position: absolute; inset: 0; background: url("images/lion-404.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask: radial-gradient(10% 19% at 64.5% 22%, #000 55%, transparent 100%); mask: radial-gradient(10% 19% at 64.5% 22%, #000 55%, transparent 100%);
  transform-origin: 67% 40%; }
.nj-404-l4.nj-404-is-roaring .nj-404-l4__head { animation: l4Head 2.4s cubic-bezier(.3, .7, .3, 1); }
.nj-404-l4__bg { transform-origin: 70% 80%; animation: l4Breathe 4.2s ease-in-out infinite; }
.l4__wave { position: absolute; left: 61.5%; top: 27%; width: 4%; aspect-ratio: 1; margin: -2% 0 0 -2%; border-radius: 50%;
  border: 2px solid rgba(255, 228, 180, 0.7); box-shadow: 0 0 24px rgba(255, 210, 140, 0.35); opacity: 0; pointer-events: none; }
.nj-404-l4.nj-404-is-roaring .l4__wave { animation: l4Wave 1.9s cubic-bezier(.15, .6, .35, 1) forwards; }
.nj-404-l4.nj-404-is-roaring .l4__wave:nth-of-type(2) { animation-delay: 0.22s; }
.nj-404-l4.nj-404-is-roaring .l4__wave:nth-of-type(3) { animation-delay: 0.44s; }
.l4__shard { position: absolute; left: var(--x); top: var(--y); width: calc(34px * var(--s)); aspect-ratio: 1.1; transform: translate(-50%, -50%);
  background: linear-gradient(140deg, #4a4642, #1b1918 55%, #0b0a0a); clip-path: polygon(18% 0, 82% 8%, 100% 52%, 70% 100%, 12% 86%, 0 38%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7)); animation: l4Float 9s ease-in-out infinite; animation-delay: var(--d); opacity: 0.9; }
.nj-404-l4.nj-404-is-roaring .l4__shard { animation: l4Float 9s ease-in-out infinite, l4Jolt 0.9s ease-out; animation-delay: var(--d), 0.15s; }
.nj-404-l4__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 32%, rgba(0,0,0,0) 58%), linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0) 30%); pointer-events: none; }
.nj-404-l4__copy { position: relative; align-self: center; max-width: 560px; padding-left: 4vw; }
.nj-404-l4__code-wrap { position: relative; width: fit-content; }
.nj-404-l4__code { position: relative; font: 400 clamp(110px, 15vw, 230px)/0.85 var(--times); letter-spacing: -0.02em; color: #f4f2ee;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.28), 0 0 80px rgba(255, 255, 255, 0.1), 0 18px 34px rgba(0, 0, 0, 0.85); }
.nj-404-l4.nj-404-is-roaring .nj-404-l4__code { animation: l4Shake 0.9s cubic-bezier(.36, .07, .19, .97) 0.15s; }
.l4__ring { position: absolute; left: 50%; top: 46%; width: 125%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12); pointer-events: none; }
.l4__ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, 0.9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: l4Spin 9s linear infinite; }
.nj-404-l4__title { margin-top: 0.55em; font: 400 clamp(30px, 2.9vw, 50px)/1.12 var(--times); color: #ecebe8; }
.nj-404-l4__title em { font-style: italic; }
.nj-404-l4__text { margin-top: 0.8em; font: 400 clamp(17px, 1.25vw, 21px)/1.5 var(--times); color: rgba(232, 232, 232, 0.62); }
.nj-404-l4__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 2em; }
.nj-404-l4__sound { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border: 1px solid rgba(232, 232, 232, 0.3); border-radius: 999px;
  color: #e8e8e8; font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.35s, color 0.35s, border-color 0.35s; }
.nj-404-l4__sound svg { width: 17px; height: 17px; }
.nj-404-l4__sound .l4__sw { opacity: 0.35; transition: opacity 0.3s; }
.nj-404-l4__sound[aria-pressed="true"] .l4__sw { opacity: 1; }
.nj-404-l4__sound:hover, .nj-404-l4__sound:focus-visible { background: #e8e8e8; color: #0a0a0a; border-color: #e8e8e8; }
.nj-404-l4.nj-404-is-roaring .nj-404-l4__sound[aria-pressed="true"] { box-shadow: 0 0 0 6px rgba(255, 220, 160, 0.12); }
@keyframes l4Breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.004); } }
@keyframes l4Head { 0% { transform: none; } 18% { transform: translate(-0.3%, -1.1%) rotate(-1.6deg) scale(1.012); } 70% { transform: translate(-0.2%, -0.9%) rotate(-1.2deg) scale(1.01); } 100% { transform: none; } }
@keyframes l4Wave { 0% { opacity: 0; transform: scale(0.5); } 12% { opacity: 0.85; } 100% { opacity: 0; transform: scale(14); } }
@keyframes l4Float { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, calc(-50% - 14px)) rotate(12deg); } }
@keyframes l4Jolt { 0% { translate: 0 0; } 30% { translate: -10px -6px; } 100% { translate: 0 0; } }
@keyframes l4Shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@keyframes l4Spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .nj-404-svc-404 .nj-404-l4 { padding-top: 96px; }
  /* the lion's head centred near the top of the screen */
  .nj-404-l4__stage { right: auto; left: 50%; top: 0; transform: translateX(-66%); width: calc(100vh * 1.7); }
  .nj-404-l4__shade { background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.2) 75%); }
  .nj-404-l4__copy { align-self: end; padding: 38vh 0 28px; }
}
@media (prefers-reduced-motion: reduce) { .nj-404-l4 *, .l4__ring::after { animation: none !important; } }
/* The roar button is this page's sound: the site's ambient switch is not shown here */
/* 404: the lion's own sound button is the page's switch, so the bottom one stays hidden (no duplicate).
   The cursor note still shows: a click anywhere turns the roar sound on, the lion's button turns it off. */
.nj-404-svc-404 .nj-shared-sound-switch { display: none; }
/* The 3D lion (lion-roar.js) sits over the flat picture; when it runs, the flat head effect is not needed */
.nj-404-l4__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nj-404-l4.nj-404-has-3d .nj-404-l4__head { display: none; }
.nj-404-l4.nj-404-has-3d .nj-404-l4__bg { animation: none; }

/* 404 v3: no rings; dark scene lit by the pointer; sound toggle with live bars */
.l4__wave, .l4__ring { display: none; }
.nj-404-l4__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nj-404-l4:not(.nj-404-has-3d) .nj-404-l4__bg { filter: brightness(0.6); transition: filter 0.6s ease; }
.nj-404-l4:not(.nj-404-has-3d):hover .nj-404-l4__bg, .nj-404-l4:not(.nj-404-has-3d).nj-404-is-roaring .nj-404-l4__bg { filter: brightness(1); }
.nj-404-l4.nj-404-is-over-lion { cursor: pointer; }
.nj-404-l4__hint { margin-top: 1.2em; font: 500 11px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232, 232, 232, 0.42); }
.nj-404-l4__sound { gap: 12px; padding: 0 18px 0 16px; height: 42px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(6px); }
.nj-404-l4__sound[aria-pressed="true"] { border-color: rgba(255, 214, 150, 0.6); color: #ffe7c2; background: rgba(255, 200, 120, 0.08); }
.nj-404-l4__sound[aria-pressed="true"]:hover { background: #ffe7c2; color: #1a120a; }
.nj-404-l4__eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.nj-404-l4__eq i { flex: 1; height: 3px; border-radius: 1px; background: currentColor; transition: height 0.3s; }
.nj-404-l4__sound[aria-pressed="true"] .nj-404-l4__eq i { animation: l4Eq 0.9s ease-in-out infinite; }
.nj-404-l4__sound[aria-pressed="true"] .nj-404-l4__eq i:nth-child(2) { animation-delay: -0.3s; }
.nj-404-l4__sound[aria-pressed="true"] .nj-404-l4__eq i:nth-child(3) { animation-delay: -0.6s; }
.nj-404-l4__sound[aria-pressed="true"] .nj-404-l4__eq i:nth-child(4) { animation-delay: -0.15s; }
.nj-404-l4.nj-404-is-roaring .nj-404-l4__sound[aria-pressed="true"] .nj-404-l4__eq i { animation-duration: 0.35s; }
/* sound is wanted but the browser has not allowed it yet: the button asks for one tap, nothing pretends to play */
.nj-404-l4__sound.nj-404-is-blocked { border-color: rgba(255, 214, 150, 0.6); color: #ffe7c2; animation: l4Ask 1.8s ease-in-out infinite; }
.nj-404-l4__sound.nj-404-is-blocked .nj-404-l4__eq i { animation: none; height: 3px; }
@keyframes l4Ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 150, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(255, 214, 150, 0); } }
@keyframes l4Eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }

/* Contact: office hours beside the form */
.nj-shared-tb--pair { align-items: start; }
.nj-shared-tb--pair .nj-shared-tb__col--hours { grid-column: 2 / span 4; position: sticky; top: 18vh; }
.nj-shared-tb--pair .nj-shared-tb__col--form { grid-column: 7 / span 5; }
@media (max-width: 900px) { .nj-shared-tb--pair .nj-shared-tb__col--hours { position: static; margin-bottom: 9vh; } }

/* Branding work: each project sits in the empty column beside its section.
   Enters with a curtain reveal and a slow zoom-out, drifts with the scroll, tilts toward the pointer, opens in a lightbox. */
.nj-shared-tb--withmedia { align-items: center; }
.nj-shared-tb__col--media { align-self: center; }
.nj-branding-bw { position: relative; margin: 0; cursor: pointer; outline: none; }
.nj-branding-bw__frame { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5; background: #111;
  clip-path: inset(100% 0 0 0 round 14px); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1), transform 0.5s cubic-bezier(.22, 1, .36, 1), box-shadow 0.5s;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9); transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.nj-branding-bw.nj-shared-is-in .nj-branding-bw__frame { clip-path: inset(0 0 0 0 round 14px); }
.nj-branding-bw__px { position: absolute; inset: -8% 0; will-change: transform; }
.nj-branding-bw img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.3); transition: transform 1.8s cubic-bezier(.22, 1, .36, 1), filter 0.5s; filter: saturate(0.85) brightness(0.9); }
.nj-branding-bw.nj-shared-is-in img { transform: scale(1.06); }
.nj-branding-bw:hover img, .nj-branding-bw:focus-visible img { transform: scale(1.12); filter: saturate(1) brightness(1); }
.nj-branding-bw:hover .nj-branding-bw__frame, .nj-branding-bw:focus-visible .nj-branding-bw__frame { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.14); }
/* a soft sheen that follows the pointer */
.nj-branding-bw__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(40% 35% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.16), transparent 70%); }
.nj-branding-bw:hover .nj-branding-bw__frame::after { opacity: 1; }
.nj-branding-bw figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(232, 232, 232, 0);
  opacity: 0; transform: translateY(14px); transition: opacity 0.8s 0.5s, transform 0.8s 0.5s cubic-bezier(.22, 1, .36, 1), border-color 0.6s; }
.nj-branding-bw.nj-shared-is-in figcaption { opacity: 1; transform: none; border-top-color: rgba(232, 232, 232, 0.16); }
.nj-branding-bw figcaption b { font: 400 clamp(19px, 1.45vw, 25px)/1.2 var(--times); color: #ecebe8; }
.nj-branding-bw figcaption span { font: 500 11px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 232, 232, 0.55); text-align: right; }
@media (max-width: 900px) { .nj-shared-tb__col--media { margin-top: 7vh; } .nj-branding-bw__frame { aspect-ratio: 4 / 4.6; } }
@media (prefers-reduced-motion: reduce) { .nj-branding-bw__frame, .nj-branding-bw img, .nj-branding-bw figcaption { transition: none; } .nj-branding-bw__frame { clip-path: none; } .nj-branding-bw img { transform: scale(1.04); } .nj-branding-bw figcaption { opacity: 1; transform: none; } }

/* Lightbox */
.nj-shared-bwl { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(4, 4, 4, 0); backdrop-filter: blur(0); pointer-events: none;
  transition: background 0.5s, backdrop-filter 0.5s; }
.nj-shared-bwl.nj-shared-is-open { background: rgba(4, 4, 4, 0.9); backdrop-filter: blur(10px); pointer-events: auto; }
.nj-shared-bwl__img { max-width: min(86vw, 1100px); max-height: 74vh; margin-top: -5vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
  transform-origin: 0 0; transition: transform 0.65s cubic-bezier(.22, 1, .36, 1), opacity 0.4s; }
.nj-shared-bwl__cap { position: absolute; left: 50%; bottom: 3.2vh; transform: translateX(-50%); text-align: center; color: #ecebe8; opacity: 0; transition: opacity 0.5s 0.25s; }
.nj-shared-bwl.nj-shared-is-open .nj-shared-bwl__cap { opacity: 1; }
.nj-shared-bwl__cap b { display: block; font: 400 22px/1.2 var(--times); }
.nj-shared-bwl__cap span { font: 500 11px/1.6 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232, 232, 232, 0.6); }
.nj-shared-bwl button { position: absolute; width: 48px; height: 48px; border: 1px solid rgba(232, 232, 232, 0.28); border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #ecebe8;
  font: 400 20px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity 0.4s 0.2s, background 0.3s, color 0.3s; }
.nj-shared-bwl.nj-shared-is-open button { opacity: 1; }
.nj-shared-bwl button:hover { background: #ecebe8; color: #0a0a0a; }
.nj-shared-bwl__close { top: 24px; right: 24px; }
.nj-shared-bwl__prev { left: 24px; top: 50%; margin-top: -24px; }
.nj-shared-bwl__next { right: 24px; top: 50%; margin-top: -24px; }

/* Contact: the brief as a real form card */
.nj-shared-tb__col--form .nj-contact-enq { margin-top: 1.4em; padding: clamp(22px, 2.4vw, 36px); border: 1px solid rgba(232, 232, 232, 0.16); border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.nj-shared-tb__col--form .nj-contact-enq__field { padding: 0; border: 0; }
.nj-shared-tb__col--form .nj-contact-enq__field span { margin-bottom: 8px; }
.nj-shared-tb__col--form .nj-contact-enq__field input, .nj-shared-tb__col--form .nj-contact-enq__field select, .nj-shared-tb__col--form .nj-contact-enq__field textarea {
  margin-top: 0; padding: 13px 14px; border: 1px solid rgba(232, 232, 232, 0.16); border-radius: 10px; background: rgba(0, 0, 0, 0.35);
  font-size: clamp(16px, 1.1vw, 19px); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.nj-shared-tb__col--form .nj-contact-enq__field select { padding-right: 36px; background-position: right 14px center; }
.nj-shared-tb__col--form .nj-contact-enq__field input:hover, .nj-shared-tb__col--form .nj-contact-enq__field select:hover, .nj-shared-tb__col--form .nj-contact-enq__field textarea:hover { border-color: rgba(232, 232, 232, 0.3); }
.nj-shared-tb__col--form .nj-contact-enq__field input:focus, .nj-shared-tb__col--form .nj-contact-enq__field select:focus, .nj-shared-tb__col--form .nj-contact-enq__field textarea:focus {
  border-color: rgba(232, 232, 232, 0.7); background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 4px rgba(232, 232, 232, 0.08); }
.nj-shared-tb__col--form .nj-contact-enq__field.nj-shared-is-bad input, .nj-shared-tb__col--form .nj-contact-enq__field.nj-shared-is-bad select, .nj-shared-tb__col--form .nj-contact-enq__field.nj-shared-is-bad textarea { border-color: rgba(230, 120, 100, 0.85); }
.nj-shared-tb__col--form .nj-contact-enq__field--area, .nj-shared-tb__col--form .nj-contact-enq__error, .nj-shared-tb__col--form .nj-contact-enq__actions, .nj-shared-tb__col--form .nj-contact-enq__done { grid-column: 1 / -1; }
.nj-shared-tb__col--form .nj-contact-enq__actions { margin-top: 6px; }
.nj-shared-tb__col--form .nj-contact-enq__actions .nj-shared-qcta__btn { height: 48px; padding: 0 24px; }
@media (max-width: 700px) { .nj-shared-tb__col--form .nj-contact-enq { grid-template-columns: 1fr; } }

/* Contact: questions beside Instagram */
.nj-shared-tb--faq .nj-shared-tb__col--faq { grid-column: 2 / span 5; position: static; }
.nj-shared-tb--faq .nj-shared-tb__col--insta { grid-column: 8 / span 4; position: sticky; top: 16vh; }
.nj-contact-igcard { display: block; padding: 18px; border: 1px solid rgba(232, 232, 232, 0.16); border-radius: 20px; color: #ecebe8; text-decoration: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.5s cubic-bezier(.22, 1, .36, 1), border-color 0.4s, box-shadow 0.5s; }
.nj-contact-igcard:hover { transform: translateY(-6px); border-color: rgba(232, 232, 232, 0.32); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95); }
.nj-contact-igcard__top { display: flex; align-items: center; gap: 12px; }
.nj-contact-igcard__avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #0c0c0c;
  box-shadow: 0 0 0 2px #0c0c0c, 0 0 0 3.5px transparent; background-image: linear-gradient(#0c0c0c, #0c0c0c), conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34);
  background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; }
.nj-contact-igcard__avatar img { width: 30px; height: auto; }
.nj-contact-igcard__who { flex: 1; display: flex; flex-direction: column; }
.nj-contact-igcard__who b { font: 500 15px/1.2 var(--sans); }
.nj-contact-igcard__who small { font: 400 12px/1.4 var(--sans); color: rgba(232, 232, 232, 0.55); }
.nj-contact-igcard__follow { padding: 8px 16px; border-radius: 999px; background: #ecebe8; color: #0a0a0a; font: 600 12px/1 var(--sans); letter-spacing: 0.04em; transition: background 0.3s; }
.nj-contact-igcard:hover .nj-contact-igcard__follow { background: #fff; }
.nj-contact-igcard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 16px 0 14px; border-radius: 12px; overflow: hidden; }
.nj-contact-igcard__grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(.22, 1, .36, 1), filter 0.4s; filter: saturate(0.85); }
.nj-contact-igcard:hover .nj-contact-igcard__grid img { transform: scale(1.06); filter: saturate(1); }
.nj-contact-igcard__text { display: block; font: 400 clamp(16px, 1.15vw, 19px)/1.45 var(--times); color: rgba(232, 232, 232, 0.7); }
@media (max-width: 900px) { .nj-shared-tb--faq .nj-shared-tb__col--insta { position: static; margin-top: 8vh; } }

/* Page effects canvas (colour bursts, neural mesh, hex shield) over the scene */
.nj-shared-svc-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* AI & Automation: the octopus and its tentacles behind the content while it scrolls (drawn by service.js) */
.nj-shared-svc-pull { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.nj-shared-svc .nj-shared-tb__col { will-change: auto; }

/* Mobile: one phone that morphs between iPhone (round corners, notch, home bar) and Android (squarer, punch-hole, nav buttons) */
.nj-mobileapp-morph { width: min(280px, 70vw); margin: 0 auto; --k: 0; }
.nj-mobileapp-morph__phone { position: relative; aspect-ratio: 9 / 19.2; border-radius: calc(46px - 26px * var(--k)); padding: 10px; background: linear-gradient(150deg, #2b2b2e, #0d0d0f);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 2px #050505; }
.nj-mobileapp-morph__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(37px - 25px * var(--k));
  background: linear-gradient(180deg, color-mix(in srgb, #f3eadf calc(100% - var(--k) * 100%), #e6efe9), #ffffff); }
.nj-mobileapp-morph__notch { position: absolute; z-index: 2; left: 50%; top: 18px; width: 34%; height: 24px; transform: translateX(-50%); border-radius: 14px; background: #050505; opacity: calc(1 - var(--k)); }
.nj-mobileapp-morph__punch { position: absolute; z-index: 2; left: 50%; top: 20px; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: #050505; opacity: var(--k); }
.nj-mobileapp-morph__bar { display: flex; justify-content: space-between; padding: 14px 22px 0; font: 600 11px/1 var(--sans); color: #1a1a1a; }
.nj-mobileapp-morph__bar i { width: 18px; height: 9px; border: 1.5px solid #1a1a1a; border-radius: 3px; }
.nj-mobileapp-morph__app { padding: 34px 16px 0; display: grid; gap: 10px; }
.nj-mobileapp-morph__hero { height: 34%; aspect-ratio: 1.6; width: 100%; border-radius: calc(18px - 10px * var(--k));
  background: linear-gradient(135deg, #d97a3a, #f2b46a); box-shadow: 0 10px 20px -10px rgba(217, 122, 58, 0.7); }
.nj-mobileapp-morph__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nj-mobileapp-morph__row span { aspect-ratio: 1; border-radius: calc(14px - 10px * var(--k) + 50% * var(--k)); background: #ece4d8; }
.nj-mobileapp-morph__card { height: 44px; border-radius: calc(14px - 8px * var(--k)); background: #f1ebe2; }
.nj-mobileapp-morph__card--short { width: 70%; }
.nj-mobileapp-morph__nav { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 26px; }
.nj-mobileapp-morph__nav span { height: 5px; width: 5px; border-radius: 50%; background: #1a1a1a; opacity: calc(0.6 * var(--k)); }
.nj-mobileapp-morph__nav span:first-child { width: calc(110px - 105px * var(--k)); border-radius: 4px; opacity: 0.85; }
.nj-mobileapp-morph__label { position: relative; margin-top: 18px; height: 1.2em; text-align: center; font: 500 12px/1.2 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(232, 232, 232, 0.7); }
.nj-mobileapp-morph__label span { position: absolute; left: 0; right: 0; transition: opacity 0.3s; }
.nj-mobileapp-morph__ios { opacity: calc(1 - var(--k)); } .nj-mobileapp-morph__and { opacity: var(--k); }

/* UI/UX: the elephant sketch draws itself with the scroll */
.sketch { margin: 0; padding: 18px; border: 1px solid rgba(232, 232, 232, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.02); }
.sketch svg { display: block; width: 100%; height: auto; overflow: visible; }
.sketch__line { fill: none; stroke: #ecebe8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)); }
.sketch__pen { fill: #ffd28a; filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.9)); }
.sketch figcaption { display: flex; justify-content: space-between; margin-top: 12px; font: 500 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232, 232, 232, 0.55); }

/* UI/UX: switch between the two design options */