/* =============================================================================
   Zatra — restrained iOS-style glass FORCE2 (visible frost)
   Tokens + frost on nav panels, sticky header, key soft cards.
   Not full-page glass / neumorphism / aurora. Text stays opacity:1.
   Cache-bust: ?v=20260804glassFORCE2
   ============================================================================= */

:root{
  --glass-bg: rgba(255,255,255,0.58);
  --glass-bg-strong: rgba(255,255,255,0.70);
  --glass-bg-dark: rgba(15,15,15,0.55);
  --glass-border: rgba(255,255,255,0.62);
  --glass-border-ink: rgba(16,24,40,0.18);
  --glass-blur: 20px;
  --glass-shadow: 0 10px 36px rgba(15,23,42,0.10);
  --glass-saturate: 180%;
}

/* Shared frost recipe — !important to beat lander / gate / a11y solids */
html body .zatra-glass,
html body .topbar,
html body header.topbar,
html body .topbar.topbar,
html body .nav-menu-panel,
html body .navlinks .nav-menu-panel,
html body #primary-nav .nav-menu-panel,
html body .nav-menu.nav-mega > .nav-menu-panel{
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
}

/* --------------------------------------------------------------------------
   Sticky header — translucent frost so blur reads over page content
   -------------------------------------------------------------------------- */
html body .topbar,
html body header.topbar,
html body .topbar.topbar{
  background: var(--glass-bg-strong) !important;
  background-color: var(--glass-bg-strong) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--glass-border-ink) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
}

@media (max-width: 980px){
  html body .topbar,
  html body header.topbar,
  html body .topbar.topbar,
  html.in-wix-frame body .topbar,
  html body.in-wix-frame .topbar{
    background: var(--glass-bg-strong) !important;
    background-color: var(--glass-bg-strong) !important;
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
    border-bottom: 1px solid rgba(16,24,40,0.16) !important;
    box-shadow: var(--glass-shadow) !important;
  }
}

/* --------------------------------------------------------------------------
   Desktop mega-menu / dropdown panels
   -------------------------------------------------------------------------- */
@media (min-width: 981px){
  html body .nav-menu-panel,
  html body .navlinks .nav-menu-panel,
  html body #primary-nav .nav-menu-panel,
  html body .nav-menu.nav-mega > .nav-menu-panel,
  html body .nav-menu[open] > .nav-menu-panel{
    background: var(--glass-bg) !important;
    background-color: var(--glass-bg) !important;
    border: 1px solid var(--glass-border-ink) !important;
    border-top: 0 !important;
    box-shadow: var(--glass-shadow), 0 18px 48px rgba(7,17,31,0.12) !important;
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  }
  html body .nav-menu-panel,
  html body .nav-menu-panel *{
    opacity: 1 !important;
  }
  html body .nav-mega-link strong,
  html body .nav-mega-link small,
  html body .nav-menu-panel a,
  html body .nav-menu-panel p{
    color: inherit;
    opacity: 1 !important;
  }
}

/* Mobile open panels — same frost */
@media (max-width: 980px){
  html body .nav-menu-panel,
  html body .navlinks .nav-menu-panel,
  html body #primary-nav .nav-menu-panel,
  html body .nav-menu[open] > .nav-menu-panel{
    background: var(--glass-bg-strong) !important;
    background-color: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border-ink) !important;
    box-shadow: var(--glass-shadow) !important;
    -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
    backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  }
}

/* --------------------------------------------------------------------------
   Key soft cards — frost readable on light sections
   -------------------------------------------------------------------------- */
html body.home-page .pathway-card,
html body.home-page .sector-card,
html body.home-page .package-preview-card,
html body.home-page .insight-card,
html body .services-overview-grid .pathway-card,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-route-snap > div,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-route-snap > div,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details.zatra-accordion-card,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-related a,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-related a,
html body .faq-grid details.zatra-accordion-card,
html body .faq-grid details{
  background: var(--glass-bg-strong) !important;
  background-color: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border-ink) !important;
  border-color: var(--glass-border-ink) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: saturate(160%) blur(var(--glass-blur)) !important;
  backdrop-filter: saturate(160%) blur(var(--glass-blur)) !important;
}

html body.home-page .pathway-card,
html body.home-page .pathway-card h3,
html body.home-page .pathway-card p,
html body .services-overview-grid .pathway-card,
html body .services-overview-grid .pathway-card h3,
html body .services-overview-grid .pathway-card p,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-route-snap > div,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-route-snap > div,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-route-snap p,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-route-snap p,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details summary,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details p,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-related a,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-related a,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-related .card-title,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-related .card-title,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-related p,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-related p{
  opacity: 1 !important;
}

/* Hover: keep glass, tighten border — no inset neumorphic shadows */
html body.home-page .pathway-card:hover,
html body.home-page .sector-card:hover,
html body.home-page .insight-card:hover,
html body.home-page .package-preview-card:hover,
html body .services-overview-grid .pathway-card:hover,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-related a:hover,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-related a:hover{
  background: rgba(255,255,255,0.82) !important;
  background-color: rgba(255,255,255,0.82) !important;
  border-color: rgba(237,0,0,0.42) !important;
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(237,0,0,0.10) !important;
}

/* --------------------------------------------------------------------------
   btn-glass-light — beat lander-flagship solid white kill
   -------------------------------------------------------------------------- */
html body .btn-glass-light,
html body a.btn-glass-light,
html body a.btn.btn-glass-light,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .btn-glass-light,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) a.btn-glass-light,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) a.btn.btn-glass-light,
html body.home-page .btn-glass-light,
html body.home-page a.btn-glass-light{
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  border: 1px solid var(--glass-border-ink) !important;
  color: #101828 !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  opacity: 1 !important;
}

/* Dark / photo heroes: stronger frosted scrim so text stays ≥4.5:1 */
html body .hero.hero-editorial .btn-glass-light,
html body .hero-editorial .btn-glass-light,
html body .page-hero-fill .btn-glass-light,
html body .lf-hero .btn-glass-light,
html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-hero .btn-glass-light{
  background: rgba(255,255,255,0.78) !important;
  background-color: rgba(255,255,255,0.78) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: #101828 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)) !important;
}

/* --------------------------------------------------------------------------
   Accessibility fallbacks
   -------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce){
  html body .topbar,
  html body header.topbar,
  html body .topbar.topbar,
  html body .nav-menu-panel,
  html body .navlinks .nav-menu-panel,
  html body #primary-nav .nav-menu-panel,
  html body.home-page .pathway-card,
  html body.home-page .sector-card,
  html body.home-page .package-preview-card,
  html body.home-page .insight-card,
  html body .services-overview-grid .pathway-card,
  html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-route-snap > div,
  html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-route-snap > div,
  html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details,
  html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .faq-grid details.zatra-accordion-card,
  html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lp-related a,
  html body:is(.sector-page, .service-page, .service-lander-page, .services-page) .lf-related a,
  html body .faq-grid details,
  html body .btn-glass-light,
  html body a.btn-glass-light{
    background: #fff !important;
    background-color: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: #e7e9ee !important;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 8px 20px rgba(7,17,31,0.05) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  html body .topbar,
  html body .nav-menu-panel,
  html body.home-page .pathway-card,
  html body .services-overview-grid .pathway-card,
  html body .btn-glass-light{
    transition: none !important;
  }
}