/* ==========================================================================
   NuXtrax 2026 — Design Tokens & Base Components
   --------------------------------------------------------------------------
   Derived from client-supplied visual references (Aug 2026).
   VISUAL SYSTEM ONLY. No copy is defined here; all site language is
   corporate-approved and comes from the existing PHP templates unchanged.

   LOAD ORDER: this file must be the LAST stylesheet in <head>, after
   style.min.css / d2.min.css / demo5.min.css / custom.css. The legacy Porto
   theme sheets are unlayered and heavily specific, so do NOT wrap this in
   @layer — an unlayered legacy rule beats any layered rule regardless of
   specificity. Everything here is namespaced `nx-` to avoid collisions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand core (from supplied palette) ------------------------------- */
  --nx-forest:          #1F2F28;  /* primary brand dark  */
  --nx-gold:            #C8A24D;  /* accent              */
  --nx-charcoal:        #222222;  /* neutral dark        */

  /* --- Forest ramp ------------------------------------------------------- */
  --nx-forest-900:      #16211C;
  --nx-forest-800:      #1F2F28;  /* = --nx-forest */
  --nx-forest-700:      #2C4438;
  --nx-forest-600:      #3A5A49;
  --nx-forest-100:      #E6EBE7;
  --nx-forest-050:      #F2F5F2;

  /* --- Gold ramp --------------------------------------------------------- */
  --nx-gold-700:        #8A6A22;  /* ONLY gold safe for text on light (5.1:1) */
  --nx-gold-600:        #A8843A;  /* hover state for gold surfaces */
  --nx-gold-500:        #C8A24D;  /* = --nx-gold — SURFACES ONLY, never text on white */
  --nx-gold-300:        #D9BC7B;
  --nx-gold-100:        #F3EBD9;  /* tint wash, e.g. "most popular" panel */

  /* --- Warm neutrals (the cream/bone fields in the comps) ---------------- */
  --nx-bone:            #FAF8F3;  /* lightest section field */
  --nx-cream:           #F5F2EA;  /* alternating section field */
  --nx-sand:            #EDE8DC;  /* subtle inset / disabled */
  --nx-hairline:        #E3DED3;  /* warm 1px rule */
  --nx-white:           #FFFFFF;

  /* --- Cool/ink neutrals -------------------------------------------------- */
  --nx-ink:             #222222;  /* body copy on light */
  --nx-ink-muted:       #5A5A5A;  /* secondary copy (7.0:1 on white) */
  --nx-ink-subtle:      #6E6E6E;  /* tertiary copy (5.2:1 on white) */
  --nx-ink-disabled:    #9A9A9A;  /* non-text only */
  --nx-rule:            #E5E5E5;  /* neutral 1px rule */

  /* --- Semantic surface roles -------------------------------------------- */
  --nx-surface-page:     var(--nx-white);
  --nx-surface-raised:   var(--nx-white);
  --nx-surface-sunken:   var(--nx-cream);
  --nx-surface-inverse:  var(--nx-forest-800);
  --nx-surface-inverse-2:var(--nx-charcoal);

  /* --- Semantic text roles ------------------------------------------------ */
  --nx-text:             var(--nx-ink);
  --nx-text-muted:       var(--nx-ink-muted);
  --nx-text-on-dark:     #FFFFFF;
  --nx-text-on-dark-mut: rgba(255, 255, 255, 0.72);
  --nx-text-accent:      var(--nx-gold-700);      /* on light backgrounds */
  --nx-text-accent-dark: var(--nx-gold-500);      /* on dark backgrounds  */

  /* --- Typography --------------------------------------------------------- */
  --nx-font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --nx-font-ui:      "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nx-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale — min at 360px, max at 1280px */
  --nx-fs-display-xl: clamp(2.5rem,  1.65rem + 3.4vw, 4.25rem);  /* 40 → 68 */
  --nx-fs-display-l:  clamp(2rem,    1.45rem + 2.2vw, 3.25rem);  /* 32 → 52 */
  --nx-fs-h2:         clamp(1.625rem,1.30rem + 1.3vw, 2.375rem); /* 26 → 38 */
  --nx-fs-h3:         clamp(1.25rem, 1.11rem + 0.6vw, 1.625rem); /* 20 → 26 */
  --nx-fs-h4:         1.125rem;
  --nx-fs-lead:       clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --nx-fs-body:       1rem;
  --nx-fs-sm:         0.875rem;
  --nx-fs-xs:         0.8125rem;
  --nx-fs-eyebrow:    0.75rem;
  --nx-fs-micro:      0.6875rem;

  --nx-lh-tight:      1.12;
  --nx-lh-snug:       1.28;
  --nx-lh-normal:     1.55;
  --nx-lh-relaxed:    1.7;

  --nx-ls-display:   -0.015em;
  --nx-ls-normal:     0;
  --nx-ls-eyebrow:    0.14em;
  --nx-ls-button:     0.08em;

  --nx-fw-regular:    400;
  --nx-fw-medium:     500;
  --nx-fw-semibold:   600;
  --nx-fw-bold:       700;

  /* Optimal measure for body copy */
  --nx-measure:       68ch;
  --nx-measure-short: 46ch;

  /* --- Space scale (4px base) --------------------------------------------- */
  --nx-space-1:  0.25rem;   /*  4 */
  --nx-space-2:  0.5rem;    /*  8 */
  --nx-space-3:  0.75rem;   /* 12 */
  --nx-space-4:  1rem;      /* 16 */
  --nx-space-5:  1.5rem;    /* 24 */
  --nx-space-6:  2rem;      /* 32 */
  --nx-space-7:  3rem;      /* 48 */
  --nx-space-8:  4rem;      /* 64 */
  --nx-space-9:  5rem;      /* 80 */
  --nx-space-10: 6rem;      /* 96 */
  --nx-space-11: 8rem;      /* 128 */

  --nx-section-y:  clamp(3.5rem, 1.9rem + 6.4vw, 7rem);   /* 56 → 112 */
  --nx-gutter:     clamp(1.25rem, 0.9rem + 1.4vw, 2rem);  /* 20 → 32  */
  --nx-container:  1200px;
  --nx-container-narrow: 820px;

  /* --- Radii --------------------------------------------------------------- */
  --nx-radius-none: 0;
  --nx-radius-xs:   2px;
  --nx-radius-sm:   4px;   /* buttons, inputs */
  --nx-radius-md:   6px;   /* cards */
  --nx-radius-lg:   10px;  /* large panels, media */
  --nx-radius-pill: 999px;

  /* --- Elevation (tinted with brand dark, never neutral black) ------------- */
  --nx-shadow-sm: 0 1px 2px rgba(31, 47, 40, 0.06);
  --nx-shadow-md: 0 2px 8px rgba(31, 47, 40, 0.08);
  --nx-shadow-lg: 0 10px 28px rgba(31, 47, 40, 0.10);
  --nx-shadow-xl: 0 20px 48px rgba(31, 47, 40, 0.14);

  /* --- Borders ------------------------------------------------------------- */
  --nx-border:        1px solid var(--nx-hairline);
  --nx-border-strong: 1px solid var(--nx-forest-800);
  --nx-border-gold:   1px solid var(--nx-gold-500);

  /* --- Motion -------------------------------------------------------------- */
  --nx-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --nx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --nx-dur-fast:    120ms;
  --nx-dur-base:    200ms;
  --nx-dur-slow:    360ms;

  /* --- Focus --------------------------------------------------------------- */
  --nx-focus-ring:  0 0 0 2px var(--nx-white), 0 0 0 4px var(--nx-forest-700);
  --nx-focus-ring-on-dark: 0 0 0 2px var(--nx-forest-900), 0 0 0 4px var(--nx-gold-500);

  /* --- Z-index ------------------------------------------------------------- */
  --nx-z-base:    1;
  --nx-z-sticky:  100;
  --nx-z-header:  200;
  --nx-z-overlay: 900;
  --nx-z-modal:   1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nx-dur-fast: 1ms;
    --nx-dur-base: 1ms;
    --nx-dur-slow: 1ms;
  }
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */

.nx-display-xl,
.nx-display-l,
.nx-h2,
.nx-h3 {
  font-family: var(--nx-font-display);
  font-weight: var(--nx-fw-regular);
  letter-spacing: var(--nx-ls-display);
  color: var(--nx-text);
  margin: 0;
  text-wrap: balance;
}

.nx-display-xl { font-size: var(--nx-fs-display-xl); line-height: var(--nx-lh-tight); }
.nx-display-l  { font-size: var(--nx-fs-display-l);  line-height: var(--nx-lh-tight); }
.nx-h2         { font-size: var(--nx-fs-h2);         line-height: var(--nx-lh-snug); }
.nx-h3         { font-size: var(--nx-fs-h3);         line-height: var(--nx-lh-snug); }

/* Italic serif accent — the "communicates." treatment in the reference comps.
   Use on at most ONE phrase per heading, and only in an existing headline. */
.nx-display-xl em,
.nx-display-l em,
.nx-h2 em {
  font-style: italic;
  color: var(--nx-forest-700);
}

.nx-h4 {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-h4);
  font-weight: var(--nx-fw-semibold);
  line-height: var(--nx-lh-snug);
  letter-spacing: var(--nx-ls-normal);
  color: var(--nx-text);
  margin: 0;
}

/* Small uppercase kicker above a heading. */
.nx-eyebrow {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-eyebrow);
  font-weight: var(--nx-fw-semibold);
  letter-spacing: var(--nx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--nx-text-accent);
  margin: 0 0 var(--nx-space-3);
  display: block;
}

.nx-eyebrow--on-dark { color: var(--nx-text-accent-dark); }
.nx-eyebrow--neutral { color: var(--nx-ink-subtle); }

.nx-lead {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-lead);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text-muted);
  max-width: var(--nx-measure);
  margin: 0;
}

.nx-body {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-normal);
  color: var(--nx-text);
  max-width: var(--nx-measure);
  margin: 0;
}

.nx-small { font-size: var(--nx-fs-sm);  line-height: var(--nx-lh-normal); color: var(--nx-text-muted); }
.nx-micro { font-size: var(--nx-fs-micro); line-height: 1.4; color: var(--nx-ink-subtle); }

/* Legal / FDA disclaimer text. */
.nx-disclaimer {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-micro);
  line-height: 1.5;
  color: var(--nx-ink-subtle);
  max-width: var(--nx-measure);
}

/* Inverse text contexts */
.nx-on-dark,
.nx-on-dark .nx-display-xl,
.nx-on-dark .nx-display-l,
.nx-on-dark .nx-h2,
.nx-on-dark .nx-h3,
.nx-on-dark .nx-h4,
.nx-on-dark .nx-body { color: var(--nx-text-on-dark); }

.nx-on-dark .nx-lead,
.nx-on-dark .nx-small { color: var(--nx-text-on-dark-mut); }

.nx-on-dark .nx-display-xl em,
.nx-on-dark .nx-display-l em,
.nx-on-dark .nx-h2 em { color: var(--nx-gold-300); }

/* Short gold rule used under section headings in the references. */
.nx-rule-accent {
  width: 56px;
  height: 2px;
  background: var(--nx-gold-500);
  border: 0;
  margin: var(--nx-space-4) 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.nx-container {
  width: 100%;
  max-width: var(--nx-container);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

.nx-container--narrow { max-width: var(--nx-container-narrow); }

.nx-section        { padding-block: var(--nx-section-y); background: var(--nx-surface-page); }
.nx-section--sunken{ background: var(--nx-surface-sunken); }
.nx-section--bone  { background: var(--nx-bone); }
.nx-section--forest{ background: var(--nx-surface-inverse);   color: var(--nx-text-on-dark); }
.nx-section--char  { background: var(--nx-surface-inverse-2); color: var(--nx-text-on-dark); }

/* Section header block: eyebrow + heading + lead */
.nx-section-head { margin-bottom: var(--nx-space-7); }
.nx-section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 720px;
}
.nx-section-head--center .nx-lead { margin-inline: auto; }
.nx-section-head--center .nx-rule-accent { margin-inline: auto; }

/* Auto-fit grid — collapses without media queries. */
.nx-grid {
  display: grid;
  gap: var(--nx-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.nx-grid--tight { gap: var(--nx-space-4); }
.nx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.nx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.nx-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Two-column split: media beside copy. */
.nx-split {
  display: grid;
  gap: clamp(var(--nx-space-6), 4vw, var(--nx-space-9));
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: center;
}
.nx-split--media-right > :first-child { order: 0; }

/* Divided strip — the icon row under the hero in the reference comps. */
.nx-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 45%), 1fr));
  background: var(--nx-cream);
}
.nx-strip > * {
  padding: var(--nx-space-6) var(--nx-space-4);
  text-align: center;
  border-inline-end: var(--nx-border);
  border-block-end: var(--nx-border);
}
.nx-strip > *:last-child { border-inline-end: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------------
   ACCESSIBILITY NOTE: white text on --nx-gold-500 is 2.4:1 and FAILS WCAG AA.
   The gold button therefore uses forest-green text (6.4:1). Do not override.
   -------------------------------------------------------------------------- */

.nx-btn {
  --_bg: var(--nx-forest-800);
  --_fg: var(--nx-white);
  --_bd: var(--nx-forest-800);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  min-height: 48px;                       /* touch target */
  padding: var(--nx-space-3) var(--nx-space-6);
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-sm);
  font-weight: var(--nx-fw-semibold);
  letter-spacing: var(--nx-ls-button);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--nx-radius-sm);
  cursor: pointer;
  transition: background var(--nx-dur-base) var(--nx-ease),
              border-color var(--nx-dur-base) var(--nx-ease),
              color var(--nx-dur-base) var(--nx-ease),
              transform var(--nx-dur-fast) var(--nx-ease);
}

.nx-btn:hover  { --_bg: var(--nx-forest-700); --_bd: var(--nx-forest-700); color: var(--_fg); }
.nx-btn:active { transform: translateY(1px); }
.nx-btn:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }

/* Primary commerce action — gold field, dark label. */
.nx-btn--gold {
  --_bg: var(--nx-gold-500);
  --_fg: var(--nx-forest-900);
  --_bd: var(--nx-gold-500);
}
.nx-btn--gold:hover { --_bg: var(--nx-gold-600); --_bd: var(--nx-gold-600); --_fg: var(--nx-white); }

/* Secondary — outlined on light surfaces. */
.nx-btn--outline {
  --_bg: transparent;
  --_fg: var(--nx-forest-800);
  --_bd: var(--nx-forest-800);
}
.nx-btn--outline:hover { --_bg: var(--nx-forest-800); --_fg: var(--nx-white); }

/* Secondary — outlined on dark surfaces. */
.nx-btn--ghost-light {
  --_bg: transparent;
  --_fg: var(--nx-white);
  --_bd: rgba(255, 255, 255, 0.45);
}
.nx-btn--ghost-light:hover { --_bg: rgba(255, 255, 255, 0.12); --_bd: var(--nx-white); }
.nx-btn--ghost-light:focus-visible { box-shadow: var(--nx-focus-ring-on-dark); }

.nx-btn--sm    { min-height: 40px; padding: var(--nx-space-2) var(--nx-space-4); font-size: var(--nx-fs-xs); }
.nx-btn--lg    { min-height: 56px; padding: var(--nx-space-4) var(--nx-space-8); font-size: var(--nx-fs-body); }
.nx-btn--block { display: flex; width: 100%; }

/* Quiet text link with arrow, e.g. "View all products →" */
.nx-link {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-sm);
  font-weight: var(--nx-fw-semibold);
  letter-spacing: var(--nx-ls-button);
  text-transform: uppercase;
  color: var(--nx-forest-800);
  text-decoration: none;
  border-bottom: 1px solid var(--nx-gold-500);
  padding-bottom: 2px;
  transition: border-color var(--nx-dur-base) var(--nx-ease);
}
.nx-link:hover { color: var(--nx-forest-700); border-bottom-color: var(--nx-forest-700); }
.nx-link:focus-visible { outline: none; box-shadow: var(--nx-focus-ring); }
.nx-on-dark .nx-link { color: var(--nx-white); }

/* --------------------------------------------------------------------------
   5. CARDS & PANELS
   -------------------------------------------------------------------------- */

.nx-card {
  display: flex;
  flex-direction: column;
  background: var(--nx-surface-raised);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: 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);
}

.nx-card--interactive:hover {
  box-shadow: var(--nx-shadow-lg);
  border-color: var(--nx-gold-300);
  transform: translateY(-2px);
}

.nx-card--flush   { padding: 0; overflow: hidden; }
.nx-card--sunken  { background: var(--nx-cream); border-color: transparent; }
.nx-card--gold    { background: var(--nx-gold-100); border-color: var(--nx-gold-300); }
.nx-card--forest  { background: var(--nx-forest-800); border-color: var(--nx-forest-700); color: var(--nx-text-on-dark); }

/* Featured / "most popular" emphasis. */
.nx-card--featured {
  border-color: var(--nx-gold-500);
  border-width: 2px;
  box-shadow: var(--nx-shadow-lg);
  position: relative;
}

.nx-badge {
  display: inline-block;
  padding: var(--nx-space-1) var(--nx-space-4);
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-micro);
  font-weight: var(--nx-fw-bold);
  letter-spacing: var(--nx-ls-eyebrow);
  text-transform: uppercase;
  color: var(--nx-forest-900);
  background: var(--nx-gold-500);
  border-radius: var(--nx-radius-pill);
}

.nx-badge--floating {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

/* Circular icon holder used throughout the reference comps. */
.nx-icon-circle {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--nx-radius-pill);
  border: 1px solid var(--nx-gold-300);
  color: var(--nx-forest-800);
  flex-shrink: 0;
}
.nx-icon-circle--filled { background: var(--nx-forest-800); border-color: var(--nx-forest-800); color: var(--nx-white); }
.nx-on-dark .nx-icon-circle { border-color: var(--nx-gold-500); color: var(--nx-gold-500); }

/* Checklist — the ticked benefit lists. */
.nx-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-space-4); }
.nx-checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--nx-space-3);
  align-items: start;
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-normal);
}
.nx-checklist li::before {
  content: "";
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 0.15em;
  border-radius: var(--nx-radius-pill);
  border: 1.5px solid var(--nx-gold-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6A22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.nx-on-dark .nx-checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A24D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. TESTIMONIAL
   --------------------------------------------------------------------------
   Sized for the site's REAL testimonials, which run long (Debra Attebery's is
   ~90 words). Quote text is clamped with a fade + "Read full story" rather
   than truncated, so no approved copy is ever silently cut.
   -------------------------------------------------------------------------- */

.nx-quote {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-4);
  background: var(--nx-surface-raised);
  border: var(--nx-border);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-6);
}

.nx-quote__text {
  font-family: var(--nx-font-display);
  font-size: var(--nx-fs-lead);
  line-height: var(--nx-lh-relaxed);
  color: var(--nx-text);
  margin: 0;
}

.nx-quote__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nx-quote__attribution {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  margin-block-start: auto;
  padding-block-start: var(--nx-space-4);
  border-block-start: var(--nx-border);
}

.nx-quote__avatar {
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--nx-radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}

.nx-quote__name {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-sm);
  font-weight: var(--nx-fw-semibold);
  color: var(--nx-text);
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */

.nx-field { display: grid; gap: var(--nx-space-2); }

.nx-label {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-xs);
  font-weight: var(--nx-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
}

.nx-input,
.nx-select,
.nx-textarea {
  font-family: var(--nx-font-ui);
  font-size: var(--nx-fs-body);
  color: var(--nx-text);
  background: var(--nx-white);
  border: 1px solid var(--nx-rule);
  border-radius: var(--nx-radius-sm);
  padding: var(--nx-space-3) var(--nx-space-4);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--nx-dur-base) var(--nx-ease),
              box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-input:focus-visible,
.nx-select:focus-visible,
.nx-textarea:focus-visible {
  outline: none;
  border-color: var(--nx-forest-700);
  box-shadow: 0 0 0 3px rgba(31, 47, 40, 0.12);
}

.nx-input[aria-invalid="true"] { border-color: #B3261E; }
.nx-help  { font-size: var(--nx-fs-xs); color: var(--nx-ink-subtle); }
.nx-error { font-size: var(--nx-fs-xs); color: #B3261E; font-weight: var(--nx-fw-medium); }

/* --------------------------------------------------------------------------
   8. UTILITIES
   -------------------------------------------------------------------------- */

.nx-stack        { display: grid; gap: var(--nx-space-4); align-content: start; justify-items: start; }
.nx-stack--sm    { gap: var(--nx-space-2); }
.nx-stack--lg    { gap: var(--nx-space-6); }
.nx-stack--center{ justify-items: center; text-align: center; }

.nx-cluster { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); align-items: center; }

.nx-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nx-radius-lg);
  object-fit: cover;
}

.nx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nx-skip-link {
  position: absolute;
  left: var(--nx-space-4);
  top: -100px;
  z-index: var(--nx-z-modal);
  background: var(--nx-forest-800);
  color: var(--nx-white);
  padding: var(--nx-space-3) var(--nx-space-5);
  border-radius: var(--nx-radius-sm);
  text-decoration: none;
  transition: top var(--nx-dur-base) var(--nx-ease);
}
.nx-skip-link:focus { top: var(--nx-space-4); }

/* --------------------------------------------------------------------------
   9. SCROLL REVEAL
   --------------------------------------------------------------------------
   Replaces Porto's `appear-animate` + animate.min.css (58 KB) — which the
   homepage uses for exactly six elements across three effects.

   Requires shared/assets/js/nuxtrax-reveal.js. That script adds
   `.nx-reveal-ready` to <html>; the hiding rules below are scoped to it, so
   if the script fails or JS is off, nothing is ever hidden. Never write a
   bare `[data-nx-reveal] { opacity: 0 }` rule — that is how a JS error turns
   into a blank page.
   -------------------------------------------------------------------------- */

:root {
  --nx-reveal-dur:    850ms;
  --nx-reveal-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nx-reveal-rise:   32px;   /* vertical travel  */
  --nx-reveal-slide:  48px;   /* horizontal travel */
  --nx-stagger-step:  90ms;
}

.nx-reveal-ready [data-nx-reveal] {
  opacity: 0;
  transition:
    opacity   var(--nx-reveal-dur) var(--nx-reveal-ease),
    transform var(--nx-reveal-dur) var(--nx-reveal-ease),
    clip-path var(--nx-reveal-dur) var(--nx-reveal-ease);
  transition-delay: var(--nx-reveal-delay, 0ms);
}

/* Travel directions. `up` is the default and covers most content. */
.nx-reveal-ready [data-nx-reveal="up"]    { transform: translateY(var(--nx-reveal-rise)); }
.nx-reveal-ready [data-nx-reveal="down"]  { transform: translateY(calc(var(--nx-reveal-rise) * -1)); }
.nx-reveal-ready [data-nx-reveal="left"]  { transform: translateX(calc(var(--nx-reveal-slide) * -1)); }
.nx-reveal-ready [data-nx-reveal="right"] { transform: translateX(var(--nx-reveal-slide)); }
.nx-reveal-ready [data-nx-reveal="scale"] { transform: scale(0.94); }

/* Media wipe — the image is opaque throughout; only the mask moves.
   The clip is applied to the CHILDREN, never to the observed element itself.
   An element clipped to zero height has no visible area, so IntersectionObserver
   can never reach its threshold and the reveal would never fire. */
.nx-reveal-ready [data-nx-reveal="mask"] { opacity: 1; }
.nx-reveal-ready [data-nx-reveal="mask"] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--nx-reveal-dur) var(--nx-reveal-ease);
  transition-delay: var(--nx-reveal-delay, 0ms);
}
.nx-reveal-ready [data-nx-reveal="mask"].nx-is-revealed > * {
  clip-path: inset(0 0 0 0);
}

/* Accent rule drawing itself in. Pair with .nx-rule-accent. */
.nx-reveal-ready [data-nx-reveal="rule"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
}

.nx-reveal-ready [data-nx-reveal].nx-is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger: children of a stagger container inherit an incremented delay.
   nth-child rather than a JS-set index, so server-rendered PHP needs no
   per-item markup. Twelve covers the largest grid on the site (8 tiles). */
.nx-reveal-ready [data-nx-stagger] > *:nth-child(1)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 0); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(2)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 1); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(3)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 2); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(4)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 3); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(5)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 4); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(6)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 5); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(7)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 6); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(8)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 7); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(9)  { --nx-reveal-delay: calc(var(--nx-stagger-step) * 8); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(10) { --nx-reveal-delay: calc(var(--nx-stagger-step) * 9); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(11) { --nx-reveal-delay: calc(var(--nx-stagger-step) * 10); }
.nx-reveal-ready [data-nx-stagger] > *:nth-child(12) { --nx-reveal-delay: calc(var(--nx-stagger-step) * 11); }

/* Optional scroll-linked drift for section media. Progressive enhancement:
   browsers without scroll-driven animations get a static image, which is a
   perfectly good outcome. Never attach this to anything carrying text. */
@supports (animation-timeline: view()) {
  .nx-parallax {
    animation: nx-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes nx-drift {
    from { transform: translateY(-3%) scale(1.06); }
    to   { transform: translateY(3%)  scale(1.06); }
  }
}

/* Reduced motion: content is present immediately, no transition, no drift.
   This must override every rule above, hence the !important. */
@media (prefers-reduced-motion: reduce) {
  .nx-reveal-ready [data-nx-reveal],
  .nx-reveal-ready [data-nx-reveal].nx-is-revealed {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .nx-parallax { animation: none !important; transform: none !important; }
}