/* ============================================================
   DMS GLOBAL MOBILE FIX — mobile-fix.css
   Applied to every page. Stops horizontal scroll and forces
   all cards / grids to single-column on phones.
   ============================================================ */

/* ── Stop horizontal overflow everywhere ── */
/* overflow-x:clip on html avoids breaking position:fixed (unlike hidden) */
html {
  overflow-x: clip;
  max-width: 100%;
}

/* ── Nav links: correct color on all pages (overrides any global `a` rule) ── */
.nav-links a { color: #B8CBE8; }
body {
  overflow-x: hidden;
  max-width: 100%;
}
*, *::before, *::after {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Nav CTA: gold/amber style on all pages — matches home page ── */
@media (min-width: 1181px) {
  .nav-right .btn-gold,
  .nav-actions .nav-cta {
    /* Pull out of fixed positioning so it sits inline next to nav links */
    position: static !important;
    top: auto !important;
    right: auto !important;
    color: var(--amber-gold, #E5A820) !important;
    border: 2px solid var(--amber-gold, #E5A820) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 10px 18px !important;
    letter-spacing: .02em !important;
    box-shadow: 0 6px 24px rgba(229,168,32,.18) !important;
    border-radius: 8px !important;
  }
  /* Kill the padding-right that was reserving space for fixed CTA */
  #navbar:not(.scrolled) .nav-inner {
    padding-right: 0 !important;
  }
  .nav-right .btn-gold::before,
  .nav-actions .nav-cta::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--amber-gold, #E5A820) !important;
    transition: left .4s cubic-bezier(.4,0,.2,1) !important;
    z-index: -1 !important;
  }
  .nav-right .btn-gold::after,
  .nav-actions .nav-cta::after {
    display: none !important;
  }
  .nav-right .btn-gold:hover,
  .nav-actions .nav-cta:hover {
    color: #08101E !important;
  }
  .nav-right .btn-gold:hover::before,
  .nav-actions .nav-cta:hover::before {
    left: 0 !important;
  }
}

/* ── Hide nav CTA at tablet + mobile (unified button system overrides inline
      display:none at 1180px — this external file fires after, wins) ── */
@media (max-width: 1180px) {
  .nav-right .btn-gold,
  .nav-actions .nav-cta,
  .nav-cta {
    display: none !important;
  }
}

/* Sticky header now handled per-page (blog.css + pricing/insights/privacy/terms inline)
   by patching .nav selector to "#navbar, .nav". No global override needed here. */
/* ── Nav: never overflow viewport, hamburger always visible ── */
@media (max-width: 900px) {
  #navbar,
  .nav {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  #navbar .nav-inner,
  .nav-inner {
    padding: 0 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Hamburger must show */
  .nav-hamburger,
  .hamburger {
    display: flex !important;
  }
}

/* ── Mobile menu slide-in panel (used on all pages) ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--nav-h, 72px);
  background: var(--deep-space, #08101E);
  padding: 40px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), visibility .35s;
  z-index: 999;
  overflow-y: auto;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mobile-menu .nav-links {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  list-style: none;
}
.mobile-menu .nav-links a {
  font-size: 22px;
  font-weight: 600;
  padding: 12px 0;
  width: 100%;
  display: block;
  color: var(--white, #fff);
}
.mobile-menu .nav-links a.active { color: var(--amber-gold, #E5A820); }
.mobile-menu .nav-ctas,
.mobile-menu .m-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Single-column grid on mobile (≤ 768 px) ── */
@media (max-width: 768px) {

  /* Services / feature grids */
  .services-grid,
  .service-grid,
  .svc-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* Work / case study grids */
  .cases-grid,
  .work-grid,
  .portfolio-grid {
    grid-template-columns: 1fr !important;
  }
  .case-card.featured,
  .case-card.span-2 {
    grid-column: 1 !important;
  }

  /* Stats / numbers */
  .stats-grid,
  .stat-grid,
  .track-stats,
  .metrics-grid,
  .exp-metric-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Process / how-it-works steps */
  .process-steps,
  .steps-grid,
  .how-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pricing cards */
  .pricing-grid,
  .plans-grid {
    grid-template-columns: 1fr !important;
  }
  .pricing-card.featured {
    transform: none !important;
  }

  /* About / info two-column grids */
  .about-grid,
  .info-grid,
  .ai-grid,
  .origin-grid,
  .diff-grid,
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tech / logo grids */
  .tech-grid,
  .tools-grid,
  .logo-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* General: any flex row that causes side-scroll → column */
  .hero-ctas,
  .cta-buttons,
  .btn-row,
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Section padding tighter on mobile (preserve sections that need their own gutters) */
  .section,
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section.faq-section,
  .faq-section,
  section.related-section,
  .related-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── Extra small phones (≤ 480 px) ── */
@media (max-width: 480px) {
  .services-grid,
  .service-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-grid,
  .stat-grid,
  .track-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .tech-grid,
  .tools-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Stat numbers: prevent text overflow */
  .stat-num,
  .metric-num,
  .exp-metric-value,
  .track-num {
    font-size: clamp(28px, 8vw, 48px) !important;
    word-break: break-all;
  }
}

/* ── Contact page: centre all content on mobile ── */
@media (max-width: 900px) {
  #contact-hero,
  #contact-main { text-align: center; }
  .contact-hero-inner {
    padding: 0 20px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .contact-hero-inner .h1,
  .contact-hero-inner p,
  .contact-hero-inner .eyebrow,
  .contact-hero-inner .response-note { text-align: center !important; }
  .contact-hero-inner .eyebrow,
  .contact-hero-inner .response-note { margin-left: auto !important; margin-right: auto !important; }
  .contact-channels { width: 100% !important; }
  .channel-card {
    text-align: center !important;
    align-items: center !important;
  }
  .channel-card > div { width: 100% !important; }
  .channel-detail {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .channel-icon { text-align: center !important; display: flex !important; justify-content: center !important; }
  .channel-card .btn-gold,
  .channel-card .btn-ghost { align-self: center !important; margin: 0 auto !important; }
  .contact-form-wrap { width: 100% !important; }
  .contact-form-card { padding: 28px 20px !important; text-align: left !important; }
  .contact-form-card .h3,
  .contact-form-card .form-sub { text-align: center !important; }
  .calendly-inline-widget {
    width: 100% !important;
    min-width: 0 !important;
  }
  #contact-main .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Co-founder cards: stack on tablets (601-768) ── */
@media (max-width: 768px) and (min-width: 601px) {
  .about-hero-founders,
  .about-visual,
  .founders-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 20px !important;
  }
  .founder-hero-card,
  .founder-card {
    max-width: 420px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .founder-hero-img,
  .founder-img {
    aspect-ratio: 4/5 !important;
  }
  .founder-hero-img img,
  .founder-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
}

/* ── Phones (≤ 600 px): carousel — image fully contained inside card frame ── */
@media (max-width: 600px) {
  .founder-hero-card,
  .founder-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .founder-hero-img,
  .founder-img {
    aspect-ratio: 4/5 !important;
    max-height: none !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .founder-hero-img img,
  .founder-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
}

/* ── Insights: featured paid-media span-2 card on mobile ── */
@media (max-width: 900px) {
  .article-card.span-2 {
    display: flex !important;
    flex-direction: column !important;
    grid-column: span 1 !important;
  }
  .article-card.span-2 .article-thumb {
    min-height: 200px !important;
    height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }
  .article-card.span-2 .article-body {
    padding: 24px !important;
    justify-content: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
  }
  .article-card.span-2 .article-body h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  .article-card.span-2 .article-body p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .article-card .article-thumb {
    min-height: 180px !important;
    flex-shrink: 0 !important;
  }
}
@media (max-width: 600px) {
  .article-card.span-2 .article-thumb {
    min-height: 170px !important;
    height: 170px !important;
  }
  .article-card .article-thumb {
    min-height: 160px !important;
  }
}

/* ── Nav-right on mobile: pull lang-switcher and hamburger close together ── */
@media (max-width: 900px) {
  .nav-right,
  .nav-actions {
    gap: 8px !important;
  }
  /* Ensure hamburger spans visible regardless of theme background */
  .nav-hamburger span,
  .hamburger span {
    background: var(--white, #fff) !important;
  }
  [data-theme="light"] .nav-hamburger span,
  [data-theme="light"] .hamburger span {
    background: var(--deep-space, #08101E) !important;
  }
  /* Mobile-menu in light mode: keep panel dark for contrast vs page */
  [data-theme="light"] .mobile-menu {
    background: #08101E !important;
  }
  [data-theme="light"] .mobile-menu .nav-links a {
    color: #fff !important;
  }
}

/* ── Stat number font / padding clamp on mobile ── */
@media (max-width: 768px) {
  /* index.html verified outcomes & similar stat blocks */
  .stat-number,
  .stat-num,
  .track-stat-val,
  .metric-num,
  .exp-metric-value,
  .work-stat-num {
    font-size: clamp(24px, 7vw, 40px) !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .stat-item,
  .track-stat {
    padding: 20px 12px !important;
  }

  /* Work stats row on index.html */
  .work-stats-row,
  .work-stats-with-label {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .work-stat-item {
    min-width: 0 !important;
    flex: 1 1 120px !important;
  }

  /* Work stats: white-space:nowrap is a common overflow cause */
  .work-stat-desc,
  .stat-desc,
  .stat-label,
  .track-stat-label {
    white-space: normal !important;
    word-break: break-word;
  }
  .work-stats-row,
  .work-stats-with-label {
    flex-wrap: wrap !important;
  }
  .work-stat-item {
    min-width: 80px !important;
    max-width: 100% !important;
  }

  /* Cookie banner min-width fix */
  .cookie-text {
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Insights filter pills — no horizontal scroll leak */
  .filter-inner,
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding-bottom: 4px;
  }

  /* Country tags row on about page */
  .countries-row,
  .country-tags {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── Cookie banner: force to bottom regardless of DOM position ── */
#cookieBanner {
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transform: translateY(100%) !important;
  max-width: 100vw !important;
}
#cookieBanner.visible {
  transform: translateY(0) !important;
}

/* ── Prevent any single child from blowing out the layout ── */
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}
pre, code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Mobile menu: hidden by default on ALL pages (some pages lack inline hide CSS) ── */
.mobile-menu,
#mobileMenu {
  position: fixed !important;
  inset: 0 !important;
  top: 72px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(100%) !important;
  pointer-events: none !important;
  transition: opacity .35s cubic-bezier(.16,1,.3,1), visibility .35s, transform .35s cubic-bezier(.16,1,.3,1) !important;
  z-index: 999 !important;
  background: #08101E !important;
  padding: 24px 24px 32px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.mobile-menu.open,
#mobileMenu.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ── Mobile menu overlay (about.html, index.html, etc.) ── */
@media (max-width: 900px) {
  .mobile-overlay,
  .nav-mobile,
  #mobileMenu,
  .mobile-menu {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
  }
}

/* ── Absolute/fixed positioned elements that can overflow ── */
@media (max-width: 768px) {
  /* Silk canvas / hero background — don't let it cause scroll */
  #silk-canvas,
  .hero-bg,
  .hero-canvas {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  /* Hero section itself */
  .hero,
  #hero,
  .hero-section {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}

/* ── Mobile menu: active link — proper pill with generous padding ── */
@media (max-width: 900px) {
  .mobile-menu .nav-links li {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 !important;
  }
  .mobile-menu .nav-links a {
    border-bottom: none !important;
  }
  .mobile-menu .nav-links a.active {
    background: var(--amber-gold, #E5A820) !important;
    color: #08101E !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    display: inline-block !important;
    width: auto !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 6px 20px rgba(229,168,32,.35) !important;
  }

  /* Mobile menu CTA container — flex column with gap so buttons never overlap */
  .mobile-menu .nav-ctas,
  .mobile-menu .m-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 32px !important;
    width: 100% !important;
  }

  /* Mobile menu CTA buttons — gold bordered, not white ghost */
  .mobile-menu .m-ctas .btn-gold,
  .mobile-menu .m-ctas a.btn-gold,
  .mobile-menu .nav-ctas .btn-gold,
  .mobile-menu .nav-ctas a.btn-gold {
    background: var(--amber-gold, #E5A820) !important;
    color: #08101E !important;
    border: 2px solid var(--amber-gold, #E5A820) !important;
    border-radius: 8px !important;
    text-align: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    width: 100% !important;
  }

  .mobile-menu .m-ctas .btn-ghost,
  .mobile-menu .m-ctas a.btn-ghost,
  .mobile-menu .nav-ctas .btn-ghost,
  .mobile-menu .nav-ctas a.btn-ghost {
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.55) !important;
    text-align: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Ensure hamburger is never pushed off screen */
  .nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .nav-hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  /* Let's Talk eyebrow — no overflow on mobile */
  .eyebrow {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Hero CTA buttons on mobile — full width, stacked */
  .hero-ctas,
  .cta-group,
  .btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-ctas .btn-gold,
  .hero-ctas .btn-ghost,
  .cta-group .btn-gold,
  .cta-group .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ── Kill any remaining klein-blue buttons — use amber-gold instead ── */
.btn-blue,
a.btn-blue,
button.btn-blue {
  background: transparent !important;
  color: var(--amber-gold, #E5A820) !important;
  border: 2px solid var(--amber-gold, #E5A820) !important;
}
.btn-blue:hover,
a.btn-blue:hover {
  background: var(--amber-gold, #E5A820) !important;
  color: #08101E !important;
}

/* ── FORCE DARK THEME PERMANENTLY — disable all light theme styles ── */
html[data-theme="light"],
html[data-theme] {
  /* Force every CSS variable back to dark values */
}

/* Override all [data-theme="light"] selectors by raising body to dark */
html, html[data-theme="light"] {
  background: #08101E !important;
  color: #FFFFFF !important;
}

body, html[data-theme="light"] body {
  background: #08101E !important;
  color: #FFFFFF !important;
}

/* Cancel ALL light theme overrides — universal selector */
[data-theme="light"] *,
[data-theme="light"] *::before,
[data-theme="light"] *::after {
  /* leave layout alone, only fight color-related light values where needed */
}

/* Most common light-theme overrides that break visibility */
[data-theme="light"] body,
[data-theme="light"] section,
[data-theme="light"] #footer,
[data-theme="light"] footer,
[data-theme="light"] .work-card,
[data-theme="light"] .case-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .insight-card,
[data-theme="light"] .svc-card,
[data-theme="light"] .pillar-card,
[data-theme="light"] .seo-card,
[data-theme="light"] .channel-card,
[data-theme="light"] .contact-form-card {
  background: #08101E !important;
  color: #FFFFFF !important;
  border-color: #1E3055 !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .h1,
[data-theme="light"] .h2,
[data-theme="light"] .h3,
[data-theme="light"] .h4 {
  color: #FFFFFF !important;
}

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] label,
[data-theme="light"] .body-lg {
  color: #B8CBE8 !important;
}

[data-theme="light"] .nav-links a {
  color: #B8CBE8 !important;
}

[data-theme="light"] .nav-logo img {
  filter: none !important;
}

/* ── Case study pages: nav-links must hide on mobile ── */
@media (max-width: 900px) {
  /* Force any nav-links list to be hidden on mobile, not row-displayed */
  #navbar .nav-links,
  nav .nav-links,
  .nav-links {
    display: none !important;
  }
  /* But keep mobile-menu nav-links visible when menu is open */
  .mobile-menu .nav-links,
  .mobile-menu.open .nav-links {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ── Let's Talk marquee — prevent overlap on mobile ── */
/* NOTE: .dms-marquee-text sizing is controlled by footer-marquee.js (injected <style>).
   Only apply overrides to generic third-party marquee classes here. */
@media (max-width: 768px) {
  .marquee,
  .marquee-track,
  .scrolling-text {
    font-size: clamp(28px, 8vw, 60px) !important;
    gap: 24px !important;
  }
  .marquee-item,
  .marquee-text,
  .scrolling-item {
    padding: 0 16px !important;
    white-space: nowrap !important;
  }
}

/* ── Scrolled nav pill — clean layout without theme toggle ── */
@media (max-width: 900px) {
  #navbar.scrolled .nav-right {
    gap: 6px !important;
  }
  #navbar.scrolled .lang-switcher {
    margin: 0 !important;
  }
  #navbar.scrolled .nav-inner {
    justify-content: space-between !important;
    position: static !important;
  }
  #navbar.scrolled .nav-logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
}

/* ── Kill the CTA padding-right that beats lower-specificity overrides ── */
/* These selectors match specificity 0,1,2,0 exactly — same as the competing rule,
   but this file loads after the inline <style> block, so last-writer wins. */
@media (max-width: 900px) {
  #navbar:not(.scrolled) .nav-inner,
  #navbar.scrolled .nav-inner {
    padding: 0 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: space-between !important;
  }
}

/* ── Mobile nav layout: logo left, controls right, no overlap ── */
@media (max-width: 900px) {
  /* Full-width fixed bar */
  #navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    transform: none !important;
    border-radius: 0 !important;
    background: rgba(8, 16, 30, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid #1E3055 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Nav inner: logo left, nav-right right */
  #navbar .nav-inner,
  .nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  /* Logo: left side, in normal flow */
  .nav-logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .nav-logo img {
    height: 36px !important;
    min-height: 0 !important;
    width: auto !important;
    max-width: 150px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Hide desktop links */
  .nav-links {
    display: none !important;
  }

  /* Controls: lang + hamburger, right side */
  .nav-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }

  /* Lang button: compact */
  .lang-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Hamburger: visible, right of lang */
  .nav-hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
  }

  /* Scrolled pill: flatten back to bar on mobile */
  #navbar.scrolled {
    top: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    background: rgba(8, 16, 30, 0.97) !important;
  }
  #navbar.scrolled .nav-inner {
    padding: 0 20px !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #navbar.scrolled .nav-logo {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
  #navbar.scrolled .nav-logo img {
    height: 36px !important;
    min-height: 0 !important;
  }
}

/* ── No white backgrounds anywhere — force dark unified ── */
[data-theme="light"] section,
[data-theme="light"] section:nth-of-type(even),
[data-theme="light"] body,
[data-theme="light"] #footer,
[data-theme="light"] footer,
[data-theme="light"] .work-card,
[data-theme="light"] .case-card,
[data-theme="light"] .team-card,
[data-theme="light"] .deliverable,
[data-theme="light"] .value-item,
[data-theme="light"] .insight-card,
[data-theme="light"] .svc-card,
[data-theme="light"] .pillar-card,
[data-theme="light"] .seo-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .channel-card,
[data-theme="light"] .contact-form-card,
[data-theme="light"] .article-card,
[data-theme="light"] #contact-main,
[data-theme="light"] #contact-hero,
[data-theme="light"] #trust-strip,
[data-theme="light"] .light-bg {
  background: #08101E !important;
  color: #FFFFFF !important;
  border-color: #1E3055 !important;
}

/* Cards must stay readable */
.work-card, .case-card, .team-card, .insight-card, .svc-card, .pillar-card,
.seo-card, .pricing-card, .channel-card, .article-card, .deliverable,
.value-item {
  background: #0D1826 !important;
  border: 1px solid #1E3055 !important;
}

/* Inputs / form fields readable on dark */
input, textarea, select,
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #0D1826 !important;
  color: #FFFFFF !important;
  border-color: #1E3055 !important;
}

input::placeholder, textarea::placeholder {
  color: #B8CBE8 !important;
  opacity: 0.6;
}

/* Body text on light theme overrides */
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] label,
[data-theme="light"] .body-lg,
[data-theme="light"] .channel-desc,
[data-theme="light"] .channel-detail,
[data-theme="light"] .form-label,
[data-theme="light"] .form-note,
[data-theme="light"] .footer-brand p,
[data-theme="light"] .footer-col ul a,
[data-theme="light"] .footer-bottom p {
  color: #B8CBE8 !important;
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .h1,
[data-theme="light"] .h2,
[data-theme="light"] .h3,
[data-theme="light"] .h4,
[data-theme="light"] .footer-col-title,
[data-theme="light"] .channel-card .h3,
[data-theme="light"] .contact-form-card .h3 {
  color: #FFFFFF !important;
}

[data-theme="light"] .nav-logo img {
  filter: none !important;
}

/* Ensure article thumbnails always render their inline background image */
.article-thumb {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
  min-height: 200px !important;
}
.article-thumb-overlay {
  background: linear-gradient(180deg, rgba(8,16,30,0) 0%, rgba(8,16,30,0.7) 100%) !important;
}

/* Ensure article hero inline background-image is not wiped by light-theme shorthand */
[data-theme="light"] .article-hero {
  background-color: #0A2463 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
[data-theme="light"] .article-hero::before {
  background: linear-gradient(160deg, rgba(10,36,99,0.78) 0%, rgba(27,58,138,0.55) 55%, rgba(10,36,99,0.85) 100%) !important;
}

/* ============================================================
   NO BLUE BUTTONS — all buttons transparent, no solid fills
   ============================================================ */

/* Kill blue solid background on pricing tier CTAs */
.tier-cta,
.featured .tier-cta {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
}
.tier-cta:hover,
.featured .tier-cta:hover {
  background: transparent !important;
  border-color: var(--amber-gold, #E5A820) !important;
  color: var(--amber-gold, #E5A820) !important;
}

/* Kill blue hover fill on ALL buttons site-wide */
.btn-gold::after,
.btn-blue::after,
.btn-ghost::after,
.btn-ghost-dark::after {
  background: transparent !important;
  display: none !important;
}

/* Hover: gold border + text only, no fill */
.btn-gold:hover,
.btn-blue:hover,
.btn-ghost:hover,
.btn-ghost-dark:hover {
  background: transparent !important;
  color: var(--amber-gold, #E5A820) !important;
  border-color: var(--amber-gold, #E5A820) !important;
}

/* Nav CTA "Book a Free Call": keep amber fill on hover */
@media (min-width: 1181px) {
  .nav-right .btn-gold:hover,
  .nav-actions .nav-cta:hover {
    color: #08101E !important;
    border-color: var(--amber-gold, #E5A820) !important;
  }
  .nav-right .btn-gold::before,
  .nav-actions .nav-cta::before {
    background: var(--amber-gold, #E5A820) !important;
    display: block !important;
  }
}

/* ============================================================
   TESTIMONIAL DRAG SCROLL — cursor grab on testi-track-wrap
   ============================================================ */
.testi-track-wrap {
  cursor: grab !important;
  user-select: none !important;
}
.testi-track-wrap.dragging {
  cursor: grabbing !important;
}
.testi-track-wrap.dragging .testi-track {
  animation-play-state: paused !important;
  transition: none !important;
}

/* ============================================================
   LANGUAGE SWITCHER — full button + dropdown styles
   Covers blog, insights, and any page that lacks per-page CSS
   ============================================================ */
.lang-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.lang-btn {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(184,203,232,0.85) !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(30,48,85,0.6) !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color .2s, border-color .2s !important;
  flex-shrink: 0 !important;
}
.lang-btn:hover {
  color: #fff !important;
  border-color: rgba(184,203,232,0.4) !important;
}
.lang-btn svg {
  width: 12px !important;
  height: 12px !important;
  transition: transform .2s !important;
}
.lang-switcher.open .lang-btn svg {
  transform: rotate(180deg) !important;
}

/* ============================================================
   LANGUAGE DROPDOWN — hidden by default globally
   Many pages have HTML class="lang-menu" but no CSS rule that
   hides it. Force hidden, show on .open or .lang-switcher.open.
   ============================================================ */
.lang-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 140px !important;
  background: var(--card-dark, #0F1624) !important;
  border: 1px solid var(--card-border, rgba(255,255,255,.08)) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease !important;
  z-index: 200 !important;
  display: block !important;
  flex-direction: unset !important;
}
.lang-switcher.open .lang-menu,
.lang-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}
.lang-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  color: rgba(255,255,255,.78) !important;
  transition: background .15s, color .15s !important;
}
.lang-menu button:hover,
.lang-menu button.active {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}
[data-theme="light"] .lang-menu {
  background: #FFFFFF !important;
  border-color: #C5D3F0 !important;
}
[data-theme="light"] .lang-menu button {
  color: #3A4F7A !important;
}
[data-theme="light"] .lang-menu button:hover,
[data-theme="light"] .lang-menu button.active {
  background: #F4F7FF !important;
  color: #08101E !important;
}

/* ── Verified Results: card layout on mobile (no iframes) ── */
@media (max-width: 700px) {
  .vr-accordion {
    flex-direction: column !important;
    height: auto !important;
    gap: 12px !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Every panel = full card */
  .vr-panel,
  .vr-panel.vr-active {
    flex: none !important;
    height: auto !important;
    min-height: unset !important;
    border-radius: 14px !important;
    border: 1px solid rgba(30,48,85,0.9) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 18px 16px !important;
    gap: 14px !important;
    background: #0B1524 !important;
    transition: none !important;
    will-change: auto !important;
    cursor: pointer !important;
  }
  .vr-panel.vr-active {
    border-color: rgba(229,168,32,0.4) !important;
  }

  /* Hide iframe and overlays */
  .vr-panel-iframe,
  .vr-panel-shadow,
  .vr-panel-vtag {
    display: none !important;
  }

  /* Icon circle: in flow, not absolute */
  .vr-panel-icon,
  .vr-panel.vr-active .vr-panel-icon {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 16px !important;
  }

  /* Info section: always visible */
  .vr-panel-info,
  .vr-panel.vr-active .vr-panel-info {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    flex: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Override per-panel light backgrounds */
  .vr-panel:nth-child(1) .vr-panel-info,
  .vr-panel:nth-child(2) .vr-panel-info,
  .vr-panel:nth-child(3) .vr-panel-info,
  .vr-panel:nth-child(4) .vr-panel-info {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Fix dark-on-light text colors for dark card bg */
  .vr-panel:nth-child(1) .vr-info-name,
  .vr-panel:nth-child(3) .vr-info-name,
  .vr-panel:nth-child(4) .vr-info-name {
    color: #fff !important;
  }
  .vr-panel:nth-child(1) .vr-info-tag {
    color: #a5b4fc !important;
    background: rgba(79,70,229,0.15) !important;
  }
  .vr-panel:nth-child(3) .vr-info-tag {
    color: #fb923c !important;
    background: rgba(234,88,12,0.15) !important;
  }
  .vr-panel:nth-child(4) .vr-info-tag {
    color: #93c5fd !important;
    background: rgba(0,47,167,0.2) !important;
  }

  .vr-info-tag {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  .vr-info-name {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }
  .vr-info-cta {
    font-size: 11px !important;
    padding: 7px 14px !important;
    align-self: flex-start !important;
  }
}

/* ============================================================
   BLOG FAQ + RELATED — center, dark, no white overlay
   ============================================================ */

/* FAQ section: force dark bg regardless of theme, kill tap-highlight,
   center inner grid + headings to same max-width. */
.faq-section,
section.faq-section,
[data-theme="light"] .faq-section,
[data-theme] .faq-section {
  background: #0F1624 !important;
  border-top: 1px solid #1E2D4D !important;
  border-bottom: 1px solid #1E2D4D !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}

/* Inner content all centered with same width budget */
.faq-section .eyebrow,
.faq-section h2,
.faq-section .faq-grid {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* FAQ items: kill any white flash + ensure dark inheritance */
.faq-section .faq-item,
.faq-section .faq-q,
.faq-section .faq-a,
.faq-section button.faq-q {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-tap-highlight-color: transparent !important;
}
.faq-section .faq-q { color: #FFFFFF !important; }
.faq-section .faq-a { color: #B8CBE8 !important; }
.faq-section .faq-a p { color: #B8CBE8 !important; }
.faq-section h2 { color: #FFFFFF !important; }
.faq-section .faq-item { border-bottom: 1px solid #1E2D4D !important; }

/* Light-theme FAQ override: defeat var(--card-dark)=#fff path */
[data-theme="light"] .faq-section,
[data-theme="light"] section.faq-section {
  background: #0F1624 !important;
}
[data-theme="light"] .faq-section h2,
[data-theme="light"] .faq-section .faq-q { color: #FFFFFF !important; }
[data-theme="light"] .faq-section .faq-a,
[data-theme="light"] .faq-section .faq-a p { color: #B8CBE8 !important; }
[data-theme="light"] .faq-section .faq-item { border-bottom-color: #1E2D4D !important; }

/* Mobile-specific FAQ centering + spacing */
@media (max-width: 768px) {
  .faq-section,
  section.faq-section {
    padding: 48px 20px !important;
  }
  .faq-section .eyebrow {
    justify-content: flex-start !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }
  .faq-section h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    text-align: left !important;
    margin-bottom: 28px !important;
    max-width: 100% !important;
  }
  .faq-section .faq-q {
    font-size: 15px !important;
    padding: 18px 0 !important;
    line-height: 1.4 !important;
  }
  .faq-section .faq-a {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

/* Related section: same dark, same centering, real image cards */
.related-section,
section.related-section {
  background: #08101E !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}
.related-section .related-grid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Related card: tighten layout so emoji-only thumbs still look intentional */
.related-section .related-card {
  background: #0F1624 !important;
  border: 1px solid #1E2D4D !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.related-section .related-thumb {
  height: 160px !important;
  background-color: #0A2463 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 44px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.related-section .related-thumb::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(8,16,30,0.15) 0%, rgba(8,16,30,0.65) 100%) !important;
  pointer-events: none !important;
}
.related-section .related-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}
.related-section .related-body h3 {
  color: #FFFFFF !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.related-section .related-cat { color: #F5A623 !important; }
.related-section .related-read { color: #F5A623 !important; padding-top: 12px !important; }

/* Variant-D cards (geo/seo/technical pages): hide duplicate emoji icon
   now that thumb above already shows it; pad raw children. */
.related-section .related-card > .related-card-badge,
.related-section .related-card > h3,
.related-section .related-card > .related-card-arrow {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.related-section .related-card > .related-card-badge {
  margin-top: 16px !important;
}
.related-section .related-card > h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #FFFFFF !important;
  margin: 6px 0 !important;
}
.related-section .related-card > .related-card-arrow {
  color: #F5A623 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding-bottom: 20px !important;
  display: block !important;
}
/* Hide redundant emoji icon — image is in thumb now */
.related-section .related-card > .related-card-icon {
  display: none !important;
}

@media (max-width: 768px) {
  .related-section,
  section.related-section { padding: 48px 20px !important; }
  .related-section h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    text-align: left !important;
  }
  .related-section .related-thumb { height: 180px !important; }
}