/* Ki — Slow Intro ("The long way")
   Source: Ki Sustainability.html lines 106–117 (eyebrow-rule, section-head,
   lead-statement). Scoped under .ki-scope .ki-slow-intro. */

.ki-scope .ki-slow-intro { background: #fff; padding: 140px 0; position: relative; }

/* Full-bleed background image + overlay layers (driven by Elementor's native
   background group controls). Transparent until configured, so the solid
   section background shows through by default. Content (.wrap) sits above them. */
.ki-scope .ki-slow-intro .ki-slow-intro-bg,
.ki-scope .ki-slow-intro .ki-slow-intro-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.ki-scope .ki-slow-intro .ki-slow-intro-bg      { z-index: 0; }
.ki-scope .ki-slow-intro .ki-slow-intro-overlay { z-index: 1; }
.ki-scope .ki-slow-intro > .wrap { position: relative; z-index: 2; }

.ki-scope .ki-slow-intro .section-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 0;
}

/* eyebrow-rule — label + trailing flex rule line */
.ki-scope .ki-slow-intro .eyebrow-rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ki-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--ki-blue-deep); margin-bottom: 28px;
}
.ki-scope .ki-slow-intro .eyebrow-rule::after { content: ""; flex: 1; height: 1px; background: var(--ki-rule); }

.ki-scope .ki-slow-intro .lead-statement {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18; letter-spacing: -0.005em;
  max-width: 20ch; margin: 0; color: #000;
}
.ki-scope .ki-slow-intro .lead-statement em { font-family: var(--ki-serif-italic); font-style: italic; }

.ki-scope .ki-slow-intro .right { font-family: var(--ki-sans); font-size: 17px; line-height: 1.7; color: var(--ki-ink-mute); }
.ki-scope .ki-slow-intro .right p { margin: 0; }
.ki-scope .ki-slow-intro .right p + p { margin-top: 16px; }
.ki-scope .ki-slow-intro .right p.is-emphasis {
  font-family: var(--ki-serif); font-size: 22px; color: #000; line-height: 1.5;
}

@media (max-width: 1100px) {
  .ki-scope .ki-slow-intro { padding: 96px 0; }
  .ki-scope .ki-slow-intro .section-head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  .ki-scope .ki-slow-intro { padding: 72px 0; }
}