/* ============================================================
   AXIUM — RESPONSIVE LAYER v3
   Goal: zero horizontal overflow on any phone, single-column
   flow, 44px+ tap targets, no over-large type, no orphan
   borders. Inline styles win unless we !important them, so
   we use BROAD substring selectors against [style*=...].
   ============================================================ */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
*, *::before, *::after { box-sizing: border-box; }

/* No element may exceed the viewport width on small screens.
   This is the universal anti-overflow guard. */
@media (max-width: 960px) {
  body * { max-width: 100% !important; }
  /* Restore widgets that legitimately need to size themselves */
  iframe { max-width: 100% !important; }
}

/* ------------------------------------------------------------
   Mobile menu UI (visible only at small widths)
   ------------------------------------------------------------ */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid currentColor;
  cursor: pointer;
  padding: 11px 9px;
  flex: 0 0 auto;
}
.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #0E1F36;
  z-index: 999;
  padding: 88px 24px max(32px, env(safe-area-inset-bottom));
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu-overlay.open { display: flex !important; }
.mobile-menu-overlay a {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 28px;
  color: #F4EFE3 !important;
  text-decoration: none;
  border: 0 !important;
  padding: 16px 0 !important;
  display: block !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none !important;
  border-bottom: 1px solid rgba(192, 160, 96, .15) !important;
  min-height: 44px;
}
.mobile-menu-overlay a:hover { color: #C0A060 !important; }
.mobile-menu-overlay .mobile-cta {
  margin-top: 24px;
  background: #C0A060;
  color: #0E1F36 !important;
  text-align: center;
  padding: 18px 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-bottom: 0 !important;
}
.mobile-menu-close {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid #C0A060;
  color: #C0A060;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  font-family: -apple-system, system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Body lock when overlay open (iOS-safe) */
body.menu-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ============================================================
   BREAKPOINT: ≤ 960px  (phones + small tablets)
   ============================================================ */
@media (max-width: 960px) {

  /* --- Universal layout normalization --- */

  /* Every inline grid stacks to a single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Every max-width caps to viewport */
  [style*="max-width"] { max-width: 100% !important; }

  /* Side padding on outer container divs */
  section > div,
  footer > div,
  nav > div,
  main > div,
  header > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Catch any element with `padding:N 48px` literal */
  [style*="padding:0 48px"]  { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding: 0 48px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*=" 48px;"], [style*=" 48px "] {
    /* fallback — covered above for the common cases */
  }

  /* Reduce big inline horizontal padding on cards */
  [style*="padding:56px"], [style*="padding: 56px"]   { padding: 28px !important; }
  [style*="padding:48px"]:not(nav *), [style*="padding: 48px"]:not(nav *) { padding: 24px !important; }
  [style*="padding:72px"], [style*="padding: 72px"]   { padding: 32px !important; }
  [style*="padding:80px"]:not(section), [style*="padding: 80px"]:not(section) { padding: 32px !important; }
  [style*="padding:96px 0"], [style*="padding: 96px 0"] { padding: 48px 0 !important; }
  [style*="padding:140px"], [style*="padding: 140px"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Section vertical padding — collapse to a sensible mobile rhythm */
  section[style*="padding"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Flex rows wrap and gap shrinks */
  [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  [style*="display:flex"][style*="align-items:end"],
  [style*="display:flex"][style*="align-items:flex-end"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

  /* Right-aligned text becomes left-aligned on mobile */
  [style*="text-align:right"]  { text-align: left !important; }
  [style*="justify-self:end"]  { justify-self: start !important; }
  [style*="justify-self: end"] { justify-self: start !important; }
  [style*="align-self:end"]    { align-self: flex-start !important; }

  /* --- Typography (universal anti-overflow + clamp to mobile sizes) --- */
  h1, h2, h3, h4 {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: pretty !important;
  }
  h1[style] { font-size: clamp(32px, 9vw, 48px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; }
  h2[style] { font-size: clamp(28px, 7.5vw, 40px) !important; line-height: 1.08 !important; }
  h3[style] { font-size: clamp(22px, 6vw, 32px) !important; line-height: 1.12 !important; }
  h4[style] { font-size: clamp(18px, 4.5vw, 24px) !important; line-height: 1.2 !important; }

  /* Inline-styled non-heading huge text */
  [style*="font-size:128px"], [style*="font-size: 128px"],
  [style*="font-size:96px"],  [style*="font-size: 96px"],
  [style*="font-size:88px"],  [style*="font-size: 88px"],
  [style*="font-size:84px"],  [style*="font-size: 84px"],
  [style*="font-size:78px"],  [style*="font-size: 78px"],
  [style*="font-size:72px"],  [style*="font-size: 72px"] {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
  }
  [style*="font-size:68px"], [style*="font-size: 68px"],
  [style*="font-size:64px"], [style*="font-size: 64px"],
  [style*="font-size:56px"], [style*="font-size: 56px"],
  [style*="font-size:54px"], [style*="font-size: 54px"],
  [style*="font-size:52px"], [style*="font-size: 52px"] {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }
  [style*="font-size:48px"], [style*="font-size: 48px"],
  [style*="font-size:42px"], [style*="font-size: 42px"],
  [style*="font-size:40px"], [style*="font-size: 40px"] {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.12 !important;
  }
  [style*="font-size:36px"], [style*="font-size: 36px"],
  [style*="font-size:32px"], [style*="font-size: 32px"] {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.18 !important;
  }
  /* Lead paragraphs / deck text */
  p[style*="font-size:26px"], p[style*="font-size:24px"],
  p[style*="font-size:22px"], p[style*="font-size:20px"],
  p[style*="font-size:18px"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  /* Smaller pull-out quotes / italic ledes */
  blockquote {
    font-size: 20px !important;
    line-height: 1.35 !important;
    padding-left: 14px !important;
    margin: 24px 0 !important;
  }

  /* Prose drop-cap kill (looks broken on narrow widths) */
  .prose p:first-of-type::first-letter {
    font-size: inherit !important;
    float: none !important;
    padding: 0 !important;
    color: inherit !important;
  }

  /* --- TradingView widget heights (compressed) --- */
  .tradingview-widget-container { max-width: 100% !important; width: 100% !important; }
  [style*="height:720px"], [style*="height: 720px"],
  [style*="height:680px"], [style*="height: 680px"] { height: 420px !important; }
  [style*="height:600px"], [style*="height: 600px"],
  [style*="height:560px"], [style*="height: 560px"] { height: 360px !important; }
  [style*="height:540px"], [style*="height: 540px"],
  [style*="height:520px"], [style*="height: 520px"] { height: 340px !important; }
  [style*="height:480px"], [style*="height: 480px"],
  [style*="height:460px"], [style*="height: 460px"] { height: 320px !important; }
  [style*="height:440px"], [style*="height: 440px"],
  [style*="height:420px"], [style*="height: 420px"] { height: 300px !important; }
  [style*="height:400px"], [style*="height: 400px"],
  [style*="height:380px"], [style*="height: 380px"] { height: 280px !important; }
  [style*="height:360px"], [style*="height: 360px"],
  [style*="height:340px"], [style*="height: 340px"],
  [style*="height:320px"], [style*="height: 320px"] { height: 250px !important; }
  [style*="height:300px"], [style*="height: 300px"],
  [style*="height:280px"], [style*="height: 280px"] { height: 220px !important; }

  /* --- Hide the TV ticker tape on mobile (it doesn't fit) --- */
  [data-tv-src*="ticker-tape"] { display: none !important; }
  /* Hide the entire LIVE/TERMINAL ticker row when only the label is left */
  [data-tv-src*="ticker-tape"] ~ * { display: initial; }

  /* --- Images & SVGs scale to width --- */
  img:not([alt*="Axium"]) { max-width: 100% !important; height: auto !important; }
  nav    img[alt*="Axium"] { height: 34px !important; width: auto !important; }
  footer img[alt*="Axium"] { height: 40px !important; width: auto !important; }
  svg { max-width: 100% !important; }

  /* --- Aspect-ratio containers (hero images, charts) --- */
  [style*="aspect-ratio"] { width: 100% !important; max-width: 100% !important; }

  /* --- Forms full width --- */
  input, textarea, select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; font-size: 16px !important; }
  form { width: 100% !important; }

  /* --- Lists tighter on mobile --- */
  ul[style] { padding-left: 20px !important; }

  /* --- NAV: hamburger swap --- */
  nav > div[style*="padding"],
  nav > div[style*="max-width"] {
    padding: 12px 16px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  .nav-desktop-links { display: none !important; }
  .nav-desktop-cta   { display: none !important; }
  .mobile-menu-btn   { display: flex !important; }

  /* --- Sticky filter bars sit just under nav --- */
  [style*="position:sticky"][style*="top:78px"] { top: 60px !important; }
  [style*="position:sticky"][style*="top: 78px"] { top: 60px !important; }

  /* --- Vertical dividers (border-left/right) collapse to bottom --- */
  [style*="border-right:1px solid"]:not(nav *):not([style*="white-space"]) {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(14, 31, 54, .12) !important;
  }
  [style*="border-left:1px solid"]:not(blockquote) {
    border-left: 0 !important;
  }

  /* --- Live LIVE-DOT row labels: smaller --- */
  [style*="letter-spacing:.24em"], [style*="letter-spacing: .24em"] { font-size: 10px !important; }
  [style*="letter-spacing:.2em"][style*="font-size:11px"] { font-size: 10px !important; }

  /* --- Tap targets: 44px floor on tabs, pills, share-row links --- */
  [data-filter-tab],
  .tab-btn,
  .cat-tab {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
  }

  /* --- Defensive: hide hard <br> in headings even if JS doesn't strip them */
  h1 br, h2 br, h3 br { display: none !important; }
  /* Headings get a soft trailing space so words don't fuse */
  h1, h2, h3 { word-spacing: 0.02em; }

  /* --- Kill position:sticky on inner asides/sidebars on mobile.
     When 2-col grids stack to 1 col, sticky asides pin themselves
     at top:120px and the next section's content scrolls underneath,
     causing overlapping headings (worst on Services page). --- */
  [style*="position:sticky"]:not(nav):not(nav *) {
    position: static !important;
    top: auto !important;
  }
  aside[style*="sticky"], aside { position: static !important; }

  /* Pills shouldn't wrap mid-text */
  [style*="padding:10px 18px"],
  [style*="padding: 10px 18px"],
  [style*="padding:6px 12px"],
  [style*="padding: 6px 12px"],
  [style*="padding:4px 8px"],
  [style*="padding: 4px 8px"] {
    white-space: nowrap !important;
  }

  /* Footer link columns should be left-aligned and the address sentence-case-friendly */
  footer [style*="display:grid"] { gap: 28px !important; }

  /* Address blocks: lower-case the all-caps for readability */
  footer [style*="font-family:'JetBrains Mono'"][style*="letter-spacing:.1em"] {
    text-transform: none !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  /* Safe-area padding on page-bottom CTAs and footer */
  footer { padding-bottom: max(32px, env(safe-area-inset-bottom)) !important; }
  body   { padding-bottom: env(safe-area-inset-bottom); }

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

  /* Pre-hydration: hide raw <x-dc> until support.js mounts it */
  x-dc:not(:defined) { visibility: hidden; }
}

/* ============================================================
   BREAKPOINT: 640px – 960px  (tablet / small landscape)
   Some 2-col layouts are still useful here.
   ============================================================ */
@media (min-width: 640px) and (max-width: 960px) {
  /* 5-column footer becomes 2 columns instead of stacking to 1 */
  footer [style*="grid-template-columns:1.5fr 1fr 1fr 1fr 1fr"],
  footer [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
  /* 3-col practice/insights blocks become 2 */
  [style*="grid-template-columns:repeat(3,1fr)"]:not(footer *):not(.pane *),
  [style*="grid-template-columns: repeat(3,1fr)"]:not(footer *):not(.pane *) {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   BREAKPOINT: ≤ 560px  (phones)
   ============================================================ */
@media (max-width: 560px) {
  section > div, footer > div, nav > div, main > div, header > div {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  [style*="padding:0 48px"]  { padding-left: 14px !important; padding-right: 14px !important; }
  [style*="padding: 0 48px"] { padding-left: 14px !important; padding-right: 14px !important; }
  nav > div { padding: 10px 14px !important; }

  h1[style] { font-size: clamp(28px, 9vw, 40px) !important; }
  h2[style] { font-size: clamp(24px, 7.5vw, 34px) !important; }
  h3[style] { font-size: clamp(20px, 6vw, 28px) !important; }
  [style*="font-size:128px"], [style*="font-size:96px"],
  [style*="font-size:88px"],  [style*="font-size:84px"],
  [style*="font-size:78px"],  [style*="font-size:72px"] {
    font-size: clamp(28px, 9vw, 40px) !important;
  }
  [style*="font-size:64px"], [style*="font-size:56px"],
  [style*="font-size:54px"], [style*="font-size:52px"] {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  /* Compress hero image aspect ratios so they don't dominate */
  [style*="aspect-ratio:4/5"]                                { aspect-ratio: 4/3 !important; }
  [style*="aspect-ratio:16/8"], [style*="aspect-ratio:16 / 8"] { aspect-ratio: 16/10 !important; }

  /* Tight chart heights */
  [style*="height:720px"], [style*="height:680px"],
  [style*="height:600px"], [style*="height:560px"] { height: 320px !important; }
}

/* Always hide pre-hydration template flash */
x-dc:not(:defined) { visibility: hidden; }

/* ============================================================
   v4 REFINEMENTS — layout-hostile leftovers seen in production
   ============================================================ */
@media (max-width: 960px) {

  /* Rotated hero cards (Home) sit inside a 3-col collage that stacks
     — a rotated card in a narrow column pokes past the viewport. */
  [style*="transform:rotate(-3deg)"],
  [style*="transform: rotate(-3deg)"],
  [style*="transform:rotate(3deg)"],
  [style*="transform: rotate(3deg)"],
  [style*="transform:rotate(-2deg)"],
  [style*="transform:rotate(2deg)"] {
    transform: none !important;
  }

  /* 12-col magazine collage on Home ("A day at Axium"):
     children carry `grid-column: X / span N` — after we collapse
     the parent to 1fr, those spans still apply and empty the row.
     Blow them away so children flow naturally. */
  [style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }
  [style*="grid-row"] {
    grid-row: auto !important;
  }
  /* Restore the tile to something visible; the height:280px 280px
     rows kill children before their bg-image paints */
  [style*="grid-template-rows"] {
    grid-template-rows: auto !important;
  }
  /* Magazine tiles collapse to a comfortable 4/3 on mobile */
  [style*="grid-template-columns:repeat(12,1fr)"] > div,
  [style*="grid-template-columns: repeat(12,1fr)"] > div {
    min-height: 240px !important;
  }

  /* Home "commodity gallery" 4/5 tiles are too tall stacked;
     compress. (Overrides earlier 4/5→4/3 rule with more targets.) */
  a[style*="aspect-ratio:4/5"],
  a[style*="aspect-ratio: 4/5"] {
    aspect-ratio: 5/4 !important;
  }

  /* Trust Fortress certificate: giant absolute ribbon needs to sit
     within card width */
  [style*="position:absolute"][style*="left:50%"][style*="transform:translateX(-50%)"] {
    left: 20px !important;
    right: 20px !important;
    transform: none !important;
    max-width: calc(100% - 40px) !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Certificate: shrink the 3px double border padding down */
  [style*="border:3px double #0B1F3A"] {
    padding: 22px 16px !important;
  }
  /* UIN mono display — cap it so 36–44px doesn't overflow */
  [style*="font-family:'JetBrains Mono'"][style*="font-size:44px"],
  [style*="font-family:'JetBrains Mono'"][style*="font-size: 44px"],
  [style*="font-family:'JetBrains Mono'"][style*="font-size:36px"],
  [style*="font-family:'JetBrains Mono'"][style*="font-size: 36px"] {
    font-size: 28px !important;
    letter-spacing: .04em !important;
  }

  /* Card CTAs (Home services) — no-shrink the inline "arrow bubble" */
  [style*="border-radius:50%"][style*="width:32px"][style*="height:32px"] {
    flex-shrink: 0 !important;
  }

  /* The Bull "In Motion" hero has height:560px; the h2 inside is 78px.
     Force it to breathe better. */
  section[style*="height:560px"] {
    height: auto !important;
    min-height: 480px !important;
  }
  section[style*="height:560px"] > div[style*="height:100%"] {
    height: auto !important;
    padding-top: 56px !important;
    padding-bottom: 100px !important;
  }

  /* Home "Live markets" chart container — smaller mobile height */
  [style*="height:420px"] .tradingview-widget-container,
  [style*="height: 420px"] .tradingview-widget-container {
    height: 300px !important;
  }

  /* Home "How it works" — kill the connecting dotted line, which
     runs across a horizontal 4-col that no longer exists */
  [style*="background-image:linear-gradient(90deg,#047857 60%"] {
    display: none !important;
  }

  /* CTA green cards (padding:80px 64px) — squeeze */
  [style*="padding:80px 64px"],
  [style*="padding: 80px 64px"] {
    padding: 44px 24px !important;
  }
  /* Contact / booking card — the 64px card padding on green blocks */
  [style*="padding:64px"],
  [style*="padding: 64px"] {
    padding: 28px !important;
  }

  /* Testimonials 3-up cards — already 1-col via generic rule.
     Force the inline "flex" with margin-left:-10px avatar stack
     not to overflow */
  [style*="display:flex"][style*="align-items:center"][style*="gap:-8px"] {
    gap: 0 !important;
  }

  /* Broker cards: pros/cons pair gets 1-col via existing rule.
     Ensure the "A / A- / B+" rating chip stays visible & top-right */
  [style*="width:56px"][style*="height:56px"][style*="border-radius:16px"][style*="font-size:22px"] {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Onboarding 5-step grid on BrokerEval and Home flow */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Home "how it works" 4-step */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  /* 6-badge trust grid on Home — 3 across on phones, not 6 */
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(6,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  /* The 96px "circle" step badges become 72px */
  [style*="width:96px"][style*="height:96px"][style*="border-radius:50%"] {
    width: 72px !important;
    height: 72px !important;
  }

  /* Right-column CTA button groups (flex column, gap:14px, justify-self:end)
     — remove justify-self on wrapper and stretch buttons full-width */
  [style*="justify-self:end"] a[style*="padding:20px 32px"],
  [style*="justify-self: end"] a[style*="padding:20px 32px"] {
    padding: 16px 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Deep dark backdrop overlays in image cards clip better with
     less extreme gradients — keep as-is; nothing to override */

  /* Any div that sets an inline `width` in px larger than viewport */
  [style*="width:900px"], [style*="width: 900px"],
  [style*="width:700px"], [style*="width: 700px"],
  [style*="width:600px"], [style*="width: 600px"],
  [style*="width:500px"], [style*="width: 500px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Auto-injected contextual imagery bands: constrain height + rounded */
  [data-hero-band] {
    padding: 28px 18px !important;
  }
  [data-hero-band] [data-hero-image] {
    aspect-ratio: 16 / 10 !important;
    max-height: 300px !important;
  }

  /* Home floating card TradingView min-height reduce (the two rotated
     mini-widget cards) */
  .tradingview-widget-container[style*="min-height:180px"],
  .tradingview-widget-container[style*="min-height: 180px"] {
    min-height: 120px !important;
  }

  /* Article H1 with float:left drop-cap: kill the float on mobile */
  [style*="float:left"], [style*="float: left"] {
    float: none !important;
  }

  /* Any block using `word-break:break-all` for URLs — allow soft-wrap */
  [style*="word-break:break-all"], [style*="word-break: break-all"] {
    word-break: break-word !important;
  }

  /* ---- v5: cover styles React re-serializes ---- */
  /* React serialises `grid-column: X / span N` to inline `grid-area: R1/C1/R2/C2`.
     Our [style*="grid-column"] selector misses that. Reset grid-area too. */
  [style*="grid-area"] {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  /* Kill horizontal overflow from decorative negative-offset blobs.
     They already sit inside overflow:hidden parents on well-formed pages,
     but on nav/footer they may not — belt-and-braces. */
  [style*="position:absolute"][style*="right:-"],
  [style*="position:absolute"][style*="left:-"] {
    pointer-events: none;
  }

  /* Nav pills that overflow via nowrap: allow wrap on very small screens */
  [style*="border-radius:999px"][style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* Home hero trust pill (SECP Registered · Government Verified · UIN) —
     it's an inline-flex row of chips inside a rounded container. Let it wrap. */
  [style*="border-radius:999px"][style*="display:inline-flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 6px !important;
  }

  /* Footer link tap targets — 18px is way below thumb-friendly.
     Bump every anchor inside footer nav columns. */
  footer a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
  }
  /* Utility bar phone/hours chip: font too small */
  [style*="linear-gradient(90deg,#047857,#064E3B)"] {
    font-size: 12px !important;
    padding: 10px 14px !important;
  }

  /* Certificate small print: 8-9px is illegible on phones. Bump to 11. */
  [style*="font-size:9px"], [style*="font-size: 9px"],
  [style*="font-size:8px"], [style*="font-size: 8px"] {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  /* Certificate UIN mono display: still readable */
  [style*="font-family:'JetBrains Mono'"][style*="font-size:36px"],
  [style*="font-family:'JetBrains Mono'"][style*="font-size: 36px"] {
    font-size: 26px !important;
  }

  /* TradingView mini-widget wrapper labels (9px inside a rotated card) */
  [style*="letter-spacing:.14em"][style*="font-size:9px"],
  [style*="letter-spacing: .14em"][style*="font-size:9px"] {
    font-size: 10px !important;
  }

  /* Home commodity grid: 4/5 tiles on mobile are still too tall stacked
     with wide screens. Reduce further. */
  a[style*="aspect-ratio:4/5"] > div:first-child + div,
  a[style*="aspect-ratio: 4/5"] > div:first-child + div {
    /* the dark bottom gradient — reduce its start */
  }

  /* Ensure any element with inline `width:1320px`, `width:1200px` etc. clamps */
  [style*="width:1320px"], [style*="width:1200px"],
  [style*="width:1100px"], [style*="width:1000px"],
  [style*="width:960px"], [style*="width:920px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Section headers that use `align-items:end` grid should stack cleanly */
  section [style*="display:grid"][style*="align-items:end"] {
    align-items: stretch !important;
  }

  /* Ensure ALL sections and section > div use symmetric padding */
  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Big Instrument-Serif Roman numerals (i., ii., iii. …) shrink on mobile
     — the 112px WhyUs numerals blow out the row */
  [style*="font-family:'Instrument Serif'"][style*="font-size:112px"],
  [style*="font-family: 'Instrument Serif'"][style*="font-size:112px"],
  [style*="font-family:'Instrument Serif'"][style*="font-size:88px"],
  [style*="font-family: 'Instrument Serif'"][style*="font-size:88px"] {
    font-size: 52px !important;
    line-height: 1 !important;
  }
  [style*="font-family:'Instrument Serif'"][style*="font-size:56px"],
  [style*="font-family: 'Instrument Serif'"][style*="font-size:56px"] {
    font-size: 40px !important;
    line-height: 1 !important;
  }

  /* Instrument-Serif italic pull-quotes (26px) shrink a touch */
  blockquote [style*="font-family:'Instrument Serif'"][style*="font-size:26px"] {
    font-size: 20px !important;
  }
  /* Author avatar images inside testimonials */
  [style*="width:52px"][style*="height:52px"][style*="border-radius:50%"] {
    width: 44px !important;
    height: 44px !important;
  }
  /* Home LIVE ticker container height */
  [style*="height:52px"][style*="overflow:hidden"] {
    height: auto !important;
  }

  /* Section CTA gradients: the giant emerald card with 80px padding */
  section [style*="padding:80px"] { padding: 44px 22px !important; }

  /* Kill any inline `justify-self` on second column of two-col grids on mobile */
  [style*="justify-self:end"], [style*="justify-self: end"] {
    justify-self: stretch !important;
    text-align: left !important;
  }

  /* Certificate "border:3px double" element — the certified true copy
     rotated stamp overflows the card on narrow widths */
  [style*="transform:rotate(-4deg)"],
  [style*="transform: rotate(-4deg)"] {
    transform: none !important;
    position: static !important;
    display: inline-block !important;
    margin: 12px 0 0 !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* Home ticker bar row (bottom of Bull section) — the LIVE·USD chip
     forces a fixed width side-by-side row. Stack vertically. */
  [style*="border-top:1px solid rgba(110,231,183,.25)"] {
    flex-direction: column !important;
  }
  [style*="border-right:1px solid rgba(110,231,183,.2)"] {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(110,231,183,.2) !important;
    padding: 8px 14px !important;
    justify-content: flex-start !important;
  }

  /* Ensure the Home hero 3-tile visual (1fr 1.4fr 1fr grid) stacks with sane
     order — the center image second (was middle), rotated cards first & third */
  section [style*="grid-template-columns:1fr 1.4fr 1fr"] > div:nth-child(2) {
    order: -1;
  }

  /* Article page: hero cover image aspect on mobile */
  section[style*="padding:0 48px 40px"] [style*="aspect-ratio:16/9"] {
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 560px) {
  /* Certificate double-border + inner card padding: even tighter */
  [style*="border:3px double #0B1F3A"] {
    padding: 18px 12px !important;
  }
  /* Nav CTA "Free Consultation" — hidden by `.nav-desktop-cta` rule; check that .mobile-cta lands right */
  .mobile-menu-overlay .mobile-cta { font-size: 13px !important; }
}

/* Additional refinement for tiny phones */
@media (max-width: 420px) {
  section > div, footer > div, nav > div, main > div, header > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  [style*="padding:0 48px"], [style*="padding: 0 48px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* 3-across trust badges on tiny screens become 2-across */
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(6,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Home 4-step how-it-works: 1-col at <420 */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  nav > div img[alt*="Axium"] { height: 30px !important; }
  h1[style] { font-size: clamp(26px, 8vw, 34px) !important; }
  h2[style] { font-size: clamp(22px, 7vw, 30px) !important; }
}

/* ============================================================
   CONTEXTUAL HERO IMAGE BAND — shared component
   Rendered by pages that used to be text-only. Kept as its own
   isolated CSS so per-page markup can be minimal.
   ============================================================ */
.ax-hero-band {
  position: relative;
  overflow: hidden;
}
.ax-hero-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 48px 40px;
}
.ax-hero-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #0B1F3A center/cover no-repeat;
  box-shadow: 0 20px 40px -20px rgba(11,31,58,.35);
  color: #fff;
  isolation: isolate;
}
.ax-hero-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,31,58,.05) 40%, rgba(11,31,58,.85) 100%);
  z-index: 0;
}
.ax-hero-tile-cap {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  z-index: 1;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.ax-hero-tile-cap b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ax-hero-tile-cap small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .16em;
  color: #FCD34D;
  font-weight: 700;
  text-transform: uppercase;
}
.ax-hero-tile-tall { aspect-ratio: 4 / 5; }
.ax-hero-tile-wide { aspect-ratio: 16 / 9; }

@media (max-width: 960px) {
  .ax-hero-band-grid {
    grid-template-columns: 1fr 1fr !important;
    padding: 16px 18px 32px !important;
    gap: 12px !important;
  }
  .ax-hero-tile-tall, .ax-hero-tile-wide { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 480px) {
  .ax-hero-band-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Wide legal-page hero band: bump aspect on narrow screens so it isn't slivered */
@media (max-width: 960px) {
  [style*="aspect-ratio:20/7"],
  [style*="aspect-ratio: 20/7"] {
    aspect-ratio: 16 / 9 !important;
  }
  [style*="aspect-ratio:16/9"],
  [style*="aspect-ratio: 16/9"] {
    aspect-ratio: 16 / 10 !important;
  }
}

/* ============================================================
   ADDITIONS FOR 1B PAGES (Research table, Broker cards, FAQ,
   Article, Contact map, Insights hero, Markets terminal)
   ============================================================ */
@media (max-width: 960px) {

  /* Research archive table — 7-column grid collapses to a card list */
  [style*="grid-template-columns:110px 130px 150px 1fr 90px 80px 60px"],
  [style*="grid-template-columns: 110px 130px 150px 1fr 90px 80px 60px"] {
    display: block !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid rgba(11,31,58,.06) !important;
  }
  /* Hide the desktop table header row on mobile */
  [style*="grid-template-columns:110px 130px 150px 1fr 90px 80px 60px"][style*="background:#0B1F3A"] {
    display: none !important;
  }
  /* Stacked cells stack their labels+values */
  [style*="grid-template-columns:110px 130px 150px 1fr 90px 80px 60px"] > div {
    padding: 4px 0 !important;
    display: inline-block !important;
    margin-right: 12px !important;
  }
  [style*="grid-template-columns:110px 130px 150px 1fr 90px 80px 60px"] > div:nth-child(4) {
    display: block !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 15px !important;
  }
  [style*="grid-template-columns:110px 130px 150px 1fr 90px 80px 60px"] > div:last-child {
    display: none !important;
  }

  /* WhyUs comparison table — 3-col becomes stacked labeled cards */
  [style*="grid-template-columns:1.4fr 1fr 1fr"] {
    display: block !important;
  }
  [style*="grid-template-columns:1.4fr 1fr 1fr"] > div {
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(11,31,58,.08) !important;
    background: transparent !important;
  }

  /* Contact SVG map: keep aspect ratio contained */
  section[style*="ECEAE0"] svg[viewBox="0 0 800 500"] { height: 240px !important; }

  /* Article drop-cap on mobile: shrink */
  article [style*="font-size:88px"][style*="float:left"] {
    font-size: 56px !important;
    line-height: .85 !important;
    margin: 4px 10px -4px 0 !important;
  }
  article h2[style*="margin:56px 0 20px"],
  article h2[style*="margin: 56px 0 20px"] {
    margin: 32px 0 14px !important;
  }
  article [style*="padding:32px 40px"] {
    padding: 20px 22px !important;
  }
  article [style*="padding:80px 48px"] { padding: 40px 18px !important; }

  /* Insights featured article — 1.4fr 1fr becomes stacked and inner cards tighter */
  [style*="grid-template-columns:1.4fr 1fr"] {
    display: block !important;
  }
  [style*="grid-template-columns:1.4fr 1fr"] > div {
    padding: 32px 24px !important;
  }

  /* Broker cards: rating bubble stays inline, pros/cons stack */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:16px"] {
    grid-template-columns: 1fr !important;
  }

  /* Daily analysis — 2-col article becomes stacked */
  article[style*="grid-template-columns:1.6fr 1fr"] {
    display: block !important;
  }

  /* Regulatory / Privacy / Terms sections: shrink left padding for section body */
  section[id^="s"] [style*="padding-left:76px"],
  section[id^="s"] [style*="padding-left: 76px"] {
    padding-left: 0 !important;
  }
  section[id^="s"] [style*="font-size:56px"][style*="float"] {
    font-size: 32px !important;
  }

  /* Markets terminal: heatmap and events widget compact */
  [data-tv-src*="market-overview"],
  [data-tv-src*="events"] { height: 380px !important; }

  /* FAQ open state — clean padding */
  details > summary { padding: 20px 22px !important; font-size: 16px !important; }
  details > summary + div { padding: 0 22px 22px 22px !important; }

  /* Utility bar shortening — hide the phone number chunk on tiny screens */
  [style*="linear-gradient(90deg,#047857,#064E3B)"] > div:last-child {
    display: none !important;
  }
  [style*="linear-gradient(90deg,#047857,#064E3B)"] {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 560px) {
  /* Filter pills wrap tighter */
  [style*="border-radius:999px"][style*="padding:10px 18px"] {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
  /* Pagination — allow wrap */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"] { gap: 12px !important; }
  /* CTA H2 shrink */
  section [style*="padding:80px 64px"] { padding: 40px 22px !important; }
  section [style*="padding:72px 48px"] { padding: 40px 22px !important; }
  /* Hero: tighten top padding on internal pages */
  section[style*="96px 48px 80px"] { padding: 40px 18px 32px !important; }
  /* Article title shrink further */
  article h1[style], section h1[style] { font-size: clamp(26px,8vw,36px) !important; }
}


/* ============================================================
   v6 FIXES — trust pill overflow, hero band tile collapse,
   misc real-device issues surfaced on iPhone 390/414
   ============================================================ */

/* --- 1. Hero-band tile: single column earlier, taller aspect ---
   Below 720px the 2-col 16/10 layout gave 96px-tall tiles and the
   caption ended up overlapping the neighbouring tile. Stack + go
   4/3 so the caption sits inside its own tile with breathing room. */
@media (max-width: 720px) {
  .ax-hero-band-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ax-hero-tile,
  .ax-hero-tile-tall,
  .ax-hero-tile-wide {
    aspect-ratio: 16 / 10 !important;
    min-height: 200px !important;
    max-height: none !important;
  }
  /* The generic [data-hero-band] [data-hero-image] max-height:300px rule
     is fine, but we override it so tiles can grow naturally on tall
     phones without capping the caption inside a tiny box */
  [data-hero-band] [data-hero-image] {
    max-height: none !important;
  }
  .ax-hero-tile-cap b { font-size: 20px !important; line-height: 1.15 !important; }
  .ax-hero-tile-cap small { font-size: 12px !important; }
  .ax-hero-tile-cap { left: 18px !important; right: 18px !important; bottom: 16px !important; }
}

/* --- 2. Trust pill: kill the nowrap that was inherited from a
       generic small-pill rule and make sure inline-flex wraps ---
   The "SECP Registered · Government Verified · UIN 0321083" pill on
   the homepage is inline-flex with padding:10px 18px 10px 12px. The
   generic [style*="padding:10px 18px"] rule set white-space:nowrap
   on it, and inline-flex sized to intrinsic content so children never
   wrapped — overflowed off the right edge. Force flex, allow wrap,
   force per-child whitespace to normal, and cap width to viewport. */
@media (max-width: 960px) {
  [style*="border-radius:999px"][style*="display:inline-flex"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    row-gap: 6px !important;
    column-gap: 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
    padding: 10px 14px !important;
    text-align: center !important;
  }
  /* Any pill child that had been forced to nowrap — allow break */
  [style*="border-radius:999px"][style*="display:inline-flex"] > * {
    white-space: normal !important;
  }
  /* The tiny 4x4 or 6x6 separator dots inside the pill should not shrink */
  [style*="border-radius:999px"][style*="display:inline-flex"] > span[style*="border-radius:50%"][style*="width:4px"],
  [style*="border-radius:999px"][style*="display:inline-flex"] > span[style*="border-radius:50%"][style*="width:6px"] {
    flex: 0 0 auto !important;
  }
}

/* --- 3. Utility bar: the top green bar has two flex rows;
       on the tiniest screens hide the phone/hours side entirely ---
   (Already hidden below 560; also ensure the LEFT side wraps.) */
@media (max-width: 560px) {
  [style*="linear-gradient(90deg,#047857,#064E3B)"] > div {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    row-gap: 4px !important;
  }
}

/* --- 4. Team/PSX cards where inline flex-wrap ellipses the last chip ---
   Any inline-flex row with children exceeding the viewport should wrap. */
@media (max-width: 720px) {
  [style*="display:inline-flex"][style*="align-items:center"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
}

/* --- 5. Testimonials + avatar clusters: fix negative-gap overlap
       we introduced earlier; use column-gap:0 instead of gap:-8px ---
   Older CSS treats negative gap as 0 anyway; keep clean here. */
@media (max-width: 720px) {
  [style*="display:flex"][style*="align-items:center"][style*="gap:-8px"] {
    gap: 0 !important;
  }
}

/* --- 6. Any element that still hits horizontal overflow because
       an inline float or transform pushes it past the viewport ---
   Absolute belt-and-braces overflow guard on the body. */
html, body {
  overflow-x: clip;
}

/* --- 7. Cert stamp position: force always relative inside cert card
       (earlier rule made it position:static; keep, but ensure it does
       not itself overflow its parent) --- */
@media (max-width: 720px) {
  [style*="transform:rotate(-4deg)"],
  [style*="transform: rotate(-4deg)"] {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* --- 8. Home hero: the trust pill wrapper had margin-bottom 36px;
       when it wraps to 3 lines the h1 below is fine — but ensure the
       h1's balance doesn't leave orphaned last-word issues on phone --- */
@media (max-width: 560px) {
  h1[style*="font-size:84px"], h1[style*="font-size: 84px"] {
    text-wrap: balance !important;
  }
}