/* ============================================================
   LOADED LOGISTICS - CORE
   Tokens lifted from the live Loaded Logistics brand so this
   build and hawkinsonfreight.com read as one family.
   Cyan is the accent. Violet is reserved for completion states
   and the Hawkinson Freight relationship, never decoration.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Surfaces. Brand ink scale, never pure black. */
  --ink-000: #04060b;
  --ink-050: #07090f;
  --ink-100: #0d111b;
  --ink-200: #131928;
  --ink-300: #1b2233;
  --ink-400: #262f44;

  /* Hairlines */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.17);
  --line-3: rgba(255, 255, 255, 0.28);

  /* Text */
  --fog-100: #7e8798;
  --fog-200: #aeb7c6;
  --fog-300: #ccd4e0;
  --paper: #f0f3f8;

  /* Accent: brand cyan. Locked across every page. */
  --accent: #16c7de;
  --accent-hot: #53dbec;
  --accent-deep: #0b7f90;
  --accent-ink: #04262d;
  --accent-wash: rgba(22, 199, 222, 0.12);
  --accent-line: rgba(22, 199, 222, 0.32);

  /* Secondary: brand violet. Completion states and Hawkinson. */
  --violet: #8b5cff;
  --violet-soft: #a98bff;
  --violet-wash: rgba(139, 92, 255, 0.12);

  /* Geometry */
  --r: 4px;
  --r-lg: 10px;
  --gutter: clamp(20px, 5vw, 64px);
  --shell: 1360px;
  --nav-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.22s;
  --t-mid: 0.5s;
  --t-slow: 0.9s;

  /* Type. Archivo: an American grotesque built for signage, which is
     why it suits a trucking brand. Goes to 800, so the display scale
     runs heavier and tighter than a condensed face would allow. */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

/* ---------- 2. RESET ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-100);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: var(--ink-000); }

.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;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--accent); color: var(--ink-000);
  padding: 10px 16px; border-radius: var(--r); font-weight: 700;
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 3. LAYOUT ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(72px, 11vw, 160px); position: relative; }
.band--tight { padding-block: clamp(56px, 7vw, 96px); }

/* ---------- 4. TYPE ----------
   Archivo is wider than a condensed face, so the scale comes back
   down and the tracking goes negative to keep the display lines
   tight. Weight 800 is available and is what gives the headlines
   their mass. */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 8.2vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h3 {
  font-weight: 700;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--fog-300);
  max-width: 56ch;
}

.body { color: var(--fog-200); max-width: 62ch; line-height: 1.68; }

/* The one small-caps label style. Rationed: max 3 per page. */
.tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  padding: 14px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-hot); }

/* Used only for the Hawkinson Freight handoff. */
.btn--violet { background: var(--violet); color: #0c0620; }
.btn--violet:hover { background: var(--violet-soft); }

.btn--ghost {
  border-color: var(--line-2);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.02);
}
.btn--ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, 0.06); }

.btn--sm { padding: 10px 18px; font-size: 0.8125rem; }

.btn .arw { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ---------- 6. NAV ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 90;
  display: flex;
  align-items: center;
  background: rgba(7, 9, 15, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.nav[data-stuck="true"] { background: rgba(7, 9, 15, 0.94); border-bottom-color: var(--line); }

.nav__in {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; }
/* Stacked wordmark, matching the live brand lockup. */
.brand__txt { display: block; line-height: 1; }
.brand__txt b {
  display: block;
  font-weight: 800; font-size: 1.1875rem;
  letter-spacing: 0.01em; text-transform: uppercase;
}
.brand__txt i {
  display: block; margin-top: 2px;
  font-style: normal; font-family: var(--f-mono);
  font-size: 0.5625rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent);
}

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__link {
  padding: 8px 13px;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--fog-200);
  border-radius: var(--r);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--paper); background: rgba(255, 255, 255, 0.05); }
.nav__link[aria-current="page"] { color: var(--paper); }

.nav__cta { margin-left: 14px; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: none; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--paper);
  position: relative; transition: background 0.15s;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--paper); transition: transform var(--t-fast) var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after { top: 5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 26px;
    background: rgba(10, 13, 17, 0.985);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .nav__links[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav__link { padding: 15px 0; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__cta { margin: 18px 0 0; justify-content: center; }
}

/* ---------- 7. FOOTER ---------- */
.foot {
  border-top: 1px solid var(--line);
  background: var(--ink-050);
  padding-block: clamp(56px, 7vw, 88px) 32px;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(32px, 5vw, 64px);
}
.foot__co { max-width: 34ch; }
.foot__co .body { font-size: 0.9375rem; margin-top: 16px; }
.foot h4 {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fog-100);
  margin: 0 0 18px;
}
.foot__col a, .foot__col span {
  display: block; padding: 7px 0; font-size: 0.9375rem; color: var(--fog-200);
  transition: color var(--t-fast) var(--ease);
}
.foot__col a:hover { color: var(--accent); }

.foot__base {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--fog-100);
}
.foot__base a:hover { color: var(--accent); }

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__co { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* ---------- 8. PLACEHOLDER MEDIA SLOTS ----------
   Intentional, labeled asset slots. Swap the whole element for an
   <img>. Every slot is listed in README.md with its target spec. */
.slot {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(22, 199, 222, 0.10), transparent 58%),
    linear-gradient(158deg, var(--ink-300), var(--ink-050) 72%);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.slot::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.55;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 80%);
  pointer-events: none;
}
.slot__spec {
  position: relative; z-index: 1;
  font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fog-100); text-align: center;
  padding: 14px 18px; line-height: 1.9;
}
.slot__spec b { display: block; color: var(--fog-300); font-weight: 500; }

/* ---------- 8b. PHOTOGRAPHY ----------
   Real equipment, framed like every other surface on the site. The
   grade matters: these were shot in daylight and the palette is a
   night one, so they are desaturated and pulled down slightly, then
   given the same cyan wash and bottom falloff as the panels. Without
   it a bright daylight photo punches a hole in the page. */
.photo {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-200);
  isolation: isolate;
}
.photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.05) brightness(0.9);
}
.photo::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(22, 199, 222, 0.12), transparent 58%),
    linear-gradient(178deg, rgba(4, 6, 11, 0) 46%, rgba(4, 6, 11, 0.5));
}
.split__media.photo { aspect-ratio: 6 / 7; min-height: 0; }
.photo--wide { aspect-ratio: 7 / 5; }
@media (max-width: 860px) {
  .split__media.photo { aspect-ratio: 4 / 3; }
}

/* ---------- 9. FIELDS ---------- */
.field { display: grid; gap: 8px; }
.field > label {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fog-200);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--ink-050);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--paper);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6d7885; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: var(--ink-100);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field small { font-size: 0.8125rem; color: var(--fog-100); }
.field [data-err] { font-size: 0.8125rem; color: #ff9b7a; min-height: 0; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fog-200) 50%),
                    linear-gradient(135deg, var(--fog-200) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field select option { background: var(--ink-200); }

/* ---------- 10. REVEAL (IntersectionObserver driven) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 11. TRUCK MODE ----------
   A global night-cab overlay. Dims the page to cab-instrument
   levels, warms the accent, and reveals the driver-view HUD. */
.tm-toggle {
  position: fixed;
  right: max(18px, calc((100vw - var(--shell)) / 2 + 18px));
  bottom: 22px;
  z-index: 88;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(10, 13, 17, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fog-200); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.tm-toggle:hover { color: var(--paper); border-color: var(--accent-line); }
.tm-toggle__led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-400);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
body[data-truckmode="on"] .tm-toggle__led {
  background: var(--accent);
  box-shadow: 0 0 9px 1px rgba(22, 199, 222, 0.7);
}

/* Cab overlay: vignette + dash glow + windshield rain-glass tint */
.cab {
  position: fixed; inset: 0; z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
body[data-truckmode="on"] .cab { opacity: 1; }
.cab__vig {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 88% at 50% 42%, transparent 34%, rgba(4, 6, 8, 0.62) 82%, rgba(3, 4, 6, 0.9) 100%);
}
.cab__dash {
  position: absolute; inset: auto 0 0 0; height: 34vh; min-height: 190px;
  background:
    radial-gradient(90% 130% at 50% 118%, rgba(22, 199, 222, 0.22), transparent 62%),
    linear-gradient(to top, rgba(4, 6, 8, 0.94), transparent);
}
.cab__hud {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) 78px;
  display: flex; justify-content: center; gap: clamp(24px, 5vw, 68px);
  font-family: var(--f-mono);
  transform: translateY(18px);
  transition: transform 0.7s var(--ease);
}
body[data-truckmode="on"] .cab__hud { transform: none; }
.cab__gauge { text-align: center; }
.cab__gauge b {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 500; line-height: 1;
  color: var(--accent-hot);
  text-shadow: 0 0 22px rgba(83, 219, 236, 0.45);
  font-variant-numeric: tabular-nums;
}
.cab__gauge span {
  display: block; margin-top: 8px;
  font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(22, 199, 222, 0.66);
}

/* Page response to truck mode */
body[data-truckmode="on"] {
  --line: rgba(255, 255, 255, 0.055);
  background: var(--ink-000);
}
body[data-truckmode="on"] .band { filter: brightness(0.72) contrast(1.06) saturate(0.9); }
body[data-truckmode="on"] .nav { background: rgba(4, 6, 8, 0.9); }

/* ---------- 12. HEADLIGHTS ----------
   A soft warm pool that tracks the pointer. Coordinates are written
   to CSS custom properties by core.js on a single rAF tick. */
.beams {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  background: radial-gradient(
    340px 340px at var(--mx, 50%) var(--my, 40%),
    rgba(83, 219, 236, 0.075),
    rgba(83, 219, 236, 0.028) 42%,
    transparent 72%
  );
}
body[data-beams="on"] .beams { opacity: 1; }
body[data-truckmode="on"] .beams {
  background: radial-gradient(
    440px 440px at var(--mx, 50%) var(--my, 40%),
    rgba(120, 225, 240, 0.15),
    rgba(83, 219, 236, 0.05) 44%,
    transparent 74%
  );
}

/* ---------- 13. ROAD RULE ----------
   A hairline that reads as lane marking. Dashes advance with scroll
   via a CSS variable set by the scroll ticker. */
.roadrule {
  height: 1px; border: 0; margin: 0;
  background-image: linear-gradient(90deg, var(--line-2) 0 34px, transparent 34px 62px);
  background-size: 62px 1px;
  background-position: calc(var(--road, 0) * -1px) 0;
}

/* ---------- 14. UTILITIES ---------- */
.stack { display: grid; gap: 22px; justify-items: start; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-l { margin-top: clamp(32px, 4vw, 52px); }

/* ---------- Legal pages ----------
   Long-form reading, so the measure is capped and the rhythm is
   looser than the marketing pages. */
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.prose { max-width: 68ch; display: grid; gap: 18px; }
.prose h2 {
  margin-top: clamp(28px, 4vw, 46px);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800;
  letter-spacing: -0.02em; color: var(--paper);
}
.prose h3 {
  margin-top: 14px;
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.prose p, .prose li { color: var(--fog-200); line-height: 1.75; }
.prose ul { display: grid; gap: 10px; padding-left: 20px; }
.prose li::marker { color: var(--accent-deep); }
.prose a { color: var(--accent); }
.prose strong { color: var(--paper); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line); color: var(--fog-200); vertical-align: top;
}
.prose th {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fog-100);
}
.legal-meta {
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fog-100);
}
.center-col { max-width: 720px; }

/* ---------- 15. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .beams { display: none; }
  .roadrule { background-position: 0 0 !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .tm-toggle { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink-050); }
}