/* =====================================================================
   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:28px;height:28px}
  .brandmark span{border-radius:0}
  .brandname{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;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)}
  /* Keyboard focus for those two boxes (WCAG 2.0 AA, SC 2.4.7 Focus
     Visible). The rule above kills the outline at (0,2,1), and this file
     is linked after every page's own <style>, so the input:focus-visible
     rules those pages carry - (0,1,1), lower and earlier - never reach a
     .subbox input. Anyone tabbing to the newsletter box gets a border
     that darkens by one shade and nothing else. This selector is (0,3,1),
     so it beats the outline:none on specificity, and it sits after it in
     the same file, so it would win on source order too. Resting state is
     untouched: the border, background and padding above still apply, and
     the ring appears only for keyboard focus, never on a mouse click. */
  .subbox input[type=text]:focus-visible,.subbox input[type=email]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .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}

/* ---------------------------------------------------------------
   Cookie consent bar — where its styles are, and why not here.

   The bar's own rules (.qc-bar, .qc-in, .qc-btn and the rest) are
   injected by brand/quadrant-consent.js and are deliberately NOT
   in this file. Only 13 of the 40 pages carrying the Google tag
   link this stylesheet, and a consent bar that looks right on a
   third of the site is worse than no bar at all. The script's
   copy uses var(--ink,#211f1a) style fallbacks, so it picks up
   the :root palette at the top of this file where this file is
   loaded, and falls back to the same hex where it is not. Do not
   add competing .qc-* rules
   here: there would be two sources for one component and they
   would drift.

   What this file has to respect:

   1. Z-INDEX. The bar sits at 60. The sticky header above is at
      40. Nothing in this file may claim 60 or higher without
      moving the bar first, or the visitor gets asked a question
      he cannot reach.
   2. The script puts .qc-asking on <html> while the question is
      on screen and takes it off when it is answered. Anything
      that needs to get out of the bar's way hangs off that
      class, so it stops applying the moment the bar is gone.
   3. NAMESPACE. Everything the bar owns is prefixed .qc- with
      the hyphen. The existing .qcard, .qbtn, .qsplit, .qsec and
      .qeyebrow rules above do not collide with it, and new ones
      must not either.
   --------------------------------------------------------------- */

/* 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}