@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";
:root{--paper:#f5f3ed;--ink:#20211f;--muted:#777972;--line:#d9dbd2;--lime:#d2f26b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{background:var(--paper);color:var(--ink);margin:0;font-family:DM Sans,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:var(--lime)}.wrap{max-width:1440px;margin:auto;padding:0 64px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:108px;display:flex}.logo{letter-spacing:-1.8px;font-family:Manrope,Arial;font-size:30px;font-weight:800}.logo span{color:#794}nav{align-items:center;gap:32px;font-size:13px;display:flex}.pill{border:1px solid var(--ink);border-radius:50px;align-items:center;gap:26px;padding:15px 23px;font-size:13px;display:inline-flex}.pill.dark{background:var(--ink);color:var(--paper)}.pill:hover{background:var(--lime);color:var(--ink)}.eyebrow{text-transform:uppercase;letter-spacing:2px;align-items:center;gap:10px;font-size:10px;font-weight:600;display:flex}.dot{background:#829b43;border-radius:50%;width:7px;height:7px}.hero{padding:68px 0 48px;position:relative}.hero h1{letter-spacing:-7px;max-width:1000px;margin:35px 0 33px;font-family:Manrope,Arial;font-size:clamp(60px,7.8vw,116px);font-weight:500;line-height:1.02}.hero h1 em{letter-spacing:-6px;font-family:Georgia,serif;font-weight:400}.hero-bottom{justify-content:space-between;align-items:center;gap:40px;display:flex}.hero-bottom p{color:#62655d;max-width:380px;margin:0;font-size:16px;line-height:1.7}.hero-actions{align-items:center;gap:25px;display:flex}.text-link{border-bottom:1px solid #a2a498;padding-bottom:6px;font-size:13px}.hero-mark{color:#9daa72;font-size:105px;line-height:1;position:absolute;top:105px;right:12px}.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:#66695f;justify-content:space-between;align-items:center;margin-top:52px;padding:19px 0;font-size:11px;display:flex}.ticker strong{color:var(--ink);letter-spacing:-.5px;font-size:15px}.work{padding:55px 0 90px}.section-top{justify-content:space-between;align-items:end;margin-bottom:28px;display:flex}.section-top h2{letter-spacing:-1.8px;margin:0;font-family:Manrope;font-size:38px;font-weight:500}.section-top h2 span{vertical-align:top;letter-spacing:0;color:var(--muted);margin-left:9px;font-size:13px}.section-top p{color:var(--muted);margin:0;font-size:12px}.grid{grid-template-columns:1fr 1fr;gap:46px 26px;display:grid}.project{display:block}.canvas{border-radius:5px;height:350px;padding:35px 25px 0;transition:transform .3s;position:relative;overflow:hidden}.gunz{background:#262a29}.signet{background:#d9e3ed}.koke{background:#e3e7d8}.naraka{background:#e5d9c6}.browser-frame{background:#fff;border-radius:7px 7px 0 0;transition:transform .4s;overflow:hidden;transform:rotate(-2deg);box-shadow:0 12px 35px #0003}.signet .browser-frame,.naraka .browser-frame{transform:rotate(2deg)}.project:hover .browser-frame{transform:rotate(0)translateY(-8px)}.browser-bar{color:#83857e;background:#f4f4f1;align-items:center;gap:4px;height:23px;padding:0 9px;font-size:7px;display:flex}.browser-bar i{background:#c9ccc3;border-radius:50%;width:4px;height:4px}.browser-bar span{margin:auto}.browser-frame img{width:100%;height:auto;display:block}.visit{opacity:0;background:#fff;border-radius:50%;place-items:center;width:32px;height:32px;font-size:19px;transition:opacity .2s;display:grid;position:absolute;top:15px;right:16px}.project:hover .visit,.project:focus-visible .visit{opacity:1}.project-info{justify-content:space-between;align-items:center;padding-top:18px;display:flex}.project-info h3{letter-spacing:-.7px;margin:0 0 6px;font-size:21px;font-weight:500}.project-info p{color:var(--muted);margin:0;font-size:11px}.tags{gap:6px;display:flex}.tags span{border:1px solid var(--line);color:#62665b;border-radius:30px;padding:6px 10px;font-size:9px}.services{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:65px;padding:65px 0;display:grid}.services h2{letter-spacing:-2px;margin:24px 0;font-family:Manrope;font-size:46px;font-weight:500;line-height:1.16}.services p{color:#696d62;max-width:340px;font-size:14px;line-height:1.8}.service-list details{border-bottom:1px solid var(--line);padding:23px 0}.service-list summary{cursor:pointer;letter-spacing:-.5px;justify-content:space-between;font-size:19px;list-style:none;display:flex}.service-list summary:after{content:"+";font-size:24px}.service-list details[open] summary:after{content:"−"}.service-list p{max-width:100%;font-size:13px}.num{color:var(--muted);letter-spacing:0;margin-right:22px;font-size:10px}.contact{background:var(--lime);border-radius:7px;justify-content:space-between;align-items:end;gap:30px;margin:20px 0 60px;padding:50px;display:flex}.contact h2{letter-spacing:-3px;margin:20px 0 0;font-family:Manrope;font-size:62px;font-weight:500;line-height:1.08}.contact p{max-width:260px;margin:0 0 20px;font-size:13px;line-height:1.6}.contact .pill{justify-content:space-between;width:100%}footer{color:var(--muted);justify-content:space-between;align-items:center;padding:0 0 32px;font-size:10px;display:flex}footer .logo{color:var(--ink);font-size:23px}a:focus-visible,summary:focus-visible{outline-offset:6px;outline:3px solid #708846}@media (min-width:1450px){.canvas{height:390px}}@media (max-width:900px){.wrap{padding:0 28px}.hero h1{letter-spacing:-4px}.hero-mark{display:none}.hero h1 em{letter-spacing:-3px}.canvas{height:260px;padding:30px 15px 0}.tags{display:none}.contact h2{font-size:46px}.ticker{flex-wrap:wrap;gap:15px}.services{gap:30px}}@media (max-width:600px){.wrap{padding:0 22px}header{height:82px}nav{gap:18px}nav>a:not(.pill){display:none}nav .pill{padding:11px 16px;font-size:11px}.logo{font-size:27px}.hero{padding-top:44px}.hero h1{letter-spacing:-3.8px;margin:27px 0;font-size:58px}.hero-bottom{display:block}.hero-bottom p{font-size:14px}.hero-actions{margin-top:25px}.ticker{justify-content:start;gap:22px;margin-top:35px}.ticker>span{width:100%}.ticker strong{font-size:12px}.work{padding:18px 0 55px}.section-top h2{font-size:30px}.section-top p{display:none}.grid{grid-template-columns:1fr;gap:30px}.canvas{height:280px;padding:30px 20px 0}.services{grid-template-columns:1fr;gap:10px;padding:42px 0}.services h2{font-size:39px}.contact{margin-bottom:30px;padding:30px 25px;display:block}.contact h2{margin-bottom:26px;font-size:43px}.contact p{max-width:100%}footer{flex-wrap:wrap;gap:20px}footer>span:last-child{width:100%}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}.talk-layout{grid-template-columns:1fr 1fr;gap:90px;padding:75px 0 90px;display:grid}.talk-intro h1{letter-spacing:-5px;margin:30px 0;font-family:Manrope,Arial;font-size:86px;font-weight:500;line-height:1.05}.talk-intro h1 em{font-family:Georgia;font-weight:400}.talk-intro>p{color:#62655d;max-width:360px;font-size:16px;line-height:1.8}.talk-note{border-top:1px solid var(--line);max-width:360px;margin-top:45px;padding-top:25px}.talk-note p{color:#62655d;font-size:14px;line-height:1.7}.talk-form{background:#eeeee5;border-radius:8px;padding:36px}.talk-form h2{letter-spacing:-1px;margin:0 0 10px;font-family:Manrope;font-size:27px;font-weight:500}.form-caption{color:#62655d;font-size:12px;line-height:1.7}.talk-form form{margin-top:30px}.field-row{grid-template-columns:1fr 1fr;gap:18px;display:grid}.talk-form label{margin-bottom:22px;font-size:12px;display:block}.talk-form label span{color:#777972}.talk-form input,.talk-form select,.talk-form textarea{background:var(--paper);width:100%;color:var(--ink);font:inherit;border:1px solid #cdd0c3;border-radius:4px;margin-top:9px;padding:13px 12px;font-size:14px;display:block}.talk-form textarea{resize:vertical}.talk-form :is(input,select,textarea):focus{outline-offset:2px;outline:2px solid #829b43}.talk-form button{cursor:pointer;justify-content:space-between;width:100%}.talk-form #form-status{font-size:12px;line-height:1.7}@media (max-width:900px){.talk-layout{gap:30px}.talk-intro h1{font-size:65px}.talk-form{padding:25px}.field-row{grid-template-columns:1fr;gap:0}}@media (max-width:600px){.talk-layout{grid-template-columns:1fr;padding:40px 0}.talk-intro h1{letter-spacing:-3px;font-size:62px}.talk-note{display:none}.talk-form{padding:25px 20px}.talk-intro>p{font-size:14px}}.logo .brand-mark{vertical-align:baseline;width:.78em;height:.78em;margin-left:2px;display:inline-block}.hero-mark{width:86px;height:86px;transform:none}
