:root {
      --accent: #005dc7;
      --accent-hover: #004fa9;
      --title: #17191c;
      --body: #6f7680;
      --muted: #9298a1;
      --border: #e4e7eb;
      --surface: #f7f8fa;
      --white: #ffffff;
      --radius: 8px;
      --max: 800px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 14px;
      line-height: 1.6;
      color: var(--body);
      background: var(--white);
      -webkit-font-smoothing: antialiased;
    }

    button, input, textarea, select { font: inherit; }
    a { color: inherit; text-decoration: none; }

    .container {
      width: min(calc(100% - 32px), var(--max));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(8px);
    }

    .nav {
      min-height: 56px;
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .brand {
      color: var(--title);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .brand-mark {
      width: 26px;
      height: 26px;
      border: 1px solid var(--accent);
      color: var(--accent);
      border-radius: 6px;
      display: grid;
      place-items: center;
      font-weight: 700;
    }

    .brand img {
      display: block;
      width: auto;
      height: 32px;
    }

    .nav-links {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .nav-link {
      color: var(--body);
      transition: color .18s ease;
    }

    .nav-link:hover { color: var(--title); }

    .button {
      min-height: 34px;
      padding: 6px 12px;
      border-radius: 6px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-weight: 600;
      transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    }

    .button:hover { transform: translateY(-1px); }
    .button:active { transform: translateY(0); }

    .button-primary {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--white);
    }

    .button-primary:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
    }

    .button-secondary {
      background: var(--white);
      border-color: var(--border);
      color: var(--title);
    }

    .button-secondary:hover { border-color: #cfd4da; }

    .hero {
      padding: 100px 0;
      border-bottom: 1px solid var(--border);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 16px;
    }

    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 {
      font-size: 14px;
      line-height: 1.5;
      color: var(--title);
      font-weight: 600;
      margin-bottom: 0;
    }

    h1 { max-width: 560px; margin-bottom: 14px; }
    .hero-copy { max-width: 590px; margin-bottom: 24px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

    .meta-row {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      gap: 10px 22px;
      color: var(--muted);
    }

    .meta-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    section {
      padding: 100px 0;
      border-bottom: 1px solid var(--border);
    }

    .section-head {
      display: flex;
      flex-direction: column; /* Stacks headline and text vertically */
      gap: 2px;              /* Controls the vertical space between them */
      margin-bottom: 40px;    /* Keeps your bottom spacing */
    }

    .section-head p { margin-bottom: 0; }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .feature {
      padding: 24px;
      background: var(--white);
      transition: background-color .18s ease;
      gap: 40px;
    }

    .feature + .feature { border-left: 1px solid var(--border); }
    .feature:hover { background: var(--surface); }

    .icon-box {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: var(--accent);
      background: #f3f7fc;
      border: 1px solid #dce9f7;
      border-radius: 6px;
      margin-bottom: 26px;
    }

    .feature h3 { margin-bottom: 6px; }
    .feature p { margin-bottom: 0; }

    .program-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: row;
    }

    .program {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 24px;
      transition: background-color .18s ease;
      border-right: 1px solid var(--border);
    }

    .program + .program { border-top: 1px solid var(--border); }
    .program:hover { background: var(--surface); }
    .program h3, .program p { margin-bottom: 0; }
    .program p { margin-top: 3px; }

    .text-link {
      color: var(--accent);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .text-link i { transition: transform .18s ease; }
    .text-link:hover i { transform: translateX(2px); }

    .panel {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
    }

    .panel h3 { margin-bottom: 5px; }
    .panel p { margin-bottom: 0; }

    .links-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .resource {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 42px;
      align-items: flex-start;
      transition: background-color .18s ease, border-color .18s ease;
    }

    .resource:hover {
      background: var(--surface);
      border-color: #cfd4da;
    }

    .resource i { color: var(--accent); font-size: 18px; margin-top: 1px; }
    .resource h3 { margin-bottom: 2px; }
    .resource p { margin-bottom: 0; }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }

    .contact-list {
      display: grid;
      gap: 12px;
    }

    .contact-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }

    .contact-row i { color: var(--accent); margin-top: 4px; }
    .contact-row strong { display: block; color: var(--title); font-weight: 600; }

    footer { padding: 28px 0 36px; }
    .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: var(--muted);
    }

    .footer-links { display: flex; gap: 16px; }
    .footer-links a:hover { color: var(--title); }

    .reveal {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .45s ease, transform .45s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

    @media (max-width: 720px) {
      .nav-links .nav-link { display: none; }
      .section-head { grid-template-columns: 1fr; gap: 6px; }
      .grid-3 { grid-template-columns: 1fr; }
      .feature + .feature { border-left: 0; border-top: 1px solid var(--border); }
      .feature { min-height: auto; }
      .links-grid, .contact-grid { grid-template-columns: 1fr; }
      .panel { grid-template-columns: 1fr; }
      .footer-row { align-items: flex-start; flex-direction: column; }
      .program-list {flex-direction: column; /* Flips the horizontal items into a vertical stack */
  }
    }

    @media (max-width: 480px) {
      .container { width: min(calc(100% - 24px), var(--max)); }
      .hero { padding-top: 52px; }
      .program { grid-template-columns: 1fr; gap: 10px; }
      .nav { gap: 12px; }
      .nav .button { margin-left: auto; }
    }