/* nav-design-fixes.css — apply the HOMEPAGE design to the navbar category pages.
   Only linked to those pages (never the homepage), so plain selectors are safe and also
   reach the custom -v2 pages that have no #wrap. Reversible: remove the <link>.
   Homepage references:
     card  = .nh-card--teal : bg linear-gradient(270deg,#0091CC,#01A5E7,#00B3FB); border 1.6px #29C2FF;
             black text; hover = cyan glow + WHITE border (no red, no lift).
     faq   = .nh-acc__item  : #05052B card + gradient border #192A42->#1F73FF->#192A42; white 600 Q; chevron.
     btn   = .nh-btn--cyan  : #00b3fb pill, 999px radius, black text.
   The `:not(#zz):not(#zz)` prefix adds ID-weight so these beat the pages' own !important rules. */

/* ============ T2 / T7 / T8 : every content button -> homepage cyan pill (black text) ============ */
html body:not(#zz):not(#zz) .btn,
html body:not(#zz):not(#zz) a.btn,
html body:not(#zz):not(#zz) .btn-primary,
html body:not(#zz):not(#zz) .btn-secondary,
html body:not(#zz):not(#zz) .btn-fill-primary,
html body:not(#zz):not(#zz) .btn-fill-custom,
html body:not(#zz):not(#zz) .btn-outline-primary,
html body:not(#zz):not(#zz) .btn-custom,
html body:not(#zz):not(#zz) .btn-ui-1,
html body:not(#zz):not(#zz) .btn-lg,
html body:not(#zz):not(#zz) .btn-sm,
html body:not(#zz):not(#zz) .btn-link {
  background:#00b3fb !important; background-image:none !important;
  color:#010202 !important; -webkit-text-fill-color:#010202 !important;
  border:0 !important; border-radius:999px !important;
  padding:13px 26px !important; font-weight:600 !important; line-height:1.2 !important;
  box-shadow:0 8px 24px rgba(0,179,251,.28) !important; text-decoration:none !important;
}
html body:not(#zz):not(#zz) .btn:hover,
html body:not(#zz):not(#zz) a.btn:hover,
html body:not(#zz):not(#zz) .btn-fill-custom:hover,
html body:not(#zz):not(#zz) .btn-primary:hover,
html body:not(#zz):not(#zz) .btn-outline-primary:hover {
  background:#27c2ff !important; color:#010202 !important; transform:translateY(-2px) !important;
  box-shadow:0 14px 32px rgba(0,179,251,.4) !important;
}
html body:not(#zz):not(#zz) .btn span, html body:not(#zz):not(#zz) .btn font,
html body:not(#zz):not(#zz) a.btn span, html body:not(#zz):not(#zz) a.btn font,
html body:not(#zz):not(#zz) .btn-fill-custom span, html body:not(#zz):not(#zz) .btn-fill-custom font {
  color:#010202 !important; -webkit-text-fill-color:#010202 !important;
}
/* the industry-card quarter-circle control is icon-only, not a pill */
html body:not(#zz):not(#zz) .quarter_circle_btn { padding:0 !important; border-radius:100% 0 0 0 !important;
  box-shadow:none !important; background:transparent !important; }

/* ============ T4 / T6 : every card -> homepage 'Software Engineering Services' cyan card ======== */
html body:not(#zz):not(#zz) .my-card,
html body:not(#zz):not(#zz) .industry_block,
html body:not(#zz):not(#zz) .s_card,
html body:not(#zz):not(#zz) .qss-card-hover-ui,
html body:not(#zz):not(#zz) .qss-card-ui,
html body:not(#zz):not(#zz) .card-item,
html body:not(#zz):not(#zz) .info-card,
html body:not(#zz):not(#zz) .feature-card,
html body:not(#zz):not(#zz) .service-card,
html body:not(#zz):not(#zz) .capability-card,
html body:not(#zz):not(#zz) .roadmap-card,
html body:not(#zz):not(#zz) .highlighted {
  border:1.6px solid #29C2FF !important;
  border-radius:12px !important;
  background:linear-gradient(270deg,#0091CC 0%,#01A5E7 43.75%,#00B3FB 100%) !important;
  background-image:linear-gradient(270deg,#0091CC 0%,#01A5E7 43.75%,#00B3FB 100%) !important;
  box-shadow:none !important;
  transition:box-shadow .25s,border-color .25s !important;
}
/* HOVER = cyan glow + WHITE border. Kills the red hover gradient entirely. */
html body:not(#zz):not(#zz) .my-card:hover,
html body:not(#zz):not(#zz) .industry_block:hover,
html body:not(#zz):not(#zz) .s_card:hover,
html body:not(#zz):not(#zz) .qss-card-hover-ui:hover,
html body:not(#zz):not(#zz) .card-item:hover,
html body:not(#zz):not(#zz) .info-card:hover,
html body:not(#zz):not(#zz) .feature-card:hover,
html body:not(#zz):not(#zz) .service-card:hover,
html body:not(#zz):not(#zz) .capability-card:hover,
html body:not(#zz):not(#zz) .roadmap-card:hover,
html body:not(#zz):not(#zz) .highlighted:hover {
  background:linear-gradient(270deg,#0091CC 0%,#01A5E7 43.75%,#00B3FB 100%) !important;
  background-image:linear-gradient(270deg,#0091CC 0%,#01A5E7 43.75%,#00B3FB 100%) !important;
  box-shadow:0 18px 40px rgba(41,194,255,.32) !important;
  border-color:#ffffff !important;
  transform:none !important;
  color:#011f24 !important;
}
/* text -> BLACK on the cyan cards (default + hover) — every card type, every text node,
   including the muted .card-text descriptions and inline red links inside them */
html body:not(#zz):not(#zz) .my-card, html body:not(#zz):not(#zz) .my-card *,
html body:not(#zz):not(#zz) .industry_block, html body:not(#zz):not(#zz) .industry_block *,
html body:not(#zz):not(#zz) .s_card, html body:not(#zz):not(#zz) .s_card *,
html body:not(#zz):not(#zz) .qss-card-hover-ui, html body:not(#zz):not(#zz) .qss-card-hover-ui *,
html body:not(#zz):not(#zz) .qss-card-ui, html body:not(#zz):not(#zz) .qss-card-ui *,
html body:not(#zz):not(#zz) .card-item, html body:not(#zz):not(#zz) .card-item *,
html body:not(#zz):not(#zz) .info-card, html body:not(#zz):not(#zz) .info-card *,
html body:not(#zz):not(#zz) .feature-card, html body:not(#zz):not(#zz) .feature-card *,
html body:not(#zz):not(#zz) .highlighted, html body:not(#zz):not(#zz) .highlighted *,
html body:not(#zz):not(#zz) .service-card, html body:not(#zz):not(#zz) .service-card *,
html body:not(#zz):not(#zz) .capability-card, html body:not(#zz):not(#zz) .capability-card *,
html body:not(#zz):not(#zz) .roadmap-card, html body:not(#zz):not(#zz) .roadmap-card *,
html body:not(#zz):not(#zz) .s_card .card-body, html body:not(#zz):not(#zz) .s_card .card-body *,
html body:not(#zz):not(#zz) .s_card .card-text, html body:not(#zz):not(#zz) .s_card .card-text *,
html body:not(#zz):not(#zz) .my-card .card-text, html body:not(#zz):not(#zz) .my-card .card-text * {
  color:#010202 !important; -webkit-text-fill-color:#010202 !important; opacity:1 !important;
}
/* SMART contrast: any card that is NOT one of the cyan card types (e.g. the dark/transparent
   "engagement models" .card cards) keeps LIGHT text so it stays visible on the dark background. */
html body:not(#zz):not(#zz) .card:not(.s_card):not(.my-card) .card-text,
html body:not(#zz):not(#zz) .card:not(.s_card):not(.my-card) .card-text *,
html body:not(#zz):not(#zz) .card:not(.s_card):not(.my-card) .card-body,
html body:not(#zz):not(#zz) .card:not(.s_card):not(.my-card) .card-body *,
html body:not(#zz):not(#zz) .card:not(.s_card):not(.my-card) li,
html body:not(#zz):not(#zz) .card:not(.s_card):not(.my-card) p {
  color:#e7ecf6 !important; -webkit-text-fill-color:#e7ecf6 !important;
}
/* T3 : icons must always be visible.
   DEFAULT: white (invert) so the black line-art SVG icons show on the dark sections
   (they were blending into the dark bg). Inside light/cyan cards -> dark (un-invert). */
html body:not(#zz):not(#zz) .s_features_icon {
  filter:brightness(0) invert(1) !important; opacity:1 !important; visibility:visible !important;
}
html body:not(#zz):not(#zz) .my-card img, html body:not(#zz):not(#zz) .my-card svg,
html body:not(#zz):not(#zz) .my-card .s_features_icon,
html body:not(#zz):not(#zz) .s_card img, html body:not(#zz):not(#zz) .s_card svg,
html body:not(#zz):not(#zz) .s_card .s_features_icon,
html body:not(#zz):not(#zz) .qss-card-hover-ui .s_features_icon,
html body:not(#zz):not(#zz) .qss-card-ui img, html body:not(#zz):not(#zz) .qss-card-ui .s_features_icon,
html body:not(#zz):not(#zz) .industry_block:not(.highlighted) img,
html body:not(#zz):not(#zz) .industry_block:not(.highlighted) svg,
html body:not(#zz):not(#zz) .industry_block:not(.highlighted) .s_features_icon {
  filter:none !important; opacity:1 !important; visibility:visible !important;
}
/* the 'highlighted' card is now a cyan card (not red). Its icon SVG is WHITE (designed for the old
   red card), so filter:none would leave it white — the odd one out (last card in the grid). Force
   it BLACK with brightness(0) so it matches the black line-art icons of the other cards. */
html body:not(#zz):not(#zz) .highlighted img, html body:not(#zz):not(#zz) .highlighted .s_features_icon {
  filter:brightness(0) !important; opacity:1 !important; visibility:visible !important;
}
/* External-link LOGO images (press/media/partner logos, e.g. "QSS in the Media Spotlight"): these
   are opaque REAL raster logos (openPR, Mirror Review, IssueWire...) wrapped in <a target="_blank">,
   not black line-art SVGs. The .s_features_icon whitening above (brightness(0) invert(1)) turns the
   white-background ones into solid white blocks. Show them as-is on a white chip. Specificity
   (2 id-units + attr + class + 4 elements = 2,2,4) beats the whitening rule (2,1,2). */
html body:not(#zz):not(#zz) a[target="_blank"] img.s_features_icon {
  filter:none !important; opacity:1 !important; visibility:visible !important;
  background:#fff !important; padding:10px !important; border-radius:10px !important; object-fit:contain !important;
}
/* show hover-hidden card content by default */
html body:not(#zz):not(#zz) .my-card .icon-heading-wrapper { height:auto !important; transform:none !important; }
html body:not(#zz):not(#zz) .my-card .back-content { opacity:1 !important; transform:none !important; height:auto !important; }
html body:not(#zz):not(#zz) .qss-card-hover-ui .card-body { opacity:1 !important; }
/* T4/T6 : remove the decorative 'Q'/quarter-circle shapes */
html body:not(#zz):not(#zz) .industry_block::before { display:none !important; }
html body:not(#zz):not(#zz) .highlighted:before { background:transparent !important; }

/* ============ T5 (+ FAQ everywhere) : all FAQ accordions -> homepage FAQ card ================= */
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion,
html body:not(#zz):not(#zz) .s_accordion .accordion,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion,
html body:not(#zz):not(#zz) .s_accordion_image .accordion { background:transparent !important; border:0 !important; }
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-item,
html body:not(#zz):not(#zz) .s_accordion .accordion-item,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-item,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-item {
  border:1px solid transparent !important; border-radius:12px !important;
  margin-bottom:16px !important; overflow:hidden !important; box-shadow:none !important;
  background:
    linear-gradient(0deg,rgba(176,176,176,.1),rgba(176,176,176,.1)) padding-box,
    linear-gradient(0deg,#05052B,#05052B) padding-box,
    linear-gradient(90deg,#192A42 0%,#1F73FF 50%,#192A42 100%) border-box !important;
}
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-button,
html body:not(#zz):not(#zz) .s_accordion .accordion-button,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-button,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-button {
  background:transparent !important; box-shadow:none !important; border:0 !important;
  padding:20px 24px !important; gap:24px !important; color:#fff !important;
  font-weight:600 !important; align-items:center !important; justify-content:space-between !important;
}
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-button *,
html body:not(#zz):not(#zz) .s_accordion .accordion-button *,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-button *,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-button * {
  color:#fff !important; -webkit-text-fill-color:#fff !important; font-weight:600 !important; margin:0 !important;
}
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-button::after,
html body:not(#zz):not(#zz) .s_accordion .accordion-button::after,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-button::after,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-button::after {
  content:"" !important; flex:none !important; width:12px !important; height:12px !important; min-width:12px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain !important;
  border:0 !important; margin:0 !important; padding:0 !important; color:transparent !important; font-size:0 !important;
  transform:none !important; transition:transform .3s ease !important;
}
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-button:not(.collapsed)::after,
html body:not(#zz):not(#zz) .s_accordion .accordion-button:not(.collapsed)::after,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-button:not(.collapsed)::after,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-button:not(.collapsed)::after { transform:rotate(180deg) !important; }
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-collapse,
html body:not(#zz):not(#zz) .s_accordion .accordion-collapse,
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-body,
html body:not(#zz):not(#zz) .s_accordion .accordion-body,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-body,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-body { background:transparent !important; padding:0 24px 22px !important; }
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-body,
html body:not(#zz):not(#zz) .s_faq_horizontal .accordion-body *,
html body:not(#zz):not(#zz) .s_accordion .accordion-body,
html body:not(#zz):not(#zz) .s_accordion .accordion-body *,
html body:not(#zz):not(#zz) .s_faq_collapse .accordion-body *,
html body:not(#zz):not(#zz) .s_accordion_image .accordion-body * {
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* ============ T5 : the numbered s_tabs nav -> homepage FAQ card look ========================== */
html body:not(#zz):not(#zz) .s_tabs_nav ul { display:flex !important; flex-direction:column !important; gap:16px !important; }
html body:not(#zz):not(#zz) .s_tabs_nav ul li { width:100% !important; }
html body:not(#zz):not(#zz) .s_tabs_nav .nav-link {
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px !important;
  border:1px solid transparent !important; border-radius:12px !important; padding:20px 24px !important; margin:0 !important;
  background:
    linear-gradient(0deg,rgba(176,176,176,.1),rgba(176,176,176,.1)) padding-box,
    linear-gradient(0deg,#05052B,#05052B) padding-box,
    linear-gradient(90deg,#192A42 0%,#1F73FF 50%,#192A42 100%) border-box !important;
  color:#fff !important; font-weight:600 !important;
}
html body:not(#zz):not(#zz) .s_tabs_nav .nav-link * { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html body:not(#zz):not(#zz) .s_tabs_nav .nav-link.active {
  background:
    linear-gradient(0deg,rgba(31,115,255,.18),rgba(31,115,255,.18)) padding-box,
    linear-gradient(0deg,#05052B,#05052B) padding-box,
    linear-gradient(90deg,#1F73FF 0%,#27c2ff 50%,#1F73FF 100%) border-box !important;
  border-left:1px solid transparent !important;
}
html body:not(#zz):not(#zz) .s_tabs_nav .nav-link img { display:none !important; }
html body:not(#zz):not(#zz) .s_tabs_nav .nav-link.active::after { color:#27c2ff !important; }

/* ============ T1 / T10 : hero background -> #05052b (custom hero containers) =================== */
html body:not(#zz):not(#zz) .hero.hero--split-ai,
html body:not(#zz):not(#zz) .hero-ai,
html body:not(#zz):not(#zz) .ebook-hero,
html body:not(#zz):not(#zz) .hero-bg-05052b,
html body:not(#zz):not(#zz) section.s_text_cover:first-of-type,
html body:not(#zz):not(#zz) .fw-hero,
html body:not(#zz):not(#zz) .cs-hero,
html body:not(#zz):not(#zz) .services-hero {
  background:#0A0A3A !important;
  background-image:none !important;
}

/* ============ T8 (follow-up) : white-text custom CTAs -> homepage cyan pill + BLACK text ======= */
html body:not(#zz):not(#zz) .hero-ai__cta,
html body:not(#zz):not(#zz) .hero-ai__cta--primary,
html body:not(#zz):not(#zz) .hero-ai__cta--outline,
html body:not(#zz):not(#zz) .cs-cta,
html body:not(#zz):not(#zz) .cs-hero__cta,
html body:not(#zz):not(#zz) .cs-hero__cta--primary,
html body:not(#zz):not(#zz) .cs-hero__cta--outline,
html body:not(#zz):not(#zz) .ebook-cta__btn,
html body:not(#zz):not(#zz) .ebook-form__submit,
html body:not(#zz):not(#zz) .animation-cta,
html body:not(#zz):not(#zz) .form__submit,
html body:not(#zz):not(#zz) .btn--snake,
html body:not(#zz):not(#zz) .btn--primary,
html body:not(#zz):not(#zz) .btn--outline {
  background:#00b3fb !important; background-image:none !important;
  color:#010202 !important; -webkit-text-fill-color:#010202 !important;
  border:0 !important; border-radius:999px !important;
  box-shadow:0 8px 24px rgba(0,179,251,.28) !important; text-decoration:none !important;
}
html body:not(#zz):not(#zz) .hero-ai__cta *, html body:not(#zz):not(#zz) .hero-ai__cta--primary *,
html body:not(#zz):not(#zz) .hero-ai__cta--outline *, html body:not(#zz):not(#zz) .cs-cta *,
html body:not(#zz):not(#zz) .cs-hero__cta *, html body:not(#zz):not(#zz) .cs-hero__cta--primary *,
html body:not(#zz):not(#zz) .cs-hero__cta--outline *, html body:not(#zz):not(#zz) .ebook-cta__btn *,
html body:not(#zz):not(#zz) .animation-cta *,
html body:not(#zz):not(#zz) .form__submit *, html body:not(#zz):not(#zz) .btn--snake *,
html body:not(#zz):not(#zz) .btn--primary *, html body:not(#zz):not(#zz) .btn--outline * {
  color:#010202 !important; -webkit-text-fill-color:#010202 !important;
}

/* ============ remove the triangular / decorative Odoo background shapes ======================= */
html body:not(#zz):not(#zz) .o_we_shape,
html body:not(#zz):not(#zz) [class*="o_web_editor_Origins"],
html body:not(#zz):not(#zz) [class*="o_web_editor_Floats"],
html body:not(#zz):not(#zz) [class*="o_web_editor_Wavy"] { display:none !important; }

/* ============ hero: neutralize the Odoo background-filter overlay (rgba(0,0,0,.5)) ============
   It tinted the hero dark on top of #05052b; with the bg image removed it's no longer needed. */
html body:not(#zz):not(#zz) .o_we_bg_filter {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

/* ============ red heading/paragraph text -> BLUE on dark sections (black on cyan cards is
   already handled by the card text rules, which out-specify this) ============================= */
html body:not(#zz):not(#zz) [style*="color:#ff1b1f" i],
html body:not(#zz):not(#zz) [style*="color: #ff1b1f" i],
html body:not(#zz):not(#zz) [style*="color:#EC3636" i],
html body:not(#zz):not(#zz) [style*="color: #EC3636" i],
html body:not(#zz):not(#zz) [style*="color:#ff0000" i],
html body:not(#zz):not(#zz) [style*="color: #ff0000" i],
html body:not(#zz):not(#zz) [style*="color:rgb(255, 0, 0)" i],
html body:not(#zz):not(#zz) [style*="color: rgb(255, 0, 0)" i],
html body:not(#zz):not(#zz) [style*="color:rgb(255,0,0)" i],
html body:not(#zz):not(#zz) [style*="color:#D70909" i],
html body:not(#zz):not(#zz) [style*="color: #D70909" i],
html body:not(#zz):not(#zz) [style*="color:#F60014" i],
html body:not(#zz):not(#zz) [style*="color: #F60014" i],
html body:not(#zz):not(#zz) .text-danger,
html body:not(#zz):not(#zz) .text-danger *,
html body:not(#zz):not(#zz) .text-o-color-1,
html body:not(#zz):not(#zz) .wm-red,
html body:not(#zz):not(#zz) .wm-red *,
html body:not(#zz):not(#zz) font[color="red"],
html body:not(#zz):not(#zz) font[color="#ff0000"],
html body:not(#zz):not(#zz) font[color="#EC3636"] {
  color:#4da6ff !important;
  -webkit-text-fill-color:#4da6ff !important;
}
/* red text inside a light/cyan card stays BLACK (out-specifies the blue above) */
html body:not(#zz):not(#zz) .s_card .wm-red, html body:not(#zz):not(#zz) .s_card .text-danger,
html body:not(#zz):not(#zz) .my-card .wm-red, html body:not(#zz):not(#zz) .service-card .wm-red {
  color:#010202 !important; -webkit-text-fill-color:#010202 !important;
}

/* ============ heading red #d30000 / rgb(211,0,0) -> #00b3fb ==================================== */
html body:not(#zz):not(#zz) [style*="#d30000" i],
html body:not(#zz):not(#zz) [style*="#D30000" i],
html body:not(#zz):not(#zz) [style*="rgb(211, 0, 0)" i],
html body:not(#zz):not(#zz) [style*="rgb(211,0,0)" i] {
  color:#00b3fb !important;
  -webkit-text-fill-color:#00b3fb !important;
}

/* ============ comprehensive red sweep: every remaining red notation -> blue #4da6ff ==========
   (red inside cyan/light cards is forced BLACK by the card-text rules, which out-specify this;
   the specific heading red #d30000 -> #00b3fb rule above still wins for that exact value.) */
html body:not(#zz):not(#zz) [style*="rgb(236, 54, 54)" i],
html body:not(#zz):not(#zz) [style*="rgb(236,54,54)" i],
html body:not(#zz):not(#zz) [style*="rgb(231, 0, 19)" i],
html body:not(#zz):not(#zz) [style*="rgb(231,0,19)" i],
html body:not(#zz):not(#zz) [style*="rgb(194, 28, 28)" i],
html body:not(#zz):not(#zz) [style*="rgb(215, 9, 9)" i],
html body:not(#zz):not(#zz) [style*="rgb(230, 57, 70)" i],
html body:not(#zz):not(#zz) [style*="#e70013" i],
html body:not(#zz):not(#zz) [style*="#C21C1C" i],
html body:not(#zz):not(#zz) [style*="#e63946" i] {
  color:#4da6ff !important;
  -webkit-text-fill-color:#4da6ff !important;
}

/* ============ ported homepage red accent (.nh-red) in section headings -> blue ================
   (only the navbar pages link this file, so the homepage's own .nh-red is untouched.) */
html body:not(#zz):not(#zz) .nh-red,
html body:not(#zz):not(#zz) .nh-red * {
  color:#4da6ff !important;
  -webkit-text-fill-color:#4da6ff !important;
}
/* keep it black if it ever sits inside a cyan/light card */
html body:not(#zz):not(#zz) .s_card .nh-red, html body:not(#zz):not(#zz) .my-card .nh-red,
html body:not(#zz):not(#zz) .service-card .nh-red {
  color:#010202 !important; -webkit-text-fill-color:#010202 !important;
}

/* ============ red sweep round 2: values found by the full-census (heading sub-texts etc.) ======
   #be1212 / rgb(206,0,0) / #c43e37 / #bc2c2c / rgb(200,0,16) / #b91220 — all -> blue #4da6ff.
   external !important beats the inline `color:` on the <font>/<span>; cards still force black. */
html body:not(#zz):not(#zz) [style*="#be1212" i],
html body:not(#zz):not(#zz) [style*="#c43e37" i],
html body:not(#zz):not(#zz) [style*="#bc2c2c" i],
html body:not(#zz):not(#zz) [style*="#b91220" i],
html body:not(#zz):not(#zz) [style*="rgb(206, 0, 0)" i],
html body:not(#zz):not(#zz) [style*="rgb(206,0,0)" i],
html body:not(#zz):not(#zz) [style*="rgb(200, 0, 16)" i],
html body:not(#zz):not(#zz) [style*="rgb(200,0,16)" i] {
  color:#4da6ff !important;
  -webkit-text-fill-color:#4da6ff !important;
}

/* ============ heading ACCENT gradient classes -> blue (v2 & service pages) =====================
   styles.css gives .gradient-text/.title-gradient/.text-gradient a RED gradient clipped to text;
   ai-strategy-redesign.css overrides them to solid #ff1b1f. Both are red heading sub-text accents.
   Recolor to solid blue here (nav-design-fixes.css is NOT linked on the homepage, so it's safe).
   :not(#zz):not(#zz) = 2 ID-units, beats `body.ai-strategy-v2 .gradient-text` (0,3,1). */
html body:not(#zz):not(#zz) .gradient-text,
html body:not(#zz):not(#zz) .title-gradient,
html body:not(#zz):not(#zz) .text-gradient {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #4da6ff !important;
  -webkit-text-fill-color: #4da6ff !important;
}

/* ============ equal-height .my-card cards ======================================================
   The inline template ships `.my-card{height:250px}` then later `.my-card{height:auto}` — the auto
   wins, so cards size to their content and become UNEQUAL when text length differs. Bootstrap rows
   already stretch their columns to the tallest; height:100% makes each card fill its column, so all
   cards in a row match (no clipping). Degrades to content-height where the parent isn't stretched. */
html body:not(#zz):not(#zz) .my-card,
html body:not(#zz):not(#zz) .industry_block { height: 100% !important; }


/* ============ REVERT: heading & sub-heading (h1-h6) accents BLUE -> RED (homepage #ff1b1f) =======
   Overrides the earlier red->blue sweep for HEADINGS ONLY; paragraphs keep their blue/black. */
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(236, 54, 54)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(236, 54, 54)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(236,54,54)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(236,54,54)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#EC3636" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#EC3636" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#ff1b1f" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#ff1b1f" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(255, 0, 0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(255, 0, 0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(255,0,0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(255,0,0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#ff0000" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#ff0000" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#be1212" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#be1212" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#c43e37" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#c43e37" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#bc2c2c" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#bc2c2c" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#b91220" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#b91220" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(206, 0, 0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(206, 0, 0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(206,0,0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(206,0,0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(200, 0, 16)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(200, 0, 16)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(200,0,16)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(200,0,16)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(231, 0, 19)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(231, 0, 19)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(231,0,19)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(231,0,19)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#e70013" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#e70013" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#C21C1C" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#C21C1C" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#e63946" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#e63946" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#d30000" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#d30000" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(211, 0, 0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(211, 0, 0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="rgb(211,0,0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="rgb(211,0,0)" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) [style*="#D70909" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6)[style*="#D70909" i],
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .nh-red,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).nh-red,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .text-o-color-1,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).text-o-color-1,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .wm-red,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).wm-red,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .text-danger,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).text-danger,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) font[color] {
  color:#ff1b1f !important; -webkit-text-fill-color:#ff1b1f !important;
}
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .gradient-text,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).gradient-text,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .title-gradient,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).title-gradient,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6) .text-gradient,
html body:not(#zz):not(#zz) :is(h1,h2,h3,h4,h5,h6).text-gradient {
  color:#ff1b1f !important; -webkit-text-fill-color:#ff1b1f !important;
  background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
}

/* ============ consistent spacing BETWEEN CARDS ================================================
   Card grids had uneven/tight horizontal gutters (14px in some rows, 30px in others) and some
   card types (.industry_block) had 0 vertical margin. Normalize the Bootstrap gutter on any row
   that contains cards, and give a consistent vertical gap. :has() scopes it to card rows only. */
html body:not(#zz):not(#zz) .row:has(.my-card),
html body:not(#zz):not(#zz) .row:has(.industry_block),
html body:not(#zz):not(#zz) .row:has(.s_card),
html body:not(#zz):not(#zz) .row:has(.qss-card-ui),
html body:not(#zz):not(#zz) .row:has(.qss-card-hover-ui) {
  --bs-gutter-x: 1.5rem !important;
}
/* The card cols aren't uniform bootstrap cols (some only 14px gap) and the cards are height:100%,
   so put BOTH the horizontal inset AND the vertical row-gap on the COLUMN, not the card (a
   margin on a height:100% card overflows instead of spacing). -> uniform 24px gaps in both axes. */
html body:not(#zz):not(#zz) .row:has(.my-card) > [class*="col"],
html body:not(#zz):not(#zz) .row:has(.industry_block) > [class*="col"],
html body:not(#zz):not(#zz) .row:has(.s_card) > *,
html body:not(#zz):not(#zz) .row:has(.qss-card-ui) > *,
html body:not(#zz):not(#zz) .row:has(.qss-card-hover-ui) > * {
  padding-left: 12px !important; padding-right: 12px !important;
  margin-top: 0 !important; margin-bottom: 24px !important;
}

/* ============ remove the redundant 'Read More' pill from the "In-Depth Answers" accordion =======
   The accordion chevron already expands each item, so the .btn-ui-1 "Read More" pill is redundant.
   All 69 .btn-ui-1 across the site are these Read-More pills, so this hides them everywhere. */
html body:not(#zz):not(#zz) .btn-ui-1 { display: none !important; }

/* ============ colored/badge icons must keep their own colors ====================================
   Some .s_features_icon SVGs are self-contained COLORED badges (gradient <rect> + white art). The
   global brightness(0) invert(1) flattens them to a white blob. A build step tags those imgs with
   .wm-ic-color (by reading the SVG); they render with their own colors, while plain black line-art
   icons keep the white invert from the default rule above. */
html body:not(#zz):not(#zz) img.wm-ic-color { filter: none !important; }

/* ============ case-study carousel: stop clipping the "Read the full success story" button =======
   The section fixes .carousel-inner to height:550px + overflow:hidden, but taller slides (≈616px)
   get clipped, hiding the CTA button. Items are relative show/hide slides, so height:auto is safe. */
html body:not(#zz):not(#zz) .s_carousel,
html body:not(#zz):not(#zz) .s_carousel .carousel-inner,
html body:not(#zz):not(#zz) .s_carousel .carousel-item {
  height: auto !important; min-height: 650px !important; overflow: visible !important;
}

/* ============ -v2 page card icons (generative-ai, chatbot, etc.) — make them visible ============
   These cards became cyan; their icon SVG files are missing so a thin black-outline fallback shows
   with no badge. Give them a white-translucent badge + a solid dark stroke, like the homepage cyan
   cards — clearly visible + consistent. (Leave the dark roadmap CTA card's white icon alone.) */
html body:not(#zz):not(#zz) .capability-card__icon,
html body:not(#zz):not(#zz) .process-step__icon,
html body:not(#zz):not(#zz) .service-card__ic,
html body:not(#zz):not(#zz) .roadmap-card:not(.roadmap-card--cta) .roadmap-card__icon {
  background: rgba(255,255,255,.30) !important;
  border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 52px !important; height: 52px !important; padding: 0 !important;
}
html body:not(#zz):not(#zz) .capability-card__icon svg,
html body:not(#zz):not(#zz) .process-step__icon svg,
html body:not(#zz):not(#zz) .service-card__ic svg,
html body:not(#zz):not(#zz) .roadmap-card:not(.roadmap-card--cta) .roadmap-card__icon svg {
  stroke: #00243a !important; fill: none !important;
  width: 28px !important; height: 28px !important; stroke-width: 1.9 !important;
}

/* ============ task 1: homepage diagonal-line background behind the FAQ sections ================
   The homepage FAQ (.nh-faqsec) has a faq-bg.svg fan-line backdrop via ::before. Mirror it behind
   the navbar pages' FAQ sections (Odoo "Common Questions" = .s_accordion_image; aisvc = .aisvc-faq). */
html body:not(#zz):not(#zz) .s_accordion_image,
html body:not(#zz):not(#zz) .s_faq_collapse,
html body:not(#zz):not(#zz) .s_faq_horizontal,
html body:not(#zz):not(#zz) .faq-section,
html body:not(#zz):not(#zz) .aisvc-sec:has(.aisvc-faq) { position:relative !important; overflow:hidden !important; }
html body:not(#zz):not(#zz) .s_accordion_image::before,
html body:not(#zz):not(#zz) .s_faq_collapse::before,
html body:not(#zz):not(#zz) .s_faq_horizontal::before,
html body:not(#zz):not(#zz) .faq-section::before,
html body:not(#zz):not(#zz) .aisvc-sec:has(.aisvc-faq)::before {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1792px; height:882px; max-width:none; z-index:0; pointer-events:none;
  background:url(/assets/pages/home/faq-bg.svg) no-repeat center/contain; opacity:.9;
}
html body:not(#zz):not(#zz) .s_accordion_image > .container, html body:not(#zz):not(#zz) .s_accordion_image > div,
html body:not(#zz):not(#zz) .s_faq_collapse > .container, html body:not(#zz):not(#zz) .s_faq_collapse > div,
html body:not(#zz):not(#zz) .s_faq_horizontal > .container, html body:not(#zz):not(#zz) .s_faq_horizontal > div,
html body:not(#zz):not(#zz) .faq-section > .container, html body:not(#zz):not(#zz) .faq-section > div,
html body:not(#zz):not(#zz) .aisvc-sec:has(.aisvc-faq) > .aisvc-wrap { position:relative; z-index:1; }

/* ============ task 2: restyle the tab scroller scrollbar (was black thumb on light-grey) ========
   Make it a thin cyan thumb on a subtle track so it fits the dark theme (image: the vertical
   numbered-tabs scroller). */
html body:not(#zz):not(#zz) .s_tabs_nav ul {
  scrollbar-width:thin !important; scrollbar-color:#00b3fb rgba(255,255,255,.08) !important;
  padding-right:6px !important;
}
html body:not(#zz):not(#zz) .s_tabs_nav ul::-webkit-scrollbar { width:6px !important; height:6px !important; }
html body:not(#zz):not(#zz) .s_tabs_nav ul::-webkit-scrollbar-track { background:rgba(255,255,255,.08) !important; border-radius:10px !important; }
html body:not(#zz):not(#zz) .s_tabs_nav ul::-webkit-scrollbar-thumb { background:#00b3fb !important; border-radius:10px !important; border:1px solid rgba(5,5,43,.4) !important; }
html body:not(#zz):not(#zz) .s_tabs_nav ul::-webkit-scrollbar-thumb:hover { background:#27c2ff !important; }

/* ============================================================================
   Cloned-Odoo page fixes (reported on /services/dedicated-engineering-teams/)
   1. s_faq_horizontal: the section carries overflow:hidden, which kills
      position:sticky on the .s_faq_horizontal_entry_title heading — the
      "overlapping" scroll effect where the left heading stays pinned while the
      right column scrolls. Force overflow:visible to restore it.
   2. .qss-hire-card cards set a light-grey bg via a class rule (page <style>),
      which the dark theme's [style*=...] inline-bg fixes cannot catch, so the
      theme's light text landed on a light card = invisible. Force a dark card.
   ========================================================================== */
html body:not(#zz):not(#zz) #wrap section.s_faq_horizontal,
html body:not(#zz):not(#zz) section.s_faq_horizontal { overflow: visible !important; }

html body:not(#zz):not(#zz) .qss-hire-card .overflow-hidden {
  background-color: #0a0a3a !important; border-color: rgba(255,255,255,.12) !important;
}
html body:not(#zz):not(#zz) .qss-hire-card .overflow-hidden:hover {
  background-color: #0f1447 !important; border-color: rgba(0,179,251,.35) !important;
}
/* 3. .qss-hire-card icons are dark line-art SVGs (#323232/#999999 on white) drawn
      for the original light card. Now that the card is dark they read as invisible,
      so invert them: dark strokes -> light, white backdrop -> dark (blends in). */
html body:not(#zz):not(#zz) .qss-hire-card .overflow-hidden .icon img { filter: invert(1) !important; }

/* 4. s_faq_horizontal right column -> sticky stacked "deck of cards".
      js/faq-stack-cards.js wraps each <h3>+body group in .qss-stack-card and
      sets an increasing `top`; these rules make each card an opaque sticky
      panel so the next card slides up and covers the previous one on scroll.
      Cards MUST be opaque or the stack shows through. */
html body:not(#zz):not(#zz) .s_faq_horizontal .qss-stack-card {
  position: sticky;
  background: linear-gradient(108.63deg, #0a0a3a 38%, #14306b 130%);
  border: 1px solid #192a42;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 20px;
  box-shadow: 0 -10px 34px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.25);
}
html body:not(#zz):not(#zz) .s_faq_horizontal .qss-stack-card > *:first-child { margin-top: 0; }
html body:not(#zz):not(#zz) .s_faq_horizontal .qss-stack-card > *:last-child  { margin-bottom: 0; }
html body:not(#zz):not(#zz) .s_faq_horizontal .qss-stack-card h3 { margin-bottom: 8px; }
html body:not(#zz):not(#zz) .s_faq_horizontal .qss-stack-card ul { margin-bottom: 0; }
/* small tail so the final card can settle without leaving a big empty band */
html body:not(#zz):not(#zz) .s_faq_horizontal .s_faq_horizontal_entry article > .col-lg-7,
html body:not(#zz):not(#zz) .s_faq_horizontal .s_faq_horizontal_entry article > span.col-lg-7 { padding-bottom: 60px; }

/* below the lg breakpoint the left heading isn't sticky either — keep cards
   as plain stacked panels (no sticky) so mobile just scrolls normally */
@media (max-width: 991.98px) {
  html body:not(#zz):not(#zz) .s_faq_horizontal .qss-stack-card { position: static; }
  html body:not(#zz):not(#zz) .s_faq_horizontal .s_faq_horizontal_entry article > .col-lg-7,
  html body:not(#zz):not(#zz) .s_faq_horizontal .s_faq_horizontal_entry article > span.col-lg-7 { padding-bottom: 0; }
}