:root {
      --navy: #07133f;
      --navy-2: #03102f;
      --blue: #0d53ff;
      --blue-2: #2787ff;
      --cyan: #23d5ff;
      --text: #0b173f;
      --muted: #3f4c67;
      --line: #d8e1f4;
      --white: #ffffff;
      --soft: #f6f9ff;
      --navy-ui: #102958;
      --heading: #0a1b63;
      --link: #084cda;
      --sky: #a8d6ff;
      --sky-2: #9dd7ff;
      --ice: #e1f3ff;
      --line-on-navy: #638ac0;
      --synapse: #01eafc;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background: var(--white);
    }

    .page {
      width: min(1180px, calc(100% - 44px));
      margin: 0 auto;
    }

    .hero {
      position: relative;
      min-height: 860px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 0%, rgba(19,102,255,.42), transparent 38%),
        radial-gradient(circle at 80% 45%, rgba(0,188,255,.25), transparent 34%),
        linear-gradient(180deg, #041341 0%, #020b25 100%);
      color: #fff;
    }

    #synapseCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(90deg, rgba(2,9,31,.42) 0%, rgba(2,9,31,.14) 52%, rgba(2,9,31,.08) 100%),
        linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.22) 100%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 3;
      padding: 78px 0 72px;
    }

    .logo-wrap {
      display: flex;
      margin-bottom: 34px;
    }

    .logo {
      width: min(500px, 68vw);
      display: block;
      filter:
        drop-shadow(0 0 12px rgba(43,130,255,.65))
        drop-shadow(0 0 28px rgba(13,83,255,.34));
    }

    .hero-copy {
      width: min(720px, 100%);
      margin-top: 28px;
    }

    h1 {
      margin: 0;
      font-size: clamp(54px, 6.8vw, 94px);
      line-height: .93;
      letter-spacing: -0.05em;
      font-weight: 900;
      text-transform: uppercase;
      text-shadow: 0 8px 30px rgba(0,0,0,.3);
    }

    h1 .line {
      display: block;
    }

    h1 .accent {
      color: #a8d6ff;
    }

    .hero-subhead {
      margin: 26px 0 0;
      max-width: 720px;
      font-size: clamp(22px, 2.6vw, 34px);
      line-height: 1.12;
      font-weight: 800;
      color: #9dd7ff;
      letter-spacing: -0.025em;
    }

    .hero-body {
      margin-top: 28px;
      max-width: 720px;
    }

    .hero-body p {
      margin: 0 0 24px;
      font-size: 18px;
      line-height: 1.55;
      color: #f1f6ff;
      text-shadow: 0 2px 12px rgba(0,0,0,.25);
    }

    .services {
      background: #e1f3ff;
      padding: 64px 0 34px;
    }

    .services h2 {
      margin: 0;
      text-align: center;
      font-size: clamp(38px, 4.6vw, 58px);
      line-height: 1;
      letter-spacing: -0.04em;
      color: #0a1b63;
      font-weight: 900;
    }

    .services h2::after {
      content: "";
      display: block;
      width: 72px;
      height: 5px;
      margin: 18px auto 0;
      border-radius: 99px;
      background: var(--blue);
    }

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

    .solution {
      padding: 10px 44px 34px;
      text-align: center;
      min-height: 390px;
    }

    .solution + .solution {
      border-left: 1px solid var(--line);
    }

    .icon-circle {
      width: 112px;
      height: 112px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: #FFF;
      display: grid;
      place-items: center;
    }

    .icon-circle svg {
      width: 48px;
      height: 48px;
      stroke: var(--blue);
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .solution h3 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.08;
      color: var(--blue);
      font-weight: 900;
    }

    .solution p {
      margin: 0 auto;
      max-width: 290px;
      font-size: 18px;
      line-height: 1.5;
      color: #0d1534;
    }

    .closing {
      position: relative;
      margin-top: 8px;
      padding: 44px 0 70px;
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 34px;
      align-items: center;
    }

    .closing::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0, var(--line) 12%, var(--line) 88%, transparent 100%);
    }

    .closing::after {
      content: "";
      position: absolute;
      top: -4px;
      left: 50%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--blue);
      transform: translateX(-50%);
      box-shadow: 0 0 0 6px #fff;
    }

    .handshake {
      width: 100px;
      height: 100px;
      justify-self: center;
    }

    .handshake svg {
      width: 100%;
      height: 100%;
      stroke: var(--blue);
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .closing-copy {
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.08;
      font-weight: 900;
      color: #07133f;
    }

    .closing-copy span {
      display: block;
      margin-top: 6px;
      color: var(--blue);
    }

    footer {
      padding: 32px 0;
      font-size: 14px;
      line-height: 1.7;
      color: #9dd7ff;
      background: var(--navy);
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      flex-wrap: wrap;
    }

    .footer-id {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .footer-id p { margin: 0; }

    .footer-mark {
      display: inline-block;
      color: #638ac0;
      transition: color .15s ease;
    }

    .footer-mark:hover,
    .footer-mark:focus-visible { color: #9dd7ff; }

    .footer-mark svg {
      display: block;
      width: 180px;
      height: auto;
      overflow: visible;
    }

    .footer-links {
      display: flex;
      gap: 18px;
    }

    .footer-links a {
      color: inherit;
      text-decoration: none;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--white);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    footer a:focus-visible { outline: 2px solid #a8d6ff; outline-offset: 3px; }

    @media (max-width: 900px) {
      .hero {
        min-height: 780px;
      }

      .hero-inner {
        padding-top: 52px;
      }

      .logo {
        width: min(460px, 78vw);
      }

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

      .solution {
        min-height: auto;
        padding: 30px 20px 38px;
      }

      .solution + .solution {
        border-left: none;
        border-top: 1px solid var(--line);
      }

      .closing {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .closing-copy {
        max-width: 760px;
        margin: 0 auto;
      }
    }

    @media (max-width: 560px) {
      .page {
        width: min(100% - 28px, 1180px);
      }

      .hero {
        min-height: 720px;
      }

      .hero-inner {
        padding: 34px 0 46px;
      }

      .logo-wrap {
        margin-bottom: 30px;
      }

      h1 {
        font-size: 48px;
      }

      .hero-subhead {
        font-size: 25px;
      }

      .hero-body p {
        font-size: 16px;
      }

      .services {
        padding-top: 48px;
      }

      .services h2 {
        font-size: 38px;
      }

      .solution h3 {
        font-size: 24px;
      }

      .solution p {
        font-size: 17px;
      }
    }
  
    .hero-body-outside {
      background: #ffffff;
      padding: 42px 0 18px;
    }

    .hero-body-outside .hero-body {
      margin-top: 0;
    }

    .hero-body-outside .hero-body p {
      color: var(--text);
      text-shadow: none;
    }

  
/* Shared site structure and supporting pages. */
a { color: #084cda; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
p, li { line-height: 1.7; }
.site-header { background: #03102f; color: white; border-bottom: 1px solid #203366; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.brand img { width: 105px; height: auto; display: block; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 26px; }
.site-header nav a { color: #fff; text-decoration: none; font-size: 16px; padding-block: 12px; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: #a8d6ff; }
.skip-link { position: absolute; top: -100px; left: 12px; z-index: 10; background: white; padding: 14px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #2787ff; outline-offset: 5px; }
.logo { height: auto; }
.intro-copy { padding: 32px 0; font-size: 18px; }
.hero { min-height: 0; }
.hero-inner { padding-block: 54px 70px; }
.hero .logo { width: min(273px, 49vw); }
.hero h1 { font-size: clamp(48px, 6.8vw, 88px); }
.hero-subhead { max-width: 710px; }
.button { display: inline-block; padding: 14px 22px; color: white; background: #0d53ff; border: 1px solid #0d53ff; border-radius: 4px; text-decoration: none; font-weight: 700; }
.button:hover { background: #073cbf; color: white; }
.button.secondary { background: white; color: #084cda; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 28px; }
.document { max-width: 860px; padding-block: 66px 88px; min-height: 65vh; }
.document.wide { max-width: 1180px; }
.document h1 { font-size: clamp(36px, 5.5vw, 64px); text-transform: none; text-shadow: none; line-height: 1.06; letter-spacing: -.04em; }
.document h2 { font-size: 27px; margin-top: 38px; line-height: 1.2; }
.document h3 { font-size: 22px; }
.document p, .document li { font-size: 18px; }
.document .lead { font-size: 22px; color: #3f4c67; max-width: 760px; line-height: 1.55; margin-block: 26px 32px; }
.eyebrow { color: #084cda; text-transform: uppercase; letter-spacing: .12em; font-size: 14px !important; font-weight: bold; margin-top: 0; }
.notice { padding: 22px; background: #edf5ff; border-left: 4px solid #0d53ff; line-height: 1.65; margin-block: 28px; }
.resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-block: 38px; }
.resource-grid article { padding-top: 22px; border-top: 2px solid #0d53ff; }
.resource-grid h2 { margin-top: 8px; }
.resource-grid p { font-size: 17px; }
.resources-teaser { background: #f6f9ff; padding-block: 58px; }
.resources-teaser h2 { font-size: clamp(30px,4vw,46px); max-width: 700px; margin-block: 12px; }
.resources-teaser p { max-width: 720px; font-size: 18px; }
.footer-links { flex-wrap: wrap; align-content: flex-start; }
footer nav a { padding-block: 8px; }
.muted { color: #3f4c67; }
code { overflow-wrap: anywhere; font-size: .9em; background: #edf5ff; padding: 2px 5px; }
.stat-record { border-top: 1px solid #d8e1f4; padding-block: 22px; }
@media(max-width:700px) { .resource-grid { grid-template-columns: 1fr; gap: 16px; } .document { padding-block: 42px 56px; } .nav-row { gap: 14px; } .site-header nav { gap: 14px; } .brand img { width: 78px; } .site-header nav a { font-size: 14px; } .hero-inner { padding-block: 38px 52px; } .footer-row { flex-direction: column; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .footer-mark { transition:none; } }

/* The homepage uses its large hero logo; keep navigation aligned right. */
.home-header .nav-row { justify-content: flex-end; min-height: 64px; }
.contact-form { background: #f6f9ff; padding: clamp(22px,4vw,38px); border: 1px solid #d8e1f4; border-radius: 8px; }
.contact-form label { display:block; font-size:18px; font-weight:bold; margin-bottom:8px; }
.contact-form input, .contact-form textarea { width:100%; font:inherit; font-size:18px; padding:14px; border:1px solid #8193b5; border-radius:4px; color:#07133f; background:#fff; margin-bottom:22px; }
.contact-form textarea { resize:vertical; }
.contact-form .field-note, .field-note { font-size:14px; line-height:1.6; color:#3f4c67; }
.contact-form textarea + .field-note { margin-top:-12px; }
.contact-steps { display:grid; grid-template-columns:repeat(3,1fr); list-style:none; padding:0; gap:24px; margin:32px 0; }
.contact-steps li { font-size:16px; border-top:2px solid #0d53ff; padding-top:12px; }
.contact-steps strong { display:block; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
#contact-status, #verify-status { font-weight:700; }
@media(max-width:600px) { .contact-steps { grid-template-columns:1fr; gap:12px; } }

/* Homepage navigation floats over the hero; the drawer slides horizontally from the right. */
.home-menu-close:hover { background:#123779; }
.home-menu { position:fixed; inset:0 0 0 auto; box-sizing:border-box; margin:0; width:min(420px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; padding:32px; border:0; border-left:1px solid #2b467a; color:white; background:linear-gradient(160deg,#0a2055,#020b25); overflow-y:auto; box-shadow:-16px 0 60px #020b2540; }
.home-menu[open] { animation:menu-enter 280ms cubic-bezier(.2,.7,.2,1) both; }
.home-menu::backdrop { background:#020b2599; animation:menu-backdrop-enter 280ms ease both; }
.home-menu.is-closing { animation:menu-exit 240ms ease both; }
.home-menu.is-closing::backdrop { animation:menu-backdrop-exit 240ms ease both; }
.home-menu-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:48px; }
.home-menu h2 { margin:0; font-size:18px; font-weight:700; color:#a8d6ff; }
.home-menu-close { display:grid; place-items:center; flex-shrink:0; width:46px; height:46px; padding:0; border:1px solid #638ac0; border-radius:8px; background:transparent; color:#fff; }
.home-menu nav { display:flex; flex-direction:column; }
.home-menu nav a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:23px 0; border-bottom:1px solid #2b467a; font-size:clamp(24px,5vw,32px); font-weight:700; text-decoration:none; color:#fff; }
.home-menu nav a:hover { color:#a8d6ff; }
.home-menu nav a span { font-size:24px; color:#23d5ff; }
.home-menu-fallback { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:22px; padding:18px; background:#03102f; }
.home-menu-fallback a { color:white; }
@keyframes menu-enter { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes menu-exit { from { transform:translateX(0); } to { transform:translateX(100%); } }
@keyframes menu-backdrop-enter { from { opacity:0; } to { opacity:1; } }
@keyframes menu-backdrop-exit { from { opacity:1; } to { opacity:0; } }
@media(max-width:560px) { .home-menu { padding:24px; } }
@media(prefers-reduced-motion:reduce) { .home-menu[open], .home-menu.is-closing, .home-menu::backdrop, .home-menu.is-closing::backdrop { animation:none; } }

/* Leave room for the shared floating menu on interior pages. */
.document { padding-top: 146px; }
.home-menu nav a[aria-current="page"] { color: #a8d6ff; }
/* Branding appears inside the shared navigation drawer. */
.sidebar-logo { display:block; width:min(180px,45vw); }
.sidebar-logo img { display:block; width:100%; height:auto; }



/* Header (design system): logo left, page pill and menu right, fixed across one bar. */
.zv-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;box-sizing:border-box;height:98px;padding:22px 22px 22px 32px;transition:background .25s ease,height .25s ease,box-shadow .25s ease}
.zv-header.is-scrolled,.zv-header--solid{background:rgba(7,19,63,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-on-navy),0 4px 24px rgba(2,11,37,.2)}
.zv-header.is-scrolled{height:76px;padding-top:11px;padding-bottom:11px}
.zv-header__logo{display:block;flex:none;line-height:0;border-radius:4px}
.zv-header__logo img{display:block;width:170px;height:auto;transition:width .25s ease}
.zv-header.is-scrolled .zv-header__logo img{width:140px}
.zv-header__logo:focus-visible{outline:2px solid var(--sky);outline-offset:6px}
.zv-header__pill{display:flex;align-items:center;height:54px;border-radius:999px;background:var(--navy);border:1px solid var(--line-on-navy);overflow:hidden;box-shadow:0 4px 24px rgba(2,11,37,.2)}
.zv-header__crumb{display:flex;align-items:center;gap:8px;height:54px;padding:0 20px;font-size:14px;color:var(--white);white-space:nowrap}
.zv-header__crumb a{color:var(--sky-2);text-decoration:none}
.zv-header__crumb a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.zv-header__crumb span[aria-hidden]{color:var(--line-on-navy)}
.zv-header__menu{width:54px;height:54px;padding:0;border:0;border-left:1px solid var(--line-on-navy);background:var(--navy-ui);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer}
.zv-header__menu[hidden]{display:none}
.zv-header__menu:hover{background:#123779}
.zv-header__menu:focus-visible,.zv-header__crumb a:focus-visible{outline:2px solid var(--sky);outline-offset:-4px}
@media (max-width:560px){.zv-header{padding-left:18px;padding-right:14px}.zv-header__logo img,.zv-header.is-scrolled .zv-header__logo img{width:124px}.zv-header__crumb{display:none}.zv-header__menu{border-left:0}}
@media (prefers-reduced-motion:reduce){.zv-header,.zv-header__logo img{transition:none}}
/* The header carries the logo, so the hero doesn't repeat it; start hero copy below the bar. */
.hero-inner { padding-top: 120px; }
@media(max-width:560px) { .hero-inner { padding-top: 96px; } }
/* Footer stacks on narrow screens; keep everything left-aligned. */
@media(max-width:700px) { .footer-row { align-items:flex-start; } .footer-links { justify-content:flex-start; } }

/* Home hero: LogoMotion (Cut A) sits top-left where the header logo would be.
   The stage is 16:9 (viewBox -80 -97 540 304); the mark+pill span x -20..400, y -50..172,
   so pull the stage by those insets to line the mark up with the header's padding. */
.hero .hero-logo { --w:min(500px,92vw); --x:32px; --y:22px; position:relative; z-index:3; width:var(--w);
  margin:calc(var(--y) - var(--w) * .0873) 0 calc(var(--w) * -.0652) calc(var(--x) - var(--w) * .111); }
.hero .hero-logo > img { display:block; width:78%; height:auto; margin:15% 0 0 11%; }
.hero .hero-logo.zv-lm { background:transparent; }
.hero-logo .zv-lm__flash { background:radial-gradient(closest-side,rgba(207,238,255,.9),rgba(207,238,255,0)); }
.hero .hero-logo + .hero-inner { padding-top:28px; }
.hero-copy { margin-top:0; }
@media(max-width:560px) { .hero .hero-logo { --w:min(380px,96vw); --x:18px; } .hero .hero-logo + .hero-inner { padding-top:20px; } }
/* Header logo on home: hidden until the scrolling bar has covered the animated one, so they never overlap. */
.zv-header--motion .zv-header__logo { opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s; }
.zv-header--motion.show-logo .zv-header__logo { opacity:1; visibility:visible; transform:none; transition:opacity .3s ease,transform .3s ease,visibility 0s; }
@media (prefers-reduced-motion:reduce) { .zv-header--motion .zv-header__logo { transition:none; transform:none; } }