/* base.css */
/* ---------- reset + base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Prevent horizontal scroll / page-swing on mobile. If a stray decorative
 * element (SVG background, absolutely-positioned motion line, wide table)
 * overflows the viewport, the body clips it instead of adding a scrollbar.
 * `overflow-x: clip` (newer, no scrollbar) with `overflow-x: hidden`
 * fallback for browsers that don't support clip yet. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
img, svg, video, iframe { max-width: 100%; height: auto; }

/* Defensive: the browser's UA rule for [hidden] is `display: none` at the
 * lowest specificity, so any component selector like `.contact-list li { display: flex }`
 * silently defeats it. Hydration relies on `hidden` to keep API-driven blocks
 * out of view when the API is unreachable — this must win. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body, 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--brand-text, #111827);
  background: var(--brand-bg, #ffffff);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading, 'Nunito', sans-serif);
  color: var(--brand-heading, var(--brand-dark, #0b1220));
  margin: 0 0 .6em;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
p  { margin: 0 0 1em; }

a { color: var(--brand-primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-primary-2, var(--brand-primary)); }

blockquote { margin: 0 0 1em; }

ul { padding: 0; margin: 0; list-style: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .75em 1.4em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-lg { padding: .95em 1.75em; font-size: 1.02rem; }
.btn-sm { padding: .5em 1.05em; font-size: .88rem; }
.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-on-primary, #fff);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--brand-primary) 60%, transparent);
}
.btn-primary:hover {
  background: var(--brand-primary-2, var(--brand-primary));
  color: var(--brand-on-primary, #fff);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-text);
  border-color: color-mix(in srgb, var(--brand-text) 25%, transparent);
}
.btn-ghost:hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-accent {
  background: var(--brand-accent);
  color: var(--brand-on-accent, var(--brand-dark, #111));
}

/* ---------- utility ---------- */
.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; }
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 .75em;
}
.section-padded { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-tight  { padding: clamp(2rem, 4vw, 3rem) 0; }
.section-head   { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-sub    { color: var(--brand-text-muted, #4b5563); font-size: 1.05rem; }
.surface-alt    { background: var(--brand-surface-alt, #f7f8fa); }

.hint { color: var(--brand-text-muted, #6b7280); font-weight: 400; font-size: .85em; }

/* ---------- back-to-top ---------- */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--brand-primary);
  color: var(--brand-on-primary, #fff);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 40;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ---------- animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin 1s linear infinite; }


/* forms.css */
.contact-form {
  background: var(--brand-bg, #fff);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.2);
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .88rem;
  color: var(--brand-text);
  margin-bottom: .35rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: .7rem .85rem;
  font-family: inherit;
  font-size: .95rem;
  color: var(--brand-text);
  background: var(--brand-bg, #fff);
  border: 1.5px solid color-mix(in srgb, var(--brand-text) 15%, transparent);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.field textarea { resize: vertical; min-height: 90px; }

.contact-form .btn { width: 100%; justify-content: center; }
.contact-form .btn-loading { display: none; }
.contact-form.is-loading .btn-label { display: none; }
.contact-form.is-loading .btn-loading { display: inline-flex; align-items: center; gap: .5rem; }
.contact-form.is-loading button { opacity: .7; pointer-events: none; }

.form-status {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border-radius: 10px;
  font-size: .9rem;
  display: none;
}
.form-status-success {
  background: color-mix(in srgb, #10b981 15%, transparent);
  color: #065f46;
  border: 1px solid color-mix(in srgb, #10b981 30%, transparent);
}
.form-status-error {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  color: #991b1b;
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}
.contact-form.sent .form-status-success { display: block; }
.contact-form.errored .form-status-error { display: block; }

/* Live character counter under the message textarea. */
.field-counter {
  margin: .35rem 0 0;
  font-size: .8rem;
  color: color-mix(in srgb, currentColor 55%, transparent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.field-counter[data-counter-state="near"] { color: #b45309; }
.field-counter[data-counter-state="over"] { color: #b91c1c; font-weight: 600; }

/* Honeypot: kept in the DOM but visually + AT-hidden. Bots parse HTML source
 * and fill anything they see; humans and screen readers skip it entirely. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Turnstile widget breathing room. */
.cf-turnstile { margin: 1rem 0; min-height: 65px; }


/* layout.css */
/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--brand-bg, #fff);
  transition: box-shadow .2s, background .2s;
}
.site-header[data-scrolled] {
  box-shadow: 0 4px 20px -8px rgba(0,0,0,.12);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .9rem 1.25rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--brand-heading, var(--brand-dark, #0b1220));
  font-weight: 800;
  font-family: var(--font-heading);
}
.brand:hover { color: var(--brand-primary); }
.brand-logo { height: 38px; width: auto; color: var(--brand-primary); }
.brand-name { font-size: 1.05rem; letter-spacing: -.01em; }

.site-nav { display: flex; align-items: center; }
.nav-menu {
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-menu a {
  color: var(--brand-text);
  font-weight: 500;
  font-size: .95rem;
}
.nav-menu a:hover { color: var(--brand-primary); }
.nav-menu .nav-cta {
  background: var(--brand-primary);
  color: var(--brand-on-primary, #fff);
  padding: .5em 1.1em;
  border-radius: 999px;
}
.nav-menu .nav-cta:hover {
  background: var(--brand-primary-2, var(--brand-primary));
  color: var(--brand-on-primary, #fff);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--brand-text);
  padding: 0;
}

/* Mobile / small-tablet breakpoint. Bumped from 820px → 960px so tablets
 * in portrait (768px) and Chrome's default responsive viewport also get
 * the hamburger UX rather than a cramped inline nav. */
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  /* Guaranteed hide when closed — max-height:0 + overflow:hidden leaked
   * the first list item on some browsers because absolutely-positioned
   * flex containers ignored the max-height in a rare paint path. Toggle
   * `display` instead — no animation but always correct. */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--brand-bg, #fff);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1rem 1.25rem;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.2);
  }
  .site-nav[data-open="true"] .nav-menu { display: flex; }
  .nav-menu li { padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent); }
  .nav-menu li:last-child { border: 0; }

  /* Mobile header layout: only [logo] on the left, [toggle] on the right.
   * Hide the extra "Contact Us" header CTA so the toggle doesn't fight
   * for space in the middle. `margin-left: auto` on .site-nav is
   * belt-and-suspenders — pushes the toggle to the far right even if a
   * future third header element sneaks back in. */
  .header-actions { display: none; }
  .site-nav { margin-left: auto; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(4rem, 10vw, 7rem);
  color: var(--brand-on-hero, #fff);
  background: var(--brand-hero-bg, linear-gradient(135deg, var(--brand-dark, #0b1220), var(--brand-primary-2, var(--brand-primary))));
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    var(--hero-image, none) center/cover no-repeat;
  opacity: var(--hero-image-opacity, .35);
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--brand-dark, #000) 25%, transparent));
  z-index: 0; pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 780px; }
.hero .eyebrow { color: var(--brand-accent, var(--brand-primary)); }
.hero-headline {
  color: var(--brand-on-hero, #fff);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: color-mix(in srgb, var(--brand-on-hero, #fff) 88%, transparent);
  max-width: 640px;
  margin-bottom: 2rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem; }
/* Hero primary sits on a saturated brand-color gradient. A same-color
 * button (orange-on-orange for sunset-orange, blue-on-blue for classic-blue)
 * disappears into the background. Override to a crisp surface with
 * high-contrast dark text — theme-agnostic and always pops. */
.hero .btn-primary {
  background: var(--brand-on-hero, #fff);
  color: var(--brand-dark, #111);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .45);
}
.hero .btn-primary:hover {
  background: var(--brand-accent, #fbbf24);
  color: var(--brand-on-accent, var(--brand-dark, #111));
  transform: translateY(-1px);
}
.hero .btn-ghost {
  color: var(--brand-on-hero, #fff);
  border-color: color-mix(in srgb, var(--brand-on-hero, #fff) 50%, transparent);
}
.hero .btn-ghost:hover { background: color-mix(in srgb, var(--brand-on-hero, #fff) 12%, transparent); border-color: var(--brand-on-hero, #fff); }

.trust-badges {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  color: color-mix(in srgb, var(--brand-on-hero, #fff) 85%, transparent);
  font-size: .9rem;
  font-weight: 500;
}
.trust-badges li { display: flex; align-items: center; gap: .4rem; }
.trust-badges i { color: var(--brand-accent, var(--brand-primary)); font-size: 1.1rem; }

/* ---------- stats ---------- */
.stats { border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1;
}
.stat-label {
  margin-top: .5rem;
  color: var(--brand-text-muted, #4b5563);
  font-size: .9rem;
  font-weight: 500;
}

/* ---------- features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.feature-card {
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.feature-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 1.5rem;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  margin-bottom: 1rem;
}
.feature-card p { color: var(--brand-text-muted, #4b5563); margin: 0; }

/* ---------- services ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.service-card {
  background: var(--brand-bg, #fff);
  border-radius: 16px;
  padding: 1.75rem;
  border-top: 4px solid var(--brand-primary);
  box-shadow: 0 20px 40px -30px rgba(0,0,0,.15);
}
.service-icon {
  font-size: 1.75rem;
  color: var(--brand-primary);
  margin-bottom: .75rem;
}
.service-card p { color: var(--brand-text-muted, #4b5563); }
.service-bullets {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
}
.service-bullets li {
  padding: .35rem 0 .35rem 1.5rem;
  position: relative;
  font-size: .92rem;
  color: var(--brand-text);
}
.service-bullets li::before {
  content: "";
  position: absolute; left: 0; top: .7rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-accent, var(--brand-primary));
}

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }
.about-media img {
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.3);
}
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.id-badge {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--brand-primary);
  font-size: .85rem;
  font-weight: 600;
}
.id-badge strong { font-weight: 800; }

/* ---------- ceo message ---------- */
.ceo-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 700px) { .ceo-grid { grid-template-columns: 1fr; text-align: center; } }
.ceo-photo img {
  width: 220px; height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--brand-bg, #fff);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.3);
}
.ceo-copy blockquote {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-heading, var(--brand-dark));
  line-height: 1.35;
  margin: 0 0 1rem;
}
.ceo-copy cite {
  font-style: normal;
  font-weight: 600;
  color: var(--brand-text-muted, #4b5563);
}

/* ---------- testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.testimonial {
  background: var(--brand-bg, #fff);
  border-radius: 16px;
  padding: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  margin: 0;
  position: relative;
}
.testimonial::before {
  content: "\201C";
  font-family: Georgia, serif;
  position: absolute; top: -20px; left: 20px;
  font-size: 5rem;
  color: var(--brand-primary);
  line-height: 1;
  opacity: .3;
}
.testimonial p { margin-bottom: 1rem; color: var(--brand-text); }
.testimonial footer { color: var(--brand-text-muted, #6b7280); font-size: .9rem; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0;
  color: var(--brand-text);
}
.contact-list i {
  font-size: 1.25rem;
  color: var(--brand-primary);
  width: 28px;
}
.contact-list a { color: inherit; }
.contact-list a:hover { color: var(--brand-primary); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--brand-footer-bg, var(--brand-dark, #0b1220));
  color: color-mix(in srgb, var(--brand-on-dark, #fff) 80%, transparent);
  padding: 4rem 0 1.5rem;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-on-dark, #fff) 12%, transparent);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: var(--brand-on-dark, #fff);
  font-size: .95rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.footer-col ul li { padding: .3rem 0; font-size: .92rem; }
.footer-col a { color: inherit; }
.footer-col a:hover { color: var(--brand-accent, var(--brand-primary)); }
.footer-brand .brand-logo { height: 42px; color: var(--brand-accent, var(--brand-primary)); margin-bottom: 1rem; }
.footer-tagline { font-size: .92rem; margin-bottom: .5rem; }
.footer-ids { font-size: .82rem; opacity: .7; }
.social-row { display: flex; gap: .75rem; }
.social-row a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-on-dark, #fff) 12%, transparent);
  color: var(--brand-on-dark, #fff);
  font-size: 1.05rem;
}
.social-row a:hover { background: var(--brand-accent, var(--brand-primary)); color: var(--brand-dark, #000); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 1.5rem;
  font-size: .85rem;
  opacity: .75;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom a { color: var(--brand-accent, var(--brand-primary)); }


/* sections.css */
/* ---------- Announcement bar ---------- */
.announcement-bar {
  background: var(--brand-dark);
  color: var(--brand-on-dark, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-on-dark, #fff) 10%, transparent);
}
.announcement-inner {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .6rem 1.25rem; font-size: .9rem;
}
.announcement-inner p { margin: 0; }
.announcement-dismiss {
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: .25rem .5rem; font-size: 1.2rem; line-height: 1; opacity: .7;
}
.announcement-dismiss:hover { opacity: 1; }

/* ---------- Header actions ---------- */
.header-actions { display: flex; align-items: center; gap: 1rem; margin-left: 1.5rem; }
.header-utility { color: var(--brand-text); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.header-utility:hover { color: var(--brand-primary); }
@media (max-width: 960px) { .header-utility { display: none; } }
/* Mobile header layout is owned by layout.css (.header-actions display:none,
 * .site-nav margin-left:auto). Don't set conflicting rules here. */

/* ---------- Hero + backdrop ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 clamp(3rem, 5vw, 4.5rem);
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  min-height: min(48vh, 380px);
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
  .hero-visual { display: none; }
}
.hero-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: color-mix(in srgb, var(--brand-on-hero, #fff) 32%, transparent);
  z-index: 1;
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
}
.hero-headline {
  margin-bottom: .9rem;
  letter-spacing: -0.02em;
  font-size: clamp(1.65rem, 2.6vw, 2.15rem);
  line-height: 1.15;
  max-width: 780px;
  text-wrap: balance;
}
.hero-sub {
  max-width: 720px;
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  margin-bottom: 1.75rem;
  color: color-mix(in srgb, var(--brand-on-hero, #fff) 86%, transparent);
  text-wrap: pretty;
}
.hero-ctas { gap: .6rem; }

/* Eyebrow pill with pulsing dot — always one line */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35em .85em;
  background: color-mix(in srgb, var(--brand-on-hero, #fff) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-on-hero, #fff) 18%, transparent);
  border-radius: 999px;
  color: var(--brand-accent, var(--brand-primary));
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin: 0 0 1.15rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-accent, var(--brand-primary));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 60%, transparent);
  animation: pulseDot 2.2s ease-out infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 0%, transparent); }
}

/* Visual side */
.hero-visual {
  position: relative;
  color: var(--brand-on-hero, #fff);
  display: grid;
  place-items: center;
}
.hero-truck-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: .5rem .5rem 0;
  margin-left: auto;
}
.hero-truck {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 24px rgba(0,0,0,.28));
}

/* GPS · Live badge floating above truck */
.hero-gps-badge {
  position: absolute;
  top: 0;
  right: 8%;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  background: color-mix(in srgb, var(--brand-on-hero, #fff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-on-hero, #fff) 25%, transparent);
  border-radius: 999px;
  color: var(--brand-on-hero, #fff);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
  z-index: 2;
}
.hero-gps-badge i { color: var(--brand-accent, var(--brand-primary)); font-size: .95rem; }
.hero-gps-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: pulseDot 1.8s ease-out infinite;
}

/* Motion lines slide left */
.hero-truck .motion-lines line {
  transform-origin: 0 0;
  animation: heroSlide 1.2s linear infinite;
}
.hero-truck .motion-lines line:nth-child(2) { animation-delay: .35s; }
.hero-truck .motion-lines line:nth-child(3) { animation-delay: .7s; }
@keyframes heroSlide {
  0%   { transform: translateX(20px); opacity: 0; }
  30%  { opacity: .8; }
  100% { transform: translateX(-30px); opacity: 0; }
}

/* Road dashes flow leftward */
.hero-road { animation: heroRoad 1.4s linear infinite; }
@keyframes heroRoad { to { stroke-dashoffset: -24; } }

@media (prefers-reduced-motion: reduce) {
  .hero-truck .motion-lines line,
  .hero-road,
  .pulse-dot,
  .hero-gps-dot { animation: none !important; }
}

.eyebrow-on-hero { color: var(--brand-accent, var(--brand-primary)); }
.hero-tertiary { margin-top: 1.25rem; font-size: .95rem; }
.hero-tertiary a {
  color: color-mix(in srgb, var(--brand-on-hero, #fff) 90%, transparent);
  text-decoration: underline; text-underline-offset: 4px; font-weight: 500;
  display: inline-flex; align-items: center; gap: .25rem;
}
.hero-tertiary a:hover { color: var(--brand-on-hero, #fff); }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--brand-surface-alt, #f5f7fb);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  padding: 1.25rem 0;
}
.trust-strip-list {
  /* Even-width columns that adapt to viewport: 2-up on phones, 3-up on
   * small tablets, up to N-up on desktop. Beats flex-wrap centering,
   * which drops odd counts into an awkward orphan on the last row. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem 1.25rem;
  align-items: center;
}
.trust-strip-item {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--brand-text); font-size: .88rem; font-weight: 500;
  justify-content: flex-start;
}
@media (max-width: 480px) {
  .trust-strip-list { grid-template-columns: repeat(2, 1fr); }
}
.trust-strip-item i { color: var(--brand-primary); font-size: 1.05rem; }

/* ---------- Audience pathways (works for 2 or 3 cards) ---------- */
.pathways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.pathway-card {
  position: relative;
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  border-radius: 18px;
  padding: 2rem 1.75rem 1.75rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  overflow: hidden;
}
.pathway-card::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent, var(--brand-primary)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .18s;
  pointer-events: none;
}
.pathway-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--brand-primary) 40%, transparent);
}
.pathway-card:hover::after { opacity: 1; }
.pathway-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 18%, transparent), color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 18%, transparent));
  color: var(--brand-primary);
  font-size: 1.4rem;
  margin-bottom: .75rem;
}
.pathway-card h3 { font-size: 1.35rem; margin: 0 0 .35rem; }
.pathway-card p { color: var(--brand-text-muted); margin: 0 0 1rem; flex: 1; }
.pathway-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: auto;
}
.pathway-actions .btn { padding: .55em 1.1em; font-size: .88rem; }

/* ---------- Why us ---------- */
.benefit-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.benefit-block {
  padding-top: .25rem;
}
.benefit-icon-wrap {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}
.benefit-block h3 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
  padding-top: .5rem;
  border-top: 3px solid var(--brand-primary);
}
.benefit-block p { color: var(--brand-text-muted); margin: 0; }

/* ---------- Services preview ---------- */
.services-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-preview-card {
  padding: 1.75rem;
  border-radius: 16px;
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  transition: border-color .18s, transform .12s, box-shadow .18s;
  position: relative;
}
.service-preview-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -30px rgba(0,0,0,.15);
}
.service-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.service-preview-card h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.service-preview-card p { color: var(--brand-text-muted); margin: 0; }
.services-availability-note {
  text-align: center;
  color: var(--brand-text-muted);
  font-size: .88rem;
  margin: 2.5rem auto 0;
  max-width: 640px;
}
.section-cta { text-align: center; margin-top: 1.75rem; }

/* ---------- Process timeline — CSS counter, connecting line ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
  padding: 0; margin: 0;
  list-style: none;
  position: relative;
}
.process-step {
  counter-increment: step;
  position: relative;
  padding: 3.25rem 1.5rem 1.5rem;
  background: var(--brand-bg, #fff);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.process-step::before {
  content: counter(step);
  position: absolute;
  top: -22px; left: 1.5rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2));
  color: var(--brand-on-primary, #fff);
  display: grid; place-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--brand-primary) 50%, transparent);
}
.process-step:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  box-shadow: 0 25px 50px -30px rgba(0,0,0,.15);
}
.process-step h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.process-step p { color: var(--brand-text-muted); margin: 0; font-size: .93rem; }

/* ---------- Brokers benefits (2-col) ---------- */
.brokers-benefits-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 820px) { .brokers-benefits-inner { grid-template-columns: 1fr; } }
.brokers-benefits-copy .section-sub { color: var(--brand-text); font-size: 1.05rem; }
.brokers-benefits-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.brokers-benefits-list {
  display: grid;
  gap: .75rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.2);
}
.brokers-benefits-list li,
.safety-items li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .35rem 0;
  color: var(--brand-text);
  font-size: .98rem;
}
.check-dot,
.safety-check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2));
  color: var(--brand-on-primary, #fff);
  font-size: .95rem;
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--brand-primary) 55%, transparent);
}

/* ---------- Technology section ---------- */
.technology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .technology-grid { grid-template-columns: 1fr; } }
.technology-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
.technology-features li {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  color: var(--brand-text);
  font-size: .95rem;
}
.technology-features li:last-child { border-bottom: 0; }
.technology-features i { color: var(--brand-primary); font-size: 1.15rem; padding-top: .1rem; }

/* ---------- Safety preview (2-col with visual checklist) ---------- */
.safety-preview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 820px) { .safety-preview-inner { grid-template-columns: 1fr; } }
.safety-preview-copy p { color: var(--brand-text); font-size: 1.05rem; }
.safety-preview-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.safety-items {
  display: grid;
  gap: .5rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.2);
}

/* ---------- Driver preview ---------- */
.driver-preview-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: none;
  text-align: left;
}
@media (max-width: 820px) { .driver-preview-inner { grid-template-columns: 1fr; } }
.driver-preview-copy p { color: var(--brand-text); font-size: 1.05rem; }
.driver-preview-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .5rem;
  margin: 1.5rem 0;
}
.driver-preview-benefits li {
  display: flex; align-items: center; gap: .5rem;
  color: var(--brand-text); font-size: .95rem;
}
.driver-preview-benefits i { color: var(--brand-primary); font-size: 1rem; }
.driver-preview-ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.driver-preview-visual { position: relative; }
.driver-preview-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
  font-size: .82rem; font-weight: 600;
  margin-bottom: 1rem;
}
.driver-preview-tile {
  padding: 1.5rem;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--brand-bg, #fff), var(--brand-surface-alt, #f7f8fa));
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.18);
  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', monospace;
  font-size: .9rem;
}
.tile-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0;
  color: var(--brand-text);
  border-bottom: 1px dashed color-mix(in srgb, var(--brand-text) 10%, transparent);
}
.tile-row:last-of-type { border-bottom: 0; }
.tile-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-accent, var(--brand-primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 20%, transparent);
}
.tile-dot.done { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.tile-progress {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  margin: 1rem 0 .5rem;
  overflow: hidden;
}
.tile-progress span {
  display: block; height: 100%;
  width: 62%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent, var(--brand-primary)));
  border-radius: inherit;
  animation: tileProgress 3.6s ease-in-out infinite alternate;
}
@keyframes tileProgress {
  0%   { width: 42%; }
  100% { width: 78%; }
}
.tile-caption { font-family: var(--font-body); font-size: .75rem; color: var(--brand-text-muted); margin-top: .25rem; }

/* ---------- Testimonials / empty state ---------- */
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius: 14px;
  padding: 1.75rem;
  margin: 0;
}
.testimonial-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}
.testimonial-card blockquote {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-heading);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0 0 1rem;
}
.testimonial-card figcaption { color: var(--brand-text-muted); font-size: .9rem; }
.testimonial-card figcaption strong { display: block; color: var(--brand-heading); font-weight: 700; }

/* ---------- Final CTA — two branded blocks ---------- */
.final-cta { padding: clamp(4.5rem, 10vw, 7rem) 0; }
.final-cta-inner { max-width: 980px; margin: 0 auto; text-align: center; }
.final-cta h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); margin-bottom: 2.5rem; }
.final-cta-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 720px) { .final-cta-columns { grid-template-columns: 1fr; } }
.final-cta-column {
  padding: 2.5rem 1.75rem;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--brand-bg, #fff), var(--brand-surface-alt, #f7f8fa));
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.final-cta-column:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.15);
}
.final-cta-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2));
  color: var(--brand-on-primary, #fff);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}
.final-cta-column h3 {
  font-size: 1.35rem;
  margin-bottom: .5rem;
}
.final-cta-column p { color: var(--brand-text-muted); margin: 0 0 1.25rem; }

/* ---------- Footer refinements ---------- */
.footer-brand .brand-logo { height: 44px; color: var(--brand-accent, var(--brand-primary)); margin-bottom: .75rem; }
.footer-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--brand-on-dark, #fff); margin: 0 0 .5rem; }
.footer-statement { font-size: .9rem; margin: 0 0 1rem; color: color-mix(in srgb, var(--brand-on-dark, #fff) 75%, transparent); }
.footer-identifiers {
  padding: 1.25rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-on-dark, #fff) 10%, transparent);
  margin-top: 2rem;
}
.identifier-row {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  color: color-mix(in srgb, var(--brand-on-dark, #fff) 75%, transparent);
  font-size: .82rem; letter-spacing: .06em;
}
.footer-legal { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal-links { display: flex; gap: 1rem; }
.footer-legal-links a { color: inherit; }
.footer-legal-links a:hover { color: var(--brand-accent, var(--brand-primary)); }
.footer-attribution {
  font-size: .78rem;
  color: color-mix(in srgb, var(--brand-on-dark, #fff) 60%, transparent);
  margin: 0;
}
.footer-attribution a {
  color: color-mix(in srgb, var(--brand-on-dark, #fff) 85%, transparent);
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-attribution a:hover { color: var(--brand-on-dark, #fff); }

/* ---------- Mobile sticky bar ---------- */
.mobile-sticky-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--brand-bg, #fff);
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
  z-index: 25;
  padding: .5rem;
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,.12);
}
@media (max-width: 820px) {
  .mobile-sticky-bar { display: flex; gap: .35rem; }
  body { padding-bottom: 72px; }
  .back-to-top { bottom: 80px; }
}
.mobile-sticky-action {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; padding: .5rem;
  border-radius: 10px;
  color: var(--brand-text);
  font-size: .72rem; font-weight: 600;
  text-decoration: none;
  min-height: 52px;
}
.mobile-sticky-action i { font-size: 1.25rem; }
.mobile-sticky-primary { background: var(--brand-primary); color: var(--brand-on-primary, #fff); }
.mobile-sticky-primary:hover { color: var(--brand-on-primary, #fff); }

/* ---------- Differentiators ("what sets us apart") ---------- */
.headline-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 720px;
  margin: 0 auto 3rem;
  padding: 2rem 2.25rem;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-2));
  color: var(--brand-on-primary, #fff);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--brand-primary) 55%, transparent);
}
@media (max-width: 640px) {
  .headline-stat { grid-template-columns: 1fr; text-align: center; padding: 1.75rem; }
}
.headline-stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brand-accent, var(--brand-on-primary, #fff));
  text-shadow: 0 2px 20px color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 30%, transparent);
}
.headline-stat-copy h3 {
  color: var(--brand-on-primary, #fff);
  font-size: 1.3rem;
  margin: 0 0 .35rem;
}
.headline-stat-copy p {
  color: color-mix(in srgb, var(--brand-on-primary, #fff) 85%, transparent);
  margin: 0;
  font-size: .95rem;
}

.differentiator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.differentiator-card {
  background: var(--brand-bg, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  transition: transform .15s, border-color .15s, box-shadow .18s;
}
.differentiator-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  box-shadow: 0 25px 45px -25px rgba(0,0,0,.18);
}
.differentiator-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 18%, transparent), color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 18%, transparent));
  color: var(--brand-primary);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.differentiator-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.differentiator-card p { color: var(--brand-text-muted); margin: 0; font-size: .95rem; }
.differentiator-ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-top: 2.5rem;
}

/* ---------- Contact section ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { margin: 1.5rem 0 0; }
.contact-list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0;
  color: var(--brand-text);
}
.contact-list i {
  font-size: 1.15rem;
  color: var(--brand-primary);
  width: 24px;
}
.contact-list a { color: inherit; }
.contact-list a:hover { color: var(--brand-primary); }
.contact-teams {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  display: grid;
  gap: 1rem;
}
.contact-team {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .95rem;
  padding: .5rem 0;
}
.contact-team strong { color: var(--brand-heading); font-weight: 700; }
.contact-team a { color: var(--brand-primary); font-weight: 600; }

/* ---------- Inside Our Operations (dispatch board) ---------- */
.inside-ops-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.inside-ops-copy { max-width: 720px; margin: 0 auto; text-align: center; }
.inside-ops-copy .section-sub { color: var(--brand-text-muted); font-size: 1.05rem; }

.dispatch-board {
  background: var(--brand-bg, #fff);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.22);
  padding: 1.25rem 1.5rem 1.5rem;
  overflow: hidden;
}
.dispatch-board-head,
.dispatch-row {
  display: grid;
  grid-template-columns: 90px minmax(220px, 1fr) minmax(240px, 1.2fr);
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
}
.dispatch-board-head {
  border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
  color: var(--brand-text-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: .25rem;
}
.dispatch-row + .dispatch-row { border-top: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent); }
.dispatch-load-num {
  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', monospace;
  font-weight: 700;
  color: var(--brand-heading);
  font-size: .95rem;
}
.route-city {
  font-weight: 600;
  color: var(--brand-text);
  font-size: .95rem;
  white-space: nowrap;
}
.route-arrow {
  display: inline-flex; align-items: center;
  color: var(--brand-primary);
  font-size: 1.35rem;
  margin: 0 .25rem;
  vertical-align: middle;
}
.route-pending {
  color: var(--brand-text-muted);
  font-style: italic;
  font-size: .9rem;
}
.col-status { display: flex; flex-wrap: wrap; gap: .35rem; }
.pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .3em .7em;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: color-mix(in srgb, var(--brand-text) 8%, transparent);
  color: var(--brand-text);
  border: 1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}
/* State-driven pill colors — set on the row, cascade to its pills */
.dispatch-row-in_transit .pill:last-child {
  background: color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 22%, transparent);
  color: color-mix(in srgb, var(--brand-heading) 100%, transparent);
  border-color: color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 45%, transparent);
}
.dispatch-row-in_transit .pill:nth-child(2) {
  background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
  color: var(--brand-primary);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.dispatch-row-delivered .pill:first-child {
  background: color-mix(in srgb, #16a34a 18%, transparent);
  color: #14532d;
  border-color: color-mix(in srgb, #16a34a 40%, transparent);
}
.dispatch-row-booked .pill:first-child {
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  color: #78350f;
  border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}
.dispatch-caption {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed color-mix(in srgb, var(--brand-text) 15%, transparent);
  font-size: .82rem;
  color: var(--brand-text-muted);
  text-align: center;
  font-style: italic;
}
@media (max-width: 640px) {
  .dispatch-board-head { display: none; }
  .dispatch-row {
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: 1rem 0;
  }
}

/* ---------- Operations flow (two flows: before/during + after delivery) ---------- */
.flow-block { margin-top: 3rem; }
.flow-block:first-of-type { margin-top: 1.5rem; }
.flow-head { margin-bottom: 1.5rem; }
.flow-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--brand-primary);
  color: var(--brand-on-primary, #fff);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .02em;
}
.flow-badge.accent {
  background: var(--brand-accent, var(--brand-primary));
  color: var(--brand-on-accent, var(--brand-dark));
}
.flow-subtitle {
  margin: .75rem 0 0;
  color: var(--brand-text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
}
.flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 0;
  margin: 0;
  list-style: none;
  align-items: center;
}
.flow-step {
  position: relative;
  padding: .85rem 1.15rem;
  background: var(--brand-bg, #fff);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  font-weight: 600;
  font-size: .9rem;
  color: var(--brand-heading);
  transition: transform .12s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -.85rem;
  width: 12px; height: 2px;
  background: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  transform: translateY(-50%);
}
.flow-step:last-child::after { display: none; }
.flow-block-accent .flow-step::after {
  background: color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 60%, transparent);
}
.flow-step:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: 0 15px 30px -18px color-mix(in srgb, var(--brand-primary) 45%, transparent);
}
.flow-block-accent .flow-step:hover {
  border-color: var(--brand-accent, var(--brand-primary));
  box-shadow: 0 15px 30px -18px color-mix(in srgb, var(--brand-accent, var(--brand-primary)) 55%, transparent);
}
@media (max-width: 700px) {
  .flow-steps { flex-direction: column; align-items: stretch; }
  .flow-step { text-align: center; }
  .flow-step::after {
    top: auto; right: 50%; bottom: -.85rem;
    width: 2px; height: 12px;
    transform: translateX(50%);
  }
}
.flow-capabilities {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2rem;
  margin: 3rem 0 0;
  padding: 1.5rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
}
.flow-capabilities li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--brand-text);
  font-weight: 500;
  font-size: .95rem;
}
.flow-capabilities li i { color: var(--brand-primary); font-size: 1.5rem; margin-right: -.5rem; }

/* ---------- Driver preview: single-column now that visual moved to Inside Ops ---------- */
.driver-preview-inner { grid-template-columns: 1fr; max-width: 780px; }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .tile-progress span { animation: none; width: 60%; }
}

/* ---------- Focus states (WCAG AA) ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 4px;
}


/* verify-modal.css */
/* ---------- Verify modal (zt-verify-modal.js) ---------- */
.zt-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 1rem;
  animation: ztFade 180ms ease-out;
}
[hidden].zt-modal-overlay { display: none; }
@keyframes ztFade { from { opacity: 0; } to { opacity: 1; } }

.zt-modal {
  position: relative;
  background: var(--brand-bg, #fff);
  border-radius: 18px;
  width: 100%;
  /* Wider (was 460 → 580) so the load-status result view lays out without
   * feeling cramped; also gives contact fields more room to breathe. */
  max-width: 580px;
  max-height: min(92vh, 860px);
  /* Split into header + scroll-body so only the body scrolls — the title
   * and close button stay pinned as the user scrolls a tall result view. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.4);
  animation: ztRise 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ztRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.zt-modal-close {
  position: absolute; top: .75rem; right: .75rem;
  z-index: 2;
  background: var(--brand-bg, #fff);
  border: 0;
  padding: .4rem;
  cursor: pointer;
  color: var(--brand-text-muted, #6b7280);
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.zt-modal-close:hover { color: var(--brand-heading); background: color-mix(in srgb, var(--brand-text) 8%, transparent); }

.zt-modal-head {
  padding: 1.5rem 1.75rem 1rem;
  flex: 0 0 auto;
  border-bottom: 1px solid transparent;
  background: var(--brand-bg, #fff);
  transition: border-color .2s, box-shadow .2s;
}
/* When the body is scrolled, the head gets a subtle border to signal the
 * cut-off point (applied via JS-set class .zt-modal-scrolled or via the
 * :has() selector fallback). Keep it lightweight — a full shadow feels heavy. */
.zt-modal.is-scrolled .zt-modal-head {
  border-bottom-color: color-mix(in srgb, var(--brand-text) 10%, transparent);
}
.zt-modal-head h2 {
  font-size: 1.35rem;
  margin: 0 0 .35rem;
  color: var(--brand-heading);
  padding-right: 2rem;
}
.zt-modal-sub {
  color: var(--brand-text-muted);
  font-size: .95rem;
  margin: 0;
  line-height: 1.45;
}

.zt-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem 1.75rem 1.75rem;
  /* Smooth momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;
}

/* Full-screen on small phones — modal fills viewport, corners squared. */
@media (max-width: 560px) {
  .zt-modal-overlay { padding: 0; }
  .zt-modal {
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    height: 100%;
  }
  .zt-modal-head { padding: 1.1rem 1.25rem .8rem; }
  .zt-modal-body { padding: 1rem 1.25rem 1.5rem; }
  .zt-modal-head h2 { font-size: 1.2rem; }
}

.zt-form { display: grid; gap: .9rem; }
.zt-field { display: grid; gap: .3rem; }
.zt-field label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand-text);
  letter-spacing: .01em;
}
.zt-field input {
  width: 100%;
  padding: .7rem .85rem;
  font-family: inherit;
  font-size: .95rem;
  color: var(--brand-text);
  background: var(--brand-bg, #fff);
  border: 1.5px solid color-mix(in srgb, var(--brand-text) 15%, transparent);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.zt-field input:focus,
.zt-field select:focus,
.zt-field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.zt-field select {
  width: 100%;
  padding: .7rem 2.25rem .7rem .85rem;
  font-family: inherit;
  font-size: .95rem;
  color: var(--brand-text);
  background-color: var(--brand-bg, #fff);
  border: 1.5px solid color-mix(in srgb, var(--brand-text) 15%, transparent);
  border-radius: 10px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.5 1L6 5.5 10.5 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  transition: border-color .15s, box-shadow .15s;
}
.zt-field select:invalid { color: var(--brand-text-muted); }
.zt-field input[type="date"] { min-height: 2.55rem; }

/* ---------- Inline field errors (live validation) ---------- */
.zt-field.is-invalid input,
.zt-field.is-invalid select {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 15%, transparent);
}
.zt-field-error {
  margin: .35rem 0 0;
  padding: 0;
  color: #b91c1c;
  font-size: .82rem;
  line-height: 1.35;
  background: none;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: .35rem;
}
.zt-field-error::before {
  content: "⚠";
  font-size: .95rem;
  flex-shrink: 0;
}

/* one-time-code input — big + monospaced */
.zt-code-field input {
  font-size: 1.15rem;
  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', monospace;
  letter-spacing: .1em;
  text-align: center;
}

.zt-form-submit, .zt-form button[type="submit"] {
  width: 100%;
  justify-content: center;
  margin-top: .5rem;
}
.zt-form .btn-loading { display: none; }
.zt-form.is-loading .btn-label { display: none; }
.zt-form.is-loading .btn-loading { display: inline-flex; align-items: center; gap: .5rem; }
.zt-form.is-loading button { opacity: .7; pointer-events: none; }

.zt-alert {
  margin: .5rem 0 0;
  padding: .7rem .9rem;
  border-radius: 10px;
  font-size: .88rem;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #991b1b;
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

.zt-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
}
.zt-actions-single {
  justify-content: center;
}
.zt-linkish {
  background: none;
  border: 0;
  padding: .35rem 0;
  cursor: pointer;
  color: var(--brand-primary);
  font-weight: 600;
  font-size: .88rem;
  font-family: inherit;
}
.zt-linkish:hover { text-decoration: underline; }
.zt-linkish:disabled { color: var(--brand-text-muted); cursor: not-allowed; opacity: .7; }
.zt-linkish-muted { color: var(--brand-text-muted); font-weight: 500; }

.zt-hint {
  margin: .85rem 0 0;
  font-size: .82rem;
  color: var(--brand-text-muted);
  text-align: center;
  min-height: 1em;
}

/* Done state */
.zt-done { text-align: center; padding: .5rem 0; }
.zt-done-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #16a34a 18%, transparent);
  color: #16a34a;
  font-size: 2rem;
}
.zt-done p { color: var(--brand-text); margin: 0 0 1.25rem; }
.zt-done .btn { min-width: 140px; }

/* Fallback state */
.zt-fallback { text-align: center; padding: .5rem 0; display: grid; gap: 1rem; }
.zt-fallback p { color: var(--brand-text); margin: 0; }
.zt-fallback .btn { justify-self: center; }

/* ---------- Identity bar (APPLY state — "Continuing as email@…") ---------- */
.zt-identity-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .85rem .65rem .95rem;
  margin: 0 0 1.25rem;
  background: color-mix(in srgb, #16a34a 10%, transparent);
  border: 1px solid color-mix(in srgb, #16a34a 25%, transparent);
  border-radius: 10px;
  font-size: .88rem;
  color: var(--brand-text);
}
.zt-identity-text {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zt-identity-text i {
  color: #16a34a;
  font-size: 1rem;
  flex-shrink: 0;
}
.zt-identity-text strong {
  color: var(--brand-heading);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zt-identity-change {
  background: none;
  border: 0;
  padding: .25rem .5rem;
  cursor: pointer;
  color: var(--brand-primary);
  font-weight: 600;
  font-size: .82rem;
  font-family: inherit;
  border-radius: 6px;
  flex-shrink: 0;
}
.zt-identity-change:hover {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  text-decoration: underline;
}

/* ---------- Password field with show/hide + validation ---------- */
.zt-password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.zt-password-wrap input {
  flex: 1;
  padding-right: 2.75rem;
}
.zt-eye {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  color: var(--brand-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.zt-eye:hover { color: var(--brand-heading); background: color-mix(in srgb, var(--brand-text) 6%, transparent); }

.zt-password-req {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--brand-text-muted);
  line-height: 1.35;
}
.zt-password-req.zt-req-ok  { color: #15803d; }
.zt-password-req.zt-req-err { color: #b91c1c; }
.zt-password-req.zt-req-ok::before  { content: "✓ "; font-weight: 700; }
.zt-password-req.zt-req-err::before { content: "✗ "; font-weight: 700; }

/* ---------- CDL file upload — drag/drop zone ---------- */
.zt-file-drop {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1rem 1rem 1.1rem;
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--brand-bg, #fff));
  border: 1.5px dashed color-mix(in srgb, var(--brand-primary) 40%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.zt-file-drop:hover,
.zt-file-drop:focus-within,
.zt-file-drop.is-hover {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--brand-bg, #fff));
  border-color: var(--brand-primary);
}
.zt-file-drop.is-hover { transform: scale(1.005); }

.zt-file-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
  font-size: 1.35rem;
}
.zt-file-text {
  display: block;
  color: var(--brand-text);
  font-size: .92rem;
  line-height: 1.4;
}
.zt-file-text strong { color: var(--brand-primary); font-weight: 600; }
.zt-file-text em {
  display: block;
  font-style: normal;
  font-size: .78rem;
  color: var(--brand-text-muted);
  margin-top: .15rem;
}
.zt-file-picked {
  margin: .5rem 0 0;
  padding: .55rem .75rem;
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #14532d;
  border: 1px solid color-mix(in srgb, #16a34a 25%, transparent);
  border-radius: 8px;
  font-size: .85rem;
  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', monospace;
}
.zt-file-error {
  margin: .5rem 0 0;
}

/* ---------- Warning icon variant (rejection cooldown, etc.) ---------- */
.zt-done-warn {
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
}
.zt-done p code {
  background: color-mix(in srgb, var(--brand-text) 8%, transparent);
  padding: .1em .35em;
  border-radius: 4px;
  font-size: .85em;
}

/* ---------- Load status result (README §4.6) ---------- */
.zt-loadstatus { display: flex; flex-direction: column; gap: 1.1rem; }
.zt-loadstatus-header {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.zt-status-badge {
  display: inline-flex; align-items: center;
  padding: .35em .8em;
  border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  letter-spacing: .01em;
}
.zt-status-badge[data-tone="success"]  { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.zt-status-badge[data-tone="progress"] { background: color-mix(in srgb, #2563eb 15%, transparent); color: #1d4ed8; }
.zt-status-badge[data-tone="warn"]     { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.zt-status-badge[data-tone="danger"]   { background: color-mix(in srgb, #dc2626 15%, transparent); color: #b91c1c; }
.zt-status-badge[data-tone="muted"]    { background: color-mix(in srgb, var(--brand-text) 10%, transparent); color: var(--brand-text-muted, #57534e); }
.zt-loadstatus-carrier {
  font-size: 1.05rem; font-weight: 700;
  color: var(--brand-heading, var(--brand-dark));
}

/* Tier note — shown on STATUS_ONLY results to explain the limited view. */
.zt-tier-note {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .6rem;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: color-mix(in srgb, #2563eb 8%, transparent);
  border: 1px solid color-mix(in srgb, #2563eb 22%, transparent);
  color: var(--brand-text);
  font-size: .88rem;
  line-height: 1.4;
}
.zt-tier-note .bi { color: #2563eb; font-size: 1.05rem; margin-top: .15rem; }
.zt-tier-note strong { color: var(--brand-heading, var(--brand-dark)); }

/* Inline field hint (deliveryZip helper text on load-status START). */
.zt-field-hint {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--brand-text-muted, #57534e);
  line-height: 1.35;
}
.zt-field-optional {
  font-weight: 400;
  color: var(--brand-text-muted, #57534e);
  font-size: .85em;
}

.zt-loadstatus-stops {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.zt-loadstatus-stop {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  padding: .85rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
  background: var(--brand-bg);
}
.zt-loadstatus-stop:first-child { border-top: 0; }
.zt-stop-tag {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-primary);
  align-self: center;
}
.zt-loadstatus-stop[data-type="delivery"] .zt-stop-tag { color: #16a34a; }
.zt-stop-body { display: flex; flex-direction: column; gap: .15rem; }
.zt-stop-loc { font-weight: 600; color: var(--brand-heading, var(--brand-dark)); }
.zt-stop-date { font-size: .85rem; color: var(--brand-text-muted, #57534e); }

.zt-loadstatus-driver,
.zt-loadstatus-contact {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .8rem 1rem;
  background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  border-radius: 12px;
}
.zt-driver-label,
.zt-contact-label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-text-muted, #57534e);
}
.zt-driver-body { font-size: .95rem; color: var(--brand-text); }
.zt-driver-body a,
.zt-contact-body a { color: var(--brand-primary); font-weight: 600; }
.zt-contact-body { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .95rem; }

.zt-loadstatus-docs { display: flex; flex-direction: column; gap: .5rem; }
.zt-docs-title {
  margin: 0;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-text-muted, #57534e);
}
.zt-docs-grid { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 480px) { .zt-docs-grid { grid-template-columns: 1fr 1fr; } }
.zt-doc-link {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .65rem;
  padding: .7rem .85rem;
  background: var(--brand-bg);
  border: 1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
  border-radius: 10px;
  color: var(--brand-heading, var(--brand-dark));
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.zt-doc-link:hover {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  color: var(--brand-primary);
}
.zt-doc-link .bi:first-child { font-size: 1.2rem; color: var(--brand-primary); }
.zt-doc-link .bi:last-child { font-size: 1rem; color: var(--brand-text-muted, #57534e); }