/* Home page below the first screen. The header and hero are styled by the critical CSS inline in index.html */

/* Solution cards: the three animated scenes */
.scard .viz.v-ful{background:var(--cobalt)}
.scard .viz.v-trans{background:#FFF1EA}
.scard .viz.v-ware{background:#E7FAF5;display:grid;place-items:center;padding:20px}
/* conveyor */
.belt{position:absolute;left:0;right:0;bottom:18%;height:16px;border-radius:8px;background:repeating-linear-gradient(90deg,#1E40D6 0 18px,#3F69FF 18px 36px) 0 0/36px 100%;animation:belt 1s linear infinite}
@keyframes belt{to{background-position:36px 0}}
.bx{position:absolute;bottom:calc(18% + 16px);width:46px;height:40px;border-radius:6px;border:2.5px solid var(--ink);animation:ride 6s linear infinite}
.bx::after{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:var(--ink)}
@keyframes ride{from{left:-60px}to{left:calc(100% + 20px)}}
.scan{position:absolute;left:50%;bottom:calc(18% + 16px);width:3px;height:90px;background:var(--sun);box-shadow:0 0 16px 4px rgba(255,200,61,.8);animation:scan 1.5s ease-in-out infinite}
.scan::before{content:"";position:absolute;left:-22px;top:-14px;width:46px;height:14px;border-radius:6px;background:#fff}
@keyframes scan{50%{opacity:.25}}
.ticker{position:absolute;right:0;top:0;background:#fff;color:var(--ink);border-radius:12px;padding:8px 12px;font-family:var(--mono);font-size:12px}
/* truck */
.road{position:absolute;left:0;right:0;bottom:16%;height:4px;background:repeating-linear-gradient(90deg,var(--tang) 0 22px,transparent 22px 40px) 0 0/40px 100%;animation:roadM .7s linear infinite reverse}
@keyframes roadM{to{background-position:40px 0}}
.truck{position:absolute;bottom:calc(16% + 6px);width:110px;animation:drive 7s cubic-bezier(.4,0,.6,1) infinite}
@keyframes drive{0%{left:-120px}45%,55%{left:calc(50% - 55px)}100%{left:calc(100% + 20px)}}
/* shelves */
.shelf{width:min(260px,90%);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px;border:2.5px solid var(--ink);border-radius:10px;background:#fff}
.shelf i{aspect-ratio:1/1;max-width:100%;border-radius:4px;animation:stock 4s ease-in-out infinite}
@keyframes stock{0%,100%{transform:scale(1)}45%,55%{transform:scale(.2);opacity:.25}}
/* Forms */
.ct-form{background:#fff;color:var(--ink);border-radius:26px;padding:30px;display:flex;flex-direction:column;gap:22px;box-shadow:0 30px 60px rgba(10,20,80,.25)}
.ct-form label{font-weight:700;font-size:15px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ct-form input,.ct-form textarea{flex:1 1 180px;min-width:0;font:inherit;font-size:15px;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--sky);min-height:48px;color:var(--ink)}
.qb-ok{font-size:14px;color:#0E6B57;background:#DFF8F1;border-radius:12px;padding:14px}
.qb-ok.err{color:var(--tang-d);background:#FFE9DF}
.btn:disabled{opacity:.85;cursor:progress}
/* Sending: a ring spins in the submit button */
.spin{width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* The sending spinner is a status, not decoration: with reduced motion it keeps turning, slower */
@media (prefers-reduced-motion: reduce){.spin{animation-duration:1.6s!important;animation-iteration-count:infinite!important}}

/* Globe crew: the globe and the US map take the full width of the block; narrow screens keep a square canvas */
.contact-grid .h2,.contact-grid .lead{margin-top:16px}
/* Capped in height, so on a big monitor it does not take the whole screen: the canvas then just gets wider */
.globe-wrap{position:relative;width:100%;aspect-ratio:16/10;max-height:min(600px, 72vh)}
@media (max-width:900px){.globe-wrap{max-width:520px;aspect-ratio:1/1;max-height:none}}
#globe{width:100%;height:100%;display:block}

.globe-col{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.gcap{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:600;font-size:15px;text-align:center}
@media (max-width:600px){.gcap{text-align:left;font-size:14px;border-radius:18px}}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);animation:pulse 1.4s infinite;flex:none;transition:background-color .4s}
@keyframes pulse{50%{opacity:.25}}

/* Solutions (3PL Center style: three columns with feature lists) */
.sol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.scard{border:1px solid var(--line);border-radius:26px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.scard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(20,33,61,.1)}
.scard .viz{position:relative;height:170px;overflow:hidden}
.scard .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:16px;flex:1}
.scard h3{font-size:26px;font-weight:700}
.feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.feat-list li{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink)}
.feat-list li span.ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.scard .more{margin-top:auto;color:var(--cobalt-d);font-weight:700;text-decoration:none}
.scard .more:hover{text-decoration:underline}
@media (max-width:920px){.sol{grid-template-columns:minmax(0,1fr)}}

/* How it works: one compact, auto-playing track */
.how{background:#fff;border:1px solid var(--line);border-radius:32px;padding:40px 36px 36px}
.track-line{position:relative;height:72px;margin:0 6%}
.track-line .base{position:absolute;left:0;right:0;top:50%;height:4px;border-radius:2px;background:var(--sky-2);transform:translateY(-50%)}
.track-line .fill{position:absolute;left:0;top:50%;height:4px;border-radius:2px;background:var(--cobalt);transform:translateY(-50%);width:0;transition:width .9s cubic-bezier(.6,0,.2,1)}
.node{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;border:3px solid var(--sky-2);transition:background .4s,border-color .4s,transform .4s}
.node.on{border-color:var(--ink);transform:scale(1.15)}
.parcel{position:absolute;top:50%;width:46px;height:46px;margin:-60px 0 0 -23px;transition:left .9s cubic-bezier(.6,0,.2,1);animation:hop .45s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-6px)}}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:18px}
.step{text-align:center;display:flex;flex-direction:column;gap:6px;opacity:.5;transition:opacity .4s}
.step.on{opacity:1}
.step b{font-family:var(--display);font-size:19px}
.step span{color:var(--muted);font-size:14px}
@media (max-width:760px){
  .how{padding:28px 18px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{display:none;text-align:center}.step.on{display:flex}
}

/* Integrations: stores slide by on top, carriers' trucks below. A box slides down a chute onto the IntersTailor line, gets a star and a shipping label under the gantry, and slides down to the trucks. The rows sit above the boxes, so a box comes out of one row and goes into the other */
.ig-stage{position:relative;container-type:inline-size}
.ig-lbl{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 4px 8px}
.ig-lbl.under{margin:8px 4px 0;text-align:right}
/* The track's fade mask clips to its own box, so the track (not the row) carries the vertical padding: room for a chip that lifts and for the shadows */
.ig-row{position:relative;z-index:3;border-radius:20px;padding:4px 0;overflow:hidden;background:#fff;border:1.5px dashed var(--line)}
.ig-track{display:flex;width:max-content;list-style:none;margin:0;padding:8px 0;animation:igMq var(--dur,30s) linear infinite;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ig-bot .ig-track{animation-direction:reverse}
@keyframes igMq{to{transform:translateX(-50%)}}
.ig-chip{flex:none;margin-right:var(--gap,var(--gap0,12px));display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;background:#fff;border:2px solid var(--c);box-shadow:3px 3px 0 var(--c);font-family:var(--display);font-weight:700;font-size:16px;white-space:nowrap;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.ig-chip::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c);transform:rotate(45deg)}
.ig-chip.is-pick{transform:translateY(-4px) scale(1.07)}
/* Carriers drive by as trucks of one length: the trailer is a chip, the cab and wheels follow its colour. No road under them */
.ig-truck{flex:none;position:relative;display:flex;align-items:flex-end;padding-bottom:8px;margin-right:var(--gap,24px);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.ig-truck.is-got{transform:translateY(-5px)}
.ig-trl{display:inline-flex;align-items:center;justify-content:center;width:116px;height:44px;border-radius:9px;background:#fff;border:2px solid var(--c);font-family:var(--display);font-weight:700;font-size:17px;white-space:nowrap}
.ig-cab{display:block;flex:none;width:42px;height:37px;margin-left:-2px}
.ig-wh{position:absolute;bottom:0;width:17px;height:17px;border-radius:50%;border:4px solid var(--ink);background:linear-gradient(90deg,transparent 40%,var(--c) 40% 60%,transparent 60%) #fff;animation:igWheel 1.3s linear infinite}
.ig-wh.w1{left:16px}.ig-wh.w2{right:9px}
@keyframes igWheel{to{transform:rotate(360deg)}}
/* The line: chutes in and out, a gantry with two stations, a star funnel (--s1) and a label printer (--s2) */
.ig-mid{position:relative;height:170px}
.ig-belt{position:absolute;left:20%;right:18%;bottom:34px;height:14px;border-radius:999px;background:var(--ink);overflow:hidden;z-index:1}
.ig-belt::before{content:"";position:absolute;inset:3px 6px;border-radius:999px;background:repeating-linear-gradient(90deg,#4A5B82 0 10px,transparent 10px 22px) 0 0/22px 100%;animation:igBelt var(--bdur,.2s) linear infinite}
@keyframes igBelt{to{background-position:22px 0}}
.ig-tracks{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ig-tracks path{fill:none;stroke:var(--tang);stroke-width:3;stroke-dasharray:9 7;stroke-linecap:round;animation:igChute .6s linear infinite}
@keyframes igChute{to{stroke-dashoffset:-16}}
.ig-gantry{position:absolute;top:10px;left:var(--bl);width:var(--bw);height:36px;z-index:5;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--ink);color:#fff;border-radius:10px;font-family:var(--display);font-weight:800;font-size:16px;white-space:nowrap}
.ig-gantry small{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#9DB2FF}
.ig-gantry::before,.ig-gantry::after{content:"";position:absolute;top:100%;width:4px;height:var(--legh,70px);background:var(--ink)}
.ig-gantry::before{left:12px}.ig-gantry::after{right:12px}
.ig-funnel{position:absolute;top:46px;left:var(--s1);width:42px;height:22px;margin-left:-21px;z-index:4}
.ig-stardrop{position:absolute;top:50px;left:var(--s1);width:22px;height:22px;margin-left:-11px;opacity:0;z-index:1}
.ig-printer{position:absolute;top:46px;left:var(--s2);width:48px;height:20px;margin-left:-24px;background:#C5CEE3;border:2px solid var(--ink);border-top:0;border-radius:0 0 9px 9px;z-index:4}
.ig-printer::after{content:"";position:absolute;left:8px;right:8px;bottom:3px;height:3px;border-radius:2px;background:var(--ink)}
.ig-label{position:absolute;top:58px;left:var(--s2);width:14px;height:17px;margin-left:-16px;background:#fff;border:1.5px solid var(--ink);border-radius:2px;opacity:0;z-index:3}
/* The box: front view, kraft with flaps; the tape takes the colour of the store it came from */
.ig-box{position:absolute;left:0;top:0;width:44px;height:40px;z-index:2;transform-origin:50% 100%;will-change:transform}
.ig-box svg{display:block;width:100%;height:100%;overflow:visible}
.ig-box .flap{fill:#FFC83D;stroke:#14213D;stroke-width:1.8;transform-box:fill-box;transition:transform .22s ease}
.ig-box .flap.l{transform-origin:0% 100%}
.ig-box .flap.r{transform-origin:100% 100%}
.ig-box.is-open .flap.l{transform:rotate(-135deg)}
.ig-box.is-open .flap.r{transform:rotate(135deg)}
.ig-box .tape{fill:var(--tape,#FF7A45)}
.ig-box .stk,.ig-box .lab{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .15s, transform .3s cubic-bezier(.3,1.7,.5,1)}
.ig-box.is-stamped .stk,.ig-box.is-labeled .lab{opacity:1;transform:none}
/* On phones the line reaches into the side gutters */
@media (max-width:600px){.ig-flow{margin-inline:-10px}}
.ig-more{margin-top:18px;color:var(--muted);font-size:15px}
.ig-more a{color:var(--cobalt-d);font-weight:700;text-decoration:none}
@container (max-width:560px){
  .ig-row{--gap0:9px}
  .ig-chip{height:38px;font-size:14px;padding:0 13px;border-radius:10px}
  .ig-trl{width:87px;height:36px;font-size:14px}
  .ig-cab{width:34px;height:30px}
  .ig-wh{width:14px;height:14px;border-width:3px}
  .ig-box{width:36px;height:33px}
  .ig-mid{height:160px}
  /* Narrow: the line takes most of the width, the chutes in and out get short, so the star and label stations stay apart */
  .ig-belt{left:12%;right:11%}
  .ig-lbl{font-size:10px}
  .ig-gantry{font-size:14px;padding:0 10px}
  .ig-gantry small{display:none}
}

/* Footer: one thin row under the street scene */
footer{background:var(--ink);color:#C5CEE3;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));font-size:14px}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.f-logo{display:flex}
.f-links{display:flex;gap:12px 24px;flex-wrap:wrap}
.fwm{height:36px;width:auto}
footer a{text-decoration:none}
footer a:hover{color:#fff}

/* Contact: on sky, hemmed along the top with a stitch that keeps being sewn and a pair of scissors */
.hem{position:relative;padding-bottom:0}
.seam{position:absolute;left:0;right:0;top:12px;height:34px;display:flex;align-items:center;pointer-events:none}
.seam-line{position:absolute;left:0;right:0;width:100%;height:4px;overflow:visible}
.seam-line line{stroke:var(--tang);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:12 9;animation:sew 1.6s linear infinite}
@keyframes sew{to{stroke-dashoffset:-21}}
.seam-tool{position:relative;display:flex;padding:0 8px;margin-left:max(var(--gut-l), calc((100% - 1200px)/2 + var(--gut-l) - 8px));background:var(--sky)}
.seam-tool svg{width:32px;height:32px;transform:rotate(-90deg)}
.hem .ct-ways li{background:#fff}
.hem .scene-foot{background:none}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:stretch}
.ct-form{border:1px solid var(--line);box-shadow:0 30px 60px rgba(20,33,61,.08);gap:18px}
.ct-form label{flex-direction:column;align-items:stretch;gap:8px}
.ct-form label small{font-weight:500;color:var(--muted)}
.ct-form input,.ct-form textarea{flex:none}
.ct-form textarea{min-height:140px;resize:vertical;line-height:1.5}
/* Sent: the fields keep the message, muted and no longer editable */
.ct-form.is-sent input,.ct-form.is-sent textarea{color:var(--muted);cursor:default;resize:none}
/* The form matches the height of the text beside it: the message box takes up the slack */
.ct-form .grow,.ct-form .grow textarea{flex:1}
.ct-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct-form .btn{align-self:flex-start}
.ct-ways{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.ct-ways li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--sky);border:1px solid var(--line)}
.ct-ways .fi{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff}
.ct-ways strong{font-family:var(--display);font-size:18px;display:block}
.ct-ways a{color:var(--cobalt-d);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.ct-ways small{color:var(--muted);font-size:14px}
@media (max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.ct-two{grid-template-columns:minmax(0,1fr)}.ct-form{padding:22px}.ct-form .btn{align-self:stretch}}

/* Footer scene: a still street with the warehouse and a truck parked at it, so nothing moves next to the contact form */
.scene-foot{position:relative;background:var(--bg);overflow:hidden;line-height:0;margin-top:40px}
.scene-foot svg{width:100%;height:auto;display:block;min-height:150px}