@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* ============================================================
   JobsByCountry base design system (2026-09-13)

   ONE source of truth for colour. Every component below reads
   semantic tokens (--bg, --surface, --text ...). The dark theme
   only re-points those tokens at the dark palette, so header,
   body, cards, forms, panels and the footer can never drift
   apart again.

   The dark palette is anchored on the JobsByCountry dark logo:
   its field is pure #000000, so the dark base is a near-black
   ink (#070A10), not a mid navy. The logo asset was also
   re-cut (see logo-dark-20260912.png) so it has NO opaque black
   box any more, so it composites onto any surface.
   ============================================================ */

:root{
  /* ---- brand ---- */
  --brand-blue:#1468e8;
  --brand-blue-strong:#0f5ad6;
  --brand-blue-soft:#eaf2ff;
  --brand-navy:#102a4c;

  /* ---- dark palette constants (used only by the dark theme) ---- */
  --dark-bg:#070a10;
  --dark-bg-2:#0a0e15;
  --dark-surface:#0e141d;
  --dark-surface-2:#141c28;
  --dark-border:#1f2937;
  --dark-border-strong:#2b3a4d;
  --dark-text:#e9eff7;
  --dark-muted:#9badc2;
  --dark-blue:#3c86ff;
  --dark-blue-strong:#5b9bff;

  /* ---- semantic tokens: LIGHT ---- */
  --bg:#ffffff;
  --bg-2:#f7fbff;
  --surface:#ffffff;
  --surface-2:#f4f8ff;
  --surface-3:#fbfdff;
  --border:#d9e6f2;
  --border-strong:#c4d7eb;
  --text:#18304f;
  --heading:#102a4c;
  /* Contrast-checked against --surface and --surface-2 (WCAG AA, small text). */
  --muted:#55708c;
  --muted-2:#63788f;
  --accent:var(--brand-blue);
  --accent-strong:var(--brand-blue-strong);
  --accent-soft:var(--brand-blue-soft);
  --accent-ink:#2368d8;
  --btn-accent:#1468e8;      /* solid fills that carry white text */
  --focus:#1468e8;
  --header-bg:rgba(255,255,255,.92);
  --footer-bg:#102a4c;
  --footer-text:#d8e6f5;
  --footer-heading:#ffffff;
  --footer-line:rgba(216,230,245,.15);
  --shadow:0 14px 40px rgba(16,42,76,.08);
  --shadow-lg:0 24px 70px rgba(16,42,76,.14);
  --radius:20px;

  --ok-bg:#eaf8ee;--ok-fg:#237a47;
  --warn-bg:#fff4e7;--warn-fg:#a15c00;
  --slate-bg:#f2f6fa;--slate-fg:#526b85;

  color-scheme:light;
}

body[data-theme='dark']{
  --bg:var(--dark-bg);
  --bg-2:var(--dark-bg-2);
  --surface:var(--dark-surface);
  --surface-2:var(--dark-surface-2);
  --surface-3:var(--dark-surface);
  --border:var(--dark-border);
  --border-strong:var(--dark-border-strong);
  --text:var(--dark-text);
  --heading:#f3f8ff;
  --muted:var(--dark-muted);
  --muted-2:#8194aa;
  --accent:var(--dark-blue);
  --accent-strong:var(--dark-blue-strong);
  --accent-soft:#12203a;
  --accent-ink:#7fb1ff;
  --btn-accent:#1f6feb;      /* darker than --accent so white button text still passes AA */
  --focus:#5b9bff;
  --header-bg:rgba(7,10,16,.9);
  --footer-bg:var(--dark-bg-2);
  --footer-text:#b8c8dc;
  --footer-heading:#f3f8ff;
  --footer-line:rgba(255,255,255,.08);
  --shadow:0 14px 40px rgba(0,0,0,.5);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);

  --ok-bg:#0f2a1c;--ok-fg:#5fd398;
  --warn-bg:#2c1f0c;--warn-fg:#f0b45c;
  --slate-bg:#151d29;--slate-fg:#9badc2;

  color-scheme:dark;
}

/* Legacy aliases kept so older markup that still reads --navy/--line
   inherits the themed value instead of a hard-coded one. */
:root{--navy:var(--heading);--navy-soft:var(--heading);--blue:var(--accent);
      --blue-strong:var(--accent-strong);--soft:var(--surface-2);
      --line:var(--border);--line-strong:var(--border-strong);--card:var(--surface)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.035em;color:var(--heading);margin:0}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--border);margin:32px 0}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--btn-accent);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;font-weight:800;
}
.skip-link:focus{left:0}

.container{max-width:1260px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:880px;margin:0 auto;padding:0 24px}
.page-shell{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
main{flex:1 0 auto}

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

.site-header{
  position:sticky;top:0;z-index:30;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;flex:0 0 auto;border-radius:8px}
.jbc-logo{height:30px;width:auto;display:block;max-width:250px}
.jbc-logo-dark{display:none}
body[data-theme='dark'] .jbc-logo-light{display:none}
body[data-theme='dark'] .jbc-logo-dark{display:block}

.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:15px;font-weight:700;color:var(--text);opacity:.85;border-radius:6px}
.nav a:hover{color:var(--accent);opacity:1}
.nav a[aria-current='page']{color:var(--accent);opacity:1}

.header-actions{display:flex;align-items:center;gap:12px}
.icon-btn,.ghost-btn,.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--surface);border-radius:12px;
  color:var(--text);height:44px;min-width:44px;padding:0 14px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.menu-btn{display:none;font-size:22px;padding:0 12px}
.icon-btn:hover,.ghost-btn:hover{border-color:var(--accent);color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:14px;padding:13px 20px;font-weight:800;
  transition:.2s ease;border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--btn-accent);color:#fff;box-shadow:0 10px 24px rgba(20,104,232,.18)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-1px)}
.btn-outline{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled],.btn[aria-disabled='true']{
  opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;
  background:var(--surface-2);color:var(--muted);border-color:var(--border);
}
.btn-lg{padding:15px 26px;font-size:16px}

.mobile-nav{display:none;padding:0 24px 18px;border-top:1px solid var(--border);background:var(--surface)}
.mobile-nav a{display:block;padding:12px 0;font-weight:700;color:var(--text)}
.mobile-nav.active{display:block}

/* ---------------- generic layout ---------------- */

.section{padding:64px 0}
.section-tight{padding:40px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.eyebrow::before{content:'✈';font-size:16px}
.eyebrow.plain::before{content:none}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.panel,.mini-card,.stat-card,.job-card,.directory,.info-card,.filter-block,.ad-box,.city-card,.content-card,.sidebar-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.panel{padding:28px}
.panel-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.panel-header p{margin:8px 0 0;color:var(--muted);max-width:630px;line-height:1.65}
.panel-header h2{font-size:28px}

.mini-card{padding:18px}
.mini-card h3{font-size:18px}
.mini-card p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.6}

.muted{color:var(--muted)}
.muted-sm{color:var(--muted-2);font-size:14px}
.link-accent{font-weight:800;color:var(--accent);border-radius:6px}
.link-accent:hover{text-decoration:underline}

.meta-row{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:12px}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800}
.badge-blue{background:var(--accent-soft);color:var(--accent-ink)}
.badge-slate{background:var(--slate-bg);color:var(--slate-fg)}
.badge-green{background:var(--ok-bg);color:var(--ok-fg)}
.badge-orange{background:var(--warn-bg);color:var(--warn-fg)}

.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip-card{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-weight:700;color:var(--text);
}

.directory,.city-card{display:block;padding:18px;transition:.2s ease;width:100%;text-align:left;font:inherit;cursor:pointer}
.directory strong,.city-card strong{display:block;font-size:18px;color:var(--heading)}
.directory span,.city-card span{display:block;font-size:14px;color:var(--muted);margin-top:8px}
.directory:hover,.city-card:hover,.job-card:hover{border-color:var(--accent);transform:translateY(-2px)}

.breadcrumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.breadcrumbs a{color:var(--muted);border-radius:4px}
.breadcrumbs a:hover{color:var(--accent);text-decoration:underline}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.breadcrumbs li+li::before{content:'/';margin-right:8px;color:var(--muted-2)}

/* ---------------- page hero (inner pages) ---------------- */

.page-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--surface-2) 0%,var(--bg-2) 60%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
body[data-theme='dark'] .page-hero{
  background:linear-gradient(135deg,#0b111a 0%,#0e1622 55%,var(--bg) 100%);
}
.page-hero::after{
  content:'';position:absolute;right:-140px;bottom:-120px;height:340px;width:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,104,232,.11),rgba(20,104,232,0));pointer-events:none;
}
.page-hero .container{padding-top:46px;padding-bottom:44px;position:relative;z-index:1}
.page-title{font-size:clamp(32px,4vw,52px);line-height:1.05}
.page-intro{font-size:18px;line-height:1.7;color:var(--muted);margin-top:16px;max-width:760px}

/* ---------------- long-form content ---------------- */

.content-card{padding:32px}
.content-card h2{font-size:24px;margin:34px 0 14px}
.content-card h2:first-child{margin-top:0}
.content-card h3{font-size:19px;margin:24px 0 10px}
.content-card p,.content-card li{color:var(--text);opacity:.9;line-height:1.8;font-size:16px}
.content-card ul,.content-card ol{padding-left:22px;margin:12px 0}
.content-card li{margin-bottom:8px}
.content-card a{color:var(--accent);font-weight:700}
.content-card a:hover{text-decoration:underline}
.content-card strong{color:var(--heading)}

.note-box{
  border:1px solid var(--border);border-left:4px solid var(--accent);
  background:var(--surface-2);border-radius:12px;padding:16px 18px;margin:20px 0;
}
.note-box p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}

.toc{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin-bottom:8px}
.toc h2{font-size:16px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:6px;font-size:15px}
.toc a{color:var(--accent)}

.updated-line{font-size:14px;color:var(--muted-2);margin-top:10px}

/* ---------------- forms ---------------- */

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field-block{display:flex;flex-direction:column;gap:7px}
.field-block.full{grid-column:1 / -1}
.field-block label{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.field-block input,.field-block select,.field-block textarea{
  width:100%;padding:13px 14px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:15px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field-block textarea{min-height:150px;resize:vertical}
.field-block input::placeholder,.field-block textarea::placeholder{color:var(--muted-2)}
.field-block input:hover,.field-block select:hover,.field-block textarea:hover{border-color:var(--border-strong)}
.field-block input:focus,.field-block select:focus,.field-block textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(20,104,232,.18);background:var(--surface);
}
body[data-theme='dark'] .field-block input:focus,
body[data-theme='dark'] .field-block select:focus,
body[data-theme='dark'] .field-block textarea:focus{box-shadow:0 0 0 3px rgba(60,134,255,.28)}
.field-block input:disabled,.field-block select:disabled,.field-block textarea:disabled{
  background:var(--surface-2);color:var(--muted-2);cursor:not-allowed;border-color:var(--border);
}
.field-hint{font-size:13px;color:var(--muted-2);line-height:1.5}
.form-status{
  margin-top:16px;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.6;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);
}
.form-status[hidden]{display:none}
select.themed{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;
}

/* ---------------- feature lists ---------------- */

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.feature h3{font-size:18px;margin-bottom:8px}
.feature p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.feature-icon{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);font-size:20px;font-weight:800;margin-bottom:14px;
}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow);position:relative}
.step-num{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--btn-accent);color:#fff;font-weight:800;font-family:Manrope,sans-serif;margin-bottom:14px;
}
.step h3{font-size:19px;margin-bottom:8px}
.step p{margin:0;color:var(--muted);line-height:1.7;font-size:15px}

.cta-band{
  margin-top:36px;padding:30px;border-radius:20px;
  background-color:#0b4bb5;
  background-image:linear-gradient(135deg,var(--btn-accent) 0%,#0b4bb5 100%);
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;font-size:26px}
.cta-band p{margin:8px 0 0;color:rgba(255,255,255,.88);max-width:620px;line-height:1.65}
.cta-band .btn-primary{background:#fff;color:#0b4bb5;box-shadow:none}
.cta-band .btn-primary:hover{background:#eef4ff}
.cta-band .btn-outline{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn-outline:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ---------------- ad boxes (mock only) ---------------- */

.ad-box{padding:24px;border-style:dashed;background:var(--surface-3)}
.ad-shell{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;
  border:2px dashed var(--border-strong);border-radius:24px;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--surface-2) 14px 28px);
}
.ad-inner{text-align:center;padding:24px;max-width:90%;position:relative;z-index:1}
.ad-kicker{font-size:14px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.ad-title{margin-top:14px;font-family:'Manrope',sans-serif;font-size:clamp(28px,4vw,40px);line-height:1;color:var(--heading)}
.ad-note{margin-top:8px;font-size:13px;color:var(--muted)}

/* ---------------- live jobs (homepage) ---------------- */

.live-jobs-section{padding-top:46px}
.live-search-form{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(160px,.5fr) auto auto;
  gap:12px;align-items:end;margin:24px 0;
}
.live-search-field{
  display:block;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);padding:11px 14px;transition:border-color .18s ease,box-shadow .18s ease;
}
.live-search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(20,104,232,.16)}
.live-search-field span{display:block;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.live-search-field input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:16px;margin-top:6px}
.live-search-field input::placeholder{color:var(--muted-2)}

.live-jobs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.live-job-card{
  display:flex;flex-direction:column;gap:12px;padding:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow);transition:.2s ease;
}
.live-job-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.live-job-head{display:flex;justify-content:space-between;gap:16px}
.live-job-card h3{font-size:20px;line-height:1.25}
.live-job-card h3 a{color:var(--heading);border-radius:4px}
.live-job-card h3 a:hover{color:var(--accent)}
.live-job-company{font-weight:700;color:var(--muted);margin-top:4px}
.live-job-location{font-size:14px;color:var(--muted)}
.live-job-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:4px}
.live-job-actions a{font-weight:800;color:var(--accent);border-radius:4px}
.live-job-actions a:hover{text-decoration:underline}
.live-job-date{font-size:12px;color:var(--muted-2)}

/* ---------------- job detail ---------------- */

.job-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.job-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.job-logo{
  height:64px;width:64px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:800;font-family:Manrope,sans-serif;font-size:24px;overflow:hidden;
}
.job-logo img{width:100%;height:100%;object-fit:contain}
.job-desc{margin-top:10px}
.job-desc h2{font-size:20px;margin:26px 0 12px}
.job-desc h3{font-size:17px;margin:26px 0 10px;font-weight:800}
.job-desc h3:first-child{margin-top:0}
.job-desc p,.job-desc li{color:var(--text);opacity:.9;line-height:1.8;font-size:16px}
.job-desc p{margin:0 0 14px}
.job-desc ul,.job-desc ol{padding-left:22px;margin:0 0 14px;display:flex;flex-direction:column;gap:8px}
.job-desc li{margin:0}
.job-desc a{color:var(--accent);font-weight:700}
/* Inline pay/comp figures pulled out of the raw description text so a
   salary range reads clearly instead of hiding inside a paragraph. */
.job-desc .pay-highlight{color:var(--accent);font-weight:800}
.job-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.job-facts li{display:flex;flex-direction:column;gap:3px;font-size:15px}
.job-facts dt,.job-facts .k{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}
.job-facts .v{color:var(--text);font-weight:600}
.sidebar-card{padding:24px;position:sticky;top:104px}
.source-note{font-size:13px;color:var(--muted-2);line-height:1.6;margin-top:14px}
.apply-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:12px}

.empty-state{padding:40px 24px;text-align:center;border:1px dashed var(--border-strong);border-radius:18px;background:var(--surface-2)}
.empty-state h3{font-size:20px}
.empty-state p{color:var(--muted);margin:10px 0 0;line-height:1.7}

.skeleton{
  border-radius:10px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.4s ease infinite;
}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){
  .skeleton{animation:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

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

.footer{background:var(--footer-bg);color:var(--footer-text);margin-top:72px;border-top:1px solid var(--footer-line)}
.footer .top{padding:52px 0;display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:28px}
.footer .top p,.footer a{color:var(--footer-text);font-size:15px;line-height:1.9}
.footer a{border-radius:4px}
.footer a:hover{color:#fff;text-decoration:underline}
body[data-theme='dark'] .footer a:hover{color:var(--accent-ink)}
.footer h3{font-size:15px;color:var(--footer-heading);margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-bottom{
  border-top:1px solid var(--footer-line);padding:20px 0 28px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;
}
.footer-brand{max-width:320px}
.footer-brand .logo-wrap{margin-bottom:14px;display:inline-flex;border-radius:8px}
.footer-brand .jbc-logo{height:28px}
.footer-brand p{opacity:.85}
/* The light-theme footer is dark navy, so it always needs the dark logo. */
.footer .jbc-logo-light{display:none}
.footer .jbc-logo-dark{display:block}

/* ---------------- responsive ---------------- */

@media (max-width:1100px){
  .job-layout{grid-template-columns:1fr}
  .sidebar-card{position:static}
  .footer .top{grid-template-columns:1fr 1fr 1fr}
  .footer-brand{grid-column:1 / -1;max-width:none}
}
@media (max-width:900px){
  .live-search-form{grid-template-columns:1fr 1fr}
  .live-jobs-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav,.header-actions .mobile-hide{display:none}
  .menu-btn{display:inline-flex}
  .grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}
  .container,.container-narrow{padding:0 18px}
  .section{padding:44px 0}
  .panel{padding:22px}
  .content-card{padding:24px}
  .footer .top{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column}
  .cta-band{padding:24px}
}
@media (max-width:620px){
  .live-search-form{grid-template-columns:1fr}
  .live-search-form .btn{width:100%}
  .page-hero .container{padding-top:32px;padding-bottom:32px}
}
@media (max-width:430px){
  .footer .top{grid-template-columns:1fr}
}

/* Set by the inline pre-paint script in <body>. Paints the page ground
   before the first frame so dark mode never flashes white. */
html[data-theme='dark']{background:#070a10;color-scheme:dark}
html[data-theme='light']{background:#ffffff;color-scheme:light}