/* Trusted Recruiter Alliance - site styles. Brand: Roboto, charcoal #24282B, gold #A8782C. */
:root {
  color-scheme: light;
  --charcoal: #24282B;
  --charcoal-2: #3A4045;
  --gold: #A8782C;
  --gold-deep: #8C6524;
  --gold-light: #C79A47;

  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #24282B;
  --ink-soft: #4A5055;
  --muted: #6B7074;
  --rule: #D8D5CF;
  --rule-soft: #E8E5DF;
  --accent: #A8782C;
  --accent-ink: #8C6524;
  --tint: #F3EEE4;

  --band: #24282B;
  --band-ink: #FAFAF8;
  --band-muted: #B9BDBF;
  --band-rule: #3A4045;

  --sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --max: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161819;
    --surface: #1E2123;
    --ink: #ECEAE5;
    --ink-soft: #C9C7C2;
    --muted: #9A9FA2;
    --rule: #33383C;
    --rule-soft: #2A2E31;
    --accent: #C79A47;
    --accent-ink: #D8AE5E;
    --tint: #262320;
    --band: #0F1112;
    --band-rule: #2A2E31;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161819;
  --surface: #1E2123;
  --ink: #ECEAE5;
  --ink-soft: #C9C7C2;
  --muted: #9A9FA2;
  --rule: #33383C;
  --rule-soft: #2A2E31;
  --accent: #C79A47;
  --accent-ink: #D8AE5E;
  --tint: #262320;
  --band: #0F1112;
  --band-rule: #2A2E31;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.15; }
p { margin: 0; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink);
}
.lede { font-size: 19px; color: var(--ink-soft); max-width: 62ch; }
.section { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--rule); }
.section-head { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -0.01em; }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; }
.brand img { height: 44px; width: auto; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .logo-light { display: none; } :root:not([data-theme="light"]) .brand .logo-dark { display: block; } }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
.nav { display: flex; gap: 26px; align-items: center; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--accent-ink); }
.nav .btn { padding: 9px 16px; font-size: 14px; }
@media (max-width: 820px) { .nav a:not(.btn) { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 3px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-decoration: none;
  background: var(--gold); color: #FFFFFF; border: 1px solid var(--gold);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn.ghost { background: transparent; color: var(--band-ink); border-color: #5A6166; }
.btn.ghost:hover { border-color: var(--gold-light); color: #FFFFFF; }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.outline:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Hero */
.hero { background: var(--band); color: var(--band-ink); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px);
  align-items: center; padding-block: clamp(56px, 9vw, 112px);
}
.hero .eyebrow { color: var(--gold-light); }
.hero h1 { font-size: clamp(38px, 5.6vw, 66px); font-weight: 900; letter-spacing: -0.02em; margin-top: 18px; }
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero p.lede { color: var(--band-muted); margin-top: 22px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-seal { justify-self: center; width: min(100%, 340px); }
.founders-strip {
  border-top: 1px solid var(--band-rule);
}
.founders-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px;
  padding-block: 22px; font-size: 15px; color: var(--band-muted);
}
.founders-strip a { color: var(--band-ink); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; border-bottom: 1px solid transparent; }
.founders-strip a:hover { border-bottom-color: var(--gold-light); }
.founders-strip .label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); }
@media (max-width: 820px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-seal { width: 180px; justify-self: start; order: -1; }
}

/* Foundation */
.foundation { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.foundation .body { display: grid; gap: 18px; color: var(--ink-soft); max-width: 62ch; }
.commitments { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.commitments li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.commitments .check { width: 22px; height: 22px; margin-top: 3px; color: var(--accent); }
.commitments b { display: block; font-weight: 700; color: var(--ink); }
.commitments span { color: var(--muted); font-size: 15px; }
@media (max-width: 820px) { .foundation { grid-template-columns: 1fr; } }

/* Roles */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--surface); }
.role { padding: 30px 28px; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--rule); }
.role:last-child { border-right: 0; }
.role .code { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.role h3 { font-size: 24px; font-weight: 700; }
.role p { color: var(--ink-soft); font-size: 16px; }
.role .applies { word-spacing: 0.35em; font-family: var(--mono); font-size: 12.5px; color: var(--accent-ink); padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.combined { margin-top: 20px; padding: 18px 22px; background: var(--tint); font-size: 16px; color: var(--ink-soft); }
.combined b { color: var(--ink); }
@media (max-width: 820px) {
  .roles { grid-template-columns: 1fr; }
  .role { border-right: 0; border-bottom: 1px solid var(--rule); }
  .role:last-child { border-bottom: 0; }
}

/* Matrix */
.matrix-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.matrix { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15.5px; }
.matrix th, .matrix td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.matrix thead th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--ink); background: var(--surface);
}
.matrix thead th.role-col { text-align: center; width: 116px; color: var(--ink); }
.matrix .std-name { font-size: 16px; }
.matrix tbody tr:last-child td, .matrix tbody tr:last-child th { border-bottom: 0; }
.matrix .std-code { font-family: var(--mono); font-size: 13px; color: var(--accent-ink); white-space: nowrap; width: 64px; font-weight: 500; }
.matrix tbody th { font-weight: 400; }
.matrix .std-name { font-weight: 700; color: var(--ink); display: block; }
.matrix .std-line { color: var(--muted); font-size: 14.5px; }
.matrix td.mark { text-align: center; vertical-align: middle; }
.matrix td.mark svg { width: 22px; height: 22px; color: var(--accent); display: inline-block; }
.matrix td.mark .none { display: inline-block; width: 12px; height: 1px; background: var(--rule); vertical-align: middle; }
.matrix tbody tr:hover { background: var(--tint); }
.matrix-note { margin-top: 16px; font-size: 14.5px; color: var(--muted); max-width: 70ch; }

/* Duty split */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.split > div { padding: 26px 28px 28px 0; }
.split > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.split h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 16px; }
.split ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.split li { padding-left: 18px; position: relative; color: var(--ink-soft); }
.split li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--accent); }
.split-callout { margin-top: 28px; font-size: 20px; font-weight: 500; max-width: 60ch; }
.split-callout strong { color: var(--accent-ink); font-weight: 700; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split > div { padding: 22px 0; }
  .split > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* Steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.steps li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.steps h3 { font-size: 19px; font-weight: 700; }
.steps p { color: var(--ink-soft); font-size: 15.5px; }
.steps-note { margin-top: 28px; color: var(--muted); font-size: 15px; max-width: 70ch; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Value band */
.value { background: var(--band); color: var(--band-ink); border-top: 0; }
.value .section-head h2 { color: var(--band-ink); }
.value .eyebrow { color: var(--gold-light); }
.value .lede { color: var(--band-muted); }
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--band-rule); }
.value-grid > div { padding: 26px 26px 6px 0; display: grid; gap: 14px; align-content: start; }
.value-grid > div + div { padding-left: 26px; border-left: 1px solid var(--band-rule); }
.value-grid h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
.value-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.value-grid li { color: var(--band-muted); font-size: 15.5px; }
.value-grid li b { color: var(--band-ink); font-weight: 700; display: block; }
@media (max-width: 820px) {
  .value-grid { grid-template-columns: 1fr; }
  .value-grid > div { padding: 22px 0; }
  .value-grid > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--band-rule); }
}

/* Founders + leadership */
.members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--surface); margin-bottom: 56px; }
.member { padding: 22px 20px; border-right: 1px solid var(--rule); display: grid; gap: 6px; align-content: start; color: var(--ink); text-decoration: none; transition: background 0.15s ease; }
.member:hover { background: var(--tint); }
.member i { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--accent-ink); margin-top: 6px; }
.member:hover i { text-decoration: underline; }
.member:last-child { border-right: 0; }
.member b { font-size: 18px; font-weight: 700; }
.member span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) {
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member { border-bottom: 1px solid var(--rule); }
  .member:nth-child(2n) { border-right: 0; }
  .member:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
.leaders-title { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 22px; }
.leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.leader { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start; }
.leader img {
  width: 132px; height: 132px; object-fit: cover; aspect-ratio: 1; max-width: 100%;
  filter: grayscale(1) contrast(1.04); transition: filter 0.3s ease;
  border-bottom: 3px solid var(--accent);
}
.leader:hover img, .leader:focus-within img { filter: none; }
.leader h3 { font-size: 22px; font-weight: 700; }
.leader .title { font-size: 14px; color: var(--accent-ink); font-weight: 500; margin-top: 4px; }
.leader p.bio { margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; }
.leader .profile { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.leader .profile::after { content: " \2197"; font-weight: 400; }
.leader .profile:hover { border-bottom-color: var(--accent); }
@media (max-width: 900px) { .leaders { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .leader { grid-template-columns: 1fr; } .leader img { width: 112px; height: 112px; } }
@media (prefers-reduced-motion: reduce) { .leader img { transition: none; } }

/* Framework + join */
.closing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--surface); }
.closing > div { min-width: 0; padding: clamp(22px, 4vw, 44px); display: grid; gap: 16px; align-content: start; }
.closing > div + div { border-left: 1px solid var(--rule); background: var(--tint); }
.closing h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; }
.closing p { color: var(--ink-soft); }
.doc-meta { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.closing .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email-line code { max-width: 100%; overflow-wrap: anywhere; font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); padding: 8px 12px; user-select: all; }
.copy-btn { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 12px; background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; }
.copy-btn:hover { border-color: var(--accent); }
@media (max-width: 820px) {
  .closing { grid-template-columns: minmax(0, 1fr); }
  .closing > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Footer */
.site-footer { background: var(--band); color: var(--band-muted); font-size: 14px; }
.site-footer .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; align-items: center; padding-block: 40px; }
.site-footer img { height: 52px; width: auto; }
.site-footer p { max-width: 72ch; }
.site-footer .fine { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--band-rule); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.site-footer a { color: var(--band-ink); }
@media (max-width: 700px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-content: center; gap: 18px; text-align: left; padding-block: 80px; }
.notfound h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 900; }