/* ==========================================================================
   Baker Strategy: Accessible view (visual accessibility) + base visual fixes
   Loaded after site.css on every page. Accessible view = html.a11y
   (set before first paint by the inline <head> script; toggled by /assets/js/a11y-toggle.js).
   Contrast ratios for every pair are documented in the a11y report.
   ========================================================================== */

/* ---------- 1. Base fixes (both modes) ---------- */
:root {
  --focus: #0269A1;          /* focus ring on light surfaces: 5.94:1 on #FFF, 5.55:1 on #FAF7F2 */
}
.meet, .site-footer, .contact-card--call, .quote-aside { --focus: #00A8FF; } /* 6.38:1 on #042034 */

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
#contact-form .cf-input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link:focus { outline: 3px solid var(--focus); outline-offset: 2px; color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .service-card:hover, .resource-card:hover, .btn:hover .arrow, .btn.is-hover .arrow { transform: none !important; }
}

/* ---------- 2. The toggle ---------- */
/* Nav-row instance: right-hand group, 12px left of the Contact button (or the Menu button on compact
   widths), same 44px height as Contact. Links stay centred between the logo and that group. */
.site-nav nav[aria-label="Primary"] { margin-inline: auto; }
.a11y-toggle--nav:not([hidden]) { flex: none; white-space: nowrap; }
.a11y-toggle--nav + .nav-cta, .a11y-toggle--nav ~ .nav-mobile { margin-left: -12px; }   /* 24px row gap - 12px */
/* Full-width nav row (from 1200px, both views): the nav copy is a 44x44 icon button, the same
   height as Contact and narrower, so the links never wrap. Name stays "Accessible view" (label kept for screen readers,
   title for a tooltip); pressed = filled navy. Compact rows (next to Menu) show the full label. */
@media (min-width: 1200px) {
  html:not(.a11y) .site-nav .a11y-toggle--nav:not([hidden]) { width: 44px; min-width: 44px; padding: 0; gap: 0; justify-content: center; }
  html:not(.a11y) .a11y-toggle--nav .a11y-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html:not(.a11y) .a11y-toggle--nav .a11y-toggle__state { display: none; }
}
@media (min-width: 1200px) {
  html.a11y .site-nav .a11y-toggle--nav:not([hidden]) { width: 44px; min-width: 44px; padding: 0; gap: 0; justify-content: center; }
  html.a11y .a11y-toggle--nav .a11y-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  html.a11y .a11y-toggle--nav .a11y-toggle__state { display: none; }
}
/* One toggle at a time: nav-row copy above 640px, the copy at the top of the menu only on phones. */
@media (max-width: 640px) { .site-nav .a11y-toggle--nav:not([hidden]) { display: none; } }
@media (min-width: 641px) { .mobile-a11y { display: none; } }
.a11y-toggle:not([hidden]) {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; min-width: 44px; padding: 0 .5rem 0 .85rem;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 600; line-height: 1.2;
  color: var(--text); background: #fff;
  border: 2px solid var(--text); border-radius: 999px; cursor: pointer;
}
.a11y-toggle__icon { flex: none; width: 20px; height: 20px; }
.a11y-toggle__state {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  min-width: 3.4em; padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; line-height: 1;
}
.a11y-toggle__check, .a11y-toggle__on { display: none; }
.a11y-toggle:hover .a11y-toggle__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.a11y-toggle:hover { background: var(--bg-warm); }
/* Pressed: filled button, check mark and "On": differs by fill, icon and word, not just hue */
.a11y-toggle[aria-pressed="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.a11y-toggle[aria-pressed="true"]:hover { background: var(--text); }
.a11y-toggle[aria-pressed="true"] .a11y-toggle__state { background: #fff; color: var(--text); border-color: #fff; }
.a11y-toggle[aria-pressed="true"] .a11y-toggle__check { display: block; }
.a11y-toggle[aria-pressed="true"] .a11y-toggle__on { display: inline; }
.a11y-toggle[aria-pressed="true"] .a11y-toggle__off { display: none; }
.a11y-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Mobile-menu instance */
.mobile-a11y { padding: 4px 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.a11y-toggle--block:not([hidden]) { width: 100%; justify-content: flex-start; min-height: 48px; }
.a11y-toggle--block .a11y-toggle__state { margin-left: auto; }

/* Mobile/compact menu: the panel scrolls within the viewport so its last item (Contact) is always reachable.
   It hangs from the bottom of the sticky nav row (80px; 68px at <=640px). */
:root { --nav-row-h: 80px; }
@media (max-width: 640px) { :root { --nav-row-h: 68px; } }
.mobile-panel {
  max-height: calc(100vh - var(--nav-row-h));   /* fallback: no dvh support */
  max-height: calc(100dvh - var(--nav-row-h));
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 16px;
}

/* ---------- 3. Accessible view (html.a11y) ---------- */
html.a11y {
  /* AAA palette derived from brand navy #042034 / #072C44 and blue #0269A1 / #00A8FF */
  --bg: #FFFFFF;
  --bg-warm: #F3F6F9;        /* cool light surface: text #042034 = 15.3:1 */
  --surface-stone: #EAF0F5;  /* CTA panels: text #042034 = 14.2:1, link #004670 = 8.66:1 */
  --placeholder: #E3EAF0;
  --border: #5B6B78;         /* UI edges: 5.50:1 on #FFF (>= 3:1 non-text) */
  --text: #042034;           /* 16.65:1 on #FFF */
  --navy-deep: #042034;
  --muted: #1E3A50;          /* 11.82:1 on #FFF, 10.90:1 on #F3F6F9 */
  --accent: #004670;         /* accents on light surfaces */
  --accent-ink: #004670;     /* links + primary buttons: 9.95:1 on #FFF, 9.18:1 on #F3F6F9; white on it 9.95:1 */
  --accent-hover: #042034;   /* hover: darker + heavier underline */
  --accent-tint: #E6F1F8;
  --on-dark-muted: #FFFFFF;  /* text on navy: 16.65:1 */
  --focus: #042034;          /* focus ring on light: 16.65:1 */
  --font-display: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow: 0 0 0 1px rgba(4, 32, 52, .08);
  font-size: 112.5%;         /* 1rem = 18px; every rem-based size, headings included, scales with it */
  scroll-behavior: auto;
}
/* Navy panels: pure white text, light blue accents/links #8FD3FF (10.25:1), yellow focus ring #FFD84D (12.04:1) */
html.a11y .meet, html.a11y .site-footer, html.a11y .contact-card--call, html.a11y .quote-aside, html.a11y .thumb {
  --accent: #8FD3FF; --accent-ink: #8FD3FF; --accent-hover: #FFFFFF; --muted: #FFFFFF; --focus: #FFD84D;
}

/* Motion off */
html.a11y *, html.a11y *::before, html.a11y *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y .service-card:hover, html.a11y .resource-card:hover, html.a11y .btn:hover .arrow { transform: none !important; }

/* Type and spacing */
html.a11y body { line-height: 1.65; letter-spacing: .01em; word-spacing: .04em; -webkit-font-smoothing: auto; }
html.a11y h1, html.a11y h2, html.a11y h3, html.a11y h4, html.a11y .h1, html.a11y .h2, html.a11y .h3 {
  font-weight: 700; letter-spacing: 0; font-variation-settings: normal;
}
html.a11y h1, html.a11y .h1 { line-height: 1.15; }
html.a11y h2, html.a11y .h2 { line-height: 1.2; }
html.a11y h3, html.a11y .h3 { line-height: 1.3; }
html.a11y main p:not(:last-child) { margin-bottom: 1.5em; }
html.a11y .lead { line-height: 1.6; }
html.a11y em, html.a11y i, html.a11y .signature { font-style: normal; }
/* Minimum 16px for small print; drop uppercase tracking (harder to read with low vision) */
html.a11y .small, html.a11y .eyebrow, html.a11y .problem-num, html.a11y .highlight-role, html.a11y .mini-eyebrow,
html.a11y .kicker-chip, html.a11y .pill, html.a11y .footer-heading, html.a11y .slide-meta, html.a11y .source,
html.a11y .slide-fig figcaption, html.a11y .thumb .cap, html.a11y .thumb--pdf .lbl, html.a11y .thumb--pdf .pdf,
html.a11y .quote-aside cite, html.a11y .dropdown a span, html.a11y .insight-body .eyebrow, html.a11y .calendly-fallback,
html.a11y #contact-form .cf-note, html.a11y #contact-form .cf-err, html.a11y .resource-card .path, html.a11y .hero-chip,
html.a11y .archive-player .ap-head a, html.a11y .footer-bottom, html.a11y .hero-note, html.a11y .tag {
  font-size: .9rem; letter-spacing: .02em; text-transform: none;
}
html.a11y .step-tile span { font-size: .8rem; letter-spacing: .04em; }

/* Links: always underlined in content; hover = heavier underline + darker, never hue alone */
html.a11y main a:not(.btn):not(.service-card):not(.resource-card):not(.thumb):not(.pill),
html.a11y .site-footer a, html.a11y .text-link, html.a11y .resource-card .path {
  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .2em; text-decoration-color: currentColor;
}
html.a11y main a:not(.btn):not(.service-card):not(.resource-card):not(.thumb):not(.pill):hover,
html.a11y .site-footer a:hover, html.a11y .text-link:hover,
html.a11y .service-card:hover .text-link, html.a11y .resource-card:hover .path {
  color: var(--accent-hover); text-decoration-thickness: 4px;
}
html.a11y .meet .text-link, html.a11y .site-footer a { color: #FFFFFF; }
html.a11y .meet .text-link:hover, html.a11y .site-footer a:hover { color: var(--accent); }
html.a11y .hero-note a, html.a11y .cta-panel .phone-line a, html.a11y .cta-panel .small a { color: var(--accent-ink); }

/* Card links: strong edge, hover = thicker navy edge */
html.a11y .service-card, html.a11y .resource-card, html.a11y .pill { border: 2px solid var(--border); box-shadow: none; }
html.a11y .service-card:hover, html.a11y .resource-card:hover, html.a11y .pill:hover { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
html.a11y .pill { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* Buttons: solid fills with a visible edge; hover = darker fill + underlined label */
html.a11y .btn { border-width: 2px; }
html.a11y .btn--primary, html.a11y #contact-form #contact-form-submit { background: var(--accent-ink); border: 2px solid var(--accent-ink); color: #fff; }
html.a11y .btn--primary:hover, html.a11y #contact-form #contact-form-submit:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
html.a11y .btn--secondary { border-color: var(--text); color: var(--text); background: #fff; }
html.a11y .btn--secondary:hover { background: var(--text); color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
html.a11y .btn--on-dark { background: #8FD3FF; color: #042034; border-color: #8FD3FF; }   /* 10.25:1 */
html.a11y .btn--on-dark:hover { background: #fff; border-color: #fff; color: #042034; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
html.a11y .mobile-panel .btn { color: #fff; }

/* Focus: thicker ring in accessible view */
html.a11y :focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
html.a11y .a11y-toggle:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

/* Nav: hover = underline; current page = bold + thick underline bar (plus aria-current in markup) */
html.a11y .site-nav { background: #fff; backdrop-filter: none; border-bottom: 2px solid var(--text); }
html.a11y .nav-links a, html.a11y .nav-links .nav-parent { color: var(--text); font-size: 1rem; padding: 10px 10px; }
html.a11y .nav-links a:hover, html.a11y .nav-links .nav-parent:hover { background: var(--bg-warm); color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
html.a11y .nav-links a[aria-current="page"] { color: var(--text); font-weight: 700; box-shadow: inset 0 -4px 0 var(--text); }
html.a11y .dropdown { border: 2px solid var(--text); }
html.a11y .mobile-panel a { color: var(--text); border-bottom: 1px solid var(--border); }
html.a11y .mobile-panel a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
html.a11y .mobile-panel a[aria-current="page"] { font-weight: 700; border-left: 5px solid var(--text); padding-left: 12px; }
html.a11y .nav-mobile summary { border: 2px solid var(--text); color: var(--text); }

/* Compact (menu) header up to 1199px in both views (site.css); accessible-view styling for it at 1020–1199px */
html.a11y .nav-links a, html.a11y .nav-links .nav-parent { white-space: nowrap; }
@media (min-width: 1020px) and (max-width: 1199px) {
  html.a11y .nav-links, html.a11y .nav-cta--desktop { display: none; }
  html.a11y .nav-mobile { display: block; }
  html.a11y .nav-mobile summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border: 2px solid var(--text); border-radius: var(--leaf-sm);
    font-weight: 600; font-size: .9375rem; color: var(--text); background: #fff;
  }
  html.a11y .nav-mobile summary::-webkit-details-marker { display: none; }
  html.a11y .nav-mobile .burger { width: 18px; height: 12px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  html.a11y .nav-mobile .burger::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
  html.a11y .nav-mobile[open] .mobile-panel { display: block; }
  html.a11y .mobile-panel {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 2px solid var(--text); padding: 12px var(--gutter) 24px;
  }
  html.a11y .mobile-panel ul { list-style: none; margin: 0; padding: 0; }
  html.a11y .mobile-panel a { display: block; padding: 12px 0; text-decoration: none; font-weight: 500; }
  html.a11y .mobile-panel .sub a { padding-left: 16px; color: var(--muted); font-size: .9375rem; }
  html.a11y .mobile-panel .btn { margin-top: 18px; width: 100%; border-bottom: 0; }
}

/* Decorative accents on light surfaces stay visible */
html.a11y .eyebrow::before, html.a11y .highlight::before, html.a11y .feature-list li::before { background: var(--accent-ink); }
html.a11y .step li::before, html.a11y .get-list li::before, html.a11y .quad li::before { background: var(--text); }
html.a11y .service-card, html.a11y .step, html.a11y .highlight, html.a11y .contact-card, html.a11y .insight-card,
html.a11y .sku, html.a11y .quad, html.a11y .chamber-list li, html.a11y .archive-year, html.a11y #contact-form { border-color: var(--border); }
html.a11y .service-icon { background: #fff; border: 2px solid var(--accent-ink); }

/* Client logos: full strength, no dimming */
html.a11y .logo-grid img { opacity: 1; filter: grayscale(1) brightness(.5) contrast(2.4); }

/* No text over images: solid panels behind overlaid text */
html.a11y .thumb img { opacity: 1; }
html.a11y .thumb .cap { background: var(--navy-deep); color: #fff; padding: 8px 12px; }   /* solid panel, no gradient over the photo */
html.a11y .thumb { border: 3px solid var(--border); }
html.a11y .thumb:hover, html.a11y .thumb.is-active { border-color: var(--text); box-shadow: 0 0 0 3px var(--text); }
html.a11y .thumb .play { background: var(--navy-deep); border: 2px solid #fff; }
html.a11y .hero-chip { border: 2px solid var(--text); }
html.a11y .hero-media::before { border-color: var(--accent-ink); }

/* Contact form: strong edges; errors and status carry an icon + text, not colour alone */
html.a11y #contact-form label { color: var(--text); font-size: 1rem; }
html.a11y #contact-form .cf-req { color: var(--text); font-weight: 700; }
html.a11y #contact-form .cf-input { background: #fff; border: 2px solid var(--border); font-size: 1rem; color: var(--text); }
html.a11y #contact-form .cf-input::placeholder { color: #4D5D6B; opacity: 1; }   /* 6.79:1 */
html.a11y #contact-form .cf-input:focus { border-color: var(--text); box-shadow: none; }
html.a11y #contact-form .cf-input[aria-invalid="true"] { border: 3px solid #8B1A10; border-left-width: 10px; box-shadow: none; }
html.a11y #contact-form .cf-err { color: #8B1A10; font-weight: 700; }   /* 9.32:1 */
html.a11y #contact-form .cf-err::before { content: "\26A0\FE0E" / ""; margin-right: .4em; }
html.a11y #contact-form .cf-status { border-width: 2px; border-style: solid; font-size: 1rem; }
html.a11y #contact-form .cf-status.is-ok { background: #EEF8F1; border-color: #0A5A2C; color: #0A5A2C; }   /* 7.70:1 */
html.a11y #contact-form .cf-status.is-ok::before { content: "\2713" / ""; font-weight: 700; margin-right: .5em; }
html.a11y #contact-form .cf-status.is-err { background: #FFF4F2; border-color: #8B1A10; color: #8B1A10; border-left-width: 10px; }   /* 8.64:1 */
html.a11y #contact-form .cf-status.is-err::before { content: "\26A0\FE0E" / ""; margin-right: .5em; }
html.a11y #contact-form .cf-status.is-busy { background: #fff; border-color: var(--text); border-style: dashed; color: var(--text); }
html.a11y #contact-form #contact-form-submit:disabled { opacity: 1; background: #fff; color: var(--text); border: 2px dashed var(--text); }

/* Navy panels */
html.a11y .meet p, html.a11y .contact-card--call p, html.a11y .site-footer { color: #fff; }
html.a11y .meet .eyebrow, html.a11y .quote-aside .mini-eyebrow { color: #8FD3FF; }
html.a11y .footer-bottom { border-top-color: rgba(255, 255, 255, .5); }

/* ---------- 4. Windows High Contrast / forced colours ---------- */
@media (forced-colors: active) {
  .a11y-toggle:not([hidden]) { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; }
  .a11y-toggle[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
  .a11y-toggle[aria-pressed="true"] .a11y-toggle__state { background: HighlightText; color: Highlight; border-color: HighlightText; }
  .a11y-toggle:focus-visible, :focus-visible { outline: 3px solid CanvasText !important; outline-offset: 3px; }
  .a11y-toggle:focus-visible { outline-color: Highlight !important; }
  .nav-links a[aria-current="page"], .mobile-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; box-shadow: none; }
}

/* Step tiles: navy / blue / light blue, each with readable numerals */
html.a11y .step-tile { background: var(--navy-deep); color: #fff; }                       /* 16.65:1 */
html.a11y .step:nth-child(2) .step-tile, html.a11y .stage:nth-of-type(2) .step-tile { background: #004670; color: #fff; }   /* 9.95:1 */
html.a11y .step:nth-child(3) .step-tile, html.a11y .stage:nth-of-type(3) .step-tile { background: #8FD3FF; color: #042034; box-shadow: inset 0 0 0 2px #042034; }  /* 10.25:1 */
/* PDF tiles: solid navy instead of a gradient behind the text */
html.a11y .thumb--pdf { background: var(--navy-deep); }
html.a11y .thumb--pdf .lbl { color: #fff; }
html.a11y .thumb--pdf .pdf { background: #8FD3FF; color: #042034; }