/* Fraction Talent website. Tokens are generated from the brand system's tokens.json (light theme). */
:root {
  --surface: #fafbfc;
  --surface-raised: #ffffff;
  --surface-sunken: #f3f5f8;
  --ink: #0f2340;
  --ink-muted: #4a5b74;
  --line: #dce3ee;
  --line-strong: #7d8ba1;
  --brand: #2160d8;
  --brand-strong: #1a4fb5;
  --on-brand: #ffffff;
  --brand-tint: #e8effc;
  --navy: #0f2340;
  --on-navy: #ffffff;
  --brand-on-navy: #8fb3f7;
  --green: #2fb463;
  --on-green: #0f2340;
  --green-text: #187a41;
  --green-tint: #e6f6ec;
  --focus: #2160d8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15,35,64,0.06), 0 12px 32px rgba(15,35,64,0.08);
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Fraction Talent — component styles. Every colour comes from tokens.css. */
.ft { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); margin: 0; }

/* ---- type ---- */
.ft-h1 { font-family: var(--font-display); font-size: 76px; line-height: .98; font-weight: 800; letter-spacing: -.03em; margin: 0; text-wrap: balance; color: var(--ink); }
.ft-h1 .ft-accent { color: var(--brand); }
.ft-h2 { font-family: var(--font-display); font-size: 52px; line-height: 1.04; font-weight: 750; letter-spacing: -.025em; margin: 0; text-wrap: balance; color: var(--ink); }
.ft-h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.ft-title { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; color: var(--ink); }
.ft-lede { font-size: 19px; line-height: 30px; color: var(--ink-muted); margin: 0; max-width: 60ch; }
.ft-body { font-size: 16px; line-height: 26px; color: var(--ink-muted); margin: 0; }
.ft-small { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.ft-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin: 0; }
.ft-eyebrow.ft-bar::before { content: ""; width: var(--space-8); height: 2px; background: var(--green); border-radius: 2px; }

/* ---- logo: the fraction mark + lowercase wordmark ---- */
.ft-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; font-size: 30px; line-height: 1; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .3em; }
.ft-wordmark i { font-style: normal; color: var(--green); }
.ft-mark { height: 1.2em; width: auto; flex: none; display: block; }
.ft-mark .l, .ft-mark .b { fill: var(--brand); }
.ft-mark .g { fill: var(--green); }
.ft-mark .s { fill: var(--ink); }
.ft-on-navy .ft-wordmark { color: var(--on-navy); }
.ft-on-navy .ft-mark .l, .ft-on-navy .ft-mark .s { fill: var(--on-navy); }
.ft-on-navy .ft-mark .b { fill: var(--brand-on-navy); }

/* ---- buttons ---- */
.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-md); font: 600 16px/1 var(--font-sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .16s ease-out, transform .16s ease-out, border-color .16s ease-out; }
.ft-btn:active { transform: translateY(1px); }
.ft-btn:focus-visible, .ft-link:focus-visible, .ft-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ft-btn svg { width: 18px; height: 18px; }
.ft-btn-primary { background: var(--brand); color: var(--on-brand); }
.ft-btn-primary:hover { background: var(--brand-strong); }
.ft-btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.ft-btn-secondary:hover { background: var(--surface-raised); }
.ft-btn-green { background: var(--green); color: var(--on-green); }
.ft-btn-green:hover { filter: brightness(1.06); }
.ft-btn-sm { min-height: 42px; padding: 0 var(--space-4); font-size: 15px; }
.ft-link { color: var(--brand); font-weight: 600; text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: center; }
.ft-link svg { width: 18px; height: 18px; flex: none; }
.ft-link:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 4px; }

/* ---- chips & avatars ---- */
.ft-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 13px; line-height: 18px; font-weight: 600; background: var(--green-tint); color: var(--green-text); white-space: nowrap; }
.ft-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ft-chip-blue { background: var(--brand-tint); color: var(--brand); }
.ft-chip-blue::before { background: var(--brand); }
.ft-avatar { width: 48px; height: 48px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; font-weight: 700; font-size: 16px; background: var(--brand-tint); color: var(--brand); }
.ft-avatar.g { background: var(--green-tint); color: var(--green-text); }

/* ---- layout ---- */
.ft-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); }
.ft-section { padding-block: var(--space-24); background: var(--surface); }
.ft-section.sunken { background: var(--surface-sunken); }
.ft-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); max-width: 760px; }
.ft-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---- nav ---- */
.ft-nav { background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.ft-nav .ft-wrap { display: flex; align-items: center; gap: var(--space-8); min-height: 76px; }
.ft-nav ul { display: flex; gap: var(--space-8); list-style: none; margin: 0 0 0 auto; padding: 0; }
.ft-nav a.n { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; white-space: nowrap; }
.ft-nav a.n:hover { color: var(--brand); }
.ft-menu { display: none; align-items: center; gap: var(--space-2); min-height: 42px; padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; }
.ft-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ft-menu:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- hero ---- */
.ft-hero { padding-block: var(--space-16) var(--space-24); background: var(--surface); }
.ft-hero .ft-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-16); align-items: center; }
.ft-hero-copy { display: grid; gap: var(--space-6); }
.ft-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* the shortlist panel: one self-contained object */
.ft-panel { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); display: grid; gap: var(--space-4); }
.ft-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.ft-panel-head b { display: block; font-size: 18px; line-height: 24px; }
.ft-cand { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); }
.ft-cand + .ft-cand { border-top: 1px solid var(--line); border-radius: 0; }
.ft-cand .who { flex: 1; min-width: 0; }
.ft-cand .who b { display: block; font-size: 16px; line-height: 22px; }
.ft-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ft-panel-foot .ft-link { white-space: nowrap; flex: none; }

/* ---- trust strip: four plain statements under a fraction bar ---- */
.ft-trust { background: var(--surface-sunken); padding-block: var(--space-8); }
.ft-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.ft-trust li { display: grid; gap: var(--space-2); align-content: start; }
.ft-trust li::before { content: ""; width: var(--space-8); height: 2px; border-radius: 2px; background: var(--green); }
.ft-trust b { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.ft-trust span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---- solution cards ---- */
.ft-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.ft-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; color: inherit; transition: transform .18s ease-out, box-shadow .18s ease-out; }
a.ft-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ft-card .ft-link { margin-top: auto; padding-top: var(--space-4); }
.ft-well { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.ft-well.g { background: var(--green-tint); color: var(--green-text); }
.ft-well svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ft-cat { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.ft-cat.g { color: var(--green-text); }
.ft-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ft-ticks li { display: flex; gap: var(--space-2); font-size: 15px; line-height: 22px; color: var(--ink); }
.ft-ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--green-tint); box-shadow: inset 0 0 0 4px var(--green-tint), inset 0 0 0 8px var(--green); }

/* ---- steps: the fraction bar ---- */
.ft-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); counter-reset: s; }
.ft-step { display: grid; gap: var(--space-3); align-content: start; }
.ft-step .num { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.ft-step .num small { font-size: 22px; color: var(--ink-muted); font-weight: 700; }
.ft-step .bar { width: var(--space-8); height: 2px; background: var(--green); border-radius: 2px; margin-bottom: var(--space-2); }

/* ---- category tiles ---- */
.ft-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.ft-tile { border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); min-height: 240px; }
.ft-tile .ft-well { width: 44px; height: 44px; }
.ft-tile .ft-well svg { width: 22px; height: 22px; }
a.ft-tile { text-decoration: none; color: inherit; transition: transform .18s ease-out, box-shadow .18s ease-out; }
a.ft-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
a.ft-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ft-tile .ft-link { margin-top: auto; font-size: 15px; white-space: nowrap; }
.ft-tile p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---- why band: white ground, blue and green tinted promise cards ---- */
.ft-band { background: var(--surface-raised); color: var(--ink); padding-block: var(--space-24); border-block: 1px solid var(--line); }
.ft-band .ft-wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--space-16); align-items: center; }
.ft-band .ft-h2 span { color: var(--green-text); display: block; }
.ft-promises { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ft-promise { background: var(--brand-tint); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-2); }
.ft-promise.g { background: var(--green-tint); }
.ft-promise b { font-size: 20px; line-height: 28px; color: var(--ink); }
.ft-promise p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.ft-promise .k { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.ft-promise.g .k { color: var(--green-text); }
.ft-promise .k::before { content: ""; width: var(--space-6); height: 2px; border-radius: 2px; background: currentColor; }

/* ---- request talent: the closing section, headline left, form right ---- */
.ft-request { background: var(--surface); padding-block: var(--space-24); }
.ft-request .ft-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-16); align-items: start; }
.ft-request-copy { display: grid; gap: var(--space-6); position: sticky; top: var(--space-8); }
.ft-request .ft-h2 { font-size: 60px; }
.ft-form { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
.ft-field { display: grid; gap: var(--space-2); min-width: 0; }
.ft-field.wide { grid-column: 1 / -1; }
.ft-field label, .ft-field legend { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); padding: 0; }
.ft-field .hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 400; }
.ft-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-sans); }
textarea.ft-input { min-height: 104px; resize: vertical; }
.ft-input::placeholder { color: var(--ink-muted); }
.ft-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
fieldset.ft-field { border: 0; margin: 0; padding: 0; }
.ft-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ft-option { position: relative; }
.ft-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ft-option span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--ink); background: var(--surface-raised); }
.ft-option input:checked + span { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.ft-option input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.ft-form-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); }
.ft-form-foot .ft-small { max-width: 36ch; }

/* ---- footer: light, on surface-sunken ---- */
.ft-footer { background: var(--surface-sunken); color: var(--ink-muted); padding-block: var(--space-16) var(--space-8); border-top: 1px solid var(--line); }
.ft-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-12); border-bottom: 1px solid var(--line); }
.ft-footer h4 { margin: 0 0 var(--space-4); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ft-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ft-footer a { color: var(--ink-muted); text-decoration: none; }
.ft-footer a:hover { color: var(--brand); }
.ft-footer .legal { display: flex; justify-content: space-between; padding-top: var(--space-6); font-size: 14px; }

/* ---- row alignment: cards in a row share their inner rows (subgrid), so titles, text and links line up ---- */
@supports (grid-template-rows: subgrid) {
  .ft-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--space-4); align-content: start; }
  .ft-card .ft-link { align-self: start; margin-top: 0; }
  .ft-tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-3); min-height: 0; }
  .ft-tile .ft-link { align-self: end; margin-top: var(--space-3); }
  .ft-promise { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); }
  .ft-trust li { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-2); }
  .ft-trust ul { row-gap: var(--space-6); }
}

@media (max-width: 900px) {
  .ft-h1 { font-size: 44px; } .ft-h2 { font-size: 34px; }
  .ft-hero .ft-wrap, .ft-band .ft-wrap, .ft-request .ft-wrap, .ft-cards, .ft-steps, .ft-form { grid-template-columns: 1fr; }
  .ft-request-copy { position: static; } .ft-request .ft-h2 { font-size: 34px; } .ft-form { padding: var(--space-6); }
  .ft-nav .ft-wrap { gap: var(--space-3); } .ft-nav .ft-btn { margin-left: auto; } .ft-menu { display: inline-flex; }
  .ft-promises { grid-template-columns: 1fr; } .ft-footer .legal { flex-direction: column; gap: var(--space-2); }
  .ft-tiles { grid-template-columns: 1fr 1fr; } .ft-trust ul, .ft-footer .cols { grid-template-columns: 1fr 1fr; }
  .ft-nav ul { display: none; } .ft-section, .ft-band, .ft-request { padding-block: var(--space-16); }
}
@media (max-width: 600px) {
  .ft-nav .ft-btn { display: none; } .ft-menu { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .ft-btn, .ft-card, a.ft-tile { transition: none; } a.ft-card:hover, a.ft-tile:hover { transform: none; } }

/* ---- site-only: sticky nav, mobile menu panel, form status, skip link ---- */
.ft-nav { position: sticky; top: 0; z-index: 20; }
.ft-skip { position: absolute; left: var(--space-4); top: -60px; z-index: 30; background: var(--brand); color: var(--on-brand); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; }
.ft-skip:focus { top: var(--space-3); }
.ft-form-status { grid-column: 1 / -1; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--brand-tint); color: var(--ink); font-size: 15px; line-height: 22px; }
.ft-form-status[data-kind="error"] { background: var(--green-tint); }
.ft-field .req { color: var(--ink-muted); font-weight: 400; }
@media (max-width: 900px) {
  .ft-nav.open ul { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: var(--space-2) max(var(--space-6), env(safe-area-inset-left, 0px)) var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
  .ft-nav.open ul a.n { display: block; padding: var(--space-3) 0; font-size: 18px; }
}