/* ── Pickle Octopus · the persuasion engine ─────────────────────────── The page has one job: get a landing page URL into the field. Every element is judged against that and removed if it does not serve it — which is why there is no price, no case study, no biography, no pricing anchor and no navigation. Nothing here is for sale yet. The URL is the beginning of a conversation, not the end of one. The register is software, not agency. A director who feels pitched will close the tab; a director who feels curious will type. */ :root{ --bg:#FAFAF8; --panel:#FFFFFF; --ink:#0E1013; --ink-2:#414750; --ink-3:#6A7280; --line:#E3E5E1; --line-2:#F0F1EE; --brine:#2C6B3F; --brine-lt:#3E8F55; --brine-wash:#E9F3EC; --dark:#101317; --on-dark:#F4F5F2; --on-dark-2:#98A0A9; --flag:#9A4A22; --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px; line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased} h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.035em;line-height:1.08} p{margin:0} b,strong{font-weight:620;color:var(--ink)} a{color:var(--brine)} .w{max-width:940px;margin:0 auto;padding:0 24px} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px} :focus-visible{outline:2px solid var(--brine);outline-offset:3px;border-radius:4px} /* the bar carries the name and nothing else — a nav link is a way out */ /* The bar is sticky only so the held-back contact link has somewhere to arrive. It carries its own background, so copy scrolls under it rather than through it, and the rule appears only once it is over content. */ .nav{position:sticky;top:0;z-index:30;padding:18px 0;background:var(--bg); border-bottom:1px solid transparent;transition:border-color .2s} .nav.is-in{border-bottom-color:var(--line)} .nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);text-decoration:none} .brand:hover{color:var(--ink)} /* ── the ask ── */ .hero{padding:clamp(44px,7vw,84px) 0 clamp(32px,4vw,52px)} h1{font-size:clamp(32px,4.4vw,52px);max-width:17ch} .hero-sub{margin:clamp(16px,2vw,22px) 0 0;font-size:clamp(17px,1.7vw,20px);line-height:1.5; color:var(--ink-2);max-width:52ch;text-wrap:pretty} .hero-sub b{color:var(--ink)} /* the field is the brightest, largest object on the page, on purpose */ .ask{margin:clamp(28px,3.4vw,40px) 0 0;max-width:620px} .join{display:flex;background:var(--panel);border:2px solid var(--ink);border-radius:11px; overflow:hidden;box-shadow:0 1px 2px rgba(14,16,19,.06),0 18px 34px -22px rgba(14,16,19,.4)} .join:focus-within{box-shadow:0 0 0 4px var(--brine-wash),0 18px 34px -22px rgba(14,16,19,.4); border-color:var(--brine)} .in{flex:1 1 auto;min-width:0;font:inherit;font-size:17px;border:0;outline:0; padding:1.05rem 1.1rem;color:var(--ink);background:transparent} .in::placeholder{color:#9AA1A9} .go{flex:0 0 auto;font:inherit;font-size:16px;font-weight:640;cursor:pointer;border:0; padding:1.05rem 1.6rem;background:var(--ink);color:#fff;transition:background .15s} .go:hover{background:#000} .go.wide{width:100%;margin-top:1rem;border-radius:9px;padding:.95rem 1.2rem} .ask-note{margin:14px 0 0;font-size:14.5px;color:var(--ink-3)} /* ── the flow ── */ .p-step{display:none} .p-step.on{display:block} .p-kicker{margin:0 0 .5rem;font-family:var(--mono);font-size:11.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--brine)} .p-h{font-size:clamp(20px,2.2vw,25px);line-height:1.22;margin:0 0 .7rem;font-weight:640} .p-body{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 1rem;max-width:52ch} .p-err{margin:.6rem 0 0;font-size:14.5px;color:var(--flag);display:none} .p-err.on{display:block} .panel{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:clamp(20px,2.6vw,28px);max-width:620px} .bar{height:4px;border-radius:3px;background:var(--line);overflow:hidden;max-width:620px} .bar span{display:block;height:100%;width:30%;background:var(--brine-lt); animation:sweep 1.05s ease-in-out infinite} @keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}} @media(prefers-reduced-motion:reduce){.bar span{animation:none;width:100%}} .finds{list-style:none;margin:0;padding:0} .finds li{padding:.9rem 0;border-top:1px solid var(--line-2)} .finds li:first-child{border-top:0;padding-top:0} .f-top{display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .f-k{font-size:15.5px;font-weight:620} .f-v{font-family:var(--mono);font-size:14px;color:var(--ink-3)} .f-v.flag{color:var(--brine)} .f-t{margin:.28rem 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .in-solo{width:100%;font:inherit;font-size:17px;padding:.95rem 1.05rem;color:var(--ink); background:var(--panel);border:2px solid var(--line);border-radius:9px} .in-solo:focus{outline:0;border-color:var(--brine);box-shadow:0 0 0 3px var(--brine-wash)} .tick{width:42px;height:42px;border-radius:50%;background:var(--brine-wash);display:grid; place-items:center;margin:0 0 .9rem} .tick svg{width:20px;height:20px;fill:none;stroke:var(--brine);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} /* ── what it reads for. Named dimensions, no findings: the curiosity gap is the mechanism, so the page says what gets examined and never what it concludes. Naming them also makes the engine concrete rather than a black box, which is the difference between intriguing and vague. */ .sec{padding:clamp(40px,5.5vw,72px) 0;border-top:1px solid var(--line)} .tag{margin:0 0 12px;font-family:var(--mono);font-size:11.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--brine)} .h2{font-size:clamp(24px,2.8vw,32px);max-width:22ch} .deck{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:54ch; text-wrap:pretty} .dims{list-style:none;margin:clamp(24px,3vw,32px) 0 0;padding:0;display:grid; gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden} /* Nine items divide evenly by three and by one, but not by two — at the middle tier the last cell spans the row so no width leaves a hole. */ @media(min-width:640px){.dims{grid-template-columns:1fr 1fr} .dims li:last-child{grid-column:1 / -1}} @media(min-width:900px){.dims li:last-child{grid-column:auto}} @media(min-width:900px){.dims{grid-template-columns:repeat(3,1fr)}} .dims li{background:var(--panel);padding:16px 18px} .dims b{display:block;font-size:15px;font-weight:620;margin:0 0 3px} .dims span{display:block;font-size:14px;line-height:1.5;color:var(--ink-3)} /* the positioning line, given room because it is the whole argument */ .both{background:var(--dark);color:var(--on-dark);border-radius:14px; padding:clamp(26px,3.4vw,40px);margin:clamp(24px,3vw,34px) 0 0} .both p{font-size:clamp(18px,2vw,23px);line-height:1.42;letter-spacing:-.024em;max-width:40ch} /* Two lines, identical in size and shape, each ending on the same beat. The parallel is the argument — a smaller, longer second line breaks the rhythm and the point lands as an explanation instead of a pair. */ .both p + p{margin-top:1.15rem} .both b{color:#fff;font-weight:680} .foot{padding:clamp(30px,4vw,48px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--line)} .foot p{font-size:14.5px;color:var(--ink-3);margin:0 0 6px} .foot a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px} .foot a:hover{color:var(--ink)} .opts{display:grid;gap:.55rem} .opts button{font:inherit;font-size:16px;text-align:left;cursor:pointer;padding:.85rem 1rem; border-radius:9px;background:var(--panel);border:1px solid var(--line);color:var(--ink)} .opts button:hover{border-color:var(--brine);background:var(--brine-wash)} /* ── what is on offer, stated once, at the end ──────────────────────── A director should not have to ask what this costs, but the page is not trying to sell it either: the section states the facts and then points back at the field. No scarcity — "slots left" attaches urgency to hiring, and the only thing being asked for here is a URL. */ .facts{list-style:none;margin:clamp(24px,3vw,32px) 0 0;padding:0;display:grid;gap:1px; background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden} @media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}} .facts li{background:var(--panel);padding:20px} .facts b{display:block;font-size:clamp(24px,2.6vw,30px);font-weight:660;letter-spacing:-.035em; line-height:1.1;margin:0 0 6px} .facts span{display:block;font-size:14.5px;line-height:1.55;color:var(--ink-3)} .after{margin:clamp(22px,2.6vw,30px) 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-2); max-width:58ch;text-wrap:pretty} .after b{color:var(--ink)} /* ---- What it would be worth ------------------------------------------- The bars carry the argument the sentences cannot: a 100%-wide gain next to an 11%-wide fee is read before it is calculated. Both share one scale, so when 15% is worth less than the fee the fee bar is the longer one and the page says so. A chart that can only flatter is not evidence. */ .h3{margin:clamp(30px,3.6vw,42px) 0 0;font-size:clamp(19px,1.9vw,23px);font-weight:640; letter-spacing:-.028em;max-width:36ch;text-wrap:balance} .calc{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,28px);margin:clamp(18px,2.2vw,24px) 0 0} .calc-in label{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .45rem} .calc-in input{font:inherit;font-size:1.15rem;font-weight:650;width:180px;padding:.66rem .8rem; border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)} .calc-in input:focus{outline:0;border-color:var(--brine);box-shadow:0 0 0 3px var(--brine-wash)} .pre{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid var(--line); border-radius:8px;background:var(--panel);width:180px} .pre:focus-within{border-color:var(--brine);box-shadow:0 0 0 3px var(--brine-wash)} .pre span{padding:0 0 0 .8rem;font-size:1.15rem;font-weight:650;color:var(--ink-3)} .pre input{border:0!important;box-shadow:none!important;width:100%;padding-left:.2rem} .chart{margin:clamp(26px,3vw,34px) 0 0} .cbar + .cbar{margin-top:1.4rem} .cbar-name{margin:0 0 .5rem;font-size:15px;color:var(--ink-2)} .cbar-name b{color:var(--ink)} .cbar-track{display:flex;align-items:center;height:34px;background:var(--line); border-radius:5px;overflow:hidden} .cbar-fill{flex:none;height:100%;min-width:8px;background:var(--dark);border-radius:5px; display:flex;align-items:center;justify-content:flex-end} .cbar-fill.is-fee{background:var(--brine)} .cbar-val{font-family:var(--mono);font-weight:650;font-size:15px;white-space:nowrap} .cbar-val.inside{color:var(--bg);padding-right:.85rem} .cbar-val.outside{color:var(--ink);margin-left:.85rem} .year{margin:clamp(22px,2.6vw,30px) 0 0;padding-top:clamp(16px,2vw,22px); border-top:1px solid var(--line);font-size:clamp(17px,1.6vw,20px);line-height:1.45; letter-spacing:-.02em;color:var(--ink-2);max-width:58ch;text-wrap:pretty} .year b{color:var(--ink);font-weight:650} .chart-note:empty{display:none} .chart-note{margin:clamp(14px,1.6vw,18px) 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)} .chart-note b{color:var(--ink)} .go.up{margin:clamp(22px,2.6vw,30px) 0 0} /* ---- Contact ------------------------------------------------------------ Held back until the hero is behind them: above the fold this page asks for one thing, and a second way out standing beside the field is a choice at the exact moment there should not be one. It is inert rather than absent — still in the tab order for anyone arriving by keyboard. */ .nav-link{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:8px 14px; border:1px solid var(--line);border-radius:999px;background:var(--panel); opacity:0;transform:translateY(-4px);transition:opacity .22s,transform .22s,color .15s} .nav.is-in .nav-link{opacity:1;transform:none} .nav-link:hover{color:var(--ink);border-color:var(--ink-3)} .nav-link:focus{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.nav-link{transition:none}} .foot-grid{display:grid;gap:clamp(28px,4vw,56px)} @media(min-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} .foot-brand{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ink)!important;margin:0 0 10px} .foot-legal{margin-top:14px} .foot-h{font-size:17px;font-weight:640;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)} .cm-in{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px; padding:.8rem .9rem;margin:0 0 10px;color:var(--ink);background:var(--panel); border:1px solid var(--line);border-radius:9px} .cm-in:focus{outline:0;border-color:var(--brine);box-shadow:0 0 0 3px var(--brine-wash)} .cm-in::placeholder{color:#9AA1A9} .cm-ta{resize:vertical;min-height:84px} .ff-pot{position:absolute;left:-9999px} .cm-btn{font:inherit;font-size:15px;font-weight:640;cursor:pointer;border:0;border-radius:9px; padding:.8rem 1.4rem;background:var(--ink);color:#fff;transition:background .15s} .cm-btn:hover{background:#000} .cm-btn:disabled{opacity:.6;cursor:default} .cm-status:empty{display:none} .cm-status{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--brine)} .cm-status.is-err{color:var(--flag)} .cbox{width:min(520px,calc(100vw - 32px));border:0;border-radius:14px;padding:0; background:var(--panel);color:var(--ink);box-shadow:0 24px 70px rgba(14,16,19,.28)} .cbox::backdrop{background:rgba(14,16,19,.55)} .cb-body{padding:clamp(24px,4vw,36px)} .cb-title{margin:0;font-size:clamp(21px,2.4vw,26px);font-weight:660;letter-spacing:-.03em} .cb-lede{margin:8px 0 20px;font-size:15.5px;line-height:1.55;color:var(--ink-2)} .lb-close{position:absolute;top:10px;right:10px;width:38px;height:38px;display:grid; place-items:center;background:transparent;border:0;border-radius:50%;cursor:pointer;color:var(--ink-3)} .lb-close:hover{background:var(--line-2);color:var(--ink)} .lb-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} body.lb-open{overflow:hidden} /* ---- Legal pages -------------------------------------------------------- One column, narrow measure, generous space between clauses. Nobody reads these for pleasure; the job is to make any single clause findable and plain when somebody does go looking for it. */ .legal{padding:clamp(34px,4.5vw,56px) 0 clamp(48px,6vw,80px)} /* Measured, not guessed: at 720px the longest lines ran 86 characters. Narrowing the column and lifting the type a half point brings the page to about 70, which is where the eye stops losing its place on return. */ .legal .w{max-width:672px} .legal-h1{font-size:clamp(30px,4vw,42px);font-weight:700;letter-spacing:-.035em; line-height:1.08;margin:0} .updated{margin:12px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--ink-3)} .legal .lede{margin:clamp(20px,2.4vw,28px) 0 0;font-size:18px;line-height:1.6;color:var(--ink-2); padding-bottom:clamp(20px,2.4vw,28px);border-bottom:1px solid var(--line);text-wrap:pretty} .legal .lede b{color:var(--ink)} /* A heading has to be bigger than the text it heads, not just bolder. At 17.5px against 16.5px body it was a 1px difference doing the work of a section break, which left the bold lead-ins inside a section looking identical to the section title above them. */ .legal h2{margin:clamp(38px,4.2vw,52px) 0 0;font-size:clamp(22px,2.1vw,24px);font-weight:660; letter-spacing:-.024em;line-height:1.25;color:var(--ink)} /* Long-form is read on a phone, where a paragraph break at 10px against a 27px line-height is invisible and the page arrives as one block. The gap has to be larger than the line gap or it is not a break at all. */ .legal p{margin:clamp(16px,1.5vw,19px) 0 0;font-size:17px;line-height:1.72;color:var(--ink-2); text-wrap:pretty} @media(max-width:600px){ .legal p,.legal li{font-size:17px;line-height:1.72} .legal p{margin-top:19px} .legal h2{margin-top:clamp(34px,8vw,44px)} } .legal ul{margin:12px 0 0;padding-left:1.15rem} .legal li{margin:0 0 8px;font-size:17px;line-height:1.72;color:var(--ink-2)} .legal b{color:var(--ink);font-weight:640} .legal a{color:var(--brine);text-underline-offset:2px} .legal a:hover{color:var(--ink)} /* ---- Orientation -------------------------------------------------------- One line, at the first scroll, answering the question the hero deliberately does not: who is this. Withholding it does not save the reader anything — an unanswered "who are these people" is carried through every section that follows. Naming it costs fourteen words and buys back the attention that question was quietly taking. It sits below the fold on purpose: the hero still asks for one thing and nothing else. Nine words. A strip is read at a glance or not at all; a sentence long enough to need reading is a sentence that gets skipped, and a skipped strip is worse than no strip. First beat connects the human to the tool, second hands the result to the reader. */ .orient{border-top:1px solid var(--line);background:var(--brine-wash)} .orient .w{padding-block:clamp(14px,1.8vw,20px)} .orient p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty} .orient b{color:var(--brine);font-weight:640} /* .facts b is the display figure, so a b inside the description would inherit 30px and break the cell. Scope it back to inline emphasis. */ .facts span b{display:inline;font-size:inherit;letter-spacing:inherit;line-height:inherit; margin:0;font-weight:640;color:var(--ink)} /* ---- The person --------------------------------------------------------- Directly beneath the panel that says a machine cannot supply judgment, because the obvious next question is whose judgment. For a business of one, the person is the asset — hiding it behind "we" costs more than the scale it borrows. */ .me{display:grid;gap:clamp(18px,2.6vw,30px);margin:clamp(24px,3vw,34px) 0 0; padding:clamp(22px,3vw,32px);background:var(--panel);border:1px solid var(--line); border-radius:14px} .me-shot{width:clamp(88px,11vw,124px)} .me-face{width:100%;height:auto;border-radius:12px;display:block} /* Side by side, the portrait is sized by the text rather than by a number, so its top meets the name and its base meets the last line at every width. The frame is an empty grid item: it contributes no height of its own, so the paragraph sets the row and the frame stretches to it. Sizing the image directly cannot work — a square image tall enough to fill the row is the thing setting the row, and it chases itself. */ @media(min-width:680px){ .me{grid-template-columns:auto minmax(0,1fr);align-items:stretch} .me-shot{position:relative;align-self:stretch;height:100%;width:auto;aspect-ratio:1} .me-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} } .me-name{margin:0;font-size:16px;font-weight:660;letter-spacing:-.02em;color:var(--ink)} .me-line{margin:8px 0 0;font-size:16px;line-height:1.62;color:var(--ink-2);max-width:60ch; text-wrap:pretty} .me-line b{color:var(--ink);font-weight:640} /* ---- The song ---------------------------------------------------------- Native