/* Styles used only on pharma. */
@media (min-width:992px)  {
html.w-mod-js:not(.w-mod-ix) [data-w-id="4b04f5e8-c65f-c3a7-95f4-271eae51e5aa"]  {
background-color:rgba(255,255,255,0);
}
html.w-mod-js:not(.w-mod-ix) [data-w-id="4b04f5e8-c65f-c3a7-95f4-271eae51e5b4"]  {
background-color:rgba(255,255,255,0);
}

}


.nxq-frame{display:contents}   /* desktop: no-op. phone: becomes the full-viewport centering wrapper */
/* full-bleed dark backdrop, height capped */
.nxq-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;
}
.nxq-hero *{box-sizing:border-box}

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

.nxq-copy{
  position:relative;
  z-index:2;
  width:min(46%,620px);
  padding:0 32px 0 clamp(24px,10%,150px);
}
.nxq-h1{
  margin:0;
  font-family:inherit;
  font-size:4rem;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.025em;
  color:#fff;
}
.nxq-p{
  margin:26px 0 0;
  max-width:440px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.55;
  color:#adadc8;
  text-wrap:pretty;
}
.nxq-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;
}
.nxq-btn:hover,.nxq-btn:visited,.nxq-btn:focus{color:#fff;text-decoration:none}
.nxq-btn:hover{background:#4a48ff}
.nxq-btn:focus-visible{outline:2px solid #b9b8fb;outline-offset:3px}

.nxq-art{position:absolute;left:43%;right:0;top:30px;bottom:30px;overflow:hidden;
  transform:scale(1.30);transform-origin:center}   /* animation 30% larger, grows toward the corners */
.nxq-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nxq-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%)}
.nxq-fade-b{position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,12,29,0),var(--nx-dark) 92%)}

/* one-shot formation, then it holds */
.nxq-ring{animation:nxq-draw 2.7s cubic-bezier(.4,0,.5,1) var(--d,0s) 1 both}
.nxq-bond{animation:nxq-bond 1.3s ease-out var(--d,0s) 1 both}
.nxq-node{transform-box:fill-box;transform-origin:center;
  animation:nxq-node .85s cubic-bezier(.2,.9,.3,1) var(--d,0s) 1 both}

@keyframes nxq-draw{0%{stroke-dashoffset:1;opacity:0}6%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes nxq-bond{0%{opacity:0}100%{opacity:1}}
@keyframes nxq-node{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.75)}100%{opacity:1;transform:scale(1)}}

@media (max-width:991px){
  .nxq-hero{min-height:min(100svh,900px);padding:100px 22px 28px}
  .nxq-inner{flex-direction:column;justify-content:flex-start;align-items:stretch}
  .nxq-copy{width:100%;padding:0;flex:none}
  .nxq-art{position:relative;left:0;right:0;top:0;bottom:0;width:100%;height:auto;min-height:280px;margin-top:24px;flex:1 1 auto;transform:none}
  .nxq-latline{stroke:#2a2850}    /* lighter lattice on smaller screens */
}
/* PHONE (<=600px): full-height inset card, same system as the Logistics and
   Tenancy heroes. 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){
  .nxq-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;
  }
  .nxq-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 */
  }
  .nxq-inner{justify-content:flex-start}    /* copy sits under the nav; molecule takes the rest */
  .nxq-h1{font-size:34px;font-weight:500}
  .nxq-btn{height:44px;margin-top:26px;padding:0 22px;font-size:15px}
  /* molecule fills whatever height is left in the card (lattice extends and fades out);
     aspect-ratio is its minimum height. 3/2 (was 27/20) so this hero's longer
     copy still fits a 375x667 screen */
  .nxq-art{flex:1 0 auto;width:100%;height:auto;min-height:0;aspect-ratio:3/2;margin-top:18px}
  .nxq-art svg{transform:scale(1.25);transform-origin:center}
}
@media (prefers-reduced-motion:reduce){
  .nxq-ring,.nxq-bond,.nxq-node{animation:none}
  .nxq-ring{stroke-dashoffset:0;opacity:1}
  .nxq-bond{opacity:1}
  .nxq-node{opacity:1}
}


@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; } }