/* Single-column detail-page layout (service-detail pages + privacy own their layout instead of borrowing .contact-inner's grid).
   Shared static CSS extracted in phase-4 PR3 from an inline <style> block that was
   duplicated verbatim across: cross-border-trucking.html, expedited-freight.html, flatbed-freight.html, ltl-shipping-canada-usa.html, privacy.html, refrigerated-freight.html.
   One linked sheet removes the duplication. Loaded at the same cascade position
   (after shared-v6.css) so specificity and source-order override are unchanged. */
/* Service pages own their layout rather than borrowing .contact-inner's
   1fr/1.2fr grid, which was splitting content across two columns by accident. */
.svc-wrap{max-width:1400px;margin:0 auto}
.svc-top{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.svc-eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(26,20,16,0.73);margin:0 0 1.1rem}
.svc-title{font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  font-size:clamp(34px,3.4vw,50px);line-height:1.1;letter-spacing:-.01em;color:#1A1410;margin:0 0 1.2rem}
.svc-title em{font-style:italic;color:#C0392B}
.svc-lead{font-size:clamp(16px,1.5vw,17.5px);line-height:1.72;color:rgba(26,20,16,.6);margin:0;max-width:46ch}
.svc-hero-img{width:100%;height:clamp(260px,32vw,430px);object-fit:cover;display:block;border-radius:4px}
.svc-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:rgba(26,20,16,.1);border:1px solid rgba(26,20,16,.1);border-radius:4px;overflow:hidden;margin:0 0 clamp(2rem,4vw,3rem)}
.svc-point{background:#fff;padding:24px 26px}
.svc-point h2{font-family:'DM Sans',sans-serif;font-size:15.5px;font-weight:600;margin:0 0 8px;color:#1A1410;letter-spacing:0}
.svc-point p{font-size:14.5px;line-height:1.62;color:rgba(26,20,16,.62);margin:0}
.svc-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 clamp(2rem,4vw,3rem)}
.svc-gallery img{width:100%;height:250px;object-fit:cover;display:block;border-radius:4px}
.svc-cta{background:#1A1410;border-radius:4px;padding:clamp(26px,4vw,38px);
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.svc-cta h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(22px,2.5vw,30px);
  color:#fff;margin:0;letter-spacing:-.01em}
.svc-cta p{color:rgba(255,255,255,0.82);font-size:14.5px;margin:7px 0 0}
.svc-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.svc-btn{display:inline-block;padding:14px 27px;border-radius:4px;font-weight:600;font-size:14.5px;text-decoration:none}
.svc-btn-primary{background:#C0392B;color:#fff}
.svc-btn-primary:hover{background:#A93226}
.svc-btn-ghost{border:1.5px solid rgba(255,255,255,.26);color:#fff}
.svc-btn-ghost:hover{border-color:#fff}
.svc-related{margin:clamp(2rem,4vw,3rem) 0 0;padding-top:24px;border-top:1px solid rgba(26,20,16,.12)}
.svc-related-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(26,20,16,0.72);margin:0 0 14px}
.svc-related a{display:inline-block;margin:0 18px 9px 0;font-weight:600;font-size:14.5px;
  color:#1A1410;text-decoration:none}
.svc-related a:hover{color:#C0392B}
.svc-btn:focus-visible,.svc-related a:focus-visible{outline:2px solid #C0392B;outline-offset:3px}
@media (max-width:900px){.svc-top{grid-template-columns:1fr;gap:2rem}}
@media (max-width:640px){.svc-gallery img{height:200px}}

/* ══ 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 */

/* sprint PR8: a checklist point spans the grid and carries a list */
.svc-point--wide{grid-column:1/-1}.svc-point ul{margin:10px 0 12px 18px;padding:0;font-size:14.5px;line-height:1.62;color:rgba(26,20,16,.62)}.svc-point li{margin:0 0 6px}.svc-point li strong{color:#1A1410;font-weight:600}