/*
 * Theme layer for the liquid glass variant.
 *
 * Every glass surface has a DARK CSS base; enhance.jsx then overrides the
 * backdrop-filter inline with the SVG bezel-refraction filter (url() values
 * must be inline — the CSS minifier corrupts them in stylesheets).
 */

/* ───── Dark CSS base for all glass surfaces ───── */

.glass-card,
.section-heading,
.footer-shell,
.nav-shell {
  border-color: rgba(245, 242, 234, 0.16) !important;
  background:
    linear-gradient(165deg, rgba(44, 58, 47, 0.34), rgba(14, 24, 18, 0.4)) !important;
  box-shadow: 0 20px 52px rgba(12, 33, 28, 0.22) !important;
  backdrop-filter: blur(16px) saturate(1.12) brightness(0.96) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) brightness(0.96) !important;
}

/* the site's white top-sheen and conic edge glow wash out dark glass */
.glass-card::after,
.glass-card::before {
  display: none !important;
}

.glass-card:hover {
  box-shadow: 0 24px 60px rgba(7, 18, 14, 0.32) !important;
}

/* ───── Material hierarchy ─────
   Every surface previously got the identical gradient, so the refraction
   never signified anything — the hero and a mid-page bullet list read as
   the same material. Two tiers: full richness (more of the refracted video
   shows through) reserved for the hero snapshot and the contact/decision
   moment; a denser, quieter gradient everywhere else. The refraction engine
   itself (bezel/IOR/frost) is untouched — this is a CSS-only opacity change
   on each card's own background, which paints on top of its refraction
   overlay, so it's low-risk and fully reversible. */
.glass-card:not(.glass-card--hero):not(.glass-card--proof):not(.glass-card--cta):not(.glass-card--form),
.section-heading,
.footer-shell {
  background:
    linear-gradient(165deg, rgba(44, 58, 47, 0.62), rgba(14, 24, 18, 0.7)) !important;
}

/* ───── Adaptive text on dark glass ───── */

.glass-card .glass-card__inner {
  position: relative;
  z-index: 1;
}

.glass-card :is(h1, h2, h3, h4, strong, summary, legend, dt),
.section-heading h2,
.section-heading h3 {
  color: #f5f2ea !important;
}

.glass-card :is(p, li, small, label, dd, td),
.glass-card span:not(:is(.button, .button-secondary, .nav-cta) span) {
  color: rgba(245, 242, 234, 0.82) !important;
}

.glass-card :is(.card-kicker, .eyebrow, .fact-label),
.section-kicker {
  color: #e8d4a1 !important;
}

.section-intro {
  color: rgba(245, 242, 234, 0.8) !important;
}

/* base CSS actually uses ::marker, not ::before — the previous override
   never applied and bullets stayed the light-theme teal */
.glass-card .feature-list li::marker {
  color: #d7f29b;
}

/* Links and text buttons: teal reads dead on dark glass — go lime */
.glass-card a:not(.button):not(.button-secondary) {
  color: #d7f29b;
}

/* the hero's own accent span otherwise loses to the broad span rule above
   (0,2,2 beats its 0,1,0) and washes out to the same cream as body text */
.glass-card .hero-title__line.hero-title__line--accent {
  color: var(--gold-400, #d7f29b) !important;
}

.glass-card .button-secondary {
  color: #f5f2ea;
  border-color: rgba(245, 242, 234, 0.4);
  background: rgba(245, 242, 234, 0.08);
}

/* ───── Chips, badges, stats ───── */

.glass-card .proof-badge,
.hero-signal {
  color: rgba(245, 242, 234, 0.88) !important;
  border-color: rgba(245, 242, 234, 0.24);
  background: rgba(7, 18, 14, 0.4);
}

.glass-card .proof-stat {
  border-color: rgba(245, 242, 234, 0.18);
  background: rgba(7, 18, 14, 0.32);
}

/* inner panels ship with white boxes — flip to dark glass */
.glass-card .provider-details > div,
.glass-card :is(.what-next, .detail-row, .story-item, .check-item) {
  background: rgba(7, 18, 14, 0.38) !important;
  border-color: rgba(245, 242, 234, 0.18);
}

.glass-card .provider-badge-soft {
  background: rgba(7, 18, 14, 0.45) !important;
  color: rgba(245, 242, 234, 0.85) !important;
}

/* the plain (non-soft) provider badge was missed entirely — its lime tint
   at 0.4 alpha over dark video composited to ~3.2:1 for the cream text the
   broader span rule forces onto it */
.glass-card span.provider-badge {
  background: rgba(215, 242, 155, 0.28) !important;
  border-color: rgba(215, 242, 155, 0.4) !important;
  color: #0c1b17 !important;
}

.glass-card .proof-stat strong {
  color: #d7f29b !important;
}

.glass-card a:not(.button):not(.button-secondary):not(.nav-cta) {
  color: #d7f29b !important;
}

/* ───── Forms on glass ───── */

/* keep the actual fields solid + light even on glass: a translucent dark
   input reads as less trustworthy right at the conversion moment */
.glass-card .lead-form input,
.glass-card .lead-form select,
.glass-card .lead-form textarea {
  color: #1e2530;
  border-color: rgba(7, 18, 14, 0.18);
  background: rgba(245, 242, 234, 0.94);
}

.glass-card .lead-form input::placeholder,
.glass-card .lead-form textarea::placeholder {
  color: rgba(30, 37, 48, 0.45);
}

.glass-card .lead-form fieldset {
  border-color: rgba(245, 242, 234, 0.18);
}

/* required asterisk: light-theme rust (#b55a3e) reads ~1.9:1 on dark glass */
.glass-card .lead-form label.Required::after {
  color: #ffb27a;
}

/* the shared .Response rules are translucent light-on-light tints tuned for
   the cream site (#154038 on rgba(44,138,120,.12), #6f3824 on
   rgba(255,149,105,.16)) — both composite under 1.5:1 over dark glass, so
   the conversion confirmation itself was unreadable. Near-opaque dark panel
   + the theme's own success/error hues at readable weight. */
.glass-card .lead-form .Response.is-success {
  background: rgba(7, 18, 14, 0.88) !important;
  border-color: rgba(215, 242, 155, 0.32) !important;
  color: #d7f29b !important;
}

.glass-card .lead-form .Response.is-error {
  background: rgba(7, 18, 14, 0.88) !important;
  border-color: rgba(255, 178, 122, 0.36) !important;
  color: #ffb27a !important;
}

/* the submit button stayed teal/white while every other CTA on the page is
   lime — bring it into the same button language */
.glass-card--form .lead-form input[type="submit"] {
  background: linear-gradient(135deg, #d7f29b, #cdee8f) !important;
  color: #0c1b17 !important;
  box-shadow: 0 12px 30px rgba(7, 18, 14, 0.4) !important;
}

.glass-card--form .lead-form input[type="submit"]:hover:not(:disabled) {
  background: linear-gradient(135deg, #e6f8c1, #d7f29b) !important;
  box-shadow: 0 16px 38px rgba(7, 18, 14, 0.48) !important;
}

/* ───── FAQ details cards ───── */

.glass-card details {
  border-color: rgba(245, 242, 234, 0.18);
}

.glass-card details summary:hover {
  color: #d7f29b;
}

/* teal-400 "+" icon reads ~3.0:1 on dark glass, borderline.
   NOTE: .glass-card and .faq-card are classes on the SAME <article> here,
   not nested — a descendant selector never matches; must be compound. */
.glass-card.faq-card summary::after {
  background: rgba(215, 242, 155, 0.14);
  color: #d7f29b;
}

.glass-card.faq-card details[open] summary::after {
  background: rgba(215, 242, 155, 0.24);
}

/* ───── Nav / footer text ───── */

/* the logo is a raster PNG (dark wordmark + lime dot) tuned for an opaque
   cream nav bar; give it back that light backing so it stays legible now
   the nav itself is translucent glass, without recolouring the artwork */
.nav-shell .brand-mark {
  background: rgba(245, 242, 234, 0.92);
  padding: 4px;
}

.nav-shell .brand-title {
  color: #f5f2ea;
}

.nav-shell .brand-kicker {
  color: #e8d4a1;
}

.nav-shell .nav-links a:not(.nav-cta) {
  color: rgba(245, 242, 234, 0.85);
}

.nav-shell .nav-links a:not(.nav-cta):hover {
  color: #d7f29b;
}

.nav-shell .nav-links .nav-cta {
  background: #d7f29b;
  color: #07120e;
}

.nav-shell .nav-toggle,
.nav-shell .nav-toggle__label {
  color: #f5f2ea;
}

.nav-shell .nav-toggle__icon span {
  background: #f5f2ea;
}

.footer-shell p {
  color: rgba(245, 242, 234, 0.75);
}

.footer-shell .footer-links a {
  color: #d7f29b;
}

/* Mobile nav drawer needs a solid surface when open over the page */
@media (max-width: 860px) {
  .nav-shell.is-open .nav-links {
    background: rgba(7, 18, 14, 0.92);
    backdrop-filter: blur(18px);
  }
}

/* svg engine: the drawer's 220ms height animation outruns the refraction
   pane's debounced re-sync, leaving detached glass — land them together.
   lgx-css has no overlays, so it keeps the animated drawer. */
@media (max-width: 760px) {
  html.lgx-svg body.js-ready .nav-links {
    transition: none;
  }
}

/* ───── Mobile persistent CTA ─────
   Below 760px "Book a consultation" only existed inside the hamburger
   drawer, with nothing visible while scrolling a ~7400px page. Deliberately
   NOT glass: a solid lime bar sits outside SURFACES entirely (a direct body
   child, not .glass-card/.section-heading/.footer-shell/.nav-shell), so it
   never touches the refraction engine, the overlay layer, or its z-index
   dance with the fixed nav — and converts better than another glass tile. */
.lgx-mobile-cta {
  display: none;
}

@media (max-width: 760px) {
  .lgx-mobile-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 999px;
    border: 1px solid rgba(21, 83, 74, 0.32);
    background: linear-gradient(135deg, #d7f29b, #cdee8f);
    color: #0c1b17;
    font-weight: 600;
    font-size: 0.94rem;
    box-shadow: 0 12px 30px rgba(7, 18, 14, 0.4);
  }

  .lgx-mobile-cta:active {
    transform: scale(0.98);
  }

  /* clear the fixed bar so page content (and the last section) isn't hidden under it */
  body {
    padding-bottom: 74px;
  }
}

/* ───── Hover morph: glass bends up toward the pointer ───── */

.lgx-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* body-level glass layer: overlays carry the url() refraction filters
   (Chromium ignores reference backdrop-filters on deeply nested elements) */
#lgx-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}

/* no will-change: the backdrop-filter already promotes each overlay, and a
   blanket hint would pin 30 extra compositor layers in memory */
.lgx-glass {
  pointer-events: none;
}

/* ───── css engine (non-Chromium: Firefox/Safari — url() backdrop-filters
   don't render there). Richer function-based glass: deeper frost, higher
   saturation pulling the video's colour through, and a static hairline rim
   echoing the SVG version's specular edge (NOT a cursor glow). ───── */

.lgx-css .glass-card,
.lgx-css .section-heading,
.lgx-css .footer-shell,
.lgx-css .nav-shell {
  backdrop-filter: blur(18px) saturate(1.35) brightness(0.97) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) brightness(0.97) !important;
  box-shadow:
    0 20px 52px rgba(12, 33, 28, 0.26),
    inset 0 1px 0 rgba(245, 242, 234, 0.12),
    inset 0 0 0 1px rgba(245, 242, 234, 0.04) !important;
}

/* NO cursor sheen/glow of any kind — the refraction bulge is the hover
   feedback. (A white radial here read as exactly the cursor glow the
   glass theme is supposed to kill.) */
.lgx-tilt {
  position: relative;
}

/* the pointer bend on the panels homepage.js doesn't cover eases like
   .glass-card's own 150ms transform transition; html-prefixed so it
   out-cascades homepage.css's reveal transition on specificity ties */
html.lgx-svg .section-heading,
html.lgx-svg .footer-shell,
html.lgx-css .section-heading,
html.lgx-css .footer-shell {
  transition: transform 150ms ease-out;
}