/* Nectar Dessert — component styles. Everything reads tokens.css; no literal colours. */
:root {
  --nx-fs-2xl: clamp(76px, 13.9vw, 200px);
  --nx-fs-xl: clamp(54px, 10.55vw, 152px);
  --nx-fs-l: clamp(42px, 7.22vw, 104px);
  --nx-fs-m: clamp(32px, 5vw, 72px);
  --nx-fs-s: clamp(27px, 3.6vw, 52px);
  --nx-gutter: clamp(20px, 2.8vw, 40px);
  --nx-section: clamp(96px, 11.1vw, 160px);
}
[class^="nx-"], [class*=" nx-"], [class^="nx-"]::before, [class*=" nx-"]::before, [class^="nx-"]::after, [class*=" nx-"]::after { box-sizing: border-box; }
.nx-root { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:where(.nx-root) a { color: inherit; }
.nx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.nx-btn, .nx-link, .nx-menu-toggle, .nx-nav__link, .nx-acc__q, .nx-chip, .nx-field__input, .nx-card, .nx-footer__link):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Logo ---------- */
.nx-logo { display: block; overflow: visible; flex: none; }

/* ---------- Button ---------- */
.nx-btn {
  --h: 52px; --pad: 26px;
  --nx-bg: var(--action); --nx-fg: var(--on-action); --nx-fill: var(--brand); --nx-fg-h: var(--on-brand); --nx-disc: var(--on-action); --nx-disc-fg: var(--action); --nx-bd: transparent;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px;
  height: var(--h); padding: 0 var(--pad); border-radius: var(--radius-pill);
  background: var(--nx-bg); color: var(--nx-fg); border: 1px solid var(--nx-bd);
  font: 500 15px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--dur-base) var(--ease-out) 60ms, box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.nx-btn--sm { --h: 40px; --pad: 18px; font-size: 14px; gap: 10px; }
.nx-btn--lg { --h: 64px; --pad: 32px; font-size: 17px; gap: 18px; }
.nx-btn--arrow { padding-right: 6px; }
.nx-btn--sm.nx-btn--arrow { padding-right: 5px; }
.nx-btn--lg.nx-btn--arrow { padding-right: 8px; }
.nx-btn--secondary { --nx-bg: transparent; --nx-fg: var(--ink); --nx-fill: var(--ink); --nx-fg-h: var(--surface); --nx-disc: var(--ink); --nx-disc-fg: var(--surface); --nx-bd: var(--line-strong); }
.nx-btn--brand { --nx-bg: var(--brand); --nx-fg: var(--on-brand); --nx-fill: var(--ink); --nx-fg-h: var(--surface); --nx-disc: var(--ink); --nx-disc-fg: var(--surface); }
.nx-btn--glass { --nx-bg: var(--glass); --nx-fg: var(--ink); --nx-fill: var(--ink); --nx-fg-h: var(--surface); --nx-disc: var(--ink); --nx-disc-fg: var(--surface); --nx-bd: var(--glass-line); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); box-shadow: var(--shadow-glass); }
.nx-btn__fill { position: absolute; z-index: -1; left: var(--fx, 50%); top: var(--fy, 50%); width: max(300%, 200px); aspect-ratio: 1; border-radius: 50%; background: var(--nx-fill); transform: translate(-50%, -50%) scale(0); transition: transform var(--dur-slow) var(--ease-expo); pointer-events: none; }
.nx-btn__label { position: relative; display: block; overflow: hidden; height: 1.25em; line-height: 1.25; padding-bottom: 0; }
.nx-btn__t { display: block; transition: transform var(--dur-slow) var(--ease-expo); }
.nx-btn__t--b { position: absolute; left: 0; top: 100%; }
.nx-btn__disc { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; width: calc(var(--h) - 12px); aspect-ratio: 1; border-radius: 50%; background: var(--nx-disc); color: var(--nx-disc-fg); font-size: 18px; transition: transform var(--dur-slow) var(--ease-spring); }
.nx-btn--sm .nx-btn__disc { width: calc(var(--h) - 10px); font-size: 16px; }
.nx-btn--lg .nx-btn__disc { width: calc(var(--h) - 16px); font-size: 22px; }
.nx-btn__ar { position: absolute; inset: 0; display: grid; place-items: center; transition: transform var(--dur-slow) var(--ease-expo); }
.nx-btn__ar--b { transform: translate(calc(var(--ax) * -160%), calc(var(--ay) * -160%)); }
@media (hover: hover) {
  .nx-btn:hover { color: var(--nx-fg-h); }
  .nx-btn:hover .nx-btn__fill { transform: translate(-50%, -50%) scale(1); }
  .nx-btn:hover .nx-btn__t { transform: translateY(-100%); }
  .nx-btn:hover .nx-btn__ar:not(.nx-btn__ar--b) { transform: translate(calc(var(--ax) * 160%), calc(var(--ay) * 160%)); }
  .nx-btn:hover .nx-btn__ar--b { transform: none; }
  .nx-btn:hover .nx-btn__disc { transform: scale(0.92); }
}
.nx-btn:active .nx-btn__disc { transform: scale(0.86); }
.nx-btn:focus-visible { color: var(--nx-fg-h); }
.nx-btn:focus-visible .nx-btn__fill { transform: translate(-50%, -50%) scale(1); }
.nx-btn[disabled], .nx-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Text link ---------- */
.nx-link { position: relative; display: inline-flex; align-items: center; gap: .4em; color: inherit; text-decoration: none; font-weight: 500; letter-spacing: -0.01em; padding-bottom: 3px; }
.nx-link svg { width: 1em; height: 1em; transition: transform var(--dur-slow) var(--ease-expo); }
.nx-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; }
@media (hover: hover) {
  .nx-link:hover::after { animation: nx-ul 0.7s var(--ease-out); }
  .nx-link:hover svg { transform: translate(2px, -2px); }
}
@keyframes nx-ul { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 55% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ---------- Menu toggle ---------- */
.nx-menu-toggle { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 14px/1 var(--font-sans); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.nx-menu-toggle__label { position: relative; display: block; height: 1.25em; overflow: hidden; line-height: 1.25; }
.nx-menu-toggle__t { display: block; transition: transform var(--dur-slow) var(--ease-expo); }
.nx-menu-toggle.is-open .nx-menu-toggle__t { transform: translateY(-100%); }
.nx-menu-toggle__bars { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--action); transition: transform var(--dur-slow) var(--ease-spring); }
.nx-menu-toggle__bars i { position: absolute; left: 10px; right: 10px; height: 1.5px; border-radius: 2px; background: var(--on-action); transition: transform var(--dur-slow) var(--ease-expo), top var(--dur-slow) var(--ease-expo); }
.nx-menu-toggle__bars i:nth-child(1) { top: 13px; }
.nx-menu-toggle__bars i:nth-child(2) { top: 19px; }
.nx-menu-toggle.is-open .nx-menu-toggle__bars i:nth-child(1) { top: 16px; transform: rotate(45deg); }
.nx-menu-toggle.is-open .nx-menu-toggle__bars i:nth-child(2) { top: 16px; transform: rotate(-45deg); }
@media (hover: hover) { .nx-menu-toggle:hover .nx-menu-toggle__bars { transform: scale(1.1) rotate(90deg); } }

/* ---------- Tag ---------- */
.nx-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nx-tag--outline { border: 1px solid var(--line-strong); color: var(--ink); }
.nx-tag--brand { background: var(--brand); color: var(--on-brand); }
.nx-tag--ink { background: var(--ink); color: var(--surface); }
.nx-tag--berry { background: var(--berry-500); color: var(--cream-50); }
.nx-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: nx-pulse 2s var(--ease-in-out) infinite; }
@keyframes nx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- Headline ---------- */
.nx-headline { margin: 0; color: var(--ink); font-family: var(--font-sans); font-weight: 200; line-height: .94; letter-spacing: -0.05em; text-wrap: balance; font-kerning: normal; }
.nx-headline--2xl { font-size: var(--nx-fs-2xl); line-height: .86; letter-spacing: -0.065em; }
.nx-headline--xl { font-size: var(--nx-fs-xl); line-height: .9; letter-spacing: -0.058em; }
.nx-headline--l { font-size: var(--nx-fs-l); line-height: .94; letter-spacing: -0.05em; }
.nx-headline--m { font-size: var(--nx-fs-m); line-height: 1; letter-spacing: -0.042em; }
.nx-headline--s { font-size: var(--nx-fs-s); line-height: 1.04; letter-spacing: -0.035em; font-weight: 250; }
.nx-hl { display: block; }
.nx-hw { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .08em .16em; margin: -.12em -.08em -.16em; }
.nx-hw__in { display: inline-block; transform: translate3d(0, 115%, 0) rotate(4deg); transform-origin: 0 100%; transition: transform var(--dur-reveal) var(--ease-expo); transition-delay: calc(var(--delay, 0s) + var(--i, 0) * var(--stagger, .07s)); will-change: transform; }
.nx-headline.is-in .nx-hw__in, .nx-headline.is-static .nx-hw__in { transform: none; }
.nx-hw--em .nx-hw__in { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; font-size: .99em; }
.nx-hc { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .nx-hw__in { transform: none !important; transition: none !important; } }

/* ---------- Eyebrow ---------- */
.nx-eyebrow { display: flex; align-items: center; gap: 14px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.nx-eyebrow__idx { color: var(--accent); }
.nx-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); animation: nx-pulse 2s var(--ease-in-out) infinite; }
.nx-eyebrow__rule { flex: 1; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-expo) .15s; opacity: .55; }
.nx-eyebrow.is-in .nx-eyebrow__rule { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nx-eyebrow__rule { transform: none; transition: none; } }

/* ---------- Statement ---------- */
.nx-statement { margin: 0; font-family: var(--font-sans); font-weight: 200; color: var(--ink); text-wrap: pretty; }
.nx-statement--m { font-size: var(--nx-fs-m); line-height: 1.06; letter-spacing: -0.042em; }
.nx-statement--s { font-size: var(--nx-fs-s); line-height: 1.12; letter-spacing: -0.035em; }
.nx-sw { transition: opacity 120ms linear; }
.nx-sw--em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.04em; }

/* ---------- Counter stat ---------- */
.nx-stat { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 20px; }
.nx-stat__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-expo); opacity: .6; }
.nx-stat.is-in .nx-stat__rule { transform: scaleX(1); }
.nx-stat__n { display: flex; align-items: baseline; gap: .08em; font-weight: 200; font-size: var(--nx-fs-m); line-height: 1; letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.nx-stat__fix { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -0.02em; }
.nx-stat__fix--s { font-size: .62em; }
.nx-stat__l { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); max-width: 22ch; }
.nx-stat__c { font-size: 14px; line-height: 1.5; color: var(--ink-muted); max-width: 32ch; }

/* ---------- Reveal ---------- */
.nx-reveal { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-expo) var(--delay, 0s), transform var(--dur-reveal) var(--ease-expo) var(--delay, 0s), clip-path 1.2s var(--ease-expo) var(--delay, 0s); will-change: opacity, transform; }
.nx-reveal--up { transform: translate3d(0, var(--d, 40px), 0); }
.nx-reveal--scale { transform: scale(.94); }
.nx-reveal--line { opacity: 1; transform: scaleX(0); transform-origin: left; }
.nx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nx-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Marquee ---------- */
.nx-marquee { position: relative; overflow: hidden; width: 100%; }
.nx-marquee__track { display: flex; width: max-content; will-change: transform; }
.nx-marquee__set { display: flex; flex: none; align-items: center; }
.nx-marquee__item { display: block; white-space: nowrap; }
.nx-marquee__sep { display: block; }
.nx-marquee__dot { display: block; width: .22em; height: .22em; border-radius: 50%; background: currentColor; opacity: .9; }
.nx-marquee__star { display: block; width: 14px; height: 14px; background: var(--accent-fill); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.nx-marquee--fade { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.nx-marquee.is-static { overflow-x: auto; scrollbar-width: none; }
.nx-brandword { font-family: var(--font-serif); font-style: italic; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); padding: .1em 0; }
.nx-brandlogo { display: block; height: 44px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .75; }
.nx-logomarquee { padding-block: 8px; }

/* ---------- Wave divider ---------- */
.nx-wave { width: 100%; color: var(--ink); }
.nx-wave svg { display: block; width: 100%; height: auto; overflow: visible; }
.nx-wave path { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: calc(1 - var(--i) * .22); transition: stroke-dashoffset 2.2s var(--ease-expo); transition-delay: calc(var(--i) * .18s); }
.nx-wave.is-in path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .nx-wave path { stroke-dashoffset: 0; transition: none; } }

/* ---------- Image ---------- */
.nx-img { position: relative; margin: 0; }
.nx-img__frame { position: relative; overflow: hidden; border-radius: var(--r, var(--radius-lg)); aspect-ratio: var(--ratio, 4 / 5); background: var(--surface-sunken); isolation: isolate; }
.nx-img__zoom, .nx-img__par { position: absolute; inset: 0; }
.nx-img__zoom { transform: scale(var(--zoom, 1.14)); transition: transform 1.8s var(--ease-expo); }
.nx-img__par { will-change: transform; }
.nx-img__par img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nx-img--clip .nx-img__frame { clip-path: inset(0 0 100% 0 round var(--r, var(--radius-lg))); transition: clip-path 1.3s var(--ease-expo); }
.nx-img--clip.is-in .nx-img__frame { clip-path: inset(0 0 0 0 round var(--r, var(--radius-lg))); }
.nx-img--clip .nx-img__zoom { transform: scale(calc(var(--zoom, 1.14) + .22)); }
.nx-img--clip.is-in .nx-img__zoom { transform: scale(var(--zoom, 1.14)); }
.nx-img--fade .nx-img__frame { opacity: 0; transition: opacity 1.2s var(--ease-expo); }
.nx-img--fade.is-in .nx-img__frame { opacity: 1; }
.nx-img--clip .nx-img__frame, .nx-img--fade .nx-img__frame, .nx-img__zoom { transition-delay: var(--d, 0s); }
/* float: rises in, then sways on its own clock (not tied to scroll) while the photo slowly pans */
.nx-img--float { opacity: 0; transform: translate3d(0, 56px, 0); transition: opacity var(--dur-reveal) var(--ease-expo) var(--d, 0s), transform 1.2s var(--ease-expo) var(--d, 0s); }
.nx-img--float.is-in { opacity: 1; transform: none; }
.nx-img--float.is-in .nx-img__frame { animation: nx-img-sway var(--fd, 7s) var(--ease-in-out) var(--fdl, 0s) infinite alternate; }
.nx-img--float .nx-img__par img { animation: nx-img-pan 18s var(--ease-in-out) var(--fdl, 0s) infinite alternate; }
@keyframes nx-img-sway { from { transform: translate3d(0, -6px, 0) rotate(calc(var(--frot, .5deg) * -1)); } to { transform: translate3d(0, 8px, 0) rotate(var(--frot, .5deg)); } }
@keyframes nx-img-pan { from { transform: scale(1); } to { transform: scale(1.08) translate3d(-1.5%, -1.2%, 0); } }
@media (hover: hover) { .nx-img--float.is-in:hover .nx-img__zoom { transform: scale(calc(var(--zoom, 1.14) + .05)); transition-delay: 0s; } }
.nx-img__cap { margin-top: 12px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .nx-img--clip .nx-img__frame, .nx-img--fade .nx-img__frame { clip-path: none; opacity: 1; transition: none; } .nx-img__zoom { transform: none; transition: none; } .nx-img--float { opacity: 1; transform: none; transition: none; } .nx-img--float .nx-img__frame, .nx-img--float .nx-img__par img { animation: none !important; } }

/* ---------- Glass bar ---------- */
.nx-glass { background: var(--glass); color: var(--ink); border-radius: var(--radius-pill); box-shadow: var(--shadow-glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.5); backdrop-filter: blur(var(--blur-glass)) saturate(1.5); }

/* ---------- Nav ---------- */
.nx-nav { position: fixed; z-index: var(--z-nav); top: calc(14px + env(safe-area-inset-top, 0px)); left: 0; right: 0; display: flex; justify-content: center; padding: 0 var(--nx-gutter); pointer-events: none; transition: transform var(--dur-slow) var(--ease-expo); }
.nx-nav.is-hidden { transform: translateY(calc(-100% - 28px)); }
.nx-nav__bar { pointer-events: auto; display: flex; align-items: center; gap: 24px; width: min(1160px, 100%); height: 60px; padding: 0 8px 0 26px; transition: background var(--dur-base) var(--ease-out); }
.nx-nav.is-open { z-index: calc(var(--z-overlay) + 1); }
.nx-nav.is-open .nx-nav__bar { background: transparent; box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nx-nav__links, .nx-nav__cta { transition: opacity var(--dur-base) var(--ease-out); }
.nx-nav.is-open .nx-nav__links, .nx-nav.is-open .nx-nav__cta { opacity: 0; pointer-events: none; }
.nx-nav__logo { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.nx-nav__links { display: flex; gap: 4px; margin-inline: auto; }
.nx-nav__link { position: relative; display: block; padding: 10px 16px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font: 500 14.5px/1 var(--font-sans); letter-spacing: -0.01em; }
.nx-nav__lbl { position: relative; display: block; overflow: hidden; height: 1.2em; line-height: 1.2; }
.nx-nav__t { display: block; transition: transform var(--dur-slow) var(--ease-expo); }
.nx-nav__t--b { position: absolute; left: 0; top: 100%; }
.nx-nav__link::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent-fill); transform: scale(0); transition: transform var(--dur-base) var(--ease-spring); }
.nx-nav__link.is-current::after { transform: scale(1); }
@media (hover: hover) { .nx-nav__link:hover .nx-nav__t { transform: translateY(-100%); } }
.nx-nav__right { display: flex; align-items: center; gap: 8px; }
.nx-nav__toggle { display: none; }
@media (max-width: 900px) {
  .nx-nav__links, .nx-nav__cta { display: none; }
  .nx-nav__toggle { display: inline-flex; }
  .nx-nav__right { margin-left: auto; }
  .nx-nav__bar { height: 56px; padding-left: 20px; }
}

/* ---------- Menu overlay ---------- */
.nx-menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--surface); color: var(--ink); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .9s var(--ease-in-out), visibility 0s .9s; overflow: auto; }
.nx-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .9s var(--ease-in-out), visibility 0s; }
.nx-menu__inner { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 5vh, var(--space-8)); padding: clamp(88px, 15vh, 120px) var(--nx-gutter) var(--nx-gutter); max-width: var(--container); margin: 0 auto; }
.nx-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nx-menu__list li { border-top: 1px solid var(--line); transition: opacity var(--dur-slow) var(--ease-out); }
.nx-menu__list:hover li:not(:hover) { opacity: .35; }
.nx-menu__a { display: flex; align-items: baseline; gap: 24px; padding: 10px 0 14px; color: inherit; text-decoration: none; }
.nx-menu__idx { flex: none; width: 44px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--accent); }
.nx-menu__txt { display: block; overflow: hidden; font-size: clamp(40px, min(9vw, 10.5vh), 128px); padding: .12em 0 .2em; margin: -.12em 0 -.2em; }
.nx-menu__txt span { display: block; font-size: 1em; line-height: .98; font-weight: 200; letter-spacing: -0.055em; transform: translateY(140%); transition: transform 1s var(--ease-expo); }
.nx-menu.is-open .nx-menu__txt span { transform: none; transition-delay: calc(.28s + var(--i, 0) * .07s); }
.nx-menu__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- Cursor ---------- */
.nx-cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.nx-cursor__bubble { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: width .5s var(--ease-expo), height .5s var(--ease-expo), margin .5s var(--ease-expo), background .3s, opacity .3s; }
.nx-cursor[data-on] .nx-cursor__bubble { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--brand); mix-blend-mode: normal; }
.nx-cursor[data-hide] .nx-cursor__bubble { width: 0; height: 0; margin: 0; }
.nx-cursor__lbl { font: 500 13px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--on-brand); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s var(--ease-expo); }
.nx-cursor[data-on] .nx-cursor__lbl { opacity: 1; transform: none; }

/* ---------- Preloader ---------- */
.nx-pre { --nx-pre-h: clamp(64px, 13vw, 190px); position: fixed; inset: 0; z-index: var(--z-preloader); display: flex; flex-direction: column; justify-content: space-between; padding: max(var(--nx-gutter), env(safe-area-inset-top, 0px)) var(--nx-gutter) var(--nx-gutter); background: var(--surface); color: var(--ink); clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-in-out); }
.nx-pre--inline { position: absolute; }
.nx-pre.is-exit { clip-path: inset(0 0 100% 0); }
.nx-pre__mid { flex: 1; display: grid; place-items: center; min-height: 0; transition: transform 1.1s var(--ease-in-out); }
.nx-pre.is-exit .nx-pre__mid { transform: translateY(-14vh); }
.nx-pre__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.nx-pre__count { display: flex; align-items: baseline; gap: 4px; font: 200 clamp(56px, 9vw, 128px)/.85 var(--font-sans); letter-spacing: -0.06em; color: var(--ink); text-transform: none; font-variant-numeric: tabular-nums; }
.nx-pre__count i { font: italic 400 .32em/1 var(--font-serif); color: var(--accent); letter-spacing: 0; }
.nx-pre__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.nx-pre__bar i { display: block; height: 100%; background: var(--accent-fill); transform-origin: left; }

/* ---------- Section ---------- */
.nx-section { background: var(--surface); color: var(--ink); }
.nx-section--pad { padding-block: var(--nx-section); }
.nx-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--nx-gutter); }
.nx-section__head { display: grid; gap: 32px; margin-bottom: var(--space-8); }
.nx-section__lead { margin: 0; max-width: 46ch; font: 300 clamp(18px, 1.7vw, 22px)/1.5 var(--font-sans); letter-spacing: -0.012em; color: var(--ink-muted); }

/* ---------- Footer ---------- */
.nx-footer { position: relative; z-index: 1; background: var(--surface); color: var(--ink); padding-top: var(--nx-section); padding-bottom: 28px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: calc(var(--radius-xl) * -1); overflow: hidden; }
.nx-footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-bottom: var(--space-9); }
.nx-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.nx-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nx-footer__h { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.nx-footer__txt, .nx-footer__link { font-size: 17px; line-height: 1.4; color: var(--ink); text-decoration: none; }
.nx-footer__link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-slow) var(--ease-expo); padding-bottom: 2px; }
@media (hover: hover) { .nx-footer__link:hover { background-size: 100% 1px; } }
.nx-footer__mark { margin-top: var(--space-9); opacity: .96; }
.nx-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.nx-footer__legal { display: flex; gap: 24px; }
.nx-footer__legal a { color: inherit; text-decoration: none; }
.nx-footer__legal a:hover { color: var(--ink); }
.nx-footer__top-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; transition: background var(--dur-base), color var(--dur-base), transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) { .nx-footer__top-btn:hover { background: var(--ink); color: var(--surface); transform: translateY(-4px); } }
@media (max-width: 760px) { .nx-footer__cols { grid-template-columns: 1fr; gap: 28px; } .nx-footer__bar { flex-wrap: wrap; } }

/* ---------- Product card ---------- */
.nx-card { display: flex; flex-direction: column; gap: 20px; color: inherit; text-decoration: none; transition: transform var(--dur-slow) var(--ease-expo); opacity: 0; transform: translateY(36px); }
.nx-card.is-in { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); }
.nx-card__media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-sunken); transition: box-shadow var(--dur-slow) var(--ease-out); isolation: isolate; }
.nx-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.3s var(--ease-expo); }
.nx-card--contain .nx-card__media img { box-sizing: border-box; object-fit: contain; padding: 12% 10%; transform: scale(1); }
.nx-card__tag { position: absolute; left: 16px; top: 16px; }
.nx-card__go { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface-raised); color: var(--ink); font-size: 22px; transform: scale(0) rotate(-45deg); transition: transform var(--dur-slow) var(--ease-spring); }
.nx-card__body { display: flex; flex-direction: column; gap: 10px; }
.nx-card__top { display: flex; justify-content: space-between; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.nx-card__idx { color: var(--accent); }
.nx-card__title { margin: 0; font-weight: 250; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.06; letter-spacing: -0.035em; }
.nx-card__text { margin: 0; max-width: 36ch; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
@media (hover: hover) {
  .nx-card.is-in:hover { transform: translateY(-6px); transition: transform var(--dur-slow) var(--ease-expo); }
  .nx-card:hover .nx-card__media { box-shadow: var(--shadow-lift); }
  .nx-card:hover img { transform: scale(1.07); }
  .nx-card:hover .nx-card__go { transform: none; }
}
.nx-card:focus-visible .nx-card__go { transform: none; }
@media (prefers-reduced-motion: reduce) { .nx-card { opacity: 1; transform: none; } }

/* ---------- Process steps ---------- */
.nx-steps { list-style: none; margin: 0; padding: 0; }
.nx-step { position: relative; display: grid; grid-template-columns: minmax(80px, .5fr) 1.2fr 1.3fr; gap: 32px; align-items: start; padding: 44px 0 48px; border-top: 1px solid var(--line); }
.nx-step::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent-fill); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-expo); }
.nx-step__n, .nx-step__t, .nx-step__b { transition: color .7s var(--ease-out), transform .9s var(--ease-expo), opacity .7s var(--ease-out); }
.nx-step__t { color: var(--ink-muted); }
.nx-step[data-active] .nx-step__n { color: var(--accent); }
.nx-step[data-active] .nx-step__t { color: var(--ink); transform: translateX(12px); }
.nx-step[data-active]::before { transform: scaleX(1); }
.nx-step:last-child { border-bottom: 1px solid var(--line); }
.nx-step__n { font: 200 var(--nx-fs-s)/1 var(--font-sans); letter-spacing: -0.05em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nx-step__t { margin: 0; font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.028em; }
.nx-step__b p { margin: 0; max-width: 46ch; color: var(--ink-muted); }
.nx-step__note { display: inline-block; margin-top: 18px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 820px) { .nx-step { grid-template-columns: 56px 1fr; gap: 12px 20px; } .nx-step__b { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .nx-step__n { color: var(--accent); } .nx-step__t { transform: none !important; } .nx-step::before { transform: none; transition: none; } }

/* ---------- Accordion ---------- */
.nx-acc__item { border-top: 1px solid var(--line); }
.nx-acc__item:last-child { border-bottom: 1px solid var(--line); }
.nx-acc__h { margin: 0; }
.nx-acc__q { display: grid; grid-template-columns: 72px 1fr 44px; align-items: center; gap: 16px; width: 100%; padding: 28px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: 300 clamp(21px, 2.3vw, 32px)/1.2 var(--font-sans); letter-spacing: -0.022em; border-radius: var(--radius-sm); }
.nx-acc__idx { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--accent); }
.nx-acc__ico { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-slow) var(--ease-spring); }
.nx-acc__ico i { position: absolute; left: 14px; right: 14px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); transition: transform var(--dur-slow) var(--ease-expo), background var(--dur-base); }
.nx-acc__ico i + i { transform: rotate(90deg); }
.nx-acc__item.is-open .nx-acc__ico { background: var(--ink); transform: rotate(180deg); }
.nx-acc__item.is-open .nx-acc__ico i { background: var(--surface); }
.nx-acc__item.is-open .nx-acc__ico i + i { transform: rotate(0deg) scaleX(0); }
@media (hover: hover) { .nx-acc__q:hover .nx-acc__ico { background: var(--surface-sunken); } .nx-acc__item.is-open .nx-acc__q:hover .nx-acc__ico { background: var(--ink); } }
.nx-acc__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-slow) var(--ease-expo), visibility 0s var(--dur-slow); }
.nx-acc__item.is-open .nx-acc__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.nx-acc__ai { min-height: 0; overflow: hidden; }
.nx-acc__ai p { margin: 0; padding: 0 60px 32px 88px; max-width: 74ch; color: var(--ink-muted); }
@media (max-width: 640px) { .nx-acc__q { grid-template-columns: 44px 1fr 40px; } .nx-acc__ai p { padding: 0 8px 28px 60px; } }

/* ---------- Contact form ---------- */
.nx-form { display: flex; flex-direction: column; gap: 28px; }
.nx-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.nx-field { position: relative; }
.nx-field__input { display: block; width: 100%; height: 64px; padding: 26px 20px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 400 17px/1.3 var(--font-sans); letter-spacing: -0.006em; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
textarea.nx-field__input { height: auto; min-height: 150px; padding-top: 32px; resize: vertical; }
.nx-field__l { position: absolute; left: 21px; top: 21px; font: 400 17px/1.3 var(--font-sans); color: var(--ink-muted); pointer-events: none; transform-origin: left top; transition: transform .45s var(--ease-expo), color var(--dur-base); }
.nx-field__input:focus + .nx-field__l, .nx-field__input:not(:placeholder-shown) + .nx-field__l { transform: translateY(-14px) scale(.72); }
.nx-field__input:focus { outline: none; border-color: var(--ink); background: var(--surface-raised); box-shadow: var(--focus-ring); }
.nx-field.has-error .nx-field__input { border-color: var(--danger); }
.nx-field__e { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 500 13px/1.3 var(--font-sans); color: var(--danger); }
.nx-field__e--c { margin-top: -16px; }
.nx-form__chips { margin: 0; padding: 0; border: 0; }
.nx-form__legend { padding: 0; margin-bottom: 14px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.nx-form__chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.nx-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); cursor: pointer; font: 500 15px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--ink); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-slow) var(--ease-spring); user-select: none; }
.nx-chip:active { transform: scale(.95); }
.nx-chip.is-on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.nx-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
@media (hover: hover) { .nx-chip:not(.is-on):hover { background: var(--surface-sunken); } }
.nx-check { position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.nx-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.nx-check i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: transparent; transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.nx-check i svg { width: 14px; height: 14px; }
.nx-check input:checked + i { background: var(--action); border-color: var(--action); color: var(--on-action); }
.nx-check input:focus-visible + i { box-shadow: var(--focus-ring); }
.nx-check.has-error i { border-color: var(--danger); }
.nx-check a { color: var(--ink); }
.nx-form__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.nx-form__live { font-size: 14px; color: var(--danger); }
.nx-form--sent { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 0; }
.nx-form__check { width: 72px; height: 72px; }
.nx-form__check circle, .nx-form__check path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nx-draw 1.1s var(--ease-expo) forwards; }
.nx-form__check path { animation-delay: .35s; }
.nx-form__sub { margin: 0; color: var(--ink-muted); }
@keyframes nx-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .nx-form__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .nx-form__check circle, .nx-form__check path { animation: none; stroke-dashoffset: 0; } }

/* ---------- Dessert explode ---------- */
.nx-ex { position: relative; width: 100%; --fl: 0; user-select: none; -webkit-user-select: none; }
.nx-ex:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
.nx-ex__p { position: absolute; will-change: transform; }
.nx-ex__sh { position: absolute; display: block; max-width: none; pointer-events: none; will-change: opacity; }
.nx-ex__float { position: absolute; inset: 0; animation: nx-float var(--fd, 6s) var(--ease-in-out) infinite; animation-delay: var(--fdl, 0s); }
.nx-ex__float img { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; -webkit-user-drag: none; }
@keyframes nx-float { 0%, 100% { transform: translate3d(0, calc(var(--fl, 0) * var(--fa, 5px) * -1), 0); } 50% { transform: translate3d(0, calc(var(--fl, 0) * var(--fa, 5px)), 0); } }
.nx-ex__c { position: absolute; left: 0; top: 0; background-repeat: no-repeat; will-change: transform, opacity; pointer-events: none; }
.nx-ex__c.is-front { filter: blur(1.2px); }
.nx-ex__lbl { position: absolute; width: 0; height: 0; z-index: 20; pointer-events: none; will-change: transform; color: var(--ink); }
.nx-ex__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--surface); transform: scale(var(--lp, 0)); }
.nx-ex__line { position: absolute; top: 0; left: 0; height: 1px; width: var(--span, 120px); background: currentColor; transform-origin: left center; transform: scaleX(var(--lp, 0)); }
.nx-ex__lbl--l .nx-ex__line { left: auto; right: 0; transform-origin: right center; }
.nx-ex__txt { position: absolute; top: -0.9em; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: 260px; opacity: var(--lt, 0); text-shadow: 0 0 2px var(--surface), 0 0 6px var(--surface), 0 0 12px var(--surface); }
.nx-ex__lbl--r .nx-ex__txt { left: calc(var(--span, 120px) + 16px); transform: translate(calc((1 - var(--lt, 0)) * -18px), var(--ty, 0px)); }
.nx-ex__lbl--l .nx-ex__txt { right: calc(var(--span, 120px) + 16px); align-items: flex-end; text-align: right; transform: translate(calc((1 - var(--lt, 0)) * 18px), var(--ty, 0px)); }
.nx-ex__no { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--accent); }
.nx-ex__nm { font: 300 clamp(20px, 2.3vw, 34px)/1.1 var(--font-sans); letter-spacing: -0.03em; }
.nx-ex__sub { font: 400 14px/1.4 var(--font-sans); color: var(--ink-muted); }
@media (max-width: 720px) { .nx-ex__txt { max-width: min(150px, 33vw); } .nx-ex__nm { font-size: 19px; } .nx-ex__sub { font-size: 13px; line-height: 1.25; } .nx-ex__lbl--r .nx-ex__txt { left: calc(var(--span, 80px) + 8px); } .nx-ex__lbl--l .nx-ex__txt { right: calc(var(--span, 80px) + 8px); } }
@media (prefers-reduced-motion: reduce) { .nx-ex__float { animation: none; } }

/* --jar-w factors follow the dessert frame (640 × 1033 in baklava.js): .363 and .28 keep the stage height the jar frame (961 wide, .545 / .42) had; 44vw (was 56vw) keeps the taller stack clear of the hero links on phones. */
/* ---------- Anatomy scene ---------- */
.nx-scene { position: relative; background: var(--surface); color: var(--ink); }
.nx-scene__sticky { --jar-w: min(33vw, calc((var(--scene-h, 100vh) - 24px) * .363)); position: sticky; top: 0; height: var(--scene-h, 100vh); min-height: 560px; overflow: hidden; }
.nx-scene--frozen .nx-scene__sticky { position: relative; }
.nx-scene__bg { position: absolute; inset: 0; z-index: 1; background: var(--sage-500); clip-path: circle(0px at 50% 50%); }
.nx-scene__hero { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 3.4vh, 36px); width: 100%; max-width: var(--container); margin-inline: auto; padding: 120px var(--nx-gutter) clamp(32px, 6vh, 64px); will-change: transform, opacity; }
.nx-scene__hero .nx-headline { font-size: clamp(46px, 7.7vw, 124px); }
.nx-scene__meta { display: flex; }
.nx-scene__row { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.nx-scene__lead { margin: 0; max-width: 34ch; font: 300 clamp(18px, 1.55vw, 22px)/1.5 var(--font-sans); letter-spacing: -0.012em; color: var(--ink); }
.nx-scene__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.nx-scene__jar { position: absolute; left: 50%; top: 50%; z-index: 3; width: var(--jar-w); will-change: transform, opacity; opacity: 0; }
.nx-scene__hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--ink); }
.nx-scene__hudin { position: absolute; left: var(--nx-gutter); bottom: clamp(24px, 5vh, 48px); display: flex; flex-direction: column; gap: 6px; will-change: opacity; }
.nx-scene__tagline { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.nx-scene__count { display: flex; align-items: baseline; gap: 6px; font: 200 clamp(54px, 7vw, 104px)/.9 var(--font-sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.nx-scene__count i { font: italic 400 .36em/1 var(--font-serif); letter-spacing: 0; }
.nx-scene__cap { font: 400 15px/1.3 var(--font-sans); min-height: 1.3em; }
.nx-scene__hint { position: absolute; right: var(--nx-gutter); bottom: clamp(24px, 5vh, 48px); display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); color: var(--ink-muted); }
.nx-scene__hint i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 20px; color: var(--ink); animation: nx-bob 2.2s var(--ease-in-out) infinite; }
@keyframes nx-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
.nx-scene__hero--static { position: relative; inset: auto; padding-top: 140px; align-items: flex-start; }
.nx-scene__aside { margin-top: clamp(0px, calc(var(--scene-h, 100vh) - 860px), 96px); margin-bottom: auto; display: grid; gap: 14px; width: min(560px, 40vw); }
.nx-scene__aside-h { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.nx-scene__aside-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.nx-scene__aside-list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font: 300 clamp(17px, 1.5vw, 23px)/1.25 var(--font-sans); letter-spacing: -0.015em; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--dur-reveal) var(--ease-expo), transform var(--dur-reveal) var(--ease-expo); transition-delay: calc(.45s + var(--i, 0) * .07s); }
.nx-scene__aside[data-on] li { opacity: 1; transform: none; }
.nx-scene__aside-no { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-muted); }
.nx-scene__hero--static .nx-scene__aside { margin: 0 0 var(--space-7); }
@media (max-width: 820px), (max-height: 760px) { .nx-scene__aside { display: none; } }
@media (prefers-reduced-motion: reduce) { .nx-scene__aside-list li { opacity: 1; transform: none; transition: none; } }
.nx-scene__still { background: var(--surface); padding: var(--space-8) var(--nx-gutter); }
.nx-scene__still-in { width: min(280px, 47vw); margin: 0 auto; }
@media (max-width: 820px) {
  .nx-scene__sticky { --jar-w: min(44vw, calc((var(--scene-h, 100vh) - 24px) * .28)); }
  .nx-scene__hero { padding-top: 96px; justify-content: flex-start; gap: 18px; }
  .nx-scene__hero .nx-headline { font-size: clamp(44px, 14vw, 84px); }
  .nx-scene__row { gap: 20px; }
  .nx-scene__lead { max-width: 28ch; }
  .nx-scene__hint span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nx-scene__hint i { animation: none; } }