/* Page-scoped styles extracted from talent.html. */

/* =====================================================================
   /talent.html page-scoped styles (sanctioned per-page pattern).
   Copy source: archived pre-v6 live site: talent.html (CARRIED).
   Tokens from site-tokens.css; shared components from site.css (band,
   container, btn*, callout, lede, muted, eyebrow, section-head, stage,
   card, grid-2, grid-3, flow-node, faq). Class prefix tl-.
   ===================================================================== */

/* ---------- Hero ---------- */
.tl-hero { padding-block: var(--s-9) var(--s-7); }
.tl-hero-grid { display: grid; gap: var(--s-7); }
@media (min-width: 960px) {
  .tl-hero-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
.tl-hero-copy h1 { max-width: 18ch; }
.tl-support { max-width: var(--measure-prose); }

.tl-stage-card { align-self: start; }
.tl-stage-card h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.tl-stage-card dl { margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.tl-stage-card dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-hair);
  font-size: var(--fs-14);
}
.tl-stage-card dt { color: var(--ink-soft); flex-shrink: 0; }
.tl-stage-card dd { margin: 0; text-align: right; color: var(--ink); font-weight: var(--weight-medium); }
.tl-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-2);
  font-size: var(--fs-14);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

/* ---------- Section 2: What we're building ---------- */
.tl-building-grid { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 860px) { .tl-building-grid { grid-template-columns: repeat(3, 1fr); } }
.tl-surface-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
}
.tl-surface-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tl-surface-card h3 { margin: 0; }
.tl-surface-card p { font-size: var(--fs-14); margin-bottom: 0; }
.tl-surface-card p + p { margin-top: var(--s-3); }
.tl-surface-cross {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-hair);
  font-size: var(--fs-13);
  color: var(--ink-soft);
}

/* ---------- Section 3: How we work ---------- */
.tl-arch-split { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .tl-arch-split { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.tl-pull {
  margin-top: var(--s-5);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-20);
  color: var(--ink);
}
.tl-structure-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.tl-structure-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.tl-structure-title { font-size: var(--fs-20); margin-bottom: var(--s-5); }
.tl-flow-nodes { display: grid; gap: var(--s-3); }
.tl-flow-nodes .flow-node { display: flex; gap: var(--s-3); align-items: flex-start; }
.tl-node-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-13);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-node-name { margin: 0; font-weight: var(--weight-semibold); color: var(--ink); font-size: var(--fs-14); }
.tl-node-text { margin: var(--s-1) 0 0; color: var(--ink-muted); font-size: var(--fs-13); }
.tl-prose > p { max-width: var(--measure-prose); }

/* ---------- Section 4: What stays with you ---------- */
.tl-stays-grid { margin-top: var(--s-6); }
.tl-stays-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.tl-stays-num {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--blue-deep);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--s-3);
}
.tl-stays-block p { margin: 0; }

/* ---------- Section 5: Where we are ---------- */
.tl-stage-two-col { margin-top: var(--s-6); }
.tl-stage-sub {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.tl-stage-sub--notyet { border-style: dashed; background: var(--bg-cream); }
.tl-stage-sub h3 { margin-bottom: var(--s-3); }
.tl-stage-sub p { margin: 0; }

/* ---------- Section 6: Open roles + how to apply ---------- */
.tl-table-wrap { overflow-x: auto; margin-top: var(--s-6); -webkit-overflow-scrolling: touch; }
.tl-table { width: 100%; border-collapse: collapse; min-width: 680px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tl-table th { text-align: left; font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--on-ink); background: var(--ink); padding: var(--s-4) var(--s-5); vertical-align: top; }
.tl-table td { padding: var(--s-5); vertical-align: top; border-top: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink-muted); }
.tl-table td + td { border-left: 1px solid var(--line); }

.tl-fits-grid { margin-top: var(--s-6); }
.tl-fits-label { font-weight: var(--weight-semibold); margin-bottom: var(--s-3); }
.tl-fits-label.ok { color: var(--ok-deep); }
.tl-fits-label.refuse { color: var(--ink-soft); }
.tl-fits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.tl-fits-list li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); font-size: var(--fs-14); color: var(--ink-muted); }

.tl-process-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.tl-process-list li { display: flex; gap: var(--s-4); align-items: flex-start; }
.tl-step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-step-body { padding-top: var(--s-1); color: var(--ink-muted); }

.tl-role-group + .tl-role-group { margin-top: var(--s-7); }
.tl-role-group-head { max-width: var(--measure-prose); margin-bottom: var(--s-5); }
.tl-role-grid { display: grid; gap: var(--s-4); }
.tl-role-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  color: inherit;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.tl-role-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.tl-role-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tl-role-card h4 { margin: 0; }
.tl-role-card p { margin: 0; color: var(--ink-muted); font-size: var(--fs-14); }
.tl-role-card-meta { margin-top: auto; padding-top: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-12); color: var(--blue-deep); }
@media (min-width: 760px) { .tl-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* == TALENT PAGE CSS END == */

/* Extracted from style attributes. */
.csp-03a4aa16d2 { max-width: var(--measure-prose); }
.csp-22b9c26543 { margin-top: var(--s-5); border-left-color: var(--ink); }
.csp-4df0532235 { margin-top: var(--s-6); }
.csp-b652b6f18b { max-width: var(--measure-prose); margin-top: var(--s-5); }
.csp-ff248e1bc6 { margin-top: var(--s-7); }