html {
  scroll-behavior: smooth;
}
body * {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style:normal;
  font-size: 22px;
  line-height: 38px;
  color:#373643;
}
p {
  margin:25px 0 25px 0;
}
.no-transform {
  text-transform:none !important;
}
a, a:visited, a:active, a:hover {
  text-decoration:none;
  transition:all .3s;
}
h1, .h1 {
  font-size:80px;
  line-height:80px;
  font-weight:700;
  margin:30px 0 30px 0;
}
h1.special {
  font-size:92px;
  line-height:96px;
  font-weight:100;
  margin:0;
  text-transform:uppercase;
  span {
    font-weight:900;
    display:block;
    margin-top:10px;
  }
}
h2, .h2 {
  font-size:50px;
  line-height:54px;
  margin:30px 0 40px 0;
  position:relative;
}
h3, .h3 {
  font-size:40px;
  line-height:46px;
  text-transform:uppercase;
  margin:30px 0 30px 0;
}
h4, .h4 {
  font-size:32px;
  line-height:40px;
  text-transform:uppercase;
  margin:0 0 25px 0;
}
h2 img.flourish {
  position:relative;
  left:15px;
  top:-10px;
}
.eyebrow {
  display:inline-block;
  border-radius:8px;
  padding:8px 12px;
  color:#2B2A32;
  background:#A8BAFF;
  font-size:15px;
  line-height:15px;
  font-family:"IBM Plex Mono", monospace;
  text-transform:uppercase;
}
.container {
  width:1400px;
  margin:0 auto;
  max-width:100%;
}
.inner {
  width:100%;
}
.cta-button {
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:18px 30px;
  position:relative;
  background:#f76331;
  color:white;
  transition:all .3s;
  font-family:"IBM Plex Mono", monospace;
  font-weight:500;
  font-size:20px;
  line-height:20px;
  text-transform:uppercase;
  img {
    position:relative;
    top:0;
    right:0;
    transition:all .3s;
  }
  &:hover {
    background:#F5450A;
    img {
      top:-3px;
      right:-3px;
    }
  }
}
.cta-button.alt {
  background:transparent;
  color:#373643;
  font-size:20px;
  line-height:20px;
  padding:12px 20px;
  border-bottom:9px solid #F2F3F2;
  text-transform:uppercase;
  font-family:"IBM Plex Mono", monospace;
  font-weight:500;
  img {
    position:relative;
    left:0;
    top:0;
  }
  &.small {
    font-size:16px;
    line-height:16px;
    border-bottom-width:7px;
    padding:9px 14px;
  }
  &:hover {
    border-bottom-color:#CACEDD;
    img {
      left:5px;
    }
  }
  &.down {
    img {
      transform:rotate(90deg);
    }
    &:hover {
      img {
        left:0;
        top:5px;
      }
    }
  }
}
.show-mobile {
  display:none;
}
.hide-mobile {
  display:block;
}
.divider-white {
  display:block;
}
.divider-white.mobile {
  display:none;
}


header {
  .inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    padding-top:10px;
    padding-bottom:60px;
  }
  a.logo {
    display:block;
    padding:10px 10px;
  }
  .nav {
    display:flex;
    gap:0;
    a:not(.cta-button) {
      display:flex;
      padding:10px 30px;
      color:#373643;
      text-transform:uppercase;
      font-family:"IBM Plex Mono", monospace;
      &:hover, &.active {
        color:#f76331;
      }
    }
    a.cta-button {
      margin-left:30px;
    }
  }
  img.header-divider {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:auto;
  }
  img.header-divider.mobile {
    display:none;
  }
  .mobile-hamburger {
    display:none;
  }
  .mobile-menu {
    display:none;
  }
  .mobile-close {
    display:none;
  }
}

#hero {
  padding:60px 0 0 0;
  position:relative;
  p {
    width:45%;
    font-size:30px;
    line-height:45px;
  }
  img.hero-divider {
    margin-top:40px;
    position:relative;
    top:-4px;
    display:block;
  }
  img.hero-divider.mobile {
    display:none;
  }
}

.dark-panel {
  background:#373643;
  color:white;
  padding:100px 0;
  text-align:center;
  .dark-panel-inner {
    display:flex;
    align-items:center;
    gap:70px;
    margin:40px auto;
    text-align:left;
    width:80%;
    .dark-panel-left {
      flex-basis:45%;
      img {
        width:105%;
        height:auto;
        left:-5%;
        position:relative;
        order:2;
      }
    }
    .dark-panel-right {
      flex-basis:55%;
      margin-top:30px;
      order:1;
    }
  }
  h4 {
    width:70%;
    margin:50px auto;
  }
  .divider-white {
    margin-top:50px;
  }
}

#toolset {
  .inner {
    background:url('./images/toolset-divider.svg') repeat 0 0;
    background-size:cover;
    margin-top:100px;
    margin-bottom:140px;
    display:flex;
    justify-content:space-between;
  }
  .toolset-left {
    border-right:3px solid white;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    flex-basis:42%;
    background:#F0F0F5;
    padding:120px 80px;
    position:relative;
    gap:35px;
    h2 {
      margin:0;
    }
    p {
      font-size:30px;
      line-height:45px;
      margin:0;
    }
    .logomark-flourish {
      position:absolute;
      top:20px;
      right:10px;
    }
  }
  .toolset-right {
    flex-basis:45%;
    border-left:3px solid white;
    background:white;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    h4 {
      background:#373643;
      color:white;
      padding:23px 35px;
      margin:0;
      flex-basis:100%;
      height:86px;
    }
    .toolset-grid {
      display:flex;
      justify-content:stretch;
      align-items:stretch;
      flex-wrap:wrap;
      gap:0;
      background:white;
      position:relative;
      height:calc(100% - 86px);
      width:100%;
      .item {
        flex-basis:calc(100% / 3);
        text-align:center;
        display:flex;
        align-items:center;
        justify-content:center;
        border-right:1px solid #D7D7E4;
        border-bottom:1px solid #D7D7E4;
        &:nth-child(3n) {
          border-right:none;
        }
        &:nth-child(7), &:nth-child(8), &:nth-child(9) {
          border-bottom:none;
        }
      }
    }
  }
}

#services {
  p.intro {
    width:75%;
    margin-top:0;
    margin-bottom:50px;
  }
  .service-cards {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:70px;
    .service-card {
      flex-basis:calc(100% / 2 - 40px);
      p {
        margin-top:0;
      }
      img.service-image {
        margin-bottom:30px;
        width:100%;
      }
    }
  }
}

.service-panel {
  margin-top:100px;
  margin-bottom:100px;
  .inner {
    display:flex;
    .service-panel-left {
      flex-basis:calc(100% / 3);
      background:#F0F0F5;
      padding:50px 40px;
      position:relative;
      img {
        position:absolute;
        top:15px;
        right:15px;
      }
    }
    .service-panel-right {
      border-left:3px solid white;
      flex-basis:calc(100% / 3 * 2);
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      background: url(./images/toolset-divider.svg) repeat 0 0;
      background-size: cover;
      gap:50px;
      padding:40px 40px;
      .service-panel-image {
        flex-basis:calc(50% - 25px);
        img {
          width:100%;
          height:auto;
        }
      }
      .service-panel-content {
        padding:40px 40px;
        background:white;
        flex-basis:calc(50% - 25px);
        p {
          margin-top:0;
        }
      }
    }
  }
}

#contact {
  margin-top:100px;
  background:#F0F0F5;
  padding:100px 0;
  h2 {
    margin:0;
  }
  p.intro {
    margin-bottom:40px;
    margin-top:0;
  }
  .contact-form {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:40px;
    .form-row {
      display:flex;
      width:100%;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:40px;
      input {
        flex-basis:calc(100% / 3 - 40px);
        width:calc(100% / 3);
        border:none;
        box-shadow:none;
        background:white;
        border-bottom:4px solid #DEDEE8;
        padding:25px 35px;
        font-size:24px;
        line-height:24px;
        font-family:"IBM Plex Mono", monospace;
        font-weight:500;
      }
      textarea {
        flex-basis:100%;
        border:none;
        box-shadow:none;
        background:white;
        border-bottom:4px solid #DEDEE8;
        padding:25px 35px;
        font-size:24px;
        line-height:24px;
        font-family:"IBM Plex Mono", monospace;
        font-weight:500;
        height:250px;
      }
    }
  }
}

footer {
  background:#373643;
  padding:50px 0 100px 0;
  text-align:center;
  .inner {
    display:flex;
    flex-direction:column;
    gap:40px;
  }
  .footer-nav {
    display:flex;
    gap:0;
    justify-content:center;
    a {
      color:white;
      display:block;
      padding:10px 20px;
      font-family:"IBM Plex Mono", monospace;
      text-transform:uppercase;
      &:hover {
        color:#f76331;
      }
    }
  }
  a.footer-email {
    color:white;
    display:block;
    padding:10px 20px;
    &:hover {
      color:#f76331;
    }
  }
  .footer-social {
    display:flex;
    gap:0;
    justify-content:center;
    a {
      display:block;
      padding:10px 20px;
      opacity:1;
      &:hover {
        opacity:.7;
      }
    }
  }
  a.footer-logo {
    display:block;
    opacity:1;
    &:hover {
      opacity:.7;
    }
  }
  p.copyright {
    font-size:18px;
    color:white;
  }
}



/* Page-specific styles */
#home-page {
  #hero {
    img.hero-image {
        position: absolute;
        bottom: 50px;
        right: -130px;
        width: 735px;
        height: auto;
        z-index: -1;
    }
  }
}
#services-page, #about-page {
  #hero  {
    padding-top:30px;
    p {
      width:100%;
    }
    .inner {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      flex-wrap:wrap;
      .hero-left {
        flex-basis:60%;
        position:relative;
        z-index:2;
        padding-bottom:70px;
        a.cta-button {
          position:absolute;
          right:100px;
          bottom:0px;
        }
      }
      .hero-right {
        flex-basis:40%;
        overflow:visible;
        z-index:0;
        padding-bottom:15px;
        img {
          width:115%;
        }
      }
      .hero-divider-container {
        flex-basis:100%;
        position:absolute;
        bottom:0;
        z-index:1;
        width:100%;
        img.hero-divider {
          width:100%;
        }
      }
    }
  }
  .dark-panel {
    & .dark-panel-inner {
        & .dark-panel-left {
            img {
                width: 90%;
                left: 10%;
            }
        }
    }
  }
}

#about-page {
  & #hero {
    padding-top:0;
      & .inner {
        flex-wrap:nowrap;
        .hero-left {
          padding-top:20px;
          flex-basis:50%;
        }
        .hero-right {
            flex-basis: 50%;
            padding-bottom:0;
            img {
              transform:translateY(12px);
            }
        }
      }
  }
}


@media screen and (max-width:1450px) {
  #hero {
    padding-top:30px;
  }
  .container {
    width:100%;
  }
  .inner {
    padding-left:25px;
    padding-right:25px;
  }
  #hero img.hero-image {
    width:730px;
  }
  #toolset .inner {
    padding-left:0;
    padding-right:0;
  }
}

@media screen and (max-width:1350px) {
  #services-page {
    & #hero {
      & .inner {
      padding-bottom:80px;
        .hero-left {
            flex-basis: 70%;
        }
        .hero-right {
          flex-basis:30%;
          img {
            width:125%;
          }
        }
      }
    }
  }
  #about-page {
    & #hero {
      & .inner {
        .hero-left {
          padding-bottom:0;
        }
        .hero-right {
          img {
            width:120%;
          }
        }
      }
    }
  }
  
  h1.special {
    font-size:80px;
    line-height:85px;
    span {
      margin-top:0;
    }
  }
  h2, .h2 {
    font-size:40px;
    line-height:45px;
    margin:20px 0 20px 0;
  }
  p {
    margin:15px 0;
  }
  .cta-button {
    padding:18px 20px;
    font-size:18px;
    line-height:18px;
  }
  .service-panel {
    margin-top:60px;
    margin-bottom:60px;
    & .inner {
      font-size:18px;
      line-height:30px;
      .service-panel-right {
        gap:30px;
        padding:20px 20px;
        .service-panel-image {
          flex-basis:calc(50% - 15px);
        }
        .service-panel-content {
          flex-basis:calc(50% - 15px);
          padding:25px 25px;
          a.cta-button {
            font-size:16px;
            line-height:16px;
            padding:15px 15px;
          }
        }
      }
      .service-panel-left {
          padding: 40px 25px;
      }
    }
  }
}

@media screen and (max-width:1250px) {
  #home-page {
    & #hero {
      img.hero-image {
        width:680px;
      }
    }
  }
}

@media screen and (min-width:1025px) and (max-width:1199px) {
  .dark-panel .dark-panel-inner {
    width:100%;
  }
  #toolset .toolset-left {
    padding:100px 50px;
    flex-basis:47%;
  }
  #toolset .toolset-right h4 {
    padding-left:20px;
    padding-right:20px;
  }
  #services .service-cards {
    gap:40px;
    .service-card {
      flex-basis:calc(100% / 3 - 28px);
    }
  }
}

@media screen and (max-width:1024px) {
  body {
    font-size:16px;
    line-height:30px;
  }
  h1.special {
    font-size:42px;
    line-height:47px;
    span {
      margin-top:10px;
    }
  }
  h1, .h1 {
    font-size:40px;
    line-height:50px;
    margin:20px 0 20px 0;
  }
  h2, .h2 {
    font-size:32px;
    line-height:44px;
    margin:15px 0 15px 0;
  }
  h4, .h4 {
    font-size:28px;
    line-height:37px;
    margin:15px 0 15px 0;
  }
  h2 img.flourish {
    position:absolute;
    left:0;
    top:-27px;
  }
  .cta-button {
    font-size:18px;
    padding:15px 20px;
  }
  .cta-button.alt {
    &.small {
      font-size:14px;
      padding:7px 10px;
      border-bottom-width:5px;
    }
  }
  .show-mobile {
    display:block;
  }
  .hide-mobile {
    display:none;
  }
  .divider-white {
    display:none;
  }
  .divider-white.mobile {
    display:block;
    position:relative;
    left:-15px;
  }

  header {
    .nav {
      display:none;
    }
    .inner {
      padding-top:0;
      padding-bottom:15px;
    }
    img.header-divider {
      display:none;
    }
    img.header-divider.mobile {
      display:block;
      width:96%;
    }
    a.logo img {
      width:115px;
      height:auto;
    }
    .mobile-hamburger {
      display:none;
      cursor:pointer;
      &.shown {
        display:block;
      }
    }
    .mobile-menu {
      display:none;
      position:absolute;
      top:70px;
      left:0;
      background:white;
      z-index:999;
      width:100%;
      padding:20px 0 50px 0;
      box-shadow:0 10px 10px rgba(0,0,0,.3);
      &.shown {
        display:block;
      }
      a:not(.cta-button) {
        display:flex;
        padding:20px 25px;
        color:#373643;
        text-transform:uppercase;
        font-family:"IBM Plex Mono", monospace;
        font-size:22px;
        line-height:35px;
        &.active {
          color:#f76331;
        }
      }
      a.cta-button {
        margin-top:20px;
        margin-left:25px;
      }
    }
    .mobile-close {
      display:none;
      position:absolute;
      top:20px;
      right:25px;
      &.shown {
        display:block;
      }
    }
  }
  
  #hero {
    padding-top:10px;
    .inner {
      display:flex;
      flex-direction:column;
      gap:30px;
    }
    h1 {
      order:1;
    }
    p {
      width:100%;
      font-size:20px;
      line-height:32px;
      order:3;
      margin:0;
    }
    .cta-button {
      order:4;
    }
    img.hero-image {
      width:135%;
      right:auto;
      position:relative;
      left:-23%;
      z-index:1;
      bottom:auto;
      order:2;
    }
    img.hero-divider {
      display:none;
      order:5;
    }
    img.hero-divider.mobile {
      display:block;
      top:-3px;
      margin-top:0;
    }
  }
  #home-page {
    & #hero {
      img.hero-image {
        position: relative;
        bottom: auto;
        right: auto;
        width:130%;
        z-index: 1;
        left:-15%;
      }
    }
  }
  #services-page, #about-page {
    & #hero {
      & .inner {
        .hero-left {
          padding-bottom:10px;
          flex-basis:100%;
          p {
            margin:20px 0;
          }
          a.cta-button {
            right:auto;
            position:relative;
          }
        }
        .hero-right {
          flex-basis: 100%;
          img {
            width:120%;
            left:-10%;
          }
        }
        .hero-divider-container {
          left:0;
        }
      }
    }
    & .dark-panel {
      & .dark-panel-inner {
          & .dark-panel-left {
              img {
                  width: 100%;
                  left: 0;
              }
          }
      }
    }
  }
  #about-page {
    & #hero {
        & .inner {
          gap:0;
          .hero-left {
            padding-bottom:0;
            p {
              margin-bottom:0;
            }
          }
          & .hero-right {
              img {
                  width: 160%;
                  left: -34%;
              }
          }
        }
    }
  }
  .service-panel {
    margin:0;
    & .inner {
      padding:0;
      flex-wrap:wrap;
      .service-panel-left {
        flex-basis:100%;
      }
      .service-panel-right {
        border-top:3px solid white;
        border-bottom:3px solid white;
        flex-basis:100%;
        display:flex;
        padding-top:35px;
        padding-bottom:35px;
        .service-panel-image {
          flex-basis:100%;
          order:1;
        }
        .service-panel-content {
          flex-basis:100%;
          order:2;
        }
      }
    }
  }
  .dark-panel {
    padding:60px 0;
    text-align:left;
    h2 {
      margin-bottom:0;
    }
    .dark-panel-inner {
      flex-wrap:wrap;
      gap:20px;
      width:100%;
      margin-top:0;
      display:flex;
      gap:20px;
      align-items:center;
      .dark-panel-left {
        order: 2;
        flex-basis:100%;
        img {
          width:100%;
          left:0;
        }
      }
      .dark-panel-right {
        margin-top:0;
        order:1;
        flex-basis:100%;
      }
    }
    h4 {
      width:100%;
    }
  }
  #toolset {
    .inner {
      margin:0;
      flex-wrap:wrap;
      flex-direction:column;
      gap:50px;
      .toolset-left {
        flex-basis:100%;
        gap:20px;
        padding:70px 25px;
        border-right:none;
        border-bottom:3px solid white;
        p {
          font-size:20px;
          line-height:32px;
        }
      }
      .toolset-right {
        border-left:none;
        border-top:3px solid white;
        flex-basis:100%;
        h4 {
          padding:18px 25px;
          height:auto;
          font-size:22px;
          line-height:32px;
        }
        .toolset-grid {
          height:auto;
          .item {
            height:130px;
          }
        }
      }
    }
  }
  #home-page #services {
    margin-top:100px;
    h2 {
      margin-top:80px;
    }
    p.intro {
      width:100%;
    }
    .service-cards {
      .service-card {
        flex-basis:100%;
        img.service-image {
          margin-bottom:0;
        }
      }
    }
  }
  #contact {
    margin-top:40px;
    padding:70px 0;
    .contact-form {
      gap:20px;
      .form-row {
        gap:20px;
        flex-direction:row;
        input, textarea {
          flex-basis:100%;
          width:100%;
          padding:18px 25px;
          font-size:20px;
          line-height:34px;
        }
      }
    }
  }

  footer {
    padding-bottom:50px;
    .footer-nav {
      a {
        font-size:22px;
        padding-left:18px;
        padding-right:18px;
      }
    }
    p.copyright {
      margin-top:0;
      font-size:14px;
      line-height:32px;
    }
  }
}

@media screen and (max-width:400px) {
  h1.special {
    font-size:32px;
    line-height:40px;
  }
  .inner {
    padding-left:20px;
    padding-right:20px;
  }
  footer {
    .footer-nav {
      a {
        font-size:15px;
        padding-left:16px;
        padding-right:16px;
      }
    }
  }
}