/* ============================================================
   QX motion: subtle, premium scroll + ambient animation.
   Site-wide. Respects prefers-reduced-motion.
   ============================================================ */

/* Scroll-reveal base. Elements get .qx-reveal via JS, then .qx-in when visible. */
.qx-reveal {
  opacity: 0;
  transform: translateY(22px);
  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;
}
.qx-reveal.qx-in {
  opacity: 1;
  transform: none;
}
/* Stagger children inside a revealed grid/row */
.qx-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.qx-stagger.qx-in > * { opacity: 1; transform: none; }
.qx-stagger.qx-in > *:nth-child(1) { transition-delay: 0.04s; }
.qx-stagger.qx-in > *:nth-child(2) { transition-delay: 0.10s; }
.qx-stagger.qx-in > *:nth-child(3) { transition-delay: 0.16s; }
.qx-stagger.qx-in > *:nth-child(4) { transition-delay: 0.22s; }
.qx-stagger.qx-in > *:nth-child(5) { transition-delay: 0.28s; }
.qx-stagger.qx-in > *:nth-child(6) { transition-delay: 0.34s; }
.qx-stagger.qx-in > *:nth-child(7) { transition-delay: 0.40s; }
.qx-stagger.qx-in > *:nth-child(n+8) { transition-delay: 0.44s; }

/* Nav: condense + shadow once the page is scrolled */
.nav, .strat-nav {
  transition: box-shadow 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}
.qx-nav-scrolled.nav, .qx-nav-scrolled.strat-nav {
  box-shadow: 0 6px 24px rgba(24, 24, 27, 0.08);
}

/* Hero swoosh: very slow ambient drift */
.strat-hero-dna3-swoosh {
  animation: qx-swoosh-drift 26s ease-in-out infinite alternate;
  transform-origin: 70% 30%;
}
@keyframes qx-swoosh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-1.4%, 1.2%, 0) scale(1.035); }
}

/* Strip "sheen": a faint light sweep on the gold pattern strips on hover */
.la-sector-strip, .la-catcard-strip { position: relative; overflow: hidden; }
.la-sector-strip::after, .la-catcard-strip::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.cl-workstream-card:hover .la-sector-strip::after,
.la-catcard:hover .la-catcard-strip::after { transform: translateX(120%); }

/* CTA arrow nudge on hover (covers common arrow buttons) */
.btn svg, .nav-cta svg, .strat-bigstats-cta svg, .strat-pain-cta svg,
.cl-workstream-link svg, .la-catcard-link svg, .strat-hero-dna3-cta svg {
  transition: transform 0.2s ease;
}
.btn:hover svg, .strat-bigstats-cta:hover svg, .strat-pain-cta:hover svg,
.cl-workstream-card:hover .cl-workstream-link svg,
.la-catcard:hover .la-catcard-link svg,
.strat-hero-dna3-cta:hover svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .qx-reveal, .qx-reveal.qx-in,
  .qx-stagger > *, .qx-stagger.qx-in > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .strat-hero-dna3-swoosh { animation: none !important; }
  .la-sector-strip::after, .la-catcard-strip::after { display: none; }
}

/* ============================================================
   WhatsApp floating button + proactive nudge (B1: bubble + gold dot).
   FAB is injected by qxt.js on pages that have none, so styles live
   here (loaded site-wide). Literal values, no qxt.css token dependency.
   ============================================================ */
.whatsapp-fab {
  position: fixed; right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  background: #25D366; color: #fff;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; transition: transform 0.2s;
}
.whatsapp-fab:hover { transform: scale(1.05); }
.whatsapp-fab svg { width: 30px; height: 30px; }

/* gold "unread" dot, shown once with the nudge */
.whatsapp-fab .wa-dot {
  position: absolute; top: 1px; right: 1px; width: 13px; height: 13px;
  border-radius: 9999px; background: #B8842C; border: 2px solid #fff;
  opacity: 0; transform: scale(0.3);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.whatsapp-fab.cue-dot .wa-dot { opacity: 1; transform: scale(1); }

.wa-nudge {
  position: fixed; right: 24px; bottom: 92px; width: 244px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
  padding: 14px 16px; z-index: 99;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.wa-nudge.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-nudge::after {
  content: ""; position: absolute; right: 22px; bottom: -7px;
  width: 14px; height: 14px; background: #fff;
  border-right: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;
  transform: rotate(45deg);
}
.wa-nudge-text {
  display: block; font-size: 13.5px; line-height: 1.5; color: #52525B;
  margin: 0; padding-right: 14px; text-decoration: none;
}
.wa-nudge-text strong { color: #18181B; font-weight: 700; }
.wa-nudge-text:hover strong { color: #B8842C; }
.wa-nudge-text:focus-visible { outline: 2px solid #B8842C; outline-offset: 3px; border-radius: 4px; }
.wa-nudge-close {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #71717A; cursor: pointer;
  font-size: 18px; line-height: 1; border-radius: 9999px;
}
.wa-nudge-close:hover { background: #F1F5F9; color: #18181B; }
.wa-nudge-close:focus-visible { outline: 2px solid #B8842C; outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .wa-nudge { transition: none; transform: none; }
  .whatsapp-fab .wa-dot { transition: opacity 0.3s ease; transform: scale(1); }
}

/* ============================================================
   Contact chooser (WhatsApp + WeChat) + WeChat QR modal.
   FAB reuses .whatsapp-fab styling; here we add the icon swap,
   the choices panel and the QR modal. Injected by qxt.js.
   ============================================================ */
.whatsapp-fab { cursor: pointer; border: none; padding: 0; }
.whatsapp-fab .fab-ic-close { display: none; }
.whatsapp-fab[aria-expanded="true"] .fab-ic-open { display: none; }
.whatsapp-fab[aria-expanded="true"] .fab-ic-close { display: block; }
.whatsapp-fab:focus-visible { outline: 3px solid #B8842C; outline-offset: 3px; }

.contact-choices {
  position: fixed; right: 24px; bottom: 92px; width: 260px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
  padding: 8px; z-index: 99;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-choices.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.contact-choice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 8px; text-decoration: none; color: #18181B;
  background: none; border: none; width: 100%; cursor: pointer;
  text-align: left; font-family: inherit;
}
.contact-choice:hover { background: #F5F1E8; }
.contact-choice:focus-visible { outline: 2px solid #B8842C; outline-offset: -2px; }
.contact-choice-ic { width: 40px; height: 40px; flex: none; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.contact-choice-ic.wa { background: #25D366; }
.contact-choice-ic.wc { background: #07C160; }
.contact-choice-ic svg { width: 24px; height: 24px; color: #fff; }
.contact-choice-txt strong { display: block; font-size: 14.5px; font-weight: 700; }
.contact-choice-txt small { display: block; font-size: 12px; color: #71717A; margin-top: 1px; }

.wc-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(24,24,27,0.55); padding: 24px; }
.wc-modal.open { display: flex; }
.wc-modal-card { background: #fff; border-radius: 16px; padding: 28px 28px 24px; max-width: 340px; width: 100%; text-align: center; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.wc-modal-card h3 { margin: 0 0 4px; font-size: 18px; }
.wc-modal-card .wc-sub { margin: 0 0 18px; font-size: 13px; color: #71717A; }
.wc-modal-card img { width: 100%; max-width: 240px; height: auto; border-radius: 8px; }
.wc-modal-hint { margin: 14px 0 0; font-size: 12.5px; color: #52525B; }
.wc-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; background: #F1F5F9; color: #52525B; border-radius: 9999px; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wc-modal-close:hover { background: #E5E7EB; color: #18181B; }
.wc-modal-close:focus-visible { outline: 2px solid #B8842C; outline-offset: 2px; }

/* nudge text acts as a button that opens the chooser */
.wa-nudge-text { background: none; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }