/* Houston Deaf Network, round four revisions.
   Montserrat display + Inter body, node network + aurora hero, unified full-width sections.
   Theme: 3-state manual toggle (auto/light/dark, persisted in localStorage),
   defaulting to auto which follows the visitor's OS preference. */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-soft: #f4f2ed;
  --ink: #191713;
  --body: #4a453c;
  --muted: #6f6959;
  --hairline: #e7e2d8;
  --accent: #0e7d5f;
  --accent-deep: #0a5f49;
  --accent-ink: #ffffff;
  --warm: #9a6106;
  --header-bg: rgba(251, 250, 248, 0.92);
  --shadow: 0 1px 2px rgba(25, 23, 19, 0.05), 0 8px 24px rgba(25, 23, 19, 0.07);
  --shadow-lift: 0 2px 4px rgba(25, 23, 19, 0.06), 0 14px 34px rgba(25, 23, 19, 0.12);
  --maxw: 1120px;
  --radius: 16px;
  --radius-lg: 20px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --node-stroke: #0e7d5f;
  --aurora-green: rgba(14, 125, 95, 0.16);
  --aurora-amber: rgba(154, 97, 6, 0.10);
  --aurora-teal: rgba(47, 212, 159, 0.10);
}

/* Explicit dark choice, or dark OS with no explicit light choice. */
:root[data-theme="dark"] {
  --bg: #0d0e10;
  --surface: #15171b;
  --surface-soft: #1b1e23;
  --ink: #f5f2ea;
  --body: #c8c3b6;
  --muted: #98917f;
  --hairline: #272a31;
  --accent: #2fd49f;
  --accent-deep: #8deccb;
  --accent-ink: #06281c;
  --warm: #f2b73c;
  --header-bg: rgba(13, 14, 16, 0.9);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
  --node-stroke: #2fd49f;
  --aurora-green: rgba(47, 212, 159, 0.22);
  --aurora-amber: rgba(242, 183, 60, 0.13);
  --aurora-teal: rgba(47, 212, 159, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e10;
    --surface: #15171b;
    --surface-soft: #1b1e23;
    --ink: #f5f2ea;
    --body: #c8c3b6;
    --muted: #98917f;
    --hairline: #272a31;
    --accent: #2fd49f;
    --accent-deep: #8deccb;
    --accent-ink: #06281c;
    --warm: #f2b73c;
    --header-bg: rgba(13, 14, 16, 0.9);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
    --node-stroke: #2fd49f;
  --aurora-green: rgba(47, 212, 159, 0.22);
  --aurora-amber: rgba(242, 183, 60, 0.13);
  --aurora-teal: rgba(47, 212, 159, 0.14);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora { animation: none !important; }
  .goal-card, .dir-card { transition: none !important; }
  .accordion-icon, .ai-bar, .theme-toggle, .goal-card-arrow,
  .filter-toggle, .card-link, .btn-primary, .job-chip { transition: none !important; }
}

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep anchored sections clear of the sticky header. */
html {
  scroll-padding-top: 5.5rem;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.logo { display: block; }
.logo-light { display: none; }

/* Logo swap follows the effective theme, manual choice included. */
:root[data-theme="dark"] .logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark { display: none; }
  :root:not([data-theme="light"]) .logo-light { display: block; }
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--hairline);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  transform: translateY(-2px);
}

.theme-toggle svg { display: none; }
.theme-toggle[data-state="auto"] .tt-auto { display: block; }
.theme-toggle[data-state="light"] .tt-sun { display: block; }
.theme-toggle[data-state="dark"] .tt-moon { display: block; }

.site-nav { display: flex; align-items: center; gap: 1.35rem; margin-left: auto; }

.site-nav a {
  color: var(--body);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
}

.site-nav a:hover { color: var(--accent-deep); }

.nav-cta {
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-weight: 600;
}

/* Higher specificity than .site-nav a so the green text wins. */
.site-nav a.nav-cta {
  color: var(--accent-deep);
}

.nav-cta:hover { border-color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  width: 44px;
  height: 44px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 1.5rem 4.5rem;
}

/* Hero scene: aurora glow behind a network of connected nodes,
   the community-connects motif. Aurora stays barely-there so the
   headline keeps full contrast; the network is the star. */
.hero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 0%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 96%);
}

.aurora {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 18% 28%, var(--aurora-green), transparent 58%),
    radial-gradient(circle at 82% 18%, var(--aurora-amber), transparent 52%),
    radial-gradient(circle at 62% 92%, var(--aurora-teal), transparent 60%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  from { transform: translateX(-28px) scale(1); }
  to { transform: translateX(28px) scale(1.08); }
}

.node-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--node-stroke);
  opacity: 0.42;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.kicker {
  color: var(--warm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}

.lede {
  max-width: 620px;
  margin: 0 auto 2.6rem;
  font-size: 1.14rem;
  color: var(--body);
}

/* ---------- goal cards (hero) ---------- */
.goal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: left;
}

.goal-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.6rem 1.6rem;
  text-decoration: none;
  color: var(--body);
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.goal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.goal-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.goal-card:hover::before { opacity: 1; }

.goal-card-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--warm);
}

.goal-card-title {
  display: block;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
  margin: 0.55rem 0 0.45rem;
}

.goal-card-text { font-size: 0.96rem; color: var(--muted); }

.goal-card-arrow {
  position: absolute;
  right: 1.4rem;
  bottom: 1.3rem;
  width: 24px;
  height: 24px;
  color: var(--accent-deep);
  transition: transform 0.25s ease;
}

.goal-card:hover .goal-card-arrow { transform: translateY(5px); }

.goal-card-arrow svg { width: 100%; height: 100%; }

/* ---------- sections ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4.5rem 1.5rem;
  border-top: 1px solid var(--hairline);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 0.7rem;
}

/* Amber wave mark, since amber is the non-link label color. */
.eyebrow::before {
  content: "";
  width: 34px;
  height: 12px;
  flex-shrink: 0;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6 C8 1 14 11 21 6 S 30 1 33 6' fill='none' stroke='%239a6106' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .eyebrow::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6 C8 1 14 11 21 6 S 30 1 33 6' fill='none' stroke='%23f2b73c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 6 C8 1 14 11 21 6 S 30 1 33 6' fill='none' stroke='%23f2b73c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

.section h2 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.15rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.8rem;
  text-wrap: balance;
}

.section > p { margin-bottom: 1.6rem; }

.section a { color: var(--accent-deep); }

/* ---------- directory ---------- */
.card-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.dir-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.dir-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.dir-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 15px;
  background: #ffffff;
  padding: 7px;
  margin-bottom: 0.9rem;
  border: 1px solid var(--hairline);
}

.dir-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 0.35rem;
}

.dir-card h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
  text-wrap: balance;
}

.dir-desc {
  font-size: 0.95rem;
  color: var(--muted);
  flex: 1;
}

.dir-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 1rem;
}

.card-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Icon-only card buttons: circular 44px touch targets, brand glyph centered.
   Text lives in the title tooltip and aria-label. */
.card-link-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.brand-icon {
  display: block;
  width: 20px;
  height: 20px;
}

/* External-link indicator: small superscript-style marker, decorative. */
.ext-icon {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
}

/* Superscript position next to inline text links. */
.lede a .ext-icon,
.site-footer p a .ext-icon,
.accordion-panel p a .ext-icon {
  vertical-align: super;
  margin-left: 0.22em;
}

/* Upper-right corner inside pill buttons. */
.card-link .ext-icon {
  align-self: flex-start;
  margin-top: 0.12em;
  margin-left: 0.12em;
}

.card-link:hover {
  border-color: var(--accent);
  background: var(--surface-soft);
}

.directory-controls { margin-bottom: 1rem; }

.search-label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.directory-search {
  font: inherit;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.directory-search:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.search-filter-row {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin-bottom: 0.9rem;
}

.filter-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--body);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.filter-toggle-label { font-weight: 600; font-size: 0.95rem; }

.filter-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }

.filter-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--surface-soft);
}

.filter-panel { margin-top: 0.85rem; }

.search-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  margin-top: 0.7rem;
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.search-meta[hidden] { display: none; }

.active-filter { color: var(--muted); font-size: 0.9rem; margin: 0; }

.active-filter strong { color: var(--ink); }

.meta-count { margin: 0 0 0 auto; font-size: 0.9rem; color: var(--muted); }

/* Icon-only reset control: subtle × that doesn't compete with the filter tags. */
.search-clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.search-clear-icon:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.search-clear-icon[hidden] { display: none; }

.filter-panel[hidden] { display: none; }

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.15rem;
}

/* Compact link-sized options: no button box, minimal line height. */
.filter-tag {
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: 0;
  padding: 0.15rem 0.1rem;
  color: var(--accent-deep);
  cursor: pointer;
  line-height: 1.5;
}

.filter-tag:hover { text-decoration: underline; text-underline-offset: 3px; }

.filter-tag[aria-pressed="true"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty-note {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

/* ---------- events ---------- */
.event-card { border-top: 3px solid var(--accent); }

.event-date {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--warm);
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.event-location { font-size: 0.9rem; color: var(--muted); }

.subsection-heading {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.7rem;
}

/* ---------- job board link chips ---------- */
/* Compact horizontal link items: thumbnail + title, whole chip is one link. */
.job-board-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: stretch;
}

.job-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.4rem 1.7rem 0.4rem 0.5rem;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.job-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.job-chip-logo {
  width: 45px;
  height: 45px;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}

.job-chip-title {
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--accent-deep);
  line-height: 1.3;
}

.job-chip-icon {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
}

/* ---------- guides accordion ---------- */
.accordion-panel h4 {
  color: var(--ink);
  font-size: 1.05rem;
  margin: 1.2rem 0 0.45rem;
}

.accordion-panel h4:first-child { margin-top: 0.2rem; }

.accordion-panel p { margin-bottom: 0.85rem; }

.guide-closing {
  margin-top: 1.3rem;
  padding: 1.05rem 1.25rem;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.95rem;
}

/* ---------- accordion ---------- */
.accordion-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }

.accordion-item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.2s ease;
}

.accordion-item:has(.accordion-button[aria-expanded="true"]) {
  border-color: var(--accent);
}

/* Green outline hover, like the cards and pill buttons. */
.accordion-item:hover {
  border-color: var(--accent);
}

.accordion-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 1.05rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ai-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent-deep);
  border-radius: 2px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.ai-bar-h {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.ai-bar-v {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.accordion-button[aria-expanded="true"] .accordion-icon {
  background: var(--accent);
  border-color: var(--accent);
}

.accordion-button[aria-expanded="true"] .ai-bar { background: var(--accent-ink); }

.accordion-button[aria-expanded="true"] .ai-bar-v {
  transform: translate(-50%, -50%) scaleY(0);
}

.accordion-panel { padding: 0 1.25rem 1.15rem; }

.accordion-panel[hidden] { display: none; }

/* ---------- contact form ---------- */
.contact-form { display: grid; gap: 1.05rem; }

/* Honeypot: visually hidden but NOT display:none, so bots still see it.
   Screen readers skip it via aria-hidden + tabindex="-1". */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.98rem;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  font: inherit;
  font-weight: 400;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  box-shadow: var(--shadow);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }

.btn-primary:disabled { opacity: 0.6; cursor: wait; transform: none; }

.form-microcopy {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}

.form-status { min-height: 1.5em; font-size: 0.95rem; color: var(--accent-deep); }

/* ---------- footer: full-width bar, centered content ---------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  padding: 3rem 1.5rem 2.2rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.footer-brand { margin-bottom: 0; }

.footer-brand strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

/* One-word brand, clickable to top. Overrides the generic footer text-link
   rule so the brand stays ink, with only "Deaf" in brand green. */
.footer-brand .footer-brand-link {
  color: var(--ink);
  text-decoration: none;
}

.footer-brand-link .brand-deaf { color: var(--accent-deep); }

.footer-brand-link:hover .brand-deaf { color: var(--accent); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  margin: 1.3rem 0 1.5rem;
}

.footer-nav a {
  color: var(--body);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.footer-nav a:hover { color: var(--accent-deep); }

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.2rem;
}

.footer-btn {
  font-size: 0.92rem;
  padding: 0.52rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-btn svg { flex-shrink: 0; }

/* Full bar width, matching the header's content width, now that it sits
   outside the centered footer-inner container. */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding: 1.4rem 1.5rem 0;
  text-align: left;
}

.footer-bottom p { margin: 0; font-size: 0.88rem; }

@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ---------- responsive ---------- */
/* Nav collapses to the hamburger menu at tablet widths. */
@media (max-width: 876px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem 1.5rem 1rem;
  }

  .site-nav.open { display: flex; }

  .site-nav a { padding: 0.7rem 0; border-top: 1px solid var(--hairline); }
  .site-nav a:first-child { border-top: 0; }
  .nav-cta { text-align: center; margin-top: 0.5rem; }

  /* Theme toggle stays in the header on mobile, next to the hamburger. */
  .site-header .theme-toggle { margin-left: auto; }
}

@media (max-width: 760px) {
  .hero { padding: 4rem 1.5rem 3.2rem; }
  .section { padding: 3.4rem 1.5rem; }
  .card-list { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
}

@media (max-width: 520px) {
  .card-list { grid-template-columns: 1fr; }
  .goal-card-arrow { display: none; }
}

/* ---------- accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 0.7rem 1.2rem;
  z-index: 100;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}

.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Inline text links (e.g. the Long Duong name link): brand teal, never browser-default blue. */
.lede a,
.site-footer p a,
.accordion-panel p a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  white-space: nowrap; /* keep the name and its external icon on one line */
}
.lede a:hover,
.site-footer p a:hover,
.accordion-panel p a:hover {
  color: var(--accent);
}
.lede a:visited,
.site-footer p a:visited,
.accordion-panel p a:visited {
  color: var(--accent-deep);
}

/* Shown only when JavaScript is off: the sections below are rendered by JS. */
.noscript-note { max-width: 640px; margin: 1rem auto; padding: 1rem 1.25rem; text-align: center; border: 1px solid var(--accent-deep); border-radius: 8px; }