/* *{
  border: 1px solid red;
} */

:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
}

body{
  /* position: relative; */
}

.site-nav{
  padding: 15px 0;
  z-index: 9999;
  width: 100%;
  top: 0;
  left: 0;
}

  @media screen and (min-width: 64em){
    .site-nav{
      padding: 35px 0;
    }
  }

  .site-nav:has(+ .entry-content > .wp-block-cover:first-child){
    position: absolute;
  }


/*h1, h2, h3, h4, h5{
  line-height: 1.3em;
}

h1{

}

h2{

}

h3{
  color: var(--highlight);
  text-transform: uppercase;
  margin-bottom: 1em;
  font-weight: 900;
  font-size: clamp(1.25rem, 1.1262rem + 0.6601vw, 1.75rem);
}

  h3 + *{
    margin-top: 0;
  }

p{
  line-height: 1.6em;
}

strong{
  font-weight: 700;
}

.ib{
  display: inline-block;
}

.cta{
  color: var(--text);
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
}

  .cta::before{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: var(--bg);
    left: 0;
    bottom: 0;
    transition: width 0.25s ease-in-out;
    position: absolute;
  }

  .cta::after{
    content: '';
    display: block;
    width: 100%;
    background-color: var(--highlight);
    height: 2px;
    bottom: 10px;
    left: 0;
  }

    .cta:hover::before{
      width: 100%;
    }

.container{
  width: 100%;
  max-width: 106.25em;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

  @media screen and (min-width: 64em){
    .container{
      padding: 0 45px;
    }
  } */

/*.site-nav{
  padding: 15px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: calc(100% + 40px);
  align-items: flex-start;
  position: sticky;
  margin: 0 -20px;
  top: 0;
  background-color: transparent;
  z-index: 10;
  box-sizing: border-box;
}

  @media screen and (min-width: 64em){
    .site-nav{
      padding: 35px 0;
      margin: 0;
      width: 100%;
      position: relative;
      align-items: center;
      justify-content: space-between;
    }
  }

  .site-nav__link{
    display: block;
    margin: auto;
    order: 1;
    flex: 1 1 auto;
    margin: auto auto auto 0;
    width: 33.33%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

    @media screen and (min-width: 64em){
      .site-nav__link{
        width: 33.33%;
        margin: 0 auto;
        order: 2;
      }
    }

    .site-nav__logo{
      display: block;
      width: 100%;
      height: auto;
      max-width: 100px;
    }

      @media screen and (min-width: 64em){
        .site-nav__logo{
          max-width: 142px;
        }
      }

  .site-nav .menu{
    order: 2;
    list-style: none;
    margin: auto; 
    padding: 0;
    display: flex;
    flex-direction: row;
    text-transform: uppercase;
    gap: 5px;
    justify-content: flex-start;
    letter-spacing: 1.1px;
    line-height: 1em;
    align-items: flex-start;
  }

    @media screen and (min-width: 64em){
      .site-nav .menu{
        width: 33.33%;
        gap: 15px;
        order: 1;
        margin: auto auto auto 0;
      }
    }

    .site-nav .menu > .menu-item{
      display: flex;
      flex-direction: row;
      white-space: nowrap;
      gap: 5px;
    }

      @media screen and (min-width: 64em){
        .site-nav .menu > .menu-item{
          gap: 15px;
        }
      }

      .site-nav .menu > .menu-item::after{
        content: '/';
        display: block;
        color: var(--highlight);
        font-size: clamp(1.25rem, 1.1262rem + 0.6601vw, 1.75rem);
      }

      .site-nav .menu > .menu-item:last-child::after{
        display: none;
      }

    .site-nav .menu > .menu-item a{
      font-size: 0.875rem;
    }

    @media screen and (min-width: 64em){
        .site-nav .menu > .menu-item a{
          font-size: clamp(1.25rem, 1.1262rem + 0.6601vw, 1.75rem);
        }
    }

    .site-nav .menu a{
      color: var(--text);
      text-decoration: none;
    }

    .site-nav > .menu .menu-item:first-child .sub-menu::after{
      content: '';
      display: block;
      height: 150px;
      background: url(../images/clean-creatives.png) no-repeat center right;
      background-size: 150px 150px;
      position: absolute;
      bottom: 40px;
      width: 100%;
      max-width: 106.25em;
      left: 50%;
      transform: translate(-50%, 0);
    }

    .site-nav .menu .sub-menu{
      display: none;
    }

      .site-nav .menu .sub-menu.active{
        position: fixed;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: auto;
        background-color: var(--bg);
        display: block;
        list-style: none;
        margin: 0;
        padding: 50px 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-top: 20px solid var(--bg);
      }

        .site-nav .menu .sub-menu .sub-menu.active{
          z-index: 10;
        }

        .site-nav .menu .sub-menu .sub-menu::before{
          content: '';
          display: block;
          z-index: 1;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: var(--bg);
          opacity: 1;
          border-top: 20px solid var(--bg);
          transition: opacity 0.5s ease-in-out;
          box-sizing: border-box;
        }

          .site-nav .menu .sub-menu.hovered::before{
            opacity: 0.5;
          }

        .site-nav .menu .sub-menu.active .menu-item{
          --ani-delay: 0s;
          opacity: 0;
          animation: fadeAcross 0.25s forwards;
          animation-delay: var(--ani-delay);
        }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(2){
            --ani-delay: 0.25s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(3){
            --ani-delay: 0.5s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(4){
            --ani-delay: 0.75s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(5){
            --ani-delay: 1s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(6){
            --ani-delay: 1.25s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(7){
            --ani-delay: 1.5s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(8){
            --ani-delay: 1.75s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(9){
            --ani-delay: 2s;
          }

          .site-nav .menu .sub-menu.active .menu-item:nth-child(10){
            --ani-delay: 2.25s;
          }

      .site-nav .menu .sub-menu .menu-item{
        max-width: 106.25em;
        padding: 0 20px;
        box-sizing: border-box;
        margin: 10px auto;
        width: 100%;
        font-weight: 100;
        text-transform: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        left: -100px;
        position: relative;
      }

        .site-nav .menu .sub-menu .menu-item.menu-item--small a, .site-nav .menu .sub-menu .menu-item.menu-item--back a{
          font-weight: 300;
          font-size: clamp(2rem, 1.7589rem + 1.2857vw, 3.125rem);
        }

        .site-nav .menu .sub-menu .menu-item + .menu-item--small{
          margin-top: 120px;
        }

        .site-nav .menu .sub-menu .menu-item.menu-item--back a{
          color: var(--highlight);
        }

          .site-nav .menu .sub-menu .menu-item.menu-item--small a::before{
            display: none !important;
          }

          .site-nav .menu .sub-menu .menu-item.menu-item--back a{
            margin-top: 120px;
          }

            .site-nav .menu .sub-menu .menu-item.menu-item--back a::before{
              content: '';
              background-repeat: no-repeat;
              background-position: center center;
              background-size: 100% auto;
              margin: 0;
              background-image: url(../images/sub-menu-back-arrow.svg) !important;
              width: 44px !important;
              display: block !important;
            }

        .site-nav .menu .sub-menu .sub-menu .menu-item{
          position: relative;
          z-index: 2;
        }

        .site-nav .menu .sub-menu .menu-item.active{
          z-index: 1;
        }

        @media screen and (min-width: 64em){
          .site-nav .menu .sub-menu .menu-item{
            padding: 0 45px;
            margin: 20px auto;
          }
        }

        .site-nav .menu .sub-menu .menu-item a{
          display: flex;
          align-items: stretch;
          gap: 30px;
          font-size: clamp(2.5rem, 1.6295rem + 4.6429vw, 6.5625rem);
          line-height: 1.2em;
        }

        @media screen and (min-width: 64em){
          .site-nav .menu .sub-menu .menu-item a:hover::before{
            content: '';
            display: block;
            width: 77px;
            background: url(../images/sub-menu-arrow.svg) no-repeat center center;
            background-size: 100% auto;
            margin: 0;
          }
        }

        .site-nav .menu .sub-menu .menu-item a:hover + span{
          opacity: 1;
        }

        .site-nav .menu .sub-menu .menu-item span{
          font-weight: 500;
          font-size: 1.875rem;
          text-align: right;
          line-height: 1.3em;
          opacity: 0;
          transition: opacity 0.5s ease-in-out;
          margin: auto 0;
        }

        .site-nav .menu .sub-menu .menu-item span span{
          color: var(--highlight);
          opacity: 1;
        }

          .site-nav .menu .sub-menu .menu-item span span::after{
            content: '';
            display: block;
          }

    .site-nav__contact{
      order: 3;
      font-size: clamp(0.875rem, 0.6875rem + 1vw, 1.75rem);
      color: var(--text);
      text-decoration: none;
      text-transform: uppercase;
      margin: auto 0;
      width: 33.33%;
      text-align: right;
    }

    .site-nav__close{
      font-size: clamp(1.25rem, 1.1262rem + 0.6601vw, 1.75rem);
      color: var(--text);
      text-transform: uppercase;
      justify-content: flex-end;
      align-items: center;
      background-color: var(--bg);
      border: none;
      width: 33.33%;
      height: 20px;
      margin: auto 0;
      order: 4;
      display: none;
      padding: 0;
      appearance: none;
      text-align: right;
      gap: 20px;
    }

      .site-nav__close span{
        display: none;
      }

      @media screen and (min-width: 64em){
        .site-nav__close{
          height: 50px;
          margin: auto 0 auto auto;
        }
      }

      .site-nav__close svg{
        width: 20px;
        height: 20px;
      }

      @media screen and (min-width: 64em){
        .site-nav__close svg{
          pointer-events: none;
          display: block;
          width: 50px;
          height: 50px;
        }
      }
.site-footer{
  padding-bottom: 40px;
}

  .site-footer p{
    font-size: clamp(1rem, 0.9381rem + 0.33vw, 1.25rem);
    line-height: 1.7em;
    margin: 0;
  }

  .site-footer__links{
    margin: 100px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    font-weight: 300;
    gap: 40px;
  }

    .site-footer__links li:first-child, .site-footer__links li:nth-child(2){
      max-width: 64em;
      width: 100%;
    }

      .site-footer__links li:first-child{
        order: 1;
      }

      .site-footer__links li:nth-child(2){
        order: 3;
      }

      .site-footer__links li:nth-of-type(3){
        order: 2;
      }

    .site-footer__links h3{
      color: var(--highlight);
      font-weight: 300;
      margin: 0;
      font-size: clamp(1.25rem, 1.1262rem + 0.6601vw, 1.75rem);
    }

    .site-footer__links ul{
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: clamp(1.25rem, 0.8482rem + 2.1429vw, 3.125rem);
      line-height: 1.2em;
    }

    .site-footer__links a{
      color: var(--text);
      text-decoration: none;
    }

      .site-footer__links a:hover, .site-footer__links a:focus{
        text-decoration: underline;
        cursor: pointer;
      }

  .site-footer__flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
  }

  .site-footer__copyright{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

    @media screen and (min-width: 56.375em){
      .site-footer__copyright{
        text-align: left;
        align-items: flex-start;
      }
    }

  .site-footer__logo{
    display: block;
    max-width: 194px;
    height: auto;
    margin-bottom: 40px;
  }

  .site-footer__cc{
    display: block;
    max-width: 163px;
    align-self: flex-start;
    margin: 0 auto;
  }

    @media screen and (min-width: 56.375em){
      .site-footer__cc{
        margin-right: 0;
      }
    }

    .site-footer__cc.has-animation{
      animation: 1s forwards 0s fadeUp, 5s linear 1s spinLogo;
    }


.single-work .wp-block-heading{
  margin-top: 0;
  color: var(--highlight);
}

  .single-work h2.wp-block-heading{
    font-size: clamp(1.75rem, 1.5893rem + 0.8571vw, 2.5rem);
  }

.single-work .hentry > p{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5em;
}

  @media screen and (min-width: 64em){
    .single-work .hentry > p{
      max-width: 50%;
    }
  }

.single-work .hentry .wp-block-image{
  width: 100%;
  height: auto;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  max-width: calc(1700px - 90px);
}

  @media screen and (min-width: 64em){
    .single-work .hentry .wp-block-image{
      margin: 100px auto;
    }
  }

.single-work .hentry .wp-block-quote{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  flex-direction: column;
}

  @media screen and (min-width: 64em){
    .single-work .hentry .wp-block-quote{
      max-width: 50%;
    }
  }

  .single-work .hentry .wp-block-quote::before{
    content: '';
    display: block;
    margin: 0 auto;
    background: url(../images/quote-lead.svg) no-repeat center center;
    background-size: auto 100%;
    width: 75px;
    height: 75px;
    margin-bottom: 20px;
  }

    @media screen and (min-width: 64em){
      .single-work .hentry .wp-block-quote::before{
        margin-bottom: 40px;
        width: 125px;
        height: 125px;
      }
    }

  .single-work .hentry .wp-block-quote cite{
    color: var(--highlight);
    font-style: normal;
    line-height: 1.6em;
  }

  @keyframes fadeAcross{
    0%{
      opacity: 0;
      left: -100px;
    }
    100%{
      opacity: 1;
      left: 0;
    }
  } */