@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-BoldItalic.ttf') format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-ThinItalic.ttf') format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-Thin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-SemiBoldItalic.ttf') format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-MediumItalic.ttf') format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-LightItalic.ttf') format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-ExtraLightItalic.ttf') format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-ExtraLight.ttf') format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexsans;
  src: url('../fonts/IBMPlexSans-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexserif;
  src: url('../fonts/IBMPlexSerif-BoldItalic.ttf') format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ibmplexserif;
  src: url('../fonts/IBMPlexSerif-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-BlackItalic.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-Italic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-MediumItalic.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-LightItalic.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-BoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-ExtraLight.otf') format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-ExtraLightItalic.otf') format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-SemiBoldItalic.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-SemiBold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gelica;
  src: url('../fonts/Gelica-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --kaus-action-blue: #547cbd;
  --black: #262a30;
  --white: white;
  --white-smoke: #f1f1f1;
  --medium-turquoise: #4ed6d2;
  --dodger-blue: #0b9eff;
  --grey: #858585;
  --light-grey: #d4d5d6;
  --purple-2: #eeefff;
  --kaus-dark-blue: #363c56;
  --light-cyan: #d7f7f6;
  --cornsilk: #fff7d7;
  --dark-slate-grey: #33383f;
  --honeydew: #def9de;
  --dark-slate-grey-2: #444b55;
  --royal-blue: #00568f;
  --kaus-green: #4accac;
  --kaus-neutral-1: #fcf7ed;
  --kaus-coral: #ff9598;
  --kaus-blue-neutral: #9ca3c0;
  --medium-slate-blue: #545dfc;
  --troupe-grey-1: #eff2f4;
  --e6eafc: var(--cornsilk);
  --c94a4a: var(--black);
}

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

.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;
}

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

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

a {
  color: var(--kaus-action-blue);
  text-decoration: underline;
}

.logo {
  justify-content: center;
  align-items: center;
  width: 100px;
  margin-bottom: 25px;
  display: flex;
}

.hero-container {
  max-width: 100%;
}

.h1 {
  color: var(--black);
  letter-spacing: -1px;
  font-family: Ibmplexserif, sans-serif;
  font-size: 12vh;
  line-height: 14vh;
}

.hero-div-block {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.h2 {
  color: var(--black);
  margin-top: 10px;
  font-family: Ibmplexserif, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 32px;
}

.h2.white {
  color: var(--white);
  text-align: center;
  padding-bottom: 20px;
  font-weight: 600;
}

.project-label {
  color: #878787;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Ibmplexsans, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.project-description {
  color: var(--black);
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.div-block-2 {
  background-color: #0dd840;
  border-radius: 100%;
  min-width: 15px;
  min-height: 15px;
  margin-left: 1px;
}

.status-div-block {
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  display: flex;
}

.hero-p {
  color: var(--black);
  margin-left: 9px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.location-status-div {
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 15px;
  display: flex;
}

.about-section {
  color: #313438;
  background-color: #1e2028;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
}

.about-p {
  color: var(--black);
  margin-top: 35px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 35px;
}

.about-div {
  border-radius: 15px;
  width: 85%;
  display: flex;
  box-shadow: 0 0 12px 1px #262a300d;
}

.menu-section {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 75px;
  display: flex;
  position: relative;
}

.menu-wrapper {
  z-index: 5;
  background-color: #fffffff2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0%;
}

.menu-item-text {
  z-index: 10;
  color: var(--black);
  text-transform: uppercase;
  font-family: Ibmplexsans, sans-serif;
  font-size: 9vh;
  font-weight: 700;
  line-height: 90px;
  position: relative;
}

.link-block {
  margin-top: 30px;
  margin-bottom: 30px;
  text-decoration: none;
}

.underline {
  background-image: linear-gradient(96deg, #0b9eff, var(--medium-turquoise));
  transform-origin: 0%;
  height: 15px;
  margin-top: -25px;
}

.menu-trigger {
  z-index: 15;
  cursor: pointer;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 7vh;
  height: 8vh;
  margin-top: 40px;
  margin-right: 40px;
  display: none;
  position: fixed;
  inset: 0% 0% auto auto;
}

.line {
  background-color: var(--black);
  border-radius: 15px;
  width: 100%;
  height: 5px;
  position: absolute;
}

.footer-section {
  background-color: #12141d;
  width: 100%;
  padding-top: 90px;
  padding-bottom: 40px;
}

.footer-container {
  max-width: 75%;
}

.footer-content-div {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 85px;
  display: flex;
}

.footer-p {
  color: var(--white);
  text-align: center;
  font-family: Ibmplexsans, sans-serif;
  font-size: 20px;
  font-weight: 200;
  line-height: 30px;
}

.contact-me-button {
  background-image: linear-gradient(120deg, var(--dodger-blue), var(--medium-turquoise));
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  margin-top: 20px;
  font-family: Ibmplexsans, sans-serif;
  font-weight: 700;
  display: flex;
}

.contact-me-button:hover {
  box-shadow: 0 0 9px 5px #202020;
}

.footer-links-div {
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  display: flex;
}

.location-div-block {
  align-items: center;
  display: flex;
}

.footer-copyright-p {
  color: var(--grey);
  font-family: Ibmplexsans, sans-serif;
  font-size: 14px;
  font-weight: 300;
}

.body {
  background-color: var(--white);
  background-image: none;
  background-size: auto;
  background-attachment: scroll;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.bio-div-block {
  background-color: var(--white);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 45px 60px;
  display: flex;
}

.social-and-email {
  border-bottom-right-radius: 15px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}

.social-link-block {
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.timeline-div-block {
  background-color: var(--white);
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85%;
  margin-top: 70px;
  padding-top: 90px;
  padding-bottom: 70px;
  display: flex;
  box-shadow: 0 0 12px 1px #262a300d;
}

.work-div-block {
  margin-right: 40px;
}

.education-div-block {
  margin-left: 40px;
}

.list-icon {
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
}

.list-text {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.grid-2 {
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: .25fr 1fr;
}

.vertical-line {
  background-color: var(--light-grey);
  width: 2px;
  height: 140px;
}

.vertical-line.last {
  background-color: #0000;
  background-image: linear-gradient(#d4d5d6, #0000);
}

.timeframe-div {
  border: 2px solid var(--medium-turquoise);
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 40px;
  margin-bottom: 20px;
  display: flex;
}

.timeline-icon {
  border: 2px solid var(--light-grey);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  padding: 5px;
  display: flex;
}

.timeframe-text {
  color: var(--black);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: Ibmplexsans, sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.list-title {
  color: var(--black);
  font-family: Ibmplexsans, sans-serif;
  font-size: 20px;
  line-height: 30px;
}

.about-div-headshot {
  background-color: var(--black);
  background-image: url('../images/EK-headshot_2024.jpg');
  background-position: 60%;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  flex-direction: column;
  justify-content: flex-end;
  width: 50%;
  display: flex;
}

.skills-wrapper {
  background-color: var(--white);
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85%;
  margin-top: 70px;
  padding: 70px 0 90px;
  display: flex;
  box-shadow: 0 0 12px 1px #262a300d;
}

.general-div-block, .design-div-block {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
}

.skills-div-text {
  border: 1px solid var(--grey);
  color: var(--grey);
  border-radius: 20px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 7px 12px;
  font-family: Ibmplexsans, sans-serif;
  font-weight: 300;
}

.skills-tag-wrapper {
  flex-flow: wrap;
  justify-content: center;
  margin-top: 30px;
  display: flex;
}

.skills-div-block {
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 35px;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

.skills-header {
  letter-spacing: -1px;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 50px;
  font-family: Ibmplexserif, sans-serif;
  font-size: 70px;
  line-height: 80px;
  display: flex;
}

.experience-div-block {
  justify-content: center;
  width: 100%;
  padding-top: 35px;
  display: flex;
}

.skills-title {
  font-family: Ibmplexserif, sans-serif;
  font-size: 25px;
  line-height: 35px;
}

.cs-hero-section {
  background-image: linear-gradient(153deg, #5e80c3, #c3a8f8);
  justify-content: center;
  display: flex;
}

.cs-hero-section.seamless {
  background-color: #c41313;
  background-image: none;
}

.cs-hero-section.miniq {
  background-color: #6724b4;
  background-image: none;
}

.cs-hero-section.troupe {
  background-color: var(--purple-2);
  background-image: none;
  padding-top: 70px;
  padding-bottom: 70px;
}

.cs-hero-section.clio {
  background-color: #0c4767;
  background-image: none;
  padding-top: 70px;
}

.cs-hero-section.drk-blue {
  background-color: #164180;
  background-image: none;
  padding-top: 80px;
}

.cs-hero-wrapper {
  align-items: center;
  width: 75%;
  display: flex;
}

.cs-hero-wrapper.seamless {
  width: 80%;
}

.cs-hero-wrapper.miniq {
  width: 90%;
}

.cs-hero-wrapper.plus-one {
  justify-content: center;
  position: relative;
}

.cs-hero-wrapper.clio {
  justify-content: center;
  align-items: flex-end;
  width: 80%;
  position: relative;
  bottom: -1px;
}

.cs-intro-section {
  background-color: #fcf7ed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 120px;
  display: flex;
}

.cs-intro-section.seamless {
  background-color: #f3f3f3;
}

.cs-intro-section.miniq {
  background-color: var(--white-smoke);
}

.cs-intro-section.troupe {
  background-color: var(--white);
}

.cs-intro-section.clio {
  background-color: #e9f5f8;
}

.cs-intro-section.light-purple {
  background-color: #e1f0fa;
}

.cs-overview-divblock {
  width: 75%;
}

.grid-3 {
  grid-column-gap: 51px;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1fr;
}

.cs-overview-right {
  border-left: 1px solid #000;
  padding-left: 50px;
}

.cs-small-header {
  color: var(--black);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-family: Ibmplexsans, sans-serif;
  font-weight: 700;
}

.overview-text-wrapper {
  margin-bottom: 40px;
  font-family: Ibmplexsans, sans-serif;
}

.dt-wrapper {
  justify-content: center;
  align-items: center;
  width: 65%;
  margin-top: 100px;
  display: flex;
}

.dt-icons-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dt-icons-grid {
  width: 100%;
  color: var(--black);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.research-section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 180px;
  padding-bottom: 180px;
  display: flex;
}

.research-section.mq {
  padding-bottom: 115px;
}

.research-section.seamless-2ndpart {
  padding-bottom: 100px;
}

.cs-header-wrapper {
  width: 75%;
  color: var(--black);
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.cs-content-wrapper {
  width: 75%;
  color: var(--black);
  margin-top: 50px;
  margin-bottom: 50px;
}

.cs-content-wrapper.seamless {
  margin-top: 0;
}

.cs-content-wrapper.miniq {
  flex-direction: column;
  display: flex;
}

.cs-content-wrapper.bookable {
  width: 100%;
  max-width: 1150px;
}

.r-goals-text {
  border-right: 1px solid var(--light-grey);
  padding-bottom: 15px;
  padding-right: 20px;
}

.r-goals-text.norule {
  border-right-style: none;
}

.r-goals-grid {
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: start;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 20px;
  font-family: Ibmplexsans, sans-serif;
  display: grid;
}

.cs-section-links {
  color: var(--kaus-dark-blue);
  text-transform: uppercase;
  align-items: center;
  font-family: Ibmplexsans, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}

.cs-section-links.seamless {
  color: var(--black);
}

.arrow-down-icon {
  margin-left: 10px;
}

.cs-h2 {
  color: var(--kaus-dark-blue);
  margin-top: 0;
  font-family: Ibmplexserif, sans-serif;
  font-size: 55px;
  font-weight: 600;
  line-height: 55px;
}

.cs-h2.seamless {
  color: var(--black);
}

.cs-h3 {
  color: var(--black);
  font-family: Ibmplexsans, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
}

.cs-h3.seamless, .cs-h3.mq {
  color: var(--black);
}

.r-full-image-wrapper {
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  display: flex;
}

.r-full-image-wrapper.no-shadow {
  box-shadow: none;
}

.cs-p {
  color: var(--black);
  margin-top: 15px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  line-height: 26px;
}

.cs-p.seamless-task, .cs-p.no-space {
  margin-top: 0;
}

.cs-p.centered {
  text-align: center;
}

.cs-p.red {
  color: #c94a4a;
}

.r-keyfindings-text {
  align-items: flex-start;
  padding-right: 25px;
  display: flex;
}

.r-quote-attribution {
  text-transform: uppercase;
  font-family: Ibmplexsans, sans-serif;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  top: 5px;
}

.define-section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.define-section.mq {
  padding-top: 180px;
}

.ideate-section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.ideate-section.troupe {
  background-color: #fff;
}

.ideate-section.bookable {
  padding-top: 70px;
  padding-bottom: 0;
}

.flowchart-grid {
  grid-column-gap: 61px;
  grid-template-rows: auto;
  margin-top: 50px;
}

.prototype-test-section {
  background-color: var(--white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.usability-content-wrapper {
  margin-top: 30px;
}

.usability-content-wrapper.miniq {
  padding-bottom: 70px;
}

.usability-content-wrapper.seamless {
  margin-bottom: 35px;
}

.miniq-usability-grid {
  grid-column-gap: 74px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
}

.big-quote-wrapper {
  border-top: 2px solid var(--light-grey);
  border-bottom: 2px solid var(--light-grey);
  width: 75%;
  color: var(--kaus-dark-blue);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  padding-top: 100px;
  padding-bottom: 100px;
  font-family: Ibmplexserif, sans-serif;
  display: flex;
}

.big-quote-wrapper.seamless {
  color: var(--black);
  text-align: center;
  border-top-style: none;
  border-bottom-style: none;
  flex-direction: column;
  margin-top: 0;
  padding-left: 120px;
  padding-right: 120px;
}

.test-revision-div {
  border-radius: 15px;
}

.test-revision-grid {
  grid-column-gap: 49px;
  grid-template-rows: auto;
  justify-items: center;
  margin-top: 30px;
  margin-bottom: 80px;
}

.heading-2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
}

.heading-2.seamless {
  color: var(--white);
  font-family: Ibmplexsans, sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 45px;
}

.test-revision-text {
  margin-bottom: 25px;
}

.cs-overview-title {
  width: 75%;
  margin-bottom: 50px;
  font-family: Ibmplexserif, sans-serif;
}

.cs-overview-title-text {
  font-size: 50px;
}

.cs-overview-title-text.seamless {
  color: var(--black);
}

.user-interview-content {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 40px;
  display: flex;
}

.reflection-section {
  background-color: #f1f1f1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 160px;
  padding-bottom: 160px;
  display: flex;
}

.reflection-section.miniq {
  background-color: var(--white);
}

.reflection-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  margin-bottom: 50px;
  display: flex;
}

.next-project-wraooer {
  flex-wrap: wrap;
  justify-content: center;
  width: 50%;
  margin-top: 100px;
  display: flex;
}

.more-project-thumbnail {
  background-color: var(--medium-turquoise);
  align-items: center;
  display: flex;
}

.more-project-thumbnail.seamless {
  background-color: #c41313;
}

.more-project-thumbnail.miniq {
  background-color: #6724b4;
}

.more-projects-grid {
  grid-column-gap: 29px;
  grid-template-rows: auto;
  width: 100%;
  margin-top: 20px;
}

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

.competition-grid {
  grid-column-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.competition-content-div {
  border-right: 1px solid var(--light-grey);
}

.competition-content-div.noline.seamless {
  padding-right: 21px;
}

.competition-content-div.no-line {
  border-right-style: none;
}

.competition-text {
  margin-top: 25px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

.strengths-green {
  color: #2dcd92;
}

.weaknesses-red {
  color: #ff5050;
}

.number {
  margin-bottom: 20px;
  padding-top: 10px;
  font-family: Ibmplexserif, sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 40px;
}

.cs-header-text {
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.cs-header-rule {
  background-image: linear-gradient(164deg, #5e80c3, #c3a8f8);
  width: 100%;
  height: 10px;
  margin-bottom: 15px;
}

.cs-header-rule.seamless-red {
  background-color: #c41313;
  background-image: none;
}

.cs-header-rule.rainbow-1 {
  background-image: linear-gradient(96deg, #9b63db, #f2499e);
}

.cs-header-rule.rainbow-2 {
  background-image: linear-gradient(164deg, #ff816c, #fb2);
}

.cs-header-rule.rainbow-3 {
  background-image: linear-gradient(164deg, #0ec6ac, #3a63b5);
}

.secondary-button {
  border: 2px solid var(--black);
  color: var(--black);
  background-color: #0000;
  border-radius: 10px;
  margin-top: 25px;
  font-family: Ibmplexsans, sans-serif;
}

.secondary-button.kaus {
  margin-top: 0;
}

.s-taskflow-image {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.s-lowfi-wireframe-wrapper {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  margin-top: 40px;
  display: flex;
}

.s-lowfi-frame-image {
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  margin-left: 12px;
  margin-right: 12px;
}

.s-lowfi-frame-image.miniq {
  width: 48%;
}

.s-low-fi-image {
  border-radius: 10px;
}

.seamless-quote-section {
  background-color: #2a8283;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 90px;
  display: flex;
}

.quote-attribution {
  color: var(--white);
  margin-top: 35px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 300;
}

.s-goals-grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 30px;
}

.mq-research-stats {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
}

.mq-quote-section {
  background-color: #ede1ff;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}

.mq-quote-div {
  color: #2e055c;
  text-align: center;
  flex-direction: column;
  align-items: center;
  width: 50%;
  font-family: Ibmplexsans, sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 45px;
  display: flex;
}

.mq-problem-pillars-wrapper {
  margin-top: 40px;
}

.grid-10 {
  grid-column-gap: 35px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.h4 {
  color: #6724b4;
  font-family: Ibmplexsans, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.mq-small-title {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
}

.mq-short-rule {
  background-color: #2e055c;
  width: 10%;
  height: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.mq-research-summary-button {
  justify-content: center;
  margin-top: 40px;
  display: flex;
}

.miniq-storyboard-wrapper {
  margin-top: 40px;
}

.miniq-prototype-div {
  justify-content: center;
  align-items: center;
  display: flex;
}

.miniq-mockup {
  height: 600px;
}

.miniq-combined {
  width: 48%;
}

.miniq-lowfi-comparison {
  justify-content: space-between;
  margin-top: 30px;
  display: flex;
}

.miniq-comparison-text {
  color: #3a63b5;
  margin-bottom: 5px;
  font-family: Ibmplexsans, sans-serif;
  font-weight: 700;
}

.miniq-combined-div-imgs {
  justify-content: space-between;
  display: flex;
}

.miniq-combined-rule {
  background-color: #3a63b5;
  height: 5px;
  margin-bottom: 30px;
}

.miniq-quote-wrapper {
  width: 75%;
}

.miniq-tester-quote {
  width: 45%;
}

.miniq-quote-div {
  justify-content: space-between;
  margin-top: 35px;
  display: flex;
}

.miniq-sitemap-wrapper {
  margin-bottom: 30px;
}

.seamless-usability-grid {
  grid-column-gap: 36px;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
}

.seamless-task-wrapper {
  flex-direction: column;
  margin-top: 50px;
  display: flex;
}

.seamless-task-div {
  width: 60%;
}

.seamless-task-text-wrapper {
  justify-content: space-between;
  margin-top: 35px;
  display: flex;
}

.seamless-task-stats {
  flex-direction: column;
  align-items: center;
  width: 30%;
  display: flex;
}

.seamless-task-completion {
  color: #c41313;
  font-family: Ibmplexserif, sans-serif;
  font-size: 80px;
  font-weight: 700;
  line-height: 80px;
}

.seamless-task-completion-header {
  color: var(--black);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.seamless-rule {
  background-color: var(--light-grey);
  height: 2px;
  margin-top: 35px;
}

.miniq-hifi-wireframes {
  background-color: var(--white-smoke);
  margin-top: 35px;
}

.miniq-storyboard-div {
  display: flex;
}

.miniq-lightbox {
  width: 100%;
}

.miniq-individual-storyboard {
  flex-direction: column;
  align-items: center;
  width: 33%;
  display: flex;
}

.miniq-storyboard-p {
  text-align: center;
  font-family: Ibmplexsans, sans-serif;
}

.secondary-button-wrapper {
  display: flex;
}

.secondary-button-div {
  margin-top: 10px;
  margin-right: 25px;
}

.miniq-task-flow {
  border: 2px solid var(--light-grey);
  width: 30%;
  margin-right: 25px;
  padding: 10px;
}

.miniq-taskflow-wrapper {
  margin-top: 35px;
  display: flex;
}

.seamless-task-flow-p {
  margin-top: 15px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.revisions-wrapper {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.revisions-text {
  width: 45%;
}

.revisions-image {
  flex-direction: column;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.revisions-image-wrapper {
  justify-content: flex-end;
  width: 50%;
  display: flex;
}

.miniq-screen {
  border: 1px solid var(--light-grey);
}

.revisions-img-label {
  margin-top: 10px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.seamless-rule2 {
  background-color: var(--light-grey);
  height: 2px;
  margin-top: 15px;
  margin-bottom: 20px;
}

.usability-div-img {
  align-items: center;
}

.seamless-empathymap {
  margin-top: 35px;
}

.kaus-flow-label {
  text-align: center;
  margin-top: 15px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.kaus-rule {
  background-color: var(--light-grey);
  height: 2px;
  margin-top: 70px;
  margin-bottom: 50px;
}

.kaus-affinitymap-label {
  text-align: center;
  margin-top: 15px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.kaus-affinitymap {
  border: 1px solid var(--light-grey);
}

.miniq-fullimage-wrapper {
  margin-top: 40px;
}

.miniq-branding-wrapper {
  margin-top: 45px;
  display: flex;
}

.miniq-logo {
  justify-content: center;
  align-items: center;
  width: 40%;
  display: flex;
}

.miniq-branding-text {
  width: 60%;
  padding-right: 28px;
}

.space {
  height: 80px;
}

.miniq-rule {
  background-color: var(--light-grey);
  height: 2px;
  margin-top: 25px;
}

.kaus-design-wrapper {
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  display: flex;
}

.kaus-logo-wrapper {
  width: 25%;
}

.kaus-design-p {
  width: 65%;
}

.space-20px {
  display: none;
}

.kaus-flow-wrapper {
  border: 1px solid var(--light-grey);
  margin-top: 30px;
}

.kaus-quote {
  font-size: 40px;
  line-height: 50px;
}

.kaus-key-findings-wrapper {
  margin-top: 35px;
}

.kaus-quote-attribution {
  margin-top: 30px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.kaus-lowfi-wrapper {
  align-items: center;
  margin-top: 40px;
  display: flex;
}

.kaus-lowfi-text {
  width: 30%;
}

.kaus-lowfi-frames {
  justify-content: flex-end;
  width: 70%;
  display: flex;
}

.lofi-frame-image {
  padding: 10px;
}

.cs-large-header {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
}

.cs-p2 {
  font-family: Ibmplexsans, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 35px;
}

.back-arrow-wrapper {
  width: 70px;
  margin-top: 40px;
  margin-left: 40px;
  position: fixed;
  inset: 0% auto auto 0%;
}

.link-block-2 {
  align-items: center;
  width: 60px;
  display: flex;
}

.lightbox-link {
  border: 1px solid var(--light-grey);
}

.kaus-lofi-small-header {
  font-size: 20px;
}

.time-constraint {
  width: 60%;
  margin-top: 150px;
}

.seamless-link-block {
  background-image: url('../images/seamless-screen.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 250px;
  text-decoration: none;
}

.project-text-wrapper {
  text-align: center;
  background-color: #262a30bf;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Ibmplexsans, sans-serif;
  text-decoration: none;
  display: flex;
}

.projects-thumb-header {
  color: var(--white);
  text-align: center;
  letter-spacing: 2px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 25px;
}

.projects-thumb-text {
  color: var(--white);
  letter-spacing: 1px;
  margin-top: 5px;
  font-weight: 300;
}

.kaus-link-block {
  background-image: url('../images/Kaus-placeholder.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 250px;
  text-decoration: none;
}

.kaus-text-wrapper {
  background-color: #262a30bf;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  display: flex;
}

.navbar-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 85px;
  padding-top: 70px;
  display: flex;
}

.navlink {
  height: 50px;
  color: var(--black);
  letter-spacing: 2px;
  text-transform: uppercase;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.navlink:hover, .navlink.w--current:hover {
  color: var(--dodger-blue);
}

.navlink-container {
  justify-content: center;
  align-items: center;
  width: 90%;
  display: flex;
}

.miniq-link-block {
  background-image: url('../images/miniQ-header-V2.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 250px;
  text-decoration: none;
}

.space-30px {
  width: 100%;
  height: 30px;
}

.body-2 {
  background-color: var(--white-smoke);
}

.about-p2 {
  margin-top: 25px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
}

.about-pic1 {
  width: 45%;
  margin-top: 10px;
}

.about-me-container {
  justify-content: space-between;
  align-items: flex-start;
  width: 90%;
  display: flex;
}

.about-page-p {
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 35px;
}

.about-me-pic {
  border-radius: 10px;
}

.about-talents-wrapper {
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 55%;
  display: flex;
}

.about-me-talents {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 15px;
  display: flex;
}

.aboutme-facts-wrapper {
  border-left: 1px solid var(--light-grey);
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 35%;
  padding-left: 30px;
  display: flex;
}

.facts-columns-container {
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 35px;
  display: flex;
}

.aboutme-section {
  background-color: var(--white-smoke);
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 150px;
  display: flex;
}

.about-me-div {
  background-color: var(--white);
  border-radius: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85%;
  margin-top: 40px;
  padding-top: 70px;
  padding-bottom: 70px;
  display: flex;
  box-shadow: 0 0 12px 1px #262a300d;
}

.facts-column {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
}

.facts-p {
  margin-left: 25px;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.facts-image {
  background-image: none;
  width: 20%;
}

.talents-p {
  width: 80%;
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.talents-p.coding, .talent-header {
  width: 100%;
}

.about-headers {
  margin-top: 0;
  font-family: Ibmplexserif, sans-serif;
  font-size: 30px;
  line-height: 50px;
}

.emoji-image {
  flex-direction: column;
  align-items: center;
  width: 13%;
  display: flex;
}

.talents-div {
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 25px;
  display: flex;
}

.about-me-div2 {
  justify-content: space-between;
  width: 90%;
  margin-top: 90px;
  display: flex;
}

.about-me-text {
  width: 50%;
}

.coding-text {
  width: 80%;
}

.shrug-image {
  width: 8%;
  margin-top: 9px;
}

.nav-links-div {
  margin-bottom: 120px;
  display: flex;
}

.navlink-container-v2 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85%;
  display: flex;
}

.header-h3 {
  color: #9c9c9c;
  width: 80%;
  font-family: Ibmplexsans, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
}

.status-link {
  color: var(--dodger-blue);
}

.projects {
  width: 100%;
  padding-bottom: 132px;
}

.grid-projects-wrapper {
  max-width: 85%;
  margin-top: 40px;
}

.grid-11 {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
}

.grid-project {
  background-color: #e4f5e1;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.55, .055, .675, .19);
  display: flex;
}

.grid-project:hover {
  transform: translate(0, -10px);
  box-shadow: 0 4px 20px -1px #0000000d;
}

.grid-project.turquoise {
  background-color: #e2f5f4;
  text-decoration: none;
}

.grid-project.purple {
  background-color: #e6eafc;
}

.grid-project.yellow {
  background-color: #fff7d7;
}

.seamless-image {
  width: 100%;
  margin-top: 70px;
}

.project-content {
  width: 100%;
}

.kaus-img {
  position: relative;
  bottom: -50px;
  box-shadow: 0 -6px 20px 4px #0000000d;
}

.grid-project_2-col {
  background-color: #e1f0fa;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.55, .055, .675, .19);
  display: flex;
  transform: translate(0);
}

.grid-project_2-col:hover {
  transform: translate(0, -10px);
  box-shadow: 0 4px 20px -1px #0000000d;
}

.miniq-img {
  max-width: 55%;
}

.project-content_2-col {
  width: 40%;
}

.plus-one-img {
  max-width: 97%;
  margin-top: 30px;
}

.troupe-hypothesis-section {
  background-color: #e1f0fa;
  justify-content: center;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 90px;
  display: flex;
}

.hypothesis {
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
  display: flex;
}

.cs-p-large {
  color: var(--black);
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
}

.adding-plus-ones-flow {
  border: 1px solid var(--light-grey);
  border-radius: 20px;
  width: 100%;
  margin-top: 40px;
  padding: 25px;
}

.managing-and-adding-plus-ones {
  border: 1px solid var(--light-grey);
  border-radius: 20px;
  padding: 25px;
}

.plus-ones-flow-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  margin-top: 32px;
}

.task-flow-image {
  border-radius: 10px;
}

.plus-one-v1-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  grid-template-columns: .75fr .75fr;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 65px;
}

.plus-one-v1-img-wrapper {
  justify-content: center;
  padding-right: 0;
  display: flex;
}

.plus-one-v1-img {
  margin-right: 25px;
}

.plus-one-v1-content {
  flex-direction: column;
  display: flex;
}

.po-final-images-wrapper {
  justify-content: center;
  width: 100%;
  margin-top: 40px;
  display: flex;
}

.clio-img {
  position: relative;
  top: 50px;
  box-shadow: 0 -6px 20px 4px #0000000d;
}

.clio-h1 {
  text-align: center;
  font-family: Ibmplexsans, sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
}

.clio-h2 {
  text-align: center;
  font-family: Ibmplexsans, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.clio-h2.left-align {
  text-align: left;
  font-family: Ibmplexsans, sans-serif;
  font-weight: 600;
}

.clio-h2.rubik {
  font-family: Rubik, sans-serif;
  font-weight: 500;
}

.clio-h2.gelica-h1 {
  font-family: Gelica, sans-serif;
  font-size: 48px;
  line-height: 56px;
}

.clio-h2.gelica-h2 {
  font-family: Gelica, sans-serif;
}

.brand-values-chart {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  display: flex;
}

.circle {
  width: 250px;
  height: 250px;
  color: var(--white);
  background-color: #219ebc;
  border-radius: 300px;
  justify-content: center;
  align-items: center;
  font-family: Ibmplexsans, sans-serif;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

._2-col-equal-grid {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
  margin-top: 20px;
}

.explorations-section {
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 100px;
  display: flex;
}

.explorations-section.light-grey {
  background-color: #f1f1f1;
}

.swatch {
  background-color: #ffd8d8;
  justify-content: center;
  align-items: center;
  width: 125px;
  height: 125px;
  display: flex;
}

.swatch.blue {
  background-color: #0c4767;
}

.swatch.sky {
  background-color: #219ebc;
}

.swatch.yellow {
  background-color: #f3ca40;
}

.swatch.mint {
  background-color: #bad4aa;
}

.swatch.light-grey {
  background-color: #cdcbcd;
}

.color-palette-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  margin-top: 25px;
  display: flex;
}

.grid-copy {
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.clio-typfaces {
  background-color: #fff;
  padding: 10px;
  display: flex;
}

.type {
  flex-direction: column;
  align-items: center;
  width: 50%;
  display: flex;
}

.clio-body-copy {
  font-family: Ibmplexsans, sans-serif;
  font-size: 16px;
  line-height: 22px;
}

.clio-body-copy.rubik-regular {
  font-family: Rubik, sans-serif;
  font-weight: 400;
}

.clio-hero-img {
  box-shadow: 0 -4px 20px -20px #0000000d;
}

.brand-values-finalists {
  margin-top: 40px;
}

.line-sm {
  background-color: #e2e2e2;
  width: 50%;
  height: 2px;
  margin: 20px;
}

.clio-desktop-image {
  box-shadow: 0 2px 20px 3px #00000008;
}

.brand-values-slider {
  width: 100%;
}

.plus-one-gif-wrapper {
  justify-content: center;
  margin-top: 70px;
  display: flex;
}

.plus-one-gif {
  max-width: 40%;
}

.troupe-link-block {
  background-color: #545dcf;
  background-image: url('../images/PO_v2-group.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 225px;
  height: 250px;
  text-decoration: none;
}

.troupe-text-wrapper {
  background-color: #262a30bf;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
  text-decoration: none;
  display: flex;
}

.pain-points-grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 25px;
}

.pain-point {
  background-color: #fff1f1;
  border: 1px solid #c94a4a;
  border-radius: 10px;
  padding: 5px 20px 20px;
}

.miro-board-pain-points {
  margin-top: 30px;
}

.cost-value-grid {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
  margin-top: 80px;
  margin-bottom: 80px;
}

.assumption-and-mscw-grid {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
}

.image-15, .image-16 {
  border-radius: 10px;
}

.space-50px {
  width: 100%;
  height: 50px;
}

.troupe-stays-img {
  max-width: 50%;
  box-shadow: 0 6px 20px 4px #0000000d;
}

.bookable-user-flow-wrapper {
  margin-top: 80px;
}

.bookable-hero-image {
  max-width: 80%;
}

.bookable-lofi-wrapper {
  margin-top: 80px;
}

.image-17 {
  border-radius: 10px;
}

.bookable-optimizations-section {
  background-color: #f1f1f1;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
}

.bookable-optimizations-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  width: 100%;
  margin-top: 25px;
}

.bookable-optimizations-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 85%;
  margin-top: 100px;
  display: flex;
}

.bookable-optimizations-block {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.bookable-optimizations {
  flex-direction: column;
  align-items: center;
  max-width: 1150px;
  display: flex;
}

.bookable-final-designs {
  margin-bottom: 80px;
}

.miro-board-journey {
  margin-top: 40px;
}

.troupe-bookable-link-block {
  background-color: #164180;
  background-image: url('../images/SERP.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 220px;
  height: 250px;
  text-decoration: none;
}

.troupe-bookable-link-block.w--current {
  background-color: #164180;
  background-image: url('../images/SERP.png');
  background-position: 50%;
  background-size: 220px;
}

.troupe-bookable-text-wrapper {
  background-color: #262a30bf;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
  text-decoration: none;
  display: flex;
}

.link {
  display: none;
}

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

@media screen and (max-width: 991px) {
  .hero-container {
    max-width: 80%;
  }

  .h1 {
    font-size: 11vh;
    line-height: 12vh;
  }

  .project-image {
    order: 1;
  }

  .status-div-block {
    margin-top: 20px;
    margin-left: 0;
  }

  .location-status-div {
    flex-direction: column;
  }

  .about-section {
    padding-top: 45px;
  }

  .about-p {
    margin-top: 15px;
  }

  .about-div {
    border-radius: 0;
    flex-direction: column;
    width: 90%;
  }

  .menu-section {
    height: 100vh;
  }

  .menu-trigger {
    height: 6vh;
  }

  .bio-div-block {
    border-top-left-radius: 0;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    order: 1;
    width: 100%;
    margin-left: 0;
  }

  .social-and-email {
    border-radius: 0;
    margin-top: 0;
  }

  .timeline-div-block {
    width: 90%;
    padding-left: 30px;
    padding-right: 30px;
  }

  .work-div-block {
    margin-right: 20px;
  }

  .education-div-block {
    margin-left: 20px;
  }

  .about-div-headshot {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 0;
    width: 100%;
    height: 700px;
  }

  .skills-wrapper, .cs-hero-wrapper.seamless {
    width: 90%;
  }

  .dt-wrapper {
    width: 75%;
  }

  .cs-content-wrapper.bookable {
    width: 80%;
  }

  .r-goals-text {
    border-right-style: none;
    width: 100%;
  }

  .r-goals-grid {
    flex-direction: column;
    margin-bottom: 20px;
    display: flex;
  }

  .cs-h2 {
    font-size: 35px;
  }

  .r-keyfindings-text {
    border-right-style: none;
  }

  .flowchart-grid {
    grid-column-gap: 31px;
  }

  .miniq-usability-grid {
    flex-wrap: wrap;
    display: flex;
  }

  .usability-div.miniq {
    width: 100%;
  }

  .usability-div.affinitymap {
    margin-top: 40px;
  }

  .big-quote-wrapper.seamless {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .user-interview-content {
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 0;
  }

  .user-interview-text {
    width: 100%;
  }

  .reflection-wrapper {
    width: 75%;
  }

  .next-project-wraooer {
    width: 80%;
  }

  .competition-grid {
    flex-wrap: wrap;
    display: flex;
  }

  .competition-content-div {
    width: 45%;
    margin-bottom: 35px;
  }

  .competition-content-div.noline, .competition-content-div.no-line {
    border-right-style: none;
  }

  .s-lowfi-frame-image {
    margin-left: 5px;
    margin-right: 5px;
  }

  .seamless-quote-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .mq-quote-div {
    width: 60%;
  }

  .miniq-prototype-div {
    width: 100%;
  }

  .miniq-mockup {
    margin-top: 40px;
  }

  .revisions-wrapper {
    flex-direction: column;
  }

  .revisions-text {
    width: 100%;
  }

  .revisions-image-wrapper {
    width: 100%;
    margin-top: 40px;
  }

  .miniq-branding-wrapper {
    flex-direction: column;
  }

  .miniq-logo {
    width: 100%;
  }

  .miniq-branding-text {
    width: 100%;
    margin-top: 25px;
    padding-right: 0;
  }

  .kaus-lowfi-wrapper {
    flex-direction: column;
  }

  .kaus-lowfi-text {
    width: 100%;
  }

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

  .seamless-link-block, .kaus-link-block {
    height: 250px;
  }

  .navbar-wrapper {
    margin-bottom: 40px;
  }

  .about-pic1 {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .about-me-container {
    flex-direction: column;
    width: 80%;
  }

  .about-talents-wrapper {
    width: 100%;
  }

  .aboutme-facts-wrapper {
    border-top: 1px solid var(--light-grey);
    border-left-style: none;
    width: 100%;
    margin-top: 70px;
    padding-top: 55px;
    padding-left: 0;
  }

  .facts-columns-container {
    flex-flow: column wrap;
    justify-content: space-between;
    margin-top: 0;
  }

  .aboutme-section {
    padding-top: 10px;
  }

  .about-me-div {
    flex-direction: column;
  }

  .facts-column {
    width: 100%;
    margin-top: 5px;
  }

  .facts-image {
    width: 15%;
  }

  .about-me-div2 {
    flex-direction: column;
    align-items: center;
    width: 80%;
  }

  .about-me-text {
    width: 100%;
    margin-top: 60px;
  }

  .nav-links-div {
    margin-bottom: 95px;
  }

  .header-h3 {
    width: 100%;
  }

  .grid-projects-wrapper {
    margin-top: 32px;
  }

  .grid-11 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .grid-project {
    padding: 30px;
  }

  .kaus-img {
    bottom: -30px;
  }

  .grid-project_2-col {
    padding: 30px;
  }

  .hypothesis {
    width: 75%;
  }

  .clio-img {
    top: 30px;
  }

  .circle {
    width: 175px;
    height: 175px;
  }

  .explorations-section, .explorations-section.light-grey {
    padding-top: 0;
  }

  .plus-one-gif {
    max-width: 60%;
  }

  .pain-points-grid {
    flex-direction: column;
    display: flex;
  }

  .assumption-and-mscw-grid {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .bookable-hero-image {
    max-width: 90%;
  }

  .bookable-optimizations-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .bookable-optimizations-wrapper {
    width: 100%;
  }

  .bookable-optimizations {
    width: 75%;
  }
}

@media screen and (max-width: 767px) {
  .logo {
    margin-bottom: 20px;
  }

  .h1 {
    font-size: 8vh;
    line-height: 8vh;
  }

  .status-div-block {
    text-align: left;
  }

  .about-p {
    font-size: 18px;
    line-height: 32px;
  }

  .menu-section {
    height: 80vh;
  }

  .menu-item-text {
    font-size: 7vh;
    line-height: 9vh;
  }

  .link-block {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .underline {
    height: 12px;
    margin-top: -20px;
  }

  .footer-container {
    max-width: 80%;
  }

  .bio-div-block {
    padding: 20px 30px 30px;
  }

  .timeline-div-block {
    flex-direction: column;
    align-items: center;
    margin-top: 35px;
    padding-left: 0;
    padding-right: 0;
  }

  .work-div-block {
    margin-right: 0;
  }

  .education-div-block {
    margin-top: 80px;
    margin-left: 0;
  }

  .skills-wrapper {
    margin-top: 35px;
  }

  .general-div-block {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .design-div-block {
    width: 100%;
    margin-top: 40px;
    margin-left: 0;
    margin-right: 0;
  }

  .skills-tag-wrapper {
    margin-top: 15px;
  }

  .skills-div-block {
    flex-direction: column;
    padding-top: 0;
  }

  .skills-header {
    font-size: 50px;
  }

  .experience-div-block {
    flex-direction: column;
    align-items: center;
  }

  .cs-hero-wrapper.seamless {
    width: 100%;
  }

  .cs-intro-section {
    padding-bottom: 0;
  }

  .cs-intro-section.troupe {
    padding-top: 50px;
  }

  .cs-overview-divblock {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  .grid-3 {
    flex-direction: column;
    display: flex;
  }

  .cs-overview-right {
    border-left-style: none;
    padding-left: 0;
  }

  .dt-icons-grid {
    display: none;
  }

  .research-section {
    padding-bottom: 25px;
  }

  .research-section.mq {
    padding-top: 115px;
  }

  .research-section.seamless {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .research-section.seamless-2ndpart {
    padding-top: 100px;
    padding-bottom: 0;
  }

  .cs-header-wrapper {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 15px;
  }

  .cs-content-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 48px;
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .r-goals-text {
    border-right-style: none;
    width: 100%;
  }

  .r-goals-text.norule {
    border-bottom-style: none;
  }

  .r-goals-grid {
    flex-direction: column;
    display: flex;
  }

  .cs-h2 {
    font-size: 43px;
  }

  .define-section {
    padding-bottom: 25px;
  }

  .define-section.mq {
    padding-top: 115px;
  }

  .ideate-section {
    padding-bottom: 25px;
  }

  .ideate-section.troupe {
    padding-top: 20px;
    padding-bottom: 100px;
  }

  .ideate-section.bookable {
    padding-top: 0;
  }

  .flowchart-grid.seamless {
    flex-direction: column;
    margin-top: 0;
    display: flex;
  }

  .usability-div {
    margin-bottom: 30px;
  }

  .big-quote-wrapper {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .big-quote-wrapper.seamless {
    width: 100%;
    padding-top: 80px;
    padding-left: 56px;
    padding-right: 56px;
  }

  .test-revision-grid {
    flex-direction: column;
    display: flex;
  }

  .reflection-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .reflection-wrapper {
    width: 80%;
  }

  .competition-content-div.noline {
    width: 45%;
  }

  .cs-header-text {
    flex-wrap: wrap;
  }

  .s_task-flow-div {
    margin-top: 40px;
  }

  .s-lowfi-wireframe-wrapper {
    flex-flow: wrap;
    justify-content: center;
    display: flex;
  }

  .s-lowfi-frame-image {
    width: 45%;
    margin-top: 25px;
    margin-left: 0;
    margin-right: 15px;
  }

  .seamless-quote-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .s-goals-grid, .grid-10 {
    flex-direction: column;
    display: flex;
  }

  .miniq-mockup {
    height: 450px;
    margin-top: 0;
  }

  .miniq-combined {
    width: 100%;
    margin-top: 35px;
  }

  .miniq-lowfi-comparison {
    flex-direction: column;
  }

  .miniq-tester-quote {
    width: 100%;
    margin-top: 25px;
  }

  .miniq-quote-div {
    flex-direction: column;
    margin-top: 0;
  }

  .seamless-usability-grid {
    flex-direction: column;
    display: flex;
  }

  .seamless-task-div {
    width: 100%;
  }

  .seamless-task-text-wrapper {
    flex-direction: column;
  }

  .seamless-task-stats {
    align-items: flex-start;
    width: 100%;
    margin-top: 30px;
  }

  .miniq-task-flow {
    width: 100%;
    margin-bottom: 40px;
  }

  .miniq-taskflow-wrapper, .revisions-wrapper {
    flex-direction: column;
  }

  .revisions-text {
    width: 100%;
  }

  .revisions-image-wrapper {
    width: 100%;
    margin-top: 35px;
  }

  .usability-div-img {
    justify-content: center;
    margin-bottom: 35px;
    display: flex;
  }

  .kaus-design-wrapper {
    flex-direction: column;
  }

  .kaus-logo-wrapper {
    width: 80%;
  }

  .kaus-design-p {
    width: 100%;
    margin-top: 35px;
  }

  .kaus-quote {
    text-align: center;
  }

  .time-constraint {
    width: 75%;
    margin-top: 60px;
  }

  .projects-thumb-header {
    font-size: 20px;
    line-height: 25px;
  }

  .navbar-wrapper {
    margin-bottom: 70px;
  }

  .navlink-container {
    justify-content: center;
  }

  .aboutme-section {
    padding-top: 0;
  }

  .about-me-div {
    margin-top: 0;
    padding-top: 40px;
  }

  .about-headers {
    line-height: 33px;
  }

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

  .kaus-img {
    bottom: -29px;
  }

  .grid-project_2-col {
    flex-direction: column;
    padding: 30px;
  }

  .miniq-img {
    max-width: 100%;
  }

  .project-content_2-col {
    width: 100%;
  }

  .plus-one-img {
    max-width: 100%;
    margin-top: 25px;
  }

  .hypothesis {
    width: 75%;
  }

  .clio-img {
    top: 30px;
  }

  .clio-h1 {
    font-size: 32px;
    line-height: 48px;
  }

  .circle {
    width: 125px;
    height: 125px;
    font-size: 16px;
  }

  ._2-col-equal-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .swatch {
    width: 85px;
    height: 85px;
  }

  .plus-one-gif {
    max-width: 80%;
  }

  .pain-points-grid {
    margin-top: 0;
  }

  .cost-value-grid {
    flex-direction: column;
    margin-bottom: 80px;
    display: flex;
  }

  .assumption-and-mscw-grid {
    flex-direction: column;
    margin-top: 0;
    display: flex;
  }

  .assumption-and-mscw-div {
    margin-top: 40px;
  }

  .troupe-stays-img {
    max-width: 100%;
    margin-top: 25px;
  }

  .bookable-user-flow-wrapper {
    margin-top: 30px;
  }

  .bookable-hero-image {
    max-width: 100%;
  }

  .bookable-lofi-wrapper {
    margin-top: 30px;
  }

  .miro-board-journey {
    margin-top: 0;
  }
}

@media screen and (max-width: 479px) {
  .logo {
    display: flex;
  }

  .hero-container {
    max-width: 85%;
  }

  .h1 {
    line-height: 8vh;
  }

  .h2 {
    line-height: 35px;
  }

  .location-status-div {
    align-items: flex-start;
    display: none;
  }

  .about-section {
    background-color: var(--white-smoke);
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
  }

  .about-div {
    width: 100%;
    box-shadow: none;
    background-color: #0000;
  }

  .menu-section {
    height: 80vh;
    margin-bottom: 0;
  }

  .menu-item-text {
    font-size: 4vh;
    line-height: 8vh;
  }

  .link-block {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .underline {
    height: 9px;
    margin-top: -23px;
  }

  .menu-trigger {
    width: 6vh;
    height: 4vh;
    margin-right: 25px;
  }

  .footer-copyright-p {
    text-align: center;
  }

  .bio-div-block {
    background-color: #0000;
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .timeline-div-block {
    width: 100%;
    box-shadow: none;
    background-color: #0000;
    margin-top: 0;
    padding: 0;
  }

  .education-div-block {
    margin-top: 30px;
  }

  .timeframe-div {
    width: 80%;
  }

  .about-div-headshot {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .skills-wrapper {
    width: 100%;
    box-shadow: none;
    background-color: #0000;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .design-div-block {
    margin-top: 30px;
  }

  .skills-div-text {
    border-width: 1px;
    border-color: var(--grey);
  }

  .skills-tag-wrapper {
    margin-top: 20px;
  }

  .skills-div-block {
    padding-top: 0;
  }

  .skills-header {
    background-image: none;
    margin-bottom: 30px;
    font-size: 40px;
  }

  .experience-div-block {
    width: 90%;
    padding-top: 30px;
  }

  .cs-intro-section.clio {
    padding-top: 50px;
  }

  .cs-content-wrapper.bookable {
    margin-bottom: 0;
  }

  .cs-h2 {
    line-height: 45px;
  }

  .flowchart-wrapper {
    margin-top: 35px;
  }

  .flowchart-grid {
    flex-direction: column;
    margin-top: 15px;
    display: flex;
  }

  .big-quote-wrapper.seamless {
    width: 100%;
    padding-top: 70px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .more-project-thumbnail {
    margin-top: 20px;
  }

  .more-projects-grid {
    flex-direction: column;
    display: flex;
  }

  .competition-content-div, .competition-content-div.noline, .competition-content-div.no-line {
    width: 100%;
  }

  .competition-text {
    font-size: 14px;
    line-height: 21px;
  }

  .secondary-button.kaus {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .s-lowfi-wireframe-wrapper {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }

  .s-lowfi-frame-image {
    width: 40%;
  }

  .seamless-quote-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .mq-research-stats {
    flex-wrap: wrap;
    display: flex;
  }

  .mq-short-rule {
    width: 15%;
  }

  .miniq-storyboard-div {
    flex-direction: column;
  }

  .miniq-individual-storyboard {
    width: 100%;
  }

  .secondary-button-wrapper {
    flex-direction: column;
  }

  .secondary-button-div {
    margin-right: 0;
  }

  .miniq-task-flow {
    margin-bottom: 20px;
  }

  .revisions-image {
    padding-left: 10px;
    padding-right: 10px;
  }

  .revisions-img-label {
    text-align: center;
    font-size: 11px;
    line-height: 14px;
  }

  .kaus-flow-label {
    margin-top: 8px;
    font-size: 12px;
  }

  .space-20px {
    height: 20px;
    display: block;
  }

  .kaus-lowfi-frames {
    width: 100%;
  }

  .cs-p2 {
    font-size: 15px;
    line-height: 23px;
  }

  .back-arrow-wrapper {
    margin-top: 25px;
    margin-left: 20px;
  }

  .time-constraint {
    width: 75%;
    margin-top: 50px;
  }

  .navlink {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }

  .navlink-container {
    justify-content: center;
  }

  .about-me-div {
    width: 85%;
    margin-top: 0;
    padding-top: 30px;
  }

  .facts-image {
    width: 21%;
  }

  .emoji-image, .shrug-image {
    width: 15%;
  }

  .seamless-image {
    margin-top: 5px;
  }

  .grid-project_2-col {
    padding: 30px;
  }

  .troupe-hypothesis-section {
    padding-top: 30px;
    padding-bottom: 50px;
  }

  .clio-h1 {
    line-height: 40px;
  }

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

  .circle {
    width: 75px;
    height: 75px;
    font-size: 11px;
    font-weight: 500;
  }

  ._2-col-equal-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .swatch {
    width: 55px;
    height: 55px;
  }

  .color-palette-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .clio-typfaces {
    flex-direction: column;
  }

  .type {
    width: 100%;
  }

  .type.rubik-space {
    margin-top: 50px;
  }

  .line-sm {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .plus-one-gif {
    max-width: 100%;
  }

  .cost-value-grid {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .assumption-and-mscw-div {
    margin-top: 20px;
  }

  .bookable-user-flow-wrapper, .bookable-lofi-wrapper {
    margin-top: 0;
  }

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

  .bookable-final-designs {
    margin-bottom: 40px;
  }
}

#w-node-_9dd379eb-77d2-62b8-6901-167729315c30-7954d4ff {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-cffad47d-2e9d-f905-8bb1-d33de95ed92e-7954d4ff {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-aabca389-aa3a-b597-8dce-5ef1c61dd1ff-7954d4ff {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_672f2943-99aa-fd7b-7a31-ab73e669bf86-7954d4ff {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d10cd211-7077-aee4-680e-a8e4622c2490-7954d4ff, #w-node-d10cd211-7077-aee4-680e-a8e4622c24af-7954d4ff, #w-node-_2bde2f8e-d463-55f3-58fd-7cb20161fecb-6b6cd5ee, #w-node-_96774d6e-e5e4-7589-942d-165cdf1d52b3-6b6cd5ee {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_51a87312-516f-19f7-944d-afbd849ec0c0-6b6cd5ee {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_8927fe03-80ba-a781-84a0-15f7fb1d5ee9-6b6cd5ee, #w-node-c32d2115-e541-2333-599a-50e2aad175a6-6b6cd5ee, #w-node-_2b80e1b7-0dbb-6a41-6981-c976b84646c7-6b6cd5ee, #w-node-_357e86fe-24bb-531d-ba5c-438fe2785d50-6b6cd5ee, #w-node-_3d5ce833-efdd-01a1-e2ac-867c5f384707-6b6cd5ee, #w-node-_2bde2f8e-d463-55f3-58fd-7cb20161fecb-b085728d, #w-node-_96774d6e-e5e4-7589-942d-165cdf1d52b3-b085728d, #w-node-ef86bbc2-28e2-7313-eee7-8abb546e5c1c-b085728d, #w-node-_240fc4a6-a348-99ad-65e7-5131450c9b81-b085728d, #w-node-_1df2cc73-0d13-da7b-5721-2073fcc7af3c-b085728d {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_2b80e1b7-0dbb-6a41-6981-c976b84646c7-b085728d {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: center;
}

#w-node-_3d5ce833-efdd-01a1-e2ac-867c5f384707-b085728d, #w-node-_2bde2f8e-d463-55f3-58fd-7cb20161fecb-90967786, #w-node-_96774d6e-e5e4-7589-942d-165cdf1d52b3-90967786, #w-node-ef86bbc2-28e2-7313-eee7-8abb546e5c1c-90967786, #w-node-_2b80e1b7-0dbb-6a41-6981-c976b84646c7-90967786, #w-node-_3d5ce833-efdd-01a1-e2ac-867c5f384707-90967786, #w-node-_2bde2f8e-d463-55f3-58fd-7cb20161fecb-7953a02b {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_5de89930-abc6-f690-2220-c46f6b529654-7953a02b, #w-node-cfd26de7-4f0e-7681-cb9e-0345c72ee10b-7953a02b, #w-node-_04495178-76c0-caee-023a-942c351616ba-7953a02b, #w-node-_04495178-76c0-caee-023a-942c351616bc-7953a02b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3d5ce833-efdd-01a1-e2ac-867c5f384707-7953a02b, #w-node-_2bde2f8e-d463-55f3-58fd-7cb20161fecb-cfd0eea8 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_3b56adc4-dddd-fffb-43c1-f8fec19e220a-cfd0eea8, #w-node-_3b56adc4-dddd-fffb-43c1-f8fec19e2210-cfd0eea8, #w-node-_4d616f04-c9a4-f3c5-abb5-cac40c972389-cfd0eea8, #w-node-df26be7e-0d97-8671-219c-0ac9aa71eba1-cfd0eea8, #w-node-_5b82fb3c-7827-0439-d328-0bf0e56020e3-cfd0eea8, #w-node-_86edc5c5-ecb6-80cf-9fe9-17d391bcd7f9-cfd0eea8, #w-node-_7e1ab199-c218-cb2c-d6f9-3eb9a94b4ef2-cfd0eea8, #w-node-_8cd50825-a191-306f-b3cb-170a25702d52-cfd0eea8, #w-node-ab43d8c1-2716-cac0-0259-2d9b75240ef8-cfd0eea8, #w-node-_05461f45-6555-3223-84a1-def45304685b-cfd0eea8, #w-node-_05461f45-6555-3223-84a1-def45304685d-cfd0eea8, #w-node-_05461f45-6555-3223-84a1-def45304685f-cfd0eea8, #w-node-_05461f45-6555-3223-84a1-def453046861-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510c9-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510cf-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510e4-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510e2-cfd0eea8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3d5ce833-efdd-01a1-e2ac-867c5f384707-cfd0eea8, #w-node-_2bde2f8e-d463-55f3-58fd-7cb20161fecb-71c55f04 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_16947387-f1af-7222-a5fc-a966f4db2d0b-71c55f04, #w-node-ddf52072-0392-caa0-3822-83596c70c52d-71c55f04, #w-node-a3398fcf-1ab8-5a59-34e7-9716002fa446-71c55f04 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5b1e7492-28aa-829b-f337-61eb6f899491-71c55f04 {
  grid-area: span 1 / span 1 / span 1 / span 1;
  align-self: center;
}

#w-node-_9314573e-0b23-9735-39fd-239abdc46721-71c55f04, #w-node-_0dd807bd-7df2-5e2a-34ae-ed3a6875b3b2-71c55f04, #w-node-_628de122-abc0-f169-1092-a0c95d45d60d-71c55f04, #w-node-_58ad85a0-808d-0715-1a44-fb47b8b15e28-71c55f04, #w-node-_58ad85a0-808d-0715-1a44-fb47b8b15e30-71c55f04, #w-node-f0ddbe12-81ea-cfff-8366-7fa9ac6c828e-71c55f04, #w-node-_4bcc9d2d-7ad8-8868-459d-44799441cac1-71c55f04, #w-node-_5d605b8a-b47e-f5eb-796f-930571032ff5-71c55f04 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3d5ce833-efdd-01a1-e2ac-867c5f384707-71c55f04 {
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 991px) {
  #w-node-_5de89930-abc6-f690-2220-c46f6b529654-7953a02b, #w-node-cfd26de7-4f0e-7681-cb9e-0345c72ee10b-7953a02b, #w-node-_04495178-76c0-caee-023a-942c351616ba-7953a02b, #w-node-_04495178-76c0-caee-023a-942c351616bc-7953a02b {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}

@media screen and (max-width: 767px) {
  #w-node-cffad47d-2e9d-f905-8bb1-d33de95ed92e-7954d4ff, #w-node-_3e8a9cd9-9558-3c14-2760-78451d650a19-7954d4ff, #w-node-_672f2943-99aa-fd7b-7a31-ab73e669bf86-7954d4ff, #w-node-_4eaafeb9-8f18-897a-738f-41c812611ad9-7954d4ff, #w-node-_55225456-ec60-feda-bc92-cf8c2cc13e22-7953a02b, #w-node-_7d7ee53c-c15f-97ce-9be1-25d5da83a0f2-7953a02b, #w-node-_3b56adc4-dddd-fffb-43c1-f8fec19e220a-cfd0eea8, #w-node-_3b56adc4-dddd-fffb-43c1-f8fec19e2210-cfd0eea8, #w-node-_86edc5c5-ecb6-80cf-9fe9-17d391bcd7f9-cfd0eea8, #w-node-_7e1ab199-c218-cb2c-d6f9-3eb9a94b4ef2-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510c9-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510cf-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510e4-cfd0eea8, #w-node-_080221c3-959e-431d-0229-dbc4825510e2-cfd0eea8 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_8cd50825-a191-306f-b3cb-170a25702d52-cfd0eea8, #w-node-ab43d8c1-2716-cac0-0259-2d9b75240ef8-cfd0eea8, #w-node-_58ad85a0-808d-0715-1a44-fb47b8b15e28-71c55f04, #w-node-_58ad85a0-808d-0715-1a44-fb47b8b15e30-71c55f04, #w-node-f0ddbe12-81ea-cfff-8366-7fa9ac6c828e-71c55f04, #w-node-_4bcc9d2d-7ad8-8868-459d-44799441cac1-71c55f04, #w-node-_5d605b8a-b47e-f5eb-796f-930571032ff5-71c55f04 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}


@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexsans';
  src: url('../fonts/IBMPlexSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexserif';
  src: url('../fonts/IBMPlexSerif-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ibmplexserif';
  src: url('../fonts/IBMPlexSerif-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-ExtraLightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelica';
  src: url('../fonts/Gelica-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}