/* ================================================================== */
/* Instant Quote CTA — ink card with Jon portrait (between webinars    */
/* and FAQs)                                                           */
/* ================================================================== */

.qc {
  background: var(--surface-page, #f6f3ec);
  padding: 0 80px 36px;
  position: relative;
  font-family: var(--font-sans);
}
/* On the secondary pages (about/blog/post) the CTA sits directly above the
   footer. Matching the On Demand treatment, the section above already carries
   its own bottom spacing, so the CTA drops its top padding and keeps only the
   bottom breathing room. The homepage keeps its own #home > .qc spacing. */
#about > .qc, #blog > .qc, #post > .qc, #ondemand > .qc, #odpost > .qc, #resources > .qc,
#casestudies > .qc, #respost > .qc, #cxpost > .qc, #awards > .qc,
#servicespage > .qc, #servicepost > .qc, #ourwork > .qc, #workpost > .qc,
#workproject > .qc {
  padding-top: 0;
  padding-bottom: 100px;
}
@media (max-width: 760px) {
  #about > .qc, #blog > .qc, #post > .qc, #ondemand > .qc, #odpost > .qc, #resources > .qc,
  #casestudies > .qc, #respost > .qc, #cxpost > .qc, #awards > .qc,
  #servicespage > .qc, #servicepost > .qc, #ourwork > .qc, #workpost > .qc,
  #workproject > .qc { padding-top: 0; padding-bottom: 72px; }
}
/* The two overview hubs carry equal space above and below the CTA, so the band
   between the ink strip that closes each page and the ink CTA card reads
   symmetrical. Same specificity as the rule above, so source order wins.
   Mirrored at the mobile breakpoint so the two stay equal there too. */
#servicespage > .qc, #ourwork > .qc, #workproject > .qc { padding-top: 100px; }
@media (max-width: 760px) {
  #servicespage > .qc, #ourwork > .qc, #workproject > .qc { padding-top: 72px; }
}
/* Service pages: the CTA follows "Works well with" (.sv-related), which sits
   on --surface-paper rather than --surface-page. Match it so the two read as
   one continuous band down to the footer instead of showing a seam. */
#servicepost > .qc { background: var(--surface-paper, #f0ece1); }
.qc-card {
  max-width: 1280px; margin: 0 auto; position: relative;
  background: var(--surface-ink, #0d0f0f);
  border-radius: 28px;
  padding: 64px 640px 64px 72px;
  min-height: 380px; box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
/* warm orange glow bleeding from the portrait edge (DS dark-section treatment) */
.qc-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 80% at 100% 18%, rgba(255,166,62,0.28) 0%, transparent 62%);
}
.qc-copy { position: relative; z-index: 3; max-width: 560px; }
.qc-title {
  margin: 0; font-size: 42px; font-weight: 900; line-height: 1.08;
  letter-spacing: -0.025em; color: #fff; text-wrap: balance;
}
.qc-title mark {
  background: var(--gradient-signature, linear-gradient(90deg, #ff43a4, #ffa63e));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.qc-lead {
  margin: 18px 0 0; font-size: 16px; line-height: 1.6; font-weight: 500;
  color: rgba(255,255,255,0.66); max-width: 540px; text-wrap: pretty;
}

/* tick row ---------------------------------------------------------- */
.qc-ticks {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.qc-ticks li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: rgba(255,255,255,0.88);
}
.qc-ticks svg, .qc-ticks [data-lucide] { color: var(--green-500, #28dc9a); flex-shrink: 0; }

.qc-ctas { margin-top: 30px; display: flex; align-items: center; gap: 18px; }
.qc-proof {
  display: flex; align-items: center; gap: 10px; margin-top: 24px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.72);
}
.qc-stars { color: var(--green-500, #28dc9a); font-size: 15px; letter-spacing: 2px; }

/* people ------------------------------------------------------------- */
.qc-people { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 660px; pointer-events: none; }
/* single shared bottom veil so per-figure gradients don't leave box edges;
   paint order: back figure → front figure → veil (::after) → captions (z4) */
.qc-people::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 82%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%);
}
.qc-person { position: absolute; bottom: 0; margin: 0; }
.qc-person--back { right: 300px; width: 360px; }
.qc-person--front { right: 0; width: 360px; }
.qc-person img { display: block; width: 100%; height: auto; }
/* Carla is a rectangular photo on black; fade its edges into the card.
   Jon is a transparent cutout, no mask needed. */
.qc-person--front img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%),
                      linear-gradient(180deg, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%),
              linear-gradient(180deg, transparent 0%, #000 14%);
  mask-composite: intersect;
}

/* lower thirds -------------------------------------------------------- */
.qc-lower {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  margin: 0; padding: 52px 22px 18px;
  color: #fff; text-align: center;
}
.qc-lower b {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
}
.qc-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fbf-green, #28dc9a);
  box-shadow: 0 0 10px 2px rgba(40,220,154,0.7);
}
.qc-lower span {
  display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.qc-lower .qc-exp { margin-top: 2px; font-size: 9px; color: rgba(255,255,255,0.5); }

/* responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .qc { padding: 0 40px 36px; }
  .qc-card { padding: 52px 430px 52px 52px; }
  .qc-title { font-size: 34px; }
  .qc-people { width: 440px; }
  .qc-person--back { right: 205px; width: 235px; }
  .qc-person--front { width: 235px; }
  .qc-lower { padding: 40px 16px 14px; }
  .qc-lower b { font-size: 15px; }
}
@media (max-width: 1024px) {
  .qc { padding: 0 24px 32px; }
  .qc-card { padding: 52px 44px 0; min-height: 0; }
  .qc-copy { max-width: none; }
  .qc-people {
    position: static; width: auto; pointer-events: auto;
    display: flex; justify-content: center; align-items: flex-end;
    margin-top: 36px;
  }
  .qc-person { position: relative; }
  .qc-person--back { right: auto; width: 47%; }
  .qc-person--front { right: auto; width: 47%; }
}