/* ==========================================================================
   WorkSphere — App shell (assets/css/ws-app.css)
   1) Home-page colours on every page hero (all screen sizes)
   2) Phones & tablets: app top bar, side drawer, bottom tabs, search sheet
   ========================================================================== */
:root {
  --ap-ink: #080c2a;
  --ap-hero: radial-gradient(700px 420px at 12% 0%, rgba(123, 47, 214, .55), transparent 60%),
             radial-gradient(640px 420px at 100% 100%, rgba(37, 99, 235, .38), transparent 60%),
             linear-gradient(160deg, #080c2a, #140d47 55%, #22095a);
  --ap-grid: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 46px 46px,
             linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 46px 46px;
  --ap-pri: #5a00a5;
  --ap-grad: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb);
  --ap-tab-h: 64px;
}

/* ---------- 1) one colour story for every page hero ---------- */
.about-page-header, .legal-page-header, .legal-page-header--teal, .job-detail-hero, .hero-section {
  background: var(--ap-grid), var(--ap-hero) !important;
}
.trk-hero::before, .hero-section::before { background: var(--ap-grid), var(--ap-hero) !important; }
.hero-section::after { display: none; }
.about-eyebrow { background: rgba(167, 139, 250, .14) !important; border: 1px solid rgba(167, 139, 250, .3); color: #d8c8ff !important; }
.about-page-header h1, .legal-page-header h1, .job-detail-hero__title { color: #fff; }

/* View transitions: pages fade into each other like an app (Chrome, Edge, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: apOut .18s ease both; }
::view-transition-new(root) { animation: apIn .2s ease both; }
@keyframes apOut { to { opacity: 0; } }
@keyframes apIn { from { opacity: 0; } }

/* top loading bar */
/* ---------- one brand palette across the whole site ---------- */
:root {
  --ws-brand: #5a00a5; --ws-ink: #1e1b4b; --ws-grad: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb);
  --heading-color: #1e1b4b; --accent-color: #5a00a5; --nav-color: #1e1b4b; --nav-hover-color: #5a00a5; --nav-dropdown-hover-color: #5a00a5;
}
.btn-primary, .btn-primary:focus { background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; border-color: transparent !important; color: #fff !important; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline-primary { color: #5a00a5 !important; border-color: #cdb8f5 !important; }
.btn-outline-primary:hover { color: #fff !important; background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; border-color: transparent !important; }
a.text-primary, .text-primary { color: #5a00a5 !important; }
.btn-success, .btn-success:focus { background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 12px 24px -14px rgba(90, 0, 165, .8) !important; }
.btn-success:hover { filter: brightness(1.08); }
.about-cta-section { position: relative; isolation: isolate; background: var(--ap-grid, none), radial-gradient(700px 420px at 12% 0%, rgba(123, 47, 214, .55), transparent 60%), radial-gradient(640px 420px at 100% 100%, rgba(37, 99, 235, .38), transparent 60%), linear-gradient(160deg, #080c2a, #140d47 55%, #22095a) !important; }
.refer-cta-box, .mv-card-alt, .refer-cta { background: radial-gradient(420px 220px at 100% 0%, rgba(124, 92, 255, .5), transparent 60%), linear-gradient(160deg, #0b1336, #1e1b5e 60%, #3b1d8f) !important; border-color: transparent !important; }
.about-cta-section .btn-cta-primary, .about-cta-section .btn-cta-primary:focus { background: #fff !important; color: #1e1b5e !important; border-color: #fff !important; }
.about-cta-section .btn-cta-secondary, .about-cta-section .btn-cta-tertiary { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; }
.bg-primary { background: #5a00a5 !important; }
.form-control:focus, .form-select:focus { border-color: #b9a0f0 !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15) !important; }
.form-check-input:checked { background-color: #5a00a5 !important; border-color: #5a00a5 !important; }

.apbar { position: fixed; left: 0; top: 0; z-index: 3000; height: 3px; width: 0; background: var(--ap-grad); box-shadow: 0 0 10px rgba(123, 47, 214, .7); opacity: 0; transition: width .4s ease, opacity .3s; pointer-events: none; }
.apbar.go { opacity: 1; width: 78%; transition: width 2.4s cubic-bezier(.1, .7, .1, 1), opacity .1s; }
.apbar.done { opacity: 0; width: 100%; transition: width .2s ease, opacity .35s .15s; }

.ap-burger, .ap-acct, .ad, .tb, .sh { display: none; }

/* ---------- 2) phones & tablets ---------- */
@media (max-width: 1199.98px) {
  html { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; }
  a, button, input, select, label { touch-action: manipulation; }

  /* top app bar */
  .header { padding: 6px 0 !important; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .header.ap-hide { transform: translateY(-110%); }
  .header > .container-xl { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
  .header .navmenu { display: none !important; }
  .header .btn-getstarted { display: none !important; }
  .header .logo { grid-column: 2 !important; justify-self: center !important; }
  .header .logo img { max-height: 44px !important; }
  .ap-burger { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; grid-column: 1; grid-row: 1; justify-self: start;
    width: 42px; height: 42px; padding: 0 0 0 12px; border: 1px solid #ece8f6; border-radius: 50%; background: #fff; cursor: pointer;
    box-shadow: 0 6px 16px -10px rgba(30, 27, 75, .45); transition: transform .15s, box-shadow .2s; }
  .ap-burger span { display: block; height: 2px; border-radius: 2px; background: #1e1b4b; transition: width .25s cubic-bezier(.2, .8, .2, 1); }
  .ap-burger span:nth-child(1) { width: 17px; }
  .ap-burger span:nth-child(2) { width: 11px; background: #5a00a5; }
  .ap-burger span:nth-child(3) { width: 14px; }
  .ap-burger:hover span, .ap-burger[aria-expanded="true"] span { width: 17px; }
  .ap-burger:active { transform: scale(.92); }
  .ap-acct { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px;
    color: #fff !important; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
    background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb); box-shadow: 0 8px 18px -10px rgba(90, 0, 165, .8); transition: transform .15s; }
  .ap-acct i { font-size: 15px; line-height: 1; }
  .ap-acct:active { transform: scale(.94); }
  .ap-acct--in { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 13.5px; letter-spacing: .02em; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e4d8fb, 0 8px 18px -10px rgba(90, 0, 165, .8); }
  @media (max-width: 359.98px) { .ap-acct:not(.ap-acct--in) { width: 38px; padding: 0; justify-content: center; } .ap-acct:not(.ap-acct--in) span { display: none; } }

  /* side drawer — slides from the left like Google Play */
  .ad { display: block; position: fixed; inset: 0; z-index: 2000; visibility: hidden; pointer-events: none; }
  .ad[hidden] { display: block; }
  .ad.open { visibility: visible; pointer-events: auto; }
  .ad-scrim { position: absolute; inset: 0; background: rgba(8, 12, 42, .5); opacity: 0; transition: opacity .3s ease; }
  .ad.open .ad-scrim { opacity: var(--ad-fade, 1); }
  .ad-panel { position: absolute; left: 0; top: 0; bottom: 0; height: 100%; height: 100dvh; width: min(88vw, 360px); display: flex; flex-direction: column; background: #fff;
    border-radius: 0 26px 26px 0; box-shadow: 24px 0 60px -20px rgba(8, 12, 42, .6); transform: translateX(-104%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1); outline: none; overflow: hidden; will-change: transform; }
  .ad.open .ad-panel { transform: translateX(var(--ad-x, 0)); }
  .ad.drag .ad-panel, .ad.drag .ad-scrim { transition: none; }
  .ad-head { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 14px 8px 18px; }
  .ad-logo img { height: 38px; width: auto; display: block; }
  .ad-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f4f5f9; color: #334155; font-size: 16px; display: grid; place-items: center; cursor: pointer; }
  .ad-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 14px 16px; }
  .ad-me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #eceaf5; box-shadow: 0 10px 24px -20px rgba(30, 27, 94, .6); }
  .ad-me__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
  .ad-me__av { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .02em; color: #fff;
    background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e4d8fb; }
  .ad-me__av--guest { color: #5a00a5; background: #f3edfc; font-size: 20px; box-shadow: none; }
  .ad-me__t { flex: 1; min-width: 0; line-height: 1.25; }
  .ad-me__t b { display: block; font-size: 15px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-me__t small { display: block; font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-me__in { flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none; background: var(--ap-grad); box-shadow: 0 8px 16px -10px rgba(90, 0, 165, .8); }
  .ad-me__out { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #64748b !important; background: #f4f5f9; font-size: 16px; text-decoration: none; }
  .ad-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .ad-t { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1px; padding: 12px; border-radius: 16px; text-decoration: none; background: #fff; border: 1px solid #eef0f6; transition: transform .15s; }
  .ad-t::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: .06; }
  .ad-t:active { transform: scale(.96); }
  .ad-t > * { position: relative; }
  .ad-t i { width: 34px; height: 34px; margin-bottom: 7px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; color: #fff; background: var(--c); box-shadow: 0 8px 14px -8px var(--c); }
  .ad-t b { font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-t small { font-size: 11.5px; color: #64748b; }
  .ad-t { -webkit-tap-highlight-color: transparent; outline: none; }
  .ad-t:focus { outline: none; box-shadow: none; }
  .ad-t:focus-visible { box-shadow: 0 0 0 2px var(--c); }
  .ad-t.on { border-color: #eef0f6; box-shadow: none; }
  .ad-t.on::before { opacity: .12; }
  .ad-k { margin: 18px 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
  .ad-cats { display: flex; flex-direction: column; gap: 4px; }
  .ad-c[hidden] { display: none; }
  .ad-c { border-radius: 14px; transition: background .2s; }
  .ad-c.open { background: #f8f7fd; }
  .ad-ch { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; color: #1e293b; font-size: 14px; font-weight: 600; }
  .ad-ch:active { background: #f1ecfb; }
  .ad-ch > i:first-child { flex: 0 0 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: background .2s, color .2s; }
  .ad-c.open .ad-ch > i:first-child { color: #fff; background: var(--c); }
  .ad-ch span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ad-ch em { font-style: normal; min-width: 24px; text-align: center; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: #f1f5f9; color: #475569; }
  .ad-chev { flex: 0 0 auto; font-size: 12px; color: #94a3b8; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
  .ad-c.open .ad-chev, .ad-show[aria-expanded="true"] .ad-chev { transform: rotate(180deg); }
  .ad-cj { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.2, .8, .2, 1); }
  .ad-c.open .ad-cj { grid-template-rows: 1fr; }
  .ad-cj > div { overflow: hidden; min-height: 0; padding: 0 8px 0 52px; }
  .ad-c.open .ad-cj > div { padding-bottom: 8px; }
  .ad-cj a { display: block; padding: 8px 10px; margin: 2px 0; border-radius: 10px; background: #fff; border: 1px solid #eeecf6; text-decoration: none; }
  .ad-cj a:active { background: #f3edfc; }
  .ad-cj a b { display: block; font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-cj a small { display: block; font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ad-cj a small span { color: #047857; font-weight: 700; }
  .ad-cj a.ad-cj__all { border: 0; background: none; padding: 6px 10px; color: #5a00a5; font-weight: 700; font-size: 12.5px; }
  .ad-show { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 6px; padding: 9px; border: 0; border-radius: 12px; background: #f6f3fd; color: #5a00a5; font-weight: 700; font-size: 13px; cursor: pointer; }
  .ad-show .ad-chev { color: #5a00a5; }
  .ad-nav { display: flex; flex-direction: column; gap: 1px; padding: 0; overflow: visible; flex: none; }
  .ad-i { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 10px; border: 0; border-radius: 13px; background: none;
    color: #1e293b !important; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: left; }
  .ad-i > i:first-child { font-size: 18px; width: 22px; color: #64748b; }
  .ad-i span { flex: 1; min-width: 0; }
  .ad-i .ad-go { font-size: 12px; color: #cbd5e1; }
  .ad-i:active { background: #f3edfc; }
  .ad-i.on { background: #f3edfc; color: #4d0085 !important; }
  .ad-i.on > i:first-child { color: #5a00a5; }
  .ad-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #f0f2f7; }
  .ad-soc { display: flex; gap: 8px; }
  .ad-soc a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f4effc; color: #5a00a5 !important; text-decoration: none; }
  .ad-foot small { font-size: 11.5px; font-weight: 600; color: #64748b; }
  .ad-foot small i { color: #059669; }
  html.ap-lock, html.ap-lock body { overflow: hidden !important; }
  @media (max-width: 359.98px) { .ad-foot small { display: none; } .ad-body { padding: 2px 10px 14px; } .ad-t { padding: 10px; } .ad-t i { width: 30px; height: 30px; font-size: 14px; } .ad-t b { font-size: 13px; } .ad-me__in { padding: 8px 12px; } }

  /* page tweaks while the shell is on */
  .scroll-top { display: none !important; }
}

@media (max-width: 991.98px) {
  /* bottom tab bar — iOS 26 "Liquid Glass" capsule with a raised search orb in the centre */
  :root { --tb-h: 62px; --tb-gap: 10px; }
  body { padding-bottom: calc(var(--tb-h) + var(--tb-gap) * 2 + env(safe-area-inset-bottom)) !important; }
  .tb { display: block; position: fixed; z-index: 1500; left: 14px; right: 14px; max-width: 520px; margin: 0 auto;
    bottom: calc(var(--tb-gap) + env(safe-area-inset-bottom)); height: var(--tb-h); pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; transform: translateZ(0); contain: layout style; }
  .tb-cap { pointer-events: auto; position: relative; isolation: isolate; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px; border-radius: 999px;
    background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 12px 34px -12px rgba(15, 12, 50, .38), 0 2px 6px -2px rgba(15, 12, 50, .12), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(15, 12, 50, .05);
    transition: height .3s cubic-bezier(.2, .8, .2, 1); }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .tb-cap { background: rgba(255, 255, 255, .97); } }
  .tb-cap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%); }
  .tb-ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 999px;
    background: rgba(90, 0, 165, .1); box-shadow: inset 0 0 0 1px rgba(90, 0, 165, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
    transform: translate3d(calc(var(--ti, 0) * 100%), 0, 0); transition: transform .42s cubic-bezier(.25, 1.25, .4, 1), opacity .2s; opacity: 0; will-change: transform; }
  .tb-cap.has-on .tb-ind { opacity: 1; }
  .tb-i { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
    color: #3c3c43 !important; text-decoration: none; border-radius: 999px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .tb-ic { position: relative; display: grid; place-items: center; width: 28px; height: 24px; transition: transform .2s cubic-bezier(.3, .7, .4, 1.5); }
  .tb-ic i { grid-area: 1 / 1; font-size: 21px; line-height: 1; transition: opacity .18s; }
  .tb-ic i + i { opacity: 0; }
  .tb-l { font-size: 10.5px; font-weight: 600; letter-spacing: .1px; line-height: 1.15; white-space: nowrap; max-height: 14px; overflow: hidden; transition: opacity .2s, max-height .3s; }
  .tb-i.on { color: #5a00a5 !important; }
  .tb-i.on .tb-ic i:first-child { opacity: 0; }
  .tb-i.on .tb-ic i + i { opacity: 1; }
  .tb-i:active .tb-ic { transform: scale(.82); transition-duration: .08s; }
  /* centre search orb, raised above the capsule */
  .tb-mid { position: relative; z-index: 2; display: grid; place-items: center; }
  .tb-srch { position: relative; width: 56px; height: 56px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
    color: #3c4043; font-size: 22px; border: 1px solid #e3e5ea; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    background: #fff; box-shadow: 0 8px 20px -10px rgba(15, 12, 50, .35), 0 1px 3px rgba(15, 12, 50, .1);
    transition: transform .25s cubic-bezier(.3, .7, .4, 1.4), margin .3s cubic-bezier(.2, .8, .2, 1), width .3s, height .3s; }
  .tb-srch i { transition: transform .25s cubic-bezier(.3, .7, .4, 1.5); }
  .tb-srch:active { transform: scale(.9); transition-duration: .08s; }
  .tb-srch[aria-expanded="true"] i { transform: rotate(90deg) scale(.9); }
  /* scrolling down: bar settles into a compact capsule (like iOS) */
  .tb.mini { --tb-h: 50px; }
  .tb.mini .tb-l { opacity: 0; max-height: 0; }
  .tb.mini .tb-srch { width: 46px; height: 46px; margin-top: -10px; font-size: 19px; }

  /* job page apply bar sits on top of the tab bar */
  .wsm-applybar { left: 14px !important; right: 14px !important; border-radius: 20px;
    bottom: calc(var(--tb-h) + var(--tb-gap) * 2 + env(safe-area-inset-bottom)) !important; padding: 10px 14px !important;
    background: rgba(255, 255, 255, .97) !important; border: 1px solid rgba(15, 12, 50, .06); box-shadow: 0 12px 30px -14px rgba(15, 12, 50, .4) !important;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1) !important; }
  .wsm-applybar:not(.on) { transform: translateY(calc(100% + var(--tb-h) + 60px)) !important; }

  /* smoother scrolling: no live blur behind fixed bars on phones */
  .header::before { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, .985) !important; }
  .header { will-change: transform; }

  /* search sheet */
  .sh { display: block; position: fixed; inset: 0; z-index: 2100; visibility: hidden; pointer-events: none; }
  .sh[hidden] { display: block; }
  .sh.open { visibility: visible; pointer-events: auto; }
  .sh-scrim { position: absolute; inset: 0; background: rgba(8, 12, 42, .5); opacity: 0; transition: opacity .3s; }
  .sh.open .sh-scrim { opacity: 1; }
  .sh-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 50px -20px rgba(8, 12, 42, .6); transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .sh.open .sh-panel { transform: none; }
  html body .sh .sh-panel { padding: 6px 14px calc(18px + env(safe-area-inset-bottom)) !important; max-height: 88vh; max-height: 88dvh;  }
  .sh-grab { display: block; width: 38px; height: 5px; margin: 4px auto 12px; border-radius: 3px; background: #e2e8f0; }
  .sh-form { display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 6px; border-radius: 999px; background: #fff; border: 1px solid #e3e6ee;
    box-shadow: 0 2px 8px rgba(32, 33, 36, .1); transition: box-shadow .2s, border-color .2s; }
  .sh-form:focus-within { border-color: transparent; box-shadow: 0 3px 14px rgba(32, 33, 36, .2); }
  .sh-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: #202124; padding: 0 4px; }
  .sh-form input::-webkit-search-cancel-button { display: none; }
  .sh-back, .sh-clr, .sh-go { flex: 0 0 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: #5f6368; font-size: 17px; cursor: pointer; }
  .sh-clr[hidden] { display: none; }
  .sh-go { color: #5f6368; font-size: 18px; }
  .sh-go:active { background: #f1f3f4; }
  .sh-back:active, .sh-clr:active { background: #f1f3f4; }
  .sh-list { margin: 6px 0 0; padding: 0; list-style: none; }
  .sh-list:empty { display: none; }
  .sh-list li a { display: flex; align-items: center; gap: 14px; padding: 11px 6px; border-radius: 12px; color: #202124 !important; text-decoration: none; font-size: 15px; }
  .sh-list li a:active { background: #f1f3f4; }
  .sh-list li a > i:first-child { flex: 0 0 20px; font-size: 16px; color: #5f6368; text-align: center; }
  .sh-list li a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sh-list li a span b { font-weight: 700; }
  .sh-list li a small { display: block; font-size: 12px; color: #70757a; }
  .sh-fill { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; color: #9aa0a6; }
  .sh-fill:active { background: #e8eaed; }
  .sh h3 { margin: 16px 6px 4px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: #70757a; }
  .sh-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 0; }
  .sh-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid #dadce0; color: #3c4043 !important; font-weight: 600; font-size: 13.5px; text-decoration: none; }
  .sh-chips a i { font-size: 13px; color: #5f6368; }
  .sh-chips a:active { background: #f1f3f4; transform: scale(.96); }

  /* app-like touch feedback on common controls */
  .jc, .mj, .wt, .cf, .wf, .wp { -webkit-user-select: none; user-select: none; }
  .jc:active, .mj:active, .wt:active { transform: scale(.985) !important; transition-duration: .08s !important; }
}

/* ---------- phones & tablets: ultra-smooth pass ----------
   Kill continuous GPU work (animated blurs, scan lines, floating badges, glass
   behind scrolling content), show AOS content instantly, and let the browser
   skip rendering of off-screen sections. */
@media (max-width: 991.98px) {
  .hx::after, .hx__orb, .hx__form::before, .jb-form::before, .wy__badge, .hx__eyebrow i, .wc__eyebrow i,
  #cv-service-teaser .tz-btn:after, #cv-service .wscv-btn-gold:after, #cv-service .wscv-mini:after, #cv-service .wscv-pop,
  .apply-submit-btn::after, .apply-upload-card__btn::after, .legal-contact-strip__cta::after { animation: none !important; }
  .hx__orb { display: none !important; }
  .hx__form::before, .jb-form::before { filter: none !important; opacity: .55 !important; }
  .wt__ic, .wt__chips span, #cv-service .wscv-ovtop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #about, #alt-features, #employers-cta, .wy-sec, .ws-ft { content-visibility: auto; contain-intrinsic-size: auto 600px; }
  html { -webkit-tap-highlight-color: transparent; scroll-behavior: auto !important; }
  a, button, input, select, label { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-panel, .ad-scrim, .sh-panel, .sh-scrim, .tb, .header { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- minimal "Apply now" buttons on the job page ---------- */
.job-detail-hero__apply-btn, .job-detail-hero__apply-btn:focus {
  gap: 8px !important; padding: 11px 22px !important; border: 0 !important; border-radius: 12px !important;
  background: #fff !important; color: #1e1b5e !important; font-weight: 700 !important; font-size: 15px !important;
  box-shadow: none !important; transition: background .2s, transform .15s !important;
}
.job-detail-hero__apply-btn:hover { background: #ede5fb !important; color: #1e1b5e !important; }
.job-detail-hero__apply-btn:active { transform: scale(.97); }
.job-detail-hero__apply-btn .job-detail-apply-btn__icon { display: none !important; }
.job-detail-hero__apply-btn i.bi-chevron-right { margin: 0 !important; font-size: 13px; }
.job-detail-hero__apply-btn::after, .job-detail-apply-btn::after { display: none !important; }
.job-detail-apply-btn, .job-detail-apply-btn:focus {
  padding: 12px 22px !important; border-radius: 12px !important; background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; color: #fff !important;
  font-weight: 700 !important; box-shadow: none !important;
}
.job-detail-apply-btn:hover { filter: brightness(1.08); transform: none !important; }
.wsm-applybar a { padding: 10px 16px !important; border-radius: 12px !important; background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; box-shadow: none !important; font-size: 13.5px !important; }

/* ==========================================================================
   Compact mobile (phones): less scrolling, tighter rhythm, clean & clear.
   "html body" prefix out-ranks the per-component <style> blocks that load later.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* shared rhythm: smaller headings, 2-line intros, tighter sections */
  html body .wc, html body .mv, html body .wa, html body .wy-sec, html body .ec { padding-top: 22px; padding-bottom: 22px; }
  html body .index-page section.cm { padding-top: 22px; padding-bottom: 14px; }
  html body .wc__head h2, html body .mv__head h2, html body .cm h2, html body .wa h2, html body .wy h2, html body .ec h2 { font-size: 20px; line-height: 1.22; margin: 8px 0 4px; letter-spacing: -.01em; }
  html body .wc__head p, html body .cm__head p, html body .wa__lead, html body .wy__lead, html body .ec__lead, html body .mv__head p {
    font-size: 13px; line-height: 1.5; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body .wc__eyebrow, html body .mv__eyebrow, html body .cm__eyebrow, html body .wa__eyebrow, html body .wy__eyebrow, html body .ec__eyebrow { font-size: 10px; padding: 4px 10px; letter-spacing: .12em; }

  /* hero */
  html body .index-page section.hx { padding: 96px 0 30px; }
  html body .hx h1 { font-size: 27px; margin: 10px 0 6px; }
  html body .hx__sub { font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html body .hx__form { margin-top: 16px; }
  html body .hx__pop { margin-top: 12px; }

  /* job categories: uniform compact tiles */
  html body .wc__head { margin-bottom: 12px; }
  html body .wc__grid { grid-auto-rows: 98px; gap: 8px; }
  html body .wt--big { grid-column: span 2; }
  html body .wt--big h3 { font-size: 16px; }
  html body .wt--big .wt__r, html body .wc__trust { display: none; }
  html body .wt h3 { font-size: 13px; line-height: 1.2; }
  html body .wt__ic { width: 30px; height: 30px; font-size: 14px; }
  html body .wt--big .wt__go { flex-basis: 32px; height: 32px; font-size: 14px; }
  html body .wt--cta b { font-size: 20px; }

  /* most viewed */
  html body .mv__head { margin-bottom: 10px; }
  html body .mv__grid { gap: 8px; }
  html body .mj__img { height: 84px; }
  html body .mj__b { padding: 8px 9px 9px; }
  html body .mj__apply { padding: 7px 10px; font-size: 12.5px; margin-top: 6px; }

  /* who we are: text-first card */
  html body .wa__box { padding: 18px 16px; }
  html body .wa__pic, html body .wa__pills { display: none; }
  html body .wa__txt { padding: 0; }
  html body .wa__cta { margin-top: 14px; gap: 8px; flex-wrap: nowrap; }
  html body .wa__cta .wa__btn { flex: 1; justify-content: center; padding: 11px 10px; font-size: 13.5px; white-space: nowrap; }

  /* why choose */
  html body .wy { padding: 20px 14px 20px; }
  html body .wy__steps { display: none; }
  html body .wy__pics { aspect-ratio: auto; height: 210px; max-width: none; }
  html body .wy__row { gap: 16px; }
  html body .wy__grid { gap: 8px; margin-top: 14px; }
  html body .wf { padding: 10px; gap: 9px; border-radius: 13px; }
  html body .wf__ic { flex-basis: 30px; height: 30px; font-size: 14px; }
  html body .wf b, html body .wf h3 { font-size: 12.5px; }
  html body .wy__cta { margin-top: 14px; gap: 8px; flex-wrap: nowrap; }
  html body .wy__cta .wy__btn { flex: 1; justify-content: center; padding: 11px 8px; font-size: 13px; white-space: nowrap; }
  html body .wy__live { display: none; }

  /* employers CTA */
  html body .ec__pic { display: block; height: 150px; }
  html body .ec__txt { padding: 20px 16px; }
  html body .ec__pts { gap: 8px; margin-top: 12px; }
  html body .ec__cta { margin-top: 14px; gap: 8px; flex-wrap: nowrap; }
  html body .ec__cta .ec__btn { flex: 1; justify-content: center; padding: 11px 8px; font-size: 13.5px; white-space: nowrap; }

  /* footer: one compact block */
  html body .ws-ft__top { grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 22px 0 14px; }
  html body .ws-ft__brand { flex-direction: row !important; justify-content: space-between; align-items: center !important; text-align: left !important; }
  html body .ws-ft__logo img { width: 84px; }
  html body .ws-ft__tag { display: none; }
  html body .ws-ft__soc { margin-top: 0; }
  html body .ws-ft__soc a { width: 34px; height: 34px; }
  html body .ws-ft h4 { margin-bottom: 8px; font-size: 11px; }
  html body .ws-ft ul { gap: 6px; }
  html body .ws-ft__con li:nth-child(2) { display: none; }
  html body .ws-ft__flags { padding: 10px 12px; }
  html body .ws-ft__bar .container { padding-top: 10px; padding-bottom: 12px; gap: 6px; }

  /* inner page headers */
  html body .about-page-header h1, html body .legal-page-header h1 { font-size: 22px !important; line-height: 1.25 !important; }
  html body .about-page-header p, html body .legal-page-header p { font-size: 13px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* jobs list */
  html body .index-page section.jb-hero, html body .jb-hero { padding: 92px 0 20px; }
  html body .jb-hero h1 { font-size: 23px; margin-bottom: 4px; }
  html body .jb-hero p.lead { display: none; }
  html body .jb-list { gap: 8px; }
  html body .jc { grid-template-columns: 70px minmax(0, 1fr); gap: 11px; padding: 10px; }
  html body .jc-img { height: 70px; }
  html body .jc h3 { font-size: .94rem; margin: 1px 0 3px; }
  html body .jc-meta { font-size: .76rem; gap: 2px 10px; }
  html body .jc-act { gap: 6px; margin-top: 8px; }
  html body .jc-apply, html body .jc-more { padding: 8px 10px; font-size: .8rem; }

  /* job detail */
  html body .jv-hero { padding: 88px 0 34px; }
  html body .jv-crumb { display: none; }
  html body .jv-hero .job-detail-hero__title { font-size: 23px; }
  html body .jv-facts { margin-top: 14px; gap: 6px; }
  html body .jv-fact { padding: 8px; }
  html body .jv-card { padding: 16px 14px; }
  html body .jv-main > .jv-card + .jv-card { margin-top: 12px; }
}

/* ---------- custom Category / Country dropdown (ws-select.js) ---------- */
select.wss-native { pointer-events: none; }
.wss-wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.wss-wrap .hx__chev, .wss-wrap .chev, .wss-wrap .jb-s__c { transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .2s; }
.wss-wrap.wss-open .hx__chev, .wss-wrap.wss-open .chev, .wss-wrap.wss-open .jb-s__c { color: #5a00a5; }
.wss { position: fixed; z-index: 2600; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px;
  background: #fff; border: 1px solid #ebe7f5; border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(30, 27, 75, .35), 0 4px 12px -6px rgba(30, 27, 75, .12);
  font-family: inherit; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; }
.wss.up { transform-origin: bottom center; transform: translateY(6px) scale(.98); }
.wss.show { opacity: 1; transform: none; }
.wss[hidden] { display: block; visibility: hidden; pointer-events: none; }
.wss-h { padding: 8px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }
.wss-o { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 11px; font-size: 14px; font-weight: 600; color: #1e293b; cursor: pointer; transition: background .12s; }
.wss-o span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wss-o em { flex: 0 0 auto; font-style: normal; min-width: 24px; text-align: center; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.wss-o.all { color: #475569; }
.wss-o.hl { background: #f6f3fd; }
.wss-ck { flex: 0 0 18px; font-size: 16px; color: transparent; }
.wss-o.on { color: #5a00a5; background: #f3edfc; }
.wss-o.on .wss-ck { color: #5a00a5; }
.wss-o.on em { background: #5a00a5; color: #fff; }
@media (hover: none) { .wss-o.hl:not(.on) { background: none; } .wss-o:active { background: #f3edfc; } }
@media (prefers-reduced-motion: reduce) { .wss { transition: none; } }

/* ---------- footer: minimal & compact on phones ---------- */
@media (max-width: 767.98px) {
  html body .ws-ft__cta, html body .ws-ft__flags { display: none !important; }
  html body .ws-ft__top { grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 18px 0 12px; }
  html body .ws-ft__logo img { width: 70px; }
  html body .ws-ft__soc a { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
  html body .ws-ft__soc { gap: 6px; }
  html body .ws-ft h4 { margin: 0 0 6px; font-size: 10px; }
  html body .ws-ft ul { gap: 4px; }
  html body .ws-ft nav li a { font-size: 12.5px; font-weight: 600; }
  html body .ws-ft__con li { font-size: 12px; gap: 8px; align-items: center; }
  html body .ws-ft__con i { flex-basis: 24px; height: 24px; font-size: 12px; margin-top: 0; border-radius: 7px; }
  html body .ws-ft__bar .container { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 4px 10px !important; padding-top: 9px !important; padding-bottom: 10px !important; font-size: 11px !important; }
  html body .ws-ft__legal { display: none !important; }
  html body .ws-ft__top { text-align: center; }
  html body .ws-ft__brand { grid-column: 1 / -1; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; gap: 10px; }
  html body .ws-ft__logo img { width: 84px; margin: 0 auto; }
  html body .ws-ft__soc { justify-content: center; margin: 0 !important; }
  html body .ws-ft nav { display: flex; flex-direction: column; align-items: center; }
  html body .ws-ft nav ul { justify-items: center; }
  html body .ws-ft nav li a::before { display: none; }
  html body .ws-ft__con { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; padding-top: 10px; border-top: 1px solid #ece8f7; }
  html body .ws-ft__con ul { justify-items: center; }
  html body .ws-ft__bar .container { text-align: center; }
}

/* ---------- live search suggestions (ws-suggest.js) ---------- */
.wsg { position: fixed; z-index: 2600; overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: #fff; border: 1px solid #ebe7f5; border-radius: 16px;
  box-shadow: 0 24px 50px -18px rgba(30, 27, 75, .35), 0 4px 12px -6px rgba(30, 27, 75, .12); opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.wsg.show { opacity: 1; transform: none; }
.wsg[hidden] { display: block; visibility: hidden; pointer-events: none; }
.wsg-o { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; color: #1e293b !important; text-decoration: none; font-size: 14px; }
.wsg-o > i:first-child { flex: 0 0 18px; font-size: 15px; color: #64748b; text-align: center; }
.wsg-o span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wsg-o span b { font-weight: 800; color: #0f172a; }
.wsg-o small { display: block; font-size: 11.5px; color: #94a3b8; font-weight: 500; }
.wsg-o em { flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 700; color: #5a00a5; background: #f3edfc; padding: 2px 8px; border-radius: 999px; }
.wsg-go { font-size: 12px; color: #cbd5e1; }
.wsg-o:hover, .wsg-o.hl { background: #f6f3fd; }
.wsg-all { border-bottom: 1px solid #f1eff8; border-radius: 11px 11px 4px 4px; margin-bottom: 2px; }
.wsg-none { padding: 12px 10px; font-size: 13px; color: #94a3b8; }

.sh-pop { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px -14px 2px; padding: 0 14px; }
.sh-pop::-webkit-scrollbar { display: none; }
.sh-pop a { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; border: 1px solid #e3e5ea; background: #fff; color: #3c4043 !important; font-size: 13px; font-weight: 600; text-decoration: none; }
.sh-pop a:active { background: #f1f3f4; }

/* ---------- search: full-screen, keyboard-friendly, GPU-only animation ---------- */
@media (max-width: 991.98px) {
  html body .sh .sh-panel { top: 0; bottom: 0; max-height: none; height: 100%; height: 100dvh; border-radius: 0; box-shadow: none;
    padding: calc(10px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)) !important;
    opacity: 0; transform: translate3d(0, 18px, 0); transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .18s ease; will-change: transform, opacity;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; contain: layout paint; }
  html body .sh.open .sh-panel { opacity: 1; transform: none; }
  html body .sh .sh-scrim { background: #fff; transition: opacity .18s; }
  html body .sh .sh-grab { display: none; }
  html body .sh .sh-form { box-shadow: 0 1px 6px rgba(32, 33, 36, .18); }
  html body .sh .sh-list li a { padding: 12px 6px; }
  html body .sh .sh-list li a:active { background: #f1f3f4; transition: none; }
  html body .sh #apSugs { contain: content; }
}

/* ==========================================================================
   Application & referral forms — minimal, professional, fast to fill
   ========================================================================== */
html body .apply-page-section, html body .refer-form-section { background: #f6f7fb; }
html body .apply-page-section { padding: 112px 0 56px; }
.ap-head { text-align: left !important; max-width: 860px; margin: 0 auto 16px !important; }
.ap-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5a00a5; background: #f3edfc; padding: 5px 11px; border-radius: 999px; }
.ap-head h1 { margin: 10px 0 6px !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 800 !important; color: #1e1b4b !important; letter-spacing: -.02em; line-height: 1.15; }
.ap-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; font-size: 14px; color: #475569; }
.ap-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ap-meta i { color: #7c3aed; }
.ap-meta .pay { color: #047857; font-weight: 700; } .ap-meta .pay i { color: #047857; }
.ap-head .apply-heading__note { margin: 0 !important; font-size: 12.5px !important; color: #94a3b8 !important; }
.ap-prog { position: sticky; top: 84px; z-index: 30; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; max-width: 860px; margin: 0 auto 14px; padding: 10px 14px;
  background: rgba(255, 255, 255, .96); border: 1px solid #ebe7f5; border-radius: 14px; box-shadow: 0 12px 26px -22px rgba(30, 27, 75, .6); transition: top .3s cubic-bezier(.2, .8, .2, 1); }
body:has(#header.ap-hide) .ap-prog { top: 10px; }
.ap-prog__steps { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #94a3b8; }
.ap-prog__steps span { display: inline-flex; align-items: center; gap: 5px; }
.ap-prog__steps span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; transition: background .25s; }
.ap-prog__steps span.ok { color: #1e1b4b; } .ap-prog__steps span.ok::before { background: #22c55e; }
.ap-prog__lbl { display: none; font-size: 11.5px; font-weight: 800; color: #1e1b4b; }
html body .apply-form .row > [class*="col-"] { display: flex; flex-direction: column; }
html body .apply-form .row > [class*="col-"] > .apply-label { margin-top: auto; }
.ap-prog__pc { grid-row: 1 / 3; grid-column: 2; font-size: 15px; font-weight: 800; color: #5a00a5; min-width: 42px; text-align: right; }
.ap-prog.done .ap-prog__pc { color: #047857; }
.ap-prog__bar { height: 5px; border-radius: 5px; background: #f1eff8; overflow: hidden; }
.ap-prog__bar i { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #5a00a5 55%, #2563eb); transform-origin: left; transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ap-prog.done .ap-prog__bar i { background: linear-gradient(90deg, #059669, #22c55e); }

html body .apply-form, html body .refer-form-wrap { max-width: 860px; margin: 0 auto; }
html body .apply-block { padding: 22px 24px; margin-bottom: 14px; border-radius: 18px; background: #fff; border: 1px solid #ebe7f5; box-shadow: 0 16px 34px -32px rgba(30, 27, 75, .6); transition: border-color .25s; }
html body .apply-block.ap-done { border-color: #c9f0d8; }
html body .apply-block__header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f1eff8; }
html body .apply-block__num { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; background: #f3edfc; color: #5a00a5; box-shadow: none; display: grid; place-items: center; transition: background .25s, color .25s; }
html body .apply-block.ap-done .apply-block__num { background: #22c55e; color: #fff; font-size: 0; }
html body .apply-block.ap-done .apply-block__num::before { content: "\F26E"; font-family: bootstrap-icons; font-size: 15px; }
html body .apply-block__header h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #1e1b4b; }
html body .apply-label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #334155; }
.ap-opt { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: #94a3b8; }
html body .apply-input, html body .apply-form .form-select, html body .refer-form-wrap .form-select {
  height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #e6e3ef; background-color: #fbfaff; font-size: 15px; color: #0f172a; box-shadow: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
html body .apply-input:focus, html body .apply-form .form-select:focus, html body .refer-form-wrap .form-select:focus { border-color: #a78bfa; background-color: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); outline: 0; }
html body .apply-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
html body .apply-phone-group { gap: 8px; }
html body .apply-radio-group { gap: 8px; }
html body .apply-upload-grid { gap: 10px; }
html body .apply-upload-card { position: relative; padding: 16px 12px; border-radius: 14px; border: 1.5px dashed #d9d3ea; background: #fbfaff; transition: border-color .2s, background .2s; }
html body .apply-upload-card:hover { border-color: #a78bfa; background: #f6f3fd; }
html body .apply-upload-card.has-file { border-style: solid; border-color: #86efac; background: #f0fdf4; }
html body .apply-upload-card.has-file::after { content: "\F26B"; font-family: bootstrap-icons; position: absolute; top: 8px; right: 10px; font-size: 16px; color: #16a34a; }
html body .apply-upload-card__icon { color: #7c3aed; }
html body .apply-upload-card__btn { border-radius: 9px; background: #fff; border: 1px solid #ddd2f5; color: #5a00a5; font-weight: 700; box-shadow: none; }
html body .apply-upload-card.has-file .apply-upload-card__hint { color: #15803d; font-weight: 700; word-break: break-all; }
html body .apply-checkbox { padding: 14px; border-radius: 14px; border: 1.5px solid #e6e3ef; background: #fbfaff; cursor: pointer; }
html body .apply-checkbox:has(input:checked) { border-color: #86efac; background: #f0fdf4; }
html body .apply-checkbox input { accent-color: #5a00a5; }
html body .apply-submit-wrap { text-align: center; margin-top: 6px; }
html body .apply-submit-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 300px; height: 52px; padding: 0 28px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0; text-transform: none; box-shadow: 0 16px 30px -16px rgba(90, 0, 165, .8); }
html body .apply-submit-btn:active { transform: scale(.98); }
.ap-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: apSpin .7s linear infinite; }
.apply-submit-btn.is-loading { pointer-events: none; opacity: .9; } .apply-submit-btn.is-loading .ap-spin { display: inline-block; } .apply-submit-btn.is-loading i { display: none; }
@keyframes apSpin { to { transform: rotate(360deg); } }
.ap-bad .apply-input, .ap-bad .form-select, .ap-bad.apply-upload-card, .ap-bad.apply-checkbox { border-color: #f87171 !important; background-color: #fff7f7 !important; }
.ap-msg { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: #dc2626; }
html body .apply-errors { max-width: 860px; margin: 0 auto 14px; border-radius: 14px; }

@media (max-width: 767.98px) {
  html body .apply-page-section { padding: 86px 0 28px; }
  .ap-head { margin-bottom: 12px !important; }
  .ap-eyebrow { font-size: 9.5px; padding: 4px 9px; }
  .ap-head h1 { font-size: 21px !important; margin: 8px 0 4px !important; }
  .ap-meta { font-size: 12.5px; gap: 4px 12px; }
  .ap-head .apply-heading__note { font-size: 11px !important; }
  .ap-prog { top: 64px; padding: 8px 11px; gap: 5px 10px; border-radius: 12px; margin-bottom: 10px; }
  .ap-prog__steps { display: none; } .ap-prog__lbl { display: block; }
  .ap-prog__pc { font-size: 13px; min-width: 36px; }
  html body .apply-block { padding: 14px 12px; border-radius: 16px; margin-bottom: 10px; }
  html body .apply-block__header { margin-bottom: 12px; padding-bottom: 10px; }
  html body .apply-block__header h2 { font-size: 14.5px; }
  html body .apply-label { font-size: 12px; margin-bottom: 5px; }
  html body .apply-input, html body .apply-form .form-select, html body .refer-form-wrap .form-select { height: 44px; font-size: 15px; border-radius: 11px; padding: 0 12px; }
  html body .apply-textarea { min-height: 84px; padding: 10px 12px; }
  html body .apply-upload-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  html body .apply-upload-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ic t b" "ic h b"; align-items: center; column-gap: 10px; row-gap: 1px; padding: 10px 12px; text-align: left; }
  html body .apply-upload-card__icon { grid-area: ic; margin: 0 !important; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f3edfc; font-size: 16px !important; }
  html body .apply-upload-card__title { grid-area: t; font-size: 13px !important; margin: 0; text-align: left; justify-content: flex-start !important; display: flex; gap: 2px; }
  html body .apply-upload-card__hint { grid-area: h; font-size: 10.5px !important; margin: 0; text-align: left; }
  html body .apply-upload-card__btn { grid-area: b; font-size: 12px !important; padding: 7px 12px !important; margin: 0 !important; }
  html body .apply-upload-card.has-file::after { top: 50%; right: auto; left: 40px; transform: translateY(-120%); font-size: 13px; }
  html body .apply-checkbox { padding: 12px; font-size: 13px; }
  html body .apply-submit-btn { width: 100%; min-width: 0; height: 50px; font-size: 15.5px; }
  html body .apply-submit-note { font-size: 11.5px; }
}

/* ---------- employer inquiry form: same clean style as the application form ---------- */
html body .inquiry-form-section { background: #f6f7fb; }
html body .ef-prog { max-width: 900px; }
html body .employer-form { max-width: 900px; margin: 0 auto; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
html body .employer-form .form-block { padding: 22px 24px; margin-bottom: 14px; border-radius: 18px; background: #fff; border: 1px solid #ebe7f5; box-shadow: 0 16px 34px -32px rgba(30, 27, 75, .6); transition: border-color .25s; }
html body .employer-form .form-block.ap-done { border-color: #c9f0d8; }
html body .employer-form .form-block h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #f1eff8; font-size: 16px; font-weight: 800; color: #1e1b4b; }
.ef-n { flex: 0 0 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #f3edfc; color: #5a00a5; transition: background .25s, color .25s; }
html body .employer-form .form-block.ap-done .ef-n { background: #22c55e; color: #fff; font-size: 0; }
html body .employer-form .form-block.ap-done .ef-n::before { content: "\F26E"; font-family: bootstrap-icons; font-size: 15px; }
html body .employer-form .form-label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #334155; }
html body .employer-form .form-label .required { color: #dc2626; }
html body .employer-form .row > [class*="col-"] { display: flex; flex-direction: column; }
html body .employer-form .row > [class*="col-"] > .form-label { margin-top: auto; }
html body .employer-form .form-control, html body .employer-form .form-select { height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #e6e3ef; background-color: #fbfaff; font-size: 15px; color: #0f172a; box-shadow: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
html body .employer-form textarea.form-control { height: auto; min-height: 96px; padding: 12px 14px; }
html body .employer-form .form-control:focus, html body .employer-form .form-select:focus { border-color: #a78bfa; background-color: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); }
.ef-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; border: 1.5px solid #e6e3ef; background: #fbfaff; font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer; transition: border-color .2s, background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.ef-chip input { width: 16px; height: 16px; margin: 0; accent-color: #5a00a5; }
.ef-chip:has(input:checked) { border-color: #7c3aed; background: #f3edfc; color: #4c1d95; }
html body .employer-form .form-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px; border-radius: 14px; border: 1.5px solid #e6e3ef; background: #fbfaff; }
html body .employer-form .form-check:has(input:checked) { border-color: #86efac; background: #f0fdf4; }
html body .employer-form .form-check-input { float: none; margin: 2px 0 0; accent-color: #5a00a5; flex: 0 0 auto; }
html body .employer-form .form-check-label { cursor: pointer; font-size: 14px; color: #334155; }
html body .employer-form .ap-bad .form-control, html body .employer-form .ap-bad .form-select, html body .employer-form .form-check.ap-bad { border-color: #f87171 !important; background-color: #fff7f7 !important; }
html body .ef-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 300px; height: 52px; border: 0 !important; border-radius: 14px !important; font-size: 16px; font-weight: 800; }
.ef-submit.is-loading { pointer-events: none; opacity: .9; } .ef-submit.is-loading .ap-spin { display: inline-block; } .ef-submit.is-loading .bi { display: none; }
.ef-note { margin: 10px 0 0; font-size: 12.5px; color: #64748b; }
@media (max-width: 767.98px) {
  html body .employer-form .form-block { padding: 14px 12px; border-radius: 16px; margin-bottom: 10px; }
  html body .employer-form .form-block h4 { font-size: 14.5px; margin-bottom: 12px; padding-bottom: 10px; }
  html body .employer-form .form-label { font-size: 12px; }
  html body .employer-form .form-control, html body .employer-form .form-select { height: 44px; font-size: 15px; border-radius: 11px; padding: 0 12px; }
  html body .employer-form .row.g-3 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
  html body .employer-form .row.g-3 > .col-md-6, html body .employer-form .row.g-3 > .col-md-4, html body .employer-form .row.g-3 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  html body .employer-form .row.g-3 > .col-md-6:has(input[type=email]), html body .employer-form .row.g-3 > .col-md-6:has(input[name=company_website]), html body .employer-form .row.g-3 > [class*="col-"]:has(textarea) { flex: 0 0 100%; max-width: 100%; }
  .ef-chip { padding: 8px 11px; font-size: 12.5px; }
  html body .employer-form .form-block.wsm-acc { padding: 0; }
  html body .employer-form .form-block.wsm-acc > h4 { justify-content: flex-start; gap: 10px; margin: 0 !important; padding: 13px 12px !important; background: none; border-radius: 16px; font-size: 14.5px; }
  html body .employer-form .form-block.wsm-acc > h4::after { content: "Add"; margin-left: auto; padding: 6px 11px; font-size: 11.5px; box-shadow: inset 0 0 0 1px #e3d8f6; }
  html body .employer-form .form-block.wsm-acc.wsm-open { padding: 0 12px 14px; }
  html body .employer-form .form-block.wsm-acc.wsm-open > h4 { padding: 13px 0 10px !important; margin-bottom: 12px !important; border-bottom: 1px solid #f1eff8; border-radius: 0; }
  html body .employer-form .form-block.wsm-acc.wsm-open > h4::after { content: "Hide"; }
  html body .employer-form .row.g-3 > .col-md-6:has(input[name=contact_full_name]), html body .employer-form .row.g-3 > [class*="col-"]:has(input[name=phone]) { flex: 0 0 100%; max-width: 100%; }
  html body .ef-submit { width: 100%; min-width: 0; height: 50px; font-size: 15.5px; }
}

.ap-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: #94a3b8; letter-spacing: 0; text-transform: none; }
@media (max-width: 767.98px) { .ap-sub { font-size: 11px; } }

/* ---------- apply form v3: minimal gender, form dropdowns, compact uploads ---------- */
.wss-box { position: relative; display: block; width: 100%; min-width: 0; cursor: pointer; }
.wss-box > select { pointer-events: none; width: 100%; }
.wss-box--code { flex: 0 0 38%; width: 38%; min-width: 0; }
.wss-box > select.apply-input--code, .wss-box > select { padding-right: 32px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.apply-phone-group { display: flex; align-items: stretch; }
.apply-phone-group > input { flex: 1; min-width: 0; }
.wss-box.wss-open > select, .wss-box:focus-within > select { border-color: #a78bfa !important; box-shadow: 0 0 0 4px rgba(124, 58, 237, .12) !important; background-color: #fff !important; }
.wss-s { position: sticky; top: -6px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: -6px -6px 4px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1eff8; }
.wss-s i { color: #94a3b8; font-size: 14px; }
.wss-q { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: #0f172a; }
.wss-o[hidden] { display: none; }
/* gender: plain dots, like most professional forms */
html body .apply-radio-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 14px; min-height: 46px; }
@media (min-width: 768px) { html body .apply-radio { font-size: 14px !important; gap: 7px !important; } html body .apply-radio input { width: 18px !important; height: 18px !important; } }
html body .apply-radio { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0 !important; background: none !important; border-radius: 0; font-size: 15px; font-weight: 600; color: #334155; cursor: pointer; }
html body .apply-radio input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; display: grid; place-items: center; transition: border-color .15s; cursor: pointer; }
html body .apply-radio input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #5a00a5; transform: scale(0); transition: transform .15s cubic-bezier(.3, .7, .4, 1.4); }
html body .apply-radio input:checked { border-color: #5a00a5; }
html body .apply-radio input:checked::after { transform: scale(1); }
html body .apply-radio input:focus-visible { box-shadow: 0 0 0 4px rgba(124, 58, 237, .18); }
html body .apply-radio:has(input:checked) { color: #1e1b4b; }
.ap-bad .apply-radio input { border-color: #f87171 !important; }
/* uploads: CV as the main card, the rest as compact icon tiles */
html body .apply-upload-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; }
html body .apply-upload-card--main { grid-column: 1 / -1; display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic t b" "ic h b"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 16px 18px !important; text-align: left; border-color: #c9b8f2 !important; }
html body .apply-upload-card--main .apply-upload-card__icon { grid-area: ic; width: 44px; height: 44px; margin: 0 !important; display: grid; place-items: center; border-radius: 12px; background: #f3edfc; font-size: 20px !important; }
html body .apply-upload-card--main .apply-upload-card__title { grid-area: t; display: flex; gap: 3px; justify-content: flex-start !important; margin: 0 !important; min-height: 0 !important; font-size: 15px !important; text-align: left; }
html body .apply-upload-card--main .apply-upload-card__hint { grid-area: h; margin: 0 !important; text-align: left; font-size: 12px !important; }
html body .apply-upload-card--main .apply-upload-card__btn { grid-area: b; margin: 0 !important; padding: 9px 16px !important; font-size: 13px !important; color: #fff !important; border: 0 !important; background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb) !important; }
html body .apply-upload-card:not(.apply-upload-card--main) { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 12px 6px !important; text-align: center; }
html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__icon { order: -1; width: 40px; height: 40px; margin: 0 !important; display: grid; place-items: center; border-radius: 12px; background: #f3edfc; font-size: 18px !important; }
html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__title { display: flex; gap: 2px; justify-content: center !important; margin: 0 !important; min-height: 0 !important; font-size: 12.5px !important; }
html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__btn { display: none !important; }
html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__hint { display: none; margin: 0 !important; font-size: 10px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .apply-upload-card.has-file:not(.apply-upload-card--main) .apply-upload-card__hint { display: block; }
html body .apply-upload-card.has-file .apply-upload-card__icon { background: #dcfce7; color: #16a34a; }
html body .apply-upload-card.has-file::after { top: 8px !important; right: 8px !important; left: auto !important; transform: none !important; font-size: 14px !important; }
@media (max-width: 767.98px) {
  html body .apply-upload-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
  html body .apply-upload-card--main { grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 10px; padding: 12px !important; }
  html body .apply-upload-card--main .apply-upload-card__icon { width: 38px; height: 38px; font-size: 17px !important; }
  html body .apply-upload-card--main .apply-upload-card__title { font-size: 14px !important; }
  html body .apply-upload-card--main .apply-upload-card__hint { font-size: 10.5px !important; }
  html body .apply-upload-card--main .apply-upload-card__btn { padding: 8px 12px !important; font-size: 12px !important; }
  html body .apply-upload-card:not(.apply-upload-card--main) { min-height: 78px; padding: 10px 4px !important; gap: 5px; border-radius: 12px; }
  html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__icon { width: 34px; height: 34px; font-size: 16px !important; border-radius: 10px; }
  html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__title { font-size: 11px !important; }
  html body .apply-radio-group { min-height: 40px; gap: 6px 20px; }
  html body .apply-radio { font-size: 14.5px; }
  .wss-box--code { flex-basis: 40%; width: 40%; }
}
.wss-nm { margin-left: 6px; font-size: 13px; font-weight: 500; color: #64748b; }
.wss-box--code { flex: 0 0 auto !important; width: auto !important; min-width: 112px; }

/* ---------- apply form v4: smaller gender, CV + passport main, tighter wording ---------- */
html body .apply-radio-group { gap: 4px 16px !important; min-height: 44px !important; }
html body .apply-radio { font-size: 13.5px !important; font-weight: 600 !important; gap: 7px !important; color: #475569 !important; }
html body .apply-radio input { width: 16px !important; height: 16px !important; border-width: 1.5px !important; }
html body .apply-radio input::after { width: 8px !important; height: 8px !important; }
html body .apply-radio:has(input:checked) { color: #1e1b4b !important; }
html body .apply-upload-card--main { grid-column: span 3 !important; padding: 12px 14px !important; column-gap: 12px !important; grid-template-columns: 38px minmax(0, 1fr) auto !important; }
html body .apply-upload-card--main .apply-upload-card__icon { width: 38px !important; height: 38px !important; font-size: 17px !important; }
html body .apply-upload-card--main .apply-upload-card__title { font-size: 14px !important; }
html body .apply-upload-card--main .apply-upload-card__hint { font-size: 11px !important; }
html body .apply-upload-card--main .apply-upload-card__btn { padding: 8px 12px !important; font-size: 12px !important; white-space: nowrap; }
html body .apply-upload-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
html body .apply-upload-card:not(.apply-upload-card--main) { grid-column: span 2; min-height: 74px !important; padding: 10px 6px !important; gap: 5px !important; }
html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__icon { width: 32px !important; height: 32px !important; font-size: 15px !important; border-radius: 9px !important; }
html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__title { font-size: 11.5px !important; }
html body .apply-label { font-size: 12.5px !important; }
html body .apply-input::placeholder { color: #a3a9bb; font-size: 14px; }
html body .apply-phone-group { gap: 8px !important; }
html body .apply-phone-group > * { min-width: 0; }
html body .ws-phone-error:empty { display: none; }
@media (max-width: 767.98px) {
  html body .apply-upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  html body .apply-upload-card--main { grid-column: 1 / -1 !important; padding: 10px 12px !important; grid-template-columns: 34px minmax(0, 1fr) auto !important; }
  html body .apply-upload-card--main .apply-upload-card__icon { width: 34px !important; height: 34px !important; font-size: 15px !important; }
  html body .apply-upload-card--main .apply-upload-card__title { font-size: 13px !important; }
  html body .apply-upload-card--main .apply-upload-card__hint { font-size: 10px !important; }
  html body .apply-upload-card:not(.apply-upload-card--main) { grid-column: span 1; min-height: 70px !important; }
  html body .apply-upload-card:not(.apply-upload-card--main) .apply-upload-card__title { font-size: 11px !important; }
  html body .apply-label { font-size: 12px !important; }
  html body .apply-input::placeholder { font-size: 13.5px; }
  html body .apply-radio { font-size: 13px !important; }
  html body .ap-sub { font-size: 10.5px !important; }
  html body .apply-block__header h2 { font-size: 14px !important; }
}
.ap-dob { display: grid; grid-template-columns: 0.8fr 1fr 1.05fr; gap: 6px; }
.ap-dob .wss-box > select, .ap-dob > select { padding-left: 10px !important; padding-right: 24px !important; background-position: right 8px center !important; }
.ap-dob--late select { border-color: #f87171 !important; }
.ap-bad .ap-dob select { border-color: #f87171 !important; background-color: #fff7f7 !important; }
.ap-dob .wss-box > select, .ap-dob > select { text-overflow: clip !important; font-size: 14.5px; }
@media (max-width: 767.98px) {
  html body .apply-form .row.g-4 > .col-md-4:has(.ap-dob) { flex: 0 0 100%; max-width: 100%; }
  .ap-dob { grid-template-columns: 0.75fr 1fr 1fr; }
}
@media (max-width: 767.98px) {
  html body .apply-form .row.g-4 > [class*="col-"]:has(#fullName) { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767.98px) {
  html body .apply-form .row.g-4 > [class*="col-"]:has(.apply-radio-group) > .apply-label { margin-top: 0; }
  html body .apply-radio-group { min-height: 34px !important; }
}

/* ---------- employer form v2: short & smart ---------- */
html body .employer-form.ef2 .form-block h4 { flex-wrap: wrap; row-gap: 0; }
html body .employer-form.ef2 .form-block h4 .ap-sub { flex: 0 0 100%; margin: 2px 0 0 38px; }
.ef-more { padding: 0 !important; }
.ef-more > summary { display: flex; align-items: center; gap: 10px; padding: 16px 20px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.ef-more > summary::-webkit-details-marker { display: none; }
.ef-more__t { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: #1e1b4b; }
.ef-more__t .ap-sub { margin: 2px 0 0 !important; }
.ef-more .ef-n { flex-basis: 28px; font-size: 14px; }
.ef-more__c { color: #94a3b8; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.ef-more[open] .ef-more__c { transform: rotate(180deg); }
.ef-more[open] .ef-n i { transform: rotate(45deg); display: inline-block; transition: transform .2s; }
.ef-more__b { padding: 0 20px 20px; border-top: 1px solid #f1eff8; animation: jvIn .3s cubic-bezier(.2, .8, .2, 1); }
.ef-h5 { margin: 16px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7c3aed; }
.ef-more .ef-chips { margin-top: 12px; }
html body .employer-form .wss-box > select { width: 100%; }
@keyframes jvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) {
  .ef-more > summary { padding: 13px 12px; }
  .ef-more__t { font-size: 14px; }
  .ef-more__b { padding: 0 12px 14px; }
  html body .employer-form.ef2 .row.g-3 > .col-md-6:not(.col-6), html body .employer-form.ef2 .row.g-3 > .col-md-4.col-12 { flex: 0 0 100% !important; max-width: 100% !important; }
  html body .employer-form.ef2 .row.g-3 > .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
}
html body .employer-form .form-check { flex-wrap: wrap; }
html body .employer-form .form-check .ap-msg { flex: 0 0 100%; margin: 4px 0 0 26px; }

/* ---------- employer form: final, smaller wording ---------- */
html body .employer-form.ef2 .form-block { padding: 18px 20px; }
html body .employer-form.ef2 .form-block h4 { font-size: 15px; margin-bottom: 14px; padding-bottom: 10px; }
html body .employer-form.ef2 .form-label { font-size: 12px; margin-bottom: 5px; }
html body .employer-form.ef2 .ap-opt { font-size: 10px; }
html body .employer-form.ef2 .form-control, html body .employer-form.ef2 .form-select { height: 42px; font-size: 14.5px; }
html body .employer-form.ef2 textarea.form-control { min-height: 80px; }
html body .employer-form.ef2 .form-control::placeholder { font-size: 13.5px; color: #a3a9bb; }
html body .employer-form.ef2 .row.g-3 { --bs-gutter-y: 12px; }
html body .employer-form.ef2 .ef-chip { padding: 7px 12px; font-size: 12.5px; }
html body .employer-form.ef2 .form-check-label { font-size: 13px; }
.ef-more__t { font-size: 14px; }
.ef-h5 { font-size: 10px; margin: 14px 0 8px; }
html body .ef-submit { height: 48px; font-size: 15px; min-width: 260px; }
html body .inquiry-form-section .section-title { padding-bottom: 18px; }
@media (max-width: 767.98px) {
  html body .employer-form.ef2 .form-block { padding: 14px 12px; }
  html body .employer-form.ef2 .form-block h4 { font-size: 14px; }
  html body .employer-form.ef2 .form-label { font-size: 11.5px; }
  html body .employer-form.ef2 .form-control, html body .employer-form.ef2 .form-select { height: 42px; font-size: 15px; }
  html body .ef-submit { height: 48px; font-size: 15px; }
  .ef-note { font-size: 11.5px; }
}

/* ===== Application form — 4-step wizard (Personal · Qualification · Job · Documents) ===== */
.ap-wz .ap-wz-hide { display: none !important; }
.ap-wz .ap-wz-in { animation: apWzIn .35s cubic-bezier(.2,.7,.2,1); }
@keyframes apWzIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ap-wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 860px; margin: 6px auto 0; }
.ap-wz-nav button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 14px; font: 600 15.5px Poppins, sans-serif; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.ap-wz-next { min-width: 170px; padding: 0 26px; border: 0; color: #fff; background: linear-gradient(135deg, #7c3aed, #5a00a5 55%, #2563eb); box-shadow: 0 12px 26px -12px rgba(90,0,165,.7); }
.ap-wz-next:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(90,0,165,.75); }
.ap-wz-back { padding: 0 20px; border: 1.5px solid #e4def4; background: #fff; color: #1e1b4b; }
.ap-wz-back:hover { background: #f6f3fd; }
.ap-wz-count { font-size: 13px; font-weight: 700; color: #64748b; }
.ap-wz .apply-submit-wrap { margin-top: 10px; }
.ap-wz .apply-block--declaration { margin-top: 14px; }
.ap-prog__steps span[role=button] { cursor: default; padding: 2px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.ap-prog__steps span.reach { cursor: pointer; color: #475569; }
.ap-prog__steps span.cur { color: #5a00a5; border-bottom-color: #7c3aed; }
.ap-prog__steps span.cur::before { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.ap-prog__steps span.ok.cur::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
@media (max-width: 767.98px) {
  .ap-wz-nav { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); z-index: 25; margin: 10px -4px 0; padding: 10px; border-radius: 16px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(30,27,75,.35); }
  .ap-wz-nav button { height: 46px; font-size: 14.5px; }
  .ap-wz-next { min-width: 0; flex: 1; }
  .ap-wz-count { display: none; }
}
.ap-wz-nav .apply-submit-btn.ap-wz-submit { width: auto; min-width: 230px; height: 50px; margin: 0; padding: 0 26px; border-radius: 14px; font: 600 15.5px Poppins, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ap-wz-nav .apply-submit-btn.ap-wz-submit[hidden] { display: none; }
.ap-wz .apply-submit-wrap { text-align: center; margin-top: 12px; }
@media (max-width: 767.98px) {
  .ap-wz-nav .apply-submit-btn.ap-wz-submit { min-width: 0; flex: 1; height: 46px; font-size: 14.5px; padding: 0 14px; }
  .ap-wz-nav.is-last .ap-wz-back { padding: 0 14px; }
}

/* ---------- apply page: trust strip, breadcrumb, side panel (desktop) + compact mobile ---------- */
.ap-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; max-width: 860px; margin: 0 auto 10px; font-size: 12.5px; color: #94a3b8; }
.ap-crumbs a { color: #64748b; text-decoration: none; } .ap-crumbs a:hover { color: #5a00a5; }
.ap-crumbs i { font-size: 9px; } .ap-crumbs span { color: #1e1b4b; font-weight: 700; }
.ap-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ap-trust li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid #ebe7f5; font-size: 12.5px; font-weight: 600; color: #334155; }
.ap-trust i { color: #16a34a; font-size: 13px; }
.ap-side { display: none; }
@media (min-width: 1200px) {
  .ap-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .ap-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; margin-top: 34px; transition: top .3s; }
  body:has(#header.ap-hide) .ap-side { top: 20px; }
}
.ap-card { display: block; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #ebe7f5; box-shadow: 0 16px 34px -32px rgba(30,27,75,.6); text-decoration: none; }
.ap-card__k { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7c3aed; }
.ap-card__t { display: block; font-size: 17px; font-weight: 800; color: #1e1b4b; line-height: 1.25; }
.ap-card__facts { margin: 10px 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: #475569; }
.ap-card__facts li { display: flex; align-items: center; gap: 8px; } .ap-card__facts i { color: #7c3aed; }
.ap-card__facts .pay { color: #047857; font-weight: 700; } .ap-card__facts .pay i { color: #047857; }
.ap-card__link { font-size: 13px; font-weight: 700; color: #5a00a5; text-decoration: none; } .ap-card__link:hover { text-decoration: underline; }
.ap-next { margin: 0; padding: 0; list-style: none; counter-reset: apn; }
.ap-next li { position: relative; padding: 0 0 14px 38px; counter-increment: apn; }
.ap-next li:last-child { padding-bottom: 0; }
.ap-next li::before { content: counter(apn); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f3edfc; color: #5a00a5; font-size: 12.5px; font-weight: 800; }
.ap-next li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 30px; bottom: 4px; width: 1.5px; background: #ece7f8; }
.ap-next b { display: block; font-size: 13.5px; color: #1e1b4b; }
.ap-next span { display: block; font-size: 12.5px; color: #64748b; line-height: 1.45; }
.ap-card--track { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #334155; font-size: 13.5px; transition: border-color .2s, transform .2s; }
.ap-card--track:hover { border-color: #c4b5fd; transform: translateY(-1px); color: #334155; }
.ap-card--track > i:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f3edfc; color: #5a00a5; flex: none; }
.ap-card--track span { flex: 1; } .ap-card--track b { display: block; color: #1e1b4b; }
.ap-card--track > i:last-child { color: #94a3b8; }

@media (max-width: 767.98px) {
  html body .apply-page-section { padding: 78px 0 24px; }
  .ap-crumbs { display: none; }
  .ap-head { margin-bottom: 10px !important; }
  .ap-eyebrow { font-size: 9px; padding: 3px 8px; letter-spacing: .08em; }
  .ap-head h1 { font-size: 19px !important; margin: 7px 0 3px !important; }
  .ap-meta { font-size: 12px; gap: 2px 10px; margin-bottom: 0; }
  .ap-trust { flex-wrap: nowrap; gap: 12px; margin-top: 7px; }
  .ap-trust li { padding: 0; border: 0; background: none; font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; gap: 4px; }
  .ap-trust i { font-size: 11px; }
  .ap-trust li:nth-child(2), .ap-trust li:nth-child(3) { display: none; }
  .ap-prog { padding: 7px 11px; margin-bottom: 8px; gap: 4px 10px; }
  .ap-prog__lbl { font-size: 11px; }
  html body .apply-block { padding: 12px 12px 4px; margin-bottom: 8px; }
  html body .apply-block__header { margin-bottom: 10px; padding-bottom: 8px; }
  html body .apply-block__num { width: 24px; height: 24px; font-size: 12px; border-radius: 8px; }
  html body .apply-block__header h2 { font-size: 14px; }
  html body .apply-block .ap-sub { font-size: 11px; }
  html body .apply-input, html body .apply-form .form-select { height: 42px; font-size: 15px; }
  .ap-wz-nav { padding: 7px; border-radius: 14px; gap: 8px; }
  .ap-wz-nav button, .ap-wz-nav .apply-submit-btn.ap-wz-submit { height: 44px; font-size: 14.5px; }
  .ap-wz-nav.is-first .ap-wz-back { display: none; }
  .ap-wz-back { padding: 0 14px; }
}
@media (min-width: 1200px) {
  html body .apply-page-section > .container { max-width: 1240px; }
  .ap-trust li { font-size: 12px; padding: 5px 10px; }
}
@media (min-width: 768px) {
  .ap-trust { gap: 6px 20px; margin-top: 10px; }
  .ap-trust li { padding: 0; border: 0; background: none; font-size: 13px; color: #475569; }
  .ap-side { margin-top: 0; }
}
@media (min-width: 1200px) { .ap-trust li.ap-trust--x { display: none; } }

/* ---------- employer inquiry form: 3-step wizard + side panel ---------- */
@media (min-width: 1200px) {
  html body .inquiry-form-section .container:has(.ef-layout) { max-width: 1240px; }
}
.ef-trust { max-width: 900px; margin: 0 auto 12px; }
.employer-form .ap-wz-nav { max-width: 900px; }
.ap-wz-nav .ef-submit.ap-wz-submit { width: auto; min-width: 230px; height: 50px; margin: 0; padding: 0 26px; font-size: 15.5px; }
.ap-wz-nav .ef-submit.ap-wz-submit[hidden] { display: none !important; }
.employer-form.ap-wz .ef-submit-wrap { margin-top: 10px !important; }
.employer-form.ap-wz .ef-more { margin-top: 0; }
@media (max-width: 767.98px) {
  .ef-trust { justify-content: center; margin-bottom: 8px; }
  .ef-trust li:nth-child(3) { display: inline-flex; }
  html body .inquiry-form-section .section-title { padding-bottom: 14px; }
  html body .inquiry-form-section .section-title p { font-size: 16px !important; line-height: 1.3; margin: 6px 0 0; }
  html body .employer-form.ef2 .form-block { padding: 12px 12px 14px; margin-bottom: 8px; }
  html body .employer-form.ef2 .form-block h4 { font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; }
  .ap-wz-nav .ef-submit.ap-wz-submit { min-width: 0; flex: 1; height: 44px; font-size: 14.5px; padding: 0 14px; }
}
.ap-card--track span { min-width: 0; } .ap-card--track small { display: block; font-size: 12.5px; color: #5a00a5; overflow-wrap: anywhere; }
@media (min-width: 768px) { html body .inquiry-form-section .section-title::after { bottom: 4px; } }