/* ============================================================
   JMO|Partners — liquid-glass system (single source of truth)
   Loaded LAST on every page so it wins the cascade uniformly.
   Edit HERE only; never copy glass rules into page styles.
   ============================================================ */
:root {
  --glass-bg:      rgba(21,16,31,0.30);
  --glass-bg-2:    rgba(29,23,41,0.44);
  --glass-border:  rgba(255,255,255,0.12);
  --glass-blur:    22px;
  --glass-inset:   inset 0 1px 0 rgba(255,255,255,0.24), inset 0 0 0 0.5px rgba(255,255,255,0.07);
  --glass-shadow:  0 12px 32px rgba(0,0,0,0.28);
  --glass-grad:        linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(21,16,31,0.20) 42%, rgba(21,16,31,0.32) 100%);
  --glass-grad-hover:  linear-gradient(165deg, rgba(255,255,255,0.10) 0%, rgba(29,23,41,0.30) 42%, rgba(29,23,41,0.44) 100%);
  --glass-edge:        inset 0 1px 0 rgba(255,255,255,0.30), inset 1px 0 0 rgba(255,255,255,0.09), inset -1px 0 0 rgba(255,255,255,0.05), inset 0 -16px 28px -18px rgba(0,0,0,0.40);
}

/* base (no backdrop-filter support) look for inline-converted cards */
.glass-card { background: var(--surface); border: 1px solid var(--border); }


@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .quote, .service-card {
      background: var(--glass-grad);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      border-color: var(--glass-border);
      box-shadow: var(--glass-edge), var(--glass-shadow);
    }
    /* Service cards sit inside the services-grid slab — clear the slab's light
       film so the orbs reach the glass, and run the cards a touch more
       transparent so they match the free-standing surfaces. */
    .services-grid { background: transparent; box-shadow: 0 20px 60px rgba(0,0,0,0.30); }
    .service-card {
      background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(21,16,31,0.16) 42%, rgba(21,16,31,0.26) 100%);
    }
    .service-card:hover, a.service-card:hover {
      background: linear-gradient(165deg, rgba(255,255,255,0.10) 0%, rgba(29,23,41,0.24) 42%, rgba(29,23,41,0.36) 100%);
    }
    .quote:hover, .service-card:hover, a.service-card:hover { background: var(--glass-grad-hover); }
    .service-card { overflow: hidden; }
    .quote:hover { box-shadow: var(--glass-edge), 0 20px 44px rgba(0,0,0,0.34); }

    .stats-band {
      background: var(--glass-grad);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      border-color: var(--glass-border);
      box-shadow: var(--glass-edge), var(--glass-shadow);
    }
    .stats-band::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
      opacity: 0; transition: opacity 0.4s; pointer-events: none;
    }
    .stats-band:hover::after { opacity: 1; }
    .stats-band .stat { position: relative; z-index: 1; }

    .ind-chip {
      background: rgba(21,16,31,0.26);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      backdrop-filter: blur(10px) saturate(140%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    }
    .ind-chip:hover { background: rgba(var(--purple-rgb), 0.16); }

    .contact-form input, .contact-form textarea {
      background: rgba(21,16,31,0.28);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      backdrop-filter: blur(10px) saturate(140%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    }
    .contact-form input:focus, .contact-form textarea:focus {
      background: rgba(29,23,41,0.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 3px rgba(var(--purple-rgb), 0.18);
    }

    .btn-ghost {
      background: rgba(255,255,255,0.04);
      -webkit-backdrop-filter: blur(12px) saturate(150%);
      backdrop-filter: blur(12px) saturate(150%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
    }
    .btn-ghost:active { transform: translateY(0) scale(0.98); }

    .mobile-menu { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
    .offered, .about-side, .marquee-desc-panel, .glass-card, .cf-success {
      background: var(--glass-grad);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      backdrop-filter: blur(var(--glass-blur)) saturate(170%);
      border-color: var(--glass-border);
      box-shadow: var(--glass-edge), var(--glass-shadow);
    }
    .glass-card:hover, .about-side:hover { background: var(--glass-grad-hover); }
    .offered::after, .about-side::after, .marquee-desc-panel::after, .glass-card::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
      opacity: 0; transition: opacity 0.4s; pointer-events: none;
    }
    .offered:hover::after, .about-side:hover::after, .marquee-desc-panel:hover::after, .glass-card:hover::after { opacity: 1; }
    .offered > *, .about-side > *, .marquee-desc-panel > *, .glass-card > * { position: relative; z-index: 1; }
    .marquee-desc-panel { position: relative; overflow: hidden; }
    .glass-card { position: relative; overflow: hidden; }


  /* ---- subpage surfaces ---- */

  .card {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-color: var(--glass-border);
    box-shadow: var(--glass-edge);
    position: relative; overflow: hidden;
  }
  .card:hover { background: var(--glass-grad-hover); box-shadow: var(--glass-edge), var(--glass-shadow); }
  .card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .card:hover::after { opacity: 1; }
  .card > * { position: relative; z-index: 1; }

  .related-downloads {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--glass-edge);
    position: relative; overflow: hidden;
  }
  .related-downloads::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .related-downloads:hover::after { opacity: 1; }
  .related-downloads > * { position: relative; z-index: 1; }

  .related-link-service, .marquee-desc-panel {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-color: var(--glass-border);
    box-shadow: var(--glass-edge);
    position: relative; overflow: hidden;
  }
  .related-link-service:hover { background: var(--glass-grad-hover); }
  .related-link-service::after, .marquee-desc-panel::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .related-link-service:hover::after, .marquee-desc-panel:hover::after { opacity: 1; }
  .related-link-service > *, .marquee-desc-panel > * { position: relative; z-index: 1; }



  /* ---- pricing ---- */

    .pricing-card {
      background: var(--glass-grad);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      backdrop-filter: blur(18px) saturate(160%);
      border-color: var(--glass-border);
      box-shadow: var(--glass-edge), var(--glass-shadow);
      position: relative; overflow: hidden;
    }
    .pricing-card:hover { background: var(--glass-grad-hover); }
    .pricing-card::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
      opacity: 0; transition: opacity 0.4s; pointer-events: none;
    }
    .pricing-card:hover::after { opacity: 1; }
    .pricing-card > * { position: relative; z-index: 1; }
    .practice-tile, .notes-panel {
      background: var(--glass-grad);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      backdrop-filter: blur(18px) saturate(160%);
      border-color: var(--glass-border);
      box-shadow: var(--glass-edge), var(--glass-shadow);
      position: relative; overflow: hidden;
    }
    .practice-tile:hover { background: var(--glass-grad-hover); }
    .practice-tile::after, .notes-panel::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
      opacity: 0; transition: opacity 0.4s; pointer-events: none;
    }
    .practice-tile:hover::after, .notes-panel:hover::after { opacity: 1; }
    .practice-tile > *, .notes-panel > * { position: relative; z-index: 1; }


  /* ---- resources ---- */

  .resource-card {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-color: var(--glass-border);
    box-shadow: var(--glass-edge);
    position: relative; overflow: hidden;
  }
  .resource-card:hover { background: var(--glass-grad-hover); }
  .resource-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .resource-card:hover::after { opacity: 1; }
  .resource-card > * { position: relative; z-index: 1; }
  /* 404 suggestion links — material + glow (previously trapped in noscript) */
  .e404-suggestions a {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
    position: relative; overflow: hidden;
  }
  .e404-suggestions a:hover { background: var(--glass-grad-hover); }
  .e404-suggestions a::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .e404-suggestions a:hover::after { opacity: 1; }
  .e404-suggestions a > * { position: relative; z-index: 1; }

  /* ---- FAQ accordion as glass cards (faq page) ---- */
  .faq-item {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    margin: 0 0 14px;
    padding: 0 22px;
    position: relative; overflow: hidden;
    transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  }
  .faq-item:last-of-type { border-bottom: 1px solid var(--glass-border); }
  .faq-item:hover { background: var(--glass-grad-hover); }
  .faq-item[open] { background: var(--glass-grad-hover); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 28px rgba(0,0,0,0.25); }
  .faq-item::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.10), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .faq-item:hover::after { opacity: 1; }
  .faq-item > * { position: relative; z-index: 1; }

  /* ---- generic glass panel (checklists, asides) ---- */
  .glass-panel {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-edge);
    padding: 28px 32px;
    margin: 28px 0;
    position: relative; overflow: hidden;
  }
  .glass-panel > * { position: relative; z-index: 1; }

  /* ---- health-check step cards ---- */
  .hc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; }
  @media (max-width: 760px) { .hc-steps { grid-template-columns: 1fr; } }
  .hc-step {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-edge);
    padding: 24px;
    position: relative; overflow: hidden;
  }
  .hc-step:hover { background: var(--glass-grad-hover); }
  .hc-step::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
  }
  .hc-step:hover::after { opacity: 1; }
  .hc-step > * { position: relative; z-index: 1; }
  .hc-step .step-num {
    font-family: 'Onest', sans-serif; font-size: 40px; font-weight: 300;
    color: var(--purple); line-height: 1; margin-bottom: 12px; display: block;
  }
  .hc-step h3 { font-size: 17px; margin: 0 0 8px; }
  .hc-step p { font-size: 14.5px; color: var(--text-mute); margin: 0; line-height: 1.55; }

  /* ---- pull-quote asides: glass material estate-wide ---- */
  .article-body .pull-quote {
    background: var(--glass-grad);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--peach);
    border-radius: var(--radius);
    box-shadow: var(--glass-edge);
    padding: 24px 28px;
    position: relative; overflow: hidden;
  }
  .article-body .pull-quote::after {
    content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--purple-rgb), 0.12), transparent 55%);
  }
  .article-body .pull-quote:hover::after { opacity: 1; }
  .article-body .pull-quote > :not(.glass-pulse) { position: relative; z-index: 1; }
}

/* ===== press pulse — MUST stay last: the `> *` positioning rules above
   would otherwise override position:absolute and resize the card ===== */
/* press pulse (touch + click) — spawned by glass-fx.js */
.glass-pulse {
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(var(--purple-rgb), 0.30), rgba(var(--purple-rgb), 0.10) 42%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.35); opacity: 0;
  animation: glass-pulse 650ms var(--ease-out) forwards;
}
@keyframes glass-pulse {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

/* ===== reveal x glass: blurred surfaces fade IN PLACE =====
   Translating a backdrop-filtered element forces the browser to re-blur
   its backdrop every frame, which janks the scroll. Glass surfaces skip
   the rise and keep the fade; non-glass reveals are untouched and match
   the deployed site exactly. (!important beats the engine's inline style.) */
.pricing-card.reveal, .practice-tile.reveal, .hc-step.reveal,
.card.reveal, .resource-card.reveal, .glass-card.reveal,
.quote.reveal, .service-card.reveal {
  transform: none !important;
}