/* ==========================================================================
   OCTOPUSS-AI — shared site navigation
   --------------------------------------------------------------------------
   Single source of truth for the header. Every public page <link>s this file;
   the markup itself is pasted per page on purpose, so the nav links are real
   <a> tags in the HTML source (crawlable internal links — this is an SEO
   agency's own site, JS-injected nav would be self-defeating).

   SELF-CONTAINED BY DESIGN. index.html and the subpages declare DIFFERENT
   :root variable sets — the homepage has --text-dim/--lumen-dim/--mono/--disp,
   the subpages only have --dim and literal font stacks. So every value below
   is either a local --nav-* variable or carries a literal fallback. Nothing
   here may depend on a page-level custom property.

   Also defensive against page-level bare-element rules: services.html and the
   case studies declare a global `a{color:var(--lumen)}` + `a:hover{border-bottom}`,
   so every link rule below restates colour and border explicitly.
   ========================================================================== */

.nav,
.nav *{box-sizing:border-box}

.nav{
  /* local tokens — never collide with page :root */
  --nav-h:58px;
  --nav-text:#e8f1f5;
  /* --nav-link is the resting colour for every nav link. Deliberately brighter
     than the site's #8fa3b8 HUD grey: the bar is transparent over the WebGL
     hero, and #8fa3b8 loses contrast badly against the pale light rays.
     --nav-dim stays #8fa3b8 for the small non-interactive group headers. */
  --nav-link:#c5d5e2;
  --nav-dim:#8fa3b8;
  --nav-lum:#3ff2e0;
  --nav-lum-dim:rgba(63,242,224,.55);
  --nav-abyss:#040910;
  --nav-rule:rgba(143,163,184,.14);
  --nav-mono:'IBM Plex Mono',ui-monospace,monospace;
  --nav-disp:'Unbounded',system-ui,sans-serif;

  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(20px,4vw,44px);
  padding:0 clamp(16px,3vw,32px);
  font-family:var(--nav-mono);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}

/* transparent over the hero; earns a backdrop once the page scrolls, so links
   stay legible over the bright proof section without ever putting a solid lid
   on the WebGL scene */
.nav.is-scrolled{
  background:rgba(4,9,16,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(143,163,184,.12);
}

/* keyboard escape hatch — a fixed header adds ~8 tab stops before content */
.nav-skip{
  position:absolute;left:-9999px;top:0;
  font-family:var(--nav-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--nav-abyss);background:var(--nav-lum);
  padding:12px 18px;text-decoration:none;border-radius:2px;
}
.nav-skip:focus{left:12px;top:12px;z-index:200}

/* ---------- brand ---------- */
.nav-brand{
  flex:0 0 auto;
  font-family:var(--nav-disp);font-weight:900;font-size:17px;letter-spacing:.06em;
  color:var(--nav-text);text-decoration:none;border-bottom:0;white-space:nowrap;
  padding-block:12px;   /* D10: the brand link is a tap target — >=40px tall */
  transition:opacity .25s;
}
.nav-brand:hover{opacity:.82;border-bottom:0}
.nav-brand i{font-style:normal;color:var(--nav-lum)}

/* ---------- panel (holds everything except brand + toggle) ---------- */
.nav-panel{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,40px);
}

.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,28px)}

/* Sizing note: 12.5px with .1em tracking reads far better than the original
   11px/.18em and comes out the same total width — the tighter tracking pays
   for the larger type, so nothing reflows. Wide tracking on small all-caps is
   what made these hard to scan. */
.nav-links > a,
.nav-drop-btn{
  font-family:var(--nav-mono);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nav-link);text-decoration:none;
  background:none;border:0;border-bottom:1px solid transparent;
  padding:0;cursor:pointer;white-space:nowrap;
  transition:color .25s,border-color .25s;
}
.nav-links > a:hover,
.nav-links > a:focus-visible,
.nav-drop-btn:hover,
.nav-drop-btn:focus-visible{color:var(--nav-lum);border-bottom-color:var(--nav-lum-dim)}
/* current page: white plus a lumen underline, so it stays distinguishable now
   that the resting colour is much closer to white than it used to be */
.nav-links > a[aria-current="page"]{color:#fff;border-bottom-color:var(--nav-lum-dim)}

/* ---------- "our sites" dropdown ---------- */
.nav-drop{position:relative}
.nav-drop-btn .caret{display:inline-block;margin-left:6px;transition:transform .25s}
.nav-drop-btn[aria-expanded="true"]{color:var(--nav-lum)}
.nav-drop-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.nav-drop-panel{
  position:absolute;top:calc(100% + 18px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:262px;display:flex;flex-direction:column;
  padding:16px 20px 18px;
  background:rgba(4,9,16,.95);
  border:1px solid rgba(63,242,224,.18);
  box-shadow:0 26px 64px rgba(0,0,0,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.nav-drop-btn[aria-expanded="true"] + .nav-drop-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-drop-head{
  font-family:var(--nav-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(63,242,224,.8);margin:15px 0 5px;
}
.nav-drop-head:first-child{margin-top:0}

.nav-drop-panel a{
  font-family:var(--nav-mono);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--nav-link);text-decoration:none;border-bottom:0;
  padding:7px 0;white-space:nowrap;transition:color .2s;
}
.nav-drop-panel a:hover,
.nav-drop-panel a:focus-visible{color:var(--nav-lum);border-bottom:0}

.nav-drop-panel a.nav-drop-all{
  margin-top:12px;padding-top:13px;
  border-top:1px solid var(--nav-rule);
  color:var(--nav-lum);
}

/* ---------- contact + CTA ---------- */
.nav-right{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px)}

.nav-tel,
.nav-mail{
  font-family:var(--nav-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nav-link);text-decoration:none;border-bottom:1px solid transparent;
  white-space:nowrap;transition:color .25s,border-color .25s;
}
.nav-tel:hover,.nav-tel:focus-visible,
.nav-mail:hover,.nav-mail:focus-visible{color:var(--nav-lum);border-bottom-color:var(--nav-lum-dim)}

.nav-cta{
  font-family:var(--nav-mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nav-abyss);background:var(--nav-lum);
  padding:11px 20px;border-radius:2px;border-bottom:0;
  text-decoration:none;white-space:nowrap;
  transition:box-shadow .3s ease;
}
.nav-cta:hover,.nav-cta:focus-visible{box-shadow:0 0 32px rgba(63,242,224,.45);border-bottom:0}

/* Over the hero the bar is transparent, so link text sits on whatever the
   WebGL scene is doing — including near-white light rays. A tight dark halo
   keeps it legible there and is invisible once the solid backdrop kicks in. */
.nav:not(.is-scrolled) .nav-brand,
.nav:not(.is-scrolled) .nav-links > a,
.nav:not(.is-scrolled) .nav-drop-btn,
.nav:not(.is-scrolled) .nav-tel,
.nav:not(.is-scrolled) .nav-mail{
  text-shadow:0 1px 10px rgba(2,6,12,.92), 0 0 3px rgba(2,6,12,.8);
}

/* ---------- mobile toggle ---------- */
.nav-toggle{
  display:none;
  width:40px;height:40px;margin-right:-10px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:1.5px;background:var(--nav-text);transition:transform .3s ease,opacity .3s ease}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ==========================================================================
   MOBILE — the whole point of this change. Before it, phones had no nav and
   no phone number until the footer (index.html hid its only two corner links
   below 860px).
   ========================================================================== */
@media (max-width:900px){
  .nav{--nav-h:52px;justify-content:space-between}

  .nav-toggle{display:flex}

  .nav-panel{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    /* vertical rhythm is tuned so the whole drawer — including the Book a Call
       button — fits a 812px phone without scrolling. Tap targets stay >=48px. */
    padding:14px clamp(20px,6vw,34px) 28px;
    background:rgba(4,9,16,.97);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(143,163,184,.12);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
  }
  .nav.is-open .nav-panel{opacity:1;visibility:visible;transform:none}

  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  /* the drawer has room, so type goes up rather than staying at bar size */
  .nav-links > a{
    font-size:15px;letter-spacing:.1em;color:var(--nav-text);
    padding:14px 0;border-bottom:1px solid var(--nav-rule);
  }
  .nav-links > a[aria-current="page"]{color:var(--nav-lum);border-bottom-color:var(--nav-rule)}

  /* the sites list is always open inside the drawer — no second tap needed,
     and its group headers double as section labels */
  .nav-drop{position:static}
  .nav-drop-btn{display:none}
  .nav-drop-panel{
    position:static;transform:none;min-width:0;
    /* `inherit`, NOT `visible` — a hard `visible` here breaks the panel out of
       the closed drawer's visibility:hidden, leaving these links focusable and
       exposed to screen readers while the menu is shut. */
    opacity:1;visibility:inherit;pointer-events:auto;
    padding:6px 0 0;margin:0;
    background:none;border:0;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav-drop-head{margin:15px 0 2px;font-size:10.5px}
  .nav-drop-panel a{font-size:14px;letter-spacing:.07em;padding:10px 0;border-bottom:1px solid var(--nav-rule)}
  .nav-drop-panel a.nav-drop-all{margin-top:0;padding-top:10px;border-top:0}

  .nav-right{
    flex-direction:column;align-items:stretch;gap:0;
    margin-top:16px;
  }
  .nav-tel,.nav-mail{font-size:15px;letter-spacing:.08em;color:var(--nav-text);padding:14px 0;border-bottom:1px solid var(--nav-rule)}
  .nav-cta{margin-top:18px;padding:17px 20px;text-align:center;font-size:13.5px;letter-spacing:.12em}
}

@media (prefers-reduced-motion:reduce){
  .nav,.nav *{transition-duration:.01ms !important}
}