@charset "UTF-8";
/**************************************************************************
 * UTILS *
 ***************************************************************************/
/* Set Display to Flexbox with browser compatible styles. */
/* Set Fluid Font Size */
/* Set hover and focus styles at the same time.*/
.main__section > section.main__section--hero {
  --_hero-bg-color-c-shadow-height: 17px;
  --_hero-bg-color-c-filter: drop-shadow(-2px -2px var(--_hero-bg-color-c-shadow-height) hsla(0, 0%, 0%, 0.3));
  height: max(768px, 100vh);
}
.main__section > section.main__section--hero .section__container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: var(--_hero-color-blue-01);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.main__section > section.main__section--hero .hero-bg__container {
  isolation: isolate;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: grid;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color {
  position: absolute;
  width: 100%;
  height: 100%;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--a {
  max-width: var(--_body-max-width);
  justify-self: center;
  filter: drop-shadow(-1px -1px 2px hsla(0, 0%, 0%, 0.5));
  z-index: 1;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--a::before {
  content: "";
  background-color: var(--_hero-color-pink-01);
  clip-path: polygon(30% 100%, 100% 100%, 100% 0);
  width: 100%;
  height: 100%;
  display: block;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--b {
  max-width: 100%;
  justify-self: center;
  filter: drop-shadow(-2px -2px 10px hsla(0, 0%, 0%, 0.8));
  z-index: 2;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--b::before {
  content: "";
  background-color: var(--_hero-color-mustard-01);
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 50% 100%, 0 0%);
  width: 60%;
  height: 100%;
  display: block;
  position: absolute;
  right: 0;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--c {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  filter: var(--_hero-bg-color-c-filter);
  z-index: 3;
  max-width: 100%;
  place-self: center;
  align-self: baseline;
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--c span {
  background-color: var(--_hero-color-pink-02);
  width: calc(100% - var(--_body-max-width));
  height: 100%;
  transform: scale(1.007);
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--c span:nth-of-type(1) {
  clip-path: polygon(30% 95%, 70% 95%, 100% 90%, 100% 100%, 0 100%);
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--c span:nth-of-type(2) {
  clip-path: polygon(45% 70%, 70% 70%, 90% 60%, 100% 60%, 100% 100%, 0% 100%, 0% 90%, 25% 85%);
  width: var(--_body-max-width);
}
.main__section > section.main__section--hero .hero-bg__container .hero-bg__color--c span:nth-of-type(3) {
  clip-path: polygon(50% 45%, 80% 30%, 100% 25%, 100% 100%, 0 100%, 0% 60%, 25% 50%);
}
.main__section > section.main__section--hero .hero-card__container {
  width: calc(50% - var(--_section-container-spacing-x));
  max-width: calc(var(--_body-max-width) - var(--_section-container-spacing-x));
  height: calc(100% - var(--_section-container-spacing-y) * 2);
  overflow: hidden;
  display: grid;
  place-content: end;
  position: absolute;
  margin-inline-start: var(--_section-container-spacing-x);
  margin-inline-end: var(--_section-container-spacing-x);
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: var(--_section-container-spacing-x);
  padding-inline-end: var(--_section-container-spacing-x);
  padding-block-start: var(--_section-container-spacing-y);
  padding-block-end: var(--_section-container-spacing-y);
  z-index: 2;
}
.main__section > section.main__section--hero .hero-card__item--data {
  margin-block: 0;
  margin-inline: 2rem;
  display: grid;
  place-items: end;
  text-align: right;
  height: 100%;
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--title {
  position: absolute;
  inset: 50% 2.5em auto auto;
  transform: translateY(-50%);
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--title .title__text {
  color: var(--_ci-color-black-01);
  text-transform: uppercase;
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: var(--font-size-fluid-3);
  line-height: 1em;
  text-align: right;
  margin: 0;
  padding: 0.75em;
  width: fit-content;
  position: relative;
  isolation: isolate;
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--title .title__text strong {
  font-family: "Arial Black", Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1em;
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--title .title__text * {
  position: relative;
  z-index: 2;
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--title .title__frame {
  border: solid 0.3em hsl(0, 0%, 100%);
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: drop-shadow(15px 15px 10px hsla(0, 0%, 0%, 0.7));
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--strapline {
  margin-block: 2em 1em;
  margin-inline: 2em;
  -webkit-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.7));
  -moz-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.7));
  -o-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.7));
  -ms-filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.7));
  filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.7));
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--strapline p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.25em;
  margin-block: 0.5em 0;
  max-width: 30ch;
}
.main__section > section.main__section--hero .hero-card__item--data .hero-card__item--cta {
  margin-inline: 1em;
}

.main__section--hook {
  background-color: var(--_hero-color-pink-02);
}

@media only screen and (max-width: 768px) {
  .main__section > section.main__section--hero .hero-card__item--data {
    margin-inline: 0;
  }
  .main__section > section.main__section--hero .hero-card__item--data .hero-card__item--title {
    inset: 50% 1em auto 1em;
  }
}
@media only screen and (max-width: 810px) {
  .main__section > section.main__section--hero .hero-card__container {
    --_section-container-spacing-x: 0em;
  }
}
@media only screen and (max-width: 1400px) {
  .main__section > section.main__section--hero .hero-card__container {
    width: calc(100% - var(--_section-container-spacing-x));
  }
}
.main__section > section.main__section--hook {
  background: hsl(288, 100%, 96%);
  background: linear-gradient(0deg, hsl(0, 0%, 100%) 17%, hsl(288, 100%, 96%) 78%);
}
.main__section > section.main__section--hook .container__hook {
  position: relative;
}
.main__section > section.main__section--hook .hook__layers {
  --_size: 40rem;
  --_type-writer-x: 50%;
  --_type-writer-y: 50%;
  --_type-writer-scale: 40%;
  position: relative;
  isolation: isolate;
}
.main__section > section.main__section--hook .hook__layers .hook__layer--b {
  position: relative;
  width: 75%;
}
.main__section > section.main__section--hook .hook__layers .hook__layer .hook__item--paper {
  background-image: url("../../assets/img/abstracts/letters.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 226.40901/185.9149;
  height: 100%;
  max-height: var(--_size);
  position: relative;
  left: calc(var(--_section-container-spacing-x) * -1);
  bottom: calc(var(--_section-container-spacing-y) * -1);
}
.main__section > section.main__section--hook .hook__layers .hook__layer .hook__item--typewriter {
  background-image: url("../../assets/img/abstracts/typewriter.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 62.51318/73.799148;
  height: var(--_type-writer-scale);
  max-height: calc(var(--_size) / 100 * var(--_type-writer-scale));
  position: absolute;
  top: var(--_type-writer-y);
  left: var(--_type-writer-x);
  transform: translate(calc(var(--_type-writer-x) * -1), calc(var(--_type-writer-y) * -1));
  -webkit-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  -moz-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  -o-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  -ms-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
}
.main__section > section.main__section--hook .hook__poem {
  display: grid;
  position: absolute;
  inset: 0;
}
.main__section > section.main__section--hook .hook__poem ul {
  list-style: none;
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: center;
  justify-self: end;
}
.main__section > section.main__section--hook .hook__poem ul li {
  font-family: Quicksand-Bold, sans-serif;
  font-size: var(--font-size-em-fluid-0);
  background-color: hsl(0, 0%, 100%);
  width: max-content;
  padding-inline-start: 0.5em;
  padding-inline-end: 0.5em;
  padding-block-start: 0.25em;
  padding-block-end: 0.25em;
  -webkit-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  -moz-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  -o-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  -ms-filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
  filter: drop-shadow(2px 2px 4px hsla(0, 0%, 0%, 0.25));
}
.main__section > section.main__section--hook .hook__poem ul li:nth-of-type(1) {
  align-self: end;
}
.main__section > section.main__section--hook .hook__poem ul li:nth-of-type(2) {
  align-self: end;
  margin-block: 0.75em 0.5em;
  margin-inline-end: 1em;
}
.main__section > section.main__section--hook .hook__poem ul li:nth-of-type(3) {
  align-self: start;
  margin-block: 0em 0.25em;
  margin-inline-start: 0.25em;
}
.main__section > section.main__section--hook .hook__poem ul li:nth-of-type(4) {
  align-self: end;
  margin-block: 0.25em 0.5em;
  margin-inline-end: 0.75em;
}
.main__section > section.main__section--hook .hook__poem ul li:nth-of-type(5) {
  align-self: center;
  margin-block: 0.5em 0.25em;
}

@media only screen and (max-width: 600px) {
  .main__section > section.main__section--hook .section__container {
    --_section-container-spacing-x: 1rem;
    overflow: visible;
  }
  .main__section > section.main__section--hook .section__container .hook__layers .hook__layer .hook__item--paper {
    background-image: none;
  }
  .main__section > section.main__section--hook .section__container .hook__layers .hook__layer .hook__item--paper .hook__item--typewriter {
    --_type-writer-x: -17%;
    --_type-writer-scale: 100%;
    rotate: -27deg;
  }
  .main__section > section.main__section--hook .section__container .hook__poem {
    place-content: center;
  }
}
@media only screen and (min-width: 601px) and (max-width: 900px) {
  .main__section > section.main__section--hook .section__container .hook__layers .hook__layer .hook__item--typewriter {
    background-image: none;
  }
}
.main__section > section.main__section--brand {
  background: rgb(40, 7, 138);
  background: linear-gradient(0deg, rgb(40, 7, 138) 7%, rgb(56, 5, 168) 17%, rgb(79, 7, 200) 27%, rgb(148, 31, 190) 52%, rgb(205, 73, 160) 78%);
  min-height: 100vh;
}
.main__section > section.main__section--brand .section__container {
  --_section-container-spacing-x: 0rem;
  --_section-container-spacing-y: 0rem;
  padding-block: 1rem;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  gap: 2rem;
  max-width: 100%;
}

.window__container {
  --window-shadow: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, 0.25));
  border-radius: 0.75em;
  overflow: hidden;
  resize: both;
  min-width: calc(var(--_body-min-width) - 10px);
  min-height: calc(var(--_body-min-width) - 10px);
  max-width: max-content;
  -webkit-filter: var(--window-shadow);
  -moz-filter: var(--window-shadow);
  -o-filter: var(--window-shadow);
  -ms-filter: var(--window-shadow);
  filter: var(--window-shadow);
}
.window__container * {
  font-family: Quicksand-Bold, sans-serif;
}

.window__status-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  background-color: #f0f0f4;
  padding-inline: 0.75em;
  padding-block: 0.5em;
  cursor: pointer;
}
.window__status-bar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.25em;
  height: fit-content;
}
.window__status-bar ul li {
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.1em;
  cursor: pointer;
}
.window__status-bar ul li:nth-of-type(1) {
  border-color: #e03d36;
  background-color: #ff5f57;
}
.window__status-bar ul li:nth-of-type(2) {
  border-color: #e09d1a;
  background-color: #fdbb2d;
}
.window__status-bar ul li:nth-of-type(3) {
  border-color: #16a61f;
  background-color: #2ac840;
}

.window__status-bar--title {
  width: 100%;
  display: flex;
  place-content: center;
}
.window__status-bar--title span {
  padding-inline: 0.5em;
  width: 75%;
  display: inline-block;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: clip;
}

.window__container--browser {
  width: 70%;
  background-color: hsl(216, 41%, 16%);
}
.window__container--browser .window__status-bar--title {
  font-size: 0.75em;
}
.window__container--browser .window__status-bar--title span {
  background-color: hsl(255, 14%, 89%);
  color: hsla(216, 41%, 16%, 0.5);
  padding-block: 0.5em;
  border-radius: 0.5em;
}

.browser__body {
  --primary-fg-color: hsl(220, 8%, 85%);
  --secondary-fg-color: hsl(0, 0%, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  place-items: center;
  color: var(--primary-fg-color);
  margin-block: 2rem;
  margin-inline: 2rem;
}
.browser__body .browser__header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  place-content: center;
  place-items: center;
}
.browser__body .browser__header .browser__header--logo {
  background-image: url("../../assets/img/abstracts/strengthen-logo.png");
  background-position: center;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
}
.browser__body .browser__header .browser__header--title {
  text-align: center;
}
.browser__body .browser__header .browser__header--title h3 {
  font-size: var(--font-size-fluid-2);
  font-family: "Arial Black", Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1em;
  margin-block: 0 0.25em;
  color: var(--secondary-fg-color);
}
.browser__body .browser__header .browser__header--title h4 {
  font-size: var(--font-size-fluid-0);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.5em;
  margin-block: 0 0.25em;
}
.browser__body .browser__main .browser__hero {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
  place-content: space-evenly;
}
.browser__body .browser__main .browser__hero--left {
  flex: 0 1 50%;
  text-align: justify;
  display: grid;
  place-content: center;
  max-width: 22ch;
}
.browser__body .browser__main .browser__hero--right {
  display: grid;
  place-content: center;
  border-style: solid;
  border-radius: 0.5em;
  border-width: 0.25em;
  border-color: hsl(341, 66%, 57%);
  padding-block: 1em;
  padding-inline: 0.75em;
}
.browser__body .browser__main p {
  margin-block: 0;
}
.browser__body .browser__main ul {
  margin-block: 1rem;
  margin-inline: 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.browser__body .browser__main li {
  padding-inline-start: 0.75rem;
}
.browser__body .browser__main li::marker {
  content: "✔";
  color: hsl(341, 66%, 57%);
}
.browser__body .browser__main li:nth-of-type(2)::marker {
  color: hsl(205, 73%, 59%);
}
.browser__body .browser__main li:nth-of-type(3)::marker {
  color: hsl(111, 42%, 50%);
}
.browser__body .browser__main li:nth-of-type(4)::marker {
  color: hsl(33, 79%, 57%);
}

.window__container--email {
  width: 80%;
  background-color: #e0dee6;
  margin-block-start: -3rem;
}
.window__container--email .window__status-bar {
  display: flex;
  background-color: #2f75d0;
  color: #fff;
}
.window__container--email .window__status-bar--title {
  width: 78%;
}
.window__container--email .window__status-bar--title span {
  text-align: center;
}

.email__container {
  background-color: white;
  margin-block: 2em 1em;
  margin-inline: 1em;
  padding-block: 1em;
  padding-inline: 1em;
  border-radius: 0.5em;
  -webkit-filter: var(--window-shadow);
  -moz-filter: var(--window-shadow);
  -o-filter: var(--window-shadow);
  -ms-filter: var(--window-shadow);
  filter: var(--window-shadow);
}
.email__container .email__title h4 {
  margin-block: 0 1em;
  font-weight: bold;
  font-size: 1rem;
}
.email__container .email__signature {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  place-items: center;
}
.email__container .email__signature .email__logo {
  background-image: url("../../assets/img/abstracts/logo/logo-icon-shadow-01.svg");
  background-position: center;
  background-repeat: no-repeat;
  width: 3em;
  height: 3em;
  background-color: var(--_ci-color-pink-02);
  border-radius: 50%;
  border: solid 0.17em hsl(0, 0%, 100%);
  display: block;
  -webkit-filter: var(--window-shadow);
  -moz-filter: var(--window-shadow);
  -o-filter: var(--window-shadow);
  -ms-filter: var(--window-shadow);
  filter: var(--window-shadow);
}
.email__container .email__signature .email__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.email__container .email__signature .email__details--from {
  font-weight: bold;
  font-size: 1rem;
}
.email__container .email__signature .email__details--to {
  font-weight: normal;
  font-size: 0.75rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
}
.email__container .email__signature .email__details--to::before {
  content: "To:";
  display: inline;
  font-weight: bold;
}

.window__container .window__status-bar ul li:nth-of-type(2) {
  opacity: 0.25;
  cursor: default;
}
.window__container--closed {
  display: none !important;
  margin: 0;
  padding: 0;
  height: 0;
  width: 0;
  opacity: 0;
  visibility: hidden !important;
}
.window__container--max {
  position: absolute;
  inset: 0 !important;
  height: 100%;
  z-index: 1;
  width: 100%;
  max-width: unset;
  max-height: unset;
}
.window__container--max .window__status-bar ul li:nth-of-type(2) {
  opacity: unset;
  cursor: pointer;
}
.window__container--max .window__status-bar ul li:nth-of-type(3) {
  opacity: 0.25;
  cursor: default;
}
.window__container--max.window__container--email {
  margin-block-start: 0;
}
.window__container--active {
  z-index: var(--layer-important);
}

.window__container--browser.window__container--closed ~ .window__container--email {
  margin-block-start: 0;
}

@media only screen and (max-width: 1024px) {
  .browser__body .browser__main .browser__hero--left {
    flex: 0 1 100%;
    max-width: unset;
  }
}
.main__section > section.main__section--word {
  background: hsl(44, 95%, 62%);
  background: linear-gradient(45deg, hsl(44, 95%, 62%) 25%, hsl(44, 94%, 72%) 100%);
  border-top: solid 0.25rem;
  border-bottom: solid 0.25rem;
  color: hsl(185, 10%, 26%);
}
.main__section > section.main__section--word > .section__container {
  --_section-container-spacing-y: 0em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  place-items: center;
  row-gap: 2rem;
}
.main__section > section.main__section--word .container__word--text {
  flex: 2 1 50%;
  margin-block: auto;
  margin-inline: auto;
  display: grid;
  max-width: 50ch;
}
.main__section > section.main__section--word .container__word--text .word-text__title,
.main__section > section.main__section--word .container__word--text .word-text__subtitle {
  font-family: "Arial Black", Helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.95em;
  place-self: center;
}
.main__section > section.main__section--word .container__word--text .word-text__title {
  font-size: var(--font-size-fluid-4);
  border-top: solid 0.078em;
  border-bottom: solid 0.078em;
  margin-block: 0.25em;
  padding-block: 0.05em;
  width: min-content;
}
.main__section > section.main__section--word .container__word--text .word-text__subtitle {
  font-size: var(--font-size-fluid-1);
  margin-block: 0;
  padding-block: 0.05em 1.5em;
}
.main__section > section.main__section--word .container__word--text p {
  font-family: Quicksand-Bold, sans-serif;
  font-size: var(--font-size-fluid-0);
  margin-block: 0 1em;
}
.main__section > section.main__section--word .container__word--text ul {
  font-size: var(--font-size-fluid-0);
  margin-block: 1em;
  padding-inline: 1.5em;
  list-style: none;
}
.main__section > section.main__section--word .container__word--text ul li {
  font-family: Quicksand-Bold, sans-serif;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1em;
}
.main__section > section.main__section--word .container__word--text ul li::before {
  content: "+";
}
.main__section > section.main__section--word .container__word--phone {
  margin-inline: auto;
  background-image: url("../../assets/img/abstracts/bg-messaging.png");
  background-repeat: repeat;
  background-size: cover;
  padding-block: 3em;
  padding-inline: 1em;
  -webkit-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -moz-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -o-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -ms-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  overflow-x: hidden;
  overflow-y: auto;
  min-width: var(--_body-min-width);
  max-width: 428px;
  aspect-ratio: 375/667;
}
.main__section > section.main__section--word .container__word--phone .word-phone__screen {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main__section > section.main__section--word .container__word--phone .word-phone__screen--msg {
  font-size: 14px;
}

@media only screen and (max-width: 500px) {
  .main__section > section.main__section--word > .section__container {
    --_section-container-spacing-x: 0em;
  }
  .main__section > section.main__section--word > .section__container .container__word--text {
    margin-inline: 1rem;
  }
}
@media only screen and (max-width: 974px) {
  .main__section > section.main__section--word > .section__container .container__word--phone {
    border-radius: 2rem 2rem 0 0;
  }
}
@media only screen and (max-width: 975px) {
  .main__section > section.main__section--word > .section__container .container__word--text {
    max-width: unset;
  }
}
.main__section > section.main__section--testimonials {
  background-color: var(--yellow-5);
  background-image: url("../../assets/img/abstracts/bg-comic-bubbles-gradient.svg");
  background-position: center 0px;
  background-repeat: repeat-x;
}
.main__section > section.main__section--testimonials > .section__container {
  outline: none !important;
  margin-block-end: 0;
  padding-block: calc(var(--_footer-section-menu-height) / 2) var(--_footer-section-menu-height);
}
.main__section > section.main__section--testimonials .section__container--title-heading {
  color: hsla(44, 66%, 48%, 0.78);
}
.main__section > section.main__section--testimonials .container__testimonials--list {
  isolation: isolate;
  /*
  &::before,
  &::after {
      content: "";
      width: 7rem;
      height: 100%;
      background: none;                    
      position: absolute;
      z-index: 1;
  }

  &::before {                    
      background: linear-gradient(90deg, rgba(252,196,25,1) 0%, rgba(252,196,25,1) 25%, rgba(252,196,25,0) 100%);
      inset: 0 auto 0 0;
  }
  &::after {
      background: linear-gradient(270deg, rgba(252,196,25,1) 0%, rgba(252,196,25,1) 25%, rgba(252,196,25,0) 100%);
      inset: 0 0 0 auto;
  }
  */
}
.main__section > section.main__section--testimonials .container__testimonials--item {
  --_bubble-inline: 1.1%;
  --_bubble-tick-size: 50px;
  display: grid;
  place-content: center;
  place-items: center;
  padding-block: 2rem;
  margin-inline: var(--_bubble-inline);
  z-index: 2;
}
.main__section > section.main__section--testimonials .container__testimonials--item:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.main__section > section.main__section--testimonials .container__testimonials--item:not([disabled]):hover, .main__section > section.main__section--testimonials .container__testimonials--item:not([disabled]):focus {
  z-index: 3;
  cursor: pointer;
}
.main__section > section.main__section--testimonials .container__testimonials--item p {
  font-family: Quicksand-Bold, sans-serif;
  font-size: var(--font-size-fluid-0);
  line-height: 1.25em;
  margin: 0;
}
.main__section > section.main__section--testimonials .container__testimonials--item p:not(:first-child) {
  margin-block-start: 0.5em;
}
.main__section > section.main__section--testimonials .container__testimonials--item .testimonial__person {
  color: hsl(217, 48%, 22%);
  margin-block-start: var(--_bubble-tick-size);
  text-align: left;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(-2px -2px 0px hsla(45, 53%, 50%, 0.43)) drop-shadow(2px 2px 0px hsla(46, 47%, 30%, 0.43));
}
.main__section > section.main__section--testimonials .container__testimonials--item .testimonial__person h3 {
  font-family: Roboto-Bold, sans-serif;
  margin-block-start: 0;
  margin-block-end: 0;
  letter-spacing: 0.05em;
  font-size: 1.25rem;
}
.main__section > section.main__section--testimonials .container__testimonials--item .testimonial__person span {
  font-size: 0.75rem;
}
.main__section > section.main__section--testimonials .container__testimonials--item .testimonial__person:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.main__section > section.main__section--testimonials .container__testimonials--item .testimonial__person:not([disabled]):hover, .main__section > section.main__section--testimonials .container__testimonials--item .testimonial__person:not([disabled]):focus {
  filter: drop-shadow(-1px -1px 0px hsla(45, 53%, 50%, 0.43)) drop-shadow(1px 1px 0px hsla(46, 47%, 30%, 0.43));
  cursor: pointer;
}

@media only screen and (max-width: 800px) {
  .container__testimonials--item {
    --_bubble-inline: 0.25%;
  }
}
@media only screen and (max-width: 1025px) {
  .container__testimonials--list::before, .container__testimonials--list::after {
    all: unset !important;
  }
}
.main__section > section.main__section--blog {
  --_blog-fg-color: hsl(210, 8%, 28%);
  --_blog-bg-color: hsl(210, 11%, 15%);
  --_bg-percentage: 17%;
  background: var(--_blog-bg-color);
  background: linear-gradient(0deg, var(--_blog-bg-color) min(17%, var(--_bg-percentage)), var(--_blog-fg-color) 100%);
}
.main__section > section.main__section--blog > .section__container {
  outline: none !important;
}
.main__section > section.main__section--blog .section__container--title-heading {
  color: var(--_blog-bg-color);
}
.main__section > section.main__section--blog .tape::before, .main__section > section.main__section--blog .tape::after {
  content: "";
  width: 5em;
  height: 2em;
  background-color: hsla(0, 0%, 100%, 0.52);
  display: block;
  position: absolute;
  z-index: 1;
}
.main__section > section.main__section--blog .tape__top--1::before {
  rotate: -45deg;
  left: -0.5em;
  top: 1.25em;
}
.main__section > section.main__section--blog .tape__top--2::before {
  rotate: 17deg;
  left: 50%;
  top: 0.5em;
  transform: translateX(-50%);
}
.main__section > section.main__section--blog .tape__top--3::before {
  rotate: 18deg;
  right: -0.5em;
  top: 0.25em;
}
.main__section > section.main__section--blog .tape__bottom--1::after {
  rotate: 41deg;
  left: -0.25em;
  bottom: 0.75em;
}
.main__section > section.main__section--blog .tape__bottom--2::after {
  rotate: 7deg;
  left: 50%;
  bottom: -1em;
  transform: translateX(-50%);
}
.main__section > section.main__section--blog .tape__bottom--3::after {
  rotate: 155deg;
  right: -0.25em;
  bottom: 0.75em;
}
.main__section > section.main__section--blog .container__blog--item {
  --__blog-card-spacing: 0.75em;
  isolation: isolate;
  position: relative;
  margin: calc(var(--__blog-card-spacing) * 4) calc(var(--__blog-card-spacing) * 2);
}
.main__section > section.main__section--blog .container__blog--item.theme--1 {
  --_card-color: #e49fac;
}
.main__section > section.main__section--blog .container__blog--item.theme--2 {
  --_card-color: #c9dfe0;
}
.main__section > section.main__section--blog .container__blog--item.theme--3 {
  --_card-color: #eecdd2;
}
.main__section > section.main__section--blog .container__blog--item.theme--4 {
  --_card-color: #8cbce7;
}
.main__section > section.main__section--blog .container__blog--item .blog__card--outer {
  background-color: var(--_card-color);
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  rotate: var(--_rotate);
  -webkit-filter: drop-shadow(0px 3px 6px var(--gray-7));
  -moz-filter: drop-shadow(0px 3px 6px var(--gray-7));
  -o-filter: drop-shadow(0px 3px 6px var(--gray-7));
  -ms-filter: drop-shadow(0px 3px 6px var(--gray-7));
  filter: drop-shadow(0px 3px 6px var(--gray-7));
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  width: calc(100% - var(--__blog-card-spacing) * 2);
  margin: var(--__blog-card-spacing);
  rotate: var(--_rotate);
  -webkit-filter: drop-shadow(0px 2px 4px var(--gray-7));
  -moz-filter: drop-shadow(0px 2px 4px var(--gray-7));
  -o-filter: drop-shadow(0px 2px 4px var(--gray-7));
  -ms-filter: drop-shadow(0px 2px 4px var(--gray-7));
  filter: drop-shadow(0px 2px 4px var(--gray-7));
  /*transition-property: all;
  transition-duration: 0.51s;
  transition-timing-function: linear;
  transition-delay: 0s;*/
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner .ul__hole-punches {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  place-content: space-around;
  gap: 0.75em;
  top: -0.5em;
  position: relative;
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner .ul__hole-punches li {
  width: 1em;
  aspect-ratio: 1;
  background-color: var(--_card-color);
  border-radius: 50%;
  -webkit-filter: drop-shadow(-1px -1px 1px var(--gray-7));
  -moz-filter: drop-shadow(-1px -1px 1px var(--gray-7));
  -o-filter: drop-shadow(-1px -1px 1px var(--gray-7));
  -ms-filter: drop-shadow(-1px -1px 1px var(--gray-7));
  filter: drop-shadow(-1px -1px 1px var(--gray-7));
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner * {
  color: hsl(0, 0%, 20%);
  font-family: Quicksand-Bold, sans-serif;
  font-size: var(--font-size-fluid-0);
  line-height: 1.25em;
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner a {
  text-decoration: none;
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner a:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner a:not([disabled]):hover, .main__section > section.main__section--blog .container__blog--item .blog__card--inner a:not([disabled]):focus {
  color: var(--gray-10);
  cursor: pointer;
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.main__section > section.main__section--blog .container__blog--item .blog__card--inner:not([disabled]):hover, .main__section > section.main__section--blog .container__blog--item .blog__card--inner:not([disabled]):focus {
  z-index: 4;
  cursor: pointer;
}
.main__section > section.main__section--blog .container__blog--item:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.main__section > section.main__section--blog .container__blog--item:not([disabled]):hover, .main__section > section.main__section--blog .container__blog--item:not([disabled]):focus {
  cursor: pointer;
}
.main__section > section.main__section--blog .container__blog--item:not([disabled]):hover .blog__card--inner, .main__section > section.main__section--blog .container__blog--item:not([disabled]):focus .blog__card--inner {
  --_rotate: 0deg;
}
.main__section > section.main__section--blog::after {
  content: "";
  background-color: var(--_blog-bg-color);
  width: 100%;
  height: var(--_footer-section-menu-height);
  -webkit-mask: url(../../assets/img/abstracts/paper/tear-large-up.svg) repeat-x bottom center;
  mask: url(../../assets/img/abstracts/paper/tear-large-up.svg) repeat-x bottom center;
  transform: rotateX(180deg) rotateY(180deg);
  position: absolute;
  bottom: calc(var(--_footer-section-menu-height) / 2 * -1);
  -webkit-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -moz-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -o-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -ms-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
}

[data-js-sg78-tab-parent] {
  --_tab-image: url("../../assets/img/abstracts/expertise/technology.svg");
  --_tab-links-color: hsl(74, 67%, 76%);
  --_tab-cards-color: hsl(183, 26%, 82%);
}

[data-js-sg78-tab-parent="Messaging."] {
  --_tab-image: url("../../assets/img/abstracts/expertise/technology.svg");
  --_tab-links-color: hsl(74, 67%, 76%);
  --_tab-cards-color: hsl(183, 26%, 82%);
}

[data-js-sg78-tab-parent="Technology."] {
  --_tab-image: url("../../assets/img/abstracts/expertise/technology.svg");
  --_tab-links-color: hsl(74, 67%, 76%);
  --_tab-cards-color: hsl(183, 26%, 82%);
}

[data-js-sg78-tab-parent="People."] {
  --_tab-image: url("../../assets/img/abstracts/expertise/technology.svg");
  --_tab-links-color: hsl(74, 67%, 76%);
  --_tab-cards-color: hsl(183, 26%, 82%);
}

@media only screen and (max-width: 1400px) {
  .main__section > section.main__section--expertise {
    --_tab-container-split-ratio: 30% 70%;
  }
}
@media only screen and (min-width: 1401px) {
  .main__section > section.main__section--expertise {
    --_tab-container-split-ratio-offset: calc((100% - 1400px) / 2);
    --_tab-container-split-ratio-left: calc((1400px * 0.3) + var(--_tab-container-split-ratio-offset));
    --_tab-container-split-ratio-right: calc((1400px * 0.7) + var(--_tab-container-split-ratio-offset));
    --_tab-container-split-ratio: var(--_tab-container-split-ratio-left) var(--_tab-container-split-ratio-right);
  }
}
.main__section > section.main__section--expertise {
  --_card-max-width: 78%;
}
.main__section > section.main__section--expertise .section__container {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  place-items: center;
  isolation: isolate;
  position: relative;
}
.main__section > section.main__section--expertise .container__expertise--bg-color {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: var(--_tab-container-split-ratio);
  grid-template-areas: "nav container";
  position: absolute;
  z-index: 0;
}
.main__section > section.main__section--expertise .container__expertise--bg-color::before {
  content: "";
  grid-area: nav;
  background-color: var(--_tab-links-color);
}
.main__section > section.main__section--expertise .container__expertise--bg-color::after {
  content: "";
  grid-area: container;
  background-color: var(--_tab-cards-color);
  -webkit-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -moz-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -o-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  -ms-filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
  filter: drop-shadow(0px -2px 4px var(--_drop-shadow-color));
}
.main__section > section.main__section--expertise .container__expertise--bg-image {
  background-image: var(--_tab-image);
  background-position: center 0px;
  background-repeat: repeat;
  top: 50%;
  left: 50%;
  width: 500%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  position: absolute;
  z-index: 1;
}
.main__section > section.main__section--expertise .section__container--title {
  width: calc(100% - var(--_section-container-spacing-x));
  max-width: calc(var(--_body-max-width) - var(--_section-container-spacing-x));
  margin-inline-start: var(--_section-container-spacing-x);
  margin-inline-end: var(--_section-container-spacing-x);
  margin-block-start: var(--_section-container-spacing-y);
  margin-block-end: var(--_section-container-spacing-y);
  padding-inline-start: var(--_section-container-spacing-x);
  padding-inline-end: var(--_section-container-spacing-x);
  padding-block-start: var(--_section-container-spacing-y);
  padding-block-end: var(--_section-container-spacing-y);
  z-index: 2;
}
.main__section > section.main__section--expertise .section__container--title h2 {
  opacity: 0.1;
}
.main__section > section.main__section--expertise .container__expertise--item:not(.active) {
  display: none;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] {
  width: 100%;
  max-width: var(--_body-max-width);
  height: 100%;
  display: grid;
  grid-template-columns: var(--_tab-container-split-ratio);
  grid-template-areas: "nav container";
  z-index: 3;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav,
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--list {
  margin-inline-start: var(--_section-container-spacing-x);
  margin-inline-end: var(--_section-container-spacing-x);
  margin-block-start: var(--_section-container-spacing-y);
  margin-block-end: var(--_section-container-spacing-y);
  padding-inline-start: var(--_section-container-spacing-x);
  padding-inline-end: var(--_section-container-spacing-x);
  padding-block-start: var(--_section-container-spacing-y);
  padding-block-end: var(--_section-container-spacing-y);
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav {
  grid-area: nav;
  margin-inline-end: 0;
  padding-inline-end: 10px;
  place-self: end;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  place-items: end;
  gap: 2rem;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul li {
  font-family: Quicksand-Bold, sans-serif;
  font-size: clamp(0.75rem, 2vw, 1.25rem);
  line-height: 1em;
  border: solid 2px transparent;
  width: fit-content;
  padding: 0.5em;
  color: hsla(184, 10%, 27%, 0.5);
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul li:not([disabled]) {
  /*&:focus {
  	outline: none;
  }*/
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul li:not([disabled]):hover, .main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul li:not([disabled]):focus {
  border-color: hsla(0, 0%, 0%, 0.1);
  background-color: hsla(0, 0%, 100%, 0.3);
  color: hsl(184, 10%, 27%);
  cursor: pointer;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul li:not([disabled]).active {
  border-color: hsla(0, 0%, 0%, 0.1);
  background-color: hsla(0, 0%, 100%, 0.3);
  color: hsl(184, 10%, 27%);
  cursor: pointer;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul li.active {
  cursor: default !important;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--list {
  grid-area: container;
  place-self: center;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .expertise__card {
  max-width: var(--_card-max-width);
  border: solid 1px hsla(0, 0%, 0%, 0.1);
  background-color: hsla(0, 0%, 100%, 0.3);
  padding-block: 0.5em;
  padding-inline: 0.5em;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .expertise__card * {
  font-family: Quicksand-Bold, sans-serif;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .expertise__card h3 {
  font-size: clamp(1rem, 2vw, 1.17rem);
  font-weight: bold;
  color: hsl(184, 10%, 27%);
  border: solid 1px hsla(184, 10%, 27%, 0.1);
  background-color: hsla(184, 10%, 27%, 0.1);
  margin: 0;
  padding-block: 0.5em;
  padding-inline: 0.5em;
  line-height: 1.25em;
}
.main__section > section.main__section--expertise [data-js-sg78-tab-container] .expertise__card p {
  font-size: var(--font-size-fluid-0);
  color: hsl(184, 10%, 27%);
  margin: 0;
  padding-block: 0.5em;
  padding-inline: 0.5em;
  line-height: 1.25em;
  max-width: var(--_text-max-ch);
}

@media only screen and (max-width: 600px) {
  .main__section > section.main__section--expertise {
    --_section-container-spacing-x: 0.25rem;
    --_section-container-spacing-y: 0.25rem;
    min-height: 500px;
  }
  .main__section > section.main__section--expertise .container__expertise--bg-color,
  .main__section > section.main__section--expertise [data-js-sg78-tab-container] {
    grid-template-rows: var(--_tab-container-split-ratio);
    grid-template-columns: unset;
    grid-template-areas: "nav" "container";
  }
  .main__section > section.main__section--expertise [data-js-sg78-tab-container] {
    position: absolute;
  }
  .main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav {
    place-self: center;
    align-self: end;
    margin: 0;
    padding: 0;
  }
  .main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    place-content: center;
  }
  .main__section > section.main__section--expertise [data-js-sg78-tab-container] .container__expertise--list {
    place-self: baseline;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  .main__section > section.main__section--expertise {
    --_section-container-spacing-x: 0.5rem;
  }
}
@media only screen and (max-width: 1024px) {
  .main__section > section.main__section--expertise {
    --_card-max-width: 100%;
  }
}