/* Lifetime Logistics brand kit: fonts, colours and the website's building blocks.
   Same look as lifetimelogistics.com (read from its code). Everything here is opt-in: the
   colours are variables and every block is an "ll-" class, so adding this file to an existing
   project changes nothing until a page uses them (apart from making the fonts available).
   For a new project, add base.css too.

   Fonts load from ../fonts/ (this kit's own copies, nothing from Google). Keep css/ and fonts/
   side by side as sync.mjs copies them. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colours (scripts/brand.mjs lists where the website uses each one). */
  --ll-navy: #0d1f3c;
  --ll-navy-deep: #0a1628;
  --ll-gold: #d4982e;
  --ll-gold-light: #e6b04d;
  --ll-gold-text: #8a5d0f;
  --ll-gold-deep: #6b4a0c;
  --ll-cream: #f3efe6;
  --ll-cream-line: #e2dccd;
  --ll-paper: #f8f7f4;
  --ll-canvas: #fafafa;
  --ll-white: #ffffff;
  --ll-ink: #081021;
  --ll-text: #374151;
  --ll-muted: #4b5563;
  --ll-subtle: #6b7280;
  --ll-faint: #9ca3af;
  --ll-line: #e5e7eb;
  --ll-line-strong: #d1d5db;
  --ll-field: #8b94a3;
  --ll-danger: #b42318;

  /* Type */
  --ll-font-text: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ll-font-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

  /* Shapes: the website's buttons, fields and cards are square. */
  --ll-radius: 0;
  --ll-container: 72rem;
  --ll-focus: 3px solid var(--ll-gold);
}

/* The kit sizes its own blocks the same way whatever the page does (width includes padding). */
.ll-header,
.ll-header *,
.ll-footer,
.ll-footer *,
.ll-btn,
.ll-field,
.ll-card,
.ll-panel {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ header */
/* Navy bar with a 2px gold line, the compass and the name, like the website's header. */
.ll-header {
  position: sticky;
  top: 0;
  z-index: 40;
  color: #fff;
  background: var(--ll-navy);
  border-bottom: 2px solid var(--ll-gold);
}
.ll-header__inner {
  max-width: var(--ll-container);
  margin: 0 auto;
  padding: 0 1rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ll-brand,
.ll-brand:hover {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}
.ll-brand__logo {
  display: block;
  height: 2.25rem;
  width: auto;
  flex: none;
}
.ll-brand__name {
  font-family: var(--ll-font-head);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A small line under the name, in gold (for example "Tracking" or "Load tracking"). */
.ll-brand__sub {
  display: block;
  font-family: var(--ll-font-text);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ll-gold-light);
}
/* Links in the bar: shown from 1024px, as on the website (on phones they go in .ll-menu). */
.ll-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
.ll-nav a {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
  text-decoration: none;
}
.ll-nav a:hover {
  color: #fff;
}
.ll-nav a[aria-current='page'] {
  color: var(--ll-gold-light);
}
.ll-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* The phone number in the bar, from 640px (gold icon, white number). */
.ll-header__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.ll-header__phone svg {
  width: 1rem;
  height: 1rem;
  color: var(--ll-gold-light);
}
/* The menu button and the menu panel for phones (js/header-menu.js opens and closes it). */
.ll-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}
.ll-menu-button svg {
  width: 1.5rem;
  height: 1.5rem;
}
.ll-menu {
  background: var(--ll-navy-deep);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.ll-menu ul {
  max-width: var(--ll-container);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  list-style: none;
}
.ll-menu a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.ll-skip {
  position: absolute;
  left: -9999px;
}
/* Text for screen readers only. */
.ll-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ll-skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 50;
  padding: 0.5rem 0.75rem;
  color: var(--ll-navy);
  background: #fff;
}
@media (min-width: 640px) {
  .ll-header__inner {
    padding: 0 1.5rem;
    height: 4rem;
  }
  .ll-brand__name {
    font-size: 1.25rem;
  }
  .ll-header__phone {
    display: inline-flex;
  }
}
@media (min-width: 1024px) {
  .ll-nav {
    display: flex;
  }
  .ll-menu-button,
  .ll-menu {
    display: none;
  }
}

/* ------------------------------------------------------------------ footer */
.ll-footer {
  color: #fff;
  background: var(--ll-navy-deep);
}
.ll-footer__inner {
  max-width: var(--ll-container);
  margin: 0 auto;
  padding: 2.5rem 1rem;
}
.ll-footer :where(p, li) {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.8);
}
.ll-footer :where(a) {
  color: inherit;
  text-underline-offset: 2px;
}
.ll-footer :where(a):hover {
  color: #fff;
}
.ll-footer .ll-footer__name {
  margin: 0;
  font-family: var(--ll-font-head);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #fff;
}
.ll-footer .ll-footer__head {
  margin: 0 0 0.5rem;
  font-family: var(--ll-font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ll-gold-light);
}
/* Footer link lists: not underlined until hovered, as on the website. */
.ll-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ll-footer .ll-footer__link {
  display: inline-block;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
}
.ll-footer .ll-footer__link:hover {
  color: #fff;
  text-decoration: underline;
}
.ll-footer__legal {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.ll-footer .ll-footer__legal p {
  max-width: var(--ll-container);
  margin: 0 auto;
  padding: 1rem;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.75);
}
@media (min-width: 640px) {
  .ll-footer__inner,
  .ll-footer .ll-footer__legal p {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ------------------------------------------------------------------ bands and headings */
.ll-band-navy {
  color: #fff;
  background: var(--ll-navy);
}
.ll-band-navy :where(h1, h2, h3, h4) {
  color: #fff;
}
.ll-band-cream {
  background: var(--ll-cream);
  border-bottom: 1px solid var(--ll-cream-line);
}
.ll-h1,
.ll-h2,
.ll-h3 {
  margin: 0;
  font-family: var(--ll-font-head);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ll-navy);
}
/* Sizes follow the website's breakpoints (Tailwind sm 640px, lg 1024px). */
.ll-h1 {
  font-size: 2.1rem;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.ll-h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}
.ll-h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}
@media (min-width: 640px) {
  .ll-h1 {
    font-size: 3rem;
  }
  .ll-h2 {
    font-size: 1.875rem;
  }
}
@media (min-width: 1024px) {
  .ll-h1 {
    font-size: 3.4rem;
  }
}
.ll-band-navy .ll-h1,
.ll-band-navy .ll-h2,
.ll-band-navy .ll-h3 {
  color: #fff;
}
.ll-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ll-gold-deep);
}
/* Body copy as the website sets its page text. */
.ll-prose {
  font-size: 1.02rem;
  line-height: 1.625;
  color: var(--ll-text);
}

/* ------------------------------------------------------------------ links */
.ll-link {
  font-weight: 600;
  color: var(--ll-navy);
  text-decoration: underline;
  text-decoration-color: var(--ll-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.ll-link:hover {
  color: var(--ll-gold-text);
}
.ll-band-navy .ll-link,
.ll-header .ll-link {
  color: #fff;
}
.ll-band-navy .ll-link:hover,
.ll-header .ll-link:hover {
  color: var(--ll-gold-light);
}

/* ------------------------------------------------------------------ buttons */
/* Square, bold. Gold with navy text is the main action ("Get a quote"). The text colour is set
   on :hover too, so a page's own link-hover colour never shows through. */
.ll-btn,
.ll-btn:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 2rem;
  border: 1px solid transparent;
  border-radius: var(--ll-radius);
  font-family: var(--ll-font-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ll-navy);
  background: var(--ll-gold);
  cursor: pointer;
}
.ll-btn:hover {
  background: var(--ll-gold-light);
}
.ll-btn:disabled,
.ll-btn[aria-disabled='true'] {
  opacity: 0.7;
  cursor: not-allowed;
}
.ll-btn--small,
.ll-btn--small:hover {
  min-height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.875rem;
}
.ll-btn--navy,
.ll-btn--navy:hover {
  color: #fff;
  background: var(--ll-navy);
}
.ll-btn--navy:hover {
  background: var(--ll-navy-deep);
}
/* On navy: white outline ("Call (562) 566-8953"). */
.ll-btn--on-navy,
.ll-btn--on-navy:hover {
  color: #fff;
  background: transparent;
  border-color: rgb(255 255 255 / 0.6);
}
.ll-btn--on-navy:hover {
  background: rgb(255 255 255 / 0.1);
}
/* On light backgrounds: navy outline for a second choice (not on the website; kit addition). */
.ll-btn--outline,
.ll-btn--outline:hover {
  color: var(--ll-navy);
  background: #fff;
  border: 2px solid var(--ll-navy);
}
.ll-btn--outline:hover {
  background: var(--ll-cream);
}

/* ------------------------------------------------------------------ fields */
.ll-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ll-navy);
}
.ll-field {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ll-field);
  border-radius: var(--ll-radius);
  font-family: var(--ll-font-text);
  font-size: 1rem;
  color: var(--ll-navy);
  background: #fff;
}
textarea.ll-field {
  height: auto;
  min-height: 6rem;
  padding: 0.6rem 0.75rem;
}
.ll-field::placeholder {
  color: var(--ll-subtle);
}
.ll-field:focus {
  outline: none;
  border-color: var(--ll-navy);
  box-shadow: 0 0 0 2px var(--ll-gold);
}
.ll-field[aria-invalid='true'] {
  border-color: var(--ll-danger);
}
.ll-error {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--ll-danger);
}

/* Pages drivers use outdoors (the driver application, the tracking link): darker field borders,
   bigger labels and taller targets for sunlight and thumbs. Put the class on <body> or a wrapper.
   (A kit addition; the website has no such pages.) */
.ll-outdoor .ll-field {
  height: 3rem;
  border-color: var(--ll-subtle);
}
.ll-outdoor .ll-label {
  font-size: 1rem;
  font-weight: 700;
}
.ll-outdoor .ll-btn {
  min-height: 3rem;
}

/* ------------------------------------------------------------------ cards and panels */
.ll-card,
a.ll-card:hover {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--ll-line-strong);
  border-radius: var(--ll-radius);
  color: inherit;
  background: #fff;
  text-decoration: none;
}
a.ll-card:hover {
  border-color: var(--ll-navy);
}
/* The quote form's card: white, gold top edge, deep shadow. */
.ll-panel {
  padding: 1rem;
  border-top: 4px solid var(--ll-gold);
  color: var(--ll-text);
  background: #fff;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
@media (min-width: 640px) {
  .ll-panel {
    padding: 1.25rem;
  }
}

/* ------------------------------------------------------------------ focus */
.ll-header :focus-visible,
.ll-footer :focus-visible,
.ll-btn:focus-visible,
.ll-link:focus-visible,
.ll-card:focus-visible {
  outline: var(--ll-focus);
  outline-offset: 2px;
}