/* ==========================================================================
   GLOBAL FIXES
========================================================================== */

html.is--locked,
body.is--locked {
  overflow: hidden !important;
}

body {
  overflow-x: hidden;
}

/* ==========================================================================
   BUTTON CHARACTER HOVER
========================================================================== */

[data-button-animate-chars] {
  display: inline-block;
  overflow: hidden;
}

[data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0 1.25em currentColor;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover [data-button-animate-chars] span,
  .nav--link:hover [data-button-animate-chars] span,
  .nav--left:hover [data-button-animate-chars] span {
    transform: translateY(-1.25em);
  }
}

/* ==========================================================================
   BTN ROD HOVER
========================================================================== */

.btn--wrapper {
  cursor: pointer;
}

.btn--rod {
  transform-origin: left center;
  will-change: transform;
}

/* ==========================================================================
   SIDE NAV
========================================================================== */

.side--nav {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.side--nav.is--open {
  pointer-events: auto;
}

.side--nav-menu {
  will-change: transform, opacity;
  pointer-events: none;
}

.side--nav-menu > * {
  pointer-events: auto;
}

/* ==========================================================================
   MENU ICONS
========================================================================== */

.menu--trigger {
  position: relative;
}

.menu--to-open,
.menu--to-close {
  display: block;
  color: currentColor;
  transition: none;
  will-change: transform, opacity;
}

.menu--to-close {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   SIDE NAV DESKTOP HOVER
========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .side--nav-menu .nav--link {
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  .side--nav-menu:hover .nav--link {
    opacity: 0.45;
  }

  .side--nav-menu .nav--link:hover,
  .side--nav-menu .nav--drop.is--drop-open > .nav--link.is--trigger,
  .side--nav-menu .nav--drop.is--drop-open .nav--sub-drop .nav--link {
    opacity: 1;
  }
}

/* ==========================================================================
   LOAD ANIMATIONS
========================================================================== */

[animation="load"],
[animation="load-up"],
[animation="load-left"],
[animation="load-right"],
[animation="load-split"] {
  will-change: transform, opacity;
}

[animation="load-split"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.load-split__line-mask {
  display: block;
  overflow: hidden;
}

.load-split__line {
  display: block;
}

/* ==========================================================================
   FADE / SPLIT ANIMATIONS
========================================================================== */

[animation="fade"],
[animation="fade-up"],
[animation="fade-left"],
[animation="fade-right"],
[animation="fade-stagger"] > *,
[animation="fade-split"] {
  will-change: transform, opacity;
}

[animation="fade-split"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.fade-split__line-mask {
  display: block;
  overflow: hidden;
}

.fade-split__line {
  display: block;
}

/* ==========================================================================
   VIMEO PLAYER
========================================================================== */

/* Cover */

.vimeo-player[data-vimeo-update-size="cover"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

/* Placeholder */

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__placeholder {
  opacity: 0;
}

/* Dark overlay */

.vimeo-player[data-vimeo-playing="false"] .vimeo-player__dark {
  opacity: 0.33;
}

.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__dark {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__dark {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vimeo-player[data-vimeo-hover="true"]:hover .vimeo-player__dark {
    opacity: 0.33 !important;
  }
}

/* Pause */

.vimeo-player .vimeo-player__pause {
  display: none;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__pause {
  display: flex;
}

.vimeo-player .vimeo-player__pause .vimeo-player__btn {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__pause
  .vimeo-player__btn,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__pause
  .vimeo-player__btn {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]
    .vimeo-player__pause
    .vimeo-player__btn {
    opacity: 0 !important;
  }
}

/* Play */

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__play {
  opacity: 0;
}

/* Loading */

.vimeo-player .vimeo-player__loading {
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__loading {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"]
  .vimeo-player__loading {
  opacity: 0;
}

/* Interface */

.vimeo-player .vimeo-player__interface {
  opacity: 0;
}

.vimeo-player .vimeo-player__interface * {
  pointer-events: all;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__interface,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__interface {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]
    .vimeo-player__interface {
    opacity: 0 !important;
  }
}

/* Interface variables */

.vimeo-player {
  --timeline-rounded-corners: 1.5em;
  --timeline-dot-height: 0.75em;
  --timeline-dot-color: #ffffff;
  --progress-bg: rgba(239, 238, 236, 0.2);
  --progress-fill-bg: #ffffff;
  --progress-height: 0.2em;
}

/* Interface timeline */

.vimeo-player progress::-webkit-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--progress-bg);
  box-shadow: 0;
}

.vimeo-player progress::-webkit-progress-value {
  background: var(--progress-fill-bg);
}

.vimeo-player progress::-moz-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background: var(--progress-fill-bg);
  box-shadow: 0;
}

.vimeo-player progress::-ms-fill {
  border-radius: var(--timeline-rounded-corners);
}

/* Interface range */

.vimeo-player [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.vimeo-player [type="range"]:focus {
  outline: none;
}

.vimeo-player [type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
  border-radius: var(--timeline-rounded-corners);
}

.vimeo-player [type="range"]::-webkit-slider-thumb {
  width: var(--timeline-dot-height);
  height: var(--timeline-dot-height);
  margin-top: calc(
    (var(--progress-height) / 2) - (var(--timeline-dot-height) / 2)
  );
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--timeline-dot-color);
  cursor: pointer;
  box-shadow: 0;
  -webkit-appearance: none;
}

.vimeo-player [type="range"]::-webkit-slider-runnable-track,
.vimeo-player [type="range"]:focus::-webkit-slider-runnable-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-moz-range-track {
  width: 100%;
  height: var(--progress-height);
  overflow: hidden;
  border: 0;
  border-radius: var(--timeline-rounded-corners);
  background: var(--progress-bg);
  cursor: pointer;
  opacity: 1 !important;
}

.vimeo-player [type="range"]::-moz-range-thumb {
  width: var(--timeline-dot-height);
  height: var(--timeline-dot-height);
  border: 0;
  border-radius: var(--timeline-rounded-corners);
  background: var(--timeline-dot-color);
  cursor: pointer;
  box-shadow: 0;
}

/* Interface mute */

.vimeo-player .vimeo-player__mute svg:nth-child(2),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__mute svg:nth-child(1),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(2) {
  display: block;
}

/* Interface fullscreen */

.vimeo-player .vimeo-player__fullscreen svg:nth-child(2),
.vimeo-player[data-vimeo-fullscreen="true"]
  .vimeo-player__fullscreen
  svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__fullscreen svg:nth-child(1),
.vimeo-player[data-vimeo-fullscreen="true"]
  .vimeo-player__fullscreen
  svg:nth-child(2) {
  display: block;
}

/* ==========================================================================
   VIMEO BACKGROUND VIDEO
========================================================================== */

/* Placeholder */

.vimeo-bg[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-bg__placeholder {
  opacity: 0;
  transition-delay: 0.2s;
}

/* Play / pause */

.vimeo-bg .vimeo-bg__pause {
  display: none;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__pause {
  display: flex;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__pause,
.vimeo-bg[data-vimeo-playing="false"] .vimeo-bg__play {
  opacity: 1;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__play,
.vimeo-bg[data-vimeo-playing="false"] .vimeo-bg__pause {
  opacity: 0;
}

/* ==========================================================================
   HERO TITLE - BASE
========================================================================== */

.hero--title {
  --text-gap: 1.5rem;
  --animation-duration: 0.85s;
  --logo-width: 2.8rem;

  position: relative;
  display: inline-block;

  width: var(--logo-width);

  cursor: pointer;
  overflow: visible;
}

/* ==========================================================================
   HERO TITLE - CENTER LOGO LINK
========================================================================== */

.hero--title > a {
  position: relative;
  z-index: 3;

  display: block;

  width: 100%;
  height: auto;

  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   HERO TITLE - CENTER LOGO
========================================================================== */

.hero--title .brand--hero {
  display: block;

  width: 100%;
  height: auto;

  transform: none !important;
  transition: none !important;

  will-change: auto;
}

/* ==========================================================================
   HERO TITLE - TEXT WRAPPERS
========================================================================== */

.hero--title > div {
  position: absolute;
  top: 50%;
  z-index: 1;

  display: flex;
  width: max-content;

  white-space: nowrap;
  pointer-events: none;

  transform: translateY(-50%);
}

/* ==========================================================================
   HERO TITLE - TEXT
========================================================================== */

.hero--title > div p {
  margin: 0;

  opacity: 0;
  filter: blur(4px);

  transition: transform var(--animation-duration) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter var(--animation-duration) cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform, opacity, filter;
}

/* ==========================================================================
   HERO TITLE - LEFT TEXT
========================================================================== */

.hero--title > div:first-child {
  right: calc(100% + var(--text-gap));
  justify-content: flex-end;
}

.hero--title > div:first-child p {
  transform: translateX(calc(100% + var(--text-gap)));
}

/* ==========================================================================
   HERO TITLE - RIGHT TEXT
========================================================================== */

.hero--title > div:last-child {
  left: calc(100% + var(--text-gap));
  justify-content: flex-start;
}

.hero--title > div:last-child p {
  transform: translateX(calc(-100% - var(--text-gap)));
}

/* ==========================================================================
   HERO TITLE - HOVER REVEAL
========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .hero--title:hover > div p {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

/* ==========================================================================
   HERO TITLE - REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero--title > div p {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   IMAGE HOVER ZOOM
========================================================================== */

[image-hover="zoom"],
[image-hover="zoom"] > div:first-child {
  height: 100%;
  overflow: hidden;
}

[image-hover="zoom"] img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

/* ==========================================================================
   SIDE NAV — LINKS / DROPDOWNS
   Webflow keeps control of layout, dimensions, padding and positioning.
========================================================================== */

/* Default state: #353535 at 60% */
.side--nav-menu > .nav--link,
.side--nav-menu > .nav--drop > .nav--link.is--trigger,
.nav--sub-drop_inside .nav--link {
  color: #35353599;
  transition: all 0.3s ease;
}

.side--nav-menu > .nav--link:hover,
.side--nav-menu > .nav--drop > .nav--link.is--trigger:hover,
.nav--sub-drop_inside .nav--link:hover {
  color: #000000;
}

/* Current direct page */
.side--nav-menu .nav--link.w--current,
.nav--sub-drop_inside .nav--link.w--current {
  color: #000000;
}

/*
 * If a current page lives inside a dropdown,
 * both the child AND its parent trigger are black.
 */
.nav--drop.has--current > .nav--link.is--trigger,
.nav--link.is--trigger.is--current-parent {
  color: #000000;
}

/*
 * The SVG path in Webflow currently has a hardcoded fill.
 * Make the arrow follow the trigger's color as well.
 */
.nav--link.is--trigger .drop--arrow path {
  fill: currentColor !important;
  fill-opacity: 1 !important;
}

.nav--drop {
  position: relative;
}

.nav--drop > .nav--sub-drop {
  display: none;
}

.nav--link.is--trigger {
  cursor: pointer;
}

.drop--arrow {
  flex: none;
  transform: none !important;
}

/* Desktop — only the absolute inside is faded */
@media screen and (min-width: 992px) {
  .nav--sub-drop_inside {
    will-change: transform, opacity;
  }
}

/* ==========================================================================
   TABLET / MOBILE — LEVEL 2
   IMPORTANT:
   Webflow controls the complete layout:
   - position
   - width / height
   - padding
   - flex alignment
   - Back position
   - submenu links position

   JS only animates .nav--sub-drop horizontally + opacity.
========================================================================== */

@media screen and (max-width: 991px) {
  .nav--sub-drop {
    will-change: opacity;
  }

  /*
   * Do NOT redefine .nav--sub-drop_inside here.
   * Its tablet/mobile position must remain exactly as designed in Webflow.
   */

  .back--btn {
    cursor: pointer;
  }

  .nav--drop > .nav--link.is--trigger {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ==========================================================================
   DROPDOWN UX — DESKTOP
========================================================================== */

@media screen and (min-width: 992px) {
  .nav--drop {
    cursor: default;
  }

  .nav--drop > .nav--link.is--trigger {
    cursor: pointer;
  }
}

/* ==========================================================================
   TABLET / MOBILE — FIXED SUBMENU CONTEXT
   Webflow owns .nav--sub-drop positioning.
   JS disables will-change: transform on .side--nav-menu once the menu is settled.
========================================================================== */

@media screen and (max-width: 991px) {
  .side--nav-menu {
    will-change: auto;
  }
}

/* ==========================================================================
   DESKTOP DROPDOWN OPEN STATE
   Interaction state only — no layout overrides.
========================================================================== */

@media screen and (min-width: 992px) {
  .side--nav-bg {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .side--nav.is--bg-expanded .side--nav-bg {
    width: 37rem;
  }

  .side--nav-menu > .nav--link,
  .side--nav-menu > .nav--drop > .nav--link.is--trigger {
    position: relative;
    z-index: 2;
  }

  .nav--drop.is--drop-open > .nav--sub-drop {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1;
  }
}

/* ==========================================================================
   MAP SVG — PULSE LINKS
========================================================================== */

.map--embed {
  position: relative;
  display: block;
  overflow: visible;
}

.map--embed > svg,
svg.map--svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.map--pin {
  position: absolute;
  z-index: 2;
  display: block;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  color: #353535;
}

.map--pin::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.map--pin > .marker-wave,
.map--pin > .marker-wave::before,
.map--pin > .marker-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.35);
  animation: markerWave 3s linear infinite;
}

.map--pin > .marker-wave::before {
  animation-delay: -1s;
}

.map--pin > .marker-wave::after {
  animation-delay: -2s;
}

@keyframes markerWave {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }

  8% {
    opacity: 0.3;
  }

  55% {
    opacity: 0.12;
  }

  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .map--pin > .marker-wave,
  .map--pin > .marker-wave::before,
  .map--pin > .marker-wave::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}