:root{--black:#090909;--white:#f5f4f0;--soft:#e9e7e1;--muted:#73716c;--accent:#bb7448;--pad:clamp(24px,4.2vw,76px);--ease:cubic-bezier(.22,1,.36,1);--header:76px}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black)}body{margin:0;background:var(--white);color:var(--black);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}img{display:block;max-width:100%}.skip-link{position:fixed;top:-50px;left:16px;z-index:200;padding:10px 15px;background:#fff;color:#000}.skip-link:focus{top:12px}.label{margin:0;text-transform:uppercase;letter-spacing:.17em;font-size:9px;font-weight:600}.progress{position:fixed;z-index:150;inset:0 0 auto;height:2px;pointer-events:none}.progress i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.header{position:fixed;z-index:100;inset:2px 0 auto;height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-inline:var(--pad);color:#fff;transition:height .35s,background .35s,color .35s}.header.scrolled{height:64px;background:rgba(245,244,240,.9);backdrop-filter:blur(18px);color:var(--black)}.header.dark{background:rgba(9,9,9,.82);color:#fff}.logo{justify-self:start;display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:600}.logo i{width:20px;height:20px;border:1px solid currentColor;border-radius:50%;position:relative}.logo i:after{content:"";position:absolute;inset:4px;border:1px solid currentColor;border-radius:50%}.header nav{display:flex;gap:40px}.header nav a{font-size:11px;opacity:.65;transition:opacity .25s}.header nav a:hover{opacity:1}.header-cta{justify-self:end;padding:10px 15px;border:1px solid currentColor;border-radius:99px;font-size:10px}.menu,.mobile-nav{display:none}
.hero{position:relative;height:130vh;background:var(--black);color:#fff}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.54),transparent 60%);pointer-events:none}#webCanvas,#contactCanvas{position:absolute;inset:0;width:100%;height:100%}.hero-inner{position:sticky;z-index:2;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--header) var(--pad) 34px}.hero .label{color:#888}.hero h1{margin:7vh 0 auto;font:400 clamp(68px,10.2vw,168px)/.85 "Manrope",sans-serif;letter-spacing:-.075em}.hero h1 span,.intro h2 span{display:block;overflow:hidden}.hero h1 b,.intro h2 b{display:block;font-weight:inherit}.hero h1 b{transform:translateY(110%);animation:rise 1.15s var(--ease) forwards}.hero h1 span:nth-child(2) b{animation-delay:.12s;color:#d0926b}@keyframes rise{to{transform:none}}.hero-foot{display:flex;justify-content:space-between;align-items:end;padding-left:32%}.hero-foot p{max-width:380px;margin:0;color:#aaa;font-size:15px}.hero-foot a{width:120px;height:120px;border:1px solid #444;border-radius:50%;display:flex;flex-direction:column;justify-content:space-between;padding:22px;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.hero-foot i{align-self:end;font-style:normal;font-size:20px}
.intro{height:200vh;background:var(--white)}.intro-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:var(--header) var(--pad);overflow:hidden}.intro .label{color:var(--accent)}.intro h2{margin:42px 0 0;font:400 clamp(58px,8.5vw,138px)/.9 "Manrope",sans-serif;letter-spacing:-.07em}.intro h2 b{transform:translateY(108%)}.intro-copy{align-self:flex-end;width:min(420px,34vw);margin:48px 7vw 0 0;color:var(--muted);font-size:16px}.thread{position:absolute;left:var(--pad);right:var(--pad);bottom:13vh;height:1px;background:#d6d3cc}.thread i{display:block;width:var(--line,0%);height:1px;background:var(--accent)}.thread b{position:absolute;left:var(--line,0%);top:50%;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}
.work{padding:20vh var(--pad);background:var(--white)}.section-head{max-width:1450px;margin:0 auto 24vh}.section-head .label,.pricing .label{color:var(--accent)}.section-head h2,.pricing h2{margin:40px 0 35px;font:400 clamp(64px,9vw,145px)/.87 "Manrope",sans-serif;letter-spacing:-.075em}.section-head h2 em,.contact h2 em,.process h2 em{color:var(--accent);font-style:normal}.section-head>p:last-child{width:min(400px,100%);margin-left:auto;color:var(--muted);font-size:16px}.project{max-width:1500px;margin:0 auto 28vh;display:grid;grid-template-columns:minmax(240px,.7fr) 1.7fr;gap:clamp(40px,8vw,140px);align-items:center}.project-two{margin-bottom:5vh}.project-copy .label{color:var(--muted)}.project-copy h3{margin:28px 0 30px;font:400 clamp(46px,5vw,80px)/.9 "Manrope",sans-serif;letter-spacing:-.06em}.project-copy>p:not(.label){max-width:340px;color:var(--muted);font-size:14px}.project-copy>a{display:inline-flex;gap:28px;margin-top:35px;padding-bottom:8px;border-bottom:1px solid #aaa;font-size:11px}.viewer{min-width:0}.browser-frame{height:min(72vh,760px);min-height:520px;background:#080808;box-shadow:0 35px 90px rgba(20,18,13,.18);overflow:hidden}.browser-bar{height:36px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 14px;background:#171717;color:#777;font-size:8px;letter-spacing:.08em}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#454545}.browser-bar span{text-align:center}.browser-bar small{text-align:right}.viewer-screen{height:calc(100% - 36px);overflow:hidden;cursor:grab;outline:0;position:relative}.viewer-screen:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.viewer-screen.dragging{cursor:grabbing}.viewer-screen img{width:100%;height:auto;max-width:none;user-select:none;transform:translate3d(0,0,0);transition:transform .65s var(--ease);will-change:transform}.viewer-screen.dragging img{transition:none}.viewer-controls{display:grid;grid-template-columns:auto 34px 1fr 34px 38px;gap:12px;align-items:center;margin-top:18px}.viewer-controls>span{min-width:150px;display:flex;flex-direction:column}.viewer-controls b{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}.viewer-controls small{margin-top:3px;color:var(--muted);font-size:8px}.step{width:34px;height:34px;border:1px solid #ccc;border-radius:50%;background:transparent;cursor:pointer;transition:.25s}.step:hover:not(:disabled){background:var(--black);border-color:var(--black);color:#fff}.step:disabled{opacity:.25}.range{width:100%;accent-color:var(--accent)}.viewer-controls strong{text-align:right;font-size:9px;font-weight:500}[data-reveal]{opacity:0;transform:translateY(52px);transition:opacity .85s var(--ease),transform 1s var(--ease)}[data-reveal].visible{opacity:1;transform:none}
.process{height:430vh;background:var(--black);color:#fff}.process-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:calc(var(--header) + 5vh) var(--pad) 6vh;display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:9vw}.process-heading .label{color:#777}.process h2{margin:36px 0 0;font:400 clamp(54px,7vw,112px)/.9 "Manrope",sans-serif;letter-spacing:-.07em}.process ol{position:relative;height:50vh;margin:0;padding:0;list-style:none}.process li{position:absolute;inset:0;display:grid;grid-template-columns:50px 1fr;align-content:center;opacity:0;transform:translateY(70px);transition:opacity .48s var(--ease),transform .68s var(--ease)}.process li.active{opacity:1;transform:none}.process li.past{opacity:0;transform:translateY(-70px)}.process li>span{padding-top:12px;color:var(--accent);font-size:10px}.process h3{margin:0;font:400 clamp(70px,9vw,145px)/.9 "Manrope",sans-serif;letter-spacing:-.075em}.process li p{max-width:430px;margin:30px 0 0;color:#888;font-size:16px}.process-count{position:absolute;right:var(--pad);bottom:5vh;display:flex;align-items:center;gap:13px;font-size:9px;color:#666}.process-count b{color:#fff;font-weight:500}.process-count i{width:120px;height:1px;background:#333}.process-count i span{display:block;width:var(--step,25%);height:100%;background:var(--accent);transition:width .5s var(--ease)}
.pricing{padding:24vh var(--pad);background:var(--white)}.pricing-head{max-width:1500px;margin:auto}.pricing h2{font-size:clamp(58px,8vw,126px)}.plans{max-width:1500px;margin:13vh auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8vw}.plans article{position:relative}.plans article>p{margin:0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.15em}.plans h3{margin:28px 0 0;font:400 clamp(78px,9vw,138px)/1 "Manrope",sans-serif;letter-spacing:-.07em}.plans article>span{display:block;margin-top:4px;color:var(--muted);font-size:12px}.plans ul{list-style:none;margin:50px 0;padding:0;columns:2;column-gap:30px}.plans li{margin-bottom:10px;color:#555;font-size:12px}.plans li:before{content:"·";margin-right:8px;color:var(--accent)}.plans a{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid #ccc;border-bottom:1px solid #ccc;font-size:11px}.plans a i{font-style:normal;font-size:16px}.care{max-width:1500px;margin:75px auto 0;color:var(--muted);font-size:10px}
.contact{position:relative;min-height:105vh;padding:22vh var(--pad) 0;background:var(--black);color:#fff;overflow:hidden}.contact:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,9,.45),rgba(9,9,9,.8));pointer-events:none}.contact-inner{position:relative;z-index:2;max-width:1500px;margin:auto}.contact .label{color:#777}.contact h2{margin:45px 0 36px;max-width:1250px;font:400 clamp(60px,8.5vw,138px)/.88 "Manrope",sans-serif;letter-spacing:-.075em}.contact-inner>p:not(.label){max-width:450px;color:#888;font-size:16px}.contact-actions{display:flex;gap:12px;margin-top:55px}.contact-actions a{width:190px;padding:17px;border:1px solid #444;border-radius:99px;display:flex;justify-content:space-between;font-size:10px;transition:.25s}.contact-actions a:first-child{background:#fff;color:#000;border-color:#fff}.contact-actions a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}footer{position:relative;z-index:2;max-width:1500px;margin:18vh auto 0;min-height:130px;border-top:1px solid #292929;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#666;font-size:9px}footer>a{justify-self:start;color:#fff;text-transform:uppercase;letter-spacing:.13em}footer p{margin:0}footer>span{justify-self:end}
@media(max-width:900px){.header{grid-template-columns:1fr auto}.header>nav,.header-cta{display:none}.menu{display:flex;width:38px;height:38px;border:1px solid currentColor;border-radius:50%;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px}.menu i{width:14px;height:1px;background:currentColor}.mobile-nav{position:fixed!important;display:flex!important;inset:64px 0 auto;padding:20px var(--pad) 30px;flex-direction:column;background:rgba(9,9,9,.96);color:#fff;transform:translateY(-130%);opacity:0;pointer-events:none;transition:.45s var(--ease)}.mobile-nav.open{transform:none;opacity:1;pointer-events:auto}.mobile-nav a{padding:14px 0;border-bottom:1px solid #292929}.hero-foot{padding-left:0}.intro-copy{width:min(420px,60vw);margin-right:0}.project{grid-template-columns:1fr;gap:50px}.project-copy{display:grid;grid-template-columns:1fr 1fr;align-items:end}.project-copy .label,.project-copy h3{grid-column:1/-1}.project-copy>p:not(.label){margin:0}.project-copy>a{justify-self:end}.process-stage{grid-template-columns:1fr}.process-heading{position:absolute;left:var(--pad);top:14vh}.process ol{margin-top:30vh}.process h2{font-size:clamp(50px,10vw,80px)}.plans{gap:4vw}}
@media(max-width:620px){:root{--pad:20px}.logo{font-size:9px}.hero{height:120vh}.hero h1{font-size:clamp(58px,17vw,86px)}.hero-foot p{max-width:220px;font-size:12px}.hero-foot a{width:88px;height:88px;padding:15px;font-size:7px}.intro{height:170vh}.intro h2{font-size:clamp(46px,14vw,68px)}.intro-copy{align-self:flex-start;width:85%;margin-top:35px}.section-head h2,.pricing h2{font-size:clamp(54px,15vw,76px)}.section-head>p:last-child{margin-left:0}.project{margin-bottom:22vh}.project-copy{display:block}.project-copy h3{font-size:48px}.project-copy>a{margin-top:24px}.browser-frame{height:60vh;min-height:410px}.viewer-controls{grid-template-columns:34px 1fr 34px 34px}.viewer-controls>span{grid-column:1/-1;margin-bottom:5px}.plans{grid-template-columns:1fr;gap:100px}.plans ul{columns:1}.process{height:390vh}.process-stage{padding-top:100px}.process-heading{top:105px}.process h2{font-size:50px}.process ol{height:45vh;margin-top:35vh}.process h3{font-size:70px}.process li{grid-template-columns:35px 1fr}.contact h2{font-size:clamp(55px,15vw,78px)}.contact-actions{flex-direction:column}.contact-actions a{width:100%}footer{grid-template-columns:1fr 1fr;gap:15px}footer p{grid-column:1/-1}footer>span{justify-self:end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.hero h1 b,.intro h2 b{transform:none!important}[data-reveal]{opacity:1;transform:none}}