:root {
    /* The 5 anchors */
    --white:   #FFFFFF;
    --gray:    #E5E5E5;   /* light neutral for pills, borders, surfaces */
    --orange:  #FCA311;   /* accent / CTA */
    --navy:    #14213D;   /* primary brand / dark sections */
    --black:   #000000;   /* deepest dark / problem section */

    /* Tonal variations derived strictly from the 5 anchors */
    --gray-soft:   #F2F2F2;   /* halfway between white & gray, for subtle surfaces */
    --gray-strong: #C7C7C7;   /* darker gray, used for muted text on light bg */

    --orange-strong: #E08F00; /* darker orange for hover */
    --orange-soft:   #FEE7B6; /* lightened orange for tints (10% mix) */

    --navy-strong: #0D1729;   /* darker navy for elevation/contrast on navy bg */
    --navy-soft:   #1F3057;   /* lighter navy for hover / cards on navy bg */
    --navy-mute:   #4A5878;   /* muted navy for body text on dark surfaces */

    /* Semantic aliases — mapped onto the 5-color palette */
    --bg:           var(--white);
    --surface:      var(--white);
    --surface-alt:  var(--gray);
    --border:       var(--gray);
    --border-soft:  var(--gray-soft);

    --text:         var(--black);
    --text-muted:   #595959;          /* tinted black for body copy */
    --text-faint:   #8A8A8A;          /* lightest readable gray */

    /* Backwards-compatible aliases (existing CSS uses these names) */
    --cream:    var(--gray);
    --cream-2:  var(--gray-strong);
    --ink-900:  var(--black);
    --ink-700:  #2B2B2B;
    --ink-500:  #595959;
    --ink-300:  #8A8A8A;
    --ink-200:  var(--gray);
    --ink-100:  var(--gray-soft);

    /* Brand scale — all derived from the single navy anchor */
    --brand-900: #0D1729;
    --brand-800: var(--navy);
    --brand-700: #1F3057;
    --brand-600: #2B3F6E;
    --brand-500: var(--navy);
    --brand-300: #4A5878;

    /* Orange scale */
    --orange-500: var(--orange);
    --orange-600: var(--orange-strong);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --container: 1200px;
  }




.purpose-card {
    padding: 48px 44px;
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
  }
  .purpose-card-mission {
    background: var(--navy);
    color: var(--white);
  }
  .purpose-card-vision {
    background: var(--gray);
    color: var(--ink-900);
  }
  /* Subtle decorative pattern on mission card */
  .purpose-card-mission::before {
    content: '';
    position: absolute;
    inset: auto -40px -60px auto;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(252,163,17,0.18), transparent 70%);
    pointer-events: none;
  }
  .purpose-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: grid; place-items: center;
    margin-bottom: 24px;
    flex-shrink: 0;
  }
  .purpose-card-mission .purpose-icon {
    background: rgba(255,255,255,0.10);
    color: var(--orange);
  }
  .purpose-card-vision .purpose-icon {
    background: var(--white);
    color: var(--orange);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }
  .purpose-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
  .purpose-card h3 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
  }
  .purpose-card-mission h3 { color: var(--white); }
  .purpose-card-vision h3 { color: var(--ink-900); }
  .purpose-card p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  .purpose-card-mission p { color: rgba(255,255,255,0.75); }
  .purpose-card-vision p { color: var(--ink-500); }

  /* About page responsive */
  @media (max-width: 1024px) {
    .about-image { aspect-ratio: 16 / 7.5; margin-bottom: 48px; }
    .about-prose { gap: 24px; }
    .purpose-card { padding: 40px 36px; }
  }
  @media (max-width: 768px) {
    .about-image {
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-lg);
      margin-bottom: 36px;
    }
    .about-statement { margin-bottom: 20px; }
    .about-description { margin-bottom: 48px; }
    .about-prose { gap: 20px; margin-bottom: 56px; }
    .purpose-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 56px; }
    .purpose-card { padding: 36px 28px; border-radius: var(--radius-lg); }
    .purpose-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 20px; }
    .purpose-icon svg { width: 22px; height: 22px; }
  }
  @media (max-width: 425px) {
    .about-image { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
    .about-description { margin-bottom: 40px; }
    .about-description,
    .about-prose p { font-size: 14px; }
    .purpose-card { padding: 28px 22px; border-radius: var(--radius-md); }
    .purpose-card p { font-size: 14px; }
  }
  @media (max-width: 375px) {
    .purpose-card h3 { font-size: 24px; }
  }
  @media (max-width: 320px) {
    .about-statement h2 { font-size: 24px; }
    .purpose-card { padding: 24px 18px; }
    .purpose-card h3 { font-size: 22px; }
  }