/* ==========================================================================
   EAGLE EYE LOGICRAFT PRIVATE LIMITED
   Design System & Main Stylesheet - Enterprise Edition
   Premium Global Freight Forwarding & Project Cargo Logistics
   ========================================================================== */

/* Google Fonts: Plus Jakarta Sans, Inter & JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* --- CSS Variables & Design Tokens --- */
:root {
  /* Core Colors - Spedition India Palette */
  --primary: #008DD2;
  --primary-light: #34CCFF;
  --primary-hover: #007BB8;
  --navy: #1B365D;
  --navy-dark: #171B26;
  --navy-card: #202636;
  --orange: #F4524D;
  --orange-hover: #DE3B36;
  --orange-light: rgba(244, 82, 77, 0.12);
  --orange-glow: rgba(244, 82, 77, 0.35);
  --cyan-accent: #34CCFF;
  --spedition-green: #1FD87C;

  /* Surfaces & Backgrounds */
  --background: #FFFFFF;
  --light-bg: #F8FAFC;
  --section-alt: #F0F6FA;
  --light-card: #FFFFFF;
  --blueprint-bg: #F1F6FA;

  /* Text & Borders */
  --dark-text: #0F172A;
  --secondary-text: #334155;
  --muted-text: #64748B;
  --border: #E2E8F0;
  --border-dark: rgba(27, 54, 93, 0.12);
  --border-focus: #008DD2;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Spacing & Layout */
  --container-width: 1340px;
  --header-height: 84px;
  --header-scrolled-height: 70px;
  --section-spacing: clamp(75px, 8vw, 120px);
  --section-spacing-sm: clamp(45px, 5vw, 70px);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows - Refined for Light Elevation */
  --shadow-sm: 0 2px 8px rgba(8, 43, 58, 0.04);
  --shadow-md: 0 6px 20px rgba(8, 43, 58, 0.07);
  --shadow-lg: 0 16px 36px rgba(8, 43, 58, 0.10);
  --shadow-xl: 0 24px 50px rgba(8, 43, 58, 0.14);
  --shadow-orange: 0 8px 25px rgba(244, 123, 32, 0.3);

  /* Precision Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* --- Base Reset & Box Sizing --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[id] {
  scroll-margin-top: 100px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dark-text);
  background-color: var(--background);
  overflow-x: hidden;
  position: relative;
}

/* Accessibility: Skip to Content */
.skip-link {
  position: absolute;
  top: -60px;
  left: 20px;
  padding: 12px 20px;
  background: var(--orange);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  z-index: 9999;
  border-radius: var(--radius-xs);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 15px;
  outline: 3px solid #FFFFFF;
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

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

/* Selection */
::selection {
  background-color: var(--orange);
  color: #FFFFFF;
}

/* Image defaults */
img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Typography Elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.18;
  color: var(--navy);
  letter-spacing: -0.02em;
}

p {
  color: var(--secondary-text);
  margin-bottom: 1rem;
}

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

/* --- Layout Containers --- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-fluid {
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
}

.section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
  position: relative;
}

.section-light {
  background-color: var(--light-bg);
}

.section-dark {
  background-color: var(--light-bg);
  color: var(--dark-text);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark .section-title {
  color: var(--navy);
}

.section-dark p {
  color: var(--secondary-text);
}

/* --- Harmonic Light Rhythm Section Backgrounds --- */
#cargo-simulator.cargo-simulator-section {
  background-color: #F0F6FA;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

#process {
  background: linear-gradient(180deg, #F0F7FD 0%, #F8FAFC 100%);
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

#freight-forwarding {
  background-color: #F2F7FA;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

#network-map,
.map-section {
  background-color: #EEF4F8;
}

#faq-engineering {
  background-color: #F1F6FA;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

#our-approach {
  background-color: #F0F6FA;
}

#safety-coordination {
  background: linear-gradient(180deg, #F0F7FD 0%, #F8FAFC 100%);
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

/* --- Industrial Blueprint Dividers --- */
.blueprint-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blueprint-divider::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--background);
  border: 2px solid var(--orange);
  transform: rotate(45deg);
}

.blueprint-divider-dark {
  background: var(--border);
}

.blueprint-divider-dark::before {
  background: var(--light-bg);
  border-color: var(--orange);
}

/* --- Technical Badges & Eyebrows --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background-color: var(--orange);
}

.eyebrow-dark {
  color: var(--orange);
}

.tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(7, 89, 133, 0.08);
  color: var(--primary);
  border: 1px solid rgba(7, 89, 133, 0.2);
  border-radius: var(--radius-xs);
}

.tech-tag-orange {
  background: rgba(244, 123, 32, 0.12);
  color: var(--orange);
  border-color: rgba(244, 123, 32, 0.3);
}

.tech-tag-white {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Section Header Structure */
.section-header {
  margin-bottom: 56px;
  max-width: 820px;
}

.section-header.text-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header.text-center .eyebrow {
  justify-content: center;
}

.section-header.text-center .eyebrow::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background-color: var(--orange);
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.625rem);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--secondary-text);
  font-weight: 400;
  line-height: 1.6;
}

.section-dark .section-subtitle {
  color: var(--secondary-text);
}

/* --- Buttons & CTAs --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--orange);
  color: #FFFFFF;
  border-color: var(--orange);
  box-shadow: 0 4px 14px rgba(244, 123, 32, 0.25);
}

.btn-primary:hover {
  background-color: var(--orange-hover);
  border-color: var(--orange-hover);
  box-shadow: var(--shadow-orange);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.btn-secondary {
  background-color: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.btn-secondary:hover {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 89, 133, 0.25);
}

.btn-outline {
  background-color: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn-outline:hover {
  background-color: var(--navy);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-outline-white {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-outline-white:hover {
  background-color: #FFFFFF;
  color: var(--navy);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-sm {
  padding: 11px 22px;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 18px 36px;
  font-size: 1rem;
}

.btn .btn-icon {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn:hover .btn-icon {
  transform: translateX(4px);
}

/* --- Elevated Header & Navigation System --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all var(--transition-normal);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 2px 14px rgba(8, 43, 58, 0.04);
}

/* Top Aerospace Laser Edge */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #1B365D 0%, #008DD2 40%, #34CCFF 70%, #F4524D 100%);
  z-index: 1005;
}

/* Top Utility Command Bar - Spedition India Gradient */
.header-top-bar {
  background: linear-gradient(to right, #1B365D 0%, #008DD2 60%, #00C1CF 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  color: #FFFFFF;
  padding: 8px 0;
  transition: margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, max-height 0.35s ease;
  max-height: 44px;
  overflow: hidden;
}

.header-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #CBD5E1;
}

.top-bar-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  background: rgba(244, 123, 32, 0.18);
  border: 1px solid rgba(244, 123, 32, 0.4);
  border-radius: var(--radius-xs);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.top-bar-status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: pulse-green 2s infinite;
  flex-shrink: 0;
}

.top-bar-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 0.75rem;
}

.top-bar-clock {
  color: #38BDF8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.top-bar-clock svg {
  color: var(--orange);
}

.top-bar-corridors {
  color: #CBD5E1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-bar-corridors svg {
  color: #38BDF8;
}

.top-bar-link {
  color: #38BDF8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.top-bar-link:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
}

.top-bar-link svg {
  color: var(--orange);
}

.top-bar-link:hover svg {
  color: #FFFFFF;
}

/* Main Navigation Bar */
.header-main {
  height: 82px;
  display: flex;
  align-items: center;
  transition: height var(--transition-normal);
}

.site-header.header-scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgba(8, 43, 58, 0.08);
  border-bottom: 1px solid #CBD5E1;
}

.site-header.header-scrolled .header-top-bar {
  margin-top: -44px;
  opacity: 0;
  pointer-events: none;
  max-height: 0;
}

.site-header.header-scrolled .header-main {
  height: 68px;
}

.header-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  padding: 4px 0;
}

.header-logo img {
  height: 46px;
  width: auto;
  transition: height var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}

.header-logo:hover img {
  transform: scale(1.025);
  filter: drop-shadow(0 2px 10px rgba(7, 89, 133, 0.15));
}

.header-scrolled .header-logo img {
  height: 38px;
}

/* Desktop Navigation Menu Bar */
.nav-desktop-wrapper {
  display: flex;
  align-items: center;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 4px 6px;
  border-radius: 6px;
}

.nav-item {
  position: relative;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1E293B;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nav-link:hover {
  color: #075985;
  background: #F0F9FF;
  border-color: #BAE6FD;
  transform: translateY(-1px);
}

.nav-link.active {
  color: #075985;
  background: #E0F2FE;
  border-color: #7DD3FC;
  box-shadow: 0 2px 8px rgba(7, 89, 133, 0.08);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 6px rgba(244, 123, 32, 0.5);
  border-radius: 1px;
}

.dropdown-chevron-box {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 2px;
  flex-shrink: 0;
}

.has-dropdown:hover .dropdown-chevron-box,
.has-dropdown:focus-within .dropdown-chevron-box,
.has-dropdown.dropdown-open .dropdown-chevron-box {
  transform: rotate(180deg);
  background: rgba(244, 123, 32, 0.15);
  color: var(--orange);
}

/* Mega-Menu Dropdown Panel */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 640px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid #E2E8F0;
  border-top: 3px solid var(--orange);
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(8, 43, 58, 0.12), 0 4px 12px rgba(8, 43, 58, 0.06);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  z-index: 1002;
}

/* Invisible Safety Hover Bridge */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}

.has-dropdown:hover .nav-dropdown-menu,
.has-dropdown:focus-within .nav-dropdown-menu,
.has-dropdown.dropdown-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown Header Banner */
.dropdown-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #E2E8F0;
}

.dropdown-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dropdown-banner-badge {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(244, 123, 32, 0.12);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(244, 123, 32, 0.3);
}

.dropdown-banner-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.dropdown-banner-stat {
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 800;
  color: #0284C7;
  letter-spacing: 0.06em;
  background: #F0F9FF;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid #BAE6FD;
}

/* Dropdown Grid Items with Icons */
.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-item:hover {
  background: #F0F9FF;
  border-color: #93C5FD;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(7, 89, 133, 0.08);
}

.dropdown-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284C7;
  flex-shrink: 0;
  transition: all 0.22s;
}

.dropdown-item:hover .dropdown-item-icon {
  background: var(--orange);
  color: #FFFFFF;
  border-color: var(--orange);
  box-shadow: 0 0 12px rgba(244, 123, 32, 0.35);
}

.dropdown-item-content {
  flex-grow: 1;
  min-width: 0;
}

.dropdown-item-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #082B3A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  line-height: 1.3;
  transition: color 0.2s;
}

.dropdown-item:hover .dropdown-item-title {
  color: var(--orange);
}

.dropdown-arrow-icon {
  color: #0284C7;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dropdown-item:hover .dropdown-arrow-icon {
  opacity: 1;
  transform: translateX(0);
  color: var(--orange);
}

.dropdown-item-sub {
  font-size: 0.725rem;
  color: #64748B;
  line-height: 1.35;
  margin-top: 3px;
}

/* Dropdown Footer Strip */
.dropdown-footer-strip {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dropdown-footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  color: #64748B;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dropdown-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
  flex-shrink: 0;
}

.dropdown-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 800;
  color: #0284C7;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
  white-space: nowrap;
}

.dropdown-footer-cta:hover {
  color: var(--orange);
  transform: translateX(3px);
}

/* Executive Mega-Menu Layout (Clean 2-Column Services Grid) */
.mega-menu-executive {
  width: 720px;
  max-width: 92vw;
}

.mega-menu-body {
  display: block;
  width: 100%;
}

.dropdown-spotlight-col {
  display: flex;
}

.spotlight-card {
  background: linear-gradient(145deg, #F0F9FF 0%, #E2F0FB 100%);
  border: 1px solid #BAE6FD;
  border-radius: 6px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.spotlight-badge {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.spotlight-title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 800;
  color: #082B3A;
  line-height: 1.3;
  margin-bottom: 8px;
}

.spotlight-desc {
  font-size: 0.725rem;
  color: #334155;
  line-height: 1.45;
  margin-bottom: 12px;
}

.spotlight-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid rgba(186, 230, 253, 0.8);
  margin-bottom: 12px;
}

.spotlight-spec-item {
  display: flex;
  flex-direction: column;
}

.spotlight-spec-item .spec-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spotlight-spec-item .spec-val {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  color: #075985;
}

.spotlight-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #075985;
  color: #FFFFFF;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.2s ease;
}

.spotlight-cta:hover {
  background: var(--orange);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244, 123, 32, 0.3);
}

/* Header Action Group */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-desk-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: #0284C7;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: all 0.2s;
  white-space: nowrap;
}

.header-desk-call:hover {
  background: #0284C7;
  border-color: #0284C7;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.header-desk-call svg {
  color: var(--orange);
}

.header-rfq-btn {
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 18px rgba(244, 123, 32, 0.4);
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rfq-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px #FFFFFF;
  animation: pulseEmerald 1.8s infinite;
  flex-shrink: 0;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-xs);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
  z-index: 1001;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #082B3A;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

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

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Drawer System */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  background: #FFFFFF;
  box-shadow: -10px 0 35px rgba(8, 43, 58, 0.15);
  z-index: 1050;
  padding: 24px 24px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: right var(--transition-normal);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.is-open {
  right: 0;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 43, 58, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.mobile-nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Mobile Drawer Header */
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid #E2E8F0;
}

.mobile-drawer-logo img {
  height: 38px;
  width: auto;
}

.mobile-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-drawer-close:hover,
.mobile-drawer-close:focus {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
  transform: rotate(90deg);
}

/* Mobile Nav List & Accordion Items */
.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-item {
  border-bottom: 1px solid #E2E8F0;
}

.mobile-nav-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mobile-nav-link {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #082B3A;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 4px;
  flex-grow: 1;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--orange);
  padding-left: 8px;
}

.mobile-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #0284C7;
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.mobile-dropdown-toggle {
  width: 42px;
  height: 42px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
  margin-left: 8px;
}

.mobile-dropdown-toggle:hover,
.mobile-dropdown-toggle:focus {
  background: #E0F2FE;
  color: #0284C7;
  border-color: #BAE6FD;
}

.mobile-toggle-icon {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-item-dropdown.is-expanded .mobile-toggle-icon {
  transform: rotate(180deg);
  color: var(--orange);
}

.mobile-nav-item-dropdown.is-expanded .mobile-dropdown-toggle {
  background: rgba(244, 123, 32, 0.12);
  border-color: rgba(244, 123, 32, 0.4);
}

/* Collapsible Submenu */
.mobile-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  background: #F8FAFC;
  border-radius: 6px;
  margin: 0;
  padding: 0;
}

.mobile-nav-item-dropdown.is-expanded .mobile-submenu {
  max-height: 800px;
  opacity: 1;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid #E2E8F0;
}

.mobile-sublink {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-sublink:hover {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(8, 43, 58, 0.05);
}

.sublink-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0284C7;
  margin-top: 6px;
  flex-shrink: 0;
  transition: background 0.2s;
}

.mobile-sublink:hover .sublink-dot {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(244, 123, 32, 0.5);
}

.sublink-text {
  display: flex;
  flex-direction: column;
}

.sublink-title {
  font-family: var(--font-heading);
  font-size: 0.825rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}

.mobile-sublink:hover .sublink-title {
  color: var(--orange);
}

.sublink-desc {
  font-size: 0.725rem;
  color: #64748B;
  line-height: 1.35;
  margin-top: 2px;
}

.mobile-sublink-all {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #CBD5E1;
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 700;
  color: #0284C7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
}

.mobile-sublink-all:hover {
  color: var(--orange);
}

/* Mobile Drawer Footer */
.mobile-drawer-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #E2E8F0;
}

.mobile-ops-strip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 800;
  color: #075985;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  padding: 4px 10px;
  border-radius: 4px;
}

.mobile-drawer-contact {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 16px;
}

.mobile-drawer-contact p {
  margin-bottom: 4px;
}

.mobile-drawer-contact .company-name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #082B3A;
}

.mobile-drawer-contact .company-address {
  font-size: 0.75rem;
  color: #64748B;
}

.mobile-drawer-contact .company-phone a {
  color: #0284C7;
  font-weight: 700;
  text-decoration: none;
}

.mobile-drawer-contact .company-phone a:hover {
  color: var(--orange);
}

.mobile-quote-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* --- Grand Industrial Command-Center Hero Section --- */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-height) + 70px);
  padding-bottom: 70px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 55%, #F1F5F9 100%);
  color: var(--dark-text);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  filter: contrast(1.08) saturate(1.1) brightness(0.95);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(248, 250, 252, 0.93) 48%,
    rgba(240, 249, 255, 0.75) 100%
  );
  z-index: 2;
}

.hero-ambient-glow {
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.12) 0%, rgba(244, 123, 32, 0.04) 50%, transparent 70%);
  top: 10%;
  right: 5%;
  pointer-events: none;
  z-index: 2;
  filter: blur(80px);
}

/* Blueprint grid overlay */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(8, 43, 58, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(8, 43, 58, 0.035) 1px, transparent 1px);
  z-index: 3;
  pointer-events: none;
}

/* Master 2-Column Split Grid */
.hero-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 10;
  margin-bottom: 48px;
}

.hero-left-column {
  max-width: 680px;
}

/* Operational Command Pill */
.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--orange);
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(8, 43, 58, 0.06);
}

.status-pill-badge {
  color: #0284C7;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.status-pill-sep {
  color: #CBD5E1;
}

.status-pill-axis {
  color: #1E293B;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-pill-time {
  color: var(--orange);
  font-weight: 800;
}

.hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.8vw, 3.85rem);
  font-weight: 800;
  line-height: 1.08;
  color: #082B3A;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.text-orange-glow {
  color: var(--orange);
  text-shadow: none;
}

.hero-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.discipline-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius-xs);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0284C7;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.discipline-tag:hover {
  background: #0284C7;
  border-color: #0284C7;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.discipline-tag svg {
  color: var(--orange);
}

.hero-description {
  font-size: clamp(1.025rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: #334155;
  margin-bottom: 34px;
  max-width: 640px;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.hero-primary-cta {
  box-shadow: 0 8px 25px rgba(244, 123, 32, 0.4);
}

.hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 2px solid #075985;
  color: #075985;
}

.hero-secondary-cta:hover {
  background: #075985;
  border-color: #075985;
  color: #FFFFFF;
}

.hero-compliance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid #E2E8F0;
}

.compliance-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
}

/* Right Column: Mission Telemetry HUD Card */
.hero-right-column {
  position: relative;
  perspective: 1200px;
}

.hero-hud-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-xs);
  box-shadow: 0 20px 50px rgba(8, 43, 58, 0.1);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-hud-card:hover {
  border-color: #93C5FD;
  box-shadow: 0 25px 60px rgba(8, 43, 58, 0.15);
}

.hud-top-bar {
  padding: 12px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.hud-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0284C7;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hud-pulse-ring {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulse-green 1.8s infinite;
  flex-shrink: 0;
}

.hud-ref-code {
  color: var(--orange);
  font-family: var(--font-heading);
  font-size: 0.825rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hud-mission-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #E2E8F0;
  background: #F1F5F9;
}

.hud-tab-btn {
  padding: 12px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748B;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.hud-tab-btn:hover {
  color: #082B3A;
  background: #E2E8F0;
}

.hud-tab-btn.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  background: #FFFFFF;
}

.hud-screen-viewport {
  padding: 16px;
}

.hud-image-box {
  height: 190px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  border: 1px solid #E2E8F0;
  margin-bottom: 16px;
  background: #F8FAFC;
}

.hud-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.hud-laser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(2, 132, 199, 0.08) 1px, transparent 1px);
  background-size: 100% 6px;
  pointer-events: none;
  opacity: 0.6;
}

.hud-target-reticle {
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(2, 132, 199, 0.35);
  pointer-events: none;
}

.reticle-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: #0284C7;
  border-style: solid;
}

.reticle-tl { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.reticle-tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
.reticle-bl { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }
.reticle-br { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

.reticle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crosshair-h {
  width: 20px;
  height: 1px;
  background: #F47B20;
}

.crosshair-v {
  width: 1px;
  height: 20px;
  background: #F47B20;
  margin-top: -10px;
}

.reticle-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--orange);
  margin-top: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(8, 43, 58, 0.1);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hud-live-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: #FFFFFF;
  border: 1px solid #BAE6FD;
  box-shadow: 0 2px 6px rgba(8, 43, 58, 0.06);
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 700;
  color: #0284C7;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hud-live-tag .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
}

.hud-telemetry-body {
  padding: 0 4px;
}

.hud-mission-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #082B3A;
  margin-bottom: 12px;
  line-height: 1.3;
}

.hud-specs-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.hud-spec-cell {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 8px 10px;
  border-radius: 2px;
}

.hud-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hud-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #082B3A;
  margin-top: 3px;
  line-height: 1.3;
}

.hud-val.text-orange {
  color: var(--orange);
  font-size: 1.15rem;
  font-weight: 800;
}

.hud-transit-bar {
  margin-bottom: 14px;
  background: #F8FAFC;
  padding: 8px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 2px;
}

.transit-bar-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.transit-label {
  color: #64748B;
}

.transit-pct {
  color: #0284C7;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.transit-bar-track {
  height: 4px;
  background: #E2E8F0;
  border-radius: 2px;
  overflow: hidden;
}

.transit-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #075985, #0284C7, #F47B20);
  transition: width 0.4s ease;
}

.hud-actions-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #E2E8F0;
}

.hud-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  color: #0284C7;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.hud-action-link:hover {
  color: var(--orange);
}

.hud-action-link.text-orange {
  color: var(--orange);
}

.hud-action-link.text-orange:hover {
  color: #075985;
}

/* Hero Bottom Command Dock (Metrics & Engineering Strip) */
.hero-command-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 10;
  margin-top: 20px;
}

.dock-cell {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--orange);
  padding: 18px 20px;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 16px rgba(8, 43, 58, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-cell:hover {
  transform: translateY(-4px);
  border-color: #0284C7;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(8, 43, 58, 0.12);
}

.dock-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
}

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

.dock-number {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #082B3A;
  line-height: 1.2;
}

.dock-desc {
  font-size: 0.8rem;
  color: #64748B;
  line-height: 1.35;
  margin-top: 2px;
}

/* Sub-page Hero standard */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-height) + 60px);
  padding-bottom: 80px;
  background: linear-gradient(180deg, #F0F7FD 0%, #FFFFFF 100%);
  color: var(--dark-text);
  overflow: hidden;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(248, 250, 252, 0.93) 55%,
    rgba(240, 249, 255, 0.75) 100%
  );
  z-index: 2;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-content {
  position: relative;
  z-index: 10;
  max-width: 820px;
}

.page-hero-title {
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  text-transform: uppercase;
  color: #082B3A;
  margin-bottom: 16px;
}

.page-hero-desc {
  font-size: clamp(1.05rem, 1.8vw, 1.1875rem);
  color: #334155;
  line-height: 1.65;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.breadcrumbs a {
  color: #0284C7;
}

.breadcrumbs a:hover {
  color: var(--orange);
}

.breadcrumbs span.separator {
  color: var(--orange);
}

/* --- Section: Introduction Split Layout --- */
.intro-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

.intro-content {
  position: relative;
}

.intro-statement {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.intro-services-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  list-style: none;
  margin: 28px 0;
}

.intro-service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}

.intro-service-item svg {
  width: 18px;
  height: 18px;
  color: var(--orange);
  flex-shrink: 0;
}

/* Engineering Mantra Ribbon */
.engineering-mantra {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background-color: var(--navy);
  border-left: 4px solid var(--orange);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 16px;
}

.intro-visual {
  position: relative;
}

.industrial-image-frame {
  position: relative;
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.industrial-image-frame img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.industrial-image-frame:hover img {
  transform: scale(1.03);
}

.technical-overlay-box {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  padding: 20px;
  background: rgba(8, 43, 58, 0.94);
  border: 1px solid rgba(56, 189, 248, 0.28);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
}

.technical-overlay-box .tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tech-stat-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tech-stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: #38BDF8;
}

/* Decorative blueprint corner marks */
.blueprint-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--orange);
  pointer-events: none;
}

.blueprint-corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); }
.blueprint-corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); }
.blueprint-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--orange); border-left: 2px solid var(--orange); }
.blueprint-corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--orange); border-right: 2px solid var(--orange); }

/* --- Section: Project Cargo Capabilities Cards --- */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.capability-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 36px 30px;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  perspective: 1000px;
  overflow: hidden;
}

.capability-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.capability-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--orange);
  transition: width var(--transition-normal);
}

.capability-card:hover::before {
  width: 100%;
}

/* Glare highlight overlay */
.tilt-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.15) 0%,
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.capability-card:hover .tilt-glare {
  opacity: 1;
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs);
  background: var(--light-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: all var(--transition-fast);
}

.capability-card:hover .card-icon-wrap {
  background-color: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.card-index {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--muted-text);
  letter-spacing: 0.08em;
}

.capability-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.capability-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--secondary-text);
  margin-bottom: 24px;
  flex-grow: 1;
}

.card-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Section: Process Timeline --- */
.timeline-process {
  position: relative;
  margin-top: 60px;
}

.timeline-line {
  position: absolute;
  top: 48px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: #E2E8F0;
  z-index: 1;
}

.timeline-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange) 0%, #0284C7 100%);
  transition: width 1.2s ease-in-out;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  z-index: 2;
}

.timeline-step {
  display: flex;
  flex-direction: column;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.step-node {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xs);
  background: #FFFFFF;
  border: 2px solid #075985;
  color: #075985;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(7, 89, 133, 0.12);
  transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.timeline-step:hover .step-node {
  transform: scale(1.08);
  background-color: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(244, 123, 32, 0.35);
}

.step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #082B3A;
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.step-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #475569;
}

/* --- Section: Industries We Serve --- */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
}

.industry-card {
  position: relative;
  height: 390px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #FFFFFF;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--orange);
}

.industry-card-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.industry-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.industry-card:hover .industry-card-bg img {
  transform: scale(1.06);
}

.industry-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 43, 58, 0.25) 0%,
    rgba(8, 43, 58, 0.78) 45%,
    rgba(5, 26, 36, 0.96) 100%
  );
  z-index: 2;
  transition: opacity var(--transition-fast);
}

.industry-card-content {
  position: relative;
  z-index: 10;
}

.industry-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.industry-title svg {
  width: 22px;
  height: 22px;
  color: var(--orange);
  transition: transform var(--transition-fast);
}

.industry-card:hover .industry-title svg {
  transform: translateX(4px);
}

.industry-desc {
  font-size: 0.9rem;
  color: #E2E8F0;
  line-height: 1.6;
  opacity: 0.95;
}

/* --- Section: Global Freight Forwarding (5 Modes) --- */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.mode-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.mode-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.mode-image-wrap {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.mode-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mode-card:hover .mode-image-wrap img {
  transform: scale(1.05);
}

.mode-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(8, 43, 58, 0.92);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mode-content {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.mode-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--navy);
}

.mode-content p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--secondary-text);
  margin-bottom: 16px;
  flex-grow: 1;
}

/* Multimodal Diagram Ribbon */
.modal-diagram-container {
  margin-top: 48px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 28px 36px;
}

.modal-diagram-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.diagram-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  text-transform: uppercase;
}

.diagram-item .d-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  background: #FFFFFF;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.diagram-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(244, 123, 32, 0.1);
  border: 1px solid rgba(244, 123, 32, 0.28);
  color: var(--orange);
  flex-shrink: 0;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.diagram-arrow svg {
  display: block;
}

.modal-diagram-container:hover .diagram-arrow {
  background: rgba(244, 123, 32, 0.2);
  border-color: rgba(244, 123, 32, 0.5);
  transform: translateX(3px);
}

/* --- Section: Global Interactive Mission-Control Map --- */
.map-section {
  position: relative;
  background: var(--section-alt);
  color: var(--dark-text);
  overflow: hidden;
  padding: 100px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.map-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 40px;
}

.map-header .section-title {
  color: var(--navy);
}

.map-header .section-subtitle {
  color: var(--secondary-text);
}

.map-filter-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.map-filter-btn {
  padding: 8px 18px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(8, 43, 58, 0.04);
}

.map-filter-btn:hover {
  background: #F0F9FF;
  color: #0284C7;
  border-color: #0284C7;
}

.map-filter-btn.active {
  background: var(--orange);
  color: #FFFFFF;
  border-color: var(--orange);
  box-shadow: 0 4px 14px rgba(244, 123, 32, 0.35);
}

.map-viewport-wrapper {
  position: relative;
  width: 100%;
  background: #071D28;
  border: 2px solid #075985;
  border-radius: 8px;
  padding: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(8, 43, 58, 0.12);
}

.svg-map-container {
  width: 100%;
  height: auto;
  max-height: 640px;
  display: block;
}

/* Authentic World Map Continents Vector Styling */
.map-continents path {
  fill: #0c2534;
  stroke: #18435b;
  stroke-width: 0.6px;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.map-continents path:hover {
  fill: #194863;
  stroke: #38bdf8;
}

.map-continents #IN {
  fill: #1a5270;
  stroke: #38bdf8;
  stroke-width: 1.2px;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.45));
}

/* Strategic Hub Pins */
.map-hub-pin {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-hub-pin:hover {
  transform: scale(1.1);
}

.map-hub-pin:hover circle:not(.radar-ring-1):not(.radar-ring-2):not(.radar-circle) {
  fill: #FFFFFF;
}

/* Radar Pulse Animations */
.radar-ring-1 {
  animation: radarRingPulse 2.8s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
  transform-origin: center;
}

.radar-ring-2 {
  animation: radarRingPulse 2.8s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
  animation-delay: 1.4s;
  transform-origin: center;
}

.radar-circle {
  animation: radarCirclePulse 2.2s ease-out infinite;
  transform-origin: center;
}

@keyframes radarRingPulse {
  0% {
    r: 8;
    opacity: 1;
    stroke-width: 2px;
  }
  100% {
    r: 40;
    opacity: 0;
    stroke-width: 0.5px;
  }
}

@keyframes radarCirclePulse {
  0% {
    r: 5;
    opacity: 1;
  }
  100% {
    r: 20;
    opacity: 0;
  }
}

/* Map Route Animations */
.ocean-route {
  stroke-dasharray: 10 5;
  animation: dash-ocean 30s linear infinite;
  transition: opacity 0.3s ease;
}

.air-route {
  stroke-dasharray: 6 6;
  animation: dash-air 20s linear infinite;
  transition: opacity 0.3s ease;
}

.overland-route {
  stroke-dasharray: 8 5;
  animation: dash-rail 22s linear infinite;
  transition: opacity 0.3s ease;
}

@keyframes dash-ocean {
  to {
    stroke-dashoffset: -300;
  }
}

@keyframes dash-air {
  to {
    stroke-dashoffset: -200;
  }
}

@keyframes dash-rail {
  to {
    stroke-dashoffset: -200;
  }
}

/* Floating Rich Tooltip */
.map-floating-tooltip {
  position: absolute;
  background: rgba(5, 23, 33, 0.96);
  border: 1px solid var(--orange);
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75);
  max-width: 320px;
  backdrop-filter: blur(8px);
  color: #FFFFFF;
}

/* Legend Bar */
.map-legend-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 24px;
  padding: 14px 24px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 16px rgba(8, 43, 58, 0.04);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--secondary-text);
  text-transform: uppercase;
}

.legend-line {
  width: 24px;
  height: 2px;
}

.legend-line.ocean {
  background: #38BDF8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.legend-line.air {
  border-top: 2px dashed var(--orange);
}

.legend-line.rail {
  border-top: 2px dashed #F59E0B;
}

.legend-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-point-hq {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

.legend-point-port {
  background: #38BDF8;
  box-shadow: 0 0 6px #38BDF8;
}

.filter-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
}

/* Strategic Hub Telemetry Grid */
.map-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.map-telemetry-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 22px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(8, 43, 58, 0.04);
}

.map-telemetry-card:hover,
.map-telemetry-card.active {
  background: #FFFFFF;
  border-color: #0284C7;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(8, 43, 58, 0.12);
}

.telemetry-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.telemetry-badge {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #0284C7;
  font-weight: 800;
  text-transform: uppercase;
}

.telemetry-badge.badge-hq {
  color: var(--orange);
}

.telemetry-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.telemetry-indicator.pulse-orange {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

.telemetry-indicator.pulse-blue {
  background: #38BDF8;
  box-shadow: 0 0 6px #38BDF8;
}

.telemetry-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 6px 0 4px;
}

.telemetry-loc {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-text);
  margin-bottom: 10px;
}

.telemetry-desc {
  font-size: 0.825rem;
  line-height: 1.5;
  color: var(--secondary-text);
  margin-bottom: 14px;
}

.telemetry-meta {
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 700;
  color: #0284C7;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* --- Section: Why Partner With Us --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.why-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 36px 30px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
}

.why-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.why-card .why-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: var(--light-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-bottom: 20px;
}

.why-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--navy);
}

.why-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--secondary-text);
}

/* --- Section: Request a Quote CTA Banner & Multi-step form --- */
.quote-cta-section {
  position: relative;
}

.quote-split-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.quote-left-info {
  background: var(--navy);
  color: #FFFFFF;
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote-left-info h3 {
  color: #FFFFFF;
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  margin-bottom: 16px;
}

.quote-left-info p {
  color: #CBD5E1;
  margin-bottom: 24px;
}

.cargo-checklist {
  list-style: none;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cargo-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #E2E8F0;
}

.cargo-checklist li svg {
  color: var(--orange);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.complex-note {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--orange);
  font-size: 0.85rem;
  color: #CBD5E1;
  line-height: 1.5;
}

/* Multi-step Quote Form Styles */
.quote-form-wrapper {
  padding: 48px;
  background: #FFFFFF;
}

.multi-step-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  position: relative;
}

.step-indicator-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--border);
  z-index: 1;
}

.step-indicator-fill {
  height: 100%;
  width: 25%;
  background: var(--orange);
  transition: width var(--transition-normal);
}

.step-tab {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  padding-bottom: 12px;
  cursor: pointer;
}

.step-tab-num {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--muted-text);
  margin-bottom: 4px;
}

.step-tab-label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  letter-spacing: 0.04em;
}

.step-tab.active .step-tab-num {
  color: var(--orange);
}

.step-tab.active .step-tab-label {
  color: var(--orange);
}

.form-step-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.form-step-pane.active {
  display: block;
}

.form-pane-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Quick Cargo Category Chips */
.quick-cargo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.cargo-chip {
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--dark-text);
  transition: all var(--transition-fast);
}

.cargo-chip:hover,
.cargo-chip.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

/* Live CBM Calculator Feedback Strip */
.cbm-calculator-strip {
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-xs);
  padding: 12px 16px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
}

.cbm-calc-val {
  font-weight: 700;
  color: var(--primary);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form-grid.single-col {
  grid-template-columns: 1fr;
}

.form-grid .full-span {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
}

.form-label .required {
  color: var(--orange);
}

.form-control {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--dark-text);
  background-color: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(7, 89, 133, 0.15);
}

.form-control.is-invalid {
  border-color: #dc2626;
  background-color: #fef2f2;
}

.field-error-msg {
  font-size: 0.75rem;
  color: #dc2626;
  min-height: 16px;
}

.file-upload-box {
  border: 2px dashed var(--border);
  border-radius: var(--radius-xs);
  padding: 24px;
  text-align: center;
  background: var(--light-bg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.file-upload-box:hover {
  border-color: var(--primary);
  background: #FFFFFF;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Submission feedback alert box */
.form-feedback-alert {
  display: none;
  padding: 24px;
  border-radius: var(--radius-xs);
  margin-top: 20px;
  border-left: 4px solid var(--orange);
  background: var(--light-bg);
}

.form-feedback-alert.show {
  display: block;
}

/* --- Section: Shipment Tracking --- */
.tracking-wrapper {
  max-width: 860px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 44px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.tracking-input-group {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.tracking-input {
  flex-grow: 1;
  padding: 16px 20px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

.tracking-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(7, 89, 133, 0.15);
}

.tracking-status-display {
  display: none;
  margin-top: 32px;
  padding: 24px 28px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-xs);
}

.tracking-status-display.active {
  display: block;
}

.tracking-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tracking-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: rgba(7, 89, 133, 0.12);
  color: var(--primary);
  border-radius: var(--radius-xs);
}

.tracking-message {
  font-size: 0.95rem;
  color: var(--dark-text);
  line-height: 1.6;
}

/* --- Section: Final Call to Action --- */
.final-cta-section {
  position: relative;
  background: linear-gradient(135deg, #075985 0%, #082B3A 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 90px 0;
  border-top: 3px solid var(--orange);
}

.final-cta-content {
  max-width: 760px;
  margin: 0 auto;
}

.final-cta-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #FFFFFF;
}

.final-cta-sub {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.final-cta-desc {
  font-size: 1.125rem;
  color: #CBD5E1;
  line-height: 1.7;
  margin-bottom: 36px;
}

.final-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* --- Footer --- */
.site-footer {
  background-color: var(--navy);
  color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 60px;
}

.footer-brand img {
  height: 44px;
  width: auto;
  margin-bottom: 20px;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.footer-brand:hover img {
  transform: scale(1.02);
  filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.25));
}

.footer-brand-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.footer-brand-desc {
  font-size: 0.875rem;
  color: #94A3B8;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 2px;
  background-color: var(--orange);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 0.875rem;
  color: #CBD5E1;
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-links a:hover {
  color: var(--orange);
  transform: translateX(4px);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-address {
  font-size: 0.875rem;
  color: #CBD5E1;
  line-height: 1.6;
}

.footer-address strong {
  color: #FFFFFF;
  display: block;
  margin-bottom: 4px;
}

.footer-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: #94A3B8;
}

.footer-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--orange);
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.8125rem;
  color: #64748B;
}

.footer-legal-tag {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748B;
}

/* --- Subpage Specific Styles (About, Services, Products, Contact) --- */
.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.pillar-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  padding: 36px 30px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.pillar-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.pillar-card h3 {
  font-size: 1.25rem;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.about-manifesto-box {
  background: var(--navy);
  border-left: 4px solid var(--orange);
  padding: 44px;
  color: #FFFFFF;
  border-radius: var(--radius-xs);
  margin: 40px 0;
}

.about-manifesto-box h3 {
  color: #FFFFFF;
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.about-manifesto-box p {
  color: #CBD5E1;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Services Directory Cards */
.services-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.service-catalog-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.service-catalog-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.service-card-media {
  height: 220px;
  position: relative;
  overflow: hidden;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-catalog-card:hover .service-card-media img {
  transform: scale(1.05);
}

.service-card-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-card-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--navy);
}

.service-card-body p {
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--secondary-text);
  margin-bottom: 20px;
}

.service-caps-list {
  list-style: none;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  flex-grow: 1;
}

.service-caps-list li {
  font-size: 0.85rem;
  color: var(--dark-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-caps-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: var(--orange);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Products / Solutions Catalog Layout */
.solutions-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.solution-row-card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.solution-row-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.solution-media {
  position: relative;
  min-height: 280px;
}

.solution-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-details {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solution-index {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.solution-title {
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}

.solution-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.solution-spec-box {
  background: var(--light-bg);
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  border-left: 2px solid var(--primary);
}

.solution-spec-box .label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 4px;
}

.solution-spec-box .val {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}

/* Contact Page Layout */
.contact-split-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
}

.contact-info-panel {
  background: var(--navy);
  color: #FFFFFF;
  padding: 48px;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-card-title {
  font-size: 1.85rem;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.contact-meta-group {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 36px 0;
}

.contact-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
}

.contact-meta-text h4 {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.contact-meta-text p {
  color: #CBD5E1;
  font-size: 0.925rem;
  line-height: 1.5;
}

/* ==========================================================================
   UI/UX INTERACTIVITY & SENIOR DESIGN ENHANCEMENTS
   ========================================================================== */

/* Reading Scroll Progress Bar */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange) 0%, #38BDF8 100%);
  z-index: 1200;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 12px rgba(244, 123, 32, 0.7);
}

/* Floating Back to Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--orange);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 25px rgba(8, 43, 58, 0.12);
  backdrop-filter: blur(8px);
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background: var(--orange);
  color: #FFFFFF;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(244, 123, 32, 0.45);
}

/* Hero Operations Ticker Strip */
.hero-status-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 50px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(8, 43, 58, 0.06);
  flex-wrap: wrap;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulseEmerald 2s infinite;
}

@keyframes pulseEmerald {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

.status-badge {
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-divider {
  color: #CBD5E1;
  font-family: var(--font-heading);
  font-size: 0.8rem;
}

.status-text {
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 600;
  color: #1E293B;
  letter-spacing: 0.04em;
}

.text-accent-glow {
  color: var(--navy);
  font-weight: 800;
}

/* ==========================================================================
   CARGO BLUEPRINT SIMULATOR SECTION
   ========================================================================== */
.cargo-simulator-section {
  background: var(--light-bg);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.simulator-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.simulator-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-xs);
  color: #1E293B;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(8, 43, 58, 0.04);
}

.simulator-tab-btn svg {
  color: #0284C7;
  transition: color 0.25s ease;
}

.simulator-tab-btn:hover {
  background: #F0F9FF;
  border-color: #0284C7;
  color: #0284C7;
  transform: translateY(-2px);
}

.simulator-tab-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(244, 123, 32, 0.35);
}

.simulator-tab-btn.active svg {
  color: #FFFFFF;
}

.simulator-display-panel {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(8, 43, 58, 0.08);
}

.simulator-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.blueprint-viewport {
  background: #F1F5F9;
  border-right: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blueprint-header-bar,
.blueprint-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.775rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.06em;
}

.blueprint-tag {
  color: #075985;
  font-weight: 800;
}

.blueprint-canvas-box {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  position: relative;
}

.blueprint-canvas-box svg {
  width: 100%;
  max-height: 260px;
}

.telemetry-viewport {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #FFFFFF;
}

.telemetry-header {
  margin-bottom: 24px;
}

.telemetry-header h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
}

.telemetry-category-pill {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--orange);
  background: rgba(244, 123, 32, 0.12);
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid rgba(244, 123, 32, 0.3);
  letter-spacing: 0.05em;
  font-weight: 700;
}

.telemetry-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.spec-cell {
  background: #F8FAFC;
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: var(--radius-xs);
}

.cell-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cell-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}

.cell-val.text-orange {
  color: var(--orange);
  font-size: 1.15rem;
  font-weight: 800;
}

.telemetry-action-strip {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.prefill-quote-btn {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   TECHNICAL FAQ ACCORDION SECTION
   ========================================================================== */
.faq-accordion-container {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-accordion-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(8, 43, 58, 0.04);
}

.faq-accordion-item:hover,
.faq-accordion-item.active {
  border-color: #0284C7;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(8, 43, 58, 0.08);
}

.faq-accordion-header {
  width: 100%;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: none;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  justify-content: space-between;
}

.faq-number {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--orange);
  font-weight: 800;
  flex-shrink: 0;
}

.faq-question {
  flex-grow: 1;
}

.faq-toggle-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0284C7;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.faq-accordion-item.active .faq-toggle-icon {
  transform: rotate(180deg);
  background: var(--orange);
  color: #FFFFFF;
}

.faq-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-accordion-item.active .faq-accordion-body {
  max-height: 300px;
}

.faq-answer-inner {
  padding: 0 26px 24px 62px;
  color: #334155;
  font-size: 0.925rem;
  line-height: 1.7;
}

.faq-answer-inner p {
  margin: 0;
}

/* ==========================================================================
   SPEDITION INDIA PICTORIAL DESIGN SYSTEM (UI/UX & COLORS)
   Maximum Photos & Visuals, Minimal Text, Clean Daylight Aesthetics
   ========================================================================== */

/* Centered Headings & Signature Spedition Cyan Line */
.heading-center-wrap {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 48px auto;
}

.heading-divider {
  display: block;
  border: none;
  border-top: 3px solid #008DD2;
  width: 80px;
  height: 3px;
  margin: 16px auto 20px auto;
}

.heading-subtitle-clean {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* --- Hero Visual Photographic Banner (Multimodal Logistics Showcase) --- */
.hero-visual-banner {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 0 120px 0;
  background: 
    linear-gradient(180deg, 
      rgba(10, 24, 45, 0.45) 0%, 
      rgba(15, 34, 64, 0.28) 25%, 
      rgba(10, 24, 45, 0.48) 60%, 
      rgba(8, 18, 36, 0.85) 100%
    ),
    url('../assets/images/hero-multimodal.jpg') center 22% / cover no-repeat;
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
}

.hero-visual-content {
  position: relative;
  z-index: 5;
  max-width: 960px;
  margin: 0 auto;
}

.hero-visual-tag {
  display: inline-block;
  padding: 7px 20px;
  background: rgba(15, 34, 64, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(52, 204, 255, 0.85);
  border-radius: 30px;
  color: #38BDF8;
  font-family: var(--font-heading);
  font-size: 0.825rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.hero-visual-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-visual-title span.accent-cyan {
  color: #34CCFF;
}

.hero-visual-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: #F8FAFC;
  line-height: 1.6;
  max-width: 780px;
  margin: 0 auto 36px auto;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-visual-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual-actions .btn-primary {
  background-color: #F4524D;
  border-color: #F4524D;
  color: #FFFFFF;
  padding: 16px 36px;
  font-weight: 700;
  border-radius: 4px;
}

.hero-visual-actions .btn-primary:hover {
  background-color: #DE3B36;
  border-color: #DE3B36;
}

.hero-visual-actions .btn-outline-white {
  padding: 16px 32px;
  font-weight: 700;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

/* --- Floating Quick Service Cards (Beneath Hero) --- */
.floating-hero-cards-wrap {
  position: relative;
  z-index: 20;
  margin-top: -60px;
  margin-bottom: 60px;
}

.floating-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hero-quick-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 24px 20px;
  box-shadow: 0 10px 30px rgba(27, 54, 93, 0.1);
  border-top: 4px solid #008DD2;
  border: 1px solid #E2E8F0;
  border-top-width: 4px;
  border-top-color: #008DD2;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.hero-quick-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 141, 210, 0.22);
  border-top-color: #F4524D;
}

.hero-quick-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #E0F2FE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008DD2;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.hero-quick-card:hover .hero-quick-card-icon {
  background: #008DD2;
  color: #FFFFFF;
}

.hero-quick-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 8px;
  line-height: 1.3;
}

.hero-quick-card-desc {
  font-size: 0.875rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.hero-quick-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: #008DD2;
  margin-top: 14px;
  text-transform: uppercase;
}

.hero-quick-card:hover .hero-quick-card-link {
  color: #F4524D;
}

/* --- Pictorial Cards (Spedition India Model) --- */
.pictorial-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.pictorial-card {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(27, 54, 93, 0.07);
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pictorial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 141, 210, 0.18);
  border-color: #BAE6FD;
}

.pictorial-thumb,
.pictorial-card-thumb {
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #E2E8F0;
}

.pictorial-thumb img,
.pictorial-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pictorial-card:hover .pictorial-thumb img,
.pictorial-card:hover .pictorial-card-thumb img {
  transform: scale(1.08);
}

.pictorial-thumb-badge,
.pictorial-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 141, 210, 0.92);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.725rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  z-index: 2;
}

.pictorial-info,
.pictorial-card-body {
  padding: 22px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.pictorial-title,
.pictorial-card-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: #1B365D;
  margin-bottom: 10px;
  line-height: 1.35;
}

.pictorial-desc,
.pictorial-card-desc {
  font-size: 0.885rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.pictorial-cards-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 1024px) {
  .pictorial-cards-grid,
  .pictorial-cards-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pictorial-cards-grid,
  .pictorial-cards-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

.solution-feature-list {
  margin: 14px 0 20px;
  padding-left: 18px;
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.65;
}

.solution-feature-list li {
  margin-bottom: 4px;
}

/* --- Core Solutions Visual Boxes (Spedition .ozy-service-box) --- */
.spedition-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.spedition-service-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: #1B365D;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.06);
  position: relative;
  overflow: hidden;
}

.spedition-service-box:hover {
  background: #1B365D;
  color: #FFFFFF;
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(27, 54, 93, 0.22);
  border-color: #1B365D;
}

.spedition-service-box .box-thumb-wrap {
  width: 100%;
  height: 155px;
  position: relative;
  overflow: hidden;
  background: #0A192F;
}

.spedition-service-box .box-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.spedition-service-box:hover .box-thumb-img {
  transform: scale(1.08);
}

.spedition-service-box .box-icon {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #008DD2;
  box-shadow: 0 4px 12px rgba(27, 54, 93, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #008DD2;
  z-index: 2;
  transition: all 0.3s ease;
}

.spedition-service-box:hover .box-icon {
  background: #008DD2;
  border-color: #34CCFF;
  color: #FFFFFF;
  transform: translateX(-50%) scale(1.08);
}

.spedition-service-box .box-body {
  padding: 30px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}

.spedition-service-box h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
  color: #1B365D;
  transition: color 0.3s ease;
}

.spedition-service-box:hover h4 {
  color: #FFFFFF;
}

.spedition-service-box p {
  font-size: 0.835rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
  transition: color 0.3s ease;
  flex-grow: 1;
}

.spedition-service-box:hover p {
  color: #CBD5E1;
}

.spedition-service-box .arrow-indicator {
  margin-top: 14px;
  color: #008DD2;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.spedition-service-box:hover .arrow-indicator {
  color: #34CCFF;
  transform: translateX(4px);
}

/* --- Specialized Services Photo Showcase Grid (Spedition .spec_sec) --- */
.spec-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.spec-photo-card {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(27, 54, 93, 0.06);
  border: 1px solid #E2E8F0;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-photo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(0, 141, 210, 0.2);
  border-color: #008DD2;
}

.spec-photo-media {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.spec-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.spec-photo-card:hover .spec-photo-media img {
  transform: scale(1.08);
}

.spec-photo-title {
  padding: 16px 14px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1B365D;
  margin: 0;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.spec-photo-card:hover .spec-photo-title {
  color: #008DD2;
}

/* --- High Visual Operations Photo Gallery (Client Requested) --- */
.photo-gallery-section {
  padding: 80px 0;
  background: #F8FAFC;
}

.gallery-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.gallery-filter-btn,
.service-filter-btn,
.solution-filter-btn {
  padding: 9px 22px;
  border-radius: 30px;
  background: #FFFFFF;
  color: #475569;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active,
.service-filter-btn:hover,
.service-filter-btn.active,
.solution-filter-btn:hover,
.solution-filter-btn.active {
  background: #008DD2;
  color: #FFFFFF;
  border-color: #008DD2;
  box-shadow: 0 4px 14px rgba(0, 141, 210, 0.25);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.gallery-card-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 250px;
  box-shadow: 0 4px 14px rgba(27, 54, 93, 0.08);
  border: 1px solid #E2E8F0;
  cursor: pointer;
}

.gallery-card-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card-item:hover img {
  transform: scale(1.1);
}

.gallery-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 141, 210, 0.2) 0%, rgba(27, 54, 93, 0.92) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: #FFFFFF;
}

.gallery-card-item:hover .gallery-card-overlay {
  opacity: 1;
}

.gallery-card-badge {
  font-size: 0.725rem;
  font-weight: 800;
  color: #34CCFF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gallery-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

/* --- Affiliations & Accreditations Carousel Strip --- */
.cert-badges-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
}

.cert-badge-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 20px 14px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(27, 54, 93, 0.04);
  transition: all 0.25s ease;
}

.cert-badge-box:hover {
  transform: translateY(-4px);
  border-color: #008DD2;
  box-shadow: 0 8px 20px rgba(0, 141, 210, 0.12);
}

.cert-badge-icon {
  font-size: 1.8rem;
  color: #008DD2;
  margin-bottom: 8px;
}

.cert-badge-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: #1B365D;
  margin-bottom: 4px;
}

.cert-badge-sub {
  font-size: 0.725rem;
  color: #64748B;
  margin: 0;
}

/* --- Pictorial Split Quote Banner --- */
.pictorial-quote-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(27, 54, 93, 0.1);
  border: 1px solid #E2E8F0;
}

.quote-photo-column {
  position: relative;
  background: url('../assets/images/intro-project-cargo.jpg') center/cover no-repeat;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  color: #FFFFFF;
}

.quote-photo-column::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.4) 0%, rgba(27, 54, 93, 0.92) 100%);
}

.quote-photo-inner {
  position: relative;
  z-index: 2;
}

.quote-photo-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #F4524D;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.quote-photo-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
}

.quote-photo-text {
  font-size: 0.925rem;
  color: #E2E8F0;
  line-height: 1.6;
  margin: 0;
}