/* ========================================================================
   NexTA Careers — FINAL THEME CSS (Full, self-contained)
   - Kills any red/unknown outlines & borders from theme/Elementor/UA
   - Forces brand palette on tabs/chooser/buttons/cards/forms
   - Works whether chooser controls are <a> or <button>
   - Safe to drop at the very end of your CSS stack
   ======================================================================== */

/* ------------ Brand tokens (scoped to the section) ------------ */
#nx-company-careers.nxcw{
  --nx-g1: #7457ee;  /* violet  */
  --nx-g2: #bb47f1;  /* purple  */
  --nx-teal:#12c594; /* teal    */

  --ink:#0b1220; --ink-sub:#4f5b6d; --ink-soft:#6b7280;

  --bg:#fbfcfe; --band:#ffffff;
  --band-edge:rgba(12,18,32,.06); --band-shadow:0 12px 36px rgba(12,18,32,.06);

  --panel:rgba(255,255,255,.88);
  --panel-border:rgba(12,18,32,.08);
  --panel-shadow:0 16px 44px rgba(12,18,32,.10);

  --card-bg:rgba(255,255,255,.96);
  --card-border:rgba(12,18,32,.08);
  --card-shadow:0 18px 48px rgba(12,18,32,.10);

  /* --- Fallback state colors (for browsers without color-mix) --- */
  --state-border: rgba(116,87,238,.35);
  --state-border-soft: rgba(116,87,238,.22);
  --state-bg-fallback-1: rgba(116,87,238,.14);
  --state-bg-fallback-2: rgba(187,71,241,.12);
  --state-bg-fallback-3: rgba(18,197,148,.14);

  /* These are used when supported; otherwise fallbacks above hold the fort. */
  --state-bg: linear-gradient(90deg, var(--state-bg-fallback-1), var(--state-bg-fallback-2), var(--state-bg-fallback-3));

  --ring: rgba(116,87,238,.28);
  --ring-strong: rgba(116,87,238,.52);

  --radius-xxl:28px; --radius-xl:24px; --radius-lg:18px; --radius-md:12px; --radius-sm:9px;
  --maxw:1280px;

  -webkit-tap-highlight-color: transparent;
}

/* Upgrade the state vars if color-mix is supported */
@supports (color: color-mix(in oklab, #000 10%, #fff 90%)) {
  #nx-company-careers.nxcw{
    --state-border: color-mix(in oklab, var(--nx-g1) 42%, var(--nx-g2) 26%, var(--nx-teal) 12%, transparent);
    --state-border-soft: color-mix(in oklab, var(--nx-g1) 26%, var(--nx-g2) 20%, var(--nx-teal) 10%, transparent);
    --state-bg: linear-gradient(
      90deg,
      color-mix(in oklab, var(--nx-g1) 18%, transparent),
      color-mix(in oklab, var(--nx-g2) 12%, transparent),
      color-mix(in oklab, var(--nx-teal)14%, transparent)
    );
  }
}

#nx-company-careers.nxcw, #nx-company-careers.nxcw *{ box-sizing:border-box; }
#nx-company-careers .nxcw__job.is-hidden { display:none !important; }

/* ========================================================================
   1) GLOBAL KILL-SWITCHES (scoped to careers section)
   - Neutralize UA outlines + Elementor hover/focus red accents
   - Works for anchors, buttons, and role="button"
   ======================================================================== */

#nx-company-careers :is(a, button, [role="button"], [type="button"], [type="submit"]){
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

#nx-company-careers :is(a, button, [role="button"], input, select, textarea):focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong) !important;
  border-color: var(--state-border) !important;
}

/* Kill any residual red borders/box-shadows Elementor injects */
#nx-company-careers :is(.elementor-clickable, .elementor-widget-wrap, .elementor-widget-container, .elementor-element) {
  box-shadow: none !important;
  border-color: transparent !important;
}
#nx-company-careers :is(.elementor-widget-wrap:hover, .elementor-widget-container:hover){
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Defensive: if theme uses accent variables that are red */
#nx-company-careers [style*="--e-global-color"], 
#nx-company-careers *[class*="accent"], 
#nx-company-careers *[data-elementor-device-mode]{
  outline-color: transparent !important;
  border-color: initial;
}

/* Inputs/selects (inside filters) — ensure brand focus ring, never red */
#nx-company-careers .nxcw__input:focus,
#nx-company-careers .nxcw__select:focus{
  outline: none !important;
  border-color: var(--state-border) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Safari/Android tap halos */
#nx-company-careers *{ -webkit-tap-highlight-color: transparent; }

/* IMPORTANT: keep brand rings — only kill non-visible focus */
#nx-company-careers *:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Neutralize search highlighters that caused black strip */
#nx-company-careers :is(mark,.highlight){
  background:transparent !important; color:inherit !important;
  padding:0 !important; border:0 !important; box-shadow:none !important;
}

/* ========================================================================
   2) HEADER + HERO
   ======================================================================== */
#nx-company-careers .nxcw__header{
  position:relative; background:var(--band);
  border-bottom:1px solid var(--band-edge); box-shadow:var(--band-shadow);
  padding: clamp(42px, 9vw, 120px) 20px clamp(28px, 6vw, 60px);
  overflow:hidden;
}
#nx-company-careers .nxcw__header-container{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
#nx-company-careers .nxcw__eyebrow{
  margin:0 0 8px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; font-size:12px;
  color:#5f4ae4; /* fallback */
  color: color-mix(in oklab, var(--nx-g1) 60%, var(--ink));
}
#nx-company-careers .nxcw__hero-title{
  margin:0; font-weight:900; font-size:clamp(40px, 6.4vw, 82px); line-height:1.02; letter-spacing:-.6px; color:var(--ink);
}
#nx-company-careers .nxcw__hero-lead{ margin:12px 0 18px; color:var(--ink-sub); font-size:clamp(16px,1.25vw,19px); max-width:72ch; line-height:1.65; }

/* ========================================================================
   3) PRIMARY CHOOSER (two big panels)
   ======================================================================== */
#nx-company-careers .nxcw__chooser{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap: clamp(12px, 2.2vw, 22px); margin:18px 0 18px;
}
#nx-company-careers .nxcw__chooser-item{
  position:relative; background:var(--panel);
  border:1px solid var(--panel-border); border-radius:var(--radius-xl);
  padding: clamp(16px, 2.4vw, 24px);
  text-align:left; cursor:pointer;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .3s ease, border-color .2s ease, background .3s ease;
  box-shadow: var(--panel-shadow);
  outline: none !important;
}
#nx-company-careers .nxcw__chooser-item .nxcw__chooser-title{ display:block; font-weight:900; font-size:clamp(16px,1.4vw,18px); color:var(--ink); }
#nx-company-careers .nxcw__chooser-item .nxcw__chooser-desc{ display:block; margin-top:6px; color:var(--ink-soft); font-size:14px; }

/* Active state */
#nx-company-careers .nxcw__chooser-item.is-active{
  border-color: var(--state-border) !important;
  box-shadow: 0 18px 44px rgba(12,18,32,.08), 0 0 0 1px var(--state-border-soft) !important;
  background:#ffffff; /* fallback */
  background: color-mix(in oklab, #ffffff 86%, var(--nx-g1) 7%);
}

/* Hover state */
@media (hover:hover){
  #nx-company-careers .nxcw__chooser-item:hover{
    transform: translateY(-3px);
    border-color: var(--state-border) !important;
    background:#ffffff; /* fallback */
    background: color-mix(in oklab, #ffffff 82%, var(--nx-teal) 8%);
    outline: none !important;
    box-shadow: var(--panel-shadow) !important;
  }
}

/* Chooser focus-visible ring (matches brand) */
#nx-company-careers .nxcw__chooser-item:focus-visible{
  border-color: var(--state-border) !important;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong), var(--panel-shadow) !important;
  outline: none !important;
}

/* Active press */
#nx-company-careers .nxcw__chooser-item:active{
  border-color: var(--state-border) !important;
  background:#ffffff; /* fallback */
  background: color-mix(in oklab, #ffffff 84%, var(--nx-g2) 8%) !important;
}

/* If your chooser items are <a>, ensure same rules apply */
#nx-company-careers .nxcw__chooser a.nxcw__chooser-item{
  text-decoration:none; color:inherit;
}

/* ========================================================================
   4) Header CTAs (brand button with shine)
   ======================================================================== */
#nx-company-careers .nxcw__header-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
#nx-company-careers .nxcw__button{
  --padx:32px; --pady:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: var(--pady) var(--padx);
  border-radius:999px; font-weight:900; text-decoration:none;
  position:relative; overflow:hidden; transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, background-position .45s ease;
  will-change: transform; outline: none !important;
}
#nx-company-careers .nxcw__button--primary{
  color:#fff;
  background-image: linear-gradient(90deg, var(--nx-g1), var(--nx-g2), var(--nx-teal));
  background-size: 220% 100%;
  border:1px solid var(--state-border);
  box-shadow: 0 16px 40px rgba(116,87,238,.28);
}
#nx-company-careers .nxcw__button--primary:hover{
  transform: translateY(-3px);
  background-position: 100% 50%;
  box-shadow: 0 22px 60px rgba(116,87,238,.40);
}
#nx-company-careers .nxcw__button--ghost{
  color:var(--ink);
  background: rgba(255,255,255,.65);
  border:1px solid var(--panel-border);
}
#nx-company-careers .nxcw__button--ghost:hover{ transform: translateY(-2px); }
#nx-company-careers .nxcw__button:focus-visible{
  border-color: var(--state-border) !important;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong), 0 16px 40px rgba(116,87,238,.28) !important;
}

/* Shine sweep on primary (subtle) */
#nx-company-careers .nxcw__button--primary::after{
  content:""; position:absolute; top:-20%; bottom:-20%; width:26%;
  left:-36%; border-radius:20px; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  transition:transform .65s ease, opacity .35s ease;
}
#nx-company-careers .nxcw__button--primary:hover::after{
  opacity:.85; transform:skewX(-18deg) translateX(240%);
}

/* ========================================================================
   5) Container + optional hero split (safe)
   ======================================================================== */
#nx-company-careers .nxcw__container{ max-width:var(--maxw); margin:0 auto; padding:clamp(36px,6vw,90px) 20px 0; position:relative; z-index:3; }

/* (Optional hero split styles kept intact for future use) */
#nx-company-careers .nxcw__hero-split{
  display:grid; grid-template-columns:1.05fr .95fr; gap: clamp(22px, 4vw, 44px);
  align-items:center; margin-bottom: clamp(36px, 6vw, 72px);
}
#nx-company-careers .nxcw__hero-copy{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-xl);
  padding:clamp(18px,3vw,28px); box-shadow:var(--panel-shadow); backdrop-filter: blur(14px) saturate(115%);
}
#nx-company-careers .nxcw__title{ margin:0 0 10px; font-weight:900; font-size:clamp(30px,4.4vw,56px); line-height:1.05; letter-spacing:-.5px; color:var(--ink); }
#nx-company-careers .nxcw__title-accent{
  background: linear-gradient(90deg, var(--nx-g1), var(--nx-g2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#nx-company-careers .nxcw__subtitle{ margin:0 0 12px; color:var(--ink-sub); font-size:clamp(15px,1.1vw,18px); line-height:1.65; max-width:70ch; }
#nx-company-careers .nxcw__points{ margin:10px 0 16px; padding:0; list-style:none; display:grid; gap:8px; }
#nx-company-careers .nxcw__points li{ display:flex; gap:10px; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }
#nx-company-careers .nxcw__dot{ width:7px; height:7px; border-radius:50%; background: linear-gradient(90deg, var(--nx-g1), var(--nx-g2)); margin-top:7px; }

/* Hero image + shards (kept intact) */
#nx-company-careers .nxcw__hero-image{ justify-self:center; perspective:1200px; transform-style:preserve-3d; position:relative; }
#nx-company-careers .nxcw__hero-img{
  width:clamp(300px,36vw,480px); border-radius:var(--radius-xl);
  transform: translateZ(0) rotateY(-6deg) rotateX(2deg);
  box-shadow: 0 26px 64px rgba(12,18,32,.10), 0 10px 18px rgba(12,18,32,.06);
  transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; will-change: transform;
}
#nx-company-careers .nxcw__shard{
  position:absolute; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.2));
  border:1px solid rgba(12,18,32,.06);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow:0 8px 22px rgba(12,18,32,.08);
  animation: nxcwShardFloat 9s ease-in-out infinite;
}
#nx-company-careers .nxcw__shard--tl{ width:62px; height:62px; left:-10px; top:-10px; animation-delay:-.8s; }
#nx-company-careers .nxcw__shard--tr{ width:86px; height:96px; right:-16px; top:10px; transform:rotate(10deg); animation-delay:-2s; }
#nx-company-careers .nxcw__shard--bl{ width:84px; height:66px; left:-10px; bottom:-12px; transform:rotate(-8deg); animation-delay:-3.2s; }
#nx-company-careers .nxcw__shard--br{ width:110px; height:78px; right:-16px; bottom:-14px; transform:rotate(6deg); animation-delay:-4s; }
@keyframes nxcwShardFloat{
  0%,100%{ transform: translateY(0) translateZ(0) rotate(0deg); opacity:.95; }
  50%{ transform: translateY(-6px) translateZ(10px) rotate(1deg); opacity:1; }
}

/* ========================================================================
   6) Sticky switch (tabs)
   ======================================================================== */
#nx-company-careers .nxcw__switch{
  position:sticky; top: calc(var(--nx-header-height,82px) + 8px);
  background:#f5f8ff; /* fallback */
  background: color-mix(in oklab, var(--bg) 82%, white 18%);
  border:1px solid var(--panel-border); border-radius:var(--radius-xl);
  box-shadow:var(--panel-shadow); padding:8px; margin:8px 0 22px; z-index:6;
  backdrop-filter: blur(10px) saturate(120%);
}
#nx-company-careers .nxcw__switch-btn{
  appearance:none; border:0; background:transparent; color:var(--ink);
  font-weight:900; padding:10px 16px; border-radius:999px; cursor:pointer;
  transition: background .25s ease, transform .2s ease, box-shadow .2s ease; outline:none !important;
}
#nx-company-careers .nxcw__switch-btn.is-active{
  background: var(--state-bg) !important;
  box-shadow: inset 0 0 0 1px var(--state-border-soft) !important;
}
@media (hover:hover){
  #nx-company-careers .nxcw__switch-btn:hover{
    background:#ffffff; /* fallback */
    background: color-mix(in oklab, #ffffff 80%, var(--nx-g1) 8%) !important;
  }
}
#nx-company-careers .nxcw__switch-btn:focus-visible{
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong) !important;
}

/* ========================================================================
   7) Panels / Cards (Internal)
   ======================================================================== */
#nx-company-careers .nxcw__panel{ display:none; animation: panelIn .35s ease both; }
#nx-company-careers .nxcw__panel.is-active{ display:block; }
@keyframes panelIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

#nx-company-careers .nxcw__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap: clamp(14px, 2vw, 22px); margin-bottom:clamp(28px, 5vw, 60px);
  perspective:1000px; transform-style:preserve-3d;
}

#nx-company-careers .nxcw__card{
  position:relative; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--radius-lg);
  min-height:220px; padding:24px 22px; box-shadow:var(--card-shadow);
  transform: translateZ(0);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .35s ease, border-color .35s ease, background .35s ease;
  will-change: transform; overflow:hidden; outline:none !important;

  display:flex; flex-direction:column;
}
#nx-company-careers .nxcw__card:focus-visible{
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong), var(--card-shadow) !important;
  border-color: var(--state-border) !important;
}

#nx-company-careers .nxcw__card-topline{
  position:absolute; left:14px; right:14px; top:12px; height:2px;
  background: linear-gradient(90deg, var(--nx-g1), var(--nx-g2), var(--nx-teal));
  opacity:.18; border-radius:2px;
}
#nx-company-careers .nxcw__card-title{
  margin:0 0 8px; font-weight:900; font-size:18px; line-height:1.25;
  background: linear-gradient(90deg, var(--nx-g1), var(--nx-g2), var(--nx-teal));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#nx-company-careers .nxcw__card-desc{ margin:0 0 14px; color:var(--ink-soft); font-size:14.5px; line-height:1.65; }
#nx-company-careers .nxcw__meta{ margin:0 0 14px; padding:0; list-style:none; display:flex; gap:10px; color:var(--ink-soft); font-size:12.5px; }
#nx-company-careers .nxcw__meta li{ background:rgba(0,0,0,.03); border:1px solid var(--panel-border); border-radius:999px; padding:6px 10px; }

#nx-company-careers .nxcw__card-inner{ display:flex; flex-direction:column; flex:1 1 auto; min-height:100%; }
#nx-company-careers .nxcw__card-actions{ display:flex; gap:10px; margin-top:auto; }
#nx-company-careers .nxcw__card-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  letter-spacing:.01em;
  text-decoration:none;
  color: color-mix(in oklab, var(--nx-g1) 52%, var(--nx-teal) 28%);
  color: #5f4ae4; /* fallback ink accent */

  /* glass base */
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.45));
  border:1px solid var(--panel-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 26px rgba(12,18,32,.10);
  backdrop-filter: blur(8px) saturate(120%);
}
#nx-company-careers .nxcw__card-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(116,87,238,.12),
      rgba(187,71,241,.10) 60%,
      rgba(18,197,148,.12));
  /* upgraded automatically if color-mix supported via the state vars around */
  opacity:.35;
  -webkit-mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  border:1px solid transparent;
}
#nx-company-careers .nxcw__card-cta::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-30%; width:28%;
  border-radius:24px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  filter: blur(8px);
  opacity:0;
  transform: skewX(-18deg) translateX(0);
  transition: opacity .35s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  #nx-company-careers .nxcw__card-cta:hover{
    transform: translateY(-2px);
    border-color: var(--state-border);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      0 14px 34px rgba(12,18,32,.12);
  }
  #nx-company-careers .nxcw__card-cta:hover::after{
    opacity:.9; transform: skewX(-18deg) translateX(260%);
  }
}
#nx-company-careers .nxcw__card-cta:focus-visible{
  outline:none !important;
  box-shadow:
    0 0 0 3px var(--ring),
    0 0 0 6px var(--ring-strong),
    0 10px 26px rgba(12,18,32,.10) !important;
  border-color: var(--state-border) !important;
}

@media (hover:hover){
  #nx-company-careers .nxcw__card:hover{
    transform: translateZ(24px) rotateX(1.6deg) rotateY(-1.6deg);
    border-color: var(--state-border) !important;
    box-shadow: 0 22px 60px rgba(12,18,32,.10), 0 0 0 1px var(--state-border-soft) !important;
    background:#ffffff; /* fallback */
    background: color-mix(in oklab, #ffffff 86%, var(--nx-g1) 6%);
  }
}

/* Shine & glow decoration */
#nx-company-careers .nxcw__card-shine{
  position:absolute; inset:-40% -25%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%); filter: blur(10px); opacity:0; pointer-events:none;
}
#nx-company-careers .nxcw__card-edge{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid transparent;
  background: linear-gradient(180deg,
     rgba(116,87,238,.16),
     rgba(187,71,241,.12),
     rgba(18,197,148,.12)
  ) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.0; transition:opacity .35s ease;
}
#nx-company-careers .nxcw__card-glow{
  position:absolute; inset:-20% -10%; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 50%, rgba(116,87,238,.10), transparent 70%);
  opacity:0; transition: opacity .35s ease, transform .45s ease; transform: translateZ(-40px) scale(1.05);
}
@media (hover:hover){
  #nx-company-careers .nxcw__card:hover .nxcw__card-shine{ animation: nxcwCardShine .9s ease forwards; }
  #nx-company-careers .nxcw__card:hover .nxcw__card-edge{ opacity:.55; }
  #nx-company-careers .nxcw__card:hover .nxcw__card-glow{ opacity:.38; transform: translateZ(-24px) scale(1.10); }
}
@keyframes nxcwCardShine{ from{transform:translateX(-120%); opacity:0;} 40%{opacity:.95;} to{transform:translateX(140%); opacity:0;} }

/* ========================================================================
   8) External filters + list (Client Opportunities)
   ======================================================================== */
#nx-company-careers .nxcw__filters{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius-xl); padding:16px; box-shadow:var(--panel-shadow);
  margin-bottom:18px;
}
#nx-company-careers .nxcw__filters-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:12px; }
#nx-company-careers .nxcw__field{ display:flex; flex-direction:column; gap:6px; }
#nx-company-careers .nxcw__label{ font-size:12px; font-weight:800; color:var(--ink-sub); letter-spacing:.02em; }
#nx-company-careers .nxcw__input, 
#nx-company-careers .nxcw__select{
  height:42px; border:1px solid var(--panel-border); border-radius:var(--radius-md);
  padding:10px 12px; font:inherit; color:var(--ink); background:#fff; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#nx-company-careers .nxcw__filters-actions{ margin-top:10px; display:flex; justify-content:flex-end; }

/* List grid */
#nx-company-careers .nxcw__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:clamp(28px, 5vw, 60px); }
#nx-company-careers .nxcw__job{
  position:relative; background:var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--card-shadow);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
  outline:none !important;

  display:flex; flex-direction:column;
  overflow:hidden;
  height:276px; /* +4px safety over 272 to avoid cramped edge cases */
}
#nx-company-careers .nxcw__job:hover{
  transform: translateY(-3px);
  border-color: var(--state-border) !important;
  box-shadow: 0 24px 58px rgba(116,87,238,.18) !important;
  background:#ffffff; /* fallback */
  background: linear-gradient(180deg, color-mix(in oklab, #fff 92%, var(--nx-g1) 8%), #fff) !important;
}
#nx-company-careers .nxcw__job:focus-visible{
  border-color: var(--state-border) !important;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong), var(--card-shadow) !important;
}

/* Title: single line, ellipsis */
#nx-company-careers .nxcw__job-title{
  margin:0 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color:var(--ink); font-weight:800;
}

/* Meta row: one visual line; kill icon stubs/bullets; perfect baseline */
#nx-company-careers .nxcw__job-meta{
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap; overflow:hidden;
  min-height:26px; margin-bottom:8px; list-style:none; padding:0;
}
#nx-company-careers .nxcw__job-meta li{
  display:inline-flex; align-items:center; justify-content:center;
  height:26px; line-height:26px; padding:0 10px;
  font-size:12.4px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
  background:rgba(0,0,0,.03); border:1px solid var(--panel-border); border-radius:999px;
  flex:0 1 auto; max-width:100%;
}
#nx-company-careers .nxcw__job-meta li:empty { display:none !important; }

/* Hide any injected icon nodes / markers */
#nx-company-careers .nxcw__job-meta li > .elementor-icon-list-icon,
#nx-company-careers .nxcw__job-meta li [class*="icon"],
#nx-company-careers .nxcw__job-meta li [class*="eicon"],
#nx-company-careers .nxcw__job-meta li svg,
#nx-company-careers .nxcw__job-meta li img,
#nx-company-careers .nxcw__job-meta li i{
  display:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important;
}

/* Teaser/description: clamp to exactly 2 lines with ellipsis */
#nx-company-careers .nxcw__job-desc{
  margin:0 0 8px; color:var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.9em; word-break: break-word; hyphens: auto; position: relative;
}

/* Tags: one row; allow horizontal scroll (no wrap) */
#nx-company-careers .nxcw__job-tags{
  display:flex; align-items:center; gap:8px;
  height:24px; min-height:24px; max-height:28px;
  overflow-x:auto; overflow-y:hidden; margin-top:8px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;
}
#nx-company-careers .nxcw__job-tags::-webkit-scrollbar{ display:none; }
#nx-company-careers .nxcw__tag{
  display:inline-flex; align-items:center; height:24px; padding:0 10px;
  border:1px solid var(--panel-border); border-radius:999px; font-size:12px;
  background:rgba(0,0,0,.03); white-space:nowrap;
}

/* Keep CTA row pinned at bottom */
#nx-company-careers .nxcw__job .nxcw__card-actions{ margin-top:auto; }

/* Hard kill: any decorative ::before/::after or bullets that create arcs/dots */
#nx-company-careers .nxcw__list .nxcw__job::before,
#nx-company-careers .nxcw__list .nxcw__job::after,
#nx-company-careers .nxcw__list .nxcw__job-desc::before,
#nx-company-careers .nxcw__list .nxcw__job-desc::after{
  content:none !important; background:none !important; box-shadow:none !important; border:0 !important;
}
#nx-company-careers .nxcw__job ul,
#nx-company-careers .nxcw__job li{ list-style:none !important; background:none !important; }
#nx-company-careers .nxcw__job li,
#nx-company-careers .nxcw__job .nxcw__tag{ padding-left:0 !important; position:relative; }
#nx-company-careers .nxcw__job li::marker,
#nx-company-careers .nxcw__job li::before,
#nx-company-careers .nxcw__job li::after,
#nx-company-careers .nxcw__job [class*="icon"]::before,
#nx-company-careers .nxcw__job [class*="icon"]::after,
#nx-company-careers .nxcw__job [class*="eicon"]::before,
#nx-company-careers .nxcw__job [class*="eicon"]::after{
  content:none !important; width:0 !important; height:0 !important; border:0 !important; background:none !important; box-shadow:none !important; outline:none !important;
}

/* ========================================================================
   9) Background visuals (hero)
   ======================================================================== */
#nx-company-careers .nxcw__bg{ position:relative; }
#nx-company-careers .nxcw__space{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
#nx-company-careers .nxcw__vignette{
  position:absolute; inset:-8%;
  background: radial-gradient(60% 50% at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%);
  mix-blend-mode:multiply; z-index:2;
}
#nx-company-careers .nxcw__header-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
#nx-company-careers .nxcw__header-aurora{
  position:absolute; inset:-25% -10% -35% -10%;
  filter: blur(26px) saturate(110%);
  background:
    radial-gradient(60% 44% at 14% 26%, rgba(116,87,238,.12), transparent 60%),
    radial-gradient(40% 35% at 86% 30%, rgba(187,71,241,.10), transparent 58%),
    radial-gradient(45% 38% at 62% 78%, rgba(18,197,148,.10), transparent 60%);
  opacity:.55;
}
#nx-company-careers .nxcw__header-softglow{
  position:absolute; inset:auto 10% -20% auto; bottom:-10%;
  width:600px; height:600px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.65), transparent 70%);
  filter:blur(30px); opacity:.6;
}

/* ========================================================================
   10) Responsive
   ======================================================================== */
@media (max-width:1140px){
  #nx-company-careers .nxcw__hero-split{ grid-template-columns:1fr; }
  #nx-company-careers .nxcw__hero-image{ justify-self:start; }
  #nx-company-careers .nxcw__grid{ grid-template-columns:1fr; }
}
@media (max-width:1024px){
  #nx-company-careers .nxcw__filters-row{ grid-template-columns:1fr 1fr; }
  #nx-company-careers .nxcw__list{ grid-template-columns:1fr; }
  #nx-company-careers .nxcw__job{ height:256px; } /* +4px from 252 */
}
@media (max-width:820px){ #nx-company-careers .nxcw__chooser{ grid-template-columns:1fr; } }
@media (max-width:720px){
  #nx-company-careers .nxcw__job-meta li{ max-width:38vw; }
}
@media (max-width:560px){
  #nx-company-careers .nxcw__grid{ grid-template-columns:1fr; }
  #nx-company-careers .nxcw__hero-image{ justify-self:center; }
  #nx-company-careers .nxcw__job{ height:242px; } /* +4px from 238 */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #nx-company-careers .nxcw__hero-img, 
  #nx-company-careers .nxcw__card, 
  #nx-company-careers .nxcw__job{ transition:none !important; }
  #nx-company-careers .nxcw__card{ transform:none !important; }
}

/* Limit link underlines to owned elements */
#nx-company-careers a:not(.nxcw__button):not(.nxcw__card-cta){ text-decoration:none; }


/* === FINAL CHIP FIX: force centering for text nodes, kill baseline drift === */
#nx-company-careers .nxcw__job-meta{
  display:flex !important;
  align-items:center !important;
  gap:12px;
  min-height:40px !important;
  margin:8px 0 12px;
  padding:0;
}

#nx-company-careers .nxcw__job-meta li{
  position:relative;
  display:flex !important;          /* text node becomes a flex item */
  align-items:center !important;     /* vertical centering */
  justify-content:center !important; /* horizontally center inside pill */
  height:40px !important;
  padding:0 16px !important;
  line-height:1 !important;          /* <— put baseline back to normal */
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:.005em;
  border-radius:999px;

  /* keep your visuals */
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.75));
  border:1px solid rgba(12,18,32,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 22px rgba(12,18,32,.10);
  color:#0b1220;

  /* micro-nudge to visually perfect on WebKit */
  transform: translateY(-0.5px);     /* optional, tune -0.5px…0px */
}

/* If any pill still looks off, enforce centering on the first line too */
#nx-company-careers .nxcw__job-meta li::first-line{
  line-height:1 !important;
}

/* Hover “wow” stays intact, just bump slightly larger and brighter */
@media (hover:hover){
  #nx-company-careers .nxcw__job-meta li:hover{
    transform: translateY(-2px) scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 18px 36px rgba(12,18,32,.18);
  }
}

/* Mobile sizes */
@media (max-width:720px){
  #nx-company-careers .nxcw__job-meta{ min-height:38px !important; gap:10px; }
  #nx-company-careers .nxcw__job-meta li{ height:38px !important; padding:0 14px !important; font-size:13.5px !important; }
}
/* ========= NXCW — PILL ALIGNMENT + WEIGHT + PREMIUM HOVER (override) ========= */

/* Row: one visual line, aligned baseline */
#nx-company-careers .nxcw__job-meta{
  display:flex; align-items:center;
  gap:12px; flex-wrap:nowrap; overflow:hidden;
  margin:8px 0 12px; min-height:38px; /* match pill height */
  padding:0; list-style:none;
}

/* Pill base */
#nx-company-careers .nxcw__job-meta li{
  /* sizing */
  height:38px; padding:0 14px; min-width:0;
  display:flex; align-items:center; justify-content:flex-start;  /* ← left align text */
  white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  border-radius:999px;

  /* type */
  font-size:14px; font-weight:900; letter-spacing:.005em;  /* thicker like subtitle */
  line-height:1;

  /* visuals */
  color:#0b1220;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.75));
  border:1px solid rgba(12,18,32,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 10px 22px rgba(12,18,32,.10);
  backdrop-filter: blur(8px) saturate(120%);
  transform:translateZ(0);
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .28s ease, border-color .28s ease, background-position .6s ease;
  background-size:200% 100%;
}

/* Color accents per position (Location → teal, Type → violet, Exp → purple) */
#nx-company-careers .nxcw__job-meta li:nth-child(1){
  border-color: color-mix(in oklab, var(--nx-teal) 38%, rgba(12,18,32,.08));
  background-image: linear-gradient(90deg,
    color-mix(in oklab, #fff 86%, var(--nx-teal) 14%),
    color-mix(in oklab, #fff 94%, var(--nx-teal) 6%));
}
#nx-company-careers .nxcw__job-meta li:nth-child(2){
  border-color: color-mix(in oklab, var(--nx-g1) 38%, rgba(12,18,32,.08));
  background-image: linear-gradient(90deg,
    color-mix(in oklab, #fff 86%, var(--nx-g1) 14%),
    color-mix(in oklab, #fff 94%, var(--nx-g1) 6%));
}
#nx-company-careers .nxcw__job-meta li:nth-child(3){
  border-color: color-mix(in oklab, var(--nx-g2) 38%, rgba(12,18,32,.08));
  background-image: linear-gradient(90deg,
    color-mix(in oklab, #fff 86%, var(--nx-g2) 14%),
    color-mix(in oklab, #fff 94%, var(--nx-g2) 6%));
}

/* Subtle border aura (kept tight so text stays sharp) */
#nx-company-careers .nxcw__job-meta li::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--nx-g1) 14%, transparent),
    color-mix(in oklab, var(--nx-g2) 10%, transparent) 60%,
    color-mix(in oklab, var(--nx-teal) 14%, transparent));
  opacity:.30;
  -webkit-mask:linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude;
  border:1px solid transparent;
}

/* “Wow” hover: gentle lift, glow, animated sheen */
#nx-company-careers .nxcw__job-meta li::after{
  content:""; position:absolute; top:-60%; bottom:-60%; left:-36%; width:32%;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  filter:blur(8px); opacity:0; transform:skewX(-18deg) translateX(0);
  transition:opacity .35s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  #nx-company-careers .nxcw__job-meta li:hover{
    transform: translateY(-2px) scale(1.035);
    background-position: 100% 50%;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 16px 34px rgba(12,18,32,.16),
      0 0 0 1px color-mix(in oklab, rgba(116,87,238,.28) 60%, #fff 40%);
  }
  #nx-company-careers .nxcw__job-meta li:hover::after{
    opacity:.95; transform:skewX(-18deg) translateX(260%);
  }
}

/* Focus ring consistent with brand */
#nx-company-careers .nxcw__job-meta li:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px var(--ring-strong),
              inset 0 1px 0 rgba(255,255,255,.82);
}

/* Mobile: still substantial */
@media (max-width:720px){
  #nx-company-careers .nxcw__job-meta{ gap:10px; min-height:36px; }
  #nx-company-careers .nxcw__job-meta li{
    height:36px; padding:0 12px; font-size:13.5px; max-width:42vw;
  }
}
/* === NXCW — Brand Gradient CTA (Apply / View details) =================== */
#nx-company-careers .nxcw__card-cta{
  /* layout */
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:900; font-size:13.5px; letter-spacing:.01em;

  /* brand gradient */
  color:#fff;
  background-image: linear-gradient(90deg, var(--nx-g1), var(--nx-g2), var(--nx-teal));
  background-size: 220% 100%;
  border:1px solid color-mix(in oklab, var(--nx-g1) 50%, transparent);
  box-shadow:
    0 12px 28px color-mix(in oklab, var(--nx-g1) 22%, transparent),
    0 2px 6px rgba(12,18,32,.08);
  transform: translateZ(0);
  transition:
    transform .25s cubic-bezier(.22,1,.36,1),
    background-position .45s ease,
    box-shadow .25s ease,
    border-color .25s ease;
  text-decoration:none;
}

/* subtle glass overlay for depth */
#nx-company-careers .nxcw__card-cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  mix-blend-mode:soft-light;
}

/* moving sheen on hover */
#nx-company-careers .nxcw__card-cta::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-30%; width:28%;
  border-radius:24px; pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  filter: blur(8px); opacity:0;
  transform: skewX(-18deg) translateX(0);
  transition: opacity .35s ease, transform .9s cubic-bezier(.22,1,.36,1);
}

/* Hover: shift gradient, lift & glow */
@media (hover:hover){
  #nx-company-careers .nxcw__card-cta:hover{
    background-position: 100% 50%;
    transform: translateY(-3px);
    box-shadow:
      0 18px 44px color-mix(in oklab, var(--nx-g1) 32%, transparent),
      0 3px 10px rgba(12,18,32,.10);
    border-color: color-mix(in oklab, var(--nx-teal) 50%, transparent);
  }
  #nx-company-careers .nxcw__card-cta:hover::after{
    opacity:.95; transform: skewX(-18deg) translateX(260%);
  }
}

/* Active press */
#nx-company-careers .nxcw__card-cta:active{
  transform: translateY(0);
  background-position: 80% 50%;
  box-shadow:
    0 10px 26px color-mix(in oklab, var(--nx-g1) 22%, transparent),
    0 2px 6px rgba(12,18,32,.10);
}

/* Focus ring (accessible) */
#nx-company-careers .nxcw__card-cta:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px var(--ring),
    0 0 0 6px var(--ring-strong),
    0 14px 36px color-mix(in oklab, var(--nx-g1) 26%, transparent) !important;
}

/* Disabled look (if ever used) */
#nx-company-careers .nxcw__card-cta[aria-disabled="true"],
#nx-company-careers .nxcw__card-cta:disabled{
  opacity:.55; pointer-events:none; filter:grayscale(.1);
}

/* Reduced motion: keep style but disable big moves */
@media (prefers-reduced-motion: reduce){
  #nx-company-careers .nxcw__card-cta,
  #nx-company-careers .nxcw__card-cta::after{ transition:none !important; }
}
/* --- NEXTA Careers: external cards polish --- */

/* Make grid consistent */
#nx-company-careers .nxcw__list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}

/* Kill fixed heights from earlier rules and set a sensible minimum */
#nx-company-careers .nxcw__job{
  height:auto !important;          /* override old height: 276/256px */
  min-height:220px;                /* tweak to your taste: 300–360px works well */
  display:flex; 
  flex-direction:column;
}

/* Blurb: larger and clearer (we removed inline styles) */
#nx-company-careers .nxcw__job-blurb{
  margin:8px 0 12px 0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-soft, #6b7280);
}

/* Skills spacing harmonized */
#nx-company-careers .nxcw__job-skills{
  margin:6px 0 14px 0;
}

/* Push CTA to the bottom of the card */
#nx-company-careers .nxcw__card-actions{
  margin-top:auto;     /* pushes button to the bottom edge */
  padding-top:12px;
}

/* Optional: if you want slightly tighter cards on mobile */
@media (max-width:1024px){
  #nx-company-careers .nxcw__list{ grid-template-columns:1fr; }
  #nx-company-careers .nxcw__job{ min-height:300px; }
}




/* ============================================
   Replace unwanted red outline with NexTA brand
   gradient outline on hover & active
   ============================================ */
#nx-company-careers .nxcw__chooser-item {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

/* Base gradient border */
#nx-company-careers .nxcw__chooser-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(120deg,#8c4bff,#00eedd);
  -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .65;
  transition: opacity .25s ease, transform .25s ease;
}

/* Hover glow */
@media (hover:hover){
  #nx-company-careers .nxcw__chooser-item:hover::after {
    opacity: 1;
    transform: scale(1.015);
  }
}

/* Active tab stronger */
#nx-company-careers .nxcw__chooser-item.is-active::after {
  opacity: 1;
  transform: scale(1.02);
}

/* Accessibility ring override */
#nx-company-careers .nxcw__chooser-item:focus-visible::after {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(140,75,255,.5);
}
#nx-company-careers .nxcw__chooser-item.is-active {
  box-shadow: 0 10px 25px rgba(140,75,255,.15);
}
/* --- Kill the theme's red hairline + replace with NexTA gradient --- */
#nx-company-careers .nxcw__chooser-item,
#nx-company-careers .nxcw__chooser-item:focus,
#nx-company-careers .nxcw__chooser-item:hover,
#nx-company-careers .nxcw__chooser-item:active {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;             /* nuke red shadow */
  position: relative;
}

/* Remove outlines that might be applied to inner wrappers */
#nx-company-careers .nxcw__chooser-item *,
#nx-company-careers .nxcw__chooser-item *:focus,
#nx-company-careers .nxcw__chooser-item *:hover,
#nx-company-careers .nxcw__chooser-item *:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Brand gradient ring (purple→teal) */
#nx-company-careers .nxcw__chooser-item::after {
  content: "";
  position: absolute;
  inset: 0;                     /* full element */
  border-radius: 16px;          /* match your card radius */
  padding: 2px;                 /* ring thickness */
  background: linear-gradient(120deg,#8c4bff,#00eedd);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .6;
  transition: opacity .2s ease, transform .2s ease;
}

/* Hover / active = stronger ring */
@media (hover:hover){
  #nx-company-careers .nxcw__chooser-item:hover::after { opacity: 1; transform: scale(1.01); }
}
#nx-company-careers .nxcw__chooser-item.is-active::after { opacity: 1; transform: scale(1.0125); }

/* Accessible focus ring in brand color (no red) */
#nx-company-careers .nxcw__chooser-item:focus-visible::after {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(140,75,255,.35);
}

/* Mobile tap highlight (Android) */
#nx-company-careers .nxcw__chooser-item {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* === NXCW — Premium Amethyst→Aqua ring (LAB/OKLCH blend, metallic sheen) === */

#nx-company-careers{
  /* Tweak these to taste */
  --chooser-ring-w: 4px;          /* desktop thickness */
  --ring-sheen: .18;              /* metallic highlight strength */
  --glow-alpha: .42;              /* outer glow strength */
  --glow-spread: 10px;            /* outer glow spread */

  /* Premium palette (fallbacks first, then OKLCH upgrade) */
  --p-hex: #7b3ff0;               /* Deep Amethyst */
  --t-hex: #19d6c8;               /* Muted Tiffany Aqua */
  --p-hex-dark: #5f2ec0;          /* shadowed purple */
  --t-hex-dark: #0fb2a6;          /* shadowed teal */
}

@media (max-width: 820px){
  #nx-company-careers{ --chooser-ring-w: 3.2px; }
}

/* Kill any native red focus/outline completely */
#nx-company-careers .nxcw__chooser-item,
#nx-company-careers .nxcw__chooser-item *{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Tile base */
#nx-company-careers .nxcw__chooser-item{
  position: relative;
  border: 1px solid transparent !important;
  border-radius: var(--radius-xl);
  z-index: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========= Gradient sources (fallback: sRGB; upgrade: OKLCH for premium) ==== */
@supports (color: oklch(0.7 0.15 310)){
  #nx-company-careers{
    /* Richer but not fluorescent */
    --p: oklch(0.62 0.17 305);     /* Amethyst */
    --p2: oklch(0.58 0.13 300);    /* Amethyst shadow */
    --t: oklch(0.78 0.07 190);     /* Muted Tiffany Aqua */
    --t2: oklch(0.73 0.06 185);    /* Aqua shadow */
  }
}
@supports not (color: oklch(0.7 0.15 310)){
  #nx-company-careers{
    --p: var(--p-hex);
    --p2: var(--p-hex-dark);
    --t: var(--t-hex);
    --t2: var(--t-hex-dark);
  }
}

/* ================== INNER RING (bevel + smooth premium blend) =============== */
#nx-company-careers .nxcw__chooser-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: var(--chooser-ring-w);

  /* Two-layer blend: main gradient + subtle darker rim for depth */
  background:
    /* metallic micro-sheen on top (very subtle) */
    linear-gradient( to bottom,
      rgba(255,255,255,var(--ring-sheen)) 0%,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0) 78%,
      rgba(255,255,255,var(--ring-sheen)) 100%
    ),
    /* premium color run */
    linear-gradient(135deg, var(--p) 0%, var(--p2) 28%, var(--t2) 68%, var(--t) 100%);

  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  opacity:.95;
  transform: translateZ(0) scale(1);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  z-index: 2;

  /* slight beveled depth (cooler and softer than neon) */
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.18))
    drop-shadow(0 6px 10px rgba(20, 16, 40, .10));
}

/* ========================= OUTER GLOW (cool, restrained) ==================== */
#nx-company-careers .nxcw__chooser-item::before{
  content:"";
  position:absolute;
  inset: calc(var(--glow-spread) * -1);
  border-radius: inherit;
  pointer-events:none;

  background:
    radial-gradient(62% 62% at 50% 50%, color-mix(in oklab, var(--p) 60%, transparent) var(--glow-alpha), transparent 72%),
    radial-gradient(62% 62% at 50% 50%, color-mix(in oklab, var(--t) 50%, transparent) var(--glow-alpha), transparent 76%);
  /* if color-mix not supported, browsers just ignore these layers silently */
  filter: blur(14px);
  opacity:.36;
  z-index:1;
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}

/* ============================ INTERACTION STATES ============================ */
@media (hover:hover){
  #nx-company-careers .nxcw__chooser-item:hover::after{
    opacity:1;
    transform: scale(1.012);
  }
  #nx-company-careers .nxcw__chooser-item:hover::before{
    opacity:.55;
    filter: blur(16px);
    transform: scale(1.008);
  }
}

#nx-company-careers .nxcw__chooser-item.is-active::after{
  opacity:1;
  transform: scale(1.014);
}
#nx-company-careers .nxcw__chooser-item.is-active::before{
  opacity:.6;
  filter: blur(17px);
  transform: scale(1.01);
}

/* Brand focus ring (no red) */
#nx-company-careers .nxcw__chooser-item:focus-visible::after{
  opacity:1;
  box-shadow: 0 0 0 3px rgba(123,63,240,.35);
}

/* Make the grid a stable 3D container and promote it for smooth compositing */
#nx-company-careers [data-nxcw-tiltgrid]{
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

/* Give each card its own layer and isolate paints */
#nx-company-careers .nxcw__card{
  backface-visibility: hidden;
  contain: paint;              /* avoids neighbor invalidation */
}

/* While the grid is tilting, freeze card hover transforms (prevents jitter) */
#nx-company-careers [data-nxcw-tiltgrid].is-tilting .nxcw__card:hover{
  transform: translateZ(0);    /* keep promoted, but don’t move/rotate */
  box-shadow: var(--card-shadow); /* optional: keep shadow stable too */
}
@media (hover:hover){
  #nx-company-careers .nxcw__card:hover{
    /* previously: translateZ(24px) rotateX(1.6deg) rotateY(-1.6deg); */
    transform: translateZ(16px); /* remove rotation to keep hit area stable */
  }
}
/* Zero-blur mode for INTERNAL cards only */
#nxcw-panel-internal .nxcw__card{
  /* keep its own layer but avoid 3D side effects */
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateY(0);            /* no translateZ, no rotate */
}

/* Hover: lift in 2D (crisp text) */
@media (hover:hover){
  #nxcw-panel-internal .nxcw__card:hover{
    transform: translateY(-6px);       /* previously used translateZ/rotate */
    /* optional: keep shadow steady (no extra blur) */
    box-shadow: var(--card-shadow);
  }
}

/* While the grid is tilting, freeze card transforms to avoid wobble + blur */
#nxcw-panel-internal [data-nxcw-tiltgrid].is-tilting .nxcw__card:hover{
  transform: translateY(0);
  box-shadow: var(--card-shadow);
}

/* Make the tilt grid itself crisp (but no perspective for internal) */
#nxcw-panel-internal [data-nxcw-tiltgrid]{
  perspective: none !important;        /* disables 3D rasterization on children */
  transform-style: flat !important;
}


#nxcw-panel-internal .nxcw__card,
#nxcw-panel-internal .nxcw__card *{
  -webkit-font-smoothing: auto;           /* avoid over-antialiasing */
  text-rendering: optimizeSpeed;          /* keep hinting snappy */
}

/* ==================================================
   NexTA Careers – Loading title dots (scoped & stable)
   ================================================== */

.nxcw__job--loading .nxcw__dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1;
}

.nxcw__job--loading .nxcw__dot {
  display: inline-block;          /* IMPORTANT: makes width/height work */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.25;

  animation: nxcw-loading-bounce 1.2s infinite ease-in-out;

  font-size: 0;
  text-indent: -9999px;
}

.nxcw__job--loading .nxcw__dot:nth-child(2) { animation-delay: 0.15s; }
.nxcw__job--loading .nxcw__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes nxcw-loading-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.25; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nxcw__job--loading .nxcw__dot {
    animation: none;
    opacity: 0.6;
  }
}
