/* === Global === */

/* :root, html, body, #main */

:root {
  --pearl-white: #f3f5f6;
  --pearl-white-translucent: #f3f5f680;
  --gel: #f4f5f699;
  --statement-grey: #ccd1d6;
  --smile-beige: #edd7ab;
  --formula-periwinkle: #858aad;
  --dark-lips: #382e36;
  --dark-lips-translucent: #382e3680;
  --tea-yellow: #e7da9d;
  --tobacco-beige: #ddb388;
  --wine-red: #a72555;
  --coffee-brown: #67311d;

  --xs: 0.5rem;
  --sm: 1rem;
  --md: 1.5rem;
  --lg: 2rem;
  --xl: 3rem;
  --2xl: 4rem;
  --3xl: 6rem;
  --4xl: 6rem; /* Smaller for mobile */

  --body-font-size: 1.5rem;
  --nav-links-font-size: 1.5rem;

  --body-line-height: 1.2;
  --nav-links-line-height: 1;

  --body-text-height: calc(var(--body-font-size) * var(--body-line-height));
  --nav-links-text-height: calc(
    var(--nav-links-font-size) * var(--nav-links-line-height)
  );

  --nav-height: calc(
    var(--sm) + var(--sm) + var(--nav-links-text-height) + var(--sm) + var(--sm)
  );

  --hero-pt: calc(var(--nav-height) + var(--4xl));
}

body {
  background-color: var(--pearl-white) !important;
  color: var(--dark-lips) !important;
  font-size: var(--body-font-size);
  font-weight: 400;
  line-height: var(--body-line-height);
}

#main {
  background-color: var(--pearl-white) !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

#main::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.is-loading main[data-framer-name="Main"] {
  visibility: hidden;
}

.framer-done main[data-framer-name="Main"] {
  visibility: inherit;
}

/* Lenis */

.lenis-scrolling [data-framer-name*="nested-scroll"] {
  /* pointer-events: none; */
}

#main [data-framer-name*="nested-scroll"] {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}

#main [data-framer-name*="nested-scroll"]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Custom Scrollbars */

.custom-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--md);
  height: 100vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.12, 0.23, 0.5, 1);
  z-index: 9999;
}

.custom-scrollbar__thumb {
  position: absolute;
  right: 0.25rem;
  width: var(--sm);
  border-radius: 99.9rem;
  background: var(--dark-lips);
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.12, 0.23, 0.5, 1);
}

.no-touchevents .custom-scrollbar {
  pointer-events: auto;
}

.no-touchevents #main.lenis-scrolling ~ .custom-scrollbar {
  opacity: 1;
}

.no-touchevents .custom-scrollbar:hover {
  opacity: 1;
}

.touchevents .custom-scrollbar {
  display: none;
}

.custom-scrollbar.custom-scrollbar--nested {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--md);
  height: 100%;
  overflow: hidden;
  z-index: 10;
  opacity: 1;
}

.custom-scrollbar.custom-scrollbar--nested .custom-scrollbar__thumb {
  right: initial;
  opacity: 0.2;
}

.no-touchevents .custom-scrollbar.custom-scrollbar--nested {
  pointer-events: auto;
  opacity: 1;
}

/* Framer Texts */

h1.framer-text:not(:first-child) {
  margin-top: var(--3xl) !important;
}

h2.framer-text:not(:first-child),
h3.framer-text:not(:first-child) {
  margin-top: var(--2xl) !important;
}

h4.framer-text:not(:first-child),
h5.framer-text:not(:first-child),
h6.framer-text:not(:first-child) {
  margin-top: var(--lg) !important;
}

p.framer-text:not(:first-child),
div.framer-text:not(:first-child),
blockquote.framer-text:not(:first-child),
table.framer-text:not(:first-child),
figure.framer-text:not(:first-child),
.framer-image.framer-text:not(:first-child) {
  margin-top: var(--md) !important;
}

ol.framer-text:not(:first-child),
ul.framer-text:not(:first-child),
ol.framer-text > li:not(:first-child),
ul.framer-text > li:not(:first-child) {
  margin-top: var(--xs) !important;
}

ul.framer-text > li.framer-text:before {
  content: "" !important;
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23382E36'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
}

/* === Link Underline Animation === */

/* Credits: Obys */

@keyframes link {
  0%,
  0.1% {
    transform-origin: 100% 100%;
    transform: scaleX(1);
  }

  49.9% {
    transform-origin: 100% 100%;
    transform: scaleX(0);
  }

  50%,
  50.1% {
    transform-origin: 0 0;
    transform: scaleX(0);
  }

  to {
    transform-origin: 0 0;
    transform: scaleX(1);
  }
}

.link {
  position: relative;
}

.link::after {
  content: "";
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 0.05rem;
  pointer-events: none;
  position: absolute;
  transform: scaleX(0);
  transform-origin: 100% 100%;
  transition-duration: 0.6s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: transform;
  background: currentcolor;
}

.no-touchevents .link:hover::after {
  transform: scaleX(1);
  transform-origin: 0 0;
}

.link--underline:after {
  transform: scaleX(1);
  transform-origin: 0 0;
  animation: none;
}

.no-touchevents .link--underline:hover:after {
  animation: link 0.75s forwards;
}

.no-touchevents .link.is-hovered::after {
  transform: scaleX(1);
  transform-origin: 0 0;
}

.no-touchevents .link--underline.is-hovered::after {
  animation: link 0.75s forwards;
}

/* .touchevents .link--underline {
  text-decoration: underline;
} */

.touchevents .link--underline:after {
  /* display: none; */
  height: 0.1rem;
  bottom: -0.2rem;
}

.touchevents .link--underline--thick:after {
  height: 0.15rem;
  bottom: 0.2rem;
}

/* === Logo === */

#main
  [data-framer-name^="Preloader Container"]
  [data-framer-name="Preloader Logo"],
#main nav[data-framer-name] [data-framer-name="Mobile Nav Open Logo"],
#main header[data-framer-name="Hero"] [data-framer-name="Hero Logo"],
#main footer[data-framer-name] [data-framer-name="Footer Logo"] {
  width: 10rem;
}

/* === Preloader === */

#main [data-framer-name^="Preloader Container"] {
  visibility: visible !important;
  z-index: 10 !important;
  height: 100dvh;
}

#main [data-framer-name^="Preloader Container"] [data-framer-name="Title"] p,
#main
  [data-framer-name^="Preloader Container"]
  [data-framer-name="Loading Bar"]
  [data-framer-name="Full"],
#main
  [data-framer-name^="Preloader Container"]
  [data-framer-name="Loading Bar"]
  [data-framer-name="Loaded"],
#main
  [data-framer-name^="Preloader Container"]
  [data-framer-name="Percentage"]
  p,
#main
  [data-framer-name^="Preloader Container"]
  [data-framer-name="Preloader Logo"] {
  visibility: hidden;
}

/* === Nav === */

#main nav[data-framer-name] [data-framer-name="Nav Logo"] {
  width: auto;
  height: var(--nav-links-text-height);
}

#main nav[data-framer-name] [data-framer-name="Locale Selector"] {
  width: auto;
  height: calc(var(--sm) + var(--nav-links-text-height) + var(--sm));
  aspect-ratio: 1 / 1;
}

#main nav[data-framer-name][data-framer-name="Mobile Closed"] {
  height: 100dvh;
  min-height: 100dvh;
  user-select: none;
  pointer-events: none;
}

#main
  nav[data-framer-name][data-framer-name="Mobile Closed"]
  [data-framer-name="Menu Open Background"] {
  top: -1%;
}

#main nav[data-framer-name][data-framer-name="Mobile Open"] {
  min-height: 100dvh;
  height: 100dvh;
}

#main
  nav[data-framer-name][data-framer-name="Mobile Open"]
  [data-framer-name="Nav Wrapper"] {
  position: fixed !important;
}

#main nav[data-framer-name] [data-framer-name="Fuse"] {
  width: 2rem;
  height: 2rem;
  margin-left: -0.05rem;
  margin-right: -0.05rem;
}

#main [data-framer-name*="backdrop-blur-xs"] {
  backdrop-filter: blur(var(--xs)) !important;
}

/* === Sections === */

/* Hero */

#main header[data-framer-name="Hero"] {
  padding: var(--hero-pt) var(--lg) var(--lg);
  height: 100dvh;
}

#main [data-framer-name*="pt-hero"] {
  padding-top: var(--hero-pt);
}

.is-loading #main nav[data-framer-name] {
  visibility: hidden;
}

.is-loading #main nav[data-framer-name],
.is-loading
  #main
  header[data-framer-name="Hero"]
  [data-framer-name^="Heading Wrapper"]
  h1,
.is-loading
  #main
  header[data-framer-name="Hero"]
  [data-framer-name^="Heading Wrapper"]
  h2,
.is-loading
  #main
  header[data-framer-name="Hero"]
  [data-framer-name^="CTA Button"],
.is-loading
  #main
  header[data-framer-name="Hero"]
  [data-framer-name="Patent Wrapper"],
.is-loading
  #main
  header[data-framer-name="Hero"]
  [data-framer-name="Hero Logo"] {
  visibility: hidden;
}

#main header[data-framer-name="Hero"] [data-framer-name="Fuse"] {
  width: 0.7rem;
  height: 2.5rem;
  margin-left: -0.1rem;
  margin-right: -0.1rem;
}

/* Colored Sections */

#main section[data-framer-name^="Benefits"] [data-framer-name="Background"],
#main section[data-framer-name^="Disclaimer"] [data-framer-name="Background"] {
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% - 36rem);
}

/* Video */

#main [data-framer-name^="Play Button"] {
  width: 12rem;
  height: 12rem;
}

#main [data-framer-name^="Play Button"] [data-framer-name="Shape"] {
  width: 100%;
  height: 100%;
  margin-left: 0.5rem;
}

.touchevents [data-framer-name="Overlay Cursor Play"],
.touchevents [data-framer-name="Overlay Cursor Pause"] {
  display: none;
}

.touchevents [data-framer-name^="Overlay Wrapper"] [data-framer-name="Video"] {
  aspect-ratio: 9 / 16;
  width: auto;
  height: 100%;
  max-width: 100%;
}

.touchevents #main [data-framer-name^="Overlay Wrapper"] {
  padding-top: var(--3xl);
}

#main [data-framer-name^="Overlay Wrapper"] [data-framer-name="Close"] {
  width: 6rem;
  height: 6rem;
}

/* Footer */

.no-touchevents [data-framer-name^="Secondary Pages"] .link div.framer-text,
.no-touchevents [data-framer-name^="Address"] .link div.framer-text {
  transition: color 0.6s cubic-bezier(0.12, 0.23, 0.5, 1);
}

.no-touchevents
  [data-framer-name^="Secondary Pages"]
  .link:hover
  div.framer-text,
.no-touchevents [data-framer-name^="Address"] .link:hover div.framer-text {
  color: currentColor;
}

#main footer[data-framer-name] [data-framer-name="Back To Top Wrapper"] {
  width: 5.3rem;
  height: 5.3rem;
  bottom: -2rem;
}

#main footer[data-framer-name] [data-framer-name="Back To Top Container"] {
  width: 1rem;
  height: 1.3rem;
}

#main footer[data-framer-name] [data-framer-name="Back To Top Arrow"] {
  width: 100%;
  height: 100%;
}

/* === Elements === */

/* SVG */

#main [data-framer-name="Button Arrow"] {
  width: 0.5rem;
  height: 0.7rem;
}

#main [data-framer-name="Chapter Line"] {
  width: 0.1rem;
  height: 12rem;
}

#main [data-framer-name="Chapter Number"] {
  width: auto;
  height: 12rem;
}

#main [data-framer-name^="Carbamide Peroxide"] {
  right: 0.3rem;
}

#main [data-framer-name^="Hydrogen Peroxide"] {
  left: 0.1rem;
}

#main [data-framer-name^="Neutral pH"] {
  bottom: 0.1rem;
}

#main [data-framer-name="Spot Tobacco"],
#main [data-framer-name="Spot Coffee"],
#main [data-framer-name="Spot Wine"],
#main [data-framer-name="Spot Tea"] {
  width: 2rem;
}

#main [data-framer-name="Info Card Arrow"] {
  width: 3rem;
  height: 2.5rem;
}

#main [data-framer-name="Info Card Arrow Outline"] {
  width: 3rem;
  height: 2.6rem;
  bottom: -0.1rem;
  z-index: 5;
}

#main [data-framer-name^="Step Number"] {
  width: 3rem;
}

#main [data-framer-name^="Bullet"] {
  width: 1.5rem;
}

#main [data-framer-name^="Caret"] {
  width: 2.4rem;
}

#main [data-framer-name^="Testimonial Quote"] {
  width: auto;
  height: 2rem;
}

#main [data-framer-name^="Testimonial Quote"] [data-framer-name^="Shape"] {
  width: 100%;
  height: 100%;
}

/* Borders */

#main section[data-framer-name^="Formula"] [data-border="true"]:after {
  --border-bottom-width: 0.1rem;
  --border-left-width: 0.1rem;
  --border-right-width: 0.1rem;
  --border-top-width: 0.1rem;
}

#main #template-overlay [data-border="true"]:after {
  --border-bottom-width: 0.1rem;
  --border-left-width: 0.1rem;
  --border-right-width: 0.1rem;
  --border-top-width: 0.1rem;
}

#main [data-framer-name^="Video Wrapper"] [data-border="true"]:after {
  --border-bottom-width: 0.1rem;
  --border-left-width: 0.1rem;
  --border-right-width: 0.1rem;
  --border-top-width: 0.1rem;
}

#main
  [data-framer-name^="Questions"]
  [data-framer-name^="Content"][data-border="true"]:after {
  --border-bottom-width: 0.1rem;
}

#main
  [data-framer-name^="Questions"]
  [data-framer-name^="Caret"][data-border="true"]:after {
  --border-bottom-width: 0.1rem;
  --border-left-width: 0.1rem;
  --border-right-width: 0.1rem;
  --border-top-width: 0.1rem;
}

#main [data-framer-name^="Testimonials"] [data-border="true"]:after {
  --border-bottom-width: 0.1rem;
  --border-left-width: 0.1rem;
  --border-right-width: 0.1rem;
  --border-top-width: 0.1rem;
}

/* Cursor */

#main [data-framer-name^="_Cursor Formula"] {
  width: 10rem;
  height: 10rem;
}

#main [data-framer-name^="_Cursor Play"],
#main [data-framer-name^="_Cursor Pause"] {
  width: 8rem;
  height: 8rem;
}

#main [data-framer-name^="_Cursor Circle"] {
  width: 6rem;
  height: 6rem;
}

#main [data-framer-name^="Cursor Border Circle"],
#main [data-framer-name="Cursor Play Wrapper"] [data-framer-name="Shape"],
#main [data-framer-name="Cursor Pause Wrapper"] [data-framer-name="Shape"] {
  width: 100%;
  height: 100%;
}

/* === Media queries === */

/* From 810px onwards*/
@media (min-width: 810px) {
  /* === Global === */

  /* :root, html, body, #main */

  :root {
    --4xl: 8rem;
  }

  /* === Logo === */

  #main
    [data-framer-name^="Preloader Container"]
    [data-framer-name="Preloader Logo"],
  #main nav[data-framer-name] [data-framer-name="Mobile Nav Open Logo"],
  #main header[data-framer-name="Hero"] [data-framer-name="Hero Logo"],
  #main footer[data-framer-name] [data-framer-name="Footer Logo"] {
    width: 15rem;
  }

  /* === Sections === */

  /* Hero */

  #main header[data-framer-name="Hero"] [data-framer-name^="Container"] {
    padding-bottom: var(--2xl);
  }

  /* Video */

  .touchevents #main [data-framer-name^="Overlay Wrapper"] {
    padding-top: var(--lg);
  }

  #main [data-framer-name^="Overlay Wrapper"] [data-framer-name="Close"] {
    width: 8rem;
    height: 8rem;
  }

  /* Footer */

  #main footer[data-framer-name] {
    height: 80dvh;
  }

  #main footer[data-framer-name] [data-framer-name^="Container"] {
    height: 100%;
    align-content: space-between;
  }

  /* === Elements === */

  /* SVG */

  #main [data-framer-name="Chapter Number"] {
    height: 16rem;
  }

  #main [data-framer-name="Spot Tobacco"],
  #main [data-framer-name="Spot Coffee"],
  #main [data-framer-name="Spot Wine"],
  #main [data-framer-name="Spot Tea"] {
    width: 3rem;
  }

  /* Cursor */

  #main [data-framer-name^="_Cursor Formula"] {
    width: 15rem;
    height: 15rem;
  }
}

/* From 1200px onwards*/
@media (min-width: 1200px) {
  /* === Sections === */

  /* Colored Sections */

  #main section[data-framer-name^="Benefits"] [data-framer-name="Background"],
  #main
    section[data-framer-name^="Disclaimer"]
    [data-framer-name="Background"] {
    height: calc(100% - 48rem);
  }

  /* FAQ */

  #main [data-framer-name="Questions"] [data-framer-name^="Answer"] {
    width: calc((((100% - 5 * var(--lg)) / 6) * 5) + (4 * var(--lg)));
  }

  /* Footer */

  #main footer[data-framer-name] {
    height: min-content;
  }

  #main footer[data-framer-name] [data-framer-name^="Container"] {
    height: min-content;
    align-content: initial;
  }

  /* === Elements === */

  /* SVG */

  #main [data-framer-name="Chapter Number"] {
    height: 20rem;
  }
}

/* From 1600px onwards*/
@media (min-width: 1600px) {
}

/* From 2000px onwards*/
@media (min-width: 2000px) {
}