/* Visitor display options + read-aloud bar. Loaded after site.css; driven by data-* attributes
   that js/a11y.js sets on <html>. Fonts are self-hosted (SIL Open Font License, see fonts/). */
@font-face{font-family:"OpenDyslexic";font-weight:400;font-display:swap;src:url(../fonts/opendyslexic-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"OpenDyslexic";font-weight:700;font-display:swap;src:url(../fonts/opendyslexic-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

/* Text size (rem-based layout scales with the root size) */
html[data-size="125"]{font-size:125%}html[data-size="150"]{font-size:150%}html[data-size="200"]{font-size:200%}
/* Enlarged text on small screens: let grid children shrink, wrap long words, keep 16px gutters */
.grid>*,.process-grid>*,.hero-grid>*,.contact-layout>*,.two-up>*,.form-grid>div{min-width:0}
h1,h2,h3,.btn,.eyebrow,.service-card,.process-grid li{overflow-wrap:anywhere}
@media(max-width:48rem){.services-grid,.process-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:48rem){
html[data-size] .wrap{padding-inline:16px}
html[data-size] main>section:not(.hero):not(.audience-strip):not(.page-hero){padding-inline:16px}
html[data-size="125"] h1,html[data-size="150"] h1,html[data-size="200"] h1{font-size:1.9rem}
html[data-size="150"] h2,html[data-size="200"] h2{font-size:1.45rem}
html[data-size="200"] h1{font-size:1.6rem}html[data-size="200"] h2{font-size:1.3rem}html[data-size="200"] h3{font-size:1.1rem}
html[data-size="200"] .hero-panel,html[data-size="200"] .form-card,html[data-size="200"] .service-card{padding:1rem}
}
/* Font */
html[data-font=dyslexic] *{font-family:"OpenDyslexic","Comic Sans MS",system-ui,sans-serif!important}
html[data-font=legible] *{font-family:"Atkinson Hyperlegible",system-ui,sans-serif!important}
html[data-font=dyslexic] body{line-height:1.8}
/* Extra spacing (WCAG 1.4.12 values or better) */
html[data-spacing=on] *{letter-spacing:.06em!important;word-spacing:.16em!important}
html[data-spacing=on] body{line-height:1.9}html[data-spacing=on] p{margin-bottom:1.6em}
/* Links / motion */
html[data-links=underline] a{text-decoration:underline!important;text-decoration-thickness:.1em!important}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
/* Color themes chosen by the visitor (html[data-theme]); "contrast" = white on black.
   High-contrast ones also get html[data-contrast] for shared border rules. */
:root[data-theme=contrast]{color-scheme:dark;--ink:#fff;--sub:#fff;--line:#fff;--bg:#000;--soft:#000;--brand:#ffd60a;--dark:#8fe4ff;--accent:#ffd60a;--card:#000;--panel:#000;--on-brand:#000;--on-panel:#fff;--on-panel-soft:#fff;--on-panel-link:#8fe4ff;--field:#fff;--ph:#e6e6e6;--mute:#fff;--warn:#ff9c9c;--focus:#ffd60a;--hero:#000}
:root[data-theme=ybk]{color-scheme:dark;--ink:#ff0;--sub:#ff0;--line:#ff0;--bg:#000;--soft:#000;--brand:#ff0;--dark:#ff0;--accent:#ff0;--card:#000;--panel:#000;--on-brand:#000;--on-panel:#ff0;--on-panel-soft:#ff0;--on-panel-link:#ff0;--field:#ff0;--ph:#e6e600;--mute:#ff0;--warn:#ff9c9c;--focus:#0ff;--hero:#000}
:root[data-theme=bky]{color-scheme:light;--ink:#000;--sub:#000;--line:#000;--bg:#ff0;--soft:#ff0;--brand:#000;--dark:#000;--accent:#ff0;--card:#ff0;--panel:#000;--on-brand:#ff0;--on-panel:#ff0;--on-panel-soft:#ff0;--on-panel-link:#ff0;--field:#000;--ph:#333;--mute:#000;--warn:#8a0000;--focus:#00c;--hero:#ff0}
:root[data-theme=bkg]{color-scheme:light;--ink:#000;--sub:#000;--line:#000;--bg:#b9f6ca;--soft:#b9f6ca;--brand:#000;--dark:#000;--accent:#b9f6ca;--card:#b9f6ca;--panel:#000;--on-brand:#b9f6ca;--on-panel:#b9f6ca;--on-panel-soft:#b9f6ca;--on-panel-link:#b9f6ca;--field:#000;--ph:#2b3a30;--mute:#000;--warn:#7a0000;--focus:#00c;--hero:#b9f6ca}
:root[data-theme=cream]{color-scheme:light;--ink:#1f2326;--sub:#3b4448;--line:#c2b57f;--bg:#faf0c8;--soft:#f2e5b0;--card:#fdf6d8;--field:#6f6538;--ph:#4d5559;--mute:#4d5559;--hero:#faf0c8}
html[data-contrast] .hero-panel,html[data-contrast] .site-footer,html[data-contrast] .mark,html[data-contrast] .site-nav .cta,html[data-contrast] .approach,html[data-contrast] .service-card,html[data-contrast] .form-card,html[data-contrast] .a11y-dock button{border:2px solid var(--line)}
html[data-contrast] .audience-strip,html[data-contrast] .page-hero,html[data-contrast] .site-header,html[data-contrast] .hero{border-bottom:2px solid var(--line)}
html[data-contrast] .btn-primary,html[data-contrast] .btn-primary:hover{border-color:var(--line)}
html[data-contrast] .btn-primary:hover{text-decoration:underline}
:root[data-theme=contrast] .btn-primary:hover{background:#fff}
html[data-theme=bky] .hero-panel,html[data-theme=bky] .site-footer,html[data-theme=bky] .mark,html[data-theme=bky] .site-nav .cta,html[data-theme=bkg] .hero-panel,html[data-theme=bkg] .site-footer,html[data-theme=bkg] .mark,html[data-theme=bkg] .site-nav .cta{border-color:#000}
html[data-theme=cream] .hero{border-bottom-color:var(--line)}

/* Floating dock on the right edge: icon buttons that expand to show their name on hover/focus */
.a11y-dock{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.a11y-dock button{display:flex;flex-direction:row-reverse;align-items:center;gap:0;height:52px;min-width:52px;padding:0;background:var(--panel);color:var(--on-panel);border:2px solid var(--accent);border-right:0;border-radius:12px 0 0 12px;cursor:pointer;font-size:.9rem;font-weight:700;box-shadow:0 3px 14px #0000004d}
.a11y-dock svg{flex:0 0 48px;width:48px;height:48px;padding:9px;fill:none}
.a11y-dock .a11y-label{max-width:0;overflow:hidden;white-space:nowrap;padding:0;transition:max-width .18s ease,padding .18s ease}
.a11y-dock button:hover .a11y-label,.a11y-dock button:focus-visible .a11y-label,.a11y-dock button[aria-expanded=true] .a11y-label{max-width:14rem;padding-left:1rem}
.a11y-dock button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.a11y-dock button[aria-expanded=true]{background:var(--brand);color:var(--on-brand)}
@media(prefers-reduced-motion:reduce){.a11y-dock .a11y-label{transition:none}}
@media print{.a11y-dock{display:none!important}}

/* Options drawer: a modal <dialog> on the right, so the page stays visible and updates live beside it */
dialog.a11y-panel{position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;border-left:3px solid var(--line);width:min(25rem,100vw);max-width:100vw;height:100vh;height:100dvh;max-height:none;background:var(--bg);color:var(--ink);overflow:auto;box-shadow:-10px 0 40px #0000004d}
dialog.a11y-panel::backdrop{background:transparent}
.a11y-panel-inner{padding:16px 16px 2rem}
.a11y-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.5rem}
.a11y-panel h2{font-size:1.35rem;margin:0;overflow-wrap:anywhere}.a11y-panel h2:focus{outline:none}
.a11y-panel .a11y-intro{color:var(--sub);font-size:.9rem;margin:0 0 1.1rem}
.a11y-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.a11y-panel fieldset{border:1px solid var(--line);border-radius:8px;margin:0;padding:.7rem 1rem .9rem;background:var(--card);min-width:0}
.a11y-panel .a11y-intro,.a11y-panel .a11y-note{overflow-wrap:anywhere}.a11y-panel legend{font-weight:700;font-size:.92rem;padding:0 .4rem}
.a11y-opt{display:flex;align-items:center;gap:.65rem;min-height:2.5rem;font-size:.95rem;cursor:pointer}
.a11y-opt span:not(.a11y-swatch){min-width:0;overflow-wrap:anywhere}.a11y-opt input{width:1.15rem;height:1.15rem;margin:0;flex-shrink:0;accent-color:var(--brand)}
.a11y-opt small{display:block;color:var(--sub);font-size:.8rem;line-height:1.35}
.a11y-swatch{display:inline-grid;place-items:center;flex-shrink:0;width:2.4rem;height:1.7rem;border-radius:4px;border:1px solid #888;font-weight:800;font-size:.85rem;background:var(--sw-bg);color:var(--sw-fg)}
.a11y-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.25rem}
.a11y-actions .btn,.a11y-head .btn{min-height:44px;padding:.55rem 1rem;font-size:.9rem}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--field)}.btn-quiet:hover{background:var(--card)}
.a11y-note{font-size:.82rem;color:var(--sub);margin:0}
@media print{dialog.a11y-panel{display:none!important}}

/* Read-aloud bar */
.a11y-player{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);color:var(--on-panel);border-top:3px solid var(--accent);padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom,0px))}
.a11y-player[hidden]{display:none}
.a11y-player-inner{max-width:76rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.a11y-now{flex:1 1 14rem;min-width:0;font-size:.85rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a11y-now strong{color:var(--on-panel);text-decoration:underline}
.a11y-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.a11y-player button,.a11y-player select{min-height:44px;min-width:44px;padding:.35rem .8rem;border-radius:6px;border:2px solid currentColor;background:#ffffff14;color:var(--on-panel);font-size:.88rem;font-weight:650;cursor:pointer}
.a11y-player select{color:var(--on-panel)}.a11y-player select option{color:#111;background:#fff}
.a11y-player button:hover{background:#ffffff30}
.a11y-player :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.a11y-player label{font-size:.82rem;display:flex;align-items:center;gap:.4rem}
html.a11y-player-on body{padding-bottom:6.5rem}html.a11y-player-on{scroll-padding-bottom:7rem}
/* Keep each block's original background: light fill made white panel text unreadable. */
.a11y-current{outline:3px solid var(--brand);outline-offset:5px;border-radius:3px}
.hero-panel .a11y-current{outline-color:var(--accent)}
.a11y-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(forced-colors:active){.a11y-current{outline-color:Highlight}.a11y-player{border:2px solid CanvasText}.a11y-player button,.a11y-player select{border-color:ButtonText}}
@media print{.a11y-panel,.a11y-player{display:none!important}}