/* Styles used only on logistics. */
@media (min-width:992px)  {
html.w-mod-js:not(.w-mod-ix) [data-w-id="dde51cb2-245f-faa1-80d0-a68524845a1b"]  {
background-color:rgba(255,255,255,0);
}

}


.nxr-frame{display:contents}   /* desktop: no-op. phone: becomes the full-viewport centering wrapper */
/* full-bleed dark backdrop, height capped */
.nxr-hero{
  position:relative;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  width:100%;
  min-height:600px;
  min-height:min(100svh,720px);    /* capped height so it never fills unbounded on large screens */
  overflow:hidden;
  background:var(--nx-dark);
  padding:clamp(20px,2.4vw,40px);  /* gutter around the hero (~30px on a laptop) */
  font-family:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.nxr-hero *{box-sizing:border-box}

/* content + animation, centred and capped in width */
.nxr-inner{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  max-width:1920px;                /* stops stretching past 1920 */
}

.nxr-copy{
  position:relative;
  z-index:2;
  width:min(46%,620px);
  padding:0 32px 0 clamp(24px,10%,150px);
}
.nxr-h1{
  margin:0;
  font-family:inherit;
  font-size:4rem;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.025em;
  color:#fff;
}
.nxr-p{
  margin:26px 0 0;
  max-width:440px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.55;
  color:#adadc8;
  text-wrap:pretty;
}
.nxr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  margin-top:42px;
  padding:0 30px;
  border-radius:12px;
  background:var(--nx-blue);
  color:#fff;
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:background .2s ease;
}
.nxr-btn:hover,.nxr-btn:visited,.nxr-btn:focus{color:#fff;text-decoration:none}
.nxr-btn:hover{background:#4a48ff}
.nxr-btn:focus-visible{outline:2px solid #b9b8fb;outline-offset:3px}

.nxr-art{position:absolute;left:43%;right:0;top:30px;bottom:30px;overflow:hidden}
.nxr-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nxr-fade-r{position:absolute;right:0;top:0;bottom:0;width:20%;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,12,29,0),var(--nx-dark) 92%)}
.nxr-fade-b{position:absolute;left:0;right:0;bottom:0;height:14%;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,12,29,0),var(--nx-dark) 92%)}

/* plays once, then holds */
.nxr-wire{animation:nxr-draw .8s cubic-bezier(.4,0,.5,1) var(--d,0s) 1 both}
.nxr-trail{animation:nxr-draw 1s cubic-bezier(.4,0,.3,1) var(--d,0s) 1 both}
.nxr-in{animation:nxr-fade .7s ease-out var(--d,0s) 1 both}
.nxr-lit{animation:nxr-fade .5s ease-out var(--d,0s) 1 both}
.nxr-pkt{animation:nxr-path 1s cubic-bezier(.4,0,.3,1) var(--d,0s) 1 both;offset-rotate:0deg}

@keyframes nxr-draw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes nxr-fade{0%{opacity:0}100%{opacity:1}}
@keyframes nxr-path{0%{offset-distance:0%;opacity:0}14%{opacity:1}86%{opacity:1;offset-distance:100%}100%{offset-distance:100%;opacity:0}}

@media (max-width:991px){
  .nxr-hero{min-height:min(100svh,900px);padding:100px 22px 28px}
  .nxr-inner{flex-direction:column;justify-content:flex-start;align-items:stretch}
  .nxr-copy{width:100%;padding:0;flex:none}
  .nxr-art{position:relative;left:0;right:0;top:0;bottom:0;width:100%;height:auto;min-height:340px;margin-top:18px;flex:1 1 auto}
  /* keep hairlines visible on high-DPI phones (they'd otherwise scale below 1px) */
  .nxr-gridline{stroke:#333061;stroke-width:1.3;vector-effect:non-scaling-stroke}
  .nxr-art rect[stroke]{stroke-width:1.3;vector-effect:non-scaling-stroke}
  .nxr-art rect[stroke="#232241"]{stroke:#3d3a72}    /* lift the card outlines */
}
/* PHONE (<=600px): full-height inset card, Humalike-style.
   The frame is exactly one visible viewport tall (100svh = screen with the
   browser bars showing) and the card stretches to fill it, so
   card + 14px gutter = the whole phone screen on load. The Webflow nav
   floats over the card's top edge, hence the 96px top padding.
   The card only grows past the screen if the content can't fit (very short
   phones), so nothing is ever clipped.
   NOTE: set the Webflow section padding to 0 — the frame owns the gutter. */
@media (max-width:600px){
  .nxr-frame{
    display:flex;
    flex-direction:column;
    min-height:100vh;                       /* fallback: browsers without svh */
    min-height:100svh;
    padding:14px;                           /* gutter, same on all four sides */
    box-sizing:border-box;
  }
  .nxr-hero{
    flex:1 0 auto;                          /* fill the frame's full height */
    min-height:0;
    width:100%;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.06);
    padding:96px 20px 24px;                 /* 96px top = clearance for the floating nav */
  }
  .nxr-inner{justify-content:flex-start}    /* copy sits under the nav; animation takes the rest */
  .nxr-h1{font-size:34px;font-weight:500}
  .nxr-btn{height:44px;margin-top:26px;padding:0 22px;font-size:15px}
  /* animation fills whatever height is left in the card (grid extends and fades out);
     aspect-ratio acts as its minimum so the boxes never shrink on short phones */
  .nxr-art{flex:1 0 auto;width:100%;height:auto;min-height:0;aspect-ratio:29/21;margin-top:18px}
  .nxr-art svg{transform:scale(1.06);transform-origin:center}
}
@media (prefers-reduced-motion:reduce){
  .nxr-wire,.nxr-trail,.nxr-in,.nxr-lit{animation:none;opacity:1;stroke-dashoffset:0}
  .nxr-pkt{animation:none;opacity:0}
}


@font-face { font-family: Switzer; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/Switzer-Regular.otf") format("opentype"); }
  @font-face { font-family: Switzer; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/Switzer-Medium.otf") format("opentype"); }
  @font-face { font-family: Switzer; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/Switzer-Semibold.otf") format("opentype"); }

  .ps-embed {
    --ink: #010101;
    --plate: var(--nx-dark);
    --page-bg: #ffffff;
    --radius-card: 1rem;
    --grid-gap: 0.5rem;
    --col-max: 150px;
    --page-x: 0.75rem;
    --plate-start: 0.88;
    --anim-h: clamp(300px, 105vw, 480px);
    --font: Switzer, sans-serif;
  }
  .ps-embed { margin: 0; padding: 0; width: 100%; background: var(--page-bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
  .ps-embed, .ps-embed *, .ps-embed *::before, .ps-embed *::after { margin: 0; padding: 0; box-sizing: border-box; }

  .ps-embed .page { width: 100%; padding: 1.5rem 0 2rem; }
  @media (min-width: 768px) { .ps-embed .page { padding: 5rem 0; } }

  .ps-embed .grid-layout { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--grid-gap); padding: 0 var(--page-x); justify-content: center; }
  @media (min-width: 1024px) { .ps-embed .grid-layout { grid-template-columns: repeat(12, minmax(0, var(--col-max))); padding: 0 1.5rem; } }

  .ps-embed .card-shell { grid-column: 1 / -1; position: relative; isolation: isolate; min-width: 0; }
  .ps-embed .card-plate { position: absolute; inset: 0; width: 100%; background: var(--plate); border-radius: var(--radius-card); z-index: 0; pointer-events: none; overflow: hidden; --inset: calc((1 - var(--plate-start)) * 50%); clip-path: inset(0 var(--inset) round var(--radius-card)); will-change: clip-path; }

  /* the animation lives inside the plate so its dark ground and the plate's rounded corners read as one surface */
  .ps-embed .card-anim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; background: var(--plate); pointer-events: auto; touch-action: pan-y; }
  .ps-embed .card-anim canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* mild abstract waves behind everything, drawn at half resolution for a soft look */
  .ps-embed .card-waves { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  /* bottom scrim so the copy reads over the animation */
  .ps-embed .card-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to bottom, rgba(13,12,29,0) 0%, rgba(13,12,29,.55) 45%, rgba(13,12,29,.92) 100%); pointer-events: none; }
  .ps-embed .card-inner { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; min-width: 0; min-height: clamp(600px, 40vw, 760px); pointer-events: none; }
  @media (min-width: 1024px) { .ps-embed .card-inner { padding: 3rem clamp(2rem, 3.5vw, 3.5rem) clamp(2.5rem, 3.5vw, 3.5rem); } }
  @media (max-width: 1023px) {
    .ps-embed .page { padding: 1rem 0 1.25rem; }
    .ps-embed .card-anim { pointer-events: none; }
    .ps-embed .card-inner { padding: 1.25rem; min-height: min(calc(100vh - 2.25rem), 165vw); min-height: min(calc(100svh - 2.25rem), 165vw); }
    .ps-embed .card-scrim { height: 45%; }
  }
  /* touch devices: the mark forms once and holds; let touches scroll the page */
  @media (hover: none) { .ps-embed .card-anim { pointer-events: none; } }
  /* copy bottom-left — heading + CTA pair */
  .ps-embed .card-copy { display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; min-width: 0; max-width: 100%; }
  .ps-embed .nxr-h1 { margin: 0; max-width: none; white-space: nowrap; font-family: Switzer, sans-serif; font-size: clamp(1.75rem, 2.9vw, 3.5rem); font-weight: 400; line-height: 110%; letter-spacing: -.015em; color: #fff; }
  .ps-embed .nxr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
  .ps-embed .nxr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 24px; border-radius: 8px; font-family: Switzer, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
  .ps-embed .nxr-btn:hover, .ps-embed .nxr-btn:visited, .ps-embed .nxr-btn:focus { text-decoration: none; }
  .ps-embed .nxr-btn-primary { background: #fff; color: #010101; padding-right: 8px; }
  .ps-embed .nxr-btn-primary:hover, .ps-embed .nxr-btn-primary:visited, .ps-embed .nxr-btn-primary:focus { color: #010101; }
  .ps-embed .nxr-btn-primary:hover { background: #e9e9ed; }
  .ps-embed .nxr-btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: #010101; color: #fff; }
  .ps-embed .nxr-btn-arrow svg { width: 14px; height: 14px; display: block; }
  .ps-embed .nxr-btn-outline { background: var(--plate); color: #fff; border: .6px solid rgba(255,255,255,.5); }
  .ps-embed .nxr-btn-outline:hover, .ps-embed .nxr-btn-outline:visited, .ps-embed .nxr-btn-outline:focus { color: #fff; }
  .ps-embed .nxr-btn-outline:hover { background: #1c1b45; border-color: #fff; }
  .ps-embed .nxr-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  @media (max-width: 1023px) {
    .ps-embed .card-copy { padding-top: 2rem; }
    .ps-embed .nxr-h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); max-width: none; white-space: normal; text-wrap: pretty; }
  }
  @media (max-width: 479px) {
    .ps-embed .nxr-ctas { margin-top: 24px; }
  }
  /* zero-g layer: pills + (desktop) the heading and buttons become draggable bodies */
  .ps-embed .float-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: var(--radius-card); }
  .ps-embed .float-layer > * { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; cursor: grab; }
  .ps-embed .float-layer > .nxr-btn { cursor: pointer; }
  .ps-embed .float-layer > .dragging { cursor: grabbing; z-index: 20; }
  .ps-embed .nxr-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.62); background: rgba(13,12,29,.55); color: #fff; font-family: Switzer, sans-serif; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: -.01em; white-space: nowrap; opacity: 0; }
  /* three pill treatments cycle through the set: outline, filled dark, brand tint */
  .ps-embed .nxr-pill-dark { border-color: transparent; background: #1c1b45; }
  .ps-embed .nxr-pill-brand { border-color: rgba(95,94,245,.7); background: rgba(55,53,242,.22); }
  @media (min-width: 1024px) { .ps-embed .nxr-pill { --pill-alpha: 0.78; } }
  @media (max-width: 1023px) {
    .ps-embed .float-layer { bottom: auto; height: var(--anim-h); z-index: 10; }
    .ps-embed .nxr-pill { height: 34px; padding: 0 14px; font-size: 13px; }
  }
  @media (prefers-reduced-motion: reduce) { .ps-embed * { transition-duration: 0.001s !important; } }