/* ============================================================
   LHAFIX — Site-wide video background + floating glass panels
   Loaded AFTER tokens/base/components/sections so it can override
   their solid section backgrounds with translucent "glass" ones.
   Everything below is additive: remove this one <link> to fall
   back to the flat design entirely.
   ============================================================ */

html { background: #060B14; }
body { background: transparent; }

/* ---- fixed full-viewport video canvas ---- */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #060B14;
}
.site-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cap peak brightness so bright frames never wash out text sitting
     on the translucent glass panels above it */
  filter: brightness(.7) contrast(1.05) saturate(1.15);
}
.site-bg__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.site-bg.is-static .site-bg__poster { opacity: 1; }
.site-bg.is-static .site-bg__media  { visibility: hidden; }
.site-bg__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,11,20,.22) 0%, rgba(6,11,20,.32) 45%, rgba(6,11,20,.5) 100%);
}

/* ---- everything else floats above it ----
   (.nav and .nav-panel already carry position:fixed from components.css —
   do NOT touch their `position` here, it would knock them into normal
   flow and blow out the page height) */
main, .footer { position: relative; z-index: 1; }
/* .fab-stack is already position:fixed, which stacks it above the
   z-index:-2 video without needing anything here */

/* ---- page gutter: the gap between floating panels is where the
        video shows through ---- */
:root { --glass-gutter: clamp(.6rem, 2vw, 1.25rem); }

.hero, .page-header, .section, .footer {
  margin-inline: var(--glass-gutter);
  margin-block-end: var(--glass-gutter);
  border-radius: clamp(16px, 2vw, 26px);
  overflow: hidden;
}
.hero, .page-header { margin-block-start: var(--glass-gutter); }

/* hero used 100svh for a full-bleed layout; as a floating card it
   just needs to be tall and comfortable instead */
.hero { min-height: min(100svh - 2 * var(--glass-gutter), 760px); }

/* the CSS-only decorative glows/shapes are redundant now that the
   real video supplies motion + light — hide them, keep the markup
   (harmless, and easy to bring back if the video system is ever
   switched off) */
.hero__art, .page-header__glow, .cta-band__glow { display: none; }

/* ---- glass skin: EVERY section is dark glass now ----
   No more separate light/white section skin — the whole site reads
   as dark frosted glass over the video. The only opt-out is
   `.section--solid` (used once, for the contact form). */
.section, .section--dark, .hero, .page-header, .footer {
  background-color: rgba(9, 16, 30, .30) !important;
  background-image: none !important;
  border: 1px solid rgba(183, 193, 204, .16);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  color: var(--dark-text);
}
.footer { border-top: none; }

/* loose text sitting directly on the glass (not inside an opaque
   card) reads light, same recipe everywhere */
.section h1, .section h2, .section h3, .section h4,
.hero h1, .page-header h1 { color: #fff; }
.section .eyebrow { color: var(--blue-bright); }
.section h1, .section h2, .section h3, .section p, .section li, .section .eyebrow,
.hero h1, .hero p, .page-header h1, .page-header p {
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.section .s-head > p,
.section .prose p,
.section .pkg-note,
.section .pf-note,
.section .read-next__label,
.article p, .article li {
  color: var(--dark-text-muted) !important;
}
.article h2, .article h3 { color: #fff; }
.article strong, .section .prose strong { color: #fff; }
.section .pkg-note a, .section .pf-note a { color: var(--blue-bright) !important; }

/* ---- opaque "card" components: always solid white + dark ink,
        no matter which section they float inside ---- */
.card, .pkg, .vm, .usp, .post-card, .pf-card, .contact-aside,
.read-next__item, .svc-cta, .article-cta {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.card *, .pkg *, .vm *, .usp *, .post-card *, .pf-card *, .contact-aside *,
.read-next__item *, .svc-cta *, .article-cta * {
  text-shadow: none !important;
}
.card h1, .card h2, .card h3, .card h4,
.pkg h1, .pkg h2, .pkg h3, .pkg__name,
.vm h1, .vm h2, .vm h3,
.usp__body strong,
.post-card h1, .post-card h2, .post-card h3, .post-card__title,
.pf-card h1, .pf-card h2, .pf-card h3,
.read-next__item, .svc-cta strong {
  color: var(--ink) !important;
}
.pkg__desc, .vm p, .usp__body span, .post-card__excerpt, .post-card__cat,
.card p:not(.svc-cta p):not(.article-cta p) {
  color: var(--text-muted) !important;
}

/* ---- nav: frosted at all times (not just once scrolled) ---- */
.nav {
  background: rgba(6, 11, 20, .32) !important;
  border-bottom-color: rgba(183, 193, 204, .14) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.nav.is-scrolled { background: rgba(6, 11, 20, .56) !important; }

/* cta-band panel already floats its own glass card on .section--dark;
   keep it, just tone the extra glow since the video carries that now */
.cta-band__panel {
  background: linear-gradient(180deg, rgba(74,140,255,.16), rgba(74,140,255,.04)) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---- the ONE exception: the contact form section stays truly,
        solidly white — no glass, no video showing through ---- */
.section--solid {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: var(--border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--text) !important;
}
.section--solid h1, .section--solid h2, .section--solid h3, .section--solid h4 {
  color: var(--ink) !important;
  text-shadow: none !important;
}
.section--solid p, .section--solid li, .section--solid label, .section--solid .eyebrow {
  text-shadow: none !important;
}
.section--solid .eyebrow { color: var(--accent) !important; }
.section--solid .contact-aside { background: var(--surface) !important; }

@media (max-width: 640px) {
  .hero, .page-header, .section, .footer { border-radius: 18px; }
}