@charset "UTF-8";

/* Auto-generated - do not edit */
/* BASE */
html {
  font-size: 62.5%;
  /* 1rem = 10px */
  overflow-x: hidden !important;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 10rem;
}

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

body {
  box-sizing: border-box;
  margin: 0px;
  font-size: 1.6rem;
}

::selection {
  background: black;
  color: white;
}

::-moz-selection {
  background: black;
  color: white;
}

::-webkit-selection {
  background: black;
  color: white;
}

/* Century Gothic — Avantor Style Guide primary typeface */
@font-face {
  font-family: "Century Gothic";
  src: url("https://cdn.sites.paradox.ai/media-public/17629/7e43e5a8-cfca-4445-b6d3-1ae0fd527e66/font/1791194693266.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("https://cdn.sites.paradox.ai/media-public/17629/7e43e5a8-cfca-4445-b6d3-1ae0fd527e66/font/1791194693282.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

q::before,
q::after {
  display: none;
}

button {
  display: inline-block;
  overflow: visible;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  background: none transparent;
  color: inherit;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  font: inherit;
  line-height: normal;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

blockquote {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

#svg-- {
  display: none;
}

/* fixed talent community window */
.mfp-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed !important;
  top: 0 !important;
}

body {
  font-family: var(--font-primary);
}

/* Auto-generated - do not edit */
/* ─── Buttons — Avantor Style Guide ───
   Shape/typography mirror components/button.liquid so a Liquid-rendered button
   and a hand-written .btn-* render identically. Navy hover uses the designer's
   10% white overlay (same value as the job-search controls) painted as an inset
   shadow so it fades in and follows the radius. */
.btn-pill,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.6rem 2.4rem;
  border-radius: 1rem;
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

/* Primary — navy fill */
.btn-pill {
  border: 0;
  background-color: var(--color-navy, #001551);
  color: var(--color-white, #fff);
}

.btn-pill:hover,
.btn-pill:focus-visible {
  box-shadow: inset 0 0 0 100vmax var(--color-navy-hover-overlay, rgb(255 255 255 / 0.1));
}

/* Secondary — navy outline, fills navy on hover */
.btn-outline {
  border: 0;
  background-color: transparent;
  color: var(--color-navy, #001551);
  box-shadow: inset 0 0 0 0.2rem var(--color-navy, #001551);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--color-navy, #001551);
  color: var(--color-white, #fff);
}

.btn-pill:focus-visible,
.btn-outline:focus-visible {
  outline: 0.2rem solid var(--color-blue, #0064c8);
  outline-offset: 0.2rem;
}

/* .flip-card-wrapper { */
/* } */
.flip-card {
  transform-style: preserve-3d;
  transition: transform 1s;
}

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

.flip-card-back,
.flip-card-wrapper:hover .flip-card {
  transform: rotateY(180deg);
}

/* ─── Hero ───
   Figma: desktop 4049:1191 (1440×466) · tablet 6003:4222 (834×599) ·
   mobile 6003:4348 (393×810).

   Three layers: photo, navy sweep overlay, heading. The sweep is an SVG with
   preserveAspectRatio="none" and a viewBox matching its frame, so it stretches
   with the band instead of being pinned to one canvas width. Two orientations —
   navy-on-top below 1024, navy-on-left above — swapped by the same media query
   that changes the aspect ratio. */
.hero {
  --hero-ratio: 393 / 810;
  --hero-min-height: 44rem;
  --hero-shape: url("https://cdn.sites.stg.paradox.ai/media-public/5021/d14db7f8-645e-4ba0-86f7-e6960131598e/image/1788157257160093hero-shape-tall.svg");
  /* Clears the fixed site header; override per page if that header changes. */
  --hero-header-offset: 6.4rem;
  /* Photo framing. Each frame scales and pans the photo so the people land in
     the exposed part of the band instead of being cropped away — the values are
     the frame's own, expressed as percentages so they scale with the hero.
     Width/left resolve against the hero's width, height/top against its height,
     so a locked --hero-ratio keeps the box at the photo's own 2.4 aspect.
     object-fit:cover is the safety net: retune these per usage for a photo with
     a different shape and it crops rather than distorts. */
  --hero-image-width: auto;
  --hero-image-height: 70.74%;
  --hero-image-x: -196.77%;
  --hero-image-y: 32.54%;
  --hero-image-position: center;

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  /* aspect-ratio sets the target, min-height stops a long heading from being
     clipped on a narrow screen. */
  min-height: var(--hero-min-height);
}

/* <picture> is only a source switch; the <img> is the positioned box. */
.hero__picture {
  display: contents;
}

.hero__image {
  position: absolute;
  z-index: 0;
  display: block;
  left: var(--hero-image-x);
  top: var(--hero-image-y);
  width: var(--hero-image-width);
  height: var(--hero-image-height);
  /* `auto` lets a replaced element derive its width from the height and its own
     intrinsic ratio, so the box is ratio-correct for whatever photo is passed.
     The explicit percentages below are the frames' own values, each already
     equal to its photo's ratio. */
  /* Full-bleed by default; a photo that is meant to sit inside the band rather
     than span it sets --hero-image-min-width: 0. */
  min-width: var(--hero-image-min-width, 100%);
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-image-position, center);
  transform: var(--hero-image-transform, none);
}

.hero__shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--hero-shape);
  background-repeat: no-repeat;
  background-position: center;
  /* 100% 100% rather than cover: the SVG has no intrinsic ratio to preserve,
     and stretching is exactly what the design does across widths. */
  background-size: 100% 100%;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: calc(var(--hero-header-offset) + 8rem) 2rem 4rem;
}

.hero__title {
  font-family: var(--font-primary);
  font-size: 3.6rem;
  font-style: normal;
  color: var(--color-white, #fff);

  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.5px;
  /* Long single words wrap instead of forcing a horizontal scrollbar. */
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ─── Tablet ─── */
@media screen and (min-width: 768px) {
  .hero {
    --hero-ratio: 834 / 599;
    --hero-min-height: 48rem;
    --hero-image-width: auto;
    --hero-image-height: 100%;
    --hero-image-x: -53.17%;
    --hero-image-y: 31.09%;
  }

  .hero__inner {
    padding: calc(var(--hero-header-offset) + 8rem) 4rem 4rem;
  }
}

/* ─── Desktop ─── */
@media screen and (min-width: 1024px) {
  .hero {
    --hero-ratio: 1440 / 466;
    --hero-min-height: 40rem;
    --hero-shape: url("https://cdn.sites.stg.paradox.ai/media-public/5021/d14db7f8-645e-4ba0-86f7-e6960131598e/image/17881572571774454hero-shape-wide2.svg");
    --hero-image-width: auto;
    --hero-image-height: 128.54%;
    --hero-image-x: 0%;
    --hero-image-y: 0%;

    /* Navy fills the left half here, so the heading centres against it. */
    align-items: center;
  }

  .hero__inner {
    padding: 4rem;
  }

  .hero__title {
    font-size: clamp(4.8rem, 4.2vw, 6rem);
    letter-spacing: 0;
    /* Keeps the heading clear of the sweep — 716/1440 of the band, per the frame. */
    max-width: 49.7%;
  }
}

/* Respect a reduced-data / print context: the sweep is decoration only. */
@media print {
  .hero__shape {
    display: none;
  }
}

/* ─── Search variant ───
   Figma: desktop 4049:185 (1440×545) · tablet 4049:580 (834×580) ·
   mobile 6003:173 (393×810).

   Same three layers plus the Paradox search box under the heading. The band is
   taller, the sweep is its own set of shapes, and below 1024 a navy scrim keeps
   the white fields and labels legible over the photo. */
.hero--search {
  --hero-ratio: 393 / 810;
  --hero-min-height: 62rem;
  --hero-shape: url("https://cdn.sites.stg.paradox.ai/media-public/5021/d14db7f8-645e-4ba0-86f7-e6960131598e/image/17881572571077845hero-search-shape-tall.svg");
  /* Portrait master (≈0.69) — the box carries that ratio so cover never crops. */
  --hero-image-width: auto;
  --hero-image-height: 100.06%;
  --hero-image-x: -43.41%;
  --hero-image-y: 9.01%;
  /* Scrim strength; desktop drops it to 0 where the sweep alone carries the
     contrast. */
  --hero-scrim: rgb(0 21 81 / 0.4);
}

/* Scrim sits between the photo (z-index 0) and the sweep; both are z-index 1,
   so DOM order puts the sweep on top. */
.hero--search::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--hero-scrim);
  pointer-events: none;
}

.hero--search .hero__inner {
  gap: 2rem;
}

/* .hero--search .hero__title {
    font-size: clamp(2.8rem, 8vw, 3.6rem);
    letter-spacing: -0.05rem;
} */

@media screen and (min-width: 768px) {
  .hero--search {
    --hero-ratio: 834 / 580;
    --hero-min-height: 56rem;
    --hero-shape: url("https://cdn.sites.stg.paradox.ai/media-public/5021/d14db7f8-645e-4ba0-86f7-e6960131598e/image/1788157257088831hero-search-shape-tablet.svg");
    /* Still the portrait master; the frame lets cover centre-crop it here. */
    --hero-image-width: 100%;
    --hero-image-height: 100%;
    --hero-image-x: 0%;
    --hero-image-y: 0%;
  }

  .hero--search .hero__title {
    font-size: 3.6rem;
  }
}

@media screen and (min-width: 1024px) {
  .hero--search {
    --hero-ratio: 1440 / 545;
    --hero-min-height: 48rem;
    --hero-shape: url("https://cdn.sites.stg.paradox.ai/media-public/5021/d14db7f8-645e-4ba0-86f7-e6960131598e/image/17881572571251438hero-search-shape-wide.svg");
    /* Landscape crop from <source> (≈1.50); the box matches that ratio exactly. */
    --hero-image-width: auto;
    --hero-image-height: 176.15%;
    --hero-image-x: 0%;
    --hero-image-y: -5.36%;
    --hero-scrim: transparent;
  }

  .hero--search .hero__title {
    /* font-size: clamp(4.8rem, 4.2vw, 6rem); */
    /* letter-spacing: 0; */
    /* 716/1440 of the band, per the frame. */
    max-width: 49.7%;
    font-size: 6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 60px */
  }
}

.hero--search .hero-search {
  width: 100%;
}

/* ─── Reversed variant ───
   Figma: desktop 4049:1462 (1440×466) · tablet 6003:1028 (834×599) ·
   mobile 6003:1171 (393×810).

   Same band and same sweep as the default hero — only the photo is mirrored,
   which the frames express as a negative width. Width is left to `auto` so the
   box takes the photo's own ratio; the frames' heights and pans are kept. */
.hero--reverse {
  --hero-image-transform: scaleX(-1);
  --hero-image-width: auto;
  --hero-image-height: 70.67%;
  --hero-image-x: -237.36%;
  --hero-image-y: 34.35%;
}

@media screen and (min-width: 768px) {
  .hero--reverse {
    --hero-image-width: auto;
    --hero-image-height: 86.43%;
    --hero-image-x: -59.17%;
    --hero-image-y: 31.41%;
  }
}

@media screen and (min-width: 1024px) {
  .hero--reverse {
    --hero-image-width: auto;
    --hero-image-height: 112%;
    --hero-image-x: 0%;
    --hero-image-y: 0.03%;
  }

  /* 604/1440 of the band, per the frame. */
  .hero--reverse .hero__title {
    max-width: 41.9%;
  }
}

/* ─── Inset-photo modifier ───
   Figma: desktop 4049:975 · tablet 6003:829 · mobile 6003:866 ("Life at Avantor").

   Same band as the default hero, but the photo is a 3:2 rather than the wide
   2.4 strip, so the frames stop it bleeding across the whole band and anchor it
   to the sweep's exposed side instead — at desktop it is only 62.6% wide. Width
   stays `auto`, so the box is the photo's own ratio at every breakpoint and
   nothing is cropped; only the pan differs per frame.

     {% render 'hero', title: '…', image: '…', customClass: 'hero--photo-inset' %}

   Reusable for any photo that is too tall to span the band without losing its
   subject. Retune the three --hero-image-* pans if the subject sits elsewhere. */
.hero--photo-inset {
  --hero-image-min-width: 0;
  --hero-image-width: auto;
  --hero-image-height: 100%;
  --hero-image-x: -54.66%;
  --hero-image-y: 21.03%;
}

/* Benefits photo is 3:2 with the subject in the right half. The default pans
   were framed for a wide strip, so they slide this shot off the band. These
   values keep the face inside the sweep's opening at each breakpoint. */
.hero--benefits {
  --hero-image-min-width: 0;
  --hero-image-width: auto;
  --hero-image-height: 70%;
  --hero-image-x: -68%;
  --hero-image-y: 33%;
}

@media screen and (min-width: 768px) {
  .hero--photo-inset {
    --hero-image-height: 100%;
    --hero-image-x: -3.86%;
    --hero-image-y: 22.93%;
  }

  .hero--benefits {
    --hero-image-height: 115%;
    --hero-image-x: -14%;
    --hero-image-y: 34%;
  }
}

@media screen and (min-width: 1024px) {
  .hero--photo-inset {
    --hero-image-height: 128.97%;
    --hero-image-x: 46.04%;
    --hero-image-y: -6.79%;
  }

  .hero--benefits {
    --hero-image-height: 140%;
    --hero-image-x: 34%;
    --hero-image-y: -12%;
  }
}


/* Recruitment photo crop — Figma 6192:482 (mobile) and 6192:493 (tablet). */
.hero--photo-contain {
  --hero-image-min-width: 0;
  --hero-image-width: 330.19%;
  --hero-image-height: 106.86%;
  --hero-image-x: -161.89%;
  --hero-image-y: 28.62%;
}

@media screen and (min-width: 768px) {
  .hero--photo-contain {
    --hero-image-width: 107.68%;
    --hero-image-height: 100%;
    --hero-image-x: -3.84%;
    --hero-image-y: 30.17%;
  }
}

@media screen and (min-width: 1024px) {
  .hero--photo-contain {
    --hero-image-width: auto;
    --hero-image-height: 128.54%;
    --hero-image-x: 37.6%;
    --hero-image-y: 0;
  }
}

/*
  Steps — Figma: desktop 4049:1209 · tablet 6003:4496 · mobile 6003:4606.

  A row of numbered tiles where one tile is open at a time. The open tile
  fills the leftover space; the closed ones stay at a fixed width and show
  only their number. Below 768px the row becomes a stack and the tile grows
  downwards instead of sideways.

  The width change is driven by `flex-grow` rather than `flex-basis`, so the
  two tiles that swap (one 1 -> 0, the other 0 -> 1) always sum to 1 and the
  free space slides between them in one continuous motion.

  Colour is the frame's, unchanged: navy, blue, glacier, lime by position, and
  a tile keeps its background when it opens. Only width and the copy move.

  Known contrast debt, deferred by the client: white type on glacier is 2.0:1
  and on lime 1.96:1, against the 3:1 WCAG 2.0 AA needs for the numerals and
  4.5:1 for the body copy an open tile shows. Fixing it later is a colour
  swap in one place — the four nth-child rules below.
*/
.steps {
  --steps-radius: 1.6rem;
  --steps-gap: 2rem;
  --steps-collapsed-size: 9.0667rem;
  --steps-duration: 0.4s;
  --steps-copy-in: 0.25s;
  --steps-copy-delay: 0.35s;
  --steps-ease: cubic-bezier(0.4, 0, 0.2, 1);

  padding: 2rem;
}

/* First play only: hold the copy until the strip has landed. */
.steps.is-entering {
  --steps-copy-delay: 0.75s;
}

.steps__inner {
  margin-inline: auto;
  max-width: 128rem;
}

/* Heading and description — Figma: desktop 4049:1204 · tablet 6003:4491 ·
   mobile 6003:4601. Centred on mobile, left-aligned from 768px up with the
   description held to the 428px measure the frames give it. 20px between the
   two, 40px down to the strip, at every breakpoint. The block is not rendered
   at all when neither is passed, so the bare strip the tile frames show still
   works. */
.steps__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
  text-align: center;
}

.steps__heading {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-primary);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05rem;
  overflow-wrap: anywhere;
}

.steps__description {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.steps__list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--steps-radius);
  background-color: var(--color-cool-gray);
  transition:
    opacity 0.7s var(--steps-ease),
    transform 0.7s var(--steps-ease);
}

/* Slide in from the bottom once scrolled to. The hidden state is written by
   the stylesheet, not by a class the script adds after parse — that ordering
   is what makes a strip paint once at full opacity and then snap away. The
   scripting query keeps it honest: no script, no hiding. */
@media (scripting: enabled) {
  .steps__list {
    opacity: 0;
    transform: translateY(4rem);
  }

  .steps.is-inview .steps__list {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- tile --- */
.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  padding: 4rem;
  background-color: var(--color-navy);
  color: var(--color-white);
  transition:
    flex-grow var(--steps-duration) var(--steps-ease),
    padding var(--steps-duration) var(--steps-ease),
    min-height var(--steps-duration) var(--steps-ease);
}

/* Fixed per position, repeating after four so a fifth step needs no new CSS.
   Open or closed makes no difference to the background. */
.steps__item:nth-child(4n + 1) {
  background-color: var(--color-navy);
}

.steps__item:nth-child(4n + 2) {
  background-color: var(--color-blue);
}

.steps__item:nth-child(4n + 3) {
  background-color: var(--color-glacier);
}

.steps__item:nth-child(4n + 4) {
  background-color: #53565A;
}

/* 10% black on hover, closed tiles only. */
.steps__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(0 0 0 / 0.1);
  opacity: 0;
  transition: opacity 0.25s var(--steps-ease);
  pointer-events: none;
}

.steps__item:not(.is-open):hover::after,
.steps__item:not(.is-open):focus-within::after {
  opacity: 1;
}

.steps__tab,
.steps__panel {
  position: relative;
  z-index: 2;
  width: 100%;
}

.steps__tab {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.steps__item.is-open .steps__tab {
  cursor: default;
}

.steps__tab:focus-visible {
  outline: 0.2rem solid var(--color-white);
  outline-offset: 0.4rem;
}

/* Closed tiles are clickable across their whole surface; open ones are not,
   so the copy inside them stays selectable. */
.steps__item:not(.is-open) .steps__tab::before {
  content: "";
  position: absolute;
  inset: -100rem;
  z-index: 3;
}

.steps__index,
.steps__title {
  display: block;
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.05rem;
  overflow-wrap: anywhere;
}

.steps__body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------- the reveal --- */
/* 0fr -> 1fr collapses the row to nothing without a hard-coded height, so a
   step can carry as much copy as it needs. */
/* Hidden rather than merely transparent. A closed tile's copy is laid out at
   full size — that is what holds the strip's height steady — so as a
   transparent box it would cover the tile's own click target: the pointer
   lands on text instead of the tab, the cursor drops back to a caret and the
   tile stops opening. `visibility` keeps the layout box but takes it out of
   hit testing and out of the accessibility tree, and unlike `display: none`
   it does not cost the height. It flips after the copy has faded on close,
   and before it fades in on open. */
.steps__reveal {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--steps-duration) var(--steps-ease),
    visibility 0s linear 0.12s;
}

.steps__reveal>* {
  min-height: 0;
  overflow: hidden;
}

/* Padding sits one level further in so it collapses with the row instead of
   propping the closed tile open. Copy leaves fast (0.12s) so it is gone
   before the column crunches; it arrives late so it lands on a settled one. */
.steps__reveal>*>* {
  display: block;
  padding-top: var(--steps-gap);
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity 0.12s var(--steps-ease),
    transform 0.12s var(--steps-ease);
}

.steps__item.is-open .steps__reveal {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--steps-duration) var(--steps-ease),
    visibility 0s linear 0s;
}

.steps__item.is-open .steps__reveal>*>* {
  opacity: 1;
  transform: none;
  transition-duration: var(--steps-copy-in);
  transition-delay: var(--steps-copy-delay);
}

/* Hold the open tile's copy back until the strip itself has arrived. */
@media (scripting: enabled) {
  .steps:not(.is-inview) .steps__item.is-open .steps__reveal>*>* {
    opacity: 0;
    transform: translateY(1.6rem);
  }
}

/* ------------------------------------------------------------- mobile --- */
/* Stacked: closed tile is number + padding (110px), open tile grows to at
   least the 402px of the frame with its copy centred. */
@media (max-width: 767px) {

  /* An explicit 0 so the growth to 40.2rem animates. From `auto` it cannot,
     and the tile snaps to full height before its copy has started moving. */
  .steps__item {
    min-height: 0;
  }

  .steps__item.is-open {
    justify-content: center;
    min-height: 40.2rem;
  }
}

/* --------------------------------------------------- tablet / desktop --- */
@media (min-width: 768px) {
  .steps {
    padding: 4rem;
  }

  .steps__header {
    align-items: flex-start;
    text-align: left;
  }

  .steps__description {
    max-width: 42.8rem;
  }

  .steps__list {
    flex-direction: row;
    align-items: stretch;
    min-height: 35rem;
  }

  .steps__item {
    flex: 0 0 var(--steps-collapsed-size);
    min-width: 0;
    padding: 6rem 3rem;
  }

  .steps__item.is-open {
    flex-grow: 1;
    padding: 6rem 4rem;
  }

  /* The copy is laid out at the width it will have when open, in every tile,
     open or not — the tile clips it. Two things follow.

     One: the text never re-wraps. Sliding a paragraph's column from 90px to
     482px re-flows it on every frame, and the line count visibly churns. Held
     at its final width it is simply uncovered instead.

     Two: every tile is as tall as its own copy, so the strip's height is the
     tallest of them and stays put. Otherwise the height tracks whichever tile
     is open and the whole page below shifts on each click.

     Both depend on the measured width, so both wait for `is-measured`;
     without the script the tiles fall back to the collapsing row. The track is
     max-content, not 1fr — in an auto-height grid there is no free space to
     distribute, so an fr track collapses to its minimum. */
  .steps.is-measured .steps__reveal {
    grid-template-rows: max-content;
  }

  .steps.is-measured .steps__reveal>* {
    width: var(--steps-copy-width);
  }
}

@media (min-width: 1024px) {
  .steps {
    --steps-collapsed-size: 14.5rem;

    padding: 8rem;
  }

  .steps__list {
    min-height: 29.8rem;
  }
}

/* ---------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {

  .steps__list,
  .steps__item,
  .steps__item::after,
  .steps__reveal,
  .steps__reveal>*>* {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }

  .steps__list {
    opacity: 1;
    transform: none;
  }
}

#jobs-list,
#footerpowered {
  display: none;
}

.c-jobs {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  max-width: 1280px;
}


.c-jobs-section {
  width: 100%;
  background: var(--color-warm-gray-2, #f5f5f3);
  padding: 6rem 2rem;
}

@media screen and (min-width: 768px) {
  .c-jobs-section {
    padding: 6rem 4rem;
  }

  .c-jobs-list-header-wrap.jobs-list-header {
    margin: 2rem 0 2rem auto !important;
  }
}

@media screen and (min-width: 1024px) {


  .c-jobs-section {
    padding: 6rem 8rem;
  }
}

/* ─── Page Header (title + results count + sort by) ─── */
.c-jobs>div:has(> .c-jobs-list-header-wrap) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

.c-jobs-list-header-wrap.jobs-list-header {
  margin: 0.8rem 0 2rem 0;
}

@media screen and (min-width: 768px) {
  .c-jobs>div:has(> .c-jobs-list-header-wrap) {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .c-jobs>div:has(> .c-jobs-list-header-wrap)>.c-jobs-list-header-wrap {
    margin-left: auto;
  }
}

.c-jobs * {
  box-sizing: border-box;
}

.c-jobs>h3 {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 2rem 0;
}

.c-jobs .c-jobs-current-location {
  margin: 0 0 2rem;
}

/* ─── Main Layout ─── */
.c-jobs .c-job-main {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  position: relative;
}

/* 
@media screen and (min-width: 768px) {
  .c-jobs .c-job-main {
    flex-direction: row;
    gap: 3.2rem;
  }
} */
@media screen and (min-width: 1024px) {
  .c-jobs .c-job-main {
    flex-direction: row;
    gap: 4rem;
  }

  .c-jobs .c-job-main__left {
    flex: 0 0 31.4rem;
    width: 31.4rem;
    max-width: 31.4rem;
    padding: 0;
  }

  .c-jobs .c-job-main__right {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* ─── Filter Sidebar (Left) ─── */
.c-jobs .c-job-main__left {
  background-color: transparent;
  color: #000000;
  padding: 0;
  height: -moz-fit-content;
  height: fit-content;
}

/* @media screen and (min-width: 768px) {
  .c-jobs .c-job-main__left {
    width: 30%;
    min-width: 26rem;
    max-width: 39.8rem;
    padding: 0;
  }
} */
.c-jobs .c-job-main__left-inner {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches-wrap:has(.jobs-current-searches__tag-list:empty) {
  display: none;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches {
  display: flex;
  flex-direction: column;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__title {
  /* letter-spacing: 0;
  line-height: normal;
  text-transform: none;
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0;
  padding: 0 0 1.6rem 0; */
  display: none;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-item {
  padding: 0.4rem 0.8rem 0.4rem 1.2rem;
  background-color: var(--color-white, #FFF);
  display: flex;
  flex-direction: row;
  gap: 0.8rem;
  justify-content: center;
  align-items: center;
  transition: 0.2s ease-out all;
  cursor: default;
  color: #000000;
  border-radius: 10rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-close {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  cursor: pointer;
  width: 1.8rem;
  height: 1.8rem;
  background-color: var(--color-navy, #001551);
  box-shadow: inset 0 0 0 100vmax rgb(255 255 255 / 0);
  transition: box-shadow 0.25s ease-in-out;
  border-radius: 50%;
  flex-shrink: 0;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-close:hover,
.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-close:focus-visible {
  box-shadow: inset 0 0 0 100vmax var(--color-navy-hover-overlay, rgb(255 255 255 / 0.1));
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-close svg {
  width: 1.4rem;
  height: 1.4rem;
}

.c-jobs .c-job-main__left-inner .c-jobs-current-searches .jobs-current-searches__tag-close svg>path {
  fill: var(--color-white, #FFF);
}

/* ─── Job List (Right) ─── */
/* @media screen and (min-width: 768px) {
  .c-jobs .c-job-main__right {
    width: 70%;
    flex: 1;
  }
} */
.c-jobs .c-job-main__right .share-jobs__no-results {
  font-size: 1.6rem;
  color: #000000;
}

/* ─── Sorting Row ─── */
.c-jobs .c-job-main__sorting {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  /* gap: 1.6rem; */
  /* margin-bottom: 6.4rem; */
}

@media screen and (min-width: 768px) {
  .c-jobs .c-job-main__sorting {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: wrap; */
  }
}

.c-jobs .c-job-main__sorting-left .results-header__content {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.results-header__content-total {
  font-weight: 700;
  color: var(--color-navy, #001551);
}

.advanced-search-container.c-jobs-filter {
  margin-top: 0;
}

.jobs-current-searches__tag-item {
  border: 1px solid var(--color-cool-gray, #53565a);
}

.c-jobs .c-job-main__sorting-left .results-header {
  font-weight: 700;
  line-height: 2.2rem;
  font-size: 1.8rem;
  font-style: normal;
  color: #000000;
  white-space: nowrap;
}

.c-jobs .c-job-main__sorting-left .results-header .results-header__content__total {
  color: var(--color-navy, #001551);
}

.c-jobs .c-job-main__sorting-left:has(.c-jobs-list-header-wrap:empty) {
  display: none;
}

.c-jobs .c-job-main__sorting-right {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .c-jobs .c-job-main__sorting-right {
    width: 100%;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .c-jobs .c-job-main__sorting-right {
    flex-direction: row;
    justify-content: end;
    gap: 1.6rem;
    width: auto;
  }

  .c-jobs .c-job-main__sorting-right .c-jobs-sortby,
  .c-jobs .c-job-main__sorting-right .c-jobs-radius {
    width: auto;
    justify-content: start !important;
  }
}

@media screen and (min-width: 1024px) {
  .c-jobs .c-job-main__sorting-right {
    gap: 1.6rem;
    display: flex;
    align-items: center;
  }

  .c-jobs-sortby-wrap.jobs-sort-by {
    width: fit-content !important;
  }

  .c-jobs .c-job-main__sorting-right .c-jobs-sortby,
  .c-jobs .c-job-main__sorting-right .c-jobs-radius {
    width: fit-content !important;
  }

  .jobs-radius[data-react-component="jobs-radius"] .c-jobs-radius,
  .jobs-sort-by[data-react-component="jobs-sort-by"] .c-jobs-sortby {
    justify-content: flex-start !important;
  }
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby-wrap:has(> div:empty),
.c-jobs .c-job-main__sorting-right .c-jobs-radius-wrap:has(> div:empty) {
  display: none;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby,
.c-jobs .c-job-main__sorting-right .c-jobs-radius {
  font-weight: 700;
  font-size: 1.8rem;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--color-white, #FFF);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 0.8rem 2.4rem;
  border-radius: 0.5rem;
  border: none;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__control,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__control,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__control,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__control {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: transparent;
  border: none;
  height: -moz-max-content;
  height: max-content;
  min-height: unset;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__control.react-select_jobs-sort-by_item__control--menu-is-open .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__control.react-select_jobs-radius_item__control--menu-is-open .react-select_jobs-radius_item__indicator {
  --rotate: 180deg;
  transform: rotate(var(--rotate));
  -webkit-transform: rotate(var(--rotate));
  -ms-transform: rotate(var(--rotate));
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__single-value,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__single-value,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__single-value,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__single-value {
  text-transform: uppercase;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__indicator-separator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__indicator-separator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__indicator-separator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__indicator-separator {
  display: none;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-radius_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__indicator,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__indicator {
  padding: 0 !important;
  color: #000000;
  --rotate: 0deg;
  transition: transform 0.2s;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__menu,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__menu {
  width: -moz-max-content;
  width: max-content;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__menu-list,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__menu-list {
  padding: 0;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__menu .react-select_jobs-sort-by_item__option--is-focused,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__menu .react-select_jobs-sort-by_item__option--is-focused {
  background-color: #F9F9F9;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__menu .react-select_jobs-sort-by_item__option--is-selected,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-sort-by_item__menu .react-select_jobs-sort-by_item__option--is-selected {
  background-color: #F9F9F9;
  color: #000000;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__control,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__control {
  line-height: 1;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__control,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__control:hover,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__control,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__control:hover {
  width: 15rem;
  background: transparent;
  border: none;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu {
  box-shadow: none;
  border-right: 0.1rem solid #E8E8E8;
  border-bottom: 0.1rem solid #E8E8E8;
  border-left: 0.1rem solid #E8E8E8;
  border-radius: 0 0 0.6rem 0.6rem;
  overflow: hidden;
  line-height: 1;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu .react-select__menu-list,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu .react-select__menu-list {
  background: var(--color-white, #FFF);
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu .react-select__menu-list .react-select__option,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu .react-select__menu-list .react-select__option {
  background-color: var(--color-white, #FFF);
  color: #000000;
  padding: 0.8rem 1.6rem;
  line-height: 1.5;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu .react-select__menu-list .react-select__option .react-select__option--is-focused,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu .react-select__menu-list .react-select__option .react-select__option--is-selected,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu .react-select__menu-list .react-select__option:hover,
.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select__menu .react-select__menu-list .react-select__option:focus,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu .react-select__menu-list .react-select__option .react-select__option--is-focused,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu .react-select__menu-list .react-select__option .react-select__option--is-selected,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu .react-select__menu-list .react-select__option:hover,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select__menu .react-select__menu-list .react-select__option:focus {
  background-color: #F9F9F9;
  color: #000000;
}

/* ─── Search Box (Inline on Jobs Page) ─── */
.c-jobs-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  border-radius: 0.5rem;
}

.c-jobs-search>div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  .c-jobs-search {
    flex-direction: column;
    align-items: stretch;
  }
}

@media screen and (min-width: 1024px) {
  .c-jobs-search {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }
}

.c-jobs-search .keyword-search__input,
.c-jobs-search .location-search-input {
  position: relative;
  display: flex;
  height: 56px;
  padding: 0 20px 0 10px;
  align-items: center;
  gap: 0.8rem;
  align-self: stretch;
  border-radius: 0.4rem;
  border: 1px solid var(--color-cool-gray, #53565A);
  background: var(--color-white, #FFF);
}

.c-jobs-search .c-jobs-search__keyword-label {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.c-jobs-search .c-jobs-search__location-label {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.c-jobs-search .keyword-search__input .location-search__input-icon--pin,
.c-jobs-search .location-search-input .location-search__input-icon--pin {
  display: none;
}

.c-jobs-search .keyword-search__input:focus-within,
.c-jobs-search .location-search-input:focus-within {
  background-color: rgba(253, 251, 249, 0.85);
}

.c-jobs-search .keyword-search__input .autocomplete,
.c-jobs-search .location-search-input .autocomplete {
  width: 100%;
  height: 100%;
  position: unset;
}

.c-jobs-search .keyword-search__input .autocomplete input,
.c-jobs-search .location-search-input .autocomplete input {
  width: 100%;
  height: 100%;
  display: flex;
  color: var(--color-cool-gray, #53565A);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.c-jobs-search .keyword-search__input .autocomplete input::-moz-placeholder,
.c-jobs-search .location-search-input .autocomplete input::-moz-placeholder {
  color: #000;
}

.c-jobs-search .keyword-search__input .autocomplete input::placeholder,
.c-jobs-search .location-search-input .autocomplete input::placeholder {
  color: #000;
}

.c-jobs-search .keyword-search__input .autocomplete input:focus-visible,
.c-jobs-search .location-search-input .autocomplete input:focus-visible {
  outline: none;
}

/* .c-jobs-search .keyword-search__input .autocomplete .autocomplete__suggestion.menu,
.c-jobs-search .location-search-input .autocomplete .autocomplete__suggestion.menu {
  width: auto;
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--color-white, #FFF);
  color: #000000;
  padding: 0;
  z-index: 99;
  border-radius: 0.5rem;
  box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
}

.c-jobs-search .keyword-search__input .autocomplete .autocomplete__suggestion.menu label,
.c-jobs-search .location-search-input .autocomplete .autocomplete__suggestion.menu label {
  display: block;
  padding: 1rem 2rem;
  transition: background-color 0.2s;
}

.c-jobs-search .keyword-search__input .autocomplete .autocomplete__suggestion.menu label:hover,
.c-jobs-search .location-search-input .autocomplete .autocomplete__suggestion.menu label:hover {
  background-color: #CFCECE;
}
*/
.c-jobs-search .keyword-search__input .icon-container,
.c-jobs-search .location-search-input .icon-container {
  background: transparent;
}

/* .c-jobs-search .keyword-search__input .icon-container .location-search__icon-left,
.c-jobs-search .location-search-input .icon-container .location-search__icon-left {
  display: none;
} */

.c-jobs-search .keyword-search__input .keyword-search__icon-container {
  background-color: transparent;
  position: static;
}

.c-jobs-search .location-search-input .keyword-search__icon-container {
  position: relative !important;
  background: transparent;
}

.c-jobs-search .keyword-search__input .keyword-search__icon-container svg,
.c-jobs-search .location-search-input .keyword-search__icon-container svg {
  height: 2rem;
  width: 2rem;
  fill: #000;
}

.c-jobs-search .keyword-search__input.location-search-input,
.c-jobs-search .location-search-input.location-search-input {
  --prefix-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 20H19M12 8H12.01M8.44295 4.44601C9.4273 3.482 10.613 3 12 3C13.387 3 14.5671 3.47652 15.5403 4.42958C16.5134 5.38263 17 6.53833 17 7.89671C17 8.5759 16.8266 9.35367 16.4799 10.23C16.1331 11.1064 15.7136 11.928 15.2215 12.6948C14.7293 13.4617 14.2427 14.1792 13.7617 14.8474C13.2808 15.5157 12.8725 16.0469 12.5369 16.4413L12 17C11.8658 16.8466 11.6868 16.644 11.4631 16.392C11.2394 16.1401 10.8367 15.6362 10.255 14.8803C9.67338 14.1244 9.16443 13.3905 8.72819 12.6784C8.29194 11.9664 7.89486 11.1612 7.53691 10.2629C7.17897 9.36463 7 8.5759 7 7.89671C7 6.53833 7.48098 5.38811 8.44295 4.44601Z' stroke='%23001551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.c-jobs-search .keyword-search__input.keyword-search__input,
.c-jobs-search .location-search-input.keyword-search__input {
  --prefix-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.8078 15.8078L20 20M15.8078 15.8078C13.1066 18.509 8.72709 18.509 6.0259 15.8078C3.3247 13.1066 3.3247 8.72708 6.0259 6.02589C8.72709 3.3247 13.1066 3.3247 15.8078 6.02589C18.509 8.72708 18.509 13.1066 15.8078 15.8078Z' stroke='%23001551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.c-jobs-search .keyword-search__input::before,
.c-jobs-search .location-search-input::before {
  content: "";
  background-image: var(--prefix-icon);
  width: 2.4rem;
  height: 2.4rem;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* Locate-me control. The vendor ships a solid FontAwesome target glyph; design
   calls for the outlined crosshair. Painted as a pseudo-element background so
   the third-party markup stays untouched, same --icon var pattern as the
   input prefixes above. */
.c-jobs-search .keyword-search__input .location-search__icon-button,
.c-jobs-search .location-search-input .location-search__icon-button {
  --locate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 17V22M12 2V7M22 12H17M7 12H2M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z' stroke='%23001551' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* .c-jobs-search .keyword-search__input .location-search__icon-button::before,
.c-jobs-search .location-search-input .location-search__icon-button::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-image: var(--locate-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
} */

/* Replaced by ::before. The button's aria-label carries the accessible name,
   so dropping the SVG (and its sr-only <text>) loses nothing. */
.c-jobs-search .keyword-search__input .location-search__icon.icon--svg,
.c-jobs-search .location-search-input .location-search__icon.icon--svg {
  display: none;
}

.c-jobs-search .c-jobs-search__button-search {
  display: flex;
  margin-top: 1rem;
  padding: 1.6rem 2.4rem;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  align-self: stretch;
  border-radius: 1rem;
  background: var(--color-navy, #001551);
  color: var(--color-white, #FFF);
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  cursor: pointer;
  /* A full-bleed inset shadow is the 10% white overlay; unlike a gradient
     background it interpolates, so the fill eases instead of snapping. */
  box-shadow: inset 0 0 0 100vmax rgb(255 255 255 / 0);
  transition: box-shadow 0.25s ease-in-out;
}

.c-jobs-search .c-jobs-search__button-search:hover,
.c-jobs-search .c-jobs-search__button-search:focus-visible {
  box-shadow: inset 0 0 0 100vmax var(--color-navy-hover-overlay, rgb(255 255 255 / 0.1));
  color: var(--color-white, #FFF);
}

/* ─── Search Box Wrapper ─── */
.c-jobs-search-wrap {
  margin-bottom: 0;
}

.c-jobs .c-main-hero-search__horizontal {
  max-width: 144rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  border-radius: 2rem;
  padding: 1.5rem 2.4rem;
  width: 100%;
  position: relative;
}

@media screen and (min-width: 768px) {
  .c-jobs .c-main-hero-search__horizontal {
    flex-direction: row;
    align-items: stretch;
    padding: 1.5rem 5.2rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-jobs .c-main-hero-search__horizontal {
    padding: 1.5rem 10.4rem;
  }
}

.c-jobs .c-main-hero-search__horizontal .c-main-hero-search__keyword-label,
.c-jobs .c-main-hero-search__horizontal .c-main-hero-search__location-label {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  display: none;
  color: #000000;
}

.c-jobs .c-main-hero-search__horizontal .c-main-hero-search__button {
  width: 25rem;
}

.c-jobs .c-main-hero-search__horizontal .menu {
  background: var(--color-white, #FFF);
  color: #000000;
  transform: translateY(calc(100% + 1.8rem));
  border: 0.1rem solid #E8E8E8;
}

.c-jobs .c-main-hero-search__horizontal .menu .location-item:hover {
  background: #F9F9F9;
  color: #000000;
}

.c-jobs .c-main-hero-search__horizontal .menu .location-item--hightlight {
  background: #F9F9F9;
  color: #000000;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__control--is-focused,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__control--is-focused {
  box-shadow: #000 0px 0px 0px 1px;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__menu .react-select_jobs-sort-by_item__option--is-focused,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__menu .react-select_jobs-radius_item__option--is-focused {
  background-color: #F9F9F9;
  color: #000;
}

.c-jobs .c-job-main__sorting-right .c-jobs-sortby .react-select_jobs-sort-by_item__menu .react-select_jobs-sort-by_item__option--is-selected,
.c-jobs .c-job-main__sorting-right .c-jobs-radius .react-select_jobs-radius_item__menu .react-select_jobs-radius_item__option--is-selected {
  background-color: var(--color-navy, #001551);
  color: var(--color-white, #FFF);
}

/* ─── Filter Panel ─── */
.c-jobs .c-jobs-filter {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  max-width: none !important;
}

.c-jobs .c-jobs-filter .filter-group {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Style the checkbox itself using accent-color (modern, simple approach) */
.filter-option input[type="checkbox"] {
  accent-color: var(--color-navy, #001551);
  cursor: pointer;
}

.c-jobs .c-jobs-filter .filter-group>h3 {
  display: none;
}

.c-jobs .c-jobs-filter .filter-category-container {
  background-color: var(--color-white, #FFF);
  border: 1px solid var(--color-cool-gray, #53565A);
  border-radius: 0.4rem;
  padding: 1.6rem 1rem;
}

.c-jobs .c-jobs-filter .filter-category-container:last-child {
  margin-bottom: 0;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container {
  border-radius: 0;
  max-height: 0;
  transition: max-height ease-out 0.3s;
  overflow: hidden;
  display: none;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container.is-expanded {
  max-height: 30rem;
  display: block;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2px;
}

@media screen and (min-width: 768px) {
  .c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list {
    min-width: 260px;
  }
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container ul {
  overflow: auto;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list .filter-option {
  padding: 0.4rem 15px 0 0;
  height: 4.6rem;
  display: flex;
  align-items: center;
  gap: 20px;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list .filter-option .option-value.text {
  flex: 1;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list .filter-option label {
  display: flex;
  flex-direction: row;
  gap: 1.6rem;
  color: var(--color-cool-gray, #53565a);
  font-size: 1.6rem;
  line-height: 1.5;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list .filter-option label>input[type=checkbox] {
  accent-color: var(--color-navy, #001551);
  --checkbox-scale: 1.6;
  transform: scale(var(--checkbox-scale));
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list .filter-option label>.option-value {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  justify-content: space-between;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list>div {
  position: relative;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list>div>li {
  min-width: 20rem;
}

.c-jobs .c-jobs-filter .filter-category-container .filter-options-list-container .filter-options-list>div>li .option-value.text {
  line-height: 2.3rem;
}

.c-jobs .c-jobs-filter .filter-header {
  overflow: hidden;
  color: var(--color-navy, #001551);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;

  /* Needed so the ::after chevron has a place to render */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  cursor: pointer;
}

.c-jobs .c-jobs-filter .filter-header.open::after {
  --rotate: 180deg;
}

.c-jobs .c-jobs-filter .filter-header::after {
  content: "";
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41L16.59 8Z" fill="%23001551"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.3s ease-out;
  --rotate: 0deg;
  transform: rotate(var(--rotate));
  -webkit-transform: rotate(var(--rotate));
  -ms-transform: rotate(var(--rotate));
  height: 2.4rem;
  width: 2.4rem;

  flex: 0 0 2.4rem;
}

.c-jobs .c-jobs-filter .filter-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-jobs .c-jobs-filter .filter-options-list-container {
  padding: 0;
  border-top: none;
}

.c-jobs .c-jobs-filter .reset-filters {
  padding: 4rem 0 0;
  display: flex;
  justify-content: flex-start;
}

.c-jobs .c-jobs-filter .reset-filters a,
.c-jobs .c-jobs-filter .reset-filters button {
  color: var(--color-cool-gray, #53565A);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  text-decoration-line: underline;
}

.c-jobs .c-jobs-filter .reset-filters a:hover,
.c-jobs .c-jobs-filter .reset-filters button:hover {
  color: var(--color-navy, #001551);
  text-decoration: underline;
}

/* ─── Pagination ─── */
.c-jobs .c-jobs-pagination {
  margin: 2rem 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  padding: 0;
  gap: 2rem;
  flex-wrap: wrap;
}

.c-jobs .c-jobs-pagination .page-size {
  background-color: var(--color-white, #FFF);
  display: none;
  border: none;
  border-radius: 4rem;
  align-items: center;
  padding: 1.2rem 1.8rem;
  justify-content: center;
  text-align: center;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: #222;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);

}

.c-jobs .c-jobs-pagination .page-size:focus-visible {
  outline: 2px solid var(--color-navy, #001551);
  outline-offset: 2px;
}

.c-jobs .c-jobs-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .c-jobs .c-jobs-pagination .pagination {
    flex-wrap: nowrap;
    width: auto;
  }
}

.c-jobs .c-jobs-pagination .pagination.mobile {
  display: none;
}

.c-jobs .c-jobs-pagination .page-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  border-radius: 0;
  padding: 0;
  gap: 2rem;
}

@media screen and (min-width: 1024px) {
  .c-jobs .c-jobs-pagination .page-links {
    flex-wrap: nowrap;
  }
}

.c-jobs .c-jobs-pagination .pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2rem;
}

.c-jobs .c-jobs-pagination .pagination__list li {
  display: flex;
  width: 4rem;
  height: 4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.c-jobs .c-jobs-pagination .page-link {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  text-decoration: none;
  transition: 0.2s ease-out all;
}

.c-jobs .c-jobs-pagination .page-link:hover {
  color: var(--color-navy, #001551);
  background: var(--color-white, #FFF);
}

.c-jobs .c-jobs-pagination .page-link.page-link-next,
.c-jobs .c-jobs-pagination .page-link.page-link-last,
.c-jobs .c-jobs-pagination .page-link.page-link-first,
.c-jobs .c-jobs-pagination .page-link.page-link-previous {
  color: var(--color-black, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: 0.2s ease-out all;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}

.c-jobs .c-jobs-pagination .page-link.page-link-next:hover,
.c-jobs .c-jobs-pagination .page-link.page-link-last:hover,
.c-jobs .c-jobs-pagination .page-link.page-link-first:hover,
.c-jobs .c-jobs-pagination .page-link.page-link-previous:hover {
  background-color: var(--color-white, #FFF);
}

.c-jobs .c-jobs-pagination .page-link.page-link-next>svg,
.c-jobs .c-jobs-pagination .page-link.page-link-last>svg,
.c-jobs .c-jobs-pagination .page-link.page-link-first>svg,
.c-jobs .c-jobs-pagination .page-link.page-link-previous>svg {
  width: 1.2rem;
  height: 1.4rem;
}

.c-jobs .c-jobs-pagination .page-link.page-link-next>svg>path,
.c-jobs .c-jobs-pagination .page-link.page-link-last>svg>path,
.c-jobs .c-jobs-pagination .page-link.page-link-first>svg>path,
.c-jobs .c-jobs-pagination .page-link.page-link-previous>svg>path {
  fill: var(--color-black, #000);
  transition: 0.2s ease-out all;
}

/* Design pagination is prev / numbers / next / last — no "first" control. */
.c-jobs .c-jobs-pagination .page-link.page-link-first {
  display: none;
}

/* Hiding the link alone leaves its 4rem <li> behind as a gap in the row. */
.c-jobs .c-jobs-pagination .pagination__list li:has(> .page-link-first),
.c-jobs .c-jobs-pagination .pagination__list li:has(> .page-link.not-selectable:not(.current-page)) {
  display: none;
}

.c-jobs .c-jobs-pagination .page-link.page-link-next.not-selectable,
.c-jobs .c-jobs-pagination .page-link.page-link-last.not-selectable,
.c-jobs .c-jobs-pagination .page-link.page-link-first.not-selectable,
.c-jobs .c-jobs-pagination .page-link.page-link-previous.not-selectable {
  display: none;
}

.c-jobs .c-jobs-pagination .page-link.current-page.not-selectable {

  display: flex;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--color-white, #FFF);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

/* ─── Job List ─── */
.c-jobs .c-jobs-list-only {
  margin-top: 0;
}

.c-jobs .c-jobs-list-only .results-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.1rem;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

.c-jobs .c-jobs-list-only .results-list__item {
  display: flex;
  padding: 2rem 2.6rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  border-radius: 1rem;
  background: var(--color-white, #FFF);
  /* An inset shadow follows border-radius and costs no layout, unlike a border. */
  box-shadow: inset 0 0 0 0 var(--color-blue, #0064c8);
  transition: box-shadow 0.25s ease-in-out;
}

.c-jobs .c-jobs-list-only .results-list__item:hover,
.c-jobs .c-jobs-list-only .results-list__item:focus-within {
  box-shadow: inset 0 0 0 0.3rem var(--color-blue, #0064c8);
}

.c-jobs .c-jobs-list-only .results-list__item:last-child {
  border-bottom: none;
}

.c-jobs .c-jobs-list-only .results-list__item-header {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding-bottom: 0;
}

.c-jobs .c-jobs-list-only .results-list__item-title {
  margin: 0;
  max-width: 100%;
}

.c-jobs .c-jobs-list-only .results-list__item-title .results-list__item-title--link {

  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.c-jobs .c-jobs-list-only .results-list__item-title .results-list__item-title--link:hover {
  color: var(--color-navy, #001551);
}

.c-jobs .c-jobs-list-only .results-list__item-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  max-width: 100%;
  width: 100%;
}

/* Desktop: title + meta in one column, Apply Now centred alongside them.
   `display: contents` lifts the info block and the button into the card grid. */
@media screen and (min-width: 1024px) {
  .c-jobs .c-jobs-list-only .results-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1rem;
  }

  .c-jobs .c-jobs-list-only .results-list__item-header {
    grid-column: 1;
    grid-row: 1;
  }

  .c-jobs .c-jobs-list-only .results-list__item-content {
    display: contents;
  }

  .c-jobs .c-jobs-list-only .results-list__item-info {
    grid-column: 1;
    grid-row: 2;
  }
}

.c-jobs .c-jobs-list-only .results-list__item-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0;
  color: var(--color-black, #000);
  margin-right: 0;
}

.c-jobs .c-jobs-list-only .results-list__item-street--label__wrapper,
.c-jobs .c-jobs-list-only .results-list__item-brand,
.c-jobs .c-jobs-list-only .results-list__item-distance,
.c-jobs .c-jobs-list-only .results-list__custom1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.c-jobs .c-jobs-list-only .results-list__item-street,
.c-jobs .c-jobs-list-only .results-list__item-brand,
.c-jobs .c-jobs-list-only .results-list__item-distance {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.c-jobs .results-list__item-street--more-locations__wrapper {
  display: flex;
  align-items: center;
  gap: 3px;
}

@media screen and (min-width: 1024px) {

  .c-jobs .c-jobs-list-only .results-list__item-street,
  .c-jobs .c-jobs-list-only .results-list__item-brand,
  .c-jobs .c-jobs-list-only .results-list__item-distance {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 0.8rem;
  }
}

.c-jobs .c-jobs-list-only .results-list__item-street--icon svg {
  display: none;
  flex-shrink: 0;
}

/* Render the new location icon via CSS */
.c-jobs .results-list__item-street--icon::before {
  content: "";
  display: flex;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 20H19M12 8H12.01M8.44295 4.44601C9.4273 3.482 10.613 3 12 3C13.387 3 14.5671 3.47652 15.5403 4.42958C16.5134 5.38263 17 6.53833 17 7.89671C17 8.5759 16.8266 9.35367 16.4799 10.23C16.1331 11.1064 15.7136 11.928 15.2215 12.6948C14.7293 13.4617 14.2427 14.1792 13.7617 14.8474C13.2808 15.5157 12.8725 16.0469 12.5369 16.4413L12 17C11.8658 16.8466 11.6868 16.644 11.4631 16.392C11.2394 16.1401 10.8367 15.6362 10.255 14.8803C9.67338 14.1244 9.16443 13.3905 8.72819 12.6784C8.29194 11.9664 7.89486 11.1612 7.53691 10.2629C7.17897 9.36463 7 8.5759 7 7.89671C7 6.53833 7.48098 5.38811 8.44295 4.44601Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.c-jobs .c-jobs-list-only .results-list__item-street--icon svg {
  width: 1.7rem;
  height: 2rem;
}

.c-jobs .c-jobs-list-only .results-list__item-street--icon svg g {
  stroke: var(--color-cool-gray, #53565a);
}

.c-jobs .c-jobs-list-only .results-list__item-distance--icon svg g,
.c-jobs .c-jobs-list-only .results-list__item-brand--icon svg g {
  stroke: transparent;
  fill: #A9A9A9;
}

/* ─── Custom1 (Location Name) ─── */
.c-jobs .c-jobs-list-only .results-list__custom1 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0;
  color: var(--color-black, #000);
}

.c-jobs .c-jobs-list-only .results-list__custom1::before {
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.07324 20C6.44083 17.3333 8.22048 16 12.0001 16C15.7798 16 17.5594 17.3333 17.927 20M12 13C13.3333 13 14 12.2857 14 10.5C14 8.71429 13.3333 8 12 8C10.6667 8 10 8.71429 10 10.5C10 12.2857 10.6667 13 12 13ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.c-jobs .c-jobs-list-only .results-list__custom1--label {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

/* ─── Apply Button ─── */
.c-jobs .c-jobs-list-only .results-list__item-apply {
  display: flex;
  padding: 1.6rem 2.4rem;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  align-self: stretch;
  border-radius: 1rem;
  border: 2px solid var(--color-navy, #001551);
  background-color: transparent;
  transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

/* Design shows the label alone — no trailing chevron. */
.c-jobs .results-list__item-apply--icon {
  display: none;
}

.c-jobs .c-jobs-list-only .results-list__item:hover .results-list__item-apply,
.c-jobs .c-jobs-list-only .results-list__item-apply:hover,
.c-jobs .c-jobs-list-only .results-list__item-apply:focus-visible {
  background-color: var(--color-blue, #0064c8);
  border-color: var(--color-blue, #0064c8);
}

.c-jobs .c-jobs-list-only .results-list__item-apply--label {
  color: var(--color-navy, #001551);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  transition: color 0.25s ease-in-out;
}

.c-jobs .c-jobs-list-only .results-list__item:hover .results-list__item-apply--label,
.c-jobs .c-jobs-list-only .results-list__item-apply:hover .results-list__item-apply--label,
.c-jobs .c-jobs-list-only .results-list__item-apply:focus-visible .results-list__item-apply--label {
  color: var(--color-white, #FFF);
}

@media screen and (min-width: 1024px) {
  .c-jobs .c-jobs-list-only .results-list__item-apply {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
  }
}

.c-jobs .c-jobs-list-only .results-container {
  position: relative;
}

/* ─── Sort By / Radius Custom Select ─── */
.jobs-sort-by[data-react-component="jobs-sort-by"] .jobs-sort-by_select_display,
.jobs-radius[data-react-component="jobs-radius"] .jobs-radius_select_display {
  border: none;
  width: auto;
  color: var(--color-black, #000000);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}


.jobs-radius[data-react-component="jobs-radius"] .jobs-radius_select_display_icon,
.jobs-sort-by[data-react-component="jobs-sort-by"] .jobs-sort-by_select_display_icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16 7L10 13L4 7" stroke="black" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  border: none;
}

.jobs-radius_select_display_text,
.jobs-sort-by_select_display_text {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
}

.jobs-radius[data-react-component="jobs-radius"] .jobs-radius_select_display_icon svg,
.jobs-sort-by[data-react-component="jobs-sort-by"] .jobs-sort-by_select_display_icon svg {
  display: none;
}

.jobs-radius[data-react-component="jobs-radius"] .c-jobs-radius,
.jobs-sort-by[data-react-component="jobs-sort-by"] .c-jobs-sortby {
  justify-content: space-between;
}

.jobs-radius[data-react-component="jobs-radius"] .c-jobs-radius>div,
.jobs-sort-by[data-react-component="jobs-sort-by"] .c-jobs-sortby>div {
  width: auto;
}

.c-jobs .jobs-sort-by_select_display_text {
  min-width: 100px;
}

.c-jobs [data-react-component=jobs-sort-by] .jobs-sort-by_select_display_icon {
  border: none;
  margin: 0;
}

.c-jobs [data-react-component=jobs-sort-by] .jobs-sort-by_select_display_icon {
  width: 20px;
  height: 20px;
}

.jobs-sort-by_label,
.jobs-radius_label {
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}

.c-jobs .page-size_text {
  display: none;
}

.c-jobs .results-list__item-title {
  margin: 0;
}

.c-jobs .results-list__item-content {
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .c-jobs .results-list__item-title {
    max-width: 100%;
  }
}

/* ─── Location Permission Modal ─── */
.location-permission-modal {
  position: relative;
  max-width: fit-content;
}

.location-permission__close-button {
  position: absolute;
  top: 0;
  right: 0;
}

.c-jobs-radius-wrap.jobs-radius,
.c-jobs-sortby-wrap.jobs-sort-by {
  width: 20rem;
}

@media(max-width: 768px) {
    .c-jobs-radius-wrap.jobs-radius,
        .c-jobs-sortby-wrap.jobs-sort-by {
            width: 100%;
            margin-bottom: 2rem;
        }
}


/* ─── Sort By / Radius dropdown panel ───
   The listbox ships unstyled, so it lays out in flow and stretches the pill.
   Anchor it to the trigger and give it its own surface. */
.jobs-sort-by_select_wrapper,
.jobs-radius_select_wrapper {
  position: relative;
}

.jobs-sort-by_select_display,
.jobs-radius_select_display {
  background: transparent;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}

/* The chevron is a ::before on the icon span; flip it while the list is open. */
.jobs-sort-by_select_display[aria-expanded="true"] .jobs-sort-by_select_display_icon::before,
.jobs-radius_select_display[aria-expanded="true"] .jobs-radius_select_display_icon::before {
  transform: rotate(180deg);
}

.jobs-sort-by_select_display_icon::before,
.jobs-radius_select_display_icon::before {
  transition: transform 0.2s ease-out;
}

.jobs-sort-by_select_options,
.jobs-radius_select_options {
  position: absolute;
  top: calc(100% + 1.2rem);
  right: 0;
  z-index: 100;
  min-width: 100%;
  width: max-content !important;
  max-height: 28rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: var(--color-white, #FFF);
  border: 1px solid var(--color-cool-gray, #53565a);
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 1rem 0.2rem rgb(0 0 0 / 0.15);
}

/* Keep the `hidden` attribute authoritative — the rules above must not revive it. */
.jobs-sort-by_select_options[hidden],
.jobs-radius_select_options[hidden] {
  display: none;
}

.jobs-sort-by_select_options li,
.jobs-radius_select_options li {
  padding: 1rem 1.6rem;
  color: var(--color-black, #000);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.jobs-sort-by_select_options li[aria-selected="true"],
.jobs-radius_select_options li[aria-selected="true"] {
  font-weight: 700;
  color: var(--color-navy, #001551);
}

.jobs-sort-by_select_options li:hover,
.jobs-sort-by_select_options li:focus,
.jobs-radius_select_options li:hover,
.jobs-radius_select_options li:focus {
  background: var(--color-navy, #001551) !important;
  color: var(--color-white, #FFF);
  outline: none;
}

/* ─── Commute Time Modal ─── */
.modal__container {
  width: 95% !important;
  left: 50% !important;
  transform: translateX(-50%);
}

.commute-time-modal__location .commute-time-modal__location__input {
  padding: 0 0 !important;
}

.commute-time-modal .autocomplete input.autocomplete__input {
  padding: 0 !important;
  outline: none;
}

.commute-time-modal__title {
  align-items: flex-start !important;
}

.commute-time-modal__icon.icon-brand,
.location-search__commute-time-location svg {
  color: var(--color-navy, #001551) !important;
}

.commute-time-modal__title__icon {
  margin-top: 3px !important;
}

.commute-time-modal__commute-method-options ul li:hover,
.commute-time-modal__commute-method-options ul li.active,
.commute-time-modal__transportation-options ul li:hover,
.commute-time-modal__transportation-options ul li.active,
input:checked+.commute-time-modal__estimation__slider,
.commute-time-modal__button.btn-brand {
  background-color: var(--color-navy, #001551) !important;
}

.commute-time-modal__footer .commute-time-modal__button.btn-brand {
  border: 0 !important;
}

.commute-time-modal__button.btn-brand {
  box-shadow: inset 0 0 0 100vmax rgb(255 255 255 / 0);
  transition: box-shadow 0.25s ease-in-out;
}

.commute-time-modal__button.btn-brand:hover,
.commute-time-modal__button.btn-brand:focus-visible {
  box-shadow: inset 0 0 0 100vmax var(--color-navy-hover-overlay, rgb(255 255 255 / 0.1));
}

.location-search__commute-time-location {
  border-radius: 0.5rem !important;
}

.location-search__commute-time-location-inner {
  outline: none;
}

.location-search__commute-time-location-clear {
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: #222222;
  transition: all 0.2s ease-out;
  text-decoration: none !important;
  text-transform: none !important;
  position: absolute;
  top: -102px;
  height: 30px;
}

.location-search__commute-time-location-clear:hover {
  text-decoration: underline !important;
}

.commute-time-modal__transportation-options ul {
  flex-wrap: wrap;
}

@media (min-width: 48rem) {
  .modal__container {
    width: 760px !important;
  }

  .location-search__commute-time-location-clear {
    top: auto;
    bottom: -40px !important;
  }
}

/* ─── Mobile: stacked filter above job list ─── */
@media screen and (max-width: 767px) {
  .c-jobs .c-job-main {
    flex-direction: column;
    /* gap: 4.8rem; */
  }

  .c-jobs .c-job-main__left {
    width: 100%;
  }

  .c-jobs .c-jobs-list-only .results-list__item-apply {
    width: 100%;
    margin-top: 0;
  }
}

/* Dropdown container - positioned below the input */
.autocomplete__suggestion {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.4rem;
  background-color: var(--color-white, #FFF);
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 1rem 0.2rem rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 0.4rem 0;
  margin-bottom: 0;
  z-index: 100;

  /* Scroll behavior */
  max-height: 24rem;
  /* ~4-5 items visible before scroll */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* smooth scroll on iOS */
}

/* Each suggestion item */
.autocomplete__suggestion .location-item {
  padding: 1.2rem 1.6rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.autocomplete__suggestion .location-item:last-child {
  border-bottom: none;
}

/* Label inside each item */
.autocomplete__suggestion .location-item label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.2rem;
  letter-spacing: -0.02rem;
  color: var(--color-black, #000);
  cursor: pointer;
  margin: 0;
}

/* Hover state */
.autocomplete__suggestion .location-item:hover {
  background-color: color-mix(in srgb, var(--color-navy, #001551) 8%, transparent);
}

/* Highlighted / keyboard-focused item */
.autocomplete__suggestion .location-item--hightlight,
.autocomplete__suggestion .location-item[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--color-navy, #001551) 12%, transparent);
}

/* Optional icon on the right of each item (e.g., pin or arrow) */
.autocomplete__suggestion .location-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  color: var(--color-navy, #001551);
}

.c-jobs-sortby.jobs-sort-by_container,
.c-jobs-radius.jobs-radius_container {
  position: relative;
  display: flex;
  padding: 1.5rem 2rem !important;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  background: var(--color-white, #FFF);
  overflow: visible;
}

/* update */
/* Horizontal and Vertical Search Inputs Styling */
.c-jobs-search .keyword-search__input,
.c-jobs-search .location-search-input,
.c-jobs-search-vertical .keyword-search__input,
.c-jobs-search-vertical .c-jobs-search-vertical__location-content {
  border: 1px solid #53565A;
  border-radius: 10px;
  background: var(--White, #FFF);
  transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  will-change: border, box-shadow;
}

/* Focus and Active States */
.c-jobs-search .keyword-search__input:focus-within,
.c-jobs-search .location-search-input:focus-within,
.c-jobs-search .keyword-search__input:active,
.c-jobs-search .location-search-input:active,
.c-jobs-search-vertical .keyword-search__input:focus-within,
.c-jobs-search-vertical .c-jobs-search-vertical__location-content:focus-within,
.c-jobs-search-vertical .keyword-search__input:active,
.c-jobs-search-vertical .c-jobs-search-vertical__location-content:active {
  border: 4px solid var(--Glacier-2, #0AD6FF);
  outline: none;
}

.c-jobs-search .keyword-search__input .autocomplete__input::placeholder,
.c-jobs-search .location-search-input .autocomplete__input::placeholder {
  color: #53565A !important;
  opacity: 1;
}

.c-jobs-search .keyword-search__input .autocomplete__input::-webkit-input-placeholder,
.c-jobs-search .location-search-input .autocomplete__input::-webkit-input-placeholder {
  color: #53565A !important;
}

.c-jobs-search .keyword-search__input .autocomplete__input::-moz-placeholder,
.c-jobs-search .location-search-input .autocomplete__input::-moz-placeholder {
  color: #53565A !important;
  opacity: 1;
}

.c-jobs-search .keyword-search__input .autocomplete__input:-ms-input-placeholder,
.c-jobs-search .location-search-input .autocomplete__input:-ms-input-placeholder {
  color: #53565A !important;
}

.c-jobs-search .keyword-search__input .autocomplete__input::-ms-input-placeholder,
.c-jobs-search .location-search-input .autocomplete__input::-ms-input-placeholder {
  color: #53565A !important;
}

/* ─── Search Box — vertical variant (hero) ───
   Figma: desktop 4049:185 · tablet 4049:580 · mobile 6003:173.

   The React component ships `horizontal="false"`, so the DOM is always the
   stacked vertical tree; every layout below is CSS only — no markup is
   touched. Icons follow the same --icon custom-property + ::before pattern
   used by the horizontal variant above. */
.c-jobs-search-vertical-wrap {
  width: 100%;
}

.c-jobs-search-vertical {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2rem;
  width: 100%;
}

/* Tablet and up the three stacked blocks become one row, bottom-aligned so the
   inputs line up with the button regardless of label height. */
@media screen and (min-width: 768px) {
  .c-jobs-search-vertical {
    flex-direction: row;
    align-items: flex-end;
    gap: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .c-jobs-search-vertical {
    gap: 1rem;
  }
}

.c-jobs-search-vertical__keyword,
.c-jobs-search-vertical .location-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  min-width: 0;
}

/* Tablet shares the row evenly; desktop pins both fields at the design's 312px. */
@media screen and (min-width: 768px) {

  .c-jobs-search-vertical__keyword,
  .c-jobs-search-vertical .location-search {
    flex: 1 1 0;
  }
}

@media screen and (min-width: 1024px) {

  .c-jobs-search-vertical__keyword,
  .c-jobs-search-vertical .location-search {
    flex: 0 0 31.2rem;
    width: 31.2rem;
  }
}

/* ─── Labels ─── */
.c-jobs-search-vertical__keyword-label,
.c-jobs-search-vertical__location-label {
  display: block;
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--color-white, #fff);
}

/* The desktop frame sets these back to regular weight. */
@media screen and (min-width: 1024px) {

  .c-jobs-search-vertical__keyword-label,
  .c-jobs-search-vertical__location-label {
    font-weight: 400;
  }
}

/* ─── Fields ─── */
.c-jobs-search-vertical .keyword-search__input,
.c-jobs-search-vertical .location-search-input {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 5.6rem;
  padding: 0 1.4rem;
  /* border: 0.1rem solid var(--color-warm-gray, #ebebe6); */
  border-radius: 1rem;
  background: var(--color-white, #fff);
  /* transition: border-color 0.2s ease-in-out; */
}

/* .c-jobs-search-vertical .keyword-search__input:focus-within,
.c-jobs-search-vertical .location-search-input:focus-within {
  border-color: var(--color-blue, #0064c8);
} */

/* Vendor's FontAwesome pin, replaced by the ::before below. */
.c-jobs-search-vertical .location-search__input-icon--pin {
  display: none;
}

.c-jobs-search-vertical .autocomplete {
  position: unset;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.c-jobs-search-vertical .autocomplete input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-charcoal, #282828);
}

.c-jobs-search-vertical .autocomplete input::placeholder {
  color: var(--color-cool-gray, #53565a);
  opacity: 1;
}

.c-jobs-search-vertical .autocomplete input:focus-visible {
  outline: none;
}

/* ─── Field prefix icons ─── */
.c-jobs-search-vertical .keyword-search__input {
  --prefix-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.8078 15.8078L20 20M15.8078 15.8078C13.1066 18.509 8.72709 18.509 6.0259 15.8078C3.3247 13.1066 3.3247 8.72708 6.0259 6.02589C8.72709 3.3247 13.1066 3.3247 15.8078 6.02589C18.509 8.72708 18.509 13.1066 15.8078 15.8078Z' stroke='%23001551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.c-jobs-search-vertical .location-search-input {
  --prefix-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 20H19M12 8H12.01M8.44295 4.44601C9.4273 3.482 10.613 3 12 3C13.387 3 14.5671 3.47652 15.5403 4.42958C16.5134 5.38263 17 6.53833 17 7.89671C17 8.5759 16.8266 9.35367 16.4799 10.23C16.1331 11.1064 15.7136 11.928 15.2215 12.6948C14.7293 13.4617 14.2427 14.1792 13.7617 14.8474C13.2808 15.5157 12.8725 16.0469 12.5369 16.4413L12 17C11.8658 16.8466 11.6868 16.644 11.4631 16.392C11.2394 16.1401 10.8367 15.6362 10.255 14.8803C9.67338 14.1244 9.16443 13.3905 8.72819 12.6784C8.29194 11.9664 7.89486 11.1612 7.53691 10.2629C7.17897 9.36463 7 8.5759 7 7.89671C7 6.53833 7.48098 5.38811 8.44295 4.44601Z' stroke='%23001551' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative;
}

.c-jobs-search-vertical .keyword-search__input::before,
.c-jobs-search-vertical .location-search-input::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-image: var(--prefix-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* The keyword field's trailing icon slot is empty in this variant. */
.c-jobs-search-vertical .keyword-search__icon-container {
  display: none;
}

/* ─── Locate-me control ─── */
.c-jobs-search-vertical .icon-container {
  display: flex;
  align-items: center;
  background: transparent;
}

/* .c-jobs-search-vertical .location-search__icon-button {
  --locate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 17V22M12 2V7M22 12H17M7 12H2M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z' stroke='%23001551' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.c-jobs-search-vertical .location-search__icon-button::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-image: var(--locate-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
} */

button.location-search__icon-button[data-testid="jobs-search_location_button-locate-me"] {
  --locate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 17V22M12 2V7M22 12H17M7 12H2M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z' stroke='%23001551' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

button.location-search__icon-button[data-testid="jobs-search_location_button-locate-me"]::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-image: var(--locate-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

button.location-search__icon-button[data-testid="jobs-search_location_button-locate-me"] svg {
  display: none;
}

.c-jobs-search-vertical button.location-search__icon-button[data-testid="jobs-search_location_button_clear"],
.c-jobs-search button.location-search__icon-button[data-testid="jobs-search_location_button_clear"] {
  --clear-icon: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708' fill='%23001551'/%3E%3C/svg%3E");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.c-jobs-search-vertical button.location-search__icon-button[data-testid="jobs-search_location_button_clear"]::before,
.c-jobs-search button.location-search__icon-button[data-testid="jobs-search_location_button_clear"]::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-image: var(--clear-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.c-jobs-search-vertical button.location-search__icon-button[data-testid="jobs-search_location_button_clear"] i,
.c-jobs-search button.location-search__icon-button[data-testid="jobs-search_location_button_clear"] i {
  display: none;
}


/* Replaced by ::before; the button's aria-label carries the accessible name. */
.c-jobs-search-vertical .location-search__icon.icon--svg {
  display: none;
}

/* ─── Search button ─── */
.c-jobs-search-vertical__button {
  display: flex;
  align-items: flex-end;
}

.c-jobs-search-vertical__button-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  height: 5.6rem;
  padding: 1.2rem 1.2rem 1.2rem 1.6rem;
  border: 0;
  border-radius: 1rem;
  background: var(--color-white, #fff);
  filter: drop-shadow(0 0 0.5rem rgb(0 0 0 / 0.25));
  font-family: var(--font-primary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
  color: var(--color-navy, #001551);
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Trailing chevron — the vendor button renders label text only. */
.c-jobs-search-vertical__button-search::after {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--chevron-icon) center / contain no-repeat;
  mask: var(--chevron-icon) center / contain no-repeat;
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.c-jobs-search-vertical__button-search:hover,
.c-jobs-search-vertical__button-search:focus-visible {
  background-color: var(--color-warm-gray);
}

.c-jobs-search-vertical__button-search:focus-visible {
  outline: 0.2rem solid var(--color-blue, #0064c8);
  outline-offset: 0.2rem;
}

/* Full width while stacked; intrinsic width once it joins the row. */
@media screen and (min-width: 768px) {
  .c-jobs-search-vertical__button {
    flex-shrink: 0;
  }

  .c-jobs-search-vertical__button-search {
    width: auto;
  }
}

.results-list__item-title:has(.remote) {
  display: flex;
  align-items: center;
  gap: 3px;
}


.location-permission-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  color: black;
  padding: 2rem;
  border-radius: 0.5rem;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  z-index: 1000;
  box-shadow: 0 0 0 999rem rgba(0, 0, 0, 0.5);
  max-width: 90%;
  width: max-content;
}

.location-permission__close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: black;
  font-size: 1.5rem;
  cursor: pointer;
}


.icon-container:has(.location-search__icon-left [data-testid="jobs-search_location_button_clear"]):has(.location-search__icon-right [data-testid="jobs-search_location_button_clear"]) .location-search__icon-left [data-testid="jobs-search_location_button_clear"] {
  display: none;
}


[data-value="create_date"] {
  display: none;
}

/* Focus styles for interactive elements */
/* a:focus-visible, */
button:focus-visible,
/* input:focus-visible, */
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #007acc !important;
    outline-offset: 2px !important;
}

/* Optional: fallback for browsers that don't support :focus-visible */
/* a:focus, */
button:focus,
/* input:focus, */
select:focus,
textarea:focus {
    outline: 3px solid #007acc;
    outline-offset: 2px;
}

/* Hide focus outline if not keyboard navigating */
/* a:focus:not(:focus-visible), */
button:focus:not(:focus-visible),
/* input:focus:not(:focus-visible), */
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
}