:root {
  --second-color: #101820;
  --first-color: white;
  --neon-green: #00ce7c;
  --blue: #0a1f8f;
  --body-font: Figtree, sans-serif;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  background-color: var(--second-color);
  color: var(--first-color);
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 38px;
  font-weight: 500;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 400;
  line-height: 36px;
}

h5 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

p {
  opacity: .7;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

a {
  text-decoration: underline;
}

.page-wrapper {
  margin-left: 0;
}

.navbar-menu {
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  display: flex;
}

.menu-button-new {
  padding: 0;
}

.button-with-animation {
  color: #101820;
  text-transform: uppercase;
  background-color: #fff;
  border-radius: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.navbar-component {
  z-index: 999;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #ddd0;
  align-items: center;
  min-height: 5.6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
}

.navbar-drodpdown-list {
  box-shadow: 0 12px 16px -4px #00000014, 0 4px 6px -2px #10182808;
}

.navbar-drodpdown-list.w--open {
  background-color: #fff;
  border: 1px solid #cfd2d3;
  border-radius: .75rem;
  width: 40rem;
  padding: 1.25rem;
  left: 0%;
}

.navbar-drodpdown-list.auto {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #101820e6;
  width: 14rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar-drodpdown-list.auto.w--open {
  border-color: #ffffff12;
  border-radius: 10px;
}

.logo-link-main {
  padding-left: 0;
}

.item-heading {
  color: var(--first-color);
  font-size: 15px;
  font-weight: 500;
}

.svg-icon {
  opacity: 1;
  justify-content: center;
  align-items: flex-end;
  width: 1rem;
  height: 1rem;
  margin-right: 0;
  padding-bottom: 0;
  display: flex;
  position: absolute;
  inset: auto 0% auto auto;
}

.dropdown-content {
  grid-column-gap: 2rem;
  grid-row-gap: 0px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.dropdown-content.block {
  display: block;
}

.item-right {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.menu-right {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.logotype {
  flex: none;
  width: 130px;
}

.dorpdown-link-list {
  grid-column-gap: 0px;
  grid-row-gap: 0rem;
  grid-template-rows: max-content;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  grid-auto-columns: 1fr;
  display: grid;
}

.navbar-link {
  opacity: .7;
  color: var(--first-color);
  align-items: center;
  margin-top: 0;
  padding: .75rem .7rem;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  transition: all .3s;
}

.navbar-link:hover {
  opacity: 1;
}

.navbar-link.w--current {
  opacity: 1;
  color: #fff;
  margin-top: 0;
  font-family: Figtree, sans-serif;
  font-size: 14px;
}

.button-flex-left {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.dropdown-link {
  grid-column-gap: .7rem;
  grid-row-gap: 0px;
  opacity: .7;
  border-radius: 10px;
  grid-template-rows: auto;
  grid-template-columns: max-content 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  padding: .35rem .75rem .35rem 0;
  text-decoration: none;
  transition: all .3s;
  display: grid;
}

.dropdown-link:hover {
  opacity: 1;
  background-color: #ffffff12;
  padding-left: .75rem;
}

.new-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.dropdown-toggle {
  opacity: .7;
  color: var(--first-color);
  align-items: center;
  padding: .75rem 2.2rem .75rem .8rem;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.dropdown-toggle:hover {
  opacity: 1;
}

.hero {
  background-image: url('../images/hero-main_1hero-main.avif');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  min-height: 95vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero.for-inner {
  min-height: auto;
  padding: 180px 5% 120px;
}

.hero.for-inner._01 {
  padding-bottom: 70px;
}

.shadow-absolute {
  background-image: linear-gradient(180deg, #fff0, var(--second-color));
  min-height: 200px;
  position: absolute;
  inset: auto 0% -1px;
}

.button {
  color: #101820;
  text-align: center;
  letter-spacing: -.03rem;
  background-color: #00ce7c;
  padding: .75rem 1.4rem;
  font-weight: 500;
  text-decoration: none;
  overflow: visible;
}

.button.first {
  color: var(--first-color);
  letter-spacing: .5px;
  text-transform: uppercase;
  background-color: #fff0;
  background-image: linear-gradient(#00ce7c, #00ce7c);
  border-radius: .7rem;
  flex-flow: row;
  flex: 0 auto;
  align-self: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: Figtree, sans-serif;
  transition: all .3s;
  display: inline-flex;
  box-shadow: 0 7px 80px -12px #2a7de1, inset 0 0 #101820;
}

.button.first:hover {
  background-color: #2a7de1;
  background-image: linear-gradient(20deg, #00ce7c 37%, #fff);
  box-shadow: inset 0 0 #101820;
}

.button.first.full {
  width: 100%;
}

.button.first.about-page {
  flex-flow: row;
  flex: 0 auto;
  justify-content: center;
  align-self: auto;
  align-items: center;
  display: flex;
}

.container {
  z-index: 30;
  border-radius: 0;
  width: 100%;
  max-width: 1240px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.section-content {
  float: none;
  clear: none;
  margin-top: 0;
  padding: 0 5%;
  position: static;
}

.section-content.top-padding {
  padding-top: 160px;
}

.section-content.bottom-padding {
  padding-top: 60px;
}

.section-content.for-cta {
  padding-top: 50px;
  padding-bottom: 50px;
}

.section-content.for-blog-page {
  padding-top: 40px;
  padding-bottom: 40px;
}

.section-content.about-page {
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 0;
  display: block;
}

/* ===== Reusable light-section pattern ===== */
.light-section {
  background-color: #ffffff;
  color: #101820;
  display: flow-root;
}

.light-section .display-1 {
  background-image: none;
  -webkit-text-fill-color: #0a1f8f;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #0a1f8f;
}

.light-section .step-main-title {
  background-image: none;
  -webkit-text-fill-color: #0a1f8f;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #0a1f8f;
}

.light-section .top-text {
  color: #00ce7c;
  background-color: transparent;
}

.light-section .circle-absolute {
  display: none;
}

.light-section .left-part {
  color: #ffffff;
}

.light-section .left-part .display-1 {
  background-image: linear-gradient(90deg, #fff 29%, #fff6 53%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Refinement 1: remove the faint outline on the What We Do icon boxes (index only) */
.light-section .step-box-main {
  box-shadow: none;
}

/* Refinement 2: left-align the What You Get heading group on desktop/tablet only (index only).
   At <=479px the template's original centering returns. */
@media screen and (min-width: 480px) {
  .light-section .div-block-2 .top-text,
  .light-section .div-block-2 .display-1,
  .light-section .div-block-2 .text-block-2 {
    text-align: left;
  }

  .light-section .div-block-2 .top-text {
    padding-left: 0;
  }
}

/* Brand Highlight cards: inset from both side edges on mobile (index only) */
@media screen and (max-width: 479px) {
  .light-section .work-grid {
    margin-left: 8%;
    margin-right: 8%;
  }
}

/* Testimonials carousel: cap the slide/mask to the wrapper on mobile so each slide
   fits its container instead of overflowing at the desktop 440px width (all pages).
   Scoped to .section-testimonials for specificity (0,2,0) so it beats the later
   single-class max-width:440px rules; still hits every carousel (all use that section). */
@media screen and (max-width: 479px) {
  .section-testimonials .slider-mask {
    max-width: 100%;
  }

  .section-testimonials .slide-item {
    max-width: 100%;
  }

  /* center the 290px card in its slide (0,3,0 beats .card-testimonial.first/.second margin-left:0) */
  .section-testimonials .slide-item .card-testimonial {
    margin-left: auto;
    margin-right: auto;
  }

  /* one card shown at a time: full 4-sided border + uniform corners on every card
     (base omits the left border and only .first rounds its left corners, for the
     desktop side-by-side divider look) */
  .section-testimonials .card-testimonial {
    border-left-style: solid;
    border-radius: 0;
  }
}

/* Refinement 3: lift the hero logo train so more gradient shows below it (index only) */
.home-hero .logo-absolute {
  inset: auto 0% 60px;
}

/* Mobile: the hero is much shorter, so the full 60px lift pushed the brands block
   up into the VIEW CASE STUDIES button. Drop the lift to 24px at <=479px only. */
@media screen and (max-width: 479px) {
  .home-hero .logo-absolute {
    inset: auto 0% 24px;
  }
}

/* Mobile only: hide the "BRANDS WE'VE SERVED" eyebrow + its pill in the homepage hero
   to de-crowd. The carousel is bottom-pinned, so it stays put (no gap). Desktop/tablet keep it. */
@media screen and (max-width: 479px) {
  .home-hero .logo-header_wrapper {
    display: none;
  }
}

/* Mobile line breaks for the What We Do headline (CREATIVE / & PERFORMANCE. / ALIGNED.).
   The <br class="mobile-break"> tags break at <=479px; hide them above so desktop/tablet
   wrap naturally as before. */
@media screen and (min-width: 480px) {
  .mobile-break {
    display: none;
  }
}

/* Reduce the hero -> What We Do white space (index only, .light-section scoped).
   Desktop/tablet driver is the section top-padding; mobile driver is div-block-5. */
@media screen and (min-width: 992px) {
  .section-content.top-padding.light-section {
    padding-top: 100px;   /* was 160px */
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .section-content.top-padding.light-section {
    padding-top: 80px;    /* was 120px */
  }
}

@media screen and (max-width: 479px) {
  .light-section .div-block-5 {
    padding-top: 40px;    /* was 100px */
  }
}

.logo-absolute {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0% -13px;
}

.logo-carousel-wrap {
  backface-visibility: hidden;
  flex: none;
  display: flex;
  transform: perspective(1px);
}

.logo-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: .25fr minmax(200px, 1fr);
  grid-auto-columns: 1fr;
  align-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.logo-carousel-item {
  flex: none;
  padding: 1rem .5rem;
}

.logo-link {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.carousel {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.logo-carousel {
  grid-column-gap: 75px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
  overflow: hidden;
}

.max-w-width {
  text-align: center;
  flex-flow: column wrap;
  justify-content: flex-end;
  align-items: center;
  max-width: 890px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  display: flex;
}

.max-w-width._01 {
  max-width: 700px;
  margin-top: 0;
  padding-top: 20px;
}

.max-w-width._01.featured-work {
  padding-top: 140px;
}

.max-w-width._02 {
  max-width: 950px;
}

.max-w-width._03 {
  text-align: left;
  justify-content: center;
  align-items: flex-start;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}

.display-1 {
  letter-spacing: -.4px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(360deg, #fff6 5%, #fff 50%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 25px;
  font-family: Figtree, sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1;
}

.display-1._01 {
  background-image: linear-gradient(360deg, #fff6 5%, #fff 50%);
  padding-top: 30px;
  padding-bottom: 0;
  font-size: 61px;
}

.display-1._02 {
  text-align: center;
  text-transform: none;
  width: auto;
  margin-top: 0;
  padding-top: 20px;
  padding-left: 0;
  padding-right: 0;
  font-size: 37px;
  line-height: 1.4;
  overflow: visible;
}

.display-1._02.about-page {
  width: 890px;
  margin-left: auto;
  padding-bottom: 0;
  font-size: 18px;
}

.display-1._03 {
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  justify-content: center;
  font-size: 59px;
  display: flex;
}

.display-1._04 {
  background-image: linear-gradient(90deg, #fff 29%, #fff6 53%);
  padding-top: 70px;
  font-size: 39px;
}

.display-1._05 {
  font-size: 70px;
}

.display-1._06 {
  letter-spacing: .5px;
  background-image: linear-gradient(360deg, #ffffffb3 14%, #fff);
  margin-bottom: 0;
  font-size: 15px;
}

.margin-60 {
  margin-top: 0;
  display: block;
}

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

.margin-40 {
  z-index: 1;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  order: 0;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding-top: 40px;
  display: flex;
  position: relative;
}

.brand-logo {
  background-image: url('../images/team_1team.avif');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 160px;
  height: 106px;
  margin-left: 18px;
  margin-right: 18px;
  display: inline-block;
  position: relative;
  top: 2px;
  left: -3px;
}

.top-text {
  float: none;
  clear: none;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  letter-spacing: .2px;
  text-transform: uppercase;
  background-color: #ffffff12;
  border-radius: 0;
  flex-flow: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  margin-bottom: 0;
  padding: 9px 17px;
  font-family: Figtree, sans-serif;
  font-size: 12px;
  font-weight: 500;
  display: block;
  position: static;
  overflow: visible;
}

.top-text.flex {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.top-text.about-page {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  flex: 0 auto;
  order: 0;
  justify-content: center;
  align-items: stretch;
  width: 19%;
  margin: auto;
  display: flex;
  position: static;
}

.top-text.homepage {
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  display: inline;
}

.grid-3-columns {
  grid-column-gap: 35px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: auto;
  margin-top: 0;
  padding-top: 40px;
  display: grid;
}

.grid-3-columns.about-us {
  grid-column-gap: 35px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  place-content: stretch;
  place-items: center;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  padding-bottom: 0;
  display: grid;
  position: static;
}

.grid-3-columns.about-page {
  grid-column-gap: 35px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: stretch;
  place-items: center;
  width: auto;
  height: auto;
  max-height: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  display: grid;
}

.step-box-main {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  border-radius: 0;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  box-shadow: 0 0 1px 2px #1018280f;
}

.step-box-main.about-us {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  width: 500px;
  height: 440px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  display: block;
}

.step-icon {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-image: linear-gradient(23deg, var(--second-color), #2a7de1);
  vertical-align: baseline;
  border-radius: 0;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  position: static;
}

.small-icon {
  mix-blend-mode: overlay;
  width: 40px;
}

.step-main-title {
  letter-spacing: .5px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(140deg, #ffffffb3, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0 auto;
  font-family: Figtree, sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
}

.step-main-title.about-us {
  text-align: center;
  margin-left: 0;
  padding-top: 14px;
  font-size: 25px;
  display: block;
}

.step-main-title.about-us.subhead {
  color: var(--neon-green);
  margin-bottom: 17px;
  font-weight: 300;
}

.margin-80 {
  margin-top: 0;
  padding-top: 60px;
}

.margin-150 {
  margin-top: 0;
  padding-top: 140px;
}

.margin-70 {
  margin-top: 0;
}

.margin-70.about-page {
  float: none;
  clear: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: stretch;
  place-items: center;
  width: auto;
  max-width: none;
  max-height: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  display: grid;
  position: static;
  overflow: visible;
}

.testimonials-card {
  grid-column-gap: 70px;
  grid-row-gap: 16px;
  grid-template: ". Area"
  / minmax(401px, .75fr) 5fr;
  grid-auto-columns: 1fr;
  justify-content: stretch;
  align-items: center;
  max-width: 100%;
  margin-top: 0;
  padding-left: 2rem;
  padding-right: 2rem;
  display: grid;
  position: static;
}

.image-wrap {
  z-index: 1;
  object-fit: cover;
  border-radius: 0;
  flex: none;
  justify-content: flex-start;
  width: 400px;
  max-width: 600px;
  height: 500px;
  min-height: 0;
  max-height: 600px;
  margin-top: 0;
  padding-top: 0;
  display: block;
  position: relative;
  overflow: clip;
}

.image-wrap._01 {
  aspect-ratio: 16 / 9;
  min-height: auto;
}

.paralax-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  transform: scale(1.05);
}

.paralax-image.home-page {
  float: none;
  clear: none;
  aspect-ratio: auto;
  vertical-align: baseline;
  object-fit: cover;
  border-radius: 0;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin-top: 0;
  padding-top: 0;
  display: block;
  position: static;
  bottom: auto;
  overflow: visible;
}

.fun-grid {
  grid-column-gap: 38px;
  grid-row-gap: 38px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.fun-flex {
  grid-row-gap: 13px;
  flex-flow: column;
  display: flex;
}

.circle-absolute {
  background-image: radial-gradient(circle farthest-corner at 100% 50%, var(--blue), #fff0 47%);
  opacity: .53;
  pointer-events: none;
  min-width: 50vw;
  min-height: 50vw;
  position: absolute;
  inset: auto 0% 15% auto;
}

.circle-absolute._01 {
  background-image: radial-gradient(circle farthest-corner at 0% 50%, var(--blue), #fff0 47%);
  inset: auto auto 20% 0%;
}

.logo-page {
  mix-blend-mode: normal;
  width: 120px;
  position: absolute;
  inset: auto 20px 20px auto;
}

.arrow-slider-right {
  border: 1px solid #fff;
  border-radius: 0 9px 9px 0;
  justify-content: center;
  align-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 23px;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
  top: -140px;
}

.arrow-slider-left {
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  color: var(--second-color);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-radius: 9px 0 0 9px;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 23px;
  text-decoration: none;
  transition: transform .3s;
  display: flex;
  inset: -140px 50px auto auto;
}

.slider-mask {
  max-width: 440px;
  height: 100%;
  overflow: visible;
}

.slide-item {
  vertical-align: top;
  position: relative;
}

.invert-arrow {
  filter: invert();
}

.overlay-bottom {
  background-image: linear-gradient(180deg, #0000, var(--second-color) 94%);
  justify-content: center;
  align-items: flex-end;
  min-height: 300px;
  padding-bottom: 60px;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.brand-image {
  width: 80px;
  margin-bottom: 0;
  padding-top: 0;
}

.brand-image._01 {
  flex-flow: row;
  flex: 0 auto;
  order: 0;
  justify-content: center;
  align-self: flex-start;
  align-items: flex-start;
  width: 37%;
  height: 100%;
  max-height: 100%;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

.brand-image._02 {
  float: none;
  width: 23%;
  height: 100%;
  max-height: 100%;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
  position: static;
}

.brand-image._03 {
  width: 160px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.margin-bottom {
  max-width: 100%;
  margin-bottom: 0;
}

.section-testimonials {
  background-color: var(--blue);
  background-image: radial-gradient(circle farthest-corner at 100% 0%, #0a1f8f, var(--second-color) 66%);
  padding: 120px 5%;
  position: relative;
}

.section-testimonials.ovetflow {
  background-image: radial-gradient(circle farthest-corner at 100% 0%, #0a1f8f 15%, var(--second-color));
  margin-top: 0;
  padding-top: 70px;
  overflow: hidden;
}

.dots-slider-hidden {
  display: none;
}

.card-testimonial {
  min-height: 600px;
  color: var(--first-color);
  border: 1px solid #ffffff2e;
  border-left-style: none;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-left: 0;
  padding: 0 40px;
  text-decoration: none;
  transition: transform .3s, color .3s;
  display: block;
  position: relative;
}

.card-testimonial.first {
  float: none;
  clear: none;
  border-left-style: solid;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-flow: column;
  justify-content: center;
  min-height: 600px;
  margin-left: 0;
  padding: 0 40px;
  display: block;
  position: relative;
}

.card-testimonial.second {
  justify-content: center;
  min-height: 600px;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 40px;
  display: block;
}

.card-testimonial.last {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.slide-wrapper {
  background-color: #0000;
  height: 100%;
  padding-top: 30px;
  display: flex;
}

.subhead-testi {
  opacity: 1;
  text-align: center;
  vertical-align: top;
  margin-bottom: 0;
  font-family: Figtree, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  display: block;
}

.author-flex {
  grid-column-gap: 13px;
  grid-row-gap: 13px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.author-flex.left {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.author-photo {
  background-image: url('../images/team-1_1team-1.avif');
  background-position: 50%;
  background-size: 80px;
  border-radius: 10px;
  width: 56px;
  height: 56px;
}

.author-photo._01 {
  background-image: url('../images/Intense-Gaze-of-a-Bald-Man-with-Green-Eyes_1Intense Gaze of a Bald Man with Green Eyes.avif');
}

.author-photo._02 {
  background-image: url('../images/Thoughtful-Young-Man-Portrait_1Thoughtful Young Man Portrait.avif');
}

.author-photo._03 {
  background-image: url('../images/Profile-Portrait-with-Orange-Background_1Profile Portrait with Orange Background.avif');
}

.author-photo._04 {
  background-image: url('../images/Contemplative-Young-Man-in-Glasses_1Contemplative Young Man in Glasses.avif');
}

.author-photo._05 {
  background-image: url('../images/Portrait-of-a-Young-Woman_1Portrait of a Young Woman.avif');
}

.author-photo._06 {
  background-image: url('../images/Contemplative-Woman-in-Mustard-Sweater_1Contemplative Woman in Mustard Sweater.avif');
}

.second-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 48px;
  line-height: 1.1;
}

.second-title.third {
  text-align: center;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: block;
  position: static;
  overflow: visible;
}

.other-font {
  font-style: italic;
  font-weight: 500;
}

.other-font.lighter {
  opacity: .54;
  opacity: .7;
  font-style: normal;
  display: block;
}

.view-project {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #ffffff4d;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.left-part {
  background-color: #101820;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.maw-w-right {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 460px;
  min-height: 100%;
  margin-right: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 30px;
  display: flex;
}

.logo-flex {
  grid-column-gap: 96px;
  grid-row-gap: 96px;
  filter: brightness(110%);
  justify-content: center;
  align-items: center;
  display: flex;
}

.work-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-radius: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}

.work-photo {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
}

.margin-30 {
  margin-top: 0;
  padding-top: 0;
}

.photo-right {
  z-index: 15;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.project-circle {
  z-index: 999;
  opacity: 1;
  color: #000;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 76px;
  height: 76px;
  font-size: 20px;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: auto 20px 20px auto;
}

.project-circle.left {
  inset: auto auto 20px 20px;
}

.play-button {
  width: 14px;
}

.margin-20 {
  margin-top: 0;
  font-family: Figtree, sans-serif;
  display: block;
}

.sticky-01 {
  position: sticky;
  top: 100px;
}

.sticky-02 {
  z-index: 1;
  margin-top: 50px;
  position: sticky;
  top: 100px;
}

.sticky-02.z-1 {
  z-index: 3;
}

.sticky-03 {
  z-index: 3;
  margin-top: 50px;
  position: sticky;
  top: 0;
}

.sticky-03._50 {
  top: 100px;
}

.logo-work {
  width: 160px;
  display: block;
}

.hero_pricing-link {
  color: #fff;
  text-align: center;
  background-color: #101820;
  border: 1px solid #323e48;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 300;
  text-decoration: none;
  transition: all .2s;
}

.hero_pricing-link:hover {
  box-shadow: 0 0 5px 2px #ffffffbf;
}

.pricing-large {
  margin-top: 10px;
  margin-bottom: 15px;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.1;
}

.pricing-tab {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.most-popular {
  background-image: linear-gradient(63deg, #a2a9ad80, var(--second-color));
  text-align: center;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: .8rem;
  font-weight: 500;
}

.pricing-text {
  color: var(--first-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.gradient-main {
  background-color: var(--blue);
  opacity: .6;
  filter: blur(45px);
  border-top: 1px solid silver;
  border-right: 1px solid silver;
  border-radius: 100px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 200px;
  display: flex;
  position: absolute;
  inset: -26% -29% auto auto;
}

.gradient-main.for-enterprise {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
  inset: -26% auto auto -29%;
}

.pricing-monthly {
  overflow: hidden;
}

.pricing-wrap {
  background-color: #ffffff1f;
  border-radius: 15px;
  padding: 1px;
  position: relative;
  overflow: hidden;
}

.pricing-wrap.left-gradient {
  padding-bottom: 1px;
}

.pricing-wrap.is-professional {
  background-color: #ffffff1f;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 1px;
  display: flex;
}

.gradient-second {
  z-index: -1;
  background-color: var(--blue);
  filter: blur(4px);
  -webkit-text-fill-color: inherit;
  background-clip: border-box;
  border-radius: 20px;
  width: 25%;
  height: 25%;
  position: absolute;
  inset: 0% auto 0% 0%;
  overflow: hidden;
}

.month-small {
  opacity: .46;
  margin-left: 4px;
  font-size: 1rem;
}

.hero_pricing-features-div {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.check {
  width: 19px;
}

.gradient {
  background-color: var(--blue);
  opacity: .6;
  filter: blur(45px);
  border-radius: 263px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 200px;
  display: flex;
  position: absolute;
  inset: -26% 0% 0% 15%;
}

.tab-link-yearly {
  background-color: #0000;
  border-radius: 30px;
  padding-left: 25px;
  padding-right: 25px;
}

.tab-link-yearly:hover {
  background-color: #ffffff12;
}

.tab-link-yearly.w--current {
  background-color: var(--blue);
}

.tab-menu {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-color: var(--second-color);
  border: 1px solid #ffffff26;
  border-radius: 30px;
  justify-content: center;
  padding: 5px;
  display: flex;
}

.pricing-detail-text {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  align-items: center;
  display: flex;
}

.tab-link-monthly {
  background-color: #0000;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
  display: flex;
}

.tab-link-monthly:hover {
  background-color: #ffffff12;
  border-radius: 50px;
}

.tab-link-monthly.w--current {
  background-color: var(--blue);
  border-radius: 30px;
}

.pricing-big-title {
  opacity: .6;
  color: var(--neon-green);
  text-align: center;
  text-transform: uppercase;
  align-self: auto;
  font-family: Figtree, sans-serif;
  font-size: 25px;
  font-weight: 400;
  display: block;
}

.tab-yearly {
  overflow: hidden;
}

.pricing-title {
  grid-column-gap: 75px;
  grid-row-gap: 75px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center stretch;
  width: 100%;
  min-height: 25px;
  display: flex;
}

.pricing-desciprtion {
  grid-column-gap: 10px;
  grid-row-gap: 8px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.pricing-grid {
  grid-column-gap: 25px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: stretch;
  margin-top: 99px;
  margin-bottom: 0;
  display: grid;
}

.pricing-table {
  z-index: 2;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  background-color: var(--second-color);
  border-radius: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-items: start;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.pricing-table.eneterprise {
  padding-bottom: 30px;
}

.pricing-table.proffesional {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  flex-flow: column;
  width: 100%;
  height: auto;
  padding-bottom: 36px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.feature-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.feature-big-title {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
}

.feature-big-title.dark {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
}

.p-for-price {
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 500;
}

.faq-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}

.faq-item-top {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-bottom: 1px #ffffff1f;
  border-left: 1px #ffffff1f;
  border-right: 1px #ffffff1f;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 5rem 1fr auto;
  grid-auto-columns: 1fr;
  justify-content: start;
  place-items: center start;
  width: 100%;
  padding-top: 34px;
  padding-bottom: 34px;
  display: grid;
}

.faq-item {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  cursor: pointer;
  background-color: #ddd0;
  border-top: 1px solid #cfd2d3;
  border-bottom: 1px #ffffff1f;
  flex-direction: column;
  flex: 0 auto;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-end;
  place-items: stretch stretch;
  width: 100%;
  padding: 0;
  transition: all .8s cubic-bezier(.215, .61, .355, 1);
  display: flex;
}

.faq-item.w--current {
  background-color: #ddd0;
  overflow: hidden;
}

.what-answer-block {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 15px;
  display: flex;
}

.body-large {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 160%;
  text-decoration: none;
}

.plus-icon {
  width: 100%;
  max-width: 26px;
  height: 26px;
  margin-top: 0;
}

.what-outer {
  width: 100%;
}

.answer-block {
  background-color: #0000;
  display: block;
  position: relative;
  overflow: hidden;
}

.question-block {
  grid-column-gap: 12px;
  white-space: pre-wrap;
  width: 100%;
  padding: 30px 0 0;
  display: flex;
}

.question-block.top {
  justify-content: flex-start;
  align-items: center;
  padding-top: 0;
}

.question-inner {
  grid-column-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.what-i-do {
  border-bottom: 1px solid #ffffff36;
  flex-direction: column;
  width: 100%;
  padding-bottom: 30px;
  display: flex;
}

.combo-grid {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto;
  grid-template-columns: .97fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.combo-blog-list {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  display: flex;
}

.overlay {
  z-index: 1;
  background-color: var(--second-color);
  opacity: .28;
  position: absolute;
  inset: 0%;
}

.overlay._01 {
  opacity: .1;
}

.circle-center {
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.circle-center._15-radius {
  border-radius: 7px;
  height: 100%;
}

.main-overlay {
  z-index: 6;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}

.blog-photo-first {
  width: 100%;
  min-height: 100%;
  transform: scale3d(1none, 1none, 1none);
  object-fit: cover;
  transform-style: preserve-3d;
}

.blog-wrapper-first {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
  position: relative;
}

.blog-wrapper-first.second {
  height: 100%;
}

.right-flex {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.category-title {
  opacity: .6;
  color: var(--first-color);
  margin-bottom: 0;
  font-size: 17px;
}

.category-title.smaller {
  font-size: 15px;
}

.article-small-item {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.data-flex {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cta-wrapper {
  background-color: var(--second-color);
  text-align: center;
  background-image: url('../images/OC-08-2_1OC 08 (2).avif');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #ffffff21;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 15%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.footer {
  padding: 35px 5% 30px;
  position: relative;
  overflow: hidden;
}

.footer-left-wrapper {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.social-wrapper {
  grid-column-gap: 17px;
  opacity: .8;
  filter: none;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-top: 7px;
  display: flex;
  position: relative;
}

.footer-link-main {
  opacity: .6;
  color: var(--first-color);
  align-items: center;
  margin-bottom: 0;
  padding-top: 7px;
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.footer-link-main:hover {
  opacity: 100;
  color: #fff;
}

.footer-link-main.w--current, .footer-logo-link {
  margin-bottom: 0;
}

.social-icon-footer {
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-icon-footer:hover {
  opacity: .7;
}

.social-icon-footer.no-invert {
  filter: invert();
}

.footer-main-grid {
  grid-column-gap: 150px;
  grid-row-gap: 150px;
  grid-template-rows: auto;
  grid-template-columns: .5fr minmax(auto, 1fr);
  align-items: start;
}

.footer-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.6fr 1fr;
  align-items: start;
  width: 100%;
  margin-left: auto;
}

.foorer-list {
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: flex-start start;
  display: flex;
}

.margin-20px {
  margin-top: 20px;
}

.copyright-second {
  opacity: .63;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
}

.line-move {
  opacity: 1;
  position: relative;
  top: -2px;
}

.logo-footer {
  opacity: .06;
  mix-blend-mode: difference;
  width: 400px;
  position: absolute;
  inset: auto auto -120px -100px;
}

.navigation-wrapper {
  z-index: 999;
  position: fixed;
  inset: 0% 0% auto;
}

.pattern {
  opacity: .3;
  pointer-events: none;
  position: absolute;
}

.pattern._01 {
  top: 263.203px;
}

.about-photo {
  border-radius: 7px;
  width: 460px;
  min-height: 440px;
}

.about-photo._02 {
  background-image: url('../images/Robotic-Hand-with-Phone_1Robotic Hand with Phone.avif');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
}

.about-photo._01 {
  background-image: url('../images/Stylish-Duo-Portrait_1Stylish Duo Portrait.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-photo._03 {
  background-image: url('../images/Futuristic-Portrait-1_1Futuristic Portrait (1).avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 520px;
}

.about-photo._04 {
  background-image: url('../images/Modern-Smart-Speaker_1Modern Smart Speaker.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 350px;
}

.section-about {
  padding-bottom: 30px;
  padding-left: 5%;
  overflow: hidden;
}

.testimonial-card-group {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  display: flex;
}

.marquee {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  align-self: stretch;
  width: 100%;
  margin-top: 100px;
  display: flex;
  overflow: visible;
}

.marquee-group {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: row;
  flex: none;
  display: flex;
}

.team-grid {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.image-wrap-2 {
  z-index: 1;
  aspect-ratio: 1;
  object-fit: cover;
  flex: none;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.image-wrap-2.for-team {
  aspect-ratio: 1;
  border-radius: 25px;
}

.team-wrapper {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.team-name {
  opacity: .7;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.3;
}

.team-name.second {
  opacity: .9;
  margin-top: 5px;
  font-size: 17px;
  font-weight: 400;
}

.blog-list {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.utility-page-wrap {
  background-image: url('../images/OC-08-2_1OC 08 (2).avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  display: flex;
}

.utility-page-form {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.success-message {
  background-color: var(--blue);
  text-align: center;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 500;
}

.input-first {
  min-height: 53px;
  color: var(--first-color);
  background-color: #fff0;
  border: 1px solid #ffffff29;
  border-radius: 7px;
  margin-bottom: 0;
  padding: 16px 24px 16px 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.input-first:hover {
  border-color: var(--first-color);
}

.input-first:focus {
  border-color: var(--first-color);
  color: #5b6670;
}

.input-first::placeholder {
  color: #ffffffb3;
  font-size: 15px;
  font-weight: 400;
}

.contact-form-right-side {
  border-top: 1px solid #ffffff26;
  align-items: center;
  display: flex;
}

.text-area {
  color: #fff;
  background-color: #fff0;
  border: 1px solid #ffffff29;
  border-radius: 7px;
  min-height: 120px;
  margin-bottom: 5px;
  padding: 16px 24px 16px 15px;
  font-size: 15px;
  line-height: 28px;
}

.text-area:hover {
  border-color: #2a7de1;
}

.text-area:focus {
  color: #101820;
  border-color: #410099;
}

.text-area::placeholder {
  color: #fff9;
  font-size: 15px;
  font-weight: 500;
}

.contact-text {
  opacity: .7;
  color: var(--first-color);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color .3s;
}

.contact-text:hover {
  opacity: 1;
  text-decoration: underline;
}

.contact-details-flex {
  grid-column-gap: 30px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.error-message {
  color: #fff;
  text-align: center;
  background-color: #fa242a;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 500;
}

.contact-details._01 {
  margin-top: 30px;
}

.gray-text {
  opacity: .55;
  color: #fff;
}

.contact-form-left-side {
  padding-left: 30px;
  padding-right: 30px;
}

.form-grid {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.divider-line {
  background-color: #ffffff26;
  height: 1px;
  margin-top: 45px;
  margin-bottom: 45px;
}

.contact-grid {
  grid-column-gap: 50px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.2fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  display: grid;
}

.white-block {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-right: 20px;
}

.caption {
  color: #ffffff8c;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}

.caption.margined {
  color: #101820;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
}

.caption.margined._2 {
  color: var(--first-color);
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
}

.color-block {
  background-color: var(--blue);
  border: 1px solid #7b868c33;
  border-radius: 2px;
  width: 100%;
  height: 85px;
  margin-bottom: 5px;
  padding: 10px;
  display: flex;
}

.color-block._2 {
  background-color: var(--second-color);
  color: #323e48;
}

.light-block-second {
  border-radius: 3px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-right: 20px;
}

.light-block-second.rounded-bottom {
  border-radius: 3px;
  padding-bottom: 30px;
}

.color-block-parent {
  width: 20%;
  margin-right: 20px;
}

.color-row {
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 35px;
  padding: 25px 0 15px;
  display: flex;
}

.light-block {
  border-radius: 3px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-right: 20px;
}

.licensing-content {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

.licensing-content.center {
  text-align: center;
}

.subhead {
  opacity: .7;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.3;
}

.margin-50 {
  margin-top: 50px;
}

.licensing-title {
  font-size: 30px;
}

.licensing-link {
  color: var(--first-color);
  text-decoration: underline;
}

.licensing-grid {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.main-blog-post h4 {
  max-width: 630px;
  margin: 0 auto 15px;
  font-weight: 600;
}

.main-blog-post h3 {
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fff6, #fff 25%);
  -webkit-background-clip: text;
  background-clip: text;
  max-width: 630px;
  margin: 0 auto 15px;
  font-size: 22px;
  font-weight: 500;
}

.main-blog-post img {
  margin-top: 20px;
  margin-bottom: 5px;
}

.main-blog-post p {
  max-width: 630px;
  margin: 20px auto;
  font-size: 19px;
}

.main-blog-post figcaption {
  opacity: .48;
  margin-bottom: 20px;
  font-size: 15px;
}

.main-blog-post h1, .main-blog-post h6 {
  max-width: 630px;
  margin: 0 auto 15px;
}

.main-blog-post li {
  opacity: .7;
  font-size: 16px;
  line-height: 23px;
}

.main-blog-post h5 {
  max-width: 630px;
  margin: 0 auto 15px;
  font-weight: 600;
}

.main-blog-post a {
  color: var(--first-color);
  text-decoration: underline;
}

.main-blog-post ol {
  max-width: 630px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.main-blog-post blockquote {
  border-left-width: 1px;
  border-left-color: var(--blue);
  max-width: 630px;
  margin: 20px auto 25px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.main-blog-post h2 {
  max-width: 630px;
  margin: 0 auto 15px;
  font-weight: 600;
}

.main-blog-post ul {
  max-width: 630px;
  margin-left: auto;
  margin-right: auto;
}

.work-page-grid {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.8fr;
  grid-auto-columns: 1fr;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.margin-10 {
  margin-top: 10px;
}

.margin-110 {
  margin-top: 110px;
}

.logo-header_wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 20px 40px;
  display: flex;
}

.text-block {
  flex-flow: column;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 52px;
  font-family: Figtree, sans-serif;
  font-size: 12px;
  display: flex;
}

.text-block.logo-text-header {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  mix-blend-mode: normal;
  background-color: #ffffff12;
  border: 1px #000;
  border-radius: 0;
  justify-content: flex-start;
  align-items: center;
  padding: 9px 17px;
}

.paragraph {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 300;
  display: flex;
}

.paragraph.about-us {
  text-align: center;
  text-shadow: 0 0 #0003;
  justify-content: center;
  align-items: center;
  margin-bottom: auto;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  display: block;
  position: static;
}

.paragraph-2 {
  margin-bottom: 0;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 300;
}

.paragraph-2.about-us {
  font-size: 14px;
  font-weight: 400;
}

.paragraph-3 {
  font-family: Figtree, sans-serif;
  font-weight: 300;
}

.paragraph-4 {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.paragraph-4.about-us {
  font-size: 14px;
}

.paragraph-5 {
  margin-bottom: 0;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.paragraph-5.about-us {
  font-size: 14px;
}

.paragraph-6 {
  font-family: Figtree, sans-serif;
  font-weight: 300;
}

.text-block-2 {
  margin-top: 0;
  font-family: Figtree, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  position: relative;
}

.text-block-2.about-page {
  text-align: center;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 1200px;
  height: auto;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 70px;
  font-size: 39px;
  line-height: 39px;
  display: block;
}

.paragraph-7, .paragraph-8, .paragraph-9 {
  text-align: center;
  justify-content: center;
  margin-bottom: 0;
  font-family: Figtree, sans-serif;
  font-size: 14px;
  font-weight: 300;
  display: flex;
}

.paragraph-10 {
  margin-bottom: 0;
  padding-top: 20px;
  font-family: Figtree, sans-serif;
  font-size: 14px;
}

.div-block-2 {
  justify-content: flex-start;
  width: 100%;
  max-width: 770px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  display: block;
  position: static;
}

.paragraph-11 {
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 0;
  font-size: 14px;
}

.button-copy {
  color: #101820;
  text-align: center;
  letter-spacing: -.03rem;
  background-color: #00ce7c;
  padding: .75rem 1.4rem;
  font-weight: 500;
  text-decoration: none;
  overflow: visible;
}

.button-copy.first {
  color: var(--first-color);
  letter-spacing: .5px;
  text-transform: uppercase;
  background-color: #fff0;
  background-image: linear-gradient(#00ce7c, #00ce7c);
  border-radius: .7rem;
  flex-flow: row;
  flex: 0 auto;
  align-self: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: Figtree, sans-serif;
  transition: all .3s;
  display: flex;
  box-shadow: 0 7px 80px -12px #2a7de1, inset 0 0 #101820;
}

.button-copy.first:hover {
  background-color: #2a7de1;
  background-image: linear-gradient(20deg, #00ce7c 37%, #fff);
  box-shadow: inset 0 0 #101820;
}

.button-copy.first.full {
  width: 100%;
}

.div-block-3 {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 175px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 77px;
  padding-bottom: 77px;
  display: flex;
  position: static;
}

.image-2 {
  margin-bottom: 0;
  padding-bottom: 10px;
}

.image-3 {
  padding-top: 1px;
}

.image-4 {
  padding-bottom: 5px;
}

.image-5 {
  padding-bottom: 2px;
}

.image-6 {
  padding-top: 7px;
}

.image-7 {
  margin-left: -25px;
  padding-top: 7px;
}

.image-8 {
  padding-bottom: 2px;
}

.image-9 {
  padding-bottom: 10px;
}

.image-10 {
  padding-top: 1px;
}

.image-11, .image-12 {
  padding-top: 7px;
}

.image-13 {
  padding-bottom: 2px;
}

.image-14 {
  padding-bottom: 10px;
}

.image-15 {
  padding-top: 1px;
}

.image-16, .image-17 {
  padding-top: 7px;
}

.div-block-4 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-radius: 0;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin-top: 0;
  padding-top: 10px;
  display: block;
}

.paralax-image-about-page {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  transform: scale(1.05);
}

.paralax-image-about-page.home-page {
  aspect-ratio: auto;
  width: 600%;
  max-width: 400px;
  height: 500px;
  max-height: 500px;
  overflow: visible;
}

.bold-text, .bold-text-2, .bold-text-3, .bold-text-4 {
  color: var(--neon-green);
}

.paragraph-12, .paragraph-13 {
  text-align: center;
  font-family: Figtree, sans-serif;
}

.client-logo-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.max-width {
  width: 100%;
  max-width: 1140px;
  margin-top: 0;
}

.heading {
  font-family: Figtree, sans-serif;
  position: static;
}

.logo-grid.about-us {
  grid-column-gap: 0px;
  grid-row-gap: 43px;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: .75fr .75fr .75fr .75fr .75fr;
  grid-auto-columns: 1fr;
  margin-top: 0;
  padding-top: 77px;
  display: grid;
}

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

.logo-image {
  opacity: 1;
  max-width: 130px;
}

.div-block-5 {
  margin-top: 0;
}

.div-block-6 {
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.div-block-7 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.italic-text {
  padding-bottom: 0;
  display: block;
}

.italic-text-2 {
  vertical-align: top;
  display: block;
}

.italic-text-3 {
  padding-bottom: 20px;
  display: block;
}

.grid, .grid-2 {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
}

.testimonial-card {
  flex-flow: column-reverse;
  flex: 0 auto;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.text-block-3 {
  text-align: center;
  padding-bottom: 40px;
  font-family: Figtree, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
}

.text-block-4 {
  text-align: center;
  font-family: Figtree, sans-serif;
}

.italic-text-4 {
  padding-top: 20px;
  display: block;
}

.italic-text-4._02 {
  padding-top: 17px;
}

.div-block-8 {
  margin-bottom: 0;
  padding-top: 40px;
  padding-bottom: 60px;
  display: block;
}

.testimponial-logo-holder {
  flex-flow: column;
  justify-content: center;
  min-height: 100px;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

.bold-text-7 {
  opacity: .5;
}

.grid-3 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-items: stretch stretch;
  width: 1006%;
  max-width: 100%;
  padding-top: 0;
  display: inline-grid;
}

.paragraph-14, .paragraph-15, .paragraph-16, .paragraph-17, .paragraph-18, .paragraph-19 {
  margin-bottom: 0;
  padding-top: 20px;
  font-size: 14px;
}

.paragraph-20, .paragraph-21, .paragraph-22 {
  margin-bottom: 0;
  padding-top: 20px;
}

.image-18 {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 90px;
  padding-bottom: 0;
  padding-left: 0;
  display: inline-block;
  position: static;
  overflow: clip;
}

.container-2 {
  flex: 0 auto;
}

.div-block-9 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.text-block-5 {
  overflow: visible;
}

@media screen and (max-width: 991px) {
  .line-midddle {
    background-color: #fff;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .navbar-menu {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background-color: #101820e6;
    border-radius: 7px;
  }

  .line-middle-inner {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-button-new.w--open {
    background-color: #0000;
  }

  .line-bottom {
    background-color: #fff;
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .navbar-component {
    min-height: 5rem;
  }

  .navbar-drodpdown-list {
    position: static;
    overflow: hidden;
  }

  .navbar-drodpdown-list.w--open {
    width: auto;
    box-shadow: none;
    border-style: none;
    border-color: #0000;
    padding: 0;
  }

  .menu-left {
    grid-column-gap: 0px;
    grid-row-gap: .5rem;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-right: 12px;
  }

  .svg-icon {
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    inset: auto 0% auto auto;
  }

  .dropdown-content {
    align-content: start;
    align-items: start;
    padding: 1rem 0;
  }

  .dropdown-content.block {
    padding-left: 1rem;
  }

  .menu-right {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .navbar-link {
    width: 100%;
    padding-top: .15rem;
    padding-bottom: .15rem;
    font-size: 16px;
  }

  .icon-component {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-left: 15px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-dropdown {
    width: 100%;
    font-size: 1.125rem;
  }

  .line-top {
    background-color: var(--first-color);
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .dropdown-link {
    padding-left: 0;
    padding-right: 0;
  }

  .dropdown-link:hover {
    background-color: #0000;
  }

  .dropdown-toggle {
    padding-top: .15rem;
    padding-bottom: .15rem;
    font-size: 16px;
  }

  .hero {
    min-height: auto;
    padding: 125px 5% 130px;
  }

  .hero.for-inner {
    padding-top: 130px;
    padding-bottom: 100px;
  }

  .section-content {
    margin-top: 3px;
    padding: 80px 10%;
  }

  .section-content.top-padding {
    padding-top: 120px;
  }

  .logo-grid {
    grid-row-gap: 40px;
    flex-direction: column;
    grid-template-columns: 1fr;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .logo-carousel {
    grid-column-gap: 55px;
  }

  .max-w-width {
    justify-content: center;
    align-items: center;
    margin-top: -43px;
  }

  .display-1 {
    font-size: 90px;
  }

  .display-1._01 {
    font-size: 48px;
  }

  .display-1._02.about-page {
    justify-content: center;
    align-items: center;
    width: 700px;
    padding-bottom: 61px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .display-1._05 {
    font-size: 60px;
  }

  .top-text.about-page {
    flex-flow: column;
    flex: 0 auto;
    margin-top: 0;
    display: block;
    position: static;
  }

  .grid-3-columns {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-3-columns.about-us {
    grid-column-gap: 35px;
    grid-row-gap: 50px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row dense;
    place-content: stretch;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    display: grid;
  }

  .testimonials-card {
    grid-row-gap: 50px;
    flex-flow: column;
    align-items: stretch;
    display: flex;
  }

  .image-wrap {
    max-width: 100%;
    height: 500px;
    min-height: 500px;
    max-height: 500px;
  }

  .paralax-image.home-page {
    text-align: left;
  }

  .arrow-slider-right {
    inset: auto 39.5% -90px auto;
  }

  .arrow-slider-left {
    inset: auto auto -90px 46%;
  }

  .slider-mask {
    position: static;
  }

  .overlay-bottom {
    min-height: 100px;
  }

  .brand-image {
    margin-bottom: 40px;
  }

  .margin-bottom {
    margin-bottom: 24px;
  }

  .section-testimonials {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-testimonials.ovetflow {
    padding-bottom: 136px;
  }

  .card-testimonial {
    padding-top: 37px;
  }

  .left-part {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .maw-w-right {
    max-width: 90%;
    margin-left: auto;
    padding-left: 0;
  }

  .work-grid {
    flex-flow: column-reverse;
    grid-template-columns: 1fr;
    display: flex;
  }

  .work-grid.reverse {
    flex-flow: column;
  }

  .project-circle.left {
    left: auto;
    right: 20px;
  }

  .sticky-01, .sticky-02 {
    position: relative;
    top: 0;
  }

  .sticky-02.z-1 {
    position: relative;
  }

  .sticky-03._50 {
    position: relative;
    top: 0;
  }

  .pricing-tab {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .pricing-content {
    width: 100%;
  }

  .pricing-wrap.is-professional {
    max-width: none;
  }

  .pricing-title {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .pricing-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .faq-item-top {
    grid-template-columns: 2rem 1fr auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .combo-grid {
    grid-row-gap: 35px;
    flex-flow: column-reverse;
    display: flex;
  }

  .combo-blog-list {
    grid-row-gap: 35px;
  }

  .circle-center {
    border-radius: 10px;
  }

  .cta-wrapper {
    padding-left: 32px;
    padding-right: 32px;
  }

  .footer {
    padding-top: 30px;
  }

  .footer-left-wrapper {
    max-width: 70%;
  }

  .footer-main-grid {
    grid-column-gap: 0px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
  }

  .footer-grid {
    margin-left: 0;
  }

  .about-photo {
    width: 420px;
    min-height: 360px;
  }

  .team-grid {
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr;
  }

  .image-wrap-2.for-team {
    aspect-ratio: 1;
  }

  .team-name {
    font-size: 19px;
  }

  .blog-list {
    grid-template-columns: 1fr;
  }

  .utility-page-wrap {
    height: auto;
    padding-top: 202px;
    padding-bottom: 202px;
  }

  .contact-form-right-side {
    border-top-style: none;
  }

  .contact-form-left-side {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .divider-line {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .contact-grid {
    grid-row-gap: 60px;
    flex-flow: column-reverse;
    grid-template-columns: 1.2fr;
    display: flex;
  }

  .div-block {
    width: 100%;
  }

  .color-block-parent {
    width: 33.3333%;
  }

  .subhead {
    font-size: 19px;
  }

  .work-page-grid {
    max-width: 100%;
  }

  .div-block-4, .paralax-image-about-page.home-page {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .navbar-menu {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-component {
    min-height: 4.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .dropdown-content {
    grid-row-gap: 1.5rem;
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
  }

  .dorpdown-link-list {
    grid-row-gap: .5rem;
    max-width: none;
  }

  .navbar-link, .dropdown-toggle {
    font-size: 1rem;
  }

  .section-content.top-padding {
    padding-top: 80px;
  }

  .logo-grid {
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }

  .display-1 {
    font-size: 70px;
  }

  .display-1._01 {
    font-size: 35px;
  }

  .display-1._02 {
    text-align: center;
    width: auto;
    font-size: 35px;
  }

  .display-1._04 {
    font-size: 35px;
  }

  .display-1._05 {
    font-size: 40px;
  }

  .brand-logo {
    width: 120px;
    height: 67px;
  }

  .top-text {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: left;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 29%;
    max-height: 100%;
    display: flex;
    position: static;
    overflow: visible;
  }

  .grid-3-columns {
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
  }

  .step-main-title {
    margin-bottom: 15px;
  }

  .testimonials-card {
    justify-content: center;
  }

  .image-wrap {
    height: 400px;
    min-height: 400px;
    max-height: 100%;
  }

  .paralax-image.home-page {
    vertical-align: baseline;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: inline-flex;
    position: absolute;
  }

  .fun-grid {
    grid-template-columns: 1fr 1fr;
  }

  .arrow-slider-right {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    font-size: 22px;
    line-height: 24px;
    bottom: -90px;
    right: 39%;
  }

  .arrow-slider-left {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    font-size: 22px;
    line-height: 24px;
    bottom: -90px;
    left: 39%;
  }

  .brand-image {
    margin-bottom: 32px;
  }

  .section-testimonials {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .card-testimonial {
    min-height: 380px;
    padding: 31px 32px 20px;
  }

  .left-part {
    min-height: auto;
  }

  .logo-flex {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }

  .photo-right {
    min-height: 450px;
  }

  .project-circle {
    width: 90px;
    height: 90px;
  }

  .pricing-wrap.left-gradient {
    width: auto;
  }

  .pricing-big-title {
    font-size: 1rem;
  }

  .pricing-grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-row-gap: 60px;
    flex-flow: column;
    display: flex;
  }

  .faq-item-top {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    grid-template-columns: 1fr auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .cta-wrapper {
    padding-top: 59px;
    padding-bottom: 59px;
  }

  .footer-left-wrapper {
    max-width: 90%;
  }

  .footer-link-main:hover {
    color: #5b6670;
  }

  .footer-logo-link {
    margin-bottom: 1.5rem;
    padding-left: 0;
  }

  .footer-main-grid {
    flex-flow: column;
    align-items: stretch;
    display: flex;
  }

  .footer-grid {
    grid-template-columns: 1fr 1.6fr 1.2fr;
    width: 100%;
  }

  .logo-footer {
    bottom: -216px;
    left: -36px;
  }

  .about-photo {
    width: 360px;
    min-height: 250px;
  }

  .marquee.second {
    margin-top: 0;
  }

  .utility-page-wrap {
    padding-top: 154px;
    padding-bottom: 154px;
  }

  .form-grid {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    grid-template-columns: 1fr;
  }

  .divider-line {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .work-page-grid {
    flex-flow: column;
    display: flex;
  }

  .text-block-2 {
    text-align: center;
  }

  .paragraph-9 {
    flex-flow: row;
    align-items: center;
  }

  .div-block-2 {
    width: auto;
  }

  .div-block-4 {
    flex: 0 auto;
    align-self: center;
    width: auto;
  }

  .paralax-image-about-page.home-page {
    vertical-align: baseline;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: inline-flex;
    position: absolute;
  }
}

@media screen and (max-width: 479px) {
  .navbar-component {
    min-height: 3.6rem;
  }

  .dropdown-content {
    grid-template-columns: 1fr;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .logotype {
    width: 110px;
  }

  .icon-component {
    margin-left: 0;
  }

  .dropdown-link {
    padding-left: 0;
  }

  .hero.for-inner {
    padding-top: 110px;
    padding-bottom: 40px;
  }

  .shadow-absolute {
    justify-content: flex-start;
    display: block;
    position: absolute;
  }

  .button.first {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .button.first.on-nav {
    display: none;
  }

  .section-content {
    max-width: 890px;
    margin: 0 auto;
    padding: 40px 0% 0;
    position: static;
  }

  .section-content.top-padding {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
  }

  .section-content.for-cta {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 50px;
    padding-bottom: 20px;
  }

  .section-content.about-page {
    margin-bottom: 0;
    padding-top: 60px;
  }

  .carousel {
    width: 100%;
  }

  .max-w-width {
    margin-top: 0;
    padding-bottom: 0;
    display: flex;
  }

  .max-w-width._01 {
    margin-top: 0;
    padding-top: 20px;
  }

  .max-w-width._01.featured-work {
    padding-top: 20px;
  }

  .display-1 {
    font-size: 37px;
  }

  .display-1._01 {
    text-align: center;
    margin-bottom: 0;
    padding-top: 40px;
    padding-bottom: 0;
    font-size: 30px;
  }

  .display-1._02 {
    box-sizing: border-box;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    aspect-ratio: auto;
    text-align: center;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 290px;
    max-width: 290px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-left: 0;
    padding-right: 0;
    font-size: 30px;
    line-height: 1;
    display: block;
    position: relative;
  }

  .display-1._02.about-page {
    text-align: left;
    width: auto;
    max-width: 250px;
    margin-bottom: 60px;
    padding-bottom: 0;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    position: static;
  }

  .display-1._03 {
    padding-top: 40px;
  }

  .display-1._04 {
    text-align: center;
    padding-top: 0;
    font-size: 28px;
  }

  .display-1._05 {
    margin-top: 0;
    padding-top: 40px;
    font-size: 30px;
  }

  .margin-60 {
    margin-top: 0;
  }

  .button-flex {
    flex-flow: row;
    display: flex;
    position: static;
  }

  .margin-40 {
    flex-flow: wrap;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 0;
    padding-bottom: 60px;
    position: static;
  }

  .brand-logo {
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    width: 10px;
    height: 10px;
    margin-left: 0;
    margin-right: 0;
  }

  .top-text {
    clear: none;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: center;
    vertical-align: middle;
    flex-flow: row;
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    width: 290px;
    height: 100%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    display: block;
    position: relative;
  }

  .top-text.flex {
    flex-flow: column;
    width: auto;
  }

  .top-text.about-page {
    flex-flow: row;
    width: 290px;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
  }

  .grid-3-columns.about-us {
    grid-column-gap: 35px;
    grid-row-gap: 50px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: auto;
    margin-top: 0;
    padding-top: 0;
    display: block;
    position: static;
  }

  .step-box-main {
    margin-top: 0;
  }

  .step-box-main.about-us {
    width: auto;
    height: auto;
    margin-top: 0;
    padding-top: 0;
  }

  .step-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
  }

  .small-icon {
    width: 38px;
    height: 38px;
  }

  .step-main-title {
    margin-bottom: 0;
    font-size: 18px;
  }

  .step-main-title.about-us {
    text-align: center;
    width: 290px;
    max-width: 300px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
  }

  .step-main-title.about-us.subhead {
    margin-bottom: 0;
  }

  .margin-80 {
    margin-top: 0;
  }

  .margin-150 {
    margin-top: 0;
    padding-top: 100px;
  }

  .margin-70._30 {
    margin-top: 30px;
  }

  .testimonials-card {
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    position: static;
  }

  .image-wrap {
    aspect-ratio: 1;
    width: 290px;
    height: 100%;
    min-height: 300px;
    margin-top: 0;
  }

  .paralax-image.home-page {
    flex-flow: row;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .fun-grid {
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
  }

  .arrow-slider-right {
    bottom: -40px;
    right: 18%;
  }

  .arrow-slider-left {
    border-right: 1px solid var(--first-color);
    bottom: -40px;
    left: 18%;
  }

  .slider-mask {
    padding-bottom: 40px;
  }

  .slide-item {
    max-width: 440px;
    max-height: 685.516px;
    padding-top: 10px;
    padding-bottom: 0;
  }

  .overlay-bottom {
    min-height: 150px;
    padding-bottom: 0;
  }

  .brand-image {
    justify-content: center;
    align-items: center;
    width: 55%;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    display: block;
  }

  .brand-image._01 {
    flex-flow: row;
    align-items: center;
    width: 90%;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 0;
    display: block;
  }

  .brand-image._02 {
    margin-bottom: 32px;
    padding-top: 0;
  }

  .margin-bottom {
    margin-bottom: 0;
  }

  .section-testimonials {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .section-testimonials.ovetflow {
    padding-top: 60px;
  }

  .card-testimonial {
    max-width: 290px;
    min-height: 600px;
    padding: 61px 24px 25px;
  }

  .card-testimonial.first {
    object-fit: none;
    max-width: 290px;
    padding-top: 40px;
    overflow: visible;
  }

  .card-testimonial.second {
    max-width: 290px;
    padding-top: 40px;
  }

  .slide-wrapper {
    box-sizing: border-box;
    object-fit: none;
    padding-bottom: 70px;
    overflow: visible;
  }

  .subhead-testi {
    object-fit: fill;
    max-width: 100%;
    padding-top: 40px;
    font-size: 17px;
  }

  .second-title {
    font-size: 29px;
  }

  .second-title.third {
    flex: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 15px;
  }

  .view-project.w--current {
    width: 60px;
    height: 60px;
  }

  .left-part, .maw-w-right {
    padding-top: 0;
  }

  .maw-w-right.auto {
    padding-top: 0;
    padding-bottom: 25px;
  }

  .work-grid {
    border-radius: 0;
  }

  .margin-30 {
    align-self: center;
    padding-top: 40px;
    display: block;
  }

  .photo-right {
    min-height: 250px;
  }

  .project-circle {
    width: 70px;
    height: 70px;
  }

  .margin-20 {
    margin-top: 0;
    padding-top: 20px;
  }

  .sticky-02, .sticky-03 {
    margin-top: 30px;
  }

  .hero_pricing-link {
    width: 100%;
  }

  .pricing-wrap {
    margin-left: 14px;
    margin-right: 14px;
  }

  .pricing-big-title {
    color: var(--neon-green);
    text-align: center;
    flex: 0 auto;
    align-self: stretch;
    margin-top: 25px;
    font-size: 18px;
    font-weight: 400;
    display: block;
  }

  .pricing-title {
    grid-column-gap: 9px;
    grid-row-gap: 9px;
    flex-flow: column-reverse;
    justify-content: space-between;
    align-items: center;
  }

  .pricing-desciprtion {
    grid-column-gap: 10px;
    grid-row-gap: 8px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 15px;
    font-family: Figtree, sans-serif;
    display: flex;
  }

  .pricing-grid {
    margin-top: 0;
    padding-top: 60px;
  }

  .pricing-table {
    padding: 10px 10px 26px;
  }

  .pricing-table.eneterprise {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
    place-items: stretch start;
    margin-left: auto;
    padding-bottom: 26px;
  }

  .feature-wrap {
    flex-flow: row;
    justify-content: center;
    align-items: center;
  }

  .feature-big-title.dark {
    text-align: center;
    flex: 0 auto;
    align-self: auto;
    font-family: Figtree, sans-serif;
    font-weight: 700;
  }

  .p-for-price {
    font-family: Figtree, sans-serif;
    font-size: 14px;
  }

  .body-large {
    font-size: 16px;
  }

  .blog-photo-first {
    aspect-ratio: 1;
  }

  .right-flex {
    grid-row-gap: 30px;
  }

  .article-small-item {
    flex-flow: column;
    display: flex;
  }

  .cta-wrapper {
    padding-top: 45px;
    padding-bottom: 45px;
    margin-left: 8%;
    margin-right: 8%;
  }

  .social-wrapper {
    grid-column-gap: 15px;
  }

  .footer-logo-link {
    margin-bottom: 0;
  }

  .social-icon-footer {
    justify-content: flex-start;
    width: 38px;
  }

  .footer-main-grid {
    grid-row-gap: 48px;
  }

  .footer-grid {
    grid-row-gap: 2.5rem;
    grid-template-columns: 1fr;
  }

  .logo-footer {
    padding-bottom: 80px;
  }

  .about-photo {
    width: 240px;
    min-height: 220px;
  }

  .section-about {
    margin-bottom: 0;
  }

  .marquee.second {
    margin-top: 30px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .image-wrap-2 {
    aspect-ratio: 1;
  }

  .utility-page-wrap {
    padding-top: 111px;
    padding-bottom: 54px;
  }

  .input-first {
    min-height: 54px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .input-first::placeholder {
    font-size: 16px;
    line-height: 16px;
  }

  .contact-form-right-side {
    padding-bottom: 0;
  }

  .text-area {
    padding-left: 18px;
    padding-right: 18px;
  }

  .text-area::placeholder {
    font-size: 16px;
    line-height: 24px;
  }

  .contact-text {
    font-size: 16px;
    line-height: 26px;
  }

  .contact-details-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-form-left-side {
    padding-left: 0;
    padding-right: 0;
  }

  .divider-line {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .color-block {
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    margin-right: 0;
  }

  .color-block-parent {
    width: 100%;
    margin-right: 3%;
  }

  .color-row {
    flex-direction: column;
  }

  .licensing-title {
    font-size: 29px;
  }

  .licensing-grid {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }

  .logo-header_wrapper {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    position: static;
  }

  .text-block.logo-text-header {
    width: 290px;
    margin-top: 0;
  }

  .paragraph {
    width: 290px;
  }

  .paragraph.about-us {
    width: 290px;
    max-width: 300px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 60px;
    font-size: 14px;
    display: block;
  }

  .paragraph-2 {
    width: 290px;
  }

  .paragraph-2.about-us {
    width: 290px;
    max-width: 300px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 60px;
    font-size: 14px;
  }

  .paragraph-4 {
    width: 290px;
  }

  .paragraph-4.about-us {
    max-width: 300px;
    margin-bottom: 0;
    padding-top: 20px;
    padding-bottom: 60px;
    font-size: 14px;
  }

  .paragraph-5 {
    width: 290px;
  }

  .paragraph-5.about-us {
    max-width: 300px;
    padding-top: 20px;
    padding-bottom: 60px;
    font-size: 14px;
  }

  .text-block-2 {
    text-align: center;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    position: static;
  }

  .text-block-2.about-page {
    text-align: center;
    max-width: none;
    margin: 0;
    padding-top: 0;
    font-size: 25px;
    line-height: 25px;
  }

  .paragraph-7 {
    width: 290px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    position: static;
  }

  .paragraph-8 {
    width: 290px;
    margin-left: auto;
    margin-right: auto;
  }

  .paragraph-9 {
    width: 290px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 70px;
  }

  .paragraph-10 {
    text-align: center;
  }

  .div-block-2 {
    flex: 0 auto;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-left: 0;
    display: block;
    position: relative;
  }

  .button-copy.first {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .button-copy.first.on-nav {
    display: none;
  }

  .div-block-3 {
    padding-bottom: 77px;
  }

  .div-block-4 {
    margin-top: auto;
    margin-bottom: auto;
    display: block;
  }

  .paralax-image-about-page.home-page {
    width: 290%;
    max-width: 290px;
    height: 400px;
    position: relative;
  }

  .paragraph-12 {
    text-align: center;
    margin-top: 21px;
    margin-bottom: 21px;
    font-size: 14px;
  }

  .bold-text-5 {
    text-align: center;
    vertical-align: baseline;
    display: block;
    position: static;
  }

  .paragraph-13 {
    text-align: center;
    margin-bottom: 0;
    font-family: Figtree, sans-serif;
    font-size: 14px;
  }

  .bold-text-6 {
    text-align: left;
  }

  .client-logo-section {
    padding-top: 20px;
    padding-bottom: 40px;
  }

  .max-width {
    border-radius: 0;
    justify-content: flex-start;
    align-items: center;
    display: block;
    position: static;
  }

  .logo-grid.about-us {
    grid-column-gap: 0px;
    grid-row-gap: 43px;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    place-content: stretch;
    justify-items: center;
    padding-top: 40px;
    display: grid;
  }

  .logo-image {
    flex: 0 auto;
  }

  .div-block-5 {
    padding-top: 100px;
  }

  .italic-text {
    vertical-align: top;
    display: inline;
  }

  .text-block-3 {
    padding-bottom: 40px;
    font-size: 17px;
  }

  .text-block-4 {
    opacity: 1;
    padding-bottom: 40px;
  }

  .italic-text-4 {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .italic-text-4._02 {
    padding-top: 20px;
  }

  .testimponial-logo-holder {
    align-items: center;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
  }

  .bold-text-7 {
    opacity: .5;
  }

  .paragraph-14, .paragraph-15, .paragraph-16 {
    text-align: center;
    padding-top: 10px;
  }
}

#w-node-b6c92d62-c40a-6e4b-ac8b-672462c0ea42-3f6a3c0b, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bed9-3f6a3c0b, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bee1-3f6a3c0b, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bef1-3f6a3c0b, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bef9-3f6a3c0b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_524eec8e-0970-810b-b1cf-00d19f1c46a1-3f6a3c0b {
  place-self: auto;
}

#w-node-_524eec8e-0970-810b-b1cf-00d19f1c46a5-3f6a3c0b {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-_524eec8e-0970-810b-b1cf-00d19f1c46ac-3f6a3c0b, #w-node-_524eec8e-0970-810b-b1cf-00d19f1c46b2-3f6a3c0b, #w-node-_524eec8e-0970-810b-b1cf-00d19f1c46b8-3f6a3c0b {
  order: -9999;
}

#w-node-a7364a09-74be-e076-65dd-4d306f661009-3f6a3c0b, #w-node-a7364a09-74be-e076-65dd-4d306f661015-3f6a3c0b, #w-node-edfcf33c-2673-265c-f0a7-0c132e5e0ccc-3f6a3c0b, #w-node-edfcf33c-2673-265c-f0a7-0c132e5e0cc1-3f6a3c0b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-f2455990-6926-7366-2063-b6d27ea8b22d-3f6a3c0b, #w-node-c287c500-fd15-88f8-eb83-7daa9130e134-3f6a3c0b, #w-node-_69fd1af6-d02a-6e7e-aa4b-9873ad72343f-3f6a3c0b {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}

#w-node-_2ec87728-4b9f-a5bf-eacf-e9e9575fcd81-575fcd6a, #w-node-_2ec87728-4b9f-a5bf-eacf-e9e9575fcd89-575fcd6a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2b1876b8-63d0-71d5-58dd-62aad620c348-3f6a3c0c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: auto center;
}

#w-node-_2b1876b8-63d0-71d5-58dd-62aad620c34b-3f6a3c0c {
  place-self: auto center;
}

#w-node-_2b1876b8-63d0-71d5-58dd-62aad620c38e-3f6a3c0c {
  place-self: auto;
}

#w-node-_2b1876b8-63d0-71d5-58dd-62aad620c399-3f6a3c0c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_2b1876b8-63d0-71d5-58dd-62aad620c39c-3f6a3c0c {
  justify-self: center;
}

#w-node-e3e387c1-c446-9e08-12b7-086e0bf0ffbb-3f6a3c0c {
  place-self: auto;
}

#w-node-e3e387c1-c446-9e08-12b7-086e0bf0ffbe-3f6a3c0c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-e3e387c1-c446-9e08-12b7-086e0bf0ffc7-3f6a3c0c, #w-node-e3e387c1-c446-9e08-12b7-086e0bf0ffcd-3f6a3c0c, #w-node-e3e387c1-c446-9e08-12b7-086e0bf0ffd5-3f6a3c0c {
  order: -9999;
}

#w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f8f8-3f6a3c0c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: auto center;
}

#w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f900-3f6a3c0c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f908-3f6a3c0c, #w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f910-3f6a3c0c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-a438062d-f9c7-9b0c-a89a-997bfe333a48-3f6a3c0c, #w-node-b0f59645-b1e8-c00a-165b-090c4a1e1c34-3f6a3c0c, #w-node-_4d017aa7-2601-d4ac-392b-fd58f704e026-3f6a3c0c, #w-node-_81f8ecdf-2f6c-9517-63d8-836b7cac241c-3f6a3c0c, #w-node-_69f4f626-f5b5-5851-a33c-d80041141590-3f6a3c0c, #w-node-e317e782-19bc-9220-a203-3646d2dfe4ee-3f6a3c0c, #w-node-ca803c09-4018-7cdc-9d99-453be717bc7a-3f6a3c0c, #w-node-e1081ab8-5a33-2cf7-5a57-96719a547523-3f6a3c0c, #w-node-_510ee6c3-b842-a89f-a496-d5522bc50611-3f6a3c0c, #w-node-f66b6730-25ea-66ae-5984-8d14b42ab8f7-3f6a3c0c, #w-node-_0f673db7-2901-efe9-1530-502a7b0d31d5-3f6a3c0c, #w-node-e14a818d-d963-b5bb-26b8-5575fb365a63-3f6a3c0c, #w-node-a9e3dda1-2f2a-2f4c-5b5e-96216d3efff1-3f6a3c0c, #w-node-_51066c99-43e4-404d-e57c-04be13273ddd-3f6a3c0c, #w-node-bca676be-104e-9bf2-10d7-732cf2d4b668-3f6a3c0c, #w-node-ee264c98-ee7f-b008-ae64-2612ed886fb2-3f6a3c0c, #w-node-_8d8b2967-a95e-ff24-ec45-d73d70ff9e17-3f6a3c0c, #w-node-d5cffbe9-787a-a4c9-03b5-04823da9ce22-3f6a3c0c, #w-node-e6dc7080-eec8-3b72-5cd8-593e5a22bf70-3f6a3c0c, #w-node-_4690975d-0330-cc6e-612e-225208f95fe7-3f6a3c0c, #w-node-be252d95-b8d8-e787-9113-8e082a90bf3a-3f6a3c0c, #w-node-f08d7389-2a64-04ec-0ffb-e4053277c8bf-3f6a3c0c, #w-node-bc3a3987-6dfb-6ebe-71d9-3dca00b225f2-3f6a3c0c, #w-node-_3de4e92d-5536-dbcc-d48a-1456f5472cbd-3f6a3c0c {
  place-self: center;
}

#w-node-b232901c-044c-c163-478a-00cad555c4d1-3f6a3c0e, #w-node-b232901c-044c-c163-478a-00cad555c4dc-3f6a3c0e, #w-node-b232901c-044c-c163-478a-00cad555c4e8-3f6a3c0e, #w-node-b232901c-044c-c163-478a-00cad555c4ed-3f6a3c0e, #w-node-b232901c-044c-c163-478a-00cad555c4ff-3f6a3c0e, #w-node-b232901c-044c-c163-478a-00cad555c50a-3f6a3c0e, #w-node-_6ef99df9-9d6d-7856-396e-5477fbc3e291-3f6a3c0e, #w-node-_6ef99df9-9d6d-7856-396e-5477fbc3e296-3f6a3c0e, #w-node-_7b0d910b-a792-f928-d85a-17f34cfb0efc-3f6a3c0e, #w-node-_7b0d910b-a792-f928-d85a-17f34cfb0f07-3f6a3c0e, #w-node-_2700e560-ecbb-8633-4814-e8efc8b9e90f-3f6a3c0e, #w-node-_2700e560-ecbb-8633-4814-e8efc8b9e914-3f6a3c0e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3672e801-832d-11ec-634d-decfd85883b3-3f6a3c0f, #w-node-_3672e801-832d-11ec-634d-decfd85883b9-3f6a3c0f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_4add91f0-661c-49c3-509a-007b2f2eb080-3f6a3c14, #w-node-_690b7f98-3ac0-c15c-bec4-8f9b96e521f8-3f6a3c14, #w-node-_6785f76f-c888-6121-aeae-71ac350f51c8-3f6a3c14, #w-node-_6785f76f-c888-6121-aeae-71ac350f51d3-3f6a3c14, #w-node-_6785f76f-c888-6121-aeae-71ac350f51df-3f6a3c14, #w-node-_6785f76f-c888-6121-aeae-71ac350f51e4-3f6a3c14, #w-node-_6785f76f-c888-6121-aeae-71ac350f51f6-3f6a3c14, #w-node-_6785f76f-c888-6121-aeae-71ac350f5201-3f6a3c14, #w-node-b6c92d62-c40a-6e4b-ac8b-672462c0ea42-1e49e8a4, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bed9-1e49e8a4, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bee1-1e49e8a4, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bef1-1e49e8a4, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bef9-1e49e8a4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_524eec8e-0970-810b-b1cf-00d19f1c46ac-1e49e8a4, #w-node-_524eec8e-0970-810b-b1cf-00d19f1c46b2-1e49e8a4, #w-node-_524eec8e-0970-810b-b1cf-00d19f1c46b8-1e49e8a4 {
  order: -9999;
}

#w-node-a7364a09-74be-e076-65dd-4d306f661009-1e49e8a4, #w-node-a7364a09-74be-e076-65dd-4d306f661015-1e49e8a4, #w-node-edfcf33c-2673-265c-f0a7-0c132e5e0ccc-1e49e8a4, #w-node-edfcf33c-2673-265c-f0a7-0c132e5e0cc1-1e49e8a4, #w-node-e2804f5e-d63e-2f15-dfc8-92a685381f9e-1e49e8a4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_89f0e60e-4ff0-67fb-6ab7-87698aca6545-1e49e8a4 {
  align-self: center;
}

#w-node-_3cab63f8-ef0e-fd84-3ffc-bce07858b775-1e49e8a4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d2684b65-30fc-d3ae-4543-bafde6e31fd7-1e49e8a4 {
  align-self: center;
}

#w-node-e12240e6-eeda-841a-087b-b21f5189f1a4-1e49e8a4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e12240e6-eeda-841a-087b-b21f5189f1bc-1e49e8a4 {
  align-self: center;
}

#w-node-e12240e6-eeda-841a-087b-b21f5189f1f5-1e49e8a4 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e12240e6-eeda-841a-087b-b21f5189f20d-1e49e8a4 {
  align-self: center;
}

#w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f8f8-6670eaec {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: auto center;
}

#w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f900-6670eaec {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f908-6670eaec, #w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f910-6670eaec, #w-node-_2c469d77-9966-07d1-bb5c-c8566791b8b8-6670eaec, #w-node-_34c16f6c-8348-ec6c-317e-688d49533569-6670eaec {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_34c16f6c-8348-ec6c-317e-688d49533581-6670eaec {
  align-self: center;
}

#w-node-_34c16f6c-8348-ec6c-317e-688d495335ba-6670eaec {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_34c16f6c-8348-ec6c-317e-688d495335d2-6670eaec {
  align-self: center;
}

#w-node-c7fe3d55-5289-9ce5-9d12-74d7040eb383-6670eaec, #w-node-c7fe3d55-5289-9ce5-9d12-74d7040eb389-6670eaec, #w-node-c7fe3d55-5289-9ce5-9d12-74d7040eb38f-6670eaec {
  order: -9999;
}

#w-node-_2b1876b8-63d0-71d5-58dd-62aad620c348-6670eaec, #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c399-6670eaec, #w-node-b232901c-044c-c163-478a-00cad555c4d1-76c8b390, #w-node-b232901c-044c-c163-478a-00cad555c4dc-76c8b390, #w-node-b232901c-044c-c163-478a-00cad555c4e8-76c8b390, #w-node-b232901c-044c-c163-478a-00cad555c4ed-76c8b390, #w-node-b232901c-044c-c163-478a-00cad555c4ff-76c8b390, #w-node-b232901c-044c-c163-478a-00cad555c50a-76c8b390, #w-node-_6ef99df9-9d6d-7856-396e-5477fbc3e291-76c8b390, #w-node-_6ef99df9-9d6d-7856-396e-5477fbc3e296-76c8b390, #w-node-_7b0d910b-a792-f928-d85a-17f34cfb0efc-76c8b390, #w-node-_7b0d910b-a792-f928-d85a-17f34cfb0f07-76c8b390, #w-node-_2700e560-ecbb-8633-4814-e8efc8b9e90f-76c8b390, #w-node-_2700e560-ecbb-8633-4814-e8efc8b9e914-76c8b390, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9972-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c99df-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c99e7-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c99ef-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c99f7-7ca5e44a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a05-7ca5e44a {
  place-self: auto;
}

#w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a08-7ca5e44a {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: auto;
}

#w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a11-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a17-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a1f-7ca5e44a {
  order: -9999;
}

#w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a34-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a3d-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a46-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a48-7ca5e44a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a65-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a76-7ca5e44a, #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c9a87-7ca5e44a {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: center;
}

@media screen and (max-width: 991px) {
  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c38c-3f6a3c0c, #w-node-_89f0e60e-4ff0-67fb-6ab7-87698aca6598-1e49e8a4, #w-node-e12240e6-eeda-841a-087b-b21f5189f1e8-1e49e8a4, #w-node-_34c16f6c-8348-ec6c-317e-688d495335ad-6670eaec, #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c38c-6670eaec {
    grid-area: span 1 / span 2 / span 1 / span 2;
    place-self: auto center;
  }
}

@media screen and (max-width: 767px) {
  #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bed9-3f6a3c0b {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c38c-3f6a3c0c {
    grid-column: span 1 / span 1;
  }

  #w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f8f8-3f6a3c0c, #w-node-fa6c9189-df9c-2ab5-4bd2-ceea14a9bed9-1e49e8a4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_89f0e60e-4ff0-67fb-6ab7-87698aca6598-1e49e8a4, #w-node-e12240e6-eeda-841a-087b-b21f5189f1e8-1e49e8a4 {
    grid-column: span 1 / span 1;
  }

  #w-node-_3dc84ffa-e0b9-84d8-f1fc-1a8bb675f8f8-6670eaec {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_34c16f6c-8348-ec6c-317e-688d495335ad-6670eaec, #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c38c-6670eaec {
    grid-column: span 1 / span 1;
  }

  #w-node-_34c5d15b-b270-8dd4-4686-d2ed1d5c99df-7ca5e44a {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c33e-3f6a3c0c {
    place-self: auto;
  }

  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c348-3f6a3c0c, #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c34b-3f6a3c0c {
    place-self: stretch stretch;
  }

  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c38f-3f6a3c0c {
    justify-self: auto;
  }

  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c399-3f6a3c0c {
    place-self: stretch stretch;
  }

  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c39c-3f6a3c0c {
    grid-area: 4 / 1 / 5 / 2;
    place-self: stretch stretch;
  }

  #w-node-_3672e801-832d-11ec-634d-decfd85883b3-3f6a3c0f {
    grid-column: span 1 / span 1;
  }

  #w-node-_3672e801-832d-11ec-634d-decfd85883b9-3f6a3c0f {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_2b1876b8-63d0-71d5-58dd-62aad620c348-6670eaec {
    align-self: stretch;
  }
}

/* Refinement 2 (mobile): let the template's original centering return for the What You Get
   column at <=479px. Only the stat labels need help - they inherit left-align. */
@media screen and (max-width: 479px) {
  .light-section .div-block-2 .fun-flex {
    text-align: center;
  }
}

/* ===== Seamless CSS logo marquee (supersedes the Webflow IX2 loop) ===== */
@keyframes ejc-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); } /* exactly one of three identical sets */
}
.logo-track {
  display: flex;
  flex: none;               /* keep full 3-set width inside the overflow:hidden mask */
  width: max-content;
  will-change: transform;
  animation: ejc-logo-marquee 60s linear infinite;
}
.logo-track .logo-carousel-wrap {
  margin-right: 75px;                       /* self-contained seam gap = the 75px item gap */
  transform: perspective(1px) !important;   /* pin: overrides the Webflow JS inline translateX */
}
.carousel {
  grid-column-gap: 0;       /* retire the old 60px inter-wrap gap; the track spaces evenly now */
  grid-row-gap: 0;
}
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;        /* hold still for motion-sensitive users */
  }
}

/* ===== Nav color flip: white over dark sections, navy over .light-section ===== */
/* Logo crossfade: white PNG and navy SVG stacked, opacity-toggled (no src swap) */
.logo-swap {
  position: relative;
  display: inline-block;
}
.logo-swap .logotype {
  transition: opacity .25s ease;
}
.logo-swap .logo-navy {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.navigation-wrapper.nav-over-light .logo-swap .logo-white { opacity: 0; }
.navigation-wrapper.nav-over-light .logo-swap .logo-navy  { opacity: 1; }

/* Links + "Pages" dropdown toggle -> navy (current-page link included explicitly).
   .navbar-link already carries transition:all .3s; the dropdown toggle gets one here. */
.dropdown-toggle {
  transition: color .25s ease;
}
.navigation-wrapper.nav-over-light .navbar-link,
.navigation-wrapper.nav-over-light .navbar-link.w--current,
.navigation-wrapper.nav-over-light .dropdown-toggle {
  color: var(--blue);
}

/* Hamburger bars -> navy */
.line-top,
.line-midddle,
.line-bottom {
  transition: background-color .25s ease;
}
.navigation-wrapper.nav-over-light .line-top,
.navigation-wrapper.nav-over-light .line-midddle,
.navigation-wrapper.nav-over-light .line-bottom {
  background-color: var(--blue);
}

/* Suppress the flip while the mobile menu is open: the panel is dark
   (#101820e6), so links and hamburger stay white and readable. */
.navigation-wrapper.nav-over-light .navbar-menu[data-nav-menu-open] .navbar-link,
.navigation-wrapper.nav-over-light .navbar-menu[data-nav-menu-open] .navbar-link.w--current,
.navigation-wrapper.nav-over-light .navbar-menu[data-nav-menu-open] .dropdown-toggle {
  color: var(--first-color);
}
.navigation-wrapper.nav-over-light .menu-button-new.w--open .line-top,
.navigation-wrapper.nav-over-light .menu-button-new.w--open .line-midddle,
.navigation-wrapper.nav-over-light .menu-button-new.w--open .line-bottom {
  background-color: var(--first-color);
}

/* ===== Work-page hero (shared: every work page uses .work-hero) ===== */
.work-hero {
  height: 45vh;           /* fixed banner (site-wide work-page standard); adjust here */
  overflow: hidden;
}
.work-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill the band, crop the overflow */
  object-position: center 40%; /* frame the subject low in the band, cropping empty space below */
}

/* ===== Work-page headline box + intro (shared: every work page) ===== */
.work-headline-box {
  background-color: var(--second-color);   /* homepage dark */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* dead-center the headline vertically, regardless of margins */
  min-height: 200px;         /* the banner band height; reduce here if still too tall */
  padding-top: 24px;         /* breathing room if the headline wraps to 3+ lines on narrow screens */
  padding-bottom: 40px;      /* +16 over top: optical centering, the headline gradient fades lighter on line 2 */
  text-align: center;
}
.work-headline-box .display-1 {           /* homepage headline treatment, sized for the box */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  font-size: 44px;
  line-height: 1.2;
  text-transform: uppercase;
}
.work-intro {
  max-width: 860px;   /* match the .work-meta column width so body copy and the meta block share margins */
  margin-left: auto;
  margin-right: auto;
  text-align: left;   /* flush left, desktop and mobile */
}
.work-intro .paragraph {
  margin-bottom: 1.4em;
}
.work-intro .paragraph:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 991px) {
  .work-hero { height: 38vh; }
  .work-headline-box .display-1 {
    font-size: 38px;
  }
}
@media screen and (max-width: 767px) {
  .work-hero { height: 33vh; }
  .work-headline-box {
    min-height: 150px;
    padding-top: 20px;
    padding-bottom: 36px;
  }
  .work-headline-box .display-1 {
    font-size: 32px;
  }
}
@media screen and (max-width: 479px) {
  .work-hero { height: 28vh; }
  /* Opt-in: enlarge the hero image 25% within the same box on mobile (bigger
     subject, more crop). The box height/placement is unchanged; overflow clips. */
  .work-hero.zoom-mobile img { transform: scale(1.25); }
  .work-headline-box {
    min-height: 120px;
    padding-top: 16px;
    padding-bottom: 32px;
  }
  .work-headline-box .display-1 {
    font-size: 26px;
  }
}

/* ===== Body-copy size standard: primary body copy is 16px =====
   Base body stays 14px (nav/buttons/labels/author/dropdown inherit it and must not move).
   Excluded on purpose: .paragraph-7/-8/-9 (stat descriptions, 14px) and .text-block-3
   (pull-quote, 18px). Applied here (after the media rules) so it holds at every breakpoint. */
.paragraph,
.paragraph-2,
.paragraph-4,
.paragraph-5,
.paragraph-10,
.paragraph-11,
.paragraph-12,
.paragraph-13,
.paragraph-14,
.paragraph-15,
.paragraph-16,
.paragraph-17,
.paragraph-18,
.paragraph-19,
.paragraph-20,
.paragraph-21,
.paragraph-22,
.text-block-2 {
  font-size: 16px;
}

/* ===== Work-page section rhythm: ONE uniform gap between every major block in the
   light body, 100 / 80 / 60 across breakpoints. Distinct from the homepage's
   dark->light rhythm (120/100/70): on work pages uniformity wins. New blocks (image
   grid, etc.) inherit it just by being direct children of .work-body > .container. ===== */
.work-body {
  /* ===== Work-page spacing tokens: ONE source of truth for every gap on a work
     page. A new page composes with these and never types a raw number. The
     responsive tokens (rhythm, inset, roomy, quote-gap, meta-row-pad) are
     redefined in the breakpoint blocks below; the rest hold at one value. ===== */
  --work-rhythm: 90px;             /* gap between major blocks; also the entry break into the image work */
  --work-inset: 32px;              /* full-bleed side inset on the portfolio band */
  --work-roomy: 144px;             /* roomy vertical gap: placards -> video, and around the icon set */
  --work-eyebrow-gap: 18px;        /* eyebrow / caption -> its block (the default, tight) */
  --work-eyebrow-gap-roomy: 56px;  /* the roomy eyebrow (video, icons, lifestyle, placards) */
  --work-chapter-gap: 34px;        /* numbered chapter marker -> its section */
  --work-gutter: 24px;             /* gutter between images sharing a row / grid */
  --work-gutter-mobile: 20px;      /* gutter once a row stacks on phones */
  --work-tight: 24px;              /* binds stacked images into one showcase (.work-tight) */
  --work-meta-gap: 28px;           /* label -> value inside a meta row */
  --work-meta-row-pad: 24px;       /* vertical padding inside a meta row */
  --work-quote-gap: 190px;         /* breathing room above/below a full-page pull quote */

  padding-top: var(--work-rhythm);      /* dark box -> intro seam (white; the dark box can't own this gap) */
  padding-bottom: var(--work-rhythm);   /* last block -> footer */
  overflow-x: clip;       /* guard: contain the portfolio's 100vw break-out, no page scroll */
}
.work-body > .container > * {
  margin-bottom: var(--work-rhythm);    /* uniform gap below every major block */
}
.work-body > .container > *:last-child {
  margin-bottom: 0;        /* tail handled by the section's padding-bottom */
}
/* The image work breaks out of the reading column to near-full-bleed with a thin,
   consistent inset; the setup text stays in .container. The wrapper owns the entry
   break (setup -> image work) and the rhythm between image blocks, both keyed to
   --work-rhythm so the transition into the image work reads as one more beat of the
   same rhythm. Reusable on every work page. Capped so it stops before it's absurd. */
.work-portfolio {
  width: 100vw;
  max-width: 1920px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);   /* center the wide band on the viewport */
  box-sizing: border-box;
  padding-left: var(--work-inset);      /* the thin white inset */
  padding-right: var(--work-inset);
  margin-top: var(--work-rhythm);       /* entry break: setup -> image work (tracks the rhythm) */
  --work-narrow-width: 1000px;   /* the narrow-band width; one value to change */
}
.work-portfolio > * {
  margin-bottom: var(--work-rhythm);    /* uniform rhythm between image blocks */
}
.work-portfolio > *:last-child {
  margin-bottom: 0;              /* tail handled by the section's padding-bottom */
}
/* Group consecutive images into one showcase: a .work-tight block sits only the
   gutter above the next, binding the stacked brochures; the last one keeps the
   full rhythm into the next section. */
.work-portfolio > .work-tight {
  margin-bottom: var(--work-tight);
}
/* Section labels above portfolio blocks: the VERTICALS / CAMPAIGN eyebrow treatment
   (Figtree 12px / 500, .2px tracking, uppercase) in a quiet gray instead of green.
   Alignment is class behaviour: flush left by default (aligns to a full-bleed or
   left block's left edge); add .center to center it over a centered block (the
   centered text shares the portfolio's center with the centered block). Reusable
   on every work page. */
.work-caption {
  display: block;
  font-family: Figtree, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #2a7de1;   /* lighter brand blue, matching the numbered .work-chapter markers */
  text-align: left;
}
.work-caption.center { text-align: center; }
.work-portfolio > .work-caption { margin-bottom: var(--work-eyebrow-gap); }   /* tight to its block, matches the eyebrow-to-list gap */
/* Narrow band: some portfolio blocks sit at a centered narrow width instead of
   full-bleed, alternating with the wide rows. Shares one width with .work-video. */
.work-narrow {
  max-width: var(--work-narrow-width);
  margin-inline: auto;
}
/* within-block: green eyebrow -> list stays tight, inside .work-block, untouched by the rhythm */
.work-block {
  text-align: center;
}
.work-block .top-text {
  margin-bottom: 18px;
}
/* divider-separated lists */
.work-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;         /* row / column */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  color: #101820;         /* near-black body */
  font-size: 16px;        /* body size */
  line-height: 1.4;
}
.work-list span:not(.work-divider) {
  white-space: nowrap;    /* keep each item on one line */
}
.work-divider {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: #c1c5c8;   /* neutral divider */
}
.work-icon-strip {
  display: block;
  width: 100%;
  height: auto;
}
/* Dial-specific icon row: the six handwashing-step icons in one horizontal row
   at the video's width (add .work-narrow). Square icons, equal cells; collapses
   to 3 across (2 rows) on mobile. */
.work-icon-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--work-gutter);
  align-items: center;
  justify-items: center;   /* center each icon in its cell so the row stays video-wide */
}
.work-icon-row img { display: block; width: 75%; height: auto; }   /* icons 25% smaller, group still spans the video width */
@media screen and (max-width: 479px) {
  .work-icon-row { grid-template-columns: repeat(3, 1fr); }
}
/* Two-column image grid: the reusable portfolio row. Equal-width cells with a
   fixed aspect (--work-image-aspect, default 3/2) so a row stays balanced even
   when the two sources differ in proportion; object-fit: cover crops any
   mismatch to the cell. Override --work-image-aspect per row when a different
   shape is needed. Square corners per the container rule. Stacks on phones. */
.work-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--work-gutter);
  --work-image-aspect: 3 / 2;
}
.work-image-grid img {
  display: block;
  width: 100%;
  aspect-ratio: var(--work-image-aspect);
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
/* Column-count variants of the portfolio grid (stat details, posters, placards). */
.work-image-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.work-image-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Natural mode: show designed pieces at their own proportions, uncropped. Each
   row holds one uniform shape, so heights still line up without a forced cell. */
.work-image-grid.natural img { aspect-ratio: auto; height: auto; }
/* Framed pieces: a thin hairline around each cell (posters, placards). */
.work-image-grid.bordered img { border: 1px solid #c1c5c8; }
/* Full-width single image (a brochure spread shown on its own, like the icon
   strip). Square corners, natural height. */
.work-image-full {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
/* Responsive 16:9 video embed, square corners, full content width. */
.work-video {
  position: relative;
  width: 100%;
  max-width: var(--work-narrow-width);   /* featured element: narrower than the full-bleed image rows, synced with .work-narrow */
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;   /* clip the poster / swapped-in iframe to the square-cornered 16:9 box */
}
.work-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* --- Click-to-play poster (js/work-video.js swaps in the iframe on first click) ---
   Never ship a live third-party iframe on load: it repaints in its own process and
   causes scroll hitching we cannot fix. On-brand green play button, not YouTube red. */
.work-video-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.work-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(16, 24, 32, 0.55);   /* translucent dark scrim + white triangle: the traditional play-button convention */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(16, 24, 32, 0.3);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.work-video-play svg { width: 38px; height: 44px; margin-left: 7px; }   /* traditional proportions: ~40% of the circle, nudged right to optically centre */
.work-video-trigger:hover .work-video-play,
.work-video-trigger:focus-visible .work-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(16, 24, 32, 0.7);
}
/* Dial-only photo composition: a tall left image beside a right column of two
   stacked 3:2 photos. Only the grid mechanics (24px gap, square corners,
   object-fit cover) are shared with other work pages; the arrangement is Dial's.
   The right column's two fixed-ratio photos define the height; the left image
   fills it so all three bottoms line up. */
.dial-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--work-gutter); align-items: start; }   /* columns keep their own heights; the left photo stays tall */
.dial-photo-grid .dpg-col { display: flex; flex-direction: column; gap: var(--work-gutter); min-width: 0; }
/* Right column: the two smaller photos are centered horizontally in the column
   (equal whitespace on both sides) and grouped near the top with a little air
   between them, leaving open whitespace below beside the tall left photo. */
.dial-photo-grid .dpg-right { align-items: center; gap: 12px; }
.dial-photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dial-photo-grid .dpg-bathroom-cell { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }   /* the big left photo, its own portrait height (decoupled from the smaller right column); clips the panning image */
.dial-photo-grid .dpg-bathroom { position: absolute; top: 0; left: 0; width: 100%; height: 118%; object-fit: cover; object-position: center; will-change: transform; }   /* taller than the cell so it pans within (js/work-motion.js) */
.dial-photo-grid .dpg-frame { position: relative; overflow: hidden; flex: none; width: 75%; aspect-ratio: 3 / 2; }   /* right photos 25% smaller than the left, left-aligned so whitespace falls on the right */
.dial-photo-grid .dpg-frame img { position: absolute; top: 0; left: 0; width: 100%; height: 118%; object-fit: cover; will-change: transform; }   /* taller than the frame so it pans */
@media screen and (max-width: 900px) {
  /* one column, source order, each photo its own row at its natural aspect ratio;
     the contained pan is off here (gsap.matchMedia only runs it above 900px) */
  .dial-photo-grid { grid-template-columns: 1fr; gap: var(--work-gutter-mobile); }   /* stacked gap matches the sales-kit images */
  .dial-photo-grid .dpg-bathroom-cell { aspect-ratio: auto; overflow: visible; }
  .dial-photo-grid .dpg-frame { width: 100%; aspect-ratio: auto; overflow: visible; }   /* full width once stacked */
  .dial-photo-grid .dpg-right { align-items: stretch; gap: var(--work-gutter-mobile); }   /* photos fill the width when stacked, matching sales kit */
  /* Reset the absolutely-positioned pan images back into flow (these selectors must
     out-specify the desktop .dpg-bathroom / .dpg-frame img rules, or the frames
     collapse and the whole section disappears on phones). */
  .dial-photo-grid .dpg-bathroom,
  .dial-photo-grid .dpg-frame img { position: static; width: 100%; height: auto; aspect-ratio: auto; transform: none; }
}
@media screen and (max-width: 991px) {
  /* Responsive token step-down: rhythm/inset/roomy/quote all shrink one notch. Every
     rule keyed to these tokens follows automatically, so there are no per-rule overrides. */
  .work-body { --work-rhythm: 72px; --work-inset: 24px; --work-roomy: 112px; --work-quote-gap: 150px; }
}
@media screen and (max-width: 767px) {
  /* --work-roomy takes its final step here (at 767, not 479) because both its uses
     -- the placards->video gap and the icon section -- stepped down at 767. Meta
     rows also tighten their vertical padding from here down. */
  .work-body { --work-roomy: 84px; --work-meta-row-pad: 20px; }
  /* Multi-column rows drop to two across. (.dial-photo-grid has its own 900px rule.) */
  .work-image-grid.cols-3, .work-image-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 479px) {
  /* Smallest step of the responsive tokens (rhythm/inset/quote; roomy already at 84). */
  .work-body { --work-rhythm: 54px; --work-inset: 16px; --work-quote-gap: 110px; }
  .work-body { padding-left: 12%; padding-right: 12%; }   /* narrower reading column for the intro + meta on phones */
  .work-list { gap: 10px 14px; }
  .work-image-grid { grid-template-columns: 1fr; }   /* stack the two brochures on phones */
  .work-image-grid.cols-3, .work-image-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  /* .dial-details stacked spacing is set in the Dial Details section below, after the
     stagger rules, so it wins at this width. */
}

/* ===== Work-page reveal (load + scroll) =====
   Opt-in per page via .reveal-on on the page-wrapper plus js/work-reveal.js.
   Hidden state is gated by .w-mod-js so a no-JS page shows everything; js adds
   .is-visible when an element enters the viewport, and the transition plays.
   The hero fades only (a banner should not slide); content fades and rises. */
.w-mod-js .reveal-on .work-hero {
  opacity: 0;
  transition: opacity 0.5s ease;   /* matches the homepage / Work-landing IX2 load fade so arrival is continuous */
}
.w-mod-js .reveal-on .work-hero.is-visible { opacity: 1; }
.w-mod-js .reveal-on .work-headline-box .display-1,
.w-mod-js .reveal-on .work-body > .container > *:not(.work-portfolio),
.w-mod-js .reveal-on .work-portfolio > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.w-mod-js .reveal-on .work-headline-box .display-1.is-visible,
.w-mod-js .reveal-on .work-body > .container > .is-visible:not(.work-portfolio),
.w-mod-js .reveal-on .work-portfolio > .is-visible {
  opacity: 1;
  transform: none;
}
.w-mod-js .reveal-on .work-headline-box .display-1 { transition-delay: 0.1s; }   /* light load stagger under the hero */
@media (prefers-reduced-motion: reduce) {
  .w-mod-js .reveal-on .work-hero,
  .w-mod-js .reveal-on .work-headline-box .display-1,
  .w-mod-js .reveal-on .work-body > .container > *:not(.work-portfolio),
  .w-mod-js .reveal-on .work-portfolio > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   DIAL REDESIGN: cinematic hero + numbered chapters.
   Additive, scoped. New shared patterns (.work-hero-cinematic, .work-chapter,
   .work-parallax) reuse the brand's devices (gradient display type, ambient
   .circle-absolute glow, the fade-and-rise reveal).
   ============================================================================ */

/* --- Cinematic hero: the image fuses into a gradient scrim carrying the headline --- */
.work-hero-cinematic {
  position: relative;
  height: 82vh;
  min-height: 560px;
  overflow: hidden;
  background-color: #101820;
}
.work-hero-cinematic .wh-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;   /* bias up so the Dial logo sits in the upper frame, headline clears below it */
  /* Match GSAP's at-load parallax state (scale 1.12, shifted up 6%) so the image
     does not pop when GSAP initializes late. GSAP overwrites this inline on scroll. */
  transform: translateY(-6%) scale(1.12);
  will-change: transform;   /* parallax target */
}
@media (prefers-reduced-motion: reduce) {
  .work-hero-cinematic .wh-img { transform: none; }   /* no motion stack runs, so show the image untransformed */
}
/* dark at top for nav legibility, solid dark across the lower band where the headline sits */
.work-hero-cinematic .wh-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16,24,32,0.5) 0%, rgba(16,24,32,0) 18%, rgba(16,24,32,0) 40%, rgba(16,24,32,0.85) 74%, #101820 90%);
}
.work-hero-cinematic .circle-absolute { z-index: 1; opacity: 0.4; }
.work-hero-cinematic .wh-content {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  padding: 0 5%;
  text-align: center;
}
.work-hero-cinematic .wh-headline {
  max-width: 28ch;             /* wider measure so the long headline sits in ~2 compact lines */
  margin: 0 auto;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}
.work-hero-cinematic .wh-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  color: #ffffff;
  opacity: 0.75;
  display: block;
  line-height: 0;
}
@keyframes wh-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
.work-hero-cinematic .wh-scroll-cue { animation: wh-bob 1.9s ease-in-out infinite; }
@media screen and (max-width: 991px) {
  .work-hero-cinematic { height: 74vh; }
  .work-hero-cinematic .wh-headline { font-size: 36px; }
}
@media screen and (max-width: 767px) {
  .work-hero-cinematic { height: 39vh; min-height: 270px; }   /* shorter hero shrinks the cover zoom, so the Dial logo reads smaller */
  .work-hero-cinematic .wh-headline { font-size: 32px; }
}
@media screen and (max-width: 479px) {
  .work-hero-cinematic { height: 46vh; min-height: 260px; }   /* another ~25% down: logo smaller again */
  .work-hero-cinematic .wh-content { bottom: 5vh; }
  .work-hero-cinematic .wh-headline { font-size: 26px; max-width: 22ch; }
}

/* --- Numbered chapter marker: a green kicker over a navy title, centered.
   Replaces the plain gray caption on redesigned portfolio chapters. --- */
.work-chapter { text-align: center; margin-bottom: var(--work-chapter-gap); }
/* "01 SALES KITS" on one line, at the same small label size as the Verticals /
   Campaign Elements labels, all caps, in the lighter brand blue. Blue (not green)
   because green is reserved for clickable. */
.work-chapter-num,
.work-chapter-label {
  display: inline;
  font-family: Figtree, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #2a7de1;
}
.work-chapter-num { margin-right: 0.5em; }

/* --- Parallax hook: elements drift as they pass through the viewport, driven by
   js/work-motion.js (amount via data-parallax-speed). Shared system device;
   no-ops under reduced motion or no-JS. --- */
.work-parallax { display: block; width: 100%; height: auto; will-change: transform; }

/* --- Contained-image parallax: the image pans vertically inside a fixed frame as
   the frame scrolls through the viewport (js/work-motion.js moves .work-media-img).
   Clean and restrained. The frame is a touch shorter than the image so there is
   room to pan; --media-aspect tunes it. No-JS / reduced motion shows the image
   top-aligned in the frame, static. --- */
.work-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--media-aspect, 1.6);
}
.work-media-img {
  display: block;
  width: 100%;
  height: auto;          /* taller than the frame, so it pans within it */
  will-change: transform;
}
.work-media-feature { --media-aspect: 1.7; }   /* the featured spread pans a little more */

/* --- Mobile "More info" disclosure: on phones (<=767px) the body copy + meta
   block collapse behind a toggle, revealed on tap (like the reference). Hidden
   above 767px and with no JS, so everything shows by default. --- */
.work-details-toggle {
  display: none;
  width: fit-content;
  margin: 0 auto 6px;
  padding: 14px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: Figtree, sans-serif;
  font-size: 28px;             /* same size as the Sales Kits chapter label */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  color: #00ce7c;             /* green */
}
@media screen and (max-width: 767px) {
  .work-details-toggle { display: block; }
  .work-body.is-collapsed .work-intro,
  .work-body.is-collapsed .work-meta { display: none; }
}
@media screen and (max-width: 479px) {
  .work-details-toggle { font-size: 23px; }
  /* The template hardcodes .paragraph { width: 290px } in this 479px block, which
     centers the body copy inside .work-intro. Override it here (later than that
     rule, and more specific) so the copy fills the container like .work-meta. */
  .work-intro .paragraph { width: auto; margin-left: 0; margin-right: 0; }
}

/* --- Meta block (Verticals, Campaign Elements): a Credits/Services-style list.
   A centered column of left-aligned rows, each a green label beside a
   comma-separated value, divided by hairline rules. --- */
.work-meta {
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
}
.work-meta-group {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--work-meta-gap);
  padding: var(--work-meta-row-pad) 0;
  border-top: 1px solid #c1c5c8;
}
.work-meta-group:last-child { border-bottom: 1px solid #c1c5c8; }
.work-meta-label {
  font-family: Figtree, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #2a7de1;   /* lighter blue, matching 01 Sales Kits; green is reserved for clickable */
  padding-top: 3px;
}
.work-meta-value {
  font-family: Figtree, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #101820;
}
@media screen and (max-width: 767px) {
  .work-meta-group { grid-template-columns: 1fr; gap: 10px; }   /* stacks label over value; row padding steps down via --work-meta-row-pad */
}

/* --- Pull quote: a centered, all-caps statement at the Dial page headline size,
   breaking up the image sections (sits between the posters and the placards). --- */
.work-statement {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-family: Figtree, sans-serif;
  font-weight: 400;
  font-size: 42px;            /* same size as the hero headline */
  line-height: 1.15;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: #2a7de1;             /* lighter blue, matching the Verticals / Campaign Elements labels */
}
@media screen and (max-width: 991px) { .work-statement { font-size: 36px; } }
@media screen and (max-width: 767px) { .work-statement { font-size: 32px; } }
@media screen and (max-width: 479px) { .work-statement { font-size: 26px; } }
/* Generous, equal whitespace above and below the quote (the top margin collapses
   with the posters' rhythm margin, so it sets the gap above; the bottom sets the
   gap to the placards). */
.work-portfolio > .work-statement { margin-top: var(--work-quote-gap); margin-bottom: var(--work-quote-gap); }

/* --- Sales Kits supporting pair: clean asymmetric composition (wider covers lead).
   The two frames pan a little more than the feature for extra life. --- */
.dial-saleskit-pair {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;   /* Dial composition: the featured pair's own wider gutter (not the shared image gutter) */
  align-items: center;
}
.dial-saleskit-pair .work-media { --media-aspect: 1.78; }
@media screen and (max-width: 767px) {
  /* Stacked: all three sales-kit images sit at one tight, consistent gap, using the
     shared mobile gutter (same as the stacked posters). The feature->pair gap (the
     feature's rhythm margin) and the pair's own gap are both the mobile gutter. */
  .dial-saleskit-pair { grid-template-columns: 1fr; gap: var(--work-gutter-mobile); }
  .work-portfolio > .work-media-feature { margin-bottom: var(--work-gutter-mobile); }
}

/* --- Poster series: posters shown in full (no container crop, so the messaging
   stays readable) with whole-element parallax drift. Asymmetric (left 25% smaller
   than the right) and staggered so the pair reads as a dynamic, layered moment. --- */
.dial-poster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two equal halves; the column divider is the page center */
  gap: 0;
  align-items: start;
  --dial-poster-stagger: 90px;   /* Dial composition: the vertical offset of the right poster. Its own
                                    token, deliberately independent of --work-rhythm even though the
                                    value happens to match, so retuning the page rhythm never moves it. */
}
.dial-poster-grid img { display: block; width: 100%; height: auto; border: 1px solid #c1c5c8; }
/* Right poster: fills the right half, so its left edge sits on the page center, flush right. */
.dial-poster-grid img:nth-child(2) { margin-top: var(--dial-poster-stagger); }   /* keep the stagger */
/* Left poster: centered in the left half with equal white space on both sides. */
.dial-poster-grid img:first-child { width: 78%; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 767px) {
  .dial-poster-grid { grid-template-columns: 1fr; gap: var(--work-gutter-mobile); }   /* posters sit closer when stacked */
  .dial-poster-grid img:first-child { width: 100%; }   /* full width once stacked */
  .dial-poster-grid img:nth-child(2) { margin-top: 0; }
}

/* --- Placards -> Video: the roomy vertical gap below the placard block, so the
   placards (which parallax up together beneath their eyebrow) do not sit tight to
   the Video Series label. .cols-4 is unique to the placard grid, which is why the
   roomy gap hangs off it here. --- */
.work-portfolio > .work-image-grid.cols-4 { margin-bottom: var(--work-roomy); }

/* The roomy eyebrow (.work-eyebrow-open): video, icons, lifestyle, and the placards
   all sit their label the same generous distance above the artwork on desktop --
   extra clearance so a block that drifts upward never runs into its label -- and
   drop to the standard tight gap on phones, where the sections are shorter. One
   class, one token: the video/icons/lifestyle "open" eyebrow and the placards' own
   roomy eyebrow used to be two look-alike classes; they are now one shared role. */
.work-portfolio > .work-eyebrow-open { margin-bottom: var(--work-eyebrow-gap-roomy); }
@media screen and (max-width: 767px) {
  .work-portfolio > .work-eyebrow-open { margin-bottom: var(--work-eyebrow-gap); }
}

/* The detail eyebrow (.work-eyebrow-inset) needs the opposite help: the stat tiles
   carry ~10% of their width as top whitespace, so without compensation the eyebrow
   floats above the visible artwork. Pull it in on every width so it sits the standard
   gap from the artwork like the rest. The pull scales with tile width: 2-up on
   tablet/desktop (capped at the 1000px grid), stacked (full-width tile) on phones. */
.work-portfolio > .work-eyebrow-inset { margin-bottom: max(-26px, var(--work-eyebrow-gap) - 4.5vw); }
@media screen and (max-width: 479px) {
  .work-portfolio > .work-eyebrow-inset { margin-bottom: calc(var(--work-eyebrow-gap) - 9vw); }
}

/* --- Icon set breathing room: the six step icons are small, so the standard rhythm
   reads cramped around them next to the big image blocks. Give the section the roomy
   gap on both sides -- extra space above (from the video) and below (to the Lifestyle
   eyebrow) -- so it sits in balanced air like the larger blocks. Shares the one roomy
   scale with the placards->video gap; the token steps down responsively. --- */
.work-portfolio > .work-video,
.work-portfolio > .work-icon-row { margin-bottom: var(--work-roomy); }

/* --- Dial Details: stagger the second designed tile down so the pair reads as a
   composition, not a flat row. Each tile also drifts via .work-parallax (whole
   tile, no crop, since these are designed pieces). --- */
.dial-details {
  align-items: start;
  --dial-detail-stagger: 72px;   /* Dial composition: how far the second designed tile drops. Its own
                                    token, independent of --work-rhythm even though 72 matches the rhythm's
                                    tablet step, so retuning the rhythm never moves the stagger. */
}
.dial-details > img:nth-child(2) { margin-top: var(--dial-detail-stagger); }
@media screen and (min-width: 480px) and (max-width: 767px) {
  .dial-details { --dial-detail-stagger: 48px; }   /* tablet: still 2-up, keep the stagger */
}
@media screen and (max-width: 479px) {
  /* Stacked (one column here): pull the second graphic up to close the built-in
     whitespace gutter between the two (~20% of image width). The token redefinition
     lands after the tablet rule above, so this negative pull wins at this width. */
  .dial-details { gap: 0; --dial-detail-stagger: -17vw; }
}

/* --- Reveal for the cinematic hero content (extends the existing fade + rise) --- */
.w-mod-js .reveal-on .work-hero-cinematic .wh-content > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.w-mod-js .reveal-on .work-hero-cinematic .wh-content > .is-visible {
  opacity: 1;
  transform: none;
}
.w-mod-js .reveal-on .work-hero-cinematic .wh-headline { transition-delay: 0.15s; }
/* Cinematic hero IMAGE fade. The image is not covered by the .work-hero rule (different
   class), so without this it would hard-cut in. Fade opacity ONLY (0.5s ease, matching
   the IX2 load fade); the GSAP/CSS transform on .wh-img is left untouched, so the fade
   and the parallax drift never collide (opacity and transform are independent). Keyed
   off the section's .is-visible (work-reveal.js observes .work-hero-cinematic). */
.w-mod-js .reveal-on .work-hero-cinematic .wh-img { opacity: 0; transition: opacity 0.5s ease; }
.w-mod-js .reveal-on .work-hero-cinematic.is-visible .wh-img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .w-mod-js .reveal-on .work-hero-cinematic .wh-content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .w-mod-js .reveal-on .work-hero-cinematic .wh-img { opacity: 1 !important; transition: none !important; }
  .work-hero-cinematic .wh-scroll-cue { animation: none; }
}

/* ============================================================================
   Landing page (single-page index) additions. Additive and scoped: these rules
   add behavior, they do not change any existing rule. See CLAUDE.md (work-page
   reveal system, corners, tokens).
   ============================================================================ */

/* In-page anchor jumps use a controlled-duration script (js/smooth-anchor.js)
   rather than native scroll-behavior, so a long jump does not crawl at a fixed
   speed. The fixed nav sits over the top, so anchor targets clear it with
   scroll-margin on the no-JS native fallback (the script uses a matching 100px
   offset; reduced-motion jumps instantly). */
#about, #work, #contact { scroll-margin-top: 100px; }

/* Work cards join the site's own reveal system (js/work-reveal.js), the same
   fade-and-rise the other .reveal-on blocks use, so all six behave alike.
   Hidden state gated by .w-mod-js so no-JS shows everything; reduced-motion
   shows them outright. */
.w-mod-js .reveal-on .work-grid {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.w-mod-js .reveal-on .work-grid.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .w-mod-js .reveal-on .work-grid {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Testimonials: static three-up (the carousel is removed). The three cards sit
   side by side, which is the triptych the card borders were drawn for (each
   card carries its own divider border; .first adds the left edge). Cards are no
   longer links, so use the default cursor. Below 991px they stack, each with a
   full border. */
.testimonials-static {
  display: flex;
  align-items: stretch;
}
.testimonials-static .card-testimonial {
  flex: 1 1 0;
  min-width: 0;
  cursor: default;
}
@media screen and (max-width: 991px) {
  .testimonials-static {
    flex-direction: column;
  }
  .testimonials-static .card-testimonial {
    border-left-style: solid;
    min-height: auto;
    max-width: none;   /* 480-991px range: full-width stacked card (never had the slider cap) */
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Phone (<=479px): restore the approved 290px card and center it with auto
   margins. The logo sizes and quote measure are percentages of the card, so
   re-capping the width snaps them back to the approved proportions. The
   480-991px range above keeps its full-width card, which never had the cap. */
@media screen and (max-width: 479px) {
  .testimonials-static .card-testimonial {
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
  }
}