/* ===========================================================
   Section 3 - The Philosophy (Elementor)
   A manifesto headline that reveals line by line, then three
   principles on a stair, each opening behind a rule that draws.
   Motion lives in "FAS 03 Philosophy JS".
   Tree: ksec3 > kp3wrap > kp3head | kp3cols (kp3c1..3)
   =========================================================== */

.elementor-element-ksec3 { position: relative; overflow: hidden; }

/* warmth low on the left, opposite corner to section 2, so the two
   bone sections do not read as one flat slab */
.elementor-element-ksec3::after {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(52% 46% at 4% 104%, rgba(224, 49, 43, .07), transparent 64%);
}
.elementor-element-ksec3 > .e-con { position: relative; z-index: 1; }

/* ---------- headline ---------- */
.elementor-element-kp3head { max-width: 780px; }
.elementor-element-kp3eyebrow { margin-bottom: 16px !important; }

/* each line sits in its own window so it can rise into view */
.elementor-element-kp3l1,
.elementor-element-kp3l2 { overflow: hidden; padding-bottom: 6px; }
.elementor-element-kp3l2 { margin-bottom: -6px !important; }

.kp3-and { color: #E0312B; display: inline-block; }

.elementor-element-kp3sub { max-width: 58ch; }

/* ---------- the three principles ---------- */
/* Spacing for this section is set in Elementor now: kp3cols carries the gap
   above the three principles, and each card its own padding. The rules that
   used to force them from here have gone - they were the reason the panel
   fields did nothing. */

/* The rule above each principle is a real container now (kp3r1..3), not a
   ::before - Elementor's --background-overlay owns ::before on a container,
   and a real element is editable from the panel. Its padding lives on the
   body wrapper kp3b1..3, because the card sits at padding 0 so the bar can
   reach both edges. */

.elementor-element-kp3cols .kp3-d { max-width: 34ch; }
.elementor-element-kp3cols .kp3-d p { margin: 0; }

@media (max-width: 767px) {
  .elementor-element-kp3cols .kp3-d { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-element-kp3cols > .e-con::before { transform: scaleX(1); }
}