/* Mirror the light-theme faceted compositions in dark mode and soften the
 * graphite surface scale without changing the page's overall dark character.
 */
html:not([data-theme="light"]) {
  --dark-tone-1: #0c0e0e;
  --dark-tone-2: #101212;
  --dark-tone-3: #141616;
  --section-faceted-gray: url("/assets/section-faceted-bronze-gray.svg?v=1");
  --section-faceted-left: url("/assets/section-faceted-bronze-left.svg?v=1");
  --section-faceted-cross: url("/assets/section-faceted-bronze-cross.svg?v=1");
  --section-faceted-strata: url("/assets/section-faceted-bronze-strata.svg?v=1");
}

html:not([data-theme="light"]) body main {
  background-image: var(--section-faceted-gray) !important;
  background-position: 76% top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body main :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3,
  .service-archive-page,
  .service-quick-overview,
  .subscription-plans-section,
  .article-summary,
  .legal-page
) {
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body.home-page main > :is(
  .trust-bar,
  #about,
  #services,
  #popular,
  #why-pro-lex,
  #faq,
  .doubts-section
) {
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body.home-page main > .trust-bar,
html:not([data-theme="light"]) body main :is(
  .service-detail-page,
  .service-choice-panel,
  .subscription-benefits,
  .article-archive-page,
  .contacts-page
) {
  --section-faceted-art: var(--section-faceted-left);
}

html:not([data-theme="light"]) body.home-page main > #about,
html:not([data-theme="light"]) body.home-page main #articles,
html:not([data-theme="light"]) body.home-page main #reasons,
html:not([data-theme="light"]) body main :is(
  .service-archive-page,
  .service-quick-overview,
  .subscription-plans-section,
  .article-summary,
  .legal-page,
  .subscription-final-cta
) {
  --section-faceted-art: var(--section-faceted-gray);
}

html:not([data-theme="light"]) body.home-page main > #services,
html:not([data-theme="light"]) body.home-page main > #faq,
html:not([data-theme="light"]) body.home-page main #workflow,
html:not([data-theme="light"]) body main :is(
  .pricing-page,
  .pricing-decision-panel,
  .subscription-comparison-section,
  .contacts-panel.light-block-tone-2,
  .service-final-cta
) {
  --section-faceted-art: var(--section-faceted-cross);
}

html:not([data-theme="light"]) body.home-page main > #popular,
html:not([data-theme="light"]) body.home-page main > .doubts-section,
html:not([data-theme="light"]) body.home-page main #pricing,
html:not([data-theme="light"]) body main :is(
  .subscription-hero,
  .subscription-faq-section,
  .pricing-choice-cta,
  .contacts-panel.light-block-tone-3
) {
  --section-faceted-art: var(--section-faceted-strata);
}

html:not([data-theme="light"]) body.home-page main > #why-pro-lex {
  --section-faceted-art: var(--section-faceted-left);
}

html:not([data-theme="light"]) body.home-page main #articles,
html:not([data-theme="light"]) body main .pricing-direction {
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body main .pricing-direction:nth-of-type(4n + 2) {
  --section-faceted-art: var(--section-faceted-left);
}

html:not([data-theme="light"]) body main .pricing-direction:nth-of-type(4n + 3) {
  --section-faceted-art: var(--section-faceted-cross);
}

html:not([data-theme="light"]) body main .pricing-direction:nth-of-type(4n) {
  --section-faceted-art: var(--section-faceted-strata);
}

@media (max-width: 680px) {
  html:not([data-theme="light"]) body main,
  html:not([data-theme="light"]) body main :is(
    .light-block-tone-1,
    .light-block-tone-2,
    .light-block-tone-3
  ) {
    background-position: 61% center !important;
    background-size: auto 76% !important;
  }
}

/* Dark-theme closing panels: keep editorial text legible on graphite surfaces.
   These selectors intentionally cover the equivalent CTA panels site-wide. */
html:not([data-theme="light"]) body main#top#top#top :is(
  .subscription-final-cta,
  .service-final-cta,
  .pricing-choice-cta,
  .article-final-cta,
  .article-archive-cta
) :is(h2, h3) {
  color: #f3eee6 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.36) !important;
}

html:not([data-theme="light"]) body main#top#top#top :is(
  .subscription-final-cta,
  .service-final-cta,
  .pricing-choice-cta,
  .article-final-cta,
  .article-archive-cta
) :is(p, li) {
  color: rgba(243, 238, 230, 0.76) !important;
}

html:not([data-theme="light"]) body main#top#top#top :is(
  .subscription-final-cta,
  .service-final-cta,
  .pricing-choice-cta,
  .article-final-cta,
  .article-archive-cta
) :is(.subscription-eyebrow, .section-kicker) {
  color: #c49361 !important;
}

/* Beat the legacy generated selector that repeats #top eight times. */
html:not([data-theme="light"]) body main#top#top#top#top#top#top#top#top#top#top :is(
  .subscription-final-cta.subscription-final-cta,
  .service-final-cta.service-final-cta,
  .pricing-choice-cta.pricing-choice-cta,
  .article-final-cta.article-final-cta,
  .article-archive-cta.article-archive-cta
) :is(h2, h3) {
  color: #f3eee6 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.36) !important;
}

html:not([data-theme="light"]) body main#top#top#top#top#top#top#top#top#top#top :is(
  .subscription-final-cta.subscription-final-cta,
  .service-final-cta.service-final-cta,
  .pricing-choice-cta.pricing-choice-cta,
  .article-final-cta.article-final-cta,
  .article-archive-cta.article-archive-cta
) :is(p, li) {
  color: rgba(243, 238, 230, 0.76) !important;
}

html:not([data-theme="light"]) body main#top#top#top#top#top#top#top#top#top#top :is(
  .subscription-final-cta.subscription-final-cta,
  .service-final-cta.service-final-cta,
  .pricing-choice-cta.pricing-choice-cta,
  .article-final-cta.article-final-cta,
  .article-archive-cta.article-archive-cta
) :is(.subscription-eyebrow, .section-kicker) {
  color: #c49361 !important;
}

/* Comparison table: highlight the actual cells so the whole row reads as one
   active band instead of leaving the cell backgrounds opaque. */
html:not([data-theme="light"]) body .subscription-table tbody tr:not(.subscription-table-group) > :is(th, td) {
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease !important;
}

html:not([data-theme="light"]) body .subscription-table tbody tr:not(.subscription-table-group):hover > :is(th, td) {
  border-top-color: rgba(208, 154, 98, 0.34) !important;
  border-bottom-color: rgba(208, 154, 98, 0.34) !important;
  background-color: #302116 !important;
  background-image: linear-gradient(90deg, rgba(193, 139, 82, 0.18), rgba(193, 139, 82, 0.065)) !important;
  color: #fff7ed !important;
  box-shadow:
    inset 0 1px 0 rgba(229, 181, 128, 0.05),
    inset 0 -1px 0 rgba(229, 181, 128, 0.05) !important;
}

html:not([data-theme="light"]) body .subscription-table tbody tr:not(.subscription-table-group):hover > th:first-child {
  color: #e0b17e !important;
  box-shadow:
    inset 3px 0 0 #b87b45,
    inset 0 1px 0 rgba(229, 181, 128, 0.05),
    inset 0 -1px 0 rgba(229, 181, 128, 0.05) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) body .subscription-table tbody tr > :is(th, td) {
    transition: none !important;
  }
}

/* Service detail pages: high-contrast navigation on the bronze header. */
html:not([data-theme="light"]) body.service-detail-catalog-page .site-header.site-header :is(
  .brand,
  .main-nav > .nav-link,
  .main-nav > .nav-dropdown > .nav-link-trigger,
  .header-phone,
  .header-phone-list a
) {
  color: #fffaf3 !important;
  -webkit-text-fill-color: #fffaf3 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page .service-page-toc.service-page-toc {
  border: 1px solid rgba(208, 154, 98, 0.2) !important;
  background:
    linear-gradient(105deg, rgba(193, 139, 82, 0.08), rgba(8, 5, 3, 0.18)),
    rgba(18, 12, 8, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(229, 181, 128, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.24) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page .service-page-toc.service-page-toc .service-direction-link {
  background: rgba(255, 250, 243, 0.025) !important;
  color: #d0a06b !important;
  box-shadow: inset 0 0 0 1px rgba(208, 154, 98, 0.08) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page .service-page-toc.service-page-toc .service-direction-link > .material-symbols-outlined {
  background: rgba(208, 154, 98, 0.1) !important;
  color: #d8aa78 !important;
  box-shadow: inset 0 0 0 1px rgba(208, 154, 98, 0.2) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page .service-page-toc.service-page-toc .service-direction-link .service-direction-link-copy > strong {
  color: rgba(255, 250, 243, 0.88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.58) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page .service-page-toc.service-page-toc .service-direction-link:is(:hover, :focus-visible, .is-active) {
  background:
    linear-gradient(145deg, rgba(208, 154, 98, 0.2), rgba(98, 58, 31, 0.16)),
    #26170e !important;
  color: #f0c18c !important;
  box-shadow:
    inset 0 0 0 1px rgba(229, 181, 128, 0.34),
    0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page .service-page-toc.service-page-toc .service-direction-link:is(:hover, :focus-visible, .is-active) :is(
  .material-symbols-outlined,
  .service-direction-link-copy > strong
) {
  color: #fff6eb !important;
}

/* Service catalogue cards: deep graphite with restrained bronze detailing. */
html:not([data-theme="light"]) body.service-detail-catalog-page main#top#top#top .service-markdown.service-markdown ul > li {
  border-color: rgba(208, 154, 98, 0.26) !important;
  background-color: #0d0f0f !important;
  background-image:
    linear-gradient(135deg, rgba(208, 154, 98, 0.055), transparent 38%),
    linear-gradient(155deg, #171919 0%, #101212 56%, #090a0a 100%) !important;
  color: rgba(243, 238, 230, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 14px 34px rgba(0, 0, 0, 0.3) !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page main#top#top#top .service-markdown.service-markdown ul > li::before {
  color: #d0a06b !important;
}

html:not([data-theme="light"]) body.service-detail-catalog-page main#top#top#top .service-markdown.service-markdown ul > li > strong {
  color: #f3d2ac !important;
}

@media (hover: hover) and (pointer: fine) {
  html:not([data-theme="light"]) body.service-detail-catalog-page main#top#top#top .service-markdown.service-markdown ul > li:is(:hover, :focus-within) {
    border-color: rgba(229, 181, 128, 0.48) !important;
    background-color: #151717 !important;
    background-image:
      linear-gradient(135deg, rgba(229, 181, 128, 0.085), transparent 42%),
      linear-gradient(155deg, #202222 0%, #151717 58%, #0c0e0e 100%) !important;
    color: #fff7ed !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.065),
      0 20px 42px rgba(0, 0, 0, 0.4),
      0 0 0 3px rgba(193, 139, 82, 0.055) !important;
  }
}

/* Final artwork cascade: legacy page styles use ID-heavy selectors. These rules
 * intentionally win only for background images and never touch surface colors. */
html:not([data-theme="light"]) body.home-page:not(#dark-facet-a):not(#dark-facet-b):not(#dark-facet-c) main#top#top#top > :is(
  .trust-bar,
  #about#about,
  #services#services,
  #popular#popular,
  #why-pro-lex#why-pro-lex,
  #faq#faq,
  .doubts-section
) {
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body.home-page:not(#dark-facet-articles-a):not(#dark-facet-articles-b):not(#dark-facet-articles-c) main#top#top#top #articles#articles,
html:not([data-theme="light"]) body:not(#dark-facet-internal-a):not(#dark-facet-internal-b):not(#dark-facet-internal-c) main#top#top#top :is(
  .service-archive-page.service-archive-page,
  .service-detail-page.service-detail-page,
  .service-quick-overview.service-quick-overview,
  .service-choice-panel.service-choice-panel,
  .service-final-cta.service-final-cta,
  .pricing-page.pricing-page,
  .pricing-decision-panel.pricing-decision-panel,
  .pricing-direction.pricing-direction,
  .pricing-choice-cta.pricing-choice-cta,
  .subscription-hero.subscription-hero,
  .subscription-plans-section.subscription-plans-section,
  .subscription-benefits.subscription-benefits,
  .subscription-comparison-section.subscription-comparison-section,
  .subscription-faq-section.subscription-faq-section,
  .subscription-final-cta.subscription-final-cta,
  .article-archive-page.article-archive-page,
  .article-summary.article-summary,
  .contacts-page.contacts-page,
  .contacts-panel.contacts-panel,
  .legal-page.legal-page
) {
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Apply the same faceted language to every explicitly toned content block. */
html:not([data-theme="light"]) body:not(#dark-facet-all-a):not(#dark-facet-all-b):not(#dark-facet-all-c) main#top#top#top :is(
  .light-block-tone-1.light-block-tone-1,
  .light-block-tone-2.light-block-tone-2,
  .light-block-tone-3.light-block-tone-3
) {
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body:not(#dark-surface-a):not(#dark-surface-b) main#top#top#top .light-block-tone-1.light-block-tone-1 {
  background-color: var(--dark-tone-1) !important;
}

html:not([data-theme="light"]) body:not(#dark-surface-a):not(#dark-surface-b) main#top#top#top .light-block-tone-2.light-block-tone-2 {
  background-color: var(--dark-tone-2) !important;
}

html:not([data-theme="light"]) body:not(#dark-surface-a):not(#dark-surface-b) main#top#top#top .light-block-tone-3.light-block-tone-3 {
  background-color: var(--dark-tone-3) !important;
}

/* Closing application section: final-cascade bronze treatment for dark mode. */
html:not([data-theme="light"]) body main#top#top#top > .cta.media-section#contacts {
  border-bottom-color: rgba(193, 139, 82, 0.4) !important;
  background-color: #140c07 !important;
  background-image:
    linear-gradient(90deg, rgba(17, 9, 5, 0.94) 0%, rgba(72, 40, 19, 0.78) 48%, rgba(18, 9, 5, 0.9) 100%),
    url("/assets/cta-contact-application-background.webp") !important;
  background-position: center 56% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body main#top#top#top > .cta.media-section#contacts .media-overlay {
  z-index: 0 !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(208, 154, 98, 0.14), transparent 24rem),
    linear-gradient(118deg, rgba(10, 5, 3, 0.18), rgba(111, 63, 29, 0.2) 54%, rgba(8, 4, 2, 0.32)) !important;
  box-shadow:
    inset 0 1px 0 rgba(208, 154, 98, 0.18),
    inset 0 -1px 0 rgba(208, 154, 98, 0.2) !important;
}

@media (max-width: 680px) {
  html:not([data-theme="light"]) body main#top#top#top > .cta.media-section#contacts {
    background-image:
      linear-gradient(180deg, rgba(19, 10, 6, 0.88), rgba(39, 21, 11, 0.92)),
      url("/assets/cta-contact-application-background.webp") !important;
    background-position: 16% center !important;
  }
}

/* Homepage refinement: keep the section rhythm, but make the bronze facets a
 * quiet full-bleed backdrop instead of a dominant foreground element. */
html:not([data-theme="light"]) body.home-page:not(#home-dark-wide-a):not(#home-dark-wide-b):not(#home-dark-wide-c) main#top#top#top > :is(
  .trust-bar,
  #about#about,
  #services#services,
  #popular#popular,
  #why-pro-lex#why-pro-lex,
  #faq#faq,
  .doubts-section
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  transform: none !important;
  background-image:
    linear-gradient(rgba(12, 14, 14, 0.58), rgba(12, 14, 14, 0.58)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

html:not([data-theme="light"]) body.home-page:not(#home-dark-nested-a):not(#home-dark-nested-b):not(#home-dark-nested-c) main#top#top#top :is(
  #articles#articles,
  #reasons#reasons,
  #workflow#workflow,
  #pricing#pricing
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  transform: none !important;
  background-image:
    linear-gradient(rgba(12, 14, 14, 0.58), rgba(12, 14, 14, 0.58)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

/* The closing homepage sequence uses deep bronze, never orange. */
html:not([data-theme="light"]) body.home-page:not(#home-closing-bronze-a):not(#home-closing-bronze-b) main#top#top#top :is(
  #pricing#pricing,
  .doubts-section
) {
  background-color: #120e0b !important;
  background-image:
    linear-gradient(135deg, rgba(10, 9, 8, 0.82), rgba(29, 20, 14, 0.8)),
    var(--section-faceted-art, var(--section-faceted-strata)) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

html:not([data-theme="light"]) body.home-page main#top#top#top > .cta.media-section#contacts {
  border-color: rgba(164, 112, 68, 0.28) !important;
  background-color: #100c09 !important;
  background-image:
    linear-gradient(90deg, rgba(10, 8, 7, 0.96), rgba(42, 28, 18, 0.88) 50%, rgba(10, 8, 7, 0.95)),
    url("/assets/cta-contact-application-background.webp") !important;
}

html:not([data-theme="light"]) body.home-page main#top#top#top > .cta.media-section#contacts .media-overlay {
  background:
    radial-gradient(circle at 18% 22%, rgba(171, 117, 72, 0.08), transparent 24rem),
    linear-gradient(118deg, rgba(7, 6, 5, 0.3), rgba(53, 35, 22, 0.18) 54%, rgba(7, 6, 5, 0.4)) !important;
}

/* Dark-theme text contrast repairs. The article breadcrumb previously kept its
 * light glass surface while its labels switched to ivory, and the homepage
 * doubts heading inherited the dark navy display color. */
html:not([data-theme="light"]) body:is(.article-archive-catalog-page, .article-reading-page)
  :is(.article-archive-inner, .article-detail-inner) > .breadcrumbs {
  border-color: rgba(208, 154, 98, 0.3) !important;
  background: rgba(17, 18, 18, 0.94) !important;
  background-image: linear-gradient(115deg, rgba(208, 154, 98, 0.1), transparent 48%) !important;
  color: rgba(243, 238, 230, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 10px 28px rgba(0, 0, 0, 0.32) !important;
}

html:not([data-theme="light"]) body:is(.article-archive-catalog-page, .article-reading-page)
  :is(.article-archive-inner, .article-detail-inner) > .breadcrumbs a {
  color: #d2a06d !important;
}

html:not([data-theme="light"]) body:is(.article-archive-catalog-page, .article-reading-page)
  :is(.article-archive-inner, .article-detail-inner) > .breadcrumbs > span:last-child {
  color: #f4efe7 !important;
}

html:not([data-theme="light"]) body.home-page main#top#top#top .doubts-section .doubts-header h2 {
  color: #f4efe7 !important;
  -webkit-text-fill-color: #f4efe7 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42) !important;
}

html:not([data-theme="light"]) body.home-page main#top#top#top .doubts-section .doubt-item h3 {
  color: #f1e8dc !important;
  -webkit-text-fill-color: #f1e8dc !important;
}

html:not([data-theme="light"]) body.home-page main#top#top#top .doubts-section .doubt-item p {
  color: rgba(244, 239, 231, 0.82) !important;
}

/* Contact tiles remain light and readable on the dark photographic panel.
 * Generic card hover rules used to replace only the hovered tile with a dark
 * surface, leaving its navy label without enough contrast. */
html body main#top#top#top#top#top#top#top#top#top#top#top#top .cta.media-section#contacts .cta-contact-item,
html body main#top#top#top#top#top#top#top#top#top#top#top#top .cta.media-section#contacts a.cta-contact-item:is(:hover, :focus-visible, :focus-within) {
  border-color: rgba(216, 162, 125, 0.72) !important;
  background-color: #f7f8f8 !important;
  background-image: linear-gradient(145deg, #ffffff 0%, #edf0f1 100%) !important;
  color: #182631 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 28px rgba(8, 18, 26, 0.24) !important;
}

html body main#top#top#top#top#top#top#top#top#top#top#top#top .cta.media-section#contacts a.cta-contact-item:is(:hover, :focus-visible, :focus-within) {
  border-color: #d59a70 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #182631 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 16px 34px rgba(8, 18, 26, 0.3),
    0 0 0 2px rgba(213, 154, 112, 0.14) !important;
}

html body main#top#top#top#top#top#top#top#top#top#top#top#top .cta.media-section#contacts .cta-contact-item :is(
  strong,
  .contact-phone-stack,
  .contact-phone-stack a
) {
  color: #182631 !important;
  -webkit-text-fill-color: #182631 !important;
}

html body main#top#top#top#top#top#top#top#top#top#top#top#top .cta.media-section#contacts .cta-contact-item .material-symbols-outlined {
  color: #a6603c !important;
}

/* Cooperation block: one flat graphite surface. Its dedicated artwork uses
 * solid translucent facets (no gradient fills) at the same 0.22 opacity as
 * the decorative SVGs across the rest of the homepage. */
html:not([data-theme="light"]) body.home-page main#top#top#top#top#top#top#top#top #workflow#workflow.workflow-block {
  background-color: #0f1111 !important;
  background-image: url("/assets/section-faceted-bronze-workflow.svg?v=1") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Homepage content sections share the same restrained palette and faceted
 * decoration as Services. Hero and contact CTA keep their photographs. */
html:not([data-theme="light"]) body.home-page main#top#top#top#top#top#top#top#top :is(
  .trust-bar,
  #about#about,
  #popular#popular,
  #why-pro-lex#why-pro-lex,
  #articles#articles,
  #reasons#reasons,
  #workflow#workflow,
  #pricing#pricing,
  #faq#faq,
  .doubts-section
) {
  background-color: #0f1111 !important;
  background-image: var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html:not([data-theme="light"]) body.home-page main#top#top#top#top#top#top#top#top #workflow#workflow .workflow-step-copy,
html:not([data-theme="light"]) body.home-page main#top#top#top#top#top#top#top#top #workflow#workflow .workflow-step-copy:is(:hover, :focus-visible, :focus-within) {
  height: 100% !important;
  background: #181511 !important;
  background-color: #181511 !important;
  background-image: none !important;
}

/* The application card itself remains opaque and immediately readable. */
html body.home-page main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .contact-form:not(.contact-form-compact),
html body.home-page main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .contact-form:not(.contact-form-compact):is(:hover, :focus-within) {
  --contact-form-ink: #182631;
  --contact-form-field-ink: #182631;
  --contact-form-muted: #475965;
  --contact-form-soft: #5a6a74;
  --contact-form-border: rgba(255, 255, 255, 0.78);
  --contact-form-field: #f3f4f4;
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 240, 241, 0.98)) !important;
  background-color: #f2f3f3 !important;
  color: #182631 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 24px 58px rgba(8, 18, 26, 0.28) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color-scheme: light !important;
}

html body.home-page main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .contact-form .form-field :is(input, textarea) {
  border-color: rgba(44, 57, 68, 0.2) !important;
  background: #f7f8f8 !important;
  color: #182631 !important;
  caret-color: #182631 !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

html body.home-page main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .contact-form .form-field :is(input, textarea):is(:focus, :focus-visible) {
  border-color: #a6603c !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(166, 96, 60, 0.14) !important;
}

html body.home-page main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .contact-form :is(
  .form-field > span,
  .form-brief-summary > span:first-child,
  .form-segment-group legend
) {
  color: #263746 !important;
}

html body.home-page main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .contact-form :is(
  .form-hint,
  .form-status,
  .form-trust-list,
  .form-trust-list li,
  .form-brief-summary small
) {
  color: #475965 !important;
}

/* Shared photographic treatment for every full contact/application section,
 * both on the homepage and on the dedicated contacts page. */
html body main#top#top#top#top#top#top#top#top > .cta.media-section#contacts {
  border-color: rgba(136, 145, 145, 0.24) !important;
  background-color: #0f1111 !important;
  background-image:
    linear-gradient(rgba(11, 13, 13, 0.58), rgba(11, 13, 13, 0.58)),
    url("/assets/cta-contact-application-background.webp") !important;
  background-position: center, center 56% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html body main#top#top#top#top#top#top#top#top > .cta.media-section#contacts .media-overlay {
  background: rgba(10, 12, 12, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(194, 202, 202, 0.12),
    inset 0 -1px 0 rgba(194, 202, 202, 0.12) !important;
}

/* A deeper footer closes the page with a near-black bronze well. The faceted
 * artwork remains, but is pushed farther into shadow for visual depth. */
html body:not(#nav-footer-faceted-override):not(#deep-footer-a):not(#deep-footer-b) .site-footer.site-footer {
  border-top-color: rgba(193, 139, 82, 0.38) !important;
  background-color: #050302 !important;
  background-image:
    linear-gradient(180deg, rgba(22, 13, 8, 0.34) 0%, rgba(4, 2, 1, 0.9) 100%),
    url("/assets/nav-footer-faceted-bronze.svg?v=1") !important;
  background-position: center, center 42% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    inset 0 1px 0 rgba(208, 154, 98, 0.16),
    inset 0 72px 100px rgba(0, 0, 0, 0.22),
    0 -24px 72px rgba(3, 2, 1, 0.34) !important;
}

html body:not(#nav-footer-faceted-override):not(#deep-footer-a):not(#deep-footer-b) .site-footer.site-footer::before {
  background:
    radial-gradient(circle at 14% 12%, rgba(118, 82, 52, 0.14), transparent 30rem),
    linear-gradient(90deg, rgba(13, 8, 5, 0.12), rgba(0, 0, 0, 0.5)) !important;
}

/* Light theme keeps the footer deep, but uses the blue identity everywhere:
 * no bronze base, haze or decorative artwork. */
html.light[data-theme="light"] body:not(#nav-footer-faceted-override):not(#deep-footer-a):not(#deep-footer-b) .site-footer.site-footer {
  border-top-color: rgba(57, 116, 166, 0.5) !important;
  background-color: #061225 !important;
  background-image:
    linear-gradient(180deg, rgba(8, 27, 49, 0.18) 0%, rgba(2, 8, 20, 0.62) 100%),
    url("/assets/nav-footer-faceted.svg?v=1") !important;
  background-position: center, center 42% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    inset 0 1px 0 rgba(116, 174, 220, 0.18),
    inset 0 72px 100px rgba(1, 7, 18, 0.2),
    0 -24px 72px rgba(3, 13, 29, 0.24) !important;
}

html.light[data-theme="light"] body:not(#nav-footer-faceted-override):not(#deep-footer-a):not(#deep-footer-b) .site-footer.site-footer::before {
  background:
    radial-gradient(circle at 14% 12%, rgba(56, 103, 153, 0.16), transparent 30rem),
    linear-gradient(90deg, rgba(4, 18, 37, 0.1), rgba(1, 7, 18, 0.42)) !important;
}

/* Mobile dark navigation follows the bronze/charcoal theme instead of the
 * blue light-theme navigation. The opening motion echoes the faceted header:
 * the panel settles first, then its actions arrive in a short cascade. */
@media (max-width: 1180px) {
  html:not([data-theme="light"]) body:not(#nav-footer-faceted-override) .site-header.site-header .main-nav {
    border-color: rgba(208, 154, 98, 0.34) !important;
    background-color: #100a07 !important;
    background-image:
      radial-gradient(circle at 88% 4%, rgba(160, 101, 54, 0.2), transparent 18rem),
      linear-gradient(180deg, rgba(31, 19, 12, 0.95), rgba(8, 5, 3, 0.985)),
      url("/assets/nav-footer-faceted-bronze.svg?v=1") !important;
    background-position: center, center, 66% center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow:
      inset 0 1px 0 rgba(239, 193, 142, 0.16),
      inset 0 -1px 0 rgba(0, 0, 0, 0.5),
      0 26px 64px rgba(5, 3, 2, 0.58) !important;
    scrollbar-color: rgba(208, 154, 98, 0.62) rgba(255, 255, 255, 0.07);
    transform: translateY(-14px) scale(0.985) !important;
    transform-origin: top center;
    transition:
      opacity 180ms ease,
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 180ms ease !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav {
    border-color: rgba(218, 165, 108, 0.42) !important;
    background-color: #100a07 !important;
    background-image:
      radial-gradient(circle at 88% 4%, rgba(160, 101, 54, 0.2), transparent 18rem),
      linear-gradient(180deg, rgba(31, 19, 12, 0.95), rgba(8, 5, 3, 0.985)),
      url("/assets/nav-footer-faceted-bronze.svg?v=1") !important;
    transform: translateY(0) scale(1) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .main-nav > .nav-link,
  html:not([data-theme="light"]) body .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger {
    border-color: rgba(208, 154, 98, 0.2) !important;
    background:
      linear-gradient(105deg, rgba(111, 67, 36, 0.16), transparent 62%),
      rgba(19, 12, 8, 0.88) !important;
    color: #fffaf3 !important;
    text-shadow: 0 1px 10px rgba(5, 3, 2, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 226, 190, 0.045) !important;
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease,
      color 180ms ease,
      transform 180ms ease !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .main-nav > .nav-link:is(:hover, :focus-visible),
  html:not([data-theme="light"]) body .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger:is(:hover, :focus-visible),
  html:not([data-theme="light"]) body .site-header.site-header .main-nav > .nav-dropdown.is-open > .nav-link-trigger {
    border-color: rgba(229, 181, 128, 0.56) !important;
    background:
      linear-gradient(105deg, rgba(150, 91, 48, 0.26), transparent 66%),
      rgba(39, 24, 15, 0.96) !important;
    color: #ffffff !important;
    box-shadow:
      inset 3px 0 0 rgba(218, 165, 108, 0.88),
      inset 0 1px 0 rgba(255, 226, 190, 0.08) !important;
    transform: translateX(2px);
  }

  html:not([data-theme="light"]) body .site-header.site-header .desktop-submenu-icon {
    color: #d9a66f !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu {
    border-color: rgba(208, 154, 98, 0.26) !important;
    background:
      linear-gradient(145deg, rgba(73, 43, 24, 0.18), transparent 58%),
      rgba(12, 8, 5, 0.97) !important;
    box-shadow:
      inset 0 1px 0 rgba(239, 193, 142, 0.08),
      0 16px 34px rgba(4, 2, 1, 0.32) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu a {
    border-color: rgba(208, 154, 98, 0.18) !important;
    background: rgba(32, 20, 13, 0.78) !important;
    color: rgba(255, 250, 243, 0.88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 226, 190, 0.04) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu a:is(:hover, :focus-visible) {
    border-color: rgba(229, 181, 128, 0.5) !important;
    background: rgba(67, 41, 23, 0.94) !important;
    color: #ffffff !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-contact-actions {
    border-top-color: rgba(208, 154, 98, 0.3) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-contact-label {
    color: rgba(235, 216, 195, 0.7) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-contact-action {
    border-color: rgba(208, 154, 98, 0.28) !important;
    background:
      linear-gradient(110deg, rgba(111, 67, 36, 0.16), transparent 70%),
      rgba(24, 16, 11, 0.9) !important;
    color: #f9f2e9 !important;
    box-shadow: inset 0 1px 0 rgba(255, 226, 190, 0.06) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-contact-action:is(:hover, :focus-visible) {
    border-color: rgba(229, 181, 128, 0.58) !important;
    background: rgba(54, 34, 21, 0.96) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-contact-action .material-symbols-outlined {
    color: #d9a66f !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-menu-toggle {
    border-color: rgba(208, 154, 98, 0.44) !important;
    background:
      linear-gradient(135deg, rgba(122, 76, 42, 0.28), rgba(18, 11, 7, 0.92)) !important;
    color: #e0ad76 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 226, 190, 0.12),
      0 8px 20px rgba(5, 3, 2, 0.28) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .mobile-menu-toggle {
    border-color: rgba(235, 194, 145, 0.72) !important;
    background:
      linear-gradient(135deg, rgba(137, 83, 43, 0.72), rgba(43, 26, 15, 0.98)) !important;
    color: #fffaf3 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 226, 190, 0.22),
      0 0 0 3px rgba(193, 139, 82, 0.12),
      0 10px 24px rgba(5, 3, 2, 0.34) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-menu-toggle .material-symbols-outlined {
    color: currentColor !important;
    transition:
      opacity 180ms ease,
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-menu-icon-open {
    transform: rotate(0deg) scale(1);
  }

  html:not([data-theme="light"]) body .site-header.site-header .mobile-menu-icon-close {
    transform: rotate(-55deg) scale(0.72);
  }

  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .mobile-menu-icon-open {
    transform: rotate(55deg) scale(0.72);
  }

  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .mobile-menu-icon-close {
    transform: rotate(0deg) scale(1);
  }

  html:not([data-theme="light"]) body .site-header.site-header .main-nav > :is(.nav-link, .nav-dropdown, .mobile-contact-actions, .mobile-nav-cta) {
    opacity: 0;
    transform: translateY(-7px);
    transition:
      opacity 180ms ease,
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :is(.nav-link, .nav-dropdown, .mobile-contact-actions, .mobile-nav-cta) {
    opacity: 1;
    transform: translateY(0);
  }

  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(1) { transition-delay: 45ms !important; }
  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(2) { transition-delay: 75ms !important; }
  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(3) { transition-delay: 105ms !important; }
  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(4) { transition-delay: 135ms !important; }
  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(5) { transition-delay: 165ms !important; }
  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(6) { transition-delay: 195ms !important; }
  html:not([data-theme="light"]) body .site-header.site-header.is-menu-open .main-nav > :nth-child(7) { transition-delay: 225ms !important; }
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) body .site-header.site-header :is(
    .main-nav,
    .main-nav > *,
    .mobile-menu-toggle .material-symbols-outlined
  ) {
    transition: none !important;
  }
}

/* Final dark-menu cascade guard. Generated dark-layout rules intentionally
 * carry three ID-level guards, so mirror that specificity here to ensure no
 * cool blue or platinum state can leak back into the dark mobile navigation. */
@media (max-width: 1180px) {
  html:not([data-theme="light"]) body:not(#nav-footer-faceted-override) .site-header.site-header.is-menu-open .main-nav {
    transform: translateY(0) scale(1) !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .main-nav > .nav-link,
  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger {
    border-color: rgba(208, 154, 98, 0.2) !important;
    background:
      linear-gradient(105deg, rgba(111, 67, 36, 0.16), transparent 62%),
      rgba(19, 12, 8, 0.88) !important;
    color: #fffaf3 !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .main-nav > .nav-link:is(:hover, :focus-visible),
  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger:is(:hover, :focus-visible),
  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .main-nav > .nav-dropdown.is-open > .nav-link-trigger {
    border-color: rgba(229, 181, 128, 0.56) !important;
    background:
      linear-gradient(105deg, rgba(150, 91, 48, 0.26), transparent 66%),
      rgba(39, 24, 15, 0.96) !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .nav-dropdown-menu {
    border-color: rgba(208, 154, 98, 0.26) !important;
    background:
      linear-gradient(145deg, rgba(73, 43, 24, 0.18), transparent 58%),
      rgba(12, 8, 5, 0.97) !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .nav-dropdown-menu a {
    border-color: rgba(208, 154, 98, 0.18) !important;
    background: rgba(32, 20, 13, 0.78) !important;
    color: rgba(255, 250, 243, 0.88) !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .mobile-contact-actions {
    border-top-color: rgba(208, 154, 98, 0.3) !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .mobile-contact-action {
    border-color: rgba(208, 154, 98, 0.28) !important;
    background:
      linear-gradient(110deg, rgba(111, 67, 36, 0.16), transparent 70%),
      rgba(24, 16, 11, 0.9) !important;
    color: #f9f2e9 !important;
  }

  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header .mobile-menu-toggle,
  html:not([data-theme="light"]) body:not(#dark-visual-a):not(#dark-visual-b):not(#dark-visual-c) .site-header.site-header.is-menu-open .mobile-menu-toggle {
    border-color: rgba(235, 194, 145, 0.7) !important;
    background:
      linear-gradient(135deg, rgba(137, 83, 43, 0.72), rgba(43, 26, 15, 0.98)) !important;
    color: #fffaf3 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 226, 190, 0.22),
      0 0 0 3px rgba(193, 139, 82, 0.1),
      0 10px 24px rgba(5, 3, 2, 0.34) !important;
  }
}

/* Final homepage art balance: keep the faceted motif present, but let the
 * graphite surface lead. Hero and contact photography remain untouched. */
html:not([data-theme="light"]) body.home-page:not(#home-decor-soft-a):not(#home-decor-soft-b):not(#home-decor-soft-c)
  main#top#top#top#top#top#top#top#top#top :is(
    .trust-bar,
    #about#about,
    #services#services,
    #popular#popular,
    #why-pro-lex#why-pro-lex,
    #articles#articles,
    #reasons#reasons,
    #workflow#workflow,
    #pricing#pricing,
    #faq#faq,
    .doubts-section
  ) {
  background-image:
    linear-gradient(rgba(15, 17, 17, 0.68), rgba(15, 17, 17, 0.68)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
}

/* Cooperation section: keep the base flat and use only the shared-strength,
 * gradient-free faceted artwork. */
html:not([data-theme="light"]) body.home-page:not(#workflow-flat-a):not(#workflow-flat-b):not(#workflow-flat-c)
  main#top#top#top#top#top#top#top#top#top #workflow#workflow.workflow-block {
  background-color: #0f1111 !important;
  background-image: url("/assets/section-faceted-bronze-workflow.svg?v=1") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}