/* Cargado customer stories: "Brokers who built their Mexico business on Cargado" (tracker REDESIGN-04).
   Ported from the redesign prototype (home route, section.sec.alt.story1). Three tabs (Blackbox Logistics, Steam Logistics,
   Direct Connect Logistix) over one panel; panels share one grid cell so the height never jumps.
   Everything is scoped under .cg-cs. Tokens are declared on .cg-cs 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, and the h2 sets no font-weight so the site's h2 rule supplies it. */
.cg-cs{--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;--alt:#F8FAFC;--azul:#345ED1;--azul-200:#CDD7F4;--azul-800:#2648A6;--azul-900:#1E3A85;--azul-950:#0F204B;--ink:#0F172A;--body:#475569;--line:#E2E8F0;--card:#FFFFFF;--link:#345ED1;--on-b2:#BFD3FF;--gut:clamp(16px,4vw,56px);--max:1200px;--h2-sec:clamp(30px,3.3vw,46px);--sh-card-dk:0 28px 56px -28px rgba(4,10,30,.6);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-cs *,.cg-cs *::before,.cg-cs *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/p/blockquote/figure/button/img margins, borders, sizes and inline display */
.cg-cs h2,.cg-cs p,.cg-cs figure,.cg-cs blockquote{margin:0}
.cg-cs blockquote{padding:0;border:0}
.cg-cs img,.cg-cs svg{display:block;max-width:100%;vertical-align:middle}
.cg-cs button{margin:0;-webkit-appearance:none;appearance:none}
.cg-cs b{font-weight:700}
.cg-cs a{color:var(--link)}

.cg-cs .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-cs .story1{background:var(--alt);padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(64px,8vw,112px)}
.cg-cs .sec-head{display:grid;gap:16px;max-width:760px;margin:0 auto clamp(44px,5vw,56px);text-align:center;justify-items:center}
.cg-cs h2{font-family:var(--f-head);letter-spacing:-.03em;font-size:var(--h2-sec);line-height:1.08;text-wrap:balance;color:var(--ink);max-width:24ch;margin-inline:auto}

.cg-cs .st-set{max-width:none;margin-inline:auto;display:grid;gap:20px}
.cg-cs .st-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cg-cs .st-tabs button{font:inherit;text-align:left;cursor:pointer;display:grid;place-items:center;align-content:center;justify-content:center;gap:0;min-height:68px;padding:14px 12px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--body);box-shadow:none;transition:border-color .15s ease,color .15s ease}
.cg-cs .st-tabs button:hover{border-color:var(--azul-200);color:var(--ink)}
.cg-cs .st-tabs button[aria-selected="true"]{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul);color:var(--ink)}
.cg-cs .st-tabs button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.cg-cs .st-tabs .t-bb{height:30px;width:auto}
.cg-cs .st-tabs .t-st{height:19px;width:auto;aspect-ratio:171/24}
.cg-cs .st-tabs .t-dc{height:24px;width:auto}

.cg-cs .st-panels{display:grid}
.cg-cs .st-panels>.st-feat{grid-area:1/1}
.cg-cs .st-feat[hidden]{display:grid;visibility:hidden}
.cg-cs .st-feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);border-radius:20px;overflow:hidden;background:var(--azul-900);color:#fff;box-shadow:var(--sh-card-dk);width:100%;max-width:1000px;margin-inline:auto;text-align:left}
.cg-cs .st-fig{padding:clamp(28px,3.4vw,48px);display:grid;grid-template-rows:auto auto;gap:14px;align-content:center;background:var(--azul-950)}
.cg-cs .st-fig b{font-family:var(--f-body);font-weight:700;font-size:clamp(52px,5.4vw,76px);letter-spacing:-.04em;line-height:.95;color:#fff}
.cg-cs .st-fig span{font-size:clamp(18px,1.6vw,21px);line-height:1.35;color:var(--on-b2);max-width:24ch}
.cg-cs .st-body{padding:clamp(28px,3.4vw,48px);display:grid;gap:0;align-content:start}
.cg-cs .st-body blockquote{margin:0 0 28px;font-family:var(--f-head);font-weight:500;font-size:clamp(20px,2.1vw,27px);letter-spacing:-.01em;line-height:1.3;color:#fff}
.cg-cs .st-body figcaption{display:flex;text-align:left;margin:0;gap:12px;align-items:center;font-size:14px;line-height:1.5;color:var(--on-b2)}
.cg-cs .st-body figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.cg-cs .st-body figcaption span{display:grid}
.cg-cs .st-body figcaption b{color:#fff;font-weight:600}
.cg-cs .st-read{display:block;color:var(--on-b2);font-weight:600;font-size:14.5px;line-height:1.5;text-decoration:none;justify-self:start;margin-top:24px;transition:color .15s ease}
.cg-cs .st-read:hover{color:#fff}
.cg-cs .st-all{display:block;justify-self:center;margin-top:4px;font-weight:600;font-size:14.5px;line-height:1.5;text-decoration:none;color:var(--link);transition:color .15s ease}
.cg-cs .st-all:hover{color:var(--azul-800)}

@media (max-width:760px){.cg-cs .st-feat{grid-template-columns:1fr}}
@media (max-width:700px){
  .cg-cs .st-tabs{gap:8px}
  .cg-cs .st-tabs button{min-height:52px;padding:14px 8px;border-radius:12px}
  .cg-cs .st-tabs .t-bb{height:22px}
  .cg-cs .st-tabs .t-st{height:12px}
  .cg-cs .st-tabs .t-dc{height:16px}
}
@media (prefers-reduced-motion:reduce){.cg-cs .st-tabs button,.cg-cs .st-read,.cg-cs .st-all{transition:none}}

/* English-only hide (REDESIGN-04). On English pages this section replaces two live home sections, both shared components whose
   text is localized per locale. They are hidden with CSS only; never deleted. es-MX and fr-CA keep them (the embed hides itself there).
   1. Testimonial component (CargoQuotes, Kyle Gholston). */
html[lang^="en"] section.section_testimonial1[data-wf--testimonial--variant="white"]{display:none}
/* 2. "Section - Articles (up to 3)" ("Grow Mexico and Canada in Cargado", three CMS story picks). Delete this rule to keep it. */
html[lang^="en"] header[data-wf--section---articles-up-to-3--variant="background-white"]{display:none}
/* 3. The old Blackbox quote card ("Within 36 hours…", Will Hopkins) inside the "Match on spot freight" row (Image + Text + Quote,
   variant "base"). Matt 10/7/2026: the row itself stays everywhere; only its quote card is hidden on English pages.
   href*= because HubSpot tracking rewrites the href at runtime to an absolute URL with ?__hstc=… (seen in testing), and a locale prefix may be added. */
html[lang^="en"] section[data-wf--image-text-quote-feature-section--variant="base"] a.quote-card[href*="/insights/blackbox-logistics"]{display:none}

/* ---- 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) */
.cg-cs{--max:calc(1280px + 10vw);--gut:max(16px,5vw)}
/* P1-1: with the spot row moved above the TMS story (ns.css, P2-1 ruling), the bento sits directly above on the same #F8FAFC band, so the
   in-band seam is 64/64. If the reorder is reverted, use clamp(64px,8vw,112px) here (white spot row above again). */
.cg-cs .story1{padding-top:clamp(40px,5vw,64px)}
/* Stories set: widened to the 1,280 edge on 10/8 (Review #2, staged-0120 P2-5; line 22 is now max-width:none, was 1000px).
   The quote is capped at about 60ch below so it doesn't run past 90 characters per line. */
/* P2-3: the three panels share one grid cell, so the shorter quotes center against the stat column instead of leaving space under "Read the story" */
.cg-cs .st-body{align-content:center}
/* P2-4 */
.cg-cs :is(p,li,dd,figcaption){text-wrap:pretty}
/* P2-5: 44px hit boxes at every width (tap-target rule), no visual change */
.cg-cs .st-read,.cg-cs .st-all{position:relative}.cg-cs .st-read::after,.cg-cs .st-all::after{content:"";position:absolute;inset:-12px -4px}

/* ---- Review #2 fixes 10/8/2026 (review-2026-10-08/staged-0120.md; all reversible) ---- */
/* P2-5: the set and the story card span the bento's edges (line 22 + .st-feat below). Quote cap "about 60ch": in this head font 1ch (the "0")
   is 0.69em, so a literal 60ch is 1,125px at 27px and never binds. 28em is about 60 characters per line (measured 52-59 at 1440, where the
   quote is 739px; the set is capped at 1,280 so the cap doesn't bind at any width today, it is a guard). Revert: line 22 and .st-feat back to 1000px, delete the cap. */
.cg-cs .st-feat{max-width:none}
.cg-cs .st-body blockquote{max-width:28em}