/* ==========================================================================
   Careers page — "Job Openings" tab (Recooty job widget) UI overrides

   The widget ships its own runtime-injected styles (goober <style id="_goober">
   appended to <head>), so every rule here is scoped under #recooty-widget or
   #recooty-modal-portal to win on specificity instead of relying on !important.
   !important is used only where the widget itself uses it.

   Palette follows the site: accent #ED3237, headings #313131, body #444,
   muted #767676, borders #e6e6e6, font Montserrat.

   NOTE: bump the ?v= query string on the <link> in careers.php after editing
   (Cloudflare caches CSS aggressively).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tab bar colours ("About Leapswitch" / "Job Openings")

   The theme paints the active/hover tab link #4285F4 (blue) with !important,
   which clashes with the red indicator underneath it. Colour the <h4> labels
   instead — same element the tab text actually lives in — so the bar reads in
   brand colours: grey when idle, red when active.
   -------------------------------------------------------------------------- */

.join-us #sticky .nav-tabs > li > a h4 {
  color: #6b6b6b;
  transition: color 0.2s ease;
}

.join-us #sticky .nav-tabs > li > a:hover h4,
.join-us #sticky .nav-tabs > li > a:focus h4 {
  color: #313131;
}

.join-us #sticky .nav-tabs > li.active > a h4 {
  color: #ED3237;
}

/* --------------------------------------------------------------------------
   1. Wrapper / stacking context
   -------------------------------------------------------------------------- */

#openings .product-wrapper {
  padding: 10px 0 20px;
}

#recooty-widget {
  width: 100%;
}

/* The widget root sets z-index:999999999999, which paints it over the sticky
   tab bar (#sticky.fixed, z-index:20). Reset it to a sane local value. */
#recooty-widget .recooty-customWidget,
#recooty-widget .recooty-customWidgetContainer {
  z-index: 1;
  font-family: 'Montserrat', sans-serif;
  color: #444;
}

#recooty-widget .recooty-customWidgetContainer {
  padding: 0 !important;
  max-width: 1170px !important;
  min-height: 0;
}

#recooty-widget .recooty-customWidget {
  min-height: 0 !important;
  overflow: visible;
}

/* Pagination scrolls back to this anchor div — keep it clear of the sticky nav. */
#recooty-widget .recooty-customWidget > div:first-child {
  scroll-margin-top: 110px;
}

/* --------------------------------------------------------------------------
   2. Section heading ("Open Jobs")
   -------------------------------------------------------------------------- */

#recooty-widget .recooty-customHeading {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.3;
  color: #313131;
  text-align: center;
  margin: 0 0 34px;
  padding-bottom: 14px;
}

#recooty-widget .recooty-customHeading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 3px;
  margin-left: -28px;
  border-radius: 2px;
  background-color: #ED3237;
}

/* --------------------------------------------------------------------------
   3. Filter bar (search + department + location + view toggle)
   -------------------------------------------------------------------------- */

#recooty-widget .recooty-customCategories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  position: relative;
}

/* Flatten the widget's inner filter group (it also carries a stray
   margin-left:54px) so the search field, both selects, the view toggle and the
   reset button are all items of one flex row. That puts the toggle directly
   after "All Locations", and lets the row re-space and wrap on its own when the
   reset button appears. */
#recooty-widget .recooty-customCategories > div:first-child {
  display: contents;
}

/* Row order: search · departments · locations · reset filter · view toggle.
   The reset button keeps its DOM position (straight after the selects) and the
   toggle is pushed behind it — which also holds when the row stacks into a
   column on small screens. */
#recooty-widget .recooty-customCategories .recooty-customOutlinedButton {
  order: 0;
}

#recooty-widget .recooty-customCategories > .recooty-customViewToggleContainer {
  order: 1;
}

/* Search field + selects — one consistent control style */
#recooty-widget .recooty-customCategory,
#recooty-widget .recooty-customSelect {
  height: 44px;
  min-width: 210px !important;
  max-width: 260px !important;
  padding: 10px 34px 10px 38px !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.4 !important;
  color: #444;
  background-color: #fff;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  box-shadow: none;
  margin: 0;
  text-overflow: ellipsis;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Bootstrap 2 sizes bare inputs/selects — keep the search field a text field. */
#recooty-widget .recooty-customCategory {
  cursor: text;
}

#recooty-widget .recooty-customCategory::placeholder {
  color: #9a9a9a;
}

#recooty-widget .recooty-customCategory:hover,
#recooty-widget .recooty-customSelect:hover {
  border-color: #c9c9c9 !important;
}

#recooty-widget .recooty-customCategory:focus,
#recooty-widget .recooty-customSelect:focus {
  border-color: #ED3237 !important;
  box-shadow: 0 0 0 3px rgba(237, 50, 55, 0.12) !important;
}

/* Dropdown: control + native option list.
   Chrome/Firefox honour colour, font and (partly) padding on <option>; the
   selected row needs the background-image hack to override the system blue. */
#recooty-widget .recooty-customSelect {
  accent-color: #ED3237;
  color-scheme: light;
  cursor: pointer;
}

#recooty-widget .recooty-customSelect option {
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #444;
  background-color: #fff;
}

#recooty-widget .recooty-customSelect option:checked,
#recooty-widget .recooty-customSelect option[selected] {
  font-weight: 600;
  color: #fff;
  background-color: #ED3237;
  background-image: linear-gradient(#ED3237, #ED3237);
}

#recooty-widget .recooty-customSelect option:disabled {
  color: #b0b0b0;
}

/* Leading/trailing icons inside the controls */
#recooty-widget .recooty-customCategories svg {
  flex-shrink: 0;
  color: #8a8a8a;
}

/* Reset-filter button */
#recooty-widget .recooty-customCategories .recooty-customOutlinedButton {
  height: 44px;
  margin-top: 0 !important;
  padding: 0 16px !important;
  font-size: 13px;
  font-weight: 600;
  color: #767676;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  white-space: nowrap;
}

#recooty-widget .recooty-customCategories .recooty-customOutlinedButton:hover {
  color: #ED3237;
  border-color: #ED3237;
  outline: none;
}

/* Grid / list view toggle — segmented control sitting in the row itself,
   matched to the field height */
#recooty-widget .recooty-customViewToggleContainer {
  position: static;
  transform: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 0;
  padding: 3px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

#recooty-widget .recooty-customViewToggleButton {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 6px;
  color: #8a8a8a;
}

#recooty-widget .recooty-customViewToggleButton:hover {
  background-color: #f4f4f4;
}

#recooty-widget .recooty-customViewToggleButton > svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   4. Job list / grid
   -------------------------------------------------------------------------- */

/* Grid view (the grid container carries data-current-jobs).
   Capped column widths + justify-content:center so a partly filled last row
   sits centred instead of hugging the left edge. */
#recooty-widget .recooty-customJobContainer[data-current-jobs] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}

/* List view — one centred column */
#recooty-widget .recooty-customJobContainer:not([data-current-jobs]) {
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}

#recooty-widget .recooty-customJobContainer:not([data-current-jobs]) > * {
  width: 100%;
  max-width: 820px;
}

/* --------------------------------------------------------------------------
   5. Job card
   -------------------------------------------------------------------------- */

#recooty-widget .recooty-customCard {
  height: 100%;
  margin-bottom: 0;
  padding: 20px 20px 18px !important;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Lift only where there is a real pointer — on touch the hover state sticks
   after the tap, which reads as a stuck card. */
@media (hover: hover) and (pointer: fine) {
  #recooty-widget .recooty-customCard:hover {
    transform: translateY(-4px) !important;
    border-color: #ED3237 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }
}

/* Touch/press feedback */
#recooty-widget .recooty-customCard:active {
  transform: translateY(0) !important;
  border-color: #ED3237 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#recooty-widget .recooty-customCard:focus-visible {
  outline: 2px solid #ED3237;
  outline-offset: 2px;
}

#recooty-widget .recooty-customCardContent {
  align-items: flex-start;
  gap: 14px;
}

/* Title wrapper: let the title take the free space so the ellipsis works and
   the Apply button never gets squeezed. The widget centres it inside the
   wrapper, which reads as off-centre on wide list rows — flush it left. */
#recooty-widget .recooty-customCardContent > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  text-align: left;
}

#recooty-widget .recooty-customJobCardTitle {
  width: 100%;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: #313131;
}

/* Meta row: code · experience · location */
#recooty-widget .recooty-customTagContainer {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* The separator dots ship with margin:0 -5px and shrink to nothing when the
   row is tight, which jams the labels together. Pin them down. */
#recooty-widget .recooty-customTagContainer > svg {
  flex: 0 0 auto;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  color: #c4c4c4;
}

/* Tags are <p> elements, so `.join-us p { margin-bottom: 1rem }` leaks in. */
#recooty-widget .recooty-customTag {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.4;
  color: #767676;
}

/* --------------------------------------------------------------------------
   6. Buttons (Apply)
   -------------------------------------------------------------------------- */

#recooty-widget .recooty-customPrimaryButton,
#recooty-modal-portal .recooty-customPrimaryButton {
  flex: 0 0 auto;
  gap: 6px;
  padding: 9px 16px !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background-color: #ED3237;
  border: 1px solid #ED3237;
  border-radius: 6px !important;
  white-space: nowrap;
}

#recooty-widget .recooty-customPrimaryButton:hover,
#recooty-modal-portal .recooty-customPrimaryButton:hover {
  color: #fff;
  background-color: #d0272c;
  border-color: #d0272c;
}

#recooty-widget .recooty-customPrimaryButton > svg,
#recooty-modal-portal .recooty-customPrimaryButton > svg {
  width: 14px !important;
  height: 14px !important;
  color: currentColor;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   7. Pagination
   -------------------------------------------------------------------------- */

#recooty-widget .recooty-customPaginationContainer {
  gap: 4px;
  margin: 32px 0 8px;
}

#recooty-widget .recooty-customPaginationButton {
  width: 32px;
  height: 32px;
  margin: 0 2px;
  justify-content: center;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  color: #767676;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#recooty-widget .recooty-customPaginationButton:hover {
  color: #ED3237;
  border-color: #ED3237;
}

#recooty-widget .recooty-customPaginationPage {
  width: 32px;
  height: 32px;
  margin: 0 2px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

#recooty-widget .recooty-customPaginationEllipsis {
  color: #9a9a9a;
}

/* --------------------------------------------------------------------------
   8. "Powered by Recooty" credit
   -------------------------------------------------------------------------- */

/* "Powered by Recooty" credit — hidden.
   Matched by its Recooty link, not by position: the credit is an unclassed
   last child, and :last-child would hit the whole widget container if the
   account ever turns the logo off.
   :has() is unsupported on pre-2022 browsers, where the credit stays visible —
   deliberately, since hiding only the logo would leave "Powered by" stranded. */
#recooty-widget .recooty-customWidget > div:has(> a[href*="recooty.com"]) {
  display: none;
}

/* --------------------------------------------------------------------------
   9. Job description modal (rendered in a portal on <body>)

   Widget structure — only the overlay, shell, close button, description and
   button container carry `recooty-*` classes; everything else is a hashed
   goober class, so the rest is reached structurally:

     .recooty-customModalContent   flex column, the modal shell
       > div:first-child           header  (h1 + .recooty-customCloseButton)
       > div:nth-child(2)          scroll container
           > div                   body row: description | job-facts aside
       > div:last-child            footer  (.recooty-customModalButtonContainer)

   The widget positions the header/footer absolutely and clears them with a
   50px top margin / 80px bottom padding on the body row. That overlaps as soon
   as either bar changes height, so both are put back in flow here and the
   shell's own flex column does the work instead.

   `ls-scrolled` / `ls-at-end` are toggled on the shell by js/careers.js.
   -------------------------------------------------------------------------- */

#recooty-modal-portal .recooty-customModalOverlay {
  background-color: rgba(18, 18, 20, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 24px 16px;
}

/* ---- shell ---- */

#recooty-modal-portal .recooty-customModalContent {
  font-family: 'Montserrat', sans-serif;
  color: #444;
  max-width: 960px;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

#recooty-modal-portal .recooty-customModalContent:focus {
  outline: none;
}

/* ---- header ---- */

#recooty-modal-portal .recooty-customModalContent > div:first-child {
  position: relative; /* was absolute — see note above */
  flex: 0 0 auto;
  gap: 16px;
  /* the bar is width:100% under content-box sizing, so horizontal padding
     pushed the close button past the shell's clipped right edge */
  box-sizing: border-box;
  padding: 18px 22px;
  background: #fff;
  border-radius: 14px 14px 0 0;
  transition: box-shadow 0.2s ease;
}

/* lifts off the page once the description is scrolled */
#recooty-modal-portal .recooty-customModalContent.ls-scrolled > div:first-child {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

#recooty-modal-portal .recooty-customModalContent > div:first-child > h1 {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #313131;
}

/* brand tick beside the job title */
#recooty-modal-portal .recooty-customModalContent > div:first-child > h1::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 18px;
  margin-right: 12px;
  background-color: #ED3237;
  border-radius: 2px;
}

/* the widget hard-codes margin-right:32px as an inline style */
#recooty-modal-portal .recooty-customCloseButton {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-right: 0 !important;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #767676;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

#recooty-modal-portal .recooty-customCloseButton:hover {
  color: #fff;
  background-color: #ED3237;
  border-color: #ED3237;
}

#recooty-modal-portal .recooty-customCloseButton:focus-visible {
  outline: 2px solid #ED3237;
  outline-offset: 2px;
}

/* ---- scroll container ---- */

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2) {
  flex: 1 1 auto;
  min-height: 0;
  /* the widget hides the scrollbar outright, which leaves a long description
     with no hint that it scrolls — give it a slim one back */
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
  /* the widget reserves a gutter on *both* edges; with a visible scrollbar
     that just steals 10px from the left of the content */
  scrollbar-gutter: stable;
}

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2)::-webkit-scrollbar {
  display: block;
  width: 10px;
  height: 10px;
}

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2)::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2)::-webkit-scrollbar-thumb:hover {
  background-color: #bdbdbd;
}

/* ---- body row ---- */

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2) > div {
  align-items: flex-start;
  gap: 28px;
  margin-top: 0; /* header is in flow now */
  padding: 24px 22px 28px;
}

/* ---- description ---- */

#recooty-modal-portal .recooty-customDescriptionModal {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-right: 0 !important; /* the facts card carries the separation now */
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #4d4d4d !important;
}

#recooty-modal-portal .recooty-customDescriptionModal h1,
#recooty-modal-portal .recooty-customDescriptionModal h2,
#recooty-modal-portal .recooty-customDescriptionModal h3,
#recooty-modal-portal .recooty-customDescriptionModal h4,
#recooty-modal-portal .recooty-customDescriptionModal h5,
#recooty-modal-portal .recooty-customDescriptionModal h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #313131 !important;
  margin: 24px 0 8px !important;
}

#recooty-modal-portal .recooty-customDescriptionModal > *:first-child {
  margin-top: 0 !important;
}

#recooty-modal-portal .recooty-customDescriptionModal p {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #4d4d4d !important;
}

#recooty-modal-portal .recooty-customDescriptionModal strong,
#recooty-modal-portal .recooty-customDescriptionModal b {
  font-weight: 600;
  color: #313131;
}

#recooty-modal-portal .recooty-customDescriptionModal a {
  color: #ED3237;
  text-decoration: underline;
}

#recooty-modal-portal .recooty-customDescriptionModal ul,
#recooty-modal-portal .recooty-customDescriptionModal ol {
  margin: 0 0 14px !important;
  padding-left: 20px !important;
}

/* the widget forces Arial on list items only, so bullets read in a different
   face from the paragraphs around them */
#recooty-modal-portal .recooty-customDescriptionModal li {
  margin-bottom: 7px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #4d4d4d !important;
}

#recooty-modal-portal .recooty-customDescriptionModal li::marker {
  color: #ED3237;
}

#recooty-modal-portal .recooty-customDescriptionModal hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #ececec;
}

#recooty-modal-portal .recooty-customDescriptionModal img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ---- job facts aside ---- */

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2) > div > div:last-child {
  flex: 0 0 292px;
  max-width: 292px;
  align-self: flex-start;
  /* the scroll container is the scrolling ancestor, so the card trails the
     description instead of scrolling out of reach */
  position: sticky;
  top: 0;
}

#recooty-modal-portal .recooty-customModalContent > div:nth-child(2) > div > div:last-child > div {
  width: auto !important;
  margin: 0 !important;
  padding: 16px 18px 14px !important;
  font-size: 13px !important;
  background-color: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
}

#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div::before {
  content: 'Job details';
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9a9a9a;
}

/* one fact row: [icon] [label] value */
#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > div {
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  padding: 11px 0;
  font-size: 13px !important;
  line-height: 1.5;
  font-weight: 600;
  color: #313131;
  /* the widget clips these to one line — long locations lost their tail */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  /* a value too wide to sit beside its label drops to the next line rather
     than running past the card edge (salary ranges are the long one) */
  flex-wrap: wrap;
  min-width: 0;
  border-bottom: 1px solid #efefef;
}

#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > div:last-of-type {
  border-bottom: 0;
}

#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > div
  > svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: #ED3237;
}

/* The experience and salary rows nest their icon *inside* the label instead of
   beside it, so they miss the rule above and stay grey while the rest go red. */
#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > div
  > div > svg:first-child {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 4px;
  color: #ED3237;
}

/* The salary value sits in its own span the widget pins to `nowrap` above
   768px — a two-ended range then overflowed the card instead of wrapping. */
#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > div
  > span {
  flex-wrap: wrap;
  min-width: 0;
}

/* the label ("Location:"), with the value as a bare text node beside it */
#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > div
  > div {
  font-weight: 500;
  color: #767676;
}

/* "Report" link at the foot of the card */
#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > a {
  margin: 12px 0 0 !important;
  padding-top: 13px;
  font-size: 12px;
  font-weight: 600;
  color: #9a9a9a;
}

#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > a::after {
  top: 0;
  left: 0;
}

#recooty-modal-portal
  .recooty-customModalContent
  > div:nth-child(2)
  > div
  > div:last-child
  > div
  > a:hover {
  color: #ED3237;
}

/* ---- footer ---- */

#recooty-modal-portal .recooty-customModalContent > div:last-child {
  position: relative; /* was absolute — see note above */
  flex: 0 0 auto;
  gap: 12px;
  box-sizing: border-box; /* width:100% + padding, same as the header */
  padding: 14px 22px;
  background: #fff;
  border-radius: 0 0 14px 14px;
}

/* fades the description into the footer while there is more to read */
#recooty-modal-portal .recooty-customModalContent > div:last-child::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 36px;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#recooty-modal-portal .recooty-customModalContent.ls-at-end > div:last-child::before {
  opacity: 0;
}

#recooty-modal-portal .recooty-customModalButtonContainer {
  gap: 10px;
  align-items: center;
  margin-left: 0;
}

#recooty-modal-portal .recooty-customPrimaryButton {
  box-shadow: 0 6px 16px rgba(237, 50, 55, 0.24);
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

#recooty-modal-portal .recooty-customPrimaryButton:hover {
  box-shadow: 0 8px 20px rgba(237, 50, 55, 0.32);
  transform: translateY(-1px);
}

#recooty-modal-portal .recooty-customPrimaryButton:active,
#recooty-modal-portal .recooty-customOutlinedButton:active {
  transform: translateY(0);
}

#recooty-modal-portal .recooty-customOutlinedButton {
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1;
  color: #767676;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px !important;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#recooty-modal-portal .recooty-customOutlinedButton:hover {
  color: #ED3237;
  border-color: #ED3237;
  outline: none;
}

#recooty-modal-portal .recooty-customPrimaryButton:focus-visible,
#recooty-modal-portal .recooty-customOutlinedButton:focus-visible {
  outline: 2px solid #ED3237;
  outline-offset: 2px;
}

#recooty-modal-portal .recooty-customOutlinedButton > svg {
  width: 14px !important;
  height: 14px !important;
}

/* ---- modal: tablet ---- */

@media (max-width: 900px) {
  /* the widget flips the body row to column-reverse here, so the facts card
     leads — it just needs to stop being a sticky sidebar */
  #recooty-modal-portal .recooty-customModalContent > div:nth-child(2) > div > div:last-child {
    position: static;
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  #recooty-modal-portal .recooty-customModalContent > div:nth-child(2) > div {
    gap: 20px;
  }
}

/* ---- modal: phones ---- */

@media (max-width: 767px) {
  #recooty-modal-portal .recooty-customModalOverlay {
    padding: 12px 10px;
  }

  #recooty-modal-portal .recooty-customModalContent {
    max-height: 92vh;
    border-radius: 12px;
  }

  #recooty-modal-portal .recooty-customModalContent > div:first-child {
    padding: 14px 16px;
    border-radius: 12px 12px 0 0;
  }

  #recooty-modal-portal .recooty-customModalContent > div:first-child > h1 {
    font-size: 16px;
  }

  #recooty-modal-portal .recooty-customModalContent > div:nth-child(2) > div {
    padding: 18px 16px 22px;
  }

  #recooty-modal-portal .recooty-customModalContent > div:last-child {
    padding: 12px 16px;
    border-radius: 0 0 12px 12px;
  }

  /* both actions share the width evenly rather than crowding the left edge */
  #recooty-modal-portal .recooty-customModalButtonContainer {
    width: 100%;
  }

  #recooty-modal-portal .recooty-customPrimaryButton,
  #recooty-modal-portal .recooty-customOutlinedButton {
    flex: 1 1 50%;
    min-height: 42px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #recooty-modal-portal .recooty-customPrimaryButton:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */


@media (max-width: 767px) {
  #recooty-widget .recooty-customHeading {
    font-size: 1.5rem;
    margin-bottom: 26px;
  }

  /* The group is display:contents, so the column stacking belongs on the row
     itself — the fields then stretch to full width as flex items. */
  #recooty-widget .recooty-customCategories {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
  }

  /* 16px keeps iOS Safari from zooming the page when a field takes focus, and
     gives the native picker a legible row size on Android. */
  #recooty-widget .recooty-customCategory,
  #recooty-widget .recooty-customSelect {
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px;
    font-size: 16px !important;
    padding: 10px 38px 10px 40px !important;
    text-overflow: ellipsis;
  }

  #recooty-widget .recooty-customSelect option {
    font-size: 16px;
  }

  #recooty-widget .recooty-customCategories .recooty-customOutlinedButton {
    width: 100%;
    justify-content: center;
  }

  /* Both views collapse to one full-width column of equal-size cards. */
  #recooty-widget .recooty-customJobContainer[data-current-jobs],
  #recooty-widget .recooty-customJobContainer:not([data-current-jobs]) {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #recooty-widget .recooty-customJobContainer:not([data-current-jobs]) > *,
  #recooty-widget .recooty-customJobContainer[data-current-jobs] > * {
    max-width: 100%;
  }

  #recooty-widget .recooty-customCard {
    padding: 16px !important;
  }

  #recooty-widget .recooty-customCardContent {
    align-items: flex-start;
    gap: 12px;
  }

  /* On mobile the widget lets list-view titles wrap — keep the wrap tidy. */
  #recooty-widget .recooty-customJobCardTitle {
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
  }

  #recooty-widget .recooty-customPrimaryButton {
    padding: 8px 12px !important;
    font-size: 12px !important;
    /* comfortable tap target */
    min-height: 36px;
  }

  #recooty-widget .recooty-customTagContainer {
    gap: 5px;
    margin-top: 10px;
  }

  #recooty-widget .recooty-customTag {
    font-size: 12px !important;
  }

  #recooty-widget .recooty-customPaginationContainer {
    margin: 24px 0 4px;
  }
}

/* Very narrow phones: the Apply button gets its own full-width row so a long
   job title never has to share the line with it. */
@media (max-width: 420px) {
  #recooty-widget .recooty-customCardContent {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #recooty-widget .recooty-customPrimaryButton {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   11. Tab bar ("About Leapswitch" / "Job Openings") on small screens

   Bootstrap 2's responsive grid unfloats .span3, so the two tabs stack into
   two full-width text rows. Turn them back into a proper 50/50 segmented bar.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* The theme gives #sticky.fixed width:100% under content-box sizing, so any
     horizontal padding pushed the bar past the right edge of the viewport. */
  .join-us #sticky,
  .join-us #sticky.fixed {
    box-sizing: border-box;
    max-width: 100%;
  }

  .join-us #sticky {
    padding: 10px 12px;
  }

  /* Segmented control: grey track, two equal pills */
  .join-us #sticky .nav-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 4px;
    background-color: #f4f4f5;
    border: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 10px;
  }

  /* first <li> is an empty grid spacer — pointless once the tabs are flexed */
  .join-us #sticky .nav-tabs > li:first-child {
    display: none;
  }

  .join-us #sticky .nav-tabs > li {
    flex: 1 1 50%;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    border-bottom: 0;
  }

  .join-us #sticky .nav-tabs > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* The theme's underline indicator is absolutely positioned against the
     anchor and detaches from the bar once the tabs are flexed — the pill
     itself is the active state here. */
  .join-us #sticky .nav-tabs > li > a::after {
    display: none;
    content: none;
  }

  .join-us #sticky .nav-tabs > li > a h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #6b6b6b;
    transition: color 0.2s ease;
  }

  /* The theme sets `background: transparent !important` on the active/hover
     tab link, so the pill fill has to shout back. */
  .join-us #sticky .nav-tabs > li.active > a {
    background-color: #ED3237 !important;
    box-shadow: 0 1px 3px rgba(237, 50, 55, 0.35);
  }

  .join-us #sticky .nav-tabs > li.active > a h4 {
    color: #fff;
  }

  .join-us #sticky .nav-tabs > li:not(.active) > a:hover h4 {
    color: #313131;
  }

  /* press feedback on the inactive pill */
  .join-us #sticky .nav-tabs > li:not(.active) > a:active {
    background-color: #e8e8ea !important;
  }

  .join-us #sticky .nav-tabs > li:not(.active) > a:active h4 {
    color: #313131;
  }

  .join-us #sticky .nav-tabs > li > a:focus-visible {
    outline: 2px solid #ED3237;
    outline-offset: 2px;
  }

  /* the bar is position:fixed once scrolled past the banner — slimmer there */
  .join-us #sticky.fixed {
    padding: 6px 12px;
  }

  .join-us #sticky.fixed .nav-tabs {
    padding: 3px;
    border-radius: 8px;
  }

  .join-us #sticky.fixed .nav-tabs > li > a {
    min-height: 34px;
    border-radius: 6px;
  }
}

/* --------------------------------------------------------------------------
   12. Pinned site header (Leapswitch logo bar) on small screens

   custom.js pins .navbar with Sticky Kit inside .header, but .header is only
   as tall as the navbar itself, so the bar unpins immediately: the logo
   scrolls away and the careers tab bar takes over the top of the viewport.
   Here the logo bar is pinned for real and the tab bar docks beneath it.
   --ls-nav-h is measured in careers.php (64px fallback until it runs).
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* replaces the space the now-pinned navbar gave up */
  .header {
    padding-top: var(--ls-nav-h, 64px);
  }

  .header .container-fluid.navbar.navbar-static-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 1040;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  }

  /* an opened mobile menu scrolls instead of running past the viewport */
  .header .nav-collapse.mobile-nav.in.collapse {
    max-height: calc(100vh - var(--ls-nav-h, 64px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* the careers tab bar docks below the pinned logo bar */
  .join-us #sticky.fixed {
    top: var(--ls-nav-h, 64px);
    z-index: 1030;
  }
}


/* --------------------------------------------------------------------------
   13. "Values / What we care about" block

   The theme paints every .join-us label red + uppercase, so the section title
   read as a second eyebrow, and .values-list items were 1.75rem disc bullets
   floating in the right column. Restyled as an eyebrow + heading pair beside a
   numbered card list (counters come from the existing <ol> — no new markup).
   -------------------------------------------------------------------------- */

.join-us .values {
  padding-top: 6px;
}

/* left column — red eyebrow, then a proper dark heading */
.join-us .values label {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #ED3237;
}

.join-us .values label + label {
  max-width: 340px;
  margin-bottom: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: #313131;
  text-transform: none;
}

.join-us .values label + label::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background-color: #ED3237;
}

/* right column — numbered cards instead of oversized disc bullets */
.join-us .values ol.values-list {
  counter-reset: ls-value;
  list-style: none;
  margin: 0;
  padding: 4px 0 0;
}

.join-us .values .values-list li {
  counter-increment: ls-value;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
  padding: 16px 20px;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  color: #313131;
  background-color: #fafafa;
  border: 1px solid #ececec;
  border-left: 3px solid #dcdcdc;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease, background-color 0.25s ease;
}

.join-us .values .values-list li:last-child {
  margin-bottom: 0;
}

.join-us .values .values-list li::before {
  content: counter(ls-value, decimal-leading-zero);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ED3237;
  background-color: #fff;
  border: 1px solid #f4c9ca;
  border-radius: 50%;
  transition: color 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .join-us .values .values-list li:hover {
    transform: translateX(4px);
    background-color: #fff;
    border-color: #e4e4e4;
    border-left-color: #ED3237;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }

  .join-us .values .values-list li:hover::before {
    color: #fff;
    background-color: #ED3237;
    border-color: #ED3237;
  }
}

@media (max-width: 767px) {
  /* The divider above this block is <div class="line desktop-content">, and
     .desktop-content is display:none !important on mobile — so the separator
     disappears. Carry it on the section instead. */
  .join-us .values {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #ececec;
  }

  .join-us .values label + label {
    max-width: none;
    font-size: 1.5rem;
  }

  .join-us .values label + label::after {
    margin-top: 14px;
  }

  .join-us .values ol.values-list {
    padding-top: 22px;
  }

  .join-us .values .values-list li {
    gap: 14px;
    padding: 14px 16px;
    font-size: 1rem;
  }

  .join-us .values .values-list li::before {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

/* --------------------------------------------------------------------------
   14. "Why Leapswitch Networks?" intro block

   Same eyebrow treatment as the Values/Open Jobs headings, with the copy
   pulled back to a readable measure instead of the full 1170px container.
   -------------------------------------------------------------------------- */

#aboutus .product-wrapper > label {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #ED3237;
}

/* Full container width, so the copy ends flush with the divider line below it
   rather than stopping short of it on the right. */
#aboutus .product-wrapper > p {
  max-width: none;
  margin-bottom: 1.15rem;
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
}

#aboutus .product-wrapper > p:last-of-type {
  margin-bottom: 0;
}

/* the theme's .line divider is 60px top/bottom — tighten it between blocks */
.join-us .product-wrapper .line,
.join-us .values .line {
  margin: 44px 0;
  border-top-color: #ececec;
}

/* --------------------------------------------------------------------------
   15. "Benefits" block

   Eyebrow + heading pair (the theme painted both labels red), then the six
   perks as equal-height cards. The two rows are flexed so the cards line up
   regardless of how much copy each one carries.
   -------------------------------------------------------------------------- */

.join-us .benefits > label {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: #ED3237;
}

.join-us .benefits > label + label {
  margin-bottom: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: #313131;
  text-transform: none;
}

.join-us .benefits > label + label::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 18px;
  border-radius: 2px;
  background-color: #ED3237;
}

.join-us .benefits .features {
  padding-top: 36px;
}

.join-us .benefits .features .row-fluid {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 24px;
}

.join-us .benefits .features .row-fluid:last-child {
  margin-bottom: 0;
}

/* Bootstrap's clearfix pseudo-elements become flex items here and would eat
   two of the gaps — drop them. */
.join-us .benefits .features .row-fluid::before,
.join-us .benefits .features .row-fluid::after {
  display: none;
}

.join-us .benefits .features .span4 {
  flex: 1 1 0;
  float: none;
  width: auto;
  min-width: 0;
  margin-left: 0;
  padding: 32px 24px 28px;
  background-color: #fff;
  border: 1px solid #ececec;
  border-radius: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* icon in a soft brand-tinted disc */
.join-us .benefits .features .featureicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  padding: 0;
  background-color: #fdf1f1;
  border-radius: 50%;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.join-us .benefits .features .featureicon img {
  height: 46px;
  width: auto;
}

.join-us .benefits .features .featuretitle {
  margin: 0 0 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #313131;
}

.join-us .benefits .features .sub-content {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: #666;
}

@media (hover: hover) and (pointer: fine) {
  .join-us .benefits .features .span4:hover {
    transform: translateY(-6px);
    border-color: #e0e0e0;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
  }

  .join-us .benefits .features .span4:hover .featureicon {
    transform: scale(1.06);
    background-color: #fbe3e4;
  }
}

/* --------------------------------------------------------------------------
   16. About tab — responsive
   -------------------------------------------------------------------------- */

@media (max-width: 979px) {
  .join-us .benefits .features .row-fluid {
    flex-wrap: wrap;
  }

  .join-us .benefits .features .span4 {
    flex: 1 1 45%;
  }
}

@media (max-width: 767px) {
  #aboutus .product-wrapper > p {
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  .join-us .product-wrapper .line,
  .join-us .values .line {
    margin: 32px 0;
  }

  .join-us .benefits > label + label {
    font-size: 1.5rem;
  }

  .join-us .benefits > label + label::after {
    margin-top: 14px;
  }

  .join-us .benefits .features {
    padding-top: 26px;
  }

  .join-us .benefits .features .row-fluid {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
  }

  .join-us .benefits .features .span4 {
    flex: 1 1 auto;
    padding: 24px 20px;
  }

  .join-us .benefits .features .featureicon {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
  }

  .join-us .benefits .features .featureicon img {
    height: 40px;
  }
}

/* --------------------------------------------------------------------------
   17. Anchored dropdown panel (js/careers.js)

   Replaces the OS-drawn <select> popup, which can land off-screen on small
   viewports and ignores page styling. Lives on <body>, positioned under the
   field by the script.
   -------------------------------------------------------------------------- */

.ls-select-panel {
  position: fixed;
  z-index: 2147483000;
  /* the script sets width from the field's rect — border-box keeps the panel
     exactly as wide as the field, padding and border included */
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* inset so the hover/selected pill never touches the panel edge or the
     scrollbar — same on every screen size */
  padding: 8px;
  font-family: 'Montserrat', sans-serif;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  /* slim overlay-style scrollbar, like the one on small screens, instead of the
     chunky desktop default */
  scrollbar-width: thin;
  scrollbar-color: #d0d0d2 transparent;
}

.ls-select-panel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ls-select-panel::-webkit-scrollbar-track {
  background: transparent;
}

.ls-select-panel::-webkit-scrollbar-thumb {
  background-color: #d0d0d2;
  border-radius: 999px;
}

.ls-select-panel::-webkit-scrollbar-thumb:hover {
  background-color: #b4b4b8;
}

.ls-select-option {
  box-sizing: border-box;
  margin: 3px 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #444;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ls-select-option.is-active {
  background-color: #f5f5f6;
  color: #313131;
}

.ls-select-option.is-selected {
  font-weight: 600;
  color: #ED3237;
  background-color: #fdf1f1;
}

.ls-select-option.is-selected.is-active {
  background-color: #fbe3e4;
}

@media (max-width: 767px) {
  .ls-select-option {
    padding: 12px 14px;
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   18. Pinned tab bar on desktop — slimmer than the in-page version

   #sticky.fixed is width:100% under content-box sizing, so it must never take
   horizontal padding; the h4's default block margins are what made the pinned
   bar unnecessarily tall.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .join-us #sticky.fixed {
    box-sizing: border-box;
    max-width: 100%;
  }

  .join-us #sticky.fixed .nav-tabs > li > a {
    padding: 12px 15px;
  }

  .join-us #sticky.fixed .nav-tabs > li > a h4 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   19. "Chat with our experts" CTA (chating.php)

   The gpu-cloud page gives this same .quick-link .btn-secondary button a
   lift-and-invert hover (css/gpu-cloud.css: fills white, text goes red, rises
   2px). On the careers page it had no hover of its own and fell back to
   Bootstrap's default, so the effect is mirrored here.
   -------------------------------------------------------------------------- */

/* Deliberately narrow: this file is only linked from careers.php, .join-us is
   only on that page's container, and .quick-link a.btn-secondary is only the
   chat CTA — so nothing else on this or any other page is touched. */
.join-us .quick-link a.btn-secondary {
  /* White outline, matching the site-wide treatment set in chating.php. This
     rule is more specific than the one there, so it has to mirror it or the
     careers page ends up looking different. */
  border-color: #fff;
  font-weight: 600;
  transition: transform 0.25s, opacity 0.25s, background-color 0.25s,
    border-color 0.25s, color 0.25s;
}

.join-us .quick-link a.btn-secondary:hover,
.join-us .quick-link a.btn-secondary:focus-visible {
  background-color: #fff;
  border-color: #fff;
  /* the band's own background colour, not red */
  color: #413945;
  transform: translateY(-2px);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   20. Careers hero banner on small screens

   responsive.css drops the banner artwork below 979px (`.banner-img {
   background-image: none; background-color: #ED3237 }`), leaving a flat red
   block. Restore the desktop treatment — the .banner-domain photo under its
   50% black scrim — for this page only.
   -------------------------------------------------------------------------- */

@media (max-width: 979px) {
  .join-us .banner-container.banner-img.banner-domain {
    background-color: transparent;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("../img/banner/domain.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
