/* Updated styles.css — all colors moved to --root variables so non-hardcoded colors are computed.
   Source reference: original styles.css
*/

/* ---------------------------
     Design tokens / base
     --------------------------- */
:root{
  /* Primary colors (hex + RGB for rgba() usage) */
  --bg: #ffffff;
  --bg-rgb: 255,255,255;

  --fg: #0b1220;
  --fg-rgb: 11,18,32;

  --muted: #475569;
  --muted-rgb: 71,85,105;

  --accent: #ff7d13;
  --accent-rgb: 255,125,19;

  --accent-2: #ffe6aa;
  --accent-2-rgb: 255,230,170;

  --surface: #f7f9fb;
  --surface-rgb: 247,249,251;

  --card: #ffffff;
  --card-rgb: 255,255,255;

  /* Secondary brand / UI blues and darks used across the stylesheet */
  --brand-blue: #0b5fff;         /* used for applied checks / pills */
  --brand-blue-rgb: 11,95,255;

  --teal: #0b6fb5; /* rgba(11,111,181,...) in original */
  --teal-rgb: 11,111,181;

  --deep-dark: #020b11; /* small deep tone used in overlays/shadows */
  --deep-dark-rgb: 2,11,17;

  --dark-muted: #0b1f35; /* used in some near-black rgba instances */
  --dark-muted-rgb: 11,31,53;

  /* subtle borders */
  --border-100: #eef3f7;
  --border-100-rgb: 238,243,247;

  --border-200: #e6eef6;
  --border-200-rgb: 230,238,246;

  /* pure black/white */
  --white: #ffffff;
  --white-rgb: 255,255,255;
  --black: #000000;
  --black-rgb: 0,0,0;

  /* tokens */
  --max-width:1200px;
  --radius:12px;
  --gap:1rem;
  --focus: 3px solid var(--accent);
  --nav-height:72px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --touch-size:48px;
  --gutter:16px; /* left/right page padding/gutter for mobile */
}

/* ---------------------------
   Stylesheet body and utilities
   --------------------------- */
html { box-sizing:border-box; font-family:var(--font-sans); color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
*,*::before,*::after{ box-sizing:inherit; }
body { margin:0; line-height:1.4; -webkit-tap-highlight-color: transparent; }

/* Visible focus for keyboard users (WCAG) */
:focus { outline:var(--focus); outline-offset:3px; }

/* Skip link */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:var(--gutter); top:var(--gutter); width:auto; height:auto; padding:.5rem .75rem; background:var(--black); color:var(--white); z-index:9999; border-radius:6px; }

/* ---------------------------
     Topbar (fixed)
     --------------------------- */
header.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-height); display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(var(--white-rgb),0.95), rgba(var(--surface-rgb),0.95));
  box-shadow:0 6px 18px rgba(var(--deep-dark-rgb),0.08);
  z-index:160; padding:0 var(--gutter);
}
.topbar-inner { max-width:var(--max-width); margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; gap:.75rem; align-items:center; min-width:0; flex-shrink:1; }
.brand img { width:44px; height:44px; border-radius:8px; object-fit:cover; flex:0 0 44px; }
/* prevent overflow on small screens */
.brand .title { font-weight:700; font-size:1rem; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.brand .tag { font-size:.825rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

nav.primary { display:flex; gap:.25rem; align-items:center; justify-content:center; height:100%; }
nav.primary a, nav.primary button {
  background: transparent;
  border: none;
  color: var(--fg);
  padding: .55rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  box-sizing: border-box;
}
nav.primary a:not(.btn) {
  color: var(--fg) !important;
}
nav.primary a:hover, nav.primary button:hover, nav.primary a:focus, nav.primary button:focus {
  background: rgba(var(--teal-rgb),0.08);
  outline: none;
}

.top-actions { display:flex; gap:.5rem; align-items:center; }

/* Make room for fixed header */
.page-offset { height:var(--nav-height); }
body.large-text .page-offset { height: 120px !important; }
body.screen-reader-mode .page-offset { height: 120px !important; }

/* ---------------------------
     Hero: Parallax effect
     --------------------------- */
.hero {
  position:relative; min-height:60vh; display:flex; align-items:center; color:var(--white); overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),1), rgba(36,14,60,1));
}
.hero .bg {
  position:absolute; inset:0; background-position:center center; background-size:cover;
  transform: translateZ(0);
  will-change: transform;
}
.hero .overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--deep-dark-rgb),0.25), rgba(var(--deep-dark-rgb),0.45)); }
.hero .hero-inner { position:relative; z-index:2; max-width:var(--max-width); margin:0 auto; padding:3rem 1rem; display:flex; gap:2rem; align-items:center; justify-content:space-between; }
.hero-text { max-width:720px; }
.hero .eyebrow { text-transform:uppercase; color:var(--accent-2); font-weight:800; letter-spacing:.12em; font-size:.775rem; }
.hero h1 { margin:.25rem 0 .5rem 0; font-size:2.2rem; line-height:1.02; }
.hero p.lead { margin:0; color:rgba(var(--white-rgb),0.92); font-size:1.05rem; }

.hero-cta { margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.hero .side-card { width:320px; background:rgba(var(--white-rgb),0.06); padding:1rem; border-radius:12px; backdrop-filter: blur(4px); border:1px solid rgba(var(--white-rgb),0.06); }

/* ---------------------------
     Content sections modern layout
     --------------------------- */
.container { max-width:var(--max-width); margin:0 auto; padding:2rem var(--gutter); margin-top:calc(var(--nav-height) + 0.5rem); }

.two-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; align-items:center; }
@media(min-width:880px) { .two-grid { grid-template-columns:1fr 420px; } }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }

.card { background:var(--card); border-radius:12px; padding:1rem; box-shadow: 0 6px 18px rgba(var(--dark-muted-rgb),0.06); border:1px solid var(--border-100); }

/* subtle motion for section reveals (turn off with .reduced-motion) */
.reveal { transform: translateY(18px); opacity:0; transition: transform .65s cubic-bezier(.2,.9,.3,1), opacity .65s ease; will-change:transform,opacity; }
.reveal.in { transform:none; opacity:1; }

body.reduced-motion .reveal { transition:none !important; transform:none !important; opacity:1 !important; }

/* team grid */
.team-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-top:1rem; }
body.color-blind .team-grid { background: var(--white) !important; }
body.color-blind .team-grid .card { background: var(--white) !important; color: var(--black) !important; border: 2px solid var(--black) !important; box-shadow: none !important; }
body.color-blind .team-grid .card * { color: var(--black) !important; }
body.color-blind .team-grid .card .btn,
body.color-blind .team-grid .card button,
body.color-blind .team-grid .card a.btn {
  color: var(--black) !important;
}
body.screen-reader-mode .team-grid { display: grid !important; }

/* bottom accessible bar */
/* Fix Contact Us section and footer contact boxes for color-blind mode */
body.color-blind .bottombar [style*="background:var(--surface)"] {
  background: var(--white) !important;
  color: var(--black) !important;
  border: 2px solid var(--black) !important;
}
body.color-blind .bottombar [style*="color:var(--accent)"] {
  color: var(--black) !important;
}
body.color-blind .bottombar .muted,
body.color-blind .bottombar a,
body.color-blind .bottombar span {
  color: var(--black) !important;
}
footer.bottombar { background:var(--white); padding:1rem 0; border-top:2px solid var(--black); position:relative; }
body.color-blind footer.bottombar { background:var(--white) !important; border-top:2px solid var(--black) !important; }
.bottom-inner { max-width:var(--max-width); margin:0 auto; display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:0 var(--gutter); flex-wrap:wrap; }
body.color-blind .bottom-inner { background:var(--white) !important; color:var(--black) !important; border:none !important; }

/* Accessibility classes applied by JS */
/* ===========================
   Color-blind: fix for "muted" and stray grays
   Paste at end of your stylesheet
   =========================== */

/* Define B/W variables for color-blind mode */
body.color-blind {
  --cb-bg: var(--black) !important;       /* page background: pure black */
  --cb-fg: var(--white) !important;       /* primary text: pure white */
  --cb-card-bg: var(--white) !important;  /* surfaces/cards: pure white */
  --cb-card-fg: var(--black) !important;  /* text on surfaces: pure black */
  --cb-muted-on-page: var(--white) !important;  /* muted text: pure white */
  --cb-muted-on-card: var(--black) !important;  /* muted text: pure black */
  --cb-border: var(--black) !important;
}

/* Page-level background/text */
body.color-blind { background: var(--cb-bg) !important; color: var(--cb-fg) !important; }

/* Surfaces/cards/dialogs become white with black copy */
body.color-blind .card,
body.color-blind .pref-dialog {
  background: var(--cb-card-bg) !important;
  color: var(--cb-card-fg) !important;
  border: 2px solid var(--cb-border) !important;
}
body.color-blind .side-card,
body.color-blind footer.bottombar,
body.color-blind header.topbar,
body.color-blind .mobile-nav,
body.color-blind .bottom-inner,
body.color-blind .topbar-inner {
  background: var(--cb-card-bg) !important;
  color: var(--cb-card-fg) !important;
  border-color: var(--cb-border) !important;
}

/* Muted text: on page use lighter; inside cards use darker muted */
body.color-blind .muted { color: var(--cb-muted-on-page) !important; }
body.color-blind .card .muted,
body.color-blind .pref-dialog .muted,
body.color-blind .card p,
body.color-blind .card small,
body.color-blind .pref-label .muted {
  color: var(--cb-muted-on-card) !important;
}
body.color-blind .pref-label .muted {
  color: var(--cb-muted-on-card) !important;
}

/* Tag/eyebrow etc. */
body.color-blind .eyebrow {
  color: var(--cb-card-fg) !important;
}
body.color-blind .tag,
body.color-blind .pref-label .muted {
  color: var(--cb-card-fg) !important;
}

/* Buttons & links */
body.color-blind .btn {
  background: var(--cb-card-bg) !important;
  color: var(--cb-card-fg) !important;
  border: 2px solid var(--cb-border) !important;
}
body.color-blind .btn.ghost {
  background: transparent !important;
  color: var(--cb-card-fg) !important;
  text-decoration: underline !important;
  border-color: var(--cb-card-fg) !important;
}

/* Pref buttons queued/applied states (ensure high contrast) */
body.color-blind .pref-btn { color: var(--cb-fg) !important; border-color: rgba(var(--white-rgb),0.06) !important; }
body.color-blind .pref-btn {
  color: #111 !important;
  background: var(--white) !important;
  border: 2px solid #111 !important;
}
body.color-blind .pref-btn.queued { background: var(--cb-card-bg) !important; color: var(--cb-card-fg) !important; border-color: var(--cb-border) !important; }
body.color-blind .pref-btn.applied { background: var(--cb-bg) !important; color: var(--cb-fg) !important; border-color: var(--cb-fg) !important; }

/* Pills and small UI */
body.color-blind .pill { background: rgba(var(--black-rgb),0.06) !important; color: var(--cb-fg) !important; border-color: rgba(var(--white-rgb),0.06) !important; }
body.color-blind .pill .clear { color: var(--cb-muted-on-card) !important; }

/* images and backgrounds - keep in grayscale/high contrast */
body.color-blind img,
body.color-blind .hero .bg,
body.color-blind .team-grid img,
body.color-blind .side-card img {
  filter: grayscale(100%) contrast(110%) brightness(95%) !important;
  mix-blend-mode: normal !important;
}

/* svg/icon fixes */
body.color-blind svg { fill: currentColor !important; color: inherit !important; }

/* Ensure focus is visible */
body.color-blind :focus { outline: 3px solid var(--cb-fg) !important; outline-offset: 3px !important; }

/* Extremely defensive rules: override inline color styles on common text nodes */
body.color-blind [style*="color:"] { color: inherit !important; }

/* Keep layout gutter when toggling off/on to avoid left-stuck text */
body.color-blind .container,
body.color-blind .topbar-inner,
body.color-blind .mobile-nav { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; box-sizing: border-box !important; }

/* Small availability: ensure text contrast remains OK on very small screens */
@media (max-width:520px){
  body.color-blind .pref-dialog, body.color-blind .card { padding: .75rem !important; }
}

body.high-contrast a, body.high-contrast .btn { color: var(--black); background: var(--accent-2); }
body.large-text { font-size:2rem; }
body.large-text .pref-dialog, body.large-text .pref-dialog * {
  font-size: 1.25rem !important;
}
body.reduced-motion * { transition:none !important; animation:none !important; }
body.screen-reader-mode img[role="img"] { display:none; } /* example */

/* accessibility modal styles */
.overlay-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(var(--black-rgb),0.45); z-index:150; }
.overlay-modal[aria-hidden="false"] { display:flex; }
.pref-dialog { background:var(--card); border-radius:14px; padding:1.25rem; width:95%; max-width:640px; box-shadow:0 12px 40px rgba(var(--deep-dark-rgb),0.24); }
.prefs { display:flex; flex-direction:column; gap:.5rem; margin:.75rem 0; }
.pref-btn { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; border-radius:10px; border:1px solid var(--border-200); background:transparent; cursor:pointer; text-align:left; }
.pref-btn[aria-pressed="true"] { border-color:var(--accent); background:linear-gradient(90deg, rgba(var(--teal-rgb),0.06), rgba(var(--teal-rgb),0.03)); box-shadow:0 0 0 4px rgba(var(--teal-rgb),0.06); }

/* utilities */
.muted { color:var(--muted); }
.sr-only { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ==============
   MOBILE / TOUCH improvements + animated nav
   ============== */

/* Hamburger: hidden on desktop, visible on small screens */
.hamburger {
  display:none;
  border: none;
  background: transparent;
  padding: .5rem;
  border-radius:8px;
  cursor: pointer;
}
.hamburger:focus { box-shadow: 0 0 0 4px rgba(var(--teal-rgb),0.08); outline: none; }

/* mobile menu — animated slide down */
.mobile-nav {
  display:block;
  position: absolute;
  top: calc(var(--nav-height) * -1); /* hidden above viewport initially */
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid rgba(var(--black-rgb),0.04);
  z-index:70;
  padding: .75rem var(--gutter);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .28s ease, top .28s ease;
  box-shadow: 0 14px 40px rgba(var(--deep-dark-rgb),0.08);
}
/* visible state */
body.nav-open .mobile-nav {
  top: calc(var(--nav-height));
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav a, .mobile-nav button { display:block; width:100%; text-align:left; padding:.85rem 1rem; border-radius:8px; margin:0.25rem 0; font-size:1.05rem; background:transparent; border:none; }
.mobile-nav a:focus, .mobile-nav button:focus { outline:none; box-shadow: 0 0 0 4px rgba(var(--teal-rgb),0.08); border-radius:8px; }

/* increased touch targets for interactive elements */
a, button, .btn { min-height: var(--touch-size); padding: .6rem .9rem; }

/* responsive adjustments */
@media (max-width: 880px) {
  .hero { min-height:44vh; }
  .hero .hero-inner { padding:2rem 1rem; flex-direction: column; align-items: flex-start; gap:1rem; }
  .brand .title { font-size: .95rem; }
  nav.primary { display:none; } /* hide desktop nav */
  .hamburger { display:inline-flex; align-items:center; gap:.5rem; background:transparent; }
  /* ensure mobile nav initial hidden state is not visible */
  .mobile-nav { top: calc(var(--nav-height) * -1); }
}

@media (max-width:520px) {
  .hero h1 { font-size:1.4rem; }
  .brand img { width:40px; height:40px; }
  .brand .title { font-size:.95rem; }
  .btn { font-size:1rem; padding:.7rem 1rem; }
  .container { padding:1rem var(--gutter); }
}

/* focus look on touch devices */
@media (hover: none) {
  a:focus, button:focus { outline: none; box-shadow: 0 0 0 4px rgba(var(--teal-rgb),0.08); border-radius:8px; }
}

/* === Mobile cap for large-text + screen-reader gutter fixes === */
@media (max-width:520px) {
  body.large-text {
    /* cap the large-text increase on mobile so content remains scrollable */
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
  }

  /* Make hero headline readable but not huge on small screens when large-text active */
  body.large-text .hero h1 {
    font-size: 1.25rem !important;
  }

  body.screen-reader-mode {
    /* screen-reader mode should not squish content to the absolute left */
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    box-sizing: border-box;
  }

  /* ensure container always keeps gutter even in screen-reader mode */
  body.screen-reader-mode .container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* ensure mobile nav and topbar respect the gutter */
  body.screen-reader-mode .topbar-inner,
  body.screen-reader-mode .mobile-nav {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  /* ensure mobile nav and topbar respect the gutter */
}

/* small extra: ensure the hero side-card won't push content off-screen */
@media (max-width:880px) {
  body.large-text .side-card,
  body.screen-reader-mode .side-card {
    width: 100% !important;
    box-sizing: border-box;
  }
}

body.large-text .hero-inner,
body.screen-reader-mode .hero-inner {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  padding: 2rem 1rem !important;
}
body.large-text .hero .side-card,
body.screen-reader-mode .hero .side-card { width:100% !important; }
body.large-text .two-grid,
body.screen-reader-mode .two-grid { grid-template-columns: 1fr !important; }
body.large-text .cards,
body.screen-reader-mode .cards { grid-template-columns: 1fr !important; gap: 1rem !important; }
body.large-text .team-grid,
body.screen-reader-mode .team-grid { grid-template-columns: 1fr !important; }
body.large-text .hero h1,
body.screen-reader-mode .hero h1 { font-size: 1.6rem !important; line-height: 1.2 !important; }
body.large-text main .container > section,
body.screen-reader-mode main .container > section { margin-top: 1.75rem !important; padding-bottom: 0.6rem; }
body.large-text .card,
body.screen-reader-mode .card,
body.large-text .side-card,
body.screen-reader-mode .side-card { width:100% !important; margin: 0.5rem 0 !important; }
body.large-text nav.primary,
body.screen-reader-mode nav.primary { flex-wrap: wrap; }
body.large-text { line-height:1.6; }
body.screen-reader-mode { line-height:1.6; }

/* Modal checkmark visuals preserved */
.pref-btn.queued { background: linear-gradient(90deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.04)); border-color: rgba(var(--accent-rgb),0.18); }
.pref-btn.applied { background: var(--accent); color: var(--black); border-color: rgba(var(--black-rgb),0.12); }
.pref-btn .check { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:6px; opacity:0; transform: translateX(6px) scale(.92); transition: opacity .16s ease, transform .16s ease, background .12s ease, color .12s ease; }
.pref-btn.queued .check, .pref-btn.applied .check { opacity:1; transform: translateX(0) scale(1); }
.pref-btn.queued .check { background: var(--accent); color: var(--white); }
.pref-btn.applied .check { background: var(--black); color: var(--white); }

/* keep :focus visible for keyboard users */
.pref-btn:focus {
  outline: var(--focus);
  outline-offset: 3px;
}

/* applied pills: show simple pill (no remove "x") */
#appliedPills {
  display:flex;
  gap:.4rem;
  align-items:center;
  flex-wrap:wrap;
  min-height:1.4rem;
}
.pill {
  font-size:0.85rem;
  padding:0.2rem .5rem;
  border-radius:999px;
  background: rgba(var(--brand-blue-rgb),0.08);
  color: var(--brand-blue);
  border:1px solid rgba(var(--brand-blue-rgb),0.12);
}

/* Ensure color-blind / other modes still override as before.
   Keep your existing body.color-blind rules — they remain compatible. */

/* Reduce visual "x" behavior: we removed clear buttons in JS, but keep defensive styling */
.pill .clear { display:none; }

/* Make .nav-link look like the anchors in the primary nav */
nav.primary .nav-link {
  background: transparent;
  border: none;
  padding: .45rem .65rem;
  font-weight: 600;
  font-size: .95rem;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  display:inline-flex;
  align-items:center;
}
nav.primary .nav-link:hover,
nav.primary .nav-link:focus { background: rgba(var(--teal-rgb),0.08); outline: none; }

body.color-blind .pref-dialog .pref-label .muted {
  color: var(--white) !important;
}

/* Defensive: always apply gutter to main containers only when screen-reader mode is active */
body.screen-reader-mode > .container,
body.screen-reader-mode > .pref-dialog,
body.screen-reader-mode > .overlay-modal,
body.screen-reader-mode > .topbar-inner,
body.screen-reader-mode > .bottom-inner,
body.screen-reader-mode > footer.bottombar {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box !important;
}

/* Card lift and smoother hover */
.team-grid .card {
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, border-color .12s ease;
  will-change: transform;
  overflow: visible; /* allow avatar shadow to show */
}
.team-grid .card:hover,
.team-grid .card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(var(--dark-muted-rgb),0.12);
  border-color: rgba(var(--dark-muted-rgb),0.08);
}

/* unify staff image / avatar look */
.team-grid .card img {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
}

/* smaller round avatar that overlaps hero photo (keeps your existing positioning) */
.team-grid .card .avatar {
  position:absolute;
  top:22px;
  left:22px;
  width:96px;
  height:96px;
  border-radius:50%;
  object-fit:cover;
  box-shadow: 0 6px 18px rgba(var(--deep-dark-rgb),0.12);
  border: 3px solid var(--white);
}

/* Name: prominent, accessible, clear contrast */
.team-grid .card .staff-name,
.team-grid .card .editable.staff-name {
  display:block;
  font-size:1.15rem;
  line-height:1.15;
  margin:0 0 .25rem 0;
  font-weight:700;
  color:var(--fg);
  letter-spacing: -0.01em;
}

/* Credentials / short meta: uppercase microcopy in muted tone */
.team-grid .card .staff-cred,
.team-grid .card .editable.staff-cred {
  display:block;
  margin:0 0 .375rem 0;
  color:var(--muted);
  font-weight:700;
  font-size:.825rem;
  text-transform:uppercase;
  letter-spacing:.09em;
}

/* Role / job title: larger than muted, slightly lighter */
.team-grid .card .staff-role,
.team-grid .card .editable.staff-role {
  display:block;
  margin:0 0 .5rem 0;
  color: rgba(var(--dark-muted-rgb),0.88);
  font-weight:600;
  font-size:.98rem;
}

/* Contact / dates / country: smaller + muted pill style if needed */
.team-grid .card .staff-contact,
.team-grid .card .editable.staff-contact {
  display:block;
  margin-top:.25rem;
  color:var(--muted);
  font-size:.90rem;
}

/* make emails clearer (and easier to click on mobile) */
.team-grid .card a.email {
  display:inline-block;
  margin-top:.25rem;
  color:var(--accent);
  text-decoration:underline;
  font-weight:600;
  word-break:break-all;
}

/* small decorative tag — e.g. Intern/Visiting label */
.team-grid .card .tag {
  display:inline-block;
  margin-top:.45rem;
  padding:.18rem .5rem;
  border-radius:999px;
  background: rgba(var(--brand-blue-rgb),0.08);
  color: var(--brand-blue);
  font-weight:700;
  font-size:.8rem;
  border:1px solid rgba(var(--brand-blue-rgb),0.09);
}

/* layout tweak so content doesn't sit flush to the image edge */
.team-grid .card > div:last-child {
  padding: 0.6rem 0 0 0;
}

/* Responsive: fewer columns on small screens */
@media (max-width:980px) {
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width:560px) {
  .team-grid { grid-template-columns: 1fr !important; }
  .team-grid .card { min-height: auto; }
  .team-grid .card .avatar { width:84px; height:84px; top:16px; left:16px; }
  .team-grid .card img { height:220px; border-radius:12px; }
}

/* ----- Buttons ----- */

/* Restore accent style for .btn */
.btn {
  background: var(--accent) !important;
  color: var(--white) !important;
  padding: .5rem .9rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  min-height: var(--touch-size);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.08);
  transition: background .18s, box-shadow .18s;
}
/* UPDATED: use accent-2 on hover/focus */
.btn:hover, .btn:focus {
  background: var(--accent-2) !important;
  /* use accent-2-rgb for shadow to keep consistent derived shading */
  box-shadow: 0 4px 16px rgba(var(--accent-2-rgb),0.16);
}
.btn.ghost {
  background: transparent !important;
  color: var(--fg) !important;
  border: 1px solid var(--border-200);
}

/* ---------------------------
   Accessibility modal: queued vs applied visuals + right-side check
   --------------------------- */

/* keep .prefs layout as-is (you're already doing that) */

/* push check to far right and animate in/out */
.pref-btn {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .8rem;
  border-radius:10px;
  border:1px solid var(--border-200);
  background:transparent;
  cursor:pointer;
  text-align:left;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

/* force the label group to stay left and the check to the right */
.pref-btn .pref-label { flex: 1 1 auto; min-width:0; }

/* check element: hidden by default, slides in when queued/applied */
/* Fix: Prevent header overlap in large-text mode */
body.large-text .hero {
  margin-top: calc(var(--nav-height) + 2rem) !important;
}
body.screen-reader-mode .hero {
  margin-top: calc(var(--nav-height) + 2rem) !important;
}
.pref-btn .check {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:6px;
  margin-left:12px;      /* space from label */
  opacity:0;
  transform: translateX(6px) scale(.92);
  transition: opacity .16s ease, transform .16s ease, background .12s ease, color .12s ease;
  visibility:hidden;
}

/* Queued (clicked, not applied) — accent highlight, faint check */
.pref-btn.queued {
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0.10), rgba(var(--accent-rgb),0.04));
  border-color: rgba(var(--accent-rgb),0.18);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.06);
}
.pref-btn.queued .check {
  visibility:visible;
  opacity:0.45;
  transform: translateX(0) scale(1);
  background: var(--accent);
  color: var(--white);
}

/* Applied: stronger visual + solid check (on right side) */
.pref-btn.applied {
  background: linear-gradient(180deg, rgba(var(--surface-rgb),0.95), rgba(var(--bg-rgb),0.98));
  border-color: rgba(var(--dark-muted-rgb),0.08);
  font-weight:600;
}
.pref-btn.applied .check {
  visibility:visible;
  opacity:1;
  transform: translateX(0) scale(1);
  background: var(--brand-blue); /* applied check background */
  color: var(--white);
}

/* keep :focus visible for keyboard users */
.pref-btn:focus {
  outline: var(--focus);
  outline-offset: 3px;
}

/* applied pills: show simple pill (no remove "x") */
#appliedPills {
  display:flex;
  gap:.4rem;
  align-items:center;
  flex-wrap:wrap;
  min-height:1.4rem;
}

/* Defensive: ensure hero eyebrow and other tag colors come from tokens */
.hero .eyebrow { color: var(--accent-2); }

/* End of stylesheet */