/* ==========================================================================
   Quantum Tech - Light theme overlay
   --------------------------------------------------------------------------
   Loaded AFTER assets/css/style.css, and only in the static build.

   Intent: white becomes the primary colour (page surface + default text) and
   NAVY BLUE (#112A4F) becomes the secondary colour — used for solid section
   bands, the footer, the CTA band and navy hovers. Brand blue (#2A75BF) stays
   as the text/link accent for headings and eyebrows. The hero keeps its copy
   panel but the right-hand side now sits on a clean WHITE background with the
   looping photos presented as white-framed cards.

   The base stylesheet paints most of its own chrome dark and hardcodes a lot
   of #fff text, so this file has to flip both the surfaces and the text, then
   re-assert white inside the places that stay navy (section bands, blue CTA).
   ========================================================================== */

:root {
  /* --- the swap -------------------------------------------------------- */
  --primary:        #FFFFFF;   /* page surface (was #1A1C20)              */
  --secondary:      #112A4F;   /* NAVY BLUE — solid section bands, footer */
  --charcoal:       #0F172A;
  --dark:           #F1F5F9;   /* was #141619 - now a light slate          */
  --darker:         #E2E8F0;
  --navy:           #1E3A5F;
  --surface:        #FFFFFF;
  --surface-2:      #F1F5F9;

  /* --- dark text on the light surface ---------------------------------- */
  --text:           #0F172A;
  --text-muted:     #475569;
  --text-subtle:    #64748B;

  /* --- the light blues were tuned for a dark page and vanish on white --- */
  --accent-light:   #1D5CA0;   /* was #549EEB - 2.8:1 on white            */
  --accent-bright:  #2A75BF;   /* was #8EC5FA                            */
  --accent-glow:    rgba(42, 117, 191, 0.10);

  /* --- borders: the old ones were white-on-dark and vanish on white --- */
  --border:         rgba(15, 23, 42, 0.10);
  --border-light:   rgba(15, 23, 42, 0.16);

  --gradient-dark:  linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
  --gradient-hero:  linear-gradient(135deg, #F8FAFC 0%, #E8F0FA 55%, #DCE9F7 100%);
  --gradient-card:  linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);

  --shadow-sm:      0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md:      0 4px 16px rgba(15, 23, 42, 0.10);
  --shadow-lg:      0 12px 36px rgba(15, 23, 42, 0.12);
}

body { background-color: var(--primary); color: var(--text); }

/* --------------------------------------------------------------------------
   1. Headings - the base sheet sets every h1-h6 to #fff
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--text); }
.section-title,
.about-card-title,
.service-card h3,
.cert-strip-title,
.tech-card-header-text h3,
.contact-info-item h3,
.footer-heading,
.blog-body h3,
.excellence-item h3,
.why-item h3,
.industry-card h3,
.team-card h3,
.testimonial-text { color: var(--text); }

/* re-assert white where the surface really is dark / blue */
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4,
.cta-section .cta-title,
.section-surface h1, .section-surface h2, .section-surface h3,
.section-surface h4, .section-surface h5, .section-surface h6 { color: #FFFFFF !important; }

/* --------------------------------------------------------------------------
   2. Surfaces that were hardcoded dark
   -------------------------------------------------------------------------- */
/* section-dark bands become a soft slate wash so white → wash → navy
   alternates down the page (white primary / navy secondary hierarchy)

   This selector list used to end in a trailing comma with no { }, so it
   swallowed the .section-dark/.founder-section selectors below and the
   declaration block below was applied to every heading in the navy bands
   too. That painted a #F1F5F9 box behind headings whose text is forced
   white by the rules above, e.g. the "Enterprise Technology Services"
   heading in #services: white text on a near-white box, 1.1:1. Closing the
   list above keeps the slate wash scoped to the two bands that want it. */
.section-dark,
.founder-section { background: #F1F5F9 !important; color: var(--text) !important; }
.section-dark p, .section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark span, .section-dark li,
.founder-section p, .founder-section h1, .founder-section h2,
.founder-section h3, .founder-section span, .founder-section li { color: var(--text); }
.section-dark .section-desc, .founder-section .section-desc { color: var(--text-muted); }

.page-hero { background: linear-gradient(180deg, #112A4F 0%, #0D1F3C 100%) !important; }
.page-hero h1, .page-hero h2, .page-hero .page-hero-desc { color: #FFFFFF !important; }
.page-hero .section-desc { color: rgba(255, 255, 255, 0.82) !important; }
.page-hero .qt-breadcrumb, .page-hero .qt-breadcrumb a { color: rgba(255, 255, 255, 0.82) !important; }
.page-hero .qt-breadcrumb .separator, .page-hero .qt-breadcrumb .current { color: rgba(255, 255, 255, 0.7) !important; }
.page-hero .qt-breadcrumb a:hover { color: #FFFFFF !important; }

.trust-section {
  background: linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 50%, #EFF6FF 100%);
}
.trust-section::before { content: none; }
.trust-section::after  { content: none; }

/* Decorative rule that flanks the label chip */
.trust-rule {
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, rgba(42, 117, 191, 0) 0%, #2A75BF 50%, rgba(42, 117, 191, 0) 100%);
  flex-shrink: 0;
}
.trust-label-icon { font-size: 1.05rem; color: #FFC633; margin-right: 2px; }

/* The eyebrow was a 12%-opacity blue on a near-white section, so it measured
   passable but read as faint next to the partner logos. It is a trust signal,
   so give it a solid brand-blue chip with white copy: unambiguous at a glance. */
.trust-label {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #2A75BF 0%, #1D5CA0 100%) !important;
  border: none !important;
  padding: 9px 26px !important;
  box-shadow: none !important;
  letter-spacing: 0.12em !important;
  border-radius: 9999px !important;
}
.trust-label:hover { background: linear-gradient(135deg, #3587D6 0%, #2568A8 100%) !important; }

.qt-card,
.blog-card,
.service-card,
.excellence-item,
.why-item,
.industry-card,
.team-card,
.tech-capability-card,
.tree-card,
.cert-strip-card,
.stat-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.qt-card:hover, .blog-card:hover, .service-card:hover, .excellence-item:hover,
.why-item:hover, .industry-card:hover, .team-card:hover,
.tech-capability-card:hover, .tree-card:hover, .stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}
.tree-card-apex { background: linear-gradient(145deg, #EFF6FF 0%, #FFFFFF 100%) !important; }

.stat-card, .cert-strip-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #F1F5F9 100%) !important;
}
.stat-card .stat-value, .stat-card .stat-label { color: var(--text) !important; }
.stat-label, .cert-strip-text, .blog-meta, .service-num { color: var(--text-subtle) !important; }
.stat-card .stat-value { color: var(--secondary) !important; }
.cert-strip-status { color: #166534 !important; background: rgba(21, 128, 61, 0.10) !important; }
.cert-strip-icon { background: rgba(42, 117, 191, 0.12); color: var(--accent); }
.cert-strip-title { color: var(--text) !important; }

/* the services list paints itself dark with !important, twice over */
#services .service-card,
#services-list .service-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text) !important;
}
#services .service-card h3, #services-list .service-card h3 { color: var(--text) !important; }
#services .service-card p, #services-list .service-card p { color: var(--text-muted) !important; }
/* The home #services band is a solid navy .section-surface, so its header copy has to
   stay white - this id rule would otherwise outrank .section-surface .section-desc and
   drop 13px muted slate on navy (1.9:1). Cards inside the band are white, so their own
   rules above still get muted text. */
#services:not(.section-surface) .section-desc, #services-list .section-desc { color: var(--text-muted) !important; }
#services .service-num, #services-list .service-num { color: rgba(42, 117, 191, 0.30) !important; }
#services .service-feature, #services-list .service-feature { color: var(--text-muted) !important; }
#services-list .service-card-tag { color: var(--accent) !important; background: rgba(42,117,191,0.10) !important; }
/* Explore Solution: clean solid-blue pill — no tinted rectangle box on the services page.
   (later #services-list rules re-assert colors, so text color is re-asserted here with
   higher specificity to stay white on the solid fill; the home page's services section
   id is literally "services.html", hence the escaped #services\.html selectors) */
#services .service-card .service-link,
#services\.html .service-card .service-link,
#services-list .service-card .service-link,
#services .service-card .service-link .service-link-text,
#services\.html .service-card .service-link .service-link-text,
#services-list .service-card .service-link .service-link-text {
  color: #FFFFFF !important;
}
#services .service-card .service-link,
#services\.html .service-card .service-link,
#services-list .service-card .service-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  width: auto !important;
  align-self: flex-start !important;
  margin-top: auto !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--accent) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#services .service-card .service-link i,
#services\.html .service-card .service-link i,
#services-list .service-card .service-link .service-link-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  transition: transform 0.3s ease;
}
#services .service-card .service-link:hover,
#services\.html .service-card .service-link:hover,
#services-list .service-card .service-link:hover {
  background: var(--secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(17, 42, 79, 0.45);
}
#services .service-card .service-link:hover i,
#services\.html .service-card .service-link:hover i,
#services-list .service-card .service-link:hover .service-link-arrow {
  color: #FFFFFF !important;
  transform: translateX(3px);
}
.service-card-img { background: var(--surface-2) !important; }
.service-card-img .overlay { background: linear-gradient(to top, rgba(8,12,16,0.72) 0%, transparent 60%) !important; }

/* icon wells keep the blue tint, lifted for a light page */
.why-item .icon, .industry-icon, .tech-halo-icon, .about-card-icon,
.excellence-icon, .service-icon, .tree-avatar-wrap {
  background: rgba(42, 117, 191, 0.10) !important;
  color: var(--secondary) !important;
  border: 1px solid var(--border-accent);
}
.why-item:hover .icon, .industry-card:hover .industry-icon, .tech-capability-card:hover .tech-halo-icon {
  background: var(--secondary) !important; color: #FFFFFF !important; border-color: var(--secondary) !important;
}
.industry-badge-num { color: rgba(42, 117, 191, 0.45) !important; }
.industry-card-footer { color: var(--text-muted) !important; }
.industry-card-footer i { color: var(--secondary) !important; }

.why-item p, .industry-card p, .about-card-text, .excellence-item p,
.tree-member-desig, .qt-card p, .service-card p, .team-card p { color: var(--text-muted) !important; }
.tree-member-name, .tree-btn-connect { color: var(--text) !important; }
.tree-btn-connect { background: var(--secondary) !important; color: #FFFFFF !important; }
.tree-status-pulse { border-color: #FFFFFF !important; }

/* --------------------------------------------------------------------------
   3. The places a solid NAVY reads as a feature (secondary colour bands)
   -------------------------------------------------------------------------- */
.cta-section { background: linear-gradient(135deg, #112A4F 0%, #0D1F3C 100%) !important; }
.cta-section p, .cta-section span, .cta-section li,
.cta-section .section-desc, .cta-section .cta-sub { color: rgba(255,255,255,0.88) !important; }
.section-surface { background-color: var(--secondary) !important; color: #FFFFFF !important; }
.section-surface h1, .section-surface h2, .section-surface h3, .section-surface h4,
.section-surface h5, .section-surface h6, .section-surface p, .section-surface li,
.section-surface span, .section-surface a { color: #FFFFFF !important; }

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   4. Hero — VIDEO WALL (dark palette, self-contained)
   --------------------------------------------------------------------------
   The old white-side hero (copy panel, photo visual, diagonal rules,
   particle canvas, loops and overrides) is gone; the video-wall hero in
   assets/css/hero-wall.css replaces it and loads after this file.

   Only the circular social wheel — which the wall hero keeps untouched —
   still needs light-theme rules, and they follow. ---------------------- */
/* social wheel on the white side: navy ring + navy icons */
.nm-hero-1-social-border { border-color: rgba(17, 42, 79, 0.35) !important; }
.nm-hero-1-social-link .link-elm { color: #112A4F !important; }
.nm-hero-1-social-link .link-elm:hover { color: #2A75BF !important; }
.nm-hero-1-social-position::after { border-color: rgba(17, 42, 79, 0.28) !important; }

/* ---- the wheel needs to survive standing on the photo card ----------
   This wheel was laid out to sit in the empty dark band on the right.
   The hero redesign put the looping photo card in exactly that band, so
   three of the five icons (X, LinkedIn, Instagram) now land on the photo
   and navy-on-photo reads as nothing. Two fixes:

   1. pull the wheel fully inside the viewport - it was hung 20px past the
      right edge, which the hero's overflow:hidden was clipping.
   2. give every icon a white chip, so the navy glyph keeps its ~14:1
      contrast wherever it falls: on the white hero or on the photo.

   The white glow on hover was invisible against a white chip, so it is
   traded for a shadow that reads as the chip lifting. ------------------- */
.nm-hero-1-social-position { right: 20px; }

.nm-hero-1-social-link .link-elm {
  background: #FFFFFF;
  border: 1px solid rgba(17, 42, 79, 0.10);
  border-radius: 50%;
  box-shadow: 0 6px 16px -6px rgba(17, 42, 79, 0.35);
}
.nm-hero-1-social-link .link-elm:hover {
  text-shadow: none;
  box-shadow: 0 12px 24px -8px rgba(42, 117, 191, 0.55);
}

/* the crescent arc + ring keyframes paint #3a4b66; retinted above */

/* --------------------------------------------------------------------------
   4b. Floating navbar
   -------------------------------------------------------------------------- */
.qt-navbar {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}
.qt-navbar.scrolled { background-color: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 24px rgba(15,23,42,0.10); }
/* The white panel + border are for the MOBILE dropdown only; on desktop the
   collapse is an inline flex row and the border read as a stray rectangle
   box inside the pill navbar. */
@media (max-width: 991.98px) {
  .qt-navbar .navbar-container { flex-wrap: wrap; }
  .qt-navbar .navbar-collapse {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.99);
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  }
}
/* Very narrow screens (320px class): the bar is calc(100% - 48px) with 24px
   side padding, leaving only 198px of content, while the brand (173px) plus the
   44px toggler need 217px. The row wrapped, so the navbar grew from 66px to
   102px tall and the border-radius:9999px pill turned into a blob. Reclaim the
   side gutters and trim the brand slightly so both items stay on one row. */
@media (max-width: 380px) {
  .qt-navbar {
    width: calc(100% - 24px);
    padding: 8px 14px;
  }
  .qt-navbar .navbar-container { flex-wrap: nowrap; }
  .qt-navbar .navbar-brand { min-width: 0; }
  .qt-navbar .brand-icon-svg { width: 32px; height: 32px; }
  .qt-navbar .brand-text-block { font-size: 0.92rem; }
}
.qt-navbar .nav-link { color: var(--text) !important; }

/* The panel is position:static, and .navbar-container is a nowrap flex row, so
   opening the menu made the panel a third item competing for one line with the
   brand and the button. It pushed 29px past the viewport, and the navbar itself
   grew from 62px to 411px tall while still carrying border-radius:9999px, which
   turned the bar into a giant rounded blob with the logo sitting on top of it.
   Drop the panel out of the row and hang it under the bar instead: the navbar
   keeps its pill shape and the panel spans the navbar's own width. */
.qt-navbar .nav-link:hover, .qt-navbar .nav-link.active { color: var(--secondary) !important; }
.qt-navbar .brand-text-block, .brand-text-block .brand-name,
.brand-text-block .brand-tagline, .brand-text-block .brand-main,
.brand-text-block .brand-sub { color: var(--text) !important; }
.brand-icon-svg { filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.18)); }
.qt-navbar .navbar-brand:hover .brand-icon-svg { filter: drop-shadow(0 2px 6px rgba(42,117,191,0.35)); }

/* 10 of the 12 partner SVGs are light artwork built for a dark background, so
   they are given a dark navy pill here — the artwork is crisp on it with no
   filter tricks (the old double drop-shadow hack made everything look blurry). */
.partner-logo-item {
  background: linear-gradient(145deg, #163661 0%, #112A4F 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
  filter: none;
  border-radius: 14px;
}
.partner-logo-item img { filter: none; }
.partner-logo-item:hover {
  background: linear-gradient(145deg, #1D5CA0 0%, #163661 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  filter: none;
}

/* The hamburger bars are painted var(--text-white) in the base sheet, which is
   invisible on this now-white navbar. The control gets no permanent fill so it
   does not read as a grey smudge on the white bar; the bars get real ink, and
   the surface only appears on hover/active/focus. */
.qt-toggler {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 5px;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.qt-toggler span {
  width: 22px;
  height: 3px;
  background: var(--text) !important;
}
.qt-toggler:hover {
  background: rgba(42, 117, 191, 0.10) !important;
  border-color: rgba(42, 117, 191, 0.35) !important;
}
.qt-toggler:hover span { background: var(--secondary) !important; }
.qt-toggler.active {
  background: rgba(42, 117, 191, 0.12) !important;
  border-color: var(--accent) !important;
}
.qt-toggler.active span { background: var(--secondary) !important; }
/* bars are 3px tall with 5px gaps, so the first/last rows travel 8px to cross */
.qt-toggler.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.qt-toggler.active span:nth-child(2) { opacity: 0; }
.qt-toggler.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.qt-toggler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   5. Footer — solid NAVY (the secondary colour as a foundation band)
   -------------------------------------------------------------------------- */
.qt-footer {
  background: linear-gradient(180deg, #112A4F 0%, #0D1F3C 100%) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: none !important;
}
.qt-footer h1, .qt-footer h2, .qt-footer h3, .qt-footer h4, .qt-footer h5, .qt-footer h6 { color: #FFFFFF !important; }
.qt-footer p, .qt-footer a, .qt-footer li, .qt-footer span,
.footer-about, .footer-links a, .footer-contact-item,
.footer-bottom p, .footer-bottom a { color: rgba(255, 255, 255, 0.78) !important; }
.qt-footer a:hover, .footer-bottom a:hover { color: #FFFFFF !important; }
.footer-heading { color: #FFFFFF !important; }
.footer-brand .logo { color: #FFFFFF !important; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14) !important; }
.footer-social a { background: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.22) !important; }
.footer-social a:hover { background: #2A75BF !important; color: #FFFFFF !important; }
.footer-soc-icon, .qt-footer .soc-icon { color: #FFFFFF !important; }
.newsletter-input { background: #FFFFFF !important; color: #112A4F !important; border-color: transparent !important; }
.newsletter-input::placeholder { color: #64748B !important; }
.newsletter-btn { background: #2A75BF !important; color: #FFFFFF !important; }
.newsletter-card p, .newsletter-wrap p { color: rgba(255,255,255,0.85) !important; }

/* --------------------------------------------------------------------------
   6. Forms, badges, small type
   -------------------------------------------------------------------------- */
.qt-label { color: var(--text) !important; }
.qt-input, .qt-select, .qt-textarea {
  background: #FFFFFF !important; color: var(--text) !important; border-color: var(--border-light) !important;
}
.qt-input::placeholder, .qt-textarea::placeholder { color: var(--text-subtle) !important; }
.qt-select option { background: #FFFFFF; color: var(--text); }

.qt-badge.badge-accent, .badge-accent, .blog-category-badge,
.project-category, .blog-tag {
  background: rgba(42, 117, 191, 0.10) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border-accent) !important;
}
.qt-badge.badge-muted { background: var(--surface-2) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
.badge-pill { background: rgba(42,117,191,0.10) !important; color: var(--accent) !important; border-color: var(--border-accent) !important; }

/* #2A75BF on the #F1F5F9 pill/slate surfaces is only 4.36:1 - just under AA. The darker
   accent already used in the page-hero block clears it at 5.9:1. Dark bands keep their
   white eyebrows via the more specific .section-surface / .cta-section rules below. */
.eyebrow { color: #1A5FA8 !important; }
.section-title span, .section-title mark { color: var(--accent) !important; }
.section-desc { color: var(--text-muted) !important; }
.text-info, a.text-info { color: var(--accent) !important; }
.service-link { color: var(--accent) !important; }
.service-link:hover { color: var(--secondary) !important; }

.cookie-notice { background: #FFFFFF !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg); }
.cookie-notice p { color: var(--text-muted) !important; }
.cookie-notice .divider { background: var(--border) !important; }
.cookie-notice a { color: var(--accent) !important; }
.cookie-notice .btn-qt.btn-outline { color: var(--text) !important; border-color: var(--border-light) !important; background: #FFFFFF !important; }
.cookie-notice .btn-qt.btn-accent, .cookie-notice button.btn-accent { color: #FFFFFF !important; background: var(--secondary) !important; }

.btn-outline { color: var(--text) !important; border-color: var(--border-light) !important; }
.btn-outline:hover { color: var(--secondary) !important; border-color: var(--secondary) !important; background: rgba(42,117,191,0.06) !important; }
.btn-accent { color: #FFFFFF !important; }

.testimonial-text { color: var(--text) !important; }
.team-social a { color: var(--secondary) !important; }
.team-social a:hover { color: #FFFFFF !important; }
.tech-chip { background: rgba(42,117,191,0.08) !important; color: var(--text) !important; border-color: var(--border-accent) !important; }
.tech-capability-card:hover .tech-chip { background: rgba(42,117,191,0.16) !important; }
.tech-readiness .pulse-dot, .tree-status-pulse { background: #00A870 !important; }

::selection { background: rgba(42, 117, 191, 0.22); color: #0F172A; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ==========================================================================
   7. High-specificity repairs
   --------------------------------------------------------------------------
   The base sheet paints class-less headings white, and several components set
   their text inline with color:var(--text-white). Neither can be reached by a
   plain token flip, so these rules are deliberately specific and !important,
   and white is re-asserted afterwards for the dark/blue surfaces.
   ========================================================================== */

/* every heading, whatever its class, is dark on the light page */
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--text) !important; }

/* inline color:var(--text-white) that the base sheet bakes into the markup */
[style*="var(--text-white)"] { color: var(--text) !important; }

/* re-assert white on the surfaces that really are dark or blue */
body .cta-section h1, body .cta-section h2, body .cta-section h3, body .cta-section h4,
body .section-surface h1, body .section-surface h2, body .section-surface h3,
body .section-surface h4, body .section-surface h5, body .section-surface h6,
.cta-section [style*="var(--text-white)"],
.section-surface [style*="var(--text-white)"] { color: #FFFFFF !important; }

body .section-surface .section-title,
body .section-surface .section-title span,
body .section-surface .section-title mark { color: #FFFFFF !important; }

/* the white cards sitting inside the blue band keep dark text */
.section-surface .qt-card, .section-surface .service-card,
.section-surface .excellence-item, .section-surface .blog-card,
.section-surface .stat-card, .section-surface .tree-card,
.section-surface .industry-card, .section-surface .why-item,
.section-surface .team-card, .section-surface .tech-capability-card,
.section-surface .cert-strip-card { color: var(--text) !important; }
.section-surface .qt-card h3, .section-surface .qt-card h4,
.section-surface .service-card h3, .section-surface .service-card p,
.section-surface .excellence-item h3, .section-surface .blog-card h3,
.section-surface .stat-card .stat-value, .section-surface .stat-card .stat-label,
.section-surface .tree-member-name, .section-surface .tree-member-desig,
.section-surface .cert-strip-title, .section-surface .cert-strip-text,
.section-surface .industry-card h3, .section-surface .why-item h3,
.section-surface .team-card h3, .section-surface .tech-capability-card h3 { color: var(--text) !important; }
.section-surface .service-card p, .section-surface .industry-card p,
.section-surface .why-item p, .section-surface .cert-strip-text,
.section-surface .tree-member-desig, .section-surface .stat-label { color: var(--text-muted) !important; }
.section-surface .service-num, .section-surface .industry-badge-num { color: var(--accent) !important; }
.section-surface .service-link, .section-surface .service-link-text,
.section-surface .service-card-tag { color: var(--accent-dark) !important; }
.section-surface .eyebrow, .section-surface .section-desc { color: rgba(255,255,255,0.88) !important; }

/* the .section-surface p rule above also lands on copy inside the white cards,
   so the card bodies have to be re-asserted after it */
.section-surface .qt-card p, .section-surface .qt-card p *,
.section-surface .excellence-item p, .section-surface .excellence-item p *,
.section-surface .cert-strip-card p, .section-surface .stat-card p,
.section-surface .team-card p, .section-surface .blog-card p,
.section-surface .project-card p, .section-surface .tech-capability-card p { color: var(--text-muted) !important; }

/* ghost numerals: solid enough to read, still clearly decorative */
.service-num, .industry-badge-num { color: var(--accent) !important; }

/* a blue that clears 4.5:1 on the pale blue chips it sits in */
:root { --accent-dark: #1A5FA8; }
.service-card-tag, .service-link, .service-link-text,
.qt-badge.badge-accent, .badge-accent, .blog-category-badge,
.project-category, .badge-pill, .qt-breadcrumb .current { color: #1A5FA8 !important; }
.qt-breadcrumb .separator { color: var(--text-muted) !important; }

.tree-role-tag, .tree-role-tag.tech, .tree-role-tag.business,
.tree-role-tag.operations { color: var(--accent-dark) !important; }
.testimonial-avatar { color: var(--accent-dark) !important; }

/* project cards were never in the dark-to-light list */
.project-card, .project-card h2, .project-card h3, .project-card p,
.project-body p, .project-body h3, .project-meta .service-link { color: var(--text) !important; }
.project-card { background: #FFFFFF !important; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.project-body p { color: var(--text-muted) !important; }
.project-meta .service-link { color: var(--accent-dark) !important; }
.project-card .project-category { color: #1A5FA8 !important; background: rgba(42,117,191,0.10) !important; }

/* ==========================================================================
   8. Remaining component repairs
   ========================================================================== */

/* a readable red for the required-field asterisk on white */
:root { --danger: #DC2626; }
.qt-label *, .form-label * { color: var(--danger) !important; }

/* ghost numerals: solid accent clears 3:1 as large text on white */
#services .service-num, #services-list .service-num,
.service-num, .industry-badge-num { color: var(--accent) !important; }

/* navy footer corrections: inline styles + the heading repair paint dark ink
   that vanishes on the navy footer surface */
.qt-footer [style*="color:var(--text)"] { color: rgba(255, 255, 255, 0.85) !important; }

/* The brand mark used to be forced to solid white by a blanket
   `brightness(0) invert(1)` on every footer image, which flattened the
   three-colour logo (pink #F0397B, blue #3C7FC3, gold #FCC33E) into a
   black-and-white silhouette. The logo is the only image in the footer and
   every one of its colours clears the 3:1 non-text threshold on the navy
   surface (4.58, 4.12 and 10.68), so it now renders in true brand colour. */
.qt-footer img { opacity: 1; }

/* the blue contact strip sits directly above the navy footer; align it so the
   two bands read as one navy block with a hairline seam */
#contact-strip { background: #112A4F !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; }
#services-list .service-card .service-card-tag, .service-card-tag { color: #1A5FA8 !important; }

/* eyebrow on the navy page hero must be light to stay visible */
.page-hero .eyebrow { color: #9CC4E4 !important; }
.page-hero .qt-breadcrumb .current { color: rgba(255, 255, 255, 0.7) !important; }
.eyebrow.no-line { color: #1A5FA8 !important; }
/* ...but inside the solid blue band pure white is the only passing colour */
.section-surface .eyebrow, .section-surface .eyebrow.no-line,
.cta-section .eyebrow, .section-surface .section-desc,
.cta-section .section-desc { color: #FFFFFF !important; }

/* about info cards were still dark */
.about-info-card {
  background: #FFFFFF !important; border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important; color: var(--text) !important;
}
.about-info-card .about-card-title { color: var(--text) !important; }
.about-info-card .about-card-text { color: var(--text-muted) !important; }

/* legal pages use a Bootstrap .bg-dark card for the policy body */
.card.bg-dark, .legal-content, .legal-content * {
  background-color: transparent !important; color: var(--text) !important;
}
.card.bg-dark { background-color: #FFFFFF !important; border-color: var(--border) !important; }
.card.bg-dark .text-info, .legal-content .text-info { color: #1A5FA8 !important; }
.card.bg-dark p, .card.bg-dark span, .card.bg-dark li,
.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3 { color: var(--text) !important; }
.card.bg-dark p, .card.bg-dark li { color: var(--text-muted) !important; }

/* blue contact strip keeps white copy */
#contact-strip, #contact-strip * { color: #FFFFFF !important; }
#contact-strip p[style*="text-muted"], #contact-strip .text-muted { color: #FFFFFF !important; }
#contact-strip .btn-qt.btn-outline, #contact-strip .btn-outline {
  color: #FFFFFF !important; border-color: rgba(255,255,255,0.75) !important;
}
#contact-strip .btn-qt.btn-outline:hover { background: #FFFFFF !important; color: var(--secondary) !important; }

/* the 404 section is unclassed; make it a light panel */
/* --bg-subtle was never defined in any token block, so this resolved to
   nothing and the band fell back to the page surface. */
#not-found-section { background: var(--surface-2) !important; }

/* certification status chip inside the blue band */
.section-surface .cert-strip-status {
  color: #166534 !important; background: rgba(21, 128, 61, 0.10) !important;
}

/* newsletter block: white copy on the navy footer */
.newsletter-card, .newsletter-card p, .newsletter-wrap p {
  color: rgba(255,255,255,0.88) !important;
}
.newsletter-card p[style*="text-muted"], .newsletter-wrap p[style*="text-muted"] { color: rgba(255,255,255,0.75) !important; }

/* The blog sidebar CTA is a class-less card whose gradient is inline and mixes
   --secondary with --dark. --dark is a light token in this theme, so the band
   would fade to near-white under white text; pin it to a dark blue instead. */
div:has(> #sidebarNewsletter) {
  background: linear-gradient(135deg, #1D4E8F 0%, #12325C 100%) !important;
  border-color: rgba(42, 117, 191, 0.40) !important;
}
div:has(> #sidebarNewsletter),
div:has(> #sidebarNewsletter) p,
div:has(> #sidebarNewsletter) h5,
div:has(> #sidebarNewsletter) label { color: #FFFFFF !important; }
div:has(> #sidebarNewsletter) p[style*="text-muted"] { color: rgba(255,255,255,0.92) !important; }
div:has(> #sidebarNewsletter) .qt-input {
  background: rgba(255, 255, 255, 0.96) !important; color: var(--text) !important;
  border-color: transparent !important;
}

/* the stats band is a solid NAVY band — the secondary colour used as a
   feature strip; the white stat cards pop against it */
.stats-section {
  background: linear-gradient(135deg, #112A4F 0%, #0E2138 100%) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.stats-section::before {
  background: radial-gradient(circle at 50% 0%, rgba(84, 158, 235, 0.18), transparent 60%) !important;
}

/* outline buttons sitting on the solid blue bands need white copy */
.cta-section .btn-qt.btn-outline, .section-surface .btn-qt.btn-outline,
.cta-section .btn-outline, .section-surface .btn-outline {
  color: #FFFFFF !important; border-color: rgba(255,255,255,0.75) !important;
}
.cta-section .btn-qt.btn-outline:hover, .section-surface .btn-qt.btn-outline:hover,
.cta-section .btn-outline:hover, .section-surface .btn-outline:hover {
  background: #FFFFFF !important; color: var(--secondary) !important;
}
/* ==========================================================================
   9. White-primary / navy-secondary hierarchy + new components
   ========================================================================== */

/* -- 9a. solid navy bands used as section alternation --------------------
   The stats band + footer already went navy above; the CTA band keeps its
   navy gradient; page heroes get a soft slate wash for contrast against
   the white index sections. */
.page-hero {
  background: linear-gradient(180deg, #112A4F 0%, #0D1F3C 100%) !important;
  border-bottom: none;
}

/* -- 9b. section-title accent words: solid brand blue -------------------- */
.section-title span, .section-title mark { color: #1D5CA0 !important; }
.cta-section .cta-title,
.cta-section .section-title span { color: #FFFFFF !important; }

/* -- 9c. buttons on navy: white fill / blue fill ------------------------- */
.cta-section .btn-accent, .stats-section .btn-accent {
  background: #FFFFFF !important;
  color: #112A4F !important;
}
.cta-section .btn-accent:hover, .stats-section .btn-accent:hover {
  background: #E8F1FA !important;
  color: #112A4F !important;
  transform: translateY(-2px);
}
.cta-section .btn-qt.btn-accent:focus-visible,
.cta-section a:focus-visible { outline-color: #FFFFFF !important; }

/* -- 9d. navy stats: white values --------------------------------------- */
.stats-section .stat-card { border-color: rgba(255,255,255,0.14) !important; }
.stats-section .stat-number, .stats-section .stat-value { color: #FFFFFF !important; }
.stats-section .stat-icon { color: #8EC5FA !important; }
.stats-section .stat-label { color: rgba(255,255,255,0.75) !important; }
.stats-section .stat-card, .stats-section .cert-strip-card {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* -- 9e. partner strip + filter pills ----------------------------------- */
.filter-btn.active {
  background: #112A4F !important;
  border-color: #112A4F !important;
  color: #FFFFFF !important;
}
.filter-btn:hover { border-color: #112A4F !important; color: #112A4F !important; }

/* -- 9f. leadership: row-of-cards replacement for the org tree ----------- */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.lead-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-top: 3px solid #112A4F;
  border-radius: 14px;
  padding: 26px 18px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lead-card:hover {
  transform: translateY(-5px);
  border-color: rgba(42, 117, 191, 0.45);
  border-top-color: #2A75BF;
  box-shadow: var(--shadow-md);
}
.lead-avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(42, 117, 191, 0.10);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #112A4F;
}
.lead-card:hover .lead-avatar { background: #112A4F; color: #FFFFFF; }
.lead-role-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A5FA8;
  background: rgba(42, 117, 191, 0.10);
  border: 1px solid rgba(42, 117, 191, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.lead-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0F172A;
  margin: 0 0 4px;
  line-height: 1.35;
}
.lead-desig {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0;
  line-height: 1.4;
}
.lead-card-lead { border-top-color: #2A75BF; }
.lead-card-lead .lead-avatar { color: #2A75BF; }

@media (max-width: 767px) {
  .lead-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  .lead-card { padding: 20px 12px 18px; }
  .lead-avatar { width: 52px; height: 52px; font-size: 1.25rem; }
  .lead-name { font-size: 0.92rem; }
  .lead-desig { font-size: 0.72rem; }
  .lead-role-tag { font-size: 0.58rem; padding: 2px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-card:hover { transform: none; }
}

/* -- 9h. trust strip: bigger, visible label; hover no longer crops -------
   The partner pill hover lifts -3px and scales 1.03, but the wrap's
   overflow:hidden sits flush with the pills, so the top of the hovered
   pill was sliced off. Give the wrap vertical breathing room and let the
   strip itself clip; also raise the label's contrast and size. */
.trust-section { padding-top: 40px !important; padding-bottom: 34px !important; }
.trust-label-wrap { margin-bottom: 24px !important; gap: 20px !important; }
.trust-label {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
  padding: 11px 30px !important;
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #2A75BF 0%, #1D5CA0 100%) !important;
  color: #FFFFFF !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.trust-label:hover {
  background: linear-gradient(135deg, #3587D6 0%, #2568A8 100%) !important;
  box-shadow: none !important;
}
.trust-rule { width: 90px; }
.trust-label-icon { color: #FFD166; }

.marquee-wrap {
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: -14px;
  margin-bottom: -14px;
}
.partner-logo-item { transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
.partner-logo-item:hover { transform: translateY(-4px) scale(1.04); }

/* -- 9i. hero: keep only the two relevant, professional photos -----------
   The admin loop renders N photos; the index ships 4 (meeting/office, team,
   tech visual, founder portrait). Keep the two that read as "company at
   work" — the office meeting and the tech visual — and drop the rest by
   hiding their frames (the track math only cares about the frame count). */

/* -- 9j. services header CTA: solid brand blue with white text ----------- */
#services.html .btn-outline,
#services\.html .btn-outline {
  background: #2A75BF !important;
  border-color: #2A75BF !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(42, 117, 191, 0.30);
}
#services.html .btn-outline:hover,
#services\.html .btn-outline:hover {
  background: #1D5CA0 !important;
  border-color: #1D5CA0 !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(42, 117, 191, 0.40);
}

/* =============================================================================
   10. CARD FRAME — 2px brand-blue border on every card
   One accent frame so all cards read as a family. It is placed last in this
   file and marked !important so it wins over the 1px/3px borders the base sheet
   and the per-card rules above still carry. Global border-box means the thicker
   frame grows inward, so grid tracks never shift. The hero --3 accent bar is
   deliberately excluded: at 26%x12% a 2px frame only makes a decorative bar
   look heavier, and it is not a content card.
   ========================================================================== */
.qt-card,
.blog-card,
.service-card,
.excellence-item,
.why-item,
.industry-card,
.team-card,
.tech-capability-card,
.tree-card,
.cert-strip-card,
.stat-card,
.project-card,
.testimonial-card,
.about-info-card,
.contact-info-item,
.lead-card,
.cert-pillar-card,
.cert-process-card,
.cert-standard-card {
  border: 2px solid #2A75BF !important;
}

/* A few card borders elsewhere are already !important AND outrank a single
   class selector: #services .service-card (style.css, dark 1px) and
   .stats-section .stat-card (a white 0.14 border). Repeat the frame at that
   specificity so the brand blue actually lands on them too. Same specificity +
   !important, and this file loads after style.css, so these win. */
#services .service-card,
#services-list .service-card,
#services.html .service-card,
#services\.html .service-card,
.stats-section .stat-card,
.section-surface .qt-card,
.section-surface .service-card,
.section-surface .excellence-item,
.section-surface .blog-card,
.section-surface .stat-card,
.section-surface .tree-card,
.section-surface .industry-card,
.section-surface .why-item,
.section-surface .team-card,
.section-surface .tech-capability-card,
.section-surface .cert-strip-card,
.section-surface .project-card,
.section-surface .testimonial-card {
  border: 2px solid #2A75BF !important;
}