/* Cargado /carriers logo wall: "Logistics companies across Mexico, the U.S. and Canada post loads on Cargado". v2 (10/9/2026, review fixes).
   Ported from the redesign prototype (carriers route, section.sec.cwall#brokers-on). Everything is scoped under .cg-cw so it cannot leak into the host page.
   Tokens are declared on .cg-cw with the prototype's light values (the live site has no dark mode). Container and h2 size follow the 10/8 Website QB rulings used by the live home packages and the prototype's
   final v46 rhythm block (index.html:2215, --h2-sec clamp(30px,3.3vw,46px)). Heading font follows the site: --f-head reads the Webflow
   heading variable and the h2 sets no font-weight so the site's own h2 rule supplies it.
   The wall is the prototype's packed arrangement (equal chips in staggered rows inside an elliptical outline, centered rows), computed by cw.js from the
   prototype's layout code for the 16 approved logos, with no pointer physics. Without JS the same chips render as a centered wrapping row (the rules under
   .blob below), so the wall never depends on JavaScript to show. Logo sizes are precomputed (equal ink area, the prototype's fitLogo formula) as --w/--h on each
   image, so nothing depends on image load. */
.cg-cw{--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;--azul:#345ED1;--ink:#0F172A;--body:#475569;--line:#E2E8F0;--alt:#F8FAFC;--gut:max(16px,5vw);--max:calc(1280px + 10vw);box-sizing:border-box;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-cw *,.cg-cw *::before,.cg-cw *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/p margins, li margin and padding-left, ul margins, img inline-block */
.cg-cw h2,.cg-cw p,.cg-cw ul{margin:0}
.cg-cw ul{padding:0}
.cg-cw li{margin:0;padding:0}
.cg-cw :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

.cg-cw .sec{padding-block:clamp(64px,8vw,112px);background:var(--alt)}
.cg-cw .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-cw .sec-head{display:grid;gap:16px;max-width:760px;margin:0 auto clamp(20px,2.6vw,32px);text-align:center;justify-items:center}
.cg-cw h2{font-family:var(--f-head);font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.cg-cw .lede{font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--body);max-width:60ch;margin:10px auto 0;text-wrap:balance}
.cg-cw :is(p,li){text-wrap:pretty}
.cg-cw .lede{text-wrap:balance}

/* No-JS layout: a centered wrapping row of equal chips. cw.js replaces it with the packed layout (.blob.packed) as soon as it runs. */
.cg-cw .blob-wrap{display:grid;justify-items:center}
.cg-cw .blob{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
.cg-cw .blob li{flex:none;width:156px;height:52px}
.cg-cw .chip{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 24px -14px rgba(20,38,92,.28);transition:border-color .2s ease}
.cg-cw .chip img{display:block;width:calc(var(--w)*1px);height:calc(var(--h)*1px);max-width:none}
.cg-cw li:hover .chip{border-color:var(--azul)}
@media (max-width:559px){
  .cg-cw .blob{gap:8px}
  .cg-cw .blob li{width:133px;height:46px}
  .cg-cw .chip img{width:calc(var(--w)*.853px);height:calc(var(--h)*.853px)}
}
/* Packed layout (the prototype's .blob): the list becomes a positioned box of height --bh and cw.js places every chip with a transform. */
.cg-cw .blob.packed{display:block;position:relative;height:var(--bh,520px);touch-action:pan-y}
.cg-cw .blob.packed li{position:absolute;left:0;top:0}

/* Scroll-in reveal (brief "Self-serve and motion", 10/8): cw.js adds .rv to the heading block and .anim to the list only when they are below the fold at load,
   then .rv-in / .in when they scroll in; the chips come in staggered by their distance from the wall's center (--d, capped at 480 ms), the prototype's order.
   Every class comes off after the transition, so nothing stays transformed. Transform and opacity only, 350-450 ms, once. Without JS, and under
   prefers-reduced-motion, the content is simply visible. */
.cg-cw .rv{opacity:0;transform:translateY(16px)}
.cg-cw .rv.rv-in{opacity:1;transform:none;transition:opacity .35s ease-out var(--d,0ms),transform .4s ease-out var(--d,0ms)}
.cg-cw .blob.anim .chip{opacity:0;transform:scale(.82)}
.cg-cw .blob.anim.in .chip{opacity:1;transform:none;transition:opacity .35s ease-out var(--d,0ms),transform .45s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.cg-cw .rv,.cg-cw .blob.anim .chip{opacity:1;transform:none}.cg-cw *,.cg-cw *::before,.cg-cw *::after{animation:none!important;transition:none!important}}

/* English-only row hide (per the package brief): on English /carriers (lang en, en-CA) this wall replaces the live "A more reliable network of hundreds of brokers"
   row, an instance of the shared "Image + Text Feature Section 2" component. Its variant value (float-light_no-image-wrapper) is used twice on the page, so the
   hook is the row's own image asset id (6a17518afd6b6da72118826a, "Logo Network_Placeholder"), which is the same on /, /en-ca, /es-mx and /fr-ca and is not
   swapped by any locale script on /carriers. es-MX and fr-CA keep the row (the embed is hidden there by its locale guard). Nothing is deleted or edited.
   cw.js applies the same hide in browsers without :has(). */
html[lang^="en"] section.section_image-text-feature_v2:has(img[src*="6a17518afd6b6da72118826a"]){display:none!important}