/*
 * Process-section headline + animation kill.
 *
 * The cards under <section data-framer-name="Process Section"> are
 * Framer-Motion-driven: by default they fade/scale in (and out) every time
 * they cross the viewport. The user reported this as a distracting "pop"
 * and asked for all animation removed. This file pins the cards to their
 * shown state at all times — no transitions, no animations, no fade-in.
 *
 * Mobile fix: Framer's runtime applies `transform: scale(1.1)` as the
 * "shown" state. At a 390px viewport with a 359px card base width,
 * scale(1.1) inflates each card to ~395px, blowing past the viewport
 * edge. Below 720px we pin `transform: none` so the cards stay at their
 * natural size and the section stops introducing horizontal scroll.
 */

/* ---- Headline (above the three cards) ------------------------------ */

.gs-process-headline {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 56px 20px 0;
  font-family: inherit;
}

.gs-process-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 16, 22, 0.55);
  margin: 0 0 12px;
}

.gs-process-title {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a1016;
  margin: 0 0 14px;
}

.gs-process-subtitle {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10, 16, 22, 0.65);
  margin: 0;
}

@media (max-width: 810px) {
  .gs-process-headline { padding: 40px 16px 0; margin-bottom: 22px; }
  .gs-process-title { font-size: 32px; }
}

@media (max-width: 520px) {
  .gs-process-headline { padding: 32px 16px 0; }
  .gs-process-title { font-size: 26px; }
  .gs-process-subtitle { font-size: 14px; }
  .gs-process-eyebrow { font-size: 11px; letter-spacing: 0.16em; }
}

/* ---- Animation kill (cards) ---------------------------------------- *
 *
 * Applied unconditionally — no JS lock class dependency. This runs from
 * first paint, so Framer Motion's initial pop-in is overridden the
 * moment a card renders.
 *
 * Scope: only the cards inside the Process Section's [Primary] container.
 * Other Framer subtrees on the page that happen to share these class
 * names are untouched.
 */

section[data-framer-name="Process Section"] [data-framer-name="Primary"],
section[data-framer-name="Process Section"] [data-framer-name="Primary"] > div {
  opacity: 1 !important;
  /* transform: none so the cards render at their natural size at every
     viewport. Framer's runtime applies scale(1.1) as the "shown" state
     of its scroll animation, but at 3-up desktop that scale makes the
     cards overlap into each other (the "Partnership" title gets clipped
     on the left), and at 390px mobile it overflows the viewport.
     Natural scale 1.0 is the safe + readable state everywhere. */
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Disable transitions / animations on every descendant too — Framer
   sometimes nests an animated wrapper inside the card. */
section[data-framer-name="Process Section"] [data-framer-name="Primary"] * {
  transition: none !important;
  animation: none !important;
}

/* prefers-reduced-motion — same end state, just explicit. */
@media (prefers-reduced-motion: reduce) {
  section[data-framer-name="Process Section"] [data-framer-name="Primary"],
  section[data-framer-name="Process Section"] [data-framer-name="Primary"] > div,
  section[data-framer-name="Process Section"] [data-framer-name="Primary"] * {
    transition: none !important;
    animation: none !important;
  }
}