/*==============================================================
  sa-theme.css — Premium Safety Apparel Brand Override Layer
  Load AFTER style.css. Never modify style.css directly.

  TABLE OF CONTENTS:
  01. Google Fonts
  02. CSS Variable Overrides
  03. SA-Specific Brand Variables
  04. Typography Overrides
  05. Button Overrides
  06. Link & Accent Overrides
  07. Components — sa_top_bar
  08. Components — sa_mega_menu
  09. Components — sa_hero_eyebrow
  10. Components — sa_cta_group
  11. Components — sa_industry_card
  12. Components — sa_material_card
  13. Components — sa_product_tag
  14. Components — sa_standard_badge
  15. Components — sa_cert_badge
  16. Components — sa_spec_table
  17. Components — sa_download_card
  18. Components — sa_rfq_form
  19. Components — sa_process_step
  20. Components — sa_breadcrumb
  21. Components — sa_sticky_product_cta
  22. Components — sa_cta_dark_banner
  23. Utility Classes
  24. Responsive Overrides
================================================================*/

/*==============================================================
  01. Google Fonts
================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&display=swap");

/*==============================================================
  02. CSS Variable Overrides
  Overrides Hedpro's :root defaults with Premium Safety Apparel brand.
================================================================*/
:root {
  /* Brand Colors */
  --primary-color:    #1F2937;  /* Industrial Dark Gray — headings, dark text */
  --accent-color:     #D62828;  /* Safety Red — buttons, CTAs, highlights */
  --secondary-color:  #4B5563;  /* Slate Gray — body text */
  --border-color:     #E5E7EB;  /* Light Gray — borders, dividers */

  /* Background Tones */
  --gray-color1: #F9FAFB;  /* Near-white sections */
  --gray-color2: #F3F4F6;  /* Light gray sections */
  --gray-color3: #E5E7EB;  /* Dividers */
  --gray-color4: #F9FAFB;
  --gray-color5: #F3F4F6;
  --gray-color6: #EFF6FF;  /* Subtle blue-white for callout areas */
  --gray-color7: #FEF2F2;  /* Subtle red-white for warning highlights */

  /* Fonts */
  --primary-font:   "Montserrat", sans-serif;  /* Headings */
  --secondary-font: "Inter", sans-serif;        /* Body text */
}

/*==============================================================
  03. SA-Specific Brand Variables
  New variables not present in style.css.
================================================================*/
:root {
  /* Extended Brand Palette */
  --sa-red:          #D62828;
  --sa-red-dark:     #B91C1C;
  --sa-red-light:    #FEE2E2;
  --sa-dark:         #1F2937;
  --sa-dark-deep:    #111827;
  --sa-orange:       #F59E0B;  /* Warning / accent highlights */
  --sa-orange-light: #FEF3C7;
  --sa-green:        #059669;  /* Certified / approved indicators */
  --sa-text:         #4B5563;
  --sa-text-light:   #6B7280;
  --sa-border:       #E5E7EB;
  --sa-white:        #FFFFFF;

  /* Component Sizing */
  --sa-radius:    4px;
  --sa-radius-md: 8px;
  --sa-radius-lg: 12px;

  /* Transitions */
  --sa-transition: all 0.28s ease;

  /* Shadows */
  --sa-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --sa-shadow:    0 4px 12px rgba(0,0,0,0.10);
  --sa-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  /* Section Spacing */
  --sa-section-gap: 100px;
}

/*==============================================================
  04. Typography Overrides
================================================================*/
body,
html {
  font-family: var(--secondary-font);
  color: var(--sa-text);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font);
  color: var(--sa-dark);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: 52px; line-height: 1.15; }
h2 { font-size: 40px; line-height: 1.2; }
h3 { font-size: 28px; line-height: 1.25; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

/* Section headings: tighter tracking for industrial feel */
.cs_section_heading .cs_section_title,
.cs_section_heading_2 .cs_section_title {
  font-family: var(--primary-font);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Section sub-label: uppercase tracking */
.cs_section_heading .cs_section_subtitle,
.cs_section_heading_2 .cs_section_subtitle {
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sa-red);
}

/*==============================================================
  05. Button Overrides
  All Hedpro button variants re-mapped to Safety Red palette.
================================================================*/

/* Primary filled button */
.cs_btn_style_1,
.cs_btn_style_2 {
  background-color: var(--sa-red);
  border-color: var(--sa-red);
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--sa-radius);
}
.cs_btn_style_1::before,
.cs_btn_style_1::after,
.cs_btn_style_2::before,
.cs_btn_style_2::after {
  background-color: var(--sa-dark);
}
.cs_btn_style_1:hover,
.cs_btn_style_2:hover {
  color: var(--sa-white);
}

/* Outlined button */
.cs_btn_style_3:hover {
  background-color: var(--sa-red);
  border-color: var(--sa-red);
}

/* Icon button */
.cs_btn_style_4 {
  background-color: var(--sa-red);
}
.cs_btn_style_4 .cs_icon_left {
  background-color: var(--sa-red-dark);
}
.cs_btn_style_4:hover {
  background-color: var(--sa-dark);
}

/* Accent filled */
.cs_btn_style_6 {
  background: var(--sa-red);
  border-radius: var(--sa-radius);
}
.cs_btn_style_6:hover {
  background: var(--sa-dark);
}

/* Text / ghost hover */
.cs_btn_style_7:hover {
  color: var(--sa-red);
}

/*==============================================================
  06. Link & Global Accent Overrides
================================================================*/
a:hover { color: var(--sa-red); }

/* Nav active / hover */
.cs_nav .cs_nav_list > li > a:hover,
.cs_nav .cs_nav_list > li.active > a {
  color: var(--sa-red);
}


/* Accent highlights across Hedpro components */
.cs_accent_bg,
.cs_accent_color { background-color: var(--sa-red) !important; }

/* Preloader ring color */
.cs_preloader_circle span { border-top-color: var(--sa-red); }
.cs_preloader_circle_wrapper img { width: 42px; height: auto; }

/* Scroll-to-top button */
#cs_scrollup { background: var(--sa-red); }
#cs_scrollup:hover { background: var(--sa-dark); }

/*==============================================================
  06b. Header — Main navigation bar overrides
================================================================*/

/* Skip-to-content: off-screen until keyboard-focused (accessibility) */
.sa_skip_nav {
  position: absolute;
  top: -9999px;
  left: 16px;
  z-index: 9999;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 0 0 var(--sa-radius) var(--sa-radius);
  text-decoration: none;
}
.sa_skip_nav:focus {
  top: 0;
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Header background & bottom border — always white (not transparent over hero) */
.cs_site_header.cs_style_1 .cs_main_header {
  background: #fff;
  border-bottom: 1px solid var(--sa-border);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Template defaults header text to white (for transparent-over-hero).
   Override to dark since our header is always opaque white. */
.cs_site_header.cs_style_1 {
  color: var(--sa-dark);
}

/* cs_style_1 absolutely centers cs_main_header_left (logo) at 50% of header width.
   Override to standard left-edge flex positioning for our left-logo B2B layout. */
@media (min-width: 1200px) {
  .cs_site_header.cs_style_1 .cs_main_header_left {
    position: static !important;
    transform: none !important;
  }
  /* Give the nav center column 50px breathing room on both sides */
  .cs_site_header.cs_style_1 .cs_main_header_center {
    flex: 1;
    padding: 0 50px;
  }
}

/* Prevent the template's SVG filter from recolouring our branded logo */
.cs_site_header.cs_style_1.cs_sticky_active .cs_site_brand img,
.cs_site_header.cs_style_1.active .cs_site_brand img {
  filter: none !important;
}

/* Nav items — dark text */
.cs_site_header.cs_style_1 .cs_nav_list > li > a {
  color: var(--sa-dark);
  font-family: var(--secondary-font);
  font-size: 15px;
  font-weight: 500;
}
.cs_site_header.cs_style_1 .cs_nav_list > li > a:hover,
.cs_site_header.cs_style_1 .cs_nav_list > li.active > a {
  color: var(--sa-red);
}

/* Sticky header: elevate with shadow, drop the border */
.cs_site_header.cs_sticky_active .cs_main_header {
  box-shadow: 0 2px 20px rgba(0,0,0,0.09);
  border-bottom-color: transparent;
}

/* Reduce default 120px height to a tighter B2B header */
.cs_site_header .cs_main_header_in {
  height: 76px !important;
}
.cs_site_header.cs_sticky_active .cs_main_header_in {
  height: 68px !important;
}

/* Tighten nav item gap — Hedpro default 44px is too wide for 6 items */
@media (min-width: 1200px) {
  .cs_site_header.cs_style_1 .cs_nav_list > li {
    margin-right: 28px !important;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li:last-child {
    margin-right: 0 !important;
  }
}
/* At 1399px breakpoint Hedpro reduces to 30px — keep our tighter value */
@media (max-width: 1399px) {
  .cs_site_header.cs_style_1 .cs_nav_list > li {
    margin-right: 22px !important;
  }
}

/* Logo link sizing & hover */
.cs_site_brand img {
  height: 44px;
  width: auto;
  display: block;
  transition: opacity 0.22s ease;
}
.cs_site_brand:hover img { opacity: 0.82; }

/* Header RFQ CTA button */
.sa_header_cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: var(--sa-radius);
  border: 2px solid var(--sa-red);
  white-space: nowrap;
  transition: var(--sa-transition);
}
.sa_header_cta:hover {
  background: var(--sa-red-dark);
  border-color: var(--sa-red-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(214,40,40,0.3);
}
.sa_header_cta i { font-size: 12px; }

/*==============================================================
  07. sa_top_bar
  Top announcement / contact strip above main header.
================================================================*/
.sa_top_bar {
  background: var(--sa-dark-deep);
  color: rgba(255,255,255,0.75);
  font-family: var(--secondary-font);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sa_top_bar a {
  color: rgba(255,255,255,0.75);
  transition: var(--sa-transition);
}
.sa_top_bar a:hover { color: #fff; }

.sa_top_bar_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sa_top_bar_left,
.sa_top_bar_right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sa_top_bar_item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sa_top_bar_item i {
  font-size: 12px;
  color: var(--sa-red);
}

/* Anchor variant (social icons) */
a.sa_top_bar_item {
  transition: var(--sa-transition);
}
a.sa_top_bar_item:hover {
  color: #fff;
}
a.sa_top_bar_item:hover i {
  color: #fff;
}

@media (max-width: 768px) {
  .sa_top_bar { display: none; }
}

/*==============================================================
  07b. Mobile header — compact layout
================================================================*/

/* Our manual toggle is redundant — template auto-injects cs_menu_toggle */
.sa_mobile_toggle { display: none !important; }

/* Tablet (≤991px): slightly shorter header, smaller logo, trim CTA */
@media (max-width: 991px) {
  .cs_site_header .cs_main_header_in { height: 68px !important; }
  .cs_site_header.cs_sticky_active .cs_main_header_in { height: 60px !important; }
  .cs_site_brand img { height: 38px; }
  .sa_header_cta {
    padding: 9px 16px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
}

/* Mobile (≤767px): icon-only CTA, smaller logo, tighter header */
@media (max-width: 767px) {
  .cs_site_header .cs_main_header_in { height: 60px !important; }
  .cs_site_header.cs_sticky_active .cs_main_header_in { height: 56px !important; }

  /* Logo shrinks to 32px tall on mobile */
  .cs_site_brand img { height: 32px; }

  /* CTA: hide text, keep icon — font-size:0 collapses text nodes,
     explicit font-size on <i> restores the icon */
  .sa_header_cta {
    font-size: 0;
    letter-spacing: 0;
    padding: 10px 13px;
    gap: 0;
    border-radius: 6px;
  }
  .sa_header_cta i { font-size: 16px; }

  /* Vertically center the template hamburger for our 60px header */
  .cs_site_header .cs_menu_toggle {
    top: 50% !important;
    transform: translateY(-50%);
  }
}

/*==============================================================
  08. sa_mega_menu
  Mega dropdown for Products and Industries nav items.
================================================================*/
.sa_mega_menu {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  transform: none;
  min-width: 720px;
  background: #fff;
  border-top: 3px solid var(--sa-red);
  border-radius: 0 0 var(--sa-radius-md) var(--sa-radius-md);
  box-shadow: var(--sa-shadow-lg);
  padding: 32px;
  display: none;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.sa_mega_menu.sa_mega_sm {
  min-width: 440px;
  left: 0;
}

.cs_nav_list > li:hover .sa_mega_menu,
.cs_nav_list > li.sa_has_mega:hover .sa_mega_menu {
  display: grid;
  opacity: 1;
  visibility: visible;
}

.sa_mega_menu_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sa_mega_menu_grid.sa_cols_2 { grid-template-columns: repeat(2, 1fr); }
.sa_mega_menu_grid.sa_cols_4 { grid-template-columns: repeat(4, 1fr); }

.sa_mega_col_title {
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sa-red);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sa-border);
}

.sa_mega_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sa_mega_menu ul li { margin-bottom: 6px; }
.sa_mega_menu ul li a {
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--sa-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: var(--sa-transition);
}
.sa_mega_menu ul li a:hover {
  color: var(--sa-red);
  padding-left: 4px;
}
.sa_mega_menu ul li a i {
  font-size: 11px;
  color: var(--sa-text-light);
}

/*==============================================================
  08b. Products Mega Menu — redesigned flex layout
================================================================*/
.sa_mega_menu.sa_mega_products {
  min-width: 520px;
  padding: 0;
  overflow: hidden;
}
/* Override default display:grid so products menu uses flex */
.cs_nav_list > li:hover .sa_mega_menu.sa_mega_products,
.cs_nav_list > li.sa_has_mega:hover .sa_mega_menu.sa_mega_products {
  display: flex !important;
  align-items: stretch;
}

/* ── Category columns area ──
   Fixed-width flex columns (not 1fr grid tracks) so the row only takes as much
   width as the columns actually present need — a 1fr grid track stretches to
   fill leftover space when a column/widget is toggled off, leaving a blank box. */
.sa_mega_products_body {
  flex: 0 1 auto;
  display: flex;
  align-items: center; /* short/few columns center within the row's height instead of pinning to top with dead space below (row height is driven by the taller CTA panel via align-items:stretch on the outer row) */
  padding: 28px 24px;
  gap: 0;
}
.sa_mega_products_body .sa_mega_col {
  width: 230px;
  flex: 0 0 230px;
  padding: 0 20px;
}
.sa_mega_products_body .sa_mega_col:first-child { padding-left: 0; }
.sa_mega_products_body .sa_mega_col:last-child  { padding-right: 0; }
.sa_mega_products_body .sa_mega_col:not(:last-child) {
  border-right: 1px solid var(--sa-border);
}

/* ── Category list items (icon box + text) ── */
.sa_mega_cat_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sa_mega_cat_list li { margin-bottom: 2px; }
.sa_mega_cat_list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--sa-radius-md);
  text-decoration: none;
  transition: background 0.18s ease;
}
.sa_mega_cat_list li a:hover { background: rgba(214,40,40,0.06); }
.sa_mcat_icon {
  width: 36px;
  height: 36px;
  border-radius: var(--sa-radius);
  background: rgba(214,40,40,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s ease;
}
.sa_mcat_icon i {
  font-size: 14px;
  color: var(--sa-red);
  transition: color 0.18s ease;
}
.sa_mega_cat_list li a:hover .sa_mcat_icon { background: var(--sa-red); }
.sa_mega_cat_list li a:hover .sa_mcat_icon i { color: #fff; }
.sa_mcat_text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sa_mcat_text b {
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-dark);
  line-height: 1.3;
  transition: color 0.18s ease;
}
.sa_mcat_text small {
  font-family: var(--secondary-font);
  font-size: 11px;
  color: var(--sa-text-light);
  line-height: 1.3;
  font-weight: 400;
}
.sa_mega_cat_list li a:hover .sa_mcat_text b { color: var(--sa-red); }

/* ── Standards list ── */
.sa_mega_std_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sa_mega_std_list li { margin-bottom: 4px; }
.sa_mega_std_list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sa-radius-md);
  text-decoration: none;
  transition: background 0.18s ease;
}
.sa_mega_std_list li a:hover { background: rgba(214,40,40,0.06); }
.sa_std_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  background: var(--sa-dark-deep);
  color: #fff;
  font-family: var(--secondary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--sa-radius);
  flex-shrink: 0;
  min-width: 76px;
  text-align: center;
  transition: background 0.18s ease;
}
.sa_std_desc {
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--sa-dark);
  transition: color 0.18s ease;
}
.sa_mega_std_list li a:hover .sa_std_badge { background: var(--sa-red); }
.sa_mega_std_list li a:hover .sa_std_desc  { color: var(--sa-red); }

/* ── Right dark CTA panel ── */
.sa_mega_products_panel {
  width: 215px;
  flex-shrink: 0;
  background: var(--sa-dark-deep);
  border-radius: 0 0 var(--sa-radius-md) 0;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.sa_mpp_eyebrow {
  font-family: var(--secondary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sa-red);
  margin-bottom: 10px;
}
.sa_mpp_title {
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.sa_mpp_desc {
  font-family: var(--secondary-font);
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  line-height: 1.6;
  margin: 0 0 18px;
}
.sa_mpp_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--sa-red);
  color: #fff !important;
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--sa-radius);
  text-decoration: none !important;
  margin-bottom: 8px;
  transition: background 0.18s ease;
  letter-spacing: 0.02em;
}
.sa_mpp_cta:hover { background: var(--sa-red-dark); }
.sa_mpp_browse {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
  transition: color 0.18s ease;
}
.sa_mpp_browse:hover { color: rgba(255,255,255,0.85) !important; }
.sa_mpp_certs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sa_mpp_certs span {
  font-family: var(--secondary-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--sa-radius);
}

/* ── Responsive: hide panel, stack columns ── */
@media (max-width: 1199px) {
  .sa_mega_menu.sa_mega_products { min-width: 520px; }
  .sa_mega_products_panel { display: none; }
  .sa_mega_products_body { flex-wrap: wrap; }
}
@media (max-width: 991px) {
  .sa_mega_products_body {
    flex-direction: column;
    padding: 16px;
  }
  .sa_mega_products_body .sa_mega_col { width: 100%; flex: 0 0 auto; padding: 0; border: none !important; }
}

/*==============================================================
  08c. Industries Mega Menu — same pattern as Products
================================================================*/
.sa_mega_menu.sa_mega_industries {
  min-width: 520px;
  padding: 0;
  overflow: hidden;
}
.cs_nav_list > li:hover .sa_mega_menu.sa_mega_industries,
.cs_nav_list > li.sa_has_mega:hover .sa_mega_menu.sa_mega_industries {
  display: flex !important;
  align-items: stretch;
}

/* Fixed-width flex columns — see .sa_mega_products_body comment above for why not 1fr grid tracks */
.sa_mega_industries_body {
  flex: 0 1 auto;
  display: flex;
  align-items: center; /* same reasoning as .sa_mega_products_body above */
  padding: 28px 24px;
}
.sa_mega_industries_body .sa_mega_col {
  width: 260px;
  flex: 0 0 260px;
  padding: 0 20px;
}
.sa_mega_industries_body .sa_mega_col:first-child { padding-left: 0; }
.sa_mega_industries_body .sa_mega_col:last-child  { padding-right: 0; }
.sa_mega_industries_body .sa_mega_col:not(:last-child) {
  border-right: 1px solid var(--sa-border);
}

/* Responsive */
@media (max-width: 1199px) {
  .sa_mega_menu.sa_mega_industries { min-width: 520px; }
  .sa_mega_industries_body .sa_mega_products_panel { display: none; }
}
@media (max-width: 991px) {
  .sa_mega_industries_body {
    flex-direction: column;
    padding: 16px;
  }
  .sa_mega_industries_body .sa_mega_col { width: 100%; flex: 0 0 auto; padding: 0; border: none !important; }
}

/*==============================================================
  09. sa_hero_eyebrow
  Pre-heading label above H1 — e.g. "ISO 9001 Certified Manufacturer"
================================================================*/
.sa_hero_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(214, 40, 40, 0.1);
  border: 1px solid rgba(214, 40, 40, 0.25);
  color: var(--sa-red);
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.sa_hero_eyebrow i { font-size: 11px; }

/* White variant for use on dark/red hero backgrounds */
.sa_hero_eyebrow.sa_white {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

/*==============================================================
  10. sa_cta_group
  Wraps 2 CTA buttons side by side with consistent spacing.
================================================================*/
.sa_cta_group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

/* Primary CTA — filled red */
.sa_cta_group .sa_btn_primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--sa-radius);
  border: 2px solid var(--sa-red);
  transition: var(--sa-transition);
}
.sa_cta_group .sa_btn_primary:hover {
  background: var(--sa-red-dark);
  border-color: var(--sa-red-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(214,40,40,0.35);
}

/* Secondary CTA — outlined */
.sa_cta_group .sa_btn_secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--sa-dark);
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--sa-radius);
  border: 2px solid var(--sa-dark);
  transition: var(--sa-transition);
}
.sa_cta_group .sa_btn_secondary:hover {
  background: var(--sa-dark);
  color: #fff;
}

/* White variants for dark backgrounds */
.sa_cta_group.sa_on_dark .sa_btn_secondary {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.sa_cta_group.sa_on_dark .sa_btn_secondary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sa-dark);
}

@media (max-width: 576px) {
  .sa_cta_group { flex-direction: column; align-items: flex-start; }
  .sa_cta_group .sa_btn_primary,
  .sa_cta_group .sa_btn_secondary { width: 100%; justify-content: center; }
}

/*==============================================================
  11. sa_industry_card
  Card for Industries overview grid — Oil & Gas, Arc Flash, etc.
================================================================*/
.sa_industry_card {
  position: relative;
  border-radius: var(--sa-radius-md);
  overflow: hidden;
  background: var(--sa-dark);
  display: block;
  transition: var(--sa-transition);
  box-shadow: var(--sa-shadow);
}
.sa_industry_card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sa-shadow-lg);
}

.sa_industry_card_img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  opacity: 0.7;
}
.sa_industry_card:hover .sa_industry_card_img {
  transform: scale(1.04);
  opacity: 0.6;
}

.sa_industry_card_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,24,39,0.95) 0%, rgba(17,24,39,0.3) 60%, transparent 100%);
}

.sa_industry_card_body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px;
}

.sa_industry_card_icon {
  width: 44px;
  height: 44px;
  background: var(--sa-red);
  border-radius: var(--sa-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.sa_industry_card_icon i { font-size: 20px; color: #fff; }

.sa_industry_card_title {
  font-family: var(--primary-font);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.sa_industry_card_sub {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  margin: 0 0 14px;
}

.sa_industry_card_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-red);
  transition: var(--sa-transition);
}
.sa_industry_card:hover .sa_industry_card_link {
  gap: 10px;
  color: #fff;
}

/*==============================================================
  11b. sa_industry_solution_card
  Homepage Section 9 industry solution cards — hazard/standards layout
================================================================*/
.sa_industry_solution_card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  padding: 28px 24px;
  height: 100%;
  transition: var(--sa-transition);
}
.sa_industry_solution_card:hover {
  border-color: var(--sa-red);
  box-shadow: var(--sa-shadow);
  transform: translateY(-3px);
}
.sa_isc_icon {
  width: 52px;
  height: 52px;
  background: var(--sa-red-light);
  border-radius: var(--sa-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--sa-red);
  margin-bottom: 16px;
}
.sa_isc_title {
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--sa-dark);
  margin: 0 0 10px;
}
.sa_isc_challenge,
.sa_isc_protection {
  font-size: 13px;
  color: var(--sa-text);
  line-height: 1.55;
  margin: 0 0 8px;
}
.sa_isc_challenge strong,
.sa_isc_protection strong {
  color: var(--sa-dark);
  font-weight: 600;
}
.sa_isc_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-red);
  text-decoration: none;
  transition: var(--sa-transition);
}
.sa_isc_link:hover {
  color: var(--sa-dark);
  gap: 10px;
}

/*==============================================================
  12. sa_material_card
  Card showcasing brand materials — Nomex®, Kevlar®, etc.
================================================================*/
.sa_material_card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  padding: 28px 24px;
  transition: var(--sa-transition);
  height: 100%;
}
.sa_material_card:hover {
  border-color: var(--sa-red);
  box-shadow: var(--sa-shadow);
  transform: translateY(-2px);
}

.sa_material_card_logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  margin-bottom: 16px;
  filter: grayscale(1);
  opacity: 0.7;
  transition: var(--sa-transition);
}
.sa_material_card:hover .sa_material_card_logo {
  filter: grayscale(0);
  opacity: 1;
}

.sa_material_card_name {
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--sa-dark);
  margin: 0 0 4px;
}
.sa_material_card_by {
  font-family: var(--secondary-font);
  font-size: 12px;
  color: var(--sa-text-light);
  margin: 0 0 12px;
}
.sa_material_card_desc {
  font-family: var(--secondary-font);
  font-size: 14px;
  color: var(--sa-text);
  line-height: 1.6;
  margin: 0 0 16px;
}

.sa_material_card_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sa_material_card_tag {
  background: var(--gray-color2);
  color: var(--sa-dark);
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*==============================================================
  13. sa_product_tag
  Category tag displayed on product cards and detail pages.
================================================================*/
.sa_product_tag {
  display: inline-block;
  background: var(--sa-red-light);
  color: var(--sa-red);
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
}
.sa_product_tag.sa_tag_dark {
  background: var(--sa-dark);
  color: #fff;
}
.sa_product_tag.sa_tag_orange {
  background: var(--sa-orange-light);
  color: #92400E;
}
.sa_product_tag.sa_tag_green {
  background: #D1FAE5;
  color: #065F46;
}

/*==============================================================
  14. sa_standard_badge
  Inline badge for safety standards — EN 469, NFPA 2112, etc.
================================================================*/
.sa_standard_badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--sa-border);
  color: var(--sa-dark);
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px 4px 6px;
  border-radius: var(--sa-radius);
  white-space: nowrap;
}
.sa_standard_badge::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sa-green);
  flex-shrink: 0;
}

/* Wrap multiple badges */
.sa_standards_row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/*==============================================================
  15. sa_cert_badge
  Certification shield badge — ISO, OEKO-TEX, etc.
================================================================*/
.sa_cert_badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #fff;
  border: 2px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  text-align: center;
  padding: 8px;
  transition: var(--sa-transition);
  box-shadow: var(--sa-shadow-sm);
}
.sa_cert_badge:hover {
  border-color: var(--sa-red);
  box-shadow: var(--sa-shadow);
}
.sa_cert_badge img {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  margin-bottom: 4px;
}
.sa_cert_badge_label {
  font-family: var(--secondary-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sa-dark);
  line-height: 1.2;
}

.sa_cert_strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/*==============================================================
  16. sa_spec_table
  Technical specifications table on product detail pages.
================================================================*/
.sa_spec_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--secondary-font);
  font-size: 14px;
}
.sa_spec_table caption {
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-dark);
  text-align: left;
  padding: 0 0 12px 0;
  caption-side: top;
}
.sa_spec_table th,
.sa_spec_table td {
  border: 1px solid var(--sa-border);
  padding: 12px 16px;
  vertical-align: top;
}
.sa_spec_table th {
  background: var(--gray-color1);
  font-weight: 600;
  color: var(--sa-dark);
  width: 38%;
  white-space: nowrap;
}
.sa_spec_table td { color: var(--sa-text); }
.sa_spec_table tr:nth-child(even) td { background: #fafafa; }

/* Compliance matrix variant */
.sa_spec_table.sa_matrix th,
.sa_spec_table.sa_matrix td {
  text-align: center;
  width: auto;
}
.sa_spec_table.sa_matrix th:first-child,
.sa_spec_table.sa_matrix td:first-child {
  text-align: left;
  font-weight: 600;
  width: auto;
}
.sa_check { color: var(--sa-green); font-size: 16px; }
.sa_dash  { color: var(--sa-border); }

/*==============================================================
  17. sa_download_card
  Document download card for certifications, datasheets, catalog.
================================================================*/
.sa_download_card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  padding: 20px;
  transition: var(--sa-transition);
}
.sa_download_card:hover {
  border-color: var(--sa-red);
  box-shadow: var(--sa-shadow);
}

.sa_download_card_icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--sa-red-light);
  border-radius: var(--sa-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa_download_card_icon i {
  font-size: 22px;
  color: var(--sa-red);
}

.sa_download_card_body { flex: 1; min-width: 0; }

.sa_download_card_title {
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--sa-dark);
  margin: 0 0 4px;
}
.sa_download_card_meta {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: var(--sa-text-light);
  margin: 0 0 12px;
}
.sa_download_card_meta span + span::before {
  content: " · ";
}

.sa_download_card_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--sa-radius);
  transition: var(--sa-transition);
}
.sa_download_card_btn:hover {
  background: var(--sa-red-dark);
  color: #fff;
}

/* Certificate thumbnail preview variant */
.sa_download_card.sa_cert_variant {
  flex-direction: column;
  align-items: flex-start;
}
.sa_download_card.sa_cert_variant .sa_cert_preview {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--sa-radius);
  margin-bottom: 12px;
  border: 1px solid var(--sa-border);
}

/*==============================================================
  18. sa_rfq_form
  Request For Quote form — inline on product pages + standalone.
================================================================*/
.sa_rfq_form {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-lg);
  padding: 32px;
  box-shadow: var(--sa-shadow);
}

.sa_rfq_form_title {
  font-family: var(--primary-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--sa-dark);
  margin: 0 0 6px;
}
.sa_rfq_form_sub {
  font-family: var(--secondary-font);
  font-size: 14px;
  color: var(--sa-text-light);
  margin: 0 0 24px;
}

.sa_rfq_form .sa_field_group {
  margin-bottom: 16px;
}
.sa_rfq_form label {
  display: block;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-dark);
  margin-bottom: 6px;
}
.sa_rfq_form label .sa_required {
  color: var(--sa-red);
  margin-left: 2px;
}

.sa_rfq_form input[type="text"],
.sa_rfq_form input[type="email"],
.sa_rfq_form input[type="tel"],
.sa_rfq_form input[type="number"],
.sa_rfq_form select,
.sa_rfq_form textarea {
  width: 100%;
  background: var(--gray-color1);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  padding: 11px 14px;
  font-family: var(--secondary-font);
  font-size: 14px;
  color: var(--sa-dark);
  transition: var(--sa-transition);
  outline: none;
}
.sa_rfq_form input:focus,
.sa_rfq_form select:focus,
.sa_rfq_form textarea:focus {
  border-color: var(--sa-red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(214,40,40,0.08);
}

.sa_rfq_form textarea { min-height: 100px; resize: vertical; }

.sa_rfq_form .sa_field_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 576px) {
  .sa_rfq_form .sa_field_row { grid-template-columns: 1fr; }
}

/* Submit button */
.sa_rfq_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 28px;
  border: none;
  border-radius: var(--sa-radius);
  cursor: pointer;
  transition: var(--sa-transition);
  margin-top: 8px;
}
.sa_rfq_submit:hover {
  background: var(--sa-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(214,40,40,0.35);
}

/* Trust note under form */
.sa_rfq_trust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--secondary-font);
  font-size: 12px;
  color: var(--sa-text-light);
}
.sa_rfq_trust i { color: var(--sa-green); font-size: 12px; }

/*==============================================================
  19. sa_process_step
  Numbered manufacturing process steps (1 → 2 → 3 … 6).
================================================================*/
.sa_process_steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
@media (max-width: 991px) {
  .sa_process_steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .sa_process_steps { grid-template-columns: 1fr; }
}

.sa_process_step {
  background: #fff;
  border: 1px solid var(--sa-border);
  padding: 32px 28px;
  position: relative;
  transition: var(--sa-transition);
}
.sa_process_step:hover {
  border-color: var(--sa-red);
  z-index: 1;
  box-shadow: var(--sa-shadow);
}

.sa_process_step_num {
  font-family: var(--primary-font);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: var(--sa-border);
  position: absolute;
  top: 20px;
  right: 24px;
  transition: var(--sa-transition);
}
.sa_process_step:hover .sa_process_step_num {
  color: rgba(214,40,40,0.12);
}

.sa_process_step_icon {
  width: 52px;
  height: 52px;
  background: var(--sa-red-light);
  border-radius: var(--sa-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: var(--sa-transition);
}
.sa_process_step:hover .sa_process_step_icon {
  background: var(--sa-red);
}
.sa_process_step_icon i { font-size: 22px; color: var(--sa-red); }
.sa_process_step:hover .sa_process_step_icon i { color: #fff; }

.sa_process_step_title {
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--sa-dark);
  margin: 0 0 8px;
}
.sa_process_step_desc {
  font-family: var(--secondary-font);
  font-size: 14px;
  color: var(--sa-text);
  line-height: 1.6;
  margin: 0;
}

/*==============================================================
  20. sa_breadcrumb
  Page breadcrumb navigation bar.
================================================================*/
.sa_breadcrumb_wrap {
  background: var(--gray-color1);
  border-bottom: 1px solid var(--sa-border);
  padding: 11px 0;
}
.sa_breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 500;
}
.sa_breadcrumb li {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sa_breadcrumb li a {
  color: var(--sa-text-light);
  text-decoration: none;
  padding: 3px 7px;
  border-radius: var(--sa-radius);
  transition: color 0.2s ease, background 0.2s ease;
}
.sa_breadcrumb li a:hover {
  color: var(--sa-red);
  background: rgba(214, 40, 40, 0.07);
}
.sa_breadcrumb li::after {
  content: "›";
  color: var(--sa-border);
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
  margin: 0 1px;
  pointer-events: none;
}
.sa_breadcrumb li:last-child::after { display: none; }
.sa_breadcrumb li:last-child > a,
.sa_breadcrumb li:last-child > span {
  color: var(--sa-dark);
  font-weight: 600;
  cursor: default;
}

/* ── Dark-hero variant (breadcrumb embedded inside .sa_page_hero) ── */
.sa_page_hero .sa_breadcrumb_wrap {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--sa-radius-md);
  padding: 7px 4px;
}
.sa_page_hero .sa_breadcrumb li a {
  color: rgba(255,255,255,0.55);
}
.sa_page_hero .sa_breadcrumb li a:hover {
  color: #fff;
  background: rgba(255,255,255,0.10);
}
.sa_page_hero .sa_breadcrumb li::after {
  color: rgba(255,255,255,0.22);
}
.sa_page_hero .sa_breadcrumb li:last-child > a,
.sa_page_hero .sa_breadcrumb li:last-child > span {
  color: rgba(255,255,255,0.90);
}

/*==============================================================
  21. sa_sticky_product_cta
  Mobile-only sticky bar at bottom of product detail pages.
================================================================*/
.sa_sticky_product_cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background: #fff;
  border-top: 2px solid var(--sa-border);
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}

@media (max-width: 991px) {
  .sa_sticky_product_cta { display: flex; align-items: center; gap: 12px; }
}

.sa_sticky_product_cta_label {
  flex: 1;
  min-width: 0;
}
.sa_sticky_product_cta_name {
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--sa-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sa_sticky_product_cta_sub {
  font-family: var(--secondary-font);
  font-size: 11px;
  color: var(--sa-text-light);
}
.sa_sticky_product_cta_btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--sa-radius);
  white-space: nowrap;
}

/*==============================================================
  22. sa_cta_dark_banner
  Full-width dark CTA section — "Ready to Partner With Us?"
================================================================*/
.sa_cta_dark_banner {
  background: var(--sa-dark-deep);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.sa_cta_dark_banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(214,40,40,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.sa_cta_dark_banner_inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.sa_cta_dark_banner_text { flex: 1; min-width: 280px; }

.sa_cta_dark_banner_eyebrow {
  display: inline-block;
  background: rgba(214,40,40,0.18);
  color: #F87171;
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
}
.sa_cta_dark_banner_title {
  font-family: var(--primary-font);
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 12px;
}
.sa_cta_dark_banner_sub {
  font-family: var(--secondary-font);
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
.sa_cta_dark_banner_actions { flex-shrink: 0; }

@media (max-width: 768px) {
  .sa_cta_dark_banner_title { font-size: 28px; }
  .sa_cta_dark_banner_inner { flex-direction: column; }
}

/*==============================================================
  23. Utility Classes
================================================================*/

/* Color utilities */
.sa_text_red    { color: var(--sa-red) !important; }
.sa_text_dark   { color: var(--sa-dark) !important; }
.sa_text_light  { color: var(--sa-text-light) !important; }
.sa_text_white  { color: #fff !important; }
.sa_bg_red      { background-color: var(--sa-red) !important; }
.sa_bg_dark     { background-color: var(--sa-dark) !important; }
.sa_bg_light    { background-color: var(--gray-color1) !important; }

/* Divider */
.sa_divider {
  width: 48px;
  height: 3px;
  background: var(--sa-red);
  border-radius: 2px;
  margin: 16px 0;
}
.sa_divider.sa_center { margin-left: auto; margin-right: auto; }

/* Section label (above headings) */
.sa_section_label {
  display: inline-block;
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sa-red);
  margin-bottom: 10px;
}

/* Stats counter block */
.sa_stat_item { text-align: center; }
.sa_stat_number {
  font-family: var(--primary-font);
  font-size: 54px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
.sa_stat_suffix { font-size: 38px; font-weight: 900; color: var(--sa-red); }
.sa_stat_label {
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Flag for "New" / "Coming Soon" labels */
.sa_flag {
  display: inline-block;
  background: var(--sa-orange);
  color: #fff;
  font-family: var(--secondary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.sa_flag.sa_flag_gray {
  background: var(--sa-text-light);
}

/* Page inner hero (replaces cs_about_hero on inner pages) */
.sa_page_hero {
  background: var(--sa-dark-deep);
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
}
.sa_page_hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(214,40,40,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.sa_industry_hero_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 0;
  pointer-events: none;
}
.sa_page_hero_inner { position: relative; z-index: 1; }
.sa_page_hero_label {
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214,40,40,0.9);
  margin-bottom: 10px;
}
.sa_page_hero h1 {
  font-family: var(--primary-font);
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.sa_page_hero p {
  font-family: var(--secondary-font);
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0;
}

/* CMS placeholder annotation (hidden in browser) */
/* @cms annotations are HTML comments — see component-refactoring-plan.md */

/*==============================================================
  24. Responsive Overrides
================================================================*/
@media (max-width: 1199px) {
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .sa_cta_dark_banner_title { font-size: 32px; }
  .sa_mega_menu { min-width: 600px; }
}

@media (max-width: 991px) {
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
  .sa_process_steps { grid-template-columns: repeat(2, 1fr); }
  .sa_rfq_form { padding: 24px; }

  /* ---- Mobile mega menu: inline, scrollable, no absolute positioning ---- */
  /* No !important on display so jQuery slideToggle can show/hide it */
  .sa_mega_menu {
    display: none;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    border-left: 3px solid var(--sa-red);
    padding: 12px 16px 12px 20px !important;
    background: #f8f9fa !important;
    margin-top: 4px;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
  /* Hover rule must not fire inside mobile nav */
  .cs_nav_list > li:hover .sa_mega_menu,
  .cs_nav_list > li.sa_has_mega:hover .sa_mega_menu {
    display: none;
    opacity: 1;
    visibility: visible;
  }
  /* Single-column grid on mobile */
  .sa_mega_menu_grid,
  .sa_mega_menu_grid.sa_cols_2,
  .sa_mega_menu_grid.sa_cols_4 { display: block !important; }

  .sa_mega_col_title { margin: 12px 0 6px; font-size: 10px; }
  .sa_mega_menu ul { margin-bottom: 8px; }
  .sa_mega_menu ul li a { padding: 7px 0; font-size: 14px; }
  /* Hide decorative icons inside mobile mega links to keep lines clean */
  .sa_mega_menu ul li a i { display: none !important; }
}

@media (max-width: 767px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  .sa_page_hero { padding: 50px 0 40px; }
  .sa_page_hero h1 { font-size: 32px; }
  .sa_cta_dark_banner { padding: 60px 0; }
  .sa_stat_number { font-size: 40px; }
  .sa_stat_suffix { font-size: 28px; }
}

@media (max-width: 575px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  .sa_rfq_form { padding: 20px 16px; }
  .sa_process_steps { grid-template-columns: 1fr; }
  .sa_download_card { flex-direction: column; }
  .sa_cert_badge { width: 68px; height: 68px; }
}

/*==============================================================
  25. sa_footer — B2B Industrial Footer
================================================================*/

/* Pre-footer CTA strip */
.sa_footer_cta {
  background: var(--sa-red);
  padding: 38px 0;
}
.sa_footer_cta_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sa_footer_cta_text h3 {
  font-family: var(--primary-font);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.sa_footer_cta_text p {
  font-family: var(--secondary-font);
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 0;
}
.sa_footer_cta_actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.sa_footer_cta_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--sa-red);
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--sa-radius);
  transition: var(--sa-transition);
}
.sa_footer_cta_btn:hover {
  background: var(--sa-dark);
  color: #fff;
}
.sa_footer_cta_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: var(--sa-transition);
}
.sa_footer_cta_link:hover { color: #fff; }

/* Main footer body */
.sa_footer_body {
  background: var(--sa-dark-deep);
  padding: 72px 0 56px;
  border-top: 3px solid var(--sa-red);
}

.sa_footer_grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.3fr;
  gap: 40px 48px;
}

/* Brand column */
.sa_footer_logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 20px;
}
.sa_footer_tagline {
  font-family: var(--secondary-font);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  margin: 0 0 24px;
}
.sa_footer_certs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.sa_footer_cert_badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.sa_footer_cert_badge i {
  color: var(--sa-red);
  font-size: 13px;
  width: 14px;
  text-align: center;
}

/* Social icons */
.sa_footer_social {
  display: flex;
  gap: 8px;
}
.sa_footer_social_link {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sa-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  transition: var(--sa-transition);
}
.sa_footer_social_link:hover {
  background: var(--sa-red);
  border-color: var(--sa-red);
  color: #fff;
  transform: translateY(-2px);
}

/* Nav column titles */
.sa_footer_col_title {
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Nav link lists */
.sa_footer_links {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.sa_footer_links:last-child { margin-bottom: 0; }
.sa_footer_links li { margin-bottom: 11px; }
.sa_footer_links a {
  font-family: var(--secondary-font);
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  gap: 0;
  transition: var(--sa-transition);
}
.sa_footer_links a:hover {
  color: #fff;
  padding-left: 5px;
}

/* Contact column */
.sa_footer_contact_list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.sa_footer_contact_list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--secondary-font);
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
}
.sa_footer_contact_list li i {
  color: var(--sa-red);
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.sa_footer_contact_list a {
  color: rgba(255,255,255,0.5);
  transition: var(--sa-transition);
}
.sa_footer_contact_list a:hover { color: #fff; }

.sa_footer_rfq_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--sa-radius);
  transition: var(--sa-transition);
}
.sa_footer_rfq_btn:hover {
  background: var(--sa-red-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(214,40,40,0.35);
}

/* Bottom bar */
.sa_footer_bottom {
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.sa_footer_bottom_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
}
.sa_footer_copy {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.sa_footer_bottom_links {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sa_footer_bottom_links a {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  transition: var(--sa-transition);
}
.sa_footer_bottom_links a:hover { color: rgba(255,255,255,0.75); }

/* Responsive footer */
@media (max-width: 1199px) {
  .sa_footer_grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  .sa_footer_brand_col { grid-column: 1 / -1; }
  .sa_footer_body { padding: 56px 0 48px; }
}
@media (max-width: 767px) {
  .sa_footer_grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .sa_footer_cta_inner { flex-direction: column; align-items: flex-start; }
  .sa_footer_cta_actions { flex-direction: column; align-items: flex-start; }
  .sa_footer_body { padding: 48px 0 40px; }
}
@media (max-width: 575px) {
  .sa_footer_grid { grid-template-columns: 1fr; }
  .sa_footer_brand_col { grid-column: auto; }
  .sa_footer_bottom_inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sa_footer_bottom_links { gap: 16px; flex-wrap: wrap; }
}

/*==============================================================
  26. Spacing System — Token Scale
  XS=8  SM=16  MD=24  LG=40  XL=64  2XL=96  3XL=128
================================================================*/
:root {
  --sp-xs:    8px;
  --sp-sm:   16px;
  --sp-md:   24px;
  --sp-lg:   40px;
  --sp-xl:   64px;
  --sp-2xl:  96px;
  --sp-3xl: 128px;
}

/*==============================================================
  27. Section Rhythm — Responsive Padding Override
  Targets only sections that use the large inline padding values
  (100px, 80px, 70px). Smaller sections (≤60px) are already
  appropriately compact and are left unchanged.
  !important is required to override inline style attributes.
================================================================*/

/* ≤1199px: Laptop → reduce large padding */
@media (max-width: 1199px) {
  section[style*="padding:100px 0"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  section[style*="padding:80px 0"]  { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding:70px 0"]  { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sa_cta_dark_banner { padding: 72px 0; }
  .sa_footer_cta { padding: 34px 0; }
}

/* ≤991px: Tablet portrait / landscape */
@media (max-width: 991px) {
  section[style*="padding:100px 0"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding:80px 0"]  { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding:70px 0"]  { padding-top: 44px !important; padding-bottom: 44px !important; }
  .sa_page_hero { padding: 60px 0 50px; }
  .sa_cta_dark_banner { padding: 60px 0; }
}

/* ≤767px: Mobile landscape / large phones */
@media (max-width: 767px) {
  section[style*="padding:100px 0"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  section[style*="padding:80px 0"]  { padding-top: 44px !important; padding-bottom: 44px !important; }
  section[style*="padding:70px 0"]  { padding-top: 36px !important; padding-bottom: 36px !important; }
  .sa_page_hero { padding: 50px 0 40px; }
  .sa_cta_dark_banner { padding: 52px 0; }
  .sa_footer_cta { padding: 28px 0; }
}

/* ≤575px: Standard mobile */
@media (max-width: 575px) {
  section[style*="padding:100px 0"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  section[style*="padding:80px 0"]  { padding-top: 36px !important; padding-bottom: 36px !important; }
  section[style*="padding:70px 0"]  { padding-top: 30px !important; padding-bottom: 30px !important; }
  .sa_page_hero { padding: 44px 0 36px; }
  .sa_cta_dark_banner { padding: 44px 0; }
}

/* ≤374px: Small mobile (320–374px) */
@media (max-width: 374px) {
  section[style*="padding:100px 0"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  section[style*="padding:80px 0"]  { padding-top: 28px !important; padding-bottom: 28px !important; }
  section[style*="padding:70px 0"]  { padding-top: 24px !important; padding-bottom: 24px !important; }
  .sa_page_hero { padding: 36px 0 28px; }
  .sa_cta_dark_banner { padding: 36px 0; }
}

/*==============================================================
  28. Section Heading Margin Override
  Section intro blocks use inline margin-bottom 48–56px.
  These reduce proportionally on smaller screens.
================================================================*/
@media (max-width: 991px) {
  [style*="margin:0 auto 56px"], [style*="margin:0 auto 52px"],
  [style*="margin:0 auto 48px"] { margin-bottom: 40px !important; }
  [style*="margin-bottom:56px"], [style*="margin-bottom:52px"],
  [style*="margin-bottom:48px"] { margin-bottom: 36px !important; }
}
@media (max-width: 767px) {
  [style*="margin:0 auto 56px"], [style*="margin:0 auto 52px"],
  [style*="margin:0 auto 48px"] { margin-bottom: 32px !important; }
  [style*="margin-bottom:56px"], [style*="margin-bottom:52px"],
  [style*="margin-bottom:48px"] { margin-bottom: 28px !important; }
}
@media (max-width: 575px) {
  [style*="margin:0 auto 56px"], [style*="margin:0 auto 52px"],
  [style*="margin:0 auto 48px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom:56px"], [style*="margin-bottom:52px"],
  [style*="margin-bottom:48px"] { margin-bottom: 20px !important; }
}

/*==============================================================
  29. Typography Scale — !important Responsive Overrides
  Inline font-size styles on heading elements override normal CSS.
  These !important rules enforce responsive scaling site-wide
  across all 54 pages regardless of inline style attributes.
================================================================*/
@media (max-width: 1199px) {
  h1 { font-size: 44px !important; }
  h2 { font-size: 34px !important; }
  h3 { font-size: 26px !important; }
  h4 { font-size: 20px !important; }
}
@media (max-width: 991px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 30px !important; }
  h3 { font-size: 24px !important; }
  h4 { font-size: 19px !important; }
}
@media (max-width: 767px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 22px !important; }
  h4 { font-size: 18px !important; }
  h5 { font-size: 16px !important; }
}
@media (max-width: 575px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 20px !important; }
  h4 { font-size: 17px !important; }
}
@media (max-width: 374px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
}

/* Hero H1 — retained larger than generic h1 rules above.
   Higher specificity (.cs_hero_style_1 h1) beats generic h1
   when both use !important at the same breakpoint. */
@media (max-width: 1199px) { .cs_hero_style_1 h1 { font-size: 50px !important; } }
@media (max-width: 991px)  { .cs_hero_style_1 h1 { font-size: 42px !important; } }
@media (max-width: 767px)  { .cs_hero_style_1 h1 { font-size: 34px !important; } }
@media (max-width: 575px)  { .cs_hero_style_1 h1 { font-size: 28px !important; } }
@media (max-width: 374px)  { .cs_hero_style_1 h1 { font-size: 24px !important; } }

/* Page inner hero H1 — inherits the class-based rule, no inline override */
@media (max-width: 991px)  { .sa_page_hero h1 { font-size: 36px !important; } }
@media (max-width: 767px)  { .sa_page_hero h1 { font-size: 30px !important; } }
@media (max-width: 575px)  { .sa_page_hero h1 { font-size: 26px !important; } }
@media (max-width: 374px)  { .sa_page_hero h1 { font-size: 22px !important; } }

/* CTA dark banner title — has both class and possible inline sizes */
@media (max-width: 1199px) { .sa_cta_dark_banner_title { font-size: 32px !important; } }
@media (max-width: 991px)  { .sa_cta_dark_banner_title { font-size: 30px !important; } }
@media (max-width: 767px)  { .sa_cta_dark_banner_title { font-size: 26px !important; } }
@media (max-width: 575px)  { .sa_cta_dark_banner_title { font-size: 22px !important; } }

/*==============================================================
  30. Hero — Content Padding & Body Responsive
  .cs_hero_content has inline padding:120px 0 100px and
  max-width:640px. Both override standard CSS without !important.
================================================================*/
@media (max-width: 1199px) {
  .cs_hero_content { padding-top: 100px !important; padding-bottom: 80px !important; }
}
@media (max-width: 991px) {
  .cs_hero_content { padding-top: 80px !important; padding-bottom: 64px !important; }
}
@media (max-width: 767px) {
  .cs_hero_content {
    padding-top: 72px !important;
    padding-bottom: 52px !important;
    max-width: 100% !important;
  }
  /* Release constrained max-width on child paragraphs */
  .cs_hero_content > p { max-width: 100% !important; }
  /* Hero sub-text: reduce inline 18px font-size on mobile */
  .cs_hero_style_1 p[style*="font-size:18px"] { font-size: 16px !important; }
}
@media (max-width: 575px) {
  .cs_hero_content { padding-top: 64px !important; padding-bottom: 44px !important; }
  .cs_hero_style_1 p[style*="font-size:18px"] { font-size: 15px !important; }
}
@media (max-width: 374px) {
  .cs_hero_content { padding-top: 56px !important; padding-bottom: 40px !important; }
}

/*==============================================================
  31. Hero Stats Strip — .sa_hero_stats
  Hook class added via index.html. Controls inline gap and
  margin values at each breakpoint.
================================================================*/
.sa_hero_stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .sa_hero_stats { gap: 24px; margin-top: 40px !important; }
}
@media (max-width: 767px) {
  .sa_hero_stats {
    gap: 18px;
    margin-top: 32px !important;
    padding-top: 24px !important;
  }
}
@media (max-width: 575px) {
  .sa_hero_stats { gap: 14px 20px; margin-top: 24px !important; padding-top: 18px !important; }
  /* Reduce inline 28px stat numbers */
  .sa_hero_stats [style*="font-size:28px"] { font-size: 22px !important; }
}
@media (max-width: 374px) {
  /* Switch to 2-column grid so 4 stats always fit at 320px */
  .sa_hero_stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px !important;
    padding-top: 16px !important;
  }
  .sa_hero_stats [style*="font-size:28px"] { font-size: 20px !important; }
}

/*==============================================================
  32. Trust / Certification Bar — .sa_cert_bar + .sa_cert_bar_inner
  Hook classes added via index.html.
  Critical fix: dividers cause ugly wrapping on mobile.
================================================================*/
.sa_cert_bar { overflow: hidden; }

/* Override inline gap:40px — requires !important */
@media (max-width: 1199px) { .sa_cert_bar_inner { gap: 28px !important; } }
@media (max-width: 991px) {
  .sa_cert_bar_inner { gap: 20px !important; }
  /* Hide vertical dividers when items may wrap to multiple rows */
  .sa_cert_bar_divider { display: none !important; }
}
@media (max-width: 767px) { .sa_cert_bar_inner { gap: 12px 20px !important; } }
@media (max-width: 575px) {
  .sa_cert_bar_inner { gap: 10px 14px !important; }
  /* Reduce icon and text sizes for compact display */
  .sa_cert_bar_inner i[style*="font-size:20px"] { font-size: 16px !important; }
  .sa_cert_bar_inner span[style*="font-size:13px"] { font-size: 11px !important; }
}

/*==============================================================
  33. About Section — Floating Stat Card (.sa_about_stat_card)
  Hook class added via index.html. Card uses position:absolute
  with bottom:-24px; right:-24px — causes horizontal overflow
  when columns stack at ≤991px.
================================================================*/

/* Step down the overflow at large tablet */
@media (max-width: 1199px) {
  .sa_about_stat_card { right: -8px !important; bottom: -8px !important; }
}
/* At ≤991px columns stack — keep card absolutely positioned
   but flush with the image boundary to prevent overflow */
@media (max-width: 991px) {
  .sa_about_stat_card { right: 8px !important; bottom: 8px !important; }
}
/* Reduce card size on small mobile */
@media (max-width: 575px) {
  .sa_about_stat_card {
    right: 8px !important;
    bottom: 8px !important;
    min-width: 130px !important;
    padding: 14px 18px !important;
  }
  .sa_about_stat_card [style*="font-size:36px"] { font-size: 28px !important; }
}
@media (max-width: 374px) {
  .sa_about_stat_card {
    min-width: 110px !important;
    padding: 12px 14px !important;
  }
  .sa_about_stat_card [style*="font-size:36px"] { font-size: 24px !important; }
}

/*==============================================================
  34. Products Section Header — .sa_products_hd
  Hook class added via index.html. Controls the flex split
  between heading and "View Full Catalog" link.
================================================================*/
.sa_products_hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 767px) {
  .sa_products_hd { align-items: flex-start; gap: 10px; margin-bottom: 28px !important; }
}
@media (max-width: 575px) {
  .sa_products_hd { gap: 8px; margin-bottom: 24px !important; }
}

/*==============================================================
  35. CTA Dark Banner — Responsive Layout
================================================================*/
@media (max-width: 767px) {
  .sa_cta_dark_banner_inner { gap: 28px; }
  .sa_cta_dark_banner_text { min-width: 100%; }
  .sa_cta_dark_banner_sub { font-size: 14px; }
}
@media (max-width: 575px) {
  .sa_cta_dark_banner_inner { gap: 20px; }
  .sa_cta_dark_banner_sub { font-size: 13px; }
}

/*==============================================================
  36. Footer — Responsive Improvements
================================================================*/
@media (max-width: 767px) {
  .sa_footer_cta_text h3 { font-size: 18px; }
  .sa_footer_cta_inner { gap: 20px; }
  .sa_footer_body { padding: 44px 0 36px; }
  .sa_footer_tagline { font-size: 13px; }
}
@media (max-width: 575px) {
  .sa_footer_body { padding: 36px 0 28px; }
  .sa_footer_col_title { font-size: 10px; margin-bottom: 14px; padding-bottom: 10px; }
  .sa_footer_links a { font-size: 13px; }
}
@media (max-width: 374px) {
  .sa_footer_bottom_inner { padding: 16px 0; }
  .sa_footer_copy { font-size: 11px; }
  .sa_footer_bottom_links a { font-size: 11px; }
  .sa_footer_bottom_links { gap: 12px; }
}

/*==============================================================
  37. Industry Cards — Mobile Improvements
================================================================*/
@media (max-width: 575px) {
  .sa_industry_card { min-height: 220px; }
  .sa_industry_card_body { padding: 18px 14px 14px; }
  .sa_industry_card_title { font-size: 16px; }
  .sa_industry_card_sub { font-size: 12px; margin-bottom: 10px; }
  .sa_industry_card_icon { width: 38px; height: 38px; margin-bottom: 8px; }
  .sa_industry_card_icon i { font-size: 17px; }
}

/*==============================================================
  38. Certification Badges Strip — Responsive
================================================================*/
@media (max-width: 767px) {
  .sa_cert_badge { width: 72px; height: 72px; padding: 6px; }
  .sa_cert_badge img { max-width: 38px; max-height: 38px; }
  .sa_cert_strip { gap: 10px; }
}
@media (max-width: 575px) {
  .sa_cert_badge { width: 64px; height: 64px; }
  .sa_cert_badge img { max-width: 32px; max-height: 32px; }
  .sa_cert_badge_label { font-size: 8px; }
}
@media (max-width: 374px) {
  .sa_cert_badge { width: 58px; height: 58px; padding: 4px; }
}

/*==============================================================
  39. Stats Counter Section — Responsive
================================================================*/
@media (max-width: 767px) {
  .sa_stat_number { font-size: 40px; }
  .sa_stat_suffix { font-size: 28px; }
  .sa_stat_label  { font-size: 13px; }
}
@media (max-width: 575px) {
  .sa_stat_number { font-size: 34px; }
  .sa_stat_suffix { font-size: 24px; }
}
@media (max-width: 374px) {
  .sa_stat_number { font-size: 28px; }
  .sa_stat_suffix { font-size: 20px; }
  .sa_stat_label  { font-size: 12px; }
}

/*==============================================================
  40. Industry Solution Cards — Mobile
================================================================*/
@media (max-width: 767px) {
  .sa_industry_solution_card { padding: 22px 18px; }
  .sa_isc_icon { width: 44px; height: 44px; }
  .sa_isc_title { font-size: 16px; }
}
@media (max-width: 575px) {
  .sa_industry_solution_card { padding: 18px 14px; }
  .sa_isc_challenge, .sa_isc_protection { font-size: 12px; }
}

/*==============================================================
  41. Material Cards — Mobile
================================================================*/
@media (max-width: 767px) {
  .sa_material_card { padding: 22px 18px; }
}
@media (max-width: 575px) {
  .sa_material_card { padding: 18px 14px; }
  .sa_material_card_desc { font-size: 13px; }
  .sa_material_card_name { font-size: 15px; }
}

/*==============================================================
  42. Product Detail Page — Gallery, Tabs & Sticky Panel
================================================================*/

/* Gallery height reduction on mobile */
@media (max-width: 767px) {
  .sa_gallery_main img { height: 320px !important; }
  .sa_gallery_thumbs { gap: 8px; }
  .sa_gallery_thumb { flex: 0 0 68px; height: 68px; }
}
@media (max-width: 575px) {
  .sa_gallery_main img { height: 260px !important; }
  .sa_gallery_thumb { flex: 0 0 58px; height: 58px; }
}
@media (max-width: 374px) {
  .sa_gallery_main img { height: 220px !important; }
  .sa_gallery_thumb { flex: 0 0 50px; height: 50px; }
}

/* Quick spec row stacks on very small screens */
@media (max-width: 374px) {
  .sa_quick_spec_row { flex-direction: column; gap: 3px; padding: 8px 12px; }
  .sa_quick_spec_label { width: auto; font-size: 12px; }
  .sa_quick_spec_val { font-size: 12px; }
}

/* Color chips wrap gracefully */
@media (max-width: 575px) {
  .sa_color_chips { gap: 6px; }
  .sa_color_chip { font-size: 11px; padding: 4px 10px; }
}

/*==============================================================
  43. Spec Table — Mobile Readability
================================================================*/
@media (max-width: 767px) {
  .sa_spec_table th, .sa_spec_table td { padding: 10px 12px; font-size: 13px; }
  .sa_spec_table th { min-width: 100px; white-space: normal; }
}
@media (max-width: 575px) {
  .sa_spec_table th, .sa_spec_table td { padding: 8px 10px; font-size: 12px; }
}

/*==============================================================
  44. Download Cards — Mobile
================================================================*/
@media (max-width: 575px) {
  .sa_download_card { padding: 16px; gap: 12px; }
  .sa_download_card_icon { width: 40px; height: 40px; }
  .sa_download_card_icon i { font-size: 18px; }
  .sa_download_card_title { font-size: 14px; }
}

/*==============================================================
  45. RFQ Form — Mobile Padding Adjustments
================================================================*/
@media (max-width: 575px) {
  .sa_rfq_form { padding: 20px 16px !important; }
  .sa_rfq_form_title { font-size: 17px; }
  .sa_rfq_form_sub { font-size: 13px; }
}
@media (max-width: 374px) {
  .sa_rfq_form { padding: 16px 12px !important; }
}

/*==============================================================
  46. Process Steps — Mobile
================================================================*/
@media (max-width: 575px) {
  .sa_process_step { padding: 24px 20px; }
  .sa_process_step_num { font-size: 40px; top: 14px; right: 16px; }
  .sa_process_step_title { font-size: 15px; }
  .sa_process_step_desc { font-size: 13px; }
  .sa_process_step_icon { width: 44px; height: 44px; }
  .sa_process_step_icon i { font-size: 18px; }
}

/*==============================================================
  47. Breadcrumb — Small Mobile
================================================================*/
@media (max-width: 575px) {
  .sa_breadcrumb_wrap { padding: 9px 0; }
  .sa_breadcrumb { font-size: 12px; gap: 1px; }
  .sa_breadcrumb li { gap: 1px; }
  .sa_breadcrumb li::after { font-size: 15px; }
  .sa_breadcrumb li a { padding: 2px 5px; }
}

/*==============================================================
  48. Mega Menu — Tablet Landscape Polish (992–1199px)
================================================================*/
@media (min-width: 992px) and (max-width: 1199px) {
  .sa_mega_menu { min-width: 580px; padding: 24px; }
  .sa_mega_menu_grid { gap: 18px; }
  .sa_mega_menu ul li a { font-size: 13px; }
  .sa_mega_col_title { font-size: 10px; margin-bottom: 10px; }
  .sa_mega_menu ul li { margin-bottom: 4px; }
}

/*==============================================================
  49. Standard Badges — Mobile Wrapping
================================================================*/
@media (max-width: 575px) {
  .sa_standard_badge { font-size: 11px; padding: 3px 8px 3px 5px; }
  .sa_standard_badge::before { width: 5px; height: 5px; }
  .sa_standards_row { gap: 5px; }
}

/*==============================================================
  50. Global — Overflow Prevention & Image Safety
================================================================*/
body   { overflow-x: hidden; }
img    { max-width: 100%; }
table  { max-width: 100%; }
iframe { max-width: 100%; }

/* Ensure hero background sections never cause horizontal bleed */
.cs_hero_style_1,
.sa_cert_bar,
.sa_cta_dark_banner,
.sa_footer_cta,
.sa_footer_body,
.sa_footer_bottom { overflow-x: hidden; }

/*==============================================================
  51. Large Desktop — Content Width Polish (≥1920px)
================================================================*/
@media (min-width: 1920px) {
  .container { max-width: 1480px; }
}

/*==============================================================
  52. Mobile — Bootstrap Row Gap Adjustments
================================================================*/
/* g-5 (48px) is excessive on small phones; reduce at ≤575px */
@media (max-width: 575px) {
  .g-5, .gy-5 { --bs-gutter-y: 2rem; }
  .g-4, .gy-4 { --bs-gutter-y: 1.25rem; }
}
@media (max-width: 374px) {
  .g-5, .gy-5 { --bs-gutter-y: 1.5rem; }
  .g-4, .gy-4 { --bs-gutter-y: 1rem; }
}

/*==============================================================
  53. Tablet Landscape — Grid Balance (769–1024px)
================================================================*/
@media (min-width: 769px) and (max-width: 1024px) {
  /* Ensure 3-col industry cards have even visual weight */
  .sa_industry_card .sa_industry_card_sub { font-size: 12px; }
  /* Footer grid: graceful 3-col layout */
  .sa_footer_grid { gap: 32px 36px; }
}

/*==============================================================
  54. Sticky Product CTA — Safe Area Padding (iOS bottom bar)
================================================================*/
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sa_sticky_product_cta {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/*==============================================================
  55. Mobile Footer — Accordion + Compact Layout
  Industry standard: DuPont / 3M / Ansell / Lakeland pattern
  Nav columns collapse to accordion; contact col always visible.
================================================================*/

/* ── ≤767px: accordion activates, layout compacts ─────────── */
@media (max-width: 767px) {

  /* Pre-footer CTA: slim single-line bar (remove paragraph) */
  .sa_footer_cta { padding: 16px 0 !important; }
  .sa_footer_cta_inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .sa_footer_cta_text p { display: none; }
  .sa_footer_cta_text h3 { font-size: 15px !important; margin-bottom: 0; white-space: nowrap; }
  .sa_footer_cta_actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    flex-shrink: 0;
  }
  .sa_footer_cta_link { display: none; }
  .sa_footer_cta_btn { font-size: 12px; padding: 9px 16px; white-space: nowrap; }

  /* Footer body: tighter padding, 2-col grid */
  .sa_footer_body { padding: 32px 0 20px !important; }
  .sa_footer_grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  /* Brand column: compact full-width header with bottom rule */
  .sa_footer_brand_col {
    grid-column: 1 / -1;
    padding-bottom: 18px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .sa_footer_logo { height: 32px !important; margin-bottom: 12px; }
  .sa_footer_tagline { font-size: 13px !important; line-height: 1.6; margin-bottom: 12px; }
  /* Cert badges: stack horizontal to save height */
  .sa_footer_certs {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 12px;
  }
  .sa_footer_cert_badge { font-size: 11px; }
  .sa_footer_cert_badge i { font-size: 11px; }
  .sa_footer_social { margin-top: 0; }

  /* ---- Accordion nav columns ---- */
  /* Title becomes tappable toggle row */
  .sa_footer_col_nav .sa_footer_col_title {
    cursor: pointer;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.2s ease;
  }
  /* Link list: hidden by default; JS slideToggle reveals it */
  .sa_footer_col_nav .sa_footer_col_title + .sa_footer_links {
    display: none;
    padding-top: 10px;
    padding-bottom: 4px;
    margin-bottom: 0;
  }
  /* Expand/collapse icon bubble */
  .sa_footer_acc_icon {
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 6px;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .sa_footer_acc_icon i {
    font-size: 8px;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s ease;
    pointer-events: none;
  }
  .sa_footer_col_nav .sa_footer_col_title:hover .sa_footer_acc_icon {
    background: rgba(214,40,40,0.2);
    border-color: rgba(214,40,40,0.4);
  }
  .sa_footer_col_nav .sa_footer_col_title:hover .sa_footer_acc_icon i { color: var(--sa-red); }

  /* ---- Contact column: always visible, spans both cols ---- */
  .sa_footer_contact_col {
    grid-column: 1 / -1;
    padding-top: 16px;
    margin-top: 0;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  .sa_footer_contact_col .sa_footer_col_title {
    cursor: default;
    font-size: 11px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .sa_footer_contact_list li { margin-bottom: 10px; }
  .sa_footer_contact_list a,
  .sa_footer_contact_list li { font-size: 13px; }
  /* RFQ button: full-width on mobile */
  .sa_footer_rfq_btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    font-size: 12px;
    padding: 11px 20px;
  }

  /* ---- Bottom bar: centered single column ---- */
  .sa_footer_bottom_inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .sa_footer_copy { font-size: 11px !important; line-height: 1.5; }
  .sa_footer_bottom_links {
    justify-content: center;
    gap: 14px !important;
    flex-wrap: wrap;
  }
  .sa_footer_bottom_links a { font-size: 11px !important; }
}

/* ── ≤575px: single column stack with tighter spacing ──────── */
@media (max-width: 575px) {
  /* Pre-footer CTA: just the button, no heading */
  .sa_footer_cta { padding: 12px 0 !important; }
  .sa_footer_cta_text { display: none; }
  .sa_footer_cta_inner { justify-content: center !important; flex-wrap: nowrap; }
  .sa_footer_cta_actions { justify-content: center; width: 100%; gap: 0; }
  .sa_footer_cta_btn { max-width: 220px; justify-content: center; }

  .sa_footer_body { padding: 24px 0 16px !important; }
  /* Single column — accordion keeps height minimal */
  .sa_footer_grid { grid-template-columns: 1fr; gap: 0; }
  .sa_footer_brand_col { grid-column: auto; padding-bottom: 14px; }
  .sa_footer_contact_col { grid-column: auto; padding-top: 12px; }

  .sa_footer_col_nav .sa_footer_col_title { padding: 11px 0; font-size: 10px !important; }
  .sa_footer_col_nav .sa_footer_col_title + .sa_footer_links { padding-top: 8px; }
  .sa_footer_links li { margin-bottom: 8px; }
  .sa_footer_links a { font-size: 13px; }
  .sa_footer_contact_list li { margin-bottom: 8px; font-size: 12px; }
  .sa_footer_rfq_btn { font-size: 11px; padding: 10px 16px; }

  .sa_footer_bottom_inner { padding: 12px 0 !important; }
  .sa_footer_bottom_links { gap: 10px !important; }
}

/* ── ≤374px: micro phone — hide pre-footer CTA entirely ────── */
@media (max-width: 374px) {
  .sa_footer_cta { display: none !important; }
  .sa_footer_body { padding: 20px 0 14px !important; }
  .sa_footer_logo { height: 28px !important; }
  .sa_footer_tagline { font-size: 12px !important; margin-bottom: 10px; }
  .sa_footer_certs { gap: 3px 10px; }
  .sa_footer_cert_badge { font-size: 10px; }
  .sa_footer_acc_icon { width: 16px; height: 16px; }
  .sa_footer_col_nav .sa_footer_col_title { padding: 10px 0; font-size: 10px !important; }
  .sa_footer_contact_list li { font-size: 12px; margin-bottom: 7px; }
}

/* =============================================================
   55. Products listing page — filter bar + category sections + product cards
   56. Industries listing page — stat card
============================================================= */

/* ---- Filter Tab Bar ---- */
.sa_filter_bar {
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid var(--sa-border);
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
.sa_filter_bar.sa_filter_stuck {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  animation: saFilterSlideIn 0.18s ease;
}
@keyframes saFilterSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.sa_filter_bar_inner {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sa_filter_bar_inner::-webkit-scrollbar { display: none; }
.sa_filter_tab {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--sa-border);
  color: var(--sa-text);
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
/* Mobile: wrap tabs into 2 rows so all categories are visible */
@media (max-width: 767px) {
  .sa_filter_bar_inner {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    padding: 10px 0 12px;
  }
  .sa_filter_tab {
    flex-shrink: 1;
    font-size: 11px;
    padding: 6px 12px;
    letter-spacing: 0.02em;
  }
}
.sa_filter_tab:hover {
  border-color: var(--sa-red);
  color: var(--sa-red);
}
.sa_filter_tab.sa_tab_active {
  background: var(--sa-red);
  border-color: var(--sa-red);
  color: #fff;
}

/* ---- Category Section ---- */
.sa_cat_section { padding: 64px 0 56px; overflow: hidden; }
.sa_cat_section.sa_bg_white { background: #fff; }
.sa_cat_section.sa_bg_grey  { background: var(--gray-color1); }

.sa_cat_section_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--sa-border);
}
.sa_cat_title_group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sa_cat_icon_wrap {
  width: 44px;
  height: 44px;
  background: var(--sa-red);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}
.sa_cat_title_group h2 {
  font-family: var(--primary-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--sa-dark);
  margin: 0 0 2px;
  line-height: 1.2;
}
.sa_cat_count_badge {
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 600;
  color: var(--sa-text-light);
  letter-spacing: 0.04em;
}
.sa_cat_view_all_link {
  font-family: var(--secondary-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.sa_cat_view_all_link:hover { color: var(--sa-red-dark); gap: 10px; }

/* ---- Product Overview Grid ---- */
.sa_prod_ov_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1199px) { .sa_prod_ov_grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (max-width: 767px)  { .sa_prod_ov_grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 480px)  { .sa_prod_ov_grid { grid-template-columns: 1fr; } }

/* ---- Product Overview Card (.sa_poc) ---- */
.sa_poc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.sa_poc:hover {
  border-color: var(--sa-red);
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
  transform: translateY(-4px);
}

/* Image area */
.sa_poc_img_wrap {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, #1a2535 0%, #0d1117 100%);
  flex-shrink: 0;
  text-decoration: none;
}
.sa_poc_img_wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.sa_poc:hover .sa_poc_img_wrap img { transform: scale(1.05); }

/* Category icon shown when image fails */
.sa_poc_fallback {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  font-size: 72px;
  color: rgba(255,255,255,.06);
  pointer-events: none;
}
.sa_poc_img_wrap.sa_no_img img { display: none; }
.sa_poc_img_wrap.sa_no_img .sa_poc_fallback { display: flex; }

/* Cert badge on image */
.sa_poc_badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--sa-red); color: #fff;
  font-family: var(--secondary-font);
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  white-space: nowrap;
}

/* Category tag above title (used on industry show page) */
.sa_poc_cat_tag {
  display: inline-block;
  font-family: var(--secondary-font);
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sa-red);
  background: rgba(214,40,40,.08);
  border: 1px solid rgba(214,40,40,.18);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 8px;
}

/* Card body */
.sa_poc_body {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 16px 18px 18px;
}
.sa_poc_title {
  font-family: var(--primary-font);
  font-size: 15px; font-weight: 700;
  color: var(--sa-dark); line-height: 1.35;
  margin: 0 0 10px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sa_poc_title:hover { color: var(--sa-red); }

/* Cert pills */
.sa_poc_certs {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 8px;
}
.sa_poc_cert {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--secondary-font);
  font-size: 10px; font-weight: 600; color: #374151;
  background: #F3F4F6; border-radius: 4px;
  padding: 3px 8px;
}
.sa_poc_cert::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%; background: #10B981; flex-shrink: 0;
}

/* Material line */
.sa_poc_material {
  font-family: var(--secondary-font);
  font-size: 11px; color: #9CA3AF;
  margin-bottom: 14px;
}
.sa_poc_material i { margin-right: 4px; color: #D1D5DB; }

/* Action buttons */
.sa_poc_actions {
  display: flex; gap: 8px; margin-top: auto;
}
.sa_poc_quote {
  flex: 1; text-align: center;
  background: var(--sa-red); color: #fff;
  font-family: var(--secondary-font);
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 9px 6px; border-radius: 6px;
  text-decoration: none;
  transition: background .2s ease;
}
.sa_poc_quote:hover { background: #b91c1c; color: #fff; }
.sa_poc_detail {
  flex: 1; text-align: center;
  border: 1.5px solid #D1D5DB; color: var(--sa-dark);
  font-family: var(--secondary-font);
  font-size: 11px; font-weight: 600;
  letter-spacing: .03em;
  padding: 9px 6px; border-radius: 6px;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.sa_poc_detail:hover { border-color: var(--sa-dark); color: var(--sa-dark); }

/* ---- Category CTA Card ---- */
.sa_cat_cta_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sa-red);
  border-radius: 12px;
  padding: 32px 20px;
  text-align: center;
  min-height: 260px;
  text-decoration: none;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.sa_cat_cta_card:hover {
  background: #b91c1c;
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(214,40,40,.35);
}
.sa_cat_cta_card .sa_cta_icon {
  font-size: 36px; color: rgba(255,255,255,.45); margin-bottom: 14px;
}
.sa_cat_cta_card .sa_cta_title {
  font-family: var(--primary-font);
  font-size: 16px; font-weight: 700;
  color: #fff; margin-bottom: 6px; line-height: 1.3;
}
.sa_cat_cta_card .sa_cta_count {
  font-family: var(--secondary-font);
  font-size: 12px; color: rgba(255,255,255,.7);
  margin-bottom: 16px;
}
.sa_cat_cta_card .sa_cta_browse {
  font-family: var(--secondary-font);
  font-size: 12px; font-weight: 600;
  color: #fff;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 7px 16px; border-radius: 20px;
  transition: border-color .2s, background .2s;
}
.sa_cat_cta_card:hover .sa_cta_browse { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---- Custom Quote CTA (products page) ---- */
.sa_cta_dark_inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.sa_cta_dark_eyebrow {
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sa-orange, #f97316);
  margin-bottom: 14px;
}
.sa_cta_dark_sub {
  font-family: var(--secondary-font);
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.65;
}
.sa_btn_red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--sa-radius);
  text-decoration: none;
  transition: var(--sa-transition);
}
.sa_btn_red:hover { background: var(--sa-red-dark); color: #fff; }
.sa_btn_outline_white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--sa-radius);
  text-decoration: none;
  transition: var(--sa-transition);
}
.sa_btn_outline_white:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* ---- Industries listing — stat card ---- */
.sa_stat_card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.sa_stat_card .sa_stat_number {
  font-family: var(--primary-font);
  font-size: 42px;
  font-weight: 900;
  color: var(--sa-dark);
  line-height: 1;
  margin-bottom: 6px;
}
.sa_stat_card .sa_stat_label {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: var(--sa-text-light);
  letter-spacing: 0.03em;
}

/* ---- Industries index — redesigned card (.sa_ind_card) ---- */
.sa_ind_card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(145deg, #1a2535 0%, #0d1117 100%);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid rgba(214,40,40,.45);
  border-radius: 12px;
  padding: 28px 24px 22px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* dot-grid texture */
.sa_ind_card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
/* bottom glow shown on hover */
.sa_ind_card::after {
  content: '';
  position: absolute; bottom: -40px; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 90px;
  background: radial-gradient(ellipse, rgba(214,40,40,.22) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.sa_ind_card:hover {
  transform: translateY(-6px);
  border-color: rgba(214,40,40,.7);
  border-left-color: var(--sa-red);
  box-shadow: 0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(214,40,40,.12);
}
.sa_ind_card:hover::after { opacity: 1; }

/* Icon + title row */
.sa_ind_card_top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}
.sa_ind_card_icon_wrap {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(214,40,40,.14);
  border: 1px solid rgba(214,40,40,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--sa-red);
  transition: background .25s ease, border-color .25s ease;
}
.sa_ind_card:hover .sa_ind_card_icon_wrap {
  background: rgba(214,40,40,.26);
  border-color: rgba(214,40,40,.5);
}
.sa_ind_card_name {
  font-family: var(--primary-font);
  font-size: 18px; font-weight: 700;
  color: #fff; margin: 0; line-height: 1.25;
}

/* Description */
.sa_ind_card_desc {
  font-family: var(--secondary-font);
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,.5);
  margin: 0 0 20px; flex: 1;
  position: relative; z-index: 1;
}

/* Footer row */
.sa_ind_card_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 1;
}
.sa_ind_card_count {
  font-family: var(--secondary-font);
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
  padding: 4px 11px; border-radius: 20px;
  letter-spacing: .03em;
}
.sa_ind_card_cta {
  font-family: var(--secondary-font);
  font-size: 12px; font-weight: 600;
  color: var(--sa-red);
  display: flex; align-items: center; gap: 5px;
  transition: gap .2s ease, color .2s ease;
}
.sa_ind_card:hover .sa_ind_card_cta { gap: 9px; color: #ff5555; }

/* ---- Industries page — industry card (list variant, no image bg) ---- */
.sa_industry_card_desc {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
  margin: 0 0 12px;
  flex: 1;
}
.sa_industry_card_meta {
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.22s ease;
}
.sa_industry_card:hover .sa_industry_card_meta { gap: 10px; }

/* ---- Responsive tweaks for listing pages ---- */
@media (max-width: 991px) {
  .sa_cat_section { padding: 48px 0 40px; }
  .sa_cat_section_header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 767px) {
  .sa_cat_section { padding: 40px 0 32px; }
  .sa_stat_card .sa_stat_number { font-size: 34px; }
  .sa_poc_title { font-size: 13px; }
}
@media (max-width: 480px) {
  .sa_poc_title { font-size: 13px; }
  .sa_poc_body { padding: 12px 14px 14px; }
}

/*==============================================================
  57. Contact / RFQ Page — contact.blade.php + rfq.blade.php
================================================================*/

/* Hero stat items (contact hero bar) */
.sa_hero_stats.sa_hero_stats_bar {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--sa-radius);
  overflow: hidden;
  max-width: 600px;
  margin-top: 32px;
}
.sa_hero_stat_item {
  flex: 1;
  min-width: 140px;
  padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.sa_hero_stat_item:last-child { border-right: none; }
.sa_hero_stat_label {
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 4px;
}
.sa_hero_stat_value {
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* Form section divider */
.sa_form_section_header {
  font-family: var(--primary-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sa-dark);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sa-border);
}
.sa_form_section_header.mt { margin-top: 28px; }

/* Field error styling */
.sa_rfq_form input.sa_field_error,
.sa_rfq_form select.sa_field_error,
.sa_rfq_form textarea.sa_field_error {
  border-color: var(--sa-red);
  background: #fff5f5;
}
.sa_field_error_msg {
  font-family: var(--secondary-font);
  font-size: 12px;
  color: var(--sa-red);
  margin-top: 3px;
  display: block;
}

/* Form feedback banners */
.sa_form_success_banner {
  background: #D1FAE5;
  border: 1px solid #6EE7B7;
  border-radius: var(--sa-radius);
  padding: 14px 18px;
  font-family: var(--secondary-font);
  font-size: 14px;
  color: #065F46;
  margin-bottom: 24px;
  line-height: 1.6;
}
.sa_form_error_banner {
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: var(--sa-radius);
  padding: 14px 18px;
  font-family: var(--secondary-font);
  font-size: 14px;
  color: #991B1B;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Sidebar: Direct Contact Card */
.sa_contact_sidebar_card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  padding: 28px;
  margin-bottom: 20px;
}
.sa_contact_sidebar_card h3 {
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 800;
  color: var(--sa-dark);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--sa-border);
}
.sa_contact_method {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sa-border);
}
.sa_contact_method:last-of-type { border-bottom: none; padding-bottom: 0; }
.sa_contact_method_icon {
  width: 36px;
  height: 36px;
  background: rgba(220,38,38,0.08);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sa-red);
  font-size: 14px;
}
.sa_contact_method_label {
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-text-light);
  margin-bottom: 3px;
}
.sa_contact_method_value {
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--sa-dark);
  line-height: 1.4;
}
.sa_contact_method_value a { color: var(--sa-dark); text-decoration: none; transition: color 0.2s; }
.sa_contact_method_value a:hover { color: var(--sa-red); }
.sa_contact_method_note {
  font-family: var(--secondary-font);
  font-size: 12px;
  color: var(--sa-text-light);
  margin-top: 2px;
}

/* Social icons row (sidebar) */
.sa_social_row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sa-border);
}
.sa_social_icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(220,38,38,0.08);
  border: 1px solid var(--sa-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--sa-red);
  transition: all 0.25s ease;
  text-decoration: none;
}
.sa_social_icon:hover {
  background: var(--sa-red);
  color: #fff;
  border-color: var(--sa-red);
}

/* Sidebar: Location block */
.sa_sidebar_location {
  background: var(--gray-color1);
  border-radius: var(--sa-radius-md);
  padding: 24px;
  margin-bottom: 20px;
}
.sa_sidebar_location h3 {
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 800;
  color: var(--sa-dark);
  margin: 0 0 14px;
}
.sa_map_placeholder {
  width: 100%;
  height: 180px;
  background: #d1d5db;
  border-radius: var(--sa-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  font-family: var(--secondary-font);
  font-size: 13px;
  color: #6b7280;
  margin-top: 14px;
  text-align: center;
}

/* Sidebar: Response commitment */
.sa_sidebar_commitment {
  background: #1F2937;
  border-radius: var(--sa-radius-md);
  padding: 24px;
  margin-bottom: 20px;
}
.sa_sidebar_commitment h3 {
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 18px;
}
.sa_commitment_item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.sa_commitment_item:last-child { margin-bottom: 0; }
.sa_commitment_icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.4;
}
.sa_commitment_text {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}
.sa_commitment_text strong {
  color: #fff;
  font-weight: 600;
  display: block;
  font-family: var(--primary-font);
  font-size: 13px;
  margin-bottom: 1px;
}

/* Trust mini badges */
.sa_trust_badges_row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sa_trust_mini_badge {
  flex: 1;
  min-width: 80px;
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--sa-dark);
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.sa_trust_mini_badge i {
  display: block;
  font-size: 17px;
  color: var(--sa-red);
  margin-bottom: 5px;
}

/* Download company profile link */
.sa_download_profile_link {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--sa-red);
  border-radius: var(--sa-radius);
  padding: 13px 18px;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--sa-red);
  transition: all 0.25s ease;
  text-decoration: none;
}
.sa_download_profile_link:hover { background: var(--sa-red); color: #fff; }

/* Alternative Contact Cards */
.sa_alt_contact_card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius-md);
  padding: 32px 28px;
  text-align: center;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.sa_alt_contact_card:hover { box-shadow: var(--sa-shadow); transform: translateY(-3px); }
.sa_alt_contact_icon {
  width: 56px;
  height: 56px;
  background: rgba(220,38,38,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--sa-red);
  margin: 0 auto 18px;
}
.sa_alt_contact_title {
  font-family: var(--primary-font);
  font-size: 18px;
  font-weight: 800;
  color: var(--sa-dark);
  margin: 0 0 8px;
}
.sa_alt_contact_value {
  font-family: var(--secondary-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-red);
  margin: 0 0 10px;
}
.sa_alt_contact_desc {
  font-family: var(--secondary-font);
  font-size: 13px;
  color: var(--sa-text);
  line-height: 1.6;
  margin: 0 0 18px;
}

/* FAQ Accordion */
.sa_faq_item {
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.sa_faq_q {
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-dark);
  transition: background 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.sa_faq_q:hover { background: var(--gray-color1); }
.sa_faq_q i.fa-chevron-down {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 12px;
  font-size: 12px;
  color: var(--sa-text-light);
}
.sa_faq_a {
  padding: 0 20px 16px;
  display: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sa-text);
  background: #fff;
  font-family: var(--secondary-font);
}
.sa_faq_item.open .sa_faq_a { display: block; }
.sa_faq_item.open .sa_faq_q i.fa-chevron-down { transform: rotate(180deg); }

/* Contact page dark CTA banner */
.sa_contact_cta_banner {
  background: var(--sa-dark-deep);
  padding: 70px 0;
}
.sa_contact_cta_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.sa_contact_cta_eyebrow {
  font-family: var(--primary-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sa-red);
  margin-bottom: 10px;
}
.sa_contact_cta_title {
  font-family: var(--primary-font);
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.sa_contact_cta_sub {
  font-family: var(--secondary-font);
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  max-width: 460px;
  margin: 0;
}
.sa_contact_cta_actions { flex-shrink: 0; }

/* Responsive */
@media (max-width: 991px) {
  .sa_contact_cta_inner { flex-direction: column; text-align: center; }
  .sa_contact_cta_sub { margin: 0 auto; }
  .sa_contact_cta_actions { width: 100%; display: flex; justify-content: center; }
}
@media (max-width: 767px) {
  .sa_hero_stats.sa_hero_stats_bar { max-width: 100%; }
  .sa_contact_cta_title { font-size: 26px; }
  .sa_hero_stat_item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .sa_hero_stat_item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
  .sa_hero_stat_item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 575px) {
  .sa_alt_contact_card { padding: 24px 18px; }
}

/*==============================================================
  58. Resources Page — "Can't Find What You Need?" CTA
================================================================*/
.sa_res_cta {
  background: #0d1117;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
/* Dual gradient: subtle red glow right, blue accent left */
.sa_res_cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 40%, rgba(214,40,40,0.13) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 70%, rgba(59,130,246,0.07) 0%, transparent 50%);
  pointer-events: none;
}
/* Subtle dot-grid texture */
.sa_res_cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.sa_res_cta_inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 64px;
}

/* ── Left Visual Panel ─────────────────────────────────── */
.sa_res_cta_visual {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.sa_res_cta_icon_ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(214,40,40,0.25) 0%, rgba(214,40,40,0.08) 100%);
  border: 2px solid rgba(214,40,40,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  color: var(--sa-red);
  box-shadow: 0 0 40px rgba(214,40,40,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.sa_res_cta_doc_list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sa_res_cta_doc_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--secondary-font);
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  transition: background 0.2s, border-color 0.2s;
}
.sa_res_cta_doc_list li:hover {
  background: rgba(214,40,40,0.08);
  border-color: rgba(214,40,40,0.25);
  color: #fff;
}
.sa_res_cta_doc_icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(214,40,40,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #F87171;
  flex-shrink: 0;
}

/* ── Right Content ─────────────────────────────────────── */
.sa_res_cta_content {
  flex: 1;
  min-width: 0;
}

.sa_res_cta_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(214,40,40,0.12);
  border: 1px solid rgba(214,40,40,0.28);
  color: #F87171;
  font-family: var(--secondary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.sa_res_cta_eyebrow i { font-size: 10px; }

.sa_res_cta_title {
  font-family: var(--primary-font);
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.sa_res_cta_desc {
  font-family: var(--secondary-font);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
  margin: 0 0 32px;
  max-width: 520px;
}

.sa_res_cta_actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sa_res_cta_btn_primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sa-red);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(214,40,40,0.35);
}
.sa_res_cta_btn_primary:hover {
  background: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(214,40,40,0.45);
  color: #fff;
  text-decoration: none;
}

.sa_res_cta_btn_secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.25);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
.sa_res_cta_btn_secondary:hover {
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

.sa_res_cta_note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--secondary-font);
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.sa_res_cta_note i { color: rgba(255,255,255,0.3); font-size: 11px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1199px) {
  .sa_res_cta_inner { gap: 48px; }
  .sa_res_cta_visual { flex: 0 0 260px; }
  .sa_res_cta_title { font-size: 32px; }
}
@media (max-width: 991px) {
  .sa_res_cta_inner { flex-direction: column; gap: 48px; align-items: flex-start; }
  .sa_res_cta_visual { flex: none; width: 100%; flex-direction: row; align-items: flex-start; }
  .sa_res_cta_icon_ring { flex-shrink: 0; }
  .sa_res_cta_doc_list { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .sa_res_cta { padding: 60px 0; }
  .sa_res_cta_visual { flex-direction: column; align-items: flex-start; }
  .sa_res_cta_doc_list { grid-template-columns: 1fr; width: 100%; }
  .sa_res_cta_title { font-size: 28px; }
}
@media (max-width: 575px) {
  .sa_res_cta { padding: 48px 0; }
  .sa_res_cta_actions { flex-direction: column; align-items: stretch; }
  .sa_res_cta_btn_primary,
  .sa_res_cta_btn_secondary { justify-content: center; }
  .sa_res_cta_title { font-size: 24px; }
}

/* =============================================================
   Section 59 — Hero Redesign (CSS-only, no background image)
   ============================================================= */

/* Background layers */
.sa_hero_bg_base {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, #080d14 0%, #0f1923 40%, #1a2535 100%);
}
.sa_hero_dot_grid {
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.sa_hero_glow_left {
  position: absolute; top: -80px; left: -80px; z-index: 1;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(214,40,40,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.sa_hero_glow_right {
  position: absolute; bottom: -100px; right: 5%; z-index: 1;
  width: 640px; height: 640px;
  background: radial-gradient(ellipse, rgba(30,58,138,0.18) 0%, transparent 65%);
  pointer-events: none;
}

/* Content column */
.sa_hero_content_col {
  max-width: 600px;
  padding: 130px 0 110px;
  position: relative; z-index: 2;
}
.sa_hero_h1 {
  font-family: var(--primary-font);
  font-size: 60px; font-weight: 800;
  line-height: 1.08; color: #fff;
  margin: 0 0 24px; letter-spacing: -0.025em;
}
.sa_hero_sub {
  font-family: var(--secondary-font);
  font-size: 18px; line-height: 1.7;
  color: rgba(255,255,255,0.75);
  margin: 0 0 12px; max-width: 520px;
}
.sa_hero_materials {
  font-family: var(--secondary-font);
  font-size: 13px; color: rgba(255,255,255,0.42);
  margin: 0 0 36px; letter-spacing: 0.01em;
}

/* Stats row */
.sa_hero_stats {
  display: flex; align-items: center;
  gap: 0; flex-wrap: wrap;
  margin-top: 52px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sa_hero_stat { padding: 0 28px 0 0; }
.sa_hero_stat:first-child { padding-left: 0; }
.sa_hero_stat_num {
  font-family: var(--primary-font);
  font-size: 30px; font-weight: 800;
  color: #fff; line-height: 1;
}
.sa_hero_stat_lbl {
  font-family: var(--secondary-font);
  font-size: 12px; color: rgba(255,255,255,0.45);
  margin-top: 4px; white-space: nowrap;
}
.sa_hero_stat_div {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.1);
  margin: 0 28px 0 0; flex-shrink: 0;
}

/* Background image mode (when image uploaded via admin) */
.sa_hero_bg_image {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.sa_hero_overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(8,13,20,0.92) 0%, rgba(8,13,20,0.65) 55%, rgba(8,13,20,0.3) 100%);
}

/* Responsive */
@media (max-width: 991px) {
  .sa_hero_content_col { max-width: 100%; padding: 110px 0 80px; }
  .sa_hero_h1 { font-size: 44px; }
  .sa_hero_glow_right { display: none; }
}
@media (max-width: 767px) {
  .sa_hero_h1 { font-size: 36px; }
  .sa_hero_sub { font-size: 16px; }
  .sa_hero_content_col { padding: 90px 0 64px; }
  .sa_hero_stat_num { font-size: 24px; }
  .sa_hero_stat, .sa_hero_stat_div { margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .sa_hero_h1 { font-size: 30px; }
  .sa_hero_stats { gap: 8px 0; }
  .sa_hero_stat { padding-right: 16px; }
  .sa_hero_stat_div { margin-right: 16px; }
}