/* Monarchy accessibility layer (WCAG 2.1 AA pass, 2026-11). Loaded last on every page.
   Colour tokens, button fills, focus ring, skip link, motion control. No overlay. */

/* ---------- brand tokens ---------- */
:root {
  --brand-btn: #c2410c;        /* white text on it: 5.18:1 */
  --brand-btn-hover: #a8380a;  /* white text on it: 6.4:1 */
  --a11y-focus: #fc5000;       /* >= 3:1 on the dark surfaces */
}
html[data-theme="light"] {
  --a11y-focus: #c2410c;       /* >= 3:1 on white and cream surfaces */
  --brand: #b23a08;            /* orange used as text on light surfaces: >= 4.5:1 */
  --brand-soft: #b23a08;
}
html[data-theme="light"] .nav, html[data-theme="light"] header.nav { --brand: #b23a08; --brand-soft: #b23a08; }

/* ---------- focus ring: 3px solid, kept >= 3:1 ---------- */
:focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 2px !important; }
.lang-switch select:focus-visible, .jules-dock-form input:focus-visible { outline: 3px solid var(--a11y-focus) !important; }

/* ---------- visually hidden text ---------- */
.sr-only { 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; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------- skip link ---------- */
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 10000;
  padding: .7rem 1.1rem; border-radius: .6rem;
  background: #0b0b0d; color: #f5f2ec !important; font: 600 1rem/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: underline; border: 2px solid #f5f2ec;
  transition: none;
}
.skip-link:focus, .skip-link:focus-visible { top: 1rem; }
html[data-theme="light"] .skip-link { background: #ffffff; color: #1a1a1a !important; border-color: #1a1a1a; }
#main-content:focus { outline: none !important; }

/* ---------- motion control (2.2.2) ---------- */
.motion-toggle {
  position: static; display: inline-flex; align-items: center; gap: .45rem; flex: none;
  min-height: 2.25rem; padding: .4rem .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: transparent; color: inherit; border: 1px solid currentColor;
  font: 600 .75rem/1.1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .01em;
}
.motion-toggle:hover { background: rgba(127, 127, 127, .12); }
.motion-toggle .mt-ic { display: inline-flex; gap: 3px; width: 10px; height: 10px; }
.motion-toggle .mt-ic i { display: block; width: 3px; height: 10px; background: currentColor; border-radius: 1px; }
.motion-toggle[aria-pressed="true"] .mt-ic { gap: 0; }
.motion-toggle[aria-pressed="true"] .mt-ic i:first-child { width: 0; height: 0; background: none; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; border-radius: 0; }
.motion-toggle[aria-pressed="true"] .mt-ic i:last-child { display: none; }
header .motion-toggle--header { color: #f5f2ec; border-color: rgba(245, 242, 236, .45); }
html[data-theme="light"] header .motion-toggle--header { color: #1a1a1a; border-color: rgba(26, 26, 26, .45); }
.motion-toggle-row { display: flex; justify-content: flex-start; margin: 1.25rem 0 .75rem; }
/* same breakpoint as the header theme toggle (mobile-nav.css): below it the drawer copy is used */
@media (max-width: 1240px) { header .motion-toggle--header { display: none !important; } }
html.nav-is-open .motion-toggle--header, html.nav-is-open .motion-toggle--footer { visibility: hidden; }
@media print { .motion-toggle, .skip-link { display: none !important; } }

/* paused: looping CSS animations stop where they are (one-shot reveals still finish) */
html.motion-paused .press-track,
html.motion-paused .story-marquee *,
html.motion-paused [class*="marquee"],
html.motion-paused [class*="ticker"] { animation-play-state: paused !important; }

/* reduced motion: nothing autoplays, ticker is static */
@media (prefers-reduced-motion: reduce) {
  .press-track, [class*="marquee"] > *, [class*="ticker"] > * { animation: none !important; transform: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ---------- testimonial cards: the "Tap to hear" label is a real button ---------- */
button.voice-hear { font-family: inherit; line-height: inherit; cursor: pointer; pointer-events: auto; }
.voice-card .voice-hear:focus-visible { opacity: 1; }

/* ---------- captions readable on all players ---------- */
video::cue { font-size: 1rem; background: rgba(0, 0, 0, .8); color: #fff; }
.motion-toggle[hidden] { display: none !important; }

/* ---------- hard-coded text colours turned into theme tokens (generated) ---------- */
:root {
  --tx-1f5fd6: #1f5fd6;
  --tx-3f3f3f: #7c7c7c;
  --tx-565554: #7d7c7b;
  --tx-5b5a59: #81807f;
  --tx-5b5a5a: #818080;
  --tx-5f5e5d: #858584;
  --tx-605f5e: #858483;
  --tx-727270: #727270;
  --tx-73726f: #73726f;
  --tx-757371: #757371;
  --tx-777573: #777573;
  --tx-777675: #777675;
  --tx-7a7976: #7a7976;
  --tx-7a7979: #7a7979;
  --tx-7a7a79: #7a7a79;
  --tx-7a7a7a: #7a7a7a;
  --tx-7b7a79: #7b7a79;
  --tx-7c7872: #807c76;
  --tx-7e7d7c: #7e7d7c;
  --tx-7e7e7e: #7e7e7e;
  --tx-959391: #a19f9d;
  --tx-959491: #a1a09d;
  --tx-959594: #959594;
  --tx-9f9e9c: #9f9e9c;
  --tx-9f9f9f: #9f9f9f;
  --tx-a1a09c: #a1a09c;
  --tx-a3a3a3: #a3a3a3;
  --tx-a6a6a6: #a6a6a6;
  --tx-b9b5af: #b9b5af;
  --tx-bfbfbf: #bfbfbf;
  --tx-cc4203: #d1551c;
  --tx-f55088: #f55088;
  --tx-fc5000: #fc5000;
  --tx-fc7231: #fc7231;
  --tx-fd7333: #fd7333;
  --tx-ff5a1f: #ff5a1f;
  --tx-ff6196: #ff6196;
  --tx-ff8a3d: #ff8a3d;
}
html[data-theme="light"] {
  --tx-1f5fd6: #1a4fb0;
  --tx-3f3f3f: #3f3f3f;
  --tx-565554: #565554;
  --tx-5b5a59: #5b5a59;
  --tx-5b5a5a: #5b5a5a;
  --tx-5f5e5d: #5f5e5d;
  --tx-605f5e: #605f5e;
  --tx-727270: #6f6f6d;
  --tx-73726f: #696865;
  --tx-757371: #6c6a68;
  --tx-777573: #6c6a69;
  --tx-777675: #6f6e6d;
  --tx-7a7976: #6f6e6b;
  --tx-7a7979: #747373;
  --tx-7a7a79: #737372;
  --tx-7a7a7a: #737373;
  --tx-7b7a79: #727171;
  --tx-7c7872: #7c7872;
  --tx-7e7d7c: #757473;
  --tx-7e7e7e: #6e6e6e;
  --tx-959391: #959391;
  --tx-959491: #959491;
  --tx-959594: #6d6d6c;
  --tx-9f9e9c: #6f6f6d;
  --tx-9f9f9f: #6f6f6f;
  --tx-a1a09c: #6f6e6c;
  --tx-a3a3a3: #747474;
  --tx-a6a6a6: #747474;
  --tx-b9b5af: #767470;
  --tx-bfbfbf: #737373;
  --tx-cc4203: #cc4203;
  --tx-f55088: #c94270;
  --tx-fc5000: #b23a08;
  --tx-fc7231: #b23a08;
  --tx-fd7333: #b23a08;
  --tx-ff5a1f: #b23a08;
  --tx-ff6196: #f05b8d;
  --tx-ff8a3d: #b23a08;
}
html[data-theme="light"] .on-dark, html[data-theme="light"] .vhero, html[data-theme="light"] .rh-cover {
  --tx-1f5fd6: #1f5fd6;
  --tx-3f3f3f: #7c7c7c;
  --tx-565554: #7d7c7b;
  --tx-5b5a59: #81807f;
  --tx-5b5a5a: #818080;
  --tx-5f5e5d: #858584;
  --tx-605f5e: #858483;
  --tx-727270: #727270;
  --tx-73726f: #73726f;
  --tx-757371: #757371;
  --tx-777573: #777573;
  --tx-777675: #777675;
  --tx-7a7976: #7a7976;
  --tx-7a7979: #7a7979;
  --tx-7a7a79: #7a7a79;
  --tx-7a7a7a: #7a7a7a;
  --tx-7b7a79: #7b7a79;
  --tx-7c7872: #807c76;
  --tx-7e7d7c: #7e7d7c;
  --tx-7e7e7e: #7e7e7e;
  --tx-959391: #a19f9d;
  --tx-959491: #a1a09d;
  --tx-959594: #959594;
  --tx-9f9e9c: #9f9e9c;
  --tx-9f9f9f: #9f9f9f;
  --tx-a1a09c: #a1a09c;
  --tx-a3a3a3: #a3a3a3;
  --tx-a6a6a6: #a6a6a6;
  --tx-b9b5af: #b9b5af;
  --tx-bfbfbf: #bfbfbf;
  --tx-cc4203: #d1551c;
  --tx-f55088: #f55088;
  --tx-fc5000: #fc5000;
  --tx-fc7231: #fc7231;
  --tx-fd7333: #fd7333;
  --tx-ff5a1f: #ff5a1f;
  --tx-ff6196: #ff6196;
  --tx-ff8a3d: #ff8a3d;
  --brand: #fc5000; --brand-soft: #ff8a3d; --a11y-focus: #fc5000;
}


/* ---------- component fixes found by the axe sweep ---------- */
/* Dimming by opacity pushed labels under 4.5:1: colour carries the hierarchy instead */
.spec-tag { opacity: 1 !important; color: var(--bone-55); }
.case-stat .l { opacity: 1 !important; }
.hero-wall > .press-band .press-label, .hero-wall + .press-band .press-label { opacity: 1 !important; }
.ap-agents .apf-sub { opacity: 1 !important; }
.ap-agents .apf-sub a, .apf-sub a { text-decoration: underline; text-underline-offset: .15em; }

/* Footers that stay dark in the light theme keep light text */
html[data-theme="light"] footer.footer { --text-dim: #a8a49c; }
:where(footer.footer) a { color: inherit; }

/* Sections that are always light, in both themes */
section.home-team-shadow.team-shadow { --brand: #b23a08; }
.wc-hero-split .wc-eyebrow { color: #b23a08 !important; }
.lion-verse .accent { color: var(--a11y-accent, inherit); }
.lion-gold .lede { color: #2a2318 !important; }
.lion-verse { --a11y-accent: #8d6a21; }

/* Article diagrams */
.fa-body .flow-node.agent { background: var(--brand-btn) !important; }
.fa-body .flow-node.agent span, .fa-body .flow-node.agent strong { color: #fff !important; }
.fa-body .layer:first-child { background-color: var(--brand-btn) !important; }
html[data-theme="light"] .fa-body .layer-n { color: #a73708; }
html[data-theme="light"] .rx-tbl tr.total td.hi { color: #1a4fb0; }
html:not([data-theme="light"]) .ar .fa-body .card .mark { color: #0b0b0d !important; }
html[data-theme="light"] .fa-saq-k { color: #5f5f5f !important; }
html[data-theme="light"] .fa-body .tz-btn { background: #fc5000 !important; color: #0b0b0d !important; }
.art-body a.art-cta-btn { background: var(--brand-btn) !important; color: #fff !important; }
/* case pages keep a dark footer in the light theme */
html[data-theme="light"] footer.footer { --text-dim: #a8a49c; }
footer.footer nav.legal-links { background: transparent !important; }
/* Wanted Fertility coral used as heading text on white */
html[data-theme="light"]:has(.wfhero) h1, html[data-theme="light"]:has(.wfhero) h2 { --accent-display: #ba3d67; }
html[data-theme="light"] .ap-agents .apf-sub { color: #5f5f5f; }
html[data-theme="light"] .fa-body .card-av .mark { color: #1a1a1a; }
/* stills that replace removed videos keep the frame of the original player */
.csclip img.a11y-poster{width:100%;aspect-ratio:560/996;object-fit:cover;display:block;background:#000}
.csvid img.a11y-poster{width:100%;display:block;border-radius:var(--r-md);border:1px solid var(--line-strong);background:#000;aspect-ratio:680/1208;object-fit:cover}
.stagefig img.a11y-poster{width:100%;display:block;border-radius:.75rem;border:1px solid var(--line-strong);background:#000;max-height:620px;object-fit:cover}
.vidfig img.a11y-poster{display:block;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface-2);max-height:620px;width:auto;max-width:100%;margin-inline:auto}
/* reflow (1.4.10): long legal links wrap instead of forcing horizontal scroll at 320px */
@media (max-width: 680px){ nav.legal-links{max-width:100%;white-space:normal!important} nav.legal-links a{white-space:normal!important;overflow-wrap:anywhere} .rh-grid>*{min-width:0} .rh-lab2 b,.rh-lab2 em{white-space:normal!important} }
html[data-theme="light"] body .fig-cap .cite{color:#1a4fb0!important}
/* 1.4.4 / brief item 2: no text under 12px (citation markers, inline card labels) */
html body a.cite,html body .ar .fa-body a.cite,html body .fa-body p a.cite,html body .fa-body li a.cite,html body .fa-body cite a.cite,html body .m-src a.cite{font-size:max(12px,.62em)!important}
html body strong.card-inl{font-size:max(12px,1em)!important}
.vhero .eyebrow:not(.page-cookie .eyebrow):not(.page-wanted .eyebrow){color:#ff8a3d}
/* text over photos / film (manual review of axe "incomplete" items, pixel-sampled) */
.case-lion .case-mark{color:#c9982f}
.case-lion .hero-in > .mono-note{color:rgba(244,241,234,.8)}
.art-cover .cover-kicker{color:#ff8a3d}
.mx-gl > i{background-color:var(--brand-btn,#c2410c)!important}
html[data-theme="light"] body .card-mv .cite, html[data-theme="light"] body [id^="ref-src"]{color:#1a4fb0!important}
.vhero .cs-kicker{color:#ff5cbd}
.dental-hero .hero-in > .eyebrow{color:#ffa366}
.wfhero .eyebrow.hero-in{background:rgba(11,11,13,.55);padding:.3em .7em;border-radius:999px}

/* QA (Mark) item 1: citation pills on article pages. The tinted pill background lowers contrast,
   so the link colour is set per theme with higher specificity than article-read.css */
html[data-theme="light"] body .ar .fa-body a.cite.cite, html[data-theme="light"] body .ar a.cite[id^="ref-src"], html[data-theme="light"] body a.cite[id^="ref-src"]{color:#1a4fb0!important}
html:not([data-theme="light"]) body .ar .fa-body a.cite.cite, html:not([data-theme="light"]) body .ar a.cite[id^="ref-src"], html:not([data-theme="light"]) body a.cite[id^="ref-src"]{color:#6ea2ff!important}
html[data-theme="light"] body .ar .fa-body a.cite.cite:hover, html[data-theme="light"] body .ar .fa-body a.cite.cite:focus-visible{background:#1a4fb0!important;color:#fff!important}
html:not([data-theme="light"]) body .ar .fa-body a.cite.cite:hover, html:not([data-theme="light"]) body .ar .fa-body a.cite.cite:focus-visible{background:#6ea2ff!important;color:#0b0b0d!important}

/* QA item 2: "--ink" is the page background (#fff) in light theme, so these headings were white on white */
html[data-theme="light"] body .connect-quiet-h{color:#1a1a1a}

/* pixel recheck: light-theme article covers are light (#fbfaf7), so the kicker goes back to the light-theme orange */
html[data-theme="light"] body.has-sitenav .art-cover .cover-kicker{color:#c03d00}
/* pixel recheck: the pressed hero-rail label takes the chapter accent; in light theme the rail is white, so use darker accent shades */
html[data-theme="light"] .hero-wall[data-chapter="wanted"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="wanted"] .hero-rail button[aria-pressed="true"] .lab{color:#b8235a}
html[data-theme="light"] .hero-wall[data-chapter="lion"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="lion"] .hero-rail button[aria-pressed="true"] .lab{color:#7a5a12}
html[data-theme="light"] .hero-wall[data-chapter="aixf"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="aixf"] .hero-rail button[aria-pressed="true"] .lab{color:#7d5c0c}
html[data-theme="light"] .hero-wall[data-chapter="floor"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="sales"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="floor"] .hero-rail button[aria-pressed="true"] .lab, html[data-theme="light"] .hero-wall[data-chapter="sales"] .hero-rail button[aria-pressed="true"] .lab{color:#b23a08}
html[data-theme="light"] .hero-wall[data-chapter="ai"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="ai"] .hero-rail button[aria-pressed="true"] .lab{color:#3d4fd1}
html[data-theme="light"] .hero-wall[data-chapter="speaker"] .hero-rail button[aria-pressed="true"], html[data-theme="light"] .hero-wall[data-chapter="speaker"] .hero-rail button[aria-pressed="true"] .lab{color:#1f5fb0}
/* pixel recheck: /wanted-fertility hero text sits on the playing video; bright frames (pink reels) dropped it near 1:1.
   A navy scrim between the video (z 0) and the text (z 2) keeps every frame readable. Needs design sign-off. */
.wfhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,27,43,.55) 0%,rgba(11,27,43,.74) 40%,rgba(11,27,43,.74) 100%)}
/* pre-existing: the reel view-count pill used var(--surface), which is white in light theme (white on white) */
html[data-theme="light"] body .post .pv{background:rgba(11,11,13,.78)}
/* /dental hero: the orange accent over the photo measured 2.3:1; the lighter brand tint keeps it above 3:1 (large text) */
.dental-hero h1 .accent{color:#ff8a3d}
/* pixel recheck (QA round): Resources hub blue tile badge (.rh-k i) on its own 16% tint measured 4.43:1 in dark */
html:not([data-theme="light"]) body .rh-tile[style*="--ac:var(--rh-blue)"] .rh-k i{color:#6ea2ff}
/* Morgan v4 sample: the same blue badge in light theme measured 4.47:1 on the blue-tinted tile gradient */
html[data-theme="light"] body .rh-tile[style*="--ac:var(--rh-blue)"] .rh-k i{color:#1a4fb0}
/* 2026-11-12 WCAG 2.5.8 target size: footer legal links get a 24px-tall hit area (same font and colour) */
footer .legal-links a, .footer-base .legal-links a { display: inline-block; min-height: 24px; line-height: 24px; vertical-align: top; }