/* ════════════════════════════════════════════════════════════
   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:10px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.06);
  --shadow-lg:0 18px 50px rgba(15,23,42,.16);
  --shadow-xl:0 28px 70px rgba(15,23,42,.22);

  /* 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(37,99,235,.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 #fff, 0 0 0 5px var(--navy-light);
  --focus-dark:0 0 0 2px rgba(15,23,42,.55), 0 0 0 5px #fff;

  /* Hover targets, one step BRIGHTER than the resting colour. */
  --link:#2563eb;
  --link-hover:#1d4ed8;
  --tint:rgba(37,99,235,.10);
  --tint-strong:rgba(37,99,235,.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(15,23,42,.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(15,23,42,.10);
  box-shadow:0 6px 24px rgba(15,23,42,.09);
}
.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 2px 6px rgba(0,0,0,.18);
  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 4px 12px rgba(0,0,0,.24); }

.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 6px 16px rgba(37,99,235,.16);
}
.btn-nav-login:active{ transform:translateY(0); box-shadow:none; }

.btn-nav-signup{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.28);
}
/* 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:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(37,99,235,.42);
}
.btn-nav-signup:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(37,99,235,.3); }

/* 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 6px 18px rgba(15,23,42,.08);
}
.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:#fff; transform:scaleX(0);
  transition:transform var(--t-mid) var(--ease-out);
}
.qt-tab:hover{ color:#fff; background:var(--on-dark-tint); }
.qt-active{ color:#fff; 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 4px 14px rgba(30,58,138,.24);
}
.btn-primary-sm:hover{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  border-color:transparent; color:#fff;
  box-shadow:0 12px 28px rgba(37,99,235,.34);
}

/* ──────────────────────────── 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(37,99,235,.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 #111827
   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:#fff; 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:#fff; }
.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:#fff; }

.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:#fff;
  box-shadow:0 8px 20px rgba(37,99,235,.4);
}
.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:#fff;
  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(37,99,235,.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, #eef3fb 0%, var(--gray-50) 100%);
  transition:background var(--t-mid) var(--ease);
}
.ci-map-load:hover{ background:linear-gradient(160deg, #e6edf9 0%, #f2f5fa 100%); }

/* Faint street-grid suggestion behind the button. */
.ci-map-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 78%);
}
.ci-map-cta{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:100px;
  background:#fff; color:var(--navy);
  font-size:.84rem; font-weight:700;
  box-shadow:0 6px 18px rgba(15,23,42,.14);
  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 12px 26px rgba(15,23,42,.2); }
.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 6px 18px rgba(15,23,42,.14); }
}

.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:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.32);
  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(15,23,42,.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:#fff;
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  box-shadow:0 4px 14px rgba(37,99,235,.28);
  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:#fff; transform:translateY(-2px); gap:10px;
  box-shadow:0 10px 24px rgba(37,99,235,.4);
}
.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; }
/* "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:#ede9fe; color:#5b21b6;
  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:#f8fafc; border:1px solid #e5e7eb; 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 #d1d5db; border-radius:8px;
  font-size:.84rem; font-family:inherit; background:#fff;
}
.jb-save-search button{
  padding:8px 16px; border:none; border-radius:8px;
  background:var(--navy); color:#fff; 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:#fff;
  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; }
}