/* HERO RIBBON ------------------------------ */
#hero.home .video::before {
  background: rgba(0,0,0,.4);
}

#hero .textbox :is(p, span.text) {
  line-height: 1.143;
  margin-inline: auto;
  max-width: 60rem;
}

#hero .button.red.scroll-down {
  inset: auto auto 0 50%;
}




/* SERVICE LIST RIBBON ------------------------------ */
.service-list .textbox {
  margin-inline: auto;
  max-width: 63em;
}

.service-list .textbox  h1 {
  font-size: clamp(1.5em, 1.227em + 1.36vw, 2.25em);
  margin: 0 auto .375em;
  max-width: 56rem;
}

.service-list p.intro {
  font-size: clamp(1.25em, 1.205em + 0.23vw, 1.375em)
}




/* ENGAGEMENT RIBBON ------------------------------ */
.engagement {
  padding-block: clamp(3em, 1.909em + 5.45vw, 6em) clamp(3em, 2.614em + 1.93vw, 4.063em);
}


.engagement h2 {
  margin: 0 0 .25em;
}

.engagement li:nth-child(2)>div>strong::before { mask-image: url('/images/icons/cart.svg'); }
.engagement li:nth-child(5)>div>strong::before { mask-image: url('/images/icons/handshake.svg'); }

.engagement .button.white {
  padding-right: 2.375em;
}
.engagement .button.white::after {
  background-size: .5625em auto;
  top: calc(50% - .5625em);
  transform: rotate(90deg);
}




/* DESIGN PROCESS RIBBON ------------------------------ */
.design-process {
  position: relative;
  z-index: 1;
}

.design-process ol>li {
  margin: 0 4%;
  position: relative;
  z-index: 0;
}

.design-process ol>li:nth-child(3n+2)>div::before { background: var(--ws-blue); }
.design-process ol>li:nth-child(3n+3)>div::before { background: var(--ws-blue-2); }

.design-process ol>li strong {
  font-size: 1.25em;
  line-height: 1.25;
}

.design-process ol>li>div {
  padding: 7% max(8%, 2rem) 9%;
}




/* CIRCLE SECTION RIBBON ------------------------------ */

.circle-section.blue li:nth-child(5)::before {
  background-image: url('/images/icons/shield.svg');
}




/* FEATURED BLOG RIBBON ------------------------------ */
.featured-blog-post span.link {
  background-image: none;
  color: var(--ws-midnight) !important;
  font-size: 1em;
  padding-right: 2.5em !important;
}

.featured-blog-post span.link::before {
  background: #EBEBEB;
  border-color: #EBEBEB;
}



/* CONTACT RIBBON ------------------------------ */
#contact .contact-info p {
  margin: 0 0 1rem;
}




/* MAX-WIDTH MEDIA QUERIES ------------------------------ */

/* 750 - MOBILE ONLY */
@media (max-width: 46.875em) {
  .design-process ol>li:last-child::after {
    background-image: url('/images/design-process/center-stacked-arrow-blue.svg');
  }

  .circle-section.blue::before {
    display: none;
  }

  .circle-section :is(img:not(.small), .image, .video-circle) {
    margin: 2em auto 0;
  }
}




/* MIN-WIDTH MEDIA QUERIES ------------------------------ */

/* 1024px */
@media (min-width: 64em) {
  .design-process ol>li:nth-child(even):not(:last-child)::after {
    background-image: url('/images/design-process/center-v2.svg');
    z-index: -1;
  }
}


/* 751px */
@media (min-width: 46.9375em) {

  #hero {
    min-height: 62dvh;
  }

  #hero .textbox {
    padding-block: 3.5em 1em;
  }

  .design-process .middle {
    padding-bottom: 17%;
  }

  .design-process ol>li:last-child::before {
    background-image: url('/images/design-process/2col-bottom-blue.svg');
    z-index: 1;
  }

  .featured-blog-post article {
    flex-direction: row;
  }

  .featured-blog-post .textbox a {
    padding: 4em clamp(2em, -3em + 10.67vw, 5em);
  }

  .featured-blog-post a:is(:hover,:focus-visible) span.link {
    color: #FFF !important;
  }

  .featured-blog-post a:is(:hover,:focus-visible) span.link::before {
    background: var(--ws-midnight);
    border-color: var(--ws-midnight);
  }

  .circle-section.blue img {
    grid-column: 8 / 13 !important;
  }

  .circle-section.blue > div {
    grid-column: 3 / 8;
    margin: 6em 0 0;
    max-width: max(30em, 85%);
    padding-right: 1.5em;
  }

}