/* Tractum Bio — shared styles for index, asset and capability pages.
   Colour rule: text tokens (--teal, --amber, --blue-bright, --muted) must reach 4.5:1 on
   --ground, --surface and --surface-2. Filled buttons use their own --btn* tokens, never the
   text/link colours, because a link colour that reads well on dark ground fails behind white
   button text. verify.js checks every text element. */
:root{
    --ground:#F9FBF8;--surface:#FFFFFF;--surface-2:#EEF3F8;--ink:#33414C;--muted:#5E6C76;
    --heading:#183553;--line:#DFE6EC;--line-strong:#C7D3DC;--blue:#2463A7;--blue-bright:#2569C4;
    --teal:#22716C;--amber:#8F6414;
    --btn:#2463A7;--btn-hover:#1F5A99;--btn-teal:#22716C;--band:#0E2038;--band-ink:#C6D4E2;--band-head:#F4F8FC;
    --band-line:#263B57;--band-muted:#8FA2B6;
    --measure:66ch;--maxw:1120px;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ground:#0A1421;--surface:#0F1D2E;--surface-2:#132538;--ink:#C4D2DE;--muted:#8195A6;
      --heading:#EAF1F8;--line:#213448;--line-strong:#2C4159;--blue:#5E9BDD;--blue-bright:#6AA6E8;
      --teal:#4FB3AC;--amber:#D2A24E;--band:#07101B;
      --btn:#2463A7;--btn-hover:#2A6CB3;--btn-teal:#1F6B66;--band-ink:#B7C6D6;--band-head:#EAF1F8;
      --band-line:#1E3149;--band-muted:#7A8D9F;
    }
  }
  :root[data-theme="light"]{
    --ground:#F9FBF8;--surface:#FFFFFF;--surface-2:#EEF3F8;--ink:#33414C;--muted:#5E6C76;
    --heading:#183553;--line:#DFE6EC;--line-strong:#C7D3DC;--blue:#2463A7;--blue-bright:#2569C4;
    --teal:#22716C;--amber:#8F6414;
    --btn:#2463A7;--btn-hover:#1F5A99;--btn-teal:#22716C;--band:#0E2038;--band-ink:#C6D4E2;--band-head:#F4F8FC;
    --band-line:#263B57;--band-muted:#8FA2B6;
  }
  :root[data-theme="dark"]{
    --ground:#0A1421;--surface:#0F1D2E;--surface-2:#132538;--ink:#C4D2DE;--muted:#8195A6;
    --heading:#EAF1F8;--line:#213448;--line-strong:#2C4159;--blue:#5E9BDD;--blue-bright:#6AA6E8;
    --teal:#4FB3AC;--amber:#D2A24E;--band:#07101B;
      --btn:#2463A7;--btn-hover:#2A6CB3;--btn-teal:#1F6B66;--band-ink:#B7C6D6;--band-head:#EAF1F8;
    --band-line:#1E3149;--band-muted:#7A8D9F;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* in-page anchors land below the sticky header */
  main [id]{scroll-margin-top:84px}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;
    line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  h1,h2,h3{color:var(--heading);text-wrap:balance;line-height:1.14;margin:0}
  p{margin:0}
  a{color:var(--blue);text-decoration:none}
  a:focus-visible,button:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:2px}
  /* padding-inline, not the shorthand: the shorthand zeroed the vertical padding of every <section class="wrap"> */
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px}
  .measure{max-width:var(--measure)}
  .eyebrow{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:650;
    color:var(--teal);margin:0 0 18px;display:flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--teal);flex:none}
  .display{font-size:clamp(2rem,4.9vw,3.35rem);font-weight:700;letter-spacing:-.02em}
  .h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:700;letter-spacing:-.015em}
  .h3{font-size:1.16rem;font-weight:680;letter-spacing:-.01em}
  .lead{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--muted);line-height:1.6}
  section{padding:clamp(44px,6vw,76px) 0}
  .divider{border:0;border-top:1px solid var(--line);margin:0}

  /* nav */
  header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
    backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
  .nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:24px}
  .brand{display:flex;align-items:center;gap:11px;margin-right:auto}
  .brand .word{font-weight:720;letter-spacing:-.01em;color:var(--heading);font-size:1.1rem}
  .brand .word span{font-weight:420;color:var(--muted)}
  .mark{width:29px;height:29px;flex:none;color:var(--heading)}
  .mark .sweep{color:var(--blue-bright)}
  nav.links{display:flex;gap:24px}
  nav.links a{color:var(--muted);font-size:.93rem;font-weight:520}
  nav.links a:hover,nav.links a[aria-current="page"]{color:var(--heading)}
  nav.links a[aria-current="page"]{font-weight:650}
  .nav-cta{font-size:.9rem;font-weight:600;color:#fff;background:var(--btn);padding:9px 16px;border-radius:7px;white-space:nowrap}
  .nav-cta:hover{background:var(--btn-hover)}
  /* The short label is hidden by default and swapped in at phone widths. This rule
     must come BEFORE the media query below, or it wins the cascade and the pill renders empty. */
  .nav-cta .cta-short{display:none}
  @media(max-width:420px){
    .nav-in{gap:12px;padding:12px 18px}
    .nav-cta{font-size:.82rem;padding:8px 12px}
    .nav-cta .cta-long{display:none}
    .nav-cta .cta-short{display:inline}
    .menu-btn span{display:none}
  }
  /* menu button + dropdown replace the inline links on narrow screens */
  .menu-btn{display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-strong);
    color:var(--heading);font:inherit;font-size:.88rem;font-weight:600;padding:8px 11px;border-radius:7px;cursor:pointer}
  .menu-btn:hover{border-color:var(--blue);color:var(--blue)}
  .menu-btn svg{flex:none}
  @media(max-width:900px){
    .menu-btn{display:inline-flex}
    nav.links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
      background:var(--surface);border-bottom:1px solid var(--line);padding:6px 28px 14px;
      box-shadow:0 18px 34px -22px rgba(0,0,0,.35)}
    nav.links.open{display:flex}
    /* without JavaScript the menu button can't work: show the links as a second header row */
    html:not(.js) .menu-btn{display:none}
    html:not(.js) .nav-in{flex-wrap:wrap}
    html:not(.js) nav.links{display:flex;position:static;order:3;flex-basis:100%;flex-direction:row;flex-wrap:wrap;
      gap:4px 20px;padding:0;background:none;border:0;box-shadow:none}
    html:not(.js) nav.links a{padding:4px 0;border:0;font-size:.93rem}
    nav.links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem;color:var(--heading)}
    nav.links a:last-child{border-bottom:none}
  }

  /* skip link: off-screen until focused */
  .skip{position:absolute;left:-999px;top:10px;z-index:100;background:var(--btn);color:#fff;
    padding:10px 14px;border-radius:7px;font-weight:600}
  .skip:focus{left:10px}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;
    padding:14px 22px;border-radius:9px;border:1px solid transparent;transition:.18s}
  .btn .arw{transition:transform .18s}.btn:hover .arw{transform:translateX(3px)}
  .btn-primary{background:var(--btn);color:#fff}.btn-primary:hover{background:var(--btn-hover)}
  .btn-ghost{background:transparent;color:var(--heading);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

  /* hero */
  .hero{padding-top:clamp(50px,7vw,90px);position:relative;overflow:hidden}
  .hero .display{margin-bottom:24px;max-width:17ch}
  .hero .lead{max-width:52ch;margin-bottom:34px}
  .hero .display:last-child{margin-bottom:clamp(10px,2vw,22px)}
  .routes-wrap{padding-top:clamp(12px,2vw,20px)}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-meta{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:12px 32px;font-size:.9rem;color:var(--muted)}
  .hero-meta b{color:var(--heading);font-weight:640}
  .retina{position:absolute;right:-160px;top:-30px;width:600px;height:600px;pointer-events:none;opacity:.5;z-index:-1}
  @media(max-width:900px){.retina{opacity:.2;right:-260px}}

  /* split hero: copy on the left, the route card on the right */
  .hero.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
  @media(max-width:900px){.hero.split{grid-template-columns:1fr;gap:34px}}
  .hero.split .hero-copy{min-width:0}
  .hero.split .lead{margin-bottom:30px}
  .hero.split .retina{opacity:.25}
  .route-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px 26px 20px;min-width:0}
  .route-card .rk{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:650;color:var(--muted);display:block;margin-bottom:12px}
  .route{list-style:none;margin:0;padding:0;position:relative}
  .route::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:1px;
    background:linear-gradient(180deg,var(--teal),var(--blue) 40%,var(--amber) 72%,var(--blue-bright))}
  .route li{position:relative;padding:10px 0 10px 30px;display:grid;gap:2px}
  .route li::before{content:"";position:absolute;left:2px;top:17px;width:11px;height:11px;border-radius:50%;
    background:var(--surface);border:2px solid var(--c,var(--blue))}
  .route li.end::before{background:var(--c,var(--blue))}
  .route li b{color:var(--heading);font-size:1rem;font-weight:640;line-height:1.3}
  .route li span{color:var(--muted);font-size:.9rem;line-height:1.4}

  .assess-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:8px}

  /* engagement pipeline — three phases + outcome on one rail, with the gate below */
  .pipe{margin-top:44px}
  .pipe-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
  .pipe-rail-4{grid-template-columns:repeat(4,1fr)}
  .pipe-rail::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;
    background:linear-gradient(90deg,var(--teal),var(--blue) 38%,var(--amber) 68%,var(--blue-bright));opacity:.45}
  .phase{position:relative;padding-top:34px}
  .phase::before{content:"";position:absolute;top:6px;left:0;width:11px;height:11px;border-radius:50%;
    background:var(--surface);border:2px solid var(--teal);box-shadow:0 0 0 4px var(--ground)}
  .phase:nth-child(2)::before{border-color:var(--blue)}
  .phase:nth-child(3)::before{border-color:var(--amber)}
  .phase.outcome::before{border-color:var(--blue-bright);background:var(--blue-bright)}
  .phase .pnum{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);font-weight:650;display:block;margin-bottom:8px}
  .phase.outcome .pnum{color:var(--blue-bright)}
  .phase h3{margin-bottom:12px;font-size:1.12rem}
  .phase ul{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
  .phase li{font-size:.95rem;color:var(--muted);padding:8px 0 8px 18px;border-bottom:1px solid var(--line);
    position:relative;line-height:1.4}
  .phase li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--line-strong)}
  .phase.outcome{background:linear-gradient(180deg,color-mix(in srgb,var(--blue-bright) 6%,transparent),transparent);
    border-radius:12px;padding:34px 16px 10px;margin-top:-10px}
  .ostat{margin-bottom:14px}
  .ostat:last-child{margin-bottom:0}
  .ostat b{display:block;font-size:1.34rem;font-weight:760;color:var(--blue);letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;line-height:1.1}
  .ostat b small{font-size:.82rem;font-weight:650;color:var(--muted);letter-spacing:.06em;
    text-transform:uppercase;margin-left:6px;vertical-align:middle}
  .ostat span{display:block;font-size:.9rem;color:var(--muted);line-height:1.35;margin-top:2px}
  @media(max-width:900px){.pipe-rail-4 .phase.outcome{margin-top:0;padding-top:34px}}

  @media(max-width:900px){
    .pipe-rail{grid-template-columns:1fr;gap:34px}
    .pipe-rail::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto;
      background:linear-gradient(180deg,var(--teal),var(--blue) 55%,var(--amber))}
    .phase{padding-top:0;padding-left:30px}
    .phase::before{top:4px}
  }
  @media(max-width:520px){.phase{padding-left:24px}}

  /* why the eye + why me, synthesized */
  .whyme-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;margin-top:36px;align-items:center}
  @media(max-width:760px){.whyme-grid{grid-template-columns:1fr;gap:38px}}
  .wm-label{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);font-weight:650;margin:0 0 18px}
  .whyme-eye .ostat{margin-bottom:20px}
  .capmap{max-width:560px;margin:0 auto}
  .capmap svg{display:block;width:100%;height:auto;overflow:visible}
  .cap-lbl{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.08em}
  .cap-sub{font-family:var(--sans);font-size:15px;font-weight:500;fill:var(--muted)}
  /* the SVG scales down on phones; grow the type in user units so it stays readable */
  @media(max-width:760px){.cap-lbl{font-size:21px}.cap-sub{font-size:19px}}

  /* founder bio */
  .founder{background:var(--surface-2);position:relative}
  /* fade the tint in and out instead of cutting it with a 1px rule */
  .founder::before,.founder::after{content:"";position:absolute;left:0;right:0;height:90px;pointer-events:none}
  .founder::before{top:0;background:linear-gradient(to bottom,var(--ground),transparent)}
  .founder::after{bottom:0;background:linear-gradient(to top,var(--ground),transparent)}
  .fgrid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,5vw,60px);align-items:center}
  @media(max-width:820px){.fgrid{grid-template-columns:1fr}}
  .fphoto{aspect-ratio:1;width:100%;max-width:360px;margin:0 auto;border-radius:50%;overflow:hidden;
    background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb,var(--blue) 18%,var(--surface)), var(--surface) 62%);
    box-shadow:0 0 0 1px var(--line),0 0 0 8px color-mix(in srgb,var(--blue) 8%,transparent)}
  .fphoto img{display:block;width:100%;height:100%;object-fit:cover}
  /* compact founder card used on the service pages; the full profile lives on the landing page */
  .fcard{display:grid;grid-template-columns:128px 1fr;gap:28px;align-items:center;border:1px solid var(--line);
    border-radius:16px;padding:26px 28px;background:var(--surface)}
  .fcard .fphoto{max-width:128px;margin:0;box-shadow:0 0 0 1px var(--line),0 0 0 6px color-mix(in srgb,var(--blue) 8%,transparent)}
  .fcard .frole{margin-bottom:6px}
  .fcard h3{margin-bottom:8px;font-size:1.3rem}
  .fcard p{color:var(--muted);font-size:.98rem;max-width:62ch}
  .fcard .more{display:inline-block;margin-top:12px;font-weight:600}
  @media(max-width:560px){.fcard{grid-template-columns:1fr;justify-items:start;padding:24px 22px}}
  .frole{font-family:var(--mono);font-size:.88rem;color:var(--teal);letter-spacing:.04em;margin-bottom:12px}
  .creds{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:11px 24px}
  @media(max-width:520px){.creds{grid-template-columns:1fr}}
  .creds li{font-size:.94rem;color:var(--ink);padding-left:18px;position:relative}
  .creds li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--teal)}
  .creds li b{color:var(--heading);font-weight:640}
  .story{margin-top:22px;border-left:2px solid var(--teal);padding-left:20px}
  .story p{font-size:1rem;color:var(--ink);line-height:1.68}
  .story p + p{margin-top:14px}
  .story b{color:var(--heading);font-weight:640}

  /* engagement model */
  .eng{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:40px}
  .eng .ecell{background:var(--surface);padding:28px 24px}
  .eng .ek{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:650;margin-bottom:12px}
  .eng .ecell h3{margin-bottom:9px;font-size:1.06rem}
  .eng .ecell p{font-size:.93rem;color:var(--muted);line-height:1.55}
  @media(max-width:760px){.eng{grid-template-columns:1fr}}
  .introcta{margin-top:28px;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:14px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 7%,transparent),transparent);
    padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
  @media(max-width:720px){.introcta{grid-template-columns:1fr;gap:18px}}
  .introcta .ctas{display:flex;gap:12px;flex-wrap:wrap}
  .introcta h3{margin-bottom:8px}
  .introcta p{color:var(--muted);font-size:.98rem;max-width:58ch}
  .eng-note{margin-top:24px;font-size:.95rem;color:var(--muted);max-width:66ch}
  .eng-note b{color:var(--heading);font-weight:640}

  /* after-go strip */
  .aftergo{border:1px solid var(--line);border-radius:16px;padding:30px 30px;background:var(--surface);
    display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
  @media(max-width:720px){.aftergo{grid-template-columns:1fr}}
  .aftergo h3{margin-bottom:8px}.aftergo p{color:var(--muted);font-size:.98rem;max-width:56ch}

  /* contact */
  .contact{text-align:center}
  .contact .h2{max-width:20ch;margin:0 auto 16px}
  .contact .lead{max-width:48ch;margin:0 auto 28px}
  .mailbtn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1.02rem;
    background:var(--btn);color:#fff;padding:15px 26px;border-radius:10px}
  .mailbtn:hover{background:var(--btn-hover)}
  .next{margin:20px auto 0;max-width:52ch;font-size:.95rem;color:var(--muted)}

  footer{border-top:1px solid var(--line);padding:38px 0}
  .foot{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;font-size:.86rem;color:var(--muted)}
  .foot .brand{margin-right:auto}.foot .word{font-size:1rem}
  .foot .disc{flex-basis:100%;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:4px;line-height:1.6}

  .reveal-ready .reveal{opacity:0;transform:translateY(24px);
    transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .reveal-ready .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;transition-delay:0s!important}}

/* ---- landing: two doors ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;
  padding:32px 30px;display:grid;gap:14px;align-content:start;min-width:0}
.doors .door{grid-template-rows:auto auto auto 1fr auto}
.door .ek{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--c)}
.door h2{font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.015em}
.door p{color:var(--muted)}
.door ul{list-style:none;margin:2px 0 0;padding:0;border-top:1px solid var(--line)}
.door li{font-size:.95rem;padding:9px 0 9px 18px;border-bottom:1px solid var(--line);position:relative;line-height:1.4}
.door li::before{content:"";position:absolute;left:0;top:16px;width:7px;height:1px;background:var(--c)}
.door .btn{justify-self:start;align-self:end;margin-top:8px;background:var(--cb,var(--btn));color:#fff}
.door .btn:hover{background:var(--btn-hover)}

/* ---- capability: three service pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{border-top:3px solid var(--c);padding-top:22px;display:grid;gap:12px;align-content:start;min-width:0}
.pillar .ek{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--c)}
.pillar h3{font-size:1.32rem}
.pillar > p{color:var(--muted);font-size:.98rem}
.pillar ul{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line)}
.pillar li{font-size:.95rem;padding:9px 0;border-bottom:1px solid var(--line);line-height:1.4;display:grid;gap:2px}
.pillar li b{color:var(--heading);font-weight:640}
.pillar li span{color:var(--muted);font-size:.88rem}
.pillar .scope{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.04em}

/* ---- capability: one study, bench to report ---- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:36px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media(max-width:900px){.flow{grid-template-columns:1fr}}
.fstep{background:var(--surface);padding:22px 20px;position:relative;display:grid;gap:6px;align-content:start;min-width:0}
.fstep + .fstep{border-left:1px solid var(--line)}
@media(max-width:900px){.fstep + .fstep{border-left:none;border-top:1px solid var(--line)}}
.fstep .n{font-family:var(--mono);font-size:.8rem;color:var(--blue-bright);letter-spacing:.1em}
.fstep b{color:var(--heading);font-size:1rem;line-height:1.3}
.fstep span{color:var(--muted);font-size:.9rem;line-height:1.45}
.fstep.gate{background:color-mix(in srgb,var(--amber) 8%,var(--surface))}
.fstep.gate .n{color:var(--amber)}
.props{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.props span{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--heading);
  border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
@media(max-width:760px){.twin{grid-template-columns:1fr}}
.twin div{display:grid;gap:8px}
.twin h3{font-size:1.1rem}
.twin p{color:var(--muted);font-size:.97rem}

/* ---- capability: what you end up owning ---- */
.ownrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;margin-top:30px}
@media(max-width:820px){.ownrow{grid-template-columns:1fr;gap:30px}}
.ownrow .lst{display:grid;gap:14px}
.ownrow .lst p{color:var(--muted)}
.ownrow .lst b{color:var(--heading)}
.stack{max-width:520px;width:100%;margin:0 auto}
.stack svg{display:block;width:100%;height:auto}
.st-lbl{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em}
.st-sub{font-family:var(--sans);font-size:13.5px;fill:var(--muted)}
@media(max-width:760px){.st-lbl{font-size:16px}.st-sub{font-size:16px}}

/* ---- shared email line (mailto links are not reliable everywhere) ---- */
.addr{margin-top:14px;font-family:var(--mono);font-size:.92rem;color:var(--heading);user-select:all}

/* ---- landing: three shared stats ---- */
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
@media(max-width:760px){.stats3{grid-template-columns:1fr;gap:20px}}
.stats3 .ostat{margin:0}

/* keep content above the tinted sections' fade overlays */
.founder > *{position:relative;z-index:1}

/* ---- landing: compact credentials under the doors ---- */
.credstrip{list-style:none;margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px}
@media(max-width:900px){.credstrip{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.credstrip{grid-template-columns:1fr}}
.credstrip li{font-size:.92rem;color:var(--muted);line-height:1.4;display:grid;gap:2px}
.credstrip b{color:var(--heading);font-weight:640}

/* ---- landing: each door names its first paid step ---- */
.door .dstats{border-top:1px solid var(--line);padding-top:16px;margin-top:2px;display:grid;gap:13px}
.door .dstats .dk{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--c)}
.door .dstats .ostat{margin-bottom:0}
.door .dstats .ostat b{font-size:1.24rem}
.door .first{border:1px solid var(--line);border-left:3px solid var(--c);border-radius:10px;padding:14px 16px;
  background:color-mix(in srgb,var(--c) 5%,var(--surface));display:grid;gap:3px}
.door .first .fk{font-size:.8rem;font-weight:650;color:var(--c);letter-spacing:.06em;text-transform:uppercase}
.door .first b{color:var(--heading);font-size:1rem}
.door .first p{font-size:.93rem;color:var(--muted)}
.doors + .ctx-note{margin-top:18px}

.more{font-weight:600}
.ctx-note{margin-top:18px;font-size:.92rem;color:var(--muted);max-width:66ch}

/* ---- track outputs and the first paid offer ---- */
.pout{font-size:.9rem;color:var(--muted);line-height:1.45}
.pout b{display:block;color:var(--heading);font-weight:640;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono);margin-bottom:3px}
.offer{margin-top:36px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.offer-h{padding:22px 26px;border-bottom:1px solid var(--line);display:grid;gap:4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--teal) 7%,var(--surface)),var(--surface))}
.offer-h .ek{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--teal)}
.offer-h b{font-size:1.2rem;color:var(--heading);font-weight:700;letter-spacing:-.01em}
.offer dl{margin:0}
.offer dl div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:13px 26px;border-top:1px solid var(--line)}
.offer dl div:first-child{border-top:none}
.offer dt{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--muted);padding-top:2px}
.offer dd{margin:0;font-size:.96rem;color:var(--ink);line-height:1.5}
@media(max-width:600px){.offer dl div{grid-template-columns:1fr;gap:4px;padding:13px 20px}.offer-h{padding:20px}}
.offer + .eng{margin-top:24px}

/* ---- founder: collapsible longer story ---- */
.more-story{margin-top:14px}
.more-story summary{cursor:pointer;font-weight:600;color:var(--blue);font-size:.95rem;list-style-position:inside}
.more-story[open] summary{margin-bottom:12px}
.creds li a{font-weight:500}

/* ---- phone versions of the two diagrams: SVG text shrinks with the graphic ---- */
.caplist,.stacklist{display:none;list-style:none;margin:0;padding:0}
@media(max-width:560px){
  .capmap,.stack svg{display:none}
  .caplist,.stacklist{display:grid;gap:10px}
}
.caplist li{border-left:3px solid var(--c);padding:6px 0 6px 14px;display:grid;gap:1px}
.caplist li b{font-family:var(--mono);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--heading)}
.caplist li span{color:var(--muted);font-size:.95rem}
.caplist li.end{margin-top:6px;border-left-width:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}
.caplist li.end b{color:var(--blue-bright)}
.stacklist li{border:1px solid var(--line-strong);border-radius:12px;padding:14px 16px;display:grid;gap:3px;background:var(--surface)}
.stacklist li.mid{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--surface))}
.stacklist li.base{background:var(--surface-2)}
.stacklist li b{font-family:var(--mono);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;color:var(--heading)}
.stacklist li span{color:var(--muted);font-size:.93rem}

/* ---- capability: handover package ---- */
.handover{margin-top:40px;border-top:1px solid var(--line-strong);padding-top:26px}
.handover h3{margin-bottom:14px}
.handover ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}
@media(max-width:700px){.handover ul{grid-template-columns:1fr}}
.handover li{font-size:.95rem;color:var(--ink);padding-left:18px;position:relative;line-height:1.45}
.handover li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--blue)}

/* ---- about page ---- */
.about-hero .fphoto{max-width:340px}
.bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;margin-top:30px}
@media(max-width:760px){.bg-grid{grid-template-columns:1fr;gap:28px}}
.bg-col{border-top:3px solid var(--c);padding-top:18px;min-width:0}
.bg-col h3{margin-bottom:10px}
.bg-col ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bg-col li{padding:10px 0;border-bottom:1px solid var(--line);display:grid;gap:2px;line-height:1.4}
.bg-col li b{color:var(--heading);font-weight:640;font-size:.98rem}
.bg-col li span{color:var(--muted);font-size:.92rem}
@media(max-width:760px){.ownrow[style]{grid-template-columns:1fr!important}}

/* ---- privacy and 404 ---- */
.legal{padding-top:clamp(50px,7vw,90px)}
.legal .display{margin-bottom:24px}
.legal .measure p{margin-bottom:14px}
.legal .updated{color:var(--muted);font-size:.92rem}
.nf-links{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.nf-links a{font-weight:600}
@media(max-width:900px){.about-hero .fphoto{order:-1;max-width:170px;margin:0}}

  .contact .alt{margin-top:12px;font-size:.95rem;color:var(--muted)}
  .contact .alt a{font-weight:600;color:var(--heading)}

  /* ---- booking button: sits beside .mailbtn, revealed by site.js once a real URL is set ---- */
  .bookbtn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1.02rem;
    padding:15px 26px;border-radius:9px;background:transparent;color:var(--blue);
    border:1px solid var(--line-strong);transition:.18s;margin-left:10px}
  .bookbtn:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,transparent)}
  @media(max-width:560px){.bookbtn{margin-left:0;margin-top:10px}}

  /* ---- forms (request.html, samples.html) ---- */
  .formwrap{max-width:660px;margin-top:34px}
  .fgroup{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
  .fgroup label{font-size:.9rem;font-weight:650;color:var(--heading)}
  .fgroup .hint{font-size:.85rem;color:var(--muted);font-weight:400}
  .fgroup .req{color:var(--teal);font-weight:700}
  .frow2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:620px){.frow2{grid-template-columns:1fr}}
  input[type="text"],input[type="email"],select,textarea{
    font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--surface);
    border:1px solid var(--line-strong);border-radius:9px;padding:13px 15px;width:100%;transition:.18s}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
  textarea{min-height:124px;resize:vertical;line-height:1.55}
  select{appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:44px}
  .fsubmit{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;
    font-size:1.02rem;color:#fff;background:var(--btn);padding:15px 28px;border-radius:9px;
    border:none;cursor:pointer;transition:.18s}
  .fsubmit:hover{background:var(--btn-hover)}
  .fnote{font-size:.88rem;color:var(--muted);margin-top:18px;max-width:60ch;line-height:1.6}
  .fstatus{margin-top:20px;padding:15px 18px;border-radius:9px;font-size:.95rem;color:var(--heading);
    background:var(--surface-2);border:1px solid var(--line-strong)}
  .fstatus.err{background:color-mix(in srgb,var(--amber) 12%,transparent);
    border-color:color-mix(in srgb,var(--amber) 45%,var(--line-strong))}
  fieldset{border:0;margin:0;padding:0}
  .pack{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
  .pitem{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:22px 20px}
  .pitem .pn{font-family:var(--mono);font-size:13px;color:var(--teal);margin-bottom:10px}
  .pitem h3{margin-bottom:6px}
  .pitem p{color:var(--muted);font-size:.94rem}
  @media(max-width:760px){.pack{grid-template-columns:1fr}}
  .freeline{display:inline-block;margin-bottom:24px;font-size:.96rem;color:var(--heading);
    background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px}
  .freeline b{color:var(--teal);font-weight:700}

  /* ---- why the eye: one row of stats across the full width ---- */
  .whyeye-wide{max-width:1320px;margin:0 auto;padding-inline:28px}
  .whyeye-row{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin-top:28px}
  .whyeye-row .ostat{margin-bottom:0;border-top:2px solid var(--line);padding-top:14px}
  .whyeye-row .ostat b{font-size:1.5rem}
  .whyeye-row .ostat span{font-size:.86rem;line-height:1.4}
  @media(max-width:1180px){.whyeye-row{grid-template-columns:repeat(3,1fr);gap:26px}}
  @media(max-width:760px){.whyeye-row{grid-template-columns:1fr;gap:20px}}

  /* ---- profile: one line, then plain points ---- */
  .bio-line{font-family:var(--mono);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--teal);font-weight:650;margin:0 0 20px}
  .bio-points{list-style:none;margin:0;padding:0;max-width:62ch;border-top:1px solid var(--line)}
  .bio-points li{position:relative;padding:13px 0 13px 22px;border-bottom:1px solid var(--line);
    font-size:1rem;color:var(--ink);line-height:1.45}
  .bio-points li::before{content:"";position:absolute;left:0;top:1.28em;width:7px;height:7px;
    border-radius:50%;background:var(--teal)}
  .bio-points li b{color:var(--heading);font-weight:650}

  /* ---- why the eye: five stats on one row at desktop width ---- */
  #why.wrap{max-width:1320px}
  .whyeye-row{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin-top:26px}
  .whyeye-row .ostat{margin:0;border-top:2px solid var(--line);padding-top:14px}
  .whyeye-row .ostat b{font-size:1.44rem}
  .whyeye-row .ostat span{font-size:.87rem;line-height:1.4}
  @media(max-width:1180px){.whyeye-row{grid-template-columns:repeat(3,1fr);gap:24px}}
  @media(max-width:760px){.whyeye-row{grid-template-columns:1fr;gap:20px}}
  .whyme-solo{margin-top:46px}

  /* ---- profile: one line, then plain points ---- */
  .bio-line{font-family:var(--mono);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--teal);font-weight:650;margin:0 0 20px}
  .bio-points{list-style:none;margin:0;padding:0;max-width:62ch;border-top:1px solid var(--line)}
  .bio-points li{position:relative;padding:13px 0 13px 22px;border-bottom:1px solid var(--line);
    font-size:1rem;color:var(--ink);line-height:1.45}
  .bio-points li::before{content:"";position:absolute;left:0;top:1.3em;width:7px;height:7px;
    border-radius:50%;background:var(--teal)}
  .bio-points li b{color:var(--heading);font-weight:650}

  /* ---- career timeline on the landing page ---- */
  .career{list-style:none;margin:34px 0 0;padding:26px 0 0;position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  .career::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line-strong)}
  .career .stage{position:relative;min-width:0}
  .career .stage::before{content:"";position:absolute;left:0;top:-27px;width:10px;height:10px;
    border-radius:50%;background:var(--ground);border:2px solid var(--c)}
  .career .ph{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--c);font-weight:650;display:block;margin-bottom:5px}
  .career h3{font-size:1rem;font-weight:650;letter-spacing:-.01em;margin-bottom:9px;line-height:1.3}
  .career ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .career ul li{font-size:.88rem;color:var(--muted);line-height:1.4;padding-left:13px;position:relative}
  .career ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--line-strong)}
  @media(max-width:900px){
    .career{grid-template-columns:1fr 1fr;gap:28px 26px}
    .career::before{display:none}
    .career .stage{border-top:2px solid var(--c);padding-top:16px}
    .career .stage::before{display:none}
  }
  @media(max-width:520px){.career{grid-template-columns:1fr}}

  /* career runs wider than the body column so five stages fit on one rail */
  :root{--teal-deep:#1C5C58}
  @media (prefers-color-scheme:dark){:root{--teal-deep:#5FBDB6}}
  :root[data-theme="dark"]{--teal-deep:#5FBDB6}
  .career-wrap{max-width:1320px;padding-block:clamp(30px,4vw,48px) clamp(34px,5vw,64px)}
  .close-wrap{padding-top:0;padding-bottom:clamp(44px,6vw,76px)}
  .team-note{margin-top:30px;max-width:72ch;font-size:.96rem;color:var(--muted);line-height:1.6}
  .team-note b{color:var(--heading)}
  .career-wrap .career{margin-top:0;grid-template-columns:repeat(5,1fr);gap:24px}
  @media(max-width:1100px){.career-wrap .career{grid-template-columns:repeat(3,1fr);gap:28px 24px}}
  @media(max-width:760px){.career-wrap .career{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.career-wrap .career{grid-template-columns:1fr}}