/* Ink, ivory and warm silver. Native-scroll art direction. */
.story .story-pin{overflow:clip}.film-stage{overflow:clip;overflow-clip-margin:28px}
.film-world .pencil{animation:pencil-enter 1.8s cubic-bezier(.16,1,.3,1) backwards}.film-world .sheet-back{animation:paper-enter 1.6s .1s cubic-bezier(.16,1,.3,1) backwards}.film-world .artifact{animation:paper-enter 1.4s cubic-bezier(.16,1,.3,1) backwards}
@keyframes pencil-enter{from{translate:90px -120px;opacity:0}to{translate:0 0;opacity:1}}@keyframes paper-enter{from{translate:0 65px;opacity:0}to{translate:0 0;opacity:1}}
:root{--paper:#f4f2ed;--ink:#1c1c1c;--muted:#6d6b66;--line:#d8d5cf;--green:#242424;--lime:#e7e3da}
body{background:var(--paper);color:var(--ink)}.header{background:#f4f2edf2;border-color:#d8d5cf}.header nav a:hover{color:#83735c}.button{border-color:#242424;background:#242424;color:#faf8f2;border-radius:0}.button:hover{background:#45413b}.light{background:#ece8df;border-color:#ece8df;color:#1b1b1b}.light:hover{background:#fff}.dot{background:#817b70;box-shadow:0 0 0 4px #817b7018}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#8b7960}
.story{height:760svh;background:#f4f2ed;color:#1b1b1b}.story-pin{height:calc(100svh - 94px);min-height:0;position:sticky;top:94px;padding:24px 5vw 0;overflow:hidden;background:radial-gradient(ellipse at 78% 50%,#e5e0d5aa,transparent 58%),#f4f2ed}.story-pin:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.16' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.story-head{position:relative;display:flex;align-items:center;justify-content:space-between;color:#77736b}.story-head .eyebrow{font-size:9px;letter-spacing:.16em}.story-head a{font-size:11px;border-bottom:1px solid #a7a199;padding-bottom:5px}.story-layout{display:grid;grid-template-columns:.85fr 1.3fr;align-items:center;gap:1vw;height:calc(100% - 112px)}.story-copy{position:relative;z-index:4;animation:copy-in 1.2s cubic-bezier(.2,.8,.2,1) both}.chapter-top{display:flex;align-items:center;gap:20px;font-size:9px;letter-spacing:.16em}.chapter-number{color:#777168;font-size:10px}.chapter-name{text-transform:uppercase;color:#7c766d}.story-copy h1{font-size:clamp(44px,5.2vw,85px);letter-spacing:-.065em;line-height:1.02;margin:25px 0;min-height:3.06em;font-weight:500}.story-copy h1 em{color:#7e7569;font-family:var(--serif);font-weight:400}.story-copy p{max-width:355px;font-size:13px;line-height:1.8;min-height:72px;color:#6d6860}.story-copy>.button{margin-top:27px;font-size:12px;padding:13px 18px;gap:25px}.chapter-tag{font-size:8px!important;letter-spacing:.12em;margin-top:25px!important;color:#8b8277}
.film-stage{position:relative;min-width:0;height:min(67svh,650px);perspective:1600px}.film-world{width:760px;height:580px;position:absolute;top:50%;left:50%;transform-origin:center;isolation:isolate;animation:stage-in 1.5s cubic-bezier(.18,.8,.2,1) both}.orbital{position:absolute;border:1px solid #94887728;border-radius:50%;pointer-events:none;z-index:-2}.orbital-one{width:550px;height:550px;left:110px;top:0}.orbital-two{width:680px;height:460px;top:55px;left:30px;border-style:dashed;opacity:.5}.orbital-one:after{content:'';position:absolute;left:110px;top:52px;width:7px;height:7px;background:#8f8576;border-radius:50%}.coordinate{position:absolute;font:8px monospace;letter-spacing:2px;color:#9a9081}.coord-a{left:43px;top:18px}.coord-b{right:35px;bottom:40px}.sheet{position:absolute;left:165px;top:103px;width:450px;height:350px;border:1px solid #c4beb2;box-shadow:3px 7px 10px #40342408;z-index:-1}.sheet-back{rotate:-10deg;background:#dbd5c9}.sheet-front{rotate:4deg;background:#eae5db}.artifact{position:absolute;overflow:hidden;border:1px solid #b9b3a7;background:#faf8f2;box-shadow:12px 35px 42px -15px #3a302c34,2px 6px 8px #3b35261a;will-change:transform,width,height;transform-style:preserve-3d}.artifact-layer{position:absolute;inset:0;overflow:hidden;will-change:opacity,transform;visibility:hidden}.paper-heading{display:flex;justify-content:space-between;align-items:center;font:9px monospace;letter-spacing:1px;color:#898277;border-bottom:1px solid #d6d0c4;padding:17px 24px}.paper-heading>span+span{font-size:20px}.brief-layer{background:repeating-linear-gradient(transparent 0,transparent 34px,#a59a7f16 35px,#a59a7f16 36px);padding:0 10px}.notebook-title{font-size:33px;line-height:1.18;letter-spacing:-1.5px;margin:24px 24px 15px}.notebook-title em{color:#8b7b65}.brief-lines{margin:18px 24px;display:grid;gap:9px;color:#82786b;font:11px monospace}.brief-lines span:before{content:'○';padding-right:16px}.handwritten{position:absolute;bottom:24px;right:24px;font:italic 19px Georgia;color:#8a7c68;rotate:-6deg}.ink-underline{position:absolute;width:230px;right:10px;bottom:5px;fill:none;stroke:#9a8c72;stroke-width:1.3}.ink-underline path,.bezier{stroke-dasharray:1;stroke-dashoffset:1}.identity-grid{position:relative;height:245px;background-image:linear-gradient(#a5978014 1px,transparent 1px),linear-gradient(90deg,#a5978014 1px,transparent 1px);background-size:23px 23px}.identity-letter{position:absolute;inset:0;display:grid;place-items:center;font:italic 215px/1 Georgia;color:#2b2925;translate:0 -10px}.identity-grid>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a59a8780;stroke-width:1}.identity-grid .bezier{stroke:#82705a;stroke-width:1.8}.identity-grid .nodes{fill:#eee9df;stroke:#82705a}.type-spec{display:flex;align-items:center;gap:9px;padding:15px 24px;color:#756b5b}.type-spec>span{font-size:28px;margin-right:15px}.type-spec i{width:25px;height:25px;background:#252421;border-radius:50%;border:1px solid #948a7a}.type-spec i:nth-of-type(2){background:#a79a85}.type-spec i:nth-of-type(3){background:#ede6da}.type-spec small{font:7px monospace;margin-left:auto}
.pencil{position:absolute;left:602px;top:145px;width:18px;height:280px;border-radius:4px;background:linear-gradient(90deg,#161616,#42413c 35%,#282823 70%,#0a0a09);box-shadow:12px 15px 14px #28201626;transform-origin:50% 80%;z-index:6;will-change:transform}.pencil:before{content:'';position:absolute;bottom:-33px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:34px solid #bdab8c}.pencil:after{content:'';position:absolute;bottom:-34px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:11px solid #282522;left:6px}.pencil span{position:absolute;top:12px;height:10px;width:18px;border-top:2px solid #a49d89;border-bottom:2px solid #a49d89}.photo-art{height:100%;width:100%;background:#e4dfd5}.architecture{width:100%;height:100%;display:block}.frame-corners{position:absolute;inset:27px;background:linear-gradient(#fff,#fff) left top/22px 1px,linear-gradient(#fff,#fff) left top/1px 22px,linear-gradient(#fff,#fff) right top/22px 1px,linear-gradient(#fff,#fff) right top/1px 22px,linear-gradient(#fff,#fff) left bottom/22px 1px,linear-gradient(#fff,#fff) left bottom/1px 22px,linear-gradient(#fff,#fff) right bottom/22px 1px,linear-gradient(#fff,#fff) right bottom/1px 22px;background-repeat:no-repeat}.camera-cross{position:absolute;top:50%;left:50%;width:70px;height:70px;transform:translate(-50%,-50%);border:1px solid #fffd}.camera-cross:after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:white;font:20px monospace}.image-meta{position:absolute;bottom:35px;left:36px;right:36px;display:flex;justify-content:space-between;color:#4e4c46;font:8px monospace;letter-spacing:1px}.camera-object{width:240px;height:180px;position:absolute;left:33px;bottom:32px;z-index:6;filter:drop-shadow(9px 18px 12px #26201830)}.camera-object svg{width:100%;height:100%}.browser-chrome{height:34px;display:flex;gap:5px;align-items:center;padding:0 15px;border-bottom:1px solid #a69e8f33;color:#8b8275;font:8px monospace}.browser-chrome i{width:4px;height:4px;border:1px solid #9c9487;border-radius:50%}.browser-chrome span{margin:auto}.browser-chrome b{font-size:14px;font-weight:400}.web-nav{height:53px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8d0c4}.web-nav strong{font:20px Georgia;letter-spacing:-1px}.web-nav>span{font-size:7px;color:#776c5d}.web-hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;padding:24px 20px 18px 28px;height:220px;gap:10px}.web-hero small{font-size:6px;letter-spacing:1.8px}.web-hero h2{font:28px/1.05 Georgia;letter-spacing:-1px;margin:14px 0 20px}.web-hero h2 em{color:#8d7c63;letter-spacing:-1px}.mock-button{background:#242321;color:#faf6ee;font-size:7px;padding:9px 11px;display:inline-block}.web-image{height:180px;background:#e6e0d5}.web-grid{display:flex;justify-content:space-between;padding:17px 28px;border-top:1px solid #d4cbbb;font:7px monospace;color:#776b58}.layout-guides{position:absolute;inset:48px 22px 25px;border:1px solid #aa98728c;pointer-events:none}.layout-guides i{position:absolute;width:7px;height:7px;border:1px solid #a58c60;background:#f8f5ed}.layout-guides i:nth-child(1){top:-4px;left:-4px}.layout-guides i:nth-child(2){top:-4px;right:-4px}.layout-guides i:nth-child(3){bottom:-4px;left:-4px}.layout-guides i:nth-child(4){bottom:-4px;right:-4px}.designer-cursor{position:absolute;z-index:7;left:520px;top:350px;display:flex;align-items:end;gap:5px}.designer-cursor svg{width:25px;height:32px;fill:#9b8562;stroke:#fff;stroke-width:1}.designer-cursor span{background:#9b8562;color:white;padding:5px 9px;font-size:9px}
.programming-layer,.testing-layer{color:#dedbd4}.code-tabs{font:10px monospace;padding:13px 20px;background:#20201f;border-bottom:1px solid #ffffff0e;color:#b1a58d}.code-tabs>span{font-size:6px;margin-left:20px}.code-tabs small{float:right;color:#84817a}.code-body{display:flex;gap:22px;padding:22px;font:11px/1.85 monospace;height:250px;overflow:hidden}.code-numbers{color:#55534e}.code-body pre{margin:0;color:#c9c0ae;font:inherit;white-space:pre-wrap;word-break:break-word}.code-caret{display:inline-block;width:5px;height:11px;background:#bca580;animation:blink 1s steps(2,end) infinite}.code-terminal{padding:12px 22px;font:9px monospace;color:#9e9c93;border-top:1px solid #ffffff15}.code-terminal>span:first-child{color:#c4ab83;margin-right:8px}.code-token{position:absolute;right:34px;bottom:54px;font:72px/1 monospace;color:#b3a58e;letter-spacing:-7px;text-shadow:3px 8px 8px #0002;z-index:5}.code-token small{display:block;font:8px monospace;letter-spacing:2px;text-shadow:none;text-align:center;margin-top:15px}.test-title{padding:25px 25px 18px;font-size:27px;letter-spacing:-1px;line-height:1.1}.test-title em{color:#a79b85}.test-title>span{float:right;font:10px monospace;color:#aaa190;margin-top:25px;letter-spacing:1px}.test-rows{padding:0 25px}.test-rows>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ffffff13;font:10px monospace;color:#a9a69f}.test-rows b{font-weight:400;color:#766e61}.test-rows b.adjusting{color:#d5ae83}.test-rows b.passed{color:#ded9c9}.test-console{padding:17px 25px;font:9px monospace;color:#a19680}.launch-orbit{position:absolute;inset:10px 50px;z-index:-1}.launch-orbit svg{width:100%;height:100%;fill:none;stroke:#a797794d;stroke-width:1}.live-stamp{position:absolute;bottom:63px;right:85px;display:flex;align-items:center;gap:13px;padding:16px 22px;background:#252522;color:#eee9dd;font-size:11px;box-shadow:0 15px 25px #28201a28;z-index:6}.live-stamp i{height:6px;width:6px;border-radius:50%;background:#d2c7ae;box-shadow:0 0 0 4px #d2c7ae18}.live-stamp span{margin-left:25px}.phone-layer{color:#f0ede5;background:radial-gradient(ellipse at 60% 45%,#48423a,transparent 80%),#20201e;text-align:center}.phone-notch{width:75px;height:18px;position:absolute;top:10px;left:50%;transform:translateX(-50%);border-radius:15px;background:#0c0c0c}.phone-time{font-size:35px;letter-spacing:-2px;margin-top:47px}.phone-date{font-size:9px;color:#a59e90}.phone-brand{font:italic 60px/.9 Georgia;letter-spacing:-4px;margin-top:44px}.phone-brand em{color:#b8a78b}.phone-app{display:flex;text-align:left;gap:12px;align-items:center;margin:45px 20px 0}.phone-app>span{height:32px;width:32px;flex-shrink:0;display:grid;place-items:center;background:#b4a48b;color:#2a2723;border-radius:8px;font-size:22px}.phone-app b{font-size:10px;font-weight:400;line-height:1.6;color:#c4baaa}.phone-bottom{font-size:8px;color:#8c867b;position:absolute;bottom:23px;left:0;right:0}.notification{position:absolute;z-index:8;padding:15px;display:flex;align-items:center;gap:13px;background:#faf8f0f5;border:1px solid #ddd5c5;box-shadow:0 10px 32px #352a1c20;border-radius:12px;backdrop-filter:blur(8px);text-align:left;min-width:290px}.notification-one{left:40px;top:180px;rotate:-5deg}.notification-two{right:15px;top:330px;rotate:4deg}.notification-three{left:58px;bottom:55px;rotate:-3deg}.notification-icon{height:34px;width:34px;display:grid;place-items:center;background:#ded6c5;border-radius:8px;color:#675a44;font:23px Georgia}.notification small{display:block;font:7px monospace;letter-spacing:1px;color:#8c806d;margin-bottom:6px}.notification small i{font-style:normal;float:right}.notification b{font-size:10px;font-weight:500;display:block}.notification p{font-size:9px;color:#8a8173;margin-top:2px}.call-dot{background:#393832;border-radius:50%;height:30px;width:30px;color:#e8e4d5;display:grid;place-items:center;margin-left:8px}.scene-note{position:absolute;bottom:5px;left:80px;display:flex;align-items:center;gap:12px;font:10px Georgia;color:#918570}.note-rule{width:28px;height:1px;background:#9a8d76}
.story-footer{height:65px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #cfc8bb;position:relative;gap:25px}.chapter-buttons{display:flex;gap:23px;align-items:center}.chapter-buttons button{color:#9d9485;padding:9px 0;position:relative;border:0;background:none;display:grid;gap:4px;text-align:left;min-height:48px;font-size:9px;letter-spacing:.04em}.chapter-buttons button[aria-pressed=true]{color:#262521;border:0}.chapter-buttons .step-number{font:9px monospace;display:block}.chapter-buttons .step-name{font-size:8px;display:block}.chapter-buttons button i{position:absolute;bottom:2px;left:0;right:0;height:1px;background:#a2937b;transform:scaleX(var(--step,0));transform-origin:left}.scroll-hint{color:#8a8171;font:8px monospace;letter-spacing:1px;display:flex;align-items:center;gap:10px}.scroll-hint i{font-size:21px;font-style:normal;animation:scroll-nudge 2.5s ease-in-out infinite}.story-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#dcd5c9}.story-progress span{display:block;height:100%;background:#81715b;transition:none}.demo-note{position:absolute;bottom:8px;right:5vw;font:6px monospace;letter-spacing:1px;color:#a79d8b}
.intro{background:#e9e5dc}.work,.services{background:#f4f2ed}.project-image{background:#dfd8cb}.project-image img{filter:saturate(.7)}.creative{background:#242321;color:#eee9df}.creative .eyebrow,.creative p{color:#aaa294}.creative h2 em{color:#c3b499}.creative-grid img{filter:saturate(.65)}.creative-grid a{border-color:#716b5f}.creative-bottom{border-color:#555046}.team{background:#e5dfd3}.team-grid article{background:#f4f0e7}.giant-amp{color:#8a7b63}.extras{background:#e8e3d9}.contact{background:#232220;color:#f0ece2}.contact h2 em{color:#bfb096}.contact .eyebrow,.contact p{color:#b4ac9c}.included span:before{color:#817055}dialog::backdrop{background:#181715c9}#brief-text{background:#e6e0d5}input,select,textarea{border-color:#c7bfb0}#mobile-nav:not([hidden]){background:#f4f2ed}#mobile-nav button{background:#252422}.project-arrow{background:#f1ebdf;color:#27241e}.status{color:#75654f}
@keyframes copy-in{from{opacity:0;translate:0 25px}to{opacity:1;translate:0 0}}@keyframes stage-in{from{opacity:0;translate:35px 45px;rotate:6deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes blink{to{opacity:0}}@keyframes scroll-nudge{0%,100%{translate:0 -3px}50%{translate:0 3px}}
@media(min-width:1600px){.story-copy h1{font-size:88px}.story-layout{grid-template-columns:.85fr 1.2fr}}
@media(max-width:1100px){.chapter-buttons{gap:18px}.chapter-buttons .step-name{display:none}.story-copy h1{font-size:clamp(40px,5.4vw,64px)}.story-copy p{font-size:12px}.story-copy .chapter-tag{font-size:7px!important}.story-layout{grid-template-columns:.85fr 1.2fr}}
@media(min-width:701px) and (max-height:760px){.story-copy h1{font-size:clamp(38px,4.4vw,65px);margin:17px 0}.story-copy p{font-size:11px;min-height:58px}.story-copy>.button{margin-top:16px;padding:10px 15px}.chapter-tag{display:none}.story-pin{padding-top:18px}.film-stage{height:62svh}}
@media(max-width:700px){.story{height:650svh}.story-pin{top:76px;height:calc(100svh - 76px);padding:15px 22px 0}.story-head .eyebrow{font-size:6px;max-width:150px}.story-head a{font-size:8px}.story-layout{display:flex;flex-direction:column;gap:0;height:calc(100% - 83px);padding-top:22px;align-items:stretch}.story-copy h1{font-size:clamp(34px,9vw,48px);line-height:1.02;min-height:3.06em;margin:12px 0 14px;max-width:420px}.chapter-top{font-size:7px;gap:12px}.chapter-number{font-size:8px}.story-copy p{font-size:11px;line-height:1.65;min-height:54px;max-width:360px}.story-copy>.button{font-size:10px;padding:10px 13px;margin-top:13px;gap:20px}.story-copy>.button span{font-size:17px}.chapter-tag{display:none}.film-stage{height:auto;flex:1;min-height:170px;width:calc(100% + 36px);margin-left:-18px;margin-top:0}.story-footer{height:52px;gap:10px}.chapter-buttons{gap:0;justify-content:space-between;flex:1}.chapter-buttons button{min-height:42px;padding:9px 3px}.chapter-buttons .step-number{font-size:9px}.chapter-buttons .step-name{display:none}.scroll-hint{font-size:5px;max-width:48px;letter-spacing:.5px;gap:3px}.scroll-hint i{font-size:14px}.demo-note{font-size:5px;bottom:5px;right:22px}.scene-note{font-size:12px}.coordinate{font-size:10px}.coord-a{top:7px}.coord-b{display:none}}
@media(max-width:700px) and (max-height:720px){.story-head{display:none}.story-pin{padding-top:10px}.story-layout{padding-top:4px;height:calc(100% - 58px)}.story-copy h1{font-size:30px;min-height:3.06em;margin:7px 0 8px}.story-copy p{font-size:10px;min-height:48px;max-width:330px}.story-copy>.button{padding:7px 11px;margin-top:8px}.film-stage{min-height:140px}.story-footer{height:44px}}
@media(prefers-reduced-motion:reduce){.story{height:auto}.story-pin{position:relative;top:0;min-height:700px}.story-copy,.film-world{animation:none}.artifact,.artifact-layer{will-change:auto}.scroll-hint{display:none}.story-copy h1,.story-copy p,.chapter-tag{opacity:1!important}.film-stage{min-height:280px}.story-layout{height:calc(100% - 112px)}.story-footer{margin-top:12px}}
