/* Dark glass theme. Loads after site.css on every page (body class theme-glass) and only overrides its look.
   Hero: color video. Portfolio and FAQ: black and white video. Pricing and About: off-white.
   Free preview: spice gradient. Tiles and see-through buttons use the client dashboard's glass. */
.theme-glass {
  /* Exact glass values from the client dashboard (.glass in its styles.css) */
  --g-glass: rgba(15, 13, 13, .84);
  --g-border: rgba(255, 255, 255, .1);
  --g-blur: blur(18px);
  --g-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -24px rgba(0, 0, 0, .6);
  --g-radius: 18px;
  --g-control-border: rgba(255, 255, 255, .42);
  --g-accent: #f28c38;
  --g-text: #f5f3f1;
  --g-text-2: #e2dcd6;   /* body copy on the glass */
  --g-text-3: #bdb5af;   /* small print on the glass */
}

/* Shared glass tiles */
.theme-glass .slide,
.theme-glass .cta-steps li,
.theme-glass .faq-item,
.theme-glass .plan,
.theme-glass .values li,
.theme-glass .fm-card {
  background: var(--g-glass);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow);
  color: var(--g-text);
}
.theme-glass .plan,
.theme-glass .values li,
.theme-glass .fm-card,
.theme-glass .cta-steps li { transition: transform .2s ease, border-color .2s ease; }
.theme-glass .plan:hover,
.theme-glass .values li:hover,
.theme-glass .fm-card:hover,
.theme-glass .cta-steps li:hover { transform: translateY(-2px); border-color: rgba(242, 140, 56, .55); }

/* Glass buttons: every button that used to be see-through */
.theme-glass .btn-ghost,
.theme-glass .btn-ghost-dark,
.theme-glass .plan .btn-outline,
.theme-glass .work-link,
.theme-glass .round-btn {
  background: var(--g-glass);
  border: 1px solid var(--g-control-border);
  color: var(--g-text);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow);
}
.theme-glass .btn-ghost:hover,
.theme-glass .btn-ghost-dark:hover,
.theme-glass .plan .btn-outline:hover,
.theme-glass .work-link:hover,
.theme-glass .round-btn:hover { background: var(--g-glass); color: #fff; border-color: var(--g-accent); }

/* On the off-white sections there's nothing behind the glass to see, so each tile carries the hero
   video's swirl inside it, under the same 84% dark layer. Nothing spills onto the off-white. */
.theme-glass .plan,
.theme-glass .values li,
.theme-glass .fm-card {
  background:
    linear-gradient(var(--g-glass), var(--g-glass)),
    url("/assets/video/hero-poster.jpg") 22% 30% / 320% no-repeat;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 30px -22px rgba(89, 10, 25, .6);
}
.theme-glass .plan:nth-child(2) { background-position: 0 0, 74% 62%; }
.theme-glass .values li:nth-child(2) { background-position: 0 0, 58% 44%; }
.theme-glass .values li:nth-child(3) { background-position: 0 0, 84% 70%; }
.theme-glass .fm-card:nth-child(2) { background-position: 0 0, 58% 44%; }
.theme-glass .fm-card:nth-child(3) { background-position: 0 0, 84% 70%; }
.theme-glass .fm-card:nth-child(4) { background-position: 0 0, 40% 60%; }
.theme-glass .fm-card:nth-child(5) { background-position: 0 0, 70% 24%; }
.theme-glass .fm-card:nth-child(6) { background-position: 0 0, 12% 74%; }

/* Slightly stronger shade on both black and white video sections, for the text sitting on the video */
.theme-glass .section-overlay {
  background: linear-gradient(180deg, rgba(10, 10, 12, .74) 0%, rgba(10, 10, 12, .66) 50%, rgba(10, 10, 12, .8) 100%);
}

/* ---------- Header ---------- */
.theme-glass .site-header.is-scrolled {
  background: rgba(6, 5, 5, .92); /* stays dark over the off-white sections too */
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 1px 0 var(--g-border);
}

/* ---------- Hero: the video keeps its own colors, like the client dashboard background. A neutral
   black shade darkens it slightly without tinting it; the site's navy overlay is replaced. ---------- */
.theme-glass .hero-overlay {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(6, 5, 5, 0), rgba(6, 5, 5, .35) 75%),
    linear-gradient(to bottom, rgba(6, 5, 5, .1), rgba(6, 5, 5, .45));
}
.theme-glass .hero-title, .theme-glass .hero-lede, .theme-glass .hero-note {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .6);
}
/* Small gold text can't stay readable over the video's bright gold moments, so it sits on glass */
.theme-glass .hero-copy .kicker {
  padding: 9px 14px; border-radius: 999px; line-height: 1;
  background: var(--g-glass); border: 1px solid var(--g-border);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
}

/* ---------- Portfolio: black and white video, tiles led by the site image ---------- */
.theme-glass .work { position: relative; isolation: isolate; background: #111114; color: #fff; }
.theme-glass .work .kicker { color: #ffd27a; }
.theme-glass .work .lede { color: #e6e3ea; }
.theme-glass .work :focus-visible { outline-color: var(--saffron); }
.theme-glass .carousel-count { color: var(--g-text-3); }
.theme-glass .carousel-count [data-carousel-current] { color: #fff; }
.theme-glass .carousel-progress { background: rgba(255, 255, 255, .18); }
.theme-glass .slide { overflow: hidden; }
.theme-glass .screen { border-radius: 0; background: #0f0d10; box-shadow: none; }
.theme-glass .js .slide:not(.is-active) .screen,
.js .theme-glass .slide:not(.is-active) .screen { transform: none; }
.theme-glass .slide-info { padding: 16px 20px; }
.theme-glass .slide-num { -webkit-text-stroke-color: #f28c38; }
.theme-glass .slide-text h3 { color: var(--g-text); }
.theme-glass .slide-text p { color: var(--g-text-2); }

/* ---------- Pricing: off-white, dark tiles ---------- */
.theme-glass .pricing { background: var(--paper); color: var(--ink); }
.theme-glass .pricing::before { display: none; }
.theme-glass .pricing .kicker { color: var(--chili); }
.theme-glass .pricing .lede { color: var(--muted); }
.theme-glass .pricing :focus-visible { outline-color: var(--plum); }
.theme-glass .plan-featured { border: 1px solid transparent; outline: 2px solid var(--saffron); outline-offset: -2px; }
.theme-glass .plan-featured:hover { border-color: transparent; }
.theme-glass .plan-desc, .theme-glass .price-term { color: var(--g-text-2); }
.theme-glass .price-plus { color: var(--g-text); }
.theme-glass .price-plus strong { color: #6ee7a0; }
.theme-glass .checks li::before { background: rgba(255, 255, 255, .16); }
.theme-glass .plan-featured .checks li::before { background: #16a34a; }
.theme-glass .plan-note { background: rgba(74, 222, 128, .1); border-color: #4ade80; color: var(--g-text); }
.theme-glass .note-check { background: #16a34a; }

/* ---------- Free preview call to action (spice section) ---------- */
.theme-glass .cta-steps span { color: var(--g-text-2); }

/* ---------- About (off-white, dark tiles) ---------- */
.theme-glass .values h3 { color: var(--g-text); }
.theme-glass .values p { color: var(--g-text-2); }

/* ---------- FAQ (black and white video) ---------- */
.theme-glass .faq-item[open] { border-color: rgba(242, 140, 56, .55); }
.theme-glass .faq-item summary { color: var(--g-text); }
.theme-glass .faq-item summary:hover .faq-q { color: #ffb37a; }
.theme-glass .faq-icon { background: rgba(255, 255, 255, .14); }
.theme-glass .faq-item[open] .faq-icon { background: var(--chili); }
.theme-glass .faq-a { color: var(--g-text-2); }
.theme-glass .faq-a a { color: #ffb37a; }
.theme-glass .faq-a strong { color: var(--g-text); }

/* ---------- Header on the inner pages ---------- */
.theme-glass .site-header.solid,
.theme-glass.page-preview .site-header.solid { background: rgba(6, 5, 5, .92); box-shadow: 0 1px 0 var(--g-border); }

/* ---------- Free preview form: the dashboard's glass and its input fields ---------- */
.theme-glass .form {
  color-scheme: dark; /* native checkboxes and text cursors follow the dark card */
  color: var(--g-text);
  background: var(--g-glass);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow);
}
.theme-glass .form :focus-visible { outline-color: var(--g-accent); }
.theme-glass .form-hint,
.theme-glass .field-hint,
.theme-glass .opt,
.theme-glass .q-enter,
.theme-glass .form-legal { color: var(--g-text-3); }
.theme-glass .form-progress-label,
.theme-glass .survey .q-title,
.theme-glass .group > legend,
.theme-glass .check-field .check { color: var(--g-text); }
.theme-glass .form-progress-pct,
.theme-glass .q-num,
.theme-glass .q-list label { color: var(--g-accent); }
.theme-glass .form-progress-bar { background: rgba(255, 255, 255, .12); }
.theme-glass .form-progress-bar span { background: var(--g-accent); }
.theme-glass .form .req { color: #fca5a5; }
.theme-glass .field input[type="text"],
.theme-glass .field input[type="email"],
.theme-glass .field input[type="tel"],
.theme-glass .field textarea {
  color: var(--g-text);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--g-control-border);
  border-radius: 10px;
}
.theme-glass .field input::placeholder,
.theme-glass .field textarea::placeholder { color: #a39b95; }
.theme-glass .field input:focus,
.theme-glass .field textarea:focus { outline: 3px solid var(--g-accent); outline-offset: 1px; border-color: var(--g-accent); box-shadow: none; }
/* Browser autofill would otherwise paint the fields pale with dark text */
.theme-glass .field input:-webkit-autofill,
.theme-glass .field input:-webkit-autofill:hover,
.theme-glass .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--g-text); caret-color: var(--g-text);
  -webkit-box-shadow: 0 0 0 1000px #2a2524 inset; box-shadow: 0 0 0 1000px #2a2524 inset;
}
.theme-glass .field [aria-invalid="true"],
.theme-glass .choice[aria-invalid="true"] .chip span { border-color: #fca5a5; }
.theme-glass .field-error { color: #fca5a5; }
.theme-glass .check input { accent-color: var(--g-accent); }
.theme-glass .check input[aria-invalid="true"] { outline-color: #fca5a5; }
.theme-glass .consent { background: rgba(255, 255, 255, .045); border: 1px solid var(--g-border); }
.theme-glass .chip span { border: 1px solid var(--g-control-border); background: rgba(255, 255, 255, .05); color: var(--g-text); }
.theme-glass .chip input:checked + span { background: var(--g-accent); border-color: var(--g-accent); color: #0b0a0a; }
.theme-glass .chip input:focus-visible + span { outline-color: var(--g-accent); }
.theme-glass .btn-ink { background: var(--g-text); color: #0b0a0a; }
.theme-glass .btn-ink:hover { background: #fff; }
.theme-glass .btn-ink:focus-visible,
.theme-glass .btn-back:focus-visible { outline-color: var(--g-accent); }
.theme-glass .btn-back { color: #ffb37a; }
.theme-glass .btn-back:hover { color: var(--g-text); }
.theme-glass .form-status.ok { background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3); color: #86efac; }
.theme-glass .form-status.err { background: rgba(252, 165, 165, .1); border: 1px solid rgba(252, 165, 165, .3); color: #fca5a5; }

/* ---------- Landing page service cards ---------- */
.theme-glass .fm-card h3 { color: var(--g-text); }
.theme-glass .fm-card p { color: var(--g-text-2); }
.theme-glass .fm-card-cta h3 { margin-top: 0; }
.theme-glass .fm-photos img { border-radius: var(--g-radius); }

/* ---------- Video landing page ---------- */
.theme-glass .sb-video { border-radius: var(--g-radius); border: 1px solid var(--g-border); box-shadow: var(--g-shadow); }

/* ---------- Legal and 404 pages: the video's swirl across the top, long text stays on off-white ---------- */
.theme-glass .page-hero {
  background:
    linear-gradient(rgba(15, 13, 13, .62), rgba(15, 13, 13, .62)),
    url("/assets/video/hero-poster.jpg") 30% 40% / cover no-repeat;
}
.theme-glass .page-updated { color: var(--g-text-2); }

/* ---------- Footer: keeps its navy, with a glass edge ---------- */
.theme-glass .site-footer { border-top: 1px solid var(--g-border); }

@media (prefers-reduced-transparency: reduce) {
  .theme-glass { --g-glass: rgba(15, 13, 13, .96); }
}