:root {
  /* ─── Global Design Tokens ─── */
  --primary: #0B1F4D;
  --secondary: #F59E0B;
  --text: #0F172A;
  --light: #F8FAFC;
  --border: #E5E7EB;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --text-xs: 12px;
  --text-sm: 14px;
  --icon-size-social: 20px;

  /* ─── Color System ─── */
  /* Primary Dark Navy */
  --color-primary-900: var(--primary);
  --color-primary-800: var(--primary);   /* Brand Navy */
  --color-primary-700: #0c4391;
  --color-primary-600: #125bc0;
  --color-primary-500: #1b74f0;

  /* Accent Orange */
  --color-accent-600: #D97706;    /* Dark hover */
  --color-accent-500: var(--secondary);    /* Brand Orange */
  --color-accent-400: #FFA233;
  --color-accent-300: #FFBA66;

  /* Neutral Light */
  --color-neutral-100: #FFFFFF;
  --color-neutral-200: var(--light);   /* Section background */
  --color-neutral-300: var(--border);   /* Borders */
  --color-neutral-400: #CBD5E1;
  --color-neutral-500: #6B7280;   /* Muted text */

  /* Neutral Dark */
  --color-neutral-700: var(--text);   /* Body text */
  --color-neutral-800: var(--primary);   /* Heading text */
  --color-neutral-900: #090D16;   /* Near-black */

  /* Status Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* ─── Glassmorphism ─── */
  --glass-bg:           rgba(255, 255, 255, 0.88);
  --glass-border:       rgba(6, 43, 99, 0.08);
  --glass-blur:         18px;
  --glass-dark-bg:      rgba(6, 43, 99, 0.96);
  --glass-dark-border:  rgba(255, 255, 255, 0.08);

  /* ─── Typography ─── */
  --font-headings: 'Poppins', 'Arial', sans-serif;
  --font-body:     'Poppins', 'Arial', sans-serif;

  /* Fluid Font Sizes (clamp) */
  --text-display-1: clamp(2.5rem,  5vw + 1rem, 4.5rem);
  --text-display-2: clamp(2rem,    4vw + 1rem, 3.5rem);
  --text-h1: clamp(2rem, 6vw + 1rem, 4.5rem);
  --text-h2: clamp(1.75rem, 4vw + 1rem, 3rem);
  --text-h3: clamp(1.4rem, 2.5vw + 1rem, 2rem);
  --text-body: clamp(1rem, 0.5vw + 0.8rem, 1.25rem);
  --text-small:     16px;
  --text-hero-title: clamp(42px, 5vw, 72px);

  /* Font Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-widest:   0.12em;

  /* ─── Spacing (8px baseline) ─── */
  --space-3xs:  4px;
  --space-2xs:  8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  
  --space-section-sm: 60px;
  --space-section-md: 100px;
  --space-section-lg: 100px;

  /* ─── Shadows (navy-tinted) ─── */
  --shadow-xs: 0 1px 2px 0 rgba(10, 25, 50, 0.05);
  --shadow-sm: 0 4px 6px -1px rgba(10, 25, 50, 0.04);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow);
  --shadow-xl: var(--shadow);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* ─── Border Radii ─── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  var(--radius);
  --radius-xl:  var(--radius);
  --radius-full: 9999px;

  /* ─── Borders ─── */
  --border-thin:  1px solid var(--color-neutral-300);
  --border-thick: 2px solid var(--color-neutral-300);

  /* ─── Transitions ─── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.30s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow:   0.50s cubic-bezier(0.25, 1, 0.5, 1);

  /* ─── Focus Ring ─── */
  --focus-outline:        2px solid var(--color-accent-500);
  --focus-outline-offset: 3px;

  /* ─── Layout ─── */
  --header-height-desktop: 80px;
  --header-height-tablet: 80px;
  --header-height-mobile: 80px;
  --container-max:         1200px;
  --container-pad:         24px;
  --grid-gap-main:         60px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.7;
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100%;
  overflow-x: hidden;
}

/* ─── Headings ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-sm);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: 1.1rem; font-weight: var(--weight-semibold); }
h5 { font-size: 1rem;  font-weight: var(--weight-semibold); }
h6 { font-size: 16px; font-weight: var(--weight-medium); }

/* ─── Links ─── */
a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-500); }
a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px;
}

/* ─── Paragraphs & Text ─── */
p { margin-bottom: var(--space-sm); line-height: 1.75; }
p:last-child { margin-bottom: 0; }
strong { font-weight: var(--weight-semibold); color: var(--color-neutral-800); }
em { font-style: italic; }
small { font-size: var(--text-xs); }

/* ─── Lists ─── */
ul, ol { padding-left: 1.5em; }
li { margin-bottom: var(--space-2xs); }

/* ─── Images ─── */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Forms baseline ─── */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button { cursor: pointer; }

/* ─── Horizontal Rule ─── */
hr {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-lg) 0;
}

/* ─── Tables ─── */
table { border-collapse: collapse; width: 100%; }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Utility: Visually hidden (accessible) ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Skip to main content ─── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background: var(--color-primary-800);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: var(--weight-semibold);
  z-index: 9999;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ─── Selection ─── */
::selection {
  background-color: var(--color-accent-300);
  color: var(--color-primary-900);
}

/* ─── Scrollbar (Webkit) ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-neutral-200); }
::-webkit-scrollbar-thumb { background: var(--color-primary-700); border-radius: var(--radius-full); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT.CSS — Header, Footer, Page Sections, Container, Grid
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ─── Grid System ─── */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap-main); }
.col-span-6  { grid-column: span 6; }
.col-span-5  { grid-column: span 5; }
.col-span-4  { grid-column: span 4; }
.col-span-8  { grid-column: span 8; }
.col-span-7  { grid-column: span 7; }
.col-span-3  { grid-column: span 3; }
.col-span-9  { grid-column: span 9; }
.col-span-12 { grid-column: span 12; }

.grid-auto-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-lg); }
.grid-auto-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-lg); }
.grid-auto-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-md); }

/* Early Safety Fallbacks & Consolidated Layout Rules for Awards + Gallery Sliders */
/* Moved to the top of the file to guarantee parsing even if stylesheet is truncated/cached during network transit */

.awards-wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Awards & Certifications Grid Containers */
.awards-grid,
#homepage-awards-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 24px !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

#awards-section .awards-slider,
.awards-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 24px !important;
  grid-template-columns: unset !important;
}

.award-card,
.cert-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 24px !important;
  min-height: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
  height: 100% !important;
}

.award-card:hover,
.cert-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.08) !important;
}

.award-card .description,
.award-card p,
.cert-card .description,
.cert-card p {
  display: none !important;
}

.award-card .cert-card__img-wrap,
.cert-card__img-wrap {
  width: auto !important;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
}

.award-card img,
.award-card .product-card__img,
.cert-card img,
.cert-card__img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 20px !important;
  border-radius: 0 !important;
}

.gallery-slider-wrapper .gallery-slider,
.gallery-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 24px !important;
  grid-template-columns: unset !important;
}

.gallery-card,
.gallery-card-item {
  flex: 0 0 calc((100% - 4 * 24px) / 5) !important;
  max-width: calc((100% - 4 * 24px) / 5) !important;
  height: 290px !important;
  box-sizing: border-box !important;
}

.gallery-card img,
.gallery-card-item__image {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 1199px) {
  .gallery-card, .gallery-card-item {
    flex: 0 0 calc((100% - 3 * 24px) / 4) !important;
    width: calc((100% - 3 * 24px) / 4) !important;
    max-width: calc((100% - 3 * 24px) / 4) !important;
    min-width: calc((100% - 3 * 24px) / 4) !important;
  }
}

@media (max-width: 1024px) {
  .gallery-card, .gallery-card-item {
    flex: 0 0 calc((100% - 2 * 24px) / 3) !important;
    width: calc((100% - 2 * 24px) / 3) !important;
    max-width: calc((100% - 2 * 24px) / 3) !important;
    min-width: calc((100% - 2 * 24px) / 3) !important;
  }
}

@media (max-width: 768px) {
  .gallery-card, .gallery-card-item {
    flex: 0 0 calc((100% - 1 * 24px) / 2) !important;
    width: calc((100% - 1 * 24px) / 2) !important;
    max-width: calc((100% - 1 * 24px) / 2) !important;
    min-width: calc((100% - 1 * 24px) / 2) !important;
  }
}

@media (max-width: 599px) {
  .gallery-card, .gallery-card-item {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    height: 270px !important;
  }
}

/* Grid media query overrides for Awards Grid */
@media (max-width: 1200px) {
  .awards-grid,
  #homepage-awards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-flow: row !important;
  }
}

@media (max-width: 768px) {
  .awards-grid,
  #homepage-awards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;
  }
}

.align-center { align-items: center; }
.align-start  { align-items: start; }

@media (max-width: 899px) {
  .grid-12 { grid-template-columns: 1fr; }
  .col-span-6, .col-span-5, .col-span-4, .col-span-8, .col-span-7, .col-span-3, .col-span-9, .col-span-12 { grid-column: span 1; }
}

/* ─── Page Section Defaults ─── */
.section { padding-block: var(--space-section-md); }
.section--sm { padding-block: var(--space-section-sm); }
.section--lg { padding-block: var(--space-section-lg); }
.section--light-gray { background-color: var(--color-neutral-200); }
.section--navy {
  background-color: var(--color-primary-800);
  color: var(--color-neutral-100);
}
.section--navy h2, .section--navy h3 { color: var(--color-neutral-100); }
.section--navy p { color: rgba(255,255,255,0.82); }

/* ─── Section Header ─── */
.section-header {
  text-align: left;
  margin-bottom: var(--space-2xl);
  max-width: 680px;
  margin-inline: 0;
}
.section-header--left { text-align: left; margin-inline: 0; }

.section-header__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-headings);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-500);
  background-color: rgba(255, 138, 0, 0.1);
  border: 1px solid rgba(255, 138, 0, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}
.section--navy .section-header__tag {
  background-color: rgba(255,138,0,0.15);
  border-color: rgba(255,138,0,0.3);
}

.section-header__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-sm);
  line-height: 1.25;
}
.section--navy .section-header__title { color: #fff; }

.section-header__lead {
  font-size: var(--text-body);
  color: var(--color-neutral-500);
  line-height: 1.75;
  margin-bottom: 0;
}
.section--navy .section-header__lead { color: rgba(255,255,255,0.72); }

/* ─── PAGE LAYOUT WRAPPER ─── */
.page-layout { min-height: 100vh; }

/* ─── HEADER ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height-desktop);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  transition: box-shadow var(--transition-normal), background var(--transition-normal);
}
.site-header.scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(255,255,255,0.97);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Logo */
.header-logo { display: flex; align-items: center; flex-shrink: 0; }
.header-logo__img { height: 42px; width: auto; display: block; object-fit: contain; }

/* Desktop Nav */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-desktop__item { position: relative; }
.nav-desktop__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  font-family: var(--font-headings);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-neutral-800);
  border-radius: 12px;
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.nav-desktop__link:hover,
.nav-desktop__link.active {
  color: #ff8c00;
  background: #fff5eb;
  border-radius: 12px;
}
.nav-desktop__link .nav-arrow {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.nav-desktop__item:hover .nav-arrow { transform: rotate(180deg); }

/* Mega Menu */
.mega-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 580px;
  background: #fff;
  border: var(--border-thin);
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  z-index: 100;
}
.nav-desktop__item:hover .mega-menu,
.mega-menu:focus-within {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.mega-menu__col-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary-800);
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-accent-500);
}
.mega-menu__link {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-800);
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-bottom: 2px;
}
.mega-menu__link:hover { background: #fff5eb; color: #ff8c00; }
.mega-menu__link-name {
  font-family: var(--font-headings);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
}
.mega-menu__link-hint {
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  margin-top: 1px;
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: var(--space-xs); }
.header-search-btn, .header-hamburger {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  border-radius: var(--radius-sm);
  color: var(--color-neutral-800);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.header-search-btn:hover, .header-hamburger:hover {
  background: var(--color-neutral-200);
  color: var(--color-accent-500);
}
.header-search-btn svg, .header-hamburger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.header-hamburger { display: none; }

/* ─── MOBILE DRAWER ─── */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
}
.mobile-drawer.open { visibility: visible; }

.mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 23, 51, 0.6);
  opacity: 0;
  transition: opacity var(--transition-normal);
  backdrop-filter: blur(4px);
}
.mobile-drawer.open .mobile-drawer__overlay { opacity: 1; }

.mobile-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 90vw);
  background: #fff;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.open .mobile-drawer__panel { transform: translateX(0); }

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: var(--border-thin);
  flex-shrink: 0;
}
.mobile-drawer__head img { height: 40px; width: auto; }
.mobile-drawer__close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  color: var(--color-neutral-800);
}
.mobile-drawer__close:hover { background: var(--color-neutral-300); }
.mobile-drawer__close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.mobile-nav { list-style: none; padding: var(--space-md); flex: 1; }
.mobile-nav__item { border-bottom: 1px solid var(--color-neutral-200); }
.mobile-nav__link {
  display: block;
  padding: var(--space-sm) var(--space-xs);
  font-family: var(--font-headings);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-800);
  transition: color var(--transition-fast);
}
.mobile-nav__link:hover { color: var(--color-accent-500); }

.mobile-drawer__cta {
  padding: var(--space-md);
  border-top: var(--border-thin);
  flex-shrink: 0;
}
.mobile-drawer__cta .btn { width: 100%; justify-content: center; }

/* ─── MOBILE FLOATING CTA ─── */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: var(--space-md);
  left: 0; right: 0;
  z-index: 900;
  padding-inline: var(--space-md);
  gap: var(--space-xs);
  pointer-events: none;
}
.mobile-fab__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 14px var(--space-sm);
  border-radius: var(--radius-full);
  font-family: var(--font-headings);
  font-weight: var(--weight-semibold);
  font-size: 16px;
  color: #fff;
  border: none;
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.mobile-fab__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); }
.mobile-fab__btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.mobile-fab__btn--call { background: var(--color-primary-800); }
.mobile-fab__btn--wa   { background: #25d366; }

/* ─── FOOTER ─── */
.site-footer {
  background-color: var(--color-primary-900);
  color: rgba(255,255,255,0.75);
  padding-top: var(--space-3xl);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-logo { height: 44px; width: auto; margin-bottom: var(--space-md); filter: brightness(0) invert(1); opacity: 0.9; }
.footer-tagline { font-size: var(--text-small); line-height: 1.7; margin-bottom: var(--space-md); }
.footer-links-connect { display: flex; gap: var(--space-xs); }
.footer-link-connect {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,0.75);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-link-connect:hover { background: var(--color-accent-500); border-color: var(--color-accent-500); color: #fff; }
.footer-link-connect svg { width: 16px; height: 16px; fill: currentColor; }

.footer-col-title {
  font-family: var(--font-headings);
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-md);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-link {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.65);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: flex; align-items: center; gap: 6px;
}
.footer-link:hover { color: var(--color-accent-400); padding-left: 4px; }

.footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-contact-item { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--text-small); }
.footer-contact-item svg { width: 16px; height: 16px; stroke: var(--color-accent-400); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 3px; }
.footer-contact-item span { color: rgba(255,255,255,0.72); line-height: 1.5; }

.footer-hours {
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255,138,0,0.1);
  border: 1px solid rgba(255,138,0,0.2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-accent-300);
}
.footer-hours strong { display: block; color: var(--color-accent-400); margin-bottom: 2px; }

.footer-map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: 8px var(--space-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.8);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.footer-map-btn:hover { background: var(--color-accent-500); border-color: var(--color-accent-500); color: #fff; }
.footer-map-btn svg { width: 14px; height: 14px; fill: currentColor; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}
.footer-copyright { font-size: var(--text-xs); color: rgba(255,255,255,0.45); }
.footer-cert { font-size: var(--text-xs); color: var(--color-accent-400); font-weight: var(--weight-semibold); }
.footer-legal-links { display: flex; gap: var(--space-md); list-style: none; }
.footer-legal-link { font-size: var(--text-xs); color: rgba(255,255,255,0.45); }
.footer-legal-link:hover { color: var(--color-accent-400); }

/* ─── Breadcrumb ─── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--color-neutral-500);
  padding: var(--space-sm) 0; list-style: none; flex-wrap: wrap;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: '/'; color: var(--color-neutral-400); margin-right: 6px;
}
.breadcrumb__link { color: var(--color-neutral-500); }
.breadcrumb__link:hover { color: var(--color-accent-500); }
.breadcrumb__current { color: var(--color-neutral-800); font-weight: var(--weight-medium); }

/* ─── Page Hero Banner (inner pages) ─── */
.page-hero {
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 100%);
  padding: 80px 0 60px !important;
  min-height: 380px !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><rect width="60" height="60" fill="none"/><path d="M0 60L60 0M-10 10L10-10M50 70L70 50" stroke="rgba(255,255,255,0.04)" stroke-width="1"/></svg>') repeat;
  pointer-events: none;
}
.page-hero__content { position: relative; z-index: 2; }
.page-hero__tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-400); margin-bottom: var(--space-xs); }
.page-hero__title { font-size: var(--text-hero-title); color: #fff; line-height: 1.15; font-weight: 800; margin-bottom: var(--space-sm); max-width: 900px; }
.page-hero__title--long { font-size: clamp(28px, 4vw, 44px); }
.page-hero__lead { color: rgba(255,255,255,0.75); font-size: var(--text-body); max-width: 700px; line-height: 1.7; }

.page-hero__wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
}
.page-hero__wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}
.page-hero__wave .shape-fill {
  fill: #ffffff;
}

/* Breadcrumbs on dark backgrounds */
.page-hero .breadcrumb__link { color: rgba(255, 255, 255, 0.7); }
.page-hero .breadcrumb__link:hover { color: var(--color-accent-400); }
.page-hero .breadcrumb__current { color: var(--color-neutral-100); }
.page-hero .breadcrumb__item + .breadcrumb__item::before { color: rgba(255, 255, 255, 0.4); }

/* ─── Responsive ─── */
@media (max-width: 1439px) {
  .nav-desktop { gap: 28px; }
  .nav-desktop__link { font-size: 17px; padding: 10px 14px; }
}
@media (max-width: 1279px) {
  .nav-desktop { gap: 22px; }
  .nav-desktop__link { font-size: 16px; }
  .header-actions .btn { padding: 14px 26px; font-size: 15px; }
}
@media (max-width: 1199px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .header-hamburger { display: flex; }
  .nav-desktop, .header-search-btn { display: none; }
  .header-actions .btn { display: none; }
}
@media (max-width: 899px) {
  .site-header { height: var(--header-height-mobile); }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; text-align: center; }
  .mobile-fab { display: flex; }
  .section { padding-block: var(--space-section-sm); }
  .page-hero { padding: 100px 0 60px; min-height: auto; }
}


  
.hero {
  position: relative;
  min-height: 92vh;
  height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-primary-900);
}
.hero__slide {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero__slide.active { opacity: 1; pointer-events: all; }

.hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 6s ease;
}
.hero__slide.active .hero__bg { transform: scale(1); }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(2,23,51,0.88) 0%, rgba(6,43,99,0.65) 60%, rgba(6,43,99,0.3) 100%);
}

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: var(--space-xl);
}
.hero__content { max-width: 620px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin-bottom: var(--space-md);
}
.hero__eyebrow::before {
  content: '';
  width: 24px; height: 2px;
  background: var(--color-accent-500);
}

.hero__title {
  font-size: var(--text-display-2);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}
.hero__title em { font-style: normal; color: var(--color-accent-400); }

.hero__desc {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(255,255,255,0.8);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
  max-width: 520px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 48px;
  font-size: var(--font-btn, 16px);
  font-weight: 600;
  border-radius: 10px;
  padding-inline: 24px;
  font-family: var(--font-headings);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  border: 2px solid transparent;
  white-space: nowrap;
  line-height: 1;
}

.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255,138,0,0.3);
}

.btn--primary:hover {
  background-color: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(255,138,0,0.4);
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-primary-800);
  color: var(--color-primary-800);
}

.btn--secondary:hover {
  background-color: var(--color-primary-800);
  color: #ffffff;
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

.btn--navy {
  background-color: var(--color-primary-800);
  border-color: var(--color-primary-800);
  color: #ffffff;
}

.btn--navy:hover {
  background-color: var(--color-primary-900);
  border-color: var(--color-primary-900);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.btn--small {
  padding: 8px var(--space-md);
  font-size: var(--text-xs);
  min-height: 36px;
  height: auto;
}

.btn--large {
  padding: 16px var(--space-xl);
  font-size: 1rem;
  height: auto;
}

.btn--icon-only {
  padding: 10px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
}

/* Secondary & ghost buttons on dark backgrounds */
.section--navy .btn--secondary,
.page-hero .btn--secondary,
.hero .btn--secondary,
.site-footer .btn--secondary,
.cta-section .btn--secondary,
.btn--secondary-white {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.section--navy .btn--secondary:hover,
.page-hero .btn--secondary:hover,
.hero .btn--secondary:hover,
.site-footer .btn--secondary:hover,
.cta-section .btn--secondary:hover,
.btn--secondary-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--small svg {
  width: 14px;
  height: 14px;
}

  
  /* ----------------- Audited CSS Fixes ----------------- */
  :root { 
    --text-h4: 24px; 
    --hero-lead-max-width: 640px;
  }
  @media (max-width: 1199px) { :root { --text-h4: 22px; } }
  @media (max-width: 899px)  { :root { --text-h4: 20px; } }
  @media (max-width: 599px)  { :root { --text-h4: 18px; } }

  .container--narrow { max-width: 800px !important; }
  .container--medium { max-width: 900px !important; }
  .container--wide    { max-width: 960px !important; }

  .page-hero { min-height: auto !important; }
  .hero { min-height: 100svh !important; height: 100svh !important; }
  @media (max-width: 899px) {
    .page-hero { min-height: 320px !important; }
  }

  .breadcrumb__current {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
  }

  .page-hero::after { content: none !important; }
  .page-hero__title { overflow-wrap: break-word; }
  
  .page-hero__title, .hero__title {
    font-size: clamp(2rem, 4vw + 1rem, 4.5rem) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  .hero__desc, .page-hero__lead {
    max-width: var(--hero-lead-max-width, 640px) !important;
  }

  .btn--full-width { width: 100%; }
  .btn--small-compact { padding: 8px 14px; font-size: var(--text-xs); min-height: 32px; }

  
/* ─── GLOBAL SYSTEM OVERRIDES ─── */

:root {
  /* Color System */
  --color-primary: #0D1B2A;
  --color-secondary: #18263B;
  --color-accent: #F59E0B;
  --color-bg: #F8FAFC;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-border: #E5E7EB;
  --color-success: #10B981;

  /* Typography Scale */
  --font-h1: 48px;
  --font-h2: 36px;
  --font-h3: 28px;
  --font-p: 18px;
  --font-small: 14px;
  --font-btn: 16px;

  /* Line Heights */
  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.4;
  --lh-p: 1.8;
}

@media (max-width: 1440px) {
  :root {
    --font-h1: 40px;
    --font-h2: 32px;
    --font-h3: 24px;
    --font-p: 18px;
  }
}

@media (max-width: 899px) {
  :root {
    --font-h1: 32px;
    --font-h2: 28px;
    --font-h3: 22px;
    --font-p: 17px;
  }
}

@media (max-width: 599px) {
  :root {
    --font-h1: 28px;
    --font-h2: 24px;
    --font-h3: 20px;
    --font-p: 16px;
  }
}

/* Base Body Styles */
body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: 'Poppins', Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, p, li, a, button, input, textarea, select {
  font-family: 'Poppins', Arial, sans-serif !important;
}

h1 {
  font-size: var(--font-h1) !important;
  line-height: var(--lh-h1) !important;
}

h2 {
  font-size: var(--font-h2) !important;
  line-height: var(--lh-h2) !important;
}

h3 {
  font-size: var(--font-h3) !important;
  line-height: var(--lh-h3) !important;
}

p, li {
  font-size: var(--font-p) !important;
  line-height: var(--lh-p) !important;
  color: var(--color-text) !important;
}

p.muted, p.secondary, .text-secondary, .footer-tagline, .footer-link, .breadcrumb__link {
  color: var(--color-text-secondary) !important;
}

small, .small-text, .footer-copyright, .footer-legal-link, .breadcrumb {
  font-size: var(--font-small) !important;
}

/* Container & Section System */
.container {
  width: 100% !important;
  max-width: 1280px !important; /* Desktop: 1200px-1280px range */
  padding-inline: 24px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Laptop layout */
@media (max-width: 1366px) {
  .container {
    max-width: 1140px !important; /* Laptop: 1100px-1200px range */
  }
}

/* Tablet layout */
@media (max-width: 1199px) {
  .container {
    width: 90% !important; /* Tablet: 90% width */
    max-width: none !important;
    padding-inline: 0 !important;
  }
}

/* Mobile layout */
@media (max-width: 899px) {
  .container {
    width: 93% !important; /* Mobile: 92%-94% width */
    max-width: none !important;
    padding-inline: 0 !important;
  }
}

.section {
  padding-block: 100px !important;
  box-sizing: border-box !important;
}

@media (max-width: 899px) {
  .section {
    padding-block: 60px !important;
  }
}

/* Header System overrides */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: 80px !important;
  box-sizing: border-box !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  display: flex !important;
  align-items: center !important;
}

.header-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-left: 24px !important; /* Left Container Padding: 24px */
  padding-right: 24px !important; /* Right Container Padding: 24px */
  max-width: 1200px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.header-logo {
  display: flex !important;
  align-items: center !important;
  margin-right: 40px !important; /* Logo to Menu Gap: 40px */
  margin-left: 12px !important; /* Move logo slightly toward center for equal breathing space */
  flex-shrink: 0 !important;
}

.header-logo__img {
  height: 40px !important; /* Logo Height: 40px */
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.nav-desktop {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important; /* Menu Item Gap: 32px */
  margin-right: auto !important; /* Push button to the right */
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-desktop__link {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 0 !important; /* Zero horizontal padding, rely on gap */
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  transition: color var(--transition-fast) !important;
  background: transparent !important;
  white-space: nowrap !important;
}

.nav-desktop__link:hover,
.nav-desktop__link.active {
  color: var(--color-accent) !important;
  background: transparent !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important; /* Button Gap: 32px */
  flex-shrink: 0 !important;
  margin-right: 12px !important; /* Balanced with logo margin */
}

.header-actions .btn {
  height: 48px !important; /* CTA Button: 48px Height */
  line-height: 1 !important;
  padding-block: 0 !important;
}

/* Tablet & Desktop Navigation Display Rules */
@media (min-width: 769px) {
  .nav-desktop {
    display: flex !important;
  }
  .header-hamburger {
    display: none !important;
  }
  .header-actions .btn {
    display: inline-flex !important;
  }
}

/* Compact Tablet/Laptop Menu */
@media (min-width: 769px) and (max-width: 1120px) {
  .nav-desktop {
    gap: 16px !important; /* Compact item gap */
  }
  .nav-desktop__link {
    font-size: 14px !important; /* Compact font size */
  }
  .header-logo {
    margin-right: 20px !important;
    margin-left: 0 !important;
  }
  .header-actions {
    gap: 16px !important;
    margin-right: 0 !important;
  }
}

/* Mobile Navigation Display Rules */
@media (max-width: 899px) {
  .nav-desktop {
    display: none !important;
  }
  .header-hamburger {
    display: flex !important;
  }
  .header-actions .btn {
    display: none !important;
  }
}


/* Hero & Page Hero Systems */
.hero, .page-hero {
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding-block: 100px !important;
}

.hero__container, .page-hero__content {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.hero__content, .page-hero__content {
  max-width: 900px !important;
}

/* Card System */
.product-card,
.homepage-product-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.product-card:hover,
.homepage-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 27, 42, 0.08);
  border-color: var(--secondary);
}

.stat-card,
.pdp-info__stat-card,
.pdp-info__stat-card-redesign,
.quick-facts-card {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover,
.pdp-info__stat-card:hover,
.pdp-info__stat-card-redesign:hover,
.quick-facts-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.content-card,
.award-card,
.cert-card,
.credentials-card,
.download-card,
.testimonial-card,
.gallery-card,
.team-card,
.tour-img-card,
.application-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  box-shadow: var(--shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.content-card:hover,
.award-card:hover,
.cert-card:hover,
.credentials-card:hover,
.download-card:hover,
.testimonial-card:hover,
.gallery-card:hover,
.team-card:hover,
.tour-img-card:hover,
.application-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(13, 27, 42, 0.08);
  border-color: var(--secondary);
}

.grid-12, .grid-auto-2, .grid-auto-3, .grid-auto-4 {
  gap: 24px;
}

/* Article System overrides */
article, .article-container, .biography-block, .highlights-block, .blog-post-content, .legal-content-wrap, .rich-text {
  max-width: 800px !important;
  margin-inline: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

article p, .article-container p, .biography-block p, .highlights-block p, .blog-post-content p, .legal-content-wrap p, .rich-text p {
  margin-bottom: 24px !important;
}

article section, .article-container section, .article-section {
  margin-bottom: 40px !important;
}

/* Image System overrides */
.featured-image,
.tour-img,
.gallery-card img,
.tour-images-wrap img,
.product-card__img,
.video-card__poster,
.award-card__img,
.application-card__img,
#pdp-viewer-img,
.gallery-grid img {
  border-radius: 16px !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  width: 100% !important;
}

@media (max-width: 899px) {
  .featured-image,
  .tour-img,
  .gallery-card img,
  .tour-images-wrap img,
  .product-card__img,
  .video-card__poster,
  .award-card__img,
  .application-card__img,
  #pdp-viewer-img,
  .gallery-grid img {
    aspect-ratio: auto !important;
    width: 100% !important;
  }
}

/* Exclude logos, badges, and certificates from being cropped */
.cert-card__img,
.cert-badge img,
.footer-logo,
.header-logo__img,
img[src*="badge"],
img[src*="logo"],
img[src*="certificate"] {
  border-radius: 8px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  max-width: 100% !important;
}

/* Footer System overrides */
.site-footer {
  background-color: var(--color-primary) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding-block: 100px 40px !important;
  box-sizing: border-box !important;
}

.footer-top {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
  gap: 48px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding-bottom: 48px !important;
}

@media (max-width: 1199px) {
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

.footer-col-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
}

.footer-links {
  gap: 12px !important;
}

.footer-link {
  font-size: 14px !important;
}

.footer-bottom {
  padding-top: 24px !important;
}

.faq-dynamic-hidden {
  display: none !important;
}

/* ══════════════════════════════════════
   GLOBAL HERO & DARK BACKGROUND TYPOGRAPHY SYSTEM
   ══════════════════════════════════════ */
.hero,
.page-hero,
.section--navy,
.cta-section,
.site-footer,
[class*="section--navy"],
[class*="cta-section"] {
  /* Headings */
  h1, h2, h3, h4, h5, h6,
  .hero__title, .page-hero__title,
  .section-header__title, .footer-col-title {
    color: #ffffff !important;
  }

  /* Paragraphs, list items, and standard body text */
  p, li, span:not(.cert-badge):not(.section-header__tag):not(.page-hero__tag):not(.hero__eyebrow), 
  .hero__desc, .page-hero__lead, .footer-tagline, .footer-contact-item span {
    color: #ffffff !important;
    opacity: 0.9 !important; /* Premium readability opacity */
  }

  /* Breadcrumbs on dark backgrounds */
  .breadcrumb, .breadcrumb__item, .breadcrumb__item::before {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .breadcrumb__link {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  .breadcrumb__link:hover {
    color: var(--color-accent) !important;
  }
  .breadcrumb__current {
    color: #ffffff !important;
  }

  /* Eyebrows, tags, and small taglines */
  .section-header__tag,
  .page-hero__tag,
  .hero__eyebrow {
    color: var(--color-accent) !important; /* Keep Accent Orange */
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    opacity: 1 !important;
  }

  /* Highlighted text / emphases */
  em, strong, .accent-text, .text-accent {
    color: var(--color-accent) !important;
    opacity: 1 !important;
  }

  /* Standard anchor links */
  a:not(.btn):not(.nav-desktop__link):not(.mega-menu__link) {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline !important;
  }
  a:not(.btn):not(.nav-desktop__link):not(.mega-menu__link):hover {
    color: var(--color-accent) !important;
  }
}

/* ══════════════════════════════════════
   HERO STATS BAR & CERTIFICATE SECTION FIXES
   ══════════════════════════════════════ */
.iso-badge-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.cert-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: all var(--transition-fast) !important;
}

.hero__content .cert-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

.hero__content .cert-badge:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--color-accent) !important;
}

.cert-badge img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Stats Section Height & Margin overrides */
.stats-strip {
  background: linear-gradient(90deg, var(--color-primary-800) 0%, var(--color-primary-700) 100%) !important;
  padding-block: 16px !important; /* Exactly 50% of the original 48px padding-block (resulting in ~80px overall height) */
  margin-top: 32px !important; /* Desktop: 24px–32px gap from hero banner above */
}

.stats-grid {
  gap: 12px !important;
}

.stat-item {
  padding-block: 0 !important; /* Zero padding inside item to reduce vertical spacing */
}

.stat-num {
  margin-bottom: 4px !important; /* Reduced vertical spacing between number and label by 50% (from 8px to 4px) */
}

@media (max-width: 1440px) {
  .stats-strip {
    margin-top: 24px !important; /* Laptop: 20px–28px gap */
  }
}

@media (max-width: 1199px) {
  .stats-strip {
    margin-top: 20px !important; /* Tablet: 20px gap */
  }
}

@media (max-width: 899px) {
  .stats-strip {
    padding-block: 12px !important; /* Proportional reduction for mobile */
    margin-top: 16px !important; /* Mobile: 16px–20px gap */
  }
  .stats-grid {
    gap: 8px !important;
  }
}

/* Responsive layout for badges: 2x2 grid on mobile */
@media (max-width: 599px) {
  .iso-badge-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .cert-badge {
    padding: 6px 12px !important;
    font-size: 12px !important;
    height: 36px !important;
    justify-content: flex-start !important;
  }
}

/* ══════════════════════════════════════
   GLOBAL HERO TITLE OVERRIDES
   ══════════════════════════════════════ */
.hero__title, .page-hero__title {
  font-family: 'Poppins', Arial, sans-serif !important;
  font-weight: 800 !important; /* Font Weight: 700-800 */
  line-height: 1.15 !important; /* Line Height: 1.1-1.2 */
  letter-spacing: -0.025em !important; /* Slightly tightened letter spacing */
  color: #ffffff !important; /* Make the entire heading WHITE */
  text-shadow: none !important;
  margin-bottom: 32px !important; /* Spacing: Heading to Description */
  
  /* Desktop sizing (default) */
  font-size: 64px !important; /* Desktop: 60px–72px */
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Ensure no orange highlights inside hero titles */
.hero__title em, .page-hero__title em,
.hero__title strong, .page-hero__title strong,
.hero__title span, .page-hero__title span {
  color: #ffffff !important;
  font-style: normal !important;
  text-shadow: none !important;
}

/* Laptop sizing (1025px to 1440px) */
@media (max-width: 1440px) {
  .hero__title, .page-hero__title {
    font-size: 56px !important; /* Laptop: 52px–60px */
  }
}

/* Tablet sizing (769px to 1024px) */
@media (max-width: 1199px) {
  .hero__title, .page-hero__title {
    font-size: 44px !important; /* Tablet: 42px–48px */
  }
}

/* Mobile sizing (up to 768px) */
@media (max-width: 899px) {
  .hero__title, .page-hero__title {
    font-size: 34px !important; /* Mobile: 32px–38px */
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
  }
}

/* ══════════════════════════════════════
   GLOBAL HERO DESCRIPTION OVERRIDES
   ══════════════════════════════════════ */
.hero__desc, .page-hero__lead {
  max-width: 540px !important; /* Desktop width: 500px–600px */
  margin-bottom: 32px !important; /* Spacing: Description to Buttons */
  font-size: 18px !important;
  line-height: 1.5 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Laptop width overrides */
@media (max-width: 1440px) {
  .hero__desc, .page-hero__lead {
    max-width: 480px !important; /* Laptop width: 450–500px */
  }
}

/* Tablet width overrides */
@media (max-width: 1199px) {
  .hero__desc, .page-hero__lead {
    max-width: 420px !important; /* Tablet width: 400–450px */
  }
}

/* Mobile width overrides */
@media (max-width: 899px) {
  .hero__desc, .page-hero__lead {
    max-width: 100% !important; /* Mobile width: 100% with padding */
    margin-bottom: 24px !important;
    font-size: 16px !important;
  }
}

/* Company Overview Grid Stacking on Mobile/Tablet */
@media (max-width: 899px) {
  #overview-details-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ══════════════════════════════════════
   GLOBAL PRODUCT CARD ALIGNMENT & TYPOGRAPHY FIXES
   ══════════════════════════════════════ */
/* Grid alignment */
.product-grid, .grid-auto-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 320px)) !important;
  gap: 30px !important;
  justify-content: start !important;
  align-items: start !important;
  width: 100% !important;
}

/* Card container */
.product-card {
  width: 320px !important;
  min-height: 620px !important;
  border-radius: 20px !important; /* Border Radius: 20px */
  padding: 32px !important; /* Padding: 32px */
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: all var(--transition-fast) !important;
}

/* Hover state */
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(13, 27, 42, 0.08) !important;
  border-color: var(--color-accent) !important;
}

/* Image section */
.product-card__img,
.product-card img,
.product-card__img-wrap img {
  width: 100% !important;
  height: 220px !important; /* Height: 220px */
  object-fit: cover !important; /* Object Fit: Cover */
  border-radius: 16px !important; /* Border Radius: 16px */
  display: block !important;
  margin-bottom: 24px !important; /* Spacing: Image to Title */
}

/* Title container and typography */
.product-card__title,
.product-card h3 {
  font-family: var(--font-headings) !important;
  font-weight: 700 !important; /* Font Weight: 700 */
  line-height: 1.25 !important; /* Line Height: 1.25 */
  color: var(--color-primary) !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important; /* Title to Paragraph Spacing (24px gap) */
  min-height: 160px !important; /* Fixed minimum height to keep paragraph start aligned */
  display: flex !important;
  align-items: flex-start !important;
  
  /* Desktop Title Font Size */
  font-size: 28px !important; /* Desktop: 28px */
  
  /* Limit to max 3 lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Subtitle / Paragraph Section */
.product-card__desc,
.product-card p {
  font-size: 16px !important; /* Font Size: 16px */
  line-height: 1.6 !important; /* Line Height: 1.6 */
  color: var(--color-text-secondary) !important; /* Color: Secondary Text Color */
  margin-top: 0 !important;
  margin-bottom: 32px !important; /* Paragraph to Button Spacing (32px gap) */
  flex-grow: 1 !important; /* Stretch container content */
  
  /* Limit description to 2-3 lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Ensure specifications or price sub-blocks also push buttons to the bottom */
.product-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 0 !important; /* Let outer card handle padding */
}

/* Specs list styling if present */
.product-card__body div[style*="font-size:0.85rem"] {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  color: var(--color-text) !important;
}

/* Buttons area placement */
.product-card__footer,
.product-card__body div[style*="display:flex"] {
  margin-top: auto !important; /* Keep buttons cleanly aligned at the bottom of all cards */
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
}

.product-card .btn,
.product-card__footer .btn {
  height: 44px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Laptop Typography & Layout */
@media (max-width: 1440px) {
  .product-card__title, .product-card h3 {
    font-size: 26px !important; /* Laptop: 26px */
    min-height: 140px !important;
  }
}

/* Tablet Typography & Layout */
@media (max-width: 1199px) {
  .product-grid, .grid-auto-3 {
    grid-template-columns: repeat(auto-fill, minmax(320px, 320px)) !important;
    gap: 24px !important;
  }
  .product-card__title, .product-card h3 {
    font-size: 24px !important; /* Tablet: 24px */
    min-height: 120px !important;
  }
}

/* Mobile Typography & Layout */
@media (max-width: 899px) {
  .product-grid, .grid-auto-3 {
    grid-template-columns: repeat(auto-fill, minmax(320px, 320px)) !important;
    gap: 24px !important;
  }
  .product-card {
    padding: 24px !important; /* slightly compact padding for mobile */
  }
  .product-card__title, .product-card h3 {
    font-size: 22px !important; /* Mobile: 22px */
    min-height: auto !important;
  }
  .product-card__img,
  .product-card img,
  .product-card__img-wrap img {
    height: 200px !important; /* compact image height for mobile */
  }
}

/* ══════════════════════════════════════
   GLOBAL FOOTER ALIGNMENT & TYPOGRAPHY FIXES
   ══════════════════════════════════════ */
/* Grid and column alignment */
.footer-top {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
  gap: 48px !important;
  align-items: start !important; /* All columns start from identical top position */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 48px !important;
}

/* Logo positioning and sizing */
.footer-logo {
  width: 200px !important; /* Recommended width: 180px–220px */
  height: auto !important;
  display: block !important;
  margin-bottom: 32px !important; /* Bottom Margin: 32px */
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

/* Company Description / Tagline */
.footer-tagline {
  font-size: 18px !important; /* Font Size: 18px */
  line-height: 1.8 !important; /* Line Height: 1.8 */
  max-width: 340px !important; /* Max Width: 320px–360px */
  margin-bottom: 32px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Column Headings */
.footer-col-title,
.site-footer h3 {
  font-family: var(--font-headings) !important;
  font-size: 28px !important; /* Font Size: 28px */
  font-weight: 700 !important; /* Font Weight: 700 */
  letter-spacing: 0.5px !important; /* Letter Spacing: 0.5px */
  margin-bottom: 32px !important; /* Bottom Margin: 32px */
  margin-top: 0 !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

/* Link Spacing & Typography */
.footer-links {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important; /* Gap between links: 16px–18px */
  padding: 0 !important;
  margin: 0 !important;
}

.footer-link {
  font-size: 16px !important;
  line-height: 1.8 !important; /* Line Height: 1.8 */
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color var(--transition-fast), padding-left var(--transition-fast) !important;
  text-decoration: none !important;
}

.footer-link:hover {
  color: var(--color-accent-400) !important;
  padding-left: 4px !important;
}

/* Contact Information */
.footer-contact-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

.footer-contact-item svg {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--color-accent-400) !important;
  fill: none !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
  margin-top: 6px !important; /* Vertically aligned with first line of text */
}

.footer-contact-item span,
.footer-contact-item a {
  font-size: 18px !important; /* Font Size: 18px */
  line-height: 1.8 !important; /* Line Height: 1.8 */
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}

.footer-contact-item a:hover {
  color: var(--color-accent-400) !important;
}

/* Working Hours Card */
.footer-hours {
  margin-top: 32px !important;
  padding: 12px 16px !important; /* Reduced internal padding slightly */
  background: rgba(255, 138, 0, 0.08) !important;
  border: 1px solid rgba(255, 138, 0, 0.2) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--color-accent-300) !important;
  width: 100% !important; /* Align perfectly with the column width */
  box-sizing: border-box !important;
}

.footer-hours strong {
  display: block !important;
  color: var(--color-accent-400) !important;
  margin-bottom: 4px !important;
  font-size: 16px !important;
}

/* Social Icons Connected */
.footer-links-connect {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important; /* Gap: 16px */
  margin-top: 32px !important; /* Margin Top: 32px */
  align-items: center !important;
}

.footer-link-connect {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-full) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: background var(--transition-fast), color var(--transition-fast) !important;
}

.footer-link-connect:hover {
  background: var(--color-accent-500) !important;
  border-color: var(--color-accent-500) !important;
  color: #ffffff !important;
}

/* Map Button styling */
.footer-map-btn {
  margin-top: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  height: 44px !important;
  font-size: 15px !important;
}

/* Responsive Footer Layout Rules */
/* Tablet: 2 columns */
@media (max-width: 1199px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important; /* Spacing between stacked sections: 40px */
  }
  .footer-logo {
    margin-bottom: 24px !important;
  }
}

/* Mobile: Single column */
@media (max-width: 899px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 40px !important; /* Spacing between stacked sections: 40px */
  }
  .footer-tagline {
    max-width: 100% !important; /* Fluid width on mobile */
  }
}



/* About Page Details Grid (Entity Profile & Key Facts side-by-side) */
@media (max-width: 1199px) {
  #about-details-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important; /* Stacked spacing on tablet/mobile: 24px */
  }
}

/* Highlights Grid Stacking on Mobile/Tablet */
@media (max-width: 899px) {
  #highlights-details-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* About Page Meta Info Grid (Verified Manufacturer & Shortcuts side-by-side) */
@media (max-width: 1199px) {
  #about-meta-info-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important; /* Stacked spacing on tablet/mobile: 24px */
  }
}

/* About Page Premium Awards Grid */
.about-awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
  margin-top: 40px;
}
@media (max-width: 1199px) {
  .about-awards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 899px) {
  .about-awards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.about-award-card {
  background: #f8fafc;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
  text-align: left;
}

.about-award-title-wrap {
  height: 140px; /* Fixed height for title area */
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px; /* Space between Title & Divider */
}

.about-award-title {
  font-size: 40px !important; /* Font Size: 40px */
  font-weight: 700 !important; /* Font Weight: 700 */
  line-height: 1.2 !important; /* Line Height: 1.2 */
  color: var(--color-primary-800) !important;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.about-award-divider {
  height: 2px;
  background-color: var(--color-accent-500); /* Orange divider line */
  width: 100%;
  margin-bottom: 24px; /* Space between Divider & Description */
}

.about-award-desc {
  font-size: 18px !important; /* Font Size: 18px */
  line-height: 1.8 !important; /* Line Height: 1.8 */
  color: var(--color-neutral-700) !important;
  margin: 0;
  min-height: 140px; /* Min height for description */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ─── Premium Alternating Timeline Redesign ─── */
.modern-timeline {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 0;
}

/* Center vertical line */
.modern-timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-accent-500); /* Orange center line */
  transform: translateX(-50%);
  z-index: 1;
}

/* Individual timeline rows */
.modern-timeline__item {
  display: flex;
  position: relative;
  margin-bottom: 120px; /* Spacing between items: 120px */
  align-items: center;
  z-index: 2;
}

.modern-timeline__item:last-child {
  margin-bottom: 0;
}

/* Equal width columns: text-wrap and image-wrap */
.modern-timeline__content-wrap,
.modern-timeline__image-wrap {
  width: 50%;
  box-sizing: border-box;
}

.modern-timeline__content-wrap {
  padding: 0 40px; /* Gives 80px gap between text and image (40px + 40px) */
}

.modern-timeline__image-wrap {
  padding: 0 40px;
}

/* Specific alignments for Left vs Right patterns */
.modern-timeline__item--left {
  flex-direction: row;
}

.modern-timeline__item--right {
  flex-direction: row;
}

/* Center timeline dot connecting directly to center line */
.modern-timeline__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border: 4px solid var(--color-accent-500); /* Orange border */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.2);
  transition: all 0.3s ease;
}

.modern-timeline__item:hover .modern-timeline__dot {
  background-color: var(--color-accent-500);
  transform: translate(-50%, -50%) scale(1.2);
}

/* Text Card Styling */
.modern-timeline__card {
  background: #ffffff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
  width: 520px !important;
  height: 420px !important;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modern-timeline__item--left .modern-timeline__card {
  margin-left: auto; /* Align left column card to the right side of its 50% box */
}

.modern-timeline__item--right .modern-timeline__card {
  margin-right: auto; /* Align right column card to the left side of its 50% box */
}

.modern-timeline__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.modern-timeline__year {
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-accent-500);
  margin-bottom: var(--space-2xs);
  line-height: 1;
}

.modern-timeline__title {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 700;
  color: var(--color-primary-900);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Maximum 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-timeline__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-neutral-700);
  margin-bottom: auto; /* Push CTA to bottom */
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Maximum 6 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-timeline__cta {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-600);
  text-decoration: none;
  transition: color 0.2s ease;
  margin-top: 16px;
}

.modern-timeline__cta:hover {
  color: var(--color-accent-700);
}

/* Image container & dimensions */
.modern-timeline__img {
  width: 520px !important;
  height: 320px !important;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  display: block;
}

.modern-timeline__item--left .modern-timeline__img {
  margin-right: auto; /* Push image to the left side of its box */
}

.modern-timeline__item--right .modern-timeline__img {
  margin-left: auto; /* Push image to the right side of its box */
}

/* ─── Tablet Responsive overrides ─── */
@media (max-width: 1199px) {
  .modern-timeline {
    max-width: 900px;
  }
  .modern-timeline__content-wrap,
  .modern-timeline__image-wrap {
    width: 50% !important;
    padding: 0 20px;
  }
  .modern-timeline__card {
    width: 100% !important;
    max-width: none !important;
    height: 420px !important; /* Keep same height */
  }
  .modern-timeline__img {
    width: 100% !important;
    max-width: none !important;
    height: 320px !important; /* Keep same height */
  }
}

/* ─── Mobile Responsive overrides ─── */
@media (max-width: 899px) {
  .modern-timeline__line {
    left: 20px; /* Push center line to the left edge */
    transform: none;
  }
  
  .modern-timeline__item {
    flex-direction: column !important; /* Stack vertically */
    align-items: flex-start !important;
    margin-bottom: 60px;
    padding-left: 50px; /* Indent everything to the right of the line */
  }
  
  .modern-timeline__content-wrap,
  .modern-timeline__image-wrap {
    width: 100% !important;
    padding: 0 !important;
  }
  
  .modern-timeline__dot {
    left: 20px; /* Align with left vertical line */
    top: 0;
    transform: translate(-50%, 0);
  }
  
  .modern-timeline__item:hover .modern-timeline__dot {
    transform: translate(-50%, 0) scale(1.2);
  }

  .modern-timeline__image-wrap {
    order: 1; /* Image always on top of text */
    margin-bottom: 20px;
  }
  
  .modern-timeline__content-wrap {
    order: 2; /* Text below image */
  }

  .modern-timeline__card {
    border: none;
    padding: 0;
    box-shadow: none;
    background: transparent;
    width: 100% !important;
    height: auto !important; /* Flow naturally on mobile screen */
  }
  
  .modern-timeline__img {
    width: 100% !important;
    height: 240px !important; /* Visual cover block on mobile */
  }
  
  .modern-timeline__card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ─── Premium Founder Card ─── */
.premium-founder-card {
  background: #ffffff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
  width: 520px !important;       /* Balanced width in 500px-550px range */
  height: 520px !important;      /* Balanced height in 500px-550px range */
  box-sizing: border-box;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  color: inherit;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.premium-founder-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.premium-founder-card__photo {
  width: 110px !important;       /* Size: 100px-120px */
  height: 110px !important;
  border-radius: 50% !important; /* Circular image */
  object-fit: cover !important;
  margin-bottom: 24px !important; /* Spacing below photo: 24px */
  border: 3px solid var(--color-accent-500);
}

.premium-founder-card__name {
  font-family: var(--font-headings);
  font-size: 42px !important;    /* Font Size: 42px */
  font-weight: 700 !important;    /* Font Weight: 700 */
  line-height: 1.15 !important;
  color: var(--color-primary-900) !important;
  margin: 0 0 16px 0 !important;  /* Spacing below name: 16px */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.premium-founder-card__role {
  font-size: 22px !important;    /* Font Size: 22px */
  font-weight: 600 !important;    /* Font Weight: 600 */
  letter-spacing: 1px !important; /* Letter Spacing: 1px */
  color: var(--color-text-secondary) !important; /* Secondary text color */
  text-transform: uppercase;
  margin: 0 0 24px 0 !important;  /* Spacing below role: 24px */
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.premium-founder-card__bio {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--color-neutral-700) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Maximum 5-6 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Tablet Responsive overrides ─── */
@media (max-width: 1199px) {
  .premium-founder-card {
    width: 480px !important;
    height: 520px !important;
    padding: 32px 24px;
  }
}

/* ─── Mobile Responsive overrides ─── */
@media (max-width: 899px) {
  .premium-founder-card {
    width: 100% !important;
    height: auto !important; /* Let height flow naturally on mobile screens */
    padding: 32px 20px;
  }
  .premium-founder-card__name {
    font-size: 32px !important; /* Scale name size slightly on mobile */
  }
  .premium-founder-card__role {
    font-size: 18px !important; /* Scale role size slightly on mobile */
  }
}

/* Hero paragraph width constraint (Maximum: 700px) */
.hero__desc, .page-hero__lead {
  max-width: 700px !important;
}

/* Article width constraints (800px-900px maximum) */
article, .prose {
  max-width: 900px !important;
  margin-inline: auto !important;
}

/* Products Page Hero System Overrides */
.products-hero {
  padding: 120px 0 100px !important;
}

@media (min-width: 1025px) {
  .products-hero .page-hero__content {
    padding-left: 30px !important; /* Move content 30px to the right */
  }
}

.products-hero__title {
  font-size: 72px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  max-width: 800px !important; /* Keep wrap clean */
  margin-top: 0 !important;
  margin-bottom: 24px !important; /* Spacing below title: 24px */
}

.products-hero__subtitle {
  display: block;
  font-size: 52px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.2 !important;
  margin-top: 10px !important;
}

.products-hero__lead {
  max-width: 650px !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-top: 0 !important;
  margin-bottom: 32px !important; /* Spacing below subtitle paragraph: 32px */
}

.products-hero .hero__actions {
  margin-top: 0 !important;
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Page Hero tag override */
.page-hero__tag {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  color: var(--color-accent-500) !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important; /* Spacing below label: 24px */
}

/* Responsive products page hero overrides */
@media (max-width: 1199px) {
  .products-hero__title {
    font-size: 52px !important;
  }
  .products-hero__subtitle {
    font-size: 38px !important;
  }
  .products-hero__lead {
    font-size: 18px !important;
  }
}

@media (max-width: 899px) {
  .products-hero {
    padding: 80px 0 60px !important;
  }
  .products-hero__title {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
  .products-hero__subtitle {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
  }
  .products-hero__lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ─── Product Highlight Cards Grid System ─── */
.highlights-grid {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important; /* Always in a single row on desktop */
  gap: 24px !important;
  margin-bottom: 48px !important;
}

.highlight-card {
  width: 270px !important;
  height: 330px !important;
  padding: 40px 20px !important; /* Top/Bottom: 40px, Horizontal: 20px */
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--color-neutral-300) !important;
  border-radius: var(--radius-lg) !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.highlight-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--color-accent-400) !important;
  box-shadow: var(--shadow-lg) !important;
}

.highlight-card__title {
  font-family: var(--font-headings);
  font-size: 26px !important;    /* Heading Size: 24px-28px */
  font-weight: 700 !important;    /* Font Weight: 700 */
  line-height: 1.25 !important;   /* Line Height: 1.25 */
  color: var(--color-primary-900) !important;
  margin: 0 0 24px 0 !important;  /* Space between heading and paragraph: 24px */
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* Maximum: 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight-card__desc {
  font-size: 16px !important;    /* Paragraph Size: 16px-18px */
  line-height: 1.6 !important;    /* Line Height: 1.6 */
  color: var(--color-neutral-600) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;          /* Maximum: 4 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tablet: 2 cards per row */
@media (max-width: 1199px) {
  .highlights-grid {
    flex-wrap: wrap !important;
    grid-template-columns: repeat(2, 270px) !important;
    display: grid !important;
    justify-content: center !important;
  }
  .highlight-card {
    width: 270px !important;
    height: 330px !important;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 899px) {
  .highlights-grid {
    flex-wrap: wrap !important;
    grid-template-columns: repeat(1, 270px) !important;
    display: grid !important;
    justify-content: center !important;
  }
  .highlight-card {
    width: 270px !important;
    height: 330px !important;
  }
}

/* ─── Product Category Tabs & Filters ─── */
.catalog-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 40px auto 20px !important;
  flex-wrap: wrap !important;
  max-width: 1200px !important;
}

.catalog-tab-btn {
  background-color: #ffffff !important;
  color: var(--color-primary-900) !important;
  border: 1px solid var(--color-neutral-300) !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-full) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  box-shadow: var(--shadow-sm) !important;
}

.catalog-tab-btn:hover {
  background-color: var(--color-neutral-100) !important;
  border-color: var(--color-neutral-400) !important;
  transform: translateY(-1px) !important;
}

.catalog-tab-btn.active {
  background-color: #0A2F73 !important; /* Selected button background: #0A2F73 */
  color: #ffffff !important;           /* Text: White */
  border-color: #0A2F73 !important;
  box-shadow: var(--shadow-md) !important;
}

/* Card Animation states */
.product-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important;
  opacity: 1;
  transform: scale(1);
}

.product-card.hidden {
  display: none !important;
}

/* ─── Information Cards Section Grid Layout ─── */
.info-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px !important;
  margin-top: 60px !important;
}

.info-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px !important;
  padding: 35px !important;
  min-height: 620px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .05) !important;
}

.info-card h2 {
  font-size: 2rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #021b4e !important;
  margin-top: 0 !important;
  margin-bottom: 25px !important;
  min-height: 140px !important;
}

.info-card p {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: #4b5563 !important;
  margin-bottom: 20px !important;
}

.info-card ul {
  margin: 0 !important;
  padding-left: 22px !important;
  list-style: disc !important;
}

.info-card ul li {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-bottom: 14px !important;
  color: #111827 !important;
}

.info-card ul li::marker {
  color: #f59e0b !important; /* Premium orange bullet marker */
}

@media (max-width: 1200px) {
  .info-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 899px) {
  .info-grid {
    grid-template-columns: 1fr !important;
  }

  .info-card {
    min-height: auto !important;
  }

  .info-card h2 {
    min-height: auto !important;
    font-size: 1.8rem !important;
  }
}

/* ─── Why Choose Prakash Section Layout ─── */
.why-section {
  display: grid !important;
  grid-template-columns: 1.3fr 0.9fr !important;
  gap: 60px !important;
  align-items: start !important;
}

.help-card {
  background: #07214a !important;
  border-radius: 24px !important;
  padding: 45px !important;
  max-width: 500px !important;
  margin-left: auto !important;
}

.why-list {
  list-style: disc !important;
  padding-left: 30px !important;
  margin: 0 !important;
}

.why-list li {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}

.why-list li::marker {
  color: #f5a000 !important; /* Amber-orange list marker */
  font-size: 1.2rem !important;
}

/* Tablet & Mobile responsive overrides */
@media (max-width: 1199px) {
  .why-section {
    grid-template-columns: 1fr !important;
  }

  .help-card {
    margin: 0 !important;
    max-width: 100% !important;
  }
}










/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM award-details.html
   ═══════════════════════════════════════════════════════════════ */
/* Award Details Specific Custom Styles (integrated with theme tokens) */
    .award-details-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-xl);
      margin-top: var(--space-lg);
    }
    
    .award-viewer {
      width: 100%;
      aspect-ratio: 4/3;
      border: var(--border-thin);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--color-neutral-200);
      box-shadow: var(--shadow-md);
      transition: box-shadow var(--transition-normal);
    }
    .award-viewer:hover {
      box-shadow: var(--shadow-lg);
    }
    .award-viewer img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
      transition: opacity var(--transition-fast), transform var(--transition-slow);
    }
    
    .award-thumbs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-sm);
      margin-top: var(--space-sm);
    }
    .award-thumb {
      aspect-ratio: 1;
      border: 2px solid var(--color-neutral-300);
      border-radius: var(--radius-md);
      overflow: hidden;
      cursor: pointer;
      opacity: 0.8;
      transition: opacity var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
      background: #fff;
    }
    .award-thumb:hover {
      opacity: 1;
      transform: translateY(-2px);
      border-color: var(--color-accent-400);
    }
    .award-thumb.active {
      opacity: 1;
      border-color: var(--color-accent-500);
      box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.2);
    }
    .award-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .award-meta-box {
      background: var(--color-neutral-200);
      border: var(--border-thin);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin-top: var(--space-lg);
    }
    .award-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
    }
    .award-meta-item__lbl {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      margin-bottom: var(--space-3xs);
      font-weight: var(--weight-semibold);
    }
    .award-meta-item__val {
      font-weight: var(--weight-bold);
      color: var(--color-primary-900);
      font-size: var(--text-small);
    }
    
    .achievement-card {
      border-left: 4px solid var(--color-accent-500);
      background: rgba(255, 138, 0, 0.05);
      padding: var(--space-md) var(--space-lg);
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      margin-bottom: var(--space-lg);
    }
    .achievement-card__title {
      font-weight: var(--weight-bold);
      color: var(--color-accent-600);
      font-size: var(--text-body);
      margin-bottom: var(--space-3xs);
    }
    .achievement-card__desc {
      color: var(--color-neutral-700);
      font-size: var(--text-small);
      line-height: 1.5;
    }
    
    .story-block {
      line-height: 1.8;
      color: var(--color-neutral-700);
      font-size: var(--text-body);
    }
    .story-block p {
      margin-bottom: var(--space-md);
    }
    
    /* Dynamic Prev / Next strip */
    .award-nav-strip {
      background: var(--color-neutral-200);
      border-block: var(--border-thin);
      padding-block: var(--space-md);
      margin-top: var(--space-2xl);
    }
    .award-nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-md);
    }
    .award-nav-link {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      max-width: 45%;
      transition: transform var(--transition-fast);
    }
    .award-nav-link:hover {
      transform: translateY(-2px);
    }
    .award-nav-link--prev {
      align-items: flex-start;
      text-align: left;
    }
    .award-nav-link--next {
      align-items: flex-end;
      text-align: right;
    }
    .award-nav-label {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      margin-bottom: 4px;
    }
    .award-nav-title {
      font-weight: var(--weight-bold);
      font-size: var(--text-small);
      color: var(--color-primary-800);
      transition: color var(--transition-fast);
    }
    .award-nav-link:hover .award-nav-title {
      color: var(--color-accent-600);
    }
    
    /* Social Share Buttons */
    .share-group {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      margin-top: var(--space-lg);
      flex-wrap: wrap;
    }
    .share-title {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      color: var(--color-neutral-500);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      margin-right: var(--space-xs);
    }
    .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3xs);
      padding: var(--space-3xs) var(--space-xs);
      border-radius: var(--radius-sm);
      border: var(--border-thin);
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      text-decoration: none;
      color: var(--color-neutral-700);
      background: #fff;
      transition: all var(--transition-fast);
      cursor: pointer;
    }
    .share-btn:hover {
      border-color: var(--color-neutral-500);
      background: var(--color-neutral-200);
      color: var(--color-primary-900);
    }
    .share-btn svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }
    
    @media (max-width: 899px) {
      .award-details-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }
      .award-details-grid > [class*="col-span-"] {
        grid-column: span 1 !important;
      }
      .award-nav-title {
        font-size: var(--text-xs);
      }
    }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM fully-automatic-double-wire-machine.html
   ═══════════════════════════════════════════════════════════════ */
/* PDP REDESIGN STYLES */
          .pdp-container {
            margin-top: var(--space-md);
          }
          
          .pdp-left-col {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
          }

          .pdp-gallery-container {
            display: flex;
            flex-direction: column;
            gap: var(--space-sm);
          }

          .pdp-viewer-wrapper {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            background: var(--color-neutral-100);
            border: 1px solid var(--color-neutral-300);
            aspect-ratio: 4 / 3;
          }

          .pdp-viewer {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            cursor: zoom-in;
          }

          .pdp-viewer img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease, opacity 0.2s ease;
          }

          /* Zoom-on-hover effect for desktop */
          @media (min-width: 769px) {
            .pdp-viewer:hover img {
              transform: scale(1.15);
            }
          }

          .pdp-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--color-neutral-300);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: background 0.2s, transform 0.2s;
            color: var(--color-primary-900);
            box-shadow: var(--shadow-sm);
          }

          .pdp-nav-btn:hover {
            background: #fff;
            transform: translateY(-50%) scale(1.05);
          }

          .pdp-prev-btn {
            left: 12px;
          }

          .pdp-next-btn {
            right: 12px;
          }

          .pdp-counter {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, 0.75);
            color: #fff;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: var(--text-xs);
            font-weight: var(--weight-medium);
            z-index: 10;
            pointer-events: none;
            letter-spacing: 0.5px;
          }

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

          .pdp-thumb {
            border-radius: var(--radius-sm);
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            aspect-ratio: 1;
            background: var(--color-neutral-100);
            transition: border-color 0.2s ease, opacity 0.2s ease;
          }

          .pdp-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .pdp-thumb:hover {
            opacity: 0.9;
          }

          .pdp-thumb.active {
            border-color: var(--color-primary-600);
          }

          /* Product Information styling */
          .pdp-info__category {
            font-size: var(--text-xs);
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--color-primary-600);
            font-weight: var(--weight-semibold);
            margin-bottom: var(--space-3xs);
            display: inline-block;
          }

          .pdp-info__title-redesign {
            font-family: var(--font-headings);
            font-size: clamp(1.8rem, 2.2vw, 2.3rem);
            font-weight: var(--weight-bold);
            line-height: 1.25;
            margin-bottom: var(--space-xs);
            color: var(--color-primary-900);
            max-height: 3.8em;
            overflow: hidden;
          }

          .pdp-info__price-redesign {
            font-size: clamp(1.6rem, 2.5vw, 2.2rem);
            font-weight: var(--weight-bold);
            color: var(--color-accent-600);
            margin-bottom: 2px;
          }

          .pdp-info__subtext-redesign {
            font-size: 14px;
            color: var(--color-neutral-600);
            font-weight: var(--weight-medium);
            margin-bottom: var(--space-md);
            text-transform: uppercase;
            letter-spacing: 0.5px;
          }

          /* Spec Cards styling */
          .pdp-info__stats-grid-redesign {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-sm);
            margin-bottom: var(--space-md);
          }

          .pdp-info__stat-card-redesign {
            background: #fff;
            border: 1px solid var(--color-neutral-300);
            border-radius: var(--radius-md);
            padding: var(--space-sm) var(--space-xs);
            text-align: center;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            height: 100%;
            min-height: 110px;
          }

          .pdp-info__stat-card-redesign:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
          }

          .pdp-info__stat-icon {
            color: var(--color-primary-600);
            margin-bottom: 6px;
            display: inline-flex;
          }

          .pdp-info__stat-val-redesign {
            font-size: var(--text-md);
            font-weight: var(--weight-bold);
            color: var(--color-primary-900);
            margin-bottom: 2px;
            line-height: 1.2;
          }

          .pdp-info__stat-lbl-redesign {
            font-size: 11px;
            color: var(--color-neutral-500);
            text-transform: uppercase;
            font-weight: var(--weight-semibold);
            letter-spacing: 0.5px;
          }

          .pdp-info__cta-group-redesign {
            display: flex;
            gap: var(--space-xs);
            flex-wrap: wrap;
            margin-bottom: var(--space-lg);
          }

          /* Responsive media query for ordering and layout conversion */
          @media (max-width: 899px) {
            .pdp-container {
              display: flex;
              flex-direction: column;
            }
            
            .pdp-left-col, .pdp-right-col {
              display: contents;
            }

            .pdp-gallery-container {
              order: 1;
              margin-bottom: var(--space-sm);
            }
            
            .pdp-viewer-wrapper {
              order: 1;
            }

            .pdp-thumbs {
              order: 2;
              margin-bottom: var(--space-md);
            }

            .pdp-info__category {
              order: 3;
              margin-bottom: 4px;
            }

            .pdp-info__title-redesign {
              order: 3;
              font-size: 1.8rem;
              margin-bottom: var(--space-xs);
            }

            .pdp-info__price-redesign {
              order: 4;
            }

            .pdp-info__subtext-redesign {
              order: 5;
              margin-bottom: var(--space-md);
            }

            .pdp-info__stats-grid-redesign {
              order: 6;
              grid-template-columns: 1fr;
              gap: var(--space-xs);
              margin-bottom: var(--space-md);
            }

            .pdp-info__stat-card-redesign {
              min-height: auto;
              padding: var(--space-xs);
              flex-direction: row;
              justify-content: flex-start;
              gap: var(--space-sm);
              text-align: left;
            }

            .pdp-info__stat-icon {
              margin-bottom: 0;
            }

            .pdp-info__cta-group-redesign {
              order: 7;
              flex-direction: column;
              gap: var(--space-xs);
              margin-bottom: var(--space-lg);
            }
            
            .pdp-info__cta-group-redesign .btn {
              width: 100%;
              text-align: center;
              justify-content: center;
            }

            .pdp-left-col > div:not(.pdp-gallery-container) {
              order: 8;
            }
          }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM fully-automatic-double-wire-machine.html
   ═══════════════════════════════════════════════════════════════ */
.spec-sheet-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: var(--space-md);
            background: var(--color-neutral-100);
            border: 1px solid var(--color-neutral-300);
            border-radius: var(--radius-md);
            overflow: hidden;
          }
          .spec-sheet-table th {
            background: var(--color-primary-900);
            color: #fff;
            font-weight: var(--weight-bold);
            text-transform: uppercase;
            font-size: var(--text-xs);
            letter-spacing: 0.75px;
            padding: 14px 20px;
            text-align: left;
          }
          .spec-sheet-table td {
            padding: 14px 20px;
            border-bottom: 1px solid var(--color-neutral-200);
            vertical-align: middle;
            font-size: 15px;
            color: var(--color-neutral-700);
            line-height: 1.6;
          }
          .spec-sheet-table tr:last-child td {
            border-bottom: none;
          }
          .spec-sheet-table tr {
            transition: background-color 0.2s ease;
          }
          .spec-sheet-table tr:hover {
            background-color: var(--color-neutral-200);
          }
          .spec-sheet-table__name {
            font-weight: var(--weight-semibold);
            color: var(--color-primary-900);
            display: flex;
            align-items: center;
            gap: 10px;
          }
          .spec-sheet-table__icon {
            color: var(--color-primary-600);
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }

          /* Responsive Rules */
          @media (max-width: 899px) {
            .spec-sheet-table, .spec-sheet-table tbody, .spec-sheet-table tr, .spec-sheet-table td, .spec-sheet-table th {
              display: block;
              width: 100% !important;
            }
            .spec-sheet-table thead {
              display: none; /* Hide header on mobile cards */
            }
            .spec-sheet-table tr {
              background: #fff;
              border: 1px solid var(--color-neutral-200);
              margin-bottom: var(--space-sm);
              border-radius: var(--radius-md);
              padding: var(--space-sm);
            }
            .spec-sheet-table tr:hover {
              background-color: #fff;
            }
            .spec-sheet-table td {
              border-bottom: none;
              padding: 6px 10px;
            }
            .spec-sheet-table td:first-child {
              font-size: var(--text-md);
              border-bottom: 1px solid var(--color-neutral-100);
              padding-bottom: var(--space-2xs);
              margin-bottom: var(--space-2xs);
            }
          }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM fully-automatic-double-wire-machine.html
   ═══════════════════════════════════════════════════════════════ */
.credentials-card {
              background: var(--color-primary-900);
              color: #fff;
              padding: var(--space-lg);
              border-radius: var(--radius-lg);
              max-width: 450px;
              width: 100%;
              margin-left: auto;
              box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
              border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .credentials-card__title {
              color: #fff;
              font-family: var(--font-headings);
              font-size: 1.45rem;
              font-weight: var(--weight-bold);
              margin-bottom: var(--space-md);
              padding-bottom: var(--space-xs);
              border-bottom: 2px solid var(--color-accent-500);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              letter-spacing: 0.5px;
            }

            .credentials-list {
              list-style: none;
              padding-left: 0;
              margin: 0;
              display: flex;
              flex-direction: column;
              gap: var(--space-md);
            }

            .credentials-item {
              display: grid;
              grid-template-columns: 52% 48%;
              align-items: center;
              padding-bottom: var(--space-sm);
              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .credentials-item:last-child {
              border-bottom: none;
              padding-bottom: 0;
            }

            .credentials-label-wrapper {
              display: flex;
              align-items: center;
              gap: var(--space-xs);
            }

            .credentials-icon {
              width: 20px;
              height: 20px;
              color: var(--color-accent-400);
              flex-shrink: 0;
              display: inline-flex;
              align-items: center;
              justify-content: center;
            }

            .credentials-label {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.7);
              font-weight: var(--weight-medium);
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            .credentials-value {
              font-size: 15px;
              font-weight: var(--weight-bold);
              color: #fff;
              text-align: right;
              line-height: 1.35;
            }

            /* Mobile Viewports: Stacked Cards */
            @media (max-width: 899px) {
              .credentials-card {
                max-width: 100%;
                background: transparent;
                padding: 0;
                box-shadow: none;
                border: none;
              }

              .credentials-card__title {
                text-align: center;
                border-bottom: 2px solid var(--color-accent-500);
                padding-bottom: var(--space-xs);
                margin-bottom: var(--space-lg);
              }

              .credentials-list {
                gap: var(--space-sm);
              }

              .credentials-item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                background: var(--color-primary-900);
                padding: var(--space-md);
                border-radius: var(--radius-md);
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: var(--shadow-sm);
                gap: var(--space-3xs);
              }

              .credentials-label-wrapper {
                width: 100%;
              }

              .credentials-value {
                text-align: left;
                font-size: 16px;
                margin-top: 4px;
                width: 100%;
              }
            }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM index.html
   ═══════════════════════════════════════════════════════════════ */
/* ─── HOMEPAGE PREMIUM INDUSTRIAL REDESIGN OVERRIDES ─── */
    
    /* Layout Safety & Smoothness */
    html, body {
      overflow-x: hidden !important;
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
    }
    
    /* Section Padding Compression (Reduce Whitespace) */
    .section {
      padding-block: 50px !important;
    }
    .section-header {
      margin-bottom: 30px !important;
    }
    @media (max-width: 899px) {
      .section {
        padding-block: 36px !important;
      }
      .section-header {
        margin-bottom: 24px !important;
      }
    }
    
    /* ─── HERO SECTION REDESIGN (Split Layout & Geometric Background) ─── */
    .hero {
      position: relative !important;
      min-height: 450px !important;
      height: 450px !important;
      padding-block: 0 !important;
      display: flex !important;
      align-items: center !important;
      overflow: hidden !important;
      /* Dark blue radial gradient background */
      background: radial-gradient(circle at 30% 30%, #112240 0%, #0a192f 100%) !important;
    }
    
    /* Subtle geometric grid pattern background using radial gradient */
    .hero::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
      background-size: 24px 24px !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }
    
    /* Very light overlay to fade the pattern towards the right side */
    .hero::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(90deg, rgba(10, 25, 47, 0.2) 0%, rgba(10, 25, 47, 0.6) 100%) !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }
    
    .hero__container {
      position: relative !important;
      z-index: 2 !important;
      width: 100% !important;
      height: 100% !important;
      max-width: 1200px !important;
      margin-inline: auto !important;
      padding-inline: 24px !important;
      display: flex !important;
      align-items: center !important;
      box-sizing: border-box !important;
    }
    
    .hero-split {
      display: grid !important;
      grid-template-columns: 45% 55% !important;
      width: 100% !important;
      align-items: center !important;
      gap: 32px !important;
    }
    
    /* Left side (45%) Content Area */
    .hero-split__left {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
      color: #ffffff !important;
    }
    
    .hero-split__label {
      font-size: 13px !important;
      text-transform: uppercase !important;
      letter-spacing: 1.5px !important;
      color: var(--color-accent-500) !important;
      font-weight: 700 !important;
      margin-bottom: 6px !important;
      font-family: var(--font-headings) !important;
    }
    
    .hero-split__title {
      font-size: clamp(28px, 3.5vw, 42px) !important;
      font-weight: 800 !important;
      line-height: 1.15 !important;
      color: #ffffff !important;
      margin: 0 0 10px 0 !important;
      font-family: var(--font-headings) !important;
      letter-spacing: -0.01em !important;
    }
    
    .hero-split__badge {
      background: rgba(255, 158, 11, 0.12) !important;
      border: 1px solid rgba(255, 158, 11, 0.25) !important;
      color: var(--color-accent-400) !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      padding: 3px 8px !important;
      border-radius: 4px !important;
      text-transform: uppercase !important;
      margin-bottom: 12px !important;
      display: inline-block !important;
    }
    
    .hero-split__desc {
      font-size: 14.5px !important;
      line-height: 1.45 !important;
      color: rgba(255, 255, 255, 0.82) !important;
      margin: 0 0 20px 0 !important;
      font-weight: 400 !important;
    }
    
    .hero-split__actions {
      display: flex !important;
      gap: 12px !important;
    }
    
    .hero-split__actions .btn {
      height: 42px !important;
      padding: 0 20px !important;
      font-size: 13.5px !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    
    /* Right side (55%) Geometric Image Area */
    .hero-split__right {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      height: 100% !important;
    }
    
    .hero-machine-container {
      position: relative !important;
      width: 100% !important;
      max-width: 480px !important;
      height: 380px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Dark Blue Polygon Behind for Depth */
    .hero-machine-bg {
      position: absolute !important;
      top: 10px !important;
      left: -10px !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(135deg, #091526 0%, #0d1e33 100%) !important;
      clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%) !important;
      z-index: 1 !important;
      opacity: 0.7 !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }
    
    /* Foreground Clipped Image Shape Container */
    .hero-machine-shape {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
      clip-path: polygon(12% 0%, 100% 0%, 88% 100%, 0% 100%) !important;
      z-index: 2 !important;
      overflow: hidden !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }
    
    /* Image filling the polygon shape */
    .hero-machine-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
      opacity: 0.95 !important;
      transition: transform 0.4s ease-in-out !important;
    }
    
    .hero-machine-shape:hover .hero-machine-img {
      transform: scale(1.05) !important;
    }
    
    /* Hero heights for laptop */
    @media (min-width: 600px) and (max-width: 1199px) {
      .hero {
        min-height: 420px !important;
        height: 420px !important;
      }
      .hero-machine-container {
        height: 320px !important;
      }
    }
    
    /* Hero heights for tablet/mobile auto stacking */
    @media (max-width: 899px) {
      .hero {
        min-height: auto !important;
        height: auto !important;
        padding-block: 40px !important;
      }
      .hero__container {
        height: auto !important;
        padding-inline: 16px !important;
      }
      .hero-split {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
      }
      .hero-split__left {
        align-items: center !important;
        text-align: center !important;
      }
      .hero-split__desc {
        font-size: 14px !important;
        margin-bottom: 16px !important;
      }
      .hero-machine-container {
        height: 260px !important;
        margin-top: 20px !important;
        max-width: 100% !important;
      }
    }
    
    /* ─── PRODUCTS SECTION OVERRIDES (6 Columns Grid) ─── */
    .homepage-products-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      margin-top: 30px;
    }
    .homepage-product-card {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #ffffff;
      border: 1px solid var(--color-neutral-300);
      border-radius: 12px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      box-shadow: var(--shadow-xs);
      transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease;
    }
    .homepage-product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--color-accent-500);
    }
    .homepage-product-card__image-wrapper {
      aspect-ratio: 4 / 3;
      width: 100%;
      overflow: hidden;
      background: #ffffff;
      border-bottom: 1px solid var(--color-neutral-300);
    }
    .homepage-product-card__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .homepage-product-card:hover .homepage-product-card__image {
      transform: scale(1.05);
    }
    .homepage-product-card__content {
      padding: 14px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
    .homepage-product-card__title {
      font-size: 1.05rem !important;
      font-weight: 700 !important;
      color: var(--color-primary-900) !important;
      margin: 0 0 12px 0 !important;
      line-height: 1.35 !important;
      display: block !important;
      text-overflow: clip !important;
      white-space: normal !important;
      min-height: 5.8rem !important; /* Equal height for up to 4 lines of text */
    }
    .homepage-product-card__btn {
      margin-top: auto;
      width: 100%;
      text-align: center;
      padding: 8px 12px !important;
      font-size: 12px !important;
      font-weight: 600;
      border-radius: 6px !important;
    }
    
    /* Products Grid Breakpoints */
    @media (max-width: 1200px) {
      .homepage-products-grid {
        grid-template-columns: repeat(4, 1fr);
      }
      .homepage-product-card__title {
        font-size: 0.95rem !important;
        min-height: 5.2rem !important;
      }
    }
    @media (max-width: 1199px) {
      .homepage-products-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media (max-width: 599px) {
      .homepage-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .homepage-product-card__content {
        padding: 10px;
      }
      .homepage-product-card__title {
        font-size: 0.9rem !important;
        min-height: 5.0rem !important;
        margin-bottom: 8px !important;
      }
      .homepage-product-card__btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
      }
    }
    
    /* ─── FOUNDER SECTION (Premium Industrial) ─── */
    /* ─── FOUNDER SECTION (Premium Industrial) ─── */
    .founder-section {
      background-color: var(--color-neutral-100);
      border-top: 1px solid var(--color-neutral-300);
      border-bottom: 1px solid var(--color-neutral-300);
      box-sizing: border-box !important;
      padding-block: 60px !important;
    }
    .founder-grid {
      display: grid !important;
      grid-template-columns: 45fr 55fr !important;
      align-items: stretch !important;
      gap: 60px !important;
    }
    .founder-image-col {
      width: 100% !important;
      display: flex !important;
      height: 100% !important;
    }
    .founder-content-col {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      height: 100% !important;
      max-width: none !important;
    }
    .founder-img-wrapper {
      position: relative !important;
      border-radius: 24px !important;
      overflow: hidden !important;
      box-shadow: var(--shadow-lg) !important;
      border: 1px solid var(--color-neutral-300) !important;
      width: 100% !important;
      height: 100% !important;
    }
    .founder-img-wrapper::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 8px solid rgba(255, 255, 255, 0.1);
      pointer-events: none;
    }
    .founder-img-wrapper img {
      width: 100% !important;
      height: 100% !important;
      max-height: 650px !important;
      object-fit: cover !important;
      display: block !important;
    }
    .founder-badge {
      position: absolute !important;
      bottom: 20px !important;
      right: 20px !important;
      background: rgba(13, 27, 42, 0.95) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      padding: 12px 20px !important;
      border-radius: var(--radius-lg) !important;
      color: #ffffff !important;
      box-shadow: var(--shadow-md) !important;
      backdrop-filter: blur(8px) !important;
    }
    .founder-badge__title {
      font-size: 11px !important;
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
      color: var(--color-accent-500) !important;
      font-weight: 700 !important;
      margin-bottom: 2px !important;
    }
    .founder-badge__name {
      font-size: 14px !important;
      font-weight: 600 !important;
      margin: 0 !important;
    }
    .founder-subtitle {
      font-size: 12px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 1.5px !important;
      color: var(--color-accent-600) !important;
      margin-bottom: 8px !important;
      display: block !important;
    }
    .founder-title {
      font-size: clamp(22px, 3.5vw, 30px) !important;
      color: var(--color-primary-900) !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
      margin-bottom: 16px !important;
    }
    .founder-desc {
      font-size: 14.5px !important;
      line-height: 1.65 !important;
      color: var(--color-neutral-700) !important;
      margin-bottom: 16px !important;
    }
    .founder-highlights {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 16px !important;
      margin-bottom: 24px !important;
      margin-top: 20px !important;
    }
    .founder-highlight-item {
      display: flex !important;
      gap: 10px !important;
      align-items: flex-start !important;
    }
    .founder-highlight-item svg {
      width: 18px !important;
      height: 18px !important;
      stroke: var(--color-accent-500) !important;
      fill: none !important;
      stroke-width: 2.5 !important;
      flex-shrink: 0 !important;
      margin-top: 2px !important;
    }
    .founder-highlight-text {
      font-size: 13px !important;
      font-weight: 600 !important;
      color: var(--color-neutral-800) !important;
      line-height: 1.35 !important;
    }
    .founder-highlight-desc {
      font-size: 11.5px !important;
      color: var(--color-neutral-500) !important;
      margin-top: 2px !important;
      font-weight: 400 !important;
      line-height: 1.3 !important;
    }
    
    @media (max-width: 899px) {
      .founder-section {
        padding-block: 40px !important;
      }
      .founder-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
      }
      .founder-image-col {
        height: auto !important;
      }
      .founder-img-wrapper {
        height: auto !important;
      }
      .founder-img-wrapper img {
        height: auto !important;
        max-height: 400px !important;
      }
      .founder-content-col {
        height: auto !important;
        text-align: center !important;
      }
      .founder-highlights {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: left !important;
      }
      .founder-badge {
        bottom: 12px !important;
        right: 12px !important;
        padding: 8px 14px !important;
      }
      .founder-badge__name {
        font-size: 13px;
      }
    }
    
    /* ─── WHY CHOOSE US OVERRIDES (Compact Feature Cards) ─── */
    .feature-card {
      padding: 20px !important;
      border-radius: 12px !important;
    }
    .feature-card__icon {
      width: 44px !important;
      height: 44px !important;
      margin-bottom: 14px !important;
    }
    .feature-card__icon svg {
      width: 20px !important;
      height: 20px !important;
    }
    .feature-card__title {
      font-size: 15px !important;
      margin-bottom: 8px !important;
    }
    .feature-card__desc {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }
    
    /* ─── STATS STRIP OVERRIDES ─── */
    .stats-strip {
      padding-block: 24px !important;
      background: var(--color-primary-900) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: center;
    }
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .stat-num {
      font-size: clamp(24px, 3.5vw, 36px) !important;
      font-weight: 700 !important;
      color: var(--color-accent-500) !important;
      line-height: 1.1 !important;
      margin-bottom: 4px !important;
    }
    .stat-label {
      font-size: 12px !important;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7) !important;
    }
    @media (max-width: 899px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
    }
    
    /* ─── FOOTER OVERRIDES (Compact & Responsive) ─── */
    .site-footer {
      padding-top: 40px !important;
      background: #09121c !important;
    }
    .footer-top {
      gap: 30px !important;
      padding-bottom: 30px !important;
      grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
    }
    .footer-logo {
      margin-bottom: 12px !important;
      height: 36px !important;
    }
    .footer-tagline {
      font-size: 13px !important;
      line-height: 1.6 !important;
      margin-bottom: 16px !important;
    }
    .footer-col-title {
      margin-bottom: 16px !important;
      font-size: 13px !important;
    }
    .footer-links {
      gap: 8px !important;
    }
    .footer-link {
      font-size: 13px !important;
    }
    .footer-contact-list {
      gap: 10px !important;
    }
    .footer-contact-item {
      font-size: 13px !important;
      gap: 8px !important;
    }
    .footer-contact-item svg {
      margin-top: 2px !important;
    }
    .footer-hours {
      margin-top: 14px !important;
      padding: 8px 12px !important;
    }
    .footer-map-btn {
      margin-top: 10px !important;
      padding: 6px 12px !important;
    }
    .footer-bottom {
      padding-block: 20px !important;
    }
    
    @media (max-width: 1199px) {
      .footer-top {
        grid-template-columns: 1fr 1fr !important;
      }
    }
    @media (max-width: 640px) {
      .site-footer {
        padding-top: 30px !important;
      }
      .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
      }
      .footer-top > div:first-child {
        grid-column: span 2 !important;
      }
    }
    @media (max-width: 599px) {
      .footer-top {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }
      .footer-top > div:first-child {
        grid-column: span 1 !important;
      }
    }
    
    /* ─── GLOBAL EXPORT NETWORK SECTION (40/60 Split) ─── */
    .export-network-section {
      background-color: #ffffff !important;
      padding-block: 70px 85px !important;
      border-top: 1px solid var(--color-neutral-300) !important;
      border-bottom: 1px solid var(--color-neutral-300) !important;
    }
    .export-network-grid {
      display: grid !important;
      grid-template-columns: 40fr 60fr !important;
      gap: 50px !important;
      align-items: center !important;
    }
    .export-network-content {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      text-align: left !important;
    }
    .export-network-badge {
      display: inline-block !important;
      align-self: flex-start !important;
      background-color: rgba(245, 158, 11, 0.1) !important;
      color: #d48c00 !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 1.5px !important;
      padding: 5px 12px !important;
      border-radius: 50px !important;
      margin-bottom: 14px !important;
    }
    .export-network-title {
      font-size: clamp(22px, 3.5vw, 30px) !important;
      color: #081B3A !important;
      font-weight: 800 !important;
      line-height: 1.25 !important;
      margin-bottom: 18px !important;
      font-family: var(--font-headings) !important;
    }
    .export-network-desc {
      font-size: 14.5px !important;
      line-height: 1.65 !important;
      color: var(--color-neutral-700) !important;
      margin-bottom: 20px !important;
    }
    .export-info-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 14px !important;
      margin-top: 10px !important;
    }
    .export-info-card {
      background: #f8fafc !important;
      border: 1px solid var(--color-neutral-300) !important;
      border-radius: 8px !important;
      padding: 12px 14px !important;
      font-size: 13.5px !important;
      font-weight: 600 !important;
      color: var(--color-primary-900) !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      box-shadow: var(--shadow-xs) !important;
      transition: transform 0.2s ease, border-color 0.2s ease !important;
    }
    .export-info-card:hover {
      transform: translateY(-1px) !important;
      border-color: #f59e0b !important;
    }
    .export-info-card span {
      color: #f59e0b !important;
      font-weight: 800 !important;
    }
    .export-network-map-col {
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .export-network-map-wrapper {
      position: relative !important;
      width: 100% !important;
      height: 380px !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .export-network-map-img {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      object-fit: cover !important;
      object-position: center !important;
    }
    @media (max-width: 899px) {
      .export-network-map-wrapper {
        height: 280px !important;
      }
    }
    @media (max-width: 599px) {
      .export-network-map-wrapper {
        height: 200px !important;
      }
    }
    
    @media (max-width: 1199px) {
      .export-network-grid {
        gap: 30px !important;
      }
    }
    @media (max-width: 899px) {
      .export-network-section {
        padding-block: 50px !important;
      }
      .export-network-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
      }
      .export-network-content {
        text-align: center !important;
      }
      .export-network-badge {
        align-self: center !important;
      }
      .export-info-grid {
        justify-content: center !important;
        max-width: 480px !important;
        margin-inline: auto !important;
      }
    }
    @media (max-width: 599px) {
      .export-info-grid {
        grid-template-columns: 1fr !important;
      }
    }
    
    /* ─── FACTORY TOUR REDESIGN ─── */
    #factory-tour-section {
      min-height: 500px !important;
      display: flex !important;
      align-items: center !important;
      box-sizing: border-box !important;
      padding-block: 60px !important;
    }
    
    .factory-tour-wrapper {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 60px !important;
      align-items: center !important;
      width: 100% !important;
    }
    
    .factory-tour-content {
      order: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      text-align: left !important;
    }
    
    .factory-tour-video {
      order: 2 !important;
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    .factory-tour-video iframe,
    .factory-tour-video video,
    .factory-tour-video .video-card {
      width: 100% !important;
      max-width: 560px !important;
      aspect-ratio: 16/9 !important;
      margin-left: auto !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      box-shadow: var(--shadow-lg) !important;
    }
    
    .video-tour-badge {
      display: inline-block !important;
      font-size: 13px !important;
      text-transform: uppercase !important;
      letter-spacing: 1.5px !important;
      color: var(--color-accent-600) !important;
      font-weight: 700 !important;
      margin-bottom: 8px !important;
    }
    .video-tour-title {
      font-size: clamp(22px, 3.5vw, 30px) !important;
      color: var(--color-primary-900) !important;
      font-weight: 800 !important;
      line-height: 1.25 !important;
      margin: 0 0 16px 0 !important;
      font-family: var(--font-headings) !important;
    }
    .video-tour-p {
      font-size: 14.5px !important;
      line-height: 1.6 !important;
      color: var(--color-neutral-700) !important;
      margin-bottom: 14px !important;
    }
    .video-tour-bullets {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 12px 24px !important;
      list-style: none !important;
      padding: 0 !important;
      margin: 20px 0 24px 0 !important;
    }
    .video-tour-bullets li {
      font-size: 14px !important;
      font-weight: 600 !important;
      color: var(--color-neutral-800) !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .bullet-check {
      color: var(--color-accent-500) !important;
      font-weight: 900 !important;
    }
    .video-tour-actions {
      display: flex !important;
      gap: 16px !important;
      flex-wrap: wrap !important;
    }
    .video-tour-actions .btn {
      height: 42px !important;
      padding: 0 20px !important;
      font-size: 13.5px !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    
    @media (max-width: 899px) {
      #factory-tour-section {
        min-height: auto !important;
        padding-block: 40px !important;
      }
      .factory-tour-wrapper {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }
      .factory-tour-content {
        order: 1 !important;
        text-align: center !important;
      }
      .factory-tour-video {
        order: 2 !important;
      }
      .factory-tour-video iframe,
      .factory-tour-video video,
      .factory-tour-video .video-card {
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .video-tour-bullets {
        margin-inline: auto !important;
        max-width: 500px !important;
      }
      .video-tour-actions {
        justify-content: center !important;
      }
    }
    
    /* ─── AWARDS SECTION REDESIGN (Slider) ─── */
    #awards-section {
      padding-block: 45px !important;
      background-color: var(--color-neutral-100) !important;
    }
    
    .award-card {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      background: #ffffff !important;
      border: 1px solid var(--color-neutral-300) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
      transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    
    .award-card:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    }
    
    .award-card__title {
      font-size: 15px !important;
      font-weight: 700 !important;
      color: var(--color-primary-900) !important;
      line-height: 1.35 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      height: 2.7em !important;
      margin-bottom: 0 !important;
    }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM iso-certificate.html
   ═══════════════════════════════════════════════════════════════ */
.award-details-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-xl);
      margin-top: var(--space-lg);
    }
    .award-viewer {
      width: 100%;
      aspect-ratio: 4/3;
      border: var(--border-thin);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--color-neutral-200);
      box-shadow: var(--shadow-md);
      transition: box-shadow var(--transition-normal);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .award-viewer:hover {
      box-shadow: var(--shadow-lg);
    }
    .award-viewer img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
    }
    .award-meta-box {
      background: var(--color-neutral-200);
      border: var(--border-thin);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin-top: var(--space-lg);
    }
    .award-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
    }
    .award-meta-item__lbl {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      margin-bottom: var(--space-3xs);
      font-weight: var(--weight-semibold);
    }
    .award-meta-item__val {
      font-weight: var(--weight-bold);
      color: var(--color-primary-900);
      font-size: var(--text-small);
    }
    .achievement-card {
      border-left: 4px solid var(--color-accent-500);
      background: rgba(255, 138, 0, 0.05);
      padding: var(--space-md) var(--space-lg);
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      margin-bottom: var(--space-lg);
    }
    .achievement-card__title {
      font-weight: var(--weight-bold);
      color: var(--color-accent-600);
      font-size: var(--text-body);
      margin-bottom: var(--space-3xs);
    }
    .achievement-card__desc {
      color: var(--color-neutral-700);
      font-size: var(--text-small);
      line-height: 1.5;
    }
    .story-block {
      line-height: 1.8;
      color: var(--color-neutral-700);
      font-size: var(--text-body);
    }
    .story-block h3 {
      font-size: var(--text-h4);
      color: var(--color-primary-900);
      margin-top: var(--space-lg);
      margin-bottom: var(--space-sm);
    }
    .story-block p, .story-block ul {
      margin-bottom: var(--space-md);
    }
    .story-block ul {
      padding-left: var(--space-lg);
      list-style-type: disc;
    }
    .related-certs {
      background: var(--color-neutral-100);
      padding: var(--space-xl) 0;
      margin-top: var(--space-2xl);
    }
    .download-btn-wrap {
      margin-top: var(--space-md);
      display: flex;
      gap: var(--space-sm);
    }
    @media (max-width: 899px) {
      .award-details-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }
      .award-details-grid > [class*="col-span-"] {
        grid-column: span 1 !important;
      }
    }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM products.html
   ═══════════════════════════════════════════════════════════════ */
/* Tabs */
    .catalog-tabs {
      position: sticky;
      top: var(--header-height-desktop);
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--color-neutral-300);
      z-index: 99;
      padding-block: var(--space-sm);
      display: flex;
      justify-content: center;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }

    .catalog-tab-btn {
      padding: 8px 16px;
      border-radius: var(--radius-full);
      border: 1px solid var(--color-neutral-300);
      background: #fff;
      font-weight: bold;
      cursor: pointer;
    }

    .catalog-tab-btn.active {
      background: var(--color-primary-800);
      color: #fff;
      border-color: var(--color-primary-800);
    }

    /* Grids */
    .product-grid,
    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-lg);
    }

    @media (max-width: 1199px) {

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

    @media (max-width: 899px) {

      .product-grid,
      .info-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Product Cards */
    .product-card {
      border: 1px solid var(--color-neutral-300);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
    }

    .product-card__img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
    }

    .product-card__body {
      padding: var(--space-md);
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    /* Table */
    .table-responsive {
      overflow-x: auto;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: var(--space-md);
    }

    .comparison-table th,
    .comparison-table td {
      border: 1px solid var(--color-neutral-300);
      padding: var(--space-sm);
      text-align: left;
    }

    .comparison-table th {
      background: var(--color-neutral-200);
      font-weight: bold;
    }

    /* Small Preview Modal */
    .preview-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .preview-modal.active {
      display: flex;
    }

    .preview-content {
      background: #fff;
      padding: var(--space-lg);
      border-radius: var(--radius-md);
      max-width: 600px;
      width: 90%;
      position: relative;
    }

    .close-modal {
      position: absolute;
      top: 10px;
      right: 15px;
      cursor: pointer;
      font-size: 24px;
    }

    /* Section Styles */
    .section-title {
      font-size: 2rem;
      color: var(--color-primary-900);
      margin-bottom: var(--space-md);
    }

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM rewards.html
   ═══════════════════════════════════════════════════════════════ */
/* Conflicting layout grids and duplicate card selectors removed. Grid behavior is governed by main.bundle.css */

/* ═══════════════════════════════════════════════════════════════
   STYLE PORTED FROM zed-certificate.html
   ═══════════════════════════════════════════════════════════════ */
.award-details-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--space-xl);
      margin-top: var(--space-lg);
    }
    .award-viewer {
      width: 100%;
      aspect-ratio: 4/3;
      border: var(--border-thin);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--color-neutral-200);
      box-shadow: var(--shadow-md);
      transition: box-shadow var(--transition-normal);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .award-viewer:hover {
      box-shadow: var(--shadow-lg);
    }
    .award-viewer object, .award-viewer embed, .award-viewer iframe {
      width: 100%;
      height: 100%;
      background: #fff;
    }
    .award-meta-box {
      background: var(--color-neutral-200);
      border: var(--border-thin);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      margin-top: var(--space-lg);
    }
    .award-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
    }
    .award-meta-item__lbl {
      font-size: var(--text-xs);
      color: var(--color-neutral-500);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      margin-bottom: var(--space-3xs);
      font-weight: var(--weight-semibold);
    }
    .award-meta-item__val {
      font-weight: var(--weight-bold);
      color: var(--color-primary-900);
      font-size: var(--text-small);
    }
    .achievement-card {
      border-left: 4px solid var(--color-accent-500);
      background: rgba(255, 138, 0, 0.05);
      padding: var(--space-md) var(--space-lg);
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      margin-bottom: var(--space-lg);
    }
    .achievement-card__title {
      font-weight: var(--weight-bold);
      color: var(--color-accent-600);
      font-size: var(--text-body);
      margin-bottom: var(--space-3xs);
    }
    .achievement-card__desc {
      color: var(--color-neutral-700);
      font-size: var(--text-small);
      line-height: 1.5;
    }
    .story-block {
      line-height: 1.8;
      color: var(--color-neutral-700);
      font-size: var(--text-body);
    }
    .story-block h3 {
      font-size: var(--text-h4);
      color: var(--color-primary-900);
      margin-top: var(--space-lg);
      margin-bottom: var(--space-sm);
    }
    .story-block p, .story-block ul {
      margin-bottom: var(--space-md);
    }
    .story-block ul {
      padding-left: var(--space-lg);
      list-style-type: disc;
    }
    .related-certs {
      background: var(--color-neutral-100);
      padding: var(--space-xl) 0;
      margin-top: var(--space-2xl);
    }
    .download-btn-wrap {
      margin-top: var(--space-md);
      display: flex;
      gap: var(--space-sm);
    }
    @media (max-width: 899px) {
      .award-details-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }
      .award-details-grid > [class*="col-span-"] {
        grid-column: span 1 !important;
      }
    }

/* Shared Footer Layout Fixes */
.site-footer .footer-top {
  border-bottom: none;
  padding-bottom: 0;
}
.site-footer .footer-bottom {
  display: none;
}
.site-footer {
  padding-bottom: 40px;
}

/* Shared Footer Brand Components Styles */
.footer-integrated-info {
  margin-top: 24px;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

.footer-legal-links-wrap {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-legal-link:hover {
  color: var(--secondary);
}

.footer-legal-divider {
  color: rgba(255, 255, 255, 0.15);
}

.footer-certification-wrap {
  margin-bottom: 8px;
}

.footer-iso-link {
  text-decoration: none;
  color: var(--secondary);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: opacity var(--transition-fast);
}

.footer-iso-link:hover {
  opacity: 0.85;
}

.footer-copyright {
  margin: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

/* ─── Global Layout Sizing & Proportions Standardization ─── */

/* 1. Container Limits (Forces 1200px Width) */
.container,
.container--wide,
.container--medium,
.container--narrow {
  max-width: 1200px !important;
  padding-inline: 24px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 599px) {
  .container,
  .container--wide,
  .container--medium,
  .container--narrow {
    padding-inline: 16px !important;
  }
}

/* 2. Section Spacing Limits */
.section {
  padding-block: 50px !important;
}
@media (max-width: 899px) {
  .section {
    padding-block: 36px !important;
  }
}

/* 3. Page Hero Sizing Scale-down */
.page-hero {
  min-height: 280px !important;
  padding-block: 60px 40px !important;
}
@media (max-width: 899px) {
  .page-hero {
    min-height: 220px !important;
    padding-block: 40px 30px !important;
  }
}

.page-hero__title {
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.2 !important;
}

/* 4. Heading & Paragraph Size Limits */
h1, .h1 { font-size: clamp(24px, 3.5vw, 36px) !important; }
h2, .h2 { font-size: clamp(20px, 3vw, 30px) !important; }
h3, .h3 { font-size: clamp(16px, 2.5vw, 24px) !important; }
p, .body-text { font-size: var(--text-sm, 14px) !important; line-height: 1.6 !important; }

/* 5. Product Gallery & Details Scale-down */
.pdp-gallery__main-img,
.pdp-info__image,
.product-detail-image {
  max-height: 380px !important;
  object-fit: cover !important;
  border-radius: var(--radius) !important;
}

/* 6. Specification Tables Scale-down */
.pdp-spec-table, 
.spec-table,
table {
  font-size: var(--text-sm, 14px) !important;
  max-width: 100% !important;
  width: 100% !important;
}
.pdp-spec-table th, .pdp-spec-table td,
table th, table td {
  padding: 8px 12px !important;
}





/* ─── ACHIEVEMENTS & GLOBAL PRESENCE GALLERY SLIDER ─── */
.gallery-slider-wrapper {
  position: relative !important;
  width: 100% !important;
  margin-top: 30px !important;
}

.gallery-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 24px !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  padding-block: 10px 20px !important; /* Spacing for hover lifting */
  
  /* Hide Scrollbar */
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
.gallery-slider::-webkit-scrollbar {
  display: none !important;
}

.gallery-card-item {
  flex: 0 0 calc((100% - 4 * 24px) / 5) !important; /* 5 cards visible on desktop >= 1200px */
  max-width: calc((100% - 4 * 24px) / 5) !important;
  min-width: 0 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  scroll-snap-align: start !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
  height: 290px !important; /* Fixed height for all gallery cards */
}

.gallery-card-item:hover {
  transform: translateY(-8px) scale(1.03) !important; /* Lift upward and scale 1.03 */
  box-shadow: 0 12px 30px rgba(13, 27, 42, 0.08) !important;
}

.gallery-card-item__image-wrapper {
  aspect-ratio: 16 / 9 !important; /* 16:9 image ratio */
  width: 100% !important;
  overflow: hidden !important;
  background: var(--color-neutral-100) !important;
  border-bottom: 1px solid var(--color-neutral-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important; /* Shrinks the image visual area */
  box-sizing: border-box !important;
}

.gallery-card-item__image {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  transition: transform 0.4s ease !important;
}

.gallery-card-item:hover .gallery-card-item__image {
  transform: scale(1.05) !important;
}

.gallery-card-item__content {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.gallery-card-item__tag {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-accent-600) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}

.gallery-card-item__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-primary-900) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  min-height: 2.8rem !important; /* Align height for up to 2 lines */
  height: 2.8rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Slider Controls Styling */
.gallery-slider-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 24px !important;
}

.gallery-slider-btn {
  background: #ffffff !important;
  border: 1px solid var(--color-neutral-300) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  color: var(--color-primary-900) !important;
  padding: 0 !important;
}

.gallery-slider-btn:hover {
  background: var(--color-primary-900) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-900) !important;
}

.gallery-slider-btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.gallery-slider-dots {
  display: flex !important;
  gap: 8px !important;
}

.gallery-slider-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--color-neutral-300) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.gallery-slider-dot.active {
  background: var(--color-accent-500) !important;
  transform: scale(1.1) !important;
  width: 20px !important; /* pill shape active state */
  border-radius: 4px !important;
}

/* Responsive Rules for Gallery */
@media (max-width: 1199px) {
  .gallery-card-item {
    flex: 0 0 calc((100% - 3 * 24px) / 4) !important; /* 4 cards */
    max-width: calc((100% - 3 * 24px) / 4) !important;
  }
}

@media (max-width: 1024px) {
  .gallery-card-item {
    flex: 0 0 calc((100% - 2 * 24px) / 3) !important; /* 3 cards */
    max-width: calc((100% - 2 * 24px) / 3) !important;
  }
}

@media (max-width: 768px) {
  .gallery-card-item {
    flex: 0 0 calc((100% - 1 * 24px) / 2) !important; /* 2 cards */
    max-width: calc((100% - 1 * 24px) / 2) !important;
  }
}

@media (max-width: 599px) {
  .gallery-slider {
    gap: 16px !important;
  }
  .gallery-card-item {
    flex: 0 0 82% !important; /* Visible peek of the next card */
    max-width: 82% !important;
    height: 270px !important; /* Mobile fixed height */
  }
  .gallery-slider-btn {
    display: none !important; /* hide arrows on mobile */
  }
}

/* Note: Consolidated slider override rules moved to the early safety fallbacks section at the top of the file to prevent truncation issues */

/* ==========================================
   AWARDS & RECOGNITION TYPOGRAPHY
   ========================================== */
.award-card__year {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f97316 !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
}

.award-card__title {
  font-family: var(--font-headings) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f2454 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
}

/* ══════════════════════════════════════════════════════════════════
   AWARDS & RECOGNITION SECTION (index.html — #recognition-section)
   Fully scoped, unique classes. Deliberately NOT named ".award-card"
   or ".awards-grid" so it can never collide with the certifications
   design system (.award-card / .awards-grid / #homepage-awards-grid)
   used on index.html's cert slider, about.html, rewards.html,
   iso-certificate.html and zed-certificate.html.
   ══════════════════════════════════════════════════════════════════ */

#recognition-section .recognition-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

#recognition-section .recognition-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;              /* prevents grid-item text collapse / vertical text */
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#recognition-section .recognition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

#recognition-section .recognition-card__img-wrap {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  flex-shrink: 0;
}

#recognition-section .recognition-card__img-wrap img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

#recognition-section .recognition-card__body {
  width: 100%;
  min-width: 0;
}

#recognition-section .recognition-card__year {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF8A00;
  margin-bottom: 6px;
}

#recognition-section .recognition-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #0f2454;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Tablet: 3 per row */
@media (max-width: 1200px) {
  #recognition-section .recognition-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 per row */
@media (max-width: 768px) {
  #recognition-section .recognition-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  #recognition-section .recognition-card {
    padding: 18px 12px;
  }
}