/* W130 colour pass (2026-11-08). Loaded LAST on every page.
   Same palette, same hues: teal #005B63 / #007D88, mint #5FD4C6, orange #FF8A00, navy #0b1e2d.
   Only the shade of TEXT and CONTROL EDGES changes, so that text reaches 4.5:1 and form edges reach 3:1.
   Measured with ~/.claude/bin/colour-check; every pair is listed in the audit report.
   Rules kept: the logo is never recoloured; orange stays the ONE main call to action (a filled button);
   colour never carries a status alone (labels and icons stay as they were). */

:root {
  --text-muted: #566666;        /* was #6b7c7c: 4.38:1 on white, 4.07:1 on grey  -> 5.6:1 on grey */
  --text-light: #566666;        /* was #8a9999: 2.96:1 on white                  -> same as muted */
  --a11y-orange-text: #A04F00;  /* darker shade of the CTA orange, for the rare orange TEXT on light: 5.8:1 on white */
  --a11y-field-edge: #7a8c8c;   /* was #e2e8e8 / #dde2e2 (1.2:1): 3.5:1 on white, 3.3:1 on grey */
}

/* 1. Text on the orange call-to-action. White on #FF8A00 is 2.36:1; the near-black the home Rate Pulse button
      already uses (#1d1d1d) is 7.1:1. Hover keeps the existing darker orange (#e67a00), 5.7:1. */
.bs-primary-btn, .cert-view-btn, .cf-submit, .ci-submit-btn, .hsb-search-btn, .btn-login, .mq-cta-btn,
.od-book-btn, .btn-submit, .rf-search, .rate-quote-btn, .btn-hero-cta, .btn-solid-white, .qw-btn, .btn-primary,
.fab-cta, .qc-submit, .cookie-accept, .trk-status, .gf-btn.active, .news-filter-btn.active, .ref-filter-btn.active,
.trk-node.trk-in_progress .trk-node-dot {
  color: #1d1d1d !important;
}
.bs-primary-btn *, .cert-view-btn *, .cf-submit *, .ci-submit-btn *, .hsb-search-btn *, .btn-login *, .mq-cta-btn *,
.od-book-btn *, .btn-submit *, .rf-search *, .rate-quote-btn *, .btn-hero-cta *, .btn-solid-white *, .qw-btn *,
.btn-primary *, .fab-cta *, .qc-submit *, .cookie-accept *, .trk-status * { color: inherit !important; }
.mq-cta-btn:hover, .rf-search:hover { color: #1d1d1d !important; }

/* 2. Outline buttons were orange text on white (2.36:1). They become teal (7.85:1), so orange is kept for the
      one filled call to action on a screen. */
.btn-outline-teal { color: #005B63 !important; border-color: #005B63 !important; }
.btn-outline-teal:hover { background: #005B63 !important; color: #fff !important; border-color: #005B63 !important; }
.gf-btn:hover, .news-filter-btn:hover, .ref-filter-btn:hover { color: #005B63 !important; border-color: #005B63 !important; }
.calc-cbm-btn { color: #A04F00; }
.calc-cbm-btn:hover { background: var(--cta-orange); color: #1d1d1d; }

/* 3. Orange as TEXT or as the sign of a control on a light background: use the darker shade, or teal for links. */
.cc-explore-btn, .up-link { color: #005B63 !important; }
.cc-explore-btn:hover { color: #003F45 !important; }
.od-hero-route i { color: #A04F00; }
.badge-pending { color: #A04F00 !important; }
.trk-row.trk-in_progress .trk-row-ico { color: #A04F00; }
.faq-wrap summary::after { color: #007D88; }
.inc-card.no li i { color: #A04F00; }

/* 4. Mint as text on a light background was 1.7:1 (active menu item, section labels). Teal instead. */
.nav-btn.active-page { color: #007D88 !important; }
.navbar:not(.scrolled) .nav-btn.active-page { color: #5FD4C6 !important; }   /* over the dark hero photo mint is fine */
.section-label, .section-label-center { color: #005B63 !important; }
.cc-label { color: #005B63; }
.net-head .cc-label { color: #5FD4C6; }                                           /* on the dark band */

/* 5. White on mint was 1.8:1: tabs, step badges, badges. Navy on mint is 9.5:1. */
.rf-tab.active { color: #0b1e2d; }
.fsh-num { color: #005B63; }

/* 6. Smaller, lighter text on tinted and dark panels. */
.footer-tradename, .footer-tradename * { color: #9db2bc; }
.ci-hours-note { color: #566666; }
.mq-subtitle, .mq-state { color: #8fa6b2; }                                      /* My Quotes, on the dark page: 4.4 -> 7.4:1 */
.mq-footer-inner a, .mq-footer-inner span { color: #b9d0d0; }
.badge-default { color: #4a5d66; }
.cs-badge, .cs-form button { color: #1d1d1d; }                                   /* air: coming soon (white on orange was 2.36:1) */
.about-stats p, .about-stat-label { color: #c4dde0; }

/* 7. Form fields: the edge of a field is a control part, so it needs 3:1 against the page (it was 1.2:1).
      Error (red) and focus (teal) states keep their own colours. Hero search and rates bar stay as designed. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not(.error):not(.meils-phone-num):not([class*="rf-"]):not([class*="hsb"]):not(:focus):not([aria-invalid="true"]),
select:not(.error):not([class*="rf-"]):not([class*="hsb"]):not(:focus):not([aria-invalid="true"]),
textarea:not(.error):not(:focus):not([aria-invalid="true"]) {
  border-color: var(--a11y-field-edge) !important;
}
.meils-phone-group .meils-phone { border-color: var(--a11y-field-edge); }
.meils-phone-err { color: #c62828; }

/* 8. Badge text on mint (white was 1.8:1). */
.cc-hero-badge { color: #0b1e2d; }

/* 9. Offer page with no offer selected: no dark hero sits behind the transparent menu, so its white links were
      invisible on the white page. The error panel now gets the same dark-on-light menu the scrolled bar uses. */
body:has(.od-error) .navbar:not(.scrolled) .nav-btn,
body:has(.od-error) .navbar:not(.scrolled) .lang-btn,
body:has(.od-error) .navbar:not(.scrolled) .hamburger { color: #222222; }

/* 10. Breadcrumb over a dark photo hero was near-black (about, request pages): light text instead. */
.about-hero .breadcrumb a, .about-hero .breadcrumb span, .req-hero .breadcrumb a, .req-hero .breadcrumb span,
.ind-hero .breadcrumb a, .ind-hero .breadcrumb span { color: rgba(255,255,255,.9); }
.about-hero .breadcrumb a:hover, .req-hero .breadcrumb a:hover, .ind-hero .breadcrumb a:hover { color: #fff; }

/* 11. The menu over a bright part of a hero photo (white links on a cargo ship or sunset). A soft navy veil, only
       while the bar is transparent, behind the links. Navy is the existing footer colour #0b1e2d. */
.navbar:not(.scrolled)::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,30,45,.62) 0%, rgba(11,30,45,.28) 60%, rgba(11,30,45,0) 100%); }

/* 12. Plain-gradient heroes that ran into light mint behind white text (offer page, terms, logistics solution):
       stop at the mid teal instead. Same colours, shorter run. */
.od-hero, .terms-hero, .ls-hero { background-image: linear-gradient(135deg, #003F45 0%, #005B63 55%, #007D88 100%); }

/* 13. Small light text on dark teal / navy bars. */
.footer-bottom, .footer-bottom-links a, .footer-lang { color: #9db2bc; }
.stat-item p { color: #c4dde0; }
.rates-breadcrumb a, .rf-label { color: rgba(255,255,255,.92); }

/* 14. Last pieces from the page-by-page check. */
.fp-step.done .fp-dot { color: #0b1e2d; }                 /* completed step: tick on mint (white was 1.8:1) */
.badge-lcl { color: #005B63; }                            /* mint text on a pale tint */
.terms-updated { color: #005B63; }                        /* 3.8 -> 7:1 */
body:has(.od-error) .navbar:not(.scrolled) .lang-selector { color: #222222; }

/* 15. Found on the staging check: the "Sources" label under "Industry headlines" kept its white-on-dark-hero colour
       and vanished on the light page (1.05:1). */
.news-hero-sources > span:first-child { color: #566666; }