/* =============================================================
   SA INTERNATIONAL — sa-fixes.css
   Targeted overrides. Loaded last. Highest cascade priority.
   All fixes scoped precisely to avoid collateral damage.
============================================================= */

/* --- 1. VARIABLE BRIDGES
   styles.css uses --text, --bg-dark, --header-h
   sa-core.css uses --ink, --bg, --hh
   Bridge them so inline styles and both systems agree */
:root {
  --text:      #0b1929;
  --bg-dark:   #0b1929;
  --bg-dark-2: #0f2035;
  --surface:   #ffffff;
  --surface-2: #f0ede6;
  --line-2:    rgba(11,25,41,0.16);
  --line-strong: rgba(11,25,41,0.28);
  --accent-2:  #2268a0;
  --accent-ink:#ffffff;
  --accent-soft: rgba(26,77,110,0.08);
  --accent-line: rgba(26,77,110,0.35);
  --gold-light:#d4a057;
  --maxw:      1320px;
  --pad:       40px;
  --header-h:  76px;
}

/* --- 2. MOBILE NAV ARROW — hide ::after arrow on mob-nav-overlay links */
.mob-nav-overlay > a::after { display:none !important; content:none !important; }
.mob-nav-overlay > a:not(.mob-nav-cta)::after { display:none !important; content:none !important; }

/* --- 3. EST. 1999 BADGE — all text inside must be light on dark bg */
.elementor-element-est99badge1 {
  color: rgba(247,248,250,0.72) !important;
}
.elementor-element-est99badge1 .elementor-widget-container,
.elementor-element-est99badge1 .elementor-widget-text-editor,
.elementor-element-est99badge1 p,
.elementor-element-est99badge1 div {
  color: rgba(247,248,250,0.72) !important;
}
/* The 1999 year heading stays white — already set in Elementor */
.elementor-element-est_year1 .elementor-heading-title {
  color: #ffffff !important;
}
/* Eyebrow // mark */
.elementor-element-est_eyebrow1 p {
  color: rgba(247,248,250,0.45) !important;
  font-family: "IBM Plex Mono", "Roboto Slab", monospace !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
/* Label + name */
.elementor-element-est_label1 p,
.elementor-element-est_name1 p {
  color: rgba(247,248,250,0.65) !important;
}
.elementor-element-est_name1 p strong,
.elementor-element-est_name1 p b {
  color: rgba(247,248,250,0.9) !important;
}

/* --- 4. HERO SECTION — correct padding uses --header-h (76px) */
.hero {
  padding-top: calc(var(--header-h,76px) + clamp(40px,6vw,78px)) !important;
  min-height: auto !important;
}
.page-hero {
  padding-top: calc(var(--header-h,76px) + 84px) !important;
}
/* Products page hero specifically — dark bg, white text forced */
body .elementor-element-fd2fb23.elementor-section,
body .page-hero.elementor-element-fd2fb23 {
  background-color: #0d1b2a !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body .elementor-element-fd2fb23 .elementor-heading-title {
  color: #ffffff !important;
}
body .elementor-element-fd2fb23 .elementor-widget-text-editor p,
body .elementor-element-fd2fb23 .elementor-widget-text-editor {
  color: rgba(255,255,255,0.7) !important;
}

/* --- 5. SERVICES SECTION — golden styling for svc-dark sections */
.section.svc-dark,
.elementor-element-5d3939d,
[class*="elementor-element-5d3939d"] {
  background: var(--ink, #0d1b2a) !important;
  background-color: var(--ink, #0d1b2a) !important;
}
.section.svc-dark .eyebrow,
.elementor-element-5d3939d .eyebrow {
  color: var(--gold, #c9a84c) !important;
}
.section.svc-dark .eyebrow .tick,
.elementor-element-5d3939d .eyebrow .tick {
  background: var(--gold, #c9a84c) !important;
}
.section.svc-dark h2, .section.svc-dark .h2,
.elementor-element-5d3939d .elementor-heading-title,
.elementor-element-5d3939d h2 {
  color: #ffffff !important;
}
.section.svc-dark p, .section.svc-dark .lede,
.elementor-element-5d3939d p,
.elementor-element-5d3939d .elementor-widget-text-editor {
  color: rgba(255,255,255,0.62) !important;
}
.section.svc-dark .svc-list, .elementor-element-5d3939d .svc-list {
  border-top-color: rgba(255,255,255,0.12) !important;
}
.section.svc-dark .svc-row, .elementor-element-5d3939d .svc-row {
  border-bottom-color: rgba(255,255,255,0.09) !important;
}
.section.svc-dark .svc-row h3, .elementor-element-5d3939d .svc-row h3 {
  color: #ffffff !important;
}
.section.svc-dark .svc-row p, .elementor-element-5d3939d .svc-row p {
  color: rgba(255,255,255,0.55) !important;
}
.section.svc-dark .svc-row .idx, .elementor-element-5d3939d .svc-row .idx {
  color: var(--gold, #c9a84c) !important;
}
.section.svc-dark .svc-row .go, .elementor-element-5d3939d .svc-row .go {
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.7) !important;
}
.section.svc-dark .svc-row:hover .go, .elementor-element-5d3939d .svc-row:hover .go {
  background: var(--gold, #c9a84c) !important;
  border-color: var(--gold, #c9a84c) !important;
  color: var(--ink, #0d1b2a) !important;
}
.section.svc-dark .svc-row:hover h3, .elementor-element-5d3939d .svc-row:hover h3 {
  color: var(--gold, #c9a84c) !important;
}
.section.svc-dark .btn--ghost, .elementor-element-5d3939d .btn--ghost {
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.section.svc-dark .btn--ghost:hover, .elementor-element-5d3939d .btn--ghost:hover {
  background: var(--gold, #c9a84c) !important;
  border-color: var(--gold, #c9a84c) !important;
  color: var(--ink, #0d1b2a) !important;
}

/* --- 6. CTA SECTION — phone button + ghost button visibility */
.elementor-element-5e73d1cc,
.elementor-element-5e73d1cc.elementor-section {
  background-color: #0d1b2a !important;
}
.elementor-element-5e73d1cc .elementor-heading-title,
.elementor-element-5e73d1cc h2, .elementor-element-5e73d1cc h3 {
  color: #ffffff !important;
}
.elementor-element-5e73d1cc p,
.elementor-element-5e73d1cc .elementor-widget-text-editor {
  color: rgba(255,255,255,0.68) !important;
}
.elementor-element-5e73d1cc .btn--ghost,
.elementor-element-5e73d1cc a[href^="tel"],
.elementor-element-5e73d1cc a.btn,
.elementor-element-5e73d1cc .btn {
  border-color: rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  background: transparent !important;
}
.elementor-element-5e73d1cc .btn--ghost:hover,
.elementor-element-5e73d1cc a[href^="tel"]:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.6) !important;
  color: #ffffff !important;
}
/* Force all link/button text in dark CTA to white */
body .cta-wrap a,
body .cta-wrap .btn,
body .elementor-element-5e73d1cc a {
  color: #ffffff !important;
}
body .cta-wrap .btn--primary,
body .elementor-element-5e73d1cc .btn--primary {
  background: var(--gold, #c9a84c) !important;
  border-color: var(--gold, #c9a84c) !important;
  color: var(--ink, #0d1b2a) !important;
}

/* --- 7. STATS SECTION — gold top border */
.elementor-element-aa58e128 {
  border-top: 2px solid var(--gold, #c9a84c) !important;
}
.elementor-element-aa58e128 .stat .num {
  color: var(--accent, #1a4d6e) !important;
}

/* --- 8. PRODUCTS PAGE — ensure hero section is visible */
.page-2061 .hero,
body.page-id-2061 .hero {
  display: block !important;
  visibility: visible !important;
  min-height: 420px !important;
}
body.page-id-2061 .elementor-section:first-of-type {
  background-color: #0d1b2a !important;
}
body.page-id-2061 .elementor-section:first-of-type .elementor-heading-title {
  color: #ffffff !important;
}
body.page-id-2061 .elementor-section:first-of-type p {
  color: rgba(255,255,255,0.7) !important;
}

/* --- 9. ALL PAGE HEROES — text color fix */
body .page-hero .elementor-heading-title,
body .page-hero h1, body .page-hero h2, body .page-hero h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 20px rgba(0,0,0,0.25);
}
body .page-hero .elementor-widget-text-editor p,
body .page-hero .elementor-widget-text-editor {
  color: rgba(255,255,255,0.68) !important;
}
body .page-hero a { color: rgba(255,255,255,0.45) !important; }

/* --- 10. MOBILE RESPONSIVE */
@media (max-width: 980px) {
  /* styles.css hides .nav at 980px and shows .nav-toggle */
  /* Our mob-nav-toggle is the hamburger — ensure it's visible */
  .nav-mob-toggle { display: flex !important; }
  .nav-mob-toggle span { background: var(--text, #0b1929); }
  /* Hide header CTA on mobile */
  a.header-cta { display: none !important; }
}
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .ind-grid { grid-template-columns: repeat(2,1fr) !important; }
  .products { grid-template-columns: 1fr !important; }
  .split { grid-template-columns: 1fr !important; gap: 32px; }
  .wrap { padding-inline: 20px !important; }
  .cta { padding: 40px 24px !important; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .ind-grid { grid-template-columns: repeat(2,1fr) !important; }
  .wrap { padding-inline: 16px !important; }
  .section { padding-block: 48px !important; }
  .cta { padding: 32px 16px !important; }
  .hero h1, .display { font-size: clamp(1.75rem,7vw,2.3rem) !important; }
  .h2 { font-size: clamp(1.3rem,5vw,1.75rem) !important; }
}

/* --- 11. SPECS mobile */
@media (max-width: 560px) {
  .specs li { grid-template-columns: 80px 1fr !important; }
}

/* --- 12. FOOTER grid */
@media (max-width: 860px) {
  .sa-foot-grid { grid-template-columns: 1fr 1fr !important; }
  .sa-foot-brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) {
  .sa-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}
/* --- 13. PRODUCTS PAGE HERO — element-specific fix */
.elementor-element-388fe4ad {
  display: block !important;
  visibility: visible !important;
  background-color: #0d1b2a !important;
}
.elementor-element-388fe4ad .elementor-widget-text-editor p,
.elementor-element-388fe4ad .elementor-widget-text-editor,
.elementor-element-388fe4ad a {
  color: rgba(255,255,255,0.6) !important;
}
.elementor-element-388fe4ad .elementor-heading-title {
  color: #ffffff !important;
}
/* Ensure body has padding for fixed header on all pages */
body {
  padding-top: var(--hh, 72px) !important;
}
/* Compensate for hero sections that have static top padding */
body.page-id-2061 .elementor-section:first-of-type {
  margin-top: 0 !important;
  padding-top: 80px !important;
}

/* --- 14. NAV UNDERLINE — styles.css uses .nav a::after for underline, keep it working */
.nav a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: -2px; left: 0; width: 100%; height: 1px;
  background: var(--accent, #1a4d6e);
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(0.22,1,0.36,1);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1) !important; }

/* --- 15. HERO base (all pages) — ensure min-height for hero-less pages */
.hero {
  min-height: calc(100vh - var(--hh, 72px)) !important;
}

/* --- 16. KNOW MORE link styling */
a.know-more-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid currentColor !important;
  padding-bottom: 2px !important;
  text-decoration: none !important;
  transition: gap .2s !important;
}
a.know-more-link:hover { gap: 16px !important; }
/* ============================================================
   PHASE 2 FIX BATCH
   - Eyebrow gold on dark pages
   - Header flexbox centering
   - Card image heights
   - Gold divider
   - Know-how card polish
   - Products page hero eyebrow
   - Mobile nav arrow hidden
============================================================ */

/* 17. EYEBROW GOLD on all DARK sections */
.page-hero .eyebrow,
body .page-hero .eyebrow {
  color: var(--gold, #c9a84c) !important;
  font-weight: 600 !important;
}
.page-hero .eyebrow .tick,
body .page-hero .eyebrow .tick {
  background: var(--gold, #c9a84c) !important;
  height: 2px !important;
  width: 24px !important;
}
.hero .eyebrow,
body .hero .eyebrow {
  color: var(--gold, #c9a84c) !important;
}
.hero .eyebrow .tick,
body .hero .eyebrow .tick {
  background: var(--gold, #c9a84c) !important;
}
/* CTA eyebrow also gold */
.cta .eyebrow { color: var(--gold, #c9a84c) !important; }
.cta .eyebrow .tick { background: var(--gold, #c9a84c) !important; }

/* 18. HEADER - flexbox centering so nav is truly centred */
header.site-header .wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 40px !important;
  gap: 0 !important;
}
.brand {
  flex-shrink: 0 !important;
  order: 1 !important;
}
nav.nav {
  flex: 1 !important;
  justify-content: center !important;
  display: flex !important;
  align-items: stretch !important;
  order: 2 !important;
  overflow: visible !important;
}
a.header-cta {
  flex-shrink: 0 !important;
  order: 3 !important;
  margin-left: 20px !important;
}
.nav-mob-toggle {
  flex-shrink: 0 !important;
  order: 4 !important;
  margin-left: 10px !important;
}
/* Reduce nav item padding at medium viewport to prevent overflow */
@media (max-width: 1200px) {
  nav.nav > a, .nav-item > a { padding: 0 10px !important; }
}
@media (max-width: 1060px) {
  nav.nav > a, .nav-item > a { padding: 0 7px !important; font-size: 10.5px !important; }
}
@media (max-width: 980px) {
  nav.nav { display: none !important; }
  a.header-cta { display: none !important; }
  .nav-mob-toggle { display: flex !important; }
}

/* 19. CASE STUDIES GRID CARD IMAGES - force consistent height */
/* Use maximum specificity to beat .product img { height:100% } from sa-core.css */
body .case-studies-grid .elementor-widget.elementor-widget-image {
  display: block !important;
  overflow: hidden !important;
  height: 220px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body .case-studies-grid .elementor-widget.elementor-widget-image .elementor-widget-container,
body .case-studies-grid .elementor-widget.elementor-widget-image a {
  display: block !important;
  height: 100% !important;
  overflow: hidden !important;
}
body .case-studies-grid .elementor-widget.elementor-widget-image img,
body .case-studies-grid .product img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
/* Product card brand tag (eyebrow) */
body .case-studies-grid .product .elementor-widget-text-editor:first-child p {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--accent, #1e4d6b) !important;
  font-weight: 700 !important;
  padding: 16px 20px 0 !important;
  margin: 0 !important;
}
/* Category tag */
body .case-studies-grid .product .elementor-widget-text-editor:nth-child(3) p {
  font-size: 10px !important;
  color: var(--muted, #6b7a8d) !important;
  padding: 0 20px !important;
  margin: 8px 0 4px !important;
  letter-spacing: .08em !important;
}
/* Card title */
body .case-studies-grid .product .elementor-widget-heading .elementor-heading-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink, #0d1b2a) !important;
  line-height: 1.25 !important;
  padding: 0 20px 8px !important;
  margin: 0 !important;
  transition: color .3s !important;
}
body .case-studies-grid .product:hover .elementor-widget-heading .elementor-heading-title {
  color: var(--accent, #1e4d6b) !important;
}
/* Card description */
body .case-studies-grid .product .elementor-widget-text-editor:last-child p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--ink-2, #2c3e50) !important;
  padding: 0 20px 20px !important;
  margin: 0 !important;
}
/* Card layout */
body .case-studies-grid .product {
  background: #fff !important;
  border: 1px solid var(--line, #e2e0db) !important;
  border-right: none !important;
  transition: box-shadow .22s, transform .22s !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body .case-studies-grid .product:hover {
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(13,27,42,.16)) !important;
  transform: translateY(-3px) !important;
  z-index: 2 !important;
}
body .case-studies-grid .product:last-child { border-right: 1px solid var(--line) !important; }
/* Elementor column wrapper inside product card */
body .case-studies-grid .product .elementor-widget-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* 20. SA GOLD DIVIDER */
.sa-gold-divider,
[class*="gold-divider"],
.elementor-element-est_div1 .elementor-divider {
  border: none !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, var(--gold, #c9a84c), transparent) !important;
  margin: 12px 0 16px !important;
  opacity: 0.8 !important;
}
.elementor-element-est_div1 .elementor-divider-separator {
  border-color: var(--gold, #c9a84c) !important;
  border-width: 2px !important;
}

/* 21. EST 1999 BADGE - blue/dark bg with gold line */
.elementor-element-est99badge1 {
  background: linear-gradient(135deg, #060f1a 0%, #0a1929 60%, #091524 100%) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  border-top: 2px solid var(--gold, #c9a84c) !important;
  border-radius: var(--r, 6px) !important;
}

/* 22. PRODUCTS PAGE HERO - golden eyebrow with breadcrumb style */
.elementor-element-388fe4ad .elementor-widget-text-editor p,
body.page-id-2061 .page-hero .elementor-widget-text-editor p {
  color: rgba(255,255,255,0.45) !important;
  font-size: 11px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}
.elementor-element-388fe4ad .elementor-widget-text-editor a {
  color: var(--gold, #c9a84c) !important;
}
/* CURRENT page breadcrumb in gold */
body .page-hero .crumbs .breadcrumb-current,
body .page-hero a[aria-current],
body .page-hero .current-page { color: var(--gold, #c9a84c) !important; }

/* 23. KNOW HOW section headings styling */
body.page-id-2065 .elementor-element-bb216213 .elementor-heading-title {
  font-size: clamp(32px, 4vw, 58px) !important;
  color: #fff !important;
}

/* 24. MOBILE NAV ARROW completely hidden */
.mob-nav-overlay > a::after,
.mob-nav-overlay > a:not(.mob-nav-cta)::after {
  content: none !important;
  display: none !important;
}

/* 25. PRODUCTS PAGE hero breadcrumb GOLDEN colour */
body.page-id-2061 .hero .elementor-widget-text-editor a,
body.page-id-2061 .elementor-element-388fe4ad a {
  color: var(--gold, #c9a84c) !important;
  text-decoration: none !important;
}