: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;
  }




.page-hero {
    padding: 32px 0 56px;
    text-align: center;
  }
  .page-hero-eyebrow {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
  }
  .page-hero h1 {
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
    max-width: 900px;
    margin-inline: auto;
  }
  .page-hero p {
    font-size: 20px;
    color: var(--ink-500);
    max-width: 640px;
    line-height: 1.6;
    margin: 0 auto;
  }