/* ─────────────────────────────────────────────────────────────────────
   Meridian15 nav polish layer.

   Sourced from the canonical homepage (index.html lines 1517-1585 and
   2071-2095, which were shipped via PR #3). Extracted to a shared
   stylesheet so every page gets the same nav hover + scrolled state
   without duplicating ~80 lines of inline CSS.

   What this file styles:
     • Animated red underline draw on nav-link hover
     • Color brighten on hover
     • Subtle brand wordmark hover
     • Glass-blur "scrolled" state past the hero, with bumped link contrast

   This file is paired with /js/m15-nav-scrolled.js, which toggles the
   .m15-nav-scrolled class on .navbar based on scrollY.
   ───────────────────────────────────────────────────────────────────── */

/* Universal glass-blur on every nav from page load.
   Previously we had a scroll-trigger pattern (transparent over hero,
   glass past hero) but it broke legibility on light-hero pages where
   white nav links sat invisibly on cream backgrounds. Always-glass
   keeps the nav legible on any background. !important beats both the
   inline polish on canonical pages and the Astro component CSS. */
.navbar,
.m15-nav,
.navbar.m15-nav-scrolled,
.m15-nav.m15-nav-scrolled,
.navbar:not(.m15-nav-scrolled),
.m15-nav:not(.m15-nav-scrolled) {
  /* Solid dark nav. backdrop-filter is intentionally OFF.
     Reason: Chrome browser-chrome overlays (extension tooltips like
     1Password / SimilarWeb, tab hover popovers) trigger compositor
     repaints that backdrop-filter samples mid-shift, producing a
     visible vertical band through the nav. We tried every
     stabilization workaround (high opacity, GPU promotion, contain,
     no soft edges); none of them prevent the artifact, because the
     root cause is backdrop-filter sampling a page that's repainting
     under it. Solid background eliminates the artifact entirely.
     Light hero pages still read the nav fine because of the inset
     top highlight + the dark fill against any background. */
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
  isolation: auto !important;
  will-change: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  contain: none !important;
}

/* Nav link hover — animated red underline draw */
.nav-menu-2 .nav-link,
.nav-menu-2 .nav-link-2 {
  position: relative;
  overflow: hidden;
  padding-bottom: 4px !important;
  transition: color 0.22s ease !important;
}
.nav-menu-2 .nav-link::before,
.nav-menu-2 .nav-link-2::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 1.5px;
  background: #FF1500;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-menu-2 .nav-link:hover::before,
.nav-menu-2 .nav-link-2:hover::before {
  transform: scaleX(1);
}
.nav-menu-2 .nav-link:hover,
.nav-menu-2 .nav-link-2:hover {
  color: #fff !important;
}

/* Bump link contrast through the glass */
.navbar.m15-nav-scrolled .nav-link,
.navbar.m15-nav-scrolled .nav-link-2 {
  color: rgba(255, 255, 255, 0.78) !important;
}
.navbar.m15-nav-scrolled .nav-link:hover,
.navbar.m15-nav-scrolled .nav-link-2:hover {
  color: #fff !important;
}

/* Brand wordmark hover, subtle */
.navbar .brand {
  position: relative;
  transition: opacity 0.3s ease;
}
.navbar .brand:hover {
  opacity: 0.92;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .nav-menu-2 .nav-link,
  .nav-menu-2 .nav-link-2,
  .nav-menu-2 .nav-link::before,
  .nav-menu-2 .nav-link-2::before {
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Editorial nav-link treatment, sourced from index.html lines 1964-2065
   (PR #3 polish). All-caps JetBrains Mono 10px / 0.26em letter-spacing.
   Propagated here so every page's nav matches the homepage's hero nav.

   Targets BOTH nav systems on the site:
     • Legacy Webflow `.navbar .nav-link` / `.nav-link-2` (74 pages)
     • Astro component `.m15-nav .m15-nav-link` (7 pages)
   ───────────────────────────────────────────────────────────────────── */
/* Base typography — JBM uppercase 0.04em (sizing comes from the unified
   block lower down so default + hover + active all match). */
.navbar .nav-link,
.navbar .nav-link-2,
.m15-nav .m15-nav-link {
  position: relative !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link-2:hover,
.m15-nav .m15-nav-link:hover {
  color: #fff !important;
  text-decoration: none !important;
}
/* Active state — white text only; the per-page inline underline stays. */
.navbar .nav-link[data-nav-active],
.navbar .nav-link-2[data-nav-active],
.m15-nav .m15-nav-link.is-active {
  color: #fff !important;
}

/* Editorial nav CTA — square block (2px brand radius), mono caps to match. */
.nav-cta-btn,
.navbar .nav-cta-btn,
.nav-menu-2 .nav-cta-btn,
.m15-nav .m15-nav-cta {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  padding: 12px 22px !important;
  height: 44px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.26em !important;
  transition: background 200ms ease,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav-cta-btn:active {
  transform: translateY(0) scale(0.97) !important;
  transition-duration: 80ms !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Homepage canonical nav-menu sizing — extracted from index.html
   inline polish layer so every page matches the homepage's nav exactly.
   The earlier editorial 10px / 0.26em rule was right intention but the
   homepage actually ships 13px / 0.04em / 14-18px padding / 44px height.
   This block overrides the editorial sizes above so the homepage and
   every other page render with identical nav metrics.
   ───────────────────────────────────────────────────────────────────── */
/* Sizing + base color — applies to every state (default, hover, active)
   so active and hovered links don't fall back to whatever earlier rule
   set a different size. Aggressive selectors beat Webflow's
   `.nav-link.w--current { color: #fff }` and any Astro scoped rule. */
.nav-menu-2 .nav-link,
.nav-menu-2 .nav-link-2,
.navbar .nav-link,
.navbar .nav-link-2,
.navbar .nav-link.w--current,
.navbar .nav-link-2.w--current,
.navbar .nav-link[data-nav-active],
.navbar .nav-link-2[data-nav-active],
.m15-nav .m15-nav-link,
.m15-nav .m15-nav-link.is-active {
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 44px !important;
  letter-spacing: 0.04em !important;
}
/* Default color — dim 0.78 alpha. */
.nav-menu-2 .nav-link,
.nav-menu-2 .nav-link-2,
.navbar .nav-link,
.navbar .nav-link-2,
.m15-nav .m15-nav-link {
  color: rgba(255, 255, 255, 0.78) !important;
}
/* Hover + active state — full white. */
.nav-menu-2 .nav-link:hover,
.nav-menu-2 .nav-link-2:hover,
.navbar .nav-link:hover,
.navbar .nav-link-2:hover,
.m15-nav .m15-nav-link:hover,
.navbar .nav-link[data-nav-active],
.navbar .nav-link-2[data-nav-active],
.navbar .nav-link.w--current,
.navbar .nav-link-2.w--current,
.m15-nav .m15-nav-link.is-active {
  color: #fff !important;
}
.nav-menu-2 .nav-cta-btn,
.m15-nav .m15-nav-cta {
  height: 44px !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Homepage canonical footer-link sizing — extracted from index.html
   so every page's footer column links render at identical 13px /
   55% alpha instead of the Webflow-default 14px / variable alpha.
   ───────────────────────────────────────────────────────────────────── */
.hs-footer-link {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 10px !important;
  display: block !important;
  transition: color 0.22s ease !important;
}
.hs-footer-link:hover { color: #fff !important; }
.hs-footer-tagline {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 18px !important;
  margin-bottom: 22px !important;
  max-width: 280px;
}

/* ─────────────────────────────────────────────────────────────────────
   Hero-section top-corner indicators ([ 001 · X ] chapter card, brand
   coords on the right) collide with the fixed 72px nav (.m15-nav-brand
   sits at top:10–62px). Astro markup pins these at top:40px (md
   breakpoint Tailwind utility), which puts them inside the brand's
   bounding box.

   Only target the hero section ([data-m15-section="opening"]) — using
   :first-of-type would match every section because Astro wraps each
   section in its own <astro-island>, making each one its parent's
   first-of-type.
   ───────────────────────────────────────────────────────────────────── */
section[data-m15-section="opening"] p.absolute.font-mono.uppercase[class*="top-"] {
  top: clamp(82px, 10vh, 110px) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   UNIVERSAL eyebrow / kicker / mono-label typography.
   Any element whose class name contains 'eyebrow', 'kicker', or ends in
   '-tag' / '-pill' / '-chip' / '-badge' / '-step-num' / '-meta' renders
   in JetBrains Mono. Catches all current variants (hs-*, br-*, sd-*,
   pa-*, po-*, pr-*, im-*, ab-*, cs-*, m15-*, ch-*) and any future ones.

   Display-copy exceptions stay Montserrat: anything with heading,
   title, headline, hero-title in the class name.

   font-family only — sizes / colors / spacing left to per-component
   rules so mockup labels (e.g. .pv-hero-eyebrow at 4.5px) keep their
   intended sizing.
   ───────────────────────────────────────────────────────────────────── */
[class*="eyebrow"]:not([class*="heading"]):not([class*="headline"]):not([class*="title"]),
[class*="kicker"],
[class$="-tag"],
[class*="-tag "],
[class$="-pill"],
[class*="-pill "],
[class$="-chip"],
[class*="-chip "],
[class$="-badge"],
[class*="-badge "],
[class*="-step-num"],
[class*="-meta"]:not([class*="heading"]):not([class*="title"]) {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
}

/* Tabular numerals on every JBM-rendered element — stats, counters,
   metric values, percentages, time displays, footer copy years.
   Keeps numbers vertically aligned in columns instead of proportional. */
[class*="stat-num"],
[class*="metric"],
[class*="counter"],
[class*="-num"],
[class*="-count"],
[class*="-pct"],
[class*="-percent"],
[class*="-tc"],
[class*="-time"],
[class*="-date"],
[class*="-coord"],
[class*="-coords"],
.hs-footer-copy,
[class*="cta-btn"],
[class*="hero-cta"],
.nav-cta-btn,
.m15-nav-cta {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv11" 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   UNIVERSAL CTA-button typography — pattern-based, not enumerated.

   Targets every anchor/button whose class name contains 'cta-btn',
   'hero-cta', '-cta', 'cta-link', 'submit-btn', 'close-cta', 'close-btn',
   'sticky-cta', 'local-cta', 'cta-tile-arrow' as a word fragment.
   Plus the bare m15-btn / m15-btn-outline / m15-nav-cta / m15-drawer-cta
   tokens and any input[type="submit"].

   Exclusions: anything matching cta-body / cta-text / cta-watermark /
   cta-heading / cta-eyebrow / cta-title (display copy, not buttons).

   Wherever we add a new CTA in the future, this rule covers it without
   needing to be touched. font-family JBM with !important so it beats
   inline `style="font-family:..."` and Webflow base rules.
   ───────────────────────────────────────────────────────────────────── */
a[class*="cta-btn"],
a[class*="hero-cta"],
a[class*="cta-link"],
a[class*="submit-btn"],
a[class*="close-btn"],
a[class*="close-cta"],
a[class*="sticky-cta"],
a[class*="local-cta"],
a[class*="cta-tile-arrow"],
a.nav-cta-btn,
a.m15-btn,
a.m15-btn-outline,
a.m15-nav-cta,
a.m15-drawer-cta,
button[class*="cta-btn"],
button[class*="hero-cta"],
button[class*="submit-btn"],
button[class*="close-btn"],
button.m15-btn,
button.m15-btn-outline,
input[type="submit"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* But NOT if the class also indicates display copy. */
a[class*="cta-body"],
a[class*="cta-text"],
a[class*="cta-watermark"],
a[class*="cta-heading"],
a[class*="cta-eyebrow"],
a[class*="cta-title"],
a[class*="cta-headline"] {
  font-family: 'Montserrat', sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Cursor-tracking spotlight on every button site-wide.
   Sourced from index.html lines 2018-2057 (the homepage nav CTA effect).
   The white radial gradient on hover follows the cursor position via
   --cmx / --cmy custom properties, set by /js/m15-btn-spotlight.js.

   Targets every CTA / button selector across the site:
     • Legacy Webflow CTAs (.nav-cta-btn, .hs-cta-btn, .pf-cta-btn)
     • Per-service hero/section CTAs (.br-*, .pa-*, .po-*, .pr-*, .im-*, .sd-*)
     • Astro component CTAs (.m15-nav-cta, .m15-drawer-cta, .services-hero-cta)
     • Generic m15-btn / m15-btn-outline tokens
     • Form submits (.contact-submit-btn)
     • FAQ + close buttons (.cgy-faq-q-btn, .v5-close-cta, .audit-close-cta, etc)
   ───────────────────────────────────────────────────────────────────── */
.nav-cta-btn,
.m15-nav-cta,
.m15-drawer-cta,
.hs-cta-btn,
.pf-cta-btn,
.ab-cta-btn,
.m15-btn, .m15-btn-outline,
.sd-cta-btn, .sd-hero-cta,
.br-cta-btn, .br-hero-cta,
.pa-cta-btn, .pa-hero-cta,
.po-cta-btn, .po-hero-cta,
.pr-cta-btn, .pr-hero-cta,
.im-cta-btn, .im-hero-cta,
.cgy-hero-cta,
.v5-hero-cta, .v5-recpt-cta-link,
.services-hero-cta,
.contact-submit-btn,
.yc-wd-local-cta,
.m15-cta-tile-arrow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background 200ms ease,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms ease;
}
/* The spotlight overlay — transparent until hover, then a soft white
   radial that tracks the cursor. Drops to 0 on mouseleave. */
.nav-cta-btn::after,
.m15-nav-cta::after,
.m15-drawer-cta::after,
.hs-cta-btn::after,
.pf-cta-btn::after,
.ab-cta-btn::after,
.m15-btn::after, .m15-btn-outline::after,
.sd-cta-btn::after, .sd-hero-cta::after,
.br-cta-btn::after, .br-hero-cta::after,
.pa-cta-btn::after, .pa-hero-cta::after,
.po-cta-btn::after, .po-hero-cta::after,
.pr-cta-btn::after, .pr-hero-cta::after,
.im-cta-btn::after, .im-hero-cta::after,
.cgy-hero-cta::after,
.v5-hero-cta::after, .v5-recpt-cta-link::after,
.services-hero-cta::after,
.contact-submit-btn::after,
.yc-wd-local-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    140px circle at var(--cmx, 50%) var(--cmy, 50%),
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.14) 32%,
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.nav-cta-btn:hover::after,
.m15-nav-cta:hover::after,
.m15-drawer-cta:hover::after,
.hs-cta-btn:hover::after,
.pf-cta-btn:hover::after,
.ab-cta-btn:hover::after,
.m15-btn:hover::after, .m15-btn-outline:hover::after,
.sd-cta-btn:hover::after, .sd-hero-cta:hover::after,
.br-cta-btn:hover::after, .br-hero-cta:hover::after,
.pa-cta-btn:hover::after, .pa-hero-cta:hover::after,
.po-cta-btn:hover::after, .po-hero-cta:hover::after,
.pr-cta-btn:hover::after, .pr-hero-cta:hover::after,
.im-cta-btn:hover::after, .im-hero-cta:hover::after,
.cgy-hero-cta:hover::after,
.v5-hero-cta:hover::after, .v5-recpt-cta-link:hover::after,
.services-hero-cta:hover::after,
.contact-submit-btn:hover::after,
.yc-wd-local-cta:hover::after { opacity: 1; }
/* Keep button content above the spotlight overlay. */
.nav-cta-btn > *,
.m15-nav-cta > *,
.m15-drawer-cta > *,
.hs-cta-btn > *,
.pf-cta-btn > *,
.ab-cta-btn > *,
.m15-btn > *, .m15-btn-outline > *,
.sd-cta-btn > *, .sd-hero-cta > *,
.br-cta-btn > *, .br-hero-cta > *,
.pa-cta-btn > *, .pa-hero-cta > *,
.po-cta-btn > *, .po-hero-cta > *,
.pr-cta-btn > *, .pr-hero-cta > *,
.im-cta-btn > *, .im-hero-cta > *,
.cgy-hero-cta > *,
.v5-hero-cta > *, .v5-recpt-cta-link > *,
.services-hero-cta > *,
.contact-submit-btn > *,
.yc-wd-local-cta > * { position: relative; z-index: 1; }
/* Subtle press-back on active. */
.nav-cta-btn:active,
.m15-nav-cta:active,
.m15-drawer-cta:active,
.hs-cta-btn:active,
.pf-cta-btn:active,
.ab-cta-btn:active,
.m15-btn:active, .m15-btn-outline:active,
.sd-cta-btn:active, .sd-hero-cta:active,
.br-cta-btn:active, .br-hero-cta:active,
.pa-cta-btn:active, .pa-hero-cta:active,
.po-cta-btn:active, .po-hero-cta:active,
.pr-cta-btn:active, .pr-hero-cta:active,
.im-cta-btn:active, .im-hero-cta:active,
.cgy-hero-cta:active,
.v5-hero-cta:active, .v5-recpt-cta-link:active,
.services-hero-cta:active,
.contact-submit-btn:active,
.yc-wd-local-cta:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta-btn::after,
  .m15-nav-cta::after,
  .m15-drawer-cta::after,
  .hs-cta-btn::after,
  .pf-cta-btn::after,
  .ab-cta-btn::after,
  .m15-btn::after, .m15-btn-outline::after,
  .sd-cta-btn::after, .sd-hero-cta::after,
  .br-cta-btn::after, .br-hero-cta::after,
  .pa-cta-btn::after, .pa-hero-cta::after,
  .po-cta-btn::after, .po-hero-cta::after,
  .pr-cta-btn::after, .pr-hero-cta::after,
  .im-cta-btn::after, .im-hero-cta::after,
  .cgy-hero-cta::after,
  .v5-hero-cta::after, .v5-recpt-cta-link::after,
  .services-hero-cta::after,
  .contact-submit-btn::after,
  .yc-wd-local-cta::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Shared footer column-title treatment. Lives here (not in m15-brand.css)
   so Astro pages — which don't load m15-brand.css — pick it up via the
   nav-polish stylesheet they already load.
   ───────────────────────────────────────────────────────────────────── */
.hs-footer-col-title {
  color: #FF1500 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
  margin-bottom: 22px !important;
}