/* ═══════════════════════════════════════════════════════════════════════
   ORBIX CONTAINERS & STRUCTURES — Clean Professional Theme
   Light, crisp, enterprise-grade design. Dark hero is fine (JS bundle).
   All content sections: white / light-gray. Orange accents throughout.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
  --orbix-orange:      #F97316;
  --orbix-orange-dark: #D95F00;
  --orbix-navy:        #0B1527;
  --orbix-dark:        #1A202C;
  --orbix-mid:         #4A5568;
  --orbix-light:       #718096;
  --orbix-bg:          #F7F8FA;
  --orbix-white:       #FFFFFF;
  --orbix-border:      #E2E8F0;
  --font-display:      "Barlow Condensed", "Inter", sans-serif;
  --font-body:         "Space Grotesk", "Inter", sans-serif;
  --radius:            10px;
  --transition:        all .22s ease;
}

/* ─── 2. BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  background: var(--orbix-bg) !important;
  color: var(--orbix-dark) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── 3. ANNOUNCEMENT BAR ─────────────────────────────────────────────── */
/* First top bar */
body > div > div:first-child > div:first-child,
div[class*="bg-orange-500"]:first-child,
div[class*="text-white"][class*="bg-orange"][class*="py-2"]:first-child {
  background: var(--orbix-orange) !important;
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  padding: 9px 0 !important;
}

/* ─── 4. NAVIGATION ───────────────────────────────────────────────────── */

/* ① Outer fixed wrapper — "fixed top-0 left-0 right-0 z-50"
      This is the true full-viewport-width container.
      Give it the solid dark navy so NO orange bleeds through on either side. */
div[class*="fixed"][class*="top-0"][class*="left-0"][class*="right-0"] {
  background: var(--orbix-navy) !important;
  border-bottom: 2px solid rgba(249,115,22,.30) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.55) !important;
}

/* ② Inner header / nav band — bundle applies bg-[#0A1628] here; keep it
      consistent and transparent so the outer navy shows through cleanly. */
div[class*="fixed"][class*="top-0"][class*="left-0"][class*="right-0"] header,
div[class*="fixed"][class*="top-0"][class*="left-0"][class*="right-0"] nav,
div[class*="fixed"][class*="top-0"][class*="left-0"][class*="right-0"] > *,
div[class*="fixed"][class*="top-0"][class*="left-0"][class*="right-0"] > * > * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Logo */
nav img[alt="Orbix Containers"],
header img[alt="Orbix Containers"] {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Nav links */
nav a:not([class*="btn"]):not([href*="quote"]),
header a:not([class*="btn"]):not([href*="quote"]) {
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
  color: rgba(255,255,255,.85) !important;
  transition: color .18s !important;
  text-transform: uppercase;
}
nav a:hover,
header a:hover {
  color: var(--orbix-orange) !important;
}

/* GET QUOTE button */
a[href*="quote"],
nav button[class*="bg-orange"] {
  background: var(--orbix-orange) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius) !important;
  padding: 10px 20px !important;
  border: none !important;
  transition: var(--transition) !important;
}
a[href*="quote"]:hover,
nav button[class*="bg-orange"]:hover {
  background: var(--orbix-orange-dark) !important;
  transform: translateY(-1px) !important;
}

/* Nav dropdown / mega-menu panel */
[data-radix-popper-content-wrapper],
[class*="NavigationMenuContent"],
[class*="dropdown"] > div,
nav [class*="absolute"][class*="bg"] {
  background: #fff !important;
  border: 1px solid var(--orbix-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.14) !important;
  z-index: 9999 !important;
}

/* Dropdown text */
[data-radix-popper-content-wrapper] *,
nav [class*="absolute"][class*="bg"] * {
  color: var(--orbix-dark) !important;
}
[data-radix-popper-content-wrapper] img,
nav [class*="absolute"][class*="bg"] img {
  border-radius: 6px !important;
}

/* ─── 5. HERO (keep dark — it's the bundle background image) ──────────── */
/* The hero section has a dark bg image from the JS bundle. Let it be.
   Just ensure text is legible. */

h1 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  /* Default white for hero; content-section override happens below */
}

/* Hero h1 — force white baseline so the dark container background shows through */
section:first-of-type h1,
section:first-of-type h1 *,
div[class*="relative"][class*="min-h"] h1,
div[class*="relative"][class*="min-h"] h1 * {
  color: #fff !important;
}

/* Orange accent ONLY on the specific span, not whole h1 */
section:first-of-type h1 [class*="text-orange"],
div[class*="relative"][class*="min-h"] h1 [class*="text-orange"],
h1 > [class*="text-orange-5"] {
  color: var(--orbix-orange) !important;
}

/* Pill badges */
span[class*="border"][class*="rounded-full"][class*="text-orange"],
span[class*="border"][class*="rounded-full"][class*="uppercase"] {
  background: rgba(249,115,22,.1) !important;
  border: 1px solid rgba(249,115,22,.4) !important;
  color: var(--orbix-orange) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
}

/* Hero buttons */
button[class*="bg-orange"],
a[class*="bg-orange"]:not([href*="mailto"]):not([href*="tel"]):not(nav a) {
  background: var(--orbix-orange) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  border-radius: var(--radius) !important;
  padding: 13px 30px !important;
  border: none !important;
  transition: var(--transition) !important;
}
button[class*="bg-orange"]:hover,
a[class*="bg-orange"]:hover {
  background: var(--orbix-orange-dark) !important;
  transform: translateY(-2px) !important;
}

/* WhatsApp button */
button[class*="bg-green"],
a[class*="bg-green"] {
  background: #25D366 !important;
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
  transition: var(--transition) !important;
}
button[class*="bg-green"]:hover,
a[class*="bg-green"]:hover {
  background: #1fba57 !important;
  transform: translateY(-2px) !important;
}

/* Outline button */
button[class*="border-white"],
a[class*="border-white"] {
  background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  padding: 13px 30px !important;
  transition: var(--transition) !important;
}
button[class*="border-white"]:hover,
a[class*="border-white"]:hover {
  background: rgba(255,255,255,.15) !important;
}

/* ─── 6. SECTION BACKGROUNDS — force white/light for all content ───────── */

/* Any section or div that had forced dark bg — override to white */
section,
main > div,
[class*="bg-slate-900"],
[class*="bg-gray-900"],
[class*="bg-\[#0A1628\]"],
[class*="bg-\[#060D1A\]"],
[class*="bg-\[#0B1527\]"] {
  background-color: var(--orbix-white) !important;
}

/* Alternating light gray for visual rhythm */
section:nth-of-type(even),
[class*="bg-slate-50"],
[class*="bg-gray-50"],
[class*="bg-slate-100"],
[class*="bg-gray-100"] {
  background-color: var(--orbix-bg) !important;
}

/* ─── 7. TYPOGRAPHY — dark text on light backgrounds ─────────────────── */
h2 {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  line-height: 1.05 !important;
  color: var(--orbix-dark) !important;
  text-transform: uppercase;
  letter-spacing: -.01em !important;
}

h3 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  line-height: 1.2 !important;
  color: var(--orbix-dark) !important;
  text-transform: uppercase;
}

h4, h5, h6 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  color: var(--orbix-dark) !important;
}

p {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  line-height: 1.7 !important;
  color: var(--orbix-mid) !important;
}

/* Section sub-labels / descriptors */
[class*="text-slate-400"],
[class*="text-gray-400"],
[class*="text-slate-500"],
[class*="text-gray-500"] {
  color: var(--orbix-light) !important;
}

[class*="text-slate-600"],
[class*="text-gray-600"],
[class*="text-slate-700"],
[class*="text-gray-700"] {
  color: var(--orbix-mid) !important;
}

[class*="text-slate-800"],
[class*="text-slate-900"],
[class*="text-gray-800"],
[class*="text-gray-900"] {
  color: var(--orbix-dark) !important;
}

/* Content-section headings & text that render white from the bundle —
   override only inside clearly light sections (NOT in the hero / dark hero area).
   We target only elements that sit on the now-white content sections. */
main section:not(:first-of-type) h2,
main section:not(:first-of-type) h3,
main section:not(:first-of-type) h4,
main section:not(:first-of-type) p,
main > div > section:not(:first-of-type) [class*="text-white"],
[class*="bg-white"] [class*="text-white"],
[class*="bg-slate-50"] [class*="text-white"],
[class*="bg-gray-50"] [class*="text-white"] {
  color: var(--orbix-dark) !important;
}

/* ─── 8. STATS ROW ───────────────────────────────────────────────────── */
[class*="text-5xl"][class*="font-black"],
[class*="text-4xl"][class*="font-black"],
[class*="text-5xl"][class*="font-bold"],
[class*="text-4xl"][class*="font-bold"] {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  color: var(--orbix-orange) !important;
  letter-spacing: -.02em !important;
}

[class*="text-xs"][class*="uppercase"][class*="tracking"] {
  font-family: var(--font-body) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  color: var(--orbix-light) !important;
}

/* ─── 9. PRODUCT CATEGORY TABS ──────────────────────────────────────── */
[role="tablist"],
div[class*="flex"][class*="overflow-x"] {
  gap: 6px !important;
}

button[role="tab"],
[class*="rounded-full"][class*="px-4"][class*="text-sm"],
[class*="rounded-full"][class*="px-6"][class*="text-sm"] {
  font-family: var(--font-body) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 8px 20px !important;
  background: #fff !important;
  border: 1.5px solid var(--orbix-border) !important;
  color: var(--orbix-mid) !important;
  transition: var(--transition) !important;
}
button[role="tab"][class*="bg-orange"],
[data-state="active"] {
  background: var(--orbix-orange) !important;
  color: #fff !important;
  border-color: var(--orbix-orange) !important;
  box-shadow: 0 3px 12px rgba(249,115,22,.35) !important;
}
button[role="tab"]:hover:not([class*="bg-orange"]):not([data-state="active"]) {
  border-color: var(--orbix-orange) !important;
  color: var(--orbix-orange) !important;
}

/* ─── 10. SEARCH INPUT ───────────────────────────────────────────────── */
input[type="search"],
input[type="text"],
input[placeholder*="Search"],
input[placeholder*="search"] {
  background: #fff !important;
  border: 1.5px solid var(--orbix-border) !important;
  border-radius: var(--radius) !important;
  color: var(--orbix-dark) !important;
  font-family: var(--font-body) !important;
  font-size: .875rem !important;
  padding: 10px 16px !important;
  outline: none !important;
  transition: var(--transition) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--orbix-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}
input::placeholder { color: #A0AEC0 !important; }

/* ─── 11. PRODUCT CARDS ──────────────────────────────────────────────── */
[class*="grid"] > div[class*="group"],
[class*="grid"] > a[class*="group"],
article[class*="group"] {
  background: #fff !important;
  border: 1px solid var(--orbix-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  transition: var(--transition) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  backdrop-filter: none !important;
}

[class*="grid"] > div[class*="group"]:hover,
[class*="grid"] > a[class*="group"]:hover,
article[class*="group"]:hover {
  background: #fff !important;
  border-color: var(--orbix-orange) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(249,115,22,.3) !important;
  transform: translateY(-3px) !important;
}

/* Card images — sharp, no blur */
[class*="group"] img[class*="object-cover"],
[class*="group"] img {
  image-rendering: auto !important;
  transform: translateZ(0) !important;
  transition: transform .5s ease !important;
  filter: none !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}
[class*="group"]:hover img[class*="object-cover"] {
  transform: scale(1.05) translateZ(0) !important;
}

/* Card text body */
[class*="group"] [class*="p-4"],
[class*="group"] [class*="p-5"],
[class*="group"] [class*="p-6"] {
  padding: 18px !important;
  background: #fff !important;
}

/* Category label */
[class*="group"] span[class*="text-orange"][class*="uppercase"],
[class*="group"] span[class*="tracking"][class*="text-orange"] {
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  color: var(--orbix-orange) !important;
  text-transform: uppercase;
}

/* Card title */
[class*="group"] h3,
[class*="group"] [class*="font-bold"],
[class*="group"] [class*="font-black"] {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--orbix-dark) !important;
  text-transform: uppercase !important;
  margin: 5px 0 7px !important;
}

/* Card description */
[class*="group"] p,
[class*="group"] [class*="text-sm"],
[class*="group"] [class*="line-clamp"] {
  font-size: .83rem !important;
  line-height: 1.55 !important;
  color: var(--orbix-mid) !important;
}

/* Card divider */
[class*="group"] [class*="border-t"] {
  border-top: 1px solid var(--orbix-border) !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
}

/* View Details link */
[class*="group"] a[class*="text-orange"],
[class*="group"] span[class*="text-orange"] {
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  color: var(--orbix-orange) !important;
  text-transform: uppercase;
}

/* Card badges */
span[class*="bg-green"]:not([class*="text-lg"]) {
  background: #DCFCE7 !important;
  color: #16A34A !important;
  border: 1px solid #BBF7D0 !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
}
span[class*="bg-blue"]:not([class*="text-lg"]) {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
}
span[class*="bg-purple"]:not([class*="text-lg"]) {
  background: #F3E8FF !important;
  color: #7C3AED !important;
  border: 1px solid #E9D5FF !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
}
span[class*="bg-orange"][class*="text-white"]:not(button):not(a):not(nav *) {
  background: var(--orbix-orange) !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
}

/* Card image overlay badges (ISO CERTIFIED etc.) */
[class*="group"] [class*="absolute"][class*="top"] span,
[class*="group"] [class*="absolute"][class*="top-2"] {
  background: var(--orbix-orange) !important;
  color: #fff !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
}

/* ─── 12. INDUSTRY ICON CARDS ────────────────────────────────────────── */
a[href*="/industries/"],
[href*="/industries/"] {
  background: #fff !important;
  border: 1.5px solid var(--orbix-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  transition: var(--transition) !important;
  color: var(--orbix-dark) !important;
}
a[href*="/industries/"]:hover,
[href*="/industries/"]:hover {
  border-color: var(--orbix-orange) !important;
  box-shadow: 0 6px 24px rgba(249,115,22,.18) !important;
  transform: translateY(-3px) !important;
}
a[href*="/industries/"] span,
[href*="/industries/"] span,
a[href*="/industries/"] p,
[href*="/industries/"] p {
  color: var(--orbix-dark) !important;
}
/* Industry icon box */
a[href*="/industries/"] [class*="rounded"],
[href*="/industries/"] [class*="rounded"] {
  background: rgba(249,115,22,.08) !important;
  border: 1px solid rgba(249,115,22,.2) !important;
  border-radius: 8px !important;
}
/* Icon inside */
a[href*="/industries/"] svg,
[href*="/industries/"] svg,
a[href*="/industries/"] [class*="text-orange"],
[href*="/industries/"] [class*="text-orange"] {
  color: var(--orbix-orange) !important;
}

/* ─── 13. PARTNERS / SHIPPING LINES ROW ──────────────────────────────── */
/* The partners strip — keep consistent with its surrounding section */
[class*="partners"],
[class*="shipping-line"] {
  background: var(--orbix-bg) !important;
}

/* Partner logos / name badges */
[class*="border"][class*="rounded"][class*="flex"][class*="items-center"][class*="justify-center"]:not([role]) {
  background: #fff !important;
  border: 1px solid var(--orbix-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
  transition: var(--transition) !important;
  color: var(--orbix-dark) !important;
  font-weight: 700 !important;
}
[class*="border"][class*="rounded"][class*="flex"][class*="items-center"][class*="justify-center"]:not([role]):hover {
  border-color: var(--orbix-orange) !important;
  box-shadow: 0 4px 16px rgba(249,115,22,.2) !important;
}

/* Certification badges (ISO, CSC, etc.) */
[class*="rounded-full"][class*="border"][class*="text-sm"],
[class*="rounded-full"][class*="border"][class*="text-xs"] {
  background: #fff !important;
  border: 1px solid var(--orbix-border) !important;
  color: var(--orbix-mid) !important;
  font-weight: 600 !important;
}

/* ─── 14. FEATURES / WHY CHOOSE US ───────────────────────────────────── */
/* Feature items — icon + text pairs */
[class*="flex"][class*="gap"][class*="items-start"] > div:first-child [class*="rounded"],
[class*="flex"][class*="gap-4"] > div:first-child [class*="rounded"],
[class*="flex"][class*="gap-3"] > div:first-child [class*="rounded"] {
  background: rgba(249,115,22,.08) !important;
  border-radius: 8px !important;
}

/* ─── 15. SPECS TABLE ─────────────────────────────────────────────────── */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
  background: #fff !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
}
tr {
  border-bottom: 1px solid var(--orbix-border) !important;
}
tr:last-child {
  border-bottom: none !important;
}
td, th {
  padding: 12px 16px !important;
  font-size: .875rem !important;
  color: var(--orbix-mid) !important;
}
th {
  background: var(--orbix-bg) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: .7rem !important;
  letter-spacing: .1em !important;
  color: var(--orbix-orange) !important;
}
tr:hover td {
  background: #FFF7F0 !important;
}

/* ─── 16. PRODUCT DETAIL PAGE ────────────────────────────────────────── */
[class*="product"] img,
[class*="gallery"] img {
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
  image-rendering: auto !important;
}

/* ─── 17. BREADCRUMB ─────────────────────────────────────────────────── */
nav[aria-label="breadcrumb"] a,
nav[aria-label="breadcrumb"] span {
  font-size: .78rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  color: var(--orbix-light) !important;
  text-transform: uppercase;
}
nav[aria-label="breadcrumb"] a:hover {
  color: var(--orbix-orange) !important;
}

/* ─── 18. CONTACT FORM ────────────────────────────────────────────────── */
input, textarea, select {
  background: #fff !important;
  border: 1.5px solid var(--orbix-border) !important;
  border-radius: var(--radius) !important;
  color: var(--orbix-dark) !important;
  font-family: var(--font-body) !important;
  padding: 10px 14px !important;
  transition: var(--transition) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--orbix-orange) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
  outline: none !important;
}
label {
  color: var(--orbix-dark) !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
}

/* ─── 19. FOOTER ─────────────────────────────────────────────────────── */
footer,
[class*="footer"],
body > div > footer {
  background: var(--orbix-navy) !important;
  color: rgba(255,255,255,.75) !important;
  border-top: 3px solid var(--orbix-orange) !important;
}
footer *,
[class*="footer"] * {
  color: rgba(255,255,255,.75) !important;
}
footer a:hover,
[class*="footer"] a:hover {
  color: var(--orbix-orange) !important;
}
footer h3, footer h4,
[class*="footer"] h3, [class*="footer"] h4 {
  color: #fff !important;
}

/* ─── 20. POLICY FOOTER BAR ──────────────────────────────────────────── */
#orbix-policy-bar {
  background: #111827;
  color: rgba(255,255,255,.6);
  font-family: var(--font-body);
  font-size: .72rem;
  text-align: center;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#orbix-policy-bar a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .04em;
  transition: color .18s;
}
#orbix-policy-bar a:hover {
  color: var(--orbix-orange);
}

/* ─── 21. IMAGE QUALITY — global sharpness fix ───────────────────────── */
img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  max-width: 100%;
}

/* ─── 22. SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--orbix-bg); }
::-webkit-scrollbar-thumb {
  background: var(--orbix-orange);
  border-radius: 10px;
}

/* ─── 23. MISC UTILITIES ─────────────────────────────────────────────── */
/* Remove any lingering dark overlays on content sections */
[class*="bg-gray-800"],
[class*="bg-slate-800"],
[class*="bg-gray-700"],
[class*="bg-slate-700"] {
  background-color: var(--orbix-white) !important;
}

/* Dividers */
hr, [class*="border-t"][class*="border-slate"],
[class*="border-t"][class*="border-gray"] {
  border-color: var(--orbix-border) !important;
}

/* Orange underline accent on section headers */
[class*="text-orange-500"][class*="text-sm"],
[class*="text-orange-500"][class*="uppercase"],
[class*="text-orange"][class*="uppercase"][class*="text-sm"] {
  color: var(--orbix-orange) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

/* Ensure all SVG icons on light bg use appropriate colour */
svg[class*="text-slate"],
svg[class*="text-gray"] {
  color: var(--orbix-light) !important;
}

/* ─── 24. RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: clamp(2.2rem, 9vw, 3.5rem) !important; }
  h2 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; }
  h3 { font-size: 1.1rem !important; }

  #orbix-policy-bar {
    font-size: .65rem;
    gap: 5px 12px;
    padding: 10px 14px;
  }
}