/* output.css */
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;

@layer theme {

  :root,
  :host {
    --font-sans: 'Inter', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-md: 1rem;
    --text-md--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand-yellow: #ffb800;
    --color-brand-dark: #1e2133;
    --color-brand-card: #292b3e;
  }
}

@layer base {

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  img,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  svg {
    display: inline;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;

      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-24 {
    top: calc(var(--spacing) * 24);
  }

  .top-full {
    top: 100%;
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-50 {
    z-index: 50;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .container {
    width: 100%;

    @media (width >=40rem) {
      max-width: 40rem;
    }

    @media (width >=48rem) {
      max-width: 48rem;
    }

    @media (width >=64rem) {
      max-width: 64rem;
    }

    @media (width >=80rem) {
      max-width: 80rem;
    }

    @media (width >=96rem) {
      max-width: 96rem;
    }
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-12 {
    margin-top: calc(var(--spacing) * 12);
  }

  .mt-auto {
    margin-top: auto;
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .-mr-3 {
    margin-right: calc(var(--spacing) * -3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .max-h-0 {
    max-height: calc(var(--spacing) * 0);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .w-1\/2 {
    width: calc(1 / 2 * 100%);
  }

  .w-1\/3 {
    width: calc(1 / 3 * 100%);
  }

  .w-1\/4 {
    width: calc(1 / 4 * 100%);
  }

  .w-2\/3 {
    width: calc(2 / 3 * 100%);
  }

  .w-3\/4 {
    width: calc(3 / 4 * 100%);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-full {
    width: 100%;
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-5 {
    --tw-translate-x: calc(var(--spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }

  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }

  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }

  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .space-x-1 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
    }
  }

  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }

  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }

  .space-x-6 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
    }
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .rounded {
    border-radius: 0.25rem;
  }

  .rounded-full {
    border-radius: calc(infinity * 1px);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-l-md {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
  }

  .rounded-r-md {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-4 {
    border-top-style: var(--tw-border-style);
    border-top-width: 4px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-\[\#1e2133\] {
    border-color: #1e2133;
  }

  .border-black {
    border-color: var(--color-black);
  }

  .border-blue-100 {
    border-color: var(--color-blue-100);
  }

  .border-blue-600 {
    border-color: var(--color-blue-600);
  }

  .border-brand-yellow {
    border-color: var(--color-brand-yellow);
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-slate-600 {
    border-color: var(--color-slate-600);
  }

  .border-transparent {
    border-color: transparent;
  }

  .border-t-brand-yellow {
    border-top-color: var(--color-brand-yellow);
  }

  .bg-\[\#1e2133\] {
    background-color: #1e2133;
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-700 {
    background-color: var(--color-blue-700);
  }

  .bg-brand-card {
    background-color: var(--color-brand-card);
  }

  .bg-brand-dark {
    background-color: var(--color-brand-dark);
  }

  .bg-brand-yellow {
    background-color: var(--color-brand-yellow);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-800 {
    background-color: var(--color-gray-800);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-\[url\(\'img\/bg_header\.png\'\)\] {
    background-image: url('img/bg_header.png');
  }

  .bg-\[url\(\'img\/bg_banner-int\.png\'\)\] {
    background-image: url('img/bg_banner-int.png');
  }

  .bg-\[url\(\'img\/tips_interview\.jpg\'\)\] {
    background-image: url('img/tips_interview.jpg');
  }

  .bg-repeat-y {
    background-repeat: repeat-y;
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-md {
    font-size: var(--text-md);
    line-height: var(--tw-leading, var(--text-md--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-black {
    font-weight: 900;
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .text-lg {
    font-size: var(--text-lg);
    /* 1.125rem (18px) */
    line-height: var(--text-lg--line-height);
    /* calc(1.75 / 1.125) */
  }

  .text-\[\#1e2133\] {
    color: #1e2133;
  }


  .text-\[\#B45309\] {
    color: #B45309;
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-brand-yellow {
    color: var(--color-brand-yellow);
  }

  .text-brand-dark {
    color: var(--color-brand-dark);
  }

  .text-gray-300 {
    color: var(--color-gray-300);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }

  .text-white {
    color: var(--color-white);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .underline {
    text-decoration-line: underline;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .placeholder-gray-400 {
    &::placeholder {
      color: var(--color-gray-400);
    }
  }

  .placeholder-gray-500 {
    &::placeholder {
      color: var(--color-gray-500);
    }
  }

  .opacity-20 {
    opacity: 20%;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgb(0, 0, 0, 0.04));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }

  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .group-hover\:text-blue-600 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-blue-600);
      }
    }
  }

  .hover\:scale-110 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 110%;
        --tw-scale-y: 110%;
        --tw-scale-z: 110%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }

  .hover\:border-blue-400 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-400);
      }
    }
  }

  .hover\:border-blue-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-blue-500);
      }
    }
  }

  .hover\:bg-black {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-black);
      }
    }
  }

  .hover\:bg-gray-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-50);
      }
    }
  }

  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }

  .hover\:bg-gray-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800);
      }
    }
  }

  .hover\:bg-slate-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-700);
      }
    }
  }

  .hover\:bg-yellow-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-yellow-500);
      }
    }
  }

  .hover\:text-\[\#1e2133\] {
    &:hover {
      @media (hover: hover) {
        color: #1e2133;
      }
    }
  }

  .hover\:text-blue-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-700);
      }
    }
  }

  .hover\:text-blue-800 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-800);
      }
    }
  }

  .hover\:text-brand-yellow {
    &:hover {
      @media (hover: hover) {
        color: var(--color-brand-yellow);
      }
    }
  }

  .hover\:text-gray-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-700);
      }
    }
  }

  .hover\:text-gray-900 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
  }

  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }

  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }

  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }

  .focus\:not-sr-only {
    &:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  .focus\:absolute {
    &:focus {
      position: absolute;
    }
  }

  .focus\:top-4 {
    &:focus {
      top: calc(var(--spacing) * 4);
    }
  }

  .focus\:left-4 {
    &:focus {
      left: calc(var(--spacing) * 4);
    }
  }

  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:ring-4 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  .focus\:ring-blue-200 {
    &:focus {
      --tw-ring-color: var(--color-blue-200);
    }
  }

  .focus\:ring-blue-500 {
    &:focus {
      --tw-ring-color: var(--color-blue-500);
    }
  }

  .focus\:ring-blue-600 {
    &:focus {
      --tw-ring-color: var(--color-blue-600);
    }
  }

  .focus\:ring-brand-dark {
    &:focus {
      --tw-ring-color: var(--color-brand-dark);
    }
  }

  .focus\:ring-gray-400 {
    &:focus {
      --tw-ring-color: var(--color-gray-400);
    }
  }

  .focus\:ring-gray-500 {
    &:focus {
      --tw-ring-color: var(--color-gray-500);
    }
  }

  .focus\:ring-gray-800 {
    &:focus {
      --tw-ring-color: var(--color-gray-800);
    }
  }

  .focus\:ring-yellow-300 {
    &:focus {
      --tw-ring-color: var(--color-yellow-300);
    }
  }

  .focus\:ring-yellow-500 {
    &:focus {
      --tw-ring-color: var(--color-yellow-500);
    }
  }

  .focus\:ring-offset-2 {
    &:focus {
      --tw-ring-offset-width: 2px;
      --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    }
  }

  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }

  .disabled\:opacity-20 {
    &:disabled {
      opacity: 20%;
    }
  }

  .sm\:grid-cols-2 {
    @media (width >=40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .md\:mt-0 {
    @media (width >=48rem) {
      margin-top: calc(var(--spacing) * 0);
    }
  }

  .md\:mr-6 {
    @media (width >=48rem) {
      margin-right: calc(var(--spacing) * 6);
    }
  }

  .md\:mb-0 {
    @media (width >=48rem) {
      margin-bottom: calc(var(--spacing) * 0);
    }
  }

  .md\:flex {
    @media (width >=48rem) {
      display: flex;
    }
  }

  .md\:hidden {
    @media (width >=48rem) {
      display: none;
    }
  }

  .md\:w-1\/2 {
    @media (width >=48rem) {
      width: calc(1 / 2 * 100%);
    }
  }

  .md\:w-80 {
    @media (width >=48rem) {
      width: calc(var(--spacing) * 80);
    }
  }

  .md\:w-auto {
    @media (width >=48rem) {
      width: auto;
    }
  }

  .md\:grid-cols-2 {
    @media (width >=48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .md\:grid-cols-4 {
    @media (width >=48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .md\:flex-row {
    @media (width >=48rem) {
      flex-direction: row;
    }
  }

  .md\:items-start {
    @media (width >=48rem) {
      align-items: flex-start;
    }
  }

  .md\:border-r {
    @media (width >=48rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }

  .md\:border-b-0 {
    @media (width >=48rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }

  .md\:text-6xl {
    @media (width >=48rem) {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }

  .lg\:col-span-1 {
    @media (width >=64rem) {
      grid-column: span 1 / span 1;
    }
  }

  .lg\:col-span-2 {
    @media (width >=64rem) {
      grid-column: span 2 / span 2;
    }
  }

  .lg\:grid-cols-3 {
    @media (width >=64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

.bg-stripes {
  background-image: repeating-linear-gradient(to right, transparent, transparent 79px, rgba(0, 0, 0, 0.03) 79px, rgba(0, 0, 0, 0.03) 80px);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1em;
  padding-right: 2.5rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

:focus-visible {
  outline: 3px solid #1e2133 !important;
  outline-offset: 2px !important;
}

.job-card-active {
  border-color: #1e2133 !important;
  border-width: 3px !important;
  background-color: #f8fafc !important;
}

article[role="button"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 33, 51, 0.4);
}

article[role="button"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

article[role="button"]:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-color: #1e2133 !important;
}

article[role="button"]:hover h3 {
  color: #1e2133;
}

article[role="button"]:active {
  transform: translateY(-2px) scale(0.99);
}

#popular-keywords button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#popular-keywords button:hover {
  background-color: #1e2133;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#popular-keywords button:active {
  transform: scale(0.95);
}

#accessibility-menu {
  position: relative;
  z-index: 100;
}

.acc-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1e2133;
  color: white;
  fill: #FFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.acc-btn:hover {
  transform: scale(1.1);
}

.acc-panel {
  position: absolute;
  top: 50px;
  right: 0;
  width: 220px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 16px;
  display: none;
  border: 1px solid #eee;
}

.acc-panel.show {
  display: block;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

.translate-x-5 {
  transform: translateX(1.25rem);
}

.translate-x-0 {
  transform: translateX(0);
}

.acc-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.acc-option:last-child {
  border-bottom: none;
}

body.dark {
  background-color: #0f172a;
  color: #f1f5f9;
}

body.dark nav,
body.dark header,
body.dark footer,
body.dark .bg-white,
body.dark section[role="search"],
body.dark input,
body.dark select {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.dark input::placeholder {
  color: #94a3b8 !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark .text-2xl.font-bold,
body.dark .font-bold.text-gray-900 {
  color: #f8fafc !important;
}

body.dark .text-gray-700,
body.dark .text-gray-800 {
  color: #cbd5e1 !important;
}

body.dark .text-brand-dark {
  color: #FFF !important;
}

body.dark .bg-gray-50 {
  background-color: #0f172a !important;
}

body.dark article[role="button"] {
  background-color: #1e293b;
  border-color: #475569;
}

body.dark .acc-panel {
  background: #1e293b;
  color: white;
  border-color: #334155;
}

body.dark .acc-option {
  border-color: #334155;
}

body.high-contrast {
  background-color: #ffffff !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast p,
body.high-contrast span,
body.high-contrast i,
body.high-contrast label,
body.high-contrast footer,
body.high-contrast .text-gray-700,
body.high-contrast .text-gray-800,
body.high-contrast .text-gray-900,
body.high-contrast .text-white {
  color: #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast nav,
body.high-contrast header,
body.high-contrast section,
body.high-contrast footer,
body.high-contrast div,
body.high-contrast article,
body.high-contrast .bg-white,
body.high-contrast .bg-gray-50,
body.high-contrast .bg-brand-dark {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.high-contrast .bg-stripes {
  display: none !important;
}

body.high-contrast button,
body.high-contrast a,
body.high-contrast select,
body.high-contrast input {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body.high-contrast input::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

body.high-contrast .text-gray-400,
body.high-contrast .text-gray-500,
body.high-contrast .text-gray-600 {
  color: #000000 !important;
}

body.high-contrast button:hover,
body.high-contrast a:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast button:hover i,
body.high-contrast a:hover i {
  color: #ffffff !important;
}

body.high-contrast #accessibility-menu .acc-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.high-contrast #accessibility-menu .acc-btn:hover i {
  color: #ffffff !important;
}

body.high-contrast .acc-panel {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .relative.inline-flex {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  height: 24px !important;
  width: 48px !important;
  padding: 2px !important;
  box-shadow: none !important;
}

body.high-contrast span[id*="-toggle"] {
  background-color: #000000 !important;
  height: 16px !important;
  width: 16px !important;
  border-radius: 50% !important;
  top: 0 !important;
}

body.high-contrast .skeleton,
body.high-contrast .animate-pulse {
  background: #ffffff !important;
  border: 1px dashed #000000 !important;
  animation: none !important;
}

body.high-contrast .bg-gray-100,
body.high-contrast .bg-gray-200 {
  background-color: #ffffff !important;
  border: 1px solid #000 !important;
}

body.dark .bg-gray-100 {
  background-color: #334155 !important;
}

body.dark .bg-gray-200 {
  background-color: #475569 !important;
}

body.dark .bg-gray-800 {
  background-color: #334155 !important;
}

body.dark .animate-pulse {
  opacity: 0.5;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes float-1 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-10px, -15px);
  }

  50% {
    transform: translate(15px, -5px);
  }

  75% {
    transform: translate(-5px, 10px);
  }
}

@keyframes float-2 {

  0%,
  100% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(15px, 10px);
  }

  66% {
    transform: translate(-15px, -10px);
  }
}

.animate-float-1 {
  animation: float-1 8s ease-in-out infinite;
}

.animate-float-2 {
  animation: float-2 10s ease-in-out infinite;
}

#job-description .job-wrapper {
  background: transparent;
}

#job-description .job-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

#job-description .job-title,
#job-description .job-info,
#job-description .job-sup {
  display: none !important;
}

#job-description .job-content {
  font-size: 1rem;
  line-height: 1.7;
}

#job-description h1,
#job-description h2,
#job-description h3,
#job-description h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #1e2133;
}

#job-description p {
  margin-bottom: 1.25rem;
}

#job-description ul,
#job-description ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

#job-description li {
  margin-bottom: 0.5rem;
  list-style-type: disc;
}

body.dark #job-description h1,
body.dark #job-description h2,
body.dark #job-description h3,
body.dark #job-description h4 {
  color: #f8fafc;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

@property --tw-tracking {
  syntax: "*";
  inherits: false;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-blur {
  syntax: "*";
  inherits: false;
}

@property --tw-brightness {
  syntax: "*";
  inherits: false;
}

@property --tw-contrast {
  syntax: "*";
  inherits: false;
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}

@property --tw-invert {
  syntax: "*";
  inherits: false;
}

@property --tw-opacity {
  syntax: "*";
  inherits: false;
}

@property --tw-saturate {
  syntax: "*";
  inherits: false;
}

@property --tw-sepia {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}

@property --tw-duration {
  syntax: "*";
  inherits: false;
}

@property --tw-ease {
  syntax: "*";
  inherits: false;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {

    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

.text-\[\#FEB825\] {
  color: #FEB825;
}

/* Arbitrary classes for cookie policy page */
.bg-\[\#fbbf24\] {
  background-color: #fbbf24;
}

.text-\[\#1e2133\] {
  color: #1e2133;
}

.hover\:text-\[\#1e2133\]:hover {
  color: #1e2133;
}

.bg-\[\#fffdf5\] {
  background-color: #fffdf5;
}

.border-\[\#fde6b3\] {
  border-color: #fde6b3;
}

.text-\[1\.7rem\] {
  font-size: 1.7rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.bg-\[\#fff5e6\] {
  background-color: #fff5e6;
}

.text-\[\#ea580c\] {
  color: #ea580c;
}

.bg-\[\#dcfce3\] {
  background-color: #dcfce3;
}

.text-\[\#16a34a\] {
  color: #16a34a;
}

/* Missing Layout Utilities */
.w-full {
  width: 100%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.sticky {
  position: sticky;
}

.top-28 {
  top: 7rem;
}

.scroll-mt-28 {
  scroll-margin-top: 7rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-3 {
  gap: 0.75rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.opacity-60 {
  opacity: 0.6;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-5xl {
  border-radius: 5rem;
}

@media (min-width: 768px) {
  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:flex-row {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .lg\:w-1\/4 {
    width: 25%;
  }

  .lg\:w-3\/4 {
    width: 75%;
  }

  .lg\:gap-24 {
    gap: 6rem;
  }
}

/* Custom List Styling */
.cookie-list {
  list-style: none;
  padding: 0;
}

.cookie-list li {
  display: flex;
  align-items: flex-start;
  color: #4b5563;
  line-height: 1.625;
  margin-bottom: 1rem;
}

.cookie-list li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #FEB825;
  border-radius: 50%;
  margin-top: 10px;
  margin-right: 16px;
  flex-shrink: 0;
}

.px-30 {
  padding-inline: 10rem;
}

.min-h-\[82vh\] {
  min-height: 82vh;
}

.text-\[\#FFB800\] {
  color: #FFB800;
}

.gap-16 {
  gap: 4rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.space-y-5 {
  margin-top: 2rem;
}

.bg-\[\#f7f7f7\] {
  background-color: #f7f7f7;
}

.bg-\[\#FFB800\] {
  background-color: #FFB800;
}

.cursor-pointer {
  cursor: pointer;
}

/* Back to Top */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1e2133;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(30, 33, 51, 0.3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #ffb800;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 184, 0, 0.4);
}

.gap-5 {
  gap: 1.25rem;
}

.px-6 {
  padding-inline: 1.5rem;
}

.py-6 {
  padding-block: 1.5rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.bg-\[\#f4f5f9\] {
  background-color: #f4f5f9;
}

.border-\[\#e6e8ee\] {
  border-color: #e6e8ee;
}

.text-\[\#1e2133\] {
  color: #1e2133;
}

.transition-transform {
  transition-property: transform;
}

.duration-300 {
  transition-duration: 0.3s;
}

.rotate-180 {
  transform: rotate(180deg);
}

.min-w-\[40px\] {
  min-width: 40px;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.rounded-full {
  border-radius: 9999px;
}

.bg-white {
  background-color: #fff;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gap-2 {
  gap: 0.5rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.text-white {
  color: #fff;
}

.text-2xl {
  font-size: 1.5rem;
}

.font-bold {
  font-weight: bold;
}

.min-w-\[20px\] {
  min-width: 20px;
}

.min-h-\[20px\] {
  min-height: 20px;
}

/* .text-md {
    font-size: 14px;
}
.text-sm {
  font-size: 0.875rem;
} */
.text-red-500 {
  color: #FF0000;
}

@media (min-width: 768px) {
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:space-y-0 {
    margin-top: 0;
  }

  .md\:w-auto {
    width: auto;
  }
}

.space-y-8 {
  margin-top: 2rem;
}

.bg-\[\#F8FAFC\] {
  background-color: #F8FAFC;
}

.border-\[\#F1F5F9\] {
  border-color: #F1F5F9;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.border-\[\#FFB800\] {
  border-color: #FFB800;
}

.shadow-yellow {
  box-shadow: 6px 6px 0px 0px #FFB800;
}

.bottom-4 {
  bottom: 1rem;
}

.left-4 {
  left: 1rem;
}

.right-4 {
  right: 1rem;
}

.min-h-\[500px\] {
  min-height: 500px;
}

.object-cover {
  object-fit: cover;
}

.bg-\[\#2a2d42\] {
  background-color: #2a2d42;
}

.border-\[\#FFFFFF1A\] {
  border-color: #FFFFFF1A;
}

/* body.dark #tit-faq  {
  color: #2a2d42 !important;
} */
body.dark #faq-content button span {
  color: #FFF !important;
}

body.dark i {
  color: #fff !important;
}

body.dark i::before {
  stroke: #fff !important;
}

body.dark svg {
  fill: #fff !important;
}

body.dark section.bg-\[\#F8FAFC\] {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.dark .number-ans {
  color: #fff !important;
}
/* components/search/search.css */
/* Search Component Styles */

.job-card-active {
  border-color: #2563eb !important; /* blue-600 */
  background-color: #f0f7ff !important; /* blue-50 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Global Card Hover Animation - Applies to Light, Dark, and High Contrast */
#job-grid a.block, 
#job-list article {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
}

#job-grid a.block:hover, 
#job-list article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* List View Specific Hover */
#job-grid.flex-col a.block:hover {
    transform: translateX(4px) !important;
}

/* Custom Select Styling */
.custom-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
    vertical-align: middle !important;
    min-width: 65px !important;
}

/* Skeleton Animation Override for High Contrast */
body.high-contrast .animate-pulse {
  animation: none !important;
  background: #ffffff !important;
  border: 1px dashed #000000 !important;
}

/* Dark Mode Overrides for Search */
body.dark .job-card-active {
  background-color: #1e293b !important;
  border-color: #3b82f6 !important;
}

body.dark article[role="button"]:hover,
body.dark #job-grid a.block:hover {
  border-color: #3b82f6 !important;
}

/* High Contrast Adjustments are handled primarily in theme-switcher.css */

/* GetMeHired job card (gmh-build/search-ux.js) - plain CSS, so it doesn't depend on the precompiled Tailwind. */
.gmh-card { display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .15s, box-shadow .15s, transform .15s; color:#1e2133; text-decoration:none; position:relative; }
.gmh-card:hover, .gmh-card:focus-visible { border-color:#ffb800; box-shadow:0 8px 24px rgba(16,24,40,.08); transform:translateY(-1px); outline:none; }
.gmh-card:focus-visible { box-shadow:0 0 0 3px #1e2133; }
.gmh-card.job-card-active { border-color:#1e2133; box-shadow:0 0 0 2px #1e2133; }
.gmh-card__top { display:flex; align-items:flex-start; gap:12px; }
.gmh-logo { position:relative; flex:0 0 44px; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px; overflow:hidden; background:#1e2133; }
.gmh-logo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:4px; box-sizing:border-box; }
.gmh-card__head { flex:1; min-width:0; }
.gmh-card__title { font-size:1.05rem; font-weight:700; line-height:1.3; margin:0 0 2px; color:#1e2133; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gmh-card__company { margin:0; font-size:.9rem; color:#4b5563; }
.gmh-card__facts { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.9rem; color:#1f2937; }
.gmh-card__facts li { display:flex; align-items:center; gap:6px; }
.gmh-ico { font-size:.85rem; width:1em; text-align:center; color:#6b7280; }
.gmh-muted { color:#6b7280; }
.gmh-chips { display:flex; flex-wrap:wrap; gap:6px; }
.gmh-chip { font-size:.78rem; font-weight:600; padding:3px 10px; border-radius:999px; background:#fff5d6; color:#5c4400; }
.gmh-chip--alt { background:#eef2ff; color:#2f3a8f; }
.gmh-card__foot { display:flex; justify-content:space-between; gap:8px; font-size:.8rem; color:#6b7280; border-top:1px solid #f1f2f4; padding-top:10px; margin-top:auto; }
.gmh-closes { color:#9a3412; font-weight:600; }
.gmh-save { flex:0 0 auto; color:#9ca3af; padding:4px; border-radius:6px; }
.gmh-save:focus-visible { outline:2px solid #1e2133; }
.gmh-results-heading { font-weight:600; }
.gmh-live-count { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#1e2133; background:#fff5d6; border-radius:999px; padding:6px 14px; margin:0 auto 18px; }
.gmh-live-count::before { content:""; width:8px; height:8px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.2); }
body.dark .gmh-card { background:#1f2233; border-color:#33374d; color:#f3f4f6; }
body.dark .gmh-card__title { color:#f9fafb; } body.dark .gmh-card__company, body.dark .gmh-card__facts, body.dark .gmh-card__foot { color:#cbd5e1; }
body.dark .gmh-live-count { background:#33374d; color:#f9fafb; }

/* assets/gmh.css */
/* GetMeHired design layer (gmh-build/redesign.js). Plain CSS: the precompiled Tailwind is partial. */
:root { --gmh-ink:#1e2133; --gmh-ink-2:#292b3e; --gmh-yellow:#ffb800; --gmh-yellow-soft:#fff5d6; --gmh-line:#e5e7eb; --gmh-muted:#5b6170; --gmh-bg:#f6f7f9; --gmh-radius:14px; }
.gmh-wrap { max-width:1200px; margin:0 auto; padding:0 16px; }
.gmh-ico { flex:0 0 auto; width:15px; height:15px; color:#6b7280; }
.gmh-home { background:var(--gmh-bg); }
.gmh-hero { background:var(--gmh-ink); color:#fff; padding:40px 0 36px; position:relative; overflow:hidden; }
.gmh-hero::after { content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,184,0,.22), rgba(255,184,0,0) 70%); pointer-events:none; }
.gmh-hero .gmh-wrap { position:relative; z-index:1; }
.gmh-hero h1 { font-size:clamp(1.9rem, 4.2vw, 3rem); line-height:1.1; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; max-width:760px; }
.gmh-hero h1 span { color:var(--gmh-yellow); }
.gmh-hero__lead { color:#cfd3dc; font-size:1.05rem; margin:0 0 22px; max-width:640px; }
.gmh-hero .gmh-live-count { margin:0 0 14px; background:rgba(255,255,255,.08); color:#fff; }
.gmh-searchbar { display:flex; gap:8px; background:#fff; border-radius:12px; padding:8px; box-shadow:0 12px 32px rgba(0,0,0,.18); max-width:900px; }
.gmh-searchbar__field { flex:1; display:flex; align-items:center; gap:10px; padding:0 12px; min-width:0; color:#6b7280; }
.gmh-searchbar__field + .gmh-searchbar__field { border-left:1px solid var(--gmh-line); }
.gmh-searchbar input { width:100%; border:0; outline:0; font-size:1rem; color:var(--gmh-ink); padding:12px 0; background:transparent; }
.gmh-searchbar input::placeholder { color:#7a808c; }
.gmh-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--gmh-yellow); color:var(--gmh-ink); font-weight:700; border-radius:10px; padding:12px 22px; border:0; cursor:pointer; text-decoration:none; white-space:nowrap; }
.gmh-btn:hover { background:#f0ad00; }
.gmh-btn:focus-visible, .gmh-searchbar input:focus-visible { outline:3px solid #1e2133; outline-offset:2px; }
.gmh-popular { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; font-size:.9rem; color:#cfd3dc; }
.gmh-popular a { color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:5px 12px; text-decoration:none; }
.gmh-popular a:hover, .gmh-popular a:focus-visible { border-color:var(--gmh-yellow); color:var(--gmh-yellow); outline:none; }
.gmh-section { padding:36px 0 8px; }
.gmh-section:last-child { padding-bottom:40px; }
.gmh-section__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.gmh-section__head h2 { font-size:1.45rem; font-weight:800; color:var(--gmh-ink); margin:0; letter-spacing:-.01em; }
.gmh-section__head p { margin:4px 0 0; color:var(--gmh-muted); }
.gmh-more { display:inline-flex; align-items:center; gap:6px; color:var(--gmh-ink); font-weight:700; text-decoration:none; white-space:nowrap; }
.gmh-more:hover { text-decoration:underline; }
.gmh-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.gmh-tile { background:#fff; border:1px solid var(--gmh-line); border-radius:var(--gmh-radius); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s; }
.gmh-tile:hover { border-color:var(--gmh-yellow); box-shadow:0 8px 24px rgba(16,24,40,.07); }
.gmh-tile__head { display:flex; align-items:center; gap:12px; }
.gmh-tile__icon { flex:0 0 44px; height:44px; border-radius:12px; background:var(--gmh-yellow-soft); color:#8a6200; display:flex; align-items:center; justify-content:center; }
.gmh-tile h3 { margin:0; font-size:1.1rem; font-weight:800; }
.gmh-tile h3 a { color:var(--gmh-ink); text-decoration:none; }
.gmh-tile h3 a::after { content:" \2192"; color:#8a6200; }
.gmh-tile h3 a:hover { text-decoration:underline; }
.gmh-tile p { margin:0; color:var(--gmh-muted); font-size:.93rem; }
.gmh-tile__roles { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.gmh-tile__roles a { font-size:.84rem; color:var(--gmh-ink); background:var(--gmh-bg); border-radius:999px; padding:4px 10px; text-decoration:none; }
.gmh-tile__roles a:hover, .gmh-tile__roles a:focus-visible { background:var(--gmh-yellow-soft); }
.gmh-tile--alt { background:var(--gmh-ink-2); border-color:var(--gmh-ink-2); color:#fff; }
.gmh-tile--alt h3 a, .gmh-tile--alt p { color:#e5e7eb; } .gmh-tile--alt h3 a { color:#fff; }
.gmh-tile--alt .gmh-tile__icon { background:rgba(255,184,0,.16); color:var(--gmh-yellow); }
.gmh-tile--alt .gmh-tile__roles a { background:rgba(255,255,255,.08); color:#fff; }
.gmh-results { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.gmh-results--list { grid-template-columns:1fr; gap:10px; }
.gmh-results > .col-span-full { grid-column:1 / -1; }
/* Fixed badge column: with "auto" it was wide on cards with a "Closes in" badge and empty on the rest, so the title, bookmark and location columns shifted card to card. */
.gmh-results--list .gmh-card { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 9.5rem; align-items:center; gap:8px 20px; }
.gmh-results--list .gmh-card__foot .gmh-badge, .gmh-results--list .gmh-card__foot > * { white-space:nowrap; }
.gmh-results--list .gmh-card__foot { border-top:0; padding-top:0; margin:0; flex-direction:column; align-items:flex-end; }
.gmh-results--list .gmh-chips { display:none; }
.gmh-skel { min-height:168px; background:#eef0f3; animation:gmh-pulse 1.4s ease-in-out infinite; }
@keyframes gmh-pulse { 0%, 100% { opacity:1; } 50% { opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .gmh-skel { animation:none; } .gmh-card, .gmh-tile { transition:none; } }
.gmh-employers { display:flex; flex-wrap:wrap; gap:8px; }
.gmh-employers a { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--gmh-line); border-radius:999px; padding:6px 14px 6px 6px; color:var(--gmh-ink); text-decoration:none; font-weight:600; font-size:.9rem; }
.gmh-employers a:hover, .gmh-employers a:focus-visible { border-color:var(--gmh-yellow); outline:none; }
.gmh-employers .gmh-logo { flex-basis:28px; width:28px; height:28px; font-size:13px; border-radius:50%; }
.gmh-employers small { color:var(--gmh-muted); font-weight:500; }
.gmh-logo img:not(.is-loaded) { visibility:hidden; }
@media (max-width: 640px) { .gmh-toolbar__controls > .gmh-toolbar__group:last-child { display:none; } }
/* Search page */
.gmh-searchhead { background:var(--gmh-ink); padding:22px 0; }
.gmh-searchhead h1 { color:#fff; font-size:1.5rem; font-weight:800; margin:0 0 12px; }
.gmh-searchhead .gmh-searchbar { box-shadow:none; max-width:none; }
.gmh-layout { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:24px; padding-top:22px; padding-bottom:40px; align-items:start; }
.gmh-searchpage { background:var(--gmh-bg); }
.gmh-filters { background:#fff; border:1px solid var(--gmh-line); border-radius:var(--gmh-radius); padding:16px; position:sticky; top:88px; display:flex; flex-direction:column; gap:12px; }
.gmh-filters__head { display:flex; align-items:center; justify-content:space-between; }
.gmh-filters__head h2 { display:flex; align-items:center; gap:8px; margin:0; font-size:1rem; font-weight:800; color:var(--gmh-ink); }
.gmh-field { display:flex; flex-direction:column; gap:4px; }
.gmh-field label, .gmh-toolbar label { font-size:.78rem; font-weight:700; color:var(--gmh-muted); text-transform:uppercase; letter-spacing:.04em; }
.gmh-select { width:100%; border:1px solid var(--gmh-line); background:#fff; color:var(--gmh-ink); border-radius:9px; padding:9px 10px; font-size:.92rem; }
.gmh-select:focus-visible { outline:3px solid #1e2133; outline-offset:1px; }
.gmh-link { background:none; border:0; color:#1d4ed8; font-weight:600; font-size:.88rem; cursor:pointer; padding:0; }
.gmh-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-bottom:14px; }
.gmh-toolbar__info { font-weight:700; color:var(--gmh-ink); }
.gmh-toolbar__controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.gmh-toolbar__group { display:flex; align-items:center; gap:6px; }
.gmh-toolbar .gmh-select { width:auto; padding:7px 8px; }
.gmh-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--gmh-line); border-radius:9px; background:#fff; color:var(--gmh-ink); cursor:pointer; }
.gmh-seg { display:inline-flex; background:#e9ebef; border-radius:10px; padding:3px; }
.gmh-seg button { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--gmh-muted); font-weight:600; font-size:.85rem; padding:6px 10px; border-radius:8px; cursor:pointer; }
.gmh-seg button.is-active { background:#fff; color:var(--gmh-ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
.gmh-pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:20px; }
#pagination-controls-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
#pagination-controls-bottom button { min-width:38px; height:38px; padding:0 10px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; }
#pagination-controls-bottom span { padding:0 4px; color:var(--gmh-muted); }
.gmh-pager label { white-space:nowrap; }
.gmh-pager .gmh-select { width:auto; }
.gmh-fact-ico { flex:0 0 44px; height:44px; border-radius:10px; background:var(--gmh-yellow); color:var(--gmh-ink); display:flex; align-items:center; justify-content:center; margin-right:16px; }
#pagination-controls-top { display:none; }
.gmh-filters-toggle { display:none; }
@media (max-width: 1023px) {
  .gmh-tiles, .gmh-results { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gmh-layout { grid-template-columns:minmax(0, 1fr); gap:14px; }
  .gmh-filters { position:static; display:none; }
  .gmh-filters.is-open { display:flex; }
  .gmh-filters-toggle { display:inline-flex; }
}
@media (max-width: 640px) {
  .gmh-tiles, .gmh-results { grid-template-columns:1fr; }
  .gmh-searchbar { flex-direction:column; }
  .gmh-searchbar__field + .gmh-searchbar__field { border-left:0; border-top:1px solid var(--gmh-line); }
  .gmh-hero { padding:28px 0; }
  .gmh-results--list .gmh-card { grid-template-columns:1fr; }
  .gmh-results--list .gmh-card__foot { flex-direction:row; align-items:center; }
  .gmh-section__head { flex-direction:column; align-items:flex-start; gap:4px; }
}
body.dark .gmh-home, body.dark .gmh-searchpage { background:#141623; }
body.dark .gmh-tile, body.dark .gmh-filters, body.dark .gmh-employers a, body.dark .gmh-select, body.dark .gmh-iconbtn { background:#1f2233; border-color:#33374d; color:#f3f4f6; }
body.dark .gmh-tile h3 a, body.dark .gmh-section__head h2, body.dark .gmh-filters__head h2, body.dark .gmh-toolbar__info, body.dark .gmh-more { color:#f9fafb; }
body.dark .gmh-tile p, body.dark .gmh-section__head p { color:#cbd5e1; }
body.dark .gmh-tile__roles a { background:#2a2e42; color:#f3f4f6; }

/* Job page */
.gmh-detailpage { background:var(--gmh-bg); padding-bottom:40px; }
.gmh-detailhead { background:var(--gmh-ink); color:#fff; padding:18px 0 26px; }
.gmh-back { display:inline-flex; align-items:center; gap:6px; color:#cfd3dc; text-decoration:none; font-size:.9rem; margin-bottom:14px; }
.gmh-back:hover, .gmh-back:focus-visible { color:#fff; text-decoration:underline; }
.gmh-detailhead__main, .gmh-detailhead__loading { display:flex; align-items:flex-start; gap:18px; }
.gmh-detailhead__main[hidden], .gmh-detailhead__loading[hidden] { display:none; }
.gmh-detailhead__text { flex:1; min-width:0; }
.gmh-detailhead h1 { font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.15; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; }
.gmh-detailhead__company { margin:0 0 12px; font-size:1.05rem; }
.gmh-detailhead__company a { color:var(--gmh-yellow); font-weight:700; text-decoration:none; }
.gmh-detailhead__company a:hover { text-decoration:underline; }
.gmh-detailhead__cta { flex:0 0 auto; align-self:center; }
.gmh-logo--lg { flex-basis:64px; width:64px; height:64px; font-size:26px; border-radius:14px; }
.gmh-logo--lg img { border-radius:14px; padding:6px; }
.gmh-facts { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.gmh-facts li { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border-radius:999px; padding:5px 12px; font-size:.88rem; color:#e5e7eb; }
.gmh-facts .gmh-ico { color:#cfd3dc; }
.gmh-facts li.gmh-closes { background:rgba(255,184,0,.16); color:var(--gmh-yellow); }
.gmh-btn--lg { padding:14px 24px; font-size:1.02rem; }
.gmh-btn .gmh-ico { color:currentColor; }
.gmh-btn--ghost { background:#fff; border:1px solid var(--gmh-line); color:var(--gmh-ink); width:100%; }
.gmh-btn--ghost:hover { background:var(--gmh-bg); }
.gmh-skelline { display:block; height:18px; width:320px; max-width:60vw; border-radius:6px; background:rgba(255,255,255,.12); margin:6px 0 10px; }
.gmh-skelline--short { width:180px; }
.gmh-detailhead .gmh-skel { background:rgba(255,255,255,.12); animation:none; }
.gmh-detailgrid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; align-items:start; margin-top:20px; }
.gmh-detailgrid[hidden] { display:none; }
.gmh-panel { background:#fff; border:1px solid var(--gmh-line); border-radius:var(--gmh-radius); padding:22px; }
.gmh-panel--tint { background:var(--gmh-yellow-soft); border-color:#f3e2a6; }
.gmh-panel--tint p { margin:0; font-size:.92rem; color:#3d3a2f; }
.gmh-panel--tint a { color:var(--gmh-ink); font-weight:700; }
.gmh-panel__title { font-size:1.2rem; font-weight:800; color:var(--gmh-ink); margin:0 0 12px; }
.gmh-panel__title--sm { font-size:1rem; margin-bottom:10px; }
.gmh-detailside { display:flex; flex-direction:column; gap:14px; position:sticky; top:88px; }
.gmh-applybox { display:flex; flex-direction:column; gap:10px; }
.gmh-applybox .gmh-btn--lg { width:100%; }
.gmh-applybox__label { margin:0; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gmh-muted); }
.gmh-applybox__pay { margin:0 0 4px; font-size:1.35rem; font-weight:800; color:var(--gmh-ink); }
.gmh-applybox__small { margin:0; font-size:.82rem; color:var(--gmh-muted); }
.gmh-note { margin:0; padding:12px; background:var(--gmh-bg); border-radius:10px; font-size:.9rem; color:var(--gmh-ink); }
.gmh-note a { font-weight:700; color:var(--gmh-ink); }
.gmh-employer { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.gmh-employer__name { margin:0; font-weight:800; color:var(--gmh-ink); }
.gmh-employer a { font-size:.88rem; color:#1d4ed8; word-break:break-all; }
.gmh-prose { color:#2b2f3a; font-size:1rem; line-height:1.7; overflow-wrap:anywhere; }
.gmh-prose > * + * { margin-top:.9em; }
.gmh-prose h1, .gmh-prose h2, .gmh-prose h3, .gmh-prose h4 { color:var(--gmh-ink); font-weight:800; line-height:1.3; margin-top:1.4em; font-size:1.08rem; }
.gmh-prose ul, .gmh-prose ol { padding-left:1.3em; } .gmh-prose ul { list-style:disc; } .gmh-prose ol { list-style:decimal; }
.gmh-prose li + li { margin-top:.3em; }
.gmh-prose a { color:#1d4ed8; text-decoration:underline; }
.gmh-prose strong, .gmh-prose b { color:var(--gmh-ink); }
.gmh-prose img { max-width:100%; height:auto; }
.gmh-alert { color:#fecaca; font-weight:600; margin:8px 0; } .gmh-alert a { color:#fff; text-decoration:underline; }
.gmh-applybar { display:none; }
#more-jobs { padding-top:28px; }
@media (max-width: 1023px) {
  .gmh-detailgrid { grid-template-columns:minmax(0, 1fr); }
  .gmh-detailside { position:static; }
  .gmh-detailhead__cta { display:none; }
  .gmh-applybar:not([hidden]) { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; background:#fff; border-top:1px solid var(--gmh-line); box-shadow:0 -6px 20px rgba(0,0,0,.08); }
  .gmh-applybar div { min-width:0; display:flex; flex-direction:column; font-size:.85rem; }
  .gmh-applybar strong, .gmh-applybar span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gmh-applybar span { color:var(--gmh-muted); }
  .gmh-applybar .gmh-btn { padding:10px 14px; font-size:.9rem; }
  .gmh-detailpage { padding-bottom:90px; }
}
@media (max-width: 640px) {
  .gmh-detailhead__main { gap:12px; }
  .gmh-logo--lg { flex-basis:48px; width:48px; height:48px; font-size:20px; }
  .gmh-panel { padding:16px; }
}
body.dark .gmh-detailpage { background:#141623; }
body.dark .gmh-panel { background:#1f2233; border-color:#33374d; }
body.dark .gmh-prose, body.dark .gmh-panel__title, body.dark .gmh-employer__name, body.dark .gmh-applybox__pay { color:#f3f4f6; }

/* Content pages: sectors, roles, guides, disability (sectors.js helpers) */
.gmh-pagehero { background:var(--gmh-ink); color:#fff; padding:20px 0 28px; position:relative; overflow:hidden; }
.gmh-pagehero::after { content:""; position:absolute; right:-140px; top:-160px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,184,0,.18), rgba(255,184,0,0) 70%); pointer-events:none; }
.gmh-pagehero .gmh-wrap { position:relative; z-index:1; }
.gmh-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.85rem; color:#aeb3bf; margin-bottom:14px; }
.gmh-crumbs a { color:#cfd3dc; text-decoration:none; } .gmh-crumbs a:hover { color:#fff; text-decoration:underline; }
.gmh-crumbs [aria-current] { color:#fff; }
.gmh-pagehero__main { display:flex; align-items:flex-start; gap:16px; }
.gmh-pagehero__icon { flex:0 0 52px; height:52px; border-radius:14px; background:rgba(255,184,0,.16); color:var(--gmh-yellow); display:flex; align-items:center; justify-content:center; margin-top:4px; }
.gmh-pagehero h1 { font-size:clamp(1.7rem, 3.6vw, 2.6rem); line-height:1.12; font-weight:800; letter-spacing:-.015em; margin:0 0 8px; max-width:820px; }
.gmh-pagehero h1 span { color:var(--gmh-yellow); }
.gmh-pagehero h1 br { display:none; }
.gmh-pagehero__sub { color:#cfd3dc; font-size:1.05rem; margin:0; max-width:680px; }
.gmh-pagehero__cta { margin-top:18px; }
.gmh-searchbar--hero { max-width:820px; }
.gmh-pagegrid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:20px; align-items:start; padding-top:22px; padding-bottom:40px; }
.gmh-pagegrid--single { grid-template-columns:minmax(0, 860px); justify-content:center; }
.gmh-pageside { display:flex; flex-direction:column; gap:14px; position:sticky; top:88px; }
.gmh-article { color:#2b2f3a; font-size:1rem; line-height:1.7; padding:26px 28px; }
.gmh-article > :first-child { margin-top:0; }
.gmh-article p { margin:0 0 1em; }
.gmh-article .mb-8, .gmh-article .mb-6 { margin-bottom:1em; } .gmh-article .mb-4 { margin-bottom:.5em; } .gmh-article .mt-8 { margin-top:1.5em; }
.gmh-article a { color:#1d4ed8; text-decoration:underline; }
.gmh-article a.gmh-btn, .gmh-article a.gmh-linkcard { color:var(--gmh-ink); text-decoration:none; }
.gmh-article strong { color:var(--gmh-ink); }
.gmh-h2, .gmh-article h2 { font-size:1.3rem; font-weight:800; color:var(--gmh-ink); line-height:1.3; margin:1.6em 0 .55em; letter-spacing:-.005em; }
.gmh-article h3 { font-size:1.05rem; font-weight:700; color:var(--gmh-ink); margin:1.2em 0 .3em; }
.gmh-article .text-lg { font-size:1.1rem; color:var(--gmh-ink); }
.gmh-article .text-sm { font-size:.88rem; color:var(--gmh-muted); }
.gmh-list { list-style:none; padding:0; margin:0 0 1.1em; }
.gmh-list li { position:relative; padding-left:22px; margin-bottom:.45em; }
.gmh-list li::before { content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--gmh-yellow); }
.gmh-article .gmh-btn { margin-top:.6em; }
.gmh-cardgrid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.gmh-cardgrid--2, .gmh-article .gmh-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:0 0 1.2em; }
.gmh-linkcard { display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--gmh-line); border-radius:12px; padding:16px; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.gmh-linkcard:hover, .gmh-linkcard:focus-visible { border-color:var(--gmh-yellow); box-shadow:0 8px 24px rgba(16,24,40,.07); outline:none; }
.gmh-linkcard__title { font-weight:800; color:var(--gmh-ink); font-size:1rem; line-height:1.35; }
.gmh-linkcard__title::after { content:" \2192"; color:#8a6200; }
.gmh-linkcard__text { color:var(--gmh-muted); font-size:.9rem; line-height:1.5; }
.gmh-linklist { list-style:none; margin:0 0 10px; padding:0; }
.gmh-linklist li + li { border-top:1px solid #f1f2f4; }
.gmh-linklist a { display:block; padding:8px 0; color:var(--gmh-ink); text-decoration:none; font-size:.93rem; }
.gmh-linklist a:hover, .gmh-linklist a:focus-visible { color:#8a6200; text-decoration:underline; }
.gmh-pageside .gmh-more { font-size:.92rem; }
.gmh-livejobs { padding-bottom:0; }
@media (max-width: 1023px) {
  .gmh-pagegrid { grid-template-columns:minmax(0, 1fr); }
  .gmh-pageside { position:static; }
  .gmh-cardgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gmh-cardgrid, .gmh-cardgrid--2, .gmh-article .gmh-grid { grid-template-columns:minmax(0, 1fr); }
  .gmh-article { padding:18px; }
  .gmh-pagehero__icon { display:none; }
}
body.dark .gmh-article, body.dark .gmh-h2, body.dark .gmh-article h2, body.dark .gmh-article h3, body.dark .gmh-linkcard__title, body.dark .gmh-linklist a { color:#f3f4f6; }
body.dark .gmh-linkcard { background:#1f2233; border-color:#33374d; }
body:has(.gmh-pagehero) { background:var(--gmh-bg); }
body.dark:has(.gmh-pagehero) { background:#141623; }
/* Badges on job cards: only from facts we have (gmhBadges in cards.js) */
.gmh-badge { font-size:.75rem; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.01em; }
.gmh-badge--new { background:#dcfce7; color:#14532d; }
.gmh-badge--closing { background:#fee2e2; color:#7f1d1d; }
/* Locations: "Use my location" button, place tiles, role-by-town links */
.gmh-searchbar__field { position:relative; }
.gmh-locate { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:8px; background:transparent; color:#5b6170; cursor:pointer; }
.gmh-locate:hover, .gmh-locate:focus-visible { background:var(--gmh-bg); color:var(--gmh-ink); outline:2px solid transparent; }
.gmh-locate:focus-visible { box-shadow:0 0 0 3px #1e2133; }
.gmh-locate:disabled { opacity:.5; cursor:progress; }
.gmh-places { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.gmh-place { display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--gmh-line); border-radius:12px; padding:12px 14px; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.gmh-place:hover, .gmh-place:focus-visible { border-color:var(--gmh-yellow); box-shadow:0 8px 24px rgba(16,24,40,.07); outline:none; }
.gmh-place__name { font-weight:800; color:var(--gmh-ink); }
.gmh-place__count { font-size:.86rem; color:var(--gmh-muted); min-height:1.3em; }
.gmh-place.is-empty { opacity:.65; }
.gmh-chiplinks { display:flex; flex-wrap:wrap; gap:8px; }
.gmh-chiplinks a { background:#fff; border:1px solid var(--gmh-line); border-radius:999px; padding:7px 14px; color:var(--gmh-ink); text-decoration:none; font-size:.9rem; font-weight:600; }
.gmh-chiplinks a:hover, .gmh-chiplinks a:focus-visible { border-color:var(--gmh-yellow); outline:none; }
@media (max-width: 1023px) { .gmh-places { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gmh-places { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
body.dark .gmh-place, body.dark .gmh-chiplinks a { background:#1f2233; border-color:#33374d; }
body.dark .gmh-place__name, body.dark .gmh-chiplinks a { color:#f3f4f6; }
/* Links inside panels wrap: a long employer name must not run past the box */
.gmh-panel .gmh-more { white-space:normal; overflow-wrap:anywhere; align-items:flex-start; }
/* Home screening band */
.gmh-band-dark { background:var(--gmh-ink); color:#fff; padding:56px 0; }
.gmh-band-dark__inner { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:32px; align-items:center; }
.gmh-band-dark h2 { font-size:clamp(1.6rem, 3.2vw, 2.4rem); line-height:1.15; font-weight:800; margin:0 0 12px; letter-spacing:-.01em; color:#fff; }
.gmh-band-dark h2 span { color:var(--gmh-yellow); }
.gmh-band-dark p { color:#cfd3dc; margin:0 0 22px; max-width:640px; line-height:1.6; }
.gmh-band-dark__facts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.gmh-band-dark__facts li { display:flex; align-items:center; gap:14px; background:var(--gmh-ink-2); border-radius:14px; padding:14px 16px; }
.gmh-band-dark__facts strong { display:block; color:#fff; font-size:1.15rem; font-weight:800; }
.gmh-band-dark__facts small { display:block; color:#aeb3bf; font-size:.82rem; }
.gmh-band-dark .gmh-fact-ico { margin-right:0; }
/* The demo's gentle float, kept: transform only (composited, no layout shift), the two cards out of
   step, and off for anyone who asks their device to reduce motion. */
@keyframes gmh-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
.gmh-band-dark__facts li { animation:gmh-float 6s ease-in-out infinite; will-change:transform; }
.gmh-band-dark__facts li:nth-child(2) { animation-delay:-3s; }
@media (min-width: 861px) { .gmh-band-dark__facts li:nth-child(2) { margin-left:28px; margin-right:-28px; } }
@media (prefers-reduced-motion: reduce) { .gmh-band-dark__facts li { animation:none; } }
/* The page is light unless the site's own dark mode is on: tell the browser, so native controls
   (select popups, scrollbars, autofill) don't follow a dark OS theme onto a light page. */
:root { color-scheme:light; }
body.dark { color-scheme:dark; }
/* Type-to-search filters: the site's own suggestion list (filter-tidy.js), not the OS popup. */
.gmh-combo-wrap { position:relative; }
.gmh-combo-wrap .gmh-combo { padding-right:36px; }
/* A chevron while empty so it still reads as a dropdown; the clear button takes its place once filled. */
.gmh-combo-wrap::after { content:""; position:absolute; right:14px; top:50%; width:10px; height:10px; margin-top:-7px; border-right:2px solid #6b7280; border-bottom:2px solid #6b7280; transform:rotate(45deg); pointer-events:none; transition:transform .15s; }
.gmh-combo-wrap:has(.gmh-combo[aria-expanded="true"])::after { transform:translateY(4px) rotate(-135deg); }
.gmh-combo-wrap:has(.gmh-combo-clear:not([hidden]))::after { display:none; }
body.dark .gmh-combo-wrap::after { border-color:#aeb3bf; }
@media (prefers-reduced-motion: reduce) { .gmh-combo-wrap::after { transition:none; } }
.gmh-combo-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:transparent; color:#6b7280; cursor:pointer; }
.gmh-combo-clear:hover { background:var(--gmh-yellow-soft); color:var(--gmh-ink); }
.gmh-combo-clear:focus-visible { outline:3px solid #1e2133; outline-offset:1px; }
.gmh-combo-list { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px; list-style:none; background:#fff; color:var(--gmh-ink); border:1px solid var(--gmh-line); border-radius:10px; box-shadow:0 12px 28px rgba(17,24,39,.14); max-height:280px; overflow-y:auto; overscroll-behavior:contain; }
.gmh-combo-list [role="option"] { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:.92rem; line-height:1.3; }
.gmh-combo-list [role="option"] span { min-width:0; overflow-wrap:break-word; }
.gmh-combo-list [role="option"] small { flex:none; color:#6b7280; font-size:.78rem; font-variant-numeric:tabular-nums; }
.gmh-combo-list [role="option"]:hover, .gmh-combo-list [aria-selected="true"] { background:var(--gmh-yellow-soft); }
.gmh-combo-empty, .gmh-combo-more { padding:8px 10px; color:#6b7280; font-size:.85rem; }
.gmh-combo-more { border-top:1px solid var(--gmh-line); margin-top:4px; }
body.dark .gmh-combo-list { background:#1f2233; border-color:#33374d; color:#f3f4f6; box-shadow:0 12px 28px rgba(0,0,0,.45); }
body.dark .gmh-combo-list [role="option"]:hover, body.dark .gmh-combo-list [aria-selected="true"] { background:#2a2e42; }
body.dark .gmh-combo-list small, body.dark .gmh-combo-empty, body.dark .gmh-combo-more, body.dark .gmh-combo-clear { color:#aeb3bf; }
@media (max-width: 860px) {
  .gmh-band-dark { padding:40px 0; }
  .gmh-band-dark__inner { grid-template-columns:minmax(0, 1fr); gap:24px; }
}
/* Search: UK-only scope chip beside the result count */
.gmh-toolbar__lead { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.gmh-ukchip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--gmh-line); background:#fff; color:var(--gmh-ink); border-radius:999px; padding:6px 12px; font-weight:700; font-size:.85rem; cursor:pointer; }
.gmh-ukchip:hover { border-color:var(--gmh-yellow); }
.gmh-ukchip:focus-visible { outline:3px solid #1e2133; outline-offset:2px; }
.gmh-ukchip.is-active { background:var(--gmh-ink); border-color:var(--gmh-ink); color:#fff; }
.gmh-ukchip__count { font-weight:600; opacity:.75; }
.gmh-ukchip__x { display:none; align-items:center; justify-content:center; width:18px; height:18px; margin-left:2px; border-radius:50%; background:rgba(255,255,255,.18); }
.gmh-ukchip.is-active .gmh-ukchip__x { display:inline-flex; }
.gmh-ukchip.is-active:hover .gmh-ukchip__x { background:var(--gmh-yellow); color:var(--gmh-ink); }
.gmh-ukchip__count:not(:empty)::before { content:"("; } .gmh-ukchip__count:not(:empty)::after { content:")"; }
body.dark .gmh-ukchip { background:#1f2233; border-color:#33374d; color:#f3f4f6; }

/* components/job-detail/job-detail.css */
/* Job Detail Component Styles */

#job-detail-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Standalone Page Styles */
#detail-view .bg-white {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

#job-logo {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Dark Mode Support */
body.dark #job-detail-content {
    color: #cbd5e1; /* slate-300 */
}

body.dark #job-detail-content h2, 
body.dark #job-detail-content h3 {
    color: #f8fafc; /* slate-50 */
}

body.dark hr {
    border-color: #334155; /* slate-700 */
}

body.dark .bg-blue-50 {
    background-color: #1e293b;
    border-color: #334155;
    color: #60a5fa;
}

/* High Contrast Support */
body.high-contrast #job-detail-content {
    color: #000000;
}

body.high-contrast .bg-brand-yellow {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* components/theme-switcher/theme-switcher.css */
/* Theme Switcher Styles */

#accessibility-menu {
  position: relative;
  z-index: 100;
}

/* Remove default focus indicators in light/dark mode as requested */
body:not(.high-contrast) input:focus,
body:not(.high-contrast) select:focus,
body:not(.high-contrast) textarea:focus,
body:not(.high-contrast) button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.acc-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1e2133;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.acc-btn:hover {
  transform: scale(1.1);
}

.acc-panel {
  position: absolute;
  top: 50px;
  right: 0;
  width: 220px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 16px;
  display: none;
  border: 1px solid #eee;
}

.acc-panel.show {
  display: block;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.acc-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.acc-option:last-child {
  border-bottom: none;
}

/* Toggle Switch Base Styles - Robust Fix */
.acc-option button[role="switch"],
#dark-mode-btn,
#high-contrast-btn {
  all: unset !important;
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  outline: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Base Light Mode Background */
#dark-mode-btn,
#high-contrast-btn {
  background-color: #ccd2db !important;
  /* Visible gray */
}

/* Active State Background (Toggled On) */
#dark-mode-btn.bg-blue-600,
#high-contrast-btn.bg-blue-600,
button[class*="bg-blue"] {
  background-color: #2563eb !important;
}

/* Toggle Knob */
.acc-option button span,
#dark-mode-toggle,
#contrast-toggle {
  all: unset !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: #ffffff !important;
  /* Force White */
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(0) !important;
  display: block !important;
  z-index: 2 !important;
}

/* Toggle On Positions (Max travel is width 44 - knob 20 - left 2 - right 2 = 20px) */
.acc-option button.bg-blue-600 span,
.acc-option button[class*="bg-blue"] span,
#dark-mode-btn.bg-blue-600 span,
#high-contrast-btn.bg-blue-600 span {
  transform: translateX(20px) !important;
}

/* Focus Ring */
.acc-option button:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb !important;
}

/* Dark Mode Overrides */
body.dark {
  background-color: #0f172a;
  color: #f1f5f9;
}

body.dark nav,
body.dark header,
body.dark footer,
body.dark .bg-white,
body.dark section[role="search"],
body.dark input,
body.dark select {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* Custom Select Arrow for Dark Mode */
body.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
  appearance: none !important;
}

body.dark select:hover {
  border-color: #475569 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f1f5f9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

body.dark input::placeholder {
  color: #94a3b8 !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark .text-2xl.font-bold,
body.dark .font-bold.text-gray-900 {
  color: #f8fafc !important;
}

body.dark footer a:hover {
  color: #ffffff !important;
}

body.dark .text-gray-600,
body.dark .text-gray-700,
body.dark .text-gray-800 {
  color: #cbd5e1 !important;
}

body.dark .text-gray-400,
body.dark .text-gray-500 {
  color: #94a3b8 !important;
}

/* Blue to Yellow Overrides for Dark Mode Branding */
body.dark .bg-blue-600,
body.dark .bg-blue-700,
body.dark .bg-blue-800 {
  background-color: #facc15 !important;
  color: #1e293b !important;
  /* Contrasting text for yellow bg */
}

body.dark .text-blue-600,
body.dark .text-blue-700,
body.dark .text-blue-800,
body.dark .text-brand-yellow {
  color: #facc15 !important;
}

body.dark .border-blue-100,
body.dark .border-blue-200,
body.dark .border-blue-600 {
  border-color: #facc15 !important;
}

body.dark .bg-blue-50 {
  background-color: rgba(250, 204, 21, 0.1) !important;
  color: #facc15 !important;
  border-color: rgba(250, 204, 21, 0.2) !important;
}

body.dark .group-hover\:text-blue-600:group-hover,
body.dark .hover\:text-blue-600:hover,
body.dark .hover\:text-blue-700:hover,
body.dark .hover\:border-blue-400:hover {
  color: #facc15 !important;
  border-color: #facc15 !important;
}


body.dark .view-all-btn,
body.dark .search-btn {
  border-color: #cbd5e1 !important;
  color: #f1f5f9 !important;
}

body.dark .view-all-btn:hover,
body.dark .search-btn:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}


/* Company Detail Branding - Dark Mode Fixes */
body.dark .bg-blue-700 {
  background-color: #facc15 !important;
  /* Brand Yellow background */
  color: #ffffff !important;
  /* White text */
}

body.dark .text-blue-800 {
  color: #facc15 !important;
  /* Brand Yellow (Yellow-400) */
}


body.dark #share-menu {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

body.dark #share-menu p {
  color: #94a3b8 !important;
}

body.dark #share-menu .bg-gray-200 {
  background-color: #475569 !important;
}

/* Share Menu Dark Mode Specifics */
body.dark #share-native-btn,
body.dark #share-copy-btn {
  background-color: #334155 !important;
  border-color: #475569 !important;
}

body.dark #share-native-btn *,
body.dark #share-copy-btn * {
  color: #f1f5f9 !important;
}

body.dark #share-native-btn:hover,
body.dark #share-copy-btn:hover {
  background-color: #475569 !important;
}


body.dark .acc-panel {
  background: #1e293b;
  color: white;
  border-color: #334155;
}

body.dark .acc-option {
  border-color: #334155;
}

/* High Contrast Overrides */
body.high-contrast {
  background-color: #ffffff !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast p,
body.high-contrast span,
body.high-contrast i,
body.high-contrast label,
body.high-contrast footer,
body.high-contrast .text-gray-700,
body.high-contrast .text-gray-800,
body.high-contrast .text-gray-900,
body.high-contrast .text-white {
  color: #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast nav,
body.high-contrast header,
body.high-contrast section,
body.high-contrast footer,
body.high-contrast article,
body.high-contrast .bg-gray-50 {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Specific borders for the banner and cards */
body.high-contrast .bg-brand-dark {
  background-color: #ffffff !important;
  border: none !important;
  border-top: 4px solid #000000 !important;
  /* Only top border for banner */
  background-image: none !important;
  box-shadow: none !important;
}

body.high-contrast .bg-brand-card {
  background-color: #ffffff !important;
  border: 4px solid #000000 !important;
  /* Full border for cards */
  background-image: none !important;
  box-shadow: none !important;
}




body.high-contrast button,
body.high-contrast a:not(.block):not(.flex) {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  padding: 8px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

body.high-contrast a.block,
body.high-contrast a.flex {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  display: block !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 16px !important;
}

body.high-contrast a.block:hover,
body.high-contrast a.flex:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-6px) !important;
}



body.high-contrast a.block:hover *,
body.high-contrast a.flex:hover * {
  color: #ffffff !important;
  border-color: #ffffff !important;
}




body.high-contrast input {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  padding: 10px 15px !important;
  font-weight: 700 !important;
  display: block !important;
  width: 100% !important;
}

/* Maintain borderless look only inside the search container */
body.high-contrast section[role="search"] input {
  border: none !important;
}


body.high-contrast section[role="search"] {
  border: 4px solid #000000 !important;
  background-color: #ffffff !important;
}


@media (min-width: 768px) {
  body.high-contrast #hamburger-btn {
    display: none !important;
  }
}


/* Moving high-contrast select rules to bottom for maximum priority */


body.high-contrast input::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

body.high-contrast .text-gray-400,
body.high-contrast .text-gray-500,
body.high-contrast .text-gray-600 {
  color: #000000 !important;
}

body.high-contrast button:hover,
body.high-contrast a:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast button:hover *,
body.high-contrast a:hover * {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
}

body.high-contrast #accessibility-menu .acc-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.high-contrast #accessibility-menu .acc-btn:hover {
  background-color: #000000 !important;
  color: #000000 !important;
  border-color: #fff !important;
}


body.high-contrast .view-all-btn,
body.high-contrast .search-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  font-weight: 900 !important;
}

body.high-contrast #share-menu {
  background-color: #ffffff !important;
  border: 4px solid #000000 !important;
}

body.high-contrast #share-menu button {
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  font-weight: 700 !important;
}

body.high-contrast #share-menu button:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}


/* --- HIGH CONTRAST SELECT FIX (NATIVE ARROW FALLBACK) --- */
body.high-contrast select {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;

  background-color: #ffffff !important;
  color: #000000 !important;
  border: 4px solid #000000 !important;
  border-radius: 4px !important;

  padding: 8px 16px !important;
  font-weight: 900 !important;
  height: 52px !important;
  cursor: pointer !important;
}

/* Job Grid Layout Fix */
body.high-contrast #job-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (min-width: 768px) {
  body.high-contrast #job-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  body.high-contrast #job-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Card Specific Fixes */
body.high-contrast #job-grid a.block h3,
body.high-contrast #job-grid a.block p,
body.high-contrast #job-grid a.block div {
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

body.high-contrast #job-grid a.block .w-12.h-12 {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

/* Global Card Hover Animation for High Contrast */
body.high-contrast #job-grid a.block,
body.high-contrast #job-list article {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.high-contrast #job-grid a.block:hover,
body.high-contrast #job-list article:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}