/* ==========================================================================
   higgs-depth.css - depth pages join THE FOUNDATION SEQUENCE world
   Loaded after styles.css + v3.css on every depth page. CSS only; the
   verified depth markup and behaviour stay untouched.
   Moves: cyanotype field becomes the void ink, the header becomes the
   Home void-glass bar sitewide, action colours stay brand.
   ========================================================================== */

:root {
  /* The v4 cyanotype field resolves to the void: every band keyed off it
     (band-cyan, band-dark, depth heroes) goes ink automatically. */
  --cyanotype: #000e11;
}

/* Logo plumbing lives here (privacy/cookies never load v3.css). The white
   header logo is the composed glyph-tight lockup (logo-white.svg): CSS
   height = symbol height, brand proportions baked in. */
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo-white { display: none; align-items: center; }
.nav__logo-white img { height: 27px !important; width: auto !important; }
.footer-logo .fl-lockup { height: 32px; width: auto; }

/* ---------- Header: the void glass bar, on every page state ---------- */
.site-header,
.site-header.is-scrolled {
  background: rgba(0, 14, 17, 0.78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(216, 236, 243, 0.08);
  box-shadow: none;
}
.site-header .nav__logo-ink { display: none !important; }
.site-header .nav__logo-white { display: inline-flex !important; }
.site-header .nav__link { color: rgba(216, 236, 243, 0.9); }
.site-header .nav__link:hover,
.site-header .nav__link.is-active { color: #fcfcfc; }
.site-header .nav__toggle span { background: #fcfcfc; }
.site-header .nav__cta,
.v3-ink-hero .site-header:not(.is-scrolled) .nav__cta {
  background: var(--bh-blue);
  color: #fcfcfc;
}
.site-header .nav__cta:hover,
.v3-ink-hero .site-header:not(.is-scrolled) .nav__cta:hover {
  background: #2a89ff;
  color: #fcfcfc;
}

/* Mobile open panel joins the void */
@media (max-width: 900px) {
  .site-header:has(.nav__links.is-open) {
    background: rgba(0, 14, 17, 0.97);
    border-bottom-color: rgba(216, 236, 243, 0.08);
  }
  .site-header:has(.nav__links.is-open) .nav__toggle span { background: #fcfcfc; }
  .site-header:has(.nav__links.is-open) .nav__logo-ink { display: none !important; }
  .site-header:has(.nav__links.is-open) .nav__logo-white { display: inline-flex !important; }
  .nav__links {
    background: rgba(0, 14, 17, 0.97);
  }
  .nav__links .nav__link {
    color: rgba(216, 236, 243, 0.9);
    border-bottom-color: rgba(216, 236, 243, 0.1);
  }
}

/* ---------- Depth atmosphere: fine drafting grid on the ink bands ---------- */
.band-cyan,
.band-dark {
  background-image:
    repeating-linear-gradient(90deg, rgba(216, 236, 243, 0.045) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(216, 236, 243, 0.03) 0 1px, transparent 1px 120px);
}