:root{
      --bg: #0e0f13;
      --ink: #ffffff;
      --ink-dim: rgba(255,255,255,.85);
      --pill: #6f584e;
      --grid-max: 1280px;
      --frame: 1.5rem;
      --frame-mobile: 0.375rem;
      --blur: 24px;
    }

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; overflow: hidden;}

/* Scroll Container System for Momentum Absorption */
.scroll-container {
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  position: relative;
}

.scroll-content {
  width: 100vw;
  transform: translateY(0);
  transition: transform 0s linear;
}

/* outer frame */
.frame {
  position:fixed; top:0; left:0; right:0; bottom:0;
  border: var(--frame) solid #fff;
  pointer-events:none;
  z-index:5;
  transition: border-width 0.4s ease;
}

.frame.menu-open {
  border-width: 0;
}

.frame.hidden {
  border-width: 0;
}

/* Scroll progress cursor */
.scroll-cursor {
  position: fixed;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.scroll-cursor.visible {
  opacity: 1;
}

.scroll-cursor svg {
  display: block;
}

.scroll-cursor circle {
  stroke-linecap: round;
}

/* UNIFIED BUTTON TEXT STYLE */
.btn-text {
  font-size:14px; 
  font-weight:300; 
  text-transform:uppercase; 
  letter-spacing:.04em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* NAV */
.nav{position:fixed; top:0; left:0; right:0; z-index:1100; padding:3rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;}
.nav-pills-wrapper{justify-self:center; background:rgba(255,255,255,0.10); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border-radius:999px; padding:0 10px; display:flex; gap:6px; align-items:center;}

/* NAV PILLS */
.pill{
  background:transparent; 
  color:#fff; 
  padding:12px 14px; 
  border-radius:999px; 
  position:relative; 
  overflow:visible;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pill::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: #fff;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Hover state - same as active state */
.pill:hover::before{
  width: calc(100% - 28px);
}

/* Active state for navigation pills */
.pill.active::before{
  width: calc(100% - 28px);
}

/* STANDARDIZED PILL SIZE */
.pill-standard{
  background:rgba(255,255,255,.18);
  color:#fff;
  padding:12px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.04em;
  backdrop-filter: blur(var(--blur));
  transition: all 0.3s ease;
}

/* BUY BUTTON */
.buy{
  justify-self:center;
  background: var(--pill) !important;
}

/* MENU COMBO */
.menu-combo{
  justify-self:end;
  display:none; /* Hidden on desktop */
  align-items:center;
  gap:8px;
}

.menu-separator {
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.4);
  margin: 0 4px;
}

/* NAV ACTIONS */
.brand{display:flex; align-items:center; gap:12px; margin:0; transition: transform 0.3s ease; cursor: pointer;}
.brand svg{height:36px; width:auto; display:block; color:#fff; margin:0 !important;}

/* Logo visibility - Desktop: show full, hide mobile */
.logo-desktop { display: block !important; }
.logo-mobile { display: none !important; }

.nav-actions{display:flex; align-items:center; gap:.5rem; justify-self:center;}
.home{
  display:none; /* Hidden on desktop */
}
.menu-btn{
  width:18px; height:18px; 
  display:flex;
  flex-direction:column; justify-content:center; align-items:center; 
  gap:3px; padding:0; cursor:pointer;
  background:none;
  border:none;
  transition: transform 0.3s ease;
}
.menu-btn:hover {transform: scale(1.1);}
.menu-btn span{display:block; width:18px; height:2px; background:#fff; transition: all 0.3s ease; transform-origin: center;}
.menu-btn:hover span {background: #ccc;}

/* Transform burger to X when menu is active */
.menu-active .menu-btn span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.menu-active .menu-btn span:nth-child(2) {
  opacity: 0;
}

.menu-active .menu-btn span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Change logo and burger menu color to black when mobile menu is active */
.menu-active .brand svg {
  color: #000 !important;
}

.menu-active .menu-btn span {
  background: #000 !important;
}

/* HERO */
.hero{position:relative; height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100); overflow:hidden; display:flex; flex-direction:column;}
.hero-media{position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%;}
/* Removed: All overlays now handled by JavaScript unified system */

/* Solution overlay - separate element for smooth transition */
.solution-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255,255,255), rgb(255,255,255));
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  will-change: opacity;
}

.solution-overlay.active {
  opacity: 0.3 !important;
}

/* Make scenario tagline button cursor pointer */
.scenario-tagline {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.scenario-tagline:hover {
  opacity: 0.8;
}

/* Features section - grey background with inverted radial overlay */
#features {
  background: #dddddd;
}

/* Removed: hero-media now needed for overlay */

/* Removed: Features overlay now handled by JavaScript unified system */

/* Centered feature image - dual container */
.feature-image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40vw;
  height: 60vh;
}

.feature-image {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.6s ease, filter 0.6s ease;
}

.feature-image.active {
  opacity: 1;
  filter: blur(0px);
}

.feature-hand-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40vw;
  height: 60vh;
}

.feature-hand {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  pointer-events: none;
  display: none;
  transform-origin: 60% 30%;
}

.feature-hand.active {
  display: block;
  animation: handTap 4s ease-in-out forwards;
}

@keyframes handTap {
  0% {
    opacity: 0;
    transform: translate(20vw, -20vh);
  }
  15% {
    opacity: 1;
    transform: translate(0, 0);
  }
  35% {
    opacity: 1;
    transform: translate(0, 0) rotate(-5deg);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0);
  }
  60% {
    opacity: 1;
    transform: translate(0, 0);
  }
  70% {
    opacity: 0;
    transform: translate(10vw, -10vh);
  }
  100% {
    opacity: 0;
    transform: translate(20vw, -20vh);
  }
}

.hero-media video, .hero-media img{position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; top:0; left:0; z-index: -1;}

/* Home section - hide elements initially for animation */
.headline-wrap,
.sub {
  opacity: 0;
  transform: translateY(30px);
}

#home .desktop-watch-video,
.trusted {
  opacity: 0;
}

/* Features section - clean slate for animations */
.feature-nav-item {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease;
}

.feature-nav-item.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.feature-nav-item.animate-out {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.15s ease;
}

.features-content-box {
  opacity: 0;
  transform: translateY(20px);
}

/* Impact section - hide elements initially for animation */
.impact-title,
.control-label,
.control-input,
.waiter-agreement,
.result-card {
  opacity: 0;
}

.hero-content{position:relative; z-index:1; width:100%; height:100%; padding:var(--frame); display:flex; flex-direction:column; justify-content:flex-end;}
#references .hero-content{pointer-events:none;}
#references .hero-content .btn{pointer-events:auto;}
.center-rail{flex:1; display:flex; align-items:center;}
.container{margin-left:1.5rem;}

/* headline with mask */
.headline-wrap{margin:0; padding:0; position:relative; left:-3.5rem;} 
.headline-cutout{display:block; width:calc(100% - 1.5rem); height:auto; margin-left:0; padding:0}
.sub{max-width: 58ch; font-size: clamp(16px, 1.6vw, 22px); color:var(--ink-dim); line-height:1.45; position: relative; left: 0;}
.cta-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:2rem; position: relative;}

/* Show desktop version by default, hide mobile version */
.mobile-watch-video {
  display: none !important;
}
.desktop-watch-video {
  display: flex !important;
  opacity: 0;
}

/* CTA BUTTON */
.btn{
  background: transparent;
  border:none;
  padding:12px 18px;
  border-radius:999px;
  color:#fff;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: visible;
}
a.btn.btn-text::before,
.buy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: all 0.3s ease;
  z-index: -1;
}
a.btn.btn-text:hover::before {
  background: rgba(255,255,255,.3);
  transform: scale(1.1);
}

.buy:hover::before {
  background: var(--pill);
  transform: scale(1.1);
}
.triangle{width:0;height:0;border-left:10px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent; transition: all 0.3s ease;}

/* GHOST BUTTON - ORIGINAL STYLING */
.ghost-wrapper{
  position:absolute; 
  left:3rem; 
  bottom:3rem; 
  z-index:2;
}
.ghost{
  color:#fff;
  opacity:.9;
  transition: all 0.3s ease;
  cursor: pointer;
}
.ghost:hover {
  opacity: 1;
}
.circle{
  width:40px;
  height:40px;
  border:2px solid #fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition: all 0.3s ease;
  background: transparent;
}
.ghost:hover .circle {
  background: #fff;
}
.arrow{
  width: 16px;
  height: 16px;
  display: block;
  transition: all 0.3s ease;
}
.arrow svg {
  width: 100%;
  height: 100%;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ghost:hover .arrow svg {
  stroke: #000;
}

/* Scenario page center-rail override */
.center-rail.scenario-page {
  display: block !important;
  flex: none !important;
  align-items: initial !important;
  flex-direction: initial !important;
  margin-bottom: 1.5rem;
}

/* SCENARIO PAGE STYLES */
.scenario-layout {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: flex-end;
  height: 100%;
  margin-left: -1.5rem;
}

.scenario-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: flex-end;
  margin-bottom: 4rem;
  margin-left: 0;
}

.scenario-content {
  background: #fff;
  color: #000;
  padding: 1.5rem;
  margin-left: 1.5rem;
  max-width: 320px;
  border-radius: 0;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.scenario-content.visible {
  transform: translateY(0);
  opacity: 1;
}

.scenario-content p {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 !important;
  position: relative;
  z-index: 0;
}

.scenario-content p::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: left;
  transform: scaleX(0);
  animation: var(--reveal-animation, none);
  z-index: 1;
  transition: width 0.2s ease, height 0.2s ease;
}

.scenario-content p > span {
  opacity: 0;
  position: relative;
  z-index: 0;
}

.scenario-content p > span.animating {
  animation: var(--text-animation, none);
}

@keyframes revealText {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  51% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Mirrored version for features (right to left) */
@keyframes revealTextMirrored {
  0% {
    transform: scaleX(0);
    transform-origin: right;
  }
  50% {
    transform: scaleX(1);
    transform-origin: right;
  }
  51% {
    transform: scaleX(1);
    transform-origin: left;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}

@keyframes fadeInText {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Fade in immediately for scenario transitions */
@keyframes fadeInTextImmediate {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Fade in starting from 25% for initial reveal */
@keyframes fadeInTextEarly {
  0% {
    opacity: 0 !important;
  }
  25% {
    opacity: 0 !important;
  }
  26% {
    opacity: 1 !important;
  }
  100% {
    opacity: 1 !important;
  }
}

@keyframes hideText {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  99% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

/* Reveal ONLY - starts from fully covered (scaleX 1) and shrinks right-to-left */
@keyframes revealTextOnly {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Cover ONLY (mirrored) - expands right to left to cover, then stays covered */
@keyframes coverTextOnlyMirrored {
  0% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(1);
    transform-origin: right;
  }
}

/* Cover-hold-reveal: Single continuous animation for scenario transitions */
@keyframes coverHoldReveal {
  /* 0-45%: Cover (expand left to right) */
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left;
  }
  /* 45-55%: Hold fully covered (text swaps here) */
  55% {
    transform: scaleX(1);
    transform-origin: right;
  }
  /* 55-100%: Reveal (shrink right to left) */
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* Cover-hold-reveal MIRRORED: For feature transitions (right to left) */
@keyframes coverHoldRevealMirrored {
  /* 0-45%: Cover (expand right to left) */
  0% {
    transform: scaleX(0);
    transform-origin: right;
  }
  45% {
    transform: scaleX(1);
    transform-origin: right;
  }
  /* 45-55%: Hold fully covered (text swaps here) */
  55% {
    transform: scaleX(1);
    transform-origin: left;
  }
  /* 55-100%: Reveal (shrink left to right) */
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}

@keyframes slideInBox {
  from {
    transform: scaleX(0) translateX(-1.5rem) translateY(0);
    transform-origin: left;
    opacity: 1;
  }
  to {
    transform: scaleX(1) translateX(0) translateY(0);
    transform-origin: left;
    opacity: 1;
  }
}

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

/* Mirrored versions for features (right side) */
@keyframes slideInBoxMirrored {
  from {
    transform: scaleX(0) translateY(0);
    transform-origin: right;
    opacity: 1;
  }
  to {
    transform: scaleX(1) translateY(0);
    transform-origin: right;
    opacity: 1;
  }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInBlur {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Dedicated animations for real DOM overlay element (not pseudo-element) */
@keyframes coverTextWithBlackBox {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

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

.scenario-tagline-box {
  background: #fff;
  color: #000;
  padding: 0;
  width: fit-content;
  border-radius: 0;
  transform: translateY(20px);
  opacity: 0;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.scenario-tagline {
  margin: 0 !important;
  padding: 1rem 1.5rem 1rem 3rem;
  color: #c2a191;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.scenario-arrow-box {
  background: var(--pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  transition: background 0.3s ease;
}

.scenario-arrow {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.scenario-tagline-box:hover .scenario-arrow-box {
  background: #fff;
}

.scenario-tagline-box:hover .scenario-arrow {
  stroke: var(--pill);
  transform: translateX(4px);
}

.scenario-tagline-box:hover .scenario-arrow.left {
  stroke: var(--pill);
  transform: translateX(-4px);
}

.scenario-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
  justify-content: flex-end;
  margin-right: -1px;
}

.scenario-item {
  position: relative;
  cursor: pointer;
  transform: translateX(50px);
  opacity: 0;
  text-align: right;
  overflow: visible;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: -1px;
}

.scenario-item:last-child {
  margin-bottom: 0;
}

.scenario-item:hover .scenario-text-svg {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.scenario-item .scenario-text-svg {
  transition: opacity 0.6s ease-in-out;
}

.scenario-item:nth-child(1) {animation-delay: 0.1s;}
.scenario-item:nth-child(2) {animation-delay: 0.2s;}
.scenario-item:nth-child(3) {animation-delay: 0.3s;}
.scenario-item:nth-child(4) {animation-delay: 0.4s;}
.scenario-item:nth-child(5) {animation-delay: 0.5s;}

/* Regular text SVG - positioned to fill container width */
.scenario-text-svg {
  position: relative;
  height: 5.2vw;
  width: 100%;
  max-width: none;
  z-index: 1;
  opacity: 1;
}

/* SVG cutout - positioned above the text to fill container width */
.scenario-cutout {
  position: absolute;
  top: 0;
  right: -2px;
  height: 5.2vw;
  width: calc(100% + 4px);
  max-width: none;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}

/* Initial state - background rectangle starts off-screen */
.mask-rect {
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
}

/* On hover - background rectangle slides in from the right */
.scenario-item:hover .mask-rect {
  transform: translateX(0);
}

/* Active state - background rectangle stays visible */
.scenario-item.active .mask-rect {
  transform: translateX(0) !important;
}

/* Active state - text stays hidden */
.scenario-item.active .scenario-text-svg {
  opacity: 0 !important;
}

/* Mobile scenario header (hidden on desktop) */
.mobile-scenario-header {
  display: none;
}

#references .center-rail {
  align-items: flex-end;
  padding-bottom: 8rem;
}

#references .references-layout {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: auto;
  padding: 0;
  margin: 0;
}

#references .container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.references-unified-container {
  display: grid;
  grid-template-columns: 50vw 20vw 30vw;
  align-items: stretch;
  height: 40vh;
  width: 100vw;
  position: relative;
  left: calc(-1 * var(--frame));
  margin: 0;
  gap: 0.5rem;
}

.reference-image-container {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  opacity: 0;
  position: relative;
  /* iOS 18.2 (Safari 26.2) fix: prevent automatic min-size from growing container */
  min-width: 0;
  min-height: 0;
}

/* Expand Image Button */
.expand-image-btn-wrapper {
  position: absolute;
  top: 3rem;
  right: 3rem;
  z-index: 10;
}

.expand-image-btn {
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #fff;
  font-size: 0.875rem;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.expand-image-btn:hover {
  opacity: 1;
}

.expand-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  transition: transform 0.3s ease;
}

.expand-image-btn:hover .expand-icon {
  transform: scale(1.3);
}

.expand-icon svg {
  width: 100%;
  height: 100%;
  fill: #fff;
}

.reference-color-square {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--frame) solid #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-width 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* iOS 18.2 (Safari 26.2) fix: prevent automatic min-size from growing container */
  min-width: 0;
  min-height: 0;
}

.reference-main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.4s ease;
}

.reference-color-square::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease;
  transform: scale(1);
  z-index: 0;
}

.reference-image-container:hover .reference-main-image {
  transform: scale(1.05);
}

/* Fullscreen Image Overlay */
.fullscreen-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fullscreen-image-overlay.active {
  display: flex;
  opacity: 1;
}

.fullscreen-image-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.fullscreen-image-overlay .close-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 3rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  line-height: 1;
  padding: 0;
  width: 3rem;
  height: 3rem;
}

.fullscreen-image-overlay .close-btn:hover {
  opacity: 1;
}

.reference-image-container:hover .expand-icon {
  transform: scale(1.3);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
  cursor: pointer;
  pointer-events: none; /* Don't block hover/click on parent */
}

.reference-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(50px);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  position: relative;
  z-index: 1;
  transition: all 0.6s ease;
}

.reference-logo-container.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.reference-logo-container.animate-in * {
  opacity: 1;
}

.reference-logo-container.animate-out {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.3s ease;
}

.reference-logo {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}
.reference-logo img {
  max-width: 80%;
  max-height: 9rem;
  object-fit: contain;
}

.reference-logo img.lazy-png {
  filter: blur(10px);
}

.reference-logo img.lazy-png.loaded {
  filter: none;
}

.reference-quote-section {
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 4rem;
  border-radius: 0;
  backdrop-filter: none;
  position: relative;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s ease;
}

.reference-quote-section * {
  opacity: 0;
}

.reference-quote-section.animate-in {
  transform: scaleX(1);
}

.reference-quote-section.animate-in * {
  opacity: 1;
  transition: opacity 0.4s ease 0.6s;
}

.reference-quote-section.animate-out {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease 0.3s;
}

.reference-quote-section.animate-out * {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reference-quote-container {
  position: relative;
  background: transparent;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.reference-quote-container.animate-in {
  opacity: 1;
}

.reference-quote-container.animate-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quote-marks {
  position: absolute;
  top: -2rem;
  right: -1rem;
  z-index: 3;
  font-size: 8rem;
  line-height: 0.5;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-weight: bold;
  color: rgba(14, 15, 19, 0.8);
  text-shadow: 0 0 10px rgba(14, 15, 19, 0.5);
}

/* Remove the pseudo-element approach */
.reference-quote-section::after {
  display: none;
}

.reference-quote {
  font-size: 2vh;
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  color: #000;
  margin: 0;
  position: relative;
  z-index: 2;
  padding: 1rem;
  text-align: center;
}

.quote-indicators {
  position: absolute;
  top: -1.5rem;
  left: 0;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.quote-indicator {
  width: 2rem;
  height: 1rem;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-radius: 0;
  opacity: 0;
  transition: background 0.3s ease, opacity 0.6s ease;
  cursor: pointer;
}

.quote-indicator.animate-in {
  opacity: 1;
}

.quote-indicator.animate-out {
  opacity: 0;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.quote-indicator.active {
  background: #fff;
}

.quote-indicator:hover {
  background: rgba(255, 255, 255, 0.6);
}

.reference-attribution {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: transparent;
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  margin-top: auto;
  position: relative;
  z-index: 10;
}

.reference-quote-section > svg.reference-quote-svg {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.reference-quote-section > svg.reference-quote-svg.animate-in {
  opacity: 1;
}

.reference-quote-section > svg.reference-quote-svg.animate-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reference-details {
  flex: 1;
  z-index: 10;
  position: relative;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.reference-details.animate-in {
  opacity: 1;
}

.reference-details.animate-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reference-name {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--pill);
  margin-bottom: 0.25rem;
  opacity: 1;
  z-index: 10;
  position: relative;
}

.reference-company {
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  opacity: 1;
  z-index: 10;
  position: relative;
}

.reference-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
}

.reference-nav-btn {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 1;
}

.reference-nav-btn:hover {
  border-color: rgba(0, 0, 0, 0.4);
  color: #000;
  background: rgba(0, 0, 0, 0.1);
}

.reference-nav-btn:active {
  transform: scale(0.95);
}

/* Mobile styles for references */
@media screen and (max-width: 768px) {
  .references-bottom-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh !important;
    display: grid;
    grid-template-rows: 33.33vh 33.33vh 33.34vh !important;
    gap: 0 !important;
  }
  
  /* Watch Video section - top third - reuse home mobile watch video styling */
  .cta-row.desktop-watch-video {
    display: flex !important;
    grid-row: 1;
    order: -1;
    align-self: center;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 3;
  }
  
  .references-unified-container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: none;
    align-items: stretch;
    height: 100%;
    width: 100vw;
    position: relative;
    left: 0;
    margin: 0;
    gap: 0;
    grid-row: 2 / 4;
  }
  
  .reference-image-container {
    grid-row: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    /* iOS 18.2 (Safari 26.2) fix: prevent automatic min-size from growing container */
    min-width: 0;
    min-height: 0;
  }

  .reference-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
  }

  /* Expand Image Button - Mobile */
  .expand-image-btn-wrapper {
    top: 0.5rem;
    right: 1rem;
  }

  .expand-image-btn {
    font-size: 0.75rem;
    gap: 0.375rem;
  }

  .expand-icon {
    width: 1rem;
    height: 1rem;
  }

  /* Hide logo section completely on mobile */
  .reference-logo-container {
    display: none;
  }
  
  .reference-quote-section {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 2rem;
    border-radius: 0;
    backdrop-filter: none;
    position: relative;
    height: 100%;
  }
  
  .reference-quote-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: transparent;
    position: relative;
  }
  
  .reference-quote {
    font-size: 1.5rem;
    text-align: center;
    color: #000;
    line-height: 1.3;
    position: relative;
    z-index: 2;
  }
  
  /* Hide the desktop SVG background on mobile and use simple white background */
  .reference-quote-section > svg.reference-quote-svg {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  .quote-marks {
    font-size: 4rem;
    top: -1rem;
    right: 1rem;
    color: rgba(0, 0, 0, 0.1);
  }
  
  .quote-indicators {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
    justify-content: center;
  }
  
  .reference-attribution {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: transparent;
    color: #000;
    padding: 1rem;
    border-radius: 0;
    margin-top: auto;
    justify-content: space-between;
    position: relative;
    z-index: 10;
  }
  
  .reference-nav {
    display: flex !important;
    order: 1;
    justify-content: flex-end;
    margin-right: 0;
    opacity: 1 !important;
  }
  
  .reference-nav-btn {
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    z-index: 100 !important;
    position: relative !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  
  /* Progress ring positioning */
  .reference-nav-btn .nav-progress-circle {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 1 !important;
    display: block !important;
  }

  .reference-nav-btn .nav-progress-circle circle {
    fill: none !important;
  }

  .reference-nav-btn .nav-progress-circle circle:first-child {
    stroke: #dddddd !important;
    stroke-width: 2 !important;
  }

  .reference-nav-btn .nav-progress-circle circle.progress-ring {
    stroke: #6f584e !important;
    stroke-width: 2 !important;
  }

  /* Chevron positioning - must be above progress ring */
  .reference-nav-btn .nav-chevron {
    position: relative !important;
    z-index: 3 !important;
    background: transparent !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .reference-nav-btn .nav-chevron path {
    stroke: #dddddd !important;
    stroke-width: 2.5px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
  }
  
  .reference-nav-btn:hover {
    color: #6f584e !important;
    background: transparent !important;
  }
  
  .reference-nav-btn:hover .nav-progress-circle circle:first-child {
    stroke: #6f584e !important;
    fill: none !important;
  }
  
  /* Remove border from image on mobile */
  .reference-color-square {
    border: none !important;
  }
  
  .reference-details {
    flex: 1;
    order: 0;
  }
  
  .reference-name {
    color: var(--pill);
  }
  
  .reference-company {
    color: #000;
  }
  
  /* Check Impact button - positioned like other sections */
  .references-bottom-wrapper .ghost-wrapper {
    position: relative !important;
    align-self: flex-start !important;
    margin: 0 !important;
    z-index: 15 !important;
  }
  
  /* Make sure ghost button is visible */
  .references-bottom-wrapper .ghost-wrapper .ghost {
    display: flex !important;
    opacity: 0.9 !important;
  }
}

/* FEATURES PAGE STYLES */
.features-layout {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: center;
  height: 100%;
  margin-left: -1.5rem;
}

.features-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 5.5rem;
  flex-shrink: 0;
}

/* Hide mobile overlay on desktop */
.feature-nav-overlay {
  display: none;
}

.feature-nav-item {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,1);
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* No transitions - animations handled purely in JS */
}

.feature-nav-item {
  color: rgba(255,255,255,0.5);
}

.feature-nav-item .feature-text-svg {
  transition: opacity 0.4s ease;
}

.feature-nav-item .feature-cutout {
  transition: none;
}

.feature-nav-item.active {
  color: rgba(255,255,255,1);
}

.feature-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

.feature-icon svg {
  max-width: 80% !important;
  max-height: 80% !important;
  width: auto !important;
  height: auto !important;
}

/* Hide icon cutout on desktop - only show on mobile */
.feature-icon-cutout {
  display: none !important;
}

/* Feature text cutout styles */
.feature-text-container {
  position: relative;
  height: 40px;
  flex: 1;
  padding-left: 0.5rem;
}

.feature-text-svg {
  position: relative;
  height: 40px;
  left: -0.5rem;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

.feature-cutout {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  z-index: 2;
  opacity: 1;
}

.feature-mask-rect {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.4s ease-in-out;
}

/* Hover effects */
.feature-nav-item:hover .feature-text-svg {
  opacity: 0;
}

.feature-nav-item:hover .feature-mask-rect {
  transform: scaleX(1);
}

/* Active state effects */
.feature-nav-item.active .feature-text-svg {
  opacity: 0 !important;
}

.feature-nav-item.active .feature-mask-rect {
  transform: scaleX(1) !important;
}

/* Features page center-rail override - remove flex properties */
#features .center-rail {
  display: block;
  flex: none;
  align-items: initial;
}

/* Features page hero-content override - desktop only */
@media screen and (min-width: 769px) {
  #features .hero-content {
    justify-content: center;
  }
}

/* FEATURES CONTENT - Completely independent positioning */
.features-content {
  position: absolute;
  right: var(--frame);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: end;
  z-index: 1;
  width: auto;
  height: auto;
}

.features-content-box {
  background: #fff;
  color: #000;
  padding: 1.5rem;
  border-radius: 0;
  width: auto;
  height: auto;
  max-width: 320px;
  display: block;
}

.feature-quote {
  font-style: italic;
  color: var(--pill);
  font-size: 16px;
  display: block;
}

.feature-description {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: #000;
  display: block;
  position: relative;
  z-index: 0;
}

.feature-description::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #000;
  transform-origin: right;
  transform: scaleX(0);
  animation: var(--reveal-animation, none);
  z-index: 1;
  transition: width 0.2s ease, height 0.2s ease;
}

.feature-description > span {
  opacity: 0;
  position: relative;
  z-index: 0;
}

.feature-description > span.animating {
  animation: var(--text-animation, none);
}

.feature-tagline-box {
  background: #fff;
  color: #000;
  padding: 1rem 1.5rem;
  width: fit-content;
  border-radius: 0;
  height: auto;
  display: block;
}

.feature-tagline {
  margin: 0 0 0 2rem;
  color: #c2a191;
  font-weight: 500;
  font-size: 14px;
  display: block;
}

/* Features navigation button */
.features .ghost-wrapper {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  z-index: 3;
}

/* IMPACT PAGE STYLES */
.impact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 2rem;
}

.impact-calculator {
  color: #fff;
  max-width: 500px;
}

.impact-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 3rem 0;
  color: #fff;
}

.calculator-controls {
  margin-bottom: 2rem;
  margin-left: -2rem;
}

.control-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-left: -4rem;
}

.control-label {
  font-size: 16px;
  font-weight: 300;
  color: #000;
  flex: 1;
  background: #fff;
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-radius: 0 2rem 2rem 0;
  margin-right: 1rem;
  text-align: right;
  margin-left: 0;
}

.control-label .highlight {
  color: var(--pill);
  font-weight: 500;
}

.control-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.1);
  border-radius: 2rem;
  padding: 0.5rem;
  backdrop-filter: blur(var(--blur));
}

.control-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.control-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}

.control-value {
  min-width: 3rem;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.waiter-agreement {
  margin: 2rem 0;
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  gap: 0.75rem;
}

.checkbox-container input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.checkmark {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.checkmark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
  transform: translate(-50%, -50%) scale(1);
}

.checkbox-container:hover .checkmark {
  border-color: #fff;
}

.investigate-faq {
  margin-top: 3rem;
  position: absolute;
  bottom: 3rem;
  left: 3rem;
}

.investigate-faq .ghost {
  justify-content: flex-start;
  font-size: 14px;
}

/* Impact Results Grid */
.impact-results {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 600px;
}

.result-card {
  background: #fff;
  border-radius: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 140px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  position: relative;
  cursor: pointer;
}

@media (hover: hover) {
  .result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background-color: var(--pill);
  }

  .result-card:hover .card-category {
    color: white;
  }

  .result-card:hover .card-metric,
  .result-card:hover .card-value {
    opacity: 0;
  }

  .result-card:hover .card-disclaimer {
    opacity: 1;
  }
}

/* Active state when info icon is clicked */
.result-card.active {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  background-color: var(--pill);
}

.result-card.active .card-category {
  color: white;
}

.result-card.active .info-icon {
  color: white;
}

.result-card.active .card-metric,
.result-card.active .card-value {
  opacity: 0;
}

.result-card.active .card-disclaimer {
  opacity: 1;
}

.card-disclaimer {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  font-size: 12px;
  line-height: 1.4;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.card-category {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
}

.card-category.golden {
  color: var(--pill);
}

.info-icon {
  color: var(--pill);
  opacity: 0.9;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: content-box;
}

.info-icon:hover {
  opacity: 1;
  transform: scale(1.05);
}

.card-metric {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.card-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-top: auto;
}

.card-value.positive {
  color: #4CAF50;
}

.card-value.negative {
  color: #4CAF50;
}

/* Impact page center-rail override */
#impact .center-rail {
  display: block;
  flex: none;
  align-items: initial;
  height: calc(var(--vh, 1vh) * 100);
}

/* FAQ PAGE STYLES */
.faq-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: min(1200px, 80vw);
  margin: 0 auto;
  padding: 2rem 0 !important;
}

/* Height-based responsive adjustments */
@media (max-height: 900px) {
  .faq-layout {
    max-width: min(1000px, 70vw);
  }
}

@media (max-height: 768px) {
  .faq-layout {
    max-width: min(900px, 65vw);
  }
}

@media (max-height: 600px) {
  .faq-layout {
    max-width: min(800px, 60vw);
  }
}

.faq-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: flex-start;
}

.faq-title-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-main-title {
  font-size: clamp(16.8px, 2.4vw, 28.8px);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}

.faq-subtitle {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0;
}

.faq-search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 2rem;
  padding: 0.5rem;
  backdrop-filter: blur(var(--blur));
}

.faq-search {
  flex: 1;
  border: none;
  background: transparent;
  padding: 1rem 1.5rem;
  font-size: 16px;
  color: #fff;
  outline: none;
}

.faq-search::placeholder {
  color: rgba(255,255,255,0.6);
}

.faq-search-btn {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.faq-search-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-item:hover {
  background: rgba(255,255,255,0.02);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2vh, 2rem) 1rem;
  transition: all 0.3s ease;
}

.faq-q-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.faq-q-label {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}

.faq-q-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.faq-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
}

.faq-toggle svg {
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}

.faq-item.active .faq-toggle svg {
  transform: rotate(0deg);
}

.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 0.2s linear, padding 0.2s linear;
  padding: 0 1rem 0 1rem;
}

.faq-item.active .faq-answer {
  transition: height 0.2s linear, padding 0.2s linear;
  padding: 0 1rem clamp(1rem, 2vh, 2rem) 1rem;
}

.faq-a-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 0;
}

.faq-a-label {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.faq-a-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 1.5;
}

/* Search highlighting */
.search-highlight {
  background: rgba(255, 255, 255, 0.5);
  color: #000;
  font-weight: 600;
  border-radius: 2px;
  padding: 1px 2px;
}

/* FAQ Pagination */
.faq-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
  padding: 1rem 0;
}

.faq-pagination-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.faq-nav-btn {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(var(--blur));
}

.faq-nav-btn:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
  transform: scale(1.05);
}

.faq-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.faq-nav-btn:disabled:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  transform: none;
}

.faq-page-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
}

.faq-page-current {
  color: #fff;
  font-weight: 600;
}

.faq-page-separator {
  color: rgba(255,255,255,0.5);
}

.faq-page-total {
  color: rgba(255, 255, 255, 0.5);
}

/* Mobile styles for FAQ */
@media screen and (max-width: 768px) {
  .faq-layout {
    gap: 0;
    padding: 0;
    margin: calc(1rem + 32px + 1rem) 0 calc(1rem + 2.5rem + 1rem) 0;
  }

  #faq .hero-content {
    display: block;
  }

  .faq-header {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: stretch;
    flex-shrink: 0;
  }
  
  .faq-title-section {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .faq-main-title {
    font-size: 0.9rem;
    line-height: 1.2;
    margin: 0;
  }
  
  .faq-subtitle {
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0;
  }
  
  .faq-search-container {
    max-width: none;
    margin-top: 0.5rem;
    flex-shrink: 0;
    padding: 0.3rem;
  }

  .faq-search {
    padding: 0rem 0.5rem;
  }

  .faq-search-btn {
    width: 2.1rem;
    height: 2.1rem;
  }
  
  .faq-list {
    gap: 0;
    overflow: hidden;
    padding: 0 1rem;
    position: relative;
  }
  
  .faq-question {
    padding: 1rem 0;
  }
  
  .faq-q-wrapper {
    gap: 0.5rem;
  }
  
  .faq-q-label,
  .faq-q-text {
    font-size: 14px;
  }
  
  .faq-a-label,
  .faq-a-text {
    font-size: 12px;
  }
  
  .faq-pagination {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    margin: 0;
    gap: 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: auto;
  }
  
  .faq-pagination-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .faq-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .faq-page-info {
    font-size: 14px;
  }
  
  .faq-contact .ghost {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: auto;
    justify-content: flex-start;
    color: #fff;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .faq-contact .ghost:hover {
    opacity: 1;
    background: transparent !important;
  }

  .faq-contact .circle {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }

  .faq-contact .ghost:hover .circle {
    background: #fff !important;
  }

  .faq-contact .arrow {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    display: block !important;
  }

  .faq-contact .arrow svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: #fff !important;
  }

  .faq-contact .ghost:hover .arrow svg {
    stroke: #000 !important;
  }
  
  /* FAQ button styling - positioned like other ghost buttons */
  #faq .ghost-wrapper {
    position: absolute !important;
    left: 1.5rem !important;
    bottom: 1.5rem !important;
    right: auto !important;
    z-index: 3 !important;
    margin: 0 !important;
    grid-row: unset;
    grid-column: unset;
  }

  #faq .ghost {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: auto;
    justify-content: flex-start;
    color: #fff;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  #faq .ghost:hover {
    opacity: 1;
    background: transparent !important;
  }

  #faq .circle {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }

  #faq .ghost:hover .circle {
    background: #fff !important;
  }

  #faq .arrow {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    display: block !important;
  }

  #faq .arrow svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: #fff !important;
  }

  #faq .ghost:hover .arrow svg {
    stroke: #000 !important;
  }
}

/* CONTACT PAGE STYLES */
.contact-hero{
  position:relative; 
  height: calc(var(--vh, 1vh) * 100); 
  min-height: calc(var(--vh, 1vh) * 100); 
  overflow:hidden; 
  display:flex; 
  flex-direction:column;
}

.contact-hero-media{
  position:absolute; 
  inset:0; 
  z-index:0; 
  pointer-events:none; 
  width:100%; 
  height:100%;
}

.contact-hero-media::before{
  content:""; 
  position:absolute; 
  inset:0; 
  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6)); 
  z-index: 1;
}

.contact-hero-media img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  top:0;
  left:0;
}

.contact-hero-media .contact-bg-bottom {
  display: none; /* Hide second image on desktop */
}

.contact-hero-content{
  position:relative; 
  z-index:1; 
  width:100%; 
  height:100%; 
  padding:var(--frame); 
  display:flex; 
  flex-direction:column; 
  justify-content:center;
}

/* CONTACT CARDS */
.contact-cards {
  max-width: 560px;
  margin-left: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-header-card {
  background: #fff;
  color: var(--pill);
  padding: 1rem 1.25rem 1rem 2.5rem;
  border-radius: 0;
  font-size: 1.25rem;
  font-weight: 300;
  font-style: italic;
  width: fit-content;
  position: relative;
  overflow: hidden;
  transform-origin: left;
  transform: scaleX(0);
}

.contact-header-card p {
  margin: 0;
  position: relative;
}

.contact-header-card p::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
  animation: var(--reveal-animation, none);
  z-index: 1;
}

.contact-header-card p > span {
  opacity: 0;
  position: relative;
  z-index: 0;
}

.contact-header-card p > span.animating {
  animation: var(--text-animation, none);
}

.contact-info-card {
  background: #fff;
  color: #000;
  padding: 2.5rem;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transform-origin: left;
  transform: scaleX(0);
}

.contact-info-card * {
  opacity: 0;
}

.contact-main-content {
  display: flex;
}

.contact-company-section {
  flex: 1;
}

.contact-hours-section {
  flex: 0 0 auto;
  min-width: 200px;
}

.contact-section {
  margin-bottom: 2rem;
}

.contact-section:last-child {
  margin-bottom: 0;
}

.company-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #000;
}

.contact-info-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.location-icon path,
.phone-icon path,
.envelope-icon path,
.clock-icon path {
  opacity: 0.5 !important;
}

.location-icon,
.phone-icon,
.envelope-icon,
.clock-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  fill: #000;
  margin-top: 0.25rem;
}

.contact-info {
  line-height: 1.6;
  color: #333;
}

.contact-info p {
  margin: 0 0 0.25rem 0;
}

.phone-link, .email-link {
  color: #333;
  text-decoration: none;
}

.phone-link:hover, .email-link:hover {
  color: var(--pill);
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #000;
}

.opening-hours {
  line-height: 1.6;
  color: #333;
}

.opening-hours p {
  margin: 0 0 0.25rem 0;
}

.made-in-germany {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
}

.made-in-germany-features {
  position: absolute;
  bottom: 3rem;
  right: 3.5rem;
  z-index: 10;
}

.germany-flag {
  width: 24px;
  height: 16px;
  background: linear-gradient(to bottom, #000 33.33%, #ff0000 33.33%, #ff0000 66.66%, #ffce00 66.66%);
  border-radius: 2px;
}

/* SOCIAL ICONS */
.social-icons {
  display: flex;
  gap: 1rem;
  z-index: 2;
  margin-top: 1.5rem;
  margin-left: 1.5rem;
}

.social-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}

.social-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(var(--blur));
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: -1;
}

.social-icon:hover::before {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}

.social-icon svg {
  position: relative;
  z-index: 1;
}

/* BACK TO TOP */
.back-to-top {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  color: #fff;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
}

.back-to-top:hover {
  opacity: 1;
}

.back-to-top-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.back-to-top-circle {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
  background: transparent;
}

.back-to-top:hover .back-to-top-circle {
  background: #fff;
}

.back-to-top-arrow {
  display: block;
  width: 16px;
  height: 16px;
}

.back-to-top-arrow svg {
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

.back-to-top:hover .back-to-top-arrow svg {
  stroke: #000;
}

.back-to-top-text {
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* CHAT BUTTON */
.chat-button {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .04em;
  backdrop-filter: blur(var(--blur));
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}

.chat-button:hover {
  background: rgba(255,255,255,0.3);
}

.chat-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* FOOTER */
.footer {
  background: #fff;
  color: #000;
  padding: 2rem 3rem 2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  transform: translateY(100%);
}

.footer-container {
  display: flex;
  flex-direction: column;
  padding: 0 3rem;
}

.footer-row-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #eee;
  margin: 0;
}

.footer-row-2 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin: 0;
  padding: 1rem 0 2rem 0;
  border-bottom: 1px solid #eee;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-brand svg {
  height: 32px;
  width: auto;
  color: #000;
}

.footer-phone {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-phone:hover {
  color: var(--pill);
}

.footer-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #000;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--pill);
}

.footer-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.partner-logo {
  max-width: 10rem;
  max-height: 4rem;
  width: auto;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  /* Convert white logos to dark grey (#333333) */
  filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.partner-logo:hover {
  opacity: 1;
}

.partner-logo.lazy-png.loaded {
  filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 2rem;
}

.copyright {
  color: #999;
  font-size: 0.875rem;
}

.footer-legal {
  display: flex;
  gap: 2rem;
}

.footer-legal a {
  color: #999;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: var(--pill);
}

/* Hide mobile footer sections by default */
.mobile-footer-phone,
.mobile-footer-description,
.mobile-footer-section,
.mobile-footer-legal,
.mobile-footer-copyright {
  display: none;
}

/* TRUSTED BY SECTION */
.trusted{position:absolute; right:var(--frame); bottom:3rem; display:flex; flex-direction:column; gap:16px; align-items:stretch; z-index:1;}
.trust-label{background:#fff; color:#000; padding:6px 10px 6px 10px; border-radius:0; font-weight:300; text-align:right; padding-right:1.5rem; margin-right:-1.5rem;}
.logo-col{display:flex; flex-direction:column; gap:1.5rem; align-items:flex-end; padding-right:1.5rem;}
.logo-box{max-width:7.5rem; max-height:6rem; display:grid; place-items:center; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border-radius:0; transition: all 0.3s ease;}
.logo-box.small{max-width:7.5rem; max-height:6rem; font-weight:600;}
.logo-box img{max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}

/* MOBILE MENU OVERLAY - BLURRED BACKGROUND */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 101);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex;
  flex-direction: column;
  padding-top: 6rem;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-overlay::before {
  content: '';
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  right: 0.375rem;
  bottom: calc(var(--vh, 1vh) * 100 - 9.35rem);
  background: white;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mobile-menu-overlay.active::before {
  opacity: 1;
}

.mobile-menu-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0px 0.375rem 0.775rem 0.375rem;
  width: 100%;
  background: transparent;
}

.mobile-menu-language {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0rem 0rem 1.75rem 0;
  background: white;
  font-size: 1rem;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
  margin: 0.375rem;
}

.language-option {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 200;
  cursor: pointer;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.language-option.active {
  color: #000;
  font-weight: 600;
}

.language-separator {
  color: rgba(0, 0, 0, 0.3);
  user-select: none;
}

.mobile-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
}

.mobile-nav-item {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(240, 240, 240, 0.3);
  background: white;
  position: relative;
  transform: translateX(-4vw);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease, background-color 0.3s ease, color 0.3s ease;
  padding-left: 15vw;
  margin-bottom: -1px;
}

.mobile-nav-item:last-child {
  margin-bottom: -1px;
}

.mobile-menu-overlay.active .mobile-nav-item {
  transform: translateX(0);
  opacity: 1;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(1) {
  transition-delay: 0.1s;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(2) {
  transition-delay: 0.2s;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(3) {
  transition-delay: 0.3s;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(4) {
  transition-delay: 0.4s;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(5) {
  transition-delay: 0.5s;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(6) {
  transition-delay: 0.6s;
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(7) {
  transition-delay: 0.7s;
}

.mobile-nav-item.active {
  color: white !important;
  /* Background will be set by JavaScript */
}

.mobile-menu-footer {
  padding: 0 0.5rem 1rem 0.5rem;
  border-top: 1px solid rgba(238, 238, 238, 0.3);
  margin-top: 0;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-4vw);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.mobile-menu-overlay.active .mobile-menu-footer {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.8s;
}

.mobile-contact {
  margin-bottom: 0;
}

.mobile-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #000;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 500;
}

.mobile-social {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-start;
}

.mobile-social a {
  color: #000;
  font-size: 1.5rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.mobile-social a:hover {
  opacity: 0.7;
}

/* Animations */
@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes slideLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInNoFade {
  to {
    transform: translateX(0);
  }
}

@keyframes slideInFromLeftSVG {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInFromRightNoFade {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Home headline SVG rectangles - start off-screen */
#r1, #r2 {
  transform: translateX(-110%);
}

/* Trusted section visible */
.trusted {
  opacity: 1 !important;
}

/* Trust label (white rectangle) - start off-screen right */
.trusted .trust-label {
  transform: translateX(200%);
}

/* Trust label text and logo boxes - hidden initially */
.trusted .trust-label {
  color: transparent;
}

.trusted .logo-box {
  opacity: 0;
  transform: translateX(50px);
}

@keyframes slideInFromLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes rotateFeatureIn {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes rotateFeatureOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}

@keyframes slideInFromRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  to {
    transform: translateX(50px);
    opacity: 0;
  }
}

@keyframes slideOutToLeft {
  to {
    transform: translateX(-50px);
    opacity: 0;
  }
}

@keyframes slideOutToRight {
  to {
    transform: translateX(50px);
    opacity: 0;
  }
}

@keyframes slideInFromLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Reverse animations for SVG rectangles - slide out to left */
@keyframes slideOutToLeftSVG {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-110%);
  }
}

/* Reverse animation for trusted section - slide out to right (no fade) */
@keyframes slideOutToRightNoFade {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200%);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes microSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUpFade {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownFade {
  to {
    transform: translateY(30px);
    opacity: 0;
  }
}

@keyframes blob1 {
  0% {
    transform: translate(0%, 0%) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(30%, -20%) scale(1.15) rotate(90deg);
  }
  50% {
    transform: translate(10%, 25%) scale(0.9) rotate(180deg);
  }
  75% {
    transform: translate(-25%, 15%) scale(1.1) rotate(270deg);
  }
  100% {
    transform: translate(0%, 0%) scale(1) rotate(360deg);
  }
}

@keyframes blob2 {
  0% {
    transform: translate(0%, 0%) scale(1) rotate(0deg);
  }
  20% {
    transform: translate(-20%, 30%) scale(1.2) rotate(72deg);
  }
  40% {
    transform: translate(25%, 20%) scale(0.85) rotate(144deg);
  }
  60% {
    transform: translate(-15%, -25%) scale(1.1) rotate(216deg);
  }
  80% {
    transform: translate(20%, -15%) scale(0.95) rotate(288deg);
  }
  100% {
    transform: translate(0%, 0%) scale(1) rotate(360deg);
  }
}

@keyframes blob3 {
  0%, 100% {
    transform: translate(0%, 0%) scale(1);
  }
  33% {
    transform: translate(20%, -30%) scale(0.9);
  }
  66% {
    transform: translate(-50%, 20%) scale(1.1);
  }
}

/* FAQ Animated Gradient Background */
#faqGradientBg {
  position: absolute !important;
  inset: 0 !important;
  background: #2d1810 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

#faqGradientBg::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(
    circle at 30% 40%,
    #9b8365 0%,
    rgba(155,131,101,0.9) 8%,
    rgba(155,131,101,0.75) 15%,
    rgba(155,131,101,0.6) 22%,
    rgba(155,131,101,0.45) 30%,
    rgba(155,131,101,0.3) 38%,
    rgba(155,131,101,0.18) 45%,
    rgba(155,131,101,0.1) 52%,
    rgba(155,131,101,0.05) 58%,
    transparent 65%
  );
  animation: blob1 48s ease-in-out infinite;
  opacity: 0.8;
  border-radius: 50%;
}

#faqGradientBg::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(
    circle at 70% 60%,
    #6b5a45 0%,
    rgba(107,90,69,0.9) 8%,
    rgba(107,90,69,0.75) 15%,
    rgba(107,90,69,0.6) 22%,
    rgba(107,90,69,0.45) 30%,
    rgba(107,90,69,0.3) 38%,
    rgba(107,90,69,0.18) 45%,
    rgba(107,90,69,0.1) 52%,
    rgba(107,90,69,0.05) 58%,
    transparent 65%
  );
  animation: blob2 60s ease-in-out infinite;
  opacity: 0.7;
  border-radius: 50%;
}

/* ============================================
   VIDEO MODAL
   ============================================ */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.video-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}

.video-modal-content {
  position: relative;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 100001;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal.active .video-modal-content {
  transform: scale(1);
}

.video-modal-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
  z-index: 100002;
  transition: all 0.2s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

.video-modal-close:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.7);
}

.video-modal-close svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.video-modal-player {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Mobile adjustments for video modal */
@media screen and (max-width: 768px) {
  .video-modal-close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  .video-modal-close svg {
    width: 24px;
    height: 24px;
  }
}

/* Tablet breakpoint - hide nav pills when space gets tight */
@media (max-width: 1024px){
  .nav-pills-wrapper{display:none;}
  .menu-combo{display:inline-flex;}
}

/* MOBILE - COMPLETELY NEW APPROACH */
@media screen and (max-width: 768px) {
  :root {
    --frame: var(--frame-mobile);
  }

  /* Reset subtitle position on mobile - no slide-up needed */
  .sub {
    transform: translateY(0);
  }

  /* Force hide desktop watch video button on home section */
  .hero:first-of-type .desktop-watch-video,
  section.hero:first-child .desktop-watch-video {
    display: none !important;
  }
  
  /* Force show mobile watch video button on home section */
  .hero:first-of-type .mobile-watch-video,
  section.hero:first-child .mobile-watch-video { 
    display: flex !important; 
    order: -1;
    align-self: center;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    margin-top: 3rem;
    margin-bottom: 1rem;
    margin-left: -2rem;
  }
  
  .desktop-watch-video { 
    display: none !important; 
  }

  .scenario-layout {
    display: block;
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
  }
  
  /* Features mobile layout */
  .features-layout {
    display: block;
    height: 100%;
    margin: 0;
  }
  
  .features-sidebar {
    position: absolute;
    top: 15vh;
    left: 0;
    right: 0;
    z-index: 2;
    flex-direction: column;
    margin: 0 1.5rem;
    padding: 0;
    width: auto;
    overflow: visible;
  }
  
  /* Show all feature navigation items (icons) on mobile */
  .feature-nav-item {
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  /* Show all feature titles on mobile */
  .feature-nav-item .feature-text-container {
    display: block;
  }
  
  /* Reduce opacity of inactive feature titles on mobile */
  .feature-nav-item:not(.active) .feature-text-container {
    opacity: 0.3;
  }
  
  /* Keep active feature title at full opacity */
  .feature-nav-item.active .feature-text-container {
    opacity: 1;
  }

  /* MOBILE: Hide text cutout, show icon cutout instead */
  .feature-nav-item .feature-cutout {
    display: none;
  }

  .feature-nav-item .feature-text-svg {
    opacity: 1 !important;
  }

  .feature-nav-item.active .feature-text-svg {
    opacity: 1 !important;
  }

  .feature-nav-item:hover .feature-text-svg {
    opacity: 1 !important;
  }

  /* MOBILE: Add white background with icon cutout for active state */
  .feature-icon {
    position: relative;
    overflow: visible;
  }

  .feature-icon-svg {
    position: relative;
    z-index: 1;
    opacity: 1 !important;
  }

  .feature-icon-cutout {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px !important;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    height: 24px !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .feature-icon-mask-rect {
    transform: scaleX(0);
    transform-origin: -130px center;
    transition: transform 0.4s ease-in-out;
  }

  .feature-icon-mask-rect-tableplan {
    transform-origin: -113.75px center;
  }

  /* Default state - show normal icon, hide cutout */
  .feature-nav-item .feature-icon-svg {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
  }

  .feature-nav-item .feature-icon-cutout {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Initial active state - normal icon only, no cutout */
  .feature-nav-item.initial-active .feature-icon-svg {
    opacity: 1 !important;
  }

  .feature-nav-item.initial-active .feature-icon-cutout {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Fade out normal icon and grow rectangle on active */
  .feature-nav-item.active .feature-icon-svg {
    opacity: 0 !important;
  }

  .feature-nav-item.active .feature-icon-cutout {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .feature-nav-item.active .feature-icon-mask-rect {
    transform: scaleX(1);
  }

  /* MOBILE FEATURES CONTENT - Flow naturally like scenarios */
  .features-content {
    position: static;
    max-width: none;
    min-width: auto;
    margin: 0 1.5rem 1rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  
  .features-content-box:first-child {
    display: none !important;
  }

  .features-content-box:last-child {
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: auto !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative;
    z-index: 1;
  }
  
  .feature-description {
    font-size: 2.3vh !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: #fff !important;
    padding-bottom: 0.5rem !important;
  }

  .feature-description > span {
    position: relative;
    opacity: 0.3;
  }

  /* Keep navigation text gray on mobile even when active */
  .feature-nav-item .feature-text-svg {
    opacity: 0.3 !important;
  }

  .feature-nav-item.active .feature-text-svg {
    opacity: 0.3 !important;
  }

  .feature-nav-item .feature-cutout,
  .feature-nav-item.active .feature-cutout {
    display: none !important;
  }

  /* MOBILE: White reveal box instead of black for features */
  .feature-description::after {
    background: #fff !important;
  }

  /* Features button styling - match scenarios exactly */
  #features .ghost-wrapper {
    position: relative;
    align-self: flex-start;
    left: 1rem;
    bottom: 1rem;
  }

  .made-in-germany-features {
    bottom: 1rem;
    right: 1rem;
  }

  #features .ghost {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: auto;
    justify-content: flex-start;
    color: #fff;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  #features .ghost:hover {
    opacity: 1;
    background: transparent !important;
  }

  #features .circle {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }

  #features .ghost:hover .circle {
    background: #fff !important;
  }

  #features .arrow {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    display: block !important;
  }

  #features .arrow svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: #fff !important;
  }

  #features .ghost:hover .arrow svg {
    stroke: #000 !important;
  }

  /* MOBILE SCENARIO CONTENT */
  .scenario-content-wrapper {
    margin: 0 !important;
    padding: 0 1rem 0 0 !important;
    position: absolute !important;
    bottom: 1rem !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
  }

  /* MOBILE: White scenario text - transparent background */
  .scenario-content {
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 1.5rem 1rem 1.5rem !important;
    max-width: none !important;
    min-width: auto !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    font-size: 2.3vh !important;
    line-height: 1.5 !important;
  }

  .scenario-content p {
    font-size: 2.3vh !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: #fff !important;
    text-shadow: 0 0px 15px rgba(0, 0, 0, 1);
  }

  /* MOBILE: White reveal box instead of black */
  .scenario-content p::after {
    background: #fff !important;
  }

  /* MOBILE: Keep white background for tagline */
  .scenario-tagline-box {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .scenario-tagline {
    margin: 0 !important;
    padding: 1rem 1.5rem !important;
    color: #c2a191 !important;
    font-weight: 500 !important;
    font-size: 2.5vh !important;
  }

  .scenario-arrow-box {
    background: var(--pill) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 1.25rem !important;
  }

  .scenario-arrow {
    stroke: #fff !important;
  }

  /* Disable hover effects on mobile */
  .scenario-tagline-box:hover .scenario-arrow {
    transform: none !important;
  }

  .scenario-tagline-box:hover .scenario-arrow.left {
    transform: none !important;
  }

  .scenario-items {
    display: none;
  }

  /* Mobile scenario header - NO PADDING */
  .mobile-scenario-header {
    display: block;
    position: absolute;
    top: 30vh;
    left: 0;
    right: 0;
    z-index: 2;
  }

  .scenario-counter {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-50px);
    color: #000;
    background: #fff;
    padding: 0.5rem 1rem;
    width: fit-content;
    border-radius: 0;
    position: relative;
    left: 0;
  }

  /* Mobile scenario title - NO LEFT OR MARGIN-LEFT */
  .mobile-scenario-title-wrap {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100vw;
    opacity: 0;
    transform: translateX(-50px);
  }

  .mobile-scenario-cutout {
    display: block;
    width: 95%;
    height: auto;
  }

  /* Scenarios button styling */
  #scenarios .ghost-wrapper {
    position: relative;
    bottom: 1rem;
    left: 1rem;
    right: auto;
    z-index: 3;
    margin: 0;
    align-self: flex-start;
  }

  /* Previous button - positioned to the right of next button on mobile only */
  #scenarios .ghost-wrapper-prev {
    position: absolute;
    bottom: 1.35rem;
    left: auto;
    right: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* JavaScript will handle display */
  }

  #scenarios .ghost-wrapper-prev.show {
    opacity: 1;
  }

  /* Hide on desktop */
  @media (min-width: 769px) {
    #scenarios .ghost-wrapper-prev {
      display: none !important;
    }
  }

  #scenarios .ghost {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: auto;
    justify-content: flex-start;
    color: #fff;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  /* Previous button - text on left, circle on right (normal order) */
  #scenarios .ghost-prev {
    justify-content: flex-end;
  }

  #scenarios .ghost:hover {
    opacity: 1;
    background: transparent !important;
  }

  #scenarios .circle {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }

  #scenarios .ghost:hover .circle {
    background: #fff !important;
  }

  #scenarios .arrow {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    display: block !important;
  }

  #scenarios .arrow svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: #fff !important;
  }

  #scenarios .ghost:hover .arrow svg {
    stroke: #000 !important;
  }
  
  /* IMPACT MOBILE STYLES */
  #impact .hero-content {
    display: block;
    padding: var(--frame-mobile);
    position: relative;
  }
  
  #impact .center-rail {
    display: block;
    flex: none;
    align-items: initial;
    height: auto;
  }
  
  #impact .container {
    display: block;
    margin-left: 0;
    padding: 0;
    max-width: none;
    height: auto;
  }
  
  #impact .impact-layout {
    display: block;
    padding: 0 1rem;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  #impact .investigate-faq {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    margin: 0;
    z-index: 3;
  }
  
  #impact .impact-calculator {
    max-width: none;
  }

  #impact .impact-title {
    font-size: 3vh;
    margin-bottom: 2rem;
    text-align: left;
  }
  
  #impact .calculator-controls {
    margin-left: -1rem;
    margin-bottom: 2rem;
  }
  
  #impact .control-group {
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin-bottom: 1rem;
    padding: 0;
    margin-left: 0;
  }
  
  #impact .control-label {
    font-size: 1.7vh;
    text-align: right;
    flex: 1;
    /* margin-right: 1rem; */
    margin-left: 0;
    border-radius: 0 2rem 2rem 0;
    padding: 1rem 1rem 1rem 0rem;
  }
  
  #impact .control-input {
    justify-content: center;
    padding: 0.5rem;
    flex-shrink: 0;
  }
  
  #impact .waiter-agreement {
    margin: 1.5rem 0;
  }
  
  /* Hide duplicate investigate FAQ button on mobile - only show the one at bottom */
  #impact .impact-calculator .investigate-faq {
    display: none;
  }
  
  #impact .results-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100vw;
    flex-shrink: 0;
  }
  
  #impact .results-grid::-webkit-scrollbar {
    display: none;
  }
  
  #impact .result-card {
    flex: 0 0 calc(40vw - 0.5rem);
    padding: 1rem 0.75rem;
    min-height: 15vh;
    text-align: center;
    scroll-snap-align: start;
    margin-right: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* Mobile tap behavior - show disclaimer on tap */
  #impact .result-card.active {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background-color: var(--pill);
  }

  #impact .result-card.active .card-category {
    color: white;
  }

  #impact .result-card.active .card-metric,
  #impact .result-card.active .card-value {
    opacity: 0;
  }

  #impact .result-card.active .card-disclaimer {
    opacity: 1;
  }
  
  /* Show all 6 cards on mobile now that they're swipeable */
  #impact .results-grid .result-card:nth-child(n+4) {
    display: flex;
  }
  
  #impact .card-category {
    font-size: 10px;
  }
  
  #impact .card-metric {
    font-size: 12px;
    margin-bottom: 0.25rem;
    text-align: left;
  }
  
  #impact .card-value {
    font-size: 1.8rem;
    text-align: right;
  }
  
  #impact .card-disclaimer {
    font-size: 10px;
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
  }
  
  #impact .impact-results {
    justify-content: flex-start;
    margin: 0 -1rem 0 -1rem;
    overflow: visible;
    pointer-events: auto;
  }
  
  #impact .investigate-faq {
    margin-top: 1rem;
    margin-bottom: 2rem;
    position: static;
    left: auto;
    bottom: auto;
  }
  
  /* Impact button styling - match other sections */
  #impact .ghost {
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    width: auto;
    justify-content: flex-start;
    color: #fff;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  #impact .ghost:hover {
    opacity: 1;
    background: transparent !important;
  }

  #impact .circle {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }

  #impact .ghost:hover .circle {
    background: #fff !important;
  }

  #impact .arrow {
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    display: block !important;
  }

  #impact .arrow svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: #fff !important;
  }

  #impact .ghost:hover .arrow svg {
    stroke: #000 !important;
  }
  
  /* Contact Mobile Styles */
  .contact-hero-media .contact-bg-top {
    height: 60%; /* Cover upper portion where content is */
    object-position: 55% top;
  }

  .contact-hero-media .contact-bg-bottom {
    display: block; /* Show second image on mobile */
    top: 60%;
    height: 40%; /* Fill remaining space below */
    object-position: center bottom;
  }

  .contact-hero-content {
    justify-content: space-between;
    padding-bottom: calc(20px + 4rem);
  }

  .contact-cards {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    order: 2;
    flex: 0 0 auto;
  }
  
  .contact-header-card {
    display: none;
  }
  
  .contact-info-card {
    padding: 2rem;
  }

  .contact-info-card p,
  .contact-info p,
  .contact-info a,
  .opening-hours p {
    font-size: 2vh;
    line-height: 2vh;
  }

  .contact-info p:has(.phone-link),
  .contact-info p:has(.email-link) {
    margin-top: 0.45rem;
  }

  .contact-main-content {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .social-icons {
    bottom: 2rem;
    left: 2rem;
    gap: 0.75rem;
    margin-top: auto; /* Push to middle by taking available space above */
    margin-left: 0;
    margin-bottom: 1rem;
    position: static;
    justify-content: center;
    order: 1;
    flex: 0 0 auto;
  }
  
  .social-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .back-to-top {
    bottom: 1.5rem;
    left: 1.5rem;
  }
  
  .chat-button {
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0;
    width: calc(2.25rem + 4px); /* Add border width to match ghost button total size */
    height: calc(2.25rem + 4px);
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-button svg {
    width: 1rem;
    height: 1rem;
  }

  .chat-button-text {
    display: none;
  }
  
  .footer {
    padding: 3rem 2rem 2rem;
  }
  
  .footer-container {
    flex-direction: column;
    gap: 2rem;
    padding: 0;
  }
  
  .footer-row-1 {
    justify-content: center;
    padding-bottom: 1rem;
    border-bottom: none;
  }
  
  .footer-phone {
    display: none;
  }
  
  .footer-row-2 {
    display: none;
  }
  
  .footer-bottom {
    display: none;
  }
  
  /* Show mobile footer sections */
  .mobile-footer-phone {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .mobile-footer-phone .footer-phone {
    display: flex !important;
  }
  
  .mobile-footer-description {
    display: block !important;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .mobile-footer-section {
    display: block !important;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .mobile-footer-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #000;
  }
  
  .mobile-footer-section .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .mobile-footer-section .footer-links li {
    margin-bottom: 0.5rem;
  }
  
  .mobile-footer-section .footer-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .mobile-footer-section .footer-links a:hover {
    color: var(--pill);
  }
  
  .mobile-footer-legal {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  .mobile-footer-legal a {
    color: #999;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
  }
  
  .mobile-footer-legal a:hover {
    color: var(--pill);
  }
  
  .mobile-footer-copyright {
    display: block !important;
    text-align: center;
    color: #999;
    font-size: 0.875rem;
  }
  
  .nav {
    padding: 1rem;
    grid-template-columns: 15vw 20vw auto;
  }

  .brand {
    gap: 8px;
    margin-left: 0.5rem;
  }

  .brand svg {
    height: 32px;
  }

  /* Logo visibility - Mobile: hide full, show icon only */
  .logo-desktop { display: none !important; }
  .logo-mobile { display: block !important; }

  .logo-text {
    display: none;
  }

  .buy {
    justify-self: center;
  }

  .menu-combo {
    display: inline-flex;
  }

  .hero {
    height: calc(var(--vh, 1vh) * 100);
    min-height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
  }
  
  .hero-content {
    padding: var(--frame-mobile);
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .center-rail {
    align-items: flex-start;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  
  .container {
    margin-left: 0;
    padding: 0 1rem;
    max-width: none;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .header-content-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    flex: 1;
  }

  .headline-wrap {
    left: -1rem;
    margin-left: -0.5rem;
    margin-bottom: 0;
    position: relative;
    width: 100vw;
  }

  .headline-cutout {
    width: 95%;
  }

  .sub {
    font-size: 2.5vh;
    max-width: none;
    line-height: 1.4;
    text-align: left;
    margin: 2rem 1rem 2rem 1rem;
    width: calc(100% - 3.25rem);
    position: relative;
    left: 0;
    z-index: 3;
  }

  .trusted {
    position: static;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
    width: 100vw;
    margin: 0 0 1rem -1.375rem;
    background: transparent;
    backdrop-filter: none;
    padding: 0 0.1rem 0 0;
    z-index: 1;
  }

  .trust-label {
    font-size: 0.6rem;
    padding: 0.8rem 0.4rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    background: #fff;
    color: #000;
    border-radius: 0;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 3rem;
    order: 2;
    white-space: nowrap;
  }

  /* German-specific font size adjustment */
  .lang-de .trust-label {
    font-size: 0.5rem;
  }

  .logo-col {
    flex-direction: row;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0 0.5rem 0 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    order: 1;
    container-type: inline-size;
    touch-action: pan-x;
  }

  .logo-col::-webkit-scrollbar {
    display: none;
  }

  .logo-box {
    aspect-ratio: 1 !important;
    height: 100% !important;
    width: auto !important;
    min-width: 3rem;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-shrink: 0;
    white-space: nowrap;
    display: grid;
    place-items: center;
    text-transform: uppercase;
    border-radius: 1.5rem !important;
    border: none !important;
    padding: 1rem;
  }

  .logo-box.small {
    font-size: 0.5rem;
    aspect-ratio: 1;
  }

  /* ORIGINAL GHOST BUTTON FOR HOME */
  .ghost-wrapper {
    position: static;
    margin: 0.2rem 0 0 0;
    align-self: flex-start;
  }

  .ghost {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.8rem;
  }

  .circle {
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid #fff;
  }

  .arrow {
    width: 16px;
    height: 16px;
    border: none;
    display: block;
  }

  .arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke: #fff;
  }

  .ghost:hover .arrow svg {
    stroke: #000;
  }
}

/* Add to mobile media query - fix horizontal scroll */
@media screen and (max-width: 768px) {
  /* Allow horizontal scrolling in impact section */
  #impact {
    overflow-x: visible;
  }

  #impact .hero-content {
    overflow-x: visible;
    display: flex;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
  }
  
  #impact .center-rail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Fix results grid horizontal scroll */
  #impact .results-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Remove extra space below FAQ button */
  #impact .hero {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
  }
  
  /* Position FAQ button at bottom of hero-content */
  #impact .investigate-faq {
    position: absolute;
    bottom: 1.5rem;
    margin: 0;
  }
}

/* REFERENCES BOTTOM WRAPPER GRID */
.references-bottom-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: auto;
  display: grid;
  grid-template-rows: 40vh 5.5rem;
  gap: 1.5rem;
}

/* Desktop only - restore default behavior */
@media screen and (min-width: 769px) {
  .references-bottom-wrapper {
    grid-template-rows: 40vh 5.5rem;
    gap: 1.5rem;
    height: auto;
  }

  .references-bottom-wrapper .ghost-wrapper {
    position: static;
    margin-left: 3rem;
  }
  
  /* Restore desktop positioning for references watch video button */
  #references .cta-row.desktop-watch-video {
    position: absolute;
    top: 27% !important;
    left: 3rem;
    z-index: 3;
    transform: translateY(-50%);
  }
}

/* Mobile only - updated ghost wrapper positioning */
@media screen and (max-width: 768px) {
  .references-bottom-wrapper .ghost-wrapper { 
    position: relative !important; 
    align-self: flex-start !important; 
    margin: 0 !important;
    z-index: 15 !important; 
    grid-row: 4 / 4; 
    left: 1.5rem; 
    bottom: 3.75rem; 
  }
}

/* Fix button interactivity */
.reference-nav-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent !important;
  color: #dddddd;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto !important;
  z-index: 100 !important;
  position: relative;
}

.nav-progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent !important;
}

.nav-progress-circle circle {
  fill: none !important;
}

.nav-chevron {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

.reference-nav-btn:hover {
  color: #6f584e !important;
  background: transparent !important;
}

.reference-nav-btn:hover .nav-progress-circle circle:first-child {
  stroke: #6f584e !important;
  fill: none !important;
}

.reference-nav-btn:active {
  transform: scale(0.95);
}

.reference-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-right: 1rem;
  z-index: 99 !important;
  position: relative;
}

/* MOBILE PORTRAIT - Features image repositioned to top 50% */
@media screen and (max-width: 768px) and (orientation: portrait) {
  #features .feature-image-container {
    top: 35vh;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 50vh;
    z-index: 2;
  }

  /* Navigation overlay - positioned exactly where sidebar is, above image */
  #features .feature-nav-overlay {
    display: block; /* Override desktop display: none */
    position: absolute;
    top: 0;
    left: 1.5rem;
    z-index: 3;
    pointer-events: none;
  }

  #features .feature-nav-overlay-item {
    position: absolute;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0;
    display: flex;
    align-items: center;
    padding-left: 2.5rem;
    transition: opacity 0.4s ease;
  }

  #features .feature-nav-overlay-item.active {
    opacity: 1;
    color: #fff !important;
  }

  #features .feature-image {
    width: 90vw;
    height: auto;
    max-width: 90vw;
    max-height: 50vh;
    object-fit: contain;
    object-position: center;
  }

  #features .feature-hand-container {
    top: 35vh;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 50vh;
  }

  #features .feature-hand-container img {
    width: 90vw;
    height: auto;
    max-width: 90vw;
    max-height: 50vh;
    object-fit: contain;
  }
}

/* Disable hover effects on mobile touch devices */
@media screen and (max-width: 768px) {
  /* Disable all hover effects on mobile to prevent sticky touch states */
  .ghost:hover,
  .ghost:active,
  .ghost:focus {
    opacity: 0.9 !important; /* Keep original opacity */
  }

  .ghost:hover .circle,
  .ghost:active .circle,
  .ghost:focus .circle {
    background: transparent !important;
  }

  .ghost:hover .arrow svg,
  .ghost:active .arrow svg,
  .ghost:focus .arrow svg {
    stroke: #fff !important;
  }

  .faq-contact .ghost:hover,
  .faq-contact .ghost:active,
  .faq-contact .ghost:focus {
    opacity: 0.9 !important; /* Keep original opacity */
    background: transparent !important;
  }

  .faq-contact .ghost:hover .circle,
  .faq-contact .ghost:active .circle,
  .faq-contact .ghost:focus .circle {
    background: transparent !important;
  }

  .faq-contact .ghost:hover .arrow svg,
  .faq-contact .ghost:active .arrow svg,
  .faq-contact .ghost:focus .arrow svg {
    stroke: #fff !important;
  }

  #faq .ghost:hover,
  #faq .ghost:active,
  #faq .ghost:focus {
    opacity: 0.9 !important; /* Keep original opacity */
    background: transparent !important;
  }

  #faq .ghost:hover .circle,
  #faq .ghost:active .circle,
  #faq .ghost:focus .circle {
    background: transparent !important;
  }

  #faq .ghost:hover .arrow svg,
  #faq .ghost:active .arrow svg,
  #faq .ghost:focus .arrow svg {
    stroke: #fff !important;
  }

  #features .ghost:hover,
  #features .ghost:active,
  #features .ghost:focus {
    opacity: 0.9 !important; /* Keep original opacity */
    background: transparent !important;
  }

  #features .ghost:hover .circle,
  #features .ghost:active .circle,
  #features .ghost:focus .circle {
    background: transparent !important;
  }

  #features .ghost:hover .arrow svg,
  #features .ghost:active .arrow svg,
  #features .ghost:focus .arrow svg {
    stroke: #fff !important;
  }

  #scenarios .ghost:hover,
  #scenarios .ghost:active,
  #scenarios .ghost:focus {
    opacity: 0.9 !important; /* Keep original opacity */
    background: transparent !important;
  }

  #scenarios .ghost:hover .circle,
  #scenarios .ghost:active .circle,
  #scenarios .ghost:focus .circle {
    background: transparent !important;
  }

  #scenarios .ghost:hover .arrow svg,
  #scenarios .ghost:active .arrow svg,
  #scenarios .ghost:focus .arrow svg {
    stroke: #fff !important;
  }

  #impact .ghost:hover,
  #impact .ghost:active,
  #impact .ghost:focus {
    opacity: 0.9 !important; /* Keep original opacity */
    background: transparent !important;
  }

  #impact .ghost:hover .circle,
  #impact .ghost:active .circle,
  #impact .ghost:focus .circle {
    background: transparent !important;
  }

  #impact .ghost:hover .arrow svg,
  #impact .ghost:active .arrow svg,
  #impact .ghost:focus .arrow svg {
    stroke: #fff !important;
  }

  /* Disable reference navigation button hover effects */
  .reference-nav-btn:hover,
  .reference-nav-btn:active,
  .reference-nav-btn:focus {
    border-color: rgba(0, 0, 0, 0.2) !important;
    color: rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.05) !important;
  }

  .reference-nav-btn:hover .nav-progress-circle circle:first-child {
    stroke: rgba(0, 0, 0, 0.2) !important;
  }
}

/* ============================================
   LAZY LOADING PNG IMAGES - BLUR TO SHARP
   ============================================ */

/* PNG images start with blur effect while loading */
.lazy-png {
  filter: blur(10px);
  opacity: 0.6;
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* Sharp and fully visible when loaded */
.lazy-png.loaded {
  filter: none;
  opacity: 1;
}