/* ═══════════════════════════════════════════════════════════
   QUEST Enterprise — Homepage
   Aligned to the QUEST Brand Guidelines (see docs/BRAND.md)
   Font: Noto Sans · Gradient #348CAC→#3B3D98 · Blue #3753A2 · Steel #758398
   ═══════════════════════════════════════════════════════════ */

:root {
  --q-grad-from: #348CAC;
  --q-grad-to:   #3B3D98;
  --q-gradient:  linear-gradient(135deg, #348CAC 0%, #3B3D98 100%);
  --q-blue:      #3753A2;   /* headings, icons, primary accent */
  --q-blue-700:  #2C4382;   /* hover / depth */
  --q-blue-300:  #8FB4D8;   /* light accents on dark surfaces */
  --q-steel:     #758398;   /* secondary text */
  --q-ink:       #000000;   /* body text */
  --q-white:     #FFFFFF;
  --q-tint:      #EEF2FB;   /* light section background */
  --q-line:      rgba(55,83,162,0.14);
  --q-font:      'Noto Sans', system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--q-font);
  overflow-x: hidden;
  background: #fff;
  color: var(--q-ink);
  padding-top: 84px; /* space for the fixed nav */
}

/* Elementor editor canvas: keep the nav in-flow so it doesn't cover the
   editing UI; no body offset needed there. */
body.elementor-editor-active { padding-top: 0; }
body.elementor-editor-active .nav { position: sticky; left: auto; right: auto; }

/* WP admin bar (logged-in front end): it shifts normal-flow content down via
   `html{margin-top}`, but our nav is position:fixed so it isn't carried along
   automatically — pin it below the admin bar explicitly, or it renders at
   the true viewport top (hidden behind the bar) and everything below opens
   a matching gap. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

img, svg, video { display: block; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(1.1); }
}

/* ═══ CINEMATIC PRELOADER ════════════════════════════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 42%, rgba(55,83,162,0.40) 0%, transparent 62%),
    linear-gradient(150deg, #348CAC 0%, #3B3D98 45%, #3B3D98 100%);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.preloader.is-done {
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}
.preloader__inner { display: flex; flex-direction: column; align-items: center; }
.preloader__logo {
  height: 56px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
  animation: plLogo 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.preloader__bar {
  width: 210px;
  height: 3px;
  margin-top: 28px;
  border-radius: 3px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #3753A2, #8FB4D8);
  animation: plBar 1.1s ease forwards;
}
@keyframes plLogo {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 0.95; transform: none; }
}
@keyframes plBar { from { width: 0; } to { width: 100%; } }

/* ═══ SCROLL REVEAL (Framer-style whileInView) ═══════════════ */
html.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .preloader__logo, .preloader__bar span { animation: none !important; }
}

/* ── Shared layout ─────────────────────────────────────────── */
.container {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding: 0 48px;
}

/* Section eyebrow (line — label — line) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  justify-content: center;
}
.eyebrow .rule { height: 1px; width: 40px; background: #3753A2; }
.eyebrow .rule--light { background: #8FB4D8; }
.eyebrow .label {
  font: 600 11px/1 'Noto Sans';
  color: #3753A2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eyebrow .label--light { color: #8FB4D8; }

/* Pill badge */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
}
.pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background: #8FB4D8;
}
.pill .pill-text {
  font: 600 11px/1 'Noto Sans';
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pill--dark { background: rgba(6,16,50,0.28); border: 1px solid rgba(255,255,255,0.32); }
.pill--dark .pill-text { color: rgba(255,255,255,0.95); }
.pill--lightblue { background: rgba(55,83,162,0.08); border: 1px solid rgba(55,83,162,0.2); padding: 6px 14px; }
.pill--lightblue .pill-text { color: #3753A2; }
.pill--soft { background: rgba(55,83,162,0.07); border: 1px solid rgba(55,83,162,0.15); padding: 6px 14px; }
.pill--soft .pill-text { color: #3753A2; }

/* Buttons */
.btn {
  font: 600 15px/1 'Noto Sans';
  padding: 16px 34px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
}
.btn--primary { background: #3753A2; color: #fff; box-shadow: 0 4px 20px rgba(55,83,162,0.4); }
.btn--primary:hover { background: #2C4382; }
.btn--ghost-light {
  background: rgba(255,255,255,0.1); color: #fff;
  font-weight: 500; border: 1px solid rgba(255,255,255,0.22);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.16); }
.btn--white { background: #fff; color: #3753A2; }
.btn--white:hover { background: #EEF2FB; }
/* Ghost button for LIGHT sections (blue outline, dark text) */
.btn--ghost {
  background: transparent; color: #3753A2;
  border: 1px solid rgba(55,83,162,0.35); font-weight: 500;
}
.btn--ghost:hover { background: rgba(55,83,162,0.06); border-color: #3753A2; }

/* ═══ TOP CONTACT BAR ═══════════════════════════════════════ */
.topbar {
  background: linear-gradient(90deg, #3753A2 0%, #3B3D98 100%);
  color: rgba(255,255,255,0.78);
}
.topbar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__msg { font: 500 12.5px/1 'Noto Sans'; color: rgba(255,255,255,0.62); letter-spacing: 0.01em; }
.topbar__contact { display: flex; align-items: center; gap: 18px; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px/1 'Noto Sans';
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}
.topbar__item svg { width: 15px; height: 15px; color: #8FB4D8; }
.topbar__item:hover { color: #fff; }
.topbar__sep { width: 1px; height: 14px; background: rgba(255,255,255,0.18); }
.langswitch { display: inline-flex; align-items: center; gap: 9px; }
.langswitch__btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font: 600 12.5px/1 'Noto Sans';
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.2s ease;
}
.langswitch__btn:hover { color: #fff; }
.langswitch__btn.is-active { color: #8FB4D8; }
.langswitch__div { width: 1px; height: 12px; background: rgba(255,255,255,0.2); }

/* Language switch relocated into the (light) nav bar — dark-on-light colours */
.nav__langswitch { margin-right: 4px; }
.nav__langswitch .langswitch__btn { color: var(--q-steel); }
.nav__langswitch .langswitch__btn:hover,
.nav__langswitch .langswitch__btn.is-active { color: var(--q-blue); }
.nav__langswitch .langswitch__div { background: var(--q-line); }

/* ═══ NAV (modern, glassy, scroll-aware) ════════════════════ */
.nav {
  /* FIXED (not sticky): inside the Elementor build the nav sits in a column
     exactly its own height, so sticky can never engage. Body gets padding-top
     compensation below. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 72px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(11,28,52,0.07);
  box-shadow: 0 4px 24px rgba(11,28,52,0.05);
  transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
/* More solid bar once the page is scrolled. Height stays 84px — the nav is
   FIXED and everything below is offset by exactly 84px, so shrinking would
   open a see-through gap between the bar and the content. */
.nav.is-scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 6px 28px rgba(11,28,52,0.10);
}
.nav__brand { position: relative; display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* Two-class selector so the height wins over Elementor's `.elementor img
   { height:auto; max-width:100% }` reset (which would otherwise blow the
   high-res logo up to full container width). */
.nav .nav__logo {
  height: 46px;
  width: auto;
  max-width: none;
  display: block;
  transform-origin: left center;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Logo swap: full wordmark at the top, compact icon once scrolled.
   The icon is overlaid on the full logo (which stays in flow and keeps the
   brand's width) so there's zero layout shift — the centered nav items don't
   move. The motion reads as the wordmark collapsing into its own Q mark:
   the full logo shrinks + fades out, the icon pops up with a slight overshoot. */
.nav .nav__logo--icon {
  position: absolute;
  left: 0;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%) scale(0.55);
  pointer-events: none;
}
.nav.is-scrolled .nav__logo--full { opacity: 0; transform: scale(0.88); }
.nav.is-scrolled .nav__logo--icon { opacity: 1; transform: translateY(-50%) scale(1); }

/* Subtle hover lift, scoped per state so it doesn't fight the swap transform. */
.nav:not(.is-scrolled) .nav__brand:hover .nav__logo--full { transform: scale(1.04); }
.nav.is-scrolled .nav__brand:hover .nav__logo--icon { transform: translateY(-50%) scale(1.08); }

.nav__links {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.nav__link {
  position: relative;
  color: #758398;
  font: 600 16.5px/1 'Noto Sans';
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 9px;
  transition: color 0.2s ease, background 0.2s ease;
}
/* animated underline that grows from the centre */
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3753A2, #8FB4D8);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.nav__link:hover {
  color: #3753A2;
  background: rgba(55,83,162,0.07);
}
.nav__link:hover::after { width: 22px; }
.nav__link.is-active { color: #3753A2; }
.nav__link.is-active::after { width: 22px; }

/* ── Nav dropdowns / mega-menu ─────────────────────────────── */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link--parent { display: inline-flex; align-items: center; gap: 5px; }
.nav__chev { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.25s ease; }
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev,
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  border: 1px solid var(--q-line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(55,83,162,0.16);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.22,1,0.36,1),
              transform 0.2s cubic-bezier(0.22,1,0.36,1),
              visibility 0.2s;
  z-index: 60;
}
/* a hover bridge so the panel doesn't close in the 10px gap */
.nav__item.has-panel::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel,
.nav__item.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__panel--links { min-width: 224px; display: flex; flex-direction: column; gap: 2px; }
.nav__panel-link {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--q-steel);
  font: 600 15px/1.3 'Noto Sans';
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__panel-link:hover { background: var(--q-tint); color: var(--q-blue); }

.nav__panel--mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(232px, 1fr));
  gap: 4px;
  width: 524px;
}
.nav__mega-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.18s ease;
}
.nav__mega-card:hover { background: var(--q-tint); }
.nav__mega-title { font: 700 15.5px/1.2 'Noto Sans'; color: var(--q-blue); }
.nav__mega-desc { font: 400 12.5px/1.45 'Noto Sans'; color: var(--q-steel); }

.nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #3753A2 0%, #2C4382 100%);
  color: #fff;
  font: 600 14px/1 'Noto Sans';
  padding: 13px 24px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(55,83,162,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.nav__cta svg { transition: transform 0.25s ease; }
.nav__cta:hover {
  background: linear-gradient(135deg, #2C4382 0%, #2C4382 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(55,83,162,0.38);
}
.nav__cta:hover svg { transform: translateX(3px); }

/* search icon button */
.nav__icon-btn {
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11,28,52,0.12);
  border-radius: 10px;
  background: #fff;
  color: #3753A2;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav__icon-btn svg { width: 19px; height: 19px; }
.nav__icon-btn:hover { background: #EEF2FB; border-color: rgba(55,83,162,0.3); }
.nav.is-search-open .nav__icon-btn { background: #3753A2; color: #fff; border-color: #3753A2; }

/* expandable search field (drops below the bar) */
.nav__search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 14px 48px 18px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(11,28,52,0.08);
  box-shadow: 0 18px 40px rgba(11,28,52,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
}
.nav.is-search-open .nav__search {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__search-inner {
  max-width: 1144px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #EEF2FB;
  border: 1px solid rgba(55,83,162,0.18);
  border-radius: 12px;
  padding: 0 14px;
}
.nav__search-inner svg { width: 20px; height: 20px; color: #3753A2; flex-shrink: 0; }
.nav__search-inner input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 16px 4px;
  font: 500 15px/1 'Noto Sans';
  color: #3753A2;
}
.nav__search-inner input::placeholder { color: #758398; }
.nav__search-close {
  border: none;
  background: transparent;
  color: #758398;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__search-close:hover { background: rgba(55,83,162,0.1); color: #3753A2; }

/* Hamburger (mobile) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(11,28,52,0.12);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: #3753A2;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══ HERO (full-page video slider) ════════════════════════ */
.hero {
  position: relative;
  min-height: calc(100vh - 84px);
  overflow: hidden;
  background: #3B3D98;               /* fallback while video loads */
}
.hero__slides { position: absolute; inset: 0; }
/* each slide crossfades; only the active one is visible */
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.06);
}
/* slow Ken Burns drift on the active slide for cinematic depth */
.hero__slide.is-active .hero__bg-video {
  animation: heroKen 16s ease-in-out infinite alternate;
}
@keyframes heroKen {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}
/* Brand-tinted gradient scrim + cinematic vignette over the video */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 90% at 22% 50%, rgba(16,78,196,0.60) 0%, rgba(8,24,80,0.42) 40%, transparent 72%),
    linear-gradient(90deg, rgba(5,14,56,0.92) 0%, rgba(5,14,56,0.70) 40%, rgba(2,8,32,0.32) 72%, rgba(2,8,32,0.10) 100%),
    linear-gradient(180deg, rgba(2,8,32,0.45) 0%, transparent 26%, transparent 60%, rgba(2,8,32,0.62) 100%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 52%, rgba(2,8,32,0.45) 100%);
  pointer-events: none;
}
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
}
.hero__inner {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding: 80px 48px;
  position: relative;
  z-index: 1;
}
/* copy children reveal one-by-one (blur + slide up) when the slide activates */
.hero__copy { max-width: 640px; }
.hero__copy > * {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22,1,0.36,1), filter 0.7s ease;
}
.hero__slide.is-active .hero__copy > * {
  opacity: 1;
  transform: none;
  filter: none;
}
.hero__slide.is-active .hero__copy > *:nth-child(1) { transition-delay: 0.30s; }
.hero__slide.is-active .hero__copy > *:nth-child(2) { transition-delay: 0.42s; }
.hero__slide.is-active .hero__copy > *:nth-child(3) { transition-delay: 0.52s; }
.hero__slide.is-active .hero__copy > *:nth-child(4) { transition-delay: 0.64s; }
.hero__slide.is-active .hero__copy > *:nth-child(5) { transition-delay: 0.78s; }
.hero__eyebrow { margin-bottom: 28px; }
.hero__line1 { font: 800 56px/1.08 'Noto Sans'; color: #fff; margin-bottom: 4px; text-shadow: 0 2px 24px rgba(2,8,32,0.45); }
.hero__line2 { font: 800 56px/1.08 'Noto Sans'; color: #8FB4D8; margin-bottom: 28px; text-shadow: 0 2px 24px rgba(2,8,32,0.45); }
.hero__sub   { font: 400 17px/1.78 'Noto Sans'; color: rgba(255,255,255,0.78); margin-bottom: 44px; max-width: 540px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__dots {
  position: absolute;
  left: 48px; right: auto;
  bottom: 40px;
  z-index: 3;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-start;
}
.hero__dot {
  width: 9px; height: 9px;
  border-radius: 100px;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.hero__dot:hover { background: rgba(255,255,255,0.7); }
.hero__dot.is-active { width: 30px; background: #fff; }

/* animated scroll-down cue */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
  transition: border-color 0.2s ease;
}
.hero__scroll:hover { border-color: rgba(255,255,255,0.8); }
.hero__scroll span {
  width: 4px; height: 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.85);
  animation: heroScroll 1.6s ease-in-out infinite;
}
@keyframes heroScroll {
  0%   { opacity: 0; transform: translateY(-4px); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; }
}

/* ═══ NEWS (left slider · right transparent video) ══════════ */
.news {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(ellipse 60% 80% at 78% 50%, rgba(55,83,162,0.32) 0%, rgba(8,24,80,0.20) 42%, transparent 72%),
    linear-gradient(135deg, #348CAC 0%, #3B3D98 45%, #3B3D98 100%);
}
.news__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
/* left copy — crossfades smoothly between news items */
.news__copy { transition: opacity 0.45s ease; }
.news__copy.is-fading { opacity: 0; }
.news__eyebrow { margin-bottom: 24px; }
.news__title { font: 700 38px/1.2 'Noto Sans'; color: #fff; margin-bottom: 18px; min-height: 92px; }
.news__desc  { font: 400 16px/1.75 'Noto Sans'; color: rgba(255,255,255,0.66); margin-bottom: 36px; max-width: 500px; min-height: 84px; }
.news__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.news__dots { display: flex; gap: 8px; align-items: center; }
.news__dot {
  width: 8px; height: 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}
.news__dot.is-active { width: 28px; background: #fff; }

.news__media { position: relative; padding-bottom: 32px; padding-right: 16px; }
.news__video {
  width: 100%;
  display: block;
  border-radius: 4px;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45));
}
.news__stat { position: absolute; border-radius: 12px; }
.news__stat--int {
  bottom: 0; left: -18px;
  background: #3753A2;
  padding: 15px 20px;
  box-shadow: 0 8px 32px rgba(55,83,162,0.45);
}
.news__stat--exp {
  top: -14px; right: 0;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 13px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.news__stat-num { font: 700 28px/1 'Noto Sans'; color: #fff; }
.news__stat--exp .news__stat-num { font-size: 26px; }
.news__stat-label { font: 400 11px/1.4 'Noto Sans'; color: rgba(255,255,255,0.75); margin-top: 4px; }
.news__stat--exp .news__stat-label { color: rgba(255,255,255,0.65); }

/* ═══ SECTION HEADINGS (shared) ═════════════════════════════ */
.section { padding: 96px 0; }
.section--light { background: #EEF2FB; }
.section--white { background: #fff; }
.section--dark  { background: #3753A2; }

.section-title {
  font: 700 40px/1.15 'Noto Sans';
  color: #3753A2;
  text-align: center;
  margin-bottom: 16px;
}
.section-sub {
  font: 400 17px/1.7 'Noto Sans';
  color: #758398;
  text-align: center;
  margin-bottom: 56px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══ PRODUCTS ══════════════════════════════════════════════ */
/* Soft grey backdrop with subtly drifting white Q watermarks
   (echoes the old-site products section). */
.section--grey {
  position: relative;
  overflow: hidden;
  background: #EEF1F5;
}
.section--grey > .container { position: relative; z-index: 1; }

.products-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.products-bg__q {
  position: absolute;
  width: var(--s, 480px);
  height: auto;
  opacity: var(--o, 0.6);
  /* Recolour the brand mark to a soft white silhouette. The icon's "Q" is
     transparent negative space, so this reads as a white rounded shape with
     the diagonal Q cut — clean as a single large accent bleeding off-edge. */
  filter: brightness(0) invert(1);
  will-change: transform;
  /* Organic float: a gentle bob + sway that eases through several points
     and loops seamlessly back to the start. */
  animation: qfloat var(--d, 28s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes qfloat {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  25% {
    transform: translate3d(calc(var(--dx, 30px) * 0.45), calc(var(--dy, -24px) * 0.9), 0)
               rotate(calc(var(--rot, 0deg) + 3deg));
  }
  50% {
    transform: translate3d(var(--dx, 30px), calc(var(--dy, -24px) * 0.35), 0)
               rotate(calc(var(--rot, 0deg) + 5deg));
  }
  75% {
    transform: translate3d(calc(var(--dx, 30px) * 0.4), calc(var(--dy, -24px) * -0.6), 0)
               rotate(calc(var(--rot, 0deg) + 2deg));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .products-bg__q { animation: none; }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card {
  position: relative;
  isolation: isolate;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(55,83,162,0.12);
  overflow: hidden;
  cursor: pointer;
  min-height: 360px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(11,46,110,0.28);
  border-color: transparent;
}
/* All four cards share the single QUEST brand gradient
   (soft top-left highlight over the teal→indigo brand sweep). */
.pc--psim,
.pc--gate,
.pc--share,
.pc--mg {
  --accent: #3753A2;
  --grad: radial-gradient(125% 125% at 22% 12%, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 46%),
          var(--q-gradient, linear-gradient(135deg, #348CAC 0%, #3B3D98 100%));
}

/* Diamond fill — collapsed to a point at the center, expands outward on hover */
.product-card__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--grad);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
  pointer-events: none;
}
.product-card:hover .product-card__fill,
.product-card:focus-within .product-card__fill {
  clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%);
}

.product-card__content {
  position: relative;
  z-index: 1;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
}
.product-card__logo {
  display: flex;
  align-items: center;
  margin-bottom: 44px;
}
.product-card__logo-img {
  height: 58px;
  width: auto;
  display: block;
  transition: filter 0.45s ease 0.08s;
}
.product-card__title {
  font: 700 21px/1.2 'Noto Sans';
  color: #3753A2;
  margin-bottom: 12px;
  transition: color 0.45s ease 0.08s;
}
.product-card__desc {
  font: 400 15px/1.7 'Noto Sans';
  color: #758398;
  transition: color 0.45s ease 0.08s;
}
.product-card__more {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
  text-decoration: none;
}
.product-card__plus {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(55,83,162,0.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 300 26px/1 'Noto Sans';
  flex-shrink: 0;
  transition: background 0.45s ease 0.08s, color 0.45s ease 0.08s;
}
.product-card__more-text {
  font: 700 12px/1 'Noto Sans';
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}
/* hover (filled) state — text & marks turn white */
.product-card:hover .product-card__logo-img,
.product-card:focus-within .product-card__logo-img { filter: brightness(0) invert(1); }
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title { color: #fff; }
.product-card:hover .product-card__desc,
.product-card:focus-within .product-card__desc { color: rgba(255,255,255,0.85); }
.product-card:hover .product-card__plus,
.product-card:focus-within .product-card__plus { background: rgba(255,255,255,0.22); color: #fff; }
.product-card:hover .product-card__more-text,
.product-card:focus-within .product-card__more-text { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .product-card__fill { transition: opacity 0.2s ease; }
}

/* ═══ QUEST SERVICES (about-us split + teams accordion) ═════ */
.svc__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;          /* centre the accordion against the tall left column */
}
.svc__title {
  font: 700 44px/1.12 'Noto Sans';
  color: #3753A2;
  margin: 22px 0 32px;
}
.svc__title .accent { color: #3753A2; }
.svc__media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(55,83,162,0.16);
  background: #3753A2;
}
.svc__media img { width: 100%; display: block; object-fit: cover; }

.svc__panel { width: 100%; }

/* In the WP build the accordion sits in its own Elementor column, which
   Elementor vertically centres — leaving its last row floating above the
   taller image column. Pin it to the bottom so the last team row lines up
   with the bottom edge of the image beside it. */
.elementor-widget-wrap:has(> .elementor-widget-quest_accordion) {
  align-content: flex-end !important;
}

.svc-acc { display: flex; flex-direction: column; gap: 14px; }
.svc-acc__item {
  background: #fff;
  border: 1px solid rgba(55,83,162,0.10);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.svc-acc__item:not(.is-open):hover {
  border-color: rgba(55,83,162,0.22);
  box-shadow: 0 8px 24px rgba(55,83,162,0.08);
  transform: translateY(-2px);
}
.svc-acc__item.is-open {
  border-color: rgba(55,83,162,0.22);
  box-shadow: inset 3px 0 0 #3753A2, 0 16px 44px rgba(55,83,162,0.12);
}
.svc-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
/* leading team icon */
.svc-acc__lead { display: flex; align-items: center; gap: 16px; min-width: 0; }
.svc-acc__ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(55,83,162,0.08);
  color: #3753A2;
  transition: background 0.3s ease, color 0.3s ease;
}
.svc-acc__ico svg { width: 23px; height: 23px; }
.svc-acc__item.is-open .svc-acc__ico { background: #3753A2; color: #fff; }
.svc-acc__title { font: 600 16.5px/1.3 'Noto Sans'; color: #3753A2; transition: color 0.2s ease; }
.svc-acc__item.is-open .svc-acc__title { color: #3753A2; }
/* +/- toggle in a soft circle */
.svc-acc__icon {
  position: relative;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #3753A2;
  background: rgba(55,83,162,0.08);
  transition: background 0.3s ease, color 0.3s ease;
}
.svc-acc__icon::before,
.svc-acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.svc-acc__icon::before { top: 16px; left: 8px; width: 18px; height: 2px; }            /* horizontal */
.svc-acc__icon::after  { left: 16px; top: 8px; width: 2px; height: 18px; }             /* vertical */
.svc-acc__item.is-open .svc-acc__icon { background: #3753A2; color: #fff; }
.svc-acc__item.is-open .svc-acc__icon::after { transform: scaleY(0); opacity: 0; }     /* becomes minus */

.svc-acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.svc-acc__item.is-open .svc-acc__panel { max-height: 240px; }
.svc-acc__desc {
  font: 400 15.5px/1.75 'Noto Sans';
  color: #758398;
  margin: 0 24px;
  padding: 16px 0 22px 60px;     /* indent under the title (icon + gap) */
  border-top: 1px solid rgba(55,83,162,0.08);
}

/* ═══ STATS STRIP ═══════════════════════════════════════════ */
.stats {
  background: #f6f8fc;
  padding: 72px 0;
}
.stats__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.stats__head h2 { font: 800 34px/1.2 'Noto Sans'; color: var(--q-blue); letter-spacing: -0.01em; margin: 0 0 12px; }
.stats__head p { font: 400 17px/1.7 'Noto Sans'; color: var(--q-steel); margin: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid rgba(55,83,162,0.12);
}
.stat:last-child { border-right: none; }
.stat__num { font: 800 42px/1 'Noto Sans'; color: #3753A2; margin-bottom: 10px; }
.stat__label {
  font: 500 12px/1.5 'Noto Sans';
  color: #758398;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ═══ WHY-STYLE SPLIT LIST (shared: Why QUEST intro + Contributes) ══ */
.why {
  background: #EEF2FB;
  padding: 96px 0;
}
.why__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
}
.why__intro { position: sticky; top: 96px; }
.why__title { font: 700 40px/1.15 'Noto Sans'; color: #3753A2; margin: 24px 0 20px; }
.why__lead  { font: 400 16px/1.78 'Noto Sans'; color: #758398; margin-bottom: 36px; }
.why__cta   { padding: 14px 28px; font-size: 14px; }
.quest-intro__media { margin-top: 28px; height: 220px; }
.quest-intro__media img { width: 100%; height: 100%; object-fit: cover; }
/* Contributes: taller media so the sticky intro fills the space beside the long list */
.quest-sticky .quest-intro__media { height: 480px; }
.why__list { display: flex; flex-direction: column; gap: 4px; }
.why-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 24px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(55,83,162,0.07);
  margin-bottom: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.why-item:last-child { margin-bottom: 0; }
.why-item:hover {
  border-color: rgba(55,83,162,0.2);
  box-shadow: 0 4px 20px rgba(55,83,162,0.07);
}
.why-item__num {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font: 700 14px/1 'Noto Sans';
}
.why-item__num.n-blue   { background: rgba(55,83,162,0.08);  border: 1px solid rgba(55,83,162,0.15);  color: #3753A2; }
.why-item__num.n-cyan   { background: rgba(11,150,200,0.08);  border: 1px solid rgba(11,150,200,0.18);  color: #348CAC; }
.why-item__num.n-bright { background: rgba(14,132,229,0.08);  border: 1px solid rgba(14,132,229,0.18);  color: #3753A2; }
.why-item__tag {
  font: 700 10.5px/1 'Noto Sans';
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.why-item__tag.t-blue   { color: #3753A2; }
.why-item__tag.t-cyan   { color: #348CAC; }
.why-item__tag.t-bright { color: #3753A2; }
.why-item__name { font: 600 17px/1.2 'Noto Sans'; color: #3753A2; margin-bottom: 7px; }
.why-item__desc { font: 400 15px/1.7 'Noto Sans'; color: #758398; }

/* ═══ WHY QUEST — radial animated infographic ═══════════════ */
.wq { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
.wq__head { text-align: center; max-width: 680px; margin: 0 auto 60px; }
.wq__title { font: 700 44px/1.14 'Noto Sans'; color: #3753A2; margin: 18px 0 16px; }
.wq__lead  { font: 400 17px/1.75 'Noto Sans'; color: #758398; }

.wq__orbit {
  --r: 280px;                 /* node distance from centre */
  position: relative;
  width: 720px;
  height: 720px;
  max-width: 100%;
  margin: 0 auto;
}
/* slow counter-rotating decorative rings (ambient motion) */
.wq__orbit::before,
.wq__orbit::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wq__orbit::before {
  width: calc(var(--r) * 1.55);
  height: calc(var(--r) * 1.55);
  border: 1.5px dashed rgba(55,83,162,0.20);
  animation: wqspin 46s linear infinite;
}
.wq__orbit::after {
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 1px solid rgba(55,83,162,0.10);
  animation: wqspin 70s linear infinite reverse;
}
@keyframes wqspin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ripple rings that expand outward from the hub */
.wq__pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 230px; height: 230px;
  border-radius: 50%;
  border: 1px solid rgba(55,83,162,0.40);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  animation: wqripple 5.4s ease-out infinite;
  pointer-events: none;
}
.wq__pulse--1 { animation-delay: 0s; }
.wq__pulse--2 { animation-delay: 1.8s; }
.wq__pulse--3 { animation-delay: 3.6s; }
@keyframes wqripple {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.5); }
  12%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(2.25); }
}

/* spokes from hub to each node */
.wq__spoke {
  position: absolute;
  left: 50%; bottom: 50%;
  width: 2px;
  height: var(--r);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--a));
  background: linear-gradient(to top, rgba(55,83,162,0.05), rgba(55,83,162,0.34));
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.wq__orbit.is-in .wq__spoke { opacity: 1; }

/* centre hub */
.wq__hub {
  position: absolute;
  top: 50%; left: 50%;
  width: 248px; height: 248px;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #348CAC 0%, #3753A2 50%, #2C4382 100%);
  box-shadow: 0 24px 56px rgba(14,76,158,0.48), inset 0 2px 12px rgba(255,255,255,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 34px 30px;
  z-index: 4;
  transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1), opacity 0.55s ease;
}
.wq__orbit.is-in .wq__hub {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: wqglow 4.5s ease-in-out infinite 0.8s;
}
@keyframes wqglow {
  0%, 100% { box-shadow: 0 24px 56px rgba(14,76,158,0.48), 0 0 0 0 rgba(46,150,236,0), inset 0 2px 12px rgba(255,255,255,0.28); }
  50%      { box-shadow: 0 24px 56px rgba(14,76,158,0.55), 0 0 46px 8px rgba(46,150,236,0.38), inset 0 2px 12px rgba(255,255,255,0.28); }
}
/* faint inner ring for depth */
.wq__hub::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}
.wq__hub-eyebrow { font: 700 11px/1 'Noto Sans'; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.68); margin-bottom: 8px; }
.wq__hub-title { font: 800 27px/1.12 'Noto Sans'; color: #fff; transition: opacity 0.25s ease; }
.wq__hub-desc  { font: 400 13px/1.55 'Noto Sans'; color: rgba(255,255,255,0.86); margin-top: 11px; transition: opacity 0.25s ease; }

/* nodes positioned around the circle */
.wq__node {
  --accent: #3753A2;
  position: absolute;
  top: 50%; left: 50%;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(55,83,162,0.14);
  background:
    radial-gradient(circle at 50% 18%, rgba(55,83,162,0.06), transparent 62%),
    #fff;
  box-shadow: 0 12px 30px rgba(55,83,162,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  padding: 14px;
  cursor: pointer;
  z-index: 3;
  /* stagger applies ONLY to the entrance (transform/opacity),
     so hover colours/shadows react instantly */
  --enter-delay: calc(0.4s + var(--i) * 0.1s);
  transform:
    translate(-50%, -50%)
    rotate(var(--a)) translateY(0) rotate(calc(-1 * var(--a)))
    scale(0.3);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.34,1.56,0.64,1) var(--enter-delay),
    opacity 0.5s ease var(--enter-delay),
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}
.wq__node.n-blue   { --accent: #3753A2; }
.wq__node.n-cyan   { --accent: #348CAC; }
.wq__node.n-bright { --accent: #3753A2; }

/* cinematic entrance — nodes spring out from the centre, staggered */
.wq__orbit.is-in .wq__node {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))
    scale(1);
}

/* icon disc */
.wq__node-ico {
  width: 52px; height: 52px;
  margin-top: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(55,83,162,0.09);
  transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.wq__node-ico svg { width: 29px; height: 29px; }
.wq__node-label { font: 600 14px/1.25 'Noto Sans'; color: #3753A2; transition: color 0.3s ease; max-width: 116px; }

/* hover / active node lights up with its accent gradient + halo ring */
.wq__node:hover,
.wq__node.is-active {
  border-color: transparent;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #fff));
  box-shadow: 0 22px 50px color-mix(in srgb, var(--accent) 52%, transparent),
              0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent);
  z-index: 5;
}
.wq__node:hover .wq__node-ico,
.wq__node.is-active .wq__node-ico {
  background: rgba(255,255,255,0.24);
  color: #fff;
  transform: scale(1.1);
}
.wq__node:hover .wq__node-label,
.wq__node.is-active .wq__node-label { color: #fff; }

/* Focus: gently de-emphasise the other nodes WITHOUT going transparent
   (keeps them opaque so the spokes never show through) */
.wq__orbit:has(.wq__node:hover) .wq__node:not(:hover) {
  box-shadow: 0 6px 16px rgba(55,83,162,0.07);
  border-color: rgba(55,83,162,0.10);
}
.wq__orbit:has(.wq__node:hover) .wq__node:not(:hover) .wq__node-label { color: #8FB4D8; }
.wq__orbit:has(.wq__node:hover) .wq__node:not(:hover) .wq__node-ico { color: #8FB4D8; }

/* ═══ INDUSTRIES (light — breaks the News/Industries double-dark) ═══ */
.ind__title { font: 700 38px/1.2 'Noto Sans'; color: #3753A2; text-align: center; margin-bottom: 8px; }
.ind__sub   { font: 400 16px/1.7 'Noto Sans'; color: #758398; text-align: center; margin-bottom: 56px; }
/* Carousel — bigger portrait cards, prev/next arrows, dots */
.ind-carousel { position: relative; display: flex; align-items: center; gap: 10px; }
.ind-viewport { overflow: hidden; flex: 1; min-width: 0; }
.ind-track { display: flex; gap: 24px; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); will-change: transform; }
.ind-nav {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--q-line); color: var(--q-blue);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 28px rgba(11,28,52,0.12); transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.ind-nav svg { width: 22px; height: 22px; }
.ind-nav:hover { background: var(--q-tint); transform: translateY(-2px); }
.ind-nav.is-disabled { opacity: 0.35; pointer-events: none; }
.ind-dots { display: flex; justify-content: center; gap: 9px; margin-top: 34px; }
.ind-dots button {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(55,83,162,0.22); cursor: pointer; transition: background 0.25s ease, width 0.25s ease;
}
.ind-dots button.is-active { background: var(--q-blue); width: 26px; border-radius: 5px; }
/* Wider container for the verticals carousel so 4 cards read large */
#industries .container { max-width: 1480px; }
.ind-card {
  flex: 0 0 calc((100% - 72px) / 4);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 420px;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s;
}
.ind-card:hover { box-shadow: 0 24px 54px rgba(11,28,52,0.32); transform: translateY(-4px); }
.ind-card img {
  position: absolute; top: 0; left: 0;
  width: 100% !important; height: 420px !important;
  object-fit: cover;
  transition: transform 0.4s;
}
.ind-card:hover img { transform: scale(1.07); }
.ind-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,21,38,0.88) 0%, transparent 55%);
}
.ind-card__cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 22px; }
.ind-card__name { font: 800 20px/1.2 'Noto Sans'; color: #fff; letter-spacing: -0.01em; }
.ind-card__meta { font: 400 13.5px/1.4 'Noto Sans'; color: rgba(255,255,255,0.7); margin-top: 5px; }
.ind-card--more {
  background: linear-gradient(135deg, #2C4382, #3753A2);
}
.ind-card--more .inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  gap: 10px;
}
.ind-card--more .count { font: 600 11px/1 'Noto Sans'; color: rgba(255,255,255,0.55); }
.ind-card--more .label { font: 700 14px/1.3 'Noto Sans'; color: #fff; }
.ind-card--more .view {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font: 600 11px/1 'Noto Sans';
  padding: 9px 18px;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ind-card--more .view:hover { background: rgba(255,255,255,0.2); }

/* ═══ PERSONA ═══════════════════════════════════════════════ */
.persona__head { text-align: center; margin-bottom: 48px; }
.persona__title { font: 700 38px/1.2 'Noto Sans'; color: #3753A2; margin-top: 14px; }
.persona__tabs {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}
.persona__tab {
  font: 600 14px/1 'Noto Sans';
  padding: 12px 28px;
  border-radius: 100px;
  border: 1px solid rgba(55,83,162,0.2);
  background: #fff;
  color: #758398;
  cursor: pointer;
  transition: all 0.2s;
}
.persona__tab.is-active {
  border-color: #3753A2;
  background: #3753A2;
  color: #fff;
}
.persona__panel {
  background: #EEF2FB;
  border-radius: 20px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.persona__role {
  font: 700 11px/1 'Noto Sans';
  color: #3753A2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.persona__ptitle { font: 700 32px/1.2 'Noto Sans'; color: #3753A2; margin-bottom: 20px; }
.persona__desc { font: 400 16px/1.75 'Noto Sans'; color: #758398; margin-bottom: 32px; }
.persona__benefits { display: flex; flex-direction: column; gap: 14px; }
.persona__benefit { display: flex; align-items: flex-start; gap: 12px; }
.persona__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #3753A2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: #fff;
  font: 700 11px/1 'Noto Sans';
}
.persona__benefit span:last-child { font: 400 16px/1.65 'Noto Sans'; color: #758398; }
.persona__media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(55,83,162,0.15);
  background: #3753A2;
}
.persona__media img { width: 100%; object-fit: cover; min-height: 280px; }

/* ═══ PARTNERS (titled section + full-colour logo grid) ═════ */
.partners {
  background: #EEF2FB;
  padding: 96px 0;
  border-top: 1px solid rgba(55,83,162,0.07);
  border-bottom: 1px solid rgba(55,83,162,0.07);
}
/* single continuously-scrolling strip */
.partners__track-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 48px;
}
.partners__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
}
.partners__fade--l { left: 0;  background: linear-gradient(to right, #EEF2FB, transparent); }
.partners__fade--r { right: 0; background: linear-gradient(to left,  #EEF2FB, transparent); }
.partners__track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  padding: 8px 15px;
  animation: marquee 40s linear infinite;
}
.partners__track-wrap:hover .partners__track { animation-play-state: paused; }
.partner-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 0 32px;
  /* rounded white logo cards */
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(55,83,162,0.08);
}
.partner-logo img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.partner-logo:hover img { transform: scale(1.06); }

/* ═══ CONTACT CTA ═══════════════════════════════════════════ */
.contact {
  position: relative;
  padding: 96px 0 120px;
  overflow: hidden;
  /* White so it's distinct from the tinted Partners section above and the
     gradient footer below (Partners tint → Contact white → Footer gradient) */
  background: #fff;
}
/* opt-in light-tint variant for pages where a neighboring section is already
   white (e.g. About Us: Events white → Contact tint → Footer gradient) */
.contact--light { background: #EEF2FB; }
/* fade the grid overlay out toward the bottom so no lines hit the seam */
.contact .grid-overlay {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
}
.contact__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: center;
}
.contact__title { font: 700 44px/1.15 'Noto Sans'; color: var(--q-blue); margin: 24px 0 20px; }
.contact__lead  { font: 400 17px/1.75 'Noto Sans'; color: var(--q-steel); margin-bottom: 40px; }
.contact__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.contact__card {
  background: #fff;
  border: 1px solid var(--q-line);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(55,83,162,0.12);
}
/* brand-blue check icon on the (now white) card + gentle blink/pulse */
@keyframes q-tick-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.09); opacity: 0.55; } }
.contact__card svg {
  margin: 0 auto 18px;
  transform-origin: center;
  animation: q-tick-pulse 1.8s ease-in-out infinite;
}
.contact__card svg circle { stroke: rgba(55,83,162,0.25); }
.contact__card svg path { stroke: var(--q-blue); }
@media (prefers-reduced-motion: reduce) { .contact__card svg { animation: none; } }
.contact__card-title { font: 700 18px/1.3 'Noto Sans'; color: var(--q-blue); margin-bottom: 10px; }
.contact__card-desc  { font: 400 14px/1.65 'Noto Sans'; color: var(--q-steel); margin-bottom: 24px; }
.contact__metrics { display: flex; justify-content: center; gap: 24px; }
.contact__metric-num { font: 700 22px/1 'Noto Sans'; color: var(--q-blue); }
.contact__metric-label {
  font: 400 10px/1.4 'Noto Sans';
  color: var(--q-steel);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact__metric-divider { width: 1px; background: var(--q-line); }

/* ═══ FOOTER (merges visually with the Contact block above) ══ */
.footer {
  position: relative;
  /* QUEST Support Blue, deepened — brand blue footer. */
  background: linear-gradient(180deg, #3753A2 0%, #2C4382 100%);
  padding: 88px 0 0;
}
.footer__top {
  display: grid;
  grid-template-columns: 280px repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* social sits below the Contact link inside the "Connect with us" column */
.footer__links + .footer__social { margin-top: 18px; }
/* Logo kept in full colour on a light chip so it stays vivid on the dark footer */
.footer__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  /* White logo variant on the dark gradient (brand guideline) — no white box */
  background: transparent;
  padding: 0;
  border-radius: 0;
  transition: transform 0.3s ease;
}
.footer__brand:hover { transform: scale(1.04); }
.footer__logo { height: 42px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer__about { font: 400 15px/1.72 'Noto Sans'; color: rgba(255,255,255,0.45); margin-bottom: 28px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  transition: all 0.2s ease;
}
.footer__social a svg { width: 18px; height: 18px; }
.footer__social a:hover {
  background: rgba(55,83,162,0.3);
  color: #8FB4D8;
  border-color: rgba(55,83,162,0.4);
}
.footer__col-title {
  font: 700 12px/1 'Noto Sans';
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.footer__links { display: flex; flex-direction: column; gap: 13px; }
.footer__links a {
  font: 400 14px/1 'Noto Sans';
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__links a:hover { color: #8FB4D8; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}
.footer__copy { font: 400 13px/1 'Noto Sans'; color: rgba(255,255,255,0.25); }
.footer__legal { display: flex; gap: 24px; }
.footer__legal a {
  font: 400 13px/1 'Noto Sans';
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__legal a:hover { color: #8FB4D8; }

/* ═══ RESPONSIVE ════════════════════════════════════════════ */

/* Top contact bar adapts on smaller screens */
@media (max-width: 860px) {
  .topbar__inner { justify-content: center; padding: 0 24px; }
  .topbar__msg { display: none; }
}
@media (max-width: 520px) {
  .topbar__msg,
  .topbar__sep,
  .topbar__contact a[href^="mailto"] { display: none; }
}

/* Nav collapses to a hamburger + dropdown */
@media (max-width: 960px) {
  .nav { padding: 0 24px; }
  .nav__search { padding-left: 24px; padding-right: 24px; }
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px 16px 18px;
    background: #fff;
    border-bottom: 1px solid rgba(11,28,52,0.08);
    box-shadow: 0 18px 40px rgba(11,28,52,0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__link { padding: 13px 16px; font-size: 15.5px; }
  .nav__link::after { display: none; }
  .nav__link:hover, .nav__link.is-active { background: rgba(55,83,162,0.08); }

  /* Dropdowns collapse into inline accordions on mobile */
  .nav__item { flex-direction: column; align-items: stretch; }
  .nav__item.has-panel::after { display: none; }
  .nav__link--parent { justify-content: space-between; }
  .nav__panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 4px 12px;
    width: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .nav__item.is-open .nav__panel { max-height: 640px; }
  .nav__panel--mega { display: flex; flex-direction: column; gap: 0; width: auto; }
  .nav__mega-desc { display: none; }
  .nav__panel-link, .nav__mega-card { padding: 11px 14px; }
}

@media (max-width: 1080px) {
  .hero__line1, .hero__line2 { font-size: 44px; }
  .news__inner { grid-template-columns: 1fr; gap: 48px; }
  .news__title { min-height: 0; }
  .news__desc { min-height: 0; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .stat:nth-child(3) { border-right: none; }
  .why__inner { grid-template-columns: 1fr; gap: 40px; }
  .why__intro { position: static; }
  .svc__inner { grid-template-columns: 1fr; gap: 40px; }
  .wq__orbit { --r: 232px; width: 600px; height: 600px; }
  .wq__node { width: 124px; height: 124px; }
  .wq__node-ico { width: 46px; height: 46px; }
  .wq__node-ico svg { width: 26px; height: 26px; }
  .wq__node-label { font-size: 12.5px; }
  .wq__hub { width: 220px; height: 220px; }
  .wq__hub-title { font-size: 24px; }
  .ind-card { flex-basis: calc((100% - 24px) / 2); }
  .persona__panel { grid-template-columns: 1fr; gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .container,
  .hero__inner,
  .news__inner,
  .why__inner,
  .svc__inner,
  .contact__inner { padding-left: 24px; padding-right: 24px; }
  .svc__title { font-size: 30px; }
  .nav { padding: 0 20px; }
  .nav__cta { padding: 11px 18px; }
  .section { padding: 64px 0; }
  .hero__line1, .hero__line2 { font-size: 36px; }
  .section-title, .why__title { font-size: 30px; }
  .contact__title { font-size: 32px; }
  .products-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(odd) { border-right: 1px solid rgba(55,83,162,0.12); }
  .stat:nth-child(even) { border-right: none; }
  .ind-card { flex-basis: 100%; height: 380px; }
  .ind-card img { height: 380px !important; }
  .ind-nav { width: 40px; height: 40px; }

  /* Infographic collapses to a clean vertical list on small screens */
  .wq { padding-left: 24px; padding-right: 24px; }
  .wq__orbit { width: 100%; height: auto; display: flex; flex-direction: column; gap: 10px; }
  .wq__pulse, .wq__spoke { display: none; }
  .wq__orbit::before, .wq__orbit::after { display: none; }
  .wq__hub,
  .wq__orbit.is-in .wq__hub {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    width: 100%; height: auto;
    border-radius: 16px;
    margin-bottom: 10px;
    padding: 26px;
  }
  .wq__hub-desc { min-height: 0; }
  .wq__node {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100%; height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    border-radius: 14px;
    padding: 14px 18px;
    text-align: left;
    transition-delay: 0ms !important;
  }
  .wq__node-ico { margin-top: 0; flex-shrink: 0; }
  .wq__node-label { font-size: 14px; max-width: none; }
  .persona__tabs { flex-wrap: wrap; }
  .persona__panel { padding: 32px 24px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
}

/* ═══ RTL (Arabic) ══════════════════════════════════════════ */
/* Most layout flips automatically via dir=rtl; these fix the
   physical (left/right) offsets and directional glyphs. */
[dir="rtl"] body,
[dir="rtl"] { text-align: right; }

/* Arabic doesn't use letter-spacing or uppercasing */
[dir="rtl"] * { letter-spacing: normal !important; text-transform: none !important; }

/* directional arrows mirror */
[dir="rtl"] .nav__cta svg { transform: scaleX(-1); }
[dir="rtl"] .nav__cta:hover svg { transform: scaleX(-1) translateX(3px); }

/* news floating stat badges: swap sides */
[dir="rtl"] .news__media { padding-right: 0; padding-left: 16px; }
[dir="rtl"] .news__stat--int { left: auto; right: -18px; }
[dir="rtl"] .news__stat--exp { right: auto; left: 0; }

/* logo scales from the right edge in RTL */
[dir="rtl"] .nav__logo { transform-origin: right center; }

/* infographic labels stay centred; hero copy aligns right */
[dir="rtl"] .wq__node-label { text-align: center; }
[dir="rtl"] .hero__copy { text-align: right; }

/* ═══ QUEST Elements (WordPress) — composable atoms + responsive ═══ */

/* Section Intro grouping (eyebrow pill + title + subtext + optional CTA/image) */
.quest-intro .pill { margin-bottom: 18px; }
.quest-intro .why__title .accent,
.why__title .accent { color: #3753A2; }
.quest-intro .btn { margin-top: 8px; }
.quest-intro__media { margin-top: 28px; }
.quest-intro--center { text-align: center; }
.quest-intro--center .pill { justify-content: center; }

/* Dark tone: intro placed on an image / the brand gradient (white text) */
.quest-intro--dark .why__title { color: #fff; }
.quest-intro--dark .why__lead { color: rgba(255,255,255,0.78); }
.quest-intro--dark .why__title .accent { color: #8FB4D8; }

/* ── QUEST Cards grid (reasons / certifications / generic cards) ── */
.qcards { display: grid; gap: 24px; }
.qcards--1 { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
.qcards--2 { grid-template-columns: repeat(2, 1fr); }
.qcards--3 { grid-template-columns: repeat(3, 1fr); }
.qcards--4 { grid-template-columns: repeat(4, 1fr); }
.qcard {
  background: #fff;
  border: 1px solid var(--q-line);
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: 0 10px 30px rgba(55,83,162,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.qcard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(55,83,162,0.13); }
.qcard__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  background: rgba(55,83,162,0.08);
  border: 1px solid rgba(55,83,162,0.18);
  font: 700 13px/1 'Noto Sans';
  color: var(--q-blue);
  margin-bottom: 16px;
}
.qcard__title { font: 700 19px/1.3 'Noto Sans'; color: var(--q-blue); margin-bottom: 10px; }
.qcard__desc { font: 400 14.5px/1.7 'Noto Sans'; color: var(--q-steel); }
.qcard__hl {
  margin-top: 16px;
  background: var(--q-tint);
  border-left: 3px solid var(--q-blue);
  border-radius: 8px;
  padding: 13px 16px;
  font: 400 13.5px/1.65 'Noto Sans';
  color: #3D4E6B;
}
[dir="rtl"] .qcard__hl { border-left: none; border-right: 3px solid var(--q-blue); }
.qcard__hl-label { font-weight: 700; color: var(--q-blue); margin-right: 6px; }
@media (max-width: 1024px) { .qcards--3, .qcards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .qcards--2, .qcards--3, .qcards--4 { grid-template-columns: 1fr; } }

/* card extras: icon disc, top image, meta row */
.qcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.qcard__body { padding: 30px 28px; display: flex; flex-direction: column; flex: 1; }
.qcard__hl { margin-top: auto; }
.qcard__body > .qcard__hl { margin-top: 16px; }
.qcard__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.qcard__meta .qcard__badge { margin-bottom: 0; }
.qcard__icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--q-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(55,83,162,0.28);
  flex-shrink: 0;
}
.qcard__icon svg { width: 24px; height: 24px; }
.qcard__img { aspect-ratio: 16/7; overflow: hidden; }
.qcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.qcard:hover .qcard__img img { transform: scale(1.05); }

/* glass cards for dark / gradient bands */
.qcards--glass .qcard {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.qcards--glass .qcard:hover { box-shadow: 0 18px 44px rgba(4,12,40,0.25); }
.qcards--glass .qcard__title { color: #fff; }
.qcards--glass .qcard__desc { color: rgba(255,255,255,0.78); }
.qcards--glass .qcard__badge { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.qcards--glass .qcard__icon { background: rgba(255,255,255,0.14); box-shadow: none; }
.qcards--glass .qcard__hl { background: rgba(255,255,255,0.08); border-left-color: #8FB4D8; color: rgba(255,255,255,0.85); }
.qcards--glass .qcard__hl-label { color: #8FB4D8; }

/* card CTA button (per-card "Read more") */
.qcard__cta { margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 700 14px/1 'Noto Sans'; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.qcard__cta--primary { background: var(--q-blue); color: #fff; padding: 12px 20px; border-radius: 9px; }
.qcard__cta--primary:hover { background: var(--q-blue-700); transform: translateX(2px); }
.qcard__cta--ghost { background: transparent; border: 1.5px solid rgba(0,0,0,0.14); color: var(--q-blue); padding: 11px 20px; border-radius: 999px; }
.qcard__cta--ghost:hover { border-color: var(--q-blue); background: rgba(55,83,162,0.06); transform: translateX(2px); }
.qcards--glass .qcard__cta--ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
.qcards--glass .qcard__cta--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.qcard__body > .qcard__cta { margin-top: auto; }
.qcard__body > .qcard__hl + .qcard__cta { margin-top: 16px; }

/* reveal-toggle + footer CTA below a grid */
.qcard--hidden { display: none; }
.qcards__footer { text-align: center; margin-top: 36px; }
.qcards__reveal { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 'Noto Sans'; color: var(--q-blue); padding: 6px 2px; }
.qcards__reveal:hover { color: var(--q-blue-700); }
.qcards__reveal svg { transition: transform 0.2s ease; }
.qcards__reveal.is-open svg { transform: rotate(90deg); }
.qcards__footerbtn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px/1 'Noto Sans'; }
.qcards__footerbtn--link { color: var(--q-blue); }
.qcards__footerbtn--link:hover { color: var(--q-blue-700); }
.qcards__footerbtn--gradient { background: var(--q-gradient); color: #fff; padding: 16px 32px; border-radius: 999px; box-shadow: 0 12px 28px rgba(55,83,162,0.32); }
.qcards__footerbtn--gradient:hover { box-shadow: 0 16px 34px rgba(55,83,162,0.4); transform: translateY(-2px); }

/* overlap: pull the grid up so it floats over the dark/gradient band above it */
.qcards-wrap--overlap { margin-top: -150px; position: relative; z-index: 3; }
@media (max-width: 1024px) { .qcards-wrap--overlap { margin-top: -100px; } }
@media (max-width: 768px)  { .qcards-wrap--overlap { margin-top: -56px; } }

/* ── QUEST Process Flow (icon steps + connecting arrows) ── */
.qflow { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 6px 2px; margin-top: 56px; }
.qflow__step { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 152px; text-align: center; position: relative; }
.qflow__icon { width: 68px; height: 68px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s ease, background 0.25s ease; }
.qflow__step:hover .qflow__icon { transform: translateY(-4px); }
.qflow__icon svg { width: 28px; height: 28px; }
.qflow__label { font: 600 14.5px/1.4 'Noto Sans'; }
.qflow__arrow { flex-shrink: 0; width: 32px; height: 68px; display: flex; align-items: center; justify-content: center; margin-top: 33px; }
@media (max-width: 900px) {
  .qflow { flex-direction: column; align-items: center; margin-top: 40px; }
  .qflow__step { width: 220px; }
  .qflow__arrow { width: 68px; height: 32px; margin-top: 0; transform: rotate(90deg); }
}

/* dark bg (gradient/near-black sections) */
.qflow--dark .qflow__num { color: rgba(255,255,255,0.4); font: 800 13px/1 'Noto Sans'; letter-spacing: 0.08em; }
.qflow--dark .qflow__icon { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: #8FB4D8; box-shadow: 0 0 0 6px rgba(255,255,255,0.04); }
.qflow--dark .qflow__step:hover .qflow__icon { background: rgba(255,255,255,0.14); }
.qflow--dark .qflow__label { color: #fff; }
.qflow--dark .qflow__arrow { color: rgba(255,255,255,0.3); }

/* light bg — simple, modern: gradient icon discs, no card/border chrome */
.qflow--light .qflow__num { color: rgba(55,83,162,0.4); font: 800 13px/1 'Noto Sans'; letter-spacing: 0.08em; }
.qflow--light .qflow__icon { background: var(--q-gradient); color: #fff; box-shadow: 0 10px 22px rgba(55,83,162,0.24); }
.qflow--light .qflow__step:hover .qflow__icon { box-shadow: 0 14px 28px rgba(55,83,162,0.32); }
.qflow--light .qflow__label { color: var(--q-blue); }
.qflow--light .qflow__arrow { color: var(--q-line); }

/* ── QUEST Scroll Tabs (pinned scroll storytelling, Genetec-style) ──
   The wrapper is tall (one viewport per tab); the pin stays stuck while
   scrolling through it and quest.js advances tabs/panels/backgrounds. */
.qstabs {
  height: calc(100vh + (var(--steps, 4) - 1) * 55vh);
  /* dark base so the section never flashes white while entering/leaving the
     pin or during background crossfades — blends with dark page heroes */
  background: linear-gradient(118deg, #030B20 0%, #0A1B42 100%);
}
.qstabs__pin {
  position: sticky;
  top: 84px;                          /* below the sticky nav */
  height: calc(100vh - 84px);
  overflow: hidden;
}
.qstabs__bgs { position: absolute; inset: 0; }
.qstabs__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0A1B42;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.qstabs__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* dark brand scrim so bright photos keep contrast and consistency */
  background:
    linear-gradient(90deg, rgba(3,10,32,0.78) 0%, rgba(3,10,32,0.45) 55%, rgba(6,20,60,0.55) 100%);
}
.qstabs__bg.is-active { opacity: 1; }
/* Inverted-L card (Genetec-style): a WIDE white tab strip on top, with a
   large content panel hanging below its left side. Centred, square corners. */
.qstabs__pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.qstabs__card {
  position: relative;
  z-index: 2;
  width: min(1320px, 94vw);
  margin: 0 auto;
}
.qstabs__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 40px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(3,10,32,0.45);
  /* no visible scrollbar — the strip auto-centres the active tab */
  scrollbar-width: none;
}
.qstabs__tabs::-webkit-scrollbar { display: none; }
.qstabs__tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 24px 18px 21px;
  font: 600 15.5px/1.2 'Noto Sans';
  color: var(--q-steel);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.qstabs__tab-num { font: 700 12px/1 'Noto Sans'; color: var(--q-blue); opacity: 0.6; }
.qstabs__tab:hover { color: var(--q-blue); }
.qstabs__tab.is-active { color: var(--q-blue); border-bottom-color: var(--q-blue); }
.qstabs__body {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(3,10,32,0.45);
}
.qstabs__panels {
  background: #fff;
  width: min(640px, 100%);
  flex-shrink: 0;
  /* FIXED height so the card never jumps when tab content lengths differ */
  height: 500px;
  overflow-y: auto;
  padding: 48px 80px 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Crisp per-tab image filling the right side of the card (never empty) */
.qstabs__sides { position: relative; flex: 1; min-width: 0; background: #0A1B42; }
.qstabs__side {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* subjects are composed on the right, so anchor the crop right on desktop */
  background-position: right center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.qstabs__side.is-active { opacity: 1; }
.qstabs__panel { display: none; }
.qstabs__panel.is-active { display: block; animation: qstabs-fade 0.45s ease; }
@keyframes qstabs-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qstabs__panel.is-active { animation: none; } }
.qstabs__title { font: 700 34px/1.22 'Noto Sans'; color: var(--q-blue); margin-bottom: 18px; }
.qstabs__desc { font: 400 16.5px/1.8 'Noto Sans'; color: #3D4E6B; }
.qstabs__panel .qcard__hl { margin-top: 22px; font-size: 14.5px; line-height: 1.7; padding: 16px 20px; }

/* Mobile / small screens: no pinning — stacked simple cards, all visible */
@media (max-width: 900px) {
  .qstabs { height: auto; }
  .qstabs__pin { position: static; height: auto; overflow: visible; }
  .qstabs__bgs, .qstabs__tabs, .qstabs__sides { display: none; }
  .qstabs__body { display: block; border-radius: 0; overflow: visible; box-shadow: none; }
  .qstabs__card {
    width: 100%;
    margin: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }
  .qstabs__panels {
    padding: 0;
    background: transparent;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .qstabs__panel {
    display: block !important;
    animation: none !important;
    background: #fff;
    border: 1px solid var(--q-line);
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 10px 30px rgba(55,83,162,0.07);
  }
}

/* ── QUEST Staggered Cards (Vision/Mission style, on a dark/gradient bg) ──
   White floating cards, image aligned to one side, alternating left/right
   position down the section for visual rhythm. */
.qstagger { display: flex; flex-direction: column; gap: 44px; }
.qstagger__card {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 760px;
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 28px 70px rgba(3,10,32,0.35);
}
.qstagger__card--left  { align-self: flex-start; }
.qstagger__card--right { align-self: flex-end; }
[dir="rtl"] .qstagger__card--left  { align-self: flex-end; }
[dir="rtl"] .qstagger__card--right { align-self: flex-start; }
.qstagger__body { flex: 1; min-width: 0; padding: 12px 8px 12px 16px; }
[dir="rtl"] .qstagger__body { padding: 12px 16px 12px 8px; }
.qstagger__title { font: 700 26px/1.3 'Noto Sans'; color: var(--q-blue); margin-bottom: 12px; }
.qstagger__desc { font: 400 15.5px/1.75 'Noto Sans'; color: var(--q-steel); }
.qstagger__img {
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
}
.qstagger__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .qstagger { gap: 28px; }
  .qstagger__card,
  .qstagger__card--left,
  .qstagger__card--right,
  [dir="rtl"] .qstagger__card--left,
  [dir="rtl"] .qstagger__card--right {
    align-self: stretch;
    max-width: none;
    flex-direction: column-reverse;
    text-align: center;
    padding: 32px 28px;
  }
  .qstagger__img { width: 100%; height: 180px; }
}

/* ── QUEST Spotlight Carousel (Genetec-style, fixed-slot) ───────
   5 permanent slots (2 thumb, 1 big, 2 thumb) — sizes/positions NEVER
   change. Navigating only cross-fades the CONTENT inside each slot
   left/right (quest.js), so the layout never resizes or reflows. Full
   width by design: flex-grow ratios fill whatever container it's in. */
.qspot__row {
  display: flex;
  align-items: center;
  gap: 32px;                        /* breathing room between slots */
  width: 100%;
  padding: 0 clamp(16px, 4vw, 56px);
}
.qspot__slot {
  position: relative;
  overflow: hidden;                 /* clips the sliding faces to the slot bounds */
  min-width: 0;
  background: #1E222A;              /* opaque — nothing ever shows through mid-slide */
  box-shadow: 0 10px 30px rgba(3,10,32,0.16);
}
.qspot__slot--thumb { flex: 1 1 0; height: 300px; }
.qspot__slot--big   { flex: 2.7 1 0; height: 560px; box-shadow: 0 28px 64px rgba(3,10,32,0.32); }

/* The sliding content layer. Default = at rest (translateX(0), no transition).
   quest.js clones this element to run a true edge-to-edge slide: the old
   face translates fully off (±100%) while the new face translates fully in
   from the opposite side, simultaneously — they tile the slot with zero gap
   throughout, so no background ever shows during the animation. */
.qspot__slotinner {
  position: absolute;
  inset: 0;
  transform: translateX(0);
}

.qspot__thumb {
  position: relative;
  width: 100%;
  height: 100%;
  background: #1E222A center/cover no-repeat;
}
.qspot__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(4,10,32,0.9) 100%);
}
.qspot__thumbcap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
  font: 700 15px/1.3 'Noto Sans';
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.qspot__spot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 64px;
  background: linear-gradient(150deg, #3753A2 0%, #2C4382 55%, #1e2f63 100%);
}
.qspot__spot-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: #8FB4D8;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.qspot__spot-icon svg { width: 24px; height: 24px; }
.qspot__spot-title { font: 700 30px/1.35 'Noto Sans'; color: #fff; margin-bottom: 16px; }
.qspot__spot-tagline { font: 700 15px/1.5 'Noto Sans'; color: #8FB4D8; margin-bottom: 16px; }
.qspot__spot-desc { font: 400 16px/1.85 'Noto Sans'; color: rgba(255,255,255,0.78); }
.qspot__spot-caps { font: 400 14px/1.75 'Noto Sans'; color: rgba(255,255,255,0.6); margin-top: 26px; }
.qspot__spot-caps strong { color: rgba(255,255,255,0.88); }

/* Nav row: small inline chevrons flanking the dots, below the carousel —
   not floating circles on the viewport edges. */
.qspot__navrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.qspot__nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--q-line);
  background: transparent;
  color: var(--q-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.qspot__nav svg { width: 16px; height: 16px; }
.qspot__nav:hover { border-color: var(--q-blue); color: var(--q-blue); }
[dir="rtl"] .qspot__nav { transform: scaleX(-1); }

.qspot__dots { display: flex; align-items: center; gap: 8px; }
.qspot__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--q-line);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}
.qspot__dot.is-active { width: 22px; border-radius: 4px; background: var(--q-blue); }

@media (max-width: 900px) {
  .qspot__row { flex-wrap: nowrap; overflow: hidden; }
  .qspot__slot--thumb { display: none; }
  .qspot__slot--big { flex: 1 1 100%; height: auto; min-height: 420px; }
  .qspot__slot--big .qspot__spot { position: static; padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .qspot__slotinner { transition: none; }
}

/* ── Dark page hero with glowing light-streak (WinGuard-style) ──
   Apply by adding the class `qhero-dark` to an Elementor SECTION
   (Advanced → CSS Classes). Pure CSS art — no image needed. */
.qhero-dark {
  position: relative;
  overflow: hidden;
  /* QUEST brand gradient (BRAND.md) energised with luminous colour blooms
     that slowly breathe — vivid, not flat. */
  background:
    radial-gradient(ellipse 60% 65% at 16% 18%, rgba(96,214,255,0.20) 0%, transparent 62%),
    radial-gradient(ellipse 65% 75% at 88% 78%, rgba(110,110,255,0.18) 0%, transparent 66%),
    radial-gradient(ellipse 80% 60% at 55% 108%, rgba(4,10,40,0.28) 0%, transparent 68%),
    linear-gradient(135deg, #348CAC 0%, #3B3D98 100%);
  background-size: 190% 190%, 190% 190%, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 100%, 0 0;
  animation: qhero-breathe 16s ease-in-out infinite alternate;
}
@keyframes qhero-breathe {
  0%   { background-position: 0% 0%,   100% 100%, 50% 100%, 0 0; }
  100% { background-position: 55% 45%, 45% 55%,  50% 100%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .qhero-dark { animation: none; } }
.qhero-dark::before,
.qhero-dark::after {
  content: "";
  position: absolute;
  top: -84%;
  left: -30%;
  width: 190%;
  height: 165%;
  border-radius: 50%;
  transform: rotate(-6deg);
  pointer-events: none;
}
/* crisp neon line */
.qhero-dark::before {
  border-bottom: 3px solid rgba(140,210,255,0.95);
  filter: blur(0.5px)
          drop-shadow(0 0 16px rgba(64,160,240,0.95))
          drop-shadow(0 0 55px rgba(52,140,172,0.6));
}
/* wide soft bloom under the line */
.qhero-dark::after {
  border-bottom: 16px solid rgba(64,160,240,0.30);
  filter: blur(28px);
}
.qhero-dark > .elementor-container { position: relative; z-index: 2; }

/* Hero FX layer (injected by quest.js): circuit lines with glowing dots
   travelling down — the brand-cover motif — plus mouse parallax. */
.qhero-fx {
  position: absolute;
  inset: -4% -2%;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.4s ease-out;
  will-change: transform;
}
.qhero-fx__line {
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.16) 22%, rgba(255,255,255,0.16) 78%, transparent 100%);
}
.qhero-fx__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #A9D6FF;
  box-shadow: 0 0 10px 2px rgba(120,190,255,0.75);
  opacity: 0;
  animation-name: qhero-dot;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes qhero-dot {
  0%   { top: 0;    opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
/* the scroll cue reuses the homepage capsule (.hero__scroll) */
.qhero-dark .hero__scroll { z-index: 3; }

/* Header type matches the homepage hero scale (800/56, shadowed) */
.qhero-dark .quest-intro .why__title {
  font: 800 56px/1.12 'Noto Sans';
  color: #fff;
  text-shadow: 0 2px 24px rgba(2,8,32,0.45);
  margin: 24px 0 8px;
}
/* accent word breaks onto its own line — same white as line 1 but softened,
   so hierarchy comes from opacity/weight, not a color that fights the
   gradient's own blues (avoids both the washed-out and the muddy-dark traps) */
.qhero-dark .quest-intro .why__title .accent {
  display: block;
  color: rgba(255,255,255,0.7);
}
.qhero-dark .quest-intro .why__lead {
  font: 400 18px/1.75 'Noto Sans';
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  text-shadow: 0 1px 14px rgba(2,8,32,0.35);
}
.qhero-dark .quest-intro .btn { margin-top: 24px; }
@media (max-width: 1024px) { .qhero-dark .quest-intro .why__title { font-size: 44px; } }
@media (max-width: 600px)  { .qhero-dark .quest-intro .why__title { font-size: 36px; } }

/* About Us header — same 800/56 hero type scale as the homepage hero and
   the Why QUEST header, without pulling in the qhero-dark circuit-line bg
   (this section already has its own video background). */
.about-hero-title .why__title {
  font: 800 56px/1.12 'Noto Sans';
  color: #fff;
  text-shadow: 0 2px 24px rgba(2,8,32,0.45);
}
@media (max-width: 1024px) { .about-hero-title .why__title { font-size: 44px; } }
@media (max-width: 600px)  { .about-hero-title .why__title { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .qhero-fx__dot { animation: none; opacity: 0.6; top: 30%; }
}

/* ── QUEST Page Hero (reusable inner/hub-page header) ──────────
   A self-contained hero block (widget, not a section). The gradient variant
   also carries `.qhero-dark`, so the circuit-line FX + parallax inject into it
   automatically. Image/video grounds cover the block behind a dark scrim. */
.qphero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  background-size: cover;
  background-position: center;
}
.qphero--full    { min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); }
.qphero--tall    { min-height: 60vh; padding: 96px 0; }
.qphero--compact { min-height: 38vh; padding: 72px 0; }
/* image/video grounds have their own dark scrim, so no boxed padding clash */
.qphero--full.qphero--gradient { padding: 72px 0; }

.qphero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.qphero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,14,40,0.55) 0%, rgba(6,14,40,0.35) 45%, rgba(6,14,40,0.62) 100%);
}
.qphero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
}
.qphero--center .qphero__inner { text-align: center; }
.qphero--center .qphero__cta { justify-content: center; }
.qphero--center .qphero__lead { margin-left: auto; margin-right: auto; }

.qphero__title {
  font: 800 56px/1.12 'Noto Sans';
  color: var(--q-blue);
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}
.qphero__subtitle {
  font: 600 21px/1.4 'Noto Sans';
  color: var(--q-blue);
  margin: 0 0 12px;
}
.qphero__lead {
  font: 400 18px/1.75 'Noto Sans';
  color: var(--q-steel);
  max-width: 620px;
  margin: 0;
}
.qphero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.qphero__btn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.qphero__btn svg { flex-shrink: 0; transition: transform 0.25s ease; }
.qphero__btn:hover svg { transform: translateX(3px); }
/* ghost styles carry no arrow shift emphasis — keep the arrow subtle */
.qphero__btn.btn--ghost svg, .qphero__btn.btn--ghost-light svg { opacity: 0.8; }
/* No scroll-down cue on inner/hub page heroes (homepage-only motif). */
.qphero .hero__scroll { display: none !important; }
/* Split hero: content left + video card right */
.qphero--split .qphero__inner { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 48px; align-items: center; }
.qphero__media { position: relative; }
.qphero__media-vid { display: block; width: 100%; height: auto; background: transparent; }
@media (max-width: 900px) { .qphero--split .qphero__inner { grid-template-columns: 1fr; gap: 30px; } }

/* Light text on dark/gradient/image grounds */
.qphero--dark .qphero__title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(2,8,32,0.45);
}
.qphero--dark .qphero__title .accent {
  display: block;
  color: rgba(255,255,255,0.7);
}
.qphero--dark .qphero__subtitle {
  color: #cfe0ff;
  text-shadow: 0 1px 14px rgba(2,8,32,0.35);
}
.qphero--dark .qphero__lead {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 14px rgba(2,8,32,0.35);
}
/* Light-ground variant (on_dark off): accent uses brand blue */
.qphero:not(.qphero--dark) .qphero__title .accent { display: block; color: var(--q-blue); }

@media (max-width: 1024px) { .qphero__title { font-size: 44px; } }
@media (max-width: 768px)  { .qphero__inner { padding: 0 24px; } }
@media (max-width: 600px)  {
  .qphero__title { font-size: 34px; }
  .qphero__lead { font-size: 16px; }
  .qphero--tall { min-height: 52vh; padding: 72px 0; }
}

/* ── Contact page (details + message form) ─────────────────── */
.qcontact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.qcontact__details { display: flex; flex-direction: column; gap: 22px; }
.qcontact__lead { font: 400 17px/1.7 'Noto Sans'; color: var(--q-steel); margin: 0 0 6px; max-width: 460px; }
.qcontact__row { display: flex; gap: 14px; align-items: flex-start; }
.qcontact__ico {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; background: var(--q-tint); color: var(--q-blue);
  display: flex; align-items: center; justify-content: center;
}
.qcontact__ico svg { width: 20px; height: 20px; }
.qcontact__k { font: 600 12px/1 'Noto Sans'; color: var(--q-steel); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 5px; }
.qcontact__v { font: 600 16px/1.5 'Noto Sans'; color: var(--q-ink); }
.qcontact__v a { color: var(--q-blue); text-decoration: none; }
.qcontact__v a:hover { text-decoration: underline; }

.qform {
  background: #fff; border: 1px solid var(--q-line); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(55,83,162,0.10); padding: 28px;
}
.qform__title { font: 700 21px/1.2 'Noto Sans'; color: var(--q-blue); margin: 0 0 18px; }
.qform__row { margin-bottom: 16px; }
.qform label { display: block; font: 600 13px/1 'Noto Sans'; color: var(--q-steel); margin-bottom: 7px; }
.qform input, .qform textarea, .qform select {
  width: 100%; font: 400 15px/1.5 'Noto Sans'; color: var(--q-ink);
  background: #fff; border: 1px solid var(--q-line); border-radius: 10px;
  padding: 12px 14px; outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.qform input:focus, .qform textarea:focus, .qform select:focus {
  border-color: var(--q-blue); box-shadow: 0 0 0 3px rgba(55,83,162,0.12);
}
.qform textarea { min-height: 118px; resize: vertical; }
.qform .btn { margin-top: 4px; }
.qform__note { font: 400 12.5px/1.55 'Noto Sans'; color: var(--q-steel); margin-top: 12px; }
/* Contact map */
.qmap { margin-top: 30px; border-radius: 16px; overflow: hidden; border: 1px solid var(--q-line); box-shadow: 0 24px 64px rgba(55,83,162,0.10); }
.qmap iframe { display: block; width: 100%; height: 380px; border: 0; }

/* ═══════════════════ CONTACT PAGE (.qx-*) — bespoke QUEST theme ═══════════════════ */
.qx { font-family: var(--q-font); color: var(--q-ink); background: #fff; }
.qx * { box-sizing: border-box; }
.qx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* Quick-contact method cards — sit below the hero with breathing room */
.qx-methods { position: relative; z-index: 5; margin-top: 56px; }
.qx-methods__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.qx-method { background: #fff; border: 1px solid var(--q-line); border-radius: 18px; padding: 26px 24px; box-shadow: 0 20px 50px rgba(11,28,52,.10); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; text-decoration: none; display: block; }
.qx-method:hover { transform: translateY(-6px); box-shadow: 0 30px 62px rgba(44,67,130,.18); }
.qx-method__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--q-gradient); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 10px 22px rgba(55,83,162,.28); }
.qx-method__ic svg { width: 26px; height: 26px; }
.qx-method__k { display: block; font: 700 11px/1 var(--q-font); text-transform: uppercase; letter-spacing: .09em; color: var(--q-steel); margin-bottom: 8px; }
.qx-method__v { display: block; font: 800 16px/1.35 var(--q-font); color: var(--q-ink); letter-spacing: -.01em; word-break: break-word; }
.qx-method__s { display: block; font: 400 13px/1.5 var(--q-font); color: var(--q-steel); margin-top: 4px; }

/* Main split — info panel (left) + form (right) */
.qx-main { padding: 64px 0; }
.qx-main__grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 40px; align-items: stretch; }

.qx-info { background: linear-gradient(150deg,#0e2350 0%,#12295c 55%,#2C4382 100%); color: #fff; border-radius: 24px; padding: 44px 40px; position: relative; overflow: hidden; box-shadow: 0 30px 70px rgba(11,28,52,.28); }
.qx-info > * { position: relative; z-index: 1; }
.qx-info::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(96,160,240,.26), transparent 70%); z-index: 0; }
.qx-info__eyebrow { display: inline-block; background: rgba(255,255,255,.1); border: 1px solid rgba(140,180,255,.28); color: #8FB4D8; padding: 7px 14px; border-radius: 100px; font: 700 11px/1 var(--q-font); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.qx-info h2 { font: 800 27px/1.25 var(--q-font); letter-spacing: -.02em; margin: 0 0 14px; }
.qx-info__lead { font: 400 15px/1.7 var(--q-font); color: rgba(210,224,255,.82); margin: 0 0 30px; max-width: 380px; }
.qx-info__rows { display: flex; flex-direction: column; gap: 20px; margin-bottom: 28px; }
.qx-info__row { display: flex; gap: 14px; align-items: flex-start; }
.qx-info__ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(140,180,255,.2); color: #9fc4ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qx-info__ic svg { width: 20px; height: 20px; }
.qx-info__k { font: 600 11px/1 var(--q-font); text-transform: uppercase; letter-spacing: .07em; color: #8FB4D8; margin-bottom: 5px; }
.qx-info__v { font: 600 15px/1.45 var(--q-font); color: #fff; }
.qx-info__v a { color: #fff; text-decoration: none; }
.qx-info__v a:hover { text-decoration: underline; }
.qx-info__t { font: 700 15px/1.35 var(--q-font); color: #fff; margin-bottom: 3px; }
.qx-info__d { font: 400 13px/1.6 var(--q-font); color: rgba(210,224,255,.72); }
.qx-info__socials { display: flex; gap: 12px; margin-bottom: 24px; }
.qx-info__socials a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(140,180,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; }
.qx-info__socials a:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.qx-info__socials svg { width: 19px; height: 19px; }
.qx-info__badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(88,192,168,.13); border: 1px solid rgba(88,192,168,.42); color: #8fe0c8; font: 600 12.5px/1.3 var(--q-font); padding: 10px 15px; border-radius: 100px; }
.qx-info__badge svg { width: 16px; height: 16px; }

.qx-formcard { background: #fff; border: 1px solid var(--q-line); border-radius: 24px; padding: 40px; box-shadow: 0 24px 60px rgba(11,28,52,.10); }
.qx-formcard__title { font: 800 22px/1.2 var(--q-font); color: var(--q-blue); letter-spacing: -.01em; margin: 0 0 6px; }
.qx-formcard__sub { font: 400 14px/1.6 var(--q-font); color: var(--q-steel); margin: 0 0 24px; }
.qx-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qx-form__row { margin-bottom: 16px; }
.qx-form__row--full { grid-column: 1 / -1; }
.qx-form label { display: block; font: 600 12.5px/1 var(--q-font); color: var(--q-steel); margin-bottom: 7px; }
.qx-form input, .qx-form select, .qx-form textarea { width: 100%; font: 400 14.5px/1.4 var(--q-font); color: var(--q-ink); background: #f8faff; border: 1px solid var(--q-line); border-radius: 11px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.qx-form input:focus, .qx-form select:focus, .qx-form textarea:focus { outline: none; border-color: var(--q-blue); background: #fff; box-shadow: 0 0 0 3px rgba(55,83,162,.12); }
.qx-form textarea { min-height: 120px; resize: vertical; }
.qx-form__btn { margin-top: 6px; width: 100%; justify-content: center; }
.qx-form__note { font: 400 12.5px/1.55 var(--q-font); color: var(--q-steel); margin-top: 14px; background: var(--q-tint); border-radius: 10px; padding: 11px 14px; }
.qx-form__note a { color: var(--q-blue); }

/* Map band */
.qx-mapsec { padding: 0 0 84px; }
.qx-map { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--q-line); box-shadow: 0 24px 64px rgba(55,83,162,.12); }
.qx-map iframe { display: block; width: 100%; height: 440px; border: 0; }
.qx-map__card { position: absolute; left: 34px; bottom: 34px; background: #fff; border-radius: 16px; padding: 22px 24px; box-shadow: 0 20px 50px rgba(11,28,52,.2); max-width: 300px; }
.qx-map__card h3 { font: 800 17px/1.3 var(--q-font); color: var(--q-blue); margin: 0 0 6px; }
.qx-map__card p { font: 400 13.5px/1.6 var(--q-font); color: var(--q-steel); margin: 0; }

@media (max-width: 1024px) {
  .qx-methods__grid { grid-template-columns: repeat(2,1fr); }
  .qx-main__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .qx-wrap { padding: 0 22px; }
  .qx-methods { margin-top: -44px; }
  .qx-methods__grid { grid-template-columns: 1fr; }
  .qx-form__grid { grid-template-columns: 1fr; }
  .qx-info, .qx-formcard { padding: 30px 24px; }
  .qx-map__card { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 900px) { .qcontact { grid-template-columns: 1fr; gap: 40px; } .qmap iframe { height: 300px; } }

/* Anchor sections clear the 84px fixed nav when jumped to via #hash. */
.elementor-section[id] { scroll-margin-top: 100px; }

/* ── Legal / long-form pages (Privacy, Terms, Cookies) ─────── */
.qlegal { max-width: 860px; margin: 0 auto; }
.qlegal__meta { font: 500 14px/1.6 'Noto Sans'; color: var(--q-steel); margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--q-line); }
.qlegal h2 { font: 700 22px/1.3 'Noto Sans'; color: var(--q-blue); margin: 36px 0 12px; }
.qlegal h3 { font: 700 17px/1.4 'Noto Sans'; color: var(--q-ink); margin: 22px 0 8px; }
.qlegal p { font: 400 15.5px/1.75 'Noto Sans'; color: var(--q-ink); margin: 0 0 14px; }
.qlegal ul { margin: 0 0 16px; padding-left: 20px; }
.qlegal li { font: 400 15.5px/1.7 'Noto Sans'; color: var(--q-ink); margin: 0 0 6px; }
.qlegal a { color: var(--q-blue); }
.qlegal__note { font: 400 13px/1.6 'Noto Sans'; color: var(--q-steel); background: var(--q-tint); border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; }

/* ── QUEST Feature rows (zigzag image + text) ──────────────── */
.qfeat { display: flex; flex-direction: column; gap: 72px; }
.qfeat__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.qfeat__row:nth-child(even) .qfeat__media { order: 2; }
[dir="rtl"] .qfeat__row:nth-child(even) .qfeat__media { order: 0; }
.qfeat__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(55,83,162,0.18);
}
.qfeat__media img { width: 100%; display: block; object-fit: cover; aspect-ratio: 16/10; }
.qfeat__num {
  position: absolute;
  top: 18px; left: 18px;
  min-width: 46px; height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  font: 700 14px/1 'Noto Sans';
  color: var(--q-blue);
  box-shadow: 0 6px 18px rgba(4,12,40,0.25);
}
[dir="rtl"] .qfeat__num { left: auto; right: 18px; }
.qfeat__title { font: 700 28px/1.25 'Noto Sans'; color: var(--q-blue); margin-bottom: 14px; }
.qfeat__desc { font: 400 16px/1.75 'Noto Sans'; color: var(--q-steel); }
.qfeat__copy .qcard__hl { margin-top: 18px; }
@media (max-width: 900px) {
  .qfeat { gap: 48px; }
  .qfeat__row { grid-template-columns: 1fr; gap: 24px; }
  .qfeat__row:nth-child(even) .qfeat__media { order: 0; }
  .qfeat__title { font-size: 24px; }
}

/* Sticky intro (Contributes): the left intro stays pinned while the adjacent
   list column scrolls. Sticky is applied to the COLUMN that holds the intro —
   a shorter flex column (align-self:flex-start) pins within the taller row. */
.elementor-column:has(.elementor-widget.quest-sticky) {
  align-self: flex-start;
  position: sticky;
  top: 96px;
}
@media (max-width: 768px) {
  .elementor-column:has(.elementor-widget.quest-sticky) { position: static; }
}

/* Media never overflows its column on any device */
.quest-intro__media img,
.svc__media img { max-width: 100%; height: auto; }

/* When these atoms sit inside Elementor columns, neutralise Elementor's
   default widget spacing so the QUEST type rhythm is preserved, and let the
   columns (which Elementor stacks on mobile automatically) drive the layout. */
.elementor-widget-quest_intro .elementor-widget-container { margin: 0; }

/* Belt-and-braces: nothing should force horizontal scroll on small screens */
@media (max-width: 600px) {
  .quest-intro .why__title { font-size: 30px; }
  .partners__track-wrap { overflow: hidden; }
  .hero__dots { left: 20px; bottom: 28px; }
}

/* Hero slider dots: left-aligned under the copy; mirror to the right in RTL so
   they don't collide with the centred scroll-down cue. */
[dir="rtl"] .hero__dots { left: auto; right: 48px; justify-content: flex-end; }
@media (max-width: 600px) { [dir="rtl"] .hero__dots { right: 20px; } }

/* ═══════════════════════════════════════════════════════════════════
   PX — bespoke Product page (PSIM). Modern SaaS landing layout, QUEST
   brand palette. Self-contained under .px; rendered via one HTML widget.
   ═══════════════════════════════════════════════════════════════════ */
.px { font-family: var(--q-font); color: var(--q-ink); --px-accent: #2f6bed; }
.px * { box-sizing: border-box; }
.px-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.px-sec { padding: 84px 0; }
.px-h { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.px-eyebrow { display:inline-block; font: 700 12px/1 var(--q-font); letter-spacing: .14em; text-transform: uppercase; color: var(--q-blue); margin-bottom: 14px; }
.px-h h2 { font: 800 34px/1.2 var(--q-font); color: #0d1b30; margin: 0 0 12px; letter-spacing: -0.01em; }
.px-h p { font: 400 17px/1.7 var(--q-font); color: var(--q-steel); margin: 0; }
.px-btn { display:inline-flex; align-items:center; gap:9px; font:600 15px/1 var(--q-font); border-radius: 10px; padding: 15px 26px; text-decoration:none; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.px-btn svg { width:16px; height:16px; transition: transform .25s ease; }
.px-btn--primary { background: linear-gradient(135deg,#3753A2 0%,#2C4382 100%); color:#fff; box-shadow: 0 8px 22px rgba(55,83,162,.30); }
.px-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(55,83,162,.40); }
.px-btn--primary:hover svg { transform: translateX(3px); }
.px-btn--ghost { background:#fff; color: var(--q-blue); border:1px solid rgba(55,83,162,.28); }
.px-btn--ghost:hover { background: var(--q-tint); }
.px-btn--white { background:#fff; color: var(--q-blue); }
.px-btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2,8,32,.20); }

/* ── Hero ─────────────────────────────────────────────── */
.px-hero { position:relative; overflow:hidden; background:
   radial-gradient(ellipse 55% 60% at 78% 18%, rgba(96,160,240,.14) 0%, transparent 60%),
   radial-gradient(ellipse 50% 55% at 15% 90%, rgba(59,61,152,.08) 0%, transparent 60%), #fff; }
.px-hero__grid { display:grid; grid-template-columns: 1.02fr 1.1fr; gap: 56px; align-items:center; padding: 72px 0 60px; }
.px-hero__eyebrow { font:700 13px/1 var(--q-font); letter-spacing:.14em; text-transform:uppercase; color: var(--q-blue); margin-bottom: 20px; }
.px-hero__title { font: 800 54px/1.08 var(--q-font); letter-spacing:-0.02em; color:#0d1b30; margin:0 0 20px; }
.px-hero__title .g { background: linear-gradient(120deg,#348CAC,#3B3D98); -webkit-background-clip:text; background-clip:text; color: transparent; }
.px-hero__lead { font:400 18px/1.7 var(--q-font); color: var(--q-steel); max-width: 500px; margin: 0 0 30px; }
.px-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom: 40px; }
.px-hero__stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 10px; background:#fff; border:1px solid var(--q-line); border-radius:16px; padding: 18px 8px; box-shadow: 0 10px 34px rgba(11,28,52,.06); max-width: 560px; }
.px-stat { display:flex; gap:10px; align-items:center; padding: 4px 12px; border-right:1px solid var(--q-line); }
.px-hero__stats .px-stat:last-child { border-right:none; }
.px-stat__ic { width:30px;height:30px;flex-shrink:0; color: var(--q-blue); }
.px-stat__ic svg { width:100%; height:100%; }
.px-stat > span:last-child { display:flex; flex-direction:column; }
.px-stat__n { display:block; font:800 18px/1 var(--q-font); color:#0d1b30; }
.px-stat__l { display:block; font:500 11.5px/1.3 var(--q-font); color: var(--q-steel); margin-top:3px; }
/* Stat strip sitting just under the gradient hero (overlaps the seam) */
.px-statsec { padding: 0 0 56px; }
.px-statsband { max-width: 880px; margin: -48px auto 0; position: relative; z-index: 5; padding: 0 40px; }
.px-statsband .px-hero__stats { max-width: none; }

/* ── Hero dashboard mock ──────────────────────────────── */
.px-dashwrap { position:relative; }
.px-dash { position:relative; z-index:2; border-radius:16px; overflow:hidden; background: linear-gradient(160deg,#0e2350 0%,#0a1a3d 100%); box-shadow: 0 40px 90px rgba(11,28,60,.45); border:1px solid rgba(120,170,255,.16); }
.px-dash__bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(140,180,255,.12); }
.px-dash__bar b { color:#fff; font:700 12.5px/1 var(--q-font); letter-spacing:.02em; margin-left:4px; }
.px-dash__dot { width:9px;height:9px;border-radius:50%; background: rgba(150,190,255,.35); }
.px-dash__body { padding:16px; display:grid; gap:12px; }
.px-drow { display:grid; grid-template-columns: 1.5fr 1fr; gap:12px; }
.px-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.px-tile { background: rgba(255,255,255,.05); border:1px solid rgba(140,180,255,.14); border-radius:10px; padding:11px 12px; }
.px-tile__l { font:600 9.5px/1.2 var(--q-font); color: rgba(190,215,255,.7); text-transform:uppercase; letter-spacing:.05em; }
.px-tile__n { font:800 20px/1.1 var(--q-font); color:#fff; margin-top:5px; }
.px-tile__n.warn { color:#ff6b6b; }
.px-health { background: rgba(255,255,255,.05); border:1px solid rgba(140,180,255,.14); border-radius:10px; padding:11px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.px-gauge { width:74px;height:74px;border-radius:50%; background: conic-gradient(#3ad29f 0% 92%, rgba(255,255,255,.10) 92% 100%); display:flex; align-items:center; justify-content:center; margin:4px 0; }
.px-gauge span { width:56px;height:56px;border-radius:50%; background:#0b1e45; display:flex;align-items:center;justify-content:center; color:#fff; font:800 16px/1 var(--q-font); }
.px-health__l { font:500 9.5px/1.2 var(--q-font); color: rgba(190,215,255,.7); text-align:center; }
.px-feeds { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
.px-feed { aspect-ratio: 16/10; border-radius:8px; background:
   repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, rgba(255,255,255,.06) 8px 16px), #10254f;
   border:1px solid rgba(140,180,255,.12); position:relative; }
.px-feed::after { content:"● REC"; position:absolute; top:5px; left:6px; font:700 6.5px/1 var(--q-font); color:#ff6b6b; letter-spacing:.06em; }
.px-panel { background: rgba(255,255,255,.05); border:1px solid rgba(140,180,255,.14); border-radius:10px; padding:12px; }
.px-panel__h { font:700 10.5px/1 var(--q-font); color:#fff; margin-bottom:10px; display:flex; justify-content:space-between; }
.px-panel__h em { color:#8FB4D8; font-style:normal; font-weight:600; }
.px-tl { display:flex; flex-direction:column; gap:9px; }
.px-tl-item { display:flex; gap:8px; align-items:flex-start; }
.px-tl-item i { width:7px;height:7px;border-radius:50%; margin-top:3px; flex-shrink:0; }
.px-tl-item .t { font:600 9.5px/1.2 var(--q-font); color:#dbe7ff; }
.px-tl-item .s { font:400 8px/1.2 var(--q-font); color: rgba(190,215,255,.55); margin-top:2px; }
/* floating notification cards */
.px-note { position:absolute; z-index:3; right:-14px; display:flex; gap:9px; align-items:center; background:#fff; border-radius:11px; padding:9px 13px; box-shadow: 0 14px 34px rgba(11,28,60,.20); border:1px solid rgba(11,28,52,.05); animation: pxfloat 5s ease-in-out infinite; }
.px-note__ic { width:26px;height:26px;border-radius:7px; display:flex;align-items:center;justify-content:center; flex-shrink:0; }
.px-note__ic svg { width:15px;height:15px; }
.px-note b { font:700 11.5px/1.1 var(--q-font); color:#0d1b30; display:block; }
.px-note span { font:400 10px/1.2 var(--q-font); color: var(--q-steel); }
.px-note--1 { top:16%; } .px-note--1 .px-note__ic { background:#e7f8ef; color:#12a05f; }
.px-note--2 { top:36%; animation-delay:.8s; } .px-note--2 .px-note__ic { background:#fff3e0; color:#e08600; }
.px-note--3 { top:56%; animation-delay:1.6s; } .px-note--3 .px-note__ic { background:#e8f0ff; color:#2f6bed; }
.px-note--4 { top:76%; animation-delay:2.4s; } .px-note--4 .px-note__ic { background:#ffe9e9; color:#e23b3b; }
@keyframes pxfloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
@media (prefers-reduced-motion: reduce){ .px-note{ animation:none; } }

/* ── Trusted-by strip ─────────────────────────────────── */
.px-trust { border-top:1px solid var(--q-line); border-bottom:1px solid var(--q-line); background:#fff; padding: 30px 0; }
.px-trust__k { text-align:center; font:700 11px/1 var(--q-font); letter-spacing:.14em; text-transform:uppercase; color: var(--q-steel); margin-bottom:22px; }
.px-trust__mq { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.px-trust__track { display:flex; width:max-content; align-items:center; gap:64px; animation: marquee 32s linear infinite; }
.px-trust__mq:hover .px-trust__track { animation-play-state: paused; }
.px-trust__dup { display:contents; }
@media (prefers-reduced-motion: reduce) { .px-trust__track { animation: none; } }
.px-trust__logo { font:800 17px/1 var(--q-font); color:#8894a8; letter-spacing:-.01em; opacity:.85; white-space:nowrap; flex:0 0 auto; }
.px-trust__logo small { display:block; font:600 8.5px/1.2 var(--q-font); letter-spacing:.02em; color:#aab3c2; margin-top:3px; }

/* ── Integration hub ──────────────────────────────────── */
/* Integration hub — text-left / hub-right (matches reference 1:1) */
.px-int__grid { display:grid; grid-template-columns: 270px 1fr; gap:44px; align-items:center; }
.px-int__text { max-width: 330px; }
.px-int__eyebrow { display:inline-block; background: var(--q-tint); color: var(--q-blue); padding:6px 14px; border-radius:100px; font:700 11.5px/1 var(--q-font); letter-spacing:.09em; text-transform:uppercase; margin-bottom:18px; }
.px-int__text h2 { font:800 33px/1.14 var(--q-font); color: var(--q-blue); letter-spacing:-0.02em; margin:0 0 16px; }
.px-int__text p { font:400 15px/1.7 var(--q-font); color: var(--q-steel); margin:0 0 26px; }
.px-int__text .px-btn--primary { background: var(--q-gradient); box-shadow:0 8px 22px rgba(55,83,162,.30); border-radius:100px; }

.px-hub { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:54px; }
.px-hub__col { display:flex; flex-direction:column; gap:18px; }
.px-chip { position:relative; display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--q-line); border-radius:14px; padding:14px 16px; box-shadow:0 6px 20px rgba(11,28,52,.06); font:700 14px/1.2 var(--q-font); color: var(--q-ink); white-space:nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.px-chip:hover { transform: translateY(-3px); box-shadow:0 14px 30px rgba(55,83,162,.16); }
.px-chip svg { width:22px;height:22px; color: var(--q-blue); flex-shrink:0; }
/* connector: filled dot at the chip's inner edge + dashed line angled toward
   the orb centre (fan/spoke). Lines run long and the orb layers on top
   (z-index) so every spoke visually reaches the orb regardless of its angle. */
.px-hub__col .px-chip::before { content:""; position:absolute; top:50%; transform:translateY(-50%); width:8px;height:8px;border-radius:50%; background: var(--q-blue); z-index:4; }
.px-hub__col .px-chip::after { content:""; position:absolute; top:50%; height:2px; width:104px; z-index:1; background-image: repeating-linear-gradient(90deg, rgba(55,83,162,.55) 0 6px, transparent 6px 13px); background-size:13px 2px; background-repeat:repeat-x; animation: px-flow 0.9s linear infinite; }
.px-hub__col:last-child .px-chip::after { animation-direction: reverse; }
@keyframes px-flow { to { background-position: 13px 0; } }
.px-hub__col:first-child .px-chip::before { right:-5px; }
.px-hub__col:first-child .px-chip::after { left:100%; transform-origin:left center; }
.px-hub__col:last-child .px-chip::before { left:-5px; }
.px-hub__col:last-child .px-chip::after { right:100%; transform-origin:right center; }
/* angle each row toward the vertically-centred orb (left col) */
.px-hub__col:first-child .px-chip:nth-child(1)::after { transform: rotate(20deg); }
.px-hub__col:first-child .px-chip:nth-child(2)::after { transform: rotate(7deg); }
.px-hub__col:first-child .px-chip:nth-child(3)::after { transform: rotate(-7deg); }
.px-hub__col:first-child .px-chip:nth-child(4)::after { transform: rotate(-20deg); }
/* right col mirrors (line extends left, so invert sign to angle toward orb) */
.px-hub__col:last-child .px-chip:nth-child(1)::after { transform: rotate(-20deg); }
.px-hub__col:last-child .px-chip:nth-child(2)::after { transform: rotate(-7deg); }
.px-hub__col:last-child .px-chip:nth-child(3)::after { transform: rotate(7deg); }
.px-hub__col:last-child .px-chip:nth-child(4)::after { transform: rotate(20deg); }

.px-hub__center { display:flex; align-items:center; justify-content:center; position:relative; z-index:3; }
.px-orb { position:relative; width:190px;height:190px;border-radius:50%; background: radial-gradient(circle at 38% 30%, #6FB3D0 0%, #348CAC 45%, #3B3D98 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; box-shadow: 0 26px 60px rgba(55,83,162,.42); }
.px-orb::before, .px-orb::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(55,83,162,.16); pointer-events:none; }
.px-orb::before { inset:-22px; animation: px-ring 3.2s ease-in-out infinite; }
.px-orb::after { inset:-46px; border-color: rgba(55,83,162,.09); animation: px-ring 3.2s ease-in-out infinite .7s; }
@keyframes px-ring { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.06); opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .px-hub__col .px-chip::after { animation:none; } .px-orb::before, .px-orb::after { animation:none; } }
.px-orb__q { width:50px; height:auto; margin-bottom:7px; filter: brightness(0) invert(1); }
.px-orb b { font:800 23px/1 var(--q-font); letter-spacing:.03em; }
.px-orb span { font:600 12px/1 var(--q-font); letter-spacing:.24em; opacity:.9; margin-top:5px; }

/* ── Why cards ────────────────────────────────────────── */
.px-why-sec .px-h h2 { color: var(--q-blue); }
.px-why__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.px-why__card { position:relative; z-index:0; overflow:hidden; background:#fff; border:1px solid var(--q-line); border-radius:18px; padding:30px 28px; text-align:left; box-shadow: 0 2px 10px rgba(11,28,52,.05); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.px-why__card > * { position:relative; z-index:1; }
/* gradient accent that sweeps across the top on hover */
.px-why__card::after { content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background: linear-gradient(90deg,#348CAC,#3B3D98); transform: scaleX(0); transform-origin:left; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.px-why__card:hover { transform: translateY(-8px); box-shadow: 0 26px 52px rgba(44,67,130,.17); border-color: rgba(55,83,162,.16); }
.px-why__card:hover::after { transform: scaleX(1); }
.px-why__top { display:flex; align-items:center; gap:17px; margin-bottom:16px; }
.px-why__ic { width:70px;height:70px;border-radius:18px; background: linear-gradient(150deg,#EFF3FE 0%,#E0E9FB 100%); border:1px solid rgba(55,83,162,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(55,83,162,.08); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition: transform .38s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .3s ease; }
.px-why__ic img { width:44px; height:44px; display:block; }
.px-why__card:hover .px-why__ic { transform: scale(1.05); background: linear-gradient(150deg,#E4ECFC 0%,#D2E0FB 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px rgba(55,83,162,.18); }
.px-why__card h3 { font:700 17px/1.28 var(--q-font); color: var(--q-blue); margin:0; }
.px-why__card p { font:400 14px/1.7 var(--q-font); color: var(--q-steel); margin:0; }
/* Inline-SVG icon inside the why-card tile (product pages use line icons, not art files). */
.px-why__ic svg { width:40px; height:40px; color: var(--q-blue); display:block; }

/* ── How it works flow ────────────────────────────────── */
.px-flow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.px-flow__step { flex:1; text-align:center; max-width:190px; }
.px-flow__ic { width:64px;height:64px;border-radius:50%; border:2px solid rgba(55,83,162,.2); color: var(--q-blue); display:flex;align-items:center;justify-content:center; margin:0 auto 16px; background:#fff; }
.px-flow__ic svg { width:26px;height:26px; }
.px-flow__step h4 { font:700 15px/1.3 var(--q-font); color:#0d1b30; margin:0 0 6px; }
.px-flow__step p { font:400 12.5px/1.55 var(--q-font); color: var(--q-steel); margin:0; }
.px-flow__arrow { color: rgba(55,83,162,.35); align-self:center; margin-top:18px; flex-shrink:0; }
.px-flow__arrow svg { width:26px;height:26px; }

/* ── Operational advantages (dark) ────────────────────── */
.px-adv { background: linear-gradient(160deg,#0e2350 0%,#0a1a3d 100%); position:relative; overflow:hidden; border-radius:24px; }
.px-adv .px-eyebrow { color:#8FB4D8; }
.px-adv .px-h h2 { color:#fff; }
.px-adv__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.px-adv__card { background: rgba(255,255,255,.04); border:1px solid rgba(140,180,255,.16); border-radius:14px; padding:22px; transition: transform .25s ease, background .25s ease; }
.px-adv__card:hover { transform: translateY(-5px); background: rgba(255,255,255,.08); }
.px-adv__ic { width:48px;height:48px;border-radius:12px; background: linear-gradient(135deg,rgba(96,160,240,.28),rgba(59,61,152,.28)); color:#9fc4ff; display:flex;align-items:center;justify-content:center; margin-bottom:16px; }
.px-adv__ic svg { width:24px;height:24px; }
.px-adv__card h4 { font:700 16px/1.3 var(--q-font); color:#fff; margin:0 0 7px; }
.px-adv__card p { font:400 13px/1.6 var(--q-font); color: rgba(200,220,255,.72); margin:0; }

/* ── Final CTA band ───────────────────────────────────── */
.px-cta { background: linear-gradient(135deg,#348CAC 0%,#3B3D98 100%); border-radius:20px; padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; box-shadow: 0 30px 70px rgba(44,67,130,.30); }
.px-cta h2 { font:800 26px/1.25 var(--q-font); color:#fff; margin:0 0 6px; }
.px-cta p { font:400 15px/1.6 var(--q-font); color: rgba(255,255,255,.85); margin:0; }

/* ── Operational Advantages (illustrated, numbered) — style-guide tokens ── */
.px-oa__head { text-align:center; max-width:760px; margin:0 auto 44px; }
.px-oa__badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#fff; font:600 11px/1 var(--q-font); letter-spacing:.1em; text-transform:uppercase; padding:9px 16px; border-radius:100px; margin-bottom:18px; }
.px-oa__badge svg { width:16px; height:16px; }
.px-oa__head h2 { font:700 40px/1.15 var(--q-font); color:#fff; letter-spacing:-0.01em; margin:0 0 14px; }
.px-oa__head h2 .g { color:#8FB4D8; white-space:nowrap; }
.px-oa__head p { font:400 17px/1.7 var(--q-font); color:rgba(255,255,255,.82); margin:0; }
.px-oa__head p b { color:#fff; font-weight:600; }
/* Blue ground for the section (hero-style). Cards stay white for contrast. */
.px-oa { background: linear-gradient(135deg,#3753A2 0%,#2C4382 100%); }
.px-oa__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.px-oa__card { position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--q-line); border-radius:16px; padding:26px 24px; min-height:210px; box-shadow:0 4px 24px rgba(11,28,52,.05); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease; }
.px-oa__card:hover { transform:translateY(-8px); box-shadow:0 26px 60px rgba(11,46,110,.20); border-color:var(--q-line); }
.px-oa__main { flex:1; min-width:0; }
.px-oa__num { display:inline-block; font:800 17px/1 var(--q-font); color:var(--q-blue); background:var(--q-tint); border-radius:10px; padding:8px 11px; margin-bottom:16px; }
.px-oa__card h3 { font:700 17px/1.28 var(--q-font); color:var(--q-ink); margin:0 0 11px; }
.px-oa__rule { display:block; width:34px; height:3px; border-radius:3px; background:linear-gradient(90deg,#3753A2,#8FB4D8); margin-bottom:11px; }
.px-oa__card p { font:400 13.5px/1.7 var(--q-font); color:var(--q-steel); margin:0; max-width:220px; }
.px-oa__img { width:142px; height:auto; flex-shrink:0; align-self:center; }
.px-oa__go { position:absolute; right:20px; bottom:18px; width:34px; height:34px; border-radius:50%; border:1px solid var(--q-line); display:flex; align-items:center; justify-content:center; color:var(--q-blue); background:#fff; transition:background .2s ease, color .2s ease; }
.px-oa__go svg { width:16px; height:16px; }
.px-oa__card:hover .px-oa__go { background:var(--q-blue); color:#fff; }
.px-oa__banner { display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--q-line); border-radius:16px; padding:26px 30px; margin-top:24px; box-shadow:0 4px 24px rgba(11,28,52,.05); }
.px-oa__banner-ic { width:56px; height:56px; flex-shrink:0; border-radius:16px; background:var(--q-gradient); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(55,83,162,.28); }
.px-oa__banner-ic svg { width:28px; height:28px; }
.px-oa__banner-txt { flex:1; }
.px-oa__banner-txt h3 { font:700 21px/1.3 var(--q-font); color:var(--q-blue); margin:0 0 4px; }
.px-oa__banner-txt p { font:400 14px/1.7 var(--q-font); color:var(--q-steel); margin:0; }
.px-oa__banner-btn { flex-shrink:0; }
@media (max-width:1024px){ .px-oa__grid{ grid-template-columns:repeat(2,1fr); } .px-oa__banner{ flex-wrap:wrap; } }
@media (max-width:680px){ .px-oa__grid{ grid-template-columns:1fr; } .px-oa__img{ width:100px; } .px-oa__head h2{ font-size:27px; } .px-oa__banner{ flex-direction:column; align-items:flex-start; } }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .px-hero__grid { grid-template-columns: 1fr; gap:48px; }
  .px-hero__title { font-size: 44px; }
  .px-why__grid, .px-adv__grid { grid-template-columns: repeat(2,1fr); }
  .px-flow { flex-wrap:wrap; justify-content:center; gap:24px; }
  .px-flow__arrow { display:none; }
  .px-flow__step { flex:0 0 40%; }
  .px-int__grid { grid-template-columns: 1fr; gap:36px; }
  .px-int__text { max-width: 640px; }
  .px-hub { gap:56px; }
}
@media (max-width: 680px) {
  .px-wrap { padding: 0 22px; }
  .px-sec { padding: 60px 0; }
  .px-hero__title { font-size: 36px; }
  .px-hero__stats { grid-template-columns: repeat(2,1fr); gap:16px 0; }
  .px-stat:nth-child(2){ border-right:none; }
  .px-statsband { margin-top: 24px; padding: 0 22px; }
  .px-hub { grid-template-columns:1fr; gap:22px; }
  .px-hub__center { order:-1; }
  .px-hub__col .px-chip::after, .px-hub__col .px-chip::before { display:none; }
  .px-why__grid, .px-adv__grid { grid-template-columns: 1fr; }
  .px-h h2 { font-size: 27px; }
  .px-note { display:none; }
  .px-cta { padding:32px 26px; }
}

/* ═══════════════════════ SX — bespoke Solutions page ═══════════════════════ */
.sx { font-family: var(--q-font); color: var(--q-ink); }
.sx * { box-sizing: border-box; }
.sx-wrap { max-width: 1600px; margin: 0 auto; padding: 0 72px; }

/* Hero — light, brand-aligned (cityscape bleeds right, copy sits left) */
.sx-hero { position: relative; background-color: #e9f1fb; background-repeat: no-repeat; background-position: right bottom; background-size: auto 118%; color: var(--q-ink); padding: 170px 0 56px; overflow: hidden; }
.sx-hero__ov { position: absolute; inset: 0; background:
  linear-gradient(0deg, #fff 0%, rgba(255,255,255,.92) 7%, rgba(255,255,255,.5) 20%, rgba(255,255,255,0) 38%),
  linear-gradient(90deg, #e9f1fb 0%, rgba(233,241,251,.88) 24%, rgba(233,241,251,.3) 52%, rgba(233,241,251,0) 74%),
  linear-gradient(270deg, #e9f1fb 0%, rgba(233,241,251,0) 15%); }
.sx-hero__inner { position: relative; z-index: 2; }
.sx-hero__eyebrow { display: inline-block; background: rgba(255,255,255,.75); color: var(--q-blue); border: 1px solid var(--q-line); padding: 7px 15px; border-radius: 100px; font: 700 11.5px/1 var(--q-font); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
.sx-hero h1 { font: 800 56px/1.08 var(--q-font); letter-spacing: -0.02em; margin: 0 0 18px; max-width: 640px; color: var(--q-ink); }
.sx-hero h1 .g { background: var(--q-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-hero h1 .l2 { display: block; font-size: 33px; font-weight: 700; margin-top: 6px; color: var(--q-blue); }
.sx-hero p { font: 400 18px/1.7 var(--q-font); color: var(--q-steel); max-width: 480px; margin: 0 0 30px; }
.sx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.sx-btn-outline { background: #fff; color: var(--q-blue); border: 1px solid rgba(55,83,162,.28); }
.sx-btn-outline:hover { background: var(--q-tint); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(11,28,52,.12); }
.sx-strip { position: relative; z-index: 2; margin-top: 48px; display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,255,255,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--q-line); border-radius: 16px; box-shadow: 0 24px 60px rgba(11,28,52,.14); overflow: hidden; }
.sx-strip__i { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-right: 1px solid var(--q-line); }
.sx-strip__i:last-child { border-right: none; }
.sx-strip__ic { width: 34px; height: 34px; color: var(--q-blue); flex-shrink: 0; }
.sx-strip__ic svg { width: 100%; height: 100%; }
.sx-strip__t { font: 700 14px/1.3 var(--q-font); color: var(--q-ink); }

/* Solution rows — text (outside) · feature card (hugging the image) · full-bleed image */
.sx-sols { background: #fff; }
.sx-sol { display: grid; grid-template-columns: 1fr 430px 33%; align-items: stretch; background: #fff; }
.sx-sol:nth-child(even) { background: #f3f6fc; }
.sx-sol--alt { grid-template-columns: 33% 430px 1fr; }
.sx-sol__text { align-self: center; padding: 56px 40px; }
.sx-sol:not(.sx-sol--alt) .sx-sol__text { padding-left: max(40px, calc((100vw - 1600px) / 2 + 72px)); padding-right: 30px; }
.sx-sol__card { align-self: stretch; width: 100%; position: relative; z-index: 1; margin: 44px 0; display: flex; align-items: center; }
.sx-sol:not(.sx-sol--alt) .sx-sol__card { margin-right: -22px; border-radius: 22px 0 0 22px; }
.sx-sol--alt .sx-sol__img { order: 1; border-radius: 0 20px 20px 0; }
.sx-sol:not(.sx-sol--alt) .sx-sol__img { border-radius: 20px 0 0 20px; }
.sx-sol--alt .sx-sol__card { order: 2; margin-left: -22px; border-radius: 0 22px 22px 0; }
.sx-sol--alt .sx-sol__text { order: 3; padding-right: max(40px, calc((100vw - 1600px) / 2 + 72px)); padding-left: 30px; }
.sx-sol__img { align-self: stretch; margin: 20px 0; overflow: hidden; position: relative; z-index: 2; }
.sx-sol__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-sol__top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.sx-sol__num { font: 800 56px/1 var(--q-font); background: var(--q-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -.02em; }
.sx-sol__badge { width: 50px; height: 50px; border-radius: 14px; background: var(--q-gradient); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 22px rgba(55,83,162,.3); }
.sx-sol__badge svg { width: 26px; height: 26px; }
.sx-sol h2 { font: 800 30px/1.2 var(--q-font); color: var(--q-ink); margin: 0 0 14px; letter-spacing: -.02em; }
.sx-sol__text p { font: 400 15px/1.7 var(--q-font); color: var(--q-steel); margin: 0 0 16px; }
.sx-sol__more { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--q-font); color: var(--q-blue); text-decoration: none; }
.sx-sol__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sx-sol__more:hover svg { transform: translateX(3px); }
.sx-sol__card { background: #fff; border: 1px solid var(--q-line); box-shadow: 0 22px 55px rgba(11,28,52,.16); padding: 34px 30px; }
.sx-feats { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px 14px; width: 100%; }
.sx-feat { text-align: center; }
.sx-feat__ic { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 16px; background: linear-gradient(135deg,rgba(52,140,172,.12),rgba(59,61,152,.12)); display: flex; align-items: center; justify-content: center; }
.sx-feat .sx-feat__ic { color: var(--q-blue); }
.sx-feat__ic svg { width: 30px; height: 30px; }
.sx-feat > span:last-child { display: block; font: 700 12px/1.3 var(--q-font); color: var(--q-ink); }

/* CTA band */
.sx-cta { background: linear-gradient(120deg,#0a1a3d,#122a5e); color: #fff; }
.sx-cta__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 40px; }
.sx-cta__ic { width: 54px; height: 54px; color: #38bdf8; flex-shrink: 0; }
.sx-cta__ic svg { width: 100%; height: 100%; }
.sx-cta__a { font: 800 22px/1.3 var(--q-font); } .sx-cta__a span { color: #38bdf8; }
.sx-cta__b { flex: 1; font: 600 18px/1.45 var(--q-font); color: rgba(255,255,255,.9); }
.sx-cta .px-btn { background: linear-gradient(90deg,#2f6bed,#3b82f6); color: #fff; }

@media (max-width: 1024px) {
  .sx-sol, .sx-sol--alt { grid-template-columns: 1fr; }
  .sx-sol__text, .sx-sol--alt .sx-sol__text { padding: 40px 32px !important; }
  .sx-sol__card, .sx-sol--alt .sx-sol__card { width: auto; margin: 0 32px 36px !important; }
  .sx-sol--alt .sx-sol__img, .sx-sol--alt .sx-sol__text, .sx-sol--alt .sx-sol__card { order: 0; }
  .sx-sol__img, .sx-sol--alt .sx-sol__img { min-height: 240px; border-radius: 0; }
  .sx-strip { grid-template-columns: repeat(2,1fr); }
  .sx-hero h1 { font-size: 44px; }
}
@media (max-width: 680px) {
  .sx-wrap { padding: 0 22px; }
  .sx-strip { grid-template-columns: 1fr; }
  .sx-strip__i { border-right: none; border-bottom: 1px solid rgba(120,170,255,.14); }
  .sx-hero { padding-top: 118px; background-position: 72% bottom; background-size: cover; } .sx-hero h1 { font-size: 32px; } .sx-hero h1 .l2 { font-size: 21px; }
  .sx-hero__ov { background: linear-gradient(180deg, #e9f1fb 0%, rgba(233,241,251,.72) 40%, rgba(233,241,251,.4) 66%, #fff 100%); }
  .sx-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ═══ INDUSTRIES / VERTICALS PAGE (.iv-*) ══════════════════════════════════
   Bespoke page: hero + verticals-hub scene, a pinned scroll-tabs section
   (reuses the .qstabs mechanic via .qstabs--ind), stats band, CTA. */
.iv { font-family: var(--q-font); color: var(--q-ink); background: #fff; }
.iv-wrap { max-width: 1340px; margin: 0 auto; padding: 0 40px; }

/* ── Hero (full-bleed illustration on the right) ── */
.iv-hero { background: linear-gradient(180deg, #FFFFFF 0%, #EEF2FB 100%); overflow: hidden; }
.iv-hero__grid { display: grid; grid-template-columns: minmax(0, 37%) minmax(0, 63%); align-items: center; gap: 20px; padding: 40px 40px 28px; }
.iv-hero__text { padding-right: 12px; }
.iv-hero__eyebrow { display: inline-block; color: var(--q-blue); font: 700 13px/1 var(--q-font); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.iv-hero__text h1 { font: 800 52px/1.08 var(--q-font); color: #0d1b30; letter-spacing: -.025em; margin: 0 0 24px; }
.iv-hero__text h1 .g { display: block; color: var(--q-blue); }
.iv-hero__text p { font: 400 16.5px/1.7 var(--q-font); color: var(--q-steel); margin: 0 0 34px; max-width: 440px; }
.iv-hero .px-btn--primary { border-radius: 100px; padding: 16px 30px; }

/* isometric industries illustration — fills its column and bleeds to the edge */
.iv-hero__art { position: relative; }
.iv-hero__art img { width: 100%; height: auto; display: block; }
/* uppercase CTAs to match the design comp (scoped to this page) */
.iv .px-btn, .iv-panel__more { text-transform: uppercase; letter-spacing: .04em; }

/* ── Scroll-tabs (industries) — restyle the shared .qstabs mechanic ── */
.qstabs--ind { background: #EEF2FB; }
.qstabs--ind .qstabs__pin { justify-content: flex-start; padding: 54px 0 42px; }
.qstabs--ind .qstabs__card { width: min(1340px, 92vw); display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qstabs--ind .qstabs__tabs { background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(11,28,52,.09); padding: 0 12px; gap: 0; }
.qstabs--ind .qstabs__tab { flex: 1; flex-direction: column; gap: 13px; border-radius: 0; border-bottom: 3px solid transparent; padding: 26px 12px 22px; font: 600 13px/1.3 var(--q-font); color: #33415A; text-align: center; transition: color .2s ease, border-color .2s ease; }
.qstabs--ind .qstabs__tab + .qstabs__tab { border-left: 1px solid rgba(55,83,162,.10); }
.qstabs--ind .qstabs__tab-ic { display: flex; }
.qstabs--ind .qstabs__tab-ic svg { width: 44px; height: 44px; }
.qstabs--ind .qstabs__tab:hover { color: var(--q-blue); background: none; }
.qstabs--ind .qstabs__tab.is-active { color: var(--q-blue); background: none; border-bottom-color: var(--q-blue); box-shadow: none; }
.qstabs--ind .qstabs__body { display: block; overflow: visible; box-shadow: none; margin-top: 24px; flex: 1; min-height: 0; }
.qstabs--ind .qstabs__panels { width: 100%; height: 100%; background: transparent; padding: 0; overflow: visible; display: block; }
.qstabs--ind .qstabs__panel.is-active { height: 100%; }
.iv-panel { display: grid; grid-template-columns: 46% 1fr; gap: 50px; align-items: stretch; height: 100%; }
.iv-panel__img { align-self: stretch; min-height: 440px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(11,28,52,.16); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #0A1B42; }
.iv-panel__body { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.iv-panel__eyebrow { display: inline-block; color: var(--q-blue); font: 700 12px/1 var(--q-font); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.iv-panel h2 { font: 800 31px/1.22 var(--q-font); color: var(--q-ink); letter-spacing: -.02em; margin: 0 0 16px; }
.iv-panel__desc { font: 400 15px/1.75 var(--q-font); color: var(--q-steel); margin: 0 0 32px; max-width: 560px; }
.iv-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 32px; }
.iv-feat { display: flex; gap: 15px; background: #fff; border: 1px solid var(--q-line); border-radius: 14px; padding: 20px 18px; box-shadow: 0 6px 20px rgba(11,28,52,.05); }
.iv-feat__ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px; background: var(--q-blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(55,83,162,.22); }
.iv-feat__ic svg { width: 22px; height: 22px; }
.iv-feat__tx h4 { font: 700 14.5px/1.3 var(--q-font); color: var(--q-ink); margin: 0 0 5px; }
.iv-feat__tx p { font: 400 12.5px/1.6 var(--q-font); color: var(--q-steel); margin: 0; }
.iv-panel__more { display: inline-flex; align-items: center; gap: 7px; font: 700 14px/1 var(--q-font); color: var(--q-blue); text-decoration: none; }
.iv-panel__more svg { width: 16px; height: 16px; transition: transform .2s ease; }
.iv-panel__more:hover svg { transform: translateX(3px); }

/* ── Stats band ── */
.iv-statsec { background: #fff; padding: 44px 0; }
.iv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; background: #F4F7FC; border: 1px solid var(--q-line); border-radius: 20px; padding: 30px 24px; }
.iv-stat { display: flex; align-items: center; gap: 16px; justify-content: center; }
.iv-stat + .iv-stat { border-left: 1px solid var(--q-line); }
.iv-stat__ic { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 1px solid var(--q-line); color: var(--q-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.iv-stat__ic svg { width: 26px; height: 26px; }
.iv-stat__n { display: block; font: 800 26px/1 var(--q-font); color: var(--q-blue); }
.iv-stat__l { display: block; font: 400 13px/1.4 var(--q-font); color: var(--q-steel); margin-top: 5px; }

/* ── CTA band ── */
.iv-cta { padding: 20px 0 72px; background: #fff; }
.iv-cta__inner { position: relative; overflow: hidden; border-radius: 22px; padding: 56px 48px; background: linear-gradient(120deg, #EEF2FB 0%, #E3EAF8 100%); border: 1px solid var(--q-line); }
.iv-cta__map { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 120% at 100% 100%, rgba(55,83,162,.22) 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(3px 3px at 3px 3px, #000 40%, transparent 50%); mask-image: radial-gradient(3px 3px at 3px 3px, #000 40%, transparent 50%); -webkit-mask-size: 22px 22px; mask-size: 22px 22px; opacity: .5; }
.iv-cta__tx { position: relative; z-index: 1; }
.iv-cta__eyebrow { display: inline-block; color: var(--q-blue); font: 700 12px/1 var(--q-font); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.iv-cta h2 { font: 800 34px/1.2 var(--q-font); color: var(--q-ink); letter-spacing: -.02em; margin: 0 0 26px; }
.iv-cta .px-btn--primary { border-radius: 100px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .iv-hero__grid { grid-template-columns: 1fr; gap: 24px; padding: 40px 40px 24px; }
  .iv-hero__text { padding: 0; }
  .iv-hero__text h1 { font-size: 44px; }
  .iv-hero__text p { max-width: 560px; }
  .iv-hero__art { max-width: 640px; margin: 0 auto; }
  .iv-stats { grid-template-columns: repeat(2, 1fr); }
  .iv-stat:nth-child(3) { border-left: none; }
}
@media (max-width: 900px) {
  .qstabs--ind .qstabs__card, .qstabs--ind .qstabs__body, .qstabs--ind .qstabs__panels, .qstabs--ind .qstabs__panel.is-active, .qstabs--ind .iv-panel { height: auto; flex: none; min-height: 0; }
  .qstabs--ind .qstabs__panel { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 40px; }
  .iv-panel { grid-template-columns: 1fr; gap: 22px; }
  .iv-panel__img { height: 240px; min-height: 0; }
}
@media (max-width: 680px) {
  .iv-wrap { padding: 0 22px; }
  .iv-hero__grid { padding: 28px 22px 20px; }
  .iv-hero__text { padding: 0; }
  .iv-hero__text h1 { font-size: 34px; }
  .iv-feats { grid-template-columns: 1fr; }
  .iv-stats { grid-template-columns: 1fr; }
  .iv-stat + .iv-stat { border-left: none; border-top: 1px solid var(--q-line); padding-top: 20px; }
  .iv-stat:nth-child(3) { border-top: 1px solid var(--q-line); }
  .iv-cta__inner { padding: 40px 26px; } .iv-cta h2 { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════
   Partners page (partner hero · dark stats band · partner grid ·
   minimal benefit cards · become-a-partner form)
   ═══════════════════════════════════════════════════════════════ */

/* ── Partner hero (full-bleed skyline background) ────────────── */
.qphero-p {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Kept short enough that the dark stats band below is visible without
     scrolling; the image is biased downward so buildings + waterline show. */
  min-height: clamp(520px, 40vw, 760px);
  background: linear-gradient(180deg, #F6F9FE 0%, #FFFFFF 70%);
}
.qphero-p__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}
/* Keep the left copy legible over the photo (fade left) and blend the photo
   into the white section below (fade bottom). */
.qphero-p::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(246,249,254,0.96) 0%, rgba(246,249,254,0.55) 34%, rgba(246,249,254,0) 62%),
    linear-gradient(180deg, transparent 82%, #FFFFFF 100%);
  z-index: 1;
  pointer-events: none;
}
.qphero-p__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 48px;
}
.qphero-p__content { max-width: 520px; }
.qphero-p__content .pill { margin-bottom: 22px; }
.qphero-p__title {
  font: 800 52px/1.06 var(--q-font);
  letter-spacing: -0.02em;
  color: var(--q-ink);
  margin: 0 0 22px;
}
.qphero-p__accent { display: block; color: var(--q-blue); }
.qphero-p__lead {
  font: 400 17px/1.7 var(--q-font);
  color: var(--q-steel);
  max-width: 460px;
  margin: 0 0 32px;
}
.qphero-p__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.qphero-p__cta .btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.qphero-p__cta .btn svg { flex-shrink: 0; }
.qphero-p__video {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 700 12px/1 var(--q-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q-blue);
}
.qphero-p__video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(55,83,162,0.35);
  color: var(--q-blue);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.qphero-p__video:hover .qphero-p__video-btn { background: var(--q-blue); border-color: var(--q-blue); color: #fff; transform: scale(1.06); }

/* ── Dark stats band ────────────────────────────────────────── */
.stats--band { background: transparent; padding: 0 0 8px; }
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--q-gradient);   /* QUEST brand gradient (teal → indigo) */
  border-radius: 18px;
  padding: 34px 40px;
  box-shadow: 0 24px 60px rgba(52,60,120,0.30);
  margin-top: 0;                   /* sit below the skyline with a clean gap */
  position: relative;
  z-index: 3;
}
.stat-band { display: flex; align-items: center; gap: 16px; }
.stat-band + .stat-band { border-left: 1px solid rgba(255,255,255,0.12); padding-left: 26px; }
.stat-band__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  color: var(--q-blue-300);
}
.stat-band__icon svg { width: 100%; height: 100%; }
.stat-band__num { font: 800 30px/1 var(--q-font); color: #fff; letter-spacing: -0.01em; }
.stat-band__label { font: 600 14px/1.3 var(--q-font); color: rgba(255,255,255,0.92); margin-top: 5px; }
.stat-band__sub { font: 400 12.5px/1.3 var(--q-font); color: rgba(255,255,255,0.55); margin-top: 2px; }

/* ── Partner grid (directory) ───────────────────────────────── */
.qpg { background: #fff; padding: 88px 0; }
.qpg__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 30px;
}
.qpg__head-main .pill { margin-bottom: 16px; }
.qpg__title { font: 800 36px/1.2 var(--q-font); letter-spacing: -0.02em; color: var(--q-ink); margin: 0; max-width: 480px; }
.qpg__sub { font: 400 15.5px/1.7 var(--q-font); color: var(--q-steel); margin: 0; align-self: end; padding-bottom: 4px; }

.qpg__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.qpg__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.qpg__tab {
  font: 600 13px/1 var(--q-font);
  color: var(--q-steel);
  background: #fff;
  border: 1px solid var(--q-line);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.18s;
}
.qpg__tab:hover { border-color: var(--q-blue); color: var(--q-blue); }
.qpg__tab.is-active { background: var(--q-blue); border-color: var(--q-blue); color: #fff; box-shadow: 0 4px 16px rgba(55,83,162,0.35); }

.qpg__search {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--q-tint);
  border: 1px solid var(--q-line);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--q-steel);
  min-width: 240px;
}
.qpg__search:focus-within { border-color: var(--q-blue); background: #fff; }
.qpg__search-input {
  border: 0;
  background: transparent;
  outline: none;
  font: 400 14px/1 var(--q-font);
  color: var(--q-ink);
  padding: 11px 0;
  width: 100%;
}

.qpg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qpg__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--q-line);
  border-radius: 16px;
  padding: 34px 30px;
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.qpg__card:hover { box-shadow: 0 18px 44px rgba(31,52,110,0.12); transform: translateY(-3px); border-color: rgba(55,83,162,0.28); }
.qpg__card--hidden { display: none; }
.qpg__logo { min-height: 68px; display: flex; align-items: center; margin-bottom: 24px; }
.qpg__logo img { max-height: 64px; max-width: 210px; width: auto; object-fit: contain; }
.qpg__logo-text { font: 800 22px/1 var(--q-font); color: var(--q-blue); }
.qpg__desc { font: 400 14.5px/1.7 var(--q-font); color: var(--q-steel); margin: 0 0 26px; flex: 1 1 auto; }
.qpg__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font: 700 13.5px/1 var(--q-font);
  color: var(--q-blue);
}
.qpg__more svg { transition: transform 0.2s; }
.qpg__more:hover svg { transform: translateX(4px); }

.qpg__empty { text-align: center; color: var(--q-steel); font: 500 15px/1.6 var(--q-font); padding: 30px 0; }
.qpg__footer { display: flex; justify-content: center; margin-top: 42px; }
.qpg__reveal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--q-blue);
  color: var(--q-blue);
  border-radius: 999px;
  padding: 12px 26px;
  font: 700 13px/1 var(--q-font);
  cursor: pointer;
  transition: all 0.18s;
}
.qpg__reveal:hover { background: var(--q-blue); color: #fff; }

/* ── Minimal benefit cards (Why partner) ────────────────────── */
.qcards--minimal { gap: 30px; }
.qcards--minimal .qcard {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.qcards--minimal .qcard:hover { transform: none; box-shadow: none; }
.qcards--minimal .qcard__body { padding: 0; }
.qcards--minimal .qcard__meta { margin-bottom: 14px; }
.qcards--minimal .qcard__icon { width: 40px; height: 40px; color: var(--q-blue); background: transparent; box-shadow: none; border-radius: 0; }
.qcards--minimal .qcard__icon svg { width: 100%; height: 100%; }
.qcards--minimal .qcard__title { font-size: 17px; margin-bottom: 8px; }
.qcards--minimal .qcard__desc { font-size: 13.5px; color: var(--q-steel); }
/* Minimal benefit cards on the brand gradient band (light text + icons). */
.qbenefits-dark .qcards--minimal .qcard__icon { color: #FFFFFF; }
.qbenefits-dark .qcards--minimal .qcard__title { color: #FFFFFF; }
.qbenefits-dark .qcards--minimal .qcard__desc { color: rgba(255,255,255,0.82); }

/* ── Become-a-partner form ──────────────────────────────────── */
.qpform-band { position: relative; overflow: hidden; }
.qpform-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(55,83,162,0.11) 1.4px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 52%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 52%);
  pointer-events: none;
}
.qpform {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.qpform__intro .pill { margin-bottom: 18px; }
.qpform__intro h2 { font: 800 38px/1.15 var(--q-font); letter-spacing: -0.02em; color: var(--q-blue); margin: 0 0 18px; max-width: 12ch; }
.qpform__intro p { font: 400 15.5px/1.7 var(--q-font); color: #4B5B74; margin: 0; max-width: 42ch; }
.qpform__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qpform__form .qpform__full { grid-column: 1 / -1; }
.qpform__form input,
.qpform__form select,
.qpform__form textarea {
  width: 100%;
  font: 400 14.5px/1.3 var(--q-font);
  color: var(--q-ink);
  background: #fff;
  border: 1px solid var(--q-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.qpform__form input::placeholder,
.qpform__form textarea::placeholder { color: #9aa6b8; }
.qpform__form input:focus,
.qpform__form select:focus,
.qpform__form textarea:focus { outline: none; border-color: var(--q-blue); box-shadow: 0 0 0 3px rgba(55,83,162,0.12); }
.qpform__form textarea { min-height: 118px; resize: vertical; }
.qpform__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.qpform__actions .btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.qpform__actions .btn svg { flex-shrink: 0; }
.qpform__note { grid-column: 1 / -1; font: 400 12.5px/1.55 var(--q-font); color: var(--q-steel); margin-top: 4px; }
.qpform__note a { color: var(--q-blue); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .qphero-p { min-height: 0; display: block; }
  .qphero-p__inner { padding: 72px 32px 90px; }
  .qphero-p__title { font-size: 42px; }
  .qphero-p::after { background: linear-gradient(90deg, rgba(246,249,254,0.97) 0%, rgba(246,249,254,0.7) 50%, rgba(246,249,254,0.2) 100%); }
  .stats-band { grid-template-columns: repeat(2, 1fr); margin-top: -36px; }
  .stat-band:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat-band:nth-child(3), .stat-band:nth-child(4) { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); }
  .qpg__head { grid-template-columns: 1fr; gap: 16px; }
  .qpg__grid { grid-template-columns: repeat(2, 1fr); }
  .qpform { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .qphero-p__title { font-size: 34px; }
  .qphero-p__watermark { display: none; }
  .stats-band { grid-template-columns: 1fr; padding: 26px 24px; }
  .stat-band:nth-child(n) { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; }
  .stat-band:first-child { border-top: 0; padding-top: 0; }
  .qpg { padding: 60px 0; }
  .qpg__grid { grid-template-columns: 1fr; }
  .qpg__toolbar { flex-direction: column; align-items: stretch; }
  .qpg__search { min-width: 0; }
  .qpform__form { grid-template-columns: 1fr; }
}

/* ── Lead-capture popup (brochure / video) ─────────────────────────── */
.qlead {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.qlead.is-open { display: flex; }
.qlead__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 32, 0.62);
  backdrop-filter: blur(3px);
}
.qlead__box {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(3, 10, 32, 0.5);
  padding: 40px 36px 36px;
  animation: qlead-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes qlead-pop { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.qlead__x {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--q-steel, #758398);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.qlead__x:hover { background: #eef2fb; color: var(--q-blue, #3753A2); }
.qlead__title { font: 700 24px/1.2 'Noto Sans', sans-serif; color: var(--q-blue, #3753A2); margin: 0 0 8px; }
.qlead__sub { font: 400 14.5px/1.6 'Noto Sans', sans-serif; color: var(--q-steel, #758398); margin: 0 0 22px; }
.qlead__form .qlead-grid { display: grid; gap: 14px; }
.qlead__form label { display: block; font: 600 13px/1.4 'Noto Sans', sans-serif; color: #24324a; }
.qlead__form input[type="text"],
.qlead__form input[type="email"],
.qlead__form input[type="tel"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px solid var(--q-line, rgba(55,83,162,0.18));
  border-radius: 10px;
  font: 400 15px 'Noto Sans', sans-serif;
  color: #0b1c34;
  background: #f9fbff;
}
.qlead__form input:focus { outline: none; border-color: var(--q-blue, #3753A2); background: #fff; box-shadow: 0 0 0 3px rgba(55,83,162,0.12); }
.qlead__form .qlead-submit { margin: 20px 0 0; }
.qlead__form .wpcf7-submit {
  width: 100%;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  background: var(--q-gradient, linear-gradient(135deg, #348CAC 0%, #3B3D98 100%));
  color: #fff;
  font: 700 15px 'Noto Sans', sans-serif;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
.qlead__form .wpcf7-submit:hover { filter: brightness(1.06); }
.qlead__form .wpcf7-spinner { margin: 10px auto 0; display: block; }
.qlead__form .wpcf7-response-output { margin: 14px 0 0; font-size: 13.5px; border-radius: 8px; padding: 10px 12px; }
.qlead__panel--done { text-align: center; padding: 12px 0 4px; }
.qlead__check {
  width: 66px; height: 66px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--q-gradient, linear-gradient(135deg, #348CAC 0%, #3B3D98 100%));
  color: #fff; font-size: 34px; line-height: 66px; text-align: center;
}
.qlead__panel--done .btn { margin-top: 22px; }
@media (max-width: 520px) { .qlead__box { padding: 34px 22px 26px; } }

/* ── Contact Form 7 fit into the bespoke .qx-form / .qpform grids ───── */
/* CF7 wraps each field in a span; display:contents lets the real control
   act as the grid/flex child, so the original layouts apply unchanged. */
.qx-form .wpcf7-form-control-wrap,
.qpform__form .wpcf7-form-control-wrap { display: contents; }
.qx-form form.wpcf7-form,
.qpform__form.wpcf7-form { margin: 0; }
/* keep submit buttons on-brand (override the generic field input rules) */
.qx-form input[type="submit"].wpcf7-submit,
.qpform__form input[type="submit"].wpcf7-submit {
  border: none;
  background: linear-gradient(135deg, #3753A2 0%, #2C4382 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(55, 83, 162, 0.30);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.qx-form input[type="submit"].wpcf7-submit { width: 100%; }
.qpform__form input[type="submit"].wpcf7-submit { width: auto; }
.qx-form input[type="submit"].wpcf7-submit:hover,
.qpform__form input[type="submit"].wpcf7-submit:hover { filter: brightness(1.07); transform: translateY(-2px); }
.qx-form .wpcf7-spinner,
.qpform__form .wpcf7-spinner { display: block; margin: 10px auto 0; }
.qx-form .wpcf7-response-output,
.qpform__form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
}
.qx-form .wpcf7-not-valid-tip,
.qpform__form .wpcf7-not-valid-tip { font-size: 12px; }