/* =====================================================================
   OverseasHire / GulfGate — stylesheet
   Responsive across phones, tablets, laptops & desktops.
   Changes vs. original:
     • Fluid headings via clamp() (scale smoothly on every screen)
     • Auto-fitting grids for role cards, stats and feature cards
     • Logo image sizing + global img max-width (prevents overflow)
     • A consolidated, ordered set of breakpoints at the bottom
   ===================================================================== */

:root{--brand:#185FA5;--brand-dark:#13497f;--brand-tint:#E6F1FB;--ink:#1a1a18;--muted:#5f5e5a;--line:rgba(0,0,0,.10);--bg:#f5f5f3;--card:#FFFFFF;--radius-lg:12px;--radius:10px;--shadow:0 1px 2px rgba(20,20,18,.04),0 8px 24px -14px rgba(20,20,18,.12);--shadow-lg:0 20px 48px -20px rgba(20,20,18,.22);--success:#2E6B12;--success-tint:#EAF3DE}
*{box-sizing:border-box;margin:0;padding:0}*:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}::selection{background:var(--brand);color:#fff}
html,body{height:100%}
body{font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none}
svg{display:block}
img{max-width:100%;height:auto}

.launcher{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background:radial-gradient(1200px 600px at 50% -10%,#ECEAE3 0%,rgba(236,234,227,0) 60%),var(--bg)}
.lc-top{text-align:center;margin-bottom:30px}
.lc-logo{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:clamp(19px,4.4vw,22px);letter-spacing:-.4px}
.lc-logo span{color:var(--brand)}
.lc-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:grid;place-items:center;color:#fff}
.lc-sub{color:var(--muted);font-size:15px;margin-top:14px;max-width:520px}
.lc-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--brand);background:#fff;border:1px solid var(--line);padding:6px 13px;border-radius:20px;margin-top:18px;box-shadow:var(--shadow)}
.lc-badge .d{width:7px;height:7px;border-radius:50%;background:#3B6D11}
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;width:100%;max-width:880px}
.role-card{display:flex;align-items:flex-start;gap:15px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow);transition:.16s;position:relative;overflow:hidden}
.role-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rc)}
.role-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08);border-color:var(--rc)}
.rc-ic{width:50px;height:50px;border-radius:10px;background:var(--rt);color:var(--rc);display:grid;place-items:center;flex-shrink:0}
.rc-ic svg{width:24px;height:24px;stroke-width:2}
.rc-body{flex:1;min-width:0;padding-bottom:22px}
.rc-title{font-weight:800;font-size:16px;letter-spacing:-.2px}
.rc-desc{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5}
.rc-persona{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:600}
.rc-av{width:24px;height:24px;border-radius:7px;background:var(--rt);color:var(--rc);display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0}
.rc-go{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--rc);opacity:0;transform:translateX(-6px);transition:.16s}
.role-card:hover .rc-go{opacity:1;transform:translateX(0)}
.muted{color:var(--muted);font-weight:500}
.lc-reg{margin-top:20px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.lc-reg button{background:var(--brand-tint);color:var(--brand);border:1px solid #cdddfa;font-weight:700;font-size:13.5px;padding:8px 15px;border-radius:20px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;font-family:inherit}
.lc-reg button:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.lc-foot{margin-top:22px;color:var(--muted);font-size:12.5px;text-align:center;max-width:560px}
#stage{display:none;flex-direction:column;height:100vh}
.shellbar{height:48px;flex-shrink:0;background:#0F172A;color:#fff;display:flex;align-items:center;gap:12px;padding:0 16px}
.shellbar .sb-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.shellbar .sb-logo span{color:#7FA6F2}
.sb-mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#2E6BE6,#1659D6);display:grid;place-items:center}
.sb-viewing{display:flex;align-items:center;gap:8px;font-size:13px;color:#C7D2E3;margin-left:6px}
.sb-dot{width:8px;height:8px;border-radius:50%}
.sb-role{color:#fff;font-weight:700}
.sb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.sb-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;font-weight:700;font-size:13px;color:#fff;background:rgba(255,255,255,.12)}
.sb-btn:hover{background:rgba(255,255,255,.2)}
.sb-btn svg{width:15px;height:15px}
.sb-switch{position:relative}
.sb-menu{position:absolute;right:0;top:40px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(16,30,54,.22);padding:6px;width:230px;max-width:calc(100vw - 24px);z-index:20;display:none}
.sb-menu.show{display:block}
.sb-menu .mh{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.sb-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink)}
.sb-menu button:hover{background:#F4F7FB}
.sb-menu button .md{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.sb-menu button.active{background:#F4F7FB}
.sb-menu .sep{height:1px;background:var(--line);margin:6px 4px}
#appframe{flex:1;width:100%;border:none;display:block;background:var(--bg)}
a:-webkit-any-link,
a:any-link,
a {
  text-decoration: none;
}
/* ===================== LANDING PAGE ===================== */
#landing{background:radial-gradient(1100px 560px at 50% -12%,#ECEAE3 0%,rgba(236,234,227,0) 60%),var(--bg);color:var(--ink)}
.ln-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:13px 26px;background:rgba(245,245,243,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ln-nav .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.4px}
.ln-nav .logo span{color:var(--brand)}
.ln-nav .logo img{height:30px;width:auto}
/* Mobile navigation — hamburger (hidden on desktop) */
.ln-nav-toggle{display:none}
.ln-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;border-radius:9px;border:1px solid var(--line);background:#fff;cursor:pointer;flex-shrink:0}
.ln-burger span{display:block;width:20px;height:2px;margin:0 auto;background:var(--ink);border-radius:2px;transition:.22s}
.ln-menu{display:contents}
.ln-nav .mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:grid;place-items:center;color:#fff}
.ln-links{display:flex;gap:20px;margin-left:18px}
.ln-links a{color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.ln-links a:hover{color:var(--ink)}
.ln-nav .spacer{flex:1}
.ln-btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;border-radius:9px;padding:10px 18px;cursor:pointer;border:1px solid transparent;font-family:inherit}
.ln-btn.primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(24,95,165,.2),0 6px 16px -8px rgba(24,95,165,.45)}
.ln-btn.primary:hover{background:var(--brand-dark);box-shadow:0 1px 2px rgba(24,95,165,.25),0 8px 20px -8px rgba(24,95,165,.55)}
.ln-btn:active{transform:translateY(1px)}
.ln-btn{transition:.14s}
.ln-btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.ln-btn.ghost:hover{background:var(--bg)}
.ln-btn.lg{padding:14px 24px;font-size:15px;border-radius:11px}
.ln-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.ln-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;padding:60px 0 46px}
.ln-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--brand);background:var(--brand-tint);padding:6px 13px;border-radius:20px}
.ln-h1{font-size:clamp(28px,5.2vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:16px 0 0}
.ln-h1 em{font-style:normal;color:var(--brand)}
.ln-lead{font-size:16.5px;color:var(--muted);line-height:1.6;margin:16px 0 24px;max-width:520px}
.ln-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.ln-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:13px;font-weight:600}
.ln-trust span{display:inline-flex;align-items:center;gap:6px}
.ln-trust svg{color:var(--success)}
.ln-herocard{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:18px}
.ln-hc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ln-hc-head b{font-size:14px}
.ln-vbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--success);background:var(--success-tint);padding:3px 9px;border-radius:20px}
.ln-job{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:11px;margin-bottom:10px}
.ln-job .je{width:40px;height:40px;border-radius:10px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;flex-shrink:0}.ln-job .je svg{width:20px;height:20px}
.ln-job .jt{font-weight:700;font-size:13.5px}
.ln-job .js{font-size:12px;color:var(--muted);margin-top:2px}
.ln-job .jp{margin-left:auto;font-weight:800;font-size:13.5px;color:var(--success);white-space:nowrap}
.ln-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.ln-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;box-shadow:var(--shadow)}
.ln-stat b{display:block;font-size:clamp(21px,4vw,26px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ln-stat span{font-size:12.5px;color:var(--muted);font-weight:600}
.ln-sec{padding:52px 0}
.ln-sec h2{font-size:clamp(23px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;text-align:center;margin:0}
.ln-sec .subh{text-align:center;color:var(--muted);font-size:15.5px;margin:11px auto 0;max-width:620px;line-height:1.6}
.ln-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:34px}
.ln-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 1px 2px rgba(0,0,0,.035);transition:.18s}
.ln-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.ln-card .ic{width:46px;height:46px;border-radius:11px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.ln-card h3{font-size:17px;font-weight:700;margin:0 0 7px}
.ln-card p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
.ln-card .stepn{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px;margin-bottom:13px}
.ln-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.ln-cat{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:9px 16px;font-weight:600;font-size:13.5px}
.ln-cat .e{font-size:18px}
.ln-band{background:var(--brand);border-radius:20px;padding:46px 30px;text-align:center;color:#fff}
.ln-band h2{font-size:clamp(22px,3.4vw,28px);font-weight:800;color:#fff;margin:0}
.ln-band p{color:rgba(255,255,255,.85);margin:11px 0 22px;font-size:15px}
.ln-band .ln-btn.primary{background:#fff;color:var(--brand)}
.ln-band .ln-btn.primary:hover{background:#f0f0ee}
.ln-band .ln-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ln-band .ln-btn.ghost:hover{background:rgba(255,255,255,.12)}
.ln-faq{max-width:760px;margin:30px auto 0}
.ln-q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-bottom:10px}
.ln-q b{font-size:14.5px}
.ln-q p{font-size:13.5px;color:var(--muted);margin:7px 0 0;line-height:1.6}
.ln-foot{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--muted);font-size:13px}
.ln-demo{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:700;cursor:pointer;font-size:14px}

/* ===================== JOB LISTING (Browse Jobs) ===================== */
#jobs{background:var(--bg);color:var(--ink);min-height:100vh}
.jb-search{background:var(--brand)}
.jb-search .row{max-width:1080px;margin:0 auto;padding:22px 24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.jb-search input,.jb-search select{height:48px;border-radius:10px;border:1px solid rgba(0,0,0,.12);padding:0 14px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.jb-search .kw{flex:2;min-width:200px}
.jb-search .loc{flex:1;min-width:170px}
.jb-search .go{height:48px;background:#fff;color:var(--brand);font-weight:800;border:none;border-radius:10px;padding:0 26px;cursor:pointer;font-size:14px;font-family:inherit}
.jb-main{max-width:1080px;margin:0 auto;padding:24px;display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start}
.jb-filters{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;position:sticky;top:16px}
.jb-filters .fhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.jb-filters .fhead b{font-size:14px}
.jb-fg{margin-bottom:18px}
.jb-fg h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;font-weight:700}
.jb-check{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:8px;cursor:pointer}
.jb-check input{width:16px;height:16px;flex-shrink:0}
.jb-fg select{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:13.5px;font-family:inherit;background:var(--card)}
.jb-reset{color:var(--brand);font-weight:700;font-size:12.5px;cursor:pointer}
.jb-rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.jb-count{font-weight:800;font-size:16px}
.jb-count span{color:var(--muted);font-weight:500;font-size:13.5px}
.jb-sort{height:38px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-family:inherit;font-size:13px;background:var(--card)}
.jb-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:border-color .14s,box-shadow .14s}
.jb-card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.jb-card-top{display:flex;gap:14px;align-items:flex-start}
.jb-logo{width:50px;height:50px;border-radius:12px;background:var(--brand-tint);display:grid;place-items:center;font-size:24px;flex-shrink:0}
.jb-title{font-weight:800;font-size:16px;letter-spacing:-.01em}
.jb-sub{font-size:13px;color:var(--muted);margin-top:3px}
.jb-sal{margin-left:auto;text-align:right;font-weight:800;font-size:15.5px;color:var(--success);white-space:nowrap}
.jb-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.jb-tag{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:4px 11px}
.jb-tag.v{color:var(--success);background:var(--success-tint);border-color:transparent}
.jb-acts{display:flex;gap:9px;margin-top:14px;align-items:center;flex-wrap:wrap}
.jb-acts .posted{margin-left:auto;font-size:12px;color:var(--muted)}
.jb-empty{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:44px;text-align:center;color:var(--muted)}

/* ============================================================
   RESPONSIVE BREAKPOINTS  (ordered largest → smallest)
   ============================================================ */

/* Small laptops / large tablets */
@media (max-width:980px){
  .ln-hero{gap:30px}
  .ln-sec{padding:46px 0}
}

/* Portrait tablets — hero stacks, nav links collapse, jobs single column */
@media (max-width:860px){
  .ln-hero{grid-template-columns:1fr;padding:36px 0}
  .ln-herocard{max-width:540px;width:100%}
  .ln-nav{padding:12px 16px}

  /* show the hamburger */
  .ln-burger{display:flex;margin-left:auto}

  /* nav links + buttons become a collapsible dropdown panel */
  .ln-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(245,245,243,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);
    padding:0 16px;max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .3s ease,opacity .22s ease,padding .3s ease,visibility .3s}
  .ln-nav.nav-open .ln-menu{max-height:85vh;opacity:1;visibility:visible;padding:8px 16px 16px}

  .ln-links{display:flex;flex-direction:column;gap:0;margin-left:0}
  .ln-links a{padding:14px 4px;font-size:15px;border-bottom:1px solid var(--line)}
  .ln-menu .spacer{display:none}
  .ln-menu .ln-btn{width:100%;justify-content:center;padding:13px 16px;font-size:14.5px;margin-top:8px}

  /* animate the bars into an X when open */
  .ln-nav.nav-open .ln-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ln-nav.nav-open .ln-burger span:nth-child(2){opacity:0}
  .ln-nav.nav-open .ln-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .jb-main{grid-template-columns:1fr}
  .jb-filters{position:static}
}

/* Launcher role cards + shell bar on tablets */
@media (max-width:680px){
  .role-grid{grid-template-columns:1fr}
  .sb-viewing .vp{display:none}
  .sb-btn .lbl{display:none}
}

/* Phones */
@media (max-width:600px){
  .ln-nav{padding:10px 14px;gap:8px}
  .ln-nav .logo{font-size:16px}
  .ln-nav .logo img{height:26px}
  .ln-wrap{padding:0 16px}
  .ln-btn{padding:9px 13px;font-size:13px}
  .ln-btn.lg{padding:12px 18px;font-size:14px}
  .ln-sec{padding:36px 0}
  .ln-sec .subh{font-size:14.5px}
  .ln-lead{font-size:15px}
  .ln-3{margin-top:24px}
  .ln-stats{gap:12px}
  .ln-cta-row .ln-btn{flex:1 1 100%;justify-content:center}
  .ln-band{padding:34px 20px}
  .ln-card{padding:20px}
  .ln-cats{margin-top:22px}
  .ln-faq{margin-top:22px}
  .launcher{padding:30px 16px}
  .lc-sub{font-size:14px}
  .shellbar{padding:0 12px;gap:8px}
  .jb-search .row{padding:16px}
  .jb-main{padding:16px}
}

/* Small phones */
@media (max-width:420px){
  .ln-eyebrow{font-size:11.5px}
  .ln-trust{gap:12px}
  .ln-cat{padding:8px 13px;font-size:12.5px}
  .jb-card-top{flex-wrap:wrap}
  .jb-sal{margin-left:0;width:100%;text-align:left;margin-top:6px}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}