/* ===========================================================================
   RELENTIX — "Split Island" navigation  (Concept C)

   Three detached elements that never touch:

     [R mark]            ┌─ Services  Team ─┐            [ GET IN TOUCH → ]
      bare, far left      glass capsule, centred          sharp blue rectangle

   The bare mark reads as a brand artifact rather than a nav button; only the
   links live inside a container. Asymmetry — bare / contained / bare — is the
   whole idea, so nothing here gets a shared background or a bounding box.

   Drop-in replacement for nav-morph.css: consumes the identical markup each
   page already ships (.nm > .nm-logo, .nm-links > .nm-l, .nm-cta), so no
   page's nav HTML has to change. nav-split.js adds the lens, the mobile
   sheet and the compact-on-scroll state.

   Standalone: every custom property has a fallback, because the legal pages
   style a bare `nav` element and load fewer stylesheets than the home page.
   =========================================================================== */

.nm,.nm *,.nm *::before,.nm *::after,
.nm-sheet,.nm-sheet *,.nm-sheet *::before,.nm-sheet *::after{box-sizing:border-box}

/* Shared tokens. The mobile sheet is appended to <body> rather than to .nm —
   it has to sit under the bar in the stacking order — so it is NOT a
   descendant and cannot inherit tokens scoped to .nm. Both selectors get the
   block; otherwise every var() inside the sheet resolves to nothing, which
   silently invalidates whole declarations (font-family falls back to the body
   serif, padding computes to 0). */
.nm,.nm-sheet{
  --nm-ease:cubic-bezier(.16,1,.3,1);
  --nm-brand:var(--c-brand,#00A3FF);
  --nm-ink:#F8FAFC;
  --nm-mut:#94A3B8;
  --nm-line:rgba(255,255,255,.09);
  --nm-mono:'JetBrains Mono',ui-monospace,monospace;
  --nm-disp:'Saira Condensed','Arial Narrow',system-ui,sans-serif;
}

.nm{
  --nm-h:88px;              /* bar height at rest */
  --nm-mark:36px;           /* logo mark size at rest */
  --nm-pad:clamp(20px,4vw,44px);

  /* resets: the legal pages give bare `nav` elements their own styling */
  position:fixed;top:0;left:0;right:0;bottom:auto;z-index:900;
  width:auto;max-width:none;height:var(--nm-h);margin:0;border:0;transform:none;
  padding:0 var(--nm-pad);
  display:flex;align-items:center;justify-content:space-between;
  background:none;border-radius:0;box-shadow:none;overflow:visible;
  /* the legal pages blur and saturate a bare `nav`; that tinted the strip
     behind the bar a different colour from the hero under it */
  -webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--nm-ink);
  font-family:var(--nm-mono);font-size:14px;line-height:1.3;
  letter-spacing:normal;text-transform:none;
  -webkit-font-smoothing:antialiased;
  transition:height .5s var(--nm-ease),transform .5s var(--nm-ease),opacity .35s var(--nm-ease);

  /* the gaps between the three islands stay transparent to the page beneath,
     so the hero remains clickable where the nav only looks like empty space */
  pointer-events:none;
}
.nm>*{pointer-events:auto}

:where(.nm a){color:inherit;text-decoration:none}
:where(.nm button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.nm :focus-visible{outline:2px solid var(--nm-brand);outline-offset:3px;border-radius:2px}

.nm.compact{--nm-h:68px;--nm-mark:30px}
.nm.nav-hide{transform:translateY(-130%)!important;opacity:0!important;pointer-events:none}

/* staggered entrance: each island arrives on its own beat */
.nm-logo,.nm-links,.nm-right{animation:nmRise .9s var(--nm-ease) both}
.nm-logo{animation-delay:.05s}
.nm-links{animation-delay:.12s}
.nm-right{animation-delay:.19s}
@keyframes nmRise{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.nm-links{animation-name:nmRiseC}
@keyframes nmRiseC{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1;transform:translateX(-50%)}}

/* ---------------------------------------------------------------- 1. mark --
   Bare: no badge, no ring, no plate. Only the PNG's own alpha and a soft
   drop-shadow that stands in for the neon the artwork already carries. */
.nm-logo{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  padding:0;border-radius:0;background:none;
  font-size:13px;font-weight:500;letter-spacing:.22em;white-space:nowrap;
}
.nm-logo b{
  display:block;width:var(--nm-mark);height:var(--nm-mark);flex-shrink:0;
  background:url(/logo-mark.png) center/contain no-repeat;
  background-color:transparent;border:0;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 0 16px rgba(0,163,255,.38));
  transition:width .5s var(--nm-ease),height .5s var(--nm-ease),
             transform .5s var(--nm-ease),filter .5s var(--nm-ease);
}
.nm-logo b::before,.nm-logo b::after{display:none}
.nm-logo:hover b{transform:scale(1.06);filter:drop-shadow(0 0 22px rgba(0,163,255,.6))}
.nm-logo span{color:var(--nm-ink);transition:letter-spacing .45s var(--nm-ease)}
.nm-logo:hover span{letter-spacing:.26em}

/* -------------------------------------------------------------- 2. capsule --
   Absolutely centred so it sits on the optical centre of the viewport no
   matter how wide the mark or the CTA get. */
.nm-links{
  /* top/bottom 0 + auto block margins centre it vertically without needing a
     translateY, which keeps `transform` free for the horizontal centring (and
     for the entrance keyframe) while the bar's height animates */
  position:absolute;left:50%;top:0;bottom:0;margin:auto 0;
  transform:translateX(-50%);
  height:42px;display:flex;align-items:center;padding:0 5px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--nm-line);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  transition:height .5s var(--nm-ease),background-color .5s var(--nm-ease),
             border-color .5s var(--nm-ease);
}
.nm.compact .nm-links{
  height:38px;
  background:rgba(2,6,23,.5);
  border-color:rgba(255,255,255,.12);
}

/* the gliding lens — the one piece of motion in the whole bar */
.nm-spot{
  position:absolute;top:50%;left:0;height:30px;margin-top:-15px;
  border-radius:999px;pointer-events:none;
  width:var(--w,0px);transform:translateX(var(--x,0px));opacity:0;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .5s var(--nm-ease),width .5s var(--nm-ease),opacity .3s;
}
.nm-spot.show{opacity:1}

.nm-l{
  position:relative;z-index:1;display:inline-flex;align-items:center;
  height:100%;padding:0 18px;
  font-size:13px;font-weight:400;letter-spacing:.01em;white-space:nowrap;
  color:var(--nm-ink);opacity:.68;
  transition:opacity .3s var(--nm-ease);
}
.nm-l:hover,.nm-l:focus-visible,.nm-l.on{opacity:1}
.nm-l.on::after{
  content:'';position:absolute;left:50%;bottom:9px;
  width:3px;height:3px;margin-left:-1.5px;border-radius:50%;
  background:var(--nm-brand);box-shadow:0 0 8px var(--nm-brand);
}

/* ------------------------------------------------------------------ 3. CTA --
   Sharp rectangle, per the brand's button spec: no radius, mono caps,
   .25em tracking, a shimmer sweep on hover. */
.nm-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}

.nm-cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  height:40px;padding:0 20px;margin:0;border-radius:0;overflow:hidden;white-space:nowrap;
  background:var(--nm-brand);color:#020617;border:1px solid var(--nm-brand);
  font-size:11px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;
  transition:background-color .35s var(--nm-ease),color .35s var(--nm-ease),
             border-color .35s var(--nm-ease),transform .35s var(--nm-ease);
}
.nm-cta::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .55s ease;
}
.nm-cta:hover::before{left:100%}
.nm-cta:hover{background:#fff;border-color:#fff;color:#020617}
.nm-cta:active{transform:scale(.98)}
.nm-cta>*{position:relative}
.nm-cta svg{width:14px;height:14px;flex-shrink:0;transition:transform .4s var(--nm-ease)}
.nm-cta:hover svg{transform:translateX(3px)}

/* ------------------------------------------------------- mobile: the burger --
   Square, 1px, sharp — echoes the CTA rather than the capsule, so the right
   side reads as one pair. Hidden on desktop. */
.nm-burger{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.03)!important;
  border-radius:0;
  transition:background-color .3s,border-color .3s;
}
.nm-burger:hover{background:rgba(0,163,255,.12)!important;border-color:rgba(0,163,255,.55)!important}
.nm-bars{position:relative;display:block;width:16px;height:12px}
.nm-bars i{
  position:absolute;left:0;width:16px;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform .45s var(--nm-ease),top .45s var(--nm-ease),opacity .25s;
}
.nm-bars i:nth-child(1){top:0}
.nm-bars i:nth-child(2){top:5.25px}
.nm-bars i:nth-child(3){top:10.5px}
.nm-sheet-open .nm-bars i:nth-child(1){top:5.25px;transform:rotate(45deg)}
.nm-sheet-open .nm-bars i:nth-child(2){opacity:0}
.nm-sheet-open .nm-bars i:nth-child(3){top:5.25px;transform:rotate(-45deg)}

/* ------------------------------------------------------------- mobile sheet --
   The "ink" menu. Opening paints the sheet down the screen behind a tilted
   pink stroke — the highlighter the site already uses on its key words — so
   the menu belongs to RELENTIX rather than to a menu kit. Two destinations,
   each set as large as a heading with one line on what is there; the page
   you are on is marked with the pink patch. Closing simply fades. */
.nm-sheet{
  --nm-pink:var(--ink-pink,#FFABEE);
  position:fixed;inset:0;z-index:899;
  display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  /* literal top inset rather than var(--nm-h): the sheet only has to clear the
     bar, and a hard value keeps it independent of the bar's compact state */
  padding:104px clamp(22px,7vw,48px) max(28px,env(safe-area-inset-bottom));
  font-family:var(--nm-mono);
  background:
    radial-gradient(80% 45% at 100% 0%,rgba(0,163,255,.16),transparent 70%),
    radial-gradient(70% 40% at 0% 100%,rgba(171,0,162,.16),transparent 72%),
    #020617;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--nm-ease),visibility 0s .3s;
}
.nm-sheet.open{
  opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;
  animation:nmWipe .72s var(--nm-ease) both;
}
@keyframes nmWipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -2% 0)}}

/* the stroke that does the painting: rides the wipe's leading edge, then lifts */
.nm-ink{
  position:absolute;left:-12%;right:-12%;top:0;height:14px;pointer-events:none;
  background:var(--nm-pink);
  box-shadow:0 0 28px rgba(255,171,238,.55);
  opacity:0;transform:translateY(-20px) rotate(-1.5deg);
}
.nm-sheet.open .nm-ink{animation:nmInk .72s var(--nm-ease) both}
@keyframes nmInk{
  0%{opacity:1;transform:translateY(-20px) rotate(-1.5deg)}
  82%{opacity:1}
  100%{opacity:0;transform:translateY(100svh) rotate(-1.5deg)}
}

.nm-menu{list-style:none;margin:0;padding:0;border-top:1px solid var(--nm-line)}
.nm-menu li{border-bottom:1px solid var(--nm-line)}
.nm-m{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:clamp(20px,4.6vh,30px) 0;
  color:#F8FAFC;-webkit-tap-highlight-color:transparent;
}
/* the word rises out of its own line, like the headings do */
.nm-m-mask{display:block;overflow:hidden;padding:.06em .14em .04em;margin:-.06em -.14em -.04em}
.nm-m-w{
  position:relative;display:inline-block;isolation:isolate;
  font-family:var(--nm-disp);font-weight:700;
  font-size:clamp(58px,18.5vw,96px);line-height:.86;letter-spacing:-.01em;
  text-transform:uppercase;
  transform:translateY(105%);
  transition:transform .3s var(--nm-ease),color .3s var(--nm-ease);
}
.nm-sheet.open .nm-m-w{
  transform:none;
  transition:transform .95s var(--nm-ease) calc(.26s + var(--d) * .09s),color .3s var(--nm-ease);
}
/* the patch: painted left to right behind the word, slightly tilted */
.nm-m-w::before{
  content:'';position:absolute;inset:.02em -.1em .04em;z-index:-1;
  background:var(--nm-pink);transform:rotate(-1.5deg);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--nm-ease);
}
.nm-m.on .nm-m-w{color:#020617}
.nm-sheet.open .nm-m.on .nm-m-w::before{clip-path:inset(0 0 0 0);transition-delay:calc(.75s + var(--d) * .09s)}
/* pressing a destination paints it blue on the way out */
.nm-m:not(.on):active .nm-m-w,.nm-m:not(.on):focus-visible .nm-m-w{color:#020617}
.nm-m:not(.on):active .nm-m-w::before,.nm-m:not(.on):focus-visible .nm-m-w::before{
  background:var(--nm-brand);clip-path:inset(0 0 0 0);transition-delay:0s;
}

/* the sign-off, set like the hero's line */
.nm-say{
  margin:auto 0 0;padding-top:clamp(36px,6vh,64px);padding-bottom:clamp(8px,2vh,20px);
  font-family:'EB Garamond',Georgia,serif;font-size:clamp(24px,6.6vw,32px);font-weight:500;line-height:1.15;
  color:#E2E8F0;
  opacity:0;transform:translateY(10px);
  transition:opacity .25s,transform .25s var(--nm-ease);
}
.nm-say span{color:var(--nm-pink)}
.nm-sheet.open .nm-say{opacity:1;transform:none;transition:opacity .7s var(--nm-ease) .7s,transform .9s var(--nm-ease) .7s}

/* while the sheet is open the close mark turns pink: it is the way out */
.nm-sheet-open .nm-burger{border-color:rgba(255,171,238,.55)!important}
.nm-sheet-open .nm-bars i{background:var(--ink-pink,#FFABEE)}

/* screen-reader-only helper used for the sheet's labelling */
.nm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ------------------------------------------------------------- responsive -- */
@media(max-width:860px){
  .nm{--nm-h:72px}
  .nm.compact{--nm-h:62px}
  .nm-links{display:none}
  .nm-burger{display:inline-flex}
  .nm-sheet{padding-top:96px}
  /* once the page has scrolled, a fade sits behind the bar so text passing
     underneath never reads through the mark and the CTA */
  .nm::before{
    content:'';position:absolute;left:0;right:0;top:0;height:calc(100% + 28px);z-index:-1;
    pointer-events:none;opacity:0;
    background:linear-gradient(180deg,rgba(2,6,23,.97) 0%,rgba(2,6,23,.92) 62%,rgba(2,6,23,0) 100%);
    transition:opacity .35s var(--nm-ease);
  }
  .nm.compact::before,.nm.nm-sheet-open::before{opacity:1}
}
@media(max-width:520px){
  .nm{--nm-pad:18px;--nm-mark:30px}
  .nm-logo span{display:none}
  .nm-cta{height:38px;padding:0 15px;font-size:10px;gap:9px;letter-spacing:.2em}
  .nm-burger{width:38px;height:38px}
  /* space-between has nothing useful to do once these no longer fit on one
     line; stack them instead of letting them overflow the gutter */
}
@media(max-width:400px){
  /* on the narrowest phones the CTA would otherwise eat most of the bar and
     overpower the mark, which is the one element that has to stay the anchor */
  .nm-cta{padding:0 12px;font-size:9px;letter-spacing:.14em;gap:7px}
  .nm-cta svg{width:12px;height:12px}
}

@media(prefers-reduced-motion:reduce){
  .nm,.nm *,.nm-sheet,.nm-sheet *{
    transition-duration:.01ms!important;transition-delay:0s!important;
    animation-duration:.01ms!important;animation-delay:0s!important;
  }
  .nm-ink{display:none}
}