:root{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#1b1c1e;background:#fff;font-synthesis:none;--paper:#fff;--ink:#1b1c1e;--line:#d9d9d9;--gutter:clamp(20px,3vw,56px);scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}button:active{transform:translateY(1px)}.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}.skip-link{position:fixed;z-index:100;left:20px;top:20px;padding:15px 22px;background:white;color:#111;transform:translateY(-150%)}.skip-link:focus{transform:none}
.hero{position:relative;isolation:isolate;min-height:360px;height:100svh;height:100dvh;overflow:hidden;background:#999d9e;color:white}/* The first studio portrait, with its original grey backdrop. */
.hero-portrait{position:absolute;top:0;left:0;z-index:-2;width:100%;max-width:none;height:120%;object-fit:cover;object-position:center top;transform-origin:center 5%;pointer-events:none}.site-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px var(--gutter);font-size:17px;line-height:1.4}.wordmark{display:flex;gap:9px}.site-header nav{display:flex;gap:36px}.site-header a{position:relative}.site-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .25s}.site-header nav a:hover:after{transform:scaleX(1)}.hero-role{position:absolute;right:8%;top:41%;font-size:clamp(23px,2.2vw,36px);line-height:1.35;font-weight:400;letter-spacing:-.025em;margin:0}.name-marquee{position:absolute;left:0;right:0;bottom:8%;overflow:hidden;pointer-events:none}.name-track{display:flex;width:max-content;will-change:transform;animation:nameMove 27s linear infinite}.name-track span{white-space:nowrap;font-size:clamp(100px,15.5vw,310px);font-weight:400;line-height:1.18;letter-spacing:-.052em}.name-track i{font-style:normal;font-weight:300;display:inline-block;margin-left:.05em}
.work{padding:var(--gutter) var(--gutter) 100px;scroll-margin-top:15px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:70px 20px}.project{display:flex;flex-direction:column;min-width:0}.project-image{position:relative;flex-shrink:0;aspect-ratio:6/7;overflow:hidden;background:#f0f0f0}.project-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .4s}.project:hover .project-image>img{transform:scale(1.035);filter:brightness(.93)}.visit{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);background:white;color:#191919;padding:16px 23px;border-radius:100px;white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s;font-size:14px}.project:hover .visit,.project:focus-visible .visit{opacity:1;transform:translate(-50%,-50%)} .project-caption{display:flex;flex:1;flex-direction:column;padding:23px 0 0}.project-caption h3,.project-caption p{font-size:clamp(21px,1.72vw,30px);line-height:1.16;letter-spacing:-.035em;font-weight:400;margin:0}.project-caption p{margin-top:2px;max-width:30em}.project-tags{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:29px;font-size:13px;line-height:1.3;letter-spacing:0}.project-tags span{padding:1px 5px}.tag-web{background:#c9f0d3}.tag-hospitality{background:#f8d6c4}.tag-retail{background:#f7d0e8}.tag-creative{background:#d6d0fa}.tag-concept{background:#e7e5df}.tag-technology{background:#baf4ec}

.footer{padding:60px var(--gutter) 28px;border-top:1px solid var(--line)}.footer>p{font-size:16px;margin:0 0 12px}.contact-link{display:inline-block;font-size:clamp(36px,6.5vw,110px);letter-spacing:-.055em;line-height:1.15}.contact-link:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}.footer-bottom{display:flex;gap:30px;align-items:center;font-size:13px;margin-top:100px}.footer-bottom>span{margin-right:auto}.replay-intro{background:none;border:0;padding:8px 0}.footer-bottom a:hover,.replay-intro:hover{text-decoration:underline}
@keyframes nameMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.name-rule{width:.65em;height:.055em;background:currentColor;vertical-align:middle;margin-bottom:.07em}.intro{position:fixed;inset:0;z-index:90;background:#1b1c1e;color:#fff;display:grid;place-items:center;transform:translateY(0);border-radius:0;transition:transform .85s cubic-bezier(.76,0,.24,1),border-radius .85s cubic-bezier(.76,0,.24,1)}.intro[hidden]{display:none}.intro.leaving{transform:translateY(-110%);border-radius:0 0 50% 50%;pointer-events:none}.greeting{font-size:clamp(36px,4.1vw,68px);font-weight:400;letter-spacing:-.025em;margin:0}.greeting:before{content:"";display:inline-block;width:.13em;height:.13em;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:.45em;margin-bottom:.1em}.skip-intro{position:absolute;bottom:30px;right:var(--gutter);background:transparent;border:0;padding:12px 0;font-size:14px;color:#bcbcbc}.intro-running{overflow:hidden}.intro-running .name-track{animation-play-state:paused}.intro-running .hero-portrait{transform:translateY(2%)}.hero-portrait{transition:transform 1.6s cubic-bezier(.22,1,.36,1)}.project{animation:projectReveal both;animation-timeline:view();animation-range:entry 0% entry 18%}@keyframes projectReveal{from{opacity:.45;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){.hero-role{right:12%}.project-grid{gap:80px 24px}}@media(max-width:1023px){.hero-role{right:5%;top:43%;font-size:23px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.name-track span{font-size:19vw}}
@media(max-width:639px){.site-header{padding-top:24px;font-size:15px}.site-header nav{gap:23px}.hero-role{left:var(--gutter);right:auto;top:auto;bottom:100px;font-size:24px}.name-track span{font-size:28vw;letter-spacing:-.055em}.work{padding-bottom:65px}.project-grid{grid-template-columns:1fr;gap:48px}.project-caption{padding-top:18px}.project-caption h3,.project-caption p{font-size:23px}.project-tags{padding-top:23px}.project-image{aspect-ratio:6/7}.footer{padding-top:38px}.footer-bottom{margin-top:65px;gap:16px;flex-wrap:wrap}.footer-bottom>span{width:100%;margin-bottom:6px}.contact-link{font-size:10vw}}
.project-cover{display:block;position:absolute;inset:0;overflow:hidden}.preview-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .45s ease}.preview-frame.is-active{opacity:1}.project-cover:focus-visible{outline-offset:-5px;outline:3px solid white}.preview-rail{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;min-height:36px;color:#666;font-size:12px}.preview-label{line-height:1.25}.preview-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}.preview-controls button{width:34px;height:34px;border:0;background:transparent;font-size:21px;line-height:1}.preview-controls button:hover{background:#eee;color:#111}.preview-count{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.project-caption{padding-top:9px}.project-external{font-size:.7em;display:inline-block;margin-left:9px;color:#777;vertical-align:top;padding-top:.15em}.project-caption h3 a:hover{text-decoration:underline;text-underline-offset:4px}.project-preview-open{overflow:hidden}.preview-dialog{border:0;padding:0;width:min(1160px,calc(100vw - 48px));height:calc(100dvh - 48px);max-width:none;max-height:1040px;background:#f7f7f5;color:var(--ink)}.preview-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.preview-dialog::backdrop{background:#141414dc;backdrop-filter:blur(7px)}.preview-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 23px;background:white}.preview-dialog-header h2{font-size:21px;font-weight:400;letter-spacing:-.03em;margin:0}.preview-close{background:none;border:0;padding:10px 0 10px 14px;font-size:14px}.preview-close span{font-size:24px;vertical-align:-2px;margin-left:14px}.preview-header-actions{display:flex;align-items:center;gap:20px}.preview-zoom{background:none;border:0;padding:10px 0;font-size:14px}.preview-dialog-stage{min-height:0;overflow:auto;overscroll-behavior:contain;background:#eae9e5;scrollbar-width:thin;padding:16px}.preview-dialog-image{display:block;width:100%;height:100%;object-fit:contain;margin:0 auto}.preview-dialog-stage.is-zoomed{padding:0}.is-zoomed .preview-dialog-image{height:auto;width:max(100%,800px);max-width:none}.preview-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 23px;background:white}.preview-dialog-meta{display:flex;flex-direction:column;gap:6px;font-size:14px}.preview-dialog-count{font-size:12px;font-variant-numeric:tabular-nums;color:#777}.preview-dialog-controls{display:flex;align-items:center;gap:8px}.preview-dialog-controls button{border:1px solid #dedede;background:white;width:44px;height:44px;font-size:22px}.preview-dialog-controls button:hover{background:#eee}.preview-website{display:inline-flex;align-items:center;gap:30px;padding:14px 18px;background:#1b1c1e;color:white;font-size:13px;margin-left:10px;white-space:nowrap}.preview-website:hover{background:#444}
@media(max-width:639px){.preview-controls button{width:40px;height:40px}.preview-rail{margin-top:5px}.project-caption{padding-top:7px}.preview-dialog{width:100vw;height:100dvh;max-height:none;margin:0}.preview-dialog-header{padding:12px 18px}.preview-dialog-header h2{font-size:19px}.preview-dialog-stage{padding:0}.preview-dialog-footer{padding:15px 18px calc(15px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:14px}.preview-dialog-meta{flex-direction:row;justify-content:space-between;align-items:center;width:100%}.preview-dialog-controls{width:100%}.preview-website{margin-left:auto}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.name-track{transform:translateX(0)}.name-track span{font-size:14vw}.name-track span+span{display:none}.name-marquee{padding:0 var(--gutter)}}

.preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;pointer-events:none;transition:opacity .22s ease}.is-playing .preview-video{opacity:1}.project-cover .visit{left:auto;top:auto;right:14px;bottom:14px;transform:translateY(6px);padding:11px 16px;font-size:12px}.project:hover .project-cover .visit,.project-cover:focus-visible .visit{transform:translateY(0)}.project.is-playing .visit{opacity:0}.preview-controls .preview-play{font-size:14px;border:1px solid #dedede;margin-right:5px}.preview-play[aria-pressed="true"]{background:#1b1c1e;color:white;border-color:#1b1c1e}.preview-controls .preview-play[aria-pressed="true"]:hover{background:#444;color:white}.is-loading-preview .preview-play{opacity:.5}.preview-video:focus{outline:none}@media(prefers-reduced-motion:reduce){.preview-video{transition:none}}

@media(max-width:639px){.preview-controls button{width:44px;height:44px}}

/* Portrait windows keep a little extra headroom and place the role below the name. */
@media(max-aspect-ratio:1/1){.hero-portrait{top:0;height:120%}.name-marquee{top:49%;bottom:auto}.name-track span{font-size:24vw}.hero-role{left:var(--gutter);right:auto;top:auto;bottom:17%;font-size:clamp(24px,3.5vw,36px)}}
@media(max-width:639px) and (min-aspect-ratio:1/1){.hero-role{left:auto;right:var(--gutter);top:35%;bottom:auto;font-size:20px}.name-track span{font-size:19vw}.site-header{padding-top:18px}}

@media(prefers-reduced-motion:reduce){.name-track span{font-size:14vw}}

/* Keep the supporting role clear of the large name in panoramic windows. */
@media(min-aspect-ratio:5/2){.hero-role{top:16%;font-size:24px;line-height:1.3}}

/* The offer lives below the contact invitation, with a direct /offer/ entry point. */
.offer{margin-top:clamp(60px,7vw,110px);padding-top:38px;border-top:1px solid var(--line);scroll-margin-top:32px;outline:none}
.offer-eyebrow{font-size:13px;margin:0 0 26px;color:#656565}
.offer-heading h2{font-size:clamp(36px,4.5vw,74px);font-weight:400;line-height:1.04;letter-spacing:-.055em;margin:0;max-width:1100px}
.offer-message{max-width:690px;font-size:clamp(17px,1.55vw,22px);line-height:1.5;margin:25px 0 0;color:#555}
.offer-content{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(36px,7vw,120px);margin-top:52px;align-items:start}
.offer h3{font-size:16px;line-height:1.4;font-weight:400;letter-spacing:-.015em;margin:0 0 22px}
.offer-painpoints{list-style:none;margin:0;padding:0}
.offer-painpoints li{display:grid;grid-template-columns:28px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.offer-number{font-size:12px;color:#777;line-height:1.9;font-variant-numeric:tabular-nums}
.offer-painpoints h4{font-size:clamp(20px,1.65vw,25px);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:0 0 9px}
.offer-painpoints p{max-width:540px;font-size:15px;line-height:1.5;color:#606060;margin:0}
.offer-pricing{background:#f2f2ef;padding:clamp(24px,2.5vw,40px)}
.offer-pricing h3{margin-bottom:28px}
.offer-build{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-bottom:22px;border-bottom:1px solid #d2d2cf}
.offer-build>strong{font-size:60px;line-height:1;font-weight:700;letter-spacing:-.07em;color:#000}
.offer-build>span{font-size:17px;font-weight:700;color:#000}
.offer-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:16px 18px;background:var(--ink);color:white;font-size:15px;line-height:1.4;transition:background .2s ease}
.offer-cta:hover{background:#414345}
.offer-cta>span{font-size:22px}
.offer-work-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:14px 0 2px;font-size:14px;line-height:1.5}
.offer-work-link:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.offer-content{grid-template-columns:1fr;gap:35px;margin-top:38px}.offer-pricing{max-width:640px;width:100%}.offer-message{max-width:580px}.offer-painpoints h4{font-size:22px}}
@media(max-width:480px){.offer{scroll-margin-top:24px;padding-top:28px}.offer-eyebrow{margin-bottom:22px}.offer-heading h2{font-size:39px}.offer-message{margin-top:22px;font-size:17px}.offer-painpoints li{gap:10px;grid-template-columns:22px 1fr;padding:21px 0}.offer-painpoints h4{font-size:21px}.offer-pricing{padding:25px 22px}}

.offer-exchange{margin:25px 0 32px}.offer-exchange p{font-size:17px;line-height:1.5;color:#555;margin:0}.offer-exchange h4{font-size:clamp(27px,2.4vw,38px);font-weight:400;line-height:1.1;letter-spacing:-.045em;margin:0 0 14px}

.offer-monthly{padding:25px 0;border-bottom:1px solid #ccc}.offer-monthly h4{font-size:19px;font-weight:400;margin:0 0 12px}.offer-monthly h4 strong{font-size:clamp(38px,3.5vw,52px);font-weight:400;letter-spacing:-.05em}.offer-monthly p{font-size:15px;line-height:1.5;color:#555;margin:0}.offer-monthly .offer-monthly-label{font-size:18px;color:var(--ink);margin-bottom:8px}
