/* ------------------------- Scaling system -------------------------------------------------- */

/* Desktop */
:root {
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1920;
  /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 2240px;
  --size-container: clamp(var(--size-container-min), 100dvw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --vh: 1vh;
  /* fallback before JS runs */
  --full-screen-height: 100dvh;
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 991;
    /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
    --full-screen-height: calc(var(--vh) * 100);
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 767;
    /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 479;
    /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

body {
  font-size: var(--size-font);
}

.container {
  max-width: var(--size-container);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small {
  max-width: calc(var(--size-container) * 0.7);
}

/* ------------------------- Transitions -------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
li,
ul,
ol {
  transition-property: background, font-size;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.77, 0, .18, 1);
}

img {
  transition-property: box-shadow, background, filter;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.77, 0, .18, 1);
}

/* ------------------------- Lenis: CSS -------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ------------------------- Remove empty CMS items -------------------------------------------------- */

[data-cms-section]:not(:has(.w-dyn-item)) {
  display: none;
}

/* ------------------------- Cursor selection -------------------------------------------------- */
::selection {
  background: var(--_theme---cursor-select-bg);
  color: var(--_theme---cursor-select-text);
}

::-moz-selection {
  /* Code for Firefox */
  background: var(--_theme---cursor-select-bg);
  color: var(--_theme---cursor-select-text);
}

/* ------------------------- Hide -------------------------------------------------- */

.hide {
  display: none !important;
}

@media screen and (min-width: 992px) {

  .hide,
  .hide-desktop {
    display: none !important;
  }
}

@media screen and (min-width: 480px) {

  .hide,
  .hide-desktop-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 991px) {

  .hide,
  .hide-tablet-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile {
    display: none !important;
  }
}

/* ------------------------- Tab accessibility -------------------------------------------------- */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid var(--color-mode-default--focus-state);
  outline-offset: 0.125rem;
}

/* ------------------------- Rich text reset -------------------------------------------------- */

/* Get rid of top margin on first element in any rich text element */
.w-richtext> :not(div):first-child,
.w-richtext>div:first-child> :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0;
}

/* ------------------------- Hide Scrollbar -------------------------------------------------- */

body ::-webkit-scrollbar {
  display: none;
}

/* Chrome, Safari, Opera */
body {
  -ms-overflow-style: none;
}

/* IE & Edge */
html {
  scrollbar-width: none;
}

/* Firefox */

/* ------------------------- Global padding/margin utility -------------------------------------------------- */

.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* ------------------------- Remove highlights on mobile link tap -------------------------------------------------- */

body {
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: 0;
}

/* ------------------------- Text clarity -------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------- Text truncate -------------------------------------------------- */

/* Truncate after 1 line */
.text-truncate-line-01 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Truncate after 2 lines */
.text-truncate-line-02 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Truncate after 3 lines */
.text-truncate-line-03 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Truncate after 4 lines */
.text-truncate-line-04 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* ------------------------- Variable fonts -------------------------------------------------- */
/*
h1, h2, h3, h4, h5, h6 {
  font-family: var(--typography--heading-style);
  font-weight: 500 !important;
  color: 	var(--color-mode-default--heading);
  line-height: 1;
  letter-spacing: -0.06em;
}

[class*="heading-style-"] {
  font-family: var(--typography--heading-style) !important;
  font-weight: 500 !important;
	color: 	var(--color-mode-default--heading);
	line-height: 1;
  letter-spacing: -0.06em;
}
*/

/* ------------------------- Webflow overrides -------------------------------------------------- */

button {
  all: unset;
  cursor: pointer;
  pointer-events: auto;
}

button:focus {
  outline: revert;
}

/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/

a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

/* Remove the default Webflow icons from Input- Select and Text Area fields */
input,
select,
textarea {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important
}

/* Dropdown Toggle */
.w-dropdown-toggle,
.w-dropdown-toggle.w--open {
  margin: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ------------------------- Extras -------------------------------------------------- */

/* Lottie path */
.lottie path {
  stroke: currentColor;
  fill: currentColor;
}

/* Hamburger Button animation */
.centered-nav__toggle .centered-nav__toggle-bar {
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transform: translateY(-0.25em) rotate(0.001deg);
}

.centered-nav__toggle:hover .centered-nav__toggle-bar {
  transform: translateY(0.25em) rotate(0.001deg);
}

.centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(0.15em) rotate(0.001deg);
}

.centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-menu-open="true"] .centered-nav__toggle .centered-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

[data-menu-open="true"] .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}