/*  Hero section (design: uxoral). All classes are prefixed with ux- so they never clash with the rest of the site.  */

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

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

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

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

.ux-home-hero-area {
  --_container-item---full: 100%;
  --_container-item---regular-max-width: 84rem;
  --_spacing---spacer--spacing-6xl: 1.5rem;
  --_container-item---max-width-large: 120rem;
  --fonts-family--inter-display: Interdisplay, Arial, sans-serif;
  --_color---dim-gray: #666;
  --_typography---font-size--font-size-xsm: 0.875rem;
  --_typography---line-height--line-height-1-5: 1.5em;
  --_color---deep-black: black;
  --_spacing---spacer--spacing-24xl: 4.25rem;
  --_typography---heading--heading-style-h1: 11.4rem;
  --_typography---line-height--line-height-1: 1em;
  --fonts-weight--semi-bold: 600;
  --_spacing---spacer--spacing-16xl: 3rem;
  --_color---cultured: #f1f1f1;
  --_typography---line-height--line-height-0-9: 0.9em;
  --fonts-weight--bold: 700;
  --_spacing---spacer--spacing-lg: 0.75rem;
  --_spacing---border-radious--border-raduous-full: 999px;
  --_color---vermilion: #ff531f;
  --_spacing---spacer--spacing-22xl: 4rem;
  --_typography---font-size--font-size-xl: 1.75rem;
  --_typography---line-height--line-height-1-2: 1.2em;
  --_spacing---spacer--spacing-2xl: 1rem;
  --_spacing---spacer--spacing-md: 0.5rem;
  --_spacing---spacer--spacing-xxs: 0.125rem;
  --_color---scarlet: #ff3d2e;
  --_typography---font-size--font-size-xs: 0.75rem;
  --_spacing---spacer--spacing-8xl: 1.875rem;
  --_spacing---spacer--spacing-3xl: 1.125rem;
  --_spacing---spacer--spacing-9xl: 2rem;
  --_spacing---spacer--spacing-13xl: 2.5rem;
  --_spacing---spacer--spacing-4xl: 1.25rem;
  --_color---white: white;
  --_color---black: #000;
  --_typography---font-size--font-size-sm: 1rem;
  --fonts-weight--normal: 400;
  --_typography---heading--display-1: 4rem;
  --fonts-weight--medium: 500;
}

@media screen and (max-width: 991px) {
  .ux-home-hero-area {
    --_typography---font-size--font-size-sm: 1rem;
    --_typography---line-height--line-height-1-2: 1.2em;
    --_typography---heading--display-1: 3.5rem;
    --_typography---line-height--line-height-1-5: 1.5em;
    --_typography---line-height--line-height-1: 1em;
    --_typography---font-size--font-size-xsm: 0.875rem;
    --_typography---heading--heading-style-h1: 8rem;
    --_typography---line-height--line-height-0-9: 0.9em;
    --_typography---font-size--font-size-xl: 1.5rem;
    --_typography---font-size--font-size-xs: 0.75rem;
    --_spacing---spacer--spacing-2xl: 0.8rem;
    --_spacing---spacer--spacing-13xl: 2rem;
    --_spacing---spacer--spacing-9xl: 1.6rem;
    --_spacing---spacer--spacing-8xl: 1.5rem;
    --_spacing---spacer--spacing-6xl: 1.2rem;
    --_spacing---spacer--spacing-16xl: 2.4rem;
    --_spacing---spacer--spacing-lg: 0.6rem;
    --_spacing---spacer--spacing-4xl: 1rem;
    --_spacing---border-radious--border-raduous-full: 999px;
    --_spacing---spacer--spacing-md: 0.4rem;
    --_spacing---spacer--spacing-3xl: 0.9rem;
    --_spacing---spacer--spacing-xxs: 0.1rem;
    --_spacing---spacer--spacing-24xl: 3.4rem;
    --_spacing---spacer--spacing-22xl: 3.2rem;
  }
}

@media screen and (max-width: 767px) {
  .ux-home-hero-area {
    --_typography---font-size--font-size-sm: 1rem;
    --_typography---line-height--line-height-1-2: 1.2em;
    --_typography---heading--display-1: 3rem;
    --_typography---line-height--line-height-1-5: 1.5em;
    --_typography---line-height--line-height-1: 1em;
    --_typography---font-size--font-size-xsm: 0.875rem;
    --_typography---heading--heading-style-h1: 5.8rem;
    --_typography---line-height--line-height-0-9: 0.9em;
    --_typography---font-size--font-size-xl: 1.25rem;
    --_typography---font-size--font-size-xs: 0.75rem;
    --_spacing---spacer--spacing-2xl: 0.7rem;
    --_spacing---spacer--spacing-13xl: 1.75rem;
    --_spacing---spacer--spacing-9xl: 1.4rem;
    --_spacing---spacer--spacing-8xl: 1.3125rem;
    --_spacing---spacer--spacing-6xl: 1.0499rem;
    --_spacing---spacer--spacing-16xl: 2.09rem;
    --_spacing---spacer--spacing-lg: 0.5249rem;
    --_spacing---spacer--spacing-4xl: 0.875rem;
    --_spacing---border-radious--border-raduous-full: 999px;
    --_spacing---spacer--spacing-md: 0.35rem;
    --_spacing---spacer--spacing-3xl: 0.7875rem;
    --_spacing---spacer--spacing-xxs: 0.0875rem;
    --_spacing---spacer--spacing-24xl: 2.97rem;
    --_spacing---spacer--spacing-22xl: 2.8rem;
  }
}

@media screen and (max-width: 479px) {
  .ux-home-hero-area {
    --_typography---font-size--font-size-sm: 1rem;
    --_typography---line-height--line-height-1-2: 1.2em;
    --_typography---heading--display-1: 2.5rem;
    --_typography---line-height--line-height-1-5: 1.5em;
    --_typography---line-height--line-height-1: 1em;
    --_typography---font-size--font-size-xsm: 0.875rem;
    --_typography---heading--heading-style-h1: 3.6rem;
    --_typography---line-height--line-height-0-9: 0.9em;
    --_typography---font-size--font-size-xl: 1.125rem;
    --_typography---font-size--font-size-xs: 0.9rem;
    --_spacing---spacer--spacing-2xl: 0.6rem;
    --_spacing---spacer--spacing-13xl: 1.5rem;
    --_spacing---spacer--spacing-9xl: 1.2rem;
    --_spacing---spacer--spacing-8xl: 1.125rem;
    --_spacing---spacer--spacing-6xl: 0.899rem;
    --_spacing---spacer--spacing-16xl: 1.799rem;
    --_spacing---spacer--spacing-lg: 0.449rem;
    --_spacing---spacer--spacing-4xl: 0.75rem;
    --_spacing---border-radious--border-raduous-full: 999px;
    --_spacing---spacer--spacing-md: 0.3rem;
    --_spacing---spacer--spacing-3xl: 0.674rem;
    --_spacing---spacer--spacing-xxs: 0.075rem;
    --_spacing---spacer--spacing-24xl: 2.55rem;
    --_spacing---spacer--spacing-22xl: 2.4rem;
  }
}

.ux-home-hero-area {
  font-family: var(--fonts-family--inter-display);
  color: var(--_color---black);
  font-size: var(--_typography---font-size--font-size-sm);
  line-height: var(--_typography---line-height--line-height-1-2);
  font-weight: var(--fonts-weight--normal);
}

:where(.ux-home-hero-area) h1 {
  font-size: var(--_typography---heading--display-1);
  line-height: var(--_typography---line-height--line-height-1-2);
  font-weight: var(--fonts-weight--medium);
  margin-top: 0;
  margin-bottom: 0;
  font-family: inherit;
  color: inherit;
}

:where(.ux-home-hero-area) p {
  color: var(--_color---dim-gray);
  line-height: var(--_typography---line-height--line-height-1-5);
  margin-bottom: 0;
}

:where(.ux-home-hero-area) a {
  text-decoration: none;
  color: inherit;
}

:where(.ux-home-hero-area) img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
  width: auto;
  object-fit: fill;
}

.ux-section {
  position: relative;
}

.ux-section.ux-hero {
  width: var(--_container-item---full);
}

.ux-container {
  width: var(--_container-item---full);
  max-width: var(--_container-item---regular-max-width);
  padding-right: var(--_spacing---spacer--spacing-6xl);
  padding-left: var(--_spacing---spacer--spacing-6xl);
}

.ux-container.ux-large {
  width: var(--_container-item---full);
  max-width: var(--_container-item---max-width-large);
  padding-right: var(--_spacing---spacer--spacing-6xl);
  padding-left: var(--_spacing---spacer--spacing-6xl);
}

.ux-home-hero-area {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.ux-font-size-xsm {
  font-family: var(--fonts-family--inter-display);
  color: var(--_color---dim-gray);
  font-size: var(--_typography---font-size--font-size-xsm);
  line-height: var(--_typography---line-height--line-height-1-5);
}

.ux-font-size-xsm.ux-pure-black {
  color: var(--_color---deep-black);
}

.ux-spacing-6xl {
  width: var(--_container-item---full);
  padding-top: var(--_spacing---spacer--spacing-6xl);
}

.ux-spacing-24xl {
  padding-top: var(--_spacing---spacer--spacing-24xl);
}

.ux-home-hero-header {
  overflow: hidden;
}

.ux-hero-heading {
  /* same typeface as the section titles on the rest of the site (Anton, uppercase) */
  font-family: var(--_typography---font-family--heading-font);
  color: var(--colors--simple-black);
  font-size: var(--_typography---heading--heading-style-h1);
  line-height: var(--_typography---line-height--line-height-1);
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
}

/* desktop: keep the slogan on one line on every screen width (never larger than the design size) */
@media screen and (min-width: 992px) {
  .ux-hero-heading {
    font-size: min(8.75rem, calc((100vw - 4rem) * 0.085));
  }
}

.ux-hero-middle {
  padding-bottom: var(--_spacing---spacer--spacing-16xl);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.ux-hero-image-wrapper {
  z-index: 9;
  position: relative;
}

.ux-hero-text {
  color: var(--_color---cultured);
  font-size: 16.95rem; /* "MENTINET" sized to the width of the original 25rem "UXORA" */
  line-height: var(--_typography---line-height--line-height-0-9);
  font-weight: var(--fonts-weight--bold);
  text-align: center;
}

.ux-line-wrapper-main {
  width: var(--_container-item---full);
  height: var(--_container-item---full);
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 9.6rem;
  padding-right: 9.6rem;
  display: flex;
  position: absolute;
}

.ux-line-item-wrap {
  height: var(--_container-item---full);
  grid-column-gap: var(--_spacing---spacer--spacing-lg);
  grid-row-gap: var(--_spacing---spacer--spacing-lg);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ux-line-wrapper {
  height: var(--_container-item---full);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ux-line {
  height: var(--_container-item---full);
  background-color: var(--_color---deep-black);
  opacity: 0.1;
  width: 0.0625rem;
}

.ux-circle-dot {
  border-radius: var(--_spacing---border-radious--border-raduous-full);
  background-color: var(--_color---vermilion);
  width: 0.59913rem;
  height: 0.59913rem;
}

.ux-hero-social-main {
  width: var(--_container-item---full);
  padding-right: var(--_spacing---spacer--spacing-22xl);
  padding-left: var(--_spacing---spacer--spacing-22xl);
  justify-content: space-between;
  display: flex;
  position: absolute;
}

.ux-hero-subtitle {
  font-size: var(--_typography---font-size--font-size-xl);
  line-height: var(--_typography---line-height--line-height-1-2);
  font-weight: var(--fonts-weight--semi-bold);
  text-align: center;
}

.ux-hero-bottom-item {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.ux-max-width-35 {
  max-width: 35rem;
}

.ux-hero-review-block {
  grid-column-gap: var(--_spacing---spacer--spacing-2xl);
  grid-row-gap: var(--_spacing---spacer--spacing-2xl);
  display: flex;
}

.ux-review-image-block {
  padding-left: var(--_spacing---spacer--spacing-md);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ux-reviewer-image {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -0.5rem;
}

.ux-reviewer-left {
  grid-column-gap: var(--_spacing---spacer--spacing-lg);
  grid-row-gap: var(--_spacing---spacer--spacing-lg);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ux-max-width-7 {
  max-width: 7rem;
}

.ux-reviewer-right {
  grid-column-gap: var(--_spacing---spacer--spacing-lg);
  grid-row-gap: var(--_spacing---spacer--spacing-lg);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ux-logo {
  width: 1.5rem;
}

.ux-star-item-wrap {
  grid-column-gap: var(--_spacing---spacer--spacing-xxs);
  grid-row-gap: var(--_spacing---spacer--spacing-xxs);
  flex-flow: column;
  display: flex;
}

.ux-star-block {
  grid-column-gap: var(--_spacing---spacer--spacing-xxs);
  grid-row-gap: var(--_spacing---spacer--spacing-xxs);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.ux-star {
  color: var(--_color---scarlet);
  width: 0.75rem;
}

.ux-hero-title-block {
  z-index: -1;
  position: absolute;
}

.ux-hero-social-left {
  grid-column-gap: var(--_spacing---spacer--spacing-2xl);
  grid-row-gap: var(--_spacing---spacer--spacing-2xl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.ux-social-text {
  color: var(--_color---deep-black);
  font-size: var(--_typography---font-size--font-size-xs);
  transition: opacity 0.3s;
}

.ux-social-text:hover {
  color: var(--_color---vermilion);
}

.ux-share-icon {
  width: 0.75019rem;
}

.ux-scroll-arrow {
  width: 1.33125rem;
}

.ux-card {
  z-index: 1;
  overflow: hidden;
}

.ux-card.ux-_3 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0%);
}

.ux-card.ux-_2 {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  transform: translate3d(-40%, 0, -550px);
}

.ux-card.ux-_4 {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate3d(40%, 0, -550px);
}

.ux-card.ux-_1 {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  transform: translate3d(-72%, 0, -800px);
}

.ux-card.ux-_6 {
  transform-style: preserve-3d;
  position: absolute;
  transform: translate3d(100%, 0, -1000px);
}

.ux-card.ux-_5 {
  transform-style: preserve-3d;
  position: absolute;
  transform: translate3d(72%, 0, -800px);
}

.ux-card-image-0-1 {
  object-fit: cover;
  transform-style: preserve-3d;
  border-radius: 1.875rem;
  width: 100%;
  height: 100%;
  transform: rotateX(0) rotateY(10deg) rotateZ(0);
}

.ux-card-image-0-1.ux-_4,
.ux-card-image-0-1.ux-_5 {
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(10deg) rotateZ(0);
}

.ux-image-container {
  perspective: 3000px;
  transform-style: preserve-3d;
  justify-content: center;
  align-items: center;
  width: 23.1rem;
  height: 29.1rem;
  display: flex;
  position: relative;
  transform: rotateX(0.5deg) rotateY(0) rotateZ(0);
}

@media screen and (max-width: 991px) {
  .ux-hero-text {
    font-size: 7.5rem;
  }

  .ux-line-wrapper-main {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    display: none;
  }

  .ux-hero-social-main {
    padding-right: var(--_spacing---spacer--spacing-8xl);
    padding-left: var(--_spacing---spacer--spacing-8xl);
  }

  .ux-card.ux-_2 {
    transform: translate3d(-30%, 0, -550px);
  }

  .ux-card.ux-_4 {
    transform: translate3d(30%, 0, -550px);
  }

  .ux-card.ux-_1 {
    transform: translate3d(-62%, 0, -800px);
  }

  .ux-card.ux-_6 {
    transform: translate3d(90%, 0, -1000px);
  }

  .ux-card.ux-_5 {
    transform: translate3d(62%, 0, -800px);
  }

  .ux-image-container {
    width: 19rem;
    height: 24rem;
  }
}

@media screen and (max-width: 767px) {
  .ux-section.ux-hero {
    padding-top: 0;
  }

  .ux-hero-text {
    font-size: 6.3rem;
  }

  .ux-line-wrapper-main {
    display: none;
  }

  .ux-hero-social-main {
    padding-right: var(--_spacing---spacer--spacing-6xl);
    padding-left: var(--_spacing---spacer--spacing-3xl);
    display: none;
  }

  .ux-hero-review-block {
    width: var(--_container-item---full);
    grid-column-gap: var(--_spacing---spacer--spacing-16xl);
    grid-row-gap: var(--_spacing---spacer--spacing-16xl);
    justify-content: center;
    align-items: center;
  }

  .ux-card.ux-_2 {
    transform: translate3d(-25%, 0, -550px);
  }

  .ux-card.ux-_4 {
    transform: translate3d(25%, 0, -550px);
  }

  .ux-card.ux-_1 {
    transform: translate3d(-50%, 0, -800px);
  }

  .ux-card.ux-_6 {
    transform: translate3d(77%, 0, -1000px);
  }

  .ux-card.ux-_5 {
    transform: translate3d(50%, 0, -800px);
  }

  .ux-image-container {
    width: 16rem;
    height: 22rem;
  }
}

@media screen and (max-width: 479px) {
  .ux-hero-middle {
    margin-top: var(--_spacing---spacer--spacing-9xl);
  }

  .ux-hero-text {
    font-size: 4.4rem;
  }

  .ux-line-wrapper-main {
    display: none;
  }

  .ux-hero-review-block {
    grid-column-gap: var(--_spacing---spacer--spacing-13xl);
    grid-row-gap: var(--_spacing---spacer--spacing-13xl);
    flex-flow: column;
  }

  .ux-reviewer-image {
    width: 2.1rem;
    height: 2.1rem;
  }

  .ux-reviewer-left {
    grid-column-gap: var(--_spacing---spacer--spacing-4xl);
    grid-row-gap: var(--_spacing---spacer--spacing-4xl);
  }

  .ux-image-container {
    width: 14.5rem;
    height: 19.5rem;
  }
}

/* Space the source design reserves for its own navbar (the site's navbar overlays it) */
.ux-navbar-space {
  width: 100%;
  height: 68px;
}
@media screen and (max-width: 991px) {
  .ux-navbar-space {
    height: 59px;
  }
}
@media screen and (max-width: 767px) {
  .ux-navbar-space {
    height: 79px;
  }
}
@media screen and (max-width: 479px) {
  .ux-navbar-space {
    height: 59px;
  }
}

/* Initial states for the hero animations (js/main.js -> initUxHero) */
.anim-ready :is(.ux-hero-heading, .ux-hero-text) {
  visibility: hidden;
}
.anim-ready :is(.ux-max-width-35, .ux-hero-review-block) {
  filter: blur(5px);
  transform: translate3d(0, 100%, 0);
}
.ux-card.ux-_6 {
  opacity: 0;
}