/* Styles used only on proptech. */
[data-nxtc6-hero]{position:relative;display:flex;align-items:center;width:100%;height:100%;min-height:720px;min-height:min(100svh720px);overflow:hidden;background:var(--nx-dark);font-family:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
[data-nxtc6-hero] *{box-sizing:border-box}
[data-nxtc6-hero] .nxtc6-copy{position:relative;z-index:2;width:min(46%,620px);padding:0 32px 0 clamp(24px,12%,180px)}
[data-nxtc6-hero] .nxtc6-h1{margin:0;font-family:inherit;font-size:clamp(38px,4.6vw,66px);font-weight:400;line-height:1.04;letter-spacing:-.025em;color:#fff}
[data-nxtc6-hero] .nxtc6-p{margin:26px 0 0;max-width:440px;font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:#adadc8;text-wrap:pretty}
[data-nxtc6-hero] .nxtc6-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;margin-top:42px;padding:0 30px;border:0;border-radius:12px;background:var(--nx-blue);color:#fff;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer}
[data-nxtc6-hero] .nxtc6-btn:hover{background:#4a48ff}
[data-nxtc6-hero] .nxtc6-btn:visited,[data-nxtc6-hero] .nxtc6-btn:focus{color:#fff;text-decoration:none}
[data-nxtc6-hero] .nxtc6-btn:focus-visible{outline:2px solid #b9b8fb;outline-offset:3px}
[data-nxtc6-hero] .nxtc6-art{position:absolute;left:43%;right:-8%;top:40px;bottom:40px;overflow:hidden}
@media(max-width:991px){[data-nxtc6-hero]{flex-direction:column;justify-content:center;min-height:0;padding:104px 0 56px}[data-nxtc6-hero] .nxtc6-copy{width:100%;padding:0 24px}[data-nxtc6-hero] .nxtc6-art{position:relative;left:0;top:0;bottom:0;width:110%;align-self:flex-start;height:320px;margin-top:40px;flex:none}}

/* Frame wrapper: display:contents = no box at all on desktop/tablet, so the
   layout above is untouched. On phones it becomes the full-screen frame. */
[data-nxtc6-frame]{display:contents}

/* PHONE (<=600px): full-height inset card, same system as the Logistics hero.
   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 wrapper/section padding to 0; the frame owns the gutter. */
@media(max-width:600px){
  [data-nxtc6-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;
  }
  [data-nxtc6-hero]{
    flex:1 0 auto;                          /* fill the frame's full height */
    box-sizing:border-box;                  /* keeps width:100% + side padding inside the frame */
    height:auto;
    min-height:0;
    justify-content:flex-start;             /* copy sits under the nav; city takes the rest */
    align-items:stretch;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.06);
    padding:96px 20px 24px;                 /* 96px top = clearance for the floating nav */
  }
  [data-nxtc6-hero] .nxtc6-copy{padding:0}
  /* same phone type scale as the Logistics hero */
  [data-nxtc6-hero] .nxtc6-h1{font-size:34px;font-weight:500}   /* phones stay 500, same as Logistics */
  [data-nxtc6-hero] .nxtc6-btn{height:44px;margin-top:26px;padding:0 22px;font-size:15px}
  /* city fills whatever height is left in the card and runs edge to edge
     (the card's rounded corners clip it); aspect-ratio acts as its minimum
     so the city never shrinks on short phones */
  [data-nxtc6-hero] .nxtc6-art{
    flex:1 0 auto;
    align-self:stretch;
    width:auto;
    height:auto;
    aspect-ratio:16/10;
    margin:18px -20px 0;
  }
  [data-nxtc6-hero] [data-nxtc6-embed]{position:absolute;inset:0;height:auto;min-height:0;aspect-ratio:auto}
  /* the buildings only occupy the middle ~55% of the 900-wide drawing, so
     scale it up from the centre to make the city fill the phone width */
  [data-nxtc6-hero] [data-nxtc6-embed] svg{transform:scale(1.6);transform-origin:50% 52%}
  /* city is centred on phones; the right-edge fade would only dim one side */
  [data-nxtc6-hero] [data-nxtc6-embed] .nxtc6-fade-r{display:none}
}


[data-nxtc6-embed] {
position:relative;width:100%;height:100%;min-height:320px;aspect-ratio:900/620;overflow:hidden;isolation:isolate;background:var(--nx-dark);box-sizing:border-box
}

[data-nxtc6-embed] .nxtc6-scene {
position:absolute;inset:0
}

[data-nxtc6-embed] svg {
position:absolute;inset:0;width:100%;height:100%;overflow:visible
}

[data-nxtc6-embed] .nxtc6-road-guide,[data-nxtc6-embed] .nxtc6-road {
fill:none;stroke-linejoin:round;stroke-linecap:round
}

[data-nxtc6-embed] .nxtc6-road-guide {
stroke:#28253f;stroke-width:1;opacity:.5
}

[data-nxtc6-embed] .nxtc6-road {
stroke:#59558e;stroke-width:1.15
}

[data-nxtc6-embed] .nxtc6-building path {
stroke-width:1.45;stroke-linejoin:round
}

[data-nxtc6-embed] .nxtc6-wall-front {
fill:#16132c;stroke:#817cdf
}

[data-nxtc6-embed] .nxtc6-wall-side {
fill:#100f23;stroke:#7772cb
}

[data-nxtc6-embed] .nxtc6-roof {
fill:#19162f;stroke:#a39ef8
}

[data-nxtc6-embed] .nxtc6-building .nxtc6-storeys {
fill:none;stroke:#7066a9;stroke-width:.7;opacity:.65
}

[data-nxtc6-embed] .nxtc6-foundations {
fill:none;stroke:#49426e;stroke-width:.85;opacity:.7
}

[data-nxtc6-embed] .nxtc6-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%)
}

[data-nxtc6-embed] .nxtc6-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%)
}


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