:root {
  --swatch--black: #000;
  --spacing--1-25em: 1.25em;
  --swatch--white: white;
  --swatch--purple: #641dff;
  --swatch--lime: #e8ffb9;
  --spacing--1em: 1em;
  --spacing--2em: 2em;
  --spacing--3em: 3em;
  --spacing--4em: 4em;
  --spacing--5em: 5em;
  --spacing--6em: 6em;
  --spacing--7em: 7em;
  --spacing--8em: 8em;
  --spacing--9em: 9em;
  --spacing--10em: 10em;
  --spacing--11em: 11em;
  --spacing--12em: 12em;
  --spacing--13em: 13em;
  --spacing--14em: 14em;
  --spacing--15em: 15em;
}

.type-canvas-wrapper {position: relative; padding-top: 2em; padding-bottom: 4em}
.text-placeholder {height: 10.5em;}
.text-placeholder.tall {height: 16.5em;}
#type-canvas {
  position: absolute;
  width: 100%; 
  height: 90%;
  z-index: 1;
  --textWidthFactor: 0.8;     /* text width is set to 80% of canvas width */
  --maxTextHeightFactor: 0.9; /* text height is limited to max 90% of canvas height */
}

.placeholder-type {width: 90%; position: absolute; }

.grecaptcha-badge {display:none !important}

.transition {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 100;
  display:block;
  height: 100dvh;
  background-color: var(--swatch--white);
  pointer-events: none;
}

.single-thinking .transition, .page-template-thinking .transition {
    background-color: #E8FFB9;
}

.transition.is-purple {background-color: var(--swatch--purple) !important;}

.page-template-work .transition,
.page-template-casestudies .transition,
.page-template-clients .transition,
.page-template-awards .transition,
.single-project .transition
 {
/*  z-index: 9;*/
  background: white;
}




html.lenis {
  height: auto;
}
  .lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}


body {
  color: var(--swatch--black);
  font-family: Booton Upright VF, sans-serif;
  font-size: 1vw;
  line-height: 1.1em;
  -webkit-font-smoothing: antialiased;
/*  cursor: none;*/
  letter-spacing: -0.04em;
  background-color: var(--swatch--white);
  transition: ease background-color 0.3s;
  
}

main {position: fixed; top:0; z-index: -1}

.password-protect-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1em;
  min-height: 70vh;
  justify-content: center;
  align-items: center;
  max-width: 60em;
  margin: 0 auto;

  form {
    p:first-child {
      font-size: 1em;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    input[type="submit"] {
      text-transform: uppercase;
      border: 1px solid;
      border-radius: 0.5em;
      font-weight: 500;
      line-height: 1;
      padding: 0.25em 0.7em;
      transition: all 0.3s ease;
      font-size: 0.9em;
      margin-top: 0.2em;
      background: var(--swatch--white);
      color: var(--swatch--black);
      border-color: var(--swatch--black);
      cursor: pointer;
		
		&:hover {
			background: var(--swatch--purple);
      color: var(--swatch--white);
      border-color: var(--swatch--purple);
		}
    }
  }
	
	@media all and (max-width: 768px) {
		h2 {font-size: 34px}
	}
}


h1, .h1 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 6.5em;
  font-weight: 450;
  line-height: 1em;
  line-height: 0.85;
    letter-spacing: -0.04em;
  
}

.h1-lrg {font-size: 10em; margin-top: 2rem;}


h2, .h2 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 5em;
  font-weight: 400;
  line-height: 1em;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

h3, .h3 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.3em;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

h4, .h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.7em;
  font-weight: 400;
  line-height: 1em;
}

h5, .h5 {
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.1em;
}

p, .p {
  margin-bottom: 0.2em;
  font-size: 1.5em;
  line-height: 1.2em;
  text-transform: none;
}

.p {margin-bottom: 0;}

.p-large {
  letter-spacing: -.04em;
  font-size: 3.6em;
  line-height: 1em;
  margin-bottom: 0;
}

.p-medium {
font-size: 2.4em;
    line-height: 1.15em;
    margin-bottom: 0;
    letter-spacing: -0.05em;
}

.p-small {
  letter-spacing: -.02em;
  font-size: 0.9em;
  line-height: 1em;
  margin-bottom: 0;
}

.uppercase {text-transform: uppercase;}

.bold {font-weight: 600}

.border-bottom {border-bottom: 1px solid; padding-bottom: 0.5em}

.outlined {
  font-family: 'Booton Medium', sans-serif !important; /* Use the correct font-family name */
  -webkit-text-stroke-width: 1px; /* For WebKit-based browsers (Chrome, Edge, Safari) */
  -webkit-text-stroke-color: black;
  color: transparent; /* Makes the inside of the text transparent */
}


a {
  color: inherit;
  text-decoration: none;
}

a:hover {}


.variable-text-wrapper {
  display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


  .variable-text-wrapper.narrow {padding: 0 var(--spacing--8em);}
}

.variable-text-wrapper  h1, .h1 {font-size: 8.25em; margin: 0.2em 0; }
.variable-text-wrapper  h2, .h2 {margin: 0.4em 0; }

.variable-text-wrapper.values-variable .h1 {font-size: 10.25em; margin: 0.2em;}

.variable-text-wrapper.work-text .h1 {font-size: 10.25em; margin: 0.2em;}

.indent-first.p-large .word:first-child {padding-left:6.9em;}
.indent-first.p-medium .word:first-child {padding-left:10.6em;}

[text-split] {opacity: 0;}

.word {
  /*overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;*/
  transform-origin: bottom;
}

.indent.p-large {text-indent: 7em;}

.indent.p-medium {text-indent: 10.6em;}

.cursor {
  z-index: 99999;
  pointer-events: none;
  transition: all .2s;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  mix-blend-mode: difference;

}

.cursor.normal {mix-blend-mode: normal;}

.cursor_dot {
  border: 2px solid #fff;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  transition: border-color .2s, color .2s, opacity .2s, border-width .2s, border-radius .2s, height .2s, width .2s, background .2s;
  display: flex;
  margin-top:-7px;
  margin-left:-7px;
}

.cursor_dot.smalllink {background: #fff; width: 17px; height: 17px;}

.invisible .cursor_dot {opacity: 0;}

/*.smile {
  opacity: 0;
  width: 39px;
  transition: opacity .2s;
  position: relative;
  bottom: -2px;

}

.cursor_dot.mainlink {
  border-width: 4px;
  color: var(--swatch--white);
  width: 60px;
  height: 60px;
  margin-top:-30px;
  margin-left:-30px;
}

.cursor_dot.mainlink.purple {
/*  border-color: #9be200;
  color: #9be200;*/
  border-color: var(--swatch--purple);
  color: var(--swatch--purple);
}
.cursor_dot.mainlink .smile {opacity:1;}*/


.cursor.hover {
/* mix-blend-mode: normal;*/
}

.cursor_text { 
    width: auto;
    color: var(--swatch--white);
    line-height: 1;
    transition: opacity .2s; 
    opacity:0; font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em; 
    text-transform: uppercase;
  position: absolute;
    top: -7px;
    left: 16px;}

.cursor.hover .cursor_text {opacity:1;}

.cursor.hover .smile {display: none;}








.max-width-70 {width:70%;}

/**** TRANSITION TIMINGS ****/

.project-list-video,
.project-list-video .img-absolute,
.news-list-item,
.news-img,
.news-list-item .right-arrow,
.feature-insert, .feature-cover,
.parallax img, .parallax,
.feature-project-video,
.hover-bg, 
.project-tile-img,
.home-project .project-meta
{
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}


.project-tile-mask 
{
  transition-duration: 950ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}




.pill
{
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

/**** TRANSITION TIMINGS ****/


.sub-arrow {
  width: 1.25em;
  fill: currentColor;
}

.subheading {
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.subheading.align-right {
  padding-left: var(--spacing--8em);
}


/**** NAVIGATION MENU ****/

.logo {
  width: auto;
  display: flex;
  transition: color .3s cubic-bezier(.645, .045, .355, 1);
}
.logo-text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}
.logo-img {
  height: 56px; /* fixed px: keep identical across ALL pages (was 3.5rem → varied with root font-size) */
  width: auto;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .logo-img { height: 40px; }
}
.is-dark .header {color: var(--swatch--white) !important; mix-blend-mode: normal !important;}
.is-dark .header .menu-link:hover {
    color: var(--swatch--white);
}
.header {
  padding: var(--spacing--1-25em);
mix-blend-mode: difference;
color: var(--swatch--white);
  z-index: 10;
  position: fixed;
  inset: 0% 0% auto;
}


.header.open {mix-blend-mode: normal; color: var(--swatch--white);}


.header.normal {mix-blend-mode: normal; color: var(--swatch--black);}
.header.normal.open {mix-blend-mode: normal; color: var(--swatch--white);}

#logo-lottie, .open.normal #logo-lottie, .is-dark .normal #logo-lottie {filter: invert(1);}
.normal #logo-lottie {filter: invert(0);}
.logo, .menu-link {transition: color 0s;}


nav {position: fixed; z-index: 9; top:0; left:0; right:0; height: 100dvh; background: #860000; color: var(--swatch--white); /* menu bg = rgb(134,0,0) */ padding: 7em var(--spacing--1-25em) var(--spacing--1-25em);clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); will-change: clip-path; visibility:hidden;  transition: clip-path 600ms cubic-bezier(.215, .61, .355, 1), visibility 0s linear 600ms;
pointer-events: none;display: flex; align-items: flex-end; transition-duration: 700ms;}
nav ul {padding: 0; margin: 0; list-style: none;}
nav li {margin-bottom: 0.4em}

nav.open {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); pointer-events: all; visibility:visible; transition: clip-path 600ms cubic-bezier(.215, .61, .355, 1), visibility 0s linear 0s;}


.nav-wrapper {width:100%;}


.language-switcher {
  list-style: none; /* Remove default list styling */
  padding: 0;
}

.language-switcher li {
  opacity: 0.6; /* Default opacity when not hovered */
  transition: opacity 0.3s ease; /* Smooth fade effect */
}

.language-switcher li:hover,
.language-switcher li.active {
  opacity: 1; /* Keep hovered and active items fully visible */
}

.language-switcher:hover li {
  opacity: 0.6; /* Fade all items to 0.6 when any item is hovered */
}

.language-switcher:hover li:hover {
  opacity: 1; /* Restore the hovered item to full opacity */
}

.language-switcher .active .p {font-weight: 600;}

.menu-wrapper {position: relative;overflow: hidden;}
.menu-text-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-end;
    min-width: 8em;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
}
.menu-text-wrapper span {
    line-height: 1;
    transition: transform .4s cubic-bezier(.645, .045, .355, 1);
}
.menu-text-wrapper .is-2 {
    position: absolute;
    transform: translateY(100%);
}

.open .menu-text-wrapper span {transform: translateY(-100%);}
.open .menu-text-wrapper span.is-2 {transform: translateY(0%);}

.hamburger-wrap {
  position: absolute;
  display: flex;
  width: 1.8em;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: flex-start;
  grid-row-gap: var(--gap);
  --thickness: 2px;
  --gap: 0.4em;
  --rotate: 45;
  top: 0;
  right: 0;
  transition: transform .3s cubic-bezier(.645, .045, .355, 1);
  transform: translateX(2.3em);
}
.hamburger-line {
    width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
  height: var(--thickness);
}
.hamburger-line.is-middle {transform-origin: 0% 50%;}
.hamburger-line-inner {
    width: 100%;
  height: 100%;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
  background-color: currentColor;
}

.menu-link:hover {color: var(--swatch--purple);}
.open .menu-link:hover {color: var(--swatch--white);}
.menu-link:hover .menu-text-wrapper, .open .menu-text-wrapper {transform: translateX(-2.3em);}
.menu-link:hover .hamburger-wrap, .open .hamburger-wrap {transform: translateX(0em);}

.open .hamburger-line > * {
  transition-delay: 300ms;
}

.open .hamburger-line {
  transform: scaleX(0);
}
.open .hamburger-line:first-child {
  transform: translateY(calc(var(--thickness) + var(--gap)));
}
.open .hamburger-line:first-child > * {
  transform: rotate(calc(var(--rotate) * 1deg));
}
.open .hamburger-line:last-child {
  transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1));
}
.open .hamburger-line:last-child > * {
  transform: rotate(calc(var(--rotate) * -1deg));
}


.link {display: inline-flex;
    grid-gap: 0.3em;
    align-items: flex-start;
    line-height: 1;
    transition: color .2s cubic-bezier(.645, .045, .355, 1), opacity .2s cubic-bezier(.645, .045, .355, 1);}

.default-content a {transition: color .2s cubic-bezier(.645, .045, .355, 1), opacity .2s cubic-bezier(.645, .045, .355, 1);}
.default-content a:hover {color: var(--swatch--purple);}

.arrow-wrapper {position: relative;display: flex;overflow: hidden; padding-bottom: 0.3em}
.small-arrow {width:0.5em;transform: translate(0%, 0%);transition: transform .4s cubic-bezier(.645, .045, .355, 1);}
.small-arrow.is-2 {position: absolute;transform: translate(-120%, 120%);}
.link:hover {color: var(--swatch--purple);}
.link:hover .small-arrow {transform: translate(120%, -120%);}
.link:hover .small-arrow.is-2 {transform: translate(0%, 0%);}

.back-link {align-items: center;grid-gap: 0.5em;}
.back-link svg {width: 1.3em;}
.back-link p {margin: 0;}


nav .link:hover {color: var(--swatch--white);}


.link-large {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: flex-start;
  align-items: flex-start;
  transition: all .3s ease, font-size 0s;
  display: inline-flex;
  position: relative;
  border: 2px solid;
border-radius: 1em;
    padding: 0.75em 1.5em;
}


.link-large h3 {font-weight: 500;}

.link-large .arrow-wrapper {margin-left: 0.2em; margin-top: 0.2em;}

.large-arrow {
  width: 2.1em;
  position: relative;
    top: 0.2em;
    transform: translate(0%, 0%); transition: transform .4s cubic-bezier(.215, .61, .355, 1);
}

.large-arrow.is-2 {position: absolute; transform: translate(-100%, 100%);}

.link-large:hover {
  background: var(--swatch--purple);
  border-color: var(--swatch--purple);
  color: var(--swatch--white);
}

.link-large:hover .large-arrow {transform: translate(100%, -100%);}
.link-large:hover .large-arrow.is-2 {transform: translate(0%, 0%);}
.link-large .large-arrow path {transition: stroke-width 0.3s ease; stroke-width: 0px;}
.link-large:hover .large-arrow path {stroke-width: 5px; }


.main-nav {}
.main-nav li {
    border-top: 1px solid;
    border-color: transparent;
    margin: 0.4em 0;
    transition-property: border-color;
    transition-delay: 0s;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    padding: 0.4em 0 0.1em;
    overflow:hidden;
    text-align: left;
    display: flex;
    }


.main-nav li:last-child {border-bottom:1px solid}
.main-nav a {
  transition-delay: 0s;
  width: 100%;
  display: inline-block;
  margin: 0;
  transform: translateY(100%);
  transition-property: transform;
  transition-duration: 800ms;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}


.lottie-nav-animation {
    height: auto;
    max-height: none;
	padding: 0.3em 0;
}
.lottie-nav-animation span {
    display: none;
}

.lottie-nav-animation svg {
    width: auto !important;
}


.lottie-link-animation {
    height: 4.5em;
}
.lottie-link-animation span {
    display: none;
}

.lottie-link-animation svg {
    width: auto !important;
}

nav .vflex-left-spacebetween {
  opacity:0;
transition-property: opacity;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  }

.open .vflex-left-spacebetween, .open .close-nav {opacity:1; transition-delay: 0.35s}
.open .main-nav li {border-color: var(--swatch--white); transition-delay: 0.35s}
.open .main-nav a {transform: translateY(0%); transition-delay: 0.35s}


/**** FLEX ****/

.hflex-right-center {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.hflex-left-center {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.hflex-spacebetween {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.hflex-between-top {
    justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.hflex-center-center {
  justify-content: center;
  align-items: center;
  display: flex;
}

.vflex-left-spacebetween {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}

.hflex-right-top {
      justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.margin-top-xsml {margin-top:var(--spacing--1-25em)}
.margin-top-sml {margin-top:var(--spacing--2em)}

/**** GRIDS ****/

.grid-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  grid-gap: var(--spacing--1-25em);
}

.grid-2.gap-md {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.grid-2.centered {
  align-items: center;
}

.grid-2.uneven {grid-template-columns: 0.45fr 1fr;}

.grid-3 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  width: 100%;
}

.grid-4 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  width: 100%;
}

.gap-sml {grid-gap: 1.5em;}
.gap-md {grid-gap: 3em;}

/**** MARGINS ****/


.margin-b-xsml {
  margin-bottom: 0.5em;
}

.margin-b-sml {
  margin-bottom: 1.5em;
}

.margin-b-md {
  margin-bottom: 3em;
}

.margin-top-xl {
  margin-top: 9em;
}



.container {
  padding-right: var(--spacing--1-25em);
  padding-left: var(--spacing--1-25em);
}

.container.narrow {
  padding-right: var(--spacing--9em);
  padding-left: var(--spacing--9em);
}

.hero-home {
  background-color: var(--swatch--white);
  justify-content: center;
  align-items: center;
  height: 100dvh;
  display: flex;
  position: sticky;
  top: 0;
  background-color: transparent
}

.hero-home video {width: 100%; padding: 0 15px;}


.loading-video {position:absolute; opacity:0; transition: ease opacity 0.3s; width: 80% !important; padding:2em; display:flex; align-items: center; justify-content: center;}
 .loading-video img {
width: 90% !important;
    height: auto !important;
    margin-top: 0 !important;
	 max-width: unset !important;
	 
}
.loading-video.show {opacity:1;}


.down-arrow {
  width: 1.125em;
}



.hero-video-wrapper {height:140vh; height:170vh; margin-top:-20vh}
.home-video {position: sticky; top:4.25em;}
.home-video .video-wrapper {
    padding-top: calc(100vh - 5.25em);
}

.scroll-down {
  position: absolute;
  inset: auto 1.25em 1.25em auto;
  z-index:1;
}

.home-video, .culture-video {
  color: #fff;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.img-absolute, .img-absolute img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.contain {object-fit: contain}

.img-absolute video {width: 100%; height: 100%; object-fit:cover; position: absolute;}

.video-wrapper {
  justify-content: center;
  align-items: center;
  padding-top: 100vh;
  display: flex;
  position: relative;
}

.video-container {
  width: 100%;
  height: 100%;

}





@property --a {
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
}

.blob-container {
    --a: 0%;
    --hue: 170deg;
    --x: 50;
    --y: 50;
    --button: white;
    --edge: 0px;
    --size: 6em;
    background: transparent;
    position: absolute;
    width: 120%;
    left: -10%;
    padding: calc(var(--size)) 2.5em;
    transition: 
        --a .5s ease-in-out, 
        scale var(--spring-duration) var(--spring-easing);
    scale: 1;
    isolation: isolate;
    z-index: 0;
    &:hover {
        --a: 100%;
        transition-duration: .5s, .25s;
        box-shadow: none;
        opacity: 1;
        scale: 1;
    }
}

.blob-container:before {
    content: "";
    position: absolute;
    inset: 0em;
    /** here's the magic. A blur and a svg filter */
    filter: blur(20px) url(#goo); 
    /** followed by a radial-gradient which causes the
    gooey effect to follow mouse-position */
    background-image:
        linear-gradient(0deg,var(--button),var(--button)),
        radial-gradient(
            circle 90px at calc(var(--x) * 1%) calc(var(--y) * 1%),
            hsla(var(--hue), 100%, 100%, var(--a)) 0%,
            transparent 90%
        );
    /** and finally a background-clip so the radial-gradient
    is larger than the linear-gradient */
    background-clip: content-box, border-box;
    padding: 4.6em;
    z-index: -1;
    border: inherit;
}

.blob-container.top, .blob-container.bottom {--size: 6em; width: 100%; left: 0; overflow: hidden;}
.blob-container.top { margin-top: -8em; z-index: 2}
.blob-container.bottom {bottom: 0; margin-bottom: -8em;}
.blob-container.top:before, .blob-container.bottom:before {padding: 2.6em 0; width: 120%; left: -10%;}


.video-player, .wechat-popup {
    z-index: 12;
    padding: var(--spacing--1-25em);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    display: flex;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
}

.video-bg {
    -webkit-backdrop-filter: blur();
    backdrop-filter: blur();
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    transition: backdrop-filter cubic-bezier(.645, .045, .355, 1) 0.6s, background cubic-bezier(.645, .045, .355, 1) 0.6s;
}

.player-wrapper {
    border-radius: 1em;
    opacity: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    transition: transform .4s, opacity .4s;
    display: flex;
    position: relative;
    overflow: hidden;
    transform: scale(1.05);
}

.close-video {
    opacity: 0;
    pointer-events: none;
    color: var(--swatch--white);
    justify-content: center;
    align-items: center;
    width: 1.75em;
    transition: opacity .4s;
    display: flex;
    position: absolute;
    top: 1.5em;
    right: 1.5em;
}

.close_icon {
    justify-content: center;
    align-items: center;
    width: 1.75em;
    transition: transform .4s;
    display: flex;
    position: relative;
    transform: scale(.8);
}

.close_icon svg {width: 100%;}

.video-player.active, .wechat-popup.active {pointer-events: auto;}
.active .video-bg {-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background: rgba(0, 0, 0, 0.95);}
.active .player-wrapper {opacity: 1; transform: scale(1); transition-delay: 0.2s;}
.active .close-video{opacity: 1;}
.active .qr-wrapper {opacity: 1;transition-delay: 0.5s;}

.player-wrapper video {width: 100%;}

.play-video {
  grid-column-gap: .9em;
  grid-row-gap: .9em;
  justify-content: center;
  align-items: center;
  transition: color .3s cubic-bezier(.215, .61, .355, 1);
  display: flex;
  position: absolute;
}

.play-video:hover {
  
}

.play-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}


.qr-wrapper {
    width: 100%;
    max-width: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2em;
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s cubic-bezier(.215, .61, .355, 1);
    transition-delay: 0s;
}

.qr-wrapper picture, .qr-wrapper img {width:100%;}

.play-btn {
  background-color: var(--swatch--white);
  color: var(--swatch--black);
  border-radius: 4em;
  justify-content: center;
  align-items: center;
  width: 9em;
  height: 5.8em;
  padding: 1.9em 1.9em 1.9em 2.2em;
  transition: background-color .3s cubic-bezier(.215, .61, .355, 1), color .3s cubic-bezier(.215, .61, .355, 1), transform .3s cubic-bezier(.215, .61, .355, 1);
  display: flex;
}

.play-video:hover .play-btn, .media-cover:hover .play-btn {background: var(--swatch--purple); color: var(--swatch--white); transform: scale(1.1) !important}
	.full-player {position: relative;
    overflow: hidden;
    margin: var(--spacing--5em) var(--spacing--1-25em);
    display: flex;
    justify-content: center;
    align-items: center;}
	
	.full-player video {width: 100%;
    transform: scale(1.0) !important;}
	
	#covervideo, .media-cover svg {position: absolute;}
	
	

.intro-section {
  grid-column-gap: var(--spacing--2em);
  grid-row-gap: var(--spacing--2em);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.intro-section.container {
  padding-top: var(--spacing--8em);
  padding-bottom: var(--spacing--8em);
}


.project-meta {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    padding-top: .4em;
    padding-bottom: .4em;
    mix-blend-mode: difference;
	color: white;
}

.single .project-meta { mix-blend-mode: normal; color: inherit;}

.home-project .project-meta {position: absolute; width:100%; padding-top:1em; transition-property: color;}


.project-meta .grid-2 {
    position: relative;
    width: 100%;
    pointer-events: none;
}

.home-project {
  width: 100%;
  position: relative;
}

.home-project:hover {z-index: 2}

.home-project:hover .project-list-video, .home-project:hover .project-meta {
  color:  var(--swatch--white);
}
.home-project:hover .project-list-video .img-absolute {
  opacity:1;
  transform: scale(1);
}

.home-project h3 {font-size: 5em; mix-blend-mode: difference; -webkit-text-stroke-color: white; text-wrap-style: balance;}

.project-list-video {
  padding-right: var(--spacing--1-25em);
  padding-left: var(--spacing--1-25em);
  justify-content: flex-start;
  align-items: center;
  height: 34vw;
  display: flex;
  position: relative;
  overflow: hidden;
    transition-property: color;
  color:  var(--swatch--black);
}

.list-title {max-width: 10em;}

.project-list-video .img-absolute {
  transition-property: transform, opacity;
  opacity:0;
  transform: scale(1.2);
}

/* Home-project background videos (小鱼 / 农夫山源): fill the card, hidden by default, reveal on hover like the images */
.project-list-video .lazy-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.215,.61,.355,1);
}
.home-project:hover .project-list-video .lazy-video {
  opacity: 1;
}

.project-heading, .relative {
  position: relative;
}

.gradient-overlay {background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); position: absolute; left: 0; top:0; height:100%; width:70%;}

.intro-text-section {
  padding-top: var(--spacing--13em);
  padding-bottom: var(--spacing--13em);
  padding-right: var(--spacing--6em);
}

.intro-text-section .p-large, .intro-text-section .p-medium {grid-area: span 1 / span 3 / span 1 / span 3;}





/**** SWIPERJS ****/

/*.story-swiper .swiper-wrapper {transition-timing-function: cubic-bezier(.77, 0, .175, 1)}*/
.swiper-button-next:after, .swiper-button-prev:after {display:none;}
.swiper-button-next, .swiper-button-prev {
  position: relative;
    color: var(--swatch--black);
    top: auto;
    bottom: auto;
    width: 3.75em;
    height: auto;
    margin: 0;
    transition: ease 0.3s transform, ease 0.3s opacity, ease 0.3s color;
}

.swiper-button-next:hover, .swiper-button-prev:hover {color: var(--swatch--purple)}
.swiper-button-next {right:auto;}
/*.swiper-button-next:hover {transform: translateX(6px)}*/
.swiper-button-prev {left:auto;}
/*.swiper-button-prev:hover {transform: translateX(-6px)}*/
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 5%;}

.swiper-navigation {position: relative;display: flex;justify-content: space-between;align-items: center;padding: 0 8em; z-index: 2;}
.swiper-arrows {/*position: absolute;
    right: var(--spacing--1-25em);
    bottom: -8em;*/
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap:1em; margin-left:3em;}
.swiper-navigation svg {width: 4em}

.swiper-navigation .swiper-pagination-progressbar.swiper-pagination-horizontal {height:2px}
.swiper-navigation .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: black}
.swiper-pagination {
    position: relative !important;
    text-align: left !important;
    bottom: auto !important;
    top: auto !important;
}


.story-swiper {overflow: visible;}
.story-slide {width:100vw;margin-right: 75vw;z-index: 2;height:auto;display: flex;align-items: center;padding-top:1em;padding-bottom:3em}
.story-slide .grid-2 {height:100%; padding:5vw 0;}
.story-slide .grid-2.uneven {grid-template-columns: 1fr 0.7fr;}
.story-slide:last-child {margin-right:0;}
.overflow-content {display: flex;grid-gap: 0;position: absolute;width: 110vw;align-items: center;justify-content: flex-start;top:0;bottom: 0;right: -96vw;padding:0 4em;z-index: 0; }

.culture-swiper-wrapper {padding-right:2em;z-index: 1;width: 90%;} 
.culture-swiper-wrapper picture {transform: rotate(4deg);height: 100%;width: 100%;display: flex;}
.culture-swiper-wrapper img {height:100%;width: 100%;object-fit: cover;}

.story-slide .subheading {position: absolute; top:3em; left:8em;}

h3.slide-indent {text-indent: 1.5em;}
p.slide-indent {text-indent: 4.4em;}



/**** SLIDE ONE ****/
.overflow-content img {width:100%;height: 100%;object-fit: cover;}
.slide-1 .overflow-content picture:first-child {
    width: 40%;
    padding-top:3%;
    align-self: flex-start;
    transform: rotate(-4deg);
}
.slide-1 .overflow-content picture:nth-child(2) {
    width: 40%;
    transform: rotate(-3deg);
    margin-left: -1%;
}
.slide-1 .overflow-content picture:nth-child(3) {
    width: 30%;
    transform: rotate(6deg);
    position: relative;
    z-index: 2;
}
.slide-1 .overflow-content img:nth-child(4) {
    width: 24%;
    transform: rotate(-3deg);
    margin-left: -2%;
}



/**** SLIDE TWO ****/
.slide-2 picture {aspect-ratio: 16 / 12; object-fit:cover}
.slide-2 .overflow-content picture:first-child {
    width: 40%;
    padding-top: 0%;
    transform: rotate(-1deg);
}
.slide-2 .overflow-content picture:nth-child(2) {
    width: 40%;
    transform: rotate(4deg);
    margin-left: -4%;
    position: relative;
    z-index: 2;
}
.slide-2 .overflow-content picture:nth-child(3) {
    width: 34%;
    transform: rotate(0deg);
    padding:0 2%;
    
}



/**** SLIDE THREE ****/

.slide-3 {margin-right: 45vw;}
.slide-3 .overflow-content {flex-wrap: wrap;right: -45vw;width: 100vw;}

.slide-location {width: 23vw;}
.slide-location img {aspect-ratio: 16 / 10;object-fit: cover;}
.slide-location:nth-child(1) {}
.slide-location:nth-child(1) img {transform: rotate(-3deg);margin-bottom: 1.5em;}
.slide-location:nth-child(2) {
    width: 28vw;
    margin-left: 2em;
}
.slide-location:nth-child(2) img {
    transform: rotate(2deg);
    margin-bottom: 0.5em;
}
.slide-location:nth-child(3) {
    width: 21vw;
    margin-left: 4em;
}
.slide-location:nth-child(3) img {
    transform: rotate(-3deg);
    margin-bottom: 1.5em;
}
.slide-location:nth-child(4) {
    width: 21vw;
    margin-left: 12vw;
}
.slide-location:nth-child(4) img {
    transform: rotate(3deg);
}
.slide-location:nth-child(5) {
    width: 30vw;
    margin-left: 1vw;
}
.slide-location:nth-child(5) img {
    transform: rotate(-3deg);
    margin-bottom: 1.5em;
}
.slide-location:nth-child(6) {
    width: 23vw;
    margin-left: 3vw;
}
.slide-location:nth-child(6) img {
    transform: rotate(4deg);
    margin-bottom: 0.5em;
}



/**** SLIDE FOUR ****/

.slide-4 {margin-right: 60vw;}
.slide-4 .overflow-content {
    flex-wrap: wrap;
    right: -45vw;
    width: 100vw;
    }
.slide-4 .culture-swiper-wrapper img {transform: rotate(0deg);}
.slide-4 .overflow-content img:first-child {
}

.slide-4 img {
    width:100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
}


.slide-4 img:nth-child(1)  {position:absolute;width: 100%;object-fit: contain;}
.slide-4 picture:nth-child(2) {
    transform: rotate(-11deg);
    width: 32vw;
    position: relative;
    top: 2vw;
    margin-left: 3vw;

}
.slide-4 picture:nth-child(3) {
    transform: rotate(6deg);
    width: 28vw;
    margin-left: 13vw;

}
.slide-4 picture:nth-child(4) {
    transform: rotate(-4deg);
    width: 36vw;
    margin-left: 11vw;
    position: relative;
    top: -1vw;

}

.slide-4 picture:nth-child(5) {
    transform: rotate(-7deg);
    width: 28vw;
    margin-left: 16vw;
    position: relative;
    top: -1vw;

}


/**** SLIDE FIVE ****/
.slide-5 .subheading {left:11em}
.slide-5 {margin-right: 0;margin-left: -5.6em;padding-left: 3vw;}
.slide-5 .culture-swiper-wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slide-5 .culture-swiper-wrapper picture {
    position: absolute;
    transform: rotate(0);
    aspect-ratio: 16/10;
    object-fit: cover;
  height: auto;
}
.slide-5 .culture-swiper-wrapper img:nth-child(1) {position: absolute;object-fit: contain;}
.slide-5 .culture-swiper-wrapper picture:nth-child(2) {
    width: 18vw;
    left: 0vw;
    bottom: 0vw;
    transform: rotate(-5deg);
}
.slide-5 .culture-swiper-wrapper picture:nth-child(3) {width: 28vw;transform: rotate(-1deg);top: 1vw;}
.slide-5 .culture-swiper-wrapper picture:nth-child(4) {
    width: 23vw;
    right: 0vw;
    transform: rotate(7deg);
    bottom: 0;
}






.text-canvas {
  padding-top: var(--spacing--5em);
}



.approach-img {
  height: 28vw;
  position: relative;
}


.approach-img.offset {
  margin-top: 3em;
}

.img-text-section {
  padding-top: var(--spacing--4em);
  padding-bottom: var(--spacing--5em);
}

.nopadding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.padd-top-4 {padding-top:var(--spacing--4em)}
.padd-bot-4 {padding-bottom:var(--spacing--4em)}

.padd-top-6 {padding-top:var(--spacing--6em)}
.padd-bot-6 {padding-bottom:var(--spacing--6em)}

.padd-top-8 {padding-top:var(--spacing--8em)}
.padd-bot-8 {padding-bottom:var(--spacing--8em)}

.text-in-grid {
  padding-right: var(--spacing--8em);
  padding-left: var(--spacing--8em);
  position: relative;
  grid-gap: 2em;
  display: flex;
  flex-direction: column;
}

.grid-img-wrapper {position: relative;}
.grid-img-wrapper img {width: 23em;}
.img-text-section .grid-2:nth-child(even) .grid-img-wrapper {order:1;}
.img-text-section .grid-2:nth-child(even) .text-in-grid {order:2;}

.img-text-section .grid-2 {padding-top: var(--spacing--5em); padding-bottom: var(--spacing--5em);}




.display-text {
  text-transform: uppercase;
  font-size: 14em;
  line-height: .8em;
  display: flex;
  flex-grow: 0;
    flex-shrink: 0;
}


.contact-form {position: relative; display: flex; align-items: center; justify-content: center;}
.form-text {}
.form-text .h1 {font-size: 19.25em;} 
.form-placeholder {position: absolute; width: 36em;}


.culture-section {
  padding-bottom: var(--spacing--3em);
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.culture-img {
  z-index: 1;
  width: 40.6875em;
  height: 24.625em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.culture-img-wrapper {
  justify-content: center;
  align-items: flex-end;
  padding-top: 16vw;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.culture-text-wrapper {
  margin-bottom: var(--spacing--5em);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}



.hero-wrapper {
  position: relative;
}





/****** FOOTER *******/



.lottie-footer-animation {padding: var(--spacing--5em) 0 ; transition: cubic-bezier(.215, .61, .355, 1) opacity 1s;}
.lottie-footer-animation.faded {opacity:1;}
.contact-form-footer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-gap: 1em;
    z-index: 2;
}
.contact-form-footer img {pointer-events: all;}
.contact-form-footer img:first-child {
    left: -4em;
    position: relative;
}
.contact-form-footer img:last-child {
    position: relative;
    right: -4em;
}


.contact-form-top {
  background-color: var(--swatch--purple);
  color: white;
  padding: 2.5em 4em;
  left: -4em;
    position: relative;
    border-radius: 1em !important;
    
}

.wpforms-page-indicator {display: none !important}

.contact-form-top p {font-size: 1.25em; font-weight: 600;}


.contact-form-footer .wpforms-container {
    background-color: #ebe2ff !important;
    border: 2px solid var(--swatch--purple) !important;
    border-radius: 1em !important;
    width: 100%;
    color: var(--swatch--purple);
    padding: 1.5em 1.5em 1.5em 3em !important;
     position: relative;
    right: -4em;
    
}
.contact-form-footer .wpforms-field-container {}
.contact-form-footer .wpforms-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-form-footer .wpforms-field {
    padding: 0 !important;
    width: 100%;
    max-width: none;
}
.contact-form-footer .wpforms-field-label {
    font-weight: 500 !important;
    font-size: 1.25em !important;
    color: var(--swatch--purple) !important;
    margin-bottom: 0 !important;
}

.wpforms-required-label {display: none}

.wpforms-field-pagebreak {width:auto !important}

.contact-form-footer input, .contact-form-footer select, .contact-form-footer textarea {
    width: 100% !important;
    border: 0 !important;
    border-bottom: 2px solid var(--swatch--purple) !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1em 1em 1em 0 !important;
    font-weight: 500 !important;
    height: auto !important;
    line-height: 1 !important;
    color: var(--swatch--black) !important;
}

.contact-form-footer textarea.wpforms-field-medium {    height: auto !important;
    min-height: unset !important;
    font-weight: 400 !important;
    font-size: 1em !important;}



.contact-form-footer input:focus, .contact-form-footer textarea:focus {box-shadow: none; outline: none !important; box-shadow: none !important; color: var(--swatch--purple) !important; font-weight: 600 !important;}

.contact-form-footer div.wpforms-container-full .wpforms-page-button {
    background-color: transparent !important;
    height: 6em;
    width: 6em;
    min-width: unset !important;
    font-size:1em;
    border-radius: 50%;
    padding: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    background-image: url('purple-arrow.svg');
    background-repeat: no-repeat;
    background-size: 60% !important;
    background-position: 50%;
    transition: ease background-position 0.3s;
}

.contact-form-footer div.wpforms-container-full .wpforms-page-button:hover {
    background-color: transparent !important;
    color: transparent !important;
    background-image: url('purple-arrow.svg');
    background-repeat: no-repeat;
    background-size: 60% !important;
    background-position: 60%;
}

.wpforms-pagebreak-left {display:flex; justify-content: flex-end;}



div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box;
    color: var(--swatch--black) !important;
    font-size: 1.25em !important;
    margin: 0 !important;
    padding: 1em 1em 1em 0 !important;
    text-align: center !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full p, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) p {
    color: var(--swatch--black) !important;
}


/*** CONTACT PAGE ****/

/*.page-template-contact .lets-talk {display: none; visibility: hidden;}*/

.contact-page-form {grid-area: span 1 / span 3 / span 1 / span 3;}

.offset-sml-text {max-width: 61em; text-indent: 15em;}
.contact-form-section {display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; align-items: flex-start;}
.contact-form-section .subheading {}

.contact-form-section .wpforms-container {margin:0 !important; padding-right: 7em !important}
.contact-form-section .wpforms-field {padding: 0 0 3em !important}
.contact-form-section .wpforms-field:last-child {padding-bottom: 1em !important}
.contact-form-section .wpforms-field-label {font-size: 1.5em !important; line-height: 1.2em !important; font-weight: 400 !important; margin: 0 0 0.75em !important; letter-spacing: -0.04em;}
.contact-form-section input, .contact-form-section select, .contact-form-section textarea{
  background-color: #EBE2FF !important;
  color: var(--swatch--black) !important;
  border-radius: 0.5em !important;
  border: 0 !important;
  line-height: 1.1 !important;
letter-spacing: -0.04em !important;
    font-size: 1.5em !important;
    height: auto !important;
    padding: 0.8em 0.75em !important;

}

.contact-form-section input:focus,
.contact-form-section select:focus,
.contact-form-section textarea:focus,
.contact-form-section input:hover,
.contact-form-section select:hover,
.contact-form-section textarea:hover
{box-shadow: 0 0 0 1px var(--swatch--purple),0px 1px 2px rgba(0,0,0,0.15) !important}

.contact-form-section textarea.wpforms-field-large {height: 10em !important;}


.contact-form-section button[type=submit], .contact-form-footer button[type=submit] {
  background: transparent !important;
    color: var(--swatch--black) !important;
    border: 2px solid !important;
    border-radius: 0.5em !important;
    height: auto !important;
    padding: 0.75em 2em !important;
    text-transform: uppercase;
    font-size: 1.5em !important;
    transition: ease 0.3s color, ease 0.3s background, ease 0.3s border-color;
}

.contact-form-footer button[type=submit] {font-size: 1em !important}

.contact-form-section button[type=submit]:hover, .contact-form-footer button[type=submit]:hover {
  background-color: var(--swatch--purple) !important;
  border-color: var(--swatch--purple) !important;
  color: var(--swatch--white) !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
  background-color: transparent !important;
      padding: 0.5em 1em 0.5em 0 !important;
      font-weight: 600 !important;
      border: 0 !important;
    border-bottom: 2px solid var(--swatch--purple) !important;
    border-radius: 0 !important;
}


.contact-form-section div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
  background-color: #EBE2FF !important;
    color: var(--swatch--black) !important;
    border-radius: 0.5em !important;
    border: 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    font-size: 1.5em !important;
    height: auto !important;
    padding: 0.8em 0.75em !important;
    font-weight: 400 !important;
}



div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {font-size: 1.25em !important;
    color: var(--swatch--black) !important;}

.page-template-contact div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {font-size: 1em !important;}
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single {
    padding: 0 !important;
}
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__list--dropdown {color: var(--swatch--black) !important; outline: 0 !important; border-color: black !important;box-shadow: none !important}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--swatch--purple) !important; color: var(--swatch--white) !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices.is-focused .choices__inner {outline: 0 !important; box-shadow: none !important}

div.wpforms-container .wpforms-form .choices__list--dropdown .choices__item {font-size: 1em !important}
.fine-print {margin-bottom: 1.5em !important}


.contact-details {
  grid-area: span 1 / span 3 / span 1 / span 3;
    grid-row-gap: 4em;

}
.contact-details.offices {grid-row-gap: 7em; padding-bottom: 6em;}
.contact-detail {padding-right: 4em; position: relative;}
.contact-anchor {width:100%; height:1px; position:absolute; top:-3em}
.contact-detail p {margin-bottom:1.5em;}
.contact-detail h4 {margin-bottom:0.4em;}
.contact-details a {display: block;}
.contact-detail .link {line-height: 1.2}
.footer {
  padding-top: var(--spacing--5em);
  background: transparent;
}

.footer ul {list-style: none; margin: 0; padding:0;}
.footer ul li {margin-bottom: 0.4em}
.footer .subheading {font-size: 11px !important; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 7px}
/* FOOTER UNIFIED: identical size / layout / colors on every page */
.footer, .footer a, .footer .link, .footer .subheading, .footer .p { color: #f0f0f0 !important; }
.footer a:hover, .footer .link:hover { color: #c00000 !important; }

.subfooter {border-top:1px solid rgba(255,255,255,.2); margin-top: var(--spacing--5em); padding: var(--spacing--1-25em) 0; align-items: center; text-align: center;}
/* SUBFOOTER UNIFIED: identical on every page */
.subfooter, .subfooter p, .subfooter a, .subfooter .link, .subfooter .p-small {color: #f0f0f0 !important; font-size: 12px; line-height: 1.3;}
.subfooter p {margin: 0;}
.subfooter a:hover, .subfooter .link:hover {color: #c00000 !important;}

.culture-text-line {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  align-self: flex-start;
  display: flex;
}

.culture-text-line.middle {
  align-self: flex-end;
}

.latest-news {
  padding-top: var(--spacing--5em);
  padding-bottom: var(--spacing--8em);
}

.right-arrow {
  width: 2.875em;
}

.news-img {
  z-index: 2;
  max-width: 20em;
  max-height: 20em;
  position: absolute;
  right: 15em;
  pointer-events: none;
}

.news-list-item {
  padding-top: var(--spacing--1-25em);
  padding-bottom: var(--spacing--1-25em);
  padding: var(--spacing--1-25em) var(--spacing--1-25em);
  border-top: 1px solid #000;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay:0.2s;
}

.news-list-item:last-child {border-bottom: 1px solid}


.news-list-item:before, .client-item:before, .accordion-header:before {
  content:'';
  position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--swatch--purple);
    z-index: 0;
    transform-origin: center bottom;
    transform: scale3d(1, 0, 1);
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay:0.2s;
}

.news-list-item:hover {
color:  var(--swatch--white);
padding: var(--spacing--1-25em) var(--spacing--1-25em);
transition-delay:0s;
}

.client-item:hover, .accordion-header:hover {transition-delay:0s; color:  var(--swatch--white);}

.accordion-header:hover {padding:0.6em 1em;}


.news-list-item:hover:before, .client-item:hover:before,  .accordion-header:hover:before {
  transform-origin: center top;
    transform: scale3d(1, 1, 1);
    transition-delay:0s;
}



.open .accordion-header:hover:before {transform: scale3d(1, 0, 1);}
.open .accordion-header:hover {color:  var(--swatch--black);}
.open .accordion-header:hover {padding:0.6em 0em;}


/**** VALUES UPDATED *****/

.is-first .service-item-content > * {opacity: 1 !important; transform: translate(0px, 0px) !important;}

.values-wrapper .service-item {height: 100%; display: flex}
.values-wrapper .service-item .service-item-content {text-align: left;}
.values-wrapper .service-number {top:26%;}
.values-wrapper .service-item:nth-child(even) .service-item-content {flex-direction: row-reverse;}

/**** VALUES *****/


.scroll_wrap {position: relative; height:100svh;}

.scroll_section {position: absolute;left: 0%;top: 0%;right: 0%;bottom: 0%;display: flex;width: 100%;height: 100svh;flex-wrap: nowrap;align-items: center;justify-content: space-between;visibility: hidden;padding: var(--spacing--8em);}

.scroll_section.is-active {
  visibility: visible;
}

.scroll_section:nth-child(even) {flex-direction: row-reverse;}

.value-item-text {display: flex; flex-direction: column; grid-gap:1em; width:50%; padding-right: 8em;}

.service-img {width: 70%;height: auto;display: flex;justify-content: center;align-items: center; position: relative; top: -1em}

.value-number {position: absolute; left: 2em; top: 28%; transform: translateY(-50%); font-size: 0.8em; font-weight: 600;}



.values-progress {
  position: absolute;
  height: 40%;
  width: 2px;
  left: 2em;
  background: rgba(0, 0, 0, 0.2);
  top: 50%;
  transform: translateY(-50%);
}

.values-progress-bar {
  height: 100%;
  background: black;
  transform: scaleY(0.2); /* Start at 0 */
  transform-origin: top; /* Grow from the top */
  transition: transform 0.3s ease-out; /* Smooth transition for non-GSAP cases */
}


.values {min-height: 35em; transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);}


.values .word {display: flex !important;}
.values .text-in-grid {grid-gap:0.8em}
.values .text-in-grid h3 {margin-bottom: 0.2em;}

/* Background colors for every 5 elements */
.values:nth-child(5n+1):before, .scroll_section:nth-child(5n+1) {
/*  background-color: #FEF96C;*/
  visibility: visible;
}

.values:nth-child(5n+2):before, .scroll_section:nth-child(5n+2) {
  background-color: #FF7F53;
}

.values:nth-child(5n+3):before, .scroll_section:nth-child(5n+3) {
  background-color: #FF727C;
}

.values:nth-child(5n+4):before, .scroll_section:nth-child(5n+4) {
  background-color: #E783FF;
}

.values:nth-child(5n):before, .scroll_section:nth-child(5n) {
  background-color: #6EC7FF;
}


.news-list-item h4, .news-list-item svg {position: relative;}
.news-list-item .right-arrow {transition-property: opacity; opacity:0}
.news-list-item:hover .right-arrow {opacity:1}
.news-img {
  transition-property: transform, opacity;
  opacity:0;
  transform: translateY(1em);
}
.news-list-item:hover .news-img {
  opacity:1;
  transform: translateY(0em);
}

.lets-talk {
  padding-top: var(--spacing--5em);
  padding-bottom: var(--spacing--8em);
}



.culture-text-line-middle {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  align-self: flex-end;
  display: flex;
}

.culture-text-line-middle.middle {
  align-self: flex-end;
}

#w-node-_37a2cac0-12d7-24cd-027e-0712ed4c39d5-e3e79669 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_4a9830a2-02b2-4fca-d022-b36a02137211-e3e79669 {
  justify-self: start;
}

#w-node-_1f92802a-2e72-24a8-110e-d29674232ca3-e3e79669, #w-node-c359badc-c1cc-248f-0300-6b20c3b1a9d2-e3e79669 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-c3524969-710d-b255-4fd3-85c0b5003e0c-e3e79669 {
  justify-self: start;
}

#w-node-c3524969-710d-b255-4fd3-85c0b5003e11-e3e79669 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_1d573488-7f5a-1a3a-adf8-e26bffdf0be7-e3e79669 {
  justify-self: center;
}

#w-node-_36b72081-7f73-0fe4-029b-037ea1aee817-e3e79669 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_36b72081-7f73-0fe4-029b-037ea1aee818-e3e79669 {
  justify-self: start;
}

#w-node-_36b72081-7f73-0fe4-029b-037ea1aee81d-e3e79669 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}



/***** SCROLL ACCORDION *****/

.sticky-wrapper {
    height: 350vh;
    padding-top: var(--spacing--8em);
    padding-bottom: var(--spacing--8em);

}

.sticky-element {
    position: -webkit-sticky;
    position: sticky;
    top: 8em;
    width: 100%;
    height: 100vh;
}

.sticky_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.sticky_item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.sticky_item h5 {position: absolute;top: 0.4em;}

.sticky_item_inner {padding-left: var(--spacing--8em);}

.sticky_inner_content {align-self: center; padding: 0 var(--spacing--3em);}

.title-bar {
  width: 100%;
  padding: 2em 0em;
  border-top: 1px solid var(--swatch--black);
  background-color: var(--swatch--white);
  position: relative;
}

.title-name {
  font-size: 1.1em;
  line-height: 1.2;
  font-weight: 700;
}

.sticky_img {
  width: 100%;
  height: 0%;
  padding: 0px;
  background-color: var(--swatch--white);
  overflow: hidden;
}

.accord-img {
  height: 22vw;
  position: relative;
  width: 31vw;
  justify-self: end;
  margin-top: 3em;
}

.accord-img.alt{
  height: 29vw;
    position: relative;
    width: 29vw;
    justify-self: end;
    margin-top: -3em;
}


.align-left {padding-left: var(--spacing--8em);}

.stat-section {
    padding-top: var(--spacing--12em);
    padding-bottom: var(--spacing--12em);
}

.stat_title {line-height: 1;display:flex;width: 100%;align-items: center;justify-content: space-between;text-align: right;}
.stat_title .suffix {];font-size: 16em;width: 50%;justify-self: flex-start;display: flex;}
.stat_title .number {font-size: 16em;width: 50%;}
.stats_swiper {}

.stats_swiper .swiper-nav {position: absolute; right: 0; bottom:0;}
.stats_swiper .swiper-button-next, .stats_swiper .swiper-button-prev {}

.stat-slide {padding-left:49.2em; display: flex; padding-right:6em;}

.stats_swiper .swiper-navigation {margin-top:3em}
    




/***** APPROACH *****/

.c-suite-section {position: relative;}
    .sticky-trigger-wrapper {
      position: relative;
    width: 100%;
    padding-top: 80vh;
    z-index: 1;
    pointer-events: none;
    }
.sticky-trigger-item {
  outline: 0px solid red;
    width: 100%;
    height: 70vh;
}
.sticky-content-wrapper {
  position: absolute;
    height: 100%;
    top: 0;
    width: 100%;
}
.sticky-content-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  height: 100vh;
}

.services {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 50%;
  left: 9.25em;
  margin-top: -8em;
}

.service {
  width: max-content;
  height: 4em;
}

.we-are {position: absolute; margin-top: -2em;}

.service.active {color: #fff}

.service h3 {
  text-transform: uppercase;
  transition: color 0.3s;
  line-height: 1;
}

.service-wrapper {
    width: 100%;
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-item {
    position: absolute;
    width: 100%;
    padding: 0 3em 0 9.25em;
}


.service-item-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.service-text {
    width: 75%;
    text-align: left;
    padding-top: 10em;
    padding-right: 0em;
    height: 10em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-gap:0.75em;
}

.service-number {
  position: absolute;
    left: -9.5em;
    top: 0%;
    transform: translateY(-50%);
    font-size: 0.8em;
    font-weight: 600;
}



.service-copy-wrapper {
    text-align: center;
    position: relative;
}
.service-copy {width:100%;height: 9em;margin-top: 1em;text-align: center;}


.line {position: relative; will-change: transform;}

.progress-bar {
  position: absolute;
  height: 40%;
  width: 2px;
  left: 2em;
  background: rgba(0, 0, 0, 0.2);
  top: 50%;
  transform: translateY(-50%);
}

.progress {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}

/**** VALUES ****/

.values-section {position: relative;}
.value-wrapper {width:100%}
.value-item {width:100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.value-item-content {}



/**** ACCORDION ****/


.heading-wrapper {    padding: 0 var(--spacing--8em) var(--spacing--2em);}

.accordion-wrapper {margin-top:var(--spacing--4em)}
.accordion {
    border-top: 1px solid;
    
}
.accordion:last-child {border-bottom: 1px solid;}
.accordion-header {position: relative; padding: 0.6em 0; transition: ease padding 0.3s, ease color 0.3s;}
.accordion-header h3 {font-size: 3em;transition: ease font-size 0.8s; position: relative; display: flex; grid-gap: 0.2em;}
.accordion-header h3 span {font-size: 30%; line-height: 1; margin-top: 0.1em;}
.accordion-body {grid-template-rows: 0fr; transition: ease all 0.8s, ease font-size 0s; display:grid; opacity:0;}
.accordion-body p {max-width: 22em;font-size: 1.5em;line-height: 1.1;padding-top: 1.5em;}
.accordion-body > div {overflow: hidden;display: flex;justify-content: space-between;align-items: flex-start;}
.accordion-body img {width: auto;height: 20em;margin-bottom: 2em;object-fit: contain;}
.open .accordion-body {grid-template-rows: 1fr;padding-bottom: 0em;padding-top: 0em;opacity:1;}


.textonly .accordion-body > div {flex-direction: column;}
.textonly.open .accordion-body {padding-bottom: 3em; padding-top: 1em;}
.textonly .accordion-body p {    max-width: 1000px;
    font-size: 1.25em;
    line-height: 1.1;
    padding-top: 1.1em;}

.accord-img {    width: 50%;
    display: flex
;
    justify-content: center;
    align-items: center;}

.open-close-wrapper {width:1.5rem;}

.open-close {  
    --thickness: 2px;
  --gap: 1rem;
  --rotate: 45;
  --width: 100%;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  grid-row-gap: var(--gap);
}
.open-close-line {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: ease;
  background-color: currentColor;
  height: var(--thickness);
  width: var(--width);
}

.open-close-line:first-child {
  transform: translateY(calc(var(--thickness) * 0.5 + var(--gap) * 0.5)) rotate(0deg);
}

.open-close-line:last-child {
  transform: translateY(calc(var(--thickness) * -0.5  + var(--gap) * -0.5)) rotate(90deg);
}

.open .open-close-line:first-child {
  transform: translateY(calc(var(--thickness) * 0.5 + var(--gap) * 0.5)) rotate(calc(var(--rotate) * -1deg));
}

.open .open-close-line:last-child {
  transform: translateY(calc(var(--thickness) * -0.5  + var(--gap) * -0.5)) rotate(calc(var(--rotate) * 1deg));
}



.lottie-animation {
  width: 100%; /* Adjust width as needed */
}
.lottie-animation.one {
  height: 9em;
}
.lottie-animation.two {
  height: 19em;
}
.lottie-animation.three {
  height: 29em;
}
.lottie-animation.four {
  height: 39em;
}


.work-header.one video {
  height: 8em;
}

.work-header.two video {
  height: 18em;
}
/***** WORK - Case Studies *****/


.work-header {padding-top: var(--spacing--8em); padding-bottom: var(--spacing--8em)}
.video-headline {width: 88em; max-width: 1328px;}
.pill {text-transform: uppercase;
    border: 1px solid;
    border-radius: 0.5em;
    font-weight: 500;
    line-height: 1;
    padding: 0.25em 0.7em 0.25em;
    transition-property: background-color, color;
    font-size: 1.25em;}
.pill:hover, .pill.active {background: var(--swatch--purple); color: var(--swatch--white); border-color:var(--swatch--purple)}


  .feature-project {
    position: relative;
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:var(--swatch--black);
}
.scaleup {transform:scale(1.1);}
.parallax .img-absolute {height: 120%; transform: translate(0, -30%);}
.parallax .blurimg {filter: blur(20px); height: 120%; width:110%; opacity: 0.9; transition-property: opacity, filter;
    transform: translate(0, -30%);}
.scaleup.hovered {transform:scale(1.1);}
.parallax.hovered .blurimg {opacity: 0.6; filter: blur(30px);}

  .feature-insert {
    width: 65vw;
    position: absolute;
    height: 36vw;
    max-height: 49vh;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transition-property: clip-path;
    clip-path: polygon(3% 0%, 97% 0%, 97% 100%, 3% 100%);
}

.feature-project-video {transform:scale(1.05); opacity:0; transition-property: opacity, transform;}

.feature-cover {transition-property: opacity;}
.feature-insert:hover {clip-path: polygon(0 3%, 100% 3%, 100% 97%, 0 97%);}
.feature-insert:hover .feature-cover {}

.feature-insert:hover .feature-project-video {transform:scale(1); opacity:1;}

  .feature-info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--swatch--white);
    z-index:2;
    padding: var(--spacing--1-25em);
    pointer-events: none;
}
  .project-name-img {position: absolute;}


/***** WORK - All Projects *****/

.projects-filter {
  border-top: 1px solid;
    border-bottom: 1px solid;
    margin-right: var(--spacing--1-25em);
    margin-left: var(--spacing--1-25em);
    padding: 1.2em 0 1em;
}

.filters {display: flex;
    grid-gap: 1em;}


    .filters input[type='checkbox'] {display: none;}
    .service-pill.large {display: flex; font-size: 1.25em; font-weight: 500; transition: ease color 0.2s;}
    .service-pill.large .subheading {font-size: 0.6em; position: relative; top: -0.7em; left: 0.4em;}
    .service-pill.large:hover, .filters input[type="checkbox"]:checked + span {color: var(--swatch--purple)}


.allprojects {padding-top: var(--spacing--1-25em); grid-gap: 0;}

  .project-tile {
    position: relative;
    height: 33vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    }

    .project-tile h3 {font-size: 3.9em}
  .project-tile-meta {
    text-align: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing--1-25em) var(--spacing--8em);
    position: relative;
/*    mix-blend-mode: difference;*/
    
    transition: ease color 0.3s;
}

    .project-tile-img {
    height: 100%;
    inset: unset;
    width: 100%;
    position: absolute;
    transition-property: transform, opacity;
    transform: scale(1.1);
    opacity:0;

}


.project-tile:hover .project-tile-img {transform: scale(1); opacity:1;}
.project-tile:hover .project-tile-meta {color: white;}
.project-tile:hover .outlined, .home-project:hover .outlined {color: white; -webkit-text-stroke-color: transparent;}



.black-overlay {background: var(--swatch--black); opacity: 0.1; position: absolute; inset: 0; }
.empty {height:2em;}

.hidden-content {
  --x: 0px;
  --y: 0px;
  --size: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blue;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb9c84",endColorstr="#812470",GradientType=1);
  color: var(--bg);

  --mask: radial-gradient(
    circle at calc(var(--x) - (var(--size) / 2) + 14em) calc(var(--y) - (var(--size) / 2) + 14em),
    black var(--size),
    transparent 0
  );

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  pointer-events: none;
  visibility: hidden;
}




/***** WORK - Clients *****/

.client-item {

    border-top: 1px solid var(--swatch--black);
    justify-content: center;
    align-items: center;
    min-height: 5.7em;
    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    display: flex;
    position: relative;
    text-align: center;
    transition-delay:0.2s;

}

.client-item.grid-3 {
  grid-template-columns: 2fr 2.5fr 0.5fr;
    grid-auto-columns: 1fr;
    display: grid;
    text-align: left;
;
}

.client-item .align-right {justify-self: end;}

.client-item:last-child {border-bottom: 1px solid var(--swatch--black) }

.client-item p {position: relative; transition: padding 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);}
.client-item:hover p:first-child {padding-left:0.4em;}
.client-item:hover p.align-right {padding-right:0.4em;}
.image-cursor {
z-index: 13;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    max-width: 16em;
    margin-top: -5.5em;
    margin-left: -8em;
    transition: opacity .6s;
    position: fixed;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
    overflow: hidden;
    height: 11em;
}

.cursor-image-wrapper {
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    transform: translate(0, 100%);
    overflow: hidden;
}

.image-cursor.visible {
    opacity: 1;
}










/*** WORK - SINGLE CASE STUDY ***/


.single-project {}
.single-project.is-dark {background: var(--swatch--black) !important; color: var(--swatch--white);}
.is-dark .outlined {-webkit-text-stroke-color: white;}
.is-dark .lottie-footer-animation {filter: invert(1)}
.is-dark .link:hover {color: var(--swatch--white); opacity:0.7}
.is-dark .playing {color: var(--swatch--white);}
.is-dark .playing .play-dot {background: var(--swatch--white); color: var(--swatch--black);}
.single-project .p-medium, .single-thinking .p-medium {font-size: 2.4em;}
.single-project .project-meta {display: block}

.readtime {margin:2em 0;}

.project-intro-text p {margin-bottom: 1em;}
.project-intro-text .p-medium p {font-size: 1em;}

.single .project-intro a, .single .intro-text-section a, .single .project-intro-text a {
background-image: linear-gradient(var(--color, currentColor), var(--color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    -moz-transition-property: background;
    -o-transition-property: background;
    -webkit-transition-property: background;
    transition-property: background;
    -moz-transition-duration: .6s;
    -o-transition-duration: .6s;
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    -moz-transition-timing-function: "cubic-bezier(0.25, 0.8, 0.25, 1)";
    -o-transition-timing-function: "cubic-bezier(0.25, 0.8, 0.25, 1)";
    -webkit-transition-timing-function: "cubic-bezier(0.25, 0.8, 0.25, 1)";
    transition-timing-function: "ecubic-bezier(0.25, 0.8, 0.25, 1)";
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
.single .project-intro a:hover, .single .intro-text-section a:hover, .single .project-intro-text a:hover {color: var(--swatch--purple); background-size: 0% 1px; }

.clip {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
.play-dot {width: 2em;border: 1px solid;height: 2em;border-radius: 50px;display: flex;justify-content: center;align-items: center;padding: 0.4em;]em;]4em;]em;}
.play-dot svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    left: 0.1em;
}
#pause-icon {left: 0}

.playing {color: var(--swatch--purple)}
.playing .play-dot {background: var(--swatch--purple); color: var(--swatch--white);}

.readtime .link {width:50%;}
#audioControls, .timeline-container {width:100%}

#audioTimeline {
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    appearance: none; /* Remove default styling for other browsers */
    width: 100%;
    height: 2px; /* Set the track height */
    background: linear-gradient(to right, #641dff 0%, #ccc 0%); /* Initial gradient */
    border-radius: 5px; /* Optional: Rounded edges */
    outline: none; /* Remove the outline */
    cursor: pointer;
}

/* WebKit browsers (Chrome, Safari) */
#audioTimeline::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    background: transparent; /* Background handled by the parent element */
}

#audioTimeline::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default thumb styling */
    appearance: none;
    width: 12px; /* Thumb width */
    height: 12px; /* Thumb height */
    background: #641dff; /* Thumb color */
    border-radius: 50%; /* Optional: Circular thumb */
    cursor: pointer;
}

/* Firefox */
#audioTimeline::-moz-range-track {
    background: transparent; /* Background handled by the parent element */
    height: 2px;
}

#audioTimeline::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #641dff;
    border-radius: 50%;
    cursor: pointer;
}

/* IE/Edge */
#audioTimeline::-ms-track {
    background: transparent; /* Remove default track */
    border-color: transparent;
    color: transparent;
    height: 2px;
}

#audioTimeline::-ms-thumb {
    width: 12px;
    height: 12px;
    background: #641dff;
    border-radius: 50%;
    cursor: pointer;
}

#audioTimeline::-ms-fill-lower {
    background: #641dff; /* Progress color */
}


.subheading.sml {
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.project-header {
    padding-top: var(--spacing--8em);
}
.project-header .variable-text-wrapper {
    text-align: left;
    align-items: flex-start;
    padding: 2em 0 7em;
    grid-gap: 0.5em;
}

.project-header .variable-text-wrapper h2 {margin:0; line-height: 0.9}

.project-meta .grid-3, .project-meta .grid-4 {
    border-top: 1px solid;
}

.project-meta-col {
    display: grid;
    grid-template-columns: 0.2fr 1fr;
    padding: 0.4em 0;
	align-items: center;
}




.project-hero {
  height: 45vw; max-height: 1000px; position: relative; overflow: hidden;
}

.project-intro {
    margin: var(--spacing--2em) 0 var(--spacing--5em);
}
.services-list {
    list-style: none;
    padding: 0;
    margin-top: 0;
}
.services-list li {
    font-size: 1.5em;
    line-height: 1.2em;
    margin-bottom: 0.1em;
}

.media-player {
    position: relative;
    overflow: hidden;
    margin: var(--spacing--5em) var(--spacing--1-25em);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.media-player video {
    width: 100%; transform: scale(1.0) !important;
}
.media-player .play-btn {
    position: absolute;
    z-index: 3;
}

	.media-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
		pointer-events: all;
  transition: opacity 0.3s ease;
}
	
.media-cover.invisible {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-media {
    margin: var(--spacing--5em) var(--spacing--1-25em);
    overflow: hidden;
    padding: 0;
}
.project-media img, .project-media video {
    width: 100%;
}

.project-media video {background:#303030}

.project-media .p-small {margin-top:0.7em;}


.project-text-section {
    margin: var(--spacing--5em) 0;
}

.project-text-section .clip {
  display: inline-flex;
  align-self: start;
  position: relative;
  top: 0.5em;
  }


.project-text-section .grid-2 .p {grid-column-start: 2}

.project-intro-text {
    margin-bottom: 3em;
}
.project-intro-text .p-medium {
  margin-bottom: 0.5em;
}

.project-split-media {
    margin: var(--spacing--5em) 0;
}
.split-media {
    position: relative;
    height: 34vw;
    overflow: hidden;
  margin-bottom:0.5em;
}
.project-split-media > div:last-child .split-media {margin-top: 7em;}
.split-media.tall {height: 52vw;}
.split-media.wide {height: 34vw;}


.project-testimonial {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
    margin: var(--spacing--9em) 0;
}
.project-testimonial > div {
grid-column: 2 / 5;
    display: flex;
    flex-direction: column;
    grid-gap: 1em;
  }


.project-credits {
    margin: var(--spacing--5em) var(--spacing--1-25em);
    border-top: 1px solid;
    padding: 0.5em 0;
}

.credit-row {border-bottom: 1px solid;padding: 0.5em 0;}
.credit-row:first-child {padding-top:0;}
.credit-row:last-child {padding-bottom: 0; border-bottom: 0;}
.credit-row p {margin-bottom:0;}






.related-projects {margin: var(--spacing--11em) 0;}
.related-title {}
.related-title h4 {}
.related-title h4:first-child {
    padding-left: 2em;
}

.related-projects-wrapper {grid-gap: var(--spacing--1-25em);padding: 0 14em;margin: 4em 0;}
.related-single {}
.related-tile {
    position: relative;
    height: 27vw;
    margin-bottom: 0.6em;
    overflow: hidden;
}
.related-tile img {transform: scale(1.05); transition: transform 0.6s cubic-bezier(.215, .61, .355, 1);}
.related-single p {
    transition: opacity 0.6s cubic-bezier(.215, .61, .355, 1), transform 0.6s cubic-bezier(.215, .61, .355, 1);
    transform: translateY(5px);
    opacity: 0;
}

.related-single:hover p {transform: translateY(0); opacity:1;}
.related-single:hover img {transform: scale(1);}




/**** THINKING *****/


.thinking-articles {}

.thinking-article-item {
height: auto;
    display: flex;
    border-top: 1px solid;
    padding: 1em 0;
    position: relative;
    transition: ease color 0.3s;
}

.thinking-article-item:first-child {border-top:0; }

.thinking-article-bg {position: absolute; inset: 0%; background: transparent; transition: ease background 0.3s; z-index: 0; left: -1.25em; right: -1.25em;}
.thinking-article-meta {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.thinking-cat {
    margin-bottom: 1em;

}
.thinking-article-meta h2 {
    font-size: 4em;
    margin-bottom: 0.3em;
    padding-right:0.5em;
    transition: ease all 0.3s, ease font-size 0s;
}
.thinking-article-item:hover {color: var(--swatch--white)}
.thinking-article-item:hover .thinking-article-bg {background: var(--swatch--black);}
.thinking-article-item:hover .outlined {color: var(--swatch--white); -webkit-text-stroke-color: transparent;}

.page-template-thinking .thinking-article-item:hover .outlined, .page-template-thinking .thinking-article-item:hover {color: #E8FFB9;}
.page-template-thinking .work-header video {mix-blend-mode: multiply;}

.thinking-article-meta p {}
.thinking-article-meta .link {}
.thinking-article-img {
    position: relative;
    height: 100%;
    width: 50%;
}
.thinking-article-img img {
    width: 30%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}



/***** CAREERS ******/

.careers-section .grid-3 {grid-template-columns: 2fr 1fr 1fr;}

.careers-accordion {}
.careers-accordion:last-child {border-bottom: 1px solid}
.careers-accordion .accordion-body > div {flex-direction: column; align-items: stretch; padding-left: 4em; padding-right: 4em;}
.careers-accordion .accordion-body p {
max-width: unset;
    padding: 0;
}

.careers-accordion .link {justify-self: flex-end; transition: none;}

.open.careers-accordion .accordion-body {padding-top: 2em; padding-bottom: 4em}
.careers-subheading {border-bottom: 1px solid #ADADAD;
    padding-bottom: 0.2em;
    margin-bottom: 1em;}

.careers-list {    border-bottom: 1px solid #ADADAD;
    padding-bottom: 0.5em;
    margin-bottom: 0.75em;
    transition: color 0.2s ease;
}




.careers-list:hover {color: var(--swatch--purple)}

/**** ARTICLE - THINKING *****/

.single-thinking, .page-template-thinking {background: #E8FFB9 !important}






/**** NEWS LIST *****/


.news-tile {border-bottom: 1px solid; padding-bottom: 1.5em; margin-top: 1.5em;}
.news-img-tile {position: relative; height: 40vw; margin-bottom: 1.1em; overflow: hidden;}
.news-tile h3 {text-transform: none; margin-bottom: 0.2em; font-weight: 600;}




/*** CULTURE ***/
.img-swiper {width:40vw; overflow: visible;}
.img-slide {height:31vw;}
.numbering {position: absolute; left:var(--spacing--1-25em); top: var(--spacing--1-25em);}

.our-story {overflow: hidden; padding-top: var(--spacing--8em);}
.work-with-us {overflow: hidden; padding-top: var(--spacing--12em); padding-bottom: var(--spacing--8em); background: var(--swatch--white)}
.careers-section {background-color: var(--swatch--white);}

.marquee-photo_wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 2em;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.marquee-photo_panel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.marquee-photo_item {
  width: 30vw;
  margin-right: -1.5em;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.marquee-photo_item:nth-child(even) {transform: rotate(4deg);}
.marquee-photo_item:nth-child(odd) {transform: rotate(-6deg);}

.marquee-photo_height {
  position: relative;
  width: 100%;
}

.marquee-photo_img {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  border-radius: 0.63em;
  -o-object-fit: cover;
  object-fit: cover;
}





/*** marquee text ***/

.marquee-text_wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.marquee-text_wrapper.is-2, .marquee-text_wrapper.true {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.marquee-text_panel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-transform: translate(0%, 0px);
  -ms-transform: translate(0%, 0px);
  transform: translate(0%, 0px);
}

.marquee-text_text {
  padding: 0.12em 0;
  font-size: 9.5em;
  text-transform: uppercase;
  line-height: 0.75;
  letter-spacing: -0.04em;
}

.marquee-text_icon {
  width: 12em;
  margin-right: 1em;
  margin-left: 1em;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}





/****** 404 ********/


.error404 .lets-talk {display: none; visibility: hidden;}
.error-page {
    min-height: 70vh;
    padding-top:12em;
    padding-bottom: 12em;
    display: flex;
    justify-content: center;
    align-items: center;
	background: white;
}
.text404 {font-size: 27em;
    position: absolute;
    font-weight: 700;
    letter-spacing: -0.03em;}
.error-page p {
    color: white;
    mix-blend-mode: difference;
}




/**** DEFAULT PAGE *****/


.default-template {
    padding-top: 8em;
}
.default-header.first-section {padding-top: 8em;}
.default-header h1 {
    font-size: 10em;
}
.default-header p {
    border-top: 1px solid;
    margin-top: 8em;
    padding-top: 0.5em;
    margin-bottom: 4em;
}
.default-content {
    padding-left: 27em;
}
.default-content p { margin-bottom: 1.2em;}
   
.wysiwyg {padding-top: var(--spacing--4em); padding-bottom: var(--spacing--4em); max-width: 1000px;}




/* font-face removed */
/* font-face removed */


/* font-face removed */
/* font-face removed */


.mobile, .mobile-f, .culture-swiper-wrapper picture.mobile {display:none}
.tablet, .tablet-f {display:none}
.desktop {display:block}
.desktop-f {display:flex}


.filter-btn, .apply-btn {display:none}



    .popup {
      transition: opacity 0.3s ease;
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: white;
      z-index: 1000;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-direction: column;
    }

    .popup img, .popup video {margin-top: -6vw;
    width: 23em;
    max-width: 480px;}

    .popup p {    margin-bottom: 0;
    margin-top: -3em;}




/**** LANGUAGE UPDATES ****/


.service .outlined.solid {color: black }

/*** CHINESE + KOREAN ***/

body.lang-zh-hans .p-large,
body.lang-ko .p-large,
body.lang-zh-hans h3,
body.lang-ko h3,
body.lang-zh-hans .h3,
body.lang-ko .h3,
body.lang-zh-hans .accordion-body p,
body.lang-ko .accordion-body p {
    line-height: 1.2em;
}

body.lang-zh-hans .service, body.lang-ko .service {height: auto;}

body.lang-zh-hans .outlined {
    -webkit-text-stroke-width: 0px;
  color: black;
}

body.lang-zh-hans .home-project h3.outlined {color: white}

body.lang-zh-hans .service .outlined.solid {color: var(--swatch--purple) }



/*** ARABIC ***/

body.lang-ar {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
}


body.lang-ar h3, body.lang-ar .h3 {line-height:1.3}

body.lang-ar .outlined {
/*  font-family: 'Booton Medium', sans-serif !important; */
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600;
  -webkit-text-stroke-width: 0px;
  color: black;
}

body.lang-zh-hans .home-project h3.outlined,
body.lang-ar .home-project h3.outlined{
	    -webkit-text-stroke-width: 1px;
  color: black;
}

body.lang-zh-hans .home-project:hover h3.outlined,
body.lang-ar .home-project:hover h3.outlined{
	    -webkit-text-stroke-width: 1px;
  color: white;
}

body.lang-zh-hans.single-project .outlined, body.lang-ar.single-project .outlined {
    -webkit-text-stroke-width: 1px;
  color: white;
}

body.lang-zh-hans.single-project.is-dark .outlined, body.lang-ar.single-project.is-dark .outlined {color:black}


body.lang-ar .allprojects .outlined, 
body.lang-ar .default-header h1, 
body.lang-ar.page-template-news .outlined,
body.lang-ar.single-post .outlined {-webkit-text-stroke-width: 1px; color: white;}



body.lang-ar.single-thinking .outlined, body.lang-zh-hans.single-thinking .outlined, body.lang-ar.page-template-thinking .outlined  {-webkit-text-stroke-width: 1px; color: #e8ffb9;}


/** BOOTON OVERRIDE ***/

body.lang-ar.home .header .nowrap,
body.lang-ar.page-template-default .header .nowrap,
body.lang-ar .play-video .h1,
body.lang-ar .project-meta,
body.lang-ar .news-list-item h4,
body.lang-ar subfooter p,
body.lang-ar .projects-filter,
body.lang-ar .pill,
body.lang-ar .projects-filter,
body.lang-ar .client-item,
body.lang-ar .default-content p,
body.lang-ar .accordion.textonly,
body.lang-ar .default-header p,
body.lang-ar .wysiwyg p,
body.lang-ar .careers-accordion,
body.lang-ar.page-id-5511 .header .nowrap,
body.lang-ar .contact-detail p,
body.lang-ar .contact-detail h4,
body.lang-ar .project-text-section,
body.lang-ar .readtime,
body.lang-ar .related-projects,
body.lang-ar.page-template-news .grid-2 p,
body.lang-ar.page-template-thinking .grid-2 p,
body.lang-ar.single p,
.project-header .subheading,
.project-header .back-link
{font-family: Booton Upright VF, sans-serif !important;}

body.lang-ar .home-projects .outlined,
body.lang-ar .allprojects .outlined,
body.lang-ar.page-template-news .outlined,
body.lang-ar.page-template-thinking .outlined,
body.lang-ar .default-header h1,
body.lang-ar.single-thinking .outlined,
body.lang-ar.single h1,
body.lang-ar.single .outlined
{font-family: 'Booton Medium', sans-serif !important;}

body.lang-ar .home-project h3.outlined {color: white}

body.lang-ar .careers-accordion .accordion-body p,
body.lang-ar .textonly .accordion-body p,
body.lang-ar .wysiwyg p,
body.lang-ar .default-template p,
body.lang-ar .default-header p,
body.lang-ar .project-text-section p,
body.lang-ar .related-projects .p-large,
body.lang-ar.page-template-news .grid-2 p,
body.lang-ar.page-template-thinking .grid-2 p,
body.lang-ar.single p{
    text-align: left;
    direction: ltr;
}

body.lang-ar .services {align-items: flex-end; left: 5em}
body.lang-ar .service .outlined.solid {color: var(--swatch--purple) }

body.lang-ar .p-large,
body.lang-ar p,
body.lang-ar .text-in-grid,
body.lang-ar .value-item-text,
body.lang-ar .contact-detail
{direction: rtl; text-indent:0; line-height:1.3; text-align: right;}
body.lang-ar h3.slide-indent {text-indent: 0;}
body.lang-ar .service {height: 5em;}

body.lang-ar .footer ul li {margin-bottom: 0.8em;}

body.lang-ar .accordion-header {padding:1.5em 0}
body.lang-ar .accordion-header:hover  {padding:1.5em 1em}

body.lang-ar .subfooter p {text-align: left;}

body.lang-ar .contact-detail .subheading {justify-content: flex-end }

body.lang-ar .wpforms-field-label, body.lang-ar .contact-form-section input, body.lang-ar .contact-form-section select, body.lang-ar .contact-form-section textarea, body.lang-ar .wpforms-submit-container {text-align: right !important;}
body.lang-ar .contact-form-section .wpforms-container {padding-right: 0 !important;}

body.lang-ar .offset-sml-text {margin-left: auto;}



/**** RESPONSIVE *****/



/**** TABLET *****/
@media screen and (max-width: 991px) {

body.overflow {overflow: hidden;}

.desktop, .desktop-f  {display:none}


.mobile, .mobile-f {display:none}

picture.mobile  {display:none !important}
.tablet-f {display: flex}
.tablet {display:block}
.cursor {display:none;}
.hamburger-wrap {--gap: 4px;}

:root {
    --spacing--1-25em: 15px;
    --spacing--2em: 30px;
    --spacing--5em: 35px;
    --spacing--6em: 40px;
    --spacing--8em: 40px;
    --spacing--9em: 45px;
    --spacing--10em: 80px;
    --spacing--12em: 100px;
    --spacing--13em: 120px;



  }

body, p, .p, .accordion-body p, .pill, .service-pill.large, .services-list li, .textonly .accordion-body p {font-size: 18px;}
h1, .h1, .default-header h1 {font-size:100px;}
h3, .h3, .home-project h3, .project-tile h3, .project-header .h1 {font-size:55px;}
.story-slide h3, .service h3 {font-size: 45px;}
h4, .h4, .accordion-header h3 {font-size: 34px;}
.p-small, .service-pill.large .subheading {font-size: 12px;}
.p-medium, .project-intro-text .p-medium p, .single-project .p-medium, .single-thinking .p-medium {font-size: 28px;}
.p-large {font-size: 36px;}
.subheading.sml {font-size: 11px;}
.fine-print {font-size: 13px; !important}
.marquee-text_text {font-size: 120px}


.lottie-nav-animation {height: auto; max-height: none;}
.link-large {border-radius: 11px; padding: 10px 20px;}
.large-arrow {width: 20px;}


.intro-text-section {padding-right:var(--spacing--2em); padding-left: var(--spacing--2em) }
.subheading.align-right {padding-left: 0;}

.marquee-text_icon {width: 156px; height: 125px; object-fit: contain;}

.sub-arrow, .back-link svg {width: 15px;}

.container.narrow {
    padding-right: var(--spacing--1-25em);
    padding-left: var(--spacing--1-25em);
}

.default-content {padding-left: 0;}
.default-content p {word-wrap: break-word;}
.default-content a {text-decoration: underline;}

/**** HOME ****/

.hero-home {height:100svh;}
.video-wrapper {height:90svh;}
.play-btn {width: 140px; height: 72px; padding: 16px 16px 16px 27px;}
.news-img {max-width: 10em; max-height: 10em; right: 10em;}

/*** APPROACH ***/
.service {height: auto;}
.services {left:100px;}
.service-item {padding: 0 50px 0 100px;}
.service-text {width: 50%; padding-top: 210px; height: auto;}
.service-img {width: 50%; padding: 40px; padding-right: 0;}
.service-number {left: -70px; font-size: 14px;}
.progress-bar {height: 30%;}

.accordion-body img {height: 200px;}

.stat_title .number, .stat_title .suffix {font-size: 140px;}
.stat-slide {padding-left:50%;}

.stat-section, .swiper-navigation {padding-right:var(--spacing--2em); padding-left: var(--spacing--2em) }
.stats_swiper .swiper-navigation {margin-top: 60px;}
.swiper-navigation svg {width: 40px;}
.swiper-arrows {grid-gap:10px;}
	
	
body.lang-ar .services {padding-right: 25px; left: auto; right: 0;}
.services {
        left: 25px;
        width: auto;
        margin-top:-30vh;
    }

    .service-item {
        padding: 0 25px 0;
    }

    .service-item-content {flex-direction: column}
    .service h3 {font-size: 40px; line-height: 1;}
    .service-text {
        width: 100%;
        padding-top: 40vh;
        text-align: left;
    }
    .service-img {
        width: 60%;
        padding: 0px;}

        .progress-bar {
    position: absolute;
    height: 40%;
    width: 2px;
    left: 50%;
    background: rgba(0, 0, 0, 0.2);
    top: -7vh;
    transform: translateX(-50%) rotate(-90deg);
}


.accordion-header:hover {padding: 0.6em 0;}
.news-list-item:before, .client-item:before, .accordion-header:before {display: none;}

/**** CULTURE *****/

.story-slide .subheading {top: 30px; left: 50px;}
h3.slide-indent, p.slide-indent {text-indent: 80px;}

.scroll_section {padding: var(--spacing--10em);}
.value-item-text {padding-right: 30px; padding-left: 30px;}
.careers-accordion .accordion-body > div {padding-right:var(--spacing--2em); padding-left: var(--spacing--2em) }


.overflow-content {padding:0;}
	
	
.scroll_wrap, .scroll_section {height: 100dvh;}
.scroll_section, .scroll_section:nth-child(even) {padding: 90px 20px 20px; flex-direction: column; justify-content: center;}
.value-item-text {width: 100%; text-align:left;}
.value-item-text p {max-width: 80%}
.values-wrapper .service-item:nth-child(even) .service-item-content {flex-direction:column;}
.scroll_section .service-img { width: 50%; padding: 0px; margin-top: 30px;}
.values-progress {
  position: absolute;
    height: 40%;
    width: 2px;
    left: 50%;
    background: rgba(0, 0, 0, 0.2);
    top: -7vh;
    transform: translateX(-50%) rotate(-90deg);
}

.value-number {display: none;}

.value-item-text h3, .service h3 {font-size: 51px;}
    .value-item-text {
        padding-right: 0px;
        padding-left: 0px;
    }

/***** PAGE VIDEO HEADERS *****/
.work-header.two video, .work-header.one video {height: auto; width: 80%;}
.lottie-animation.one, .lottie-animation.two, .lottie-animation.three, .lottie-animation.four {height: auto;}

/**** WORK ****/
.text-placeholder {height: auto !important; width: 90%;}
.work-header, .project-header {padding-top: var(--spacing--12em);}
.pill {border-radius: 7px; padding: 5px 11px;}
.client-item {min-height: 60px;}
.project-tile {height: 60vw;}
.project-tile-img {opacity: 1; transform:scale(1)}
.project-tile .project-tile-meta {color: white;}


/**** PROJECTS ****/
.project-meta-col {grid-template-columns: 0.3fr 1fr; grid-gap:10px;}
.services-list {margin-top: 50px;}
.related-projects-wrapper {padding: 0 0px;}
.related-tile {height: 38vw;}
.related-single p {transform: translateY(0); opacity: 1;}

	
/*** CASES ***/
.home-project {margin: 0px 0px 50px; width: auto; display: flex; flex-direction: column;}
.home-project .project-meta {position: relative; padding-top: 10px; margin-bottom: 5px; color: var(--swatch--black) !important; mix-blend-mode: normal}
.project-list-video {        height: 85vw;
        align-items: flex-start;
        padding-top: 30px;}
.project-list-video .img-absolute {opacity: 1; transform: scale(1);}
.project-list-video .lazy-video {opacity: 1;}
.project-tile .outlined, .home-project .outlined, .home-project:hover .outlined {color: white; -webkit-text-stroke-color: transparent;}
.project-meta .hflex-spacebetween {justify-content: flex-end}
.home-project:hover .project-list-video, .home-project:hover .project-meta {color: var(--swatch--black);}
.list-title {max-width: 100%;}
.gradient-overlay {
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    top: 0;
    height: 40%;
    width: 100%;
}

/*** ALL WORK ***/
.project-tile h3 {text-wrap-style: balance;}
.filter-btn, .apply-btn {width: 100%;
        font-size: 16px;
        display: flex;
        text-align: center;
        justify-content: center;}
.work-header .hflex-left-center {flex-wrap: wrap;}
.work-header .p {display: none;}
.grid-2 {grid-gap: 15px;}
.type-canvas-wrapper {padding-bottom: 20px;}
.black-overlay {opacity: 0.2;}
.projects-filter {
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    background: white;
    z-index: 12;
    padding: 50px 15px;
    transition: transform 0.5s cubic-bezier(.215, .61, .355, 1);
    transform: translateX(-100%);
    margin: 0;
    border: 0;
}

.close-filter {
      position: absolute;
    right: 0;
}

.apply-btn {position: relative;margin-top: 60px;padding: 15px;}

.projects-filter.open {transform: translateX(0%);}

.filters, #work-filter-form {flex-direction: column; position: relative;}
.clearall {margin-top: 30px;}
#work-filter-form {align-items: flex-start; margin-top: 30px;}

/*** AWARDS ***/
.image-cursor {display:none;}
.client-item:hover, .accordion-header:hover {color: var(--swatch--black)}
.client-item:hover h4:first-child {padding-left: 0;}
.client-item:hover h4.align-right {padding-right: 0;}


/**** CONTACT FORM ****/
.lets-talk .hflex-center-center {flex-direction: column;}
.contact-form-footer {position: relative;}
.contact-form-top {padding: 40px 60px;opacity: 1 !important; transform: translate(0px, 0px) !important; left:0;}
.contact-form-footer .wpforms-container {padding:20px 15px 20px 40px !important; opacity: 1 !important; transform: translate(0px, 0px) !important; right:0;}
.contact-form-top p {font-size: 16px;}
.contact-form-footer .wpforms-field-label {font-size:16px !important}
.contact-form-footer div.wpforms-container-full .wpforms-page-button {width:90px; height:90px;}

.contact-form-section .wpforms-container {padding-right: 0em !important;}
.contact-form-section .wpforms-field-label, .contact-form-section input, .contact-form-section select, .contact-form-section textarea,
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {font-size: 18px !important}
.contact-form-section input, .contact-form-section select, .contact-form-section textarea,
.contact-form-section div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {padding: 12px !important; border-radius: 7px !important;}
.contact-form-section .wpforms-field {padding: 0 2px 30px !important;}


.contact-form-section button[type=submit] {font-size: 20px !important; width: 100%;}
.contact-details.offices {grid-row-gap: 40px;}

	
	
	
}


.wrap {flex-wrap: wrap;}


/**** MOBILE *****/
@media screen and (max-width: 767px) {
.tablet {display: none}
.mobile {display: block}
.mobile-f {display: flex}
picture.mobile  {display: block !important}


.nowrap {white-space: nowrap;}
.header.grid-2, .project-meta .grid-2, .subfooter .grid-2 {grid-template-columns:1fr 1fr}
.grid-4 {grid-template-columns:1fr 1fr; grid-row-gap: 40px;}
.grid-2.uneven, .grid-2 {grid-template-columns:1fr}

.link-large .arrow-wrapper {margin-left: 6px; margin-top: 0;}
.marquee-text_icon {width: 90px; height: 80px;}

/*** FONTS ***/
h1, .h1, .marquee-text_text, .default-header h1 {font-size:60px;}
h3, .h3, .project-header .h1 {font-size:50px;}
.home-project h3, .thinking-article-meta h2, .story-slide h3, .project-tile h3 {font-size:40px;}
.p-large, h4, .h4, .client-item h4 {font-size: 27px;}
.p-medium, .project-intro-text .p-medium p, .single-project .p-medium, .single-thinking .p-medium, .news-list-item h4, .news-list-item svg, .service-pill.large {font-size: 22px;}
body, p, .p, .accordion-body p,  .services-list li, .page-template-awards .client-item .p-medium, .accordion-header h3, .textonly .accordion-body p {font-size: 16px;}
.pill {font-size: 12px;}

/*** NAV ***/
.header .hflex-spacebetween {justify-content: space-between}
.scroll-down {z-index: 100}
.lottie-nav-animation {height: auto; max-height: none;}

.page-headline {position: absolute; top: 100px;}


/*** HOME ***/
.video-wrapper {padding-top: 0;}
.video-wrapper .img-absolute {position: relative;}
.culture-video {margin-top:-100px;}
.play-video .h1 {display: none}

/*** TEXT SECTION ***/
.intro-text-section {padding-right: var(--spacing--1-25em); padding-left: var(--spacing--1-25em); padding-top: var(--spacing--6em); padding-bottom: var(--spacing--10em);}
.intro-section {display: flex; flex-direction: column; grid-gap: var(--spacing--1-25em);}
.indent.p-large {text-indent: 50%;}


/*** AWARDS ***/
.client-item.grid-3 {grid-template-columns: 1fr 2fr}

/*** APPROACH ***/


.open-close-wrapper {width: 16px;}
.accordion-body > div {flex-direction: column;}
.accord-img {height: auto; margin-top: 0;}
.accordion-body p {max-width: unset;}
.stat_title .number {width:auto;}
.stat_title {text-align: left; justify-content: flex-start;}
.stat_title .number, .stat_title .suffix {font-size: 120px;}
.stat-slide {padding:15px 0;}
.stats_swiper .swiper-navigation {margin-top:40px; padding:0}
.stat-section, .swiper-navigation {padding-left: var(--spacing--1-25em); padding-right: var(--spacing--1-25em)}

body.lang-ar .services {padding-right: 25px; left: auto; right: 0;}
.services {
        left: 25px;
        width: auto;
        margin-top:-30vh;
    }

    .service-item {
        padding: 0 25px 0;
    }

    .service-item-content {flex-direction: column}
    .service h3 {font-size: 40px; line-height: 1;}
    .service-text {
        width: 100%;
        padding-top: 40vh;
        text-align: left;
    }
    .service-img {
        width: 60%;
        padding: 0px;}

        .progress-bar {
    position: absolute;
    height: 40%;
    width: 2px;
    left: 50%;
    background: rgba(0, 0, 0, 0.2);
    top: -7vh;
    transform: translateX(-50%) rotate(-90deg);
}



/**** CULTURE ****/



    .careers-accordion .accordion-body > div {
        padding-right: 0;
        padding-left: 0;
    }
.accordion-header h3 span {
    font-size: 80%;
    line-height: 1;
    margin-top: 0;
}
.value-item-text h3, .service h3 {font-size: 31px;}

.marquee-photo_item {width:60vw;}
.work-with-us .variable-text-wrapper.narrow {padding:0 15px;}

.careers-list.grid-3 {grid-template-columns: 2fr 1fr}
.open.careers-accordion .accordion-body {padding-top: 10px; padding-bottom: 30px;}


/*** WORK ***/
.project-tile {height: 80vw;}


/**** OUR STORY ****/

.story-slide {margin-right:100vw; padding-top: 20px; padding-bottom: 20px;}
.story-slide .subheading {top: 0; left: 0;}
.story-slide .text-in-grid {padding-right: 60px; padding-left: 0; grid-gap: 20px;}

.culture-swiper-wrapper {padding-right: 0; width: 92%; padding: 20px;}
.overflow-content {flex-direction:column; width:100%;right: -100vw; pointer-events: all;}
.story-swiper .swiper-wrapper {transition-timing-function: ease-out;}
.slide-1 .overflow-content picture:first-child, .slide-2 .overflow-content picture:first-child {width: 80%; padding-top: 10%;}
.slide-1 .overflow-content picture:nth-child(2), .slide-2 .overflow-content picture:nth-child(2) {width: 75%; transform: rotate(-3deg); margin-left: -20px; margin-top: 30px;}
.slide-1 .overflow-content picture:first-child {transform: rotate(6deg);}

.slide-location:nth-child(1) {width: 70%;}
.slide-location:nth-child(1) img {margin-bottom: 10px;}

.slide-location:nth-child(2) {width: 50%; margin-left: 0; position: absolute; bottom: -30px; right: 20px;}
.slide-location:nth-child(2) img {transform: rotate(0deg);}

.slide-3 .overflow-content {right: -100vw; padding: 0 30px;}

.slide-location:nth-child(3) {width: 50vw; margin-left: 0; align-self: flex-start;}
.slide-location:nth-child(4) {width: 50vw; margin-left: 0; align-self: flex-end; position: relative; top: -40px;}
.slide-location:nth-child(5) {width: 50vw; margin-left: 0; align-self: flex-start;}
.slide-location:nth-child(6) {width: 50vw; margin-left: 0; align-self: flex-end;}

.slide-location:nth-child(3) img {aspect-ratio: 16 / 8;}
.slide-location:nth-child(4) img {aspect-ratio: 16 / 8;}
.slide-location:nth-child(5) img {aspect-ratio: 16 / 8;}
.slide-location:nth-child(6) img {aspect-ratio: 16 / 8;}

.slide-4 picture:nth-child(2) {transform: rotate(-11deg); width: 70%; position: absolute; top: 0px; margin-left: 0; height: 70%;}
.slide-4 picture:nth-child(2) img {aspect-ratio: 16 / 8;}
.slide-4 .overflow-content {right: -100vw; padding-right:40px;}
.slide-4 picture:nth-child(4) {transform: rotate(-4deg); width: 80%; margin-left: 0; position: relative; top: 0;}
.slide-4 picture:nth-child(5) {transform: rotate(7deg); width: 70%; margin-left: 0; position: relative; top: 50px;}
.slide-4 picture:nth-child(4) img, .slide-4 picture:nth-child(5) img {aspect-ratio: 16 / 12;}

.grid-2.centered {align-items: flex-start;}

.slide-5 {padding-left:60px;}
.slide-5 .subheading {left:60px}
.slide-5 .culture-swiper-wrapper picture:nth-child(2) {width: 40vw; left: -1vw; bottom: 0; transform: rotate(-7deg);}
.slide-5 .culture-swiper-wrapper picture:nth-child(3) {width: 59vw;transform: rotate(4deg);top: -120px;}
.slide-5 .culture-swiper-wrapper picture:nth-child(4) {width: 42vw; right: 20px; transform: rotate(-5deg); bottom: 0;}

/** ANIMATED TYPE **/
.variable-text-wrapper.narrow {padding:0;}






/*** SINGLE PROJECT ***/
.readtime .hflex-spacebetween {flex-direction: column; align-items: flex-start;}
.play-dot {width: 20px; height: 20px; padding: 4px 4px 4px 3px;}
.project-meta .grid-3 {grid-template-columns:1fr;}
.project-meta-col {border-bottom: 1px solid}
.project-meta .grid-3 .project-meta-col:last-child {border-bottom: 0;}
.services-list {margin-top: 0px; margin-bottom: 30px;}
.project-hero {height: 65vw;}
.split-media.wide {height: 64vw;}
.split-media.tall {height: 112vw;}
.project-split-media > div:last-child .split-media {margin-top: 0;}
.project-text-section .grid-2 .p {grid-column-start: 1;}
.project-intro-text {margin-bottom: 30px;}
.project-split-media {margin:15px 0;}
.related-projects-wrapper {grid-template-columns:1fr 1fr}
.related-projects-wrapper .related-single:last-child {display:none;}
.related-tile {height: 55vw; }

.credit-row > p {font-weight: 600;}
.credit-row {grid-gap:5px; padding: 15px 0}

.project-testimonial {grid-template-columns: 1fr}

.play-btn {width: 110px; height: 56px;}

/**** NEWS ****/

.project-meta .grid-4 {grid-gap:0; grid-template-columns: 1fr}
.news-list-item, .news-list-item:hover {padding:10px 0; color: var(--swatch--black); }
.news-img, .news-list-item:before, .client-item:before, .accordion-header:before {display: none;}
.right-arrow {width: 25px;}
.news-list-item .right-arrow {opacity: 1}

.thinking-articles {border-top: 1px solid; margin-top: 25px;}
.thinking-article-item {flex-direction: column;}
.thinking-article-meta {width:100%;}
.thinking-article-img {width:100%; height: 300px; margin-top: 20px;}
.thinking-article-img img {width: 100% !important; height: 100% !important}
.thinking-article-bg {left: -15px; right: -15px;}
.project-text-section .clip {margin: var(--spacing--5em) 0;}

/** FOOTER ***/
.subfooter {grid-template-columns:1fr}
.subfooter .grid-2 {grid-row-start: 1; margin-bottom: 20px;}



/**** CONTACT FORM ****/
.contact-form-top {padding: 30px 30px;}
.contact-form-footer .wpforms-container {padding: 15px 5px 15px 30px !important; margin-top:0 !important}
.contact-form-top p {font-size: 16px; font-weight: 500;}
.contact-form-footer .wpforms-field-label {font-weight: 500 !important;}
.contact-form-footer .wpforms-field-label {font-size:16px !important}
.contact-form-footer div.wpforms-container-full .wpforms-page-button {width:90px; height:90px;}

.contact-form-section {grid-template-columns: 1fr; grid-gap: 30px;}
.contact-page-form {
    grid-area: span 1;
}
.contact-form-section .wpforms-field-label, .contact-form-section input, .contact-form-section select, .contact-form-section textarea, 
div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single .choices__item--selectable {font-size: 16px !important}
.offset-sml-text {text-indent: 100px;}

}




/* ===== WECHAT POPUP (index) ===== */
.wechat-popup .qr-wrapper { max-width: 300px; border-radius: 2em; overflow: hidden; }
.wechat-popup .qr-wrapper img { width: 100%; height: auto; display: block; }
.wechat-popup .close-video { opacity: 0; pointer-events: none; transition: opacity .4s; }
.wechat-popup.active .close-video { opacity: 1; pointer-events: auto; }

/* ===== culture-section：三行大号描边滚动文字（1、3 行向左，第 2 行向右） ===== */
@keyframes ticker { 100% { transform: translateX(-100%); } }
.hero-marquee { display: flex; flex-direction: column; overflow: hidden; }
.hero-marquee-row { display: flex; overflow: hidden; white-space: nowrap; }
.hero-marquee-track { display: flex; flex: 0 0 auto; animation: ticker 45s infinite linear; }
.hero-marquee-row.is-reverse .hero-marquee-track { animation-direction: reverse; }
.hero-marquee-text {
  display: inline-block; padding: 0 0.35em;
  font-size: clamp(60px, 13vw, 220px); line-height: 1.0;
  font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px #ffffff;
}
@media (min-width: 1400px) { .hero-marquee-track { animation-duration: 60s; } }
@media (max-width: 767px) {
  .hero-marquee-text { font-size: 44px; -webkit-text-stroke-width: 1px; }
}
/* ===== Footer 3 columns: single row, equal width, left aligned (<= 991px) =====
   The footer column container uses an inline "gap:20em; flex-wrap:wrap" which
   overflows / wraps on tablet & phone widths. These overrides keep the three
   columns on one row and evenly sized. */
@media (max-width: 991px) {
  .footer > div[style*="gap:20em"] {
    gap: 0.6em !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .footer > div[style*="gap:20em"] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .footer .subheading { font-size: 10px !important; letter-spacing: 0 !important; }
  .footer .subheading { justify-content: center !important; }
  .footer .link, .footer .p, .footer .p-small, .footer a {
    font-size: 13px !important; white-space: normal !important; word-break: break-word;
  }
  .footer ul li { margin-bottom: 0.35em !important; }
  .arrow-wrapper { flex: 0 0 auto; width: 0.75em; }
  .subfooter, .subfooter p {
    white-space: normal !important; overflow-wrap: anywhere; font-size: 11px !important;
    text-align: center !important;
  }
}

/* ===== Header on narrow screens: pin "Menu" to the RIGHT =====
   The left placeholder (.page-label / .p.nowrap.desktop) is display:none on
   narrow screens, so space-between has no second item to push against. */
@media (max-width: 991px) {
  .header .hflex-spacebetween { justify-content: flex-end !important; }
}


/* ===== Footer: push the whole footer to the bottom of a short page
   (keeps the footer itself compact - no gap inside it) ===== */
@media (min-width: 768px) {
  body { min-height: 100vh; display: flex; flex-direction: column; }
  .footer { margin-top: auto; }
}

/* ===== 统一：汉堡菜单图标为白色（hover 也不再变紫/红） ===== */
.menu-link:hover { color: #ffffff !important; }
.open .menu-link:hover { color: #ffffff !important; }
.hamburger-line-inner { background-color: currentColor !important; }

/* ===== 页面切换过渡层：不再闪品牌紫，改用页面底色 ===== */
.transition.is-purple { background-color: #000000 !important; }