/* Freight page: instrumentation, not photography. Drawn rigs, mono numerics.
   The flat ground this used to paint (background:var(--asphalt)) is gone: it
   was correct while interior pages had no imagery behind them, but .page sits
   at z-index 10 and so painted straight over the .page-bg backdrop that every
   interior page now carries. body keeps the same --asphalt fill underneath,
   so nothing regresses if the frame fails to load. */
.page{ padding-top:96px }
.f-hero .panel{ padding-top:56px }

.rig{ margin:34px 0 8px }
.rig svg{ width:100%; height:auto; max-width:720px; display:block }
.rig figcaption{
  font-family:var(--mono); font-size:.7rem; color:var(--slate);
  margin-top:10px; max-width:56ch;
}

/* Fixed column counts, not auto-fit. .spec-table always holds exactly six
   items; auto-fit(minmax(260px,1fr)) resolved to 4 columns at desktop
   width, leaving 2 cells in row 2 with no item in them. The container
   paints var(--line) to create 1px separators via the gap, so those two
   *empty* grid cells (not just the gap lines) painted that same light
   colour as a solid block — a grey void where a table should be. 6 is
   divisible by 1, 2, and 3, so fixed 3/2/1-column tracks always fill
   whole rows with no leftover cells, at any of these breakpoints. */
/* 2026-09-25 — the cells used to paint var(--asphalt-2), #12161F at full
   alpha: an opaque block inside <main>, over the .page-bg photograph, which
   is exactly what the lighter-site redesign removes everywhere else. Like
   .spec-strip in site.css, it could not just drop the fill — the container
   painted var(--line) and gap:1px let it through as separators, so
   transparent cells would have tinted the whole table. Rebuilt on the
   hairline-and-gap pattern: no container fill, a rule above each cell,
   spacing from the gap. The six label/value pairs (truck dimensions, pallet
   counts) keep their mono type, their baseline alignment and their
   left-label/right-value reading order — only the box is gone.

   The fixed 3/2/1 column tracks stay fixed for the reason given above:
   auto-fit would leave empty cells. With no container fill an empty cell no
   longer paints the grey void that note describes, but a ragged last row is
   still wrong for a table, so the tracks stay as they are. */
.spec-table{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 44px; background:none; border:0; margin-top:30px;
}
.spec-table > div{
  background:none; border-top:1px solid var(--line); padding:14px 0 16px;
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
}
.spec-table dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate); white-space:nowrap;
}
.spec-table dd{ font-family:var(--mono); font-size:.84rem; color:var(--bone); text-align:right }

@media (max-width:900px){
  .spec-table{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .spec-table{ grid-template-columns:1fr }
  .spec-table > div{ flex-direction:column; gap:6px }
  .spec-table dd{ text-align:left }
}

/* minmax(min(N,100%),1fr) — see the note on .spec-table. The bare
   minmax(300px,1fr) would clip these cards on any phone. */
.engage-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:30px 44px; margin-top:30px;
}
/* 2026-09-25 — same opaque-fill removal as .spec-table above, and the same
   treatment .svc/.comp/.mode took in site.css: no fill, no box border, a
   1px top rule and the grid gap doing the separating. */
.engage{ border:0; border-top:1px solid var(--line); padding:22px 0 0; background:none }
.engage h3{ font-size:1.15rem; margin:12px 0 12px }

/* contain:paint is load-bearing. A wide table inside overflow-x:auto still
   contributes to the VIEWPORT's scrollable width without it, and
   body{overflow-x:hidden} propagates to the viewport instead of clipping. */
.lane-scroll{ overflow-x:auto; contain:paint; margin-top:28px; border:1px solid var(--line) }
.lane-table{ width:100%; border-collapse:collapse; min-width:560px }
.lane-table th, .lane-table td{
  text-align:left; padding:13px 18px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.78rem;
}
.lane-table th{ color:var(--slate); letter-spacing:.08em; text-transform:uppercase; font-size:.66rem }
.lane-table td:nth-child(2){ color:var(--signal); white-space:nowrap }
.lane-table tbody tr:last-child td{ border-bottom:none }
.lane-note{ font-family:var(--mono); font-size:.72rem; color:var(--slate); margin-top:16px; max-width:74ch }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* This page (and its Wave 2 siblings) loads no route.js, so body never gets
   the "ready" class site.css uses to fade in nav/main/footer after the frame
   loader finishes. Body ships with class="ready" already set in markup;
   this rule is the belt-and-suspenders fallback in case that ever slips. */
nav, main, footer{ opacity:1 }

.qform-freight .fq-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.qform-freight .fq-row-3{ grid-template-columns:1fr 1fr 1fr }
.qform-freight [hidden]{ display:none }
@media (max-width:620px){
  .qform-freight .fq-row,
  .qform-freight .fq-row-3{ grid-template-columns:1fr }
}