:root {
      --blue: #1d68fb;
      --amber: #fbaf1d;
      --pale-blue: #d6e4fe;
      --pale-amber: #fee2bb;
      --neutral: #edeff0;
      --navy: #000e38;
      --paper: #ffffff;
    }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      width: 100%;
      color: var(--navy);
      font-family: "DM Sans", sans-serif;
    }

    .page-shell {
      width: 100%;
      overflow-x: hidden;
    }

    .display-font { font-family: "Fraunces", serif; }

    .site-width {
      width: 100%;
      max-width: 72rem;
      margin: 0 auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }

    .focus-ring:focus-visible {
      outline: 3px solid var(--amber);
      outline-offset: 4px;
    }

    .nav-link {
      transition: color 180ms ease;
    }

    .site-logo {
      display: block;
      width: auto;
      height: 3rem;
      max-width: 10rem;
    }

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

    .button-lift {
      transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    }

    .button-lift:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 22px rgba(0, 14, 56, 0.16);
    }

    .hero-line {
      width: 3.5rem;
      height: 0.25rem;
      border-radius: 999px;
      background: var(--amber);
    }

    .menu-toggle svg { width: 1.25rem; height: 1.25rem; }

    .mobile-navigation {
      display: none;
    }

    .mobile-navigation.is-open {
      display: flex;
    }

    .feature-card {
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 24px rgba(0, 14, 56, 0.1);
    }

    @media (min-width: 768px) {
      .site-width {
        padding-left: 2rem;
        padding-right: 2rem;
      }

      .mobile-menu-button { display: none; }
      .mobile-navigation { display: none !important; }
    }