/* ==========================================================================
   USBDAF — U.S. Based Deaf Action Foundation
   Plain CSS (converted from the Tailwind/React project)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;

  --radius: 0.75rem;
  --background: oklch(0.985 0.004 85);
  --foreground: oklch(0.27 0.015 255);
  --card: oklch(1 0 0);
  --primary: oklch(0.29 0.06 252);           /* navy  #122d4b */
  --primary-foreground: oklch(0.99 0 0);
  --navy: oklch(0.29 0.06 252);
  --navy-deep: oklch(0.22 0.05 252);
  --on-navy: oklch(0.98 0.005 250);
  --on-navy-muted: oklch(0.82 0.03 245);
  --secondary: oklch(0.955 0.008 80);
  --muted-foreground: oklch(0.46 0.02 255);
  --accent: oklch(0.52 0.09 185);            /* teal  #2b958b */
  --accent-foreground: oklch(0.99 0 0);
  --accent-soft: oklch(0.94 0.03 185);
  --sand: oklch(0.93 0.015 80);
  --destructive: oklch(0.55 0.2 27);
  --border: oklch(0.9 0.008 80);
  --input: oklch(0.86 0.01 80);
  --ring: oklch(0.52 0.09 185);

  --shadow-soft: 0 1px 2px oklch(0.29 0.06 252 / 6%), 0 12px 32px -12px oklch(0.29 0.06 252 / 18%);
  --shadow-lift: 0 2px 4px oklch(0.29 0.06 252 / 8%), 0 24px 48px -16px oklch(0.29 0.06 252 / 28%);
  --gradient-navy: linear-gradient(140deg, var(--navy-deep), var(--navy) 60%, oklch(0.36 0.07 220));
  --gradient-hero-fade: linear-gradient(90deg, oklch(0.22 0.05 252 / 92%) 0%, oklch(0.22 0.05 252 / 70%) 45%, oklch(0.22 0.05 252 / 10%) 100%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
p, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
svg.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: absolute; left: 1rem; top: 1rem; z-index: 60;
  width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  padding: 0.5rem 1rem; border-radius: 0.375rem;
  background: var(--primary); color: var(--primary-foreground);
}

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

/* ---------- Layout helpers ---------- */
.container { margin-inline: auto; width: 100%; max-width: 80rem; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.section { padding-block: 5rem; }
@media (min-width: 768px) { .section { padding-block: 7rem; } }
.section--bottom { padding-bottom: 5rem; }
@media (min-width: 768px) { .section--bottom { padding-bottom: 7rem; } }
.section--bordered { border-top: 1px solid var(--border); }
.bg-secondary { background: var(--secondary); }
.bg-sand { background: var(--sand); position: relative; overflow: hidden; }
.bg-navy { background-image: var(--gradient-navy); }
.scroll-mt { scroll-margin-top: 6rem; }

.grid { display: grid; gap: 3rem; }
.grid--center { align-items: center; }
.grid--gap-sm { gap: 1.25rem; }
.grid--gap-xs { gap: 1.5rem; }
@media (min-width: 1024px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
  .grid--2-tight { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
  .grid--12 { grid-template-columns: repeat(12, 1fr); }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-start-8 { grid-column: 8 / span 5; }
}

.photo { width: 100%; height: 100%; object-fit: cover; }
.frame { overflow: hidden; border-radius: 1.5rem; }
.frame--lift { box-shadow: var(--shadow-lift); }
.frame--soft { box-shadow: var(--shadow-soft); }
.ar-4-5 { aspect-ratio: 4 / 5; }
.ar-5-4 { aspect-ratio: 5 / 4; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-wide { aspect-ratio: 16 / 7; min-height: 18rem; }

.eyebrow {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
}
.eyebrow--light { color: var(--accent-soft); }

/* Section heading block */
.section-head { max-width: 48rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: 1.875rem; font-weight: 700; }
.section-head__body { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.section-head__body p + p { margin-top: 1rem; }
.section-head--light h2 { color: var(--on-navy); }
.section-head--light .section-head__body { color: var(--on-navy-muted); }
@media (min-width: 768px) { .section-head h2 { font-size: 3rem; } }

.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-radius: 9999px; border: 2px solid transparent;
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; text-align: center;
}
.btn:active { transform: scale(0.98); }
.btn .icon { width: 1rem; height: 1rem; }
.btn--primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-soft); }
.btn--primary:hover { background: var(--navy-deep); box-shadow: var(--shadow-lift); }
.btn--accent { background: var(--accent); color: var(--accent-foreground); box-shadow: var(--shadow-soft); }
.btn--accent:hover { filter: brightness(1.1); box-shadow: var(--shadow-lift); }
.btn--outline { border-color: var(--primary); color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: var(--primary-foreground); }
.btn--light { background: var(--on-navy); color: var(--primary); }
.btn--light:hover { background: var(--accent-soft); }
.btn--ghost-light { border-color: oklch(0.98 0.005 250 / 60%); color: var(--on-navy); }
.btn--ghost-light:hover { background: var(--on-navy); color: var(--primary); }
.btn--block { width: 100%; }
.btn--sm { padding: 0.625rem 1.25rem; }
.btn-arrow { transition: transform 0.2s; }
.btn:hover .btn-arrow { transform: translateX(0.25rem); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.985 0.004 85 / 95%); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: box-shadow 0.2s;
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft); border-bottom-color: var(--border); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 5rem; }
.logo { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.75rem; }
.logo img { height: 2.75rem; width: auto; }
.logo__text { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--primary); letter-spacing: -0.02em; }
@media (min-width: 768px) { .logo img { height: 3rem; } }

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: 0.25rem; }
.nav-desktop a { display: block; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; transition: background 0.2s, color 0.2s; }
.nav-desktop a:hover { background: var(--secondary); color: var(--primary); }
.nav-desktop a[aria-current="page"] { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-actions .btn--donate { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  border: 1px solid var(--border); background: transparent; color: var(--primary); cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile { border-top: 1px solid var(--border); background: var(--background); }
.nav-mobile[hidden] { display: none; }
.nav-mobile ul { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 1rem; }
.nav-mobile a:not(.btn) { display: block; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 600; color: var(--primary); }
.nav-mobile a:not(.btn):hover { background: var(--secondary); }
.nav-mobile a[aria-current="page"] { background: var(--accent-soft); }
.nav-mobile li:last-child { padding-top: 0.75rem; }

@media (min-width: 640px) { .header-actions .btn--donate { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .menu-toggle, .nav-mobile { display: none !important; }
}

/* ---------- Page hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-deep); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__fade { position: absolute; inset: 0; background-image: var(--gradient-hero-fade); }
.hero__inner { padding-block: 7rem; }
.hero--home .hero__inner { padding-block: 6rem; }
.hero__content { max-width: 42rem; animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero h1 { font-size: 3rem; font-weight: 700; color: var(--on-navy); }
.hero--home h1 { font-weight: 800; }
.hero__lead { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--on-navy-muted); }
.hero--home .hero__lead { margin-top: 1.75rem; color: var(--on-navy); }
.hero__quote {
  margin-top: 1.25rem; padding-left: 1.25rem; border-left: 4px solid var(--accent);
  line-height: 1.625; color: var(--on-navy-muted);
}
.hero .btn-row { margin-top: 2.5rem; }
@media (min-width: 768px) {
  .hero__inner { padding-block: 10rem; }
  .hero--home .hero__inner { padding-block: 9rem; }
  .hero h1 { font-size: 4.5rem; }
  .hero__lead { font-size: 1.25rem; }
}
@media (min-width: 1024px) { .hero--home .hero__inner { padding-block: 11rem; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Cards / lists ---------- */
.deco-block { position: relative; }
.deco-block::after {
  content: ""; position: absolute; right: -1.5rem; bottom: -1.5rem; z-index: -1;
  width: 12rem; height: 12rem; border-radius: 1.5rem; background: var(--accent-soft); display: none;
}
@media (min-width: 768px) { .deco-block::after { display: block; } }

/* Purpose */
.purpose {
  display: grid; gap: 1px; overflow: hidden; margin-top: 3.5rem;
  border: 1px solid var(--border); border-radius: 1.5rem; background: var(--border);
}
.purpose li { background: var(--card); padding: 2rem; transition: background 0.2s; }
.purpose li:hover { background: var(--accent-soft); }
.purpose .icon { width: 2rem; height: 2rem; color: var(--accent); stroke-width: 1.75; }
.purpose h3 { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 600; }
.purpose p { margin-top: 0.75rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .purpose { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .purpose { grid-template-columns: repeat(5, 1fr); } }

/* What we do */
.split-head { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.split-head .btn { flex-shrink: 0; align-self: flex-start; }
@media (min-width: 768px) { .split-head { flex-direction: row; align-items: flex-end; } }
.work-grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(5, 1fr); } }
.work-card {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem;
  border: 1px solid var(--border); border-radius: 1rem; background: var(--card);
  box-shadow: var(--shadow-soft); transition: all 0.2s;
}
.work-card:hover { transform: translateY(-0.25rem); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.work-card__top { display: flex; align-items: center; justify-content: space-between; }
.icon-box {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  background: var(--accent-soft); color: var(--accent); transition: all 0.2s;
}
.work-card:hover .icon-box { background: var(--accent); color: var(--accent-foreground); }
.work-card__num { font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: var(--muted-foreground); }
.work-card h3 { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1.375; }
.work-card p { margin-top: 0.5rem; flex: 1; font-size: 0.875rem; color: var(--muted-foreground); }
.work-card__more { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.work-card__more .icon { width: 1rem; height: 1rem; transition: transform 0.2s; }
.work-card:hover .work-card__more .icon { transform: translateX(0.25rem); }

/* Education overlap card */
.overlap-card {
  position: relative; margin: -6rem auto 0; max-width: 56rem;
  border-radius: 1.5rem; background: var(--card); padding: 2rem; box-shadow: var(--shadow-lift);
}
.overlap-card h2 { font-size: 1.875rem; font-weight: 700; }
.overlap-card__cols { display: grid; gap: 1.5rem; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
@media (min-width: 768px) {
  .overlap-card { padding: 3.5rem; }
  .overlap-card h2 { font-size: 2.25rem; }
  .overlap-card__cols { grid-template-columns: repeat(2, 1fr); }
}

/* Employment */
.check-list { display: grid; gap: 0.75rem; margin-top: 2rem; color: var(--on-navy); }
.check-list li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
  border: 1px solid oklch(0.98 0.005 250 / 15%); border-radius: 0.75rem;
}
.check-list li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--accent); flex-shrink: 0; }
@media (min-width: 640px) { .check-list { grid-template-columns: repeat(2, 1fr); } }

/* Leadership */
.quote {
  font-family: var(--font-display); font-size: 1.875rem; font-weight: 700;
  line-height: 1.25; color: var(--primary);
}
@media (min-width: 768px) { .quote { font-size: 2.25rem; } }
.stack-center { display: flex; flex-direction: column; justify-content: center; }
.lead-text { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }

/* Creativity */
.circle-deco { position: absolute; left: -8rem; top: 2.5rem; width: 24rem; height: 24rem; border-radius: 9999px; background: var(--accent-soft); }
.relative { position: relative; }
@media (min-width: 1024px) { .tilt { transform: rotate(1deg); } }

/* Who we support */
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; }
.pills li {
  padding: 0.625rem 1.25rem; border: 2px solid oklch(0.29 0.06 252 / 15%); border-radius: 9999px;
  background: var(--card); font-weight: 600; color: var(--primary);
}
.order-1 { order: 1; } .order-2 { order: 2; }
@media (min-width: 1024px) { .lg-order-1 { order: 1; } .lg-order-2 { order: 2; } }

/* Involve / donate pair */
.panel { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2.5rem; }
.panel--outline { border: 2px solid oklch(0.29 0.06 252 / 10%); background: var(--card); }
.panel .icon.big { width: 2.5rem; height: 2.5rem; color: var(--accent); }
.panel--navy .icon.big { color: var(--accent-soft); }
.panel h2 { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 700; }
.panel p { margin-top: 1rem; font-size: 1.125rem; color: var(--muted-foreground); }
.panel--navy h2 { color: var(--on-navy); }
.panel--navy p { color: var(--on-navy-muted); }
.panel .btn { margin-top: 2rem; }
.panel > * { position: relative; }
.ring-deco {
  position: absolute !important; right: -4rem; top: -4rem; width: 16rem; height: 16rem;
  border-radius: 9999px; border: 36px solid oklch(0.52 0.09 185 / 30%);
}
@media (min-width: 768px) {
  .panel { padding: 3.5rem; }
  .panel h2 { font-size: 2.25rem; }
  .two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.two-col { gap: 1.5rem; display: grid; }

/* Final statement */
.final { text-align: center; }
.final p {
  max-width: 56rem; margin-inline: auto; font-family: var(--font-display);
  font-size: 1.875rem; font-weight: 700; line-height: 1.25; color: var(--primary);
}
@media (min-width: 768px) { .final p { font-size: 3rem; } }

/* Closing band */
.closing { border-radius: 1.5rem; padding: 4rem 2rem; text-align: center; position: relative; overflow: hidden; }
.closing .ring-a { position: absolute; right: -6rem; top: -6rem; width: 18rem; height: 18rem; border-radius: 9999px; border: 40px solid oklch(0.52 0.09 185 / 25%); }
.closing .dot-b { position: absolute; left: -4rem; bottom: -5rem; width: 14rem; height: 14rem; border-radius: 9999px; background: oklch(0.52 0.09 185 / 15%); }
.closing__inner { position: relative; max-width: 48rem; margin-inline: auto; }
.closing h2 { font-size: 1.875rem; font-weight: 700; color: var(--on-navy); }
.closing p { margin-top: 1.25rem; font-size: 1.125rem; color: var(--on-navy-muted); }
.closing .btn-row { margin-top: 2.25rem; }
@media (min-width: 768px) { .closing { padding: 5rem 4rem; } .closing h2 { font-size: 3rem; } }

/* About page */
.prose-muted { display: grid; gap: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.title-lg { font-size: 2.25rem; font-weight: 700; }
@media (min-width: 768px) { .title-lg { font-size: 3rem; } }
.mv-card { border-radius: 1.5rem; padding: 2.5rem; }
.mv-card--light { background: var(--card); box-shadow: var(--shadow-soft); }
.mv-card .icon { width: 2.5rem; height: 2.5rem; color: var(--accent); }
.mv-card h2 { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 700; }
.mv-card p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
.mv-card.bg-navy .icon { color: var(--accent-soft); }
.mv-card.bg-navy h2 { color: var(--on-navy); }
.mv-card.bg-navy p { color: var(--on-navy-muted); }
@media (min-width: 768px) { .mv-card { padding: 3.5rem; } .mv-card h2 { font-size: 2.25rem; } }

.values { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
.values li {
  padding: 1.75rem; border: 1px solid var(--border); border-radius: 1rem;
  background: var(--card); transition: all 0.2s;
}
.values li:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lift); }
.values .icon { width: 1.75rem; height: 1.75rem; color: var(--accent); }
.values h3 { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 600; }
.values p { margin-top: 0.5rem; color: var(--muted-foreground); }
.values li.values__tag {
  display: flex; align-items: center; background: var(--accent); border-color: transparent;
}
.values li.values__tag:hover { transform: none; box-shadow: none; }
.values__tag p { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.375; color: var(--accent-foreground); }
@media (min-width: 640px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .values li.span-2-sm { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .values { grid-template-columns: repeat(4, 1fr); }
  .values li.span-2-sm { grid-column: span 1; }
}

/* Programs page */
.feature-icon { width: 2.25rem; height: 2.25rem; color: var(--accent); margin-bottom: 1rem; }
.bg-navy.band { padding-block: 5rem; }
@media (min-width: 768px) { .bg-navy.band { padding-block: 6rem; } }
.band__grid { display: grid; gap: 2.5rem; }
.big-icon {
  display: flex; align-items: center; justify-content: center;
  width: 5rem; height: 5rem; border-radius: 1rem;
  background: var(--accent); color: var(--accent-foreground);
}
.big-icon .icon { width: 2.5rem; height: 2.5rem; }
.band h2 { font-size: 1.875rem; font-weight: 700; color: var(--on-navy); }
.band__text { margin-top: 1rem; max-width: 48rem; font-size: 1.125rem; color: var(--on-navy-muted); }
.band .eyebrow { margin-bottom: 0.75rem; }
@media (min-width: 768px) {
  .band__grid { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .band__grid > :first-child { grid-column: span 2; }
  .band__grid > :last-child { grid-column: span 10; }
  .band h2 { font-size: 2.25rem; }
}
.compact { display: grid; gap: 1.25rem; margin-top: 3rem; }
.compact li {
  display: flex; gap: 1.5rem; padding: 2rem; border: 1px solid var(--border);
  border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-soft); transition: all 0.2s;
}
.compact li:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lift); }
.compact .icon-box { width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.compact .icon-box .icon { width: 1.75rem; height: 1.75rem; }
.compact h3 { font-size: 1.25rem; font-weight: 600; }
.compact p { margin-top: 0.5rem; line-height: 1.625; color: var(--muted-foreground); }
@media (min-width: 768px) { .compact { grid-template-columns: repeat(2, 1fr); } }

.duo { display: grid; gap: 1.5rem; }
.duo article { border-radius: 1.5rem; padding: 2.5rem; }
.duo .outline { border: 2px solid oklch(0.29 0.06 252 / 10%); }
.duo .soft { background: var(--accent-soft); }
.duo .icon { width: 2.25rem; height: 2.25rem; color: var(--accent); }
.duo .eyebrow { margin-top: 1.5rem; margin-bottom: 0; }
.duo h2 { margin-top: 0.75rem; font-size: 1.875rem; font-weight: 700; }
.duo p.body { margin-top: 1rem; font-size: 1.125rem; line-height: 1.625; color: var(--muted-foreground); }
@media (min-width: 768px) { .duo article { padding: 3rem; } }
@media (min-width: 1024px) { .duo { grid-template-columns: repeat(2, 1fr); } }

/* Get Involved */
.ways { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
.ways li {
  border-radius: 1rem; background: var(--card); padding: 2rem;
  box-shadow: var(--shadow-soft); transition: all 0.2s;
}
.ways li:hover { transform: translateY(-0.25rem); box-shadow: var(--shadow-lift); }
.ways .icon-box { width: 3.5rem; height: 3.5rem; background: var(--primary); color: var(--primary-foreground); }
.ways .icon-box .icon { width: 1.75rem; height: 1.75rem; }
.ways h3 { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 600; }
.ways p { margin-top: 0.75rem; font-size: 1.125rem; color: var(--muted-foreground); }
.ways a { margin-top: 1.25rem; display: inline-block; font-weight: 600; color: var(--accent); text-underline-offset: 4px; }
.ways a:hover { text-decoration: underline; }
@media (min-width: 768px) { .ways { grid-template-columns: repeat(2, 1fr); } .ways li { padding: 2.5rem; } }

.donate-box { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 2.5rem; }
.donate-box .ring { position: absolute; right: -5rem; top: -5rem; width: 20rem; height: 20rem; border-radius: 9999px; border: 48px solid oklch(0.52 0.09 185 / 25%); }
.donate-box__inner { position: relative; max-width: 42rem; }
.donate-box h2 { font-size: 2.25rem; font-weight: 700; color: var(--on-navy); }
.donate-box__text { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--on-navy-muted); }
.donate-notice {
  margin-top: 2rem; padding: 1.25rem; border: 2px dashed oklch(0.98 0.005 250 / 30%);
  border-radius: 1rem; color: var(--on-navy);
}
.donate-notice strong { font-weight: 600; }
.donate-notice p + p { margin-top: 0.25rem; color: var(--on-navy-muted); }
@media (min-width: 768px) { .donate-box { padding: 4rem; } .donate-box h2 { font-size: 3rem; } }

/* Form */
.form { display: grid; gap: 1.5rem; border-radius: 1.5rem; background: var(--card); padding: 2rem; box-shadow: var(--shadow-lift); align-content: start; }
@media (min-width: 768px) { .form { padding: 2.5rem; } }
.form__note { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 0.75rem; background: var(--accent-soft); font-size: 0.875rem; color: var(--primary); }
.form__note .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--accent); }
.form label { font-weight: 600; color: var(--primary); }
.form .req { color: var(--destructive); }
.form .opt { font-weight: 400; color: var(--muted-foreground); }
.form input, .form select, .form textarea {
  display: block; width: 100%; margin-top: 0.5rem; padding: 0.75rem 1rem;
  border: 2px solid var(--input); border-radius: 0.75rem;
  background: var(--card); color: var(--foreground); font-size: 1rem;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form [aria-invalid="true"] { border-color: var(--destructive); }
.form .error { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--destructive); }
.form .error:empty { display: none; }
.form__status {
  padding: 1rem; border: 2px solid var(--accent); border-radius: 0.75rem;
  background: var(--accent-soft); font-size: 0.875rem; font-weight: 500; color: var(--primary);
}
.form__status[hidden] { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy-muted); }
.site-footer__grid { display: grid; gap: 3rem; padding-block: 4rem; }
.footer-logo { display: inline-block; border-radius: 1rem; background: var(--card); padding: 1rem 1.25rem; }
.footer-logo img { height: 3rem; width: auto; }
.footer-logo .logo__text { font-size: 1.5rem; }
.site-footer__about { margin-top: 1.5rem; max-width: 28rem; line-height: 1.625; }
.site-footer h2 {
  margin-bottom: 1rem; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy);
}
.site-footer li + li { margin-top: 0.75rem; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .italic { font-style: italic; }
.site-footer .msg-link { display: inline-block; margin-top: 1.25rem; font-weight: 600; color: var(--accent-soft); }
.site-footer__bottom { border-top: 1px solid oklch(0.98 0.005 250 / 10%); }
.site-footer__bottom .container { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.5rem; font-size: 0.875rem; }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(12, 1fr); }
  .site-footer__grid > :nth-child(1) { grid-column: span 5; }
  .site-footer__grid > :nth-child(2) { grid-column: span 3; }
  .site-footer__grid > :nth-child(3) { grid-column: span 4; }
  .site-footer__bottom .container { flex-direction: row; justify-content: space-between; }
}

/* 404 */
.notfound { display: flex; min-height: 60vh; align-items: center; justify-content: center; padding: 1rem; text-align: center; }
.notfound h1 { font-size: 4.5rem; font-weight: 700; }
.notfound h2 { margin-top: 1rem; font-size: 1.25rem; font-weight: 600; }
.notfound p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.notfound .btn { margin-top: 1.5rem; }