:root{--ex-ink:#25251f;--ex-pearl:#fbfaf6;--ex-bronze:#8d7155;--ex-line:#dcdcd3}
html{scroll-padding-top:108px}body{color:var(--ex-ink)}
body .header.ex-header,body[data-page="home"] .header.ex-header{position:sticky;top:0;height:90px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:20px 5%;background:#ffffffed;backdrop-filter:blur(14px);z-index:30;gap:30px}
.ex-header .brand{width:174px;flex:none;margin:0}.ex-header nav{margin:0;gap:34px;line-height:1}.ex-header nav a{font-size:10px;line-height:2;letter-spacing:1px;position:relative}.ex-header nav a:after{content:'';height:1px;background:currentColor;position:absolute;bottom:-5px;left:0;width:100%;transform:scaleX(0);transform-origin:right;transition:transform .35s}.ex-header nav a:hover:after,.ex-header nav a:focus-visible:after{transform:scaleX(1);transform-origin:left}.ex-contact-nav>span{margin-left:9px}.ex-scroll-progress{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--ex-bronze);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.experience-home{overflow:clip;background:#fff}.experience-home h2{font-family:var(--serif);font-size:28px;line-height:1.4;letter-spacing:.015em}.ex-hero{position:relative;isolation:isolate;min-height:650px;height:calc(100svh - 90px);max-height:1050px;background:var(--ex-pearl);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
#agency-ambient{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.ex-hero-content{position:relative;width:100%;padding:50px 6% 65px;z-index:2;pointer-events:none}.ex-hero-content>*{pointer-events:auto}.ex-hero-kicker{text-align:center;font-size:8px;letter-spacing:2px;margin-bottom:28px}.ex-hero h1{font:400 clamp(74px,8.6vw,132px)/1.02 var(--serif);letter-spacing:-.045em;margin:0}.ex-hero-line{display:block}.ex-hero h1 em{font-weight:400}.ex-hero-subtitle{font:400 12px/1.9 var(--sans);letter-spacing:.6px;max-width:480px;margin:29px auto 22px;text-align:center}.ex-arrow-link{display:inline-flex;align-items:center;justify-content:center;gap:27px;font:400 11px/1.6 var(--sans);letter-spacing:.3px;padding:10px 0;color:inherit}.ex-arrow-link>span{display:grid;place-items:center;flex:none;height:37px;width:37px;border:1px solid #aaa99b;border-radius:50%;font-size:17px;transition:transform .35s,background .35s,color .35s}.ex-arrow-link:hover>span,.ex-arrow-link:focus-visible>span{transform:rotate(45deg);background:var(--ex-ink);color:#fff}.ex-hero-bottom{position:absolute;bottom:24px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;z-index:3;font-size:8px;letter-spacing:1px}.ex-scroll-cue{display:flex;align-items:center;gap:18px;font-size:8px;letter-spacing:1.1px}.ex-scroll-cue span{display:block;width:1px;height:30px;background:#aaa99b;position:relative;overflow:hidden}.ex-scroll-cue span:after{content:'';position:absolute;left:0;right:0;height:12px;background:#272720;animation:ex-scroll-cue 2.3s infinite ease-in-out}.ex-hero-bottom button{display:flex;gap:10px;align-items:center;font-size:8px;letter-spacing:.5px;background:transparent;border:0;padding:12px 0}.ex-hero-bottom button [data-motion-icon]{font-size:13px}.ex-hero-bottom button:hover{text-decoration:underline;text-underline-offset:5px}
.ex-intro{min-height:400px;padding:85px 6% 95px}.df-statement .df-label,.ex-intro .df-label{text-align:center!important}.ex-intro .df-label{max-width:none;margin-bottom:33px;font-size:8px;letter-spacing:1.3px}.ex-intro h2{font-size:28px;line-height:1.5;max-width:720px;margin:auto}
.ex-section-heading{text-align:center;padding:0 0 70px}.ex-section-heading .df-label{font-size:8px;letter-spacing:1.3px;margin-bottom:25px}.ex-section-heading h2{margin:0}.ex-work{padding:60px 7% 100px;background:#fff}.ex-brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:55px 6%;max-width:1150px;margin:auto}.ex-brand{display:block;color:inherit;background:transparent;min-width:0;border-bottom:1px solid var(--ex-line);padding:0 0 24px}.ex-brand-mark{height:140px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;position:relative}.ex-brand-mark img{max-width:85%;width:auto;height:auto;max-height:56px;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}.ex-logo-angels,.ex-logo-agency{filter:brightness(0)}.ex-brand-mark .ex-logo-vhouse{height:48px;max-height:48px;width:48px;image-rendering:auto}.ex-brand-mark .ex-logo-angels{max-width:87%;max-height:38px}.ex-brand-mark .ex-logo-agency{max-width:74%;max-height:38px}.ex-brand:hover img,.ex-brand:focus-visible img{transform:translateY(-6px) scale(1.035)}.ex-brand-caption{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.5px;line-height:1.5;margin-top:6px}.ex-brand-arrow{font-size:17px;transition:transform .3s}.ex-brand:hover .ex-brand-arrow{transform:translate(3px,-3px)}.ex-brand>p{font-size:8px;letter-spacing:.2px;color:#77776c;margin-top:6px}.ex-work-end{text-align:center;margin:65px 0 0}
.ex-atmosphere{height:780px;position:relative;overflow:hidden;background:#fff;color:#fff;isolation:isolate;margin:0 0 100px}.ex-scene-media{position:absolute;inset:0;overflow:hidden;clip-path:inset(var(--scene-inset,0%) var(--scene-inset,0%));will-change:clip-path}.ex-scene-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#17221942,#18201710),linear-gradient(0deg,#12221950,transparent 60%)}.ex-scene-media img{width:100%;height:115%;object-fit:cover;object-position:center 51%;transform:translateY(var(--scene-y,-4%)) scale(var(--scene-scale,1.04));will-change:transform}.ex-scene-copy{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 7%;transform:translateY(var(--scene-copy-y,0px))}.ex-scene-copy .df-label{font-size:8px;letter-spacing:1.3px;margin-bottom:28px;color:white}.ex-scene-copy h2{font-size:clamp(62px,7.4vw,108px);line-height:1.06;letter-spacing:-.035em;color:white}
.ex-services{padding:50px 7% 105px;background:#fff}.ex-service-layout{max-width:1150px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;gap:11%}.ex-service-tabs{display:flex;flex-direction:column;justify-content:center}.ex-service-tabs>button{display:flex;align-items:center;gap:22px;text-align:left;padding:26px 0;border:0;border-top:1px solid var(--ex-line);background:transparent;color:#7b7b6d;position:relative}.ex-service-tabs>button:last-child{border-bottom:1px solid var(--ex-line)}.ex-service-tabs>button:before{content:'';position:absolute;top:-1px;left:0;height:1px;background:var(--ex-bronze);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .5s}.ex-service-tabs>button[aria-selected=true]:before{transform:scaleX(1)}.ex-service-tabs>button[aria-selected=true]{color:var(--ex-ink)}.ex-service-tabs>button>span:first-child{font-size:9px;letter-spacing:.7px}.ex-service-tabs>button>strong{font:400 23px/1.3 var(--serif);letter-spacing:.015em}.ex-service-tabs>button>span:last-child{margin-left:auto;font-size:22px;transition:transform .35s}.ex-service-tabs>button[aria-selected=true]>span:last-child{transform:rotate(45deg)}.ex-service-panel{min-height:390px;display:flex;flex-direction:column;justify-content:flex-start;background:transparent}.ex-service-orbit{height:130px;position:relative;isolation:isolate;margin-bottom:25px;overflow:hidden;display:flex;align-items:center;justify-content:center}.ex-orbit-circle{position:absolute;left:50%;top:50%;width:170px;height:78px;border:1px solid #b1a48e;border-radius:50%;transform:translate(-50%,-50%) rotate(-30deg);transition:transform .8s}.ex-orbit-circle:nth-child(2){transform:translate(-50%,-50%) rotate(35deg);opacity:.5}.ex-orbit-dot{height:7px;width:7px;border-radius:50%;background:#80674a;position:absolute;left:calc(50% + 59px);top:calc(50% - 20px);box-shadow:0 0 0 6px #d8d0c640;transition:transform .8s}.ex-orbit-word{font:400 8px/1 var(--sans);letter-spacing:2px;background:#fff;padding:7px 9px;z-index:2}.ex-service-panel[data-active=website] .ex-orbit-circle:first-child{transform:translate(-50%,-50%) rotate(35deg)}.ex-service-panel[data-active=website] .ex-orbit-dot{transform:translate(-120px,30px)}.ex-service-panel[data-active=growth] .ex-orbit-circle:first-child{transform:translate(-50%,-50%) rotate(80deg)}.ex-service-panel[data-active=growth] .ex-orbit-dot{transform:translate(-65px,50px)}.ex-service-panel[data-active=ai] .ex-orbit-circle:first-child{transform:translate(-50%,-50%) rotate(150deg)}.ex-service-panel[data-active=ai] .ex-orbit-dot{transform:translate(-100px,-25px)}.ex-service-detail h3{font:400 26px/1.4 var(--serif);letter-spacing:.015em;margin:0 0 21px}.ex-service-detail p{font:400 12px/2 var(--sans);color:#68685e;max-width:370px;min-height:96px}.ex-service-detail .ex-arrow-link{margin-top:18px}.ex-service-detail.is-changing{animation:ex-detail-in .4s ease both}
.df-about.ex-about{padding:95px 7% 115px;min-height:540px;background:var(--ex-pearl);text-align:center}.ex-about .df-label{text-align:center;margin-bottom:30px}.ex-about h2{font-size:28px;margin-bottom:32px}.ex-about p{font-size:12px;line-height:2;letter-spacing:.3px;margin-bottom:22px}.ex-about .ex-arrow-link{margin-top:12px}.ex-invitation{padding:115px 7% 130px;text-align:center;background:#fff}.ex-invitation h2{font-size:clamp(60px,7vw,98px);line-height:1.05;letter-spacing:-.035em;margin:0 0 28px}.ex-invitation .df-label{font-size:8px;letter-spacing:1.3px;margin-bottom:32px}.df-footer{border-top:1px solid var(--ex-line);min-height:310px;padding:65px 5% 50px}
.ex-motion-ready .ex-reveal{transition:opacity .9s var(--reveal-delay,0ms),transform .9s var(--reveal-delay,0ms);will-change:transform,opacity}.ex-motion-ready .ex-reveal:not(.is-visible){opacity:0;transform:translateY(35px)}.ex-motion-ready .ex-reveal.is-visible{opacity:1;transform:translateY(0)}.ex-motion-paused .ex-reveal{transition:none;opacity:1!important;transform:none!important}.ex-motion-paused .ex-scroll-cue span:after{animation:none}.ex-motion-paused .ex-scene-media,.ex-motion-paused .ex-scene-media img,.ex-motion-paused .ex-scene-copy{will-change:auto}.ex-motion-paused .ex-scene-media{clip-path:none!important}.ex-motion-paused .ex-scene-media img,.ex-motion-paused .ex-scene-copy{transform:none!important}
/* Actual marks on white replace every colored portfolio mockup stage. */
.portfolio-intro{padding-bottom:30px}.portfolio-title{margin-bottom:45px}.portfolio-cover{display:none}.client-section{padding-top:55px}.client-logos{border:0;gap:20px}.client-logos a{border:0!important;background:transparent!important;min-height:130px}.client-logos img.ex-logo-vhouse{width:40px;height:40px;max-height:40px}.client-logos .atelier-mark{filter:none}.portfolio-grid .project-stage{background:transparent!important;border-radius:0;padding:50px 15%;aspect-ratio:1.9;min-height:220px;border-bottom:1px solid var(--ex-line)!important;box-shadow:none}.project-stage:after{display:none!important}.project-stage .ex-project-logo{width:100%;height:72px;object-fit:contain;object-position:center;max-width:300px;transition:transform .6s}.project-stage .ex-logo-vhouse{width:58px;height:58px;max-width:58px}.project-stage .ex-project-product{height:180px;width:auto;max-width:90%;object-fit:contain;transition:transform .6s}.project-stage:hover .ex-project-logo,.project-stage:focus-visible .ex-project-logo{transform:translateY(-5px) scale(1.04)}.project-peek b{border:0!important}.preview-stage{background:transparent!important}.client-logos .agency-mark,.client-logos a[href="#project-angels"] img{filter:brightness(0)}.portfolio-end{background:#fff!important}
@keyframes ex-scroll-cue{0%{transform:translateY(-13px)}80%,100%{transform:translateY(35px)}}@keyframes ex-detail-in{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.ex-brand-grid{gap:40px 5%}.ex-service-layout{gap:6%}.ex-service-tabs>button>strong{font-size:21px}.ex-service-tabs>button{gap:15px}.ex-hero{min-height:610px}.ex-atmosphere{height:650px}.ex-header nav{gap:23px}}
@media(max-width:700px){body .header.ex-header,body[data-page="home"] .header.ex-header{height:105px;flex-direction:column;justify-content:center;gap:14px;padding:17px 5% 14px}.ex-header .brand{width:150px}.ex-header nav{gap:27px;margin:0}.ex-header nav a{font-size:8px;letter-spacing:.7px;line-height:1.5}.ex-contact-nav>span{margin-left:4px}.ex-hero{height:calc(100svh - 105px);min-height:590px;max-height:860px}.ex-hero-content{padding:40px 6% 90px}.ex-hero h1{font-size:clamp(60px,17.5vw,94px);line-height:1.08}.ex-hero-kicker{font-size:6.5px;letter-spacing:1.3px;margin-bottom:25px}.ex-hero-subtitle{font-size:10px;letter-spacing:.3px;line-height:1.9;max-width:290px;margin:28px auto 20px}.ex-arrow-link{font-size:10px;gap:20px}.ex-arrow-link>span{height:34px;width:34px;font-size:16px}.ex-hero-bottom{bottom:17px;left:6%;right:6%}.ex-scroll-cue{font-size:6px;letter-spacing:.7px;gap:11px}.ex-scroll-cue span{height:22px}.ex-hero-bottom button{font-size:7px;gap:7px}.ex-intro{min-height:360px;padding:80px 8%}.ex-intro .df-label{font-size:6.5px;letter-spacing:.8px;line-height:2}.ex-intro h2{font-size:23px;line-height:1.5}.ex-intro h2 br{display:none}.ex-work{padding:45px 7% 75px}.ex-section-heading{padding-bottom:43px}.ex-section-heading .df-label{font-size:7px;letter-spacing:1px;margin-bottom:22px}.ex-section-heading h2,.experience-home h2{font-size:24px}.ex-brand-grid{grid-template-columns:1fr 1fr;gap:33px 9%}.ex-brand{padding-bottom:20px}.ex-brand-mark{height:105px}.ex-brand-mark img{max-width:92%;max-height:38px}.ex-brand-mark .ex-logo-angels{max-width:95%;max-height:26px}.ex-brand-mark .ex-logo-agency{max-width:90%;max-height:32px}.ex-brand-mark .ex-logo-vhouse{height:36px;width:36px}.ex-brand-caption{font-size:8px;letter-spacing:.1px;gap:10px}.ex-brand-arrow{font-size:14px}.ex-brand>p{font-size:6.5px;line-height:1.7;letter-spacing:.1px;max-width:130px}.ex-work-end{margin-top:45px}.ex-atmosphere{height:570px;margin-bottom:75px}.ex-scene-copy{padding:45px 7%}.ex-scene-copy .df-label{font-size:6px;letter-spacing:.55px;line-height:2;max-width:250px}.experience-home .ex-scene-copy h2{font-size:58px;line-height:1.1}.ex-scene-media img{object-position:54% center}.ex-services{padding:15px 8% 70px}.ex-service-layout{grid-template-columns:1fr;gap:25px}.ex-service-tabs>button{padding:22px 0;gap:17px}.ex-service-tabs>button>strong{font-size:21px}.ex-service-tabs>button>span:first-child{font-size:8px}.ex-service-tabs>button>span:last-child{font-size:18px}.ex-service-panel{min-height:310px}.ex-service-orbit{height:100px;margin-bottom:18px}.ex-service-detail h3{font-size:24px}.ex-service-detail p{font-size:11px;line-height:1.95;min-height:66px}.ex-service-detail .ex-arrow-link{margin-top:15px}.df-about.ex-about{padding:75px 8% 85px;min-height:500px}.ex-about h2{font-size:23px;margin-bottom:27px}.ex-about p{font-size:11px;line-height:2}.ex-invitation{padding:85px 7% 100px}.experience-home .ex-invitation h2{font-size:60px;line-height:1.08}.ex-invitation .df-label{font-size:7px}.df-footer{min-height:295px}.portfolio-grid .project-stage{aspect-ratio:1.6;min-height:190px;padding:45px 12%}.project-stage .ex-project-logo{height:58px;max-width:240px}.client-logos{gap:5px}.client-logos a{min-height:100px;padding:24px 20px}.project-stage .ex-project-product{height:120px;max-width:100%}}
@media(max-width:360px){.ex-header nav{gap:23px}.ex-hero h1{font-size:58px}.ex-hero-kicker{font-size:6px;letter-spacing:.9px}.ex-hero-bottom{left:6%;right:6%}.ex-scroll-cue{font-size:5.5px}.ex-brand-caption{font-size:7.5px}.ex-service-tabs>button>strong{font-size:18px}.ex-service-tabs>button{gap:13px}.experience-home .ex-scene-copy h2{font-size:49px}.ex-brand>p{font-size:6.2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ex-reveal{opacity:1!important;transform:none!important;transition:none!important}.ex-scroll-cue span:after{animation:none}.ex-scene-media{clip-path:none!important;will-change:auto}.ex-scene-media img,.ex-scene-copy{transform:none!important;will-change:auto}.ex-service-detail.is-changing{animation:none}.ex-brand img,.ex-arrow-link>span,.ex-orbit-circle,.ex-orbit-dot{transition:none}.ex-brand:hover img{transform:none}}