:root {
  --brand-navy: #101c4f;
  --brand-night: #07122d;
  --brand-ink: #151923;
  --brand-orange: #e76f3c;
  --brand-ivory: #f4f1e9;
  --brand-white: #f5f7fa;
  --brand-slate: #525f6e;
  --bg-primary: #f4f1e9;
  --bg-secondary: #fffdf8;
  --bg-tertiary: #e9e7e1;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: #ffffff;
  --surface-muted: rgba(16, 28, 79, 0.035);
  --text-primary: #101c4f;
  --text-secondary: #47526a;
  --text-muted: #5b6474;

  /* Vivid brand values drive fills, strokes, and borders. */
  --accent-primary: #e76f3c;
  --accent-secondary: #c95228;

  /* Darkened variants carry text and glyphs so copy clears WCAG AA on ivory. */
  --accent-text: #a8431a;
  --warning: #8a5200;
  --danger: #b3261e;
  --positive: #0c6843;
  --glass: rgba(16, 28, 79, 0.05);
  --glass-strong: rgba(16, 28, 79, 0.08);
  --border: rgba(16, 28, 79, 0.12);
  --border-strong: rgba(16, 28, 79, 0.2);
  --shadow-lg: 0 28px 80px rgba(7, 18, 45, 0.16);
  --shadow-md: 0 16px 42px rgba(7, 18, 45, 0.1);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --section-space: clamp(4.5rem, 8vw, 7.5rem);
}

html {
  background: var(--brand-ivory);
}

body {
  color: var(--brand-navy);
  background:
    linear-gradient(rgba(16, 28, 79, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 28, 79, 0.035) 1px, transparent 1px),
    var(--brand-ivory);
  background-size: 72px 72px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 6%, rgba(231, 111, 60, 0.12), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(16, 28, 79, 0.09), transparent 32rem);
}

::selection {
  color: var(--brand-white);
  background: var(--brand-orange);
}

:focus-visible {
  outline-color: var(--accent-text);
}

h1,
h2,
h3,
h4 {
  color: var(--text-primary);
  font-family: "Instrument Sans", Inter, system-ui, sans-serif;
  font-weight: 700;
}

h1,
h2 {
  letter-spacing: -0.055em;
}

p {
  color: var(--text-secondary);
}

.skip-link {
  color: var(--brand-white);
  background: var(--brand-night);
}

/* Shared navigation and logo */
.site-header,
.page-header {
  background: rgba(244, 241, 233, 0.84);
  border-bottom: 1px solid rgba(16, 28, 79, 0.08);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled,
.page-header.is-scrolled {
  background: rgba(244, 241, 233, 0.94);
  border-color: rgba(16, 28, 79, 0.14);
  box-shadow: 0 10px 30px rgba(7, 18, 45, 0.08);
}

.brand {
  min-width: 176px;
}

.brand-logo {
  display: block;
  width: clamp(142px, 15vw, 190px);
  height: auto;
}

.footer-brand .brand-logo {
  width: 184px;
}

.brand-mark,
.logo-mark {
  display: none;
}

.nav-links a,
.nav-actions a {
  color: rgba(7, 18, 45, 0.72);
  font-weight: 600;
}

.nav-links a {
  position: relative;
  padding: 0.45rem 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  color: var(--brand-navy);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.button {
  min-height: 3.15rem;
  border-radius: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.button-primary {
  color: var(--brand-night);
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  box-shadow: 0 12px 28px rgba(231, 111, 60, 0.24);
}

.button-primary:hover,
.button-primary:focus-visible {
  color: var(--brand-night);
  background: #f08351;
  border-color: #f08351;
  box-shadow: 0 16px 34px rgba(231, 111, 60, 0.32);
}

.button-secondary {
  color: var(--brand-navy);
  background: rgba(255, 255, 255, 0.56);
  border-color: rgba(16, 28, 79, 0.22);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  color: var(--brand-navy);
  background: #fff;
  border-color: var(--brand-navy);
}

.button-ghost {
  color: var(--brand-navy);
}

.menu-toggle {
  color: var(--brand-navy);
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(16, 28, 79, 0.16);
}

.menu-panel,
.mobile-menu {
  background:
    radial-gradient(circle at top right, rgba(231, 111, 60, 0.16), transparent 40%),
    rgba(244, 241, 233, 0.98);
}

.menu-card,
.mobile-menu-inner {
  color: var(--brand-navy);
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.menu-links a,
.mobile-menu a {
  color: var(--brand-navy);
}

/* Shared content */
.eyebrow {
  color: var(--accent-text);
  background: rgba(231, 111, 60, 0.06);
  border-color: rgba(231, 111, 60, 0.22);
  font-weight: 700;
}

.eyebrow::before {
  background: var(--brand-orange);
  box-shadow: none;
}

/* The glow is sized 60vw and offset from the 50% mark, so on narrow viewports its
   right edge lands past the viewport and gives every page with a .page-hero a few
   pixels of horizontal scroll. Clipping costs nothing on wide screens, where it
   already sits well inside the section. */
.page-hero {
  overflow: hidden;
}

.page-hero::before {
  background: radial-gradient(circle, rgba(231, 111, 60, 0.13), transparent 70%);
}

.hero-aside,
.hero-card,
.card,
.feature-card,
.metric-card,
.status-card,
.pricing-card,
.legal-card,
.article-card,
.contact-card,
.faq-card {
  color: var(--brand-navy);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 253, 248, 0.68)),
    var(--brand-white);
  border-color: rgba(16, 28, 79, 0.11);
  box-shadow: var(--shadow-md);
}

.hero-card::before,
.card::before,
.pricing-card::before,
.cta-banner::before,
.metric-card::before,
.status-card::before {
  background: radial-gradient(circle, rgba(231, 111, 60, 0.12), transparent 68%);
}

.hero-stat,
.section-divider,
th,
td {
  border-color: rgba(16, 28, 79, 0.1);
}

.hero-stat strong,
.metric-card strong,
.pricing-price strong,
.status-number,
.contact-card strong,
.article-card strong {
  color: var(--brand-navy);
}

.mini-pill,
.pill,
.inline-list li,
.article-nav a {
  color: var(--brand-navy);
  background: rgba(16, 28, 79, 0.05);
  border-color: rgba(16, 28, 79, 0.12);
}

.status-pill,
.badge-positive {
  color: var(--positive);
  background: rgba(20, 139, 91, 0.1);
}

.icon-badge {
  color: var(--accent-text);
  background: rgba(231, 111, 60, 0.08);
  border-color: rgba(231, 111, 60, 0.22);
}

.check-list li,
.link-list li,
.meta-list li {
  color: var(--brand-navy);
}

.check-list li::before {
  border-radius: 2px;
  background: var(--brand-orange);
  box-shadow: none;
}

.pricing-card.featured {
  background:
    linear-gradient(145deg, rgba(16, 28, 79, 0.98), rgba(7, 18, 45, 0.98)),
    var(--brand-night);
  border-color: rgba(231, 111, 60, 0.5);
  box-shadow: 0 24px 68px rgba(7, 18, 45, 0.24);
}

.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured .pricing-price,
.pricing-card.featured .pricing-price strong,
.pricing-card.featured .check-list li {
  color: var(--brand-white);
}

.pricing-card.featured p {
  opacity: 0.72;
}

.table-wrap {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(16, 28, 79, 0.12);
  box-shadow: var(--shadow-md);
}

th,
td {
  color: var(--brand-navy);
}

th {
  background: rgba(16, 28, 79, 0.05);
}

.faq details {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(16, 28, 79, 0.12);
}

.faq summary {
  color: var(--brand-navy);
}

.timeline-item {
  background: rgba(255, 255, 255, 0.58);
  border-left-color: var(--brand-orange);
}

.timeline-item span {
  color: var(--accent-text);
}

.code-block {
  color: #dfe6ff;
  background: var(--brand-night);
  border-color: rgba(231, 111, 60, 0.28);
}

.notice {
  color: #774024;
  background: rgba(231, 111, 60, 0.09);
  border-color: rgba(231, 111, 60, 0.2);
}

.cta-banner {
  background:
    radial-gradient(circle at 85% 20%, rgba(231, 111, 60, 0.28), transparent 30%),
    linear-gradient(135deg, #101c4f, #07122d);
  border-color: rgba(231, 111, 60, 0.32);
}

.cta-banner h2,
.cta-banner p {
  color: var(--brand-white);
}

.cta-banner p {
  opacity: 0.78;
}

.page-footer,
.footer {
  color: var(--brand-white);
  background: var(--brand-night);
  border-top: 4px solid var(--brand-orange);
}

.page-footer h3,
.page-footer h4,
.footer h3,
.footer h4,
.page-footer .brand,
.footer .brand {
  color: var(--brand-white);
}

/* The footer uses assets/brand/hauleriq-logo-inverse.svg rather than a filter.
   brightness(0) invert(1) flattened the navy body, the ivory interior lines, and
   the orange accents to a single white, leaving a featureless silhouette. */

.footer-brand p,
.footer-links a,
.footer-bottom {
  color: rgba(245, 247, 250, 0.66);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--brand-white);
}

.footer-bottom {
  border-color: rgba(245, 247, 250, 0.12);
}

/* Homepage */
.hero {
  background:
    linear-gradient(rgba(244, 241, 233, 0.92), rgba(244, 241, 233, 0.97)),
    linear-gradient(rgba(16, 28, 79, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 28, 79, 0.06) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}

.hero::before {
  background: radial-gradient(circle, rgba(231, 111, 60, 0.18), transparent 68%);
}

.hero-copy h1 {
  color: var(--brand-navy);
  max-width: 10ch;
}

.hero-copy h1::after {
  content: "";
  display: block;
  width: 0.9em;
  height: 0.1em;
  margin-top: 0.22em;
  background: var(--brand-orange);
}

.hero-copy .lead {
  color: var(--text-secondary);
}

.trust-row {
  color: var(--brand-slate);
}

.trust-row span::before {
  color: var(--brand-orange);
}

.hero-dashboard,
.dashboard-card,
.metric-panel,
.comparison-card,
.testimonial-card,
.blog-card {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(16, 28, 79, 0.12);
  box-shadow: var(--shadow-lg);
}

.hero-dashboard {
  border-top: 5px solid var(--brand-orange);
}

.dashboard-label,
.chart-label,
.mock-label,
.panel-title {
  color: var(--brand-slate);
}

.dashboard-value,
.dashboard-card strong,
.metric-value,
.mini-metrics strong {
  color: var(--text-primary);
}

.dashboard-delta,
.metric-change {
  color: var(--accent-text);
  background: rgba(231, 111, 60, 0.1);
}

.panel,
.dashboard-card,
.mock-panel {
  background: rgba(16, 28, 79, 0.04);
  border-color: rgba(16, 28, 79, 0.1);
}

.logos {
  background: var(--brand-night);
  border-color: rgba(255, 255, 255, 0.08);
}

.logos p,
.logo-chip {
  color: rgba(245, 247, 250, 0.72);
}

.logo-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.logo-chip .logo-mark {
  display: block;
  background: var(--brand-orange);
}

.feature-tabs,
.tab-list {
  background: rgba(16, 28, 79, 0.05);
  border-color: rgba(16, 28, 79, 0.1);
}

.tab-button {
  color: var(--brand-slate);
}

.tab-button.is-active,
.tab-button[aria-selected="true"] {
  color: #fff;
  background: var(--brand-navy);
}

.tab-panel {
  color: var(--brand-navy);
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(16, 28, 79, 0.1);
}

.metrics {
  background: var(--brand-navy);
}

.metrics h2,
.metrics h3,
.metrics strong,
.metrics .section-header p {
  color: var(--brand-white);
}

.metrics .metric-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.metrics .metric-card p {
  color: rgba(245, 247, 250, 0.64);
}

/* The five KPI tiles were laid out for a 880px shell inside a 1160px container,
   which left each tile 147px wide against a 35px value: "$127,450" measured 147px
   and hung 19px past its own tile. Reclaiming the unused width fits the values and
   lets the longer captions sit on one line. */
.metrics-card {
  width: min(1100px, 100%);
}

/* auto-fit rather than a hard repeat(5) so narrow viewports drop to fewer columns
   instead of squeezing every tile below its content width. */
.metrics-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Explicit rows keep the label and value on a shared baseline across the row. With
   align-content: space-between a caption that wrapped to two lines pushed its own
   value upward, so the numbers no longer lined up with their neighbours. */
.metric-card {
  grid-template-rows: auto auto 1fr;
  align-content: start;
  min-width: 0;
}

.metric-card strong {
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  min-width: 0;
}

.metric-card .metric-badge {
  align-self: end;
}

.testimonial-card {
  border-top: 4px solid var(--brand-orange);
}

.testimonial-quote,
.quote {
  color: var(--brand-navy);
}

.blog-card {
  overflow: hidden;
}

.blog-card::before {
  content: "";
  display: block;
  height: 6px;
  margin: -1.5rem -1.5rem 1.25rem;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-navy));
}

.cta-section {
  background: transparent;
}

@media (max-width: 900px) {
  .brand {
    min-width: auto;
  }

  .brand-logo {
    width: 150px;
  }
}

@media (max-width: 720px) {
  body {
    background-size: 48px 48px;
  }

  .brand-logo {
    width: 136px;
  }

  .hero-copy h1::after {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Legibility layer

   site.css and the inline block in index.html were authored for the previous
   dark theme, so a lot of their copy is near-white and their panels are near
   -black. On the ivory brand surface that reads as white-on-white. Everything
   below re-points those inherited values at the light palette.
   ========================================================================== */

/* Dark sections re-scope the text tokens, so any descendant that resolves a
   token stays legible without needing its own rule. Fill tokens such as
   --brand-navy are deliberately left alone: these elements paint their own
   backgrounds from them. */
.logos,
.metrics,
.cta-panel,
.cta-banner,
.footer,
.page-footer,
.pricing-card.featured,
.code-block {
  --text-primary: #f5f7fa;
  --text-secondary: rgba(245, 247, 250, 0.82);
  --text-muted: rgba(245, 247, 250, 0.72);
  --brand-slate: rgba(245, 247, 250, 0.76);
  --accent-text: #ffb694;
  --warning: #ffd08a;
  --danger: #ffb4ab;
  --positive: #86efac;
}

/* Solid colour beneath every dark gradient, so the copy on top keeps its
   contrast if the gradient fails to paint. Declared after each `background`
   shorthand, which would otherwise reset background-color to transparent. */
.cta-banner {
  background-color: #0d1836;
}

.pricing-card.featured {
  background-color: #0b1531;
}

/* --- Copy that was hardcoded near-white ---------------------------------- */

.muted,
.problem-outro,
.feature-point,
.pricing-footnote,
.pricing-list li,
.comparison-list li,
.funnel-detail,
.funnel-stage span,
.profit-bar-label,
.ring-value span,
.price span,
.insight-tag,
.logos-header,
.logo-chip,
.metrics-summary,
.metric-card-label,
.metric-footnote,
.metrics-card p,
.cta-panel p,
.social-link,
.footer-links a,
.footer-bottom,
.footer-brand p,
.trust-row,
.button-ghost,
.legal-card ul,
.legal-card li {
  color: var(--text-secondary);
}

.dashboard-label,
.panel-title,
.chart-label,
.mock-label,
.tab-button {
  color: var(--brand-slate);
}

.dashboard-value,
.stat-value,
.testimonial-quote,
.testimonial-author strong,
.metric-pill strong,
.breakdown-item strong,
.funnel-stage strong,
.route-stat strong,
.ring-value strong,
.metrics-summary strong,
.metric-card strong,
.price {
  color: var(--text-primary);
}

/* --- Accent glyphs and status colours ----------------------------------- */

.stat-icon,
.feature-point svg,
.breakdown-positive,
.comparison-list .positive,
.route-badge,
.metric-badge.positive,
.pricing-badge,
.read-link {
  color: var(--accent-text);
}

.breakdown-negative,
.comparison-list .negative,
.badge-danger {
  color: var(--danger);
}

.stars,
.badge-warning,
.metric-badge.warning {
  color: var(--warning);
}

.metric-badge.positive,
.pricing-badge,
.stat-icon {
  background: rgba(231, 111, 60, 0.12);
}

/* Opaque so it does not compound with the tinted map panel underneath. */
.route-badge {
  background: #fdf3ee;
}

.metrics .metric-badge.positive,
.pricing-card.featured .pricing-badge {
  background: rgba(255, 182, 148, 0.16);
}

.pricing-card.featured .status-pill {
  color: var(--positive);
  background: rgba(134, 239, 172, 0.14);
}

/* Ornamental pull-quote glyph, held at 3:1 for large text. */
.quote-mark {
  color: rgba(168, 67, 26, 0.75);
}

/* --- Panels that were dark or invisible on ivory ------------------------ */

.bar-panel,
.breakdown-panel,
.funnel-shell,
.route-shell,
.feature-visual {
  background: rgba(16, 28, 79, 0.04);
  border-color: rgba(16, 28, 79, 0.1);
}

.insight-card {
  color: var(--brand-navy);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 253, 248, 0.68)),
    var(--brand-white);
  border-color: rgba(16, 28, 79, 0.11);
  box-shadow: var(--shadow-md);
}

.breakdown-item,
.funnel-stage,
.route-stat,
.metric-pill,
.trust-row span,
.comparison-title .comparison-icon,
.circle-button {
  background: rgba(16, 28, 79, 0.05);
  border-color: rgba(16, 28, 79, 0.1);
}

.circle-button:hover,
.circle-button:focus-visible {
  background: rgba(16, 28, 79, 0.09);
}

.profit-bar-track {
  background: rgba(16, 28, 79, 0.08);
}

.testimonial-dot {
  background: rgba(16, 28, 79, 0.2);
}

.route-map-large {
  background:
    radial-gradient(circle at top, rgba(231, 111, 60, 0.1), transparent 55%),
    rgba(16, 28, 79, 0.04);
}

.comparison-card.hauler {
  background:
    linear-gradient(180deg, rgba(231, 111, 60, 0.12), rgba(231, 111, 60, 0.03)),
    var(--surface-strong);
  border-color: rgba(231, 111, 60, 0.32);
}

.cta-panel {
  background:
    radial-gradient(circle at 85% 20%, rgba(231, 111, 60, 0.28), transparent 30%),
    linear-gradient(135deg, #101c4f, #07122d);
  background-color: #0d1836;
  border-color: rgba(231, 111, 60, 0.32);
}

/* --- Hairlines, grids, and chart strokes that were white --------------- */

.section-divider {
  background: linear-gradient(90deg, transparent, rgba(16, 28, 79, 0.16), transparent);
}

.hero-grid {
  background-image:
    linear-gradient(rgba(16, 28, 79, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 28, 79, 0.05) 1px, transparent 1px);
}

.line-chart {
  background:
    linear-gradient(rgba(16, 28, 79, 0.06) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, rgba(16, 28, 79, 0.05) 1px, transparent 1px) 0 0 / 25% 100%;
}

.route-path {
  stroke: rgba(16, 28, 79, 0.2);
}

.route-path.route-path-accent {
  stroke: var(--brand-orange);
}

.route-stop {
  fill: var(--brand-navy);
}

.route-stop.active {
  fill: var(--brand-orange);
}

.map-road {
  stroke: rgba(16, 28, 79, 0.16);
}

.chart-dot {
  fill: var(--bg-secondary);
}

.profit-bar-fill {
  background: linear-gradient(90deg, var(--brand-orange), #f0a071);
}

.profit-bar-fill.negative {
  background: linear-gradient(90deg, #c0392b, #e06455);
}

.funnel-stage::before {
  background: linear-gradient(90deg, rgba(231, 111, 60, 0.22), rgba(231, 111, 60, 0.06));
}

.ring-shell {
  background:
    radial-gradient(circle closest-side, var(--surface-strong) 66%, transparent 67% 100%),
    conic-gradient(var(--brand-orange) 0 268deg, rgba(16, 28, 79, 0.1) 268deg 360deg);
}

/* Remaining decorative glows still tinted with the retired green. */
.hero::after,
.hero-dashboard::before,
.stat-card::before,
.comparison-card::before,
.testimonial-card::before,
.metrics-card::before,
.feature-visual::after {
  background: radial-gradient(circle, rgba(231, 111, 60, 0.12), transparent 68%);
}

/* --- Buttons ------------------------------------------------------------ */

/* .nav-actions a and .menu-actions a are more specific than .button-primary,
   so they were bleeding a translucent navy over the orange fill. */
a.button.button-primary {
  color: var(--brand-night);
}

a.button.button-secondary,
a.button.button-ghost {
  color: var(--brand-navy);
}