/* CSS Reset and Variables */
:root {
  /* Aerosys Brand Colors - Black, Gold, White, Green */
  --color-primary: #000000;           /* Deep Black */
  --color-secondary: #D4A937;         /* Updated Gold Color */
  --color-accent: #2E7D32;            /* Professional Green */
  --color-accent-light: #4CAF50;      /* Lighter Green */
  --color-white: #FFFFFF;             /* Pure White */
  --color-gray-light: #F8F9FA;        /* Light Gray */
  --color-gray: #6C757D;              /* Medium Gray */
  --color-gray-dark: #343A40;         /* Dark Gray */
  
  /* Gradient Combinations */
  --gradient-gold: linear-gradient(135deg, #D4A937 0%, #E6C547 100%);
  --gradient-dark: linear-gradient(135deg, #000000 0%, #2C2C2C 100%);
  --gradient-green: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
  --gradient-overlay: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
  
  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font Sizes - Responsive Scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */
  
  /* Layout */
  --container-padding: clamp(1rem, 5vw, 6rem);
  --content-max-width: 1400px;
  --section-padding: clamp(4rem, 8vw, 8rem);
  
  /* Shadows */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-gold: 0 4px 16px rgba(212, 169, 55, 0.3);
  --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  
  /* Borders */
  --border-light: rgba(0, 0, 0, 0.1);
  
  /* Legacy color aliases for compatibility */
  --white: var(--color-white);
  --primary-blue: var(--color-accent);
  --secondary-blue: var(--color-accent-light);
  --neutral-gray: var(--color-gray-dark);
  
  /* Spacing */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  height: auto;
  overflow-y: auto;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: var(--color-gray-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  min-height: 100vh;
}

body:has(.page-bg-video) {
  background: none !important;
}

/* Page background video styles */
.page-bg-video {
  filter: brightness(0.9) contrast(1.05);
  -webkit-filter: brightness(0.9) contrast(1.05);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: -10 !important;
  pointer-events: none !important;
}

.video-fallback {
  filter: brightness(0.9) contrast(1.05);
  -webkit-filter: brightness(0.9) contrast(1.05);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: -20 !important;
  pointer-events: none !important;
}

body.services-page {
  background: none !important;
}

/* Glass effect for service individual hero sections */
  /* Unified glass container styling for all service heroes */
.hero--service-individual .hero__content {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  max-width: 95% !important;
  z-index: 2 !important; /* Ensure content appears above overlay */
}

/* Who We Serve Carousel Layout */
.who-we-serve-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.who-we-serve-content {
  text-align: left;
  padding-top: 0;
}

.who-we-serve-title {
  font-size: clamp(1.8rem, calc(1.6rem + 1vw), 3.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: clamp(0.15rem, calc(0.1rem + 0.3vh), 0.6rem);
  margin-top: 0;
  line-height: clamp(1.0, calc(1.0 + 0.015vw), 1.25);
}

.who-we-serve-subtitle {
  font-size: clamp(0.9rem, calc(0.8rem + 0.6vw), 1.4rem);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary) !important;
  margin-bottom: clamp(0.2rem, calc(0.15rem + 0.4vh), 0.8rem);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transform: none;
  animation: none;
}

.who-we-serve-text {
  color: var(--color-white);
  font-size: clamp(0.8rem, calc(0.75rem + 0.4vw), 1.2rem);
  line-height: clamp(1.3, calc(1.3 + 0.15vw), 1.7);
}

.who-we-serve-text p {
  margin-bottom: 1rem;
  color: var(--color-white);
}

.clients-carousel-container {
  position: relative;
}

.clients-carousel {
  overflow: hidden;
  border-radius: 12px;
}

.clients-track {
  display: flex;
  transition: transform 0.5s ease;
  width: calc(100% * 4 / 3); /* 4 cards showing 3 at a time */
}

.clients-track .client {
  flex: 0 0 calc(100% / 4); /* Each card takes 1/4 of track width */
  margin-right: 1rem;
}

.carousel-controls {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

.carousel-dots {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.carousel-dot:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  transform: scale(1.2);
}

.carousel-dot.active {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  transform: scale(1.3);
}

/* Gold Divider - Right to Center */
.section-divider--right-to-center {
  position: relative;
  margin: 0;
  padding: 0;
  height: 4px;
  background: transparent;
  overflow: hidden;
}

.section-divider--right-to-center .section-divider__line {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--gradient-gold);
  animation: slideInFromRight 1.5s ease-out forwards;
}

@keyframes slideInFromRight {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .who-we-serve-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .who-we-serve-content {
    text-align: center;
  }
  
  .clients-track .client {
    flex: 0 0 calc(100% / 3); /* Show 3 cards on smaller screens (3 out of 4 total) */
  }
}

@media (max-width: 768px) {
  .clients-track .client {
    flex: 0 0 calc(100% / 2); /* Show 2 cards on mobile (2 out of 4 total) */
  }
  
  .who-we-serve-title {
    font-size: 2.5rem;
  }
  
  .who-we-serve-subtitle {
    font-size: 1.1rem;
  }
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-weight: 700;
}

h2 {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-dark);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-medium);
}

a:hover {
  color: var(--color-accent-light);
}

/* Layout */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--section-padding) 0;
  position: relative;
  background: transparent;
  z-index: 10;
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  z-index: 1;
  pointer-events: none;
}

.section > * {
  position: relative;
  z-index: 20;
}

.section--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.section--gold {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../images/drafting.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--color-white);
}

.section--gold .section__title {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section--gold .section__subtitle {
  color: var(--color-primary);
}

.section--green {
  background: var(--gradient-green);
  color: var(--color-white);
}

.section--hangar {
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
  backdrop-filter: blur(3px);
}

.section--drafting {
  background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9)), url('../images/drafting.png');
  background-size: cover;
  background-position: center;
  color: var(--color-primary);
}

.section--light {
  background: rgba(248, 249, 250, 0.9);
  color: var(--color-gray-dark);
  backdrop-filter: blur(3px);
}

.section--alt {
  background: var(--color-white);
  border-top: 1px solid #E9ECEF;
  border-bottom: 1px solid #E9ECEF;
}

.section--services-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url('../images/aircraft.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.section--white {
  background: rgba(212, 169, 55, 0.25);
  color: var(--color-gray-dark);
  backdrop-filter: blur(10px);
}

.section--white .section__title {
  color: var(--color-primary);
  font-size: 3rem;
  font-weight: var(--font-weight-semibold);
}

.section--white .section__description {
  color: var(--color-white);
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: var(--font-weight-medium);
}

.section__header {
  text-align: center;
  margin-bottom: 4rem;
}

.section__title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section__subtitle {
  font-size: 1.2rem;
  color: var(--color-gray);
  font-weight: var(--font-weight-medium);
  max-width: 600px;
  margin: 0 auto;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: var(--transition-medium);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-medium);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  min-height: 80px;
  position: relative;
}

.nav__brand {
  display: flex;
  align-items: center;
}

.nav__logo {
  height: 70px;
  width: auto;
  transition: var(--transition-medium);
}

.nav__logo:hover {
  transform: scale(1.05);
}

.nav__menu {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav__list {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transition-fast);
  position: relative;
}

.nav__link:hover {
  color: var(--color-secondary);
  background: rgba(212, 169, 55, 0.1);
}

.nav__link--active {
  color: var(--color-secondary);
  background: rgba(212, 169, 55, 0.15);
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--color-secondary);
  border-radius: 1px;
}

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

.nav__toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  gap: 4px;
}

.nav__toggle span {
  width: 25px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: var(--transition-fast);
}

.nav__toggle:hover span {
  background: var(--color-secondary);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-white);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 90vw;
  height: 90vh;
  margin: 0 auto;
  padding: 2vh 2vw;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: 
    "title"
    "text" 
    "form"
    "features";
  gap: 2vh;
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  overflow: visible;
}

.hero__title {
  grid-area: title;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

.hero__title--plain {
  font-size: clamp(2.76rem, calc(2.4rem + 3.84vw), 4.8rem);
  font-weight: var(--font-weight-bold);
  margin-bottom: clamp(0.8rem, calc(0.5rem + 1.5vh), 2rem);
  line-height: clamp(1.0, calc(1.0 + 0.05vw), 1.2);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

.hero__title span {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  margin: 0 0 2vh 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out 0.8s forwards;
}

.hero__text {
  grid-area: text;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: 1.4;
  width: 100%;
  max-width: 80%;
}

.hero--services {
  background: none !important;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body.services-page .hero--services {
  background: none !important;
}

.hero--services * {
  color: var(--color-white) !important;
}

.hero--services .hero__subtitle {
  color: var(--color-white) !important;
}

/* Specific styling for home and services pages with subtitles - Enhanced Top Padding */
.hero--services.hero--with-subtitle .hero__content {
  padding-top: 8vh;
}

/* Responsive hero adaptations for different desktop resolutions */
@media (min-width: 1200px) {
  .hero--services {
    padding: clamp(1rem, 2vh, 2rem) 0;
  }
  
  .hero__content {
    max-width: 900px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
  }
  
  .hero__title {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
  }
  
  .hero__title--plain {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
  }
}

@media (min-width: 1400px) {
  .hero__content {
    max-width: 1000px;
  }
  
  .hero__title {
    font-size: clamp(2.2rem, 3vw, 2.6rem);
  }
  
  .hero__title--plain {
    font-size: clamp(2.2rem, 3vw, 2.6rem);
  }
}

@media (min-width: 1600px) {
  .hero__content {
    max-width: 1100px;
  }
  
  .hero__title--plain {
    font-size: clamp(2rem, calc(1.8rem + 1.5vw), 3.2rem);
    margin-bottom: clamp(1rem, calc(0.7rem + 1.3vh), 2.2rem);
  }
  
  .content__text--large {
    font-size: clamp(1.1rem, calc(1rem + 0.8vw), 1.5rem);
    line-height: clamp(1.5, calc(1.5 + 0.15vw), 1.8);
  }
}

/* Ultra high-resolution displays (2560px+) */
@media (min-width: 2560px) {
  .hero__title--plain {
    font-size: clamp(2.2rem, calc(2rem + 1.2vw), 3.8rem);
    margin-bottom: clamp(1.2rem, calc(0.8rem + 1.5vh), 2.5rem);
    line-height: clamp(1.0, calc(1.0 + 0.02vw), 1.25);
  }
  
  .content__text--large {
    font-size: clamp(1.2rem, calc(1.1rem + 0.6vw), 1.7rem);
    line-height: clamp(1.5, calc(1.5 + 0.1vw), 1.9);
    margin-bottom: clamp(1rem, calc(0.7rem + 1.3vh), 2.3rem);
  }
  
  .feature-card__title {
    font-size: clamp(1rem, calc(0.9rem + 0.3vw), 1.4rem);
    margin-top: clamp(0.6rem, calc(0.4rem + 0.5vh), 1.3rem);
  }
}

/* Ultra ultra high-resolution displays (2800px+) */
@media (min-width: 2800px) {
  .hero__title--plain {
    font-size: clamp(2.4rem, calc(2.2rem + 1vw), 4rem);
    margin-bottom: clamp(1.3rem, calc(0.9rem + 1.2vh), 2.8rem);
    line-height: clamp(1.0, calc(1.0 + 0.015vw), 1.3);
  }
  
  .content__text--large {
    font-size: clamp(1.3rem, calc(1.2rem + 0.5vw), 1.8rem);
    line-height: clamp(1.6, calc(1.6 + 0.08vw), 2);
    margin-bottom: clamp(1.1rem, calc(0.8rem + 1.1vh), 2.5rem);
  }
  
  .feature-card__title {
    font-size: clamp(1.1rem, calc(1rem + 0.25vw), 1.5rem);
    margin-top: clamp(0.7rem, calc(0.5rem + 0.4vh), 1.4rem);
    line-height: clamp(1.3, calc(1.3 + 0.05vw), 1.5);
  }
}

/* ============================================
   HOMEPAGE DESKTOP RESPONSIVE SYSTEM
   ============================================ */

/* Desktop Small (1024px-1439px) - HOMEPAGE SPECIFIC */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* Main Hero Section */
  .hero--services .hero__content {
    width: 85%;
    max-width: 85%;
    padding: clamp(2rem, calc(1.5rem + 2vh), 4rem) clamp(2rem, calc(1.5rem + 1.5vw), 3rem);
    gap: clamp(1.5rem, calc(1rem + 2vh), 3rem);
  }
  
  /* Enhanced top padding for home and services pages only */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(8rem, calc(7.5rem + 2vh), 10rem);
  }
  
  .hero--services .hero__title--plain {
    font-size: clamp(3.12rem, calc(2.76rem + 1.8vw), 4.32rem);
    margin-bottom: clamp(1rem, calc(0.8rem + 1vh), 1.8rem);
    line-height: clamp(1.0, calc(1.0 + 0.02vw), 1.2);
  }
  
  .hero--services .hero__subtitle {
    font-size: clamp(1rem, calc(0.9rem + 0.6vw), 1.3rem);
    margin-bottom: clamp(1.2rem, calc(1rem + 1.2vh), 2rem);
  }
  
  .hero--services .content__text--large {
    font-size: clamp(1rem, calc(0.95rem + 0.5vw), 1.25rem);
    line-height: clamp(1.5, calc(1.5 + 0.1vw), 1.7);
    margin-bottom: clamp(1.5rem, calc(1.2rem + 1.5vh), 2.5rem);
  }
  
  /* Who We Serve Section */
  .who-we-serve-title {
    font-size: clamp(1.8rem, calc(1.6rem + 1vw), 2.5rem);
    margin-bottom: clamp(0.3rem, calc(0.2rem + 0.5vh), 0.8rem);
  }
  
  .who-we-serve-subtitle {
    font-size: clamp(1rem, calc(0.9rem + 0.5vw), 1.3rem);
    margin-bottom: clamp(0.5rem, calc(0.3rem + 0.8vh), 1.2rem);
  }
  
  .who-we-serve-text {
    font-size: clamp(0.95rem, calc(0.9rem + 0.3vw), 1.15rem);
    line-height: clamp(1.5, calc(1.5 + 0.08vw), 1.7);
  }
  
  /* Why Choose Aerosys Section */
  #why-choose .hero__title--plain {
    font-size: clamp(1.62rem, calc(1.44rem + 0.9vw), 2.16rem);
    margin-bottom: clamp(0.8rem, calc(0.6rem + 1vh), 1.5rem);
  }
  
  #why-choose .hero__subtitle {
    font-size: clamp(1rem, calc(0.9rem + 0.5vw), 1.25rem);
    margin-bottom: clamp(1.5rem, calc(1.2rem + 1.5vh), 2.5rem);
  }
  
  .feature__title {
    font-size: clamp(1rem, calc(0.9rem + 0.4vw), 1.3rem);
  }
  
  .feature__text {
    font-size: clamp(0.9rem, calc(0.85rem + 0.3vw), 1.1rem);
    line-height: clamp(1.4, calc(1.4 + 0.1vw), 1.6);
  }
  
  /* Hero Service Buttons */
  .hero__service-btn {
    font-size: clamp(0.8rem, calc(0.75rem + 0.3vw), 1rem);
    padding: clamp(0.4rem, calc(0.3rem + 0.5vw), 0.8rem) clamp(0.9rem, calc(0.7rem + 0.8vw), 1.6rem);
  }
  
  /* Carousel Elements */
  .client__title {
    font-size: clamp(0.9rem, calc(0.85rem + 0.3vw), 1.1rem);
  }
  
  .client__text {
    font-size: clamp(0.75rem, calc(0.7rem + 0.25vw), 0.9rem);
    line-height: clamp(1.2, calc(1.2 + 0.08vw), 1.4);
  }
}

/* Desktop Large (1440px-2559px) - HOMEPAGE & SERVICES SPECIFIC */
@media (min-width: 1440px) and (max-width: 2559px) {
  
  /* Who We Serve Section - MINIMAL BOTTOM PADDING */
  #who-we-serve.section {
    padding-bottom: 0.5rem !important;
  }
  
  /* SERVICES PAGE - Main Hero Optimization */
  .hero--services .hero__title--plain {
    font-size: clamp(2.64rem, calc(2.28rem + 0.72vw), 3.36rem) !important;
    margin-bottom: clamp(0.8rem, calc(0.6rem + 0.6vh), 1.2rem) !important;
    line-height: clamp(1.0, calc(1.0 + 0.008vw), 1.2) !important;
  }
  
  .hero--services .hero__subtitle {
    font-size: clamp(1.1rem, calc(1rem + 0.25vw), 1.4rem) !important;
    margin-bottom: clamp(1.5rem, calc(1.2rem + 0.8vh), 2rem) !important;
  }
  
  .hero--services .content__text--large {
    font-size: clamp(1rem, calc(0.9rem + 0.15vw), 1.2rem) !important;
    line-height: clamp(1.4, calc(1.4 + 0.02vw), 1.6) !important;
    margin-bottom: clamp(1.5rem, calc(1.2rem + 0.8vh), 2rem) !important;
  }
  
  /* Service Buttons - Better Spacing */
  .hero__services-buttons {
    gap: clamp(0.8rem, calc(0.6rem + 0.6vw), 1.2rem) !important;
    margin-top: clamp(1rem, calc(0.8rem + 0.6vh), 1.5rem) !important;
  }
  
  .hero__service-btn {
    padding: clamp(0.4rem, calc(0.3rem + 0.3vh), 0.6rem) clamp(0.8rem, calc(0.6rem + 0.5vw), 1.2rem) !important;
    font-size: clamp(0.8rem, calc(0.75rem + 0.1vw), 0.95rem) !important;
  }
  
  /* Individual Service Hero Sections - Optimized for 2880x1900 @ 200% */
  .hero--service-individual .hero__title--plain {
    font-size: clamp(2.16rem, calc(1.836rem + 0.54vw), 2.7rem) !important;
    margin-bottom: clamp(0.6rem, calc(0.4rem + 0.5vh), 1rem) !important;
    line-height: clamp(1.0, calc(1.0 + 0.008vw), 1.15) !important;
  }
  
  .hero--service-individual .hero__subtitle {
    font-size: clamp(1rem, calc(0.9rem + 0.2vw), 1.25rem) !important;
    margin-bottom: clamp(1rem, calc(0.8rem + 0.6vh), 1.5rem) !important;
  }
  
  .hero--service-individual .content__text--large {
    font-size: clamp(0.9rem, calc(0.8rem + 0.12vw), 1.1rem) !important;
    line-height: clamp(1.4, calc(1.4 + 0.015vw), 1.55) !important;
    margin-bottom: clamp(1.2rem, calc(1rem + 0.6vh), 1.8rem) !important;
  }
  
  /* Service Individual Buttons - Compact */
  .hero--service-individual .hero__services-buttons {
    gap: clamp(0.6rem, calc(0.5rem + 0.4vw), 1rem) !important;
    margin-top: clamp(0.8rem, calc(0.6rem + 0.5vh), 1.2rem) !important;
  }
  
  .hero--service-individual .hero__service-btn {
    padding: clamp(0.3rem, calc(0.25rem + 0.25vh), 0.5rem) clamp(0.6rem, calc(0.5rem + 0.4vw), 1rem) !important;
    font-size: clamp(0.75rem, calc(0.7rem + 0.08vw), 0.85rem) !important;
  }
  

  
  /* Unified hero sizing for all service individual heroes */
  .hero--service-individual {
    min-height: auto !important; /* Override base hero min-height: 100vh */
    height: auto !important;
    padding: 1rem 0 !important; /* Override section padding with 1rem top/bottom */
    position: relative !important; /* Ensure proper positioning context for overlay */
  }

  /* Content Container Optimization */
  .hero--service-individual .hero__content {
    padding: clamp(1rem, calc(0.8rem + 0.6vh), 1.5rem) clamp(2rem, calc(1.5rem + 1vw), 3rem) !important;
    gap: clamp(1.5rem, calc(1.2rem + 0.8vw), 2.5rem) !important;
  }
  

  
  /* Unified title and subtitle spacing for all service heroes */
  .hero--service-individual .hero__text-content .hero__title--plain {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero--service-individual .hero__text-content .hero__subtitle {
    margin: 0.5rem 0 0 0 !important;
    line-height: 1 !important;
    padding-top: 0 !important;
  }

  /* Unified flex layout for all service hero text content */
  .hero--service-individual .hero__text-content {
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }


  

  /* Main Hero Section */
  .hero--services .hero__content {
    width: 80%;
    max-width: 80%;
    padding: clamp(2.5rem, calc(2rem + 2vh), 5rem) clamp(2.5rem, calc(2rem + 1.5vw), 4rem);
    gap: clamp(2rem, calc(1.5rem + 2vh), 4rem);
  }
  
  /* Enhanced top padding for home and services pages only */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(8.5rem, calc(8rem + 2vh), 11rem);
  }
  
  .hero--services .hero__title--plain {
    font-size: clamp(3.36rem, calc(3.12rem + 1.56vw), 5.04rem);
    margin-bottom: clamp(1.2rem, calc(1rem + 1vh), 2rem);
    line-height: clamp(1.0, calc(1.0 + 0.015vw), 1.2);
  }
  
  .hero--services .hero__subtitle {
    font-size: clamp(1.1rem, calc(1rem + 0.5vw), 1.4rem);
    margin-bottom: clamp(1.5rem, calc(1.2rem + 1.2vh), 2.5rem);
  }
  
  .hero--services .content__text--large {
    font-size: clamp(1.1rem, calc(1rem + 0.4vw), 1.4rem);
    line-height: clamp(1.6, calc(1.6 + 0.08vw), 1.8);
    margin-bottom: clamp(2rem, calc(1.5rem + 1.5vh), 3rem);
  }
  
  /* Who We Serve Section - TEXT SPREAD TO MATCH CAROUSEL HEIGHT */
  .who-we-serve-title {
    font-size: clamp(2.2rem, calc(1.9rem + 0.6vw), 2.7rem) !important;
    margin-bottom: clamp(0.3rem, calc(0.2rem + 0.3vh), 0.6rem) !important;
    line-height: clamp(1.0, calc(1.0 + 0.008vw), 1.1) !important;
    /* Single line header */
    white-space: nowrap !important;
  }
  
  .who-we-serve-subtitle {
    font-size: clamp(1.1rem, calc(1rem + 0.25vw), 1.4rem) !important;
    margin-bottom: clamp(0.5rem, calc(0.4rem + 0.4vh), 0.8rem) !important;
    /* Single line subheader */
    white-space: nowrap !important;
  }
  
  .who-we-serve-text {
    font-size: clamp(1rem, calc(0.9rem + 0.15vw), 1.2rem) !important;
    line-height: clamp(1.4, calc(1.4 + 0.02vw), 1.6) !important;
    margin-bottom: 0 !important;
    /* Allow text to wrap naturally - fewer lines due to wider container */
    white-space: normal !important;
  }
  
  /* Carousel Elements - INCREASED SIZE FOR VERTICAL ALIGNMENT */
  .clients-carousel-container {
    height: clamp(220px, calc(200px + 6vh), 280px) !important;
    margin-top: clamp(0.5rem, calc(0.3rem + 0.4vh), 0.8rem) !important;
  }
  
  .client {
    height: clamp(200px, calc(180px + 5vh), 260px) !important;
    padding: clamp(1rem, calc(0.8rem + 0.6vw), 1.4rem) !important;
  }
  
  .client__title {
    font-size: clamp(0.7rem, calc(0.65rem + 0.08vw), 0.85rem) !important;
    margin-bottom: clamp(0.3rem, calc(0.2rem + 0.2vh), 0.5rem) !important;
  }
  
  .client__text {
    font-size: clamp(0.6rem, calc(0.55rem + 0.06vw), 0.75rem) !important;
    line-height: clamp(1.2, calc(1.2 + 0.01vw), 1.35) !important;
  }
  
  /* Carousel Controls - SMALLER WITH NO BOTTOM MARGIN */
  .carousel-controls {
    margin-top: clamp(0.8rem, calc(0.6rem + 0.4vh), 1.2rem) !important;
    margin-bottom: 0 !important;
    gap: clamp(0.4rem, calc(0.3rem + 0.2vw), 0.6rem) !important;
  }
  
  .carousel-dot {
    width: clamp(6px, calc(5px + 0.2vw), 8px) !important;
    height: clamp(6px, calc(5px + 0.2vw), 8px) !important;
  }
  
  /* Who We Serve Layout - MINIMAL TOP PADDING TO MATCH BOTTOM */
  .who-we-serve-layout {
    gap: clamp(1.5rem, calc(1.2rem + 0.8vw), 2.5rem) !important;
    padding: 0.5rem 0 0 0 !important;
    align-items: stretch !important;
  }
  
  .who-we-serve-content {
    max-width: calc(100% - 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* Natural height - don't force min-height */
  }
  
  /* Why Choose Aerosys Section */
  #why-choose .hero__title--plain {
    font-size: clamp(1.8rem, calc(1.62rem + 0.72vw), 2.34rem);
    margin-bottom: clamp(1rem, calc(0.8rem + 1vh), 1.8rem);
  }
  
  #why-choose .hero__subtitle {
    font-size: clamp(1.1rem, calc(1rem + 0.4vw), 1.35rem);
    margin-bottom: clamp(2rem, calc(1.5rem + 1.5vh), 3rem);
  }
  
  /* Feature Cards - FIXED FOR 2880x1900 @ 200% SCALING */
  .feature {
    padding: clamp(1rem, calc(0.8rem + 0.6vw), 1.4rem) !important;
    min-height: clamp(220px, calc(200px + 5vh), 280px) !important;
    max-height: clamp(260px, calc(240px + 6vh), 320px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .feature__title {
    font-size: clamp(0.9rem, calc(0.8rem + 0.15vw), 1.1rem) !important;
    margin-bottom: clamp(0.4rem, calc(0.3rem + 0.4vh), 0.7rem) !important;
    flex-shrink: 0 !important;
    text-align: center !important;
  }
  
  .feature__title-large {
    font-size: clamp(2.4rem, calc(2rem + 0.4vw), 2.8rem) !important;
    margin-bottom: clamp(0.2rem, calc(0.15rem + 0.2vh), 0.4rem) !important;
    margin-top: clamp(0.4rem, calc(0.3rem + 0.4vh), 0.7rem) !important;
    flex-shrink: 0 !important;
    /* Align with icons - same height as icon containers */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: clamp(60px, calc(50px + 2vh), 80px) !important;
  }
  
  .feature__title-small {
    font-size: clamp(0.75rem, calc(0.65rem + 0.08vw), 0.9rem) !important;
    line-height: clamp(1.1, calc(1.1 + 0.01vw), 1.25) !important;
    flex-shrink: 0 !important;
    /* Align with card titles - same positioning */
    margin-top: clamp(0.4rem, calc(0.3rem + 0.4vh), 0.7rem) !important;
    margin-bottom: clamp(0.4rem, calc(0.3rem + 0.4vh), 0.7rem) !important;
  }
  
  .feature__text {
    font-size: clamp(0.75rem, calc(0.65rem + 0.08vw), 0.9rem) !important;
    line-height: clamp(1.3, calc(1.3 + 0.02vw), 1.5) !important;
    margin-top: clamp(0.2rem, calc(0.15rem + 0.2vh), 0.4rem) !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    /* Ensure consistent positioning across all cards */
    min-height: clamp(80px, calc(70px + 3vh), 120px) !important;
  }
  
  .features {
    gap: clamp(0.8rem, calc(0.6rem + 0.6vw), 1.2rem) !important;
  }
  
  /* Hero Service Buttons */
  .hero__service-btn {
    font-size: clamp(0.85rem, calc(0.8rem + 0.25vw), 1.05rem);
    padding: clamp(0.5rem, calc(0.4rem + 0.4vw), 0.9rem) clamp(1rem, calc(0.8rem + 0.6vw), 1.8rem);
  }
  
  /* Carousel Elements */
  .client__title {
    font-size: clamp(0.95rem, calc(0.9rem + 0.25vw), 1.15rem);
  }
  
  .client__text {
    font-size: clamp(0.8rem, calc(0.75rem + 0.2vw), 0.95rem);
    line-height: clamp(1.3, calc(1.3 + 0.06vw), 1.5);
  }
}

/* Ultra High-Resolution Displays (2560px+) - HOMEPAGE SPECIFIC */
@media (min-width: 2560px) {
  /* Main Hero Section */
  .hero--services .hero__content {
    width: 75%;
    max-width: 75%;
    padding: clamp(3rem, calc(2.5rem + 2vh), 6rem) clamp(3rem, calc(2.5rem + 1.5vw), 5rem);
    gap: clamp(2.5rem, calc(2rem + 2vh), 5rem);
  }
  
  /* Enhanced top padding for home and services pages only */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(9rem, calc(8.5rem + 2vh), 12rem);
  }
  
  .hero--services .hero__title--plain {
    font-size: clamp(3.84rem, calc(3.36rem + 1.2vw), 5.4rem);
    margin-bottom: clamp(1.5rem, calc(1.2rem + 1vh), 2.5rem);
    line-height: clamp(1.0, calc(1.0 + 0.01vw), 1.2);
  }
  
  .hero--services .hero__subtitle {
    font-size: clamp(1.2rem, calc(1.1rem + 0.4vw), 1.6rem);
    margin-bottom: clamp(2rem, calc(1.5rem + 1.2vh), 3rem);
  }
  
  .hero--services .content__text--large {
    font-size: clamp(1.2rem, calc(1.1rem + 0.3vw), 1.5rem);
    line-height: clamp(1.7, calc(1.7 + 0.05vw), 1.9);
    margin-bottom: clamp(2.5rem, calc(2rem + 1.5vh), 4rem);
  }
  
  /* Who We Serve Section */
  .who-we-serve-title {
    font-size: clamp(1.5rem, calc(1.3rem + 0.3vw), 2rem) !important;
    margin-bottom: clamp(0.15rem, calc(0.1rem + 0.15vh), 0.4rem) !important;
    line-height: clamp(1.0, calc(1.0 + 0.008vw), 1.15) !important;
  }
  
  .who-we-serve-subtitle {
    font-size: clamp(0.85rem, calc(0.75rem + 0.15vw), 1.1rem) !important;
    margin-bottom: clamp(0.2rem, calc(0.15rem + 0.2vh), 0.5rem) !important;
  }
  
  .who-we-serve-text {
    font-size: clamp(0.75rem, calc(0.65rem + 0.12vw), 0.9rem) !important;
    line-height: clamp(1.3, calc(1.3 + 0.015vw), 1.5) !important;
  }
  
  /* Why Choose Aerosys Section */
  #why-choose .hero__title--plain {
    font-size: clamp(1.98rem, calc(1.8rem + 0.54vw), 2.52rem);
    margin-bottom: clamp(1.2rem, calc(1rem + 1vh), 2rem);
  }
  
  #why-choose .hero__subtitle {
    font-size: clamp(1.2rem, calc(1.1rem + 0.3vw), 1.5rem);
    margin-bottom: clamp(2.5rem, calc(2rem + 1.5vh), 4rem);
  }
  
  .feature__title {
    font-size: clamp(1.2rem, calc(1.1rem + 0.25vw), 1.5rem);
  }
  
  .feature__text {
    font-size: clamp(1rem, calc(0.95rem + 0.2vw), 1.2rem);
    line-height: clamp(1.6, calc(1.6 + 0.06vw), 1.8);
  }
  
  /* Hero Service Buttons */
  .hero__service-btn {
    font-size: clamp(0.9rem, calc(0.85rem + 0.2vw), 1.1rem);
    padding: clamp(0.6rem, calc(0.5rem + 0.3vw), 1rem) clamp(1.2rem, calc(1rem + 0.5vw), 2rem);
  }
  
  /* Carousel Elements */
  .client__title {
    font-size: clamp(1rem, calc(0.95rem + 0.2vw), 1.2rem);
  }
  
  .client__text {
    font-size: clamp(0.85rem, calc(0.8rem + 0.15vw), 1rem);
    line-height: clamp(1.4, calc(1.4 + 0.04vw), 1.6);
  }
}

/* Ultra Ultra High-Resolution Displays (2800px+ like 2880x1800) - HOMEPAGE SPECIFIC */
@media (min-width: 2800px) {
  /* Who We Serve Section - EXTRA COMPACT */
  .who-we-serve-title {
    font-size: clamp(1.2rem, calc(1rem + 0.2vw), 1.6rem) !important;
    margin-bottom: clamp(0.1rem, calc(0.05rem + 0.1vh), 0.25rem) !important;
    line-height: clamp(1.0, calc(1.0 + 0.005vw), 1.1) !important;
  }
  
  .who-we-serve-subtitle {
    font-size: clamp(0.7rem, calc(0.6rem + 0.1vw), 0.9rem) !important;
    margin-bottom: clamp(0.15rem, calc(0.1rem + 0.1vh), 0.3rem) !important;
  }
  
  .who-we-serve-text {
    font-size: clamp(0.4rem, calc(0.35rem + 0.06vw), 0.4rem) !important;
    line-height: clamp(1.25, calc(1.25 + 0.01vw), 1.4) !important;
  }
  
  /* Main Hero Section - EXTRA COMPACT */
  .hero--services .hero__title--plain {
    font-size: clamp(2.64rem, calc(2.4rem + 0.72vw), 3.6rem) !important;
    margin-bottom: clamp(1.2rem, calc(1rem + 0.8vh), 2rem) !important;
  }
  
  .hero--services .hero__subtitle {
    font-size: clamp(1rem, calc(0.9rem + 0.3vw), 1.4rem) !important;
    margin-bottom: clamp(1.5rem, calc(1.2rem + 1vh), 2.5rem) !important;
  }
  
  .hero--services .content__text--large {
    font-size: clamp(1rem, calc(0.9rem + 0.25vw), 1.3rem) !important;
    line-height: clamp(1.6, calc(1.6 + 0.03vw), 1.8) !important;
    margin-bottom: clamp(2rem, calc(1.5rem + 1.2vh), 3.5rem) !important;
  }
  
  /* Why Choose Aerosys Section - EXTRA COMPACT */
  #why-choose .hero__title--plain {
    font-size: clamp(1.944rem, calc(1.728rem + 0.54vw), 2.592rem) !important;
    margin-bottom: clamp(1rem, calc(0.8rem + 0.8vh), 1.6rem) !important;
  }
  
  #why-choose .hero__subtitle {
    font-size: clamp(1rem, calc(0.9rem + 0.25vw), 1.3rem) !important;
    margin-bottom: clamp(2rem, calc(1.5rem + 1.2vh), 3.5rem) !important;
  }
  
  /* Feature Cards - Better Adaptivity */
  .feature {
    padding: clamp(1rem, calc(0.8rem + 0.8vw), 2rem) !important;
    min-height: clamp(280px, calc(250px + 8vh), 400px) !important;
    max-height: clamp(320px, calc(280px + 10vh), 450px) !important;
  }
  
  .feature__title {
    font-size: clamp(0.9rem, calc(0.8rem + 0.15vw), 1.1rem) !important;
    margin-bottom: clamp(0.6rem, calc(0.4rem + 0.6vh), 1rem) !important;
  }
  
  .feature__title-large {
    font-size: clamp(2.8rem, calc(2.4rem + 0.4vw), 3.5rem) !important;
    margin-bottom: clamp(0.3rem, calc(0.2rem + 0.3vh), 0.6rem) !important;
    margin-top: clamp(0.8rem, calc(0.6rem + 0.6vh), 1.2rem) !important;
  }
  
  .feature__title-small {
    font-size: clamp(0.8rem, calc(0.7rem + 0.12vw), 1rem) !important;
    line-height: clamp(1.1, calc(1.1 + 0.02vw), 1.3) !important;
  }
  
  .feature__text {
    font-size: clamp(0.7rem, calc(0.65rem + 0.1vw), 0.85rem) !important;
    line-height: clamp(1.3, calc(1.3 + 0.02vw), 1.5) !important;
    margin-top: clamp(0.3rem, calc(0.2rem + 0.3vh), 0.6rem) !important;
  }
  
  /* Features grid spacing */
  .features {
    gap: clamp(1rem, calc(0.8rem + 0.8vw), 2rem) !important;
  }
  
  /* Hero Service Buttons */
  .hero__service-btn {
    font-size: clamp(0.8rem, calc(0.75rem + 0.15vw), 1rem) !important;
    padding: clamp(0.5rem, calc(0.4rem + 0.25vw), 0.8rem) clamp(1rem, calc(0.8rem + 0.4vw), 1.6rem) !important;
  }
  
  /* Carousel Elements */
  .client__title {
    font-size: clamp(0.85rem, calc(0.8rem + 0.15vw), 1rem) !important;
  }
  
  .client__text {
    font-size: clamp(0.7rem, calc(0.65rem + 0.1vw), 0.85rem) !important;
    line-height: clamp(1.3, calc(1.3 + 0.02vw), 1.5) !important;
  }
}

/* ============================================
   MOBILE-FIRST RESPONSIVE BREAKPOINT SYSTEM
   ============================================ */

/* Mobile Small (320px-479px) - MOBILE PORTRAIT ONLY */
@media (min-width: 320px) and (max-width: 479px) and (orientation: portrait) {
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1.5rem, calc(1rem + 1.5vh), 2.5rem) 0;
    display: block;
    overflow: visible;
  }
  
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  /* Ensure page can scroll */
  body {
    height: auto !important;
    min-height: auto !important;
    overflow-y: auto !important;
  }
  
  html {
    height: auto !important;
    overflow-y: auto !important;
  }
  
  /* Mobile Medium (480px-767px) - MOBILE PORTRAIT ONLY */
  @media (min-width: 480px) and (max-width: 767px) and (orientation: portrait) {
    /* Ensure page can scroll */
    body {
      height: auto !important;
      min-height: auto !important;
      overflow-y: auto !important;
    }
    
    html {
      height: auto !important;
      overflow-y: auto !important;
    }
  }
  
  /* Tablet Portrait (768px-1023px) - TABLET PORTRAIT ONLY */
  @media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    /* Ensure page can scroll */
    body {
      height: auto !important;
      min-height: auto !important;
      overflow-y: auto !important;
    }
    
    html {
      height: auto !important;
      overflow-y: auto !important;
    }
  }
  
  /* Mobile Landscape (480px-1023px) - MOBILE ONLY */
  @media (min-width: 480px) and (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
    /* Ensure page can scroll */
    body {
      height: auto !important;
      min-height: auto !important;
      overflow-y: auto !important;
    }
    
    html {
      height: auto !important;
      overflow-y: auto !important;
    }
  }
  
  /* Very Small Mobile Landscape (320px-479px) - MOBILE ONLY */
  @media (min-width: 320px) and (max-width: 479px) and (max-height: 500px) and (orientation: landscape) {
    /* Ensure page can scroll */
    body {
      height: auto !important;
      min-height: auto !important;
      overflow-y: auto !important;
    }
    
    html {
      height: auto !important;
      overflow-y: auto !important;
    }
  }
  
  /* Tablet Landscape (1024px-1439px) - TABLET ONLY */
  @media (min-width: 1024px) and (max-width: 1439px) and (max-height: 700px) and (orientation: landscape) {
    /* Ensure page can scroll */
    body {
      height: auto !important;
      min-height: auto !important;
      overflow-y: auto !important;
    }
    
    html {
      height: auto !important;
      overflow-y: auto !important;
    }
  }
  
  /* Short Height (max-height: 800px) */
  @media (max-height: 800px) {
    /* Ensure page can scroll */
    body {
      height: auto !important;
      min-height: auto !important;
      overflow-y: auto !important;
    }
    
    html {
      height: auto !important;
      overflow-y: auto !important;
    }
  }
  
  .hero__content {
    width: 95%;
    max-width: 95%;
    min-height: auto;
    height: auto;
    max-height: none;
    padding: clamp(1rem, calc(0.8rem + 1vh), 1.5rem) 2.5vw clamp(1rem, calc(0.8rem + 1vh), 1.5rem);
    gap: clamp(0.8rem, calc(0.6rem + 0.8vh), 1.2rem);
    justify-content: flex-start;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-template-rows: none;
    grid-template-areas: none;
    max-width: 95vw;
    margin: 0 auto;
  }
  
  /* Enhanced top padding for home and services pages on mobile small */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(2.5rem, calc(2rem + 1.5vh), 4rem);
    height: auto !important;
    max-height: none !important;
  }
  
  .hero__title--plain {
    font-size: clamp(1.1rem, calc(1rem + 2vw), 1.8rem);
    margin-bottom: clamp(0.2rem, calc(0.1rem + 0.8vh), 0.6rem);
    text-align: center;
    line-height: 1.2;
  }
  
  .content__text--large {
    font-size: clamp(0.65rem, calc(0.6rem + 1.5vw), 0.85rem);
    line-height: 1.4;
    margin-bottom: clamp(0.2rem, calc(0.1rem + 0.8vh), 0.6rem);
    text-align: center;
    max-width: 90vw;
    word-wrap: break-word;
  }
  
  /* Hero button mobile optimization */
  .hero__services-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(0.8rem, calc(0.6rem + 0.8vh), 1.2rem);
    width: 100%;
    order: 3;
  }
  
  .hero__service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.6rem, calc(0.5rem + 0.8vw), 0.9rem) clamp(1.2rem, calc(1rem + 1.5vw), 1.8rem);
    font-size: clamp(0.8rem, calc(0.7rem + 0.8vw), 1rem);
    min-width: 100px;
    max-width: 180px;
    white-space: nowrap;
    border-radius: 8px;
    border: 2px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-medium);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* DISABLED: Hero service button hover effect - will be used for popup information later
  .hero__service-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  */
  
  /* Mobile footer adaptation */
  .footer {
    padding: clamp(1rem, calc(0.8rem + 1vh), 1.5rem) clamp(1rem, calc(0.5rem + 2vw), 2rem);
  }
  
  .footer .container--content {
    max-width: 95vw;
    text-align: center;
  }
  
  .footer__content {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .footer__brand {
    order: -10;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-left: 0 !important;
  }
  
  .footer__contact {
    align-items: center;
    text-align: center;
    order: 0;
    gap: 0.5rem;
  }
  
  .footer__right {
    order: 0;
    align-items: center;
    justify-content: center;
  }
  
  .footer__center {
    order: 10;
    width: 100%;
    justify-content: center;
  }
  
  .footer__copyright {
    text-align: center;
    width: 100%;
  }
  
  .footer__logo {
    width: clamp(30px, calc(25px + 4vw), 50px);
    height: auto;
  }
  
  .footer__text {
    font-size: clamp(0.7rem, calc(0.65rem + 1vw), 0.9rem);
    line-height: clamp(1.3, calc(1.3 + 0.1vw), 1.5);
    margin: clamp(0.5rem, calc(0.3rem + 1vh), 1rem) 0;
  }
  
  .footer__copyright {
    font-size: clamp(0.6rem, calc(0.55rem + 0.8vw), 0.8rem);
    margin-top: clamp(0.5rem, calc(0.3rem + 1vh), 1rem);
  }
}

/* Mobile Medium (480px-767px) - MOBILE PORTRAIT ONLY */
@media (min-width: 480px) and (max-width: 767px) and (orientation: portrait) {
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1.5rem, calc(1rem + 1.5vh), 2.5rem) 0;
    display: block;
    overflow: visible;
  }
  
  .hero__content {
    width: 90%;
    max-width: 90%;
    min-height: auto;
    height: auto;
    max-height: none;
    padding: clamp(1rem, calc(0.8rem + 1vh), 1.5rem) 3vw clamp(1rem, calc(0.8rem + 1vh), 1.5rem);
    gap: clamp(0.8rem, calc(0.6rem + 0.8vh), 1.2rem);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  
  /* Enhanced top padding for home and services pages on mobile medium */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(2.5rem, calc(2rem + 1.5vh), 4rem);
    height: auto !important;
    max-height: none !important;
  }
  
  .hero__title--plain {
    font-size: clamp(1.44rem, calc(1.32rem + 2.16vw), 2.4rem);
    margin-bottom: clamp(0.4rem, calc(0.3rem + 1vh), 1rem);
  }
  
  .content__text--large {
    font-size: clamp(0.8rem, calc(0.75rem + 1.2vw), 1rem);
    margin-bottom: clamp(0.4rem, calc(0.3rem + 1vh), 1rem);
  }
  
  .hero-features-grid {
    gap: clamp(0.5rem, calc(0.3rem + 1.2vw), 1rem);
  }
  
  .feature-card__title {
    font-size: clamp(0.65rem, calc(0.6rem + 0.5vw), 0.85rem);
  }
}

/* Tablet Portrait (768px-1023px) - TABLET PORTRAIT ONLY */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1.5rem, calc(1rem + 1.5vh), 2.5rem) 0;
    display: block;
    overflow: visible;
  }
  
  .hero__content {
    width: 85%;
    max-width: 85%;
    min-height: auto;
    height: auto;
    max-height: none;
    padding: clamp(1.5rem, calc(1.2rem + 1.2vh), 2rem) 4vw clamp(1.5rem, calc(1.2rem + 1.2vh), 2rem);
    gap: clamp(1rem, calc(0.8rem + 0.8vh), 1.5rem);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  
  /* Enhanced top padding for home and services pages on tablet portrait */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(3rem, calc(2.5rem + 2vh), 5rem);
    height: auto !important;
    max-height: none !important;
  }
  
  .hero__title--plain {
    font-size: clamp(1.92rem, calc(1.68rem + 1.8vw), 3rem);
    margin-bottom: clamp(0.7rem, calc(0.5rem + 1.3vh), 1.4rem);
  }
  
  .content__text--large {
    font-size: clamp(0.95rem, calc(0.9rem + 0.8vw), 1.2rem);
    margin-bottom: clamp(0.7rem, calc(0.5rem + 1.3vh), 1.4rem);
  }
  
  .hero-features-grid {
    gap: clamp(1rem, calc(0.8rem + 1.2vw), 2rem);
    flex-direction: row;
    justify-content: center;
  }
  
  .feature-card__title {
    font-size: clamp(0.85rem, calc(0.8rem + 0.35vw), 1.1rem);
  }
}

/* Desktop Small (1024px-1439px) - DESKTOP ONLY */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero__content {
    width: 80%;
    max-width: 80%;
    height: 88vh;
    padding: 3vh 4vw;
    gap: 3vh;
  }
  
  .hero__title--plain {
    font-size: clamp(1.7rem, calc(1.5rem + 1.3vw), 2.8rem);
    margin-bottom: clamp(0.8rem, calc(0.6rem + 1.4vh), 1.6rem);
  }
  
  .content__text--large {
    font-size: clamp(1rem, calc(0.95rem + 0.7vw), 1.3rem);
    margin-bottom: clamp(0.8rem, calc(0.6rem + 1.4vh), 1.6rem);
  }
  
  .hero-features-grid {
    gap: clamp(1.2rem, calc(1rem + 1.4vw), 2.5rem);
  }
  
  .feature-card__title {
    font-size: clamp(0.9rem, calc(0.85rem + 0.4vw), 1.2rem);
  }
}

/* Desktop Large (1440px+) - DESKTOP ONLY */
@media (min-width: 1440px) {
  .hero__content {
    width: 75%;
    max-width: 75%;
    height: 85vh;
    padding: 3.5vh 4vw;
    gap: 3.5vh;
  }
  
  .hero__title--plain {
    font-size: clamp(1.8rem, calc(1.6rem + 1.2vw), 3rem);
    margin-bottom: clamp(0.9rem, calc(0.7rem + 1.5vh), 1.8rem);
  }
  
  .content__text--large {
    font-size: clamp(1.05rem, calc(1rem + 0.6vw), 1.4rem);
    margin-bottom: clamp(0.9rem, calc(0.7rem + 1.5vh), 1.8rem);
  }
  
  .hero-features-grid {
    gap: clamp(1.5rem, calc(1.2rem + 1.6vw), 3rem);
  }
  
  .feature-card__title {
    font-size: clamp(0.95rem, calc(0.9rem + 0.45vw), 1.3rem);
  }
}

/* Mobile Landscape Optimization (480px-1023px wide, short height) - MOBILE ONLY */
@media (min-width: 480px) and (max-width: 1023px) and (max-height: 600px) and (orientation: landscape) {
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1rem, calc(0.8rem + 1vh), 1.5rem) 0;
    display: block;
    overflow: visible;
  }
  
  .hero__content {
    width: 95%;
    max-width: 95%;
    min-height: auto;
    padding: clamp(1.5rem, calc(1rem + 1vh), 2.5rem) 2vw clamp(1rem, calc(0.8rem + 0.8vh), 2rem);
    gap: clamp(1rem, calc(0.8rem + 0.8vh), 1.8rem);
    justify-content: flex-start;
    overflow: visible;
  }
  
  /* Enhanced top padding for home and services pages on mobile landscape */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(4rem, calc(3.5rem + 2vh), 6rem);
  }
  
  .hero__title--plain {
    font-size: clamp(1.08rem, calc(0.96rem + 2.16vw), 1.68rem);
    margin-bottom: clamp(0.2rem, calc(0.1rem + 0.6vh), 0.5rem);
    line-height: clamp(1.0, calc(1.0 + 0.05vw), 1.2);
    text-align: center;
  }
  
  .content__text--large {
    font-size: clamp(0.65rem, calc(0.6rem + 1.2vw), 0.85rem);
    margin-bottom: clamp(0.2rem, calc(0.1rem + 0.6vh), 0.5rem);
    line-height: clamp(1.1, calc(1.1 + 0.1vw), 1.3);
    text-align: center;
    max-width: 90vw;
    word-wrap: break-word;
  }
  
  .hero-features-grid {
    gap: clamp(0.4rem, calc(0.2rem + 1vw), 0.8rem);
    margin: 0;
  }
  
  .feature-card__title {
    font-size: clamp(0.55rem, calc(0.5rem + 0.4vw), 0.7rem);
    margin-top: clamp(0.1rem, calc(0.05rem + 0.2vh), 0.2rem);
  }
  
  /* Mobile footer adaptation for landscape */
  .footer {
    padding: clamp(0.5rem, calc(0.3rem + 0.8vh), 1rem) clamp(1rem, calc(0.5rem + 1.5vw), 2rem);
  }
  
  .footer__text {
    font-size: clamp(0.6rem, calc(0.55rem + 0.8vw), 0.8rem);
    line-height: clamp(1.2, calc(1.2 + 0.05vw), 1.4);
    margin: clamp(0.3rem, calc(0.2rem + 0.5vh), 0.6rem) 0;
  }
  
  .footer__copyright {
    font-size: clamp(0.5rem, calc(0.45rem + 0.6vw), 0.7rem);
    margin-top: clamp(0.3rem, calc(0.2rem + 0.5vh), 0.6rem);
  }
}

/* Very Small Mobile Landscape (320px-479px wide, short height) - MOBILE ONLY */
@media (min-width: 320px) and (max-width: 479px) and (max-height: 500px) and (orientation: landscape) {
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(0.5rem, calc(0.3rem + 0.8vh), 1rem) 0;
    display: block;
    overflow: visible;
  }
  
  .hero__content {
    height: auto;
    max-height: none;
    padding: clamp(0.5rem, calc(0.3rem + 0.8vh), 1rem) 1.5vw;
    gap: clamp(0.3rem, calc(0.2rem + 0.2vh), 0.5rem);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  
  /* Enhanced top padding for home and services pages on very small mobile landscape */
  .hero--services.hero--with-subtitle .hero__content {
    padding-top: clamp(3vh, calc(2.5vh + 1vw), 5vh);
  }
  
  .hero__title--plain {
    font-size: clamp(0.96rem, calc(0.84rem + 2.4vw), 1.44rem);
    margin-bottom: clamp(0.15rem, calc(0.1rem + 0.4vh), 0.3rem);
  }
  
  .content__text--large {
    font-size: clamp(0.6rem, calc(0.55rem + 1.5vw), 0.75rem);
    margin-bottom: clamp(0.15rem, calc(0.1rem + 0.4vh), 0.3rem);
    line-height: clamp(1.1, calc(1.1 + 0.05vw), 1.2);
  }
  
  .feature-card__title {
    font-size: clamp(0.5rem, calc(0.45rem + 0.5vw), 0.65rem);
    margin-top: clamp(0.05rem, calc(0.03rem + 0.1vh), 0.15rem);
  }
}

/* Tablet Landscape Optimization (1024px-1439px wide, short height) - TABLET ONLY */
@media (min-width: 1024px) and (max-width: 1439px) and (max-height: 700px) and (orientation: landscape) {
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1rem, calc(0.8rem + 1vh), 1.5rem) 0;
    display: block;
    overflow: visible;
  }
  
  .hero__content {
    width: 85%;
    max-width: 85%;
    height: 92vh;
    padding: 2vh 4vw;
    gap: 1.5vh;
    justify-content: space-between;
  }
  
  .hero__title--plain {
    font-size: clamp(1.4rem, calc(1.3rem + 1vw), 2.2rem);
    margin-bottom: clamp(0.4rem, calc(0.3rem + 1vh), 1rem);
  }
  
  .content__text--large {
    font-size: clamp(0.9rem, calc(0.85rem + 0.5vw), 1.1rem);
    margin-bottom: clamp(0.4rem, calc(0.3rem + 1vh), 1rem);
  }
  
  .hero-features-grid {
    gap: clamp(1rem, calc(0.8rem + 1vw), 1.8rem);
  }
  
  .feature-card__title {
    font-size: clamp(0.8rem, calc(0.75rem + 0.3vw), 1rem);
  }
}

@media (max-height: 800px) {
  /* Override base hero constraints */
  .hero {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    display: block;
    overflow: visible;
  }
  
  .hero--services {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(1rem, calc(0.8rem + 1vh), 1.5rem) 0;
    display: block;
    overflow: visible;
  }
  
  .hero__content {
    height: auto;
    max-height: none;
    padding: clamp(0.8rem, 1.5vw, 1.5rem);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  
  .hero__title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem);
  }
  
  .hero__title--plain {
    font-size: clamp(1.4rem, calc(1.2rem + 2vw), 2.5rem);
    margin-bottom: clamp(0.6rem, calc(0.3rem + 1vh), 1.5rem);
    line-height: clamp(1.0, calc(1.0 + 0.03vw), 1.15);
  }
  
  .hero__subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    margin-bottom: clamp(1rem, 2vh, 1.8rem);
  }
  
  .content__text--large {
    font-size: clamp(0.85rem, calc(0.8rem + 1vw), 1.1rem);
    margin-bottom: clamp(0.6rem, calc(0.3rem + 1.2vh), 1.4rem);
    line-height: clamp(1.3, calc(1.3 + 0.15vw), 1.6);
  }
  
  .feature-card__title {
    font-size: clamp(0.8rem, calc(0.7rem + 0.3vw), 1.1rem);
    margin-top: clamp(0.3rem, calc(0.2rem + 0.5vh), 0.8rem);
  }
}

/* Individual service hero sections - half height with translucent background */
.hero--service-individual {
  background: rgba(255, 255, 255, 0.3) !important; /* Reduced to 30% opacity */
  background-color: rgba(255, 255, 255, 0.3) !important;
  min-height: 50vh; /* Half the height */
  color: var(--color-gray-dark);
  position: relative;
  z-index: 10; /* Ensure it's above the video */
  backdrop-filter: blur(5px); /* Add subtle blur effect */
}

.hero--service-individual * {
  color: var(--color-gray-dark) !important;
}

.hero--service-individual .hero__subtitle {
  color: var(--color-secondary) !important; /* Gold color for all service individual subtitles */
}

.hero--service-individual .hero__title {
  color: var(--color-primary) !important;
}

.hero--service-individual::before {
  content: '';
  position: absolute;
  inset: 0; /* Covers entire parent area including padding */
  background: rgba(255, 255, 255, 0.3); /* Reduced to 30% opacity */
  z-index: 1;
  opacity: 1;
  pointer-events: none; /* Prevent overlay from interfering with interactions */
}

/* Why Choose Aerosys - Specific gold overlay to match Who We Serve */
#why-choose.hero--service-individual::before {
  content: '';
  position: absolute;
  inset: 0; /* Covers entire parent area including padding */
  background: rgba(212, 169, 55, 0.25); /* Gold overlay to match Who We Serve section */
  z-index: 1;
  opacity: 1;
  pointer-events: none; /* Prevent overlay from interfering with interactions */
}

/* Why Choose Aerosys - Feature cards with 50% opacity background */
#why-choose .feature {
  background: rgba(255, 255, 255, 0.5) !important; /* 50% opacity white background */
}

/* Why Choose Aerosys Hero - Center justified */
#why-choose.hero--service-individual {
  min-height: auto !important; /* Remove min-height restrictions */
  max-height: none !important; /* Remove max-height restrictions */
  height: auto !important; /* Allow natural height */
  padding: 2rem 0 !important; /* Simple padding with !important to override everything */
  align-items: flex-start !important; /* Override base hero vertical centering */
  justify-content: flex-start !important; /* Start from top */
  text-align: center !important; /* Center text alignment */
}

#why-choose.hero--service-individual .hero__content {
  padding: 0;
  max-width: none;
  margin: 0 auto;
  justify-content: flex-start !important; /* Start from top */
  align-items: center !important; /* Center horizontally */
  text-align: center !important; /* Center all text */
  width: 100%;
}

#why-choose.hero--service-individual .content {
  text-align: center !important; /* Center the content wrapper */
  width: 100%;
}

#why-choose.hero--service-individual .container--content {
  position: relative;
  z-index: 2;
  padding-top: 0 !important; /* Remove any top padding */
  margin-top: 0 !important; /* Remove any top margin */
}

#why-choose.hero--service-individual .features-container {
  text-align: center !important; /* Center the features container */
  width: 100%;
}

#why-choose.hero--service-individual .features {
  justify-content: center !important; /* Center the grid items */
  text-align: center !important; /* Center text within features */
}



#why-choose.hero--service-individual .hero__title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary) !important;
  margin-bottom: 0.3rem;
  margin-top: 0;
  line-height: 1.2;
  text-shadow: none;
  opacity: 1;
  transform: none;
  animation: none;
}

#why-choose.hero--service-individual .hero__subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary) !important;
  margin-bottom: 0.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transform: none;
  animation: none;
}

/* Left-aligned hero content */
.hero--left-align {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero--left-align .hero__content {
  text-align: left;
  max-width: none;
  margin: 0;
  padding: 0 2rem 0 4rem; /* Remove top/bottom padding for true centering */
  position: relative;
  z-index: 2;
  width: 100%;
  height: 50vh; /* Ensure content takes full hero height */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* Center text vertically in the hero */
}

/* Unified styling for all service heroes with images */
.hero--service-individual.hero--with-images {
  align-items: stretch; /* Fill entire vertical space */
  justify-content: flex-start; /* Start from top */
  padding: 0; /* Remove any hero padding */
}

/* Unified content container styling for all service heroes with images */
.hero--service-individual.hero--with-images .hero__content {
  padding: 0 0 0 4rem; /* Remove top/right/bottom padding */
  height: 100%;
  margin: 0; /* Remove any margin */
}



/* Unified spacing for all service individual heroes */
.hero--service-individual .hero__title,
.hero--service-individual .hero__subtitle,
.hero--service-individual .content__text {
  padding-top: 0;
}

.hero--service-individual .hero__title {
  margin-bottom: 0;
}

.hero--service-individual .hero__subtitle {
  margin-bottom: 0;
  margin-top: 0;
}

.hero--service-individual .content__text {
  margin-top: 2rem;
  margin-bottom: 0;
}



/* Unified image container styling for all service heroes with images */
.hero--service-individual.hero--with-images .hero__images {
  margin: 0;
  padding: 0;
  width: 50%; /* Fixed width instead of max-width */
  height: 100%; /* Full height of the glass container */
  display: flex;
  position: absolute; /* Position absolutely within the glass container */
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 0 16px 16px 0; /* Match the glass effect border radius on right side */
  overflow: hidden; /* Ensure images don't extend beyond rounded corners */
}

/* Unified image styling for all service heroes */
.hero--service-individual .hero__image {
  height: 100%; /* Fill full height of glass container */
  width: 100%;
  border-radius: 0; /* NO CURVED EDGES - Sharp corners for all */
  margin: 0;
  object-fit: cover; /* Cover to crop to fit dimensions */
  object-position: center center; /* Center the image content */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Same shadow as System Design */
  transition: var(--transition-medium); /* Same hover transition */
  flex: 1; /* Equal width for side-by-side layout */
}

/* Unified hover effects for all service hero images */
.hero--service-individual .hero__image:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


.hero--left-align .hero__title {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  text-shadow: none; /* Remove shadow effect */
}

.hero--left-align .hero__subtitle {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  color: var(--color-secondary) !important; /* Gold color */
}

/* Even more specific rule for System Design subtitle */
.hero--with-images .hero__subtitle {
  color: var(--color-secondary) !important;
}

.hero--left-align .content {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  width: 100%;
}

.hero--left-align .content__text {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
}

.hero--left-align .hero__services-buttons {
  justify-content: flex-start;
  gap: 1rem; /* Add spacing between buttons */
  flex-wrap: wrap; /* Allow buttons to wrap to new lines */
  margin-top: 1.5rem; /* Add space above buttons */
}

.hero--left-align .hero__service-btn {
  padding: 0.4rem 0.75rem; /* Reduced horizontal padding */
  white-space: nowrap; /* Prevent text wrapping inside buttons */
  min-width: auto; /* Remove fixed width constraints */
  max-width: fit-content; /* Ensure button width fits content */
  font-size: 0.85rem; /* Slightly smaller font for better fit */
  border: none; /* Remove black border */
  background: rgba(255, 255, 255, 0.1); /* Subtle background */
  color: var(--color-gray-dark);
  border-radius: 4px; /* Smaller border radius for compact look */
  transition: var(--transition-medium);
  text-decoration: none;
  display: inline-block;
}

/* DISABLED: Left-align hero service button hover effect - will be used for popup information later
.hero--left-align .hero__service-btn:hover {
  background: var(--color-secondary); 
  color: var(--color-white); 
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 169, 55, 0.3); 
}
*/



/* Hero with images layout */
.hero--with-images .hero__content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}

.hero--with-images .hero__text-content {
  flex: 1;
  max-width: 50%;
}

.hero__images {
  flex: 1;
  display: flex;
  flex-direction: row; /* Side by side instead of stacked */
  gap: 1rem;
  max-width: 45%;
  height: 100%; /* Ensure container fills hero height */
  align-items: stretch; /* Stretch images to fill container height */
}

.hero__image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: var(--transition-medium);
}

.hero__image:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.hero__image--primary {
  height: 280px; /* Increased height for portrait aspect */
  width: 100%;
  object-fit: cover;
  flex: 1; /* Equal width for side-by-side layout */
  aspect-ratio: 3/4; /* Portrait aspect ratio */
}

.hero__image--secondary {
  height: 280px; /* Increased height for portrait aspect */
  width: 100%;
  object-fit: cover;
  flex: 1; /* Equal width for side-by-side layout */
  aspect-ratio: 3/4; /* Portrait aspect ratio */
}



/* Right-aligned hero content */
.hero--right-align {
  text-align: right;
  justify-content: flex-end;
  align-items: flex-start;
}

.hero--right-align .hero__content {
  text-align: right;
  max-width: none;
  margin: 0;
  padding: 0.5rem 0rem 2rem 2rem; /* Reduced right padding from 2rem to 0rem */
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: row; /* Row to put images left, text right */
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}

.hero--right-align .hero__text-content {
  flex: 1;
  max-width: 60%;
  text-align: right;
}

.hero--right-align .hero__images {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  max-width: 45%;
  order: -1; /* Force images to appear first (left side) */
}

.hero--right-align .hero__title {
  text-align: right;
  margin-right: 0;
  padding-right: 0;
  text-shadow: none;
}

.hero--right-align .hero__subtitle {
  text-align: right;
  margin-right: 0;
  padding-right: 0;
  color: var(--color-secondary) !important;
}

.hero--right-align .content {
  text-align: right;
  margin-right: 0;
  padding-right: 0;
  width: 100%;
}

.hero--right-align .content__text {
  text-align: right;
  margin-right: 0;
  padding-right: 0;
}

.hero--right-align .hero__services-buttons {
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.hero--right-align .hero__service-btn {
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  min-width: auto;
  max-width: fit-content;
  font-size: 0.85rem;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-gray-dark);
  border-radius: 4px;
  transition: var(--transition-medium);
  text-decoration: none;
  display: inline-block;
}

/* DISABLED: Right-align hero service button hover effect - will be used for popup information later
.hero--right-align .hero__service-btn:hover {
  background: var(--color-secondary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 169, 55, 0.3);
}
*/

/* Desktop specific adjustments for better left alignment */
@media (min-width: 1024px) {
  .hero--left-align .hero__content {
    padding: 1rem 2rem 3rem 6rem; /* Reduced top padding on desktop too */
    max-width: 90%; /* Increased to accommodate images */
  }
  
  .hero--with-images .hero__content {
    max-width: 95%; /* Even more space for image layout */
  }
  
  .hero--right-align .hero__content {
    padding: 1rem 6rem 3rem 2rem; /* Right padding on desktop */
    max-width: 90%;
  }
}

/* Floating Request Quote Button */
.floating-quote-btn {
  position: fixed;
  top: 120px; /* Below header */
  right: 20px;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: rgba(212, 169, 55, 0.6); /* Gold background at 60% opacity */
  color: var(--color-white); /* White text */
  border: 2px solid var(--color-white); /* White border */
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold); /* Bold text */
  text-decoration: none;
  transition: var(--transition-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.floating-quote-btn:hover {
  background: rgba(212, 169, 55, 0.8); /* More opaque gold on hover */
  color: var(--color-white); /* White text on hover */
  border-color: var(--color-white); /* White border on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 169, 55, 0.4); /* Gold shadow */
}

/* Responsive adjustments for floating button */
@media (max-width: 768px) {
  .floating-quote-btn {
    top: 100px; /* Closer to top on mobile */
    right: 15px;
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* Mobile adjustments for image layout */
@media (max-width: 1023px) {
  .hero--with-images .hero__content {
    flex-direction: column;
    gap: 2rem;
  }
  
  .hero--with-images .hero__text-content {
    max-width: 100%;
  }
  
  .hero__images {
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .hero__image {
    max-width: 48%;
  }
  
  /* Right-align specific mobile adjustments */
  .hero--right-align .hero__content {
    flex-direction: column;
    align-items: flex-end;
  }
  
  .hero--right-align .hero__images {
    order: 0; /* Reset order on mobile */
    align-self: flex-end;
  }
  
  .hero--right-align .hero__text-content {
    max-width: 100%;
    order: 1;
  }
}

/* Section Divider */
.section-divider {
  background: var(--color-white);
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 10;
}

.section-divider__line {
  height: 3px;
  background: var(--color-secondary); /* Gold color */
  width: 50%; /* Half width - reaches middle of screen */
  margin: 0; /* Start from left edge */
  border-radius: 0 2px 2px 0; /* Rounded right edge only */
}

/* Right-aligned divider */
.section-divider--right .section-divider__line {
  margin-left: auto; /* Push line to the right */
  margin-right: 0; /* Start from right edge */
  border-radius: 2px 0 0 2px; /* Rounded left edge only */
}

.hero--contact {
  background: var(--gradient-dark);
  min-height: 60vh;
}

/* Content */
.content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.content__text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.content__text--large {
  font-size: clamp(1rem, calc(0.9rem + 1.1vw), 1.4rem);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-dark);
  line-height: clamp(1.4, calc(1.4 + 0.2vw), 1.8);
  margin-bottom: clamp(0.8rem, calc(0.5rem + 1.5vh), 2rem);
}

.content__actions {
  margin-top: var(--spacing-xl);
}

.hero__services-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__service-btn {
  color: var(--color-white);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: 0.97rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-white);
  border-radius: 8px;
  transition: var(--transition-medium);
  background: transparent;
  backdrop-filter: blur(10px);
  min-width: 90px;
  max-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* DISABLED: General hero service button hover effect - will be used for popup information later
.hero__service-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border-color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
*/

/* Remove icon-specific rules for hero__service-icon */
.hero__service-icon, .hero__service-btn span {
  all: unset;
}

/* Footer */
.footer {
  background: var(--color-white);
  color: var(--color-gray-dark);
  padding: 1.5rem 0;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-gold);
}

.footer__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  padding-left: 3rem;
}

.footer__logo {
  height: 50px;
  width: auto;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  gap: 0;
}

.footer__title {
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
  color: var(--color-secondary);
  line-height: 1.2;
}

.footer__title--link {
  text-decoration: none;
  transition: var(--transition-fast);
  display: inline-block;
}

.footer__title--link:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}

.footer__email {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: 1.1rem;
  transition: var(--transition-fast);
}

.footer__email:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.footer__text {
  color: var(--color-gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer__login {
  color: var(--color-gray);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition-fast);
  display: inline-block;
  margin-top: 0;
  line-height: 1.2;
}

.footer__login:hover {
  color: var(--color-secondary);
}

.footer__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.footer__center {
  display: flex;
  justify-content: center;
  flex: 1;
}

.footer__copyright {
  margin: 0;
  color: var(--color-gray);
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

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

.text-right {
  text-align: right;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease forwards;
} 

.who-we-serve-bg {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.10);
  padding: 3rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
} 

.client {
  background: transparent !important;
  border-radius: 16px;
  box-shadow: none;
  transition: var(--transition-medium);
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.client__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: var(--transition-medium);
  z-index: 1;
  height: 200px;
}

.client__content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-medium);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.client__title {
  background: transparent !important;
  color: var(--color-white) !important;
  text-align: center;
  padding: 1rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--font-weight-semibold);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.section--white .client__title {
  color: var(--color-white) !important;
}

.client__text {
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-medium);
  color: var(--color-primary);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  text-align: center;
}

.client:hover .client__bg {
  opacity: 0.1;
}

.client:hover .client__content {
  opacity: 1;
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
}

.client:hover .client__text {
  opacity: 1;
  transform: translateY(0);
  color: var(--color-primary);
  text-shadow: none;
  font-weight: var(--font-weight-medium);
}

/* Background images for each client type */
.client--private-owners .client__bg {
  background-image: url('../images/private-jet.jpg');
}

.client--charter-operations .client__bg {
  background-image: url('../images/charter-aircraft.jpg');
}

.client--completion-centres .client__bg {
  background-image: url('../images/completion-hangar.png');
}

.client--mro-facilities .client__bg {
  background-image: url('../images/mro-facility.jpg');
}

.client--military-defence .client__bg {
  background-image: url('../images/military-aircraft.jpg');
}