/* === /shared/base.css === */
/* ===========================================
   NUK Animation - Base Styles
   =========================================== */

/* ===========================================
   Font Faces - SofiaProSoft
   =========================================== */

@font-face {
  font-family: 'SofiaProSoft';
  src:
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftMed-webfont.woff2') format('woff2'),
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftMed-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src:
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftMedit-webfont.woff2') format('woff2'),
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftMedit-webfont.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src:
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftBold-webfont.woff2') format('woff2'),
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftBold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SofiaProSoft';
  src:
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftBoldit-webfont.woff2') format('woff2'),
    url('/fileadmin/fonts/SofiaProSoft/SofiaProSoftBoldit-webfont.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===========================================
   CSS Custom Properties - NUK Design Tokens
   =========================================== */

:root {
  /* Colors - from NUK design tokens */
  --nuk-bg: #f7f1e9; /* beige-1 */
  --nuk-accent: #85d1d3; /* turquoise */
  --nuk-accent-hover: #6fc5c7;
  --nuk-headline: #e72326; /* nuk-red */
  --nuk-text: #4f5252; /* dark-gray */
  --nuk-text-light: #646363; /* gray (base) */
  --nuk-card-bg: #ffffff; /* white */
  --nuk-border: #d5cfc9;
  --nuk-placeholder: #c9c3bc;
  --nuk-purple: #752a56;
  --nuk-green: #86b741;
  --nuk-blue: #154461;

  /* Spacing - from NUK design tokens */
  --nuk-spacing-xxxs: 4px;
  --nuk-spacing-xxs: 8px;
  --nuk-spacing-xs: 12px;
  --nuk-spacing-sm: 16px;
  --nuk-spacing-md: 24px;
  --nuk-spacing-lg: 32px;
  --nuk-spacing-xl: 40px;
  --nuk-spacing-xxl: 48px;

  /* Sizes - from NUK design tokens */
  --nuk-size-xs: 12px;
  --nuk-size-s: 16px;
  --nuk-size-m: 24px;
  --nuk-size-l: 32px;
  --nuk-size-xl: 40px;
  --nuk-size-xxl: 48px;
  --nuk-size-xxxl: 64px;

  /* Border Radius */
  --nuk-radius-sm: 8px;
  --nuk-radius-md: 16px;
  --nuk-radius-lg: 24px;
  --nuk-radius-pill: 999px;

  /* Animation */
  --nuk-duration-fast: 200ms;
  --nuk-duration-normal: 400ms;
  --nuk-duration-slow: 600ms;
  --nuk-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Float Animation */
  --nuk-float-distance: 8px;
  --nuk-float-duration: 12s;

  /* Typography - SofiaProSoft */
  --nuk-font-family: 'SofiaProSoft', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Font weights */
  --nuk-font-weight-medium: 500;
  --nuk-font-weight-bold: 700;

  /* Font sizes - using px to avoid Typo3's 10px root font-size breaking rem */
  --nuk-font-size-sm: 14px;
  --nuk-font-size-base: 16px;
  --nuk-font-size-lg: 20px;
  --nuk-font-size-xl: 24px;
  --nuk-font-size-2xl: 32px;
  --nuk-font-size-2xl-plus: 36px; /* badge/subheading */
  --nuk-font-size-3xl: 48px;
  --nuk-font-size-hero: clamp(48px, 8vw, 96px);
}


button {
  /* Prevent tap flash and selection */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

/* Utility Classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === /shared/components/hotspot/hotspot.css === */
/* ===========================================
   Hotspot Component
   Wrapper with toggle button + card (siblings)
   =========================================== */

/* Wrapper - positioned via inline styles */
.nuk-hotspot {
  position: absolute;
  z-index: 200;
}

/* Toggle button - always visible */
.nuk-hotspot__toggle {
  position: absolute;
  left: var(--nuk-spacing-xs);
  top: var(--nuk-spacing-xs);
  z-index: 2;
  width: var(--nuk-size-xxl);
  height: var(--nuk-size-xxl);
  border-radius: 50%;
  background: var(--nuk-card-bg);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

/* Border only when open - desktop only */
@media (min-width: 1440px) {
  .nuk-hotspot.nuk-prlx-is-open .nuk-hotspot__toggle {
    border-color: var(--nuk-text);
  }
}

/* Icon lines - 13px x 2px */
.nuk-hotspot__icon {
  position: relative;
  width: 13px;
  height: 13px;
}

.nuk-hotspot__icon::before,
.nuk-hotspot__icon::after {
  content: '';
  position: absolute;
  background: var(--nuk-text);
  top: 50%;
  left: 50%;
}

/* Horizontal line (always visible) */
.nuk-hotspot__icon::before {
  width: 13px;
  height: 2px;
  transform: translate(-50%, -50%);
}

/* Vertical line (hidden when open) */
.nuk-hotspot__icon::after {
  width: 2px;
  height: 13px;
  transform: translate(-50%, -50%);
}

.nuk-hotspot.nuk-prlx-is-open .nuk-hotspot__icon::after {
  display: none;
}

/* Card - hidden by default, has left padding for button */
.nuk-hotspot__card {
  position: absolute;
  display: none;
  flex-direction: column;
  gap: var(--nuk-spacing-xs);
  padding: var(--nuk-spacing-md);
  /* Left padding: button left offset + button size + gap */
  padding-left: calc(var(--nuk-spacing-xs) + var(--nuk-size-xxl) + var(--nuk-spacing-md));
  background: var(--nuk-card-bg);
  border-radius: var(--nuk-radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nuk-duration-fast) var(--nuk-easing);
}

.nuk-hotspot__title {
  font-size: var(--nuk-font-size-lg);
  font-weight: var(--nuk-font-weight-bold);
  line-height: 1;
  color: var(--nuk-text);
  margin: 0;
  width: 200px;
}

/* Link uses .nuk-btn from buttons.css */
.nuk-hotspot__link {
  align-self: flex-start;
}

/* ============================================
   Open state - show card
   ============================================ */
.nuk-hotspot.nuk-prlx-is-open .nuk-hotspot__card {
  opacity: 1;
  display: flex;
  visibility: visible;
}

/* ============================================
   Mobile: Dialog mode
   ============================================ */
@media (max-width: 1439px) {
  .nuk-hotspot-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  /* Card moved to body on mobile - style it as a dialog */
  body > .nuk-hotspot__card {
    display: flex;
    flex-direction: column;
    gap: var(--nuk-spacing-xs);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 48px);
    max-width: 400px;
    padding: var(--nuk-spacing-md);
    background: var(--nuk-card-bg);
    border-radius: var(--nuk-radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 1;
    visibility: visible;
  }

  body > .nuk-hotspot__card .nuk-hotspot__title {
    width: auto;
  }
}

/* === /shared/components/cards/cards.css === */
/* ===========================================
   Cards Component
   =========================================== */

.nuk-card {
  background: var(--nuk-card-bg);
  border-radius: var(--nuk-radius-md);
  padding: var(--nuk-spacing-md);
}

/* Card Title */
.nuk-card__title {
  font-size: var(--nuk-font-size-lg);
  font-weight: var(--nuk-font-weight-bold);
  line-height: 1.3;
  margin-bottom: var(--nuk-spacing-xs);
  color: var(--nuk-text);
}

/* Card Text */
.nuk-card__text {
  font-size: var(--nuk-font-size-base);
  color: var(--nuk-text-light);
  line-height: 1.6;
}

/* Card Link - use .nuk-btn class for styling, this just adds spacing context */
.nuk-card__link {
  margin-top: var(--nuk-spacing-sm);
}





/* === /shared/components/buttons/buttons.css === */
/* ===========================================
   Buttons Component
   =========================================== */

/* Base Button */
.nuk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--nuk-spacing-xs) var(--nuk-spacing-sm);
  border-radius: var(--nuk-radius-pill);
  font-size: var(--nuk-font-size-base);
  font-weight: var(--nuk-font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--nuk-duration-fast) var(--nuk-easing);
  border: none;
  background: var(--nuk-accent);
  color: var(--nuk-text);
  white-space: nowrap;
}

.nuk-btn:hover {
  background: var(--nuk-accent-hover);
}

.nuk-btn:focus-visible {
  outline: 2px solid var(--nuk-accent);
  outline-offset: 2px;
}

/* Button Variants */
.nuk-btn--outline {
  background: transparent;
  border: 2px solid var(--nuk-text);

  &:hover {
    background: rgba(133, 209, 211, 0.2);
  }

  &.nuk-prlx-is-active {
    background: var(--nuk-accent);
    border-color: var(--nuk-accent);
  }
}

/* Arrow Button (Circular) */
.nuk-arrow-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--nuk-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--nuk-duration-fast) var(--nuk-easing);
}

.nuk-arrow-btn:hover {
  background: rgba(45, 52, 54, 0.1);
  transform: scale(1.05);
}

.nuk-arrow-btn:focus-visible {
  outline: 2px solid var(--nuk-accent);
  outline-offset: 2px;
}

/* Arrow Icon */
.nuk-arrow-btn__icon {
  width: 24px;
  height: 24px;
  stroke: var(--nuk-text);
  stroke-width: 2;
  fill: none;
}

/* Icon Button (smaller) */
.nuk-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nuk-card-bg);
  border: 1px solid var(--nuk-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--nuk-duration-fast) var(--nuk-easing);
}

.nuk-icon-btn:hover {
  background: var(--nuk-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   Button with Icon (right side)
   =========================================== */

.nuk-btn--with-icon {
  gap: var(--nuk-spacing-xxs);
  padding-right: var(--nuk-spacing-xs); /* Reduced right padding for icon */
}

.nuk-btn__icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

/* === /shared/components/nav-groups/nav-groups.css === */
/* ============================================
   Nav Groups - Slide group navigation

   Dynamically generated nav for slide groups.
   Shows buttons with group names and progress
   lines between them.

   HTML structure (generated by JS):
   <nav class="nav-groups">
     <button class="nav-groups__btn">intro</button>
     <div class="nav-groups__line">
       <div class="nav-groups__line-fill"></div>
     </div>
     <button class="nav-groups__btn">nutrition</button>
     ...
   </nav>
   ============================================ */

/* Nav bar container */
.nuk-prlx-nav-bar {
  position: absolute;
  bottom: calc(50% - 360px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.nuk-prlx-nav-bar.nuk-prlx-nav-is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nuk-prlx-nav-bar__section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nuk-prlx-nav-groups {
  display: flex;
  align-items: center;
}

/* Nav buttons use .nuk-btn .nuk-btn--outline from buttons.css */

/* Dashed line between buttons (short-long-short pattern) */
.nuk-prlx-nav-groups__line {
  position: relative;
  width: 56px;
  height: 3px;
  margin: 0 16px;
  /* Base: text color (gray) dashed pattern */
  background: linear-gradient(
    90deg,
    var(--nuk-text) 0px,
    var(--nuk-text) 8px,
    transparent 8px,
    transparent 16px,
    var(--nuk-text) 16px,
    var(--nuk-text) 40px,
    transparent 40px,
    transparent 48px,
    var(--nuk-text) 48px,
    var(--nuk-text) 56px
  );
}

.nuk-prlx-nav-groups__line-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  /* Fill: teal dashed pattern */
  background: linear-gradient(
    90deg,
    var(--nuk-accent, #85d1d3) 0px,
    var(--nuk-accent, #85d1d3) 8px,
    transparent 8px,
    transparent 16px,
    var(--nuk-accent, #85d1d3) 16px,
    var(--nuk-accent, #85d1d3) 40px,
    transparent 40px,
    transparent 48px,
    var(--nuk-accent, #85d1d3) 48px,
    var(--nuk-accent, #85d1d3) 56px
  );
  transition: width 0.1s ease-out;
}

/* === /shared/components/sub-slides/sub-slides.css === */
/* ============================================
   Sub-slides - Fake pin + animated cards

   Wide slides (200vw) with counter-animated
   content that appears "pinned" while sub-slide
   items animate in and out.
   ============================================ */

@media (min-width: 1440px) {
  /* Allow slide grouping wrappers without breaking flex layout */
  .nuk-prlx-slider__track > *:not(.nuk-prlx-slide) {
    display: contents;
  }

  /* Wide slide - 2x width for sub-slide scroll room */
  .nuk-prlx-slide--with-subs {
    flex: 0 0 200vw;
    width: 200vw;
    display: flex;
  }

  /* Content container - will be counter-animated by GSAP (no CSS sticky) */
  .nuk-prlx-slide__sticky {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Spacer - provides extra scroll distance */
  .nuk-prlx-slide__spacer {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
  }

  /* Container for sub-slide items */
  .nuk-prlx-sub-slide {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
  }

  /* Individual sub-slide items */
  .nuk-prlx-sub-slide__item {
    position: absolute;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(80px);
    will-change: transform, opacity;
  }

  /* Depth-based z-index within sub-slide (higher than regular) */
  .nuk-prlx-sub-slide__item[data-depth='1'] {
    z-index: 54;
  }
  .nuk-prlx-sub-slide__item[data-depth='2'] {
    z-index: 53;
  }
  .nuk-prlx-sub-slide__item[data-depth='3'] {
    z-index: 52;
  }
  .nuk-prlx-sub-slide__item[data-depth='4'] {
    z-index: 51;
  }
}


/* === style.css (shared sections) === */
/* ===========================================
   NUK Parallax Slider - Merged Styles
   =========================================== */

/* Import shared styles */







/* ===========================================
   Slider Layout
   =========================================== */

body {
  /* gsap pin-spacer is causing overflow issues */
  overflow-x: hidden;
}

.nuk-prlx-slider,
.nuk-hotspot__card {
  font-size: var(--nuk-font-size-base);
  color: var(--nuk-text);
  -webkit-font-smoothing: antialiased;
}

.nuk-prlx-slider *,
.nuk-prlx-slider *::before,
.nuk-prlx-slider *::after {
  box-sizing: border-box;
}

.nuk-prlx-slider {
  & h2,
  & h3 {
    margin: 0;
  }
}

.nuk-prlx-slider *,
.nuk-hotspot__card * {
  font-family: var(--nuk-font-family) !important;
}

.nuk-prlx-slider {
  overflow: hidden;
  background-color: var(--nuk-bg);
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
}

.nuk-prlx-slider img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 1440px) and (min-height: 880px) {
  .nuk-prlx-desktop-hidden {
    display: none !important;
  }

  .page-header {
    transform: none !important;
    translate: none !important;
  }

  .nuk-prlx-slider {
    --slide-width: 1440px;
    --slide-height: 800px;
    position: relative;
    width: 100vw;
    height: var(--slide-height);
    overflow: hidden;

    /* Center the viewport both horizontally and vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nuk-prlx-slider__viewport {
    position: relative;
    width: var(--slide-width);
    height: var(--slide-height);
    overflow: visible;
  }

  .nuk-prlx-slider__track {
    display: flex;
    height: 100%;
    will-change: transform;
  }

  /* Hide slider track until JS is ready - prevents FOUC */
  .nuk-prlx-slider__track.nuk-prlx-is-loading {
    visibility: hidden;
  }

  /* Individual slide */
  .nuk-prlx-slide {
    flex: 0 0 var(--slide-width);
    width: var(--slide-width);
    height: var(--slide-height);
  }

  /* Allow slide grouping wrappers without breaking flex layout */
  .nuk-prlx-slider__track > *:not(.nuk-prlx-slide) {
    display: contents;
  }

  /* Wide slide - 2x width for sub-slide scroll room */
  .nuk-prlx-slide--with-subs {
    flex: 0 0 calc(var(--slide-width) * 2);
    width: calc(var(--slide-width) * 2);
    display: flex;
  }

  /* Content container - will be counter-animated by GSAP */
  .nuk-prlx-slide__sticky {
    flex: 0 0 var(--slide-width);
    width: var(--slide-width);
    height: var(--slide-height);
  }

  /* Spacer - provides extra scroll distance */
  .nuk-prlx-slide__spacer {
    flex: 0 0 var(--slide-width);
    width: var(--slide-width);
    height: var(--slide-height);
  }

  /* Hide first slide elements until JS reveals them */
  .nuk-prlx-slide[data-index='0'] [data-depth],
  .nuk-prlx-slide[data-index='0'] .nuk-hotspot__toggle {
    opacity: 0;
    visibility: hidden;
  }

  /* Mobile path wrapper - hidden on desktop by default */
  .nuk-prlx-mobile-path-wrapper {
    display: none;
  }

  /* Content wrapper - elements positioned inside */
  .nuk-prlx-slide__content {
    position: relative;
    width: var(--slide-width);
    height: var(--slide-height);
  }

  [data-depth] {
    position: absolute;
    will-change: transform;
  }

  /* z-index  based on depth */
  [data-depth='4'] {
    z-index: 1;
  }
  [data-depth='3'] {
    z-index: 2;
  }
  [data-depth='2'] {
    z-index: 3;
  }
  [data-depth='1'] {
    z-index: 4;
  }

  .nuk-dashed-line {
    position: absolute;
    pointer-events: none;
  }

  /* Photo wrapper - semantic grouping only, no layout impact */
  .nuk-prlx-photo-wrapper {
    display: contents;
  }

  .nuk-prlx-stacked-cards {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: end;
    justify-content: center;
    flex-direction: row;
    padding-bottom: calc(var(--nuk-spacing-xl) * 4);
    gap: var(--nuk-spacing-xl);
  }

  .nuk-prlx-stacked-cards__item,
  .nuk-prlx-stacked-cards > *,
  .nuk-prlx-stacked-cards__item > * {
    width: 300px; /* TODO: make this variable */
    position: static !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nuk-spacing-xl);
  }

  .nuk-hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    & > img,
    & > picture {
      transform: translate(-50%, -50%);
      display: block;
    }
    width: 1024px;
  }
}

/* Images */
.photo {
  border-radius: var(--nuk-radius-lg);
  object-fit: cover;
}

/* ===========================================
   Stacked Cards
   =========================================== */

/* ===========================================
   Typography
   =========================================== */

/* Badge/subheading */
.nuk-badge {
  display: inline-block;
  color: var(--nuk-headline);
  font-size: var(--nuk-font-size-2xl-plus);
  font-weight: var(--nuk-font-weight-bold);
  line-height: 1.06;
  text-transform: uppercase;
  margin-bottom: var(--nuk-spacing-sm);
}

/* Hero headline */
.nuk-headline {
  font-size: var(--nuk-font-size-hero);
  font-weight: var(--nuk-font-weight-bold);
  color: var(--nuk-text);
  line-height: 1;
  margin-bottom: var(--nuk-spacing-md) !important;
  text-transform: uppercase;
  text-wrap: pretty;
}

.nuk-headline--medium {
  font-size: 48px;
  line-height: 1;
}

/* Section headline (large, left-aligned) */
.nuk-section-headline {
  font-size: 96px;
  font-weight: var(--nuk-font-weight-bold);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--nuk-text);
  margin: 0;
  text-wrap: pretty;
}

/* Giant stacked text */
.nuk-giant-text {
  font-size: clamp(48px, 10vw, 128px);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--nuk-text);
}

/* Intro text (centered) */
.nuk-intro-text {
  max-width: 600px;
  font-size: var(--nuk-font-size-lg);
  color: var(--nuk-text-light);
  line-height: 1.5;
  margin-bottom: var(--nuk-spacing-lg);
}

/* Body text block */
.nuk-body-text {
  font-size: var(--nuk-font-size-base);
  color: var(--nuk-text-light);
  line-height: 1.7;
}

.nuk-body-text p {
  margin: 0;
}

/* ===========================================
   Slide: Intro
   =========================================== */

.nuk-prlx-slide--intro .nuk-prlx-slide__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Centered positioning - GSAP-safe (doesn't use transform) */
@media (min-width: 1440px) and (min-height: 880px) {
  .nuk-centered {
    inset: 0;
    margin: auto;
    height: fit-content;
  }
}

/* ===========================================
   Navigation Dots (from parallax-simple)
   =========================================== */

.nuk-prlx-nav {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100;
}

.nuk-prlx-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--nuk-border);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nuk-prlx-nav__dot.nuk-prlx-is-active {
  width: 30px;
  background: var(--nuk-text);
}

/* ===========================================
   Editor Mode - Wide Slide Display
   Shows 200vw slides as stacked 100vw sections
   =========================================== */

.nuk-editor-active .nuk-prlx-slide--with-subs {
  /* Override to single slide width */
  flex: 0 0 var(--slide-width);
  width: var(--slide-width);
  /* Stack children vertically */
  flex-direction: column;
  /* Allow vertical scroll to see both halves */
  height: auto;
  min-height: var(--slide-height);
}

.nuk-editor-active .nuk-prlx-slide--with-subs .nuk-prlx-slide__sticky {
  flex: 0 0 auto;
  height: var(--slide-height);
}

.nuk-editor-active .nuk-prlx-slide--with-subs .nuk-prlx-slide__spacer {
  /* Show spacer as visual indicator */
  flex: 0 0 auto;
  height: var(--slide-height);
  width: var(--slide-width);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 20px,
    rgba(0, 0, 0, 0.03) 20px,
    rgba(0, 0, 0, 0.03) 40px
  );
  position: relative;
}

.nuk-editor-active .nuk-prlx-slide--with-subs .nuk-prlx-slide__spacer::before {
  content: 'Sub-slide scroll area';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* Show sub-slide items in editor (normally hidden until animated) */
.nuk-editor-active .nuk-prlx-sub-slide__item {
  opacity: 1;
  transform: none;
}

/* Visual divider between main content and sub-slide area */
.nuk-editor-active .nuk-prlx-slide--with-subs .nuk-prlx-slide__sticky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--nuk-accent, #ff6b00) 20%,
    var(--nuk-accent, #ff6b00) 80%,
    transparent 100%
  );
}

/* ===========================================
   Mobile Slides (from parallax-simple)
   =========================================== */

[data-sub-slide] {
  display: contents;
}

/* === mobile.css (shared mobile resets) === */
/* ===========================================
   MOBILE STYLES (<1440px)
   =========================================== */

@media (max-width: 1439px), (max-height: 879px) {
  /* ===========================================
     1. CORE LAYOUT
     Slider, viewport, track, slides
     =========================================== */

  /* Reset horizontal slider to vertical scroll */
  .nuk-prlx-slider {
    --mobile-padding: var(--nuk-spacing-md);
    --mobile-content-width: 500px;
  }

  @media (min-width: 600px) {
    .nuk-prlx-slider {
      --mobile-padding: calc(var(--nuk-spacing-md) * 2);
    }
  }

  @media (min-width: 1000px) {
    .nuk-prlx-slider {
      --mobile-padding: calc(var(--nuk-spacing-md) * 4);
    }
  }

  .nuk-prlx-slider__viewport {
    overflow-x: hidden;
  }

  .nuk-prlx-slide {
    padding: var(--mobile-padding);
  }

  .nuk-prlx-slide__content,
  .nuk-prlx-slide__content-main {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nuk-spacing-lg);
  }

  .nuk-body-text {
    max-width: var(--mobile-content-width);
  }

  .nuk-hero-image {
    max-width: 1024px;
    height: 330px;
    display: flex;
    border-radius: calc(var(--nuk-radius-lg));
    overflow: hidden;
    & > img, & > picture {
      display: block;
      height: 100%;
      object-fit: cover;
    }
  }

  /* ===========================================
     2. VISIBILITY & HIDING
     Elements to show/hide on mobile
     =========================================== */

  /* Hide spacer on mobile */

  /* Hide desktop SVG paths on mobile */
  .nuk-dashed-line {
    display: none;
  }

  /* Mobile path wrapper and path - shown on mobile */
  .nuk-prlx-mobile-path-wrapper {
    display: block;
  }

  /* Hide navigation dots on mobile */
  .nuk-prlx-nav {
    display: none;
  }

  /* Hide group navigation on mobile */
  .nuk-prlx-nav-bar {
    display: none;
  }

  /* ===========================================
     3. POSITION RESETS
     Reset absolute positioning from desktop
     =========================================== */

  /* Mobile image border radius */
  .nuk-image-group__photo {
    border-radius: var(--nuk-radius-md) !important;
  }

  /* ===========================================
     4. MOBILE SLIDER COMPONENT
     Horizontal card slider for mobile
     =========================================== */

  .nuk-prlx-mobile-slider {
    --slider-card-width: 280px;

    display: block;
    position: relative;
    width: calc(100% + var(--mobile-padding) * 2);
  }

  .nuk-prlx-mobile-slider__track {
    display: flex;
    align-items: stretch; /* Equal heights */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--nuk-spacing-sm);
    padding: 0 var(--mobile-padding);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nuk-prlx-mobile-slider__track::-webkit-scrollbar {
    display: none;
  }

  .nuk-prlx-mobile-slider__track > * {
    flex: 0 0 var(--slider-card-width);
    scroll-snap-align: center;
    position: relative;
    margin: 0;
    align-self: stretch;
    & .nuk-card {
      height: 100%;
    }
  }

  /* Nested wrapper needs to be a stretching flex container */
  .nuk-prlx-mobile-slider__track > .nuk-prlx-stacked-cards__item {
    display: flex;
    flex-direction: column;
  }

  /* Sub-slide items inside wrapper stretch to fill */
  .nuk-prlx-stacked-cards__item > .nuk-prlx-sub-slide__item {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Cards inside nested wrappers fill their container */
  .nuk-prlx-stacked-cards__item .nuk-card {
    flex: 1;
  }

  .nuk-prlx-mobile-slider__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mobile-padding) var(--mobile-padding);
  }

  /* Dynamic: JS toggles --no-scroll when all cards fit */
  .nuk-prlx-mobile-slider--no-scroll {
    width: auto;
  }

  .nuk-prlx-mobile-slider--no-scroll .nuk-prlx-mobile-slider__controls {
    display: none;
  }

  .nuk-prlx-mobile-slider--no-scroll .nuk-prlx-mobile-slider__track {
    overflow-x: visible;
    scroll-snap-type: none;
  }

  /* Pagination dots */
  .nuk-prlx-mobile-slider__dots {
    display: flex;
    gap: 8px;
  }

  .nuk-prlx-mobile-slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: var(--nuk-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .nuk-prlx-mobile-slider__dot.nuk-prlx-is-active {
    width: 32px;
    background: var(--nuk-text);
  }

  /* Arrow buttons */
  .nuk-prlx-mobile-slider__arrows {
    display: flex;
    gap: 8px;
  }

  .nuk-prlx-mobile-slider__arrow {
    width: var(--nuk-spacing-xxl);
    height: var(--nuk-spacing-xxl);
    border-radius: 50%;
    background: var(--nuk-accent);
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
  }

  .nuk-prlx-mobile-slider__arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .nuk-prlx-mobile-slider__arrow svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2;
    fill: none;
  }

  /* ===========================================
     5. TYPOGRAPHY
     Mobile-specific typography adjustments
     =========================================== */

  .nuk-section-headline {
    text-align: center;
    font-size: clamp(
      var(--nuk-font-size-3xl),
      calc(var(--nuk-font-size-3xl) + 3vw),
      var(--nuk-font-size-hero)
    );
    max-width: 600px;
  }

  .nuk-headline--medium {
    font-size: clamp(
      var(--nuk-font-size-2xl),
      calc(var(--nuk-font-size-xl) + 2vw),
      var(--nuk-font-size-3xl)
    );
  }

  .nuk-badge {
    font-size: clamp(
      var(--nuk-font-size-base),
      calc(var(--nuk-font-size-base) + 0.5vw),
      var(--nuk-font-size-xl)
    );
  }

  /* ===========================================
     Element-Specific Overrides
     =========================================== */

  .nuk-body-text {
    text-align: left;
  }

  /* ===========================================
     Utility Classes
     =========================================== */

  .nuk-prlx-mobile-hidden {
    display: none !important;
  }

  .nuk-prlx-mobile-center {
    margin-left: auto;
    margin-right: auto;
  }

  .nuk-prlx-mobile-full-width {
    width: 100%;
    max-width: 100%;
  }

  .nuk-prlx-mobile-order-first {
    order: -1;
  }

  .nuk-prlx-mobile-order-last {
    order: 999;
  }
}