/* Cargado "network stats" band: hundreds of cross-border carriers, 2,350+ vetted carriers, 220,000+ trucks, 800+ through Laredo, plus the map loop.
   Ported from the redesign prototype (home route, section.netcalm.np.dark). Everything is scoped under .cg-ns so it cannot leak into the host page.
   Tokens are declared on .cg-ns with the prototype's light values (the live site has no dark mode).
   Heading font follows the site: --f-head reads the Webflow heading variable (Space Grotesk today, Libre Franklin after the switch); the h2 sets no
   font-weight so the site's own h2 rule supplies it. -.03em suits both faces.
   One switch: add .cg-ns--nomap to the wrapper to drop the map video and lay the copy out without it. */
.cg-ns{--f-head:var(--_typography---font-styles--heading,"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif);--f-body:Inter,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;--deep:#0A142E;--azul:#345ED1;--azul-900:#1E3A85;--sky-100:#E0F2FE;--sky-300:#7DD3FC;--sky-400:#38BDF8;--on-b1:rgba(255,255,255,.88);--on-b2:#BFD3FF;--line-dk:rgba(255,255,255,.2);--gut:clamp(16px,4vw,56px);--max:1200px;--sec-pad:clamp(64px,8vw,112px);--h2-sec:clamp(30px,3.3vw,46px);box-sizing:border-box;color:#fff;font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-ns *,.cg-ns *::before,.cg-ns *::after{box-sizing:border-box}
.cg-ns [hidden]:not([hidden=until-found i]){display:none!important}

/* host reset: the live Webflow CSS gives h2/p/ul/li/dl/dd/figure margins, padding, weights and sizes */
.cg-ns h2,.cg-ns p,.cg-ns dl,.cg-ns dt,.cg-ns dd,.cg-ns figure,.cg-ns ul{margin:0}
.cg-ns ul{padding:0}
.cg-ns figcaption{margin:0;text-align:start}
.cg-ns li{margin:0}
.cg-ns :focus-visible{outline:2px solid var(--sky-400);outline-offset:2px;border-radius:6px}

.cg-ns .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-ns .netcalm{background:var(--deep);color:#fff;padding-block:var(--sec-pad)}
.cg-ns .nw{white-space:nowrap}
.cg-ns .np-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.cg-ns .np-copy{display:grid;gap:18px;align-content:start}
.cg-ns .np-copy h2{font-family:var(--f-head);font-size:var(--h2-sec);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:#fff}
.cg-ns .lede{font-size:clamp(17px,1.5vw,19px);color:var(--on-b1);max-width:44ch}
.cg-ns .np-figs{margin-top:8px;display:grid;border-top:1px solid var(--line-dk)}
.cg-ns .np-figs > div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-dk)}
.cg-ns .np-figs dt{font:700 clamp(30px,2.8vw,40px)/1.05 var(--f-body);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.cg-ns .np-figs dd{font-size:16px;line-height:1.4;color:var(--on-b1)}
.cg-ns .np-src{font-size:14px;line-height:1.5;color:var(--on-b2);max-width:52ch}
.cg-ns .np-k{margin-top:10px;font:600 17px/1.3 var(--f-head);color:#fff}
.cg-ns .np-checks{list-style:none;display:grid;gap:10px}
.cg-ns .np-checks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.45;color:var(--on-b1)}
.cg-ns .np-checks li::before{content:"";position:absolute;left:2px;top:.32em;width:14px;height:8px;border-left:2px solid var(--sky-300);border-bottom:2px solid var(--sky-300);transform:rotate(-45deg)}
.cg-ns .k-row{display:flex;flex-wrap:wrap;align-items:center;margin-top:10px;gap:10px 26px}
.cg-ns .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font-family:var(--f-body);font-weight:600;font-size:15px;line-height:1.5;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.cg-ns .k-btn.white{background:#fff;color:var(--azul-900)}
.cg-ns .k-btn.white:hover{background:var(--sky-100);color:var(--azul-900)}
.cg-ns .k-tl{color:var(--on-b1);font-weight:600;font-size:15px;line-height:1.5;text-decoration:none;border-bottom:1px solid var(--line-dk);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.cg-ns .k-tl:hover{color:#fff;border-color:var(--sky-400)}
.cg-ns .np-map{display:grid;gap:12px}
.cg-ns .np-vid{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--deep)}
.cg-ns .np-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cg-ns .np-map figcaption{font-size:14px;line-height:1.5;color:var(--on-b2);max-width:56ch}

/* 44px+ hit box at every width, no visual change (10/8: was -9px at <=899px only) */
.cg-ns .k-tl{position:relative}
.cg-ns .k-tl::after{content:"";position:absolute;inset:-12px -4px}
@media (max-width:900px){
  .cg-ns .np-in{grid-template-columns:1fr;gap:16px}
  .cg-ns .np-copy{display:contents}
  .cg-ns .np-copy h2{order:0}.cg-ns .lede{order:1}.cg-ns .np-map{order:2}.cg-ns .np-figs{order:3}.cg-ns .np-src{order:4}.cg-ns .np-k{order:5}.cg-ns .np-checks{order:6}.cg-ns .k-row{order:7}
  .cg-ns .np-figs > div{grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:12px}
  .cg-ns .np-figs dt{font-size:28px}
  .cg-ns .np-figs dd{font-size:15px}
}

/* .cg-ns--nomap: no map video (if the Website Map loop stays elsewhere on the page). Desktop: heading and lede across the top,
   the three figures and the source note left, the vetting list and the buttons right. Phones: the same single column, minus the map. */
.cg-ns--nomap .np-map{display:none}
@media (min-width:901px){
  .cg-ns--nomap .np-in{grid-template-columns:1fr}
  .cg-ns--nomap .np-copy{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"h h" "l l" "f k" "f c" "s r";grid-template-rows:auto auto auto 1fr auto;column-gap:clamp(40px,6vw,96px);align-items:start}
  .cg-ns--nomap .np-copy h2{grid-area:h;max-width:22ch}
  .cg-ns--nomap .lede{grid-area:l}
  .cg-ns--nomap .np-figs{grid-area:f}
  .cg-ns--nomap .np-src{grid-area:s}
  .cg-ns--nomap .np-k{grid-area:k;margin-top:8px}
  .cg-ns--nomap .np-checks{grid-area:c}
  .cg-ns--nomap .k-row{grid-area:r;margin-top:0}
}

/* English-only hide (REDESIGN-05): the "Feature - Image & Stats" component instance (section.section_stats19, no variant attribute) is
   replaced by this band on English pages. es-MX and fr-CA keep it until their locale pass. Nothing is deleted. Note: on live and staging
   this section also holds the map-loop video embed (.map-loop-video), so hiding it hides that video too. See README "Seam". */
html[lang^="en"] section.section_stats19{display:none!important}

/* ---- Home review fixes 10/8/2026 (review-2026-10-07/home.md; rulings via Website QB, all reversible) ---- */
/* P1-3 ruling: the site's 1280 container (content edge x=80 at 1440, same as the nav logo and the live rows) */
.cg-ns{--max:calc(1280px + 10vw);--gut:max(16px,5vw)}
/* P2-4: no one-word last lines */
.cg-ns :is(p,dd,li,figcaption){text-wrap:pretty}
.cg-ns .np-k{text-wrap:balance}
/* P2-8: in the single column the map is 4:3 and at most 560px wide, left-aligned (was 1:1, 707px square at 768) */
@media (max-width:900px){.cg-ns .np-vid{aspect-ratio:4/3;max-width:560px;width:100%}}

/* P1-4 ruling (Website QB 10/8; Matt's call, reversible): hide the live "benefits" section on English home. It repeats the vetting list above
   and the bento below. Never deleted; es-MX and fr-CA keep it. The task text said html[lang="en"]; every other home hide uses lang^="en"
   (en and en-CA both show the new sections), so this does too. To show it on en-CA again, change ^= to = (one character). The variant
   appears once on home (staging scan 10/8). ns.css loads only on home. */
html[lang^="en"] section[data-wf--benefits-section--variant="centered-heading"]{display:none!important}

/* P2-1 ruling (Website QB 10/8; Matt's call, reversible): show the live "Match on spot freight" row (Image + Text + Quote, variant base)
   right after the stats band, above the TMS story, so TMS, bento and stories sit on one continuous light band. CSS only: the anonymous
   div that holds every home section becomes a flex column on English home, and five items move up with order:-1 (equal orders keep
   source order, so nothing else is renumbered). :has(.cg-ns) keeps it to the page that carries this band.
   Accessibility cost: DOM and tab order stay as before (the spot row's one link is reached after the bento), so the permanent fix is a
   Designer step: move the "Image + Text + Quote" (variant base) instance in the Navigator to just after the stats band, then delete this block. */
html[lang^="en"] main.main-wrapper > div:has(> .w-embed > .cg-ns, > .cg-ns){display:flex;flex-direction:column}
html[lang^="en"] main.main-wrapper > div:has(> .w-embed > .cg-ns, > .cg-ns) > *{min-width:0}
html[lang^="en"] main.main-wrapper > div:has(> .w-embed > .cg-ns, > .cg-ns) > :is(section.section_logo1,.w-embed:has(> .cg-ns),.cg-ns,section.section_stats19,section[data-wf--benefits-section--variant="centered-heading"],section[data-wf--image-text-quote-feature-section--variant="base"]){order:-1}
/* P1-3 follow-through (10/8): the live spot row's wrapper pads 48px at tablet widths; on English home match the 1280 edge (x=51/38/20 at 1024/768/390; 80 at 1440 unchanged) */
html[lang^="en"] main.main-wrapper > div:has(> .w-embed > .cg-ns, > .cg-ns) > section[data-wf--image-text-quote-feature-section--variant="base"] > .section-image-text-feature-quote-card_wrapper{padding-inline:max(16px,5vw)}