/* ---------- Global scrollbar (page) ---------- */
:root{
  --scroll-thumb: #5f6dff;
  --scroll-thumb-hover: #7aa6ff;
  --scroll-track: rgba(255,255,255,.08);
}

/* Firefox */
html{
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

/* WebKit (Chromium/Safari/Edge) */
html::-webkit-scrollbar{ width: 12px; height: 12px; }
html::-webkit-scrollbar-track{ background: var(--scroll-track); }
html::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--scroll-thumb), #9bb2ff);
  border-radius: 10px;
  border: 2px solid transparent;           /* creates inset */
}
html::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scroll-thumb-hover), #bcd0ff);
}
/* Before: html{ scrollbar-gutter: stable both-edges; } */
html{ scrollbar-gutter: stable; }  /* reserve only on the scrollbar side */


/* ---------- A11y panel sizing & scroll ---------- */
.a11y-panel{
  /* keep your existing styles; just add a max-height */
  max-height: min(78vh, 640px);
}

.a11y-panel-inner{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
  justify-content: center;

  /* new: scrollable area */
  max-height: calc(min(78vh, 640px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;               /* room for scrollbar */
}

/* Sticky title so it stays visible while you scroll */
.a11y-panel .a11y-title{
  position: sticky; top: 0;
  background: rgba(12,14,26,.96);
  padding-block: 6px;
  z-index: 1;
}

/* Panel scrollbar - a bit slimmer */
.a11y-panel-inner{
  scrollbar-color: #8ea0ff transparent;    /* Firefox */
  scrollbar-width: thin;
}
.a11y-panel-inner::-webkit-scrollbar{ width: 10px; }
.a11y-panel-inner::-webkit-scrollbar-track{
  background: transparent;
}
.a11y-panel-inner::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #8ea0ff, #c8d4ff);
  border-radius: 10px;
  border: 2px solid rgba(12,14,26,.96);
}
.a11y-panel-inner::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #a5b6ff, #e0e7ff);
}

.a11y-wrap{ position: relative; display: inline-flex; }

.a11y-bubble{
  --sz: 42px;
  width: var(--sz); height: var(--sz);
  border-radius: 999px;
  display: inline-grid; place-items: center;
  margin-right: 8px; cursor: pointer;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.a11y-bubble:hover{ background: rgba(255,255,255,.16); color: var(--accent); transform: translateY(-1px); }
.a11y-bubble:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.a11y-bubble svg{ width: 20px; height: 20px; display: block; }

/* ===== Normal dropdown panel ==================================== */
.a11y-panel{
  position: absolute;
  top: calc(100% + 8px); right: 0;
  z-index: 1600;

  width: 320px; max-width: 72vw;
  padding: 14px 14px 16px;

  color: #fff;
  background: rgba(12,14,26,.96);           /* solid/glassy dark */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,.36);

  opacity: 0; pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transform-origin: 12px -8px;
  transition: opacity .16s ease, transform .16s ease;
}

.a11y-panel.a11y-panel--body{
  position: fixed;
  z-index: 5000;
}

/* small caret that “attaches” the panel under the bubble */
.a11y-panel::after{
  content:"";
  position:absolute; top:-6px; right: 14px;
  width: 10px; height: 10px;
  background: inherit;
  border-left: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: rotate(45deg);
}

/* visible state */
.a11y-panel.open{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* content layout */
.a11y-panel-inner{ display: grid; gap: 10px; }
.a11y-title{
  font: 700 13px/1.1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing: .06em; text-transform: uppercase; opacity: .9;
  margin-bottom: 4px;
}

/* switches */
.a11y-switch{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center; gap: 10px;
  font-size: 14px;
}
.a11y-switch input{ position: absolute; opacity: 0; pointer-events: none; }
.a11y-switch .lab{ color:#e6e9f7; }

.a11y-switch .knob{
  --h: 22px; --w: 38px;
  position: relative; width: var(--w); height: var(--h);
  border-radius: calc(var(--h)/2);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  transition: background .18s ease, border-color .18s ease;
}
.a11y-switch .knob::before{
  content:""; position:absolute; top: 50%; left: 2px; transform: translateY(-50%);
  width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: left .18s ease;
}

/* checked state */
.a11y-switch input:checked + .knob{
  background: linear-gradient(90deg, #1a195a, #5f6dff);
  border-color: rgba(122,166,255,.6);
}
.a11y-switch input:checked + .knob::before{
  left: calc(100% - (var(--h) - 6px) - 2px);
}

/* Mobile: pin to right if bubble is near edge */
@media (max-width: 900px){
  .a11y-panel{
    position: fixed;
    top: calc(62px + env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    width: min(360px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    transform-origin: 28px -8px;
    z-index: 5000;
  }
  .a11y-panel::after{
    right: auto;
    left: 24px;
  }
  .a11y-panel-inner{
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
  }
}

/* ===== Effects from toggles (keep) ============================== */
body.a11y-stop-fluid #fluidCanvas{ display: none !important; }
body.a11y-stop-fluid #auroraCanvas{ display: none !important; }
body.a11y-stop-fluid #bgVideo{ opacity: .3; }
/* === Panel cosmetics === */
.a11y-hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:8px 2px}
.a11y-group{display:grid;gap:8px;margin:10px 0}
.a11y-subtitle{font-weight:700;opacity:.9;font-size:.95rem}
.a11y-row{display:flex;flex-wrap:wrap;gap:8px}
.a11y-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer}
.a11y-chip input{appearance:none;width:14px;height:14px;border:2px solid #8ea0ff;border-radius:50%;display:inline-block}
.a11y-chip input:checked{background:#8ea0ff}
.a11y-select{display:grid;gap:4px}
.a11y-range{display:grid;gap:6px}
.a11y-range input[type="range"]{width:100%}
.a11y-range .range-notes{opacity:.65;font-size:.8em}

/* === Effects (classes / data-attributes) === */

/* Color/contrast themes */
body.a11y-invert { filter: none !important; }
body.a11y-invert :is(main, #main, footer, .site-footer, .mobile-menu){
  filter: invert(1) hue-rotate(180deg);
}
body[data-contrast="light"] { --bg:#f8f9ff; --text:#0b0f24; --accent:#3759ff; background:var(--bg); color:var(--text); }
body[data-contrast="dark"]  { --bg:#0b0f24; --text:#f3f6ff; --accent:#7aa6ff; background:var(--bg); color:var(--text); }
body[data-contrast="high"]  { filter: contrast(1.25) saturate(1.1); }

/* Saturation */
body[data-sat="low"] { filter: saturate(.6); }
body[data-sat="high"]{ filter: saturate(1.6); }
body[data-sat="desaturate"]{ filter: saturate(0); }

/* Hide images (also background images) */
body.a11y-hide-images img{opacity:0 !important}
body.a11y-hide-images [style*="background-image"]{background-image:none !important}

/* Big cursor (pure CSS data-uri pointer) */
body.a11y-big-cursor { 
  cursor: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'>\
    <circle cx='10' cy='10' r='9' fill='white' stroke='%23000' stroke-width='2'/>\
  </svg>") 2 2, auto;
}
body.a11y-big-cursor *{ cursor: inherit !important; }

/* Spacing & line-height */
:root{ --a11y-lh: 1.6; --a11y-letter: 0px; --a11y-word: 0px; }
body[data-lh="1.5"]{ --a11y-lh:1.5 }
body[data-lh="1.75"]{ --a11y-lh:1.75 }
body[data-lh="2"]{ --a11y-lh:2 }
body[data-space="1"]{ --a11y-letter:.2px; --a11y-word:.4px }
body[data-space="2"]{ --a11y-letter:.6px; --a11y-word:1px }

:where(p,li,dd,dt,blockquote,.info-copy){ line-height: var(--a11y-lh); letter-spacing: var(--a11y-letter); word-spacing: var(--a11y-word); }

/* Alignment */
body[data-align="left"]  :where(p,li,.info-copy){ text-align:left }
body[data-align="right"] :where(p,li,.info-copy){ text-align:right }
body[data-align="center"]:where(p,li,.info-copy){ text-align:center }
body[data-align="justify"]:where(p,li,.info-copy){ text-align:justify }

/* Page structure debugging */
body.a11y-structure :where(header,nav,main,aside,section,article,footer){
  outline:1px dashed rgba(80,120,255,.6); outline-offset:2px;
}

/* Tooltips for elements with aria-label or title */
body.a11y-tooltips :where([aria-label],[title]):hover::after,
body.a11y-tooltips :where([aria-label],[title]):focus-visible::after{
  content: attr(aria-label) attr(title);
  position:absolute; transform: translateY(-120%);
  background:#1c2248; color:#fff; padding:.3rem .5rem; border-radius:.4rem;
  font-size:.8rem; white-space:nowrap; pointer-events:none; z-index:9999;
}

/* Reading mask (horizontal) and guide (vertical) */
#readingMask,#readingGuide{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:9998; display:none }
body.a11y-read-mask #readingMask{ display:block }
body.a11y-read-guide #readingGuide{ display:block }

/* Mask: two dark zones leaving a horizontal strip around --maskY */
#readingMask::before,#readingMask::after{
  content:""; position:absolute; left:0; right:0; background:rgba(0,0,0,.35);
}
#readingMask::before{ top:0; height: calc(var(--maskY,40vh) - var(--maskH, 80px)); }
#readingMask::after { bottom:0; height: calc(100vh - var(--maskY,40vh) - var(--maskH, 80px)); }

/* Vertical guide line following mouse X */
#readingGuide::after{
  content:""; position:absolute; top:0; width:2px; height:100%;
  left: var(--guideX, 50vw); background:#2e5bff; box-shadow:0 0 0 1px #fff;
}
/* Warm tint overlay (safe with other filters) */
#warmOverlay{
  position:fixed; inset:0; pointer-events:none; z-index:9996;
  background: rgba(255, 150, 60, var(--warmAlpha,0));
  mix-blend-mode: multiply;               /* soft, natural warmth */
  display:none;
}
body.a11y-warm #warmOverlay{ display:block; }

/* Levels */
body[data-warm-level="1"]{ --warmAlpha:.10; }
body[data-warm-level="2"]{ --warmAlpha:.18; }
body[data-warm-level="3"]{ --warmAlpha:.26; }
/* Accurate warm shift via SVG color-matrix */
body.a11y-warm[data-warm-level="1"] { filter: url(#warm1); }
body.a11y-warm[data-warm-level="2"] { filter: url(#warm2); }
body.a11y-warm[data-warm-level="3"] { filter: url(#warm3); }

/* Fallback for older engines that can’t use url(#filter-id) */
@supports not (filter: url(#warm1)) {
  body.a11y-warm[data-warm-level="1"] {
    filter: sepia(.12) saturate(1.08) hue-rotate(-10deg) brightness(1.02);
  }
  body.a11y-warm[data-warm-level="2"] {
    filter: sepia(.22) saturate(1.12) hue-rotate(-12deg) brightness(1.02);
  }
  body.a11y-warm[data-warm-level="3"] {
    filter: sepia(.32) saturate(1.18) hue-rotate(-15deg) brightness(1.02);
  }
}
/* Apply to media when redscale is ON */
body.a11y-redscale img,
body.a11y-redscale video,
body.a11y-redscale picture img,
body.a11y-redscale .media-redscale {
  filter: url(#redscale) !important;
}

/* Optional: opt out per element */
.no-filter { filter: none !important; }

/* Fallback (approximate) for browsers without SVG filter on CSS */
@supports not (filter: url(#redscale)) {
  body.a11y-redscale img,
  body.a11y-redscale video,
  body.a11y-redscale picture img,
  body.a11y-redscale .media-redscale {
    /* grayscale → strong sepia → rotate toward red */
    filter: grayscale(1) sepia(1) saturate(500%) hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  }
}
/* Images: precise SVG filter */
body.a11y-redscale img,
body.a11y-redscale picture img {
  filter: url(#redscale) !important;
}

/* Videos: robust CSS chain (works everywhere) */
body.a11y-redscale video,
body.a11y-redscale #bgVideo {
  filter: grayscale(1) sepia(1) saturate(450%)
          hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  -webkit-filter: grayscale(1) sepia(1) saturate(450%)
                  hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  will-change: filter;
}

/* Optional helper to force redscale on any element */
.media-redscale { 
  filter: grayscale(1) sepia(1) saturate(450%)
          hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  -webkit-filter: grayscale(1) sepia(1) saturate(450%)
                  hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
}
/* -------- Warm mode: reduce blue / add amber tint -------- */
body.a11y-warm { filter: none; } /* base */
body.a11y-warm[data-warm-level="1"] { filter: sepia(.15) hue-rotate(10deg)  saturate(120%) brightness(1.02); }
body.a11y-warm[data-warm-level="2"] { filter: sepia(.25) hue-rotate(15deg)  saturate(140%) brightness(1.03); }
body.a11y-warm[data-warm-level="3"] { filter: sepia(.35) hue-rotate(18deg)  saturate(160%) brightness(1.04); }
body.a11y-warm[data-warm-level="4"] { filter: sepia(.45) hue-rotate(22deg)  saturate(180%) brightness(1.05); }
body.a11y-warm[data-warm-level="5"] { filter: sepia(.55) hue-rotate(26deg)  saturate(200%) brightness(1.06); }

/* Don’t warm the a11y UI itself */
.a11y-panel, .a11y-bubble { filter: none !important; }

/* -------- Redscale (precise for images, robust for video) -------- */
/* Precise for images via SVG matrix (see HTML snippet below) */
body.a11y-redscale img,
body.a11y-redscale picture img {
  filter: url(#redscale) !important;
}

/* Robust chain for videos (works across engines) */
body.a11y-redscale video,
body.a11y-redscale #bgVideo {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
  -webkit-filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9) !important;
}

/* Grayscale (your existing class) - keep if you already had it */
body.a11y-grayscale img,
body.a11y-grayscale video,
body.a11y-grayscale #bgVideo {
  filter: grayscale(1) !important;
}

/* Optional: opt-out per element */
.no-filter { filter: none !important; -webkit-filter: none !important; }


/* Let you opt-out per element */
.no-filter { filter: none !important; -webkit-filter: none !important; }

body.a11y-bold :where(p, li, a, span, .info-copy, .footer_link, .dtrail-head p){
  font-weight: 700 !important;
}
/* Larger text (affects rem-based + nudges others) */
body.a11y-text-lg{
  font-size: 112.5%;                 /* bumps rem-based text */
  -webkit-text-size-adjust: 125%;
  text-size-adjust: 125%;
}

/* High contrast: override tokens you already use */
body.a11y-contrast{
  --text:#ffffff;
  --muted:#f2f4ff;
  --accent:#6fb3ff;
  --glass: rgba(0,0,0,.72);
  --glass-strong: rgba(0,0,0,.86);
  background:#000 !important;
  color:#fff !important;
}
body.a11y-contrast .header .chrome,
body.a11y-contrast .cta-bubble,
body.a11y-contrast .info-right{ border-color: rgba(122,166,255,.5) !important; }

/* Underline links */
body.a11y-underline-links a{ text-decoration: underline !important; text-underline-offset: .15em; }

/* Bold text (already supported in your CSS, this ensures common text) */
body.a11y-bold :where(h1,h2,h3,h4,h5,h6,div,p,li,a,span,strong,em,button,label,.info-copy){ 
    font-family: "Atkinson Hyperlegible", "OpenDyslexic", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;

  font-weight: 700 !important; }

/* Reduce motion */
body.a11y-reduce-motion *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: smooth !important;
}

/* Dyslexia-friendly / readable font (add your own font-face if desired) */
body.a11y-dyslexic :where(h1,h2,h3,h4,h5,h6,div,p,li,a,span,strong,em,button,label,.info-copy){
  font-family: "Atkinson Hyperlegible", "OpenDyslexic", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
}

/* Grayscale media */
body.a11y-grayscale img,
body.a11y-grayscale video,
body.a11y-grayscale canvas{ filter: grayscale(100%) !important; }
/* --- Cursor zoom lens ---------------------------------------------------- */
.zoom-pane{
  position: fixed;
  width: 320px;                 /* lens size */
  height: 320px;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 200% auto;   /* default 2x zoom; JS overwrites precisely */
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  pointer-events: none;         /* never block clicks */
  display: none;                /* shown via .show */
  z-index: 1400;                /* above nav/panels */
  backdrop-filter: none;
}

.a11y-cursor-zoom .zoom-pane.show{ display: block; }

/* Make zoomable images show intent */
.a11y-cursor-zoom img.is-zoomable{ cursor: zoom-in; }

/* Hide lens on smaller screens */
@media (max-width: 1200px){
  .zoom-pane{ display: none !important; }
}

/* Stop fluid (already in earlier CSS, included here for completeness) */
body.a11y-stop-fluid #fluidCanvas{ display: none !important; }
body.a11y-stop-fluid #auroraCanvas{ display: none !important; }
body.a11y-stop-fluid #bgVideo{ opacity: .3; }
/* Fallback if JS hasn’t run yet */
body.a11y-redscale video,
body.a11y-redscale #bgVideo{
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
  -webkit-filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
}
/* Fallback only-JS will set inline !important anyway */
body.a11y-redscale img,
body.a11y-redscale video,
body.a11y-redscale canvas,
body.a11y-redscale picture img,
body.a11y-redscale #bgVideo {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
  -webkit-filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(-50deg) brightness(1.05) contrast(0.9);
}
/* Single-column layout for the slim 5-toggle panel */
.a11y-panel-inner{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 10px;
  align-items: start;
}

/* Keep each switch: fixed 42px knob + rest for label */
.a11y-switch{
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
}
/* Page-wide green tint if you ever need it */
.a11y-greenscale {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(95deg) brightness(1.05) contrast(0.95) !important;
}
.a11y-greenscale img,
.a11y-greenscale video {
  filter: grayscale(1) sepia(1) saturate(450%) hue-rotate(95deg) brightness(1.05) contrast(0.95) !important;
}

/* Body-level invert: keep a11y UI/overlays readable via double-invert */
body.a11y-invert .a11y-panel,
body.a11y-invert .a11y-bubble,
body.a11y-invert .zoom-pane,
body.a11y-invert #readingMask,
body.a11y-invert #readingGuide,
body.a11y-invert #warmOverlay {
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Opt-out hook for anything else you don't want inverted when body is inverted */
body.a11y-invert [data-no-invert] {
  filter: invert(1) hue-rotate(180deg) !important;
}

body.a11y-contrast .a11y-panel,
body.a11y-contrast .a11y-bubble { filter: none !important; }

/* Keep the accessibility trigger and panel stable in invert mode. */
body.a11y-invert .a11y-panel,
body.a11y-invert .a11y-bubble{
  filter: none !important;
}

/* Keep content images in their original colors when page inversion is enabled.
   Videos/canvas stay under the page-level inversion so the desktop hero background
   regains the original inverted look. */
body.a11y-invert :is(img, picture img){
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Restore card/background media in newspaper, blogs, and service sections. */
body.a11y-invert :is(.post-background, .ncard__img, .ncard__img--hover, .carousel-card__img, .carousel-card__img--hover){
  filter: invert(1) hue-rotate(180deg) !important;
}

body.a11y-invert :is(.entry-thumb img, .entry-video video, .brick img, #viewerImg, .service-img){
  filter: invert(1) hue-rotate(180deg) !important;
}

/* Restore the homepage info rows to their original dark treatment. */
body.a11y-invert .info-row{
  filter: invert(1) hue-rotate(180deg) !important;
}
body.a11y-invert .info-row .info-title,
body.a11y-invert .info-row .info-copy{
  color: #000 !important;
}
body.a11y-invert .info-row :is(.btn-chip, .eyebrow-link){
  color: #1737ff !important;
}
body.a11y-invert .info-row .btn-chip{
  border-color: rgba(23,55,255,.28) !important;
}
body.a11y-invert .info-row .info-right:hover .info-copy,
body.a11y-invert .info-row .info-right:focus-within .info-copy{
  color: #000 !important;
}

/* Keep the bottom carousel readable in invert mode by canceling the page inversion there. */
body.a11y-invert .dtrail,
body.a11y-invert .dtrail-viewer{
  filter: invert(1) hue-rotate(180deg) !important;
}
body.a11y-invert .dtrail .glass-overlay h3,
body.a11y-invert .dtrail-viewer #viewerCaption,
body.a11y-invert .dtrail-viewer #viewerCaption h3{
  color: #fff !important;
}
/* Keep a few dark UI surfaces dark even while the page-level invert is active. */
body.a11y-invert .mp-item .content-box,
body.a11y-invert .why-wrap .industry-card,
body.a11y-invert .why-wrap .step-box,
body.a11y-invert .why-wrap .cards-container .box .content{
  filter: invert(1) hue-rotate(180deg) !important;
}

body.a11y-invert .mp-item .content-box{
  background: rgba(0,0,0,.72) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 1px rgba(255,255,255,.2) inset !important;
}

body.a11y-invert .mp-item .content-box :is(h2, h3, p),
body.a11y-invert .why-wrap .industry-card :is(h2, h3, h4, h6, p, li),
body.a11y-invert .why-wrap .step-box :is(h2, h3, h4, h6, p, li),
body.a11y-invert .why-wrap .cards-container .box .content :is(h2, h3, h4, h6, p, a, li){
  color: #fff !important;
}

/* The MatchingPioneers icon/button graphics should resolve to black in invert mode. */
body.a11y-invert form[action*="matchingpioneers"] .slide-title img,
body.a11y-invert .nav a img[src*="Group.svg"]{
  filter: invert(1) hue-rotate(180deg) brightness(0) saturate(0) !important;
}

/* Keep bulb labels readable in invert mode without re-flipping the whole strip. */
body.a11y-invert .hall .bulb-btn{
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
body.a11y-invert .hall .bulb.is-active .bulb-btn,
body.a11y-invert .hall .bulb:hover .bulb-btn,
body.a11y-invert .hall .bulb:focus-within .bulb-btn{
  color: #7aa6ff !important;
}

/* Preserve the image colors and keep the lower viewer/card overlays as dark glass. */
body.a11y-invert .dtrail-viewer{
  background: rgba(0,0,0,.82) !important;
}
body.a11y-invert .dtrail .glass-overlay{
  background: linear-gradient(to top, rgba(4,8,20,.88) 0%, rgba(7,18,48,.36) 74%, rgba(7,18,48,0) 100%) !important;
}
body.a11y-invert .dtrail-viewer .viewer-card{
  background: rgba(6,10,22,.38) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.52) !important;
}
body.a11y-invert .dtrail-viewer #viewerCaption{
  background: rgba(8,12,26,.72) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  color: #fff !important;
}

/* Keep consultation/booking surfaces readable in invert mode. */
body.a11y-invert :is(.booking-compact, .bc-modal__content, #modal, .find-consultant){
  background: rgba(255,255,255,.92) !important;
  color: #000 !important;
  border-color: rgba(15,23,42,.16) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.18) !important;
}

body.a11y-invert :is(.bc-head, .bc-title, .bc-sub, .bc-sec, .bc-label, .bc-tz),
body.a11y-invert :is(.modal-form label, .fc-header h2, .fc-text, .disclaimer, h2.step-title),
body.a11y-invert :is(.option-card span, .step-circle, .bc-time, .bc-navbtn, .bc-step, .fc-circle, .fc-dot){
  color: #000 !important;
}

body.a11y-invert :is(.bc-input, .bc-textarea, .modal-form input, .modal-form textarea, .modal-form select),
body.a11y-invert :is(.fc-row input, .fc-row select, .fc-form textarea),
body.a11y-invert :is(#inlineCalendar.flatpickr-input, .numInputWrapper input.numInput){
  background: #fff !important;
  color: #000 !important;
  border-color: rgba(15,23,42,.18) !important;
}

body.a11y-invert :is(.bc-input, .bc-textarea, .modal-form input, .modal-form textarea, .modal-form select,
.fc-row input, .fc-row select, .fc-form textarea)::placeholder{
  color: rgba(0,0,0,.58) !important;
  opacity: 1 !important;
}

body.a11y-invert .fc-row select{
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3e%3cpath fill='%23000' d='M0,0 L5,6 L10,0 Z'/%3e%3c/svg%3e") !important;
}

body.a11y-invert :is(.bc-step-icon, .option-card img, .fc-circle, .fc-dot, .flatpickr-prev-month svg, .flatpickr-next-month svg){
  filter: invert(1) hue-rotate(180deg) brightness(0) saturate(0) !important;
}

body.a11y-invert :is(.bc-step-icon path, .bc-step-icon line, .bc-step-icon polyline, .bc-step-icon rect, .bc-step-icon circle){
  stroke: #000 !important;
  fill: none !important;
}

body.a11y-invert :is(.bc-time, .bc-navbtn:not(.bc-navbtn--primary), .option-card, .step-circle){
  background: rgba(255,255,255,.96) !important;
  color: #000 !important;
  border-color: rgba(15,23,42,.16) !important;
  box-shadow: none !important;
}

body.a11y-invert :is(.bc-time:hover, .option-card:hover){
  background: rgba(233,239,255,.98) !important;
  color: #000 !important;
}

body.a11y-invert :is(.bc-time.is-selected, .bc-navbtn--primary, .bc-btn, .fc-form button, .btn-back, .btn-next){
  color: #fff !important;
}

body.a11y-invert .step-tracker::before{
  background: rgba(0,0,0,.28) !important;
}

body.a11y-invert :is(.flatpickr-calendar, .flatpickr-calendar.inline){
  background: transparent !important;
  color: #000 !important;
}

body.a11y-invert :is(.flatpickr-day, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year, .flatpickr-weekday, .flatpickr-prev-month, .flatpickr-next-month){
  color: #000 !important;
}

body.a11y-invert .flatpickr-day.selected{
  color: #fff !important;
}
/* When invert is active, keep body overlays off (so they aren't inverted) */
body.a11y-invert #warmOverlay,
body.a11y-invert #readingMask,
body.a11y-invert #readingGuide,
body.a11y-invert #zoomPane{ display: none !important; }
body{overflow-x: hidden;}
/* Keep language select tidy */
#a11yPanel #optUILang{ width:100%; min-height:34px; border-radius:8px; }