.jobs-hero{
  margin-top: 6px;
  padding: 14px 0 10px;
  position:relative;
}

.jobs-hero::before{
  content:"";
  position:absolute;
  inset:-30% -20%;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(49,46,129,.22), transparent 60%),
    radial-gradient(closest-side at 70% 60%, rgba(16,185,129,.16), transparent 62%);
  transform: rotate(-10deg);
  pointer-events:none;
  opacity:.9;
}

.jobs-hero .section-head{
  position:relative;
  z-index:1;
}

.jobs-hero-meta{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}

/* If not already present from Contact page */
.section-head--center{
  text-align:center;
  align-items:center;
}

/* =========================
   Premium filter bar
   ========================= */

.filters-premium{
  margin-top:16px;
  border-radius: var(--radius2);
  padding:14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* removed sticky behavior */
  position: relative;
  z-index: 1;
}


.filters-premium-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
}

.filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.filter-label{
  font-weight:900;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(244,244,255,.78);
}

.filter-input-wrap{
  position:relative;
}

.filter-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  color: rgba(244,244,255,.78);
  pointer-events:none;
}

.filter-input{
  padding-left:40px;
}

/* Readable inputs on purple background */
.filter-input,
.filter-select{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}

.filter-input::placeholder{
  color: rgba(244,244,255,.62);
}

/* Fix dropdown (white on white) */
.filter-select{
  appearance:none;
  padding-right:44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.18), rgba(255,255,255,.18));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    calc(100% - 38px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 18px;
  background-repeat:no-repeat;
}

/* Options list readability (browser dependent but helps a lot) */
.filter-select option{
  color:#0b0b15;
}

.filter-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  white-space:nowrap;
}

.filters-active{
  margin-top:12px;
  padding-top:12px;
  border-top: 1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.filters-active-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Mobile */
@media (max-width: 980px){

  .filters-premium-row{
    grid-template-columns: 1fr;
    align-items:stretch;
  }

  .filter-actions{
    justify-content:flex-start;
  }
}

/* =========================
   Job cards (rich + optional hero)
   ========================= */

.jobs-grid--rich{
  gap:16px;
}

/* Rich card base */
.job-card--rich{
  padding:0;
  overflow:hidden;
  border-radius:var(--radius2);
  display:flex;
  flex-direction:column;
}

/* Media */
.job-card-media{
  position:relative;
  height:190px;
  background: rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.12);
}



.job-card-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
  transition: transform .55s ease, filter .55s ease;
}

.job-card-shade{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
  opacity:.6;
  pointer-events:none;
}


.job-card-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}


.job-card--rich .job-teaser{
  color: rgba(244,244,255,.82);
  line-height:1.6;
}

.job-card--rich .job-cta{
  margin-top:8px;
}


/* =========================
   Jobs Categories (full-bleed)
   ========================= */
.jobs-cats-bleed{
  width:100vw;
  position:relative;
  overflow:hidden;
}

/* subtle background glow */
.jobs-cats-bleed::before{
  content:"";
  position:absolute;
  inset:-30% -20%;
  background:
    radial-gradient(closest-side at 25% 35%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(closest-side at 70% 70%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(closest-side at 60% 25%, rgba(49,46,129,.30), transparent 60%);
  transform: rotate(-8deg);
  opacity:.95;
  pointer-events:none;
}

.jobs-cats-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
  position:relative;
  z-index:1;
}

.jobs-cats-head{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-bottom: 14px;
}

.jobs-cats-kicker{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-weight:1000;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
}



.jobs-cats-title{
  margin:0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height:1.1;
}
.jobs-cats-sub{
  margin:0;
  max-width: 62ch;
  color: rgba(244,244,255,.78);
}

/* 3 big tiles */
.jobs-cats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* tile link = big button */
.cat-tile{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  position:relative;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, filter .18s ease;
}

/* background PNG */
.cat-media{
  height: 420px;
  background-image: var(--cat-bg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position:center;
  filter: saturate(1.02) contrast(1.04);
  transform: scale(1.02);
  transition: transform .55s ease, filter .55s ease;
  position:relative;
}


/* label area below */
.cat-bottom{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cat-name{
  font-weight: 1000;
  font-size: 22px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.cat-hint{
  font-size: 13px;
  color: rgba(244,244,255,.78);
}

/* hover wow */
.cat-tile:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(16,185,129,.34);
  filter: brightness(1.03);
  background: #fff;
  color: var(--bg);
}

.cat-tile:hover .cat-media{
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.06);
}

/* active category state */
.cat-tile.is-active{
  border-color: rgba(16,185,129,.65);
  box-shadow: 0 18px 60px rgba(0,0,0,.30), 0 0 0 2px rgba(16,185,129,.18) inset;
}
.cat-tile.is-active .cat-hint{
  color: rgba(234,255,246,.92);
}

/* footer */
.jobs-cats-footer{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}

/* responsive: stack */
@media (max-width: 980px){
  .jobs-cats-grid{
    grid-template-columns: 1fr;
  }
  .cat-media{
    height: 240px;
  }
}

html{
  scroll-behavior:smooth;
}

/* Prevent anchor being hidden behind fixed header */
#jobsResults{
  scroll-margin-top: 110px; /* adjust if needed */
}


.jobs-categories, .job-list{
    margin-bottom: 300px;
}