.elementor-kit-7{--e-global-color-primary:#F1F1EF;--e-global-color-secondary:#151718;--e-global-color-text:#FFFFFF;--e-global-color-accent:#00A6CB;--e-global-typography-primary-font-family:"Helvetica";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Helvetica";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Helvetica";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-secondary );overscroll-behavior:auto;}.elementor-kit-7 img{opacity:0.9;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1210px;}.e-con{--container-max-width:1210px;}.elementor-widget:not(:last-child){--kit-widget-spacing:9px;}.elementor-element{--widgets-spacing:9px 9px;--widgets-spacing-row:9px;--widgets-spacing-column:9px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Scope to the hero */
#hero1 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-attachment: scroll !important;

  /* clone bg into a controllable layer */
  --bg-opacity: 1;
}
#hero1::before {
  content: "";
  position: absolute; inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: no-repeat;
  opacity: var(--bg-opacity);
  pointer-events: none;
  z-index: -1;
}

/* Overlay text baseline */
#hero1 .parallax-text {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  z-index: 1;
  text-align: center;
  line-height: 1.1;
}

/* Next section covers hero when it arrives */
.content-start {
  position: relative;
  z-index: 1;
  background: #fff; /* set to your site bg */
}

/* ===== Scroll-driven animations (no JS) ===== */
/* Create a view timeline for the hero */
#hero1 {
  view-timeline-name: --hero;
  view-timeline-axis: block;
}

/* Text: drift downward from entry to exit */
#hero1 .parallax-text {
  animation: textMove linear both;
  animation-timeline: --hero;
  animation-range: entry 0% to exit 100%;
}

/* Background: fade out between 30% and 90% of the hero's scroll */
#hero1::before {
  animation: bgFade linear both;
  animation-timeline: --hero;
  animation-range: 30% 90%;
}

/* Keyframes */
@keyframes textMove {
  from { transform: translate(-50%, -50%); }
  to   { transform: translate(-50%, calc(-50% + 300px)); } /* adjust 300px to taste */
}
@keyframes bgFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  #hero1 .parallax-text { animation: none !important; transform: translate(-50%,-50%) !important; }
  #hero1::before { animation: none !important; opacity: 1 !important; }
}
<style>
  /* White text on black, white frame; protect from theme overrides */
  .til-jobs, .til-jobs * { color:#fff !important; box-sizing:border-box; }
  .til-jobs a { color:#fff !important; text-decoration:none; }

  .til-jobs{
    --bg:#000; --border:#fff; --muted:rgba(255,255,255,.75);
    max-width:1100px; margin:0 auto; padding:8px 0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }

  .til-filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:8px 0 12px; }
  .til-input,.til-select{
    height:40px; padding:6px 10px; min-width:220px;
    background:#000; color:#fff !important;
    border:1px solid var(--border); border-radius:8px;
  }
  .til-label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted) !important; }

  .til-header,.til-row{
    display:grid; grid-template-columns:1.5fr 1fr 1fr minmax(120px,.8fr);
    gap:12px; align-items:center; background:#000 !important;
    border:1px solid var(--border); border-radius:12px;
  }
  .til-header{ padding:12px 14px; margin:8px 0; position:sticky; top:0; z-index:1; }
  .til-head{ font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase; cursor:pointer; user-select:none; }
  .til-head[aria-sort="ascending"]::after{ content:" ▲"; font-size:12px; opacity:.8; }
  .til-head[aria-sort="descending"]::after{ content:" ▼"; font-size:12px; opacity:.8; }

  .til-rows{ margin-top:6px; }
  .til-row{ padding:14px; margin-bottom:10px; }
  .til-title a{ font-weight:700; }
  .til-actions{ display:flex; justify-content:flex-end; }
  .til-btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px; border-radius:999px;
    border:1px solid #fff; background:#fff; color:#000 !important; font-weight:700;
  }
  .til-btn:hover{ background:transparent; color:#fff !important; }

  .til-status,.til-error{
    border:1px dashed var(--border); border-radius:12px; padding:16px; text-align:center; background:transparent;
  }

  @media (max-width:720px){
    .til-header{ display:none; }
    .til-row{ grid-template-columns:1fr; gap:8px; }
    .til-col{ display:grid; grid-template-columns:120px 1fr; gap:8px; }
    .til-col::before{ content:attr(data-label); font-size:12px; color:var(--muted)!important; font-weight:700; text-transform:uppercase; }
    .til-actions{ justify-content:flex-start; }
  }
  /* Force all career listing text to white */
.til-jobs, 
.til-jobs * {
  color: #fff !important;
}

/* Make links white and remove underlines */
.til-jobs a {
  color: #fff !important;
  text-decoration: none;
}

/* Muted text (like labels) */
.til-jobs .til-label,
.til-jobs .til-col::before {
  color: rgba(255,255,255,.75) !important;
}

/* Apply button: black text on white background */
.til-jobs .til-btn {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
}
.til-jobs .til-btn:hover {
  background: transparent !important;
  color: #fff !important;
}
/* === FINAL OVERRIDES: FORCE WHITE TEXT & HIGH CONTRAST === */

/* 1) Make *everything* inside the board white, even if theme uses !important */
.til-jobs, 
.til-jobs *, 
.til-jobs a,
.til-jobs a:visited,
.til-jobs .til-head,
.til-jobs .til-col,
.til-jobs .til-col::before,
.til-jobs .til-status,
.til-jobs .til-error {
  color: #fff !important;
}

/* 2) Ensure header/rows use black backgrounds so white text is readable */
.til-jobs .til-header,
.til-jobs .til-row,
.til-jobs .til-status,
.til-jobs .til-error {
  background: #000 !important;
  border-color: #fff !important;
}

/* 3) Inputs/selects: black background, white text + placeholder */
.til-jobs .til-input,
.til-jobs .til-select {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}
.til-jobs .til-input::placeholder {
  color: rgba(255,255,255,.8) !important;
}

/* Select dropdown options (best-effort; browser-dependent) */
.til-jobs select option {
  background: #000 !important;
  color: #fff !important;
}

/* Autofill fix (Chrome/Safari) so it doesn't turn fields blue/yellow */
.til-jobs input:-webkit-autofill {
  -webkit-text-fill-co

  /* --- TARGETED FIXES --- */

/* Location & Department (desktop cells) */
.til-jobs .til-row .til-col:nth-child(2),
.til-jobs .til-row .til-col:nth-child(3),
.til-jobs .til-row .til-col:nth-child(2) *,
.til-jobs .til-row .til-col:nth-child(3) * {
  color:#fff !important;
}

/* Location & Department (mobile labels and values) */
@media (max-width:720px){
  .til-jobs .til-row .til-col[data-label="Location"],
  .til-jobs .til-row .til-col[data-label="Department"],
  .til-jobs .til-row .til-col[data-label="Location"] *,
  .til-jobs .til-row .til-col[data-label="Department"] * {
    color:#fff !important;
  }
  .til-jobs .til-row .til-col[data-label="Location"]::before,
  .til-jobs .til-row .til-col[data-label="Department"]::before {
    color:#fff !important;
  }
}

/* Column headers (if they appear blue/gray) */
.til-jobs .til-header .til-head[data-key="location"],
.til-jobs .til-header .til-head[data-key="department"]{
  color:#fff !important;
}

/* “Blue box” fixes (covers common cases) */

/* 1) If the blue box is the sticky header or rows */
.til-jobs .til-header,
.til-jobs .til-row {
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
.til-jobs .til-header .til-head:hover,
.til-jobs .til-header .til-head:focus {
  background:transparent !important;
  color:#fff !important;
}

/* 2) If the blue box is a status/notice area */
.til-jobs .til-status,
.til-jobs .til-error,
.til-jobs .notice,
.til-jobs .message,
.til-jobs .status,
.til-jobs .til-alert {
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}

/* 3) If the blue box is the Apply button */
.til-jobs .til-btn,
.til-jobs .til-btn:visited,
.til-jobs .til-btn:focus {
  background:#fff !important;
  color:#000 !important;
  border:1px solid #fff !important;
  box-shadow:none !important;
}
.til-jobs .til-btn:hover {
  background:transparent !important;
  color:#fff !important;
}

/* Inputs/selects (sometimes inherit a blue theme) */
.til-jobs .til-input,
.til-jobs .til-select {
  background:#000 !important;
  color:#fff !important;
  border:1px solid #fff !important;
}
.til-jobs .til-input::placeholder { color:rgba(255,255,255,.85) !important; }

/* Force any SVG/icons to follow text color (avoid blue strokes/fills) */
.til-jobs svg, .til-jobs svg *, .til-jobs path, .til-jobs polyline, .til-jobs line {
  fill: currentColor !important;
  stroke: currentColor !important;
}

  
</style>
<script>
(function(){
  "use strict";

  function onReady(fn){
    if (document.readyState !== 'loading') fn();
    else document.addEventListener('DOMContentLoaded', fn);
  }

  onReady(function(){
    document.querySelectorAll('.til-jobs[data-api]').forEach(mountBoard);
  });

  function mountBoard(root){
    if (!root || root.dataset.mounted === '1') return;
    root.dataset.mounted = '1';

    // Build UI skeleton inside the placeholder
    root.innerHTML = `
      <div class="til-filters">
        <input type="text" id="til-search" class="til-input" placeholder="Search jobs…" aria-label="Search jobs" />
        <label class="til-label">Department
          <select id="til-dept" class="til-select"><option value="">All</option></select>
        </label>
        <label class="til-label">Location
          <select id="til-loc" class="til-select"><option value="">All</option></select>
        </label>
      </div>

      <div class="til-header">
        <div class="til-head" data-key="title"  tabindex="0" role="button" aria-sort="ascending">Position</div>
        <div class="til-head" data-key="location" tabindex="0" role="button" aria-sort="none">Location</div>
        <div class="til-head" data-key="department" tabindex="0" role="button" aria-sort="none">Department</div>
        <div class="til-head">Apply</div>
      </div>

      <div id="til-rows" class="til-rows" aria-live="polite">
        <div class="til-status">Loading openings…</div>
      </div>
    `;

    const els = {
      rows:   root.querySelector('#til-rows'),
      search: root.querySelector('#til-search'),
      dept:   root.querySelector('#til-dept'),
      loc:    root.querySelector('#til-loc'),
      heads:  root.querySelectorAll('.til-head[data-key]')
    };

    let all = [];
    let sort = { key:'title', dir:'asc' };

    // Bind sorting
    els.heads.forEach(h=>{
      h.addEventListener('click', ()=>toggleSort(h.dataset.key));
      h.addEventListener('keypress', (e)=>{ if(e.key===' '||e.key==='Enter'){ e.preventDefault(); toggleSort(h.dataset.key); }});
    });

    // Bind filters
    const runFilters = ()=> render(applyFilters(all));
    els.search.addEventListener('input', runFilters);
    els.dept.addEventListener('change', runFilters);
    els.loc.addEventListener('change', runFilters);

    // Fetch from our WP REST endpoint (pretty URL then fallback)
    const apiPrimary  = root.getAttribute('data-api') || '/wp-json/til/v1/jobs';
    const apiFallback = root.getAttribute('data-api-fallback') || '/?rest_route=/til/v1/jobs';

    fetchFirstWorking([apiPrimary, apiFallback])
      .then(data=>{
        all = (data.jobs||[]).map(j=>({
          title: j.title||'',
          shortcode: j.shortcode||'',
          department: (j.department||'').trim(),
          city: cityOnly(j.locations||[])
        }));
        populateFilters(all, els);
        render(applyFilters(all));
      })
      .catch(err=>{
        console.error(err);
        els.rows.innerHTML = '<div class="til-error">Unable to load openings.</div>';
      });

    function fetchFirstWorking(urls){
      return new Promise((resolve, reject)=>{
        let i = 0;
        function next(){
          if (i >= urls.length) return reject(new Error('No reachable endpoint'));
          const u = urls[i++];
          fetch(u, { headers: { 'Accept':'application/json' }})
            .then(r=>{ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
            .then(resolve)
            .catch(()=>next());
        }
        next();
      });
    }

    // CITY ONLY (dedup). If explicit "Remote" present, keep it.
    function cityOnly(locs){
      const seen = new Set(), out = [];
      for(const l of locs){
        let c = (l && l.city) ? String(l.city).trim() : '';
        if (!c && (l && l.country && /remote/i.test(l.country))) c = 'Remote';
        if (!c) continue;
        if (seen.has(c)) continue; seen.add(c); out.push(c);
      }
      return out.length ? out.join(' | ') : '—';
    }

    function populateFilters(list, els){
      const depts = new Set(), locs = new Set();
      list.forEach(j=>{
        if (j.department) depts.add(j.department);
        j.city.split('|').map(s=>s.trim()).forEach(c=>{ if(c && c!=='—') locs.add(c); });
      });
      [...depts].sort().forEach(d=> els.dept.insertAdjacentHTML('beforeend', `<option value="${esc(d)}">${esc(d)}</option>`));
      [...locs].sort().forEach(l=> els.loc.insertAdjacentHTML('beforeend', `<option value="${esc(l)}">${esc(l)}</option>`));
    }

    function toggleSort(key){
      if (sort.key === key) sort.dir = (sort.dir==='asc') ? 'desc' : 'asc';
      else { sort.key = key; sort.dir = 'asc'; }
      els.heads.forEach(h=>{
        const k=h.dataset.key;
        h.setAttribute('aria-sort', k===sort.key ? (sort.dir==='asc'?'ascending':'descending') : 'none');
      });
      render(applyFilters(all));
    }

    function applyFilters(list){
      const q   = (els.search.value || '').toLowerCase();
      const dep = (els.dept.value   || '').toLowerCase();
      const loc = (els.loc.value    || '').toLowerCase();
      return list.filter(j=>{
        const titleMatch = !q || j.title.toLowerCase().includes(q);
        const depMatch   = !dep || j.department.toLowerCase() === dep;
        const locMatch   = !loc || j.city.toLowerCase().split('|').map(s=>s.trim()).includes(loc);
        return titleMatch && depMatch && locMatch;
      });
    }

    function sortList(list){
      const get = {
        title:      x=>x.title||'',
        location:   x=>x.city||'',
        department: x=>x.department||'',
      }[sort.key] || (x=>x.title||'');
      const dir = sort.dir==='asc' ? 1 : -1;
      return [...list].sort((a,b)=> get(a).localeCompare(get(b)) * dir);
    }

    function render(list){
      const jobs = sortList(list);
      if (!jobs.length){
        els.rows.innerHTML = '<div class="til-status">No open roles match your filters.</div>';
        return;
      }
      const frag = document.createDocumentFragment();
      for(const j of jobs){
        const url = `https://apply.workable.com/theinclab/j/${encodeURIComponent(j.shortcode)}/`;
        const row = document.createElement('div');
        row.className = 'til-row';
        row.innerHTML = `
          <div class="til-col til-title" data-label="Position"><a href="${url}" target="_blank" rel="noopener">${esc(j.title)}</a></div>
          <div class="til-col" data-label="Location">${esc(j.city)}</div>
          <div class="til-col" data-label="Department">${esc(j.department || '—')}</div>
          <div class="til-actions"><a class="til-btn" href="${url}" target="_blank" rel="noopener">Apply</a></div>
        `;
        frag.appendChild(row);
      }
      els.rows.replaceChildren(frag);
    }

    function esc(s){
      return String(s||'')
        .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
        .replace(/"/g,'&quot;').replace(/'/g,'&#039;');
    }
  }
})();
</script>/* End custom CSS */