/* Page styles — index.html
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

:root{--paper:#faf9f6;--paper-2:#f2f0ea;--ink:#111110;--ink-soft:#3d3c38;--ink-mute:#6f6d66;--line:#dcd9d0;--disp:'Space Mono',ui-monospace,monospace;--body:'Manrope',sans-serif;--mono:'IBM Plex Mono',monospace;--max:1080px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.ffsym{height:.72em;width:auto;fill:currentColor;stroke:currentColor;display:inline-block;vertical-align:baseline;transform:translateY(.02em)}

/* V13: dark nav carries the lockup */
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--ink);border-bottom:1px solid #2e2d2a}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.logo-link .ffsym{height:15px}

.logo-link .dotai{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--paper);transform:translateY(-1px);margin-left:-8px}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#c9c7bf;padding:4px 0;border-bottom:1.5px solid transparent}
.nav-links a:hover{color:var(--paper)}
.nav-links a.on{color:var(--paper);border-bottom-color:var(--paper)}
.nav-cta{border:1.5px solid var(--paper);padding:8px 16px;border-radius:2px;color:var(--paper)!important;font-weight:600}
.ham{display:none;background:none;border:1.5px solid var(--paper);border-radius:2px;padding:7px 10px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper)}
@media(max-width:960px){
.ham{display:inline-block}
.nav-links{position:fixed;top:53px;left:0;right:0;background:var(--ink);border-bottom:1px solid #2e2d2a;flex-direction:column;align-items:flex-start;padding:18px 24px;gap:14px;display:none}
.nav-links.open{display:flex}
}

/* Resting state only. Hover, active and the transition list are the button
   system in site.css — `transition:all` is what let a stray letter-spacing rule
   there animate the button's width. */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:2px;border:1.5px solid var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{color:var(--ink)}

/* V15 hero: the threshold. The film carries the plane; layout lives in
   index.components.css under .hero. */
header{position:relative;margin-top:53px}
.statement{border-bottom:1px solid var(--line)}
.statement-in{max-width:var(--max);margin:0 auto;padding:64px 24px 60px}
.statement .desc{font-family:var(--mono);font-size:clamp(12px,1.4vw,14px);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:12px;margin-bottom:26px}
.statement .desc .ffsym{height:.9em}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(36px,6vw,68px);line-height:1.04;letter-spacing:-0.025em;max-width:17ch}
h1 .turn{display:block}
.hero-sub{max-width:56ch;margin-top:24px;font-size:clamp(17px,2vw,19.5px);color:var(--ink-soft)}
.hero-sub strong{font-weight:700;color:var(--ink)}
.hero-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--ink-mute)}

/* The record band. Three readings, and the third is not the same kind of
   quantity as the other two: steps and close-days are drops from a baseline
   the client co-signed, so each is drawn to scale inside that baseline —
   solid ink for where it landed, hairline for the span it used to cover, and
   --reach on the tile carries the ratio. Time to production has no baseline
   to shrink against, so it is drawn as what it is: twelve week ticks on the
   same rule. One grammar across all three — the bright vertical mark is
   always where the reading lands.
   Rules are scoped under .ribbon so they outrank the bare-class typography
   layer in site.css, which loads after this file. */
.ribbon{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line)}
.ribbon-in{max-width:var(--max);margin:0 auto;padding:26px 24px}
.ribbon-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#9b9992;margin:0 0 28px}
.rv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.rv-stat{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.ribbon .rl{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#9b9992}
.ribbon .rn{display:flex;align-items:baseline;font-family:var(--disp);font-weight:700;font-size:clamp(32px,4.2vw,48px);line-height:1;letter-spacing:-0.045em;margin-top:14px}
.ribbon .ru{font-family:var(--mono);font-weight:400;font-size:clamp(11px,1.05vw,13px);letter-spacing:.14em;text-transform:uppercase;color:#9b9992;margin-left:10px}

/* the measure */
.rmeasure{position:relative;display:block;width:100%;height:12px;margin-top:22px}
.rmeasure::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#33322e}
.rmeasure::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background:#6f6d66}
.rfill{position:absolute;left:0;top:50%;margin-top:-2px;height:4px;width:var(--reach,0%);background:var(--paper)}
.rfill::after{content:"";position:absolute;right:0;top:-4px;bottom:-4px;width:1px;background:var(--paper)}
.rticks{position:absolute;inset:0;display:flex;justify-content:space-between}
.rticks i{width:1px;background:#6f6d66}
.rticks i:last-child{background:var(--paper)}
/* the twelfth tick is the landing mark, so the tile drops the baseline tick */
.is-span .rmeasure::after{display:none}
/* the co-signed number is the point of this line, so it carries the light
   and the word in front of it stays quiet */
.rfrom{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8b8981;margin-top:10px;align-self:stretch;text-align:right}
.rfrom b{font-weight:500;color:#c9c7bf}

@media(max-width:640px){
.rv-stats{grid-template-columns:1fr;gap:0}
.rv-stat{padding:20px 0;border-top:1px solid #2e2d2a}
.rv-stat:first-child{border-top:none;padding-top:2px}
.rv-stat:last-child{padding-bottom:2px}
}

section{padding:84px 0;border-top:1px solid var(--line)}
.ch-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px;display:flex;align-items:center;gap:11px}
.ch-eyebrow .ffsym{height:.85em;color:var(--ink)}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(27px,4vw,42px);line-height:1.12;letter-spacing:-0.02em;max-width:26ch;margin-bottom:22px}
.lede{font-size:clamp(16.5px,1.85vw,19px);color:var(--ink-soft);max-width:66ch}
.lede+.lede{margin-top:14px}
.lede strong{color:var(--ink);font-weight:700}
mark{background:none;color:var(--ink);font-weight:700;box-shadow:inset 0 -0.45em 0 0 #e7e3d8;padding:0 1px}
.pull{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-0.015em;border-left:1.5px solid var(--ink);padding-left:22px;margin:38px 0 0;max-width:36ch}

.ways{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(max-width:820px){.ways{grid-template-columns:1fr}}
.way{padding:30px 28px}
.way.old{background:var(--paper-2);color:var(--ink-soft)}
.way.new{background:var(--ink);color:var(--paper)}
.way .wt{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px;display:block}
.way.old .wt{color:var(--ink-mute)}
.way.new .wt{color:#9b9992}
.way ol{list-style:none}
.way li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 0;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-size:14.5px;line-height:1.5}
.way li:first-child{border-top:none}
/* opacity:.55 applied to both planes at once. On .way.old that resolved to #8e8e8c on
   paper-2 — 2.98:1 — for numerals that carry the step order. Named per plane instead. */
.way li .n{font-family:var(--mono);font-size:12px;padding-top:2px}
.way.old li .n{color:var(--ink-mute)}
.way.new li .n{color:#9b9992}
.way .verdict{margin-top:20px;font-family:var(--head);font-weight:600;font-size:16.5px}
.way.old .verdict{color:var(--ink-mute)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--paper-2);padding:28px 26px;border-radius:2px}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:11px}
.card h3{font-family:var(--head);font-weight:600;font-size:18.5px;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--ink-soft)}

.evlos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
@media(max-width:820px){.evlos{grid-template-columns:1fr}}
.stage{padding:24px 20px;border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.stage:last-child{border-right:none}
.stage{position:relative}
.stage:not(:last-child)::after{content:"";position:absolute;right:-7px;top:44%;width:11px;height:11px;background:var(--paper);border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);z-index:2}
/* auto pushes the gate to the floor of the column, so all five gates share a
   line no matter how long the copy above them runs */
.stage .gate{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);border-top:1px dashed var(--line);padding-top:8px}
@media(max-width:820px){.stage:not(:last-child)::after{display:none}}
@media(max-width:820px){.stage{border-right:none;border-bottom:1px solid var(--line)}.stage:last-child{border-bottom:none}}
.stage .ltr{font-family:var(--disp);font-weight:700;font-size:30px}
.stage .nm{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:6px 0 10px}
.stage p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:12px}

.rec-table{margin-top:44px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.rrow{border-bottom:1px solid var(--line);background:var(--paper);padding:20px 26px;display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:16px;align-items:baseline}
@media(max-width:820px){.rrow{grid-template-columns:1fr}}
.rrow:last-child{border-bottom:none}
.rrow .fn{font-family:var(--disp);font-weight:600;font-size:16.5px}
.rrow .fn small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink-mute);margin-top:3px;letter-spacing:.04em}
.rrow .rs{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.2vw,24px)}
.rrow .st{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);text-align:right}
@media(max-width:820px){.rrow .st{text-align:left}}
.provenance{margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--ink-mute);max-width:70ch}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}
.pcol{border:1px solid var(--line);border-radius:2px;padding:26px 24px;background:var(--paper)}
.pcol .pk{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:14px}
.pchips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-family:var(--mono);font-size:12.5px;border:1.5px solid var(--ink);padding:7px 14px;border-radius:2px;font-weight:500}
.pcol p{font-size:14px;color:var(--ink-soft)}

.dark{background:var(--ink);color:var(--paper)}
.dark .ch-eyebrow{color:#9b9992}
.dark .ch-eyebrow .ffsym{color:var(--paper)}
.dark h2{color:var(--paper)}
.dark .lede{color:#c9c7bf}.dark .lede strong{color:var(--paper)}

.commissions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.commissions{grid-template-columns:1fr}}
.comm{border:1.5px solid var(--ink);border-radius:2px;padding:28px 26px;background:var(--paper);display:flex;flex-direction:column}
.comm .ck{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:12px}
.comm h3{font-family:var(--head);font-weight:600;font-size:18.5px;margin-bottom:9px}
.comm p{font-size:14px;color:var(--ink-soft);margin-bottom:16px}
.comm dl{font-size:13px;margin-top:auto}
.comm dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.comm dt{color:var(--ink-mute);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.comm dd{font-weight:600;text-align:right}
.gate{margin-top:44px;border-left:1.5px solid var(--ink);padding:4px 0 4px 24px;max-width:70ch}
.gate p{font-size:clamp(16px,1.75vw,18px);color:var(--ink-soft)}
.gate p strong{color:var(--ink)}
.begin-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:stretch}
@media(max-width:900px){.begin-doors{grid-template-columns:1fr}}
.bdoor{border:1px solid var(--line);border-radius:2px;padding:26px 24px;background:var(--paper-2);display:flex;flex-direction:column}
.bdoor .bk{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:11px}
.bdoor h3{font-family:var(--head);font-weight:600;font-size:18px;margin-bottom:8px}
.bdoor p{font-size:14px;color:var(--ink-soft);margin-bottom:20px}
.bdoor .btn{margin-top:auto;align-self:flex-start}
.platform-note{margin-top:40px;font-size:14.5px;color:var(--ink-soft);border:1px solid var(--line);border-radius:2px;padding:20px 24px;background:var(--paper);max-width:78ch}

/* ===== the mission · eighty =====
   The section runs on prose alone: the heading's triad, two ledes, and the
   conditions of admission. */

/* Three clauses, one per line — the same gesture the hero opens on, closing the
   argument the way it began. A wrapped clause would read as four lines and lose
   the triad, so the heading is sized to its own longest line rather than left to
   the shared h2 scale. Space Mono is monospaced, so that line has a knowable
   width: 27 characters at ~0.55em of advance each is ~14.9em, and the second
   term of min() is the largest size that still fits inside the 20px gutters.
   Both constants are tied to this copy; re-measure if the wording changes. */
.mh{max-width:none;font-size:min(clamp(26px,3.8vw,42px),calc(6.6vw - 3.6px))}
.mh .ml{display:block}

/* The four conditions of admission, as rows rather than a card grid: this is
   the part of the section that has to be read.
   The block takes the lede's own font-size so that 64ch resolves to the lede's
   exact measure — the rules stop where the paragraphs above them stop, rather
   than two characters short of it. The rows then size in em, off that. */
.joins{margin-block:clamp(34px,3.8vw,48px);max-width:64ch;font-size:clamp(16.5px,1.85vw,19px)}
.joins .jk{font-family:var(--disp);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:14px}
.joins ul{list-style:none}
.joins li{border-top:1px solid var(--line);padding:15px 0;font-size:.92em;line-height:1.45;color:var(--ink-soft)}
.joins li:last-child{border-bottom:1px solid var(--line)}

footer{border-top:1px solid var(--line);padding:40px 0 52px;background:var(--paper)}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .legal{font-family:var(--mono);font-size:12px;color:var(--ink-mute);max-width:62ch}
footer .logo-link{color:var(--ink)}

footer .logo-link .dotai{color:var(--ink)}
footer .logo-link .ffsym{color:var(--ink)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wordmark{font-family:'Space Mono',monospace;font-weight:700;font-size:16px;letter-spacing:-0.01em}
/* Print keeps #fff and #000 deliberately, against the brand's two-tone rule. On paper
   #fff means "lay down no ink" — printing the warm paper tone would flood every page
   with a solid background wash. The rule governs screens; this is a different medium. */
@media print{nav,.hero-film,.hero-ctas,.btn,.begin-doors,footer .logo-link{display:none!important}body{font-size:11pt}section{padding:24px 0;page-break-inside:avoid}.ribbon{background:#fff;color:#000;border:1px solid #000}.ribbon .rl,.ribbon .ru,.ribbon-note{color:#444}.rfrom{color:#666}
/* the band inverts for paper, so the measure has to invert with it */
.rmeasure{clip-path:none!important;animation:none!important}.rmeasure::before{background:#bbb}.rmeasure::after,.rticks i{background:#888}.rfill,.rfill::after,.rticks i:last-child{background:#000}.dark{background:#fff;color:#000}.dark h2,.dark .lede{color:#000}.way.new{background:#fff;color:#000;border-left:1px solid #000}
.hero{min-height:0;padding-bottom:0}.hero h1,.hero .hero-sub,.hero .hero-sub strong,.hero .hero-note,.hero .desc,.film-copy h2,.film-copy p{color:#000}.hero .hero-sub mark{box-shadow:none;text-decoration:underline}}

/* Three cards in a two-up grid strand the last one beside an empty cell, so it
   spans the full row instead. */
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}.pgrid .pcol:last-child{grid-column:1/-1}}
@media(max-width:600px){.pgrid{grid-template-columns:1fr}.pgrid .pcol:last-child{grid-column:auto}}

.pgrid .chip{font-size:11.5px;padding:6px 11px}
.pgrid .pcol p{font-size:13.5px}

/* One pull quote set a sentence to a line, requested by review. The breaks are
   hard <br>s in the markup, so the only job here is the measure: the longest
   sentence is 61 characters and the inherited 36ch cap would wrap it, which
   defeats the point. 62ch fits it on one line at 1440 (about 967px against
   1010px of available column). Below roughly 900px the type stops scaling and
   that sentence wraps anyway; the other two still hold their own lines, so the
   stanza survives.

   Two classes, because site.css:323 re-declares max-width on .pull and
   index.css loads BEFORE site.css -- equal specificity would lose. Scoped to
   this instance; the other ten .pull elements across seven pages keep 36ch.

   This replaced a justify treatment. Justified Space Mono in a narrow measure
   with no hyphenation opened rivers wide enough to read as a rendering bug,
   which is the same failure site.css:495 documents when it pins .pull to
   text-align:left. Do not reintroduce it. */
.pull.pull-lines{max-width:62ch}

/* The "Seen enough?" band. This was a div carrying eleven inline declarations,
   which is why it could not be fixed from a stylesheet: `align-items:center`
   inline outranks any rule short of !important. Same values, now in a class.

   The bug it was hiding: the band is a flex row, so .hero-ctas was a flex item
   sized to its own content -- 267px. Below 720px site.css:363 stretched the two
   buttons to 100% OF THAT, so they came out equal but only ~60% of the band,
   left-aligned against empty space. The hero gets this right by accident:
   there .hero-ctas is a block-level child, so 100% means the full column.
   Going to column here reproduces that, and the buttons fill the band edge to
   edge the way the hero's do.

   720px is site.css:361's breakpoint, not a new one -- the rule the design
   system labels "3 · THUMB TEST: primary actions sit in reach on mobile, never
   edge-locked". This band was the one CTA pair on the site that never met it. */
.cta-band{margin-top:44px;border:1.5px solid var(--ink);border-radius:2px;padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--paper)}
.cta-band p{font-family:var(--disp);font-weight:600;font-size:clamp(17px,2vw,20px);letter-spacing:-0.014em;margin:0}
.cta-band .hero-ctas{margin-top:0}
@media(max-width:720px){.cta-band{flex-direction:column;align-items:stretch}}