/* One Person Biotech — shared stylesheet (extracted 2026-09-01 from index.html inline <style>) */
:root{
  --blue:#2F4EF3; --blue-deep:#1A2FAE; --blue-tint-90:#EEF0FE; --blue-tint-70:#C7CDFB; --blue-tint-40:#8C97F7;
  --orange:#FE9E02; --orange-deep:#C97C00; --orange-tint-90:#FFF2DE; --orange-tint-70:#FFDCA0;
  --white:#F4F4F4; --paper:#FBFBFA; --ink:#12141C; --ink-70:#4A4D5A; --ink-40:#9296A3; --line:#DCDCE2;
  --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;
  --mono:'Cascadia Code','JetBrains Mono','Consolas',ui-monospace,monospace;
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --maxw:1180px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--serif); color:var(--ink); background:var(--paper); line-height:1.55; font-size:18px; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--orange-tint-70); color:var(--ink); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); }
a{ color:var(--blue); text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); color:var(--ink); font-weight:700; }
p{ color:var(--ink-70); }
.mono{ font-family:var(--mono); }
.eyebrow{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); }

/* ---------- nav ---------- */
.topnav{ position:sticky; top:0; z-index:50; background:rgba(251,251,250,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topnav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-top:var(--sp-3); padding-bottom:var(--sp-3); }
.topnav .wrap > a{ flex:0 1 auto; min-width:0; }
.topnav img{ width:280px !important; height:auto !important; max-width:100%; }
.navlinks{ display:flex; align-items:center; gap:var(--sp-4); flex:0 0 auto; }
.navlinks a.nl{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-70); transition:color .15s; }
.navlinks a.nl:hover, .navlinks a.nl.on{ color:var(--blue); }
.navcta{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--ink); border-radius:25%/50%; padding:12px 24px; color:var(--ink); white-space:nowrap; transition:background .15s,color .15s; }
.navcta:hover{ background:var(--ink); color:var(--paper); }

/* ---------- buttons ---------- */
.btn{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; border:none; cursor:pointer;
      padding:14px 28px; border-radius:25%/50%; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; }
.btn-primary{ background:var(--blue); color:#fff; } .btn-primary:hover{ background:var(--blue-deep); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--ink); } .btn-secondary:hover{ border-color:var(--blue); color:var(--blue); }

/* ---------- hero ---------- */
.cover{ position:relative; overflow:hidden; background:var(--white); border-bottom:1px solid var(--line); }
.cover .wrap{ position:relative; z-index:2; padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.blur-circle{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.cover .c1{ width:520px; height:520px; background:var(--blue); top:-260px; right:-180px; opacity:.16; }
.cover .c2{ width:380px; height:380px; background:var(--orange); bottom:-220px; left:-120px; opacity:.14; }
.portrait{ width:124px; height:124px; border-radius:50%; object-fit:cover; display:block; margin-bottom:var(--sp-5);
           border:2px solid var(--orange); padding:4px; background:var(--paper); filter:grayscale(1) contrast(1.04); }
h1{ font-size:clamp(44px,6vw,72px); font-weight:700; line-height:1.02; margin:var(--sp-3) 0 var(--sp-4); max-width:15ch; }
h1 em{ font-style:italic; font-weight:500; color:var(--blue); }
.lede{ font-size:20px; line-height:1.6; color:var(--ink-70); max-width:52ch; }
.who{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40); margin-top:var(--sp-4); line-height:1.7; }
.who b{ color:var(--ink-70); font-weight:500; }
.btns{ margin-top:var(--sp-6); display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.cover.sub .wrap{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
.cover.sub h1{ max-width:19ch; font-size:clamp(40px,5.2vw,64px); }
.cover.sub .portrait{ width:96px; height:96px; margin-bottom:var(--sp-4); }

/* ---------- sections ---------- */
section{ padding:var(--sp-8) 0; border-bottom:1px solid var(--line); }
.section-head{ display:flex; align-items:baseline; gap:var(--sp-4); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.section-num{ font-family:var(--mono); font-size:12px; color:var(--orange-deep); letter-spacing:.05em; }
h2.big{ font-size:38px; font-weight:700; }
.lead{ font-size:18px; color:var(--ink-70); max-width:62ch; margin-bottom:var(--sp-6); }
h3.sub{ font-size:26px; font-weight:600; margin-bottom:var(--sp-2); }

/* ---------- thesis ---------- */
.thesis .big-quote{ font-size:clamp(30px,4vw,42px); font-weight:500; font-style:italic; line-height:1.25; max-width:26ch; color:var(--ink); }
.thesis .big-quote span{ color:var(--blue); }
.thesis p{ font-size:18px; max-width:62ch; margin-top:var(--sp-4); }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.card{ border:1px solid var(--line); border-radius:0; padding:var(--sp-5); background:var(--white); position:relative; overflow:hidden; }
.card .corner{ position:absolute; width:200px; height:200px; border-radius:50%; filter:blur(50px); top:-100px; right:-80px; opacity:.22; pointer-events:none; }
.card .content{ position:relative; z-index:2; }
.tag{ display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
      padding:4px 10px; border-radius:4px; border:1px solid var(--blue-tint-70); color:var(--blue); background:var(--blue-tint-90); }
.tag.orange{ border-color:var(--orange-tint-70); color:var(--orange-deep); background:var(--orange-tint-90); }
.card h3{ font-size:26px; font-weight:600; margin:var(--sp-3) 0 2px; }
.card .role{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-40); margin-bottom:var(--sp-3); }
.card ul{ list-style:none; }
.card li{ font-size:17px; color:var(--ink-70); padding:9px 0 9px 26px; position:relative; border-top:1px solid var(--line); }
.card li:before{ content:""; position:absolute; left:0; top:15px; width:10px; height:10px; border-radius:50%; border:2px solid var(--orange); }
.card li a{ color:var(--ink-70); border-bottom:1px solid var(--blue-tint-70); } .card li a:hover{ color:var(--blue); }

/* ---------- doors ---------- */
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.door{ display:block; border:1px solid var(--line); background:var(--white); padding:var(--sp-5); position:relative; overflow:hidden; color:inherit; transition:border-color .15s, transform .15s; }
.door:hover{ border-color:var(--blue); transform:translateY(-2px); }
.door .corner{ position:absolute; width:200px; height:200px; border-radius:50%; filter:blur(50px); top:-100px; right:-80px; opacity:.22; pointer-events:none; }
.door .content{ position:relative; z-index:2; }
.door .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-40); }
.door h3{ font-size:28px; font-weight:600; line-height:1.15; margin:var(--sp-2) 0 var(--sp-3); color:var(--ink); }
.door p{ font-size:17px; }
.door .go{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-top:var(--sp-4); display:inline-block; }

/* ---------- three questions ---------- */
.qs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.q .n{ font-family:var(--mono); font-size:12px; color:var(--orange-deep); letter-spacing:.05em; }
.q h3{ font-size:26px; font-weight:600; line-height:1.15; margin:var(--sp-2) 0 var(--sp-3); }
.q p{ font-size:17px; }

/* ---------- tiers ---------- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.tier{ border:1px solid var(--line); background:var(--white); padding:var(--sp-5); display:flex; flex-direction:column; }
.tier.hi{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
.tier .when{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-deep); }
.tier h3{ font-size:26px; font-weight:600; margin:var(--sp-2) 0 var(--sp-3); }
.tier p{ font-size:17px; }
.tier ul{ list-style:none; margin-top:var(--sp-3); }
.tier li{ font-size:16.5px; color:var(--ink-70); padding:8px 0 8px 26px; position:relative; border-top:1px solid var(--line); }
.tier li:before{ content:""; position:absolute; left:0; top:14px; width:10px; height:10px; border-radius:50%; border:2px solid var(--orange); }
.tier .fee{ margin-top:auto; padding-top:var(--sp-4); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); }

/* ---------- split (text + aside) ---------- */
.split{ display:flex; gap:var(--sp-6); flex-wrap:wrap; }
.split .main{ flex:1; min-width:320px; }
.split .main p{ font-size:18px; max-width:60ch; }
.split .aside{ flex:0 0 300px; background:var(--white); border:1px solid var(--line); padding:var(--sp-5); height:fit-content; }
.aside .l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); margin-bottom:var(--sp-2); }
.aside ul{ list-style:none; }
.aside li{ font-size:17px; color:var(--ink); font-weight:500; padding:8px 0; border-top:1px solid var(--line); }
.aside li:first-child{ border-top:none; padding-top:0; }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.step{ border-top:2px solid var(--blue); padding-top:var(--sp-3); }
.step .n{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--blue); }
.step h4{ font-family:var(--serif); font-size:23px; font-weight:600; margin:var(--sp-2) 0; color:var(--ink); }
.step p{ font-size:17px; }

/* ---------- checklist ---------- */
.check{ list-style:none; max-width:62ch; }
.check li{ font-size:18px; color:var(--ink-70); padding:10px 0 10px 32px; position:relative; border-top:1px solid var(--line); }
.check li:first-child{ border-top:none; }
.check li:before{ content:"\2713"; position:absolute; left:0; top:9px; font-family:var(--mono); font-weight:700; color:var(--blue); }

/* ---------- note ---------- */
.note{ border-left:3px solid var(--orange); padding:var(--sp-3) var(--sp-4); background:var(--orange-tint-90); max-width:70ch; margin-top:var(--sp-6); }
.note p{ font-size:17px; color:var(--ink); }

/* ---------- bridge (dark) ---------- */
.bridge{ background:var(--ink); border-bottom:none; position:relative; overflow:hidden; }
.bridge .blur-circle.b1{ width:420px; height:420px; background:var(--blue); top:-200px; left:-140px; opacity:.30; }
.bridge .wrap{ position:relative; z-index:2; display:flex; gap:var(--sp-7); align-items:center; flex-wrap:wrap; }
.bridge .t{ flex:1; min-width:300px; }
.bridge h2{ color:var(--white); font-size:clamp(30px,3.6vw,40px); font-weight:600; line-height:1.15; }
.bridge h2 em{ font-style:italic; font-weight:500; color:var(--orange); }
.bridge p{ color:#C6C8D6; font-size:18px; margin-top:var(--sp-3); max-width:52ch; }
.stat{ flex:0 0 240px; }
.stat .n{ font-family:var(--serif); font-size:42px; font-weight:600; color:var(--orange); line-height:1.1; }
.stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9296A3; margin:6px 0 var(--sp-4); }
.stat .l:last-child{ margin-bottom:0; }

/* ---------- about ---------- */
.about .wrap{ display:flex; gap:var(--sp-6); flex-wrap:wrap; }
.about .bio{ flex:1; min-width:320px; }
.about .bio p{ font-size:18px; margin-bottom:var(--sp-3); max-width:60ch; }
.about .bio strong{ color:var(--ink); font-weight:600; }
.creds{ flex:0 0 270px; background:var(--white); border:1px solid var(--line); border-radius:0; padding:var(--sp-5); height:fit-content; }
.creds .l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); margin-bottom:2px; }
.creds .row{ margin-bottom:var(--sp-3); } .creds .row:last-child{ margin-bottom:0; }
.creds .v{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink); }

/* ---------- contact ---------- */
.cta{ background:var(--blue-tint-90); border-bottom:none; position:relative; overflow:hidden; }
.cta .blur-circle.k1{ width:420px; height:420px; background:var(--orange); top:-240px; right:-140px; opacity:.18; }
.cta .wrap{ position:relative; z-index:2; text-align:center; }
.cta h2{ font-size:clamp(34px,4vw,44px); font-weight:700; }
.cta p{ font-size:18px; margin:var(--sp-3) auto var(--sp-5); max-width:46ch; }
#cform{ max-width:520px; margin:0 auto; text-align:left; display:flex; flex-direction:column; gap:var(--sp-3); }
#cform input,#cform textarea{ font-family:var(--serif); font-size:17px; padding:13px 15px; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); width:100%; }
#cform input:focus,#cform textarea:focus{ outline:none; border-color:var(--blue); }
#cform ::placeholder{ color:var(--ink-40); }
#cform .row2{ display:flex; gap:var(--sp-3); flex-wrap:wrap; } #cform .row2 input{ flex:1; min-width:160px; }
#cform button{ align-self:center; }
#cfmsg{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-70); min-height:18px; text-align:center; }
.cta .alt{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); margin-top:var(--sp-4); }
.cta .alt a{ color:var(--ink-70); border-bottom:1px solid var(--blue-tint-70); }

footer{ padding:var(--sp-6) 0; text-align:center; }
footer p{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-40); line-height:2; }
footer a{ color:var(--ink-70); }

@media(max-width:900px){ .tiers{ grid-template-columns:1fr; } }
@media(max-width:860px){ .cards,.doors,.qs,.steps{ grid-template-columns:1fr; } }
@media(max-width:640px){
  .wrap{ padding-left:var(--sp-3); padding-right:var(--sp-3); }
  section{ padding:var(--sp-7) 0; }
  .cover .wrap{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
  .topnav img{ width:200px !important; }
  .navlinks{ gap:var(--sp-3); }
  .navlinks a.nl{ display:none; }
  .navcta{ padding:10px 16px; font-size:11px; }
  .stat, .split .aside, .about .creds{ flex:1 1 100%; }
  .split .main, .about .bio, .bridge .t{ min-width:0; }
}