body {
        font-family: "Inter", sans-serif;
      }

      .material-symbols-outlined {
        font-variation-settings:
          "FILL" 0,
          "wght" 400,
          "GRAD" 0,
          "opsz" 24;
      }

      .filled-icon {
        font-variation-settings:
          "FILL" 1,
          "wght" 500,
          "GRAD" 0,
          "opsz" 24;
      }

      .hero-grid {
        background-image:
          linear-gradient(rgba(76, 87, 96, 0.045) 1px, transparent 1px),
          linear-gradient(
            90deg,
            rgba(76, 87, 96, 0.045) 1px,
            transparent 1px
          );
        background-size: 44px 44px;
      }

      .hero-orb-one {
        background: radial-gradient(
          circle,
          rgba(99, 200, 147, 0.22) 0%,
          rgba(99, 200, 147, 0) 70%
        );
      }

      .hero-orb-two {
        background: radial-gradient(
          circle,
          rgba(76, 87, 96, 0.12) 0%,
          rgba(76, 87, 96, 0) 70%
        );
      }

      .video-image {
        transition:
          transform 700ms ease,
          filter 700ms ease;
      }

      .video-card:hover .video-image {
        transform: scale(1.035);
        filter: saturate(1.06);
      }

      .modal-scroll {
        scrollbar-width: thin;
        scrollbar-color: #bdcabf transparent;
      }

      .modal-scroll::-webkit-scrollbar {
        width: 7px;
      }

      .modal-scroll::-webkit-scrollbar-track {
        background: transparent;
      }

      .modal-scroll::-webkit-scrollbar-thumb {
        background: #bdcabf;
        border-radius: 9999px;
      }

      body.modal-open {
        overflow: hidden;
      }

      .footer-glow {
        background:
          radial-gradient(
            circle at 18% 10%,
            rgba(16, 185, 129, 0.08),
            transparent 34%
          ),
          #020617;
      }

      .mobile-menu-enter {
        animation: mobileMenuEnter 180ms ease-out;
      }

      @keyframes mobileMenuEnter {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-transition {
        transition:
          opacity 300ms ease,
          transform 300ms ease;
      }

      .modal-overlay {
        background-color: rgba(25, 28, 29, 0.48);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .modal-panel {
        background-color: #ffffff !important;
        opacity: 1 !important;
        isolation: isolate;
      }

      .modal-panel .modal-solid-section {
        background-color: #ffffff !important;
      }

      .modal-panel .modal-muted-section {
        background-color: #f2f4f5 !important;
      }

      .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
      }

      .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
      }

      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #bdcabc;
        border-radius: 10px;
      }

      .field-label {
        display: block;
        margin-bottom: 6px;
        color: #3e4a3f;
        font-family: "Hanken Grotesk", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
      }

      .form-field {
        width: 100%;
        border: 1px solid #bdcabc;
        border-radius: 8px;
        background: #ffffff;
        padding: 12px 14px;
        color: #191c1d;
        font-family: "Hanken Grotesk", sans-serif;
        font-size: 16px;
        line-height: 24px;
        transition:
          border-color 150ms ease,
          box-shadow 150ms ease;
      }

      .form-field:focus {
        border-color: #006d36;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 109, 54, 0.12);
      }

      .form-field::placeholder {
        color: #767f79;
      }

      .project-option input:checked + div {
        border-color: #006d36;
        background: rgba(80, 200, 120, 0.09);
        box-shadow: 0 0 0 1px #006d36;
      }

      .project-option input:checked + div .radio-circle {
        border-color: #006d36;
      }

      .project-option input:checked + div .radio-dot {
        opacity: 1;
      }

      .hidden-state {
        display: none;
      }