/* GLOBAL SITE CSS - ADD CSS TO AFFECT THE WHOLE SITE */
/* ==========================================================
   Ubiweb Site CSS
   Manual project-level CSS only.
   Generated theme classes begin at GENERATED_CLASSES_BEGIN.
   Do not manually edit generated theme output.
   ========================================================== */



/* ==========================================================
   1. Site Tokens
   ========================================================== */


/* Theme letter-spacing overrides */
#dm {
  --theme-body-letter-spacing-desktop: 0.04em;
  --theme-h6-letter-spacing-desktop: 0.03em;
  --theme-h5-letter-spacing-desktop: 0.01em;
  --theme-h4-letter-spacing-desktop: 0.007em;
  --theme-h3-letter-spacing-desktop: 0.007em;
  --theme-h2-letter-spacing-desktop: 0.005em;
  --theme-h1-letter-spacing-desktop: 0.005em;


  --theme-body-letter-spacing: var(--theme-body-letter-spacing-desktop);
  --theme-h6-letter-spacing: var(--theme-h6-letter-spacing-desktop);
  --theme-h5-letter-spacing: var(--theme-h5-letter-spacing-desktop);
  --theme-h4-letter-spacing: var(--theme-h4-letter-spacing-desktop);
  --theme-h3-letter-spacing: var(--theme-h3-letter-spacing-desktop);
  --theme-h2-letter-spacing: var(--theme-h2-letter-spacing-desktop);
  --theme-h1-letter-spacing: var(--theme-h1-letter-spacing-desktop);
}


/* ==========================================================
   3. Imported Interaction Configuration
   ========================================================== */

#dm .bg-anim-glow {
  --bg-anim-glow-before: var(--color_10);
  --bg-anim-glow-after: var(--color_1);
  --bg-anim-glow-current: var(--bg-anim-glow-before);
  --bg-anim-glow-intensity: 15%;
  --bg-anim-glow-radius: 15%;
}

#dm .bg-anim-glow.bg-active {
  --bg-anim-glow-current: var(--bg-anim-glow-after);
}

#dm .bg-anim-glow
  > section[data-auto="flex-element-section"]
  > [data-auto="flex-element-grid"] {
  background-image: radial-gradient(
    circle at var(--bg-anim-glow-x, 50%) var(--bg-anim-glow-y, 50%),
    color-mix(
      in srgb,
      var(--bg-anim-glow-current) var(--bg-anim-glow-intensity, 15%),
      transparent
    ) 0%,
    transparent var(--bg-anim-glow-radius, 15%)
  ) !important;
}
#dm .carousel-scroll-nav-marker-row {
    width: 100% !important;
}
#dm .carousel-scroll-nav-marker-row hr {
    margin-top: 0px !important;
}
#dm [data-auto="flex-section"].bg-anim-2-5
  > [data-auto="flex-element-section"]
  > [data-auto="flex-element-grid"] {
  background: var(--color_2) !important;
  transition: background 400ms ease;
}

#dm [data-auto="flex-section"].bg-anim-2-5.bg-active
  > [data-auto="flex-element-section"]
  > [data-auto="flex-element-grid"] {
  background: var(--color_5) !important;
}

strong {
    font-weight: 900 !important;
}


/* ==========================================================
   5. Site-Specific Utility Classes
   ========================================================== */


/* Sticky frame */
#dm#dm .pinned-8vw {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 8vw !important;
  align-self: flex-start !important;
  height: max-content !important;
  max-height: none !important;
  z-index: 3;
}
#dm#dm .pinned-10vw {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 10vw !important;
  align-self: flex-start !important;
  height: max-content !important;
  max-height: none !important;
  z-index: 3;
}
  /* Logotype - only apply when explicitly applied*/
#dmRoot #dm .galano.galano,
#dmRoot #dm .galano.galano :is(
  .dmNewParagraph,
  .adv-stagger-line,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  ul,
  ol,
  li,
  a
) {
  font-family: GalanoGrotesque-SemiBold !important;
}
    
.radial-gradient-bg-red {
  background: radial-gradient(
    ellipse 80% 70% at center 60%,
    var(--red),
    color-mix(in srgb, var(--color_1), transparent) 20%,
    transparent 60%
  );
}



.shadow-coral {
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color_13) 30%, transparent) !important;
}




/* ==========================================================
   6. Typography Utility Classes
   ========================================================== */

#dm .text-xs {
  --text-util-font-size: 13px;
  --text-util-line-height: 1.55;
  --text-util-letter-spacing: 0.325px;
  --text-util-font-family: PPNeueMontreal-Book;
}

#dm .text-sm {
  --text-util-font-size: 15px;
  --text-util-line-height: 1.45;
  --text-util-letter-spacing: 0.1875px;
  --text-util-font-family: PPNeueMontreal-Book;
}

#dm .text-xl {
  --text-util-font-size: 80px;
  --text-util-line-height: 1.05;
  --text-util-letter-spacing: 0.0045em;
  --text-util-font-family: PPNeueMontreal-Medium;
}

#dm .text-2xl {
  --text-util-font-size: 90px;
  --text-util-line-height: 1.02;
  --text-util-letter-spacing: 0.0045em;
  --text-util-font-family: PPNeueMontreal-Medium;
}

#dm .upper-xs {
  --text-util-font-size: 13px;
  --text-util-line-height: 1.4;
  --text-util-letter-spacing: 0.09em;
  --text-util-font-family: PPNeueMontreal-Medium;
}

#dm .upper-sm {
  --text-util-font-size: 14px;
  --text-util-line-height: 1.5;
  --text-util-letter-spacing: 0.1em;
  --text-util-font-family: PPNeueMontreal-Medium;
}

#dm .upper {
  --text-util-font-size: 16px;
  --text-util-line-height: 1.5;
  --text-util-letter-spacing: 0.12em;
  --text-util-font-family: PPNeueMontreal-Medium;
}

#dm :is(
  .text-xs,
  .text-sm,
  .text-xl,
  .text-2xl,
  .upper-xs,
  .upper-sm,
  .upper
),
#dm :is(
  .text-xs,
  .text-sm,
  .text-xl,
  .text-2xl,
  .upper-xs,
  .upper-sm,
  .upper
) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  ul,
  ol,
  li,
  a,
  .dmNewParagraph[data-binding]
) {
  font-size: var(--text-util-font-size) !important;
  line-height: var(--text-util-line-height) !important;
  letter-spacing: var(--text-util-letter-spacing) !important;
  font-family: var(--text-util-font-family) !important;
}

#dmRoot #dm :is(
  .text-xs,
  .text-sm,
  .text-xl,
  .text-2xl,
  .upper-xs,
  .upper-sm,
  .upper
) .dmNewParagraph,
#dmRoot #dm :is(
  .text-xs,
  .text-sm,
  .text-xl,
  .text-2xl,
  .upper-xs,
  .upper-sm,
  .upper
) .dmNewParagraph :where(
  p,
  span,
  ul,
  ol,
  li,
  a
) {
  font-size: var(--text-util-font-size) !important;
  line-height: var(--text-util-line-height) !important;
  letter-spacing: var(--text-util-letter-spacing) !important;
  font-family: var(--text-util-font-family) !important;
}

#dm :is(.upper-xs, .upper-sm, .upper),
#dm :is(.upper-xs, .upper-sm, .upper) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  ul,
  ol,
  li,
  a,
  .dmNewParagraph[data-binding]
) {
  text-transform: uppercase !important;
}

#dm :is(.bold):where([class*="theme-"], [class*="text-"]),
#dm :is(.bold):where([class*="theme-"], [class*="text-"]) :where(
  .dmNewParagraph,
  .dmNewParagraph[data-binding],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  li,
  a
) {
  font-family: PPNeueMontreal-Semibold !important;
  font-style: normal !important;
}

#dm :is(.italic):where([class*="theme-"], [class*="text-"]),
#dm :is(.italic):where([class*="theme-"], [class*="text-"]) :where(
  .dmNewParagraph,
  .dmNewParagraph[data-binding],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  li,
  a
) {
  font-family: PPNeueMontreal-HairlineItalic !important;
  font-style: normal !important;
}

#dm :is(.thin):where([class*="theme-"], [class*="text-"]),
#dm :is(.thin):where([class*="theme-"], [class*="text-"]) :where(
  .dmNewParagraph,
  .dmNewParagraph[data-binding],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  li,
  a
) {
  font-family: PPNeueMontreal-Hairline !important;
  font-style: normal !important;
}
#dm :is(.light):where([class*="theme-"], [class*="text-"]),
#dm :is(.light):where([class*="theme-"], [class*="text-"]) :where(
  .dmNewParagraph,
  .dmNewParagraph[data-binding],
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  li,
  a
) {
  font-family: PPNeueMontreal-Light !important;
  font-style: normal !important;
}

/* ==========================================================
   7. Breakpoint Overrides
   ========================================================== */

@media (min-width: 1025px) {
#dm .carousel-scroll-nav-marker-row {
    display: none !important;
}
.bg-tablet-only > .videobgwrapper,
.bg-mobile-only > .videobgwrapper {
  display: none !important;
}
  .ubia-d {
      aspect-ratio: 2368 / 1200 !important;
    }  
}


@media (min-width: 768px) and (max-width: 1024px) {
  #dm {
    --theme-body-letter-spacing: var(--theme-body-letter-spacing-tablet, var(--theme-body-letter-spacing-desktop));
    --theme-h6-letter-spacing: var(--theme-h6-letter-spacing-tablet, var(--theme-h6-letter-spacing-desktop));
    --theme-h5-letter-spacing: var(--theme-h5-letter-spacing-tablet, var(--theme-h5-letter-spacing-desktop));
    --theme-h4-letter-spacing: var(--theme-h4-letter-spacing-tablet, var(--theme-h4-letter-spacing-desktop));
    --theme-h3-letter-spacing: var(--theme-h3-letter-spacing-tablet, var(--theme-h3-letter-spacing-desktop));
    --theme-h2-letter-spacing: var(--theme-h2-letter-spacing-tablet, var(--theme-h2-letter-spacing-desktop));
    --theme-h1-letter-spacing: var(--theme-h1-letter-spacing-tablet, var(--theme-h1-letter-spacing-desktop));
  }
  .bg-desktop-only > .videobgwrapper,
  .bg-mobile-only > .videobgwrapper {
    display: none !important;
  }

  .bg-tablet-only > .videobgwrapper {
    display: block !important;
  }
  .ubia-t {
      aspect-ratio: 1 / 1 !important;
    }  
}

@media (max-width: 767px) {
#dm .carousel-scroll-nav-marker-col {
    display: none !important;
}
.radial-gradient-bg-red {
  background: radial-gradient(
    ellipse 60% 60% at left 60%,
    var(--red),
    color-mix(in srgb, var(--color_1), transparent) 20%,
    transparent 60%
  );
}
  .bg-desktop-only > .videobgwrapper,
  .bg-tablet-only > .videobgwrapper {
    display: none !important;
  }

  .bg-mobile-only > .videobgwrapper {
    display: block !important;
  }
  
  .ubia-m {
  aspect-ratio: 428 / 600 !important;
}


  #dm .text-xs {
    --text-util-font-size: 12px;
  }

  #dm .text-sm {
    --text-util-font-size: 13px;
  }

  #dm .text-xl {
    --text-util-font-size: 56px;
  }

  #dm .text-2xl {
    --text-util-font-size: 72px;
    --text-util-line-height: 1.05;
  }

  #dm .upper-xs {
    --text-util-font-size: 12px;
    --text-util-letter-spacing: 0.06em;
  }

  #dm .upper-sm {
    --text-util-font-size: 13px;
    --text-util-line-height: 1.45;
    --text-util-letter-spacing: 0.08em;
  }

  #dm .upper {
    --text-util-font-size: 15px;
    --text-util-letter-spacing: 0.1em;
  }

  #dm {
    --theme-body-letter-spacing: var(--theme-body-letter-spacing-mobile, var(--theme-body-letter-spacing-tablet, var(--theme-body-letter-spacing-desktop)));
    --theme-h6-letter-spacing: var(--theme-h6-letter-spacing-mobile, var(--theme-h6-letter-spacing-tablet, var(--theme-h6-letter-spacing-desktop)));
    --theme-h5-letter-spacing: var(--theme-h5-letter-spacing-mobile, var(--theme-h5-letter-spacing-tablet, var(--theme-h5-letter-spacing-desktop)));
    --theme-h4-letter-spacing: var(--theme-h4-letter-spacing-mobile, var(--theme-h4-letter-spacing-tablet, var(--theme-h4-letter-spacing-desktop)));
    --theme-h3-letter-spacing: var(--theme-h3-letter-spacing-mobile, var(--theme-h3-letter-spacing-tablet, var(--theme-h3-letter-spacing-desktop)));
    --theme-h2-letter-spacing: var(--theme-h2-letter-spacing-mobile, var(--theme-h2-letter-spacing-tablet, var(--theme-h2-letter-spacing-desktop)));
    --theme-h1-letter-spacing: var(--theme-h1-letter-spacing-mobile, var(--theme-h1-letter-spacing-tablet, var(--theme-h1-letter-spacing-desktop)));
  }
}


/* ==========================================================
   Generated Theme Classes
   Generated by duda-theme-text-classes.js.
   Do not manually edit below this marker.
   ========================================================== */

/*GENERATED_CLASSES_BEGIN*/
/*_______ _    _ ______ __  __ ______    _____ _               _____  _____ ______  _____
 |__   __| |  | |  ____|  \/  |  ____|  / ____| |        /\   / ____|/ ____|  ____|/ ____|
    | |  | |__| | |__  | \  / | |__    | |    | |       /  \ | (___ | (___ | |__  | (___
    | |  |  __  |  __| | |\/| |  __|   | |    | |      / /\ \ \___ \ \___ \|  __|  \___ \
    | |  | |  | | |____| |  | | |____  | |____| |____ / ____ \____) |____) | |____ ____) |
    |_|  |_|  |_|______|_|  |_|______|  \_____|______/_/    \_\_____/_____/|______|_____/
*/
/* Native Duda theme override adapter */

#dmRoot #dm div.dmNewParagraph p,
#dmRoot #dm div.dmNewParagraph li {
  letter-spacing: var(--theme-body-letter-spacing);
}

#dmRoot *#dm div.dmContent h1,
#dmRoot *#dm div.dmFooter h1,
#dmRoot *#dm div.p_hfcontainer h1,
#dmRoot *#dm div.flex_hfcontainer h1,
#dmRoot *#dm div.dm-title h1 {
  letter-spacing: var(--theme-h1-letter-spacing);
}

#dmRoot *#dm div.dmContent h2,
#dmRoot *#dm div.dmFooter h2,
#dmRoot *#dm div.p_hfcontainer h2,
#dmRoot *#dm div.flex_hfcontainer h2,
#dmRoot *#dm div.dm-title h2 {
  letter-spacing: var(--theme-h2-letter-spacing);
}

#dmRoot *#dm div.dmContent h3,
#dmRoot *#dm div.dmFooter h3,
#dmRoot *#dm div.p_hfcontainer h3,
#dmRoot *#dm div.flex_hfcontainer h3,
#dmRoot *#dm div.dm-title h3 {
  letter-spacing: var(--theme-h3-letter-spacing);
}

#dmRoot *#dm div.dmContent h4,
#dmRoot *#dm div.dmFooter h4,
#dmRoot *#dm div.p_hfcontainer h4,
#dmRoot *#dm div.flex_hfcontainer h4,
#dmRoot *#dm div.dm-title h4 {
  letter-spacing: var(--theme-h4-letter-spacing);
}

#dmRoot *#dm div.dmContent h5,
#dmRoot *#dm div.dmFooter h5,
#dmRoot *#dm div.p_hfcontainer h5,
#dmRoot *#dm div.flex_hfcontainer h5,
#dmRoot *#dm div.dm-title h5 {
  letter-spacing: var(--theme-h5-letter-spacing);
}

#dmRoot *#dm div.dmContent h6,
#dmRoot *#dm div.dmFooter h6,
#dmRoot *#dm div.p_hfcontainer h6,
#dmRoot *#dm div.flex_hfcontainer h6,
#dmRoot *#dm div.dm-title h6 {
  letter-spacing: var(--theme-h6-letter-spacing);
}

#dm .theme-body {
  --theme-color: var(--color_8);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Book;
  --theme-font-weight: 300;
  --theme-font-style: normal;
  --theme-font-size: 18px;
  --theme-line-height: 1.5;
  --theme-letter-spacing: var(--theme-body-letter-spacing);
  --theme-text-decoration: none;
}

#dm .theme-h1 {
  --theme-color: rgb(255, 250, 250);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Medium;
  --theme-font-weight: 400;
  --theme-font-style: normal;
  --theme-font-size: 75px;
  --theme-line-height: 1.1;
  --theme-letter-spacing: var(--theme-h1-letter-spacing);
  --theme-text-decoration: none;
}

#dm .theme-h2 {
  --theme-color: var(--color_9);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Medium;
  --theme-font-weight: 500;
  --theme-font-style: normal;
  --theme-font-size: 45px;
  --theme-line-height: 1.1;
  --theme-letter-spacing: var(--theme-h2-letter-spacing);
  --theme-text-decoration: none;
}

#dm .theme-h3 {
  --theme-color: var(--color_9);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Medium;
  --theme-font-weight: 400;
  --theme-font-style: normal;
  --theme-font-size: 36px;
  --theme-line-height: 1.2;
  --theme-letter-spacing: var(--theme-h3-letter-spacing);
  --theme-text-decoration: none;
}

#dm .theme-h4 {
  --theme-color: var(--color_9);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Medium;
  --theme-font-weight: 400;
  --theme-font-style: normal;
  --theme-font-size: 30px;
  --theme-line-height: 1.3;
  --theme-letter-spacing: var(--theme-h4-letter-spacing);
  --theme-text-decoration: none;
}

#dm .theme-h5 {
  --theme-color: var(--color_8);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Book;
  --theme-font-weight: 500;
  --theme-font-style: normal;
  --theme-font-size: 24px;
  --theme-line-height: 1.4;
  --theme-letter-spacing: var(--theme-h5-letter-spacing);
  --theme-text-decoration: none;
}

#dm .theme-h6 {
  --theme-color: var(--color_8);
  --theme-direction: ltr;
  --theme-font-family: PPNeueMontreal-Book;
  --theme-font-weight: 400;
  --theme-font-style: normal;
  --theme-font-size: 20px;
  --theme-line-height: 1.5;
  --theme-letter-spacing: var(--theme-h6-letter-spacing);
  --theme-text-decoration: none;
}

/*
  Duda text adapter.
  Keep this selector low-specificity so widget-level modifiers like
  .adv-text-span[data-thin="true"] can override generated theme values.
*/
#dm :where(
  .theme-body,
  .theme-h1,
  .theme-h2,
  .theme-h3,
  .theme-h4,
  .theme-h5,
  .theme-h6
),
#dm :where(
  .theme-body,
  .theme-h1,
  .theme-h2,
  .theme-h3,
  .theme-h4,
  .theme-h5,
  .theme-h6
) :where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  li,
  a,
  .dmNewParagraph[data-binding]
) {
  color: var(--theme-color);
  direction: var(--theme-direction);
  font-family: var(--theme-font-family) !important;
  font-weight: var(--theme-font-weight) !important;
  font-style: var(--theme-font-style);
  font-size: var(--theme-font-size) !important;
  line-height: var(--theme-line-height) !important;
  letter-spacing: var(--theme-letter-spacing) !important;
  text-decoration: var(--theme-text-decoration);
  text-transform: var(--theme-text-transform);
}

@media (min-width: 1025px) {
  #dm .theme-body {
    --theme-font-size: 18px;
    --theme-letter-spacing: var(--theme-body-letter-spacing);
  }

  #dm .theme-h1 {
    --theme-font-size: 70px;
    --theme-line-height: 1.1;
    --theme-letter-spacing: var(--theme-h1-letter-spacing);
  }

  #dm .theme-h2 {
    --theme-font-size: 55px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h2-letter-spacing);
  }

  #dm .theme-h3 {
    --theme-font-size: 36px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h3-letter-spacing);
  }

  #dm .theme-h4 {
    --theme-font-size: 30px;
    --theme-line-height: 1.3;
    --theme-letter-spacing: var(--theme-h4-letter-spacing);
  }

  #dm .theme-h5 {
    --theme-font-size: 24px;
    --theme-line-height: 1.4;
    --theme-letter-spacing: var(--theme-h5-letter-spacing);
  }

  #dm .theme-h6 {
    --theme-font-size: 20px;
    --theme-line-height: 1.5;
    --theme-letter-spacing: var(--theme-h6-letter-spacing);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #dm .theme-body {
    --theme-font-size: 18px;
    --theme-letter-spacing: var(--theme-body-letter-spacing);
  }

  #dm .theme-h1 {
    --theme-font-size: 70px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h1-letter-spacing);
  }

  #dm .theme-h2 {
    --theme-font-size: 55px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h2-letter-spacing);
  }

  #dm .theme-h3 {
    --theme-font-size: 36px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h3-letter-spacing);
  }

  #dm .theme-h4 {
    --theme-font-size: 30px;
    --theme-letter-spacing: var(--theme-h4-letter-spacing);
  }

  #dm .theme-h5 {
    --theme-font-size: 24px;
    --theme-line-height: 1.4;
    --theme-letter-spacing: var(--theme-h5-letter-spacing);
  }

  #dm .theme-h6 {
    --theme-font-size: 20px;
    --theme-letter-spacing: var(--theme-h6-letter-spacing);
  }
}

@media (max-width: 767px) {
  #dm .theme-body {
    --theme-font-size: 16px;
    --theme-letter-spacing: var(--theme-body-letter-spacing);
  }

  #dm .theme-h1 {
    --theme-font-size: 50px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h1-letter-spacing);
  }

  #dm .theme-h2 {
    --theme-font-size: 45px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h2-letter-spacing);
  }

  #dm .theme-h3 {
    --theme-font-size: 28px;
    --theme-line-height: 1.2;
    --theme-letter-spacing: var(--theme-h3-letter-spacing);
  }

  #dm .theme-h4 {
    --theme-font-size: 24px;
    --theme-letter-spacing: var(--theme-h4-letter-spacing);
  }

  #dm .theme-h5 {
    --theme-font-size: 20px;
    --theme-letter-spacing: var(--theme-h5-letter-spacing);
  }

  #dm .theme-h6 {
    --theme-font-size: 18px;
    --theme-letter-spacing: var(--theme-h6-letter-spacing);
  }
}
/*GENERATED_CLASSES_END*/