@charset "UTF-8";

/* ==========================================================================
   DESIGN TOKENS (SATORI-SKILL-V1 Architecture)
   ========================================================================== */
:root {
  /* Functional Color Mapping (60 / 30 / 10 + text + anchor) */
  --color-neutral-bg: #F5F4F0;          /* Warm paper ivory base background */
  --color-support-surface: rgba(5, 5, 6, 0.035); /* Soft concrete grey surfaces */
  --color-support-surface-hover: rgba(5, 5, 6, 0.065);
  --color-communicator-text: #1C1B1A;    /* Dark warm charcoal text (AAA readable) */
  --color-communicator-muted: #6B6864;   /* Secondary warm concrete text */
  --color-action-brand: #0C2340;         /* ProMove navy - trust / primary brand */
  --color-action-accent: #FF5A36;        /* ProMove coral - motion accent */
  --color-anchor-border: rgba(0, 0, 0, 0.09); /* Soft dark boundary hairlines */

  /* Sunset accent palette (sampled from the footer image) — secondary, never primary */
  --c-sunset-coral: #FF5A36;
  --c-sunset-pink: #F0497F;
  --c-sunset-magenta: #C54496;
  --c-sunset-violet: #7E3A9E;
  --gradient-sunset: linear-gradient(100deg, #FF5A36 0%, #F0497F 42%, #C54496 78%, #7E3A9E 116%);

  /* Adaptive Backgrounds for glassmorphic elements */
  --color-header-bg: rgba(245, 244, 240, 0.8);
  --color-cookies-bg: rgba(245, 244, 240, 0.9);
  --color-menu-bg: rgba(245, 244, 240, 0.98);

  /* 8px Spacing Scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Typography Scale (Deterministic Proportional Math) */
  --font-display: 'Outfit', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-body: 16px;
  
  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transitions & Motion */
  --duration-micro: 180ms;
  --duration-transition: 320ms;
  --ease-standard: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quint */
  --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   WARM LIGHT MODE THEME (Perfect AAA typographics)
   ========================================================================== */
.light-theme {
  --color-neutral-bg: #F5F4F0;          /* Warm paper ivory base background */
  --color-support-surface: rgba(5, 5, 6, 0.035); /* Soft concrete grey surfaces */
  --color-support-surface-hover: rgba(5, 5, 6, 0.065);
  --color-communicator-text: #1C1B1A;    /* Dark warm charcoal text (AAA readable) */
  --color-communicator-muted: #6B6864;   /* Secondary warm concrete text */
  --color-anchor-border: rgba(0, 0, 0, 0.09); /* Soft dark boundary hairlines */
  
  --color-header-bg: rgba(245, 244, 240, 0.8);
  --color-cookies-bg: rgba(245, 244, 240, 0.9);
  --color-menu-bg: rgba(245, 244, 240, 0.98);
}

/* Section eyebrows tinted with the sunset gradient (footer-derived colour) */
.services-subtitle, .process-subtitle, .ba-subtitle, .faq-subtitle,
.about-subtitle, .contact-subtitle, .gallery-subtitle {
  background: var(--gradient-sunset) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ==========================================================================
   CROSS-BROWSER SCROLL STABILITY (Tanev.design Rules)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto !important;
  width: 100%;
  height: auto;
}
body {
  width: 100%;
  min-height: 100% !important;
  background-color: var(--color-neutral-bg);
  color: var(--color-communicator-text);
  font-family: var(--font-body);
  font-size: var(--f-body);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scroll wrapper constraint — MANDATORY overflow containment on root wrapper only */
.app-wrapper {
  position: relative;
  width: 100%;
  min-height: 100% !important;
  /* clip (not hidden) for the horizontal axis. With overflow-x:hidden the browser
     coerces overflow-y to "auto", turning .app-wrapper into a scroll container,
     which BREAKS position:sticky on descendants (the FAQ header and the About
     "15+ years" visual never stuck). overflow-x:clip clips horizontal overflow
     WITHOUT creating a scroll container, so overflow-y stays truly visible and
     sticky resolves against the viewport as intended. */
  overflow-x: clip !important;
  overflow-y: visible !important;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   LOCALIZATION ENGINES (Cyrillic & Germanic Typography Settings)
   ========================================================================== */
:lang(bg) {
  font-feature-settings: 'locl'; /* Enable premium Bulgarian Cyrillic letterforms */
  line-height: 1.6;
  --font-display: 'Outfit', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
:lang(bg) h1, :lang(bg) h2, :lang(bg) h3, :lang(bg) h4, :lang(bg) h5, :lang(bg) h6 {
  hyphens: none !important;
  word-break: keep-all !important;
}
:lang(bg) .hero-title {
  /* Inherits big professional display sizes from base .hero-title */
}
:lang(bg) .hero-description {
  /* Inherits from base .hero-description */
}

:lang(de) {
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}
:lang(de) .btn, :lang(de) .nav-link, :lang(de) .logo-text, :lang(de) .btn-primary, :lang(de) .btn-action, :lang(de) .mobile-link, :lang(de) .mobile-lang-btn {
  text-transform: none !important;
}

/* ==========================================================================
   TACTILE FILM GRAIN OVERLAY
   ========================================================================== */
.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.022; /* 2.2% exact premium opacity */
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   PREMIUM KINETIC PRELOADER
   ========================================================================== */
body.preloader-visited .preloader {
  display: none !important;
}

.preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  background-color: var(--color-neutral-bg);
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Ambient radial glow behind logo */
.preloader::before {
  content: '';
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 54, 0.14) 0%, transparent 70%);
  pointer-events: none;
  animation: preloader-breathe 1.8s ease-in-out infinite;
}

@keyframes preloader-breathe {
  0%, 100% { transform: scale(0.88); opacity: 0.6; }
  50%       { transform: scale(1.12); opacity: 1;   }
}

.preloader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.preloader-logo {
  width: clamp(180px, 46vw, 240px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.74);
  filter: blur(14px);
  will-change: opacity, transform, filter;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Premium shimmer rule — a thin glowing bar with a sweeping highlight */
.preloader-line {
  width: 0;
  height: 2.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-action-brand) 28%,
    var(--color-action-accent) 50%,
    var(--color-action-brand) 72%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  box-shadow: 0 0 14px rgba(255, 90, 54, 0.45);
  will-change: width, opacity, background-position, transform;
}

/* ==========================================================================
   SITE HEADER NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1005; /* Elevated above menu overlay (1000) for sandwich close toggle */
  border-bottom: 1px solid var(--color-anchor-border);
  backdrop-filter: blur(20px);
  background-color: var(--color-header-bg);
  height: 80px;
}

.header-container {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  text-decoration: none;
  color: var(--color-communicator-text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.25rem;
}

/* Desktop Navigation Links */
.desktop-nav-links {
  display: none; /* Hidden on mobile */
  align-items: center;
  gap: var(--space-32);
}

.desktop-nav-links .nav-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-communicator-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--duration-micro) var(--ease-standard);
  position: relative;
  padding-block: var(--space-8);
}

.desktop-nav-links .nav-link:hover,
.desktop-nav-links .nav-link.active {
  color: var(--color-action-brand);
}

/* Beautiful active underline reveal effect */
.desktop-nav-links .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-action-brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-standard);
}

.desktop-nav-links .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (min-width: 992px) {
  .desktop-nav-links {
    display: flex;
  }
}

/* Theme-Aware Logos (Show/Hide) - Cleaned Up to Single https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928663/luftrans/modernlogo.png */
.nav-logo {
  height: 58px; /* Big and Solid Logo */
  width: auto;
  object-fit: contain;
  transform: translateY(0.5px);
  will-change: opacity;
  transition: opacity var(--duration-transition) var(--ease-standard);
}

.logo-text {
  color: var(--color-communicator-text);
  -webkit-text-fill-color: currentColor;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.012em;
}
.logo-text .lt-light { font-weight: 500; }
.brand-mark {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-brand-col .brand-mark { height: 36px; }
.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-brand-col .nav-logo-img { height: 32px; }

.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

/* Slick Language Selection Dropdown styling */
.slick-lang-selector {
  position: relative;
  z-index: 1010;
}

.slick-lang-trigger {
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  color: var(--color-communicator-text);
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all var(--duration-micro) var(--ease-standard);
}

.slick-lang-trigger:hover,
.slick-lang-selector.is-open .slick-lang-trigger {
  background-color: var(--color-support-surface-hover);
  border-color: var(--color-action-brand);
  box-shadow: 0 8px 24px rgba(255, 90, 54, 0.15);
}

.slick-lang-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.slick-lang-code {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.slick-lang-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-micro) var(--ease-standard);
}

.slick-lang-selector.is-open .slick-lang-arrow {
  transform: rotate(180deg);
}

.slick-lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: var(--color-menu-bg);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 8px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  transform-origin: top right;
  transition: opacity var(--duration-transition) var(--ease-standard),
              transform var(--duration-transition) var(--ease-standard);
}

.slick-lang-selector.is-open .slick-lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.slick-lang-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-communicator-muted);
  cursor: pointer;
  transition: all var(--duration-micro) var(--ease-standard);
}

.slick-lang-option:hover,
.slick-lang-option.active {
  color: var(--color-communicator-text);
  background-color: var(--color-support-surface-hover);
}

.slick-lang-option.active {
  background-color: color-mix(in oklch, var(--color-action-brand) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-action-brand) 28%, transparent);
}

.light-theme .slick-lang-dropdown {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08);
}

.mobile-lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

.mobile-lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  color: var(--color-communicator-muted);
  padding: 12px 6px;
  border-radius: var(--radius-md);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-micro) var(--ease-standard);
}

.mobile-lang-btn:hover,
.mobile-lang-btn.active {
  color: var(--color-communicator-text);
  border-color: var(--color-action-brand);
  background-color: var(--color-support-surface-hover);
}

.mobile-lang-btn.active {
  background-color: color-mix(in oklch, var(--color-action-brand) 10%, transparent);
}

.mobile-flag-icon {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

/* ==========================================================================
   PREMIUM PILL THEME TOGGLE
   ========================================================================== */
.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color var(--duration-transition) var(--ease-standard),
    border-color var(--duration-transition) var(--ease-standard),
    box-shadow var(--duration-transition) var(--ease-standard),
    transform var(--duration-transition) var(--ease-standard);
}

.theme-toggle-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  position: relative;
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease,
    color 0.3s ease;
}

/* Icons styling - purple / orange color palette only */
.toggle-moon-icon {
  color: #FF5A36; /* Sleek purple accent */
  filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.45));
}

.toggle-sun-icon {
  color: #FF5A36; /* Warm orange accent */
  filter: drop-shadow(0 0 3px rgba(255, 90, 54, 0.45));
}

/* Hover effects */
.theme-toggle-btn:hover {
  transform: scale(1.06);
  border-color: #0C2340;
  box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.12),
              0 6px 16px rgba(12, 35, 64, 0.15);
}

.theme-toggle-btn:hover .toggle-moon-icon {
  transform: translate(-50%, -50%) rotate(15deg);
  color: #c084fc;
}

.theme-toggle-btn:hover .toggle-sun-icon {
  transform: translate(-50%, -50%) rotate(30deg);
  color: #FF8A5E;
}

/* --- DAY (light-theme) STATE --- */
.light-theme .theme-toggle-btn {
  background: #fbfbf9;
  border-color: rgba(255, 90, 54, 0.2);
}

.light-theme .theme-toggle-btn:hover {
  border-color: #FF5A36;
  box-shadow: 0 0 0 3px rgba(255, 90, 54, 0.12),
              0 6px 16px rgba(255, 90, 54, 0.15);
}

/* Primary Premium Header CTA (Magnetic) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-action-brand);
  color: #fffaf5;
  min-height: 44px;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px rgba(142, 69, 70, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: color var(--duration-transition) var(--ease-standard),
              background-color var(--duration-transition) var(--ease-standard),
              box-shadow var(--duration-transition) var(--ease-standard),
              transform 0.1s var(--ease-standard);
  border: 1px solid color-mix(in oklch, var(--color-action-brand) 70%, #fff 12%);
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-action-brand) 85%, #000);
  color: #fffaf5;
  box-shadow: 0 18px 42px rgba(142, 69, 70, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-action-brand);
  outline-offset: 4px;
}

/* Hamburger Sandwich Menu Toggle Button */
.nav-toggle {
  display: flex; /* Always visible on all screens */
  background: none;
  border: none;
  width: var(--space-32);
  height: var(--space-24);
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001;
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-communicator-text);
  transition: transform var(--duration-transition) var(--ease-standard),
              opacity var(--duration-micro) var(--ease-standard);
}

/* Hamburger Active/Open animation states */
.nav-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.nav-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* Mobile Fullscreen Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  background-color: var(--color-menu-bg);
  backdrop-filter: blur(20px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Flow naturally for scroll support */
  gap: var(--space-40);
  padding: 100px var(--space-24) var(--space-32);
  transform: translateY(-100%);
  visibility: hidden; /* Prevent fixed controls from leaking when hidden */
  overflow-y: auto; /* Scroll support for short viewports */
  overscroll-behavior: contain;
  transition: 
    transform 0.6s cubic-bezier(0.85, 0, 0.15, 1),
    visibility 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.mobile-menu-overlay.active {
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.mobile-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem; /* Sized down for sleek mobile fit */
  color: var(--color-communicator-text);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color var(--duration-micro) var(--ease-standard);
}

.mobile-link:hover {
  color: var(--color-action-brand);
}

.mobile-menu-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  border-top: 1px solid var(--color-anchor-border);
  padding-top: var(--space-24);
  margin-top: auto; /* Push down to bottom if container permits */
}

.mobile-lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.mobile-menu-footer {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--color-communicator-muted);
}

/* ==========================================================================
   1. HERO LAYOUT (12-Column Balanced split 6 / 6 Editorial Grid)
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  min-height: var(--app-height, 100svh);
  display: flex;
  align-items: center;
  padding-top: 80px; /* Header spacing offset */
  background-color: var(--color-neutral-bg);
}

/* Hero Canvas Background Container */
.hero-canvas-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-neutral-bg) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-video-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}

.desktop-only-video {
  width: 55%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  overflow: hidden;
}

.desktop-only-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--color-neutral-bg) 0%, var(--color-neutral-bg) 6%, transparent 40%);
  pointer-events: none;
  z-index: 2;
}

.desktop-only-video .hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* Smooth feather on all four edges so the footage dissolves into the cream
     hero background instead of ending on a hard rectangle. Two linear masks
     intersected = soft rounded-rect vignette without corner over-darkening.
     Left runs longer (blends into the headline column); top/right/bottom are
     tighter feathers. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mobile-only-video {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video-telemetry {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(10, 10, 11, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Creative Watermark Cover Card for Desktop */
.hero-live-tracker {
  position: absolute;
  bottom: 24px;
  right: 24px; /* Cover the watermark in the bottom-right corner */
  z-index: 10;
  width: 310px;
  padding: var(--space-16);
  background: rgba(12, 35, 64, 0.9) !important; /* Rich brand purple */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  font-family: var(--font-display);
  pointer-events: auto;
  transition: all var(--duration-transition) var(--ease-standard);
}

.hero-live-tracker:hover {
  transform: translateY(-2px);
  background: rgba(74, 34, 127, 0.95) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.tracker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-12);
}

.tracker-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981; /* Green status dot */
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: telemetry-pulse 1.8s infinite alternate;
}

.tracker-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FF5A36 !important;
  text-transform: uppercase;
}

.hero-live-tracker .tracker-label {
  color: rgba(255, 255, 255, 0.72) !important;
}

.hero-live-tracker .tracker-value {
  color: #FFFFFF !important;
}

.tracker-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.tracker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.tracker-label {
  font-weight: 700;
  color: #55534f;
  font-size: 0.7rem;
}

.tracker-value {
  font-weight: 600;
  color: #1C1B1A;
  text-align: right;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracker-value.tracker-secured {
  color: #10b981; /* Green status color */
  font-weight: 700;
}

.telemetry-dot {
  width: 6px;
  height: 6px;
  background-color: #00ff66;
  border-radius: 50%;
  box-shadow: 0 0 8px #00ff66;
  animation: telemetry-pulse 1.5s infinite alternate;
}

@keyframes telemetry-pulse {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.hero-canvas-overlay {
  position: absolute;
  inset: 0;
  background: transparent !important;
  z-index: 1;
}

/* Force Hero Typography to stay dark and readable on the white background in all themes */
.hero-section {
  color: #1C1B1A !important;
  background-color: var(--color-neutral-bg) !important;
}

.hero-section .hero-title {
  color: #1C1B1A !important;
}

.hero-section .hero-description {
  color: #55534F !important;
}

.hero-section .stat-number {
  color: #1C1B1A !important;
}

.hero-section .stat-label {
  color: #55534F !important;
}

.hero-section .stat-divider {
  background-color: rgba(28, 27, 26, 0.15) !important;
}

.hero-section .heritage-badge {
  background-color: rgba(12, 35, 64, 0.08) !important;
  border-color: rgba(12, 35, 64, 0.25) !important;
  color: var(--color-action-brand) !important;
}

.hero-section .heritage-badge .badge-dot {
  background-color: var(--color-action-brand) !important;
}

/* Force Trust proof footer & stats labels to stay dark on light background in all themes */
.hero-section .industrial-trust {
  border-top-color: rgba(28, 27, 26, 0.12) !important;
}

.hero-section .trust-title {
  color: var(--color-action-brand) !important; /* Premium purple accent */
}

.hero-section .trust-logo {
  color: #55534F !important;
}

.hero-section .trust-logo-separator {
  color: rgba(28, 27, 26, 0.25) !important;
}

.hero-section .btn-action {
  background: #1C1B1A !important;
  color: #FFFFFF !important;
  border-color: #1C1B1A !important;
}

.hero-section .btn-action:hover {
  background-color: var(--color-action-brand) !important;
  border-color: var(--color-action-brand) !important;
  color: #FFFFFF !important;
}

/* Light theme hero: show warm-tinted video, text adapts to dark-on-light */
.light-theme .hero-section {
  background-color: var(--color-neutral-bg) !important;
}

/* Light-mode canvas: apply warm luminous overlay */
.light-theme .hero-canvas-overlay {
  background: linear-gradient(
    to right,
    rgba(245, 244, 240, 0.82) 0%,
    rgba(245, 244, 240, 0.55) 38%,
    rgba(245, 244, 240, 0.15) 65%,
    rgba(245, 244, 240, 0.0) 100%
  );
}

/* In light mode, hero text uses standard page color scheme (no forced white) */
.light-theme .hero-section,
.light-theme .hero-section .hero-title,
.light-theme .hero-section .hero-description,
.light-theme .hero-section .stat-number,
.light-theme .hero-section .stat-label,
.light-theme .hero-section .stat-divider,
.light-theme .hero-section .heritage-badge,
.light-theme .hero-section .heritage-badge .badge-dot,
.light-theme .hero-section .industrial-trust,
.light-theme .hero-section .trust-title,
.light-theme .hero-section .trust-logo,
.light-theme .hero-section .trust-logo-separator {
  color: unset !important;
  background-color: unset !important;
  border-color: unset !important;
}

.light-theme .hero-section .industrial-trust {
  border-top-color: var(--color-anchor-border) !important;
}

.light-theme .hero-section .hero-title {
  color: var(--color-communicator-text) !important;
}

.light-theme .hero-section .hero-description {
  color: #242322 !important;
  font-weight: 500 !important;
}

.light-theme .hero-section .stat-number {
  color: var(--color-communicator-text) !important;
}

.light-theme .hero-section .stat-label {
  color: #3B3937 !important;
  font-weight: 550 !important;
}

.light-theme .hero-section .stat-divider {
  background-color: var(--color-anchor-border) !important;
}

.light-theme .hero-section .heritage-badge {
  background-color: rgba(12, 35, 64, 0.08) !important;
  border-color: rgba(12, 35, 64, 0.25) !important;
  color: var(--color-action-brand) !important;
}

.light-theme .hero-section .trust-title {
  color: var(--color-action-brand) !important;
}

.light-theme .hero-section .trust-logo {
  color: #2D2C2A !important;
  font-weight: 500 !important;
}

.light-theme .hero-section .btn-action {
  background: #1C1B1A !important;
  color: #FFFFFF !important;
  border: 1px solid #1C1B1A !important;
}

.light-theme .hero-section .btn-action:hover {
  background: var(--color-action-brand) !important;
  color: #FFFFFF !important;
  border-color: var(--color-action-brand) !important;
  box-shadow: none !important;
}


/* Layout container */
.hero-grid-container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-32);
  align-items: center;
}

/* Left typography column span (Symmetrical 6-column split on desktop) with glassmorphic container */
.hero-text-content {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-40);
  border-radius: var(--radius-lg);
  background: rgba(10, 10, 12, 0.65); /* Dark semi-transparent card background */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 5;
}

.light-theme .hero-text-content {
  background: rgba(255, 255, 255, 0.65); /* Light glass */
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
}

/* Live Localized Clock Typographic Background Watermark */
.hero-live-clock {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 5vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(245, 243, 239, 0.025); /* Ultra subtle 2.5% opacity */
  pointer-events: none;
  z-index: 1;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}



/* Heritage badge */
.heritage-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8, 8px);
  background: rgba(12, 35, 64, 0.08) !important; /* Rich brand purple tint */
  border: 1.5px solid rgba(12, 35, 64, 0.25) !important; /* Premium brand purple border */
  padding: 8px 18px !important;
  border-radius: var(--radius-full, 9999px) !important;
  align-self: flex-start;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: var(--color-action-brand, #0C2340) !important; /* Brand purple text */
  z-index: 2;
  box-shadow: 0 4px 14px rgba(12, 35, 64, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.heritage-badge:hover {
  background: rgba(12, 35, 64, 0.14) !important;
  border-color: rgba(12, 35, 64, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(12, 35, 64, 0.12) !important;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-action-brand) !important;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transform: none !important;
}

.badge-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-action-brand);
  opacity: 0;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Level-1 Headline */
.hero-title, 
.hero-title span {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.hero-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important; /* Ultra-heavy professional weight */
  font-size: clamp(2.2rem, 3.2vw, 2.8rem) !important; /* Elegant smaller hero text */
  line-height: 1.15 !important; /* More relaxed line height for static text */
  letter-spacing: -0.03em !important;
  color: var(--color-communicator-text) !important;
  z-index: 2;
  text-wrap: wrap !important; /* Disable balance to prevent layout shifts during typing */
  hyphens: none;
  -webkit-hyphens: none;
}

#typed-city {
  display: inline;
  white-space: nowrap !important;
}

/* Highlighted Accent Text & Elegant Text Solid Highlights */
.accent-text, .highlight-text {
  color: var(--color-action-brand);
  font-weight: 800;
  display: inline;
}

/* Narrative copy (constrained length) */
.hero-description {
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-communicator-muted);
  max-width: 48ch; /* Clean line length */
  z-index: 2;
  text-wrap: pretty;
}

/* Actions & statistics mini grid */
.hero-action-group {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  margin-top: var(--space-8);
  z-index: 2;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-communicator-text);
  color: var(--color-neutral-bg);
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px rgba(5, 5, 6, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background-color var(--duration-transition) var(--ease-standard),
              box-shadow var(--duration-transition) var(--ease-standard),
              transform 0.1s var(--ease-standard);
  border: 1px solid color-mix(in oklch, var(--color-communicator-text) 72%, transparent);
}

.btn-action:hover {
  background-color: var(--color-action-brand);
  color: #fffaf5;
  box-shadow: 0 18px 44px rgba(142, 69, 70, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.btn-action:focus-visible {
  outline: 2px solid var(--color-action-brand);
  outline-offset: 4px;
}

/* Typing Effect Cursor & Accent */
.typed-text-accent {
  color: var(--color-action-brand) !important; /* Brand Purple */
  font-weight: 900;
  position: relative;
}

.light-theme .typed-text-accent {
  color: var(--color-action-brand) !important;
}

.typed-cursor {
  color: var(--color-action-brand) !important;
  animation: blink-cursor 0.8s infinite;
  font-weight: 300;
  margin-left: 2px;
}

@keyframes blink-cursor {
  from, to { opacity: 0 }
  50% { opacity: 1 }
}

/* Hero Quick Quote Form */
.hero-quote-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
  z-index: 5;
  width: 100%;
  max-width: 760px;
}

.quote-input-wrapper {
  position: relative;
  flex: 1 1 180px;
  min-width: 150px;
}

.quote-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-action-brand); /* Purple brand color */
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-input-icon svg {
  width: 100%;
  height: 100%;
}

.quote-input {
  width: 100% !important;
  height: 54px !important;
  padding: 10px 20px 10px 48px !important;
  background-color: #FFFFFF !important;
  color: #1C1B1A !important;
  border: 2px solid rgba(12, 35, 64, 0.18) !important; /* Bolder purple tinted border */
  border-radius: var(--radius-full, 9999px) !important;
  font-family: var(--font-sans, sans-serif) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(12, 35, 64, 0.04) !important; /* Soft purple shadow */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
}

.quote-input::placeholder {
  color: #888680 !important;
  opacity: 1 !important;
}

.quote-input:hover {
  border-color: rgba(12, 35, 64, 0.45) !important;
  box-shadow: 0 6px 20px rgba(12, 35, 64, 0.08) !important;
  transform: translateY(-1px) !important;
}

.quote-input:focus {
  border-color: var(--color-action-brand, #0C2340) !important;
  box-shadow: 0 8px 25px rgba(12, 35, 64, 0.18) !important;
  background-color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

.btn-quote-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px !important;
  padding: 10px 28px;
  border-radius: var(--radius-full);
  background: var(--gradient-sunset) !important;
  color: #FFFFFF !important;
  border: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 90, 54, 0.28);
  transition: all var(--duration-transition) var(--ease-standard);
}

.btn-quote-submit:hover {
  background: var(--gradient-sunset) !important;
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 12px 32px rgba(197, 68, 150, 0.4);
  transform: translateY(-2px);
}

.btn-quote-submit:active {
  transform: scale(0.96);
}

.submit-arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-transition) var(--ease-standard);
}

.btn-quote-submit:hover .submit-arrow {
  transform: translateX(4px);
}

/* Light Theme overrides for Quick Quote Form */
.light-theme .quote-input {
  background-color: #FFFFFF !important;
  color: #1C1B1A !important;
  border-color: rgba(12, 35, 64, 0.18) !important;
}

/* Responsive adjustment for Mobile viewports */
@media (max-width: 991px) {
  .hero-quote-form {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    margin-top: 6px !important;
    gap: 6px !important;
  }
  .quote-input-wrapper {
    width: 100%;
    flex: none !important;
  }
  .quote-input {
    height: 38px !important;
    padding: 6px 12px 6px 34px !important;
    font-size: 0.84rem !important;
  }
  .quote-input-icon {
    left: 11px !important;
    width: 13px !important;
    height: 13px !important;
  }
  .btn-quote-submit {
    width: 100%;
    height: 38px !important;
    font-size: 0.76rem !important;
    padding: 6px 14px !important;
  }
}

/* ============================================================
   HERO ROUTE PLANNER — autocomplete + live map + driving van
   ============================================================ */

/* Differentiate the two pin colours (pickup = navy, dropoff = coral) */
.quote-input-icon--pickup { color: var(--color-action-brand, #0C2340); }
.quote-input-icon--dropoff { color: var(--color-action-accent, #FF5A36); }

/* leave room on the right for the loading spinner */
.quote-input { padding-right: 40px !important; }

/* Inline loading spinner inside an input while geocoding */
.quote-input-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(12, 35, 64, 0.18);
  border-top-color: var(--color-action-accent, #FF5A36);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: route-spin 0.7s linear infinite;
}
.quote-input-wrapper.is-loading .quote-input-spinner { opacity: 1; }
@keyframes route-spin { to { transform: rotate(360deg); } }

/* Autocomplete suggestions dropdown */
.quote-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid rgba(12, 35, 64, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(12, 35, 64, 0.18);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.quote-suggestions[hidden] { display: none; }

.quote-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  color: #1C1B1A;
  transition: background-color 0.15s ease;
}
.quote-suggestion svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--color-action-brand, #0C2340);
}
.quote-suggestion .suggestion-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #888680;
  margin-top: 1px;
}
.quote-suggestion:hover,
.quote-suggestion.is-active {
  background: rgba(255, 90, 54, 0.10);
}
.quote-suggestion-empty {
  padding: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #888680;
  text-align: center;
}

/* ---- Route preview card ---- */
.hero-route-preview {
  width: 100%;
  max-width: 760px;
  margin-top: var(--space-48, 48px); /* clear separation from the От/До inputs on desktop */
}

.route-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  background: rgba(12, 35, 64, 0.04);
  border: 1px solid rgba(12, 35, 64, 0.10);
  box-shadow: 0 14px 40px rgba(12, 35, 64, 0.10);
}
.light-theme .route-map-frame {
  background: rgba(12, 35, 64, 0.04);
}

.route-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.route-map-frame.is-active .route-map { opacity: 1; }

/* Empty / prompt state */
.route-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: #6B6A66;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 90, 54, 0.06), transparent 60%),
    repeating-linear-gradient(45deg, rgba(12,35,64,0.025) 0 12px, transparent 12px 24px);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.route-map-placeholder svg { width: 40px; height: 40px; color: var(--color-action-brand, #0C2340); opacity: 0.55; }
.route-map-frame.is-active .route-map-placeholder { opacity: 0; visibility: hidden; }

/* Distance / duration readout overlay */
.route-readout {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(12, 35, 64, 0.10);
  box-shadow: 0 8px 24px rgba(12, 35, 64, 0.16);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.route-readout[hidden] { display: none; }
.route-readout.is-visible { opacity: 1; transform: translateY(0); }

.route-stat { display: flex; flex-direction: column; line-height: 1.1; }
.route-stat-value {
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-action-brand, #0C2340);
  letter-spacing: -0.01em;
}
.route-stat-label {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888680;
  margin-top: 2px;
}
.route-stat-sep { width: 1px; height: 26px; background: rgba(12, 35, 64, 0.14); }

/* Driving van marker on the map */
.route-van-marker {
  background: none;
  border: none;
  will-change: transform;
}
.route-van-marker img {
  width: 46px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.28));
  transform-origin: center;
}
.route-van-marker.is-flipped img { transform: scaleX(-1); }

/* Leaflet look & feel tweaks to match the brand */
.route-map .leaflet-container {
  font-family: var(--font-sans, sans-serif);
  background: #eef0f2;
}
.route-map .leaflet-control-zoom a {
  color: var(--color-action-brand, #0C2340);
  border-radius: 8px !important;
}
.route-map .leaflet-bar { border: none; box-shadow: 0 4px 14px rgba(12,35,64,0.16); }
.route-pin {
  width: 16px; height: 16px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.route-pin--pickup { background: var(--color-action-brand, #0C2340); }
.route-pin--dropoff { background: var(--color-action-accent, #FF5A36); }

/* Responsive — match the form's 991px column layout */
@media (max-width: 991px) {
  .hero-route-preview { max-width: 100%; margin-top: 10px; }
  .route-map-frame { aspect-ratio: 16 / 10; }
  .route-readout { left: 8px; bottom: 8px; gap: 12px; padding: 8px 14px; }
  .route-stat-value { font-size: 0.92rem; }
  .route-van-marker img { width: 38px; }
  .quote-suggestions { max-height: 220px; }
}

@media (max-width: 576px) {
  .route-map-frame { aspect-ratio: 4 / 3; }
}

/* Honour reduced-motion: no spinner spin, no van transition */
@media (prefers-reduced-motion: reduce) {
  .quote-input-spinner { animation: none; }
  .route-van-marker img { transition: none !important; }
}

.stats-mini {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.stat-divider {
  width: 1px;
  height: var(--space-32);
  background-color: var(--color-anchor-border);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-communicator-text);
  line-height: 1.1;
}

.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-communicator-muted);
  margin-top: 2px;
}

/* Industrial proof footer */
.industrial-trust {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-anchor-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  z-index: 2;
}

.trust-title {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.trust-logos {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.trust-logo {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-communicator-muted);
  letter-spacing: 0.05em;
}

.trust-logo-separator {
  color: var(--color-anchor-border);
  font-size: 0.6rem;
}

/* Right layout column span (Symmetrical 6-column split on desktop) */
.hero-visual-content {
  display: none !important;
}

/* Premium 16:9 Landscape Card Frame */
.portrait-card-wrapper {
  width: 100%;
  max-width: 580px;
}

.portrait-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Cinematic 16:9 widescreen proportions */
  background-color: var(--color-neutral-bg);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* 9:16 Card Video elements */
.card-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.1);
  z-index: 2;
}

.card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 90, 54, 0.05) 0%, transparent 80%);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   2. THE CORRIDOR — Route Statement & Key Figures
   ========================================================================== */
.corridor-section {
  width: 100%;
  padding-block: var(--space-128);
  background-color: var(--color-neutral-bg);
  border-bottom: none !important; /* separation lines removed */
  position: relative;
  overflow: visible;
}

.corridor-section::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 90, 54, 0.09) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.corridor-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: grid;
  grid-template-columns: 1.4fr 0.9fr; /* 2-Column Layout — marker moved to map panel */
  gap: var(--space-32);
  align-items: flex-start; /* Align start to allow sticky pinning */
}

.corridor-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  position: sticky;
  top: 15vh;
  align-self: start;
}

.corridor-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.corridor-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
}

.corridor-desc {
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-communicator-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.corridor-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  position: sticky;
  top: 15vh;
  align-self: start;
}

.corridor-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding-block: var(--space-12);
  /* borders completely removed */
}

.corridor-stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-communicator-text);
  min-width: 0;
}

.corridor-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-communicator-muted);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   2.5 OUR SERVICES SECTION
   ========================================================================== */
.services-section {
  width: 100%;
  padding-block: var(--space-128);
  background-color: var(--color-neutral-bg);
  border-bottom: none !important; /* separation lines removed */
  position: relative;
  overflow: visible;
}

.services-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: grid;
  grid-template-columns: 0.8fr 2.2fr; /* 2-Column desktop layout */
  gap: var(--space-24);
  align-items: flex-start; /* Align start to allow sticky pinning */
}

.services-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.services-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-64);
}

.services-subtitle {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.services-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

.service-card {
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-48) var(--space-32);
  transition: all var(--duration-transition) var(--ease-standard);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Card 1: Relocations -> Deep Purple Theme */
.services-grid .service-card:nth-child(1):hover {
  border-color: #0C2340 !important;
  box-shadow: 0 16px 36px rgba(12, 35, 64, 0.12);
  background-color: color-mix(in oklch, #0C2340 3%, var(--color-support-surface-hover));
  transform: translateY(-4px);
}
.services-grid .service-card:nth-child(1) .service-icon {
  background-color: rgba(12, 35, 64, 0.09);
  color: #0C2340;
}

/* Card 2: Property & Cellar Clearance -> Vivid Orange Theme */
.services-grid .service-card:nth-child(2):hover {
  border-color: #FF5A36 !important;
  box-shadow: 0 16px 36px rgba(255, 90, 54, 0.12);
  background-color: color-mix(in oklch, #FF5A36 3%, var(--color-support-surface-hover));
  transform: translateY(-4px);
}
.services-grid .service-card:nth-child(2) .service-icon {
  background-color: rgba(255, 90, 54, 0.09);
  color: #FF5A36;
}

/* Card 3: Scrap & Eco-Disposal -> Navy */
.services-grid .service-card:nth-child(3):hover {
  border-color: #0C2340 !important;
  box-shadow: 0 16px 36px rgba(12, 35, 64, 0.12);
  background-color: color-mix(in oklch, #0C2340 3%, var(--color-support-surface-hover));
  transform: translateY(-4px);
}
.services-grid .service-card:nth-child(3) .service-icon {
  background-color: rgba(12, 35, 64, 0.09);
  color: #0C2340;
}

.service-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  height: 100%;
}

.service-icon {
  color: var(--color-action-brand);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 90, 54, 0.06);
  border-radius: var(--radius-md);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-communicator-text);
  line-height: 1.2;
}

.service-description {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-communicator-muted);
  flex-grow: 1;
}

.service-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-anchor-border);
}

.service-features li {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-communicator-text);
  position: relative;
  padding-left: 20px;
}

.service-features li::before {
  content: '\2022';
  position: absolute;
  left: 4px;
  color: var(--color-action-accent); /* Orange bullet accent inside Purple cards */
  font-weight: bold;
}

@media (max-width: 991px) {
  .services-section {
    padding-block: var(--space-64);
  }
  .services-container {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    padding-inline: var(--space-24);
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
  .service-card {
    padding: var(--space-32) var(--space-24);
  }
}

/* ==========================================================================
   SERVICES INTRO + CLICKABLE CARD AFFORDANCE
   ========================================================================== */
.services-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-communicator-muted);
  max-width: 60ch;
  margin-top: var(--space-12);
}
.service-card { cursor: pointer; }
.service-card:focus-visible {
  outline: 2px solid var(--color-action-brand);
  outline-offset: 3px;
}
.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-16);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-action-brand);
  transition: gap var(--duration-transition) var(--ease-standard);
}
.service-card-cta svg { width: 16px; height: 16px; }
.service-card:hover .service-card-cta { gap: 13px; }

/* ==========================================================================
   SERVICE DETAIL MODAL
   ========================================================================== */
body.svc-modal-open { overflow: hidden; }
.svc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: rgba(5, 5, 6, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-standard), visibility 0.32s var(--ease-standard);
}
.svc-modal-overlay.active { opacity: 1; visibility: visible; }
.svc-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(90vh, 820px);
  overflow: hidden;
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-top: 4px solid var(--svc-accent, var(--color-action-brand));
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  transition: transform 0.42s var(--ease-standard), opacity 0.42s var(--ease-standard);
}
.svc-modal-overlay.active .svc-modal { transform: translateY(0) scale(1); opacity: 1; }
.svc-modal:focus { outline: none; }
.svc-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Image header — full image always visible (contain) over a blurred fill */
.svc-modal-media {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 38vh;
  overflow: hidden;
  background: #0a0a0b;
}
.svc-modal-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  filter: blur(26px) brightness(0.5) saturate(1.1);
  z-index: 0;
}
.svc-modal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  display: block;
}
.svc-modal-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--color-support-surface) 1%, transparent 22%);
  pointer-events: none;
}
/* Fallback when the image fails to load — branded gradient */
.svc-modal-media.no-img { background: linear-gradient(135deg, var(--svc-accent), color-mix(in oklch, var(--svc-accent) 45%, #000)); }
.svc-modal-media.no-img .svc-modal-img,
.svc-modal-media.no-img .svc-modal-img-bg { display: none; }

/* Icon badge — now lives in the body, so it can never be clipped */
.svc-modal-icon {
  width: 54px; height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--svc-accent);
  color: #fff;
  margin-bottom: var(--space-16);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--svc-accent) 45%, transparent);
}
.svc-modal-icon svg { width: 28px; height: 28px; }

.svc-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(5,5,6,0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: all var(--duration-transition) var(--ease-standard);
}
.svc-modal-close:hover { background: var(--svc-accent); border-color: var(--svc-accent); color: #fff; transform: rotate(90deg); }
.svc-modal-close svg { width: 18px; height: 18px; }

/* Scrolling body */
.svc-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-32) var(--space-32) var(--space-32);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--svc-accent) 70%, transparent) transparent;
}
.svc-modal-body::-webkit-scrollbar { width: 10px; }
.svc-modal-body::-webkit-scrollbar-track { background: transparent; margin-block: 8px; }
.svc-modal-body::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--svc-accent) 60%, transparent);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.svc-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--svc-accent);
  background-clip: padding-box;
}
.svc-modal-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-communicator-text);
  line-height: 1.15;
}
.svc-modal-desc {
  margin-top: var(--space-12);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-communicator-text);
}
.svc-modal-long {
  margin-top: var(--space-16);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-communicator-muted);
}
.svc-modal-includes-head {
  margin-top: var(--space-24);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--svc-accent);
}
.svc-modal-includes {
  list-style: none;
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-modal-includes li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-communicator-text);
}
.svc-modal-includes li::before {
  content: '';
  position: absolute;
  left: 2px; top: 5px;
  width: 14px; height: 14px;
  background: var(--svc-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.svc-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-32);
  width: 100%;
}
@media (max-width: 600px) {
  .svc-modal-media { aspect-ratio: 4 / 3; max-height: 34vh; }
  .svc-modal-body { padding: var(--space-24); }
  .svc-modal-icon { width: 48px; height: 48px; }
  .svc-modal-icon svg { width: 24px; height: 24px; }
  .svc-modal-title { font-size: 1.35rem; }
}

/* Light theme — solid, readable modal (the translucent surface token
   otherwise lets the dark backdrop bleed through and looks too dark) */
.light-theme .svc-modal-overlay {
  background: rgba(28, 27, 26, 0.42);
}
.light-theme .svc-modal {
  background: #FCFBF8;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 40px 90px rgba(28, 27, 26, 0.22);
}
.light-theme .svc-modal-media::after {
  background: linear-gradient(to top, #FCFBF8 1%, transparent 22%);
}
.light-theme .svc-modal-img-bg {
  filter: blur(26px) brightness(0.92) saturate(1.05);
}

/* ==========================================================================
   BEFORE / AFTER COMPARISON SLIDER
   ========================================================================== */
.ba-section {
  width: 100%;
  padding-block: var(--space-96);
  background: var(--color-neutral-bg);
}
.ba-header {
  max-width: 1440px;
  margin: 0 auto var(--space-48);
  padding-inline: var(--space-48);
  display: flex;
  flex-direction: column;
  align-items: center;     /* header sits centered above the centered frame */
  text-align: center;
  gap: var(--space-8);
}
.ba-subtitle {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-action-brand);
}
.ba-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-communicator-text);
  line-height: 1.1;
}
.ba-intro {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-communicator-muted);
  max-width: 56ch;
  margin-top: var(--space-8);
}
.ba-frame {
  position: relative;
  width: min(1100px, calc(100% - var(--space-48) * 2));
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-anchor-border);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  outline: none;
}
.ba-frame:focus-visible { outline: 3px solid var(--color-action-brand); outline-offset: 4px; }
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0);
}
.ba-label {
  position: absolute;
  top: 16px;
  z-index: 4;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 100px;
  background: rgba(5, 5, 6, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ba-label-before { left: 16px; }
.ba-label-after { right: 16px; }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  z-index: 5;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.ba-handle-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--color-action-brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s var(--ease-standard);
}
.ba-handle-grip svg { width: 26px; height: 26px; }
.ba-dragging .ba-handle-grip { transform: translate(-50%, -50%) scale(1.08); }
.ba-hint {
  position: absolute;
  left: 50%; bottom: 16px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 7px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 100px;
  background: rgba(5, 5, 6, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s var(--ease-standard);
}
.ba-dragging .ba-hint { opacity: 0; }
@media (max-width: 991px) {
  .ba-header { padding-inline: var(--space-24); }
  .ba-frame { width: calc(100% - var(--space-24) * 2); aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   FROM PLANNING TO UNPACKING — CTA BAND
   ========================================================================== */
.cta-band-section {
  width: 100%;
  padding-block: var(--space-96);
  background: var(--color-neutral-bg);
}
.cta-band-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-48) var(--space-32);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  background: var(--color-support-surface);
}
.cta-band-head {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--color-communicator-text);
}
.cta-band-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-communicator-muted);
  max-width: 60ch;
}
@media (max-width: 600px) {
  .cta-band-inner { padding: var(--space-32) var(--space-24); margin-inline: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-modal, .svc-modal-overlay, .ba-handle-grip { transition: none; }
  .svc-modal-close:hover { transform: none; }
}

/* ==========================================================================
   REFINED GLOBAL SCROLLBAR (premium, theme-aware)
   ========================================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--color-action-brand) 60%, var(--color-neutral-bg)) transparent;
}
body::-webkit-scrollbar { width: 12px; height: 12px; }
body::-webkit-scrollbar-track { background: var(--color-neutral-bg); }
body::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--color-action-brand) 55%, var(--color-neutral-bg));
  border-radius: 100px;
  border: 3px solid var(--color-neutral-bg);
  background-clip: padding-box;
  transition: background var(--duration-transition) var(--ease-standard);
}
body::-webkit-scrollbar-thumb:hover {
  background: var(--color-action-brand);
  background-clip: padding-box;
}

/* ==========================================================================
   SERVICES v2 — minimal clickable cards (6) + bigger two-column modal
   ========================================================================== */
/* Full-width grid (cargo crate removed from this section) */
.services-container {
  grid-template-columns: 1fr !important;
}
.services-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}
.service-card {
  cursor: pointer;
  padding: var(--space-40, 2.5rem) var(--space-32);
  min-height: 230px;
}
.service-card-content { gap: var(--space-16); height: 100%; }
.service-name { font-size: 1.25rem; }
.service-tag {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-communicator-muted);
}
.service-card .service-card-cta { margin-top: auto; }

/* Accents for cards 4–6 */
.services-grid .service-card:nth-child(4):hover { border-color: #FF5A36 !important; box-shadow: 0 16px 36px rgba(255,90,54,0.12); background-color: color-mix(in oklch, #FF5A36 3%, var(--color-support-surface-hover)); transform: translateY(-4px); }
.services-grid .service-card:nth-child(4) .service-icon { background-color: rgba(255,90,54,0.09); color: #FF5A36; }
.services-grid .service-card:nth-child(5):hover { border-color: #0C2340 !important; box-shadow: 0 16px 36px rgba(12,35,64,0.12); background-color: color-mix(in oklch, #0C2340 3%, var(--color-support-surface-hover)); transform: translateY(-4px); }
.services-grid .service-card:nth-child(5) .service-icon { background-color: rgba(12,35,64,0.09); color: #0C2340; }
.services-grid .service-card:nth-child(6):hover { border-color: #FF5A36 !important; box-shadow: 0 16px 36px rgba(255,90,54,0.12); background-color: color-mix(in oklch, #FF5A36 3%, var(--color-support-surface-hover)); transform: translateY(-4px); }
.services-grid .service-card:nth-child(6) .service-icon { background-color: rgba(255,90,54,0.09); color: #FF5A36; }

@media (max-width: 991px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr !important; }
  .service-card { min-height: 0; }
}

/* Bigger modal */
.svc-modal { width: min(840px, 100%) !important; max-height: min(92vh, 900px) !important; }
.svc-modal-media { background: linear-gradient(135deg, var(--svc-accent), color-mix(in oklch, var(--svc-accent) 45%, #000)); }
.svc-modal-media.no-img .svc-modal-img { display: none; }

/* Two-column body: overview spans, then includes | steps */
.svc-modal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  margin-top: var(--space-24);
}
.svc-modal-col { min-width: 0; }
.svc-modal-includes { margin-top: var(--space-12); }

/* How it works — numbered steps */
.svc-modal-steps-head {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--svc-accent);
}
.svc-modal-steps {
  list-style: none;
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  counter-reset: svcstep;
}
.svc-modal-steps li { display: flex; gap: 12px; align-items: flex-start; }
.svc-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--svc-accent) 16%, transparent);
  color: var(--svc-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
}
.svc-step-text { display: flex; flex-direction: column; gap: 2px; }
.svc-step-text strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-communicator-text);
  line-height: 1.25;
}
.svc-step-text span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-communicator-muted);
}
@media (max-width: 620px) {
  .svc-modal-cols { grid-template-columns: 1fr; gap: var(--space-24); }
}

/* ==========================================================================
   CONTACT — relocated cargo crate + route marker visuals
   ========================================================================== */
.contact-visuals {
  margin-top: var(--space-40, 2.5rem);
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
}
.contact-visuals .corridor-marker-parallax {
  position: relative;
  width: clamp(96px, 14vw, 132px);
  margin: 0;
  inset: auto;
  transform: none;
}
.contact-visuals .corridor-marker-floating {
  position: relative;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
}
.contact-cargo-floating {
  position: relative;
  width: clamp(150px, 22vw, 210px);
  height: auto;
  max-width: none;
  margin: 0;
  inset: auto;
}
@media (max-width: 991px) {
  .contact-visuals { justify-content: center; }
}

/* Corridor — marker relocated to contact, so the statement spans full width */
.corridor-container { grid-template-columns: 1fr !important; }
.corridor-text { max-width: 760px; }

/* ==========================================================================
   MORE THAN A MOVE — brand statement band
   ========================================================================== */
.mtm-section {
  width: 100%;
  padding-block: var(--space-96);
  background: var(--color-neutral-bg);
}
.mtm-inner {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.mtm-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-action-brand);
}
.mtm-body {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-communicator-text);
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .mtm-inner { padding-inline: var(--space-24); }
}

/* ==========================================================================
   3. INFINITE PREMIUM SLIDING GALLERY (GSAP Marquee alternative)
   ========================================================================== */
.gallery-section {
  position: relative;
  width: 100%;
  min-height: 300px;
  padding-block: var(--space-48);
  background-color: var(--color-neutral-bg);
  border-bottom: none !important; /* separation lines removed */
  overflow: visible;
}

.gallery-header {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: flex;
  flex-direction: column;
  align-items: center;       /* centered header over the symmetric coverflow stage */
  text-align: center;
  gap: var(--space-8);
  margin-bottom: var(--space-48);
}

.gallery-subtitle {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.gallery-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* --- Coverflow carousel: center-stage card with layered, receding sides --- */
.gallery-coverflow {
  position: relative;
  width: 100%;
  outline: none;
}

.coverflow-stage {
  position: relative;
  width: 100%;
  height: clamp(340px, 46vw, 560px);
  perspective: 1400px;
  touch-action: pan-y; /* horizontal swipes drive the carousel, vertical stays native scroll */
  cursor: grab;
}

.coverflow-stage.is-dragging {
  cursor: grabbing;
}

.coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(240px, 30vw, 430px);
  aspect-ratio: 4 / 5;
  margin: calc(clamp(240px, 30vw, 430px) * -0.625) 0 0 calc(clamp(240px, 30vw, 430px) * -0.5);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 24px 48px -18px rgba(28, 27, 26, 0.38);
  transition:
    transform 0.65s var(--ease-elastic),
    opacity 0.65s var(--ease-elastic),
    filter 0.65s var(--ease-elastic),
    box-shadow 0.65s var(--ease-elastic);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.coverflow-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}

.coverflow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 6, 0) 52%, rgba(5, 5, 6, 0.3) 74%, rgba(5, 5, 6, 0.82) 100%);
  z-index: 2;
  transition: opacity 0.65s var(--ease-elastic);
}

.coverflow-card .gallery-card-label {
  position: relative;
  z-index: 3;
  max-width: 24ch;
  font-size: clamp(0.72rem, 0.85vw, 0.88rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: #fffaf5;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-standard) 0.15s, transform 0.5s var(--ease-standard) 0.15s;
}

/* Only the center card reveals its caption; side cards stay clean imagery */
.coverflow-card.is-center .gallery-card-label {
  opacity: 1;
  transform: translateY(0);
}

.coverflow-card:not(.is-center) {
  cursor: pointer;
}

.coverflow-card:not(.is-center)::after {
  opacity: 0.35;
}

/* Centered round arrows below the stage, like the reference composition */
.coverflow-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.coverflow-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid rgba(28, 27, 26, 0.28);
  color: var(--color-communicator-text);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition:
    background-color var(--duration-transition) var(--ease-standard),
    border-color var(--duration-transition) var(--ease-standard),
    color var(--duration-transition) var(--ease-standard),
    transform 0.12s var(--ease-standard);
}

.coverflow-arrow:hover {
  background-color: var(--color-action-brand);
  border-color: var(--color-action-brand);
  color: #fffaf5;
}

.coverflow-arrow:active {
  transform: scale(0.92);
}

.coverflow-arrow:focus-visible {
  outline: 2px solid var(--color-action-brand);
  outline-offset: 3px;
}

.coverflow-arrow svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   3.7 SMART MOVE GUIDE — HELPFUL TIPS
   ========================================================================== */
.tips-section {
  width: 100%;
  padding-block: var(--space-128);
  background-color: var(--color-neutral-bg);
  position: relative;
  overflow-x: clip; /* contain decorative offsets without breaking sticky/scroll */
}

.tips-container {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--space-48);
}

.tips-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-64);
  max-width: 60ch;
}

.tips-subtitle {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.tips-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}

.tips-intro {
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-communicator-muted);
  text-wrap: pretty;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

.tip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32);
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--duration-transition) var(--ease-standard),
              border-color var(--duration-transition) var(--ease-standard),
              box-shadow var(--duration-transition) var(--ease-standard),
              background-color var(--duration-transition) var(--ease-standard);
}

/* Oversized ghost numeral watermark in the corner of each card */
.tip-number {
  position: absolute;
  top: -0.35em;
  right: 0.1em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-communicator-text);
  opacity: 0.05;
  pointer-events: none;
  transition: opacity var(--duration-transition) var(--ease-standard),
              transform var(--duration-transition) var(--ease-standard);
}

.tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  color: var(--color-action-brand);
  background: rgba(12, 35, 64, 0.10);
  border: 1px solid rgba(12, 35, 64, 0.20);
  transition: transform var(--duration-transition) var(--ease-elastic),
              color var(--duration-transition) var(--ease-standard);
}

.tip-icon svg { width: 26px; height: 26px; }

.tip-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

.tip-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-communicator-muted);
  text-wrap: pretty;
  position: relative;
  z-index: 1;
}

/* Alternating accent rhythm (purple / orange) to echo the brand pairing */
.tips-grid .tip-card:nth-child(odd)  { border-left: 3px solid #0C2340; }
.tips-grid .tip-card:nth-child(even) { border-left: 3px solid #FF5A36; }
.tips-grid .tip-card:nth-child(even) .tip-icon {
  color: var(--color-action-accent);
  background: rgba(255, 90, 54, 0.10);
  border-color: rgba(255, 90, 54, 0.22);
}

.tip-card:hover {
  transform: translateY(-6px);
  background-color: var(--color-support-surface-hover);
  box-shadow: 0 22px 48px rgba(5, 5, 6, 0.28);
}
.tips-grid .tip-card:nth-child(odd):hover  { border-color: #0C2340; box-shadow: 0 22px 48px rgba(12, 35, 64, 0.18); }
.tips-grid .tip-card:nth-child(even):hover { border-color: #FF5A36; box-shadow: 0 22px 48px rgba(255, 90, 54, 0.18); }
.tip-card:hover .tip-number { opacity: 0.10; transform: scale(1.06); }
.tip-card:hover .tip-icon { transform: translateY(-3px) rotate(-4deg); }

.light-theme .tip-card:hover {
  box-shadow: 0 22px 48px rgba(5, 5, 6, 0.12);
}

@media (max-width: 991px) {
  .tips-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .tips-container { padding-inline: var(--space-24); }
  .tips-section { padding-block: var(--space-64); }
  .tip-card { padding: var(--space-24); }
  .tip-number { font-size: 5.5rem; }
}

/* ==========================================================================
   4. FAQ SECTION (Collapsible Accordion Stack)
   ========================================================================== */
.faq-section {
  width: 100%;
  padding-block: var(--space-96);
  background-color: var(--color-neutral-bg);
  border-bottom: none !important; /* separation lines removed */
}

.faq-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48);
}

.faq-header {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: 100px;
  align-self: start;
}

.faq-subtitle {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.faq-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.faq-list {
  grid-column: span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Accordion details */
.faq-item {
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-md);
  background-color: var(--color-support-surface);
  transition: border-color var(--duration-transition) var(--ease-standard);
  overflow: hidden;
}

.faq-item[open] {
  border-color: rgba(255, 90, 54, 0.3);
}

.faq-question {
  padding: var(--space-24) var(--space-32);
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-24);
  list-style: none; /* Hide default triangle marker */
  user-select: none;
}

.faq-question::-webkit-details-marker {
  display: none; /* Webkit browser marker hide */
}

.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-communicator-text);
  transition: transform var(--duration-transition) var(--ease-standard);
}

/* Horizontal line */
.faq-icon::before {
  width: 100%;
  height: 2px;
}

/* Vertical line */
.faq-icon::after {
  width: 2px;
  height: 100%;
}

/* Animate plus to minus when details open */
.faq-item[open] .faq-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-item[open] .faq-icon::before {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--space-32) var(--space-24);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-communicator-muted);
}

/* ==========================================================================
   5. CONTACT & LEAD CAPTURE FORM
   ========================================================================== */
.contact-section {
  width: 100%;
  padding-block: var(--space-96);
  background-color: var(--color-neutral-bg);
  border-bottom: none !important; /* separation lines removed */
}

.contact-grid-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48);
  align-items: center;
}

.contact-info {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contact-subtitle {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.contact-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-communicator-muted);
  max-width: 48ch;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.contact-link {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-communicator-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  transition: color var(--duration-micro) var(--ease-standard);
}

.contact-link:hover {
  color: var(--color-action-brand);
}

.contact-link-label {
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid var(--color-anchor-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-communicator-muted);
}

.contact-form-wrapper {
  grid-column: span 6;
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-48);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.form-row {
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-communicator-muted);
  letter-spacing: 0.05em;
}

.form-group input,
.form-group select {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-anchor-border);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  color: var(--color-communicator-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--duration-transition) var(--ease-standard);
  width: 100%;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #0C2340;
  box-shadow: 0 0 12px rgba(12, 35, 64, 0.22);
}

.form-group select option {
  background-color: var(--color-neutral-bg);
  color: var(--color-communicator-text);
}

.form-submit-btn {
  margin-top: var(--space-8);
  padding: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}

/* ==========================================================================
   SITE FOOTER (Premium floating card layout overlaying https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928675/luftrans/footer.png)
   ========================================================================== */
.site-footer {
  position: relative;
  width: 100%;
  padding-top: clamp(140px, 15vw, 220px);
  padding-bottom: clamp(200px, 22vw, 340px);
  padding-inline: var(--space-48);
  background-image: url('https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928675/luftrans/footer.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--color-neutral-bg) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-top: none;
}

.footer-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  background: rgba(18, 18, 20, 0.85); /* Dark theme frosted glass background */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 32px;
  padding: var(--space-64) var(--space-64) var(--space-48);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.35),
    0 8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.footer-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-48);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 340px;
}

.footer-brand-col .logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  text-decoration: none;
  color: #FFFFFF;
}

.footer-brand-col .logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.footer-brand-col .nav-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.footer-motto {
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin: 0;
}

.footer-tagline {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-action-brand);
  margin: 0;
}

.footer-links-grid {
  display: flex;
  gap: clamp(48px, 6vw, 120px);
  flex-wrap: wrap;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 140px;
}

.footer-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}

.footer-links-col a {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.footer-links-col a:hover {
  color: var(--color-action-brand);
}

.footer-divider {
  height: 1px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.4s ease;
}

.footer-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  font-size: 0.85rem;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.footer-developer {
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.footer-developer a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--duration-micro) var(--ease-standard);
}

.footer-developer a:hover {
  color: var(--color-action-brand);
}

.footer-social-row {
  display: flex;
  gap: var(--space-12);
  align-items: center;
}

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-social-btn:hover {
  color: #FFFFFF !important;
  border-color: var(--color-action-brand);
  background-color: var(--color-action-brand);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(142, 69, 70, 0.25);
}

.footer-social-btn svg {
  transition: transform 0.3s ease;
}

.footer-social-btn:hover svg {
  transform: scale(1.08);
}

@media (max-width: 991px) {
  .site-footer {
    padding-top: clamp(80px, 10vw, 140px);
    padding-bottom: clamp(140px, 18vw, 240px);
    padding-inline: var(--space-24);
  }
  .footer-card {
    padding: var(--space-32) var(--space-32) var(--space-24);
    border-radius: 24px;
    gap: var(--space-32);
  }
  .footer-card-top {
    flex-direction: column;
    gap: var(--space-32);
  }
  .footer-brand-col {
    max-width: 100%;
  }
  .footer-links-grid {
    gap: var(--space-32);
    width: 100%;
    justify-content: space-between;
  }
  .footer-links-col {
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding-top: clamp(60px, 8vw, 100px);
    padding-bottom: clamp(100px, 16vw, 180px);
    padding-inline: var(--space-16);
  }
  .footer-card {
    padding: var(--space-24) var(--space-16) var(--space-16);
    border-radius: 16px;
    gap: var(--space-24);
  }
  .footer-links-grid {
    flex-direction: column;
    gap: var(--space-24);
  }
  .footer-card-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    width: 100%;
  }
  .footer-social-row {
    order: -1;
  }
}

/* ==========================================================================
   SLICK GDPA COOKIES CONSENT BANNER
   ========================================================================== */
.cookies-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(200px); /* Initially hidden below screen */
  width: calc(100% - 48px);
  max-width: 800px;
  background-color: var(--color-cookies-bg);
  backdrop-filter: blur(25px);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-md);
  padding: var(--space-24) var(--space-32);
  z-index: 999;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.cookies-bar.active {
  transform: translateX(-50%) translateY(0); /* Slide up on load */
}

.cookies-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-32);
  flex-wrap: wrap;
}

.cookies-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-communicator-muted);
  max-width: 520px;
}

.cookies-actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.cookies-settings-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-communicator-muted);
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.cookies-settings-link:hover {
  color: var(--color-communicator-text);
}

.cookies-accept-btn {
  padding: 8px 18px !important;
  font-size: 0.8rem !important;
}

/* ==========================================================================
   FLOATING EMERGENCY BUTTON
   ========================================================================== */
.emergency-phone-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-action-brand);
  color: var(--color-neutral-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 998;
  box-shadow: 0 10px 30px rgba(255, 90, 54, 0.4);
  transition: background-color var(--duration-transition) var(--ease-standard),
              transform 0.1s var(--ease-standard),
              opacity 0.3s var(--ease-standard),
              scale 0.3s var(--ease-standard),
              bottom 0.4s var(--ease-standard);
  cursor: pointer;
}

.emergency-phone-btn:hover {
  background-color: var(--color-communicator-text);
  color: var(--color-neutral-bg);
}

.phone-icon-svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   RESPONSIVE OPTIMIZATIONS (Transferability & Mobile-First Degradation)
   ========================================================================== */

/* Tablet & Mobile viewports (991px) */
@media (max-width: 991px) {
  .header-container {
    padding-inline: var(--space-24);
  }
  
  .hero-section {
    padding-top: 40px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: auto !important;
  }

  .hero-canvas-container {
    position: relative !important;
    order: 2;
    height: calc(56.25vw - 30px) !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: var(--color-neutral-bg) !important;
    opacity: 1 !important;
  }

  .desktop-only-video {
    display: none !important;
  }

  .mobile-only-video {
    display: block !important;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* Smooth feather on all four edges of the video block so the footage melts
       into the cream background. Replaces the old hard 20%/80% cream-overlay
       gradients (which left a visible band + double-darkened corners). Mask is
       on the wrapper, not the shifted <video>, so the feather stays aligned to
       the visible block edges regardless of the -30px telemetry-hiding offset. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 11%, #000 85%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 13%, #000 87%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 11%, #000 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  /* Old cream-overlay scrim retired in favour of the wrapper mask above. */
  .mobile-only-video::after {
    content: none;
  }

  .mobile-only-video .hero-bg-video {
    /* COVER (not contain) so the footage fills the whole block edge-to-edge.
       With contain the video was letter-boxed (~322px wide in a 375px block) and
       shifted -30px, so the wrapper feather mask only lined up with the bottom
       edge — the top/sides faded into empty letterbox space. Cover makes the
       video fill the block, so the wrapper mask now feathers all four edges, and
       the bottom mask fade hides the telemetry bar baked into the frames (which
       is what the old -30px shift was for). object-position biased slightly up so
       the van/road stays centred while the very bottom is cropped + faded. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 38% !important;
    opacity: 1.0 !important;
    position: absolute;
    inset: 0 !important;
    transform: none !important;
  }

  .desktop-bg-container {
    display: none !important;
  }
  
  .hero-section .hero-title {
    color: #FFFFFF !important;
  }
  
  .hero-section .hero-description {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  .hero-section .heritage-badge {
    background-color: rgba(12, 35, 64, 0.08) !important;
    border-color: rgba(12, 35, 64, 0.25) !important;
    color: var(--color-action-brand) !important;
  }
  
  .hero-section .heritage-badge .badge-dot {
    background-color: var(--color-action-brand) !important;
  }
  
  .hero-section .stat-number {
    color: #FFFFFF !important;
  }
  
  .hero-section .stat-label {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  
  .hero-section .stat-divider {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }
  
  .hero-section .industrial-trust .trust-title {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  
  .hero-section .industrial-trust .trust-logos {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* Hamburger navigation toggle active */
  .nav-toggle {
    display: flex;
  }

  .nav-desktop-cta {
    display: none; /* Hide desktop button, it is inside overlay */
  }

  .slick-lang-selector {
    display: none; /* Switched to mobile inside overlay */
  }

  .hero-live-clock {
    display: none; /* Typographic date watermark deactivated on mobile backgrounds */
  }

  /* Deactivate desktop right column card */
  .hero-visual-content {
    display: none;
  }
  
  /* Activate mobile background video */
  .mobile-bg-container {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }
  
  .mobile-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .mobile-bg-overlay {
    position: absolute;
    inset: 0;
    /* Increased top overlay wash to 0.45 and mid stops to handle high video opacity */
    background: linear-gradient(
      180deg, 
      rgba(5, 5, 6, 0.45) 0%, 
      rgba(5, 5, 6, 0.72) 45%, 
      rgba(5, 5, 6, 0.9) 75%,
      rgba(5, 5, 6, 1) 90%, 
      rgba(5, 5, 6, 1) 100%
    );
    z-index: 2;
  }

  .hero-grid-container {
    padding-inline: var(--space-24);
    grid-template-columns: 1fr;
    min-height: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* Top-aligned to float in the white sky above the van */
    align-items: flex-start !important; /* Left-aligned for high-end editorial style */
    padding-top: 72px !important; /* Extremely compact offset for header spacing */
    padding-bottom: 20px !important;
    position: relative !important;
    order: 1;
    width: 100%;
  }
  
  .hero-text-content {
    grid-column: span 12;
    padding: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 6px !important; /* Tighter gap to make it compact */
    width: 100%;
    max-width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .light-theme .hero-text-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .heritage-badge {
    align-self: flex-start !important;
    padding: 4px 10px !important;
    font-size: 0.68rem !important;
  }
  
  .hero-title,
  :lang(bg) .hero-title {
    font-family: var(--font-display) !important;
    font-weight: 900 !important;
    font-size: clamp(1.15rem, 5vw, 1.45rem) !important; /* Super compact mobile title to fit small viewports */
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-wrap: wrap !important;
  }

  .hero-description {
    margin-inline: auto;
    font-size: 1rem;
    max-width: 48ch;
    line-height: 1.5;
  }
  
  .hero-action-group {
    justify-content: center;
    width: 100%;
    flex-direction: column;
    gap: var(--space-12);
  }
  
  .btn-action {
    width: 100%;
  }

  .stats-mini {
    margin-top: var(--space-4);
  }
  
  .industrial-trust {
    align-items: center;
    margin-top: var(--space-12);
    padding-top: var(--space-12);
    width: 100%;
  }

  /* Corridor responsive */
  .corridor-container {
    padding-inline: var(--space-24);
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .gallery-section {
    padding-block: var(--space-64);
  }

  .gallery-header {
    padding-inline: var(--space-24);
    margin-bottom: var(--space-32);
  }

  .coverflow-stage {
    height: clamp(380px, 108vw, 460px);
  }

  .coverflow-card {
    width: min(72vw, 300px);
    margin: calc(min(72vw, 300px) * -0.625) 0 0 calc(min(72vw, 300px) * -0.5);
  }

  .coverflow-nav {
    margin-top: var(--space-24);
  }

  .faq-section {
    padding-block: var(--space-64);
  }

  .faq-container {
    padding-inline: var(--space-24);
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .faq-header {
    grid-column: span 12;
  }

  .faq-list {
    grid-column: span 12;
  }

  .contact-section {
    padding-block: var(--space-64);
  }

  .contact-grid-container {
    padding-inline: var(--space-24);
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .contact-info {
    grid-column: span 12;
  }

  .contact-form-wrapper {
    grid-column: span 12;
    padding: var(--space-24);
  }

  .footer-container {
    padding-inline: var(--space-24);
  }

  .cookies-bar {
    width: calc(100% - 32px);
    padding: var(--space-16);
  }

  .cookies-container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .cookies-actions {
    width: 100%;
    justify-content: space-between;
  }

  .emergency-phone-btn {
    bottom: 24px; /* Default bottom position on mobile */
    right: 24px;
  }

  .has-cookies-bar .emergency-phone-btn {
    bottom: 140px; /* Shifted up above active cookies bar on mobile */
  }
}

/* Mobile Viewports (576px) */
@media (max-width: 576px) {
  /* Mobile keeps the original hero spacing (mobile header is 70px, was perfect) */
  .hero-section { padding-top: 0; }
  :root {
    --space-48: 32px;
    --space-32: 24px;
    --space-24: 16px;
  }
  
  .site-header {
    height: 70px;
    background-color: rgba(5, 5, 6, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .light-theme .site-header {
    background-color: rgba(245, 244, 240, 0.82);
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  /* Ensure theme toggle remains a perfect circle on small screens */
  .theme-toggle-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  
  .logo-text {
    display: none;
  }
}

/* ==========================================================================
   ACCREDITATION & LEGAL COMPLIANCE SECTION
   ========================================================================== */
.compliance-section {
  width: 100%;
  padding-block: var(--space-96);
  background-color: var(--color-neutral-bg);
  border-bottom: none !important; /* separation lines removed */
}

.compliance-container {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--space-48);
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.compliance-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.compliance-subtitle {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.compliance-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -0.02em;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-32);
}

.compliance-card {
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  transition: transform var(--duration-transition) var(--ease-standard),
              border-color var(--duration-transition) var(--ease-standard),
              background-color var(--duration-transition) var(--ease-standard);
}

.compliance-card:hover {
  transform: translateY(-4px);
  border-color: #0C2340;
  background-color: var(--color-support-surface-hover);
  box-shadow: 0 15px 30px rgba(12, 35, 64, 0.12);
}

.compliance-card-icon {
  color: var(--color-action-brand);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 90, 54, 0.05);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
}

.compliance-card-icon svg {
  width: 24px;
  height: 24px;
}

.compliance-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-communicator-text);
  line-height: 1.25;
}

.compliance-card p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-communicator-muted);
}

/* Compliance responsive styling */
@media (max-width: 991px) {
  .compliance-container {
    padding-inline: var(--space-24);
  }
  .compliance-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
  .compliance-card {
    padding: var(--space-24);
  }
}

/* ==========================================================================
   LIGHT MODE DESIGN SPECIFICS
   ========================================================================== */
.light-theme .contact-form input,
.light-theme .contact-form select {
  background-color: #EBEAE5;
  border-color: rgba(5, 5, 6, 0.12);
  color: #1C1B1A;
}

.light-theme .contact-form input::placeholder {
  color: #8C8984;
}

.light-theme .contact-form label {
  color: #1C1B1A;
}

.light-theme .faq-item {
  background-color: rgba(5, 5, 6, 0.02);
  border-color: rgba(5, 5, 6, 0.08);
}

.light-theme .faq-question {
  color: #1C1B1A;
}

.light-theme .faq-answer {
  color: #4A4845;
}

.light-theme .hamburger-bar {
  background-color: #1C1B1A;
}

.light-theme .logo-text {
  color: #1C1B1A;
  -webkit-text-fill-color: currentColor;
}

.light-theme .nav-toggle.active .hamburger-bar {
  background-color: #1C1B1A;
}

.light-theme .heritage-badge {
  background-color: rgba(5, 5, 6, 0.03);
}

.light-theme .stat-number {
  color: #1C1B1A;
}

.light-theme .site-footer {
  background-image: url('https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928675/luftrans/footer.png') !important;
  background-color: var(--color-neutral-bg) !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
}

.light-theme .footer-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.03);
}

.light-theme .footer-brand-col .logo-link,
.light-theme .footer-brand-col .logo-text,
.light-theme .footer-col-title,
.light-theme .footer-developer a {
  color: #1C1B1A;
  -webkit-text-fill-color: currentColor;
}

.light-theme .footer-motto,
.light-theme .footer-links-col a {
  color: #5C5A56;
  -webkit-text-fill-color: currentColor;
}

.light-theme .footer-divider {
  background-color: rgba(0, 0, 0, 0.06);
}

.light-theme .footer-copy,
.light-theme .footer-developer {
  color: #7C7A75;
  -webkit-text-fill-color: currentColor;
}

.light-theme .footer-social-btn {
  border-color: rgba(0, 0, 0, 0.08);
  color: #5C5A56;
}



/* ==========================================================================
   13. DYNAMIC STATUS BAR OVERLAY (Obscures Video Watermark on Desktop)
   ========================================================================== */
.hero-live-clock {
  display: none;
}

.hero-watermark-clock {
  position: relative;
  display: inline-block;
  width: fit-content;
  margin-bottom: var(--space-8);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(28, 27, 26, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(28, 27, 26, 0.15);
  color: #1C1B1A;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  align-self: flex-start;
}

.light-theme .hero-watermark-clock {
  background: rgba(28, 27, 26, 0.08);
  border-color: rgba(28, 27, 26, 0.15);
  color: #1C1B1A;
}

@media (max-width: 991px) {
  .hero-watermark-clock {
    display: inline-block !important; /* Force show clock on mobile */
    font-size: 0.72rem;
    padding: 6px 12px;
    margin-bottom: var(--space-12);
  }
}

/* ==========================================================================
   EUROPEAN NETWORK MAP PANEL
   ========================================================================== */
.corridor-map-panel {
  position: relative;
  width: 100%;
  height: clamp(540px, 64vw, 780px); /* Increased vertical frame size for backdrop video breathing room */
  background: transparent !important;
  overflow: hidden;
  border-block: none;
  margin-top: var(--space-64);
  box-shadow: none;
  isolation: isolate;
}

.map-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16; /* More present backdrop video */
  pointer-events: none;
  z-index: 0;
  /* Stronger edge feather: solid only in the very centre, fully gone well
     before any edge — blends the video frame into the page on every side. */
  mask-image: radial-gradient(ellipse 76% 76% at 50% 50%, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 64%);
  -webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 50%, rgba(0,0,0,1) 4%, rgba(0,0,0,0) 64%);
}

#euro-map-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* Shrink the whole network (canvas + city labels) so it sits smaller inside
     the frame, with more breathing room that the edge-feather blends away. */
  transform: scale(0.78);
  transform-origin: center center;
}

#euro-map-container canvas {
  pointer-events: auto;
}

.corridor-map-panel canvas {
  display: block;
  background: transparent !important;
}

.corridor-map-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Deeper four-edge blend: radial vignette + horizontal AND vertical
     gradients so the frame dissolves into the background on every side,
     consistently across all display sizes. */
  background:
    radial-gradient(ellipse 78% 78% at center, transparent 28%, var(--color-neutral-bg) 88%),
    linear-gradient(90deg, var(--color-neutral-bg) 0%, transparent 16%, transparent 84%, var(--color-neutral-bg) 100%),
    linear-gradient(0deg, var(--color-neutral-bg) 0%, transparent 16%, transparent 84%, var(--color-neutral-bg) 100%);
  pointer-events: none;
  z-index: 10;
}

/* City labels (rendered by CSS2DRenderer into the panel) */
.map-city-label {
  font-family: 'Share Tech Mono', monospace;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.map-city-label.tier1 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FF5A36;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95); /* Removed glowing effects, subtle dark drop shadow */
  opacity: 1;
}

.map-city-label.tier2 {
  font-size: 7.5px;
  color: rgba(255, 90, 54, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9); /* Removed glowing effects, subtle dark drop shadow */
  opacity: 0.85;
}

/* Hub location pins (Berlin & Sofia) inside the Three.js label renderer */
.map-hub-pin {
  width: 42px;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); /* Removed orange glow effect */
  transform: translateX(-50%);
}

/* Hub city labels get larger, more prominent treatment */
.map-city-label.tier1.hub {
  font-size: 11px;
  color: #FF5A36;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95); /* Removed orange glow effect */
  letter-spacing: 0.16em;
}

/* Light-theme overrides - text labels dynamically adapt for high contrast readability and match brand */
.light-theme .map-city-label.tier1 {
  color: #0C2340; /* Clean Purple in light mode */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9); /* High contrast flat light shadow */
}

.light-theme .map-city-label.tier1.hub {
  color: #FF5A36; /* Clean Orange */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.95); /* High contrast flat light shadow */
}

.light-theme .map-city-label.tier2 {
  color: rgba(12, 35, 64, 0.75); /* Clean Muted Purple */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

@media (max-width: 991px) {
  .corridor-map-panel {
    height: clamp(400px, 76vw, 560px); /* Increased size */
    margin-top: var(--space-48);
  }

  .map-city-label.tier1 {
    font-size: 8.5px;
  }

  .map-city-label.tier2 {
    font-size: 7px;
    opacity: 0.7;
  }

  .map-hub-pin {
    width: 34px;
  }
}

@media (max-width: 520px) {
  .corridor-map-panel {
    height: 380px; /* Increased size */
  }

  .map-city-label.tier1 {
    font-size: 7.5px;
    letter-spacing: 0.08em;
  }
  
  .map-city-label.tier2 {
    display: none;
  }
}

/* ==========================================================================
   15. FORM FIELD ICONS & INTERACTIVE VOLUME ESTIMATOR
   ========================================================================== */
.input-wrapper {
  position: relative;
  width: 100%;
}

.input-wrapper input {
  padding-left: 44px !important;
}

.input-wrapper .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-communicator-muted);
  pointer-events: none;
  transition: color var(--duration-micro) var(--ease-standard);
}

.input-wrapper input:focus + .field-icon {
  color: var(--color-action-brand);
}

.estimator-widget {
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  transition: border-color var(--duration-transition) var(--ease-standard);
}

.estimator-widget:focus-within {
  border-color: var(--color-action-brand);
}

.estimator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.estimator-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-communicator-muted);
}

.estimator-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-action-brand);
}

.estimator-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-anchor-border);
  outline: none;
  cursor: pointer;
}

.estimator-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-action-brand);
  border: 2px solid var(--color-neutral-bg);
  cursor: pointer;
  transition: transform var(--duration-micro) var(--ease-standard),
              background-color var(--duration-micro) var(--ease-standard);
}

.estimator-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--color-communicator-text);
}

.estimator-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  border-top: 1px solid var(--color-anchor-border);
  padding-top: var(--space-12);
}

.est-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.est-label {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-communicator-muted);
}

.est-val {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-communicator-text);
}

@media (max-width: 991px) {
  .corridor-section {
    padding-block: var(--space-64);
  }
  /* Constrain decorative glow so it never overflows the mobile viewport
     (400px wide at left:10% pushed the layout 63px past 375px, widening the
     visual viewport and letting the whole page pan left/right on mobile). */
  .corridor-section::after {
    width: 220px;
    height: 220px;
    left: 4%;
  }
  .corridor-stat-number {
    font-size: clamp(2rem, 6vw, 2.5rem);
    min-width: 0;
  }
}

/* ==========================================================================
   FORM TRACKER & WEBAPP MULTI-STEP FLOW
   ========================================================================== */
.form-steps-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-48);
  position: relative;
  width: 100%;
}

.step-tracker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  position: relative;
  z-index: 2;
  cursor: pointer;
  flex: 1;
}

.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-anchor-border);
  border: 2px solid var(--color-neutral-bg);
  transition: background-color var(--duration-transition) var(--ease-standard),
              transform var(--duration-transition) var(--ease-standard);
}

.step-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-communicator-muted);
  letter-spacing: 0.05em;
  transition: color var(--duration-transition) var(--ease-standard);
  text-align: center;
  white-space: normal;
  max-width: 110px;
  line-height: 1.3;
}

.step-tracker-item.active .step-dot {
  background-color: var(--color-action-brand);
  transform: scale(1.35);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-action-brand) 20%, transparent);
}

.step-tracker-item.active .step-label {
  color: var(--color-communicator-text);
}

.step-tracker-item.completed .step-dot {
  background-color: var(--color-action-accent);
}

.step-tracker-item.completed .step-label {
  color: var(--color-communicator-muted);
}

.step-tracker-line {
  position: absolute;
  top: 5px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-color: var(--color-anchor-border);
  z-index: 1;
}

.step-progress-fill {
  height: 100%;
  width: 0%;
  background-color: var(--color-action-accent);
  transition: width 0.4s var(--ease-standard);
}

/* Panes engine */
.form-step-pane {
  display: none;
  opacity: 0;
  flex-direction: column;
  gap: var(--space-24);
  transition: opacity 0.35s var(--ease-standard);
  width: 100%;
}

.form-step-pane.active {
  display: flex;
  opacity: 1;
}

.step-pane-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-communicator-text);
  line-height: 1.25;
}

.step-pane-subtitle {
  font-size: 0.88rem;
  color: var(--color-communicator-muted);
  line-height: 1.5;
  margin-top: calc(-1 * var(--space-12));
}

.step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-24);
  border-top: 1px solid var(--color-anchor-border);
  padding-top: var(--space-24);
  width: 100%;
}

.step-actions .btn-secondary {
  background: transparent;
  border: 1px solid var(--color-anchor-border);
  color: var(--color-communicator-text);
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-standard),
              border-color var(--duration-micro) var(--ease-standard);
}

.step-actions .btn-secondary:hover {
  background-color: var(--color-support-surface);
  border-color: var(--color-communicator-muted);
}

/* Radio buttons grid */
.category-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  width: 100%;
}

@media (min-width: 992px) {
  .category-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.category-card-option {
  cursor: pointer;
  width: 100%;
}

.category-card-option input[type="radio"] {
  display: none !important;
}

.category-card-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-cookies-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color var(--duration-transition) var(--ease-elastic),
              background-color var(--duration-transition) var(--ease-elastic),
              transform var(--duration-transition) var(--ease-elastic);
  width: 100%;
  height: 100%;
  text-align: left;
  position: relative;
}

.category-card-option:hover .category-card-box {
  border-color: var(--color-action-brand);
  background-color: color-mix(in oklch, var(--color-action-brand) 4%, var(--color-cookies-bg));
  transform: translateY(-4px);
}

.category-card-option input[type="radio"]:checked + .category-card-box {
  border-color: var(--color-action-brand);
  background-color: color-mix(in oklch, var(--color-action-brand) 8%, var(--color-cookies-bg));
  transform: translateY(-4px);
}

.category-card-icon {
  color: var(--color-communicator-muted);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: color var(--duration-transition) var(--ease-standard),
              background-color var(--duration-transition) var(--ease-standard),
              border-color var(--duration-transition) var(--ease-standard);
  margin-bottom: var(--space-4);
}

.category-card-icon svg {
  width: 22px;
  height: 22px;
}

.category-card-option:hover .category-card-box .category-card-icon {
  color: var(--color-communicator-text);
  border-color: var(--color-action-brand);
  background-color: var(--color-support-surface-hover);
}

.category-card-option input[type="radio"]:checked + .category-card-box .category-card-icon {
  color: var(--color-neutral-bg);
  background-color: var(--color-action-brand);
  border-color: var(--color-action-brand);
}

.category-card-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-communicator-text);
  line-height: 1.2;
  display: block;
}

.category-card-desc {
  font-size: 0.85rem;
  color: var(--color-communicator-muted);
  line-height: 1.5;
  display: block;
  margin-top: 2px;
}

/* Custom checkbox */
.custom-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  cursor: pointer;
  user-select: none;
  width: 100%;
}

.custom-checkbox-container input {
  display: none !important;
}

.checkbox-checkmark {
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-anchor-border);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.01);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--duration-micro) var(--ease-standard),
              border-color var(--duration-micro) var(--ease-standard);
  margin-top: 2px;
}

.custom-checkbox-container:hover .checkbox-checkmark {
  border-color: var(--color-communicator-muted);
}

.custom-checkbox-container input:checked + .checkbox-checkmark {
  background-color: var(--color-action-brand);
  border-color: var(--color-action-brand);
}

.checkbox-checkmark::after {
  content: '';
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox-container input:checked + .checkbox-checkmark::after {
  display: block;
}

.checkbox-label {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-communicator-muted);
}

.custom-checkbox-container input:checked ~ .checkbox-label {
  color: var(--color-communicator-text);
}

/* Success step pane styling */
.success-pane {
  align-items: center;
  text-align: center;
  padding-block: var(--space-24);
  width: 100%;
}

.success-icon-wrapper {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 90, 54, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.success-checkmark-svg {
  width: 44px;
  height: 44px;
  stroke: var(--color-action-brand);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: stroke-checkmark 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.2s;
  fill: none;
}

.success-checkmark-circle {
  stroke: var(--color-action-brand);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: stroke-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  fill: none;
}

.success-checkmark-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke-check 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.8s;
  fill: none;
}

@keyframes stroke-circle {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke-checkmark {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke-check {
  100% {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   FLOATING ACTION BUTTONS & FOOTER SOCIALS
   ========================================================================== */
.floating-phone-btn,
.floating-social-dock,
.chatbot-toggle {
  --floating-action-size: 56px;
  right: 24px;
}

.floating-phone-btn {
  position: fixed;
  bottom: 32px;
  width: var(--floating-action-size);
  height: var(--floating-action-size);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10010;
  color: #FFFFFF;
  background-color: var(--color-action-accent); /* Solid orange accent */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(255, 90, 54, 0.38);
  transition: all var(--duration-transition) var(--ease-standard);
  cursor: pointer;
}

.floating-phone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(255, 90, 54, 0.35);
  background-color: var(--color-action-brand); /* Solid purple accent on hover */
}

.floating-phone-btn svg {
  width: 22px;
  height: 22px;
}

.floating-phone-btn:active {
  transform: scale(0.92);
}

.floating-social-dock {
  position: fixed;
  bottom: 104px;
  width: var(--floating-action-size);
  height: var(--floating-action-size);
  z-index: 10011;
  pointer-events: auto;
}

.social-dock-btn {
  width: var(--floating-action-size);
  height: var(--floating-action-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-communicator-text);
  background-color: var(--color-cookies-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: background-color var(--duration-transition) var(--ease-standard),
              color var(--duration-transition) var(--ease-standard),
              transform 0.1s var(--ease-standard),
              opacity var(--duration-transition) var(--ease-standard);
  cursor: pointer;
  border: 1px solid var(--color-anchor-border);
  box-shadow: 0 10px 30px rgba(5, 5, 6, 0.22);
  text-decoration: none;
}

.social-dock-btn svg {
  width: 21px;
  height: 21px;
}

.social-dock-btn:hover {
  background-color: var(--color-support-surface);
  color: var(--color-action-brand);
}

.social-dock-toggle {
  position: relative;
  z-index: 2;
}

.social-dock-menu {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-10);
  padding: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-cookies-bg);
  border: 1px solid var(--color-anchor-border);
  box-shadow: 0 18px 44px rgba(5, 5, 6, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translate(12px, -50%) scale(0.94);
  transform-origin: center right;
  transition: opacity 0.28s var(--ease-standard),
              transform 0.28s var(--ease-standard);
}

.floating-social-dock.is-open .social-dock-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

.social-dock-menu .social-dock-btn {
  --floating-action-size: 44px;
  box-shadow: none;
}

.social-dock-btn.wa:hover {
  color: #25D366;
}

.social-dock-btn.ig:hover {
  color: #E1306C;
}

.social-dock-btn.fb:hover {
  color: #1877F2;
}

.social-dock-btn.x:hover {
  color: #ffffff;
  background-color: #111111;
}

.social-dock-btn:active {
  transform: scale(0.92);
}

/* Footer socials styling */
.footer-socials {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.social-link-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-anchor-border);
  color: var(--color-communicator-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-micro) var(--ease-standard),
              border-color var(--duration-micro) var(--ease-standard),
              transform 0.1s var(--ease-standard);
  background: transparent;
}

.social-link-btn svg {
  width: 16px;
  height: 16px;
}

.social-link-btn:hover {
  color: var(--color-communicator-text);
  border-color: var(--color-communicator-text);
  transform: translateY(-2px);
}

.social-link-btn.wa:hover {
  color: #25D366;
  border-color: #25D366;
}

.social-link-btn.ig:hover {
  color: #E1306C;
  border-color: #E1306C;
}

.social-link-btn.fb:hover {
  color: #1877F2;
  border-color: #1877F2;
}

.social-link-btn.g:hover {
  color: #4285F4;
  border-color: #4285F4;
}

/* Spacing and visual refinements */
.light-theme .floating-social-dock .social-dock-btn,
.light-theme .social-dock-menu {
  background-color: rgba(245, 244, 240, 0.88);
}

.light-theme .category-card-box {
  background-color: rgba(235, 234, 229, 0.75);
  border-color: rgba(5, 5, 6, 0.08);
}

.light-theme .category-card-option:hover .category-card-box {
  border-color: var(--color-action-brand);
  background-color: rgba(235, 234, 229, 0.9);
}

.light-theme .category-card-option input[type="radio"]:checked + .category-card-box {
  border-color: var(--color-action-brand);
  background-color: color-mix(in oklch, var(--color-action-brand) 6%, rgba(235, 234, 229, 0.9));
}

.light-theme .checkbox-checkmark {
  background-color: rgba(235, 234, 229, 0.75);
  border-color: rgba(5, 5, 6, 0.08);
}

/* ==========================================================================
   TYPOGRAPHY PREVENT CUT-IN-HALF WORDS
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .accent-text, .logo-text, .btn-primary, .btn-secondary, .btn-action, .corridor-stat-number, .estimator-value, .gallery-card-label, .category-card-name {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

p, li, label, .faq-answer, .cookies-text, .service-description {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-wrap: pretty;
}

@media (max-width: 991px) {
  .floating-social-dock,
  .chatbot-toggle {
    display: none !important;
  }

  .floating-phone-btn {
    --floating-action-size: 48px;
    right: var(--space-24);
    bottom: var(--space-24);
  }
}

@media (max-width: 576px) {
  .floating-phone-btn {
    right: var(--space-16);
    bottom: var(--space-16);
  }

  /* Phone button stays pinned bottom-right regardless of the cookie bar
     (no lift, so no jump when consent resolves). */
  .has-cookies-bar .floating-phone-btn {
    bottom: var(--space-16);
  }
}

  .social-dock-menu {
    gap: 8px;
    padding: 7px;
    max-width: calc(100vw - 88px);
  }

  .social-dock-menu .social-dock-btn {
    --floating-action-size: 40px;
  }
}

@media (max-width: 576px) {
  .contact-form-wrapper {
    padding: var(--space-24) var(--space-16) !important;
  }
  .form-steps-tracker {
    margin-bottom: var(--space-32);
  }
  .step-label {
    display: none; /* Hide labels on mobile to prevent squishing */
  }
  .step-tracker-line {
    left: 16%;
    right: 16%;
  }
  .category-card-box {
    padding: var(--space-16);
    gap: var(--space-12);
  }
  .category-card-icon {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   SCROLL-ANIMATED GRAPHIC OVERLAYS (Runner, Cargo Crate, Route Pin, Something.png)
   ========================================================================== */

/* 1. Hero Watermark Parallax (https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928702/luftrans/something.png) */
.hero-scroll-bg {
  position: absolute;
  top: 50%;
  width: clamp(280px, 35vw, 550px);
  height: auto;
  object-fit: contain;
  opacity: 0.038; /* Satori standard 3.8% elegant opacity */
  pointer-events: none;
  z-index: 0;
  filter: grayscale(100%);
  mix-blend-mode: luminosity;
  user-select: none;
  will-change: transform;
}

.hero-scroll-bg.bg-left {
  left: -15%;
  transform: translateY(-50%) translateZ(0);
}

.hero-scroll-bg.bg-right {
  right: -15%;
  transform: translateY(-50%) translateZ(0);
}

.light-theme .hero-scroll-bg {
  opacity: 0.055;
  filter: grayscale(100%) brightness(0.2);
}

@media (max-width: 991px) {
  .hero-scroll-bg {
    display: none !important;
  }
}

/* 2. Corridor Sticky Map Pin (https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928707/luftrans/corridor-route-marker.png) */
.corridor-marker-container {
  position: sticky;
  top: 20vh;
  align-self: start;
  display: flex;
  justify-content: flex-start; /* Anchor the pin to the LEFT of its column — tucked beside the text instead of floating in empty space */
  align-items: center;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  margin-left: -64px; /* Pull it back toward the corridor copy */
  perspective: 900px; /* Enables the 3D pointer-tilt on the inner wrapper */
}

/* Inner wrapper carries the pointer-driven parallax / tilt (JS sets its transform).
   Keeping it separate from the floating <img> avoids transform conflicts with
   the idle bob animation and the GSAP reveal on the container. */
.corridor-marker-parallax {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s var(--ease-standard);
}

.corridor-marker-floating {
  position: relative;
  z-index: 2;
  width: clamp(260px, 24vw, 380px); /* Much larger location pin! */
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.32));
  will-change: transform;
  animation: marker-idle-float 6s ease-in-out infinite;
}

/* Soft pulsing glow behind the pin — echoes the luminous red beacon */
.corridor-marker-glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 54, 0.42) 0%, rgba(12, 35, 64, 0.18) 45%, transparent 72%);
  filter: blur(14px);
  z-index: 1;
  pointer-events: none;
  animation: marker-glow-pulse 3.6s ease-in-out infinite;
}

/* Grounding shadow that breathes with the float for a tactile, anchored feel */
.corridor-marker-shadow {
  position: absolute;
  bottom: -6%;
  left: 50%;
  width: 42%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38) 0%, transparent 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
  animation: marker-shadow-pulse 6s ease-in-out infinite;
}

.light-theme .corridor-marker-floating {
  opacity: 0.97;
  filter: drop-shadow(0 20px 45px rgba(255, 90, 54, 0.22));
}

.light-theme .corridor-marker-shadow {
  background: radial-gradient(ellipse at center, rgba(255, 90, 54, 0.28) 0%, transparent 70%);
}

@keyframes marker-idle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

@keyframes marker-glow-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes marker-shadow-pulse {
  0%, 100% { opacity: 0.5;  transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.28; transform: translateX(-50%) scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .corridor-marker-floating,
  .corridor-marker-glow,
  .corridor-marker-shadow {
    animation: none !important;
  }
}

@media (max-width: 991px) {
  .corridor-marker-container {
    position: relative;
    top: 0;
    margin-top: var(--space-24);
    margin-left: 0; /* reset desktop pull-toward-text offset */
    display: flex;
    justify-content: center;
    grid-column: span 1;
  }
  .corridor-marker-floating {
    width: 220px; /* Fully visible on mobile screens! */
  }
}

/* 3. Services Sticky Cargo Crate (https://res.cloudinary.com/dsdwf9lme/image/upload/v1779928714/luftrans/precious-cargo.png) */
.services-cargo-container {
  position: sticky;
  top: 20vh;
  align-self: start;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  pointer-events: none;
  z-index: 2;
  margin-right: -30px;
}

.services-cargo-floating {
  width: clamp(240px, 22vw, 340px); /* Much larger cargo box! */
  height: auto;
  opacity: 0.88;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.32));
  will-change: transform;
}

.light-theme .services-cargo-floating {
  opacity: 0.95;
  filter: drop-shadow(0 20px 45px rgba(255, 90, 54, 0.22));
}

@media (max-width: 991px) {
  .services-cargo-container {
    position: relative;
    top: 0;
    margin-block: var(--space-24);
    display: flex;
    justify-content: center;
    grid-column: span 1;
  }
  .services-cargo-floating {
    width: 180px; /* Fully visible on mobile! */
  }
}

/* 4. Two Driving Vans — cross in opposite directions on scroll (runner.png placeholder) */
.scroll-sprinter-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden !important;
}

.scroll-sprinter {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* Van A: drives right -> left — FOREGROUND: bigger, lower, in front, fully opaque, faster */
.scroll-sprinter--a {
  top: 30%;
  left: 100%;
  width: clamp(300px, 34vw, 540px);
  opacity: 1;
  z-index: 2;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.30));
}

/* Van B: drives left -> right — BACKGROUND: smaller, higher (toward the horizon), behind, hazier, slower */
.scroll-sprinter--b {
  top: 5%;
  right: 100%;
  width: clamp(130px, 14vw, 230px);
  opacity: 0.75;
  z-index: 1;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.16));
}

/* Light theme (the only active theme) — foreground grounded, background atmospherically faded back */
.light-theme .scroll-sprinter--a { filter: drop-shadow(0 30px 52px rgba(12, 35, 64, 0.22)); }
.light-theme .scroll-sprinter--b {
  filter: drop-shadow(0 12px 22px rgba(12, 35, 64, 0.14)) saturate(0.9) brightness(1.05) blur(0.6px);
}

/* ==========================================================================
   5. COOKIE CONSENT BAR
   ========================================================================== */
.cookie-consent-bar {
  position: fixed;
  bottom: var(--space-24);
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  width: min(calc(100% - var(--space-48)), 620px);
  background-color: rgba(28, 27, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: var(--space-24);
  z-index: 9999;
  box-shadow: 0 20px 50px rgba(5, 5, 6, 0.45);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s var(--ease-standard);
  opacity: 0;
  pointer-events: none;
}

.cookie-consent-bar.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-consent-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.cookie-text-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cookie-text-content h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fffaf5;
  letter-spacing: -0.01em;
}

.cookie-text-content p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 250, 245, 0.7);
  text-wrap: pretty;
}

.cookie-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-12);
}

.btn-cookie {
  min-height: 38px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--duration-transition) var(--ease-standard),
              border-color var(--duration-transition) var(--ease-standard),
              color var(--duration-transition) var(--ease-standard);
}

.btn-cookie-reject {
  background-color: transparent;
  border-color: rgba(255, 250, 245, 0.15);
  color: rgba(255, 250, 245, 0.85);
}

.btn-cookie-reject:hover {
  background-color: rgba(255, 250, 245, 0.05);
  border-color: rgba(255, 250, 245, 0.3);
}

.btn-cookie-accept {
  background-color: #fffaf5;
  color: #1C1B1A;
}

.btn-cookie-accept:hover {
  background-color: var(--color-action-brand);
  color: #fffaf5;
}

/* Light Theme Cookie Overrides */
.light-theme .cookie-consent-bar {
  background-color: rgba(245, 244, 240, 0.92);
  border: 1px solid rgba(5, 5, 6, 0.08);
  box-shadow: 0 20px 50px rgba(5, 5, 6, 0.15);
}

.light-theme .cookie-text-content h4 {
  color: #1c1b1a;
}

.light-theme .cookie-text-content p {
  color: rgba(28, 27, 26, 0.7);
}

.light-theme .btn-cookie-reject {
  border-color: rgba(28, 27, 26, 0.15);
  color: rgba(28, 27, 26, 0.85);
}

.light-theme .btn-cookie-reject:hover {
  background-color: rgba(28, 27, 26, 0.05);
}

.light-theme .btn-cookie-accept {
  background-color: #1C1B1A;
  color: #fffaf5;
}

.light-theme .btn-cookie-accept:hover {
  background-color: var(--color-action-brand);
}

@media (max-width: 580px) {
  .cookie-consent-bar {
    bottom: var(--space-16);
    padding: var(--space-16);
    width: calc(100% - var(--space-32));
  }
  
  .cookie-actions {
    flex-direction: column-reverse;
    width: 100%;
  }
  
  .btn-cookie {
    width: 100%;
    min-height: 42px;
  }
}

/* ==========================================================================
   6. FLOATING AI CHATBOT ASSISTANT
   ========================================================================== */
.chatbot-widget {
  /* Zero-footprint viewport anchor (bottom-right). Must be OUT of normal flow:
     the .fab-in-hero / .fab-hide-footer rules apply transform: translateY(60px)
     to this element, and when it was position:relative at the end of <main> that
     transform added ~60px of phantom scroll height — the empty band under the
     footer. Fixed + 0×0 keeps the fixed children (.chatbot-toggle/.chatbot-panel)
     anchored to the exact same viewport corner in both transformed and
     untransformed states, so the slide animation is preserved with no overflow. */
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  z-index: 10020;
}

/* Toggle Trigger Button */
.chatbot-toggle {
  position: fixed;
  bottom: 176px;
  width: var(--floating-action-size);
  height: var(--floating-action-size);
  border-radius: var(--radius-full);
  background-color: var(--color-action-brand);
  color: #fffaf5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(184, 91, 53, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              background-color var(--duration-transition) var(--ease-standard),
              box-shadow var(--duration-transition) var(--ease-standard);
}

.chatbot-toggle:hover {
  transform: scale(1.08) rotate(5deg);
  background-color: color-mix(in oklch, var(--color-action-brand) 90%, #ffffff);
  box-shadow: 0 15px 40px rgba(184, 91, 53, 0.45);
}

.chatbot-toggle svg {
  width: 28px;
  height: 28px;
  transition: transform 0.4s var(--ease-standard);
}

/* Chatbot Slide-out Panel */
.chatbot-panel {
  position: fixed;
  bottom: 246px;
  right: var(--space-48);
  width: 380px;
  height: 520px;
  border-radius: 20px;
  background-color: rgba(28, 27, 26, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(5, 5, 6, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}

.chatbot-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Panel Header */
.chatbot-header {
  padding: var(--space-20) var(--space-24);
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatbot-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.chatbot-status-dot {
  width: 8px;
  height: 8px;
  background-color: #4cd964;
  border-radius: var(--radius-full);
  display: inline-block;
  position: relative;
  box-shadow: 0 0 10px #4cd964;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(76, 217, 100, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(76, 217, 100, 0);
  }
}

.chatbot-header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #fffaf5;
}

.chatbot-header-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 250, 245, 0.5);
  font-weight: 500;
  margin-top: 2px;
}

.chatbot-panel-close {
  background: none;
  border: none;
  color: rgba(255, 250, 245, 0.4);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-transition) var(--ease-standard),
              transform var(--duration-transition) var(--ease-standard);
}

.chatbot-panel-close:hover {
  color: #fffaf5;
  transform: rotate(90deg);
}

/* Messages Stream */
.chatbot-messages {
  flex-grow: 1;
  padding: var(--space-24);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.chatbot-messages::-webkit-scrollbar {
  width: 4px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
}

.chatbot-message {
  max-width: 82%;
  display: flex;
  flex-direction: column;
}

.chatbot-message.bot {
  align-self: flex-start;
}

.chatbot-message.user {
  align-self: flex-end;
}

.chatbot-message .message-content {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.chatbot-message.bot .message-content {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 250, 245, 0.9);
  border-bottom-left-radius: 4px;
}

.chatbot-message.user .message-content {
  background-color: var(--color-action-brand);
  color: #fffaf5;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(184, 91, 53, 0.2);
}

/* Loading Dot Animation for bot responses */
.chatbot-loading {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-8);
}

.chatbot-loading span {
  width: 6px;
  height: 6px;
  background-color: rgba(255, 250, 245, 0.4);
  border-radius: var(--radius-full);
  display: inline-block;
  animation: chatbot-blink 1.4s infinite both;
}

.chatbot-loading span:nth-child(2) {
  animation-delay: .2s;
}

.chatbot-loading span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes chatbot-blink {
  0% {
    opacity: .2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: .2;
  }
}

/* Input Form Box */
.chatbot-input-container {
  padding: var(--space-16) var(--space-20);
  background-color: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.chatbot-input {
  flex-grow: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: #fffaf5;
  padding: 8px 0;
}

.chatbot-input::placeholder {
  color: rgba(255, 250, 245, 0.35);
}

.chatbot-submit-btn {
  background: none;
  border: none;
  color: var(--color-action-brand);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-transition) var(--ease-standard),
              transform var(--duration-transition) var(--ease-standard);
}

.chatbot-submit-btn:hover {
  color: color-mix(in oklch, var(--color-action-brand) 85%, #ffffff);
  transform: translateX(2px) scale(1.05);
}

.chatbot-submit-btn svg {
  width: 18px;
  height: 18px;
}

/* Light Theme Styling Overrides */
.light-theme .chatbot-toggle {
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(184, 91, 53, 0.25);
}

.light-theme .chatbot-panel {
  background-color: rgba(245, 244, 240, 0.92);
  border-color: rgba(5, 5, 6, 0.08);
  box-shadow: 0 30px 60px rgba(5, 5, 6, 0.18);
}

.light-theme .chatbot-header {
  background-color: rgba(0, 0, 0, 0.01);
  border-bottom-color: rgba(5, 5, 6, 0.05);
}

.light-theme .chatbot-header-title {
  color: #1C1B1A;
}

.light-theme .chatbot-header-subtitle {
  color: rgba(28, 27, 26, 0.5);
}

.light-theme .chatbot-panel-close {
  color: rgba(28, 27, 26, 0.4);
}

.light-theme .chatbot-panel-close:hover {
  color: #1C1B1A;
}

.light-theme .chatbot-messages::-webkit-scrollbar-thumb {
  background-color: rgba(5, 5, 6, 0.08);
}

.light-theme .chatbot-message.bot .message-content {
  background-color: rgba(0, 0, 0, 0.03);
  border-color: rgba(5, 5, 6, 0.04);
  color: rgba(28, 27, 26, 0.85);
}

.light-theme .chatbot-message.user .message-content {
  background-color: var(--color-action-brand);
  color: #fffaf5;
}

.light-theme .chatbot-loading span {
  background-color: rgba(28, 27, 26, 0.4);
}

.light-theme .chatbot-input-container {
  background-color: rgba(0, 0, 0, 0.02);
  border-top-color: rgba(5, 5, 6, 0.05);
}

.light-theme .chatbot-input {
  color: #1C1B1A;
}

.light-theme .chatbot-input::placeholder {
  color: rgba(28, 27, 26, 0.4);
}

/* ==========================================================================
   MOBILE & TABLET ADAPTATION
   ========================================================================== */
@media (max-width: 991px) {
  .chatbot-toggle {
    --floating-action-size: 48px;
    bottom: 152px;
    right: var(--space-24);
  }
  
  .chatbot-panel {
    bottom: 214px;
    right: var(--space-24);
    width: 340px;
    height: 440px;
  }
}

@media (max-width: 580px) {
  .chatbot-toggle {
    bottom: 136px;
    right: var(--space-16);
  }
  
  .chatbot-panel {
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    z-index: 10000;
  }
  
  .chatbot-panel.active {
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   v1.6.0 RESPONSIVE LAYOUT OVERRIDES & MOBILE STICKY REMOVAL
   ========================================================================== */
@media (max-width: 991px) {
  /* 1. Disable sticky positioning and scroll-locking on mobile */
  .corridor-text,
  .corridor-stats,
  .faq-header {
    position: relative !important;
    top: 0 !important;
    align-self: stretch !important;
  }

  /* 2. Integrate and position Corridor Route Marker Pin as top-right location badge on mobile */
  .corridor-container {
    position: relative !important;
  }
  .corridor-marker-container {
    position: absolute !important;
    top: 20px !important;
    right: 15px !important;
    width: 120px !important;
    height: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    z-index: 10 !important;
    margin: 0 !important;
    grid-column: auto !important;
  }
  .corridor-marker-floating {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)) !important;
  }

  /* 3. Integrate and position Services Cargo Crate as top-right service badge on mobile */
  .services-container {
    position: relative !important;
  }
  .services-cargo-container {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    width: 100px !important;
    height: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    pointer-events: none !important;
    z-index: 10 !important;
    margin: 0 !important;
    grid-column: auto !important;
  }
  .services-cargo-floating {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)) !important;
  }

  /* 4. Fix mobile navigation menu scroll and prevent bottom-cropping */
  .mobile-menu-overlay {
    padding-top: 90px !important;
    justify-content: flex-start !important;
  }
  .mobile-menu-controls {
    margin-top: var(--space-32) !important; /* natural flow, avoids flex height cropping */
    padding-bottom: var(--space-48) !important; /* padding buffer at the end of scrollable area */
  }
}

/* 5. Hide floating buttons when mobile navigation menu is active */
.floating-phone-btn,
.floating-social-dock,
.chatbot-widget {
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease !important;
}

.mobile-menu-overlay.active ~ .floating-phone-btn,
.mobile-menu-overlay.active ~ .floating-social-dock,
.mobile-menu-overlay.active ~ .chatbot-widget {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: scale(0.9) translateY(10px) !important;
}

/* ==========================================================================
   MASTERPIECE ENHANCEMENT LAYER (2026-05-29)
   Premium, colorful card system + gradient accents — dark & light themes.
   Appended last so it layers cleanly over the base rules.
   ========================================================================== */

/* ---- Per-card accent variables ------------------------------------------- */
.services-grid .service-card:nth-child(1) { --card-accent: #0C2340; --card-accent-2: #1E4E8C; }
.services-grid .service-card:nth-child(2) { --card-accent: #FF5A36; --card-accent-2: #FF8A5E; }
.services-grid .service-card:nth-child(3) { --card-accent: #0C2340; --card-accent-2: #1E4E8C; }
.services-grid .service-card:nth-child(4) { --card-accent: #FF5A36; --card-accent-2: #FF8A5E; }
.services-grid .service-card:nth-child(5) { --card-accent: #0C2340; --card-accent-2: #1E4E8C; }
.services-grid .service-card:nth-child(6) { --card-accent: #FF5A36; --card-accent-2: #FF8A5E; }
.compliance-grid .compliance-card:nth-child(1) { --card-accent: #0C2340; --card-accent-2: #1E4E8C; }
.compliance-grid .compliance-card:nth-child(2) { --card-accent: #FF5A36; --card-accent-2: #FF8A5E; }
.compliance-grid .compliance-card:nth-child(3) { --card-accent: #FF5A36; --card-accent-2: #FF8A5E; }
.compliance-grid .compliance-card:nth-child(4) { --card-accent: #0C2340; --card-accent-2: #1E4E8C; }

/* ---- Shared premium card mechanics --------------------------------------- */
.service-card,
.compliance-card {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(160deg,
                      color-mix(in srgb, var(--card-accent, #0C2340) 6%, transparent) 0%,
                      transparent 42%);
}

/* Ambient colored bloom in the top-right corner — reveals on hover */
.service-card::after,
.compliance-card::after {
  content: '';
  position: absolute;
  top: -45%;
  right: -25%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle,
                color-mix(in srgb, var(--card-accent, #0C2340) 55%, transparent) 0%,
                transparent 68%);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--duration-transition) var(--ease-standard),
              transform var(--duration-transition) var(--ease-standard);
  pointer-events: none;
  z-index: -1;
}
.service-card:hover::after,
.compliance-card:hover::after {
  opacity: 0.18;
  transform: scale(1);
}
.light-theme .service-card:hover::after,
.light-theme .compliance-card:hover::after {
  opacity: 0.12;
}

/* ---- Gradient icon tiles -------------------------------------------------- */
.service-icon,
.compliance-card-icon {
  background-image: linear-gradient(135deg,
                      color-mix(in srgb, var(--card-accent, #0C2340) 24%, transparent),
                      color-mix(in srgb, var(--card-accent-2, var(--card-accent, #0C2340)) 8%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--card-accent, #0C2340) 28%, transparent);
  color: var(--card-accent, #0C2340) !important;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--card-accent, #0C2340) 60%, transparent);
  transition: transform var(--duration-transition) var(--ease-elastic),
              box-shadow var(--duration-transition) var(--ease-standard);
}
.service-card:hover .service-icon,
.compliance-card:hover .compliance-card-icon {
  transform: translateY(-2px) scale(1.06) rotate(-2deg);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--card-accent, #0C2340) 75%, transparent);
}

/* Brighten icon glyph slightly in light theme for contrast */
.light-theme .service-icon,
.light-theme .compliance-card-icon {
  color: color-mix(in srgb, var(--card-accent, #0C2340) 82%, #1C1B1A) !important;
}

/* ---- Compliance cards: distinct accent per card -------------------------- */
.compliance-card:hover {
  border-color: var(--card-accent, #0C2340) !important;
  box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--card-accent, #0C2340) 55%, transparent) !important;
}
.compliance-grid .compliance-card {
  border-top: 2px solid color-mix(in srgb, var(--card-accent, #0C2340) 35%, transparent);
}

/* Service feature bullets follow each card's accent */
.services-grid .service-card .service-features li::before {
  color: var(--card-accent, var(--color-action-accent));
}

/* ---- Solid stat numbers ---- */
.stat-number,
.corridor-stat-number {
  color: var(--color-action-brand) !important;
}
.light-theme .stat-number,
.light-theme .corridor-stat-number {
  color: var(--color-action-brand) !important;
}

/* ==========================================================================
   MOBILE EXPERIENCE ENHANCEMENT LAYER (2026-05-29)
   Additive only — bigger tap targets, iOS-safe inputs, comfortable rhythm.
   Nothing removed; layers over existing responsive rules.
   ========================================================================== */
@media (max-width: 991px) {
  /* --- Touch-friendly tap targets (WCAG 2.5.5 / Apple 44px min) --- */
  .mobile-link {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.01em;
  }
  .mobile-lang-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .btn-action,
  .btn-primary,
  .btn-secondary,
  .next-step-btn,
  .prev-step-btn,
  .form-submit-btn,
  .slick-lang-trigger,
  .theme-toggle-btn {
    min-height: 52px;
  }

  /* --- iOS: 16px inputs prevent auto-zoom on focus --- */
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px !important;
    min-height: 52px;
  }
  .contact-form textarea {
    min-height: 110px;
  }

  /* --- Form navigation buttons: comfortable, full-width pair --- */
  .next-step-btn,
  .prev-step-btn,
  .form-submit-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* --- Service selection cards: larger touch surface --- */
  .category-card-option {
    min-height: 64px;
  }

  /* --- FAQ rows: easier to tap, more breathing room --- */
  .faq-question {
    min-height: 56px;
    padding-block: var(--space-16);
  }

  /* --- Card comfort: richer padding & always-visible accent on mobile --- */
  .service-card,
  .compliance-card {
    padding: var(--space-32) var(--space-24);
  }
  /* Touch devices can't hover — keep the colored bloom subtly present */
  .service-card::after,
  .compliance-card::after {
    opacity: 0.10;
    transform: scale(0.95);
  }
  .service-icon,
  .compliance-card-icon {
    width: 52px;
    height: 52px;
  }

  /* --- Readability: slightly more generous body line-height on mobile --- */
  .service-description,
  .compliance-card p,
  .faq-answer {
    line-height: 1.7;
  }

  /* --- Floating actions clear the iOS home indicator --- */
  .floating-phone-btn {
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .floating-social-dock {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Small phones: tighten rhythm, scale headings, ensure no overflow --- */
@media (max-width: 580px) {
  .services-grid,
  .compliance-grid {
    gap: var(--space-16);
  }
  .service-name {
    font-size: 1.25rem;
  }
  .service-card,
  .compliance-card {
    padding: var(--space-24) var(--space-20, 20px);
    border-radius: var(--radius-lg);
  }
  /* Primary conversion buttons span full width for thumb reach */
  .btn-action,
  .form-submit-btn,
  #success-reset-btn {
    width: 100%;
    justify-content: center;
  }
  /* Guard against accidental horizontal scroll from glows/gradients */
  .service-card,
  .compliance-card {
    overflow: hidden;
  }
}

/* ==========================================================================
   FAB + MENU REFINEMENT LAYER (2026-05-29b)
   - Hide floating buttons whenever the nav menu is open (mobile & desktop)
   - In-menu action dock (mirrors floating buttons while menu is open)
   - Proper spacing between floating buttons on mobile
   - Cargo crate sits in empty space on mobile (no text overlap)
   Appended last so it authoritatively layers over earlier rules.
   ========================================================================== */

/* ---- 1. Floating button visibility (class-driven) ----------------------- */
/* Symmetric smooth fade/slide for BOTH show and hide.
   Key detail: `visibility` is part of the transition. On reveal it flips to
   visible instantly (0s delay) so the fade-in is seen; on hide it is delayed
   by the full duration so the element stays painted while it fades + slides
   out — fixing the previous "instant disappear" (visibility used to snap to
   hidden immediately, cutting the exit animation). */
.floating-phone-btn,
.floating-social-dock,
.chatbot-toggle,
.chatbot-widget {
  transition: opacity 0.5s var(--ease-standard, ease),
              transform 0.6s var(--ease-elastic, cubic-bezier(0.16, 1, 0.3, 1)),
              visibility 0s linear 0s !important;
}

/* Scroll-down hide & footer hide — all devices.
   Slide + fade (preserves the existing scroll-down-hide / scroll-up-reveal feel). */
body.fab-hide-scroll .floating-phone-btn,
body.fab-hide-scroll .floating-social-dock,
body.fab-hide-scroll .chatbot-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(60px) !important;
  transition: opacity 0.5s var(--ease-standard, ease),
              transform 0.6s var(--ease-elastic, cubic-bezier(0.16, 1, 0.3, 1)),
              visibility 0s linear 0.6s !important;
}

body.fab-hide-footer .floating-phone-btn,
body.fab-hide-footer .floating-social-dock,
body.fab-hide-footer .chatbot-widget,
body.fab-in-hero .floating-phone-btn,
body.fab-in-hero .floating-social-dock,
body.fab-in-hero .chatbot-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(60px) !important;
  transition: opacity 0.5s var(--ease-standard, ease),
              transform 0.6s var(--ease-elastic, cubic-bezier(0.16, 1, 0.3, 1)),
              visibility 0s linear 0.6s !important;
}

/* Menu open — hide the whole floating set on all viewports. */
body.menu-open .floating-phone-btn,
body.menu-open .floating-social-dock,
body.menu-open .chatbot-widget {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.95) !important;
  transition: opacity 0.5s var(--ease-standard, ease),
              transform 0.6s var(--ease-elastic, cubic-bezier(0.16, 1, 0.3, 1)),
              visibility 0s linear 0.6s !important;
}

/* ---- 2. In-menu action dock --------------------------------------------- */
.menu-action-dock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12, 12px);
}

.menu-action-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-communicator-text);
  background-color: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  text-decoration: none;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.2s var(--ease-standard),
              background-color 0.25s var(--ease-standard),
              color 0.25s var(--ease-standard),
              box-shadow 0.25s var(--ease-standard);
}

.menu-action-btn svg {
  width: 22px;
  height: 22px;
}

.menu-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(5, 5, 6, 0.22);
}

.menu-action-btn:active {
  transform: scale(0.92);
}

.menu-action-btn.call {
  background-color: var(--color-action-accent);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 22px rgba(255, 90, 54, 0.32);
}

.menu-action-btn.chat {
  background-color: var(--color-action-brand);
  color: #fffaf5;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 22px rgba(184, 91, 53, 0.30);
}

.menu-action-btn.wa:hover { color: #25D366; }
.menu-action-btn.ig:hover { color: #E1306C; }
.menu-action-btn.fb:hover { color: #1877F2; }

/* ---- 3. Floating button spacing on mobile (proper gaps) ------------------ */
@media (max-width: 991px) {
  .floating-social-dock,
  .chatbot-toggle {
    display: none !important;
  }
  .floating-phone-btn {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    right: 24px !important;
  }

  /* Pure FADE in/out on mobile — no translateY slide. The fab-hide states used
     transform: translateY(60px), which made the button visibly slide as it
     showed/hid. Pinning the transform to none keeps it perfectly still at the
     bottom-right and lets only opacity animate (smooth fade in / fade out). */
  body.fab-in-hero .floating-phone-btn,
  body.fab-hide-footer .floating-phone-btn,
  body.fab-hide-scroll .floating-phone-btn,
  body.menu-open .floating-phone-btn {
    transform: none !important;
  }
}

@media (max-width: 580px) {
  .floating-phone-btn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }

  /* The phone button stays pinned bottom-right even while the cookie bar is up.
     The old rule lifted it to 150px, so when consent resolved it dropped back
     down — that visible jump is the "relocates to another position" report. */
  .has-cookies-bar .floating-phone-btn {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---- 4. Cargo crate sits in empty space on mobile (no text overlap) ------ */
@media (max-width: 991px) {
  .services-cargo-container {
    top: 0 !important;
    right: 8px !important;
    width: 86px !important;
  }
  .services-header .services-title {
    margin-top: 78px !important;
  }
}

@media (max-width: 420px) {
  .services-cargo-container {
    width: 76px !important;
  }
  .services-header .services-title {
    margin-top: 70px !important;
  }
}

/* ==========================================================================
   COMPACT MOBILE NAV MENU (2026-05-29c)
   Phones only (<=767px). Tablet / desktop / bigger displays keep the
   existing roomy layout untouched.
   ========================================================================== */
@media (max-width: 767px) {
  .mobile-menu-overlay {
    gap: 18px !important;
    padding-top: 72px !important;
    padding-bottom: 20px !important;
  }

  /* Navigation links: tighter rhythm, smaller type (still >=44px tap target) */
  .mobile-nav-links {
    gap: 4px !important;
  }
  .mobile-link {
    font-size: 1.4rem !important;
    min-height: 44px !important;
  }

  /* Controls block sits closer to the nav links */
  .mobile-menu-controls {
    gap: 14px !important;
    padding-top: 16px !important;
    margin-top: 18px !important;
  }

  /* Language grid: denser */
  .mobile-lang-grid {
    gap: 6px !important;
    margin-top: 0 !important;
  }
  .mobile-lang-btn {
    min-height: 40px !important;
    padding: 7px 4px !important;
    font-size: 0.64rem !important;
    gap: 4px !important;
  }
  .mobile-flag-icon {
    width: 19px !important;
    height: 12px !important;
  }

  /* In-menu action dock: smaller circles */
  .menu-action-dock {
    gap: 10px !important;
  }
  .menu-action-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .menu-action-btn svg {
    width: 19px !important;
    height: 19px !important;
  }

  .mobile-menu-footer {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }
}

/* ==========================================================================
   NEW PROCESS STRIP & ABOUT SECTION STYLES
   ========================================================================== */
.process-section {
  padding: var(--space-96) var(--space-48);
  background-color: var(--color-neutral-bg);
  border-top: 1px solid var(--color-anchor-border);
}

.process-container {
  max-width: 1440px;
  margin: 0 auto;
}

.process-subtitle {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.process-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-top: var(--space-12);
  margin-bottom: var(--space-48);
  letter-spacing: -0.02em;
}

.process-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-24);
}

.process-step-item {
  position: relative;
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--duration-micro) var(--ease-standard);
}

.process-step-item:hover {
  border-color: var(--color-action-brand);
}

.process-step-num {
  width: 36px;
  height: 36px;
  background: var(--gradient-sunset);
  color: #FFFFFF;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.process-step-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.process-step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-communicator-text);
}

.process-step-desc {
  font-size: 0.88rem;
  color: var(--color-communicator-muted);
  line-height: 1.5;
}

/* About / History block */
.about-block-section {
  padding: var(--space-96) var(--space-48);
  background-color: var(--color-neutral-bg);
  border-top: 1px solid var(--color-anchor-border);
}

.about-block-container {
  max-width: 1440px;
  margin: 0 auto;
}

.about-block-content {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about-subtitle {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-action-brand);
  text-transform: uppercase;
}

.about-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.about-body {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-communicator-muted);
}

.about-link-wrapper {
  margin-top: var(--space-8);
}

.about-link {
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid var(--color-action-brand);
  padding-bottom: 4px;
  transition: color var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard);
}

.about-link:hover {
  color: var(--color-action-brand);
  border-color: var(--color-action-accent);
}

/* Simplified Contact Form Overrides */
.contact-form.simple-form {
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-form.simple-form input,
.contact-form.simple-form select,
.contact-form.simple-form textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-anchor-border);
  color: var(--color-communicator-text);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color var(--duration-micro) var(--ease-standard), background-color var(--duration-micro) var(--ease-standard);
}

.light-theme .contact-form.simple-form input,
.light-theme .contact-form.simple-form select,
.light-theme .contact-form.simple-form textarea {
  background-color: rgba(0, 0, 0, 0.02);
}

.contact-form.simple-form input:focus,
.contact-form.simple-form select:focus,
.contact-form.simple-form textarea:focus {
  outline: none;
  border-color: var(--color-action-brand);
  background-color: rgba(255, 255, 255, 0.04);
}

.light-theme .contact-form.simple-form input:focus,
.light-theme .contact-form.simple-form select:focus,
.light-theme .contact-form.simple-form textarea:focus {
  background-color: rgba(0, 0, 0, 0.04);
}

.contact-form.simple-form select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A29F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 16px;
  padding-right: 48px;
}

.contact-form.simple-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
  color: var(--color-communicator-muted);
  letter-spacing: 0.02em;
}

/* Simplified Interactive Modals Overrides */
.svc-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 5, 6, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-transition) var(--ease-standard),
              visibility var(--duration-transition) var(--ease-standard);
}

.svc-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.svc-modal {
  position: relative;
  width: min(580px, 100%);
  background-color: rgba(18, 18, 20, 0.85);
  border: 1px solid var(--color-anchor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-48);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  outline: none;
  opacity: 0;
  transform: scale(0.96);
  max-height: 90vh;
  overflow-y: auto;
}

.light-theme .svc-modal {
  background-color: rgba(245, 244, 240, 0.9);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.08);
}

.svc-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: var(--color-communicator-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-anchor-border);
  transition: all var(--duration-micro) var(--ease-standard);
}

.svc-modal-close:hover {
  color: var(--color-communicator-text);
  border-color: var(--color-action-brand);
  background-color: var(--color-support-surface);
}

.svc-modal-close svg {
  width: 16px;
  height: 16px;
}

.svc-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.svc-modal-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(12, 35, 64, 0.1);
  border: 1px solid rgba(12, 35, 64, 0.2);
  color: var(--color-action-brand);
  border-radius: var(--radius-lg);
}

.svc-modal-icon svg {
  width: 26px;
  height: 26px;
}

.svc-modal-title {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-communicator-text);
  margin-top: var(--space-8);
}

.svc-modal-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-communicator-muted);
}

.svc-modal-timeline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
  margin-bottom: var(--space-20);
  padding: 6px 12px;
  background: color-mix(in oklch, var(--svc-accent) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--svc-accent) 20%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.svc-timeline-icon {
  width: 16px;
  height: 16px;
  color: var(--svc-accent);
  flex-shrink: 0;
}
.svc-timeline-label {
  font-weight: 500;
  color: var(--color-communicator-muted);
}
.svc-timeline-value {
  font-weight: 700;
  color: var(--svc-accent);
}

.light-theme .svc-modal-timeline {
  background: color-mix(in oklch, var(--svc-accent) 6%, #fff);
  border-color: color-mix(in oklch, var(--svc-accent) 15%, transparent);
}

.svc-modal-footnote {
  font-size: 0.8rem;
  color: var(--color-communicator-muted);
  font-style: italic;
  opacity: 0.8;
  border-top: 1px solid var(--color-anchor-border);
  padding-top: var(--space-12);
}

.svc-modal-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .process-strip {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}

@media (max-width: 767px) {
  .process-section,
  .about-block-section {
    padding: var(--space-64) var(--space-24);
  }
  
  .svc-modal {
    padding: var(--space-32) var(--space-24);
  }
  
  .svc-modal-title {
    font-size: 1.35rem;
  }
  
  .svc-modal-desc {
    font-size: 0.95rem;
  }
}

/* Sticky About block layout and overrides */
.about-block-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

@media (min-width: 992px) {
  .about-block-container {
    grid-template-columns: 0.9fr 1.1fr; /* Two columns split */
    gap: var(--space-80);
    align-items: flex-start;
  }
}

.about-block-sticky-visual {
  position: relative;
  background: var(--color-support-surface);
  border: 1px solid var(--color-anchor-border);
  padding: var(--space-48) var(--space-32);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow: hidden;
  align-self: start;
}

@media (min-width: 992px) {
  .about-block-sticky-visual {
    position: sticky;
    top: 120px; /* Sticks on desktop scroll */
  }
}

.about-block-sticky-visual::before {
  content: '';
  position: absolute;
  top: -30%; right: -30%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(12, 35, 64, 0.12) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.about-visual-number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-action-brand);
  z-index: 1;
}

.about-visual-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-communicator-text);
  z-index: 1;
  text-transform: uppercase;
}

.about-visual-sub {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-communicator-muted);
  z-index: 1;
  margin-top: var(--space-8);
}

/* Compact Contact Form Grid Layout */
.form-grid-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  width: 100%;
}

@media (min-width: 768px) {
  .form-grid-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }
}

/* Slicker form modifications */
.contact-form.simple-form {
  padding: var(--space-24) !important; /* Tighter padding for a more compact card */
  gap: var(--space-16) !important; /* Smaller gap between form groups */
}

.contact-form.simple-form .form-group label {
  font-size: 0.7rem; /* Tiny labels */
  margin-bottom: 2px;
}

.contact-form.simple-form input,
.contact-form.simple-form select,
.contact-form.simple-form textarea {
  padding: 11px 15px !important; /* Tighter inputs padding */
  font-size: 0.9rem !important;
}

.contact-form.simple-form textarea {
  min-height: 80px; /* Reduce message height */
}

.contact-form.simple-form .step-actions {
  margin-top: var(--space-12) !important;
}

/* ==========================================================================
   MINIMALIST DE-CARDIZATION RESETS (Removing all card frames except footer)
   ========================================================================== */

/* 1. Hero Text Container Reset (Float text cleanly) */
.hero-text-content,
.light-theme .hero-text-content {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. Hero Canvas Overlay Vignette for Readability */
.hero-canvas-overlay,
.light-theme .hero-canvas-overlay {
  position: absolute;
  inset: 0;
  background: transparent !important;
  z-index: 1;
}

@media (max-width: 991px) {
  .hero-text-content,
  .light-theme .hero-text-content {
    padding: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .hero-text-content .hero-title {
    color: #1C1B1A !important;
  }
  .hero-text-content .hero-description {
    color: #55534F !important;
  }
  .hero-text-content .heritage-badge {
    background-color: rgba(12, 35, 64, 0.08) !important;
    border-color: rgba(12, 35, 64, 0.25) !important;
    color: var(--color-action-brand) !important;
  }
  .hero-text-content .heritage-badge .badge-dot {
    background-color: var(--color-action-brand) !important;
  }
  .hero-canvas-overlay,
  .light-theme .hero-canvas-overlay {
    background: transparent !important;
  }
}



/* 4. Process Step Items De-cardization */
.process-step-item,
.light-theme .process-step-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-16) 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.process-step-item:hover {
  border-color: transparent !important;
}

/* 5. About Visual Experience Badge De-cardization */
.about-block-sticky-visual,
.light-theme .about-block-sticky-visual {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.about-block-sticky-visual::before {
  display: none !important;
}

/* 6. Contact Form Wrapper & Container De-cardization */
.contact-form-wrapper,
.light-theme .contact-form-wrapper,
.contact-form.simple-form,
.light-theme .contact-form.simple-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 8. Coverflow: reduced-motion users get instant card swaps, no autoplay drift */
@media (prefers-reduced-motion: reduce) {
  .coverflow-card,
  .coverflow-card::after,
  .coverflow-card .gallery-card-label {
    transition: none !important;
  }
}

/* 7. FAQ Accordion Items De-cardization */
.faq-item,
.light-theme .faq-item {
  border: none !important;
  border-bottom: 1px solid var(--color-anchor-border) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.faq-item[open] {
  border-bottom-color: var(--color-action-brand) !important;
}

.faq-question {
  padding: var(--space-24) 0 !important;
}

.faq-answer {
  padding: 0 0 var(--space-24) 0 !important;
}

/* About Visual Industrial Logo */
.about-visual-logo-wrapper {
  margin-top: var(--space-20);
  display: flex;
  align-items: center;
  z-index: 1;
}

.about-visual-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

/* Ensure only the phone button is shown as a floating button on mobile and positioned properly */
@media (max-width: 991px) {
  .floating-social-dock,
  .chatbot-toggle {
    display: none !important;
  }
  
  .floating-phone-btn {
    display: flex !important;
    position: fixed !important;
    right: 24px !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99999 !important;
  }
}

@media (max-width: 580px) {
  .floating-phone-btn {
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .has-cookies-bar .floating-phone-btn {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   v2.7.0 TYPOGRAPHIC POLISH — orphan control on long prose
   ========================================================================== */
.about-body,
.faq-answer p,
.ba-intro,
.contact-desc,
.cta-band-body,
.footer-motto {
  text-wrap: pretty;
}

.ba-intro {
  margin-inline: auto; /* centered header needs the capped intro centered too */
}

/* ==========================================================================
   v2.9.1 CONTACT FORM — premium re-card + brand colour
   (deliberately last in source order, scoped via .contact-section to outrank
   the earlier "de-cardization" !important resets)
   ========================================================================== */
.contact-section .contact-form-wrapper {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid rgba(12, 35, 64, 0.10) !important;
  border-radius: var(--radius-lg, 20px) !important;
  box-shadow: 0 24px 60px rgba(12, 35, 64, 0.12) !important;
  padding: 0 !important;
  overflow: hidden;
}
/* sunset accent cap along the top edge of the card */
.contact-section .contact-form-wrapper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-sunset);
  z-index: 2;
}
.contact-section .contact-form.simple-form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: var(--space-32) !important;
}

/* Labels — brand navy, legible */
.contact-section .contact-form.simple-form .form-group label,
.contact-section .contact-form.simple-form label {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--color-action-brand, #0C2340) !important;
  margin-bottom: 6px !important;
}

/* Inputs — white, brand-tinted border, coral focus ring */
.contact-section .contact-form.simple-form input,
.contact-section .contact-form.simple-form select,
.contact-section .contact-form.simple-form textarea {
  background-color: #FFFFFF !important;
  color: #1C1B1A !important;
  border: 2px solid rgba(12, 35, 64, 0.14) !important;
  border-radius: 14px !important;
  padding: 13px 16px !important;
  font-size: 0.95rem !important;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(12, 35, 64, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}
.contact-section .contact-form.simple-form input::placeholder,
.contact-section .contact-form.simple-form textarea::placeholder {
  color: #9A9893 !important;
}
.contact-section .contact-form.simple-form input:hover,
.contact-section .contact-form.simple-form select:hover,
.contact-section .contact-form.simple-form textarea:hover {
  border-color: rgba(12, 35, 64, 0.30) !important;
}
.contact-section .contact-form.simple-form input:focus,
.contact-section .contact-form.simple-form select:focus,
.contact-section .contact-form.simple-form textarea:focus {
  outline: none;
  border-color: var(--color-action-accent, #FF5A36) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.12) !important;
  background-color: #FFFFFF !important;
}

/* Submit — full-width sunset gradient */
.contact-section .contact-form.simple-form .form-submit-btn {
  width: 100%;
  background: var(--gradient-sunset) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 26px rgba(255, 90, 54, 0.30) !important;
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.contact-section .contact-form.simple-form .form-submit-btn:hover {
  filter: saturate(1.1) brightness(1.04);
  transform: translateY(-2px);
}

/* Contact detail chips — coloured labels + accented links */
.contact-section .contact-link-label {
  display: inline-flex;
  align-items: center;
  background: rgba(12, 35, 64, 0.07);
  color: var(--color-action-brand, #0C2340);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-right: 10px;
  border: none;
}
.contact-section .contact-link {
  color: var(--color-action-brand, #0C2340) !important;
  font-weight: 700;
  transition: color 0.2s ease;
}
.contact-section .contact-link:hover {
  color: var(--color-action-accent, #FF5A36) !important;
}
.contact-section .contact-region-text {
  color: var(--color-action-brand, #0C2340);
  font-weight: 700;
}