/* Homepage styles. Loaded only by /index.html, after the shared chrome
   (assets/chrome/). Breakpoints: desktop >=1025px, tablet 768-1024px,
   mobile <=767px. NOTE the 7-day asset cache: to change this file, re-add it
   under a NEW filename (home-2.css) and update the <link> in index.html. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#e9e9e7;color:#000;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(16px,.8vw,22px);font-weight:400;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6,p,ul,figure,blockquote{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;border:0}
strong{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.label{font-size:clamp(16px,.8vw,22px);font-weight:500;line-height:1.2}
.icon{display:block;width:1em;height:1em;fill:currentColor;flex-shrink:0}

/* text link with a trailing north-east arrow */
.btn-arrow{display:inline-flex;align-items:center;gap:15px;font-size:clamp(16px,.8vw,22px);font-weight:500;line-height:1.2;transition:color .3s}
.btn-arrow .icon{font-size:16px}

/* scroll-driven effects (home-1.js) ease towards each new value */
span.fx-t{display:block}
.fx-t{transition:transform 1s cubic-bezier(0,.33,.07,1.03),opacity 1s cubic-bezier(0,.33,.07,1.03)}

/* entrance animations: hidden until scrolled into view, then played once */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.anim-fadeIn{animation:fadeIn 1.25s both}
.anim-fadeInUp{animation:fadeInUp 1.25s both}
.anim-fadeInDown{animation:fadeInDown 1.25s both}
.anim-zoomIn{animation:zoomIn 1.25s both}
@media (min-width:1025px){.js [data-anim]:not(.is-in){visibility:hidden}}
@media (max-width:1024px){.js [data-anim-sm]:not(.is-in){visibility:hidden}}

/* ---------- hero ---------- */
.hero{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:73vh;padding:0 30px;background:#000}
.hero-copy{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;flex:1 0 auto}
.hero h1{font-size:clamp(70px,3vw,90px);font-weight:300;line-height:1.2;color:#fff}
.hero-lede{width:clamp(460px,30vw,480px);max-width:clamp(460px,30vw,480px);font-size:clamp(20px,.9vw,28px);line-height:1.3;letter-spacing:0;color:#e9e9e7}
.hero-globe{display:flex;flex-direction:column;flex:0 1 auto;width:800px}
.world-wrapper{width:100%;aspect-ratio:7/8}
.world-wrapper canvas{display:block}
.hero-social{display:flex;flex-direction:column;justify-content:center;flex:0 0 auto}
.hero-social ul{display:grid;row-gap:15px}
.hero-social li{height:23.4px}
.hero-social a{display:flex;font-size:clamp(18px,.8vw,20px);color:#fff}

/* ---------- services words + intro (desktop only) ---------- */
.words{display:none}
.words h2{position:relative;z-index:7;text-align:center;font-size:clamp(80px,6vw,120px);font-weight:300;line-height:1.2;color:#fff}
.words-gap{height:20vh}
.intro{display:flex;flex-direction:column;margin-bottom:20vh;padding:0 20% 40px}
.intro h3{font-size:clamp(32px,1.5vw,50px);font-weight:400;line-height:1.3;color:#e9e9e7}
.intro p{margin-bottom:1em;font-size:clamp(20px,.9vw,28px);line-height:1.5;color:#e9e9e7}
.intro-links{position:relative}
.intro-links .btn-arrow{color:#e9e9e7}
.intro-links .btn-arrow:hover{color:#fff}
.intro-link + .intro-link{position:absolute;top:0;left:140px}

/* ---------- our services ---------- */
.services{display:flex;align-items:flex-start;padding:5vh 0 8vh;border-top:1px solid #000}
.services-label{width:25%;padding:0 30px}
.services-grid{display:flex;flex-wrap:wrap;gap:30px;width:75%;padding:0 30px;align-self:stretch}
.service{position:relative;display:flex;flex-direction:column;gap:20px;flex:1 0 auto;width:40%;padding:30px;border-radius:7px}
.service--wide{width:50%}
.service::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff url(/assets/uploads/2023/10/arrow-link.svg) calc(100% - 10px) 10px/0 auto no-repeat;opacity:.5;transition:background .3s,opacity .3s}
.service > *{position:relative}
.service-icon{align-self:flex-start;display:block;line-height:0}
.service-icon img{display:block;width:70px;height:auto}
.service-gap{height:10vh}
.service h3{font-size:clamp(32px,1.5vw,50px);font-weight:400;line-height:1.3}
.service p{margin-bottom:1em}

/* ---------- our story ---------- */
.story{display:flex;flex-wrap:wrap;margin:10vh 0 45px}
.story-label{width:25%;padding:0 30px}
.story-body{width:75%;margin-bottom:10vh;padding:0 30px}
.story-statement{font-size:clamp(70px,3vw,90px);font-weight:300;line-height:1.2}
.story-gap{width:25%}
.story-cta{width:75%;padding:0 30px}

/* ---------- our work: sticky stacking cards ---------- */
.works{position:relative;display:flex;flex-direction:column;min-height:100vh;margin-top:-45px;background:#e9e9e7}
.works-label{padding:30px}
.work-card{position:relative;top:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;min-height:100vh;padding:0 30px;border-radius:60px 60px 0 0;overflow:hidden;background:#000}
.work-card:nth-of-type(3){z-index:3}
.work-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.work-card::before{content:"";position:absolute;inset:0;z-index:1;background:#000;opacity:.29;transition:opacity .8s}
.work-card:hover::before{opacity:.81}
.work-hit{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%}
.work-meta{position:relative;z-index:6;display:flex;flex-direction:column;gap:10px;align-self:flex-start;width:70%;padding:40px 0;color:#fff;pointer-events:none}
.work-meta a{pointer-events:auto}
.work-tags{font-size:clamp(9px,.4vw,12px);font-weight:500;line-height:1.2;letter-spacing:.05em;text-transform:uppercase}
.work-meta h3{align-self:flex-start;font-size:clamp(32px,1.5vw,50px);font-weight:400;line-height:1.3}
.work-go{position:relative;z-index:6;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;align-self:flex-start;width:30%;padding:30px 0;pointer-events:none}
.work-go a{display:flex;align-items:flex-start;padding:18px 18px 14px;border:1px solid #fff;border-radius:100px;color:#fff;pointer-events:auto}
.work-go a::before{content:"\200b";width:0}
.work-go .icon{font-size:17px}

/* white panel that zooms a halftone into "Digital with Purpose." */
.purpose{position:relative;z-index:7;min-height:130vw;border-radius:60px 60px 0 0;overflow:hidden;overflow:clip;background:#fff}
.purpose-stick{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:0 30px;overflow:hidden}
.purpose-bg{position:absolute;inset:0;background:url(/assets/uploads/2023/11/GettyImages-1360057946-1-scaled.jpg) center/contain no-repeat}
.purpose-text{position:relative;display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:100vh;padding:8vh 0;text-align:center;color:#fff}
.purpose-text h2{font-size:clamp(140px,9vw,180px);font-weight:300;line-height:1}
.purpose-text h2 + h2{margin-bottom:50px}
.purpose-text p{margin-bottom:1em}

/* ---------- client logos ---------- */
.clients{display:flex;flex-wrap:wrap;align-items:flex-end;background:#000}
.clients-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex:0 0 auto;width:94.384%;min-height:130px;margin:0 30px;border-top:1px solid rgba(255,255,255,.2)}
.clients-row li{flex:0 0 auto;line-height:0;text-align:center}
.clients-row img{display:inline-block;vertical-align:middle}
.clients-row .c1{width:14.094%}
.clients-row .c3{width:15.833%}
.clients-row .c4{width:15.741%}

/* ---------- reviews ---------- */
.reviews{display:flex;flex-wrap:wrap;padding:8vh 30px 5vh}
.reviews-head{display:flex;align-items:flex-start;gap:20px;width:33.333%;padding-right:15px}
.reviews-head > *{min-width:0}
.reviews-dash{display:block;flex:0 1 auto;width:26px;height:31px;position:relative}
.reviews-dash::before{content:"";position:absolute;left:-6px;top:13px;width:37px;height:1px;background:#000}
.reviews-intro{width:50%;padding-left:15px}
.reviews-intro p{margin-bottom:1em;font-size:clamp(20px,.9vw,28px);line-height:1.5}
.reviews-carousel{width:100%}

/* ---------- carousels (home-1.js adds drag + bullets) ---------- */
.carousel{position:relative;--per:3;--gap:50px}
.carousel-track{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.carousel-track.is-dragging a{pointer-events:none}
.carousel-track > *{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0;scroll-snap-align:start}
.carousel-dots{display:flex;justify-content:center;align-items:flex-start;position:absolute;left:0;right:0;bottom:5px;height:22.4px;padding-top:11px}
.carousel-dots[hidden]{display:none}
.carousel-dots button{appearance:none;display:block;width:6px;height:6px;margin:0 6px;padding:0;border:0;border-radius:6px;background:#000;opacity:.2;cursor:pointer;transition:.3s}
.carousel-dots button[aria-current="true"]{width:20px;opacity:1}

.reviews-carousel .carousel-track{align-items:flex-end;padding-bottom:60px}
.review{display:flex;flex-direction:column}
.review-quote{display:block;width:42px;height:42px;margin-bottom:30.4px}
.review blockquote{margin:0}
.review blockquote p{font-size:clamp(20px,.9vw,28px);line-height:1.5}
.review cite{display:block;margin-top:25px;font-size:clamp(16px,.8vw,22px);font-style:normal;font-weight:500;line-height:1.2}

/* ---------- our people ---------- */
.people{display:flex;flex-wrap:wrap;background:#000;color:#e9e9e7}
.people-label{width:100%;margin:8vh 0 10vh;padding:0 30px}
.people-title{position:relative;width:60%;padding:0 10px 0 30px}
.people-title h2{position:absolute;top:0;left:30px;right:0;z-index:1;margin-top:-30px;font-size:clamp(80px,6vw,120px);font-weight:300;line-height:1.2}
.people-text{display:flex;flex-direction:column;justify-content:flex-end;width:40%;padding-right:30px}
.people-text p{margin-bottom:1em;font-size:clamp(20px,.9vw,28px);line-height:1.5}
.people-team{width:100%;padding:5vh 30px 0}
.team{--per:7;--gap:25px;margin-top:20px}
.team .carousel-track{padding-bottom:36px}
.team .carousel-dots{bottom:0;height:6px;padding-top:0}
.team .carousel-dots button{background:#e9e9e7}
.member{display:flex;flex-direction:column;gap:6px}
.member-photo{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:12px;filter:saturate(.5);transition:filter 1s}
.member:hover .member-photo{filter:saturate(1)}
.member-head{display:flex;gap:20px;margin-bottom:4px}
.member-head h5{flex:0 1 65%;font-size:19px;font-weight:400;line-height:1.3;overflow-wrap:break-word}
.member-link{display:flex;justify-content:flex-end;flex:0 1 35%;min-width:0;margin-top:3px;padding-top:.2em;height:calc(3px + .2em + 16px);color:#5f6567}
.member-link a{display:block;font-size:14px;transition:color .3s}
.member-link a:hover{color:#e9e9e7}
.member-role{font-size:clamp(14px,.6vw,18px);line-height:1.2;color:#5f6567}

/* ---------- partners ---------- */
.partners{margin-bottom:-120px;padding:50px 50px 0}
.partners-title{width:80.36%;padding:10px}
.partners h2{font-size:clamp(42px,1.9vw,60px);font-weight:300;line-height:1.2}
.partners-intro{display:flow-root;margin:0 0 20px 14px}
.partners-intro p{margin-bottom:1em}
.partners-row{display:grid;grid-template-columns:repeat(4,1fr);min-height:170px}
.partners-row li{display:flex;justify-content:center;align-items:center;min-width:0;border:solid #000;border-width:0 0 1px 1px}
.partners-row:first-of-type li{border-top-width:1px}
.partners-row li:last-child{border-right-width:1px}
.partners-row:first-of-type li:first-child{border-top-left-radius:7px}
.partners-row:first-of-type li:last-child{border-top-right-radius:7px}
.partners-row:last-of-type li:first-child{border-bottom-left-radius:7px}
.partners-row:last-of-type li:last-child{border-bottom-right-radius:7px}
.partners-row a{display:block;flex:none;width:100%;padding:20px;line-height:0;text-align:center}
.partners-row a.pad-0{padding:0}
.partners-row a.pad-28{padding:28px}
.partners-row a.bleed{width:calc(100% + 60px);margin:-30px;padding:0}
.partners-row img{display:inline-block;width:60%}

/* ---------- desktop-only pieces ---------- */
@media (min-width:1025px){
.words{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;min-height:50vh;padding-top:30%;background:#000;overflow:hidden}
.story-statement .tra-word{opacity:.1;will-change:opacity}
.service:hover::before{opacity:1;background-size:40px auto}
.work-card{top:1px}
}
@media (min-width:768px){
.work-card{position:sticky}
}
@media (min-width:768px) and (max-width:1024px){
.work-card{top:-60px}
.work-card:nth-of-type(3){top:-65px}
}

/* ---------- tablet + mobile ---------- */
@media (max-width:1024px){
.hero{flex-wrap:wrap;min-height:329px}
.hero-copy{flex:1 0 320px;width:320px;padding:10vh 0}
.hero h1{width:100%;font-size:46px;line-height:1}
.hero-lede{width:80%;max-width:80%;font-size:20px}
.hero-globe{order:-1;flex-direction:row;justify-content:flex-end}
.world-wrapper{width:500px}
.hero-social ul{display:none}

.services{padding:40px 0}
.services-grid{gap:15px;padding:0 30px 0 0}
.service,.service--wide{width:45%;padding:25px}
.service-icon img{width:50px}
.service-gap{height:0}
.service h3{font-size:30px;line-height:1.2}

.story{margin:80px 0 35px}
.story-body{margin-bottom:60px;padding:0 30px 0 0}
.story-statement{font-size:32px;line-height:1.3}
.story-cta{padding:0 30px 0 0}

.works{margin-top:0}
.work-card{margin-top:-60px}
.work-card:nth-of-type(3){margin-top:-65px}
.work-meta{padding:30px 0}
.work-meta h3{font-size:30px;line-height:1.2}

.purpose{min-height:130vh;margin-top:-30px}
.purpose-bg{background-size:500% auto}
.purpose-text h2{font-size:13vw}
.purpose-text h2 + h2{margin-bottom:0}

.clients{padding-top:65px}

.reviews{padding:75px 30px 70px}
.reviews-head{width:25%}
.reviews-intro{width:75%}
.reviews-intro p,.review blockquote p{font-size:19px}
.reviews-carousel .carousel-track{padding-bottom:50px}

.people-label{margin:75px 0 20px}
.people-title{padding:0 0 0 30px}
.people-title h2{margin-top:0;font-size:6vw}
.people-text p{font-size:19px}
.people-team{margin-bottom:30px;padding-top:60px}
.member-photo{margin-bottom:5px}
.member-head{flex-direction:column;gap:5px}
.member-head h5{width:100%;padding-top:10px;border-top:1px solid rgba(255,255,255,.2)}
.member-link{order:-1;flex:none;justify-content:flex-start;height:auto;margin:0 0 5px}
.member-link a{height:14px}

.partners{margin:16px 0 -80px;padding:39px}
.partners-title{width:100%}
.partners h2{margin-bottom:10px;font-size:8vw}
.partners-intro{margin-left:15px}
.partners-row{grid-template-columns:repeat(2,1fr);align-content:stretch;min-height:250px}
.partners-row li:nth-child(2n){border-right-width:1px}
.partners-row li:nth-child(n+3){border-top-width:0}
.partners-row:first-of-type li:last-child{border-top-right-radius:0}
.partners-row:first-of-type li:nth-child(2){border-top-right-radius:7px}
.partners-row:last-of-type li:first-child{border-bottom-left-radius:0}
.partners-row:last-of-type li:nth-child(3){border-bottom-left-radius:7px}
.partners-row img{width:40%}
}
/* carousels switch to their tablet slide counts one pixel below the layout breakpoint */
@media (max-width:1023px){
.team{--per:3}
.reviews-carousel{--per:1;--gap:10px}
}

/* ---------- mobile ---------- */
@media (max-width:767px){
body{font-size:16px;line-height:1.5}
.hero{min-height:69vh;padding:0 20px}
.hero-copy{flex:1 0 100%;width:100%;margin-bottom:-112px;padding:5vh 0}
.hero h1{font-size:36px;line-height:1.2}
.hero-lede{width:100%;max-width:100%;font-size:18px}
.hero-globe{width:100%}
.world-wrapper,.hero-social{display:none}

.services{flex-direction:column;align-items:stretch;padding:60px 0 30px}
.services-label{width:100%;margin:-25px 0 25px;padding:0 20px}
.services-grid{width:100%;padding:0 20px}
.service,.service--wide{width:100%;padding:25px 25px 5px}
.service-gap{height:1vh}
.service h3{font-size:24px}
.service--creative p{padding-bottom:15px}

.story{margin:10px 0 110px}
.story-label{width:100%;margin-bottom:20px;padding:0 20px}
.story-body{width:100%;margin-bottom:40px;padding:0 20px}
.story-statement{font-size:36px;line-height:1.2}
.story-gap{display:none}
.story-cta{width:100%;padding:0 20px}

.works{margin-top:-60px}
.works-label{position:relative;z-index:0;padding:15px}
.work-card{justify-content:flex-start;min-height:90vw;padding:30px 20px;border-radius:40px 40px 0 0}
.work-card:nth-of-type(1){margin-top:16px}
.work-meta{width:83%;min-height:10px;padding:0 0 20px}
.work-meta h3{font-size:24px}
.work-go{justify-content:flex-start;width:17%;min-height:10px;padding:0}
.work-go a{margin-top:-10px;padding:8px 12px 7px}
.work-go .icon{font-size:14.4px}
.purpose{display:none}

.clients{padding:0 20px 30px}
.clients-row{display:none}

.reviews{padding:60px 20px 50px}
.reviews-head{width:100%;margin:-21px 0 10px;padding-right:0}
.reviews-intro{width:100%;padding-left:0}
.reviews-carousel{--per:1;--gap:10px;margin-bottom:-21px}

.people-label{margin:40px 0 20px;padding:0 20px}
.people-title{width:100%;padding:0 20px 30px}
.people-title h2{left:20px;right:auto}
.people-text{width:100%;padding:0 20px}
.people-text p{font-size:15px}
.people-text p:first-child{margin-top:11px}
.people-team{margin-bottom:10vw;padding:20px 20px 0}
.team{--per:2;--gap:5px}
.member-link{margin-bottom:7px}
.member-link a{height:16px}

.partners{display:none}
}

@media (prefers-reduced-motion:reduce){
.fx-t{transition-duration:0s!important}
.js [data-anim]:not(.is-in),.js [data-anim-sm]:not(.is-in){visibility:visible}
[class*="anim-"]{animation:none}
.carousel-track{scroll-behavior:auto}
}