/* ==========================================================================
   Talent Civic site stylesheet. Single source of truth for every page.
   Direction E, "Open Record", adopted 2026-09-05. Replaces nav.css.

   Rules that matter:
   - Pure white on every content surface. The footer is the only dark object.
   - One typeface, Archivo, which is the face the wordmark is already drawn in.
   - Burgundy is an accent, never a field. Navy is text and the footer.
   - No page may redefine a token, a nav rule or a footer rule inline. Inline
     styles come after this file in the cascade and will silently win.
   ========================================================================== */

:root{
  --white:#ffffff;
  --navy:#152238;
  --ink:#152238;
  --ink-2:#46536a;
  --ink-3:#646f7e;   /* 5.10:1 on white. Do not lighten: #727e8f and #737e8f both fail AA at 4.1:1. */
  --burgundy:#a3283c;
  --burgundy-dk:#7c1e2d;
  --rule:#e4e8f0;
  --hair:#f0f2f7;
  /* Status colours. Introduced 2026-09-05 because the contact form needs real
     success/error feedback. Both measured on white and on their own tint. */
  --ok:#186a44; --ok-soft:#e8f2ec;
  --err:#7c1e2d; --err-soft:#fbeef0;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* type scale, 7 steps */
  --fs-display:clamp(38px,6.1vw,76px);
  --fs-h1:clamp(30px,4.2vw,50px);
  --fs-h2:clamp(25px,2.6vw,33px);
  --fs-h3:17.5px;
  --fs-lead:clamp(16.5px,1.4vw,18.5px);
  --fs-body:16.5px;
  --fs-sm:14.5px;
  --fs-xs:11.5px;

  --w:1240px;
  --col:74ch;   /* reading measure for running text, not a container width */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.028em;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px;border-radius:2px}
img{max-width:100%}

.wrap{max-width:var(--w);margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:60;background:var(--navy);color:#fff;padding:10px 16px;border-radius:4px}

/* ---------- header ---------- */
nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav-inner{max-width:var(--w);margin:0 auto;padding:0 40px;height:80px;display:flex;align-items:center;gap:44px}
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.brand-mark{display:block;flex-shrink:0}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.nav-links a{padding:4px 0;border-bottom:1.5px solid transparent}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--burgundy)}
.nav-cta{font-size:14px;font-weight:600;color:var(--white);background:var(--navy);padding:11px 20px;border-radius:4px;white-space:nowrap}
.nav-cta:hover{background:var(--burgundy)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;flex-direction:column;gap:5px;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--navy);color:var(--white);padding:15px 28px;border-radius:4px;font-size:15px;font-weight:600}
.btn:hover{background:var(--burgundy)}
.btn-2{display:inline-block;border:1px solid var(--rule);color:var(--ink);padding:15px 28px;border-radius:4px;font-size:15px;font-weight:600}
.btn-2:hover{border-color:var(--navy)}
.acts{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- numbered section spine, used on every page ---------- */
.blk{padding:0 0 84px;scroll-margin-top:110px}
.blk:last-child{padding-bottom:0}
.blk-head{border-top:1px solid var(--navy);padding:22px 0 0;margin:0 0 34px;display:grid;grid-template-columns:70px 1fr;gap:14px}
.blk-head .n{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--burgundy);padding-top:8px}
.blk-head h2{font-size:var(--fs-h2);line-height:1.14;margin:0 0 12px}
.blk-head p{font-size:var(--fs-lead);color:var(--ink-2);max-width:62ch}
.blk-body{margin-left:84px}

/* hanging-number rows */
.rows{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
.rows.one{grid-template-columns:1fr}
.row{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--hair)}
.row .n{font-size:12.5px;font-weight:600;color:var(--ink-3);padding-top:4px}
.row h3{font-size:var(--fs-h3);font-weight:600;margin:0 0 5px}
.row p{font-size:var(--fs-sm);color:var(--ink-3)}

/* tick list */
.checks{list-style:none;margin:0;padding:0;columns:2;column-gap:56px}
.checks.one{columns:1}
.checks li{break-inside:avoid;padding:15px 0 15px 30px;border-bottom:1px solid var(--hair);position:relative;font-size:15.5px;color:var(--ink-2);max-width:var(--col)}
.checks li::before{content:"";position:absolute;left:2px;top:22px;width:13px;height:7px;border-left:2px solid var(--burgundy);border-bottom:2px solid var(--burgundy);transform:rotate(-45deg)}

/* status record: confirmed / in progress / on request */
.rec{border-top:1px solid var(--rule)}
.rrow{display:grid;grid-template-columns:1fr 1.55fr 130px;gap:24px;padding:17px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.rrow .f{font-size:15px;font-weight:600}
.rrow .d{font-size:var(--fs-sm);color:var(--ink-3)}
.st{font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:8px;justify-content:flex-end;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.s-ok{color:var(--ink-2)}.s-ok::before{background:var(--navy)}
.s-pr{color:var(--burgundy-dk)}.s-pr::before{background:var(--white);box-shadow:inset 0 0 0 2px var(--burgundy)}
.s-rq{color:var(--ink-3)}.s-rq::before{background:var(--rule)}

/* three-up columns */
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.trio > div{padding:26px 30px 26px 0;border-right:1px solid var(--hair)}
.trio > div:last-child{border-right:0;padding-right:0}
.trio > div:not(:first-child){padding-left:30px}
.trio h3{font-size:18px;font-weight:600;margin:0 0 8px}
.trio p{font-size:var(--fs-sm);color:var(--ink-3);margin:0 0 16px}
.trio .who{font-size:var(--fs-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--burgundy-dk)}

/* sticky index rail */
.rail{position:sticky;top:112px}
.rail ol{list-style:none;margin:0;padding:0}
.rail li{margin:0 0 2px}
.rail a{display:flex;gap:12px;padding:9px 0 9px 14px;font-size:13.5px;font-weight:500;color:var(--ink-3);border-left:2px solid var(--hair);line-height:1.35}
.rail a .n{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);padding-top:1px;flex:none}
.rail a:hover{color:var(--ink-2)}
.rail a.on{color:var(--ink);border-left-color:var(--burgundy);font-weight:600}
.rail a.on .n{color:var(--burgundy)}

/* ---------- document pages ---------- */
main{display:block}
.doc{padding-top:72px;padding-bottom:96px}  /* never use the padding shorthand here: it resets .wrap's 40px sides */
.doc-head{margin:0 0 56px}
.doc-head .stamp{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 26px}
.doc-head .stamp span{display:flex;align-items:center;gap:9px}
.doc-head .stamp span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--burgundy);flex:none}
.doc-head h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.035em;margin:0 0 22px;max-width:22ch}
.doc-head .lede{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:62ch;margin:0}
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:64px;align-items:start}
.doc-grid.norail{grid-template-columns:minmax(0,1fr)}
.doc-col{max-width:1010px}
/* Prose keeps a reading measure; tables, model blocks and the partner list use the
   full column. --col is that measure, not the container width. */
.prose > p,.prose > ul,.prose > ol,.prose > h2,.prose > h3,.prose > .note,.prose > .lede,.prose > .sub{max-width:var(--col)}

/* prose inside a document page */
.prose h2{font-size:24px;margin:44px 0 12px;line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--fs-h3);font-weight:600;margin:30px 0 8px}
.prose p,.prose li{font-size:var(--fs-body);color:var(--ink-2)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--burgundy-dk);font-weight:600;border-bottom:1.5px solid var(--burgundy)}
.prose a:hover{color:var(--burgundy)}
/* .prose a outranks .btn on specificity, so restore the buttons explicitly.
   Anything given a link colour inside .prose must be listed here. */
.prose .btn{color:var(--white);border-bottom:0}
.prose .btn:hover{color:var(--white)}
.prose .btn-2{color:var(--ink);border:1px solid var(--rule)}
.prose .btn-2:hover{color:var(--ink);border-color:var(--navy)}
.prose .go{border-bottom:1.5px solid var(--burgundy)}
.prose h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.035em;margin:0 0 18px;max-width:20ch}
.updated{color:var(--ink-3);font-size:var(--fs-sm);margin:0 0 40px}

.note{border-left:2px solid var(--burgundy);padding:4px 0 4px 22px;margin:26px 0;font-size:15.5px;color:var(--ink-2);max-width:var(--col)}
.note strong{display:block;color:var(--ink);margin-bottom:4px;font-weight:600}

table{border-collapse:collapse;width:100%;margin:22px 0 8px;font-size:15px}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--hair);vertical-align:top}
th{color:var(--ink);font-weight:600}
/* Only a table with exactly two columns gets a fixed label column. The selector reads
   "a first th that is also second-from-last", which is true only when there are two. */
th:first-child:nth-last-child(2){width:34%}
td{color:var(--ink-2)}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

.ctabox{border-top:1px solid var(--navy);margin-top:56px;padding-top:34px}
.ctabox h2{font-size:var(--fs-h2);margin:0 0 12px}
.ctabox p{font-size:var(--fs-lead);color:var(--ink-2);margin:0 0 24px;max-width:52ch}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#9aa8c2;padding:60px 0 40px;font-size:var(--fs-sm)}
footer .brand{color:var(--white);margin-bottom:20px}
footer p{margin:0}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}
footer h4{color:var(--white);font-size:var(--fs-xs);letter-spacing:.11em;text-transform:uppercase;margin:0 0 15px;font-weight:600}
footer ul{padding:0;margin:0}
footer li{list-style:none;margin-bottom:9px}
footer a:hover{color:var(--white)}
.footer-addr{font-style:normal;line-height:1.55}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:46px;padding-top:22px;font-size:12.5px;letter-spacing:.02em}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .wrap,.nav-inner{padding:0 24px}
  .nav-inner{height:70px;gap:0}
  .nav-links{display:none;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;z-index:40;
             background:var(--white);border-bottom:1px solid var(--rule);box-shadow:0 12px 24px rgba(21,34,56,.10);padding:8px 24px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;font-size:16px}
  .nav-toggle{display:flex}
  .nav-cta{margin-left:14px;padding:10px 16px;font-size:13.5px}

  .blk{padding-bottom:60px}
  .blk-head{grid-template-columns:1fr;gap:6px}
  .blk-head .n{padding-top:0}
  .blk-body{margin-left:0}
  .rows{grid-template-columns:1fr;column-gap:0}
  .checks{columns:1}
  .trio{grid-template-columns:1fr}
  .trio > div{border-right:0;border-bottom:1px solid var(--hair);padding:22px 0}
  .trio > div:not(:first-child){padding-left:0}
  .trio > div:last-child{border-bottom:0}
  .rrow{grid-template-columns:1fr;gap:5px;padding:16px 0}
  .st{justify-content:flex-start;margin-top:4px}

  .doc{padding-top:48px;padding-bottom:72px}
  .doc-head{margin-bottom:38px}
  .doc-grid,.doc-grid.norail{grid-template-columns:1fr;gap:0}
  .rail{display:none}
  th,td{padding:12px 10px 12px 0;font-size:14.5px}
  th:first-child:nth-last-child(2){width:42%}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
}


/* ==========================================================================
   Page components. These were per-page inline styles until 2026-09-05; they
   live here now so no page redefines a shared class in its own cascade.
   ========================================================================== */

/* secondary button, written .btn.alt on the older pages */
.btn.alt,.prose .btn.alt{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.alt:hover,.prose .btn.alt:hover{background:transparent;color:var(--ink);border-color:var(--navy)}

/* standfirst under a page h1 */
.sub{color:var(--ink-2);font-size:var(--fs-lead);margin:0 0 32px;max-width:62ch}

/* services: engagement model blocks */
.model{border-left:2px solid var(--burgundy);padding:2px 0 2px 22px;margin:34px 0}
.model h3{margin-top:0;font-size:20px;font-weight:600}
.model p,.model li{max-width:var(--col)}

/* wide table wrapper */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0 8px}

/* faq: question and contents list */
.q{font-size:var(--fs-h3);margin:32px 0 8px;font-weight:600;color:var(--ink);letter-spacing:-.018em}
.toc{border-top:1px solid var(--navy);border-bottom:1px solid var(--rule);padding:22px 0;margin:0 0 40px}
.toc p{margin:0 0 12px;font-weight:600;color:var(--ink-3);font-size:var(--fs-xs);letter-spacing:.11em;text-transform:uppercase}
.toc ul{margin:0;padding-left:20px}
.toc li{margin-bottom:6px;font-size:15px}

/* contact: audience toggle and forms */
.toggle-row{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap}
.toggle-btn{padding:11px 22px;font-family:var(--sans);font-size:14px;font-weight:600;border-radius:4px;
            border:1px solid var(--rule);background:var(--white);color:var(--ink-2);cursor:pointer}
.toggle-btn:hover{border-color:var(--ink-3)}
.toggle-btn.active{background:var(--navy);color:var(--white);border-color:var(--navy)}

/* Without this pair BOTH forms render at once and the toggle does nothing. */
.form-panel{display:none}
.form-panel.active{display:block}

.field{margin-bottom:20px;max-width:520px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--rule);border-radius:4px}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--burgundy);outline:none;box-shadow:0 0 0 3px rgba(163,40,60,.12)}
.field-hint{font-size:13px;color:var(--ink-3);margin-top:5px}
.required{color:var(--burgundy)}

.btn-submit{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--white);
            border:0;padding:15px 30px;font-family:var(--sans);font-size:15px;font-weight:600;
            border-radius:4px;cursor:pointer}
.btn-submit:hover{background:var(--burgundy)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}
.btn-submit:disabled:hover{background:var(--navy)}

.form-status{margin-top:18px;font-size:15px;padding:14px 18px;border-radius:4px;display:none}
.form-status.show{display:block}
.form-status.success{background:var(--ok-soft);color:var(--ok)}
.form-status.error{background:var(--err-soft);color:var(--err)}

/* about: the three partners */
.partners{border-top:1px solid var(--navy);margin:26px 0 8px}
.partner{display:grid;grid-template-columns:1fr auto;gap:10px 28px;align-items:start;
         padding:24px 0;border-bottom:1px solid var(--hair)}
.partner h3{font-size:19px;font-weight:600;margin:0 0 4px;letter-spacing:-.02em}
.partner .role{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
               color:var(--burgundy-dk);margin:0 0 10px}
.partner p.bio{font-size:15.5px;color:var(--ink-2);margin:0;max-width:60ch}
.partner .verify{grid-column:2;grid-row:1 / span 2;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
@media (max-width:640px){
  .partner{grid-template-columns:1fr}
  .partner .verify{grid-column:1;grid-row:auto;margin-top:6px}
}