@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400 500; font-display:swap; src:url("../fonts/newsreader-roman-latin-var.woff2") format("woff2"); }
  @font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/newsreader-italic-latin-var.woff2") format("woff2"); }
  @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/hankengrotesk-roman-latin-var.woff2") format("woff2"); }
  @font-face { font-family:"Fragment Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/fragmentmono-roman-latin-400.woff2") format("woff2"); }
  :root {
    --paper:#F7F5F0; --paper-raised:#EFECE4; --paper-sunk:#E7E3DA;
    --ink:#121417; --ink-2:#42474F; --ink-3:#5F656E;
    --rule:#D8D3C8; --rule-strong:#BFB9AB;
    --open:#925708; --open-bg:#F7E9CF;
    --verified:#186A47; --verified-bg:#E1EEE6;
    --clinical:#3A5876;
    --stop:#A3251B;
    --serif:"Newsreader","Iowan Old Style",Georgia,serif;
    --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --gut:20px;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { -webkit-text-size-adjust:100%; }
  body { background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  a { color:inherit; }

  .mast { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px; padding:14px var(--gut); background:var(--paper); border-bottom:1px solid var(--rule); }
  .mast .mark { display:flex; flex:0 0 auto; }
  .mast .name { font-family:var(--serif); font-size:19px; font-weight:500; }
  .mast .name span { font-style:italic; }
  .mast .spacer { flex:1; }
  .mast .word { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; }
  @media (max-width:520px){ .mast .word { display:none; } }

  section { padding:clamp(68px,11vw,108px) var(--gut); }
  .wrap { max-width:1160px; margin:0 auto; }
  .eyebrow { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
  .lede { font-family:var(--serif); font-weight:500; line-height:1.06; }
  .body { font-size:17px; color:var(--ink-2); max-width:52ch; }
  @media (min-width:1024px){ .body { font-size:18px; } }
  .cta { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--paper); background:var(--ink); padding:14px 22px; border-radius:6px; text-decoration:none; }
  .cta .arrow { font-family:var(--mono); font-weight:400; }
  .cta:hover { background:#2A2D33; }

  /* provenance: the illustrative mark (synthetic demonstration) */
  .prov { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; padding:3.5px 6px 3.5px 5px; border:1px solid var(--open); color:var(--open); line-height:1; white-space:nowrap; vertical-align:middle; }
  .prov::before { content:""; width:6px; height:6px; flex:0 0 auto; background:transparent; border:1px dotted currentColor; }

  /* ============ the commercial position record ============ */
  .pos { background:#fff; border:1px solid var(--rule-strong); border-radius:12px; overflow:hidden; box-shadow:0 1px 0 rgba(18,20,23,.03), 0 12px 40px -18px rgba(18,20,23,.18); }
  .pos-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; padding:18px 20px 14px; border-bottom:1px solid var(--rule); }
  .pos-id { font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.08em; }
  .pos-contact { font-family:var(--serif); font-size:19px; font-weight:500; }
  .pos-proc { font-size:13.5px; color:var(--ink-2); }
  .pos-value { margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink); }
  .pos-state { display:flex; align-items:center; gap:14px; padding:26px 20px 22px; }
  .pos-state .glyph { width:38px; height:38px; flex:0 0 auto; }
  .pos-state .glyph svg { width:100%; height:100%; display:block; }
  .pos-state .label { font-family:var(--serif); font-size:clamp(30px,6vw,42px); font-weight:500; line-height:1; }
  .pos-state .label.is-accounted { color:var(--verified); }
  .pos-meta { display:grid; gap:10px; padding:0 20px 20px; }
  .pos-line { display:flex; gap:14px; align-items:baseline; }
  .pos-line .k { font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.12em; text-transform:uppercase; min-width:64px; }
  .pos-line .v { font-size:16px; color:var(--ink); transition:opacity .35s var(--ease), transform .35s var(--ease); }
  .pos-line .v.swap { opacity:0; transform:translateY(4px); }
  .pos-line .v.is-verified { color:var(--verified); }
  .pos-chain { display:flex; gap:6px; padding:14px 20px 18px; border-top:1px solid var(--rule); }
  .pos-chain .dot { flex:1; height:4px; border-radius:2px; background:var(--paper-sunk); }
  .pos-chain .dot.on { background:var(--open); }
  .pos-chain .dot.done { background:var(--verified); }
  .pos-caption { font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.06em; margin-top:16px; }

  /* ============ 1. HERO ============ */
  .hero { padding-top:clamp(36px,6vw,64px); }
  .hero .grid { display:grid; gap:clamp(28px,5vw,56px); align-items:center; }
  @media (min-width:980px){ .hero .grid { grid-template-columns:1.05fr 1fr; } }
  .hero .h1 { font-family:var(--serif); font-weight:500; line-height:1.02; font-size:clamp(42px,10vw,82px); letter-spacing:-.01em; max-width:13ch; }
  .hero .sub { font-size:clamp(18px,4.6vw,23px); line-height:1.42; color:var(--ink-2); max-width:40ch; margin:22px 0 30px; }
  .hero .cta { font-size:17px; padding:16px 26px; }
  @media (max-width:979px){ .hero .pos { margin-top:8px; } }

  /* ============ 2. THE GAP ============ */
  .gap { background:var(--paper-raised); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .gap .lede { font-size:clamp(34px,8vw,58px); max-width:18ch; }
  .pipeline { margin-top:clamp(36px,6vw,56px); display:flex; flex-direction:column; }
  .pipe-node { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--rule); }
  .pipe-node .dot { width:13px; height:13px; border-radius:50%; background:var(--ink); flex:0 0 auto; }
  .pipe-node .t { font-family:var(--mono); font-size:14px; letter-spacing:.06em; }
  .pipe-node .state { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.08em; }
  .pipe-gap { border:1px dashed var(--open); border-radius:8px; padding:4px 0; margin:8px 0; overflow:hidden; }
  .pipe-gap .head { display:flex; align-items:center; gap:14px; padding:12px 14px; }
  .pipe-gap .head .dot { width:13px; height:13px; border-radius:50%; background:var(--open); box-shadow:0 0 0 5px var(--open-bg); flex:0 0 auto; }
  .pipe-gap .head .t { font-family:var(--mono); font-size:14px; color:var(--open); font-weight:600; letter-spacing:.06em; }
  .pipe-gap .head .hint { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .pipe-gap .inner { max-height:0; opacity:0; transition:max-height .8s var(--ease), opacity .8s var(--ease); }
  .pipe-gap .inner .row { display:flex; align-items:center; gap:14px; padding:9px 14px; border-top:1px solid var(--rule); }
  .pipe-gap .inner .row .t { font-size:14px; color:var(--ink); }
  .pipe-gap .inner .row .tick { margin-left:auto; width:16px; height:16px; border-radius:50%; background:var(--verified); display:flex; align-items:center; justify-content:center; }
  .pipe-gap .inner .row .tick svg { width:10px; height:10px; }
  .gap.is-revealed .pipe-gap { border-style:solid; background:#fff; }
  .gap.is-revealed .pipe-gap .inner { max-height:280px; opacity:1; }
  @media (min-width:900px){
    .pipeline { flex-direction:row; align-items:stretch; gap:0; }
    .pipe-node { flex:1; flex-direction:column; align-items:flex-start; gap:14px; padding:18px 16px; border-bottom:0; border-left:1px solid var(--rule); }
    .pipe-node:first-child { border-left:0; }
    .pipe-node .state { margin-left:0; }
    .pipe-gap { flex:1.4; margin:0; align-self:stretch; }
    .pipe-gap .inner .row { flex-direction:column; align-items:flex-start; }
    .pipe-gap .inner .row .tick { margin-left:0; margin-top:6px; }
    .pipeline .arr { align-self:center; color:var(--ink-3); font-family:var(--mono); font-size:18px; }
  }

  /* ============ 3. THREE JOBS (loop) ============ */
  .jobs .lede { font-size:clamp(34px,8vw,56px); }
  .loop { margin-top:clamp(36px,6vw,56px); position:relative; }
  .loop .nodes { display:flex; flex-direction:column; gap:0; }
  .loop .node { padding:22px 0; border-top:1px solid var(--rule-strong); }
  .loop .node .k { font-family:var(--mono); font-size:12px; color:var(--open); letter-spacing:.16em; text-transform:uppercase; }
  .loop .node h3 { font-family:var(--serif); font-weight:500; font-size:clamp(26px,5vw,34px); line-height:1.1; margin:8px 0 6px; }
  .loop .node p { font-size:16px; color:var(--ink-2); max-width:40ch; }
  .loop .cycle { margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--ink-3); letter-spacing:.1em; }
  @media (min-width:900px){
    .loop .nodes { flex-direction:row; }
    .loop .node { flex:1; padding:30px 34px 30px 0; border-top:0; border-right:1px solid var(--rule-strong); }
    .loop .node + .node { padding-left:34px; }
    .loop .node:last-child { border-right:0; }
    .loop svg.loop-arrows { position:absolute; top:-38px; left:0; right:0; width:100%; }
  }

  /* ============ 4. ONE POSITION (record + timeline) ============ */
  .position { background:#fff; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .position .lede { font-size:clamp(34px,8vw,56px); max-width:22ch; }
  .record { margin-top:clamp(32px,6vw,52px); display:grid; gap:0; }
  @media (min-width:980px){ .record { grid-template-columns:1.1fr 1fr; gap:0; align-items:start; } }
  .record .pos { box-shadow:none; border-radius:0; }
  .timeline { border-top:1px solid var(--rule-strong); }
  @media (min-width:980px){ .timeline { border-top:0; border-left:1px solid var(--rule-strong); } }
  .timeline .row { display:flex; gap:16px; padding:16px 20px; border-bottom:1px solid var(--rule); align-items:flex-start; }
  .timeline .row .glyph { width:26px; height:26px; flex:0 0 auto; margin-top:1px; }
  .timeline .row .glyph svg { width:100%; height:100%; display:block; }
  .timeline .row .body { max-width:none; }
  .timeline .row .t { font-family:var(--serif); font-size:18px; font-weight:500; }
  .timeline .row .note { font-size:13.5px; color:var(--ink-3); margin-top:2px; }
  .timeline .row .when { margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; white-space:nowrap; }

  /* ============ 5. PROOF ============ */
  .proof .lede { font-size:clamp(34px,8vw,56px); max-width:20ch; }
  .cohorts { margin-top:clamp(36px,6vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .cohort { border:1px solid var(--rule-strong); border-radius:8px; padding:22px 20px; }
  .cohort .k { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .cohort .big { font-family:var(--serif); font-weight:500; font-size:clamp(40px,9vw,64px); line-height:1; margin:10px 0 4px; }
  .cohort .unit { font-family:var(--mono); font-size:13px; color:var(--ink-3); }
  .cohort.worked { background:var(--verified-bg); border-color:var(--verified); }
  .cohort.worked .big { color:var(--verified); }
  .cohort.waiting { background:var(--paper-raised); }
  .delta { margin-top:18px; font-family:var(--serif); font-size:clamp(20px,4.5vw,28px); font-weight:500; }
  .delta b { color:var(--verified); font-weight:600; }
  .proof .method { margin-top:22px; font-size:16px; color:var(--ink-2); max-width:60ch; }
  .proof .deeper { display:inline-block; margin-top:18px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-decoration:none; border-bottom:1px solid var(--ink-3); padding-bottom:2px; }

  /* ============ 6. CLOSE ============ */
  .close { background:var(--ink); color:var(--paper); }
  .close .eyebrow { color:#9AA0A8; }
  .close .lede { font-size:clamp(34px,8vw,56px); max-width:20ch; }
  .close .list { margin:28px 0; display:grid; gap:12px; }
  .close .list .li { display:flex; gap:14px; align-items:baseline; font-size:17px; color:#D7DADF; }
  .close .list .li b { font-family:var(--mono); font-weight:400; color:#9AA0A8; font-size:14px; min-width:74px; }
  .close .cta { background:var(--paper); color:var(--ink); font-size:17px; padding:16px 26px; }
  .close .cta:hover { background:#E8E4DB; }

  footer { padding:28px var(--gut) 48px; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; border-top:1px solid var(--rule); }
  footer .fname { font-family:var(--serif); font-size:16px; }
  footer .fnote { font-size:13px; color:var(--ink-3); }
  footer .flink { margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--ink-3); }

  @media (prefers-reduced-motion: reduce){ * { animation:none !important; transition:none !important; } }