/* ============================================================
   homepage.css — WorkDirectory.ca homepage
   ------------------------------------------------------------
   Load AFTER tokens.css. Scoped to body.page-home so it cannot
   leak into other pages. Uses ONLY tokens from tokens.css —
   no inline pixel values, no one-off colors.
   ============================================================ *//* ============================================================
     homepage.css — scoped to body.page-home
     Uses ONLY tokens from tokens.css. No new colors, no new sizes.
     ============================================================ */body.page-home * {box-sizing:border-box}html, body.page-home body {margin:0;padding:0}body.page-home {
    background: var(--surface-0);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-size: var(--size-md);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }body.page-home a {color:inherit;text-decoration:none}body.page-home button {font:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit}body.page-home h1, body.page-home h2, body.page-home h3 {margin:0}/* Reset for any anchor that's a button — beats the inherit rule above */body.page-home a.btn, body.page-home button.btn {text-decoration:none}body.page-home .container {max-width:1240px;margin:0 auto;padding:0 var(--space-6)}/* ── Header ── */body.page-home .header {padding:var(--space-4) 0;border-bottom:1px solid var(--line-1);background:var(--surface-0)}body.page-home .header .row {display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-6);align-items:center}body.page-home .brand {display:flex;flex-direction:column;gap:2px}body.page-home .brand .wordmark {font-size:22px;font-weight:var(--weight-bold);letter-spacing:-0.02em;line-height:1}body.page-home .brand .wordmark .work {color:var(--brand-green)}body.page-home .brand .wordmark .dir {color:var(--brand-orange)}body.page-home .brand .wordmark .ca {color:var(--brand-green)}body.page-home .brand .tag {font-size:var(--size-xs);color:var(--ink-3);display:flex;align-items:center;gap:6px;letter-spacing:0.02em}body.page-home .brand .flag {display:inline-block;width:14px;height:9px;background:linear-gradient(to right,#D52B1E 0 25%, #fff 25% 75%, #D52B1E 75% 100%);position:relative;border-radius:1px}body.page-home .brand .flag::after {content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, #D52B1E 0 1.5px, transparent 2px)}body.page-home .header-mid {display:flex;justify-content:center}body.page-home .usa-link {
    display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
    border:1px solid var(--line-1);background:var(--surface-1);
    border-radius:var(--radius-sm);font-size:var(--size-xs);color:var(--ink-2);
    transition:background var(--duration) var(--easing)
  }body.page-home .usa-link:hover {background:var(--surface-0)}body.page-home .usa-flag {width:16px;height:10px;background:repeating-linear-gradient(to bottom, #B22 0 1.2px, #fff 1.2px 2.4px);border-radius:1px;position:relative}body.page-home .usa-flag::before {content:"";position:absolute;top:0;left:0;width:7px;height:5.5px;background:#234}body.page-home .header-right {display:flex;align-items:center;gap:var(--space-3)}body.page-home .btn-text {color:var(--ink-2);font-size:var(--size-sm);font-weight:var(--weight-medium);padding:var(--space-2) 0}body.page-home .btn-text:hover {color:var(--ink-1)}/* ── System buttons (mirrors design-system) ── *//* Scoped under body.page-home so they beat the generic anchor color rule. */body.page-home .btn {
    display:inline-flex;align-items:center;gap:var(--space-2);
    padding:9px 16px;border-radius:var(--radius-sm);
    font-size:var(--size-sm);font-weight:var(--weight-medium);
    transition:background var(--duration) var(--easing), border-color var(--duration) var(--easing), color var(--duration) var(--easing);
    border:1px solid transparent;
    line-height:1.2;
  }body.page-home .btn-primary, body.page-home a.btn-primary {background:var(--brand-orange);color:#fff;border-color:var(--brand-orange)}body.page-home .btn-primary:hover, body.page-home a.btn-primary:hover {background:var(--brand-orange-hover);color:#fff;border-color:var(--brand-orange-hover)}body.page-home .btn-secondary, body.page-home a.btn-secondary {background:var(--brand-green);color:#fff;border-color:var(--brand-green)}body.page-home .btn-secondary:hover, body.page-home a.btn-secondary:hover {background:var(--brand-green-deep);color:#fff;border-color:var(--brand-green-deep)}body.page-home .btn-ghost, body.page-home a.btn-ghost {background:var(--surface-0);color:var(--ink-1);border-color:var(--line-2)}body.page-home .btn-ghost:hover, body.page-home a.btn-ghost:hover {background:var(--surface-1);color:var(--ink-1)}/* ── Nav ── */body.page-home .nav {border-bottom:1px solid var(--line-1);background:var(--surface-0)}body.page-home .nav ul {list-style:none;margin:0;padding:6px 0;display:flex;gap:2px}body.page-home .nav a {
    display:inline-flex;align-items:center;gap:6px;
    padding:var(--space-2) var(--space-3);
    font-size:var(--size-sm);font-weight:var(--weight-medium);
    color:var(--ink-2);border-radius:var(--radius-sm);
    transition:background var(--duration) var(--easing), color var(--duration) var(--easing);
  }body.page-home .nav a:hover {background:var(--surface-1);color:var(--ink-1)}body.page-home .nav a.active {background:var(--brand-green-tint);color:var(--brand-green)}body.page-home .nav .chev {font-size:9px;opacity:.6}/* ── Hero ── */body.page-home .hero {
    background: linear-gradient(180deg, var(--brand-green) 0%, var(--brand-green-deep) 100%);
    color: #fff;
    padding: var(--space-16) 0 var(--space-12);
    position:relative;overflow:hidden;
  }body.page-home .hero::after {
    content:"";position:absolute;inset:0;pointer-events:none;
    background: radial-gradient(800px 400px at 95% 100%, rgba(255,255,255,0.06), transparent 60%);
  }body.page-home .hero .container {position:relative;z-index:1}body.page-home .hero .eyebrow {
    display:inline-flex;align-items:center;gap:var(--space-2);
    padding:5px 12px;border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);
    color:#fff;font-size:var(--size-xs);font-weight:var(--weight-medium);
    margin-bottom:var(--space-4);letter-spacing:0.02em
  }body.page-home .hero .eyebrow .led {width:6px;height:6px;border-radius:50%;background:#9DE39B;box-shadow:0 0 0 3px rgba(157,227,155,0.25)}body.page-home .hero h1 {
    font-size:var(--size-2xl);
    font-weight:var(--weight-bold);
    letter-spacing:-0.025em;line-height:1.05;
    color:#fff;max-width:18ch;
  }body.page-home .hero .sub {
    margin-top:var(--space-4);font-size:var(--size-lg);
    color:rgba(255,255,255,0.82);max-width:52ch;line-height:1.5
  }/* ── Search composite (from the design system) ── */body.page-home .search-card {
    margin-top: var(--space-8);
    background:var(--surface-0);
    border-radius:var(--radius-sm);
    padding:6px;
    display:grid;
    grid-template-columns:1.4fr 1fr auto;
    align-items:stretch;
    box-shadow:var(--shadow-2);
    max-width:780px;
  }body.page-home .search-card .field {
    display:grid;gap:2px;
    padding:10px 16px;border-right:1px solid var(--line-1)
  }body.page-home .search-card .field:nth-of-type(2) {border-right:0}body.page-home .search-card .field label {
    font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--ink-3);font-weight:var(--weight-medium)
  }body.page-home .search-card .field input, body.page-home .search-card .field select {
    border:0;background:transparent;outline:none;font:inherit;
    font-size:var(--size-md);color:var(--ink-1);padding:2px 0 0;width:100%;
    appearance:none;-webkit-appearance:none
  }body.page-home .search-card .field input::placeholder {color:var(--ink-3)}body.page-home .search-card .field:focus-within label {color:var(--brand-green)}/* Styled select — matches the input next to it, custom chevron */body.page-home .search-card .field.field-select {position:relative}body.page-home .search-card .field.field-select::after {
    content:"";position:absolute;right:18px;top:50%;
    width:8px;height:8px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);
    transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:border-color var(--duration) var(--easing)
  }body.page-home .search-card .field.field-select:focus-within::after {border-color:var(--brand-green)}body.page-home .search-card .field.field-select select {
    cursor:pointer;padding-right:24px;color:var(--ink-1)
  }body.page-home .search-card .field.field-select select:invalid, body.page-home .search-card .field.field-select select option[value=""] {color:var(--ink-3)}body.page-home .search-card button.submit {
    margin:4px;padding:0 22px;background:var(--brand-orange);color:#fff;
    border-radius:var(--radius-sm);
    font-weight:var(--weight-medium);font-size:var(--size-sm);
    display:inline-flex;align-items:center;gap:var(--space-2)
  }body.page-home .search-card button.submit:hover {background:var(--brand-orange-hover)}/* ── Active jobs strip ── */body.page-home .active-strip {
    margin-top:var(--space-4);
    display:flex;justify-content:space-between;align-items:center;
    color:rgba(255,255,255,0.78);font-size:var(--size-sm);
    gap:var(--space-3) var(--space-4);flex-wrap:wrap
  }body.page-home .active-strip .chip {
    display:inline-flex;align-items:center;gap:var(--space-2);
    padding:5px 12px;border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);
    color:#fff;font-weight:var(--weight-medium);font-size:var(--size-xs)
  }body.page-home .active-strip .chip b {font-variant-numeric:tabular-nums;font-weight:var(--weight-bold)}body.page-home .active-strip .links {display:flex;gap:var(--space-4);flex-wrap:wrap}body.page-home .active-strip .links a:hover {color:#fff;text-decoration:underline;text-underline-offset:3px}/* ── Tabs control ── *//* Sit cleanly on the white surface below the hero, not torn across the seam. *//* Scoped under body.page-home so .tabs button beats the generic button reset. */body.page-home .tabs-wrap {margin-top:calc(var(--space-6) * -1);position:relative;z-index:2;display:flex;justify-content:center}body.page-home .tabs {
    display:inline-flex;gap:2px;padding:4px;
    background:var(--surface-0);border:1px solid var(--line-1);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-2);
  }body.page-home .tabs button {
    padding:var(--space-2) var(--space-4);border-radius:3px;
    font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--ink-2);
    transition:background var(--duration) var(--easing), color var(--duration) var(--easing)
  }body.page-home .tabs button.on {background:var(--ink-1);color:#fff}body.page-home .tabs button:not(.on):hover {color:var(--ink-1);background:var(--surface-1)}/* ── Section header ── */body.page-home .section {padding:var(--space-16) 0 var(--space-12)}body.page-home .section-head {margin-bottom:var(--space-8)}body.page-home .eyebrow-label {
    font-size:var(--size-xs);text-transform:uppercase;letter-spacing:0.1em;
    color:var(--ink-3);font-weight:var(--weight-medium);margin-bottom:var(--space-2)
  }body.page-home .section-title {
    font-size:var(--size-xl);font-weight:var(--weight-bold);letter-spacing:-0.015em;
    line-height:var(--leading-tight);color:var(--ink-1)
  }body.page-home .section-sub {
    margin-top:var(--space-3);display:flex;justify-content:space-between;
    align-items:flex-end;gap:var(--space-4);flex-wrap:wrap
  }body.page-home .section-sub p {margin:0;color:var(--ink-2);font-size:var(--size-md);max-width:50ch}body.page-home .section-sub .controls {display:flex;gap:var(--space-4);font-size:var(--size-sm);color:var(--ink-2)}body.page-home .section-sub .controls a {cursor:pointer}body.page-home .section-sub .controls a:hover {color:var(--ink-1);text-decoration:underline;text-underline-offset:3px}/* ── List rows (from system) ── */body.page-home .employers {display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;padding:0;margin:0;column-gap:var(--space-8)}body.page-home .employers li {margin:0}body.page-home .employers li a {
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-3);
    padding:var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom:1px solid var(--line-1);
    font-size:var(--size-sm);color:var(--ink-1);
    transition:background var(--duration) var(--easing), color var(--duration) var(--easing)
  }body.page-home .employers li a:hover {background:var(--surface-1);color:var(--brand-green)}body.page-home .employers .name {font-weight:var(--weight-medium);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}body.page-home .employers .count {color:var(--ink-3);font-size:var(--size-xs);font-variant-numeric:tabular-nums;flex-shrink:0}body.page-home .more-row {
    margin-top:var(--space-8);
    display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;
    padding-top:var(--space-6);border-top:1px solid var(--line-1)
  }/* ── Footer ── */body.page-home footer {
    background:var(--surface-0);
    border-top:1px solid var(--line-1);
    padding:var(--space-16) 0 var(--space-6);
    color:var(--ink-2);font-size:var(--size-sm)
  }body.page-home footer .cols {
    display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--space-8);
    padding-bottom:var(--space-8);border-bottom:1px solid var(--line-1)
  }body.page-home footer h4 {
    font-size:var(--size-xs);text-transform:uppercase;letter-spacing:0.08em;
    color:var(--ink-3);font-weight:var(--weight-medium);margin:0 0 var(--space-3)
  }body.page-home footer ul {list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}body.page-home footer a {color:var(--ink-2)}body.page-home footer a:hover {color:var(--ink-1);text-decoration:underline;text-underline-offset:3px}body.page-home footer .foot-brand {font-size:20px;font-weight:var(--weight-bold);letter-spacing:-0.02em;margin-bottom:var(--space-2)}body.page-home footer .foot-brand .work {color:var(--brand-green)}body.page-home footer .foot-brand .dir {color:var(--brand-orange)}body.page-home footer .foot-brand .ca {color:var(--brand-green)}body.page-home footer .foot-tag {color:var(--ink-3);max-width:300px;line-height:1.55}body.page-home footer .foot-bottom {
    margin-top:var(--space-6);display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:var(--space-3);color:var(--ink-3);font-size:var(--size-xs)
  }/* Responsive */@media (max-width:980px){body.page-home .header .row {grid-template-columns:1fr;gap:var(--space-3)}body.page-home .header-mid {justify-content:flex-start}body.page-home .header-right {justify-content:flex-start;flex-wrap:wrap}body.page-home .employers {grid-template-columns:1fr 1fr;column-gap:var(--space-4)}body.page-home footer .cols {grid-template-columns:1fr 1fr}body.page-home .search-card {grid-template-columns:1fr;padding:var(--space-2)}body.page-home .search-card .field {border-right:0;border-bottom:1px solid var(--line-1)}body.page-home .search-card button.submit {margin:var(--space-2);justify-content:center}body.page-home .hero h1 {font-size:28px}body.page-home .active-strip {align-items:flex-start}}/* System badge */body.page-home .system-badge {
    position:fixed;left:18px;bottom:18px;z-index:80;
    background:var(--ink-1);color:#fff;
    padding:8px 14px;border-radius:var(--radius-pill);
    font-size:var(--size-xs);font-weight:var(--weight-medium);
    display:inline-flex;align-items:center;gap:var(--space-2);
    box-shadow:0 10px 24px -10px rgba(0,0,0,0.4)
  }body.page-home .system-badge .d {width:6px;height:6px;border-radius:50%;background:var(--status-success)}body.page-home .system-badge a {color:#9DE39B;text-decoration:underline;text-underline-offset:2px}