/* =====================================================================
   RJB · Turquoise + silver glass
   Dark on black by default, pearl light when the visitor's device is set to light.
   Turquoise = primary job-seeker actions, live signals, key highlights.
   Silver    = headline emphasis, numbers, employer actions, secondary buttons.
   Loaded last.
   ===================================================================== */
:root {
  --tq: #22C3D8; --tq-hi: #8AE6F2; --tq-lo: rgba(34,195,216,.14);
  --sv: #C9CFD3; --sv-hi: #F2F4F5;
  --silver: linear-gradient(100deg, #8E979C 0%, #D9DEE1 28%, #F7F9FA 45%, #B9C1C5 62%, #E3E7E9 80%, #9AA3A8 100%);
  --champ: #22C3D8; --champ-hi: #8AE6F2; --amber: #8AE6F2;
  --navy: #050708; --ink-dark: #03161C;
  --glass: linear-gradient(160deg, rgba(255,255,255,.065), rgba(255,255,255,.018) 55%, rgba(255,255,255,.03));
  --glass-b: rgba(255,255,255,.09);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 50px -32px rgba(0,0,0,.9);
  --glass-in: rgba(0,0,0,.28);
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
}
html[data-theme="light"] {
  --tq: #14AAC2; --tq-hi: #0A7E96; --tq-lo: rgba(20,170,194,.12);
  --sv: #7C878D; --sv-hi: #1E2A2E;
  --silver: linear-gradient(100deg, #37434A 0%, #7E8A91 28%, #9FAAB0 45%, #5F6B72 62%, #8F9AA0 80%, #3E4A50 100%);
  --champ: #14AAC2; --champ-hi: #0A7E96; --amber: #0A7E96;
  --navy: #031E26; --ivory: #0E1A1B; --soft: #FFFFFF; --grey-t: #56626A;
  --glass: linear-gradient(160deg, rgba(255,255,255,.88), rgba(255,255,255,.64));
  --glass-b: rgba(14,26,27,.08);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 44px -30px rgba(20,56,66,.35);
  --glass-in: rgba(238,243,243,.85);
  --line: rgba(14,26,27,.09); --line2: rgba(14,26,27,.16);
}

/* ---------- glow field behind the glass ---------- */
body {
  background:
    radial-gradient(38% 30% at 82% 12%, rgba(34,195,216,.13), transparent 70%),
    radial-gradient(34% 28% at 10% 48%, rgba(201,207,211,.06), transparent 70%),
    radial-gradient(40% 30% at 72% 88%, rgba(34,195,216,.08), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="light"] body {
  background:
    radial-gradient(38% 30% at 82% 12%, rgba(20,170,194,.18), transparent 70%),
    radial-gradient(34% 28% at 10% 48%, rgba(124,135,141,.14), transparent 70%),
    radial-gradient(40% 30% at 72% 88%, rgba(20,170,194,.10), transparent 70%),
    #EEF3F3;
  background-attachment: fixed;
}
.hero, .about, .ticker-band, .compliance, .mx { background: transparent !important; }
.mx { --bg: transparent; }

/* ---------- glass surfaces ---------- */
html .frame, html .frame-strong, .job, .step, .why, .safe-card, .region, .drive, .search-bar, .faq details,
.mx .mx-fcard, .mx .mx-door, .mx .mx-sw, .mx .mx-seg, .mx .mx-trust li, .ind, .story, .svc, .tl-card, .lic,
.total, .contact-forms, .quiz, .team, .cv-form, .apply-form, .filters, .wa-note, .empty, .calc-shell, .big-open, .safe-banner {
  background: var(--glass) !important;
  border: 1px solid var(--glass-b) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--glass-sh);
}
.job-pay, .search-bar label, .co-sub div, .drive-facts, .fld input, .fld select, .fld textarea, [data-team-rows] input, .quiz [data-answer], .f-group button {
  background: var(--glass-in) !important; border-color: var(--glass-b) !important;
}
.calc-out { background: linear-gradient(180deg, rgba(34,195,216,.10), transparent) !important; }
.faq details[open], .job:hover, .why:hover, .ind:hover, .svc:hover, .story:hover { border-color: rgba(201,207,211,.3) !important; }
html[data-theme="light"] .faq details[open], html[data-theme="light"] .job:hover { border-color: rgba(14,26,27,.18) !important; }

/* turquoise-tinted accents (used sparingly) */
.mx .mx-s5, .drive, .safe-banner, .mx .mx-trust li.mx-v {
  background: linear-gradient(160deg, rgba(34,195,216,.15), rgba(255,255,255,.02) 60%) !important;
  border-color: rgba(34,195,216,.38) !important;
}
html[data-theme="light"] .mx .mx-s5, html[data-theme="light"] .drive, html[data-theme="light"] .safe-banner {
  background: linear-gradient(160deg, rgba(20,170,194,.16), rgba(255,255,255,.72) 60%) !important;
}
.mx .mx-sw, .mx .mx-sw b { color: var(--sv-hi) !important; }
.mx .mx-s5 b { color: var(--tq-hi) !important; }
.mx .mx-sw::after { border-color: var(--glass-b); opacity: 1; }

/* ---------- type accents ---------- */
html .gold, .step::before {
  background: var(--silver); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.script, .mx .mx-script { color: var(--tq-hi); -webkit-text-fill-color: var(--tq-hi); background: none; }
.eyebrow { color: var(--ink2); }
.eyebrow::before, .center .eyebrow::after { background: var(--tq); }
.brand small { color: var(--ink3); }
.menu a.is-active { color: var(--tq-hi); }
.menu a:not(.btn)::after { background: var(--tq); }
.progress { background: var(--tq); }
.job-sal, .drive-facts dd.hl { color: var(--sv-hi) !important; }
.job-hot, .mx .mx-hot { background: var(--tq-lo) !important; color: var(--tq-hi) !important; border: 1px solid rgba(34,195,216,.35) !important; }
.kicker-dot, .mx .mx-kicker i { background: var(--tq); box-shadow: 0 0 0 4px var(--tq-lo); }
.lic i, .svc > i, .tl-ico, .ind-i, .why i, .safe-card i, .need-inds i { color: var(--sv); }
.svc:hover > i { background: var(--tq); color: var(--ink-dark); }

/* ---------- buttons: turquoise primary, silver employer / secondary ---------- */
.btn-gold, .mx .mx-btn-main { background: var(--tq) !important; color: var(--ink-dark) !important; box-shadow: 0 12px 30px -14px rgba(34,195,216,.7) !important; }
.btn-gold:hover, .mx .mx-btn-main:hover { background: #3DD2E6 !important; }
.btn-blue, .mx .mx-btn-blue, .job-now, .mbar .mb-go[href*="employers"],
.mx .mx-seg button[data-audience-btn="employer"][aria-pressed="true"] {
  background: var(--silver) !important; background-size: 200% 100% !important; color: #0A0D0E !important; border-color: transparent !important;
  box-shadow: 0 12px 28px -16px rgba(201,207,211,.55) !important;
}
.btn-blue:hover, .mx .mx-btn-blue:hover, .job-now:hover { background-position: 100% 0 !important; }
.mx .mx-seg button[data-audience-btn="candidate"][aria-pressed="true"] { background: var(--tq) !important; color: var(--ink-dark) !important; }
html[data-theme="light"] .btn-blue, html[data-theme="light"] .mx .mx-btn-blue, html[data-theme="light"] .job-now,
html[data-theme="light"] .mbar .mb-go[href*="employers"],
html[data-theme="light"] .mx .mx-seg button[data-audience-btn="employer"][aria-pressed="true"] {
  background: linear-gradient(135deg, #2E3A40, #56626A 55%, #3A464C) !important; color: #FFFFFF !important;
}
html[data-theme="light"] .btn-gold, html[data-theme="light"] .mx .mx-btn-main { color: #031E26 !important; }

/* ---------- home hero tokens ---------- */
.mx {
  --acc: #22C3D8; --acc-hi: #8AE6F2; --acc-lo: #11303A;
  --glow: rgba(34,195,216,.14); --glow2: rgba(17,46,56,.5);
  --em: linear-gradient(100deg, #8E979C 0%, #D9DEE1 28%, #F7F9FA 45%, #B9C1C5 62%, #E3E7E9 80%, #9AA3A8 100%);
  --btn: #22C3D8; --btn-ink: #03161C; --btn-glow: rgba(34,195,216,.45);
  --frame: linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09));
  --sky: rgba(201,207,211,.3); --globe-core: #11303A;
  --text: #EEF1F2; --text2: #B7BFC2; --muted: #8A9497; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
}
.mx .mx-pin { fill: #F2F4F5; }
.mx .mx-pdot { fill: #8AE6F2; }
.mx .mx-g-lines { stroke: #8E979C; opacity: .28; }
.mx .mx-fcard .mx-pay { color: var(--sv-hi); }
html[data-theme="light"] .mx {
  --acc: #14AAC2; --acc-hi: #0A7E96; --acc-lo: #D9E7EC;
  --glow: rgba(20,170,194,.16); --glow2: rgba(180,216,226,.45);
  --em: linear-gradient(100deg, #37434A 0%, #7E8A91 28%, #9FAAB0 45%, #5F6B72 62%, #8F9AA0 80%, #3E4A50 100%);
  --btn: #14AAC2; --btn-ink: #031E26;
  --frame: linear-gradient(rgba(14,26,27,.08), rgba(14,26,27,.08));
  --sky: rgba(86,98,106,.4); --globe-core: #CFE9F0;
  --text: #0E1A1B; --text2: #45545A; --muted: #66747A; --line: rgba(14,26,27,.09); --line2: rgba(14,26,27,.16);
}
html[data-theme="light"] .mx .mx-pin { fill: #37434A; }
html[data-theme="light"] .mx .mx-pdot { fill: #0A7E96; }
html[data-theme="light"] .mx .mx-g-lines { stroke: #7C878D; opacity: .35; }

/* ---------- nav + bars ---------- */
.nav.is-scrolled { background: rgba(5,7,8,.62) !important; border-bottom: 1px solid rgba(255,255,255,.07); }
html[data-theme="light"] .nav.is-scrolled { background: rgba(238,243,243,.75) !important; border-bottom-color: rgba(14,26,27,.08); }
.mbar, .lbar { background: rgba(5,7,8,.72) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html[data-theme="light"] .mbar, html[data-theme="light"] .lbar { background: rgba(255,255,255,.82) !important; }
.foot, .l-foot { background: rgba(0,0,0,.35) !important; }
html[data-theme="light"] .foot, html[data-theme="light"] .l-foot { background: rgba(255,255,255,.55) !important; }
.reach-map .rm-pin { fill: var(--tq); }
.reach-map .rm-home { fill: var(--sv-hi); }
.reach-map .rm-arc { stroke: rgba(201,207,211,.4); }
html[data-theme="light"] .reach-map .rm-arc { stroke: rgba(86,98,106,.45); }
.gal-frame { border-color: var(--glass-b); }

@media (prefers-reduced-motion: reduce) { html .gold { animation: none; } }

/* mobile menu: fully solid so page text never ghosts through the links */
@media (max-width: 1080px) {
  html.menu-open .menu { background: radial-gradient(120% 60% at 80% 0%, rgba(34,195,216,.14), transparent 60%), #050708 !important; }
  html[data-theme="light"].menu-open .menu { background: radial-gradient(120% 60% at 80% 0%, rgba(20,170,194,.16), transparent 60%), #EEF3F3 !important; }
  html.menu-open .nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ---------- light theme: globe drawn as a clear outline ---------- */
html[data-theme="light"] .mx .mx-globe { filter: drop-shadow(0 30px 50px rgba(20,56,66,.16)); }
html[data-theme="light"] .mx .mx-g-body { fill: url(#mx-gFill); stroke: #0A7E96; stroke-width: 1.6; stroke-opacity: .55; }
html[data-theme="light"] #mx-gFill stop:nth-child(1) { stop-color: #FFFFFF; stop-opacity: .95; }
html[data-theme="light"] #mx-gFill stop:nth-child(2) { stop-color: #E3F2F6; stop-opacity: .85; }
html[data-theme="light"] #mx-gFill stop:nth-child(3) { stop-color: #CFE6EC; stop-opacity: .7; }
html[data-theme="light"] .mx .mx-g-lines { stroke: #37434A; opacity: .34; stroke-width: 1; }
html[data-theme="light"] .mx .mx-g-ring { stroke: #14AAC2; opacity: .55; }
html[data-theme="light"] .mx .mx-g-orbit { stroke: #0A7E96; opacity: .4; }
html[data-theme="light"] .mx .mx-arc { stroke: #0A7E96; opacity: .7; stroke-width: 1.4; }
html[data-theme="light"] .mx .mx-lbl { fill: #2E3A40; }
html[data-theme="light"] .mx .mx-pin { fill: #1E2A2E; }
html[data-theme="light"] .mx .mx-pulse { fill: #14AAC2; opacity: .28; }
html[data-theme="light"] .mx .mx-gnote { color: #45545A; }
/* light logo: crisp outline so the pearl badge separates from the pearl page */
html[data-theme="light"] .brand img { box-shadow: 0 0 0 1.5px #14AAC2, 0 6px 16px -6px rgba(20,56,66,.45); }