@font-face{font-family:Archivo;src:url('assets/fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Public Sans;src:url('assets/fonts/public-sans-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Spline;src:url('assets/fonts/spline-sans-mono-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url('assets/fonts/fraunces-var.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{--paper:#f8f7f4;--ink:#252622;--muted:#65665e;--violet:#7954c5;--violet-soft:#e8dff5;--line:#deded7;--sans:'Public Sans',sans-serif;--display:'Archivo',sans-serif;--mono:'Spline',monospace;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:35px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--violet);outline-offset:5px;border-radius:3px}
::selection{background:#dcd2f0;color:#252622}
.wrap{max-width:1320px;margin:0 auto;width:calc(100% - 112px)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.01em}
.skip-link{position:absolute;left:24px;top:-80px;background:var(--ink);color:white;padding:15px;z-index:5}
.skip-link:focus{top:10px}

.status-dot{display:inline-block;width:7px;height:7px;flex:0 0 7px;background:var(--violet);border-radius:50%}

.site-header{height:96px;display:flex;align-items:center}
.wordmark{font-family:var(--display);font-size:26px;font-weight:650;letter-spacing:-1px;white-space:nowrap}

.hero{margin-top:6px;padding:clamp(28px,4.4vw,60px);background:#eeece6;border-radius:14px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:stretch}
h1{font-family:var(--display);font-size:clamp(44px,6.2vw,92px);font-weight:580;letter-spacing:-.06em;line-height:.98;margin:0}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding-top:.55em;max-width:520px}
.hero-text{display:flex;flex-direction:column;gap:14px}
.hero-text p{font-size:15px;line-height:1.85;color:#65675f;margin:0}
.hero-text p:first-child{font-size:17px;line-height:1.7;color:#383c32}
.hero-links{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:600;line-height:1;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:#000}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}

/* the one self-starting moment: the hero settles in */
.hero>*{animation:rise .7s var(--ease) both}
.hero>:nth-child(2){animation-delay:.06s}
.hero>:nth-child(3){animation-delay:.14s}
.hero>:nth-child(4){animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.work{padding-top:64px;padding-bottom:24px}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.section-heading h2{font-family:var(--display);font-size:28px;font-weight:550;letter-spacing:-1px;margin:0}
.project{display:grid;grid-template-columns:44% 56%;min-height:540px;border-radius:14px;overflow:hidden;margin-bottom:27px}
.project-copy{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.project-ayy .project-copy{background:#e9efdd}
.project-tasktrail .project-copy{background:#f3ebd2}
.project-tietoni .project-copy{background:#faf6ee}
.project-tietoni{box-shadow:inset 0 0 0 1.5px #17150f}
.project-logo{display:flex;align-items:center;margin-bottom:22px}
.ayy-wordmark{display:block;height:40px;width:100px;overflow:visible}
.tt-logo{font-size:26px;line-height:1;white-space:nowrap;color:#173227}
.tt-word{position:relative;display:inline-block;font-family:Fraunces,Georgia,serif;font-size:1.1em;font-weight:640;font-variation-settings:"SOFT" 30,"WONK" 1;letter-spacing:-.035em}
.tt-dot{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:#a93629;vertical-align:.56em;margin-left:-.28em;margin-right:.04em}
.tt-trail{position:absolute;left:.04em;bottom:-.42em;width:calc(100% - .08em);height:.36em;overflow:visible}
.tt-trail path{fill:none;stroke:currentColor;stroke-opacity:.44;stroke-width:.085em;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:.048 .036}
.tn-logo{gap:10px;color:#17150f}
.tn-mark{display:block;width:38px;height:38px;flex:0 0 auto;overflow:visible}
.tn-word{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 24;font-size:29px;font-weight:600;letter-spacing:-.03em;line-height:1}
.project h3{font-family:var(--display);font-size:37px;font-weight:530;line-height:1.1;letter-spacing:-1.6px;margin:0 0 20px}
.project-copy p{font-size:13px;line-height:1.85;color:#65675f;max-width:337px;margin:0}
.project-link{display:inline-flex;align-items:center;margin-top:28px;padding:11px 18px;border-radius:999px;color:#fff;font-weight:600;font-size:12px;transition:transform .2s var(--ease),filter .2s}
.project-link:hover{transform:translateY(-1px);filter:brightness(1.08)}
.project-link:active{transform:none}
.project-ayy .project-link{background:#244cff}
.project-tasktrail .project-link{background:#244638;color:#fffaf0}
.project-tietoni .project-link{background:#17150f;color:#faf6ee}
.project-scene{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;min-width:0}
.scene-caption{position:absolute;bottom:17px;left:0;right:0;text-align:center;letter-spacing:.03em;color:#58625f}

/* ayy */
.ayy-scene{background:#dfe6ff;min-height:540px}
.scene-grid{position:absolute;inset:0;background-image:linear-gradient(#244cff12 1px,transparent 1px),linear-gradient(90deg,#244cff12 1px,transparent 1px);background-size:44px 44px}
.scene-orbit{position:absolute;width:470px;height:470px;border:1px solid #244cff30;border-radius:50%;transform:rotate(-30deg) scaleY(.58)}
.orbit-two{transform:rotate(50deg) scaleY(.62)}
.phone{position:relative;width:230px;height:450px;background:#f9faf8;border:6px solid #17201e;border-radius:36px;box-shadow:2px 2px 0 1px #8490aa,15px 30px 50px #3e49723b;transform:rotate(-7deg) translate(15px,0px);transition:transform .6s var(--ease)}
.project-ayy:hover .phone{transform:rotate(-3deg) translate(15px,-4px)}
.phone-top{height:41px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:10px;font-weight:700}
.phone-island{width:64px;height:18px;background:#17201e;border-radius:12px;position:absolute;top:9px;left:78px}
.battery{width:20px;height:10px;border:1.5px solid #17201e;border-radius:3px;position:relative;opacity:.8}
.battery::before{content:"";position:absolute;inset:1.5px;right:4px;background:#17201e;border-radius:1px}
.battery::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:4px;background:#17201e;border-radius:0 1px 1px 0}
.phone-body{padding:0 12px}
.phone-brand{margin:10px 0 12px}
.phone-brand .ayy-wordmark{height:24px;width:60px}
.phone-heading{font-size:18px;font-weight:650;letter-spacing:-.6px;display:flex;align-items:center;justify-content:space-between}
.phone-heading>span{font-size:9px;letter-spacing:0;color:#737988;font-weight:400}
.phone-tabs{display:flex;gap:14px;font-size:9px;color:#898b9a;margin:12px 0 9px;border-bottom:1px solid #e4e4eb;padding-bottom:9px}
.phone-tabs .selected{color:#244cff;font-weight:700}
.inbox-card{padding:10px 10px;background:white;border:1px solid #dde2dc;border-radius:11px;margin-bottom:9px}
.inbox-meta{display:flex;align-items:center;gap:6px;font-size:9px;margin-bottom:9px}
.inbox-meta>span:last-child{margin-left:auto;color:#a4a5b0;font-size:8px}
.agent-icon{width:21px;height:21px;display:grid;place-items:center;background:#edeaf8;color:#72619e;border-radius:7px;font-size:13px}
.green-icon{background:#e5eee9;color:#617c6a}
.inbox-card>strong{font-size:11px;display:block;font-weight:650}
.inbox-card>p{font-size:9px;line-height:1.6;color:#7a7e8d;margin:5px 0 8px}
.mini-pill{font-size:8px;padding:3px 6px;border-radius:3px;background:#f1f1f7;color:#6c7292}
.phone-actions{display:flex;gap:6px}
.phone-actions button{border:0;border-radius:6px;padding:7px 9px;font-size:9px;font-weight:600;cursor:pointer;transition:transform .15s var(--ease),background .2s}
.phone-actions button:active{transform:scale(.97)}
.phone-actions .approve{color:white;background:#244cff;flex:1;display:flex;justify-content:space-between}
.phone-actions .approve::after{content:"↗"}
.phone-actions .approve:hover{background:#1d3fd6}
.phone-actions .decline{background:white;border:1px solid #e6e7ed;color:#7c7f8d}
.phone-actions .decline:hover{background:#f6f6f9}
.phone-decided{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;font-weight:600;color:#244cff;padding:7px 9px;background:#e9efdd;border-radius:6px;animation:rise .35s var(--ease) both}
.phone-decided.no{color:#7c7f8d;background:#f3f3f6}
.phone-decided button{border:0;background:none;padding:0;font-size:8px;font-weight:500;color:#8a8da0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.phone-bottom{display:flex;align-items:center;gap:5px;font-size:15px;color:#244cff;padding:6px 5px}
.phone-bottom>span:first-child{font-size:8px}
.phone-bottom>span:nth-child(2){margin-left:auto;margin-right:36px;color:#a1a5b2}
.phone-bottom>span:last-child{color:#a1a5b2}
.home-indicator{position:absolute;bottom:7px;width:75px;height:4px;left:71px;border-radius:5px;background:#17201e}
.floating-note{position:absolute;background:#fffefb;left:25px;top:95px;display:flex;align-items:center;gap:10px;border-radius:11px;padding:14px 17px;box-shadow:0 10px 25px #4159841c;transform:rotate(4deg)}
.note-icon{width:29px;height:29px;border-radius:9px;background:#dcff70;display:grid;place-items:center;color:#17201e;font-size:19px}
.floating-note b{font-size:10px;display:block;margin-bottom:5px}
.floating-note div>span{display:block;font-size:9px;color:#7e8188}

/* tasktrail */
.trail-scene{background:#e6d9b6;padding:44px 0 45px 38px}
.trail-window{width:490px;flex-shrink:0;align-self:center;border-radius:8px;border:1px solid #d4c8aa;background:#fffaf0;box-shadow:0 18px 40px #3a2e1a1f;transform:rotate(3deg) translateX(15px);transition:transform .6s var(--ease)}
.project-tasktrail:hover .trail-window{transform:rotate(1deg) translateX(8px)}
.window-bar{height:34px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee2c4;font-family:var(--mono);font-size:9px;color:#5f6a61}
.window-dots{display:flex;gap:4px}
.window-dots i{height:5px;width:5px;background:#d4c8aa;border-radius:50%}
.trail-body{padding:25px 27px 19px}
.trail-top{display:flex;justify-content:space-between;align-items:center;color:#5f6a61}
.trail-top .mono{font-size:9px}
.sample-tag{border:1px solid #d4c8aa;padding:4px 6px;border-radius:3px}
.trail-body h4{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 30,"WONK" 1;font-size:23px;font-weight:600;letter-spacing:-.02em;color:#173227;margin:12px 0 20px}
.trail-tabs{display:flex;gap:22px;font-size:10px;border-bottom:1px solid #eee2c4;padding-bottom:11px;color:#5f6a61}
.trail-tabs b{color:#173227;font-weight:600}
.trail-tabs b span{background:#f3ebd2;border-radius:3px;font-size:8px;padding:2px 5px;margin-left:5px}
.timeline{margin:22px 0 7px 5px;border-left:1px solid #d4c8aa}
.timeline-item{position:relative;padding:0 0 21px 20px}
.timeline-item:last-child{padding-bottom:4px}
.timeline-dot{position:absolute;left:-4px;top:2px;width:7px;height:7px;background:#626b63;border-radius:50%;box-shadow:0 0 0 4px #fffaf0}
.amber-dot{background:#b47d1d}
.green-dot{background:#3f674a;color:#fff;font-size:5px;display:grid;place-items:center}
.timeline-meta{display:flex;gap:11px;font-size:8px;color:#5f6a61;margin-bottom:7px}
.timeline-meta b{font-weight:400}
.timeline-meta span{color:#a93629}
.timeline-item strong{font-size:11px;font-weight:600;color:#173227}
.timeline-item p{font-size:9px;color:#4d5b50;margin:5px 0 0;line-height:1.5}
.trail-summary{display:flex;gap:8px;padding:12px 0 0;border-top:1px solid #eee2c4;font-size:9px;color:#4d5b50;margin-top:14px}
.trail-summary>span{font-size:14px;line-height:10px}
.trail-scene .scene-caption{color:#4d5b50}
/* the trail writes itself the first time it scrolls into view */
.trail-scene.armed .timeline-item,.trail-scene.armed .trail-summary{opacity:0}
.trail-scene.seen .timeline-item,.trail-scene.seen .trail-summary{animation:rise .55s var(--ease) both}
.trail-scene.seen .timeline-item:nth-child(2){animation-delay:.3s}
.trail-scene.seen .timeline-item:nth-child(3){animation-delay:.6s}
.trail-scene.seen .trail-summary{animation-delay:1s}

/* tietoni */
.tietoni-scene{background:#fff0c0;flex-direction:column;min-height:540px;padding-top:22px}
.context-heading{position:absolute;top:36px;color:#5f5a4e}
.context-stack{position:absolute;width:360px;height:302px;top:115px;background:#faf6ee;border:1.5px solid #17150f;border-radius:8px;transform:rotate(-10deg);transition:transform .6s var(--ease)}
.stack-mid{background:#ffc838;transform:rotate(5deg)}
.project-tietoni:hover .stack-back{transform:rotate(-13deg) translateX(-6px)}
.project-tietoni:hover .stack-mid{transform:rotate(7deg) translateX(6px)}
.context-file{width:360px;background:#fff;border:1.5px solid #17150f;border-radius:7px;box-shadow:0 15px 35px #17150f14;position:relative;transform:rotate(-3deg);transition:transform .6s var(--ease)}
.project-tietoni:hover .context-file{transform:rotate(0)}
.file-path{display:flex;gap:12px;align-items:center;font-size:9px;color:#5f5a4e;border-bottom:1px solid #e7dfcf;padding:15px 19px}
.file-path>span:first-child{font-size:15px;color:#17150f}
.file-path>span:last-child{margin-left:auto;font-weight:700}
.file-content{padding:23px 23px 14px}
.file-label{font-size:9px;color:#8a6100}
.file-content h4{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 60,"WONK" 1;font-size:27px;font-weight:600;letter-spacing:-.02em;color:#17150f;margin:10px 0 20px}
.context-row{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.context-row>span:first-child{font-size:9px;color:#8a6100;width:10px}
.context-row b{font-size:11px;font-weight:600;color:#17150f}
.context-row p{font-size:9px;color:#5f5a4e;margin:4px 0 0}
.file-check{margin-left:auto;color:#177a55;font-size:10px}
.file-footer{display:flex;align-items:center;gap:6px;font-size:8px;color:#5f5a4e;border-top:1px solid #e7dfcf;padding-top:12px}
.file-footer .status-dot{background:#ffc838;width:4px;height:4px;flex-basis:4px}
.file-footer>span:last-child{margin-left:auto;font-size:12px}
.context-connector{height:35px;border-left:1.5px dashed #17150f}
.context-destination{background:#fff;border:1.5px solid #17150f;padding:12px 17px;border-radius:6px;color:#17150f;font-size:10px;display:flex;gap:13px;align-items:center}
.context-destination>span:first-child{font-size:17px;line-height:1}

footer{padding:24px 0 40px}
.copyright{color:#a0a092}

@media(min-width:1500px){.wrap{max-width:1280px}
h1{font-size:100px}
.project{min-height:570px}
.ayy-scene{min-height:570px}
}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}
.project{grid-template-columns:45% 55%}
.project-copy{padding:32px 26px}
.project h3{font-size:31px}
.project-copy p{font-size:12px}
.project-scene{min-height:510px}
.trail-window{width:430px}
.trail-body{padding:25px 23px}
.context-file,.context-stack{width:310px}
.floating-note{left:12px;top:78px;padding:12px}
.floating-note b{font-size:9px}
.floating-note div>span{font-size:8px}
}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}
.site-header{height:80px}
.wordmark{font-size:21px}
.hero{margin-top:0;padding:38px 0 0;background:none;border-radius:0}
.hero-grid{grid-template-columns:1fr;gap:24px}
h1{font-size:clamp(34px,9.2vw,44px);line-height:1.06;letter-spacing:-.055em}
h1 br:nth-of-type(1),h1 br:nth-of-type(3){display:none}
.hero-copy{padding-top:0;gap:22px}
.hero-text{gap:12px}
.hero-text p{font-size:13px}
.hero-text p:first-child{font-size:15px}
.arrow-circle{height:30px;width:30px;font-size:16px}
.mono{font-size:10px}
.work{padding-top:40px}
.section-heading{margin-bottom:20px}
.section-heading h2{font-size:25px}
.project{grid-template-columns:1fr;min-height:0;margin-bottom:23px}
.project-copy{padding:28px 24px 30px}
.project-logo{margin-bottom:16px}
.project h3{font-size:35px;letter-spacing:-1.4px;margin-bottom:16px}
.project-copy p{max-width:450px;font-size:12px}
.project-link{margin-top:22px}
.project-scene{min-height:460px}
.ayy-scene{min-height:480px}
.phone{transform:rotate(-7deg) translate(13px,-5px) scale(.87)}
.project-ayy:hover .phone{transform:rotate(-3deg) translate(13px,-9px) scale(.87)}
.floating-note{top:65px;left:18px}
.trail-scene{padding-left:20px;min-height:445px}
.trail-window{width:410px;transform:rotate(3deg) translateX(17px)}
.context-file,.context-stack{width:310px}
.context-stack{top:85px;height:310px}
.tietoni-scene{padding-top:28px;min-height:485px}
.context-heading{top:29px}
.context-destination{padding:12px 14px;font-size:9px}
footer{padding-bottom:28px}
}
@media(max-width:365px){h1{font-size:38px;line-height:1.02}
h1 br:nth-of-type(1),h1 br:nth-of-type(3){display:inline}
.project-copy{padding:24px 20px 26px}
.project h3{font-size:32px}
.context-file,.context-stack{width:272px}
.file-content{padding:20px 18px 14px}
.file-path{gap:8px}
.floating-note{left:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.hero>*,.trail-scene.armed .timeline-item,.trail-scene.armed .trail-summary{opacity:1;transform:none}
}
@media(max-width:760px){.trail-window{width:355px}
.trail-body{padding:25px 18px}
.trail-scene{padding-left:14px}
.trail-body h4{font-size:21px}
}
@media(max-width:420px){.trail-scene{padding-left:12px}
.trail-window{width:322px;transform:rotate(2deg) translateX(4px)}
.project-tasktrail:hover .trail-window{transform:rotate(1deg) translateX(2px)}
}