*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --navy-deep: #000814;
    --navy-mid: #001D3D;
    --navy-light: #003566;
    --gold: #FFC300;
    --gold-hover: #FFD60A;
    --gold-muted: #E6A800;
    --white: #ffffff;
    --off-white: #f4f5f7;
    --charcoal: #1a1a1a;
    --muted: #5a6474;
    --border: #e2e5ea;
    --green: #1a6b2e;
    --ink:#0B0D10; --ink-2:#1C2126; --muted-2:#9AA1AA;
    --hair:#E4E7EB; --paper:#FFFFFF; --wash:#F7F8F9; --field:#F1F3F5; --signal:#FFC300; --fresh:#0F7B3E; --rule:#D6DAE0;
    --night:#2B3A67; --night-bg:#EDF0F7; --wknd:#7A3B2E; --wknd-bg:#F8EFEC; --part:#4A5A2E; --part-bg:#F1F4EA;
    --full:#3A4249; --full-bg:#EFF1F3; --noexp:#6B4A15; --noexp-bg:#FAF2E4;
  }

  html { scroll-behavior: smooth; }
  body {
    font-family: 'Barlow', sans-serif;
    background: var(--field);   /* light grey page so the white cards separate and the dark filter rail transitions into the results */
    color: var(--charcoal);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* ── NAV ── */
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--white); padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
  .nav-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.25rem; color: #111; text-decoration: none; border-bottom: 9px solid #111; padding-bottom: 4px; display: inline-block; }
  .nav-logo span { color: #FFC300; }
  .nav-logo .ns { color: #111; font-weight: 600; font-size: 1rem; opacity: 0.6; margin-left: 6px; }
  .nav-cta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--navy-deep); background: var(--gold);
    padding: 8px 14px; border-radius: 8px; text-decoration: none;
    transition: background 0.15s;
  }
  .nav-cta:hover { background: var(--gold-hover); }

  /* ── HEADER / HERO ── */
  .board-hero {
    margin-top: 49px;
    background: var(--navy-deep);
    position: relative;
    overflow: hidden;
    padding: 26px 16px 22px;
  }
  .board-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,195,0,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,195,0,0.05) 1px, transparent 1px);
    background-size: 38px 38px;
    pointer-events: none;
  }
  .board-hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
  .board-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
  }
  .board-eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--gold); }
  .board-hero h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800; font-size: clamp(1.9rem, 7vw, 3rem);
    line-height: 1.04; letter-spacing: -0.01em; color: var(--white);
    margin-bottom: 8px;
  }
  .board-hero h1 em { color: var(--gold); font-style: normal; }
  .board-hero p { font-size: 0.95rem; color: rgba(255,255,255,0.72); max-width: 540px; line-height: 1.5; }
  .board-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 12px 20px; border-radius: 10px; cursor: pointer; text-decoration: none;
    border: none; transition: background 0.15s, border-color 0.15s;
  }
  .hero-btn.gold { background: var(--gold); color: var(--navy-deep); }
  .hero-btn.gold:hover { background: var(--gold-hover); }
  .hero-btn.ghost { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.28); }
  .hero-btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

  /* ── WRAP ── */
  .wrap{max-width:1180px;margin:0 auto;padding:0 20px}

  /* ── FILTER RAIL (dark, sticky below the fixed nav) ── */
  .rail{position:sticky;top:49px;z-index:100;background:var(--ink);padding:12px 0;box-shadow:0 3px 8px rgba(0,0,0,.12)}
  .rail-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:8px;align-items:center}
  .search{flex:1 1 auto;position:relative;min-width:0}
  .search input{width:100%;height:44px;background:#20262C;border:1px solid #2E353C;border-radius:3px;color:#fff;font-family:'Barlow',sans-serif;font-size:0.95rem;padding:0 14px 0 40px;outline:none}
  .search input::placeholder{color:#7C858E}
  .search input:focus{border-color:var(--signal);background:#262D34}
  .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:#7C858E;fill:none;stroke-width:2}
  .selectwrap{position:relative;flex:0 0 auto}
  .selectwrap select{appearance:none;-webkit-appearance:none;height:44px;background:#20262C;border:1px solid #2E353C;border-radius:3px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:0.05em;text-transform:uppercase;padding:0 34px 0 14px;cursor:pointer;outline:none}
  .selectwrap select:focus{border-color:var(--signal)}
  .selectwrap:after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid #7C858E;border-bottom:2px solid #7C858E;transform:translateY(-70%) rotate(45deg);pointer-events:none}
  .moretoggle{height:44px;flex:0 0 auto;background:transparent;border:1px solid #2E353C;border-radius:3px;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.9rem;letter-spacing:0.05em;text-transform:uppercase;padding:0 16px;cursor:pointer;display:flex;align-items:center;gap:8px}
  .moretoggle:hover{border-color:#4A535C}
  .moretoggle .dot{width:18px;height:18px;border-radius:50%;background:var(--signal);color:var(--ink);font-size:0.7rem;font-weight:700;display:none;align-items:center;justify-content:center;font-family:'Barlow',sans-serif}
  .moretoggle.has .dot{display:flex}
  @media(max-width:860px){
    .rail-in{flex-wrap:wrap;gap:8px}
    .search{flex:1 1 100%;order:1}
    .selectwrap{order:2;flex:1 1 calc(50% - 4px);min-width:0}
    .selectwrap select{width:100%;padding-right:30px;font-size:0.82rem;letter-spacing:0.03em}
    #shiftWrap{flex:1 1 calc(50% - 4px)}
    .moretoggle{order:3;flex:1 1 100%;justify-content:center}
  }

  /* ── RESULTS SECTION HEADER (updates with vertical + location) ── */
  .board-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;line-height:1.12;letter-spacing:-0.012em;color:var(--navy-mid);padding:18px 0 0}
  @media(min-width:700px){ .board-title{font-size:1.75rem} }

  /* ── ACTIVE FILTER PILLS ── */
  .active{padding:10px 0 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
  .active:empty{display:none}
  .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);border-radius:100px;padding:5px 8px 5px 13px;font-size:0.83rem;font-weight:500;color:var(--ink-2);background:var(--paper)}
  .pill.locked{border-color:var(--ink);background:var(--ink);color:#fff;padding-right:13px}
  .pill button{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:1.05rem;line-height:1;padding:0 2px}
  .pill button:hover{color:var(--ink)}
  .clearall{border:0;background:transparent;cursor:pointer;font-size:0.83rem;color:var(--muted);text-decoration:underline;padding:4px}

  /* ── RESULTS META ── */
  .meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 10px;border-bottom:2px solid var(--ink)}
  .count{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:0.02em}
  .count span{color:var(--muted);font-weight:600}
  .sort{font-size:0.85rem;color:var(--muted);display:flex;gap:14px}
  .sort button{border:0;background:transparent;cursor:pointer;padding:0;font-family:'Barlow',sans-serif;font-size:0.85rem;color:var(--muted)}
  .sort button[aria-pressed="true"]{color:var(--ink);font-weight:600;text-decoration:underline}

  /* ── CARD GRID ── 1-up mobile, 2-up >=680, 3-up >=1000. Reserved heights keep cards
     near-uniform; align-items:stretch + margin-top:auto on .cview aligns the buttons across
     each row. Card order: New -> title -> company -> pay -> description -> tags -> View. */
  .rows{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}
  .card{background:var(--paper);border:1px solid var(--rule);padding:13px 14px 12px;display:flex;flex-direction:column}
  .card:nth-child(even){background:#F7F8FA}   /* single-column alternation only; disabled in grid below */
  .card:hover{border-color:var(--muted-2)}
  .newflag{display:inline-flex;align-items:center;gap:6px;color:var(--fresh);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:5px}
  .newflag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fresh);box-shadow:0 0 0 3px rgba(15,123,62,.16)}
  .ct{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem;line-height:1.16;letter-spacing:-0.008em;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.16em)}
  .ct a{color:var(--ink);text-decoration:none}
  .ct a:hover{text-decoration:underline;text-underline-offset:3px}
  .cs{font-size:0.87rem;color:var(--muted);line-height:1.4;min-height:calc(2 * 1.4em)}
  .cs b{color:var(--ink-2);font-weight:600;display:block}
  .cpay{margin-top:9px;margin-bottom:11px;display:flex;align-items:baseline;gap:7px;font-family:'Barlow Condensed',sans-serif;min-height:1.45rem}
  .cpay b{font-size:1.32rem;font-weight:800;letter-spacing:-0.015em}
  .cpay i{font-style:normal;font-family:'Barlow',sans-serif;font-size:0.8rem;font-weight:500;color:var(--muted)}
  .cpay.empty{margin:0;min-height:0}   /* no "Pay not listed" placeholder: empty, zero-margin, card closes up */
  .cdesc{margin-top:7px;font-size:0.87rem;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.45em)}
  .cdesc span{color:var(--muted-2);padding:0 5px}
  .ctags{display:flex;gap:5px;margin-top:9px;margin-bottom:14px;flex-wrap:wrap;min-height:22px}
  .tg{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.74rem;letter-spacing:0.07em;text-transform:uppercase;padding:3px 8px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--rule)}
  .tg.night{color:var(--night);background:var(--night-bg);box-shadow:none}
  .tg.wknd{color:var(--wknd);background:var(--wknd-bg);box-shadow:none}
  .tg.part{color:var(--part);background:var(--part-bg);box-shadow:none}
  .tg.full{color:var(--full);background:var(--full-bg);box-shadow:none}
  .tg.noexp{color:var(--noexp);background:var(--noexp-bg);box-shadow:none}
  .cview{display:block;margin-top:auto;text-align:center;text-decoration:none;background:linear-gradient(180deg,#FFD22E,var(--signal));color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:0.92rem;letter-spacing:0.07em;text-transform:uppercase;padding:9px 0;border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.4)}
  .cview:hover,.cview:active{background:var(--ink);color:var(--signal)}
  @media(min-width:680px){
    .rows{grid-template-columns:repeat(2,1fr);gap:12px}
    .card:nth-child(even){background:var(--paper)}   /* positional alternation reads as noise in a grid */
  }
  @media(min-width:700px){ .card{padding:14px 15px 13px} }
  @media(min-width:1000px){
    .rows{grid-template-columns:repeat(3,1fr)}
    .ct{font-size:1.28rem}
  }
  #loadMoreWrap{padding:18px 0}
  .load-more{width:100%;padding:14px;background:var(--paper);color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;border:1.5px solid var(--ink);cursor:pointer}
  .load-more:hover{background:var(--ink);color:var(--signal)}
  .feed-msg{padding:40px 0;text-align:center;color:var(--muted)}
  .feed-msg .fm-title{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:800;color:var(--ink);margin-bottom:6px}
  .feed-msg .fm-sub{font-size:0.9rem}

  /* ── DRAWER ── */
  .scrim{position:fixed;inset:0;background:rgba(11,13,16,.45);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:600}
  .scrim.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--paper);z-index:610;transform:translateX(100%);transition:transform .22s cubic-bezier(.3,.7,.3,1);display:flex;flex-direction:column}
  .drawer.open{transform:translateX(0)}
  .drawer-head{padding:18px 22px;border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between}
  .drawer-head h2{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:800;letter-spacing:-0.01em}
  .drawer-head button{border:0;background:transparent;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--muted);padding:0 4px}
  .drawer-body{padding:6px 22px 22px;overflow-y:auto;flex:1}
  .fgroup{padding:18px 0;border-bottom:1px solid var(--hair)}
  .fgroup:last-child{border-bottom:0}
  .flabel{font-family:'Barlow Condensed',sans-serif;font-size:0.76rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:11px}
  .opts{display:flex;flex-wrap:wrap;gap:7px}
  .opt{border:1px solid var(--hair);background:var(--paper);border-radius:100px;padding:7px 15px;cursor:pointer;font-family:'Barlow',sans-serif;font-size:0.87rem;color:var(--ink-2)}
  .opt:hover{border-color:var(--muted-2)}
  .opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
  .drawer-foot{padding:16px 22px;border-top:1px solid var(--hair);display:flex;gap:10px}
  .drawer-foot button{flex:1;padding:13px 0;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:0.95rem;letter-spacing:0.08em;text-transform:uppercase}
  .btn-clear{background:transparent;border:1px solid var(--hair);color:var(--ink-2)}
  .btn-apply{background:var(--ink);border:1px solid var(--ink);color:#fff}

  /* ── PAY PANEL (range bar) ── */
  .paypanel{margin:44px 0 0;border-top:2px solid var(--ink);padding-top:26px}
  .paypanel h2{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.01em;margin-bottom:4px}
  .paypanel .note{color:var(--muted);font-size:0.88rem;margin-bottom:26px;max-width:56ch}
  .range{position:relative;padding:0 0 6px}
  .rangebar{height:10px;background:var(--wash);border:1px solid var(--hair);position:relative}
  .rangefill{position:absolute;top:-1px;bottom:-1px;background:var(--ink)}
  .rangemid{position:absolute;top:-7px;bottom:-7px;width:3px;background:var(--signal)}
  .rangelabels{display:flex;justify-content:space-between;margin-top:14px}
  .rl{font-family:'Barlow Condensed',sans-serif}
  .rl .k{font-size:0.8rem;font-weight:600;color:var(--muted);font-family:'Barlow',sans-serif}
  .rl .v{font-size:1.7rem;font-weight:800;letter-spacing:-0.02em;line-height:1.1}
  .rl.mid{text-align:center}
  .rl.mid .v{color:var(--ink)}
  .rl.mid .k{color:var(--ink-2);font-weight:600}
  .rl.hi{text-align:right}
  @media(max-width:640px){.rl .v{font-size:1.35rem}}
  :focus-visible{outline:2px solid var(--signal);outline-offset:2px}

  /* ── FOOTER ── */
  footer { padding: 26px 20px; text-align: center; background: var(--navy-deep); border-top: 3px solid var(--charcoal); margin-top: 12px; }
  .footer-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--white); margin-bottom: 6px; }
  .footer-logo span { color: var(--gold-muted); }
  footer p { font-size: 0.72rem; color: rgba(255,255,255,0.45); line-height: 1.6; }
  footer a { color: rgba(255,255,255,0.45); text-decoration: underline; }
  .footer-links { margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 2px; font-size: 0.72rem; }
  .footer-links a { color: rgba(255,255,255,0.5); text-decoration: none; }
  .footer-links a:hover { text-decoration: underline; }
  .footer-links span { color: rgba(255,255,255,0.2); }

  /* ── MODALS (shared) ── */
  .modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,8,20,0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: flex-end; justify-content: center; }
  .modal-overlay.open { display: flex; }
  @media (min-width: 640px) { .modal-overlay { align-items: center; } }
  .modal-sheet { background: var(--white); width: 100%; max-width: 460px; border-radius: 22px 22px 0 0; max-height: 92dvh; overflow-y: auto; position: relative; padding: 26px 22px 24px; }
  @media (min-width: 640px) { .modal-sheet { border-radius: 18px; } }
  .modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--off-white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--charcoal); }
  .modal-close:hover { background: var(--border); }
  .modal-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .modal-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--navy-deep); line-height: 1.08; margin-bottom: 5px; }
  .modal-sub { font-size: 0.86rem; color: var(--muted); margin-bottom: 18px; }
  .modal-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 1rem; font-family: 'Barlow', sans-serif; color: var(--charcoal); background: var(--off-white); outline: none; margin-bottom: 10px; -webkit-appearance: none; }
  .modal-input:focus { border-color: var(--navy-light); background: #fff; box-shadow: 0 0 0 3px rgba(0,53,102,0.08); }
  .modal-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; }
  .modal-check input { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; margin-top: 3px; }
  .modal-check span { font-size: 0.84rem; color: var(--charcoal); }
  .modal-err { display: none; color: #c0392b; font-size: 0.8rem; margin-bottom: 10px; }
  .modal-btn { width: 100%; padding: 14px; background: var(--gold); color: var(--navy-deep); font-family: 'Barlow Condensed', sans-serif; font-size: 1.08rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border: none; border-radius: 10px; cursor: pointer; transition: background 0.15s; }
  .modal-btn:hover { background: var(--gold-hover); }
  .modal-fine { font-size: 0.68rem; color: var(--muted); line-height: 1.5; margin-top: 11px; text-align: center; }
  .modal-fine a { color: var(--muted); }
  .gate-perk { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--charcoal); padding: 7px 0; }
  .gate-perk svg { flex-shrink: 0; }
  .gate-perks { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0; margin-bottom: 16px; }

  /* success */
  .success-wrap { text-align: center; padding: 12px 0 6px; }
  .success-ic { width: 64px; height: 64px; margin: 0 auto 16px; }
  .success-wrap h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--navy-deep); margin-bottom: 6px; }
  .success-wrap p { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; }

  /* ==========================================================================
     HUB CONTENT (below the board): end rule, alert band, and the researched
     content sections — pay tables, employers, ladders, prose, FAQ, related.
     Ported from the hub design mock onto the board tokens. All server-rendered
     (crawlable): see DG2. Scoped under .hubc so it can't leak into the board.
     ========================================================================== */
  .hub-endrule { max-width:1180px; margin:2px auto 0; padding:2px 20px 26px; display:flex; align-items:center; gap:14px; }
  .hub-endrule::before, .hub-endrule::after { content:""; flex:1; height:1px; background:var(--rule); }
  .hub-endrule span { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:0.82rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; }

  /* Thin gold band: one centered line + a contrasting navy CTA, leading into the pay
     section below. Dark text on gold for AA contrast; button is navy (not gold-on-gold). */
  .hub-alertband { background:var(--signal); color:var(--navy-deep); padding:16px 20px; }
  .hub-alertband .in { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px 22px; flex-wrap:wrap; text-align:center; }
  .hub-alertband h2 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.3rem; line-height:1.15; letter-spacing:-0.005em; color:var(--navy-deep); }
  .hub-alertband h2 em { font-style:normal; color:var(--navy-deep); }
  .hub-alertband .abtn { height:42px; padding:0 26px; cursor:pointer; border:0; background:var(--navy-deep); color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:0.9rem; letter-spacing:0.07em; text-transform:uppercase; }
  .hub-alertband .abtn:hover { background:var(--navy-mid); }

  .hubc { background:var(--paper); padding:36px 0 8px; }
  .hubc .in { max-width:1180px; margin:0 auto; padding:0 20px; }
  .hubc .sec { padding:26px 0; border-top:1px solid var(--rule); }
  .hubc .sec:first-child { border-top:0; padding-top:6px; }
  .hubc .sec h2 { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.5rem; line-height:1.14; letter-spacing:-0.012em; color:var(--navy-mid); margin-bottom:10px; }
  .hubc .sec h3 { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.08rem; letter-spacing:0.01em; color:var(--navy-mid); margin:18px 0 6px; }
  .hubc .sec p { margin-bottom:11px; max-width:68ch; color:var(--ink-2); }
  .hubc .lede { color:var(--muted); font-size:0.9rem; margin-bottom:16px; }

  .hubc .dtable { width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:0.92rem; }
  .hubc .dtable th { text-align:left; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:0 10px 8px 0; border-bottom:2px solid var(--ink); }
  .hubc .dtable th:last-child, .hubc .dtable td:last-child { text-align:right; padding-right:0; }
  .hubc .dtable td { padding:11px 10px 11px 0; border-bottom:1px solid var(--rule); color:var(--ink-2); }
  .hubc .dtable td b { font-family:'Barlow Condensed',sans-serif; font-size:1.06rem; font-weight:800; }
  .hubc .dtable tr:last-child td { border-bottom:0; }
  .hubc .dtable .sub { display:block; color:var(--muted); font-size:0.82rem; }

  .hubc .ladder { list-style:none; counter-reset:s; margin-top:4px; padding:0; }
  .hubc .ladder li { counter-increment:s; position:relative; padding:0 0 18px 40px; }
  .hubc .ladder li::before { content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:0.92rem; color:var(--muted-2); letter-spacing:0.04em; }
  .hubc .ladder li::after { content:""; position:absolute; left:11px; top:22px; bottom:2px; width:1px; background:var(--rule); }
  .hubc .ladder li:last-child { padding-bottom:0; }
  .hubc .ladder li:last-child::after { display:none; }
  .hubc .ladder b { font-family:'Barlow Condensed',sans-serif; font-size:1.06rem; font-weight:700; display:block; color:var(--navy-mid); }
  .hubc .ladder span { color:var(--muted); font-size:0.9rem; }

  .hubc .faq details { border-bottom:1px solid var(--rule); }
  .hubc .faq details:first-of-type { border-top:1px solid var(--rule); }
  .hubc .faq summary { cursor:pointer; list-style:none; padding:15px 34px 15px 0; position:relative; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.1rem; color:var(--navy-mid); }
  .hubc .faq summary::-webkit-details-marker { display:none; }
  .hubc .faq summary::after { content:""; position:absolute; right:6px; top:22px; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; }
  .hubc .faq details[open] summary::after { transform:rotate(-135deg); top:25px; }
  .hubc .faq .ans { padding:0 0 16px; color:var(--ink-2); max-width:68ch; }
  .hubc .faq .ans p { margin-bottom:9px; }

  .hubc .related { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
  .hubc .related a { text-decoration:none; color:var(--ink-2); border:1px solid var(--rule); padding:8px 14px; font-size:0.9rem; font-family:'Barlow Condensed',sans-serif; font-weight:700; }
  .hubc .related a:hover { border-color:var(--ink); color:var(--ink); }

  @media (min-width:700px) {
    .hub-alertband { padding:18px 20px; }
    .hub-alertband h2 { font-size:1.5rem; }
    .hubc { padding:44px 0 12px; }
    .hubc .sec h2 { font-size:1.7rem; }
  }

  /* ── HUB CONTEXT NOTICE (D: shown when vertical/metro leaves the baked context) ── */
  .hub-ctx-notice{background:var(--wash);border:1px solid var(--rule);border-left:3px solid var(--signal);padding:14px 16px;margin:0 0 6px;font-size:0.92rem;line-height:1.5;color:var(--ink-2)}
  .hub-ctx-notice a{color:var(--navy-mid);font-weight:600;text-decoration:underline;text-underline-offset:2px}

  /* ── JOB DETAIL OVERLAY ── full-screen sheet on mobile, centered modal at 760px+.
     Flex-centered scrim (clicks on the scrim close; clicks inside the sheet do not). */
  .jscrim{position:fixed;inset:0;background:rgba(11,13,16,.55);opacity:0;pointer-events:none;transition:opacity .18s;z-index:800;display:flex;align-items:flex-end;justify-content:center}
  .jscrim.open{opacity:1;pointer-events:auto}
  .jsheet{position:relative;z-index:810;width:100%;height:100%;background:var(--paper);transform:translateY(100%);transition:transform .24s cubic-bezier(.3,.7,.3,1);display:flex;flex-direction:column}
  .jscrim.open .jsheet{transform:translateY(0)}
  .jhead{padding:14px 16px;border-bottom:1px solid var(--rule);display:flex;align-items:flex-start;gap:12px;flex:0 0 auto}
  .jhead .jh-t{flex:1;min-width:0}
  .jhead h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.42rem;line-height:1.14;letter-spacing:-0.01em;color:var(--navy-mid)}
  .jhead .jh-s{font-size:0.88rem;color:var(--muted);margin-top:3px}
  .jhead .jh-s b{color:var(--ink-2);font-weight:600}
  .jclose{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--rule);background:transparent;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--muted);display:flex;align-items:center;justify-content:center}
  .jclose:hover{border-color:var(--ink);color:var(--ink)}
  .jbody{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
  .jmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:14px}
  .jpay{font-family:'Barlow Condensed',sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:-0.02em}
  .jpay i{font-style:normal;font-family:'Barlow',sans-serif;font-size:0.82rem;font-weight:500;color:var(--muted);margin-left:6px}
  .jtags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px}
  .jsub{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
  .jbody ul{margin:0 0 6px 18px}
  .jbody li{margin-bottom:5px;font-size:0.92rem;line-height:1.5;color:var(--ink-2)}
  .jdesc{font-size:0.92rem;line-height:1.6;color:var(--ink-2)}
  .jdesc p{margin-bottom:10px}
  .jsrc{font-size:0.78rem;color:var(--muted-2);text-align:center;padding:0 16px 12px}
  .jfoot{flex:0 0 auto;padding:12px 16px;border-top:1px solid var(--rule);display:flex;gap:9px;background:var(--paper)}
  .jfoot a,.jfoot button{flex:1;padding:14px 0;cursor:pointer;text-align:center;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:0.95rem;letter-spacing:0.07em;text-transform:uppercase}
  .jback{background:transparent;border:1px solid var(--rule);color:var(--ink-2)}
  .jback:hover{border-color:var(--ink);color:var(--ink)}
  .japply{background:var(--signal);border:1px solid var(--signal);color:var(--ink)}
  .japply:hover{background:var(--ink);border-color:var(--ink);color:var(--signal)}
  body.jlock{overflow:hidden}
  @media(min-width:760px){
    .jscrim{align-items:center;padding:24px}
    .jsheet{width:min(680px,100%);height:auto;max-height:86vh;transform:translateY(14px);opacity:0;transition:opacity .16s ease,transform .16s ease;box-shadow:0 24px 70px rgba(0,0,0,.3)}
    .jscrim.open .jsheet{transform:translateY(0);opacity:1}
    .jhead{padding:18px 22px}
    .jhead h2{font-size:1.62rem}
    .jbody{padding:20px 22px}
    .jfoot{padding:14px 22px}
    .jfoot a,.jfoot button{flex:0 1 auto;padding:14px 34px}
    .jfoot .japply{flex:1}
  }