/* ───────── accessibility · the menu, focus, skip link and the menu's modes ─────────
   Loaded on every public page after the site's own CSS. Generated companion: a11y-gen.css (contrast + reduced motion).
   Language of the site: white, ink #17171C, greys #5B5B63 / #6B6B73, hairlines #DCD9D0, neon #D4FF3F sparingly, square corners. */

:root{--mute:rgba(12,12,12,.64)}   /* was .55 (4.3:1); .64 gives 5.3:1 on white */

/* screen-reader-only text */
.a11y-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* skip link: hidden until it gets keyboard focus */
.a11y-skip{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 14px;background:#17171C;color:#fff!important;font:400 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.01em;text-decoration:none;transform:translateY(-200%);transition:transform .15s}
.a11y-skip:focus,.a11y-skip:focus-visible{transform:none}
main:focus,[role=main]:focus{outline:none}

/* focus: one consistent ring everywhere: a neon hairline hugging the element, an ink ring around it */
:focus-visible{outline:2px solid #17171C!important;outline-offset:2px!important;box-shadow:0 0 0 2px #D4FF3F!important}
.a11y-skip:focus-visible{outline-color:#D4FF3F!important;box-shadow:none!important}
/* on dark grounds the ink ring flips to white */
.cs-night :focus-visible,.al-dtip :focus-visible,.ft-dark :focus-visible{outline-color:#fff!important}
/* form fields: the ring replaces the site's outline:none */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0!important;box-shadow:none!important}
svg [role=button]:focus-visible,svg [tabindex]:focus-visible{outline:2px solid #17171C!important;outline-offset:2px}

/* ALTA peek (the live preview on the home page) used body>section; the page now has a <main> */
html.peek main>section:not(#alta),html.peek main>footer{display:none!important}

/* ───────── the trigger ─────────
   A quiet 32px square that lives inside the page's side margin (the grid has 40px of padding), so it never sits on
   text on desktop. Its label slides out on hover or keyboard focus, and while the panel is open. */
.a11y-btn{position:fixed!important;left:max(4px,env(safe-area-inset-left))!important;bottom:calc(12px + var(--a11y-lift,0px));z-index:58;display:inline-flex;align-items:center;gap:0;height:32px;min-width:32px;padding:0 7px!important;margin:0!important;box-sizing:border-box;
  background:#fff;color:#17171C;border:1px solid #17171C;border-radius:0;font:400 12px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.01em;text-transform:none;cursor:pointer;transform:none!important;
  transition:background .15s,color .15s,bottom .25s}
.a11y-btn svg{width:16px;height:16px;flex:none}
.a11y-btn .a11y-bl{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .22s cubic-bezier(.2,.7,.2,1),opacity .15s,margin .22s}
.a11y-btn:hover .a11y-bl,.a11y-btn:focus-visible .a11y-bl,.a11y-btn[aria-expanded=true] .a11y-bl{max-width:120px;opacity:1;margin:0 3px 0 8px}
.a11y-btn:hover,.a11y-btn[aria-expanded=true]{background:#17171C;color:#fff}
.a11y-btn[aria-expanded=true] svg{color:#D4FF3F}
/* a neon dot when any setting is on */
.a11y-btn .a11y-dot{position:absolute;top:-4px;right:-4px;width:7px;height:7px;background:#D4FF3F;border:1px solid #17171C;display:none}
.a11y-btn.on .a11y-dot{display:block}
@media (max-width:700px){.a11y-btn{left:max(6px,env(safe-area-inset-left))!important;bottom:calc(10px + var(--a11y-lift,0px));height:36px;min-width:36px;padding:0 9px!important}
  .a11y-btn:hover .a11y-bl{max-width:0;opacity:0;margin:0}}
@media print{.a11y-btn,.a11y-panel,.a11y-skip{display:none!important}}

/* ───────── the panel ───────── */
.a11y-panel{position:fixed;left:16px;bottom:calc(54px + var(--a11y-lift,0px));z-index:1001;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 84px - var(--a11y-lift,0px));overflow:auto;overscroll-behavior:contain;
  background:#fff;color:#17171C;border:1px solid #17171C;border-radius:0;box-shadow:0 18px 40px -24px rgba(23,23,28,.45);
  font:300 15px/1.45 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:0;text-align:left;
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .22s cubic-bezier(.2,.7,.2,1)}
.a11y-panel[hidden]{display:none}
.a11y-panel.on{opacity:1;transform:none}
@media (max-width:700px){.a11y-panel{left:12px;right:12px;width:auto;bottom:calc(60px + var(--a11y-lift,0px))}}
.a11y-panel *{box-sizing:border-box}
.a11y-panel button{font:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0;cursor:pointer;text-transform:none;letter-spacing:inherit}

.a11y-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px 14px;border-bottom:1px solid #DCD9D0}
.a11y-k{margin:0 0 6px;font:400 12px/1 'JetBrains Mono',ui-monospace,monospace;color:#5B5B63;letter-spacing:.01em}
.a11y-h{margin:0;font:300 22px/1.15 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:-.015em;color:#17171C}
.a11y-x{flex:none;display:inline-flex;gap:6px;align-items:center;padding:6px 0 6px 6px!important;font:400 12px/1 'JetBrains Mono',ui-monospace,monospace!important;color:#17171C}
.a11y-x:hover{text-decoration:underline;text-underline-offset:3px}

.a11y-list{list-style:none;margin:0;padding:0}
.a11y-row{border-bottom:1px solid #DCD9D0}
.a11y-sw{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:16px;width:100%;padding:13px 20px!important;text-align:left}
.a11y-sw:hover{background:#F7F6F2}
/* full-width rows: the ring sits inside, so the panel's edge doesn't clip it */
.a11y-sw:focus-visible{outline-offset:-2px!important;box-shadow:inset 0 0 0 4px #D4FF3F!important}
.a11y-nm{display:block;font-weight:400;font-size:15px;color:#17171C}
.a11y-ds{display:block;margin-top:2px;font-size:13px;color:#5B5B63}
/* the switch: a square track, a square knob; neon only when on */
.a11y-tg{position:relative;width:34px;height:18px;border:1px solid #17171C;background:#fff;flex:none}
.a11y-tg::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:#17171C;transition:left .15s}
.a11y-sw[aria-checked=true] .a11y-tg{background:#17171C}
.a11y-sw[aria-checked=true] .a11y-tg::after{left:18px;background:#D4FF3F}

.a11y-size{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:13px 20px}
.a11y-seg{display:flex;border:1px solid #17171C}
.a11y-seg button{min-width:36px;height:30px;padding:0 8px!important;font-family:'Hanken Grotesk',system-ui,sans-serif!important;font-weight:400!important;line-height:1!important;color:#17171C}
.a11y-seg button+button{border-left:1px solid #17171C!important}
.a11y-seg button:nth-child(1){font-size:13px!important}.a11y-seg button:nth-child(2){font-size:16px!important}.a11y-seg button:nth-child(3){font-size:19px!important}
.a11y-seg button:hover{background:#F7F6F2}
.a11y-seg button[aria-pressed=true]{background:#17171C;color:#fff}

.a11y-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 16px;font:400 12px/1.2 'JetBrains Mono',ui-monospace,monospace}
.a11y-ft a,.a11y-reset{color:#17171C!important;text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:1px}
.a11y-reset{padding:4px 0!important}
.a11y-reset[disabled]{color:#6B6B73!important;text-decoration:none!important;cursor:default}
.a11y-note{margin:0;padding:0 20px 14px;font-size:12.5px;color:#5B5B63}

/* ───────── the modes ───────── */

/* larger text, two steps. The site sets type in px, so the whole page scales, like browser zoom. */
html.a11y-t1{zoom:1.15}
html.a11y-t2{zoom:1.3}
html.a11y-t1 .a11y-panel,html.a11y-t1 .a11y-btn{zoom:.87}
html.a11y-t2 .a11y-panel,html.a11y-t2 .a11y-btn{zoom:.77}

/* high contrast: greys become ink (see a11y-gen.css), hairlines darken, nothing is dimmed */
html.a11y-hc{--mute:#17171C;--hair:rgba(12,12,12,.4)}
html.a11y-hc .cs-root{--cs-ink-2:#16141f;--cs-ink-3:#2b2838;--cs-rule:#8d8a9c;--cs-rule-strong:#16141f;--cs-night-ink-2:#ecebf3}
html.a11y-hc [class*="cs_beatInner_"],html.a11y-hc [class*="cs_beat_"]{opacity:1!important}
html.a11y-hc ::placeholder{color:#3A3A42!important;opacity:1}
html.a11y-hc .jf-row input,html.a11y-hc .cq-f input{border-color:#17171C!important}
html.a11y-hc .a11y-ds,html.a11y-hc .a11y-k,html.a11y-hc .a11y-note{color:#17171C}

/* stop animations: everything settles at its end state; the site's own reduced-motion rules replay in a11y-gen.css */
html.a11y-calm *,html.a11y-calm *::before,html.a11y-calm *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.a11y-calm{scroll-behavior:auto!important}
html.a11y-calm [class*="cs_beatInner_"],html.a11y-calm [class*="cs_beat_"]{opacity:1!important;transform:none!important}
html.a11y-calm .mo-track,html.a11y-calm [class*="cs_track_"]{animation:none!important;transform:none!important}
html.a11y-calm .wk-pulse .pl-run{animation:none!important;stroke-dasharray:none!important}

/* underline links */
html.a11y-links a:not(.a11y-skip){text-decoration:underline!important;text-underline-offset:3px!important;text-decoration-thickness:1px!important}

/* readable font: a regular-weight system sans in place of the thin display weights and the mono */
html.a11y-font body,html.a11y-font body :where(p,li,dd,dt,span,a,em,i,b,strong,small,label,button,input,textarea,select,blockquote,figcaption,h1,h2,h3,h4,div,td,th,code,kbd){font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;letter-spacing:normal!important}
html.a11y-font body :where(p,li,dd,dt,span,a,em,i,small,label,button,input,textarea,blockquote,figcaption,div,td){font-weight:400!important}
html.a11y-font body :where(h1,h2,h3,h4){font-weight:500!important}
html.a11y-font body :where(b,strong){font-weight:600!important}
html.a11y-font body{line-height:1.6}

/* bigger cursor */
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M4 3l0 26 7-6.5 4.5 10 4.5-2-4.5-10 9.5-.5z' fill='%2317171C' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,auto!important}
html.a11y-cursor :where(a,button,[role=button],[role=switch],label,summary,select,.chip,.opt),html.a11y-cursor :where(a,button,[role=button],[role=switch],label,summary) *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M12 4a2.5 2.5 0 0 1 5 0v10l1-.2a2.5 2.5 0 0 1 4 1l.6.1a2.5 2.5 0 0 1 3.8 1.3l.6.1A2.5 2.5 0 0 1 30 19v6c0 5-3 9-8.5 9H18c-3 0-5-1.3-6.8-3.6L5.4 23a2.6 2.6 0 0 1 4-3.3L12 22z' fill='%23D4FF3F' stroke='%2317171C' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 14 2,pointer!important}
html.a11y-cursor :where(input[type=text],input:not([type]),textarea){cursor:text!important}

/* ───────── the accessibility statement page (accessibility.html), in the job-fit page's layout ───────── */
.ac .jf-sub{grid-column:1/span 7}
.ac-body{padding:24px 0 112px}
.ac-col{grid-column:1/span 8;font:300 18px/1.6 'Hanken Grotesk',sans-serif;color:#17171C}
.ac-col p{margin:0 0 16px;max-width:66ch}
.ac-col b{font-weight:500}
.ac-col a{color:#17171C;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ac-col a:hover{background:#D4FF3F}
.ac-h{margin:64px 0 20px;padding-top:20px;border-top:1px solid #17171C;font:300 clamp(26px,2.4vw,34px)/1.15 'Hanken Grotesk',sans-serif;letter-spacing:-.02em}
.ac-col>.ac-h:first-child{margin-top:16px}
.ac-dl{margin:0 0 16px;padding:0}
.ac-r{display:grid;grid-template-columns:minmax(160px,1fr) 2.4fr;gap:8px 32px;padding:16px 0;border-bottom:1px solid #DCD9D0}
.ac-r:first-child{border-top:1px solid #DCD9D0}
.ac-r dt{font:400 13px/1.5 'JetBrains Mono',ui-monospace,monospace;color:#17171C;letter-spacing:.01em;padding-top:3px}
.ac-r dd{margin:0;font:300 17px/1.55 'Hanken Grotesk',sans-serif;color:#3A3A42}
.ac-contact .ac-r dd{color:#17171C;font-weight:400}
.ac-date{margin-top:48px!important;font:400 12px/1 'JetBrains Mono',ui-monospace,monospace!important;color:#5B5B63}
@media (max-width:900px){.ac .jf-sub,.ac-col{grid-column:1/-1}.ac-body{padding:8px 0 72px}.ac-r{grid-template-columns:1fr;gap:4px}.ac-h{margin-top:48px}}
/* the footer's accessibility link sits beside "Back to top" */
.ft-end .ft-a11y{margin-left:auto;margin-right:24px}

/* targeted contrast fixes the generator leaves alone (they use !important or depend on state) */
.tm .tm-dots li{color:#6B6B73!important}
.jf-phases li{color:#6B6B73}
/* room under the footer's last line for the accessibility button */
@media (max-width:700px){.ft-end{padding-bottom:48px}}