/* ============================================================
   greenAI — a11y.css
   The accessibility widget (button + panel) and every display
   mode it can switch on. Self-hosted, no dependencies.

   Two rules kept throughout:
   · the widget itself is sized in px, so it never grows with the
     text-zoom modes and never leaves the viewport;
   · nothing here paints anything until a mode class lands on
     <html> (the button aside), so the site is untouched at rest.
   ============================================================ */

:root{
  --a11y-zoom:1;
  --a11y-accent:var(--green-lite,#4ade80);
  --a11y-accent-ink:#04140b;
  --a11y-panel-bg:rgba(6,11,8,.96);
  --a11y-panel-ink:#f0f5f2;
  --a11y-panel-muted:#9aada3;
  --a11y-panel-line:rgba(240,245,242,.13);
  --a11y-opt-bg:rgba(255,255,255,.04);
}

/* ============================================================
   1 · the button
   Visual bottom-LEFT corner, in both writing directions —
   so `left`, not `inset-inline-end`.
   ============================================================ */
.a11y-fab{
  position:fixed;left:20px;bottom:20px;z-index:2147483000;
  width:52px;height:52px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:var(--a11y-accent);
  color:var(--a11y-accent-ink);
  cursor:pointer;
  box-shadow:0 16px 34px -16px rgba(74,222,128,.8),
             0 0 0 1px rgba(255,255,255,.10) inset,
             0 1px 0 rgba(255,255,255,.42) inset;
  transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)),
             box-shadow .4s var(--ease,cubic-bezier(.16,1,.3,1));
}
.a11y-fab:hover{transform:translateY(-1px);box-shadow:0 22px 44px -16px rgba(74,222,128,.95),0 0 0 1px rgba(255,255,255,.12) inset,0 1px 0 rgba(255,255,255,.5) inset}
.a11y-fab:active{transform:translateY(0)}
.a11y-fab svg{display:block;width:30px;height:30px}
.a11y-fab:focus-visible{outline:2px solid var(--green-lite,#4ade80);outline-offset:3px}

/* ============================================================
   2 · the panel
   ============================================================ */
.a11y-panel{
  position:fixed;left:20px;bottom:84px;z-index:2147483001;
  width:320px;max-width:calc(100vw - 40px);
  max-height:80vh;
  display:flex;flex-direction:column;
  background:var(--a11y-panel-bg);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--a11y-panel-line);
  border-radius:18px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04) inset;
  color:var(--a11y-panel-ink);
  font-family:inherit;
  text-align:start;
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .28s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .28s var(--ease,cubic-bezier(.16,1,.3,1));
}
.a11y-panel.is-open{opacity:1;transform:none}
/* the UA sheet's [hidden] rule loses to .a11y-panel{display:flex} */
.a11y-panel[hidden]{display:none}

.a11y-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 14px;
  border-bottom:1px solid var(--a11y-panel-line);
}
/* two-class selector on purpose: it has to outrank the text-zoom
   overrides further down, which restate every h2 on the page. */
.a11y-panel .a11y-title{
  margin:0;flex:1 1 auto;
  font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  color:var(--a11y-panel-ink);
}
.a11y-x{
  flex:none;width:30px;height:30px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--a11y-panel-line);border-radius:50%;
  color:var(--a11y-panel-muted);cursor:pointer;
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1)),border-color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.a11y-x:hover{color:var(--a11y-panel-ink);border-color:var(--a11y-accent)}
.a11y-x svg{display:block;width:14px;height:14px}

.a11y-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:14px 18px 16px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* --- text-size row: [A+] [125%] [A−] --- */
.a11y-zoomrow{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:8px;
  margin-bottom:10px;
}
.a11y-zoomval{
  display:flex;align-items:center;justify-content:center;
  min-width:58px;padding:0 6px;
  border:1px solid var(--a11y-panel-line);border-radius:12px;
  background:var(--a11y-opt-bg);
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  direction:ltr;
}
.a11y-zoomrow .a11y-opt{min-height:52px;padding:8px 6px}
.a11y-zoomrow .a11y-opt .a11y-lbl{font-size:11.5px}

/* --- the toggle grid --- */
.a11y-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.a11y-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:74px;padding:10px 8px;
  background:var(--a11y-opt-bg);
  border:1px solid var(--a11y-panel-line);border-radius:12px;
  color:var(--a11y-panel-ink);
  font-family:inherit;font-size:12.5px;font-weight:400;line-height:1.25;
  text-align:center;cursor:pointer;
  transition:background-color .3s var(--ease,cubic-bezier(.16,1,.3,1)),
             border-color .3s var(--ease,cubic-bezier(.16,1,.3,1)),
             color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.a11y-opt svg{display:block;width:20px;height:20px;flex:none}
.a11y-opt .a11y-lbl{display:block}
.a11y-opt:hover{border-color:rgba(74,222,128,.42);background:rgba(255,255,255,.07)}
.a11y-opt[aria-pressed="true"]{
  background:rgba(74,222,128,.16);
  border-color:rgba(74,222,128,.6);
  color:var(--a11y-accent);
  font-weight:500;
}
.a11y-opt:focus-visible,.a11y-x:focus-visible,.a11y-reset:focus-visible,.a11y-stmt:focus-visible{
  outline:2px solid var(--green-lite,#4ade80);outline-offset:3px;border-radius:12px;
}

/* --- footer --- */
.a11y-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;
  border-top:1px solid var(--a11y-panel-line);
}
.a11y-reset{
  background:var(--a11y-opt-bg);
  border:1px solid var(--a11y-panel-line);border-radius:980px;
  padding:9px 16px;
  color:var(--a11y-panel-muted);
  font-family:inherit;font-size:13px;font-weight:500;line-height:1;
  cursor:pointer;
  transition:color .3s var(--ease,cubic-bezier(.16,1,.3,1)),border-color .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.a11y-reset:hover{color:var(--a11y-panel-ink);border-color:rgba(240,245,242,.24)}
.a11y-stmt{
  color:var(--a11y-accent);font-size:13px;font-weight:500;
  text-decoration:none;border-radius:6px;
}
.a11y-stmt:hover{text-decoration:underline;text-underline-offset:4px}

/* --- the reading guide --- */
.a11y-bar{
  position:fixed;left:0;right:0;top:0;height:8px;
  z-index:2147482000;pointer-events:none;
  background:rgba(74,222,128,.42);
  box-shadow:0 0 0 1px rgba(74,222,128,.55);
}

/* --- screen-reader announcements --- */
.a11y-vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

@media (max-width:480px){
  .a11y-fab{width:44px;height:44px;left:14px;bottom:14px}
  .a11y-fab svg{width:25px;height:25px}
  .a11y-panel{left:12px;right:12px;width:auto;max-width:none;bottom:68px;max-height:78vh}
}
@media (prefers-reduced-motion:reduce){
  .a11y-panel,.a11y-fab,.a11y-opt,.a11y-x,.a11y-reset{transition:none}
  .a11y-panel{transform:none}
}

/* ============================================================
   3 · text zoom
   html gets a scaled root size, and every px font-size in
   site.css is restated in rem so it follows. clamp() middles
   are in vw — they are multiplied by the same factor.
   ============================================================ */
html.a11y-zoomed{
  font-size:calc(100% * var(--a11y-zoom));
  --hdr-h:calc(64px * var(--a11y-zoom));
}
html.a11y-zoomed body{font-size:1.0625rem}
html.a11y-zoomed h1{font-size:clamp(2.125rem,calc(4.6vw * var(--a11y-zoom)),3.5rem)}
html.a11y-zoomed .hero-home h1{font-size:clamp(2.5rem,calc(6vw * var(--a11y-zoom)),4.5rem)}
html.a11y-zoomed h2{font-size:clamp(1.75rem,calc(3.2vw * var(--a11y-zoom)),2.375rem)}
html.a11y-zoomed h3{font-size:1.375rem}
html.a11y-zoomed .lead{font-size:clamp(1.125rem,calc(2.2vw * var(--a11y-zoom)),1.375rem)}
html.a11y-zoomed .eyebrow{font-size:.84375rem}
html.a11y-zoomed .cap,html.a11y-zoomed .note{font-size:.90625rem}
html.a11y-zoomed .wm-txt{font-size:1.375rem}
html.a11y-zoomed .btn,html.a11y-zoomed .lnk,html.a11y-zoomed .pill{font-size:1rem}
html.a11y-zoomed .btn-sm{font-size:.9375rem}
html.a11y-zoomed .navlinks a{font-size:.9375rem}
html.a11y-zoomed .burger{font-size:.90625rem;height:auto;padding-block:10px}
html.a11y-zoomed .menu a{font-size:1.0625rem}
html.a11y-zoomed .card h3+p{font-size:1.0625rem}
html.a11y-zoomed .rows--faq h3{font-size:1.25rem}
html.a11y-zoomed .items h3{font-size:1.1875rem}
html.a11y-zoomed .items p{font-size:.90625rem}
html.a11y-zoomed .reportcard .rc-title{font-size:.875rem}
html.a11y-zoomed .rc-row span{font-size:.9375rem}
html.a11y-zoomed .flowcol h3{font-size:.9375rem}
html.a11y-zoomed .chips li{font-size:.875rem}
html.a11y-zoomed .logo{font-size:.8125rem}
html.a11y-zoomed .ph{font-size:.875rem}
html.a11y-zoomed .big{font-size:clamp(1.5rem,calc(3vw * var(--a11y-zoom)),2.125rem)}
html.a11y-zoomed .ftr-h{font-size:.8125rem}
html.a11y-zoomed .ftr a{font-size:.9375rem}
html.a11y-zoomed .ftr .addr{font-size:.875rem}
html.a11y-zoomed .ftr-btm{font-size:.8125rem}
html.a11y-zoomed .stage-tag{font-size:.78125rem}
html.a11y-zoomed .skip:focus{font-size:.9375rem}
html.a11y-zoomed .legal h2{font-size:clamp(1.375rem,calc(2.4vw * var(--a11y-zoom)),1.625rem)}
html.a11y-zoomed .legal h3{font-size:1.1875rem}
html.a11y-zoomed .legal p,
html.a11y-zoomed .legal ul,
html.a11y-zoomed .legal ol{font-size:1.0625rem}
html.a11y-zoomed .legal .upd{font-size:.875rem}
/* headline max-widths are in ch/em, so they follow on their own;
   only the fixed-height header needs help at the larger steps. */
html.a11y-zoomed .bar{min-height:var(--hdr-h);height:auto;padding-block:8px;flex-wrap:wrap}

/* ============================================================
   4 · high contrast
   ============================================================ */
html.a11y-contrast{
  --bg:#000;--ink:#fff;--muted:#fff;--faint:#fff;--faint-txt:#fff;
  --green:#ffff00;--green-lite:#ffff00;
  --hairline:#fff;--hairline-soft:#fff;
  --card-bg:#000;--card-bg-2:#000;
  --a11y-accent-ink:#000;
  --a11y-panel-bg:#000;--a11y-panel-ink:#fff;--a11y-panel-muted:#fff;
  --a11y-panel-line:#fff;--a11y-opt-bg:#000;
  background:#000;
}
html.a11y-contrast body{background:#000;color:#fff}
html.a11y-contrast .light,
html.a11y-contrast body::before,
html.a11y-contrast body::after,
html.a11y-contrast .mark::before{display:none !important}
html.a11y-contrast :is(main,.hdr,.ftr) :is(h1,h2,h3,p,li,span,strong,em,td,th,label,legend,summary,figcaption){color:#fff !important}
html.a11y-contrast .hdr,
html.a11y-contrast .menu,
html.a11y-contrast .sec.alt{background:#000 !important}
html.a11y-contrast .sec.alt{border-color:#fff !important}
html.a11y-contrast .eyebrow{color:#fff !important}
html.a11y-contrast :is(.card,.reportcard,.pill,.chips li,.logo,.ph,.avatar){background:#000 !important;border-color:#fff !important}
html.a11y-contrast :is(main,.hdr,.ftr) :is(a,a *,.lnk,.big,.addr-link){color:#ff0 !important}
html.a11y-contrast :is(main,.hdr,.ftr) a{text-decoration:underline !important;text-underline-offset:3px}
html.a11y-contrast .btn{
  background:#000 !important;background-image:none !important;
  color:#fff !important;border:2px solid #fff !important;box-shadow:none !important;
}
html.a11y-contrast .btn *{color:#fff !important}
html.a11y-contrast .skip:focus{background:#000 !important;background-image:none !important;color:#ff0 !important;border:2px solid #fff}
html.a11y-contrast .wm-txt .ai{color:#ff0 !important;text-shadow:none !important}
html.a11y-contrast .dot{background:#ff0 !important;box-shadow:none !important}
html.a11y-contrast :is(.mark img,.wm-mark,.logo img){filter:brightness(0) invert(1) !important;opacity:1 !important}
html.a11y-contrast .rc-bar{background:#2a2a2a !important;border:1px solid #fff}
html.a11y-contrast .rc-bar i{background:#ff0 !important;opacity:1 !important}
html.a11y-contrast .card:hover,html.a11y-contrast .logo:hover{border-color:#ff0 !important;transform:none}
/* the widget's own chrome follows the mode */
html.a11y-contrast .a11y-opt:hover{background:#1a1a1a;border-color:#ff0}
html.a11y-contrast .a11y-opt[aria-pressed="true"]{background:#3a3a00;border-color:#ff0;color:#ff0}
html.a11y-contrast .a11y-panel{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px #fff}
html.a11y-contrast .a11y-bar{background:rgba(255,255,0,.55);box-shadow:0 0 0 1px #ff0}

/* ============================================================
   5 · light mode  (mutually exclusive with high contrast)
   ============================================================ */
html.a11y-light{
  --bg:#ffffff;--ink:#111111;--muted:#444444;--faint:#8a8a8a;--faint-txt:#555555;
  --green:#0E7C4A;--green-lite:#0E7C4A;
  --hairline:#dddddd;--hairline-soft:#eeeeee;
  --card-bg:#f5f6f4;--card-bg-2:#f5f6f4;
  --a11y-accent-ink:#ffffff;
  --a11y-panel-bg:rgba(255,255,255,.97);--a11y-panel-ink:#111111;--a11y-panel-muted:#444444;
  --a11y-panel-line:#dddddd;--a11y-opt-bg:#f5f6f4;
  background:#fff;color-scheme:light;
}
html.a11y-light body{background:#fff;color:#111}
html.a11y-light .light,
html.a11y-light body::before,
html.a11y-light body::after{display:none !important}
html.a11y-light .hdr{background:rgba(255,255,255,.86) !important}
html.a11y-light .menu{background:rgba(255,255,255,.97) !important}
html.a11y-light .sec.alt{background:#f2f4f2 !important}
html.a11y-light .eyebrow{color:#444 !important}
html.a11y-light .btn-primary{
  color:#fff !important;
  background:linear-gradient(180deg,#12925a,#0E7C4A) !important;
  box-shadow:0 12px 26px -14px rgba(14,124,74,.65),0 0 0 1px rgba(0,0,0,.06) inset !important;
}
html.a11y-light .btn-primary:hover{background:linear-gradient(180deg,#16a566,#0f8b53) !important}
html.a11y-light .skip:focus{background:#0E7C4A !important;background-image:none !important;color:#fff !important}
html.a11y-light .wm-txt .ai{text-shadow:none !important}
html.a11y-light .dot{box-shadow:0 0 10px rgba(14,124,74,.5) !important}
html.a11y-light .mark::before{background:radial-gradient(closest-side,rgba(14,124,74,.16),transparent 76%) !important}
html.a11y-light .mark img{filter:drop-shadow(0 10px 22px rgba(14,124,74,.20)) !important}
html.a11y-light .rc-bar{background:rgba(0,0,0,.09) !important}
html.a11y-light .card:hover,html.a11y-light .card:focus-within,
html.a11y-light .logo:hover,html.a11y-light .logo:focus-visible{border-color:rgba(14,124,74,.5) !important}
/* the client wall ships white monochrome PNGs: flip them to dark ink.
   The brand mark keeps its own colour. */
html.a11y-light .logo img{filter:invert(1) !important;opacity:.82}
html.a11y-light .logo:hover img,html.a11y-light .logo:focus-visible img{opacity:1}
/* the widget's own chrome follows the mode */
html.a11y-light .a11y-opt:hover{background:#eaece9;border-color:rgba(14,124,74,.45)}
html.a11y-light .a11y-opt[aria-pressed="true"]{background:rgba(14,124,74,.12);border-color:rgba(14,124,74,.55);color:#0E7C4A}
html.a11y-light .a11y-panel{box-shadow:0 26px 60px -24px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.05) inset}
html.a11y-light .a11y-fab{box-shadow:0 14px 30px -14px rgba(14,124,74,.75),0 0 0 1px rgba(0,0,0,.06) inset}
html.a11y-light .a11y-bar{background:rgba(14,124,74,.30);box-shadow:0 0 0 1px rgba(14,124,74,.45)}

/* ============================================================
   6 · grayscale
   The filter goes on the page regions, never on <body> — a
   filtered ancestor becomes the containing block for its
   position:fixed children, which would break this widget.
   ============================================================ */
html.a11y-gray main,
html.a11y-gray .hdr,
html.a11y-gray .ftr,
html.a11y-gray .light{filter:grayscale(1)}

/* ============================================================
   7 · highlight links
   ============================================================ */
html.a11y-links :is(main,.hdr,.ftr) a{
  text-decoration:underline !important;
  text-decoration-thickness:1px;text-underline-offset:3px;
  background:rgba(74,222,128,.14);
  border-radius:4px;
}
html.a11y-links :is(main,.hdr,.ftr) a:hover,
html.a11y-links :is(main,.hdr,.ftr) a:focus{
  outline:2px solid var(--green-lite,#4ade80);outline-offset:2px;
  background:rgba(74,222,128,.24);
}
html.a11y-links .logo{background:rgba(74,222,128,.10)}

/* ============================================================
   8 · readable font
   ============================================================ */
html.a11y-font,
html.a11y-font body,
html.a11y-font *{
  font-family:Arial,"Arial Hebrew",Helvetica,sans-serif !important;
  letter-spacing:0 !important;
}

/* ============================================================
   9 · text spacing
   ============================================================ */
html.a11y-spacing :is(main,.hdr,.ftr){line-height:1.9;letter-spacing:.04em;word-spacing:.12em}
html.a11y-spacing :is(main,.hdr,.ftr) :is(h1,h2,h3,p,li,.lead,.cap,.note,.big,a,span){
  line-height:1.9 !important;letter-spacing:.04em !important;word-spacing:.12em !important;
}
html.a11y-spacing main p{margin-block-end:1.1em}
html.a11y-spacing .legal p{margin-block-end:1.3em}
html.a11y-spacing .legal li{margin-block-end:.7em}
html.a11y-spacing .bar{height:auto;min-height:var(--hdr-h);padding-block:8px}

/* ============================================================
   10 · stop animations
   ============================================================ */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}
html.a11y-motion .light{animation:none !important;opacity:.9}

/* ============================================================
   11 · large cursor
   ============================================================ */
html.a11y-cursor,
html.a11y-cursor body,
html.a11y-cursor body *{
  cursor:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3.2 6 32.4 13.6 25.1 18.7 36.2 24.2 33.6 19.1 22.9 29.4 22.1Z' fill='%23000000' stroke='%23ffffff' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,auto;
}

/* ============================================================
   12 · highlight headings
   ============================================================ */
html.a11y-headings :is(main,.ftr) :is(h1,h2,h3){
  outline:2px dashed var(--green-lite,#4ade80);
  outline-offset:6px;
  text-decoration:underline;
  text-underline-offset:5px;
}
html.a11y-headings .vh{outline:none;text-decoration:none}