/* ==========================================================================
   United Logistics USA Inc — site.css
   Plain static CSS. No build step. Edit directly.
   Palette: bg #121212 / surface #1A1A1A / accent #C8102E / text #FFF / dim #B3B3B3
   ========================================================================== */

:root {
  --bg: #121212;
  --surface: #1a1a1a;
  --surface-2: #202020;
  --line: #2e2e2e;
  --line-strong: #3d3d3d;
  --accent: #c8102e;
  --accent-hi: #e2233f;
  /* Lightened red reserved for small text so it clears WCAG AA on #121212.
     The solid #C8102E is used for fills, rules and buttons (white text on red = AA). */
  --accent-text: #ff7a8a;
  --text: #ffffff;
  --dim: #b3b3b3;

  --font-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --wrap: 1200px;
  --gut: 20px;
  --sec-y: 64px;
  --radius: 2px;
}

@media (min-width: 768px) {
  :root { --gut: 32px; --sec-y: 88px; }
}
@media (min-width: 1200px) {
  :root { --sec-y: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

@media (min-width: 768px) {
  h1 { font-size: 46px; }
  h2 { font-size: 36px; }
  h3 { font-size: 22px; }
}
@media (min-width: 1200px) {
  h1 { font-size: 54px; }
  h2 { font-size: 40px; }
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--text); text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.section { padding: var(--sec-y) 0; }
.section--surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; flex: 0 0 auto; width: 22px; height: 3px; background: var(--accent); }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

.lede { color: var(--dim); font-size: 17px; max-width: 62ch; }
.section-head { max-width: 720px; margin-bottom: 36px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff; padding: 12px 18px;
  font-weight: 700; text-decoration: none; border-radius: var(--radius);
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  text-align: center;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hi); }
.btn--ghost { background: transparent; color: #fff; border-color: var(--line-strong); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.04); }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,18,18,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
}
.header-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  min-height: 68px; padding-top: 10px; padding-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-name {
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.brand-sub {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
}
.brand-sub .brand-sub-dot { display: none; }
@media (min-width: 1180px) { .brand-sub .brand-sub-dot { display: inline; } }
@media (min-width: 420px) { .brand-name { font-size: 16px; } }
@media (min-width: 1180px) { .brand img { width: 46px; height: 46px; } .brand-name { font-size: 17px; } .brand { flex: 0 0 auto; } }

.nav { display: none; margin-left: auto; min-width: 0; }
.nav ul { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 10px 7px; text-decoration: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); border-bottom: 2px solid transparent;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }

}

.header-cta { display: none; }
@media (min-width: 1180px) {
  .nav, .header-cta { display: block; }
  .header-cta { flex: 0 0 auto; margin-left: 14px; }
  .header-cta .btn { padding: 10px 16px; font-size: 14px; min-height: 44px; }
}

.header-phone-mini {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 14px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-head); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius);
}
@media (min-width: 1180px) { .header-phone-mini { display: none; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: #fff; cursor: pointer; flex: 0 0 auto;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
@media (min-width: 1180px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none; border-top: 1px solid var(--line); background: var(--surface);
}
.mobile-nav.is-open { display: block; }
@media (min-width: 1180px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 16px; }
.mobile-nav a {
  display: block; padding: 14px var(--gut); text-decoration: none; color: #fff;
  font-family: var(--font-head); font-size: 16px; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a[aria-current="page"] { color: var(--accent); }

/* ---------- HERO (typographic) ----------
   NOTE: this hero is intentionally photo-free — see the HTML comment in index.html. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 40px 0 40px;
}
@media (min-width: 768px) { .hero { padding: 68px 0 60px; } }
@media (min-width: 1200px) { .hero { padding: 84px 0 72px; } }

/* Diagonal motion rules — pure CSS, no image */
.hero__rules {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.055) 0px,
      rgba(255,255,255,.055) 1px,
      transparent 1px,
      transparent 26px);
  mask-image: linear-gradient(100deg, transparent 0%, #000 42%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 42%, #000 88%, transparent 100%);
}
.hero__glowless {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035) 0%, transparent 38%),
    linear-gradient(255deg, rgba(200,16,46,.16) 0%, transparent 46%);
}
.hero__rule-accent {
  position: absolute; right: -10%; top: 0; bottom: 0; width: 46%;
  border-left: 1px solid rgba(200,16,46,.55);
  transform: skewX(-18deg);
  pointer-events: none;
}
.hero__rule-accent::after {
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0;
  border-left: 1px solid rgba(255,255,255,.08);
}
.hero .wrap { position: relative; z-index: 2; }

.hero__kicker {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--line-strong);
  padding: 8px 13px; border-radius: var(--radius); margin: 0 0 20px;
  max-width: 100%;
}
.hero__kicker b { color: #fff; font-weight: 700; }
.hero__kicker span { white-space: nowrap; }
.hero__kicker .dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: 0 0 auto; }

.hero h1 {
  font-size: 38px; line-height: 1.0; letter-spacing: .005em;
  font-weight: 700; margin: 0 0 16px; max-width: 15ch;
}
@media (min-width: 768px) { .hero h1 { font-size: 56px; } }
@media (min-width: 1200px) { .hero h1 { font-size: 66px; max-width: 17ch; } }
.hero h1 .line2 { display: block; }
.hero h1 .dot-accent { color: var(--accent); }

.hero__sub { color: var(--dim); font-size: 17px; max-width: 54ch; margin: 0 0 28px; }
@media (min-width: 768px) { .hero__sub { font-size: 19px; } }

.hero__cta { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .hero__cta { flex-direction: row; flex-wrap: wrap; } }
.hero__cta .btn { width: 100%; }
@media (min-width: 600px) { .hero__cta .btn { width: auto; } }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.hero__meta span { white-space: nowrap; }
.hero__meta b { color: #fff; font-weight: 600; }

/* Desktop: hero becomes two columns — copy left, operating detail right */
.hero__grid { display: block; }
@media (min-width: 1120px) {
  .hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 56px; align-items: end;
  }
  .hero__meta { display: none; }
}
.hero__panel { display: none; }
@media (min-width: 1120px) {
  .hero__panel {
    display: block; border: 1px solid var(--line-strong); background: rgba(26,26,26,.78);
    padding: 22px 22px 8px;
  }
  .hero__panel h2 {
    font-size: 12px; font-family: var(--font-body); font-weight: 700;
    letter-spacing: .18em; color: var(--dim); margin: 0 0 6px; text-transform: uppercase;
  }
  .hero__panel dl { margin: 0; }
  .hero__panel dt {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--dim); margin-top: 16px;
  }
  .hero__panel dd {
    margin: 4px 0 14px; font-family: var(--font-head); font-size: 17px;
    letter-spacing: .03em; text-transform: uppercase; color: #fff;
    padding-bottom: 14px; border-bottom: 1px solid var(--line);
  }
  .hero__panel dd:last-of-type { border-bottom: 0; }
}

/* Drop-in hook for a real fleet photo later.
   Add class "hero--photo" to <section class="hero"> and set --hero-photo below. */
.hero--photo {
  --hero-photo: url("../img/fleet-hero.jpg");       /* desktop 16:9 crop */
  --hero-photo-mobile: url("../img/fleet-hero-mobile.jpg"); /* mobile 4:5 crop */
  background-image:
    linear-gradient(90deg, rgba(18,18,18,.94) 0%, rgba(18,18,18,.72) 55%, rgba(18,18,18,.60) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
}
@media (max-width: 767px) {
  .hero--photo {
    background-image:
      linear-gradient(180deg, rgba(18,18,18,.80) 0%, rgba(18,18,18,.92) 100%),
      var(--hero-photo-mobile);
  }
}
.hero--photo .hero__rules, .hero--photo .hero__rule-accent, .hero--photo .hero__glowless { display: none; }

/* ---------- Page header (interior pages) ---------- */
.page-head {
  position: relative; overflow: hidden;
  padding: 44px 0 36px; border-bottom: 1px solid var(--line); background: var(--surface);
}
@media (min-width: 768px) { .page-head { padding: 66px 0 54px; } }
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px);
  mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { margin-bottom: 12px; }
.page-head p { color: var(--dim); max-width: 62ch; }

.breadcrumb {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 14px;
}
.breadcrumb a { color: var(--dim); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  padding: 20px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust-item h3 { font-size: 15px; margin: 0 0 6px; letter-spacing: .05em; }
.trust-item p { font-size: 14px; color: var(--dim); margin: 0; line-height: 1.5; }
.trust-item .ico { color: var(--accent); display: block; margin-bottom: 10px; }
.trust-item .ico svg { width: 22px; height: 22px; }

/* ---------- Compliance ---------- */
.badge-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--line); border-bottom: 0;
}
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .badge-grid { grid-template-columns: repeat(4, 1fr); } }
.badge {
  padding: 22px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
  border-right: 1px solid var(--line);
}
.badge:last-child { border-right: 0; }
@media (min-width: 640px) and (max-width: 1023px) {
  .badge:nth-child(2n) { border-right: 0; }
}
.badge .label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.badge .value {
  font-family: var(--font-head); font-size: 24px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
}
.badge .value--sm { font-size: 19px; }
.verify-link { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--dim); }
.verify-link:hover { color: #fff; }

/* ---------- Service cards ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--surface); padding: 26px 22px 24px;
  display: flex; flex-direction: column;
  transition: background-color .16s ease;
}
.card:hover { background: var(--surface-2); }
.card .num {
  font-family: var(--font-head); font-size: 12px; letter-spacing: .18em;
  color: var(--dim); margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.card .num::before { content: ""; width: 14px; height: 3px; background: var(--accent); }
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { font-size: 15px; color: var(--dim); line-height: 1.6; margin-bottom: 18px; }
.card .more {
  margin-top: auto; font-family: var(--font-head); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
}
.card .more span { color: var(--accent-text); transition: transform .16s ease; display: inline-block; }
.card:hover .more span { transform: translateX(4px); }

/* Mobile: show first 3 cards + "View all services" */
.cards-more { margin-top: 20px; }
@media (max-width: 699px) {
  .card-grid.is-collapsed .card:nth-child(n+4) { display: none; }
}
@media (min-width: 700px) { .cards-more { display: none; } }

/* ---------- CTA banner ---------- */
.cta-split { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 800px) { .cta-split { grid-template-columns: 1fr 1fr; } }
.cta-cell { background: var(--surface); padding: 30px 24px; }
.cta-cell--accent { background: #1d1214; border-left: 3px solid var(--accent); }
.cta-cell h3 { font-size: 22px; margin-bottom: 8px; }
.cta-cell p { color: var(--dim); font-size: 15px; margin-bottom: 20px; }
.cta-solo { background: #1d1214; border-top: 3px solid var(--accent); padding: 44px 32px; text-align: center; max-width: 620px; margin: 0 auto; }
.cta-solo h3 { font-size: 26px; margin-bottom: 10px; }
.cta-solo p { color: var(--dim); font-size: 16px; margin-bottom: 24px; }
.cta-solo .btn { min-width: 240px; }

/* ---------- Stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg); padding: 26px 20px; }
.stat .figure {
  font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1;
  letter-spacing: .01em; text-transform: uppercase; margin-bottom: 8px;
}
@media (min-width: 768px) { .stat .figure { font-size: 44px; } }
.stat .figure--sm { font-size: 26px; }
@media (min-width: 768px) { .stat .figure--sm { font-size: 32px; } }
.stat .caption { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* ---------- Services page sections ---------- */
.svc {
  padding: 44px 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: 84px;
}
@media (min-width: 768px) { .svc { padding: 64px 0; } }
.svc:nth-child(even) { background: var(--surface); }
.svc-inner { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 900px) { .svc-inner { grid-template-columns: 1fr 1fr; gap: 52px; } }
.svc h2 { font-size: 26px; }
@media (min-width: 768px) { .svc h2 { font-size: 34px; } }
.svc .svc-body { color: var(--dim); }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.svc-list li {
  padding: 13px 0 13px 26px; border-bottom: 1px solid var(--line);
  position: relative; font-size: 15px;
}
.svc-list li::before {
  content: ""; position: absolute; left: 2px; top: 21px;
  width: 10px; height: 2px; background: var(--accent);
}
.svc-figure {
  border: 1px solid var(--line); background: var(--bg);
  min-height: 128px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 16px;
}
.svc-figure::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(135deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 85%);
}
.svc-figure .fig-label {
  position: relative; font-family: var(--font-head); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.svc-figure .fig-num {
  position: absolute; right: 16px; top: 4px;
  font-family: var(--font-head); font-size: 58px; font-weight: 600;
  color: rgba(255,255,255,.07); line-height: 1;
}

/* Services page anchor nav */
.svc-nav { border-top: 1px solid var(--line); background: var(--bg); }
.svc-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
}
@media (min-width: 1024px) { .svc-nav ul { mask-image: none; -webkit-mask-image: none; } }
.svc-nav li { flex: 0 0 auto; }
.svc-nav a {
  display: block; padding: 14px 16px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-head); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); border-right: 1px solid var(--line);
}
.svc-nav li:first-child a { padding-left: 0; }
.svc-nav a:hover { color: #fff; }

/* ---------- Prose / about ---------- */
.prose { max-width: 70ch; }
.prose p { color: var(--dim); }
.prose h2 { margin-top: 8px; }
.split { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: 1.3fr .7fr; gap: 56px; } }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 24px; }
.panel h3 { font-size: 17px; margin-bottom: 12px; }
.panel dl { margin: 0; }
.panel dt { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-top: 16px; }
.panel dt:first-child { margin-top: 0; }
.panel dd { margin: 4px 0 0; font-size: 16px; }
.panel dd a { color: #fff; }

.value-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 800px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
/* About page: the mission cells stack in the narrow left column beside the
   Company Record panel, so they must stay single-column at every width. */
.value-grid--stack { grid-template-columns: 1fr !important; }
.about-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.about-summary { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 32px; }
.about-summary p { max-width: 78ch; margin: 0; color: var(--dim); font-size: 17px; line-height: 1.7; }
.value-cell { background: var(--surface); padding: 26px 22px; }
.value-cell h3 { font-size: 18px; margin-bottom: 10px; }
.value-cell p { color: var(--dim); font-size: 15px; margin: 0; }

/* ---------- Forms ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 960px) { .form-layout { grid-template-columns: 1.4fr .6fr; gap: 48px; align-items: start; } }

.notice {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  background: var(--surface); padding: 18px 20px; margin-bottom: 28px;
}
.notice p { font-size: 15px; color: var(--dim); margin: 0; }
.notice strong { color: #fff; }

.form { background: var(--surface); border: 1px solid var(--line); padding: 22px; }
@media (min-width: 768px) { .form { padding: 30px; } }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.field .req { color: var(--accent-text); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--bg); color: #fff; font-family: var(--font-body); font-size: 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, #b3b3b3 50%), linear-gradient(135deg, #b3b3b3 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid #fff; outline-offset: 1px; border-color: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: #6d6d6d; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 13px; color: var(--dim); margin-top: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success {
  display: none; border: 1px solid var(--accent); background: #1d1214;
  padding: 24px; text-align: left;
}
.form-success.is-visible { display: block; }
.form-success h3 { font-size: 20px; margin-bottom: 8px; }
.form-success p { color: var(--dim); font-size: 15px; margin: 0; }

.form-error {
  display: none; border: 1px solid var(--line-strong); background: var(--surface);
  padding: 24px; text-align: left; margin-bottom: 18px;
}
.form-error.is-visible { display: block; }
.form-error h3 { font-size: 18px; margin-bottom: 8px; }
.form-error p { color: var(--dim); font-size: 15px; margin: 0; }

/* ---------- Map / contact ---------- */
.map-embed { border: 1px solid var(--line); background: var(--surface); line-height: 0; }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }
@media (min-width: 768px) { .map-embed iframe { height: 400px; } }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* Six cells since Aug 2026: phone, two routed emails, terminal address,
   mailing address, dispatch hours. Lays out 2x3 on tablet and 3x2 on desktop --
   keep the count a multiple of 2 and 3 so no orphan cell is left on a row. */
@media (min-width: 700px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.45; }
.contact-cell { background: var(--surface); padding: 24px 22px; }
.contact-cell .label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.contact-cell .val { font-family: var(--font-head); font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }
.contact-cell a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--accent); }
.contact-cell address { font-style: normal; font-family: var(--font-head); font-size: 19px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }

/* ---------- Service area / map figure ---------- */
.area-figure { border: 1px solid var(--line); background: var(--surface); padding: 10px; }
.area-figure img { width: 100%; }
.area-caption { font-size: 14px; color: var(--dim); margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 44px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr .8fr 1.4fr; gap: 40px; } }
.footer-brand img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; }
.footer-tagline { font-family: var(--font-head); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-contact { list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--dim); }
.footer-contact li { margin-bottom: 10px; line-height: 1.5; }
.footer-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(200,16,46,.8); }
.footer-contact a:hover { border-bottom-color: #fff; }
.footer-h {
  font-family: var(--font-head); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-strong);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: var(--dim); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  margin-top: 36px; border-top: 1px solid var(--line); padding: 18px 0 24px;
  font-size: 13px; color: var(--dim); line-height: 1.6;
}

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-strong);
  border-top: 1px solid var(--line-strong);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; text-decoration: none;
  font-family: var(--font-head); font-size: 15px; letter-spacing: .07em; text-transform: uppercase;
}
.callbar .call { background: var(--accent); color: #fff; }
.callbar .quote { background: #1a1a1a; color: #fff; }
.callbar svg { width: 17px; height: 17px; }
@media (min-width: 768px) { .callbar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 56px; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Mobile type floor — the brief requires body copy at 16px minimum on phones.
   Micro-labels (uppercase eyebrows, field labels, meta) stay smaller by design
   but never go below 12px.
   ========================================================================== */
.brand-sub { font-size: 11px; }
.hero__kicker,
.badge .label,
.contact-cell .label,
.panel dt { font-size: 12px; }

@media (max-width: 767px) {
  .trust-item p,
  .card p,
  .cta-cell p,
  .svc-list li,
  .value-cell p,
  .lede,
  .page-head p,
  .notice p,
  .area-caption,
  .footer-contact,
  .footer-links a,
  .form-note,
  .footer-bottom,
  .breadcrumb,
  .verify-link,
  .form-success p { font-size: 16px; }
  .footer-bottom { line-height: 1.7; }
  .stat .caption,
  .trust-item h3 { font-size: 14px; }
}

/* Narrow phones: break the hero kicker so the location sits on its own line
   and the two authority numbers stay together on the next. */
@media (max-width: 430px) {
  .hero__kicker { row-gap: 6px; }
  .hero__kicker .loc { flex: 0 0 100%; }
}
.hero__kicker .loc { display: inline-flex; align-items: center; gap: 10px; }

/* ==========================================================================
   ZONES & RATES  (zones-and-rates.html)
   Added Aug 2026 alongside the drayage flyer alignment. The zone table is the
   canonical listing; the SVG map is progressive enhancement drawn by zones.js.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* footer email routing tags ------------------------------------------------ */
.footer-email-tag {
  display: inline-block; margin-left: 6px; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-strong);
  padding: 1px 5px; vertical-align: 2px; white-space: nowrap;
}

/* federal authority strip -------------------------------------------------- */
.authority-strip { background: var(--surface); border-bottom: 1px solid var(--line); padding: 28px 0; }
.authority-box { border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); padding: 20px 22px; background: var(--bg); }
.authority-label {
  font-family: var(--font-head); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-text); margin: 0 0 12px;
}
.authority-items { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.authority-items span {
  font-size: 15px; color: #fff; letter-spacing: .02em; white-space: nowrap;
}
.authority-items b {
  display: block; font-family: var(--font-head); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 2px;
}
.authority-note { margin: 14px 0 0; font-size: 14px; color: var(--dim); max-width: 70ch; }

/* ZIP lookup --------------------------------------------------------------- */
.zip-tool {
  background: var(--surface); border: 1px solid var(--line); padding: 22px;
  margin-bottom: 32px; max-width: 560px;
}
.zip-tool label {
  display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 10px;
}
.zip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.zip-row input {
  flex: 1 1 160px; min-width: 0; background: var(--bg); border: 1px solid var(--line-strong);
  color: #fff; font-family: var(--font-body); font-size: 17px; padding: 12px 14px;
  border-radius: var(--radius); letter-spacing: .08em;
}
.zip-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.zip-row .btn { flex: 0 0 auto; }
.zip-result { margin: 14px 0 0; font-size: 15px; color: var(--dim); min-height: 1.5em; }
.zip-result--ok { color: #fff; }
.zip-result--ok::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.zip-result--warn { color: var(--accent-text); }

/* map + detail panel ------------------------------------------------------- */
.zonemap-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) { .zonemap-layout { grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 32px; } }

.zonemap-figure { margin: 0; }
.zonemap-holder {
  background: var(--surface); border: 1px solid var(--line); padding: 10px;
  min-height: 220px; display: flex; align-items: center; justify-content: center;
}
.zonemap-svg { width: 100%; height: auto; display: block; }
.zonemap-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--dim); }
.zonemap-loading { margin: 0; font-size: 14px; color: var(--dim); text-align: center; padding: 40px 16px; }
.zonemap-loading--error { color: var(--accent-text); }

/* Zone map — drawn to match the printed promotional flyer map: land and state
   lines beneath translucent zone fills, city and state labels, numbered zone
   badges, a star on our Linden terminal, a key and a 50-mile scale bar. */
.zonemap-holder { background: #0A1116; }
.zm-water { fill: #0A1116; }
.zm-state { fill: #242424; stroke: #6E6E6E; stroke-width: 1.4; stroke-opacity: .75; }

.zone-path {
  stroke-width: 1.9; fill-opacity: .44; cursor: pointer;
  transition: fill-opacity .14s ease, stroke .14s ease;
}
.zone-path.is-hover { fill-opacity: .72; stroke: #fff; stroke-width: 2.4; }
.zone-path.is-selected { fill-opacity: .86; stroke: #fff; stroke-width: 3.2; }
.zone-path:focus { outline: none; fill-opacity: .86; stroke: #fff; stroke-width: 3.2; }
@media (prefers-reduced-motion: reduce) { .zone-path { transition: none; } }

.zm-furniture { pointer-events: none; }
.zm-furniture text { font-family: var(--font-head); dominant-baseline: middle; }
.zm-statelabel { fill: #7C7C7C; font-size: 21px; font-weight: 600; letter-spacing: .06em; }
.zm-citydot { fill: #B3B3B3; stroke: #0B0B0B; stroke-width: 1.1; }
.zm-citydot.is-major { fill: #fff; }
.zm-city { fill: #C9C9C9; font-size: 20px; }
.zm-city.is-major { fill: #fff; font-size: 22px; font-weight: 600; letter-spacing: .04em; }
.zm-badge-disc { stroke: #fff; stroke-width: 2; }
.zm-badge-text { fill: #0B0B0B; font-size: 19px; font-weight: 700; }
.zm-star { fill: #fff; stroke: var(--accent); stroke-width: 2.4; }
.zm-hublabel { fill: #fff; font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.zm-hubsub { fill: #8A8A8A; font-size: 18px; }
.zm-scale path { stroke: #B3B3B3; stroke-width: 2.4; fill: none; }
.zm-scaletext { fill: #B3B3B3; font-size: 18px; }
.zm-keybox { fill: #0B0B0B; fill-opacity: .92; stroke: #3A3A3A; stroke-width: 1.2; }
.zm-keyline { stroke: #6E6E6E; stroke-width: 2.4; }
.zm-keytext { fill: #B3B3B3; font-size: 18px; }

/* On narrow screens the map is a third of its desktop width, so the smaller
   labels would render at a few pixels. Keep the majors, drop the rest. */
@media (max-width: 899px) {
  .zm-city:not(.is-major), .zm-statelabel, .zm-scale, .zm-key { display: none; }
  .zm-city.is-major { font-size: 34px; }
  .zm-hublabel { font-size: 32px; }
  .zm-hubsub { display: none; }
  .zm-badge-text { font-size: 27px; }
  .zm-badge-disc { r: 24px; }
}

.zonemap-panel { background: var(--surface); border: 1px solid var(--line); padding: 22px; }
.zonemap-panel-empty { margin: 0; font-size: 14px; color: var(--dim); }
.zp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.zp-chip { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); }
.zp-id { font-family: var(--font-head); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.zp-name { font-size: 20px; margin: 0 0 8px; }
.zp-detail { font-size: 14px; color: var(--dim); margin: 0 0 16px; }
.zp-meta { margin: 0 0 18px; font-size: 14px; }
.zp-meta dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.zp-meta dd { margin: 0 0 12px; color: #fff; }
.zp-cta { margin: 0 0 12px; }
.zp-note { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.5; }

/* rate + accessorial tables ------------------------------------------------ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.rate-table { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--bg); }
.rate-table thead th {
  background: var(--surface-2); font-family: var(--font-head); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.rate-table tbody th, .rate-table tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; text-align: left;
}
.rate-table tbody tr:last-child th, .rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table tbody th {
  font-family: var(--font-head); font-weight: 500; font-size: 14px; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.rate-table tbody tr { transition: background .12s ease; }
.rate-table tbody tr.is-hover { background: var(--surface); }
.rate-table tbody tr.is-selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.rate-table tbody tr[data-zone-row] { cursor: pointer; }
.rate-table tbody tr:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .rate-table tbody tr { transition: none; } }

.zone-chip {
  display: inline-block; width: 12px; height: 12px; margin-right: 9px;
  border: 1px solid rgba(255,255,255,.35); vertical-align: 0;
}
.zone-name { color: #fff; }
.zone-detail { color: var(--dim); }
.zone-rate { white-space: nowrap; }
.zone-rate { font-family: var(--font-head); font-size: 16px; color: #fff; letter-spacing: .04em; }

/* On narrow screens the Covers column pushes the price off-screen inside
   .table-scroll. The price is the reason people read this table, so drop Covers
   below 700px -- the ZIP tool and the map above already answer "am I in it?". */
@media (max-width: 700px) {
  .rate-table--zones { min-width: 0; }
  .rate-table--zones thead th:nth-child(3),
  .rate-table--zones tbody td.zone-detail { display: none; }
}
/* A quoted range needs about twice the width of a single figure, so on small phones the
   cells tighten up until Zone / Area / Rate fit without any sideways scrolling. Ranges
   stay nowrap: "$1,895 – $2,195" breaking across two lines reads as two prices. */
@media (max-width: 480px) {
  .rate-table--zones thead th { padding: 11px 9px; letter-spacing: .1em; }
  .rate-table--zones tbody th, .rate-table--zones tbody td { padding: 13px 9px; }
  .rate-table--zones tbody th { font-size: 13px; letter-spacing: .03em; }
  .rate-table--zones .zone-name { font-size: 14px; }
  .rate-table--zones .zone-rate { font-size: 14px; letter-spacing: .01em; }
  .rate-table--zones .zone-chip { width: 10px; height: 10px; margin-right: 6px; }
}
/* 320px-class phones: one more notch so the price still lands on screen. */
@media (max-width: 359px) {
  .rate-table--zones thead th { padding: 10px 5px; letter-spacing: .06em; }
  .rate-table--zones tbody th, .rate-table--zones tbody td { padding: 12px 5px; font-size: 13px; }
  .rate-table--zones tbody th { font-size: 12px; }
  .rate-table--zones .zone-name, .rate-table--zones .zone-rate { font-size: 13px; }
}
.rate-tbd { color: var(--accent-text); font-size: 14px; }
.acc-amt { font-family: var(--font-head); font-size: 16px; color: #fff; letter-spacing: .04em; white-space: nowrap; }
.acc-note { color: var(--dim); }
.rate-effective { margin: 18px 0 0; font-size: 13px; color: var(--dim); }

@media (max-width: 520px) {
  .authority-items { gap: 12px 20px; }
  .zonemap-holder { padding: 6px; }
}

/* ==========================================================================
   Footer address labels (two addresses since Aug 2026: terminal + mailing)
   ========================================================================== */
.footer-addr { line-height: 1.5; }
.footer-addr-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 3px;
}

/* Operating-authority block as it appears on the About page (moved off the
   zones page). .authority-box itself is defined further up. */
.authority-box--about { margin-top: 48px; }

/* ==========================================================================
   Rate Calculator promo — top of zones-and-rates.html
   ========================================================================== */
.calc-promo { padding: 0 0 8px; }
.calc-promo-link {
  display: block;
  padding: 30px 34px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  text-decoration: none;
  color: inherit;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.calc-promo-link:hover,
.calc-promo-link:focus-visible {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateX(2px);
}
.calc-promo-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.calc-promo-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1.03;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.calc-promo-arrow {
  display: inline-block;
  margin-left: .35em;
  color: var(--accent);
  transition: transform .18s ease;
}
.calc-promo-link:hover .calc-promo-arrow { transform: translateX(6px); }
.calc-promo-sub {
  display: block;
  margin-top: 10px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--dim);
}

/* ==========================================================================
   Rate Calculator page
   ========================================================================== */
.draft-banner {
  margin-bottom: 40px;
  padding: 20px 24px;
  background: rgba(200, 16, 46, .09);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
}
.draft-banner-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.draft-banner p:last-child { margin: 0; font-size: 15px; line-height: 1.6; color: #fff; }
.draft-banner a { color: #fff; }

.calc-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1000px) {
  .calc-layout { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 48px; }
  .calc-out { position: sticky; top: 96px; }
}

.calc-form { min-width: 0; }
.calc-step {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 26px 24px 28px;
  margin: 0 0 24px;
}
.calc-step legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  margin-left: -10px;
  font-family: var(--font-head);
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.calc-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: 0 0 26px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
}
.calc-row { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 620px) { .calc-row { grid-template-columns: 1fr 1fr; gap: 24px; } }

.calc-field { min-width: 0; margin-top: 18px; }
.calc-field:first-child, .calc-row .calc-field { margin-top: 0; }
.calc-field--narrow { max-width: 220px; }
.calc-field label,
.calc-label-static {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 9px;
}
.calc-field input[type="text"],
.calc-field input[type="number"],
.calc-field select {
  width: 100%;
  padding: 13px 14px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
}
.calc-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.calc-field input:focus-visible,
.calc-field select:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 1px;
  border-color: var(--accent);
}
.calc-help { margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--dim); min-height: 1.2em; }
.calc-help--ok { color: #6ede8a; }
.calc-help--warn { color: #ffc46b; }

.calc-reset-row { margin: 4px 0 0; }

/* ---- estimate output panel ---- */
.calc-out { background: var(--surface); border: 1px solid var(--line-strong); padding: 26px 24px 24px; min-width: 0; }
.calc-out-h {
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.calc-total-wrap { margin-bottom: 22px; }
.calc-total-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.calc-total {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(38px, 8vw, 52px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--accent-text);
}
/* A quoted range ("$2,145 – $2,850") is about twice as wide as a single figure, so it
   steps down one size and is allowed to break across two lines on narrow screens. */
.calc-total--range { font-size: clamp(27px, 5.6vw, 40px); word-spacing: -.02em; }

.calc-total-note { display: block; font-size: 13px; line-height: 1.45; color: var(--dim); }

.calc-lines { list-style: none; margin: 0 0 22px; padding: 0; }
.calc-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.calc-line:first-child { border-top: 1px solid var(--line); }
.calc-line-label { min-width: 0; }
.calc-line-name { display: block; font-size: 14.5px; line-height: 1.4; color: #fff; }
.calc-line-sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--dim); }
.calc-line-amt { font-family: var(--font-head); font-size: 16px; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.calc-line--base .calc-line-amt { color: var(--accent-text); }

.calc-out-actions { display: grid; gap: 10px; }
.calc-disclaimer { margin: 20px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); }
.calc-disclaimer strong { color: #fff; }

/* ==========================================================================
   Rate calculator — step 2 questionnaire (replaced the accessorial checklist)
   ========================================================================== */
.yn-block { margin-top: 22px; border: 1px solid var(--line); }
.yn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
}
.yn-row + .yn-row { border-top: 1px solid var(--line); }
.yn-q { min-width: 0; }
.yn-label { display: block; font-size: 16px; color: #fff; }
.yn-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--dim); }

/* Two-button segmented control. The input covers its label so the whole pill is
   the hit target; it stays a real radio for keyboard and screen-reader use. */
.yn-opts { display: flex; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.yn-opt { position: relative; }
.yn-opt + .yn-opt { border-left: 1px solid var(--line-strong); }
.yn-opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.yn-opt span {
  display: block;
  min-width: 62px;
  padding: 10px 16px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--surface);
  transition: background .15s ease, color .15s ease;
}
.yn-opt input:checked + span { background: var(--accent); color: #fff; }
.yn-opt input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.yn-opt input:not(:checked):hover + span { color: #fff; }

/* Charges we deliberately do not estimate. */
.calc-excl { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.calc-excl-h {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.calc-excl ul { margin: 0; padding-left: 18px; list-style: none; }
.calc-excl li {
  position: relative;
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #fff;
}
.calc-excl li::before {
  content: "";
  position: absolute;
  left: -14px; top: .62em;
  width: 5px; height: 1px;
  background: var(--accent);
}
.calc-excl-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); }

/* ==========================================================================
   Quote modal — opens over the calculator so entries are never lost
   ========================================================================== */
.qmodal {
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  width: min(680px, calc(100vw - 32px));
  max-height: min(94vh, 960px);
  overflow: auto;
  overscroll-behavior: contain;
}
.qmodal::backdrop { background: rgba(0, 0, 0, .72); }
.qmodal:not([open]) { display: none; }
body.has-modal { overflow: hidden; }

.qmodal-inner { position: relative; padding: 26px 22px 24px; }
@media (min-width: 700px) { .qmodal-inner { padding: 28px 30px 26px; } }

.qmodal-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.qmodal-x:hover { color: #fff; border-color: var(--accent); }
.qmodal-x:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.qmodal-h {
  margin: 0 44px 8px 0;
  font-family: var(--font-head);
  font-size: clamp(24px, 4vw, 30px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.qmodal-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--dim); }

/* Read-only recap of what the calculator will send along. */
.qmodal-recap {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.qmodal-recap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 16px;
}
.qmodal-recap-row + .qmodal-recap-row { border-top: 1px solid var(--line); }

/* Two recap columns on wider screens so the Send button stays above the fold
   on a laptop without the customer having to scroll the dialog. */
@media (min-width: 620px) {
  .qmodal-recap { display: grid; grid-template-columns: 1fr 1fr; }
  .qmodal-recap-row + .qmodal-recap-row { border-top: 0; }
  .qmodal-recap-row { border-top: 1px solid var(--line); }
  .qmodal-recap-row:nth-child(odd) { border-right: 1px solid var(--line); }
  .qmodal-recap-row:nth-child(1),
  .qmodal-recap-row:nth-child(2) { border-top: 0; }
  .qmodal-recap-row:first-child { grid-column: 1 / -1; border-right: 0; }
  .qmodal-recap-row:nth-child(2) { border-top: 1px solid var(--line); }
  .qmodal-recap-row:nth-child(3) { border-top: 1px solid var(--line); }
}
.qmodal-recap-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.qmodal-recap-v { font-size: 14.5px; color: #fff; text-align: right; }
.qmodal-recap-row:first-child .qmodal-recap-v {
  font-family: var(--font-head);
  font-size: 20px;
  letter-spacing: .02em;
  color: var(--accent-text);
}
.qmodal-recap-empty { margin: 0; padding: 16px; font-size: 14px; line-height: 1.6; color: var(--dim); }

.qmodal .form { border: 0; background: transparent; padding: 0; }
.qmodal .field { margin-bottom: 12px; }
.qmodal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
.qmodal-actions .btn { flex: 1 1 auto; }

/* On short screens the dialog scrolls. Pin the actions to the bottom of it so
   Send is always reachable without the customer discovering the scroll first. */
@media (max-height: 860px) {
  .qmodal-actions {
    position: sticky;
    bottom: 0;
    margin: 0 -22px -24px;
    padding: 12px 22px;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
}
@media (min-width: 700px) and (max-height: 860px) {
  .qmodal-actions { margin: 0 -30px -26px; padding: 14px 30px; }
}

/* ============================================================ TRACK A CONTAINER
   Added Aug 2026. Uses only existing tokens -- no new colours are introduced, so
   the page cannot drift away from the rest of the dark theme.
   Status tone is carried by --tone-* variables set per state, which keeps the
   badge, the left rule and the alert accents in agreement automatically. */

/* Tracking entry point. This deliberately does NOT live in the header: measured at
   1180-1440px, the brand + seven nav items + phone button exactly fill the 1200px
   header container, so any extra control there clips the nav. Tracking is reached
   from the home hero, the mobile menu and the footer instead. */
.btn--with-icon { display: inline-flex; align-items: center; gap: 8px; }
.btn--with-icon svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Header tracking button. It fits because Rate Calculator and About came out of the
   nav: five items need about 470px of the roughly 550px the row can spare once both
   buttons are placed. Styled as an outline so the phone number stays the one solid
   red call to action in the header. */
.btn--track {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #fff; border-color: var(--line-strong);
  padding: 10px 14px;
}
.btn--track:hover { border-color: #fff; background: rgba(255,255,255,.05); }
.btn--track[aria-current="page"] { border-color: var(--accent); color: #fff; }
.btn--track svg { width: 16px; height: 16px; flex: 0 0 auto; }
@media (min-width: 1180px) {
  .header-cta { display: flex; align-items: center; gap: 10px; }
}

/* Preview-only sample-data notice. Amber rather than the brand red so it reads as
   an advisory about the build, not an alert about the container. */
.track-preview-note {
  background: #2a1f07; border-bottom: 1px solid #6b5010; color: #f0d488;
  font-size: 14px; line-height: 1.5; padding: 12px 0;
}
.track-preview-note strong { color: #ffd75e; }

/* ---------------------------------------------------------------- track hero */
.track-hero {
  padding: 40px 0 32px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .track-hero { padding: 56px 0 44px; } }
.track-hero h1 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; font-size: 30px; line-height: 1.08; margin: 10px 0 12px;
}
@media (min-width: 768px) { .track-hero h1 { font-size: 42px; } }
.track-hero__lede { color: var(--dim); max-width: 62ch; margin: 0 0 26px; font-size: 15px; }
@media (min-width: 768px) { .track-hero__lede { font-size: 16px; } }

.track-form { max-width: 620px; }
.track-form__label {
  display: block; font-family: var(--font-head); font-size: 13px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: 8px;
}
.track-form__row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .track-form__row { flex-direction: row; } }
.track-form__input {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg); color: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; min-height: 52px;
  font-family: var(--font-head); font-size: 20px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.track-form__input::placeholder { color: #6b6b6b; letter-spacing: .12em; }
.track-form__input:focus-visible {
  outline: 2px solid var(--accent-hi); outline-offset: 2px; border-color: var(--accent-hi);
}
.track-form__input[aria-invalid="true"] { border-color: var(--accent); }
.track-form__btn { flex: 0 0 auto; min-height: 52px; padding: 12px 34px; }
.track-form__hint { color: var(--dim); font-size: 13px; margin: 10px 0 0; }
.track-form__error {
  color: var(--accent-text); font-size: 14px; font-weight: 500; margin: 10px 0 0;
  display: flex; gap: 8px;
}
.track-form__error::before { content: "!"; font-weight: 700; }
/* These blocks all set an explicit display, which outranks the browser's own
   [hidden] rule -- without this the empty error line showed a bare "!" on load. */
.track-form__error[hidden], .track-alerts[hidden], .track-holds[hidden],
.track-dates[hidden], .track-details[hidden], .track-row[hidden] { display: none; }

/* Last row of an odd-numbered two-column grid, stretched so there is no dead tile. */
.track-row--wide { grid-column: 1 / -1; }

.track-results-section { padding-top: 36px; }
@media (min-width: 768px) { .track-results-section { padding-top: 52px; } }

/* ------------------------------------------------------------- idle guidance */
.track-idle__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .track-idle__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.track-idle__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.track-idle__h {
  font-family: var(--font-head); font-size: 16px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; margin: 0 0 14px;
}
.track-idle__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.track-idle__list li {
  position: relative; padding-left: 20px; color: #e6e6e6; font-size: 14.5px; line-height: 1.5;
}
.track-idle__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 3px; background: var(--accent);
}
.track-idle__list--muted li { color: var(--dim); }
.track-idle__list--muted li::before { background: var(--line-strong); }
.track-idle__note { color: var(--dim); font-size: 13.5px; margin: 16px 0 0; }

/* ------------------------------------------------------------- result card */
.track-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--tone-line, var(--line-strong));
  border-radius: var(--radius); padding: 22px;
}
@media (min-width: 768px) { .track-card { padding: 30px 32px; } }

.track-card__head {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) {
  .track-card__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 20px; }
}
.track-card__eyebrow {
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 4px;
}
.track-card__no {
  font-family: var(--font-head); font-size: 26px; font-weight: 700;
  letter-spacing: .06em; margin: 0; word-break: break-all;
}
@media (min-width: 768px) { .track-card__no { font-size: 32px; } }

.track-card__detail {
  margin: -4px 0 0; color: var(--dim);
  font-size: 15.5px; line-height: 1.6; max-width: 62ch;
}

/* Status badge. Tone drives the card's left rule too, via --tone-line. */
.track-status {
  /* Neutral defaults so an unrecognised tone still renders a legible badge rather
     than a transparent border and inherited text colour. */
  --tone-line: var(--line-strong); --tone-bg: rgba(255,255,255,.05); --tone-fg: #e6e6e6;
  flex: 0 0 auto; align-self: flex-start;
  display: inline-block; padding: 8px 14px;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--tone-line); border-radius: var(--radius);
  background: var(--tone-bg); color: var(--tone-fg);
}
.track-status__sub {
  margin: .35rem 0 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7ee2a4;
}
.track-status--good { --tone-line: #2f7d4f; --tone-bg: rgba(47,125,79,.16); --tone-fg: #7ee2a4; }
.track-status--warn { --tone-line: #9a6d16; --tone-bg: rgba(154,109,22,.16); --tone-fg: #f2c15c; }
.track-status--bad  { --tone-line: var(--accent); --tone-bg: rgba(200,16,46,.16); --tone-fg: var(--accent-text); }
.track-status--done { --tone-line: var(--line-strong); --tone-bg: rgba(255,255,255,.05); --tone-fg: var(--dim); }
.track-status--neutral,
.track-status--info { --tone-line: var(--line-strong); --tone-bg: rgba(255,255,255,.05); --tone-fg: #e6e6e6; }
.track-card:has(.track-status--good) { --tone-line: #2f7d4f; }
.track-card:has(.track-status--warn) { --tone-line: #9a6d16; }
.track-card:has(.track-status--bad)  { --tone-line: var(--accent); }

/* --------------------------------------------------------------- alerts */
.track-alerts { display: grid; gap: 10px; margin-top: 18px; }
.track-alert {
  display: grid; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  background: var(--surface-2); border-radius: var(--radius);
}
.track-alert--bad  { border-left-color: var(--accent); }
.track-alert--warn { border-left-color: #9a6d16; }
.track-alert--good { border-left-color: #2f7d4f; }
.track-alert--info { border-left-color: var(--line-strong); }
.track-alert__title {
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.track-alert__detail { color: var(--dim); font-size: 14px; line-height: 1.5; }

/* ---------------------------------------------------------------- holds */
.track-sub-h {
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.track-holds__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.track-hold {
  /* Red by default. A hold filed before the vessel discharges is amber instead, so
     the chip matches the status badge rather than shouting louder than it. */
  --hold-line: rgba(200,16,46,.3); --hold-bg: rgba(200,16,46,.09);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 11px 14px; background: var(--hold-bg);
  border: 1px solid var(--hold-line); border-radius: var(--radius);
}
.track-holds__list--pre .track-hold { --hold-line: rgba(154,109,22,.45); --hold-bg: rgba(154,109,22,.12); }
.track-hold__type {
  font-family: var(--font-head); font-size: 15px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.track-hold__when { color: var(--dim); font-size: 13.5px; }
.track-holds__note { color: var(--dim); font-size: 13.5px; line-height: 1.55; margin: 12px 0 0; }

/* -------------------------------------------------------- dates + details */
.track-dates, .track-details { margin: 0; display: grid; gap: 1px; background: var(--line); }
@media (min-width: 620px) {
  .track-dates, .track-details { grid-template-columns: 1fr 1fr; }
}
.track-row {
  background: var(--surface-2); padding: 13px 16px;
  display: grid; gap: 3px;
}
.track-row__k {
  font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.track-row__v {
  margin: 0; font-size: 15.5px; font-weight: 500; color: #fff;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
/* "estimated" must be visible, not a tooltip: roughly a quarter of containers have
   no confirmed last free day and nobody should plan money against a guess. */
.track-row__note {
  font-family: var(--font-head); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #f2c15c; border: 1px solid rgba(242,193,92,.4);
  padding: 2px 7px; border-radius: var(--radius);
}
.track-empty-note { color: var(--dim); font-size: 14px; margin: 0; padding: 13px 16px; background: var(--surface-2); }
.track-updated { color: var(--dim); font-size: 13px; margin: 20px 0 0; }

.track-passthrough {
  margin-top: 26px; padding-top: 4px;
}
.track-passthrough p { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0; max-width: 68ch; }

/* ------------------------------------------------------------- documents */
/* Deliberately quiet, and placed after the answer: most visitors want a status, not
   paperwork. The bill of lading field is uppercased on input because that is how the
   number is printed, and a 44px tap target keeps the download usable on a phone in a
   yard. */
.track-docs { margin-top: 28px; padding-top: 4px; }
.track-docs__p { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.track-docs__form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
@media (min-width: 560px) { .track-docs__form { flex-direction: row; } }
.track-docs__input {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg); color: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 12px 14px; min-height: 48px;
  font-family: var(--font-body); font-size: 15px;
  text-transform: uppercase; letter-spacing: .04em;
}
.track-docs__input::placeholder { color: #6b6b6b; text-transform: none; letter-spacing: normal; }
.track-docs__input:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.track-docs__btn { flex: 0 0 auto; }
.track-docs__msg { font-size: 14px; line-height: 1.55; margin: 12px 0 0; max-width: 62ch; }
.track-docs__msg.is-ok { color: #7ee2a4; }
.track-docs__msg.is-bad { color: var(--accent-text); }
.track-docs__list { list-style: none; margin: 14px 0 0; padding: 0; max-width: 520px; }
.track-docs__item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px;
}
.track-docs__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.track-docs__name { font-size: 14px; line-height: 1.4; }
.track-docs__filed { color: var(--dim); font-size: 12px; line-height: 1.3; }

/* Who filed the document. Quiet by design -- it is provenance, not a headline. */
.track-docs__tag {
  align-self: flex-start;
  padding: .1rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--dim);
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.track-docs__item--all { border-color: var(--accent); background: var(--surface-2); }
.track-docs__dl--all { background: var(--accent); border-color: var(--accent); color: #fff; }
.track-docs__dl--all:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.track-docs__dl {
  flex: 0 0 auto; background: none; color: var(--accent-text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-head); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 14px; min-height: 44px; cursor: pointer;
}
.track-docs__dl:hover { border-color: var(--accent-hi); color: #fff; }
.track-docs__dl:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.track-docs__dl[disabled] { opacity: .6; cursor: default; }

/* ------------------------------------------------------------- subscribe */
.track-subscribe { margin-top: 28px; padding-top: 4px; }
.track-subscribe__p { color: var(--dim); font-size: 14px; line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.track-subscribe__form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
@media (min-width: 560px) { .track-subscribe__form { flex-direction: row; } }
.track-subscribe__input {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg); color: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 12px 14px; min-height: 48px;
  font-family: var(--font-body); font-size: 15px;
}
.track-subscribe__input::placeholder { color: #6b6b6b; }
.track-subscribe__input:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.track-subscribe__btn { flex: 0 0 auto; }
.track-subscribe__msg { font-size: 14px; line-height: 1.55; margin: 12px 0 0; max-width: 62ch; }
.track-subscribe__msg.is-ok { color: #7ee2a4; }
.track-subscribe__msg.is-bad { color: var(--accent-text); }

/* ------------------------------------------------------- empty + error cards */
.track-card--empty { border-left-color: var(--line-strong); text-align: left; }
.track-empty__h {
  font-family: var(--font-head); font-size: 21px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; margin: 0 0 12px;
}
.track-empty__p { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 0 0 22px; max-width: 62ch; }
.track-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ loading state */
/* A skeleton in the shape of the answer, not a spinner: the layout is already
   known, so the page does not jump when the data lands. */
.track-card--skeleton { border-left-color: var(--line-strong); }
.sk { background: var(--surface-2); border-radius: var(--radius); position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: sk-sweep 1.3s ease-in-out infinite;
}
@keyframes sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }
.sk--pill { width: 120px; height: 30px; margin-bottom: 16px; }
.sk--title { width: min(320px, 70%); height: 34px; margin-bottom: 24px; }
.sk--grid { display: grid; gap: 10px; grid-template-columns: 1fr; background: none; }
@media (min-width: 620px) { .sk--grid { grid-template-columns: 1fr 1fr; } }
.sk--cell { height: 56px; }
.track-loading__label { color: var(--dim); font-size: 14px; margin: 16px 0 0; }

.cta-solo__addr { color: var(--dim); font-size: 13.5px; margin: 16px 0 0; }