/* ─────────────────────────────────────────────
   iworkfor.sa.gov.au — Modern Redesign
   Design system tokens
   ───────────────────────────────────────────── */

@font-face {
  font-family: 'South Australia Sans';
  src: url('../assets/fonts/SouthAustraliaSans-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand */
  --brand: #960000;
  --brand-600: #F0BEC3;
  --brand-700: #0F2D41;
  --brand-50: #D2E6E6;
  --brand-100: #D2E6E6;
  --brand-200: #FBC0A8;

  /* Accent — gold for "also relevant" */
  --gold: #B5832B;
  --gold-50: #FBF4E2;

  /* Ink + neutrals (warm) */
  --ink: #15110E;
  --text: #2A241E;
  --muted: #6E665E;
  --soft: #9C948B;

  /* Surfaces */
  --bg: #F6F2EB;
  --bg-2: #EFEAE0;
  --surface: #FFFFFF;
  --surface-soft: #FCFAF5;
  --border: #E6E0D3;
  --border-strong: #D2C9B7;
  --hover-wash: rgba(150,0,0,0.08);
  --focus-ring: rgba(150,0,0,0.18);

  /* States */
  --success: #2F7A4F;

  /* Geometry */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --pad-x: clamp(20px, 4vw, 56px);

  /* Max width of the centred content shell. Used by the header, filter bar,
     card grid, promo/feature bands, footer AND the legacy content pages
     (modern-legacy.css) so every page lines up on the same edges. */
  --shell: 1400px;

  /* ── Type scale ──────────────────────────────────────────────────────
     Expressed in rem so every size honours the reader's own "default font
     size" browser setting (WCAG 1.4.4 Resize Text). 1rem = that default,
     normally 16px. Do NOT set a px font-size on html or this breaks.

     One step per role — pick the closest token rather than adding a new
     literal, so the same kind of text is the same size on every page.
     12px is the floor: nothing smaller is legible for body or label text. */
  --fs-xs:   0.875rem;     /* 14px — uppercase labels, eyebrows, badges       */
  --fs-sm:   0.875rem;     /* 14px — filter options and meta rows              */
  --fs-base: 0.875rem;    /* 14px — default UI text, buttons, form controls  */
  --fs-md:   0.9375rem;   /* 15px — body copy (page default)                 */
  --fs-lg:   1rem;        /* 16px — lead paragraphs, card titles             */
  --fs-xl:   1.125rem;    /* 18px — sub-headings                             */
  --fs-2xl:  1.25rem;     /* 20px */
  --fs-3xl:  1.375rem;    /* 22px */
  --fs-4xl:  1.875rem;    /* 30px — legacy content h1                        */

  /* Line heights. --lh-body is >= 1.5 to meet WCAG 1.4.12 Text Spacing;
     headings may run tighter, which the guidance allows. */
  --lh-body: 1.55;
  --lh-tight: 1.2;

  /* Shadows */
  --sh-1: 0 1px 0 rgba(21,17,14,0.04), 0 1px 2px rgba(21,17,14,0.04);
  --sh-2: 0 1px 0 rgba(21,17,14,0.04), 0 8px 24px -10px rgba(21,17,14,0.10);
  --sh-3: 0 24px 60px -24px rgba(21,17,14,0.20);

  /* Motion */
  --t-fast: 140ms cubic-bezier(.2,.7,.2,1);
  --t: 220ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 380ms cubic-bezier(.2,.7,.2,1);
}

/* Root overscroll is not inherited from body; leave nested scrollers alone. */
html:has(> body.modern-mode) {
  overscroll-behavior-x: none;
}

/* Reset */
/* Everything below is scoped to body.modern-mode (set by incl/header.php on
   modern pages only). modern.css is a sitewide include, and these element-level
   rules — the reset, link/button/form defaults, body typography — would
   otherwise restyle any purely legacy page that ever picks the stylesheet up.
   The scoping raises specificity without changing which elements match on a
   modern page, so current rendering is unaffected. */
.modern-mode * { margin: 0; padding: 0; box-sizing: border-box; }
.modern-mode *, .modern-mode *::before, .modern-mode *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* The root deliberately carries NO px font-size. Setting one (it used to be
   15px) silently discards the reader's chosen default font size, so people
   who enlarge text in their browser settings got it shrunk back. Keeping the
   root at the browser default means the whole rem scale above scales with
   them. The 15px page default now lives on <body> instead, so the design
   looks identical for everyone who hasn't changed that setting. */
html { font-size: 100%; }

body.modern-mode {
  /* The prototype resets every margin with `* { margin: 0 }`. We cannot do
     that globally without disturbing untransformed legacy content, so the
     one reset that actually matters is applied here, scoped to modern
     pages: without it the UA default `body { margin: 8px }` survives and
     pushes the layout 8px wide of the viewport, which showed up as a
     horizontal scrollbar at 360px (scrollWidth 368 vs clientWidth 360).
     Every modern page draws its own gutters via .modern-page padding. */
  margin: 0;
  font-family: 'South Australia Sans', Arial, Helvetica, sans-serif;
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  font-size: var(--fs-md);
}

/* Keep one typeface across the job board, including CMS content pasted with
   an inline font-family. This changes the face only; authored size, weight,
   colour, spacing and structure remain untouched. */
body.modern-mode * {
  font-family: 'South Australia Sans', Arial, Helvetica, sans-serif !important;
}

/* Scoped to exclude .btn: every button variant below (.btn-primary,
   .btn-ghost, .btn-outline, .btn-next, .btn-save, .btn-back-step...) sets
   its own deliberate text colour for contrast against its own background.
   Without the :not(), this rule's `.modern-mode a` specificity (a class
   plus a type selector) beats a bare `.btn-primary`/`.btn-ghost` class
   selector regardless of source order, repainting every anchor-based
   button's text to brand-orange - on a brand-orange .btn-primary
   background that makes the label (e.g. header "Sign in") invisible. */
/* The dark maroon brand colour meets WCAG AA for normal-size links on white. */
.modern-mode a:not(.btn) { color: var(--brand); text-decoration: none; }

.modern-mode a:hover { text-decoration: none; }

/* The UA stylesheet implements [hidden] as `display: none`, which ANY explicit
   display rule overrides — and most components here set display: flex/grid.
   Without this, setting .hidden on a flex element does nothing. */
[hidden] { display: none !important; }

/* Visible to screen readers only. Used for live status messages (e.g. vacancy
   loading progress) that would be redundant noise on screen. Clip-based rather
   than display:none so assistive tech still announces it. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.modern-mode button { font-family: inherit; cursor: pointer; }
.modern-mode input, .modern-mode select, .modern-mode textarea { font-family: inherit; color: inherit; }

.modern-mode ::selection { background: var(--brand); color: #fff; }

/* ─────────────────────────────────────────────
   Skip link — Accessibility Section 508 1194.22 (o)
   Hidden until keyboard-focused. Declared here because the modern
   search page does not load the legacy stylesheet that normally
   carries this rule.
   ───────────────────────────────────────────── */
a.skip-main {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -999;
}
a.skip-main:focus,
a.skip-main:active {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  overflow: auto;
  padding: 10px 20px;
  color: #fff;
  background: var(--ink, #1A1612);
  border-radius: var(--r-md, 10px);
  box-shadow: var(--sh-3);
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  z-index: 999;
}

/* ─────────────────────────────────────────────
   Header
   ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 2px solid rgba(198,188,168,0.85);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px var(--pad-x);
  max-width: var(--shell);
  margin: 0 auto;
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.sagov-logo {
  width: clamp(180px, 18vw, 240px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 480px) {
  .sagov-logo { width: clamp(120px, calc(100vw - 200px), 180px); }
}
.brand-divider { width: 1px; height: 34px; background: var(--border-strong); flex-shrink: 0; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #F47A45 0%, var(--brand) 50%, var(--brand-600) 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: -0.5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 4px 10px -4px rgba(225,84,62,0.4);
}
.brand-wordmark {
  display: flex; flex-direction: column;
  line-height: 1;
}
.brand-wordmark .lead {
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.brand-wordmark .sub {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 4px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  border-radius: 8px;
  transition: color var(--t-fast), background var(--t-fast);
}
.site-nav a:hover { color: var(--brand); background: var(--hover-wash); }
.site-nav a.is-active { color: var(--brand); }
.site-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: -2px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
}
.site-nav a.nav-mobile-alerts { display: none; }
.header-cta {
  display: flex; align-items: center; gap: 10px;
}
/* Legacy board styles uppercase generic buttons on some tenant hosts.
   Header CTA wording follows the prototype's sentence case everywhere. */
.site-header .header-cta .btn { text-transform: none; }

/* ─────────────────────────────────────────────
   Signed-in account menu

   Items come from the existing menu generator (see incl/modern-account.php);
   everything below is presentation. Two placements, mutually exclusive:
   the header trigger on desktop, and a block at the top of the mobile
   drawer — so the same actions are never offered in two places at once.
   ───────────────────────────────────────────── */
.account-menu { position: relative; }

.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 5px 12px 5px 5px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.account-trigger:hover { background: var(--bg-2); border-color: var(--ink); }
.account-menu.is-open .account-trigger {
  background: var(--bg-2);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(21,17,14,0.06);
}

.account-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
}
.account-avatar-lg { width: 40px; height: 40px; font-size: 15px; }

/* The name can be arbitrarily long; truncate rather than let it push the
   header into a second row. The full name is repeated in the panel head. */
.account-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-caret { flex: none; transition: transform var(--t-fast); }
.account-menu.is-open .account-caret { transform: rotate(180deg); }

.account-dd {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1200;
  min-width: 268px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(21,17,14,0.04), 0 18px 40px -16px rgba(21,17,14,0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.account-menu.is-open .account-dd {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.account-dd-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.account-dd-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-dd-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-dd-sub { font-size: var(--fs-xs); color: var(--muted); }

.account-dd-list { display: flex; flex-direction: column; gap: 1px; }
/* Specificity note: `.modern-mode a:not(.btn)` (0,2,1) repaints every anchor
   brand-orange and would beat a bare `.account-dd-link` class selector
   regardless of source order. These selectors are deliberately weighted
   above it — the same technique already used for `.nav-dd-link`. */
.site-header .account-dd a.account-dd-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.site-header .account-dd a.account-dd-link svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
.site-header .account-dd a.account-dd-link:hover { background: var(--bg-2); color: var(--ink); }
.site-header .account-dd a.account-dd-link:hover svg { color: var(--ink); }
.site-header .account-dd a.account-dd-link.is-current { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.site-header .account-dd a.account-dd-link.is-current svg { color: var(--brand-700); }
.site-header .account-dd a.account-dd-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Sign out is set apart so it is never hit by accident while scanning. */
.site-header .account-dd a.account-dd-link.is-signout {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--brand);
}
.site-header .account-dd a.account-dd-link.is-signout svg { color: currentColor; }
.site-header .account-dd a.account-dd-link.is-signout:hover { background: var(--hover-wash); color: var(--brand); }

/* ── Mobile drawer account block ── */
.nav-account { display: none; }
.nav-account-id {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-account-id:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-account-caret {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  transition: transform .18s ease;
}
.nav-account.is-open .nav-account-caret { transform: rotate(180deg); }
.nav-account-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-account-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-account-sub { font-size: var(--fs-xs); color: var(--muted); }
/* Collapsed until the disclosure is opened — see the note in modern-header.php.
   `display:none` rather than a height transition so the collapsed section
   costs no space at all in a drawer that has very little to give. */
.nav-account-links { display: none; flex-direction: column; gap: 1px; padding-top: 4px; }
.nav-account.is-open .nav-account-links { display: flex; }
/* Weighted above `.modern-mode a:not(.btn)`, and the ::after reset clears the
   underline bar every `.site-nav a` otherwise carries. */
.site-nav .nav-account a.nav-account-link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.site-nav .nav-account a.nav-account-link::after { display: none !important; }
.site-nav .nav-account a.nav-account-link svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
.site-nav .nav-account a.nav-account-link:hover { background: var(--bg-2); color: var(--ink); }
.site-nav .nav-account a.nav-account-link.is-current { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.site-nav .nav-account a.nav-account-link.is-current svg { color: var(--brand-700); }
.site-nav .nav-account a.nav-account-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.site-nav .nav-account a.nav-account-link.is-signout {
  margin-top: 5px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  color: var(--brand);
}
.site-nav .nav-account a.nav-account-link.is-signout svg { color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .account-dd, .account-caret, .nav-account-caret { transition: none; }
}

/* Buttons */
/* Override Bootstrap and native control colours on both modern boards. */
body.modern-mode .btn-primary,
body.modern-mode .btn-primary:is(:hover, :focus, :active, .active) {
  border-color: var(--brand) !important;
}
body.modern-mode :is(button, input, select, textarea, .btn, [role="button"], [role="checkbox"]):focus {
  outline-color: var(--brand);
}
body.modern-mode :is(button, input, select, textarea, .btn):is(:focus, :active) {
  box-shadow: none !important;
}
body.modern-mode :is(button, input, select, textarea, .btn):focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px;
}
body.modern-mode .dd-search .dd-search-input:focus,
body.modern-mode .hero-search input:focus {
  outline: none !important;
}
body.modern-mode :is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn):focus:not(:focus-visible) {
  outline: none !important;
}
body.modern-mode :is(input, select, textarea):focus {
  border-color: var(--brand);
}
body.modern-mode a:focus-visible {
  outline-color: var(--brand);
}
body.modern-mode input:is([type="checkbox"], [type="radio"], [type="range"]) {
  accent-color: var(--brand);
}
body.modern-mode .custom-control-input:focus ~ .custom-control-label::before {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
body.modern-mode .custom-control-input:checked ~ .custom-control-label::before,
body.modern-mode .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  border-color: var(--brand);
  background-color: var(--brand);
}
@media (forced-colors: active) {
  body.modern-mode :is(button, input, select, textarea, .btn):focus-visible {
    outline-color: Highlight !important;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.1px;
  text-transform: none;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
}
.modern-mode .site-header .header-cta a.btn,
.modern-mode .site-header .header-cta a.btn:link,
.modern-mode .site-header .header-cta a.btn:visited,
.modern-mode .site-header .header-cta a.btn:hover,
.modern-mode .site-header .header-cta a.btn:focus,
.modern-mode .site-header .header-cta a.btn:active,
.modern-mode .site-header a.nav-mobile-alerts,
.modern-mode .site-header a.nav-mobile-alerts:link,
.modern-mode .site-header a.nav-mobile-alerts:visited,
.modern-mode .site-header a.nav-mobile-alerts:hover,
.modern-mode .site-header a.nav-mobile-alerts:focus,
.modern-mode .site-header a.nav-mobile-alerts:active {
  text-decoration: none !important;
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 20px -10px rgba(150,0,0,0.55); }
.btn-primary:hover { background: var(--brand-600); color: #000; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 24px -10px rgba(150,0,0,0.45); }
.btn-ghost { background: rgba(21,17,14,0.04); color: var(--text); font-weight: 700; }
.btn-ghost:hover { background: rgba(21,17,14,0.08); }
.modern-mode .site-header .header-cta a.btn-ghost:focus {
  box-shadow: none;
}
.modern-mode .site-header .header-cta a.btn:focus:not(:focus-visible) {
  outline: none;
}
.modern-mode .site-header .header-cta a.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.modern-mode .site-header .header-cta a.btn-primary:focus,
.modern-mode .site-header .header-cta a.btn-primary:active {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 20px -10px rgba(150,0,0,0.55);
}
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }

/* Keep the ribbon tied to the primary button colour through the shared token. */
.colour-ribbon {
  height: 3px;
  background: var(--brand);
}

/* ─────────────────────────────────────────────
   Navigation progress
   A thin bar pinned to the top of the viewport while the browser is on
   its way to another page. The legacy apply flow POSTs the whole form
   and the server can take seconds to answer; without this the page sits
   there looking frozen. Purely decorative (aria-hidden) — it reports
   nothing a screen-reader user isn't already told by the page change.
   ───────────────────────────────────────────── */
.nav-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.nav-progress.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease, visibility 0s;
}
.nav-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  /* Same brand hues as .colour-ribbon, so the bar reads as the ribbon
     filling in rather than as a foreign element. */
  background: linear-gradient(to right,
    #960000 0%, #960000 18%, #0F2D41 38%,
    #0F2D41 58%, #C7CAA6 78%, #C7CAA6 100%);
  box-shadow: 0 0 10px -1px rgba(150, 0, 0, 0.55);
  transition: width 140ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-progress-bar { transition: none; }
}
@media print { .nav-progress { display: none; } }

/* ─────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 85% -20%, rgba(225,84,62,0.18), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(225,84,62,0.10), transparent 55%),
    linear-gradient(180deg, #FBF5EB 0%, #F6F0E4 100%);
  padding: 56px var(--pad-x) 44px;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  text-align: left;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-700);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.hero-eyebrow .pulse {
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
  position: relative;
}
.hero-eyebrow .pulse::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.45;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  80%  { transform: scale(2.0); opacity: 0; }
  100% { transform: scale(2.0); opacity: 0; }
}
.hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--brand);
}
@media (forced-colors: active) {
  .hero h1 em { color: CanvasText; }
}
.hero p.lead {
  margin: 14px auto 0;
  max-width: 680px;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Search bar */
.hero-search {
  margin: 32px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 6px 6px 6px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 880px;
  box-shadow: var(--sh-2);
  transition: border-color var(--t), box-shadow var(--t);
  position: relative;
  text-align: left;
}
.hero-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(225,84,62,0.12), var(--sh-2);
}
.hero-search .ic { color: var(--soft); flex-shrink: 0; }
.search-option-labels {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.hero-search.has-options {
  padding-top: 10px;
}
.hero-search.has-options .search-option-labels {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  padding: 0 6px 4px 28px;
}
.hero-search.has-options .ic {
  grid-column: 1;
  grid-row: 2;
}
.hero-search.has-options input {
  grid-column: 2;
  grid-row: 2;
}
.hero-search.has-options .search-clear {
  grid-column: 3;
  grid-row: 2;
}
.hero-search.has-options .btn-primary {
  grid-column: 4;
  grid-row: 2;
}
.search-option-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  max-width: 230px;
  padding: 5px 9px;
  color: var(--brand-700);
  background: #F0BEC3;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.search-option-label span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-option-remove {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: var(--fs-base);
  line-height: 1;
}
.search-option-remove:hover { color: var(--brand); background: var(--hover-wash); }
.search-option-remove:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.hero-search input {
  flex: 1;
  /* Flex items default to min-width:auto, so a long placeholder or a long
     query would push the Find matches button off a narrow screen. */
  min-width: 0;
  border: none; outline: none;
  background: transparent;
  font-size: var(--fs-lg);
  padding: 16px 0;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.1px;
}
.hero-search input::placeholder { color: var(--soft); font-weight: 400; }
.search-clear {
  display: none;
  background: transparent;
  border: none;
  width: 32px; height: 32px;
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--fs-xl);
  align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.search-clear:hover { background: var(--bg); color: var(--brand); }
.hero-search.has-text .search-clear { display: inline-flex; }
.hero-search .btn-primary { padding: 12px 22px; }
/* Phone widths: selected filters wrap above the field, while the search
   action gets its own full-width row. Neither pills nor the button can
   squeeze the text input to an unusable width. */
@media (max-width: 560px) {
  .hero-search {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 10px;
  }
  .hero-search .ic { display: none; }
  .hero-search .btn-primary {
    grid-column: 1 / -1;
    width: 100%;
    padding: 12px 16px;
  }
  .hero-search input { padding: 14px 0; }
  .search-option-labels {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
  .hero-search.has-options .search-option-labels {
    grid-row: 1;
    padding: 0 0 6px;
  }
  .hero-search.has-options input {
    grid-column: 1;
    grid-row: 2;
  }
  .hero-search.has-options .search-clear {
    grid-column: 2;
    grid-row: 2;
  }
  .hero-search.has-options .btn-primary {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .search-option-label {
    max-width: 100%;
    white-space: normal;
  }
  .search-option-label span {
    overflow-wrap: anywhere;
  }
}

.hero-chips {
  margin: 18px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  max-width: 880px;
}
.hero-chips .label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 6px;
}
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
}
.hero-chip svg { opacity: 0.55; }
.hero-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--hover-wash); transform: translateY(-1px); }

/* Option toggles sit below the search-shortcut chips. They latch on, so they
   need a clearly different resting and active state from the chips above. */
.hero-chips-toggle { margin-top: 10px; }
.hero-toggle { font-weight: 600; }
.hero-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.hero-toggle.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.hero-toggle.is-active svg { opacity: 1; }
.hero-toggle.is-active:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #000;
}

/* "New vacancies available" banner. Sits above the results and is only ever
   shown after a background freshness check finds a change. */
.refresh-banner-wrap { padding: 0 var(--pad-x); }
.refresh-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: var(--shell);
  margin: 0 auto 4px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--sh-2);
  animation: chip-in 280ms ease-out;
  transition: background var(--t-fast), transform var(--t-fast);
}
.refresh-banner:hover { background: var(--brand-600); color: #000; transform: translateY(-1px); }
.refresh-banner:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .refresh-banner { animation: none; }
  .refresh-banner:hover { transform: none; }
}

/* Hero two-column: search left, animated banner right */
.hero-left { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-left .hero-eyebrow { margin-bottom: 18px; }
.hero-left h1 { margin: 0; max-width: none; text-align: left; }
.hero-left p.lead { margin: 14px 0 0; max-width: 560px; text-align: left; }
.hero-left .hero-search { margin: 30px 0 0; max-width: 640px; width: 100%; }
.hero-left .hero-chips { justify-content: flex-start; margin: 16px 0 0; max-width: 640px; }

.hero-right { position: relative; display: flex; }
.hero-banner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 520px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.hb-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
  animation: hb-cycle 28s cubic-bezier(.4,0,.2,1) infinite;
}
.hb-slide:nth-child(1) { animation-delay: 0s; }
.hb-slide:nth-child(2) { animation-delay: 7s; }
.hb-slide:nth-child(3) { animation-delay: 14s; }
.hb-slide:nth-child(4) { animation-delay: 21s; }
.hero-banner.has-random-slides .hb-slide {
  animation: none;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 840ms cubic-bezier(.4,0,.2,1), transform 7s linear;
}
.hero-banner.has-random-slides .hb-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
@keyframes hb-cycle {
  0%   { opacity: 0; transform: scale(1.1); }
  3%   { opacity: 1; }
  22.5% { opacity: 1; transform: scale(1); }
  25.5% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
.hb-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,17,14,0) 55%, rgba(21,17,14,0.30) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hb-slide { animation: none; }
  .hb-slide:nth-child(1) { opacity: 1; }
  .hero-banner.has-random-slides .hb-slide { transition: none; }
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-left { align-items: center; text-align: center; }
  .hero-left h1, .hero-left p.lead { text-align: center; }
  .hero-left p.lead { margin-left: auto; margin-right: auto; }
  .hero-left .hero-chips { justify-content: center; }
  .hero-left .hero-search { margin-left: auto; margin-right: auto; }
  .hero-inner { align-items: center; }
  .hero-left { justify-content: flex-start; }
  .hero-right { order: -1; }
  .hero-banner { height: auto; min-height: 0; aspect-ratio: 16 / 9; max-height: 300px; }
}

/* ─────────────────────────────────────────────
   Filter bar
   ───────────────────────────────────────────── */
.filter-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px var(--pad-x);
  position: sticky;
  top: var(--header-h, 104px);
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.92);
}
.filter-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  max-width: var(--shell); margin: 0 auto;
}
.progressive-load-error {
  position: fixed;
  z-index: 2147483000;
  color: var(--brand-700);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  inset: auto 16px 16px;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.progressive-load-error[hidden] { display: none; }
.hero-toggle[hidden] { display: none; }
.opt.is-pending .name::after {
  content: ' Applying...';
  font-size: 0.85em;
  opacity: 0.8;
}
.filter-row > .filter-dd[data-feature-enabled="false"] { display: none !important; }
.filter-dd {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0;
  font-size: var(--fs-base); /* spec: Search Filters, 14px */
  font-weight: 500;
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.filter-dd .arrow { font-size: var(--fs-xl); color: var(--ink); transition: transform var(--t-fast); }
.filter-dd:hover { border-color: var(--brand); color: var(--brand); }
.filter-dd.has-active {
  background: #F0BEC3;
  border-color: var(--brand-200);
  color: var(--brand-700);
  font-weight: 600;
}
.filter-dd.is-open { border-color: var(--brand); color: var(--ink); background: var(--surface); }
/* A facet with no values yet (data still loading) — keep it in the layout so
   the filter bar doesn't reflow, but don't let it open an empty panel. */
.filter-dd.is-empty { opacity: 0.45; pointer-events: none; }
.filter-dd.is-open .arrow { transform: rotate(180deg); color: var(--brand); }
.filter-dd .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--brand); color: #fff;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 700;
}

.dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 8px;
  z-index: 30;
  opacity: 0; transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast);
  cursor: default;
}
.filter-dd.is-open .dd-panel {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}
.dd-search {
  position: sticky;
  top: -8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -1px -1px 7px;
  padding: 9px 10px;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dd-search-input {
  min-width: 0;
  width: 100%;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  background: transparent;
  border: 0;
  outline: 0;
  user-select: text;
}
.dd-search-input::placeholder { color: var(--muted); }
.dd-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.dd-search:focus-within {
  color: var(--brand);
  border-bottom-color: var(--brand);
  /* The input itself has outline:0 so the panel keeps its flush look; the
     wrapper carries a clearly visible ring instead of a 1px underline. */
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: 2px;
}
.dd-search-clear {
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.dd-panel.has-search-text .dd-search-clear { display: grid; place-items: center; }
.dd-search-clear:hover { color: var(--ink); background: var(--bg); }
.dd-search-empty {
  margin: 12px 10px;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.opt:hover { background: var(--bg); }
.opt[hidden] { display: none !important; }
.opt .name { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.opt .box {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  border: 1.5px solid var(--muted);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; color: var(--ink);
  transition: all var(--t-fast);
}
.opt.is-checked .box {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.opt.is-checked .box::after {
  content: "";
  width: 4px; height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.opt .ct {
  font-size: var(--fs-base); color: var(--ink); font-weight: 600;
  padding: 1px 8px; border-radius: 999px; background: var(--bg);
}
.opt.is-checked .ct { background: #F0BEC3; color: var(--brand-700); }
/* Counts are populated by updateFilterCounts() from the live vacancy data
   (they are deliberately not rendered server-side). Hide the pill until it has
   a value so a blank chip never shows. */
.opt .ct:empty { display: none; }
.dd-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.dd-foot .clear {
  font-size: var(--fs-xs); color: var(--muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color var(--t-fast), background var(--t-fast);
}
.dd-foot .clear:hover { color: var(--brand); background: var(--hover-wash); }

/* Keep a visible focus indicator on disclosures and their custom options. */
.filter-trigger:focus-visible,
.opt:focus-visible,
.sort-opt:focus-visible,
.dd-foot .clear:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
/* ── Filter bar: long lists and small screens ─────────────────────────────
   The Agency and Classification lists are long enough to run off the bottom
   of the viewport, so the panel scrolls internally and the Clear footer
   sticks to the bottom of that scroll area (bottom: -8px cancels the panel's
   own 8px padding so it sits flush). */
.dd-panel {
  max-height: min(62vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Set by alignFilterPanels() when a panel would otherwise extend past the
   right edge of the viewport and widen the page. */
.dd-panel.align-right {
  left: auto;
  right: 0;
}
.dd-foot {
  position: sticky;
  bottom: -8px;
  background: var(--surface);
}

@media (max-width: 620px) {
  /* The filter bar stops being sticky here — two stacked sticky bars eat too
     much of a short viewport. It must stay POSITIONED though: .job-card is
     position:relative, so a static filter bar would be painted underneath the
     cards and the open dropdown would disappear behind the results. */
  .filter-section { position: relative; top: auto; z-index: 20; }

  /* Anchor the panel to the whole filter row rather than to its own pill.
     A 280px panel hanging off a pill near the right edge would overflow the
     viewport and cause horizontal scrolling; spanning the row cannot.
     Scoped to .filter-row so the sort dropdown (which shares .filter-dd but
     lives in the results header) keeps its own positioning. */
  .filter-row { position: relative; }
  .filter-row > .filter-dd { position: static; }
  .filter-row > .filter-dd > .dd-panel {
    left: 0; right: 0;
    width: auto; min-width: 0;
    top: calc(100% + 8px);
  }
  /* Same overflow risk for the right-anchored sort panel. */
  .sort-panel { min-width: 0; max-width: calc(100vw - 32px); }
}

.active-row-wrap {
  padding: 0 var(--pad-x);
}
.results-bar-wrap {
  padding: 4px var(--pad-x);
}
.active-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 0;
  max-width: var(--shell); margin: 0 auto;
}
.active-row .label {
  font-size: var(--fs-xs); color: var(--muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  margin-right: 4px;
}
.chip-active {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F0BEC3;
  border: 1px solid #F0BEC3;
  color: var(--brand-700);
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
  animation: chip-in 200ms ease-out;
}
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.chip-active .x {
  position: relative;
  display: inline-flex;
  width: 18px; height: 18px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: #F0BEC3;
  color: var(--brand-700);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.chip-active .x::before,
.chip-active .x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 1.6px;
  background: currentColor;
  border-radius: 1px;
}
.chip-active .x::before { transform: translate(-50%, -50%) rotate(45deg); }
.chip-active .x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.chip-active .x:hover { background: var(--brand); color: #fff; }
.clear-all {
  margin-left: auto;
  font-size: var(--fs-xs); color: var(--brand); font-weight: 700;
  cursor: pointer;
}
.clear-all:hover { text-decoration: underline; }

.results-bar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 0;
  max-width: var(--shell); margin: 0 auto;
  font-size: var(--fs-sm); color: var(--muted);
}
.results-bar .count-text { display: none; }
.results-bar .count-text strong { color: var(--ink); font-weight: 700; }

/* While searching: show only results + footer, hide the lower promo sections */
#page-list.search-active .features,
#page-list.search-active .promo-band,
#page-list.search-active .alert-cta,
#page-list.search-active .bigredsky-bar { display: none; }
#page-list.search-active #discover-sections { display: none; }
#page-list.search-active .results-bar-wrap { padding-top: 0; }
#page-list.search-active .results-bar { padding: 16px 0 4px; }
#page-list.search-active .cards-section { padding-top: 0; }
#page-list.search-active .cards-grid { padding-top: 6px; }
#page-list.search-active .cards-grid > .section-head:first-child { padding-top: 0; }

/* Sort dropdown */
.sort-block { display: inline-flex; align-items: center; gap: 10px; }
.sort-block.in-head { margin-left: auto; }

/* Print button — sits beside the sort control in the results bar. */
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-left: 12px;
  padding: 10px 18px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.print-btn:hover { border-color: var(--border-strong); background: var(--bg); }
.print-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.print-btn > svg { flex: none; }

/* Six-role landing preview control. */
.landing-jobs-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0 6px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.landing-jobs-cta[hidden] { display: none; }
.see-all-jobs:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.see-all-jobs { padding: 12px 22px; }
@media (max-width: 560px) {
  .see-all-jobs { padding: 12px 16px; }
}
#head-browse .sub { display: none; }
.sort-label {
  font-size: var(--fs-xs); font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sort-dd {
  padding: 0;
  min-width: 180px;
  justify-content: space-between;
  font-weight: 400;
  color: var(--ink);
}
.sort-dd > .filter-trigger { padding: 8px 16px; justify-content: space-between; }
.sort-dd .sort-current { white-space: nowrap; }
.sort-panel {
  left: auto !important;
  right: 0;
  min-width: 240px;
}
.sort-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: background var(--t-fast);
}
.sort-opt:hover { background: var(--bg); }
.sort-opt .check {
  width: 12px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  font-size: 0;
}
.sort-opt.is-selected {
  background: #F0BEC3;
  color: var(--brand-700);
  font-weight: 400;
}
.sort-opt.is-selected .check::after {
  content: "";
  width: 4px; height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* ─────────────────────────────────────────────
   Cards grid
   ───────────────────────────────────────────── */
.cards-section {
  padding: 12px var(--pad-x) 40px;
}
.cards-wrap {
  max-width: var(--shell); margin: 0 auto;
}
.section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 4px 12px;
  margin-bottom: 4px;
  position: relative;
}
.section-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
}
.section-head h3 {
  font-size: var(--fs-base); font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.section-head .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 36px;
  padding: 0 8px;
  background: var(--brand); color: var(--surface);
  font-size: var(--fs-lg); font-weight: 800;
  border-radius: 999px;
}
/* Reserve the count's row height before data arrives without painting an
   empty pill. Four digits also keep the heading stable on large boards. */
#head-browse .badge { min-width: calc(4ch + 16px); }
.section-head .badge:empty { visibility: hidden; }
.section-head.tone-also h3 { color: var(--gold); }
.section-head.tone-also .badge { background: var(--gold); color: var(--ink); }
.section-head .sub {
  margin-left: auto;
  font-size: var(--fs-xs); color: var(--muted);
  font-weight: 500;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 0 8px;
}
.cards-grid > .section-head {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.cards-grid > .section-head:first-child { margin-top: 0; }
.job-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 20px;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  animation: card-in 360ms cubic-bezier(.2,.7,.2,1) both;
  /* With 1000+ vacancies in the grid, let the browser skip layout and paint
     for cards scrolled out of view. contain-intrinsic-size keeps the
     scrollbar stable by reserving each card's approximate height. */
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Set by JS on animationend — see modern-app.js. Prevents the entry fade from
   replaying if the card is later moved in the DOM by a sort or filter. */
.job-card.is-settled { animation: none; }
/* content-visibility applies paint containment, which would clip a badge
   crossing the card edge. Only the small subset of newly posted roles opts
   out; the rest of the high-volume grid keeps its off-screen paint saving. */
.job-card.has-new-job {
  overflow: visible;
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.job-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round var(--r-lg));
  background: linear-gradient(to right, var(--brand-700) 4px, transparent 4px);
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t);
}
.job-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.job-card:hover::before,
.job-card:focus-visible::before,
.job-card:focus-within::before { transform: scaleY(1); }
.job-card.is-hidden { display: none; }

/* ─────────────────────────────────────────────
   Loading skeletons

   The vacancy cards are injected by JavaScript after the report data arrives,
   so without a placeholder the results area has zero height at first paint and
   then suddenly grows — a large layout shift, and the "flash" effect.

   These placeholders are rendered server-side inside #cards-grid, so the space
   is reserved in the very first frame, before any script runs. They occupy the
   same grid cells and the same height as a real card
   (contain-intrinsic-size on .job-card is the matching 260px).

   modern-app.js removes them as soon as the first real cards are appended.
   ───────────────────────────────────────────── */
/* .card-filler is the same placeholder reused mid-list: the board streams in
   batches smaller than a page, so the tail of the current page is reserved
   with fillers until the real cards arrive. The nth-child rules further down
   deliberately do NOT apply to it — they assume the placeholder is one of the
   six leading children, which a filler never is. */
.cards-grid.is-retrieving > .job-card,
.cards-grid.is-retrieving > .page-pending,
.cards-grid.is-retrieving > .no-match-msg {
  display: none !important;
}

.card-skeleton,
.card-filler {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Decorative only — hidden from assistive tech, which gets the polite
     "Loading vacancies" status message instead. */
  pointer-events: none;
}
.sk-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface-soft) 37%, var(--bg-2) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-line.w-40 { width: 40%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-line.tall { height: 20px; }
.sk-spacer { flex: 1; }
@keyframes sk-shimmer {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}
/* A shimmering block is exactly the kind of motion that triggers vestibular
   discomfort, so fall back to a flat tone. */
@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; background: var(--bg-2); }
}
/* The grid drops to two then one column, so six placeholders would become a
   very tall column of shimmer. Show fewer, keeping roughly two rows at every
   breakpoint — matching .cards-grid's own column counts. */
@media (max-width: 1180px) {
  .card-skeleton:nth-child(n + 5) { display: none; }
}
@media (max-width: 980px) {
  .card-skeleton:nth-child(n + 3) { display: none; }
}

.job-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 4px;
}
.job-card .agency {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex; align-items: center; gap: 6px;
}
.job-card .agency .ref {
  color: var(--muted);
  font-weight: 500;
}
.job-card h3 {
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  padding-right: 58px;
}

/* The title link carries the card's keyboard focus. It is styled to read as
   part of the heading, so the card looks unchanged, but it is a real anchor
   with a visible focus ring. */
.job-card h3 .card-title-link {
  color: inherit;
  text-decoration: none;
  background: none;
}
.job-card h3 .card-title-link:hover {
  text-decoration: underline;
}
.job-card h3 .card-title-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* "NEW" starburst badge, carried over from the legacy board
   (AdvertListJobTitle_369.inc).

   Anchored across the card's top border, half outside the surface, so it reads
   as a deliberate corner seal rather than competing with the title. It is
   absolutely positioned, so it stays put regardless of title wrapping — the
   markup lives inside the <h3> only so screen readers announce it immediately
   after the title. .job-card is the positioning context.

   The legacy rule used `margin: -99em 0` to collapse Font Awesome's 3x line
   box; that hack is not reproduced here because the badge is sized directly.

   Scoped under .job-card on purpose: the legacy report markup also uses
   .newjob, and on non-search pages both this file and the legacy styles.css
   are loaded. Scoping keeps the two implementations from affecting each
   other. */
.job-card .newjob {
  position: absolute;
  top: 7px;
  right: -4px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0;
  /* Legacy used #fb653e, which gives white text only ~3:1 contrast and fails
     WCAG AA. The brand red reaches ~4.9:1 and matches the modern palette. */
  color: var(--brand);
  /* Lifts the badge off the card without a hard edge. */
  filter: drop-shadow(0 2px 4px rgba(21, 17, 14, 0.22));
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}
.job-card .newjob > svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  display: block;
}
.job-card .newjob-text {
  grid-area: 1 / 1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #fff;
  transform: rotate(-20deg);
  /* Legacy .fa-layers-text sets its own size/offsets; neutralise them here. */
  margin: 0;
}

.job-card .classification {
  display: inline-block;
  max-width: 100%;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.job-card .card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.card-meta .row .lab {
  display: block;
  font-size: 0.65625rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.card-meta .row .val {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.why-matches {
  /* Presentation disabled; retain match explanations for future use. */
  display: none;
  background: linear-gradient(to right, rgba(150,0,0,0.06), rgba(150,0,0,0));
  border-left: 3px solid var(--brand);
  padding: 10px 14px;
  margin: 0 0 14px;
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.55;
  animation: chip-in 280ms ease-out;
}
.job-card[data-tier="also"] .why-matches {
  background: linear-gradient(to right, rgba(181,131,43,0.08), rgba(181,131,43,0));
  border-left-color: var(--gold);
}
.why-matches strong { color: var(--ink); font-weight: 700; }

.no-match-msg {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: 40px 30px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-base);
}
.no-match-msg strong { color: var(--ink); display: block; font-size: var(--fs-lg); margin-bottom: 6px; }

/* Pagination */
.pagination {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 30px 0 6px;
}
.pg-btn {
  min-width: 40px; height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.pg-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--hover-wash); }
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pg-status,
.pg-records {
  padding: 0 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
/* Keep the legacy-style navigation usable while vacancies stream in. The
   spinner only indicates that cards are still arriving; it never replaces
   First / Previous / Next / Last or the server's authoritative total. */
.pagination.is-loading .pg-records {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pg-counting {
  box-sizing: border-box;
  width: 14px; height: 14px;
  flex: none;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: pg-counting-spin 0.7s linear infinite;
}
@keyframes pg-counting-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pg-counting { animation-duration: 2.4s; }
}
/* On small screens the labels collapse to arrows; the status text carries
   the position, so the control still fits on one line. */
@media (max-width: 560px) {
  .pagination { gap: 4px; }
  .pg-btn { padding: 0 10px; min-width: 36px; }
  .pg-records { flex-basis: 100%; order: 3; text-align: center; padding: 6px 0 0; }
}
/* #head-browse packs its heading, count badge, sort and print controls into
   one row — too many to fit on one line below tablet width. */
@media (max-width: 720px) {
  #head-browse { flex-wrap: wrap; row-gap: 10px; }
  #head-browse .sort-block.in-head { order: 4; margin-left: 0; flex-basis: 100%; }
  #head-browse .print-btn { order: 5; margin-left: 0; }
}
.browse-hint {
  display: none;
  text-align: center;
  padding: 22px 0 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}
.browse-hint .bh-cta { color: var(--ink); font-weight: 700; }

/* ─────────────────────────────────────────────
   Promo + feature blocks
   ───────────────────────────────────────────── */
.promo-band {
  background: #2A2421;
  color: #FBF5EB;
  padding: 56px var(--pad-x);
  position: relative;
  overflow: hidden;
}
.promo-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.promo-inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 670px);
  gap: 56px;
  align-items: center;
}
.promo-text .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #FBC0A8;
  border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.promo-text {
  display: grid;
  min-width: 0;
}
.promo-copy {
  grid-area: 1 / 1;
  align-self: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-slow);
}
.promo-copy.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.promo-text .eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--brand);
  border-radius: 50%;
}
.promo-text h2 {
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 14px;
  color: #fff;
  text-wrap: balance;
}
.promo-text p {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  max-width: 480px;
  margin-bottom: 26px;
}
/* The modern carousel and CMS campaign banner share one authoritative CTA.
   The weighted selectors and explicit metrics prevent Bootstrap, campaign.css
   and generic legacy anchor rules from making either version look different. */
body.modern-mode .promo-text a.promo-cta,
body.modern-mode a.campaign-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 12px 22px !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-sm) !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
body.modern-mode .promo-text a.promo-cta:hover,
body.modern-mode .promo-text a.promo-cta:focus,
body.modern-mode a.campaign-cta:hover,
body.modern-mode a.campaign-cta:focus {
  color: var(--ink) !important;
  background: #fff !important;
  text-decoration: none !important;
}
body.modern-mode .promo-text a.promo-cta:hover,
body.modern-mode .campaign-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(255,255,255,0.3);
}
body.modern-mode .promo-text a.promo-cta:active,
body.modern-mode a.campaign-cta:active {
  transform: translateY(0);
}
body.modern-mode .promo-text a.promo-cta:focus-visible,
body.modern-mode .campaign-cta:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 3px;
}
body.modern-mode .promo-text a.promo-cta svg,
body.modern-mode .campaign-cta svg {
  flex: 0 0 16px;
  transition: transform var(--t-fast);
}
body.modern-mode .promo-text a.promo-cta:hover svg,
body.modern-mode .campaign-cta:hover svg { transform: translateX(4px); }
.promo-dots {
  grid-area: 2 / 1;
  display: flex;
  gap: 0;
  margin-top: 28px;
}
.promo-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.promo-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: rgba(255,255,255,0.2);
  transition: width var(--t-fast), background var(--t-fast);
}
.promo-dot.is-active::before {
  width: 22px;
  background: var(--brand);
}
.promo-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.promo-rotation {
  align-self: center;
  margin-right: 8px;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.promo-rotation:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.promo-image {
  position: relative;
  width: min(100%, 670px);
  aspect-ratio: 67 / 40;
  justify-self: end;
  border-radius: var(--r-xl);
  background: #241D18;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.pb-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  visibility: hidden;
  transition: opacity var(--t-slow), transform 7s ease-out;
}
.pb-slide.is-active {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.pb-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .promo-copy,
  .pb-slide { transition: none; }
}
.promo-image .img-icon {
  width: 72px; height: 72px;
  border-radius: 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  display: grid; place-items: center;
  margin-bottom: 14px;
}

/* Feature triptych */
.features {
  padding: 56px var(--pad-x);
  background: var(--bg);
}
.features-head {
  max-width: var(--shell);
  margin: 0 auto 24px;
}
.features-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink);
  text-wrap: balance;
}
.features-inner {
  max-width: var(--shell); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  transition: all var(--t);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.feature-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.feature-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t);
}
.feature-body {
  flex: 1;
  min-width: 0;
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.feature-card:hover .feature-img { transform: scale(1.04); }
.feature-card .icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #F0BEC3;
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: 18px;
  transition: transform var(--t);
}
.feature-card:hover .icon { transform: scale(1.08) rotate(-3deg); }
.feature-card h4 {
  font-size: 1.5rem; font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 14px;
  text-wrap: balance;
}
.feature-card p {
  font-size: 0.90625rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 22px;
  text-wrap: pretty;
}
.feature-card .more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  font-size: var(--fs-base); font-weight: 700;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--ink);
  transition: gap var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.feature-card:hover .more { gap: 12px; color: var(--brand); border-color: var(--brand); }

/* Job alert CTA */
.alert-cta { padding: 88px var(--pad-x) 100px; background: var(--bg); }
.alert-cta-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 5vw, 64px);
  text-align: center;
  background:
    radial-gradient(420px 320px at 8% 12%, rgba(232,149,97,0.20), transparent 60%),
    radial-gradient(460px 340px at 94% 88%, rgba(225,84,62,0.14), transparent 62%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
}
.alert-cta-card h2 {
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--ink);
  line-height: 1.05;
  text-wrap: balance;
}
.alert-cta-card h2 em { font-style: normal; color: var(--brand); }
.alert-cta-card p {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
}
.alert-cta-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.alert-cta-actions .btn { padding: 10px 18px; font-size: var(--fs-base); }

/* ─────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────── */
.bigredsky-bar {
  padding: 18px var(--pad-x);
}
.bigredsky-inner {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: var(--fs-xs); color: var(--muted);
}
.bigredsky-logo {
  font-weight: 800;
  font-size: var(--fs-base);
  color: var(--ink);
  letter-spacing: -0.5px;
  display: inline-flex; align-items: center; gap: 6px;
}
/* BigRedSky corporate red — a fixed brand colour, deliberately NOT var(--brand)
   (the iworkforSA theme colour). Matches the prototype, and at 6.68:1 on white
   it also clears WCAG AA for this small, bold text. */
.bigredsky-logo .brs-red { color: #B22222; }
.bigredsky-logo::before {
  display: none;
}

.site-footer {
  background: #1A1612;
  color: rgba(255,255,255,0.7);
  padding: 56px var(--pad-x) 32px;
}
.footer-inner {
  max-width: var(--shell); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-col h5 {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 16px;
}
.site-footer .footer-col a,
.site-footer .footer-col a:visited {
  display: block;
  text-transform: none;
  font-size: var(--fs-base);
  color: #b4b2b1; /* spec: Footer Links */
  font-weight: 500;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.site-footer .footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .footer-col a:focus-visible {
  color: #fff;
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Legacy footer parity: "You are already logged on as a …" status line.
   Styled to the dark footer (muted, no browser <mark> highlight) rather than
   carrying the legacy yellow highlight. Matches footer link sizing/colour. */
.footer-logged-on {
  margin: 10px 0 0;
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
/* Reversed (white) vertical lockup on the dark footer. Taller than the old
   horizontal logo so the stacked crest and wordmark stay legible. */
.sagov-logo-footer { height: 64px; width: auto; display: block; }
.footer-brand .mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F47A45, var(--brand) 60%, var(--brand-600));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: var(--fs-lg);
}
.footer-brand .lead {
  font-weight: 800;
  font-size: 1.0625rem;
  color: #fff;
  letter-spacing: -0.4px;
}
.footer-about {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  max-width: 360px;
}
.site-footer .footer-col .footer-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-top: 12px;
}
.footer-linkedin img { display: block; width: 24px; height: 24px; object-fit: contain; }
.footer-bottom {
  max-width: var(--shell);
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-base);
  /* Full-opacity white: at 0.4 alpha this was ~2:1 on the dark footer. */
  color: rgba(255,255,255,1);
}
.acknowledgement {
  background: rgba(225,84,62,0.08);
  border: 1px solid rgba(225,84,62,0.16);
  border-radius: var(--r);
  padding: 14px 18px;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: var(--shell);
  margin: 32px auto 0;
}
.acknowledgement strong { color: rgba(255,255,255,0.9); font-weight: 700; }

/* ─────────────────────────────────────────────
   Discover: Featured this week + Career tracks
   ───────────────────────────────────────────── */
#discover-sections {
  overflow: hidden;
  max-height: 1600px;
  opacity: 1;
  transition: max-height 480ms cubic-bezier(.2,.7,.2,1), opacity 300ms ease, margin 480ms cubic-bezier(.2,.7,.2,1);
}
#discover-sections.is-collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.discover {
  padding: 26px var(--pad-x) 0;
}
.discover + .discover { padding-top: 30px; }
.discover:last-child { padding-bottom: 30px; }
.discover-inner {
  max-width: var(--shell);
  margin: 0 auto;
}
.discover-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.discover-head h3 {
  font-size: var(--fs-base); font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.discover-head .aside {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}
.discover-head .aside.link {
  color: var(--brand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: var(--fs-xs);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--t-fast);
}
.discover-head .aside.link:hover { gap: 10px; }

/* Featured cards */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.featured-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 24px 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.featured-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, #F47A45, var(--brand) 70%);
  transform: scaleX(1);
  transform-origin: left;
}
.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--border-strong);
}
.featured-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-700);
  background: #F0BEC3;
  border: 1px solid #F0BEC3;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.featured-card h4 {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.featured-card p {
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 18px;
  text-wrap: pretty;
}
.featured-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--border);
}
.featured-foot .dept {
  font-size: var(--fs-xs);
  color: var(--soft);
  font-weight: 600;
}
.featured-foot .roles {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--t-fast);
}
.featured-card:hover .featured-foot .roles { gap: 10px; }

/* Career track pills */
.tracks-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.track-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.track-card:hover {
  border-color: var(--brand);
  background: #F0BEC3;
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}
.track-card .t-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}
.track-card .t-count {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}

/* Collection banner */
.collection-banner-wrap {
  padding: 18px var(--pad-x);
}
.collection-banner {
  max-width: var(--shell);
  margin: 0 auto;
  animation: chip-in 280ms ease-out;
}
.back-to-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 4px 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: color var(--t-fast), gap var(--t-fast);
}
.back-to-all:hover {
  color: var(--brand);
  gap: 12px;
}

@media (max-width: 1180px) {
  .featured-grid { grid-template-columns: 1fr; }
  .tracks-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .tracks-row { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────
   Pages — fade transition
   ───────────────────────────────────────────── */
.page { animation: page-in 320ms cubic-bezier(.2,.7,.2,1); }
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   Detail page
   ───────────────────────────────────────────── */
.detail-band {
  background: linear-gradient(180deg, #FBF5EB 0%, var(--bg) 100%);
  padding: 18px var(--pad-x);
}
.detail-band-inner, .detail-actions-inner {
  max-width: 920px;
  margin: 0 auto;
}
.detail-actions-inner {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 6px 0;
  transition: color var(--t-fast), gap var(--t-fast);
}
.detail-back:hover { color: var(--brand); gap: 10px; }
.detail-actions {
  padding: 18px var(--pad-x);
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky; top: var(--header-h, 104px);
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.94);
}

/* ─────────────────────────────────────────────
   Apply form page
   ───────────────────────────────────────────── */
.apply-header {
  background: linear-gradient(180deg, #FBF5EB 0%, var(--bg) 100%);
  padding: 28px var(--pad-x) 0;
  border-bottom: 1px solid var(--border);
}
.apply-header-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.apply-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--muted);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 18px;
  transition: color var(--t-fast), gap var(--t-fast);
}
.apply-back-link:hover { color: var(--brand); gap: 10px; }
.apply-title-row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.apply-title-row h1 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}
.apply-title-row .meta { font-size: var(--fs-base); color: var(--ink); }
.apply-title-row .meta strong { color: var(--ink); font-weight: 700; }
.apply-title-row .meta .sep { margin: 0 8px; color: var(--ink); }
.apply-status {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}
.apply-status .dot {
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
  position: relative;
}
.apply-status .dot::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%; background: var(--brand);
  animation: pulse 1.8s ease-out infinite;
  opacity: 0.5;
}

.stepper {
  display: flex; align-items: center;
  max-width: 880px;
  padding-bottom: 26px;
}
.step {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.step .circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: grid; place-items: center;
  font-size: var(--fs-base); font-weight: 700;
  color: var(--ink);
  transition: all var(--t);
}
.step .label {
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  white-space: nowrap;
}
.step.is-active .circle {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.step.is-active .label { color: var(--ink); }
.step.is-done .circle {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
}
.step.is-done .circle::after { content: '✓'; color: var(--brand); }
.step.is-done .circle .num { display: none; }
.step-line {
  flex: 1; height: 2px;
  background: var(--border);
  margin: 0 12px;
  min-width: 24px;
  transition: background var(--t);
}
.step.is-done + .step-line { background: var(--brand); }

.apply-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}
.apply-main { min-width: 0; }
.apply-aside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.apply-aside-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
}
.apply-aside-card h3 {
  font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.apply-aside-card .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0;
  gap: 12px;
}
.apply-aside-card .row .lbl {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.apply-aside-card .row .val {
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}
.progress-list { font-size: var(--fs-sm); line-height: 2; color: var(--muted); }
.progress-list .pl-row { display: flex; align-items: center; gap: 8px; }
.progress-list .pl-row.active { color: var(--ink); font-weight: 600; }
.progress-list .pl-row::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.progress-list .pl-row.active::before { background: var(--brand); }
.progress-note {
  background: var(--surface-soft);
  border-left: 4px solid var(--brand);
  border-radius: var(--r);
  padding: 16px 20px;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-body);
}
.progress-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.apply-legend {
  font-size: var(--fs-xs); color: var(--muted);
  margin-bottom: 14px;
}
.apply-legend .req { color: var(--brand); font-weight: 800; }

/* Form sections */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px 28px;
  margin-bottom: 14px;
}
.form-section .section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.form-section .section-head::after { display: none; }
.form-section .section-head h2 {
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.form-section .section-sub {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.field { display: flex; flex-direction: column; }
.field.full-width { grid-column: 1 / -1; }
.field > label {
  font-size: var(--fs-xs);
  color: var(--text);
  font-weight: 700;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  display: flex; align-items: center; gap: 4px;
}
.field > label .req { color: var(--brand); font-size: var(--fs-sm); }
.field input, .field select {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  padding: 11px 14px;
  font-size: var(--fs-base);
  border-radius: var(--r);
  outline: none;
  color: var(--ink);
  transition: border var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

/* Themed custom select (replaces native dropdown UI) */
.custom-select { position: relative; }
.custom-select .cs-native { display: none; }
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  padding: 11px 14px;
  font-size: var(--fs-base);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.cs-trigger:hover { border-color: var(--border-strong); }
.cs-trigger .arrow {
  font-size: var(--fs-base); color: var(--ink);
  transition: transform var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.cs-value.is-placeholder { color: var(--soft); }
.custom-select.is-open .cs-trigger {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.custom-select.is-open .cs-trigger .arrow { transform: rotate(180deg); color: var(--brand); }
.cs-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  opacity: 0; transform: translateY(-6px) scale(0.985);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.custom-select.is-open .cs-panel {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.field input::placeholder { color: var(--soft); }
.field input:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field .hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 6px;
}
.field.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.field.inline-check label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.field.inline-check input[type="checkbox"] {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: var(--brand);
}
.btn-back-step, .btn-save, .btn-next {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 22px;
  font-size: var(--fs-sm); font-weight: 700;
  border-radius: 999px;
  border: 1px solid;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-back-step { background: var(--surface); color: var(--muted); border-color: var(--border); }
.btn-back-step:hover { border-color: var(--ink); color: var(--ink); }
.btn-back-step[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-save { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-save:hover { background: var(--hover-wash); border-color: var(--brand); color: var(--brand); }
.btn-next { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-next:hover { background: var(--brand-600); border-color: var(--brand-600); color: #000; }

/* Detail action bar buttons */
.detail-actions a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: -0.1px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all var(--t-fast);
}
.detail-actions a:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.detail-actions a.is-primary {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 8px 20px -10px rgba(225,84,62,0.55);
}
.detail-actions a.is-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #000; }

/* ─────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .promo-inner { grid-template-columns: 1fr; gap: 32px; }
  .promo-image { justify-self: center; }
}
@media (max-width: 980px) {

  .cards-grid { grid-template-columns: 1fr; }
  .features-inner { grid-template-columns: 1fr; }
  .feature-img { aspect-ratio: 16 / 9; }
  .feature-body { padding: 22px 24px 24px; }
  .apply-layout { grid-template-columns: 1fr; }
  .apply-aside { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .site-nav { display: none; }
  .stepper { overflow-x: auto; padding-bottom: 14px; }
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .results-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* =============================================================
   Nav dropdowns (mirrors the original jobboard menu structure)
   ============================================================= */
.site-nav .nav-item { position: relative; display: inline-flex; }
/* invisible hover bridge so the panel doesn't close in the gap */
.site-nav .nav-item.has-dd::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
}
.nav-caret {
  margin-left: 5px;
  opacity: .55;
  transition: transform var(--t-fast);
}
.site-nav .nav-item.is-open > .nav-link .nav-caret { transform: rotate(180deg); }
.nav-dd {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 252px;
  max-width: 330px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
  z-index: 60;
}
/* Dropdown links — reset the underline bar inherited from .site-nav a */
.site-nav .nav-dd a.nav-dd-link {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  border-radius: 8px;
  white-space: normal;
  text-decoration: none;
}
.site-nav .nav-dd a.nav-dd-link::after { display: none !important; }
.site-nav .nav-dd a.nav-dd-link:hover { background: var(--hover-wash); color: var(--brand); }
.site-nav .nav-dd a.nav-dd-link.is-current { background: #F0BEC3; color: var(--brand-700); }
.site-nav .nav-dd a.nav-dd-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.site-header .site-nav a:not(.btn):not(.is-active):not(.is-current):not(:hover),
.site-header .account-dd a.account-dd-link:not(.is-current):not(:hover),
.site-header .account-trigger {
  color: #0F2D41;
}
.site-header .site-nav a:not(.btn):hover,
.site-header .account-dd a.account-dd-link:hover {
  color: var(--brand);
  background: var(--hover-wash);
}
/* Open states */
.site-nav .nav-item.is-open > .nav-dd {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Mobile burger ------------------------------------------------ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px; height: 40px;
  margin-left: auto;
  padding: 0 9px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .site-header-inner { flex-wrap: wrap; gap: 14px 18px; }
  .nav-toggle { display: flex; order: 2; }
  .header-cta { order: 3; }
  .site-nav {
    order: 4;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    /* The base rule is `flex: 1`, i.e. flex-basis: 0% — which wins over
       width:100% when the flex container sizes its items, so the drawer never
       wrapped onto its own line and was squeezed into whatever space was left
       beside the logo. Forcing a 100% basis is what actually makes it wrap. */
    flex: 0 0 100%;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    /* The drawer must never run off the bottom of the screen. It opens
       directly under the logo row, so cap it to whatever viewport is left
       and let it scroll. overscroll-behavior stops the scroll chaining
       through to the page underneath once the list hits its end. */
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav .nav-item { display: block; width: 100%; }
  .site-nav .nav-link { width: 100%; justify-content: space-between; padding: 11px 12px; }
  .site-nav a.is-active::after { display: none; }
  .nav-dd {
    position: static;
    transform: none;
    min-width: 0; max-width: none;
    border: 0;
    border-left: 2px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 0 6px 12px;
    padding: 2px 0 2px 8px;
    display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .site-nav .nav-item.is-open > .nav-dd {
    display: flex;
    transform: none;
  }
  .site-nav .nav-dd a.nav-dd-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Account moves into the drawer: the header trigger is hidden so the same
     actions exist in exactly one place at this width. */
  .account-menu { display: none; }
  .nav-account {
    display: block;
    order: -1;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
}
@media (max-width: 720px) {
  .header-cta .btn-ghost { display: none; }
  .site-header .site-nav a.nav-mobile-alerts {
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    margin-top: 8px;
    color: var(--brand);
    background: var(--surface);
    border: 1px solid var(--brand);
    border-radius: 999px;
    font-weight: 700;
  }
  .site-header .site-nav a.nav-mobile-alerts:hover,
  .site-header .site-nav a.nav-mobile-alerts:focus {
    color: #000;
    background: var(--brand-600);
    border-color: var(--brand-600);
  }
}/* =============================================================
   Empty / loading states for the results grid
   ============================================================= */
.no-match-msg.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 54px 28px;
  margin-top: 6px;
}

/* Placeholder shown when the user reaches a page whose vacancies are still
   downloading in the background. */
.page-pending {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 28px;
  color: var(--muted);
  font-weight: 600;
}
.page-pending p { margin: 0; }
.page-pending .spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: es-rotate 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-pending .spinner { animation-duration: 3s; }
}
.empty-state .es-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #F0BEC3;
  color: var(--brand-700);
}
.empty-state .es-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.empty-state .es-body {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text);
  max-width: 480px;
  margin: 0;
}
.empty-state .es-body strong {
  display: inline;
  color: var(--ink);
  font-size: inherit;
  margin-bottom: 0;
}
.empty-state .es-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.empty-state .es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.empty-state .es-btn:hover { background: var(--bg-2); border-color: var(--ink); transform: translateY(-1px); }
.empty-state .es-btn.es-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-1);
}
.empty-state .es-btn.es-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #000; }
/* Loading spinner */
.empty-state .es-spin { animation: es-rotate 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes es-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .empty-state .es-spin { animation-duration: 3s; }
}
@media (max-width: 720px) {
  .no-match-msg.empty-state { padding: 40px 18px; }
}

/* ---------------------------------------------
   Touch-screen form controls
   Last in the file on purpose: it has to win over the component rules above
   (.field input is 14px), and these selectors are no more specific than
   those, so source order is what decides it.

   Why: iOS Safari zooms the page whenever a focused control is under 16px.
   That shifts the layout mid-form and is disorienting. 16px stops it.
   --------------------------------------------- */
@media (max-width: 720px) {
  input[type="text"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="number"],
  input[type="date"], select, textarea,
  .field input, .field select, .field textarea { font-size: var(--fs-lg); }
}

/* =============================================================
   Print — replaces the legacy print-adlist.css
   -------------------------------------------------------------
   #print-area is built on demand by printResults() in modern-app.js and is
   never visible on screen; only the page's Print button enables it.
   The layout mirrors the legacy printout: title + logos, a results table,
   and a "Printed <date>" line.
   ============================================================= */
.print-message {
  padding: 12px 16px;
  margin: 8px 0 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}
.print-message[hidden] { display: none; }
#print-area { display: none; }

@media print {
  body.results-print-active > *:not(#print-area) { display: none !important; }
  body.results-print-active #print-area { display: block; }

  @page vacancy-results { margin: 12mm; size: A4 landscape; }

  body.results-print-active {
    page: vacancy-results;
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  .print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
  }
  .print-title { font-size: 15pt; font-weight: 800; letter-spacing: 0.5px; }
  .print-logos { display: flex; align-items: center; gap: 14px; }
  .print-logos img { height: 34px; width: auto; }

  .print-scope {
    margin: 8px 0 10px;
    font-size: 9pt;
    color: #333;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  .print-table th,
  .print-table td {
    border: 1px solid #999;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    font-size: 8.5pt;
    line-height: 1.3;
    /* Long titles and agency names must wrap rather than overflow the cell. */
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .print-table th { background: #eee; font-weight: 700; }
  /* Repeat the column headings on every printed page. */
  .print-table thead { display: table-header-group; }
  .print-table tr { page-break-inside: avoid; break-inside: avoid; }
  /* Job title gets the most room; the rest are narrower. Widths are declared
     for all eight columns (see PRINT_COLUMNS in modern-app.js) and total 100%,
     because table-layout: fixed divides any unclaimed width arbitrarily. */
  .print-table th:nth-child(1), .print-table td:nth-child(1) { width: 20%; }
  .print-table th:nth-child(2), .print-table td:nth-child(2) { width: 16%; }
  .print-table th:nth-child(3), .print-table td:nth-child(3) { width: 9%; }
  .print-table th:nth-child(4), .print-table td:nth-child(4) { width: 13%; }
  .print-table th:nth-child(5), .print-table td:nth-child(5) { width: 13%; }
  .print-table th:nth-child(6), .print-table td:nth-child(6) { width: 13%; }
  .print-table th:nth-child(7), .print-table td:nth-child(7) { width: 8%; }
  .print-table th:nth-child(8), .print-table td:nth-child(8) { width: 8%; }

  .print-table tfoot { display: table-footer-group; }
  .print-table .print-foot {
    width: auto;
    padding: 6px;
    border: 0;
    border-top: 1px solid #999;
    font-size: 8.5pt;
    color: #333;
  }
}