:root {
  --lux-page-bg: #fafbfe;
  --lux-text: rgba(0, 0, 0, 0.84);
  --lux-muted: rgba(0, 0, 0, 0.56);
  --lux-panel-bg: rgba(255, 255, 255, 0.56);
  --lux-panel-border: rgba(7, 18, 35, 0.13);
  --lux-panel-highlight: rgba(255, 255, 255, 0.72);
  --lux-panel-depth: rgba(7, 18, 35, 0.045);
  --lux-panel-inner-line: rgba(255, 255, 255, 0.82);
  --lux-panel-shadow: 0 28px 100px rgba(32, 52, 84, 0.14), 0 1px 2px rgba(7, 18, 35, 0.08);
  --lux-control-bg: rgba(255, 255, 255, 0.62);
  --lux-control-border: rgba(0, 0, 0, 0.14);
  --lux-control-active-bg: rgba(7, 10, 18, 0.9);
  --lux-control-active-text: rgba(255, 255, 255, 0.94);
  --lux-badge-bg: rgba(255, 255, 255, 0.74);
  --lux-glow-core: rgba(28, 124, 255, 0.34);
  --lux-glow-soft: rgba(25, 107, 255, 0.18);
  --lux-glow-wide: rgba(36, 120, 255, 0.095);
  --lux-accent: rgba(22, 105, 224, 0.95);
  --lux-accent-ink: #fff;
  --lux-green: rgba(22, 163, 74, 0.16);
  --lux-amber: rgba(217, 119, 6, 0.16);
  --lux-red: rgba(220, 38, 38, 0.15);
  --lux-blue: rgba(37, 99, 235, 0.18);

  /* Preserve Bento geometry and change only its presentation tokens. */
  --bg: var(--lux-page-bg);
  --surface: var(--lux-panel-bg);
  --surface-2: var(--lux-control-bg);
  --nav-active: var(--lux-control-active-bg);
  --text: var(--lux-text);
  --muted: var(--lux-muted);
  --line: var(--lux-panel-border);
  --accent: var(--lux-accent);
  --accent-ink: var(--lux-accent-ink);
  --dark: rgba(7, 10, 18, 0.9);
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  --lux-page-bg: #050607;
  --lux-text: rgba(255, 255, 255, 0.88);
  --lux-muted: rgba(255, 255, 255, 0.58);
  --lux-panel-bg: rgba(255, 255, 255, 0.07);
  --lux-panel-border: rgba(255, 255, 255, 0.16);
  --lux-panel-highlight: rgba(255, 255, 255, 0.07);
  --lux-panel-depth: rgba(255, 255, 255, 0.02);
  --lux-panel-inner-line: rgba(255, 255, 255, 0.08);
  --lux-panel-shadow: 0 28px 100px rgba(0, 0, 0, 0.42);
  --lux-control-bg: rgba(255, 255, 255, 0.08);
  --lux-control-border: rgba(255, 255, 255, 0.18);
  --lux-control-active-bg: rgba(255, 255, 255, 0.9);
  --lux-control-active-text: rgba(8, 12, 18, 0.95);
  --lux-badge-bg: rgba(255, 255, 255, 0.08);
  --lux-glow-core: rgba(118, 184, 255, 0.24);
  --lux-glow-soft: rgba(78, 142, 255, 0.125);
  --lux-glow-wide: rgba(91, 164, 255, 0.052);
  --lux-accent: rgba(72, 153, 255, 0.95);
  --lux-green: rgba(54, 211, 153, 0.14);
  --lux-amber: rgba(255, 199, 89, 0.14);
  --lux-red: rgba(255, 107, 107, 0.14);
  --lux-blue: rgba(52, 143, 255, 0.16);
  --dark: rgba(7, 10, 18, 0.9);
}

* {
  font-family: var(--font);
}

body.bento-lux-site {
  background-color: var(--lux-page-bg);
  background-image: radial-gradient(ellipse 75% 48% at 50% -10%, var(--lux-glow-core), var(--lux-glow-soft) 34%, var(--lux-glow-wide) 64%, transparent 82%);
  background-attachment: fixed;
  color: var(--lux-text);
  letter-spacing: 0.012em;
}

body.bento-lux-site::before {
  display: none;
}

.site-header,
.mobile-menu,
.customizer,
.purchase-dropdown-menu,
.language-switcher-menu,
.nav-dropdown-menu,
.modal-content,
.popup-content {
  background:
    linear-gradient(145deg, var(--lux-panel-highlight), transparent 42%),
    color-mix(in srgb, var(--lux-panel-bg) 92%, transparent);
  border-color: var(--lux-panel-border);
  box-shadow: 0 14px 45px color-mix(in srgb, black 18%, transparent), inset 0 1px 0 var(--lux-panel-inner-line);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.site-header {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lux-panel-highlight) 72%, transparent), transparent 42%),
    color-mix(in srgb, var(--lux-panel-bg) 78%, transparent);
}

.card,
.is-style-bento-card,
.bentobox-component,
.entry-builder-main .bentobox-flexible-split,
.entry-builder-main .entry-rich-text,
.wp-block-group.is-style-bento-card,
.wp-block-column.is-style-bento-card {
  background: var(--lux-panel-bg);
  border-color: var(--lux-panel-border);
  box-shadow: var(--lux-panel-shadow), inset 0 1px 0 var(--lux-panel-inner-line);
  -webkit-backdrop-filter: blur(34px) saturate(145%);
  backdrop-filter: blur(34px) saturate(145%);
}

.tone-sage,
.is-style-tone-sage {
  --lux-tone: var(--lux-green);
}

.tone-butter,
.is-style-tone-butter {
  --lux-tone: var(--lux-amber);
}

.tone-peach,
.tone-rose,
.is-style-tone-peach,
.is-style-tone-rose {
  --lux-tone: var(--lux-red);
}

.tone-lilac,
.tone-blue,
.is-style-tone-lilac,
.is-style-tone-blue {
  --lux-tone: var(--lux-blue);
}

.tone-sage,
.tone-butter,
.tone-peach,
.tone-lilac,
.tone-blue,
.tone-rose,
.is-style-tone-sage,
.is-style-tone-butter,
.is-style-tone-peach,
.is-style-tone-lilac,
.is-style-tone-blue,
.is-style-tone-rose {
  background:
    linear-gradient(145deg, var(--lux-panel-highlight), transparent 42%),
    linear-gradient(135deg, var(--lux-tone), transparent 74%),
    var(--lux-panel-bg);
  background-clip: padding-box;
  border-color: var(--lux-panel-border);
  color: var(--lux-text);
}

[data-theme="dark"] body.bento-lux-site :is(
  .tone-sage,
  .tone-butter,
  .tone-peach,
  .tone-lilac,
  .tone-blue,
  .tone-rose,
  .is-style-tone-sage,
  .is-style-tone-butter,
  .is-style-tone-peach,
  .is-style-tone-lilac,
  .is-style-tone-blue,
  .is-style-tone-rose
) {
  background:
    linear-gradient(145deg, var(--lux-panel-highlight), transparent 42%),
    linear-gradient(135deg, var(--lux-tone), transparent 74%),
    var(--lux-panel-bg);
  background-clip: padding-box;
  border-color: var(--lux-panel-border);
  box-shadow: var(--lux-panel-shadow), inset 0 0 0 1px var(--lux-panel-inner-line);
  color: var(--lux-text);
}

/* Replace Bento.'s warm cream literals with Lux's neutral white hierarchy. */
[data-theme="dark"] body.bento-lux-site :is(
  .tone-sage,
  .tone-butter,
  .tone-peach,
  .tone-lilac,
  .tone-blue,
  .tone-rose,
  .is-style-tone-sage,
  .is-style-tone-butter,
  .is-style-tone-peach,
  .is-style-tone-lilac,
  .is-style-tone-blue,
  .is-style-tone-rose
) :is(h1, h2, h3, strong, blockquote, .text-link) {
  color: var(--lux-text);
}

[data-theme="dark"] body.bento-lux-site :is(
  .tone-sage,
  .tone-butter,
  .tone-peach,
  .tone-lilac,
  .tone-blue,
  .tone-rose,
  .is-style-tone-sage,
  .is-style-tone-butter,
  .is-style-tone-peach,
  .is-style-tone-lilac,
  .is-style-tone-blue,
  .is-style-tone-rose
) :is(p, small, .subtle, .card-caption span, .eyebrow, .mini-label, .project-text span, .metric span) {
  color: var(--lux-muted);
}

[data-theme="dark"] body.bento-lux-site .project h3,
[data-theme="dark"] body.bento-lux-site .metric strong,
[data-theme="dark"] body.bento-lux-site :is(.featured-product, .featured-product > div, .featured-product strong),
[data-theme="dark"] body.bento-lux-site .popup-demo-copy h3 {
  color: var(--lux-text);
}

[data-theme="dark"] body.bento-lux-site .project p,
[data-theme="dark"] body.bento-lux-site .project .project-text > span:not(.entry-label),
[data-theme="dark"] body.bento-lux-site .featured-product small {
  color: var(--lux-muted);
}

.tone-dark,
.is-style-tone-dark {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 42%),
    rgba(7, 10, 18, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
}

.tab-nav,
.header-socials,
.mini-tabs,
.tab-list,
.bentobox-tabs-list,
.bentobox-content-tabs-list,
.bentobox-product-dots,
.carousel-dots {
  background: var(--lux-control-bg);
  border-color: var(--lux-control-border);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.tab-nav a.active,
.mini-tabs button.active,
.filters button.active,
.vertical-tabs button.active,
[role="tab"][aria-selected="true"] {
  background: var(--lux-control-active-bg);
  color: var(--lux-control-active-text);
  box-shadow: 0 4px 14px color-mix(in srgb, black 14%, transparent);
}

.button,
.icon-btn,
.wp-element-button,
.wp-block-button__link,
button,
select,
input,
textarea {
  border-color: var(--lux-control-border);
}

.button.secondary,
.icon-btn,
.wp-element-button,
.wp-block-button__link,
select,
input,
textarea {
  background: var(--lux-control-bg);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}

.button.primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, white 14%, transparent), transparent 70%),
    var(--lux-accent);
  border-color: var(--lux-accent);
  color: var(--lux-accent-ink);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--lux-glow-core) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.badge,
.pill,
.mini-label-pill,
.bentobox-badge {
  --lux-badge-tone: var(--badge-color, var(--lux-accent));
  background: color-mix(in srgb, var(--lux-badge-tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--lux-badge-tone) 52%, var(--lux-panel-border));
  border-radius: var(--badge-radius, 10px);
  color: color-mix(in srgb, var(--lux-badge-tone) 38%, var(--lux-text));
  font-size: 0.875rem;
  font-weight: 550;
  min-height: 32px;
  padding: 7px 12px;
  box-shadow: 0 10px 32px color-mix(in srgb, black 12%, transparent);
  text-shadow: none;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.badge svg,
.bentobox-badge svg {
  height: 16px;
  width: 16px;
}

/* Intro badges always sit over photography, so their ink stays white in both modes. */
body.bento-lux-site .bentobox-entry-intro .bentobox-entry-intro-badges :is(.badge, .bentobox-badge) {
  color: #fff;
}

.mini-browser,
.form-preview,
.component-preview,
.bentobox-product,
.pricing-tier,
.testimonial-item {
  background: color-mix(in srgb, var(--lux-panel-bg) 72%, transparent);
  border-color: var(--lux-panel-border);
}

/* Bento.Lux interaction and component refinements. */
body.bento-lux-site :is(h1, h2, h3) {
  letter-spacing: -0.015em;
}

body.bento-lux-site :is(button, .button, input, select, textarea) {
  letter-spacing: 0.008em;
}

.bento-lux-brand-icon {
  display: block;
  height: 24px;
  object-fit: contain;
  width: 24px;
}

.footer-feature .bento-lux-brand-icon {
  height: 28px;
  width: 28px;
}

[data-theme="dark"] .bento-lux-brand-icon {
  filter: invert(1);
}

body.bento-lux-site .card:hover {
  box-shadow: var(--lux-panel-shadow), inset 0 1px 0 var(--lux-panel-inner-line);
  filter: none;
  transform: none;
}

body.bento-lux-site .hero-main.tone-butter {
  background: var(--lux-panel-bg);
  border-color: var(--lux-panel-border);
}

[data-theme="dark"] body.bento-lux-site .button.primary {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 #fff;
  color: rgba(8, 12, 18, 0.95);
}

[data-theme="dark"] body.bento-lux-site .hero-main .button.secondary {
  background: var(--lux-control-bg);
  border-color: var(--lux-control-border);
  color: var(--lux-text);
}

[data-theme="dark"] body.bento-lux-site .metric {
  border-color: var(--lux-panel-border);
}

body.bento-lux-site :is(.carousel-dots, .bentobox-carousel-dots) {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.bento-lux-site :is(
  .full-bleed-carousel .carousel-footer,
  .full-bleed-carousel .carousel-track figcaption,
  .bentobox-image-carousel.is-layout-full .bentobox-carousel-navigation,
  .bentobox-image-carousel.is-layout-full .bentobox-carousel-slide figcaption
) {
  background: transparent !important;
  background-image: none !important;
}

[data-theme="dark"] body.bento-lux-site :is(.compare-line span, .bentobox-comparison-line span) {
  background: #171b22;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}

[data-theme="dark"] body.bento-lux-site .accordion-card {
  background: var(--lux-panel-bg);
  border-color: var(--lux-panel-border);
}

body.bento-lux-site .accordion-card details {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.bento-lux-site .accordion-card .accordion-content p {
  color: var(--lux-muted);
}

body.bento-lux-site .element-search input {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.bento-lux-site .donut::before {
  background: color-mix(in srgb, var(--lux-page-bg) 88%, var(--lux-panel-bg));
}

[data-theme="dark"] body.bento-lux-site .map-embed iframe {
  filter: invert(0.88) hue-rotate(180deg) saturate(0.68) brightness(0.82) contrast(1.08);
}

[data-theme="dark"] body.bento-lux-site .map-location-card {
  background: rgba(12, 15, 20, 0.9);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] body.bento-lux-site .map-location-card small {
  color: rgba(255, 255, 255, 0.68);
}

[data-theme="dark"] body.bento-lux-site :is(.badge, .pill, .mini-label-pill, .bentobox-badge) {
  color: color-mix(in srgb, var(--lux-badge-tone) 34%, white);
  font-size: 0.875rem;
  font-weight: 550;
  min-height: 32px;
  padding: 7px 12px;
}

/* Mini badges inherit the active Lux badge treatment and only reduce its dimensions. */
body.bento-lux-site .badge.mini-badge,
[data-theme="dark"] body.bento-lux-site .badge.mini-badge {
  font-size: 0.8125rem;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px;
}

body.bento-lux-site .badge.mini-badge :is(i, svg) {
  flex: 0 0 13px;
  height: 13px;
  width: 13px;
}

/* A thinner, cleaner radial track with constrained center copy. */
body.bento-lux-site .donut {
  background: conic-gradient(
    var(--accent) 0 calc(var(--value) * 1%),
    var(--lux-control-bg) calc(var(--value) * 1%) 100%
  );
  box-shadow: inset 0 0 0 1px var(--lux-panel-border);
  width: 152px;
}

body.bento-lux-site .donut::before {
  box-shadow: 0 0 0 1px var(--lux-panel-border);
  width: 122px;
}

body.bento-lux-site .donut span {
  gap: 2px;
  line-height: 1.1;
  width: 96px;
}

body.bento-lux-site .donut strong {
  font-size: 1.6rem;
}

body.bento-lux-site .donut small {
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: normal;
}

/* Image-overlay badges need a stable contrast surface independent of the photo. */
body.bento-lux-site .product-grid .product-card:nth-child(1) {
  --lux-product-badge-tone: #74b7ff;
}

body.bento-lux-site .product-grid .product-card:nth-child(2) {
  --lux-product-badge-tone: #ff7186;
}

body.bento-lux-site .product-grid .product-card:nth-child(4) {
  --lux-product-badge-tone: #79d4ff;
}

[data-theme="dark"] body.bento-lux-site .product-badge {
  background: color-mix(in srgb, var(--lux-product-badge-tone, var(--lux-accent)) 20%, rgba(7, 10, 18, 0.9));
  border-color: color-mix(in srgb, var(--lux-product-badge-tone, var(--lux-accent)) 72%, rgba(255, 255, 255, 0.26));
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.32);
  color: color-mix(in srgb, var(--lux-product-badge-tone, var(--lux-accent)) 22%, white);
  font-size: 0.875rem;
  font-weight: 550;
}

[data-theme="dark"] body.bento-lux-site .product-actions button {
  background: rgba(7, 10, 18, 0.78);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.alt-section,
.element-library,
.site-footer {
  border-color: var(--lux-panel-border);
}

/*
 * The immersive intro owns its boundary in Bento.Lux: at full width its
 * off-canvas outline reads as a single bottom rule, then becomes the complete
 * rounded outline as the image contracts. Do not draw a second section rule
 * below it while scrolling.
 */
body.bento-lux-site .entry-builder-main
  .wp-block-post-content > .bentobox-entry-intro-section:first-child::after {
  content: none;
}

body.bento-lux-site .entry-builder-main
  .wp-block-post-content > .bentobox-entry-intro-section:first-child
  > .bentobox-entry-intro {
  border-color: var(--lux-panel-border);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--lux-accent);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --lux-panel-bg: rgba(244, 247, 252, 0.94);
    --lux-control-bg: rgba(244, 247, 252, 0.96);
  }

  [data-theme="dark"] {
    --lux-panel-bg: rgba(24, 28, 36, 0.96);
    --lux-control-bg: rgba(30, 34, 43, 0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bento-lux-site {
    background-attachment: scroll;
  }
}

/* Bento.Lux navigation and control refinements. */
body.bento-lux-site {
  --icon-stroke: 2.5;
}

body.bento-lux-site .hugeicon {
  stroke-width: 2.5 !important;
}

body.bento-lux-site :is(
  .button,
  .wp-element-button,
  .wp-block-button__link,
  .purchase-dropdown-toggle
) {
  font-weight: 650;
}

body.bento-lux-site :is(
  .tab-nav a.active,
  .tab-nav > .nav-subpage.active,
  .nav-dropdown:has(.nav-dropdown-menu a.active) .nav-dropdown-toggle
) {
  background: var(--lux-control-active-bg) !important;
  color: var(--lux-control-active-text) !important;
}

body.bento-lux-site :is(
  .tab-nav a:not(.active),
  .nav-dropdown:not(:has(.nav-dropdown-menu a.active)) .nav-dropdown-toggle,
  .mini-tabs button:not(.active),
  .filters button:not(.active),
  .vertical-tabs button:not(.active),
  [role="tab"][aria-selected="false"]
) {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] body.bento-lux-site :is(
  .tab-nav a:not(.active),
  .nav-dropdown:not(:has(.nav-dropdown-menu a.active)) .nav-dropdown-toggle,
  .mini-tabs button:not(.active),
  .filters button:not(.active),
  .vertical-tabs button:not(.active),
  [role="tab"][aria-selected="false"]
) {
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
}

body.bento-lux-site :is(
  .tab-nav a,
  .nav-dropdown-toggle,
  .language-switcher-toggle,
  .nav-dropdown-menu a,
  .language-switcher-menu a
) {
  font-size: 1rem;
  font-weight: 600;
}

body.bento-lux-site :is(
  .nav-dropdown-toggle,
  .language-switcher-toggle
) {
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

body.bento-lux-site .tab-nav > .nav-dropdown > .nav-dropdown-toggle,
body.bento-lux-site .tab-nav > a.nav-subpage {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 8px 10px;
}

@media (min-width: 1051px) and (max-width: 1200px) {
  body.bento-lux-site .header-tools > .tab-nav {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
  }
}

body.bento-lux-site :is(
  .nav-dropdown-toggle,
  .language-switcher-toggle
):hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

body.bento-lux-site :is(
  .nav-dropdown-toggle,
  .language-switcher-toggle
):active {
  transform: translateY(0);
}

body.bento-lux-site :is(
  .tab-nav a:not(.active),
  .nav-dropdown:not(:has(.nav-dropdown-menu a.active)) .nav-dropdown-toggle,
  .language-switcher-toggle,
  .header-socials .social-btn
) {
  color: color-mix(in srgb, var(--lux-text) 96%, transparent);
}

[data-theme="dark"] body.bento-lux-site :is(
  .tab-nav a:not(.active),
  .language-switcher-toggle,
  .header-socials .social-btn
) {
  color: rgba(255, 255, 255, 0.86);
}

body.bento-lux-site :is(
  .nav-dropdown-menu,
  .language-switcher-menu
) {
  background-color: rgba(248, 250, 254, 0.78);
  background-image:
    radial-gradient(ellipse 90% 70% at 12% -8%, var(--lux-glow-soft), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--lux-panel-highlight) 72%, transparent), transparent 42%);
  background-clip: padding-box;
  border-color: var(--lux-panel-border);
  box-shadow: 0 14px 45px color-mix(in srgb, black 22%, transparent), inset 0 1px 0 var(--lux-panel-inner-line);
  -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
  backdrop-filter: blur(40px) saturate(150%) !important;
}

/*
 * Backdrop filters cannot sample through an already blurred ancestor. Keep a
 * matching header-glass layer behind the header while a desktop menu is open,
 * then release the header and tab-bar backdrop roots so the dropdown's own
 * 40px filter can genuinely blur the page below it.
 */
@media (min-width: 1051px) {
  body.bento-lux-site.lux-desktop-dropdown-open::before {
    content: "";
    display: block;
    position: fixed;
    z-index: 49;
    top: var(--lux-header-glass-top, 0);
    right: 0;
    left: 0;
    height: var(--lux-header-glass-height, 91px);
    pointer-events: none;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--lux-panel-highlight) 72%, transparent), transparent 42%),
      color-mix(in srgb, var(--lux-panel-bg) 78%, transparent);
    border-bottom: 1px solid var(--lux-panel-border);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
  }

  body.bento-lux-site.lux-desktop-dropdown-open .site-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition-property: background-color, border-bottom-color, padding-top;
  }

  body.bento-lux-site.lux-desktop-dropdown-open .tab-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

[data-theme="dark"] body.bento-lux-site :is(
  .nav-dropdown-menu,
  .language-switcher-menu
) {
  background-color: rgba(15, 19, 27, 0.74);
  background-image:
    radial-gradient(ellipse 90% 70% at 12% -8%, var(--lux-glow-soft), transparent 72%),
    linear-gradient(145deg, var(--lux-panel-highlight), transparent 42%);
}

@media (min-width: 1051px) {
  [data-theme="light"] body.bento-lux-site :is(
    .nav-dropdown-menu,
    .language-switcher-menu
  ) a:is(:hover, :focus-visible) {
    background: rgba(7, 10, 18, 0.08) !important;
    color: var(--lux-text) !important;
    box-shadow: none;
  }
}

/* Keep mobile navigation contrast and typography aligned with desktop. */
body.bento-lux-site :is(
  .mobile-page-links summary,
  .mobile-page-links a,
  .mobile-menu nav a,
  .language-switcher-mobile .language-switcher-toggle,
  .language-switcher-mobile .language-switcher-menu a
) {
  font-weight: 600;
}

[data-theme="dark"] body.bento-lux-site :is(
  .mobile-page-links summary,
  .mobile-page-links a:not(.active),
  .mobile-menu nav a:not(.active),
  .language-switcher-mobile .language-switcher-toggle,
  .language-switcher-mobile .language-switcher-menu a:not(.active),
  .mobile-socials .icon-btn
) {
  color: rgba(255, 255, 255, 0.86);
}

[data-theme="dark"] body.bento-lux-site :is(
  .mobile-page-links > a.active,
  .mobile-page-links details.is-current-section:not(.is-expanded) > summary,
  .mobile-page-links details.is-expanded nav a.active
) {
  background: var(--lux-control-active-bg) !important;
  color: var(--lux-control-active-text) !important;
}

[data-theme="dark"] body.bento-lux-site .mobile-page-links details.is-expanded nav {
  background: transparent;
}

body.bento-lux-site :is(
  .mobile-page-links > a > svg,
  .mobile-page-links > details > summary svg,
  .mobile-page-links > details nav a svg
) {
  flex: 0 0 19px;
  height: 19px;
  width: 19px;
}

/*
 * Keep the page-group trigger geometrically identical in both states.
 * The menu script toggles .is-expanded before revealing the links, so any
 * state-only margin or radius here causes the trigger to visibly snap.
 */
body.bento-lux-site .mobile-page-links details > summary,
body.bento-lux-site .mobile-page-links details nav a,
body.bento-lux-site .mobile-page-links > a {
  box-sizing: border-box;
  border-radius: 14px;
  min-height: 50px;
}

body.bento-lux-site .mobile-page-links details > summary {
  margin: 0;
}

/*
 * The parent animation drives the nav's height to zero. Padding on that
 * animated element survives at height: 0 and disappears only when the
 * details element closes, producing a final one-frame jump. Put the inset
 * spacing on the grid items instead so it is clipped by the animated nav.
 */
body.bento-lux-site .mobile-page-links details nav {
  padding: 0 !important;
}

body.bento-lux-site .mobile-page-links details nav a {
  margin-inline: 7px;
}

body.bento-lux-site .mobile-page-links details nav a:last-child {
  margin-bottom: 7px;
}

/*
 * The expanded group already provides the menu surface. Avoid stacking a
 * second translucent control layer behind its summary in either colour mode.
 */
body.bento-lux-site .mobile-page-links details.is-expanded > summary {
  background: transparent !important;
  box-shadow: none;
}

/*
 * Mode-specific parent rules carry more specificity than the shared rule
 * defaults. Match that specificity so expanded controls render exactly like
 * idle mobile buttons instead of retaining page-panel or desktop-menu glass.
 */
:is([data-theme="light"], [data-theme="dark"]) body.bento-lux-site .mobile-page-links details.is-expanded,
:is([data-theme="light"], [data-theme="dark"]) body.bento-lux-site .mobile-page-links details.is-current-section.is-expanded,
:is([data-theme="light"], [data-theme="dark"]) body.bento-lux-site .language-switcher-mobile.open .language-switcher-toggle,
:is([data-theme="light"], [data-theme="dark"]) body.bento-lux-site .language-switcher-mobile.open .language-switcher-menu {
  background: var(--lux-control-bg) !important;
  background-image: none !important;
  border-color: var(--lux-control-border);
  box-shadow: none;
}

:is([data-theme="light"], [data-theme="dark"]) body.bento-lux-site .language-switcher-mobile.open .language-switcher-menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/*
 * .is-expanded is removed at the beginning of the close animation while the
 * details content remains visible. Keep the current-page wrapper on the idle
 * control surface so the old dark gradient cannot flash through mid-collapse.
 */
[data-theme="dark"] body.bento-lux-site .mobile-page-links details.is-current-section {
  background: var(--lux-control-bg) !important;
  background-image: none !important;
  border-color: var(--lux-control-border);
  box-shadow: none;
}

/*
 * Fully remove the mobile menu's backdrop-filter compositing layer when its
 * close fade finishes. Opacity alone can leave the blur visible for a frame
 * or two on Chromium, even though the panel itself has disappeared.
 */
@media (max-width: 1050px) {
  body.bento-lux-site .mobile-menu {
    visibility: hidden;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0s linear 0.22s;
  }

  body.bento-lux-site .mobile-menu.open {
    visibility: visible;
    transition-delay: 0s;
  }

  body.bento-lux-site .mobile-menu-backdrop {
    visibility: hidden;
    transition:
      opacity 0.22s ease,
      visibility 0s linear 0.22s;
  }

  body.bento-lux-site .mobile-menu-backdrop.open {
    visibility: visible;
    transition-delay: 0s;
  }
}

[data-theme="light"] body.bento-lux-site :is(
  .mobile-page-links > a.active,
  .mobile-page-links details.is-current-section:not(.is-expanded) > summary,
  .mobile-page-links details.is-expanded nav a.active
) {
  background: var(--lux-control-active-bg) !important;
  color: var(--lux-control-active-text) !important;
}

[data-theme="light"] body.bento-lux-site :is(
  .mobile-page-links summary,
  .mobile-page-links a:not(.active),
  .mobile-menu nav a:not(.active),
  .language-switcher-mobile .language-switcher-toggle,
  .language-switcher-mobile .language-switcher-menu a:not(.active),
  .mobile-socials .icon-btn
) {
  color: color-mix(in srgb, var(--lux-text) 84%, transparent);
}

/* Light-mode controls use the established dark ink instead of a blue accent. */
[data-theme="light"] body.bento-lux-site .button.primary {
  background: var(--lux-control-active-bg);
  border-color: var(--lux-control-active-bg);
  box-shadow: 0 10px 28px rgba(7, 18, 35, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--lux-control-active-text);
}

/* The Lux mark remains white wherever it sits over the opening hero/header. */
body.bento-lux-site :is(
  .site-header,
  .hero-section
) .bento-lux-brand-icon {
  filter: invert(1);
}

/* Improve the weight of supporting copy throughout both colour modes. */
body.bento-lux-site :is(
  p,
  .subtle,
  .card-caption span,
  figcaption,
  .bentobox-component-heading p,
  .bentobox-video-copy span
) {
  font-weight: 500;
}

body.bento-lux-site .inventory-chips span {
  font-weight: 500;
}

/* Light inset media should read as a normal glass tile with clearer copy rhythm. */
[data-theme="light"] body.bento-lux-site .video-card.tone-dark:not(.full-bleed-video) {
  background: var(--lux-panel-bg);
  border-color: var(--lux-panel-border);
  color: var(--lux-text);
}

body.bento-lux-site .video-card .card-caption {
  gap: 7px;
}

[data-theme="light"] body.bento-lux-site .video-card.tone-dark .card-caption span {
  color: var(--lux-muted);
  line-height: 1.45;
}

/* Highlight panels keep a neutral glass surface without inherited corner tones. */
body.bento-lux-site :is(.highlight-columns, .bentobox-highlight) {
  background: var(--lux-panel-bg) !important;
  background-image: none !important;
  border-color: var(--lux-panel-border);
}

/* Contained icons reveal the exact panel beneath them unless a flat colour is enabled. */
body.bento-lux-site :is(
  .highlight-icon,
  .bentobox-highlight-icon
) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--lux-panel-border);
  color: rgba(7, 10, 18, 0.92);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.bento-lux-site .bentobox-highlight.has-icon-background .bentobox-highlight-icon {
  background: var(--bentobox-icon-background-color, var(--lux-blue)) !important;
}

[data-theme="dark"] body.bento-lux-site :is(
  .highlight-icon,
  .bentobox-highlight-icon
) {
  color: #fff;
}

/* Use one tab-bar language for content tabs and masonry filters. */
body.bento-lux-site :is(
  .mini-tabs,
  .bentobox-tablist,
  .filters
) {
  background: var(--lux-control-bg);
  border: 1px solid var(--lux-control-border);
  border-radius: 15px;
  padding: 5px;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

body.bento-lux-site :is(
  .bentobox-tablist button,
  .filters button
) {
  border-color: transparent;
  font-weight: 600;
}

[data-theme="light"] body.bento-lux-site :is(
  .bentobox-tablist button[aria-selected="true"],
  .filters button.active
) {
  background: var(--lux-control-active-bg);
  color: var(--lux-control-active-text);
  box-shadow: 0 4px 14px rgba(7, 18, 35, 0.14);
}

[data-theme="light"] body.bento-lux-site .progress {
  background: rgba(7, 18, 35, 0.12);
  box-shadow: inset 0 0 0 1px rgba(7, 18, 35, 0.08);
}

/* Popup Builder should be a single cool glass surface in light mode. */
[data-theme="light"] body.bento-lux-site .popup-demo.tone-dark {
  background: var(--lux-panel-bg);
  border-color: var(--lux-panel-border);
  box-shadow: var(--lux-panel-shadow);
  color: var(--lux-text);
}

[data-theme="light"] body.bento-lux-site .popup-demo.tone-dark :is(
  .mini-label,
  .popup-demo-copy h3
) {
  color: var(--lux-text);
}

[data-theme="light"] body.bento-lux-site .popup-demo.tone-dark .popup-demo-copy p {
  color: var(--lux-muted);
}

[data-theme="light"] body.bento-lux-site .popup-demo.tone-dark .button.light {
  background: var(--lux-control-active-bg);
  border: 1px solid var(--lux-control-active-bg);
  color: var(--lux-control-active-text);
}

/* Align carousel captions with their pagination rails. */
body.bento-lux-site .carousel-card:not(.full-bleed-carousel) .carousel-track figcaption {
  padding-inline: 0;
}

/* Give masonry entries a quieter editorial hierarchy than full-size cards. */
body.bento-lux-site .masonry .project h3 {
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

body.bento-lux-site .masonry .project-text > :is(
  span:not(.badge),
  .entry-label
) {
  font-size: 0.95rem;
  font-weight: 650;
}

body.bento-lux-site .masonry .project-text > p {
  font-weight: 500;
}

body.bento-lux-site .masonry .project[data-type="work"] {
  --masonry-label-tone: #4f8fe8;
  --masonry-card-tone: var(--lux-red);
}

body.bento-lux-site .masonry .project[data-type="story"] {
  --masonry-label-tone: #c17a3f;
  --masonry-card-tone: var(--lux-blue);
}

body.bento-lux-site .masonry .project[data-type="note"] {
  --masonry-label-tone: #8b6fc7;
  --masonry-card-tone: var(--lux-blue);
}

/* Start a vertical tonal wash at the copy panel so photography stays untouched. */
body.bento-lux-site .masonry .project > img + div:not(.project-text),
body.bento-lux-site .masonry .project > a > img + .project-text {
  --masonry-panel-base: color-mix(in srgb, var(--lux-panel-bg) 82%, var(--lux-page-bg));
  background:
    linear-gradient(
      to bottom,
      var(--masonry-entry-accent, var(--lux-tone, var(--masonry-card-tone))) 0%,
      transparent 100%
    ),
    var(--masonry-panel-base);
}

body.bento-lux-site .masonry-entry-icon {
  align-items: center;
  color: rgba(7, 10, 18, 0.92);
  display: inline-flex;
  justify-content: center;
  margin-bottom: 18px;
  min-height: 0;
  padding: 0;
  width: max-content;
}

body.bento-lux-site .masonry .project :is(.project-text, div:not(.project-text)) > .entry-label {
  margin-top: 12px;
  order: 2;
}

body.bento-lux-site .masonry-entry-icon.is-boxed {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--lux-panel-border);
  border-radius: 15px;
  box-shadow: none;
  height: 50px;
  width: 50px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.bento-lux-site .masonry-entry-icon.is-boxed.has-background {
  background: var(--masonry-icon-background-color, var(--lux-blue)) !important;
}

[data-theme="dark"] body.bento-lux-site .masonry-entry-icon {
  color: #fff;
}

/* The shared Back to Top control uses the Lux glass language in both modes. */
body.bento-lux-site .back-to-top {
  background: var(--lux-control-bg);
  border-color: var(--lux-control-border);
  box-shadow: 0 14px 38px color-mix(in srgb, black 22%, transparent), inset 0 1px 0 var(--lux-panel-inner-line);
  color: rgba(7, 10, 18, 0.92);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

[data-theme="dark"] body.bento-lux-site .back-to-top {
  color: #fff;
}

body.bento-lux-site .masonry .project :is(.project-text, div:not(.project-text)) > h3 {
  order: 1;
}

body.bento-lux-site .masonry .project :is(.project-text, div:not(.project-text)) > p {
  order: 3;
}

body.bento-lux-site .masonry-entry-icon.is-boxed :is(i, svg) {
  height: 23px;
  width: 23px;
}

body.bento-lux-site .masonry .project :is(.project-text, div:not(.project-text)) > .entry-label {
  --lux-badge-tone: var(--badge-color, var(--masonry-label-tone, var(--lux-accent)));
  align-items: center;
  background: color-mix(in srgb, var(--lux-badge-tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--lux-badge-tone) 52%, var(--lux-panel-border));
  border-radius: var(--badge-radius, 10px);
  box-shadow: 0 10px 32px color-mix(in srgb, black 12%, transparent);
  color: color-mix(in srgb, var(--lux-badge-tone) 38%, var(--lux-text));
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 550;
  gap: 7px;
  min-height: 32px;
  padding: 7px 12px;
  width: max-content;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

body.bento-lux-site .masonry .project :is(.project-text, div:not(.project-text)) > .entry-label.mini-badge {
  --badge-radius: 8px;
  font-size: 0.8125rem;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px;
}

body.bento-lux-site .masonry .project :is(.project-text, div:not(.project-text)) > .entry-label > :is(i, svg) {
  flex: 0 0 13px;
  height: 13px;
  width: 13px;
}

body.bento-lux-site .full-bleed-carousel .carousel-track figcaption {
  padding-inline: 22px;
}

@media (max-width: 700px) {
  body.bento-lux-site .full-bleed-carousel .carousel-track figcaption {
    padding-inline: 22px;
  }
}