/* Calidescope — one stylesheet, every page. Sparing by design. Ink line work on warm paper. One accent per page via --acc on . */ :root{ --ink:#1F2024;--paper:#FAF7EF;--sand:#F3EEE2;--muted:#6E6B65;--hair:#E4E0D6; --blue:#1E40FF;--blue-t:#DDE6FF;--violet:#7A3AD2;--violet-t:#EBDFFA;--pink:#E933A6;--pink-t:#FFDDF0; --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --gut:clamp(24px,6vw,80px);--acc:#1F2024;--acc-t:#F3EEE2; } body.promise{--acc:#1E40FF;--acc-t:#DDE6FF} body.perform{--acc:#7A3AD2;--acc-t:#EBDFFA} body.proof{--acc:#E933A6;--acc-t:#FFDDF0} *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:20px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} .wrap{max-width:1140px;margin:0 auto;padding:0 var(--gut)} .mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .mono.acc{color:var(--acc)} .skip{position:absolute;left:-9999px} .skip:focus{position:static;display:inline-block;padding:10px 16px;background:var(--ink);color:var(--paper)} nav{border-bottom:1px solid var(--hair)} nav .in{display:flex;align-items:center;gap:28px;height:78px} .logo{display:flex;align-items:center;gap:11px;font-weight:600;font-size:19px;letter-spacing:.02em} nav .links{display:flex;gap:26px;margin-left:auto;font-size:16.5px;align-items:center;color:var(--muted)} nav .links a:hover{color:var(--ink)} nav .links a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--acc)} nav .links a.btn,nav .links a.btn:hover{color:var(--paper)} @media(max-width:940px){nav .links a:not(.btn){display:none}} .btn{display:inline-block;background:var(--ink);color:var(--paper);font-weight:600; font-size:16.5px;padding:13px 22px;transition:background .15s;border:0;cursor:pointer;font-family:var(--sans)} .btn:hover{background:var(--acc)} .btn.lg{font-size:20px;padding:19px 34px} .plain{font-weight:600;font-size:18px;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:2px} .plain:hover{color:var(--ink);border-color:var(--ink)} .acts{display:flex;gap:20px;align-items:center;flex-wrap:wrap} h1{font-weight:600;font-size:clamp(46px,7.4vw,86px);line-height:.94;letter-spacing:-.04em;margin:0 0 26px} h2{font-weight:600;font-size:clamp(30px,3.8vw,46px);letter-spacing:-.032em;line-height:1.02;margin:0 0 30px} .lead{font-size:clamp(21px,2.5vw,28px);line-height:1.38;letter-spacing:-.016em;max-width:22ch;margin:0 0 36px;color:#3a3b40} .note{margin:34px 0 0;font-size:19px;color:var(--muted);max-width:58ch} .note a{border-bottom:1px solid var(--hair);color:var(--ink);font-weight:600} .note a:hover{border-color:var(--ink)} .hero{padding:clamp(60px,8vw,120px) 0 clamp(50px,6.5vw,88px)} .hero.tint{background:var(--acc-t);border-bottom:1px solid rgba(31,32,36,.1)} .hero .grid{display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(28px,4vw,56px);align-items:center} @media(max-width:880px){.hero .grid{grid-template-columns:1fr}} .strip{background:var(--ink);color:var(--paper);padding:22px 0} .strip p{margin:0;font-size:clamp(18px,2.1vw,24px);font-weight:600;letter-spacing:-.018em} .sec{padding:clamp(52px,6.5vw,96px) 0} .sec.sand{background:var(--sand);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .sec.tint{background:var(--acc-t)} /* three parts */ .row3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)} @media(max-width:880px){.row3{grid-template-columns:1fr}} .row3 > div{padding:34px 34px 38px 0;border-right:1px solid var(--hair)} .row3 > div:last-child{border-right:0} .row3 > div + div{padding-left:34px} @media(max-width:880px){.row3 > div,.row3 > div + div{border-right:0;border-bottom:1px solid var(--hair);padding:28px 0} .row3 > div:last-child{border-bottom:0}} .row3 .shape{margin-bottom:16px;display:block} .row3 .p{font-weight:600;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1;margin:0 0 6px} .row3 .do{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:16px} .row3 p.d{margin:0;font-size:19px;line-height:1.45;color:#3a3b40;max-width:24ch} .row3 .b{color:var(--blue)}.row3 .v{color:var(--violet)}.row3 .k{color:var(--pink)} /* numbered delivery list */ .list{border-top:1px solid var(--ink)} .list .i{display:grid;grid-template-columns:52px 44px 1fr;gap:0 18px;padding:22px 0; border-bottom:1px solid var(--hair);align-items:center} .list .ic{color:var(--acc);display:block;line-height:0} @media(max-width:620px){.list .i{grid-template-columns:44px 1fr;gap:4px 16px} .list .ic{grid-row:1/3}.list .no{align-self:end}} .list .i:last-child{border-bottom:0} .list .no{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--muted)} .list .t{margin:0;font-size:clamp(18px,2vw,22px);line-height:1.35;letter-spacing:-.014em;max-width:46ch} .list .t b{font-weight:600}.list .t span{color:var(--muted)} /* the problem — the collateral fails, never the reader */ .pairs{border-top:1px solid var(--ink)} .pr{display:grid;grid-template-columns:minmax(160px,.34fr) 1fr;gap:20px;padding:18px 0; border-bottom:1px solid var(--hair);align-items:baseline} .pr b{font-weight:600;font-size:clamp(19px,2.1vw,24px);letter-spacing:-.018em} .pr p{margin:0;font-size:clamp(18px,2vw,22px);line-height:1.3;letter-spacing:-.014em;color:#3a3b40} @media(max-width:640px){.pr{grid-template-columns:1fr;gap:2px}} .punch{font-weight:600;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.03em;line-height:1.1;margin:44px 0 0;max-width:24ch} .punch span{color:var(--muted);display:block} /* numbers band */ .nums{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,80px) 0} .nums .g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,54px);align-items:stretch} @media(max-width:760px){.nums .g{grid-template-columns:1fr;gap:26px}} .nums .n{font-weight:600;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.035em;line-height:1;margin:0 0 8px} .nums .c{margin:0;font-size:17px;color:rgba(250,247,239,.6);max-width:26ch} /* case tiles */ .cases{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)} @media(max-width:880px){.cases{grid-template-columns:1fr}} .case{padding:28px 30px 32px 0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);display:block} .case:nth-child(3n){border-right:0;padding-right:0} .case:nth-child(3n+1){padding-left:0} .case + .case{padding-left:30px} @media(max-width:880px){.case,.case+.case{border-right:0;padding:24px 0}} .case .n{font-weight:600;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.03em;line-height:1;margin:0 0 10px} .case h3{font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.016em;margin:0 0 12px;max-width:26ch} .case .w{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .case:hover .w{color:var(--ink)} .case.b .n{color:var(--blue)}.case.v .n{color:var(--violet)}.case.p .n{color:var(--pink)} /* case detail */ .star{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline} .star:first-child{border-top:1px solid var(--ink)} @media(max-width:700px){.star{grid-template-columns:1fr;gap:4px}} .star .l{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .star p{margin:0;font-size:clamp(18px,2vw,22px);line-height:1.4;letter-spacing:-.014em;max-width:52ch} .chips{display:flex;gap:34px;flex-wrap:wrap;margin:0 0 8px} .chip .v{font-weight:600;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.032em;line-height:1;color:var(--acc)} .chip .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px;display:block} .back{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-block;margin-bottom:26px} .back:hover{color:var(--ink)} .pager{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);padding-top:22px;margin-top:36px;flex-wrap:wrap} .pager a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);max-width:44%} .pager a:hover{color:var(--ink)} /* stats */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px);border-top:1px solid var(--ink);padding-top:30px} @media(max-width:760px){.stats{grid-template-columns:1fr;gap:24px}} .stats .n{font-weight:600;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.032em;line-height:1;margin:0 0 8px;color:var(--acc)} .stats p{margin:0;font-size:17px;color:var(--muted);max-width:26ch} /* contact form */ .form{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;max-width:760px;border-top:1px solid var(--ink);padding-top:30px} .form .full{grid-column:1/-1} @media(max-width:700px){.form{grid-template-columns:1fr}} .f label{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin-bottom:8px} .f input,.f select,.f textarea{width:100%;font-family:var(--sans);font-size:19px;color:var(--ink); background:var(--paper);border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0; -webkit-appearance:none;appearance:none} .f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 12px) 20px,calc(100% - 6px) 20px;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px} .f textarea{resize:vertical;min-height:104px;line-height:1.45} .f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--acc);border-bottom-width:2px;padding-bottom:9px} .hp{position:absolute;left:-9999px} [hidden]{display:none!important} /* .form sets display:grid, which would otherwise win */ .form button[disabled]{opacity:.5;cursor:default} .fmsg{margin-top:16px;max-width:46ch;font-size:16px;line-height:1.5;color:var(--acc)} .sent{border-top:1px solid var(--ink);padding-top:30px;max-width:760px} .sent:focus{outline:0} .sent h2{margin-bottom:10px} /* legal pages — long prose, the same line work at a calmer size */ .legal{max-width:70ch} .legal .eff{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin:0 0 14px} .legal section{border-top:1px solid var(--hair);padding-top:26px;margin-top:34px} .legal section:first-of-type{border-top:1px solid var(--ink);margin-top:0} .legal h2{font-size:clamp(22px,2.4vw,26px);letter-spacing:-.022em;line-height:1.15;margin:0 0 14px} .legal p{margin:0 0 14px;font-size:18px;line-height:1.62;color:#3a3b40;max-width:66ch} .legal p:last-child{margin-bottom:0} .legal b{color:var(--ink)} .legal a{font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair)} .legal a:hover{border-color:var(--ink)} footer{border-top:1px solid var(--ink);padding:32px 0 48px;display:flex;justify-content:space-between; gap:20px;flex-wrap:wrap;align-items:baseline} footer .m{font-weight:600;letter-spacing:-.014em} footer .fl{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} footer .fl a:hover{color:var(--ink)} /* the drawing: a knot that doubles back, then one line */ .draw path.ink,.draw path.line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.5,0,.2,1) forwards} .draw path.line{animation-delay:1.35s;animation-duration:.85s} .draw path.fall{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .35s ease 1.3s forwards} .draw .knot{opacity:0;animation:pop .45s ease forwards} .draw .k1{animation-delay:.35s}.draw .k2{animation-delay:.6s}.draw .k3{animation-delay:.85s} .draw .k4{animation-delay:1.05s}.draw .k5{animation-delay:1.25s} .draw .pop{opacity:0;animation:pop .5s ease forwards} .draw .n1{animation-delay:1.75s}.draw .n2{animation-delay:1.9s} .draw .n3{animation-delay:2.05s}.draw .n4{animation-delay:2.2s} @keyframes draw{to{stroke-dashoffset:0}} @keyframes pop{to{opacity:1}} @media(prefers-reduced-motion:reduce){ .draw path.ink,.draw path.line,.draw path.fall{animation:none;stroke-dashoffset:0} .draw .pop,.draw .knot{animation:none;opacity:1} } /* ── the three jobs, in order — real text, so it reads on a phone ── */ .arc{display:flex;align-items:flex-end;gap:clamp(20px,3.4vw,44px);border-top:1px solid var(--hair); padding-top:0;margin-top:8px} .zone{flex:1 1 auto;padding-top:34px;position:relative} .zone .zn{display:block;font-weight:600;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;margin-bottom:16px} .zone .stops{display:flex;gap:clamp(14px,2vw,28px);border-top:2px solid var(--hair);padding-top:0} .zone.lit .stops{border-top-color:currentColor} .zone.lit.b{color:var(--blue)}.zone.lit.v{color:var(--violet)}.zone.lit.k{color:var(--pink)} .zone.dim{color:var(--hair)} .zone.dim .zn{color:var(--muted)} .stop{flex:1 1 auto;padding-top:16px;position:relative} .stop i{position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%; background:currentColor;display:block} .zone.dim .stop i{background:var(--paper);border:2px solid var(--hair)} .stop em{display:block;font-style:normal;font-family:var(--mono);font-size:12.5px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--ink)} .zone.dim .stop em{color:#9C9992} .arc .tip{flex:0 0 auto;padding-bottom:5px;color:var(--muted);opacity:.55} .sec.sand .zone.dim .stop i{background:var(--sand)} @media(max-width:820px){ .arc{display:block;border-top:0;margin-top:22px} .arc .tip{display:none} .zone{padding:0 0 0 26px;margin-bottom:26px;border-left:2px solid var(--hair)} .zone.lit{border-left-color:currentColor} .zone .zn{font-size:26px;margin-bottom:10px} .zone .stops{display:block;border-top:0} .stop{padding:7px 0 5px} .stop i{position:absolute;top:12px;left:-33px;width:12px;height:12px} .stop em{font-size:14px;letter-spacing:.1em} } /* ── the opportunity tiles ── */ .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);margin-top:6px} @media(max-width:960px){.tiles{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.tiles{grid-template-columns:1fr}} .tile{background:var(--paper);padding:26px 22px 28px} .sec.sand .tile{background:var(--sand)} .tile .gl{color:var(--ink);margin-bottom:18px;display:block} .tile b{display:block;font-weight:600;font-size:19px;letter-spacing:-.016em;margin-bottom:6px} .tile p{margin:0;font-size:17px;line-height:1.4;color:#3a3b40} /* numbers band: each figure opens the case behind it */ .nums .g > a{display:flex;flex-direction:column;height:100%;transition:opacity .15s} .nums .g > a:hover{opacity:.72} .nums .go{align-self:flex-start;margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,239,.62); border-bottom:1px solid rgba(250,247,239,.24);padding-bottom:3px} .nums .g > a:hover .go{color:var(--paper);border-bottom-color:var(--paper)}