/* ==========================================================================
   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 */
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4,
.hero-section h5, .hero-section h6,
.nm-hero-section h1, .nm-hero-section h2, .nm-hero-section h3,
.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,
.nm-hero-plybtn, .nm-hero-plybtn .plybtn-text, .nm-hero-plybtn .plybtn-icon,
.nm-hero-sub-title, .nm-hero-desc, .nm-hero-award-tag,
.nm-hero-agency-btn, .nm-hero-1-social-row-links a { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   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) */
.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: var(--gradient-hero) !important; }
.page-hero h1, .page-hero h2, .page-hero .page-hero-desc { color: var(--text) !important; }
.page-hero .section-desc { color: var(--text-muted) !important; }
.qt-breadcrumb, .qt-breadcrumb a { color: var(--text-muted) !important; }
.qt-breadcrumb .separator, .qt-breadcrumb .current { color: var(--text-subtle) !important; }
.qt-breadcrumb a:hover, .qt-breadcrumb .current { color: var(--secondary) !important; }

.trust-section { background: linear-gradient(180deg, #EFF6FF 0%, #F8FAFC 50%, #EFF6FF 100%); }
.trust-section::before { background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%); }
.trust-section::after  { background: linear-gradient(to left,  #FFFFFF 0%, rgba(255,255,255,0) 100%); }

/* 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.875rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  background: #2A75BF !important;
  border: 1px solid #1D5CA0 !important;
  padding: 8px 22px !important;
  box-shadow: 0 2px 8px rgba(42, 117, 191, 0.28);
}
.trust-label:hover { background: #1D5CA0 !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; }
.nm-hero-agency-btn:hover .nm-agency-icon { background: var(--accent-dark) !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 — clean WHITE right side, professional card presentation
   --------------------------------------------------------------------------
   The user wants the hero images' background WHITE with professional
   colouring. The full-bleed photo wash + dark scrim is replaced by:
   - a white hero surface with a very soft navy wash on the far left;
   - ONE large photo card floating on the white side (no edge-to-edge
     background loop, no logo texture — those looked broken: the portrait
     photos cropped harshly top/bottom at full-bleed, and the inverted
     logo texture showed as smudged grey marks);
   - two soft accent cards and one glass "24/7" badge for depth;
   - the copy panel stays a solid NAVY panel (secondary colour) so the
     white headline type keeps maximum contrast. */
.hero-section,
.hero-section.hero-media-active {
  background:
    radial-gradient(ellipse 42% 55% at 86% 30%, rgba(42, 117, 191, 0.07), transparent 70%),
    linear-gradient(160deg, #FFFFFF 0%, #F6F9FD 60%, #EAF1F9 100%) !important;
}

/* faint navy edge wash on the left so the navy panel and white surface
   blend instead of colliding; nothing else sits over the white side */
.hero-section::before,
.hero-section.hero-media-active::before {
  background:
    linear-gradient(90deg,
      rgba(17, 42, 79, 0.06) 0%,
      rgba(17, 42, 79, 0.025) 30%,
      rgba(17, 42, 79, 0) 55%) !important;
}

/* the old texture/scrim/slideshow layers are removed entirely */
.hero-section::after,
.hero-bg-texture,
.hero-bg-slideshow,
.hero-loop-bg,
.hero-loop-track,
.hero-loop-item {
  display: none !important;
}

/* ---- the new right-side visual: one large photo card + accents ---- */
.hero-visual {
  position: absolute;
  top: 50%;
  right: clamp(20px, 6vw, 96px);
  transform: translateY(-50%);
  width: min(46vw, 560px);
  aspect-ratio: 0.86;
  z-index: 2;
  pointer-events: none;
}

/* main photo: object-fit cover inside its own rounded frame, so the
   picture NEVER bleeds to the hero edge and the crop is controlled */
.hero-visual-main {
  position: absolute;
  inset: clamp(14px, 1.8vw, 26px) 0 0 clamp(14px, 1.8vw, 26px);
  background-size: cover;
  background-position: center 38%;
  border-radius: 26px;
  border: 1px solid rgba(17, 42, 79, 0.12);
  box-shadow:
    0 40px 80px -36px rgba(17, 42, 79, 0.45),
    0 12px 28px -14px rgba(17, 42, 79, 0.25);
}

/* soft accent cards behind/around the photo for depth */
.hero-visual-card {
  position: absolute;
  border-radius: 20px;
}
.hero-visual-card--1 {
  /* small secondary photo, tucked at the bottom-left of the main frame */
  left: 0;
  bottom: 6%;
  width: 38%;
  aspect-ratio: 1.1;
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 22px 44px -20px rgba(17, 42, 79, 0.45);
}
.hero-visual-card--2 {
  /* navy echo card peeking behind the top-right corner */
  top: -6%;
  right: -4%;
  width: 34%;
  aspect-ratio: 1;
  background: linear-gradient(150deg, #1B3A66 0%, #112A4F 70%);
  box-shadow: 0 26px 48px -26px rgba(17, 42, 79, 0.55);
  z-index: -1;
}
.hero-visual-card--3 {
  /* slim blue accent bar along the bottom-right, ties in the brand blue */
  right: -3%;
  bottom: -5%;
  width: 26%;
  height: 12%;
  background: linear-gradient(135deg, #2A75BF 0%, #1A5FA8 100%);
  border-radius: 14px;
  box-shadow: 0 20px 38px -20px rgba(42, 117, 191, 0.55);
  z-index: 1;
}

/* floating glass badge over the photo's bottom-left */
.hero-visual-badge {
  position: absolute;
  left: 4%;
  bottom: -4%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(17, 42, 79, 0.10);
  box-shadow: 0 18px 38px -18px rgba(17, 42, 79, 0.45);
  z-index: 2;
}
.hero-visual-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(42, 117, 191, 0.12);
  color: #2A75BF;
  font-size: 1rem;
  flex-shrink: 0;
}
.hero-visual-badge-text {
  font-size: 0.86rem;
  color: #112A4F;
  line-height: 1.3;
}
.hero-visual-badge-text strong { color: #2A75BF; }

        /* ---- hero photo loop ------------------------------------------
           The right-side visual crossfades its two photos. Each frame is a
           stacked layer running the same cycle; the second sits half a cycle
           behind, so the main card and the small inset card always show
           DIFFERENT photos rather than the same one twice. The inset card
           lists its frames in the opposite order to make that swap read as
           deliberate. Retune with --qt-hero-loop on .hero-visual. --------- */
        @keyframes qtHeroFrameCycle {
          0%   { opacity: 1; }
          46%  { opacity: 1; }
          50%  { opacity: 0; }
          96%  { opacity: 0; }
          100% { opacity: 1; }
        }

        .hero-visual { --qt-hero-loop: 16s; }

        /* clip the crossfading layers to each card's rounded frame */
        .hero-visual-main,
        .hero-visual-card--1 { overflow: hidden; }

        .hero-visual-frame {
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center 38%;
          opacity: 0;
          animation: qtHeroFrameCycle var(--qt-hero-loop) ease-in-out infinite;
        }
        .hero-visual-frame:nth-child(2) {
          animation-delay: calc(var(--qt-hero-loop) / -2);
        }
        /* the square-ish inset card crops from a different focal point */
        .hero-visual-card--1 .hero-visual-frame { background-position: center; }

        @media (prefers-reduced-motion: reduce) {
          .hero-visual-frame { animation: none; }
          .hero-visual-frame:first-child { opacity: 1; }
        }

/* mid-wide screens: keep the visual clear of the navy panel column */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hero-visual { width: min(38vw, 520px); }
}

/* responsive: below 1200px the copy panel is full-width, so the visual
   hides with it (it would overlap the navy panel); on large screens it
   sits clear of the panel column */
@media (max-width: 1199.98px) {
  .hero-visual { display: none; }
}

/* interactive particles: soft navy on white */
.hero-interactive-canvas { opacity: 0.5; }

/* copy panel: solid NAVY (secondary) angled panel, white type */
.nm-hero-panel--copy {
  background: linear-gradient(158deg, #16345E 0%, #112A4F 55%, #0D213E 100%) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 30px 60px -30px rgba(17, 42, 79, 0.55);
}
.nm-hero-panel--copy .nm-hero-panel-edge {
  background: linear-gradient(180deg,
    rgba(84, 158, 235, 0) 0%,
    rgba(84, 158, 235, 0.9) 30%,
    rgba(255, 255, 255, 0.95) 60%,
    rgba(84, 158, 235, 0) 100%) !important;
  box-shadow: 0 0 18px rgba(84, 158, 235, 0.5) !important;
}
.nm-hero-diag-line {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(17, 42, 79, 0.40) 28%,
    rgba(17, 42, 79, 0.16) 62%,
    transparent 100%) !important;
}
.nm-hero-diag-line--2 { opacity: 0.5; }

/* award chip: crisp white glass on navy */
.nm-hero-award-tag {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: none !important;
}

/* outline CTA button on the navy panel */
.nm-hero-agency-btn {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #112A4F !important;
  box-shadow: 0 10px 26px -10px rgba(255, 255, 255, 0.45) !important;
}
.nm-hero-agency-btn .nm-agency-icon {
  background: #112A4F !important;
  color: #FFFFFF !important;
}
.nm-hero-agency-btn:hover {
  background: #E8F1FA !important;
  transform: translateY(-2px);
}

/* Watch Intro ghost button on navy */
.nm-hero-plybtn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #FFFFFF !important;
}
.nm-hero-plybtn:hover { background: rgba(255, 255, 255, 0.16) !important; }

/* follow-us row on navy */
.nm-hero-1-social-row-label { color: rgba(255, 255, 255, 0.75) !important; }
.nm-hero-1-social-row-links a { color: #FFFFFF !important; }

/* 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 */

/* --------------------------------------------------------------------------
   4a-2. Promo hero (copy panel + photo visual on a full navy band)
   The intro video is gone; the band stays navy with the angled glass copy
   panel on the left, the looping photo visual on the right, and the classic
   diagonal accent lines + particle canvas + social wheel intact.
   -------------------------------------------------------------------------- */
.nm-hero-promo.hero-section,
.nm-hero-promo.hero-section.hero-media-active {
  background:
    radial-gradient(ellipse 46% 60% at 50% 16%, rgba(42, 117, 191, 0.28), transparent 72%),
    linear-gradient(160deg, #16345E 0%, #112A4F 55%, #0D213E 100%) !important;
}
.nm-hero-promo.hero-section::before,
.nm-hero-promo.hero-section.hero-media-active::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%) !important;
}
/* the right rail stays: it clears the standalone social wheel so the
   copy panel and photo visual never sit underneath the wheel */
.nm-hero-promo .nm-hero-stage { padding-right: clamp(112px, 9vw, 168px) !important; }
.nm-hero-promo .hero-interactive-canvas {
  opacity: 0.55;
  filter: brightness(3) saturate(1.2);
}
.nm-hero-promo .nm-hero-diag-line {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 28%,
    rgba(255, 255, 255, 0.14) 62%,
    transparent 100%) !important;
}
.nm-hero-promo .nm-hero-diag-line--2 { opacity: 0.5; }

/* copy + visual: promo keeps a two-column layout. On large screens the
   copy panel sits left on its angled glass panel, the photo visual right,
   and the social wheel keeps its own rail on the band edge. */
.nm-hero-promo .nm-hero-col--copy {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
@media (min-width: 1200px) {
  .nm-hero-promo .nm-hero-col--copy { flex: 0 0 57% !important; max-width: 57% !important; }
}

.nm-hero-promo .nm-hero-panel--copy {
  max-width: 700px;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
  background:
    linear-gradient(158deg,
      rgba(13, 28, 54, 0.84) 0%,
      rgba(9, 18, 36, 0.62) 46%,
      rgba(7, 14, 28, 0.48) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--nm-dx)) 100%, 0 100%);
  box-shadow: 0 32px 74px -40px rgba(2, 8, 20, 0.75);
}
.nm-hero-promo .nm-hero-panel--copy .nm-hero-panel-edge { display: block; }
.nm-hero-promo .nm-hero-panel--copy .nm-hero-desc { max-width: 52ch; }

/* right photo visual (desktop only — hidden below 1200px where the copy
   panel turns full width). The inner accent cards keep their absolute
   geometry; only the container becomes in-flow inside the column. */
.nm-hero-promo .nm-hero-1-visual-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: clamp(16px, 2vw, 36px);
}
.nm-hero-promo .hero-visual {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  pointer-events: none;
}

/* promo band keeps the wheel on the right; phones/tablets below the base
   breakpoint keep the horizontal row instead */
.nm-hero-promo .nm-hero-1-social-position { display: block !important; }

@media (max-width: 1199.98px) {
  .nm-hero-promo .nm-hero-panel--copy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  /* base styles drop the wheel below 1200px; this promo restore re-shows
     it, so hide it again here to match (row takes over on phones) */
  .nm-hero-promo .nm-hero-1-social-position { display: none !important; }
  .nm-hero-promo .nm-hero-panel--copy .nm-hero-award-tag,
  .nm-hero-promo .nm-hero-panel--copy .nm-hero-desc,
  .nm-hero-promo .nm-hero-panel--copy .nm-hero-1-social-row { margin-left: auto; margin-right: auto; }
  .nm-hero-promo .nm-hero-panel--copy .nm-hero-cta-row { justify-content: center; }
  .nm-hero-promo .nm-hero-panel--copy .nm-hero-1-social-row { justify-content: center; }
}

/* on large screens the circular wheel replaces the horizontal row */
@media (min-width: 1200px) {
  .nm-hero-promo .nm-hero-panel--copy .nm-hero-1-social-row { display: none !important; }
}
.nm-hero-promo .nm-hero-1-social-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 197, 255, 0.16);
  text-align: center;
}
.nm-hero-promo .nm-hero-1-social-row-label {
  flex: 0 0 auto;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(219, 234, 254, 0.72);
}
.nm-hero-promo .nm-hero-1-social-row-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nm-hero-promo .nm-hero-1-social-row-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 17px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(125, 211, 252, 0.34);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.nm-hero-promo .nm-hero-1-social-row-links a:hover,
.nm-hero-promo .nm-hero-1-social-row-links a:focus-visible {
  background: rgba(125, 211, 252, 0.2);
  border-color: rgba(125, 211, 252, 0.75);
}
/* the circular wheel chips are white with navy glyphs (see 4b-1 above),
   so the brand-white glyph override from the centered band no longer
   applies — keep the base white-chip treatment on the promo band too */
.nm-hero-promo .nm-hero-panel--copy .nm-hero-1-social-row { justify-content: center; }

/* --------------------------------------------------------------------------
   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);
  }
}
.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 disappear on a white pill. Wrap each in a soft slate pill and use
   drop-shadow (which follows the SVG silhouette) to darken the artwork itself
   — brightness/invert would flatten the multi-colour marks. */
.partner-logo-item {
  background: #F1F5F9;
  border: 1px solid rgba(17, 42, 79, 0.14);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.partner-logo-item img { filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.55)) drop-shadow(0 0 1px rgba(15, 23, 42, 0.55)); }
.partner-logo-item:hover {
  background: #FFFFFF;
  border-color: rgba(17, 42, 79, 0.35);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}

/* 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 .hero-section h1, body .hero-section h2, body .hero-section h3,
body .hero-section h4, body .hero-section h5, body .hero-section h6,
body .nm-hero-section h1, body .nm-hero-section h2, body .nm-hero-section h3,
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,
.hero-section [style*="var(--text-white)"],
.nm-hero-section [style*="var(--text-white)"],
.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 pale page hero needs the darker blue */
.page-hero .eyebrow, .page-hero .qt-breadcrumb .current,
.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 */
#not-found-section { background: var(--bg-subtle) !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(135deg, #E8F1FA 0%, #F5F9FD 55%, #EDF4FB 100%) !important;
  border-bottom: 1px solid var(--border);
}

/* -- 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: 34px !important; padding-bottom: 26px !important; }
.trust-label-wrap { margin-bottom: 30px !important; }
.trust-label {
  font-size: 0.95rem !important;
  letter-spacing: 0.14em !important;
  padding: 10px 26px !important;
  border: 1px solid rgba(17, 42, 79, 0.35) !important;
  box-shadow: 0 4px 14px rgba(17, 42, 79, 0.18) !important;
  background: #112A4F !important;
  color: #FFFFFF !important;
}
.trust-label:hover { background: #1D5CA0 !important; }

.marquee-wrap {
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: -14px;
  margin-bottom: -14px;
}
.partner-logo-item:hover { transform: translateY(-3px) scale(1.03); }

/* -- 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). */
.hero-loop-item { filter: saturate(0.92) contrast(1.04) brightness(1.02); }

/* -- 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,
.hero-visual-card--1,
.hero-visual-card--2 {
  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;
}