:root{--black:#0b0b0b;--white:#f5f5f5;--blue:#2563eb;--gray:#6b7280;--line:#292929;--body:'DM Sans',Arial,sans-serif;--heading:'Montserrat',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--black);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #86aaff;outline-offset:5px}::selection{background:var(--blue);color:#fff}.wrap{max-width:1320px;margin:auto;padding-left:56px;padding-right:56px}.blue{color:var(--blue)}.muted{color:#85858b}.skip{position:fixed;top:-80px;left:20px;padding:12px;background:var(--blue);z-index:100}.skip:focus{top:10px}.header{border-bottom:1px solid var(--line);background:var(--black)}.header-inner{height:102px;display:flex;align-items:center;justify-content:space-between}.brand{width:175px;display:block}.brand img{width:100%;height:59px;object-fit:contain}nav{display:flex;align-items:center;gap:38px;font-size:14px}nav a:hover,.text-link:hover{color:#85aaff}.nav-cta{border:1px solid #494949;padding:13px 21px;display:flex;gap:26px;align-items:center}.nav-cta span{font-size:21px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:60px;padding-top:80px;padding-bottom:85px;min-height:710px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;margin:0 0 25px}.hero .eyebrow{display:flex;align-items:center;gap:11px}.dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--heading);line-height:1.12;letter-spacing:-1.5px}h1{font-size:clamp(48px,5.6vw,76px);font-weight:800;margin-bottom:27px;letter-spacing:-3.5px}h1 span{color:var(--blue)}.intro{font-size:16px;color:#b8b8bc;max-width:435px;line-height:1.8;margin-bottom:33px}.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.button{padding:16px 22px;font-size:13px;font-weight:600;display:inline-flex;justify-content:space-between;align-items:center;gap:25px;border:1px solid transparent;transition:background .18s,transform .18s}.button:hover{transform:translateY(-2px)}.primary{background:var(--blue);color:#fff}.primary:hover{background:#1d4ed8}.text-link{font-size:13px;font-weight:500}.hero-art{position:relative;padding:20px 0 50px;align-self:center;height:474px;border-top:1px solid #404040;border-bottom:1px solid #404040}.art-top,.art-bottom{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1.4px;color:#98989c}.web-preview{position:absolute;left:0;top:69px;width:92%;border:1px solid #434343;box-shadow:0 12px 40px #0005}.web-preview>img{width:100%;height:258px;object-fit:cover;object-position:top}.window-bar{background:#212124;height:25px;padding:0 9px;display:flex;align-items:center;gap:5px}.window-bar i{width:4px;height:4px;background:#74747b;border-radius:50%}.window-bar span{font-size:6px;letter-spacing:1px;margin:auto}.bag-preview{position:absolute;right:-8px;bottom:26px;width:35%;padding:0;border:5px solid var(--black);background:var(--black);box-shadow:-10px 10px 30px #0007;transform:rotate(5deg);transition:transform .2s}.bag-preview:hover{transform:rotate(0deg)}.art-label{position:absolute;left:0;bottom:60px;font-family:var(--heading);font-size:21px;line-height:1.25;letter-spacing:-.5px}.art-label b{color:var(--blue)}.art-bottom{position:absolute;bottom:15px;left:0;width:100%}.art-bottom span:last-child{font-size:17px;color:var(--blue)}.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.statement .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:25px;padding-bottom:25px;font-family:var(--heading);font-weight:800;font-size:22px;letter-spacing:-.7px}.statement-mark{font-size:34px!important;font-weight:400}.section{padding-top:100px;padding-bottom:100px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}.section-heading h2{font-size:45px;margin-bottom:0;line-height:1.17;font-weight:700}.section-heading>p{font-size:14px;line-height:1.8;color:#a4a4ab;max-width:310px;margin:0 0 3px}.projects{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:start}.project-image{display:block;width:100%;background:#161616;border:1px solid #333;overflow:hidden;position:relative;padding:0;text-align:left}.project-web .project-image{height:390px;padding:25px 20px 0;background:#202120}.project-browser{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;margin-bottom:12px;color:#c7c7c7}.project-web .project-image>img:not(.phone){width:100%;border-radius:4px;border:1px solid #777;transition:transform .4s}.project-web .project-image:hover>img:not(.phone){transform:translateY(-8px)}.phone{position:absolute;right:14px;bottom:-55px;width:26%;border:5px solid #111;border-radius:18px;box-shadow:0 8px 30px #0008}.project-bag{margin-top:68px}.project-bag .project-image{height:450px}.project-bag .project-image img{width:100%;height:100%;object-fit:cover;object-position:center 27%;transition:transform .4s}.project-bag .project-image:hover img{transform:scale(1.025)}.image-action{position:absolute;right:16px;bottom:16px;background:var(--blue);color:#fff;padding:8px 13px;font-size:11px}.project-info{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-top:28px}.project-info .eyebrow{color:#8a8a94;font-size:9px;margin-bottom:10px}.project-info h3{font-size:23px;letter-spacing:-.7px;margin:0 0 14px}.project-info p:not(.eyebrow){font-size:13px;line-height:1.8;color:#b4b4bb;margin-bottom:22px;max-width:360px}.round-link{display:grid;place-items:center;border:1px solid #484848;border-radius:50%;width:40px;height:40px;flex:0 0 40px;background:none;font-size:22px}.round-link:hover{background:var(--blue);border-color:var(--blue)}.project-meta{border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:.75px;color:#98989f}.portfolio-note{font-size:11px;color:#929299;margin:40px 0 0;max-width:750px;line-height:1.8}.services{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0f0f0f}.service{display:grid;grid-template-columns:55px 1fr 1.2fr 35px;gap:24px;padding:33px 0;border-top:1px solid #363636;align-items:start}.service:last-child{border-bottom:1px solid #363636}.service-number{font-size:12px;color:var(--blue);padding-top:6px}.service h3{font-size:25px;letter-spacing:-.8px;margin:0;padding-top:3px}.service p{font-size:14px;line-height:1.8;color:#b6b6bc;margin-bottom:14px;max-width:440px}.service-tags{font-size:8px;letter-spacing:1px;color:#909097}.service-arrow{font-size:27px;line-height:1.3;color:#73737b}.approach{display:grid;grid-template-columns:.9fr 1.1fr;gap:85px}.approach h2{font-size:39px;line-height:1.25}.steps article{padding:0 0 25px 45px;position:relative;margin-bottom:26px;border-bottom:1px solid var(--line)}.steps article:last-child{margin-bottom:0}.steps article>span{position:absolute;left:0;top:3px;color:var(--blue);font-size:11px}.steps h3{font-size:19px;letter-spacing:-.5px;margin-bottom:11px}.steps p{font-size:13px;color:#b4b4bc;line-height:1.8;margin-bottom:0}.contact{background:var(--blue);padding:65px 0}.contact .eyebrow{color:#d5e2ff}.contact-main{display:flex;align-items:center;justify-content:space-between}.contact h2{font-size:clamp(42px,5.8vw,78px);font-weight:800;letter-spacing:-3px;line-height:1.15;margin-bottom:40px}.contact h2 span{color:#bdd2ff}.contact-arrow{font-size:140px;font-family:Arial,sans-serif;line-height:1;align-self:flex-start;margin-top:-16px}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid #ffffff50;padding-top:30px}.contact-bottom p{font-size:14px;line-height:1.8;margin:0;color:#eef3ff}.contact-links{display:flex;gap:12px}.white{background:var(--white);color:var(--black)}.outline{border-color:#ffffff90;color:#fff}.outline:hover{background:#ffffff18}.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:35px;padding-bottom:35px;flex-wrap:wrap}.footer .brand{width:140px}.footer p{font-size:10px;letter-spacing:.7px;color:#b7b7be;margin:0}.footer>a:not(.brand){font-size:11px}.footer>span{font-size:10px;color:#929299}dialog{padding:0;max-width:1000px;width:calc(100% - 40px);max-height:90vh;color:var(--white);background:#111;border:1px solid #444}dialog::backdrop{background:#000d}.dialog-close{position:sticky;top:12px;float:right;margin:12px 12px -52px 0;z-index:2;width:40px;height:40px;border:1px solid #666;background:#111;border-radius:50%}.dialog-content{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:45px;padding:36px}.dialog-content>img{width:100%}.dialog-content h2{font-size:33px}.dialog-content p:not(.eyebrow){font-size:14px;color:#bdbdc4;line-height:1.8}.dialog-content .dialog-note{font-size:11px!important}.dialog-content .button{margin-top:28px}.dialog-content .text-link{display:block;color:#9bbaff}body.modal-open{overflow:hidden}
@media(min-width:1500px){.hero{min-height:750px}}
@media(max-width:1050px){.wrap{padding-left:35px;padding-right:35px}.hero{gap:35px;min-height:640px;padding-top:60px;padding-bottom:60px}h1{font-size:58px}.hero-art{height:420px}.web-preview>img{height:224px}.art-label{font-size:17px}.hero-actions{gap:18px}.text-link{font-size:12px}.projects{gap:25px}.project-web .project-image{height:320px}.project-bag .project-image{height:390px}.service{grid-template-columns:30px 1fr 1.2fr 25px;gap:20px}.contact-links{flex-direction:column}.contact-arrow{font-size:105px}.footer{gap:18px}}
@media(max-width:760px){html{scroll-padding-top:25px}.wrap{padding-left:23px;padding-right:23px}.header-inner{height:79px;position:relative}.brand{width:143px}.brand img{height:48px}.menu-toggle{display:flex;gap:15px;align-items:center;background:none;border:1px solid #444;padding:8px 12px;font-size:12px}.menu-toggle span{font-size:18px}nav{display:none;position:absolute;left:0;right:0;top:79px;z-index:10;padding:22px;background:#111;border-bottom:1px solid #444;gap:22px;align-items:stretch}nav.open{display:flex;flex-direction:column}.nav-cta{justify-content:space-between}.hero{display:flex;flex-direction:column;gap:50px;align-items:stretch;padding-top:42px;padding-bottom:45px}.hero .eyebrow{font-size:8px;letter-spacing:1.65px;margin-bottom:25px}h1{font-size:clamp(45px,11.9vw,72px);letter-spacing:-2.5px;line-height:1.09;margin-bottom:24px}.intro{font-size:14px;max-width:450px;margin-bottom:26px}.hero-actions{gap:19px}.button{font-size:12px;padding:14px 17px;gap:18px}.hero-art{width:100%;max-width:510px;height:380px;align-self:center}.web-preview{top:58px;width:89%}.web-preview>img{height:185px}.bag-preview{right:0;bottom:24px;width:31%}.art-label{bottom:60px;font-size:18px}.art-top,.art-bottom{font-size:7px}.statement .wrap{gap:10px;padding-top:20px;padding-bottom:20px;font-size:clamp(10px,3.2vw,19px);letter-spacing:-.35px}.statement-mark{font-size:23px!important}.section{padding-top:60px;padding-bottom:60px}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:33px;letter-spacing:-1.2px}.section-heading>p{margin-top:20px;font-size:13px;max-width:none}.eyebrow{font-size:9px;margin-bottom:18px}.projects{grid-template-columns:1fr;gap:40px}.project-web .project-image{height:330px}.project-bag{margin-top:0}.project-bag .project-image{height:450px}.project-info{margin-top:22px}.project-info h3{font-size:22px}.project-meta{font-size:7px;letter-spacing:.3px}.portfolio-note{margin-top:27px}.service{grid-template-columns:25px 1fr 20px;gap:13px;padding:25px 0}.service h3{font-size:22px;grid-column:2}.service>div{grid-column:2;grid-row:2}.service p{font-size:13px}.service-arrow{grid-column:3;grid-row:1}.service-tags{font-size:7px;letter-spacing:.5px}.approach{display:block}.approach h2{font-size:33px;margin-bottom:35px}.steps article{padding-left:40px}.contact{padding:47px 0}.contact h2{font-size:clamp(40px,10.8vw,68px);letter-spacing:-2px;margin-bottom:30px}.contact-arrow{font-size:70px;margin-top:0}.contact-bottom{display:block;padding-top:23px}.contact-bottom p{font-size:13px;margin-bottom:25px}.contact-links{flex-direction:row;flex-wrap:wrap;gap:10px}.contact-links .button{flex:1;min-width:145px;font-size:11px;padding:14px 12px;gap:10px}.footer{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:25px;padding-bottom:25px}.footer .brand{width:125px}.footer p{text-align:right;font-size:8px}.footer>a:not(.brand){font-size:10px}.footer>span{text-align:right;font-size:8px}.dialog-content{grid-template-columns:1fr;padding:25px;gap:28px}.dialog-content h2{font-size:27px}.dialog-content>img{max-height:60vh;object-fit:contain}}
@media(max-width:370px){.wrap{padding-left:18px;padding-right:18px}.hero-actions{gap:15px}.hero-art{height:340px}.web-preview>img{height:185px}.art-label{font-size:15px}.project-web .project-image{height:270px}.project-bag .project-image{height:390px}.contact-arrow{font-size:52px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
/* Light canvas, with the original dark brand header and footer. */
body{background:#f5f5f5;color:#0b0b0b}
.header,.footer-shell{background:#0b0b0b;color:#f5f5f5}
.skip{color:#fff}
.intro,.section-heading>p,.project-info p:not(.eyebrow),.service p,.steps p{color:#515763}
.hero .eyebrow{color:#515763}
.hero .text-link:hover{color:#2563eb}
.hero-art{border-color:#c5c9d0}
.art-top,.art-bottom{color:#626976}
.window-bar{color:#f5f5f5}
.web-preview{border-color:#bfc4cc;box-shadow:0 12px 32px #00000012}
.bag-preview{border-color:#f5f5f5;box-shadow:-8px 8px 24px #00000020}
.statement{border-color:#d3d5da}
.light-middle{background:#f5f5f5;color:#0b0b0b}
.eyebrow,.project-info .eyebrow,.service-tags,.project-meta,.portfolio-note{color:#606672}
.muted{color:#656b76}
.project-meta,.steps article{border-color:#d3d5da}
.round-link{border-color:#b9bec8}
.round-link:hover{color:#fff;border-color:#2563eb}
.services{background:#eeeeef;border-color:#d5d7dc}
.service{border-color:#ccd0d6}
.service-arrow{color:#6b7280}
.contact{background:#f5f5f5;border-top:1px solid #d3d5da}
.contact .eyebrow{color:#2563eb}
.contact h2 span,.contact-arrow{color:#2563eb}
.contact-bottom{border-color:#cdd1d8}
.contact-bottom p{color:#515763}
.contact .white{background:#2563eb;color:#fff}
.contact .white:hover{background:#1d4ed8}
.contact .outline{border-color:#2563eb;color:#2563eb}
.contact .outline:hover{background:#e7edfa}
@media(max-width:760px){nav{color:#f5f5f5}}