/* MVP freight layer: trucks, roads and docks drawn across the site. What and why: freight.js.
   Every class here starts fr-. The site is light-locked, so the drawings carry two palettes: the light ground and the
   navy ground, picked per section. Gold stays where the brand book puts it (money, quotes, the one CTA): none here.
   Motion is transform and opacity only; every resting state below is the designed still. */

:root{
  --fr-road:#CBDAE6; --fr-road-c:#FFFFFF; --fr-lane:#A9C0D2; --fr-dot:#B4C8D8; --fr-node:#8FAABD; --fr-hub:#003B5B;
  --fr-road-d:rgba(2,22,35,.5); --fr-road-cd:rgba(143,208,245,.32); --fr-lane-d:rgba(143,208,245,.24); --fr-dot-d:rgba(143,208,245,.17); --fr-node-d:rgba(143,208,245,.42); --fr-hub-d:#8FD0F5;
  --fr-tk-box:#003B5B; --fr-tk-cab:#208CCC; --fr-tk-rib:#208CCC; --fr-tk-glass:#DCEEF9; --fr-tk-frame:#0B2434; --fr-tk-tire:#0B2434; --fr-tk-hub:#CFE3F1;
}
/* the truck on a navy ground */
.on-dark,.q-req,.h-stat,footer,.fr-dkx{
  --fr-tk-box:#CFE3F1; --fr-tk-cab:#3E9BD9; --fr-tk-rib:#3E9BD9; --fr-tk-glass:#0B2434; --fr-tk-frame:#8FB0C6; --fr-tk-tire:#EAF3FA; --fr-tk-hub:#0B2434;
}

/* ---------- the trucks ---------- */
.fr-truck{display:block;width:100%;height:100%;overflow:visible}
.fr-tk-box{fill:var(--fr-tk-box)}.fr-tk-cab{fill:var(--fr-tk-cab)}.fr-tk-rib{fill:var(--fr-tk-rib)}.fr-tk-glass{fill:var(--fr-tk-glass)}
.fr-tk-frame{fill:var(--fr-tk-frame)}.fr-tk-tire{fill:var(--fr-tk-tire)}.fr-tk-hub{fill:var(--fr-tk-hub)}
.fr-truck .fr-wheel{transform-box:fill-box;transform-origin:center}
.fr-truck.go .fr-wheel{animation:fr-wheel .42s linear infinite}
.fr-truck.go.rev .fr-wheel{animation-direction:reverse}
@keyframes fr-wheel{to{transform:rotate(360deg)}}
.fr-toptruck{display:block;width:22px;height:10px}

/* ---------- the route: road, hubs, lanes and the dotted field, in the gutters outside the sheet ---------- */
.fr-on body{position:relative}
.fr-route{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.fr-route > svg{position:absolute;left:0;top:0;display:block}
.fr-gl{--r:var(--fr-road);--rc:var(--fr-road-c);--ln:var(--fr-lane);--nd:var(--fr-node);--hb:var(--fr-hub)}
.fr-gd{--r:var(--fr-road-d);--rc:var(--fr-road-cd);--ln:var(--fr-lane-d);--nd:var(--fr-node-d);--hb:var(--fr-hub-d)}
.fr-dotl{fill:var(--fr-dot)}.fr-dotd{fill:var(--fr-dot-d)}
.fr-road{fill:none;stroke:var(--r);stroke-width:13}
.fr-m-mid .fr-road{stroke-width:9}
.fr-road-c{fill:none;stroke:var(--rc);stroke-width:1.2;stroke-dasharray:7 9}
.fr-lane{fill:none;stroke:var(--ln);stroke-width:1.3}
.fr-lane.d{stroke-dasharray:3 5}
.fr-nd{stroke:var(--nd);stroke-width:1.3}
.fr-hr{stroke:var(--ln);stroke-width:1.3}
.fr-hr2{fill:none;stroke:var(--nd);stroke-width:1;transform-box:fill-box;transform-origin:center}
.fr-hb{fill:var(--hb)}
.fr-rtk{position:absolute;left:0;top:0;width:22px;height:10px;transform-origin:11px 5px;will-change:transform;transition:opacity .25s ease}
.fr-rtk.fr-hide{opacity:0}
.fr-rtk-in{display:block;width:22px;height:10px}
/* the lane on narrow screens reads a touch stronger than the gutter lanes, since it carries the whole route alone */
.fr-m-lane .fr-lane.d{stroke:var(--nd);stroke-width:1.4}
/* phones only: the dock lanes at the navy bands (freight.js, "phones: dock lanes"). A lane, a bay and a dock in the band's own
   padding, drawn in the route's navy-ground palette; the truck is the route's truck, same size. One truck at a time: the
   one leaving fades before the one arriving shows. */
.fr-xbay{stroke-width:1.2}
.fr-has-x ~ .fr-rtk{transition:opacity .2s ease .14s}
.fr-has-x ~ .fr-rtk.fr-hide{transition:opacity .14s ease}

/* ---------- the mechanical counter ---------- */
[data-roll],[data-flap]{position:relative}
.fr-rolling{color:transparent !important}
.fr-odo{position:absolute;inset:0;pointer-events:none}
.fr-odo,.fr-odo *{margin:0!important;padding:0!important;border:0!important;max-width:none!important;min-width:0!important;
  font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:normal!important;
  letter-spacing:inherit!important;text-transform:none!important;font-variant-numeric:inherit!important;
  box-shadow:none;text-decoration:none!important;text-wrap:nowrap!important;white-space:nowrap!important}
.fr-odo *{color:inherit!important}
.fr-odo{display:block!important}
.fr-odc,.fr-ods,.fr-ods b,.fr-flc,.fr-flc i,.fr-flc b{display:block!important}
.fr-odc,.fr-flc{position:absolute!important;margin-top:0!important}
.fr-odc{position:absolute;display:block;overflow:hidden;text-align:center;white-space:nowrap}
.fr-ods{display:block;will-change:transform}.fr-ods b{display:block;font-weight:inherit}

/* ---------- home hero: the invoice audit card gets the bill of lading's bar code and the stamp ---------- */
.h-audit .h-in{position:relative}
.au-foot{align-items:center}
.fr-bol{display:block;width:48px;height:13px;flex:none;margin-left:auto}
.au-head .fr-bol + .tag{margin-left:8px}
.fr-bars{display:block;width:100%;height:100%;fill:var(--navy-ink);opacity:.5}
.fr-stamp{position:relative;margin-right:auto;flex:none;display:block;padding:2px 8px 1px;border:2px solid #1673AD;border-radius:5px;
  box-shadow:inset 0 0 0 1px #1673AD;color:#1673AD;font:700 13px/1.15 var(--font-display);letter-spacing:.01em;
  background:rgba(255,255,255,.72);transform:rotate(-8deg);opacity:.92;pointer-events:none}
.fr-stamp b{font-weight:700}
/* in step with the card's own 10-second audit loop: lands with the credit, lifts with the flag */
.h-visual.is-armed .fr-stamp{animation:fr-stamp 10s var(--ease) 1s infinite both;animation-play-state:paused}
.h-visual.is-playing .fr-stamp{animation-play-state:running}
@keyframes fr-stamp{0%,50%{opacity:0;transform:rotate(-8deg) scale(1.42)} 55%,90%{opacity:.92;transform:rotate(-8deg) scale(1)} 96%,100%{opacity:0;transform:rotate(-8deg) scale(1)}}

/* ---------- numbered dock doors (the three programs) ---------- */
.h-ico.fr-door{width:60px;height:46px;border-radius:0;background:none;margin-bottom:18px}
.h-col:hover .h-ico.fr-door{background:none}
.fr-dock{display:block;width:60px;height:46px;overflow:visible}
.fr-dk-in{fill:#E3F0F9}
.fr-dk-ico{color:var(--blue-dark)}
.fr-dk-door{fill:var(--blue)}
.fr-dk-sl{stroke:#1A7DB9;stroke-width:.8}
.fr-dk-handle{fill:#0F5F92}
.fr-slats{transform:translateY(-30px);transition:transform .4s var(--ease)}
.fr-armed .fr-slats{transform:none;transition:none}
.h-col:hover .fr-slats{transform:translateY(-31.5px)}
.fr-dk-frame{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round}
.fr-dk-plate{fill:var(--navy)}
.fr-dk-num{fill:#fff;font:600 5.4px var(--font-sans)}
.fr-dk-bump{fill:var(--navy-ink)}
.fr-dk-floor{stroke:var(--navy);stroke-width:1.4}

/* ---------- pallets (the stat cards and Qualify) ---------- */
.fr-stk svg,.fr-qpallet svg{display:block;width:100%;height:100%;overflow:visible}
.fr-ct{fill:#2F5A76}.fr-ct2{fill:#3B6A88}.fr-tp{fill:rgba(207,227,241,.32)}
.fr-plt rect{fill:#4D7C9A}
.fr-wrap{fill:rgba(207,227,241,.08);stroke:rgba(207,227,241,.22);stroke-width:.6}
.fr-strap{fill:#8FD0F5;opacity:.7}
.fr-armed .fr-row{opacity:0}
.h-stat{position:relative}
.fr-stk{position:absolute;bottom:clamp(24px,2.6vw,36px);right:clamp(24px,2.6vw,36px);width:64px;height:58px}
@media (max-width:1180px) and (min-width:701px){.fr-stk{display:none}}   /* three narrow cards: no room beside the words */
@media (max-width:700px){.fr-stk{bottom:auto;top:28px;right:24px;width:58px;height:53px}}   /* one wide card: beside the figure */

/* ---------- the home steps: the rail becomes a road, blue behind the truck, a truck at the front ---------- */
[data-freight] .h-rail{left:17px;width:10px;border-radius:5px;background:var(--fr-road)}
[data-freight] .h-rail i{border-radius:5px}
[data-freight] .h-rail::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.2px;margin-left:-.6px;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 7px,transparent 7px 16px)}
.fr-steptruck{position:absolute;left:50%;top:0;width:22px;height:10px;margin:-5px 0 0 -11px;z-index:0;will-change:transform;
  transform:translateY(calc(max(36px,min(var(--fr-last,9999px),var(--p,1) * var(--fr-rail-h,0px))) - 36px)) rotate(90deg)}
.fr-steptruck .fr-toptruck{width:22px;height:10px}
@media (max-width:560px){[data-freight] .h-rail{left:13px}}

/* ---------- Food: the duty numbers as dock-door plates; the chip's truck drives in ---------- */
.sp-main[data-freight] .duty-item h3 em{display:grid;place-items:center;min-width:34px;height:28px;padding:0 7px;border-radius:3px;
  background:#fff linear-gradient(#E3F0F9,#E3F0F9) top/100% 4px no-repeat;box-shadow:inset 0 0 0 1px var(--line-strong);
  font:600 13px/1 var(--font-sans);font-variant-numeric:tabular-nums lining-nums;color:var(--navy)}
.fchip-ico.fr-chiptruck{overflow:hidden}
.fr-chiptruck .fr-truck{width:26px;height:13px}
.fr-chiptruck.fr-armed .fr-truck{opacity:0;transform:translateX(-30px)}

/* ---------- Qualify: a loaded pallet beside the weekly minimum, a week road with two drops ---------- */
.q-req{position:relative;container-type:inline-size}
.fr-qart{position:absolute;right:clamp(30px,3.6vw,52px);top:clamp(30px,3.6vw,52px);display:block}
/* the pallet sits beside the caption, clear of the figure */
.fr-qpallet{top:auto;bottom:clamp(30px,3.6vw,52px);width:clamp(76px,6.6vw,96px);height:clamp(69px,6vw,87px)}
.fr-qweek{top:calc(clamp(30px,3.6vw,52px) + clamp(30px,4vw,62px));width:min(330px,56%);height:46px}
.fr-wk-road{position:absolute;left:0;right:0;bottom:4px;height:10px;border-radius:5px;background:var(--fr-road-d)}
.fr-wk-road::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 7px,transparent 7px 16px)}
.fr-wk-j{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--navy);font-style:normal}
.fr-wk-stop{position:absolute;bottom:14px;width:2px;height:20px;margin-left:-1px;border-radius:1px;background:#8FD0F5;font-style:normal}
.fr-wk-tk{position:absolute;left:0;bottom:12px;width:46px;height:23px}
@container (max-width:480px){
  .fr-qart{position:relative;right:auto;top:auto;bottom:auto;margin:0 0 18px}
  .fr-qpallet{width:66px;height:60px}
  .fr-qweek{width:100%;max-width:340px;height:46px}
}

/* ---------- the footer dock: a truck backed up to our door, sitting on the base line ---------- */
.fr-dockline{display:flex;justify-content:flex-end;height:60px;margin-top:-20px;pointer-events:none}
.fr-dockline svg{display:block;width:290px;max-width:100%;height:60px;overflow:hidden}
.fr-ds-roof{fill:#16405D}.fr-ds-wall{fill:#0F2E44}.fr-ds-door{fill:#143A55}.fr-ds-sl{stroke:#0B2434;stroke-width:1}
.fr-ds-open{fill:#061B28}.fr-ds-lamp{fill:#2F5A76}.fr-ds-lamp.fr-ds-on{fill:#8FD0F5}.fr-ds-bump{fill:#04121B}
.fr-dockline.fr-armed .fr-ds-mover{opacity:0}
.fr-dockline{--fr-tk-box:#1D5274;--fr-tk-rib:#2A6E99;--fr-tk-cab:#208CCC;--fr-tk-glass:#0B2434;--fr-tk-frame:#071A27;--fr-tk-tire:#04121B;--fr-tk-hub:#8FB0C6}


/* ---------- page moments ---------- */

/* ---------- the dock bay (Contact, the 404, the portal preview): a roll-up door that opens on the bay behind ---------- */
.fr-bay{display:block;pointer-events:none}
.fr-bay svg{display:block;width:100%;height:100%;overflow:hidden}
.fr-bdoor{transform-box:view-box}
.fr-armed .fr-bdoor{transform:none !important}
.fr-armed .fr-belt{transform:translateX(-120px)}
/* light ground (Contact) */
.fr-bay{--b-wall:#E3EBF2;--b-fascia:#D3DEE8;--b-in:#F7FBFE;--b-floor:#DCE6EE;--b-rack:#C6D5E0;--b-box:#D6E3EC;--b-box2:#C2D4E0;
  --b-belt:#7C93A3;--b-roll:#B9CAD6;--b-ct:#B9CFDF;--b-ct2:#A4BDCF;--b-tape:#F1F5F9;--b-sl:#2F97D5;--b-sl2:#208CCC;--b-gv:#1A7DB9;
  --b-bar:#1673AD;--b-handle:#0F5F92;--b-frame:#003B5B;--b-lamp:#8FD0F5;--b-bump:#0B2434;--b-apron:#CBDAE6;--b-edge:#B2C6D6;--b-plt:#8FAABD}
/* navy ground (404, portal) */
.fr-bay.fr-bay-dk{--b-wall:#0F2E44;--b-fascia:#16405D;--b-in:#1B4D6E;--b-floor:#15405C;--b-rack:#0E3049;--b-box:#1A4A68;--b-box2:#174261;
  --b-belt:#061D2B;--b-roll:#2F5A76;--b-ct:#2A5E80;--b-ct2:#244F6C;--b-tape:#3B6A88;--b-sl:#1D4560;--b-sl2:#18394F;--b-gv:#0E2738;
  --b-bar:#123146;--b-handle:#2F5A76;--b-frame:#04121B;--b-lamp:#8FD0F5;--b-bump:#020F18;--b-apron:#0A2535;--b-edge:#1B3D54;--b-plt:#8FAABD}
.fr-b-wall{fill:var(--b-wall)}.fr-b-fascia{fill:var(--b-fascia)}.fr-b-in{fill:var(--b-in)}.fr-b-floor{fill:var(--b-floor)}.fr-b-rack{fill:var(--b-rack)}
.fr-b-box{fill:var(--b-box)}.fr-b-box2{fill:var(--b-box2)}.fr-b-belt{fill:var(--b-belt)}.fr-b-roll{fill:var(--b-roll)}
.fr-b-ct{fill:var(--b-ct)}.fr-b-ct2{fill:var(--b-ct2)}.fr-b-tape{fill:var(--b-tape)}.fr-b-sl{fill:var(--b-sl)}.fr-b-sl2{fill:var(--b-sl2)}
.fr-b-gv{stroke:var(--b-gv);stroke-width:1}.fr-b-bar{fill:var(--b-bar)}.fr-b-handle{fill:var(--b-handle)}.fr-b-frame{fill:var(--b-frame)}
.fr-b-lamp{fill:var(--b-lamp)}.fr-b-bump{fill:var(--b-bump)}.fr-b-apron{fill:var(--b-apron)}.fr-b-edge{stroke:var(--b-edge);stroke-width:1.5}
.fr-b-plt rect{fill:var(--b-plt)}
/* Contact: the bay sits in the empty half of the text-only hero, desktop only */
.sp-hero.text-only .wrap{position:relative}
.fr-bay-contact{position:absolute;right:var(--gutter);bottom:0;width:min(440px,36vw);aspect-ratio:440/240}
@media (max-width:1100px){.fr-bay-contact{display:none}}
/* 404: the empty bay beside the message, desktop only */
.nf .wrap{position:relative}
.fr-bay-404{position:absolute;right:var(--gutter);top:50%;width:min(420px,34vw);aspect-ratio:440/240;transform:translateY(-50%)}
@media (max-width:1100px){.fr-bay-404{display:none}}
/* portal preview: a bay along the foot of the sign-in screen, below the card, never behind it */
.login{position:relative}
.login-card{position:relative;z-index:1}
.fr-bay-band{position:absolute;left:0;right:0;bottom:0;height:0;z-index:0}
.fr-bay.fr-off{display:none}
#dash .impact-num,#dash .side-stat b{position:relative}

/* ---------- About: three names, one lane, one hub ---------- */
.fr-merge{display:block;position:relative;height:54px;margin-top:6px;pointer-events:none}
.fr-merge.fr-off{visibility:hidden;height:0;margin:0}
.fr-mg{display:block;overflow:visible}
.fr-mg-lane{fill:none;stroke:rgba(143,208,245,.42);stroke-width:1.4}
.fr-mg-nd{fill:var(--navy);stroke:rgba(143,208,245,.7);stroke-width:1.3}
.fr-mg-hr{fill:var(--navy);stroke:rgba(143,208,245,.42);stroke-width:1.3}.fr-mg-hr2{fill:none;stroke:rgba(143,208,245,.55);stroke-width:1}.fr-mg-hb{fill:#8FD0F5}
.fr-mg-tk{position:absolute;left:0;top:0;width:22px;height:10px;transform-origin:11px 5px;
  --fr-tk-box:#CFE3F1;--fr-tk-cab:#3E9BD9;--fr-tk-glass:#0B2434}
.fr-merge.fr-armed .fr-mg-tk{opacity:0}

/* ---------- Beverage: the split-flap tiles (the figure's own digits; never a price) ---------- */
.fr-flc{position:absolute;display:block;perspective:400px}
.fr-flc i{position:absolute;left:1px;right:1px;height:50%;overflow:hidden;display:block;font-style:normal;background:#022C44}
.fr-flc b{display:block;text-align:center;font-weight:inherit}
.fr-flc .t{top:0;border-radius:5px 5px 0 0;transform-origin:50% 100%;box-shadow:inset 0 -1px 0 rgba(0,0,0,.45)}
.fr-flc .b{top:50%;border-radius:0 0 5px 5px;transform-origin:50% 0}
.fr-flc .b b{transform:translateY(-50%)}
.fr-flc .ft,.fr-flc .fb{z-index:2;backface-visibility:hidden}

/* ---------- How We Buy: the contract route as road, the marker as the truck ---------- */
[data-freight] .route-rail{top:28.5px;height:12px;border-radius:6px;background:var(--fr-road)}
[data-freight] .route-rail::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.2px;margin-top:-.6px;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 7px,transparent 7px 16px)}
[data-freight] .route-case.fr-case{left:-15px;top:10px;width:30px;height:14px;border-radius:0;background:none;box-shadow:none}
.fr-case .fr-toptruck{width:30px;height:14px;filter:drop-shadow(0 0 1.5px #fff)}
@media (max-width:900px){
  [data-freight] .route-rail{top:12.5%;width:12px;height:auto;left:calc(34px + 28px - 6px)}
  [data-freight] .route-rail::after{left:50%;right:auto;top:0;bottom:0;width:1.2px;height:auto;margin:0 0 0 -.6px;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 7px,transparent 7px 16px)}
  [data-freight] .route-case.fr-case{left:-15px;top:-7px;transform:rotate(90deg)}
}

@media (prefers-reduced-motion:reduce){
  .fr-truck.go .fr-wheel{animation:none}
  .fr-slats,.fr-rtk,.fr-has-x ~ .fr-rtk{transition:none}
  .h-visual .fr-stamp{animation:none}
}
@media print{.fr-route{display:none}}