/* Graphart: a working sketchbook, grounded in the shapes of the studio logo. */
:root{--paper:#f5f1e8;--line:#d9d4cb;--muted:#777e78}
body{background:var(--paper);overflow-x:clip}
.header{min-height:100px;border:0}.header nav{font-size:12px}.nav-contact{border:0;border-radius:0;border-bottom:1px solid #bd3b40;padding:9px 0}.nav-contact span{color:#bd3b40}
.hero{position:relative;display:block;padding-top:30px;isolation:isolate}.hero-stage{position:relative;min-height:610px;border-top:1px solid var(--line);padding-top:32px}.hero .eyebrow{font-family:monospace;font-weight:400;letter-spacing:1px}.hero h1{position:relative;z-index:2;font-size:clamp(70px,8.6vw,124px);line-height:.94;letter-spacing:-7px;margin:55px 0 0;font-weight:500;max-width:800px;pointer-events:none}.hero h1 .idea-line{display:block;color:#bd3b40;font-family:Georgia,serif;font-style:italic;font-weight:400;transform:translateX(80px);letter-spacing:-7px}.hero h1 .last-line{display:block;font-size:.78em;margin-top:13px}.hero h1 .last-line em{font-family:Georgia,serif;font-weight:400}.hero-description{position:relative;z-index:3;margin:34px 0 26px 8px;max-width:290px;font-size:13px;line-height:1.8}.hero-playground{position:absolute;right:-18px;top:43px;width:58%;height:540px;z-index:1}.playground-art{width:100%;height:100%;object-fit:contain;transition:transform .8s cubic-bezier(.2,.8,.2,1)}.paper-note{position:absolute;right:8%;top:43px;transform:rotate(7deg);padding:25px 29px;background:#fffdf8;box-shadow:0 8px 22px #443a2712;font-size:14px;line-height:1.5;font-family:Georgia,serif;border:1px solid #e6e0d5;transition:transform .6s}.paper-note:before{content:'';position:absolute;top:-9px;left:34%;width:55px;height:19px;background:#d6cbb9a3;transform:rotate(-5deg)}.paper-note span{display:block;font-family:monospace;font-size:8px;letter-spacing:1px;margin-bottom:12px;color:#777}.art-label{position:absolute;bottom:38px;left:32%;font:10px monospace;letter-spacing:1px;transform:rotate(-6deg)}.experiment-button{position:absolute;bottom:25px;right:16px;border:1px solid #bdb9ae;background:var(--paper);border-radius:50%;width:94px;height:94px;font:11px/1.5 monospace;cursor:pointer;transform:rotate(9deg);transition:background .2s,transform .3s}.experiment-button span{display:block;font-size:22px;color:#bd3b40}.experiment-button:hover{background:#e2e9e2;transform:rotate(-7deg)}.hero-playground[data-variation="1"] .playground-art{transform:rotate(13deg) scale(.95)}.hero-playground[data-variation="1"] .paper-note{transform:rotate(-8deg) translate(-20px,15px)}.hero-playground[data-variation="2"] .playground-art{transform:rotate(-12deg) translateY(-12px)}.hero-playground[data-variation="2"] .paper-note{transform:rotate(1deg) translate(10px,-5px)}.hero .button{position:relative;z-index:3;background:none;color:var(--ink);padding:0 0 10px 0;border-radius:0;border-bottom:1px solid #bd3b40;margin-left:8px}.hero .button:hover{color:#bd3b40}.hero-bottom{margin-top:24px;border-top:1px solid var(--line);font-family:monospace;font-size:10px;padding:18px 0 28px}.ticker{background:transparent;border-block:1px solid var(--line);padding:18px 0}.ticker>div{font-size:10px;font-weight:400;letter-spacing:1.5px;gap:38px}.ticker span{font-size:15px;color:#bd3b40}
h2{font-family:Georgia,serif;font-size:clamp(36px,4vw,58px);letter-spacing:-2px;line-height:1.1}.muted{color:#748b83}.section{padding-block:100px}.studio{grid-template-columns:1fr 3fr}.studio>div{position:relative}.studio h2{max-width:800px}.studio .text-link{border-bottom-color:#bd3b40}.studio .text-link span{color:#bd3b40}.eyebrow{font-family:monospace;font-weight:400;font-size:10px}
.services{background:#e4e9e2;position:relative}.services h2{max-width:730px}.service-grid{gap:0;align-items:start;margin-top:60px}.service-card{position:relative;background:#faf7f0;border:0;box-shadow:0 14px 26px #26382e0b;border-radius:0;padding:44px;transform:rotate(-2deg);margin-right:15px}.service-card.innovation{background:#d0dcd4;border:0;transform:rotate(2deg);margin-left:15px;margin-right:0;margin-top:75px}.service-card:before{content:'';position:absolute;left:42%;top:-12px;width:90px;height:28px;background:#c3b9a17a;transform:rotate(5deg)}.card-top{font-family:monospace;font-size:9px}.service-icon{color:#bd3b40}.service-card h3{font-family:Georgia,serif;font-size:39px;letter-spacing:-1px}.service-details summary{font-size:12px}.service-details summary span{color:#a83238}
.reference-heading h2{max-width:650px}.client-grid{grid-template-columns:repeat(3,1fr);border:0;gap:0}.client-grid>span{border:0;border-bottom:1px solid var(--line);min-height:130px}.reference-note{margin-top:25px}.process{border-top:0;padding-top:25px}.steps{gap:0}.steps article{padding:24px 25px 0 0;border:0;position:relative}.steps article:not(:last-child):after{content:'→';position:absolute;right:24px;top:15px;font-size:23px;color:#90a9a6}.steps article>span{font-family:Georgia,serif;font-size:64px;font-style:italic;color:#aab9af}.steps h3{font-family:Georgia,serif;font-size:25px;margin-top:10px}.steps p{max-width:210px}
.contact{background:#deded1;position:relative;overflow:hidden;padding:65px 0}.contact:before{content:'';position:absolute;border:1px solid #7d91865c;width:700px;height:280px;right:-200px;top:45px;border-radius:50%;transform:rotate(-30deg);pointer-events:none}.contact h2{font-family:Arial,sans-serif;font-size:clamp(60px,7.5vw,108px);line-height:1;letter-spacing:-5px}.contact h2>span{color:#a83238}.contact .contact-star{font-size:45px}.contact-bottom{position:relative}.contact h2>a{width:80px;height:80px;font-size:48px}.contact .email{font-family:Georgia,serif;font-size:30px}.contact .section-top,.contact h2{position:relative}footer{padding-block:35px}
@media(min-width:1500px){.hero-stage{min-height:690px}.hero-playground{height:590px}.hero h1{font-size:133px}}
@media(max-width:1000px){.hero-stage{min-height:550px}.hero h1{font-size:87px;letter-spacing:-5px}.hero h1 .idea-line{letter-spacing:-5px;transform:translateX(40px)}.hero-playground{width:61%;right:-10px;top:70px;height:460px}.paper-note{right:0;top:5px;font-size:12px;padding:20px}.hero-description{max-width:265px}.service-card{padding:30px}.service-card h3{font-size:33px}}
@media(max-width:700px){.header{min-height:90px}.header nav{top:89px}.hero{padding-top:10px}.hero-stage{padding-top:24px;min-height:0}.hero h1{font-size:clamp(56px,12.6vw,85px);letter-spacing:-3.5px;margin-top:25px}.hero h1 .idea-line{letter-spacing:-3.5px;transform:translateX(25px)}.hero h1 .last-line{font-size:.8em;margin-top:10px}.hero-playground{position:relative;top:auto;right:auto;width:100%;height:330px;margin-top:-5px}.paper-note{right:5%;top:24px;padding:15px 20px;font-size:12px}.paper-note span{font-size:7px;margin-bottom:7px}.art-label{left:20%;bottom:20px;font-size:8px}.experiment-button{width:75px;height:75px;right:0;bottom:0;font-size:9px}.experiment-button span{font-size:20px}.hero-description{margin:12px 0 22px;max-width:340px;font-size:13px}.hero .button{margin-left:0}.hero-bottom{margin-top:32px;font-size:8px}.ticker>div{font-size:9px;gap:24px}.section{padding-block:60px}.studio{grid-template-columns:1fr}h2{font-size:37px;letter-spacing:-1.4px}.service-grid{gap:35px;margin:42px 5px 0}.service-card{margin:0;padding:28px;transform:rotate(-1.5deg)}.service-card.innovation{margin:0;transform:rotate(1.5deg)}.service-card h3{font-size:34px}.client-grid{grid-template-columns:1fr 1fr}.client-grid>span{min-height:100px}.process{padding-top:10px}.steps{gap:20px}.steps article{padding:0}.steps article>span{font-size:52px}.steps article:not(:last-child):after{right:5px;top:12px}.steps article:nth-child(2):after{display:none}.steps h3{font-size:22px}.contact{padding-block:45px}.contact h2{font-size:clamp(49px,10.5vw,74px);letter-spacing:-3px}.contact h2>a{width:50px;height:50px;font-size:31px}.contact .email{font-size:27px}.contact:before{width:400px;right:-260px}.section-top>span{max-width:145px;text-align:right}}
@media(prefers-reduced-motion:reduce){.playground-art,.paper-note,.experiment-button{transition:none}}