/*! Ink: hand-drawn UI components and pen font used on this site, adapted from drawably (https://www.drawably.dev, https://github.com/danielwh2/drawably). MIT License, copyright the drawably authors. Thank you! Full notice: /credits.txt */ .ink-host{--ink-ease: cubic-bezier(.2, 0, 0, 1);position:relative;isolation:isolate;font-family:Inter,system-ui,sans-serif}.ink-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1}.ink-svg path{fill:none;stroke:var(--ink-ink, var(--ink-stroke, #2724d1));stroke-width:var(--ink-width, 2);stroke-linecap:round;stroke-linejoin:round}@property --ink-frame{syntax: ""; inherits: true; initial-value: 0;}.ink-svg{--ink-frame: 0;animation:ink-boil 1.2s step-end infinite}@keyframes ink-boil{0%{--ink-frame: 0}33.33%{--ink-frame: 1}66.67%{--ink-frame: 2}}.ink-boil{--ink-i: 0;opacity:clamp(0,1 - (var(--ink-frame) - var(--ink-i)) * (var(--ink-frame) - var(--ink-i)),1)}.ink-boil[data-i="1"]{--ink-i: 1}.ink-boil[data-i="2"]{--ink-i: 2}.ink-svg .ink-blob{fill:var(--ink-ink, var(--ink-fill, #2724d1));stroke:var(--ink-ink, var(--ink-fill, #2724d1));stroke-width:4}.ink-svg .ink-scribble{stroke-width:1.5}.ink-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border:0;background:none;font:inherit;font-family:Inter,system-ui,sans-serif;color:var(--ink-ink, var(--ink-stroke, #2724d1));cursor:pointer;outline:none;transition:transform .12s ease}.ink-button:active{transform:translateY(1px) scale(.98)}.ink-button .ink-outline{transition:stroke-width .12s ease,fill .12s ease}.ink-button:active .ink-outline{stroke-width:calc(var(--ink-width, 2) * 1.4)}@media(hover:hover){.ink-button:hover:not(:disabled,[data-state=loading]){transform:translateY(-1px)}.ink-button:not(.ink-button--solid):hover:not(:disabled) .ink-outline{fill:color-mix(in srgb,var(--ink-ink, var(--ink-stroke, #2724d1)) 10%,transparent)}.ink-button:hover:active{transform:translateY(1px) scale(.98)}}.ink-button:disabled{cursor:not-allowed;opacity:.45;transform:none}.ink-button--neutral{--ink-stroke: #6e675f;--ink-fill: #6e675f}.ink-button--danger{--ink-stroke: var(--ink-error, #d12724);--ink-fill: var(--ink-error, #d12724)}.ink-button[data-state=error]{--ink-ink: var(--ink-error, #d12724)}.ink-button[data-state=success]{--ink-ink: var(--ink-success, #188a42)}.ink-button[data-state=loading]{cursor:progress;opacity:.6}.ink-button[data-state=loading] .ink-svg{animation-duration:.45s}.ink-button--solid{color:var(--ink-paper, #fff)}.ink-svg .ink-focus{visibility:hidden;stroke-width:1.5}.ink-host:is(:focus-visible,:has(:focus-visible)) .ink-focus{visibility:visible}.ink-checkbox,.ink-radio{display:inline-block;width:22px;height:22px}.ink-toggle{display:inline-block;width:44px;height:24px}:is(.ink-checkbox,.ink-radio,.ink-toggle) input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.ink-svg .ink-dot{fill:var(--ink-ink, var(--ink-fill, #2724d1));stroke:var(--ink-ink, var(--ink-fill, #2724d1));visibility:hidden;transform:scale(.5);transform-box:fill-box;transform-origin:center;transition:transform .16s var(--ink-ease)}.ink-radio[data-checked] .ink-dot{visibility:visible;transform:scale(1)}.ink-svg .ink-knob{transition:transform .16s var(--ink-ease)}.ink-toggle[data-checked] .ink-knob{transform:translate(20px)}.ink-divider{display:block;height:10px;border:0}.ink-svg .ink-check{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .24s var(--ink-ease)}.ink-checkbox[data-checked] .ink-check{stroke-dashoffset:0}.ink-inputbox,.ink-textarea,.ink-select{display:inline-block}:is(.ink-inputbox,.ink-textarea,.ink-select) :is(input,textarea,select){border:0;background:none;font:inherit;color:inherit;padding:8px 12px;width:100%;box-sizing:border-box;outline:none}.ink-textarea textarea{display:block;resize:vertical}.ink-select select{appearance:none;padding-right:34px;cursor:pointer}@supports (appearance: base-select){.ink-select select,.ink-select select::picker(select){appearance:base-select}.ink-select select::picker-icon{display:none}.ink-select select::picker(select){margin-top:4px;padding:6px;border:0;background:var(--ink-paper, #fff);color:inherit;font:inherit}.ink-select option{padding:4px 8px;border-radius:3px}.ink-select option:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ink-stroke, #2724d1) 10%,transparent)}.ink-select option::checkmark{content:"";display:inline-block;width:.875em;height:.875em}.ink-select option:checked::checkmark{background:var(--ink-ink, var(--ink-stroke, #2724d1));mask:var(--ink-check) center / contain no-repeat}}.ink-badge{display:inline-block;padding:1px 7px;font:500 12px/1.4 Geist Mono,ui-monospace,monospace;color:var(--ink-ink, var(--ink-stroke, #2724d1))}.ink-list{list-style:none;padding-left:24px}.ink-card{padding:16px}.ink-svg .ink-wash{stroke:var(--ink-ink, var(--ink-fill, #2724d1));stroke-width:6;stroke-opacity:.3;mix-blend-mode:multiply}:is(.ink-underline,.ink-circle) .ink-svg path{stroke-width:var(--ink-width, 1.5)}.ink-arrow{inset:auto;z-index:1}@media(prefers-reduced-motion:reduce){.ink-svg{animation:none}.ink-svg .ink-check,.ink-svg .ink-dot,.ink-svg .ink-knob{transition:none}}.ink-chip{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 6px;cursor:pointer}.ink-chip .ink-checkbox{scale:.8}.ink-tabs{display:flex;gap:18px}.ink-tabs>*{cursor:pointer}.ink-tooltip{display:inline-block;padding:2px 10px}.ink-alert{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 12px}.ink-alert [data-tag]{padding:1px 6px}.ink-kbd{padding:2px 8px;font:500 13px/1.4 Geist Mono,ui-monospace,monospace}.ink-quote{margin:0}.ink-quote footer{margin-top:10px;padding-top:8px}.ink-pager{display:flex;gap:6px}.ink-pager>button{min-width:34px}@font-face{font-family:Ink Pen;src:url(fonts/InkPen.woff2) format("woff2");font-weight:400;font-display:block}:root{--ink: #18181b;--ink-2: #474645;--ink-3: #71717a;--pen: #2724d1;--paper: #ffffff;--panel: #f6f6f8;--line: #a1a1aa;--ink-stroke: var(--pen);--ink-fill: var(--pen);--ink-paper: var(--paper);--font: "Ink Pen", Inter, ui-sans-serif, system-ui, sans-serif}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font)}body,.ink-host,.ink-button,.ink-badge,button,input,textarea,select,option{font-family:var(--font)!important;font-weight:400!important}a{color:inherit}:focus-visible{outline:2px dashed var(--pen);outline-offset:4px}h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}p{margin:0}.wrap{max-width:1040px;margin:0 auto;padding-inline:24px}.narrow{max-width:720px}.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper)}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:22px}.mark{text-decoration:none;font-size:17px}.mark span{color:var(--ink-3);font-size:14px;margin-left:8px}.nav{display:flex;gap:28px;flex-wrap:wrap}.nav a{text-decoration:none;color:var(--ink-2);font-size:15px}.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}@media(max-width:520px){.nav{gap:20px}}.label{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}.muted{color:var(--ink-2)}.section{padding-block:120px 0}.page-end{padding-bottom:140px}h2{font-size:clamp(28px,3.6vw,36px);line-height:1.2}.hero{padding-block:96px 120px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}.hero .status{color:var(--pen);font-size:15px}.hero h1{font-size:clamp(38px,6.4vw,64px);line-height:1.12;max-width:16ch;margin-top:18px}.hero .lede{font-size:18px;color:var(--ink-2);max-width:52ch;margin:28px 0 40px}.cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.cta .ink-button,.btn-row .ink-button{padding:10px 22px;font-size:16px;text-decoration:none}.intro-block{padding-block:88px 0}.intro-block h1{font-size:clamp(36px,5.4vw,54px);line-height:1.12}.intro-block .lede{font-size:18px;color:var(--ink-2);max-width:56ch;margin-top:20px}.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:88px 56px;margin-top:48px}.case{display:block;text-decoration:none;color:inherit}.case .illo{margin-bottom:24px;transition:background-color .16s ease}.case:hover .illo{background:#efeff4}.case:hover h3{color:var(--pen)}.case-meta{display:flex;justify-content:space-between;gap:12px;color:var(--ink-3);font-size:14px}.case h3{font-size:28px;margin:6px 0;transition:color .16s ease}.case .sub{font-size:17px;color:var(--ink-2)}.case.feature{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px 56px;align-items:center}.case.feature .illo{margin:0}.case.feature h3{font-size:40px}.case.feature .sub{font-size:19px}@media(max-width:760px){.cases{grid-template-columns:1fr;gap:64px}.case.feature{grid-template-columns:1fr;gap:24px}.case.feature h3{font-size:32px}}.illo{background:var(--panel);border-radius:16px;padding:28px 32px;margin:0}.illo .frame{aspect-ratio:280 / 150}.illo svg.ink-svg{position:static;inset:auto;width:100%;height:100%;z-index:auto;display:block}.illo svg path{vector-effect:non-scaling-stroke}.illo .tone-grey{--ink-stroke: var(--line)}.illo circle.dot{fill:var(--pen);stroke:none}.illo circle.dot.grey{fill:var(--line)}.illo text{font-family:var(--font);fill:var(--pen)}@media(max-width:760px){.illo{padding:20px}}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px 80px}@media(max-width:760px){.split{grid-template-columns:1fr}}.split .muted{margin-top:14px;max-width:40ch}.exp{list-style:none;margin:0;padding:0}.exp li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding-block:16px}.exp .yr{color:var(--ink-3);font-size:14px;font-variant-numeric:tabular-nums}.exp .co{font-size:18px;text-decoration:none}.exp a.co:hover{color:var(--pen)}.exp .rl{color:var(--ink-2);font-size:15px;text-align:right}@media(max-width:520px){.exp li{grid-template-columns:56px 1fr}.exp .rl{grid-column:2;text-align:left}}.cs-head{padding-block:72px 0}.back{color:var(--ink-3);text-decoration:none;font-size:15px}.back:hover{color:var(--pen)}.cs-head .kicker{margin-top:40px;color:var(--ink-3);font-size:15px}.cs-head h1{font-size:clamp(40px,6vw,60px);line-height:1.1;margin-top:8px}.cs-head .lede{font-size:20px;color:var(--ink-2);margin-top:12px;max-width:48ch}.cs-illo{margin-top:48px;padding:48px 64px}@media(max-width:760px){.cs-illo{padding:24px}}.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:56px}.facts dt{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}.facts dd{margin:6px 0 0;color:var(--ink);font-size:16px}@media(max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}.cs-body{display:grid;gap:88px;padding-block:104px 0}.cs-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:16px 64px}@media(max-width:760px){.cs-sec{grid-template-columns:1fr}}.cs-sec h2{font-size:26px}.cs-sec .label{margin-bottom:8px}.cs-text{display:grid;gap:18px;color:var(--ink-2);font-size:17px;max-width:62ch}.cs-text h3{color:var(--ink);font-size:21px;margin-top:10px}.cs-text ul{margin:0;padding:0;display:grid;gap:10px}.cs-text li{padding-left:4px}.cs-text .pull{color:var(--pen);font-size:24px;line-height:1.35}.note-box{padding:22px 26px;color:var(--ink-2)}.next{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-block:120px 140px}.next a.next-link{text-decoration:none}.next .next-link span{display:block;color:var(--ink-3);font-size:14px}.next .next-link strong{font-weight:400;font-size:32px}.next .next-link:hover strong{color:var(--pen)}.about-grid p+p{margin-top:16px}.about-grid p{color:var(--ink-2);font-size:17px;max-width:60ch}.pullquote{color:var(--pen);font-size:clamp(24px,3vw,30px);line-height:1.35;margin:48px 0 0;max-width:28ch}.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px 64px;margin-top:56px}.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--ink-2)}.fun{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;margin-top:64px}@media(max-width:860px){.fun{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.fun{grid-template-columns:1fr}}.fun-item{display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit}.fun-item .kind{color:var(--ink-3);font-size:14px}.fun-item h3{font-size:24px}.fun-item p{color:var(--ink-2)}.fun-item .award{color:var(--pen);font-size:15px;margin-top:4px;justify-self:start}.fun-item:hover h3{color:var(--pen)}.fun-filter{display:flex;gap:6px;flex-wrap:wrap;margin-top:40px}.fun-filter button{border:0;background:none;padding:6px 10px;color:var(--ink-3);font-size:15px;cursor:pointer}.fun-filter button[aria-selected=true]{color:var(--ink)}.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:56px 96px}@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}.email{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}.email a{font-size:20px;text-decoration:none;overflow-wrap:anywhere}.links{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:10px;font-size:15px}.links li{display:grid;grid-template-columns:90px 1fr;gap:12px}.links li span{color:var(--ink-3)}.links a{text-decoration:none;overflow-wrap:anywhere;min-width:0}.links a:hover{color:var(--pen)}form{display:grid;gap:22px}.field{display:grid;gap:8px}.field>label{font-size:14px;color:var(--ink-2)}.ink-input input,.ink-textarea textarea,.ink-select select{color:var(--ink);font-size:16px}.row{display:flex;gap:16px;flex-wrap:wrap}.row>.field{flex:1 1 180px}.form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.form-foot .ink-button{padding:10px 20px}.hint{font-size:14px;color:var(--ink-3)}.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.contact-side .email a{font-size:18px}.more-link{margin-top:56px;display:flex;justify-content:center}footer.page{padding-block:0 56px;color:var(--ink-3);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}footer.page a{text-decoration:none}footer.page a:hover{color:var(--pen)}.case h3{line-height:1.3}.about-grid .pullquote{color:var(--pen);font-size:clamp(20px,2.4vw,24px);line-height:1.45;margin:48px 0 0;max-width:40ch}.about-grid .quote-by{color:var(--ink-3);font-size:15px;margin-top:14px}.next .next-link{text-align:right}.hero h1{max-width:20ch}.wrap{max-width:1320px;padding-inline:clamp(20px,4vw,56px)}.top .wrap{padding-block:28px}.hero{padding-block:160px 200px}.hero h1{max-width:22ch;font-size:clamp(40px,5.6vw,76px)}.hero .lede{margin:36px 0 52px}.section{padding-block:200px 0}.page-end{padding-bottom:200px}.cases{gap:140px 72px;margin-top:72px}.case .illo{margin-bottom:32px}.case.feature{gap:40px 80px}.case h3{font-size:30px}.case.feature h3{font-size:44px}.case .sub{margin-top:4px}.illo{padding:40px 48px}.split{gap:48px 120px}.exp li{padding-block:22px}.intro-block{padding-block:140px 0}.cs-head{padding-block:96px 0}.cs-illo{margin-top:72px;padding:72px 96px}.cs-body{padding-block:160px 0;gap:120px}.next{padding-block:160px 200px}.fun{gap:80px 64px;margin-top:96px}.contact-grid{gap:72px 140px}.more-link{margin-top:64px}footer.page{padding-block:0 72px}@media(max-width:760px){.hero{padding-block:96px 120px}.section{padding-block:120px 0}.page-end{padding-bottom:120px}.cases{gap:88px}.intro-block{padding-block:88px 0}.cs-illo,.illo{padding:24px}}:root{--c-green: #9cc98a;--c-amber: #f4bf5e;--c-coral: #f19a84;--c-sky: #a9cde9}.illo,.case:hover .illo{background:transparent!important}.illo{padding:8px 0!important}.cs-illo{padding:24px 0!important}.illo svg path.wash{stroke:none!important;opacity:.7;mix-blend-mode:multiply}.illo svg path.wash.green{fill:var(--c-green)}.illo svg path.wash.amber{fill:var(--c-amber)}.illo svg path.wash.coral{fill:var(--c-coral)}.illo svg path.wash.sky{fill:var(--c-sky)}.illo .tone-grey{--ink-stroke: #8a8a93}.hero{padding-block:128px 168px}.hero .status{font-size:14px}.hero h1{font-size:clamp(32px,4.2vw,54px)!important;max-width:20ch!important;line-height:1.2;margin-top:20px}.hero .lede{font-size:17px;max-width:48ch;margin:28px 0 44px!important}.cta .ink-button{font-size:15px;padding:9px 20px}.scene{padding:0!important;margin-top:40px;max-width:1600px;margin-inline:auto}.scene .frame{aspect-ratio:auto;height:clamp(140px,17vw,250px)}.scene .ink-scribble{stroke:var(--ink)}.illo text,.scene text{font-family:var(--font);fill:var(--pen)}.illo svg path.wash.ink{fill:var(--ink);opacity:.85;mix-blend-mode:normal}.beliefs{text-align:center;display:flex;flex-direction:column;align-items:center}.beliefs h2{max-width:22ch;font-size:clamp(28px,3.4vw,44px);line-height:1.3}.belief-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 72px;margin-top:96px;width:100%}@media(max-width:760px){.belief-row{grid-template-columns:1fr;gap:64px;margin-top:64px}}.belief{display:grid;justify-items:center;align-content:start;gap:10px}.belief-art{width:100%;max-width:200px}.belief-art .frame{aspect-ratio:160 / 100}.belief-art svg.ink-svg{position:static;inset:auto;width:100%;height:100%;z-index:auto;display:block}.belief-art svg path{vector-effect:non-scaling-stroke}.belief-art .tone-grey{--ink-stroke: #8a8a93}.belief-art circle.dot{fill:var(--pen)}.belief-art circle.dot.grey{fill:var(--line)}.belief-art text{font-family:var(--font);fill:var(--pen)}.belief-art path.wash{stroke:none!important;opacity:.7;mix-blend-mode:multiply}.belief-art path.wash.green{fill:var(--c-green)}.belief-art path.wash.amber{fill:var(--c-amber)}.belief-art path.wash.sky{fill:var(--c-sky)}.belief-art path.wash.coral{fill:var(--c-coral)}.belief h3{font-size:22px;margin-top:12px}.belief p{color:var(--ink-2);max-width:28ch}.mark{display:inline-flex;align-items:center}.logo{display:block;width:48px;height:48px}.logo svg.ink-svg{position:static;inset:auto;width:100%;height:100%;z-index:auto;display:block;overflow:visible}.logo svg path{vector-effect:non-scaling-stroke}.logo path.wash{stroke:none!important;opacity:.7;mix-blend-mode:multiply}.logo path.wash.amber{fill:var(--c-amber)}.cases{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:120px 72px!important;align-items:start}.case .illo{margin:0 0 28px!important}.case .illo .frame{aspect-ratio:280 / 150}.case h3{font-size:28px!important}.case-meta{margin-bottom:4px}@media(max-width:760px){.cases{grid-template-columns:1fr!important;gap:88px!important}}.illo circle.dot.green{fill:var(--c-green)}.illo circle.dot.amber{fill:var(--c-amber)}.illo circle.dot.coral{fill:var(--c-coral)}.illo circle.dot.sky{fill:var(--c-sky)}.illo text.grey{fill:#8a8a93}.top{transition:transform .36s cubic-bezier(.2,0,0,1),background-color .2s ease}.top .wrap{transition:padding .28s cubic-bezier(.2,0,0,1)}.logo{transition:width .28s cubic-bezier(.2,0,0,1),height .28s cubic-bezier(.2,0,0,1)}.top.scrolled .wrap{padding-block:12px}.top.scrolled .logo{width:38px;height:38px}.top.tucked{transform:translateY(calc(-100% - 8px))}.top-rule-wrap{position:relative;height:0}.top-rule{position:absolute;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);top:-6px;height:12px;border:0;margin:0;clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.2,0,0,1)}.top.scrolled .top-rule{clip-path:inset(0 0 0 0)}@media(prefers-reduced-motion:reduce){.top,.top .wrap,.logo,.top-rule{transition:none}}.illo.ink{position:relative;container-type:inline-size}.illo.ink svg.ink-svg{--ink-stroke: var(--ink);overflow:hidden}.illo.ink .tone-grey{--ink-stroke: #9a9aa2}.illo.ink circle.dot{fill:var(--ink)}.illo.ink path.wash.hair{fill:#5d5d63;opacity:.75}.illo-words{position:absolute;left:0;top:14%;z-index:2;display:flex;flex-direction:column;font-size:11cqw;line-height:.95;letter-spacing:-.01em;color:var(--ink);pointer-events:none}.illo-words span+span{padding-left:.7em}.illo.ink .frame{position:relative;z-index:1}.case .illo{margin-bottom:20px!important}.case h3.result{font-size:clamp(20px,1.8vw,24px)!important;line-height:1.35;color:var(--ink);margin:0}.case h3.result .wip{font-size:14px;color:var(--ink-3);margin-left:8px;white-space:nowrap}.case:hover h3.result{color:var(--pen)}.cases{gap:104px 72px!important}.cases{gap:112px 48px!important;margin-top:56px!important}.illo-words{font-size:9cqw;top:10%}.case .illo{margin-bottom:24px!important}.case h3.result{font-size:clamp(22px,2vw,28px)!important}.case h3.result .wip{font-size:15px}#work-title{font-size:clamp(30px,3.4vw,44px)}@media(max-width:760px){.illo-words{font-size:10cqw}.cases{gap:80px!important}}:root{--ink-2: #6b6b72;--ink-3: #9d9da5}.nav a{font-size:14px}#loader.pg{animation:pg-in .22s cubic-bezier(.2,0,0,1) both}@keyframes pg-in{0%{opacity:0}}@media(prefers-reduced-motion:reduce){#loader.pg{animation:none}}.illo.st-art{background:transparent;padding:0;border-radius:0}.st-art .frame{aspect-ratio:320 / 220}.illo path.wash.green{fill:var(--c-green)}.illo svg text{font-family:var(--font);fill:var(--ink-2)}.illo svg text.grey{fill:var(--ink-3)}.st-text p:not(.label){color:var(--ink-2);max-width:46ch;margin-top:14px;line-height:1.75}.st-text h2{margin-top:2px}.st-end{text-align:center}.st-end h2{max-width:28ch;margin:0 auto 36px}.st-end .cta{justify-content:center}.st-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px 80px;align-items:center}.st-photo{margin:0;justify-self:end;width:min(360px,100%)}.st-photo-in{display:block}.st-photo-in img{display:block;width:100%;height:auto}.st-road{position:relative}.st-road ol{list-style:none;margin:0;padding:0;display:grid;gap:140px;position:relative;z-index:1}.st-stop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 96px;align-items:center}.st-stop .st-art{width:min(420px,100%);justify-self:center}.st-stop:nth-child(2n) .st-art{order:2}.st-road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.st-road-svg path{fill:none;stroke-width:2;stroke-linecap:round}.st-road-svg path.base{stroke:var(--line);stroke-dasharray:1 9;opacity:.8}.st-road-svg path.ink{stroke:var(--pen);stroke-width:2.4}.st-road-svg .tip{transition:opacity .2s ease}.st-road-svg .tip circle{fill:var(--pen)}.st-road-svg .tip circle.glow{fill:var(--c-amber);opacity:.6;animation:st-pulse 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes st-pulse{50%{transform:scale(1.5);opacity:.25}}.st-road.live .st-stop .st-art,.st-road.live .st-stop .st-text{transition:opacity .6s ease,transform .7s cubic-bezier(.2,0,0,1)}.st-road.live .st-stop:not(.on) .st-art{opacity:.25;transform:translateY(16px) rotate(-1.5deg) scale(.96)}.st-road.live .st-stop:not(.on) .st-text{opacity:.35;transform:translateY(12px)}.st-book-hero{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.4fr);gap:40px 88px;align-items:center}.st-polaroid{margin:0;background:#fffdf8;padding:14px 14px 0;position:relative;transform:rotate(var(--tilt, -2.5deg));border-radius:4px 6px 3px 5px;box-shadow:0 2px 0 -1px #ece8de,0 14px 28px -18px #281e0a59}.st-polaroid img{display:block;width:100%;height:auto;border-radius:2px}.st-polaroid figcaption{font-size:15px;color:var(--ink-2);padding:14px 6px 18px;text-align:center}.st-polaroid .st-art{background:#f5f2ea;border-radius:3px;padding:12px}.st-polaroid-me{width:min(300px,100%);justify-self:center}.st-tape{position:absolute;top:-13px;left:50%;width:92px;height:26px;transform:translate(-50%) rotate(-4deg);background:color-mix(in srgb,var(--c-amber) 55%,transparent);clip-path:polygon(0 8%,6% 0,12% 10%,18% 2%,24% 8%,100% 4%,94% 16%,100% 30%,94% 46%,100% 62%,94% 78%,100% 94%,30% 100%,22% 92%,14% 100%,6% 92%,0 100%,6% 84%,0 68%,6% 52%,0 36%,6% 20%)}.st-book{display:grid;gap:140px}.st-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px 96px;align-items:center}.st-page .st-polaroid{width:min(400px,100%);justify-self:center}.st-page:nth-child(2n) .st-polaroid{order:2}.st-light{overflow-x:clip}.st-beat{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 0;position:relative;isolation:isolate}.st-beat:before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1.6;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--c-amber) calc(var(--glow, 0) * 95%),transparent),transparent)}.st-beat-open{min-height:84vh}.st-beat-open .lede{margin:28px auto 0;max-width:50ch;color:var(--ink-2);font-size:17px;line-height:1.7}.st-beat-open h1{font-size:clamp(32px,4.4vw,54px)!important;line-height:1.2!important;max-width:18ch}.st-beat-open .lede{margin-inline:auto}.st-beat h2{font-size:clamp(26px,3.4vw,42px)!important;line-height:1.25!important;max-width:22ch}.st-beat .st-art{width:min(280px,72%);margin-bottom:28px}.st-sub{color:var(--ink-2);max-width:54ch;margin:20px auto 0;line-height:1.75}.st-scroll{margin-top:48px;color:var(--ink-3);font-size:14px;animation:st-bob 1.8s ease-in-out infinite}@keyframes st-bob{50%{transform:translateY(6px)}}.st-me .frame{aspect-ratio:300 / 330}.illo.ink.st-me{background:transparent;padding:0;border-radius:0}.illo.ink.st-me path.wash.skin{fill:#c98d63;opacity:.5}.illo.ink.st-me path.wash.hair{fill:#3f3f46;opacity:.8}.st-polaroid .st-me{background:#f5f2ea;border-radius:3px}.st-me-c{width:min(200px,52vw);margin:0 auto 20px}.st-lesson{color:var(--ink)!important;font-size:1.08em;margin-top:18px!important;padding-left:30px;position:relative}.st-lesson:before{content:"";position:absolute;left:0;top:.35em;width:18px;height:14px;background:var(--c-amber);opacity:.7;border-radius:60% 40% 55% 45%/50% 60% 40% 50%;transform:rotate(-8deg)}.st-beat .st-lesson{display:inline-block;margin-inline:auto}.st-beat.pre{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,0,0,1)}.st-beat.pre.in{opacity:1;transform:none}@media(max-width:860px){.st-hero,.st-book-hero,.st-stop,.st-page{grid-template-columns:minmax(0,1fr)}.st-stop:nth-child(2n) .st-art,.st-page:nth-child(2n) .st-polaroid{order:0}.st-photo{justify-self:start;width:min(240px,70%)}.st-road ol,.st-book{gap:88px}}@media(prefers-reduced-motion:reduce){.st-scroll{animation:none}.st-road-svg .tip circle.glow{animation:none}}.nav{align-items:center}.nav a.nav-cv{color:var(--ink);gap:6px;padding:6px 14px 7px;font-size:14px;--ink-stroke: var(--ink)}.nav-cv .ink-scribble{stroke:var(--c-amber);stroke-width:2.4}.nav-cv .ink-outline{stroke:var(--ink)}.nav-cv .cv-arrow{width:11px;height:13px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.nav-cv>span{position:relative}.nav-cv .cv-short{display:none}.oops{text-align:center;padding-bottom:40px}.oops h1,.oops .lede{margin-inline:auto}.oops .lede{max-width:46ch}.oops-art{max-width:620px;margin:28px auto 8px!important;padding:0!important;background:transparent!important}.oops-art .frame{aspect-ratio:560 / 260}.oops .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}.oops-hint{min-height:1.5em;margin-top:18px;color:var(--ink-3);font-size:15px}.oops-art text{font-family:var(--font)}.oops-art circle.dot.fresh{animation:drip .6s ease-out both}@keyframes drip{0%{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}.oops-art.shaking{animation:pen-shake .42s ease-in-out}@keyframes pen-shake{0%,to{transform:none}20%{transform:rotate(-1.5deg) translate(-4px)}40%{transform:rotate(1.2deg) translate(4px)}60%{transform:rotate(-.8deg) translate(-2px)}80%{transform:rotate(.5deg)}}@media(prefers-reduced-motion:reduce){.oops-art.shaking,.oops-art circle.dot.fresh{animation:none}}.nav-snd{background:none;border:0;padding:4px;margin:0 -6px 0 0;cursor:pointer;color:var(--ink-2);display:inline-flex;border-radius:8px}.nav-snd:hover,.nav-snd[aria-pressed=true]{color:var(--ink)}.nav-snd:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}.nav-snd svg{width:22px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}@media(max-width:520px){.top .wrap{column-gap:12px}.top .nav{gap:14px}.nav a.nav-cv{padding:4px 9px 5px;font-size:13px;gap:4px}.nav-cv .cv-long{display:none}.nav-cv .cv-short{display:inline}.nav-snd{margin-right:-4px}}@media(max-width:380px){.top .nav{gap:12px}.nav-cv .cv-arrow{display:none}}.hero .status{font-size:13px!important}.hero h1{font-size:clamp(30px,3.6vw,44px)!important;line-height:1.25!important;max-width:22ch!important}.hero .lede{font-size:15px!important;color:var(--ink-2);line-height:1.7;margin:24px 0 36px!important}.cta .ink-button{font-size:14px!important;padding:8px 18px!important}.label{font-size:12px!important;color:var(--ink-3)}h2,#work-title,.beliefs h2,.split h2{font-size:clamp(24px,2.4vw,30px)!important;line-height:1.3!important}.muted,.split .muted{font-size:14px;color:var(--ink-2)}.illo-words{font-size:7.5cqw!important}.case h3.result{font-size:18px!important;line-height:1.4}.case h3.result .wip{font-size:12px!important;color:var(--ink-3)}.belief h3{font-size:18px!important}.belief p{font-size:14px;color:var(--ink-2)}.exp .co{font-size:16px!important}.exp .yr,.exp .rl{font-size:13px!important;color:var(--ink-3)!important}.more-link .ink-button{font-size:14px}footer.page{font-size:13px!important;color:var(--ink-3)}.intro-block h1,.cs-head h1{font-size:clamp(30px,3.6vw,44px)!important;line-height:1.25!important}.intro-block .lede,.cs-head .lede{font-size:16px!important;color:var(--ink-2)}.cs-head .kicker{font-size:13px;color:var(--ink-3)}.cs-sec h2{font-size:22px!important}.cs-text{font-size:16px!important}.fun-item h3{font-size:20px!important}.fun-item p,.fun-item .kind{font-size:14px}.about-grid p{font-size:16px!important}.about-grid .pullquote,.next .next-link strong{font-size:20px!important}.case .desc{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:6px;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.illo.ink path.wash.skin{fill:#f5d3b8;opacity:.8}.cases{gap:160px 96px!important;margin-top:88px!important}.case .illo{margin-bottom:32px!important}@media(max-width:760px){.cases{gap:104px!important}}.case .story{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:54ch;margin:0}.case .story strong{font-weight:400;color:var(--ink);font-size:19px}.case .story .wip{font-size:12px;color:var(--ink-3);margin-left:6px;white-space:nowrap}.case:hover .story strong{color:var(--pen)}.hero .lede{margin-bottom:0!important}.illo.ink circle.dot.green{fill:#7fb86a!important}.illo.ink circle.dot.coral{fill:#ec7f66!important}.illo.ink circle.dot.amber{fill:#eeae3d!important}.illo.ink circle.dot.sky{fill:#86b9e0!important}.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin:0 auto 72px;max-width:40ch}.sec-head .label{margin:0!important}.sec-head h2,.beliefs .sec-head h2{font-size:clamp(26px,2.6vw,32px)!important;line-height:1.25!important;max-width:none!important;margin:0}.sec-lede{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:6px}.cases,.belief-row{margin-top:0!important}.exp-sec .exp{max-width:720px;margin:0 auto}.page-end .sec-head{margin-bottom:40px}.more-link{margin-top:0!important}.exp-full li{display:grid!important;grid-template-columns:150px minmax(0,1fr)!important;gap:4px 32px!important;align-items:baseline;padding-block:20px!important;border:0!important}.exp-full .yr{font-size:13px!important;color:var(--ink-3)!important;white-space:nowrap}.exp-full .job{display:grid;gap:4px}.exp-full .co{font-size:16px!important;margin:0}.exp-full .rl{font-size:14px!important;color:var(--ink-2)!important;margin-left:6px;text-align:left!important}.exp-full .hl{font-size:14px;line-height:1.6;color:var(--ink-3);margin:0}.exp-sec .exp{max-width:820px!important}@media(max-width:560px){.exp-full li{grid-template-columns:1fr!important}.exp-full .rl{display:block;margin:2px 0 0}}.exp-full li{padding-block:16px!important}.case .story{font-size:15px!important;line-height:1.6;color:var(--ink-2)!important;max-width:50ch}.case:hover .story{color:var(--ink)!important}.t-quote{margin:0 auto;max-width:760px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}.t-quote .label{margin:0!important}.t-quote blockquote{margin:0}.t-quote blockquote p{font-size:clamp(20px,2vw,24px);line-height:1.55;color:var(--ink)}.t-quote figcaption{font-size:14px;color:var(--ink-3)}.case .story{font-size:13px!important;line-height:1.6;color:var(--ink-3)!important}.case:hover .story{color:var(--ink-2)!important}.t-quote figcaption{display:flex;align-items:center;gap:12px}.t-avatar{display:block;width:44px;height:44px}.t-avatar .frame{display:block;width:100%;height:100%}.t-avatar svg.ink-svg{position:static;inset:auto;width:100%;height:100%;z-index:auto;display:block;overflow:visible}.t-avatar svg path{vector-effect:non-scaling-stroke}.t-avatar path.wash{stroke:none!important;opacity:.7;mix-blend-mode:multiply}.t-avatar path.wash.green{fill:var(--c-green)}.pubs-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 64px}@media(max-width:860px){.pubs-row{grid-template-columns:1fr;gap:48px;max-width:520px;margin:0 auto}}.pubs-row a{display:grid;gap:8px;text-decoration:none;color:inherit;align-content:start}.pubs-row .venue{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}.pubs-row h3{font-size:18px;line-height:1.35}.pubs-row p{font-size:14px;line-height:1.6;color:var(--ink-2)}.pubs-row .read{font-size:14px;color:var(--pen);margin-top:4px}.pubs-row a:hover h3{color:var(--pen)}.pub-illo{margin:0 0 20px!important;padding:0!important;width:82%}@media(max-width:860px){.pub-illo{width:78%}}.pub-illo .frame{aspect-ratio:280 / 200!important}.illo svg path.wash.paper{fill:var(--paper);opacity:1;mix-blend-mode:normal;transform:none}.pub-illo svg{transition:transform .52s cubic-bezier(.2,0,0,1)}.pubs-row a:hover .pub-illo svg{transform:translateY(-4px) rotate(-1deg)}@media(prefers-reduced-motion:reduce){.pub-illo svg{transition:none}.pubs-row a:hover .pub-illo svg{transform:none}}.hero-cue{display:block;margin:72px auto 0;padding:8px;border:0;background:none;cursor:pointer;color:inherit;border-radius:8px}.hero-cue{--ink-stroke: var(--ink)}.hero-cue .frame{display:block;width:40px;height:72px}.hero-cue svg.ink-svg{position:static;inset:auto;width:100%;height:100%;z-index:auto;display:block;overflow:visible}.hero-cue svg path{vector-effect:non-scaling-stroke}.hero-cue:focus-visible{outline:2px solid var(--pen);outline-offset:4px}@media(max-width:760px){.hero-cue{margin-top:48px}}.pen-wait svg.ink-svg{visibility:hidden}.pen-ready path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1}.pen-drawn path[pathLength]{stroke-dashoffset:0;transition:stroke-dashoffset var(--pen-ms, .48s) var(--ink-ease, cubic-bezier(.2,0,0,1))}@media(prefers-reduced-motion:reduce){.pen-ready path[pathLength]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}}.case{position:relative}.case-meta{display:none}.case .num{white-space:nowrap}.case .num .ink-svg{opacity:0}.illo-words.tight span+span{padding-left:0}.case-sketch{display:none}.cv-hover .case-sketch{display:block;position:absolute;inset:-28px -32px -26px;pointer-events:none;opacity:0;transition:opacity .16s ease;z-index:0}.cv-hover .case-sketch .ink-svg path{stroke:var(--ink);stroke-width:1.6}@media(hover:hover){.cv-hover .case:hover .case-sketch{opacity:1}}.cv-hover .case:focus-visible .case-sketch{opacity:1}.cv-hover .case>:not(.case-sketch){position:relative;z-index:1}.cv-text .case .illo{margin-bottom:16px!important}.cv-text .case-meta{display:block;margin:0 0 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}.cv-text .case .story{font-size:16px!important;line-height:1.6;color:var(--ink-2)!important;max-width:46ch;min-height:0}.cv-text .case .num{color:var(--ink)}.cv-text .case .num .ink-svg{opacity:1}.cv-text .case .view-cue{margin-top:14px}.cv-wash .case .illo{position:relative;isolation:isolate}.cv-wash .case .illo:before{content:"";position:absolute;inset:-56px -64px -48px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,var(--wash, var(--c-sky)) 30%,transparent) 0%,color-mix(in srgb,var(--wash, var(--c-sky)) 16%,transparent) 45%,transparent 100%);transition:opacity .32s cubic-bezier(.2,0,0,1),transform .42s cubic-bezier(.2,0,0,1)}.cv-wash .case:hover .illo:before{transform:scale(1.04)}@media(max-width:760px){.cv-wash .case .illo:before{inset:-40px -20px -32px}}html,body{overflow-x:clip}.cv-wash .case .illo .frame{position:relative;z-index:1}.case-glucose{--wash: var(--c-sky)}.case-hotel{--wash: var(--c-amber)}.case-air{--wash: var(--c-coral)}.case-cyber{--wash: var(--c-green)}.case-trading{--wash: var(--c-sky)}.case-medicare{--wash: var(--c-amber)}.cv-wash .cases{gap:136px 104px!important}@media(prefers-reduced-motion:reduce){.case-sketch,.cv-wash .case .illo:before{transition:none}}.cs-flows{display:grid;gap:28px;margin:8px 0}.flow-row{display:grid;grid-template-columns:120px 1fr;gap:10px 24px;align-items:center}.flow-name{margin:0;font-size:15px;color:var(--ink-2)}.flow-row.pick .flow-name{color:var(--ink)}.flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0}.flow-steps li{display:flex;align-items:center}.flow-steps li+li:before{content:"\2192";color:var(--ink-3);margin:0 10px;font-size:14px}.flow-steps span[data-d]{display:inline-block;padding:8px 14px;font-size:14px;color:var(--ink);--ink-stroke: #8a8a93}.flow-row.pick .flow-steps span[data-d]{--ink-stroke: var(--ink)}.flow-note{grid-column:2;margin:0;font-size:14px;color:var(--ink-3)}@media(max-width:640px){.flow-row{grid-template-columns:1fr}.flow-note{grid-column:1}}.hero{padding-block:144px 176px!important;display:flex;flex-direction:column;align-items:center;text-align:center}.hero h1{margin:0 auto!important;max-width:20ch!important;text-wrap:balance}.hero .lede{margin:28px auto 0!important;max-width:44ch!important;text-wrap:balance}@media(max-width:760px){.hero{padding-block:88px 112px!important}}.hero .lede{max-width:62ch!important}@media(max-width:760px){.hero .lede{max-width:44ch!important}}.bw{display:inline-block;white-space:nowrap}.bc{display:inline-block;animation:text-boil 1.2s step-end infinite;transform:translate(var(--x0),var(--y0)) rotate(var(--r0))}@keyframes text-boil{0%{transform:translate(var(--x0),var(--y0)) rotate(var(--r0))}33.33%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1))}66.67%{transform:translate(var(--x2),var(--y2)) rotate(var(--r2))}}@media(prefers-reduced-motion:reduce){.bc{animation:none;transform:none}}.logo path.wash.sky{fill:var(--c-sky)}footer.page{align-items:center}.foot-left{display:inline-flex;align-items:center;gap:16px}.foot-mark{display:block;width:150px;height:44px}.foot-mark .frame{display:block;width:100%;height:100%}.foot-mark svg.ink-svg{position:static;inset:auto;width:100%;height:100%;z-index:auto;display:block;overflow:visible}.foot-mark svg path{vector-effect:non-scaling-stroke}.foot-mark text{font-family:var(--font);fill:var(--ink)}.foot-mark path.wash{stroke:none!important;opacity:.7;mix-blend-mode:multiply}.foot-mark path.wash.amber{fill:var(--c-amber)}.foot-left .copy{font-size:13px;color:var(--ink-3)}footer.page{align-items:flex-end!important}.foot-left{display:flex!important;flex-direction:column;align-items:flex-start;gap:10px!important}.foot-note{margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--ink-2);max-width:64ch}.case .view-cue{display:inline-block;margin-top:12px;font-size:14px;color:var(--pen)}.case .view-cue>span{padding-bottom:2px}.case .story{min-height:3.2em}.cs-top{padding-top:72px}.cs-top .back{display:inline-block;font-size:14px;color:var(--ink-3);text-decoration:none;margin-bottom:72px}.cs-top .back:hover{color:var(--pen)}.cs-top .sec-head{max-width:820px!important;margin-bottom:56px}.cs-top h1{max-width:24ch}.cs-top h1{font-size:clamp(30px,3.4vw,42px);line-height:1.25;text-wrap:balance}.cs-top .sec-lede{max-width:56ch}.cs-hero-illo{max-width:1040px;margin:0 auto!important}.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;max-width:1040px;margin:96px auto 0;padding:0}.cs-facts dt{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}.cs-facts dd{margin:8px 0 0;font-size:15px;color:var(--ink);line-height:1.5}.cs-impact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1040px;margin:96px auto 0;text-align:center}.cs-impact strong{display:block;font-weight:400;font-size:clamp(36px,4vw,52px);color:var(--pen);line-height:1.1}.cs-impact span{display:block;margin-top:10px;font-size:14px;color:var(--ink-2)}.cs-flow{max-width:680px;margin:0 auto;display:grid;gap:120px;padding-top:160px}.cs-part .sec-head.left{align-items:flex-start;text-align:left;margin:0 0 24px;max-width:none}.cs-copy{display:grid;gap:18px;font-size:16px;line-height:1.75;color:var(--ink-2)}.cs-copy h3{font-size:18px;color:var(--ink);margin-top:8px}.cs-copy ul{margin:0;padding:0;display:grid;gap:10px}.cs-copy .pull{font-size:22px;line-height:1.5;color:var(--ink);padding:8px 0}.cs-copy .soon{text-align:center;color:var(--ink-2)}.cs-img{margin:16px 0}.cs-img img{width:100%;border-radius:12px;display:block}.cs-img figcaption{font-size:13px;color:var(--ink-3);margin-top:10px}.cs-next{text-align:center;padding-block:200px 160px;display:flex;flex-direction:column;align-items:center;gap:12px}.cs-next .label{margin:0!important}.cs-next a{font-size:clamp(26px,2.6vw,32px);color:var(--ink);text-decoration:none}.cs-next a:hover{color:var(--pen)}.cs-next .next-story{font-size:13px;color:var(--ink-3);max-width:44ch;margin-top:4px}@media(max-width:760px){.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:64px}.cs-impact{grid-template-columns:1fr;margin-top:64px}.cs-flow{padding-top:104px;gap:88px}.cs-top .back{margin-bottom:48px}}.cs-flow{max-width:1040px!important}.cs-part>.sec-head,.cs-copy>*{max-width:680px;margin-left:auto;margin-right:auto;width:100%}.cs-part>.sec-head.left{margin:0 auto 28px!important}.cs-copy>.wide{max-width:1040px;margin-top:32px;margin-bottom:16px}.cs-copy strong{font-weight:400;color:var(--ink)}.cs-img{margin:24px auto}.cs-img img{width:100%;display:block;border-radius:10px;border:1px solid #ececef}.cs-img figcaption,.cs-gallery figcaption,.cs-orbit figcaption{font-size:13px;color:var(--ink-3);margin-top:12px;text-align:center}.cs-gallery>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cs-gallery img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:10px;display:block}.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}.cs-pair .cs-img{margin:0}.qlist{columns:2;column-gap:40px}.qlist li{break-inside:avoid;margin-bottom:10px}.cs-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 56px}.cs-cols h3{font-size:17px;color:var(--ink);margin:0 0 14px}.cs-cols ol{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14px;line-height:1.6;color:var(--ink-2)}.cs-cols li::marker{color:var(--ink-3)}.cs-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:16px!important}.cs-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}.cs-steps .n{display:grid;place-items:center;width:44px;height:44px;font-size:18px;color:var(--pen)}.cs-steps .t{font-size:14px;color:var(--ink-2)}.cs-steps hr{position:absolute;top:16px;right:calc(50% + 34px);width:calc(100% - 68px);height:12px;margin:0;border:0}.cs-orbit{padding:0!important;background:none!important}.cs-orbit .frame{aspect-ratio:480 / 300;max-width:760px;margin:0 auto}.cs-orbit text{font-size:10px}.cs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}.cs-split .cs-copy>*{max-width:none}.cs-split .cs-img{margin:0}.learn li{margin-bottom:6px}.cs-copy ul[data-d=list]{padding-left:26px}@media(max-width:760px){.cs-gallery>div,.cs-pair,.cs-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cs-pair,.cs-split{grid-template-columns:1fr;gap:24px}.cs-cols{grid-template-columns:1fr}.qlist{columns:1}.cs-steps{grid-template-columns:repeat(5,minmax(0,1fr))}.cs-steps .t{font-size:11px}.cs-steps hr{display:none}}.cs-part>.sec-head.left{max-width:680px!important;margin:0 auto 28px!important}.cs-copy>ul,.cs-copy>ol:not(.wide){margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}.cs-steps .n>span{display:inline-block;padding:0 12px}.cs-hero-scene{max-width:1320px;margin:0 auto!important;padding:0!important;background:none!important}.cs-hero-scene .frame{aspect-ratio:1000 / 420}.cs-hero-scene .illo-words{font-size:5.2cqw;top:4%}.cs-hero-scene text{font-family:var(--font)}.cs-rail{position:fixed;top:50%;transform:translateY(-50%);left:max(24px,calc((100vw - 1320px)/2 + 40px));z-index:4;opacity:0;pointer-events:none;transition:opacity .24s ease;display:flex;gap:0}.cs-rail.show{opacity:1;pointer-events:auto}.cs-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:22px;position:relative;z-index:1}.cs-rail a{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:13px;color:var(--ink-3)}.cs-rail .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);transition:background-color .24s ease,border-color .24s ease,transform .24s ease;flex:none}.cs-rail li.done .dot{background:var(--pen);border-color:var(--pen)}.cs-rail li.now .dot{background:color-mix(in srgb,var(--pen) 25%,var(--paper));border-color:var(--pen);transform:scale(1.25)}.cs-rail li.now a,.cs-rail li.done a{color:var(--ink)}.cs-rail a:hover{color:var(--pen)}.cs-rail .track{position:absolute;left:6.5px;top:7px;bottom:7px;width:1.5px;background:#e4e4e8}.cs-rail .fill{position:absolute;inset:0;background:var(--pen);transform-origin:top;transform:scaleY(0)}@media(max-width:1180px){.cs-rail{display:none}}@media(prefers-reduced-motion:reduce){.cs-rail,.cs-rail .dot{transition:none}}.notes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:28px!important}.note{position:relative;min-height:104px;padding:20px 18px 22px;font-size:15px;line-height:1.45;color:var(--ink);border-radius:3px;box-shadow:0 8px 18px -12px #00000047;transition:transform .2s ease}.note.c0{background:#fbecc4;transform:rotate(-1.6deg)}.note.c1{background:#dbeaf6;transform:rotate(1.2deg)}.note.c2{background:#fbdcd3;transform:rotate(-.8deg)}.note.c3{background:#dcecd3;transform:rotate(1.8deg)}.note:hover{transform:rotate(0) translateY(-3px)}.note:before{content:"";position:absolute;top:-8px;left:50%;width:44px;height:14px;transform:translate(-50%) rotate(-3deg);background:#ffffffb3;border:1px solid rgba(0,0,0,.05)}.cs-gallery>div{gap:28px!important;padding:12px 8px}.snap{display:block;background:#fff;padding:8px 8px 26px;box-shadow:0 10px 24px -14px #00000059;border:1px solid #efeff2}.snap:nth-child(1){transform:rotate(-2deg) translateY(6px)}.snap:nth-child(2){transform:rotate(1.5deg) translateY(-8px)}.snap:nth-child(3){transform:rotate(-1deg) translateY(10px)}.snap:nth-child(4){transform:rotate(2.2deg) translateY(-4px)}.snap img{border-radius:2px!important}.col-card{padding:28px 26px 26px}.cs-cols{gap:28px!important}.big-quote{margin:48px auto!important;max-width:860px!important;text-align:center}.big-quote p{font-size:clamp(22px,2.4vw,30px);line-height:1.45;color:var(--ink)}.big-quote p:before{content:"\201c";display:block;font-size:64px;line-height:.6;color:var(--pen);margin-bottom:8px}.big-quote strong{color:var(--pen)}.cs-split.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.cs-split .cs-copy h3{margin-top:0}.learn-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px;margin-top:24px!important}.learn-grid li{display:grid;gap:10px;align-content:start}.learn-grid .num{font-size:18px;color:var(--pen)}.learn-grid .num>span{display:inline-block;padding:0 10px}.learn-grid h3{font-size:19px;color:var(--ink);margin:6px 0 0}.learn-grid p{font-size:15px;color:var(--ink-2);margin:0}.cs-impact strong>span{padding-bottom:6px}@media(max-width:760px){.notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.learn-grid{grid-template-columns:1fr;gap:36px}.cs-split.flip{grid-template-columns:1fr}.cs-split.flip>.cs-copy{order:0}}@media(prefers-reduced-motion:reduce){.note{transition:none}}.cs-split,.cs-split.flip{display:block!important;max-width:1040px}.cs-split>.cs-copy{max-width:680px;margin:0 auto 32px}.cs-split>.cs-copy>*{max-width:none}.cs-split .cs-img{margin:0 auto!important}.cs-split .cs-img img{max-height:620px;width:auto;max-width:100%;margin:0 auto}.cs-pair{display:grid!important;grid-template-columns:1fr!important;gap:72px!important;max-width:900px!important}.learn-grid{grid-template-columns:1fr!important;max-width:680px!important;gap:40px!important}.learn-grid li{grid-template-columns:56px 1fr;column-gap:12px;row-gap:4px}.learn-grid .num{grid-row:span 2}.learn-grid h3{margin:0!important}.cs-back{display:inline-block;margin-top:72px;margin-bottom:40px;font-size:14px;color:var(--ink-3);text-decoration:none}.cs-back:hover{color:var(--pen)}.cs-intro{padding-top:80px!important}.cs-intro .sec-head{margin-bottom:0!important}.cs-intro+.cs-rail+.cs-facts,.cs-facts{margin-top:88px!important}.cs-rail{left:28px!important}.cs-rail .dot{border:0!important;background:none!important;width:18px!important;height:18px!important;transform:none!important}.rail-svg{position:absolute!important;inset:auto!important;left:0;top:0;width:20px!important;z-index:0!important;overflow:visible}.rail-svg .rail-base{--ink-stroke: #c9c9cf}.rail-svg .rail-fill{--ink-stroke: var(--pen)}.rail-svg .rail-dot .ring{--ink-stroke: #b9b9c0}.rail-svg .rail-dot.done .ring,.rail-svg .rail-dot.now .ring{--ink-stroke: var(--pen)}.rail-svg .rail-dot .blob{opacity:0;transition:opacity .2s ease;--ink-fill: var(--pen)}.rail-svg .rail-dot.done .blob{opacity:1}.rail-svg .rail-dot.now .blob{opacity:.35}.cs-rail ol{gap:24px!important}.cs-rail a{gap:14px!important}@media(max-width:1500px){.cs-rail .nm{opacity:0;transform:translate(-4px);transition:opacity .16s ease,transform .16s ease;background:var(--paper);padding:2px 6px}.cs-rail a:hover .nm,.cs-rail a:focus-visible .nm,.cs-rail li.now .nm{opacity:1;transform:none}}@media(max-width:1180px){.cs-rail{display:none!important}}@media(prefers-reduced-motion:reduce){.rail-svg .rail-dot .blob,.cs-rail .nm{transition:none}}html{scroll-padding-top:88px;-webkit-text-size-adjust:100%}.top{background:linear-gradient(to bottom,#fffffff7,#ffffffe6 60%,#fff0)!important;padding-bottom:6px;margin-bottom:-6px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)}@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){.top{background:linear-gradient(to bottom,#ffffffd9,#ffffff9e 60%,#ffffff26)!important;-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}}.ink-svg.off,.ink-svg.off *{animation-play-state:paused!important}#app.enter{animation:page-in .32s cubic-bezier(.2,0,0,1) backwards}@keyframes page-in{0%{opacity:0}to{opacity:1}}.cs-part{scroll-margin-top:96px}img{image-rendering:auto}@media(prefers-reduced-motion:reduce){#app.enter{animation:none}html{scroll-behavior:auto!important}}.cs-impact{gap:48px!important;margin-top:112px!important}.cs-impact strong,.cs-stats strong{display:block;font-weight:400;font-size:clamp(52px,6.2vw,88px);line-height:1;color:var(--pen);-webkit-text-stroke:1.2px currentColor;white-space:nowrap}.cs-impact>div>span,.cs-stats>div>span{display:block;margin-top:16px;font-size:15px;line-height:1.5;color:var(--ink-2)}.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center;margin:40px auto!important;max-width:1040px!important}.cs-stats strong{font-size:clamp(44px,5.2vw,76px)}.cs-stats.n1{grid-template-columns:1fr}.cs-stats.n1 strong{font-size:clamp(44px,6vw,84px)}.cs-copy .scene{font-size:clamp(22px,2.3vw,28px);line-height:1.45;color:var(--ink);margin:8px auto 12px}.cs-copy .scene strong{color:var(--pen);font-weight:400}.cs-beats{list-style:none;padding:0;margin:24px auto!important;max-width:1040px!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px}.cs-beats .k{display:block;font-size:15px;color:var(--pen);margin-bottom:8px}.cs-copy .cs-beats h3{font-size:22px;margin:0 0 8px;color:var(--ink)}.cs-beats p{margin:0;font-size:15px;line-height:1.65}.cs-ba{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin:24px auto!important;max-width:880px!important}.cs-ba .label{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}.cs-ba .after .label{color:var(--ink)}.cs-ba p:last-child{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}.cs-ba .before p:last-child{color:var(--ink-3)}.cs-flow,.cs-part,.cs-copy,.cs-copy>*,.cs-impact>div,.cs-stats>div{min-width:0}.cs-impact strong .bw,.cs-impact strong .bc,.cs-stats strong .bw,.cs-stats strong .bc{display:inline-block;margin:0;padding:0;font-size:inherit;color:inherit;line-height:inherit}@media(max-width:760px){.cs-stats,.cs-ba{grid-template-columns:1fr;gap:36px}.cs-beats{gap:32px}.cs-impact strong{font-size:64px}.cs-stats strong,.cs-stats.n1 strong{font-size:clamp(40px,12vw,56px);white-space:normal}}.cs-cols.n2{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}.cs-stats.n4{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}.cs-stats.n4 strong{font-size:clamp(30px,3.1vw,46px)!important}.cs-proto .pd{max-width:780px;margin-inline:auto}@media(max-width:760px){.cs-cols.n2{grid-template-columns:1fr}.cs-stats.n4{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.cs-stats.n4 strong{font-size:clamp(30px,8.5vw,40px)!important;white-space:nowrap!important}}.cs-flow{gap:0!important;padding-top:136px!important}.cs-part{padding:0 0 104px}.cs-part:last-child{padding-bottom:0}.cs-chapter{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:16px;max-width:680px;width:100%;margin:0 auto 56px;scroll-margin-top:96px}.cs-chapter:not(:first-child){margin-top:56px}.cs-chapter .no{font-size:15px;color:var(--pen)}.cs-chapter .nm{font-size:clamp(34px,3.6vw,44px);line-height:1.1;color:var(--ink)}.cs-chapter hr{grid-column:1 / -1;height:12px;margin:14px 0 0;border:0}.cs-part>.sec-head.left{margin:0 auto 24px!important}.cs-part>.sec-head .label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}.cs-part>.sec-head h2{font-size:clamp(24px,2.4vw,30px)!important;line-height:1.25}.cs-copy{gap:20px!important}.cs-copy>.wide,.cs-copy>.cs-stats,.cs-copy>.cs-beats,.cs-copy>.cs-ba{margin-top:20px!important;margin-bottom:20px!important}.cs-copy>h3{margin-top:28px!important}.cs-copy .pull{border-left:2px solid var(--pen);padding:4px 0 4px 20px!important;font-size:20px!important;line-height:1.5;margin-top:12px!important;margin-bottom:12px!important}.cs-copy>.cs-img.wide,.cs-copy>.cs-img,.cs-copy>.cs-pair,.cs-copy>.cs-gallery{max-width:680px!important}.cs-img img,.cs-pair img{max-height:380px;width:auto!important;max-width:100%;margin:0 auto;object-fit:contain}.cs-gallery>div{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;padding:0!important}.cs-gallery img{aspect-ratio:1 / 1!important}.cs-pair{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important;align-items:start}.cs-pair img{max-height:260px}.cs-steps{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:760px!important}.cs-steps .t{font-size:14px;line-height:1.5;text-align:center;padding:0 8px}.cs-orbit .frame{max-width:560px!important}img[data-zoom]{cursor:zoom-in;transition:opacity .16s ease}img[data-zoom]:hover{opacity:.88}img[data-zoom]:focus-visible{outline:2px solid var(--pen);outline-offset:4px}.cs-split,.cs-split.flip{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;max-width:880px!important}.cs-split.flip>.cs-copy{order:2}.cs-split>.cs-copy{max-width:none!important;margin:0!important}.cs-split .cs-img img{max-height:340px}.cs-glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1040px;margin:96px auto 0}.cs-glance>div{padding:24px 24px 26px}.cs-glance .label,.cs-hmw .label{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--pen)}.cs-glance p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}.cs-copy .cs-hmw{padding:22px 26px 24px;margin-top:8px!important;margin-bottom:8px!important}.cs-hmw p:last-child{margin:0;font-size:20px;line-height:1.45;color:var(--ink)}.cs-beats{gap:32px!important}.cs-copy .cs-beats h3{font-size:19px!important}.cs-stats strong{font-size:clamp(40px,4.4vw,64px)!important}.zoom-box{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:48px 24px;background:#fffffff5;cursor:zoom-out;animation:page-in .18s ease}.zoom-box img{max-width:min(1400px,100%);max-height:none;height:auto;margin:auto 0;flex-shrink:0;border-radius:8px;box-shadow:0 20px 60px -30px #00000059}.zoom-x{position:fixed;top:16px;right:20px;font:inherit;font-size:15px;color:var(--ink-2);background:none;border:0;padding:8px;cursor:pointer}.zoom-x:hover{color:var(--pen)}@media(max-width:760px){.cs-part{padding-bottom:80px}.cs-chapter{margin-bottom:40px}.cs-glance,.cs-split,.cs-split.flip,.cs-pair{grid-template-columns:1fr!important;gap:20px}.cs-glance{margin-top:64px}.cs-split.flip>.cs-copy{order:0}.cs-gallery>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cs-img img,.cs-pair img,.cs-split .cs-img img{max-height:300px}}@media(max-width:760px){.cs-stats.n3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.cs-stats.n3 strong{font-size:clamp(22px,7vw,30px)!important;white-space:nowrap!important;-webkit-text-stroke:.6px currentColor}.cs-stats.n3>div>span{font-size:13px;margin-top:8px}}.cs-copy{gap:28px!important;line-height:1.85!important}.cs-copy>.wide,.cs-copy>.cs-stats,.cs-copy>.cs-beats,.cs-copy>.cs-ba,.cs-copy>.cs-split,.cs-copy>.cs-img{margin-top:32px!important;margin-bottom:32px!important}.cs-copy>h3{margin-top:40px!important}.cs-copy ul[data-d=list]{gap:16px!important}.cs-split>.cs-copy{gap:20px!important}.scene{max-width:none!important;width:100%;margin-top:24px!important;margin-bottom:32px!important;opacity:.85}.scene .frame{height:clamp(90px,14.4vw,210px)!important;overflow:hidden}.scene svg path{stroke-width:1.15!important}.scene svg path.wash{opacity:.5}.cs-part>.sec-head.left{margin-bottom:36px!important}.cs-part{padding-bottom:128px!important}.cs-beats{gap:40px!important}.cs-beats p{line-height:1.75!important}.cs-glance p:last-child{line-height:1.75}.cs-copy .pull{border-left:0!important;position:relative;padding:6px 0 6px 28px!important;margin-top:16px!important;margin-bottom:16px!important;--ink-stroke: var(--pen)}.cs-copy .pull>.vline-svg{inset:0 auto 0 0;width:8px;height:100%;z-index:0}.pub-illo{width:64%!important;margin-bottom:24px!important}@media(max-width:860px){.pub-illo{width:56%!important}}@media(max-width:760px){.cs-copy{gap:24px!important}.cs-part{padding-bottom:96px!important}}@media(prefers-reduced-motion:reduce){.zoom-box{animation:none}img[data-zoom]{transition:none}}.av-sk{margin:0}.av-sk-art{aspect-ratio:4 / 3;border-radius:0;background:radial-gradient(ellipse 62% 58% at 50% 54%,color-mix(in srgb,var(--c) 42%,transparent) 0%,color-mix(in srgb,var(--c) 18%,transparent) 55%,transparent 100%);padding:6%;overflow:hidden}.av-sk-art .illo{padding:0!important;margin:0;width:100%;height:100%;border-radius:0}.av-sk-art .illo .frame{aspect-ratio:auto;width:100%;height:100%}.av-sk figcaption{font-size:13px;color:var(--ink-3);margin-top:8px}.av-cta{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:4px}.av-cta .ink-button{font-size:15px;padding:9px 20px;text-decoration:none}.av-tert{color:var(--ink);text-decoration:none;font-size:15px;padding:9px 4px}.av-tert:hover{color:var(--pen)}.av1{max-width:600px;margin:0 auto;padding-block:120px 240px}.av1-me{margin:0 0 28px;width:112px}.av1-me .frame{aspect-ratio:300 / 330}.av1 h1{font-size:30px;margin:10px 0 22px}.av1>p:not(.label):not(.av-links){font-size:17px;line-height:1.8;color:var(--ink-2);margin:0 0 18px}.av1 .av-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:44px 0 36px}@media(max-width:760px){.av1{padding-block:100px 170px}.av1 .av-strip{gap:10px}}.pv{position:relative;display:inline-block;margin-bottom:28px}.pv .av1-me{margin:0}.pv-note:before{content:"";position:absolute;inset:-34% -40% -20%;background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,var(--c-amber) 45%,transparent),color-mix(in srgb,var(--c-sky) 18%,transparent) 55%,transparent 75%);z-index:-1}.pv-note .av1-me{width:136px}.pv-note path.wash.amber{display:none}.pv .pv-arrow{position:absolute!important;left:100%;top:4px;width:150px;margin-left:4px;padding:0!important;background:none!important}.pv-arrow .frame{display:block;aspect-ratio:180 / 80!important}.pv-arrow text{font-size:17px}.pd-page{padding-block:120px 200px}.fl-head{max-width:1040px;margin:200px auto 0}.fl-head h2{font-size:clamp(24px,2.6vw,30px)!important;margin-top:10px}.fl{position:relative;max-width:1100px;margin:56px auto 0;aspect-ratio:1200 / 1480}.fl-arrows{position:absolute!important;inset:0;padding:0!important;background:none!important;aspect-ratio:auto!important;pointer-events:none}.fl-arrows .frame{width:100%;height:100%}.fl-list{list-style:none;margin:0;padding:0}.fl-step{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r));display:flex;flex-direction:column;gap:12px}.fl-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-3);max-width:46ch}.cs-copy>.cs-proto{width:100%;max-width:1040px!important;margin-inline:auto}.cs-proto .fl{margin-top:24px}.cs-proto .pd{margin-top:8px}.fl-step img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 18px 40px -22px #141a2473;cursor:zoom-in;transition:transform .3s ease}.fl-step img:hover{transform:translateY(-4px)}.fl-lab{margin:0;font-family:var(--font);font-size:18px;color:var(--ink)}.fl-lab span{color:var(--ink-3);font-size:14px;margin-right:10px}@media(max-width:760px){.fl-head{margin-top:140px}.fl{aspect-ratio:auto;margin-top:36px}.fl-arrows{display:none}.fl-step{position:relative;left:auto;top:auto;width:100%;flex-direction:column;margin-bottom:64px}.fl-step:not(:last-child):after{content:"\2193";position:absolute;left:50%;bottom:-52px;font-family:var(--font);font-size:26px;color:var(--ink-3)}}.pd-page h1{font-size:clamp(28px,3.2vw,36px);margin-top:10px}.pd-page .lede{color:var(--ink-2);font-size:16px;margin-top:12px}.pd{margin:48px auto 0;max-width:1040px}.pd-device{position:relative;aspect-ratio:1000 / 700}.pd-frame{position:absolute;inset:0;padding:0!important;background:none!important;margin:0;pointer-events:none}.pd-frame .frame{aspect-ratio:1000 / 700!important}.pd-screen{position:absolute;left:4.8%;top:6.3%;width:90.4%;height:75.1%;border-radius:1%/1.6%;overflow:hidden;background:#131a24}.pd-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}.pd-track::-webkit-scrollbar{display:none}.pd-track:focus-visible{box-shadow:inset 0 0 0 3px var(--pen)}.pd-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;display:grid;place-items:center}.pd-slide img{width:100%;height:100%;object-fit:contain;display:block}.pd--dev .pd-device{aspect-ratio:16 / 9}.pd--dev .pd-screen{inset:0;width:100%;height:100%;background:none;border-radius:0}.pd--dev .pd-slide img{padding:2% 8%;box-sizing:border-box}.pd-empty{width:86%;height:80%;border:2px dashed #3b4656;border-radius:14px 18px 12px 16px;display:grid;place-content:center;text-align:center;gap:6px;color:#9aa6b8;font-size:18px}.pd-empty small{font-size:13px;color:#6d7a8d}.pd-bar{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;max-width:760px;margin:28px auto 0}.pd-arrow.ink-button{font-size:18px;padding:8px 18px}.pd-arrow:disabled{opacity:.35;pointer-events:none}.pd-cap{text-align:center}.pd-num{display:block;font-size:12px;letter-spacing:.08em;color:var(--ink-3)}.pd-cap strong{display:block;font-weight:400;font-size:20px;margin-top:4px}.pd-cap p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.6}.pd-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:22px}.pd-dots button{all:unset;cursor:pointer;font-size:13px;color:var(--ink-3);padding:4px 2px;border-bottom:2px solid transparent}.pd-dots button span{margin-right:6px}.pd-dots button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--c-amber)}.pd-dots button:focus-visible{outline:2px solid var(--pen);outline-offset:3px}@media(max-width:760px){.pd-page{padding-block:100px 160px}.pd-bar{gap:12px}.pd-cap strong{font-size:17px}.pd-cap p{font-size:14px}.pd-dots{display:none}} body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain,.8);mix-blend-mode:multiply;background-size:220px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.1' intercept='.38'/%3E%3CfeFuncG type='linear' slope='1.1' intercept='.38'/%3E%3CfeFuncB type='linear' slope='1.1' intercept='.38'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}@media print{body::after{display:none}} /* hover motion inside the home project cards */ .mo{transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:no-preference){ .mo{transition:transform .5s ease} .mo-svg.is-live .mo-arc{transition:none} .mo-svg.is-rising .mo-bfast,.mo-svg.is-settling .mo-walk{transform:translateY(-4px) scale(1.08)} .case:is(:hover,:focus-visible) .mo-sun{animation:mo-pulse 2.6s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-bell{transform-origin:50% 90%;animation:mo-ding 1.8s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-keys{animation:mo-slide 2.4s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-guest{animation:mo-bob 1.8s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-plant{animation:mo-sway 3s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-sun2{animation:mo-pulse 3s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-haze{animation:mo-drift 4s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-cloud{animation:mo-drift 5s ease-in-out infinite reverse} .case:is(:hover,:focus-visible) .mo-walker{animation:mo-walk 2.6s linear infinite alternate} .case:is(:hover,:focus-visible) .mo-birds{animation:mo-bob 1.1s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-shield{animation:mo-pulse 2s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-dash{animation:mo-march .6s steps(2) infinite} .case:is(:hover,:focus-visible) .mo-inc{animation:mo-inc 2s ease-in infinite} .case:is(:hover,:focus-visible) .mo-pass{animation:mo-pass 2s ease-out infinite} .case:is(:hover,:focus-visible) .mo-blk{transform-origin:50% 100%;animation:mo-blk 2s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-chart{transform-origin:50% 100%;animation:mo-tick 1.6s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-rows{animation:mo-scroll 1.2s steps(3) infinite} .case:is(:hover,:focus-visible) .mo-ioi{animation:mo-blink 1.2s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-flag{transform-origin:100% 100%;animation:mo-wave 1.4s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-head{transform-origin:50% 100%;animation:mo-nod 2.4s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-tablet{animation:mo-tilt 2.4s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-apple{animation:mo-hop 1.2s ease-in-out infinite} .case:is(:hover,:focus-visible) .mo-box{animation:mo-hop 1.2s ease-in-out .3s infinite} .case:is(:hover,:focus-visible) .mo-lamp{animation:mo-glow 2s ease-in-out infinite} } @keyframes mo-march{to{transform:translateX(6px)}} @keyframes mo-inc{0%{transform:translateX(-8px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(14px);opacity:0}} @keyframes mo-pass{0%,30%{transform:translateX(-12px);opacity:0}60%{opacity:1}100%{transform:translateX(0);opacity:1}} @keyframes mo-blk{0%,45%,100%{transform:translate(0,0) rotate(0)}55%{transform:translate(4px,-6px) rotate(10deg)}65%{transform:translate(-2px,0) rotate(-8deg)}75%{transform:translate(1px,-2px) rotate(4deg)}} @keyframes mo-pulse{50%{transform:scale(1.14)}} @keyframes mo-ding{0%,40%,100%{transform:rotate(0)}10%{transform:rotate(-14deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-6deg)}} @keyframes mo-slide{50%{transform:translate(-5px,5px)}} @keyframes mo-bob{50%{transform:translateY(-3px)}} @keyframes mo-sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}} @keyframes mo-drift{50%{transform:translateX(10px)}} @keyframes mo-walk{0%{transform:translate(0,0)}25%{transform:translate(4px,-1.5px)}50%{transform:translate(8px,0)}75%{transform:translate(12px,-1.5px)}100%{transform:translate(16px,0)}} @keyframes mo-tap{50%{transform:translateY(-2px)}} @keyframes mo-blink{50%{opacity:.15}} @keyframes mo-tick{50%{transform:scaleY(1.35)}} @keyframes mo-scroll{to{transform:translateY(-6px)}} @keyframes mo-wave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(5deg)}} @keyframes mo-nod{50%{transform:rotate(-8deg)}} @keyframes mo-tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}} @keyframes mo-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} @keyframes mo-glow{50%{opacity:.35}} /* auto-laid flows set their own canvas height */ .fl{aspect-ratio:var(--fl-ar,1200 / 1480)} @media(max-width:760px){.fl{aspect-ratio:auto}} /* case studies: "All work" sits on top of the side progress rail and shows and hides with it */ .cs-rail .cs-home{position:absolute;left:-6px;bottom:calc(100% + 36px);white-space:nowrap;font-family:var(--font)!important;font-size:14px;background:var(--paper)!important;border-radius:12px} /* case studies: no site header, just a fixed breadcrumb back to the work */ body.is-case .top{display:none!important} .cs-crumb{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));left:24px;z-index:7;display:flex;align-items:center;gap:8px;font-family:var(--font);font-size:15px;line-height:1.4;padding:4px 10px 4px 4px;border-radius:10px;background:color-mix(in srgb,var(--paper) 88%,transparent)} .cs-crumb a{color:var(--ink-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px} .cs-crumb a:hover,.cs-crumb a:focus-visible{color:var(--pen)} .cs-crumb .sep{color:color-mix(in srgb,var(--ink) 25%,transparent)} .cs-crumb .cur{color:var(--ink)} body.is-case .cs{padding-top:96px} @media(max-width:760px){.cs-crumb{left:0;right:0;top:0;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;border-radius:0;background:var(--paper);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}body.is-case .cs{padding-top:72px}} @media print{.cs-crumb{position:static}} /* doodle buddy */ .buddy{position:fixed;right:20px;bottom:18px;z-index:40} .buddy-btn{display:block;position:relative;width:104px;height:104px;padding:0;border:0;background:none;cursor:pointer;transition:transform .55s cubic-bezier(.3,1.35,.5,1)} .buddy{animation:buddy-in .6s cubic-bezier(.2,1.4,.4,1) .5s both} .buddy-btn:focus-visible{outline:2px solid var(--pen);outline-offset:4px;border-radius:50%} .buddy .buddy-art.illo.ink{display:block;position:absolute;inset:0;padding:0!important;background:none!important;border-radius:0;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:50% 70%} .buddy .buddy-art.illo.ink .frame{position:absolute;inset:0;aspect-ratio:auto!important;z-index:auto} .buddy .buddy-art.illo.ink svg.ink-svg{width:100%;height:100%;overflow:visible;--ink-width:1.15} .buddy-art .bx,.buddy-art .bx-eyes{opacity:0} .buddy-art .bx.on,.buddy-art .bx-eyes.on{opacity:1} .buddy-art .bx-eyes.big svg circle.dot{transform-box:fill-box;transform-origin:center;transform:scale(1.35)} .buddy-live{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#e5484d;border:2px solid var(--paper);display:none} .buddy.cam .buddy-live{display:block;animation:buddy-pulse 2s infinite} @keyframes buddy-in{from{transform:translateY(140%) rotate(-12deg)}} @keyframes buddy-pulse{50%{opacity:.35}} .buddy-bubble{position:absolute;right:8px;bottom:116px;width:max-content;max-width:250px;background:var(--paper);border:1.5px solid var(--ink);border-radius:16px 18px 4px 18px;padding:12px 30px 12px 14px;font-family:var(--font);font-size:15px;line-height:1.45;color:var(--ink);box-shadow:4px 4px 0 var(--c-sky); opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity .22s,transform .22s} .buddy-bubble.on{opacity:1;transform:none;pointer-events:auto} .bb-x{position:absolute;top:4px;right:8px;border:0;background:none;font:inherit;font-size:18px;color:var(--ink-3);cursor:pointer} .bb-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center} .buddy-bubble .bb-row{justify-content:flex-start} .bb-btn{font:inherit;font-size:14px;padding:6px 12px;border:1.5px solid var(--pen);border-radius:11px 13px 10px 12px;background:var(--paper);color:var(--pen);cursor:pointer} .bb-btn.solid{background:var(--pen);color:#fff} .bb-note{display:block;margin-top:8px;font-size:12px;color:var(--ink-3)} .buddy-cam{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none} .buddy-modal{position:fixed;inset:0;z-index:60;background:#18181b8c;display:flex;align-items:center;justify-content:center;padding:20px} .bm-sheet{background:var(--paper);border-radius:18px;padding:16px;max-width:min(440px,100%);max-height:100%;overflow:auto} .bm-sheet canvas{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #ececef} @media(max-width:760px){.buddy{right:10px;bottom:10px}.buddy-btn{width:80px;height:80px}.buddy-bubble{bottom:90px}} @media(prefers-reduced-motion:reduce){.buddy-btn,.buddy.cam .buddy-live{animation:none}.buddy-art.illo,.buddy-art .bx-eyes{transition:none}} @media print{.buddy{display:none}} /* 3D turn: the head rotates in perspective, and layers slide by depth (ears back, face front) */ .buddy-head{position:absolute;inset:0;transform-origin:50% 62%;transform-style:preserve-3d; transform:perspective(240px) rotateY(calc(var(--lx,0) * 22deg)) rotateX(calc(var(--ly,0) * -12deg)) rotate(var(--tilt,0deg));transition:transform .25s ease-out} .buddy .buddy-art.illo.ink .frame{transition:transform .25s ease-out} .buddy .d-body{transform:translate(calc(var(--lx,0) * 0.8%),0)} .buddy .d-ears{transform:translate(calc(var(--lx,0) * -2.5%),calc(var(--ly,0) * -1%))} .buddy .d-head{transform:translate(calc(var(--lx,0) * 1%),calc(var(--ly,0) * 0.6%))} .buddy .d-hair{transform:translate(calc(var(--lx,0) * 2.2%),calc(var(--ly,0) * 1.2%))} .buddy .d-face{transform:translate(calc(var(--lx,0) * 5%),calc(var(--ly,0) * 3.5%))} .buddy .d-eyes{transform:translate(calc(var(--lx,0) * 6.5%),calc(var(--ly,0) * 4.5%))} @media(prefers-reduced-motion:reduce){.buddy-head,.buddy .buddy-art.illo.ink .frame{transition:none}} /* peek-a-boo: resting peek, hover rise + nudge, side lean, doze sink */ .buddy.b-peek .buddy-btn{transform:translateX(calc(50% + 20px)) rotate(-16deg);transform-origin:100% 100%} .buddy.b-peek.b-hover .buddy-btn{transform:translateX(calc(20% + 20px)) rotate(-7deg)} .buddy.b-hover .buddy-art{animation:buddy-nudge .7s ease-in-out} .buddy.b-side .buddy-btn{transform:translateX(calc(52% + 20px)) rotate(-16deg);transform-origin:100% 100%} .buddy.b-peek.b-sink .buddy-btn{transform:translateX(calc(62% + 20px)) rotate(-24deg);transition-duration:2.4s} .buddy.b-peek .buddy-bubble{bottom:112px} .buddy.b-peek.b-hover .buddy-bubble{bottom:116px} .buddy.b-side .buddy-bubble{bottom:72px} @keyframes buddy-nudge{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) translateY(-3%)}45%{transform:rotate(7deg)}70%{transform:rotate(-4deg) translateY(-1%)}} .bb-row:empty,.bb-note:empty{display:none} @media(prefers-reduced-motion:reduce){.buddy-btn{transition:none}.buddy.b-hover .buddy-art{animation:none}} /* doodle sits right on the bottom edge */ .buddy{bottom:0!important} @media(max-width:760px){.buddy{bottom:0!important}} /* case-study breadcrumb: a full-width frosted bar like the site header, so text scrolls softly under it */ .cs-crumb{left:0!important;right:0!important;top:0!important;border-radius:0!important;padding:calc(20px + env(safe-area-inset-top,0px)) 24px 30px!important;box-shadow:none!important; background:linear-gradient(to bottom,#fffffff7,#ffffffe6 60%,#fff0)!important; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent)} @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){ .cs-crumb{background:linear-gradient(to bottom,#ffffffd9,#ffffff9e 60%,#ffffff26)!important;-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}} @media(max-width:760px){.cs-crumb{padding:calc(14px + env(safe-area-inset-top,0px)) 16px 24px!important}} /* About page: dancing portrait doodle */ .pv-note .av1-me.dance-me{width:150px;aspect-ratio:300 / 520;position:relative;cursor:pointer;overflow:visible} .dance-me .frame{position:absolute!important;inset:0;aspect-ratio:auto!important;z-index:auto!important} .dance-me .frame svg.ink-svg{width:100%;height:100%;overflow:visible} .dance-me .dm-body,.dance-me .dm-top{position:absolute;inset:0} .dance-me .frame.dm-head{inset:auto;left:22.67%;top:13.54%;width:56%;height:32.31%} .dance-me .dm-body{transform-origin:50.7% 97%} .dance-me .dm-top{transform-origin:50.7% 69.6%} .dance-me .dm-head{transform-origin:50% 95%} .dance-me .dm-arm-l{transform-origin:33.3% 51.5%} .dance-me .dm-arm-r{transform-origin:68% 51.5%} .dance-me .dm-leg-l{transform-origin:41.3% 69.6%} .dance-me .dm-leg-r{transform-origin:60% 69.6%} .dance-me .dm-shadow{transform-origin:50.7% 97%} @media(prefers-reduced-motion:no-preference){ .dance-me{--beat:1.3s} .dance-me.party{--beat:.62s} .dance-me .dm-body{animation:dm-bounce calc(var(--beat) / 2) ease-in-out infinite alternate} .dance-me .dm-shadow{animation:dm-shadow calc(var(--beat) / 2) ease-in-out infinite alternate} .dance-me .dm-top{animation:dm-sway var(--beat) ease-in-out infinite} .dance-me .dm-head{animation:dm-head var(--beat) ease-in-out infinite} .dance-me .dm-arm-l{animation:dm-wave var(--beat) ease-in-out infinite} .dance-me .dm-arm-r{animation:dm-hip var(--beat) ease-in-out infinite} .dance-me .dm-leg-l{animation:dm-kick var(--beat) ease-in-out infinite} .dance-me .dm-leg-r{animation:dm-step var(--beat) ease-in-out infinite} } @keyframes dm-bounce{from{transform:translateY(0)}to{transform:translateY(-3.5%)}} @keyframes dm-shadow{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.8);opacity:.6}} @keyframes dm-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}} @keyframes dm-head{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}} @keyframes dm-wave{0%,100%{transform:rotate(-18deg)}25%{transform:rotate(14deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(22deg)}} @keyframes dm-hip{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}} @keyframes dm-kick{0%,40%,100%{transform:rotate(0)}65%{transform:rotate(38deg)}} @keyframes dm-step{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}} /* the portrait's own shoulders and neck are replaced by the dancing body */ /* dance moves */ .dance-me .dm-p{display:none} .dance-me[data-move=party] .dm-p-party,.dance-me[data-move=groove] .dm-p-groove,.dance-me[data-move=sketch] .dm-p-sketch{display:block} .dance-me .dm-trail path{stroke:var(--pen)!important} @media(prefers-reduced-motion:no-preference){ /* party: both hands up, bigger jumps, confetti popping */ .dance-me[data-move=party]{--beat:1s} .dance-me[data-move=party] .dm-body{animation:dm-jump calc(var(--beat) / 2) cubic-bezier(.3,0,.4,1) infinite alternate} .dance-me[data-move=party] .dm-arm-l{animation:dm-up-l var(--beat) ease-in-out infinite} .dance-me[data-move=party] .dm-arm-r{animation:dm-up-r var(--beat) ease-in-out infinite} .dance-me[data-move=party] .dm-leg-l{animation:dm-step var(--beat) ease-in-out infinite reverse} .dance-me[data-move=party] .dm-confetti{animation:dm-pop var(--beat) ease-out infinite} /* groove: headphones on, head bobbing to the beat, notes floating up */ .dance-me[data-move=groove]{--beat:.9s} .dance-me[data-move=groove] .dm-head{animation:dm-bob calc(var(--beat) / 2) ease-in-out infinite alternate} .dance-me[data-move=groove] .dm-arm-l{animation:dm-snap var(--beat) ease-in-out infinite} .dance-me[data-move=groove] .dm-arm-r{animation:dm-snap var(--beat) ease-in-out infinite reverse} .dance-me[data-move=groove] .dm-leg-l{animation:dm-tap calc(var(--beat) / 2) ease-in-out infinite alternate} .dance-me[data-move=groove] .dm-leg-r{animation:none} .dance-me[data-move=groove] .dm-notes{animation:dm-float 2.4s ease-in-out infinite} /* sketch: pencil up, drawing a pen-blue squiggle in the air, sketchbook in the other hand */ .dance-me[data-move=sketch]{--beat:1.6s} .dance-me[data-move=sketch] .dm-arm-l{animation:dm-draw var(--beat) ease-in-out infinite} .dance-me[data-move=sketch] .dm-arm-r{animation:none;transform:rotate(-8deg)} .dance-me[data-move=sketch] .dm-leg-l{animation:dm-step var(--beat) ease-in-out infinite} .dance-me[data-move=sketch] .dm-trail path{stroke-dasharray:400;animation:dm-ink calc(var(--beat) * 2) linear infinite} } @keyframes dm-jump{from{transform:translateY(0)}to{transform:translateY(-8%)}} @keyframes dm-up-l{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(-8deg)}} @keyframes dm-up-r{0%,100%{transform:rotate(-118deg)}50%{transform:rotate(-98deg)}} @keyframes dm-pop{0%{transform:scale(.8);opacity:.2}25%,75%{opacity:1}100%{transform:scale(1.12) translateY(-3%);opacity:.2}} @keyframes dm-bob{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(3%)}} @keyframes dm-snap{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(10deg)}} @keyframes dm-tap{from{transform:rotate(0)}to{transform:rotate(14deg)}} @keyframes dm-float{0%{transform:translateY(4%);opacity:0}30%,70%{opacity:1}100%{transform:translateY(-6%);opacity:0}} @keyframes dm-draw{0%,100%{transform:rotate(-12deg)}25%{transform:rotate(6deg)}50%{transform:rotate(-4deg)}75%{transform:rotate(12deg)}} @keyframes dm-ink{from{stroke-dashoffset:400}to{stroke-dashoffset:-400}} /* more room between the story and the buttons */ .av-cta{margin-top:44px!important} /* breadcrumb blur only as wide as its text, fading out to the right and below */ .cs-crumb{right:auto!important;width:max-content;max-width:100vw;padding-right:56px!important; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent),linear-gradient(to bottom,#000 calc(100% - 18px),transparent); -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent),linear-gradient(to bottom,#000 calc(100% - 18px),transparent);mask-composite:intersect} /* ===== design audit fixes: one type scale, one grey, one button size ===== */ :root{--ink-3:#71717a} /* titles: 44px desktop, 30px phone */ #app h1{font-size:clamp(30px,3.6vw,44px)!important;line-height:1.25!important} /* section titles and small headings */ #app h2{font-size:clamp(24px,2.3vw,32px)!important} #app h3{font-size:19px!important} /* body copy 16px; card descriptions 15px */ #app .hero .lede,#app .av1>p:not(.label){font-size:16px!important;line-height:1.7!important} #app .case .story{font-size:15px!important} /* small caps labels: one letter spacing */ .label{letter-spacing:.06em!important} /* buttons: one size everywhere (carousel arrows stay compact) */ #app [data-d=button]:not(.pd-arrow),.av-cta .ink-button,.cta .ink-button,.buddy-bubble .bb-btn,.bm-sheet .bb-btn{font-size:16px!important;padding:10px 20px!important;line-height:24px} .buddy-bubble .bb-btn{font-size:14px!important;padding:7px 14px!important;line-height:20px} .bb-btn.ink-button{border:0!important;background:none!important} .bb-btn.ink-button.solid{color:#fff} /* resume: the same highlighter style as the header */ .btn-cv{color:var(--ink)!important;--ink-stroke:var(--ink)} .btn-cv .ink-scribble{stroke:var(--c-amber);stroke-width:2.4} .btn-cv .ink-outline{stroke:var(--ink)} /* stats: same size in every case study; four numbers wrap to two rows */ .cs-stats.n4{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:48px} .cs-stats.n4 strong{font-size:clamp(44px,5.2vw,76px)!important} @media(max-width:760px){.cs-stats.n4{grid-template-columns:1fr!important}.cs-stats.n4 strong{font-size:clamp(40px,12vw,56px)!important}} /* closing calls to action */ .home-end{text-align:center} .home-end .cta{align-items:center} .cs-cta{max-width:680px;margin:140px auto 0;text-align:center} .cs-cta p{font-size:19px;color:var(--ink);margin:0 0 20px} .cs-cta .cta{align-items:center} .cs-cta + .cs-next{margin-top:120px!important} @media(max-width:760px){.cs-cta{margin-top:96px}.cs-cta + .cs-next{margin-top:88px!important}} /* doodle speech bubble: hand-drawn card instead of a CSS box */ .buddy-bubble{border:0!important;box-shadow:none!important;border-radius:0!important;background:var(--paper)!important;padding:14px 32px 14px 16px!important;--ink-stroke:var(--ink)} .buddy-bubble.ink-card{padding:14px 32px 14px 16px!important} .buddy-bubble > svg.ink-svg{z-index:0} .buddy-bubble > :not(svg){position:relative;z-index:1} .bb-tail{position:absolute;right:26px;bottom:-19px;width:24px;height:20px;overflow:visible;z-index:2;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round} .bb-tail .bb-tail-fill{fill:var(--paper);stroke:none} /* research paper sketches: the same pen-blue line as the principle sketches */ .pub-illo.illo.ink svg.ink-svg{--ink-stroke:var(--pen)} .pub-illo.illo.ink .tone-grey{--ink-stroke:#8a8a93} .pub-illo.illo.ink circle.dot{fill:var(--pen)} .buddy-bubble > .bb-x{position:absolute!important;top:6px;right:10px} .buddy-bubble{--ink-width:1.3} .bb-tail{stroke-width:1.3} /* research papers centred like the principle sketches above */ .pubs-row a{justify-items:center;text-align:center} .pubs-row .pub-illo{margin-left:auto!important;margin-right:auto!important} /* research papers: the same "View project" style link with a pen underline */ .pubs-row .view-cue{display:inline-block;margin-top:12px!important;font-size:14px;color:var(--pen)} .pubs-row .view-cue>span{padding-bottom:2px} .pubs-row>li{display:flex} .pubs-row a{display:flex!important;flex-direction:column;align-items:center;gap:8px;width:100%} .pubs-row .view-cue{margin-top:auto!important;padding-top:12px} /* more room between the About story and its buttons */ .av-cta{margin-top:44px!important} /* souvenir modal: a hand-drawn card like the rest of the site */ .buddy-modal{background:#18181b66;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .bm-sheet{position:relative;border-radius:0!important;background:var(--paper)!important;padding:20px!important;width:min(480px,100%);--ink-stroke:var(--ink);--ink-width:1.3} .bm-sheet > :not(svg){position:relative;z-index:1} .bm-sheet canvas{border:0!important;border-radius:0!important;width:100%;height:auto} .bm-sheet .bb-row{justify-content:center;margin-top:16px} .bm-pitch{margin:18px 4px 0;font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink-2);text-align:center} .bm-pitch b{font-weight:400;color:var(--ink)} .bm-minor{display:flex;justify-content:center;gap:22px;margin-top:14px} .bm-minor button{border:0;background:none;padding:2px 0;font-family:var(--font);font-size:14px;color:var(--pen);cursor:pointer} /* souvenir actions: one solid pen-blue button + one underlined link, like the rest of the site */ .bm-sheet .bb-btn,.buddy-bubble .bb-btn{--ink-stroke:var(--pen)!important;color:var(--pen)} .bm-sheet .bb-btn.solid,.buddy-bubble .bb-btn.solid{color:#fff!important} .bm-actions{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:16px;flex-wrap:wrap} .bm-link{border:0;background:none;padding:2px 0;font-family:var(--font);font-size:15px;color:var(--pen);cursor:pointer;--ink-stroke:var(--pen)} .bm-link.small{font-size:14px} .bm-top{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin:-4px -2px 4px} .bm-x{border:0;background:none;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 4px} .bm-x:hover{color:var(--ink)} .bm-minor{display:none} /* resume: a pen-blue outline button everywhere (header, About, home and case-study CTAs) */ .nav a.nav-cv{color:var(--pen)!important;--ink-stroke:var(--pen)!important} .nav-cv .ink-outline{stroke:var(--pen)!important} .nav-cv .ink-scribble{display:none} .btn-cv{color:var(--pen)!important;--ink-stroke:var(--pen)!important} .btn-cv .ink-outline{stroke:var(--pen)!important} .btn-cv .ink-scribble{display:none} /* doodle motion, following Apple's motion guidance: springs instead of fixed curves, transform-only, interruptible, quick to respond and gentle to settle; everything turns off with Reduce Motion */ :root{--spring-smooth:linear(0.0, 0.0268, 0.091, 0.1748, 0.2662, 0.3577, 0.4448, 0.5249, 0.5969, 0.6603, 0.7154, 0.7628, 0.8032, 0.8374, 0.8661, 0.89, 0.91, 0.9265, 0.9401, 0.9513, 0.9605, 0.968, 0.9741, 0.9791, 0.9831, 0.9864, 0.9891, 0.9912, 0.9929, 0.9943, 0.9955, 0.9964, 0.9971, 0.9977, 0.9981, 0.9985, 0.9988, 0.9991, 0.9992, 0.9994, 1);--spring-snappy:linear(0.0, 0.0491, 0.1614, 0.2988, 0.4379, 0.5654, 0.6751, 0.7652, 0.8362, 0.8903, 0.9302, 0.9586, 0.9781, 0.9909, 0.9988, 1.0033, 1.0055, 1.0063, 1.0061, 1.0055, 1.0046, 1.0038, 1.0029, 1.0022, 1.0016, 1.0011, 1.0008, 1.0005, 1.0003, 1.0002, 1.0001, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1);--spring-bouncy:linear(0.0, 0.0507, 0.1709, 0.3227, 0.4798, 0.6254, 0.7503, 0.8507, 0.9265, 0.9802, 1.0151, 1.0352, 1.0443, 1.0458, 1.0424, 1.0363, 1.0292, 1.022, 1.0156, 1.0101, 1.0058, 1.0026, 1.0004, 0.999, 0.9982, 0.9979, 0.9979, 0.9981, 0.9984, 0.9987, 0.9991, 0.9994, 0.9996, 0.9998, 0.9999, 1.0, 1.0001, 1.0001, 1.0001, 1.0001, 1)} .buddy{animation:buddy-arrive .9s var(--spring-snappy) .5s both} @keyframes buddy-arrive{from{transform:translateY(120%)}} .buddy-btn{transition:transform .88s var(--spring-snappy)!important;will-change:transform} .buddy.b-peek.b-sink .buddy-btn{transition:transform 1.6s var(--spring-smooth)!important} /* the head is driven by a JS spring every frame, so no CSS transition fights it */ .buddy-head,.buddy .buddy-art.illo.ink .frame{transition:none!important;will-change:transform} .buddy .buddy-art.illo.ink{transition:transform .8s var(--spring-bouncy)!important} /* expressions cross-fade instead of popping */ .buddy-art .bx,.buddy-art .bx-eyes{transition:opacity .14s ease-out!important} /* hover: a soft spring lean replaces the wobble keyframes */ .buddy.b-hover .buddy-art{animation:none!important;transform:rotate(-5deg) translateY(-2%)} .buddy-bubble{transition:opacity .2s ease-out,transform .5s var(--spring-snappy)!important} @media(prefers-reduced-motion:reduce){.buddy{animation:none}.buddy-btn,.buddy .buddy-art.illo.ink,.buddy-bubble{transition:opacity .2s ease!important}.buddy.b-hover .buddy-art{transform:none}} /* resume: the scribble style, in pen blue */ .btn-cv .ink-scribble,.nav-cv .ink-scribble{display:block!important;stroke:var(--pen)!important;stroke-width:1.6!important;opacity:.32} .btn-cv .ink-scribble,.nav-cv .ink-scribble{stroke-width:1.2!important;opacity:.17!important} .btn-cv,.nav a.nav-cv{font-weight:400;text-shadow:0 0 3px var(--paper),0 0 6px var(--paper)} /* hero: 42px, drawn bolder with a heavier pen stroke */ #app .hero h1{font-size:clamp(30px,3.5vw,42px)!important;-webkit-text-stroke:.9px currentColor} @media(max-width:760px){#app .hero h1{-webkit-text-stroke:.7px currentColor}} /* header shrink keeps its footprint: margin grows as padding shrinks, same timing */ .top{transition:transform .36s cubic-bezier(.2,0,0,1),background-color .2s ease,margin-bottom .28s cubic-bezier(.2,0,0,1)} @media(prefers-reduced-motion:reduce){.top{transition:none}} /* review fixes: pronunciation note */ #app .hero .say{font-family:"Ink Pen",var(--font-hand,inherit);color:var(--pen);font-size:16px;letter-spacing:.02em;margin:0 0 10px;transform:rotate(-2deg)} /* souvenir: paper stays inside the hand-drawn border, and the card always fits the screen */ .bm-sheet{background:transparent!important;overflow:visible!important;max-height:none!important} .bm-sheet::before{content:"";position:absolute;inset:5px;background:var(--paper);border-radius:6px;z-index:0} .bm-sheet > svg{z-index:2;pointer-events:none} .bm-sheet canvas{width:auto!important;max-width:100%;height:auto!important;max-height:calc(100dvh - 250px);margin:0 auto} /* doodle bubble: paper stays inside the hand-drawn border */ .buddy-bubble{background:transparent!important} .buddy-bubble::before{content:"";position:absolute;inset:4px;background:var(--paper);border-radius:6px;z-index:-1} .buddy-bubble::after{content:"";position:absolute;right:26px;bottom:0;width:24px;height:6px;background:var(--paper);z-index:-1} /* work-in-progress badge (ink badge, pen blue) on the glucose card and case study */ .case-badge{margin:0 0 10px;line-height:1} .wip-badge.ink-badge{font-size:13px!important;line-height:1.5;padding:3px 11px;letter-spacing:.02em;color:var(--pen);--ink-stroke:var(--pen);--ink-width:1.2} .case .story{position:relative} .case .story .wip-badge.ink-badge{position:absolute;left:0;bottom:calc(100% + 10px);font-size:13px!important;line-height:20px;padding:2px 10px} /* amber ink with a soft amber wash, kept inside the drawn border */ .wip-badge.ink-badge{color:#a8670a;--ink-stroke:#a8670a;isolation:isolate} .wip-badge.ink-badge svg path{stroke:#a8670a} .wip-badge.ink-badge::before{content:"";position:absolute;inset:2px;border-radius:3px;background:rgba(244,191,94,.32);z-index:-1} .cs-intro .case-badge{margin-bottom:4px} /* hero margin notes: pen-blue annotations with hand-drawn arrows; the hero keeps its size and spacing */ .hero-head{position:relative;display:inline-block;max-width:100%} .hero-note{position:absolute;margin:0!important;width:168px;text-wrap:balance;font-family:"Ink Pen",var(--font-hand,inherit);font-size:16px!important;line-height:1.35!important;color:var(--pen)!important;text-align:left;letter-spacing:.01em} .hn-left{right:calc(100% + 64px);top:30%;transform:rotate(-3deg)} .hn-right{left:calc(100% + 64px);top:64%;transform:rotate(2deg)} .ink-arrow.hero-arrow{pointer-events:none;--ink-stroke:var(--pen);color:var(--pen)} .ink-arrow.hero-arrow path{stroke:var(--pen)} @media(max-width:1100px){ .hero-note{position:static;width:auto;transform:none;text-align:center;font-size:15px!important} .hero-note.hn-left{margin-top:14px!important} .hero-note+.hero-note{margin-top:2px!important} .hero-head{display:block} .ink-arrow.hero-arrow{display:none} }