/* Generated (phase-5 PR3): one class per distinct inline style formerly on book.html. Content-addressed (tl-<sha1[:8]>). */
.tl-069b6cb7.tl-069b6cb7{padding:1.5rem 2rem}
.tl-0dc05c0a.tl-0dc05c0a{padding:1.25rem 2rem;border-bottom:1px solid rgba(26,20,16,0.08)}
.tl-0f8d0d57.tl-0f8d0d57{max-width:1100px;margin:0 auto}
.tl-118e15e4.tl-118e15e4{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tl-1350c11e.tl-1350c11e{width:16px;height:16px;accent-color:#C0392B;margin-top:2px;flex-shrink:0}
.tl-1696b5c8.tl-1696b5c8{color:#12826D;font-weight:600}
.tl-17c695c8.tl-17c695c8{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.tl-21fb9cae.tl-21fb9cae{padding:1.25rem 2rem;border-bottom:1px solid rgba(26,20,16,0.08);border-right:1px solid rgba(26,20,16,0.08)}
.tl-24f9347f.tl-24f9347f{background:#FAFAF8;padding:5rem 3rem}
.tl-273f7f74.tl-273f7f74{background:#1A1410;padding:2rem 3rem;border-bottom:1px solid rgba(255,255,255,0.1)}
.tl-299396ba.tl-299396ba{font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:rgba(26,20,16,0.76);margin-bottom:4px}
.tl-2fdf9b03.tl-2fdf9b03{display:inline-flex;align-items:center;gap:8px;background:rgba(192,57,43,0.25);border:1px solid rgba(192,57,43,0.5);padding:7px 16px;border-radius:100px;margin-bottom:1.5rem}
.tl-30e1e909.tl-30e1e909{background:#0F2D5C;padding:1.5rem 2rem;color:white;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.tl-3faaa9f4.tl-3faaa9f4{background:linear-gradient(135deg,#C0392B,#E74C3C);color:white;padding:1rem;border-radius:8px;font-size:18px;text-align:center}
.tl-49cd0921.tl-49cd0921{display:flex;gap:6px}
.tl-4a4d7aed.tl-4a4d7aed{font-size:17px;color:rgba(255,255,255,0.7);max-width:680px;line-height:1.7;font-weight:300}
.tl-4c3bf42d.tl-4c3bf42d{font-family:'DM Serif Display',serif;font-size:22px;font-weight:400}
.tl-5343e053.tl-5343e053{font-size:11px;color:rgba(26,20,16,0.8);margin-top:2px}
.tl-549178ea.tl-549178ea{padding:1.5rem 2rem;border-bottom:1px solid rgba(26,20,16,0.08);background:#FAFAF8}
.tl-57cf02c3.tl-57cf02c3{background:#F5F0E8;padding:1rem 2rem;display:flex;gap:0.5rem;align-items:center;font-size:11px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(26,20,16,0.8)}
.tl-57ed41de.tl-57ed41de{font-family:'DM Serif Display',serif;font-size:24px;color:#1A1410}
.tl-5cb2d6e3.tl-5cb2d6e3{display:flex;align-items:center;gap:8px;background:rgba(18,130,109,0.2);border:1px solid rgba(18,130,109,0.4);padding:6px 14px;border-radius:100px}
.tl-5ec92827.tl-5ec92827{width:8px;height:8px;border-radius:50%;background:#12826D;animation:blink 1.6s infinite}
.tl-64775154.tl-64775154{font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#C0392B;margin-bottom:1rem;margin-top:1rem}
.tl-65c9d0a4.tl-65c9d0a4{width:100%;border:none;outline:none;background:transparent;color:#1A1410;font-size:15px;font-family:'DM Sans',sans-serif;cursor:pointer;-webkit-appearance:none}
.tl-6924564e.tl-6924564e{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem}
.tl-6b99de8b.tl-6b99de8b{display:none}
.tl-6c7a381a.tl-6c7a381a{font-size:11px;font-weight:700;letter-spacing:0.08em;color:white}
.tl-740f5ea9.tl-740f5ea9{display:block;width:100%;background:#C0392B;color:white;padding:1.25rem;border:none;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 16px rgba(192,57,43,0.3)}
.tl-78614a48.tl-78614a48{width:8px;height:8px;border-radius:50%;background:#E74C3C;animation:blink 1.6s infinite}
.tl-7fe840e1.tl-7fe840e1{display:flex;gap:1.5rem;flex-wrap:wrap}
.tl-86b6adea.tl-86b6adea{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem}
.tl-8c102347.tl-8c102347{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:rgba(26,20,16,0.65);line-height:1.6;margin-bottom:1.5rem}
.tl-8c389733.tl-8c389733{display:block;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(26,20,16,0.72);margin-bottom:6px}
.tl-97082997.tl-97082997{font-size:13px;font-weight:600;color:#1A1410;margin-bottom:0.75rem}
.tl-99ddfafa.tl-99ddfafa{width:100%;border:none;outline:none;background:transparent;color:#1A1410;font-size:15px;font-family:'DM Sans',sans-serif}
.tl-9bdd6a55.tl-9bdd6a55{padding:1.5rem 2rem;background:#F5F0E8;border-bottom:1px solid rgba(26,20,16,0.06)}
.tl-9c2c2c56.tl-9c2c2c56{font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#C0392B;margin-bottom:1rem;margin-top:2rem}
.tl-9db3b555.tl-9db3b555{width:16px;height:16px;accent-color:#C0392B}
.tl-9f60053f.tl-9f60053f{background:linear-gradient(135deg,#0F2D5C 0%,#1B4F8A 100%);padding:5rem 3rem 4rem;color:white;position:relative;overflow:hidden}
.tl-aa44d615.tl-aa44d615{text-align:center;padding:1rem;border-right:1px solid rgba(255,255,255,0.08)}
.tl-abcd2749.tl-abcd2749{font-size:24px;margin-bottom:0.5rem}
.tl-b7d48f10.tl-b7d48f10{font-size:12px;color:rgba(255,255,255,0.6);margin-top:2px}
.tl-ba6caa37.tl-ba6caa37{display:grid;grid-template-columns:1fr 1fr}
.tl-bc9eeb42.tl-bc9eeb42{background:transparent !important;border:1.5px solid currentColor;color:#FFFFFF !important}
.tl-bf359c9a.tl-bf359c9a{font-family:'DM Serif Display',serif;font-size:32px;color:#12826D;line-height:1}
.tl-d0bfd4a6.tl-d0bfd4a6{max-width:1400px;margin:0 auto;position:relative;z-index:2}
.tl-da197dc8.tl-da197dc8{text-align:center;padding:1.5rem 1rem;background:white;border:1px solid rgba(26,20,16,0.08);border-radius:10px}
.tl-dbe2b23a.tl-dbe2b23a{text-align:center;padding:1rem}
.tl-e0846e63.tl-e0846e63{width:100%;border:none;outline:none;background:transparent;color:#1A1410;font-size:15px;font-family:'DM Sans',sans-serif;resize:vertical}
.tl-e08c15b5.tl-e08c15b5{background:#C0392B !important;color:white !important;margin-right:0.5rem}
.tl-e41a4a51.tl-e41a4a51{color:#C0392B;font-weight:700;text-decoration:none}
.tl-e6c9fe5c.tl-e6c9fe5c{background:white;border:1px solid rgba(26,20,16,0.08);border-radius:14px;overflow:hidden;box-shadow:0 8px 32px rgba(15,45,92,0.06)}
.tl-e6f28725.tl-e6f28725{position:absolute;top:0;right:0;width:50%;height:100%;opacity:0.12;pointer-events:none}
.tl-e738eafd.tl-e738eafd{font-family:'DM Serif Display',serif;font-size:clamp(40px,5vw,68px);color:white;font-weight:400;line-height:1.05;margin-bottom:1rem;max-width:780px}
.tl-e98f14ff.tl-e98f14ff{background:white;border:1px solid rgba(26,20,16,0.1);border-radius:12px;padding:2rem;margin-bottom:2.5rem;box-shadow:0 4px 16px rgba(15,45,92,0.05)}
.tl-ea1fbf45.tl-ea1fbf45{text-align:center;margin-top:1rem;font-size:12px;color:rgba(26,20,16,0.8)}
.tl-f00193de.tl-f00193de{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#1A1410}
.tl-f725a7b2.tl-f725a7b2{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.78);margin-top:4px}
.tl-f7a1aa33.tl-f7a1aa33{display:grid;grid-template-columns:1fr 1fr 1fr}
.tl-fc511f0c.tl-fc511f0c{margin-top:1.5rem}
.tl-ffadf4df.tl-ffadf4df{display:block;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(26,20,16,0.72);margin-bottom:10px}
/* Externalised from 1 inline <style> block(s) in book.html (phase-5 PR4:
   drop style-src 'unsafe-inline'). Concatenated in document order. */
/* Truck slot indicators */
.truck-slot {
  width: 28px;
  height: 36px;
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.truck-slot::before {
  content: '🚛';
  filter: grayscale(1);
}
.truck-slot.available {
  background: rgba(18,130,109, 0.15);
  border: 1.5px solid #12826D;
}
.truck-slot.available::before {
  filter: none;
}
.truck-slot.booked {
  background: rgba(26, 20, 16, 0.05);
  border: 1.5px solid rgba(26, 20, 16, 0.15);
  opacity: 0.4;
}

/* Bigger, more visible Trans Link logo watermark on mountain video */
.hero-media::before {
  width: 180px !important;
  height: 75px !important;
  top: 100px !important;
  left: 3rem !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  border: 2px solid rgba(15, 45, 92, 0.2) !important;
}
.hero-media::after {
  content: 'TRANS LINK FLEET · CANADA · USA · MEXICO' !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  padding: 10px 20px !important;
}


/* Brighter daylight filter for mountain truck video */
.hero-media video {
  filter:
    contrast(1.1)
    saturate(1.2)
    brightness(1.05) !important;
}


/* YouTube hero iframe - cover entire hero area */
.hero-media iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vw !important;
  height: 56.25vw !important;
  min-height: 100vh !important;
  min-width: 177.78vh !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  border: 0 !important;
  filter: contrast(1.1) saturate(1.15) brightness(1.0) !important;
}

/* Prevent any YouTube-overlay interaction by adding a transparent click blocker */
.hero-media::before,
.hero-media::after {
  z-index: 10 !important;
}


/* Marquee items with inline logos */
.marquee-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.marquee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.marquee-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}


/* Night city lights filter — vivid lights against dark sky */
.hero-media video {
  filter:
    contrast(1.06)
    saturate(1.12)
    brightness(1.05) !important;
}
.hero-media iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vw !important;
  height: 56.25vw !important;
  min-height: 100vh !important;
  min-width: 177.78vh !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  border: 0 !important;
  filter: contrast(1.15) saturate(1.25) brightness(1.0) !important;
}


/* Hero video — clean stock truck in city lights */
.hero-media iframe { display: none !important; }
.hero-media video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  opacity: 1 !important;
  filter: none !important;
}


/* ── Language toggle ── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 4px;
  margin-right: 8px;
}
.lang-toggle button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}
.lang-toggle button:hover {
  color: white;
}
.lang-toggle button.active {
  background: #C0392B;
  color: white;
}
nav.scrolled .lang-toggle {
  background: rgba(255,255,255,0.06);
}
@media (max-width: 1024px) {
  .lang-toggle { display: none; }
  .lang-toggle-mobile { display: flex !important; }
}
.lang-toggle-mobile { display: none; gap: 0.5rem; margin-bottom: 2rem; }
.lang-toggle-mobile button {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  padding: 10px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.lang-toggle-mobile button.active {
  background: #C0392B;
  border-color: #C0392B;
  color: white;
}


@media (max-width: 768px) {
  #real-projects .tlm-gridtemplateco5 {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  #real-projects .tlm-gridtemplatero > div {
    height: 280px;
  }
}

/* ══ MOBILE + WCAG 2.2 AA HARDENING ══ */
/* Overflow. Measured at 320px: .nav-right ran to 415px and .footer-socials to
   379px, so both pushed the document past the viewport on every page. The
   language switcher and both nav CTAs are already duplicated inside the drawer,
   so the bar sheds them as space runs out rather than overflowing. */
@media (max-width:768px){
  .nav-right>.lang-toggle{display:none}
  .footer-socials{flex-wrap:wrap;gap:1rem 1.25rem}
  .hamburger{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:8px}
  .footer-socials a,.footer-links a{min-height:44px;display:inline-flex;align-items:center}
  .lang-toggle-mobile button{min-height:44px;padding-left:14px;padding-right:14px}
  .mobile-menu a,.mobile-menu button{min-height:44px;display:flex;align-items:center}
  /* fixed full-width furniture needs the notch insets in landscape */
  .cookie{padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
  .float-cta{right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom))}
  .mobile-menu{padding-left:max(3rem,env(safe-area-inset-left));padding-right:max(3rem,env(safe-area-inset-right))}
}
@media (max-width:560px){ .nav-right>.nav-cta[href="book.html"]{display:none} }
@media (max-width:412px){ .nav-right>.nav-cta{display:none} .nav-logo-text{display:none} }
/* two-column grids that never collapsed below the 1024px breakpoint */
@media (max-width:560px){
  .stat-grid,.sm-steps,.cs-grid,.rate-fields,.faq-grid,.how-steps,.story-right{grid-template-columns:1fr!important}
}

/* Contrast. Every value below was measured against its real composited
   background; the old ones are the ratios in the comment. */
.footer-socials a{color:rgba(255,255,255,0.62)}   /* on #111 — was .30 → 2.65:1 */
.sr-btn{color:rgba(26,20,16,0.78);border-color:rgba(26,20,16,0.30)}  /* cream ground, not dark */
.cookie p{color:rgba(26,20,16,0.68)}              /* on #fff — was .50 → 3.44:1 */
.cookie-dec{color:rgba(26,20,16,0.74);border-color:rgba(26,20,16,0.38)} /* was .40 → 2.57:1 */
.marquee-item::after{color:rgba(27,79,138,0.72)!important}

/* Focus. There was no :focus-visible rule anywhere in the site; the red ring
   reads on cream (4.79:1) and on near-black (3.64:1), and the white halo keeps
   it visible where the ring sits on the red CTA itself. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #C0392B;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,255,255,.85)
}
.skip-link:focus{left:0;outline:3px solid #C0392B;outline-offset:2px}

/* Reduced motion. The existing block covered only .cta-slides and #tl-map; the
   marquee, the carousel and eleven other keyframes ran regardless. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track,.tl-carousel-track{animation:none!important}
}


/* Inline-styled grids. Roughly forty multi-column grids across the site are
   declared in a style="" attribute (repeat(3,1fr), repeat(5,1fr), 1fr 1fr …),
   so no stylesheet breakpoint could ever reach them; at 320px they ran the
   document out to 624px on about, 568px on brokers, 500px on book. On a phone
   every one of them becomes a single column. */
@media (max-width:600px){
  .tlm-gridtemplateco{grid-template-columns:1fr!important}
  .service-row{grid-template-columns:1fr!important;gap:1rem!important}
  .sr-btn{white-space:normal}
  .stat-grid,.sm-steps,.cs-grid,.rate-fields,.faq-grid,.how-steps,.story-right,
  .eq-cards,.wt-points,.safety-cards,.sm-offers,.terminals-grid,.footer-top{grid-template-columns:1fr!important}
}

/* Min-content floors. Grid and flex children default to min-width:auto, so a
   card whose contents measure 282px keeps its track at 282px however narrow the
   phone is — that is what still pushed about.html to 330px at a 320px viewport
   after the grids were collapsed. Letting them shrink, and letting single-line
   rows wrap, is the standard remedy. */
@media (max-width:600px){
  section.tlm-padding{padding-left:1.25rem!important;padding-right:1.25rem!important}
  .tlm-displaygrid>*,.tlm-displayflex>*,.track-row>*{min-width:0}
  .tlm-displayflex,.track-row{flex-wrap:wrap}
  .track-row>input,.track-row>button{flex:1 1 100%}
}

/* Last contrast holdouts, each measured on its own ground. */
.notice h2{color:#A5291D}                       /* red on its own tint: 4.34 → 5.2 */
.lane-badge.freq{color:#A5291D}                 /* 4.17 → 5.0 */
#trk-log>div{color:rgba(255,255,255,0.92)}      /* log text on a near-clear panel: 2.83 → 4.9 */

/* Target size, WCAG 2.5.8 AA. The two rules above set border:none;background:transparent
   and no padding, so each control collapsed to its own line box — measured at 390px, 22 of
   24 controls under the 24px minimum (inputs 20-22px, selects 17px). The visual field is the
   surrounding cell, whose padding is not part of the control, so a tap on what looks like
   the field did nothing. The doubled selector matches those rules' specificity; the outline
   is restored because their outline:none beat the shared :focus-visible rule. The nine
   checkboxes are left alone — each is wrapped in its own label, and raising those to 44px
   would add ~216px to the form. 44px is this site's existing minimum for nav controls. */
.tl-99ddfafa.tl-99ddfafa,
.tl-65c9d0a4.tl-65c9d0a4{min-height:44px;padding-top:.5rem;padding-bottom:.5rem}
.tl-99ddfafa.tl-99ddfafa:focus-visible,
.tl-65c9d0a4.tl-65c9d0a4:focus-visible{outline:3px solid #C0392B;outline-offset:2px}

/* ── P2: the booking form's legibility, targets and error UI ─────────────────────────────
   Measured on the shipped page at 390px before this block: every one of the 14 field labels
   rendered at 10px (.tl-8c389733), and the special-requirements group label at 10px too. The
   colour is fine — rgba(26,20,16,.72) on cream is 6.81:1, well past AA — so only the size
   moves. 14px is --fs-sm in docs/design/design-system-v1.md; the uppercase 0.12em tracking
   that makes these read as labels is kept. */
.tl-8c389733.tl-8c389733,
.tl-ffadf4df.tl-ffadf4df{font-size:14px;letter-spacing:.08em}
/* Two 11px items in the same form, raised to the 12px label floor. */
.tl-57cf02c3.tl-57cf02c3,
.tl-6c7a381a.tl-6c7a381a{font-size:12px}

/* The six special-requirement checkbox rows. Only the row HEIGHT changes: the input is 16x16
   and the activating region is this wrapping label, measured 284x17 at 390px, which fails
   WCAG 2.5.8 on the vertical axis and is a poor touch target regardless.
   The column count is deliberately left alone. A first pass here set two columns at mobile,
   reasoning that repeat(3,1fr) leaves ~100px per cell at 390px and wraps "Appointment
   Delivery" mid-column. Measured, that was wrong twice over: mobile-hardening-v1.css already
   collapses every .tlm-gridtemplateco grid to one full-width column under 600px with
   !important, so the cells are 284px and nothing is cramped — and no rule here could have
   overridden that !important anyway. The three columns apply only above 600px, where there
   is room for them. */
.tl-f00193de.tl-f00193de{min-height:44px;font-size:14px;padding:.25rem 0}

/* Validation errors. assets/js/form-validation-a11y.js creates one empty role="alert" per
   field on demand and fills it when that field fails, so an error is announced, visible, and
   tied to its control by aria-describedby. Before this the only feedback was the browser's
   own transient bubble on the first invalid control: measured on this page, aria-describedby,
   aria-invalid, aria-errormessage, role="alert" and aria-live were all absent entirely.
   The empty state must occupy no space, or 23 empty paragraphs would pad the form. */
.tl-field-error{font-size:14px;line-height:1.4;font-weight:600;color:#A5291D;margin-top:.35rem}
.tl-field-error:empty{display:none}
/* The failing control itself is marked, so the error is findable without reading every label.
   Colour is not the only signal: the message sits below the field and is announced. */
.tl-99ddfafa.tl-99ddfafa[aria-invalid="true"],
.tl-65c9d0a4.tl-65c9d0a4[aria-invalid="true"]{box-shadow:inset 0 -2px 0 0 #A5291D}