/* Case-study page styles, extracted from the source stylesheet
   for the classes the project pages actually use. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{display: block;}
audio, canvas, progress, video{vertical-align: baseline;
  display: inline-block;}
b, strong{font-weight: bold;}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif;height:100%}
.w-inline-block{max-width: 100%;
  display: inline-block;}
h1, h2, h3, h4, h5, h6{margin-bottom: 10px;
  font-weight: bold;}
figure{margin: 0 0 10px;}
.w-embed:before, .w-embed:after{content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;}
.w-embed:after{clear: both;}
.w-video{width: 100%;
  padding: 0;
  position: relative;}
.w-video iframe, .w-video object, .w-video embed{border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;}
.w-background-video{color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;}
.w-background-video > video{object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;}
.w-background-video > video::-webkit-media-controls-start-playback-button{-webkit-appearance: none;
  display: none !important;}
.w-background-video--control{background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;}
.w-background-video--control > [hidden]{display: none !important;}
.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible{outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;}body{margin:0;color:var(--black);background-color:#fff;min-height:100%;font-size:14px;line-height:20px}h1{margin:.67em 0;font-size:72px;margin-top:20px;line-height:1.05em;color:var(--black);letter-spacing:0;margin-bottom:10px;font-weight:700}h2{margin-top:20px;font-size:56px;line-height:1.1em;color:var(--black);letter-spacing:0;margin-bottom:10px;font-weight:500}h3{margin-top:20px;font-size:40px;line-height:1.1em;letter-spacing:0;margin-bottom:10px;font-weight:700}h4{margin-top:10px;font-size:32px;line-height:1.1em;color:var(--black);margin-bottom:10px;font-weight:400}h5{margin-top:10px;font-size:24px;line-height:1.25em;margin-bottom:10px;font-weight:400}h6{margin-top:10px;font-size:20px;line-height:1.2em;margin-bottom:10px;font-weight:400}p{margin-top:0;margin-bottom:10px;font-size:18px;font-weight:500;line-height:1.6em}a{background-color:#0000;color:#333;font-size:16px;line-height:1.6em;text-decoration:none}ul, ol{margin-top:0;margin-bottom:10px;padding-left:40px;font-size:18px;font-weight:400;line-height:1.8em}img{border:0;vertical-align:middle;max-width:100%;display:inline-block}
strong{font-weight: 900;}
em{font-style: italic;}blockquote{border-left:5px solid #e2e2e2;margin:0 0 10px;padding:10px 20px;font-size:18px;line-height:1.8em;margin-bottom:10px;font-weight:400}
.project-title{padding: 4vh 2.5em;}
.body{letter-spacing: -.04em;
  cursor: none;
  overflow: visible;}
.section-title{color: var(--black);
  white-space: nowrap;
  font-family: Ppneuemontreal, sans-serif;
  font-size: 4em;
  font-weight: 400;
  line-height: 1.2em;}
.section-title.dark-mode{color: var(--white-smoke);}
.content-sections{position: static;}
.subtitle-01-20{font-family: Ppneuemontreal, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;}
.project-intro-container{grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: .75fr .25fr 1fr;
  grid-auto-columns: 1fr;
  align-content: stretch;
  align-items: stretch;
  padding: 5vw 6vw;
  display: grid;}
.project-intro-container.tinted{background-color: #f3f5f7;
  align-self: center;
  padding: 0 2vw;
  display: block;}
.project-intro-container.tinted.hide{display: none;}
.work-section{width: 100%;}
.work-section.desktop{display: block;}
.work-section.mobile{display: none;}
.text-body-sm{text-align: left;
  letter-spacing: 0;
  flex: 0 auto;
  align-items: center;
  font-family: Ppneuemontreal Book, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  display: block;}
.work-block-02{background-color: #fff;
  justify-content: flex-start;
  padding: 4vw 6vw 6vw;
  display: block;}
.section-title-wrapper{margin-bottom: 2vw;}
._3-col-container{grid-column-gap: 3vw;
  grid-row-gap: 1vw;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: .5fr .5fr .5fr;
  grid-auto-columns: 1fr;
  justify-content: space-around;
  align-items: stretch;
  display: flex;}
._3-col-container.gutter2vw{grid-column-gap: 2vw;}
.subtitle-02-16{font-family: Ppneuemontreal, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em;}
.work-block-03{background-color: #f3f5f7;
  padding: 4vw 6vw 6vw;}
.work-block-03.hide, .work-block-03.temphide{display: none;}
.work-block-03.dark{background-color: #242627;}
.work-block-03.extra-top-padding{padding-top: 18vh;}
.body-03-14{font-family: Ppneuemontreal Book, sans-serif;}
.body-03-14.line-height-2em{line-height: 2em;}
.body-03-14.line-height-2em.grey{color: var(--grey-700);}
.body-03-14.line-height-2em.grey.right-align{text-align: right;}
.image-15{margin-left: auto;
  margin-right: auto;
  display: block;}
.img{display: block;}
.img.va-img1{min-width: 24vw;
  max-height: 500px;}
.img.va-img2{min-width: 63vw;
  max-width: none;}
.next-work{color: #fff;
  background-color: #1a1a1a;
  justify-content: flex-end;
  align-items: center;
  padding: 3vh 6vw;
  display: flex;}
.nav-text{color: #c5c9d3;
  align-items: center;
  font-family: Ppneuemontreal Book, sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.2em;
  text-decoration: none;
  display: block;}
.project-nav{flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;}
.stats-bold{margin-bottom: 1vw;
  padding-top: 0;
  padding-bottom: 0;
  font-family: Ppneuemontreal, sans-serif;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.2em;}
.support-2-12{color: var(--grey-700);
  font-family: Ppneuemontreal Book, sans-serif;
  font-size: 12px;
  font-weight: 500;}
.spacer-14{object-fit: fill;
  min-height: 14px;
  max-height: 10px;
  display: block;
  overflow: visible;}
.small-chip-divider{background-color: #3b3b3b;
  width: 40px;
  height: 2px;
  margin-bottom: 3vw;}
.small-chip-divider.dark-mode{color: var(--white-smoke);
  background-color: var(--white-smoke);}
.app{cursor: none;}
.preview-wrapper{grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #fff;
  grid-template-rows: auto;
  grid-template-columns: 1.75fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;}
.preview-wrapper.tinted{grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #f3f5f7;
  grid-template-rows: auto;
  grid-template-columns: 1.75fr 1fr;
  grid-auto-columns: 1fr;
  align-content: start;
  display: grid;}
.preview-wrapper.tinted.non-grid{display: flex;}
.preview-img{width: 100%;
  max-width: none;}
.block-content-container{align-self: center;}
.block-content-container.is-full{width: 100%;}
.text-col{flex-direction: column;
  align-self: auto;
  align-items: flex-start;
  display: block;}
.text-col.middle-align{flex-direction: column;
  align-items: center;
  display: flex;}
.img-wrapper{margin-top: 2vw;
  margin-bottom: 2vw;}
.img-wrapper.flex-hor{grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: .25fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
  overflow: hidden;}
.stats-container{flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;}
.text-col-wide{width: 60vw;}
.spacer-inline{height: 4vw;}
.spacer-lg{height: 6vh;}
._2x2-container{grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 6vw;
  display: grid;}
._2x2-container._1-row{grid-template-rows: auto;
  margin-bottom: 4vw;}
.next-title{color: #fff;
  font-family: Ppneuemontreal, sans-serif;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;}
.next-title-wrapper{grid-column-gap: 2em;
  grid-row-gap: 2em;
  align-items: center;
  margin-left: 1vw;
  display: flex;}
.next-title-wrapper.next{grid-column-gap: 4vw;
  grid-row-gap: 4vw;}
.spacer-6vw{width: 100%;
  height: 6vw;
  display: block;}
.spacer-3vw{height: 3vw;}
.anchor-link-block{
  text-decoration: none;}
.anchor-link{color: #fff;
  letter-spacing: .05em;
  font-family: Ppneuemontreal, sans-serif;
  font-size: 12px;
  font-weight: 400;}
.anchor-container{background-color: #424242;
  justify-content: space-around;
  padding: 1vw 6vw;
  display: flex;
  position: sticky;
  top: 0;}
.spacer-sm{height: 2vh;}
._2-col-grid-container{grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;}
.caption{color: var(--black);
  -webkit-text-stroke-color: var(--black);
  font-family: Ppneuemontreal Book, sans-serif;
  font-size: 1em;
  line-height: 1.2em;}
.figure-full{width: 100%;
  min-width: 100%;
  max-width: none;}
.img-caption-container{grid-column-gap: 2vh;
  grid-row-gap: 2vh;
  flex-flow: column;
  margin-bottom: 2vw;
  display: flex;}
.img-caption-container.middle-align{align-self: center;}
.image-92{width: 100%;}
.spacer-10vh{height: 10vh;}
.hide{display: none;}
.image-95{flex: 1;
  display: block;}
.disclaimer{font-family: Ppneuemontreal, sans-serif;
  font-weight: 400;}
.img-02{object-fit: contain;
  object-position: 0% 50%;
  flex: 1;
  max-width: none;
  display: block;
  overflow: scroll;}
.flex-full-width{width: 100%;
  display: flex;}
.img-50vw{text-align: left;
  width: 50vw;}
.flex-hor-space{justify-content: space-between;
  align-items: center;
  display: flex;}
.flex-hor-left-4vw{grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  display: flex;}
.flex-hor-left{grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  display: flex;
  overflow: clip;}
.flex-hor-left.overflow-crop{overflow: clip;}
.div-block-40{justify-content: space-between;
  width: 100vw;
  display: flex;}
.flex-img{box-sizing: border-box;
  aspect-ratio: auto;
  object-fit: fill;
  flex: 0 auto;
  max-width: none;
  overflow: hidden;}
.flex-child-div---sizing{flex: 0 auto;
  overflow: clip;}
.div-block-43{grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2vw;
  display: flex;}
.project-title-new{text-align: center;
  margin-top: 1vh;
  margin-bottom: 1vh;
  font-family: Ppneuemontreal, sans-serif;
  font-size: 6.5em;
  line-height: 1.2em;}
.hero-summary{align-self: center;
  font-family: Ppneuemontreal Book, sans-serif;
  font-size: 2.5em;
  line-height: 1.2em;}
.hero-summary-col{flex: 1;
  align-self: center;
  padding: 1vh 2vw;
  display: flex;}
.text-body{font-family: Ppneuemontreal Book, sans-serif;
  font-size: 1.5em;
  line-height: 1.4em;}
.text-body.dark-mode{color: var(--white-smoke);}
.text-body.middle-align{text-align: center;}
.text-body.support{color: var(--grey-700);
  align-self: auto;}
.spacer{height: 4vh;}
.text-lead{font-family: Ppneuemontreal, sans-serif;
  font-size: 2.5em;
  line-height: 1.2em;}
.text-lead.dark-mode{color: var(--white-smoke);}
.description-container{padding-top: 1vh;}
.div-block-54{grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;}
.col-3{grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr .75fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;}
.figure-band{background-image: url("assets/webflow/698cb25108bab2a26d242b3c_UI%20bg.webp");
  background-position: 0 0;
  background-size: cover;}
.figure{grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  flex-flow: column;
  padding: 4vh 14vw;
  display: block;}
.figure.minus-top-margin{padding-top: 0;
  padding-bottom: 8vh;}
.figure.middle-align{text-align: center;}
.figure.wide{padding-left: 4vw;
  padding-right: 4vw;}
.grid-2x1-60-40{grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  grid-template-rows: auto;
  grid-template-columns: .75fr .5fr;
  grid-auto-columns: 1fr;
  display: grid;}
.section-3{background-image: url("assets/webflow/698cc29d0680c0b57a220dc1_UI%20bg_vertical.webp");
  background-position: 0 0;
  background-size: cover;}
.quote-text{color: #4a4b4e;
  font-family: Ppneuemontreal Book, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.2em;}
.quote-text.dark-mode{color: #acaeb6;}
.quote{border: 2px #000;
  border-top: 4px var(--grey-700);
  border-left: 2px solid var(--grey-700);
  padding-left: 2vw;}
.quote.dark-mode{border-left-color: #b3b4be;}
.grid-2x2{grid-column-gap: 3em;
  grid-row-gap: 3em;
  grid-template-rows: auto auto;
  grid-template-columns: 1.75fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;}
.image-107{margin-top: -30vh;}
.div-block-57{height: 25vh;}
.img-width-100{width: 100%;}
.img-width-100.border-8{border-radius: 8px;}
.div-block-62{margin-top: -5vh;
  margin-bottom: -20vh;}
.section-4_light{background-image: url("assets/webflow/698eaf6f1f8f6bbcd1de4b05_UI%20bg2.webp");
  background-position: 0 0;
  background-size: cover;}
.section-5_light{background-image: url("assets/webflow/698eb05bab22dc002037e525_UI%20bg2_vertical.webp");
  background-position: 0 0;
  background-size: cover;}
.div-block-66{grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;}
.body02_new{font-family: Ppneuemontreal, sans-serif;
  font-size: 2em;
  line-height: 1.2em;}
.body02_new.middle-align{text-align: center;
  font-family: Ppneuemontreal Book, sans-serif;}
.body02_new.middle-align.dark-mode, .body02_new.dark-mode{color: var(--white-smoke);}
.img-container-50vw{width: 50vw;}
.grid-1x2{grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  padding: 4vh 14vw;
  display: grid;}
.image-113{border-radius: 8px;}
.div-block-68{grid-column-gap: 4vh;
  grid-row-gap: 4vh;
  flex-flow: column;
  display: flex;}
.div-block-69{grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 10vh;
  display: grid;}
.body4_new{font-family: Ppneuemontreal Book, sans-serif;
  font-size: 1.6em;}
.body4_new.middle-align{text-align: center;}
.body4_new.dark-mode{color: var(--white-smoke);}
.div-block-70{grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;}
.section-5{background-image: url("assets/webflow/69a7a4ed379e3c5bb78c0d82_UIbg4.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;}
.background-video{z-index: 1000;
  width: 100%;
  height: 100%;}
.background-video-2, .background-video-3{z-index: 10;}
.background-video-3.bs-resize{width: 100%;
  height: 100%;
  display: block;}
.div-block-74{grid-column-gap: 6vh;
  grid-row-gap: 6vh;
  flex-flow: column;
  display: flex;}
.div-block-76{grid-column-gap: 6vh;
  grid-row-gap: 6vh;
  flex-flow: column;
  width: 70vw;
  display: flex;}
.div-block-77{grid-column-gap: 2vh;
  grid-row-gap: 2vh;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;}
.cursor-element{background-color: var(--white-smoke);
  border-radius: 50%;
  width: 1rem;
  height: 1rem;}
.cursor-wrapper{z-index: 1000;
  pointer-events: none;
  mix-blend-mode: difference;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0;}
.bg-video-wrapper{width: 60vw;
  height: 37.5vw;}
.background-video-4{z-index: 20;
  width: 100%;
  height: 100%;}
@media screen and (min-width: 1920px){
  .work-block-02{padding-left: 10%;}
  .next-work{padding: 80px 5%;}
  .nav-text{font-size: 30px;
    font-weight: 700;
    text-decoration: underline;}
  .project-nav{justify-content: space-between;
    display: flex;}
  .cursor-wrapper{z-index: 1000;
    height: 100vh;
    position: fixed;
    inset: 0;}
}
@media screen and (max-width: 991px){
  .section-title.mobile{margin-bottom: 60px;
    margin-right: 0;
    display: block;}
  .cursor-wrapper{display: none;}
}
@media screen and (max-width: 479px){
  h1{font-size: 50px;}
  h2{font-size: 45px;}
  h3{font-size: 40px;}
  h4{font-size: 35px;}
  h5{font-size: 30px;}
  h6{font-size: 27px;}
  .project-title{padding: 6vh 4vw 2vh;}
  .section-title{font-size: 1.5em;}
  .section-title.mobile{font-size: 40px;}
  .project-intro-container{flex-direction: column;
    padding-top: 10vw;
    padding-left: 5vw;
    padding-right: 5vw;
    display: block;}
  .work-section.desktop{display: none;}
  .work-section.mobile{display: block;}
  .text-body-sm{font-size: 14px;
    overflow: visible;}
  .text-body-sm.hide{display: none;}
  .work-block-02{padding-left: 4vw;
    padding-right: 4vw;}
  .section-title-wrapper{margin-bottom: 4vw;}
  ._3-col-container.gutter2vw{grid-row-gap: 2vh;
    flex-flow: column;}
  ._3-col-container.vertical{grid-row-gap: 1.5vh;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;}
  .subtitle-02-16{font-size: 15px;
    line-height: 1.3em;}
  .subtitle-02-16.mobile{line-height: 1.3em;}
  .work-block-03{padding-left: 4vw;
    padding-right: 4vw;}
  .img{max-width: 100vw;
    margin-left: -5vw;
    margin-right: -5vw;}
  .img.va-img1, .img.va-img2{align-self: center;
    width: 100%;
    min-width: 0;}
  .next-work{width: 100%;
    padding: 2vh 4vw;
    position: static;
    bottom: 0;}
  .nav-text{font-size: 12px;}
  .stats-bold{width: auto;
    height: 1.2em;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1em;}
  .support-2-12{font-size: 11px;}
  .support-2-12.hide{display: none;}
  .small-chip-divider{margin-bottom: 4vw;}
  .project-title-container{flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: block;}
  .preview-wrapper{flex-flow: column;
    display: flex;}
  .preview-wrapper.tinted{display: flex;}
  .block-content-container{width: 100%;}
  .img-wrapper{margin-top: 2vh;
    margin-bottom: 2vh;}
  .img-wrapper.flex-hor{flex-flow: column;
    justify-content: space-between;
    align-items: center;}
  .img-wrapper.mobile{margin-top: 0;
    margin-bottom: 0;}
  .stats-container{grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    flex-flow: row;
    justify-content: flex-start;
    align-self: flex-start;
    align-items: center;
    display: flex;}
  .stats-container.mobile{grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    grid-template-rows: auto;
    grid-template-columns: .25fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;}
  .stats-container.vertical{align-self: flex-start;}
  .text-col-wide{width: 100%;
    margin-top: 2vw;}
  .spacer-lg.hide{display: none;}
  ._2x2-container{flex-flow: column;
    display: flex;}
  .next-title{font-size: 12px;}
  .next-title-wrapper{flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0;}
  .next-title-wrapper.next{justify-content: flex-start;
    align-items: flex-end;}
  .spacer-sm{height: 2vh;}
  ._2-col-grid-container{grid-column-gap: 2vw;
    grid-row-gap: 2vw;}
  .caption{font-size: 11px;
    line-height: 1.2em;}
  .img-caption-container, .img-caption-container.middle-align{grid-column-gap: 1vh;
    grid-row-gap: 1vh;}
  .spacer-10vh{width: 100%;
    height: 2vh;
    padding-bottom: 0;
    padding-right: 0;
    display: block;}
  .image-95{flex: 0 auto;
    width: 100%;}
  .img-50vw{width: 100%;}
  .flex-hor-space{flex-flow: column;}
  .flex-hor-left.overflow-crop{grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    flex-flow: column;}
  .flex-img, .flex-child-div---sizing{width: 100%;}
  .div-block-43{grid-column-gap: 2vw;
    grid-row-gap: 2vw;}
  .project-title-new{font-size: 2em;}
  .hero-summary{font-size: 1.5em;}
  .hero-summary-col{padding: 2vh 4vw;}
  .text-body{font-size: 1.1em;}
  .spacer{height: 3vh;}
  .text-lead{font-size: 1.25em;}
  .div_center_middle{padding-top: 2vh;
    padding-bottom: 2vh;}
  .col-3{display: block;}
  .figure{padding: 2vh 4vw;}
  .figure.minus-top-margin{padding-bottom: 5vh;}
  .figure.bottom{padding-bottom: 4vh;}
  .figure.top{padding-top: 4vh;}
  .grid-2x1-60-40{display: block;}
  .quote-text, .quote-text.dark-mode{font-size: 1.2em;}
  .image-107{margin-top: -8vh;}
  .div-block-57{height: 5vh;}
  .div-block-62{margin-top: 0;
    margin-bottom: 4vh;}
  .body02_new.middle-align.dark-mode{font-size: 1.25em;}
  .img-container-50vw{width: 100%;}
  .grid-1x2{padding-left: 4vw;
    padding-right: 4vw;}
  .image-113{border-radius: 4px;}
  .div-block-68{grid-column-gap: 2vh;
    grid-row-gap: 2vh;}
  .body4_new{font-size: 1em;}
  .body4_new.middle-align{font-size: 1.2em;}
  .section-5{background-position: 50%;}
  .background-video, .background-video-3{width: 100vw;
    height: 62.5vw;}
  .div-block-74{grid-column-gap: 4vh;
    grid-row-gap: 4vh;}
  .div-block-76{grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    width: 100%;}
  .image-114, .image-115{width: 8vw;}
  .div-block-78{grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    flex-flow: column;
    display: flex;}
  .cursor-wrapper{display: none;}
  .bg-video-wrapper{width: 100vw;
    height: 62.5vw;}
}
/* ============================================================
   Local additions — not part of the extracted Webflow subset.
   ============================================================ */

/* Webflow's .col-3 is intentionally asymmetric (1.5fr .75fr 1fr), which
   suits a lead column plus two supporting ones. The triads on
   ads-ai-targeting.html hold parallel, equal-weight items, so they opt into
   even columns via .equal. Imported pages keep the original ratio.
   minmax(0,1fr) rather than 1fr so a long word can't widen its column. */
.col-3.equal{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---- Resume + contact page layout ---------------------------------- */

/* Two-column entry: meta rail on the left, content on the right.
   Collapses to a single column on tablet and below. */
.resume-row{
  display:grid;
  grid-template-columns:minmax(0,.28fr) minmax(0,1fr);
  grid-column-gap:2vw;
  grid-row-gap:1vh;
  padding:3vh 0;
  border-top:1px solid #d9dbe0;
}

/* Dark variant, so these blocks work inside .work-block-03.dark */
.work-block-03.dark .resume-row{border-top-color:#3a3d3f}
.work-block-03.dark .resume-meta{color:#a7a9ad}

/* Inline link treatment, used on the resume page */
.contact-link{text-decoration:underline;text-underline-offset:.18em}

@media screen and (max-width:991px){
}

/* ---- PDF resume viewer ---------------------------------------------- */
.pdf-frame{
  width:100%;height:88vh;min-height:32rem;
  border:1px solid #d9dbe0;border-radius:8px;
  background:#f4f5f7;overflow:hidden;
}
.pdf-frame object,.pdf-frame iframe{width:100%;height:100%;border:0;display:block}

/* Fallback card — shown when the PDF is missing, or on devices that
   cannot render an embedded PDF (most mobile browsers). */
.pdf-card{
  border:1px solid #d9dbe0;border-radius:8px;background:#f4f5f7;
  padding:6vh 2rem;text-align:center;
}
.pdf-card .text-body{margin-bottom:2vh}
.pdf-actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:2vh}

/* Mobile browsers largely refuse to render embedded PDFs, so swap the
   viewer for the download card rather than showing an empty grey box. */
@media screen and (max-width:991px){
  .pdf-frame{display:none}
  .pdf-card.for-mobile{display:block}
}
@media screen and (min-width:992px){
  .pdf-card.for-mobile{display:none}
}

/* ---- Case-study scope strip ----------------------------------------- */
.scope-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2vh 2vw;
  padding:4vh 14vw 0;
}
.scope-item{display:flex;flex-direction:column;gap:.6vh}
.scope-label{
  font-family:Ppneuemontreal,sans-serif;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-700,var(--grey-700));
}
@media screen and (max-width:991px){
  .scope-strip{grid-template-columns:repeat(2,minmax(0,1fr));padding:3vh 5vw 0}
}
@media screen and (max-width:479px){
  .scope-strip{grid-template-columns:minmax(0,1fr)}
}

/* ---- Inline demo video ---------------------------------------------- */
.video-frame{
  width:100%;border-radius:8px;overflow:hidden;
  background:#0f0f0f;line-height:0;
}
.video-frame video{width:100%;height:auto;display:block}

/* Placeholder shown until the recording is dropped in. */
.media-card{
  border:1px dashed #b1b3c2;border-radius:8px;background:#f4f5f7;
  padding:6vh 2rem;text-align:center;
}
.media-card .text-lead{margin-bottom:1vh}
.media-card code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:#e6e8ec;padding:.15em .45em;border-radius:4px;
}

/* ---- Consistent page gutters ---------------------------------------
   Every section used to carry its own horizontal padding — 2.5em on the
   hero title, 6vw on content blocks, 14vw on images and the scope strip,
   4vw on wide images — so no two section edges lined up, and because most
   were viewport-relative the misalignment shifted with window width.
   One measure now, matching the 1040px column the home page uses:
   content is exactly 1040px wide at >=1120px, with 40px gutters below. */
.work-block-02,
.work-block-03,
.figure,
.figure.wide,
.figure.minus-top-margin,
.figure.middle-align,
.scope-strip,
.project-title,
.preview-wrapper{
  padding-inline:max(40px, calc((100% - 1200px) / 2));
}
/* "Next" bar: same left/right edges as the footer and nav column (.shell) at every width */
.next-work{padding-inline:max(40px, calc((100% - 1040px) / 2))}
.project-nav{justify-content:flex-end}   /* right-aligned at every width (the 1920px rule spread it out) */
@media screen and (max-width:600px){.next-work{padding-inline:20px}}

/* Two-column variant of .col-3, same gaps. */
.col-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column-gap:16px;grid-row-gap:16px}

/* ============================================================
   Shared case-study components (.cs-*), 800px column.
   Used by Sponsored Ads (Figma 1728:75) and Publisher Console
   (Figma 1793:152). Text styles follow the Figma library:
   body/default 22/32, body/bold 22/32, subtitle/med 32/34,
   subtitle/small 20 uppercase, Caption 18/24.
   ============================================================ */
/* Vertical rhythm — one scale for every case study. Each step = "less related".
   tight 8  : heading → its paragraph
   caption 10: image → its caption
   inner 20 : paragraph → paragraph, text → its image
   item 40  : between items; section title → content
   group 64 : between labelled sub-sections (WHAT IT IS, WHY, AI SUMMARY…)
   section 80: section padding */
:root{--cs-tight:8px;--cs-caption:10px;--cs-inner:20px;--cs-item:40px;--cs-group:64px;--cs-section:80px}
@media screen and (max-width:991px){:root{--cs-item:32px;--cs-group:56px;--cs-section:64px}}
@media screen and (max-width:600px){:root{--cs-inner:16px;--cs-item:28px;--cs-group:44px;--cs-section:48px}}

.cs-shell{width:min(800px,100% - 80px);margin-inline:auto}
.cs-rule{width:min(1040px,100% - 80px);margin:0 auto;border-top:1px solid #d9dbe0}

/* ---- hero ---- */
.cs-hero{background:#fff;padding:125px 0}
.cs-hero-inner{display:flex;flex-direction:column;gap:100px}
.cs-title{margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:50px;line-height:normal;color:var(--black)}
.cs-lede-group{display:flex;flex-direction:column;gap:20px}
.cs-lede{margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:28px;line-height:40px;letter-spacing:.28px;color:var(--black)}
.cs-meta{display:flex;gap:80px;align-items:flex-start;flex-wrap:wrap}
.cs-meta-item{display:flex;flex-direction:column;gap:4px}
.cs-meta-label,.cs-meta-value{margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-size:20px;line-height:normal}
.cs-meta-label{                 /* Figma: subtitle/small */
  font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary);
}
.cs-meta-value{color:var(--black)}

/* ---- sections: 80px vertical, 40px stack ---- */
.cs-section{background:#fff;padding:var(--cs-section) 0;display:flex;flex-direction:column;gap:var(--cs-item)}
/* a shell that opens with a label starts a new sub-section: push it to the group gap,
   except when it directly follows the section title */
.cs-section > .cs-shell:not(:has(> .cs-section-title)) + .cs-shell:has(> .cs-label:first-child){margin-top:calc(var(--cs-group) - var(--cs-item))}
.cs-section > .cs-shell.is-break{margin-top:calc(var(--cs-group) - var(--cs-item))}   /* sub-section without a label */
.cs-heading{display:flex;flex-direction:column;gap:var(--cs-tight)}   /* eyebrow label over the section title */
.cs-section.is-dark{background:#232627}
.cs-section.is-muted{background:#f4f5f7}
.cs-section.is-dark .cs-section-title,
.cs-section.is-dark .cs-bold,
.cs-section.is-dark .cs-body,
.cs-section.is-dark .cs-stat-num,
.cs-section.is-dark .cs-stat-label{color:#fff}
.cs-section-title{margin:0;font-family:Ppeditorialold,Georgia,serif;font-weight:400;font-size:30px;line-height:normal;color:var(--black)}

/* subtitle/small — section eyebrow */
.cs-label{                      /* Figma: subtitle/small */
  margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;
  font-weight:500;font-size:20px;line-height:normal;letter-spacing:.8px;
  text-transform:uppercase;color:var(--text-tertiary);
}

/* body/bold + body/default, both 24/30 */
.cs-stmt{display:flex;flex-direction:column;gap:var(--cs-tight)}
.cs-bold,.cs-body{margin:0;color:var(--black)}
.cs-bold{font-size:22px;line-height:32px;letter-spacing:.22px}   /* Figma: body/bold */
.cs-body{font-size:22px;line-height:32px;letter-spacing:.22px}   /* Figma: body/default */
.cs-bold{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500}
.cs-body{font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-weight:400}
.cs-prose{display:flex;flex-direction:column;gap:var(--cs-inner)}   /* consecutive paragraphs */
.cs-body strong{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500}   /* inline body/bold */

/* ---- "Why" rows: 280px label + flexible body ---- */
.cs-why{display:flex;flex-direction:column;gap:var(--cs-inner)}
.cs-why-row{display:grid;grid-template-columns:280px minmax(0,1fr);gap:10px;align-items:center}
.cs-why-term{margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:22px;line-height:32px;letter-spacing:.22px}
.cs-why-desc{margin:0;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-size:18px;line-height:24px;letter-spacing:.18px}
.cs-why-desc strong{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500}

/* ---- figures ---- */
.cs-block{display:flex;flex-direction:column;gap:var(--cs-inner)}
.cs-figure{border-radius:6px;border:1px solid var(--border-3);background:#d9d9d9;overflow:hidden;position:relative}
.cs-figure img{width:100%;height:100%;object-fit:cover;display:block}
.cs-grid-2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cs-grid-2x2 .cs-figure{aspect-ratio:3024 / 1654}
.cs-caption{                   /* Figma: Caption */
  margin:0;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;
  font-weight:400;font-size:18px;line-height:24px;text-align:center;
  color:var(--text-tertiary);
}
/* the 2x2 grid caption is a different node in Figma: 20px, left */
.cs-figcaption{margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:20px;line-height:24px;color:var(--text-tertiary)}
.cs-videoslot{display:flex;align-items:center;justify-content:center;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-size:18px;color:#6e7174;text-align:center;padding:1rem}

@media screen and (max-width:991px){
  .cs-hero{padding:72px 0}.cs-hero-inner{gap:56px}
  .cs-title{font-size:36px}.cs-lede{font-size:22px;line-height:32px}
  .cs-bold,.cs-why-term,.cs-body{font-size:18px;line-height:26px}
  .cs-why-desc{font-size:17px}
  .cs-meta{gap:40px}
  .cs-why-row{grid-template-columns:220px minmax(0,1fr)}
}
@media screen and (max-width:600px){
  .cs-shell,.cs-rule{width:calc(100% - 40px)}
  .cs-hero{padding:56px 0}.cs-title{font-size:28px}
  .cs-lede{font-size:19px;line-height:28px}
  .cs-bold,.cs-why-term,.cs-body{font-size:17px;line-height:25px}
  .cs-why-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .cs-grid-2x2{grid-template-columns:minmax(0,1fr)}
}

/* hover reveal: second image layered over the first inside .cs-figure */
.cs-figure.has-hover{cursor:none}
.cs-figure .cs-hover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.cs-figure.has-hover:hover .cs-hover{opacity:1}
@media (hover:none){                 /* touch: no hover, so show the base image only */
  .cs-figure.has-hover:hover .cs-hover{opacity:0}
}

/* ---- added for Publisher Console (Figma 1793:152) ---- */
.cs-stack{display:flex;flex-direction:column;gap:var(--cs-item)}
.cs-meta-item.is-grow{flex:1 1 0;min-width:0}
.cs-bold em{font-style:italic;font-weight:600}  /* PP Neue Montreal SemiBold Italic */

/* numbers: subtitle/med 32/34 over body/default */
.cs-stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--cs-inner) 40px}
.cs-stat{display:flex;flex-direction:column;margin:0}
.cs-stat-num{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:32px;line-height:34px;letter-spacing:.32px;color:var(--black)}
.cs-stat-label{font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-weight:400;font-size:22px;line-height:32px;letter-spacing:.22px;color:var(--black)}

/* figure variants */
.cs-fig-group{display:flex;flex-direction:column;gap:var(--cs-caption)}
.cs-figure.is-raised{box-shadow:0 0 10px rgba(0,0,0,.05)}   /* Figma: image shadow */
.cs-figure.is-plain{border:0}
.cs-figure.is-bare{border:0;border-radius:0;background:none;overflow:visible}   /* transparent artwork with its own shadows */
.cs-figure.is-framed{border:1px solid var(--border-3);border-radius:6px;background:rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.05)}   /* Figma: border/3 + image shadow */
.cs-figure.is-video{background:#141414}
.cs-figure video{width:100%;height:100%;object-fit:cover;display:block}
.cs-figure.is-narrow{width:78.75%;align-self:center}        /* 630 of 800 */
.cs-figure img.cs-crop{position:absolute;max-width:none}  /* offsets set inline from Figma */
.cs-figure video{width:100%;height:100%;object-fit:cover;display:block}
.cs-center{display:flex;flex-direction:column;align-items:center;gap:var(--cs-inner)}
.cs-center > *{width:100%}
.cs-center > .cs-figure.is-narrow{width:78.75%}
.cs-chevron{width:32px !important;height:32px;display:flex;align-items:center;justify-content:center;flex:none;background:#000;border-radius:50%}
.cs-chevron img{width:25.04px;height:25.04px;display:block}
.cs-chevron.is-down img{transform:rotate(90deg)}

/* before → after diagram (Solution 1) */
.cs-ba{display:flex;align-items:center;gap:20px}
.cs-ba-before{flex:0 0 34.106%;display:flex;flex-direction:column;gap:10px}          /* 272.85 of 800 */
.cs-ba-art{aspect-ratio:272.846 / 241;display:flex;align-items:center}               /* same height as the After frame */
.cs-ba-art img{width:100%;height:auto;display:block}
.cs-ba-after{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.cs-ba-grid{position:relative;width:100%;aspect-ratio:455.152 / 241.108}
.cs-ba-grid > *{position:absolute;display:block}
.cs-ba-grid > span{border-radius:4px}
.cs-ba-grid > .cs-ba-card{background:#fff;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.09)}
@media screen and (max-width:991px){
  .cs-stat-num{font-size:26px;line-height:30px}
  .cs-stat-label{font-size:18px;line-height:26px}
}
@media screen and (max-width:600px){
  .cs-stats{--cols:1 !important}
  .cs-meta-item.is-grow{flex:1 1 100%}            /* long Role gets its own row */
  .cs-stat-label{font-size:17px;line-height:25px}
  .cs-figure.is-narrow,.cs-center > .cs-figure.is-narrow{width:100%}
  .cs-ba{flex-direction:column}
  .cs-ba-before,.cs-ba-after{flex:none;width:100%}
  .cs-ba-art{justify-content:center}.cs-ba-art img{width:60%}
  .cs-ba > .cs-chevron img{transform:rotate(90deg)}
}

/* ---- added for AI Deals Targeting (Figma 1813:6398) ---- */
/* three-up comparison cards (Manual / V1 / V2) */
.cs-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.cs-compare-card{border:1px solid var(--border-2);border-radius:6px;padding:20px;display:flex;flex-direction:column}
.cs-compare-card.is-dashed{border-style:dashed}
.cs-compare-card.is-strong{border:2px solid #8d96a2}          /* the version being argued for */
/* options variant (design decisions): only the chosen option is outlined;
   the others are plain columns whose text lines up with the chosen card's */
.cs-compare.is-options .cs-compare-card:not(.is-strong){border:0;padding:22px 0}
.cs-compare-kicker{margin:0;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-size:18px;line-height:24px;color:var(--text-secondary)}
.cs-compare-title{margin:0;font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:22px;line-height:26px;letter-spacing:.22px;color:var(--black)}
.cs-compare-desc{margin:0;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-size:20px;line-height:30px;letter-spacing:.2px;color:var(--black)}

/* numbered items: "1. Heading" in body/bold, each item = text + figure */
.cs-numbered{list-style:none;margin:0;padding:0;counter-reset:cs-n;display:flex;flex-direction:column;gap:var(--cs-item)}
.cs-numbered > li{counter-increment:cs-n}
.cs-numbered > li > .cs-stmt > .cs-bold::before{content:counter(cs-n) ". "}
.cs-numbered.is-unnumbered > li > .cs-stmt > .cs-bold::before{content:none}   /* parts of one topic, not a sequence */

@media screen and (max-width:991px){
  .cs-compare-desc{font-size:17px;line-height:25px}
  .cs-compare-title{font-size:18px;line-height:22px}
}
@media screen and (max-width:600px){
  .cs-compare{grid-template-columns:minmax(0,1fr)}
}

/* source tag inside a heading, e.g. "(From Phase 1: …)" — italic, secondary grey, same size */
.cs-source{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:400;font-style:italic;color:var(--text-secondary)}

/* simple comparison table (Before and after) */
.cs-table{width:100%;border-collapse:collapse;font-family:"Ppneuemontreal Book","Helvetica Neue",sans-serif;font-size:20px;line-height:30px;letter-spacing:.2px;color:var(--black)}
.cs-table th,.cs-table td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid var(--border-2)}
.cs-table thead th{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;font-size:20px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-tertiary);padding-top:0}
.cs-table tbody th{font-family:Ppneuemontreal,"Helvetica Neue",sans-serif;font-weight:500;width:26%}
.cs-table td{width:37%}
@media screen and (max-width:991px){.cs-table{font-size:17px;line-height:25px}.cs-table thead th{font-size:16px}}
@media screen and (max-width:600px){.cs-table th,.cs-table td{padding-right:12px}}

/* a whole card as a link (Writing page) */
.cs-link-card{display:flex;text-decoration:none;color:inherit;cursor:none;transition:border-color .2s ease}
.cs-link-card:hover{border-color:#8d96a2}
.cs-link-card:focus-visible{outline:2px solid var(--black);outline-offset:3px}

/* click-to-enlarge images + lightbox */
.cs-zoom{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:none}   /* site custom cursor grows on hover */
.cs-zoom img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}
.cs-zoom:hover img{opacity:.85}
.cs-zoom:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.cs-lightbox{border:0;padding:0;margin:auto;background:none;max-width:none;max-height:none;overflow:visible;cursor:zoom-out}
.cs-lightbox::backdrop{background:rgba(20,20,20,.88)}
.cs-lightbox img{display:block;max-width:94vw;max-height:88vh;width:auto;height:auto;border-radius:6px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.cs-lightbox-close{position:fixed;top:20px;right:24px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:44px;cursor:pointer}
.cs-lightbox-close:hover{background:rgba(255,255,255,.22)}