/* GENERATED from design/canvas/Main.dc.html by design/port.py. Do not edit. */
/* ── Tokens ─────────────────────────────────────────────────────── */
    :root {
      --ground:#F4F1EA; --ink:#171B22; --accent:#2B49C4; --muted:#62666D;
      --rule:#E3DED3; --tint-accent:#E3E8F9; --error:#9E2B20;
      --scan:rgba(23,27,34,.20);

      /* type ramp: 1.25 modular, rem so browser zoom is respected */
      --fs-micro:.875rem;   /* 14 · eyebrow, mono meta, footer */
      --fs-label:1rem;      /* 16 · form labels, chips */
      --fs-body:1.1875rem;  /* 19 · body */
      --fs-lead:1.5rem;     /* 24 · hero supporting, button */
      --fs-h3:clamp(1.75rem, 1.25rem + 1.2vw, 1.875rem);      /* 28→30 */
      --fs-name:clamp(1.875rem, 1.3rem + 1.6vw, 2.3125rem);   /* 30→37 */
      --fs-h2:clamp(2.25rem, 1.4rem + 2.2vw, 2.875rem);       /* 36→46 */
      --fs-h1:clamp(2.625rem, 1.2rem + 4.4vw, 4.5rem);        /* 42→72 */
      --fs-mark:clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);       /* 28→40 wordmark */
      --sz-mark:clamp(2.375rem, 1.5rem + 2.4vw, 3.375rem);    /* 38→54 icon */

      --sans:Barlow, system-ui, sans-serif;
      --display:'Barlow Condensed', Barlow, sans-serif;
      --mono:'IBM Plex Mono', ui-monospace, monospace;

      /* spacing scale */
      --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
      --s6:3rem; --s7:4rem; --s8:6rem; --s9:8rem;
      --pad:clamp(1.75rem, 1rem + 5vw, 7.5rem);   /* 28 → 120 */
      --ease:cubic-bezier(.22,1,.36,1);
    }
    *,*::before,*::after { box-sizing:border-box; }
    [hidden] { display:none !important; }   /* beats inline display:flex */
    body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
           -webkit-font-smoothing:antialiased; font-kerning:normal; }

    /* ── Primitives ─────────────────────────────────────────────────── */
    .eyebrow { margin:0; font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
               letter-spacing:.15em; line-height:1.6; text-transform:uppercase; }
    .meta    { font-family:var(--mono); font-size:var(--fs-micro); font-weight:400;
               letter-spacing:.02em; line-height:1.6; color:var(--muted); }
    h1,h2,h3 { font-family:var(--display); font-weight:600; color:var(--ink);
               text-wrap:balance; margin:0; }
    h1 { font-size:var(--fs-h1);  line-height:1.04; letter-spacing:-.005em; max-width:22ch; }
    h2 { font-size:var(--fs-h2);  line-height:1.05; letter-spacing:-.005em; max-width:24ch; }
    h3 { font-size:var(--fs-h3);  line-height:1.08; max-width:34ch; }
    p  { text-wrap:pretty; }
    .body { margin:0; font-size:var(--fs-body); line-height:1.6; max-width:68ch; }
    .rule { height:2px; background:var(--ink); }
    .rule--accent { background:var(--accent); }
    .rule--hair { height:1px; background:var(--rule); }
    a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px;
        text-underline-offset:3px; transition:color .15s var(--ease); }
    a:hover { color:var(--ink); }
    :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

    .skip { position:absolute; left:var(--pad); top:-4rem; z-index:10; padding:var(--s2) var(--s3);
            background:var(--accent); color:var(--ground); font-size:var(--fs-label);
            text-decoration:none; transition:top .15s var(--ease); }
    .skip:focus { top:var(--s3); }

    section { padding-inline:var(--pad); }

    /* ── Hero ───────────────────────────────────────────────────────── */
    .hero { position:relative; padding:var(--s8) var(--pad) var(--s8);
            display:flex; flex-direction:column; align-items:flex-start; }
    .backdrop { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
    main, footer { position:relative; z-index:1; }
    .grid { position:absolute; inset:-48px; will-change:transform;
            background-image:repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 48px),
                             repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 48px); }
    .scan { position:absolute; top:0; bottom:0; left:-2px; width:1px; background:var(--scan); }
    @media (prefers-reduced-motion: no-preference) {
      /* transform, not background-position: compositor-only, no repaint */
      .grid { animation:drift 60s linear infinite; }
      .scan { animation:scan 20s linear infinite; }
    }
    @keyframes drift { from{transform:translate3d(0,0,0);} to{transform:translate3d(48px,48px,0);} }
    @keyframes scan  { from{transform:translateX(0);} to{transform:translateX(calc(100vw + 2px));} }

    .lockup { display:flex; align-items:center; gap:clamp(.75rem, .4rem + 1vw, 1.125rem); }
    .lockup svg { width:var(--sz-mark); height:var(--sz-mark); display:block; flex:none; }
    .wordmark { font-family:var(--display); font-weight:600; font-size:var(--fs-mark);
                line-height:1; letter-spacing:.005em; }
    .wordmark span { color:var(--accent); }
    .supporting { margin:var(--s5) 0 0; font-size:var(--fs-lead); line-height:1.5;
                  color:var(--muted); max-width:44ch; }

    /* ── Buttons ────────────────────────────────────────────────────── */
    .btn { display:inline-flex; align-items:center; justify-content:center;
           min-height:3.5rem; padding:var(--s3) var(--s6); border:0; background:var(--accent);
           color:var(--ground); font-family:var(--display); font-weight:600;
           font-size:var(--fs-lead); letter-spacing:.09em; text-transform:uppercase;
           text-decoration:none; cursor:pointer;
           transition:background .15s var(--ease), transform .15s var(--ease); }
    .btn:hover { background:var(--ink); color:var(--ground); }
    .btn:active { transform:translateY(1px); }
    .btn--block { width:100%; min-height:4.5rem; }

    /* ── People ─────────────────────────────────────────────────────── */
    .person { display:flex; align-items:flex-start; gap:clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
    .person > div { min-width:0; }
    .person img { width:clamp(8.5rem, 4rem + 9vw, 12.5rem); height:clamp(8.5rem, 4rem + 9vw, 12.5rem);
                  flex:none; display:block; object-fit:cover; background:var(--rule); }
    .chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
    .chip  { padding:.5rem .875rem; font-size:var(--fs-label); font-weight:500; line-height:1.2; }
    .chip--desk { background:var(--tint-accent); color:var(--accent); }
    .chip--brokerage { background:var(--rule); color:var(--ink); }

    /* ── Form ───────────────────────────────────────────────────────── */
    .field { display:flex; flex-direction:column; }
    .field > span { font-size:var(--fs-label); font-weight:500; line-height:1.3; color:var(--muted); }
    .field input { margin-top:var(--s3); width:100%; min-height:3rem; border:0;
                   border-bottom:1px solid var(--ink); background:transparent;
                   font-family:var(--sans); font-size:var(--fs-body); color:var(--ink);
                   padding:0 0 var(--s1); border-radius:0;
                   transition:border-color .15s var(--ease); }
    .field input:hover { border-bottom-color:var(--accent); }
    .field .err { display:none; margin:var(--s1) 0 0; font-size:var(--fs-label);
                  line-height:1.4; color:var(--error); }
    /* :user-invalid fires only after the visitor has interacted, never on load */
    .field input:user-invalid { border-bottom-color:var(--error); border-bottom-width:2px; }
    .field input:user-invalid ~ .err { display:block; }



    .pair { display:flex; flex-direction:column; gap:var(--s6); }
    .pair__hint { margin:0; font-size:var(--fs-label); line-height:1.5; color:var(--muted); }
    .field input[aria-invalid="true"] { border-bottom-color:var(--error); border-bottom-width:2px; }
    .err--group { display:block; margin:0; font-size:var(--fs-label); line-height:1.4; color:var(--error); }
    .err--group[hidden] { display:none; }

    .consent { display:flex; align-items:flex-start; gap:var(--s3); cursor:pointer; }
    .consent input { appearance:none; -webkit-appearance:none; flex:none; width:1.375rem; height:1.375rem;
                     margin:.15em 0 0; border:2px solid var(--ink); background:transparent;
                     border-radius:0; cursor:pointer; transition:background .15s var(--ease); }
    .consent input:checked { background:var(--accent) no-repeat center / .8rem
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F4F1EA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
                            border-color:var(--accent); }
    .consent span { font-size:var(--fs-label); line-height:1.5; color:var(--muted); max-width:58ch; }

    /* Turnstile paints itself here in production; the dashed box is what the
       designer sees while the container is still empty. */
    .cf-turnstile:empty { display:flex; align-items:center; justify-content:center;
                          width:300px; max-width:100%; min-height:65px;
                          border:1px dashed var(--rule); }
    .cf-turnstile:empty::after { content:"Cloudflare Turnstile"; font-family:var(--mono);
                                 font-size:var(--fs-micro); letter-spacing:.02em; color:var(--muted); }

    .form-status { margin:0; padding:var(--s3) var(--s4); font-size:var(--fs-body); line-height:1.5;
                   max-width:58ch; }
    .form-status[hidden] { display:none; }
    .form-status[data-state="ok"]    { background:var(--tint-accent); color:var(--accent); }
    .form-status[data-state="error"] { background:#F6E5E2; color:var(--error); }
    .btn[disabled] { opacity:.55; cursor:progress; }
    .btn[disabled]:hover { background:var(--accent); }

    /* ── Footer ─────────────────────────────────────────────────────── */
    footer { padding:var(--s6) var(--pad) var(--s7); display:flex; flex-wrap:wrap;
             gap:var(--s4) var(--s6); justify-content:space-between; align-items:flex-start; }
    .footer__id { display:flex; flex-direction:column; gap:var(--s1); }
    .footer__links { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
                     font-size:var(--fs-label); line-height:1.4; }

    /* ── Narrow ─────────────────────────────────────────────────────── */
    @media (max-width: 700px) {
      .person { flex-direction:column; gap:var(--s4); }
      h1,h2,h3,.body,.supporting { max-width:none; }
    }