:root {
      --blue: #5BBFBF;
      --teal: #5BBFBF;
      --mist: #8EC9C4;
      --amber: #F4A261;
      --coral: #F26B5B;
      --ink: #0E2A38;
      --cream: #ffffff;
    }

    html {
      scroll-behavior: smooth;
      background: #ffffff;
    }

    body {
      font-family: "Avenir Next", "Avenir", ui-sans-serif, system-ui, sans-serif;
      color: var(--ink);
      background: #ffffff;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .font-display {
      font-family: "Avenir Next Condensed", "Avenir Next", "Avenir", ui-sans-serif, system-ui, sans-serif;
      letter-spacing: -0.01em;
    }

    /* ——— Display headline with a subtle ink gradient ——— */
    .ink-gradient {
      background: linear-gradient(180deg, #0E2A48 0%, #0E2A48 60%, #0E2A48 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-gradient-text {
      background: linear-gradient(95deg, #5BBFBF 0%, #8EC9C4 45%, #5BBFBF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Hero “Real impact.” — warm sage → amber (no bright blue) */
    .hero-impact-text {
      color: #5BBFB5;
    }

    .founder-name-gradient {
      background: linear-gradient(92deg, #5BBFBF 0%, #8EC9C4 28%, #5BBFBF 62%, #8EC9C4 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* ——— Soft 3D orbs (CSS-only, no images) ——— */
    .orb {
      position: absolute;
      border-radius: 9999px;
      filter: blur(60px);
      opacity: 0.18;
      pointer-events: none;
      will-change: transform;
    }

    .orb-blue {
      background: radial-gradient(circle at 30% 30%, #A6E0D8, #5BBFBF 60%, transparent 75%);
    }

    .orb-teal {
      background: radial-gradient(circle at 30% 30%, #A6E0D8, #5BBFBF 60%, transparent 75%);
    }

    .orb-amber {
      background: radial-gradient(circle at 30% 30%, #FFD3A6, #F4A261 60%, transparent 75%);
    }

    .orb-coral {
      background: radial-gradient(circle at 30% 30%, #FFB5AA, #F26B5B 60%, transparent 75%);
    }

    /* Hero-only: airy warm highlights (no blue cast) */
    .hero-blob {
      position: absolute;
      border-radius: 9999px;
      filter: blur(44px);
      pointer-events: none;
      will-change: transform;
      opacity: 0.2;
    }

    .hero-blob-cream {
      background: radial-gradient(circle at 28% 28%, #ffffff 0%, #faf6f1 45%, rgba(247, 239, 228, 0.5) 62%, transparent 78%);
    }

    .hero-blob-warm {
      background: radial-gradient(circle at 32% 30%, #fffbf7 0%, #f7ebe0 50%, rgba(244, 162, 97, 0.12) 68%, transparent 78%);
    }

    .hero-blob-sand {
      background: radial-gradient(circle at 30% 40%, #fff9f4 0%, #f3e6d8 55%, transparent 76%);
      opacity: 0.14;
    }

    @keyframes drift {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      50% {
        transform: translate(20px, -30px) scale(1.05);
      }
    }

    .drift-1 {
      animation: drift 14s ease-in-out infinite;
    }

    .drift-2 {
      animation: drift 18s ease-in-out infinite reverse;
    }

    .drift-3 {
      animation: drift 22s ease-in-out infinite;
    }

    /* Subtle dotted background grid for atmospherics */
    .dot-grid {
      background-image: radial-gradient(rgba(14, 42, 56, 0.07) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    /* ——— Reveal on scroll ——— */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    .reveal.delay-1 {
      transition-delay: .08s;
    }

    .reveal.delay-2 {
      transition-delay: .16s;
    }

    .reveal.delay-3 {
      transition-delay: .24s;
    }

    .reveal.delay-4 {
      transition-delay: .32s;
    }

    .reveal.delay-5 {
      transition-delay: .40s;
    }

    .reveal.delay-6 {
      transition-delay: .48s;
    }

    .reveal.delay-7 {
      transition-delay: .56s;
    }

    /* ——— Buttons with subtle 3D ——— */
    .btn-primary {
      background: linear-gradient(180deg, #6DCFCF 0%, #5BBFBF 55%, #4AADAD 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 -2px 0 rgba(0, 0, 0, 0.10) inset,
        0 14px 28px -10px rgba(91, 191, 191, 0.55);
      transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, filter .25s;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      filter: saturate(1.05);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -2px 0 rgba(0, 0, 0, 0.10) inset,
        0 22px 40px -14px rgba(91, 191, 191, 0.70);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-ghost {
      transition: background-color .2s, color .2s, transform .25s;
    }

    .btn-ghost:hover {
      background: rgba(14, 42, 56, 0.06);
      transform: translateY(-1px);
    }

    /* ——— Card surfaces ——— */
    .card-3d {
      background: #ffffff;
      border: 1px solid rgba(14, 42, 56, 0.06);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(14, 42, 56, 0.04) inset,
        0 30px 50px -32px rgba(14, 42, 56, 0.22),
        0 8px 18px -12px rgba(14, 42, 56, 0.10);
      transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
    }

    .card-3d:hover {
      transform: translateY(-6px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 40px 70px -32px rgba(14, 42, 56, 0.28),
        0 14px 24px -12px rgba(14, 42, 56, 0.14);
    }

    /* ——— Header / brand image (official horizontal logo) ——— */
    .header-brand-img {
      height: 52px;
      width: auto;
      max-width: min(480px, calc(100vw - 11rem));
      display: block;
      object-fit: contain;
      object-position: left center;
      mix-blend-mode: multiply;
    }

    @media (min-width: 640px) {
      .header-brand-img {
        height: 60px;
        max-width: 560px;
      }
    }

    /* ——— Form ——— */
    .field {
      background: #fff;
      border: 1px solid rgba(14, 42, 56, 0.12);
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }

    .field:focus {
      outline: none;
      border-color: #5BBFBF;
      box-shadow: 0 0 0 4px rgba(91, 191, 191, 0.20);
    }

    .role-chip {
      cursor: pointer;
      user-select: none;
    }

    .role-chip>span {
      display: inline-flex;
      align-items: center;
      padding: 8px 14px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      color: #0E2A38;
      background: #fff;
      border: 1px solid rgba(14, 42, 56, 0.12);
      transition: all .2s;
    }

    .role-chip:hover>span {
      border-color: #5BBFBF;
      color: #5BBFBF;
    }

    .role-chip:has(input:checked)>span {
      background: linear-gradient(135deg, #5BBFBF, #8EC9C4);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 8px 18px -8px rgba(91, 191, 191, 0.6);
    }

    /* ——— Marquee for tags ——— */
    @keyframes marquee {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .marquee-track {
      animation: marquee 40s linear infinite;
    }

    /* Number-pill on workstream cards */
    .num-pill {
      background: linear-gradient(135deg, rgba(91, 191, 191, 0.12), rgba(142, 201, 196, 0.12));
      border: 1px solid rgba(91, 191, 191, 0.25);
    }

    /* nav active link */
    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 2px;
      background: linear-gradient(90deg, #5BBFBF, #8EC9C4);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
    }

    .nav-link:hover::after {
      transform: scaleX(1);
    }

    /* Section labels */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: 12px;
      font-weight: 600;
      color: #5BBFBF;
    }

    .eyebrow::before {
      content: '';
      width: 22px;
      height: 1px;
      background: currentColor;
      opacity: 0.7;
    }

    /* Subtle parallax helper */
    [data-parallax] {
      will-change: transform;
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .drift-1,
      .drift-2,
      .drift-3,
      .marquee-track {
        animation: none !important;
      }
    }

    /* ——— SOCIAL BUTTONS ——— */
    .social-btn {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      transition: color 0.2s ease, transform 0.2s ease;
      text-decoration: none;
    }

    .social-btn:hover {
      transform: translateY(-3px);
      color: #5BBFBF;
    }

    .social-btn svg {
      fill: currentColor;
    }

    /* ——— Responsive layout ——— */
    @media (max-width: 767px) {
      .header-brand-img {
        height: 40px;
        max-width: min(200px, calc(100vw - 8.5rem));
      }

      .orb {
        opacity: 0.1;
        filter: blur(48px);
      }

      [data-parallax] {
        transform: none !important;
      }

      .hero-visual {
        height: min(440px, 92vw) !important;
        max-width: 28rem;
        margin-inline: auto;
      }

      .hero-chip {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
      }

      .hero-chip .chip-icon {
        width: 2rem;
        height: 2rem;
      }

      .hero-chip .chip-icon i {
        width: 0.875rem;
        height: 0.875rem;
      }

      .theory-step {
        flex-wrap: wrap;
        row-gap: 0.25rem;
      }

      .theory-step .theory-arrow {
        display: none;
      }

      .about-collage img {
        height: 7rem;
      }

      .contact-email {
        word-break: break-all;
      }
    }

    @media (max-width: 1023px) {
      .founder-copy {
        margin-left: 0 !important;
        margin-top: 2.5rem;
      }

      .founder-name {
        flex-wrap: wrap;
        white-space: normal;
      }
    }

    #mobileNav[hidden] {
      display: none;
    }

    #mobileNav.is-open {
      display: block;
    }