/* ==========================================================================
   Castle — Spatial Navigation Layer
   Upgrades the EXISTING #site-header / .nav-inner into a floating glass rail
   using the site's own palette (bone / emerald / terracotta). Same spatial
   concept as the dark showcase: translucent container, gradient ring border,
   pointer-tracked sheen, layered shadow, sliding indicator, compress-on-scroll.

   Everything is gated behind html.nav-sp so it can be disabled at runtime and
   the original flat header returns untouched.
   ========================================================================== */

:root {
  --nsp-green: 31, 111, 74;      /* #1F6F4A */
  --nsp-green-lt: 46, 155, 106;  /* #2E9B6A */
  --nsp-terra: 194, 102, 59;     /* #C2663B */
  --nsp-bone: 251, 248, 241;     /* #FBF8F1 */
  --nsp-ink: 30, 42, 36;         /* #1E2A24 */
  --nsp-ease: cubic-bezier(.22, 1, .36, 1);
  --nsp-spring: cubic-bezier(.34, 1.42, .64, 1);
  --nsp-radius: 18px;
}

/* --------------------------------------------------------------------------
   1. Header becomes a transparent rail; the nav itself becomes the glass pill
   -------------------------------------------------------------------------- */
html.nav-sp #site-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding-top: 12px;
  transition: padding-top .45s var(--nsp-ease);
}
html.nav-sp #site-header.nav-scrolled { padding-top: 6px; }

/* No content offset. The header is position:fixed, so content starts at y=0 and
   the glass pill floats over the hero — that's the whole point of the effect.
   Inner pages already render their hero band before <main>, so they need nothing. */
html.nav-sp .scroll-progress { top: 0; z-index: 60; }

html.nav-sp .nav-inner {
  position: relative;
  width: calc(100% - 1.75rem);
  border-radius: var(--nsp-radius);
  padding-left: 16px;
  padding-right: 12px;
  isolation: isolate;

  /* Slightly more opaque than a pure glass pane: the pill now sits directly on the
     hero photograph, so the dark nav text needs a guaranteed light backing. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(var(--nsp-bone), .68) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(var(--nsp-ink), .05),
    0 2px 6px -2px rgba(var(--nsp-ink), .10),
    0 18px 38px -22px rgba(var(--nsp-ink), .34),
    0 26px 50px -30px rgba(var(--nsp-green), .42);

  transition:
    height .45s var(--nsp-ease),
    background .45s var(--nsp-ease),
    box-shadow .45s var(--nsp-ease),
    border-radius .45s var(--nsp-ease);
}

/* Scrolled: compress, solidify for legibility, ring reaches full strength */
html.nav-sp #site-header.nav-scrolled .nav-inner {
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(var(--nsp-bone), .90) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(var(--nsp-ink), .06),
    0 2px 8px -2px rgba(var(--nsp-ink), .12),
    0 22px 46px -22px rgba(var(--nsp-ink), .40),
    0 30px 58px -32px rgba(var(--nsp-green), .50);
}

/* 1px gradient ring — emerald → white → terracotta (mask-composite) */
html.nav-sp .nav-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
    rgba(var(--nsp-green), .48) 0%,
    rgba(var(--nsp-green-lt), .24) 28%,
    rgba(255,255,255,.85) 52%,
    rgba(var(--nsp-terra), .42) 80%,
    rgba(var(--nsp-green), .32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .78;
  pointer-events: none;
  z-index: 2;
  transition: opacity .45s var(--nsp-ease);
}
html.nav-sp #site-header.nav-scrolled .nav-inner::before { opacity: 1; }

/* Pointer-tracked specular sheen — warm white with a faint emerald core */
html.nav-sp .nav-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--nsp-mx, 50%) var(--nsp-my, 50%),
    rgba(255,255,255,.70) 0%,
    rgba(var(--nsp-green-lt), .10) 42%,
    transparent 66%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .5s var(--nsp-ease);
}
html.nav-sp .nav-inner:hover::after { opacity: 1; }

/* Keep real content above the sheen */
html.nav-sp .nav-inner > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   2. Sliding indicator behind the desktop links
   -------------------------------------------------------------------------- */
html.nav-sp .nav-rail { position: relative; }

html.nav-sp #nav-sp-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  margin-top: -17px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(var(--nsp-green), .15), rgba(var(--nsp-green), .06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 1px rgba(var(--nsp-green), .17),
    0 8px 18px -10px rgba(var(--nsp-green), .55);
  width: var(--nsp-iw, 0px);
  transform: translate3d(var(--nsp-ix, 0), 0, 0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform .44s var(--nsp-ease),
    width .44s var(--nsp-ease),
    opacity .28s var(--nsp-ease);
}
html.nav-sp .nav-rail.is-tracking #nav-sp-indicator { opacity: 1; }

/* Links sit above the pill, lift 1px on hover */
html.nav-sp .nav-rail .nav-link {
  position: relative;
  z-index: 1;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 11px;
  transition: color .3s var(--nsp-ease), transform .4s var(--nsp-spring);
}
html.nav-sp .nav-rail .nav-link:hover { transform: translateY(-1px); }

/* Underline is reserved for the ACTIVE item — the pill carries hover */
html.nav-sp .nav-rail .nav-link:hover::after,
html.nav-sp .nav-rail .nav-link:focus-visible::after { transform: scaleX(0); }
html.nav-sp .nav-rail .nav-link.active::after { transform: scaleX(1); }

/* Lit dot on the active item (matches the showcase) */
html.nav-sp .nav-rail .nav-link.active::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: rgb(var(--nsp-green-lt));
  box-shadow: 0 0 8px 1px rgba(var(--nsp-green-lt), .85);
}

/* --------------------------------------------------------------------------
   3. Mega-dropdown re-seated under the floating pill
   -------------------------------------------------------------------------- */
html.nav-sp #services-dropdown {
  top: calc(100% + 10px);
  left: 0; right: 0;
  border-top: 0 !important;
  border-radius: var(--nsp-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(var(--nsp-bone), .93)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(var(--nsp-green), .12),
    0 30px 60px -26px rgba(var(--nsp-ink), .40),
    0 40px 70px -40px rgba(var(--nsp-green), .45) !important;
  overflow: hidden;
}
/* Invisible bridge so the 10px gap doesn't close the menu on hover-out */
html.nav-sp #services-dropdown::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

/* --------------------------------------------------------------------------
   4. Mobile: burger gets a glass frame, sheet becomes a floating glass card
   -------------------------------------------------------------------------- */
html.nav-sp .nav-burger {
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(var(--nsp-green), .14), inset 0 1px 0 rgba(255,255,255,.9);
  transition: background .3s var(--nsp-ease), box-shadow .3s var(--nsp-ease), transform .35s var(--nsp-spring);
}
html.nav-sp .nav-burger:hover {
  background: rgba(255,255,255,.85);
  box-shadow: inset 0 0 0 1px rgba(var(--nsp-green), .3), 0 6px 14px -8px rgba(var(--nsp-green), .5);
}
html.nav-sp .nav-burger:active { transform: scale(.94); }

html.nav-sp #nav-mobile {
  position: absolute;
  left: .875rem;
  right: .875rem;
  top: calc(100% + 8px);
  border-top: 0 !important;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(var(--nsp-bone), .92)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(var(--nsp-green), .12),
    0 28px 56px -24px rgba(var(--nsp-ink), .42),
    0 36px 66px -38px rgba(var(--nsp-green), .45);
}

/* Link cascade on open */
html.nav-sp #nav-mobile > ul > li {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .38s var(--nsp-ease), transform .46s var(--nsp-ease);
}
html.nav-sp #nav-mobile.open > ul > li { opacity: 1; transform: none; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(1) { transition-delay: .05s; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(2) { transition-delay: .09s; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(3) { transition-delay: .13s; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(4) { transition-delay: .17s; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(5) { transition-delay: .21s; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(6) { transition-delay: .25s; }
html.nav-sp #nav-mobile.open > ul > li:nth-child(7) { transition-delay: .29s; }

/* --------------------------------------------------------------------------
   5. Status pill + logo sit better on glass
   -------------------------------------------------------------------------- */
html.nav-sp .nav-status {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   5b. Mobile fit
   The pill's side insets + inner padding cost ~44px of row width, and the
   original row was already ~3px over at 390px. Tighten the insets and retire
   the "Open today" chip below md (it's repeated in the hero and footer), so
   logo / Call / burger always sit inside the glass.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  html.nav-sp .nav-inner {
    width: calc(100% - 1.25rem);
    padding-left: 12px;
    padding-right: 10px;
    border-radius: 16px;
  }
  html.nav-sp .nav-status { display: none !important; }
  html.nav-sp #nav-mobile { left: .625rem; right: .625rem; }
}

/* --------------------------------------------------------------------------
   6. Graceful degradation
   -------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.nav-sp .nav-inner,
  html.nav-sp #nav-mobile,
  html.nav-sp #services-dropdown { background: rgba(var(--nsp-bone), .98) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html.nav-sp .nav-inner,
  html.nav-sp #nav-mobile,
  html.nav-sp #services-dropdown {
    background: rgba(var(--nsp-bone), .99) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (hover: none), (pointer: coarse) {
  html.nav-sp .nav-inner::after { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.nav-sp #nav-sp-indicator,
  html.nav-sp .nav-rail .nav-link,
  html.nav-sp #nav-mobile > ul > li { transition-duration: .001ms !important; }
}
@media print {
  html.nav-sp .nav-inner { box-shadow: none !important; background: #fff !important; }
  html.nav-sp .nav-inner::before, html.nav-sp .nav-inner::after { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. Aurora wash behind the rail
   On a bone page a floating glass pill has nothing to refract, so it reads as a
   flat bar. This paints a soft brand-tinted field in the top band (behind all
   content, above the body background) — the same job the orbs do on dark UI.
   -------------------------------------------------------------------------- */
html.nav-sp #nav-sp-wash {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 130% at 14% -34%, rgba(var(--nsp-green), .20), transparent 62%),
    radial-gradient(48% 120% at 86% -42%, rgba(var(--nsp-terra), .17), transparent 64%),
    radial-gradient(40% 100% at 52% -60%, rgba(var(--nsp-green-lt), .14), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(var(--nsp-bone), 0));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
/* Hairline grid inside the wash — reads as engineered, not decorative */
html.nav-sp #nav-sp-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--nsp-green), .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--nsp-green), .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 0%, transparent 74%);
          mask-image: radial-gradient(100% 80% at 50% 0%, #000 0%, transparent 74%);
}
/* At phone width the 56px grid reads as visible boxes, not texture — shrink and
   fade it so it stays a hint. */
@media (max-width: 1023px) {
  html.nav-sp #nav-sp-wash { height: 170px; }
  html.nav-sp #nav-sp-wash::after {
    background-image:
      linear-gradient(to right, rgba(var(--nsp-green), .035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(var(--nsp-green), .035) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}
@media print { html.nav-sp #nav-sp-wash { display: none !important; } }

/* Homepage hero is <main>'s own first section, and <main> carries its own top
   padding — which left a bone strip above the floating pill. Zero it so the hero
   runs edge-to-edge under the glass. Scoped with :has() so pages whose first
   block is light content keep their breathing room.
   The .hero-mesh fallback covers browsers without :has(). */
html.nav-sp .nav-sp-flush { padding-top: 0 !important; margin-top: 0 !important; }
html.nav-sp main:has(> .hero-mesh:first-child) { padding-top: 0 !important; }
html.nav-sp main > .hero-mesh:first-child,
html.nav-sp section > .hero-grain:first-child { margin-top: 0; }