/* Light theme color palette from the supplied reference image.
   Layout, spacing, content and the dark theme remain unchanged. */

html.light[data-theme="light"] {
  --reference-ivory: #f7f1e8;
  --reference-stone: #e6e0d6;
  --reference-navy: #17344b;
  --reference-brown: #684125;
  --reference-copper: #b86d45;
  --reference-muted: #6f7b80;
}

html.light[data-theme="light"] body {
  background: var(--reference-ivory) !important;
  color: var(--reference-navy) !important;
}

html.light[data-theme="light"] body .site-header,
html.light[data-theme="light"] body header {
  background: var(--reference-ivory) !important;
  color: var(--reference-navy) !important;
  border-color: rgba(23, 52, 75, .16) !important;
}

html.light[data-theme="light"] body .brand,
html.light[data-theme="light"] body .main-nav,
html.light[data-theme="light"] body .nav-link,
html.light[data-theme="light"] body .nav-link-trigger,
html.light[data-theme="light"] body .header-phone,
html.light[data-theme="light"] body h1,
html.light[data-theme="light"] body h2,
html.light[data-theme="light"] body h3,
html.light[data-theme="light"] body h4 {
  color: var(--reference-navy) !important;
}

html.light[data-theme="light"] body p,
html.light[data-theme="light"] body li,
html.light[data-theme="light"] body small,
html.light[data-theme="light"] body .text-muted {
  color: var(--reference-muted) !important;
}

html.light[data-theme="light"] body .button,
html.light[data-theme="light"] body button,
html.light[data-theme="light"] body .header-cta,
html.light[data-theme="light"] body input[type="submit"] {
  border-color: var(--reference-brown) !important;
  background: var(--reference-brown) !important;
  color: #fffaf2 !important;
}

html.light[data-theme="light"] body a:hover,
html.light[data-theme="light"] body .eyebrow,
html.light[data-theme="light"] body .section-label,
html.light[data-theme="light"] body .material-symbols-outlined {
  color: var(--reference-copper) !important;
}

html.light[data-theme="light"] body .hero,
html.light[data-theme="light"] body .hero-section {
  background-color: var(--reference-ivory) !important;
}

/* The content wrapper sits on top of the hero image; it must not become a
   second opaque panel because of the broad theme color rules above. */
html.light[data-theme="light"] body .hero-inner,
html.light[data-theme="light"] body .hero-inner-left {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .stats,
html.light[data-theme="light"] body .trust-bar,
html.light[data-theme="light"] body [class*="trust"],
html.light[data-theme="light"] body [class*="stats"] {
  background-color: var(--reference-stone) !important;
}

html.light[data-theme="light"] body .card,
html.light[data-theme="light"] body .service-card,
html.light[data-theme="light"] body .feature-card,
html.light[data-theme="light"] body .contact-card,
html.light[data-theme="light"] body .form-card {
  background-color: rgba(255, 250, 242, .72) !important;
  border-color: rgba(23, 52, 75, .18) !important;
  color: var(--reference-navy) !important;
}

html.light[data-theme="light"] body hr,
html.light[data-theme="light"] body .divider,
html.light[data-theme="light"] body [class*="border"] {
  border-color: rgba(23, 52, 75, .22) !important;
}

html.light[data-theme="light"] body footer {
  background-color: var(--reference-navy) !important;
  color: #f7f1e8 !important;
}

html.light[data-theme="light"] body footer h1,
html.light[data-theme="light"] body footer h2,
html.light[data-theme="light"] body footer h3,
html.light[data-theme="light"] body footer p,
html.light[data-theme="light"] body footer a,
html.light[data-theme="light"] body footer small {
  color: #f7f1e8 !important;
}

/* Apply the same palette to every existing page block without changing layout. */
html.light[data-theme="light"] {
  --surface: #f7f1e8 !important;
  --surface-lowest: #f7f1e8 !important;
  --surface-low: #f0ece4 !important;
  --surface-container: #e6e0d6 !important;
  --surface-high: #ddd6cb !important;
  --surface-variant: #d3c9bc !important;
  --surface-rgb: 247, 241, 232 !important;
  --surface-lowest-rgb: 247, 241, 232 !important;
  --surface-low-rgb: 240, 236, 228 !important;
  --surface-container-rgb: 230, 224, 214 !important;
  --surface-high-rgb: 221, 214, 203 !important;
  --surface-variant-rgb: 211, 201, 188 !important;
  --page-bg: #f7f1e8 !important;
  --section-bg: #f7f1e8 !important;
  --section-alt: #eef0ef !important;
  --card-bg: #fffaf2 !important;
  --card-bg-hover: #f1e9de !important;
  --card-bg-featured: #e6e0d6 !important;
  --text: #17344b !important;
  --text-rgb: 23, 52, 75 !important;
  --text-muted: #6f7b80 !important;
  --text-muted-rgb: 111, 123, 128 !important;
  --primary: #b86d45 !important;
  --primary-rgb: 184, 109, 69 !important;
  --primary-strong: #684125 !important;
  --primary-strong-rgb: 104, 65, 37 !important;
  --primary-deep: #4c2e1b !important;
  --primary-deep-rgb: 76, 46, 27 !important;
  --on-primary: #fffaf2 !important;
  --gold-rgb: 184, 109, 69 !important;
  --dark-line-rgb: 23, 52, 75 !important;
  --ink-rgb: 23, 52, 75 !important;
  --ivory-rgb: 247, 241, 232 !important;
  --dark-surface: #17344b !important;
  --dark-surface-rgb: 23, 52, 75 !important;
  --dark-text: #f7f1e8 !important;
  --dark-muted-rgb: 247, 241, 232 !important;
  --light-card-surface: #fffaf2 !important;
  --light-card-hover: #f1e9de !important;
  --light-card-featured: #e6e0d6 !important;
  --light-graphite: #17344b !important;
  --light-graphite-deep: #17344b !important;
  --light-graphite-muted: #6f7b80 !important;
  --light-graphite-rgb: 23, 52, 75 !important;
}

html.light[data-theme="light"] body,
html.light[data-theme="light"] body .section,
html.light[data-theme="light"] body #about,
html.light[data-theme="light"] body #services,
html.light[data-theme="light"] body #popular,
html.light[data-theme="light"] body #faq,
html.light[data-theme="light"] body #why-pro-lex,
html.light[data-theme="light"] body #articles {
  background-color: #f7f1e8 !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .section-muted,
html.light[data-theme="light"] body .workflow-block,
html.light[data-theme="light"] body .workflow-experience,
html.light[data-theme="light"] body .doubts-section,
html.light[data-theme="light"] body .articles-home-section {
  background-color: #eef0ef !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .trust-bar,
html.light[data-theme="light"] body #trust {
  background-color: #e6e0d6 !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .area-card,
html.light[data-theme="light"] body .list-card,
html.light[data-theme="light"] body .case-card,
html.light[data-theme="light"] body .service-choice-card,
html.light[data-theme="light"] body .service-directory-card,
html.light[data-theme="light"] body .pricing-decision-card,
html.light[data-theme="light"] body .pricing-format-card,
html.light[data-theme="light"] body .pricing-service-item,
html.light[data-theme="light"] body .service-info-card,
html.light[data-theme="light"] body .contacts-panel,
html.light[data-theme="light"] body .contacts-row,
html.light[data-theme="light"] body .subscription-plan,
html.light[data-theme="light"] body .subscription-faq-list details,
html.light[data-theme="light"] body .subscription-table-wrap,
html.light[data-theme="light"] body .pricing-options,
html.light[data-theme="light"] body .price-list div,
html.light[data-theme="light"] body .trust-note,
html.light[data-theme="light"] body .wide-link,
html.light[data-theme="light"] body .contact-dialog-panel,
html.light[data-theme="light"] body .contact-form,
html.light[data-theme="light"] body .service-package-card,
html.light[data-theme="light"] body .article-directory-card,
html.light[data-theme="light"] body .article-summary-card,
html.light[data-theme="light"] body .doubt-item,
html.light[data-theme="light"] body .faq-list details,
html.light[data-theme="light"] body .reason-outcome,
html.light[data-theme="light"] body .workflow-step-surface,
html.light[data-theme="light"] body .subscription-benefit {
  background: #fffcf7 !important;
  background-image: none !important;
  border-color: rgba(23, 52, 75, .2) !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .area-card:hover,
html.light[data-theme="light"] body .list-card:hover,
html.light[data-theme="light"] body .case-card:hover,
html.light[data-theme="light"] body .service-directory-card:hover,
html.light[data-theme="light"] body .service-package-card:hover,
html.light[data-theme="light"] body .doubt-item:hover,
html.light[data-theme="light"] body .faq-list details:hover,
html.light[data-theme="light"] body .workflow-step-surface:hover {
  background: #fffcf7 !important;
  border-color: rgba(184, 109, 69, .55) !important;
}

html.light[data-theme="light"] body h1,
html.light[data-theme="light"] body h2,
html.light[data-theme="light"] body h3,
html.light[data-theme="light"] body h4,
html.light[data-theme="light"] body .section-copy h2,
html.light[data-theme="light"] body .doubts-header h2,
html.light[data-theme="light"] body .section h2,
html.light[data-theme="light"] body .section h3,
html.light[data-theme="light"] body .area-card h2,
html.light[data-theme="light"] body .area-card h3,
html.light[data-theme="light"] body .service-package-card h2,
html.light[data-theme="light"] body .service-package-card h3,
html.light[data-theme="light"] body .service-package-card h4 {
  color: #17344b !important;
}

html.light[data-theme="light"] body p,
html.light[data-theme="light"] body li,
html.light[data-theme="light"] body .section-copy p,
html.light[data-theme="light"] body .doubts-header p,
html.light[data-theme="light"] body .section > .container > p,
html.light[data-theme="light"] body .area-card p,
html.light[data-theme="light"] body .area-card li,
html.light[data-theme="light"] body .service-package-card p,
html.light[data-theme="light"] body .service-package-card li {
  color: #6f7b80 !important;
}

html.light[data-theme="light"] body .material-symbols-outlined,
html.light[data-theme="light"] body .section-kicker,
html.light[data-theme="light"] body .section-label,
html.light[data-theme="light"] body .eyebrow,
html.light[data-theme="light"] body .article-card-category,
html.light[data-theme="light"] body .article-card-link {
  color: #b86d45 !important;
}

html.light[data-theme="light"] body .button,
html.light[data-theme="light"] body .button-primary,
html.light[data-theme="light"] body .header-cta,
html.light[data-theme="light"] body input[type="submit"],
html.light[data-theme="light"] body .package-link,
html.light[data-theme="light"] body .pricing-request-link {
  border-color: #684125 !important;
  background: #684125 !important;
  color: #fffaf2 !important;
  box-shadow: 0 10px 24px rgba(104, 65, 37, .18) !important;
}

html.light[data-theme="light"] body .button-ghost,
html.light[data-theme="light"] body .articles-home-link,
html.light[data-theme="light"] body .wide-link {
  border-color: rgba(104, 65, 37, .42) !important;
  background: transparent !important;
  color: #684125 !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body input,
html.light[data-theme="light"] body textarea,
html.light[data-theme="light"] body select {
  border-color: rgba(23, 52, 75, .26) !important;
  background: #fffaf2 !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .service-final-cta,
html.light[data-theme="light"] body .subscription-hero,
html.light[data-theme="light"] body .cta.media-section,
html.light[data-theme="light"] body footer,
html.light[data-theme="light"] body .site-footer {
  background-color: #17344b !important;
  color: #f7f1e8 !important;
}

/* Use the same warm-white block tone as the cards in “Why choose Pro Lex Strategy”. */
html.light[data-theme="light"] body :where(
  .area-card,
  .list-card,
  .case-card,
  .service-choice-card,
  .service-directory-card,
  .pricing-decision-card,
  .pricing-format-card,
  .pricing-service-item,
  .service-info-card,
  .contacts-panel,
  .contacts-row,
  .subscription-plan,
  .subscription-faq-list details,
  .subscription-table-wrap,
  .pricing-options,
  .price-list div,
  .trust-note,
  .contact-dialog-panel,
  .contact-form,
  .service-package-card,
  .article-directory-card,
  .article-summary-card,
  .doubt-item,
  .faq-list details,
  .reason-outcome,
  .workflow-step-surface,
  .reason-item,
  .subscription-benefit
) {
  background: #fffcf7 !important;
  background-image: none !important;
  border-color: #d0d7d5 !important;
}

/* Raise specificity for legacy page rules so every light-theme content card
   uses the same tone as the “Why choose Pro Lex Strategy” cards. */
html.light[data-theme="light"] body #services .service-package-card,
html.light[data-theme="light"] body #services .area-card,
html.light[data-theme="light"] body #popular .service-package-card,
html.light[data-theme="light"] body #popular .area-card,
html.light[data-theme="light"] body .article-card,
html.light[data-theme="light"] body .pricing-option-row,
html.light[data-theme="light"] body .article-archive-tools,
html.light[data-theme="light"] body .article-search-control,
html.light[data-theme="light"] body .form-trust-list {
  background-color: #fffcf7 !important;
  background-image: none !important;
  border-color: #d0d7d5 !important;
}

/* The same reference tone is used for every light-theme content block,
   including the full-width blocks on the homepage and inner pages. */
html.light[data-theme="light"] body .section,
html.light[data-theme="light"] body .section-muted,
html.light[data-theme="light"] body .trust-bar,
html.light[data-theme="light"] body #trust,
html.light[data-theme="light"] body #about,
html.light[data-theme="light"] body #services,
html.light[data-theme="light"] body #popular,
html.light[data-theme="light"] body #why-pro-lex,
html.light[data-theme="light"] body #articles,
html.light[data-theme="light"] body #faq,
html.light[data-theme="light"] body .workflow-block,
html.light[data-theme="light"] body .workflow-experience,
html.light[data-theme="light"] body .doubts-section,
html.light[data-theme="light"] body .articles-home-section,
html.light[data-theme="light"] body .service-archive-page,
html.light[data-theme="light"] body .service-detail-page,
html.light[data-theme="light"] body .pricing-page,
html.light[data-theme="light"] body .article-archive-page,
html.light[data-theme="light"] body .pricing-hero,
html.light[data-theme="light"] body .service-hero,
html.light[data-theme="light"] body .article-archive-hero {
  background-color: #fffcf7 !important;
}

html.light[data-theme="light"] body :where(
  .area-card:hover,
  .list-card:hover,
  .case-card:hover,
  .service-choice-card:hover,
  .service-directory-card:hover,
  .pricing-decision-card:hover,
  .pricing-format-card:hover,
  .pricing-service-item:hover,
  .service-info-card:hover,
  .contacts-panel:hover,
  .contacts-row:hover,
  .subscription-plan:hover,
  .service-package-card:hover,
  .article-directory-card:hover,
  .article-summary-card:hover,
  .doubt-item:hover,
  .faq-list details:hover,
  .workflow-step-surface:hover,
  .reason-item:hover,
  .reason-item:focus-within
) {
  background: #fffcf7 !important;
  border-color: #d0d7d5 !important;
}

/* Match the reference hierarchy: the trust/statistics band is stone beige,
   while the surrounding content and its cards remain warm white. */
html.light[data-theme="light"] body .trust-bar,
html.light[data-theme="light"] body #trust {
  background-color: #e6e0d6 !important;
  background-image: none !important;
  border-color: rgba(104, 65, 37, 0.2) !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .trust-bar .benefit-strip span {
  border-color: rgba(23, 52, 75, 0.18) !important;
  background: #f7f1e8 !important;
  color: #17344b !important;
}

/* Final light-theme corrections: keep controls visible and content readable
   on narrow and tablet-sized screens without changing the dark theme. */
html.light[data-theme="light"] body #services .area-card-link.package-link,
html.light[data-theme="light"] body #popular .area-card-link.package-link,
html.light[data-theme="light"] body .area-card-link.package-link,
html.light[data-theme="light"] body .service-package-card .package-link,
html.light[data-theme="light"] body .service-directory-card .package-link,
html.light[data-theme="light"] body .package-link.package-link-button {
  border-color: #684125 !important;
  background: #684125 !important;
  color: #fffaf2 !important;
  box-shadow: 0 10px 24px rgba(104, 65, 37, 0.18) !important;
}

html.light[data-theme="light"] body #services .area-card-link.package-link:hover,
html.light[data-theme="light"] body #services .area-card-link.package-link:focus-visible,
html.light[data-theme="light"] body #popular .area-card-link.package-link:hover,
html.light[data-theme="light"] body #popular .area-card-link.package-link:focus-visible,
html.light[data-theme="light"] body .area-card-link.package-link:hover,
html.light[data-theme="light"] body .area-card-link.package-link:focus-visible,
html.light[data-theme="light"] body .service-package-card .package-link:hover,
html.light[data-theme="light"] body .service-package-card .package-link:focus-visible,
html.light[data-theme="light"] body .service-directory-card .package-link:hover,
html.light[data-theme="light"] body .service-directory-card .package-link:focus-visible,
html.light[data-theme="light"] body .package-link.package-link-button:hover,
html.light[data-theme="light"] body .package-link.package-link-button:focus-visible {
  border-color: #4d2f1e !important;
  background: #4d2f1e !important;
  color: #fffaf2 !important;
}

@media (max-width: 760px) {
  /* The tablet breakpoint previously kept the desktop pricing grid, which
     made dependency rows wider than their parent and clipped the right side. */
  html.light[data-theme="light"] body .pricing-options {
    min-width: 0;
    overflow: visible;
  }

  html.light[data-theme="light"] body .pricing-options-head {
    display: none !important;
  }

  html.light[data-theme="light"] body .pricing-option-row,
  html.light[data-theme="light"] body .pricing-options-dependency .pricing-option-row,
  html.light[data-theme="light"] body .pricing-options-detail-2 .pricing-option-row,
  html.light[data-theme="light"] body .pricing-options-detail-3 .pricing-option-row {
    width: auto;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
    border: 1px solid #d0d7d5;
    padding: 16px;
  }

  html.light[data-theme="light"] body .pricing-option-row > *,
  html.light[data-theme="light"] body .pricing-option-details,
  html.light[data-theme="light"] body .pricing-option-value {
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html.light[data-theme="light"] body .pricing-option-details {
    padding-left: 0;
  }

  html.light[data-theme="light"] body .pricing-option-value {
    justify-items: start;
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid #d0d7d5;
    text-align: left;
  }

  /* These fixed utilities obscured breadcrumbs, copy and CTAs on mobile. */
  html.light[data-theme="light"] .social-rail,
  html.light[data-theme="light"] .site-map-toggle,
  html.light[data-theme="light"] .page-scroll-controls {
    display: none !important;
  }
}

/* Cooperation stages: editorial five-step route from the supplied reference.
   This is intentionally scoped to the light theme; the dark theme keeps its
   existing interactive workflow treatment. */
html.light[data-theme="light"] body .workflow-block {
  overflow: hidden;
  background-color: #f7f1e8 !important;
  background-image:
    linear-gradient(rgba(23, 52, 75, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 52, 75, 0.035) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
}

html.light[data-theme="light"] body .workflow-panel {
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent !important;
}

html.light[data-theme="light"] body .workflow-header {
  max-width: 860px;
  margin-inline: auto;
  gap: 12px;
  padding: 0;
  text-align: center;
}

html.light[data-theme="light"] body .workflow-header h2 {
  color: #17344b !important;
  font-family: "Noto Serif", serif;
  font-size: clamp(2.15rem, 4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

html.light[data-theme="light"] body .workflow-header p {
  max-width: 760px;
  margin-inline: auto;
  color: #6f7b80 !important;
  font-family: Manrope, sans-serif;
  font-size: clamp(0.86rem, 1.1vw, 1rem);
  line-height: 1.55;
  text-align: center;
}

html.light[data-theme="light"] body .workflow-experience {
  margin-top: clamp(38px, 5vw, 66px);
  overflow: visible;
  background: transparent !important;
  background-image: none !important;
}

html.light[data-theme="light"] body .workflow-track {
  --workflow-start: clamp(76px, 8vw, 112px);
  --workflow-step-gap: clamp(38px, 4vw, 62px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 1.7vw, 24px);
  padding: 0 0 clamp(34px, 4vw, 56px);
  overflow: visible;
  background: transparent !important;
  background-image: none !important;
}

html.light[data-theme="light"] body .workflow-route,
html.light[data-theme="light"] body .workflow-step-surface {
  display: none !important;
}

html.light[data-theme="light"] body .workflow-step {
  --workflow-offset: var(--workflow-start);
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: var(--workflow-offset) 0 0 !important;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  cursor: default;
}

html.light[data-theme="light"] body .workflow-step:nth-child(2) {
  --workflow-offset: calc(var(--workflow-start) + var(--workflow-step-gap));
}

html.light[data-theme="light"] body .workflow-step:nth-child(3) {
  --workflow-offset: calc(var(--workflow-start) + var(--workflow-step-gap) * 2);
}

html.light[data-theme="light"] body .workflow-step:nth-child(4) {
  --workflow-offset: calc(var(--workflow-start) + var(--workflow-step-gap) * 3);
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) {
  --workflow-offset: calc(var(--workflow-start) + var(--workflow-step-gap) * 4);
}

html.light[data-theme="light"] body .workflow-step::after {
  position: absolute;
  top: calc(-1 * var(--workflow-offset) + 32px);
  left: 50%;
  z-index: 1;
  width: 1px;
  height: calc(var(--workflow-offset) - 32px);
  background: rgba(23, 52, 75, 0.28);
  content: "";
  pointer-events: none;
}

html.light[data-theme="light"] body .workflow-step-number {
  position: absolute;
  top: calc(-1 * var(--workflow-offset));
  left: 50%;
  z-index: 3;
  display: block;
  color: #b86d45 !important;
  font-family: Manrope, sans-serif;
  font-size: 0;
  font-weight: 500;
  line-height: 1;
  transform: translateX(-50%);
}

html.light[data-theme="light"] body .workflow-step-number::before {
  display: none !important;
}

html.light[data-theme="light"] body .workflow-step-number::after {
  display: block;
  content: attr(data-step-number);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
}

html.light[data-theme="light"] body .workflow-step-copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 178px;
  gap: 10px;
  align-content: start;
  padding: 21px 19px 18px;
  border: 1px solid rgba(23, 52, 75, 0.17);
  background: #fffdf8 !important;
  box-shadow: 0 14px 28px rgba(23, 52, 75, 0.055);
  text-align: left;
}

html.light[data-theme="light"] body .workflow-step-title {
  color: #17344b !important;
  font-family: Manrope, sans-serif;
  font-size: clamp(0.98rem, 1.15vw, 1.2rem);
  font-weight: 700;
  line-height: 1.2;
}

html.light[data-theme="light"] body .workflow-step p {
  margin: 0;
  color: #6f7b80 !important;
  font-family: Manrope, sans-serif;
  font-size: clamp(0.76rem, 0.88vw, 0.9rem);
  font-weight: 500;
  line-height: 1.48;
}

html.light[data-theme="light"] body .workflow-step small {
  display: block;
  grid-column: auto;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(184, 109, 69, 0.26);
  color: #b86d45 !important;
  font-family: Manrope, sans-serif;
  font-size: 0.59rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-transform: uppercase;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-copy {
  border-color: #17344b;
  background: #17344b !important;
  box-shadow: 0 18px 34px rgba(23, 52, 75, 0.18);
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title,
html.light[data-theme="light"] body .workflow-step:nth-child(5) p {
  color: #f7f1e8 !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) small {
  border-top-color: rgba(247, 241, 232, 0.28);
  color: #f0b28e !important;
}

html.light[data-theme="light"] body .workflow-step:hover .workflow-step-copy,
html.light[data-theme="light"] body .workflow-step:focus-visible .workflow-step-copy {
  border-color: rgba(184, 109, 69, 0.55);
  box-shadow: 0 18px 34px rgba(23, 52, 75, 0.1);
}

html.light[data-theme="light"] body .workflow-step:nth-child(5):hover .workflow-step-copy,
html.light[data-theme="light"] body .workflow-step:nth-child(5):focus-visible .workflow-step-copy {
  border-color: #17344b;
  box-shadow: 0 20px 38px rgba(23, 52, 75, 0.22);
}

@media (max-width: 980px) {
  html.light[data-theme="light"] body .workflow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
    padding-bottom: 14px;
  }

  html.light[data-theme="light"] body .workflow-step,
  html.light[data-theme="light"] body .workflow-step:nth-child(n) {
    --workflow-offset: 0px;
    margin-top: 48px !important;
  }

  html.light[data-theme="light"] body .workflow-step-number {
    top: -34px;
  }

  html.light[data-theme="light"] body .workflow-step::after {
    top: -17px;
    height: 17px;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body .workflow-header h2 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  html.light[data-theme="light"] body .workflow-track {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  html.light[data-theme="light"] body .workflow-step,
  html.light[data-theme="light"] body .workflow-step:nth-child(n) {
    margin-top: 38px !important;
  }

  html.light[data-theme="light"] body .workflow-step-copy {
    min-height: 0;
    padding: 20px 18px 17px 52px;
  }

  html.light[data-theme="light"] body .workflow-step-number {
    top: 19px;
    left: 18px;
    transform: none;
  }

  html.light[data-theme="light"] body .workflow-step::after {
    top: 0;
    left: 29px;
    height: 19px;
  }
}

/* Light-theme actions use the same deep navy as the Pro Lex Strategy heading. */
html.light[data-theme="light"] body button,
html.light[data-theme="light"] body .button,
html.light[data-theme="light"] body .button-primary,
html.light[data-theme="light"] body .header-cta,
html.light[data-theme="light"] body input[type="submit"],
html.light[data-theme="light"] body .package-link,
html.light[data-theme="light"] body .pricing-request-link {
  border-color: #17344b !important;
  background: #17344b !important;
  color: #f7f1e8 !important;
  box-shadow: 0 10px 24px rgba(23, 52, 75, .18) !important;
}

html.light[data-theme="light"] body button:hover,
html.light[data-theme="light"] body button:focus-visible,
html.light[data-theme="light"] body .button:hover,
html.light[data-theme="light"] body .button:focus-visible,
html.light[data-theme="light"] body .button-primary:hover,
html.light[data-theme="light"] body .button-primary:focus-visible,
html.light[data-theme="light"] body .header-cta:hover,
html.light[data-theme="light"] body .header-cta:focus-visible,
html.light[data-theme="light"] body input[type="submit"]:hover,
html.light[data-theme="light"] body input[type="submit"]:focus-visible,
html.light[data-theme="light"] body .package-link:hover,
html.light[data-theme="light"] body .package-link:focus-visible,
html.light[data-theme="light"] body .pricing-request-link:hover,
html.light[data-theme="light"] body .pricing-request-link:focus-visible {
  border-color: #102a3c !important;
  background: #102a3c !important;
  color: #f7f1e8 !important;
}

html.light[data-theme="light"] body .button-ghost,
html.light[data-theme="light"] body .articles-home-link,
html.light[data-theme="light"] body .wide-link {
  border-color: rgba(23, 52, 75, .42) !important;
  background: transparent !important;
  color: #17344b !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .button-ghost:hover,
html.light[data-theme="light"] body .button-ghost:focus-visible,
html.light[data-theme="light"] body .articles-home-link:hover,
html.light[data-theme="light"] body .articles-home-link:focus-visible,
html.light[data-theme="light"] body .wide-link:hover,
html.light[data-theme="light"] body .wide-link:focus-visible {
  border-color: #17344b !important;
  background: rgba(23, 52, 75, .08) !important;
  color: #17344b !important;
}

/* The service-card rule above is intentionally more specific, so repeat the
   final navy value here to keep every action link on the same light palette. */
html.light[data-theme="light"] body #services .area-card-link.package-link,
html.light[data-theme="light"] body #popular .area-card-link.package-link,
html.light[data-theme="light"] body .area-card-link.package-link,
html.light[data-theme="light"] body .service-package-card .package-link,
html.light[data-theme="light"] body .service-directory-card .package-link,
html.light[data-theme="light"] body .package-link.package-link-button {
  border-color: #17344b !important;
  background: #17344b !important;
  color: #f7f1e8 !important;
  box-shadow: 0 10px 24px rgba(23, 52, 75, .18) !important;
}

html.light[data-theme="light"] body #services .area-card-link.package-link:hover,
html.light[data-theme="light"] body #services .area-card-link.package-link:focus-visible,
html.light[data-theme="light"] body #popular .area-card-link.package-link:hover,
html.light[data-theme="light"] body #popular .area-card-link.package-link:focus-visible,
html.light[data-theme="light"] body .area-card-link.package-link:hover,
html.light[data-theme="light"] body .area-card-link.package-link:focus-visible,
html.light[data-theme="light"] body .service-package-card .package-link:hover,
html.light[data-theme="light"] body .service-package-card .package-link:focus-visible,
html.light[data-theme="light"] body .service-directory-card .package-link:hover,
html.light[data-theme="light"] body .service-directory-card .package-link:focus-visible,
html.light[data-theme="light"] body .package-link.package-link-button:hover,
html.light[data-theme="light"] body .package-link.package-link-button:focus-visible {
  border-color: #102a3c !important;
  background: #102a3c !important;
  color: #f7f1e8 !important;
}

/* Refined interaction states: restrained movement, stronger hierarchy, and
   a visible keyboard ring without changing the page structure. */
html.light[data-theme="light"] body :where(
  .button,
  .header-cta,
  .area-card-link.package-link,
  .pricing-request-link
) {
  align-items: center;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    transform .2s ease !important;
}

html.light[data-theme="light"] body :where(
  .button-primary,
  .header-cta,
  .area-card-link.package-link,
  .pricing-request-link
):hover {
  box-shadow: 0 14px 28px rgba(23, 52, 75, .24) !important;
  transform: translateY(-2px);
}

html.light[data-theme="light"] body :where(
  .button-primary,
  .header-cta,
  .area-card-link.package-link,
  .pricing-request-link
):active {
  box-shadow: 0 7px 14px rgba(23, 52, 75, .18) !important;
  transform: translateY(0);
}

html.light[data-theme="light"] body :where(
  .button,
  .header-cta,
  .area-card-link.package-link,
  .pricing-request-link
):focus-visible {
  outline: 3px solid rgba(184, 109, 69, .42) !important;
  outline-offset: 3px;
}

html.light[data-theme="light"] body :where(
  .button,
  .header-cta,
  .area-card-link.package-link,
  .pricing-request-link
):disabled,
html.light[data-theme="light"] body :where(
  .button,
  .header-cta,
  .area-card-link.package-link,
  .pricing-request-link
)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none !important;
}

/* Editorial text-only treatment for the cooperation stages. */
html.light[data-theme="light"] body .workflow-step-copy {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .workflow-step small {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0 !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title {
  color: #17344b !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) p {
  color: #6f7b80 !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) small {
  color: #17344b !important;
}

/* Override the featured fifth card as well, so no stage retains a surface. */
html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-copy {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The requested final treatment: outlined stages with transparent interiors. */
html.light[data-theme="light"] body .workflow-track {
  counter-reset: light-workflow-step;
}

html.light[data-theme="light"] body .workflow-step {
  counter-increment: light-workflow-step;
  position: relative;
}

html.light[data-theme="light"] body .workflow-step-copy {
  min-height: 178px !important;
  padding: 21px 19px 18px !important;
  border: 1px solid rgba(23, 52, 75, .34) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-copy {
  border: 1px solid rgba(23, 52, 75, .58) !important;
  border-color: rgba(23, 52, 75, .58) !important;
  background: transparent !important;
}

html.light[data-theme="light"] body .workflow-step-title,
html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title {
  color: #17344b !important;
}

html.light[data-theme="light"] body .workflow-step p,
html.light[data-theme="light"] body .workflow-step:nth-child(5) p {
  color: #6f7b80 !important;
}

html.light[data-theme="light"] body .workflow-step small,
html.light[data-theme="light"] body .workflow-step:nth-child(5) small {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(23, 52, 75, .22) !important;
  color: #17344b !important;
}

html.light[data-theme="light"] body .workflow-step-number::after {
  content: counter(light-workflow-step, decimal-leading-zero) !important;
}

@keyframes light-workflow-connector {
  from {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }

  to {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

html.light[data-theme="light"] body .workflow-step::after {
  background: rgba(23, 52, 75, .32) !important;
  animation: light-workflow-connector .7s cubic-bezier(.22, 1, .36, 1) both;
}

html.light[data-theme="light"] body .workflow-step:nth-child(1)::after { animation-delay: .05s; }
html.light[data-theme="light"] body .workflow-step:nth-child(2)::after { animation-delay: .17s; }
html.light[data-theme="light"] body .workflow-step:nth-child(3)::after { animation-delay: .29s; }
html.light[data-theme="light"] body .workflow-step:nth-child(4)::after { animation-delay: .41s; }
html.light[data-theme="light"] body .workflow-step:nth-child(5)::after { animation-delay: .53s; }

/* Start the connector reveal when the workflow actually enters the viewport. */
html.light[data-theme="light"] body .workflow-step::after {
  animation: none;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
}

html.light[data-theme="light"] body .workflow-experience.is-in-view .workflow-step::after {
  animation-name: light-workflow-connector;
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}

html.light[data-theme="light"] body .workflow-step-copy {
  border-radius: 12px !important;
}

/* Keep each arrow centered below its number and reveal it on card hover. */
html.light[data-theme="light"] body .workflow-step::after {
  display: block !important;
  left: 50% !important;
  width: 10px !important;
  border-radius: 0 !important;
  background: #17344b !important;
  box-shadow: none !important;
  clip-path: polygon(
    42% 0,
    58% 0,
    58% calc(100% - 7px),
    100% calc(100% - 7px),
    50% 100%,
    0 calc(100% - 7px),
    42% calc(100% - 7px)
  ) !important;
  opacity: 0 !important;
  transform: translateX(-50%) scaleY(0) !important;
  transform-origin: top center !important;
  animation: none !important;
  transition: opacity 180ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1) !important;
}

html.light[data-theme="light"] body .workflow-step:hover::after,
html.light[data-theme="light"] body .workflow-step:focus-visible::after {
  opacity: 1 !important;
  transform: translateX(-50%) scaleY(1) !important;
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body .workflow-step::after {
    top: 0 !important;
    left: 29px !important;
    height: 19px !important;
    transform: translateX(-50%) scaleY(0) !important;
  }

  html.light[data-theme="light"] body .workflow-step:hover::after,
  html.light[data-theme="light"] body .workflow-step:focus-visible::after {
    transform: translateX(-50%) scaleY(1) !important;
  }
}

/* Reference-style cooperation timeline: aligned numbers, descending cards and a soft guide line. */
html.light[data-theme="light"] body .workflow-track {
  --workflow-start: clamp(76px, 8vw, 112px) !important;
  --workflow-step-gap: clamp(32px, 3.8vw, 58px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding-inline: clamp(18px, 3.6vw, 74px) !important;
}

html.light[data-theme="light"] body .workflow-step-copy {
  min-height: 178px !important;
  padding: 21px 19px 18px !important;
  border: 1px solid rgba(23, 52, 75, .16) !important;
  border-radius: 6px !important;
  background: #fffdf8 !important;
  box-shadow: 0 12px 26px rgba(23, 52, 75, .055) !important;
}

/* The reference cards show only the stage title and explanation. Keep metadata
   available in the DOM for the dark layout, but keep the light composition clean. */
html.light[data-theme="light"] body .workflow-step > small {
  display: none !important;
}

html.light[data-theme="light"] body #workflow {
  scroll-margin-top: 86px;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-copy {
  border-color: #17344b !important;
  background: #17344b !important;
  box-shadow: 0 16px 30px rgba(23, 52, 75, .16) !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title,
html.light[data-theme="light"] body .workflow-step:nth-child(5) p {
  color: #f7f1e8 !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) small {
  border-top-color: rgba(247, 241, 232, .28) !important;
  color: #f0b28e !important;
}

html.light[data-theme="light"] body .workflow-step::after {
  display: block !important;
  top: calc(-1 * var(--workflow-offset) + 32px) !important;
  left: 50% !important;
  width: 1px !important;
  height: calc(var(--workflow-offset) - 32px) !important;
  border-radius: 0 !important;
  background: rgba(23, 52, 75, .24) !important;
  box-shadow: none !important;
  clip-path: none !important;
  opacity: .9 !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
  animation: none !important;
  transition: background-color 180ms ease, width 180ms ease !important;
}

html.light[data-theme="light"] body .workflow-step-copy::before {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #17344b;
  border-bottom: 1.5px solid #17344b;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg) scale(.35);
  transform-origin: center;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1) !important;
}

html.light[data-theme="light"] body .workflow-step:hover::after,
html.light[data-theme="light"] body .workflow-step:focus-visible::after {
  width: 2px !important;
  background: #17344b !important;
}

html.light[data-theme="light"] body .workflow-step:hover .workflow-step-copy::before,
html.light[data-theme="light"] body .workflow-step:focus-visible .workflow-step-copy::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

@media (min-width: 641px) {
  html.light[data-theme="light"] body .workflow-step-number {
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body .workflow-step::after {
    display: none !important;
  }

  html.light[data-theme="light"] body .workflow-step-copy::before {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.light[data-theme="light"] body .workflow-step::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* Match the homepage content width on every page. */
html.light[data-theme="light"] body {
  --container: 1280px !important;
}

html.light[data-theme="light"] body .container,
html.light[data-theme="light"] body .hero-inner,
html.light[data-theme="light"] body .hero-inner-left {
  width: min(calc(100% - (var(--gutter) * 2)), 1280px) !important;
}

/* Device adaptation: keep the wide editorial layout on desktop, then switch
   to compact two-column and one-column flows before content becomes cramped. */
@media (max-width: 980px) {
  html.light[data-theme="light"] body {
    --gutter: 24px !important;
  }

  html.light[data-theme="light"] body .container,
  html.light[data-theme="light"] body .hero-inner,
  html.light[data-theme="light"] body .hero-inner-left {
    width: calc(100% - (var(--gutter) * 2)) !important;
  }

  html.light[data-theme="light"] body .workflow-track {
    padding-inline: 0 !important;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body {
    --gutter: 16px !important;
  }

  html.light[data-theme="light"] body .container,
  html.light[data-theme="light"] body .hero-inner,
  html.light[data-theme="light"] body .hero-inner-left {
    width: calc(100% - (var(--gutter) * 2)) !important;
  }

  html.light[data-theme="light"] body .workflow-block {
    padding-block: 48px 42px !important;
  }

  html.light[data-theme="light"] body .workflow-header h2 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
    line-height: 1.05 !important;
  }

  html.light[data-theme="light"] body .workflow-header p {
    max-width: 34ch !important;
  }

  html.light[data-theme="light"] body .workflow-step-copy {
    min-height: 0 !important;
    padding: 20px 18px 18px 52px !important;
  }

  html.light[data-theme="light"] body .workflow-step-title {
    font-size: 1.05rem !important;
  }

  html.light[data-theme="light"] body .workflow-step p {
    font-size: .93rem !important;
    line-height: 1.48 !important;
  }
}

/* Reasons cards: repeat a calm 1–2–3 palette across both rows while keeping
   one shared editorial decoration on every card. Dark theme is intentionally
   excluded from this treatment. */
html.light[data-theme="light"] body #why-pro-lex {
  --reason-tone-1: #fcfaf6;
  --reason-tone-2: #f3e9dc;
  --reason-tone-3: #e6d6c4;
  --reason-card-decor:
    linear-gradient(135deg, transparent 0 58%, rgba(184, 109, 69, .07) 58.2% 58.7%, transparent 59%),
    linear-gradient(90deg, rgba(23, 52, 75, .035) 1px, transparent 1px),
    linear-gradient(rgba(23, 52, 75, .035) 1px, transparent 1px),
    radial-gradient(circle at 88% 16%, rgba(184, 109, 69, .08) 0 2px, transparent 2.5px);
}

html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item,
html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item:hover,
html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item:focus-within {
  border: 1px solid rgba(23, 52, 75, .18) !important;
  border-radius: 6px !important;
  background-color: var(--reason-tone-1) !important;
  background-image: var(--reason-card-decor) !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-size: auto, 72px 72px, 72px 72px, auto !important;
  box-shadow: 0 12px 28px rgba(23, 52, 75, .055) !important;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item:nth-child(3n + 2) {
  background-color: var(--reason-tone-2) !important;
}

html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item:nth-child(3n) {
  background-color: var(--reason-tone-3) !important;
}

html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item:hover,
html.light[data-theme="light"] body #why-pro-lex .reason-grid .reason-item:focus-within {
  border-color: rgba(184, 109, 69, .42) !important;
  box-shadow: 0 16px 32px rgba(23, 52, 75, .1) !important;
}

/* Full-width section sides: the same 1–2–3 light sequence continues across
   the page, with one restrained architectural decoration shared by every
   light block. */
html.light[data-theme="light"] body {
  --page-tone-1: #fbf8f1;
  --page-tone-2: #f3e9dc;
  --page-tone-3: #e8dacc;
  --page-block-decor:
    linear-gradient(90deg, rgba(23, 52, 75, .028) 1px, transparent 1px),
    linear-gradient(rgba(23, 52, 75, .028) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 49.4%, rgba(184, 109, 69, .04) 49.6% 50%, transparent 50.2%),
    radial-gradient(circle at 82% 18%, rgba(184, 109, 69, .055) 0 2px, transparent 2.5px);
}

html.light[data-theme="light"] body .light-block-tone-1,
html.light[data-theme="light"] body .light-block-tone-2,
html.light[data-theme="light"] body .light-block-tone-3 {
  background-image: var(--page-block-decor) !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-size: 96px 96px, 96px 96px, auto, auto !important;
}

html.light[data-theme="light"] body .light-block-tone-1 {
  background-color: var(--page-tone-1) !important;
}

html.light[data-theme="light"] body .light-block-tone-2 {
  background-color: var(--page-tone-2) !important;
}

html.light[data-theme="light"] body .light-block-tone-3 {
  background-color: var(--page-tone-3) !important;
}

/* Let the section decoration run continuously through the reasons/workflow
   area instead of placing a second, unrelated rectangle over its sides. */
html.light[data-theme="light"] body #why-pro-lex > .reasons-block,
html.light[data-theme="light"] body #why-pro-lex > .workflow-block {
  background-color: transparent !important;
  background-image: none !important;
}

/* Keep the tone rules stronger than the legacy ID-based palette rules. */
html.light[data-theme="light"] body #services.light-block-tone-1,
html.light[data-theme="light"] body #articles.light-block-tone-1,
html.light[data-theme="light"] body #popular.light-block-tone-2,
html.light[data-theme="light"] body #faq.light-block-tone-2,
html.light[data-theme="light"] body #about.light-block-tone-3,
html.light[data-theme="light"] body #why-pro-lex.light-block-tone-3 {
  background-image: var(--page-block-decor) !important;
  background-position: 0 0, 0 0, 0 0, 0 0 !important;
  background-size: 96px 96px, 96px 96px, auto, auto !important;
}

html.light[data-theme="light"] body #services.light-block-tone-1,
html.light[data-theme="light"] body #articles.light-block-tone-1 {
  background-color: var(--page-tone-1) !important;
}

html.light[data-theme="light"] body #popular.light-block-tone-2,
html.light[data-theme="light"] body #faq.light-block-tone-2 {
  background-color: var(--page-tone-2) !important;
}

html.light[data-theme="light"] body #about.light-block-tone-3,
html.light[data-theme="light"] body #why-pro-lex.light-block-tone-3 {
  background-color: var(--page-tone-3) !important;
}

/* Reference typography: Gilroy's clean sans-serif hierarchy, with the
   bundled Manrope face as a reliable fallback when Gilroy is unavailable. */
html.light[data-theme="light"] body,
html.light[data-theme="light"] body p,
html.light[data-theme="light"] body button,
html.light[data-theme="light"] body input,
html.light[data-theme="light"] body textarea,
html.light[data-theme="light"] body select,
html.light[data-theme="light"] body h1,
html.light[data-theme="light"] body h2,
html.light[data-theme="light"] body h3,
html.light[data-theme="light"] body h4 {
  font-family: "Gilroy", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

html.light[data-theme="light"] body h1,
html.light[data-theme="light"] body h2,
html.light[data-theme="light"] body h3,
html.light[data-theme="light"] body h4 {
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}

html.light[data-theme="light"] body .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  letter-spacing: normal !important;
}

/* The sequence is reusable even when a section also carries an ID with a
   legacy background rule. */
html.light[data-theme="light"] body :is(#about, #services, #popular, #why-pro-lex, #articles, #faq).light-block-tone-1 {
  background-color: var(--page-tone-1) !important;
  background-image: var(--page-block-decor) !important;
}

html.light[data-theme="light"] body :is(#about, #services, #popular, #why-pro-lex, #articles, #faq).light-block-tone-2 {
  background-color: var(--page-tone-2) !important;
  background-image: var(--page-block-decor) !important;
}

html.light[data-theme="light"] body :is(#about, #services, #popular, #why-pro-lex, #articles, #faq).light-block-tone-3 {
  background-color: var(--page-tone-3) !important;
  background-image: var(--page-block-decor) !important;
}

/* Article-block palette: use the colors already present in the site's
   Articles section as the single source for every light-theme section. */
html.light[data-theme="light"] body {
  --article-tone-1: #f4f0e8;
  --article-tone-2: #eeeae2;
  --article-tone-3: #e9e5dc;
  --article-card: #fbf8f1;
  --article-card-hover: #fffdf7;
  --article-ink: #1d252a;
  --article-accent: #75451f;
  --article-muted: #6f7b80;
  --article-border: rgba(29, 37, 42, .28);
  --article-block-decor:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .82), transparent 24rem),
    linear-gradient(180deg, #f4f0e8 0%, #e9e5dc 100%);
  --page-tone-1: var(--article-tone-1);
  --page-tone-2: var(--article-tone-2);
  --page-tone-3: var(--article-tone-3);
  --page-block-decor: var(--article-block-decor);
  --reason-tone-1: var(--article-card);
  --reason-tone-2: var(--article-tone-1);
  --reason-tone-3: var(--article-tone-3);
}

html.light[data-theme="light"] body :is(.light-block-tone-1, .light-block-tone-2, .light-block-tone-3),
html.light[data-theme="light"] body :is(#about, #services, #popular, #why-pro-lex, #articles, #faq) {
  background-image: var(--article-block-decor) !important;
  background-position: 0 0, 0 0 !important;
  background-size: auto, auto !important;
}

html.light[data-theme="light"] body :is(.light-block-tone-1, .light-block-tone-2, .light-block-tone-3) {
  background-color: var(--article-tone-1) !important;
}

html.light[data-theme="light"] body :is(.light-block-tone-2, #popular, #faq) {
  background-color: var(--article-tone-2) !important;
}

html.light[data-theme="light"] body :is(.light-block-tone-3, #about, #why-pro-lex) {
  background-color: var(--article-tone-3) !important;
}

/* Preserve the Articles section's own visual language inside the shared
   palette: ivory cards, charcoal copy, copper-brown accents and thin ink
   borders. */
html.light[data-theme="light"] body :is(
  .area-card,
  .case-card,
  .list-card,
  .service-choice-card,
  .service-directory-card,
  .pricing-decision-card,
  .pricing-format-card,
  .pricing-service-item,
  .service-info-card,
  .contacts-panel,
  .contacts-row,
  .subscription-plan,
  .article-summary,
  .article-summary-card,
  .pricing-option-row,
  .article-archive-tools,
  .article-search-control,
  .form-trust-list,
  .doubt-item
) {
  background-color: var(--article-card) !important;
  border-color: var(--article-border) !important;
  color: var(--article-ink) !important;
}

html.light[data-theme="light"] body :is(
  .area-card,
  .case-card,
  .list-card,
  .service-choice-card,
  .service-directory-card,
  .pricing-decision-card,
  .pricing-format-card,
  .pricing-service-item,
  .service-info-card,
  .contacts-panel,
  .contacts-row,
  .subscription-plan,
  .article-summary,
  .article-summary-card,
  .pricing-option-row,
  .article-archive-tools,
  .article-search-control,
  .form-trust-list,
  .doubt-item
):hover {
  background-color: var(--article-card-hover) !important;
}

html.light[data-theme="light"] body :is(
  .area-card h2, .area-card h3,
  .case-card h2, .case-card h3,
  .list-card h2, .list-card h3,
  .service-choice-card h2, .service-choice-card h3,
  .service-directory-card h2, .service-directory-card h3,
  .pricing-decision-card h2, .pricing-format-card h2,
  .pricing-service-item h2, .service-info-card h2,
  .contacts-panel h2, .contacts-row h2,
  .subscription-plan h2, .article-summary h2,
  .article-summary-card h2, .doubt-item h2
) {
  color: var(--article-ink) !important;
}

html.light[data-theme="light"] body :is(
  .area-card p, .case-card p, .list-card p,
  .service-choice-card p, .service-directory-card p,
  .pricing-decision-card p, .pricing-format-card p,
  .pricing-service-item p, .service-info-card p,
  .contacts-panel p, .contacts-row p, .subscription-plan p,
  .article-summary p, .article-summary-card p, .doubt-item p
) {
  color: var(--article-muted) !important;
}

html.light[data-theme="light"] body :is(
  .area-card a, .case-card a, .list-card a,
  .service-choice-card a, .service-directory-card a,
  .pricing-decision-card a, .pricing-format-card a,
  .pricing-service-item a, .service-info-card a,
  .contacts-panel a, .contacts-row a, .subscription-plan a,
  .article-summary a, .article-summary-card a, .doubt-item a
) {
  color: var(--article-accent) !important;
}

/* Workflow connectors: plain lines above and below every card, no arrowheads. */
html.light[data-theme="light"] body .workflow-step-copy {
  position: relative;
}

html.light[data-theme="light"] body .workflow-step-copy::before {
  display: none !important;
  content: none !important;
}

html.light[data-theme="light"] body .workflow-step::after {
  clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html.light[data-theme="light"] body .workflow-step-copy::after {
  position: absolute;
  top: 100%;
  left: 50%;
  display: block;
  width: 1px;
  height: var(--workflow-lower-line-height, calc(var(--workflow-start) + (var(--workflow-step-gap) * 4) - var(--workflow-offset) + clamp(28px, 3vw, 52px)));
  background: rgba(23, 52, 75, .24);
  content: "";
  pointer-events: none;
  opacity: .9;
  transform: translateX(-50%);
}

html.light[data-theme="light"] body .workflow-step:hover .workflow-step-copy::after,
html.light[data-theme="light"] body .workflow-step:focus-visible .workflow-step-copy::after {
  width: 2px;
  background: #17344b;
  box-shadow: 0 0 8px rgba(23, 52, 75, .42);
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body .workflow-step-copy::after {
    height: 32px;
  }
}

/* Editorial card copy: separate the title from the explanation so the text
   reads as a designed hierarchy instead of one grey block. */
html.light[data-theme="light"] body .workflow-step-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 23px 22px 22px !important;
}

html.light[data-theme="light"] body .workflow-step-title,
html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title {
  position: relative;
  margin: 0 !important;
  padding-left: 14px !important;
  color: #17344b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.04rem, 1.28vw, 1.28rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.018em !important;
  line-height: 1.14 !important;
}

html.light[data-theme="light"] body .workflow-step-title::before {
  position: absolute;
  top: .08em;
  bottom: .08em;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c4774b, rgba(196, 119, 75, .28));
  content: "";
}

html.light[data-theme="light"] body .workflow-step p,
html.light[data-theme="light"] body .workflow-step:nth-child(5) p {
  max-width: 31ch;
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 52, 75, .15);
  color: #52616d !important;
  font-family: "Manrope", "Segoe UI", sans-serif !important;
  font-size: clamp(.79rem, .9vw, .94rem) !important;
  font-weight: 450 !important;
  letter-spacing: .006em !important;
  line-height: 1.58 !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title {
  color: #fffaf0 !important;
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) .workflow-step-title::before {
  background: linear-gradient(180deg, #e0a074, rgba(224, 160, 116, .38));
}

html.light[data-theme="light"] body .workflow-step:nth-child(5) p {
  border-top-color: rgba(247, 241, 232, .26);
  color: rgba(247, 241, 232, .82) !important;
}

html.light[data-theme="light"] body .workflow-step:hover .workflow-step-title::before,
html.light[data-theme="light"] body .workflow-step:focus-visible .workflow-step-title::before {
  box-shadow: 0 0 10px rgba(196, 119, 75, .42);
}

/* Services directory: an editorial grid with shared dividers instead of
   seven isolated card surfaces. */
html.light[data-theme="light"] body #services .area-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(23, 52, 75, .2);
  border-left: 1px solid rgba(23, 52, 75, .2);
  background: transparent !important;
}

html.light[data-theme="light"] body #services .service-package-card {
  position: relative;
  display: flex !important;
  min-height: 310px !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 26px 24px 24px !important;
  border: 0 !important;
  border-right: 1px solid rgba(23, 52, 75, .2) !important;
  border-bottom: 1px solid rgba(23, 52, 75, .2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background-color .24s ease, box-shadow .24s ease;
}

html.light[data-theme="light"] body #services .service-package-card:hover,
html.light[data-theme="light"] body #services .service-package-card:focus-within {
  background: rgba(255, 253, 247, .54) !important;
  box-shadow: inset 0 3px 0 #c4774b !important;
}

html.light[data-theme="light"] body #services .service-package-card .package-card-logo {
  right: 20px !important;
  bottom: 60px !important;
  opacity: .075 !important;
  transform: rotate(-7deg) !important;
}

html.light[data-theme="light"] body #services .service-package-card .package-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

html.light[data-theme="light"] body #services .service-package-card .package-heading > .material-symbols-outlined {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #c4774b !important;
  font-size: 1.2rem !important;
}

html.light[data-theme="light"] body #services .service-package-card h3 {
  margin: 0 !important;
  color: #17344b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  line-height: 1.15 !important;
}

html.light[data-theme="light"] body #services .service-package-card .service-package-description {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  margin: 0 !important;
  color: #66757c !important;
  font-size: .92rem !important;
  line-height: 1.62 !important;
}

html.light[data-theme="light"] body #services .service-package-card .package-link {
  position: relative;
  z-index: 1;
  display: inline-flex !important;
  width: max-content !important;
  min-height: 0 !important;
  margin-top: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #17344b !important;
  box-shadow: none !important;
  font-size: .72rem !important;
  letter-spacing: .1em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

html.light[data-theme="light"] body #services .service-package-card .package-link:hover,
html.light[data-theme="light"] body #services .service-package-card .package-link:focus-visible {
  color: #75451f !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(4px);
}

html.light[data-theme="light"] body #services .service-package-card.area-card-wide {
  grid-column: 1 / -1 !important;
  min-height: 190px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr) auto !important;
  align-items: center;
  column-gap: 34px !important;
}

html.light[data-theme="light"] body #services .service-package-card.area-card-wide .package-link {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  html.light[data-theme="light"] body #services .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.light[data-theme="light"] body #services .service-package-card.area-card-wide {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body #services .area-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.light[data-theme="light"] body #services .service-package-card {
    min-height: 0 !important;
    padding: 24px 18px 22px !important;
  }

  html.light[data-theme="light"] body #services .service-package-card.area-card-wide {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 16px !important;
  }
}

/* Keep the services as a spacious grid, but remove every visible divider. */
html.light[data-theme="light"] body #services .area-grid {
  gap: 0 clamp(28px, 4vw, 72px) !important;
  border: 0 !important;
}

html.light[data-theme="light"] body #services .service-package-card,
html.light[data-theme="light"] body #services .service-package-card:hover,
html.light[data-theme="light"] body #services .service-package-card:focus-within {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body #services .service-package-card {
  padding-inline: 0 !important;
}

/* Restore only the internal grid: no outer frame, borders only between cards. */
html.light[data-theme="light"] body #services .area-grid {
  gap: 0 !important;
}

html.light[data-theme="light"] body #services .service-package-card {
  padding: 32px clamp(22px, 2.4vw, 42px) 34px !important;
}

html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(3n + 1),
html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(3n + 2) {
  border-right: 1px solid rgba(23, 52, 75, 0.16) !important;
}

html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(-n + 6) {
  border-bottom: 1px solid rgba(23, 52, 75, 0.16) !important;
}

@media (max-width: 980px) {
  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(3n + 1),
  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(3n + 2) {
    border-right: 0 !important;
  }

  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(odd) {
    border-right: 1px solid rgba(23, 52, 75, 0.16) !important;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(odd) {
    border-right: 0 !important;
  }

  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(-n + 6) {
    border-bottom: 1px solid rgba(23, 52, 75, 0.16) !important;
  }
}

/* Make each service title read clearly as a primary card heading. */
html.light[data-theme="light"] body #services .service-package-card h3 {
  font-size: clamp(1.22rem, 1.65vw, 1.58rem) !important;
  line-height: 1.12 !important;
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body #services .service-package-card h3 {
    font-size: 1.24rem !important;
  }
}

/* Keep hover neutral: no blue or gradient wash over the service cards. */
html.light[data-theme="light"] body #services .service-package-card:hover,
html.light[data-theme="light"] body #services .service-package-card:focus-within {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Strengthen only the dividers between cards, without creating an outer frame. */
html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(3n + 1),
html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(3n + 2) {
  border-right-color: rgba(23, 52, 75, 0.3) !important;
}

html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(-n + 6) {
  border-bottom-color: rgba(23, 52, 75, 0.3) !important;
}

@media (max-width: 980px) {
  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(odd) {
    border-right-color: rgba(23, 52, 75, 0.3) !important;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body #services .service-package-card:not(.area-card-wide):nth-child(-n + 6) {
    border-bottom-color: rgba(23, 52, 75, 0.3) !important;
  }
}

/* Remove the cursor-following decorative gradients from service cards. */
html.light[data-theme="light"] body #services .service-package-card::before,
html.light[data-theme="light"] body #services .service-package-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Use the same service-section typography on the services archive page. */
html.light[data-theme="light"] body .service-archive-page .service-directory-card h2,
html.light[data-theme="light"] body .service-archive-page .service-directory-card h3,
html.light[data-theme="light"] body .service-archive-page .service-choice-card strong {
  color: #17344b !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.22rem, 1.65vw, 1.58rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  line-height: 1.12 !important;
}

html.light[data-theme="light"] body .service-archive-page .service-directory-card p,
html.light[data-theme="light"] body .service-archive-page .service-directory-card li,
html.light[data-theme="light"] body .service-archive-page .service-choice-card small {
  font-family: "Gilroy", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: .92rem !important;
  font-weight: 450 !important;
  letter-spacing: .006em !important;
  line-height: 1.62 !important;
}

html.light[data-theme="light"] body .service-archive-page .service-directory-card .package-link,
html.light[data-theme="light"] body .service-archive-page .service-choice-card {
  font-family: "Manrope", sans-serif !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-card {
  font-family: "Gilroy", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

html.light[data-theme="light"] body .service-archive-page .service-directory-card .package-link {
  font-size: .72rem !important;
  letter-spacing: .1em !important;
  line-height: 1.3 !important;
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body .service-archive-page .service-directory-card h2,
  html.light[data-theme="light"] body .service-archive-page .service-directory-card h3,
  html.light[data-theme="light"] body .service-archive-page .service-choice-card strong {
    font-size: 1.24rem !important;
  }
}

/* Services archive quick selector: match the homepage editorial service grid. */
html.light[data-theme="light"] body .service-archive-page .service-choice-panel {
  gap: clamp(24px, 3vw, 38px) !important;
  padding: clamp(18px, 2vw, 28px) 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body main#top .service-archive-page .service-choice-panel,
html.light[data-theme="light"] body main#top .service-archive-page header.service-choice-header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-panel::before,
html.light[data-theme="light"] body .service-archive-page .service-choice-panel::after {
  display: none !important;
  content: none !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-grid {
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-card,
html.light[data-theme="light"] body .service-archive-page .service-choice-card:hover,
html.light[data-theme="light"] body .service-archive-page .service-choice-card:focus-visible {
  min-height: 272px !important;
  padding: 28px clamp(20px, 2.2vw, 34px) 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-card::before,
html.light[data-theme="light"] body .service-archive-page .service-choice-card::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-card:not(:nth-child(4n)) {
  border-right: 1px solid rgba(23, 52, 75, 0.3) !important;
}

html.light[data-theme="light"] body .service-archive-page .service-choice-card:nth-child(-n + 4) {
  border-bottom: 1px solid rgba(23, 52, 75, 0.3) !important;
}

@media (max-width: 980px) {
  html.light[data-theme="light"] body .service-archive-page .service-choice-card:nth-child(n) {
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  html.light[data-theme="light"] body .service-archive-page .service-choice-card:nth-child(odd) {
    border-right: 1px solid rgba(23, 52, 75, 0.3) !important;
  }

  html.light[data-theme="light"] body .service-archive-page .service-choice-card:nth-child(-n + 6) {
    border-bottom: 1px solid rgba(23, 52, 75, 0.3) !important;
  }
}

@media (max-width: 640px) {
  html.light[data-theme="light"] body .service-archive-page .service-choice-card:nth-child(n) {
    min-height: 0 !important;
    padding: 24px 18px 26px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  html.light[data-theme="light"] body .service-archive-page .service-choice-card:nth-child(-n + 7) {
    border-bottom: 1px solid rgba(23, 52, 75, 0.3) !important;
  }
}

/* Quick-selector hover: a uniform solid tone, without scaling or gradients. */
@media (hover: hover) and (pointer: fine) {
  html.light[data-theme="light"] body .service-archive-page .service-choice-card {
    transition: background-color 180ms ease !important;
    transform: none !important;
  }

  html.light[data-theme="light"] body .service-archive-page .service-choice-card:hover,
  html.light[data-theme="light"] body .service-archive-page .service-choice-card:focus-visible {
    z-index: 1 !important;
    background: #e6e0d6 !important;
    background-color: #e6e0d6 !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* Global light-theme text contrast: keep supporting copy crisp across pages. */
html.light[data-theme="light"] body {
  --text-muted: #52616a !important;
  --text-muted-rgb: 82, 97, 106 !important;
  --light-muted: #52616a !important;
}

html.light[data-theme="light"] body .workflow-block {
  --text-muted: #52616a !important;
  --text-muted-rgb: 82, 97, 106 !important;
}

@media (prefers-reduced-motion: reduce) {
  html.light[data-theme="light"] body .service-archive-page .service-choice-card,
  html.light[data-theme="light"] body .service-archive-page .service-choice-card:hover,
  html.light[data-theme="light"] body .service-archive-page .service-choice-card:focus-visible {
    transition: none !important;
    transform: none !important;
  }
}

/* Match the same uniform hover treatment in the homepage services grid. */
@media (hover: hover) and (pointer: fine) {
  html.light[data-theme="light"] body #services .service-package-card {
    transition: background-color 180ms ease !important;
    transform: none !important;
  }

  html.light[data-theme="light"] body #services .service-package-card:hover,
  html.light[data-theme="light"] body #services .service-package-card:focus-within {
    background: #e6e0d6 !important;
    background-color: #e6e0d6 !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}