/* =====================================================================
   MSM — Dark Mode
   ---------------------------------------------------------------------
   Scoped entirely to [data-theme="dark"] so light mode is byte-for-byte
   unchanged. The site is built mostly on CSS custom properties, so the
   first block re-maps the palette and flips ~90% of the UI for free.
   The blocks after it override the hardcoded #ffffff / #fff backgrounds
   and the few !important locks that don't read a variable.

   Goal: EVERY part visible — no dark text on dark, no white text on white,
   no blown-out white cards/forms/footer.
   ===================================================================== */

:root[data-theme="dark"] {
  /* Page + surfaces */
  --bg:           #0a1020;   /* page base */
  --bg-alt:       #0e1729;   /* alt sections (was #f8fafc) */
  --surface:      #121c33;   /* cards / panels (was #ffffff) */
  --surface-soft: #0e1729;

  /* Text */
  --ink:    #eef2fb;         /* primary text (was near-black) */
  --muted:  #a7b1c8;         /* secondary text (was #5d6880) */

  /* Brand / accent.
     CRITICAL: --navy is used site-wide BOTH as heading/label TEXT and as a
     dark chip BACKGROUND. On a dark UI those pull in opposite directions, so
     we remap --navy to light ink (fixes every `color:var(--navy)` heading,
     label, strong, footer link, stat number, checklist item in one move) and
     re-introduce the dark chip colour as --navy-surface, applied below only to
     the handful of elements that use --navy as a background. */
  --navy:         #eef2fb;   /* now LIGHT — it is text in ~95% of uses */
  --navy-surface: #16224a;   /* the old dark-navy, for chip backgrounds */
  --accent:       #6f9bff;
  --accent-soft:  rgba(111, 155, 255, .18);
  --light:        #18233f;

  /* Borders + shadows */
  --border:        rgba(180, 200, 255, .12);
  --shadow:        0 10px 30px rgba(0, 0, 0, .45);
  --shadow-strong: 0 20px 44px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* Base page */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

/* --- Elements that used --navy as a BACKGROUND keep a dark chip --- */
[data-theme="dark"] .primary-btn,
[data-theme="dark"] .comparison-head,
[data-theme="dark"] .contact-form button {
  background: var(--navy-surface);
  color: #fff;
}

/* --- Primary CTA buttons: many variants are WHITE-bg with var(--navy) text
   (banner CTAs on desktop, and the base .primary-btn on mobile). With --navy
   now light, that text vanishes. Force every white-bg primary CTA to a solid
   ACCENT chip with white text so the call-to-action is bright + obvious on the
   dark UI. Covers desktop banners AND mobile. --- */
[data-theme="dark"] .banner-action .primary-btn,
[data-theme="dark"] .service-category-section .banner-action .primary-btn,
[data-theme="dark"] .category-banner .banner-action .primary-btn {
  background: var(--accent) !important;
  color: #06122c !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45) !important;
}
[data-theme="dark"] .banner-action .primary-btn:hover,
[data-theme="dark"] .service-category-section .banner-action .primary-btn:hover,
[data-theme="dark"] .category-banner .banner-action .primary-btn:hover {
  background: #8fb2ff !important;
  color: #06122c !important;
}
[data-theme="dark"] .nav-link::after,
[data-theme="dark"] .hero-divider {
  background-color: var(--accent);
}
[data-theme="dark"] .footer-social-row .social-circle:hover {
  background: var(--accent) !important;
}
/* solid-btn (Call Now) also used navy bg via the .solid-btn rule */
[data-theme="dark"] .solid-btn {
  background: var(--navy-surface);
  color: #fff;
}

/* White CTA buttons that keep a white background but coloured their label
   with var(--navy) (now light) -> force a dark label so it stays readable. */
[data-theme="dark"] .hero-btn-solid {
  /* beats the inline style="color:var(--navy)" on this button */
  color: #0a1430 !important;
}

/* Global headings default to var(--navy) (now a dark surface tone) -> flip to
   ink so every unclassed h1/h2/h3 on a light->dark section stays visible.
   Headings that sit on genuinely dark bands already set their own white color,
   so this never makes them too light. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--ink);
}

/* ----- Section backgrounds (hardcoded literals) ----- */
[data-theme="dark"] .section-alt {
  background: var(--bg-alt);
}
[data-theme="dark"] .section-process {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
[data-theme="dark"] .trust-strip {
  background: var(--bg);
}

/* ----- Generic white cards/panels -> dark surface ----- */
[data-theme="dark"] .trust-item,
[data-theme="dark"] .service-feature,
[data-theme="dark"] .service-card,
[data-theme="dark"] .service-index,
[data-theme="dark"] .comparison-row,
[data-theme="dark"] .step-list article,
[data-theme="dark"] .faq-list details,
[data-theme="dark"] .home-contact-card,
[data-theme="dark"] .legal-content,
[data-theme="dark"] .secondary-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}

/* Comparison table card + heads */
[data-theme="dark"] .comparison-table {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .comparison-row {
  border-top-color: var(--border);
}
[data-theme="dark"] .comparison-head span {
  background: rgba(255, 255, 255, .06);
}

/* Process step number badges (white circles on dark) */
[data-theme="dark"] .step-list article .step-index,
[data-theme="dark"] .process-step .step-number,
[data-theme="dark"] .step-list .step-number {
  background: var(--surface);
  color: var(--ink);
}

/* ----- Header ----- */
[data-theme="dark"] .site-header {
  background: rgba(10, 16, 32, .92);
  border-bottom: 1px solid var(--border);
}

/* Desktop scroll capsule — dark frosted glass version */
@media (min-width: 992px) {
  [data-theme="dark"] .site-header.is-scrolled {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  [data-theme="dark"] .site-header.is-scrolled .header-shell {
    background: rgba(16, 24, 44, 0.66);
    border: 1px solid rgba(111, 155, 255, 0.16);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
  [data-theme="dark"] .site-header.is-scrolled .nav-capsule {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}
[data-theme="dark"] .nav-capsule {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .nav-link {
  color: var(--muted);
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--ink);
}
[data-theme="dark"] .nav-overlay {
  background: rgba(0, 0, 0, .6);
}
[data-theme="dark"] .hamburger-bar {
  background: var(--ink);
}

/* Ghost button (white pill -> dark pill) */
[data-theme="dark"] .ghost-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
[data-theme="dark"] .ghost-btn:hover {
  background: var(--navy);
  color: #fff;
}

/* Keep the WhatsApp CTA glowing green in dark mode too (brand colour).
   High specificity to beat the generic dark .ghost-btn rules incl. the mobile
   header override. */
[data-theme="dark"] .header-actions .ghost-btn[href*="wa.me"] {
  background: linear-gradient(135deg, #25d366 0%, #1ebe57 55%, #12a347 100%);
  color: #ffffff;
  border: 1px solid rgba(37, 211, 102, 0.5);
  box-shadow: 0 8px 24px rgba(18, 190, 92, 0.45);
}
[data-theme="dark"] .header-actions .ghost-btn[href*="wa.me"] .nav-btn-icon {
  color: #ffffff;
}
[data-theme="dark"] .header-actions .ghost-btn[href*="wa.me"]:hover {
  background: linear-gradient(135deg, #2ee06f 0%, #23c95f 55%, #16b04e 100%);
  box-shadow: 0 12px 32px rgba(18, 190, 92, 0.6);
}

/* ----- Forms ----- */
[data-theme="dark"] .contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
}
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select {
  background: #0c1426;
  color: var(--ink);
  border-color: var(--border);
}
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: #76819b;
}
/* Catch-all for any form control (selects/inputs) outside .contact-form too.
   Some controls carry an inline `background:#fff` so we need !important. */
[data-theme="dark"] input:not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #0c1426 !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] select option {
  background: #0c1426;
  color: var(--ink);
}

/* ----- Footer (the "light footer" — fully re-skinned) ----- */
[data-theme="dark"] .site-footer,
[data-theme="dark"] .site-footer.site-footer,           /* beat the !important lock */
[data-theme="dark"] .footer-top-bar,
[data-theme="dark"] .footer-middle,
[data-theme="dark"] .footer-newsletter,
[data-theme="dark"] .footer-bottom {
  background: var(--bg-alt) !important;
  color: var(--ink);
}
[data-theme="dark"] .site-footer {
  border-top-color: var(--border);
}
[data-theme="dark"] .footer-top-bar,
[data-theme="dark"] .footer-newsletter {
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .footer-middle {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .footer-social-row .social-circle {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}
[data-theme="dark"] .footer-social-row .social-circle:hover {
  background: var(--accent);
  color: #fff;
}
/* Footer column headings use --navy (now dark) -> ink. Match !important
   since the compact-footer override block re-declares these. */
[data-theme="dark"] .footer-column h3 {
  color: var(--ink) !important;
}
[data-theme="dark"] .footer-brand .footer-logo-sub,
[data-theme="dark"] .footer-brand-lead,
[data-theme="dark"] .footer-brand-detail {
  color: var(--muted) !important;
}
/* Footer links / muted copy */
[data-theme="dark"] .site-footer a,
[data-theme="dark"] .footer-column a,
[data-theme="dark"] .footer-column .contact-item-link {
  color: var(--muted);
}
[data-theme="dark"] .footer-column a:hover,
[data-theme="dark"] .footer-column .contact-item-link:hover {
  color: var(--accent);
}
[data-theme="dark"] .site-footer a:hover {
  color: var(--accent);
}
[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer li,
[data-theme="dark"] .site-footer span,
[data-theme="dark"] .footer-bottom {
  color: var(--muted);
}

/* ----- Generic borders that used the navy-on-white rgba ----- */
[data-theme="dark"] .nav-capsule,
[data-theme="dark"] .service-card,
[data-theme="dark"] .service-index,
[data-theme="dark"] .home-contact-card,
[data-theme="dark"] .ghost-btn {
  border-color: var(--border);
}

/* Hero frosted stats bar (white glass + navy text -> dark glass + ink) */
[data-theme="dark"] .hero-stats-bar {
  background: rgba(12, 20, 40, .82);
  box-shadow: 10px 0 30px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .hero-stats-bar .stat-item:not(:last-child) {
  border-right-color: var(--border);
}
[data-theme="dark"] .hero-stats-bar .stat-icon,
[data-theme="dark"] .hero-stats-bar .stat-number {
  color: var(--ink);
}

/* Footer wordmark "MSM" (navy / #061844 !important -> ink) */
[data-theme="dark"] .footer-brand .footer-logo-text {
  color: var(--ink) !important;
}

/* ----- Already-dark sections (hero / contact hero) stay dark; just make
   sure their deep navy reads against the new dark page, not float white. */
[data-theme="dark"] .contact-hero {
  background: #060b18;
}

/* =====================================================================
   SUB-PAGE HERO (.detail-hero) + HOMEPAGE HERO seam fix.
   The detail hero had `border-bottom: 1px solid rgba(255,255,255,.08)`,
   which against the near-black page reads as a bright hairline "line".
   Remove that seam and add a soft fade from the hero into the page bg so
   the transition is invisible. Same idea for the homepage hero.
   ===================================================================== */
[data-theme="dark"] .detail-hero {
  border-bottom: 0;
}
[data-theme="dark"] .detail-hero::after {
  /* repurpose the decorative blob layer to also carry a bottom fade to --bg
     so the hero melts into the page instead of ending on a hard edge. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  right: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(to bottom, rgba(10, 16, 32, 0), var(--bg));
  filter: none;
  z-index: 2;
}
/* Hero photo scrim: deepen so the photo doesn't wash out against the dark UI */
[data-theme="dark"] .detail-hero[style*="--detail-hero-bg"] {
  background-image:
    linear-gradient(rgba(6, 11, 24, 0.86), rgba(6, 11, 24, 0.96)),
    var(--detail-hero-bg);
}

/* Homepage hero: kill any bright bottom seam, deepen base */
[data-theme="dark"] .hero-section {
  background: #060b18;
  border-bottom: 0;
}
/* The desktop homepage hero puts the navy heading directly over a BRIGHT
   daylight photo. In dark mode --navy becomes light ink, so light text on a
   bright photo washes out. Add a left-heavy dark scrim over the photo (between
   image z-index:0 and copy z-index:2) so the heading + lead stay readable. */
[data-theme="dark"] .hero-image-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      rgba(4, 9, 20, 0.94) 0%,
      rgba(4, 9, 20, 0.86) 30%,
      rgba(4, 9, 20, 0.55) 52%,
      rgba(4, 9, 20, 0.20) 70%,
      rgba(4, 9, 20, 0.05) 100%);
}
/* Keep the copy above the new scrim */
[data-theme="dark"] .hero-copy {
  z-index: 3;
}
/* Hero heading/lead/eyebrow already use --navy/--muted (now light) — ensure
   they read as bright on the scrim. */
[data-theme="dark"] .hero-heading {
  color: #f4f7ff;
}
[data-theme="dark"] .hero-lead,
[data-theme="dark"] .hero-eyebrow {
  color: #c6d2ea;
}

/* ----- Service category section locked icon ----- */
[data-theme="dark"] .service-category-section .category-view-more .service-icon {
  background: var(--accent) !important;
}

/* ----- Preloader: already dark navy, keep but match new base ----- */
[data-theme="dark"] #msm-preloader {
  background: radial-gradient(circle at 50% 40%, #0a1b4d 0%, #04081a 90%);
}

/* =====================================================================
   ROUND 2 FIXES — sections/cards that don't read a variable.
   ===================================================================== */

/* Logo: the MSM mark is dark navy on transparent -> invisible on a dark
   header. We ship a dedicated WHITE version (msm-logo-white.webp, alpha kept)
   and swap to it in dark mode. No white box/chip — the mark sits directly on
   the dark header. Two <img>s in .brand-mark; CSS shows the right one.
   Using a real white asset (not a CSS filter) is bulletproof against any
   browser/CDN quirks that made the filtered logo look like a white box. */
[data-theme="dark"] .brand-mark {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
/* default (light) state */
.brand-logo--light { display: none; }
.brand-logo--dark  { display: block; }
/* dark state: show white logo, hide the dark one */
[data-theme="dark"] .brand-logo--light { display: block; }
[data-theme="dark"] .brand-logo--dark  { display: none; }

/* Core Services band (hardcoded #f8fafc) */
[data-theme="dark"] .section-core-services {
  background: var(--bg-alt);
}
/* Core Services list rows (translucent white -> translucent surface) */
[data-theme="dark"] .core-list-item {
  background: rgba(18, 28, 51, .72);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .core-list-text h3 {
  color: var(--ink);
}
[data-theme="dark"] .core-list-text p {
  color: var(--muted);
}

/* Homepage category service cards (the white tiles w/ the chevron).
   The base sheet locks these with `background:#fff !important`, so we must
   match !important to win. */
[data-theme="dark"] .category-service-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .category-service-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5) !important;
}

/* Process stepper number nodes (white circles) */
[data-theme="dark"] .process-step-node {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .process-step-num,
[data-theme="dark"] .process-step-node .process-step-num {
  color: var(--ink);
}
[data-theme="dark"] .category-service-item h3 {
  color: var(--ink) !important;   /* base sets #0f172a !important */
}
[data-theme="dark"] .category-service-item p {
  color: var(--muted) !important;
}
[data-theme="dark"] #setup-licensing .category-service-item h3,
[data-theme="dark"] #visa-immigration .category-service-item h3 {
  color: var(--ink);
}

/* Full-screen homepage category sections (white !important) */
[data-theme="dark"] .service-category-section {
  background: var(--bg) !important;
}
/* Their heading + lead use dark navy literals (#061a55 / #263a70 !important) */
[data-theme="dark"] .service-category-section .category-info h2 {
  color: var(--ink) !important;
}
[data-theme="dark"] .service-category-section .category-info .lead {
  color: var(--muted) !important;
}

/* Footer social circle has its own white+navy locked rule */
[data-theme="dark"] .footer-social-row .social-circle {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="dark"] .footer-social-row .social-circle:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Footer stats band (#ffffff + #cfd9ea border, both !important) */
[data-theme="dark"] .footer-stats {
  background: var(--bg-alt) !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .footer-stats .footer-stat-number,
[data-theme="dark"] .footer-stats strong {
  color: var(--ink);
}
[data-theme="dark"] .footer-stats .footer-stat-label,
[data-theme="dark"] .footer-stats small,
[data-theme="dark"] .footer-stats p {
  color: var(--muted);
}

/* Social circles already handled, ensure border reads */
[data-theme="dark"] .social-circle {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}

/* Any remaining white "section" with an inline-ish white bg */
[data-theme="dark"] .section[style*="#fff"],
[data-theme="dark"] .section[style*="#ffffff"] {
  background: var(--bg) !important;
}

/* =====================================================================
   LEGAL PAGES (privacy / terms / disclaimer) — light hero + container.
   ===================================================================== */
[data-theme="dark"] .legal-page-container {
  background: var(--bg);
}
[data-theme="dark"] .legal-hero {
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--surface) 100%);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .legal-hero h1 {
  color: var(--ink);
}
[data-theme="dark"] .legal-content {
  background: var(--bg);
}
[data-theme="dark"] .legal-text-wrapper {
  color: var(--muted);
}
[data-theme="dark"] .legal-text-wrapper h2,
[data-theme="dark"] .legal-text-wrapper h3,
[data-theme="dark"] .legal-text-wrapper strong {
  color: var(--ink);
}

/* =====================================================================
   BLOG ARTICLE PAGES (.blog-article white body + light callout).
   ===================================================================== */
[data-theme="dark"] .blog-article {
  background: var(--bg);
}
[data-theme="dark"] .article-body h2 {
  color: var(--ink);
}
[data-theme="dark"] .article-body p {
  color: var(--muted);
}
[data-theme="dark"] .article-body li {
  color: var(--ink);
}
[data-theme="dark"] .article-callout {
  background: var(--surface);
  border-color: rgba(111, 155, 255, .25);
  color: var(--ink);
}
[data-theme="dark"] .article-hero-image {
  border-color: var(--border);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
}
/* Blog index page + cards */
[data-theme="dark"] .blog-index-section {
  background: var(--bg);
}
[data-theme="dark"] .blog-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .blog-card:hover {
  border-color: rgba(111, 155, 255, .3);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .blog-card h2 a {
  color: var(--ink);
}
[data-theme="dark"] .blog-card h2 a:hover {
  color: var(--accent);
}
[data-theme="dark"] .blog-card p {
  color: var(--muted);
}

/* =====================================================================
   FAQ SECTION (homepage + every service detail page) — light gradient
   band with translucent white cards and navy summary text.
   ===================================================================== */
[data-theme="dark"] .service-faq-section {
  background:
    radial-gradient(circle at top, rgba(111, 155, 255, .10) 0%, transparent 42%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-top-color: var(--border);
}
[data-theme="dark"] .faq-item {
  background: rgba(18, 28, 51, .86);
  border-color: var(--border);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .faq-item:hover,
[data-theme="dark"] .faq-item[open] {
  background: rgba(22, 33, 60, .96);
  border-color: rgba(111, 155, 255, .25);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
}
/* Summary text uses --navy (still dark) -> force to readable ink */
[data-theme="dark"] .faq-summary {
  color: var(--ink);
}
[data-theme="dark"] .faq-content {
  color: var(--muted);
  border-top-color: var(--border);
}

/* =====================================================================
   SERVICE DETAIL PAGES — detail-card grid + side info panels.
   ===================================================================== */
[data-theme="dark"] .detail-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .detail-card:hover {
  border-color: rgba(111, 155, 255, .3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .detail-card h3,
[data-theme="dark"] .pane-header h2,
[data-theme="dark"] .pane-header h3,
[data-theme="dark"] .side-info-panel h3 {
  color: var(--ink);
}
[data-theme="dark"] .detail-card p,
[data-theme="dark"] .side-info-panel li,
[data-theme="dark"] .side-info-panel p {
  color: var(--muted);
}
[data-theme="dark"] .detail-card-icon {
  background: linear-gradient(135deg, rgba(111, 155, 255, .2), rgba(59, 130, 246, .2));
}
[data-theme="dark"] .side-info-panel {
  background: var(--surface);
  border-color: var(--border);
}

/* Checklist bullet text (uses --navy -> dark on dark) */
[data-theme="dark"] .service-point-item {
  color: var(--ink);
}

/* =====================================================================
   SERVICE DETAIL "alternating" sections (used on service pages).
   ===================================================================== */
[data-theme="dark"] .service-section.align-left {
  background: var(--surface);
}
[data-theme="dark"] .service-section.align-right {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--surface) 100%);
}

/* Generic light gradient hero/journey bands (#f6f8fd -> #eef3fc family) */
[data-theme="dark"] .journey-section,
[data-theme="dark"] .section-process {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

/* =====================================================================
   COMPACT FOOTER OVERRIDE (authoritative).
   The footer redesign (lines ~3070-3310 in styles.css) hardcodes
   `color:#061844 !important`, white card backgrounds, and light borders
   (#cfd9ea / #d9e2ef / #c5d0e2 / #eef4ff) on EVERY footer element. We must
   match !important on each to make the footer fully dark + readable.
   ===================================================================== */
[data-theme="dark"] .footer-top-title,
[data-theme="dark"] .footer-top-sub,
[data-theme="dark"] .footer-brand .footer-logo-text,
[data-theme="dark"] .footer-brand-lead,
[data-theme="dark"] .footer-brand-detail,
[data-theme="dark"] .footer-column.contact-col .contact-item-link span,
[data-theme="dark"] .stat-card-title {
  color: var(--ink) !important;
}
[data-theme="dark"] .footer-brand .footer-logo-sub,
[data-theme="dark"] .footer-column a,
[data-theme="dark"] .footer-column .contact-item-link,
[data-theme="dark"] .footer-column.services-col a::after,
[data-theme="dark"] .stat-card-desc,
[data-theme="dark"] .footer-bottom {
  color: var(--muted) !important;
}
[data-theme="dark"] .footer-column h3 {
  color: var(--ink) !important;
}
[data-theme="dark"] .footer-column a:hover,
[data-theme="dark"] .footer-column .contact-item-link:hover {
  color: var(--accent) !important;
}
/* Footer borders / dividers (light greys -> subtle dark) */
[data-theme="dark"] .footer-middle,
[data-theme="dark"] .footer-stats,
[data-theme="dark"] .footer-stat-card:not(:last-child),
[data-theme="dark"] .footer-column a,
[data-theme="dark"] .footer-column .contact-item-link {
  border-color: var(--border) !important;
}
/* Stat icon chips (light blue circle -> accent-tinted dark) */
[data-theme="dark"] .stat-card-icon {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
/* Social circles (white -> surface) */
[data-theme="dark"] .footer-social-row .social-circle {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
/* Contact-item + logo-bar accent stays accent */
[data-theme="dark"] .footer-column.contact-col .contact-item-link svg,
[data-theme="dark"] .footer-brand .footer-logo-bar {
  color: var(--accent) !important;
}

/* ----- Selection + scrollbar polish ----- */
[data-theme="dark"] ::selection {
  background: var(--accent);
  color: #061026;
}

/* =====================================================================
   Theme toggle button (lives in header-actions). Styled for both modes
   here so it ships with dark.css.
   ===================================================================== */
/* Theme toggle (desktop): a round icon button that matches the height of the
   adjacent ghost/solid CTA buttons and is vertically centred in the header. */
.header-actions {
  align-items: center;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 2.8vw, 48px);
  height: clamp(40px, 2.8vw, 48px);
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border, rgba(12, 29, 85, .12));
  background: var(--surface, #fff);
  color: var(--ink, #09162f);
  cursor: pointer;
  flex: 0 0 auto;
  align-self: center;
  transition: background-color .25s ease, color .25s ease, transform .2s ease, border-color .25s ease;
}
.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.theme-toggle svg {
  width: clamp(18px, 1.2vw, 22px);
  height: clamp(18px, 1.2vw, 22px);
  display: block;
}
[data-theme="dark"] .theme-toggle {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
/* Show sun in dark mode (to go light), moon in light mode (to go dark) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* =====================================================================
   MOBILE-SPECIFIC DARK OVERRIDES (<=991px).
   mobile.css introduces its own white surfaces (mobile header, the Core
   Services slide cards, the Why-Us point cards, step nodes) that the desktop
   rules above don't reach. Re-skin them here.
   ===================================================================== */
@media (max-width: 991px) {
  [data-theme="dark"] .site-header {
    background: rgba(10, 16, 32, .94);
    box-shadow: none;
    border-bottom: 1px solid var(--border);
  }
  /* Mobile header icon buttons */
  [data-theme="dark"] .header-actions .ghost-btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink);
  }
  [data-theme="dark"] .header-actions .solid-btn {
    background: var(--navy-surface);
    color: #fff;
  }
  [data-theme="dark"] .hamburger-bar {
    background: var(--ink);
  }
  /* Core Services mobile slide cards */
  [data-theme="dark"] .core-slide-link {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    color: var(--ink);
  }
  [data-theme="dark"] .core-slide-body h3 {
    color: var(--ink);
  }
  [data-theme="dark"] .core-slide-body p {
    color: var(--muted);
  }
  /* Why-Us mobile point cards */
  [data-theme="dark"] .why-point {
    background: var(--surface);
    border-color: var(--border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  }
  [data-theme="dark"] .why-point-title,
  [data-theme="dark"] .why-point h3 {
    color: var(--ink);
  }
  /* Process step nodes on mobile */
  [data-theme="dark"] .process-step-node {
    background: var(--surface);
    border-color: var(--border);
  }
  /* Mobile category sections: the grid card has a white->light gradient with a
     navy heading that washes out in dark mode. */
  [data-theme="dark"] .category-grid,
  [data-theme="dark"] .category-grid.reverse {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-alt) 100%) !important;
    border-color: var(--border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45) !important;
  }
  [data-theme="dark"] .category-grid .category-info h2,
  [data-theme="dark"] .category-info h2 {
    color: var(--ink);
  }
  [data-theme="dark"] .category-info .lead,
  [data-theme="dark"] .category-info .eyebrow {
    color: var(--muted);
  }
  /* Core slide media placeholder (light grey) */
  [data-theme="dark"] .core-slide-media {
    background: var(--bg-alt);
  }
  /* Mobile primary CTA buttons: mobile.css sets .primary-btn to white-bg +
     var(--navy) text, which goes invisible (light-on-white) in dark mode.
     Make them a bright accent chip with dark label so the CTA stands out. */
  [data-theme="dark"] .primary-btn {
    background: var(--accent) !important;
    color: #06122c !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5) !important;
  }
  [data-theme="dark"] .primary-btn:hover {
    background: #8fb2ff !important;
    color: #06122c !important;
  }

  /* ---- Mobile HAMBURGER DRAWER (open menu panel) — PREMIUM ----
     SHARED LAYOUT for BOTH light & dark: a full-height panel with full-width
     rounded link rows, hairline separators, and a left accent rail on the
     active/hover item (no flat card, no centered underline glitch).
     Colours are themed in the two blocks below. */
  .site-header.menu-open .main-nav {
    height: calc(100svh - 86px);
    min-height: calc(100vh - 86px);
    padding: 22px 18px calc(26px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-bottom: 0;
  }
  .site-header.menu-open .header-shell {
    background: transparent;
  }
  .site-header.menu-open .nav-capsule {
    width: 100%;
    align-items: stretch;
    gap: 2px;
  }
  .site-header.menu-open .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    margin: 0;
    padding: 15px 16px 15px 18px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .005em;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
  }
  /* Kill the centered underline dash inside the drawer (reads as a glitch). */
  .site-header.menu-open .nav-link.active::after {
    content: none;
  }
  .site-header.menu-open .nav-link::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: var(--accent);
    transition: height .22s ease;
  }
  .site-header.menu-open .nav-link.active,
  .site-header.menu-open .nav-link:hover {
    padding-left: 24px;
  }
  .site-header.menu-open .nav-link.active::before,
  .site-header.menu-open .nav-link:hover::before {
    height: 58%;
  }
  .site-header.menu-open .nav-capsule .nav-link:last-child {
    border-bottom: 0;
  }
  .site-header.menu-open .mobile-drawer-ctas {
    margin-top: 32px;
    padding-top: 22px;
  }

  /* ---- LIGHT-MODE colours (premium, default) ---- */
  .site-header.menu-open .main-nav {
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(47, 99, 216, .08) 0%, transparent 46%),
      linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
    box-shadow: 0 24px 60px rgba(12, 29, 85, .14);
  }
  .site-header.menu-open {
    background: #ffffff;
  }
  .site-header.menu-open .nav-link {
    color: var(--navy);
    border-bottom: 1px solid rgba(12, 29, 85, .07);
  }
  .site-header.menu-open .nav-link.active,
  .site-header.menu-open .nav-link:hover {
    color: var(--accent);
    background: linear-gradient(90deg, rgba(47, 99, 216, .10) 0%, rgba(47, 99, 216, .02) 100%);
  }
  .site-header.menu-open .mobile-drawer-ctas {
    border-top: 1px solid rgba(12, 29, 85, .08);
  }

  /* ---- DARK-MODE colours ---- */
  [data-theme="dark"] .site-header.menu-open .main-nav {
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(47, 99, 216, .14) 0%, transparent 46%),
      linear-gradient(180deg, #0b1226 0%, #070d1c 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  [data-theme="dark"] .site-header.menu-open {
    background: #0b1226;
  }
  [data-theme="dark"] .site-header.menu-open .nav-link {
    color: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .055);
  }
  [data-theme="dark"] .site-header.menu-open .nav-link.active,
  [data-theme="dark"] .site-header.menu-open .nav-link:hover {
    color: #fff;
    background: linear-gradient(90deg, rgba(111, 155, 255, .16) 0%, rgba(111, 155, 255, .04) 100%);
  }
  [data-theme="dark"] .site-header.menu-open .mobile-drawer-ctas {
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
  [data-theme="dark"] .site-header.menu-open .mobile-drawer-ctas .solid-btn {
    background: linear-gradient(135deg, #2f63d8 0%, #1b3f9e 100%);
    color: #fff;
    box-shadow: 0 14px 34px rgba(47, 99, 216, .4);
  }
  [data-theme="dark"] .site-header.menu-open .mobile-drawer-ctas .ghost-btn {
    background: rgba(255, 255, 255, .04);
    color: var(--ink);
    border-color: rgba(111, 155, 255, .28);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  }
  [data-theme="dark"] .nav-overlay {
    background: rgba(2, 6, 16, .72);
  }
}

[data-theme="dark"] .author-bio-card {
  background: var(--surface);
  border-color: rgba(111, 155, 255, .25);
}
[data-theme="dark"] .author-details h4 {
  color: var(--ink);
}
[data-theme="dark"] .author-details p {
  color: var(--muted);
}