/* Modern Mark — accessibility fixes (WCAG 2.1 AA). Loaded LAST on every page.
   site.css stays byte-identical to the original build; every override lives
   here with the criterion it fixes. Existing tokens and existing sizes only
   (12px and 13px are both already used in site.css). Audit: 2026-09-27. */

/* ---- 1.4.3 Contrast (minimum) ---- */

/* Footer disclaimer: gray-text at 0.8 opacity measured 4.25:1 on paper. */
.footer-disclaimer { opacity: 1; }

/* Required-field asterisk: gray at 0.5 opacity measured 3.34:1 on white. */
.form-field label .req { opacity: 1; color: var(--gray-text); }

/* Placeholder text: gray-text at 0.6 opacity is ~2.8:1 on white. */
.form-field input::placeholder,
.form-field textarea::placeholder { opacity: 0.85; }

/* ---- Readability: 12px floor for small mono labels (was 9–11px) ---- */
.disclaimer-box strong,
.svc-flag,
.svc-tag,
.svc-foot,
.contact-form-tag,
.draft-banner,
.answer-box-tag,
.why-image-tag,
.data-sources,
.stats-sources,
.bio-cred-label,
.reviews-rating-label,
.faq-q-row .q-num,
.faq-list .q-num,
.faq-answer-tag,
.faq-answer-foot,
.toc-title,
.data-table th,
.data-table caption,
.framework-tag,
.crumbs,
.page-meta,
.source-note,
.step-stamp-num,
.step-stamp-arc,
.contact-side-info strong { font-size: 12px; }

/* Form labels were 11px — labels need to be read, not glanced at. */
.form-field label { font-size: 13px; }

/* ---- 1.3.1 Info and relationships: footer column titles ----
   Were <h4> directly after page <h2>s (skipped level). Now <h2
   class="footer-col-title">, styled exactly as the old .footer-col h4. */
.footer-col .footer-col-title {
  font-family: inherit;
  font-size: 13px;
  line-height: inherit;
  letter-spacing: normal;
  color: var(--gray-text);
  margin-bottom: 18px;
  font-weight: 600;
}

/* ---- 1.4.10 Reflow: nav overflowed between 721px and ~850px ----
   The original hides .nav-links only at <=720px, so at tablet widths the
   "Work With Us" button ran up to 89px off-screen. Same behaviour, higher cutoff. */
@media (max-width: 860px) {
  .nav-links { display: none; }
}
/* At 320px (the WCAG reflow width) the button overhung by 4px. */
@media (max-width: 360px) {
  .nav-inner { gap: 8px; }
  .nav-cta { padding: 9px 12px; }
}

/* ---- 2.4.7 Focus visible ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.cta a:focus-visible,
.stats a:focus-visible,
.data-band a:focus-visible,
.svc-card.dark:focus-visible { outline-color: var(--yellow); }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- 2.2.2 Pause, stop, hide: no motion loops past 5 seconds ---- */
.hero-badge { animation-iteration-count: 1; }
.stats-mono-tag .blink-dot { animation-iteration-count: 4; }

/* ---- 2.3.3 Animation from interactions / user preference ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .typewriter-cursor { display: none; }
}

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

/* ---- 1.4.10 Reflow: footer logo is 317px wide at its 56px height, which
   forced the one-column footer past a 320px screen. Let it scale down. ---- */
.footer-logo img,
.logo img { max-width: 100%; height: auto; max-height: 56px; }
.logo img { max-height: 44px; }
@media (max-width: 720px) { .logo img { max-height: 32px; } }

/* ---- Legibility: highlighted headline words ----
   These highlights were inline backgrounds on 1.0 line-height headings, so the
   yellow box rose into the line above and covered its letters (up to 10px on
   "What our clients say…", "Tell us about your brand.", "Common questions.").
   Same treatment the home hero already uses: one unbroken block, a little
   clearance above. */
.reviews-top h2 .yellow-mark,
.faq-headline .yellow-mark,
.contact-info h2 .yellow-mark {
  display: inline-block;
  line-height: 0.95;
  margin-top: 0.1em;
}