/* Shared decorative icons and neutral marketing canvas. Gold and paper surfaces remain independent. */
.dw-ui-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  pointer-events: none;
}
.topbar .nav-links .dw-ui-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar .nav-links .dw-ui-nav > .dw-ui-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
.topbar .dropdown a.dw-ui-dropdown {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 0;
}
.dw-ui-dropdown > .dw-ui-icon { margin-top: 2px; }
.dw-ui-copy { display: block; min-width: 0; }
.dw-ui-dropdown > .dw-ui-copy > small { display: block; margin-top: 3px; }
.topbar .dw-ui-portal { display: inline-flex; align-items: center; gap: 8px; }
.dw-ui-portal .portal-nav-dot { display: none; }
.dw-ui-drawer > .dw-ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
.dw-ui-extra, .dw-ui-footer { display: inline-flex; align-items: center; gap: 8px; }
.dw-ui-footer > .dw-ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
/* Footer column titles keep their native accordion behavior, with a larger icon above. */
footer .footer-grid > div > h3.dw-ui-footer-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
footer .dw-ui-footer-heading > .dw-ui-icon { width: 44px; height: 44px; flex-basis: 44px; }
@media (max-width: 700px) {
  footer .footer-grid > div > h3.dw-ui-footer-heading { gap: 10px; }
  footer .dw-ui-footer-heading > .dw-ui-icon { width: 36px; height: 36px; flex-basis: 36px; }
  footer .footer-grid > div > h3.dw-ui-footer-heading::after { bottom: 14px; }
}
.dw-ui-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.dw-ui-eyebrow > .dw-ui-icon { width: 13px; height: 13px; flex-basis: 13px; }
/* Icons replace the old vertical label markers, not navigation or timeline rules. */
main :is(.eyebrow, .work-eyebrow)::before { content: none !important; display: none !important; }
main .dw-ui-case-label { display: inline-flex; align-items: center; gap: 9px; }
.dw-ui-case-label > .dw-ui-icon { width: 13px; height: 13px; flex-basis: 13px; }
body:has(> .case-nav) main .dw-ui-case-label { color: #969aa5; }
body:has(> .case-nav) .case-showcase .dw-ui-case-label { color: #686d79; }
.dw-ui-stage, .dw-ui-card-heading { display: flex; align-items: center; gap: 11px; }
.dw-ui-stage > .dw-ui-icon, .dw-ui-card-heading > .dw-ui-icon { width: 22px; height: 22px; flex-basis: 22px; }
@media (min-width: 981px) and (max-width: 1180px) {
  .topbar .nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; }
  .topbar .nav .nav-links { position: static; min-width: 0; gap: 4px; margin: 0; transform: none; justify-self: center; }
  .topbar .nav .nav-actions { min-width: 0; gap: 6px; }
  .topbar .nav-links .dw-ui-nav { gap: 4px; padding-inline: 5px; }
  .topbar .nav-links .dw-ui-nav > .dw-ui-icon { width: 12px; height: 12px; flex-basis: 12px; }
  .topbar .nav .nav-actions .portal-nav-link { min-width: 110px; min-height: 40px; padding-inline: 10px; font-size: 11px; }
  .topbar .nav .nav-actions > .button-primary { min-width: 118px; min-height: 40px; padding-inline: 12px; font-size: 11px; }
  .topbar .nav .premium-nav-toggle, .topbar .nav .language-switcher > summary { width: 40px; height: 40px; min-height: 40px; }
}
@media (min-width: 1181px) and (max-width: 1320px) {
  .topbar .nav-links .dw-ui-nav { gap: 5px; }
  .topbar .nav-links .dw-ui-nav > .dw-ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
}
@media (max-width: 980px) {
  .topbar .nav-links .dw-ui-nav { justify-content: flex-start; gap: 10px; }
  .topbar .nav-links .dw-ui-nav > .dw-ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .topbar .nav-links .dw-ui-nav > .chevron { margin-left: auto; }
  .topbar .dropdown a.dw-ui-dropdown { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; }
  .dw-ui-extra > .dw-ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (max-width: 600px) {
  .dw-ui-stage { align-items: flex-start; gap: 10px; }
  .dw-ui-stage > .dw-ui-icon { margin-top: 3px; width: 20px; height: 20px; flex-basis: 20px; }
  .dw-ui-card-heading { align-items: flex-start; }
  .dw-ui-card-heading > .dw-ui-icon { margin-top: 3px; width: 20px; height: 20px; flex-basis: 20px; }
}

/* One flat graphite canvas: remove colour washes, not the project imagery or cards. */
body:has(> .topbar) > main,
body:has(> .case-nav) > main {
  background: #101114 !important;
}
body:has(> .topbar) > main > :is(
  .hero, .page-hero, .article-hero, .article-reader, .blog-hub-hero,
  .blog-editorial, .process, .work-process, .why, .pricing, .portfolio,
  .insights, .faq, .testimonials, .portal-section, .booking-section,
  .global-presence, .faq-page-section, .portfolio-index-section,
  .pricing-services-section, .trust-services, .technology-showcase,
  .privacy-book-section
),
body:has(> .case-nav) > main > :is(
  .case-hero, .case-facts, .case-story, .case-outcomes, .case-cta
) {
  background: transparent !important;
}
body:has(> .topbar) > main > .testimonials::before,
body:has(> .topbar) > main > .technology-showcase::before {
  background: none !important;
}
body:has(> .topbar) > footer {
  background: #101114 !important;
}
body:has(> .topbar) .topbar {
  background: rgba(16, 17, 20, .97);
}
body:has(> .topbar) .hero .eyebrow,
body:has(> .topbar) .work-stage-outcome > span {
  color: #969aa5 !important;
}