/* MTA360 Project Elevate — sitewide styles: shared keyframes, image-slot placeholder
   treatment, header/footer component classes. Page-body sections keep the source
   design's inline styles verbatim (see page-*.php) for exact per-page fidelity;
   this file only carries the parts that repeat across every page. */

body.mta-elevate { margin:0; background:var(--navy-deep); font-family:var(--font-sans); overflow-x:clip; }
:where(.mta-elevate) a { color:var(--gold-executive); }
:where(.mta-elevate) a:hover { color:var(--gold-soft); }

@keyframes mtaTorchIgnite { 0% { opacity:0; transform:translateY(6px) scale(0.96); } 45% { opacity:1; filter:drop-shadow(0 0 26px rgba(212,176,106,0.75)); transform:translateY(0) scale(1.02); } 100% { opacity:1; filter:drop-shadow(0 0 12px rgba(212,176,106,0.32)); transform:none; } }

/* Home hero logo animation -- plays a deterministic sprite-sheet frame animation
   (the sole animation engine, universal across desktop/tablet/mobile -- see
   UNIFIED-LOGO-ANIMATION-SYSTEM-REPORT.md), then leaves the static final-frame
   shield visible (mta-motion.js drives play/ended/error state via
   is-sprite-playing/is-complete/has-failed classes). Sized to match the footprint
   of the pre-existing static torch mark this replaces on the homepage hero only --
   unrelated to the separate [data-torch]/mtaTorchIgnite mark still used elsewhere
   (e.g. page-app.php), which this does not touch. */
.mta-home-hero-logo {
  --mta-logo-final-scale: 1;
  --mta-logo-final-x: 0px;
  --mta-logo-final-y: 0px;
  width: clamp(80px, 10vw, 138px);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  line-height: 0;
  flex: 0 0 auto;
  pointer-events: none;
  background: transparent;
  overflow: visible;
  isolation: isolate;
  /* Parent hero-copy column is align-items:flex-start (keeps the eyebrow line and
     H1 left-aligned); this centers just the logo within that same column, for
     both desktop and mobile since the column markup and this rule aren't gated
     by any breakpoint. */
  align-self: center;
}

/* Sprite-sheet layer -- the sole animation engine now, for every viewport and every
   browser (see UNIFIED-LOGO-ANIMATION-SYSTEM-REPORT.md). A single static image
   tiling all 169 animation frames in a 13x13 grid, stepped via requestAnimationFrame
   background-position percentage math in mta-motion.js (playSprite()/setSpriteFrame()).
   A plain background-image has no independent timeline to fight with, so frame
   stepping is fully deterministic and cancellable -- this is why the format was
   chosen over the animated-image and WebM branches it replaced. background-size is
   a percentage (1300% = 13-wide/tall grid), so this rule works unchanged regardless
   of which resolution tier's sheet mta-motion.js loads (a higher-resolution sheet
   for desktop/HiDPI widths, a smaller one everywhere else -- resolution-only
   difference, same CSS either way). z-index:1, below __final's z-index:2, so the
   is-ending crossfade shows the shield fading in on top rather than popping in once
   playback hard-cuts. */
.mta-home-hero-logo__sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 1300% 1300%;
  background-position: 0% 0%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background-color: transparent;
}

.mta-home-hero-logo__final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  z-index: 2;
  opacity: 0;
  transition: opacity 850ms ease;
  transform: translate(var(--mta-logo-final-x), var(--mta-logo-final-y)) scale(var(--mta-logo-final-scale));
  transform-origin: center center;
}

.mta-home-hero-logo.is-sprite-playing .mta-home-hero-logo__final {
  opacity: 0;
}

.mta-home-hero-logo.is-sprite-playing .mta-home-hero-logo__sprite {
  opacity: 1;
}

/* Short crossfade for the final ~900ms of playback (mta-motion.js adds is-ending via
   a requestAnimationFrame-driven elapsed-time check) -- the static shield fades in
   on top of the still-playing sprite animation (z-index 2 over 1) instead of
   popping in only once playback hard-cuts. The sprite layer itself is only hidden
   once is-complete/has-failed is reached, never at is-ending. */
.mta-home-hero-logo.is-ending .mta-home-hero-logo__final,
.mta-home-hero-logo.is-complete .mta-home-hero-logo__final,
.mta-home-hero-logo.has-failed .mta-home-hero-logo__final {
  opacity: 1;
}

.mta-home-hero-logo.is-complete .mta-home-hero-logo__sprite,
.mta-home-hero-logo.has-failed .mta-home-hero-logo__sprite {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mta-home-hero-logo__sprite {
    display: none;
  }

  .mta-home-hero-logo__final {
    opacity: 1;
  }
}@keyframes mtaFlowDot { 0% { left:0%; opacity:0; } 8% { opacity:1; } 92% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes mtaGoldDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* image-slot placeholder (empty state) — mirrors the Claude Design canvas's own
   empty-slot treatment (image-slot.js): caption parked bottom-right, muted opacity.
   Real photography replaces this div's background-image when delivered
   (see MTA360-IMAGE-GAP-AUDIT.md for the pending list). */
.mta-image-slot { position:relative; width:100%; height:100%; background:linear-gradient(135deg, rgba(212,176,106,0.08), rgba(13,27,42,0.35)); display:flex; align-items:flex-end; justify-content:flex-end; text-align:right; }
.mta-image-slot__caption { padding:30px 34px; font-size:12px; line-height:1.5; color:var(--slate-gray); opacity:0.55; max-width:60%; }
.mta-image-slot--filled { background-size:cover; background-position:center; }

/* Homepage trust bar (4 credibility items directly below the hero) -- previously an
   inline display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) with no
   explicit breakpoints. auto-fit recalculates its column count purely from container
   width vs. the 230px floor, with no deliberate control over exactly where it steps
   from 4 columns to fewer -- at some in-between desktop/tablet widths this produced
   uneven-feeling spacing (human review: "spacing between these items is inconsistent").
   Replaced with an explicit, deliberately-controlled grid: 4 equal 1fr columns on
   desktop/large-tablet, 2x2 below 900px, single-column stack below 600px -- each step
   is now a specific, intentional decision instead of an implicit content-driven one. */
.home-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 24px;
}

.home-trust-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

@media (max-width: 900px) {
  .home-trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
}

@media (max-width: 600px) {
  .home-trust-bar {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/* ---------------- Header ---------------- */
.mta-elevate-header-spacer { height:79px; }
[data-mta-header] { position:fixed; top:0; left:0; right:0; z-index:900; background:rgba(10,20,32,0.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid rgba(212,176,106,0.18); font-family:var(--font-sans); transition:box-shadow 200ms ease; }
.mta-elevate-header-inner { max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,32px); height:78px; }
.mta-elevate-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.mta-elevate-logo img { height:40px; width:auto; display:block; }
.mta-elevate-logo-word { display:flex; flex-direction:column; line-height:1; }
.mta-elevate-logo-word strong { font-family:var(--font-display); font-weight:600; font-size:22px; color:#FFFFFF; letter-spacing:0.5px; }
.mta-elevate-logo-word strong span { color:var(--gold-executive); }
.mta-elevate-logo-word small { font-size:8.5px; letter-spacing:2.6px; color:var(--slate-gray); margin-top:5px; text-transform:uppercase; }

[data-nav] { display:flex; align-items:stretch; gap:6px; height:78px; }
[data-nav-item] { position:relative; display:flex; align-items:center; }
[data-nav-item] > a { display:flex; align-items:center; gap:7px; padding:0 14px; height:78px; font-size:13px; font-weight:600; letter-spacing:0.4px; color:#E8EDF2; text-decoration:none; white-space:nowrap; }
[data-caret] { display:inline-block; width:6px; height:6px; border-right:1.4px solid var(--gold-brass); border-bottom:1.4px solid var(--gold-brass); transform:rotate(45deg) translateY(-2px); transition:transform 220ms var(--ease-editorial); }
[data-underline] { position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--gold-executive); transform:scaleX(0); transform-origin:left; transition:transform 220ms var(--ease-editorial); }
[data-panel] { display:none; position:absolute; top:78px; left:0; min-width:300px; background:rgba(10,20,32,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(212,176,106,0.2); border-radius:8px; box-shadow:0 24px 60px rgba(5,12,20,0.55); padding:14px; flex-direction:column; gap:2px; }
[data-panel-link] { display:block; padding:11px 14px; border-radius:4px; font-size:13.5px; font-weight:500; color:#DDE4EB; text-decoration:none; }
.mta-elevate-cta { flex-shrink:0; background:var(--gold-executive); color:var(--navy-deep); padding:14px 22px; border-radius:4px; font-size:11.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; text-decoration:none; transition:background 220ms var(--ease-editorial), transform 220ms var(--ease-editorial); }
.mta-elevate-cta:hover { background:var(--gold-soft); color:var(--navy-deep); transform:translateY(-2px); }
[data-burger] { display:none; width:48px; height:48px; flex-shrink:0; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(212,176,106,0.3); border-radius:4px; cursor:pointer; }
[data-burger] span span { display:block; width:20px; height:1.5px; background:var(--gold-executive); margin-bottom:5px; }
/* Off-canvas panel sliding in from the right, positioned below the header bar
   (top:79px = header's 78px height + 1px border, matching .mta-elevate-header-spacer)
   so it never overlaps the header row -- both this and the backdrop below are DOM
   siblings of <header>, not descendants of it (see header.php), because nesting them
   inside header previously put them in header's own stacking context where their
   z-index beat the burger button's implicit z-index and silently ate its taps.
   Spans down to the viewport bottom with its own scroll, so it stays tall enough to
   show every link even with multiple categories expanded. visibility is included in
   the transition list so the panel is untabbable while off-screen. */
[data-drawer] { display:flex; position:fixed; top:79px; right:0; bottom:0; width:min(360px,86vw); max-width:360px; background:rgba(8,17,28,0.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-left:1px solid rgba(212,176,106,0.18); box-shadow:-24px 0 60px rgba(5,12,20,0.55); overflow-y:auto; z-index:881; padding:24px 24px 48px; flex-direction:column; gap:2px; transform:translateX(100%); visibility:hidden; pointer-events:none; transition:transform 320ms cubic-bezier(.22,1,.36,1), visibility 320ms; }
[data-drawer].is-open { transform:translateX(0); visibility:visible; pointer-events:auto; }
/* Dims the page behind the drawer and closes it on tap-outside (mta-header.js). */
[data-drawer-backdrop] { position:fixed; top:79px; right:0; bottom:0; left:0; background:rgba(5,10,16,0.6); z-index:875; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 280ms ease, visibility 280ms; }
[data-drawer-backdrop].is-open { opacity:1; visibility:visible; pointer-events:auto; }

/* ---------------- Footer ---------------- */
[data-mta-footer] { background:var(--navy-deep); font-family:var(--font-sans); color:var(--slate-gray); border-top:1px solid rgba(212,176,106,0.18); }
.mta-elevate-footer-grid { max-width:1320px; margin:0 auto; padding:88px 40px 40px; display:grid; grid-template-columns:1.25fr 0.9fr 0.9fr 1.1fr; gap:56px; }
.mta-elevate-footer-bottom-wrap { max-width:1320px; margin:0 auto; padding:0 40px; }
[data-footer-links] a { font-size:13.5px; color:#98A6B4; text-decoration:none; }

@media (max-width:1180px) {
  .mta-elevate-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .mta-elevate-footer-grid { grid-template-columns:1fr; padding-top:56px; }
}

/* ---------------- Body buttons / cards (reusable across page templates) ----------------
   Replaces the design export's canvas-only `style-hover="..."` attribute (has no effect
   in a real browser) with real :hover rules. Page templates keep the rest of each
   section's bespoke inline styles verbatim for exact fidelity; only interactive states
   move here. */
.mta-btn-gold { display:inline-block; background:var(--gold-executive); color:var(--navy-deep); padding:17px 30px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; transition:background 220ms ease, transform 220ms var(--ease-editorial); }
.mta-btn-gold:hover { background:var(--gold-soft); color:var(--navy-deep); transform:translateY(-3px); }
.mta-btn-outline-gold { display:inline-block; background:transparent; color:var(--gold-executive); border:1.5px solid var(--gold-executive); padding:17px 30px; border-radius:4px; font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; transition:background 220ms ease, transform 220ms var(--ease-editorial); }
.mta-btn-outline-gold:hover { background:rgba(212,176,106,0.1); transform:translateY(-3px); }
.mta-crumb-link { color:#E0C88A; font-weight:700; text-decoration:none; transition:color 180ms ease; }
.mta-crumb-link:hover { color:var(--gold-soft); }


/* ---------------- Contact form (real WPForms #92, reskinned to match the design) ----------------
   Scoped under .mta-contact-form so it never leaks into WPForms output elsewhere on the site. */
.mta-contact-form .wpforms-container { margin:0; }
.mta-contact-form .wpforms-form { display:flex; flex-direction:column; gap:var(--space-7); }
.mta-contact-form .wpforms-field { padding:0 !important; margin:0 !important; }
.mta-contact-form .wpforms-field-container { display:flex; flex-direction:column; gap:var(--space-7); }
.mta-contact-form .wpforms-field-label { font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--ivory-champagne) !important; margin-bottom:var(--space-2); }
/* WPForms Modern theme ships no default value for --wpforms-label-color / --wpforms-label-error-color /
   --wpforms-label-sublabel-color (the per-form #wpforms-92 style block that would normally supply them is
   empty), and its own .wpforms-field-label rule (`div.wpforms-container-full .wpforms-field-label`) is more
   specific than a plain two-class selector -- without !important above, the label silently inherited the
   page's unset (effectively black) text color against this form's dark navy card. Same fix applied to the
   required-field asterisk and sublabels (the latter unused by the current field set, kept for safety). */
.mta-contact-form .wpforms-required-label { color:var(--gold-executive) !important; }
.mta-contact-form .wpforms-field-sublabel { color:#8FA1B3 !important; }
.mta-contact-form .wpforms-field-required { color:var(--gold-executive) !important; }
.mta-contact-form input::placeholder, .mta-contact-form textarea::placeholder { color:rgba(255,255,255,0.4) !important; opacity:1; }
.mta-contact-form input[type=text], .mta-contact-form input[type=email], .mta-contact-form input[type=tel], .mta-contact-form input[type=url], .mta-contact-form textarea {
  width:100%; height:50px; padding:0 16px; background:rgba(10,20,32,0.6) !important; border:1px solid rgba(143,161,179,0.28) !important; border-radius:4px !important; color:#FFFFFF !important; font-family:var(--font-sans); font-size:15px !important; outline:none; box-sizing:border-box; transition:border-color 220ms ease, background 220ms ease;
}
.mta-contact-form textarea { height:auto; padding:14px 16px; resize:vertical; }
.mta-contact-form input:focus, .mta-contact-form textarea:focus { border-color:var(--gold-executive) !important; background:rgba(10,20,32,0.85) !important; }
.mta-contact-form .wpforms-field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.mta-contact-form button[type=submit] {
  margin-top:6px; width:100%; height:56px; background:var(--gold-executive) !important; color:var(--navy-deep) !important; border:none !important; border-radius:4px !important; font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; transition:background 220ms ease, transform 220ms var(--ease-editorial);
}
.mta-contact-form button[type=submit]:hover { background:var(--gold-soft) !important; transform:translateY(-2px); }

/* Mobile submit-button text fit -- human review found "Start a Strategic Growth
   Conversation" wrapping too aggressively and colliding with/exceeding the button's
   boundary on mobile. Root cause: the base rule above sets a FIXED height:56px with
   no line-height/white-space control and no explicit padding, sized for the single-
   line case a wide desktop button comfortably fits. On narrow viewports the same
   font-size/letter-spacing needs more horizontal room than exists, so the text wraps
   to 2 lines -- but a fixed height can't grow to contain a second line, so it
   overflows/collides with the button edge instead. Fixed by letting the button grow
   (min-height + height:auto, never a fixed height) and scaling font-size/letter-
   spacing/line-height down modestly via clamp() so 1-2 lines fit comfortably rather
   than forcing a single line at an illegibly small size. No !important needed here:
   WPForms's own CSS (wpforms-full.min.css, enqueued AFTER this stylesheet) sets only
   display:block;width:100% on .wpforms-submit -- no padding/height/line-height/font-
   size/white-space of its own to fight, confirmed by reading that file directly. */
@media (max-width: 767px) {
  .mta-contact-form button[type=submit] {
    width: 100%;
    max-width: 100%;
    min-height: 58px;
    height: auto;
    padding: 14px 22px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.12;
    font-size: clamp(0.78rem, 3.6vw, 0.95rem);
    letter-spacing: clamp(0.035em, 0.7vw, 0.08em);
  }
}

@media (max-width: 380px) {
  .mta-contact-form button[type=submit] {
    padding-inline: 16px;
    font-size: clamp(0.72rem, 3.4vw, 0.84rem);
    letter-spacing: 0.035em;
    line-height: 1.08;
  }
}
.mta-contact-form .wpforms-error, .mta-contact-form label.wpforms-error { color:#E5A5A5; font-size:12.5px; margin-top:4px; }
/* Browser autofill (Chrome/Safari/Edge) forces its own light background + dark text on saved
   Name/Email values, ignoring background/color declarations entirely -- the only supported override is
   -webkit-text-fill-color plus a same-color inset box-shadow large enough to paint over the autofill chip. */
.mta-contact-form input:-webkit-autofill,
.mta-contact-form input:-webkit-autofill:hover,
.mta-contact-form input:-webkit-autofill:focus {
  -webkit-text-fill-color:#FFFFFF !important;
  -webkit-box-shadow:0 0 0px 1000px rgba(10,20,32,0.85) inset !important;
  box-shadow:0 0 0px 1000px rgba(10,20,32,0.85) inset !important;
  caret-color:#FFFFFF;
  transition:background-color 5000s ease-in-out 0s;
}

/* Mobile-only Contact form polish (max-width:767px): larger rounded touch targets and
   a visible gold focus ring for a more premium feel on phones. Desktop's existing
   4px-radius/flat-gold treatment (rules above) is untouched -- only mobile changes.
   The card chrome itself (dark navy background, gold-tinted border, shadow) already
   lives on the #contact-form wrapper in page-contact.php; only its radius/shadow are
   softened here for mobile rather than duplicated onto .mta-contact-form, which would
   have produced a card-inside-a-card look. !important is required on properties the
   desktop rules above already mark !important (input/button border-radius, button
   background, mobile input font-size) -- documented per property below; every other
   mobile rule here needs no !important since it's not overriding an !important rule. */
@media (max-width: 767px) {
  #contact-form {
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  }

  .mta-contact-form .wpforms-field-label {
    /* Bumped from the desktop 11px, which sits below this project's own stated
       12-14px minimum mobile label size -- this closes that gap specifically. */
    font-size: 12px;
  }

  .mta-contact-form input[type=text],
  .mta-contact-form input[type=email],
  .mta-contact-form input[type=tel],
  .mta-contact-form input[type=url],
  .mta-contact-form textarea {
    min-height: 52px;
    border-radius: 16px !important; /* overrides the desktop rule's border-radius:4px !important */
    font-size: 16px !important; /* overrides the desktop rule's font-size:15px !important -- 16px also avoids iOS Safari's auto-zoom-on-focus for inputs under 16px */
  }

  .mta-contact-form textarea {
    min-height: 140px;
  }

  .mta-contact-form input:focus,
  .mta-contact-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(212, 176, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .mta-contact-form button[type=submit] {
    border-radius: 999px !important; /* overrides the desktop rule's border-radius:4px !important */
    background: linear-gradient(135deg, var(--gold-executive), var(--gold-soft)) !important; /* overrides the desktop rule's flat background:var(--gold-executive) !important */
    box-shadow: 0 16px 34px rgba(212, 176, 106, 0.24);
  }
}
@keyframes mtaLivePulse { 0% { opacity:0.35; } 50% { opacity:1; } 100% { opacity:0.35; } }
@keyframes mtaPulseRing { 0% { transform:scale(0.9); opacity:0.55; } 70% { transform:scale(1.5); opacity:0; } 100% { transform:scale(1.5); opacity:0; } }

@keyframes mtaCaret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes mtaTypingDot { 0%,60%,100% { opacity:0.25; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

@keyframes mtaWave { 0%,100% { transform:scaleY(0.35); } 50% { transform:scaleY(1); } }

@keyframes mtaEtaPulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }

/* Homepage "How Growth Compounds" growth-pipeline graphic -- mobile-only vertical chain.
   Scoped to .mta-growth-pipeline (added only to page-home-mta360.php's markup) rather than
   the bare [data-pipeline]/[data-node] attributes those elements also carry, because the
   Training page's "Jack's Proven Sales Framework" section reuses the exact same attribute
   pattern for its own unrelated 4-step pipeline and must not be affected by this change.
   Desktop/tablet (>=768px) are completely untouched here -- the horizontal auto-fit grid
   (repeat(auto-fit,minmax(84px,1fr))) already fits all 6 nodes on one row at those widths;
   only at <=767px does it wrap into the broken 4+2 layout this section fixes. All !important
   uses below override this same markup's own inline styles (kept inline for per-page fidelity
   per this project's convention), not another stylesheet rule. */
@media (max-width: 767px) {
  .mta-growth-pipeline > div:not(.mta-growth-pipeline__steps) {
    /* Hides the shared horizontal line, gold fill, and traveling dot -- all absolutely
       positioned for a left-to-right layout that has no sense once steps stack vertically.
       Replaced per-step by the .mta-growth-pipeline__step::after connector below. Elements
       stay in the DOM (mta-motion.js still animates data-pipe-fill/data-pipe-dot harmlessly
       off-screen) so no JS changes are needed. */
    display: none !important;
  }

  .mta-growth-pipeline__steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .mta-growth-pipeline__step {
    position: relative;
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 18px !important;
    min-height: 86px !important;
    text-align: left !important;
  }

  .mta-growth-pipeline__step::after {
    content: "";
    position: absolute;
    left: 34px;
    top: calc(50% + 34px);
    width: 2px;
    height: calc(100% - 16px);
    background: linear-gradient(180deg, rgba(212,176,106,0.9), rgba(212,176,106,0.34));
  }

  .mta-growth-pipeline__step:last-child::after {
    display: none;
  }

  .mta-growth-pipeline__icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  .mta-growth-pipeline__icon img {
    width: 26px !important;
    height: 26px !important;
  }

  .mta-growth-pipeline__label {
    text-align: left !important;
    font-size: clamp(0.95rem, 4.2vw, 1.05rem) !important;
  }
}

/* Go-to-Market & Growth Infrastructure page's "The Growth Infrastructure" 5-step
   framework -- text-color and mobile/tablet layout fix. Human review found two real
   issues, both root-caused directly rather than guessed:

   (1) Step copy too pale: .gtm-growth-framework__copy's inline color (#9FB0C0) was
   copied verbatim from the same [data-node]/[data-node-label] pattern this component
   reused from page-ai-call-answering.php's "How It Works" section -- a muted slate-
   blue tuned as a subtle label accent, not as full-length body copy against this
   section's ivory-champagne background. Fixed at the base rule below (not mobile-
   scoped -- the contrast problem exists at every width) using var(--navy-midnight),
   the same token this section's own H2 heading already uses, matching the task's own
   "match the section heading's dark brand color, use the existing design token if
   already defined" instruction. Scoped to .gtm-growth-framework__copy specifically
   (per-component class, not a global light-background body-copy rule) so no other
   page's text is affected. The step TITLE (.gtm-growth-framework__title, #7E8FA0)
   was left unchanged -- only "the explanatory text" was reported as unreadable, and
   darkening the title too was not requested.

   (2) Mobile/tablet layout appearing to break/cycle on step 01: identical root cause
   to the homepage's own .mta-growth-pipeline bug above -- the shared horizontal line,
   gold fill, and traveling dot are absolutely positioned (left:8%/right:8%) for a
   left-to-right desktop row that has no sense once .gtm-growth-framework__steps wraps
   into fewer columns, pinning them near the top of the stack right where step 01
   sits and reading as the whole component stuck/cycling there. This is a pure CSS
   layout collision, not a JS/motion bug -- confirmed by reading mta-motion.js's
   runPipeline()/light()/unlight(): they only ever toggle border-color/box-shadow/
   label-color on already-visible content, never opacity/display at the container
   level, so no JS change was needed here, same as the homepage fix required none.

   Breakpoint chosen at 1024px, not the usual 767px mobile-only cutoff: computed the
   actual column math for repeat(auto-fit,minmax(190px,1fr)) against this section's
   own clamp()-based padding/gap -- 5 columns only fit cleanly starting around
   ~1120-1150px viewport width (5*190px minimum + 4 gaps up to 24px each exceeds the
   content width available below that), meaning every tablet width in the task's own
   checkpoint list (768/810/820/834/1024) still falls inside the broken auto-wrap
   zone under the desktop-only grid. Verified 1280px and 1440px both compute above
   that threshold and are unaffected. Scoped to .gtm-growth-framework (added only to
   this page's own markup) rather than the bare [data-pipeline]/[data-node] attributes
   those elements also carry, for the identical reason the homepage fix used
   .mta-growth-pipeline instead of the bare attributes: Training's "Jack's Proven
   Sales Framework" section reuses the same bare attributes for its own unrelated
   pipeline and must not be affected by this change. Unlike the homepage's short
   icon+label steps, each step here carries a full paragraph of body copy, so this
   uses a taller title+copy stepper layout (left-aligned, not centered) rather than
   copying the homepage's compact centered icon-row treatment verbatim -- copying it
   as-is would have made the longer copy blocks feel cramped and unbalanced.

   All !important uses below override this same markup's own inline styles (kept
   inline for per-page fidelity per this project's convention), not another
   stylesheet rule -- identical justification to the homepage fix's own !important
   usage above. Reduced-motion needs no separate handling here: mta-motion.js's
   existing reduced-motion branch already lights every node and fills the bar
   immediately with no sequential reveal, and since step text was never hidden by
   opacity/display at any point (only decorative highlight properties toggle), all
   five steps' content was already fully visible to reduced-motion users before this
   fix and remains so after it. */
.gtm-growth-framework__copy {
  color: var(--navy-midnight);
}

/* Step-title persistence fix -- human review found the step headings under each
   numbered bubble "disappearing during the animation." Root-caused precisely, not
   assumed: mta-motion.js's shared light()/unlight() functions (used by both this
   page's [data-pipeline] framework and the homepage's own .mta-growth-pipeline via
   the same generic [data-node-label] selector) set the ACTIVE step's title color
   directly via label.style.color = 'var(--ivory-champagne)' -- correct and highly
   visible on the homepage's dark var(--navy-midnight) pipeline-section background,
   but on THIS page the framework section's own background is var(--ivory-champagne)
   (#F5EFE1) -- the exact same value. As each step's sequential-lighting timer fires,
   that step's title color becomes literally identical to the background it sits on,
   reading as the heading vanishing, not merely dimming. This runs at every viewport
   (the per-node lighting timers are not gated by screen width), so this is not a
   mobile-only issue and this rule is intentionally NOT wrapped in a media query.
   Fixed with !important -- the only way an external stylesheet rule can override a
   value JS sets directly via .style.color, since that is functionally an inline
   style. This neutralizes both the unlit state (JS resets to '', which already fell
   back to a safely-visible #7E8FA0 inline default -- never the bug) and the lit
   state (the actual bug) by pinning the title to always render in this section's
   own dark heading color regardless of which state JS applies. No change was made
   to mta-motion.js itself -- light()/unlight() are shared with the homepage's own
   pipeline, where this same behavior is correct and must not be altered; fixing this
   at the page-scoped .gtm-growth-framework__title class (not the bare
   [data-node-label] attribute) keeps the homepage's pipeline, and Training's own
   unrelated reuse of the same bare attributes, completely unaffected -- the same
   scoping rationale already documented for every other fix on this component. The
   bubble's own active-state treatment (border-color/box-shadow glow/translateY lift
   in light(), untouched by this fix) continues to carry the "this step is active"
   visual emphasis, so highlighting is preserved even though the title itself no
   longer participates in it. */
.gtm-growth-framework__title {
  color: var(--navy-midnight) !important;
}

@media (max-width: 1024px) {
  .gtm-growth-framework > div:not(.gtm-growth-framework__steps) {
    /* Hides the shared horizontal line, gold fill, and traveling dot -- see comment
       above. Elements stay in the DOM (mta-motion.js still animates data-pipe-fill/
       data-pipe-dot harmlessly off-screen) so no JS changes are needed. */
    display: none !important;
  }

  .gtm-growth-framework__steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  .gtm-growth-framework__step {
    position: relative;
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
    padding-block: 18px 28px !important;
    text-align: left !important;
  }

  .gtm-growth-framework__step::after {
    content: "";
    position: absolute;
    left: 36px;
    top: 92px;
    bottom: -10px;
    width: 2px;
    background: linear-gradient(180deg, rgba(212,176,106,0.85), rgba(212,176,106,0.22));
  }

  .gtm-growth-framework__step:last-child::after {
    display: none;
  }

  .gtm-growth-framework__number {
    flex-shrink: 0;
  }

  .gtm-growth-framework__content {
    min-width: 0;
    padding-top: 4px;
    text-align: left !important;
  }

  .gtm-growth-framework__title {
    text-align: left !important;
  }

  .gtm-growth-framework__copy {
    text-align: left !important;
  }
}