/* ==========================================================================
   NexGen Laboratories — design system
   Dossier grammar: certificate-of-analysis typography, assay tables,
   hairline gold rules, per-product colour fields.
   Everything is scoped under .nx so Divi's own styling is never disturbed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground */
  --nx-ink: #0b100d;
  --nx-ink-2: #131a16;
  --nx-ink-3: #1d2721;
  --nx-ink-4: #2a352e;
  --nx-paper: #f3f4f1;
  --nx-paper-2: #ffffff;
  --nx-paper-3: #e7e9e4;
  --nx-paper-4: #d7dbd4;

  /* Text */
  --nx-text: #0f1512;
  --nx-text-2: #4a554e;
  /* Darkened so 11px table headers and card meta clear 4.5:1 on lab paper */
  --nx-text-3: #5f6a63;
  --nx-on-dark: #f2f4f0;
  --nx-on-dark-2: #a9b5ad;
  --nx-on-dark-3: #7c887f;

  /* Accent */
  --nx-gold: #c9a25a;
  --nx-gold-hi: #e9c77e;
  --nx-gold-ink: #7a5c1f; /* gold-toned text that passes on light ground */
  --nx-gold-line: rgba(201, 162, 90, 0.32);
  --nx-gold-wash: rgba(201, 162, 90, 0.08);
  /* Opaque gold tints, for a cell inside a hairline grid. A translucent wash
     cannot be used there: the grid paints its container in the divider colour
     to draw the hairlines, so a see-through cell composites gold over
     rgb(215,219,212) rather than over white and lands at rgb(214,214,202) —
     which took 10px and 12px text in that cell to 3.86:1 and 4.25:1. These
     are the same colours flattened onto paper, so contrast is fixed rather
     than dependent on whatever the cell happens to sit on. */
  --nx-gold-tint: #f6f0e4;
  --nx-gold-tint-hi: #f2ead8;
  --nx-gold-tint-dark: #25281d;
  --nx-verify: #00994f; /* the logo green — verification marks and icons */
  --nx-verify-ink: #00753c; /* darker, for green *text* on a light ground */

  /* Product colour fields */
  --nx-neurovia: #0e3a2a;
  --nx-ferrivia: #141414;
  --nx-omniva: #7a2e16;
  --nx-osteovia: #0e2a55;
  --nx-magnesvia: #3b2352;

  /* Per-page colour field, overridden by product pages */
  --nx-field: var(--nx-ink);
  --nx-field-deep: #000;
  --nx-field-lift: var(--nx-ink-3);
  --nx-field-accent: var(--nx-gold-hi);

  /* Metrics */
  --nx-head-h: 76px;
  --nx-head-h-sm: 62px;
  --nx-max: 1240px;
  --nx-max-narrow: 820px;
  --nx-gut: clamp(20px, 5vw, 56px);
  --nx-radius: 4px;
  --nx-radius-lg: 8px;

  /* Depth — offset plus soft blur, never a flat halo */
  --nx-shadow-1: 0 1px 2px rgba(11, 16, 13, 0.06), 0 2px 8px rgba(11, 16, 13, 0.05);
  --nx-shadow-2: 0 2px 6px rgba(11, 16, 13, 0.07), 0 12px 28px rgba(11, 16, 13, 0.09);
  --nx-shadow-3: 0 4px 12px rgba(11, 16, 13, 0.1), 0 24px 56px rgba(11, 16, 13, 0.14);

  /* Motion */
  --nx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-ease-fast: cubic-bezier(0.33, 1, 0.68, 1);
  --nx-dur: 0.55s;
}

/* --------------------------------------------------------------------------
   2. Divi neutralisation
   Full-bleed code-module sections need Divi's default padding out of the way.
   -------------------------------------------------------------------------- */
/* Rows that carry a panel class style themselves, so they are excluded here
   rather than fought with higher specificity further down the file. */
.et_pb_section.nx-sec,
.et_pb_section.nx-sec > .et_pb_row:not(.nx-buy):not(.nx-formwrap):not(.nx-woo-row),
.et_pb_section.nx-sec > .et_pb_row > .et_pb_column {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.et_pb_section.nx-sec .et_pb_module {
  margin-bottom: 0 !important;
}
.et_pb_section.nx-sec {
  overflow: visible;
}
/* Divi injects an animation wrapper that can clip sticky/overflow children */
.nx-sec .et_pb_code_inner {
  width: 100%;
}

/* Lists: Divi restores a marker that every `list-style: none` in this file
   loses to.
   Divi sets the marker on builder content at a specificity a single component
   class cannot beat, so all eleven of our unmarked lists were being overruled
   the moment the markup reached WordPress. The header nav showed four bullets
   on the live site while this preview, which has no Divi in it, looked
   correct — which is exactly why it survived so long.

   Only lists that are not supposed to carry a marker are named here. Prose
   inside .nx-prose is carried editorial copy whose bullets are meant to be
   real list markers, so it is deliberately absent.

   ::marker is reset as well as list-style. list-style alone still leaves a
   marker box in some engines once Divi has also set list-style-position, and
   the residue shows up as an indent rather than a dot. */
.nx-checks,
.nx-chips,
.nx-nav,
.nx-mobile__nav,
.nx-standards,
.nx-assay,
.nx-vs ul,
.nx-pillars,
.nx-buy__promise,
.nx-contact-list,
.nx-footer ul,
.nx-checks > li,
.nx-chips > li,
.nx-nav > li,
.nx-mobile__nav > li,
.nx-standards > li,
.nx-assay > li,
.nx-vs ul > li,
.nx-pillars > li,
.nx-buy__promise > li,
.nx-contact-list > li,
.nx-footer ul > li {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  /* Divi ships `padding-left: 1em` alongside the marker, and killing the
     marker alone leaves the indent: 17px of it, measured. On the centred
     header nav that was 17px of padding inside the nav box, so the links sat
     8.5px right of true centre while the nav element itself measured dead
     centre — a defect the obvious check cannot see. Every one of the ten lists
     named above already declares its own left padding as zero, in a shorthand
     Divi simply outranks, so this makes their own intent win rather than
     imposing anything new. The two that set a top padding keep it. */
  padding-left: 0 !important;
  /* The other half of the same Divi shorthand, and the more visible half.
     Divi's rule is `padding: 0 0 23px 1em`, not `padding-left: 1em`: it adds
     23px BELOW every list as well. Re-asserting only the left inset left that
     standing, which grew the header nav's ul from 34px to 57px. The wrapper
     centres the ul, so a box 23px taller than its text put the links about
     11px above the middle of the bar — the nav looked high on the live site
     while this preview, which has no Divi in it, was measurably centred.

     Every list named above declares a zero bottom padding of its own
     (.nx-standards is `1.5rem 0 0`, .nx-buy__promise is `16px 0 0`), so this
     restores their intent and takes nothing away from any of them. Margins are
     deliberately not touched: .nx-pillars and .nx-mobile__nav want theirs. */
  padding-bottom: 0 !important;
}
.nx-checks > li::marker,
.nx-chips > li::marker,
.nx-nav > li::marker,
.nx-mobile__nav > li::marker,
.nx-standards > li::marker,
.nx-assay > li::marker,
.nx-vs ul > li::marker,
.nx-pillars > li::marker,
.nx-buy__promise > li::marker,
.nx-contact-list > li::marker,
.nx-footer ul > li::marker {
  content: '';
  font-size: 0;
}
/* The disclosure triangle on the accordion is the same fight in a different
   shape: it is a marker on a <summary>, not on an <li>. */
.nx-acc summary {
  list-style: none !important;
}
.nx-acc summary::marker {
  content: '';
  font-size: 0;
}
.nx-acc summary::-webkit-details-marker {
  display: none;
}
/* Panel rows carry their own padding, so their max-width must include it */
.et_pb_row.nx-buy,
.et_pb_row.nx-formwrap,
.et_pb_row.nx-woo-row {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
.nx,
.nx *,
.nx *::before,
.nx *::after {
  box-sizing: border-box;
}

.nx {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--nx-text);
  background: var(--nx-paper);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

.nx img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Product renders are wrapped in <picture> for the WebP source. Taking the
   wrapper out of the box tree keeps the <img> as the direct grid/flex item, so
   every layout rule below still targets the image itself. */
.nx picture {
  display: contents;
}

/* Element resets are deliberately kept at single-class specificity so the
   type-scale utilities below can override them without !important. */
.nx :where(p) {
  margin: 0 0 1.15em;
  max-width: 68ch;
}
.nx :where(p):last-child {
  margin-bottom: 0;
}

.nx :where(h1, h2, h3, h4) {
  margin: 0 0 0.5em;
  font-weight: 600;
  color: inherit;
  padding: 0;
  text-wrap: balance;
}

.nx-wrap {
  width: 100%;
  max-width: var(--nx-max);
  margin-inline: auto;
  padding-inline: var(--nx-gut);
}
.nx-wrap--narrow {
  max-width: var(--nx-max-narrow);
}

/* Vertical rhythm: generous separation between bands, tight inside groups */
.nx-band {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative;
}
.nx-band--tight {
  padding-block: clamp(48px, 6vw, 80px);
}

/* Ground variants */
.nx-dark {
  background: var(--nx-ink);
  color: var(--nx-on-dark);
}
.nx-dark p {
  color: var(--nx-on-dark-2);
}
.nx-light {
  background: var(--nx-paper);
  color: var(--nx-text);
}
.nx-light p {
  color: var(--nx-text-2);
}
.nx-white {
  background: var(--nx-paper-2);
  color: var(--nx-text);
}
.nx-white p {
  color: var(--nx-text-2);
}

/* --------------------------------------------------------------------------
   4. Type scale
   -------------------------------------------------------------------------- */
.nx-display {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 0.32em;
}
.nx-h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 0.4em;
}
.nx-h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 0.5em;
}
.nx-h4 {
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 0.35em;
}
.nx-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  font-weight: 300;
  letter-spacing: -0.012em;
  max-width: 60ch;
}
.nx-small {
  font-size: 0.9rem;
  line-height: 1.6;
}

/* The dossier field label. A data-structure label, never a section eyebrow. */
.nx-field-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  display: block;
  margin: 0 0 0.55em;
  font-variant-numeric: tabular-nums;
}
.nx-dark .nx-field-label {
  color: var(--nx-on-dark-3);
}
.nx-field-label--gold {
  color: var(--nx-gold-ink);
}
/* Gold-on-light needs a much darker gold than gold-on-dark to stay legible, so
   every dark surface is named here. A dark panel that forgets `.nx-dark` would
   otherwise render this label at roughly 3:1. */
.nx-dark .nx-field-label--gold,
.nx-hero .nx-field-label--gold,
.nx-footer .nx-field-label--gold,
.nx-plate .nx-field-label--gold,
.nx-mobile__panel .nx-field-label--gold {
  color: var(--nx-gold);
}

.nx-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   5. Rules — the measurement hairline with its tick
   -------------------------------------------------------------------------- */
.nx-rule {
  height: 1px;
  background: var(--nx-paper-4);
  border: 0;
  margin: 0;
  position: relative;
}
.nx-dark .nx-rule {
  background: rgba(242, 244, 240, 0.14);
}
.nx-rule--gold {
  background: var(--nx-gold-line);
}
.nx-rule--tick::before {
  content: '';
  position: absolute;
  left: 0;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--nx-gold);
}
.nx-rule--tick::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 1px;
  background: var(--nx-gold);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 1.05em 1.9em;
  border-radius: var(--nx-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.28s var(--nx-ease-fast), color 0.28s var(--nx-ease-fast),
    border-color 0.28s var(--nx-ease-fast), box-shadow 0.28s var(--nx-ease-fast),
    transform 0.28s var(--nx-ease-fast);
  position: relative;
  isolation: isolate;
  text-align: center;
}
.nx-btn:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 3px;
}

/* Primary — gold plate on any ground */
.nx-btn--gold {
  background: var(--nx-gold-hi);
  color: #1a1305;
  box-shadow: var(--nx-shadow-1);
}
.nx-btn--gold:hover {
  background: #f3d698;
  box-shadow: var(--nx-shadow-2);
  transform: translateY(-1px);
  color: #1a1305;
}
.nx-btn--gold:active {
  transform: translateY(0);
  box-shadow: var(--nx-shadow-1);
}

/* Secondary on dark */
.nx-btn--ghost {
  background: transparent;
  color: var(--nx-on-dark);
  border-color: rgba(242, 244, 240, 0.26);
}
.nx-btn--ghost:hover {
  border-color: var(--nx-gold);
  color: var(--nx-gold-hi);
  background: rgba(201, 162, 90, 0.07);
}

/* Secondary on light */
.nx-btn--ink {
  background: var(--nx-ink);
  color: var(--nx-on-dark);
  box-shadow: var(--nx-shadow-1);
}
.nx-btn--ink:hover {
  background: var(--nx-ink-3);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--nx-shadow-2);
}
.nx-btn--outline {
  background: transparent;
  color: var(--nx-text);
  border-color: var(--nx-paper-4);
}
.nx-btn--outline:hover {
  border-color: var(--nx-ink);
  background: var(--nx-paper-2);
  color: var(--nx-text);
}

.nx-btn--wide {
  width: 100%;
}
.nx-btn--sm {
  padding: 0.8em 1.35em;
  font-size: 0.875rem;
}

/* Text link with a rule that grows from the left */
.nx-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none !important;
  padding-bottom: 3px;
  position: relative;
}
.nx-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s var(--nx-ease), opacity 0.3s var(--nx-ease-fast);
}
.nx-link:hover::after {
  opacity: 1;
}
.nx-link .nx-arrow {
  transition: transform 0.35s var(--nx-ease);
}
.nx-link:hover .nx-arrow {
  transform: translateX(4px);
}
.nx-link:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   7. Chips — trademark and spec markers
   -------------------------------------------------------------------------- */
.nx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5em 0.85em;
  border: 1px solid var(--nx-paper-4);
  border-radius: 100px;
  color: var(--nx-text-2);
  background: transparent;
  white-space: nowrap;
}
.nx-dark .nx-chip {
  border-color: rgba(242, 244, 240, 0.2);
  color: var(--nx-on-dark-2);
}
.nx-chip--gold {
  border-color: var(--nx-gold-line);
  color: var(--nx-gold-ink);
}
.nx-dark .nx-chip--gold {
  color: var(--nx-gold-hi);
  border-color: var(--nx-gold-line);
}
.nx-chip--solid {
  background: var(--nx-gold-hi);
  border-color: var(--nx-gold-hi);
  color: #1a1305;
}
/* The verification tick uses the logo's green */
.nx-tick {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--nx-verify);
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.et-l--header {
  position: sticky;
  top: 0;
  z-index: 9990;
}
.admin-bar .et-l--header {
  top: 32px;
}
/* Divi ancestors must not clip the sticky header */
#page-container,
#et-boc,
#et-boc > .et-boc,
#et-main-area {
  overflow: visible;
}

.nx-header {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--nx-paper-3);
  transition: box-shadow 0.35s var(--nx-ease-fast), background-color 0.35s var(--nx-ease-fast);
  width: 100%;
}
.nx-header.is-stuck {
  box-shadow: 0 1px 2px rgba(11, 16, 13, 0.04), 0 8px 24px rgba(11, 16, 13, 0.08);
  background: rgba(255, 255, 255, 0.97);
}
/* Gold hairline under the bar, matching the dossier grammar */
.nx-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--nx-gold) 0%, rgba(201, 162, 90, 0) 42%);
  pointer-events: none;
}

/* Fixed height on purpose. The header sits in flow, so animating its height
   would move every pixel of the page up and down mid-scroll. The stuck state
   is communicated through background opacity and shadow only — both composite
   on the GPU and cost no layout. */
.nx-header__bar {
  height: var(--nx-head-h);
  display: flex;
  align-items: center;
  gap: 24px;
  /* Containing block for the centred nav below. */
  position: relative;
}

/* The nav is centred on the BAR, not on the space the logo and the actions
   happen to leave.
   Taking it out of flow is what makes that true. The obvious alternatives both
   fail: `margin: auto` centres it between its siblings, and a
   `1fr auto 1fr` grid does not centre it either, because a grid item's
   automatic minimum is its content, so the two 1fr tracks resolve to different
   widths whenever the logo and the action group differ — and here they differ
   by 94px. Measured before this change: the nav sat 178px right of centre at
   every width from 1240 up.

   Full height rather than vertical centring, so the underline on each link has
   the whole bar to sit in and the hit area covers it. */
.nx-header__nav {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.nx-header__logo {
  display: flex;
  align-items: center;
  /* Allowed to shrink, and min-width:0 lets it actually do so — a fixed-width
     logo is what pushes a header bar wider than the viewport. */
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  text-decoration: none !important;
}
/* The supplied logo is cropped to its ink, so this height is all artwork —
   the original file spent more than half its height on white margin.
   max-height plus max-width lets it scale down proportionally when the bar
   runs out of room, rather than overflowing. */
.nx-header__logo img {
  height: auto;
  width: auto;
  max-height: 40px;
  max-width: 100%;
}

.nx-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The nav speaks the house label voice.
   This file already has a settled small-type register — .nx-field-label,
   .nx-footer h4 and .nx-mobile__meta all run 11px / 600 / 0.16em / uppercase,
   the certificate-of-analysis grammar the whole identity is built on. The bar
   was the one place ignoring it: 14px / 500 / 0.005em sentence case is Poppins
   at its default settings, which is to say no decision at all.

   So: uppercase, but at a lower intensity than a field label — 12px and
   0.085em rather than 11px and 0.16em. A nav has to be scanned in a glance,
   and a label's tracking at a label's size would turn four destinations into
   four rows of loose letters. Two steps of the same voice, not a copy of it.

   Resting colour drops to --nx-text-2 (7.78:1 on the bar, so it clears AA with
   room at this size). That matters more than it looks: at full ink the links
   carried the same visual weight as the gold button beside them, so the bar
   had two competing primaries and no clear action. Receding the nav one step
   gives "Shop the range" the bar to itself and costs the nav nothing. */
.nx-nav a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--nx-text-2);
  text-decoration: none !important;
  position: relative;
  padding: 7px 0;
  display: inline-block;
  white-space: nowrap;
  transition: color 0.25s var(--nx-ease-fast);
}
.nx-nav a:hover {
  color: var(--nx-text);
}
/* The current page reads as current from the ink, not only from the rule
   under it. The gold underline alone is a 1.5px cue on a white bar. */
.nx-nav a.is-current {
  color: var(--nx-text);
}
.nx-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  /* letter-spacing adds its space AFTER the last glyph too, so a
     `width: 100%` rule overshoots the word by one tracking step and the
     underline stops looking centred under the label. Trimming the right edge
     by exactly the tracking puts the rule under the letters. */
  right: 0.085em;
  bottom: 0;
  width: auto;
  height: 1.5px;
  background: var(--nx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s var(--nx-ease);
}
.nx-nav a:hover::after,
.nx-nav a.is-current::after {
  transform: scaleX(1);
}
.nx-nav a:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 4px;
}

.nx-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.nx-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--nx-radius);
  color: var(--nx-text);
  text-decoration: none !important;
  transition: background-color 0.25s var(--nx-ease-fast);
}
.nx-cart:hover {
  background: var(--nx-paper);
}
.nx-cart:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 2px;
}
.nx-cart__count {
  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--nx-ink);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nx-cart__count:empty,
.nx-cart__count.is-zero {
  display: none;
}

/* Burger */
.nx-burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: var(--nx-radius);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nx-burger:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 2px;
}
.nx-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--nx-text);
  border-radius: 2px;
  transition: transform 0.4s var(--nx-ease), opacity 0.2s linear;
}
.nx-burger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nx-burger.is-open span:nth-child(2) {
  opacity: 0;
}
.nx-burger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile panel */
.nx-mobile {
  position: fixed;
  inset: 0;
  z-index: 9995;
  visibility: hidden;
  pointer-events: none;
}
.nx-mobile.is-open {
  visibility: visible;
  pointer-events: auto;
}
.nx-mobile__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 13, 0.42);
  opacity: 0;
  transition: opacity 0.4s var(--nx-ease-fast);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.nx-mobile.is-open .nx-mobile__scrim {
  opacity: 1;
}
.nx-mobile__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 88vw);
  background: var(--nx-ink);
  color: var(--nx-on-dark);
  transform: translateX(100%);
  transition: transform 0.52s var(--nx-ease);
  display: flex;
  flex-direction: column;
  padding: 26px var(--nx-gut) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nx-mobile.is-open .nx-mobile__panel {
  transform: translateX(0);
}
.nx-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 34px;
  min-height: 42px;
}
.nx-mobile__close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(242, 244, 240, 0.22);
  background: transparent;
  color: var(--nx-on-dark);
  border-radius: var(--nx-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.25s, background-color 0.25s;
}
.nx-mobile__close:hover {
  border-color: var(--nx-gold);
  background: rgba(201, 162, 90, 0.08);
}
.nx-mobile__close:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 2px;
}
.nx-mobile__nav {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nx-mobile__nav li {
  border-bottom: 1px solid rgba(242, 244, 240, 0.1);
}
.nx-mobile__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--nx-on-dark);
  text-decoration: none !important;
}
.nx-mobile__nav a:hover {
  color: var(--nx-gold-hi);
}
.nx-mobile__nav .nx-mobile__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nx-on-dark-3);
  font-weight: 600;
}
.nx-mobile__foot {
  padding-top: 28px;
  display: grid;
  gap: 10px;
}
body.nx-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.nx-hero {
  position: relative;
  background: var(--nx-field-deep);
  color: var(--nx-on-dark);
  overflow: hidden;
  isolation: isolate;
}
/* Layered colour field. Pure CSS, no image bytes. */
.nx-hero__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in srgb, var(--nx-field-lift) 78%, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 96%, color-mix(in srgb, var(--nx-field) 65%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--nx-field) 0%, var(--nx-field-deep) 72%);
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nx-hero__field {
    background: linear-gradient(168deg, var(--nx-field-lift) 0%, var(--nx-field) 40%, var(--nx-field-deep) 100%);
  }
}
/* Hairline lattice — the instrument grid */
.nx-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(242, 244, 240, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 244, 240, 0.045) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(115% 88% at 72% 12%, #000 0%, transparent 70%);
  mask-image: radial-gradient(115% 88% at 72% 12%, #000 0%, transparent 70%);
  pointer-events: none;
}

.nx-hero__inner {
  position: relative;
  padding-block: clamp(72px, 11vw, 148px);
}
.nx-hero__grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.nx-hero .nx-display {
  color: #fff;
}
.nx-hero .nx-lead {
  color: rgba(242, 244, 240, 0.8);
  margin-bottom: 2rem;
}
.nx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 2.6rem;
}

/* Standards strip under the hero copy */
.nx-standards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(242, 244, 240, 0.14);
}
.nx-standards li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(242, 244, 240, 0.72);
}

/* --------------------------------------------------------------------------
   10. Signature: the capsule assay plate (hero art, inline SVG + CSS)
   -------------------------------------------------------------------------- */
.nx-plate {
  position: relative;
  border: 1px solid rgba(242, 244, 240, 0.16);
  border-radius: var(--nx-radius-lg);
  background: linear-gradient(160deg, rgba(242, 244, 240, 0.07), rgba(242, 244, 240, 0.015));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 40px 80px rgba(0, 0, 0, 0.3);
}
.nx-plate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(242, 244, 240, 0.14);
  margin-bottom: 18px;
}
.nx-plate__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.nx-plate__ref {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nx-gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. Signature: the assay table — leader dots, tabular doses
   -------------------------------------------------------------------------- */
.nx-assay {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nx-assay li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0.62em 0;
  border-bottom: 1px solid var(--nx-paper-3);
  font-size: 0.9375rem;
}
.nx-assay li:last-child {
  border-bottom: 0;
}
.nx-dark .nx-assay li,
.nx-plate .nx-assay li {
  border-bottom-color: rgba(242, 244, 240, 0.1);
}
.nx-assay__name {
  flex: 0 1 auto;
  color: var(--nx-text);
  font-weight: 400;
  min-width: 0;
}
.nx-dark .nx-assay__name,
.nx-plate .nx-assay__name {
  color: rgba(242, 244, 240, 0.92);
}
/* The leader dots — the detail that makes it read as a document */
.nx-assay__lead {
  flex: 1 1 auto;
  min-width: 18px;
  height: 1px;
  align-self: flex-end;
  margin-bottom: 0.36em;
  background-image: radial-gradient(circle, var(--nx-paper-4) 1px, transparent 1px);
  background-size: 5px 2px;
  background-repeat: repeat-x;
  background-position: bottom;
}
.nx-dark .nx-assay__lead,
.nx-plate .nx-assay__lead {
  background-image: radial-gradient(circle, rgba(242, 244, 240, 0.3) 1px, transparent 1px);
}
.nx-assay__dose {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--nx-gold-ink);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.nx-dark .nx-assay__dose,
.nx-plate .nx-assay__dose {
  color: var(--nx-gold-hi);
}
.nx-assay--two {
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
}
.nx-assay--two li {
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   12. Signature: the range rail — five colour panels
   -------------------------------------------------------------------------- */
/* Every panel shows its carton and its copy at rest — nothing is behind a
   hover. Panels are equal width and stay that way, so no amount of pointer
   movement reflows the row. Hover is a small lift on the carton only. */
.nx-rail {
  display: flex;
  width: 100%;
  height: clamp(500px, 60vw, 640px);
  overflow: hidden;
  background: var(--nx-ink);
}
.nx-rail__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 34px) clamp(14px, 1.4vw, 22px) clamp(24px, 2.2vw, 30px);
  text-decoration: none !important;
  color: #fff;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  isolation: isolate;
  transition: filter 0.4s var(--nx-ease-fast);
}
.nx-rail__panel:last-child {
  border-right: 0;
}
.nx-rail__panel:hover {
  filter: brightness(1.08);
}
.nx-rail__panel:focus-visible {
  outline: 2px solid var(--nx-gold-hi);
  outline-offset: -4px;
}
.nx-rail__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(178deg, var(--p-lift) 0%, var(--p-color) 46%, var(--p-deep) 100%);
}
.nx-rail__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.62) 100%);
}
/* The carton is a normal flex child, centred in whatever space the copy
   leaves. `margin: auto` does the centring on all four sides. */
.nx-rail__shot {
  position: static;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 50%;
  margin: auto;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
  border-radius: 3px;
  transition: transform 0.5s var(--nx-ease);
}
.nx-rail__panel:hover .nx-rail__shot,
.nx-rail__panel:focus-visible .nx-rail__shot {
  transform: translateY(-6px) scale(1.035);
}
.nx-rail__body {
  position: static;
  flex: none;
  padding: 0;
  margin-top: clamp(18px, 2vw, 26px);
}
.nx-rail__cat {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--p-accent);
  display: block;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-rail__name {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 2px;
  line-height: 1.1;
  color: #fff;
}
.nx-rail__suffix {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
  display: block;
}
/* Always open. Kept as its own element so the strap line and the link stay
   grouped beneath the name. */
.nx-rail__reveal {
  display: block;
  margin-top: 12px;
}
.nx-rail__reveal p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 12px;
  max-width: 34ch;
}
.nx-rail__panel:hover .nx-rail__go {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nx-rail__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--p-accent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. Dossier grid — the "why" band. Not icon cards: a ledger.
   -------------------------------------------------------------------------- */
.nx-ledger {
  border-top: 1px solid var(--nx-paper-4);
}
.nx-dark .nx-ledger {
  border-top-color: rgba(242, 244, 240, 0.16);
}
.nx-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(26px, 3.4vw, 42px) 0;
  border-bottom: 1px solid var(--nx-paper-4);
  align-items: start;
}
.nx-dark .nx-ledger__row {
  border-bottom-color: rgba(242, 244, 240, 0.16);
}
.nx-ledger__row:hover {
  background: linear-gradient(90deg, var(--nx-gold-wash), transparent 62%);
}
.nx-ledger__key {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.nx-ledger__idx {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--nx-gold-ink);
  font-variant-numeric: tabular-nums;
  flex: none;
  padding-top: 2px;
}
.nx-dark .nx-ledger__idx {
  color: var(--nx-gold);
}
.nx-ledger__val p:last-child {
  margin-bottom: 0;
}

/* Comparison ledger — commodity versus NexGen */
.nx-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
  background: var(--nx-paper-2);
}
.nx-vs__col {
  padding: clamp(22px, 3vw, 34px);
}
.nx-vs__col + .nx-vs__col {
  border-left: 1px solid var(--nx-paper-4);
  background: linear-gradient(180deg, var(--nx-gold-wash), transparent 40%);
}
.nx-vs__head {
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--nx-paper-3);
}
.nx-vs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx-vs li {
  display: flex;
  gap: 11px;
  padding: 0.72em 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--nx-paper-3);
  color: var(--nx-text-2);
  align-items: flex-start;
}
.nx-vs li:last-child {
  border-bottom: 0;
}
.nx-vs__mark {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}
.nx-vs__col--them .nx-vs__mark {
  color: var(--nx-text-3);
}
.nx-vs__col--us .nx-vs__mark {
  color: var(--nx-verify);
}
.nx-vs__col--us li {
  color: var(--nx-text);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   14. Figures — cited numbers, sized as evidence
   -------------------------------------------------------------------------- */
.nx-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--nx-paper-4);
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
.nx-dark .nx-figures {
  background: rgba(242, 244, 240, 0.16);
  border-color: rgba(242, 244, 240, 0.16);
}
.nx-figure {
  background: var(--nx-paper-2);
  padding: clamp(22px, 3vw, 32px);
}
.nx-dark .nx-figure {
  background: var(--nx-ink-2);
}
.nx-figure__v {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--nx-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
  display: block;
}
.nx-dark .nx-figure__v {
  color: var(--nx-gold-hi);
}
.nx-figure__l {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--nx-text-2);
  margin: 0;
  max-width: 34ch;
}
.nx-dark .nx-figure__l {
  color: var(--nx-on-dark-2);
}

/* --------------------------------------------------------------------------
   15. Product cards (shop + related)
   -------------------------------------------------------------------------- */
.nx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.nx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-paper-2);
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.42s var(--nx-ease), box-shadow 0.42s var(--nx-ease),
    border-color 0.42s var(--nx-ease);
}
.nx-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nx-shadow-3);
  border-color: var(--nx-gold-line);
}
.nx-card:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 3px;
}
.nx-card__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(158deg, var(--p-lift) 0%, var(--p-color) 52%, var(--p-deep) 100%);
}
.nx-card__shot img {
  width: 47%;
  max-width: 156px;
  transform: translateY(4px) scale(1);
  transition: transform 0.6s var(--nx-ease);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.42));
  border-radius: 3px;
}
.nx-card:hover .nx-card__shot img {
  transform: translateY(0) scale(1.055);
}
.nx-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-accent);
  border: 1px solid color-mix(in srgb, var(--p-accent) 45%, transparent);
  border-radius: 100px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.nx-card__body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nx-card__cat {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  display: block;
  margin-bottom: 8px;
}
.nx-card__name {
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.026em;
  margin: 0 0 2px;
  line-height: 1.1;
}
.nx-card__suffix {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  display: block;
  margin-bottom: 12px;
}
.nx-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--nx-text-2);
  margin: 0 0 16px;
  flex: 1;
}
.nx-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--nx-paper-3);
}
.nx-card__meta {
  font-size: 0.75rem;
  color: var(--nx-text-3);
  font-variant-numeric: tabular-nums;
}
.nx-card__go {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nx-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nx-card:hover .nx-card__go {
  color: var(--nx-gold-ink);
}

/* --------------------------------------------------------------------------
   16. Selector matrix — choose by what you need
   -------------------------------------------------------------------------- */
.nx-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--nx-paper-2);
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
.nx-matrix caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 14px;
  font-size: 0.85rem;
  color: var(--nx-text-2);
}
.nx-matrix th,
.nx-matrix td {
  padding: 0.9em 0.85em;
  text-align: left;
  border-bottom: 1px solid var(--nx-paper-3);
  vertical-align: middle;
}
.nx-matrix thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  background: var(--nx-paper);
  white-space: nowrap;
  border-bottom: 1px solid var(--nx-paper-4);
}
.nx-matrix tbody th {
  font-weight: 500;
  color: var(--nx-text);
}
.nx-matrix td {
  text-align: center;
  color: var(--nx-text-2);
}
.nx-matrix tbody tr:last-child th,
.nx-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.nx-matrix tbody tr:hover {
  background: var(--nx-gold-wash);
}
.nx-matrix .nx-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nx-paper-4);
}
.nx-matrix .nx-dot--on {
  background: var(--nx-verify);
  box-shadow: 0 0 0 3px rgba(0, 153, 79, 0.15);
}
.nx-matrix .nx-dot--best {
  background: var(--nx-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 90, 0.22);
}
.nx-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--nx-radius-lg);
}
.nx-scroll > table {
  min-width: 660px;
}

/* --------------------------------------------------------------------------
   17. Accordion — no JS, uses details/summary
   -------------------------------------------------------------------------- */
.nx-acc {
  border-top: 1px solid var(--nx-paper-4);
}
.nx-dark .nx-acc {
  border-top-color: rgba(242, 244, 240, 0.16);
}
.nx-acc details {
  border-bottom: 1px solid var(--nx-paper-4);
}
.nx-dark .nx-acc details {
  border-bottom-color: rgba(242, 244, 240, 0.16);
}
.nx-acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 1.15em 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  list-style: none;
  color: inherit;
  transition: color 0.25s var(--nx-ease-fast);
}
.nx-acc summary::-webkit-details-marker {
  display: none;
}
.nx-acc summary:hover {
  color: var(--nx-gold-ink);
}
.nx-dark .nx-acc summary:hover {
  color: var(--nx-gold-hi);
}
.nx-acc summary:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 3px;
}
.nx-acc__sign {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
}
.nx-acc__sign::before,
.nx-acc__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  opacity: 0.65;
  transition: transform 0.4s var(--nx-ease), opacity 0.3s;
}
.nx-acc__sign::before {
  width: 11px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.nx-acc__sign::after {
  width: 1.5px;
  height: 11px;
  transform: translate(-50%, -50%);
}
.nx-acc details[open] .nx-acc__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.nx-acc details[open] summary {
  color: var(--nx-gold-ink);
}
.nx-dark .nx-acc details[open] summary {
  color: var(--nx-gold-hi);
}
.nx-acc__body {
  padding: 0 0 1.5em;
  max-width: 70ch;
}
.nx-acc__body p {
  margin-bottom: 0;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   18. Product page
   -------------------------------------------------------------------------- */
.nx-prod-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.nx-prod-shot {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 40px);
}
.nx-prod-shot img {
  width: min(320px, 78%);
  border-radius: 6px;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.36), 0 60px 110px rgba(0, 0, 0, 0.44);
}
.nx-prod-shot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, 96%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--nx-field-accent) 16%, transparent) 0%, transparent 66%);
  z-index: -1;
  pointer-events: none;
}

.nx-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
}
.nx-pillars li {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.52em 0.9em;
  border: 1px solid rgba(242, 244, 240, 0.24);
  border-radius: 100px;
  color: rgba(242, 244, 240, 0.88);
}

/* Spec strip — the instrument read-out under the hero */
/* Exactly five cells, so the track count is declared rather than inferred —
   auto-fit was generating nine tracks and collapsing four of them. */
.nx-spec {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(242, 244, 240, 0.16);
  border-block: 1px solid rgba(242, 244, 240, 0.16);
}
@media (max-width: 900px) {
  .nx-spec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .nx-spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.nx-spec__cell {
  background: var(--nx-field-deep);
  padding: 20px clamp(14px, 2vw, 24px);
}
.nx-spec__k {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 244, 240, 0.55);
  display: block;
  margin-bottom: 6px;
}
.nx-spec__v {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}

/* Buy panel.
   The panel look is applied to the Divi ROW, because Divi wraps each module in
   its own div — no HTML container can span a module boundary, so the row is the
   only element that genuinely contains the Code modules and the Woo modules
   together. Everything inside is a real, working WooCommerce module. */
.et_pb_section.nx-sec.nx-buy-sec {
  background: var(--nx-paper);
  padding-block: clamp(40px, 5vw, 72px) !important;
}
.et_pb_section.nx-sec.nx-form-sec {
  background: var(--nx-paper);
  padding-block: 0 !important;
}
.et_pb_section.nx-sec > .et_pb_row.nx-formwrap,
.et_pb_row.nx-formwrap {
  width: 100% !important;
  max-width: var(--nx-max) !important;
  padding: 0 var(--nx-gut) !important;
  margin: 0 auto !important;
}
.et_pb_section.nx-sec > .et_pb_row.nx-woo-row,
.et_pb_row.nx-woo-row {
  width: 100% !important;
  max-width: var(--nx-max) !important;
  padding: 0 var(--nx-gut) !important;
  margin: 0 auto !important;
}
.et_pb_row.nx-buy,
.nx-buy {
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-paper-2);
  box-shadow: var(--nx-shadow-2);
}
.et_pb_section.nx-sec > .et_pb_row.nx-buy,
.et_pb_row.nx-buy {
  width: 100% !important;
  max-width: 640px !important;
  padding: clamp(22px, 3vw, 32px) !important;
  margin: 0 auto !important;
}
.nx-buy__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nx-paper-3);
  margin-bottom: 18px;
}
.nx-buy__promise {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--nx-paper-3);
}
.nx-buy__promise li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--nx-text-2);
}

/* Science prose */
.nx-prose {
  max-width: 68ch;
}
.nx-prose h3 {
  margin-top: 2.2em;
}
.nx-prose h3:first-child {
  margin-top: 0;
}
.nx-prose p {
  color: var(--nx-text-2);
}

/* Two-up: sticky sidebar next to long prose */
.nx-split {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.nx-split__aside {
  position: sticky;
  top: calc(var(--nx-head-h) + 28px);
}
.admin-bar .nx-split__aside {
  top: calc(var(--nx-head-h) + 60px);
}

/* Directions and cautions */
.nx-note {
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--nx-paper-2);
}
.nx-note--warn {
  background: linear-gradient(180deg, var(--nx-gold-wash), transparent 52%);
  border-color: var(--nx-gold-line);
}
.nx-note p {
  font-size: 0.875rem;
  margin-bottom: 0;
  color: var(--nx-text-2);
}

/* Mobile sticky buy bar */
.nx-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9980;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px var(--nx-gut);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--nx-paper-3);
  transform: translateY(102%);
  transition: transform 0.45s var(--nx-ease);
}
.nx-buybar.is-on {
  transform: translateY(0);
}
.nx-buybar__name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   19. Contact
   -------------------------------------------------------------------------- */
.nx-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.nx-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--nx-paper-4);
}
.nx-contact-list li {
  padding: 1.15em 0;
  border-bottom: 1px solid var(--nx-paper-4);
}
.nx-contact-list a {
  color: var(--nx-text);
  text-decoration: none !important;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  transition: color 0.25s;
}
.nx-contact-list a:hover {
  color: var(--nx-gold-ink);
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.nx-footer {
  background: var(--nx-ink);
  color: var(--nx-on-dark);
  position: relative;
}
.nx-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--nx-gold) 0%, rgba(201, 162, 90, 0) 46%);
}
.nx-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(52px, 6vw, 78px);
}
/* No white plate needed any more — the footer uses the light logo variant,
   which is transparent and already reads on ink. */
.nx-footer__logo {
  display: inline-block;
  margin-bottom: 22px;
}
.nx-footer__logo img {
  height: 38px;
  width: auto;
}
.nx-footer h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nx-gold);
  margin: 0 0 1.15em;
}
.nx-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7em;
}
.nx-footer a {
  color: var(--nx-on-dark-2);
  text-decoration: none !important;
  font-size: 0.9rem;
  transition: color 0.25s var(--nx-ease-fast);
  display: inline-block;
}
.nx-footer a:hover {
  color: var(--nx-gold-hi);
}
.nx-footer a:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 3px;
}
.nx-footer__bottom {
  border-top: 1px solid rgba(242, 244, 240, 0.13);
  padding-block: 26px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
}
.nx-footer__legal {
  font-size: 0.78rem;
  color: var(--nx-on-dark-3);
  margin: 0;
  max-width: none;
}
.nx-footer__disclaimer {
  border-top: 1px solid rgba(242, 244, 240, 0.13);
  padding-block: 22px 30px;
}
.nx-footer__disclaimer p {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--nx-on-dark-3);
  max-width: 92ch;
  margin: 0;
}

/* Newsletter */
.nx-sub {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  max-width: 380px;
}
.nx-sub input {
  flex: 1;
  min-width: 0;
  background: rgba(242, 244, 240, 0.06);
  border: 1px solid rgba(242, 244, 240, 0.2);
  border-radius: var(--nx-radius);
  padding: 0.85em 1em;
  color: var(--nx-on-dark);
  font-family: inherit;
  font-size: 0.875rem;
  transition: border-color 0.25s, background-color 0.25s;
}
.nx-sub input::placeholder {
  color: #93a096;
}
.nx-sub input:focus {
  outline: none;
  border-color: var(--nx-gold);
  background: rgba(242, 244, 240, 0.09);
}

/* --------------------------------------------------------------------------
   21. WooCommerce integration
   -------------------------------------------------------------------------- */
.nx-woo .price,
.woocommerce div.product .nx-buy p.price {
  font-size: 2rem !important;
  font-weight: 600 !important;
  color: var(--nx-text) !important;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 0 !important;
}
.nx-woo .price del {
  opacity: 0.45;
  font-size: 0.6em;
  font-weight: 400;
}
.nx-woo .price ins {
  text-decoration: none;
}

.nx-woo form.cart,
.woocommerce div.product .nx-woo form.cart {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
  align-items: stretch;
}
.nx-woo .quantity {
  flex: none;
}
.nx-woo .quantity input.qty {
  height: 100%;
  min-height: 52px;
  width: 76px;
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius);
  background: var(--nx-paper-2);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--nx-text);
  font-variant-numeric: tabular-nums;
}
.nx-woo .quantity input.qty:focus {
  outline: 2px solid var(--nx-gold);
  outline-offset: 1px;
}
.nx-woo button.single_add_to_cart_button,
.woocommerce .nx-woo button.button.alt,
.woocommerce-page .nx-woo button.button.alt {
  flex: 1 1 200px;
  min-height: 52px;
  background: var(--nx-gold-hi) !important;
  color: #1a1305 !important;
  font-family: inherit !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  border: 0 !important;
  border-radius: var(--nx-radius) !important;
  padding: 1em 1.9em !important;
  text-transform: none !important;
  box-shadow: var(--nx-shadow-1);
  transition: background-color 0.28s var(--nx-ease-fast), box-shadow 0.28s var(--nx-ease-fast),
    transform 0.28s var(--nx-ease-fast);
}
.nx-woo button.single_add_to_cart_button:hover,
.woocommerce .nx-woo button.button.alt:hover {
  background: #f3d698 !important;
  box-shadow: var(--nx-shadow-2);
  transform: translateY(-1px);
}
.nx-woo button.single_add_to_cart_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.nx-woo .stock.in-stock {
  color: var(--nx-verify-ink);
  font-size: 0.8rem;
  font-weight: 600;
  margin: 12px 0 0;
}
.nx-woo .stock.out-of-stock {
  color: #b4402c;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 12px 0 0;
}
/* Divi's Woo module wrappers add margins we do not want inside the buy panel */
.nx-buy .et_pb_module,
.nx-buy .et_pb_wc_price,
.nx-buy .et_pb_wc_add_to_cart {
  margin-bottom: 0 !important;
}

/* Woo notices, cart and checkout inherit the system */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: 'Poppins', sans-serif !important;
  border-top-color: var(--nx-gold) !important;
  border-radius: var(--nx-radius);
  font-size: 0.9rem;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: 'Poppins', sans-serif !important;
  border-radius: var(--nx-radius) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--nx-gold-hi) !important;
  color: #1a1305 !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #f3d698 !important;
  color: #1a1305 !important;
}

/* --------------------------------------------------------------------------
   22. Divi contact form, restyled
   -------------------------------------------------------------------------- */
.nx-formwrap .et_pb_contact_form_label {
  display: none;
}
.nx-formwrap .et_pb_contact_field {
  padding: 0 0 14px !important;
}
.nx-formwrap .et_pb_contact_form input[type='text'],
.nx-formwrap .et_pb_contact_form input[type='email'],
.nx-formwrap .et_pb_contact_form textarea,
.nx-formwrap .et_pb_contact_field .input {
  width: 100%;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.9375rem !important;
  background: var(--nx-paper-2) !important;
  border: 1px solid var(--nx-paper-4) !important;
  border-radius: var(--nx-radius) !important;
  padding: 1em 1.1em !important;
  color: var(--nx-text) !important;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.nx-formwrap .et_pb_contact_form input:focus,
.nx-formwrap .et_pb_contact_form textarea:focus {
  outline: none;
  border-color: var(--nx-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 90, 0.14);
}
.nx-formwrap .et_pb_contact_form input::placeholder,
.nx-formwrap .et_pb_contact_form textarea::placeholder {
  color: var(--nx-text-3) !important;
}
.nx-formwrap .et_pb_contact_submit,
.nx-formwrap .et_pb_button {
  font-family: 'Poppins', sans-serif !important;
  background: var(--nx-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--nx-radius) !important;
  padding: 1.05em 2em !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background-color 0.28s, transform 0.28s;
}
.nx-formwrap .et_pb_contact_submit:hover {
  background: var(--nx-ink-3) !important;
  transform: translateY(-1px);
  padding: 1.05em 2em !important;
}
.nx-formwrap .et_pb_contact_submit::after {
  display: none !important;
}

/* --------------------------------------------------------------------------
   23. Motion

   There is deliberately no scroll-reveal system here. Fading 16 blocks up on
   every page is the identical-entrance-everywhere habit, and it can only be
   implemented by hiding content first — which risks a flash of invisible
   content on a slow connection and shifts nothing but risk onto the visitor.

   Instead: ONE orchestrated entrance in the hero, built purely from transform
   and clip, never from opacity. If this stylesheet fails to load, or the
   animation never runs, every element is already in its final, readable
   state. `.nx-reveal` is kept in the markup as an inert opt-in hook.
   -------------------------------------------------------------------------- */
.nx-reveal {
  opacity: 1;
  transform: none;
}

@keyframes nx-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes nx-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes nx-settle {
  from {
    transform: translateY(20px) scale(0.985);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

/* The hero entrance. Each element animates from a visible default, so the
   worst case is simply no motion at all. */
.nx-hero .nx-rule--tick::after {
  transform-origin: left;
  animation: nx-draw 0.9s var(--nx-ease) both;
}
.nx-hero__inner .nx-display {
  animation: nx-rise 0.85s var(--nx-ease) 0.06s both;
}
.nx-hero__inner .nx-lead {
  animation: nx-rise 0.85s var(--nx-ease) 0.13s both;
}
.nx-hero__actions {
  animation: nx-rise 0.85s var(--nx-ease) 0.2s both;
}
.nx-standards,
.nx-pillars {
  animation: nx-rise 0.85s var(--nx-ease) 0.27s both;
}
.nx-plate,
.nx-prod-shot {
  animation: nx-settle 1.1s var(--nx-ease) 0.16s both;
}

@media (prefers-reduced-motion: reduce) {
  .nx *,
  .nx *::before,
  .nx *::after,
  .nx-mobile__panel,
  .nx-buybar {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nx-rail__panel:hover .nx-rail__shot {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.nx-stack > * + * {
  margin-top: var(--s, 1rem);
}
.nx-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.nx-center {
  text-align: center;
  margin-inline: auto;
}
.nx-center p {
  margin-inline: auto;
}
.nx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nx-head-block {
  max-width: 62ch;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.nx-head-block p:last-child {
  margin-bottom: 0;
}
.nx-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3.4vw, 52px);
}
.nx-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}

/* Skip link */
.nx-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  background: var(--nx-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--nx-radius);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: top 0.25s var(--nx-ease-fast);
}
.nx-skip:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------
   25. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .nx-footer__top {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  }
  /* A centred nav needs (content - nav) / 2 clear on BOTH sides, so the wider
     of the logo and the action group sets the requirement — and here that is
     the logo at 300px against the actions at 206px. Below about 1050px the
     content measure stops being able to give the logo that much and the nav
     runs into it: measured at -2px, -13px and -21px of clearance at 1024,
     1000 and 981.

     Six pixels off the logo's height takes it to 255px and restores 23px of
     clearance at the tightest width the desktop nav is ever shown at, which is
     981. The alternatives were worse: raising the drawer breakpoint takes the
     nav away from every 1024 tablet, and tightening the nav's tracking would
     undo the type decision at one width only. 40px / 34px / 30px across
     desktop, tight desktop and mobile is a ramp rather than a patch. */
  .nx-header__logo img {
    max-height: 34px;
  }
}

@media (max-width: 980px) {
  /* The wrapper, not just the list inside it. Hiding .nx-nav alone left the
     <nav aria-label="Primary"> element displayed with an empty box, so a
     screen reader still found a Primary navigation landmark on a phone and
     landed in it to find nothing. It painted nothing and caused no overflow,
     which is exactly why it would never have been noticed. */
  .nx-header__nav,
  .nx-header__actions .nx-btn {
    display: none;
  }
  .nx-burger {
    display: flex;
  }
  .nx-hero__grid-2,
  .nx-prod-hero__grid,
  .nx-contact-grid,
  .nx-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-split__aside {
    position: static;
  }
  .nx-ledger__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .nx-assay--two {
    columns: 1;
  }
  /* Five stacked panels would cost 2000px of scroll. A snap-scrolling strip
     keeps every carton at full height while staying one screen tall. */
  .nx-rail {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--nx-gut);
    gap: 10px;
  }
  .nx-rail::-webkit-scrollbar {
    display: none;
  }
  .nx-rail__panel {
    flex: 0 0 auto;
    width: min(74vw, 310px);
    height: 470px;
    border-right: 0;
    border-radius: var(--nx-radius-lg);
    scroll-snap-align: center;
  }
  .nx-rail__panel:hover .nx-rail__shot {
    transform: none;
  }

  /* Touch targets reach the 44px floor */
  .nx-cart,
  .nx-burger,
  .nx-mobile__close {
    width: 44px;
    height: 44px;
  }
  .nx-btn--sm {
    min-height: 44px;
  }
  .nx-prod-shot img {
    width: min(280px, 62%);
  }
  .nx-buybar {
    display: flex;
  }
}

@media (max-width: 560px) {
  /* Below this width a long ingredient name wraps and the leader dots become
     an 18px stub. Drop them and let the dose sit hard right instead. */
  .nx-assay li {
    flex-wrap: wrap;
    gap: 2px 10px;
    justify-content: space-between;
  }
  .nx-assay__lead {
    display: none;
  }
  .nx-assay__name {
    flex: 1 1 100%;
  }
  .nx-assay__dose {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  .nx {
    font-size: 16px;
  }
  :root {
    --nx-head-h: var(--nx-head-h-sm);
  }
  .admin-bar .et-l--header {
    top: 46px;
  }
  /* Tighter gaps here are not cosmetic: they are what lets the logo keep a
     useful size instead of being squeezed by the cart and burger. */
  .nx-header__bar {
    height: var(--nx-head-h-sm);
    gap: 10px;
  }
  .nx-header__actions {
    gap: 4px;
  }
  .nx-header__logo img {
    max-height: 30px;
  }
  .nx-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  .nx-vs {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-vs__col + .nx-vs__col {
    border-left: 0;
    border-top: 1px solid var(--nx-paper-4);
  }
  .nx-hero__actions .nx-btn {
    flex: 1 1 100%;
  }
  .nx-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .nx-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-sub {
    flex-direction: column;
    max-width: none;
  }
  .nx-sub .nx-btn {
    width: 100%;
  }
}

/* Print — the dossier should print like one */
@media print {
  .et-l--header,
  .nx-buybar,
  .nx-mobile,
  .nx-rail {
    display: none !important;
  }
  .nx,
  .nx-dark,
  .nx-hero {
    background: #fff !important;
    color: #000 !important;
  }
}

/* --------------------------------------------------------------------------
   26. Company components — the manufacturing side of the business
   Added when the B2B content from the previous site was brought across:
   divisions, capability panels, benefit checklists and provider trios.
   Every one of them uses the same hairline-grid trick as .nx-figures — a 1px
   gap over a border-coloured background — so the dividers stay true hairlines
   at any zoom rather than doubling up where two borders meet.
   -------------------------------------------------------------------------- */

/* Divisions register — what the laboratory actually manufactures.
   Deliberately not five identical icon cards: each entry carries an index, so
   the block reads as a register of lines rather than a feature grid. */
.nx-divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
  gap: 1px;
  background: var(--nx-paper-4);
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
.nx-dark .nx-divisions {
  background: rgba(242, 244, 240, 0.16);
  border-color: rgba(242, 244, 240, 0.16);
}

.nx-division {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--nx-paper-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--nx-dur) var(--nx-ease);
}
.nx-dark .nx-division {
  background: var(--nx-ink-2);
}
.nx-division:hover,
.nx-division:focus-visible {
  background: var(--nx-gold-wash);
}
.nx-dark .nx-division:hover,
.nx-dark .nx-division:focus-visible {
  background: var(--nx-ink-3);
}
/* The accent draws in from the left edge rather than fading, which matches
   the hairline rule's own entrance elsewhere on the page. */
.nx-division::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--nx-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nx-dur) var(--nx-ease);
}
.nx-division:hover::before,
.nx-division:focus-visible::before {
  transform: scaleX(1);
}

.nx-division__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.2rem;
}
.nx-division__idx {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--nx-text-3);
  font-variant-numeric: tabular-nums;
}
.nx-dark .nx-division__idx {
  color: var(--nx-on-dark-3);
}
.nx-division__icon {
  display: inline-flex;
  color: var(--nx-verify-ink);
}
.nx-dark .nx-division__icon {
  color: var(--nx-gold-hi);
}
.nx-division__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--nx-text);
}
.nx-dark .nx-division__name {
  color: var(--nx-on-dark);
}
.nx-division__desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--nx-text-2);
}
.nx-dark .nx-division__desc {
  color: var(--nx-on-dark-2);
}
.nx-division__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nx-division__tags span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  border: 1px solid var(--nx-paper-4);
  border-radius: 100px;
  padding: 0.34em 0.7em;
  white-space: nowrap;
}
.nx-dark .nx-division__tags span {
  color: var(--nx-on-dark-3);
  border-color: rgba(242, 244, 240, 0.2);
}
/* margin-top:auto pins the link to the bottom, so cards carrying unequal copy
   still line their links up across the row. */
.nx-division__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-gold-ink);
}
.nx-dark .nx-division__go {
  color: var(--nx-gold-hi);
}
.nx-division__go .nx-arrow {
  transition: transform var(--nx-dur) var(--nx-ease);
}
.nx-division:hover .nx-division__go .nx-arrow {
  transform: translateX(4px);
}

/* Benefit checklist. Works on both grounds, unlike .nx-standards which is
   hero-dark only, and takes a bold lead-in so a benefit can state itself
   before it explains itself. */
.nx-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem;
}
.nx-checks > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--nx-text-2);
}
.nx-checks .nx-tick {
  width: 17px;
  height: 17px;
  margin-top: 0.24em;
  color: var(--nx-verify-ink);
}
.nx-dark .nx-checks > li {
  color: var(--nx-on-dark-2);
}
.nx-dark .nx-checks .nx-tick {
  color: var(--nx-gold-hi);
}
.nx-checks strong {
  color: var(--nx-text);
  font-weight: 600;
}
.nx-dark .nx-checks strong {
  color: var(--nx-on-dark);
}

/* Three-up reason cells. The tight variant drops the body copy and is used
   for the roster of who the laboratory supplies. */
.nx-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: var(--nx-paper-4);
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
.nx-dark .nx-trio {
  background: rgba(242, 244, 240, 0.16);
  border-color: rgba(242, 244, 240, 0.16);
}
.nx-trio__cell {
  background: var(--nx-paper-2);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.nx-dark .nx-trio__cell {
  background: var(--nx-ink-2);
}
.nx-trio__icon {
  display: inline-flex;
  color: var(--nx-verify-ink);
  margin-bottom: 0.2rem;
}
.nx-dark .nx-trio__icon {
  color: var(--nx-gold-hi);
}
.nx-trio__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nx-text);
  margin: 0;
}
.nx-dark .nx-trio__name {
  color: var(--nx-on-dark);
}
.nx-trio__body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--nx-text-2);
  margin: 0;
}
.nx-dark .nx-trio__body {
  color: var(--nx-on-dark-2);
}
.nx-trio--tight {
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
}
.nx-trio--tight .nx-trio__cell {
  padding: clamp(18px, 2vw, 24px);
  gap: 0.5rem;
}
.nx-trio--tight .nx-trio__name {
  font-size: 0.9375rem;
}

/* Light-ground counterpart to .nx-plate, for spec panels that sit on paper
   rather than on the dark field. Same head, rule and reference anatomy, so a
   panel reads identically whichever ground it lands on. */
.nx-panel {
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-paper);
  padding: clamp(22px, 3vw, 34px);
}
.nx-light .nx-panel {
  background: var(--nx-paper-2);
}
.nx-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nx-paper-4);
  margin-bottom: 18px;
}
.nx-panel__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nx-text);
  margin: 0;
}
.nx-panel__ref {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nx-gold-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Entrance, in step with the hero's own timing curve. */
.nx-division,
.nx-trio__cell {
  animation: nx-rise 0.7s var(--nx-ease) both;
}

/* Column counts for these grids are declared in section 27, together, because
   they have to be chosen against the item counts rather than independently. */

@media (prefers-reduced-motion: reduce) {
  .nx-division,
  .nx-trio__cell {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   27. Hairline grids — make the item count fill the track
   These grids draw their dividers by showing a container painted in the
   divider colour through a 1px gap. It is the right mechanism and it gives an
   exact 1px line everywhere, but it is only correct while the item count is a
   multiple of the column count. It was not: five divisions in a four-column
   auto-fit track left three empty cells, and each one rendered as a solid
   block of divider colour — a third of the register showing as grey.

   The fix is the count, not the mechanism. Column counts below are declared
   rather than inferred from a minmax, and chosen against the item counts the
   components actually carry, so every row fills at every width.

   Drawing the divider from each cell instead looks like the more robust
   answer and is not: a 1px box-shadow offset into the next cell is painted
   behind that cell's own background, so the sibling covers it and the seam
   disappears entirely. Cell borders do paint, but then the outer column and
   row double up against the container's own border. Filling the track keeps
   one mechanism and one pixel.

   check-pages.mjs measures the ratio of cell area to container area on every
   one of these grids at six widths, and fails below 95%, so a future change to
   an item count cannot reintroduce this silently.
   -------------------------------------------------------------------------- */

/* Column counts are declared rather than inferred, so the row always fills.
   The register carried six cells until 14 September 2026 and now carries
   three, so the two-column step in the middle had to go with them: three
   cells across two columns is two-plus-one, and the empty cell would paint as
   a block of divider colour. Three and one are the only counts that fill a
   three-cell register, which is the same constraint .nx-trio has. */
.nx-divisions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .nx-divisions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Trios always hold three arguments, so the only counts that fill a row are
   three and one. auto-fit was landing on two at tablet width and rendering
   the third cell alone in a half-empty row; three cells of 230px is too
   narrow for the body copy anyway, so it stacks instead. */
.nx-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .nx-trio {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The tight variant carries either a roster of six names or a set of three,
   so three columns and one column are the only counts that fill both. It
   keeps three across even at 860px — the cells hold two or three words, not a
   paragraph — and stacks below that rather than going to two, which would
   leave the three-item case one cell short of a full row. */
.nx-trio--tight {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Restated after the .nx-trio stack rule above, which would otherwise take
   the tight variant down to one column at 860px along with it. */
@media (max-width: 860px) {
  .nx-trio--tight {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .nx-trio--tight {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Figures carry three cells, or four on the Science page. auto-fit collapses
   its spare tracks, so at full width both counts land on a single filled row.
   The band that breaks is the middle: around 900px the track fits three and
   four cells become three-plus-one. And auto-fit cannot know it is inside the
   narrow column of a two-column band at all, where three cells become
   two-plus-one at any viewport width.

   So the narrow call sites say --stack explicitly, and everything at or below
   1000px stacks — which covers the middle band rather than leaving a hole in
   it between the breakpoints that get tested. */
.nx-figures--stack {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 1000px) {
  .nx-figures {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The product spec strip is the one grid whose count cannot be made to fill:
   it is exactly five cells, and five divides by neither the three columns it
   takes at 900px nor the two it takes at 560px. Stacking five rows under the
   product hero costs too much height on a phone, so this one draws its
   dividers from the cells after all. A border, not a shadow — a border is
   inside the cell's own box, so the next cell cannot paint over it. The outer
   column and row double against the container's own hairline, which at 16%
   alpha on the near-black hero is not a difference you can see. */
.nx-spec {
  gap: 0;
  background: transparent;
}
.nx-spec__cell {
  border-right: 1px solid rgba(242, 244, 240, 0.16);
  border-bottom: 1px solid rgba(242, 244, 240, 0.16);
}

/* The contract-manufacturing card that completes the register. It is an
   invitation rather than a division, so it carries the gold wash from the
   start instead of only on hover. */
.nx-division--cta {
  background: var(--nx-gold-tint);
}
.nx-dark .nx-division--cta {
  background: var(--nx-gold-tint-dark);
}
.nx-division--cta::before {
  transform: scaleX(1);
}
.nx-division--cta .nx-division__icon {
  color: var(--nx-gold-ink);
}
.nx-division--cta:hover,
.nx-division--cta:focus-visible {
  background: var(--nx-gold-tint-hi);
}
/* On the dark ground the tint is dark enough that the 10px tag text needs the
   brighter of the two muted colours to clear 4.5:1. */
.nx-dark .nx-division--cta .nx-division__tags span,
.nx-dark .nx-division--cta .nx-division__idx {
  color: var(--nx-on-dark-2);
}

/* --------------------------------------------------------------------------
   28. Duotone plates — photography that belongs to this palette
   Every photograph NexGen owns is lit cyan or violet. Dropped in raw, each one
   fights the gold it sits next to and the page stops looking like one design.
   So no photograph is shown as itself: build/photos.mjs flattens it to a
   greyscale plate, and this maps that plate onto the house ramp — shadows fall
   to ink, highlights are glazed gold.

   screen over an ink ground keeps the blacks at ink rather than crushing them;
   multiply with gold tints only what survived, so the glaze lands on highlights
   and leaves the shadows alone. `isolation` keeps both inside the frame — a
   blend mode with no stacking context of its own reaches the whole page.
   -------------------------------------------------------------------------- */
.nx-duo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--nx-ink);
}
/* Qualified by the block rather than left as a bare component class: the base
   reset is `.nx img { height: auto }`, which at one class plus one type outranks
   a lone component class. Unqualified, the plate kept its intrinsic height and
   left a band of bare ink under every photograph — 158px of it on the hero. */
.nx-duo .nx-duo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--duo-pos, 50% 50%);
  filter: brightness(var(--duo-exposure, 0.66)) contrast(var(--duo-contrast, 1.04));
  mix-blend-mode: screen;
  z-index: 0;
}
.nx-duo__glaze {
  position: absolute;
  inset: 0;
  background: var(--nx-gold);
  mix-blend-mode: multiply;
  opacity: var(--duo-glaze, 0.62);
  z-index: 1;
  pointer-events: none;
}
/* The scrim is what actually buys the text its contrast, so it is a declared
   part of the component rather than something each section re-invents. */
.nx-duo__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
      98deg,
      rgba(11, 16, 13, 0.95) 0%,
      rgba(11, 16, 13, 0.9) 44%,
      rgba(11, 16, 13, 0.52) 74%,
      rgba(11, 16, 13, 0.28) 100%
    ),
    linear-gradient(to top, rgba(11, 16, 13, 0.45) 0%, transparent 34%);
}
.nx-duo__scrim--even {
  background: linear-gradient(to top, rgba(11, 16, 13, 0.9) 0%, rgba(11, 16, 13, 0.64) 52%, rgba(11, 16, 13, 0.76) 100%);
}
.nx-duo__body {
  position: relative;
  z-index: 3;
}

/* Where a plate sits on paper rather than filling a band, it keeps the frame
   and the radius of every other panel in the system. */
.nx-duo--panel {
  border-radius: var(--nx-radius-lg);
  border: 1px solid var(--nx-paper-4);
}

/* The one authored moment on the site: the hero plate develops.
   It starts as flat ink — never as nothing, so there is no blank frame and no
   layout shift — and the photograph rises out of it while the gold comes up
   behind. Everything else on the page is already at rest when it arrives. */
@keyframes nx-develop {
  from {
    opacity: 0;
    transform: scale(1.055);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nx-glaze {
  from {
    opacity: 0;
  }
}
.nx-duo--develop .nx-duo__img {
  animation: nx-develop 1.6s var(--nx-ease) both;
}
.nx-duo--develop .nx-duo__glaze {
  animation: nx-glaze 2.1s var(--nx-ease) 0.15s both;
}

/* --------------------------------------------------------------------------
   29. Landing page
   -------------------------------------------------------------------------- */
.nx-land {
  display: flex;
  align-items: center;
  min-height: clamp(520px, 78vh, 820px);
}
.nx-land__inner {
  width: 100%;
  padding-block: clamp(72px, 12vh, 140px);
}
.nx-land__title {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.038em;
  font-weight: 600;
  color: #fff;
  margin: 0 0 1.1rem;
  max-width: 17ch;
}
.nx-land__lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  /* Full strength rather than the 86% the flat dark bands use: measured against
     the actual photograph behind it, 86% fell to 4.1:1 on desktop and 2.5:1 on
     a phone, where the stacked layout puts text over the bright half. */
  color: var(--nx-on-dark);
  max-width: 54ch;
  margin: 0 0 2.2rem;
}

/* The divisions as an index of lines, not a row of cards. Each line is the
   whole target, the rule under it is the only chrome, and the gold arrow is
   what moves. */
.nx-index {
  border-top: 1px solid var(--nx-paper-4);
}
.nx-dark .nx-index {
  border-top-color: rgba(242, 244, 240, 0.18);
}
.nx-index__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--nx-paper-4);
  text-decoration: none;
  color: inherit;
  /* transform, not padding: animating an inset relays out the row on every
     frame of the hover. */
  transition: transform var(--nx-dur) var(--nx-ease);
}
.nx-dark .nx-index__row {
  border-bottom-color: rgba(242, 244, 240, 0.18);
}
.nx-index__row:hover,
.nx-index__row:focus-visible {
  transform: translateX(10px);
}
.nx-index__name {
  font-size: clamp(1.18rem, 2.1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--nx-text);
  display: block;
  margin-bottom: 0.4rem;
}
.nx-dark .nx-index__name {
  color: var(--nx-on-dark);
}
.nx-index__note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--nx-text-2);
  display: block;
  max-width: 46ch;
}
.nx-dark .nx-index__note {
  color: var(--nx-on-dark-2);
}
.nx-index__go {
  color: var(--nx-gold-ink);
  display: inline-flex;
  align-self: center;
  transition: transform var(--nx-dur) var(--nx-ease);
}
.nx-dark .nx-index__go {
  color: var(--nx-gold-hi);
}
.nx-index__row:hover .nx-index__go,
.nx-index__row:focus-visible .nx-index__go {
  transform: translateX(6px);
}

/* The range strip: five cartons in full colour against the monochrome
   photography everywhere else. The only saturated thing on the page, which is
   the point — the product is what you are meant to look at. */
.nx-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 26px);
  align-items: end;
}
.nx-strip__item {
  text-decoration: none;
  color: inherit;
  display: block;
  text-align: center;
}
.nx-strip__shot {
  display: block;
  position: relative;
  border-radius: var(--nx-radius-lg);
  background: linear-gradient(170deg, var(--p-lift, #1b241e), var(--p-deep, #0b100d));
  padding: clamp(14px, 1.8vw, 24px) 0 0;
  overflow: hidden;
  transition: transform var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
  box-shadow: var(--nx-shadow-1);
}
.nx-strip__item:hover .nx-strip__shot,
.nx-strip__item:focus-visible .nx-strip__shot {
  transform: translateY(-6px);
  box-shadow: var(--nx-shadow-3);
}
.nx-strip__shot img {
  display: block;
  width: 78%;
  height: auto;
  margin: 0 auto -6%;
}
.nx-strip__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nx-text);
  margin-top: 0.85rem;
}
.nx-strip__cat {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  margin-top: 0.2rem;
}

/* Credentials at display size, because on a landing page they are the argument
   rather than a footnote. */
.nx-creds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.nx-creds__item {
  border-top: 1px solid rgba(242, 244, 240, 0.24);
  padding-top: 1rem;
}
.nx-creds__v {
  display: block;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--nx-gold-hi);
  line-height: 1.1;
}
.nx-creds__l {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  /* The muted on-dark tone clears 4.5:1 on flat ink and not on a plate. */
  color: var(--nx-on-dark);
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .nx-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nx-strip__item:nth-child(4) {
    grid-column: 1 / 2;
  }
}
@media (max-width: 620px) {
  .nx-land__title {
    max-width: none;
  }
  .nx-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx-strip__item:nth-child(4) {
    grid-column: auto;
  }
  .nx-strip__item:nth-child(5) {
    grid-column: 1 / -1;
    max-width: 52%;
    margin-inline: auto;
  }
  .nx-creds {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-duo--develop .nx-duo__img,
  .nx-duo--develop .nx-duo__glaze {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   30. Browser surfaces
   The parts nobody draws still ship with somebody's defaults. Selection, the
   caret and the scrollbar were arriving in the browser's blue on a site that
   has no blue in it.
   -------------------------------------------------------------------------- */
.nx ::selection,
.nx-header ::selection,
.nx-footer ::selection {
  background: var(--nx-gold);
  color: #0b100d;
}
.nx input,
.nx textarea {
  caret-color: var(--nx-gold-ink);
}
.nx-dark input,
.nx-dark textarea {
  caret-color: var(--nx-gold-hi);
}
@supports (scrollbar-color: red blue) {
  .nx-scroll,
  .nx-rail {
    scrollbar-color: var(--nx-gold-line) transparent;
    scrollbar-width: thin;
  }
}

/* Below the two-column breakpoint every band stacks, so text crosses the whole
   plate and a directional scrim protects nothing. The veil goes flat instead. */
.nx-duo .nx-lead,
.nx-duo p {
  color: var(--nx-on-dark);
}
@media (max-width: 900px) {
  /* A flat veil heavy enough to carry 4.5:1 erases the photograph, which is the
     whole reason the band exists. Cap the plate's highlights instead and let the
     veil stay light: the picture survives, and the brightest pixel under body
     text still lands below the luminance 4.5:1 needs. */
  .nx-duo {
    --duo-exposure: 0.4;
  }
  .nx-duo__scrim,
  .nx-duo__scrim--even {
    background: linear-gradient(rgba(11, 16, 13, 0.6) 0%, rgba(11, 16, 13, 0.68) 100%);
  }
}

/* --------------------------------------------------------------------------
   31. Enquiry basket
   Nothing is sold here, so none of this is a shop. It is a list a visitor
   builds and then hands to the contact form, and it borrows the dossier's own
   furniture — hairline rules, tabular references, the gold action — rather
   than importing a cart's.
   -------------------------------------------------------------------------- */

/* Quantity stepper. Shared by the product panel and the list. */
.nx-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius);
  background: var(--nx-paper-2);
  overflow: hidden;
  flex: none;
}
.nx-qty__step {
  width: 38px;
  border: 0;
  background: transparent;
  color: var(--nx-text-2);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease);
}
.nx-qty__step:hover {
  background: var(--nx-gold-wash);
  color: var(--nx-text);
}
.nx-qty__input {
  width: 46px;
  border: 0;
  border-inline: 1px solid var(--nx-paper-4);
  text-align: center;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nx-text);
  background: transparent;
  padding: 0.7em 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* The spinners are the browser's, not ours, and they crowd a 46px field. */
.nx-qty__input::-webkit-outer-spin-button,
.nx-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The add control in a product page's buy panel. */
.nx-enq {
  margin-top: 1.4rem;
}
.nx-enq__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nx-enq__row .nx-btn {
  flex: 1 1 auto;
  justify-content: center;
}
/* Reserves its line from the start, so confirming an add does not move the
   promise list underneath it. */
.nx-enq__note {
  margin: 0.75rem 0 0;
  min-height: 1.3em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nx-verify-ink);
  opacity: 0;
  transition: opacity var(--nx-dur) var(--nx-ease);
}
.nx-enq__note.is-on {
  opacity: 1;
}

/* The list itself. */
.nx-enqlist__empty {
  border: 1px dashed var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  padding: clamp(32px, 5vw, 60px);
  text-align: center;
}
.nx-enqtable {
  border: 1px solid var(--nx-paper-4);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-paper-2);
  overflow: hidden;
}
.nx-enqrow {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2vw, 24px);
  border-bottom: 1px solid var(--nx-paper-3);
}
.nx-enqrow:last-child {
  border-bottom: 0;
}
.nx-enqrow__shot {
  display: block;
  border-radius: var(--nx-radius);
  background: var(--nx-ink);
  overflow: hidden;
  line-height: 0;
}
.nx-enqrow__shot img {
  width: 100%;
  height: auto;
  display: block;
}
.nx-enqrow__name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--nx-text);
  text-decoration: none;
}
.nx-enqrow__name span {
  font-weight: 400;
  color: var(--nx-text-3);
}
.nx-enqrow__name:hover {
  color: var(--nx-gold-ink);
}
.nx-enqrow__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--nx-text-3);
  margin-top: 0.25rem;
}
.nx-enqrow__remove {
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--nx-radius);
  background: transparent;
  color: var(--nx-text-3);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.nx-enqrow__remove:hover {
  color: var(--nx-text);
  border-color: var(--nx-paper-4);
}
.nx-enqfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vw, 30px);
}
.nx-enqclear {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

/* The same list, restated on the contact page above the form. */
.nx-enqsum {
  border: 1px solid var(--nx-gold-line);
  border-radius: var(--nx-radius-lg);
  background: var(--nx-gold-tint);
  padding: clamp(18px, 2.4vw, 26px);
  margin-bottom: 1.8rem;
}
.nx-enqsum__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0.9rem;
}
.nx-enqsum__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.nx-enqsum__list li {
  font-size: 0.9375rem;
  color: var(--nx-text);
}
.nx-enqsum__ref {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--nx-text-3);
}

@media (max-width: 620px) {
  .nx-enqrow {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    row-gap: 14px;
  }
  /* The stepper drops to its own line under the name rather than squeezing a
     four-column row into 320px. */
  .nx-enqrow .nx-qty {
    grid-column: 2 / 3;
  }
  .nx-enqrow__remove {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    align-self: start;
  }
  .nx-enqfoot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .nx-enqfoot .nx-cluster {
    flex-direction: column;
  }
  .nx-enqfoot .nx-btn {
    justify-content: center;
  }
}