/* ================================================================
   theme.css — Dark / Light Mode System for WebPath Agency
   ================================================================
   Architecture:
   - Semantic tokens on :root (light defaults)
   - Overrides under html[data-theme="dark"]
   - Component-level overrides for surfaces that can't use variables
   - Smooth 200ms transitions when switching
   ================================================================ */


/* ── 1. Smooth theme transitions (scoped to themeable surfaces) ── */
html[data-theme] body,
html[data-theme] #brx-header,
html[data-theme] .brxe-section,
html[data-theme] .brxe-container,
html[data-theme] .brxe-div,
html[data-theme] .brxe-heading,
html[data-theme] .brxe-text,
html[data-theme] .brxe-text-basic,
html[data-theme] .brxe-button,
html[data-theme] .brxe-nav-menu a,
html[data-theme] .footer,
html[data-theme] .nav-overlay,
html[data-theme] .fr-nav-bravo--sticky,
html[data-theme] .hero__proof-card,
html[data-theme] .solutions__card-inner,
html[data-theme] .case-card,
html[data-theme] .template__body,
html[data-theme] .template__footer,
html[data-theme] .fr-cta-card-alpha,
html[data-theme] .fr-faq-accordion-alpha,
html[data-theme] input,
html[data-theme] textarea {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}


/* ── 2. Semantic Tokens — Light (default) ── */
:root {
  --th-bg:              #efeffb;
  --th-bg-2:            #ffffff;
  --th-surface:         #f3f3f9;
  --th-surface-2:       #e8e8f2;
  --th-border:          rgba(79, 79, 125, 0.14);
  --th-border-mid:      rgba(79, 79, 125, 0.22);
  --th-text:            #1e1c3a;
  --th-text-mid:        #4f4f7d;
  --th-text-muted:      #8585ae;
  --th-shadow:          rgba(20, 16, 50, 0.10);
  --th-shadow-lg:       rgba(20, 16, 50, 0.18);
  --th-nav-bg:          rgba(239, 239, 251, 0.96);
  --th-nav-sticky-bg:   rgba(255, 255, 255, 0.98);
  --th-card-bg:         #ffffff;
  --th-input-bg:        #ffffff;
  --th-input-border:    rgba(79, 79, 125, 0.25);
  --th-accent:          #14b5eb;
  --th-toggle-border:   rgba(79, 79, 125, 0.22);
  --th-toggle-hover:    rgba(79, 79, 125, 0.08);
}


/* ── 3. Dark Mode Tokens ── */
html[data-theme="dark"] {
  --th-bg:              #0c0c14;
  --th-bg-2:            #0f0f1a;
  --th-surface:         #15151f;
  --th-surface-2:       #1a1a28;
  --th-border:          rgba(255, 255, 255, 0.07);
  --th-border-mid:      rgba(255, 255, 255, 0.12);
  --th-text:            rgba(255, 255, 255, 0.87);
  --th-text-mid:        rgba(255, 255, 255, 0.60);
  --th-text-muted:      rgba(255, 255, 255, 0.50);
  --th-shadow:          rgba(0, 0, 0, 0.35);
  --th-shadow-lg:       rgba(0, 0, 0, 0.55);
  --th-nav-bg:          rgba(12, 12, 20, 0.92);
  --th-nav-sticky-bg:   rgba(10, 10, 18, 0.98);
  --th-card-bg:         #15151f;
  --th-input-bg:        #1a1a28;
  --th-input-border:    rgba(255, 255, 255, 0.12);
  --th-accent:          #14b5eb;
  --th-toggle-border:   rgba(255, 255, 255, 0.15);
  --th-toggle-hover:    rgba(255, 255, 255, 0.07);

  --th-surface-elevated: #1f1f30;
  --th-glow:            rgba(20, 181, 235, 0.06);
  --th-shadow-tinted:   rgba(10, 8, 30, 0.45);
  --th-shadow-tinted-lg:rgba(12, 10, 35, 0.60);
  --th-border-accent:   rgba(20, 181, 235, 0.10);

  /* Override ACSS design tokens that produce light surfaces.
     NOTE: --base-ultra-light and --base-light are also used as text colors
     in some places, so we can NOT remap them to dark values.
     Only override tokens that are exclusively used for backgrounds. */
  --secondary-trans-10: rgba(20, 181, 235, 0.06);
  --secondary-trans-20: rgba(20, 181, 235, 0.10);
}


/* ================================================================
   4. BODY & PAGE BACKGROUND
   ================================================================ */

/* body has an inline style="background-color:#efeffb" from Bricks —
   !important in a stylesheet beats inline styles without !important */
html[data-theme="dark"] body,
html[data-theme="dark"] body.brx-body {
  background-color: #0c0c14 !important;
  color: rgba(255, 255, 255, 0.87);
}

/* Hero section — override any bg from homepage.css */
html[data-theme="dark"] #hero-section,
html[data-theme="dark"] .hero-section {
  background-color: transparent !important;
}

/* Decorative sun/cloud graphic in the homepage header — hide in dark mode */
html[data-theme="dark"] .hero__sun {
  opacity: 0 !important;
  pointer-events: none;
}

/* Hero mountain background — tint toward deep blue-purple for dark atmosphere.
   mix-blend-mode: screen lets lighter mountain tones glow against the dark bg. */
html[data-theme="dark"] #hero-background__image {
  opacity: 0.35 !important;
  filter: brightness(0.6) saturate(0.5) hue-rotate(200deg) !important;
  mix-blend-mode: screen !important;
}

/* Gradient bridge — fades the bottom of the hero into the solutions section,
   replicating the natural light→dark flow that the colorful mountains provide in light mode.
   Scales down on mobile where the hero is shorter and content sits closer to the bottom. */
html[data-theme="dark"] #hero-section::after,
html[data-theme="dark"] .hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(to bottom, transparent 0%, rgba(40, 36, 75, 0.55) 60%, rgba(45, 40, 80, 0.8) 100%);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 767px) {
  html[data-theme="dark"] #hero-section::after,
  html[data-theme="dark"] .hero-section::after {
    height: 50px;
  }
}

/* Nebula background — remap to deep blue-indigo palette for dark mode */
html[data-theme="dark"] .nebula-bg {
  opacity: 0.65;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(30, 20, 80, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(20, 35, 90, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(25, 18, 55, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, #0e0e1a 0%, #12122a 40%, #10102a 70%, #0c0c1a 100%) !important;
}

html[data-theme="dark"] .nebula-cloud--a {
  background: radial-gradient(ellipse, rgba(40, 25, 100, 0.20), transparent 70%) !important;
}

html[data-theme="dark"] .nebula-cloud--b {
  background: radial-gradient(ellipse, rgba(20, 35, 100, 0.18), transparent 70%) !important;
}

html[data-theme="dark"] .nebula-cloud--c {
  background: radial-gradient(ellipse, rgba(50, 30, 90, 0.14), transparent 70%) !important;
}

html[data-theme="dark"] .nebula-cloud--d {
  background: radial-gradient(ellipse, rgba(30, 20, 85, 0.16), transparent 70%) !important;
}

/* Hero aurora background — swap the bright lavender base for a dark surface.
   The mesh child adds gradient blobs on top of this base. */
html[data-theme="dark"] #hero-aurora-bg {
  background: #0c0c14 !important;
  opacity: 1;
}

/* Hero aurora mesh — remap pastel gradient blobs to deep, saturated dark-mode colors */
html[data-theme="dark"] #hero-aurora-mesh {
  background:
    radial-gradient(ellipse 600px 500px at 25% 30%, hsla(270, 60%, 28%, 0.55) 0%, transparent 100%),
    radial-gradient(ellipse 500px 450px at 75% 20%, hsla(220, 55%, 22%, 0.50) 0%, transparent 100%),
    radial-gradient(ellipse 550px 400px at 55% 75%, hsla(195, 60%, 20%, 0.45) 0%, transparent 100%),
    radial-gradient(ellipse 400px 350px at 15% 70%, hsla(300, 45%, 25%, 0.35) 0%, transparent 100%) !important;
}

/* Hero eyebrow badge */
html[data-theme="dark"] #hero__eyebrow-heading {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Hero trust strip */
html[data-theme="dark"] .hero__trust-strip {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] .hero__trust-value {
  color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .hero__trust-label {
  color: rgba(255, 255, 255, 0.60) !important;
}

/* Hero social proof card */
html[data-theme="dark"] .hero__proof-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] .hero__proof-quote {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .hero__proof-author {
  color: rgba(255, 255, 255, 0.58) !important;
}

/* Hero bird shapes — dim for dark so they're visible but subtle */
html[data-theme="dark"] .hero__bird::before,
html[data-theme="dark"] .hero__bird::after {
  background: rgba(255, 255, 255, 0.30) !important;
}


/* ================================================================
   5. TYPOGRAPHY
   ================================================================ */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: rgba(255, 255, 255, 0.95);
}

html[data-theme="dark"] p {
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] a:not([class*="btn"]):not([class*="button"]):not(.nav-overlay__menu a):not(.bricks-nav-menu a) {
  color: rgba(255, 255, 255, 0.80);
}

html[data-theme="dark"] a:not([class*="btn"]):not([class*="button"]):hover {
  color: #14b5eb;
}

/* Strong / bold text */
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  color: rgba(255, 255, 255, 0.92);
}

/* Hero heading span — uses --base color (dark purple) in light mode */
html[data-theme="dark"] .hero-heading__span {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: none !important;
}

/* Section headings in dark mode don't need a gradient highlight —
   the gradient creates a visible block on dark section backgrounds */
html[data-theme="dark"] .text-highlight--dark {
  background: none !important;
  background-image: none !important;
}


/* ================================================================
   6. HEADER
   ================================================================ */

/* Header rows — keep transparent so the floating pill shape is preserved */
html[data-theme="dark"] .brxe-xheaderrow {
  background-color: transparent !important;
}

/* Floating nav pill (fr-nav-bravo) gets the dark frosted background */
html[data-theme="dark"] .fr-nav-bravo {
  background-color: rgba(18, 18, 30, 0.92) !important;
}

html[data-theme="dark"] .fr-nav-bravo .bricks-nav-menu-wrapper {
  background-color: transparent !important;
}

html[data-theme="dark"] #brx-header.x-header_sticky-active .brxe-xheaderrow[data-x-sticky="show"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #brx-header.x-header_sticky-active .brxe-xheaderrow[data-x-sticky="show"] .fr-nav-bravo {
  background-color: rgba(18, 18, 30, 0.98) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Header nav links */
html[data-theme="dark"] .bricks-nav-menu a {
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="dark"] .bricks-nav-menu a:hover {
  color: #ffffff !important;
}

/* Sub-menu dropdown */
html[data-theme="dark"] .bricks-nav-menu .sub-menu {
  background: linear-gradient(170deg, #1c1c30 0%, #1a1a28 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 8px 24px var(--th-shadow-tinted-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .bricks-nav-menu .sub-menu a {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .bricks-nav-menu .sub-menu a:hover {
  color: #14b5eb !important;
  background-color: rgba(20, 181, 235, 0.08) !important;
}

/* Sub-menu item (li) hover — Bricks inline CSS targets .menu-item:hover with
   var(--secondary-trans-50/60) which is too saturated on dark surfaces */
html[data-theme="dark"] .bricks-nav-menu .sub-menu .menu-item:hover {
  background-color: rgba(20, 181, 235, 0.08) !important;
}

/* Submenu toggle chevron — inline CSS sets .brx-submenu-toggle > * to
   var(--base-dark) or var(--black), which are invisible on dark backgrounds */
html[data-theme="dark"] .bricks-nav-menu .brx-submenu-toggle button,
html[data-theme="dark"] .bricks-nav-menu .brx-submenu-toggle > * {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Burger menu icon lines */
html[data-theme="dark"] .x-hamburger-inner,
html[data-theme="dark"] .x-hamburger-inner::before,
html[data-theme="dark"] .x-hamburger-inner::after {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .header__burger--label {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .header__burger {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Notification bar — #brxe-tmubwx ID in post-9 sets #eac6ea pink bg;
   use !important to override both class and ID selectors */
html[data-theme="dark"] .brxe-xnotificationbar {
  background-color: #673e6a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .brxe-xnotificationbar p {
  background-color: #00000021 !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="dark"] .brxe-xnotificationbar span {
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="dark"] .notif-modal-trigger {
  color: rgba(255, 255, 255, 0.95) !important;
}


/* ================================================================
   7. NAV OVERLAY (Mobile Menu Modal)
   ================================================================ */

html[data-theme="dark"] .nav-overlay__panel {
  background: linear-gradient(170deg, #16162a 0%, #15151f 100%) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 24px 60px rgba(12, 10, 35, 0.65),
    0 4px 16px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.87) !important;
}

html[data-theme="dark"] .nav-overlay__head {
  background: #1a1a28 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .nav-overlay__close {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] .nav-overlay__close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

html[data-theme="dark"] .nav-overlay__menu a {
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="dark"] .nav-overlay__menu a:hover,
html[data-theme="dark"] .nav-overlay__menu a:focus-visible {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .nav-overlay__menu > li {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .nav-overlay__toggle {
  color: rgba(255, 255, 255, 0.38) !important;
}

html[data-theme="dark"] .nav-overlay__toggle:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.70) !important;
}

html[data-theme="dark"] .nav-overlay__toggle[aria-expanded="true"] {
  color: #14b5eb !important;
}

html[data-theme="dark"] .nav-overlay__submenu a {
  color: rgba(255, 255, 255, 0.52) !important;
}

html[data-theme="dark"] .nav-overlay__submenu a:hover,
html[data-theme="dark"] .nav-overlay__submenu a:focus-visible {
  color: #14b5eb !important;
  background: rgba(20, 181, 235, 0.08) !important;
}

html[data-theme="dark"] .nav-overlay__submenu li::before {
  background: #14b5eb !important;
  opacity: 0.5;
}

html[data-theme="dark"] .nav-overlay__cta {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .nav-overlay__backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
}


/* ================================================================
   8. SECTION BACKGROUNDS
   ================================================================ */

/* Bricks section elements — alternate dark surfaces to restore visual rhythm.
   nebula-reveal sections stay transparent so the dark nebula shows through.
   nebula-opaque sections get a solid dark surface to cover the nebula. */
html[data-theme="dark"] .brxe-section {
  background-color: transparent;
}

html[data-theme="dark"] .brxe-section.nebula-opaque {
  background-color: #10101c !important;
}

/* Hero section — has an explicit rgba(239,239,251,0.82) from post-27.min.css */
html[data-theme="dark"] #hero-section {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Phone CTA pill in header — Bricks sets #fafaff; make it a dark frosted pill */
html[data-theme="dark"] #brxe-thrlhn {
  background-color: #1e1e32 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

html[data-theme="dark"] #brxe-thrlhn:hover {
  background-color: #252540 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] #brxe-thrlhn .brxe-text-basic {
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="dark"] #brxe-thrlhn #brxe-ardjkl {
  filter: brightness(0) invert(1) !important;
}

/* Specific light bg sections */
html[data-theme="dark"] #template-shop,
html[data-theme="dark"] #recent-projects,
html[data-theme="dark"] #brxe-fupigs,
html[data-theme="dark"] #brxe-dchfdg {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
}

/* Containers */
html[data-theme="dark"] .brxe-container {
  color: inherit;
}

/* Tab menus — homepage solutions tabs */
html[data-theme="dark"] #brxe-zyeobo > .tab-menu .tab-title {
  background-color: #13111d !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] #brxe-zyeobo > .tab-menu .tab-title.brx-open {
  background-color: #201530 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] #brxe-zyeobo > .tab-content {
  background-color: #15151f !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Solution items inside tabs — override light border-bottom from Bricks */
html[data-theme="dark"] .solutions-tab__solution {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Tab headings */
html[data-theme="dark"] .tab-title .brxe-heading,
html[data-theme="dark"] .tab-title .brxe-heading span {
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 400 !important;
}

html[data-theme="dark"] .tab-title.brx-open .brxe-heading,
html[data-theme="dark"] .tab-title.brx-open .brxe-heading span {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
}

/* Dividers */
html[data-theme="dark"] hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Bricks divider wrapper must be transparent — only the inner .line is the visual rule */
html[data-theme="dark"] .brxe-divider {
  background-color: transparent !important;
}

html[data-theme="dark"] .brxe-divider .line {
  border-color: rgba(255, 255, 255, 0.12) !important;
}


/* ================================================================
   9. SOLUTION CARDS
   ================================================================ */

/* Happy Customers / Less Stress / More Time cards */
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] .solution-card-bravo {
  background: linear-gradient(155deg, #14141f 0%, #16162a 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 2px 8px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .solution-card:hover,
html[data-theme="dark"] .solution-card-bravo:hover {
  background: linear-gradient(155deg, #17172a 0%, #1a1a32 100%) !important;
  box-shadow:
    0 8px 24px var(--th-shadow-tinted-lg),
    0 0 0 1px var(--th-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-color: var(--th-border-accent) !important;
}

html[data-theme="dark"] .solution-card h1,
html[data-theme="dark"] .solution-card h2,
html[data-theme="dark"] .solution-card h3,
html[data-theme="dark"] .solution-card h4,
html[data-theme="dark"] .solution-card-bravo h1,
html[data-theme="dark"] .solution-card-bravo h2,
html[data-theme="dark"] .solution-card-bravo h3,
html[data-theme="dark"] .solution-card-bravo h4 {
  color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .solution-card p,
html[data-theme="dark"] .solution-card-bravo p {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Solution card container text — inline CSS sets color: var(--base-dark) (#31314e)
   which is invisible on dark backgrounds. Override for all text descendants. */
html[data-theme="dark"] .solution-card-bravo {
  color: rgba(255, 255, 255, 0.65) !important;
}


/* ================================================================
   10. CASE / PROJECT CARDS
   ================================================================ */

/* Override the bright blue/teal card backgrounds.
   The card has background-image: linear-gradient(sky-blue) — must null it out too */
html[data-theme="dark"] .case-card {
  background: linear-gradient(150deg, #18132a 0%, #1e1630 60%, #211838 100%) !important;
  border-color: rgba(167, 139, 250, 0.10) !important;
  box-shadow:
    0 4px 16px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(167, 139, 250, 0.06) !important;
}

html[data-theme="dark"] .case-card__inner--left,
html[data-theme="dark"] .case-card__inner--right {
  background-color: transparent !important;
  background-image: none !important;
}

/* The .template-header__image inside case cards has bright cyan bg from per-page CSS */
html[data-theme="dark"] .case-card .template-header__image,
html[data-theme="dark"] .template-header__image.brxe-image {
  background-color: #1e182e !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .case-card:hover {
  background: linear-gradient(150deg, #1c1630 0%, #221a38 60%, #261c3e 100%) !important;
  border-color: rgba(167, 139, 250, 0.18) !important;
  box-shadow:
    0 12px 36px var(--th-shadow-tinted-lg),
    0 0 0 1px rgba(167, 139, 250, 0.10),
    inset 0 1px 0 rgba(167, 139, 250, 0.08) !important;
}

/* Card name overlay — keep the translucent dark look */
html[data-theme="dark"] .case-card__name {
  background: rgba(0, 0, 20, 0.70) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .case-card h1,
html[data-theme="dark"] .case-card h2,
html[data-theme="dark"] .case-card h3,
html[data-theme="dark"] .case-card h4 {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .case-card p {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Preview Template / Project Info buttons inside case cards */
html[data-theme="dark"] .case-card .bricks-button:not(.btn--action) {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border: none !important;
}

html[data-theme="dark"] .case-card .bricks-button:not(.btn--action):hover {
  background-color: rgba(20, 181, 235, 0.08) !important;
  color: #14b5eb !important;
  border: none !important;
}


/* ================================================================
   11. BLOG ARTICLE CARDS
   ================================================================ */

/* Light-mode hover overrides (fix washed-out gray from wpcodebox-46) */
.fr-article-card-hotel:hover .fr-article-card-hotel__header {
  color: var(--base) !important;
}

.fr-article-card-hotel:hover .fr-article-card-hotel__footer {
  color: var(--secondary-dark) !important;
}

/* Dark-mode blog post list cards — visible surface at rest */
html[data-theme="dark"] .fr-article-card-hotel {
  background: linear-gradient(160deg, #171522 0%, #1a182c 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.07) !important;
  border-radius: var(--radius-m) !important;
  padding: var(--space-xs) var(--space-s) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(167, 139, 250, 0.03) !important;
}

html[data-theme="dark"] .fr-article-card-hotel:hover {
  background: linear-gradient(160deg, #1e1a32 0%, #221e3c 100%) !important;
  border-color: rgba(167, 139, 250, 0.14) !important;
  border-radius: var(--radius-m) !important;
  box-shadow:
    0 8px 24px var(--th-shadow-tinted-lg),
    0 0 0 1px var(--th-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .fr-article-card-hotel:not(:first-child)::before {
  display: none !important;
}

html[data-theme="dark"] .fr-article-card-hotel__header {
  color: rgba(255, 255, 255, 0.90) !important;
}

html[data-theme="dark"] .fr-article-card-hotel:hover .fr-article-card-hotel__header {
  color: #fff !important;
}

html[data-theme="dark"] .fr-article-card-hotel__footer {
  color: rgba(255, 255, 255, 0.50) !important;
}

html[data-theme="dark"] .fr-article-card-hotel:hover .fr-article-card-hotel__footer {
  color: rgba(255, 255, 255, 0.75) !important;
}


/* ================================================================
   12. TEMPLATE CARDS
   ================================================================ */

html[data-theme="dark"] .template {
  background: linear-gradient(145deg, #1c1a2c 0%, #201e36 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.09) !important;
  border-radius: var(--radius-m) !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 16px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(167, 139, 250, 0.05) !important;
}

html[data-theme="dark"] .template:hover {
  background: linear-gradient(145deg, #22203c 0%, #262240 100%) !important;
  border-color: rgba(167, 139, 250, 0.16) !important;
  box-shadow:
    0 12px 36px var(--th-shadow-tinted-lg),
    0 0 0 1px rgba(167, 139, 250, 0.10),
    inset 0 1px 0 rgba(167, 139, 250, 0.07) !important;
}

/* Template card inner panels (body + footer have their own white bg) */
html[data-theme="dark"] .template__body,
html[data-theme="dark"] .brxe-gnbvik {
  background: linear-gradient(180deg, #201e30 0%, #221e36 100%) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .template__footer,
html[data-theme="dark"] .brxe-tdzxos {
  background-color: #1c1a2a !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .template h1,
html[data-theme="dark"] .template h2,
html[data-theme="dark"] .template h3,
html[data-theme="dark"] .template h4 {
  color: rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="dark"] .template p,
html[data-theme="dark"] .template span {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Template preview image — bright cyan background from per-page CSS */
html[data-theme="dark"] .template-header__image.brxe-image,
html[data-theme="dark"] .template__header .brxe-image {
  background-color: #1a1a2e !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Template shop heading — darken the banner for dark mode */
html[data-theme="dark"] .section-heading--template {
  background-color: rgba(20, 181, 235, 0.08) !important;
  border: 1px solid rgba(20, 181, 235, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 4px 24px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Template card "Preview Template" footer wrapper — has var(--secondary-trans-20) cyan bg */
html[data-theme="dark"] .brxe-foxgum.brxe-div,
html[data-theme="dark"] .brxe-shxbej.brxe-div {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Template card headings and "Preview Template" link — boost contrast */
html[data-theme="dark"] .template h3,
html[data-theme="dark"] .template h4 {
  color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .template__footer a,
html[data-theme="dark"] .template__footer .brxe-text-basic {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="dark"] .template__footer a:hover {
  color: #14b5eb !important;
}

/* Template shop sticky CTA bar — SVG background-image creates bright lavender bar */
html[data-theme="dark"] .template-shop__cta-container {
  background-image: none !important;
  background-color: #1c1828 !important;
  border-top: 1px solid rgba(167, 139, 250, 0.08) !important;
  box-shadow: 0 -4px 24px var(--th-shadow-tinted-lg) !important;
}

/* Case promo span — pink gradient text decoration */
html[data-theme="dark"] .case-promo-span {
  background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)) !important;
}


/* Pink hero sections → deep plum in dark mode */
html[data-theme="dark"] #brxe-lxpsux,
html[data-theme="dark"] #brxe-xbjaqr {
  background-color: #3d2440 !important;
}

/* Our Mission section — light sets #4a4974 bg + #cbb4e5 border */
html[data-theme="dark"] #brxe-ddrlrx {
  background-color: #1e1530 !important;
  border-top-color: rgba(103, 62, 106, 0.45) !important;
}

/* Recent projects top-border — muted purple instead of hidden */
html[data-theme="dark"] #recent-projects {
  border-top-color: rgba(103, 62, 106, 0.4) !important;
}

/* ================================================================
   13. PRICING CARDS (Process Steps)
   ================================================================
   Scope: /pricing/ page — sticky panel, step cards, step badges,
   price boxes, phase markers, subscription note.
   Hardcoded light colors in pricing-upgrade.css are overridden here.
   ================================================================ */

/* ── Step cards — surface, top/right/bottom borders, shadow ──
   Note: border-left-color is set per-card below so the accent
   stripes (cyan/violet/gold) survive in dark mode. */
html[data-theme="dark"] .fr-process-section-foxtrot__card {
  background: linear-gradient(150deg, #15151f 0%, #171728 100%) !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
  border-right-color: rgba(255, 255, 255, 0.07) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 4px 16px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__card:hover {
  background: linear-gradient(150deg, #1a1a28 0%, #1c1c32 100%) !important;
  border-top-color: rgba(20, 181, 235, 0.20) !important;
  border-right-color: rgba(20, 181, 235, 0.20) !important;
  border-bottom-color: rgba(20, 181, 235, 0.20) !important;
  box-shadow:
    0 12px 32px var(--th-shadow-tinted-lg),
    0 0 0 1px var(--th-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ── Per-card left-border accent colors, saturated for dark bg ── */
/* Step 1 — Free entry, cool neutral */
html[data-theme="dark"] #brxe-7791a1.fr-process-section-foxtrot__card {
  border-left-color: rgba(255, 255, 255, 0.28) !important;
}
html[data-theme="dark"] #brxe-7791a1.fr-process-section-foxtrot__card:hover {
  border-left-color: rgba(255, 255, 255, 0.45) !important;
}
/* Step 2 — Paid analysis, brand violet (brighter than light-mode mauve) */
html[data-theme="dark"] #brxe-8877f3.fr-process-section-foxtrot__card {
  border-left-color: #c66fc0 !important;
}
html[data-theme="dark"] #brxe-8877f3.fr-process-section-foxtrot__card:hover {
  border-left-color: #e289dd !important;
}
/* Steps 3–5 — Growth plan, warm gold */
html[data-theme="dark"] #brxe-vbnfwj .fr-process-section-foxtrot__card {
  border-left-color: #e0bb5a !important;
}
html[data-theme="dark"] #brxe-vbnfwj .fr-process-section-foxtrot__card:hover {
  border-left-color: #f0cf78 !important;
}

/* Growth plan wrapper — kill the light border in dark mode */
html[data-theme="dark"] #brxe-vbnfwj {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Typography: headings, lede, descriptions ── */
html[data-theme="dark"] .fr-process-section-foxtrot__cards-intro,
html[data-theme="dark"] .fr-process-grid-foxtrot__sticky-content {
  color: rgba(255, 255, 255, 0.87) !important;
}

html[data-theme="dark"] .fr-process-card-foxtrot__description {
  color: rgba(255, 255, 255, 0.68) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__lede,
html[data-theme="dark"] .fr-lede {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] .fr-lede strong {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* ── Phase marker pills ("GETTING STARTED:", "YOUR GROWTH PLAN:") ──
   pricing-upgrade.css gives them a white-ish background; replace with
   a subtle inset pill that reads on the dark section. */
html[data-theme="dark"] .fr-process-section-foxtrot__cards-intro.brxe-heading,
html[data-theme="dark"] .fr-process-section-foxtrot__cards h3 {
  background: linear-gradient(150deg, #1a1a28 0%, #1c1c30 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(20, 181, 235, 0.04),
    0 1px 3px var(--th-shadow-tinted) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__cards-intro.brxe-heading::before {
  background: #14b5eb !important;
  box-shadow: 0 0 10px rgba(20, 181, 235, 0.55) !important;
}

/* ── Step badge (number circle + "STEP" label) ── */
html[data-theme="dark"] .fr-process-section-foxtrot__card-step {
  background: linear-gradient(
    135deg,
    rgba(20, 181, 235, 0.12),
    rgba(124, 92, 252, 0.08)
  ) !important;
  border-color: rgba(20, 181, 235, 0.22) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__card-step::before {
  background: #14b5eb !important;
  color: #0a1628 !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__card-step::after {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Step 1 badge — neutral for the free entry step */
html[data-theme="dark"] #brxe-7791a1 .fr-process-section-foxtrot__card-step {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] #brxe-7791a1 .fr-process-section-foxtrot__card-step::before {
  background: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="dark"] #brxe-7791a1 .fr-process-section-foxtrot__card-step::after {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Price box (inside each card) ──
   pricing-upgrade.css paints a light-lavender gradient with a pale
   border; invert both so the price reads on the dark card. */
html[data-theme="dark"] .fr-process-card-foxtrot__price {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.04),
    rgba(20, 181, 235, 0.06)
  ) !important;
  border-color: rgba(20, 181, 235, 0.15) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .fr-process-card-foxtrot__price b,
html[data-theme="dark"] .fr-process-card-foxtrot__price strong {
  color: #ffffff !important;
}

/* Step 1 price box — muted to reinforce the "free" treatment */
html[data-theme="dark"] #brxe-7791a1 .fr-process-card-foxtrot__price {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Sticky side panel ("ASCEND YOUR DIGITAL LANDSCAPE…") ──
   pricing-upgrade.css paints a LIGHT silver/cyan gradient which reads
   like a white card on the dark page. Replace with a dark, on-brand
   gradient that mirrors the bottom .sticky__cta card. */
html[data-theme="dark"] .fr-process-section-foxtrot__sticky {
  background-color: #12121e !important;
  background-image: linear-gradient(
    145deg,
    #14141f 0%,
    #181827 40%,
    rgba(20, 181, 235, 0.08) 100%
  ) !important;
  border: 1px solid rgba(20, 181, 235, 0.16) !important;
  box-shadow:
    0 0 40px var(--th-glow),
    0 4px 32px var(--th-shadow-tinted-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__sticky
  .fr-process-section-foxtrot__card-heading {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: none !important;
}

/* Sticky panel CTA button — default --action is pale cream; swap to
   brand cyan so it matches the bottom CTA button treatment */
html[data-theme="dark"] .fr-process-section-foxtrot__sticky .brxe-button.btn--action {
  background: linear-gradient(135deg, #14b5eb, #0e9cd0) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    0 2px 12px rgba(20, 181, 235, 0.30),
    0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__sticky .brxe-button.btn--action:hover {
  background: linear-gradient(135deg, #1dc4ff, #14b5eb) !important;
  box-shadow:
    0 4px 20px rgba(20, 181, 235, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.20) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .fr-process-section-foxtrot__sticky .brxe-button.btn--action svg {
  filter: brightness(0) invert(1) !important;
}

/* ── Subscription options note (#brxe-hakify) ──
   The decorative rule-lines in the span use black at 12% opacity,
   which disappears on the dark card. Override to a white tint. */
html[data-theme="dark"] #brxe-hakify {
  background: linear-gradient(155deg, #1a1a28 0%, #1c1c30 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 1px 3px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] #brxe-hakify strong {
  color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] #brxe-hakify span {
  color: rgba(20, 181, 235, 0.85) !important;
}

html[data-theme="dark"] #brxe-hakify span::before,
html[data-theme="dark"] #brxe-hakify span::after {
  background: rgba(255, 255, 255, 0.14) !important;
}


/* ================================================================
   14. CTA SECTION
   ================================================================ */

html[data-theme="dark"] .cta-section {
  background-color: #0c0c14 !important;
  background-image:
    radial-gradient(ellipse 600px 500px at 75% 55%, rgba(100, 60, 160, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 400px 350px at 80% 45%, rgba(20, 181, 235, 0.06) 0%, transparent 60%) !important;
  border-color: transparent !important;
}

/* Background SVG image inside the CTA section — hide completely in dark mode.
   The IMG element itself carries a white background-color from Bricks, so override that too. */
html[data-theme="dark"] .cta-section__background {
  opacity: 0 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

/* "We can ensure..." text — ensure it reads on the dark section bg */
html[data-theme="dark"] .cta-section__lede {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* "What's Included:" label */
html[data-theme="dark"] .cta-section__whats-included,
html[data-theme="dark"] [class*="whats-included"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* What's Included icon boxes — icons are dark SVGs, invert to white */
html[data-theme="dark"] .cta-section__icon-box img,
html[data-theme="dark"] .cta-section__icon-box svg {
  filter: brightness(0) invert(1) !important;
}

html[data-theme="dark"] .fr-cta-card-alpha {
  background-color: #2a1530 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.22'%3E%3Ccircle fill='%232e1834' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23341c3c' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%233a2044' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%2340244c' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23462854' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%234c2c5c' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  border-color: rgba(200, 137, 193, 0.25) !important;
  box-shadow:
    0 0 40px rgba(103, 62, 106, 0.18),
    0 4px 24px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(200, 137, 193, 0.07) !important;
}

html[data-theme="dark"] .fr-cta-card-alpha__content-wrapper {
  background: linear-gradient(145deg, #2e1a36 0%, #32203e 100%) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(200, 137, 193, 0.12),
    inset 0 1px 0 rgba(200, 137, 193, 0.05) !important;
}

html[data-theme="dark"] .cta-section__icon-box {
  background: linear-gradient(155deg, #2c1834 0%, #301c3a 100%) !important;
  border-color: rgba(200, 137, 193, 0.14) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(200, 137, 193, 0.05) !important;
}

html[data-theme="dark"] .cta-section__icon-text {
  text-shadow: none !important;
}

html[data-theme="dark"] .cta-section__icon-box:hover {
  background-color: rgba(20, 181, 235, 0.08) !important;
  border-color: rgba(20, 181, 235, 0.20) !important;
}

/* Sticky CTA card — dark concentric bullseye mirroring light mode energy */
html[data-theme="dark"] .sticky__cta {
  background-color: #08081a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg%3E%3Ccircle fill='%23080818' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%230e0c24' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23181236' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%2328184e' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23381e68' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23482480' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-attachment: initial !important;
  background-size: cover !important;
  border: 2px solid rgba(124, 92, 252, 0.25) !important;
  box-shadow:
    0 0 70px rgba(100, 60, 180, 0.18),
    0 0 35px rgba(20, 181, 235, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .sticky__cta:hover {
  border-color: rgba(124, 92, 252, 0.35) !important;
  box-shadow:
    0 0 80px rgba(100, 60, 180, 0.20),
    0 0 40px rgba(20, 181, 235, 0.12),
    0 12px 40px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sticky-cta__heading {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 20px rgba(124, 92, 252, 0.20) !important;
}

html[data-theme="dark"] .sticky-cta__price .cta-price {
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 0.04em !important;
}

html[data-theme="dark"] .sticky-cta__span {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* CTA button — clean brand accent in dark mode */
html[data-theme="dark"] .sticky__cta .btn--action {
  background: linear-gradient(135deg, #14b5eb, #0e9cd0) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    0 2px 12px rgba(20, 181, 235, 0.30),
    0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .sticky__cta .btn--action:hover {
  background: linear-gradient(135deg, #1dc4ff, #14b5eb) !important;
  box-shadow:
    0 4px 20px rgba(20, 181, 235, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.20) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .sticky__cta .btn--action svg {
  color: #ffffff !important;
}

/* CTA section inner divider — subtle gradient separator */
html[data-theme="dark"] #brxe-suyial {
  border-color: transparent !important;
  border-top: 1px solid rgba(124, 92, 252, 0.15) !important;
}


/* ================================================================
   15. FAQ ACCORDION
   ================================================================ */

html[data-theme="dark"] .fr-faq-accordion-alpha .accordion-title-wrapper {
  background-color: #3d3f6a !important;
}

html[data-theme="dark"] .fr-faq-accordion-alpha .accordion-content-wrapper {
  background-color: #26253e !important;
}

html[data-theme="dark"] .fr-faq-accordion-alpha__text-wrapper.brxe-div {
  background-color: #1e1d34 !important;
}

@media (max-width: 478px) {
  html[data-theme="dark"] .fr-faq-accordion-alpha .accordion-content-wrapper {
    background-color: transparent !important;
    padding-top: var(--space-l) !important;
    padding-right: var(--space-m) !important;
    padding-bottom: var(--space-l) !important;
    padding-left: var(--space-m) !important;
  }

  html[data-theme="dark"] .fr-faq-accordion-alpha__text-wrapper.brxe-div {
    background-color: transparent !important;
  }
}

html[data-theme="dark"] .fr-faq-accordion-alpha__text,
html[data-theme="dark"] .fr-faq-accordion-alpha__text p {
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="dark"] .fr-faq-accordion-alpha__text a {
  color: #14b5eb !important;
}

/* Guten intro block */
html[data-theme="dark"] .guten-intro {
  background: rgba(20, 181, 235, 0.06) !important;
  border-color: rgba(20, 181, 235, 0.20) !important;
  box-shadow:
    0 2px 8px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Homepage blog article section — solid dark surface to cover the nebula */
html[data-theme="dark"] .fr-article-section-hotel {
  background-color: #10101c !important;
  background-image: none !important;
}


/* ================================================================
   16. BLOG POST BODY
   ================================================================ */

/* Blog body must stack above hero (hero has z-index:1, margin-top:-50px overlap) */
.fr-blog-post-body-alpha {
  position: relative;
  z-index: 2;
}

/* Kill the inline purple radial-gradient on .bg--base (must use shorthand
   to reset background-image, not just background-color) */
html[data-theme="dark"] .fr-blog-post-body-alpha.bg--base {
  background: var(--th-bg) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Inner content card — override inline bg + purple inset box-shadow */
html[data-theme="dark"] .fr-blog-post-body-alpha__inner.brxe-container {
  background: linear-gradient(170deg, var(--th-surface) 0%, #171726 100%) !important;
  border-color: var(--th-border-mid) !important;
  box-shadow:
    0 1px 3px rgba(10, 8, 30, 0.30),
    0 4px 16px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha h1,
html[data-theme="dark"] .fr-blog-post-body-alpha h2,
html[data-theme="dark"] .fr-blog-post-body-alpha h3,
html[data-theme="dark"] .fr-blog-post-body-alpha h4 {
  color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha p,
html[data-theme="dark"] .fr-blog-post-body-alpha li {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha a:not(.toc-link):not(.x-social-share_link) {
  color: #14b5eb !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha a:not(.toc-link):not(.x-social-share_link):hover {
  color: #4dcff5 !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha blockquote {
  border-left-color: rgba(20, 181, 235, 0.4) !important;
  background: rgba(20, 181, 235, 0.05) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha code,
html[data-theme="dark"] .fr-blog-post-body-alpha pre {
  background: #1a1a28 !important;
  color: #80d7f4 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Blog hero */
html[data-theme="dark"] .fr-blog-hero-alpha {
  background-color: transparent !important;
}

html[data-theme="dark"] .fr-blog-hero-alpha__overlay {
  background-color: rgba(12, 12, 20, 0.88) !important;
}

html[data-theme="dark"] .fr-blog-hero-alpha__content-wrapper {
  background-color: rgba(12, 12, 20, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 8px 32px var(--th-shadow-tinted-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] .fr-blog-hero-alpha__heading {
  color: rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .fr-blog-meta-alpha {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.52) !important;
}

html[data-theme="dark"] .fr-blog-meta-alpha a {
  color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="dark"] .fr-blog-meta-alpha__meta-link {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ── TOC (table of contents) ── */

/* Hide the old mobile TOC (replaced by sticky bar) */
#brxe-ibirhc {
  display: none !important;
}

/* --- Desktop sidebar card --- */
.fr-blog-post-body-alpha .brxe-div:has(.brxe-post-toc) {
  background-color: #f4f3fa !important;
  border-color: rgba(42, 41, 87, 0.15) !important;
}

html[data-theme="dark"] .fr-blog-post-body-alpha .brxe-div:has(.brxe-post-toc) {
  background: linear-gradient(160deg, var(--th-surface-2) 0%, #1c1c2e 100%) !important;
  border-color: var(--th-border) !important;
  box-shadow:
    0 4px 12px var(--th-shadow-tinted),
    0 0 0 1px var(--th-border),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* --- TOC heading --- */
html[data-theme="dark"] .fr-blog-post-body-alpha .brxe-div:has(.brxe-post-toc) .brxe-heading {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* --- TOC links (use #brx-content for ID-level specificity vs inline styles) --- */
html[data-theme="dark"] #brx-content .toc-link {
  color: rgba(255, 255, 255, 0.55) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: color 0.15s, background 0.15s !important;
}

html[data-theme="dark"] #brx-content .toc-link:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] #brx-content .toc-link.is-active-link {
  color: #14b5eb !important;
  background: rgba(20, 181, 235, 0.08) !important;
}

/* --- TOC links – light mode (padding + border-radius for both themes) --- */
#brx-content .toc-link {
  padding: 6px 10px !important;
  border-radius: 6px !important;
  transition: color 0.15s, background 0.15s !important;
}

#brx-content .toc-link:hover {
  background: rgba(42, 41, 87, 0.05) !important;
}

#brx-content .toc-link.is-active-link {
  background: rgba(42, 41, 87, 0.07) !important;
  font-weight: 600 !important;
}

/* --- TOC left-border indicators --- */
html[data-theme="dark"] #brx-content .toc-list {
  border-left-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] #brx-content .toc-list-item {
  border-left-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] #brx-content .toc-list-item.is-active-li {
  border-left-color: #14b5eb !important;
}

/* --- Mobile sticky TOC bar --- */
.toc-sticky-bar {
  display: none;
}

@media (max-width: 767px) {
  .toc-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(244, 243, 250, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(42, 41, 87, 0.12);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
  }

  .toc-sticky-bar.is-visible {
    transform: translateY(0);
  }

  .toc-sticky-bar__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    gap: 12px;
  }

  .toc-sticky-bar__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(42, 41, 87, 0.50);
    flex-shrink: 0;
  }

  .toc-sticky-bar__current {
    font-size: 14px;
    font-weight: 600;
    color: rgb(42, 41, 87);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
  }

  .toc-sticky-bar__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: rgba(42, 41, 87, 0.40);
  }

  .toc-sticky-bar.is-expanded .toc-sticky-bar__chevron {
    transform: rotate(180deg);
  }

  .toc-sticky-bar__list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .toc-sticky-bar.is-expanded .toc-sticky-bar__list {
    max-height: 60vh;
    overflow-y: auto;
  }

  .toc-sticky-bar__list nav {
    padding: 0 20px 16px;
  }

  .toc-sticky-bar__list .toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid rgba(42, 41, 87, 0.10);
  }

  .toc-sticky-bar__list .toc-list-item {
    border-left: 2px solid transparent;
    margin-left: -2px;
  }

  .toc-sticky-bar__list .toc-list-item.is-active-li {
    border-left-color: #4f4f7d;
  }

  .toc-sticky-bar__list .toc-link {
    display: block;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(42, 41, 87, 0.60);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
  }

  .toc-sticky-bar__list .toc-link:hover {
    color: rgb(42, 41, 87);
    background: rgba(42, 41, 87, 0.04);
  }

  .toc-sticky-bar__list .toc-link.is-active-link {
    color: rgb(42, 41, 87);
    font-weight: 600;
    background: rgba(42, 41, 87, 0.06);
  }

  /* Dark mode mobile bar */
  html[data-theme="dark"] .toc-sticky-bar {
    background: rgba(18, 18, 28, 0.95);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3);
  }

  html[data-theme="dark"] .toc-sticky-bar__label {
    color: rgba(255, 255, 255, 0.40);
  }

  html[data-theme="dark"] .toc-sticky-bar__current {
    color: rgba(255, 255, 255, 0.90);
  }

  html[data-theme="dark"] .toc-sticky-bar__chevron {
    color: rgba(255, 255, 255, 0.35);
  }

  html[data-theme="dark"] .toc-sticky-bar__list .toc-list {
    border-left-color: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] .toc-sticky-bar__list .toc-list-item.is-active-li {
    border-left-color: #14b5eb;
  }

  html[data-theme="dark"] .toc-sticky-bar__list .toc-link {
    color: rgba(255, 255, 255, 0.50);
  }

  html[data-theme="dark"] .toc-sticky-bar__list .toc-link:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
  }

  html[data-theme="dark"] .toc-sticky-bar__list .toc-link.is-active-link {
    color: #14b5eb;
    font-weight: 600;
    background: rgba(20, 181, 235, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc-sticky-bar,
  .toc-sticky-bar__list,
  .toc-sticky-bar__chevron {
    transition: none !important;
  }
}

/* ── Speech bubble (author card connector) ── */
html[data-theme="dark"] .speech-bubble.brxe-div {
  background-color: var(--th-surface) !important;
  background: var(--th-surface) !important;
}

html[data-theme="dark"] .speech-bubble {
  background: var(--th-surface) !important;
}

/* ── Author profile card footer ── */
html[data-theme="dark"] .fr-profile-card-alpha__footer.brxe-div {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .fr-bio-card-alpha__social-icon.brxe-icon {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] .fr-bio-card-alpha__social-icon.brxe-icon:hover {
  color: #14b5eb !important;
}

/* ── Mobile: author bio + share widget cleanup ── */
@media (max-width: 767px) {
  #brxe-gncwhd {
    position: static !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 16px 0 !important;
  }

  .fr-blog-post-body-alpha__author-wrapper {
    padding: 8px 16px 0 !important;
  }

  .fr-profile-card-alpha {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 28px 24px 24px !important;
    gap: 20px !important;
    align-items: center !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
  }

  .fr-profile-card-alpha__header {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .fr-profile-card-alpha__header .brxe-image {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(20, 181, 235, 0.3) !important;
    box-shadow: 0 0 0 4px rgba(20, 181, 235, 0.08) !important;
  }

  .fr-profile-card-alpha__name {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  .fr-profile-card-alpha__role {
    font-size: 13px !important;
    opacity: 0.55 !important;
    font-style: normal !important;
  }

  .fr-profile-card-alpha__info {
    align-items: center !important;
    gap: 4px !important;
  }

  .fr-profile-card-alpha__body {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .fr-profile-card-alpha__footer {
    margin-left: 0 !important;
    width: auto !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 20px !important;
  }

  .fr-profile-card-alpha__footer .fr-bio-card-alpha__social-icon {
    opacity: 0.45;
    transition: opacity 0.15s;
  }

  .fr-profile-card-alpha__footer .fr-bio-card-alpha__social-icon:hover {
    opacity: 1;
  }

  html:not([data-theme="dark"]) .fr-profile-card-alpha {
    background: rgba(42, 41, 87, 0.03) !important;
    border-color: rgba(42, 41, 87, 0.10) !important;
  }

  html:not([data-theme="dark"]) .fr-profile-card-alpha__header .brxe-image {
    border-color: rgba(42, 41, 87, 0.15) !important;
    box-shadow: 0 0 0 4px rgba(42, 41, 87, 0.05) !important;
  }

  .fr-blog-post-body-alpha {
    padding-bottom: 24px !important;
  }
}

/* Blog post body wrapper divs that carry explicit light backgrounds */
html[data-theme="dark"] .fr-blog-post-body-alpha .brxe-div[style*="background"] {
  background-color: var(--th-surface-2) !important;
}


/* ================================================================
   17. FOOTER
   ================================================================ */

/* The footer is already dark-themed on the main site.
   In dark mode, just ensure consistency. */
html[data-theme="dark"] #brx-footer,
html[data-theme="dark"] .footer {
  /* Footer keeps its dark treatment */
  opacity: 1;
}

html[data-theme="dark"] .footer__open-time-span {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Newsletter form in footer */
html[data-theme="dark"] .fluentform input,
html[data-theme="dark"] .fluentform textarea {
  background-color: #1a1a28 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="dark"] .fluentform input::placeholder,
html[data-theme="dark"] .fluentform textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}


/* ================================================================
   18. FORM INPUTS (Contact Form, etc.)
   ================================================================ */

html[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #1a1a28 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: rgba(20, 181, 235, 0.45) !important;
  outline-color: rgba(20, 181, 235, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(20, 181, 235, 0.12) !important;
}

html[data-theme="dark"] label {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Contact form wrapper */
html[data-theme="dark"] .contact-form {
  background: linear-gradient(155deg, #15151f 0%, #171728 100%) !important;
  box-shadow:
    0 6px 24px var(--th-shadow-tinted-lg),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Contact form submit button */
html[data-theme="dark"] .btn-submit {
  background-color: #1a1a28 !important;
  color: rgba(255, 255, 255, 0.87) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .btn-submit:hover {
  background-color: rgba(20, 181, 235, 0.12) !important;
  border-color: rgba(20, 181, 235, 0.35) !important;
  color: #14b5eb !important;
}


/* ================================================================
   19. BREADCRUMBS & META
   ================================================================ */

html[data-theme="dark"] .fr-breadcrumbs-alpha,
html[data-theme="dark"] [class*="breadcrumb"] {
  color: rgba(255, 255, 255, 0.48) !important;
}

html[data-theme="dark"] [class*="breadcrumb"] a {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] [class*="breadcrumb"] a:hover {
  color: #14b5eb !important;
}


/* ================================================================
   20. BACK TO TOP BUTTON
   ================================================================ */

html[data-theme="dark"] .back-top {
  background-color: #1a1a28 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .back-top:hover {
  background-color: rgba(20, 181, 235, 0.12) !important;
  border-color: rgba(20, 181, 235, 0.25) !important;
}

html[data-theme="dark"] .back-top svg,
html[data-theme="dark"] .back-top img {
  filter: brightness(2) !important;
}


/* ================================================================
   21. PROCESS PAGE
   ================================================================
   Pricing-related dark-mode rules live in Section 13 above (phase
   marker pills and step badges were consolidated there to avoid
   cascade conflicts). This section is intentionally empty now and
   reserved for any non-pricing Process-page tweaks.
   ================================================================ */


/* ================================================================
   22. OUR MISSION PAGE
   ================================================================ */

/* Callout/quote inner box with light grey bg */
html[data-theme="dark"] .fr-content-section-mike__callout-inner {
  background: linear-gradient(155deg, #1a1a28 0%, #1c1c30 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 2px 8px var(--th-shadow-tinted),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}


/* ================================================================
   23. SCROLL PROGRESS BAR
   ================================================================ */

html[data-theme="dark"] .scroll-progress {
  background: linear-gradient(90deg, #14b5eb, #7c5cfc) !important;
}


/* ================================================================
   22. LOGO CSS FILTER
   ================================================================ */

/* In light mode the logo renders in original colors.
   In dark mode keep the full-color logo but ensure
   the SVG white-background logo doesn't turn dark. */
html[data-theme="dark"] .css-filter.bricks-site-logo {
  filter: none !important;
}


/* ================================================================
   23. THEME SWITCH (sliding sun/moon toggle)
   ================================================================ */

.theme-switch {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch:focus-visible {
  outline: 2px solid #14b5eb;
  outline-offset: 3px;
  border-radius: 999px;
}

/* ── Track ── */
.theme-switch__track {
  display: flex;
  align-items: center;
  width: 56px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0c850, #e8a830);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.08);
  transition: background 350ms ease, border-color 350ms ease, box-shadow 350ms ease !important;
  position: relative;
}

html[data-theme="dark"] .theme-switch__track {
  background: linear-gradient(135deg, #1a1a3e, #0e1025);
  border-color: rgba(100, 120, 220, 0.25);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(100, 120, 220, 0.10);
}

/* ── Thumb ── */
.theme-switch__thumb {
  position: absolute;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease, box-shadow 300ms ease !important;
}

html[data-theme="dark"] .theme-switch__thumb {
  left: calc(100% - 25px);
  background: #2a2a4a;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 6px rgba(100, 120, 220, 0.15);
}

/* ── Icons inside the thumb ── */
.theme-switch__icon {
  width: 14px;
  height: 14px;
  position: absolute;
  transition: opacity 250ms ease, transform 250ms ease !important;
}

.theme-switch__sun {
  color: #e8a830;
}

.theme-switch__moon {
  color: #a0b4f0;
}

html[data-theme="light"] .theme-switch__moon,
html[data-theme="dark"] .theme-switch__sun {
  opacity: 0;
  transform: scale(0.4) rotate(45deg);
}

html[data-theme="light"] .theme-switch__sun,
html[data-theme="dark"] .theme-switch__moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ── Hover ── */
.theme-switch:hover .theme-switch__track {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .theme-switch:hover .theme-switch__track {
  border-color: rgba(100, 120, 220, 0.40);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(100, 120, 220, 0.20);
}

/* ── Header actions (toggle + contact pill) ── */
.header-actions {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  margin-right: auto;
  position: relative;
  z-index: 50;
}

@media (min-width: 1080px) {
  .header-actions {
    display: flex;
  }
  .header__menu.brxe-nav-menu:has(+ .header-actions) {
    margin-right: 0;
  }
}

/* ── Header placement ── */
.theme-switch--header {
  display: inline-flex !important;
  align-self: center;
  flex-shrink: 0;
}

/* ── Contact pill (matches homepage #brxe-thrlhn) ── */
.header-contact {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 13.5px);
  padding: 0.5em 1em 0.5em 0.5em;
  background-color: #fafaff;
  border-radius: var(--radius-l, 15px);
  border: 1px solid transparent;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.08);
  color: var(--black, #1a1a1a);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  align-self: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-contact:hover {
  background-color: #f0f0fa;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.10);
}

.header-contact__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.header-contact__number {
  font-size: inherit;
  font-weight: inherit;
}

/* ── Contact pill dark mode ── */
html[data-theme="dark"] .header-contact {
  background-color: #1e1e32;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] .header-contact:hover {
  background-color: #252540;
  border-color: rgba(255, 255, 255, 0.22);
}

/* ── Mobile overlay ── */
.theme-switch__mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(80, 79, 126, 0.10);
}

.theme-switch__mobile-label {
  font-size: max(0.9rem, 12px);
  color: inherit;
  opacity: 0.6;
}


/* ================================================================
   24. MISC COMPONENTS
   ================================================================ */

/* Action buttons — cream bg from Bricks becomes brand cyan in dark mode */
html[data-theme="dark"] .btn--action {
  background: linear-gradient(135deg, #14b5eb, #0e9cd0) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow:
    0 2px 12px rgba(20, 181, 235, 0.30),
    0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .btn--action:hover {
  background: linear-gradient(135deg, #1dc4ff, #14b5eb) !important;
  box-shadow:
    0 4px 20px rgba(20, 181, 235, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.20) !important;
}

/* Ghost / outline buttons in dark mode */
html[data-theme="dark"] .btn--ghost,
html[data-theme="dark"] a.btn--ghost {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] .btn--ghost:hover,
html[data-theme="dark"] a.btn--ghost:hover {
  color: #ffffff !important;
  border-color: rgba(20, 181, 235, 0.50) !important;
  background-color: rgba(20, 181, 235, 0.08) !important;
}

/* Divider wave SVGs that use dark fill and become invisible on dark bg */
html[data-theme="dark"] .brxe-section > svg[class*="divider"],
html[data-theme="dark"] .section-divider svg,
html[data-theme="dark"] svg.wave-divider {
  opacity: 0.15 !important;
}

/* Cookie / policy pages */
html[data-theme="dark"] #policy h2,
html[data-theme="dark"] #policy h3,
html[data-theme="dark"] #policy p,
html[data-theme="dark"] #policy li {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Image overlays / captions */
html[data-theme="dark"] .brxe-image figcaption {
  color: rgba(255, 255, 255, 0.52) !important;
}

/* Lottie containers */
html[data-theme="dark"] .brxe-xlottie {
  opacity: 0.9;
}

/* Hero social proof / trust strip */
html[data-theme="dark"] .hero__social-proof {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Section eyebrow labels */
html[data-theme="dark"] .section-eyebrow,
html[data-theme="dark"] [class*="eyebrow"] {
  color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="dark"] .case-card__heading--eyebrow {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Horizontal rules / decorative borders */
html[data-theme="dark"] .solutions-divider {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Fluent form image preview */
html[data-theme="dark"] .fluentform img {
  background-color: #1a1a28 !important;
}

/* Skip links */
html[data-theme="dark"] .skip-link {
  background: #15151f !important;
  color: rgba(255, 255, 255, 0.87) !important;
}


/* ================================================================
   25. CASE STUDY PAGE (already dark — keep as-is)
   ================================================================ */

/* The pampered paws case study has its own dark CSS variables.
   When in light mode, ensure it still reads well.
   When in dark mode, it looks native. */

.case-study-page [data-theme="light"] {
  /* Intentionally blank — the case study page keeps its dark aesthetic
     regardless of theme preference */
}


/* ================================================================
   26. RENDER PERFORMANCE — content-visibility
   ================================================================ */
#brx-content > .brxe-section:not(.hero-section),
#brx-footer > .brxe-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

.solutions-section   { contain-intrinsic-size: auto 2800px; }
#recent-projects     { contain-intrinsic-size: auto 2300px; }
#template-shop       { contain-intrinsic-size: auto 3500px; }
.fr-article-section-hotel { contain-intrinsic-size: auto 1900px; }


/* ================================================================
   27. MOBILE TOUCH TARGETS & READABILITY
   ================================================================ */
@media (max-width: 767px) {
  .x-notification_close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .case-card__link,
  .fr-article-card-hotel__read-more,
  .x-dynamic-lightbox_link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }

  .footer__nav-link,
  .footer-email {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .privacy-policy,
  .cookie-policy,
  .terms-of-service {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .hero__trust-label {
    font-size: 12px !important;
  }

  .hero__eyebrow-kicker {
    font-size: 12px;
  }
}


/* ================================================================
   28. ACCESSIBILITY
   ================================================================ */

/* Reduced motion — disable transition on theme switch */
@media (max-width: 478px) {
  .footer-terms.brxe-text,
  .footer-terms.brxe-text-basic,
  .footer-terms.brxe-text p {
    line-height: 1.5;
  }

  .footer-terms.brxe-text a {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
  }

  .theme-toggle {
    transition: none !important;
  }

  .theme-toggle__icon {
    transition: none !important;
  }
}