/* QA consulting services page. Every rule is scoped with the qcs- prefix so
   nothing here leaks into shared header/footer styles. */

html { scroll-padding-top: 150px; }

/* Lenis smooth scroll (js/page/qa-consulting-motion.js). Native smooth
   scrolling must stay off while Lenis drives the scroll position. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- typeface ---------- */
/* style.css sets Poppins on html and the header uses .font-inter/.font-sans
   helpers, so override those too for one consistent family on this page. */
body.qcs-page,
.qcs-page .font-inter,
.qcs-page .font-sans,
.qcs-page button,
.qcs-page input,
.qcs-page select,
.qcs-page textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- shared tokens ---------- */
.qcs-page {
  --qcs-blue: #4361EE;
  --qcs-blue-soft: #8FB0FF;
  --qcs-ink: #0B1220;
  --qcs-night: #050B1F;
  --qcs-line: #E3E7F0;
  --qcs-muted: #5B6478;
  --qcs-pass: #34D399;
  --qcs-fail: #F87171;
}

.qcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qcs-blue);
}
.qcs-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.qcs-eyebrow--light { color: #7FB0FF; font-weight: 600; }

.qcs-link {
  color: var(--qcs-blue);
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease;
}
.qcs-link:hover { background-size: 100% 1px; }
.qcs-link--light { color: var(--qcs-blue-soft); }

/* ---------- buttons ---------- */
.qcs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 28px;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.qcs-btn--primary { background: var(--qcs-blue); color: #fff; }
.qcs-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2f43b8;
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}
.qcs-btn--primary:hover::before { transform: translateY(0); }
.qcs-btn--outline {
  border: 1px solid rgba(17, 24, 39, 0.2);
  background: rgba(255, 255, 255, 0.6);
  color: #111827;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.qcs-btn--outline:hover { border-color: #111827; background: #fff; }
.qcs-btn__arrow { transition: transform 0.3s ease; }
.qcs-btn:hover .qcs-btn__arrow { transform: translateX(4px); }

/* ---------- hero ---------- */
/* The banner is a full-bleed background; headline lines rise out of masks. */
.qcs-hero__bg { transform-origin: 70% 50%; }
.qcs-hero__title .qcs-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.qcs-hero__title .qcs-line > span { display: inline-block; }

/* JS adds .qcs-js to <html> when motion is allowed; hero items start hidden
   only then, so the page never renders blank without GSAP. */
.qcs-js [data-qcs-hero] { opacity: 0; }

/* ---------- benchmark figures ---------- */
.qcs-bench > div { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.qcs-figure { font-variant-numeric: tabular-nums; }
.qcs-bar-track { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.qcs-bar-fill { height: 100%; border-radius: 999px; transform-origin: left center; }

/* ---------- comparison table ---------- */
.qcs-compare th, .qcs-compare td { padding: 18px 22px; vertical-align: top; }
.qcs-compare tbody tr + tr td { border-top: 1px solid var(--qcs-line); }
.qcs-compare .is-focus {
  background: #F2F5FF;
  color: var(--qcs-ink);
  font-weight: 600;
  box-shadow: inset 1px 0 0 #D5DEFF, inset -1px 0 0 #D5DEFF;
}
.qcs-compare thead .is-focus { background: var(--qcs-blue); color: #fff; box-shadow: none; }

/* ---------- service catalog ---------- */
.qcs-rows > li {
  border-top: 1px solid var(--qcs-line);
  transition: background-color 0.3s ease, padding-left 0.3s ease;
}
.qcs-rows > li:last-child { border-bottom: 1px solid var(--qcs-line); }
.qcs-rows > li:hover { background: #F7F9FF; }
.qcs-rows__num { font-variant-numeric: tabular-nums; }

/* ---------- image treatments ---------- */
.qcs-img {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #E8EDFB;
}
.qcs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.qcs-img:hover img { transform: scale(1.04); }
.qcs-img--offset { box-shadow: 24px 24px 0 0 #EEF2FF; }
@media (max-width: 767px) { .qcs-img--offset { box-shadow: 12px 12px 0 0 #EEF2FF; } }

.qcs-layered { position: relative; }
.qcs-layered__back {
  position: absolute;
  inset: -24px 48px 48px -24px;
  border-radius: 28px;
  background:
    linear-gradient(to right, rgba(67, 97, 238, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67, 97, 238, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid #DCE4FF;
}
@media (max-width: 767px) { .qcs-layered__back { inset: -12px 24px 24px -12px; } }

/* ---------- automation rules ---------- */
.qcs-rule { border-top: 3px solid; }
.qcs-rule__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

/* Worked example: hours per year as horizontal bars. */
.qcs-hours__track { position: relative; height: 44px; border-radius: 12px; background: #EEF1F8; overflow: hidden; }
.qcs-hours__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 12px;
  transform-origin: left center;
  display: flex;
  align-items: center;
  padding-left: 16px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.qcs-hours__seg { height: 100%; }

/* ---------- AI tiles ---------- */
.qcs-ai > div {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.qcs-ai > div:hover { border-color: rgba(143, 176, 255, 0.5); background: rgba(67, 97, 238, 0.08); transform: translateY(-4px); }

/* ---------- tools ---------- */
.qcs-tools > li { border-top: 1px solid var(--qcs-line); }
.qcs-tools > li:last-child { border-bottom: 1px solid var(--qcs-line); }
.qcs-tool {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #DCE4FF;
  background: #F7F9FF;
  font-size: 13px;
  font-weight: 600;
  color: #24306b;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.qcs-tools > li:hover .qcs-tool { background: var(--qcs-blue); border-color: var(--qcs-blue); color: #fff; }

/* ---------- metrics ---------- */
.qcs-metrics > li { border-top: 1px solid var(--qcs-line); }
.qcs-metrics > li:last-child { border-bottom: 1px solid var(--qcs-line); }

/* ---------- pricing ---------- */
.qcs-price th, .qcs-price td { padding: 18px 22px; }
.qcs-price tbody tr { border-top: 1px solid var(--qcs-line); transition: background-color 0.25s ease; }
.qcs-price tbody tr:hover { background: #F7F9FF; }
.qcs-price .is-start { background: #F2F5FF; }

.qcs-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- engagement weeks ---------- */
.qcs-weeks { position: relative; }
.qcs-weeks__line {
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.qcs-weeks__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #4361EE, #8FB0FF);
  transform-origin: top center;
}
.qcs-week__dot {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #0B1220;
  border: 2px solid #4361EE;
}

/* ---------- industries ---------- */
.qcs-banner { position: relative; overflow: hidden; }
.qcs-banner img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.qcs-sectors > div { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* ---------- routing ---------- */
.qcs-route a { transition: background-color 0.25s ease; }
.qcs-route a:hover { background: #F7F9FF; }
.qcs-route a:hover .qcs-route__arrow { transform: translateX(6px); }
.qcs-route__arrow { transition: transform 0.3s ease; }

/* ---------- FAQ ---------- */
.qcs-faq details { border-top: 1px solid var(--qcs-line); }
.qcs-faq details:last-of-type { border-bottom: 1px solid var(--qcs-line); }
.qcs-faq summary { list-style: none; }
.qcs-faq summary::-webkit-details-marker { display: none; }
.qcs-faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.qcs-faq__icon::before,
.qcs-faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  background: var(--qcs-blue);
  transition: transform 0.3s ease;
}
.qcs-faq__icon::after { transform: rotate(90deg); }
.qcs-faq details[open] .qcs-faq__icon::after { transform: rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .qcs-img img,
  .qcs-btn,
  .qcs-btn::before,
  .qcs-btn__arrow,
  .qcs-ai > div,
  .qcs-route__arrow { transition: none; }
}