:root{
    --bg:#fbfaf8; --panel:#ffffff; --text:#171715; --muted:#5f5d57;
    --accent:#8a5626; --accent-rgb:138,86,38; --accent-soft:#f4ede4; --border:#e6e2da;
    --shadow:0 1px 2px rgba(20,18,14,.05);
    --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --maxw: 68rem;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0d0d0b; --panel:#15150f; --text:#eceae5; --muted:#9b978e;
      --accent:#cf9a5f; --accent-rgb:207,154,95; --accent-soft:#1e1811; --border:#262520; --shadow:none;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0d0d0b; --panel:#15150f; --text:#eceae5; --muted:#9b978e;
    --accent:#cf9a5f; --accent-rgb:207,154,95; --accent-soft:#1e1811; --border:#262520; --shadow:none;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.028;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.75rem; position:relative}
  a{color:inherit}
  a:focus-visible{outline:2px solid var(--accent); outline-offset:5px; border-radius:2px}
  .skip-link{position:fixed; top:1rem; left:1rem; padding:.7rem 1rem; background:var(--text); color:var(--bg); z-index:200; transform:translateY(-200%)}
  .skip-link:focus{transform:none}
  main:focus{outline:none}
  h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.012em; line-height:1.2; margin:0}
  section,.hero{scroll-margin-top:5rem}

  /* ---------- header ---------- */
  header{
    border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(180%) blur(12px);
  }
  /* .bar shares its element with .wrap and, being later, wins the padding shorthand — it must
     restate the horizontal gutter or the header loses it and touches the screen edges. */
  .bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.75rem}
  .brand{display:flex; align-items:center; gap:.65rem; text-decoration:none}
  .brand svg{display:block; flex:none}
  .brand span{font-family:var(--serif); font-size:1.22rem; font-weight:600; letter-spacing:.055em}
  nav{display:flex; gap:1.7rem; font-size:.93rem}
  nav a{color:var(--muted); text-decoration:none; position:relative; transition:color .18s; white-space:nowrap}
  nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--accent); transition:right .28s cubic-bezier(.4,0,.2,1)}
  nav a:hover{color:var(--accent)}
  nav a:hover::after{right:0}
  .nav-min{display:none}
  @media (max-width:820px){ nav{gap:1.15rem; font-size:.88rem} }
  @media (max-width:760px){
    nav{display:none}
    .nav-min{
      display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; text-decoration:none; color:var(--text);
      border:1px solid var(--border); border-radius:5px; padding:.45rem .85rem; white-space:nowrap;
    }
    .nav-min:hover{border-color:var(--accent); color:var(--accent)}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; padding:4.75rem 0 3.5rem; border-bottom:1px solid var(--border); overflow:hidden}
  .hexdump{
    position:absolute; inset:0; pointer-events:none; user-select:none; overflow:hidden;
    font-family:var(--mono); font-size:12.5px; line-height:1.72; color:var(--text);
    opacity:.03; white-space:pre; padding:1.4rem 0 0 1rem;
    -webkit-mask-image:linear-gradient(105deg, transparent 42%, #000 78%, transparent 99%);
    mask-image:linear-gradient(105deg, transparent 42%, #000 78%, transparent 99%);
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hexdump{opacity:.05; color:var(--accent)} }
  :root[data-theme="dark"] .hexdump{opacity:.05; color:var(--accent)}
  @media (max-width:760px){ .hexdump{opacity:.022} :root[data-theme="dark"] .hexdump{opacity:.032} }

  /* One stretched SVG: the arc and its marker must share a single transform. */
  .traj{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
  .traj path{fill:none; stroke:var(--accent); stroke-width:1.15; opacity:.5}
  .traj .arc{animation:draw 2.6s cubic-bezier(.32,.72,.3,1) .35s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes pop{to{opacity:1}}
  @keyframes ring{0%{opacity:.6; inset:-2px} 100%{opacity:0; inset:-19px}}
  .impact{
    display:none; position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
    background:var(--accent); opacity:0; animation:pop .7s ease-out 2.5s forwards; pointer-events:none; z-index:1;
  }
  .impact::after{content:""; position:absolute; inset:-2px; border-radius:50%; border:1px solid var(--accent); opacity:0; animation:ring 1.5s ease-out 2.6s forwards}
  .hero .wrap{z-index:2}
  .trajectory-ready .impact{display:block}
  .hero h1{font-size:clamp(2.15rem, 4.6vw, 3.4rem); max-width:19ch; text-wrap:balance}
  .hero-sub{font-size:clamp(1.0625rem, 1.7vw, 1.14rem); color:var(--muted); max-width:57ch; margin:1.4rem 0 0}
  .hero .hero-label{color:var(--accent); margin-bottom:1.4rem}
  .hero-caption{margin:1.6rem 0 0; color:var(--muted); font-size:.875rem}
  .cta{margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
  .btn{
    display:inline-block; background:var(--text); color:var(--bg); text-decoration:none;
    padding:.74rem 1.45rem; border-radius:6px; font-size:.95rem; font-weight:500;
    border:1px solid var(--text); transition:transform .16s, opacity .16s;
  }
  .btn:hover{opacity:.87; transform:translateY(-1px)}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent); opacity:1}
  .scale{
    position:absolute; left:0; right:0; bottom:0; height:14px; z-index:2;
    background-image:repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 34px);
    -webkit-mask-image:linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 22%, #000 78%, transparent);
  }
  @media (max-width:760px){
    .hero{padding:3.5rem 0 3rem}
    /* Stretched viewBox collapses the arc into a near-vertical line through the copy at this width. */
    .traj,.impact,.trajectory-ready .impact{display:none}
  }

  /* ---------- leadership ---------- */
  .leadership{background:var(--accent-soft)}
  .leadership-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:3.5rem; align-items:start}
  .leadership h2{font-size:clamp(1.65rem,2.8vw,2.1rem)}
  .role{margin:.65rem 0 0; font-size:1rem; color:var(--accent)}
  .bio{margin:0; max-width:64ch; color:var(--muted)}
  @media (max-width:760px){ .leadership-layout{grid-template-columns:1fr; gap:1.5rem} }

  /* ---------- sections ---------- */
  section{padding:3.75rem 0; border-bottom:1px solid var(--border)}
  section.leadership{padding:2.75rem 0}
  @media (max-width:760px){ section{padding:3rem 0} }
  .lead{font-size:1.08rem; color:var(--muted); max-width:62ch; margin:1.3rem 0 0}
  .lead strong{color:var(--text); font-weight:600}
  .sec-head{font-size:clamp(1.6rem,2.8vw,2rem); max-width:29ch; text-wrap:balance}
  .label{
    font-family:var(--mono); font-size:.875rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
  }
  .label::before{content:""; width:1.4rem; height:1px; background:var(--accent); opacity:.55}

  /* ---------- research record ---------- */
  .creds{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(17.5rem,100%),1fr)); gap:1.1rem; margin-top:2.3rem}
  .cred{background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:1.45rem 1.35rem; box-shadow:var(--shadow)}
  .cred h3{font-family:var(--sans); font-size:1rem; font-weight:650; letter-spacing:-.005em; margin-bottom:.5rem}
  .cred p{margin:0; color:var(--muted); font-size:1rem; line-height:1.6}
  .cred a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(var(--accent-rgb),.4)}
  .cred a:hover{border-bottom-color:var(--accent)}
  .cred .st{font-family:var(--mono); font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.7rem}
  .cred-link{display:inline-block; margin-top:1.1rem; font-size:.9375rem}
  .cred-link span{padding-left:.3rem}

  /* ---------- featured: validation flow ---------- */
  .demo{margin:0; padding:0}
  .flow{display:grid; gap:.85rem; margin-top:2.1rem}
  .lane{
    display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1.15rem; align-items:center;
    background:var(--panel); border:1px solid var(--border); border-radius:9px; padding:1.15rem 1.3rem; box-shadow:var(--shadow);
  }
  .lane.ctrl{border-style:dashed; border-color:color-mix(in srgb, var(--accent) 42%, var(--border))}
  .tag{font-family:var(--mono); font-size:.875rem; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); line-height:1.5}
  .lane p{margin:0; font-size:1rem; color:var(--muted); line-height:1.6}
  .judge{
    display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1.15rem; align-items:center;
    background:var(--accent-soft); border:1px solid var(--border); border-radius:9px; padding:1.15rem 1.3rem;
  }
  .judge p{margin:0; font-size:1rem; color:var(--muted); line-height:1.6}
  .note{margin:1.5rem 0 0; font-size:1rem; color:var(--muted); max-width:74ch}
  .note strong{color:var(--text); font-weight:600}
  @media (max-width:760px){
    .lane,.judge{grid-template-columns:1fr; gap:.75rem}
  }

  /* ---------- specialties ---------- */
  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(17.5rem,100%),1fr)); gap:1.1rem; margin-top:2.3rem}
  .card{
    position:relative; background:var(--panel); border:1px solid var(--border); border-radius:9px;
    padding:1.55rem 1.45rem 1.65rem; box-shadow:var(--shadow);
  }
  .card h3{font-size:1.06rem; margin-bottom:.55rem; font-family:var(--sans); font-weight:650; letter-spacing:-.005em}
  .card p{margin:0; color:var(--muted); font-size:1rem; line-height:1.6}
  .num{font-family:var(--mono); font-size:.8125rem; color:var(--accent); letter-spacing:.11em; display:block; margin-bottom:.8rem}
  .qs{margin:.5rem 0 0; padding:0; list-style:none}
  .qs li{color:var(--muted); font-size:1rem; line-height:1.6; padding-left:1rem; position:relative; margin-bottom:.38rem}
  .qs li::before{content:""; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.7}
  .also{margin-top:1.1rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); gap:1.1rem}
  .also .card{padding:1.2rem 1.35rem}
  .also h3{font-size:1.06rem}

  /* ---------- engagement ---------- */
  .steps{margin-top:2.2rem; counter-reset:s}
  .step{
    display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:2rem;
    padding:1.3rem 0 1.3rem 2.2rem; border-top:1px solid var(--border); position:relative; counter-increment:s;
  }
  .step:last-child{border-bottom:1px solid var(--border)}
  .step::before{
    content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1.4rem;
    font-family:var(--mono); font-size:.8125rem; letter-spacing:.1em; color:var(--accent);
  }
  .step h3{font-family:var(--sans); font-size:1rem; font-weight:650; letter-spacing:-.005em}
  .step p{margin:0; color:var(--muted); font-size:1rem}
  @media (max-width:700px){ .step{grid-template-columns:1fr; gap:.4rem} }
  .deliv{margin-top:2.2rem; background:var(--accent-soft); border:1px solid var(--border); border-radius:9px; padding:1.6rem 1.6rem}
  .deliv h3{font-size:1.06rem; margin-bottom:.9rem}
  .deliv ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap:.6rem 1.75rem}
  .deliv li{font-size:1rem; color:var(--muted); padding-left:1.15rem; position:relative; line-height:1.6}
  .deliv li::before{content:""; position:absolute; left:0; top:.58em; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75}
  .deliv li b{color:var(--text); font-weight:600}

  /* ---------- founder + contact ---------- */
  .two{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); gap:3rem; align-items:start}
  .contact-box{background:var(--accent-soft); border:1px solid var(--border); border-radius:9px; padding:1.9rem 1.8rem; scroll-margin-top:6rem}
  .contact-box h3{font-size:1.16rem; margin-bottom:.8rem}
  .contact-box p{margin:0; color:var(--muted); font-size:1rem}
  .mail{font-family:var(--mono); font-size:1rem; color:var(--text); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; word-break:break-all; transition:color .16s}
  .mail:hover{color:var(--accent)}
  .security-contact{border-top:1px solid var(--border); margin-top:1.5rem; padding-top:1.5rem}
  .security-contact h3{font-size:1rem; font-family:var(--sans)}
  .security-contact a{color:var(--accent); text-underline-offset:.2em; overflow-wrap:anywhere}
  .plinks{margin:1.4rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; font-size:.93rem}
  .plinks a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(var(--accent-rgb),.4)}
  .plinks a:hover{border-bottom-color:var(--accent)}
  @media (max-width:480px){ .contact-box{padding:1.45rem 1.25rem} }

  /* ---------- footer ---------- */
  footer{padding:2.4rem 0 3.2rem; font-size:.875rem; color:var(--muted)}
  .foot{display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; justify-content:space-between; align-items:center}
  .foot a{color:var(--muted); text-decoration:none; transition:color .16s}
  .foot a:hover{color:var(--accent)}
  .foot-links{display:flex; flex-wrap:wrap; gap:1.35rem; align-items:center}
  /* Public-record identifiers so a verifier can confirm the entity in the Michigan
     database without taking our word for it. Deliberately NOT a home address. */
  .foot-legal{margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--border); font-size:.79rem; opacity:.8}

  @media (max-width:480px){
    .wrap{padding-left:1.25rem; padding-right:1.25rem}
    .bar{padding:1rem 1.25rem}
    .hero h1{font-size:2.1rem; overflow-wrap:break-word}
    .cta{gap:.65rem}
  }
  @media print{
    header,.cta,.hexdump,.traj,.impact,.skip-link,body::after{display:none !important}
    :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--bg:#fff; --panel:#fff; --text:#111; --muted:#333; --accent:#70401c; --accent-soft:#fff; --border:#bbb; --shadow:none}
    section,section.leadership,.hero{padding:1.5rem 0}
    .cred,.card,.lane,.judge,.step,.contact-box{break-inside:avoid}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .traj .arc{animation:none; stroke-dashoffset:0 !important}
    .impact{animation:none; opacity:1}
    .impact::after{display:none}
    .btn:hover{transform:none}
  }