/* =========================================================
   Center for Accessible Technology
   Clean, minimal, accessible stylesheet
   Body/heading type: Atkinson Hyperlegible (Braille Institute)
   ========================================================= */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700-italic.woff2') format('woff2');
}


/* OpenDyslexic: optional user-selected reading font. The font is licensed under
   the SIL Open Font License and loaded only when the browser needs this family. */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-italic-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-bolditalic-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Lexend: heading typeface. Designed to improve reading fluency; lighter,
   friendlier weight than bold Atkinson while staying highly legible. */
@font-face {
  font-family: 'Lexend';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/lexend-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lexend';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/lexend-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Lexend';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/lexend-600.woff2') format('woff2');
}

:root {
  --ink: #1b1f24;
  --heading: #2c3742;      /* softer near-black for headings (AAA on light bgs) */
  --muted: #40474f;        /* AAA-contrast secondary text */
  --danger: #8a1c16;       /* accessible error red (AAA on white) */
  --line: #e5e2dc;
  --bg: #faf8f3;           /* soft off-white (less glaring than pure white) */
  --bg-soft: #f5f8f8;
  --accent: #0d6b68;       /* teal */
  --accent-dark: #094b49;
  --accent-soft: #e6f2f1;
  --brand-top: #004f7c;    /* deep blue: header and CTA */
  --brand-top-dark: #003a5c;
  --cream: #f6eed9;        /* warm cream */
  --cream-2: #fff4e5;      /* light peach */
  --purple: #5f1a84;       /* logo purple */
  --purple-dark: #48156a;
  --purple-soft: #efe6f6;
  --callout-bg: #f6eed9;     /* warm cream callout surface */
  --callout-text: #2c3742;   /* neutral dark text, not teal-on-blue */
  --callout-border: #5f1a84; /* brand purple accent */
  --focus-ring: var(--purple);    /* branded focus ring; redefined for dark mode below (see contrast note there) */
  --maxw: 68rem;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);

  /* Theme-aware text variants: used where accent-dark/purple sit directly on a
     page/card background (as opposed to inside a light "chip" like a pill or
     success banner, where the constant dark colors already work in both
     themes). Same value as their base color in light mode, so this introduces
     no visual change here — only the dark theme below redefines them. */
  --link: var(--accent-dark);
  --purple-text: var(--ink);
  /* Form/search field surfaces, and the "Explore" band, were hardcoded colors;
     pulled into variables here so dark mode can redefine them. */
  --field-bg: #fff;
  --field-border: #c3ccd4;
  --danger-bg: #fdecea;
  --explore-bg: #f7f6f3;
  /* Default (non-hover/non-current) nav link text. Same value as --brand-top in
     light mode (identical rendering to before), but themeable, since plain
     --brand-top text is unreadable once the menu bar background goes dark. */
  --nav-link: var(--brand-top);
}

/* =========================================================
   Dark theme
   Applied via [data-theme="dark"] on <html>, set by an inline
   script in <head> (reads localStorage, falls back to the
   system preference) so there is no flash of the wrong theme,
   and toggled at runtime by the button nav.js adds to the menu
   bar. Every pair below was checked for WCAG contrast; body text
   pairs land at AAA (7:1+), matching the light theme's ambition.
   ========================================================= */
:root[data-theme="dark"] {
  --ink: #e9e7e2;
  --heading: #f4f2ec;
  --muted: #aab0b7;
  --danger: #ff8a80;
  --danger-bg: #3a1512;
  --line: #333a40;
  --bg: #1b1f23;
  --bg-soft: #232931;
  --explore-bg: #20252b;
  --accent-soft: #1c4941;    /* lightened from an earlier, near-invisible value — see the
                                 callout comment below for why (~1.25:1 against --bg, well
                                 under a perceptible difference) */
  --cream: #211c15;
  --cream-2: #241e15;
  --link: #64d8cf;
  --purple-text: var(--ink);
  --callout-bg: #2b261f;
  --callout-text: #f4f2ec;
  --callout-border: #d6b8f0;
  --field-bg: #20262c;
  --field-border: #454c53;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .5);
  --nav-link: var(--ink);
  /* The brand purple focus ring only has ~1.55:1 contrast against this dark
     background (fails the 3:1 UI-component minimum, WCAG 1.4.11) — the white
     halo below happens to compensate visually, but that's not something to
     rely on. Use the same lighter purple already used for purple-text in
     dark mode instead, which has ~9-10:1 contrast against every background. */
  --focus-ring: #d6b8f0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ---- Text size: two larger sizes, toggled via [data-fontsize] on <html>
   (same pattern as [data-theme]). Since layout throughout the site is set in
   rem units, scaling the root font-size scales everything proportionally. ---- */
:root[data-fontsize="lg"] { font-size: 112.5%; }
:root[data-fontsize="xl"] { font-size: 125%; }

/* Optional reading preferences from the Settings menu. These are user-controlled enhancements. */
:root[data-linespacing="increased"] body { line-height: 2; }
:root[data-linespacing="increased"] h1,
:root[data-linespacing="increased"] h2,
:root[data-linespacing="increased"] h3 { line-height: 1.45; }
:root[data-readingfont="opendyslexic"] body {
  font-family: 'OpenDyslexic', 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- Accessibility: skip link + focus ---- */
/* @component: Skip link | @a11y: kept off-screen until :focus, then slides into view. */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--brand-top);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* Branded, always-visible focus indicator: purple ring (on-brand, high contrast on
   light backgrounds; a lighter purple in dark mode keeps the ring itself above the
   3:1 UI-component minimum, not just the white halo) plus a white halo so it stays
   visible against dark backgrounds too. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .95);
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main { display: block; }

section { padding-block: 3rem; }
section.soft { background: var(--cream); }
section.warm { background: var(--cream-2); }
section.explore { background: var(--explore-bg); padding-block: 2.5rem; }  /* soft off-white "Explore" band */
/* Interior pages: tighten the big white gaps where plain content sections stack */
section:not([class]) + section:not([class]) { padding-top: 0; }
section:not([class]):has(+ section:not([class])) { padding-bottom: 1.75rem; }
/* And where a plain content section follows the off-white Explore band */
section.explore + section:not([class]) { padding-top: 1.25rem; }

/* ---- Typography ---- */
h1, h2, h3 { font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  line-height: 1.2; color: var(--heading); font-weight: 500; }
h1 { font-size: clamp(2.4rem, 5.6vw, 3.75rem); margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 1rem; letter-spacing: -.005em; }
h3 { font-size: 1.2rem; margin: 0 0 .5rem; font-weight: 600; }
p { margin: 0 0 1rem; max-width: 65ch; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 60ch; text-wrap: pretty; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.eyebrow {
  letter-spacing: .04em;
  font-size: .85rem;
  font-weight: 700;
  color: var(--purple-text);
  margin: 0 0 .75rem;
}

/* ---- Header / Nav ---- */
/* @component: Site header | @a11y: banner-landmark styling. */
.site-header {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--purple);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: var(--brand-top);
}
/* Decorative depth: soft highlight toward the right + faint dot texture.
   Purely cosmetic (pseudo-element), sits behind the centered logo and name. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 86% 50%, transparent 0 7.4rem, rgba(255, 255, 255, .17) 7.5rem 7.65rem, transparent 7.75rem),
    radial-gradient(circle at 73% 8%, transparent 0 3.7rem, rgba(255, 255, 255, .11) 3.8rem 3.95rem, transparent 4.05rem),
    radial-gradient(60% 120% at 88% 18%, rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .06) 1.3px, transparent 1.4px);
  background-size: auto, auto, auto, 24px 24px;
}
/* A second decorative circle, echoing the ring behind the hero photo below,
   so the same design motif carries through the top banner. Sits on the
   opposite side from the hero's ring for balance across the page. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .16);
  width: 22rem;
  height: 22rem;
  left: -7rem;
  top: 50%;
  transform: translateY(-50%);
}
/* Header (DEFAULT, every page): large logo centered on top, name centered below. */
.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 2.1rem 1.5rem;
}
.header-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}
.site-header .brand {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .7rem;
  font-size: 2.5rem;
  letter-spacing: .025em;
}
/* Logo sits in a wider white circle, with padding to set it off from the blue. */
.site-header .brand .logo {
  width: 118px;
  height: 118px;
  background: #fff;
  padding: 7px;
  border-radius: 50%;
  box-sizing: border-box;
}
.site-header .brand .brand-text { display: block; }
.site-header .brand .brand-text small {
  display: block;
  font-size: 1.4rem;
  letter-spacing: .04em;
}

/* Menu bar: sticky only while the full navigation fits comfortably. */
/* @component: Menu bar | @a11y: nav.js removes sticky behavior through the
   wrapped and collapsed states so enlarged text never covers page content. */
.menu-bar {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .06);
  position: sticky;
  top: 0;
  z-index: 50;
}
.menu-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.15rem;
  padding-block: .45rem;
}
.menu-bar .site-nav { flex: 1; }

/* Site search: compact field + icon button, sits at the right end of the menu row */
/* @component: Site search | @a11y: compact field + icon button with a visible focus outline. */
.nav-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.nav-search input[type="search"] {
  font: inherit;
  font-size: 1rem;
  width: 7rem;
  min-height: 2.75rem;
  padding: .42rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.nav-search input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.nav-search input[type="search"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.nav-search button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  background: var(--accent-dark);
  color: #fff;
  cursor: pointer;
}
.nav-search button:hover { background: var(--accent); border-color: var(--accent); }
.nav-search button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nav-search svg { display: block; }

/* @component: Display settings | @a11y: a disclosure button (aria-expanded +
   aria-controls) opens a popover grouping the theme and text-size controls
   together, since they're both page-display preferences. Each control is a
   toggle button with aria-pressed reflecting its state; nav.js keeps them in
   sync and closes the popover on Escape or an outside click. */
.display-settings { position: relative; flex: none; margin-inline-start: .5rem; }
.display-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 2.75rem;
  padding: 0 .9rem;
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--ink);
  cursor: pointer;
}
.display-settings-toggle:hover { border-color: var(--accent); color: var(--link); }
.display-settings-toggle svg { display: block; }
.display-settings-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  width: min(20rem, calc(100vw - 2.5rem));
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.settings-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -.35rem -.35rem 1.1rem 0;
}
.settings-panel-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}
.settings-close {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.settings-close:hover { border-color: var(--accent); color: var(--link); }
.settings-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.settings-group + .settings-group { margin-top: 1.5rem; }
.settings-label {
  margin: 0 0 .65rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.segmented { display: flex; gap: .5rem; }
.seg-btn {
  flex: 1;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .75rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--ink);
  cursor: pointer;
}
.seg-btn:hover { border-color: var(--accent); }
.seg-btn[aria-pressed="true"] {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}
.menu-bar.nav-collapsed .display-settings { margin-top: .4rem; margin-inline-start: 0; }
.menu-bar.nav-collapsed .display-settings-panel { left: 0; right: auto; }

/* Screen-reader-only utility */
/* @component: Visually-hidden utility | @a11y: hides content visually while leaving it available to screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Search results page ---- */
/* @component: Search form / results | @a11y: search-results page and result-list styling. */
.search-page { margin: 0 0 1.5rem; }
.search-page > label { display: block; font-weight: 600; margin-bottom: .4rem; color: var(--heading); }
.search-page-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.search-page-row input[type="search"] {
  flex: 1 1 18rem;
  font: inherit;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.search-page-row input[type="search"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.search-count { color: var(--muted); margin: 0 0 1rem; }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-hit { padding: 1rem 0; border-top: 1px solid var(--line); }
.search-hit a {
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}
.search-hit p { margin: .35rem 0 0; color: var(--muted); }

/* Middle tier, toggled by nav.js: the nav links + theme toggle fit on one
   row, but adding search would not, so search wraps to its own full-width
   row underneath rather than collapsing everything to the Menu button. */
.menu-bar.search-wrap .container { flex-wrap: wrap; }
.menu-bar.search-wrap,
.menu-bar.nav-collapsed { position: static; }
.menu-bar.search-wrap .nav-search {
  order: 3;
  width: 100%;
  margin-top: .35rem;
}
.menu-bar.search-wrap .nav-search input[type="search"] { flex: 1 1 auto; width: auto; }

/* Collapsed (hamburger) state, toggled by nav.js only when even the nav links
   and theme toggle can't fit on one row. Result: the menu bar is always one
   of three deliberate states, never an ambiguous wrap. */
.menu-bar.nav-collapsed .container { flex-direction: column; align-items: flex-start; padding-block: .6rem; }
.menu-bar.nav-collapsed .nav-toggle { display: inline-flex; }
.menu-bar.nav-collapsed .site-nav { flex: none; width: 100%; display: none; padding-bottom: .25rem; }
.menu-bar.nav-collapsed .site-nav.open { display: block; }
.menu-bar.nav-collapsed .site-nav ul { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: .1rem; }
.menu-bar.nav-collapsed .site-nav a { display: block; padding: .8rem .4rem; }
/* In collapsed (mobile) mode the search becomes a full-width row under the Menu button */
.menu-bar.nav-collapsed .nav-search { width: 100%; margin-top: .15rem; }
.menu-bar.nav-collapsed .nav-search input[type="search"] { flex: 1 1 auto; width: auto; }
/* Header sits on deep blue: light text/controls for contrast */
.site-header .brand,
.site-header .brand:hover { color: #fff; }
.site-header .brand .mark { background: #fff; color: var(--brand-top); }
.site-header .brand .brand-text small { color: #eaf2f8; }
.site-header .nav-toggle {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
}
.brand:hover { color: var(--ink); }
.brand .mark {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 9px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.03em;
}
.brand .mark-img,
.brand .logo {
  flex: none;
  width: 84px; height: 84px;
  border-radius: 50%;
  display: block;
}
.site-footer .brand .mark-img {
  width: 96px;
  height: 96px;
  background: #fff;
  padding: 6px;
  border-radius: 50%;
  box-sizing: border-box;
}
.brand .brand-text small {
  display: block;
  font-weight: 500;
  font-size: .95rem;
  color: var(--muted);
  letter-spacing: .02em;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: .5rem .8rem;
  border-radius: 8px;
  cursor: pointer;
}

/* @component: Primary navigation | @a11y: focus-visible pills; the current page is marked with an underline, not colour alone. */
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  gap: .1rem 1rem;
  margin: 0; padding: 0;
}
/* First menu item sits flush left, aligned with the logo */
.site-nav ul li:first-child a { padding-left: 0; }
.site-nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--nav-link);
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: .015em;
  padding: .55rem .45rem;
  white-space: nowrap;
  border-radius: 8px;
}
/* Hover/focus highlight is a rounded pill that floats clear of the bar edges
   (the bar has its own vertical padding), so it never merges with the section
   above or below. */
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--link); background: var(--cream-2); }
.site-nav a[aria-current] {
  color: var(--link);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: .8rem 1.4rem;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent-dark); color: #fff; }
.btn-primary:hover { background: #063a38; color: #fff; }
.btn-outline { background: transparent; color: var(--link); border-color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); color: var(--link); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Service pills: quick links to each department's service subpages */
.pills { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.pills a.pill {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink);
  background: var(--purple-soft);
  border: 1.5px solid transparent;
  padding: .65rem 1.35rem;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.pills a.pill::after { content: " \2192"; white-space: pre; }
.pills a.pill:hover { background: var(--purple); color: #fff; }

/* ---- Hero: copy on the left, photo bleeding off the right edge and up
   into the banner boundary ---- */
/* @component: Hero | @a11y: decorative rings and curved edge are CSS-only; motion respects prefers-reduced-motion. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 355px;
  display: flex;
  align-items: center;
  padding-block: 1.7rem 2rem;
}
/* Pull the first content section up so its heading lands within the fold */
.hero + section { padding-top: 2rem; }
.hero .container { position: relative; z-index: 2; }
.hero h1 { margin-top: 0; font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
.hero .lead { margin-bottom: 0; max-width: none; font-size: 1.25rem; }
.hero-copy { max-width: min(42rem, 53vw); }
.hero-media {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  bottom: 0;
  right: 2.5%;
  width: 39%;
  display: flex;
  align-items: center;
  z-index: 1;
}
/* Decorative circles echoing the logo mark, layered behind the photo so it
   feels designed into the space rather than a plain rectangle. */
.hero-media::before {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  width: 33rem;
  height: 33rem;
  right: -7rem;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid rgba(13, 107, 104, .16);
}
.hero-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 82%;
  max-height: 27rem;
  object-fit: cover;
  object-position: center 42%;
  /* Gentle single S-curve on the left edge (softer than a full S, more
     interesting than a plain arc). Right edge stays straight to bleed. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M26,0%20C14,26%2038,54%2022,100%20L100,100%20L100,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M26,0%20C14,26%2038,54%2022,100%20L100,100%20L100,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(-12px 0 28px rgba(16, 24, 40, .16));
}
@media (max-width: 820px) {
  .hero {
    display: block;
    min-height: 0;
    margin-top: 0;
    padding-top: 3rem;
  }
  .hero-media {
    position: static;
    width: auto;
    right: auto;
    margin-top: 1.75rem;
    display: block;
  }
  .hero-media::before, .hero-media::after { display: none; }
  .hero-img {
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    -webkit-mask: none;
    mask: none;
    filter: none;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
  }
  .hero-copy { max-width: none; }
}

/* ---- Cards / grid ---- */
/* @component: Grid layout | @a11y: responsive card grid that reflows to one column on small screens. */
.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Fixed 2-column variant: a deliberate 2x2 square instead of the default
   auto-fit row (which would go 3 or 4 across on wide screens). */
.grid.grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .grid.grid-2col { grid-template-columns: 1fr; } }
.grid.grid-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid.grid-3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.grid-3col { grid-template-columns: 1fr; } }
/* @component: Cards | @a11y: card container; the action inside stays a real, focusable link. */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
.card-img {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 1.35rem;
  background: var(--cream-2);
  border: 4px solid var(--purple);
}
.card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.card h3 { margin-top: 0; }
.card p { margin-bottom: .75rem; color: var(--muted); }
.card a.more { font-weight: 600; margin-top: auto; }

/* Home team cards: reserve uniform space for heading + description so the
   "Meet the team" links all start at the same height across the four cards.
   Shorter cards simply carry a larger gap above the link. */
.card-team h3 { min-height: 4.4rem; }
.card-team a.more { margin-top: auto; }

.photo-credit {
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  margin: 1.5rem 0 0;
  max-width: none;
}
.photo-credit a { color: var(--muted); }

/* ---- Value cards ---- */
.card.value {
  text-align: left;
  align-items: stretch;
  border-top: 4px solid var(--purple);
}
.card.value h3 { margin-top: 0; }
.card.value p { color: var(--muted); margin-bottom: 0; }

/* ---- Person cards ---- */
.card.person { text-align: left; align-items: stretch; }
.card.person h3 { margin-top: 0; }
.card.person .role { color: var(--purple-text); font-weight: 700; margin: .1rem 0 .6rem; }
.card.person p:last-child { margin-bottom: 0; }
.card.person a { font-weight: 600; }

/* ---- Board member list: name + role only, no bio text ---- */
.board-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
  gap: .5rem 1.5rem;
}
.board-list li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.board-list .name { font-weight: 700; color: var(--heading); }
.board-list .role { display: block; color: var(--muted); font-size: .9rem; }

/* ---- Step cards: a numbered process (e.g. Test / Listen / Report / Improve)
   laid out as a grid of compact cards, with a large numeral as the primary
   visual device rather than an icon. ---- */
.card.step { border-top: 4px solid var(--accent); }
.card.step .step-num {
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--link);
  line-height: 1;
  margin: 0 0 .4rem;
}
.card.step h3 { margin-top: 0; }
.card .tagline { font-weight: 700; color: var(--heading); margin-bottom: .6rem; }
.card.step ul { margin: 0 0 .75rem; padding-left: 1.15rem; }
.card.step ul li { margin-bottom: .3rem; color: var(--muted); }
.card.step ul li::marker { color: var(--link); }

/* Monitoring comparison: one coherent change/response matrix rather than a
   collection of pill-like rows. It stacks into labelled blocks on small screens. */
.monitoring-comparison-wrap {
  max-width: 58rem;
  margin-top: 1.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.monitoring-comparison {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.monitoring-comparison th,
.monitoring-comparison td {
  width: 50%;
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
}
.monitoring-comparison thead th {
  background: var(--brand-top);
  color: #fff;
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
}
.monitoring-comparison thead th + th { border-inline-start: 1px solid rgba(255,255,255,.28); }
.monitoring-comparison tbody tr + tr { border-top: 1px solid var(--line); }
.monitoring-comparison tbody td:first-child {
  color: var(--heading);
  font-weight: 700;
}
.monitoring-comparison tbody td:last-child {
  border-inline-start: 4px solid var(--accent);
  background: var(--bg-soft);
}
.monitoring-comparison-note {
  max-width: 58rem;
  margin: 1.25rem 0 0;
}
@media (max-width: 620px) {
  .monitoring-comparison-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .monitoring-comparison,
  .monitoring-comparison tbody,
  .monitoring-comparison tr,
  .monitoring-comparison td { display: block; width: 100%; }
  .monitoring-comparison thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .monitoring-comparison tbody tr {
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
  }
  .monitoring-comparison tbody tr + tr { border-top: 1px solid var(--line); }
  .monitoring-comparison td { padding: .85rem 1rem; }
  .monitoring-comparison td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .25rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .monitoring-comparison tbody td:last-child {
    border-inline-start: 0;
    border-top: 4px solid var(--accent);
  }
}
/* Contact page team cards: reserve a uniform heading height so the contact
   details (phone, email) line up at the same level across every card. */
.contact-teams .card h3 { min-height: 2.9rem; }

/* ---- Team-lead bands (one lead per full-width row, alternating background).
   Also powers .step-band: the same layout used for a numbered process (e.g.
   "What an audit can include"), with a numeral in the badge instead of an
   icon. ---- */
.lead-band, .step-band { padding-block: 2.25rem; }
.lead-band.alt, .step-band.alt { background: var(--cream); }
.lead-row, .step-row { display: flex; gap: 2rem; align-items: flex-start; }
.lead-badge, .step-badge {
  flex: none;
  width: 108px; height: 108px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--purple-soft);
  color: var(--ink);
  border: 3px solid var(--purple);
}
.lead-badge svg { width: 52px; height: 52px; }
.step-badge {
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
}
.lead-content, .step-content { max-width: 62ch; }
.lead-content h2, .step-content h2 { margin-top: 0; }
.lead-content .role { color: var(--purple-text); font-weight: 700; margin: .1rem 0 .6rem; }
.lead-content p:last-child, .step-content p:last-child { margin-bottom: 0; }

/* ---- History timeline: a continuous vertical line with a ringed dot per
   milestone, the year set large and bold as the primary visual device. On
   narrow screens the decorative line/dots drop and items simply stack, per
   the "chronology should remain understandable without the visual treatment"
   requirement. ---- */
.timeline { position: relative; list-style: none; margin: 2rem 0 0; padding: 0; }
.timeline::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: 9px;
  width: 2px;
  background: var(--line);
}
.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: 0 0 2.5rem 2.75rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .3rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--link);
}
.timeline-year {
  grid-column: 1 / -1;
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--link);
  margin: 0 0 .35rem;
  line-height: 1;
}
.timeline-content h3 { margin: 0 0 .5rem; }
.timeline-content p:last-child { margin-bottom: 0; }
.timeline-content dl { margin: .9rem 0 0; }
.timeline-content dt { font-weight: 700; color: var(--heading); margin-top: .7rem; }
.timeline-content dt:first-child { margin-top: 0; }
.timeline-content dd { margin: .15rem 0 0; color: var(--muted); }
.timeline-content { max-width: 62ch; }
.timeline-photo {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  border-radius: var(--radius);
  margin: 0;
}
.today-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.today-layout > div { max-width: none; }
.today-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
@media (max-width: 760px) {
  .timeline::before { display: none; }
  .timeline-item { grid-template-columns: 1fr; gap: 1rem; padding-left: 0; }
  .timeline-item::before { display: none; }
  .timeline-year { grid-column: auto; }
  .timeline-photo { max-width: 32rem; }
  .today-layout { grid-template-columns: 1fr; }
  .today-photo { max-width: 32rem; }
}
.step-content h3 { margin-top: 1.5rem; }
.step-content > p:first-of-type { font-size: 1.08rem; }
@media (max-width: 640px) { .lead-row, .step-row { flex-direction: column; gap: 1rem; } }

/* ---- Callout: a short, emphasized standalone statement set off from
   surrounding prose (a light "chip" that reads correctly in both themes,
   the same way the success banner and outline-button hover state do). ---- */
/* Border uses --link (not --accent): --accent stays a constant dark teal in
   both themes, which drops to ~2:1 against the dark-mode background — nearly
   invisible, and below the 3:1 UI-component minimum. --link is already
   theme-aware (it's also the callout's own text color), so reusing it here
   keeps the border clearly visible in both themes and gives the callout one
   consistent color identity instead of two competing accent colors. */
.callout {
  border-left: 5px solid var(--callout-border);
  background: var(--callout-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  max-width: 54rem;
}
.callout h3 { margin-top: 0; color: var(--callout-text); }
.callout p {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  color: var(--callout-text);
  max-width: none;
}
.callout > strong { color: var(--callout-text); }
.callout p:last-child { margin-bottom: 0; }

/* ---- Tag line: a short, bold, bullet-separated list of descriptors used
   inline in prose (e.g. "Goals • Budget • Timeframe"), lighter-weight than
   a full chip/pill component since these aren't interactive. ---- */
.tag-line {
  font-weight: 700;
  color: var(--heading);
  letter-spacing: .01em;
}

/* ---- News ---- */
/* @component: News list | @a11y: dated announcement items. */
.news-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
}
.news-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.news-item time { display: block; font-size: .95rem; font-weight: 700; color: var(--purple-text); margin-bottom: .4rem; }
.news-item p { color: var(--muted); margin-bottom: .5rem; text-wrap: pretty; }
.news-item p.eyebrow { color: var(--purple-text); margin-bottom: .4rem; }
.news-item h3 { margin: 0 0 .5rem; text-wrap: balance; }
.news-item a.more { font-weight: 600; }

/* ---- Content prose blocks ---- */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; }
.prose > h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--accent); }

/* Mission list: native list semantics with branded checkmarks. */
.mission-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mission-checklist li {
  position: relative;
  margin: 0 0 .8rem;
  padding-left: 2rem;
}
.mission-checklist li::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .05rem;
  width: .5rem;
  height: .9rem;
  border: solid var(--link);
  border-width: 0 .2rem .2rem 0;
  transform: rotate(45deg);
}

.two-col {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}

/* Homepage Community section: keep the image anchored to the left while
   giving the text a wider, more comfortable reading column. */
.home-community-layout {
  grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.home-community-layout .prose {
  max-width: none;
}
.home-community-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 26rem;
  margin: 0;
  justify-self: start;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* ---- Fact tiles ---- */
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
/* @component: Credibility tiles | @a11y: Static content, so no interaction is required to reveal supporting information. */
.fact {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--bg);
}
.fact .num, .fact .label { display: block; }
.fact .num { font-size: 1.9rem; font-weight: 800; color: var(--link); line-height: 1.05; overflow-wrap: break-word; }
.fact .num.sm { font-size: 1.4rem; }
.fact .label { color: var(--muted); font-size: .95rem; margin-top: .35rem; text-wrap: balance; }

/* ---- Callout / CTA band ---- */
/* @component: Call to action | @a11y: high-contrast band; the Donate link is styled as a button. */
.cta-band { background: var(--brand-top); color: #fff; border-radius: var(--radius); padding: 2.5rem; text-align: left; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #eaf3fb; max-width: none; }
.cta-band .btn-row { justify-content: flex-start !important; }
.cta-band .btn-primary { background: #fff; color: var(--brand-top); }
.cta-band .btn-primary:hover { background: #eef4fb; }

/* ---- Client sectors ---- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sector-card {
  min-height: 15rem;
  perspective: 80rem;
}
.sector-intro { max-width: 62rem; margin-bottom: .5rem; }
.flip-instructions { margin: 0 0 1.5rem; color: var(--muted); }
.flip-card {
  display: block;
  width: 100%;
  min-height: 15rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.flip-card-inner {
  position: relative;
  display: block;
  width: 100%;
  min-height: 15rem;
  transform-style: preserve-3d;
  transition: transform .55s ease;
}
.flip-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1.25rem;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: var(--cream-2);
  font-size: .95rem;
  line-height: 1.5;
}
.flip-card-title {
  display: block;
  color: var(--heading);
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}
.flip-card-cue { color: var(--muted); font-size: .86rem; }
.sector-icon {
  width: 4.5rem;
  height: 4.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sector-card:nth-child(odd) .flip-card { color: var(--purple-text); }
.sector-card:nth-child(even) .flip-card { color: var(--link); }
.flip-card[aria-pressed="true"] .flip-card-inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
}
.flip-card:focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 4px; }
@media (max-width: 900px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sector-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .flip-card-inner,
  .flip-card[aria-pressed="true"] .flip-card-inner,
  .flip-card:hover .flip-card-inner { transform: none; transition: none; }
  .flip-card-back { display: none; transform: none; }
  .flip-card[aria-pressed="true"] .flip-card-front { display: none; }
  .flip-card[aria-pressed="true"] .flip-card-back { display: flex; }
}

/* ---- Our clients: industry chips + testimonials ---- */
.industries {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 2.75rem;
  padding: 0;
  max-width: 40rem;
}
.industries li { display: flex; }
/* @component: Sector chips | @a11y: <button> chips with a visible focus state. */
.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--heading);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.industry-chip::after {
  content: "+";
  font-weight: 700;
  color: var(--purple-text);
  font-size: 1.05em;
  line-height: 1;
}
.industry-chip:hover {
  background: var(--purple-soft);
  border-color: var(--purple);
  color: var(--ink);
}

/* Industry popup dialog */
/* @component: Modal dialog | @a11y: native <dialog> panel plus a dimmed ::backdrop. */
.industry-dialog {
  max-width: 32rem;
  width: calc(100% - 2rem);
  border: none;
  border-top: 5px solid var(--purple);
  border-radius: var(--radius);
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(16, 24, 40, .3);
}
.industry-dialog::backdrop { background: rgba(16, 24, 40, .55); }
.industry-dialog .dialog-inner { position: relative; padding: 1.9rem; }
.industry-dialog h2 { margin: 0 0 .6rem; }
.industry-dialog .eyebrow { margin-bottom: .2rem; }
.industry-dialog #idlg-desc { color: var(--ink); }
.dialog-quote {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--cream);
  border-radius: var(--radius);
}
.dialog-quote blockquote { margin: 0; }
.dialog-quote p { margin: 0 0 .5rem; font-size: 1.05rem; }
.dialog-quote .attr { margin: 0; color: var(--muted); font-weight: 600; }
.dialog-close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.dialog-close:hover { background: var(--cream-2); }
.testimonials { align-items: stretch; }
/* @component: Testimonials | @a11y: figure / figcaption quote cards. */
.card.quote {
  border-top: 4px solid var(--accent);
  text-align: left;
}
.card.quote blockquote { margin: 0; }
.card.quote p {
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.card.quote .attr {
  color: var(--muted);
  font-weight: 600;
  font-style: normal;
  margin: 0;
}
.card.quote .attr .attr-org { display: block; font-weight: 400; }

/* ---- Section flourishes: faint rings echoing the logo mark, varied per
   section so each has its own accent while staying in the same family. ---- */
.fx { position: relative; overflow: hidden; }
.fx > .container { position: relative; z-index: 1; }
.fx::before, .fx::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Values: concentric rings tucked into the bottom-left (blue + purple) */
.fx-values::after  { width: 380px; height: 380px; left: -150px; bottom: -140px; border: 2px solid rgba(0, 79, 124, .12); }
.fx-values::before { width: 210px; height: 210px; left:  -45px; bottom:  -55px; border: 2px solid rgba(95, 26, 132, .13); }
/* News: rings set into the top-right (teal + blue) */
.fx-news::after  { width: 360px; height: 360px; right: -140px; top: -140px; border: 2px solid rgba(13, 107, 104, .13); }
.fx-news::before { width: 200px; height: 200px; right:  -40px; top:  -55px; border: 2px solid rgba(0, 79, 124, .12); }
/* These rings were tuned for a light background; on dark they need more
   opacity to stay visible at all, so dark mode gets its own values here. */
:root[data-theme="dark"] .fx-values::after  { border-color: rgba(100, 180, 255, .16); }
:root[data-theme="dark"] .fx-values::before { border-color: rgba(214, 184, 240, .18); }
:root[data-theme="dark"] .fx-news::after    { border-color: rgba(100, 216, 207, .18); }
:root[data-theme="dark"] .fx-news::before   { border-color: rgba(100, 180, 255, .16); }
@media (max-width: 820px) {
  .fx::before, .fx::after { display: none; }
}

/* ---- Aside info box ---- */
.info-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.info-box h3 { margin-top: 0; }
.info-box p { color: var(--muted); }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list a { font-weight: 600; }

/* ---- Contact form ---- */
/* @component: Accessible form | @a11y: fields, error text in --danger, and the aria-invalid outline. */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.form-field .field-note { font-weight: 400; color: var(--muted); }
.form-field input,
.form-field textarea {
  width: 100%;
  font: inherit;
  padding: .7rem .8rem;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--ink);
}
.form-field .hint { font-size: .95rem; color: var(--muted); margin-top: .3rem; }
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border: 2px solid var(--danger); }
.field-error { color: var(--danger); font-weight: 700; font-size: 1rem; margin: .35rem 0 0; }
.form-error-summary {
  border: 2px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.form-error-summary p { margin: 0 0 .5rem; font-weight: 700; }
.form-error-summary ul { margin: 0; padding-left: 1.25rem; }
.form-error-summary a { color: var(--danger); font-weight: 700; }
.form-success {
  border: 2px solid var(--link);
  background: var(--accent-soft);
  color: var(--link);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

/* ---- Footer ---- */
/* @component: Footer | @a11y: contentinfo-landmark styling; underlined links. */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--cream);
  padding-block: 2.5rem;
  margin-top: 1rem;
  font-size: .95rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.site-footer h2 { margin: 0 0 .85rem; font-size: 1.15rem; letter-spacing: normal; font-weight: 700; color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--link); }
.site-footer .brand { text-decoration: none; }
.footer-brand p { color: var(--muted); }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; }
.footer-bottom p { max-width: none; margin-bottom: 0; }
@media (min-width: 900px) {
  .footer-bottom p { white-space: nowrap; }
}

/* ---- Page intro band ---- */
/* @component: Page header | @a11y: single-<h1> page intro band. */
/* @component: Breadcrumb | @a11y: <nav aria-label="Breadcrumb"> with an <ol>
   of two links, Home and the parent section, sitting above the page title. */
.breadcrumb { padding-block: .85rem 0; }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: .9rem;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin: 0 .5rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--link); }
.breadcrumb li[aria-current="page"] { color: var(--muted); }

.page-head { background: var(--cream-2); border-bottom: 1px solid var(--line); padding-block: 3rem; }
.page-head h1 { font-size: clamp(2.25rem, 5vw, 3rem); }
.page-head .lead { margin-bottom: 0; max-width: none; text-wrap: balance; }

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }

/* ---- Responsive nav ---- */
@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---- Digital Accessibility landing page ----
   Core engagement models receive stronger visual emphasis than the smaller
   specialized-service cards. Spacing lives in CSS rather than inline styles. */
.da-intro { margin-bottom: 1.25rem; }
.da-intro-detail { margin-bottom: 1.5rem; }
.da-section-intro { margin-bottom: 2rem; }
.da-core-services, .da-specialized-services { margin-top: 1.5rem; }
.da-core-card { border-top: 4px solid var(--accent); }
.da-service-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.da-service-card-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 13.5rem;
}
.da-service-card-grid .more { margin-top: auto; }
.da-service-popup {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.da-service-popup:hover .da-service-title { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.da-service-title {
  display: block;
  min-height: 2.9em;
  margin-bottom: .65rem;
  color: var(--heading);
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}
.da-service-popup .tagline {
  display: block;
  margin: 0 0 .75rem;
}
.da-popup-hint {
  display: block;
  margin-top: auto;
  color: var(--link);
  font-size: .95rem;
  font-weight: 700;
}
.da-service-dialog .tagline { color: var(--muted); font-size: 1.12rem; font-weight: 700; }
.da-service-dialog .btn { margin-top: .5rem; }
.da-pdf-card {
  border-top-color: var(--purple, #6b3fa0);
  box-shadow: 0 0 0 2px var(--purple, #6b3fa0), var(--shadow);
}
.da-pdf-card .eyebrow { color: var(--ink); }
.da-contact-card {
  max-width: 58rem;
  margin: 0;
}
.da-contact-card h2 { margin-top: 0; }
.da-profile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.5rem;
  padding-left: 1.25rem;
}
.da-profile-list li { margin-bottom: 0; }
.da-research-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  max-width: 58rem;
}
.da-three-step-process {
  counter-reset: da-step;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.da-three-step-process li {
  counter-increment: da-step;
  padding: 1.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.da-three-step-process li::before {
  content: counter(da-step);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--button-text, #fff);
  font-weight: 800;
}
.da-three-step-process h3 { margin-top: 0; }
.da-definition-resources {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.da-definition-resources h3 { margin: 0 0 .65rem; }
.da-definition-resources ul { margin-bottom: 0; }
@media (max-width: 980px) {
  .da-service-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .da-three-step-process { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .da-service-card-grid { grid-template-columns: 1fr; }
  .da-service-title { min-height: 0; }
}

/* ---- Accessibility audit page ---- */
.audit-section-intro { max-width: 52rem; margin-bottom: 1.5rem; }
.audit-card-grid { margin-top: 1.5rem; }
.audit-method-grid { margin-top: 1.5rem; }
.audit-framework { margin-top: 1.5rem; font-size: 1.08rem; color: var(--heading); }
.audit-wide-prose { max-width: 52rem; }
.audit-process {
  counter-reset: audit-step;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.audit-process li {
  counter-increment: audit-step;
  position: relative;
  padding: 4.25rem 1.25rem 1.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.audit-process li::before {
  content: counter(audit-step);
  position: absolute;
  top: 1.15rem;
  left: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--purple);
  color: #fff;
  font-weight: 800;
}
.audit-process-popup {
  width: 100%;
  min-height: 7rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.audit-process-popup:hover .audit-step-title { color: var(--link); text-decoration: underline; }
.audit-process-popup:focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 5px; }
.audit-step-title {
  display: block;
  margin: 0 0 .45rem;
  color: var(--heading);
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}
.audit-process-popup > span:last-child { display: block; color: var(--muted); }
.audit-process-dialog #audit-process-dialog-desc li { margin-bottom: .65rem; }
.audit-scope-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.audit-scope-list li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .6rem .9rem;
  background: var(--bg);
  font-weight: 700;
  color: var(--heading);
}
.audit-related { margin-top: 3rem; }
@media (max-width: 900px) { .audit-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .audit-process { grid-template-columns: 1fr; } }

/* Digital accessibility monitoring */
.process-grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.grid-4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.related-services { margin-top: 3rem; }
@media (max-width: 900px) { .process-grid, .grid-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .process-grid, .grid-4col { grid-template-columns: 1fr; } }

/* Accessibility Partnerships page */
.partnership-services,
.partnership-models,
.partnership-related { margin-top: 1.5rem; }

/* Usability testing page */
.usability-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
  gap: 2.25rem;
  align-items: center;
}
.usability-photo {
  margin: 0;
}
.usability-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg, 1rem);
}
.usability-photo figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .9rem;
}
.usability-questions {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.2rem;
}
.usability-questions li {
  break-inside: avoid;
  margin-bottom: .65rem;
}
.method-triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.method-triad > div {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, .75rem);
  background: var(--surface, #fff);
}
.method-triad h3 { margin-top: 0; }
@media (max-width: 800px) {
  .usability-intro { grid-template-columns: 1fr; }
  .method-triad { grid-template-columns: 1fr; }
  .usability-questions { columns: 1; }
}

/* Document Accessibility page */
.section-intro { margin-top: 1.5rem; margin-bottom: 2rem; }
.section-followup { margin-top: 1.5rem; }
.document-process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .document-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .document-process { grid-template-columns: 1fr; } }


/* AI & Digital Accessibility page */
.ai-simple-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}
.ai-simple-grid .card { border-top: 4px solid var(--accent); }
@media (max-width: 760px) {
  .ai-simple-grid { grid-template-columns: 1fr; }
}


/* Accessibility Training page */
.training-workshop { align-items: start; }
.training-feature-card { border-top: 4px solid var(--accent); }
.training-feature-card ul { margin-bottom: 0; padding-left: 1.2rem; }
.training-feature-card li { margin-bottom: .5rem; }
.training-audiences .card { border-top: 4px solid var(--purple); }


/* Final site-wide polish */
.external-icon {
  display: inline-block;
  margin-inline-start: .25em;
  font-size: .9em;
  line-height: 1;
}
.card-team .card-body { display: flex; flex-direction: column; height: 100%; }
.card-team .card-body > p:last-of-type { margin-bottom: 1rem; }
.card-team a.more { margin-top: auto; }
.hero-img { object-position: center center; }
@media (forced-colors: active) {
  .external-icon { forced-color-adjust: auto; }
}

/* Alias used for concise screen-reader-only annotations such as external-link 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;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Homepage legacy band ---- */
.legacy-band {
  background: var(--cream);
  border-block: 1px solid var(--border);
}
.legacy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(22rem, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.legacy-marker {
  min-height: 15rem;
  border-radius: var(--radius);
  padding: 2rem;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.32) 0 2.8rem, transparent 2.9rem),
    linear-gradient(145deg, var(--purple), var(--link));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}
.legacy-place, .legacy-time {
  font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-weight: 600;
}
.legacy-place { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.legacy-time { font-size: 1.1rem; }
.legacy-line {
  display: block;
  width: 100%;
  height: .2rem;
  margin: 1.15rem 0;
  background: currentColor;
  position: relative;
}
.legacy-line::before, .legacy-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: .8rem;
  height: .8rem;
  border: .18rem solid currentColor;
  border-radius: 50%;
  background: var(--purple);
  transform: translateY(-50%);
}
.legacy-line::before { left: 0; }
.legacy-line::after { right: 0; }
@media (max-width: 760px) {
  .legacy-layout { grid-template-columns: 1fr; }
  .legacy-marker { min-height: 10rem; }
}


/* Accessibility resource library and ERC partner directory */
.resource-grid .card, .partner-grid .card { align-items: stretch; }
.resource-card { border-top: 4px solid var(--accent); }
.resource-card h3, .partner-grid h3 { margin-bottom: .6rem; }
.resource-card p:last-child, .partner-grid p:last-child { margin-bottom: 0; }
.resource-meta { font-size: .95em; }
.resource-note { margin-top: 1.5rem; color: var(--muted); }
.partner-grid { margin-top: 1.5rem; }
.partner-grid .card { border-top: 4px solid var(--purple); }

/* Homepage hero portrait: preserve the full subject instead of cropping her head or wheelchair. */
.hero-img {
  height: 100%;
  max-height: 31rem;
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 820px) {
  .hero-img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
}

/* Homepage hero line composition. Spans provide intentional visual line breaks without <br>. */
.hero-copy .hero-line {
  display: block;
}

/* Digital Accessibility landing page: user testing is foundational, not an add-on. */
.da-people-process {
  background: var(--cream);
}
.da-user-testing-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(15rem, .75fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 2px solid var(--purple);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.da-user-testing-action {
  padding: 1.5rem;
  border-inline-start: 4px solid var(--accent);
}
.da-user-testing-action .eyebrow {
  margin-bottom: .5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .9rem;
}
.da-user-testing-action .tagline { margin-bottom: 1.25rem; }
.da-supporting-expertise .card { border-top: 4px solid var(--accent); }
@media (max-width: 760px) {
  .da-user-testing-feature { grid-template-columns: 1fr; }
  .da-user-testing-action {
    border-inline-start: 0;
    border-top: 4px solid var(--accent);
    padding-inline: 0;
    padding-bottom: 0;
  }
}


/* Digital Accessibility service navigation: deliberate two-row desktop layout. */
.da-service-pills,
.at-service-pills {
  display: grid;
  gap: .75rem;
  max-width: 64rem;
  margin-top: 1.75rem;
}
.da-service-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.at-service-pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.da-service-pills li,
.at-service-pills li { display: flex; min-width: 0; }
.da-service-pills a.pill,
.at-service-pills a.pill {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  min-height: 3.4rem;
  padding: .7rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--bg);
  color: var(--heading);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}
.da-service-pills a.pill::after,
.at-service-pills a.pill::after { color: var(--link); }
.da-service-pills a.pill:hover,
.at-service-pills a.pill:hover {
  background: var(--accent-soft);
  border-color: var(--accent-dark);
  color: var(--heading);
  transform: translateY(-1px);
}
.da-service-pills a.da-user-testing-pill {
  border-color: var(--accent);
  font-weight: 700;
}
@media (max-width: 820px) {
  .da-service-pills,
  .at-service-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .da-service-pills,
  .at-service-pills { grid-template-columns: 1fr; }
  .da-profile-list,
  .da-research-links { grid-template-columns: 1fr; }
}

/* Digital Accessibility definition: a clear explanatory bridge between the page intro and service navigation. */
.da-definition {
  max-width: 58rem;
  margin: 2rem 0 1.75rem;
  padding: 1.5rem 1.75rem;
  border-left: 0.3rem solid var(--accent, currentColor);
  background: var(--surface-soft, rgba(255,255,255,.08));
}
.da-definition h2 {
  margin-top: 0;
}
.da-definition p:last-child {
  margin-bottom: 0;
}

.da-research-glance {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.da-research-glance-intro { max-width: 48rem; }
.da-research-glance .eyebrow {
  margin-bottom: .45rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.da-research-glance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.da-research-resource {
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-soft);
}
.da-research-resource h3 { margin-top: .75rem; }
.da-research-resource-topline { display: flex; align-items: center; gap: .65rem; }
.da-research-number { font-weight: 800; color: var(--accent-dark); }
.da-research-source { font-weight: 700; color: var(--ink); }
.da-research-note { margin: 1.5rem 0 0; }
@media (max-width: 760px) {
  .da-research-glance-grid { grid-template-columns: 1fr; }
}

.at-services-heading {
  max-width: 58rem;
  margin: 2rem 0 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}
.at-people-layout { align-items: center; }
.at-people-layout img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.at-help-list li,
#free-consultation { scroll-margin-top: 10rem; }
.at-consultation-layout { align-items: start; }
.at-consultation-layout .info-box { position: sticky; top: 2rem; }
@media (max-width: 760px) {
  .at-consultation-layout .info-box { position: static; }
}

/* Settings must remain fully reachable when text is enlarged or spacing is increased. */
.display-settings-panel {
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 820px) {
  .display-settings-panel {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
  }
}

/* Settings dialog: keep every preference reachable at enlarged text sizes.
   Fixed viewport positioning avoids clipping when the sticky navigation grows. */
.display-settings-panel {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  width: min(22rem, calc(100vw - 2rem));
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  z-index: 100;
}
.menu-bar.nav-collapsed .display-settings-panel {
  left: auto;
  right: 1rem;
}
.display-settings-panel .segmented {
  flex-wrap: wrap;
}
.display-settings-panel .seg-btn {
  flex: 1 1 6.5rem;
}
@media (max-width: 520px) {
  .display-settings-panel {
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
    width: calc(100vw - 1rem);
  }
}

/* Homepage Access at every level cards: keep all three service links on one
   shared baseline. Shorter copy intentionally leaves blank space above its link. */
.grid > .card-team {
  height: 100%;
}
.card-team .card-body {
  flex: 1 1 auto;
}
.card-team a.more {
  margin-top: auto;
}

/* Homepage lead text: keep introductory lead paragraphs at the same larger size. */
.home-section-lead { font-size: 1.25rem; }
.access-level-section .home-section-lead { max-width: none; }

/* Keep the three text-size choices together as one deliberate control row.
   The general settings controls may wrap, but Default / Large / Larger should not split 2 + 1. */
.display-settings-panel .segmented-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
}
.display-settings-panel .segmented-three .seg-btn {
  min-width: 0;
  padding-inline: .4rem;
  white-space: nowrap;
}

/* Keep the Settings interface stable when an alternate reading font is selected.
   The reading-font preference applies to page content, while controls remain in
   Atkinson Hyperlegible so labels do not overflow their buttons. */
:root[data-readingfont="opendyslexic"] .display-settings-panel {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.display-settings-panel .seg-btn {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* Homepage Access at every level refinements. */
.grid > .card-team .card-img {
  width: min(172px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}
.grid > .card-team h3 {
  min-height: 0;
  margin-bottom: .3rem;
}
.grid > .card-team .card-audience {
  margin-top: 0;
  margin-bottom: .45rem;
}
.grid > .card-team .card-audience + p {
  margin-top: 0;
}
.grid > .card-team .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grid > .card-team a.more {
  margin-top: auto;
}

/* Homepage service-card rhythm: each content band begins on the same visual line
   across the three Access at every level cards. */
@media (min-width: 821px) {
  .grid > .card-team h3 {
    min-height: 2.7em;
    display: flex;
    align-items: flex-start;
  }
  .grid > .card-team .card-audience {
    min-height: 3.25em;
  }
  .grid > .card-team .card-audience + p {
    min-height: 3.4em;
    margin-bottom: .8rem;
  }
  .grid > .card-team a.more {
    margin-top: auto;
  }
}

/* Header decoration: use only a quiet partial arc on the right rather than a
   complete circle competing with the C4AT name. */
.site-header::after {
  background:
    radial-gradient(circle at 108% 48%, transparent 0 8.6rem, rgba(255, 255, 255, .12) 8.7rem 8.82rem, transparent 8.92rem),
    radial-gradient(60% 120% at 96% 18%, rgba(255, 255, 255, .055), transparent 62%),
    radial-gradient(rgba(255, 255, 255, .045) 1.2px, transparent 1.3px);
  background-size: auto, auto, 28px 28px;
}


/* Homepage Access at every level: give the three cards a little more horizontal
   room so longer service links, especially Assistive Technology, can remain
   visually intact without forcing the arrow onto its own line. */
@media (min-width: 901px) {
  .access-level-section > .container {
    max-width: 74rem;
  }
  .access-level-section .grid {
    gap: 1rem;
  }
  .access-level-section .card {
    padding-inline: 1.35rem;
  }
}

/* Homepage hero alignment: match the left edge of "Making access work" to
   the widened "Access at every level" section below. The photo expands
   slightly toward the left so the composition stays balanced. */
@media (min-width: 901px) {
  .hero > .container {
    max-width: 74rem;
  }
  .hero-media {
    width: 41%;
  }
}

/* Homepage legacy image replaces the decorative Berkeley / 40+ years marker. */
.legacy-photo {
  min-width: 0;
}
.legacy-visual {
  min-width: 0;
}
.legacy-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.legacy-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}
.legacy-facts .fact {
  padding: 1rem;
}
.legacy-facts .num {
  font-size: 1.55rem;
}
.legacy-facts .num.sm {
  font-size: 1.15rem;
}
@media (max-width: 760px) {
  .legacy-layout {
    grid-template-columns: 1fr;
  }
  .legacy-photo img {
    aspect-ratio: 16 / 9;
  }
}