/* ════════════════════════════════════════════════════════════
   BRAVOS — UI 2.0  ·  Refined navy/blue design system
   Override layer — loaded after main.css. Reversible.

   Interaction model, and the reason it is written down: hover used
   to be a 5–8% tint painted over the surface colour, which on the
   navy sections and the dark footer was indistinguishable from no
   hover at all. Two rules now hold everywhere:

     1. Hover BRIGHTENS and LIFTS. It never darkens toward the
        background and never removes fill. `.btn-primary-hero` used
        to go `background:transparent` on hover, so the solid white
        pill dissolved into the navy hero.
     2. Every interactive element carries a visible :focus-visible
        ring. There was none on the site at all, so keyboard users
        navigated blind.
   ════════════════════════════════════════════════════════════ */

:root{
  --r:4px; --r-lg:8px; --r-xl:12px;
  /* Flattened to hairlines. These four are the whole card/menu/modal
     vocabulary, so redefining them here is what removes the soft-shadow
     SaaS depth site-wide. Kept as box-shadow rather than border so no
     element's box model shifts by a pixel. */
  --shadow-sm:0 0 0 1px #f0f0f0;
  --shadow:0 0 0 1px #e8e8e8;
  --shadow-lg:0 0 0 1px #d4d4d4;
  --shadow-xl:0 0 0 1px #b0b0b0;

  /* Two curves: --ease for colour/opacity, --ease-out for anything
     that moves. The overshoot-free decel makes a 2px lift read as
     deliberate rather than twitchy. */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.15s; --t-mid:.25s; --t-slow:.45s;
  --trans:.25s cubic-bezier(.4,0,.2,1);

  --ring:0 0 0 4px rgba(26,26,26,.16);

  /* Focus rings are deliberately stronger than hover — focus must
     survive on top of a hover state. The white inner band is a gap so
     the accent reads against the element's own fill, not just the page.
     Dark surfaces get the solid white variant; navy-on-navy vanishes. */
  --focus:0 0 0 2px #ffffff, 0 0 0 5px var(--navy-light);
  --focus-dark:0 0 0 2px rgba(26,26,26,.55), 0 0 0 5px #ffffff;

  /* Hover targets, one step BRIGHTER than the resting colour. The remap
     had inverted this — ink has nowhere darker to travel, so the hover
     now lifts away from black instead of toward it. */
  --link:#0a0a0a;
  --link-hover:#555555;
  --tint:rgba(26,26,26,.10);
  --tint-strong:rgba(26,26,26,.16);
  --on-dark-tint:rgba(255,255,255,.16);
  --on-dark-tint-strong:rgba(255,255,255,.24);
}

*,*::before,*::after{ -webkit-tap-highlight-color:transparent; }

/* ─────────────────────────── FOCUS SYSTEM ─────────────────────────── */
/* :focus-visible only — a mouse click should not leave a ring behind.
   No border-radius here: the ring must take the shape of whatever it
   wraps. Forcing a radius squared off the circular social icons.

   CAUTION — the `position:relative; z-index:1` below is what stops a
   sibling from clipping the ring, but it also lifts the focused element
   above any absolutely-positioned control sharing its wrapper. That hid
   the login password-reveal button behind the focused input and made it
   unclickable. Overlay controls inside an input wrapper need z-index:2
   or higher (see .au-pw-toggle in auth.css). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  position:relative;
  z-index:1;
}
/* On navy/dark surfaces the blue half of the ring disappears. */
.hero a:focus-visible,
.quick-tabs a:focus-visible,
.stats-banner a:focus-visible,
.footer a:focus-visible,
.why-bravos-banner a:focus-visible{
  box-shadow:var(--focus-dark);
}

/* In-field decorations must outrank the focused input.
   The rule above gives any :focus-visible element z-index:1 so its ring is
   not clipped. Inside an input wrapper that also lifts the input above the
   absolutely-positioned icon and reveal button sharing it — so focusing a
   field made its lock icon and eye vanish, and the input then swallowed
   clicks meant for the button. Applies to every form on the site, not just
   the one where it was first noticed. */
.input-icon-wrap > .ii-icon,
.input-icon-wrap > .toggle-pass,
.au-input-wrap > .au-pw-toggle{ z-index:2; }

/* Skip-link affordance for keyboard users landing on the page. */
a{ text-underline-offset:3px; }
a:hover{ color:var(--link-hover); }

/* ────────────────────────────── NAVBAR 2.0 ───────────────────────────── */
.navbar{
  height:66px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(26,26,26,.07);
  transition:height var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.navbar.scrolled{
  height:58px;
  background:rgba(255,255,255,.94);
  border-bottom-color:rgba(26,26,26,.10);
  box-shadow:0 0 0 1px #e8e8e8;
}
.nav-inner{ gap:16px; }

.nav-logo{
  border-radius:10px; padding:4px 6px; margin-left:-6px;
  transition:transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease);
}
.nav-logo:hover{ background:var(--tint); transform:translateY(-1px); }
.nav-logo:active{ transform:translateY(0); }
.nav-logo .logo-wordmark{
  font-size:1.05rem; letter-spacing:.14em;
  transition:color var(--t-mid) var(--ease);
}
.nav-logo:hover .logo-wordmark{ color:var(--navy); }
.logo-flag{
  width:20px; height:20px; border-radius:5px;
  box-shadow:0 0 0 1px #e8e8e8;
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.nav-logo:hover .logo-flag{ transform:rotate(-6deg) scale(1.06); box-shadow:0 0 0 1px #e8e8e8; }

.nav-links{ gap:2px; justify-content:center; }
.nav-link{
  position:relative; font-size:.88rem; font-weight:600; color:var(--gray-600);
  padding:8px 14px; border-radius:9px;
  transition:color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
/* The underline grows from the centre; it is the primary hover signal
   because a tint alone was not readable against the frosted navbar. */
.nav-link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:linear-gradient(90deg, var(--navy-light), var(--accent-lt));
  border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--t-mid) var(--ease-out);
}
.nav-link:hover{ color:var(--navy); background:var(--tint); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link:active{ transform:translateY(1px); }
.nav-active{ color:var(--navy); background:var(--tint-strong); }
.nav-active::after{ transform:scaleX(1); }

.btn-nav-login,.btn-nav-signup{
  padding:9px 20px; border-radius:9px; font-size:.86rem; font-weight:600;
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn-nav-login{ border:1.5px solid var(--gray-300); color:var(--gray-700); }
.btn-nav-login:hover{
  transform:translateY(-2px);
  border-color:var(--navy-light);
  color:var(--navy);
  background:var(--tint);
  box-shadow:0 0 0 1px #e8e8e8;
}
.btn-nav-login:active{ transform:translateY(0); box-shadow:none; }

.btn-nav-signup{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  color:#ffffff;
  box-shadow:0 0 0 1px #e8e8e8;
}
/* Brighter on hover, not darker — the old rule went to --navy, which
   sank the button into the header shadow. */
.btn-nav-signup:hover{
  background:linear-gradient(135deg, var(--accent), var(--navy-light));
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 0 0 1px #e8e8e8;
}
.btn-nav-signup:active{ transform:translateY(0); box-shadow:0 0 0 1px #e8e8e8; }

/* Mobile auth lives inside the menu; hidden on desktop */
.nav-menu-auth{ display:none; }

.hamburger{ border-radius:9px; transition:background var(--t-fast) var(--ease); }
.hamburger:hover{ background:var(--tint); }
.hamburger span{ transition:transform var(--t-mid) var(--ease-out), opacity var(--t-fast) var(--ease); }

/* ──────────────────── SEGMENTED 2nd NAV BAR ──────────────────── */
.quick-tabs{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), 0 0 0 1px #e8e8e8;
}
.quick-tabs::-webkit-scrollbar{ display:none; }
.qt-inner{ max-width:1200px; margin:0 auto; padding:0; display:flex; width:100%; }
.qt-tab{
  flex:1; text-align:center; white-space:nowrap;
  padding:15px 18px; font-size:.85rem; font-weight:600;
  color:rgba(255,255,255,.75);
  border-right:1px solid rgba(255,255,255,.1);
  position:relative; overflow:hidden;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.qt-tab:first-child{ border-left:1px solid rgba(255,255,255,.1); }
.qt-tab::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:#ffffff; transform:scaleX(0);
  transition:transform var(--t-mid) var(--ease-out);
}
.qt-tab:hover{ color:#ffffff; background:var(--on-dark-tint); }
.qt-active{ color:#ffffff; background:var(--on-dark-tint-strong); }
.qt-active::after,.qt-tab:hover::after{ transform:scaleX(1); }

/* ──────────────────────────── BUTTONS ──────────────────────────── */
.btn-primary-sm,.btn-outline-dark,.btn-primary-hero,.btn-outline-hero,
.btn-primary-banner,.btn-outline-white,.btn-pc,.btn-pc-featured{
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease) !important;
}
.btn-primary-sm:hover,.btn-primary-banner:hover,
.btn-pc:hover,.btn-pc-featured:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline-dark:hover,.btn-outline-hero:hover,.btn-outline-white:hover{ transform:translateY(-2px); }

/* Every button settles on press so a click has a physical end-state. */
.btn-primary-sm:active,.btn-outline-dark:active,.btn-primary-hero:active,
.btn-outline-hero:active,.btn-primary-banner:active,.btn-outline-white:active,
.btn-pc:active,.btn-pc-featured:active{ transform:translateY(0); }

/* Shared across pricing/contact/register/services, so it is fixed here
   rather than in the home sheet: hover moved --navy → --navy-dark, i.e.
   toward the page background. It now brightens instead. */
.btn-primary-sm{
  background:linear-gradient(135deg, var(--navy), var(--navy-dark));
  border-color:transparent;
  box-shadow:0 0 0 1px #e8e8e8;
}
.btn-primary-sm:hover{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  border-color:transparent; color:#ffffff;
  box-shadow:0 0 0 1px #e8e8e8;
}

/* ──────────────────────────── CARDS ──────────────────────────── */
.feature-card,.resource-card,.team-card,.pricing-card,.mission-card,.service-detail{
  transition:transform var(--t-slow) var(--ease-out),
             box-shadow var(--t-slow) var(--ease),
             border-color var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease);
}
.feature-card:hover,.resource-card:hover,.team-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(26,26,26,.28);
}
.pricing-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feat-icon,.mc-icon,.sd-icon,.qs-icon,.ci-icon{
  transition:transform var(--t-slow) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.feature-card:hover .feat-icon,.mission-card:hover .mc-icon,.service-detail:hover .sd-icon{
  transform:scale(1.08) rotate(-3deg);
}

/* ──────────────────────────── FORMS ──────────────────────────── */
.form-input{ transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.form-input:focus{ box-shadow:var(--ring); }
.form-input:focus-visible{ box-shadow:var(--ring); }

/* ──────────────────────────── PAGE-HERO polish ──────────────────────────── */
.page-hero h1{ letter-spacing:-.01em; }

/* ──────────────────────────── FOOTER ──────────────────────────── */
/* Base contrast raised across the board. .45 and .30 alpha on #1a1a1a
   sat under 4.5:1 — legible as decoration, not as links. */
.footer-tagline{ color:rgba(255,255,255,.58); }
.footer-links a{
  color:rgba(255,255,255,.62);
  transition:color var(--t-fast) var(--ease), padding-left var(--t-mid) var(--ease-out);
}
.footer-links a:hover{ color:#ffffff; padding-left:5px; }
.footer-contact-list li{ color:rgba(255,255,255,.6); }
.fc-text{ min-width:0; }
.footer-contact-list small{ display:block; margin-top:3px; color:rgba(255,255,255,.42); }
.fc-mail{
  color:rgba(255,255,255,.72);
  transition:color var(--t-fast) var(--ease);
}
.fc-mail:hover{ color:#ffffff; }
.footer-bottom{ color:rgba(255,255,255,.5); }
.footer-legal a{
  color:rgba(255,255,255,.55);
  transition:color var(--t-fast) var(--ease);
}
.footer-legal a:hover{ color:#ffffff; }

.social-icon{
  transition:transform var(--t-mid) var(--ease-out),
             background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.social-icon:hover{
  transform:translateY(-3px);
  background:var(--navy-light);
  color:#ffffff;
  box-shadow:0 0 0 1px #e8e8e8;
}
.social-icon:active{ transform:translateY(-1px); }

.footer-logo{ transition:transform var(--t-mid) var(--ease-out); }
.footer-logo:hover{ transform:translateY(-2px); }

/* ──────────────────────────── CONTACT MAP ──────────────────────────── */
.ci-link{
  color:var(--navy-light);
  transition:color var(--t-fast) var(--ease);
}
.ci-link:hover{ color:var(--accent); }

.ci-map{
  border-radius:18px; overflow:hidden;
  border:1px solid var(--gray-200);
  background:#ffffff;
  box-shadow:var(--shadow);
  transition:box-shadow var(--t-slow) var(--ease), border-color var(--t-mid) var(--ease);
}
.ci-map:hover{ box-shadow:var(--shadow-lg); border-color:rgba(26,26,26,.25); }

.ci-map-frame{ position:relative; height:230px; background:var(--gray-100); }

/* Click-to-load facade. Styled to look like a map panel so it reads as part
   of the design rather than a missing asset. */
.ci-map-load{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  width:100%; border:0; cursor:pointer; padding:0;
  background:linear-gradient(160deg, #f5f5f5 0%, var(--gray-50) 100%);
  transition:background var(--t-mid) var(--ease);
}
.ci-map-load:hover{ background:linear-gradient(160deg, #f0f0f0 0%, #f5f5f5 100%); }

/* Faint street-grid suggestion behind the button. */
.ci-map-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(26,26,26,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000000 35%, transparent 78%);
}
.ci-map-cta{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:100px;
  background:#ffffff; color:var(--navy);
  font-size:.84rem; font-weight:700;
  box-shadow:0 0 0 1px #e8e8e8;
  transition:transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.ci-map-cta svg{ width:15px; height:15px; }
.ci-map-load:hover .ci-map-cta{ transform:translateY(-2px); box-shadow:0 0 0 1px #e8e8e8; }
.ci-map-load:active .ci-map-cta{ transform:translateY(0); }
.ci-map-where{ position:relative; font-size:.78rem; font-weight:600; color:var(--gray-500); }

.ci-map-frame.is-loading .ci-map-cta{ opacity:.6; }

@media(hover:none){
  .ci-map-load:hover .ci-map-cta{ transform:none; box-shadow:0 0 0 1px #e8e8e8; }
}

.ci-map-frame iframe{
  position:relative; z-index:1;
  width:100%; height:100%; border:0; display:block;
  /* OSM's default tiles are warmer than the site's blues; a light
     desaturation settles them next to the navy palette without making
     the map unreadable. Lifted on hover so it feels interactive. */
  filter:saturate(.82) contrast(1.02);
  transition:filter var(--t-slow) var(--ease);
}
.ci-map:hover .ci-map-frame iframe{ filter:saturate(1) contrast(1.02); }

/* Marker badge over the embed. pointer-events:none so it never blocks
   panning the map underneath. */
.ci-map-pin{
  /* Above the injected iframe, which sits at z-index 1. */
  position:absolute; z-index:2; top:14px; left:14px;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:#ffffff;
  box-shadow:0 0 0 1px #e8e8e8;
  pointer-events:none;
}
.ci-map-pin svg{ width:17px; height:17px; }

.ci-map-empty{
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--gray-400);
  background:
    radial-gradient(circle at 1px 1px, rgba(26,26,26,.08) 1px, transparent 0) 0 0/18px 18px,
    var(--gray-50);
}
.ci-map-empty svg{ width:34px; height:34px; }
.ci-map-empty span{ font-size:.86rem; font-weight:600; color:var(--gray-500); }

.ci-map-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px;
  border-top:1px solid var(--gray-200);
}
.ci-map-addr{ display:flex; flex-direction:column; min-width:0; }
.ci-map-addr strong{ font-size:.86rem; color:var(--gray-900); }
.ci-map-addr span{ font-size:.78rem; color:var(--gray-500); line-height:1.5; }

.ci-map-btn{
  display:inline-flex; align-items:center; gap:7px; flex-shrink:0;
  padding:9px 16px; border-radius:100px;
  font-size:.8rem; font-weight:700; color:#ffffff;
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  box-shadow:0 0 0 1px #e8e8e8;
  transition:transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease),
             background var(--t-fast) var(--ease),
             gap var(--t-mid) var(--ease-out);
}
.ci-map-btn svg{ width:13px; height:13px; }
.ci-map-btn:hover{
  background:linear-gradient(135deg, var(--accent), var(--navy-light));
  color:#ffffff; transform:translateY(-2px); gap:10px;
  box-shadow:0 0 0 1px #e8e8e8;
}
.ci-map-btn:active{ transform:translateY(0); }

@media(max-width:520px){
  .ci-map-frame{ height:190px; }
  .ci-map-bar{ flex-direction:column; align-items:flex-start; }
  .ci-map-btn{ width:100%; justify-content:center; }
}
@media(hover:none){
  .ci-map-btn:hover{ transform:none; gap:7px; }
}

/* ──────────────────────────── SMOOTH MOTION DEFAULTS ──────────────────────────── */
html{ scroll-behavior:smooth; }
a,button{ transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }

/* ════════════════════════════ RESPONSIVE ════════════════════════════ */
/* Matches responsive.css, which moves the nav to a sheet at 900px —
   the desktop bar needs 834px to lay out. Kept in sync deliberately;
   at 768px these two sheets disagreed between 769–900px. */
@media(max-width:900px){
  .nav-auth{ display:none; }
  .nav-menu-auth{
    display:flex; flex-direction:column; gap:8px;
    padding-top:12px; margin-top:8px; border-top:1px solid var(--gray-100);
  }
  .nav-menu-auth .btn-nav-login,.nav-menu-auth .btn-nav-signup{
    width:100%; text-align:center; padding:11px 18px;
  }
  .nav-links{ justify-content:flex-start; }
}
@media(max-width:600px){
  .qt-inner{ min-width:max-content; }
  .qt-tab{ flex:0 0 auto; padding:13px 20px; }
}

/* A tap leaves :hover stuck until the next tap, so the lift and tint
   persist and read as a selected state. Pointer devices only. */
@media(hover:none){
  .nav-logo:hover,.btn-nav-login:hover,.btn-nav-signup:hover,
  .btn-primary-sm:hover,.btn-primary-banner:hover,.btn-pc:hover,
  .feature-card:hover,.resource-card:hover,.team-card:hover,
  .social-icon:hover,.footer-logo:hover{ transform:none; }
  .footer-links a:hover{ padding-left:0; }
}
/* NOTE: the brace above was missing. Everything from .jb-posted-via to the
   end of this file was therefore nested inside @media(hover:none) and only
   ever applied on touch devices — on desktop the "via agency" badge and the
   save-search bar rendered unstyled. Found while appending to this file:
   anything added at the end inherited the same trap. */

/* "via <agency>" badge on a consultancy-posted job. Shown deliberately: hiding
   that an agency posted the role is what destroys trust when candidates find
   out later. See jobs_detail.html. */
.jb-posted-via{
  display:inline-block; margin-left:8px; padding:2px 9px;
  border-radius:100px; background:#e8e8e8; color:#444444;
  font-size:.72rem; font-weight:700; vertical-align:middle;
}

/* Save-this-search bar on the results page. */
.jb-save-search{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding:12px 14px; margin-bottom:14px;
  background:#fafafa; border:1px solid #e8e8e8; border-radius:10px;
}
.jb-save-search input[type=text]{ flex:1 1 240px; min-width:0; }
.jb-save-search input[type=text], .jb-save-search select{
  padding:8px 11px; border:1px solid #d4d4d4; border-radius:8px;
  font-size:.84rem; font-family:inherit; background:#ffffff;
}
.jb-save-search button{
  padding:8px 16px; border:none; border-radius:8px;
  background:var(--navy); color:#ffffff; font-size:.84rem; font-weight:700;
  font-family:inherit; cursor:pointer;
}
.jb-save-search button:hover{ background:var(--navy-dark); }

/* Unread badge in the public navbar. */
.nav-unread{
  display:inline-block; min-width:18px; padding:1px 6px; margin-left:4px;
  border-radius:100px; background:#ef4444; color:#ffffff;
  font-size:.68rem; font-weight:800; text-align:center; vertical-align:middle;
}

/* Respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ── "For employers" front door ──────────────────────────────
   Recruiter signup used to be four clicks deep under Jobs, with nothing in
   the header saying those accounts existed. Deliberately styled as a quiet
   text link, not a third button: it sits beside Log in / Sign Up and must
   not compete with the candidate call to action. */
.nav-employers{
  padding:8px 12px; border-radius:9px;
  font-size:.85rem; font-weight:600; color:var(--gray-600);
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-employers:hover{ color:var(--navy); background:var(--tint); }

/* The footer grew a fifth column; the brand block gives up the width. */
.footer-grid{ grid-template-columns:1.7fr 1fr 1.15fr 1fr 1.25fr; gap:36px; }

@media (max-width:900px){
  /* In the mobile sheet it is a full-width row like the nav links. */
  .nav-employers{
    display:flex; align-items:center; width:100%; min-height:46px;
    justify-content:center; margin-bottom:2px;
    border:1.5px solid var(--gray-200);
  }
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:32px; }
}

/* ─────────────────────── EMOJI ICONS → MONOCHROME ─────────────────────── */
/* A handful of icons are emoji characters, not markup, so no colour token
   reaches them — they kept rendering full-colour against the greyscale
   page. grayscale(1) desaturates the glyph while leaving its shape, which
   is the cheap correct fix; replacing them with SVG would be the thorough
   one. Text glyphs (✓ ★ ✕) are NOT listed here: they already inherit the
   CSS colour and are monochrome by definition. */
.nrb-nav-icon,
.nrb-card-icon,
.bd-star-badge,
.cat-icon-emoji{
  filter:grayscale(1);
}