/* HireFi design system — tokens, themes, primitives, components.
   Page-specific rules stay inline in each page. */

:root {
  /* Light is the only theme. The page canvas is the approved paper tone. The
     raised surfaces and rules are mixed from the brand navy instead of picked
     as fresh greys, so banded sections read blue rather than teal-grey — and
     no new hex enters the palette. */
  --bg: #F4F8F8;
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, #00183E 9%, #ffffff);
  --text: #00183E;
  --text-dim: #5e6c82;
  --accent: #00A99E;
  --accent-bright: #008e85;
  --accent-ink: #007a72;
  --on-accent: #00183E;
  --line: color-mix(in srgb, #00183E 15%, #ffffff);
  /* Role chips sit flat against the card until hovered, then fill with the
     primary-button colour. Hover state reuses the button tokens so the two
     stay in step — one colour decision, not two that drift. */
  --role-chip: var(--surface);
  --role-chip-border: var(--line);
  --role-chip-text: var(--text);
  --role-chip-hover: var(--accent);
  --role-chip-hover-text: var(--on-accent);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --max: 1180px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 22px 50px -28px rgba(0, 24, 62, .35);
}

/* Alternating page bands. A blue band redefines the theme tokens for its own
   subtree, so every component inside it flips wholesale. That is deliberately
   not a set of per-element colour overrides: nothing can opt out and quietly
   leave dark text on a dark panel. */
.band-blue {
  --bg: #00183E;
  --surface: color-mix(in srgb, #ffffff 9%, #00183E);
  --surface-2: color-mix(in srgb, #ffffff 15%, #00183E);
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, .74);
  --accent-bright: #1fc8bb;
  --accent-ink: #1fc8bb;
  --line: rgba(255, 255, 255, .18);
  --shadow: 0 22px 50px -28px rgba(0, 17, 44, .8);
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
a { color: inherit; text-decoration: none }
img, video { max-width: 100%; display: block }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px }

/* Display type — aggressive letter spacing and scale. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02 }
h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); letter-spacing: -.04em }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.03em }
h3 { font-size: 1.25rem; letter-spacing: -.01em }
h1 .accent, h2 .accent { color: var(--accent-bright); font-weight: 700 }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

/* Pill CTA */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  border-radius: 999px;
  padding: .95em 1.7em;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent) }
.btn-primary:hover { background: var(--accent-bright) }
.btn-ghost { border-color: var(--line); color: var(--text) }
.btn .arw { transition: transform .2s ease }
.btn:hover .arw { transform: translateX(3px) }

/* Roster texture — horizontal hairlines, not Huzzle's square grid. */
.roster-bg { position: relative; isolation: isolate }
.roster-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0,169,158,.04) 0 1px,
    transparent 1px 96px
  );
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent) 4%, transparent) 0 1px,
    transparent 1px 96px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000000 55%, transparent);
}
.roster-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    60% 45% at 50% 22%,
    rgba(0,169,158,.13),
    transparent 70%
  );
  background: radial-gradient(
    60% 45% at 50% 22%,
    color-mix(in srgb, var(--accent) 13%, transparent),
    transparent 70%
  );
}

/* Bench card — real portrait, no match score. */
.bench-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.bench-card .portrait {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
}
.bench-card .bc-name { font-weight: 600; font-family: var(--display) }
.bench-card .bc-role { color: var(--text-dim); font-size: .9rem }
.payroll-chip {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(0,169,158,.14);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px;
  padding: .45em .8em;
  white-space: nowrap;
}

/* Counter strip — people, never funnel volume. */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid var(--line); padding-top: 18px }
.counters .num { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700 }
.counters .lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim) }
@media (max-width: 720px) { .counters { grid-template-columns: repeat(2, 1fr) } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease }
.reveal.in { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .reveal { opacity: 1; transform: none }
}