/*
  =============================================================================
  SYNVERTIX TECHNOLOGIES — CSS BREAKPOINT SCALE REFERENCE (v9)
  =============================================================================
  xs    360–479px   Small phones (iPhone SE, small Android)
  sm    480–767px   Standard phones, landscape phones
  md    768–1023px  Tablets portrait, small foldables unfolded
  lg    1024–1279px Tablets landscape, small laptops (also touch)
  xl    1280–1439px Standard laptops & desktops
  2xl   1440px+     Large monitors, wide desktops

  Media query usage convention:
    @media (max-width: 479px)  { }  /* xs *\/
    @media (max-width: 767px)  { }  /* xs–sm *\/
    @media (max-width: 1023px) { }  /* xs–md *\/
    @media (max-width: 1279px) { }  /* xs–lg *\/
    @media (min-width: 1440px) { }  /* 2xl *\/
  =============================================================================
*/

/* Accessibility Skip Link & Focus Outline */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent-orange);
  color: #ffffff;
  padding: 0.5rem 1rem;
  z-index: 10000;
  border-radius: 4px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-orange) !important;
  outline-offset: 2px !important;
}

/* 1. Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* 2. CSS Custom Properties / Design Tokens (Light Default) */
:root {
  --bg-body: #FFFFFF;
  --bg-surface: #F5F6F8;
  --bg-card: #FFFFFF;
  --text-primary: #1E293B;
  --text-heading: #0B3D5C;
  --text-secondary: #4B5563;
  --text-muted: #64748B;
  --border-color: #E2E8F0;
  --header-bg: #FFFFFF;
  --header-shadow: rgba(0, 0, 0, 0.05);
  --footer-bg: #0A0A0A;
  --footer-text: #94A3B8;

  --primary-navy: #0B3D5C;
  --primary-navy-dark: #07283D;
  --primary-navy-light: #13557E;
  --accent-orange: #F5820D;
  --accent-orange-hover: #D96F05;
  --accent-orange-light: rgba(245, 130, 13, 0.12);
  --dark-bg: #0A0A0A;

  --shadow-sm: 0 2px 4px rgba(11, 61, 92, 0.05);
  --shadow-md: 0 6px 16px rgba(11, 61, 92, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 61, 92, 0.12);
  --shadow-glow: 0 0 25px rgba(245, 130, 13, 0.25);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

  --container-max: 1240px;

  /* ===== Fluid Typography (clamp) ===========================
     Scales smoothly across xs→2xl without abrupt jumps
  ======================================================== */
  --fluid-hero-title:   clamp(1.85rem, 4vw + 0.75rem, 3.25rem);
  --fluid-section-title: clamp(1.45rem, 2.5vw + 0.75rem, 2.25rem);
  --fluid-banner-title:  clamp(1.65rem, 3.5vw + 0.5rem, 2.75rem);
  --fluid-stat-number:   clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
  --fluid-body:          clamp(0.875rem, 1vw + 0.5rem, 1rem);
  --fluid-section-pad:   clamp(2.5rem, 6vw, 5rem);
}

/* 3. Dark Theme Tokens Override */
[data-theme="dark"] {
  --bg-body: #0F172A;
  --bg-surface: #111827;
  --bg-card: #1E293B;
  --text-primary: #FFFFFF;
  --text-heading: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border-color: #334155;
  --header-bg: #0F172A;
  --header-shadow: rgba(0, 0, 0, 0.4);
  --footer-bg: #0B1120;
  --footer-text: #CBD5E1;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* 4. Base Reset & Reset Defaults */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: var(--transition-theme);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

img, iframe, svg, canvas, video {
  max-width: 100%;
  height: auto;
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

/* 5. Global Typography & Utility Classes */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-heading);
  transition: var(--transition-theme);
}

.text-orange { color: var(--accent-orange) !important; }
.text-navy { color: var(--text-heading) !important; }
.text-white { color: #FFFFFF !important; }
.text-muted { color: var(--text-muted) !important; }

/* Enforce full outer section width + centered container */
section, .section-wrapper {
  width: 100%;
  display: block;
  transition: var(--transition-theme);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
  float: none;
}

.section-padding {
  padding-top: var(--fluid-section-pad);
  padding-bottom: var(--fluid-section-pad);
}

.section-padding-sm {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.5rem auto;
}

.section-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-orange);
  background: var(--accent-orange-light);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: var(--fluid-section-title);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-heading);
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* 6. Buttons & Theme Toggle Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--accent-orange);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(245, 130, 13, 0.35);
}

.btn-primary:hover {
  background-color: var(--accent-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 130, 13, 0.45);
}

.btn-navy {
  background-color: var(--primary-navy);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(11, 61, 92, 0.25);
}

.btn-navy:hover {
  background-color: var(--primary-navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 61, 92, 0.35);
}

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

.btn-outline:hover {
  background-color: var(--accent-orange);
  color: #FFFFFF;
  border-color: var(--accent-orange);
}

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

.btn-outline-white:hover {
  background-color: #FFFFFF;
  color: var(--primary-navy);
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

/* Theme Toggle Button (Sun / Moon) */
.theme-toggle-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-normal);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.theme-toggle-btn:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  transform: scale(1.08);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* 7. Header Navigation Layout */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--header-bg);
  box-shadow: 0 2px 10px var(--header-shadow);
  transition: var(--transition-theme);
  padding: 0.85rem 0;
}

.site-header.scrolled {
  padding: 0.5rem 0;
  box-shadow: 0 4px 20px var(--header-shadow);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1.5rem;
}

.logo-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  height: 42px;
  width: auto;
}

.logo-brand img {
  height: 100%;
  max-height: 42px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.site-header.scrolled .logo-brand img {
  max-height: 36px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-left: auto;
  margin-right: 1.5rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
  padding: 0.5rem 0;
  white-space: nowrap;
  transition: var(--transition-theme);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-orange);
  transition: width var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-orange);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text-primary);
  /* Ensure button is always tappable above any overlay or nav drawer */
  position: relative;
  z-index: 1002;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(245, 130, 13, 0.15);
}

.mobile-nav-toggle svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  pointer-events: none;
}

/* 8. Breadcrumb Header Banner (Subpages) */
.page-banner {
  background: linear-gradient(135deg, var(--primary-navy-dark) 0%, var(--primary-navy) 100%);
  color: #FFFFFF;
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.banner-title {
  font-size: var(--fluid-banner-title);
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #CBD5E1;
}

.breadcrumb-list a:hover {
  color: var(--accent-orange);
}

.breadcrumb-list .sep {
  color: var(--accent-orange);
}

/* 9. Hero Section (Home) */
.hero-section {
  background: linear-gradient(135deg, #071723 0%, var(--dark-bg) 50%, var(--primary-navy-dark) 100%);
  color: #FFFFFF;
  padding: 5rem 0 6rem 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.hero-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(245, 130, 13, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(40px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3.5rem;
  align-items: center;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 130, 13, 0.15);
  border: 1px solid rgba(245, 130, 13, 0.3);
  color: var(--accent-orange);
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: var(--fluid-hero-title);
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--accent-orange);
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.hero-description {
  font-size: 1.1rem;
  color: #94A3B8;
  margin-bottom: 2.25rem;
  max-width: 620px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-card-preview {
  background: rgba(18, 22, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-orange);
  margin-bottom: 1rem;
}

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

.hero-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-orange-light);
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 10. Quick Contact Strip */
.quick-contact-strip {
  background: var(--bg-card);
  margin-top: -3.5rem;
  position: relative;
  z-index: 10;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.5rem;
  border: 1px solid var(--border-color);
  width: 100%;
  transition: var(--transition-theme);
}

.quick-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: center;
  width: 100%;
}

.quick-contact-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.quick-contact-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

/* Hover-only quick-contact icon */
@media (hover: hover) {
  .quick-contact-item:hover .quick-contact-icon {
    background: var(--accent-orange);
    color: #FFFFFF;
    transform: scale(1.05);
  }
}

.quick-contact-info h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: var(--text-heading);
}

.quick-contact-info p {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Form 2-Column Grid Utility */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* 11. Side-by-Side Two-Column Contact Cards */
.contact-cards-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  width: 100%;
}

.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-theme);
  width: 100%;
}

@media (hover: hover) {
  .contact-info-card:hover {
    box-shadow: var(--shadow-md);
  }
}

/* 12. Services Grid & Cards — fluid auto-fit/minmax */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
  width: 100%;
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  transition: var(--transition-theme), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Hover-only effect scoped to pointer devices */
@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(245, 130, 13, 0.4);
  }

  .service-card:hover .service-icon {
    background: var(--accent-orange);
    color: #FFFFFF;
  }

  .service-card:hover .service-link {
    color: var(--accent-orange);
  }
}

.service-card-num {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: rgba(245, 130, 13, 0.15);
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--accent-orange-light);
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.service-card:hover .service-icon {
  background: var(--accent-orange);
  color: #FFFFFF;
}

.service-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--text-heading);
}

.service-desc {
  font-size: 0.925rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex-grow: 1;
  line-height: 1.55;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-heading);
}

/* Scope service-link base (non-hover) */
.service-card .service-link {
  color: var(--text-heading);
}

/* 13. Why Choose Us Grid — fluid auto-fit/minmax */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  transition: var(--transition-theme), transform var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-navy) 0%, var(--accent-orange) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

/* Hover-only feature card effects */
@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(245, 130, 13, 0.3);
  }

  .feature-card:hover::before {
    opacity: 1;
  }

  .feature-card:hover .feature-icon-wrapper {
    background: var(--accent-orange);
    color: #FFFFFF;
  }
}

.feature-title {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  color: var(--text-heading);
}

.feature-desc {
  font-size: 0.925rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.feature-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

/* 14. About Section Grid */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.about-img-box {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--dark-bg);
}

.about-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow);
}

/* Home Brand Logo Card Container (White background graphic integration) */
.about-img-box.home-brand-box {
  background: #FFFFFF;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
}

.about-img-box.home-brand-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Hover-only about image zoom */
@media (hover: hover) {
  .about-img-box:hover img {
    transform: scale(1.03);
  }
}

.about-experience-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: var(--primary-navy);
  color: #FFFFFF;
  padding: 1.1rem 1.6rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 5px solid var(--accent-orange);
  backdrop-filter: blur(10px);
  z-index: 5;
}

.about-experience-badge .num {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--accent-orange);
  line-height: 1;
}

.about-experience-badge .lbl {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mission-vision-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
  width: 100%;
}

.mv-card {
  background: var(--bg-surface);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent-orange);
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  transition: var(--transition-theme);
}

.mv-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-heading);
}

.mv-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 15. Stats Counter Band */
.stats-section {
  background: linear-gradient(135deg, var(--primary-navy-dark) 0%, var(--primary-navy) 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  width: 100%;
}

.stat-item {
  padding: 1.5rem;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: var(--fluid-stat-number);
  font-weight: 800;
  color: var(--accent-orange);
  margin-bottom: 0.35rem;
  line-height: 1;
}

.stat-label {
  font-size: 0.95rem;
  color: #CBD5E1;
  font-weight: 500;
}

/* 16. Team Grid — fluid auto-fit/minmax */
/* 16. TWO-TIER EXECUTIVE LEADERSHIP HIERARCHY LAYOUT (v15) */
.leadership-tiers-container {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.team-tier-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.team-tier-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-orange);
  background: var(--accent-orange-light);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 130, 13, 0.25);
  margin-bottom: 1.25rem;
}

.team-tier-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1.25rem;
  width: 100%;
}

.tier-1-grid {
  max-width: 520px;
  margin: 0 auto;
}

.tier-2-grid {
  max-width: 1040px;
  margin: 0 auto;
}

.team-tier-divider {
  width: 100%;
  max-width: 340px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-color) 50%, transparent 100%);
  margin: 0.25rem auto;
}

/* Reduced Team Card Sizing (~220px - 240px Max-Width) */
.team-card {
  max-width: 235px;
  width: 100%;
  flex: 0 1 235px;
  margin: 0 auto;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-theme), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}

/* Hover-only team card effects */
@media (hover: hover) {
  .team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }
}

.team-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-surface);
}

.team-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-slow);
}

.team-card:hover .team-img-wrap img {
  transform: scale(1.06);
}

.team-social-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 61, 92, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.team-card:hover .team-social-overlay {
  opacity: 1;
}

.team-social-overlay a {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: #FFFFFF;
  color: var(--primary-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.team-social-overlay a:hover {
  background: var(--accent-orange);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.team-info {
  padding: 0.85rem 0.65rem;
  text-align: center;
}

.team-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: var(--text-heading);
  line-height: 1.3;
}

.team-role {
  font-size: 0.78rem;
  color: var(--accent-orange);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* 17. VISUAL ORG CHART (About Page) */
/* 17. VISUAL ORG CHART (About Page) */
/* 17. VISUAL ORG CHART (About Page) */
/* 17. VISUAL ORG CHART (About Page) */
/* 17. VISUAL ORG CHART (About Page) */
.org-chart-container {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1rem;
  border: 1px solid var(--border-color);
  /* overflow-x intentionally NOT set here — scroll is handled by .org-chart-wrapper */
  overflow-x: visible;
  width: 100%;
  transition: var(--transition-theme);
}

.org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-width: 1080px;
  width: 100%;
}

.org-tier {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  position: relative;
}

.org-branches-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.org-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 175px;
  min-width: 175px;
}

.org-branch.tech-branch {
  width: 360px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-node {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.org-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-orange);
}

.org-node.board {
  background: var(--primary-navy);
  color: #FFFFFF;
  min-width: 250px;
  padding: 1rem 1.25rem;
}

.org-node.board h3 {
  color: #FFFFFF;
}

.org-node.board .org-title {
  color: var(--accent-orange);
}

.org-node.leadership {
  border-color: var(--accent-orange);
  min-width: 200px;
  padding: 0.85rem 1.1rem;
}

/* Tier 3 Leadership & Head Cards - 100% Uniform Width & Height */
.org-node.tier3-card {
  border-color: var(--accent-orange);
  background: var(--bg-card);
  width: 175px;
  min-width: 175px;
  max-width: 175px;
  height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 0.4rem;
  box-sizing: border-box;
}

.org-node h3 {
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
  color: var(--text-heading);
  font-weight: 700;
  white-space: nowrap;
}

.org-node .org-title {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.org-line-down {
  width: 2px;
  height: 18px;
  background-color: var(--accent-orange);
  margin: 0 auto;
}

.org-connector-bar-md {
  width: 380px;
  height: 2px;
  background-color: var(--accent-orange);
  margin: 0 auto;
}

.org-connector-bar-lg {
  width: 720px;
  height: 2px;
  background-color: var(--accent-orange);
  margin: 0 auto;
}

/* Branch Connectors (Tier 3 -> Tier 4) */
.org-sub-line {
  width: 2px;
  height: 16px;
  background-color: var(--accent-orange);
  margin: 0 auto;
}

.org-tech-tree-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
}

.org-sub-bar-tech {
  width: 240px;
  height: 2px;
  background-color: var(--accent-orange);
  margin: 0 auto;
}

.org-sub-drops-row {
  display: flex;
  justify-content: space-between;
  width: 240px;
  margin: 0 auto;
}

.org-sub-drop {
  width: 2px;
  height: 12px;
  background-color: var(--accent-orange);
}

.org-sub-items-tech {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  width: 360px;
}

/* Tier 4 Sub-department Cards */
.org-node.sub-dept {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 2px solid var(--accent-orange);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.35rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  width: 110px;
  min-width: 110px;
  box-sizing: border-box;
}

.org-node.sub-dept-single {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 2px solid var(--accent-orange);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  width: 155px;
  min-width: 155px;
  box-sizing: border-box;
}

.org-node.sub-dept:hover,
.org-node.sub-dept-single:hover {
  transform: translateY(-2px);
  border-color: var(--accent-orange);
  box-shadow: var(--shadow-md);
}

.org-node.sub-dept h4,
.org-node.sub-dept-single h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

.org-node.sub-dept .sub-title,
.org-node.sub-dept-single .sub-title {
  font-size: 0.68rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.org-node.sub-dept:hover,
.org-node.sub-dept-single:hover {
  transform: translateY(-2px);
  border-color: var(--accent-orange);
  box-shadow: var(--shadow-md);
}

.org-node.sub-dept h4,
.org-node.sub-dept-single h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

.org-node.sub-dept .sub-title,
.org-node.sub-dept-single .sub-title {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 18. Auto-Sliding Testimonials Marquee */
.testimonials-section {
  background: var(--bg-surface);
  width: 100%;
  overflow: hidden;
  transition: var(--transition-theme);
}

.testimonial-marquee-wrap {
  width: 100%;
  overflow: hidden;
  user-select: none;
  padding: 1rem 0;
}

.testimonial-marquee-track {
  display: flex;
  gap: 2rem;
  animation: testimonialMarquee 35s linear infinite;
  width: max-content;
}

/* Pause marquee on hover (desktop) and touch (mobile) */
.testimonial-marquee-wrap:hover .testimonial-marquee-track,
.testimonial-marquee-wrap.touch-paused .testimonial-marquee-track {
  animation-play-state: paused;
}

.testimonial-marquee-card {
  width: 380px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: var(--transition-theme);
}

.testimonial-marquee-card .testimonial-stars {
  color: #FFB800;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.testimonial-marquee-card .testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-style: italic;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.testimonial-marquee-card .testimonial-author h3 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
  color: var(--text-heading);
}

.testimonial-marquee-card .testimonial-author p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@keyframes testimonialMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 19. FAQ Accordion Section */
.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-theme);
}

.faq-item.active {
  border-color: var(--accent-orange);
  box-shadow: var(--shadow-sm);
}

.faq-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-heading);
}

.faq-toggle-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  color: var(--text-primary);
}

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

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
  padding: 0 1.5rem;
}

.faq-item.active .faq-body {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.faq-body p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 20. Auto-Scrolling Client Logos Marquee */
.client-logo-strip {
  padding: 3rem 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  width: 100%;
  transition: var(--transition-theme);
}

.marquee-title {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.marquee-container {
  display: flex;
  width: 100%;
  overflow: hidden;
  user-select: none;
}

.marquee-track {
  display: flex;
  gap: 4rem;
  animation: marquee 25s linear infinite;
  white-space: nowrap;
}

.client-logo-strip:hover .marquee-track,
.marquee-container:hover .marquee-track,
.marquee-container.touch-paused .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.marquee-item:hover {
  opacity: 1;
  color: var(--text-heading);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 21. Careers Page Job Search & Listings */
.career-search-wrapper {
  max-width: 800px;
  margin: 0 auto 2.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.career-search-box {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-theme);
}

.career-search-box input {
  flex: 1;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: transparent;
}

.career-filter-chips {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0.4rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.filter-chip:hover,
.filter-chip.active {
  background: var(--accent-orange);
  color: #FFFFFF;
  border-color: var(--accent-orange);
}

.job-listings-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.job-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: var(--transition-theme), transform var(--transition-normal);
}

.job-card:hover {
  border-color: var(--accent-orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.job-details h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
  color: var(--text-heading);
}

.job-summary {
  font-size: 0.925rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.job-tags {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.job-tag {
  background: var(--bg-surface);
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* 22. Contact Page 2-Column Desktop Layout */
.contact-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: stretch;
  width: 100%;
  margin-top: 2rem;
}

.contact-map-col {
  height: 100%;
  min-height: 500px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  width: 100%;
}

.contact-map-col iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
  display: block;
}

.contact-form-col {
  width: 100%;
}

.contact-info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.contact-info-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Compact Form Wrapper */
.form-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  width: 100%;
  transition: var(--transition-theme);
}

.form-wrapper .section-subtitle {
  margin-bottom: 0.5rem;
}

.form-wrapper h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--text-heading);
}

.form-wrapper p.form-subhead {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.form-group {
  margin-bottom: 0.9rem;
}

.form-label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text-heading);
}

.form-control {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  transition: var(--transition-theme);
}

.form-control:focus {
  background: var(--bg-card);
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(245, 130, 13, 0.15);
}

textarea.form-control {
  resize: vertical;
  min-height: 95px;
}

.form-wrapper .btn-primary {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
}

/* 23. Legal Pages Styling */
.legal-content {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-card);
  padding: 3rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  width: 100%;
  transition: var(--transition-theme);
}

.legal-content h2 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem 0;
  color: var(--text-heading);
}

.legal-content p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.legal-content ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

/* 24. Newsletter Banner Strip */
.newsletter-strip {
  background: linear-gradient(135deg, var(--primary-navy) 0%, var(--primary-navy-dark) 100%);
  color: #FFFFFF;
  padding: 3.5rem 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.newsletter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
}

.newsletter-text h2 {
  color: #FFFFFF;
  font-size: 1.75rem;
  margin-bottom: 0.35rem;
}

.newsletter-text p {
  color: #CBD5E1;
  font-size: 0.95rem;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  max-width: 500px;
}

.newsletter-input-wrap {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.newsletter-form input,
.newsletter-input-wrap input {
  flex: 1;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.newsletter-form input::placeholder,
.newsletter-input-wrap input::placeholder {
  color: #94A3B8;
}

.newsletter-feedback {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.25rem;
  display: none;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.newsletter-feedback.show {
  display: block;
}

.newsletter-feedback.success {
  color: #4ADE80;
}

.newsletter-feedback.error {
  color: #F87171;
}

/* 25. Footer Section */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding-top: 4.5rem;
  font-size: 0.9rem;
  width: 100%;
  transition: var(--transition-theme);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

.footer-col h3 {
  color: #FFFFFF;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-col h3::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--accent-orange);
}

.footer-brand img {
  height: 40px;
  width: auto;
  object-fit: contain;
  margin-bottom: 1.25rem;
}

.footer-desc {
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--footer-text);
}

.footer-social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  align-items: center;
}

.footer-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--footer-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.footer-social-links a:hover {
  background: var(--accent-orange);
  color: #FFFFFF;
  border-color: var(--accent-orange);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(245, 130, 13, 0.3);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: var(--footer-text);
  transition: var(--transition-fast);
}

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

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-contact-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.footer-contact-item svg {
  width: 18px;
  height: 18px;
  fill: var(--accent-orange);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.cin-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: #CBD5E1;
  margin-top: 1rem;
}

.footer-bottom {
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a:hover {
  color: var(--accent-orange);
}

/* Toast Notification for Form Validation */
.toast-msg {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary-navy-dark);
  color: #FFFFFF;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border-left: 4px solid var(--accent-orange);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition-normal);
}

.toast-msg.show {
  transform: translateY(0);
  opacity: 1;
}

/* 26. FULL MOBILE RESPONSIVE DESIGN SYSTEM (v13 Mobile Optimization) */

/* NOTE: overflow-x:hidden is on body only — NOT html.
   Setting overflow-x:hidden on <html> breaks position:fixed on iOS Safari,
   causing the mobile hamburger tap to silently fail. */
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body.menu-open {
  overflow: hidden !important;
  /* overscroll-behavior: none prevents rubber-band/scroll on iOS without
     blocking child touch events (unlike touch-action: none, which cascades
     down and silently kills the hamburger button's touchend) */
  overscroll-behavior: none;
}

.mobile-nav-cta {
  display: none;
}

/* Org Chart Horizontal Scroll — ONLY the wrapper scrolls.
   The container is the wide scrollable content inside it.
   max-width: 100% ensures the wrapper never exceeds viewport width. */
.org-chart-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  position: relative;
  padding-bottom: 0.75rem;
  margin: 1rem 0;
}

.org-chart-container {
  /* min-width forces the container to be wider than the wrapper,
     making the wrapper scroll — NOT the page. */
  min-width: 680px;
  margin: 0 auto;
  overflow-x: visible;
}

.scroll-hint-badge {
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-orange);
  text-align: center;
  margin-bottom: 0.85rem;
  background: var(--accent-orange-light);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(245, 130, 13, 0.3);
}

/* iOS Safari 16px Auto-Zoom & Touch Target Fix */
/* =============================================================================
   SYSTEMATIC 6-TIER CROSS-DEVICE BREAKPOINT SCALE (v9)
   =============================================================================
   2xl : min-width: 1440px (large monitors, wide desktops)
   xl  : 1280px–1439px     (standard desktops/laptops - base default)
   lg  : max-width: 1279px (tablets landscape, small laptops)
   md  : max-width: 1023px (tablets portrait, small foldables unfolded)
   sm  : max-width: 767px  (standard phones, landscape phones)
   xs  : max-width: 479px  (small phones, e.g. iPhone SE, small Android)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 2xl BREAKPOINT (min-width: 1440px) — Large monitors & wide desktops
   ----------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1340px;
  }

  .hero-title {
    font-size: clamp(3rem, 3.5vw, 3.5rem);
  }

  .stat-number {
    font-size: clamp(3rem, 3vw, 3.5rem);
  }

  .testimonial-marquee-card {
    width: 420px;
  }
}

/* -----------------------------------------------------------------------------
   2. lg BREAKPOINT (max-width: 1279px) — Tablets landscape & small laptops
   ----------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .logo-brand img {
    max-height: 38px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .contact-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .quick-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   3. md BREAKPOINT (max-width: 1023px) — Tablets portrait & small foldables
   ----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Tighten .nav-container gap so the icon pair sits close together.
     Logo stays left; .header-actions gets margin-left: auto to push
     the {theme-toggle, hamburger} cluster flush to the right edge. */
  .nav-container {
    gap: 0.5rem;
  }

  /* Push the icon pair (theme toggle + hamburger) to the right as one unit.
     margin-left: auto is safe here because .nav-menu is position:fixed
     (out of normal flow) at this breakpoint, so the logo and this pair
     are the only two flex children in the row. */
  .header-actions {
    margin-left: auto;
  }

  /* Mobile Navigation Drawer Activation Point */
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-color);
  }

  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100vw;
    height: calc(100vh - 70px);
    background: var(--bg-card);
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    gap: 0.5rem;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(-150%);
    transition: transform var(--transition-normal);
    /* z-index must be ABOVE the sticky header (1000) but BELOW the toggle button (1002) */
    z-index: 1001;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .nav-menu.active {
    transform: translateY(0);
  }

  .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border-bottom: 1px solid var(--border-color);
  }

  .nav-link.active {
    color: var(--accent-orange);
    background: var(--accent-orange-light);
  }

  .mobile-nav-cta {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    align-items: center;
    justify-content: center;
    margin-top: 0.75rem;
    font-weight: 700;
    text-align: center;
    border-radius: var(--radius-md);
  }

  .header-actions .btn {
    display: none;
  }

  /* Home Hero Column Stacking */
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-group {
    justify-content: center;
  }

  /* Section Grids Stacking */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .contact-main-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-map-col {
    order: 2;
    min-height: 340px;
    height: 340px;
  }

  .contact-form-col {
    order: 1;
  }

  .mission-vision-box {
    grid-template-columns: 1fr;
  }

  .about-experience-badge {
    bottom: 1rem;
    left: 1rem;
  }

  .scroll-hint-badge {
    display: block;
  }

  .quick-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   4. sm BREAKPOINT (max-width: 767px) — Standard phones & landscape phones
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Prevent iOS Safari auto-zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Minimum 44px Touch Targets */
  button, input, select, textarea, .btn, .nav-link {
    min-height: 44px;
  }

  /* Form & Card Column Stacking */
  .form-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .contact-cards-two-col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .contact-info-cards {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  /* Newsletter Stacking */
  .newsletter-box {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }

  .newsletter-form {
    width: 100%;
  }

  .newsletter-input-wrap {
    flex-direction: column;
    gap: 0.75rem;
  }

  .newsletter-form input,
  .newsletter-form button,
  .newsletter-input-wrap input,
  .newsletter-input-wrap button {
    width: 100%;
    border-radius: var(--radius-md);
  }

  /* Careers Page Responsive Controls */
  .career-search-wrapper {
    flex-direction: column;
    gap: 0.85rem;
  }

  .career-filter-chips {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .filter-chip {
    flex: 1 1 auto;
    text-align: center;
  }

  .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .job-card .btn {
    width: 100%;
    text-align: center;
  }

  /* Footer Stacking */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Marquee Card Sizing */
  .testimonial-marquee-card {
    width: clamp(280px, 85vw, 340px);
    padding: 1.5rem;
  }

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

  /* Contact map height on mobile */
  .contact-map-col {
    min-height: 280px;
    height: 280px;
  }

  .contact-map-col iframe {
    min-height: 280px;
  }

  /* ── Mobile header: ensure logo has the same breathing room as the right
     icon cluster. The .container's clamp() padding is sometimes overridden
     on narrow viewports, so we enforce a consistent 1.125rem on both edges. */
  .nav-container {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  /* ── Capability card header: stack title + badge vertically so the title
     gets full width and the badge moves to its own line below the title. */
  .hero-feature-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem;
  }

  .hero-feature-header h3 {
    /* Allow title to use the full row width */
    width: 100%;
  }

  .hero-feature-header span {
    /* Badge sits left-aligned, compact pill, below the title */
    align-self: flex-start;
    margin-top: 0.05rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
  }
}

/* -----------------------------------------------------------------------------
   5. xs BREAKPOINT (max-width: 479px) — Small phones (iPhone SE, small Android)
   ----------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.1rem);
  }

  .section-title {
    font-size: clamp(1.35rem, 5vw, 1.65rem);
  }

  .banner-title {
    font-size: clamp(1.5rem, 5vw, 1.85rem);
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .stat-item {
    padding: 0.85rem 0.5rem !important;
    text-align: center;
  }

  .stat-number {
    font-size: clamp(1.4rem, 5vw, 1.85rem) !important;
    line-height: 1.2;
  }

  .stat-label {
    font-size: 0.73rem !important;
    line-height: 1.35;
    margin-top: 0.25rem;
  }

  .logo-brand img {
    max-height: 34px !important;
    max-width: 145px !important;
    object-fit: contain;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .page-banner {
    padding: 2.5rem 0;
  }

  .section-padding {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .section-padding-sm {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .team-card {
    max-width: 240px;
  }

  .legal-content {
    padding: 1.25rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .footer-bottom-links {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .quick-contact-strip {
    padding: 1.25rem 0.85rem;
  }

  .form-wrapper {
    padding: 1.25rem 1rem;
  }

  .toast-msg {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    font-size: 0.85rem;
    padding: 0.85rem 1.1rem;
  }

  /* ── Capability card titles: reduce font-size slightly at xs so no title
     wraps to more than 2 lines even without the badge competing for space. */
  .hero-feature-header h3 {
    font-size: 0.975rem !important;
  }
}

/* Micro-breakpoint: narrowest phones (360px–390px).  Force 1-line-friendly
   title sizing and keep badge pill compact. */
@media (max-width: 390px) {
  .hero-feature-header h3 {
    font-size: 0.93rem !important;
  }

  .hero-feature-header span {
    font-size: 0.7rem !important;
    padding: 0.1rem 0.5rem !important;
  }
}

/* -----------------------------------------------------------------------------
   6. ORIENTATION & DEVICE HARDWARE SPECIFIC RULES
   ----------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 600px) {
  .synvertix-chat-modal {
    width: 360px !important;
    height: min(520px, calc(100vh - 40px)) !important;
    bottom: 40px;
  }

  .org-chart-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero-section {
    padding: 3rem 0 4rem 0;
  }

  .page-banner {
    padding: 2rem 0;
  }
}

/* iOS Safe Area Padding (Notch / Home Indicator) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .synvertix-chat-trigger {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }

  @media (max-width: 767px) {
    .synvertix-chat-trigger {
      bottom: calc(16px + env(safe-area-inset-bottom));
    }
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  .site-header {
    padding-top: calc(0.85rem + env(safe-area-inset-top));
  }

  .site-header.scrolled {
    padding-top: calc(0.5rem + env(safe-area-inset-top));
  }
}

/* High-DPI Display Sharpness (Retina / 2x Displays) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-brand img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ==========================================================================
   27. CAREERS JOB APPLICATION MODAL DIALOG
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 17, 32, 0.75);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

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

.modal-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-backdrop.active .modal-container {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.modal-title {
  font-size: 1.25rem;
  color: var(--text-heading);
  margin-bottom: 0.2rem;
}

.modal-subtitle {
  font-size: 0.825rem;
  color: var(--accent-orange);
  font-weight: 600;
  text-transform: uppercase;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.5rem;
  transition: var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--accent-orange);
}

/* ==========================================================================
   26. Subscription Confirmation Modal
   ========================================================================== */
.sub-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 25, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.sub-modal-card {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sub-modal-overlay.active .sub-modal-card {
  transform: scale(1) translateY(0);
}

.sub-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sub-modal-close:hover,
.sub-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
  outline: 2px solid var(--accent-orange, #F5820D);
}

.sub-modal-header {
  background: var(--primary-navy, #0B3D5C);
  padding: 2.25rem 1.75rem 1.35rem;
  text-align: center;
  border-bottom: 4px solid var(--accent-orange, #F5820D);
  border-top-left-radius: var(--radius-lg, 12px);
  border-top-right-radius: var(--radius-lg, 12px);
}

.sub-modal-logo {
  display: block;
  margin: 0 auto 0.6rem;
  max-width: 175px;
  height: auto;
}

.sub-modal-tag {
  color: var(--accent-orange, #F5820D);
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.sub-modal-body {
  padding: 2rem 2rem 1.6rem;
  color: var(--text-dark, #1E293B);
  text-align: left;
}

.sub-modal-heading {
  color: var(--primary-navy, #0B3D5C);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.15rem;
  line-height: 1.3;
}

.sub-modal-text {
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

.sub-modal-signoff {
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 1.15rem;
  margin-bottom: 1.5rem;
}

.sub-modal-signoff strong {
  color: var(--primary-navy, #0B3D5C);
}

.sub-modal-cta-wrap {
  text-align: center;
  margin-top: 1.25rem;
}

.sub-modal-cta {
  display: inline-block;
  padding: 0.85rem 2.25rem;
  background-color: var(--accent-orange, #F5820D);
  color: #FFFFFF !important;
  font-weight: 700;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(245, 130, 13, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sub-modal-cta:hover {
  background-color: #E0730B;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 130, 13, 0.4);
}

.sub-modal-footer {
  background: #0F172A;
  color: #94A3B8;
  padding: 1.25rem 1.75rem;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.5;
  border-bottom-left-radius: var(--radius-lg, 12px);
  border-bottom-right-radius: var(--radius-lg, 12px);
  border-top: 1px solid #1E293B;
}

.sub-modal-footer strong {
  color: #F8FAFC;
}

.sub-modal-footer span {
  display: block;
  margin-top: 0.25rem;
  color: #64748B;
  font-size: 0.73rem;
}

@media (max-width: 576px) {
  .sub-modal-card {
    max-width: 100%;
    margin: 0 0.25rem;
  }
  .sub-modal-body {
    padding: 1.5rem 1.15rem 1.15rem;
  }
  .sub-modal-heading {
    font-size: 1.2rem;
  }
  .sub-modal-cta {
    width: 100%;
  }
}