:root{--ink:#060A12;--navy:#0A1220;--panel:#111C2E;--panel-2:#16223A;--line:#232F49; --gold:#C9A24B;--gold-lt:#E8C87E;--gold-dk:#8A6A28;--white:#fff;--body:#C3CCDA;--muted:#9AA6B8; --fd:'Space Grotesk','Helvetica Neue',Arial,sans-serif;--fb:'Inter',system-ui,Arial,sans-serif; --fm:'IBM Plex Mono',ui-monospace,monospace} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:96px} body{background:var(--navy);color:var(--body);font-family:var(--fb);font-weight:400; font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} .eyebrow{font-family:var(--fm);font-weight:500;font-size:11.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:22px} .eyebrow::after{content:"";height:1px;flex:1;max-width:64px; background:linear-gradient(90deg,var(--gold-dk),transparent)} .eyebrow.ctr{justify-content:center}.eyebrow.ctr::after{display:none} h1{font-family:var(--fd);font-weight:700;font-size:clamp(34px,4.05vw,59px);line-height:1.04;text-wrap:balance; letter-spacing:-.032em;color:var(--white);margin-bottom:24px} h1 em,h2 em{font-style:normal;color:var(--gold-lt);font-weight:500} h2{font-family:var(--fd);font-weight:700;font-size:clamp(27px,3vw,43px);line-height:1.08; letter-spacing:-.030em;color:var(--white);margin-bottom:18px} h3{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--white);margin-bottom:10px} .lede{font-size:clamp(18px,1.35vw,20px);line-height:1.62;color:var(--body);max-width:52ch;font-weight:400} .intro{font-size:17px;line-height:1.68;color:var(--muted);max-width:60ch;margin-bottom:46px;font-weight:400} /* focus state — keyboard parity with hover */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:2px} nav{position:sticky;top:0;z-index:200;display:flex;justify-content:space-between;align-items:center; padding:18px clamp(24px,5vw,72px);background:rgba(10,18,32,.78);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--fd);font-weight:700;font-size:14px; letter-spacing:.13em;text-transform:uppercase;color:var(--white)} .logo-mark{width:26px;height:26px;flex:0 0 26px;display:block} .nav-links{display:flex;align-items:center;gap:34px} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px; padding:0 8px;background:transparent;border:1px solid var(--line);border-radius:2px;cursor:pointer} .nav-toggle span{display:block;height:1.5px;background:var(--body);border-radius:1px; transition:transform .25s,opacity .25s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .nav-links a{font-family:var(--fd);font-size:13.5px;font-weight:500;color:var(--body); text-decoration:none;position:relative;padding:3px 0;transition:color .22s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .28s cubic-bezier(.22,1,.36,1)} .nav-links a:hover{color:var(--white)}.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)} .btn-primary,.btn-line,.btn-ghost{text-decoration:none;display:inline-block;text-align:center} .btn-ghost{font-family:var(--fd);font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--gold-lt); background:transparent;border:1px solid rgba(201,162,75,.42);border-radius:2px;padding:9px 20px; cursor:pointer;transition:background .25s,border-color .25s,color .25s} .btn-ghost:hover{background:rgba(201,162,75,.1);border-color:var(--gold);color:var(--white)} /* the hero fills the first screen: copy centred in the space above the section map, and the CODEX figure as a large background on the right, faded on its left edge (under the headline) and its bottom edge (into the map) so it bleeds off rather than sitting in a column. The nav is ~74px tall; svh keeps the fold honest on mobile. */ .hero{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 74px); padding:clamp(26px,3.2vh,66px) clamp(24px,5vw,72px) 0; max-width:1620px;margin:0 auto;overflow:hidden} .hero-copy{position:relative;z-index:3;max-width:860px;margin:auto 0; padding:clamp(24px,5vh,72px) 0} .hero-ctas{display:flex;gap:14px;margin-top:clamp(20px,2.8vh,36px);flex-wrap:wrap} .btn-primary{font-family:var(--fd);font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--ink); background:linear-gradient(135deg,var(--gold-lt),var(--gold) 58%,var(--gold-dk));border:none; border-radius:2px;padding:14px 30px;cursor:pointer; box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 8px 26px -12px rgba(201,162,75,.55); transition:transform .22s,filter .22s} .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 12px 32px -12px rgba(201,162,75,.65)}.btn-primary:active{transform:translateY(0);filter:brightness(.95);box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 4px 12px -8px rgba(201,162,75,.5)}.btn-line:active,.btn-ghost:active,.cb-btn:active{transform:translateY(0);filter:brightness(.93)} .btn-line{font-family:var(--fd);font-size:13.5px;font-weight:600;letter-spacing:.05em;color:var(--white); background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:2px;padding:14px 30px; cursor:pointer;transition:border-color .25s,background .25s} .btn-line:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04)} .hero-visual{position:absolute;z-index:1;pointer-events:none; top:50%;right:clamp(-200px,-7vw,-60px);transform:translateY(-54%); width:clamp(600px,88vh,980px)} .hero-visual svg{width:100%;height:auto;display:block;opacity:.78} .hero-visual::after{content:"";position:absolute;inset:-2px; background:linear-gradient(90deg,var(--navy) 0%,rgba(10,18,32,.72) 24%,rgba(10,18,32,0) 56%), linear-gradient(180deg,rgba(10,18,32,0) 58%,var(--navy) 96%)} @keyframes codexpulse{0%,100%{opacity:.55}50%{opacity:.9}} #codex-glow{transform-origin:420px 420px;opacity:.55;animation:codexpulse 8s ease-in-out 3 forwards} @media (prefers-reduced-motion:reduce){#codex-glow{animation:none}} /* CODEX figure — the gold variant ticks populate on load (one shot), then only the 21 bright markers breathe (opacity and radius; all 21 share r=2.7 in the markup). Hooked by attribute so the SVG stays byte-identical for tools/audit.py. Keyframes deliberately omit 100%: each element settles back to its own opacity attribute. The global reduced-motion rule below covers all of this. */ @keyframes vtin{from{opacity:0}} @keyframes vtbreathe{0%,100%{opacity:1;r:3.4px}50%{opacity:.15;r:1.8px}} .hero-visual line[stroke="#C9A24B"], .hero-visual circle[fill="#C9A24B"], .hero-visual circle[fill="#E8C87E"]{animation:vtin .9s ease-out .2s backwards} .hero-visual line[stroke="#C9A24B"]:nth-of-type(5n+1),.hero-visual circle[fill="#C9A24B"]:nth-of-type(5n+1){animation-delay:.45s} .hero-visual line[stroke="#C9A24B"]:nth-of-type(5n+2),.hero-visual circle[fill="#C9A24B"]:nth-of-type(5n+2){animation-delay:.7s} .hero-visual line[stroke="#C9A24B"]:nth-of-type(5n+3),.hero-visual circle[fill="#C9A24B"]:nth-of-type(5n+3){animation-delay:.95s} .hero-visual line[stroke="#C9A24B"]:nth-of-type(5n+4),.hero-visual circle[fill="#C9A24B"]:nth-of-type(5n+4){animation-delay:1.2s} .hero-visual circle[fill="#E8C87E"]{animation:vtin .9s ease-out .2s backwards,vtbreathe 5.5s ease-in-out 2.4s infinite} .hero-visual circle[fill="#E8C87E"]:nth-of-type(5n+1){animation-delay:.45s,3.9s;animation-duration:.9s,6.5s} .hero-visual circle[fill="#E8C87E"]:nth-of-type(5n+2){animation-delay:.7s,5.1s;animation-duration:.9s,4.8s} .hero-visual circle[fill="#E8C87E"]:nth-of-type(5n+3){animation-delay:.95s,2.9s;animation-duration:.9s,7.2s} .hero-visual circle[fill="#E8C87E"]:nth-of-type(5n+4){animation-delay:1.2s,4.6s;animation-duration:.9s,5.9s} /* the section map: every page, one glance, pinned to the bottom of the first screen with the copy centred above it */ .site-map{position:relative;z-index:3;margin:auto 0 0; border-top:1px solid var(--line);padding:clamp(22px,3.4vh,40px) 0 clamp(26px,3.6vh,48px)} .map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,22px)} .map-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:15px 16px 30px; border:1px solid var(--line);border-radius:3px;background:var(--panel); text-decoration:none;color:var(--body); transition:border-color .25s,background .25s,transform .22s} .map-card:hover{border-color:rgba(201,162,75,.45);background:var(--panel-2);transform:translateY(-2px)} .map-card .eyebrow{margin:0} .map-h{font-family:var(--fd);font-weight:700;font-size:clamp(14.5px,1vw,16.5px);line-height:1.25; letter-spacing:-.02em;color:var(--white);text-wrap:balance} .map-h em{font-style:normal;color:var(--gold-lt);font-weight:500} .map-stat{font-family:var(--fm);font-weight:500;font-size:clamp(9px,.74vw,10.5px);letter-spacing:.035em; text-transform:uppercase;color:var(--muted);line-height:1.5} .map-stat b{font-family:var(--fd);font-weight:700;font-size:13.5px;letter-spacing:-.01em; color:var(--gold-lt);margin-right:5px} .map-go{position:absolute;right:15px;bottom:10px;font-family:var(--fd);font-size:15px; font-weight:600;line-height:1;color:var(--gold-lt);transition:color .25s,transform .25s} .map-card:hover .map-go{color:var(--white);transform:translateX(3px)} @media (min-width:1081px) and (max-width:1200px){ .map-card{padding:14px 11px 28px} .map-stat{letter-spacing:.02em} .map-stat b{margin-right:4px} } .founders{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:3px;overflow:hidden} .fo{background:var(--navy);padding:34px 30px 32px;display:flex;flex-direction:column; align-items:flex-start;gap:20px} .av{width:104px;height:104px;border-radius:50%;overflow:hidden;position:relative;flex:none; border:1px solid rgba(201,162,75,.5);background:#101B2E} .av img{width:100%;height:100%;object-fit:cover;display:block} .av::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(201,162,75,.16)} .av.ph{display:flex;align-items:center;justify-content:center;border-style:dashed; border-color:rgba(201,162,75,.3)} .av.ph span{font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:#3E4A63} .av.sm{width:74px;height:74px;flex:none} .fo .nm{font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:-.025em;color:#fff} .fo .rl{font-size:14.5px;color:var(--body);font-weight:400;margin-top:4px} .fo .ds{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--gold);margin-top:10px;line-height:1.6} .figwrap{margin:-14px 0 40px} .resfig{width:100%;height:auto;display:block;max-width:1180px} .gov{display:grid;grid-template-columns:1fr 2fr;gap:34px;margin-top:56px} .ppl{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:3px;overflow:hidden;align-content:start} .ppl.one{grid-template-columns:1fr} .ppl.two{grid-template-columns:1fr 1fr} /* Gill and Warnecke-Gill sit on the board but their headshots are already in the founders row above; repeating them would push this column far past the Advisors matrix beside it. Text-only keeps the two columns close in height. */ .ad-pair{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:1px; background:var(--line)} .ad-txt{background:var(--navy);padding:18px 20px} .ad-txt .nm{font-family:var(--fd);font-weight:600;font-size:16px;letter-spacing:-.02em;color:#fff} .ad-txt .rl{font-size:13px;color:var(--body);font-weight:400;margin-top:3px} .ad-txt .af{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--gold);margin-top:6px} @media (max-width:520px){.ad-pair{grid-template-columns:1fr}} .ad{background:var(--navy);padding:22px 20px;display:flex;align-items:center;gap:16px;text-align:left} .ad.lead{background:linear-gradient(180deg,rgba(201,162,75,.07),rgba(201,162,75,.012))} .ad.lead .rl{color:var(--gold-lt)} .av.ph{display:flex;align-items:center;justify-content:center;border-style:dashed; border-color:rgba(201,162,75,.28);background:#0D1626} .av.ph span{font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:#3E4A63} .ad .rl{font-size:13.5px;color:var(--body);font-weight:400;margin-top:3px} .op .nm{font-family:var(--fd);font-weight:600;font-size:16px;letter-spacing:-.02em;color:#fff} .op .rl{font-size:13.5px;color:var(--body);font-weight:400;margin-top:3px} .op .ds{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--gold);margin-top:6px} .ad .nm{font-family:var(--fd);font-weight:600;font-size:17px;letter-spacing:-.02em;color:#fff} .ad .af{font-family:var(--fm);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--gold);margin-top:7px;line-height:1.55;min-height:1.55em} .li{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--fm); font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); text-decoration:none;transition:color .22s} .li svg{width:13px;height:13px;fill:currentColor;flex:none} .li:hover{color:var(--gold-lt)} .li span{border-bottom:1px solid transparent;transition:border-color .22s} .li:hover span{border-color:var(--gold-lt)} .subhd{font-family:var(--fm);font-size:11.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:12px} .subhd::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)} .inv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .iv{border:1px solid var(--line);border-radius:3px;height:96px;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.02);transition:border-color .3s} .iv:hover{border-color:rgba(201,162,75,.4)} .iv img{height:56px;width:auto;max-width:84%;object-fit:contain;opacity:.85;display:block} .iv:hover img{opacity:1} section.band{padding:clamp(72px,7.5vw,116px) clamp(24px,5vw,72px);max-width:1620px;margin:0 auto} .band-sep{border-top:1px solid var(--line)} .surface{background:linear-gradient(180deg,var(--ink),var(--navy))} /* the pipeline figure is 1500 units wide; below ~1200px it must scroll rather than shrink, or its 13.5-unit labels render under 8px */ .wide{overflow-x:auto;overscroll-behavior-x:contain;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:thin;scrollbar-color:var(--line) transparent} .wide::-webkit-scrollbar{height:8px} .wide::-webkit-scrollbar-track{background:transparent} .wide::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .wide svg{width:100%;min-width:1180px;height:auto;display:block} .figscroll-hint{display:none;font-family:var(--fm);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-top:10px} @media (max-width:1240px){.figscroll-hint{display:block}} .versus{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:3px;overflow:hidden} .vs-side{background:var(--panel);padding:36px 32px} .vs-side.ours{background:linear-gradient(180deg,rgba(201,162,75,.075),rgba(201,162,75,.015))} .vs-tag{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin-bottom:14px} .vs-side.ours .vs-tag{color:var(--gold)} .vs-side h3{font-size:24px;margin-bottom:16px} .vs-side.ours h3{color:var(--gold-lt)} .vs-side ul{list-style:none;font-size:16px;line-height:1.82;color:#8E9AAF;font-weight:400} .vs-side li{padding-left:17px;position:relative} .vs-side li::before{content:"—";position:absolute;left:0;color:#6E7996} .vs-side.ours li::before{content:"+";color:var(--gold)} .loop{display:grid;grid-template-columns:1fr 1.5fr .95fr 1.5fr;border:1px solid var(--line); border-radius:3px;overflow:hidden} .loop-step{padding:28px 22px;border-right:1px solid var(--line);background:var(--panel); position:relative;transition:background .3s} .loop-step:last-child{border-right:none} .loop-step:hover{background:#101B2E} .loop-step.first{background:linear-gradient(180deg,rgba(201,162,75,.07),rgba(201,162,75,.012))} .loop-step.first .loop-num{color:var(--gold-lt)} .loop-num{font-family:var(--fm);font-size:11.5px;letter-spacing:.18em;color:var(--gold);margin-bottom:12px} .loop-num span{color:var(--gold);margin-left:8px;text-transform:uppercase;letter-spacing:.16em} .loop-step.dual{background:linear-gradient(180deg,rgba(201,162,75,.05),rgba(201,162,75,.01))} .loop-step.dual .dual-a{padding-bottom:15px;border-bottom:1px dashed rgba(201,162,75,.3); position:relative} .loop-step.dual .dual-a::after{content:"+";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%); background:var(--panel);color:var(--gold);font-family:var(--fm);font-size:11px;padding:0 7px;line-height:1} .loop-step.dual .dual-b{padding-top:15px} .loop-step.either .dual-a::after{content:"or"} .loop-step h3{font-size:18px;margin-bottom:8px;letter-spacing:-.025em} .loop-step p{font-size:15.5px;line-height:1.6;color:var(--muted);font-weight:400} .loop-note{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);text-align:center;margin-top:18px} .econ{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:44px} .econ-cell{background:var(--panel);padding:28px 24px} .econ-k{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin-bottom:10px} .econ-n{font-family:var(--fd);font-weight:700;font-size:32px;letter-spacing:-.035em; color:var(--gold-lt);line-height:1;margin-bottom:9px} .econ-cell p{font-size:15.5px;line-height:1.6;color:var(--muted);font-weight:400} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .tnote{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-top:16px;line-height:1.7} .ingest{margin-top:18px;padding-top:14px;border-top:1px solid rgba(201,162,75,.22); display:flex;flex-wrap:wrap;gap:6px} .ingest-k{flex:0 0 100%;font-family:var(--fm);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);margin-bottom:4px} .ingest span{font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--muted); border:1px solid var(--line);border-radius:2px;padding:4px 8px;line-height:1.35} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:3px;overflow:hidden} .seg{background:var(--panel);padding:32px 22px;transition:background .3s;position:relative} .seg::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold-dk),transparent);opacity:0;transition:opacity .3s} .seg:hover{background:var(--panel)}.seg:hover::before{opacity:1} .seg-k{font-family:var(--fm);font-size:11px;letter-spacing:.17em;text-transform:uppercase; color:var(--gold);margin-bottom:16px;line-height:1.5;min-height:3em} .seg h3{font-size:21px;margin-bottom:11px;letter-spacing:-.03em;min-height:2.5em; line-height:1.15} .seg p{font-size:15.5px;line-height:1.62;color:var(--muted);font-weight:400} .seg .ringfence{font-size:13.5px;color:var(--gold-lt);border-left:1px solid rgba(201,162,75,.45); padding-left:12px;margin-top:14px;font-weight:400} .seg-cta{display:inline-block;margin-top:16px;font-family:var(--fd);font-size:13.5px;font-weight:600; color:var(--gold-lt);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.35);padding-bottom:2px; transition:border-color .25s,color .25s} .seg-cta:hover{color:#fff;border-color:var(--gold-lt)} .seg ul{list-style:none;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)} .seg li{font-family:var(--fm);font-size:12px;letter-spacing:.05em;color:var(--muted); line-height:1.5;padding:4px 0 4px 13px;position:relative} .seg li::before{content:"›";position:absolute;left:0;color:var(--gold)} .cta-frame{border:1px solid rgba(201,162,75,.28);border-radius:3px; background:radial-gradient(120% 140% at 50% 0%,rgba(201,162,75,.09),transparent 58%),var(--panel); padding:clamp(44px,5vw,72px) clamp(28px,5vw,72px);text-align:center} .cta-frame .intro{margin:0 auto 34px;text-align:center} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .cta-row.cta-left{justify-content:flex-start;margin-top:-14px} a.logo:hover{color:var(--gold-lt)} a.logo{transition:color .25s} .crumb-bar{max-width:1620px;margin:0 auto;padding:22px clamp(24px,5vw,72px) 0} /* A section that is now its own page needs an h1, and it is still a section heading rather than a hero headline. Same metrics as the h2 it replaced; .legal h1 and .job-hero h1 already do this. */ .band h1{font-size:clamp(27px,3vw,43px);line-height:1.08;letter-spacing:-.030em; margin-bottom:18px} /* The pipeline table was sr-only: crawlable, but invisible. A table reads faster than a 469-node figure, so it is the scannable view now and the figure is the illustration. */ .pipetable{margin-top:56px} .pipetable h3{font-size:17px;margin-bottom:6px} .pipetable table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px} .pipetable caption{caption-side:top;text-align:left;color:var(--muted);font-size:13.5px; line-height:1.6;max-width:80ch;padding-bottom:14px} .pipetable th{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);text-align:left;font-weight:500;padding:0 18px 10px 0; border-bottom:1px solid var(--line);white-space:nowrap} .pipetable td{padding:11px 18px 11px 0;border-bottom:1px solid rgba(35,47,73,.5);color:var(--body)} .pipetable tbody tr:hover td{background:rgba(255,255,255,.02)} .pipetable td:first-child{font-family:var(--fm);font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);white-space:nowrap} .pipetable td:last-child{font-family:var(--fm);font-size:12.5px;color:var(--gold-lt); text-align:right;white-space:nowrap} .pipetable .tscroll{overflow-x:auto;overscroll-behavior-x:contain} .pipetable .tscroll:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px} @media (max-width:680px){ .pipetable table{font-size:13.5px} .pipetable td,.pipetable th{padding-right:10px} /* let the indication column wrap rather than force a scroll for 40px */ .pipetable td:nth-child(2){white-space:normal} .pipetable th{white-space:normal} } footer{border-top:1px solid var(--line);background:var(--ink);padding:54px clamp(24px,5vw,72px) 32px} .foot-grid{max-width:1620px;margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(24px,4vw,56px);padding-bottom:36px} .foot-col h4{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);margin-bottom:16px;font-weight:500} .foot-col a,.foot-col p{display:block;font-size:15px;color:var(--muted);text-decoration:none; margin-bottom:9px;font-weight:400;transition:color .22s} .foot-col a:hover{color:var(--white)} .foot-brand{font-family:var(--fd);font-weight:700;font-size:22px;letter-spacing:-.02em; color:var(--white);margin-bottom:12px;display:flex;align-items:center;gap:11px} .fb-mark{width:30px;height:30px;display:block;flex:none} .fb-mark .logo-mark{width:30px;height:30px} .foot-bar{max-width:1620px;margin:0 auto;border-top:1px solid var(--line);padding-top:22px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)} .foot-bar a{color:var(--muted);text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(126,136,153,.45)}.foot-bar a:hover{color:var(--gold)} /* ── link-styled button (no dead href) ───────────────────────────── */ .linkbtn{background:none;border:none;padding:0;margin:0 0 9px;font:inherit;color:var(--muted); cursor:pointer;display:block;text-align:left;transition:color .22s} .linkbtn:hover{color:var(--white)} .foot-bar .linkbtn{display:inline;margin:0;font-size:12.5px;color:var(--muted); text-decoration:underline;text-underline-offset:3px} .foot-bar .linkbtn:hover{color:var(--gold)} /* ── legal overlay (CSS :target — works with JS disabled) ────────── */ .legal{display:none;position:fixed;inset:0;z-index:400;background:var(--ink); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .legal:target{display:block} .legal-inner{max-width:820px;margin:0 auto;padding:clamp(32px,5vw,72px) clamp(22px,5vw,40px) 96px} .legal-top{display:flex;justify-content:space-between;align-items:center;gap:20px; padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:40px} .legal-close{font-family:var(--fd);font-size:13px;font-weight:600;letter-spacing:.05em; color:var(--gold-lt);text-decoration:none;border:1px solid rgba(201,162,75,.42); border-radius:2px;padding:9px 20px;white-space:nowrap;transition:background .25s,color .25s} .legal-close:hover{background:rgba(201,162,75,.1);color:var(--white)} .legal .legal-title{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px} .legal .stamp{font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:38px} .legal h2{font-family:var(--fm);font-weight:600;font-size:12px;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);margin:44px 0 16px;padding-bottom:9px; border-bottom:1px solid var(--line)} .legal h3{font-size:17px;margin:26px 0 8px;color:var(--white)} .legal p,.legal li{font-size:15.5px;line-height:1.75;color:var(--body);font-weight:400;margin-bottom:14px} .legal ul{list-style:none;margin:0 0 14px} .legal li{padding-left:18px;position:relative} .legal li::before{content:"—";position:absolute;left:0;color:var(--gold)} .legal a{color:var(--gold-lt)} .legal .lead{font-size:16.5px;color:var(--body)} .legal table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:14px} .legal th{font-family:var(--fm);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)} .legal td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--muted); vertical-align:top;line-height:1.6} .legal td:first-child{color:var(--body);font-family:var(--fm);font-size:12.5px} /* ── reader control: larger text + higher contrast ───────────────── */ :root[data-a11y="hc"]{--muted:#BAC4D2;--body:#E4E9F0;--line:#28324A} :root[data-a11y="hc"] body{font-size:17px} :root[data-a11y="hc"] .vs-side ul{color:var(--body)} :root[data-a11y="hc"] .intro{font-size:18px} :root[data-a11y="hc"] .legal p,:root[data-a11y="hc"] .legal li{font-size:17px} .a11y-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line); border-radius:2px;padding:8px 14px;font-family:var(--fm);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);cursor:pointer;transition:border-color .22s,color .22s} .a11y-btn:hover{border-color:rgba(201,162,75,.5);color:var(--gold-lt)} .a11y-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-lt); background:rgba(201,162,75,.08)} .a11y-btn svg{width:14px;height:14px;fill:currentColor;flex:none} /* ── consent banner ──────────────────────────────────────────────── */ .cb-bar{position:fixed;left:0;right:0;bottom:0;z-index:500;background:rgba(6,10,18,.97); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line); padding:20px clamp(20px,5vw,56px);display:none; box-shadow:0 -18px 48px -28px rgba(0,0,0,.9)} .cb-bar.on{display:block} .cb-bar-in{max-width:1620px;margin:0 auto;display:flex;align-items:center;gap:clamp(18px,3vw,44px); flex-wrap:wrap;justify-content:space-between} .cb-txt{flex:1 1 460px;min-width:280px} .cb-txt h4{font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);margin-bottom:8px;font-weight:600} .cb-txt p{font-size:14.5px;line-height:1.6;color:var(--body);font-weight:400;max-width:74ch} .cb-txt a{color:var(--gold-lt)} .cb-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .cb-btn{font-family:var(--fd);font-size:13px;font-weight:600;letter-spacing:.04em; border-radius:2px;padding:11px 22px;cursor:pointer;white-space:nowrap; transition:background .22s,border-color .22s,color .22s,filter .22s} .cb-btn.acc{color:var(--ink);border:none; background:linear-gradient(135deg,var(--gold-lt),var(--gold) 58%,var(--gold-dk)); box-shadow:0 1px 0 rgba(255,255,255,.24) inset} .cb-btn.acc:hover{filter:brightness(1.06)} /* decline carries the same visual weight as accept — refusing must be as easy */ .cb-btn.dec{color:var(--white);background:transparent;border:1px solid rgba(255,255,255,.28)} .cb-btn.dec:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.05)} .cb-btn.pref{color:var(--muted);background:transparent;border:1px solid transparent; text-decoration:underline;text-underline-offset:3px;padding:11px 8px} .cb-btn.pref:hover{color:var(--white)} /* ── preference center ───────────────────────────────────────────── */ .cb-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center; padding:20px;background:rgba(3,6,12,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .cb-modal.on{display:flex} .cb-card{background:var(--panel);border:1px solid var(--line);border-radius:4px; max-width:600px;width:100%;max-height:88vh;overflow-y:auto;padding:clamp(24px,3vw,38px)} .cb-card h3{font-size:22px;margin-bottom:8px} .cb-card>p{font-size:14.5px;line-height:1.65;color:var(--muted);margin-bottom:24px} .cb-row{border-top:1px solid var(--line);padding:18px 0;display:grid; grid-template-columns:1fr auto;gap:16px;align-items:start} .cb-row h4{font-family:var(--fd);font-size:15.5px;font-weight:600;color:var(--white);margin-bottom:5px} .cb-row p{font-size:13.5px;line-height:1.6;color:var(--muted)} .cb-vend{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:7px} .cb-sw{position:relative;width:44px;height:24px;flex:none;border-radius:12px;border:1px solid #8E9AAF; background:rgba(255,255,255,.10);cursor:pointer;transition:background .22s,border-color .22s;padding:0} .cb-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:#C3CCDA;transition:transform .22s,background .22s} .cb-sw[aria-checked="true"]{background:rgba(201,162,75,.22);border-color:var(--gold)} .cb-sw[aria-checked="true"]::after{transform:translateX(20px);background:var(--gold-lt)} .cb-sw[disabled]{cursor:not-allowed;opacity:.55} .cb-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:22px; border-top:1px solid var(--line)} .cb-state{font-family:var(--fm);font-size:11px;letter-spacing:.08em;color:var(--muted); margin-top:16px;line-height:1.7} @media (max-width:680px){ .cb-acts{width:100%}.cb-btn{flex:1 1 auto} .legal-top{flex-direction:column;align-items:flex-start}} @media (prefers-reduced-motion:reduce){.cb-sw,.cb-sw::after,.cb-btn{transition:none}} @media (max-width:1080px){ .hero{min-height:auto;padding-top:60px} .hero-copy{margin:0;padding:0} .hero-visual{position:relative;top:auto;right:auto;transform:none;width:100%;max-width:600px;margin:36px auto 0} .hero-visual svg{opacity:1}.hero-visual::after{display:none} .site-map{margin-top:40px}.map-grid{grid-template-columns:repeat(2,1fr)} .versus,.split,.grid-2{grid-template-columns:1fr} .founders{grid-template-columns:1fr} .gov{grid-template-columns:1fr} .ppl.two{grid-template-columns:1fr} .inv{grid-template-columns:repeat(2,1fr)} .grid-5{grid-template-columns:repeat(2,1fr)}.grid-5>*:last-child:nth-child(odd){grid-column:1/-1} .loop{grid-template-columns:1fr}.loop-step.dual{grid-column:auto} .loop-step.dual{grid-column:span 2} .econ{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:800px){ nav{padding:14px 20px;flex-wrap:wrap} .nav-toggle{display:flex} .nav-links{display:none;flex-direction:column;align-items:stretch;gap:0; width:100%;order:3;padding:10px 0 4px;border-top:1px solid var(--line);margin-top:14px} .nav-links.open{display:flex} .nav-links a{font-size:16px;padding:13px 2px} .nav-links a::after{display:none} .nav-links .btn-ghost{margin-top:10px;text-align:center;padding:13px 20px;font-size:14px} } @media (max-width:680px){ .map-grid{grid-template-columns:1fr} .hero-ctas{flex-direction:column}.hero-ctas button{width:100%}} .foot-col a,.foot-col .linkbtn{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(154,166,184,.55)} .foot-col p{text-decoration:none} .foot-bar a,.foot-bar .linkbtn{text-decoration-color:currentColor} .li{padding:4px 0} .skip{position:absolute;left:8px;top:-60px;z-index:900;font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--gold-lt);padding:10px 16px;border-radius:2px;text-decoration:none;transition:top .18s} .skip:focus{top:8px} main:focus{outline:none} /* ── print: the page must survive being saved to PDF for a deck ───── */ @media print{ :root{--ink:#fff;--navy:#fff;--panel:#fff;--line:#B9C0CC;--white:#111;--body:#1A1F28; --muted:#3C4553;--gold:#7A5E1F;--gold-lt:#6B5219;--gold-dk:#7A5E1F} html,body{background:#fff!important;color:#1A1F28!important} nav,.cb-bar,.cb-modal,.a11y-btn,.figscroll-hint,.nav-toggle{display:none!important} h1,h2,h3,h4,.logo,.fb-name{color:#111!important} .eyebrow,.subhd,.seg-k,.map-stat b,.econ-n,.loop-num,h1 em,h2 em{color:#7A5E1F!important} section.band,.band.surface,.seg,.card,.econ-cell,.vs-side,.fo,.ad,.loop-step,.cta-frame,.iv{ background:#fff!important;border-color:#B9C0CC!important;box-shadow:none!important} .band,.band-sep{padding:18px 0!important;border-color:#B9C0CC!important} a{color:#1A3E70!important;text-decoration:underline} .foot-col a[href^="mailto"]::after,.cta-btns a[href^="mailto"]::after{content:" (" attr(href) ")"; font-size:10px;color:#3C4553} .wide{overflow:visible!important}.wide svg{min-width:0!important;max-width:100%!important} .legal{display:none!important} section,.fo,.ad,figure,table{break-inside:avoid} img{filter:none!important} } /* ── forced colors (Windows High Contrast) ─────────────────────────── */ @media (forced-colors:active){ .nav-toggle span{background:CanvasText;forced-color-adjust:none} .cb-sw{border:2px solid CanvasText;forced-color-adjust:none} .cb-sw::after{background:CanvasText;forced-color-adjust:none} .cb-sw[aria-checked="true"]{background:Highlight} svg text{fill:CanvasText;forced-color-adjust:none} .seg,.card,.econ-cell,.vs-side,.fo,.ad,.loop-step{border:1px solid CanvasText} } /* ── reduced motion: cover everything, not three declarations ──────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } .subhd--spaced{margin-top:52px} .foot-tag{max-width:36ch} .eyebrow--flush{margin:0} .cb-fs{border:0;padding:0;margin:0} /* .nav-links a (0,1,1) out-specifies .btn-ghost (0,1,0), so the button was inheriting the underline's padding-bottom:3px against its own 9px top, sitting 4.5px low. Restate at (0,2,0). */ .nav-links .btn-ghost{padding:9px 20px} @media (max-width:800px){.nav-links .btn-ghost{padding:13px 20px}} /* ── /privacy needs these; they existed only in its forked copy ── */ .legal.standalone{display:block;position:static;min-height:100vh} .legal h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px} .foot-min{border-top:1px solid var(--line);background:var(--ink);padding:26px clamp(24px,5vw,72px)} .foot-min .foot-bar{max-width:1620px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:11.5px;letter-spacing:.04em;color:var(--muted)} .foot-min a,.foot-min .linkbtn{color:var(--muted);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px} .foot-min a:hover,.foot-min .linkbtn:hover{color:var(--gold-lt)} /* ── careers ───────────────────────────────────────────────────────── Appended to index.html's stylesheet by build.py when it generates the careers pages. Everything here is additive: layout for the role list and the job body. Anything that could live on a shared class already does — .band .surface .eyebrow .intro .seg .cta-frame .btn-primary .btn-line are reused as-is. ------------------------------------------------------------------ */ /* The breadcrumb is a