/* =====================================================================
   Quadrant · shared design system
   Extracted verbatim from the home page so every page renders identically.
   Previously each page carried its own copy of these rules, which is why
   layouts drifted apart. Single source of truth now.
   ===================================================================== */

  :root{
    --paper:#f3eee2; --paper-deep:#ebe3d2; --ink:#211f1a; --ink-soft:#5b564b;
    --line:#d8cfba; --d:#bb4430; --i:#d99a2b; --s:#4f7a6b; --c:#3a5a8c;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);
    font-family:'Hanken Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
  .display{font-family:'Bricolage Grotesque','Hanken Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02}
  .mono{font-family:'Spline Sans Mono','Courier New',monospace;text-transform:uppercase;letter-spacing:.16em;font-weight:600}
  a{color:inherit}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px solid var(--ink)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1080px;margin:0 auto}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
  .brandmark{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;width:30px;height:30px}
  .brandmark span{border-radius:3px}
  .brandname{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
  .navlinks{display:flex;align-items:center;gap:22px}
  .btn{all:unset;cursor:pointer;display:inline-block;font-weight:700;font-size:15px;text-align:center;
    padding:13px 22px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);
    box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
  .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  .btn.cta{background:var(--d);border-color:var(--d)}
  .btn.ghost{background:var(--paper);color:var(--ink)}
  .btn.sm{padding:10px 16px;font-size:13px;box-shadow:3px 3px 0 var(--ink)}
  .hero{display:grid;grid-template-columns:1fr;gap:40px;padding:64px 0 56px;align-items:center}
  .eyebrow{font-size:12px;color:var(--ink-soft);margin-bottom:20px}
  h1.title{font-size:clamp(42px,7vw,78px);margin:0 0 22px}
  .u{position:relative;white-space:nowrap}
  .u:after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.22em;background:var(--i);z-index:-1;opacity:.85}
  .lede{font-size:19px;color:var(--ink-soft);margin:0 0 28px;max-width:52ch}
  .heroCtas{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .meta{font-size:13px;color:var(--ink-soft)}
  .quadcards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .qcard{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:20px}
  .qletter{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:40px;line-height:1}
  .qcard h3{margin:10px 0 4px;font-size:18px}
  .qcard p{margin:0;color:var(--ink-soft);font-size:14px}
  section{padding:56px 0;border-top:2px solid var(--line)}
  .sectlabel{font-size:12px;color:var(--ink-soft);margin-bottom:14px}
  h2{font-size:clamp(30px,4.5vw,46px);margin:0 0 30px;max-width:22ch}
  .pains{display:grid;grid-template-columns:1fr;gap:22px}
  .pain{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:24px}
  .pain .k{font-family:'Spline Sans Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.14em}
  .pain h3{margin:10px 0 8px;font-size:20px}
  .pain p{margin:0;color:var(--ink-soft);font-size:15px}
  .steps{display:grid;grid-template-columns:1fr;gap:22px}
  .step{border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);padding:24px}
  .step .n{font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:14px;color:var(--ink-soft)}
  .step h3{margin:10px 0 8px;font-size:20px}
  .step p{margin:0;color:var(--ink-soft);font-size:15px}
  .magnets{display:grid;grid-template-columns:1fr;gap:22px}
  .magnet{border:2px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink);padding:28px}
  .magnet h3{margin:8px 0 10px;font-size:24px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em}
  .magnet p{margin:0 0 18px;color:var(--ink-soft);font-size:15px}
  .job{border-left:4px solid var(--ink);padding:4px 0 4px 20px;margin-bottom:22px}
  .job .k{font-family:'Spline Sans Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft)}
  .job h3{margin:8px 0 8px;font-size:22px}
  .job p{margin:0;color:var(--ink-soft);font-size:15px}
  .subbox{border:2px solid var(--ink);background:var(--paper-deep);box-shadow:8px 8px 0 var(--ink);padding:30px}
  .subbox input[type=text],.subbox input[type=email]{width:100%;border:2px solid var(--line);background:var(--paper);padding:13px 15px;font-size:15px;font-family:inherit;color:var(--ink);outline:none}
  .subbox input:focus{border-color:var(--ink)}
  .final{text-align:center;padding:80px 0}
  .final h2{margin:0 auto 26px}
  footer{border-top:2px solid var(--ink);padding:34px 0}
  .foot{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
  .foot p{margin:0;color:var(--ink-soft);font-size:13px;max-width:52ch}
  @media(min-width:760px){
    .hero{grid-template-columns:1.1fr .9fr}
    .pains,.steps{grid-template-columns:repeat(3,1fr)}
    .magnets{grid-template-columns:1fr 1fr}
    .foot{grid-template-columns:1fr 1fr}
    .subgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  }



    .qsplit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .qcard{border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);background:var(--paper);padding:26px}
    .qcard.dark{background:var(--ink);color:var(--paper)}
    .qbtn{display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:11px 20px;font-weight:800;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
    .qbtn.gold{background:var(--i);color:var(--ink);border-color:var(--i);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
    .qsec{display:inline-block;margin-left:14px;font-weight:700;color:var(--ink-soft);text-decoration:none;font-size:13.5px}
    .qcard.dark .qsec{color:#cfc8ba}
    .qeyebrow{font-family:'Spline Sans Mono','Courier New',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
    @media(max-width:720px){.qsplit{grid-template-columns:1fr}}
  

/* ---------------------------------------------------------------
   Unified nav — six items across every page. The original bar was
   spaced for four, so links wrapped and crowded the wordmark. This
   tightens tracking and pins the links to the right without changing
   the typeface, colours or the button.
   --------------------------------------------------------------- */
.nav{align-items:center;gap:18px}
.navlinks{margin-left:auto;align-items:center;gap:18px;flex-wrap:nowrap}
.navlinks a{white-space:nowrap;font-size:13px;letter-spacing:.12em}
.navlinks a.btn{letter-spacing:.04em}
@media(max-width:1180px){.navlinks{gap:13px}.navlinks a{font-size:12px;letter-spacing:.08em}}


/* ---------------------------------------------------------------
   Employers-page rules — ALL scoped under .p-employers.
   Learned the hard way: comparing exact selector strings missed
   descendant overlaps like `.hero h1`, which silently beat the home
   page's `h1.title` clamp and shrank the display heading. Scoping the
   whole block removes that class of bug entirely.
   --------------------------------------------------------------- */
.p-employers nav a {color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:13.5px;margin-left:18px}
.p-employers nav a.on {color:var(--ink)}
.p-employers .hero h1 {font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:46px;line-height:1.03;letter-spacing:-.025em;margin:0 auto 16px;max-width:20ch}
.p-employers .hero p {font-size:19px;color:var(--ink-soft);margin:0 auto 26px;max-width:58ch}
.p-employers .cta {display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:14px 28px;font-weight:800;font-size:16px;text-decoration:none;box-shadow:5px 5px 0 var(--ink)}
.p-employers .cta.alt {background:var(--paper);color:var(--ink);margin-left:12px}
@media(max-width:640px){
  .p-employers .hero h1 {font-size:32px}
  .p-employers .cta.alt {margin-left:0;margin-top:12px}
}
.p-employers .quad {max-width:820px;margin:36px auto 0;display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.p-employers .quad div {padding:22px 20px;border:1px solid var(--line)}
.p-employers .quad .lab {font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:13px;letter-spacing:.06em;margin-bottom:4px}
.p-employers .quad p {margin:0;font-size:13.5px;color:var(--ink-soft)}
.p-employers .qd {border-top:4px solid var(--d)!important}
.p-employers .qi {border-top:4px solid var(--i)!important}
.p-employers .qs {border-top:4px solid var(--s)!important}
.p-employers .qc {border-top:4px solid var(--c)!important}
.p-employers .section {max-width:1000px;margin:0 auto;padding:56px 28px}
.p-employers .section h2 {font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;text-align:center;margin:0 0 8px}
.p-employers .section .sub {text-align:center;color:var(--ink-soft);max-width:56ch;margin:0 auto 36px}
@media(max-width:760px){
  .p-employers .steps {grid-template-columns:1fr 1fr}
}
.p-employers .band {background:var(--ink);color:var(--paper)}
.p-employers .band .section h2 {color:var(--paper)}
.p-employers .feat {display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:760px){
  .p-employers .feat {grid-template-columns:1fr}
}
.p-employers .feat .f {border:2px solid #4a463d;padding:20px}
.p-employers .feat .f h3 {font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 5px;color:var(--paper)}
.p-employers .feat .f p {margin:0;color:#cfc8ba;font-size:13.5px}
.p-employers .closing {text-align:center;padding:60px 28px}
.p-employers .closing h2 {font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;margin:0 0 18px}
.p-employers .hero {max-width:1000px;margin:0 auto;padding:56px 28px 30px;text-align:center}
.p-employers .steps {display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.p-employers .step {border:2px solid var(--ink);background:var(--paper);padding:20px;box-shadow:5px 5px 0 var(--ink)}
.p-employers .step .n {font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:13px;color:var(--c);margin-bottom:8px}
.p-employers .step h3 {font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 5px}
.p-employers .step p {margin:0;font-size:13.5px;color:var(--ink-soft)}

/* Brandmark squares — colours moved here from per-page inline styles */
.brandmark span:nth-child(1){background:var(--d,#bb4430)}
.brandmark span:nth-child(2){background:var(--i,#d99a2b)}
.brandmark span:nth-child(3){background:var(--s,#4f7a6b)}
.brandmark span:nth-child(4){background:var(--c,#3a5a8c)}


/* ---------------------------------------------------------------
   Design system pass: wayfinding, rhythm, closers.
   1. Active nav state — the page you are on gets the gold underline.
   2. One section rhythm for marketing pages.
   3. Closing CTA band so pages end with a next step.
   4. Site footer with real navigation.
   --------------------------------------------------------------- */
.navlinks a[aria-current="page"]{border-bottom:3px solid var(--i,#d99a2b);padding-bottom:2px}
main.wrap>section{padding:52px 0 12px}
.ctaband{background:var(--ink,#211f1a);padding:46px 20px;text-align:center;margin-top:56px}
.ctaband h2{color:var(--paper,#f3eee2);font-size:26px;margin:0 auto 18px;max-width:none;text-align:center}
.ctaband a.go{background:var(--i,#d99a2b);color:var(--ink,#211f1a);padding:12px 24px;font-weight:800;display:inline-block;text-decoration:none;font-size:15px}
.sitefooter{border-top:2px solid var(--ink,#211f1a);background:var(--paper,#f3eee2);padding:38px 0 0}
.sitefooter .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;max-width:1120px;margin:0 auto;padding:0 24px;font-size:13.5px}
.sitefooter .colhead{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5b5647;margin:0 0 8px;font-weight:700}
.sitefooter .cols a{display:block;color:var(--ink,#211f1a);text-decoration:none;line-height:2.1}
.sitefooter .cols a:hover{text-decoration:underline;text-decoration-color:var(--i,#d99a2b);text-decoration-thickness:2px}
.sitefooter .blurb{color:#5b5647;line-height:1.65}
.sitefooter .fbrand{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:800;color:var(--ink,#211f1a)}
.sitefooter .fine{max-width:1120px;margin:26px auto 0;padding:14px 24px 22px;border-top:1px solid var(--line,#d8cfba);font-size:12.5px;color:#5b5647;line-height:1.6}
.sitefooter .fine a{color:inherit}

/* Header nav geometry is fixed site-wide; page-level .wrap rules must not distort it. */
header .wrap.nav{max-width:1080px!important;width:auto!important;margin:0 auto!important;padding:16px 24px!important;box-sizing:border-box}

/* Legacy pages made <header> itself a flex row, shrinking the nav to fit-content. */
header:has(> .wrap.nav){display:block!important;padding:0!important;gap:0!important}