/* Final theme corrections: keep navigation and section framing theme-aware. */

/* The services flyout must stay dark and legible in the dark theme. */
html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu {
  border-color: rgba(197, 132, 75, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(112deg, rgba(197, 132, 75, 0.09), transparent 64%),
    rgba(12, 15, 15, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 24px 54px rgba(0, 0, 0, 0.48) !important;
  color-scheme: dark;
}

html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu a {
  border-color: rgba(197, 132, 75, 0.2) !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.035), transparent 46%),
    rgba(22, 27, 27, 0.94) !important;
  color: rgba(243, 238, 230, 0.86) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu a:hover,
html:not([data-theme="light"]) body .site-header.site-header .nav-dropdown-menu a:focus-visible {
  border-color: rgba(216, 150, 91, 0.54) !important;
  background:
    linear-gradient(100deg, rgba(197, 132, 75, 0.2), transparent 76%),
    #1b2020 !important;
  color: #f0b77f !important;
}

/* Dark navigation mirrors the light theme's clear copper hover feedback. */
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(:hover, :focus-within) > .nav-link-trigger {
  color: #f0b77f !important;
}

/* Apply the hover colour to the actual text node as well, because older
   dark-theme layers colour the nested label independently. */
html:not([data-theme="light"]) body:not(#dark-menu-hover-a):not(#dark-menu-hover-b):not(#dark-menu-hover-c):not(#dark-menu-hover-d) .site-header.site-header .main-nav > .nav-link:is(:hover, :focus-visible) > span,
html:not([data-theme="light"]) body:not(#dark-menu-hover-a):not(#dark-menu-hover-b):not(#dark-menu-hover-c):not(#dark-menu-hover-d) .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger:is(:hover, :focus-visible) > span,
html:not([data-theme="light"]) body:not(#dark-menu-hover-a):not(#dark-menu-hover-b):not(#dark-menu-hover-c):not(#dark-menu-hover-d) .site-header.site-header .main-nav > .nav-dropdown:is(:hover, :focus-within) > .nav-link-trigger > span {
  color: #f0b77f !important;
  -webkit-text-fill-color: #f0b77f !important;
}

/* The service-direction menu uses nested labels and icons. Give its dark
   hover state a clearly different copper colour instead of near-white. */
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: #f0b77f !important;
  -webkit-text-fill-color: #f0b77f !important;
}

html:not([data-theme="light"]) body .site-header.site-header :is(
  .main-nav > .nav-link,
  .main-nav > .nav-dropdown > .nav-link-trigger,
  .nav-dropdown-menu a
) {
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease !important;
}

/* Sections are separated by spacing and surface tone, not full-width rules. */
/* The repeated :not() scopes deliberately outrank the legacy internal-page
   reset, which repeats #top to lock section geometry. */
html.light[data-theme="light"] body:not(#theme-polish-a):not(#theme-polish-b):not(#theme-polish-c):not(#theme-polish-d):not(#theme-polish-e):not(#theme-polish-f):not(#theme-polish-g):not(#theme-polish-h):not(#theme-polish-i):not(#theme-polish-j):not(#theme-polish-k):not(#theme-polish-l):not(#theme-polish-m):not(#theme-polish-n) main :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3
) {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

html[class][data-theme] body main#top > section {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* The homepage flows as one continuous canvas; section color changes provide
   enough separation without copper rules between every block. */
html.light[data-theme="light"] body.home-page:not(#theme-polish-a):not(#theme-polish-b):not(#theme-polish-c):not(#theme-polish-d):not(#theme-polish-e):not(#theme-polish-f):not(#theme-polish-g):not(#theme-polish-h):not(#theme-polish-i):not(#theme-polish-j):not(#theme-polish-k):not(#theme-polish-l):not(#theme-polish-m):not(#theme-polish-n) main :is(
  .light-block-tone-1,
  .light-block-tone-2,
  .light-block-tone-3
) {
  box-shadow: none !important;
}

/* Subscription benefits: self-contained cards, without rules escaping to the viewport edges. */
html.light[data-theme="light"] body.subscription-page:not(#subscription-edge-a):not(#subscription-edge-b):not(#subscription-edge-c):not(#subscription-edge-d):not(#subscription-edge-e):not(#subscription-edge-f):not(#subscription-edge-g):not(#subscription-edge-h):not(#subscription-edge-i):not(#subscription-edge-j):not(#subscription-edge-k):not(#subscription-edge-l):not(#subscription-edge-m):not(#subscription-edge-n) .subscription-benefits {
  border: 0 !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body.subscription-page:not(#subscription-lines-a):not(#subscription-lines-b):not(#subscription-lines-c):not(#subscription-lines-d):not(#subscription-lines-e):not(#subscription-lines-f):not(#subscription-lines-g):not(#subscription-lines-h) :is(
  .subscription-hero,
  .subscription-benefits,
  .subscription-plans-section
) {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* The visible rules belong to the inset frame of the adjacent tone blocks,
   so clear that frame on the three sections meeting around the benefit row. */
html[data-theme="light"] body.subscription-page
  main#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top
  :is(
    .subscription-hero.subscription-hero,
    .subscription-benefits.subscription-benefits,
    .subscription-plans-section.subscription-plans-section
  ) {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body.subscription-page:not(#subscription-lines-a):not(#subscription-lines-b):not(#subscription-lines-c):not(#subscription-lines-d):not(#subscription-lines-e):not(#subscription-lines-f):not(#subscription-lines-g):not(#subscription-lines-h) :is(
  .subscription-hero,
  .subscription-benefits
)::after,
html.light[data-theme="light"] body.subscription-page:not(#subscription-lines-a):not(#subscription-lines-b):not(#subscription-lines-c):not(#subscription-lines-d):not(#subscription-lines-e):not(#subscription-lines-f):not(#subscription-lines-g):not(#subscription-lines-h) .subscription-benefits::before {
  display: none !important;
  content: none !important;
}

html.light.light[data-theme="light"] body.subscription-page .subscription-benefit-grid {
  gap: clamp(12px, 1.4vw, 20px) !important;
  padding-block: clamp(28px, 4vw, 54px) !important;
}

html.light[data-theme="light"] body.subscription-page:not(#subscription-card-a):not(#subscription-card-b):not(#subscription-card-c):not(#subscription-card-d):not(#subscription-card-e) .subscription-benefit,
html.light[data-theme="light"] body.subscription-page:not(#subscription-card-a):not(#subscription-card-b):not(#subscription-card-c):not(#subscription-card-d):not(#subscription-card-e) .subscription-benefit:first-child,
html.light[data-theme="light"] body.subscription-page:not(#subscription-card-a):not(#subscription-card-b):not(#subscription-card-c):not(#subscription-card-d):not(#subscription-card-e) .subscription-benefit:last-child {
  border-color: rgba(190, 105, 55, 0.25) !important;
  background: rgba(255, 253, 248, 0.74) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 34px rgba(36, 44, 45, 0.055) !important;
}

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

@media (max-width: 620px) {
  html.light.light[data-theme="light"] body.subscription-page .subscription-benefit-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Footer typography: quieter italic copy with clearer column headings. */
html body .site-footer.site-footer .footer-grid h3 {
  font-size: clamp(0.98rem, 1.15vw, 1.18rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.075em !important;
}

html body .site-footer.site-footer :is(
  .footer-brand-column > p,
  .footer-nav-link strong,
  .footer-legal p
) {
  font-weight: 400 !important;
  font-style: italic !important;
}
/* Final contact-dialog palette: the form remains light in both themes. */
html[class][data-theme] body #contact-dialog.contact-dialog .contact-dialog-panel {
  border-color: rgba(38, 55, 70, 0.24) !important;
  background: #fffefa !important;
  color: #263746 !important;
  color-scheme: light !important;
  box-shadow: 0 28px 84px rgba(5, 12, 18, 0.38) !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .contact-form.contact-form-compact,
html[class][data-theme] body #contact-dialog.contact-dialog .contact-form.contact-form-compact:is(:hover, :focus, :focus-within) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #263746 !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog :is(.form-grid, .form-field) {
  background: transparent !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .contact-dialog-header h2 {
  color: #24323a !important;
  -webkit-text-fill-color: #24323a !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .contact-dialog-header span {
  color: #52616a !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .form-field > span {
  color: #263746 !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog :is(.form-hint, .form-status, .form-trust-list, .form-trust-list li) {
  color: #52616a !important;
  opacity: 1 !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .form-field :is(input, textarea) {
  border-color: rgba(38, 55, 70, 0.2) !important;
  background: #f6f8f8 !important;
  color: #263746 !important;
  caret-color: #263746 !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .form-field :is(input, textarea)::placeholder {
  color: #71808a !important;
  opacity: 1 !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .form-field :is(input, textarea):is(:focus, :focus-visible) {
  border-color: #b66c3d !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(182, 108, 61, 0.14) !important;
}

html[class][data-theme] body #contact-dialog.contact-dialog .form-trust-list {
  border-top-color: rgba(182, 108, 61, 0.24) !important;
  background: #fbf8f1 !important;
}

/* Only the controls respond to the active site theme. */
html[data-theme="light"] body .contact-dialog :is(.form-footer .button-primary, .icon-button) {
  border-color: rgba(38, 55, 70, 0.32) !important;
  background: #263746 !important;
  color: #ffffff !important;
}

html:not([data-theme="light"]) body .contact-dialog :is(.form-footer .button-primary, .icon-button) {
  border-color: rgba(208, 160, 107, 0.58) !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 38%),
    #321b0f !important;
  color: #fffaf3 !important;
}

html[data-theme="light"] body .contact-dialog :is(.form-footer .button-primary, .icon-button):is(:hover, :focus-visible) {
  border-color: #263746 !important;
  background: #172a36 !important;
  color: #ffffff !important;
}

html:not([data-theme="light"]) body .contact-dialog :is(.form-footer .button-primary, .icon-button):is(:hover, :focus-visible) {
  border-color: rgba(226, 176, 124, 0.76) !important;
  background: #452718 !important;
  color: #ffffff !important;
}

/* Final workflow surface: gradient-free faceted artwork only, with the same
 * overall transparency as the homepage decoration and no divider. */
html:not([data-theme="light"]) body.home-page main#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top #workflow#workflow.workflow-block {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: #0f1111 url("/assets/section-faceted-bronze-workflow.svg?v=1") center / cover no-repeat !important;
  background-color: #0f1111 !important;
  background-image: url("/assets/section-faceted-bronze-workflow.svg?v=1") !important;
  box-shadow: none !important;
}

/* Article heroes keep one shared composition in both themes. The dark legal
 * document skin used to reintroduce a decorative rail column and tighter type,
 * which shifted the title and metadata away from their light-theme positions. */
html:not([data-theme="light"]) body.article-reading-page main#top#top#top#top
  .article-document-hero.article-document-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(30px, 4vw, 64px) !important;
  align-items: end !important;
}

html:not([data-theme="light"]) body.article-reading-page main#top#top#top#top
  .article-document-hero .legal-document-heading {
  grid-column: auto !important;
  grid-row: auto !important;
}

html:not([data-theme="light"]) body.article-reading-page main#top#top#top#top
  .article-document-hero .legal-document-kicker {
  display: block !important;
  width: auto !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}

html:not([data-theme="light"]) body.article-reading-page main#top#top#top#top
  .article-document-hero .legal-document-lede {
  max-width: 740px !important;
  margin: clamp(24px, 3vw, 38px) 0 0 !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
  line-height: 1.7 !important;
}

/* Light article-directory cards retain the dark editorial artwork, but gain
 * enough edge contrast to read as intentional cards against the pale canvas. */
html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card {
  border-color: rgba(210, 160, 109, 0.3) !important;
  border-radius: 8px !important;
  background: #0f1111 !important;
  background-color: #0f1111 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card::before {
  filter: saturate(0.7) contrast(1.08) brightness(0.7) !important;
  opacity: 0.56 !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card::after,
html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card:is(:hover, :focus-visible)::after {
  display: none !important;
  background: none !important;
  background-image: none !important;
  content: none !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card .article-card-index {
  font-weight: 700 !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card .article-card-category {
  line-height: normal !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card h2 {
  line-height: 1.22 !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card > p {
  font-weight: 400 !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card .article-card-link {
  min-height: 0 !important;
}

html.light[data-theme="light"] body.article-archive-catalog-page
  main#top#top#top#top#top#top#top#top#top#top#top#top
  .article-directory-card.article-card:is(:hover, :focus-visible) {
  border-color: rgba(210, 160, 109, 0.48) !important;
  border-radius: 8px !important;
  background: #0f1111 !important;
  background-color: #0f1111 !important;
  box-shadow: none !important;
}

/* Seamless page rhythm: sections must not draw full-width divider rules. */
html body main#top#top#top#top#top#top#top#top > section {
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-bottom-width: 0 !important;
  border-bottom-style: none !important;
  box-shadow: none !important;
}

/* Restore clear colour feedback on the top-level mobile menu rows. Later
 * palette layers set the resting surface with high specificity, so the hover
 * and keyboard-focus states need matching guards to remain visible. */
@media (max-width: 1180px) {
  html.light[data-theme="light"] body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-link:is(:hover, :focus-visible),
  html.light[data-theme="light"] body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger:is(:hover, :focus-visible),
  html.light[data-theme="light"] body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-dropdown.is-open > .nav-link-trigger {
    border-color: rgba(214, 157, 103, 0.6) !important;
    background:
      linear-gradient(100deg, rgba(210, 150, 95, 0.24), rgba(184, 105, 54, 0.11) 58%, rgba(255, 255, 255, 0.025)),
      rgba(18, 29, 48, 0.96) !important;
    color: #f0c39a !important;
    box-shadow:
      inset 3px 0 0 rgba(200, 124, 69, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 18px rgba(4, 12, 25, 0.22),
      0 0 18px rgba(207, 116, 61, 0.12) !important;
    transform: translateX(2px);
  }

  html.light[data-theme="light"] body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > :is(.nav-link, .nav-dropdown > .nav-link-trigger):is(:hover, :focus-visible) > span,
  html.light[data-theme="light"] body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-dropdown.is-open > .nav-link-trigger > span {
    color: #f0c39a !important;
    -webkit-text-fill-color: #f0c39a !important;
  }

  html:not([data-theme="light"]) body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-link:is(:hover, :focus-visible),
  html:not([data-theme="light"]) body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-dropdown > .nav-link-trigger:is(:hover, :focus-visible),
  html:not([data-theme="light"]) body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-dropdown.is-open > .nav-link-trigger {
    border-color: rgba(229, 181, 128, 0.62) !important;
    background: rgba(67, 41, 23, 0.96) !important;
    color: #ffffff !important;
    box-shadow:
      inset 3px 0 0 rgba(218, 165, 108, 0.9),
      inset 0 1px 0 rgba(255, 226, 190, 0.1),
      0 0 18px rgba(193, 139, 82, 0.12) !important;
    transform: translateX(2px);
  }

  html:not([data-theme="light"]) body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > :is(.nav-link, .nav-dropdown > .nav-link-trigger):is(:hover, :focus-visible) > span,
  html:not([data-theme="light"]) body:not(#mobile-nav-hover-a):not(#mobile-nav-hover-b):not(#mobile-nav-hover-c):not(#mobile-nav-hover-d)
    .site-header.site-header .main-nav > .nav-dropdown.is-open > .nav-link-trigger > span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Workflow cards keep the numeric hierarchy clean: the former copper
 * marker beside each title read as a stray arrow between number and label. */
html body.home-page #workflow .workflow-step-title::before {
  display: none !important;
  content: none !important;
}

/* Article detail summaries: replace the green/steel cast with a neutral
 * obsidian surface and the warm copper light used elsewhere in dark mode. */
html:not([data-theme="light"]) body.article-reading-page
  main#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top
  .article-summary-card.article-summary-card {
  border-color: rgba(202, 139, 81, 0.42) !important;
  background: #181818 !important;
  background-color: #181818 !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 218, 0.045),
    0 16px 34px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(193, 116, 57, 0.1),
    0 0 0 1px rgba(202, 139, 81, 0.07) !important;
}

html:not([data-theme="light"]) body.article-reading-page
  main#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top#top
  .article-summary-card.article-summary-card:is(:hover, :focus-within) {
  border-color: rgba(220, 154, 91, 0.66) !important;
  background: #1b1a19 !important;
  background-color: #1b1a19 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 218, 0.065),
    0 18px 38px rgba(0, 0, 0, 0.3),
    0 0 26px rgba(202, 126, 66, 0.15),
    0 0 0 1px rgba(220, 154, 91, 0.1) !important;
}

/* Service-card titles mirror the option-name typography from the pricing
 * catalog, including family, size, weight and rhythm. */
html body.service-detail-catalog-page main#top .service-markdown.service-markdown ul > li > strong {
  font-family: var(--font-display) !important;
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  line-height: 1.24 !important;
  letter-spacing: normal !important;
}

/* Expanded mobile/tablet menu: keep the section label on its own row so the
 * three direct-contact actions share one aligned row. Narrow phones retain
 * the established full-width call + two-messenger layout. */
@media (min-width: 681px) and (max-width: 1180px) {
  html body .site-header.site-header .mobile-contact-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
  }

  html body .site-header.site-header .mobile-contact-label {
    grid-column: 1 / -1;
    margin: 0 0 2px;
  }

  html body .site-header.site-header .mobile-contact-action {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
}

/* Unified resting surface for direct-contact actions in the mobile menu. */
@media (max-width: 1180px) {
  html body .site-header.site-header .mobile-contact-action {
    border-color: rgba(126, 143, 164, 0.48) !important;
    background: #172238 !important;
    background-image: none !important;
    color: #f7f5f1 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 7px 16px rgba(3, 10, 22, 0.16) !important;
  }

  html body .site-header.site-header .mobile-contact-action > span:last-child {
    color: #f7f5f1 !important;
    -webkit-text-fill-color: #f7f5f1 !important;
  }
}

/* Direct-contact actions use the same colour-changing feedback as the mobile
 * navigation rows. Brand artwork keeps its native Telegram/WhatsApp colour. */
@media (max-width: 1180px) {
  html.light[data-theme="light"] body:not(#mobile-contact-hover-a):not(#mobile-contact-hover-b):not(#mobile-contact-hover-c):not(#mobile-contact-hover-d)
    .site-header.site-header .mobile-contact-action:is(:hover, :focus-visible) {
    border-color: rgba(184, 105, 54, 0.72) !important;
    background: rgba(184, 105, 54, 0.13) !important;
    color: #8f4724 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 0 18px rgba(184, 105, 54, 0.12) !important;
    transform: translateY(-1px);
  }

  html.light[data-theme="light"] body:not(#mobile-contact-hover-a):not(#mobile-contact-hover-b):not(#mobile-contact-hover-c):not(#mobile-contact-hover-d)
    .site-header.site-header .mobile-contact-action:is(:hover, :focus-visible) > span:last-child {
    color: #8f4724 !important;
    -webkit-text-fill-color: #8f4724 !important;
  }

  html:not([data-theme="light"]) body:not(#mobile-contact-hover-a):not(#mobile-contact-hover-b):not(#mobile-contact-hover-c):not(#mobile-contact-hover-d)
    .site-header.site-header .mobile-contact-action:is(:hover, :focus-visible) {
    border-color: rgba(229, 181, 128, 0.64) !important;
    background: rgba(67, 41, 23, 0.96) !important;
    color: #f0b77f !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 226, 190, 0.12),
      0 0 18px rgba(193, 139, 82, 0.16) !important;
    transform: translateY(-1px);
  }

  html:not([data-theme="light"]) body:not(#mobile-contact-hover-a):not(#mobile-contact-hover-b):not(#mobile-contact-hover-c):not(#mobile-contact-hover-d)
    .site-header.site-header .mobile-contact-action:is(:hover, :focus-visible) > span:last-child {
    color: #f0b77f !important;
    -webkit-text-fill-color: #f0b77f !important;
  }
}