/* Strategic Labs — V002-M4 Wave 4: signature motion (scarce, finite) and the
   Contact success composition.

   MOTION BUDGET ACROSS THE PUBLIC EXPERIENCE — three signature moments:
     1. Home hero settle-in           (m4-home.css; once, 720ms)
     2. Verified-metric count-up      (MetricCounter; once, ~1.05s, exact final value)
     3. Strategic Planning axis draw  (below; once, on first view)
   Everything else is interaction feedback (tab/hover/focus transitions).

   The M2 infinite 32s gradient drift on every dark surface was perpetual
   decorative motion — forbidden — so every drifting layer is now still. The
   gradients remain as static depth. Reduced motion = the same final states. */

/* ---- perpetual decorative motion: OFF everywhere ---- */
.section--dark::before, .hero4::before, .cta::before, .closing-cta::before, .mega::before,
.site-footer::before, .article-hero::before, .phero::before, .consultation::before,
.m2-axis-focus::before, .about-vmv__vision::before, .close4__panel::before {
  animation: none !important; transform: none !important;
}

/* ---- signature moment 3: the direction axis draws in once ---- */
@media (prefers-reduced-motion: no-preference) {
  .dir4::before { transform-origin: 100% 50%; transform: scaleX(0); }
  .dir4::after { opacity: 0; }
  .dir4 > li.dir4__gate { opacity: 0; transform: translateY(6px); }
  .dir4[data-inview="true"]::before { animation: dir4-axis 640ms var(--ease-out) forwards; }
  .dir4[data-inview="true"]::after  { animation: dir4-fade 300ms var(--ease-out) 520ms forwards; }
  .dir4[data-inview="true"] > li.dir4__gate { animation: dir4-gate 420ms var(--ease-out) forwards; }
  .dir4[data-inview="true"] > li.dir4__gate:nth-child(1) { animation-delay: 160ms; }
  .dir4[data-inview="true"] > li.dir4__gate:nth-child(2) { animation-delay: 300ms; }
  .dir4[data-inview="true"] > li.dir4__gate:nth-child(3) { animation-delay: 440ms; }
  .dir4[data-inview="true"] > li.dir4__gate:nth-child(4) { animation-delay: 580ms; }
  @keyframes dir4-axis { to { transform: scaleX(1); } }
  @keyframes dir4-fade { to { opacity: 1; } }
  @keyframes dir4-gate { to { opacity: 1; transform: none; } }
  /* mobile: the axis is vertical — draw top to bottom */
  @media (max-width: 599px) { .dir4::before { transform-origin: 50% 0; transform: scaleY(0); } @keyframes dir4-axis { to { transform: scaleY(1); } } }
}
@media (prefers-reduced-motion: reduce) {
  .dir4::before, .dir4::after, .dir4 > li.dir4__gate { opacity: 1; transform: none; animation: none; }
}

/* ---- Contact success: acknowledgement + concierge action surface ---- */
.success4 .success4__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(320px, 5fr); gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.success4__ack { display: grid; justify-items: start; gap: 0; padding-block-start: var(--s4); }
.success4__ack h1 { max-width: 14ch; margin-bottom: var(--s5); }
.success4__context { margin: var(--s2) 0 0; padding-block-start: var(--s4); border-block-start: var(--rule); inline-size: min(100%, 420px); }
.success4__context > div { display: grid; gap: var(--s1); }
.success4__context dt { color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.success4__context dd { margin: 0; font-weight: 600; }
.success4__concierge { position: relative; padding: clamp(1.5rem, 2.6vw, 2.5rem); background: var(--ink-800); color: var(--on-dark);
  border-radius: var(--tab-sm); border-start-start-radius: var(--tab); overflow: clip; isolation: isolate; }
.success4__concierge::before { content: ""; position: absolute; inset: -30% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 55% at 78% 12%, rgba(68,188,167,.26), transparent 64%); }
.success4__concierge .contact-methods { margin: 0; }
.success4__concierge .contact-methods h2 { color: var(--brand); }
.success4__concierge .contact-method { background: rgba(255,255,255,.05); border-color: var(--line-dark); box-shadow: none; color: var(--on-dark); }
.success4__concierge .contact-method:hover { border-color: var(--line-dark-str); background: rgba(174,226,209,.08); }
.success4__concierge .contact-method__label { color: var(--on-dark-muted); }
.success4__concierge .contact-method__value { color: var(--on-dark); }
.success4__concierge .contact-method__icon { background-color: rgba(174,226,209,.12); }
.success4__concierge .contact-method[data-method="whatsapp"] { background: var(--brand); border-color: var(--brand); color: var(--ink-900); }
.success4__concierge .contact-method[data-method="whatsapp"] .contact-method__label { color: var(--brand-deep); }
.success4__concierge .contact-method[data-method="whatsapp"] .contact-method__value { color: var(--ink-900); }
.success4__concierge .contact-method[data-method="whatsapp"] .contact-method__cue { color: var(--ink-900); }
.success4__concierge .contact-method[data-method="whatsapp"] .contact-method__icon { background-color: var(--brand-deep); }
.success4__concierge .contact-method[data-method="whatsapp"]:hover { background: var(--mint); border-color: var(--mint); }
.inquiry-success .contact-methods { max-inline-size: none; }

@media (max-width: 1023px) {
  .success4 .success4__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .success4__ack h1 { max-width: 20ch; }
}
@media (max-width: 599px) {
  .success4__concierge { padding: var(--s5); }
}