/* Recruit Justice — six-tone daylight theme, October 2026.
   Exactly three opaque light surfaces and three dark text colors drive this theme.
   Depth, lines and focus treatments reuse these same tones with transparency.
   All existing motion, content, forms, locations and specialization interactions remain intact. */
:root {
  --rj-ink: #142B38;     /* dark 1: headings and actions */
  --rj-slate: #2D4856;   /* dark 2: navigation and body copy */
  --rj-steel: #58717D;   /* dark 3: support copy and captions */
  --rj-cloud: #FBFCFD;   /* light 1: canvas */
  --rj-mist: #F0F6F8;    /* light 2: alternating surfaces */
  --rj-ice: #E3EEF2;     /* light 3: emphasis surfaces */
  --night: var(--rj-ink);
  --navy: var(--rj-ink);
  --navy2: var(--rj-slate);
  --navy3: var(--rj-steel);
  --gold: var(--rj-ink);
  --goldBright: var(--rj-slate);
  --ink: var(--rj-ink);
  --muted: var(--rj-steel);
  --ivory: var(--rj-cloud);
  --cream: var(--rj-mist);
  --line: var(--rj-ice);
  --blue: var(--rj-slate);
  --cyan: var(--rj-steel);
  --wash: var(--rj-ice);
  --white: var(--rj-cloud);
}
html { color-scheme: light; }
body, .legal-page, .not-found-page { background: var(--rj-cloud); color: var(--rj-ink); }
::selection { background: var(--rj-ice); color: var(--rj-ink); }
:focus-visible { outline: 2px solid var(--rj-slate); outline-offset: 3px; }
a { -webkit-tap-highlight-color: transparent; }
.scroll-line { background: linear-gradient(90deg, var(--rj-steel), var(--rj-ink), var(--rj-steel)); box-shadow: none; }

/* Light glass navigation; remove the RJ logo tile without deleting the company wordmark. */
.site-header, .site-header.scrolled,
.legal-page .header, .not-found-page .header {
  background: rgb(251 252 253 / 92%);
  border-bottom: 1px solid rgb(45 72 86 / 13%);
  color: var(--rj-ink);
  box-shadow: 0 9px 28px rgb(20 43 56 / 5%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.site-header .brand-symbol { display: none !important; }
.site-header .brand { gap: 0; color: var(--rj-ink); }
.site-header .brand .brand-wordmark,
.site-header .brand .brand-wordmark > span,
.site-header .brand > span:not(.brand-symbol) {
  color: var(--rj-ink);
}
.navigation a { color: var(--rj-slate); }
.navigation a:hover, .navigation a.is-active, .navigation a:focus-visible { color: var(--rj-ink); }
.navigation a:after { background: var(--rj-steel); }
.nav-toggle, .nav-toggle span { color: var(--rj-ink); }
.nav-toggle span { background: var(--rj-ink); }
.header-mail {
  color: var(--rj-ink);
  background: var(--rj-ice);
  border: 1px solid rgb(45 72 86 / 14%);
  box-shadow: 0 8px 20px rgb(20 43 56 / 5%);
}
.header-mail:hover { background: var(--rj-mist); color: var(--rj-ink); }

/* Hero retains all dimensional motion, re-toned into a pale editorial composition. */
.hero.modern-hero { background: var(--rj-cloud); color: var(--rj-ink); }
.modern-hero:before {
  background: radial-gradient(ellipse 640px 590px at 74% 35%, rgb(88 113 125 / 14%), transparent 75%),
              radial-gradient(ellipse 650px 470px at 1% 90%, rgb(88 113 125 / 10%), transparent 74%),
              linear-gradient(135deg,var(--rj-cloud),var(--rj-mist));
}
.modern-hero:after {
  background-image: linear-gradient(90deg, rgb(45 72 86 / 5%) 1px,transparent 1px),
                    linear-gradient(rgb(45 72 86 / 5%) 1px,transparent 1px);
  opacity: .5;
}
.hero-kicker { color: var(--rj-steel); }
.hero-kicker:before, .chip-pulse {
  background: var(--rj-slate); box-shadow: 0 0 0 5px rgb(45 72 86 / 9%);
}
.hero h1, .hero h1 em {
  color: var(--rj-ink) !important;
  background: none !important;
  -webkit-text-fill-color: var(--rj-ink) !important;
  filter: none;
}
.hero h1 em { color: var(--rj-slate) !important; -webkit-text-fill-color: var(--rj-slate) !important; }
.hero-lead { color: var(--rj-slate); }
.hero-scroll-mark { color: var(--rj-steel); }
.scroll-dash { background: linear-gradient(90deg, var(--rj-steel), transparent); }
.scroll-dash:after { background: var(--rj-ink); }
.btn { color: var(--rj-ink); }
.btn-gold, .btn-glass {
  background: var(--rj-ice);
  color: var(--rj-ink);
  border: 1px solid rgb(45 72 86 / 15%);
  box-shadow: 0 10px 29px rgb(20 43 56 / 10%);
}
.btn-glass { background: var(--rj-cloud); }
.btn-gold:hover, .btn-glass:hover {
  background: var(--rj-mist);
  color: var(--rj-ink);
  border-color: var(--rj-steel);
  box-shadow: 0 15px 35px rgb(20 43 56 / 13%);
}
.hero-film-holder {
  background: var(--rj-ice);
  border: 1px solid rgb(88 113 125 / 20%);
  box-shadow: 0 30px 90px rgb(20 43 56 / 12%), 0 0 0 12px rgb(227 238 242 / 60%);
}
.hero-film {
  filter: grayscale(.76) brightness(1.55) contrast(.82) saturate(.4);
  opacity: .38 !important;
}
.hero-film-holder:after {
  background: linear-gradient(90deg, rgb(251 252 253 / 55%), rgb(240 246 248 / 14%) 45%, rgb(251 252 253 / 25%)),
              linear-gradient(0deg,rgb(240 246 248 / 55%),transparent 70%);
}
.visual-grid {
  border-color: rgb(45 72 86 / 13%);
  background-image: linear-gradient(rgb(45 72 86 / 6%) 1px,transparent 1px),linear-gradient(90deg,rgb(45 72 86 / 6%) 1px,transparent 1px);
}
.visual-halo {
  background: radial-gradient(circle,rgb(88 113 125 / 13%),transparent 68%);
  border-color: rgb(45 72 86 / 13%);
  box-shadow: 0 0 0 45px rgb(88 113 125 / 5%),0 0 0 90px rgb(88 113 125 / 3%);
}
.glass-chip {
  color: var(--rj-ink);
  background: rgb(251 252 253 / 85%);
  border: 1px solid rgb(45 72 86 / 16%);
  box-shadow: 0 12px 30px rgb(20 43 56 / 11%);
}
.chip-arrow { color: var(--rj-slate); }
.glass-corner { border-color: rgb(45 72 86 / 25%); }

/* Marquee and video showcase: light shells, readable dark legends, retained motion. */
.talent-ribbon {
  background: var(--rj-ice);
  border-top: 1px solid rgb(45 72 86 / 9%);
  border-bottom: 1px solid rgb(45 72 86 / 9%);
}
.talent-ribbon:before { background: linear-gradient(90deg,var(--rj-ice),transparent); }
.talent-ribbon:after { background: linear-gradient(270deg,var(--rj-ice),transparent); }
.ribbon-track span { color: var(--rj-slate); }
.ribbon-track i { background: var(--rj-steel); box-shadow: none; }
.motion-story { background: var(--rj-cloud); }
.motion-story:before { background: radial-gradient(circle,rgb(88 113 125 / 8%),transparent 68%); }
.overline, .story-heading-line h2 span { color: var(--rj-steel); }
.story-heading-line h2, .section-header h2 { color: var(--rj-ink); }
.story-heading-line > p, .section-note { color: var(--rj-steel); }
.motion-tile {
  background: var(--rj-ice);
  color: var(--rj-ink);
  border: 1px solid rgb(45 72 86 / 12%);
  box-shadow: 0 16px 38px rgb(20 43 56 / 9%);
}
.motion-tile:hover { box-shadow: 0 23px 46px rgb(20 43 56 / 14%); }
.motion-video { filter: grayscale(.82) brightness(1.6) contrast(.85) saturate(.38); opacity: .42; }
.motion-tile .tile-filter, .motion-tile.tile-two .tile-filter, .motion-tile.tile-three .tile-filter {
  background: linear-gradient(180deg,rgb(251 252 253 / 26%) 0%,rgb(240 246 248 / 70%) 47%,rgb(251 252 253 / 98%) 100%);
}
.tile-top { color: var(--rj-slate); }
.tile-north { color: var(--rj-ink); border-color: rgb(45 72 86 / 25%); }
.motion-tile:hover .tile-north { background: var(--rj-cloud); }
.tile-content h3 { color: var(--rj-ink); }
.tile-content > span { color: var(--rj-slate); border-bottom-color: var(--rj-steel); }
.tile-content b { color: var(--rj-steel); }

/* Every directory is light, and the six-up desktop/two-up mobile grid is untouched. */
.specializations-section { background: var(--rj-mist); color: var(--rj-ink); border-top-color: rgb(45 72 86 / 12%); }
.specializations-section:before { background-image: radial-gradient(rgb(45 72 86 / 20%) 1px,transparent 1px); opacity: .12; }
.locations-section { background: var(--rj-cloud); color: var(--rj-ink); }
.locations-section:before { background: radial-gradient(ellipse 720px 520px at 87% 12%,rgb(88 113 125 / 8%),transparent 73%); }
.locations-section:after { background: radial-gradient(circle,rgb(88 113 125 / 6%),transparent 70%); }
.locations-section h2 { color: var(--rj-ink); }
.locations-section .overline, .specializations-section .overline { color: var(--rj-steel); }
.practice-card, .practice-card:nth-child(7n+1),.practice-card:nth-child(9n+4),.place-card {
  background: var(--rj-cloud);
  border-color: rgb(45 72 86 / 13%);
  box-shadow: 0 6px 16px rgb(20 43 56 / 3%);
}
.practice-card:hover,.practice-card[open],.practice-card:focus-within,
.place-card:hover,.place-card[open],.place-card:focus-within {
  background: var(--rj-ice);
  border-color: rgb(45 72 86 / 28%);
  box-shadow: 0 12px 32px rgb(20 43 56 / 10%);
}
.practice-card .directory-name,.place-card .directory-name { color: var(--rj-ink); }
.directory-chevron,.place-card .directory-chevron { color: var(--rj-steel); }
.directory-panel,.locations-section .directory-panel {
  background: var(--rj-cloud);
  color: var(--rj-ink);
  border: 1px solid rgb(45 72 86 / 20%);
  box-shadow: 0 24px 55px rgb(20 43 56 / 17%);
}
.directory-options li,.locations-section .directory-options li { background: var(--rj-cloud); color: var(--rj-slate); }
.directory-options li:nth-child(even) { background: var(--rj-mist); }
.directory-options li:hover { background: var(--rj-ice); }

/* Animated bridge without a dark background block. */
.motion-bridge { background: var(--rj-ice); color: var(--rj-ink); border-top: 1px solid rgb(45 72 86 / 13%); }
.motion-bridge:before {
  background: radial-gradient(ellipse 70% 150% at 85% 55%,rgb(88 113 125 / 11%),transparent 70%),
              linear-gradient(100deg,var(--rj-ice),var(--rj-mist));
}
.bridge-emblem { background: var(--rj-cloud); color: var(--rj-ink); box-shadow: 0 12px 38px rgb(20 43 56 / 10%); border: 1px solid rgb(45 72 86 / 14%); }
.bridge-text p,.bridge-text p span { color: var(--rj-ink); }
.bridge-text p span { color: var(--rj-steel); }
.bridge-thread { background: linear-gradient(90deg,rgb(45 72 86 / 24%),transparent); }
.bridge-ring { border-color: rgb(45 72 86 / 20%); box-shadow: 0 0 0 50px rgb(88 113 125 / 4%),0 0 0 100px rgb(88 113 125 / 2%); }
.ring-two { border-color: rgb(88 113 125 / 20%); }

/* Forms stay exactly as functional source, only colors and finishes change. */
.form-section { color: var(--rj-ink); }
.candidate-section { background: var(--rj-cloud); }
.employer-section { background: var(--rj-mist); color: var(--rj-ink); }
.employer-section .section-note { color: var(--rj-steel); }
.form-stage,.employer-stage { background: var(--rj-cloud); border-color: rgb(45 72 86 / 13%); box-shadow: 0 25px 65px rgb(20 43 56 / 9%); }
.form-content { background: var(--rj-cloud); color: var(--rj-ink); }
.form-stage .form-side,.form-side {
  background: radial-gradient(circle at 50% 43%,rgb(88 113 125 / 13%),transparent 55%),linear-gradient(160deg,var(--rj-ice),var(--rj-mist));
  color: var(--rj-slate);
}
.form-side:before { border-color: rgb(45 72 86 / 12%); }
.form-side > p { color: var(--rj-slate); }
.perspective-mark span:not(.mark-center) { border-color: rgb(45 72 86 / 24%); box-shadow: 0 0 35px rgb(45 72 86 / 6%); }
.mark-center { color: var(--rj-ink); text-shadow: none; }
.employer-side {
  background: radial-gradient(circle at 70% 20%,rgb(88 113 125 / 12%),transparent 50%),linear-gradient(160deg,var(--rj-ice),var(--rj-mist));
}
.employer-emblem { border-color: rgb(45 72 86 / 20%); box-shadow: 0 0 0 25px rgb(88 113 125 / 5%),0 0 0 74px rgb(88 113 125 / 3%); }
.employer-emblem span { color: var(--rj-ink); }
.fine-lines { background: repeating-linear-gradient(105deg,transparent 0,transparent 54px,rgb(45 72 86 / 5%) 55px,rgb(45 72 86 / 5%) 56px); }
.field label,.marketing-heading strong { color: var(--rj-slate); }
.minor,.hint,.marketing-consent > p { color: var(--rj-steel); }
.field input:not([type=file]),.field select,.field textarea {
  background: var(--rj-cloud);
  color: var(--rj-ink);
  border-color: rgb(45 72 86 / 22%);
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color: var(--rj-steel); box-shadow: 0 0 0 4px rgb(88 113 125 / 14%);
}
.field input::placeholder,.field textarea::placeholder { color: var(--rj-steel); opacity: .9; }
.field input[type=file] { background: var(--rj-mist); color: var(--rj-slate); border-color: rgb(45 72 86 / 20%); }
.field input[type=file]::file-selector-button { background: var(--rj-ice); color: var(--rj-ink); }
.marketing-consent { background: var(--rj-mist); border-color: rgb(45 72 86 / 15%); }
.marketing-heading > span,.marketing-consent a,.consent-row a { color: var(--rj-slate); }
.consent-row,.form-checkbox { color: var(--rj-slate); }
.consent-row input { accent-color: var(--rj-ink); }
.lead-form button[type=submit],.lead-form button[type=submit]:hover {
  background: var(--rj-ice) !important;
  color: var(--rj-ink) !important;
  border: 1px solid rgb(45 72 86 / 25%) !important;
  box-shadow: 0 12px 27px rgb(20 43 56 / 12%);
}
.lead-form button[type=submit]:hover { background: var(--rj-mist) !important; }

/* Footer, dialogs, cookie bar and legal subpages all follow the same six tones. */
.site-footer, .legal-footer {
  background: var(--rj-ice) !important;
  color: var(--rj-ink);
  border-top: 1px solid rgb(45 72 86 / 12%) !important;
}
.footer-top h2,.footer-mail,.brand-footer,.brand-footer span,.brand-footer .brand-wordmark { color: var(--rj-ink); }
.footer-bottom { color: var(--rj-steel); border-top-color: rgb(45 72 86 / 14%); }
.footer-legal a,.footer-legal button { color: var(--rj-slate); }
.footer-legal a:hover,.footer-legal button:hover { color: var(--rj-ink); }
.cookie-banner { background: var(--rj-cloud); color: var(--rj-slate); border-color: rgb(45 72 86 / 20%); box-shadow: 0 20px 54px rgb(20 43 56 / 20%); }
.cookie-banner button { background: var(--rj-ice); color: var(--rj-ink); border-color: rgb(45 72 86 / 18%); }
.success-dialog,.dialog-content { background: var(--rj-cloud); color: var(--rj-ink); }
.dialog-content p { color: var(--rj-slate); }
.legal-page .header,.not-found-page .header { background: var(--rj-cloud); }
.legal-title {
  background: radial-gradient(ellipse at 90% 25%,rgb(88 113 125 / 10%),transparent 43%),linear-gradient(125deg,var(--rj-mist),var(--rj-ice));
  color: var(--rj-ink);
}
.legal-title:after { background-image: radial-gradient(rgb(45 72 86 / 10%) 1px,transparent 1px); }
.legal-title .eyebrow { color: var(--rj-steel) !important; }
.legal-title h1,.legal-body h2 { color: var(--rj-ink); }
.legal-body > p,.legal-body li { color: var(--rj-slate); }
.legal-body a,.legal-body .muted { color: var(--rj-steel); }
.legal-footer-inner p,.legal-footer-inner a,.legal-footer-inner > a:last-child { color: var(--rj-slate) !important; }
.legal-page .navline .email-link,.not-found-page .navline .email-link {
  color: var(--rj-ink);
  border-color: rgb(45 72 86 / 20%);
  background: var(--rj-mist);
}
.legal-page .navline .email-link:hover,.not-found-page .navline .email-link:hover { background: var(--rj-ice); }
.not-found-page .missing-screen {
  background: radial-gradient(ellipse 530px 450px at 85% 50%,rgb(88 113 125 / 14%),transparent 73%),linear-gradient(135deg,var(--rj-cloud),var(--rj-mist));
  color: var(--rj-ink);
}
.not-found-page .missing-screen:after { color: rgb(45 72 86 / 7%); }
.not-found-page .missing-screen p { color: var(--rj-slate); }
.not-found-page .back-home { background: var(--rj-ice); color: var(--rj-ink); border: 1px solid rgb(45 72 86 / 17%); }

@media(max-width:940px) {
  .navigation { background: rgb(251 252 253 / 97%); border-color: rgb(45 72 86 / 14%); box-shadow: 0 25px 55px rgb(20 43 56 / 13%); }
  .navigation a { color: var(--rj-slate); border-bottom-color: rgb(45 72 86 / 11%); }
  .hero-lead { color: var(--rj-slate); }
  .modern-hero:before { background: radial-gradient(ellipse at 83% 38%,rgb(88 113 125 / 12%),transparent 70%),linear-gradient(140deg,var(--rj-cloud),var(--rj-mist)); }
}
@media(max-width:650px) {
  .hero-lead { color: var(--rj-slate); }
  .hero-film-holder:after { background: linear-gradient(180deg,rgb(251 252 253 / 50%),transparent 35%,rgb(240 246 248 / 30%) 95%); }
}
@media(prefers-reduced-motion:reduce) {
  .motion-tile { background: var(--rj-ice); }
  .hero-film-holder { background: var(--rj-ice); }
}
/* Match wordmark-only branding and contrast throughout secondary-page headers. */
.legal-page .header .brand,.not-found-page .header .brand,
.legal-page .header .brand .brand-wordmark,
.not-found-page .header .brand .brand-wordmark,
.legal-page .header .brand .brand-wordmark > span,
.not-found-page .header .brand .brand-wordmark > span,
.site-footer .brand .brand-wordmark,
.site-footer .brand .brand-wordmark > span,
.legal-footer .brand .brand-wordmark,
.legal-footer .brand .brand-wordmark > span { color: var(--rj-ink); }