/* =========================================================
   XpertLab Job Opening — Frontend Styles v1.0.3
   ========================================================= */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --xj-accent:  #e91e8c;
  --xj-blue:    #4094f7;
  --xj-primary: #1a237e;
  --xj-text:    #191919;
  --xj-muted:   #778AA9;
  --xj-border:  #e4eaf0;
  --xj-white:   #ffffff;
  --xj-radius:  14px;
}



/* ── Reset ──────────────────────────────────────────────── */
.xjob-list-wrap *,
.xjob-detail-wrap * { box-sizing: border-box; }

/* =========================================================
   JOB LIST
   ========================================================= */
.xjob-list-wrap { max-width: 1600px; margin: 0 auto; padding: 24px 20px; }

.xjob-list-header { margin-bottom: 36px; }

.xjob-list-heading {
  font-size: 40px;
  font-family: 'syne' !important;
  font-weight: 700;
  color: var(--xj-text);
  margin: 0 0 10px;
  line-height: 1.2;
}

.xjob-list-sub {
  font-size: 22px !important;
  color: var(--xj-muted) !important;
  margin: 0 !important;
  /* max-width: 600px; */
  line-height: 1.65 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Grid */
.xjob-grid { display: grid; gap: 20px; }
.xjob-grid-3 { grid-template-columns: repeat(3, 1fr); }
.xjob-grid-2 { grid-template-columns: repeat(2, 1fr); }
.xjob-grid-1 { grid-template-columns: 1fr; }

/* Card */
.xjob-card {
  background: var(--xj-white);
  border-radius: 20px;
  padding: 45px 28px 32px 32px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  /* Slow, unhurried lift. The curve is the same one the scroll-reveal uses
     further down, so hovering reads as part of the same motion language
     instead of a separate, snappier effect. */
  transition:
    box-shadow .6s cubic-bezier(0.16, 1, 0.3, 1),
    transform  .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.xjob-card:hover { box-shadow: 0 10px 32px rgba(0,0,0,.12); transform: translateY(-4px); }

.xjob-card::before {
  content: '';
  position: absolute;
  left: 0; top: 22%;
  transform: translateY(-50%);
  width: 10px; height: 20%;
  background: #B51B5A;
  border-radius: 0 10px 10px 0;
}

.xjob-card-title { font-size: 22px; font-weight: 700; color: #191919; margin: 0; line-height: 1.3; }
.xjob-card-desc  { font-size: 16px; color: 400; margin: 0; line-height: 1.6; flex: 1; color:#778AA9; }
.xjob-card-eligibility { font-family: 'Caveat', cursive !important; color: #191919; font-size: 22px; margin: 0; line-height: 1.4; }

/* Mobile only: make the pink accent bar the SAME height as the title
   (anchored to the title, left:-32px lifts it to the card's left edge).
   Desktop keeps the original taller 20% bar above — untouched. */
@media (max-width: 640px) {
  .xjob-card::before { display: none; }
  .xjob-card-title { position: relative; }
  .xjob-card-title::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 0;
    width: 10px;
    height: 100%;
    background: #B51B5A;
    border-radius: 0 10px 10px 0;
  }
}

.xjob-card-link {
  color: #778AA9;
  font-family: 'syne' !important;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, gap .15s;
}
.xjob-card-link:hover { color: var(--xj-blue); text-decoration: none; gap: 10px; }

.xjob-empty { color: var(--xj-muted); font-style: italic; }

/* =========================================================
   JOB DETAIL — PAGE LAYOUT
   ========================================================= */
.xjob-detail-wrap {
  max-width: 1600px;
  margin: 0 auto;
  /* Establishes a block formatting context so the title's top margin stays
     INSIDE this box instead of collapsing out through the (now padding-less)
     top edge — that collapse is what would otherwise hand the gap to the
     theme's container and make it unequal again. */
  display: flow-root;
  /* No top padding: the title's own 22px top margin is the top gap, so it
     matches its 22px bottom margin exactly. Without this the title sat
     28px (wrap padding) + 22px (margin) below whatever preceded it, while
     only 22px separated it from the meta cards underneath. */
  padding: 0 24px 40px;
}

/* When there is no title (e.g. [xpert_general_apply] with no heading) the
   meta cards would otherwise touch the top edge — give them the same 22px. */
.xjob-detail-wrap > .xjob-detail-meta:first-child { margin-top: 22px; }

/* ── Page title ──
   Every property carries !important: the theme styles `h1` inside the post
   content with its own font-size / margin (a bottom-only margin, which is what
   made the gap above the title differ from the gap below it). Forcing the
   values here is what actually makes the 22px above and 22px below equal. */
.xjob-detail-wrap .xjob-detail-title,
.xjob-detail-title {
  font-size: 29px !important;
  font-weight: 600 !important;
  color: var(--xj-text) !important;
  /* Equal breathing room above and below the heading. */
  margin: 22px 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

/* ── Meta bar — three SEPARATE rounded cards (matches design) ── */
.xjob-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 30px;
  box-shadow: none;
  overflow: visible;
}

.xjob-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 26px;
  background: var(--xj-white);
  border: 1px solid var(--xj-border);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  flex: 1 1 220px;
  min-width: 200px;
}

.xjob-meta-label {
  font-size: 26px;
  letter-spacing: .07em;
  color: #000000;
  font-weight: 600;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
.xjob-meta-value {
  font-weight: 500;
  color: #35B6FF;
  font-size: 24px;
  overflow-wrap: anywhere;
}

/* ── Two-column body: 40 / 60 split ── */
.xjob-detail-body {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 32px;
  /* Stretch both columns to the tallest one so the left content box matches
     the height of the right application form (extra white space is fine). */
  align-items: stretch;
}

/* ── Left: job content card wrapper ── */
.xjob-detail-wrap .xjob-detail-content {
  background: #ffffff !important;
  border-radius: 30px !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
}

/* ── Sections inside the card ── */
.xjob-detail-wrap .xjob-section {
  margin: auto !important;
  padding: 24px 0px !important;
  border-bottom: 1px solid #f0f3f7 !important;
  width:90%
}
.xjob-detail-wrap .xjob-section:last-child {
  border-bottom: none !important;
}
.xjob-detail-wrap .xjob-section-title {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #191919 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.25 !important;
}
.xjob-detail-wrap .xjob-section-body {
  color: #778AA9 !important;
  font-size: 16px !important;
  line-height: 21px !important;

}
/* Highlighted words inside a section's copy. Typography per the design: same
   family and 16px size as the surrounding text, Bold 700, brand blue — the
   "Full Stack Developer" treatment. Driven by the job's "Highlight Words"
   admin field. */
.xjob-detail-wrap .xjob-section-body .xjob-hl {
  font-weight: 700 !important;
  color: #35B6FF !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
  background: none !important;
}

.xjob-detail-wrap .xjob-section-body ul,
.xjob-detail-wrap .xjob-section-body ol { padding-left: 18px !important; margin: 0 !important; }
.xjob-detail-wrap .xjob-section-body li { margin-bottom: 5px !important; }
.xjob-detail-wrap .xjob-section-body p  { margin: 0 0 8px !important; }

/* =========================================================
   APPLICATION FORM CARD
   ========================================================= */

.xjob-detail-sidebar { position: relative; }

/* Card with sky-blue gradient + glass bubbles */
.xjob-form-card {
  background: #E9F5FF !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 28px 26px 34px !important;
  position: sticky;
  top: 90px;
  /* visible, not hidden — an open dropdown list must not be clipped. The
     bleeding decorations are clipped by .xjob-form-deco-layer instead. */
  overflow: visible !important;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 6px 30px rgba(70, 140, 210, 0.18) !important;
}

/* Remove old glass bubbles */
.xjob-form-card::before,
.xjob-form-card::after { content: none !important; }

/* Clipping layer for the two bleeding decorations — takes over the
   `overflow: hidden` the card used to do, so the card itself can stay
   visible for the dropdown lists. Matches the card's own rounded corners. */
.xjob-detail-wrap .xjob-form-deco-layer {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}

/* Blob decoration — top-right organic shape */
.xjob-detail-wrap .xjob-form-deco-blob {
  position: absolute !important;
  top: -35px !important;
  right: -35px !important;
  width: 200px !important;
  height: 270px !important;
  background: rgba(178, 214, 245, 0.42) !important;
  border-radius: 40% 60% 30% 70% / 60% 30% 70% 40% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
}

/* Arcs decoration — bottom-left concentric rings */
.xjob-detail-wrap .xjob-form-deco-arcs {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  width: 200px !important;
  height: 200px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
  overflow: visible !important;
}
.xjob-detail-wrap .xjob-form-deco-arcs svg {
  display: block !important;
  overflow: visible !important;
}

/* Form — sits above bubble decorations */
.xjob-apply-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
  z-index: 1;
}

.xjob-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.xjob-form-group { display: flex; flex-direction: column; gap: 6px; }
.xjob-field-err { margin-top: -15px !important; line-height: 1.3; margin-bottom: 15px; font-weight: bold; font-size: 14px !important; }

/* Conditional groups (the "Other" text field, the CTC row) are toggled with the
   `hidden` attribute — which display:flex/grid above would otherwise ignore. */
.xjob-detail-wrap .xjob-apply-form [hidden] { display: none !important; }

.xjob-form-group label {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1a2c44 !important;
  letter-spacing: 0.01em;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.xjob-form-group .req { color: #e53535 !important; }

/* Icon wrapper */
.xjob-detail-wrap .xjob-field-wrap {
  position: relative !important;
  display: block !important;
}

/* Vertically centred with translateY(-50%) — stays put at every breakpoint,
   whatever height the field grows to. (Was translateY(-100%) on the inner SVG,
   which drifted off-centre as soon as the field height changed on tablet.) */
.xjob-detail-wrap .xjob-field-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* color: #7aaece !important; */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 3 !important;
  line-height: 1 !important;
  /* 20px, not 24px: the glyph now reads at the same weight as the 14px
     placeholder next to it instead of towering over it. */
  width: 20px !important;
  height: 20px !important;
}

.xjob-detail-wrap .xjob-field-icon svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

/* Select chevron */
.xjob-detail-wrap .xjob-select-wrap {
  position: relative !important;
  display: block !important;
}

.xjob-detail-wrap .xjob-select-chevron {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* color: #7aaece !important; */
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  z-index: 3 !important;
  line-height: 1 !important;
}
.xjob-detail-wrap .xjob-select-chevron svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  transform: none !important;
}

/* ── All text inputs — white pill ── */
.xjob-detail-wrap .xjob-apply-form input[type=text],
.xjob-detail-wrap .xjob-apply-form input[type=email],
.xjob-detail-wrap .xjob-apply-form input[type=tel] {
  width: 100% !important;
  /* A FIXED height with no vertical padding: the browser then centres the
     value/placeholder in the box, so it lines up with the (also centred)
     leading icon. With `min-height` + `padding: 12px 0`, the text was pinned
     12px from the top of a 50px box — about 3px above the icon. */
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px 0 48px !important;
  /* The theme puts a bottom margin on every form control. That margin sits
     INSIDE .xjob-field-wrap, making the wrap taller than the field — and the
     icon is centred against the WRAP, so it ended up sitting below the
     placeholder. The dropdown trigger already zeroed its margin, which is
     exactly why Experience/Education were the only two that looked right. */
  margin: 0 !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  color: #1a2c44 !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 3px 12px rgba(80, 145, 205, 0.14) !important;
  transition: box-shadow .2s;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
  display: block !important;
  position: static !important;
}
.xjob-detail-wrap .xjob-apply-form input[type=text]::placeholder,
.xjob-detail-wrap .xjob-apply-form input[type=email]::placeholder,
.xjob-detail-wrap .xjob-apply-form input[type=tel]::placeholder {
  color: #aac5d8 !important;
  opacity: 1 !important;
}

.xjob-detail-wrap .xjob-apply-form input[type=text]:focus,
.xjob-detail-wrap .xjob-apply-form input[type=email]:focus,
.xjob-detail-wrap .xjob-apply-form input[type=tel]:focus {
  box-shadow: 0 3px 18px rgba(60, 140, 220, 0.26) !important;
}

.xjob-detail-wrap .xjob-apply-form input.xjob-input-error,
.xjob-detail-wrap .xjob-apply-form select.xjob-input-error {
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.xjob-detail-wrap .xjob-upload-zone.xjob-input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* ── Select — white pill with visible placeholder ── */
.xjob-detail-wrap .xjob-apply-form select {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  /* 44px right gutter keeps the chevron clear of the longest option label. */
  padding: 0 44px 0 48px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  text-overflow: ellipsis !important;
  color: #aab5c0 !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 3px 12px rgba(80, 145, 205, 0.14) !important;
  transition: box-shadow .2s;
  font-family: inherit !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.4 !important;
  display: block !important;
  position: static !important;
  z-index: 1 !important;
}
.xjob-detail-wrap .xjob-apply-form select:valid { color: #1a2c44 !important; }
.xjob-detail-wrap .xjob-apply-form select option { color: #1a2c44 !important; font-size: 14px !important; }
.xjob-detail-wrap .xjob-apply-form select:focus {
  box-shadow: 0 3px 18px rgba(60, 140, 220, 0.26) !important;
}

/* =========================================================
   SEARCHABLE DROPDOWN  (replaces the native <select> popup)
   ---------------------------------------------------------
   A native select's popup is drawn by the OS: it can't be styled, and on
   narrow/emulated viewports the browser is free to render it beside the
   field instead of under it. So the closed state is replaced with a button
   styled exactly like the other pills, and the list is a normal absolutely
   positioned element that always opens directly below its field — plus a
   search box so long lists can be typed into. The real <select> stays in
   the DOM (visually hidden) so its name/value still submits and every
   existing change-handler keeps firing.
   ========================================================= */

/* Hidden native select — kept for form submission only. */
.xjob-detail-wrap .xjob-apply-form select.xjob-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Closed state — visually identical to a text input pill. */
.xjob-detail-wrap .xjob-dd-trigger {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 44px 0 48px !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #1a2c44 !important;
  background: #ffffff !important;
  box-shadow: 0 3px 12px rgba(80, 145, 205, 0.14) !important;
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: box-shadow .2s;
}
.xjob-detail-wrap .xjob-dd-trigger:hover,
.xjob-detail-wrap .xjob-dd-trigger:focus,
.xjob-detail-wrap .xjob-dd-trigger:focus-visible,
.xjob-detail-wrap .xjob-dd-trigger:active {
  background: #ffffff !important;
  color: #1a2c44 !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  box-shadow: 0 3px 18px rgba(60, 140, 220, 0.26) !important;
}
.xjob-detail-wrap .xjob-dd-trigger::-moz-focus-inner { border: 0; padding: 0; }

/* Nothing chosen yet — same grey as the input placeholders. */
.xjob-detail-wrap .xjob-dd-trigger.is-placeholder,
.xjob-detail-wrap .xjob-dd-trigger.is-placeholder:hover,
.xjob-detail-wrap .xjob-dd-trigger.is-placeholder:focus {
  color: #aac5d8 !important;
}

.xjob-detail-wrap .xjob-dd-label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron flips while the list is open. */
.xjob-detail-wrap .xjob-select-wrap.is-open .xjob-select-chevron {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Open list — always directly under its own field. */
.xjob-detail-wrap .xjob-dd-menu {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(17, 40, 70, 0.18) !important;
  padding: 8px !important;
  margin: 0 !important;
  z-index: 40 !important;
  overflow: hidden !important;
}
.xjob-detail-wrap .xjob-dd-menu[hidden] { display: none !important; }

.xjob-detail-wrap .xjob-dd-list {
  max-height: 210px;
  overflow-y: auto;
}

.xjob-detail-wrap .xjob-dd-option {
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #1a2c44 !important;
  cursor: pointer !important;
  transition: background .15s ease;
}
.xjob-detail-wrap .xjob-dd-option[hidden] { display: none !important; }
.xjob-detail-wrap .xjob-dd-option:hover,
.xjob-detail-wrap .xjob-dd-option.is-active { background: #eef6fd !important; }
.xjob-detail-wrap .xjob-dd-option.is-selected {
  background: #e2f0fb !important;
  font-weight: 600 !important;
}

/* While a list is open, every block between it and the form is lifted in front
   of the rows below. Needed because the scroll-reveal leaves `will-change` on
   each top-level form row, and `will-change` makes each row its own stacking
   context — inside which the menu's own z-index counts for nothing against the
   NEXT row. That is what painted the Upload Resume box over the open list. */
.xjob-detail-wrap .xjob-apply-form .xjob-dd-lift {
  position: relative !important;
  z-index: 60 !important;
}

/* Conditional "Please specify" field — sits inside the Education field,
   directly under its dropdown. It carries no leading icon, but the shared
   48px left padding on every input already puts its placeholder exactly where
   the dropdown's label starts, so the two line up with nothing extra. */
.xjob-detail-wrap .xjob-other-wrap { margin-top: 10px !important; }

/* Validation outline lands on the visible trigger, not the hidden select. */
.xjob-detail-wrap .xjob-select-wrap.xjob-input-error .xjob-dd-trigger {
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* ── Textarea — white rounded rect ── */
.xjob-detail-wrap .xjob-apply-form textarea {
  width: 100% !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: .84rem !important;
  color: #1a2c44 !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 3px 12px rgba(80, 145, 205, 0.14) !important;
  resize: none !important;
  min-height: 120px !important;
  font-family: inherit !important;
  transition: box-shadow .2s;
  line-height: 1.6 !important;
  display: block !important;
}
.xjob-detail-wrap .xjob-apply-form textarea::placeholder {
  color: #aac5d8 !important;
  opacity: 1 !important;
}
.xjob-detail-wrap .xjob-apply-form textarea:focus {
  box-shadow: 0 3px 18px rgba(60, 140, 220, 0.26) !important;
}

/* ── Upload zone — horizontal layout matching design ── */
.xjob-detail-wrap .xjob-upload-zone {
  border: 1.5px dashed #c8d6e0 !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  cursor: pointer !important;
  position: relative !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  margin-bottom: 20px;
}
.xjob-detail-wrap .xjob-upload-zone:hover {
  border-color: #7aaece !important;
  background: #f8fbff !important;
}
.xjob-detail-wrap .xjob-upload-zone input[type=file] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}
.xjob-detail-wrap .xjob-upload-inner {
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  justify-content: center;
}
.xjob-detail-wrap .xjob-upload-icon {
  flex-shrink: 0 !important;
  color: #7a90a8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.xjob-detail-wrap .xjob-upload-icon svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
}
.xjob-detail-wrap .xjob-upload-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.xjob-detail-wrap .xjob-upload-inner p {
  font-weight: 700 !important;
  font-size: .92rem !important;
  color: #1a2c44 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.xjob-detail-wrap .xjob-upload-inner small {
  font-size: .76rem !important;
  color: #4a7fa8 !important;
  line-height: 1.55 !important;
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.xjob-detail-wrap .xjob-upload-name {
  display: none;
  margin-top: 15px !important;
  font-size: .78rem !important;
  color: #4aa2e4 !important;
  font-weight: 500 !important;
  background: none !important;
  border-top:1px solid #dfdfdf;
  padding: 0;
  padding-top: 5px;
  text-align: center;
  width: 90%;
  margin: auto;
}

/* ── Apply Now — gradient pill, centered ── */
.xjob-btn-submit {
  background: linear-gradient(15deg, #35B6FF 0%, #EDF8FF 100%) !important;
  color: #191919 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 20px 56px !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  cursor: pointer;
  align-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 26px rgba(45, 118, 215, 0.38) !important;
  transition: transform .18s, box-shadow .18s;
  font-family: 'syne' !important;
  min-width: 195px;
  margin-top: -10px !important;
  letter-spacing: 0.3px;
  margin-bottom: 0px !important;
}
.xjob-btn-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(45, 118, 215, 0.46) !important;
}
.xjob-btn-submit:active  { transform: translateY(0) !important; }
.xjob-btn-submit:disabled {
  background: linear-gradient(130deg, #a8c4d8, #88afc8) !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.xjob-btn-arrow {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
.xjob-btn-arrow svg {
  display: block !important;
  width: 18px !important;
  height: 14px !important;
  fill: currentColor !important;
}

/* ── Response message ── */
.xjob-response {
  border-radius: 10px;
  font-size: .875rem;
  min-height: 0;
  transition: all .25s;
}
.xjob-response:not(:empty) { padding: 12px 16px; }
.xjob-response.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; margin-bottom: 20px; }
.xjob-response.error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; margin-bottom: 20px; }

/* =========================================================
   JOIN OUR TEAM SECTION
   ========================================================= */

/* outer container — flex row, no gap, no background of its own */
.xjob-detail-wrap .xjob-join-section {
  margin-top: 44px !important;
  display: block !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  min-height: 0 !important;
  margin-bottom: 104px !important;
}

/* ── Left panel — spans the full width; shapes on the left, pink floats over the right ── */
.xjob-detail-wrap .xjob-join-left {
  width: 59% !important;
  background-color: #fafafa !important;
  background-image: url('../images/join-shapes.svg') !important;
  background-size: auto 100% !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  border-radius: 20px !important;
  padding: 30px 40px !important;
  position: relative !important;
  overflow: hidden !important;
  height: 210px !important;
  min-height: 210px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.xjob-detail-wrap .xjob-join-left::before { content: none !important; }
.xjob-detail-wrap .xjob-join-left::after  { content: none !important; }

/* Hide all deco spans — image handles visuals */
.xjob-detail-wrap .xjob-deco-blob-purple,
.xjob-detail-wrap .xjob-deco-blob-green,
.xjob-detail-wrap .xjob-deco-sq-purple,
.xjob-detail-wrap .xjob-deco-sq-blue { display: none !important; }

/* Join text — sits above background image */
.xjob-detail-wrap .xjob-join-text {
  position: relative !important;
  z-index: 1 !important;
  text-align: left !important;
  /* max-width: 350px; */
}
.xjob-detail-wrap .xjob-join-text::before { content: none !important; display: none !important; }
.xjob-detail-wrap .xjob-join-text h3 {
  font-size: 36px !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  color: #191919 !important;
  line-height: 1.25 !important;
  font-family: 'syne' !important;
}
.xjob-detail-wrap .xjob-join-text p {
  margin: 0 !important;
  color: #778AA9 !important;
  font-size: 22px !important;
  line-height: 1.55 !important;
}

/* ── Right pink panel (contact-panel) — overlaps left by 36px ── */
.xjob-detail-wrap .xjob-contact-row {
  position: absolute !important;
  right: 0 !important;
  top: 133px !important;
  width: 76% !important;
  margin: 0 !important;
  background: #fbe9ee !important;
  border: none !important;
  border-radius: 0px 0px 30px 30px !important;
  padding: 20px !important;
  display: flex !important;
  gap: 14px !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* White contact card */
.xjob-detail-wrap .xjob-contact-card {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #ffffff !important;
  border-radius: 22px !important;
  padding: 18px 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(230, 189, 189, 0.04) !important;
  /* Matches the slow lift on the listing cards above. */
  transition:
    box-shadow .55s cubic-bezier(0.16, 1, 0.3, 1),
    transform  .55s cubic-bezier(0.16, 1, 0.3, 1) !important;
  min-width: 0 !important;
}
.xjob-detail-wrap .xjob-contact-card:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,.09) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* The reveal rules further down already honour prefers-reduced-motion, but they
   only apply while `.xjob-reveal` is on the wrapper (the script drops it once
   the entrance finishes). These hover lifts outlive that, so they need their
   own guard — the cards still change shadow, just without the slow travel. */
@media (prefers-reduced-motion: reduce) {
  .xjob-card,
  .xjob-detail-wrap .xjob-contact-card {
    transition: box-shadow .2s linear !important;
  }
  .xjob-card:hover,
  .xjob-detail-wrap .xjob-contact-card:hover {
    transform: none !important;
  }
}

/* Icon circle — both use same light blue as per design */
.xjob-detail-wrap .xjob-ci {
  width: 54px !important; height: 54px !important;
  border-radius: 50% !important;
  background: #eaf3fc !important;
  color: #2f8ee0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.xjob-detail-wrap .xjob-ci-mail  { background: #e0f2fe !important; color: #29b6f6 !important; }
.xjob-detail-wrap .xjob-ci-wa    { background: #e8f8ed !important; color: #25d366 !important; }
.xjob-detail-wrap .xjob-ci-phone { background: #eef1ff !important; color: #4f6ef7 !important; }

/* Prevent theme fill override on stroke-only contact icons */
.xjob-detail-wrap .xjob-ci svg,
.xjob-detail-wrap .xjob-ci svg path,
.xjob-detail-wrap .xjob-ci svg rect,
.xjob-detail-wrap .xjob-ci svg circle {
  fill: none !important;
  stroke: currentColor !important;
}

/* Text */
.xjob-detail-wrap .xjob-ci-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  justify-content: space-between;
  min-height: 60px;
  /* Allow the text column to shrink inside the flex card so a long email
     wraps instead of overflowing the card. */
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.xjob-detail-wrap .xjob-ci-info strong {
  font-size: 22px !important;
  color: #191919 !important;
  font-weight: 600 !important;
  display: block !important;
  line-height: 1.2 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.xjob-detail-wrap .xjob-ci-info small {
  font-size: 14px !important;
  color: #778AA9 !important;
  font-weight: 400 !important;
  display: block !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================================
   NOTICE
   ========================================================= */
.xjob-notice { color: var(--xj-muted); font-style: italic; }

/* =========================================================
   GENERAL APPLY PAGE  (shortcode: [xpert_general_apply])
   ---------------------------------------------------------
   Reuses every .xjob-detail-wrap form + join style; only the
   page layout differs — the form is a single centered column
   (no left job-content column, no sticky sidebar) and the two
   meta boxes read as separate cards.
   ========================================================= */

/* Meta cards are separate rounded boxes for every layout now — see
   `.xjob-detail-meta` / `.xjob-meta-item` above; nothing to override here. */

/* Center the form, cap its width, and drop the sticky sidebar behaviour.
   Keep `position: relative` (NOT static) so the card stays the containing
   block for its absolutely-positioned deco blobs/arcs — otherwise they
   escape the card and its `overflow: hidden` can't clip them. */
.xjob-gapply-form-wrap {
  max-width: 920px;
  margin: 0 auto;
}
.xjob-gapply .xjob-form-card {
  position: relative !important;
  top: auto !important;
}

@media (max-width: 640px) {
  .xjob-gapply .xjob-detail-meta { gap: 14px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 940px) {
  .xjob-detail-body { grid-template-columns: 1fr; gap: 24px; }
  .xjob-form-card { position: static !important; max-width: 600px; margin: 0 auto; }
  .xjob-grid-3 { grid-template-columns: repeat(2,1fr); }

  /* The 26px/24px meta text is desktop-sized; scale it down so labels like
     "Employment Type" fit their box on tablet. */
  .xjob-meta-label { font-size: 18px; margin-bottom: 6px; letter-spacing: .04em; }
  .xjob-meta-value { font-size: 17px; }
  .xjob-detail-meta { gap: 16px; }
  .xjob-meta-item   { padding: 16px 20px; }
}

/* ── Contact cards on tablet / small-desktop (768px – 1240px, i.e. iPad Mini
      through Nest Hub and every width in the 1024–1240 band).
      All THREE cards stay on ONE line here — previously the 2-up rule below
      992px dropped "HR Manager" onto a row of its own, which read as a broken
      grid. They fit because the icon circle, gaps and type all scale down and
      the text is allowed to wrap inside its own card. ── */
@media (min-width: 768px) and (max-width: 1240px) {
  .xjob-detail-wrap .xjob-contact-row {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .xjob-detail-wrap .xjob-contact-card {
    /* `1 1 0` (not `1 1 auto`) so all three share the width evenly no matter
       how long the email in the first card is. */
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }
  .xjob-detail-wrap .xjob-ci      { width: 42px !important; height: 42px !important; }
  .xjob-detail-wrap .xjob-ci svg  { width: 22px !important; height: 22px !important; }
  .xjob-detail-wrap .xjob-ci-info { min-height: 0 !important; }
  .xjob-detail-wrap .xjob-ci-info strong { font-size: 16px !important; white-space: normal !important; }
  .xjob-detail-wrap .xjob-ci-info small  {
    font-size: 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* ── Below 768px there genuinely isn't room for three across — two per row,
      one per row on phones, text may wrap. ── */
@media (max-width: 767px) {
  .xjob-detail-wrap .xjob-contact-row  { flex-wrap: wrap !important; }
  .xjob-detail-wrap .xjob-contact-card {
    flex: 1 1 calc(50% - 7px) !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 16px 14px !important;
  }
  .xjob-detail-wrap .xjob-ci-info         { min-height: 0 !important; }
  .xjob-detail-wrap .xjob-ci-info strong  { white-space: normal !important; }
  .xjob-detail-wrap .xjob-ci-info small   {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

@media (max-width: 640px) {
  .xjob-detail-wrap { padding: 0 16px 32px; }
  .xjob-grid-3,
  .xjob-grid-2 { grid-template-columns: 1fr; }
  .xjob-row-2  { grid-template-columns: 1fr; }
  .xjob-detail-meta { flex-direction: column; gap: 14px; }
  .xjob-meta-item {
    padding: 16px 20px;
    /* The base rule is `flex: 1 1 220px`, sized for a horizontal bar where
       220px is a WIDTH. The moment this becomes a column, flex-basis switches
       axis and that 220px is read as a HEIGHT — which is why each card was
       ~180px tall with a big empty band under its text. Back to content
       height, and drop the 200px min-width that a column doesn't need. */
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Smaller still on phones so nothing overflows the meta card. */
  .xjob-meta-label { font-size: 16px; margin-bottom: 4px; }
  .xjob-meta-value { font-size: 15px; }

  .xjob-detail-wrap .xjob-join-section { flex-direction: column !important; }
  .xjob-detail-wrap .xjob-join-left   {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 30px 24px !important;
    /* Smaller still on a phone panel — same reasoning as the 1240px rule. */
    background-position: right 10px top 10px !important;
    background-size: auto 74px !important;
  }
  .xjob-detail-wrap .xjob-join-text   { max-width: 72% !important; }
  .xjob-detail-wrap .xjob-contact-row { margin-left: 0 !important; width: 100% !important; flex-wrap: wrap !important; gap: 12px !important; }

  /* Stack the contact cards full-width so the email/phone have room and the
     long email wraps cleanly inside the card instead of spilling out. */
  .xjob-detail-wrap .xjob-contact-card { flex: 1 1 100% !important; gap: 16px !important; padding: 14px 16px !important; }
  .xjob-detail-wrap .xjob-ci { width: 48px !important; height: 48px !important; }
  .xjob-detail-wrap .xjob-ci-info { min-height: 0 !important; }
  .xjob-detail-wrap .xjob-ci-info strong { font-size: 17px !important; }
  .xjob-detail-wrap .xjob-ci-info small  { font-size: 14px !important; }

  /* ── Application form (screenshots 3 & 4) ── */
  /* Give the fields a touch more room. */
  .xjob-form-card { padding: 22px 16px 26px !important; border-radius: 24px !important; }

  /* The submit button is desktop-sized (20px 56px / 22px) and floats oddly on
     a phone — make it a full-width, right-sized tap target. */
  .xjob-btn-submit {
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px 24px !important;
    font-size: 18px !important;
    margin-top: 0 !important;
  }

  /* Upload row: left-align the icon + text instead of centring, so it reads
     cleanly when the helper text wraps to multiple lines. */
  .xjob-detail-wrap .xjob-upload-inner { justify-content: flex-start !important; }
  .xjob-detail-wrap .xjob-upload-zone  { padding: 16px 16px !important; }
}

/* =========================================================
   HIDE THEME POST META ON JOB PAGES
   ========================================================= */
.single-xpert_job .entry-footer,
.single-xpert_job .entry-meta,
.single-xpert_job .post-meta,
.single-xpert_job .post-footer,
.single-xpert_job .byline,
.single-xpert_job .posted-on,
.single-xpert_job .cat-links,
.single-xpert_job .tags-links,
.single-xpert_job .entry-taxonomies,
.single-xpert_job .post-tags,
.single-xpert_job .post-categories,
.single-xpert_job .article-footer,
.single-xpert_job .blog-post-meta { display: none !important; }

/* Hide site header on job detail pages */
.single-xpert_job header.site-header,
.single-xpert_job #masthead,
.single-xpert_job .site-header,
.single-xpert_job #header,
.single-xpert_job .main-header,
.single-xpert_job .header-area,
.single-xpert_job .navbar,
.single-xpert_job nav.navbar,
.single-xpert_job .header-wrap,
.single-xpert_job #site-header,
.section-post-header { display: none !important; }

/* =========================================================
   SCROLL-REVEAL ENTRANCE  (armed by frontend.js — refresh-proof)
   ---------------------------------------------------------
   Premium, slow cinematic rise + fade that replays on EVERY load, even
   when the view is already in the viewport. JS adds `.xjob-reveal`
   immediately (pre-hidden baseline) then `.xjob-in` once the wrapper
   scrolls into view.

   SAFETY: motion is driven by the independent `translate` property (a
   transform, opacity + transform ONLY). This leaves `transform` free for
   the existing card-hover lift and NEVER establishes a containing block
   on the sticky form card. No filter/blur on the bordered meta boxes or
   cards, and `translate` never reflows — so there is zero layout shift.
   ========================================================= */
.xjob-list-wrap.xjob-reveal,
.xjob-detail-wrap.xjob-reveal { --xjob-rev-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* Every part below moves with opacity + a transform-FAMILY property only
   (the individual `translate` / `scale` props, never the `transform`
   shorthand). That keeps `transform` free for the card / contact-card hover
   lift and never turns the sticky `.xjob-form-card` into a containing block.
   No filter/blur anywhere. All motion is a transform → zero layout shift. */

/* ════ LISTING VIEW ═══════════════════════════════════════════════════════ */

/* Heading — fade + rise, arrives first. */
.xjob-list-wrap.xjob-reveal .xjob-list-header {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity   1.1s  var(--xjob-rev-ease),
    translate 1.15s var(--xjob-rev-ease);
  transition-delay: 0.05s;
  will-change: opacity, translate;
}
.xjob-list-wrap.xjob-reveal.xjob-in .xjob-list-header {
  opacity: 1;
  translate: 0 0;
}

/* Cards — 3D-ish rise: translateY + a subtle scale-up, driven by the
   `translate`/`scale` props so the hover lift (`transform`) stays intact.
   Staggered nth-child cascade. */
.xjob-list-wrap.xjob-reveal .xjob-card {
  opacity: 0;
  translate: 0 44px;
  scale: 0.93;
  transition:
    opacity   1.1s  var(--xjob-rev-ease),
    translate 1.15s var(--xjob-rev-ease),
    scale     1.15s var(--xjob-rev-ease);
  will-change: opacity, translate, scale;
}
.xjob-list-wrap.xjob-reveal.xjob-in .xjob-card {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(1) { transition-delay: 0.16s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(2) { transition-delay: 0.28s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(3) { transition-delay: 0.40s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(4) { transition-delay: 0.52s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(5) { transition-delay: 0.64s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(6) { transition-delay: 0.76s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(7) { transition-delay: 0.88s; }
.xjob-list-wrap.xjob-reveal .xjob-grid .xjob-card:nth-child(n+8) { transition-delay: 1.00s; }

/* ════ DETAIL VIEW ════════════════════════════════════════════════════════ */

/* Title — fade + rise, arrives first. */
.xjob-detail-wrap.xjob-reveal .xjob-detail-title {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity   1.1s  var(--xjob-rev-ease),
    translate 1.15s var(--xjob-rev-ease);
  transition-delay: 0.05s;
  will-change: opacity, translate;
}
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-detail-title {
  opacity: 1;
  translate: 0 0;
}

/* Meta boxes — SCALE-POP: scale(0.85) → 1 + fade, staggered. `scale`/`opacity`
   only (no filter/blur on these bordered boxes). */
.xjob-detail-wrap.xjob-reveal .xjob-detail-meta .xjob-meta-item {
  opacity: 0;
  scale: 0.85;
  transition:
    opacity 1.1s  var(--xjob-rev-ease),
    scale   1.15s var(--xjob-rev-ease);
  will-change: opacity, scale;
}
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-detail-meta .xjob-meta-item {
  opacity: 1;
  scale: 1;
}
.xjob-detail-wrap.xjob-reveal .xjob-detail-meta .xjob-meta-item:nth-child(1) { transition-delay: 0.14s; }
.xjob-detail-wrap.xjob-reveal .xjob-detail-meta .xjob-meta-item:nth-child(2) { transition-delay: 0.24s; }
.xjob-detail-wrap.xjob-reveal .xjob-detail-meta .xjob-meta-item:nth-child(3) { transition-delay: 0.34s; }

/* Section content blocks — SLIDE from LEFT: translate(-30px, 0) → 0 + fade,
   staggered. Clipped by `.xjob-detail-content { overflow:hidden }` so there is
   no horizontal overflow on mobile. */
.xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section {
  opacity: 0;
  translate: -30px 0;
  transition:
    opacity   1.1s  var(--xjob-rev-ease),
    translate 1.15s var(--xjob-rev-ease);
  will-change: opacity, translate;
}
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-detail-content .xjob-section {
  opacity: 1;
  translate: 0 0;
}
.xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section:nth-child(1) { transition-delay: 0.44s; }
.xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section:nth-child(2) { transition-delay: 0.56s; }
.xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section:nth-child(3) { transition-delay: 0.68s; }
.xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section:nth-child(4) { transition-delay: 0.80s; }
.xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section:nth-child(n+5) { transition-delay: 0.92s; }

/* Apply-form fields — FIELD CASCADE: translateY(24px) → 0 + fade, top-to-bottom.
   Only the fields move (via `translate`); the sticky `.xjob-form-card` and its
   hover are never transformed. Two hidden inputs occupy nth-child 1 & 2, so the
   first visible field is nth-child 3. */
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > .xjob-form-group,
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > .xjob-row-2,
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > .xjob-btn-submit {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity   1.1s  var(--xjob-rev-ease),
    translate 1.15s var(--xjob-rev-ease);
  will-change: opacity, translate;
}
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-apply-form > .xjob-form-group,
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-apply-form > .xjob-row-2,
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-apply-form > .xjob-btn-submit {
  opacity: 1;
  translate: 0 0;
}
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > *:nth-child(3) { transition-delay: 0.50s; }
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > *:nth-child(4) { transition-delay: 0.60s; }
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > *:nth-child(5) { transition-delay: 0.70s; }
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > *:nth-child(6) { transition-delay: 0.80s; }
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > *:nth-child(7) { transition-delay: 0.90s; }
.xjob-detail-wrap.xjob-reveal .xjob-apply-form > *:nth-child(n+8) { transition-delay: 1.00s; }

/* Join-section contact cards — RISE + fade, staggered, arriving LAST for a soft
   landing. Driven by `translate` so the contact-card hover lift stays intact. */
.xjob-detail-wrap.xjob-reveal .xjob-join-section .xjob-contact-card {
  opacity: 0;
  translate: 0 30px;
  transition:
    opacity   1.2s var(--xjob-rev-ease),
    translate 1.2s var(--xjob-rev-ease);
  transition-delay: 1.05s;
  will-change: opacity, translate;
}
.xjob-detail-wrap.xjob-reveal.xjob-in .xjob-join-section .xjob-contact-card {
  opacity: 1;
  translate: 0 0;
}
.xjob-detail-wrap.xjob-reveal .xjob-contact-row .xjob-contact-card:nth-child(1) { transition-delay: 1.05s; }
.xjob-detail-wrap.xjob-reveal .xjob-contact-row .xjob-contact-card:nth-child(2) { transition-delay: 1.18s; }
.xjob-detail-wrap.xjob-reveal .xjob-contact-row .xjob-contact-card:nth-child(3) { transition-delay: 1.31s; }

/* ── Reduced-motion: no reveal at all, everything visible immediately ── */
@media (prefers-reduced-motion: reduce) {
  .xjob-list-wrap.xjob-reveal .xjob-list-header,
  .xjob-list-wrap.xjob-reveal .xjob-card,
  .xjob-detail-wrap.xjob-reveal .xjob-detail-title,
  .xjob-detail-wrap.xjob-reveal .xjob-detail-meta .xjob-meta-item,
  .xjob-detail-wrap.xjob-reveal .xjob-detail-content .xjob-section,
  .xjob-detail-wrap.xjob-reveal .xjob-apply-form > .xjob-form-group,
  .xjob-detail-wrap.xjob-reveal .xjob-apply-form > .xjob-row-2,
  .xjob-detail-wrap.xjob-reveal .xjob-apply-form > .xjob-btn-submit,
  .xjob-detail-wrap.xjob-reveal .xjob-join-section .xjob-contact-card {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: none !important;
    transition: none !important;
    will-change: auto;
  }
}
/* The desktop "Join Our Team" layout floats the pink contact panel over the
   right of the 59%-wide gray banner. Below ~1240px the banner is too narrow for
   that overlap and the pink panel covered the heading/sub-text — so switch to
   the stacked layout all the way up to 1240px. */
@media (max-width: 1240px) {
    /* Stacked: the pink panel (absolutely positioned over the gray on desktop)
       becomes a normal full-width block below the gray banner. */
    .xjob-detail-wrap .xjob-join-section {
        display: block !important;
        min-height: 0 !important;
        margin-bottom: 40px !important;
    }
    .xjob-detail-wrap .xjob-join-section {
        margin-bottom: 24px !important;
    }
    .xjob-detail-wrap .xjob-join-left {
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        /* The shapes graphic is left-anchored and 645px wide by design, sized
           to the panel HEIGHT. Once the panel goes full width but stays short,
           that put the artwork squarely behind the left-aligned heading and
           description — the dotted cluster landed right on top of the last
           line of copy. Pin it to the far side and cap its height so it reads
           as a corner decoration instead of a backdrop for the text. */
        background-position: right 16px top 14px !important;
        background-size: auto 110px !important;
    }

    /* …and stop the copy from running underneath it from the other direction. */
    .xjob-detail-wrap .xjob-join-text {
        max-width: 68% !important;
    }
    .xjob-detail-wrap .xjob-contact-row {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin: 12px 0 0 !important;
        border-radius: 30px !important;
        /* No flex-wrap here on purpose: the 768–1240px rule above keeps the
           three contact cards on one line, and the ≤767px rules supply the
           wrapping for phones. Re-adding `wrap` here would out-rank both. */
    }
}

/* Image captcha (Really Simple Captcha) */
.xjob-detail-wrap .xjob-captcha-group .xjob-req { color: #e53535 !important; }

/* The spare-captcha payload. Browsers already hide <script>, but the field is
   a flex column with a gap — a theme reset that made scripts visible would add
   a phantom row here. */
.xjob-detail-wrap .xjob-captcha-pool { display: none !important; }

.xjob-detail-wrap .xjob-captcha-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

.xjob-detail-wrap .xjob-captcha-img {
  display: block !important;
  width: 110px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid rgba(26, 44, 68, 0.15) !important;
  padding: 2px 4px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.xjob-detail-wrap .xjob-captcha-refresh {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: #1877b9 !important;
  background: rgba(24, 119, 185, 0.10) !important;
  transition: background 0.2s ease !important;
}

.xjob-detail-wrap .xjob-captcha-refresh:hover { background: rgba(24, 119, 185, 0.20) !important; }
.xjob-detail-wrap .xjob-captcha-refresh svg { transition: transform 0.4s ease !important; }
.xjob-detail-wrap .xjob-captcha-refresh:active svg { transform: rotate(-180deg) !important; }

.xjob-detail-wrap .xjob-captcha-group input[type="text"] {
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* "Enter the code shown above" is 26 characters, and the uppercase +2px
   tracking above widens it to roughly 285px — more than the ~245px a phone
   leaves inside the field, so the end of it was cut off. Only the PLACEHOLDER
   is set back to normal case and tracking here; the code the applicant types
   still comes out upper-case and spaced, which is the point of those rules. */
@media (max-width: 640px) {
  .xjob-detail-wrap .xjob-captcha-group input[type="text"]::placeholder {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 13px !important;
  }
}