:root {
    /* Global Padding Variables - Editable */
    /* Left and Right Padding All /Sections/Containers*/
    --fluid-side-padding-min: 1.25rem; /* 20px */
    --fluid-side-padding-max: 5rem;   /* 80px */

    /* Top and Bottom Padding All Containers*/
    --section-xxl-padding-min: 9.375rem; /* 150px */
    --section-xxl-padding-max: 10rem; /* 160px */ 
  
    --section-xl-padding-min: 6.875rem; /* 110px */
    --section-xl-padding-max: 7.5rem; /* 120px */
  
    --section-l-padding-min: 5.625rem; /* 90px */
    --section-l-padding-max: 6.25rem; /* 100px */
  
    --section-m-padding-min: 5rem; /* 80px */
    --section-m-padding-max: 5rem; /* 80px */
  
    --section-s-padding-min: 3.75rem; /* 60px */
    --section-s-padding-max: 3.75rem; /* 60px */
  
    --section-xs-padding-min: 2.5rem; /* 40px */
    --section-xs-padding-max: 2.5rem; /* 40px */
  
    --section-xxs-padding-min: 1.5rem; /* 24px */
    --section-xxs-padding-max: 1.5rem; /* 24px */
    
    --section-header-padding-min: 1.25rem; /* 20px */
    --section-header-padding-max: 1.25rem; /* 20px */

  
    /* Hero Sections Height Variable */
    --section-hero-height: 100vh; /* 100% the screen height */
  
    /* Offset Padding for Overlay Headers */
    --section-offset-header: 80px; /* Adjust to the overlay header's negative margin */

    /* Width For Narrow Sections*/
    --section-narrow: 62.5rem; /* 1000px */
    --section-narrow-xs: 45rem; /* 720px */

    /* Border Radius Images */
    --radius-s: 8px;
    --radius-m: 10px;

    /* Widget Spacing */
    --heading-spacing: 1.25rem;
  }


/* CSS Template (do not edit below) */
  
  
  /* Section/Container Padding - Fluid Variants */
  .section-xxl {
    padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xl {
    padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-l {
    padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-m {
    padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-s {
    padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xs {
    padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-xxs {
    padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  .section-header {
    padding-top: calc(clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max)) / 4);
    padding-bottom: calc(clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max)) / 4);
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
  }
  
  /* Hero Container/Sections Height */
  .section-hero {
    min-height: var(--section-hero-height)!important;
  }

  .section-hero .e-con-inner {
    justify-content: center!important;
}
  
  /* Full Width Sections - No Side Padding */

  .section-full div {
    max-width: 100%!important;
  }
  

  /* Narrow Sections */
  .section-narrow .e-con-inner {
    max-width: var(--section-narrow)!important;
  }

  .section-narrow-xs .e-con-inner {
    max-width: var(--section-narrow-xs)!important;
  }


  /* Offset Padding for Overlay Headers */
  .section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
  }

.radius-s img {
    border-radius: var(--radius-s);
}

.radius-m img {
    border-radius: var(--radius-m);
}

/* Heading Spacing */

.spacing-m {
  padding-bottom: var(--heading-spacing);
}

@media screen and (min-width: 1024px) { 
  .spacing-m-desktop {
    padding-bottom: var(--heading-spacing); 
  }
}

/* Last Section Border Radius */

.border-radius-last-section {
  border-radius: 0px 0px var(--radius-m) var(--radius-m);
}

/* p Text Paragraph */

p:last-child {
    margin-bottom: 0px;
}

/* Tex Widget Links */

.elementor-widget-text-editor a,
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:active,
.elementor-widget-text-editor a:focus {
  color: var(--e-global-color-text);
  text-decoration: underline;
}

/* ===== ONLINE STATUS - Green with pulse ===== */

.status-dot-online {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1.5px);
    line-height: 1;
}

.status-dot-online::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #bbf7d0;
    border-radius: 50%;
    z-index: 2;
}

.status-dot-online::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #86efac;
    border-radius: 50%;
    animation: pulse-online 1.25s ease-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes pulse-online {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ===== OFFLINE STATUS - Gray, no pulse ===== */

.status-dot-offline {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-1.5px);
    line-height: 1;
}

.status-dot-offline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: #9ca3af;
    border-radius: 50%;
    z-index: 2;
}

/* Image in text */

.heading-image {
    max-width: 8% !important;
    border-radius: 100px !important;
    padding: 0!important;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

@media only screen and (min-width: 767px) and (max-width: 1024px) {
    .heading-image {
    max-width: 8% !important;
    border-radius: 100px !important;
 }
}

@media only screen and (max-width: 767px) {
    .heading-image {
    min-width: 7%!important;
    max-width: 17% !important;
    border-radius: 100px !important;
 }
}

/* Heading Image Alternative */

.heading-image-alt {
    max-width: 6% !important;
    border-radius: var(--radius-m)!important;
    padding: 0!important;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

@media only screen and (min-width: 767px) and (max-width: 1024px) {
    .heading-image-alt {
    max-width: 8% !important;
 }
}

@media only screen and (max-width: 767px) {
    .heading-image-alt {
    min-width: 7%!important;
    max-width: 17% !important;
 }
}

/* Header Show on Hover/Click etc. */

#header-trigger-zone{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 14px;      
  z-index: 9998;
  background: transparent;
}


#header-slide-in{
  position: fixed;  
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  will-change: transform, filter;
}


/* ===== MOBILE MENU ===== */


.mobile-menu,
.mobile-menu.elementor-element {
	position: fixed !important;
	/* Adjust these values if needed for pixel-perfect alignment */
	--menu-offset-top: -7px;
	/* Negative value moves menu higher */
	--menu-offset-right: 0px;
	top: calc(clamp(var(--section-header-padding-min, 1.25rem), 6.522vw + -0.217rem, var(--section-header-padding-max, 1.25rem)) + var(--menu-offset-top, 0px)) !important;
	right: calc(clamp(var(--fluid-side-padding-min, 1.25rem), 6.522vw + -0.217rem, var(--fluid-side-padding-max, 1.25rem)) + var(--menu-offset-right, 0px)) !important;
	left: auto !important;
	bottom: auto !important;
	width: 600px !important;
	/* Adjust as needed */
	max-width: calc(100vw - 5rem);
	/* Accounts for fluid padding on both sides */
	height: auto !important;
	max-height: calc(100vh - 5rem);
	/* Accounts for padding top and bottom */
	z-index: 9999 !important;
	pointer-events: none !important;
	transform-origin: top right !important;
	transform: scale(0.5) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	filter: blur(10px);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out, filter 0.3s ease-out, visibility 0s 0.3s !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 20px !important;
}

/* Mobile menu open state */
.mobile-menu.menu-open,
.mobile-menu.elementor-element.menu-open {
	pointer-events: all !important;
	transform: scale(1) translateZ(0) !important;
	opacity: 1 !important;
	visibility: visible !important;
	filter: blur(0) !important;
	overflow: hidden !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.3s ease-out,
		filter 0.3s ease-out,
		visibility 0s ease !important;
	/* Ensure menu always preserves its styling regardless of parent filters */
	isolation: isolate !important;
	/* Prevent child animations from affecting container position */
	will-change: transform, opacity !important;
	contain: layout style paint !important;
}

/* Enable scrolling after all animations complete (including widget animations) */
.mobile-menu.menu-open.animations-complete {
	overflow: auto !important;
}


/* Smooth slide-up animations for widgets inside menu */
.mobile-menu.menu-open > *{
  animation: fadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  will-change: transform, opacity;
}

/* Staggered animation delays for each widget */
.mobile-menu.menu-open>*:nth-child(1) {
	animation-delay: 0.05s;
}

.mobile-menu.menu-open>*:nth-child(2) {
	animation-delay: 0.1s;
}

.mobile-menu.menu-open>*:nth-child(3) {
	animation-delay: 0.15s;
}

.mobile-menu.menu-open>*:nth-child(4) {
	animation-delay: 0.2s;
}

.mobile-menu.menu-open>*:nth-child(5) {
	animation-delay: 0.25s;
}

.mobile-menu.menu-open>*:nth-child(6) {
	animation-delay: 0.3s;
}

.mobile-menu.menu-open>*:nth-child(7) {
	animation-delay: 0.35s;
}

.mobile-menu.menu-open>*:nth-child(8) {
	animation-delay: 0.4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0,30px,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}



@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Prevent page scroll when menu is open 
    body.menu-is-open {
        overflow: hidden;
        padding-right: var(--scrollbar-width, 0);
    }
    
    */

/* Floating close button - auto-injected */
.mobile-menu-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	z-index: 10;
	transition: opacity 0.2s ease;
	padding: 0;
	font-family: var(--e-global-typography-33306ed-font-family, Sans-serif);
	font-size: var(--e-global-typography-33306ed-font-size);
	font-weight: var(--e-global-typography-33306ed-font-weight);
	text-transform: var(--e-global-typography-33306ed-text-transform);
	line-height: var(--e-global-typography-33306ed-line-height);
	color: var(--e-global-color-text);
}

.mobile-menu-close-btn::after {
	content: '';
	width: 0.75em;
	height: auto;
	aspect-ratio: 1 / 1;
	background-image: url('/wp-content/uploads/2025/12/arrow-right-up.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

/* Mobile responsive - full width with padding at 767px and below */
@media (max-width: 767px) {

	.mobile-menu,
	.mobile-menu.elementor-element {
		width: auto !important;
		max-width: none !important;
		left: clamp(var(--fluid-side-padding-min, 1.25rem), 6.522vw + -0.217rem, var(--fluid-side-padding-max, 1.25rem)) !important;
		right: clamp(var(--fluid-side-padding-min, 1.25rem), 6.522vw + -0.217rem, var(--fluid-side-padding-max, 1.25rem)) !important;
		top: calc(clamp(var(--section-header-padding-min, 1.25rem), 6.522vw + -0.217rem, var(--section-header-padding-max, 1.25rem)) + var(--menu-offset-top, -3px)) !important;
		/* Extend slightly to cover pixel fragments on the right */
		margin-right: -1px !important;
	}
}

/* ===== MOBILE MENU FINISHED ===== */


/* =========================================
   JetFormBuilder Loader Overlay
   ========================================= */

.jfb-loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 8px;
}

/* Heading Text Gradient */

.heading-text-gradient .elementor-heading-title {
  background: linear-gradient(
    to bottom,
    rgba(237, 237, 237, 1) 0%,
    rgba(237, 237, 237, 0.9) 30%,
    rgba(237, 237, 237, 0.4) 60%,
    rgba(237, 237, 237, 0.05) 85%,
    rgba(237, 237, 237, 0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading-text-gradient-black .elementor-heading-title {
  background: linear-gradient(
    to bottom,
    rgba(16, 16, 16, 1) 0%,
    rgba(16, 16, 16, 0.9) 30%,
    rgba(16, 16, 16, 0.4) 60%,
    rgba(16, 16, 16, 0.05) 85%,
    rgba(16, 16, 16, 0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heading-small-text-gradient .elementor-heading-title {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(255, 255, 255, 0.45) 60%,
    rgba(255, 255, 255, 0.15) 85%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.image-gradient-logo img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(237, 237, 237, 1) 0%,
    rgba(237, 237, 237, 0.9) 30%,
    rgba(237, 237, 237, 0.4) 60%,
    rgba(237, 237, 237, 0.05) 85%,
    rgba(237, 237, 237, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(237, 237, 237, 1) 0%,
    rgba(237, 237, 237, 0.9) 30%,
    rgba(237, 237, 237, 0.4) 60%,
    rgba(237, 237, 237, 0.05) 85%,
    rgba(237, 237, 237, 0) 100%
  );
}


/* Spinner */

.jfb-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: #000;
  border-radius: 50%;
  animation: jfb-spin .8s linear infinite;
}

@keyframes jfb-spin {
  to { transform: rotate(360deg); }
}

/* Loader wird NUR gezeigt, wenn das Form die Klasse hat */
form.jet-form-builder.jfb-loading .jfb-loader {
  display: flex !important;
}


/* Accordion Icon Animation */

.accordion-icon-animation .e-n-accordion-item-title-icon {
  transition: transform 300ms cubic-bezier(.2, .9, .2, 1.2);
  transform-origin: center;
}

.accordion-icon-animation 
.e-n-accordion-item-title[aria-expanded="true"] 
.e-n-accordion-item-title-icon {
  transform: rotate(45deg);
}

/* Accordion Text Reveal */

.accordion-text-reveal 
summary[aria-expanded="true"] 
+ div[role="region"] 
> .elementor-element {
  animation: accordionReveal 480ms cubic-bezier(.16,1,.3,1);
}

@keyframes accordionReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =========================================
   Text Selection – Global (Light Sections)
   ========================================= */

::selection {
  background: var(--e-global-color-33a1399);
  color: var(--e-global-color-secondary);
  text-shadow: none;
}

::-moz-selection {
  background: var(--e-global-color-33a1399);
  color: var(--e-global-color-secondary);
  text-shadow: none;
}

/* =========================================
   Text Selection – Dark Sections
   ========================================= */

.is-dark ::selection {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-33a1399);
  text-shadow: none;
}

.is-dark ::-moz-selection {
  background: var(--e-global-color-secondary);
  color: var(--e-global-color-33a1399);
  text-shadow: none;
}


/* ===================================================
   Menu Underline Effect
=================================================== */
.underline-menu-widget .e-n-menu-title-text{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.underline-menu-widget .e-n-menu-title-text::before,
.underline-menu-widget .e-n-menu-title-text::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 1px;
  background: var(--e-global-color-text);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
  will-change: transform, opacity;
}


/* ===================================================
   2) NON-current items: loop → final underline (desktop)
   (exclude .e-current)
=================================================== */
.underline-menu-widget
.e-n-menu-title:not(.e-current)
.e-n-menu-title-container:hover
.e-n-menu-title-text::after{
  animation: underlineLoop 0.9s cubic-bezier(.4,0,.2,1) infinite;
}

.underline-menu-widget
.e-n-menu-title:not(.e-current)
.e-n-menu-title-container:hover
.e-n-menu-title-text::before{
  animation: underlineFinal 0.35s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: 0.9s; /* show final after 1 loop */
}

/* fade out looping line when final appears */
.underline-menu-widget
.e-n-menu-title:not(.e-current)
.e-n-menu-title-container:hover
.e-n-menu-title-text::after{
  transition: opacity 0.1s linear;
  opacity: 0;
  transition-delay: 0.9s;
}


/* ===================================================
   3) CURRENT item: underline visible by default + reverse wipe on hover
=================================================== */

/* current: show underline (use ::after as the visible baseline) */
.underline-menu-widget
.e-n-menu-title.e-current
.e-n-menu-title-text::after{
  transform: scaleX(1);
  transform-origin: right; /* wipe out to the right */
}

/* current: second layer starts hidden (will wipe in) */
.underline-menu-widget
.e-n-menu-title.e-current
.e-n-menu-title-text::before{
  transform: scaleX(0);
  transform-origin: left;
}

/* current: trigger reverse wipe on hover */
.underline-menu-widget
.e-n-menu-title.e-current
.e-n-menu-title-container:hover
.e-n-menu-title-text::after{
  animation: underlineWipeOut 0.45s cubic-bezier(.4,0,.2,1) forwards;
  opacity: 1;
  transition: none;
}

.underline-menu-widget
.e-n-menu-title.e-current
.e-n-menu-title-container:hover
.e-n-menu-title-text::before{
  animation: underlineWipeIn 0.45s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: 0.45s;
  opacity: 1;
}


/* ===================================================
   4) Keyframes
=================================================== */
@keyframes underlineLoop{
  0%{
    transform: scaleX(0);
    transform-origin: left;
  }
  45%{
    transform: scaleX(1);
    transform-origin: left;
  }
  46%{
    transform: scaleX(1);
    transform-origin: right;
  }
  100%{
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes underlineFinal{
  from{
    transform: scaleX(0);
    transform-origin: left;
  }
  to{
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes underlineWipeOut{
  from{
    transform: scaleX(1);
    transform-origin: right;
  }
  to{
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes underlineWipeIn{
  from{
    transform: scaleX(0);
    transform-origin: left;
  }
  to{
    transform: scaleX(1);
    transform-origin: left;
  }
}


/* ===================================================
   Touch devices
   - no animations
   - underline ONLY for current item
=================================================== */
@media (hover: none), (pointer: coarse){

  /* reset everything */
  .underline-menu-widget .e-n-menu-title-text::before,
  .underline-menu-widget .e-n-menu-title-text::after{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: scaleX(0) !important;
  }

  /* show underline for current item only */
  .underline-menu-widget
  .e-n-menu-title.e-current
  .e-n-menu-title-text::after{
    transform: scaleX(1) !important;
  }

  /* ensure second layer stays hidden */
  .underline-menu-widget
  .e-n-menu-title.e-current
  .e-n-menu-title-text::before{
    transform: scaleX(0) !important;
  }
}


/* Vertical menu widget mobile */

.vertical-menu-widget ul.e-n-menu-heading {
  flex-direction: column;
}

/* Remove horizontal margin from menu items */
.vertical-menu-widget li.e-n-menu-item {
  margin-inline-end: 0 !important;
}


/* ===================================================
   Server Time Heading Widget
=================================================== */

.server-time-heading .elementor-heading-title {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* Per-character styling */
.server-time-heading .st-char {
  display: inline-block;
  will-change: transform, opacity, filter;

  /* Gradient / clipped text support */
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animate ONLY changed characters */
.server-time-heading .st-char.st-changed {
  animation: stDigitPop 260ms ease-out;
}

@keyframes stDigitPop {
  0%   { opacity: 0.35; transform: scale(0.92); filter: blur(0.5px); }
  60%  { opacity: 1;    transform: scale(1.06); filter: blur(0px); }
  100% { opacity: 1;    transform: scale(1);    filter: blur(0px); }
}


/* ===================================================
   Floating Contact Button
=================================================== */

.fab-wrap {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 9999;
}

/* hide FAB when Elementor lightbox is open */
:is(html, body):has(.elementor-lightbox:not([style*="display"])) .fab-wrap {
  display: none !important;
}

/* hidden until scroll */
[data-fab] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

[data-fab].is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-fab].is-hidden-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

/* trigger: transparent so the bubble is the only visual */
.fab-btn {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  display: block;
  cursor: pointer;
  z-index: 20;
  background: transparent;
  color: inherit;
}

.fab-btn:hover,
.fab-btn:focus,
.fab-btn:active {
  outline: none;
  background: transparent;
  border: none;
  color: inherit;
  box-shadow: none;
}

/* Bubble: same style as CONTACT / WhatsApp / Form labels (white, border, pill) */
.fab-ios-bubble {
  position: relative;
  padding: 10px 20px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--e-global-color-primary);
  color: var(--e-global-color-text);
  width: 165px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Typing indicator: 3 dots – quick, clear bounce wave, centered */
.fab-bubble-typing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  transition: opacity .35s ease;
}

.fab-ios-bubble.fab-bubble-show-message .fab-bubble-typing {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fab-bubble-typing .dot {
  width: 6.4px;
  height: 6.4px;
  border-radius: 50%;
  background-color: var(--e-global-color-primary);
  transform-origin: center;
  animation: fab-dot-bounce 1.2s ease-in-out infinite;
  animation-fill-mode: backwards;
}

.fab-bubble-typing .dot:nth-child(1) {
  animation-delay: 0s;
}

.fab-bubble-typing .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.fab-bubble-typing .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes fab-dot-bounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-5px);
  }
}

/* Message text – same “slide up + scale” as menu items */
.fab-bubble-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  text-align: center;
  padding: 2px 0;
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-a778bfe-font-family), Sans-serif;
  font-size: var(--e-global-typography-a778bfe-font-size);
  font-weight: var(--e-global-typography-a778bfe-font-weight);
  line-height: var(--e-global-typography-a778bfe-line-height);
}

.fab-ios-bubble.fab-bubble-show-message .fab-bubble-message {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* When menu is open: show this instead of "Let's chat?" – same transition */
.fab-bubble-message-open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  text-align: center;
  padding: 2px 0;
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-a778bfe-font-family), Sans-serif;
  font-size: var(--e-global-typography-a778bfe-font-size);
  font-weight: var(--e-global-typography-a778bfe-font-weight);
  line-height: var(--e-global-typography-a778bfe-line-height);
  pointer-events: none;
}

.fab-ios-bubble.fab-bubble-menu-open .fab-bubble-message {
  opacity: 0;
  pointer-events: none;
}

.fab-ios-bubble.fab-bubble-menu-open .fab-bubble-message-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Space before emoji when it’s replaced by an img (e.g. WordPress/Twemoji) so the gap doesn’t collapse */
.fab-bubble-message-open img.emoji,
.fab-bubble-message-open img[role="img"] {
  margin-left: 0.5em !important;
  vertical-align: middle;
}

/* menu container (isolated) */
.fab-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  left: auto;
  top: auto;

  margin: 0;
  padding: 0;

  width: auto;
  max-width: min(320px, calc(100vw - 2rem));

  background: transparent;
  border: none;

  transform-origin: bottom right;

  /* animation base */
  opacity: 0;
  transform: scale(0.5);
  filter: blur(10px);
  visibility: hidden;
  overflow: hidden;
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
}

.fab-menu.is-open {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  visibility: visible;
}

.fab-menu.is-open.animations-complete {
  overflow: visible;
}

/* items */
.fab-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 0;
  text-decoration: none;
  color: var(--e-global-color-text);
}

.fab-label {
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;

  border: 1px solid var(--e-global-color-primary);
  font-family: var(--e-global-typography-33306ed-font-family), Sans-serif;
  font-size: var(--e-global-typography-33306ed-font-size);
  font-weight: var(--e-global-typography-33306ed-font-weight);
  text-transform: var(--e-global-typography-33306ed-text-transform);
  line-height: var(--e-global-typography-33306ed-line-height);
  color: var(--e-global-color-text);
}

.fab-bubble {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--e-global-color-primary);
  color: var(--e-global-color-text);
}

.fab-bubble img {
  max-width: 24px;
  max-height: 24px;
  width: auto;
  height: auto;
  display: block;
}

/* stagger items */
.fab-menu>* {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease;
}

.fab-menu.is-open>* {
  opacity: 1;
  transform: translateY(0);
}

.fab-menu.is-open>*:nth-child(1) {
  transition-delay: .1s;
}

.fab-menu.is-open>*:nth-child(2) {
  transition-delay: .2s;
}

.fab-menu.is-open>*:nth-child(3) {
  transition-delay: .3s;
}

/* ===================================================
   Mouse Cursor Change - Default
=================================================== */

.click-pulse {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;

  background: #ffffff;
  mix-blend-mode: difference;

  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  animation: clickPulseIOS 360ms cubic-bezier(0.4, 0.0, 0.2, 1);

  z-index: 2147483647;
}

@keyframes clickPulseIOS {
  0% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .click-pulse {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Disable on touch devices */
@media (pointer: coarse) {
  .click-pulse {
    display: none !important;
  }
}

/* ===================================================
   Mouse Cursor Change - Watch
=================================================== */

.mouse-cursor-change {
  cursor: none !important;
}

.mouse-cursor-change * {
  cursor: none !important;
}

.custom-cursor-watch {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.custom-cursor-watch svg {
  width: 95px;
  height: 110px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
}

.custom-cursor-watch.cursor-click {
  animation: cursorClickPop 160ms ease-out;
}

@keyframes cursorClickPop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  40%  { transform: translate(-50%, -50%) scale(0.88); }
  100% { transform: translate(-50%, -50%) scale(1); }
}


/* ===================================================
   JetEngine Post Count Animation (Likes / Data Store)
=================================================== */

.jet-engine-data-post-count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* Per-character styling */
.jet-engine-data-post-count .st-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* Animate ONLY changed characters */
.jet-engine-data-post-count .st-char.st-changed {
  animation: jetCountDigitPop 260ms ease-out;
}

@keyframes jetCountDigitPop {
  0%   { opacity: 0.35; transform: scale(0.92); filter: blur(0.5px); }
  60%  { opacity: 1;    transform: scale(1.06); filter: blur(0px); }
  100% { opacity: 1;    transform: scale(1);    filter: blur(0px); }
}


/* ===================================================
   New button styling
=================================================== */

/* Primary – supports text-only and icon+text buttons.
   data-hover set by elementor-button-hover-content.js.
   Swoosh animation is gated on [data-hover] so buttons
   remain fully usable when JS is disabled.
   Add modifier class (e.g. --icon-external) to prepend icon before hover text. */

.button-animation-primary {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  background: var(--e-global-color-text);
  border-radius: 10px;
  user-select: none;
  border: 1px solid var(--e-global-color-text);
}

/* neutralise Elementor's own background */
.button-animation-primary .elementor-button {
  background: transparent !important;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* current content (icon + text animate together) — only transition when JS is active */
.button-animation-primary[data-hover] .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
  transform: translateY(0) translateZ(0);
  filter: blur(0);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  user-select: none;
  backface-visibility: hidden;
}

/* fallback: text-only buttons (no content-wrapper) — only transition when JS is active */
.button-animation-primary[data-hover] .elementor-button:not(:has(.elementor-button-content-wrapper)) .elementor-button-text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  transform: translateY(0) translateZ(0);
  filter: blur(0);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  user-select: none;
  backface-visibility: hidden;
}

/* sliding background overlay */
.button-animation-primary[data-hover]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  pointer-events: none;
}

/* hover text */
.button-animation-primary[data-hover]::after {
  content: attr(data-hover);
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--e-global-color-secondary);
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(100%);
  filter: blur(3px);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 3;
}

/* hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .button-animation-primary[data-hover]:hover .elementor-button-content-wrapper {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(3px);
  }

  .button-animation-primary[data-hover]:hover .elementor-button:not(:has(.elementor-button-content-wrapper)) .elementor-button-text {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(3px);
  }

  .button-animation-primary[data-hover]:hover::before,
  .button-animation-primary[data-hover]:hover::after {
    transform: translateY(0);
  }

  .button-animation-primary[data-hover]:hover::after {
    filter: blur(0);
  }
}

/* disable hover layers for touch devices */
@media (hover: none) {
  .button-animation-primary[data-hover]::before,
  .button-animation-primary[data-hover]::after {
    display: none;
  }
}

/* Optional: add icon before hover text – add modifier class to button */
.button-animation-primary--icon-external[data-hover]::after {
  content: "↗ " attr(data-hover);
}

/* Custom SVG – icon + text centered. JS sets --icon-offset per button for correct positioning. */
.button-animation-primary--icon-svg[data-hover]::after {
  content: attr(data-hover);
  background-image: url("/wp-content/uploads/2025/12/contact-form.svg");
  background-repeat: no-repeat;
  background-position: calc(50% - var(--icon-offset, 120px)) center;
  background-size: 1em auto;
}


/* Secondary */

.button-animation-secondary {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  background: var(--e-global-color-16d6b65);
  border-radius: 10px;
  user-select: none;
  border: 1px solid var(--e-global-color-text);
}

/* neutralise Elementor's own background */
.button-animation-secondary .elementor-button {
  background: transparent !important;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* current content (icon + text animate together) — only transition when JS is active */
.button-animation-secondary[data-hover] .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
  transform: translateY(0) translateZ(0);
  filter: blur(0);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  user-select: none;
  backface-visibility: hidden;
}

/* fallback: text-only buttons (no content-wrapper) — only transition when JS is active */
.button-animation-secondary[data-hover] .elementor-button:not(:has(.elementor-button-content-wrapper)) .elementor-button-text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  transform: translateY(0) translateZ(0);
  filter: blur(0);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  user-select: none;
  backface-visibility: hidden;
}

/* sliding background overlay */
.button-animation-secondary[data-hover]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
  pointer-events: none;
}

/* hover text */
.button-animation-secondary[data-hover]::after {
  content: attr(data-hover);
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--e-global-color-text);
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(100%);
  filter: blur(3px);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 3;
}

/* hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .button-animation-secondary[data-hover]:hover .elementor-button-content-wrapper {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(3px);
  }

  .button-animation-secondary[data-hover]:hover .elementor-button:not(:has(.elementor-button-content-wrapper)) .elementor-button-text {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(3px);
  }

  .button-animation-secondary[data-hover]:hover::before,
  .button-animation-secondary[data-hover]:hover::after {
    transform: translateY(0);
  }

  .button-animation-secondary[data-hover]:hover::after {
    filter: blur(0);
  }
}

/* disable hover layers for touch devices */
@media (hover: none) {
  .button-animation-secondary[data-hover]::before,
  .button-animation-secondary[data-hover]::after {
    display: none;
  }
}


/* ===================================================
   Primary JFB
=================================================== */

button.button-animation-primary--jfb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: var(--e-global-color-text);
  border-radius: 10px;
  border: 1px solid var(--e-global-color-text);
  padding: 10px 20px;
  white-space: nowrap;
  color: var(--e-global-color-secondary);
}

/* original text — only transition when JS is active */
button.button-animation-primary--jfb[data-hover] .jfb-button-text {
  position: relative;
  z-index: 2;
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* sliding overlay */
button.button-animation-primary--jfb[data-hover]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
}

/* hover text */
button.button-animation-primary--jfb[data-hover]::after {
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--e-global-color-secondary);
  transform: translateY(100%);
  filter: blur(3px);
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 3;
  pointer-events: none;
}

/* hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
  button.button-animation-primary--jfb[data-hover]:hover .jfb-button-text {
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(3px);
  }

  button.button-animation-primary--jfb[data-hover]:hover::before,
  button.button-animation-primary--jfb[data-hover]:hover::after {
    transform: translateY(0);
  }

  button.button-animation-primary--jfb[data-hover]:hover::after {
    filter: blur(0);
  }
}

/* disable hover on touch */
@media (hover: none) {
  button.button-animation-primary--jfb[data-hover]::before,
  button.button-animation-primary--jfb[data-hover]::after {
    display: none;
  }
}



/* ===================================================
   Works page and portfolio
=================================================== */

.img-works img {
    aspect-ratio: 4 / 5;
}

.img-ratio img {
  aspect-ratio: 4 / 5!important;
}

/* ===================================================
   Lightbox styling
=================================================== */

.elementor-slideshow__header .e-font-icon-svg,
.dialog-close-button .e-font-icon-svg {
    fill: var(--e-global-color-text)!important;
    width: 18px;
    height: 18px;
}

.elementor-slideshow__counter {
  color: var(--e-global-color-text)!important;
  font-family: var(--e-global-typography-7239e28-font-family), Sans-serif;
  font-size: var(--e-global-typography-7239e28-font-size);
  font-weight: var(--e-global-typography-7239e28-font-weight);
  text-transform: var(--e-global-typography-7239e28-text-transform);
  line-height: var(--e-global-typography-7239e28-line-height);
}

/* Lightbox previous/next buttons */

.elementor-lightbox .elementor-swiper-button svg {
    fill: #000000 !important;
    width: 24px !important;
    height: 24px !important;
}

.elementor-lightbox .elementor-swiper-button {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.elementor-lightbox .elementor-swiper-button {
    position: absolute !important;
    width: 60px !important;
    height: 60px !important;
    top: 50% !important;
    transform: translateY(-50%);
}

.elementor-lightbox .elementor-swiper-button-prev {
    left: 2vw !important;
}

.elementor-lightbox .elementor-swiper-button-next {
    right: 2vw !important;
}

/* Disable scrolling when lightbox is open */

:is(html,body):has(.elementor-lightbox:not([style*="display"])) {
    overflow: hidden;
}

.elementor-lightbox .elementor-lightbox-image {
  border-radius: var(--radius-m)!important;
}

.swiper-zoom-container {
  padding: 10px;
}

/* ===================================================
    Animations for headings, images and more
=================================================== */

/* Slide in + blur */

/* Elementor sticky: hide clone (spacer) - prevents duplication when sticky activates */
.elementor-sticky__spacer .animated-heading-fade-slide {
  display: none !important;
}

/* Hide until in-view to prevent flash (exclude Elementor editor). Only when JS has run. */
html.animated-elements-ready body:not(.elementor-editor-active) .animated-heading-fade-slide:not(.in-view) {
  visibility: hidden;
}
.animated-heading-fade-slide.in-view {
  visibility: visible;
}

.animated-heading-fade-slide .word {
  display: inline-block;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  filter: blur(8px);
}

.animated-heading-fade-slide.in-view .word {
  animation: wordRevealBlur 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.animated-heading-fade-slide.in-view .word:nth-child(1) { animation-delay: 0s; }
.animated-heading-fade-slide.in-view .word:nth-child(2) { animation-delay: 0.12s; }
.animated-heading-fade-slide.in-view .word:nth-child(3) { animation-delay: 0.24s; }
.animated-heading-fade-slide.in-view .word:nth-child(4) { animation-delay: 0.36s; }
.animated-heading-fade-slide.in-view .word:nth-child(5) { animation-delay: 0.48s; }
.animated-heading-fade-slide.in-view .word:nth-child(n+6) { animation-delay: 0.6s; }

@keyframes wordRevealBlur {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}


/* Sticky container fix: opacity-only (add animated-sticky-safe to the element) */
.animated-heading-fade-slide.animated-sticky-safe .word {
  transform: none;
}
.animated-heading-fade-slide.animated-sticky-safe.in-view .word {
  animation: wordRevealBlurSticky 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes wordRevealBlurSticky {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; filter: blur(0); }
}


/* Slide in */

/* Elementor sticky: hide clone (spacer) - prevents duplication when sticky activates */
.elementor-sticky__spacer .animated-heading-slide {
  display: none !important;
}

/* Hide until in-view to prevent flash (exclude Elementor editor). Only when JS has run. */
html.animated-elements-ready body:not(.elementor-editor-active) .animated-heading-slide:not(.in-view) {
  visibility: hidden;
}
.animated-heading-slide.in-view {
  visibility: visible;
}

.animated-heading-slide .word {
  display: inline-block;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.animated-heading-slide.in-view .word {
  animation: wordRevealSlide 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.animated-heading-slide.in-view .word:nth-child(1) { animation-delay: 0s; }
.animated-heading-slide.in-view .word:nth-child(2) { animation-delay: 0.12s; }
.animated-heading-slide.in-view .word:nth-child(3) { animation-delay: 0.24s; }
.animated-heading-slide.in-view .word:nth-child(4) { animation-delay: 0.36s; }
.animated-heading-slide.in-view .word:nth-child(5) { animation-delay: 0.48s; }
.animated-heading-slide.in-view .word:nth-child(n+6) { animation-delay: 0.6s; }

@keyframes wordRevealSlide {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
 * Generic scroll-reveal animations for images, containers, widgets.
 * Works with: images, divs, sections, Elementor containers/widgets.
 */

/* Elementor sticky: hide clone (spacer) - prevents duplication when sticky activates */
.elementor-sticky__spacer .animated-slide,
.elementor-sticky__spacer .animated-fade-slide {
  display: none !important;
}

/* Elementor editor: show elements in final state (no animation) */
body.elementor-editor-active .animated-slide,
body.elementor-editor-active .animated-fade-slide,
html.animated-elements-editor .animated-slide,
html.animated-elements-editor .animated-fade-slide {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* animated-slide: hidden state only when JS has run. Without JS, elements stay visible. */
html.animated-elements-ready body:not(.elementor-editor-active) .animated-slide:not(.in-view) {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}
.animated-slide.in-view {
  visibility: visible;
}

.animated-slide.in-view {
  animation: elementRevealSlide 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes elementRevealSlide {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none; /* avoids containing block, fixes sticky duplication */
  }
}

/* animated-fade-slide: hidden state only when JS has run. Without JS, elements stay visible. */
html.animated-elements-ready body:not(.elementor-editor-active) .animated-fade-slide:not(.in-view) {
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  filter: blur(8px);
}
.animated-fade-slide.in-view {
  visibility: visible;
}

.animated-fade-slide.in-view {
  animation: elementRevealBlur 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes elementRevealBlur {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}


/* ===================================================
    No drag
=================================================== */

.no-drag img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


/* ===================================================
    Year icon list
=================================================== */

.year-icon-list {
    position: absolute;
    right: 0;
    top: 0; 
    vertical-align: baseline; 
    transform: translateY(0.15em);
    font-family: var(--e-global-typography-362b4bd-font-family), Sans-serif;
    font-size: var(--e-global-typography-362b4bd-font-size);
    font-weight: var(--e-global-typography-362b4bd-font-weight);
    line-height: var(--e-global-typography-362b4bd-line-height);
    color: var(--e-global-color-primary);
}

/* ===================================================
    Custom switcher: Works & watch Consulting
=================================================== */

.custom-switch {
  display: inline-block;
}

.custom-switch input {
  display: none;
}

.switch-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--e-global-color-text);
  border-radius: 999px;
  padding: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  min-width: 220px;
  justify-content: space-between;
  background: #FBFBFB;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.switch-text {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 5px 0;
  transition: color 0.3s ease;
  color: var(--e-global-color-text);

  font-family: var(--e-global-typography-7239e28-font-family), Sans-serif;
  font-size: var(--e-global-typography-7239e28-font-size);
  font-weight: var(--e-global-typography-7239e28-font-weight);
  text-transform: var(--e-global-typography-7239e28-text-transform);
  line-height: var(--e-global-typography-7239e28-line-height);
}

.switch-toggle {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--e-global-color-text);
  border-radius: 999px;
  transition: transform 0.3s ease;
}

.switch-input:checked + .switch-label .switch-toggle {
  transform: translateX(100%);
}

.switch-input:not(:checked) + .switch-label .left {
  color: var(--e-global-color-secondary);
}

.switch-input:checked + .switch-label .right {
  color: var(--e-global-color-secondary);
}

/* Hidden by default: Works OLD

.works-creative {
  display: none;
}

.creative-mode .works-simple,
.creative-mode .works-start {
  display: none;
}

.creative-mode .works-creative {
  display: block;
}
*/

/* Hidden by default: Works NEW */

.works-simple,
.works-start {
  display: none;
}

/* When Simple mode is active */
.simple-mode .works-simple,
.simple-mode .works-start {
  display: block;
}

.simple-mode .works-creative {
  display: none;
}

.simple-mode .g3d-filter-wrap {
  display: none;
}

.creative-mode .g3d-filter-wrap {
  display: block; /* or flex if needed */
}


/* Hidden by default: Consulting */

.consulting-sell {
  display: none;
}

.sell-mode .consulting-buy {
  display: none;
}

.sell-mode .consulting-sell {
  display: block;
}


/* ===================================================
    Cross-document transitions
    If element fade-ins flicker, delay them (animation-delay: 0.9s) so they start after this transition.
=================================================== */

@view-transition {
  navigation: auto;
}

html {
  background: #ffffff; /* Visible when old page zooms/shrinks */
}

/* Outgoing page: zoom into center with blur, slight tilt, dim */
::view-transition-old(root) {
  animation: 0.9s cubic-bezier(0.33, 1, 0.68, 1) both page-zoom-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Incoming page: fades in with slight overlap */
::view-transition-new(root) {
  animation: 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0.1s both page-fade-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes page-zoom-out {
  0% {
    transform: scale(1) rotate(0deg) translateZ(0);
    filter: blur(0) brightness(1);
    opacity: 1;
    border-radius: 10px;
  }
  40% { filter: blur(2px) brightness(0.95); opacity: 0.8; }
  100% {
    transform: scale(0.85) rotate(-0.5deg) translateZ(0);
    filter: blur(6px) brightness(0.5);
    opacity: 0;
    border-radius: 10px;
  }
}

@keyframes page-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.98) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}