/* =====================================================================
   RJB brand system (client brief, 30 Sep 2026)
   Deep navy · warm ivory · selective champagne gold · employer blue · WhatsApp green
   Loaded after theme.css / home-hero.css, before light.css.
   ===================================================================== */
:root {
  --navy: #050708; --navy2: #0B0F10; --ivory: #EEF1F2; --soft: #F7FAFA; --grey-t: #B7BFC2;
  --champ: #C9CFD3; --champ-hi: #E8ECEE; --border: #1E2729;
  --blue: #1A2E36; --blue-hi: #29434A; --wa: #25D366; --wa-ink: #06260F;
  --line: #1E2729; --line2: #2B3638;
  --metal-soft: linear-gradient(#1E2729, #1E2729);
}

/* ---------- restraint: gold only where it earns it ---------- */
.gold { background: none; -webkit-text-fill-color: currentColor; color: var(--champ); animation: none; }
.script { color: var(--champ-hi); text-shadow: none; }
.eyebrow { color: var(--grey-t); }
.eyebrow::before, .center .eyebrow::after { background: var(--champ); width: 26px; }
.brand small { color: var(--grey-t); }
.brand img { box-shadow: 0 0 0 1px var(--border); }
.lic i, .svc > i, .tl-ico, .ind-i, .door-ico, .ci-row i, .foot-contact i { color: var(--ivory); }
.svc > i, .tl-ico { background: rgba(245,241,232,.06); border-color: var(--border); }
.svc:hover > i { background: var(--champ); color: var(--navy); }
.lic span { color: var(--grey-t); }
.spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(17,46,56,.35), transparent 60%); }
.progress { background: var(--champ); box-shadow: none; }
.btn-gold::after, .fab-wa::before { display: none; }

/* ---------- button hierarchy ---------- */
.btn-gold { background: var(--champ); color: var(--navy); box-shadow: 0 10px 26px -14px rgba(128,196,212,.7); }
.btn-gold:hover { background: var(--champ-hi); color: var(--navy); box-shadow: 0 14px 32px -14px rgba(128,196,212,.8); }
.btn-blue { color: var(--ivory); background: var(--blue); border-color: #3A4648; box-shadow: 0 10px 26px -14px rgba(17,46,56,.9); }
.btn-blue:hover { background: var(--blue-hi); color: #fff; transform: translateY(-2px); }
.btn-wa { color: var(--wa-ink); background: var(--wa); }
.btn-wa:hover { background: #3be07a; color: var(--wa-ink); transform: translateY(-2px); }
.btn-wa-o { color: var(--ivory); background: transparent; border-color: rgba(37,211,102,.6); }
.btn-wa-o i { color: var(--wa); }
.btn-wa-o:hover { border-color: var(--wa); background: rgba(37,211,102,.08); }
html:not([data-theme="light"]) .btn-ghost { background: transparent; border-color: rgba(245,241,232,.32); color: var(--ivory); }
html:not([data-theme="light"]) .btn-ghost:hover { border-color: var(--champ-hi); color: var(--champ-hi); background: rgba(245,241,232,.04); box-shadow: none; }

/* floating WhatsApp: green, compact on phones */
.fab-wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 14px 34px -14px rgba(37,211,102,.7); }
.fab-wa:hover { background: #3be07a; color: var(--wa-ink); }
.mbar .mb-wa { background: var(--wa) !important; color: var(--wa-ink) !important; border-color: transparent !important; }
.mbar .mb-go[href*="employers"] { background: var(--blue); color: var(--ivory); border-color: transparent; }

/* ---------- job cards: Apply now (gold) + WhatsApp (green) ---------- */
.job-foot { gap: 10px; }
.job-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.job-now { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--champ); color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .3s, transform .3s var(--ease); }
.job-now:hover { background: var(--champ-hi); transform: translateY(-1px); }
.job-wa { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: var(--wa-ink); font-size: 1.2rem; text-decoration: none; transition: transform .3s var(--ease); }
.job-wa:hover { transform: scale(1.06); }
.job-upd { font-size: .74rem; color: var(--ink3); }
.job-hot { background: rgba(128,196,212,.14); color: var(--champ-hi); border: 1px solid rgba(128,196,212,.35); }
.job-pay { background: rgba(245,241,232,.03); border-color: var(--border); }
.job-sal { color: var(--champ-hi); }

/* ---------- home hero (.mx) in the navy system ---------- */
.mx {
  --bg: #050708; --bg2: #0B0F10; --bg3: #0F1415; --line: #1E2729; --line2: #2B3638;
  --text: #EEF1F2; --text2: #C9CFD3; --muted: #B7BFC2;
  --acc: #C9CFD3; --acc-hi: #E8ECEE; --acc-lo: #1A2E36;
  --glow: rgba(128,196,212,.16); --glow2: rgba(17,46,56,.55);
  --em: linear-gradient(#C9CFD3, #C9CFD3);
  --btn: #C9CFD3; --btn-ink: #050708; --btn-glow: rgba(128,196,212,.45);
  --frame: linear-gradient(#1E2729, #1E2729);
  --sw1: linear-gradient(160deg, #0B0F10, #050708); --sw1i: #EEF1F2; --sw1n: #E8ECEE;
  --sw2: linear-gradient(160deg, #0F1415, #0B0F10); --sw2i: #EEF1F2; --sw2n: #EEF1F2;
  --sw3: linear-gradient(160deg, #0F1B1F, #0E1819); --sw3i: #EEF1F2; --sw3n: #EEF1F2;
  --sw4: linear-gradient(160deg, #1C3840, #1A2E36); --sw4i: #EEF1F2; --sw4n: #EEF1F2;
  --sw5: linear-gradient(160deg, #D9DEE1, #C9CFD3); --sw5i: #050708; --sw5n: #050708;
  --sky: rgba(169,173,179,.35); --globe-core: #0F1B1F;
}
.mx h1 .mx-l3 { animation: mx-up 1s var(--ease) .24s backwards; }
.mx .mx-script { animation: none; }
.mx .mx-btn-main::after { display: none; }
.mx .mx-seg button[data-audience-btn="employer"][aria-pressed="true"] { background: var(--blue); color: var(--ivory); box-shadow: 0 6px 20px -8px rgba(17,46,56,.9); }
.mx .mx-btn-blue { color: var(--ivory); background: var(--blue); border: 1px solid #3A4648; }
.mx .mx-btn-blue:hover { background: var(--blue-hi); transform: translateY(-2px); }
.mx .mx-btn-wa { color: var(--ivory); border: 1px solid rgba(37,211,102,.6); background: transparent; }
.mx .mx-btn-wa .mx-ico, .mx .mx-btn-wa i { color: var(--wa); }
.mx .mx-btn-wa:hover { border-color: var(--wa); background: rgba(37,211,102,.08); transform: translateY(-2px); }
.mx .mx-fcard { box-shadow: 0 26px 50px -30px rgba(0,0,0,.9); }
.mx .mx-hot { background: rgba(128,196,212,.16); color: #E8ECEE; border: 1px solid rgba(128,196,212,.4); }
.mx .mx-kicker { color: var(--text2); }
.mx .mx-trust .mx-ico { color: var(--text2); }
.mx .mx-trust a { color: var(--acc-hi); }

/* ---------- new home sections ---------- */
.search-bar { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 10px; padding: 10px; border-radius: 20px; background: var(--s1); border: 1px solid var(--border); margin: 0 0 22px; }
.search-bar label { display: grid; gap: 2px; padding: 6px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); }
.search-bar label span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
.search-bar input, .search-bar select { background: transparent; border: 0; color: var(--ink); font: 500 1rem var(--sans); min-height: 30px; outline: none; width: 100%; }
.search-bar select option { background: var(--s1); color: var(--ink); }
.search-bar label:focus-within { border-color: var(--champ); }
.search-bar .btn { min-height: 100%; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
.steps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.step { position: relative; padding: 22px 18px 20px; border-radius: 18px; background: var(--s1); border: 1px solid var(--border); counter-increment: st; }
.step::before { content: counter(st, decimal-leading-zero); display: block; font: 400 1.9rem/1 var(--serif); color: var(--champ); margin-bottom: 14px; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 38px; right: -14px; width: 14px; height: 1px; background: var(--border); }
.step h3 { font: 600 1.02rem/1.3 var(--sans); margin: 0 0 6px; color: var(--ink); }
.step p { margin: 0; font-size: .88rem; color: var(--ink2); line-height: 1.5; }
.steps.seven .step::before { font-size: 1.5rem; }
.steps-note { margin: 18px 0 0; font-size: .86rem; color: var(--ink3); }

.drive { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(128,196,212,.45); background: var(--s1); }
.drive-main { padding: clamp(24px, 4vw, 40px); }
.drive-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(37,211,102,.1); color: #6ee7a0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.drive-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa); }
.drive h3 { font: 400 clamp(1.7rem, 3vw, 2.3rem)/1.15 var(--serif); margin: 14px 0 10px; }
.drive-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.drive-cats span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: .84rem; color: var(--ink2); }
.drive-facts { margin: 0; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; background: var(--s2); border-left: 1px solid var(--border); align-content: center; }
.drive-facts div { display: grid; gap: 2px; }
.drive-facts dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
.drive-facts dd { margin: 0; color: var(--ink); font-weight: 500; }
.drive-facts dd.hl { color: var(--champ-hi); font: 400 1.6rem/1.1 var(--serif); }
.drive-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.need { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.need-inds { display: flex; flex-wrap: wrap; gap: 8px; }
.need-inds span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--border); font-size: .9rem; color: var(--ink); }
.need-inds i { color: var(--grey-t); }
.need .drive-cta { margin-top: 26px; }

.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.why { padding: 22px; border-radius: 18px; background: var(--s1); border: 1px solid var(--border); }
.why i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(245,241,232,.06); color: var(--ivory); margin-bottom: 12px; }
.why h3 { font: 600 1.05rem/1.3 var(--sans); margin: 0 0 6px; }
.why p { margin: 0; color: var(--ink2); font-size: .92rem; }

.reach { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.reach-map { width: 100%; height: auto; }
.reach-map .rm-land { fill: rgba(245,241,232,.035); stroke: var(--border); }
.reach-map .rm-arc { fill: none; stroke: rgba(128,196,212,.45); stroke-width: 1.2; stroke-dasharray: 3 5; }
.reach-map .rm-pin { fill: var(--champ); }
.reach-map .rm-home { fill: var(--ivory); }
.reach-map .rm-pulse { fill: var(--champ); opacity: .25; transform-box: fill-box; transform-origin: center; animation: rmPing 3s ease-out infinite; }
.reach-map text { fill: var(--ink2); font: 600 11px var(--sans); letter-spacing: .14em; }
@keyframes rmPing { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.4); opacity: 0; } }
.regions { display: grid; gap: 12px; margin-top: 24px; }
.region { padding: 16px 18px; border-radius: 16px; background: var(--s1); border: 1px solid var(--border); }
.region b { display: block; font-weight: 600; margin-bottom: 6px; }
.region span { color: var(--ink2); font-size: .92rem; }

.safe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.safe-card { padding: 22px; border-radius: 18px; background: var(--s1); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.safe-card i { font-size: 1.2rem; color: var(--ivory); }
.safe-card h3 { font: 600 1.05rem/1.3 var(--sans); margin: 4px 0 0; }
.safe-card p { margin: 0; color: var(--ink2); font-size: .9rem; flex: 1; }
.safe-card a { color: var(--champ-hi); font-weight: 600; font-size: .9rem; text-decoration: none; }
.safe-card a:hover { text-decoration: underline; }
.safe-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(128,196,212,.4); background: rgba(128,196,212,.06); }
.safe-banner p { margin: 0; color: var(--ink); }
.safe-banner b { color: var(--champ-hi); }

@media (max-width: 1100px) {
  .steps.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step::after { display: none; }
  .safe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .search-bar { grid-template-columns: 1fr 1fr; }
  .search-bar label:first-child { grid-column: 1 / -1; }
  .search-bar .btn { grid-column: 1 / -1; min-height: 50px; }
  .drive, .need, .reach { grid-template-columns: 1fr; }
  .drive-facts { border-left: 0; border-top: 1px solid var(--border); }
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps.five, .steps.seven { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 16px; }
  .step::before { grid-row: span 2; margin: 0; font-size: 1.5rem; }
  .why-grid, .safe { grid-template-columns: 1fr; }
  .drive-facts { grid-template-columns: 1fr 1fr; }
  .job-foot { flex-wrap: wrap; }
  .fab-wa { height: 52px; padding: 0 16px 0 14px; }
}

/* light theme keeps its ivory surfaces; new pieces follow tokens */
html[data-theme="light"] .search-bar label { background: #fff; }
html[data-theme="light"] .drive-facts { background: #F7FAFA; }
html[data-theme="light"] .reach-map .rm-land { fill: rgba(20,56,66,.05); }
html[data-theme="light"] .lic i, html[data-theme="light"] .svc > i, html[data-theme="light"] .tl-ico, html[data-theme="light"] .ind-i, html[data-theme="light"] .why i, html[data-theme="light"] .safe-card i { color: #0E1A1B; }

.mx .mx-door-p { color: var(--text2); margin: -4px 0 16px; position: relative; }
.mx .mx-door .need-inds { position: relative; margin-bottom: 22px; }
.mx .mx-door .need-inds span { background: var(--bg); }
.mx .mx-door-cta { display: flex; flex-wrap: wrap; gap: 12px; position: relative; }
.drive-list { display: grid; gap: 16px; }
.reach-h { font-size: clamp(2rem, 4vw, 3.2rem); }