/* ==========================================================================
   NuXtrax 2026 rebuild — site styles
   Builds on the tokens and components in /assets/css/nuxtrax-2026.css.
   Nothing from the legacy Porto theme is loaded on these pages.
   ========================================================================== */

/* The scroll-reveal system parks [data-nx-reveal="right"] elements 48px to
   the right of where they land, and holds them there until they scroll into
   view. On a narrow viewport that 48px sticks out past the right edge, so the
   page gains a horizontal scrollbar — which iOS draws as a grey overlay bar
   that reappears every time you scroll, because there is always something
   below still waiting to reveal. Reported from a phone, 25 Sep 2026.

   Both rules below are needed, and each keyword is deliberate. Measured
   every combination against the live page:

     html:hidden alone ............ still scrolls sideways
     body:clip alone .............. still scrolls sideways
     body:hidden alone ............ still scrolls sideways
     html:hidden + body:clip ...... fixed, both sticky bars intact
     html:hidden + body:hidden .... fixed, but the sticky header dies

   html takes `hidden` because only hidden propagates from the root to the
   viewport; `clip` there computes and does nothing. body takes `clip` rather
   than `hidden` because clip does not create a scroll container, so the
   sticky header and the sticky jump nav go on resolving against the viewport.

   No `hidden` fallback for browsers without `clip` (pre-Safari 16): that
   would trade a working sticky header for a cosmetic scrollbar, which is the
   wrong way round. The reveal motion is untouched either way. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--nx-font-ui);
  color: var(--nx-text);
  background: var(--nx-white);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
/* UA gives figure and blockquote a 40px inline margin, which shrinks any
   grid item built on them — it cost the testimonial cards ~80px each. */
figure, blockquote, h1, h2, h3, h4, p, ul, address { margin: 0; }
ul { padding: 0; }

/* Interim grading for legacy photography — pulls existing shots toward the
   palette until the client's regraded imagery lands (§12). Remove then. */
.nx-graded { filter: saturate(0.88) contrast(1.02) sepia(0.06); }

/* --------------------------------------------------------------------------
   HEADER — Variation C
   -------------------------------------------------------------------------- */

.nxh__bar {
  position: sticky; top: 0; z-index: var(--nx-z-header);
  background: var(--nx-forest-800);
}
.nxh__inner {
  max-width: var(--nx-container);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: var(--nx-space-6);
  transition: min-height var(--nx-dur-base) var(--nx-ease);
}
.nxh__bar.is-stuck .nxh__inner { min-height: 56px; }
.nxh__bar.is-stuck .nxh__tag { opacity: 0; }

.nxh__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.nxh__burst { width: 34px; height: 34px; flex-shrink: 0; transition: width var(--nx-dur-base) var(--nx-ease); }
.nxh__bar.is-stuck .nxh__burst { width: 26px; }
.nxh__wordmark { display: grid; gap: 2px; }
.nxh__wm {
  font-weight: 300; font-size: 1.22rem; letter-spacing: .13em;
  line-height: 1; color: #fff; white-space: nowrap;
}
.nxh__wm em { font-style: normal; color: var(--nx-gold-500); }
.nxh__tag {
  font-size: .5rem; font-weight: 600; letter-spacing: .22em; line-height: 1;
  color: rgba(255,255,255,.6); white-space: nowrap;
  transition: opacity var(--nx-dur-base) var(--nx-ease);
}

.nxh__nav { display: flex; align-items: center; gap: 26px; }
.nxh__nav a {
  color: rgba(255,255,255,.86); text-decoration: none;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--nx-dur-base) var(--nx-ease), border-color var(--nx-dur-base) var(--nx-ease);
}
.nxh__nav a:hover { color: #fff; border-bottom-color: var(--nx-gold-500); }
.nxh__nav a[aria-current] { color: var(--nx-gold-500); border-bottom-color: var(--nx-gold-500); }
.nxh__nav a:focus-visible, .nxh__icon:focus-visible, .nxlang__btn:focus-visible {
  outline: none; box-shadow: var(--nx-focus-ring-on-dark); border-radius: 3px;
}

.nxh__utils { margin-left: auto; display: flex; align-items: center; gap: var(--nx-space-2); }

.nxh__icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--nx-radius-sm); color: rgba(255,255,255,.8); text-decoration: none;
  transition: background var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease);
}
.nxh__icon:hover { background: rgba(255,255,255,.1); color: #fff; }
.nxh__icon svg { width: 17px; height: 17px; }

.nxbuy {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 24px; border-radius: var(--nx-radius-pill);
  /* Outline on dark, not gold. Gold is reserved for the enrolment action
     (Become a Transformation Affiliate) so it reads as the single primary
     everywhere — client direction, 12 Aug 2026. Keeps §07's one-gold-per-
     viewport rule intact now that the sticky bar is always on screen. */
  background: transparent; color: var(--nx-white); text-decoration: none;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .45); white-space: nowrap;
  transition: background var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease),
              border-color var(--nx-dur-base) var(--nx-ease);
}
.nxbuy:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: var(--nx-white); }
.nxbuy:focus-visible { outline: none; box-shadow: var(--nx-focus-ring-on-dark); }
.nxbuy svg { width: 15px; height: 15px; }

.nxh__burger {
  display: none; background: none; border: 0; color: #fff; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--nx-radius-sm); place-items: center;
}
.nxh__burger:hover { background: rgba(255,255,255,.1); }
.nxh__burger svg { width: 22px; height: 22px; }

/* Language control */
.nxlang { position: relative; }
.nxlang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 7px 9px;
  border-radius: var(--nx-radius-sm); color: rgba(255,255,255,.82);
  font-family: var(--nx-font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
}
.nxlang__btn:hover { color: var(--nx-gold-500); background: rgba(255,255,255,.06); }
.nxlang__btn svg { width: 14px; height: 14px; }
.nxlang__caret { width: 9px !important; height: 9px !important; opacity: .65; }
.nxlang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--nx-white); border: var(--nx-border); border-radius: var(--nx-radius-md);
  box-shadow: var(--nx-shadow-lg); list-style: none; margin: 0; padding: 6px;
  min-width: 170px; z-index: var(--nx-z-overlay);
}
.nxlang__menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 8px 12px; border-radius: var(--nx-radius-xs);
  font-family: var(--nx-font-ui); font-size: .875rem; color: var(--nx-text);
}
.nxlang__menu button:hover { background: var(--nx-cream); color: var(--nx-forest-800); }
.nxlang__menu button[aria-selected="true"] { color: var(--nx-gold-700); font-weight: 600; }

/* Sponsor band */
.nxband { background: var(--nx-cream); border-bottom: var(--nx-border); }
.nxband__inner {
  max-width: var(--nx-container); margin-inline: auto;
  padding: var(--nx-space-4) var(--nx-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-space-5);
}
.nxband--ctaonly .nxband__inner { justify-content: center; }
.nxband__badges { display: flex; align-items: center; gap: 10px; }
.nxband__badges img { height: 52px; width: auto; display: block; }
.nxband__id { display: grid; gap: 3px; }
.nxband__eyebrow {
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nx-gold-700);
}
.nxband__name { font-family: var(--nx-font-display); font-size: 1.22rem; color: var(--nx-forest-800); line-height: 1.2; }
.nxband__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8125rem; color: var(--nx-ink-muted); }
.nxband__meta a { color: var(--nx-ink-muted); text-decoration: none; border-bottom: 1px solid var(--nx-gold-300); }
.nxband__meta a:hover { color: var(--nx-forest-800); }
.nxband__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.nxband--ctaonly .nxband__ctas { margin-left: 0; }

.nxcta {
  display: grid; gap: 2px; align-content: center;
  padding: 11px 22px; border: 1px solid var(--nx-forest-800);
  border-radius: var(--nx-radius-sm); text-decoration: none; background: var(--nx-white);
  transition: background var(--nx-dur-base) var(--nx-ease);
}
.nxcta:hover { background: var(--nx-forest-800); }
.nxcta:hover .nxcta__t, .nxcta:hover .nxcta__s { color: #fff; }
.nxcta:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }
.nxcta__t {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nx-forest-800); line-height: 1.3;
}
.nxcta__s { font-size: .625rem; color: var(--nx-ink-subtle); line-height: 1.3; }

/* The enrolment CTA in the band carries the gold — client direction, 14 Aug 2026.
   Puts gold above the fold on every page. Note this knowingly exceeds §07's
   one-gold-per-viewport rule: at scroll 0 on a product page the band gold and
   the in-page gold are both visible. They are the same action and the same
   destination, so they reinforce rather than compete — which is the condition
   §07 exists to prevent. The band scrolls away on first scroll, leaving one. */
.nxcta--gold { background: var(--nx-gold-500); border-color: var(--nx-gold-500); }
.nxcta--gold .nxcta__t { color: var(--nx-forest-900); }
.nxcta--gold:hover { background: var(--nx-gold-600); border-color: var(--nx-gold-600); }
.nxcta--gold:hover .nxcta__t, .nxcta--gold:hover .nxcta__s { color: var(--nx-white); }

/* Mobile drawer */
.nxdrawer { position: fixed; inset: 0; z-index: var(--nx-z-modal); }
.nxdrawer[hidden] { display: none; }
.nxdrawer__scrim { position: absolute; inset: 0; background: rgba(22,33,28,.55); }
.nxdrawer__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: min(340px, 86vw); background: var(--nx-forest-900);
  overflow-y: auto; padding-bottom: var(--nx-space-6);
  animation: nxslide var(--nx-dur-slow) var(--nx-ease-out);
}
@keyframes nxslide { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .nxdrawer__panel { animation: none; } }
.nxdrawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--nx-space-4) var(--nx-space-5);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nxdrawer__x { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.nxdrawer__x svg { width: 20px; height: 20px; display: block; }
.nxdrawer__panel > a {
  display: block; padding: 13px var(--nx-space-5); color: #fff; text-decoration: none;
  font-size: .875rem; font-weight: 600; letter-spacing: .05em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nxdrawer__panel > a:hover { background: rgba(200,162,77,.14); color: var(--nx-gold-500); }
.nxdrawer__grp {
  margin: var(--nx-space-5) 0 4px; padding: 0 var(--nx-space-5);
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nx-gold-500);
}
.nxdrawer__sponsor { display: flex; gap: 12px; align-items: center; padding: 8px var(--nx-space-5) 14px; }
.nxdrawer__sponsor img { border-radius: var(--nx-radius-pill); }
.nxdrawer__sponsor div { display: grid; gap: 3px; }
.nxdrawer__sponsor span { color: #fff; font-size: .875rem; font-weight: 600; }
.nxdrawer__sponsor a { color: var(--nx-gold-500); font-size: .8125rem; text-decoration: none; }

@media (max-width: 1024px) {
  .nxh__nav { display: none; }
  .nxh__burger { display: grid; order: -1; }
  .nxh__tag { display: none; }
  .nxband__inner { justify-content: center; text-align: center; }
  .nxband__ctas { margin-left: 0; width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .nxbuy span, .nxlang__btn span { display: none; }
  .nxbuy { padding: 0 16px; }
  .nxband__ctas .nxcta { flex: 1 1 100%; text-align: center; justify-items: center; }
  /* Same treatment as the sponsor band above: stack full width rather than
     forcing the row wider than the screen. */
  .nxjoin__actions { width: 100%; }
  .nxjoin__actions .nx-btn { flex: 1 1 100%; }

  /* The bar runs out of room well before this width. Hiding the nav is not
     enough on its own: the 32px inner gaps and a logo locked at flex-shrink:0
     together demand more than a 320px screen has, so the whole document picks
     up a horizontal scroll. Tighten the rhythm, let the wordmark scale, and
     drop the account icon — "Log In" is already in the drawer, so nothing
     becomes unreachable. */
  .nxh__inner { gap: var(--nx-space-3); }
  .nxh__logo { flex-shrink: 1; min-width: 0; gap: 8px; }
  .nxh__burst { width: 28px; }
  .nxh__bar.is-stuck .nxh__burst { width: 24px; }
  .nxh__wm { font-size: clamp(.8rem, 3.4vw, 1.22rem); letter-spacing: .1em; }
  .nxh__icon { display: none; }
}

/* --------------------------------------------------------------------------
   HERO — client-supplied banner
   --------------------------------------------------------------------------
   A LIGHT hero, deliberately. The banner is a pale outdoor scene with a white
   band baked along its bottom edge, so it was drawn to sit on a white page.
   Forcing it onto the forest ground would fight both. Copy sits in the pale
   left third in forest green, which clears 9:1 there without a heavy scrim.
   -------------------------------------------------------------------------- */

.nxhero { position: relative; background: var(--nx-white); overflow: hidden; }

/* Six client banners (Sep 2026) cross-fade in place. They are all 1280x640
   and composed alike — subject left of centre, product trio bottom right on a
   white band — so one aspect-ratio box holds every one of them and the copy
   overlay never has to move. The box owns the height; the slides stack inside
   it absolutely, so swapping slides cannot shift the page. */
.nxhero__slides { position: relative; aspect-ratio: 2 / 1; }

.nxhero__bg {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.94) contrast(1.03);   /* light warm grade; skin stays true */
  opacity: 0; transition: opacity 900ms var(--nx-ease);
}
.nxhero__bg.is-current { opacity: 1; }
/* No JS: the first slide is the hero, exactly as before the rotator existed. */
.nxhero__slides:not([data-hero-rotator]) .nxhero__bg:first-child,
.nxhero__bg:only-child { opacity: 1; }

/* Dots live inside the copy block, so they land in the pale left third on
   desktop and under the button once the hero stacks — never over the product
   trio bottom right, and never needing their own gutter maths. */
.nxhero__dots { display: flex; gap: var(--nx-space-3); }
.nxhero__dots:empty { display: none; }
.nxhero__dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--nx-forest-800); background: transparent;
  transition: background-color var(--nx-dur-base) var(--nx-ease);
}
.nxhero__dots button[aria-selected="true"] { background: var(--nx-gold-500); border-color: var(--nx-gold-500); }
.nxhero__dots button:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }

/* Someone who has asked for less motion gets slide one and no cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .nxhero__bg { transition: none; }
}

/* Lifts the left third just enough to guarantee contrast on every crop,
   without flattening the haze the photograph is built on. */
.nxhero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(250, 248, 243, .93) 0%,
    rgba(250, 248, 243, .78) 26%,
    rgba(250, 248, 243, .28) 44%,
    rgba(250, 248, 243, 0)   58%);
}

.nxhero__overlay { position: absolute; inset: 0; display: grid; align-items: center; }
.nxhero__overlay > .nx-container { width: 100%; }
.nxhero__copy { max-width: min(48%, 620px); display: grid; gap: var(--nx-space-6); }

.nxhero__h { margin: 0; display: grid; gap: var(--nx-space-2); }
.nxhero__lead {
  font-family: var(--nx-font-display); font-weight: 400;
  font-size: clamp(1.05rem, .86rem + .8vw, 1.5rem);
  line-height: 1.32; color: var(--nx-forest-800); text-wrap: balance;
}
.nxhero__lead strong { font-weight: 600; }
.nxhero__big {
  font-family: var(--nx-font-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.05rem + 3.4vw, 3.75rem);
  line-height: 1.02; letter-spacing: -.02em; color: var(--nx-forest-900);
}
.nxhero__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); }
/* --lg pads 64px a side, which overflowed the 545px copy column and wrapped
   the pair onto two lines. The hero sets its own, tighter padding. */
.nxhero__actions .nx-btn { padding-inline: var(--nx-space-6); }

/* Below this width the 3:1 banner is too short to hold copy over it, so the
   image and the copy stack instead of overlapping. */
@media (max-width: 900px) {
  .nxhero { background: var(--nx-bone); }
  .nxhero__scrim { display: none; }
  .nxhero__slides { aspect-ratio: 16 / 10; }
  .nxhero__bg { object-position: 64% center; }
  .nxhero__overlay { position: static; display: block; }
  .nxhero__copy { max-width: none; padding-block: var(--nx-space-6) var(--nx-space-8); }
}

/* --------------------------------------------------------------------------
   PRODUCT CARDS
   -------------------------------------------------------------------------- */

.nxprod {
  display: grid; gap: var(--nx-space-3); align-content: start;
  background: var(--nx-white); border: var(--nx-border);
  border-radius: var(--nx-radius-md); overflow: hidden;
  padding-bottom: var(--nx-space-6);
  transition: box-shadow var(--nx-dur-base) var(--nx-ease),
              border-color var(--nx-dur-base) var(--nx-ease),
              transform var(--nx-dur-base) var(--nx-ease-out);
}
.nxprod:hover { box-shadow: var(--nx-shadow-lg); border-color: var(--nx-gold-300); transform: translateY(-2px); }
/* Square, because the client supplies these three as square crops. A 4:3 box
   would centre-crop the iPatch badge and clip the bottles' gold caps. */
.nxprod__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--nx-cream); }
.nxprod__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9) contrast(1.02);
}
.nxprod .nx-eyebrow { margin: var(--nx-space-4) var(--nx-space-6) 0; }
.nxprod__h {
  font-family: var(--nx-font-display); font-weight: 400; font-size: 1.5rem;
  line-height: 1.15; color: var(--nx-forest-800);
  margin: 0 var(--nx-space-6);
}
.nxprod .nx-btn { margin: var(--nx-space-2) var(--nx-space-6) 0; justify-self: start; }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.nxstrip__h {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin: var(--nx-space-3) 0 0; color: var(--nx-charcoal); line-height: 1.35;
}
.nx-strip > * { display: grid; justify-items: center; align-content: start; }

.nxlyncta { text-align: center; }
.nxbigtitle {
  font-family: var(--nx-font-display);
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--nx-forest-800); margin: 0;
}
.nxlyncta .nx-h2 { max-width: 30ch; margin-inline: auto; }
.nxlyncta .nx-h2 strong { font-weight: 600; }

/* Exactly four across on desktop so eight tiles fill two clean rows; the
   auto-fit default produced five and left a ragged three-item remainder. */
.nxbenefits { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .nxbenefits { grid-template-columns: repeat(4, 1fr); } }

.nxtile {
  display: grid; gap: var(--nx-space-3); justify-items: center; align-content: center;
  text-align: center; min-height: 128px; padding: var(--nx-space-5) var(--nx-space-4);
  background: var(--nx-cream); border-radius: var(--nx-radius-md);
  border: 1px solid transparent;
  transition: border-color var(--nx-dur-base) var(--nx-ease), background var(--nx-dur-base) var(--nx-ease);
}
.nxtile:hover { background: var(--nx-white); border-color: var(--nx-gold-300); }
.nxtile__h {
  margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.35;
  color: var(--nx-forest-800);
}
.nxtile__mark {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--nx-radius-pill); border: 1.5px solid var(--nx-gold-500);
  color: var(--nx-gold-700);
}
.nxtile__mark svg { width: 14px; height: 14px; }

.nxmedia { border-radius: var(--nx-radius-lg); overflow: hidden; }
.nxmedia img { aspect-ratio: 4 / 3; }

.nxquote__more {
  align-self: start; background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--nx-font-ui); font-size: .75rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--nx-gold-700);
  border-bottom: 1px solid var(--nx-gold-300);
}
.nxquote__more:hover { color: var(--nx-forest-800); }
.nxquote__more:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }
.nx-quote.is-open .nx-quote__text--clamped { -webkit-line-clamp: unset; line-clamp: unset; }

/* Video grid — one feature card, then a 3-up run. */
.nxvids {
  display: grid; gap: var(--nx-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.nxvid--feature { grid-column: 1 / -1; }

.nxvid {
  display: grid; gap: 0; text-align: left; padding: 0; cursor: pointer;
  background: var(--nx-white); border: var(--nx-border);
  border-radius: var(--nx-radius-md); overflow: hidden;
  font-family: inherit; color: inherit;
  transition: box-shadow var(--nx-dur-base) var(--nx-ease),
              border-color var(--nx-dur-base) var(--nx-ease),
              transform var(--nx-dur-base) var(--nx-ease-out);
}
.nxvid:hover { box-shadow: var(--nx-shadow-lg); border-color: var(--nx-gold-300); transform: translateY(-2px); }
.nxvid:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }

.nxvid__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nx-forest-900); }
.nxvid__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92) contrast(1.02);
  transition: transform var(--nx-dur-slow) var(--nx-ease-out);
}
.nxvid:hover .nxvid__media img { transform: scale(1.03); }
.nxvid__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; display: grid; place-items: center;
  border-radius: var(--nx-radius-pill);
  background: rgba(22, 33, 28, .62); border: 1px solid rgba(255, 255, 255, .5);
  color: #fff; backdrop-filter: blur(2px);
  transition: background var(--nx-dur-base) var(--nx-ease), transform var(--nx-dur-base) var(--nx-ease);
}
.nxvid:hover .nxvid__play { background: var(--nx-gold-500); color: var(--nx-forest-900); border-color: var(--nx-gold-500); transform: scale(1.06); }
.nxvid__play svg { width: 26px; height: 26px; margin-left: 3px; }

/* Play glyph sitting inline in a button, as on the homepage video CTA.
   flex:none matters more than the size does: .nx-btn is inline-flex, so
   without it the glyph is a shrinkable flex item and gets squeezed to a few
   pixels the moment the label wraps to a second line. That is exactly what
   happened on a phone, where the client saw it "microscopic" — it was set to
   18px and rendering nearer 8px. 26px matches the glyph in the video cards
   above. Reported 29 Sep 2026. */
.nx-btn__play { flex: none; width: 26px; height: 26px; }

.nxvid__body { display: grid; gap: 4px; padding: var(--nx-space-5); }
.nxvid__t {
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  color: var(--nx-forest-800); line-height: 1.35;
}
.nxvid__t span { color: var(--nx-gold-700); }
.nxvid__s { font-size: .8125rem; color: var(--nx-ink-subtle); }

/* Feature card: poster beside the label on wide screens. */
@media (min-width: 900px) {
  .nxvid--feature { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
  .nxvid--feature .nxvid__media { aspect-ratio: auto; min-height: 300px; }
  .nxvid--feature .nxvid__body { align-content: center; padding: var(--nx-space-8); gap: var(--nx-space-3); }
  .nxvid--feature .nxvid__t { font-size: 1.125rem; letter-spacing: .04em; }
  .nxvid--feature .nxvid__s { font-size: 1rem; }
  .nxvid--feature .nxvid__play { width: 78px; height: 78px; }
  .nxvid--feature .nxvid__play svg { width: 32px; height: 32px; }
}

/* Patch facade: stands in for a raw Vimeo embed inside a patch body. These
   videos have no poster frame on disk, so the patch's own label art carries
   the tile — contained rather than cropped, since a portrait label loses its
   text at 16/9 cover. Media only: there is no approved caption string for
   these, so the patch title serves as the accessible name instead. */
.nxvid--patch {
  max-width: 340px;
  margin: 0 0 var(--nx-space-5);
}
.nxvid--patch .nxvid__media { background: var(--nx-forest-900); }
.nxvid--patch .nxvid__media img {
  object-fit: contain;
  padding: var(--nx-space-4);
  filter: none;
}

/* Lightbox — native <dialog>. The iframe is built on open and removed on
   close, so closing actually stops playback instead of hiding it. */
.nxlb {
  width: min(1100px, 94vw); max-width: none; padding: 0; border: 0;
  background: transparent; color: #fff; overflow: visible;
}
.nxlb::backdrop { background: rgba(12, 18, 15, .88); }
.nxlb__frame {
  aspect-ratio: 16 / 9; width: 100%;
  background: #000; border-radius: var(--nx-radius-lg); overflow: hidden;
  box-shadow: var(--nx-shadow-xl);
}
.nxlb__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.nxlb__title {
  margin: 0 0 var(--nx-space-3); font-size: .8125rem; font-weight: 700;
  letter-spacing: .08em; color: rgba(255, 255, 255, .82);
}
.nxlb__close {
  position: absolute; top: -46px; right: 0;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--nx-radius-pill); cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.nxlb__close:hover { background: rgba(255, 255, 255, .24); }
.nxlb__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-gold-500); }
.nxlb__close svg { width: 18px; height: 18px; }

/* Product carousel — the same dialog chrome as the video lightbox, cycling
   the product set instead of playing a film. Client request, Sep 2026: a
   carousel that pops up and cycles through the images. Several frames are
   information panels with type set into the artwork; at full-bleed dialog
   width that type is finally readable, which is what this is for. */
/* Width is also bound by the height available, so a 16:9 frame plus its
   title, dots and close button always fits without the dialog scrolling.
   170px is that chrome: 46px close, title, footer row, and breathing space. */
.nxlb--gal { width: min(1180px, 94vw, calc((100vh - 170px) * 16 / 9)); }
.nxgallb__frame { position: relative; }
.nxgallb__stage {
  aspect-ratio: 16 / 9; width: 100%;
  background: var(--nx-white); border-radius: var(--nx-radius-lg); overflow: hidden;
  box-shadow: var(--nx-shadow-xl);
}
.nxgallb__stage img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Arrows sit outside the frame on a roomy viewport and overlap it once there
   is no gutter left to sit in. */
.nxgallb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--nx-radius-pill); cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  transition: background-color var(--nx-dur-base) var(--nx-ease);
}
.nxgallb__nav:hover { background: rgba(255, 255, 255, .26); }
.nxgallb__nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-gold-500); }
.nxgallb__nav svg { width: 20px; height: 20px; }
.nxgallb__nav--prev { left: -60px; }
.nxgallb__nav--next { right: -60px; }
@media (max-width: 1320px) {
  .nxgallb__nav--prev { left: var(--nx-space-4); }
  .nxgallb__nav--next { right: var(--nx-space-4); }
  .nxgallb__nav { background: rgba(12, 18, 15, .55); border-color: rgba(255, 255, 255, .42); }
}

.nxgallb__foot {
  display: flex; align-items: center; justify-content: center; gap: var(--nx-space-4);
  margin-top: var(--nx-space-4);
}
.nxgallb__dots { display: flex; gap: var(--nx-space-3); }
.nxgallb__dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .6); background: transparent;
  transition: background-color var(--nx-dur-base) var(--nx-ease);
}
.nxgallb__dots button[aria-selected="true"] { background: var(--nx-gold-500); border-color: var(--nx-gold-500); }
.nxgallb__dots button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-gold-500); }
.nxgallb__count {
  margin: 0; font-size: .8125rem; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   CLOSING BAND + FOOTER
   -------------------------------------------------------------------------- */

.nxjoin__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--nx-space-6);
}
/* min-width:0 because this is a flex item of .nxjoin__inner: left at the
   default `auto` it cannot shrink below the min-content width of its widest
   button, which pushes the closing band past the viewport on phones. */
.nxjoin__actions { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); min-width: 0; }

.nxf { background: var(--nx-charcoal); color: rgba(255,255,255,.72); padding-block: var(--nx-space-9) var(--nx-space-6); }
.nxf__grid {
  display: grid; gap: var(--nx-space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.nxh__logo--footer { margin-bottom: var(--nx-space-4); }
.nxf__h {
  font-family: var(--nx-font-display); font-size: 1.25rem; font-weight: 400;
  color: #fff; margin: 0 0 var(--nx-space-4);
}
.nxf__label {
  font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nx-gold-500); margin: 0 0 var(--nx-space-2);
}
.nxf__addr, .nxf__hours { font-style: normal; font-size: .875rem; line-height: 1.7; margin: 0 0 var(--nx-space-4); }
.nxf__addr a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(200,162,77,.5); }
.nxf__addr a:hover { color: var(--nx-gold-500); }
.nxf__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-2); }
.nxf__links a { color: rgba(255,255,255,.78); text-decoration: none; font-size: .875rem; }
.nxf__links a:hover { color: var(--nx-gold-500); }
.nxf__social { margin: 0; }
.nxf__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--nx-radius-pill); color: #fff;
}
.nxf__social a:hover { border-color: var(--nx-gold-500); color: var(--nx-gold-500); }
.nxf__social svg { width: 18px; height: 18px; }
.nxf__disclaimer {
  font-size: .6875rem; line-height: 1.6; color: rgba(255,255,255,.5);
  margin: var(--nx-space-8) 0 var(--nx-space-4);
  padding-top: var(--nx-space-5); border-top: 1px solid rgba(255,255,255,.12);
}
.nxf__copy { font-size: .75rem; color: rgba(255,255,255,.5); margin: 0; }

/* Preview marker — not part of the design system. */
.nxpreview {
  position: fixed; right: 14px; bottom: 14px; z-index: var(--nx-z-modal);
  display: flex; align-items: center; gap: 9px;
  padding: 7px 13px; border-radius: var(--nx-radius-pill);
  background: rgba(22,33,28,.92); color: rgba(255,255,255,.8);
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  box-shadow: var(--nx-shadow-lg);
}
.nxpreview__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--nx-gold-500); }
.nxpreview a { color: var(--nx-gold-500); text-decoration: none; border-bottom: 1px solid transparent; }
.nxpreview a:hover { border-bottom-color: var(--nx-gold-500); }
@media print { .nxpreview { display: none; } }

/* Google Translate leaves a banner frame and a body offset. */
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }

/* ==========================================================================
   INTERIOR PAGES
   ========================================================================== */

/* Page head ---------------------------------------------------------------- */
.nxph { position: relative; background: var(--nx-cream); padding-block: var(--nx-space-9) var(--nx-space-8); overflow: hidden; }
.nxph--media { background: var(--nx-forest-900); }
.nxph__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nxph__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,33,28,.9) 0%, rgba(22,33,28,.55) 55%, rgba(22,33,28,.2) 100%); }
.nxph__inner { position: relative; }
.nxph__h {
  font-family: var(--nx-font-display); font-weight: 400;
  font-size: var(--nx-fs-display-l); line-height: var(--nx-lh-tight);
  letter-spacing: var(--nx-ls-display); color: var(--nx-forest-900); margin: 0;
  text-wrap: balance;
}
.nxph--media .nxph__h { color: #fff; }
.nxph__lead { max-width: 62ch; }
.nxph--media .nxph__lead { color: rgba(255,255,255,.78); }

/* Product detail ----------------------------------------------------------- */
.nxpdp__grid {
  display: grid; gap: clamp(var(--nx-space-6), 4vw, var(--nx-space-9));
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  align-items: start;
}
.nxpdp__title {
  font-family: var(--nx-font-display); font-weight: 400;
  font-size: var(--nx-fs-display-l); line-height: 1.05;
  letter-spacing: var(--nx-ls-display); color: var(--nx-forest-900); margin: 0;
}
.nxpdp__sub {
  font-family: var(--nx-font-display); font-size: var(--nx-fs-h3);
  line-height: var(--nx-lh-snug); color: var(--nx-forest-700);
  margin: var(--nx-space-3) 0 0;
}
.nxpdp__stat { font-weight: 700; color: var(--nx-charcoal); margin: var(--nx-space-4) 0 0; }

.nxchips { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); list-style: none; margin: 0 0 var(--nx-space-4); padding: 0; }
.nxchips li {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nx-gold-700); background: var(--nx-gold-100);
  border: 1px solid var(--nx-gold-300); border-radius: var(--nx-radius-pill);
  padding: 5px 14px;
}

/* Gallery ------------------------------------------------------------------ */
/* The client's product set is uniformly 1280x720, and several frames are
   information panels with type set into the image. A square box cropped the
   headings off, so the box is 16:9 and nothing is cropped at all. */
.nxgal { display: grid; gap: var(--nx-space-4); }
.nxgal__main {
  position: relative;
  border-radius: var(--nx-radius-lg); overflow: hidden;
  background: var(--nx-white); border: var(--nx-border);
}
.nxgal__main img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* The main frame is a button: it opens the pop-up carousel at whichever image
   is showing. Reset the UA button chrome, keep the frame's own. */
button.nxgal__main {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  font: inherit; color: inherit; text-align: inherit;
}
button.nxgal__main:hover { border-color: var(--nx-gold-300); }
button.nxgal__main:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }

/* Hint, bottom right of the frame. Fades up on hover so the frame reads as
   openable without a label sitting on the photograph permanently. */
.nxgal__expand {
  position: absolute; right: var(--nx-space-4); bottom: var(--nx-space-4);
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--nx-radius-pill); pointer-events: none;
  background: rgba(12, 18, 15, .58); color: #fff;
  opacity: 0; transition: opacity var(--nx-dur-base) var(--nx-ease);
}
.nxgal__expand svg { width: 16px; height: 16px; }
button.nxgal__main:hover .nxgal__expand,
button.nxgal__main:focus-visible .nxgal__expand { opacity: 1; }
@media (hover: none) { .nxgal__expand { opacity: 1; } }

.nxgal__thumbs { display: flex; gap: var(--nx-space-3); flex-wrap: wrap; }
.nxgal__thumb {
  /* 92px keeps the longest set — iHeRQles' five — on a single row. */
  width: 92px; aspect-ratio: 16 / 9; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--nx-hairline); border-radius: var(--nx-radius-sm);
  background: var(--nx-white);
  transition: border-color var(--nx-dur-base) var(--nx-ease);
}
.nxgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nxgal__thumb:hover { border-color: var(--nx-gold-300); }
.nxgal__thumb.is-active { border-color: var(--nx-gold-500); border-width: 2px; }
.nxgal__thumb:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }

/* The standalone lifestyle bands were retired on 25 Sep 2026 — the client
   moved every one of those frames into a slot that already existed, so the
   photography now rides the normal media boxes and needs no rules of its
   own. */

/* Long-form prose ---------------------------------------------------------- */
.nxprose { max-width: 74ch; }
.nxprose > p { font-size: var(--nx-fs-body); line-height: var(--nx-lh-relaxed); color: var(--nx-text); margin: 0 0 var(--nx-space-4); }
.nxprose > p:last-child { margin-bottom: 0; }
.nxprose a { color: var(--nx-gold-700); text-decoration: underline; text-underline-offset: 3px; }
.nxprose a:hover { color: var(--nx-forest-800); }
.nxprose__aside { float: right; max-width: 38%; margin: 0 0 var(--nx-space-5) var(--nx-space-6); }
.nxprose__aside img { border-radius: var(--nx-radius-lg); }
.nxprose__list { list-style: disc; margin: 0 0 var(--nx-space-4) var(--nx-space-6); padding: 0; }
.nxprose__list li { margin-bottom: var(--nx-space-2); line-height: var(--nx-lh-normal); }
.nxprose__callout {
  font-family: var(--nx-font-display); font-size: var(--nx-fs-h3);
  line-height: var(--nx-lh-snug); color: var(--nx-forest-800);
  text-align: center; margin: var(--nx-space-7) 0 var(--nx-space-5) !important;
}
.nxprose__note {
  background: var(--nx-cream); border-left: 3px solid var(--nx-gold-500);
  border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0;
  padding: var(--nx-space-4) var(--nx-space-5); margin-block: var(--nx-space-5) !important;
}
.nxprose .nx-checklist { margin-block: var(--nx-space-4) var(--nx-space-5); }
.nxprose__videos { display: grid; gap: var(--nx-space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); margin-block: var(--nx-space-6); }
@media (max-width: 640px) { .nxprose__aside { float: none; max-width: none; margin: 0 0 var(--nx-space-5); } }

/* Numbered list ------------------------------------------------------------ */
.nxnum { list-style: none; counter-reset: n; margin: var(--nx-space-4) 0 0; padding: 0; display: grid; gap: var(--nx-space-3); }
.nxnum li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; gap: var(--nx-space-3); align-items: start; line-height: var(--nx-lh-normal); }
.nxnum li::before {
  content: counter(n); display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--nx-radius-pill);
  background: var(--nx-forest-800); color: #fff;
  font-size: .6875rem; font-weight: 700;
}

/* Accordion ---------------------------------------------------------------- */
.nxacc { display: grid; gap: var(--nx-space-3); }
.nxacc__item { border: var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-white); overflow: hidden; }
.nxacc__h { margin: 0; }
.nxacc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-4);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--nx-space-5) var(--nx-space-6);
  font-family: var(--nx-font-display); font-size: var(--nx-fs-h3);
  line-height: var(--nx-lh-snug); color: var(--nx-forest-800);
  transition: background var(--nx-dur-base) var(--nx-ease);
}
.nxacc__btn:hover { background: var(--nx-cream); }
.nxacc__btn:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }
.nxacc__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--nx-gold-700); transition: transform var(--nx-dur-base) var(--nx-ease); }
.nxacc__btn[aria-expanded="true"] { background: var(--nx-cream); }
.nxacc__btn[aria-expanded="true"] .nxacc__icon { transform: rotate(180deg); }
.nxacc__body {
  display: grid; gap: var(--nx-space-6); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 var(--nx-space-6) var(--nx-space-6);
  max-width: none;
}
@media (min-width: 720px) { .nxacc__body { grid-template-columns: 300px minmax(0, 1fr); } }
.nxacc__media { margin: 0; }
.nxacc__media img { width: 100%; height: auto; border-radius: var(--nx-radius-md); display: block; }
.nxacc__copy p { margin: 0 0 var(--nx-space-4); line-height: var(--nx-lh-relaxed); }
.nxacc__copy h4 { font-size: var(--nx-fs-body); font-weight: 600; margin: 0 0 var(--nx-space-3); color: var(--nx-forest-800); }
.nxacc__copy ul { list-style: none; margin: 0 0 var(--nx-space-4); padding: 0; display: grid; gap: var(--nx-space-2); }
.nxacc__copy ul li { display: grid; grid-template-columns: 18px 1fr; gap: var(--nx-space-3); line-height: var(--nx-lh-normal); }
.nxacc__copy ul li::before {
  content: ""; width: 7px; height: 7px; margin-top: .5em; margin-left: 5px;
  border-radius: 999px; background: var(--nx-gold-500);
}

/* Legal document ----------------------------------------------------------- */
.nxdoc { border: var(--nx-border); border-radius: var(--nx-radius-md); overflow: hidden; background: var(--nx-white); }
.nxdoc__head {
  display: flex; flex-wrap: wrap; gap: var(--nx-space-4); align-items: center; justify-content: space-between;
  padding: var(--nx-space-5) var(--nx-space-6); border-bottom: var(--nx-border); background: var(--nx-cream);
}
.nxdoc > .nx-small { padding: var(--nx-space-4) var(--nx-space-6) 0; }
.nxdoc__frame { padding: var(--nx-space-5) var(--nx-space-6) var(--nx-space-6); }
.nxdoc__frame iframe { width: 100%; height: min(78vh, 900px); border: 1px solid var(--nx-rule); border-radius: var(--nx-radius-sm); background: var(--nx-sand); }

.nxfacts { list-style: none; margin: var(--nx-space-6) 0 0; padding: 0; display: grid; gap: var(--nx-space-3); grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr)); }
.nxfacts li {
  background: var(--nx-cream); border-radius: var(--nx-radius-md);
  padding: var(--nx-space-4) var(--nx-space-5); font-size: .9375rem; color: var(--nx-forest-800);
}

/* Pull-quote band ---------------------------------------------------------
   The abstract is atmosphere, not subject: held well back and darkened toward
   the centre so the quote reads as type on a ground rather than text floating
   over a photograph. */
.nxquoteband {
  position: relative; overflow: hidden;
  background: var(--nx-forest-900);
  padding-block: clamp(var(--nx-space-9), 9vw, var(--nx-space-11));
}
.nxquoteband__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .3;
}
.nxquoteband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(22,33,28,.62) 0%, rgba(22,33,28,.88) 72%);
}
.nxquoteband__inner {
  position: relative; z-index: 1;
  display: grid; justify-items: center; text-align: center;
}
.nxquoteband__mark {
  font-family: var(--nx-font-display); font-size: 5rem; line-height: .7;
  color: var(--nx-gold-500); opacity: .55; margin-bottom: var(--nx-space-4);
}
.nxquoteband__q {
  margin: 0; max-width: 20ch;
  font-family: var(--nx-font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.14; letter-spacing: -.015em; color: #fff;
  text-wrap: balance;
}
.nxquoteband__rule { margin-top: var(--nx-space-6); }

.nxvid--inline { max-width: 420px; }

.nxacc__close { max-width: 74ch; margin: var(--nx-space-7) auto 0; text-align: center; }

.nxprod__s { font-size: .9375rem; color: var(--nx-ink-subtle); margin: 0 var(--nx-space-6); }

/* --------------------------------------------------------------------------
   SECTION JUMP NAV
   --------------------------------------------------------------------------
   Replaces the old tab strip. Same wayfinding, but nothing is hidden — every
   section is on the page, linkable, printable and findable with ctrl-F.
   -------------------------------------------------------------------------- */

.nxjump {
  position: sticky; top: var(--nx-header-h, 74px); z-index: var(--nx-z-sticky);
  background: rgba(250, 248, 243, .94);
  backdrop-filter: blur(8px);
  border-block: var(--nx-border);
}
.nxjump { transition: top var(--nx-dur-base) var(--nx-ease); }

.nxjump__inner {
  max-width: var(--nx-container); margin-inline: auto;
  padding-inline: var(--nx-gutter);
  display: flex; gap: var(--nx-space-2); align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.nxjump__inner::-webkit-scrollbar { display: none; }
.nxjump a {
  position: relative; white-space: nowrap; text-decoration: none;
  padding: var(--nx-space-4) var(--nx-space-4);
  font-size: .8125rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--nx-ink-subtle);
  transition: color var(--nx-dur-base) var(--nx-ease);
}
.nxjump a::after {
  content: ""; position: absolute; inset-inline: var(--nx-space-3); bottom: 0; height: 2px;
  background: var(--nx-gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--nx-dur-base) var(--nx-ease);
}
.nxjump a:hover { color: var(--nx-forest-800); }
.nxjump a.is-current { color: var(--nx-forest-800); }
.nxjump a.is-current::after { transform: scaleX(1); }
.nxjump a:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); border-radius: var(--nx-radius-sm); }

/* Anchored sections clear the sticky header + jump bar. */
.nxsec { scroll-margin-top: calc(var(--nx-header-h, 74px) + 62px); }

/* ==========================================================================
   PRODUCT INFORMATION DESIGN
   Class prefix .nxflow* is for product content only — never collide with the
   sponsor bar (.nxband), which lives higher in this file.
   ========================================================================== */

/* Ingredient inventory — dense chip board */
.nxing {
  list-style: none; margin: var(--nx-space-6) 0 0; padding: 0;
  display: grid; gap: var(--nx-space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
}
.nxing li {
  margin: 0;
  padding: var(--nx-space-3) var(--nx-space-4);
  background: var(--nx-white);
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-sm);
  border-left: 3px solid var(--nx-gold-300);
  font-size: var(--nx-fs-sm);
  line-height: var(--nx-lh-snug);
  color: var(--nx-forest-800);
  font-weight: 500;
}
.nxing li:nth-child(3n) { border-left-color: var(--nx-gold-500); }
.nxing li:nth-child(5n) { background: var(--nx-cream); }
.nx-section--sunken .nxing li { background: var(--nx-bone); }
.nx-section--sunken .nxing li:nth-child(5n) { background: var(--nx-white); }
.nxing--inactive li {
  color: var(--nx-ink-muted); font-weight: 400;
  border-left-color: var(--nx-hairline);
}
.nxing-meta { max-width: 68ch; margin-top: var(--nx-space-5); }
.nxing-meta p {
  margin: 0 0 var(--nx-space-3);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-normal);
  color: var(--nx-charcoal);
}
.nxing-meta p:last-child { margin-bottom: 0; }

/* Dosage decision board — ladders, then full-width pack grid, then notes.
   No sticky sidebar: prices never overlap the continuity copy or CTAs. */
.nxdose__title {
  max-width: 52ch;
  margin: var(--nx-space-5) auto 0;
  text-align: center;
  color: var(--nx-forest-700);
}
.nxboard {
  display: grid;
  gap: var(--nx-space-7);
  margin-top: var(--nx-space-8);
}
.nxboard__ladders {
  display: grid;
  gap: var(--nx-space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 800px) {
  .nxboard__ladders {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.nxladder {
  background: var(--nx-white);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  overflow: hidden;
  height: 100%;
}
.nxladder__head {
  margin: 0;
  padding: var(--nx-space-4) var(--nx-space-5);
  background: var(--nx-forest-800);
  color: #fff;
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: var(--nx-fs-h3);
  line-height: var(--nx-lh-snug);
}
.nxladder__steps {
  list-style: none;
  margin: 0;
  padding: var(--nx-space-5);
  display: grid;
  gap: var(--nx-space-4);
  counter-reset: ladder;
}
.nxladder__steps > li {
  counter-increment: ladder;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--nx-space-4);
  align-items: start;
  padding-bottom: var(--nx-space-4);
  border-bottom: 1px solid var(--nx-hairline);
}
.nxladder__steps > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.nxladder__steps > li::before {
  content: counter(ladder);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--nx-radius-pill);
  background: var(--nx-gold-100);
  color: var(--nx-gold-700);
  font-size: var(--nx-fs-sm);
  font-weight: 700;
  line-height: 1;
}
.nxladder__steps p {
  margin: 0;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}
.nxladder__steps a {
  color: var(--nx-gold-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nxboard__prices {
  display: grid;
  gap: var(--nx-space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .nxboard__prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.nxprice {
  background: var(--nx-cream);
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-5);
  display: grid;
  gap: var(--nx-space-3);
  align-content: start;
  min-width: 0;
}
.nxprice--pair {
  background: var(--nx-bone);
  border-color: var(--nx-gold-300);
}
.nxprice__amt {
  margin: 0;
  font-family: var(--nx-font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: var(--nx-ls-display);
  color: var(--nx-forest-800);
}
.nxprice p:not(.nxprice__amt) {
  margin: 0;
  font-size: var(--nx-fs-sm);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}

.nxboard__foot {
  display: grid;
  gap: var(--nx-space-5);
  max-width: var(--nx-container-narrow);
  margin-inline: auto;
  width: 100%;
}
.nxboard__foot .nxprose__note {
  max-width: none;
}
.nxboard__prose {
  max-width: none;
}
.nxfactors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--nx-space-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .nxfactors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.nxfactors li {
  margin: 0;
  padding: var(--nx-space-4) var(--nx-space-5);
  background: var(--nx-forest-800);
  border-radius: var(--nx-radius-md);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-normal);
  color: #fff;
  font-weight: 500;
  min-width: 0;
}
.nxboard__foot .nx-cluster {
  flex-wrap: wrap;
}

/* iXLR8 overview stack (NOT the sponsor .nxband) */
.nxflow--stack {
  max-width: none;
  display: grid;
  gap: var(--nx-space-5);
  margin-top: var(--nx-space-6);
}
.nxflow__block {
  display: grid;
  gap: var(--nx-space-4);
  padding: var(--nx-space-5) 0;
  border-bottom: 1px solid var(--nx-hairline);
}
.nxflow__block:last-child { border-bottom: 0; }
.nxflow__block p {
  margin: 0;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}
.nxflow__block--pull {
  background: var(--nx-cream);
  border: 0;
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-6);
  text-align: center;
}
.nxflow__block--pull p {
  font-family: var(--nx-font-display);
  font-size: var(--nx-fs-h3);
  line-height: var(--nx-lh-snug);
  color: var(--nx-forest-800);
}

/* iRevive Overview — hybrid: calm bands (D) + gold spine (A). Layout only. */
.nxov {
  padding-block-end: 0;
  overflow: clip;
}
.nxov .nx-section-head { margin-bottom: var(--nx-space-5); }

.nxov__track {
  position: relative;
}
/* Spine sits in the left gutter on wide screens; pure decoration. */
.nxov__spine {
  display: none;
}
@media (min-width: 1100px) {
  .nxov__spine {
    display: block;
    position: absolute;
    left: max(var(--nx-gutter), calc((100% - var(--nx-container)) / 2 - 1.5rem));
    top: var(--nx-space-6);
    bottom: var(--nx-space-6);
    width: 1rem;
    z-index: 1;
    pointer-events: none;
  }
  .nxov__spine-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
      to bottom,
      transparent,
      var(--nx-gold-300) 8%,
      var(--nx-gold-300) 92%,
      transparent
    );
  }
  .nxov__spine-dot {
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 999px;
    background: var(--nx-white);
    border: 2px solid var(--nx-gold-500);
    box-shadow: 0 0 0 3px var(--nx-bone);
  }
  .nxov__spine-dot:nth-child(2) { top: 4%; }
  .nxov__spine-dot:nth-child(3) { top: 16%; }
  .nxov__spine-dot:nth-child(4) { top: 30%; }
  .nxov__spine-dot:nth-child(5) { top: 44%; }
  .nxov__spine-dot:nth-child(6) { top: 54%; }
  .nxov__spine-dot:nth-child(7) { top: 64%; }
  .nxov__spine-dot:nth-child(8) { top: 76%; }
  .nxov__spine-dot:nth-child(9) { top: 90%; }
}

.nxov__block {
  padding-block: clamp(var(--nx-space-7), 5vw, var(--nx-space-9));
}
.nxov__block--hero {
  padding-block-start: var(--nx-space-5);
}
.nxov__block--cream {
  background: var(--nx-cream);
  border-block: 1px solid var(--nx-hairline);
}
.nxov__block--forest {
  background: var(--nx-forest-800);
  padding-block: clamp(var(--nx-space-8), 7vw, var(--nx-space-10));
}
.nxov__block--media {
  padding-block: var(--nx-space-6);
  background: var(--nx-white);
}
.nxov__block--protocol {
  background: var(--nx-bone);
  border-top: 1px solid var(--nx-hairline);
  padding-block: clamp(var(--nx-space-8), 6vw, var(--nx-space-10));
}

.nxov__lead {
  margin: 0 auto var(--nx-space-7);
  max-width: 18ch;
  text-align: center;
  font-family: var(--nx-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: var(--nx-ls-display);
  color: var(--nx-forest-800);
  text-wrap: balance;
}
.nxov__split {
  display: grid;
  gap: var(--nx-space-6);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) {
  .nxov__split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--nx-space-8);
  }
}
.nxov__copy {
  display: grid;
  gap: var(--nx-space-4);
}
.nxov__copy--measure {
  max-width: 58ch;
}
.nxov__copy p,
.nxov__card,
.nxov__protocol-copy p {
  margin: 0;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}
.nxov__media { margin: 0; }
.nxov__media img {
  width: 100%;
  height: auto;
  border-radius: var(--nx-radius-lg);
  display: block;
  box-shadow: var(--nx-shadow-sm, 0 8px 24px rgba(31, 47, 40, .08));
}
.nxov__columns {
  display: grid;
  gap: var(--nx-space-5);
  grid-template-columns: minmax(0, 1fr);
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 800px) {
  .nxov__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.nxov__card {
  background: var(--nx-white);
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-6);
  display: grid;
  gap: var(--nx-space-4);
  box-shadow: 0 1px 0 rgba(31, 47, 40, .03);
}
.nxov__card--accent {
  border-left: 3px solid var(--nx-gold-500);
  background: var(--nx-cream);
}
.nxov__stack {
  display: grid;
  gap: var(--nx-space-4);
}
.nxov__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-space-2);
}
.nxov__actions li {
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--nx-radius-pill);
  background: var(--nx-gold-100);
  border: 1px solid var(--nx-gold-300);
  color: var(--nx-gold-700);
  font-size: var(--nx-fs-xs);
  font-weight: 600;
  line-height: 1.3;
}
.nxov__pull {
  display: grid;
  gap: var(--nx-space-5);
  text-align: center;
  max-width: 32ch;
  margin-inline: auto;
}
.nxov__pull p {
  margin: 0;
  font-family: var(--nx-font-display);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  line-height: var(--nx-lh-snug);
  color: #fff;
  text-wrap: balance;
}
.nxov__banner {
  margin: 0 auto;
  max-width: 680px;
}
.nxov__banner img {
  width: 100%;
  height: auto;
  border-radius: var(--nx-radius-lg);
  display: block;
}
.nxov__challenge-title {
  margin: 0 auto var(--nx-space-7);
  max-width: 34ch;
  text-align: center;
  font-family: var(--nx-font-display);
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
  line-height: var(--nx-lh-snug);
  color: var(--nx-forest-800);
  text-wrap: balance;
}
/* Checklist cadence for the 3-day challenge (decorative marks, existing sentences). */
.nxov__checks {
  list-style: none;
  margin: 0 auto var(--nx-space-7);
  padding: var(--nx-space-6);
  max-width: 62ch;
  display: grid;
  gap: var(--nx-space-4);
  background: var(--nx-white);
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-md);
}
.nxov__checks > li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--nx-space-4);
  align-items: start;
  padding-bottom: var(--nx-space-4);
  border-bottom: 1px solid var(--nx-hairline);
}
.nxov__checks > li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.nxov__checks > li::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .2em;
  border-radius: 999px;
  background: var(--nx-gold-500);
  box-shadow: inset 0 0 0 3px var(--nx-white), 0 0 0 1px var(--nx-gold-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316211C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
  background-size: .7rem;
  background-repeat: no-repeat;
  background-position: center;
}
.nxov__checks p {
  margin: 0;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}
.nxov .nxprose__videos {
  max-width: 720px;
  margin-inline: auto;
}
.nxov__protocol-h {
  text-align: center;
  margin: 0 0 var(--nx-space-6);
  color: var(--nx-forest-800);
}
/* Horizontal process rail between the two protocol phases — decorative. */
.nxov__process {
  position: relative;
  max-width: 28rem;
  height: 1.5rem;
  margin: 0 auto var(--nx-space-6);
}
.nxov__process-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--nx-gold-300);
  border-radius: 999px;
}
.nxov__process-node {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 999px;
  background: var(--nx-white);
  border: 2px solid var(--nx-gold-500);
}
.nxov__process-node:first-of-type { left: 0; }
.nxov__process-node:last-of-type { right: 0; }

.nxov__protocol-copy {
  display: grid;
  gap: var(--nx-space-4);
  max-width: 62ch;
  margin: 0 auto var(--nx-space-7);
  text-align: center;
}
.nxov__price-row {
  display: grid;
  gap: var(--nx-space-5);
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin: 0 auto var(--nx-space-7);
}
@media (min-width: 640px) {
  .nxov__price-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.nxov__price-tile {
  background: var(--nx-white);
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-6);
  display: grid;
  gap: var(--nx-space-3);
  text-align: center;
  align-content: start;
  min-width: 0;
}
.nxov__price-tile--accent {
  border-color: var(--nx-gold-300);
  background: var(--nx-cream);
}
.nxov__price-tile .nxprice__amt {
  text-align: center;
}
.nxov__price-tile p:not(.nxprice__amt) {
  margin: 0;
  font-size: var(--nx-fs-sm);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}
.nxov__protocol-note {
  max-width: 52ch;
  margin-inline: auto;
}

/* iXLR8 dosage blocks */
.nxdose-blocks { display: grid; gap: var(--nx-space-4); }
.nxdose-block {
  background: var(--nx-white);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-5) var(--nx-space-6);
}
.nxdose-block p {
  margin: 0;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}
.nxdose-block--warn {
  border-left: 3px solid var(--nx-gold-500);
  background: var(--nx-cream);
}
.nxdose-block--note {
  text-align: center;
  background: var(--nx-bone);
  font-family: var(--nx-font-display);
  font-size: var(--nx-fs-h3);
}
.nxdose-block--note p {
  font-size: inherit;
  line-height: var(--nx-lh-snug);
  color: var(--nx-forest-800);
}

/* iPatches catalog — image-first product cards + detail panel (E+A hybrid).
   Real label art from patches-data; existing titles only; no monograms. */
.nxcatalog {
  display: grid;
  gap: var(--nx-space-7);
}
.nxcatalog__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--nx-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr));
}
@media (min-width: 720px) {
  .nxcatalog__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--nx-space-5);
  }
}
.nxcatalog__tile {
  display: grid;
  grid-template-rows: auto minmax(2.75rem, auto);
  gap: var(--nx-space-3);
  align-content: start;
  width: 100%;
  margin: 0;
  padding: var(--nx-space-3);
  /* Forest field rather than white — client direction, 12 Aug 2026. */
  background: var(--nx-forest-800);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--nx-radius-md);
  cursor: pointer;
  font: inherit;
  color: var(--nx-white);
  text-align: center;
  transition:
    border-color var(--nx-dur-base) var(--nx-ease),
    box-shadow var(--nx-dur-base) var(--nx-ease),
    transform var(--nx-dur-base) var(--nx-ease);
}
.nxcatalog__tile:hover {
  border-color: var(--nx-gold-300);
  box-shadow: 0 8px 20px rgba(31, 47, 40, .08);
}
.nxcatalog__tile:focus-visible {
  outline: none;
  box-shadow: var(--nx-focus-ring);
}
.nxcatalog__tile[aria-pressed="true"] {
  border-color: var(--nx-gold-500);
  box-shadow: 0 0 0 2px var(--nx-gold-500), 0 8px 20px rgba(31, 47, 40, .08);
}
.nxcatalog__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--nx-radius-sm);
  overflow: hidden;
  background: var(--nx-cream);
}
.nxcatalog__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--nx-bone);
}
.nxcatalog__name {
  display: block;
  font-size: var(--nx-fs-xs);
  font-weight: 600;
  line-height: var(--nx-lh-snug);
  color: var(--nx-white);   /* light on the forest tile — §03 */
  text-wrap: balance;
}

.nxcatalog__grid {
  scroll-margin-top: calc(var(--nx-header-h, 74px) + 62px);
}
.nxcatalog__detail {
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-md);
  background: var(--nx-cream);
  overflow: hidden;
  scroll-margin-top: calc(var(--nx-header-h, 74px) + 62px);
}
.nxcatalog__detail-inner {
  display: grid;
  gap: var(--nx-space-6);
  padding: var(--nx-space-6);
  grid-template-columns: minmax(0, 1fr);
  background: var(--nx-white);
  margin: var(--nx-space-3);
  border-radius: var(--nx-radius-md);
  border: 1px solid var(--nx-hairline);
}
@media (min-width: 720px) {
  .nxcatalog__detail-inner {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: start;
    padding: var(--nx-space-7);
    margin: var(--nx-space-4);
  }
}
.nxcatalog__aside {
  display: grid;
  gap: var(--nx-space-4);
  min-width: 0;
}
.nxcatalog__detail-media { margin: 0; }
.nxcatalog__detail-media img {
  width: 100%;
  height: auto;
  border-radius: var(--nx-radius-md);
  display: block;
  background: var(--nx-bone);
  border: 1px solid var(--nx-hairline);
}
/* Under-image quick switcher: thumbs only; titles via aria-label / title. */
.nxcatalog__jump {
  display: grid;
  gap: var(--nx-space-3);
  min-width: 0;
}
.nxcatalog__jump-top {
  font-size: var(--nx-fs-xs);
  font-weight: 600;
  line-height: var(--nx-lh-snug);
  color: var(--nx-gold-700);
  text-decoration: none;
  text-underline-offset: 3px;
}
.nxcatalog__jump-top:hover {
  color: var(--nx-forest-800);
  text-decoration: underline;
}
.nxcatalog__jump-top:focus-visible {
  outline: none;
  box-shadow: var(--nx-focus-ring);
  border-radius: var(--nx-radius-sm);
}
.nxcatalog__strip {
  list-style: none;
  margin: 0;
  padding: 2px;
  display: flex;
  gap: var(--nx-space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nxcatalog__strip li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.nxcatalog__strip-btn {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-radius-sm);
  background: var(--nx-bone);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--nx-dur-base) var(--nx-ease),
    box-shadow var(--nx-dur-base) var(--nx-ease);
}
.nxcatalog__strip-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--nx-white);
}
.nxcatalog__strip-btn:hover {
  border-color: var(--nx-gold-300);
}
.nxcatalog__strip-btn:focus-visible {
  outline: none;
  box-shadow: var(--nx-focus-ring);
}
.nxcatalog__strip-btn[aria-pressed="true"] {
  border-color: var(--nx-gold-500);
  box-shadow: 0 0 0 2px var(--nx-gold-500);
}
.nxcatalog__strip-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  font-size: .5625rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--nx-forest-800);
  text-align: center;
}
.nxcatalog__detail-copy h3 {
  margin: 0 0 var(--nx-space-4);
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: var(--nx-fs-h3);
  color: var(--nx-forest-800);
}
.nxcatalog__detail-copy p {
  margin: 0 0 var(--nx-space-4);
  line-height: var(--nx-lh-relaxed);
}
.nxcatalog__detail-copy h4 {
  font-size: var(--nx-fs-body);
  font-weight: 600;
  margin: 0 0 var(--nx-space-3);
  color: var(--nx-forest-800);
}
.nxcatalog__detail-copy ul {
  list-style: none;
  margin: 0 0 var(--nx-space-4);
  padding: 0;
  display: grid;
  gap: var(--nx-space-2);
}
.nxcatalog__detail-copy ul li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--nx-space-3);
  line-height: var(--nx-lh-normal);
}
.nxcatalog__detail-copy ul li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .5em; margin-left: 5px;
  border-radius: 999px;
  background: var(--nx-gold-500);
}
.nxcatalog__detail-copy iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--nx-radius-md);
  background: var(--nx-sand);
}

/* Instructions as discrete steps */
.nxsteps { display: grid; gap: var(--nx-space-3); }
.nxsteps__item {
  margin: 0;
  padding: var(--nx-space-4) var(--nx-space-5);
  background: var(--nx-cream);
  border-radius: var(--nx-radius-md);
  border-left: 3px solid var(--nx-gold-500);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
}

/* Story section — dark editorial band on a product page. */
.nxstory { position: relative; overflow: hidden; }
.nxstory__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.nxstory__inner { position: relative; }
.nxprose--dark > p { color: rgba(255, 255, 255, .84); }
.nxprose--dark { max-width: none; }
.nxstory__coda { margin-top: var(--nx-space-7); display: grid; gap: var(--nx-space-3); }
.nxstory__coda p {
  margin: 0; font-family: var(--nx-font-display);
  font-size: var(--nx-fs-h3); line-height: var(--nx-lh-snug); color: var(--nx-gold-300);
}

.nx-link-inline { color: var(--nx-gold-700); text-decoration: underline; text-underline-offset: 3px; }
.nx-link-inline:hover { color: var(--nx-forest-800); }

/* Checklist laid out as a grid on wide screens. */
.nx-checklist.nx-grid { display: grid; }

/* Accordion items need scroll-margin so the sticky bars do not cover them. */
.nxacc__item { scroll-margin-top: calc(var(--nx-header-h, 74px) + 62px); }