/*
 * Sisdesk authoritative design-system layer.
 * Load this file after style.css, blog.css and page-local styles.
 * It intentionally contains a small number of measured !important rules to
 * retire legacy high-specificity overrides without mutating the legacy files.
 */

/* --------------------------------------------------------------------------
   Canonical tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --ds-brand: #20b8e7;
  --ds-brand-strong: #087596;
  --ds-brand-text: #087596;
  --ds-brand-soft: rgba(32, 184, 231, 0.1);
  --ds-brand-line: rgba(32, 184, 231, 0.24);

  --ds-success: #139b75;
  --ds-success-text: #0b775a;
  --ds-success-soft: rgba(19, 155, 117, 0.1);
  --ds-warning: #a36f18;
  --ds-warning-text: #89580c;
  --ds-warning-soft: rgba(163, 111, 24, 0.1);
  --ds-danger: #bf5d54;
  --ds-danger-text: #9a3f42;
  --ds-danger-soft: rgba(191, 93, 84, 0.1);

  --ds-page: #f8fbfd;
  --ds-section: #ffffff;
  --ds-section-alt: #f1f7fa;
  --ds-surface: #ffffff;
  --ds-surface-soft: #f4f8fb;
  --ds-surface-raised: rgba(255, 255, 255, 0.9);
  --ds-ink: #0f172a;
  --ds-muted: #5f6b7a;
  --ds-line: #dce5eb;
  --ds-line-strong: rgba(8, 117, 150, 0.28);

  --ds-console: #0f172a;
  --ds-console-soft: #111827;
  --ds-console-ink: #f8fafc;
  --ds-console-muted: #cbd5e1;

  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-control: 8px;
  --ds-radius-card: 12px;
  --ds-radius-panel: 16px;
  --ds-radius-pill: 999px;

  --ds-shadow-card: 0 10px 28px rgba(15, 23, 42, 0.055);
  --ds-shadow-card-hover: 0 18px 45px rgba(15, 23, 42, 0.1);
  --ds-shadow-panel: 0 24px 70px rgba(15, 23, 42, 0.08);
  --ds-shadow-action: 0 14px 30px rgba(8, 117, 150, 0.2);
  --ds-focus-ring: 0 0 0 3px rgba(32, 184, 231, 0.22);

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 72px;
  --ds-space-9: 96px;

  --ds-container: 1368px;
  --ds-gutter: 72px;
  --ds-section-space: clamp(64px, 7vw, 96px);
  --ds-hero-header-offset: 129px;
  --ds-hero-panel-size: 482px;

  --ds-font: "Inter", Arial, sans-serif;
  --ds-title-1: clamp(44px, 4.2vw, 68px);
  --ds-title-2: clamp(28px, 3vw, 40px);
  --ds-title-3: clamp(19px, 2vw, 24px);
  --ds-body-lg: 17px;
  --ds-body: 16px;
  --ds-small: 14px;
  --ds-label: 12px;

  --ds-duration-fast: 160ms;
  --ds-duration-base: 240ms;
  --ds-duration-reveal: 680ms;
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --ds-action-bg: #087596;
  --ds-action-ink: #ffffff;
  --ds-hero-ink: var(--ds-ink);
  --ds-hero-muted: var(--ds-muted);
  --ds-hero-panel: rgba(255, 255, 255, 0.9);
  --ds-hero-background:
    radial-gradient(circle at 78% 44%, rgba(32, 184, 231, 0.12) 0 18%, rgba(32, 184, 231, 0.045) 34%, transparent 60%),
    linear-gradient(116deg, transparent 0 51%, rgba(32, 184, 231, 0.045) 51.15% 66%, transparent 66.15% 100%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
  --ds-hero-grid:
    repeating-linear-gradient(90deg, rgba(8, 117, 150, 0.026) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(8, 117, 150, 0.02) 0 1px, transparent 1px 96px);

  /* Legacy aliases: one source of truth for existing components. */
  --primary: var(--ds-brand);
  --primary-dark: var(--ds-brand-strong);
  --ink: var(--ds-ink);
  --muted: var(--ds-muted);
  --soft: var(--ds-surface-soft);
  --line: var(--ds-line);
  --shadow: var(--ds-shadow-panel);
  --page-bg: var(--ds-page);
  --surface: var(--ds-surface);
  --surface-soft: var(--ds-surface-soft);
  --surface-muted: var(--ds-section-alt);
  --focus-ring: rgba(32, 184, 231, 0.22);
  --hero-bg: var(--ds-hero-background);
  --hero-ink: var(--ds-hero-ink);
  --hero-muted: var(--ds-hero-muted);
  --hero-pill-bg: var(--ds-brand-soft);
  --hero-pill-border: var(--ds-brand-line);
  --hero-pill-ink: var(--ds-brand-text);
  --hero-secondary-bg: var(--ds-surface-raised);
  --hero-secondary-border: var(--ds-line-strong);

  --sisds-primary: var(--ds-brand);
  --sisds-primary-dark: var(--ds-brand-strong);
  --sisds-bg: var(--ds-page);
  --sisds-surface: var(--ds-surface);
  --sisds-ink: var(--ds-ink);
  --sisds-muted: var(--ds-muted);
  --sisds-border: var(--ds-line);
  --sisds-panel-border: var(--ds-brand-line);
  --sisds-card-shadow: var(--ds-shadow-card);
  --sisds-card-shadow-hover: var(--ds-shadow-card-hover);
  --sisds-panel-shadow: var(--ds-shadow-panel);

  --top-area-bg: var(--ds-page);
  --top-area-bg-soft: var(--ds-surface);
  --top-area-ink: var(--ds-ink);
  --top-area-muted: var(--ds-muted);
  --top-area-line: var(--ds-line);
  --top-area-line-strong: var(--ds-brand-line);
  --top-area-cyan: var(--ds-brand-strong);
  --top-area-green: var(--ds-success-text);
  --top-area-gold: var(--ds-warning-text);
  --top-area-panel: var(--ds-hero-panel);
  --top-area-panel-solid: var(--ds-surface);
  --top-area-shadow: var(--ds-shadow-panel);
  --top-area-card-shadow: var(--ds-shadow-card);

  --unified-page-container: var(--ds-container);
  --unified-page-gutter: var(--ds-gutter);
  --unified-card-radius: var(--ds-radius-card);
  --unified-section-padding: 72px;
  --unified-section-padding-mobile: 48px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ds-brand: #7ddcff;
  --ds-brand-strong: #42c9f3;
  --ds-brand-text: #7ddcff;
  --ds-brand-soft: rgba(125, 220, 255, 0.11);
  --ds-brand-line: rgba(125, 220, 255, 0.24);

  --ds-success: #6ee7b7;
  --ds-success-text: #6ee7b7;
  --ds-success-soft: rgba(110, 231, 183, 0.1);
  --ds-warning: #f6c76b;
  --ds-warning-text: #f6c76b;
  --ds-warning-soft: rgba(246, 199, 107, 0.1);
  --ds-danger: #f19a94;
  --ds-danger-text: #f19a94;
  --ds-danger-soft: rgba(241, 154, 148, 0.1);

  --ds-page: #0f172a;
  --ds-section: #111827;
  --ds-section-alt: #0d1624;
  --ds-surface: #151c24;
  --ds-surface-soft: #17202a;
  --ds-surface-raised: rgba(21, 28, 36, 0.92);
  --ds-ink: #f8fafc;
  --ds-muted: #cbd5e1;
  --ds-line: rgba(226, 232, 240, 0.14);
  --ds-line-strong: rgba(125, 220, 252, 0.28);
  --ds-console: #07101a;
  --ds-console-soft: #0b1724;
  --ds-console-ink: #f8fafc;
  --ds-console-muted: #cbd5e1;

  --ds-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.2);
  --ds-shadow-card-hover: 0 18px 45px rgba(0, 0, 0, 0.32);
  --ds-shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.34);
  --ds-shadow-action: 0 14px 34px rgba(66, 201, 243, 0.2);
  --ds-focus-ring: 0 0 0 3px rgba(125, 220, 252, 0.24);

  --ds-action-bg: #7ddcff;
  --ds-action-ink: #061923;
  --ds-hero-ink: var(--ds-ink);
  --ds-hero-muted: var(--ds-muted);
  --ds-hero-panel: rgba(15, 23, 42, 0.9);
  --ds-hero-background:
    radial-gradient(circle at 78% 44%, rgba(125, 220, 252, 0.14) 0 18%, rgba(125, 220, 252, 0.055) 34%, transparent 60%),
    linear-gradient(116deg, transparent 0 51%, rgba(125, 220, 252, 0.055) 51.15% 66%, transparent 66.15% 100%),
    linear-gradient(180deg, #0f172a 0%, #0d1624 100%);
  --ds-hero-grid:
    repeating-linear-gradient(90deg, rgba(125, 220, 252, 0.025) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(125, 220, 252, 0.018) 0 1px, transparent 1px 96px);
}

/* --------------------------------------------------------------------------
   Page-scope token bridges
   -------------------------------------------------------------------------- */

.blog-article-page,
.blog-index-page {
  --blog-primary: var(--ds-brand) !important;
  --blog-primary-strong: var(--ds-brand-strong) !important;
  --blog-navy: var(--ds-console) !important;
  --blog-navy-soft: var(--ds-console-soft) !important;
  --blog-ink: var(--ds-ink) !important;
  --blog-muted: var(--ds-muted) !important;
  --blog-bg: var(--ds-page) !important;
  --blog-surface: var(--ds-surface) !important;
  --blog-surface-soft: var(--ds-surface-soft) !important;
  --blog-line: var(--ds-line) !important;
  --blog-line-strong: var(--ds-brand-line) !important;
  --blog-shadow: var(--ds-shadow-panel) !important;
}

.blog-article-hero--editorial {
  --article-accent: var(--ds-brand) !important;
  --article-accent-2: var(--ds-brand-strong) !important;
}

.blog-index-page:not(.blog-menu-legacy) .blog-hero-story {
  --story-accent: var(--ds-brand) !important;
}

.blog-index-page .blog-index-card {
  --card-accent: var(--ds-brand) !important;
}

.blog-article-page .blog-product-panel {
  --product-accent: var(--ds-brand) !important;
}

.simple-faq-page {
  --simple-faq-bg: var(--ds-page) !important;
  --simple-faq-surface: var(--ds-surface) !important;
  --simple-faq-ink: var(--ds-ink) !important;
  --simple-faq-muted: var(--ds-muted) !important;
  --simple-faq-line: var(--ds-line) !important;
  --simple-faq-accent: var(--ds-brand-text) !important;
  --simple-faq-accent-fill: var(--ds-action-bg) !important;
  --simple-faq-on-accent: var(--ds-action-ink) !important;
  --simple-faq-accent-soft: var(--ds-brand-soft) !important;
  --simple-faq-focus: rgba(32, 184, 231, 0.24) !important;
}

.email-executive-page {
  --email-exec-bg: var(--ds-page) !important;
  --email-exec-surface: var(--ds-surface) !important;
  --email-exec-soft: var(--ds-surface-soft) !important;
  --email-exec-border: var(--ds-line) !important;
  --email-exec-border-strong: var(--ds-brand-line) !important;
  --email-exec-ink: var(--ds-ink) !important;
  --email-exec-muted: var(--ds-muted) !important;
  --email-exec-primary: var(--ds-brand-text) !important;
  --email-exec-green: var(--ds-success-text) !important;
  --email-exec-gold: var(--ds-warning-text) !important;
  --email-exec-shadow: var(--ds-shadow-card) !important;
}

.mail-command-system {
  --mail-bg: var(--ds-page) !important;
  --mail-bg-alt: var(--ds-section-alt) !important;
  --mail-bg-soft: var(--ds-surface-soft) !important;
  --mail-surface: var(--ds-surface) !important;
  --mail-surface-soft: var(--ds-surface-soft) !important;
  --mail-surface-strong: var(--ds-surface-raised) !important;
  --mail-card: var(--ds-surface) !important;
  --mail-ink: var(--ds-ink) !important;
  --mail-muted: var(--ds-muted) !important;
  --mail-line: var(--ds-line) !important;
  --mail-line-strong: var(--ds-brand-line) !important;
  --mail-cyan: var(--ds-brand) !important;
  --mail-cyan-strong: var(--ds-brand-strong) !important;
  --mail-blue: var(--ds-brand-strong) !important;
  --mail-green: var(--ds-success) !important;
  --mail-amber: var(--ds-warning) !important;
  --mail-dark: var(--ds-console) !important;
  --mail-dark-soft: var(--ds-console-soft) !important;
  --mail-shadow: var(--ds-shadow-panel) !important;
}

.collaboration-flow-system {
  --collab-bg: var(--ds-page) !important;
  --collab-bg-alt: var(--ds-section-alt) !important;
  --collab-surface: var(--ds-surface) !important;
  --collab-surface-soft: var(--ds-surface-soft) !important;
  --collab-card-bg: var(--ds-surface) !important;
  --collab-card-soft: var(--ds-surface-soft) !important;
  --collab-card-border: var(--ds-line) !important;
  --collab-card-shadow: var(--ds-shadow-card) !important;
  --collab-panel: var(--ds-surface-raised) !important;
  --collab-ink: var(--ds-ink) !important;
  --collab-ink-deep: var(--ds-ink) !important;
  --collab-muted: var(--ds-muted) !important;
  --collab-line: var(--ds-line) !important;
  --collab-line-strong: var(--ds-brand-line) !important;
  --collab-cyan: var(--ds-brand) !important;
  --collab-cyan-strong: var(--ds-brand-strong) !important;
  --collab-blue: var(--ds-brand-strong) !important;
  --collab-green: var(--ds-success) !important;
  --collab-mint: var(--ds-success) !important;
  --collab-amber: var(--ds-warning) !important;
  --collab-dark: var(--ds-console) !important;
  --collab-dark-soft: var(--ds-console-soft) !important;
  --collab-shadow: var(--ds-shadow-panel) !important;
}

.private-vault-architecture,
.private-cloud-vault-page {
  --vault-bg: var(--ds-page) !important;
  --vault-bg-alt: var(--ds-section-alt) !important;
  --vault-surface: var(--ds-surface) !important;
  --vault-surface-soft: var(--ds-surface-soft) !important;
  --vault-panel: var(--ds-surface-raised) !important;
  --vault-ink: var(--ds-ink) !important;
  --vault-muted: var(--ds-muted) !important;
  --vault-line: var(--ds-line) !important;
  --vault-line-strong: var(--ds-brand-line) !important;
  --vault-cyan: var(--ds-brand) !important;
  --vault-cyan-strong: var(--ds-brand-strong) !important;
  --vault-accent: var(--ds-brand) !important;
  --vault-accent-strong: var(--ds-brand-strong) !important;
  --vault-blue: var(--ds-brand-strong) !important;
  --vault-green: var(--ds-success) !important;
  --vault-amber: var(--ds-warning) !important;
  --vault-dark: var(--ds-console) !important;
  --vault-dark-soft: var(--ds-console-soft) !important;
  --pc-accent: var(--ds-brand) !important;
  --pc-success: var(--ds-success) !important;
  --pc-ink: var(--ds-ink) !important;
  --pc-muted: var(--ds-muted) !important;
  --pc-line: var(--ds-line) !important;
  --pc-line-strong: var(--ds-brand-line) !important;
  --pc-soft: var(--ds-surface-soft) !important;
  --pc-surface: var(--ds-surface) !important;
  --pc-navy: var(--ds-console) !important;
  --pc-navy-2: var(--ds-console-soft) !important;
  --pc-violet: var(--ds-brand-strong) !important;
}

.managed-cloud-ops,
.infra-resilience,
.managed-service-ops {
  --mco-bg: var(--ds-page) !important;
  --mco-bg-alt: var(--ds-section-alt) !important;
  --mco-surface: var(--ds-surface) !important;
  --mco-surface-soft: var(--ds-surface-soft) !important;
  --mco-ink: var(--ds-ink) !important;
  --mco-muted: var(--ds-muted) !important;
  --mco-line: var(--ds-line) !important;
  --mco-line-strong: var(--ds-brand-line) !important;
  --mco-cyan: var(--ds-brand) !important;
  --mco-cyan-strong: var(--ds-brand-strong) !important;
  --mco-blue: var(--ds-brand-strong) !important;
  --mco-green: var(--ds-success) !important;
  --mco-amber: var(--ds-warning) !important;
  --mco-dark: var(--ds-console) !important;
  --mco-dark-soft: var(--ds-console-soft) !important;

  --irs-bg: var(--ds-page) !important;
  --irs-bg-alt: var(--ds-section-alt) !important;
  --irs-surface: var(--ds-surface) !important;
  --irs-surface-soft: var(--ds-surface-soft) !important;
  --irs-ink: var(--ds-ink) !important;
  --irs-muted: var(--ds-muted) !important;
  --irs-line: var(--ds-line) !important;
  --irs-line-strong: var(--ds-brand-line) !important;
  --irs-cyan: var(--ds-brand) !important;
  --irs-cyan-strong: var(--ds-brand-strong) !important;
  --irs-green: var(--ds-success) !important;
  --irs-amber: var(--ds-warning) !important;
  --irs-risk: var(--ds-danger) !important;
  --irs-dark: var(--ds-console) !important;
  --irs-dark-soft: var(--ds-console-soft) !important;

  --mso-bg: var(--ds-page) !important;
  --mso-bg-alt: var(--ds-section-alt) !important;
  --mso-surface: var(--ds-surface) !important;
  --mso-surface-soft: var(--ds-surface-soft) !important;
  --mso-ink: var(--ds-ink) !important;
  --mso-muted: var(--ds-muted) !important;
  --mso-line: var(--ds-line) !important;
  --mso-line-strong: var(--ds-brand-line) !important;
  --mso-cyan: var(--ds-brand) !important;
  --mso-cyan-strong: var(--ds-brand-strong) !important;
  --mso-blue: var(--ds-brand-strong) !important;
  --mso-green: var(--ds-success) !important;
  --mso-amber: var(--ds-warning) !important;
  --mso-dark: var(--ds-console) !important;
  --mso-dark-soft: var(--ds-console-soft) !important;
  --mso-dark-panel: var(--ds-console-soft) !important;
}

.support-operations-system,
.infra-control-system,
.continuity-observatory {
  --support-bg: var(--ds-page) !important;
  --support-bg-alt: var(--ds-section-alt) !important;
  --support-surface: var(--ds-surface) !important;
  --support-surface-soft: var(--ds-surface-soft) !important;
  --support-ink: var(--ds-ink) !important;
  --support-muted: var(--ds-muted) !important;
  --support-line: var(--ds-line) !important;
  --support-line-strong: var(--ds-brand-line) !important;
  --support-cyan: var(--ds-brand) !important;
  --support-cyan-strong: var(--ds-brand-strong) !important;
  --support-blue: var(--ds-brand-strong) !important;
  --support-green: var(--ds-success) !important;
  --support-amber: var(--ds-warning) !important;
  --support-red: var(--ds-danger) !important;
  --support-dark: var(--ds-console) !important;
  --support-dark-soft: var(--ds-console-soft) !important;

  --infra-bg: var(--ds-page) !important;
  --infra-bg-alt: var(--ds-section-alt) !important;
  --infra-surface: var(--ds-surface) !important;
  --infra-surface-soft: var(--ds-surface-soft) !important;
  --infra-ink: var(--ds-ink) !important;
  --infra-muted: var(--ds-muted) !important;
  --infra-line: var(--ds-line) !important;
  --infra-line-strong: var(--ds-brand-line) !important;
  --infra-cyan: var(--ds-brand) !important;
  --infra-cyan-strong: var(--ds-brand-strong) !important;
  --infra-blue: var(--ds-brand-strong) !important;
  --infra-green: var(--ds-success) !important;
  --infra-amber: var(--ds-warning) !important;
  --infra-red: var(--ds-danger) !important;
  --infra-dark: var(--ds-console) !important;
  --infra-dark-soft: var(--ds-console-soft) !important;

  --obs-bg: var(--ds-page) !important;
  --obs-bg-alt: var(--ds-section-alt) !important;
  --obs-surface: var(--ds-surface) !important;
  --obs-surface-soft: var(--ds-surface-soft) !important;
  --obs-ink: var(--ds-ink) !important;
  --obs-muted: var(--ds-muted) !important;
  --obs-line: var(--ds-line) !important;
  --obs-line-strong: var(--ds-brand-line) !important;
  --obs-cyan: var(--ds-brand) !important;
  --obs-cyan-strong: var(--ds-brand-strong) !important;
  --obs-blue: var(--ds-brand-strong) !important;
  --obs-green: var(--ds-success) !important;
  --obs-amber: var(--ds-warning) !important;
  --obs-red: var(--ds-danger) !important;
  --obs-dark: var(--ds-console) !important;
  --obs-dark-soft: var(--ds-console-soft) !important;
}

.security-readiness-system,
.workplace-provisioning-system,
.webcraft-experience-system,
.webcraft-design-system {
  --security-bg: var(--ds-page) !important;
  --security-bg-alt: var(--ds-section-alt) !important;
  --security-surface: var(--ds-surface) !important;
  --security-surface-strong: var(--ds-surface-raised) !important;
  --security-ink: var(--ds-ink) !important;
  --security-muted: var(--ds-muted) !important;
  --security-line: var(--ds-line) !important;
  --security-line-strong: var(--ds-brand-line) !important;
  --security-accent: var(--ds-brand-strong) !important;
  --security-accent-bright: var(--ds-brand) !important;
  --security-blue: var(--ds-brand-strong) !important;
  --security-green: var(--ds-success) !important;
  --security-amber: var(--ds-warning) !important;
  --security-red: var(--ds-danger) !important;

  --workplace-bg: var(--ds-page) !important;
  --workplace-bg-alt: var(--ds-section-alt) !important;
  --workplace-surface: var(--ds-surface) !important;
  --workplace-surface-strong: var(--ds-surface-raised) !important;
  --workplace-ink: var(--ds-ink) !important;
  --workplace-muted: var(--ds-muted) !important;
  --workplace-line: var(--ds-line) !important;
  --workplace-line-strong: var(--ds-brand-line) !important;
  --workplace-accent: var(--ds-brand-strong) !important;
  --workplace-accent-bright: var(--ds-brand) !important;
  --workplace-blue: var(--ds-brand-strong) !important;
  --workplace-green: var(--ds-success) !important;
  --workplace-amber: var(--ds-warning) !important;

  --webcraft-bg: var(--ds-page) !important;
  --webcraft-bg-alt: var(--ds-section-alt) !important;
  --webcraft-surface: var(--ds-surface) !important;
  --webcraft-surface-strong: var(--ds-surface-raised) !important;
  --webcraft-ink: var(--ds-ink) !important;
  --webcraft-muted: var(--ds-muted) !important;
  --webcraft-line: var(--ds-line) !important;
  --webcraft-line-strong: var(--ds-brand-line) !important;
  --webcraft-accent: var(--ds-brand-strong) !important;
  --webcraft-accent-bright: var(--ds-brand) !important;
  --webcraft-blue: var(--ds-brand-strong) !important;
  --webcraft-green: var(--ds-success) !important;
  --webcraft-amber: var(--ds-warning) !important;
  --webcraft-coral: var(--ds-danger) !important;
}

.technology-page,
.faq-redesign {
  --tech-page-bg: var(--ds-page) !important;
  --tech-surface: var(--ds-surface) !important;
  --tech-surface-strong: var(--ds-surface-raised) !important;
  --tech-ink: var(--ds-ink) !important;
  --tech-muted: var(--ds-muted) !important;
  --tech-border: var(--ds-line) !important;
  --tech-border-strong: var(--ds-brand-line) !important;
  --tech-cyan: var(--ds-brand-strong) !important;
  --tech-green: var(--ds-success) !important;
  --tech-gold: var(--ds-warning) !important;
  --tech-shadow: var(--ds-shadow-panel) !important;
  --tech-card-shadow: var(--ds-shadow-card) !important;

  --faq-c-bg: var(--ds-page) !important;
  --faq-c-surface: var(--ds-surface) !important;
  --faq-c-surface-alt: var(--ds-surface-soft) !important;
  --faq-c-ink: var(--ds-ink) !important;
  --faq-c-muted: var(--ds-muted) !important;
  --faq-c-line: var(--ds-line) !important;
  --faq-c-line-strong: var(--ds-brand-line) !important;
  --faq-c-accent: var(--ds-brand-strong) !important;
  --faq-c-cyan: var(--ds-brand) !important;
  --faq-c-blue: var(--ds-brand-strong) !important;
  --faq-c-green: var(--ds-success) !important;
  --faq-c-teal: var(--ds-success) !important;
  --faq-c-amber: var(--ds-warning) !important;
  --faq-c-steel: var(--ds-muted) !important;
}

.corporate-page {
  --corp-tech-bg: var(--ds-page) !important;
  --corp-tech-bg-soft: var(--ds-section-alt) !important;
  --corp-tech-surface: var(--ds-surface) !important;
  --corp-tech-surface-strong: var(--ds-surface-raised) !important;
  --corp-tech-ink: var(--ds-ink) !important;
  --corp-tech-muted: var(--ds-muted) !important;
  --corp-tech-border: var(--ds-line) !important;
  --corp-tech-border-strong: var(--ds-brand-line) !important;
  --corp-tech-cyan: var(--ds-brand-strong) !important;
  --corp-tech-green: var(--ds-success) !important;
  --corp-tech-amber: var(--ds-warning) !important;
  --corp-tech-shadow: var(--ds-shadow-panel) !important;
  --corp-tech-card-shadow: var(--ds-shadow-card) !important;
}

.cloud-access-page,
.infrastructure-security-page {
  --ca-bg: var(--ds-page) !important;
  --ca-surface: var(--ds-surface) !important;
  --ca-surface-soft: var(--ds-surface-soft) !important;
  --ca-ink: var(--ds-ink) !important;
  --ca-muted: var(--ds-muted) !important;
  --ca-line: var(--ds-line) !important;
  --ca-line-strong: var(--ds-brand-line) !important;
  --ca-primary: var(--ds-brand) !important;
  --ca-primary-dark: var(--ds-brand-strong) !important;
  --ca-green: var(--ds-success) !important;
  --ca-amber: var(--ds-warning) !important;
  --ca-navy: var(--ds-console) !important;
  --ca-navy-soft: var(--ds-console-soft) !important;
  --ca-shadow-panel: var(--ds-shadow-panel) !important;
  --ca-shadow-soft: var(--ds-shadow-card) !important;

  --inf-surface: var(--ds-surface) !important;
  --inf-soft: var(--ds-surface-soft) !important;
  --inf-ink: var(--ds-ink) !important;
  --inf-muted: var(--ds-muted) !important;
  --inf-line: var(--ds-line) !important;
  --inf-line-strong: var(--ds-brand-line) !important;
  --inf-accent: var(--ds-brand) !important;
  --inf-accent-soft: var(--ds-brand-soft) !important;
  --inf-success: var(--ds-success) !important;
  --inf-navy: var(--ds-console) !important;
  --inf-shadow: var(--ds-shadow-panel) !important;
  --inf-shadow-soft: var(--ds-shadow-card) !important;
}

.about-contact-section,
.security-readiness-cta,
.workplace-provisioning-cta,
.webcraft-project-cta,
.observability-cta,
.support-operations-cta,
.infrastructure-platform-cta {
  --contact-cta-bg: var(--ds-console) !important;
  --contact-cta-bg-soft: var(--ds-console-soft) !important;
  --contact-cta-panel: rgba(255, 255, 255, 0.055) !important;
  --contact-cta-card: rgba(255, 255, 255, 0.055) !important;
  --contact-cta-card-hover: rgba(255, 255, 255, 0.08) !important;
  --contact-cta-ink: var(--ds-console-ink) !important;
  --contact-cta-muted: var(--ds-console-muted) !important;
  --contact-cta-line: rgba(255, 255, 255, 0.12) !important;
  --contact-cta-line-strong: var(--ds-brand-line) !important;
  --contact-cta-accent: var(--ds-brand) !important;
  --contact-cta-accent-strong: var(--ds-brand-strong) !important;
  --contact-cta-accent-soft: var(--ds-brand-soft) !important;
  --contact-cta-shadow: var(--ds-shadow-panel) !important;
}

/* Inline topic colors are content data, not alternate brand palettes. */
.collaboration-platform-card[style*="--collab-accent"] {
  --collab-accent: var(--ds-brand) !important;
}

/* --------------------------------------------------------------------------
   Global rhythm, surfaces and common shapes
   -------------------------------------------------------------------------- */

html,
body {
  font-family: var(--ds-font);
  color: var(--ds-ink);
  background-color: var(--ds-page);
}

:root[data-theme="dark"] body {
  color: var(--ds-ink) !important;
  background-color: var(--ds-page) !important;
}

.home-page,
.corporate-page,
.contact-page,
.blog-index-page,
.blog-article-page,
.simple-faq-page {
  color: var(--ds-ink) !important;
  background-color: var(--ds-page) !important;
}

.container,
.blog-article-container,
main > section > .container {
  width: min(var(--ds-container), calc(100vw - var(--ds-gutter))) !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.service-detail-section,
.about-intro-section,
.about-scope-section,
.about-belief-section,
.about-contact-section,
.legal-document-section,
.contact-form-section,
.faq-overview-section,
.faq-content-section,
.tech-capability-brief,
.tech-stack-section,
.blog-index-library,
.blog-article-section,
.simple-faq-content {
  color: var(--ds-ink);
  background-color: var(--ds-section) !important;
}

.home-page > section:not(.hero),
.corporate-page > section:not(.corporate-hero-modern):not(.cookie-policy-hero),
.contact-page > section:not(.contact-hero-modern),
.blog-index-page > section:not(.blog-index-hero),
.blog-article-page > section:not(.blog-article-hero) {
  border-color: var(--ds-line);
}

.ds-panel,
.corporate-hub-panel,
.services-index-panel,
.service-detail-services-menu,
.contact-request-form,
.contact-direct-card,
.contact-process-card,
.about-contact-panel,
.about-story-panel,
.about-values-panel,
.legal-document,
.legal-document-sidebar-card,
.simple-faq-explorer,
.faq-category,
.faq-side-panel,
.faq-readiness-panel {
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-panel) !important;
  background-color: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-panel) !important;
}

.ds-card,
.corporate-hub-card,
.corporate-link-card,
.home-service-card,
.home-operations-card,
.solution-card,
.service-category-card,
.service-subnav-card,
.service-detail-option,
.service-detail-feature,
.about-scope-card,
.about-statement-card,
.why-reason-card,
.why-outcome-item,
.consultation-point,
.testimonial-card,
.blog-post-card,
.blog-index-card,
.blog-product-panel,
.brand-logo-tile,
.tech-logo-tile,
.simple-faq-item,
.simple-faq-empty,
.faq-list details,
.security-faq-grid details {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-radius-card) !important;
  background-color: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-card) !important;
}

.corporate-hub-card:hover,
.corporate-link-card:hover,
.home-service-card:hover,
.home-operations-card:hover,
.solution-card:hover,
.service-category-card:hover,
.service-subnav-card:hover,
.service-detail-option:hover,
.about-scope-card:hover,
.why-reason-card:hover,
.consultation-point:hover,
.testimonial-card:hover,
.blog-post-card:hover,
.blog-index-card:hover,
.brand-logo-tile:hover,
.tech-logo-tile:hover,
.simple-faq-item:hover {
  border-color: var(--ds-brand-line) !important;
  box-shadow: var(--ds-shadow-card-hover) !important;
}

.btn,
.blog-hero-primary,
.blog-hero-secondary,
.blog-article-start,
.blog-article-solution,
.simple-faq-clear,
.simple-faq-category select,
.simple-faq-search input {
  min-height: 46px;
  border-radius: var(--ds-radius-control) !important;
  font-weight: 700;
  transition:
    transform var(--ds-duration-fast) var(--ds-ease),
    color var(--ds-duration-fast) ease,
    background-color var(--ds-duration-fast) ease,
    border-color var(--ds-duration-fast) ease,
    box-shadow var(--ds-duration-fast) ease !important;
}

.btn-primary,
.blog-hero-primary,
.blog-article-start,
.consultation-action.primary,
.contact-page:not(.contact-hero-legacy-page) .contact-channel.primary {
  border-color: transparent !important;
  color: var(--ds-action-ink) !important;
  background: var(--ds-action-bg) !important;
  box-shadow: var(--ds-shadow-action) !important;
}

.btn-secondary,
.blog-hero-secondary,
.blog-article-solution {
  border: 1px solid var(--ds-line-strong) !important;
  color: var(--ds-ink) !important;
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-card) !important;
}

.contact-page:not(.contact-hero-legacy-page) .contact-channel.whatsapp {
  border-color: color-mix(in srgb, var(--ds-success) 42%, var(--ds-line)) !important;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ds-brand-strong) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   One hero language for every route
   -------------------------------------------------------------------------- */

.site-hero,
.hero.section-band.site-hero,
.corporate-hero-modern,
.contact-hero-modern:not(.contact-hero-legacy),
.blog-latest-page > .blog-index-hero.blog-index-hero--premium,
.blog-article-page > .blog-article-hero.blog-article-hero--editorial {
  position: relative !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: max(647px, calc(100svh - var(--ds-hero-header-offset))) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(44px, 5vw, 72px) 0 !important;
  color: var(--ds-hero-ink) !important;
  background: var(--ds-hero-background) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}

.site-hero::before,
.hero.section-band.site-hero::before,
.corporate-hero-modern::before,
.contact-hero-modern:not(.contact-hero-legacy)::before,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium::before,
.blog-article-page > .blog-article-hero.blog-article-hero--editorial::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  background-image: var(--ds-hero-grid) !important;
  background-size: auto !important;
  opacity: 0.82 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 72%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 72%, transparent 100%) !important;
  pointer-events: none !important;
}

.site-hero::after,
.hero.section-band.site-hero::after,
.corporate-hero-modern::after,
.contact-hero-modern:not(.contact-hero-legacy)::after,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium::after,
.blog-article-page > .blog-article-hero.blog-article-hero--editorial::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 6px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--ds-brand), var(--ds-success), var(--ds-warning)) !important;
  box-shadow: none !important;
  opacity: 0.92 !important;
  transform: none !important;
  pointer-events: none !important;
}

:root .hero.section-band.site-hero .hero-grid.container,
:root .hero.section-band.site-hero .hero-grid,
:root .has-home-section-panel .hero.section-band.site-hero .hero-grid.container,
:root .has-home-section-panel .hero.section-band.site-hero .hero-grid,
:root .corporate-hero-modern .corporate-hero-layout,
:root .corporate-hero-modern .corporate-hub-layout,
:root .corporate-hero-modern .route-hub-layout,
:root .corporate-hero-modern .service-detail-hero-layout,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-layout,
:root .cookie-policy-hero .cookie-policy-hero-layout,
.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium > .blog-index-hero-layout,
.blog-article-hero--editorial .blog-article-hero-grid {
  width: min(var(--ds-container), calc(100vw - var(--ds-gutter))) !important;
  max-width: none !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, var(--ds-hero-panel-size)) !important;
  gap: clamp(36px, 5vw, 84px) !important;
  align-items: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 !important;
}

.blog-article-page > .blog-article-hero.blog-article-hero--editorial > .blog-article-container {
  width: min(var(--ds-container), calc(100vw - var(--ds-gutter))) !important;
  max-width: none !important;
}

:root .hero.section-band.site-hero .hero-copy,
:root .corporate-hero-modern .corporate-hero-copy,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy,
:root .cookie-policy-hero .cookie-policy-hero-copy,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-copy,
.blog-article-hero--editorial .blog-article-heading {
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  min-width: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  padding-left: clamp(18px, 2.2vw, 32px) !important;
  border-left: 1px solid var(--ds-brand-line) !important;
  color: var(--ds-hero-ink) !important;
  text-align: left !important;
}

:root .hero.section-band.site-hero .hero-copy h1,
:root .corporate-hero-modern .corporate-hero-copy h1,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy h1,
:root .cookie-policy-hero .cookie-policy-hero-copy h1,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-copy h1,
.blog-article-hero--editorial .blog-article-heading h1 {
  max-width: 820px !important;
  margin: 0 !important;
  color: var(--ds-hero-ink) !important;
  font-size: var(--ds-title-1) !important;
  font-weight: 800 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: none !important;
}

:root .hero.section-band.site-hero .hero-copy h1 span,
:root .corporate-hero-modern .corporate-hero-copy h1 span,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-copy h1 span,
.blog-article-hero--editorial .blog-article-heading h1 span {
  display: inline !important;
  margin: 0 !important;
  color: inherit !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
}

:root .hero.section-band.site-hero .hero-copy > p:not(.eyebrow),
:root .corporate-hero-modern .corporate-hero-copy > p:not(.eyebrow),
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > p:not(.eyebrow),
:root .cookie-policy-hero .cookie-policy-hero-copy > p:not(.eyebrow),
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-copy > p:not(.blog-index-kicker),
.blog-article-hero--editorial .blog-article-dek {
  max-width: 720px !important;
  margin: 20px 0 0 !important;
  color: var(--ds-hero-muted) !important;
  font-size: var(--ds-body-lg) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

/* Restore and standardize the content hidden by style.css's old hero lock. */
:root .hero.section-band.site-hero .hero-copy > .eyebrow,
:root .corporate-hero-modern .corporate-hero-copy > .eyebrow,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > .eyebrow,
:root .cookie-policy-hero .cookie-policy-hero-copy > .eyebrow,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-kicker,
.blog-article-hero--editorial .blog-article-kicker span,
.blog-article-hero--editorial .blog-breadcrumb {
  width: fit-content !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ds-brand-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  color: var(--ds-brand-text) !important;
  background: var(--ds-brand-soft) !important;
  box-shadow: none !important;
  font-size: var(--ds-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

:root .hero.section-band.site-hero .hero-copy > .eyebrow::before,
:root .corporate-hero-modern .corporate-hero-copy > .eyebrow::before,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > .eyebrow::before,
:root .cookie-policy-hero .cookie-policy-hero-copy > .eyebrow::before,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-kicker::before,
.blog-article-hero--editorial .blog-article-kicker::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border: 0 !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-success) !important;
  box-shadow: 0 0 0 3px var(--ds-success-soft) !important;
}

:root .hero.section-band.site-hero .hero-copy > .hero-actions,
:root .corporate-hero-modern .corporate-hero-copy > .corporate-hero-actions,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > .contact-hero-actions,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-hero-actions,
.blog-article-hero--editorial .blog-article-hero-actions {
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 26px !important;
}

:root .hero.section-band.site-hero .hero-copy > .hero-actions .btn,
:root .corporate-hero-modern .corporate-hero-copy > .corporate-hero-actions .btn,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > .contact-hero-actions .contact-channel,
.blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-hero-actions > a,
.blog-article-hero--editorial .blog-article-hero-actions > a {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: var(--ds-radius-control) !important;
  font-size: var(--ds-small) !important;
  font-weight: 700 !important;
}

:root .corporate-hero-modern .corporate-hero-copy > .route-process-line,
:root .corporate-hero-modern .corporate-hero-copy > .services-process-line,
:root .corporate-hero-modern .corporate-hero-copy > .service-detail-signals {
  max-width: 720px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

:root .corporate-hero-modern .corporate-hero-copy > .route-process-line span,
:root .corporate-hero-modern .corporate-hero-copy > .services-process-line span,
:root .corporate-hero-modern .corporate-hero-copy > .service-detail-signals span {
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border: 1px solid var(--ds-brand-line) !important;
  border-radius: var(--ds-radius-pill) !important;
  color: var(--ds-brand-text) !important;
  background: var(--ds-surface-raised) !important;
  box-shadow: none !important;
  font-size: var(--ds-label) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Every hero uses the same right-panel silhouette. */
:root .hero.section-band.site-hero .hero-visual,
:root .has-home-section-panel .hero.section-band.site-hero .hero-visual,
:root .has-home-section-panel .hero.section-band.site-hero .hero-brand-visual,
:root .corporate-hero-modern .site-context-menu,
:root .contact-hero-modern:not(.contact-hero-legacy) .contact-ops-panel,
:root .cookie-policy-hero .cookie-policy-control-panel,
.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-latest,
.blog-article-hero--editorial .blog-article-visual-card {
  box-sizing: border-box !important;
  width: min(100%, var(--ds-hero-panel-size)) !important;
  max-width: var(--ds-hero-panel-size) !important;
  height: auto !important;
  min-height: 420px !important;
  max-height: none !important;
  justify-self: end !important;
  align-self: center !important;
  overflow: hidden !important;
  border: 1px solid var(--ds-brand-line) !important;
  border-radius: var(--ds-radius-panel) !important;
  color: var(--ds-ink) !important;
  background: var(--ds-hero-panel) !important;
  box-shadow: var(--ds-shadow-panel) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  transform: none !important;
}

:root .hero.section-band.site-hero .hero-visual,
:root .has-home-section-panel .hero.section-band.site-hero .hero-visual,
:root .has-home-section-panel .hero.section-band.site-hero .hero-brand-visual {
  display: grid !important;
  place-items: center !important;
}

:root .corporate-hero-modern .site-context-menu {
  display: flex !important;
  flex-direction: column !important;
}

:root .contact-hero-modern:not(.contact-hero-legacy) .contact-ops-panel {
  display: grid !important;
}

:root .cookie-policy-hero .cookie-policy-control-panel,
.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-latest,
.blog-article-hero--editorial .blog-article-visual-card {
  display: block !important;
}

:root .cookie-policy-hero .cookie-policy-control-panel {
  padding: 14px !important;
}

.blog-latest-page:not(.blog-menu-legacy) .blog-hero-latest-shell {
  width: min(100%, var(--ds-hero-panel-size)) !important;
  max-width: var(--ds-hero-panel-size) !important;
  justify-self: end !important;
}

.blog-latest-page:not(.blog-menu-legacy) .blog-hero-latest-shell::before,
.blog-latest-page:not(.blog-menu-legacy) .blog-hero-latest-shell::after {
  display: none !important;
}

.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-story,
.blog-article-hero--editorial .blog-article-cover,
.blog-article-hero--editorial .blog-article-visual-guide {
  border-color: var(--ds-line) !important;
  border-radius: var(--ds-radius-card) !important;
  color: var(--ds-ink) !important;
  background-color: var(--ds-surface-soft) !important;
  box-shadow: none !important;
}

.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-latest-head h2,
.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-story > div > strong,
.blog-article-hero--editorial .blog-article-visual-guide-head h2,
.blog-article-hero--editorial .blog-article-visual-guide li > strong {
  color: var(--ds-ink) !important;
}

.blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-story > div > small,
.blog-article-hero--editorial .blog-article-visual-topline,
.blog-article-hero--editorial .blog-article-visual-guide-head > span {
  color: var(--ds-muted) !important;
}

.blog-article-hero--editorial .blog-author-mark {
  color: var(--ds-brand-text) !important;
  border-color: var(--ds-brand-line) !important;
  background: var(--ds-brand-soft) !important;
  box-shadow: none !important;
}

.blog-article-hero--editorial .blog-article-meta strong {
  color: var(--ds-hero-ink) !important;
}

.blog-article-hero--editorial .blog-article-meta span {
  color: var(--ds-hero-muted) !important;
}

.blog-article-hero--editorial .blog-article-meta i {
  background: var(--ds-brand-strong) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Motion runtime: visible only when JS, viewport and user preferences agree
   -------------------------------------------------------------------------- */

html.motion-runtime-ready .live-section > .motion-field,
html.motion-runtime-ready .live-section .motion-trace {
  display: block !important;
}

html.motion-runtime-ready .motion-field {
  opacity: 0.72;
}

html.motion-runtime-ready .motion-trace {
  background: linear-gradient(90deg, transparent, var(--ds-brand-line), transparent) !important;
}

html.motion-runtime-ready .motion-reveal {
  --reveal-x: 0px !important;
  --reveal-y: 20px !important;
  --reveal-scale: 0.99 !important;
  opacity: 0 !important;
  filter: blur(3px) !important;
  transform:
    translate3d(var(--motion-base-x, 0px), var(--motion-base-y, 0px), 0)
    translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0)
    translate3d(var(--reveal-x), var(--reveal-y), 0)
    scale(var(--reveal-scale)) !important;
  transition:
    opacity var(--ds-duration-reveal) ease,
    filter var(--ds-duration-reveal) ease,
    transform var(--ds-duration-reveal) var(--ds-ease) !important;
  transition-delay: var(--motion-delay, 0ms) !important;
}

html.motion-runtime-ready .motion-reveal.is-visible {
  --reveal-x: 0px !important;
  --reveal-y: 0px !important;
  --reveal-scale: 1 !important;
  opacity: 1 !important;
  filter: none !important;
}

html.motion-runtime-ready .motion-parallax {
  transform:
    translate3d(var(--motion-base-x, 0px), var(--motion-base-y, 0px), 0)
    translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0)
    translate3d(var(--reveal-x, 0px), var(--reveal-y, 0px), 0)
    scale(var(--reveal-scale, 1)) !important;
}

html.motion-runtime-ready .live-section.is-motion-active .motion-parallax {
  will-change: transform;
}

html.motion-runtime-ready .motion-pulse-target.is-soft-pulsing {
  animation: ds-soft-pulse 940ms var(--ds-ease) both !important;
}

@keyframes ds-soft-pulse {
  0%,
  100% {
    filter: saturate(1);
  }

  50% {
    border-color: var(--ds-brand-line);
    box-shadow: var(--ds-shadow-card-hover);
    filter: saturate(1.08);
  }
}

/* --------------------------------------------------------------------------
   Responsive contract: 1440 desktop down to 390 mobile
   -------------------------------------------------------------------------- */

@media (min-width: 1181px) {
  :root .has-home-section-panel .hero.section-band.site-hero .hero-grid.container,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-grid {
    box-sizing: border-box !important;
    padding-left: 108px !important;
  }
}

@media (max-width: 1180px) {
  :root {
    --ds-gutter: 40px;
  }

  :root .hero.section-band.site-hero .hero-grid.container,
  :root .hero.section-band.site-hero .hero-grid,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-grid.container,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-grid,
  :root .corporate-hero-modern .corporate-hero-layout,
  :root .corporate-hero-modern .corporate-hub-layout,
  :root .corporate-hero-modern .route-hub-layout,
  :root .corporate-hero-modern .service-detail-hero-layout,
  :root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-layout,
  :root .cookie-policy-hero .cookie-policy-hero-layout,
  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium > .blog-index-hero-layout,
  .blog-article-hero--editorial .blog-article-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }

  .site-hero,
  .hero.section-band.site-hero,
  .corporate-hero-modern,
  .contact-hero-modern:not(.contact-hero-legacy),
  .blog-latest-page > .blog-index-hero.blog-index-hero--premium,
  .blog-article-page > .blog-article-hero.blog-article-hero--editorial {
    min-height: 0 !important;
    padding: 52px 0 !important;
  }

  :root .hero.section-band.site-hero .hero-visual,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-visual,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-brand-visual,
  :root .corporate-hero-modern .site-context-menu,
  :root .contact-hero-modern:not(.contact-hero-legacy) .contact-ops-panel,
  :root .cookie-policy-hero .cookie-policy-control-panel,
  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-latest,
  .blog-article-hero--editorial .blog-article-visual-card,
  .blog-latest-page:not(.blog-menu-legacy) .blog-hero-latest-shell {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    min-height: 0 !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 720px) {
  :root {
    --ds-gutter: 28px;
    --ds-title-1: clamp(32px, 9.4vw, 44px);
    --ds-title-2: clamp(25px, 7vw, 34px);
    --ds-body-lg: 16px;
  }

  .site-hero,
  .hero.section-band.site-hero,
  .corporate-hero-modern,
  .contact-hero-modern:not(.contact-hero-legacy),
  .blog-latest-page > .blog-index-hero.blog-index-hero--premium,
  .blog-article-page > .blog-article-hero.blog-article-hero--editorial {
    padding: 42px 0 48px !important;
  }

  :root .hero.section-band.site-hero .hero-copy,
  :root .corporate-hero-modern .corporate-hero-copy,
  :root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy,
  :root .cookie-policy-hero .cookie-policy-hero-copy,
  .blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-index-copy,
  .blog-article-hero--editorial .blog-article-heading {
    width: 100% !important;
    max-width: none !important;
    padding-left: 18px !important;
  }

  :root .hero.section-band.site-hero .hero-copy > .hero-actions,
  :root .corporate-hero-modern .corporate-hero-copy > .corporate-hero-actions,
  :root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > .contact-hero-actions,
  .blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-hero-actions,
  .blog-article-hero--editorial .blog-article-hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root .hero.section-band.site-hero .hero-copy > .hero-actions > *,
  :root .corporate-hero-modern .corporate-hero-copy > .corporate-hero-actions > *,
  :root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-copy > .contact-hero-actions > *,
  .blog-latest-page > .blog-index-hero.blog-index-hero--premium .blog-hero-actions > *,
  .blog-article-hero--editorial .blog-article-hero-actions > * {
    width: 100% !important;
  }

  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-story {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-story > em {
    display: none !important;
  }
}

/* The shared contact CTA uses a true light palette in light theme. */
html:root:not([data-theme="dark"]) body .about-contact-section.about-contact-section {
  --contact-cta-bg: var(--ds-section-alt) !important;
  --contact-cta-bg-soft: var(--ds-surface) !important;
  --contact-cta-panel: var(--ds-surface-raised) !important;
  --contact-cta-card: var(--ds-surface-raised) !important;
  --contact-cta-card-hover: var(--ds-surface) !important;
  --contact-cta-ink: var(--ds-ink) !important;
  --contact-cta-muted: var(--ds-muted) !important;
  --contact-cta-line: var(--ds-line) !important;
  --contact-cta-line-strong: var(--ds-brand-line) !important;
  --contact-cta-accent: var(--ds-brand-strong) !important;
  --contact-cta-accent-strong: var(--ds-brand-strong) !important;
  --contact-cta-accent-soft: var(--ds-brand-soft) !important;
  --contact-cta-shadow: var(--ds-shadow-panel) !important;
  color: var(--ds-ink) !important;
  border-color: var(--ds-line) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(32, 184, 231, 0.09), transparent 31%),
    linear-gradient(118deg, rgba(32, 184, 231, 0.055) 0 30%, transparent 30.2% 100%),
    linear-gradient(180deg, var(--ds-section) 0%, var(--ds-section-alt) 100%) !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section .about-contact-panel {
  color: var(--ds-ink) !important;
  background: transparent !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section :is(
  .about-contact-panel h2,
  .about-contact-assurance strong,
  .about-contact-card-head strong,
  .about-contact-phone strong
) {
  color: var(--ds-ink) !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section :is(
  .about-contact-copy > p:not(.eyebrow),
  .about-contact-route p
) {
  color: var(--ds-muted) !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section :is(
  .about-contact-panel .eyebrow,
  .about-contact-card-head span,
  .about-contact-phone span
) {
  color: var(--ds-brand-strong) !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section :is(
  .about-contact-card,
  .about-contact-assurance div,
  .about-contact-phone
) {
  color: var(--ds-ink) !important;
  border-color: var(--ds-line) !important;
  background: var(--ds-surface-raised) !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section .about-contact-card {
  box-shadow: var(--ds-shadow-panel) !important;
}

html:root:not([data-theme="dark"]) body .about-contact-section .about-contact-route span {
  border-color: var(--ds-surface) !important;
  background: var(--ds-brand) !important;
  box-shadow: 0 0 0 5px var(--ds-brand-soft) !important;
}

@media (max-width: 480px) {
  :root {
    --ds-gutter: 20px;
    --ds-radius-panel: 14px;
    --ds-radius-card: 10px;
  }

  :root .hero.section-band.site-hero .hero-grid.container,
  :root .hero.section-band.site-hero .hero-grid,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-grid.container,
  :root .has-home-section-panel .hero.section-band.site-hero .hero-grid,
  :root .corporate-hero-modern .corporate-hero-layout,
  :root .corporate-hero-modern .corporate-hub-layout,
  :root .corporate-hero-modern .route-hub-layout,
  :root .corporate-hero-modern .service-detail-hero-layout,
  :root .contact-hero-modern:not(.contact-hero-legacy) .contact-hero-layout,
  :root .cookie-policy-hero .cookie-policy-hero-layout,
  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium > .blog-index-hero-layout,
  .blog-article-hero--editorial .blog-article-hero-grid {
    gap: 28px !important;
  }

  :root .corporate-hero-modern .corporate-hero-copy > .route-process-line span,
  :root .corporate-hero-modern .corporate-hero-copy > .services-process-line span,
  :root .corporate-hero-modern .corporate-hero-copy > .service-detail-signals span {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-latest-head {
    align-items: flex-start !important;
    padding: 18px 16px !important;
  }

  .blog-latest-page:not(.blog-menu-legacy) > .blog-index-hero.blog-index-hero--premium .blog-hero-story {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px !important;
  }
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  html.motion-runtime-ready .live-section > .motion-field,
  html.motion-runtime-ready .live-section .motion-trace {
    display: none !important;
  }

  html.motion-runtime-ready .motion-parallax {
    --motion-x: 0px !important;
    --motion-y: 0px !important;
    will-change: auto !important;
  }

  html.motion-runtime-ready .motion-reveal {
    --reveal-y: 12px !important;
    filter: none !important;
    transition-duration: 420ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-runtime-ready .motion-field,
  html.motion-runtime-ready .motion-trace {
    display: none !important;
    animation: none !important;
  }

  html.motion-runtime-ready .motion-reveal,
  html.motion-runtime-ready .motion-reveal.is-visible,
  html.motion-runtime-ready .motion-parallax {
    --motion-x: 0px !important;
    --motion-y: 0px !important;
    --reveal-x: 0px !important;
    --reveal-y: 0px !important;
    --reveal-scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.motion-runtime-ready .motion-pulse-target.is-soft-pulsing,
  html.motion-runtime-ready .live-section.is-motion-active * {
    animation: none !important;
  }
}

/* Keep the desktop command bar collision-free before the mobile menu takes over. */
@media (min-width: 1181px) and (max-width: 1320px) {
  .site-header .header-help {
    display: none !important;
  }

  .site-nav.nav-shell {
    grid-template-columns: minmax(178px, 220px) minmax(0, 1fr) !important;
    gap: clamp(14px, 1.5vw, 20px) !important;
  }

  .site-header .primary-menu {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: clamp(8px, 1vw, 14px) !important;
  }

  .site-header .nav-links {
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  .site-header .nav-links > a,
  .site-header .nav-links > .nav-dropdown > .dropdown-trigger {
    padding-right: 8px !important;
    padding-left: 8px !important;
    font-size: 12.8px !important;
  }

  .site-header .header-actions {
    gap: 8px !important;
  }
}

/* --------------------------------------------------------------------------
   EOF authority lock: every HTML hero carries .site-hero
   -------------------------------------------------------------------------- */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html:root body main > section.site-hero.site-hero.site-hero {
  position: relative !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: max(647px, calc(100svh - var(--ds-hero-header-offset))) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: clamp(44px, 5vw, 72px) 0 !important;
  color: var(--ds-hero-ink) !important;
  background: var(--ds-hero-background) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ds-line) !important;
  box-shadow: none !important;
}

html:root body main > section.site-hero.site-hero.site-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  background-image: var(--ds-hero-grid) !important;
  background-size: auto !important;
  opacity: 0.82 !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 72%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 72%, transparent 100%) !important;
  transform: none !important;
  pointer-events: none !important;
}

html:root body main > section.site-hero.site-hero.site-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 6px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--ds-brand), var(--ds-success), var(--ds-warning)) !important;
  box-shadow: none !important;
  opacity: 0.92 !important;
  transform: none !important;
  pointer-events: none !important;
}

html.motion-runtime-ready .site-hero.is-motion-active .hero-copy > .eyebrow::before,
html.motion-runtime-ready .site-hero.is-motion-active .corporate-hero-copy > .eyebrow::before,
html.motion-runtime-ready .site-hero.is-motion-active .contact-hero-copy > .eyebrow::before,
html.motion-runtime-ready .site-hero.is-motion-active .cookie-policy-hero-copy > .eyebrow::before,
html.motion-runtime-ready .site-hero.is-motion-active .blog-index-kicker::before,
html.motion-runtime-ready .site-hero.is-motion-active .blog-article-kicker::before {
  transform-origin: center !important;
  animation: ds-hero-status-pulse 2.4s ease-in-out infinite !important;
}

@keyframes ds-hero-status-pulse {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
    box-shadow: 0 0 0 3px var(--ds-success-soft), 0 0 0 rgba(19, 155, 117, 0);
  }

  50% {
    opacity: 1;
    transform: scale(1.16);
    box-shadow: 0 0 0 6px transparent, 0 0 16px var(--ds-success-soft);
  }
}

@media (max-width: 1180px) {
  html:root body main > section.site-hero.site-hero.site-hero {
    min-height: 0 !important;
    padding: 52px 0 !important;
  }
}

@media (max-width: 720px) {
  html:root body main > section.site-hero.site-hero.site-hero {
    padding: 42px 0 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-runtime-ready .site-hero.is-motion-active .hero-copy > .eyebrow::before,
  html.motion-runtime-ready .site-hero.is-motion-active .corporate-hero-copy > .eyebrow::before,
  html.motion-runtime-ready .site-hero.is-motion-active .contact-hero-copy > .eyebrow::before,
  html.motion-runtime-ready .site-hero.is-motion-active .cookie-policy-hero-copy > .eyebrow::before,
  html.motion-runtime-ready .site-hero.is-motion-active .blog-index-kicker::before,
  html.motion-runtime-ready .site-hero.is-motion-active .blog-article-kicker::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Laptop-safe floating support control; the existing mobile rule stays intact. */
@media (min-width: 981px) and (max-width: 1400px),
       (min-width: 981px) and (max-height: 820px) {
  .floating-whatsapp-widget {
    width: 64px !important;
    max-width: 64px !important;
  }

  .floating-whatsapp-widget .floating-whatsapp {
    width: 64px !important;
    min-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 8px !important;
    border-radius: var(--ds-radius-pill) !important;
  }

  .floating-whatsapp-widget .floating-whatsapp-copy {
    display: none !important;
  }

  .floating-whatsapp-widget .floating-whatsapp-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
}

/* Legacy EOF rules disabled parallax with equal specificity. Re-enable it only
   for fine pointers and when motion has not been reduced by the user. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:root.motion-runtime-ready body .live-section .motion-parallax.motion-parallax {
    transform:
      translate3d(var(--motion-base-x, 0px), var(--motion-base-y, 0px), 0)
      translate3d(var(--motion-x, 0px), var(--motion-y, 0px), 0)
      translate3d(var(--reveal-x, 0px), var(--reveal-y, 0px), 0)
      scale(var(--reveal-scale, 1)) !important;
  }
}

@media (max-width: 1180px) {
  body.menu-open .site-header .primary-menu {
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-panel) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

.contact-request-form .form-note[data-state="warning"] {
  color: var(--ds-warning-text) !important;
  border-color: color-mix(in srgb, var(--ds-warning) 42%, var(--ds-line)) !important;
  background: var(--ds-warning-soft) !important;
}

.contact-request-form .form-note[data-state="warning"]::before {
  background: var(--ds-warning) !important;
  box-shadow: 0 0 0 4px var(--ds-warning-soft) !important;
}

/* Homepage keeps its original, circular brand-orbit hero composition. */
.home-page > .home-hero-legacy {
  --primary: #30bce9;
  --primary-dark: #087596;
  --hero-bg:
    linear-gradient(115deg, rgba(255, 255, 255, 0.99) 0%, rgba(238, 249, 253, 0.97) 46%, rgba(219, 244, 252, 0.9) 100%);
  --hero-ink: #10212b;
  --hero-muted: #536675;
  --hero-pill-bg: rgba(48, 188, 233, 0.12);
  --hero-pill-border: rgba(48, 188, 233, 0.38);
  --hero-pill-ink: #147fa7;
  --hero-secondary-bg: rgba(255, 255, 255, 0.62);
  --hero-secondary-border: rgba(18, 57, 72, 0.24);
  --top-area-bg: #f7faf9;
  --top-area-ink: #101828;
  --top-area-muted: #5f6b7a;
  --top-area-line: rgba(16, 24, 40, 0.11);
  --top-area-line-strong: rgba(20, 151, 189, 0.24);
  --top-area-cyan: #1497bd;
  --top-area-green: #139b75;
  --top-area-gold: #a36f18;
}

.home-page > .home-hero-legacy .btn-primary {
  color: #ffffff !important;
  border-color: rgba(124, 219, 255, 0.48) !important;
  background:
    linear-gradient(135deg, #42c9f3 0%, #236cf4 58%, #6841e9 100%) !important;
}

.home-page > .home-hero-legacy .btn-secondary {
  color: var(--hero-ink) !important;
  border-color: var(--hero-secondary-border) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 56%),
    var(--hero-secondary-bg) !important;
}

:root[data-theme="dark"] .home-page > .home-hero-legacy {
  --hero-ink: #f8fafc;
  --hero-muted: #cbd5e1;
  --hero-pill-bg: rgba(125, 220, 252, 0.11);
  --hero-pill-border: rgba(125, 220, 252, 0.28);
  --hero-pill-ink: #7ddcff;
  --hero-secondary-bg: rgba(15, 23, 42, 0.72);
  --hero-secondary-border: rgba(125, 220, 252, 0.22);
  --top-area-bg: #0f172a;
  --top-area-ink: #f8fafc;
  --top-area-muted: #cbd5e1;
  --top-area-line: rgba(226, 232, 240, 0.14);
  --top-area-line-strong: rgba(125, 220, 252, 0.24);
  --top-area-cyan: #7ddcff;
  --top-area-green: #6ee7b7;
  --top-area-gold: #f6c76b;
}

/* Keep the shared hero context-menu heading visible and compact. */
.site-context-menu .site-context-head,
.site-context-menu .site-context-head.motion-reveal {
  min-height: 30px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  padding: 0 2px 8px !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

.site-context-menu .site-context-head > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.site-context-menu .site-context-head p {
  display: none !important;
}

.site-context-menu .site-context-head span,
.site-context-menu .site-context-head strong {
  white-space: nowrap !important;
}

.site-context-menu .site-context-nav {
  padding-top: 7px !important;
}

@media (max-width: 720px) {
  .site-context-menu .site-context-head,
  .site-context-menu .site-context-head.motion-reveal {
    min-height: 28px !important;
    padding-bottom: 7px !important;
  }

  .site-context-menu .site-context-nav {
    padding-top: 6px !important;
  }
}