:root{--ui:var(--font-ui);--serif:var(--font-serif);--mono:var(--font-mono);--r:var(--r-md);}

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--ui);
      font-size: 15px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    /* subtle top glow, confined to the hero so it never seams into the page below */
    .hero {
      position: relative
    }

    .hero::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -140px;
      transform: translateX(-50%);
      width: min(900px, 120vw);
      height: 520px;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%)
    }

    .hero>* {
      position: relative;
      z-index: 1
    }

    a {
      color: inherit;
      text-decoration: none
    }

    ::selection {
      background: color-mix(in srgb, var(--accent) 34%, transparent);
      color: var(--text)
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px
    }

    /* ---------- masthead ---------- */
    header.mast {
      position: sticky;
      top: 0;
      z-index: 20;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 15px 26px;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 90%, transparent);
      backdrop-filter: blur(8px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0
    }

    .brand .mark {
      color: var(--accent);
      width: 22px;
      height: 22px;
      flex: 0 0 auto
    }

    .brand h1 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -.01em;
      margin: 0;
      white-space: nowrap
    }

    .brand .co {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--faint);
      text-transform: uppercase;
      letter-spacing: .16em;
      white-space: nowrap;
      border: 1px solid var(--line);
      border-radius: 100px;
      padding: 3px 10px
    }

    .spacer {
      flex: 1
    }

    .mast-link {
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: .04em;
      color: var(--muted);
      padding: 8px 15px;
      border: 1px solid var(--line);
      border-radius: 100px;
      transition: .16s;
      white-space: nowrap
    }

    .mast-link:hover {
      color: var(--text);
      border-color: var(--accent);
      background: var(--accent-soft)
    }

    /* ---------- layout ---------- */
    main {
      flex: 1 1 auto;
      display: flex;
      justify-content: center;
      padding: 0 26px
    }

    .wrap {
      width: 100%;
      max-width: 900px
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 18px
    }

    /* ---------- hero / mission ---------- */
    .hero {
      padding: 84px 0 60px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center
    }

    .hero h1, .hero h2 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(40px, 7vw, 78px);
      line-height: 1.02;
      letter-spacing: -.025em;
      margin: 0 0 26px;
      max-width: 16ch
    }

    .hero h1 em, .hero h2 em {
      font-style: italic;
      color: var(--accent)
    }

    .hero .lede {
      font-size: clamp(16px, 1.7vw, 19px);
      color: var(--muted);
      max-width: 56ch;
      margin: 0 auto 34px
    }

    .hero .lede b {
      color: var(--text);
      font-weight: 500
    }

    .cta-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--ui);
      font-weight: 600;
      font-size: 15px;
      color: var(--on-highlight);
      background: var(--accent);
      border: 1px solid var(--accent);
      border-radius: 100px;
      padding: 14px 26px;
      transition: .16s;
      white-space: nowrap
    }

    .btn .arr {
      transition: transform .16s ease
    }

    .btn:hover {
      background: var(--accent-deep);
      border-color: var(--accent-deep);
      box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--accent) 75%, transparent)
    }

    .btn:hover .arr {
      transform: translate(3px, -3px)
    }

    .btn.ghost {
      color: var(--text);
      background: transparent;
      border-color: var(--line)
    }

    .btn.ghost:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
      box-shadow: none
    }

    /* ---------- rule ---------- */
    .rule {
      height: 1px;
      background: var(--line);
      margin: 6px 0
    }

    /* ---------- what we build ---------- */
    .about {
      padding: 58px 0 20px
    }

    .about .head {
      max-width: 60ch;
      margin: 0 auto 62px;
      text-align: center
    }

    .about h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(24px, 3.4vw, 34px);
      letter-spacing: -.015em;
      margin: 0 0 12px
    }

    .about h3 em {
      font-style: italic;
      color: var(--accent)
    }

    .about p.intro {
      margin: 0;
      color: var(--muted);
      font-size: 16px
    }

    .about p.intro b {
      color: var(--text);
      font-weight: 500
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 8px
    }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--r);
      background: var(--surface);
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .card .k {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .card h4 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 19px;
      letter-spacing: -.01em;
      margin: 0
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55
    }

    /* ---------- product band ---------- */
    .product {
      margin: 56px 0 8px
    }

    .band {
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%), var(--surface)
    }

    .band .inner {
      padding: 38px 34px;
      display: flex;
      gap: 30px;
      align-items: center;
      flex-wrap: wrap
    }

    .band .copy {
      flex: 1 1 340px;
      min-width: 0
    }

    .band .eyebrow {
      margin-bottom: 12px
    }

    .band h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(24px, 3.2vw, 32px);
      letter-spacing: -.015em;
      margin: 0 0 12px
    }

    .band h3 em {
      font-style: italic;
      color: var(--accent)
    }

    .band p {
      margin: 0;
      color: var(--muted);
      font-size: 15.5px;
      max-width: 50ch
    }

    .band .cta {
      flex: 0 0 auto
    }

    .band .note {
      font-family: var(--mono);
      font-size: 10.5px;
      color: var(--faint);
      letter-spacing: .03em;
      margin: 14px 0 0
    }

    /* ---------- investor login ---------- */
    .investors {
      margin: 24px 0 8px
    }

    .investors .inner {
      padding: 34px 34px;
      display: flex;
      gap: 30px;
      align-items: center;
      flex-wrap: wrap
    }

    .login {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 260px
    }

    .login label {
      font-family: var(--mono);
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--faint)
    }

    .login input {
      font-family: var(--ui);
      font-size: 14.5px;
      color: var(--text);
      background: var(--surface-2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 14px;
      width: 100%;
      transition: border-color .16s
    }

    .login input:focus {
      outline: none;
      border-color: var(--accent)
    }

    .login .btn {
      justify-content: center;
      margin-top: 4px
    }

    .login .err {
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--amber);
      letter-spacing: .03em;
      min-height: 16px;
      margin: 0
    }

    /* ---------- footer ---------- */
    footer {
      flex: 0 0 auto;
      border-top: 1px solid var(--line);
      margin-top: 64px;
      padding: 26px 26px;
      display: flex;
      justify-content: center
    }

    .foot {
      width: 100%;
      max-width: 900px;
      display: flex;
      gap: 16px;
      align-items: baseline;
      flex-wrap: wrap;
      font-size: 13px;
      color: var(--faint)
    }

    .foot .dot {
      color: var(--line)
    }

    .foot b {
      color: var(--muted);
      font-weight: 500
    }

    .foot a {
      color: var(--muted)
    }

    .foot a:hover {
      color: var(--accent)
    }

    .foot .spacer {
      flex: 1
    }

    /* ---------- responsive ---------- */
    @media (max-width:720px) {
      .hero {
        padding: 60px 0 44px
      }

      .grid {
        grid-template-columns: 1fr
      }

      .band .inner {
        padding: 28px 22px
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      .btn,
      .btn .arr {
        transition: none
      }
    }
  
/* ---- site-wide nav, routes and about page ---- */
a.brand { text-decoration: none; color: inherit }
.brand .name { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -.01em }
.mast-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap }
.mast-nav a { font-size: 14px; color: var(--muted); font-weight: 500 }
.mast-nav a:hover, .mast-nav a[aria-current] { color: var(--text) }

.routes { padding: 8px 0 28px }
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px }
.route { display: flex; flex-direction: column; gap: 10px; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s, transform .15s, background .15s }
.route:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-2px) }
.route .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) }
.route h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 34px; letter-spacing: -.01em }
.route h3 em { color: var(--accent); font-style: italic }
.route p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; flex: 1 }
.route .go { font-weight: 600; color: var(--accent); font-size: 14px }
.routes .more { text-align: center; color: var(--muted); margin: 26px 0 0 }
.routes .more a { color: var(--accent) }

.principles { display: grid; gap: 16px; padding: 12px 0 40px }
.principle { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r) }
.principle .num { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); font-style: italic }
.principle h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -.01em }
.principle p { margin: 0 0 10px; color: var(--muted); line-height: 1.65; max-width: 62ch }
.band .cta { display: flex; gap: 12px; flex-wrap: wrap }

@media (max-width: 720px) {
  .route-grid { grid-template-columns: 1fr }
  .principle { grid-template-columns: 1fr; gap: 8px }
  .mast-nav { gap: 14px }
  .brand .co { display: none }
}

/* ---- contact ---- */
.contact { padding: 0 0 56px }
.contact-form { max-width: 560px; margin: 0 auto; display: grid; gap: 6px }
.contact-form select, .contact-form textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px }
.contact-form textarea { resize: vertical }
.contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px }
.contact-form .btn { margin-top: 12px; justify-self: start }
.contact-form .note { color: var(--faint); font-size: 13px; margin: 6px 0 0 }
.hero .lede a.mail { color: var(--accent); border-bottom: 1px solid var(--accent-soft) }

/* ---- products / services groups ---- */
.routes .group { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.routes + .routes { padding-top: 12px }
.route-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.route-logo { display: block; height: 44px; width: auto; align-self: flex-start; margin: 2px 0 4px }
.route h3.wordmark, .route h3 { min-height: 44px; display: flex; align-items: center }
.route .btn { align-self: flex-start; margin-top: 8px }
.routes .route-grid > .route:only-child { max-width: calc(50% - 9px) }
@media (max-width: 720px) { .routes .route-grid > .route:only-child { max-width: none } }

.route-logo.on-light { display: none }
[data-theme="light"] .route-logo.on-light { display: block }
[data-theme="light"] .route-logo.on-dark { display: none }