/* visa-sponsorship-jobs/visa.css
 *
 * Job-search UI, modelled on the layout job seekers already know from Indeed:
 * a What/Where search bar, filter pills, and a two-pane split — scannable
 * result rows on the left, the full posting in a sticky pane on the right.
 *
 * WHY THIS DOES NOT LOOK LIKE THE REST OF altercv.com
 * The marketing pages use Fraunces (serif display), big type and generous
 * whitespace. That is right for a landing page and wrong for a search tool:
 * someone scanning 600 roles needs density and hierarchy, not decoration.
 * So this section uses a neutral system UI stack, tighter spacing, and colour
 * only where it carries meaning (verified badge, links, primary action).
 * Brand teal is kept as the single accent so it still reads as AlterCV.
 */

:root {
  --vj-bg:        #ffffff;
  --vj-bg-alt:    #f6f7f8;
  --vj-bg-sel:    #f3faf9;

  --vj-ink:       #1f2328;
  --vj-ink-2:     #4a5056;
  /* #6f767e measured 4.35:1 against the tinted selected-row background, just
     under the 4.5:1 AA floor for body text. Darkened to clear it everywhere. */
  --vj-ink-3:     #61686f;

  --vj-line:      #dfe2e5;
  --vj-line-2:    #c9cdd2;

  --vj-accent:    #094D4F;   /* AlterCV deep teal — primary action */
  --vj-accent-2:  #0b6062;
  --vj-link:      #0a5f61;
  --vj-soft:      #d5f0ef;

  --vj-ok-bg:     #e6f4ea;
  --vj-ok-fg:     #1c5c33;
  --vj-warn-bg:   #fdf3e0;
  --vj-warn-fg:   #7a4e00;

  --vj-radius:    8px;
  --vj-shadow:    0 1px 3px rgba(0,0,0,.10);
  --vj-shadow-md: 0 4px 14px rgba(0,0,0,.10);

  --vj-header-h:  58px;
  --vj-filter-h:  52px;
}

*, *::before, *::after { box-sizing: border-box; }

body.vj {
  margin: 0;
  background: var(--vj-bg-alt);
  color: var(--vj-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.vj a { color: inherit; text-decoration: none; }
body.vj button, body.vj input, body.vj select { font-family: inherit; font-size: inherit; }
body.vj :focus-visible { outline: 2px solid var(--vj-accent); outline-offset: 2px; border-radius: 4px; }
.vj-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ============================ HEADER ============================ */
.vj-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--vj-bg);
  border-bottom: 1px solid var(--vj-line);
  height: var(--vj-header-h);
  display: flex; align-items: center;
}
.vj-header-inner {
  width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 0 16px; display: flex; align-items: center; gap: 16px;
}
.vj-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.vj-logo img { width: 26px; height: 26px; border-radius: 6px; display: block; }

/* search: two fields sharing one bordered pill, like a job board's What/Where */
.vj-search {
  display: flex; align-items: stretch; flex: 1; max-width: 720px;
  border: 1px solid var(--vj-line-2); border-radius: var(--vj-radius);
  background: var(--vj-bg); overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vj-search:focus-within { border-color: var(--vj-accent); box-shadow: 0 0 0 3px rgba(9,77,79,.10); }
.vj-field { display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 12px; min-width: 0; }
.vj-field + .vj-field { border-left: 1px solid var(--vj-line); }
.vj-field svg { color: var(--vj-ink-3); flex-shrink: 0; }
.vj-field input {
  border: 0; outline: none; background: transparent;
  width: 100%; min-width: 0; padding: 10px 0; font-size: 14.5px; color: var(--vj-ink);
}
.vj-field input::placeholder { color: var(--vj-ink-3); }
.vj-search-btn {
  border: 0; background: var(--vj-accent); color: #fff;
  padding: 0 22px; font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: background .12s ease;
}
.vj-search-btn:hover { background: var(--vj-accent-2); }

.vj-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.vj-btn-ghost {
  border: 1px solid var(--vj-line-2); background: var(--vj-bg); color: var(--vj-ink-2);
  padding: 8px 14px; border-radius: var(--vj-radius); font-weight: 600; font-size: 14px; cursor: pointer;
}
.vj-btn-ghost:hover { border-color: var(--vj-accent); color: var(--vj-accent); }

/* ============================ FILTER BAR ============================ */
.vj-filters {
  position: sticky; top: var(--vj-header-h); z-index: 55;
  background: var(--vj-bg); border-bottom: 1px solid var(--vj-line);
  min-height: var(--vj-filter-h); display: flex; align-items: center;
}
.vj-filters-inner {
  width: 100%; max-width: 1360px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.vj-filters-inner::-webkit-scrollbar { display: none; }

.vj-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--vj-line-2); background: var(--vj-bg);
  border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--vj-ink);
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.vj-pill:hover { border-color: var(--vj-ink-3); }
.vj-pill[data-on="true"] {
  background: var(--vj-accent); border-color: var(--vj-accent); color: #fff;
  box-shadow: 0 1px 3px rgba(9,77,79,.28);
}
.vj-pill .caret {
  width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px); opacity: .7;
}
/* The pill draws its own .caret, so the native select arrow has to go —
   otherwise every filter shows two chevrons side by side. */
.vj-pill select {
  border: 0; background: transparent; color: inherit; font-weight: 500;
  cursor: pointer; outline: none; padding: 0; max-width: 190px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.vj-pill select::-ms-expand { display: none; }
.vj-pill[data-on="true"] select option { color: var(--vj-ink); }

/* ============================ LAYOUT ============================ */
.vj-main { max-width: 1360px; margin: 0 auto; padding: 16px; }
.vj-split { display: grid; grid-template-columns: minmax(360px, 420px) 1fr; gap: 16px; align-items: start; }

.vj-resulthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; padding: 0 2px;
}
.vj-count { font-size: 14px; color: var(--vj-ink-2); }
.vj-count b { color: var(--vj-ink); }
.vj-sort { font-size: 13.5px; color: var(--vj-ink-3); display: flex; align-items: center; gap: 6px; }
.vj-sort select { border: 0; background: transparent; color: var(--vj-link); font-weight: 600; cursor: pointer; outline: none; }

/* ---------- result rows ---------- */
.vj-list { display: flex; flex-direction: column; gap: 8px; }
.vj-row {
  position: relative; text-align: left; width: 100%;
  background: var(--vj-bg); border: 1px solid var(--vj-line);
  border-radius: var(--vj-radius); padding: 14px 16px; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.vj-row:hover { border-color: var(--vj-line-2); box-shadow: var(--vj-shadow); }
.vj-row[aria-selected="true"] {
  border-color: var(--vj-accent); background: var(--vj-bg-sel);
  box-shadow: inset 3px 0 0 var(--vj-accent);
}
.vj-row-title {
  font-size: 16px; font-weight: 600; color: var(--vj-link);
  line-height: 1.3; margin: 0 0 4px; display: block;
}
.vj-row[aria-selected="true"] .vj-row-title { color: var(--vj-accent); }
.vj-row-co { font-size: 14px; color: var(--vj-ink); margin-bottom: 2px; }
.vj-row-loc { font-size: 13.5px; color: var(--vj-ink-3); margin-bottom: 8px; }
.vj-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vj-row-date { font-size: 12.5px; color: var(--vj-ink-3); margin-top: 8px; }

.vj-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 4px; line-height: 1.4;
}
.vj-badge.ok   { background: var(--vj-ok-bg);   color: var(--vj-ok-fg); }
.vj-badge.warn { background: var(--vj-warn-bg); color: var(--vj-warn-fg); }
.vj-chip {
  font-size: 12px; color: var(--vj-ink-2);
  background: var(--vj-bg-alt); border: 1px solid var(--vj-line);
  border-radius: 4px; padding: 2px 7px;
}

/* ---------- detail pane ---------- */
.vj-detail {
  position: sticky; top: calc(var(--vj-header-h) + var(--vj-filter-h) + 16px);
  background: var(--vj-bg); border: 1px solid var(--vj-line);
  border-radius: var(--vj-radius);
  max-height: calc(100vh - var(--vj-header-h) - var(--vj-filter-h) - 32px);
  display: flex; flex-direction: column; overflow: hidden;
}
.vj-detail-head { padding: 22px 24px 16px; border-bottom: 1px solid var(--vj-line); flex-shrink: 0; }
.vj-detail-head h2 { font-size: 21px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.vj-detail-co { font-size: 15px; font-weight: 600; color: var(--vj-ink); }
.vj-detail-loc { font-size: 14px; color: var(--vj-ink-3); margin-top: 2px; }
.vj-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.vj-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.vj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border-radius: var(--vj-radius);
  font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
/* Scoped with body.vj on purpose. These actions are <a> elements, and the
   global `body.vj a { color: inherit }` rule is MORE specific than a bare
   `.vj-btn-*`, so a primary button once rendered dark-on-dark at a measured
   1.64:1 contrast. Matching the specificity fixes it. */
body.vj .vj-btn-secondary { background: var(--vj-bg); border-color: var(--vj-line-2); color: var(--vj-ink); }
body.vj .vj-btn-secondary:hover { border-color: var(--vj-accent); color: var(--vj-accent); }

/* ==========================================================================
   APPLY BUTTON  ("anti-metal" style)
   Ported from the supplied React/Tailwind component to plain CSS — this site
   is static HTML with no React, no Tailwind and no build step.
   --------------------------------------------------------------------------
   TWO DELIBERATE CHANGES FROM THE ORIGINAL:

   1. The label stays readable on hover. In the original the accent panel is
      `z-10` while the label has no stacking context, so as the panel expands
      to `calc(100% - 0.5rem)` it slides OVER the text and the label vanishes.
      That is a fine flourish on a "Book a demo" marketing button; on the
      primary action of a job board — the thing people hover immediately before
      clicking — losing the label is a usability regression. Here the label sits
      above the sweep and flips to near-black, so the animation still reads but
      the words never disappear.

   2. Fixed `w-36` became fluid. 144px cannot hold "Apply on company site".

   The accent is a fresh periwinkle violet rather than the original lime:
   green is already spoken for on this page (the "Register verified" badge),
   and amber means "weaker evidence", so a third hue keeps the semantics clean.
   Both gradient stops were checked to clear 4.5:1 against the dark label.
   ========================================================================== */
body.vj .vj-apply {
  --vj-apply-from: #a79bff;
  --vj-apply-to:   #8b7dff;
  --vj-apply-dot:  #0f0f0f;

  position: relative; display: inline-flex; align-items: center;
  /* Capped rather than flex:1. In a wide detail pane an unbounded button grew
     to 624px, which turned the sweep into a full-width wipe instead of a
     button-sized flourish. */
  height: 44px; flex: 0 1 300px; min-width: 200px; max-width: 300px;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.18);
  transition: transform .12s ease;
  text-decoration: none; cursor: pointer;
}
body.vj .vj-apply:active { transform: scale(.98); }
body.vj .vj-apply:focus-visible { outline: 2px solid var(--vj-apply-to); outline-offset: 2px; }

body.vj .vj-apply-label {
  position: absolute; right: 16px; top: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  color: #ffffff; pointer-events: none;
  transition: color .2s cubic-bezier(.65, 0, .35, 1);
}
body.vj .vj-apply:hover .vj-apply-label,
body.vj .vj-apply:focus-visible .vj-apply-label { color: var(--vj-apply-dot); }

body.vj .vj-apply-sweep {
  position: absolute; left: 4px; top: 4px; bottom: 4px; z-index: 2;
  width: 36px; overflow: hidden; border-radius: 8px;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 0 10px 0 12px;
  background: linear-gradient(180deg, var(--vj-apply-from) 0%, var(--vj-apply-to) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),
              inset 0 -2px 4px rgba(0,0,0,.12),
              0 2px 4px rgba(0,0,0,.08);
  transition: width .2s cubic-bezier(.65, 0, .35, 1), gap .2s cubic-bezier(.65, 0, .35, 1);
}
body.vj .vj-apply:hover .vj-apply-sweep,
body.vj .vj-apply:focus-visible .vj-apply-sweep { width: calc(100% - 8px); }
body.vj .vj-apply-sweep svg { flex-shrink: 0; overflow: visible; }

@keyframes vj-dot-wave {
  0%, 70%, 100% { opacity: .25; transform: scale(.85); }
  35%           { opacity: 1;   transform: scale(1); }
}
body.vj .vj-dot {
  transform-box: fill-box; transform-origin: center;
  animation: vj-dot-wave 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.vj .vj-dot { animation: none; opacity: 1; }
}

.vj-evidence {
  margin-top: 14px; padding: 11px 13px; border-radius: 6px;
  font-size: 13px; line-height: 1.55;
  background: var(--vj-ok-bg); color: var(--vj-ok-fg);
}
.vj-evidence.warn { background: var(--vj-warn-bg); color: var(--vj-warn-fg); }
.vj-evidence strong { display: block; margin-bottom: 2px; }

.vj-detail-body { padding: 20px 24px 28px; overflow-y: auto; flex: 1; }
.vj-detail-body h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vj-ink-3); margin: 0 0 10px; font-weight: 700;
}
.vj-desc { font-size: 14.5px; line-height: 1.65; color: var(--vj-ink-2); white-space: pre-wrap; word-break: break-word; }
.vj-detail-foot { font-size: 12.5px; color: var(--vj-ink-3); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--vj-line); }

/* ---------- states ---------- */
.vj-skel { background: var(--vj-bg); border: 1px solid var(--vj-line); border-radius: var(--vj-radius); padding: 14px 16px; }
.vj-skel div {
  background: linear-gradient(90deg,#eceef0 25%,#f6f7f8 50%,#eceef0 75%);
  background-size: 200% 100%; animation: vjshim 1.3s infinite; border-radius: 4px; margin-bottom: 8px;
}
@keyframes vjshim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.vj-empty { background: var(--vj-bg); border: 1px solid var(--vj-line); border-radius: var(--vj-radius); padding: 48px 24px; text-align: center; }
.vj-empty h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
.vj-empty p { color: var(--vj-ink-3); margin: 0 auto 16px; max-width: 42ch; font-size: 14px; }
.vj-detail-empty { display: grid; place-items: center; padding: 80px 24px; text-align: center; color: var(--vj-ink-3); font-size: 14.5px; }

.vj-more {
  display: block; width: 100%; margin-top: 12px; padding: 12px;
  background: var(--vj-bg); border: 1px solid var(--vj-line-2);
  border-radius: var(--vj-radius); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--vj-ink);
}
.vj-more:hover { border-color: var(--vj-accent); color: var(--vj-accent); }
.vj-more[disabled] { opacity: .55; cursor: default; }

/* ---------- mobile: list only, detail becomes a full-screen sheet ---------- */
.vj-back { display: none; }
@media (max-width: 1023px) {
  .vj-split { grid-template-columns: 1fr; }
  .vj-detail {
    position: fixed; inset: 0; z-index: 90; border-radius: 0; border: 0; max-height: none;
    transform: translateY(100%); transition: transform .22s ease; visibility: hidden;
  }
  body.vj[data-detail="open"] { overflow: hidden; }
  body.vj[data-detail="open"] .vj-detail { transform: translateY(0); visibility: visible; }
  .vj-back {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; color: var(--vj-link);
    font-weight: 600; font-size: 14.5px; cursor: pointer;
    padding: 0 0 12px; margin: 0;
  }
  .vj-detail-head { padding-top: 16px; }
  .vj-header-inner { flex-wrap: wrap; gap: 10px; height: auto; padding: 10px 14px; }
  /* Must stay a positioned element. As `static`, z-index does not apply and
     the fixed globe (z-index 1) painted straight over the search box. */
  .vj-header { height: auto; position: relative; z-index: 60; }
  .vj-filters { top: 0; }
  .vj-search { order: 3; width: 100%; max-width: none; flex-basis: 100%; }
  .vj-search-btn { padding: 0 16px; }
}
@media (max-width: 560px) {
  .vj-search { flex-wrap: wrap; }
  .vj-field { flex-basis: 100%; }
  .vj-field + .vj-field { border-left: 0; border-top: 1px solid var(--vj-line); }
  .vj-search-btn { flex-basis: 100%; padding: 11px; }
}

/* ============================ SEO CONTENT (below the tool) ============================ */
.vj-seo { background: var(--vj-bg); border-top: 1px solid var(--vj-line); margin-top: 32px; padding: 44px 0 56px; }
.vj-seo-inner { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.vj-seo h1, .vj-seo h2 { font-size: 21px; font-weight: 700; margin: 0 0 12px; line-height: 1.3; }
.vj-seo h2 { margin-top: 34px; font-size: 18px; }
.vj-seo p  { color: var(--vj-ink-2); font-size: 15px; line-height: 1.7; margin: 0 0 14px; }
.vj-seo a  { color: var(--vj-link); text-decoration: underline; text-underline-offset: 2px; }
.vj-note {
  background: var(--vj-bg-alt); border: 1px solid var(--vj-line);
  border-left: 3px solid var(--vj-accent); border-radius: 6px;
  padding: 14px 16px; font-size: 14px; color: var(--vj-ink-2); line-height: 1.6; margin: 0 0 16px;
}
.vj-note.warn { border-left-color: #d99a2b; }
.vj-faq { border-top: 1px solid var(--vj-line); padding: 16px 0; }
.vj-faq summary { font-weight: 600; cursor: pointer; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.vj-faq summary::-webkit-details-marker { display: none; }
.vj-faq summary::after { content: '+'; color: var(--vj-ink-3); font-size: 19px; font-weight: 400; }
.vj-faq[open] summary::after { content: '\2212'; }
.vj-faq p { margin: 10px 0 0; font-size: 14.5px; }

.vj-countrygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 8px; margin-top: 6px; }
.vj-countrycard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; background: var(--vj-bg); border: 1px solid var(--vj-line);
  border-radius: var(--vj-radius); font-size: 14px; font-weight: 500; color: var(--vj-ink);
}
.vj-countrycard:hover { border-color: var(--vj-accent); color: var(--vj-accent); }
.vj-countrycard .n { font-size: 12.5px; color: var(--vj-ink-3); font-variant-numeric: tabular-nums; }

.vj-footer { background: var(--vj-bg); border-top: 1px solid var(--vj-line); padding: 26px 0; font-size: 13.5px; color: var(--vj-ink-3); }
.vj-footer-inner { max-width: 1360px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.vj-footer a:hover { color: var(--vj-accent); }

@media (prefers-reduced-motion: reduce) {
  body.vj *, body.vj *::before, body.vj *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   SCROLL GLOBE HERO
   Vanilla port of the supplied React/Tailwind ScrollGlobe. Same interaction —
   fixed globe that repositions and rescales per stage, scroll progress bar,
   clickable stage dots — without React, Tailwind or a build step.

   ONE DELIBERATE DEPARTURE: the original is four full-height panels, which
   would push 1,000+ live jobs four screens below the fold. This is a job
   board, so the hero is a single screen and the globe then follows you down
   past the results as a backdrop. The effect survives; the tool stays usable.
   ========================================================================== */
.vj-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: rgba(9,77,79,.10);
}
.vj-progress-bar {
  height: 100%; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #8b7dff, #a79bff 55%, #7fd8e8);
  transition: transform .15s ease-out;
}

.vj-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 15% 0%, #0e2233 0%, #081722 55%, #05101a 100%);
  color: #eef3f8;
  padding: clamp(52px, 9vh, 104px) 0 clamp(48px, 8vh, 88px);
  min-height: min(78vh, 720px);
  display: flex; align-items: center;
}
.vj-hero-inner {
  position: relative; z-index: 2;
  max-width: 1360px; margin: 0 auto; padding: 0 16px; width: 100%;
}
.vj-hero-copy { max-width: 640px; }

.vj-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(167,155,255,.14); border: 1px solid rgba(167,155,255,.32);
  color: #cfc7ff; font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
}
.vj-hero-badge .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: #a79bff;
  animation: vj-pulse 2.4s ease-in-out infinite;
}
@keyframes vj-pulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.4; transform:scale(.82);} }

.vj-hero h1 {
  font-size: clamp(30px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 8px; color: #ffffff;
}
.vj-hero .sub {
  font-size: clamp(17px, 2.2vw, 25px); font-weight: 500; letter-spacing: .01em;
  color: #a79bff; margin: 0 0 20px;
}
.vj-hero p.lede {
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.68;
  color: rgba(238,243,248,.76); margin: 0 0 26px; max-width: 56ch;
}
.vj-hero p.lede strong { color: #ffffff; font-weight: 600; }

.vj-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.vj-hero-stat {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px; padding: 11px 16px; min-width: 116px;
}
.vj-hero-stat .n {
  display: block; font-size: 21px; font-weight: 700; color: #ffffff;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.vj-hero-stat .l {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(238,243,248,.55); margin-top: 4px; font-weight: 600;
}

.vj-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.vj .vj-hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  background: linear-gradient(180deg,#a79bff 0%,#8b7dff 100%); color: #0f0f0f;
  border: 0; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(139,125,255,.28);
  transition: transform .12s ease, box-shadow .15s ease;
}
body.vj .vj-hero-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(139,125,255,.4); }
body.vj .vj-hero-cta.ghost {
  background: transparent; color: #eef3f8;
  border: 1px solid rgba(255,255,255,.22); box-shadow: none;
}
body.vj .vj-hero-cta.ghost:hover { border-color: rgba(167,155,255,.6); color: #cfc7ff; }

/* --------------------------------------------------------------------------
   THE GLOBE — the supplied component, reproduced in CSS.

   The original is a rounded div with a background image, a background-position
   keyframe faking rotation, a stack of inset box-shadows for the rim light and
   terminator, and absolutely positioned twinkling stars. None of that needs
   React, so it is here verbatim, with two corrections:

   1. Seamless rotation. The original slides the background by a fixed 400px
      over a `cover`-sized crop, so the loop visibly jumps. Our texture is a
      true 2:1 equirectangular map, sized `auto 100%` and repeated on x, so one
      cycle is exactly one texture width (2 x the sphere height) and the seam
      is mathematically invisible.

   2. The stars actually appear. In the original they are children of the
      sphere, which is `overflow: hidden`, and most are positioned outside its
      250px box (left: 350px, top: 290px) — so they were clipped away. Here
      they live in an unclipped wrapper around the sphere.
   -------------------------------------------------------------------------- */
.vj-globe {
  position: fixed; top: 0; left: 0; z-index: 1;
  pointer-events: none; will-change: transform, opacity;
  transition: transform 1200ms cubic-bezier(.23,1,.32,1), opacity 900ms ease;
}
.vj-earth-wrap {
  position: relative;
  width: 250px; height: 250px;      /* transform-scaled per stage by JS */
  display: grid; place-items: center;
}

/* ATMOSPHERE
   The circular mask below clips the sphere exactly at its limb, which removes
   the glow the render carried around it. This puts the halo back in CSS, where
   it also scales with the wrapper. */
.vj-earth-wrap::before {
  content: ''; position: absolute; inset: -34px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(120, 190, 255, 0) 46%,
      rgba(120, 190, 255, .30) 51%,
      rgba(96, 165, 250, .16) 58%,
      rgba(96, 165, 250, 0) 74%);
}

/* THE GLOBE IS A VIDEO, NOT A CSS SPHERE.
   The previous version slid an equirectangular texture behind a round mask —
   convincing at a glance, but it is a flat map and the limb never curves the
   way a real render does. This is an actual rendered rotation.

   WHY IT IS MASKED AND SCALED
   The source clip was produced with a "transparency" checkerboard baked in as
   real pixels behind the sphere, and the sphere also drifts 6.4% larger over
   the clip. Both were fixed before encoding: the zoom is cancelled so the
   sphere holds one size, and it is framed so its limb sits just past the frame
   edge. `overflow:hidden` plus the 1.04 scale below guarantees no grey corner
   can appear at any size. See tools/prepare-earth-video.sh. */
.vj-earth {
  position: relative; z-index: 1;
  width: 250px; height: 250px;
  border-radius: 50%;
  overflow: hidden;
  background: #0b1628;               /* behind the poster, before first paint */
  box-shadow: 0 0 30px rgba(120, 190, 255, .30);
}
.vj-earth video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Pushes the clip's outermost edge past the mask so the limb is clean. */
  transform: scale(1.04);
}

/* Specular sheen — kept, because the mask flattens the edge slightly. */
.vj-earth::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 32% 24%,
    rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 32%, rgba(255,255,255,0) 58%);
}

.vj-star {
  position: absolute; width: 3px; height: 3px;
  background: #fff; border-radius: 50%; opacity: .35;
}
@keyframes vj-twinkle { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }
.vj-star { animation: vj-twinkle 3s ease-in-out infinite; }
.vj-star.s2 { animation-duration: 2s; }
.vj-star.s3 { animation-duration: 4s; }
.vj-star.s4 { animation-duration: 1.5s; }

@media (prefers-reduced-motion: reduce) {
    /* Reduced motion pauses the clip rather than removing the globe: same
     image, held still. */
  .vj-earth video { animation: none; }
  .vj-star  { animation: none; opacity: .5; }
}

/* stage dots */

@media (max-width: 1023px) {
    .vj-globe { opacity: .45 !important; }
  .vj-earth-wrap, .vj-earth { width: 210px; height: 210px; }
  .vj-hero { min-height: auto; padding: 40px 0 44px; }
  .vj-hero-copy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vj-globe { transition: none; }
  .vj-hero-badge .pulse { animation: none; }
}

/* --------------------------------------------------------------------------
   STACKING FIX — content must always sit above the globe.

   The globe is position:fixed with z-index:1. .vj-main, .vj-seo and .vj-footer
   were unpositioned, so the globe painted on top of them: at the results stage
   a translucent sphere sat across the detail pane and washed out the
   "Sponsor licence confirmed" text. Verified in a screenshot before shipping.

   Giving the content a stacking context above the globe means the sphere is
   fully visible over the dark hero, drifts and shrinks as you scroll out of
   it, and then passes behind the page rather than over anyone's job
   description. Legibility wins over the flourish.
   -------------------------------------------------------------------------- */
body.vj .vj-main,
body.vj .vj-seo,
body.vj .vj-footer { position: relative; z-index: 2; }

/* ==========================================================================
   HERO — ANIMATED BACKDROP
   Three slow-drifting radial washes plus a two-layer parallax starfield.
   All of it is transform/opacity only so it stays on the compositor; no
   layout, no paint storms, and it costs nothing when the tab is hidden.
   ========================================================================== */
.vj-hero { position: relative; isolation: isolate; }
.vj-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.vj-aurora {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  will-change: transform;
}
.vj-aurora.a1 {
  width: 46vw; height: 46vw; left: -10vw; top: -14vw;
  background: radial-gradient(circle, rgba(139,125,255,.55) 0%, rgba(139,125,255,0) 70%);
  animation: vj-drift-1 26s ease-in-out infinite alternate;
}
.vj-aurora.a2 {
  width: 40vw; height: 40vw; right: -8vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(45,190,205,.42) 0%, rgba(45,190,205,0) 70%);
  animation: vj-drift-2 32s ease-in-out infinite alternate;
}
.vj-aurora.a3 {
  width: 34vw; height: 34vw; left: 38%; top: 30%;
  background: radial-gradient(circle, rgba(72,120,255,.34) 0%, rgba(72,120,255,0) 70%);
  animation: vj-drift-3 38s ease-in-out infinite alternate;
}
@keyframes vj-drift-1 { from { transform: translate3d(0,0,0) scale(1); }   to { transform: translate3d(7vw,5vh,0) scale(1.18); } }
@keyframes vj-drift-2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-6vw,-6vh,0) scale(.92); } }
@keyframes vj-drift-3 { from { transform: translate3d(0,0,0) scale(.95); } to { transform: translate3d(-8vw,4vh,0) scale(1.22); } }

/* Starfield drawn with repeating radial gradients — two layers at different
   speeds give parallax without a single extra DOM node or image request. */
.vj-starfield { position: absolute; inset: -50% -50% -50% -50%; opacity: .6; will-change: transform; }
.vj-starfield.f1 {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 68% 14%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 62%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 33% 78%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 52% 44%, rgba(255,255,255,.75) 50%, transparent 51%);
  background-size: 340px 340px;
  animation: vj-stars-1 140s linear infinite;
}
.vj-starfield.f2 {
  background-image:
    radial-gradient(1px 1px at 26% 58%, rgba(200,225,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 34%, rgba(200,225,255,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 46% 88%, rgba(200,225,255,.65) 50%, transparent 51%);
  background-size: 220px 220px;
  animation: vj-stars-2 90s linear infinite;
  opacity: .45;
}
@keyframes vj-stars-1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-340px,-170px,0); } }
@keyframes vj-stars-2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(220px,-110px,0); } }

/* A slow sheen crossing the hero, so the surface is never completely static. */
.vj-hero-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(167,155,255,.09) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: vj-sheen 18s ease-in-out infinite;
}
@keyframes vj-sheen { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }

/* ==========================================================================
   APPLY GATE MODAL
   ========================================================================== */
.vj-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.vj-modal[data-open="true"] { display: block; }
body.vj[data-modal="open"] { overflow: hidden; }
.vj-modal-backdrop {
  position: absolute; inset: 0; background: rgba(9,16,24,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: vj-fade .18s ease;
}
@keyframes vj-fade { from { opacity: 0; } to { opacity: 1; } }
.vj-modal-card {
  position: relative; z-index: 1;
  width: min(500px, calc(100vw - 32px));
  margin: max(6vh, 24px) auto 24px;
  background: var(--vj-bg); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  padding: 26px 26px 22px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  animation: vj-pop .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes vj-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.vj-modal-x {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; font-size: 26px; line-height: 1;
  color: var(--vj-ink-3); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.vj-modal-x:hover { color: var(--vj-ink); background: var(--vj-bg-alt); }
.vj-modal-card h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.vj-modal-sub { font-size: 14px; color: var(--vj-ink-2); margin: 0 0 18px; line-height: 1.5; }

.vj-f { display: block; margin-bottom: 14px; }
.vj-f > span { display: block; font-size: 13px; font-weight: 600; color: var(--vj-ink-2); margin-bottom: 6px; }
.vj-f input, .vj-f select {
  width: 100%; padding: 11px 12px; font-size: 15px; color: var(--vj-ink);
  background: var(--vj-bg); border: 1px solid var(--vj-line-2);
  border-radius: var(--vj-radius); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vj-f input:focus, .vj-f select:focus {
  border-color: var(--vj-accent); box-shadow: 0 0 0 3px rgba(9,77,79,.10);
}
.vj-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .vj-f-row { grid-template-columns: 1fr; } }

.vj-phone { display: flex; align-items: stretch; }
.vj-dial {
  display: inline-flex; align-items: center; padding: 0 11px;
  background: var(--vj-bg-alt); border: 1px solid var(--vj-line-2); border-right: 0;
  border-radius: var(--vj-radius) 0 0 var(--vj-radius);
  font-size: 14.5px; font-weight: 600; color: var(--vj-ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vj-phone input { border-radius: 0 var(--vj-radius) var(--vj-radius) 0; }

.vj-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; }
.vj-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--vj-accent); flex-shrink: 0; }
.vj-check span { font-size: 13.5px; color: var(--vj-ink-2); line-height: 1.5; }

.vj-modal-err {
  background: #fdecec; color: #8a1c1c; border-radius: 8px;
  padding: 10px 12px; font-size: 13.5px; margin: 0 0 12px;
}
body.vj .vj-modal-go { width: 100%; max-width: none; flex: none; height: auto; padding: 13px; }
.vj-modal-fine { font-size: 12px; color: var(--vj-ink-3); line-height: 1.55; margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .vj-aurora, .vj-starfield, .vj-hero-sheen { animation: none; }
  .vj-modal-card, .vj-modal-backdrop { animation: none; }
}

/* .vj-btn-primary lost its rules when the Apply action became .vj-apply.
   The modal's submit button still uses it, and was rendering as an unstyled
   grey box. Restored, scoped with body.vj to beat `body.vj a { color: inherit }`. */
body.vj .vj-btn-primary {
  background: var(--vj-accent); color: #ffffff; border-color: var(--vj-accent);
}
body.vj .vj-btn-primary:hover:not([disabled]) {
  background: var(--vj-accent-2); color: #ffffff;
  box-shadow: 0 2px 8px rgba(9,77,79,.25);
}
body.vj .vj-btn-primary[disabled] { opacity: .6; cursor: default; }


/* ==========================================================================
   EMPTY STATE
   `[hidden]` is a UA rule of display:none, and any class that sets `display`
   outranks it — so `.vj-more { display:block }` kept the "Show more jobs"
   button visible on pages with zero results. Restate it at class specificity.
   ========================================================================== */
.vj-more[hidden], .vj-detail[hidden] { display: none !important; }

.vj-empty-links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 16px; text-align: left;
}
.vj-empty-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--vj-line); border-radius: var(--vj-radius);
  background: var(--vj-bg); font-size: 13.5px; font-weight: 600; color: var(--vj-link);
  transition: border-color .12s ease, background .12s ease;
}
.vj-empty-link:hover { border-color: var(--vj-accent); background: var(--vj-bg-sel); }
.vj-empty-link b { font-weight: 700; color: var(--vj-ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .vj-empty-links { grid-template-columns: 1fr; } }

/* Nothing to show on the right, so stop reserving a column for it. */
body.vj[data-results="empty"] .vj-split { grid-template-columns: 1fr; }
body.vj[data-results="empty"] .vj-empty { max-width: 620px; margin: 0 auto; }

/* ==========================================================================
   GUIDES BLOCK
   Internal linking that earns its place: the board answers "which jobs", the
   guides answer "will this even work for me", and the second question is the
   one that decides whether an application is worth starting.
   ========================================================================== */
.vj-guides { max-width: 1000px; margin: 0 auto; padding: 48px 16px 8px; }
.vj-guides h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--vj-ink); }
.vj-guides-lede { margin: 0 0 20px; color: var(--vj-ink-2); font-size: 15px; max-width: 70ch; }
.vj-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.vj-guide {
  display: block; padding: 14px 16px; border: 1px solid var(--vj-line);
  border-radius: var(--vj-radius); background: var(--vj-bg);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.vj-guide:hover { border-color: var(--vj-accent); background: var(--vj-bg-sel); box-shadow: var(--vj-shadow); }
.vj-guide b { display: block; font-size: 14.5px; font-weight: 700; color: var(--vj-link); margin-bottom: 4px; line-height: 1.35; }
.vj-guide span { display: block; font-size: 13px; color: var(--vj-ink-3); line-height: 1.5; }