/* Collection name: Color Schemes */
:root {
  --color-scheme-1-background: var(--color-neutral-lightest);
  --color-scheme-1-border: var(--opacity-neutral-darkest-15);
  --color-scheme-1-text: var(--color-neutral-darkest);
  --color-scheme-1-foreground: var(--color-white);
  --color-scheme-1-accent: var(--color-curious-blue);
  --color-scheme-2-text: var(--color-neutral-darkest);
  --color-scheme-2-background: var(--color-white);
  --color-scheme-2-border: var(--opacity-neutral-darkest-15);
  --color-scheme-2-accent: var(--color-neutral-darkest);
  --color-scheme-2-foreground: var(--color-white-dark);
}

/* Collection name: Primitives */
:root {
  --color-neutral-darkest: #000000;
  --color-neutral-lighter: #d8d8d8;
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-light: #b2b2b2;
  --color-neutral: #7f7f7f;
  --color-neutral-dark: #4c4c4c;
  --color-neutral-darker: #191919;
  --opacity-transparent: rgba(255, 255, 255, 0);
  --opacity-white-5: rgba(255, 255, 255, 0.05);
  --opacity-white-10: rgba(255, 255, 255, 0.1);
  --opacity-white-15: rgba(255, 255, 255, 0.15);
  --opacity-white-20: rgba(255, 255, 255, 0.2);
  --opacity-white-30: rgba(255, 255, 255, 0.3);
  --opacity-white-40: rgba(255, 255, 255, 0.4);
  --opacity-white-50: rgba(255, 255, 255, 0.5);
  --opacity-white-60: rgba(255, 255, 255, 0.6);
  --opacity-neutral-darkest-5: rgba(0, 0, 0, 0.05);
  --opacity-neutral-darkest-10: rgba(0, 0, 0, 0.1);
  --opacity-neutral-darkest-15: rgba(0, 0, 0, 0.15);
  --opacity-neutral-darkest-20: rgba(0, 0, 0, 0.2);
  --opacity-neutral-darkest-30: rgba(0, 0, 0, 0.3);
  --opacity-neutral-darkest-40: rgba(0, 0, 0, 0.4);
  --opacity-neutral-darkest-50: rgba(0, 0, 0, 0.5);
  --opacity-neutral-darkest-60: rgba(0, 0, 0, 0.6);
  --color-curious-blue-lightest: #e9f2f9;
  --color-curious-blue-lighter: #d3e5f3;
  --color-curious-blue-light: #66a6d5;
  --color-curious-blue: #2581c4;
  --color-curious-blue-dark: #1d679c;
  --color-curious-blue-darker: #0e334e;
  --color-curious-blue-darkest: #0b263a;
  --color-white-lightest: #ffffff;
  --color-white-lighter: #ffffff;
  --color-white-light: #ffffff;
  --color-white-dark: #cccccc;
  --color-white-darker: #666666;
  --color-white-darkest: #4c4c4c;
  --color-firefly-lightest: #e6e8e9;
  --color-firefly-lighter: #cdd1d4;
  --color-firefly-light: #52606a;
  --color-firefly: #091d2b;
  --color-firefly-dark: #071722;
  --color-firefly-darker: #030b11;
  --color-firefly-darkest: #02080c;
  --color-limed-spruce-lightest: #ebecee;
  --color-limed-spruce-lighter: #d8dadd;
  --color-limed-spruce-light: #777e88;
  --color-limed-spruce: #3d4856;
  --color-limed-spruce-dark: #303944;
  --color-limed-spruce-darker: #181c22;
  --color-limed-spruce-darkest: #121519;
  --color-athens-gray-lightest: #fdfdfe;
  --color-athens-gray-lighter: #fcfcfd;
  --color-athens-gray-light: #f6f7f8;
  --color-athens-gray: #f3f4f6;
  --color-athens-gray-dark: #c2c3c4;
  --color-athens-gray-darker: #616162;
  --color-athens-gray-darkest: #484949;
}

/* Collection name: UI Styles */
:root {
  --stroke-border-width: 1;
  --stroke-divider-width: 1;
  --radius-small: 16;
  --radius-medium: 16;
  --radius-large: 16;
}

/* Collection name: Typography */
:root {
  --text-sizes-heading-1: 72px;
  --text-sizes-heading-2: 52px;
  --text-sizes-heading-3: 44px;
  --text-sizes-heading-4: 36px;
  --text-sizes-heading-5: 28px;
  --text-sizes-heading-6: 22px;
  --text-sizes-text-large: 22px;
  --text-sizes-text-medium: 18px;
  --text-sizes-text-regular: 16px;
  --text-sizes-text-small: 14px;
  --text-sizes-text-tiny: 12px;
}

/* Collection name: Spacing & Sizing */
:root {
  --container-container-small: 768;
  --container-container-medium: 1024;
  --container-container-large: 1280;
  --max-width-max-width-xxsmall: 320;
  --max-width-max-width-medium: 560;
  --max-width-max-width-large: 768;
  --max-width-max-width-xsmall: 400;
  --max-width-max-width-small: 480;
  --max-width-max-width-xlarge: 1024;
  --max-width-max-width-xxlarge: 1280;
  --section-padding-padding-section-small: 48;
  --section-padding-padding-section-medium: 80;
  --section-padding-padding-section-large: 112;
  --page-padding-padding-global: 64;
}

/* Collection name: Shadows */
:root {
  --shadow-box-xxlarge: 0px 32px 64px -12px rgba(0, 0, 0, 14%);
  --shadow-box-xlarge: 0px 24px 48px -12px rgba(0, 0, 0, 18%);
  --shadow-box-large: 0px 20px 24px -4px rgba(0, 0, 0, 8%), 0px 8px 8px -4px rgba(0, 0, 0, 3%);
  --shadow-box-medium: 0px 12px 16px -4px rgba(0, 0, 0, 8%), 0px 4px 6px -2px rgba(0, 0, 0, 3%);
  --shadow-box-small: 0px 4px 8px -2px rgba(0, 0, 0, 10%), 0px 2px 4px -2px rgba(0, 0, 0, 6%);
  --shadow-box-xsmall: 0px 1px 3px 0px rgba(0, 0, 0, 10%), 0px 1px 2px 0px rgba(0, 0, 0, 6%);
  --shadow-box-xxsmall: 0px 1px 2px 0px rgba(0, 0, 0, 5%);
}

/* Mode: Mobile */
@media (max-width: 768px) {
  /* Collection name: Typography */
  :root {
    --text-sizes-heading-1: 40px;
    --text-sizes-heading-2: 36px;
    --text-sizes-heading-3: 32px;
    --text-sizes-heading-4: 24px;
    --text-sizes-heading-5: 20px;
    --text-sizes-heading-6: 18px;
    --text-sizes-text-large: 18px;
    --text-sizes-text-medium: 16px;
    --text-sizes-text-regular: 16px;
    --text-sizes-text-small: 14px;
    --text-sizes-text-tiny: 12px;
  }
  /* Collection name: Spacing & Sizing */
  :root {
    --container-container-small: 768;
    --container-container-medium: 1024;
    --container-container-large: 1280;
    --max-width-max-width-xxsmall: 320;
    --max-width-max-width-medium: 560;
    --max-width-max-width-large: 768;
    --max-width-max-width-xsmall: 400;
    --max-width-max-width-small: 480;
    --max-width-max-width-xlarge: 1024;
    --max-width-max-width-xxlarge: 1280;
    --section-padding-padding-section-small: 32;
    --section-padding-padding-section-medium: 48;
    --section-padding-padding-section-large: 64;
    --page-padding-padding-global: 20;
  }
}

@media (max-width: 1024px) {
  :root {
    --text-sizes-heading-1: 52px;
    --text-sizes-heading-2: 44px;
    --text-sizes-heading-3: 36px;
    --text-sizes-heading-4: 28px;
    --text-sizes-heading-5: 22px;
    --text-sizes-heading-6: 18px;
    --text-sizes-text-large: 18px;
    --text-sizes-text-medium: 16px;
    --text-sizes-text-regular: 15px;
    --text-sizes-text-small: 13px;
    --text-sizes-text-tiny: 11px;
  }
}

@media (max-width: 400px) {
  :root {
    --text-sizes-heading-1: 32px;
    --text-sizes-heading-2: 24px;
    --text-sizes-heading-3: 18px;
    --text-sizes-heading-4: 16px;
    --text-sizes-heading-5: 14px;
    --text-sizes-heading-6: 13px;
    --text-sizes-text-large: 13px;
    --text-sizes-text-medium: 12px;
    --text-sizes-text-regular: 11px;
    --text-sizes-text-small: 10px;
    --text-sizes-text-tiny: 9px;
  }
}

/* .core-wrapper {
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 72px;
  background-color: #f2f2f2;
  padding: 0px 64px;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  align-self: stretch;
  height: 900px;
  background-color: #f2f2f2;
  padding: 0px 64px;
} */

html {
  scroll-behavior: smooth;
}

/* Navbar link styles */
.navbar-link {
  position: relative;
  color: var(--color-neutral-darkest);
  text-decoration: none;
  transition: box-shadow 0.2s, color 0.2s, background 0.2s;
  border-radius: 16px;
  padding: 4px 12px;
}

.navbar-link:hover {
  box-shadow: var(--shadow-box-medium);
  color: var(--color-curious-blue);
  background: var(--color-curious-blue-lightest);
}

.navbar-link.active {
  box-shadow: var(--shadow-box-large);
  color: var(--color-curious-blue);
  background: var(--color-curious-blue-lightest);
}

/* Footer nav link styles */
#footer-nav a {
  color: var(--color-neutral-darkest);
  text-decoration: none;
  transition: color 0.2s;
}
#footer-nav a:hover {
  color: var(--color-curious-blue);
}

#mobile-nav a {
  color: var(--color-neutral-darkest);
  text-decoration: none;
  transition: color 0.2s;
}
#mobile-nav a:hover {
  color: var(--color-curious-blue);
}

.primary-button {
  transition: background 0.2s, box-shadow 0.2s;
}
.primary-button:hover,
.primary-button:focus {
  background: var(--color-curious-blue-dark);
  box-shadow: var(--shadow-box-medium);
  text-decoration: none;
  outline: none;
}

.secondary-button {
  background: transparent;
  color: var(--color-neutral-darkest);
  /* outline-width: 1px; */
  border: 1px solid var(--color-neutral-darkest);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.secondary-button:hover,
.secondary-button:focus {
  background: var(--color-neutral-lightest);
  color: var(--color-curious-blue);
  box-shadow: var(--shadow-box-small);
  text-decoration: none;
  border: 1px solid var(--color-curious-blue);
  outline: none;
}

.secondary-button-white {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s;
}
.secondary-button-white:hover,
.secondary-button-white:focus {
  background: var(--color-curious-blue);
  border: 1px solid var(--color-curious-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-box-medium);
  text-decoration: none;
  outline: none;
}

.linkedin-link {
  transition: color 0.2s;
}
.linkedin-link:hover,
.linkedin-link:focus {
  color: var(--color-curious-blue-light);
}

/* Back to Top Button Styles */
#back-to-top {
  box-shadow: var(--shadow-box-large);
  background: var(--color-curious-blue-lightest);
  color: var(--color-curious-blue);
  border: 1px solid var(--color-curious-blue);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
#back-to-top:hover,
#back-to-top:focus {
  background: var(--color-curious-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-box-xlarge);
  outline: none;
}
#back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
#back-to-top:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.carousel-1,
.carousel-2 {
  overflow: hidden;
  position: relative;
  transition: none;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.carousel-1 img,
.carousel-2 img {
  transition: transform 0.3s;
  user-drag: none;
  user-select: none;
  /* pointer-events: none; */
}

.carousel-img-wrapper {
  position: relative;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Remove flex-grow and expansion logic */
}
.carousel-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
  position: relative;
  z-index: 1;
}
.carousel-img-wrapper:hover img {
  transform: scale(1.12);
  z-index: 10;
}

.card {
  position: relative;
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
}
.card:hover {
  transition-duration: 150ms;
  box-shadow: var(--shadow-box-medium);
}
.card .glow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 10px;
  background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
}

.icon {
  transition: transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1), filter 0.25s;
  will-change: transform, filter;
  display: inline-block;
}
.icon:hover {
  transform: translateY(-6px) scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(37, 129, 196, 0.12));
}

.function-block {
  position: relative;
  color: var(--color-neutral-darkest);
  background: transparent;
  border-radius: 16px;
  padding: 20px 24px;
  transition: box-shadow 0.2s, color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.4, 0.2, 0.2, 1);
  cursor: pointer;
  will-change: transform;
  z-index: 1;
  transform: scale(0.96);
  opacity: 0.85;
}

.function-block:hover {
  box-shadow: var(--shadow-box-medium);
  /* background: var(--color-curious-blue-lightest); */
  transform: scale(1);
}

.function-block.active {
  box-shadow: var(--shadow-box-large);
  background: var(--color-curious-blue-lightest);
  transform: scale(1);
  z-index: 2;
  opacity: 1;
}

.function-block .HeadingH5 {
  transition: color 0.2s;
}
.function-block.active .HeadingH5 {
  color: var(--color-curious-blue);
}

#function-image {
  transition: opacity 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);
  opacity: 1;
}
#function-image.fading {
  opacity: 0;
}

.navbar {
  z-index: 30;
}

/* Cookie consent specific animations - using specific selectors to avoid conflicts */
#cookie-consent.hidden {
  display: none !important;
}

#cookie-consent.show {
  transform: translateY(0) !important;
}

#cookie-settings-modal.hidden {
  display: none !important;
}

#cookie-settings-modal.show {
  opacity: 1 !important;
  visibility: visible !important;
}

#cookie-settings-modal.show > div {
  transform: scale(1) !important;
}

#cookie-overlay.hidden {
  display: none !important;
}

#cookie-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Toggle switch animations using root colors */
#cookie-analytics:checked + label,
#cookie-marketing:checked + label {
  background-color: var(--color-scheme-1-accent) !important;
}

#cookie-analytics:checked + label span,
#cookie-marketing:checked + label span {
  transform: translateX(1.5rem) !important;
}

#cookie-necessary:disabled + label {
  background-color: var(--color-neutral-light) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

#cookie-necessary:checked + label span {
  transform: translateX(1.5rem) !important;
}

/* Force the necessary cookie to show as "on" since it's checked and disabled */
#cookie-necessary[checked] + label span {
  transform: translateX(1.5rem) !important;
}

/* Ensure toggle switches work properly */
#cookie-analytics + label,
#cookie-marketing + label {
  background-color: var(--color-neutral-light) !important;
  transition: background-color 0.3s ease !important;
}

#cookie-analytics + label span,
#cookie-marketing + label span {
  transition: transform 0.3s ease !important;
  transform: translateX(0) !important; /* Force initial position */
}

#cookie-necessary + label {
  background-color: var(--color-neutral-light) !important;
  transition: background-color 0.3s ease !important;
}

#cookie-necessary + label span {
  transition: transform 0.3s ease !important;
  transform: translateX(0) !important; /* Force initial position */
}

/* Additional toggle states for better reliability */
#cookie-analytics:not(:checked) + label {
  background-color: var(--color-neutral-light) !important;
}

#cookie-marketing:not(:checked) + label {
  background-color: var(--color-neutral-light) !important;
}

#cookie-analytics:not(:checked) + label span,
#cookie-marketing:not(:checked) + label span {
  transform: translateX(0) !important;
}

/* Animate-on-scroll: base hidden/visible states */
.aos {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms ease, filter 800ms ease;
  will-change: opacity, transform, filter;
}
.aos.aos-show {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Optional: staggered reveal for groups */
.aos-stagger > * {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms ease, filter 800ms ease;
}
.aos-stagger.aos-show > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.aos-stagger.aos-show > *:nth-child(2) {
  transition-delay: 100ms;
}
.aos-stagger.aos-show > *:nth-child(3) {
  transition-delay: 200ms;
}
.aos-stagger.aos-show > *:nth-child(4) {
  transition-delay: 300ms;
}
.aos-stagger.aos-show > *:nth-child(5) {
  transition-delay: 400ms;
}
.aos-stagger.aos-show > *:nth-child(6) {
  transition-delay: 500ms;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .aos,
  .aos-stagger > * {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
  }
}

/* Directional variants (desktop only) */
@media (min-width: 1024px) {
  .aos-left {
    transform: translate3d(-48px, 0, 0);
  }
  .aos-right {
    transform: translate3d(48px, 0, 0);
  }
  .aos-left.aos-show,
  .aos-right.aos-show {
    transform: translate3d(0, 0, 0);
  }
}