/* MugCode — portfolio, storytelling and motion */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.site-header{gap:22px}.site-nav{gap:25px}.brand-descriptor{font-size:9px;letter-spacing:.12em}.brand .mc-logo{width:205px}
.hero{padding-bottom:80px;gap:50px}.hero h1{white-space:normal}.hero-eyebrow{display:block;font-size:9px;margin-bottom:20px}.hero h1 .mc-accent{position:relative;display:inline-block}.hero h1 .mc-accent::after{content:"";position:absolute;bottom:-9px;left:2%;width:95%;height:4px;border-radius:100%;background:var(--mc-red);transform:scaleX(0);transform-origin:left;animation:line-in .8s .7s ease forwards}
.hero-copy{animation:hero-in .8s both}.hero-art{animation:hero-in 1s .15s both;perspective:1000px}.hero-art .browser-mock{transition:transform .7s cubic-bezier(.2,.7,.2,1);transform:rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg))}.hero-art .phone-mock{animation:phone-arrive 1.2s .3s both}.hero-tags{font-size:10px}
.studio-ribbon{border-block:1px solid var(--mc-stone);padding:22px 0;overflow:hidden;background:#eeeae1}.studio-ribbon>div{display:flex;align-items:center;justify-content:center;gap:42px;white-space:nowrap;font-family:var(--mc-font-display);font-size:clamp(13px,1.5vw,21px);font-weight:800;letter-spacing:.035em}.studio-ribbon i{color:var(--mc-red);font-size:27px;font-style:normal}
.section-heading-row{display:grid;grid-template-columns:1.2fr .8fr;gap:10%;align-items:end;margin-bottom:38px}.section-heading-row h2{max-width:15ch}.section-heading-row>p{max-width:37ch;margin:0 0 4px;color:var(--mc-slate);font-size:17px;line-height:1.65}
.work-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0 25px;border-top:1px solid var(--mc-stone)}.work-filters{display:flex;gap:6px;flex-wrap:wrap}.work-filters button{border:1px solid transparent;border-radius:999px;background:transparent;color:var(--mc-slate);font:500 12px var(--mc-font-body);padding:10px 15px;cursor:pointer;transition:background .2s,color .2s}.work-filters button[aria-pressed=true]{background:var(--mc-ink);color:var(--mc-paper)}.work-filters button:hover{border-color:var(--mc-stone)}.work-filters button span{margin-left:6px;font-size:10px;opacity:.65}.work-note{color:var(--mc-slate);font-size:11px}
.work-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:45px 30px}.project-card:nth-child(3n){grid-column:1/-1}.work-grid.is-filtered{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid.is-filtered .project-card{grid-column:auto}.project-link{display:block;text-decoration:none}.project-art{position:relative;aspect-ratio:1.26;overflow:hidden;border-radius:9px;isolation:isolate;container-type:inline-size;background:#ddd8cb}.project-art>*:first-child{transition:transform .65s cubic-bezier(.2,.7,.2,1)}.project-link:hover .project-art>*:first-child,.project-link:focus-visible .project-art>*:first-child{transform:scale(1.025)}.project-art--coffee{aspect-ratio:2.35}.is-filtered .project-art--coffee{aspect-ratio:1.26}.project-caption{display:flex;justify-content:space-between;align-items:center;margin-top:21px}.project-category{margin:0 0 3px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:var(--mc-slate)}.project-caption h3{font:800 clamp(23px,2.6vw,34px)/1.15 var(--mc-font-display);letter-spacing:-.04em;margin:0}.project-arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--mc-stone);border-radius:50%;font-size:22px;transition:background .2s,color .2s,transform .2s}.project-link:hover .project-arrow{background:var(--mc-red);border-color:var(--mc-red);color:white;transform:rotate(6deg)}.project-summary{font-size:14px;color:var(--mc-slate);margin:9px 0 0;max-width:60ch;line-height:1.6}.project-hover-label{position:absolute;bottom:20px;left:50%;transform:translate(-50%,15px);opacity:0;background:var(--mc-paper);color:var(--mc-ink);border-radius:999px;font-size:12px;padding:12px 19px;white-space:nowrap;transition:opacity .25s,transform .25s;box-shadow:0 5px 20px #171c241a}.project-link:hover .project-hover-label,.project-link:focus-visible .project-hover-label{opacity:1;transform:translate(-50%,0)}.concept-badge{position:absolute;left:16px;top:15px;font-size:8px;letter-spacing:.12em;background:#f5f2eadb;color:var(--mc-ink);border-radius:3px;padding:6px 8px}.project-upload{width:100%;height:100%;object-fit:cover;display:block}.work-footnote{display:flex;justify-content:space-between;align-items:center;padding-top:36px;margin-top:40px;border-top:1px solid var(--mc-stone);gap:20px}.work-footnote p{margin:0;font-size:16px;color:var(--mc-slate)}.work-footnote strong{color:var(--mc-ink);font-weight:500}.work-footnote a{font-size:14px}
/* Architectural website exploration. */
.forma-art{height:100%;padding:11% 7% 8%;background:#d9d5ca;display:flex;align-items:center}.concept-window{position:relative;width:100%;height:88%;background:#faf8f0;box-shadow:0 20px 30px #38382a24;overflow:hidden}.concept-window-bar{display:flex;align-items:center;justify-content:space-between;padding:5% 6%;font-size:1.25cqw;color:#4c4d42}.concept-window-bar>span:first-child{font-size:3cqw;letter-spacing:-.07em;font-weight:700}.concept-window-bar b{margin-left:10px;font-weight:400}.forma-title{position:absolute;top:33%;left:6%;font-family:Georgia,serif;font-size:5.1cqw;line-height:1.1;letter-spacing:-.06em;z-index:2}.forma-title em{font-weight:400}.architecture-scene{position:absolute;right:5%;top:23%;width:48%;height:59%}.architecture-scene svg{width:100%;height:100%;object-fit:cover;background:#e1e3d8}.architecture-scene>span{position:absolute;bottom:-10px;left:0;width:100%;font-size:.8cqw;letter-spacing:.1em;color:#787c70}.architecture-scene i{float:right;font-style:normal}.concept-bottom{position:absolute;bottom:7%;left:6%;right:5%;display:flex;justify-content:space-between;font-size:.95cqw;color:#565c4d}.concept-bottom span:last-child{border-bottom:1px solid #565c4d;padding-bottom:4px}
/* Mobile product exploration. */
.daylight-art{height:100%;position:relative;background:#d8d9eb;overflow:hidden}.daylight-wordmark{position:absolute;left:7%;top:14%;font-size:3.5cqw;font-weight:600;letter-spacing:-.055em;color:#454467}.daylight-wordmark span{margin-left:6px;color:#76759e}.daylight-side-note{position:absolute;left:7%;top:26%;font-size:1.2cqw;letter-spacing:.12em;line-height:1.7;color:#5f5c7e}.daylight-orbit{position:absolute;width:85%;aspect-ratio:1;border:1px solid #a9abc3;border-radius:50%;left:20%;top:14%}.orbit-two{width:110%;left:8%;top:0;border-color:#b7b8cf}.daylight-phone{position:absolute;top:8%;left:40%;width:40%;height:87%;border:5px solid #383645;border-radius:25px;background:#faf9f4;box-shadow:15px 23px 35px #5557733b;padding:5% 3%;transform:rotate(9deg);color:#343449;overflow:hidden}.daylight-status{font-size:1.1cqw;display:flex;justify-content:space-between;font-weight:600;margin-bottom:13%}.daylight-greeting{font-size:1.6cqw;display:flex;justify-content:space-between;color:#737184}.daylight-greeting span{color:#a59462}.daylight-phone h4{font-size:3.4cqw;line-height:1.08;letter-spacing:-.05em;margin:9% 0}.habit-progress{width:76%;aspect-ratio:1;border:10px solid #d7d8eb;border-top-color:#77769f;border-right-color:#77769f;border-bottom-color:#77769f;border-radius:50%;margin:7% auto 13%;display:grid;place-items:center;transform:rotate(-35deg)}.habit-progress>div{transform:rotate(35deg);text-align:center}.habit-progress strong{font-size:5cqw;letter-spacing:-.1em;line-height:1}.habit-progress strong span{font-size:2cqw;color:#aaa9bc;letter-spacing:0}.habit-progress small{display:block;font-size:1cqw}.habit-row{background:#eeedf4;margin:6% 0;border-radius:7px;padding:6%;display:flex;gap:6%;align-items:center;font-size:1.2cqw}.habit-row>span{font-size:2.2cqw;color:#72718e}.habit-row small{display:block;font-size:.85cqw;color:#8e8a9d}.habit-row b{margin-left:auto;font-weight:400}.daylight-tabs{display:flex;justify-content:space-around;color:#aaa6bc;font-size:2cqw;margin-top:10%}.daylight-tabs span{color:#595570}.daylight-float{position:absolute;left:8%;bottom:17%;padding:3% 4%;border-radius:7px;background:#f4f2ec;box-shadow:0 6px 14px #6666821f;font-size:1.7cqw;color:#66617e;transform:rotate(-8deg)}
/* Coffee launch exploration. */
.coffee-art{height:100%;position:relative;background:#b84a30;color:#fff3d9;overflow:hidden}.coffee-brand{position:absolute;left:7%;top:9%;font-family:Georgia,serif;font-size:3.4cqw;line-height:.8;letter-spacing:-.07em}.coffee-brand>span{font-family:var(--mc-font-body);font-size:.7cqw;letter-spacing:.25em;line-height:2}.coffee-copy{position:absolute;left:7%;top:32%;font-family:Georgia,serif;font-size:6.7cqw;line-height:.91;letter-spacing:-.055em}.coffee-copy em{font-weight:400}.coffee-copy small{display:block;font:400 1.15cqw var(--mc-font-body);letter-spacing:0;margin-top:5%}.coffee-cta{display:inline-block;font:500 .9cqw var(--mc-font-body);letter-spacing:0;padding:4% 7%;margin-top:6%;background:#f9e9c9;color:#9b402d;border-radius:999px}.coffee-bag{position:absolute;width:22%;height:76%;left:62%;top:10%;background:linear-gradient(100deg,#dcc193,#f1dbb4 12%,#e7cca0 85%,#c8a977);box-shadow:16px 24px 30px #63231340;transform:rotate(10deg);clip-path:polygon(5% 0,95% 0,100% 10%,100% 96%,93% 100%,4% 98%,0 92%,0 8%)}.bag-seam{position:absolute;top:4%;left:6%;width:88%;height:4%;border-top:1px solid #b69a6d;border-bottom:2px solid #c3a678}.bag-label{position:absolute;top:17%;left:12%;width:76%;height:68%;background:#466149;color:#fff2d5;text-align:center;padding-top:10%}.bag-label>span{font-size:1.5cqw;line-height:1;font-weight:800;letter-spacing:-.05em;display:block}.bag-label i{font-size:4.4cqw;font-style:normal;display:block;line-height:1.6}.bag-label strong{display:block;font-size:1.3cqw;line-height:1.05;font-weight:600}.bag-label small{display:block;font-size:.5cqw;margin-top:15%;letter-spacing:.1em}.coffee-circle{position:absolute;right:8%;top:13%;border-radius:50%;width:7%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;background:#f3d579;color:#8a402f;font-size:1cqw;font-weight:700;transform:rotate(15deg)}.coffee-bottom{position:absolute;left:7%;right:7%;bottom:7%;font-size:.65cqw;letter-spacing:.17em;display:flex;justify-content:space-between}
/* More useful content, with small visual interactions. */
.services{border-top:0;padding-top:50px}.service-card{transition:transform .25s}.service-card:hover{transform:translateY(-5px)}.service-includes{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid var(--mc-stone);font-size:12px;color:var(--mc-slate)}.service-includes li{margin:9px 0}.service-includes li::before{content:'↗';color:var(--mc-red);margin-right:10px}.service-card p{min-height:75px}.craft-section{background:#eae6dc}.craft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.craft-grid article{position:relative;padding-top:24px;border-top:1px solid #bbb5a9}.craft-number{font-size:11px;letter-spacing:.12em;color:var(--mc-slate)}.craft-grid h3{font:700 22px var(--mc-font-display);letter-spacing:-.03em;margin:23px 0 10px}.craft-grid p{font-size:15px;line-height:1.7;color:var(--mc-slate);margin:0;max-width:34ch}.craft-visual{height:95px;margin-top:22px;position:relative}.craft-responsive span{position:absolute;left:8px;top:0;width:110px;height:75px;border:2px solid var(--mc-ink);border-radius:6px;transform:rotate(-5deg);background:linear-gradient(90deg,#c7392d 50%,#d8d1c4 50%) center/80% 65% no-repeat}.craft-responsive i{position:absolute;left:104px;top:19px;width:38px;height:74px;border:2px solid var(--mc-ink);border-radius:6px;background:var(--mc-paper);transform:rotate(9deg);transition:transform .3s}.craft-responsive i::after{content:'';position:absolute;inset:9px 6px;background:linear-gradient(var(--mc-red) 50%,#d8d1c4 50%)}.craft-grid article:hover .craft-responsive i{transform:rotate(0) translateX(8px)}.craft-speed span{font-size:80px;line-height:90px;color:var(--mc-red);display:block;transform:rotate(-8deg);transition:transform .3s}.craft-speed i{position:absolute;left:80px;top:20px;width:50px;border-top:2px solid #aba394;transform:rotate(-30deg)}.craft-speed i:nth-of-type(2){left:95px;top:42px;width:43px}.craft-speed i:nth-of-type(3){left:106px;top:63px;width:35px}.craft-grid article:hover .craft-speed span{transform:translate(7px,-5px) rotate(-8deg)}.craft-control{width:145px;display:flex;flex-direction:column;gap:21px;justify-content:center}.craft-control>span{position:relative;width:100%;height:2px;background:#9c978b}.craft-control i{display:block;position:absolute;width:17px;height:17px;background:var(--mc-red);border:4px solid #eae6dc;outline:1px solid var(--mc-red);border-radius:50%;top:-8px;left:25%;transition:left .3s}.craft-control>span:nth-child(2) i{left:70%}.craft-control>span:nth-child(3) i{left:45%}.craft-grid article:hover .craft-control i{left:65%}.craft-grid article:hover .craft-control>span:nth-child(2) i{left:30%}.process .mc-heading{max-width:17ch}.process-grid article{position:relative}.process-grid article::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:0;background:#e8675e;transition:width 1s .25s}.process-grid article.is-visible::before{width:100%}.process-signature{right:6%;top:0}.faq-section{display:grid;grid-template-columns:1fr 1.1fr;gap:10%;border-top:1px solid var(--mc-stone)}.faq-section h2{max-width:13ch;font-size:clamp(30px,3vw,46px)}.faq-intro{font-size:15px;color:var(--mc-slate);margin:24px 0 14px}.faq-section .mc-text-link{font-size:14px}.faq-list{border-top:1px solid var(--mc-stone)}.faq-list details{border-bottom:1px solid var(--mc-stone)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 0;cursor:pointer;font-weight:600;font-size:16px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{flex:none;font-size:24px;color:var(--mc-red);font-weight:400;transition:transform .25s}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details p{margin:0 35px 25px 0;color:var(--mc-slate);font-size:15px;line-height:1.75;animation:answer-in .25s ease}.faq-list summary:focus-visible{outline:2px solid var(--mc-red);outline-offset:4px}.contact .mc-heading{font-size:clamp(40px,5vw,66px)}.footer-links{flex-wrap:wrap}
/* Project detail pages. */
.project-back{margin-left:auto;text-decoration:none;font-size:13px}.project-intro{padding:55px 0 45px}.project-intro .mc-lead{max-width:48ch;margin-bottom:0}.project-art--detail{aspect-ratio:1.8;max-height:690px}.project-art--detail .forma-art{padding:5% 10%}.project-art--detail .concept-window{height:100%}.project-art--detail .daylight-phone{left:44%;width:24%;top:6%;height:91%;padding:2%}.project-art--detail .daylight-wordmark{font-size:4cqw}.project-art--detail .daylight-phone h4{font-size:2.2cqw}.project-art--detail .daylight-greeting{font-size:1cqw}.project-art--detail .daylight-status{font-size:.7cqw}.project-art--detail .habit-progress{border-width:12px;width:72%;margin:10% auto}.project-art--detail .habit-progress strong{font-size:3cqw}.project-art--detail .habit-progress small{font-size:.6cqw}.project-art--detail .habit-row{font-size:.8cqw}.project-art--detail .habit-row small{font-size:.55cqw}.project-art--detail .habit-row>span{font-size:1.3cqw}.project-art--detail .daylight-tabs{font-size:1.2cqw}.project-story{display:grid;grid-template-columns:.75fr 1.4fr;gap:12%}.project-story aside>p:not(.eyebrow){font-size:15px;color:var(--mc-slate);line-height:1.7}.project-story .concept-disclosure{padding-top:24px;border-top:1px solid var(--mc-stone);font-size:13px!important}.project-story article+article{margin-top:50px}.project-story article>p:not(.eyebrow){font-size:18px;line-height:1.8;color:var(--mc-slate);white-space:pre-line}.project-story h2{font-size:clamp(28px,3vw,40px)}.project-next{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:50px 0;border-top:1px solid var(--mc-stone)}.project-footer{display:flex;justify-content:space-between;padding-block:30px;font-size:12px;color:var(--mc-slate)}
/* All content remains visible unless motion enhancement is active. */
.motion-ready [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.motion-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
@keyframes hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes phone-arrive{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}@keyframes line-in{to{transform:scaleX(1)}}@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1440px){.brand-descriptor{font-size:10px}}
@media(max-width:1100px){.work-note{display:none}.site-nav{gap:24px}.hero{gap:32px}.daylight-phone{border-width:4px}.habit-progress{border-width:8px}}
@media(max-width:768px){.brand .mc-logo{width:168px}.hero{gap:30px;padding-bottom:45px}.hero-eyebrow{font-size:9px}.hero-art{height:420px}.studio-ribbon{padding:17px 0}.studio-ribbon>div{justify-content:flex-start;gap:25px;padding-inline:20px}.studio-ribbon i{font-size:20px}.section-heading-row{grid-template-columns:1fr;gap:22px}.section-heading-row h2{max-width:18ch}.section-heading-row>p{font-size:15px;max-width:45ch}.work-grid,.work-grid.is-filtered{grid-template-columns:1fr;gap:30px}.project-card:nth-child(3n){grid-column:auto}.project-art--coffee{aspect-ratio:1.26}.project-caption{margin-top:16px}.project-caption h3{font-size:29px}.project-summary{font-size:14px}.coffee-copy{top:35%;font-size:8cqw}.coffee-bag{width:27%;left:64%;height:65%;top:20%}.coffee-brand{font-size:5cqw;top:15%}.coffee-brand>span{font-size:1.1cqw}.coffee-copy small{font-size:1.5cqw}.coffee-cta{font-size:1.5cqw}.bag-label>span{font-size:2.7cqw}.bag-label i{font-size:6cqw}.bag-label strong{font-size:2cqw}.bag-label small{font-size:.8cqw}.coffee-circle{width:10%;font-size:1.5cqw;top:13%;right:6%}.coffee-bottom{font-size:1cqw}.craft-grid{gap:28px;grid-template-columns:1fr}.craft-grid article{display:grid;grid-template-columns:150px 1fr;gap:5px 24px}.craft-number{grid-column:1/-1}.craft-visual{grid-row:2/4}.craft-grid h3{font-size:22px}.craft-grid p{max-width:none;font-size:14px}.craft-grid h3{margin-top:20px}.faq-section{grid-template-columns:1fr;gap:35px}.faq-section h2{max-width:19ch}.work-footnote{align-items:flex-start;flex-direction:column}.project-story{grid-template-columns:1fr;gap:32px}.project-story aside{max-width:50ch}.project-intro{padding-top:30px}.project-intro h1{font-size:48px}.project-art--detail{aspect-ratio:1.26}.project-art--detail .forma-art{padding:11% 7% 8%}.project-art--detail .concept-window{height:88%}.project-art--detail .daylight-phone{width:40%;left:40%;padding:5% 3%;top:8%;height:87%}.project-art--detail .daylight-phone h4{font-size:3.4cqw}.project-art--detail .daylight-greeting{font-size:1.6cqw}.project-art--detail .daylight-status{font-size:1.1cqw}.project-art--detail .habit-progress{width:76%;border-width:8px}.project-art--detail .habit-progress strong{font-size:5cqw}.project-art--detail .habit-progress small{font-size:1cqw}.project-art--detail .habit-row{font-size:1.2cqw}.project-art--detail .habit-row small{font-size:.85cqw}.project-art--detail .daylight-tabs{font-size:2cqw}.project-next{align-items:flex-start;flex-direction:column}.project-back{font-size:11px}.project-footer{gap:15px;flex-wrap:wrap}}
@media(max-width:540px){.hero-art{height:345px}.work-filters{gap:2px}.work-filters button{font-size:11px;padding:9px 10px}.craft-grid article{grid-template-columns:110px 1fr;gap:5px 14px}.craft-visual{transform:scale(.75);transform-origin:left center}.craft-grid h3{font-size:19px}.work-toolbar{padding-bottom:18px}.project-arrow{width:38px;height:38px}.project-summary{font-size:13px}.faq-list summary{font-size:15px}.project-back{max-width:95px;text-align:right}.daylight-phone{border-radius:18px;border-width:4px}.habit-progress{border-width:7px}.concept-badge{font-size:7px;top:10px;left:10px}.project-hover-label{display:none}.service-card p{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero h1 .mc-accent::after{transform:scaleX(1)}.motion-ready [data-reveal]{opacity:1;transform:none}.hero-art .browser-mock{transform:none!important}}
.project-art--detail:has(.project-upload){aspect-ratio:auto;max-height:none}.project-art--detail .project-upload{height:auto;object-fit:contain}
@media print{.motion-ready [data-reveal]{opacity:1;transform:none}}