@font-face {
  font-family: Suisseintl Book;
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Book.55790fe1a97bfeba0ef289fd99549b23.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Regular.3f16c813c5c1b5ebe4fb8f1e53eb57c6.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-SemiBold.00a0b40fb6d4872e3df5be25b7cf3520.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Light.ad716f22b3c5a0c6bf6837e9bbafadc4.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Medium.1bde5e7cec3cccef63b4cdaddcabaa4c.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-05/deep-dive/fonts/SuisseIntl-Bold.ceda09c978023f0b029310993b9f18c5.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-Black.ca0e4efd5f80301908b16267ded69948.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-BlackItalic.10f76d98aa9a7b45794ca57e582957c0.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ivartext;
  src: url('https://static.lystit.com/cms2/microsites/2025-10/2025-peak-planning-playbook/fonts/IvarText-Regular.97c95d2dd3dc862b065b9fedbb6d133f.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintlmono;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntlMono-Regular.9e69bd97503f24759113beb7d9837549.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-SemiBoldItalic.068f7e5271c3ddec4c0ffecaddf2d47e.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-UltralightItalic.0004279c12b74789764c557db29809e6.otf') format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-LightItalic.b607ea80ef79b1f802a56ed7c8b3520c.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-MediumItalic.2303a0be7761887bfa0f444cd31a09b5.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-ThinItalic.51eda46ce3b50a4472d8a3a0f24d2f7c.otf') format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Suisseintl;
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-RegularItalic.ebcfe992f82db833a4e94c9ea4477607.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #1a1a1a;
  --off-white: #fefefe;
  --green: #e8fe9c;
  --blue: #2034a7;
  --purple: #e0c4ff;
}

.page-wrapper {
  background-color: var(--black);
  background-image: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/images/GRID_BACKGROUND_02.cbffb35a975fe7e7644643af12e365f8.png');
  background-size: 753px;
  flex-flow: column;
  justify-content: space-between;
  width: 100svw;
  height: 100svh;
  display: flex;
  position: relative;
}

.intro-wrapper {
  z-index: 100;
  justify-content: space-between;
  width: 100%;
  padding: 1em;
  display: flex;
  position: relative;
  inset: 0% 0% auto;
}

.logo-wrapper {
  z-index: 30;
}

.intro-text-wrapper {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  height: 100%;
  padding: .25em;
  display: flex;
}

.body-copy {
  color: var(--off-white);
  margin-bottom: 0;
  font-family: Suisseintl, Arial, sans-serif;
  font-size: .9em;
  font-weight: 600;
  line-height: 1.3em;
}

.logo-svg {
  color: var(--off-white);
  width: 10vw;
}

.logo-svg.smaller {
  width: 8vw;
}

.close-button-intro {
  z-index: 1;
  border: .5px solid var(--off-white);
  color: var(--off-white);
  cursor: pointer;
  padding: .25em;
  transition: all .4s;
  display: none;
  position: relative;
}

.close-button-intro:hover {
  background-color: var(--green);
  color: var(--black);
}

.intro-text-section {
  color: var(--off-white);
  height: 100%;
  padding: .25em;
}

.intro-block {
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 1em;
  margin-right: 1em;
  display: none;
  position: relative;
  inset: 0% 0% auto auto;
}

.div-block-2 {
  justify-content: center;
  align-items: center;
  width: 1vw;
  display: flex;
}

.content-wrapper {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.scroll-container {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.svg-wrapper-logo {
  cursor: pointer;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
}

.image-wrapper {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  justify-content: flex-start;
  align-items: center;
  width: 350vw;
  padding: 1em;
  display: flex;
  position: absolute;
  inset: 0%;
}

.image-item {
  filter: blur(7px);
  cursor: pointer;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 30vw;
  transition: filter 1s;
  display: flex;
}

.image-item.a {
  justify-content: flex-end;
  align-items: flex-start;
  width: 28vw;
  position: relative;
  bottom: 10%;
}

.image-item.a.hide {
  display: none;
}

.image-item.b {
  width: 25vw;
  position: relative;
  top: 4%;
}

.image-item.b.hide {
  display: none;
}

.image-item.c {
  width: 29vw;
  position: relative;
  top: 2%;
  bottom: 0%;
}

.image-item.c.hide {
  display: none;
}

.image-item.d {
  width: 25vw;
  position: relative;
  bottom: 20%;
}

.image-item.d.hide {
  display: none;
}

.image-item.e {
  width: 27vw;
  position: relative;
  top: 8%;
}

.image-item.e.hide {
  display: none;
}

.image {
  z-index: 2;
  border: .5px solid var(--off-white);
  width: 100%;
  height: 100%;
  position: relative;
}

.navigation-buttons {
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.nav-wrapper {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  display: flex;
}

.prev-button {
  border: 1px solid var(--off-white);
  background-color: var(--black);
  color: var(--off-white);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 3vw;
  height: 3vh;
  padding: .25em;
  transition: all .4s;
  display: flex;
}

.prev-button:hover {
  background-color: var(--green);
  color: var(--black);
}

.next-button {
  border: 1px solid var(--off-white);
  background-color: var(--black);
  color: var(--off-white);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 3vw;
  height: 3vh;
  padding: .25em;
  transition: all .4s;
  display: flex;
}

.next-button:hover {
  background-color: var(--green);
  color: var(--black);
}

.body {
  background-color: var(--black);
  height: 100svh;
}

.list-view-button {
  cursor: pointer;
  display: none;
}

.list-view-overlay {
  z-index: 10;
  background-color: var(--black);
  background-image: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/images/GRID_BACKGROUND_02.cbffb35a975fe7e7644643af12e365f8.png');
  background-position: 0 0;
  background-size: 753px;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.list-view-wrapper {
  grid-column-gap: .6em;
  grid-row-gap: .6em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.h1 {
  color: var(--off-white);
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: Suisseintl, Arial, sans-serif;
  font-size: 3em;
  font-weight: 900;
  line-height: .8em;
}

.ivar-span {
  letter-spacing: 0;
  text-transform: none;
  font-family: Ivartext, Georgia, sans-serif;
  font-weight: 400;
}

.intro-text-block {
  z-index: 5;
  cursor: pointer;
  width: 30vw;
  position: relative;
}

.category-pop-up {
  z-index: 9;
  background-color: var(--black);
  background-image: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/images/GRID_BACKGROUND_02.cbffb35a975fe7e7644643af12e365f8.png');
  background-position: 0 0;
  background-size: 753px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100svw;
  height: 100svh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.category-pop-up.c1-t2, .category-pop-up.c1-t3, .category-pop-up.c1-t4, .category-pop-up.c1-t5, .category-pop-up.c3-t1, .category-pop-up.c2-t2, .category-pop-up.c2-t3, .category-pop-up.c2-t4, .category-pop-up.c2-t5, .category-pop-up.c3-t2, .category-pop-up.c3-t3, .category-pop-up.c3-t4, .category-pop-up.c3-t5, .category-pop-up.c2-t1 {
  display: flex;
}

.content-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 55% 45%;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100svh;
  display: grid;
}

.left-grid-block {
  border-right: .5px none var(--off-white);
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.right-grid-block {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.lower-image-navigation {
  border-top: .5px solid var(--off-white);
  background-color: #646464;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100svw;
  height: 4vh;
  display: none;
}

.image-wrapper-grid {
  width: 100%;
  height: 100%;
}

.slider-image {
  object-fit: cover;
  object-position: 50% 0%;
  width: 100%;
  height: 100%;
  display: block;
}

.slider-image.mid-position {
  object-position: 50% 50%;
}

.slider-image.fill {
  width: auto;
}

.slider-image.bottom-position {
  object-position: 50% 100%;
}

.slider-image.landscape {
  width: 100%;
  max-width: none;
  height: auto;
}

.slider-image.contain {
  width: auto;
  height: 100%;
}

.slider-image.full-size {
  object-fit: contain;
  object-position: 50% 50%;
  height: auto;
}

.category-text-block {
  z-index: 5;
  position: relative;
  top: 10%;
  right: 10%;
}

.category-text-wrapper {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  height: 100%;
  padding: .25em;
  display: flex;
}

.category-text-section {
  border: .5px none var(--off-white);
  background-color: var(--black);
  color: var(--off-white);
  height: 100%;
  padding: .5em;
}

.category-text-section.bottom-stroke {
  background-color: var(--green);
  border-top-style: none;
  border-bottom-style: solid;
}

.category-text-section.bottom-stroke.blue {
  background-color: var(--blue);
}

.category-text-section.bottom-stroke.purple {
  background-color: var(--purple);
}

.category-text-section.white-blue {
  background-color: var(--off-white);
  color: var(--blue);
}

.category-text-section.purple {
  background-color: var(--purple);
  border-style: none;
}

.category-text-section.purple.blue {
  background-color: var(--blue);
}

.h2 {
  color: var(--green);
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: Suisseintl, Arial, sans-serif;
  font-size: 1.8em;
  font-weight: 900;
  line-height: .8em;
}

.h2.blue {
  color: var(--blue);
}

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

.title-category-text-wrapper {
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin-left: 2em;
  display: flex;
}

.title-category-text-wrapper.main-category {
  justify-content: flex-end;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 2em;
}

.title-category-text-wrapper.white {
  background-color: var(--off-white);
  margin-right: 2em;
  padding-right: .5em;
}

.title-category-text-wrapper.black {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  margin-right: 2em;
  padding-right: .5em;
}

.title-category-text-wrapper.purple {
  background-color: var(--purple);
  margin-right: 2em;
  padding-right: .5em;
}

.category-copy-section {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  color: var(--off-white);
  flex-flow: column;
  height: 100%;
  padding: .25em .125em .25em .25em;
  display: flex;
}

.image-nav-wrapper {
  filter: blur(5px);
  cursor: pointer;
  width: 12vw;
  height: 100%;
  transition: all .3s;
}

.image-nav-wrapper:hover {
  filter: blur();
}

.nav-image {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.image-nav-scroller {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 4svh;
  display: flex;
  overflow: scroll;
}

.scroller {
  width: 100%;
  height: 100%;
  display: flex;
}

.category-text {
  color: var(--black);
  letter-spacing: -1px;
  text-transform: uppercase;
  width: auto;
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
  font-weight: 900;
  line-height: .9em;
}

.category-text.white {
  letter-spacing: -.5px;
  font-size: .8em;
}

.category-text.white-text {
  color: var(--off-white);
}

.navigation-menu {
  z-index: 101;
  border-left: .5px solid var(--off-white);
  background-color: #1a1a1a;
  background-image: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/images/GRID_BACKGROUND_02.cbffb35a975fe7e7644643af12e365f8.png');
  background-position: 0 0;
  background-size: 753px;
  width: 35svw;
  height: 100svh;
  display: none;
  position: absolute;
  inset: auto 0% 0% auto;
}

.navigation-menu-wrapper {
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 1em;
  display: flex;
  position: absolute;
}

.nav-menu-text {
  border-color: var(--black);
  text-align: left;
  letter-spacing: 0;
  text-transform: uppercase;
  border-top-style: none;
  border-top-width: 1px;
  border-bottom-style: none;
  border-bottom-width: 1px;
  border-left-style: none;
  border-left-width: 1px;
  padding-top: .5em;
  padding-bottom: .5em;
  font-family: Suisseintl, Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  line-height: 1em;
}

.nav-menu-text.green {
  text-align: left;
  border-style: none;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.2em;
}

.nav-menu-text.nav-scroller {
  flex-flow: column;
  width: 100%;
  display: flex;
}

.nav-list-wrapper {
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.nav-list-wrapper.blue {
  justify-content: flex-start;
  align-items: flex-end;
}

.nav-menu-link {
  width: 100%;
}

.x-icon {
  color: var(--off-white);
  width: 4vw;
  padding: 1em;
  transition: all .4s;
  position: absolute;
  inset: 0% 0% auto auto;
}

.x-icon:hover {
  color: var(--green);
}

.logo-wrapper-nav-bar {
  padding-top: 1em;
  padding-left: 1em;
  position: absolute;
  inset: 0% auto auto 0%;
}

.hamburger-icon {
  z-index: 31;
  color: var(--off-white);
  width: 4.2vw;
  padding: 0 0 1em 1em;
  transition: all .4s;
  display: flex;
}

.hamburger-icon:hover {
  color: var(--green);
}

.hamburger-icon.mobile {
  display: none;
}

.slider {
  background-color: #ddd0;
  width: 100%;
  height: 100%;
  display: flex;
}

.slide-nav {
  display: none;
}

.slider-image-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.slide {
  width: 100%;
  height: 100%;
}

.icon {
  display: none;
}

.arrow {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  cursor: pointer;
  width: auto;
  height: auto;
  margin-bottom: .25em;
  margin-right: .25em;
  padding: .125em;
  transition: all .4s;
  display: flex;
  inset: auto 0% 0% auto;
}

.arrow:hover {
  background-color: var(--green);
  color: var(--black);
}

.arrow.left {
  right: 6%;
}

.arrow.left.hide, .arrow.hide {
  display: none;
}

.left-arrow {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  width: auto;
  height: auto;
  margin-bottom: .25em;
  margin-right: .25em;
  padding: .125em;
  inset: auto 11% 0% auto;
}

.svg-3 {
  width: 2vw;
  height: 2vh;
}

.icon-2 {
  display: none;
}

.svg-4 {
  width: 4vw;
}

.left-arrow-v2 {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  width: auto;
  height: auto;
  margin-bottom: .25em;
  margin-right: .25em;
  padding: .125em;
  display: flex;
  inset: auto 5% 0% auto;
}

.mask {
  width: 100%;
  height: auto;
}

.background-video {
  width: auto;
  height: 100%;
}

.hover-state-category {
  z-index: 1;
  padding-left: 1em;
  display: flex;
  position: relative;
}

.category-homepage-hover {
  border: .5px solid var(--off-white);
  background-color: var(--black);
  color: var(--off-white);
  height: 100%;
  padding: .5em;
}

.category-homepage-hover.bottom-stroke {
  background-color: var(--green);
  border-top-style: none;
  border-bottom-style: solid;
}

.category-homepage-hover.yellow {
  background-color: var(--green);
  color: var(--black);
}

.category-homepage-hover.purple {
  background-color: var(--purple);
  color: var(--black);
}

.category-homepage-hover.blue {
  background-color: var(--blue);
  color: var(--off-white);
}

.h4 {
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: Suisseintl, Arial, sans-serif;
  font-size: 1em;
  font-weight: 700;
  line-height: .8em;
}

.category-popups-wrapper {
  display: flex;
}

.svg-5 {
  width: auto;
  height: 100%;
}

.section {
  position: relative;
}

.category-block {
  background-color: var(--off-white);
  width: auto;
  margin-left: 1em;
  padding: .25em .5em;
}

.category-block.blue {
  margin-right: 1em;
}

.div-block-3 {
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.nav-menu-text-wrapper {
  background-color: var(--green);
  cursor: pointer;
  border: .5px solid #000;
  border-bottom: 1px #000;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: .5em;
  padding-right: .5em;
  transition: all .4s;
  display: flex;
}

.nav-menu-text-wrapper:hover {
  background-color: var(--off-white);
  color: var(--black);
}

.nav-menu-text-wrapper.blue {
  border-top-color: var(--off-white);
  border-right-color: var(--off-white);
  border-left-color: var(--off-white);
  background-color: var(--blue);
  color: var(--off-white);
}

.nav-menu-text-wrapper.blue:hover {
  background-color: var(--off-white);
  color: var(--black);
}

.nav-menu-text-wrapper.blue.bottom {
  border-bottom-color: var(--off-white);
}

.nav-menu-text-wrapper.bottom {
  border-bottom-style: solid;
}

.nav-menu-text-wrapper.purple {
  background-color: var(--purple);
}

.nav-menu-text-wrapper.purple:hover {
  background-color: var(--off-white);
}

.nav-menu-text-wrapper.nav-scroller {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  min-width: auto;
  display: grid;
}

.answer-text {
  text-align: right;
  text-transform: uppercase;
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
  line-height: 1em;
}

.video-wrapper {
  aspect-ratio: 9 / 16;
  border: .5px solid var(--off-white);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.background-video-2 {
  z-index: 2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.text-heading {
  font-family: Suisseintl, Arial, sans-serif;
  font-size: 1.1em;
  font-style: italic;
  font-weight: 500;
  line-height: 1em;
}

.video-wrapper-slide {
  aspect-ratio: 9 / 16;
  border: .5px none var(--off-white);
  width: auto;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.video-slides {
  z-index: 2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.video-frame {
  z-index: 1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.text-data-span {
  background-color: var(--black);
  padding-left: .25em;
  padding-right: .25em;
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
}

.text-data-span.blue {
  background-color: var(--off-white);
  color: var(--blue);
}

.text-data-span.green {
  background-color: var(--green);
  color: var(--black);
}

.text-data-span.purple {
  background-color: var(--purple);
  color: var(--black);
}

.nav-wrapper-lower {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  color: #e2e2e2;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  transition: all .4s;
  display: flex;
}

.nav-wrapper-lower:hover {
  color: #e2e2e266;
}

.background-video---home {
  z-index: 10;
  object-fit: cover;
  width: auto;
  height: 10vh;
  position: absolute;
  inset: 0%;
}

.paragraph {
  color: #e2e2e2;
  margin-bottom: 0;
  font-size: .8rem;
  line-height: 1.2rem;
}

.bg-element {
  z-index: 0;
  color: #e2e2e2;
  background-color: #111;
  width: 100svw;
  height: 100svh;
  padding: 2em;
  position: absolute;
  inset: 0%;
  overflow: clip;
}

.bg-element.list {
  z-index: 10;
  pointer-events: none;
  display: none;
}

.selector-embed {
  width: .3em;
}

.selector-embed.cross-enlarged {
  width: .6em;
}

.page-wrapper-2 {
  height: 100svh;
  display: flex;
  position: relative;
}

.page-wrapper-2.enter {
  z-index: 999;
  background-color: #111;
  background-image: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/images/GRID_BACKGROUND_02.cbffb35a975fe7e7644643af12e365f8.png');
  background-position: 0 0;
  background-size: 753px;
  padding: 2em;
  display: flex;
  position: absolute;
  inset: 0%;
}

.heading-2 {
  color: #e2e2e2;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1.4rem;
  line-height: 1em;
}

.logo_link_hero {
  cursor: pointer;
  width: 10svw;
  transition: all .4s;
}

.enter-text-wrapper {
  z-index: 10;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  width: 50vw;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 2em;
  display: flex;
  position: relative;
}

.enter-page-wrapper {
  z-index: 10;
  background-image: none;
  background-size: auto;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.selector-wrapper {
  grid-column-gap: .3em;
  grid-row-gap: .3em;
  display: flex;
}

.nav-text-block {
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
  line-height: 1em;
}

.nav-text-block.enter {
  font-size: 1.2rem;
  line-height: 1rem;
}

.image-3 {
  width: 100%;
  height: 100%;
}

.hero-image-block {
  width: 8vw;
  position: absolute;
  inset: 0% 0% auto auto;
}

.hero-image-block._08 {
  width: 5svw;
  inset: auto 34svw 32svh auto;
}

.hero-image-block._06 {
  width: 6svw;
  inset: auto 35svw 5svh auto;
}

.hero-image-block._05 {
  width: 6svw;
  top: 30svh;
  right: 45svw;
}

.hero-image-block._0 {
  width: 6svw;
  top: 6svh;
  right: 2svw;
}

.hero-image-block._10 {
  width: 8svw;
  inset: 10svh auto auto 8svw;
}

.hero-image-block._13 {
  width: 8svw;
  top: 2svh;
  right: 49svw;
}

.hero-image-block._01 {
  width: 12svw;
  inset: auto 0% 5svh auto;
}

.hero-image-block._12 {
  width: 6svw;
  top: 26svh;
  right: 13svw;
}

.hero-image-block._04 {
  width: 8svw;
  right: 13svw;
}

.hero-image-block._07 {
  width: 6svw;
  inset: auto 22svw 40svh auto;
}

.hero-image-block.video {
  width: 6svw;
  height: auto;
  inset: auto 5svw 50svh auto;
}

.hero-image-block._02 {
  width: 6svw;
  inset: auto 22svw 12svh auto;
}

.hero-image-block._09 {
  width: 8svw;
  inset: 27svh auto auto 30svw;
}

.hero-image-block._11 {
  width: 8svw;
  inset: 6% auto auto 23svw;
}

.hero-image-block._03 {
  width: 9svw;
  top: 10svh;
  right: 30svw;
}

.hero-image-wrapper {
  background-image: none;
  background-size: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.mono {
  color: var(--green);
  text-align: right;
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: Suisseintl, Arial, sans-serif;
  font-size: 2em;
  font-weight: 900;
  line-height: 1em;
}

.mono.purple {
  color: var(--black);
}

.mono.yellow {
  color: var(--green);
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
}

.mono.blue {
  color: var(--blue);
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
}

.mono.purple {
  color: var(--black);
  text-align: right;
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1em;
  line-height: 1em;
}

.bold-text {
  font-size: 1em;
}

.text-link {
  color: var(--off-white);
}

.next-category-button {
  color: var(--off-white);
  cursor: pointer;
  font-family: Suisseintlmono, Georgia, sans-serif;
  font-size: 1rem;
  line-height: 1rem;
  transition: all .4s;
}

.next-category-button:hover {
  color: var(--green);
}

.next-previous-buttons {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
}

@media screen and (max-width: 991px) {
  .close-button-intro {
    display: flex;
  }

  .image-item.a {
    width: 50vw;
  }

  .image-item.b {
    width: 40vw;
  }

  .image-item.c {
    width: 45vw;
  }

  .image-item.d {
    width: 32vw;
  }

  .image-item.e {
    width: 55vw;
  }

  .prev-button, .next-button {
    width: 5vw;
    height: 5vh;
    padding: .5em;
  }

  .intro-text-block {
    width: 50vw;
  }

  .content-grid {
    grid-template-columns: 60% 40%;
    height: 100svh;
  }

  .lower-image-navigation {
    display: none;
  }

  .slider-image.contain {
    width: 100%;
  }

  .category-text-block {
    right: 20%;
  }

  .category-text-section, .category-text-section.white-blue {
    padding-left: 0;
    padding-right: 0;
  }

  .category-text-section.purple {
    padding-left: 0;
  }

  .title-category-text-wrapper.white {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-left: 1em;
    margin-right: 1em;
    padding-bottom: .5em;
    padding-left: .5em;
  }

  .title-category-text-wrapper.black, .title-category-text-wrapper.purple {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: .5em;
    padding-left: .5em;
  }

  .navigation-menu {
    width: 60svw;
  }

  .navigation-menu-wrapper {
    padding-left: 1em;
    padding-right: 1em;
  }

  .x-icon, .hamburger-icon {
    width: 8vw;
  }
}

@media screen and (max-width: 767px) {
  .prev-button, .next-button {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: flex;
  }

  .navigation-menu {
    border-left-style: none;
    width: 100svw;
  }

  .x-icon {
    width: 10vw;
  }

  .svg-5 {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .logo-wrapper {
    justify-content: space-between;
    align-items: flex-start;
    width: auto;
    display: flex;
  }

  .logo-svg, .logo-svg.smaller {
    width: 25vw;
  }

  .div-block-2 {
    width: 3vw;
  }

  .svg-wrapper-logo {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .image-wrapper {
    width: 600vw;
  }

  .image-item.a {
    filter: none;
    width: 80vw;
  }

  .image-item.b, .image-item.c, .image-item.d, .image-item.e {
    filter: none;
  }

  .image {
    filter: blur(7px);
  }

  .prev-button, .next-button {
    width: 10vw;
  }

  .intro-text-block {
    width: 60vw;
  }

  .category-pop-up.c1-t1 {
    height: 100%;
    overflow: scroll;
  }

  .category-pop-up.c1-t2 {
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    overflow: scroll;
  }

  .category-pop-up.c1-t3, .category-pop-up.c1-t4, .category-pop-up.c1-t5, .category-pop-up.c3-t1, .category-pop-up.c2-t2, .category-pop-up.c2-t3, .category-pop-up.c2-t4, .category-pop-up.c2-t5, .category-pop-up.c3-t2, .category-pop-up.c3-t3, .category-pop-up.c3-t4 {
    height: 100%;
    overflow: scroll;
  }

  .category-pop-up.c3-t5 {
    height: 100%;
    inset: 0%;
    overflow: scroll;
  }

  .category-pop-up.c2-t1 {
    height: 100%;
    overflow: scroll;
  }

  .content-grid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 70%;
    grid-auto-columns: 1fr;
    align-content: stretch;
    height: 100%;
    display: flex;
  }

  .left-grid-block {
    border-right-style: none;
    width: 100svw;
    height: auto;
    min-height: auto;
  }

  .right-grid-block {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
    flex-flow: column;
    width: 100svw;
    height: auto;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    bottom: 2%;
  }

  .lower-image-navigation {
    display: none;
  }

  .image-wrapper-grid {
    height: auto;
  }

  .slider-image.landscape {
    height: 100%;
  }

  .slider-image.contain {
    width: 100%;
  }

  .category-text-block {
    top: 0%;
    right: 0%;
  }

  .category-text-wrapper {
    height: auto;
  }

  .category-text-section.purple {
    padding-left: 0;
  }

  .title-category-text-wrapper.purple {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: .5em;
    padding-left: .5em;
  }

  .category-copy-section {
    height: auto;
  }

  .navigation-menu {
    border-left-style: none;
    width: 100svw;
  }

  .nav-menu-text {
    font-size: .9em;
  }

  .x-icon {
    width: 15vw;
  }

  .hamburger-icon {
    width: 10vw;
    padding-bottom: 0;
    padding-left: 0;
    display: flex;
    inset: 0% 0% auto auto;
  }

  .hamburger-icon.mobile {
    z-index: 10;
    opacity: 1;
    width: 10vw;
    padding: 1em 1em 0 0;
    display: flex;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .slider {
    height: auto;
  }

  .slider-image-wrapper {
    width: 100%;
  }

  .arrow {
    bottom: 45%;
  }

  .arrow.left {
    margin-left: .25em;
    margin-right: 0;
    inset: auto auto 45% 0%;
  }

  .svg-3 {
    width: 4vw;
  }

  .svg-6 {
    width: 100%;
    padding-bottom: .25em;
  }

  .answer-text {
    font-size: .9em;
  }

  .bg-element.list {
    height: auto;
    inset: 0%;
  }

  .page-wrapper-2.enter {
    padding-left: 1em;
    padding-right: 1em;
  }

  .logo_link_hero {
    width: 30svw;
  }

  .enter-text-wrapper {
    width: 100vw;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .logo-wrapper-homepage {
    width: 30svw;
  }

  .hero-image-block._08 {
    width: 15svw;
    inset: 22svh 20svw auto auto;
  }

  .hero-image-block._06 {
    width: 9svw;
    inset: 0% 0% auto auto;
  }

  .hero-image-block._05 {
    width: 12svw;
    right: 40svw;
  }

  .hero-image-block._0 {
    width: 14svw;
    top: 11svh;
  }

  .hero-image-block._10 {
    top: 12svh;
  }

  .hero-image-block._13 {
    top: 1svh;
    right: 40svw;
  }

  .hero-image-block._01 {
    width: 16svw;
    inset: 20svh auto auto 2svw;
  }

  .hero-image-block._12 {
    width: 10svw;
    right: 1svw;
  }

  .hero-image-block._07 {
    width: 12svw;
    inset: 0% auto auto 0%;
  }

  .hero-image-block.video {
    width: 12svw;
    bottom: 80svh;
    right: 54.2svw;
  }

  .hero-image-block._02 {
    width: 13svw;
    display: none;
    inset: 36svh 0% auto auto;
  }

  .hero-image-block._09 {
    left: 24svw;
  }

  .hero-image-block._11 {
    left: 20svw;
  }

  .next-previous-buttons {
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }
}


@font-face {
  font-family: 'Suisseintl Book';
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Book.55790fe1a97bfeba0ef289fd99549b23.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Regular.3f16c813c5c1b5ebe4fb8f1e53eb57c6.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-SemiBold.00a0b40fb6d4872e3df5be25b7cf3520.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Light.ad716f22b3c5a0c6bf6837e9bbafadc4.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-12/yif-test-re25/fonts/SuisseIntl-Medium.1bde5e7cec3cccef63b4cdaddcabaa4c.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-05/deep-dive/fonts/SuisseIntl-Bold.ceda09c978023f0b029310993b9f18c5.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-Black.ca0e4efd5f80301908b16267ded69948.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-BlackItalic.10f76d98aa9a7b45794ca57e582957c0.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ivartext';
  src: url('https://static.lystit.com/cms2/microsites/2025-10/2025-peak-planning-playbook/fonts/IvarText-Regular.97c95d2dd3dc862b065b9fedbb6d133f.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintlmono';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntlMono-Regular.9e69bd97503f24759113beb7d9837549.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-SemiBoldItalic.068f7e5271c3ddec4c0ffecaddf2d47e.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-UltralightItalic.0004279c12b74789764c557db29809e6.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-LightItalic.b607ea80ef79b1f802a56ed7c8b3520c.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-MediumItalic.2303a0be7761887bfa0f444cd31a09b5.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-ThinItalic.51eda46ce3b50a4472d8a3a0f24d2f7c.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Suisseintl';
  src: url('https://static.lystit.com/cms2/microsites/2025-02/product-anatomy/fonts/SuisseIntl-RegularItalic.ebcfe992f82db833a4e94c9ea4477607.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}