/* ==========================================================================
   North End Courier — Home ("Dispatch / operational" register)
   Loaded after brand.css. Reuses brand tokens:
     --main-600      = orange #F17300 (accent / route line / data)
     --main-two-600  = navy   #002B42 (structure / dark surfaces)
   Personality comes from execution, not a new palette: a live "route line",
   a working quote widget, a status ticker, and shipment data set in mono.
   ========================================================================== */

:root {
  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --nec-ink: #16232e;        /* strong body text on white (≈12:1) */
  --nec-ink-soft: #4a5765;   /* secondary text on white (≈7:1)  */
  --nec-line: #e4e9ef;       /* hairlines */
  --nec-navy: #002b42;
  --nec-navy-2: #06364f;     /* raised navy surface */
  --nec-orange: #f17300;     /* backgrounds/borders/on-navy only */
  --nec-orange-text: #b85c00; /* orange text ON WHITE — WCAG AA 4.57:1 */
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Brand logo in the header */
.nec-logo {
  height: 46px;
  width: auto;
  display: block;
}
@media (max-width: 575px) {
  .nec-logo {
    height: 38px;
  }
}
/* Brand logo in the footer (white-on-navy variant) */
.nec-logo-footer {
  height: 54px;
  width: auto;
  display: block;
}

/* Data / labels rendered in mono — tracking numbers, ZIPs, timestamps, ETAs */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

/* Section rhythm: tighter groupings, generous narrative breaks (varied, not py-140 everywhere) */
.nec-sec {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}
.nec-sec--tight {
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.nec-sec-head {
  max-width: 44rem;
}
.nec-sec-head h2 {
  color: var(--nec-navy);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.nec-sec-head p {
  color: var(--nec-ink-soft);
  font-size: 1.075rem;
  max-width: 60ch;
  margin: 0.9rem 0 0;
}

/* A small functional tag (mono) — replaces the italic uppercase eyebrow.
   Used sparingly, and it carries real data, not "WHY US". */
.nec-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--nec-ink-soft);
}
.nec-tag__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nec-orange);
  box-shadow: 0 0 0 3px rgba(241, 115, 0, 0.18);
}

/* ==========================================================================
   INNER PAGE HEADER (shared across services/about/contact/quote/…)
   Same "dispatch" navy + routed grid as the hero, so internal pages match
   the approved home model.
   ========================================================================== */
.nec-page-head {
  position: relative;
  background: var(--nec-navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3rem, 6vw, 4.75rem);
}
.nec-page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(110% 90% at 90% 0%, #000 25%, transparent 72%);
}
.nec-crumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}
.nec-crumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.nec-crumb a:hover {
  color: #fff;
}
.nec-crumb .sep {
  color: rgba(255, 255, 255, 0.35);
}
.nec-crumb .cur {
  color: var(--nec-orange);
}
.nec-page-head h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
  max-width: 20ch;
}
.nec-page-head .sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 60ch;
  margin: 1rem 0 0;
}

/* Inner "coming soon" panel, dispatch-styled */
.nec-soon {
  border: 1px solid var(--nec-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(241, 115, 0, 0.05), transparent 60%),
    #fff;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.nec-soon__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--nec-orange-text);
  border: 1px solid rgba(241, 115, 0, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  margin-bottom: 1.25rem;
}
.nec-soon h2 {
  color: var(--nec-navy);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.nec-soon p {
  color: var(--nec-ink-soft);
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  line-height: 1.6;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.dp-hero {
  position: relative;
  background: var(--nec-navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* faint routed-grid backdrop (no stock photo) */
.dp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 80% 0%, #000 30%, transparent 75%);
}
.dp-hero__wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
@media (max-width: 991px) {
  .dp-hero__wrap {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.dp-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 1.1rem 0 0;
}
.dp-hero h1 .accent {
  color: var(--nec-orange);
}
.dp-hero__lede {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 34rem;
  margin: 1.25rem 0 0;
}
.dp-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}
.dp-hero__proof span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.dp-hero__proof i {
  color: var(--nec-orange);
}

/* ---- Quote widget (working mini form) ---- */
.qw {
  background: #fff;
  color: var(--nec-ink);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.qw__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.qw__title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nec-navy);
}
.qw__route {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding-left: 1.6rem;
}
/* the route line connecting pickup → dropoff nodes */
.qw__route::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: repeating-linear-gradient(
    var(--nec-orange) 0 6px,
    transparent 6px 11px
  );
}
.qw__node {
  position: relative;
}
.qw__node::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--nec-orange);
  background: #fff;
}
.qw__node--to::before {
  border-radius: 2px;
  background: var(--nec-orange);
}
.qw label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nec-ink-soft);
  margin-bottom: 0.25rem;
}
.qw input,
.qw select {
  width: 100%;
  border: 1px solid var(--nec-line);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  color: var(--nec-ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qw input::placeholder {
  color: #5a6573;
}
.qw input:focus,
.qw select:focus {
  outline: none;
  border-color: var(--nec-orange);
  box-shadow: 0 0 0 3px rgba(241, 115, 0, 0.16);
}
.qw__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.qw__submit {
  width: 100%;
  margin-top: 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--nec-orange);
  color: #fff;
  font-weight: 600;
  padding: 0.85rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out-quint), background 0.15s ease;
}
.qw__submit:hover {
  background: #d96800;
  transform: translateY(-2px);
}
.qw__fine {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--nec-ink-soft);
  text-align: center;
}

/* ==========================================================================
   PUBLIC TRACKING  (/track/[number])
   ========================================================================== */
.track-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--nec-line);
  border-radius: 14px;
  margin-bottom: 2rem;
}
.track-status__num {
  font-weight: 600;
  color: var(--nec-navy);
}
.track-status__eta {
  color: var(--nec-ink-soft);
  font-size: 0.85rem;
  margin-left: auto;
}
.status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 43, 66, 0.08);
  color: var(--nec-navy);
}
.status--delivered {
  background: rgba(53, 160, 106, 0.14);
  color: #218352;
}
.status--cancelled {
  background: rgba(192, 57, 43, 0.12);
  color: #b23325;
}
.status--in_transit,
.status--picked_up,
.status--assigned {
  background: rgba(241, 115, 0, 0.12);
  color: #9a4700; /* AA on the light-orange tint */
}

.track-line {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.track-line__step {
  position: relative;
  padding-top: 2rem;
  text-align: center;
}
.track-line__step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--nec-line);
}
.track-line__step:last-child::before {
  display: none;
}
.track-line__step::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--nec-line);
  z-index: 1;
}
.track-line__step.is-done::before {
  background: var(--nec-orange);
}
.track-line__step.is-done::after {
  background: var(--nec-orange);
  border-color: var(--nec-orange);
}
.track-line__label {
  font-size: 0.82rem;
  color: var(--nec-ink-soft);
  padding: 0 0.25rem;
}
.track-line__step.is-done .track-line__label {
  color: var(--nec-navy);
  font-weight: 600;
}
@media (max-width: 640px) {
  .track-line {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .track-line__step {
    padding: 0 0 1.3rem 1.8rem;
    text-align: left;
  }
  .track-line__step::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .track-line__step::after {
    left: 0;
    transform: none;
  }
}

.track-events h3 {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--nec-ink-soft);
  margin: 0 0 0.75rem;
}
.track-events__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--nec-line);
  font-size: 0.9rem;
}
.track-events__row .t {
  color: var(--nec-orange-text);
}
.track-events__row .s {
  color: var(--nec-ink);
  text-transform: capitalize;
}

/* ==========================================================================
   ADMIN — dispatch dashboard table
   ========================================================================== */
.admin-table-wrap {
  border: 1px solid var(--nec-line);
  border-radius: 14px;
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 720px;
}
.admin-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nec-ink-soft);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--nec-line);
  background: #fafbfc;
}
.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--nec-line);
  vertical-align: top;
  color: var(--nec-ink);
}
.admin-table tr:last-child td {
  border-bottom: 0;
}
.admin-table .sub {
  display: block;
  color: var(--nec-ink-soft);
  font-size: 0.82rem;
}
.admin-table .arrow {
  display: block;
  color: var(--nec-navy);
  font-weight: 600;
  font-size: 0.85rem;
}
.admin-table .rush {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #fff;
  background: #b45309; /* accessible orange (white text ≈5:1) */
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  vertical-align: middle;
}
.status-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.status-form select {
  border: 1px solid var(--nec-line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  text-transform: capitalize;
  background: #fff;
}
.status-form button {
  border: 0;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  background: rgba(241, 115, 0, 0.12);
  color: var(--nec-orange);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-form button:hover {
  background: var(--nec-orange);
  color: #fff;
}

/* ---- Admin: toolbar (stats + search) + pagination ---- */
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.admin-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--nec-line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: #fbfcfd;
}
.admin-metric__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nec-ink-soft);
}
.admin-metric__value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--nec-navy);
}
.admin-metric__sub {
  font-size: 0.72rem;
  color: var(--nec-ink-soft);
}
.drivers__deliveries {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--nec-orange-text);
}
.drivers__code {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--nec-ink-soft);
  border: 1px dashed var(--nec-line);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-stats a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: capitalize;
  color: var(--nec-ink-soft);
  text-decoration: none;
  border: 1px solid var(--nec-line);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.admin-stats a b {
  color: var(--nec-navy);
}
.admin-stats a.is-active {
  border-color: var(--nec-orange);
  background: rgba(241, 115, 0, 0.08);
  color: var(--nec-navy);
}
.admin-search {
  display: flex;
  gap: 0.4rem;
}
.admin-search input {
  border: 1px solid var(--nec-line);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.88rem;
  min-width: 220px;
}
.admin-search button {
  border: 0;
  border-radius: 8px;
  background: var(--nec-navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0 0.9rem;
  cursor: pointer;
}
.req-link {
  font-weight: 700;
  color: var(--nec-navy);
  text-decoration: none;
}
.req-link:hover {
  color: var(--nec-orange-text);
  text-decoration: underline;
}
.admin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.9rem;
}
.admin-pager a {
  color: var(--nec-orange-text);
  text-decoration: none;
  font-weight: 600;
}
.admin-pager .is-off {
  color: #c3ccd6;
}

/* ---- Admin: request detail ---- */
.req-detail {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .req-detail {
    grid-template-columns: 1fr;
  }
}
.req-card {
  border: 1px solid var(--nec-line);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}
.req-card h3 {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nec-ink-soft);
  font-family: var(--font-mono);
  margin: 0 0 0.75rem;
}
.req-field {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.5rem 1rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--nec-line);
  font-size: 0.92rem;
}
.req-field:first-of-type {
  border-top: 0;
}
.req-field .k {
  color: var(--nec-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.req-field .v {
  color: var(--nec-navy);
  font-weight: 500;
  word-break: break-word;
}
.req-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.req-photos a {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--nec-line);
  display: block;
}
.req-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.req-notes textarea {
  width: 100%;
  border: 1px solid var(--nec-line);
  border-radius: 10px;
  padding: 0.7rem;
  font-size: 0.92rem;
  resize: vertical;
  min-height: 90px;
}

/* ---- Admin: convert request → shipment ---- */
.convert-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.convert-form select {
  border: 1px solid var(--nec-line);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  background: #fff;
}
.convert-btn {
  border: 0;
  border-radius: 8px;
  background: var(--nec-orange);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.convert-btn:hover {
  background: #d96800;
}
.ship-link {
  color: var(--nec-orange-text);
  font-weight: 600;
  text-decoration: none;
}
.ship-link:hover {
  text-decoration: underline;
}

/* ---- Admin: drivers panel ---- */
.drivers__add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.drivers__add input {
  flex: 1 1 180px;
  height: 46px;
  border: 1px solid var(--nec-line);
  border-radius: 10px;
  padding: 0 0.9rem;
  font-size: 0.92rem;
}
.drivers__add input:focus {
  outline: none;
  border-color: var(--nec-orange);
  box-shadow: 0 0 0 3px rgba(241, 115, 0, 0.15);
}
.drivers__add .btn-cta {
  flex: 0 0 auto;
}
.drivers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nec-line);
  border-radius: 14px;
  overflow: hidden;
}
.drivers__list li {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--nec-line);
}
.drivers__list li:first-child {
  border-top: 0;
}
.drivers__list li.is-off {
  opacity: 0.55;
}
.drivers__name {
  font-weight: 700;
  color: var(--nec-navy);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.drivers__badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--nec-ink-soft);
  border: 1px solid var(--nec-line);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
.drivers__meta {
  color: var(--nec-ink-soft);
  font-size: 0.85rem;
}
.drivers__toggle {
  border: 1px solid var(--nec-line);
  background: #fff;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nec-navy);
  cursor: pointer;
}
.drivers__toggle:hover {
  border-color: var(--nec-orange);
  color: var(--nec-orange);
}
@media (max-width: 640px) {
  .drivers__list li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ---- File picker (quote photos) ---- */
.filepick {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px dashed #cfd8e3;
  border-radius: 10px;
  color: var(--nec-navy);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.filepick:hover {
  border-color: var(--nec-orange);
  background: rgba(241, 115, 0, 0.05);
}
.filepick i {
  color: var(--nec-orange);
  font-size: 1.15rem;
}
.filepick__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.filepick__thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--nec-line);
}
.filepick__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.filepick__thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 43, 66, 0.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1;
}

/* ---- Address autocomplete (Google Places) dropdown ---- */
.addr {
  position: relative;
}
.addr-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--nec-line);
  border-radius: 12px;
  box-shadow: 0 20px 45px -20px rgba(0, 43, 66, 0.35);
  max-height: 16rem;
  overflow-y: auto;
}
.addr-menu li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--nec-ink);
  cursor: pointer;
  line-height: 1.3;
}
.addr-menu li i {
  color: var(--nec-orange);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.addr-menu li.is-active {
  background: rgba(241, 115, 0, 0.09);
}

/* ---- Status ticker ---- */
.ticker {
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.ticker__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.ticker__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35d07f;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.6);
  animation: nec-pulse 2s infinite;
}
.ticker__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ticker__row:first-of-type {
  border-top: 0;
}
.ticker__time {
  color: var(--nec-orange);
}
.ticker__status {
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
  white-space: nowrap;
}

@keyframes nec-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(53, 208, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(53, 208, 127, 0);
  }
}

/* ==========================================================================
   CAPABILITIES STRIP  (replaces the 4 identical feature cards)
   ========================================================================== */
.caps {
  border-block: 1px solid var(--nec-line);
  background: #fff;
}
.caps__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.caps__row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.caps__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
  border-left: 1px solid var(--nec-line);
}
.caps__item:first-child {
  border-left: 0;
  padding-left: 0;
}
.caps__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  /* Darker than --nec-orange-text so it also passes AA on the off-white caps
     band (#f7f9fb), where the standard orange-text dips to 4.35:1. */
  color: #a85400;
  letter-spacing: 0.08em;
}
.caps__item h3 {
  font-size: 1.12rem;
  color: var(--nec-navy);
  margin: 0.7rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.caps__item p {
  margin: 0;
  color: var(--nec-ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .caps__row {
    grid-template-columns: 1fr 1fr;
  }
  .caps__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .caps__item:nth-child(3),
  .caps__item:nth-child(4) {
    border-top: 1px solid var(--nec-line);
  }
}

/* ==========================================================================
   WAYBILL — the brand's signature object (a proof-of-delivery receipt).
   Stands in for a real photo (client supplies real imagery later) while
   reinforcing the dispatch theme far better than a generic stock shot.
   ========================================================================== */
.waybill {
  background: #fff;
  border: 1px solid var(--nec-line);
  border-radius: 18px;
  box-shadow: 0 30px 60px -34px rgba(0, 43, 66, 0.4);
  overflow: hidden;
  max-width: 30rem;
}
.waybill__top {
  background: var(--nec-navy);
  color: #fff;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.waybill__top .lbl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}
.waybill__top .trk {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--nec-orange);
  font-size: 0.9rem;
}
.waybill__body {
  padding: 1.25rem;
}
.waybill__route {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding-left: 1.5rem;
  margin-bottom: 1.1rem;
}
.waybill__route::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: repeating-linear-gradient(
    var(--nec-orange) 0 6px,
    transparent 6px 11px
  );
}
.waybill__pt {
  position: relative;
}
.waybill__pt::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--nec-orange);
  background: #fff;
}
.waybill__pt--to::before {
  border-radius: 2px;
  background: var(--nec-orange);
}
.waybill__pt .k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--nec-ink-soft);
}
.waybill__pt .v {
  font-weight: 600;
  color: var(--nec-navy);
  font-size: 0.98rem;
}
.waybill__steps {
  border-top: 1px dashed var(--nec-line);
  padding-top: 0.9rem;
  display: grid;
  gap: 0.55rem;
}
.waybill__step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.waybill__step .t {
  color: var(--nec-orange-text);
}
.waybill__step .s {
  color: var(--nec-ink);
}
.waybill__step .c {
  color: #35a06a;
}
.waybill__step.pending .s,
.waybill__step.pending .c {
  color: #9aa6b2;
}
.waybill__sign {
  border-top: 1px dashed var(--nec-line);
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.waybill__sign .k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--nec-ink-soft);
}
.waybill__sign .name {
  font-size: 1.15rem;
  color: var(--nec-navy);
  font-style: italic;
  font-weight: 600;
}

/* ==========================================================================
   HOW IT WORKS  — real 4-step sequence on a route line (numbers earn their place)
   ========================================================================== */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  margin-top: 2.5rem;
}
.flow__step {
  position: relative;
  padding-top: 2.4rem;
}
/* horizontal route line across the steps */
.flow__step::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: -1.5rem;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--nec-orange) 0 8px,
    transparent 8px 14px
  );
}
.flow__step:last-child::before {
  right: 0;
}
.flow__step::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nec-navy);
  border: 3px solid var(--nec-orange);
}
.flow__no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--nec-orange-text);
  letter-spacing: 0.06em;
}
.flow__step h3 {
  font-size: 1.1rem;
  color: var(--nec-navy);
  margin: 0.5rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.flow__step p {
  margin: 0;
  color: var(--nec-ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flow__step {
    padding: 0 0 1.6rem 1.9rem;
  }
  .flow__step::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(
      var(--nec-orange) 0 8px,
      transparent 8px 14px
    );
  }
  .flow__step:last-child::before {
    bottom: 50%;
  }
  .flow__step::after {
    left: 0;
  }
}

/* ==========================================================================
   SERVICE MENU  (rate-sheet rows, not 6 clone cards)
   ========================================================================== */
.menu {
  border: 1px solid var(--nec-line);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 2.5rem;
}
.menu__row {
  display: grid;
  grid-template-columns: 1.1fr 2fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem clamp(1.1rem, 2.5vw, 1.9rem);
  border-top: 1px solid var(--nec-line);
  transition: background 0.15s ease;
}
.menu__row:first-child {
  border-top: 0;
}
.menu__row:hover {
  background: #fafbfc;
}
.menu__name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  color: var(--nec-navy);
  font-size: 1.05rem;
}
.menu__name i {
  color: var(--nec-orange);
  font-size: 1.25rem;
}
.menu__desc {
  color: var(--nec-ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
}
.menu__window {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--nec-navy);
  background: rgba(241, 115, 0, 0.1);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .menu__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .menu__window {
    justify-self: start;
  }
}

/* ==========================================================================
   COVERAGE  (replaces the fake-metric stat band — honest, no invented numbers)
   ========================================================================== */
.coverage {
  background: var(--nec-navy);
  color: #fff;
}
.coverage__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 767px) {
  .coverage__grid {
    grid-template-columns: 1fr;
  }
}
.coverage h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.6rem 0 0;
  text-wrap: balance;
}
.coverage p {
  color: rgba(255, 255, 255, 0.78);
  margin: 1rem 0 0;
  max-width: 40ch;
  line-height: 1.6;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.chips span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
}
.chips span.more {
  color: var(--nec-orange);
  border-color: rgba(241, 115, 0, 0.4);
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.dp-cta {
  position: relative;
  background: var(--nec-navy);
  border-radius: 22px;
  padding: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.dp-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(90% 120% at 100% 0%, #000 20%, transparent 70%);
}
.dp-cta h2 {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.dp-cta p {
  color: rgba(255, 255, 255, 0.8);
  margin: 1rem 0 0;
  max-width: 44ch;
}

/* ==========================================================================
   MOTION — route-line draw on load, honoring reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: nec-reveal 0.7s var(--ease-out-quint) forwards;
  }
  .reveal[data-d="1"] { animation-delay: 0.08s; }
  .reveal[data-d="2"] { animation-delay: 0.16s; }
  .reveal[data-d="3"] { animation-delay: 0.24s; }
}
@keyframes nec-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Proof of delivery (track page + admin capture) ───────────────────── */
.track-pod { margin-top: 2rem; border-top: 1px solid #e3e8ef; padding-top: 1.5rem; }
.track-pod h3 { font-size: .78rem; letter-spacing: .12em; color: var(--nec-orange-text, #b45309); margin-bottom: .75rem; }
.track-pod__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; color: var(--nec-ink, #1f2937); margin-bottom: 1rem; }
.track-pod__meta .mono { font-size: .82rem; color: #64748b; }
.track-pod__imgs { display: flex; flex-wrap: wrap; gap: 1rem; }
.track-pod__imgs figure { margin: 0; }
.track-pod__imgs img { display: block; width: 220px; max-width: 100%; height: auto; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; }
.track-pod__imgs figcaption { font-size: .72rem; letter-spacing: .1em; color: #94a3b8; margin-top: .35rem; }
.pod-capture .req-photos img { width: 160px; }

/* ── Shipping label (printable) ────────────────────────────────────────── */
.ship-label {
  border: 2px solid #002b42;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: #fff;
  color: #16232e;
}
.ship-label__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e3e8ef;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.ship-label__brand { font-weight: 800; font-size: 1.15rem; color: #002b42; }
.ship-label__brand span { color: #b45309; }
.ship-label__rush {
  font: 700 0.7rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: #fff;
  background: #b45309;
  padding: 4px 8px;
  border-radius: 6px;
}
.ship-label__track {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1.25rem;
}
.ship-label__track .mono:first-child { font-size: 1.9rem; font-weight: 700; letter-spacing: 0.04em; color: #002b42; }
.ship-label__track-url { font-size: 0.72rem; color: #64748b; }
.ship-label__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.ship-label__box { border: 1px solid #e3e8ef; border-radius: 8px; padding: 0.85rem; }
.ship-label__k { font-size: 0.68rem; letter-spacing: 0.12em; color: #5b6472; display: block; margin-bottom: 0.35rem; }
.ship-label__addr { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; }
.ship-label__meta { font-size: 0.85rem; color: #475569; margin: 0; }
.ship-label__foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.78rem; color: #334155;
  border-top: 1px solid #e3e8ef; padding-top: 0.75rem;
}
.ship-label__notes { margin-top: 0.85rem; font-size: 0.82rem; color: #475569; }
.ship-label__notes p { margin: 0 0 0.25rem; }
@media (max-width: 480px) { .ship-label__grid { grid-template-columns: 1fr; } }

@media print {
  body > header, body > footer, .skip-link, .no-print, .nec-sec-head, .breadcrumb { display: none !important; }
  body, .label-page, .nec-sec { background: #fff !important; padding: 0 !important; }
  .container { max-width: 100% !important; }
  .ship-label { border-width: 1px; page-break-inside: avoid; }
}

/* ── Live driver location (tracking page) ──────────────────────────────── */
.track-live {
  display: flex; gap: 0.75rem; align-items: center;
  text-decoration: none; color: #16232e;
  background: rgba(53, 160, 106, 0.08);
  border: 1px solid rgba(53, 160, 106, 0.28);
  border-radius: 12px; padding: 0.85rem 1.1rem; margin: 1.25rem 0;
}
.track-live:hover { background: rgba(53, 160, 106, 0.13); }
.track-live strong { color: #1c6f45; }
.track-live__at { display: block; font-size: 0.72rem; color: #5b6472; margin-top: 2px; }
.track-live__pulse {
  width: 12px; height: 12px; border-radius: 50%; background: #218352;
  box-shadow: 0 0 0 0 rgba(53, 160, 106, 0.5); animation: necPulse 2s infinite; flex-shrink: 0;
}
@keyframes necPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 160, 106, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(53, 160, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 160, 106, 0); }
}
@media (prefers-reduced-motion: reduce) { .track-live__pulse { animation: none; } }

/* ── Cookie consent banner ─────────────────────────────────────────────── */
.cookie-consent {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 640px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--nec-line);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(0, 43, 66, 0.35);
  padding: 1rem 1.2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  z-index: 1500;
}
.cookie-consent__text {
  margin: 0; flex: 1 1 260px;
  font-size: 0.9rem; color: var(--nec-ink); line-height: 1.5;
}
.cookie-consent__text a { color: var(--nec-orange-text); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 0.5rem; margin-left: auto; }
@media (max-width: 480px) {
  .cookie-consent { flex-direction: column; align-items: stretch; }
  .cookie-consent__actions { margin-left: 0; }
  .cookie-consent__actions button { flex: 1; justify-content: center; }
}

/* ── How-to Guide (/help) ─────────────────────────────────────────────── */
.help { max-width: 780px; margin: 0 auto; }
.help__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.help__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nec-ink-soft);
  background: #fff;
  border: 1px solid var(--nec-line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}
.help__tab.is-active {
  color: #fff;
  background: var(--nec-navy);
  border-color: var(--nec-navy);
}
.help__tab i { font-size: 1rem; }
.help__blurb {
  font-size: 1.05rem;
  color: var(--nec-ink-soft);
  border-left: 3px solid var(--nec-orange);
  padding-left: 1rem;
  margin-bottom: 2rem;
}
.help__section { margin-bottom: 1.75rem; }
.help__section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  color: var(--nec-navy);
  margin-bottom: 0.9rem;
}
.help__section-head i { color: var(--nec-orange); font-size: 1.2rem; }
.help__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.help__step {
  display: flex;
  gap: 0.9rem;
  background: #fbfcfd;
  border: 1px solid var(--nec-line);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
}
.help__step-num {
  color: #a85400; /* darker orange — AA on the off-white step card */
  font-size: 0.8rem;
  font-weight: 700;
  padding-top: 0.1rem;
  white-space: nowrap;
}
.help__step-title { display: block; color: var(--nec-ink); margin-bottom: 0.2rem; }
.help__step-body { margin: 0; color: var(--nec-ink-soft); font-size: 0.95rem; line-height: 1.55; }
.help__step-body code, .help__blurb code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--nec-ink); /* override Bootstrap's low-contrast pink */
  background: rgba(22, 35, 46, 0.06);
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
}
.help__note {
  margin-top: 2rem;
  background: rgba(241, 115, 0, 0.07);
  border: 1px solid rgba(241, 115, 0, 0.25);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  color: var(--nec-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}