/* ============================================================================
 * nx-enhance.css — merged home "premium polish" layer.
 * Concatenation (in cascade order) of the former per-section files:
 *   nx-enhance-top / -build / -work / -social / -convert.
 * Merged for fewer render-blocking requests on the homepage. Edit here.
 * ==========================================================================*/

/* ─────────── top ─────────── */
/* =============================================================================
   nx-enhance-top.css  —  PREMIUM POLISH + MOTION (ADDITIVE, GROUP A-top)
   -----------------------------------------------------------------------------
   Scope: HERO (.nx-hero / [data-nx-hero]), #operating-system, #trust.
   Pure CSS finish layer on top of the existing markup. Every rule is scoped
   under one of those three section roots — zero global selectors, zero layout
   changes, no transform on any home-fx-controlled element
   (data-nx-* / .nx-reveal).

   Coexistence notes:
     - .nx-hero__eyebrow (anchor) already owns a :hover translateY  -> we only
       layer glow / shadow / a ::after sheen, never transform.
     - .nx-btn--primary carries data-nx-magnet  -> NO transform; sheen + glow
       via an injected ::before sweep only.
     - .nx-kpi__card carries data-nx-tilt and already uses ::before (shine) and
       ::after (rail)  -> we add hover GLOW via box-shadow + a top hairline via
       background-image only; we never touch its transform or its pseudos.
     - .nx-hero__feat / .nx-hero__stats / .nx-hero__panel-cta / .nx-trust__point
       have NO data-nx-* attr  -> transform is safe on these.

   Token fallbacks are always literal so the file is robust in isolation.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0.  Shared local easing var (scoped reuse only — not a global override)
   ------------------------------------------------------------------------- */

/* =============================================================================
   1.  HERO  —  .nx-hero / [data-nx-hero]
   ========================================================================== */

/* 1a. Ambient depth behind the COPY ONLY.
   Attached to the left editorial column so it can never sit over the WebGL
   canvas / video. ::after with negative z-index keeps it strictly behind the
   flow content of .nx-hero__lead. position:relative does not alter the
   existing flex-column layout. */
.nx-hero .nx-hero__lead {
    position: relative;
}
.nx-hero .nx-hero__lead::after {
    content: "";
    position: absolute;
    /* bleed slightly past the copy box without reaching the right panel */
    top: -10%;
    left: -14%;
    width: 78%;
    height: 130%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 22% 30%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40)), transparent 70%),
        radial-gradient(50% 50% at 38% 70%,
            rgba(91, 140, 255, 0.10), transparent 72%);
    opacity: 0.34;
    filter: blur(8px);
    will-change: opacity;
}
@media (prefers-reduced-motion: no-preference) {
    .nx-hero .nx-hero__lead::after {
        animation: nxTopHeroAura 14s ease-in-out infinite alternate;
    }
}
@keyframes nxTopHeroAura {
    0%   { opacity: 0.26; }
    100% { opacity: 0.40; }
}

/* 1b. Eyebrow pill — add an ember-tinted glow + a left-to-right sheen sweep on
   hover. NO transform here (the base rule already owns translateY). */
.nx-hero .nx-hero__eyebrow {
    position: relative;
    overflow: hidden;
    transition:
        border-color .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        background-color .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        transform .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        box-shadow .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        color .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__eyebrow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 179, 122, 0.00) 35%,
        rgba(255, 179, 122, 0.28) 50%,
        rgba(255, 179, 122, 0.00) 65%,
        transparent 100%);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform .65s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity .2s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
/* keep the pill's existing inner content above the sheen */
.nx-hero .nx-hero__eyebrow > * { position: relative; z-index: 1; }
.nx-hero .nx-hero__eyebrow:hover {
    box-shadow:
        0 10px 30px -10px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 179, 122, 0.20),
        0 8px 26px -12px var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40));
}
.nx-hero .nx-hero__eyebrow:hover::after {
    transform: translateX(120%);
    opacity: 1;
}

/* 1c. Title — a touch more luminous, with a faint ember underglow on the
   serif <em>. No transform. */
.nx-hero .nx-hero__title {
    text-shadow:
        0 2px 24px rgba(0, 0, 0, 0.55),
        0 0 42px rgba(255, 179, 122, 0.05);
}
.nx-hero .nx-hero__title em {
    transition: text-shadow .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                color .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* 1d. CTA buttons.
   Primary carries data-nx-magnet  ->  NO transform; ember glow + sheen sweep
   via an injected ::before. The button is an inline-flex anchor with two
   spans; ::before sits behind them. */
.nx-hero .nx-hero__cta .nx-btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        background .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__cta .nx-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%);
    transform: translateX(-130%);
    opacity: 0;
    transition: transform .7s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity .2s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__cta .nx-btn--primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 16px 40px -14px rgba(197, 205, 214, 0.70),
        0 10px 34px -10px var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40));
}
.nx-hero .nx-hero__cta .nx-btn--primary:hover::before {
    transform: translateX(130%);
    opacity: 1;
}

/* Ghost CTA  —  cool/silver glow + sheen. No data-nx attr, but the base
   .nx-btn:hover already nudges translateY; we only add shadow + a sweep
   so we don't double-move it. */
.nx-hero .nx-hero__cta .nx-btn--ghost {
    position: relative;
    overflow: hidden;
    transition:
        background .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__cta .nx-btn--ghost > * { position: relative; z-index: 1; }
.nx-hero .nx-hero__cta .nx-btn--ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 100%);
    transform: translateX(-130%);
    opacity: 0;
    transition: transform .7s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                opacity .2s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__cta .nx-btn--ghost:hover {
    box-shadow:
        0 12px 32px -14px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(229, 233, 238, 0.10),
        0 0 24px -8px rgba(91, 140, 255, 0.22);
}
.nx-hero .nx-hero__cta .nx-btn--ghost:hover::before {
    transform: translateX(130%);
    opacity: 1;
}

/* 1e. Featured-case mini card  —  elevation + cool glow + a top accent
   hairline that fades in. No data-nx attr  ->  translateY is allowed. */
.nx-hero .nx-hero__feat {
    position: relative;
    transition:
        border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        background .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        transform .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__feat::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent,
        var(--nx-color-accent, #FFFFFF),
        transparent);
    opacity: 0;
    transition: opacity .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__feat:hover {
    transform: translateY(-3px);
    box-shadow:
        0 18px 44px -22px rgba(0, 0, 0, 0.7),
        0 0 26px -10px rgba(91, 140, 255, 0.22);
}
.nx-hero .nx-hero__feat:hover::after { opacity: 0.7; }
.nx-hero .nx-hero__feat .nx-img-ph--img img {
    transition: filter .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__feat:hover .nx-img-ph--img img {
    filter: saturate(1.08) brightness(1.04);
}

/* 1f. Stat chips strip  —  per-chip hover sheen on the <strong> value.
   The strip is a flex row of <span><strong>…</strong> label</span>. */
.nx-hero .nx-hero__stats span {
    position: relative;
    transition: color .4s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__stats span strong {
    transition: text-shadow .4s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                color .4s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__stats span:hover strong {
    color: var(--nx-color-ember-soft, #FFB37A);
    text-shadow: 0 0 16px var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40));
}

/* 1g. Nello intro pill (.nx-hero__panel-cta)  —  animated underline sweep +
   accent shimmer on the label. Base rule only animates `gap`, so transform is
   free; we keep to an underline + glow to stay restrained. */
.nx-hero .nx-hero__panel-cta {
    transition: gap .25s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                color .4s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
/* Restrained hover: warm the label + glow, and nudge the trailing arrow.
   No underline here — the label is a bare text node between an icon span and
   an arrow span, so any ::after underline would span the WHOLE pill (icon +
   text + arrow), not just the words. The arrow nudge reads cleaner. */
.nx-hero .nx-hero__panel-cta > span:last-child {
    transition: transform .4s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
.nx-hero .nx-hero__panel-cta:hover > span:last-child {
    transform: translateX(5px);
}
.nx-hero .nx-hero__panel-cta:hover {
    color: var(--nx-color-accent-soft, #FFFFFF);
    text-shadow: 0 0 18px rgba(255, 179, 122, 0.30);
}

/* =============================================================================
   2.  STUDIO OPERATING SYSTEM  —  #operating-system  (.nx-kpi)
   ========================================================================== */

/* 2a. Ambient depth. Section is already position:relative + isolation:isolate.
   ::before at z-index 0 sits behind the inner content (lifted to z-index 1).
   Layout untouched. overflow:hidden contains the glow on mobile. */
#operating-system { overflow: hidden; }
#operating-system .nx-section__inner { position: relative; z-index: 1; }
#operating-system::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 78% 16%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40)), transparent 72%),
        radial-gradient(34% 40% at 12% 88%,
            rgba(91, 140, 255, 0.10), transparent 72%);
    opacity: 0.20;
}
@media (prefers-reduced-motion: no-preference) {
    #operating-system::before {
        animation: nxTopKpiAura 18s ease-in-out infinite alternate;
    }
}
@keyframes nxTopKpiAura {
    0%   { opacity: 0.14; }
    100% { opacity: 0.26; }
}

/* 2b. Section eyebrow shimmer — the accent tick grows / glows on hover of the
   head. .nx-eyebrow--center uses ::before as its hairline tick. */
#operating-system .nx-section__head .nx-eyebrow {
    transition: color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
#operating-system .nx-section__head:hover .nx-eyebrow {
    color: var(--nx-color-ember-soft, #FFB37A);
}

/* 2c. KPI card hover GLOW.
   The card owns data-nx-tilt (transform) and uses both ::before and ::after.
   We must NOT touch transform or those pseudos. So we layer:
     - an ember+ambient box-shadow on hover (no transform),
     - a top accent hairline via background-image (no extra element).
   The card already transitions border-color/background/transform; we add a
   box-shadow transition without redeclaring transform. */
#operating-system .nx-kpi__card {
    transition:
        border-color var(--nx-dur, .45s) var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        background var(--nx-dur, .45s) var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        transform var(--nx-dur, .45s) var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        box-shadow .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        background-size .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    /* top accent hairline painted on the border-box, hidden until hover via
       background-size collapse. Composited under the existing surface bg by
       layering: existing background stays the base layer (surface color). */
    background-image: linear-gradient(90deg,
        transparent,
        var(--nx-color-ember-soft, #FFB37A),
        transparent);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 0% 1px;
}
#operating-system .nx-kpi__card:hover {
    box-shadow:
        0 26px 60px -28px rgba(0, 0, 0, 0.8),
        0 0 32px -12px var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40)),
        0 0 0 1px rgba(255, 179, 122, 0.10);
    background-size: 86% 1px;
}

/* gentle lift of the value's numerals on card hover (color/glow only) */
#operating-system .nx-kpi__card .nx-kpi__value {
    transition: text-shadow .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
#operating-system .nx-kpi__card:hover .nx-kpi__value {
    text-shadow: 0 0 28px rgba(255, 179, 122, 0.18);
}

/* =============================================================================
   3.  TRUST STRIP  —  #trust  (.nx-trust)
   ========================================================================== */

/* 3a. Ambient depth. .nx-trust is static by default; promote to a stacking
   context and lift the inner content above a scoped ::before. */
#trust {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
#trust .nx-trust__inner { position: relative; z-index: 1; }
#trust::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 50% 50%,
            rgba(226, 90, 28, 0.10), transparent 70%),
        linear-gradient(90deg,
            rgba(91, 140, 255, 0.05), transparent 30%, transparent 70%,
            rgba(255, 179, 122, 0.05));
    opacity: 0.5;
}

/* 3b. Trust point cells — number glow + a centered underline sweep on hover.
   .nx-trust__point has no data-nx attr  ->  translateY is allowed. */
#trust .nx-trust__point {
    position: relative;
    padding-block: 6px;
    transition: transform .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
#trust .nx-trust__point b {
    transition: color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                text-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
#trust .nx-trust__point::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 36px;
    height: 1px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    background: linear-gradient(90deg,
        transparent,
        var(--nx-color-ember-soft, #FFB37A),
        transparent);
    transition: transform .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
#trust .nx-trust__point:hover {
    transform: translateY(-3px);
}
#trust .nx-trust__point:hover b {
    color: var(--nx-color-ember-soft, #FFB37A);
    text-shadow: 0 0 20px var(--nx-color-ember-glow, rgba(226, 90, 28, 0.40));
}
#trust .nx-trust__point:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* 3c. Tech-stack pills — soft lift + cool border glow on hover. These are
   the bare <span> chips (not the label span). No data-nx attr. */
#trust .nx-trust__stack span:not(.nx-trust__stack-label) {
    transition:
        border-color .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        background .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        transform .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        box-shadow .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        color .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}
#trust .nx-trust__stack span:not(.nx-trust__stack-label):hover {
    transform: translateY(-2px);
    border-color: var(--nx-color-line-strong, rgba(229, 233, 238, 0.22));
    background: rgba(229, 233, 238, 0.06);
    color: var(--nx-color-accent, #FFFFFF);
    box-shadow:
        0 10px 24px -14px rgba(0, 0, 0, 0.6),
        0 0 18px -8px rgba(91, 140, 255, 0.25);
}

/* =============================================================================
   4.  REVEAL POLISH  (additive blur-in alongside the existing fade; NEVER
       touches transform — home-fx owns .nx-reveal -> .is-in transform).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    #operating-system .nx-reveal {
        filter: blur(7px);
        transition: filter .8s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #operating-system .nx-reveal.is-in { filter: blur(0); }

    #trust .nx-reveal {
        filter: blur(7px);
        transition: filter .8s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #trust .nx-reveal.is-in { filter: blur(0); }
}

/* =============================================================================
   5.  MOBILE  —  disable hover-lift / glow-follow, lighten ambience, no
       horizontal overflow. (hover:none),(pointer:coarse)
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
    .nx-hero .nx-hero__feat:hover,
    #trust .nx-trust__point:hover,
    #trust .nx-trust__stack span:not(.nx-trust__stack-label):hover {
        transform: none;
        box-shadow: none;
    }
    .nx-hero .nx-hero__eyebrow:hover,
    .nx-hero .nx-hero__cta .nx-btn--primary:hover,
    .nx-hero .nx-hero__cta .nx-btn--ghost:hover,
    #operating-system .nx-kpi__card:hover {
        box-shadow: none;
    }
    .nx-hero .nx-hero__eyebrow::after,
    .nx-hero .nx-hero__cta .nx-btn--primary::before,
    .nx-hero .nx-hero__cta .nx-btn--ghost::before {
        display: none;
    }
    /* lighten ambient glows on small screens */
    .nx-hero .nx-hero__lead::after { opacity: 0.22; }
    #operating-system::before { opacity: 0.12; }
    #trust::before { opacity: 0.34; }
}

/* =============================================================================
   6.  REDUCED MOTION  —  kill all transitions / animations / parallax we add;
       keep hover state changes instant and carrying no essential info.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nx-hero .nx-hero__lead::after,
    #operating-system::before,
    #trust::before {
        animation: none !important;
    }
    .nx-hero .nx-hero__eyebrow,
    .nx-hero .nx-hero__eyebrow::after,
    .nx-hero .nx-hero__title em,
    .nx-hero .nx-hero__cta .nx-btn--primary,
    .nx-hero .nx-hero__cta .nx-btn--primary::before,
    .nx-hero .nx-hero__cta .nx-btn--ghost,
    .nx-hero .nx-hero__cta .nx-btn--ghost::before,
    .nx-hero .nx-hero__feat,
    .nx-hero .nx-hero__feat::after,
    .nx-hero .nx-hero__feat .nx-img-ph--img img,
    .nx-hero .nx-hero__stats span,
    .nx-hero .nx-hero__stats span strong,
    .nx-hero .nx-hero__panel-cta,
    .nx-hero .nx-hero__panel-cta > span:last-child,
    #operating-system .nx-section__head .nx-eyebrow,
    #operating-system .nx-kpi__card,
    #operating-system .nx-kpi__card .nx-kpi__value,
    #trust .nx-trust__point,
    #trust .nx-trust__point b,
    #trust .nx-trust__point::after,
    #trust .nx-trust__stack span:not(.nx-trust__stack-label) {
        transition: none !important;
    }
    /* no sweep / no lift under reduced motion */
    .nx-hero .nx-hero__feat:hover,
    .nx-hero .nx-hero__panel-cta:hover > span:last-child,
    #trust .nx-trust__point:hover,
    #trust .nx-trust__stack span:not(.nx-trust__stack-label):hover {
        transform: none;
    }
    .nx-hero .nx-hero__eyebrow::after,
    .nx-hero .nx-hero__cta .nx-btn--primary::before,
    .nx-hero .nx-hero__cta .nx-btn--ghost::before,
    .nx-hero .nx-hero__panel-cta::after,
    #trust .nx-trust__point::after {
        display: none;
    }
}


/* ─────────── build ─────────── */
/* ============================================================================
   nx-enhance-build.css  ·  Group B-build  ·  PREMIUM POLISH + MOTION (ADDITIVE)
   ----------------------------------------------------------------------------
   Scope: #disciplines, #by-stage, #pipeline ONLY. Every selector is namespaced
   under one of those ids — zero global side-effects, zero collision with the
   other enhancement groups.

   Coexistence with nexlla-home-fx.js:
     • Tiles/cards/heads carry .nx-reveal and/or data-nx-tilt -> JS owns their
       inline `transform`. This file NEVER sets transform/transition-transform
       on those elements; it enhances only via box-shadow, border-color,
       background, filter, color, opacity and ::before/::after glow layers.
     • The tilt JS exposes --nx-shine-x / --nx-shine-y (cursor position). We
       reuse those (with 50% fallbacks) to drive a cursor-follow glow overlay
       on the tiles — purely a background gradient, no transform.
     • Pipeline rail/fill/nodes have NO data-nx-* and NO .nx-reveal, and their
       --progress / .is-on / .is-active are JS-driven; we only layer glow on
       top of those states, never re-implement them.
     • Decorative ambient layers (scoped section ::before) MAY use transform.

   Tokens used (all with literal fallbacks):
     --nx-color-ember #E25A1C · --nx-color-ember-soft #FFB37A
     --nx-color-ember-glow rgba(226,90,28,.40) · cool #5B8CFF
     --nx-color-accent #FFFFFF · surfaces #0B0C0E / #14161A
     --nx-color-line rgba(229,233,238,.10) / line-strong rgba(229,233,238,.22)
     --nx-ease-out cubic-bezier(.18,.72,.18,1)
   ========================================================================== */

/* Local easing fallback used throughout this file. */
#disciplines,
#by-stage,
#pipeline {
    --nxb-ease: var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* ===========================================================================
   1 · AMBIENT DEPTH  ·  one subtle scoped backdrop per section
   .nx-section is already position:relative, so a ::before reaches behind all
   content. We keep content above it by lifting .nx-section__inner to z-index:1
   (layout unchanged — inner is a plain block).
   =========================================================================== */
#disciplines,
#by-stage,
#pipeline {
    overflow: hidden; /* keep ambient glows from leaking horizontal overflow */
}

#disciplines > .nx-section__inner,
#by-stage   > .nx-section__inner,
#pipeline   > .nx-section__inner {
    position: relative;
    z-index: 1;
}

#disciplines::before,
#by-stage::before,
#pipeline::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .9;
}

/* Disciplines — twin glow: warm ember high-right, cool wash low-left. */
#disciplines::before {
    background:
        radial-gradient(46% 38% at 84% 8%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)), transparent 70%),
        radial-gradient(50% 44% at 10% 92%,
            rgba(91, 140, 255, .14), transparent 72%);
    opacity: .42;
}

/* By-stage — soft cool centre wash, very restrained. */
#by-stage::before {
    background:
        radial-gradient(58% 50% at 50% 0%,
            rgba(91, 140, 255, .12), transparent 70%),
        radial-gradient(40% 40% at 92% 96%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)), transparent 74%);
    opacity: .34;
}

/* Pipeline — directional ember sweep tracing the rail, plus a faint hairline grid. */
#pipeline::before {
    background:
        radial-gradient(60% 30% at 0% 16%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)), transparent 66%),
        radial-gradient(50% 30% at 100% 20%,
            rgba(91, 140, 255, .12), transparent 70%),
        repeating-linear-gradient(90deg,
            rgba(229, 233, 238, .03) 0, rgba(229, 233, 238, .03) 1px,
            transparent 1px, transparent 96px);
    opacity: .40;
}

/* ===========================================================================
   2 · SECTION HEADS  ·  reveal polish + eyebrow shimmer
   =========================================================================== */

/* Enrich the existing fade-up reveal with a focus-in blur. We touch ONLY
   filter (home-fx owns opacity/transform on .nx-reveal). */
@media (prefers-reduced-motion: no-preference) {
    #disciplines .nx-reveal,
    #by-stage   .nx-reveal,
    #pipeline   .nx-reveal {
        filter: blur(6px);
        transition: filter .9s var(--nxb-ease);
    }
    #disciplines .nx-reveal.is-in,
    #by-stage   .nx-reveal.is-in,
    #pipeline   .nx-reveal.is-in {
        filter: blur(0);
    }
}

/* Title accent <em> — gentle warm glow so the serif italic reads as a highlight. */
#disciplines .nx-section__title em,
#by-stage   .nx-section__title em,
#pipeline   .nx-section__title em {
    text-shadow: 0 0 24px rgba(226, 90, 28, .18);
}

/* Eyebrow accent ticks — animate the existing ::before / ::after gradient as a
   slow shimmer. We add ONLY an animation; geometry (28/32px, 1px) is untouched. */
@media (prefers-reduced-motion: no-preference) {
    #disciplines .nx-eyebrow::before,
    #disciplines .nx-eyebrow--center::after,
    #by-stage   .nx-eyebrow::before,
    #by-stage   .nx-eyebrow--center::after,
    #pipeline   .nx-eyebrow::before,
    #pipeline   .nx-eyebrow--center::after {
        animation: nxbTick 3.6s var(--nxb-ease) infinite;
    }
}
@keyframes nxbTick {
    0%, 100% { opacity: .55; filter: none; }
    50%      { opacity: 1;   filter: drop-shadow(0 0 4px rgba(226, 90, 28, .35)); }
}

/* ===========================================================================
   3 · DISCIPLINE TILES  ·  #disciplines .nx-disc__tile
   Tilt + reveal controlled -> NO transform here. We layer:
     • a corner ember glow (::before) that fades in on hover
     • a cursor-follow sheen (::after) driven by --nx-shine-x/-y from the tilt JS
     • elevated ambient + ember shadow and a stronger border on hover
   The tile already has overflow:hidden + isolation:isolate, so our pseudo
   layers clip cleanly to the rounded card and never escape.
   =========================================================================== */
#disciplines .nx-disc__tile {
    transition:
        border-color var(--nx-dur, .32s) var(--nxb-ease),
        background    var(--nx-dur, .32s) var(--nxb-ease),
        box-shadow    .5s var(--nxb-ease);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

/* Corner ember glow — lives above the canvas, below the body text. */
#disciplines .nx-disc__tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(60% 55% at 100% 0%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)), transparent 62%);
    transition: opacity .5s var(--nxb-ease);
}

/* Cursor-follow sheen — reuses the tilt JS shine vars (50% fallback = centred). */
#disciplines .nx-disc__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(34% 34% at var(--nx-shine-x, 50%) var(--nx-shine-y, 50%),
            rgba(255, 255, 255, .10), transparent 60%);
    transition: opacity .5s var(--nxb-ease);
    mix-blend-mode: screen;
}

/* Keep body text/link above the glow layers (layout unchanged). */
#disciplines .nx-disc__body { position: relative; z-index: 1; }

#disciplines .nx-disc__tile:hover {
    border-color: var(--nx-color-line-strong, rgba(229, 233, 238, .22));
    box-shadow:
        0 26px 52px -22px rgba(0, 0, 0, .72),
        0 0 30px -10px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
}
#disciplines .nx-disc__tile:hover::before { opacity: 1; }
#disciplines .nx-disc__tile:hover::after  { opacity: 1; }

/* Top accent hairline that wipes in on hover. */
#disciplines .nx-disc__body .nx-disc__num {
    position: relative;
}
#disciplines .nx-disc__num::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg,
        var(--nx-color-ember, #E25A1C), var(--nx-color-ember-soft, #FFB37A));
    border-radius: 2px;
    transition: width .55s var(--nxb-ease);
}
#disciplines .nx-disc__tile:hover .nx-disc__num::after { width: 34px; }

/* Discipline "Explore" link — warm tint + arrow ignition on hover. */
#disciplines .nx-disc__tile:hover .nx-disc__link {
    color: var(--nx-color-ember-soft, #FFB37A);
}

/* Footer pill — refined ember sheen sweep on hover. */
#disciplines .nx-disc__foot a {
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--nx-dur, .32s) var(--nxb-ease),
        background    var(--nx-dur, .32s) var(--nxb-ease),
        box-shadow    .5s var(--nxb-ease);
}
#disciplines .nx-disc__foot a::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 35%, rgba(255, 179, 122, .22) 50%, transparent 65%);
    transform: translateX(-120%);
    opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    #disciplines .nx-disc__foot a:hover::before {
        opacity: 1;
        transform: translateX(120%);
        transition: transform .8s var(--nxb-ease), opacity .3s linear;
    }
}
#disciplines .nx-disc__foot a:hover {
    box-shadow: 0 0 26px -10px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
}

/* ===========================================================================
   4 · BY-STAGE TIER CARDS  ·  #by-stage .nx-bystage__card
   Tilt + reveal controlled -> NO transform. The card already has a per-tier
   --tier accent and a hover ::after glow (owned by inline CSS in home.php).
   We DO NOT touch its ::after. We add: a left tier-accent hairline that grows
   in, a cursor-follow sheen via the tilt shine vars, depth shadow, perk/arrow
   accent lift — all additive and tier-tinted via color-mix on --tier.
   =========================================================================== */
#by-stage .nx-bystage__card {
    /* extend the inline transition list with box-shadow (border/transform/bg
       already declared inline; we only ADD shadow so nothing is overridden). */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition:
        border-color var(--nx-dur, .3s) var(--nxb-ease),
        background    var(--nx-dur, .3s) var(--nxb-ease),
        box-shadow    .5s var(--nxb-ease);
}

/* Cursor-follow sheen — separate pseudo so we never clash with the inline
   ::after radial glow. ::before is unused by the inline CSS. */
#by-stage .nx-bystage__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(40% 40% at var(--nx-shine-x, 50%) var(--nx-shine-y, 50%),
            color-mix(in srgb, var(--tier, #FFFFFF) 22%, transparent), transparent 62%);
    transition: opacity .5s var(--nxb-ease);
    mix-blend-mode: screen;
}
#by-stage .nx-bystage__card:hover::before { opacity: 1; }

/* Keep card content above both glow layers. */
#by-stage .nx-bystage__top,
#by-stage .nx-bystage__line,
#by-stage .nx-bystage__perk,
#by-stage .nx-bystage__arrow { position: relative; z-index: 1; }

#by-stage .nx-bystage__card:hover {
    box-shadow:
        0 24px 50px -22px rgba(0, 0, 0, .70),
        0 0 28px -12px color-mix(in srgb, var(--tier, #FFFFFF) 60%, transparent);
}

/* Tier-accent hairline under the tier name, grows on hover. */
#by-stage .nx-bystage__top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 2px;
    width: 0;
    background: var(--tier, #FFFFFF);
    border-radius: 2px;
    box-shadow: 0 0 10px color-mix(in srgb, var(--tier, #FFFFFF) 70%, transparent);
    transition: width .55s var(--nxb-ease);
}
#by-stage .nx-bystage__card:hover .nx-bystage__top::after { width: 40px; }

/* Perk pill + arrow lift on hover (color/border only — no transform). */
#by-stage .nx-bystage__card:hover .nx-bystage__perk {
    border-color: var(--tier, #FFFFFF);
    box-shadow: 0 0 16px -6px color-mix(in srgb, var(--tier, #FFFFFF) 70%, transparent);
}

/* ===========================================================================
   5 · PIPELINE  ·  #pipeline
   Stage cards carry .nx-reveal -> NO transform. Rail / fill / nodes have no
   data-nx-* and no .nx-reveal, and their JS-driven states (--progress, .is-on,
   .is-active) are preserved; we only layer glow on top.
   =========================================================================== */

/* Stage cards — ambient depth + ember edge on hover; reinforce the JS .is-active
   state with a warmer glow. Transform untouched (reveal-controlled). */
#pipeline .nx-pipeline__stage {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition:
        border-color var(--nx-dur, .32s) var(--nxb-ease),
        background    var(--nx-dur, .32s) var(--nxb-ease),
        box-shadow    .5s var(--nxb-ease);
}

/* Top accent hairline (fades + wipes in on hover / active). */
#pipeline .nx-pipeline__stage::before {
    content: "";
    position: absolute;
    top: 0;
    /* Inset by the card's corner radius so the accent sits on the FLAT top edge
       between the rounded corners — never overshooting them on the left/right. */
    left: var(--nx-radius-lg, 16px);
    right: var(--nx-radius-lg, 16px);
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--nx-color-ember, #E25A1C), var(--nx-color-ember-soft, #FFB37A), transparent 80%);
    border-radius: 0 0 2px 2px;
    opacity: 0;
    transition: opacity .5s var(--nxb-ease);
}
#pipeline .nx-pipeline__stage:hover::before,
#pipeline .nx-pipeline__stage.is-active::before { opacity: 1; }

#pipeline .nx-pipeline__stage:hover {
    border-color: var(--nx-color-line-strong, rgba(229, 233, 238, .22));
    background: var(--nx-color-surface-2, #14161A);
    box-shadow:
        0 24px 48px -20px rgba(0, 0, 0, .68),
        0 0 26px -12px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
}
/* Augment the JS active state with an ember-tinted ambient glow (its existing
   silver ring shadow stays; we add a second, layered shadow). */
#pipeline .nx-pipeline__stage.is-active {
    box-shadow:
        0 0 0 1px rgba(197, 205, 214, .18),
        0 24px 48px -16px rgba(0, 0, 0, .55),
        0 0 34px -12px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
}

/* Numeral — warm glow once the stage is active (color owned by existing CSS). */
#pipeline .nx-pipeline__stage.is-active .nx-pipeline__numeral {
    filter: drop-shadow(0 0 14px rgba(226, 90, 28, .28));
}

/* Rail fill — give the JS-driven progress bar an ember sheen + soft bloom. */
#pipeline .nx-pipeline__fill {
    box-shadow: 0 0 12px -2px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
}

/* Active rail node — ember halo layered onto the JS .is-on ring (no transform;
   the JS sets scale on .is-on, which we leave intact). */
#pipeline .nx-pipeline__node.is-on {
    box-shadow:
        0 0 0 6px rgba(197, 205, 214, .12),
        0 0 16px -2px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
}

/* Bullet rows — subtle warm tick on hover of the parent stage. */
#pipeline .nx-pipeline__stage:hover .nx-pipeline__bullets li {
    color: var(--nx-color-ember-soft, #FFB37A);
    transition: color .45s var(--nxb-ease);
}

/* Footer line — faint warm glow to seat it against the ambient. */
#pipeline .nx-pipeline__foot {
    text-shadow: 0 0 18px rgba(226, 90, 28, .12);
}

/* ===========================================================================
   6 · ACCESSIBILITY  ·  reduced motion -> static, no shimmer/sweep
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #disciplines .nx-reveal,
    #by-stage   .nx-reveal,
    #pipeline   .nx-reveal {
        filter: none !important;
        transition: none !important;
    }
    #disciplines .nx-eyebrow::before,
    #disciplines .nx-eyebrow--center::after,
    #by-stage   .nx-eyebrow::before,
    #by-stage   .nx-eyebrow--center::after,
    #pipeline   .nx-eyebrow::before,
    #pipeline   .nx-eyebrow--center::after {
        animation: none !important;
    }
    #disciplines .nx-disc__foot a::before {
        display: none !important;
    }
    /* Hover state changes (color/border/shadow) remain but apply instantly. */
    #disciplines .nx-disc__tile,
    #disciplines .nx-disc__tile::before,
    #disciplines .nx-disc__tile::after,
    #disciplines .nx-disc__num::after,
    #disciplines .nx-disc__foot a,
    #by-stage   .nx-bystage__card,
    #by-stage   .nx-bystage__card::before,
    #by-stage   .nx-bystage__top::after,
    #pipeline   .nx-pipeline__stage,
    #pipeline   .nx-pipeline__stage::before,
    #pipeline   .nx-pipeline__bullets li {
        transition: none !important;
    }
}

/* ===========================================================================
   7 · TOUCH / COARSE POINTER  ·  drop hover-lift & cursor-follow glow
   Static, lighter ambient; never obscure text; no horizontal overflow.
   =========================================================================== */
@media (hover: none), (pointer: coarse) {
    /* Disable cursor-follow sheens (no real cursor on touch). */
    #disciplines .nx-disc__tile::after,
    #by-stage   .nx-bystage__card::before {
        display: none !important;
    }
    /* Soften ambient backdrops on small / touch screens. */
    #disciplines::before { opacity: .26; }
    #by-stage::before    { opacity: .22; }
    #pipeline::before     { opacity: .24; }

    /* Neutralise hover-only shadows so nothing sticks on tap. */
    #disciplines .nx-disc__tile:hover,
    #by-stage   .nx-bystage__card:hover,
    #pipeline   .nx-pipeline__stage:hover {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}


/* ─────────── work ─────────── */
/* ============================================================================
   nx-enhance-work.css  —  PREMIUM POLISH + MOTION (additive layer)
   Group: C-work
   Sections: #featured-case · #nx-work-static · #nello-spotlight
   ----------------------------------------------------------------------------
   ADDITIVE ONLY. Every rule is scoped under one of the three section ids so it
   can never leak globally or collide with the other 4 enhancement groups.

   Coexistence with nexlla-home-fx.js:
   - Elements carrying data-nx-* (data-nx-tilt / data-nx-parallax / data-nx-magnet)
     and/or .nx-reveal are driven by inline JS transforms. We NEVER set transform
     (or transition transform) on those. We enhance them only via box-shadow,
     border, background, filter, color, opacity and ::before/::after glow layers.
   - Transform is used ONLY on purely decorative layers we add (::before/::after)
     and on elements with NO data-nx-* attribute (e.g. the case-study image,
     the work-card media image overlay).
   ========================================================================== */

/* ---- tokens / fallbacks reused below (literal fallbacks always provided) ----
   ember      var(--nx-color-ember,#E25A1C)
   ember-soft var(--nx-color-ember-soft,#FFB37A)
   ember-glow var(--nx-color-ember-glow,rgba(226,90,28,.40))
   cool       #5B8CFF
   silver     var(--nx-color-accent,#FFFFFF)
   surface    var(--nx-color-surface,#0B0C0E) / surface-2 var(--nx-color-surface-2,#14161A)
   line       var(--nx-color-line,rgba(229,233,238,.10)) / line-strong rgba(229,233,238,.22)
   ease       var(--nx-ease-out,cubic-bezier(.22,1,.36,1))
*/

/* ====================================================================== */
/*  CONTENT STACKING — make sure ambient ::before layers sit BEHIND copy   */
/*  (does not change layout; .nx-section is already position:relative)     */
/* ====================================================================== */
#featured-case > .nx-section__inner,
#nx-work-static > .nx-section__inner,
#nello-spotlight > .nx-section__inner {
    position: relative;
    z-index: 1;
}

/* ====================================================================== */
/*  AMBIENT DEPTH — one scoped, behind-content glow per section            */
/* ====================================================================== */
#featured-case::before,
#nx-work-static::before,
#nello-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Featured case — warm ember bloom rising from lower-right, faint grid wash */
#featured-case::before {
    background:
        radial-gradient(60% 55% at 82% 18%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)) 0%,
            transparent 62%),
        radial-gradient(70% 60% at 8% 96%,
            rgba(91, 140, 255, .10) 0%,
            transparent 60%);
    opacity: .38;
    will-change: opacity;
    transition: opacity .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* Work grid — cool depth wash, even and quiet so cards read as the subject */
#nx-work-static::before {
    background:
        radial-gradient(58% 50% at 50% -6%,
            rgba(91, 140, 255, .12) 0%,
            transparent 62%),
        radial-gradient(46% 44% at 100% 100%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)) 0%,
            transparent 66%);
    opacity: .30;
}

/* Nello — cinematic ember/cool split behind the panel + a faint scanline */
#nello-spotlight::before {
    background:
        radial-gradient(54% 60% at 84% 50%,
            var(--nx-color-ember-glow, rgba(226, 90, 28, .40)) 0%,
            transparent 60%),
        radial-gradient(50% 70% at 6% 30%,
            rgba(91, 140, 255, .12) 0%,
            transparent 62%),
        repeating-linear-gradient(
            to bottom,
            rgba(229, 233, 238, .015) 0px,
            rgba(229, 233, 238, .015) 1px,
            transparent 1px,
            transparent 4px);
    opacity: .40;
}

/* ====================================================================== */
/*  EYEBROW SHIMMER — accent tick grows + sheen sweeps across the label    */
/*  (.nx-eyebrow has no data-nx-* — safe; we animate only its ::before)    */
/* ====================================================================== */
#featured-case .nx-eyebrow::before,
#nx-work-static .nx-eyebrow::before,
#nello-spotlight .nx-eyebrow::before {
    transition:
        width .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
        background .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* ============================================================ */
/*  MOTION & HOVER — only under prefers-reduced-motion: no-pref  */
/* ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    /* ---- Eyebrow: tick lengthens + warms slightly when its head reveals ---- */
    #featured-case .nx-section__head.is-in .nx-eyebrow::before,
    #nx-work-static .nx-section__head.is-in .nx-eyebrow::before,
    #nello-spotlight .nx-section__head.is-in .nx-eyebrow::before {
        width: 40px;
        background: linear-gradient(90deg,
            transparent,
            var(--nx-color-ember-soft, #FFB37A),
            transparent);
    }

    /* ---- Reveal polish: add a slight de-blur alongside the existing fade.
            We DO NOT touch transform (home-fx owns it) — only filter+opacity. */
    #featured-case .nx-reveal,
    #nx-work-static .nx-reveal,
    #nello-spotlight .nx-reveal {
        filter: blur(6px);
        transition: filter .7s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-reveal.is-in,
    #nx-work-static .nx-reveal.is-in,
    #nello-spotlight .nx-reveal.is-in {
        filter: blur(0);
    }

    /* ================================================================== */
    /*  #featured-case — the deep-dive project card                        */
    /* ================================================================== */

    /* Card glass lift. The card itself is data-nx-tilt + .nx-reveal, so we
       enhance ONLY box-shadow / border / background — never transform. */
    #featured-case .nx-case__card {
        transition:
            box-shadow .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            border-color .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            background .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-case__card:hover {
        border-color: var(--nx-color-line-strong, rgba(229, 233, 238, .22));
        box-shadow:
            0 28px 70px -28px rgba(0, 0, 0, .82),
            0 0 0 1px rgba(255, 179, 122, .10),
            0 18px 60px -34px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
        background:
            radial-gradient(120% 120% at 100% 0%, rgba(214, 179, 127, .12), transparent 60%),
            var(--nx-color-surface-2, #14161A);
    }

    /* Media frame: subtle image zoom (the <img> has NO data-nx-* → transform OK)
       + a warm corner glow that fades in on hover. */
    #featured-case .nx-case__media img {
        transition: transform .65s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                    filter .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
        will-change: transform;
    }
    #featured-case .nx-case__card:hover .nx-case__media img {
        transform: scale(1.045);
        filter: saturate(108%) contrast(102%);
    }
    #featured-case .nx-case__media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        border-radius: inherit;
        opacity: 0;
        background:
            radial-gradient(80% 70% at 50% 110%,
                var(--nx-color-ember-glow, rgba(226, 90, 28, .40)) 0%,
                transparent 62%);
        mix-blend-mode: screen;
        transition: opacity .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-case__card:hover .nx-case__media::after {
        opacity: 1;
    }
    /* Thin top accent hairline fading in on hover (decorative ::before). */
    #featured-case .nx-case__media::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 1px;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        background: linear-gradient(90deg,
            transparent,
            var(--nx-color-ember-soft, #FFB37A),
            transparent);
        transition: opacity .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-case__card:hover .nx-case__media::before {
        opacity: .9;
    }

    /* Metric emphasis: the accent rule warms + grows, value brightens. */
    #featured-case .nx-case__metric {
        transition: border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-case__metric b {
        transition: color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                    text-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-case__card:hover .nx-case__metric {
        border-left-color: var(--nx-color-ember-soft, #FFB37A);
    }
    #featured-case .nx-case__card:hover .nx-case__metric b {
        text-shadow: 0 0 22px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
    }
    /* Stack chips lift their border on hover of the card. */
    #featured-case .nx-case__stack span {
        transition: border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                    color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-case__card:hover .nx-case__stack span {
        border-color: var(--nx-color-line-strong, rgba(229, 233, 238, .22));
        color: var(--nx-color-text, #EEF1F4);
    }

    /* ================================================================== */
    /*  #nx-work-static — the work grid cards                              */
    /*  Cards are data-nx-tilt + .nx-reveal → base CSS already does the     */
    /*  translateY/img-zoom + tilt JS. We add ONLY glow/border/overlay so   */
    /*  we never double-drive transform.                                   */
    /* ================================================================== */
    #nx-work-static .nx-work__card {
        /* Extend (not override) the base transition with box-shadow only.   */
        transition:
            border-color var(--nx-dur, .45s) var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            transform var(--nx-dur, .45s) var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            background var(--nx-dur, .45s) var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            box-shadow .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nx-work-static .nx-work__card:hover {
        box-shadow:
            0 26px 60px -30px rgba(0, 0, 0, .80),
            0 14px 44px -30px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
    }
    /* Cool media tint + a warm gradient sheen that fades in over the image.
       The <img> zoom is base-CSS owned; we only add a non-transform overlay. */
    #nx-work-static .nx-work__media {
        position: relative;
    }
    #nx-work-static .nx-work__media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        opacity: 0;
        background:
            linear-gradient(180deg, transparent 40%, rgba(11, 12, 14, .25) 100%),
            radial-gradient(70% 80% at 50% 120%,
                var(--nx-color-ember-glow, rgba(226, 90, 28, .40)) 0%,
                transparent 60%);
        transition: opacity .55s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nx-work-static .nx-work__card:hover .nx-work__media::after {
        opacity: 1;
    }
    /* Category label warms toward ember-soft on hover for a tasteful accent. */
    #nx-work-static .nx-work__meta .cat {
        transition: color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                    text-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nx-work-static .nx-work__card:hover .nx-work__meta .cat {
        color: var(--nx-color-ember-soft, #FFB37A);
        text-shadow: 0 0 18px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
    }

    /* ================================================================== */
    /*  #nello-spotlight — Applied-AI glass panel + capabilities + CTA      */
    /* ================================================================== */

    /* Capability rows: glass row finish on hover. Rows have no data-nx-*    */
    /* (the wrapping div is .nx-reveal, not the <li>) — but to stay safe we  */
    /* use only background / border / box-shadow, no transform.             */
    #nello-spotlight .nx-nello__capabilities li {
        position: relative;
        border-radius: 10px;
        transition:
            background .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nello-spotlight .nx-nello__capabilities li::after {
        /* left accent bar that grows in on hover (decorative, non-layout) */
        content: "";
        position: absolute;
        left: -10px;
        top: 50%;
        width: 2px;
        height: 0;
        border-radius: 2px;
        background: linear-gradient(180deg,
            var(--nx-color-ember-soft, #FFB37A),
            var(--nx-color-ember, #E25A1C));
        transform: translateY(-50%);
        transition: height .45s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
        pointer-events: none;
    }
    #nello-spotlight .nx-nello__capabilities li:hover {
        background:
            linear-gradient(90deg,
                rgba(226, 90, 28, .06) 0%,
                transparent 70%),
            var(--nx-glass-bg, rgba(255, 255, 255, .045));
        box-shadow: inset 0 0 0 1px var(--nx-color-line, rgba(229, 233, 238, .10));
    }
    #nello-spotlight .nx-nello__capabilities li:hover::after {
        height: 62%;
    }
    /* Bullet dot warms + pulses its glow on row hover (color/shadow only). */
    #nello-spotlight .nx-nello__capabilities li::before {
        transition: background .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
                    box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nello-spotlight .nx-nello__capabilities li:hover::before {
        background: var(--nx-color-ember-soft, #FFB37A);
        box-shadow: 0 0 16px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
    }

    /* Panel / visual chrome: elevate the screenshot frame glass.
       .nx-nello__visual is data-nx-parallax (transform owned by JS) — so we
       touch ONLY the inner .nx-img-ph frame via box-shadow/border/background. */
    #nello-spotlight .nx-nello__visual .nx-img-ph {
        transition:
            box-shadow .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            border-color .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nello-spotlight .nx-nello__visual:hover .nx-img-ph {
        box-shadow:
            0 40px 90px -36px rgba(0, 0, 0, .85),
            0 0 0 1px rgba(255, 179, 122, .12),
            0 24px 70px -40px var(--nx-color-ember-glow, rgba(226, 90, 28, .40));
    }
    /* Faint corner glow rising behind the panel on hover (decorative). */
    #nello-spotlight .nx-nello__visual .nx-img-ph::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
        background:
            radial-gradient(60% 60% at 100% 0%,
                var(--nx-color-ember-glow, rgba(226, 90, 28, .40)) 0%,
                transparent 60%);
        transition: opacity .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
        pointer-events: none;
    }
    #nello-spotlight .nx-nello__visual:hover .nx-img-ph::before {
        opacity: 1;
    }

    /* ================================================================== */
    /*  BUTTONS — refined sheen sweep + glow (scoped to our sections)       */
    /*  Buttons here carry data-nx-magnet (work foot, Nello CTA) → NO        */
    /*  transform from us. The ghost button (case study) has none, so it     */
    /*  may take a tiny :active press. We add sheen via ::before only.       */
    /* ================================================================== */

    /* Primary buttons: ember-tinted glow + sweeping sheen */
    #nx-work-static .nx-btn--primary,
    #nello-spotlight .nx-btn--primary {
        position: relative;
        overflow: hidden;
        transition: box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nx-work-static .nx-btn--primary::after,
    #nello-spotlight .nx-btn--primary::after {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 60%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(100deg,
            transparent,
            rgba(255, 255, 255, .28),
            transparent);
        transform: skewX(-18deg);
        transition: left .65s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #nx-work-static .nx-btn--primary:hover,
    #nello-spotlight .nx-btn--primary:hover {
        box-shadow:
            0 12px 34px -12px var(--nx-color-ember-glow, rgba(226, 90, 28, .40)),
            0 0 0 1px rgba(255, 179, 122, .18);
    }
    #nx-work-static .nx-btn--primary:hover::after,
    #nello-spotlight .nx-btn--primary:hover::after {
        left: 130%;
    }

    /* Ghost button (case study CTA): cool/silver glow + sheen; the element
       has NO data-nx-* so a tiny :active press is allowed. */
    #featured-case .nx-btn--ghost {
        position: relative;
        overflow: hidden;
        transition:
            box-shadow .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            transform .2s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)),
            border-color .5s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-btn--ghost::after {
        content: "";
        position: absolute;
        top: 0;
        left: -130%;
        width: 55%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(100deg,
            transparent,
            rgba(255, 255, 255, .22),
            transparent);
        transform: skewX(-18deg);
        transition: left .6s var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1));
    }
    #featured-case .nx-btn--ghost:hover {
        box-shadow:
            0 10px 30px -14px rgba(91, 140, 255, .30),
            0 0 0 1px var(--nx-color-accent-glow, rgba(255, 255, 255, .22));
    }
    #featured-case .nx-btn--ghost:hover::after {
        left: 130%;
    }
    #featured-case .nx-btn--ghost:active {
        transform: translateY(1px) scale(.985);
    }

    /* Keep button label/arrow above the sheen sweep. */
    #featured-case .nx-btn--ghost > span,
    #nx-work-static .nx-btn--primary > span,
    #nello-spotlight .nx-btn--primary > span {
        position: relative;
        z-index: 2;
    }
}

/* ============================================================ */
/*  REDUCED MOTION — kill all motion/shimmer/parallax; static    */
/*  Hover affordance may remain but instant and transform-free.  */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #featured-case::before,
    #nx-work-static::before,
    #nello-spotlight::before {
        opacity: .22;
        transition: none;
    }
    #featured-case .nx-reveal,
    #nx-work-static .nx-reveal,
    #nello-spotlight .nx-reveal {
        filter: none;
    }
    #featured-case .nx-case__media img,
    #featured-case .nx-case__card,
    #nx-work-static .nx-work__card,
    #nello-spotlight .nx-nello__capabilities li,
    #nello-spotlight .nx-nello__capabilities li::after,
    #nello-spotlight .nx-nello__visual .nx-img-ph,
    #nx-work-static .nx-btn--primary::after,
    #nello-spotlight .nx-btn--primary::after,
    #featured-case .nx-btn--ghost,
    #featured-case .nx-btn--ghost::after {
        transition: none !important;
        animation: none !important;
    }
    #featured-case .nx-case__card:hover .nx-case__media img {
        transform: none;
    }
    #featured-case .nx-btn--ghost:active {
        transform: none;
    }
}

/* ============================================================ */
/*  TOUCH / COARSE POINTER — no hover-lift, lighter ambience     */
/*  Ensure no horizontal overflow; never obscure text.           */
/* ============================================================ */
@media (hover: none), (pointer: coarse) {
    #featured-case::before,
    #nx-work-static::before,
    #nello-spotlight::before {
        opacity: .22;
    }

    /* Disable hover-driven glow/zoom/sheen on touch (no real hover state) */
    #featured-case .nx-case__card:hover,
    #nx-work-static .nx-work__card:hover {
        box-shadow: none;
    }
    #featured-case .nx-case__card:hover .nx-case__media img {
        transform: none;
        filter: none;
    }
    #featured-case .nx-case__media::after,
    #featured-case .nx-case__media::before,
    #nx-work-static .nx-work__media::after,
    #nello-spotlight .nx-nello__visual .nx-img-ph::before {
        opacity: 0;
    }
    #nello-spotlight .nx-nello__capabilities li:hover {
        background: none;
        box-shadow: none;
    }
    #nello-spotlight .nx-nello__capabilities li:hover::after {
        height: 0;
    }
    /* Sheen sweep elements parked off-canvas; ensure they never cause scroll */
    #nx-work-static .nx-btn--primary::after,
    #nello-spotlight .nx-btn--primary::after,
    #featured-case .nx-btn--ghost::after {
        display: none;
    }
}


/* ─────────── social ─────────── */
/* ════════════════════════════════════════════════════════════════════════
   nx-enhance-social.css  —  PREMIUM POLISH + MOTION (additive layer)
   Group D-social. Sections: #voices, #leadership, #brands.
   ────────────────────────────────────────────────────────────────────────
   ADDITIVE ONLY. Every rule is scoped under #voices / #leadership / #brands
   so there are ZERO global side-effects and zero collision with the other
   enhancement groups.

   Coexistence with nexlla-home-fx.js + the quote-rotator + the inline
   leadership reveal script:
     • #voices  .nx-q  carries a CSS-owned transform (translateY) toggled via
       the .is-active class by the rotator — so this file NEVER sets transform
       on .nx-q / .nx-voices / .nx-voices__quotes (all reveal/animated). It
       enhances them only via box-shadow / filter / background / border /
       opacity and ::before glow layers.
     • #leadership .nx-leader.is-open already gets an inline-style-equivalent
       transform: translateY(-4px) from its own stylesheet block — so this file
       NEVER sets transform on .nx-leader. Finish is added via shadow / glow /
       border / surface only. Section ambient uses ::after (the existing
       ::before dot-grid is left untouched).
     • #brands logos already animate transform on hover — this file does NOT
       set transform on .logo-item / its img; it layers glow + surface only.
     • .nx-reveal transform is owned by home-fx — only filter/opacity added.

   Tokens (literal fallbacks always supplied):
     ember #E25A1C / soft #FFB37A / glow rgba(226,90,28,.40)
     cool  #5B8CFF ; silver/accent #FFFFFF ; surfaces #0B0C0E / #14161A
     lines rgba(229,233,238,.10) / .22 ; ease cubic-bezier(.18,.72,.18,1)
   ════════════════════════════════════════════════════════════════════════ */


/* ========================================================================
   SHARED — ambient content lift so injected glow layers stay behind copy.
   Keeps existing layout; only establishes stacking for inner content.
   ======================================================================== */
#voices .nx-section__inner,
#leadership .nx-section__inner,
#brands .nx-section__inner {
    position: relative;
    z-index: 1;
}


/* ════════════════════════════════════════════════════════════════════════
   07 — #voices  (testimonial quote rotator + live-review eyebrow)
   ════════════════════════════════════════════════════════════════════════ */

/* Ambient depth: one faint cool/ember radial wash behind the quotes.
   Sits at z-index 0; .nx-section is already position:relative. */
#voices::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60% 52% at 50% 32%,
            rgba(91, 140, 255, .085), transparent 70%),
        radial-gradient(46% 40% at 50% 88%,
            rgba(226, 90, 28, .05), transparent 72%);
    opacity: .9;
}

/* Eyebrow (live "N reviews · X avg") — accent tick grows + soft shimmer.
   Pure background/width animation; no transform (it lives inside a reveal). */
#voices .nx-eyebrow {
    position: relative;
    transition: color .5s cubic-bezier(.18, .72, .18, 1);
}
#voices .nx-eyebrow::before {
    width: 20px;
    transition: width .55s cubic-bezier(.18, .72, .18, 1),
                background .55s cubic-bezier(.18, .72, .18, 1);
}

/* The quote card glass: the active quote gets a soft halo + crisp cite tick.
   .nx-q transform is rotator/CSS-owned — DO NOT touch it here. */
#voices .nx-q {
    transition: filter .6s cubic-bezier(.18, .72, .18, 1),
                opacity .55s cubic-bezier(.18, .72, .18, 1);
}
#voices .nx-q__text {
    position: relative;
    transition: text-shadow .6s cubic-bezier(.18, .72, .18, 1);
}
/* Active quote: a whisper of glow on the serif text so the live one reads
   as "lit". Restrained — testimonials should feel calm, not neon. */
#voices .nx-q.is-active .nx-q__text {
    text-shadow: 0 0 26px rgba(238, 241, 244, .14);
}
/* Active cite tick: lengthens + warms slightly to mark the live attribution. */
#voices .nx-q__cite::before {
    transition: width .55s cubic-bezier(.18, .72, .18, 1),
                background .55s cubic-bezier(.18, .72, .18, 1),
                box-shadow .55s cubic-bezier(.18, .72, .18, 1);
}
#voices .nx-q.is-active .nx-q__cite::before {
    width: 34px;
    background: linear-gradient(90deg,
        var(--nx-color-ember, #E25A1C),
        var(--nx-color-accent, #FFFFFF));
    box-shadow: 0 0 10px rgba(226, 90, 28, .35);
}

/* Reveal polish: add a blur-in alongside the existing fade. Transform stays
   owned by home-fx (.nx-reveal -> .is-in). */
@media (prefers-reduced-motion: no-preference) {
    #voices .nx-reveal {
        filter: blur(7px);
        transition: opacity .8s cubic-bezier(.18, .72, .18, 1),
                    filter  .8s cubic-bezier(.18, .72, .18, 1),
                    transform .8s cubic-bezier(.18, .72, .18, 1);
    }
    #voices .nx-reveal.is-in { filter: blur(0); }
}


/* ════════════════════════════════════════════════════════════════════════
   09 — #leadership  (interactive reveal cards)
   ════════════════════════════════════════════════════════════════════════
   The card already owns transform via its .is-open rule + inline JS toggle.
   We add: a fading top accent hairline, a richer ambient shadow on hover/open,
   avatar lift, name/role emphasis, and one extra ambient glow via ::after
   (the existing ::before dot-grid is preserved). NO transform here.
   ======================================================================== */

/* Section ambient: a second, very soft ember pool low on the band, layered
   under content via ::after so the existing dot-grid ::before is untouched. */
#leadership::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;            /* dot-grid ::before is at -2; content paints above */
    pointer-events: none;
    background:
        radial-gradient(50% 44% at 50% 100%,
            rgba(226, 90, 28, .07), transparent 72%);
}

/* Thin top accent hairline that fades in on hover/open. Pure opacity/scaleX
   on a pseudo-element of the card — the CARD's own transform is untouched. */
#leadership .nx-leader::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent,
        var(--nx-color-accent, #FFFFFF),
        var(--nx-color-ember-soft, #FFB37A),
        transparent);
    opacity: 0;
    transform: scaleX(.4);  /* pseudo-element is decorative, safe to transform */
    transform-origin: 50% 0;
    transition: opacity .5s cubic-bezier(.18, .72, .18, 1),
                transform .55s cubic-bezier(.18, .72, .18, 1);
}

/* Refined hover/open elevation: keep the existing translateY (JS/CSS owned)
   but enrich shadow with a near-black ambient + a faint cool rim, and lift
   the surface a touch. We override box-shadow only (no transform). */
#leadership .nx-leader {
    transition: border-color .45s cubic-bezier(.18, .72, .18, 1),
                box-shadow .55s cubic-bezier(.18, .72, .18, 1),
                background .45s cubic-bezier(.18, .72, .18, 1),
                transform .35s ease;   /* matches the existing card transition */
}

@media (hover: hover) and (pointer: fine) {
    #leadership .nx-leader:hover {
        border-color: var(--nx-color-line-strong, rgba(229, 233, 238, .22));
        box-shadow:
            0 26px 60px -30px rgba(0, 0, 0, .85),
            0 10px 30px -22px rgba(91, 140, 255, .30),
            inset 0 0 0 1px rgba(229, 233, 238, .06);
    }
    #leadership .nx-leader:hover::before {
        opacity: .9;
        transform: scaleX(1);
    }
    #leadership .nx-leader:hover .nx-leader__avatar {
        box-shadow:
            0 0 0 1px rgba(197, 205, 214, .5),
            0 12px 28px -10px rgba(197, 205, 214, .75),
            0 0 22px rgba(255, 179, 122, .22);
    }
}

/* Open state finish (driven by the card's own .is-open from its JS) — augment
   the existing silver shadow with a deeper ambient + warm rim, and surface a
   top accent line. The card's own translateY(-4px) is left intact. */
#leadership .nx-leader.is-open {
    box-shadow:
        0 30px 70px -34px rgba(0, 0, 0, .9),
        0 18px 50px -28px rgba(197, 205, 214, .7),
        inset 0 0 0 1px rgba(197, 205, 214, .14),
        0 0 28px -6px rgba(226, 90, 28, .12);
}
#leadership .nx-leader.is-open::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Avatar transition wiring (glow added on hover above; open uses the same). */
#leadership .nx-leader__avatar {
    transition: box-shadow .5s cubic-bezier(.18, .72, .18, 1);
}
#leadership .nx-leader.is-open .nx-leader__avatar {
    box-shadow:
        0 0 0 1px rgba(197, 205, 214, .5),
        0 12px 28px -10px rgba(197, 205, 214, .75),
        0 0 22px rgba(255, 179, 122, .22);
}

/* Name / role emphasis: name brightens, role warms toward ember-soft as the
   card opens — colour only, no layout shift. */
#leadership .nx-leader__name {
    transition: color .45s cubic-bezier(.18, .72, .18, 1),
                text-shadow .45s cubic-bezier(.18, .72, .18, 1);
}
#leadership .nx-leader__role {
    transition: color .45s cubic-bezier(.18, .72, .18, 1),
                letter-spacing .45s cubic-bezier(.18, .72, .18, 1);
}
#leadership .nx-leader.is-open .nx-leader__name {
    color: #FFFFFF;
    text-shadow: 0 0 20px rgba(238, 241, 244, .2);
}
#leadership .nx-leader.is-open .nx-leader__role {
    color: var(--nx-color-ember-soft, #FFB37A);
    letter-spacing: .05em;
}

/* Contact pills inside the reveal: animated underline-free sheen on hover —
   border + background lift (the card's links already transition those; this
   adds a soft outer glow tier without overriding their existing rule). */
@media (hover: hover) and (pointer: fine) {
    #leadership .nx-leader__links a:hover {
        box-shadow: 0 6px 18px -10px rgba(197, 205, 214, .6);
    }
}

/* Reveal polish: blur-in for the head + grid alongside the existing fade. */
@media (prefers-reduced-motion: no-preference) {
    #leadership .nx-reveal {
        filter: blur(7px);
        transition: opacity .8s cubic-bezier(.18, .72, .18, 1),
                    filter  .8s cubic-bezier(.18, .72, .18, 1),
                    transform .8s cubic-bezier(.18, .72, .18, 1);
    }
    #leadership .nx-reveal.is-in { filter: blur(0); }
}


/* ════════════════════════════════════════════════════════════════════════
   10 — #brands  (api-loaded brand logo grid)
   ════════════════════════════════════════════════════════════════════════
   Logos are small; keep it subtle. Existing rule already does grayscale->color
   + translateY(-2px) on hover of the img. We add a soft surface pad + glow on
   the .logo-item WRAPPER (no transform — img owns that), plus section ambient.
   ======================================================================== */

/* Ambient depth: a faint cool sweep across the brand band, behind content. */
#brands::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(70% 120% at 50% 50%,
            rgba(91, 140, 255, .06), transparent 68%);
}

/* Wrapper gets a near-invisible rounded pad that warms + glows on hover,
   giving each logo a tasteful "tile" feel without a hard border. */
#brands .brand-logo-grid .logo-item {
    border-radius: 12px;
    transition: background .5s cubic-bezier(.18, .72, .18, 1),
                box-shadow .5s cubic-bezier(.18, .72, .18, 1);
}

@media (hover: hover) and (pointer: fine) {
    #brands .brand-logo-grid .logo-item:hover {
        background: rgba(238, 241, 244, .04);
        box-shadow:
            0 10px 26px -16px rgba(0, 0, 0, .7),
            0 0 18px -4px rgba(255, 179, 122, .18),
            inset 0 0 0 1px rgba(229, 233, 238, .07);
    }
    /* Lift the logo a touch brighter than the base hover for extra "pop"
       (filter only — translate is owned by the existing rule). */
    #brands .brand-logo-grid .logo-item:hover img {
        filter: grayscale(0) brightness(1.06)
                drop-shadow(0 4px 12px rgba(255, 179, 122, .22));
    }
}

/* Reveal polish for the brand head + grid. */
@media (prefers-reduced-motion: no-preference) {
    #brands .nx-reveal {
        filter: blur(7px);
        transition: opacity .8s cubic-bezier(.18, .72, .18, 1),
                    filter  .8s cubic-bezier(.18, .72, .18, 1),
                    transform .8s cubic-bezier(.18, .72, .18, 1);
    }
    #brands .nx-reveal.is-in { filter: blur(0); }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE / COARSE POINTER — disable hover-lift & glow-follow, lighten ambient,
   guard against any horizontal overflow.
   ════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
    #voices::before,
    #brands::before { opacity: .55; }
    #leadership::after { opacity: .6; }

    /* No hover sheen on touch; tap state for leadership comes from .is-open. */
    #brands .brand-logo-grid .logo-item:hover {
        background: transparent;
        box-shadow: none;
    }
    #brands .brand-logo-grid .logo-item:hover img {
        filter: grayscale(1) brightness(.85);
    }

    /* Keep injected ambient layers from ever pushing the viewport. */
    #voices::before,
    #leadership::after,
    #brands::before { max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill the blur-in & transition shimmer; static, instant.
   Hover colour/shadow may remain (carries no essential info), applied
   instantly with no animation.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    #voices .nx-q,
    #voices .nx-q__text,
    #voices .nx-eyebrow,
    #voices .nx-eyebrow::before,
    #voices .nx-q__cite::before,
    #leadership .nx-leader,
    #leadership .nx-leader::before,
    #leadership .nx-leader__avatar,
    #leadership .nx-leader__name,
    #leadership .nx-leader__role,
    #brands .brand-logo-grid .logo-item,
    #brands .brand-logo-grid .logo-item img {
        transition: none !important;
    }
    #voices .nx-reveal,
    #leadership .nx-reveal,
    #brands .nx-reveal { filter: none !important; }

    /* No animated text-shadow shimmer on the active quote. */
    #voices .nx-q.is-active .nx-q__text { text-shadow: none; }
}


/* ─────────── convert ─────────── */
/* ════════════════════════════════════════════════════════════════════════
   nx-enhance-convert.css — PREMIUM POLISH + MOTION (additive layer)
   Group: E-convert  ·  Sections: #faq · #insights · #start
   ────────────────────────────────────────────────────────────────────────
   ADDITIVE ONLY. Every rule is scoped under #faq / #insights / #start so it
   cannot collide with the page or the other enhancement groups.

   Coexistence with nexlla-home-fx.js:
     - #latest-articles, .nx-section__head, .nx-faq__list, .nx-cta__inner all
       carry .nx-reveal (JS owns their transform) -> never transform them here.
     - .nx-cta__actions .nx-btn--primary carries data-nx-magnet (JS owns its
       transform) -> enhance with box-shadow / sheen / glow only, no transform.
     - .nx-latest__card already animates transform on hover via the base CSS
       (it has NO data-nx-*), so we do NOT add transform to it either — we
       layer glow / shadow / border / filter on top of the existing lift.
   We add transform only to purely-decorative scoped pseudo-layers.

   Easing + token fallbacks repeated locally so the file is self-sufficient.
   ════════════════════════════════════════════════════════════════════════ */

/* Local easing var with the brief's required fallback. */
#faq, #insights, #start { --nxc-ease: var(--nx-ease-out, cubic-bezier(.22, 1, .36, 1)); }


/* ════════════════════════════════════════════════════════════════════════
   SHARED — section ambience scaffolding (depth layer sits BEHIND content)
   ════════════════════════════════════════════════════════════════════════ */
#faq, #insights, #start { position: relative; }

/* Keep the real content painting above the ambient ::before glow without
   altering any layout: only the section's own direct inner wrapper is lifted. */
#faq    > .nx-section__inner,
#insights > .nx-section__inner,
#start  > .nx-section__inner { position: relative; z-index: 1; }


/* ════════════════════════════════════════════════════════════════════════
   1) #faq — accordion: question hover, +/- mark, open feel, dividers, depth
   ════════════════════════════════════════════════════════════════════════ */

/* Ambient depth — a faint cool wash high-left so the list reads on a stage. */
#faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 18% 6%, rgba(91, 140, 255, .10), transparent 70%),
        radial-gradient(46% 44% at 92% 96%, rgba(226, 90, 28, .06), transparent 72%);
    opacity: .9;
}

/* Reveal polish — add a gentle de-blur alongside the JS fade (no transform). */
@media (prefers-reduced-motion: no-preference) {
    #faq .nx-reveal {
        filter: blur(7px);
        transition: filter .8s var(--nxc-ease);
    }
    #faq .nx-reveal.is-in { filter: blur(0); }
}

/* Item shell — richer hover/open feel via shadow + border + surface lift.
   .nx-faq__item has inline <style> in the page; we only ENHANCE additional
   properties (box-shadow) and stronger transition timing. */
#faq .nx-faq__item {
    transition:
        border-color .45s var(--nxc-ease),
        background   .45s var(--nxc-ease),
        box-shadow   .45s var(--nxc-ease);
}
@media (hover: hover) and (pointer: fine) {
    #faq .nx-faq__item:hover {
        border-color: rgba(214, 179, 127, .26);
        background: rgba(241, 237, 228, .035);
        box-shadow:
            0 16px 40px -26px rgba(0, 0, 0, .85),
            0 0 0 1px rgba(214, 179, 127, .05) inset;
    }
}
/* Open state — settle with a soft ember-tinted elevation so the active
   question feels lifted off the stack. */
#faq .nx-faq__item[open] {
    box-shadow:
        0 22px 52px -30px rgba(0, 0, 0, .9),
        0 0 0 1px rgba(214, 179, 127, .10) inset,
        0 -1px 0 0 rgba(226, 90, 28, .22) inset;
}

/* Question row — a thin top accent hairline grows in on hover/open, and the
   text nudges right. .nx-faq__q has NO data-nx-* so transform is safe here. */
#faq .nx-faq__q {
    position: relative;
    transition: color .35s var(--nxc-ease);
}
#faq .nx-faq__q::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 179, 127, .55), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .5s var(--nxc-ease);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    #faq .nx-faq__item:hover .nx-faq__q { color: #fff; }
    #faq .nx-faq__item:hover .nx-faq__q::before { transform: scaleX(1); }
}
#faq .nx-faq__item[open] .nx-faq__q::before { transform: scaleX(1); }

/* The +/- marker — the page rotates it on open; we add a glow + colour lift so
   the toggle feels tactile. We DON'T set transform (page owns the rotate). */
#faq .nx-faq__q::after {
    transition:
        transform .25s ease,          /* keep page's own rotate timing */
        color .35s var(--nxc-ease),
        text-shadow .35s var(--nxc-ease);
}
@media (hover: hover) and (pointer: fine) {
    #faq .nx-faq__item:hover .nx-faq__q::after {
        color: var(--nx-color-ember-soft, #FFB37A);
        text-shadow: 0 0 14px rgba(226, 90, 28, .55);
    }
}
#faq .nx-faq__item[open] .nx-faq__q::after {
    color: var(--nx-color-ember-soft, #FFB37A);
    text-shadow: 0 0 16px rgba(226, 90, 28, .5);
}

/* Answer body — subtle fade-in feel as it expands, plus an animated underline
   sweep on the inline links inside it. */
@media (prefers-reduced-motion: no-preference) {
    #faq .nx-faq__item[open] .nx-faq__a {
        animation: nxc-faq-answer .5s var(--nxc-ease) both;
    }
}
@keyframes nxc-faq-answer {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#faq .nx-faq__a a {
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--nx-color-ember-soft, #FFB37A), var(--nx-color-ember-soft, #FFB37A));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size .45s var(--nxc-ease);
}
@media (hover: hover) and (pointer: fine) {
    #faq .nx-faq__a a:hover { background-size: 100% 1px; }
}


/* ════════════════════════════════════════════════════════════════════════
   2) #insights — latest-article cards: glow/border lift, read-more, eyebrow
   ════════════════════════════════════════════════════════════════════════ */

/* Ambient depth — quiet ember wash low-right, mirror of FAQ for cohesion. */
#insights::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(52% 46% at 88% 14%, rgba(226, 90, 28, .08), transparent 70%),
        radial-gradient(50% 48% at 6% 92%, rgba(91, 140, 255, .06), transparent 72%);
    opacity: .85;
}

/* Reveal polish — de-blur alongside the JS fade (transform untouched). */
@media (prefers-reduced-motion: no-preference) {
    #insights .nx-reveal {
        filter: blur(7px);
        transition: filter .8s var(--nxc-ease);
    }
    #insights .nx-reveal.is-in { filter: blur(0); }
}

/* Eyebrow shimmer — a soft sheen travels across the label once it reveals.
   Uses ::after so the existing ::before accent tick is left intact. */
#insights .nx-section__head .nx-eyebrow {
    position: relative;
    overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
    #insights .nx-section__head.is-in .nx-eyebrow::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
        transform: translateX(-130%);
        animation: nxc-eyebrow-sheen 1.4s var(--nxc-ease) .35s 1;
    }
}
@keyframes nxc-eyebrow-sheen {
    to { transform: translateX(130%); }
}

/* Card hover finish — the base CSS already lifts (translateY) and zooms the
   image; we ADD a premium ambient + ember glow + brighter border, plus a
   corner accent glow that fades in. NO transform here (base CSS owns it). */
#insights .nx-latest__card {
    transition:
        border-color var(--nx-dur, .45s) var(--nxc-ease),
        transform     var(--nx-dur, .45s) var(--nxc-ease),
        background    var(--nx-dur, .45s) var(--nxc-ease),
        box-shadow    .55s var(--nxc-ease),
        filter        .55s var(--nxc-ease);
}
@media (hover: hover) and (pointer: fine) {
    #insights .nx-latest__card:hover {
        border-color: var(--nx-color-line-strong, rgba(229, 233, 238, .22));
        box-shadow:
            0 26px 60px -30px rgba(0, 0, 0, .9),
            0 0 30px -8px rgba(226, 90, 28, .22);
    }
}

/* Corner glow that fades in on hover — a decorative scoped layer (no data-nx).
   Placed over the media corner; sits under content via z-index inside card. */
#insights .nx-latest__card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 70% at 100% 0%, rgba(226, 90, 28, .26), transparent 60%);
    opacity: 0;
    transition: opacity .55s var(--nxc-ease);
    z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
    #insights .nx-latest__card:hover .nx-latest__card-media::after { opacity: 1; }
}
/* Keep the category chip above the new glow layer. */
#insights .nx-latest__card-cat { z-index: 2; }

/* Read-more affordance — strengthen the CTA: ember tint + a sweeping underline
   under the label on hover (the base CSS only widens the gap + nudges arrow). */
#insights .nx-latest__card-cta {
    position: relative;
    transition:
        gap var(--nx-dur, .45s) var(--nxc-ease),
        color .45s var(--nxc-ease);
}
#insights .nx-latest__card-cta::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--nx-color-ember-soft, #FFB37A), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--nxc-ease);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    #insights .nx-latest__card:hover .nx-latest__card-cta {
        color: var(--nx-color-ember-soft, #FFB37A);
    }
    #insights .nx-latest__card:hover .nx-latest__card-cta::before { transform: scaleX(1); }
}

/* Ghost "Read the blog" button — cool/silver glow + sheen sweep on hover.
   This .nx-btn has no data-nx-*; the base adds translateY(-1px). We add glow
   only (no transform) so we don't fight the base lift. */
#insights .nx-work__foot .nx-btn--ghost {
    position: relative;
    overflow: hidden;
    transition:
        background var(--nx-dur, .45s) var(--nxc-ease),
        border-color var(--nx-dur, .45s) var(--nxc-ease),
        box-shadow .5s var(--nxc-ease);
}
#insights .nx-work__foot .nx-btn--ghost::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
    transform: translateX(-180%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    #insights .nx-work__foot .nx-btn--ghost:hover {
        box-shadow: 0 0 26px -6px rgba(255, 255, 255, .2);
    }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    #insights .nx-work__foot .nx-btn--ghost:hover::after {
        animation: nxc-sheen .65s var(--nxc-ease) 1;
    }
}
@keyframes nxc-sheen {
    to { transform: translateX(260%); }
}


/* ════════════════════════════════════════════════════════════════════════
   3) #start — final PROJECT CTA: climactic close (headline, buttons, promise)
   ════════════════════════════════════════════════════════════════════════ */

/* Richer ambient backdrop — a larger, warmer ember field behind the panel so
   the close feels like the climax. Stays subtle (≤ .45) and behind text. */
#start::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 50% 16%, rgba(226, 90, 28, .16), transparent 66%),
        radial-gradient(80% 80% at 50% 120%, rgba(226, 90, 28, .10), transparent 60%),
        radial-gradient(40% 50% at 12% 50%, rgba(91, 140, 255, .07), transparent 70%);
    opacity: .9;
}

/* The glass panel — give it a deeper ambient base shadow + a slow ember edge
   pulse so it feels alive without moving. .nx-cta__inner has .nx-reveal so we
   never transform it; box-shadow / border only. */
#start .nx-cta__inner {
    box-shadow:
        0 40px 100px -50px rgba(0, 0, 0, .9),
        0 0 0 1px rgba(214, 179, 127, .05) inset;
}
@media (prefers-reduced-motion: no-preference) {
    #start .nx-cta__inner {
        animation: nxc-cta-edge 7s ease-in-out infinite;
    }
}
@keyframes nxc-cta-edge {
    0%, 100% { box-shadow: 0 40px 100px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(214,179,127,.05) inset, 0 0 0 0 rgba(226,90,28,0) inset; }
    50%      { box-shadow: 0 40px 100px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(214,179,127,.10) inset, 0 -1px 28px -6px rgba(226,90,28,.20) inset; }
}

/* Reveal polish — de-blur on the panel alongside the JS fade. */
@media (prefers-reduced-motion: no-preference) {
    #start .nx-reveal {
        filter: blur(8px);
        transition: filter .9s var(--nxc-ease);
    }
    #start .nx-reveal.is-in { filter: blur(0); }
}

/* Headline — a soft warm halo on the italic accent so the close reads big. */
#start .nx-cta__title em {
    text-shadow: 0 0 30px rgba(226, 90, 28, .22);
}

/* PRIMARY button — strong ember-tinted glow + sheen sweep. It carries
   data-nx-magnet, so home-fx owns transform: we add NO transform, only
   box-shadow / background sheen / filter. The base button is brushed-silver;
   we warm its glow on hover to mark the conversion moment. */
#start .nx-cta__actions .nx-btn--primary {
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 10px 30px -16px rgba(197, 205, 214, .55),
        0 0 0 0 rgba(226, 90, 28, 0);
    transition:
        background var(--nx-dur, .5s) var(--nxc-ease),
        box-shadow .55s var(--nxc-ease);
}
#start .nx-cta__actions .nx-btn--primary::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-180%);
    pointer-events: none;
    z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
    #start .nx-cta__actions .nx-btn--primary:hover {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .85),
            0 18px 44px -16px rgba(226, 90, 28, .5),
            0 0 34px -4px rgba(226, 90, 28, .45);
    }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    #start .nx-cta__actions .nx-btn--primary:hover::after {
        animation: nxc-sheen .7s var(--nxc-ease) 1;
    }
}

/* SECONDARY (ghost) button — cool/silver glow + sheen, no transform. */
#start .nx-cta__actions .nx-btn--ghost {
    position: relative;
    overflow: hidden;
    transition:
        background var(--nx-dur, .45s) var(--nxc-ease),
        border-color var(--nx-dur, .45s) var(--nxc-ease),
        box-shadow .5s var(--nxc-ease);
}
#start .nx-cta__actions .nx-btn--ghost::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: translateX(-180%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    #start .nx-cta__actions .nx-btn--ghost:hover {
        box-shadow: 0 0 28px -6px rgba(255, 255, 255, .22);
    }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    #start .nx-cta__actions .nx-btn--ghost:hover::after {
        animation: nxc-sheen .7s var(--nxc-ease) 1;
    }
}

/* Arrow on the primary — gentle nudge on hover (the arrow span itself has no
   data-nx-*; safe to transform this decorative glyph only). */
#start .nx-cta__actions .nx-btn--primary .nx-btn__arrow {
    display: inline-block;
    transition: transform .45s var(--nxc-ease);
}
@media (hover: hover) and (pointer: fine) {
    #start .nx-cta__actions .nx-btn--primary:hover .nx-btn__arrow {
        transform: translateX(4px);
    }
}

/* Response-time promise — make the "real person" line feel reassuring: the
   green dot breathes, and the line lifts to full text colour on panel hover. */
@media (prefers-reduced-motion: no-preference) {
    #start .nx-cta__promise .nx-dot {
        animation: nxc-dot-pulse 2.6s ease-in-out infinite;
    }
}
@keyframes nxc-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
    50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, .08), 0 0 14px 0 rgba(74, 222, 128, .35); }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE / COARSE POINTER — disable hover-lift/glow, lighten ambience, no
   horizontal overflow. Ambient ::before stay clipped (overflow:hidden) above.
   ════════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
    #faq::before    { opacity: .55; }
    #insights::before { opacity: .5; }
    #start::before  { opacity: .6; }

    /* Neutralise any hover-only sheen/glow transform layers on touch. */
    #insights .nx-latest__card-media::after { opacity: 0; }
    #insights .nx-work__foot .nx-btn--ghost::after,
    #start .nx-cta__actions .nx-btn--primary::after,
    #start .nx-cta__actions .nx-btn--ghost::after { display: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill all shimmer / sweeps / pulses / de-blur; static, no
   transform animations. Instant hover styling (box-shadow/colour) may remain.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    #faq .nx-reveal,
    #insights .nx-reveal,
    #start .nx-reveal { filter: none !important; }

    #faq .nx-faq__item[open] .nx-faq__a { animation: none !important; }

    #insights .nx-section__head.is-in .nx-eyebrow::after { content: none !important; animation: none !important; }
    #insights .nx-work__foot .nx-btn--ghost::after { animation: none !important; }

    #start .nx-cta__inner { animation: none !important; }
    #start .nx-cta__promise .nx-dot { animation: none !important; }
    #start .nx-cta__actions .nx-btn--primary::after,
    #start .nx-cta__actions .nx-btn--ghost::after { animation: none !important; }
    #start .nx-cta__actions .nx-btn--primary .nx-btn__arrow { transition: none !important; }
}