/* ==========================================================================
   HR Job World — hrjobworld.com
   Core stylesheet. Built by Digihify Marketing Solution.
   No build step required: plain CSS, works on any shared host.
   ========================================================================== */

:root{
  /* --- Refined palette (Aug 2026). Every text/background pair below meets
         WCAG AA. The previous coral CTA sat at 2.82:1 and failed. --- */
  --navy:#0C2440;          /* ink navy   — white on it 15.6:1 AAA */
  --navy-800:#08192E;
  --navy-600:#17436F;      /* links      — 10.2:1 AAA */
  --teal:#0C9B84;          /* brand teal — decorative fills, logo */
  --teal-btn:#087E6B;      /* teal button bg, white text 4.99:1 AA */
  --teal-dark:#077A67;     /* teal text on white 5.26:1 AA */
  --coral:#D2431F;         /* action  — white text 4.60:1 AA */
  --coral-dark:#B8371A;    /* hover   — 5.83:1 AA */
  --coral-soft:#F4623F;    /* decorative only, never behind text */
  --ink:#0F172A;
  --body:#475569;
  --muted:#5F6E85;         /* was #6B7A90 (4.36:1) — now 5.18:1 AA */
  --line:#E3E9F0;
  --line-soft:#EEF2F7;
  --bg:#FFFFFF;
  --bg-soft:#F6F8FB;
  --bg-navy-soft:#F2F6FB;
  --radius:12px;
  --radius-lg:18px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(14,42,71,.06), 0 1px 3px rgba(14,42,71,.05);
  --shadow-md:0 4px 12px rgba(14,42,71,.07), 0 2px 4px rgba(14,42,71,.04);
  --shadow-lg:0 18px 40px rgba(14,42,71,.10), 0 4px 12px rgba(14,42,71,.05);
  --wrap:1180px;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--body);
  font-size:16px; line-height:1.65; background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--navy-600); text-decoration:none}
a:hover{color:var(--teal-dark)}
h1,h2,h3,h4,h5{color:var(--ink); font-weight:700; line-height:1.25; margin:0 0 .6em}
h1{font-size:clamp(1.85rem,1.2rem + 2.1vw,2.75rem); letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem); letter-spacing:-.015em}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
small{font-size:.85rem}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:4px}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 20px}
.section{padding:64px 0}
.section-sm{padding:44px 0}
.section-soft{background:var(--bg-soft)}
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.stack-sm > * + *{margin-top:.5rem}
.text-center{text-align:center}
.mb-0{margin-bottom:0}

.section-head{max-width:720px; margin-bottom:34px}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head p{color:var(--muted); font-size:1.03rem; margin-bottom:0}
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--teal-dark); margin-bottom:.7rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 24px; border-radius:var(--radius-pill); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; cursor:pointer; transition:.16s ease; text-align:center;
  font-family:inherit; line-height:1.3;
}
.btn-primary{background:var(--coral); color:#fff; border-color:var(--coral)}
.btn-primary:hover{background:var(--coral-dark); border-color:var(--coral-dark); color:#fff}
.btn-navy{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-800); color:#fff}
.btn-teal{background:var(--teal-btn); color:#fff; border-color:var(--teal-btn)}
.btn-teal:hover{background:var(--teal-dark); color:#fff}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy); background:var(--bg-navy-soft); color:var(--navy)}
.btn-white{background:#fff; color:var(--navy); border-color:#fff}
.btn-white:hover{background:var(--bg-soft); color:var(--navy)}
.btn-outline-white{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff}
.btn-lg{padding:15px 32px; font-size:1rem}
.btn-sm{padding:8px 16px; font-size:.85rem}
.btn-block{display:flex; width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:18px; height:72px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:1.12rem; letter-spacing:-.02em}
.logo:hover{color:var(--navy)}
.logo svg{display:block; height:34px; width:auto}
.logo-mark{width:34px; height:34px; flex:0 0 34px; display:block}
.logo span.accent{color:var(--teal-dark)}
.site-footer .logo svg{height:30px}
.main-nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.main-nav a{
  padding:9px 13px; border-radius:8px; color:var(--ink); font-weight:500; font-size:.94rem;
}
.main-nav a:hover{background:var(--bg-navy-soft); color:var(--navy)}
.main-nav a.is-current{color:var(--navy); font-weight:600; background:var(--bg-navy-soft)}
.header-cta{display:flex; align-items:center; gap:10px; margin-left:10px}
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1.5px solid var(--line);
  border-radius:9px; width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{display:block; width:19px; height:2px; background:var(--navy); position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:19px; height:2px; background:var(--navy)
}
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}

/* dropdown */
.has-drop{position:relative}
.has-drop > a::after{content:'▾'; font-size:.7em; margin-left:5px; opacity:.6}
.drop{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  min-width:280px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:12px; display:none;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block; padding:9px 12px; border-radius:8px; font-size:.9rem; color:var(--ink)}
.drop a:hover{background:var(--bg-navy-soft); color:var(--navy)}

/* mega panel — three columns of links under one nav item */
.drop-mega{width:min(880px,calc(100vw - 40px)); padding:22px 24px}
.drop-cols{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:26px}
.drop-col h3{
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.9em; font-weight:700;
}
.drop-col a{padding:7px 10px; font-size:.88rem}
.drop-col .drop-lead{
  display:flex; gap:10px; align-items:flex-start; padding:11px 12px;
  border:1px solid var(--line); border-radius:11px; margin-bottom:8px;
}
.drop-col .drop-lead:hover{border-color:var(--navy-600); background:var(--bg-navy-soft)}
.drop-col .drop-lead b{display:block; font-size:.9rem; color:var(--ink)}
.drop-col .drop-lead em{font-style:normal; font-size:.79rem; color:var(--muted); line-height:1.45}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-600) 62%,#155E6B 100%);
  color:#fff; padding:74px 0 84px; position:relative; overflow:hidden;
}
.hero::after{
  content:''; position:absolute; right:-140px; top:-140px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle,rgba(15,160,126,.35),transparent 68%);
}
.hero .wrap{position:relative; z-index:2}
.hero h1{color:#fff; max-width:15ch}
.hero-sub{color:rgba(255,255,255,.85); font-size:1.1rem; max-width:60ch; margin-bottom:1.8rem}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22); color:#fff; padding:6px 14px 6px 8px;
  border-radius:var(--radius-pill); font-size:.8rem; font-weight:600; margin-bottom:1.2rem;
}
.hero-badge b{background:var(--teal); border-radius:var(--radius-pill); padding:2px 9px; font-size:.72rem; letter-spacing:.04em}

.hero-top{display:grid; grid-template-columns:1.08fr .92fr; gap:46px; align-items:center; margin-bottom:28px}
.hero-panel{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.17);
  border-radius:var(--radius-lg); padding:20px; backdrop-filter:blur(6px);
}
.hero-panel h2{
  color:#fff; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase;
  opacity:.78; margin-bottom:14px; font-weight:700;
}
.mini-job{
  display:flex; gap:12px; align-items:center; padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.95); margin-bottom:10px;
}
.mini-job:last-child{margin-bottom:0}
.mini-job .job-logo{width:38px; height:38px; flex:0 0 38px; font-size:.8rem; border-radius:10px}
.mini-job b{display:block; font-size:.87rem; color:var(--ink); line-height:1.3; font-weight:600}
.mini-job em{font-style:normal; font-size:.77rem; color:var(--muted)}
.mini-job .pill{
  margin-left:auto; font-size:.69rem; font-weight:700; color:var(--teal-dark);
  background:rgba(15,160,126,.13); padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.hero-panel .foot{
  display:block; margin-top:13px; font-size:.8rem; color:rgba(255,255,255,.72); text-align:center;
}
.hero-panel .foot:hover{color:#fff}

/* search bar */
.job-search{
  background:#fff; border-radius:var(--radius-lg); padding:12px; box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1fr auto; gap:10px; max-width:900px;
}
.job-search .field{display:flex; align-items:center; gap:9px; padding:6px 12px; border-radius:10px; background:var(--bg-soft)}
.job-search .field svg{flex:0 0 18px; color:var(--muted)}
.job-search input,.job-search select{
  border:0; background:transparent; font-family:inherit; font-size:.95rem; color:var(--ink);
  width:100%; padding:8px 0; outline:none;
}
.hero-links{margin-top:20px; display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.hero-links span{color:rgba(255,255,255,.7); font-size:.86rem; margin-right:4px}
.chip{
  display:inline-block; padding:6px 14px; border-radius:var(--radius-pill); font-size:.84rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.chip:hover{background:rgba(255,255,255,.22); color:#fff}

/* page header (interior) */
.page-head{background:var(--bg-navy-soft); border-bottom:1px solid var(--line); padding:34px 0 38px}
.page-head h1{margin-bottom:.35em}
.page-head .lede{font-size:1.05rem; color:var(--body); max-width:75ch; margin-bottom:0}
.breadcrumbs{font-size:.83rem; color:var(--muted); margin-bottom:.9rem}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--navy)}
.breadcrumbs span{margin:0 7px; opacity:.5}

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; transition:.16s ease;
}
.card:hover{box-shadow:var(--shadow-md); border-color:#D3DEEA}
.cat-card{display:block; color:inherit}
.cat-card:hover{color:inherit; transform:translateY(-2px)}
.cat-card .icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--bg-navy-soft); color:var(--navy-600); margin-bottom:14px; font-size:1.25rem;
}
.cat-card h3{font-size:1.03rem; margin-bottom:.35em}
.cat-card p{font-size:.88rem; color:var(--muted); margin-bottom:.8em}
.cat-card .count{font-size:.8rem; font-weight:700; color:var(--teal-dark)}

/* ---------- job cards ---------- */
.job-list{display:flex; flex-direction:column; gap:14px}
.job-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; transition:.16s ease;
}
.job-card:hover{border-color:var(--navy-600); box-shadow:var(--shadow-md)}
.job-card:focus-within{border-color:var(--navy-600); box-shadow:var(--shadow-md)}
.job-card-top{display:flex; gap:16px; align-items:flex-start}
.job-logo{
  width:48px; height:48px; flex:0 0 48px; border-radius:11px; display:grid; place-items:center;
  background:var(--bg-navy-soft); color:var(--navy); font-weight:800; font-size:1rem; letter-spacing:-.02em;
}
.job-card-text{flex:1; min-width:0}
.job-card h3{font-size:1.08rem; margin-bottom:.2em; color:var(--ink); line-height:1.35}
.job-card h3 a{color:inherit}
/* stretched link: the whole card is one tap target, but the markup stays honest */
.job-card h3 a::after{content:''; position:absolute; inset:0; z-index:1}
.job-card:hover h3 a{color:var(--navy-600)}
.job-company{font-size:.9rem; color:var(--muted); margin:0}

/* the side rail holds the posted date and a real, separately focusable button */
.job-card-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  flex:0 0 auto; position:relative; z-index:2;
}
.job-card-side .btn{white-space:nowrap}

/* facts row — salary is the number people scan for, so it leads visually */
.job-facts{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin:13px 0 0; padding:0;
  list-style:none; font-size:.87rem; color:var(--body);
}
.job-facts li{display:flex; align-items:center; gap:6px; margin:0}
.job-facts svg{flex:0 0 15px; color:var(--muted)}
.job-facts .job-salary{font-weight:700; color:var(--teal-dark)}
.job-facts .job-salary svg{color:var(--teal-dark)}
.job-meta{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:.85rem; color:var(--body)}
.job-meta em{font-style:normal; color:var(--muted)}
.job-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:13px}
.tag{
  font-size:.75rem; font-weight:600; padding:4px 11px; border-radius:var(--radius-pill);
  background:var(--bg-soft); color:var(--body); border:1px solid var(--line-soft);
}
.tag-teal{background:rgba(15,160,126,.1); color:var(--teal-dark); border-color:rgba(15,160,126,.2)}
.tag-navy{background:var(--bg-navy-soft); color:var(--navy-600); border-color:#DCE6F2}
.tag-coral{background:rgba(210,67,31,.09); color:var(--coral-dark); border-color:rgba(210,67,31,.2)}
.job-posted{font-size:.78rem; color:var(--muted); white-space:nowrap}

/* ---------- listing layout ---------- */
.listing{display:grid; grid-template-columns:274px 1fr; gap:34px; align-items:start}
.filters{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px;
  position:sticky; top:92px;
}
/* On mobile the sidebar becomes a collapsible drawer instead of a wall of
   checkboxes the user has to scroll past to reach a single job. */
.filters > summary{display:none}
.filter-actions{margin-top:20px}
.filter-group{border:0; padding:0; margin:0; min-width:0}
.filter-group + .filter-group{margin-top:22px; padding-top:22px; border-top:1px solid var(--line-soft)}
.filter-group legend{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.9em; padding:0; font-weight:600; float:left; width:100%;
}
.filter-group legend + *{clear:both}
.filter-group label{display:flex; align-items:center; gap:9px; font-size:.9rem; margin-bottom:9px; cursor:pointer}
.filter-group input[type=checkbox]{width:16px; height:16px; accent-color:var(--teal); flex:0 0 16px}
.results-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:14px; flex-wrap:wrap;
}
/* active filter chips — every applied filter is visible and removable in one tap */
.active-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.active-filters:empty{display:none}
.chip-filter{
  display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 14px;
  border-radius:var(--radius-pill); background:var(--bg-navy-soft);
  border:1px solid #DCE6F2; color:var(--navy); font-size:.83rem; font-weight:600;
}
.chip-filter button{
  border:0; background:rgba(12,36,64,.1); color:var(--navy); cursor:pointer;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:.95rem; line-height:1; padding:0; font-family:inherit;
}
.chip-filter button:hover{background:var(--navy); color:#fff}
.chip-clear{
  display:inline-flex; align-items:center; padding:6px 14px; border-radius:var(--radius-pill);
  background:transparent; border:1px dashed var(--line); color:var(--muted);
  font-size:.83rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.chip-clear:hover{border-color:var(--coral); color:var(--coral); border-style:solid}
.results-bar p{margin:0; font-size:.92rem; color:var(--muted)}
.results-title{margin:0; font-size:.92rem; font-weight:400; color:var(--muted); letter-spacing:0; line-height:1.5}
.results-bar strong{color:var(--ink)}
.no-results{
  display:none; text-align:center; padding:48px 24px; border:1px dashed var(--line);
  border-radius:var(--radius-lg); background:var(--bg-soft);
}

/* ---------- job detail ---------- */
.job-detail{display:grid; grid-template-columns:1fr 330px; gap:38px; align-items:start}
.job-hero{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  margin-bottom:26px;
}
/* key facts sit above the fold instead of being buried in the sidebar */
.job-keyfacts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin:20px 0 0;
  padding:0; list-style:none; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
}
.job-keyfacts li{margin:0; padding:13px 16px; background:#fff}
.job-keyfacts span{
  display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-bottom:3px;
}
.job-keyfacts b{font-size:.93rem; color:var(--ink); font-weight:700}
.job-keyfacts .is-salary b{color:var(--teal-dark)}
.job-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}

/* sticky apply bar — mobile only, so the CTA is never scrolled away */
.apply-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  gap:12px; align-items:center; box-shadow:0 -4px 18px rgba(12,36,64,.08);
}
.apply-bar .apply-meta{flex:1; min-width:0}
.apply-bar .apply-meta b{
  display:block; font-size:.86rem; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.apply-bar .apply-meta span{font-size:.78rem; color:var(--teal-dark); font-weight:700}
.job-body h2{font-size:1.25rem; margin-top:2rem}
.job-body h2:first-child{margin-top:0}
.job-aside{position:sticky; top:92px; display:flex; flex-direction:column; gap:18px}
.aside-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px}
.aside-card h3{font-size:.95rem; margin-bottom:1em}
.spec-list{list-style:none; margin:0; padding:0}
.spec-list li{display:flex; justify-content:space-between; gap:14px; font-size:.88rem; padding:9px 0; border-bottom:1px solid var(--line-soft)}
.spec-list li:last-child{border-bottom:0}
.spec-list span{color:var(--muted)}
.spec-list b{color:var(--ink); font-weight:600; text-align:right}

/* ---------- feature / trust ---------- */
.trust-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); padding:26px 0}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center}
.trust-grid .trust-num{font-size:1.5rem; font-weight:700; color:var(--navy); margin:0 0 .15em; letter-spacing:-.02em; line-height:1.25}
.trust-grid p{font-size:.85rem; color:var(--muted); margin:0}
.feature{display:flex; gap:15px; align-items:flex-start}
.feature .icon{
  width:42px; height:42px; flex:0 0 42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(15,160,126,.11); color:var(--teal-dark); font-size:1.15rem;
}
.feature h3{font-size:1rem; margin-bottom:.3em}
.feature p{font-size:.9rem; color:var(--muted); margin:0}

/* comparison table */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff}
table.tbl{width:100%; border-collapse:collapse; min-width:560px}
table.tbl th,table.tbl td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:.92rem}
table.tbl th{background:var(--bg-navy-soft); color:var(--navy); font-weight:700; font-size:.85rem; letter-spacing:.02em}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.yes{color:var(--teal-dark); font-weight:600}
table.tbl td.no{color:var(--muted)}

/* pricing */
.price-card{display:flex; flex-direction:column; height:100%}
.price-card.featured{border-color:var(--navy); box-shadow:var(--shadow-lg); position:relative}
.price-card.featured::before{
  content:'Most popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--navy); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 14px; border-radius:var(--radius-pill); white-space:nowrap;
}
.price{font-size:2.1rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.price small{font-size:.85rem; font-weight:500; color:var(--muted); letter-spacing:0}
.price-card ul{list-style:none; padding:0; margin:18px 0 22px; font-size:.9rem}
.price-card ul li{padding-left:26px; position:relative; margin-bottom:.6em}
.price-card ul li::before{content:'✓'; position:absolute; left:0; color:var(--teal); font-weight:800}
.price-card .btn{margin-top:auto}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.field-row{display:flex; flex-direction:column; gap:6px}
.field-row.full{grid-column:1/-1}
.field-row label{font-size:.87rem; font-weight:600; color:var(--ink)}
.field-row label .req{color:var(--coral)}
.field-row input,.field-row select,.field-row textarea{
  font-family:inherit; font-size:.95rem; color:var(--ink); padding:11px 14px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; width:100%;
}
.field-row textarea{min-height:130px; resize:vertical}
.field-row input:focus,.field-row select:focus,.field-row textarea:focus{border-color:var(--teal); outline:none}
.field-row .hint{font-size:.79rem; color:var(--muted)}
.form-note{font-size:.82rem; color:var(--muted)}

/* Inline submit feedback. Left border rather than a full tinted panel, so the
   message reads as a status on the form and not as a new content block.
   Colours come from the contrast-checked palette — see BRAND.md. */
.form-notice{grid-column:1/-1; margin:14px 0 0; padding:11px 14px 11px 16px;
  border-left:3px solid var(--muted); border-radius:0 6px 6px 0;
  background:#F2F6FB; font-size:.86rem; line-height:1.5; color:var(--body)}
.form-notice.is-ok{border-left-color:var(--teal-btn); background:#EEF9F6; color:#0A5A4C}
.form-notice.is-err{border-left-color:var(--coral-dark); background:#FEF3F0; color:#7C2D12}
.form-notice.is-info{border-left-color:var(--navy-600)}

/* ---------- FAQ ---------- */
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:0; margin-bottom:12px; overflow:hidden;
}
.faq summary{
  padding:17px 22px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--teal-dark); font-size:1.3rem; font-weight:400; line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq .faq-body{padding:17px 22px; font-size:.94rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-600) 100%); color:#fff;
  border-radius:var(--radius-lg); padding:44px 46px; display:flex; gap:30px;
  align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cta-band h2{color:#fff; margin-bottom:.35em}
.cta-band p{color:rgba(255,255,255,.82); margin:0; max-width:56ch}
.cta-band .actions{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- link cloud ---------- */
.link-cloud{display:flex; flex-wrap:wrap; gap:9px}
.link-cloud a{
  font-size:.87rem; padding:7px 15px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:#fff; color:var(--body);
}
.link-cloud a:hover{border-color:var(--navy-600); color:var(--navy-600); background:var(--bg-navy-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-800); color:rgba(255,255,255,.72); padding:56px 0 0; margin-top:0}
.site-footer h2{color:#fff; font-size:.83rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:1.1em}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:34px}
.site-footer a{color:rgba(255,255,255,.72); font-size:.9rem}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer ul li{margin-bottom:.6em}
.footer-brand .logo{color:#fff; margin-bottom:14px}
.footer-brand p{font-size:.9rem; color:rgba(255,255,255,.6); max-width:38ch}
.footer-contact{font-size:.88rem; line-height:1.75; color:rgba(255,255,255,.66)}
.footer-contact strong{color:#fff; font-weight:600}
.socials{display:flex; gap:10px; margin-top:16px}
.socials a{
  width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; font-size:.8rem; font-weight:700;
}
.socials a:hover{background:var(--teal)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding:20px 0;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem;
}
.footer-bottom nav{display:flex; gap:18px; flex-wrap:wrap}

/* ---------- utilities ---------- */
.notice{
  background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412; border-radius:var(--radius);
  padding:14px 18px; font-size:.9rem; margin-bottom:20px;
}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose ul li{margin-bottom:.55em}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; z-index:200; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-md)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .drop-mega{width:min(680px,calc(100vw - 32px))}
  .drop-cols{grid-template-columns:1fr 1fr}
  .job-keyfacts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .listing{grid-template-columns:1fr}
  .filters{position:static; padding:0; border-radius:var(--radius)}
  /* collapsed drawer on small screens */
  .filters > summary{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:15px 20px; cursor:pointer; list-style:none; font-weight:600;
    color:var(--ink); font-size:.95rem;
  }
  .filters > summary::-webkit-details-marker{display:none}
  .filters > summary::after{content:'+'; font-size:1.4rem; color:var(--teal-dark); line-height:1}
  .filters[open] > summary::after{content:'\2013'}
  .filters[open] > summary{border-bottom:1px solid var(--line-soft)}
  .filters > summary .filter-count{
    margin-left:auto; margin-right:6px; background:var(--navy); color:#fff;
    border-radius:var(--radius-pill); font-size:.72rem; padding:2px 9px; font-weight:700;
  }
  .filters > summary .filter-count:empty{display:none}
  .filters .filter-group{padding:20px}
  .filters .filter-group + .filter-group{margin-top:0; padding-top:20px}
  .job-detail{grid-template-columns:1fr}
  .job-aside{position:static}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .job-search{grid-template-columns:1fr}
  .hero-top{grid-template-columns:1fr; gap:26px}
  .hero-panel{display:none}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .main-nav{
    display:none; position:absolute; top:72px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:12px 20px 20px; gap:2px; box-shadow:var(--shadow-lg); max-height:calc(100vh - 72px); overflow:auto;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 12px}
  .drop{position:static; display:block; box-shadow:none; border:0; padding:0 0 0 12px; min-width:0}
  .drop a{font-size:.87rem; padding:7px 12px}
  .has-drop > a::after{display:none}
  .header-cta{margin:12px 0 0; flex-direction:column; align-items:stretch}
  .header-cta .btn{width:100%}
}
@media (max-width:820px){
  .apply-bar{display:flex}
  body:has(.apply-bar){padding-bottom:78px}
}
@media (max-width:620px){
  .drop-cols{grid-template-columns:1fr}
  .job-keyfacts{grid-template-columns:1fr 1fr}
  .job-card-top{flex-wrap:wrap}
  .job-card-side{
    flex-direction:row; align-items:center; justify-content:space-between;
    width:100%; order:9; margin-top:14px; padding-top:14px;
    border-top:1px solid var(--line-soft);
  }
  .job-card-side .btn{flex:0 0 auto}
  .section{padding:46px 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .cta-band{padding:30px 24px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}

@media print{
  .site-header,.site-footer,.job-aside,.cta-band{display:none}
  body{font-size:12pt}
}

/* ==========================================================================
   BLOG — "HR Insights"
   Article layout, table of contents, post cards. Colours are the same
   contrast-checked tokens as the rest of the site; see BRAND.md.
   ========================================================================== */

/* Alternating band, used between an article and its related posts. */
.section-alt{background:var(--bg-soft, #F2F6FB); border-top:1px solid var(--line)}

/* Category / hub chips. Distinct from .chip, which is white-on-transparent
   for dark hero backgrounds and would be invisible here. */
.chip-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px}
.chip-cat{
  display:inline-block; padding:7px 15px; border-radius:var(--radius-pill);
  font-size:.83rem; font-weight:500; color:var(--navy-600);
  background:#EEF3FA; border:1px solid #DCE6F2;
}
.chip-cat:hover{background:var(--navy); border-color:var(--navy); color:#fff}

/* ---------- post cards ---------- */
.post-card{display:flex; flex-direction:column; gap:9px; padding:24px}
.post-card h3{font-size:1.06rem; line-height:1.35; margin:0; color:var(--ink)}
.post-card p{margin:0; font-size:.9rem; color:var(--body); flex:1}
.post-card:hover h3{color:var(--navy-600)}
.post-cat{
  align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--teal-dark);
}
.post-meta{font-size:.8rem; color:var(--muted)}

/* ---------- article header ---------- */
.post-head{background:var(--bg-navy-soft); border-bottom:1px solid var(--line); padding:38px 0 34px}
.post-head h1{margin:.12em 0 .3em; max-width:22ch}
.post-head .lede{max-width:62ch; color:var(--body)}   /* explicit: never inherit a hero colour */
.post-byline{display:flex; align-items:center; gap:13px; margin:22px 0 0; font-size:.9rem}
.post-byline .avatar{
  flex:0 0 42px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-size:.82rem; font-weight:700;
  background:var(--navy); color:#fff;
}

/* ---------- table of contents ---------- */
.toc{
  margin:0 0 34px; padding:20px 24px; border-radius:10px;
  background:#F2F6FB; border:1px solid #DCE6F2;
}
.toc-title{font-size:.74rem !important; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 11px !important}
.toc ol{margin:0; padding-left:19px; font-size:.92rem}
.toc li{margin-bottom:6px; color:var(--body)}
.toc li:last-child{margin-bottom:0}
/* The TOC lives inside .post-body, whose "underline every link" rule has
   equal specificity and appears later. Qualify these so a numbered list of
   headings does not render as six underlined lines. */
.post-body .toc a{color:var(--navy-600); text-decoration:none}
.post-body .toc a:hover{text-decoration:underline}
.toc .toc-sub{margin-left:14px; font-size:.87rem; list-style:circle}

/* ---------- article body ---------- */
.post-body{padding:44px 0 20px}
.post-body > h2{font-size:1.42rem; line-height:1.3; margin:2em 0 .55em; color:var(--navy)}
.post-body > h2:first-of-type{margin-top:0}
.post-body > h3{font-size:1.09rem; margin:1.7em 0 .45em; color:var(--ink)}
.post-body p{font-size:1.02rem; line-height:1.72; margin:0 0 1.15em; color:var(--body)}
.post-body ul,.post-body ol{margin:0 0 1.3em; padding-left:24px}
.post-body li{font-size:1.02rem; line-height:1.68; margin-bottom:.55em; color:var(--body)}
.post-body li::marker{color:var(--teal-dark)}
.post-body strong{color:var(--ink); font-weight:600}
.post-body a{color:var(--navy-600); text-decoration:underline; text-underline-offset:2px}
.post-body a:hover{color:var(--coral-dark)}
.post-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:#F2F6FB; border:1px solid #E3E9F0; border-radius:4px; padding:1px 5px;
}
.post-body hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}

/* Pull-quote. Left rule rather than a tinted panel, so it reads as emphasis
   inside the article rather than as a separate block. */
.post-body blockquote{
  margin:1.8em 0; padding:4px 0 4px 22px; border-left:3px solid var(--teal);
}
.post-body blockquote p{
  font-size:1.08rem; line-height:1.6; color:var(--ink); font-style:italic; margin:0 0 .6em;
}
.post-body blockquote p:last-child{margin-bottom:0}

.post-body .table-wrap{margin:0 0 1.6em; overflow-x:auto}
.post-body table{width:100%; border-collapse:collapse; font-size:.93rem}
.post-body th,.post-body td{
  padding:10px 13px; text-align:left; border:1px solid var(--line); vertical-align:top;
}
.post-body th{background:#F2F6FB; color:var(--navy); font-weight:600; font-size:.86rem}
.post-body td{color:var(--body)}

/* ---------- hub cross-links at the end of a post ---------- */
.post-hubs{margin:42px 0 0; padding-top:26px; border-top:1px solid var(--line)}
.post-hubs-title{
  font-size:.74rem !important; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 13px !important;
}
.post-hubs .chip-row{margin-bottom:0}

@media (max-width:640px){
  .post-body{padding:30px 0 12px}
  .post-body > h2{font-size:1.24rem}
  .post-head h1{max-width:none}
}